/* =========================================================
   TSL DRIVER APP
   wwwroot/css/driver.css
========================================================= */


/* =========================================================
   GRUNDLAYOUT
========================================================= */

.driver-shell {
    min-height: 100vh;
    background: radial-gradient( circle at top right, rgba(59, 130, 246, .07), transparent 35% ), #06111f;
    color: #ffffff;
}


/* =========================================================
   TOPBAR
========================================================= */

.driver-appbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 70px;
    background: rgba(6, 17, 31, .96);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.driver-appbar-inner {
    width: 100%;
    max-width: 950px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =========================================================
   LOGO / BRAND
========================================================= */

.driver-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.driver-brand-logo {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #ffffff;
}

.driver-brand-divider {
    width: 1px;
    height: 25px;
    background: rgba(255,255,255,.12);
}

.driver-brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .driver-brand-name strong {
        font-size: 11px;
        letter-spacing: 2px;
        color: #94a3b8;
    }

    .driver-brand-name span {
        margin-top: 3px;
        font-size: 9px;
        letter-spacing: 1.5px;
        color: #475569;
    }


/* =========================================================
   BENUTZERBEREICH
========================================================= */

.driver-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.driver-user-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.driver-user-info,
.driver-user-text {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.2;
}

.driver-user-name {
    font-size: 13px;
    font-weight: 650;
    color: #f8fafc;
}

.driver-user-role {
    margin-top: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
}


/* =========================================================
   HAUPTBEREICH
========================================================= */

.driver-app-main,
.driver-main {
    width: 100%;
    min-height: calc(100vh - 70px);
    padding-bottom: 110px;
}

.driver-content {
    width: 100%;
}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.driver-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 1100;
    width: min(calc(100% - 28px), 720px);
    height: 72px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 6px;
    background: rgba(12, 24, 43, .97);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* =========================================================
   BOTTOM NAVIGATION ITEM
========================================================= */

.driver-nav-item {
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 16px;
    color: #64748b;
    text-decoration: none !important;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

    .driver-nav-item .mud-icon-root {
        font-size: 24px;
    }

    .driver-nav-item span {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .2px;
    }

    .driver-nav-item:hover {
        color: #cbd5e1;
        background: rgba(255,255,255,.035);
    }

    .driver-nav-item:active {
        transform: scale(.96);
    }

    .driver-nav-item.active {
        color: #60a5fa;
        background: rgba(59,130,246,.12);
    }

        .driver-nav-item.active .mud-icon-root {
            color: #60a5fa;
        }


/* =========================================================
   SEITENCONTAINER
========================================================= */

.driver-page {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 20px;
}


/* =========================================================
   SEITEN HEADER
========================================================= */

.driver-header {
    margin-bottom: 24px;
}

.driver-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.driver-back-button {
    flex-shrink: 0;
}

.driver-header-title {
    font-size: 30px;
    font-weight: 750;
    color: #ffffff;
    line-height: 1.2;
}

.driver-header-subtitle {
    margin-top: 6px;
    font-size: 14px;
    color: #94a3b8;
}

.driver-muted {
    color: #94a3b8 !important;
}

.driver-section-title {
    font-weight: 700 !important;
    color: #f8fafc !important;
}


/* =========================================================
   ALLGEMEINE DRIVER CARD
========================================================= */

.driver-card {
    background: linear-gradient( 180deg, rgba(17,28,49,.98), rgba(10,18,32,.98) ) !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.02);
}


/* =========================================================
   TOUR CARD
========================================================= */

.driver-tour-card {
    padding: 22px;
    background: linear-gradient( 180deg, rgba(17,28,49,.98), rgba(10,18,32,.98) ) !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.02);
    margin-bottom: 24px;
}

.driver-tour-number {
    font-size: 26px;
    font-weight: 750;
    color: #ffffff;
    margin-bottom: 14px;
}


/* =========================================================
   INFO GRID
========================================================= */

.driver-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.driver-info-item {
    padding: 14px 16px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
}

.driver-info-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #64748b;
}

.driver-info-value {
    font-size: 15px;
    font-weight: 600;
    color: #f8fafc;
}


/* =========================================================
   STOPP CARD
========================================================= */

.driver-stopp-card {
    position: relative;
    padding: 20px;
    margin-bottom: 16px;
    background: linear-gradient( 180deg, rgba(17,28,49,.98), rgba(10,18,32,.98) ) !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,.25);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    .driver-stopp-card:hover {
        border-color: rgba(59,130,246,.35);
        box-shadow: 0 12px 35px rgba(0,0,0,.35);
    }


/* =========================================================
   STOPPNUMMER
========================================================= */

.driver-stopp-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(59,130,246,.15);
    color: #60a5fa;
    font-size: 14px;
    font-weight: 750;
}


/* =========================================================
   KUNDE / ADRESSE
========================================================= */

.driver-customer {
    margin-top: 14px;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.driver-address {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.5;
    color: #cbd5e1;
}


/* =========================================================
   SENDUNG
========================================================= */

.driver-shipment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.driver-shipment-item {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
}

.driver-shipment-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
}

.driver-shipment-value {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 650;
    color: #f8fafc;
}


/* =========================================================
   ZEITEN
========================================================= */

.driver-times {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    font-size: 13px;
    color: #94a3b8;
}


/* =========================================================
   AKTIONSBUTTONS
========================================================= */

.driver-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

    .driver-actions .mud-button-root {
        min-height: 48px;
        border-radius: 12px !important;
        font-weight: 650;
    }

.driver-main-action {
    min-height: 52px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}


/* =========================================================
   STATUS
========================================================= */

.driver-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
}

.driver-status-open {
    background: rgba(148,163,184,.12);
    color: #cbd5e1;
}

.driver-status-arrived {
    background: rgba(245,158,11,.15);
    color: #fbbf24;
}

.driver-status-completed {
    background: rgba(34,197,94,.15);
    color: #4ade80;
}


/* =========================================================
   LEERE TOUR
========================================================= */

.driver-empty {
    padding: 50px 24px;
    text-align: center;
    background: rgba(255,255,255,.025);
    border: 1px dashed rgba(255,255,255,.10);
    border-radius: 18px;
    color: #94a3b8;
}


/* =========================================================
   TIMELINE
========================================================= */

.driver-page .mud-timeline {
    padding: 0;
}

.driver-page .mud-timeline-item {
    padding-bottom: 10px;
}

.driver-page .mud-timeline-line {
    border-color: rgba(59,130,246,.25) !important;
}


/* =========================================================
   DASHBOARD MENÜ
========================================================= */

.driver-menu-card {
    min-height: 130px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    background: linear-gradient( 180deg, rgba(17,28,49,.98), rgba(10,18,32,.98) ) !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px !important;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

    .driver-menu-card:hover {
        transform: translateY(-2px);
        border-color: rgba(59,130,246,.35);
    }

    .driver-menu-card:active {
        transform: scale(.98);
    }

.driver-menu-title {
    margin-top: 12px !important;
    font-weight: 600 !important;
}


/* =========================================================
   DATEI UPLOAD
========================================================= */

.driver-upload-area {
    position: relative;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(96,165,250,.35);
    border-radius: 16px;
}

.driver-file-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-top: 18px;
    padding: 0 18px;
    border-radius: 11px;
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.35);
    color: #60a5fa;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .driver-file-button:hover {
        background: rgba(59,130,246,.22);
        border-color: rgba(96,165,250,.55);
    }

