/* TTB Partners - Modern Topbar (Customer only)
   Based on the second customer reference image.
   Partner Admin does NOT use this navigation structure.
*/
body.layout-modern-topbar{
    --mt-bg:var(--brand-background);
    --mt-panel:var(--brand-card);
    --mt-panel-soft:#24262a;
    --mt-border:#34363b;
    --mt-text:#f5f5f6;
    --mt-muted:#96989e;
    background:var(--mt-bg)!important;
    color:var(--mt-text)!important;
}

body.layout-modern-topbar .layout{
    display:block!important;
    min-height:100vh!important;
    background:var(--mt-bg)!important;
}
body.layout-modern-topbar .content{
    width:100%!important;
    min-width:0!important;
    background:var(--mt-bg)!important;
}

/* Reference-style top navigation */
body.layout-modern-topbar .customer-modern-topbar{
    height:84px!important;
    width:min(1180px,calc(100% - 48px))!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(160px,1fr) auto minmax(120px,1fr)!important;
    align-items:center!important;
    gap:28px!important;
    background:transparent!important;
    border:0!important;
    position:relative!important;
    z-index:100!important;
}
body.layout-modern-topbar .customer-modern-brand{
    justify-self:start!important;
    display:flex!important;
    align-items:center!important;
    text-decoration:none!important;
    min-width:0!important;
}
body.layout-modern-topbar .customer-modern-brand img{
    display:block!important;
    max-width:180px!important;
    width:auto!important;
    height:44px!important;
    max-height:44px!important;
    object-fit:contain!important;
    object-position:left center!important;
    background:transparent!important;
    border:0!important;
    padding:0!important;
}
body.layout-modern-topbar .customer-modern-brand-name{
    color:#fff!important;
    font-size:17px!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
body.layout-modern-topbar .customer-modern-nav{
    justify-self:center!important;
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    gap:3px!important;
    padding:4px!important;
    margin:0!important;
    border-radius:999px!important;
    background:var(--brand-sidebar)!important;
    border:0!important;
    white-space:nowrap!important;
}
body.layout-modern-topbar .customer-modern-nav a{
    height:36px!important;
    min-width:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:0 18px!important;
    margin:0!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:#b6b8bd!important;
    text-decoration:none!important;
    font-size:12px!important;
    font-weight:650!important;
    line-height:1!important;
}
body.layout-modern-topbar .customer-modern-nav a:hover{
    background:#33353a!important;
    color:#fff!important;
}
body.layout-modern-topbar .customer-modern-nav a.active{
    background:var(--brand-primary)!important;
    color:#fff!important;
}
body.layout-modern-topbar .customer-modern-nav .customer-support-unread-badge{
    min-width:17px!important;
    height:17px!important;
    padding:0 5px!important;
    font-size:9px!important;
}
body.layout-modern-topbar .customer-modern-account{
    position:relative!important;
    justify-self:end!important;
}
body.layout-modern-topbar .customer-modern-account>summary{
    list-style:none!important;
    cursor:pointer!important;
}
body.layout-modern-topbar .customer-modern-account>summary::-webkit-details-marker{display:none!important}
body.layout-modern-topbar .customer-modern-avatar{
    width:38px!important;
    height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:var(--brand-primary)!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:900!important;
}
body.layout-modern-topbar .customer-modern-account-menu{
    position:absolute!important;
    right:0!important;
    top:50px!important;
    width:220px!important;
    padding:14px!important;
    border-radius:12px!important;
    background:var(--brand-sidebar)!important;
    border:1px solid #3b3d42!important;
    box-shadow:0 22px 55px rgba(0,0,0,.35)!important;
    color:#fff!important;
}
body.layout-modern-topbar .customer-modern-account-menu strong{
    display:block!important;font-size:13px!important;
}
body.layout-modern-topbar .customer-modern-account-menu small{
    display:block!important;margin-top:3px!important;color:#97999f!important;
}
body.layout-modern-topbar .customer-modern-balance{
    display:flex!important;
    justify-content:space-between!important;
    margin-top:12px!important;
    padding-top:10px!important;
    border-top:1px solid #3b3d42!important;
    color:#999ba0!important;
    font-size:11px!important;
}
body.layout-modern-topbar .customer-modern-balance b{color:#fff!important}
body.layout-modern-topbar .customer-modern-account-menu>a{
    display:block!important;
    margin-top:10px!important;
    padding-top:10px!important;
    border-top:1px solid #3b3d42!important;
    color:#ff7771!important;
    text-decoration:none!important;
    font-size:12px!important;
    font-weight:800!important;
}

/* Hide the old page-local header only in this customer theme */
body.layout-modern-topbar .content>.topbar,
body.layout-modern-topbar .content>header.topbar{
    display:none!important;
}

/* Content follows the second reference image */
body.layout-modern-topbar .main{
    width:min(1180px,calc(100% - 48px))!important;
    max-width:1180px!important;
    margin:0 auto!important;
    padding:26px 0 56px!important;
}
body.layout-modern-topbar h1,
body.layout-modern-topbar h2,
body.layout-modern-topbar h3,
body.layout-modern-topbar .heading h1,
body.layout-modern-topbar .request-head h1{color:#fff!important}
body.layout-modern-topbar .heading p,
body.layout-modern-topbar .request-sub,
body.layout-modern-topbar .intro,
body.layout-modern-topbar .sub,
body.layout-modern-topbar .category-note,
body.layout-modern-topbar .note,
body.layout-modern-topbar .checkout-sub,
body.layout-modern-topbar .stat-label,
body.layout-modern-topbar .stat-meta,
body.layout-modern-topbar .result-count,
body.layout-modern-topbar .k{color:var(--mt-muted)!important}

body.layout-modern-topbar .card,
body.layout-modern-topbar .panel,
body.layout-modern-topbar .stat,
body.layout-modern-topbar .service,
body.layout-modern-topbar .file-selected,
body.layout-modern-topbar .checkout,
body.layout-modern-topbar .summary{
    background:var(--mt-panel)!important;
    border-color:var(--mt-border)!important;
    color:var(--mt-text)!important;
    box-shadow:none!important;
}
body.layout-modern-topbar .card,
body.layout-modern-topbar .panel,
body.layout-modern-topbar .stat{border-radius:18px!important}
body.layout-modern-topbar .card-head,
body.layout-modern-topbar .panel-head,
body.layout-modern-topbar .service-row,
body.layout-modern-topbar .info{border-color:var(--mt-border)!important}

body.layout-modern-topbar .card-title,
body.layout-modern-topbar .panel-title,
body.layout-modern-topbar .stat-value,
body.layout-modern-topbar .service h3,
body.layout-modern-topbar .price,
body.layout-modern-topbar .v,
body.layout-modern-topbar .file-name,
body.layout-modern-topbar .vehicle{color:#fff!important}

body.layout-modern-topbar .card-sub,
body.layout-modern-topbar .panel-subtitle,
body.layout-modern-topbar .sw,
body.layout-modern-topbar .date{color:#a0a2a7!important}

body.layout-modern-topbar table{color:#e8e8e9!important}
body.layout-modern-topbar th{
    background:transparent!important;
    color:#85888f!important;
    border-color:#3a3c40!important;
}
body.layout-modern-topbar td{
    color:#c8c9cd!important;
    border-color:#35373b!important;
}
body.layout-modern-topbar tbody tr:hover,
body.layout-modern-topbar .request-row:hover{background:#2d2f33!important}

body.layout-modern-topbar .filters .filter,
body.layout-modern-topbar .tabs .tab{
    background:var(--brand-sidebar)!important;
    border-color:#36383d!important;
    color:#b1b3b8!important;
}
body.layout-modern-topbar .filters .filter.active,
body.layout-modern-topbar .tabs .tab.active{
    background:var(--brand-primary)!important;
    border-color:var(--brand-primary)!important;
    color:#fff!important;
}
body.layout-modern-topbar .filter-count{background:#34363a!important;color:#bfc1c5!important}

body.layout-modern-topbar .primary-btn,
body.layout-modern-topbar .button,
body.layout-modern-topbar button:not(.tab):not(.filter):not(.method):not(.amount),
body.layout-modern-topbar .download,
body.layout-modern-topbar .bank-button{
    background:var(--brand-primary)!important;
    border-color:var(--brand-primary)!important;
    color:#fff!important;
}

body.layout-modern-topbar .drop{
    background:#25272b!important;
    border-color:#44464b!important;
    color:#e6e6e7!important;
}
body.layout-modern-topbar .drop:hover{border-color:var(--brand-primary)!important}

body.layout-modern-topbar input,
body.layout-modern-topbar select,
body.layout-modern-topbar textarea,
body.layout-modern-topbar .amount,
body.layout-modern-topbar .method,
body.layout-modern-topbar .custom input{
    background:#24262a!important;
    border-color:#414349!important;
    color:#f4f4f5!important;
}
body.layout-modern-topbar select option{background:#24262a!important;color:#fff!important}
body.layout-modern-topbar .amount.active{
    background:var(--brand-primary)!important;
    border-color:var(--brand-primary)!important;
    color:#fff!important;
}
body.layout-modern-topbar .mobile-top{display:none!important}

@media(max-width:900px){
    body.layout-modern-topbar .customer-modern-topbar{
        width:calc(100% - 28px)!important;
        grid-template-columns:auto 1fr auto!important;
        gap:14px!important;
    }
    body.layout-modern-topbar .customer-modern-brand img{
        max-width:125px!important;
        height:38px!important;
    }
    body.layout-modern-topbar .customer-modern-nav{
        justify-self:stretch!important;
        justify-content:flex-start!important;
        overflow-x:auto!important;
        scrollbar-width:none!important;
    }
    body.layout-modern-topbar .customer-modern-nav::-webkit-scrollbar{display:none!important}
    body.layout-modern-topbar .customer-modern-nav a{padding:0 13px!important}
}

@media(max-width:650px){
    body.layout-modern-topbar .customer-modern-topbar{
        height:auto!important;
        min-height:80px!important;
        grid-template-columns:1fr auto!important;
        grid-template-areas:"brand account" "nav nav"!important;
        padding:12px 0!important;
    }
    body.layout-modern-topbar .customer-modern-brand{grid-area:brand!important}
    body.layout-modern-topbar .customer-modern-account{grid-area:account!important}
    body.layout-modern-topbar .customer-modern-nav{
        grid-area:nav!important;
        width:100%!important;
        margin-top:5px!important;
    }
    body.layout-modern-topbar .main{
        width:calc(100% - 28px)!important;
        padding-top:22px!important;
    }
}


/* =========================================================
   CUSTOMER MODERN TOPBAR v7 — DASHBOARD READABILITY
   Dashboard has page-local Classic CSS; force dark-theme contrast here.
   ========================================================= */
body.layout-modern-topbar{
    color:#f5f5f6!important;
}
body.layout-modern-topbar .hero,
body.layout-modern-topbar .stats,
body.layout-modern-topbar .panel,
body.layout-modern-topbar .card{
    color:#f5f5f6!important;
}
body.layout-modern-topbar .hero h1,
body.layout-modern-topbar .panel-title,
body.layout-modern-topbar .stat-value,
body.layout-modern-topbar .file-name,
body.layout-modern-topbar .vehicle,
body.layout-modern-topbar .service,
body.layout-modern-topbar .price,
body.layout-modern-topbar strong{
    color:#f5f5f6!important;
}
body.layout-modern-topbar .hero p,
body.layout-modern-topbar .panel-subtitle,
body.layout-modern-topbar .stat-label,
body.layout-modern-topbar .stat-meta,
body.layout-modern-topbar .muted,
body.layout-modern-topbar .date{
    color:#9ea1a8!important;
}
body.layout-modern-topbar .stat-icon{
    background:#33353a!important;
    border-color:#404248!important;
    color:#fff!important;
}
body.layout-modern-topbar .panel-head{
    background:var(--mt-panel)!important;
    border-color:#383a3f!important;
}
body.layout-modern-topbar .table-wrap{
    background:var(--mt-panel)!important;
}
body.layout-modern-topbar table{
    background:var(--mt-panel)!important;
}
body.layout-modern-topbar thead,
body.layout-modern-topbar th{
    background:#24262a!important;
    color:#8d9097!important;
    border-color:#383a3f!important;
}
body.layout-modern-topbar tbody,
body.layout-modern-topbar tr,
body.layout-modern-topbar td{
    background:var(--mt-panel)!important;
    color:#d6d7da!important;
    border-color:#383a3f!important;
}
body.layout-modern-topbar tbody tr:hover td{
    background:#2d2f33!important;
}
body.layout-modern-topbar .view,
body.layout-modern-topbar .panel-link{
    color:color-mix(in srgb,var(--brand-primary) 80%,#fff)!important;
}


/* v8 — wider customer data views */
body.layout-modern-topbar .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
}
body.layout-modern-topbar table{
    width:100%!important;
}
body.layout-modern-topbar .panel{
    max-width:none!important;
}
@media(min-width:1181px){
    body.layout-modern-topbar .main{
        width:1180px!important;
    }
}

/* Customer footer palette - Modern Topbar */
body.layout-modern-topbar{
    --footer-bg:transparent;
    --footer-text:#b6b8bd;
    --footer-muted:var(--mt-muted);
    --footer-heading:var(--mt-text);
    --footer-link:color-mix(in srgb,var(--brand-primary) 58%,#f5f5f6);
    --footer-link-hover:#ffffff;
    --footer-border:var(--mt-border);
    --footer-border-soft:#2f3136;
}

/* Customer metadata pills - Modern Topbar */
body.layout-modern-topbar .file-meta .pill{
    background:var(--mt-panel-soft)!important;
    border-color:var(--mt-border)!important;
    color:var(--mt-text)!important;
}

/* Identification result / DTC candidate controls - Modern Topbar */
body.layout-modern-topbar .customer-identification-tile{
    background:var(--mt-panel)!important;
    border-color:var(--mt-border)!important;
    color:var(--mt-text)!important;
}
body.layout-modern-topbar .customer-identification-tile .k,

/* DTC results - Modern Topbar */
body.layout-modern-topbar .dtc-search,body.layout-modern-topbar .dtc-status-filter{background:#24262a!important;border-color:#3a3c40!important;color:var(--mt-text)!important}
body.layout-modern-topbar .dtc-search::placeholder{color:#85888f!important}
body.layout-modern-topbar .dtc-visible-count,body.layout-modern-topbar .dtc-selected-summary,body.layout-modern-topbar .dtc-description,body.layout-modern-topbar .dtc-submit-text,body.layout-modern-topbar .dtc-state-text{color:var(--mt-muted)!important}
body.layout-modern-topbar .dtc-secondary-btn{background:#292b2f!important;border-color:#3a3c40!important;color:#f5f5f6!important}
body.layout-modern-topbar .dtc-secondary-btn:hover{background:#33353a!important;border-color:#4a4c51!important}
body.layout-modern-topbar .dtc-choice{background:#24262a!important;border-color:#383a3f!important;color:#f5f5f6!important}
body.layout-modern-topbar .dtc-choice:hover{background:#2d2f33!important;border-color:var(--brand-primary)!important}
body.layout-modern-topbar .dtc-choice>input{accent-color:var(--brand-primary)!important}
body.layout-modern-topbar .dtc-label{color:#c8c9cd!important}
body.layout-modern-topbar .dtc-status.is-on{background:#173d2d!important;color:#71e7aa!important}
body.layout-modern-topbar .dtc-status.is-off{background:#3a2024!important;color:#ff8a92!important}
body.layout-modern-topbar .dtc-off-note{color:#ff8a92!important}
body.layout-modern-topbar .dtc-submit-panel{background:#24262a!important;border-color:#383a3f!important;color:#f5f5f6!important}
body.layout-modern-topbar .dtc-submit-btn{background:var(--brand-primary)!important;border-color:var(--brand-primary)!important;color:#fff!important}
body.layout-modern-topbar .dtc-state{background:#24262a!important;border-color:#383a3f!important;color:#f5f5f6!important}
body.layout-modern-topbar .dtc-state-processing{border-color:#6b5b24!important;background:#2b281d!important}
body.layout-modern-topbar .dtc-state-error{border-color:#66333a!important;background:#311e22!important;color:#ff9ca3!important}


/* Request files tab - Modern Topbar */
body.layout-modern-topbar .request-tab-files:not(.active){border-color:color-mix(in srgb,var(--brand-primary) 55%,var(--mt-border))!important;background:color-mix(in srgb,var(--mt-panel) 91%,var(--brand-primary) 9%)!important;color:var(--mt-text)!important}
body.layout-modern-topbar .request-tab-files:not(.active) .request-tab-badge{background:color-mix(in srgb,var(--brand-primary) 25%,var(--mt-panel-soft))!important;color:var(--mt-text)!important}

/* Request file notes - Modern Topbar */
body.layout-modern-topbar .ttb-file-note{color:#9bd1ff!important;background:color-mix(in srgb,#2f9fff 14%,var(--mt-panel))!important;border-color:color-mix(in srgb,#2f9fff 44%,var(--mt-border))!important}

/* Premium dashboard: brand as accent, not a full hero fill */
body.layout-modern-topbar .hero{background:linear-gradient(135deg,#24262b 0%,#202226 58%,#1d1f23 100%)!important;border:1px solid #3a3c42!important;box-shadow:0 12px 32px rgba(0,0,0,.16)!important;color:#f7f7f8!important}
body.layout-modern-topbar .hero::before{background:var(--brand-primary)!important}
body.layout-modern-topbar .hero::after{content:"";position:absolute;right:5%;top:50%;width:210px;height:120px;transform:translateY(-50%) rotate(-7deg);border:1px solid color-mix(in srgb,var(--brand-primary) 20%,transparent);border-radius:28px;background:color-mix(in srgb,var(--brand-primary) 4%,transparent);opacity:.65;pointer-events:none}
body.layout-modern-topbar .hero p{color:#aeb1b8!important}
body.layout-modern-topbar .primary-btn{background:var(--brand-primary)!important;color:#fff!important;border:1px solid color-mix(in srgb,var(--brand-primary) 72%,#fff)!important;box-shadow:0 8px 22px color-mix(in srgb,var(--brand-primary) 18%,transparent)!important}
body.layout-modern-topbar .primary-btn:hover{background:color-mix(in srgb,var(--brand-primary) 88%,#000)!important}
body.layout-modern-topbar .stat-icon{background:color-mix(in srgb,var(--brand-primary) 12%,#303238)!important;border-color:color-mix(in srgb,var(--brand-primary) 22%,#404248)!important;color:color-mix(in srgb,var(--brand-primary) 65%,#fff)!important}
body.layout-modern-topbar .stat-label{color:#aeb1b8!important}
body.layout-modern-topbar .stat-meta{color:#858990!important}
/* =========================================================
   MODERN TOPBAR — UPLOAD ACTION BUTTON
   Visual-only override for the upload card action.
   ========================================================= */
body.layout-modern-topbar .actions button{
    background:#f4f4f5!important;
    border-color:#f4f4f5!important;
    color:#18181b!important;
    box-shadow:none!important;
}

body.layout-modern-topbar .actions button:hover:not(:disabled){
    background:#ffffff!important;
    border-color:#ffffff!important;
    color:#18181b!important;
    filter:none!important;
}

body.layout-modern-topbar .actions button:disabled{
    background:#3a3c42!important;
    border-color:#3a3c42!important;
    color:#8f9299!important;
}