.driver-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}


/* =========================================================
   AUSGEWÄHLTE DATEI
========================================================= */

.driver-selected-file {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 12px;
}

.driver-selected-file-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .driver-selected-file-info strong {
        overflow: hidden;
        color: #f8fafc;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .driver-selected-file-info span {
        font-size: 12px;
        color: #94a3b8;
    }


/* =========================================================
   DOKUMENTKARTE
========================================================= */

.driver-document-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 16px;
    background: linear-gradient( 180deg, rgba(17,28,49,.98), rgba(10,18,32,.98) ) !important;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px !important;
}

.driver-document-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59,130,246,.10);
    border-radius: 12px;
}

.driver-document-content {
    min-width: 0;
    flex: 1;
}

.driver-document-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #60a5fa;
}

.driver-document-name {
    margin-top: 3px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-document-date {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 12px;
    color: #64748b;
}


/* =========================================================
   FOTO GALERIE
========================================================= */

.driver-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.driver-photo-card {
    overflow: hidden;
    background: linear-gradient( 180deg, rgba(17,28,49,.98), rgba(10,18,32,.98) );
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
}

    .driver-photo-card img {
        display: block;
        width: 100%;
        height: 180px;
        object-fit: cover;
        background: #0a1220;
    }

.driver-photo-info {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
}

.driver-photo-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #94a3b8;
}


/* =========================================================
   SIGNATURE PAD
========================================================= */

.signature-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    background: #ffffff;
    border: 2px solid rgba(148, 163, 184, .45);
    border-radius: 16px;
    overflow: hidden;
}

.signature-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.signature-line {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 48px;
    height: 1px;
    background: #94a3b8;
    pointer-events: none;
}

.signature-label {
    position: absolute;
    left: 8%;
    bottom: 20px;
    color: #64748b;
    font-size: 12px;
    pointer-events: none;
}


/* =========================================================
   TABLET / DESKTOP FOTO GALERIE
========================================================= */

@media (min-width: 700px) {

    .driver-photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .driver-appbar {
        height: 62px;
    }

    .driver-appbar-inner {
        padding: 0 14px;
    }

    .driver-brand-logo {
        font-size: 25px;
    }

    .driver-brand-divider {
        height: 22px;
    }

    .driver-brand-name strong {
        font-size: 10px;
    }

    .driver-brand-name span {
        display: none;
    }

    .driver-user-text,
    .driver-user-info {
        display: none;
    }

    .driver-app-main,
    .driver-main {
        min-height: calc(100vh - 62px);
        padding-bottom: 100px;
    }

    .driver-bottom-nav {
        bottom: 9px;
        width: calc(100% - 16px);
        height: 68px;
        padding: 5px;
        border-radius: 19px;
    }

    .driver-nav-item {
        height: 56px;
        border-radius: 14px;
    }

        .driver-nav-item .mud-icon-root {
            font-size: 22px;
        }

        .driver-nav-item span {
            font-size: 8px;
        }

    .driver-page {
        padding: 14px;
    }

    .driver-header-title {
        font-size: 26px;
    }

    .driver-tour-card {
        padding: 18px;
        border-radius: 16px;
    }

    .driver-tour-number {
        font-size: 23px;
    }

    .driver-info-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .driver-stopp-card {
        padding: 17px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .driver-customer {
        font-size: 18px;
    }

    .driver-shipment {
        grid-template-columns: 1fr 1fr;
    }

    .driver-times {
        flex-direction: column;
        gap: 5px;
    }

    .driver-actions {
        grid-template-columns: 1fr;
    }

        .driver-actions .mud-button-root {
            width: 100%;
            min-height: 52px;
        }

    .driver-upload-area {
        padding: 26px 16px;
    }

    .driver-file-button {
        width: 100%;
        min-height: 50px;
    }

    .driver-document-card {
        padding: 14px;
    }

    .signature-wrapper {
        height: 240px;
        border-radius: 14px;
    }
}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .driver-photo-card img {
        height: 145px;
    }
}


/* =========================================================
   SEHR KLEINE HANDYS
========================================================= */

@media (max-width: 380px) {

    .driver-brand-divider,
    .driver-brand-name {
        display: none;
    }

    .driver-bottom-nav {
        width: calc(100% - 10px);
        bottom: 5px;
    }

    .driver-nav-item span {
        font-size: 7.5px;
    }

    .driver-page {
        padding: 10px;
    }

    .driver-shipment {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   TSL DRIVER - DASHBOARD 2026
   Neues Mobile Dashboard
========================================================= */

.driver-dashboard {
    max-width: 520px;
    padding-top: 18px;
}


/* =========================================================
   BEGRÜSSUNG
========================================================= */

.driver-dashboard-welcome {
    margin: 2px 2px 18px;
}

.driver-dashboard-greeting {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.driver-dashboard-name {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 750;
    color: #ffffff;
}

.driver-dashboard-role {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #64748b;
}


/* =========================================================
   DASHBOARD CARDS
========================================================= */

.driver-dashboard-card {
    margin-bottom: 12px;
    padding: 17px;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(19, 34, 57, .98), rgba(11, 23, 40, .98) );
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    box-shadow: 0 8px 25px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.018);
}

.driver-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.driver-card-eyebrow {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #a7b4c8;
}


/* =========================================================
   AKTIVE TOUR
========================================================= */

.driver-dashboard-tour-number {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .2px;
    color: #f8fafc;
}

.driver-tour-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 4px 10px;
    white-space: nowrap;
    background: rgba(37, 99, 235, .18);
    border: 1px solid rgba(59, 130, 246, .15);
    border-radius: 6px;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 600;
}

.driver-tour-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 19px;
    margin-bottom: 7px;
    color: #cbd5e1;
    font-size: 12px;
}

    .driver-tour-progress-header strong {
        color: #e2e8f0;
        font-size: 12px;
    }

.driver-progress-track {
    width: 100%;
    height: 6px;
    overflow: hidden;
    background: rgba(148, 163, 184, .18);
    border-radius: 999px;
}

.driver-progress-value {
    height: 100%;
    min-width: 0;
    background: linear-gradient( 90deg, #2563eb, #60a5fa );
    border-radius: inherit;
    transition: width .35s ease;
}

.driver-tour-progress-footer {
    margin-top: 7px;
    font-size: 10px;
    color: #64748b;
}


/* =========================================================
   BUTTONS
========================================================= */

.driver-primary-button,
.driver-secondary-button {
    width: 100%;
    min-height: 45px;
    margin-top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

.driver-primary-button {
    color: #ffffff;
    background: linear-gradient( 180deg, #1670e8, #0d5fd3 );
    border: 1px solid rgba(96, 165, 250, .35);
    box-shadow: 0 5px 15px rgba(0, 83, 190, .20);
}

    .driver-primary-button:hover {
        background: linear-gradient( 180deg, #2580f5, #1468df );
    }

.driver-secondary-button {
    color: #e2e8f0;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(148,163,184,.22);
}

    .driver-secondary-button:hover {
        background: rgba(255,255,255,.05);
        border-color: rgba(148,163,184,.35);
    }

    .driver-primary-button:active,
    .driver-secondary-button:active {
        transform: scale(.985);
    }


/* =========================================================
   ARBEITSZEIT
========================================================= */

.driver-work-subtitle {
    font-size: 11px;
    color: #64748b;
}

.driver-work-time {
    font-size: 26px;
    line-height: 1;
    font-weight: 750;
    color: #4ade80;
}

.driver-work-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    font-size: 11px;
    color: #86d49b;
}

.driver-work-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34,197,94,.55);
}


/* =========================================================
   NÄCHSTER STOPP
========================================================= */

.driver-next-stop-clock {
    color: #4f83c7 !important;
    font-size: 23px !important;
}

.driver-next-stop-content {
    margin-top: 13px;
}

.driver-next-stop-location {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.driver-location-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border-radius: 50%;
}

.driver-next-stop-name {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 650;
    color: #f8fafc;
}

.driver-next-stop-hint {
    margin-top: 5px;
    font-size: 11px;
    color: #7f8da3;
}


/* =========================================================
   NACHRICHTEN-HINWEIS
========================================================= */

.driver-message-notice {
    width: 100%;
    min-height: 60px;
    margin-bottom: 12px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    color: inherit;
    background: rgba(30, 64, 175, .10);
    border: 1px solid rgba(59,130,246,.16);
    border-radius: 11px;
    cursor: pointer;
}

.driver-message-notice-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.13);
    border-radius: 9px;
}

.driver-message-notice-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .driver-message-notice-content strong {
        font-size: 12px;
        color: #e2e8f0;
    }

    .driver-message-notice-content span {
        margin-top: 2px;
        font-size: 10px;
        color: #718096;
    }


/* =========================================================
   KURZÜBERSICHT
========================================================= */

.driver-dashboard-summary {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    margin-top: 4px;
    padding: 13px 5px;
}

.driver-summary-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

    .driver-summary-item > div {
        display: flex;
        flex-direction: column;
    }

    .driver-summary-item strong {
        color: #f8fafc;
        font-size: 15px;
        line-height: 1.1;
    }

    .driver-summary-item span {
        margin-top: 2px;
        color: #64748b;
        font-size: 9px;
    }

.driver-summary-icon {
    color: #60a5fa !important;
    font-size: 20px !important;
}

    .driver-summary-icon.success {
        color: #4ade80 !important;
    }

.driver-summary-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.07);
}


/* =========================================================
   KEINE TOUR
========================================================= */

.driver-no-tour {
    margin-top: 15px;
    padding: 13px;
    color: #94a3b8;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
    font-size: 12px;
}
/* =========================================================
   TSL DRIVER - NEUE TOURANSICHT
========================================================= */

.driver-tour-page {
    max-width: 560px;
}

.driver-tour-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 2px 18px;
}

.driver-tour-page-kicker {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 11px;
}

.driver-tour-page-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 750;
}


/* TOURÜBERSICHT */

.driver-tour-overview {
    margin-bottom: 12px;
    padding: 16px;
    background: linear-gradient( 145deg, rgba(19,34,57,.98), rgba(11,23,40,.98) );
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
}

.driver-tour-overview-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.driver-tour-overview-number {
    color: #f8fafc;
    font-size: 18px;
    font-weight: 750;
}

.driver-tour-overview-date {
    margin-top: 3px;
    color: #64748b;
    font-size: 10px;
}

.driver-tour-vehicle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #60a5fa;
    background: rgba(59,130,246,.07);
    border: 1px solid rgba(59,130,246,.12);
    border-radius: 8px;
}

    .driver-tour-vehicle > div {
        display: flex;
        flex-direction: column;
    }

    .driver-tour-vehicle span {
        color: #64748b;
        font-size: 8px;
        text-transform: uppercase;
    }

    .driver-tour-vehicle strong {
        margin-top: 1px;
        color: #dbeafe;
        font-size: 11px;
    }


/* LISTE / KARTE */

.driver-tour-view-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 15px 0 17px;
    padding: 3px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;
}

.driver-tour-view-button {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #94a3b8;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    .driver-tour-view-button:hover {
        color: #e2e8f0;
        background: rgba(255,255,255,.035);
    }


/* STOPP SECTION */

.driver-tour-stop-section {
    margin-top: 4px;
}

.driver-tour-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 13px;
}

    .driver-tour-section-heading strong {
        color: #f8fafc;
        font-size: 15px;
    }


/* TIMELINE */

.driver-stop-timeline {
    width: 100%;
}

.driver-timeline-stop {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
}

.driver-stop-timeline-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.driver-stop-marker {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #111e30;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

    .driver-stop-marker.current {
        color: #ffffff;
        background: #1670e8;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59,130,246,.09);
    }

    .driver-stop-marker.completed {
        color: #ffffff;
        background: #16a34a;
        border-color: #22c55e;
    }

    .driver-stop-marker .mud-icon-root {
        font-size: 16px !important;
    }

.driver-stop-line {
    width: 1px;
    min-height: 35px;
    flex: 1;
    background: rgba(148,163,184,.16);
}

    .driver-stop-line.completed {
        background: rgba(34,197,94,.42);
    }


/* STOPP CARD */

.driver-stop-content {
    min-width: 0;
    margin: 0 0 12px 5px;
    padding: 14px;
    background: linear-gradient( 145deg, rgba(17,30,50,.96), rgba(10,20,35,.96) );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
}

.driver-timeline-stop.current .driver-stop-content {
    border-color: rgba(59,130,246,.34);
    box-shadow: 0 7px 25px rgba(0,0,0,.17);
}

.driver-timeline-stop.completed .driver-stop-content {
    opacity: .78;
}

.driver-stop-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.driver-stop-main {
    min-width: 0;
}

.driver-stop-label {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.driver-stop-main h3 {
    margin: 0;
    overflow: hidden;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 650;
    text-overflow: ellipsis;
}


/* STATUS */

.driver-timeline-status {
    flex: 0 0 auto;
    padding: 4px 7px;
    color: #94a3b8;
    background: rgba(148,163,184,.08);
    border-radius: 5px;
    font-size: 8px;
    font-weight: 650;
}

    .driver-timeline-status.active {
        color: #60a5fa;
        background: rgba(59,130,246,.12);
    }

    .driver-timeline-status.warning {
        color: #fbbf24;
        background: rgba(245,158,11,.10);
    }

    .driver-timeline-status.completed {
        color: #4ade80;
        background: rgba(34,197,94,.10);
    }


/* ADRESSE */

.driver-stop-address {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 9px;
    color: #7f8da3;
}

    .driver-stop-address > .mud-icon-root {
        flex: 0 0 auto;
        margin-top: 1px;
        color: #4f83c7;
        font-size: 16px !important;
    }

    .driver-stop-address > div {
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 10px;
        line-height: 1.35;
    }


/* META */

.driver-stop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
}

    .driver-stop-meta > div {
        display: flex;
        flex-direction: column;
    }

    .driver-stop-meta span {
        color: #536176;
        font-size: 8px;
        text-transform: uppercase;
    }

    .driver-stop-meta strong {
        margin-top: 2px;
        color: #cbd5e1;
        font-size: 10px;
        font-weight: 600;
    }


/* ZEITEN */

.driver-stop-times {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

    .driver-stop-times span {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #94a3b8;
        font-size: 9px;
    }

    .driver-stop-times .mud-icon-root {
        font-size: 14px !important;
    }


/* WORKFLOW */

.driver-stop-actions {
    margin-top: 11px;
}

    .driver-stop-actions .driver-primary-button {
        min-height: 39px;
        margin-top: 0;
        font-size: 11px;
    }

.driver-stop-document-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 7px;
}

    .driver-stop-document-actions button {
        min-width: 0;
        min-height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px;
        color: #a8c7ef;
        background: rgba(59,130,246,.055);
        border: 1px solid rgba(59,130,246,.13);
        border-radius: 6px;
        font-family: inherit;
        font-size: 8px;
        cursor: pointer;
    }

.driver-stop-completed {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #4ade80;
    font-size: 10px;
}


/* KARTE */

.driver-tour-map-placeholder {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 25px;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(96,165,250,.20);
    border-radius: 12px;
}

.driver-tour-map-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border-radius: 50%;
}

.driver-tour-map-placeholder strong {
    color: #f8fafc;
    font-size: 15px;
}

.driver-tour-map-placeholder > span {
    max-width: 280px;
    margin-top: 5px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.5;
}


/* EMPTY */

.driver-tour-empty-state {
    margin-top: 40px;
    padding: 30px 20px;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
}

.driver-tour-empty-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border-radius: 50%;
}

.driver-tour-empty-state h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 18px;
}

.driver-tour-empty-state p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 11px;
}

.driver-tour-view-button.active {
    color: #ffffff;
    background: rgba(59,130,246,.16);
    box-shadow: inset 0 0 0 1px rgba(59,130,246,.14);
}
/* =========================================================
   STOPP ÖFFNEN
========================================================= */

.driver-stop-open-button {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    padding: 0 11px;
    color: #9ec5f8;
    background: rgba(59,130,246,.055);
    border: 1px solid rgba(59,130,246,.12);
    border-radius: 7px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .driver-stop-open-button:hover {
        color: #ffffff;
        background: rgba(59,130,246,.11);
        border-color: rgba(59,130,246,.25);
    }

.driver-timeline-stop.current
.driver-stop-open-button {
    color: #ffffff;
    background: #1268dc;
    border-color: #2580f5;
}


/* =========================================================
   TSL DRIVER - STOPP DETAIL 2026
========================================================= */

.driver-stopp-page {
    max-width: 540px;
}

.driver-stopp-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 3px 0 17px;
}

.driver-stopp-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #cbd5e1;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    cursor: pointer;
}

.driver-stopp-header-content {
    min-width: 0;
}

.driver-stopp-header-label {
    display: block;
    color: #60a5fa;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.driver-stopp-header h1 {
    margin: 2px 0 0;
    overflow: hidden;
    color: #f8fafc;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 750;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.driver-stopp-order {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 9px;
}


/* STATUS */

.driver-stopp-status {
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 700;
}

    .driver-stopp-status.planned {
        color: #94a3b8;
        background: rgba(148,163,184,.09);
    }

    .driver-stopp-status.arrived {
        color: #60a5fa;
        background: rgba(59,130,246,.11);
    }

    .driver-stopp-status.working {
        color: #fbbf24;
        background: rgba(245,158,11,.10);
    }

    .driver-stopp-status.ready {
        color: #4ade80;
        background: rgba(34,197,94,.10);
    }

    .driver-stopp-status.completed {
        color: #4ade80;
        background: rgba(34,197,94,.12);
    }


/* CARD */

.driver-stopp-card {
    margin-bottom: 11px;
    padding: 15px;
    background: linear-gradient( 145deg, rgba(18,32,53,.97), rgba(10,21,37,.97) );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
}

.driver-stopp-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.driver-stopp-section-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border-radius: 6px;
}


/* EMPFÄNGER */

.driver-stopp-recipient {
    margin-top: 12px;
}

    .driver-stopp-recipient h2 {
        margin: 0 0 5px;
        color: #f8fafc;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
    }

.driver-stopp-address {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.5;
}

.driver-stopp-contact {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
}

    .driver-stopp-contact span {
        color: #536176;
        font-size: 8px;
        text-transform: uppercase;
    }

    .driver-stopp-contact strong {
        margin-top: 2px;
        color: #cbd5e1;
        font-size: 11px;
    }

.driver-stopp-contact-actions {
    display: flex;
    gap: 7px;
    margin-top: 13px;
}

    .driver-stopp-contact-actions .driver-primary-button {
        flex: 1;
        margin: 0;
        min-height: 41px;
    }

.driver-stopp-phone {
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 13px;
    color: #a8c7ef;
    text-decoration: none;
    background: rgba(59,130,246,.055);
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
}


/* TERMIN */

.driver-stopp-appointment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
}

    .driver-stopp-appointment > div {
        display: flex;
        flex-direction: column;
    }

        .driver-stopp-appointment > div + div {
            padding-left: 15px;
            border-left: 1px solid rgba(255,255,255,.06);
        }

    .driver-stopp-appointment span {
        color: #64748b;
        font-size: 9px;
    }

    .driver-stopp-appointment strong {
        margin-top: 3px;
        color: #e2e8f0;
        font-size: 13px;
    }


/* SENDUNG */

.driver-stopp-shipment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 14px;
}

.driver-stopp-shipment-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .driver-stopp-shipment-item + .driver-stopp-shipment-item {
        border-left: 1px solid rgba(255,255,255,.06);
    }

    .driver-stopp-shipment-item strong {
        color: #f8fafc;
        font-size: 16px;
    }

        .driver-stopp-shipment-item strong small {
            color: #94a3b8;
            font-size: 8px;
        }

    .driver-stopp-shipment-item span {
        margin-top: 2px;
        color: #64748b;
        font-size: 8px;
    }

.driver-stopp-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 13px;
    padding: 9px;
    color: #93c5fd;
    background: rgba(59,130,246,.055);
    border-radius: 7px;
}

    .driver-stopp-note > div {
        display: flex;
        flex-direction: column;
    }

    .driver-stopp-note span {
        color: #64748b;
        font-size: 8px;
    }

    .driver-stopp-note strong {
        margin-top: 2px;
        color: #cbd5e1;
        font-size: 10px;
        font-weight: 500;
    }


/* REFERENZEN */

.driver-stopp-reference-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 13px;
}

    .driver-stopp-reference-list > div {
        display: flex;
        flex-direction: column;
    }

    .driver-stopp-reference-list span {
        color: #536176;
        font-size: 8px;
        text-transform: uppercase;
    }

    .driver-stopp-reference-list strong {
        margin-top: 2px;
        color: #cbd5e1;
        font-size: 10px;
    }


/* BESONDERHEITEN */

.driver-stopp-special {
    margin-bottom: 11px;
    padding: 12px 14px;
    background: rgba(245,158,11,.055);
    border: 1px solid rgba(245,158,11,.14);
    border-radius: 10px;
}

.driver-stopp-special-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fbbf24;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.driver-stopp-special-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

    .driver-stopp-special-list span {
        padding: 5px 7px;
        color: #d8c38a;
        background: rgba(245,158,11,.07);
        border-radius: 5px;
        font-size: 9px;
    }


/* STOPPZEITEN */

.driver-stopp-time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 13px;
}

    .driver-stopp-time-grid > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .driver-stopp-time-grid > div + div {
            border-left: 1px solid rgba(255,255,255,.06);
        }

    .driver-stopp-time-grid span {
        color: #536176;
        font-size: 8px;
    }

    .driver-stopp-time-grid strong {
        margin-top: 3px;
        color: #e2e8f0;
        font-size: 12px;
    }


/* WORKFLOW */

.driver-stopp-workflow {
    margin: 19px 0 13px;
}

.driver-stopp-workflow-label {
    display: block;
    margin: 0 2px 7px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.driver-stopp-main-action {
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    text-align: left;
    color: #ffffff;
    background: linear-gradient(180deg,#1670e8,#0d5fd3);
    border: 1px solid rgba(96,165,250,.30);
    border-radius: 9px;
    cursor: pointer;
}

    .driver-stopp-main-action > div {
        display: flex;
        flex-direction: column;
    }

    .driver-stopp-main-action strong {
        font-size: 12px;
    }

    .driver-stopp-main-action span {
        margin-top: 2px;
        color: rgba(255,255,255,.68);
        font-size: 8px;
    }

    .driver-stopp-main-action.warning {
        background: linear-gradient(180deg,#d58a08,#b86f04);
        border-color: rgba(251,191,36,.28);
    }

    .driver-stopp-main-action.success {
        background: linear-gradient(180deg,#159447,#10783a);
        border-color: rgba(74,222,128,.24);
    }

    .driver-stopp-main-action:disabled {
        opacity: .55;
        cursor: wait;
    }

.driver-stopp-finished {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    color: #4ade80;
    background: rgba(34,197,94,.075);
    border: 1px solid rgba(34,197,94,.15);
    border-radius: 9px;
}

    .driver-stopp-finished > div {
        display: flex;
        flex-direction: column;
    }

    .driver-stopp-finished strong {
        font-size: 11px;
    }

    .driver-stopp-finished span {
        margin-top: 2px;
        color: #71947c;
        font-size: 8px;
    }


/* NACHWEISE */

.driver-stopp-proof {
    margin-top: 17px;
}

.driver-stopp-proof-heading {
    margin: 0 2px 8px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.driver-stopp-proof-required {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px 10px;
    color: #93c5fd;
    background: rgba(59,130,246,.055);
    border-radius: 7px;
    font-size: 9px;
}

.driver-stopp-proof-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
}

    .driver-stopp-proof-grid button {
        min-height: 68px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #a8c7ef;
        background: rgba(17,30,50,.95);
        border: 1px solid rgba(59,130,246,.12);
        border-radius: 9px;
        font-family: inherit;
        font-size: 9px;
        cursor: pointer;
    }

        .driver-stopp-proof-grid button .mud-icon-root {
            font-size: 22px !important;
        }


/* FEHLER */

.driver-stopp-error {
    margin-top: 40px;
    padding: 25px;
    text-align: center;
}

.driver-stopp-error-icon {
    color: #f87171;
}

.driver-stopp-error h2 {
    color: #f8fafc;
    font-size: 17px;
}

.driver-stopp-error p {
    color: #64748b;
    font-size: 10px;
}


/* MOBILE */

@media (max-width: 600px) {

    .driver-stopp-page {
        max-width: none;
        padding: 11px 10px 110px;
    }

    .driver-stopp-header {
        grid-template-columns: 34px minmax(0,1fr) auto;
    }

        .driver-stopp-header h1 {
            font-size: 17px;
        }

    .driver-stopp-card {
        padding: 13px;
    }
}

@media (max-width: 390px) {

    .driver-stopp-page {
        padding-left: 7px;
        padding-right: 7px;
    }

    .driver-stopp-shipment-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px 0;
    }

    .driver-stopp-shipment-item:nth-child(3) {
        border-left: 0;
    }

    .driver-stopp-reference-list {
        grid-template-columns: 1fr;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .driver-tour-page {
        max-width: none;
        padding: 12px 10px 105px;
    }

    .driver-tour-page-header h1 {
        font-size: 22px;
    }

    .driver-tour-overview {
        padding: 14px;
    }

    .driver-stop-content {
        padding: 12px;
    }

    .driver-stop-document-actions {
        grid-template-columns: 1fr 1fr;
    }

        .driver-stop-document-actions button:last-child {
            grid-column: 1 / -1;
        }
}

.driver-work-status.inactive {
    color: #94a3b8;
}

    .driver-work-status.inactive .driver-work-status-dot {
        background: #64748b;
        box-shadow: none;
    }

/* =========================================================
   TSL DRIVER - NACHRICHTEN
========================================================= */

.driver-message-page {
    max-width: 540px;
}


/* HEADER */

.driver-message-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 2px 18px;
}

.driver-message-kicker {
    display: block;
    margin-bottom: 2px;
    color: #60a5fa;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.driver-message-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 750;
}

.driver-message-subtitle {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 10px;
}

.driver-message-count {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.14);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}


/* LISTE */

.driver-message-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* NACHRICHTENKARTE */

.driver-message-card {
    padding: 14px;
    background: linear-gradient( 145deg, rgba(18,32,53,.97), rgba(10,21,37,.97) );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    box-shadow: 0 7px 22px rgba(0,0,0,.16);
}

.driver-message-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.driver-message-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border-radius: 8px;
}

.driver-message-card-heading {
    min-width: 0;
    flex: 1;
}

    .driver-message-card-heading h2 {
        margin: 0;
        color: #f8fafc;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 650;
    }

.driver-message-date {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: #64748b;
    font-size: 8px;
}

    .driver-message-date .mud-icon-root {
        font-size: 13px !important;
    }

.driver-message-body {
    margin-top: 12px;
    padding-top: 11px;
    color: #cbd5e1;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
}


/* LEER */

.driver-message-empty {
    margin-top: 35px;
    padding: 30px 20px;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 12px;
}

.driver-message-empty-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border-radius: 50%;
}

    .driver-message-empty-icon .mud-icon-root {
        font-size: 26px !important;
    }

.driver-message-empty h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 16px;
}

.driver-message-empty p {
    max-width: 260px;
    margin: 6px auto 0;
    color: #64748b;
    font-size: 10px;
    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 600px) {

    .driver-message-page {
        max-width: none;
        padding: 12px 10px 105px;
    }

    .driver-message-header h1 {
        font-size: 21px;
    }

    .driver-message-card {
        padding: 12px;
    }
}

@media (max-width: 380px) {

    .driver-message-page {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* =========================================================
   TSL DRIVER - ARBEITSZEIT NEU
========================================================= */

.driver-work-page {
    max-width: 540px;
}


/* HEADER */

.driver-work-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 2px 18px;
}

.driver-work-page-kicker {
    display: block;
    margin-bottom: 2px;
    color: #60a5fa;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.driver-work-page-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 750;
}

.driver-work-page-date {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 9px;
}


/* STATUS BADGE */

.driver-work-page-status {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

    .driver-work-page-status.idle {
        color: #94a3b8;
        background: rgba(148,163,184,.09);
    }

    .driver-work-page-status.running {
        color: #4ade80;
        background: rgba(34,197,94,.10);
    }

    .driver-work-page-status.pause {
        color: #fbbf24;
        background: rgba(245,158,11,.10);
    }

    .driver-work-page-status.finished {
        color: #60a5fa;
        background: rgba(59,130,246,.10);
    }


/* GROSSE STATUSKARTE */

.driver-work-main-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 23px 16px 20px;
    text-align: center;
    background: linear-gradient( 145deg, rgba(18,32,53,.98), rgba(10,21,37,.98) );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,.16);
}

.driver-work-status-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border-radius: 50%;
}

    .driver-work-status-icon .mud-icon-root {
        font-size: 25px !important;
    }

.driver-work-status-idle {
    color: #94a3b8;
    background: rgba(148,163,184,.08);
}

.driver-work-status-running {
    color: #4ade80;
    background: rgba(34,197,94,.10);
}

.driver-work-status-pause {
    color: #fbbf24;
    background: rgba(245,158,11,.10);
}

.driver-work-status-finished {
    color: #60a5fa;
    background: rgba(59,130,246,.10);
}

.driver-work-main-label {
    color: #64748b;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.driver-work-main-time {
    margin-top: 3px;
    color: #f8fafc;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 750;
}

.driver-work-main-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 9px;
}


/* STATUS PUNKT */

.driver-work-status-dot-new {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
}

    .driver-work-status-dot-new.idle {
        background: #64748b;
    }

    .driver-work-status-dot-new.running {
        background: #22c55e;
        box-shadow: 0 0 7px rgba(34,197,94,.45);
    }

    .driver-work-status-dot-new.pause {
        background: #f59e0b;
        box-shadow: 0 0 7px rgba(245,158,11,.35);
    }

    .driver-work-status-dot-new.finished {
        background: #3b82f6;
    }


/* ZEITEN */

.driver-work-times-card {
    margin-top: 11px;
    padding: 14px;
    background: linear-gradient( 145deg, rgba(17,30,50,.96), rgba(10,20,35,.96) );
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
}

.driver-work-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

    .driver-work-section-heading .mud-icon-root {
        color: #4f83c7;
        font-size: 16px !important;
    }

.driver-work-times-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 13px;
}

.driver-work-time-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .driver-work-time-item + .driver-work-time-item {
        border-left: 1px solid rgba(255,255,255,.06);
    }

    .driver-work-time-item span {
        color: #536176;
        font-size: 8px;
    }

    .driver-work-time-item strong {
        margin-top: 3px;
        color: #e2e8f0;
        font-size: 11px;
    }


/* PAUSE */

.driver-work-pause-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    padding: 12px;
    background: rgba(245,158,11,.055);
    border: 1px solid rgba(245,158,11,.14);
    border-radius: 10px;
}

.driver-work-pause-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    background: rgba(245,158,11,.09);
    border-radius: 8px;
}

.driver-work-pause-content {
    display: flex;
    flex-direction: column;
}

    .driver-work-pause-content span {
        color: #fbbf24;
        font-size: 9px;
    }

    .driver-work-pause-content strong {
        margin-top: 2px;
        color: #e2e8f0;
        font-size: 11px;
    }


/* AKTIONEN */

.driver-work-actions {
    margin-top: 18px;
}

.driver-work-actions-label {
    display: block;
    margin: 0 2px 7px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.driver-work-main-button {
    width: 100%;
    min-height: 61px;
    display: grid;
    grid-template-columns: 35px minmax(0,1fr) 20px;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    color: #fff;
    border-radius: 9px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .driver-work-main-button.start {
        background: linear-gradient(180deg,#1670e8,#0d5fd3);
        border: 1px solid rgba(96,165,250,.28);
    }

    .driver-work-main-button.pause {
        background: linear-gradient(180deg,#d58a08,#b86f04);
        border: 1px solid rgba(251,191,36,.25);
    }

    .driver-work-main-button.resume {
        background: linear-gradient(180deg,#159447,#10783a);
        border: 1px solid rgba(74,222,128,.23);
    }

    .driver-work-main-button:disabled {
        opacity: .55;
        cursor: wait;
    }

.driver-work-button-icon {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.10);
    border-radius: 7px;
}

.driver-work-button-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .driver-work-button-content strong {
        font-size: 11px;
    }

    .driver-work-button-content span {
        margin-top: 2px;
        color: rgba(255,255,255,.67);
        font-size: 8px;
    }


/* ARBEITSENDE */

.driver-work-end-button-new {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    color: #f87171;
    background: rgba(239,68,68,.045);
    border: 1px solid rgba(239,68,68,.13);
    border-radius: 8px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
}

    .driver-work-end-button-new:disabled {
        opacity: .5;
    }


/* ABGESCHLOSSEN */

.driver-work-finished {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: #4ade80;
    background: rgba(34,197,94,.07);
    border: 1px solid rgba(34,197,94,.14);
    border-radius: 9px;
}

    .driver-work-finished > div {
        display: flex;
        flex-direction: column;
    }

    .driver-work-finished strong {
        font-size: 11px;
    }

    .driver-work-finished span {
        margin-top: 2px;
        color: #71947c;
        font-size: 8px;
    }


/* HINWEIS */

.driver-work-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    color: #60a5fa;
    background: rgba(59,130,246,.045);
    border: 1px solid rgba(59,130,246,.09);
    border-radius: 8px;
}

    .driver-work-info > div {
        display: flex;
        flex-direction: column;
    }

    .driver-work-info strong {
        color: #93c5fd;
        font-size: 9px;
    }

    .driver-work-info span {
        margin-top: 2px;
        color: #64748b;
        font-size: 8px;
        line-height: 1.4;
    }


/* KEIN FAHRER */

.driver-work-empty {
    margin-top: 35px;
    padding: 28px 20px;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 12px;
}

.driver-work-empty-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 11px;
    color: #64748b;
    background: rgba(148,163,184,.07);
    border-radius: 50%;
}

.driver-work-empty h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 16px;
}

.driver-work-empty p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 9px;
}


/* MOBILE */

@media (max-width: 600px) {

    .driver-work-page {
        max-width: none;
        padding: 12px 10px 105px;
    }

    .driver-work-page-header h1 {
        font-size: 21px;
    }

    .driver-work-main-time {
        font-size: 27px;
    }
}

@media (max-width: 380px) {

    .driver-work-page {
        padding-left: 7px;
        padding-right: 7px;
    }

    .driver-work-times-card {
        padding-left: 10px;
        padding-right: 10px;
    }
}



@media (max-width: 380px) {

    .driver-tour-page {
        padding-left: 7px;
        padding-right: 7px;
    }

    .driver-tour-vehicle {
        padding: 6px 7px;
    }

    .driver-timeline-stop {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .driver-stop-marker {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .driver-stop-content {
        margin-left: 3px;
    }
}
/* =========================================================
   TSL DRIVER - FOTOS
========================================================= */

.driver-photo-page {
    max-width: 540px;
}


/* HEADER */

.driver-photo-header {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
}

.driver-photo-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #cbd5e1;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    cursor: pointer;
}

.driver-photo-kicker {
    display: block;
    margin-bottom: 1px;
    color: #60a5fa;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.driver-photo-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 750;
}

.driver-photo-subtitle {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 9px;
}


/* UPLOAD CARD */

.driver-photo-upload-card {
    padding: 14px;
    background: linear-gradient( 145deg, rgba(18,32,53,.98), rgba(10,21,37,.98) );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
}

.driver-photo-upload-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.driver-photo-upload-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border-radius: 8px;
}

.driver-photo-upload-heading > div:last-child {
    display: flex;
    flex-direction: column;
}

.driver-photo-upload-heading strong {
    color: #f8fafc;
    font-size: 11px;
}

.driver-photo-upload-heading span {
    margin-top: 2px;
    color: #64748b;
    font-size: 8px;
}


/* KAMERA */

.driver-photo-capture {
    position: relative;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 15px;
    text-align: center;
    color: #60a5fa;
    background: rgba(59,130,246,.035);
    border: 1px dashed rgba(96,165,250,.24);
    border-radius: 9px;
    cursor: pointer;
}

    .driver-photo-capture > .mud-icon-root {
        font-size: 28px !important;
    }

    .driver-photo-capture strong {
        margin-top: 7px;
        color: #cfe2fb;
        font-size: 10px;
    }

    .driver-photo-capture span {
        margin-top: 3px;
        color: #64748b;
        font-size: 8px;
    }


/* AUSGEWÄHLTES FOTO */

.driver-photo-selected {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 10px;
    background: rgba(34,197,94,.045);
    border: 1px solid rgba(34,197,94,.10);
    border-radius: 8px;
}

.driver-photo-selected-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
    border-radius: 7px;
}

.driver-photo-selected-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .driver-photo-selected-content strong {
        overflow: hidden;
        color: #e2e8f0;
        font-size: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .driver-photo-selected-content span {
        margin-top: 2px;
        color: #64748b;
        font-size: 8px;
    }

.driver-photo-selected-check {
    color: #4ade80 !important;
    font-size: 18px !important;
}


/* UPLOAD BUTTON */

.driver-photo-upload-button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    color: #fff;
    background: linear-gradient( 180deg, #1670e8, #0d5fd3 );
    border: 1px solid rgba(96,165,250,.28);
    border-radius: 8px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

    .driver-photo-upload-button:disabled {
        opacity: .55;
    }


/* GALERIE HEAD */

.driver-photo-gallery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 18px 2px 9px;
}

    .driver-photo-gallery-heading > div:first-child {
        display: flex;
        flex-direction: column;
    }

    .driver-photo-gallery-heading span {
        color: #64748b;
        font-size: 8px;
        text-transform: uppercase;
    }

    .driver-photo-gallery-heading strong {
        margin-top: 2px;
        color: #e2e8f0;
        font-size: 12px;
    }

.driver-photo-count {
    min-width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
}


/* GALERIE */

.driver-photo-gallery {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.driver-photo-gallery-card {
    overflow: hidden;
    background: rgba(15,27,45,.96);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 9px;
}

.driver-photo-image-link {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #091321;
}

    .driver-photo-image-link img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.driver-photo-open-overlay {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(4,12,23,.75);
    border-radius: 7px;
}

.driver-photo-gallery-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 7px 8px;
}

    .driver-photo-gallery-info > div {
        display: flex;
        flex-direction: column;
    }

    .driver-photo-gallery-info span {
        color: #536176;
        font-size: 7px;
    }

    .driver-photo-gallery-info strong {
        margin-top: 1px;
        color: #cbd5e1;
        font-size: 8px;
    }

.driver-photo-gallery-time {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #64748b !important;
    font-size: 7px !important;
}

    .driver-photo-gallery-time .mud-icon-root {
        font-size: 11px !important;
    }


/* LEER */

.driver-photo-empty {
    padding: 30px 20px;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 11px;
}

.driver-photo-empty-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
    border-radius: 50%;
}

.driver-photo-empty h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 14px;
}

.driver-photo-empty p {
    max-width: 240px;
    margin: 5px auto 0;
    color: #64748b;
    font-size: 8px;
    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 600px) {

    .driver-photo-page {
        max-width: none;
        padding: 11px 9px 105px;
    }
}

@media (max-width: 380px) {

    .driver-photo-page {
        padding-left: 7px;
        padding-right: 7px;
    }

    .driver-photo-gallery {
        gap: 6px;
    }
}


/* =========================================================
   TSL DRIVER - DOKUMENTE
========================================================= */

.driver-doc-page {
    max-width: 540px;
}


/* HEADER */

.driver-doc-header {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
}

.driver-doc-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #cbd5e1;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    cursor: pointer;
}

.driver-doc-kicker {
    display: block;
    margin-bottom: 1px;
    color: #60a5fa;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.driver-doc-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 750;
}

.driver-doc-subtitle {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 9px;
}


/* UPLOAD */

.driver-doc-upload-card {
    padding: 14px;
    background: linear-gradient( 145deg, rgba(18,32,53,.98), rgba(10,21,37,.98) );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
}

.driver-doc-upload-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.driver-doc-upload-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border-radius: 8px;
}

.driver-doc-upload-heading > div:last-child {
    display: flex;
    flex-direction: column;
}

.driver-doc-upload-heading strong {
    color: #f8fafc;
    font-size: 11px;
}

.driver-doc-upload-heading span {
    margin-top: 2px;
    color: #64748b;
    font-size: 8px;
}


/* TYP */

.driver-doc-type-wrap {
    margin-top: 14px;
}

.driver-doc-field-label {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}


/* DATEI */

.driver-doc-file-select {
    position: relative;
    min-height: 105px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 13px;
    padding: 14px;
    text-align: center;
    color: #60a5fa;
    background: rgba(59,130,246,.035);
    border: 1px dashed rgba(96,165,250,.24);
    border-radius: 9px;
    cursor: pointer;
}

    .driver-doc-file-select > .mud-icon-root {
        font-size: 25px !important;
    }

    .driver-doc-file-select strong {
        margin-top: 6px;
        color: #cfe2fb;
        font-size: 10px;
    }

    .driver-doc-file-select span {
        margin-top: 3px;
        color: #64748b;
        font-size: 8px;
    }


/* AUSGEWÄHLT */

.driver-doc-selected {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 10px;
    background: rgba(34,197,94,.045);
    border: 1px solid rgba(34,197,94,.10);
    border-radius: 8px;
}

.driver-doc-selected-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
    border-radius: 7px;
}

.driver-doc-selected-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .driver-doc-selected-content strong {
        overflow: hidden;
        color: #e2e8f0;
        font-size: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .driver-doc-selected-content span {
        margin-top: 2px;
        color: #64748b;
        font-size: 8px;
    }

.driver-doc-selected-check {
    color: #4ade80 !important;
    font-size: 18px !important;
}


/* UPLOAD BUTTON */

.driver-doc-upload-button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    color: #fff;
    background: linear-gradient( 180deg, #1670e8, #0d5fd3 );
    border: 1px solid rgba(96,165,250,.28);
    border-radius: 8px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

    .driver-doc-upload-button:disabled {
        opacity: .55;
    }


/* LIST HEADER */

.driver-doc-list-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 18px 2px 9px;
}

    .driver-doc-list-heading > div:first-child {
        display: flex;
        flex-direction: column;
    }

    .driver-doc-list-heading span {
        color: #64748b;
        font-size: 8px;
        text-transform: uppercase;
    }

    .driver-doc-list-heading strong {
        margin-top: 2px;
        color: #e2e8f0;
        font-size: 12px;
    }

.driver-doc-count {
    min-width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
}


/* DOKUMENTLISTE */

.driver-doc-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.driver-doc-card {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 32px;
    align-items: center;
    gap: 9px;
    padding: 10px;
    background: linear-gradient( 145deg, rgba(17,30,50,.96), rgba(10,20,35,.96) );
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 9px;
}

.driver-doc-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
    border-radius: 8px;
}

    .driver-doc-card-icon .mud-icon-root {
        font-size: 20px !important;
    }

.driver-doc-card-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.driver-doc-card-type {
    color: #60a5fa;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.driver-doc-card-name {
    margin-top: 2px;
    overflow: hidden;
    color: #e2e8f0;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.driver-doc-card-date {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    color: #64748b;
    font-size: 7px;
}

    .driver-doc-card-date .mud-icon-root {
        font-size: 11px !important;
    }

.driver-doc-open {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    text-decoration: none;
    background: rgba(59,130,246,.06);
    border-radius: 7px;
}


/* LEER */

.driver-doc-empty {
    padding: 30px 20px;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 11px;
}

.driver-doc-empty-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
    border-radius: 50%;
}

.driver-doc-empty h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 14px;
}

.driver-doc-empty p {
    max-width: 240px;
    margin: 5px auto 0;
    color: #64748b;
    font-size: 8px;
    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 600px) {

    .driver-doc-page {
        max-width: none;
        padding: 11px 9px 105px;
    }
}

@media (max-width: 380px) {

    .driver-doc-page {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* =========================================================
   TSL DRIVER - LIVE GPS / KARTE
========================================================= */

.driver-map-page {
    max-width: 620px;
}


/* HEADER */

.driver-map-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 18px;
}

.driver-map-kicker {
    display: block;
    margin-bottom: 2px;
    color: #60a5fa;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.driver-map-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 750;
}

.driver-map-subtitle {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 9px;
}


/* STATUS BADGE */

.driver-map-status-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.driver-map-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.driver-map-status-badge.active {
    color: #4ade80;
    background: rgba(34,197,94,.09);
}

    .driver-map-status-badge.active .driver-map-status-dot {
        background: #22c55e;
        box-shadow: 0 0 7px rgba(34,197,94,.45);
    }

.driver-map-status-badge.waiting {
    color: #fbbf24;
    background: rgba(245,158,11,.08);
}

    .driver-map-status-badge.waiting .driver-map-status-dot {
        background: #f59e0b;
    }

.driver-map-status-badge.error {
    color: #f87171;
    background: rgba(239,68,68,.08);
}

    .driver-map-status-badge.error .driver-map-status-dot {
        background: #ef4444;
    }


/* STATUS CARD */

.driver-map-status-card {
    padding: 13px;
    background: linear-gradient( 145deg, rgba(18,32,53,.98), rgba(10,21,37,.98) );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
}

.driver-map-status-top {
    display: grid;
    grid-template-columns: 35px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
}

.driver-map-gps-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border-radius: 8px;
}

.driver-map-status-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .driver-map-status-content span {
        color: #64748b;
        font-size: 8px;
    }

    .driver-map-status-content strong {
        margin-top: 2px;
        color: #e2e8f0;
        font-size: 11px;
    }

.driver-map-live {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4ade80;
    font-size: 7px;
    font-weight: 700;
}

    .driver-map-live span {
        width: 5px;
        height: 5px;
        background: #22c55e;
        border-radius: 50%;
        box-shadow: 0 0 6px rgba(34,197,94,.5);
    }


/* INFO */

.driver-map-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,.05);
}

    .driver-map-info-grid > div {
        display: flex;
        flex-direction: column;
    }

        .driver-map-info-grid > div + div {
            padding-left: 14px;
            border-left: 1px solid rgba(255,255,255,.05);
        }

    .driver-map-info-grid span {
        color: #536176;
        font-size: 7px;
        text-transform: uppercase;
    }

    .driver-map-info-grid strong {
        margin-top: 2px;
        color: #cbd5e1;
        font-size: 9px;
    }


/* KARTE */

.driver-map-card {
    margin-top: 10px;
    overflow: hidden;
    background: #091321;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
}

.driver-map-canvas {
    width: 100%;
    height: 430px;
}


/* TECHNISCHE DETAILS */

.driver-map-details {
    margin-top: 9px;
    padding: 10px 12px;
    color: #64748b;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 8px;
    font-size: 8px;
}

    .driver-map-details summary {
        cursor: pointer;
        user-select: none;
    }

.driver-map-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

    .driver-map-details-grid > div {
        display: flex;
        flex-direction: column;
    }

    .driver-map-details-grid span {
        color: #536176;
        font-size: 7px;
        text-transform: uppercase;
    }

    .driver-map-details-grid strong {
        margin-top: 2px;
        color: #94a3b8;
        font-size: 8px;
    }


/* LEER */

.driver-map-empty {
    margin-top: 30px;
    padding: 28px 20px;
    text-align: center;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 11px;
}

.driver-map-empty-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
    border-radius: 50%;
}

.driver-map-empty h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 14px;
}

.driver-map-empty p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 8px;
}


/* MOBILE */

@media (max-width: 600px) {

    .driver-map-page {
        max-width: none;
        padding: 11px 9px 105px;
    }

    .driver-map-header h1 {
        font-size: 21px;
    }

    .driver-map-canvas {
        height: 430px;
    }
}

@media (max-width: 380px) {

    .driver-map-page {
        padding-left: 7px;
        padding-right: 7px;
    }

    .driver-map-canvas {
        height: 400px;
    }
}
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .driver-dashboard {
        max-width: none;
        padding: 12px 11px 105px;
    }

    .driver-dashboard-welcome {
        margin: 4px 3px 15px;
    }

    .driver-dashboard-name {
        font-size: 20px;
    }

    .driver-dashboard-card {
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 11px;
    }

    .driver-dashboard-tour-number {
        font-size: 18px;
    }

    .driver-work-time {
        font-size: 24px;
    }

    .driver-primary-button,
    .driver-secondary-button {
        min-height: 44px;
    }
}


/* =========================================================
   SEHR KLEINE HANDYS
========================================================= */

@media (max-width: 380px) {

    .driver-dashboard {
        padding-left: 8px;
        padding-right: 8px;
    }

    .driver-dashboard-card {
        padding: 13px;
    }

    .driver-dashboard-tour-number {
        font-size: 17px;
    }
}