:root{
    color-scheme:light;
    --primary:#1565c0;
    --primary-hover:#0d47a1;
    --primary-soft:#eaf2fc;
    --secondary:#00897b;
    --bg:#f5f7fa;
    --surface:#fff;
    --sidebar:#f5f5f5;
    --text:#243247;
    --muted:#65748a;
    --border:#dfe5ed;
    --success:#167654;
    --success-bg:#eaf7f1;
    --danger:#bb3543;
    --danger-bg:#fdf0f1;
    --warning:#8a610c;
    --warning-bg:#fff7e4;
    --shadow:0 2px 7px rgba(26,50,82,.04)}

*{
    box-sizing:border-box}
html{
    font-family:Inter,Helvetica,Arial,sans-serif;
    scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.5}
a{
    color:var(--primary);
    text-decoration:none}
a:hover{
    text-decoration:underline}
button,input,select,textarea{
    font:inherit}
button,a,input,select,summary{
    touch-action:manipulation}
button{
    cursor:pointer}
button:disabled{
    cursor:wait;
    opacity:.65}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
    outline:3px solid #46a9ee;
    outline-offset:3px}
.admin-icon{
    display:inline-block;
    flex:0 0 auto;
    vertical-align:middle;
    width:21px;
    height:21px}
h1,h2,h3,p{
    margin:0}
h1{
    font-size:28px;
    line-height:1.25;
    letter-spacing:-.65px;
    font-weight:650}
h2{
    font-size:17px;
    line-height:1.4;
    font-weight:650;
    letter-spacing:-.2px}
h3{
    font-size:15px;
    font-weight:600}
.muted{
    color:var(--muted)}
.small{
    font-size:12px}
.eyebrow{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.25px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:8px}
.skip-link{
    position:fixed;
    left:12px;
    top:-80px;
    background:var(--surface);
    padding:12px;
    z-index:20}
.skip-link:focus{
    top:12px}

.appbar{
    height:64px;
    background:#1565c0;
    color:#fff;
    display:flex;
    align-items:center;
    gap:20px;
    padding:0 26px;
    position:sticky;
    top:0;
    z-index:10;
    box-shadow:0 2px 6px #102b4b20}
.brand{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:5px;
    padding:5px 8px}
.brand img{
    display:block;
    width:135px;
    height:auto}
.appbar-divider{
    width:1px;
    height:25px;
    background:#ffffff3b}
.appbar-title{
    font-size:14px;
    font-weight:500;
    letter-spacing:.1px}
.appbar-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto}
.appbar-actions form{
    margin:0}
.appbar-actions select{
    color:#fff;
    background:transparent;
    border:1px solid #ffffff40;
    padding:7px 25px 7px 10px;
    border-radius:6px;
    max-width:155px}
.appbar-actions option{
    color:#243247;
    background:#fff}
.icon-button{
    border:0;
    background:transparent;
    color:inherit;
    border-radius:7px;
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center}
.icon-button:hover{
    background:#ffffff20}
.operator-avatar{
    width:34px;
    height:34px;
    border:1px solid #ffffff55;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center}
.operator-avatar .admin-icon{
    width:18px}
.menu-button{
    display:none}
.app-shell{
    display:flex;
    min-height:calc(100vh - 64px)}
.sidebar{
    width:228px;
    flex:0 0 228px;
    background:var(--sidebar);
    border-right:1px solid var(--border);
    padding:30px 14px 20px;
    display:flex;
    flex-direction:column;
    position:fixed;
    top:64px;
    bottom:0;
    left:0;
    z-index:9}
.sidebar-heading{
    padding:0 12px 15px;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--muted)}
.sidebar nav{
    display:grid;
    gap:5px}
.nav-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    color:var(--text);
    border-radius:7px;
    font-size:13px;
    font-weight:500}
.nav-link:hover{
    background:var(--primary-soft);
    text-decoration:none}
.nav-link.active{
    color:var(--primary);
    background:var(--primary-soft);
    font-weight:650}
.sidebar-footer{
    margin-top:auto;
    padding:24px 12px 0;
    border-top:1px solid var(--border)}
.operator-label{
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:3px}
.operator-email{
    display:block;
    font-size:12px;
    font-weight:600;
    overflow-wrap:anywhere;
    margin-bottom:15px}
.logout-button{
    display:flex;
    gap:10px;
    align-items:center;
    border:0;
    color:var(--muted);
    background:transparent;
    padding:5px 0;
    font-size:12px}
.logout-button:hover{
    color:var(--primary)}
.logout-button .admin-icon{
    width:17px;
    height:17px}
.main-content{
    margin-left:228px;
    padding:32px 36px 50px;
    width:calc(100% - 228px);
    max-width:1800px}
.page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px}
.page-header p{
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
    max-width:650px}
.page-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap}
.breadcrumb{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:17px;
    color:var(--muted);
    font-size:12px}
.breadcrumb .admin-icon{
    width:16px;
    height:16px}
.title-line{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:18px}
.section-heading .muted{
    font-size:12px;
    margin-top:4px}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:12px;
    font-weight:600;
    border-radius:6px;
    padding:9px 15px;
    white-space:nowrap;
    line-height:1.5}
.button:hover{
    background:var(--bg);
    text-decoration:none}
.button .admin-icon{
    width:17px;
    height:17px}
.button.primary{
    color:#fff;
    background:var(--primary);
    border-color:var(--primary);
    box-shadow:0 2px 3px #1565c01c}
.button.primary:hover{
    background:var(--primary-hover)}
.button.danger{
    color:#fff;
    background:var(--danger);
    border-color:var(--danger)}
.button.danger:hover{
    background:#9d2634}
.button.outline-danger{
    color:var(--danger);
    border-color:#e2bac0}
.button.outline-danger:hover{
    background:var(--danger-bg)}
.button.small-button{
    min-height:32px;
    padding:5px 10px;
    font-size:11px}
.button.full-width{
    width:100%}
.text-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:600}
.text-link .admin-icon{
    height:15px;
    width:15px}

.period-strip{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:15px;
    color:var(--muted);
    font-size:11px;
    flex-wrap:wrap}
.period-label{
    display:flex;
    align-items:center;
    gap:6px}
.period-label .admin-icon{
    height:14px;
    width:14px}
.metrics-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:22px}
.metric-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    padding:20px;
    box-shadow:var(--shadow);
    min-width:0}
.metric-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px}
.metric-label{
    font-size:12px;
    font-weight:500;
    color:var(--muted)}
.metric-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:33px;
    height:33px;
    background:var(--primary-soft);
    color:var(--primary);
    border-radius:8px}
.metric-icon .admin-icon{
    width:18px;
    height:18px}
.metric-card.teal .metric-icon{
    color:var(--secondary);
    background:#e7f5f2}
.metric-card.orange .metric-icon{
    color:var(--warning);
    background:var(--warning-bg)}
.metric-card.red .metric-icon{
    color:var(--danger);
    background:var(--danger-bg)}
.metric-value{
    font-size:30px;
    font-weight:650;
    letter-spacing:-.8px;
    line-height:1.2;
    font-variant-numeric:tabular-nums}
.metric-detail{
    font-size:11px;
    color:var(--muted);
    margin-top:9px}
.metrics-grid.compact .metric-card{
    padding:17px 20px}
.metrics-grid.compact .metric-top{
    margin-bottom:10px}
.metrics-grid.compact .metric-value{
    font-size:25px}
.content-grid{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);
    gap:22px;
    margin-bottom:22px}
.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    padding:24px;
    box-shadow:var(--shadow);
    min-width:0;
    margin-bottom:22px}
.content-grid>.panel{
    margin-bottom:0}
.panel.no-padding{
    padding:0;
    overflow:hidden}
.panel-header{
    padding:22px 24px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px}
.panel-header p{
    font-size:12px;
    color:var(--muted);
    margin-top:4px}
.status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 9px;
    border-radius:5px;
    font-size:10px;
    font-weight:650;
    line-height:1.5;
    white-space:nowrap}
.status-pill::before{
    content:"";
    width:5px;
    height:5px;
    background:currentColor;
    border-radius:50%}
.status-pill.active{
    color:var(--success);
    background:var(--success-bg)}
.status-pill.suspended{
    color:var(--danger);
    background:var(--danger-bg)}
.status-pill.pending{
    color:var(--warning);
    background:var(--warning-bg)}
.plan-label{
    font-size:11px;
    color:var(--muted);
    background:var(--bg);
    padding:3px 8px;
    border-radius:4px;
    border:1px solid var(--border)}
.notice{
    display:flex;
    align-items:flex-start;
    gap:11px;
    border-radius:7px;
    padding:13px 16px;
    font-size:12px;
    margin-bottom:20px;
    background:var(--primary-soft);
    color:var(--primary);
    border:1px solid #c6dbf3}
.notice .admin-icon{
    height:19px;
    width:19px;
    flex-shrink:0}
.notice.error{
    background:var(--danger-bg);
    color:var(--danger);
    border-color:#efcbd0}
.notice.warning{
    background:var(--warning-bg);
    color:var(--warning);
    border-color:#efdfb9}
.notice.success{
    background:var(--success-bg);
    color:var(--success);
    border-color:#c7e6d9}
.notice p+p{
    margin-top:6px}
.notice ul{
    padding-left:18px;
    margin:6px 0 0}
.notice a{
    color:inherit;
    text-decoration:underline}

.table-scroll{
    overflow-x:auto}
table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:12px}
th{
    font-size:10px;
    font-weight:600;
    color:var(--muted);
    background:var(--bg);
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:12px 17px;
    white-space:nowrap}
td{
    padding:16px 17px;
    border-top:1px solid var(--border);
    vertical-align:middle}
tbody tr:hover{
    background:color-mix(in srgb,var(--primary-soft) 35%,transparent)}
.number{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap}
.company-cell{
    display:flex;
    gap:10px;
    align-items:center;
    min-width:180px}
.company-avatar{
    width:32px;
    height:32px;
    border-radius:7px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:650;
    flex-shrink:0}
.company-name{
    display:block;
    color:var(--text);
    font-size:12px;
    font-weight:600;
    margin-bottom:2px}
.company-slug{
    font-size:10px;
    color:var(--muted)}
.table-footer{
    padding:12px 22px;
    border-top:1px solid var(--border);
    font-size:11px;
    color:var(--muted)}
.empty-state{
    text-align:center;
    padding:48px 22px}
.empty-icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    background:var(--primary-soft);
    color:var(--primary);
    border-radius:14px}
.empty-state h2{
    margin-bottom:8px}
.empty-state p{
    color:var(--muted);
    font-size:13px;
    max-width:420px;
    margin:0 auto 22px}
.filters{
    display:flex;
    gap:12px;
    align-items:flex-end;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
    flex-wrap:wrap}
.filters .form-field{
    margin:0;
    min-width:160px}
.filters .search-field{
    flex:1;
    min-width:220px}
.search-input{
    position:relative}
.search-input .admin-icon{
    position:absolute;
    left:11px;
    top:12px;
    color:var(--muted);
    height:17px;
    width:17px}
.search-input input{
    padding-left:36px}
.form-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0}
.form-field label{
    font-size:12px;
    font-weight:600}
.form-field input,.form-field select{
    width:100%;
    min-height:42px;
    padding:9px 11px;
    border:1px solid #cbd5e1;
    background:var(--surface);
    color:var(--text);
    border-radius:6px;
    line-height:1.5}
.form-field input::placeholder{
    color:#8b96a7;
    font-size:12px}
.form-field input:focus,.form-field select:focus{
    border-color:var(--primary)}
.form-field input[aria-invalid=true],.form-field select[aria-invalid=true]{
    border-color:var(--danger)}
.field-hint{
    font-size:11px;
    color:var(--muted);
    font-weight:400}
.field-error{
    font-size:11px;
    color:var(--danger)}
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px}
.form-field.full-span{
    grid-column:1/-1}
.form-grid>.full-span {
    grid-column: 1 / -1;
}
.anaf-lookup-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.anaf-lookup-row input {
    flex: 1;
    min-width: 0;
}
.anaf-lookup-row .button {
    flex: 0 0 auto;
    color: var(--primary);
    border-color: var(--primary);
}
.anaf-feedback {
    margin: -5px 0 0;
}
.anaf-feedback[hidden] {
    display: none;
}
.billing-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
}
.bank-detail-list {
    align-content: start;
    border-left: 1px solid var(--border);
    padding-left: 28px;
}
.iban-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}
@media (max-width: 760px) {
    .billing-details-grid {
        grid-template-columns: 1fr;
    }
    .bank-detail-list {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 20px;
    }
}
@media (max-width: 430px) {
    .anaf-lookup-row {
        flex-direction: column;
    }
    .anaf-lookup-row .button {
        justify-content: center;
    }
}
.form-section-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px}
.section-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary-soft);
    color:var(--primary);
    border-radius:8px}
.section-icon .admin-icon{
    width:18px;
    height:18px}
.form-section-heading p{
    font-size:12px;
    color:var(--muted);
    margin-top:3px}
.form-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(250px,1fr);
    gap:24px;
    align-items:start;
    max-width:1150px}
.form-aside{
    position:sticky;
    top:88px}
.form-aside h3{
    margin-bottom:15px}
.form-aside p{
    font-size:12px;
    color:var(--muted);
    margin-bottom:14px}
.form-aside ol{
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:step}
.form-aside li{
    counter-increment:step;
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-bottom:20px;
    font-size:12px;
    color:var(--muted)}
.form-aside li::before{
    content:counter(step);
    width:23px;
    height:23px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center}
.form-aside strong{
    display:block;
    color:var(--text);
    margin-bottom:3px}
.form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-top:24px}
.stack-form{
    display:grid;
    gap:20px}
.detail-list{
    display:grid;
    grid-template-columns:minmax(100px,1fr) minmax(0,1.5fr);
    gap:15px 20px;
    margin:0}
.detail-list dt{
    font-size:12px;
    color:var(--muted)}
.detail-list dd{
    font-size:12px;
    font-weight:500;
    margin:0;
    overflow-wrap:anywhere}
.stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid var(--border);
    font-size:12px}
.stat-row:last-child{
    border:0;
    padding-bottom:0}
.stat-row:first-of-type{
    padding-top:5px}
.stat-row-label{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted)}
.stat-row-label .admin-icon{
    width:16px;
    height:16px}
.stat-row strong{
    font-size:14px}
.progress-track{
    height:6px;
    background:var(--bg);
    border-radius:6px;
    overflow:hidden;
    margin-top:11px}
.progress-fill{
    height:100%;
    background:var(--primary);
    border-radius:6px}
.capacity{
    padding-top:18px;
    margin-top:20px;
    border-top:1px solid var(--border)}
.capacity-label{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--muted)}

.activity-chart{
    height:175px;
    display:flex;
    align-items:flex-end;
    gap:5px;
    border-bottom:1px solid var(--border);
    padding:10px 2px 0;
    background:repeating-linear-gradient(to top,transparent,transparent 43px,var(--border) 44px,transparent 45px)}
.activity-day{
    height:100%;
    display:flex;
    align-items:flex-end;
    flex:1;
    min-width:0}
.activity-bar{
    width:100%;
    min-height:2px;
    background:#1976d2;
    border-radius:3px 3px 0 0;
    position:relative}
.activity-bar.zero{
    background:#d7e4f4}
.activity-bar:hover{
    background:var(--secondary)}
.chart-axis{
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:10px;
    margin-top:10px}
.chart-caption{
    font-size:11px;
    color:var(--muted);
    margin-top:14px}
.chart-data{
    margin-top:16px;
    font-size:11px}
.chart-data summary{
    color:var(--primary);
    cursor:pointer;
    width:fit-content}
.chart-data .table-scroll{
    max-height:220px;
    margin-top:10px}
.chart-data td,.chart-data th{
    padding:7px 10px}
.confirm-card{
    max-width:650px;
    margin:15px auto;
    padding:32px}
.confirm-icon{
    height:50px;
    width:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--danger-bg);
    color:var(--danger);
    border-radius:13px;
    margin-bottom:20px}
.confirm-icon.positive{
    color:var(--success);
    background:var(--success-bg)}
.confirm-card h1{
    font-size:24px;
    margin-bottom:12px}
.confirm-card>p{
    color:var(--muted);
    font-size:13px;
    margin-bottom:20px}
.confirm-card ul{
    padding-left:18px;
    font-size:13px;
    color:var(--muted);
    line-height:1.9;
    margin-bottom:26px}
.confirm-company{
    padding:16px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:7px;
    margin:20px 0}
.confirm-company strong{
    display:block}
.confirm-company span{
    font-size:12px;
    color:var(--muted)}

.auth-content{
    min-height:calc(100vh - 64px);
    padding:55px 22px;
    background:radial-gradient(ellipse at 20% 0%,#e9f1fb 0,transparent 50%),var(--bg)}
.login-card{
    max-width:435px;
    margin:3vh auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:36px;
    box-shadow:0 14px 50px #1a32520c}
.login-logo{
    display:block;
    width:205px;
    max-height:100px;
    object-fit:contain;
    margin:0 auto 30px}
.login-card .eyebrow{
    font-size:10px}
.login-card h1{
    font-size:25px;
    margin-bottom:10px}
.login-card>.muted{
    font-size:13px;
    line-height:1.7;
    margin-bottom:25px}
.login-card .notice{
    margin-top:20px}
.login-card .button{
    margin-top:4px;
    min-height:44px}
.login-footnote{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    font-size:10px;
    color:var(--muted);
    border-top:1px solid var(--border);
    padding-top:20px;
    margin-top:25px}
.login-footnote .admin-icon{
    width:14px;
    height:14px}

[data-theme=dark]{
    color-scheme:dark;
    --primary:#64b5f6;
    --primary-hover:#90caf9;
    --primary-soft:#20364b;
    --secondary:#4db6ac;
    --bg:#181c22;
    --surface:#222831;
    --sidebar:#20252c;
    --text:#e4eaf2;
    --muted:#a6b3c4;
    --border:#39424e;
    --success:#84d3b2;
    --success-bg:#203c32;
    --danger:#f49aa4;
    --danger-bg:#422a31;
    --warning:#e9c273;
    --warning-bg:#413929;
    --shadow:none}
[data-theme=dark] .appbar{
    background:#1e1e1e}
[data-theme=dark] .button.primary{
    color:#122538}
[data-theme=dark] .button.danger{
    background:#b73e4a;
    color:#fff;
    border-color:#b73e4a}
[data-theme=dark] .metric-card.teal .metric-icon{
    background:#203b39}
[data-theme=dark] .auth-content{
    background:var(--bg)}
[data-theme=dark] .notice{
    border-color:var(--border)}
[data-theme=dark] .form-field input,[data-theme=dark] .form-field select{
    border-color:#596575}
[data-theme=dark] .activity-bar.zero{
    background:#344353}

@media(min-width:1700px){
    .main-content{
    padding-right:50px;
    padding-left:50px}
.metrics-grid{
    gap:20px}
.metric-card{
    padding:24px}
}

@media(max-width:1200px){
    .sidebar{
    width:205px;
    flex-basis:205px}
.main-content{
    margin-left:205px;
    width:calc(100% - 205px);
    padding:27px 24px}
.metrics-grid{
    gap:12px}
.metric-card{
    padding:17px}
.metric-value{
    font-size:27px}
.content-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr)}
.form-layout{
    grid-template-columns:minmax(0,1fr)}
.form-aside{
    position:static}
.form-aside ol{
    display:flex;
    gap:22px}
.form-aside li{
    flex:1;
    margin:0}
}

@media(max-width:980px){
    .metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))}
.content-grid{
    grid-template-columns:1fr}
.page-header{
    flex-wrap:wrap}
.main-content{
    padding:25px 22px}
.panel{
    padding:21px}
.appbar{
    padding:0 20px;
    gap:14px}
.appbar-title{
    font-size:12px}
.appbar-actions{
    gap:8px}
}

@media(max-width:760px){
    .appbar{
    height:60px;
    padding:0 15px;
    gap:10px}
.brand img{
    width:110px}
.appbar-title,.appbar-divider,.operator-avatar{
    display:none}
.appbar-actions select{
    max-width:120px;
    font-size:12px}
.menu-button{
    display:inline-flex;
    width:30px}
.sidebar{
    top:60px;
    transform:translateX(-100%);
    transition:transform .18s ease;
    width:235px;
    box-shadow:6px 0 24px #1a32521a}
.navigation-open .sidebar{
    transform:translateX(0)}
.main-content{
    margin-left:0;
    width:100%;
    padding:25px 18px}
.app-shell{
    min-height:calc(100vh - 60px)}
h1{
    font-size:25px}
.page-header{
    margin-bottom:22px;
    gap:18px}
.page-header p{
    font-size:12px}
.metrics-grid{
    gap:11px;
    margin-bottom:18px}
.metric-card{
    padding:16px}
.metric-label{
    font-size:11px}
.metric-icon{
    width:28px;
    height:28px}
.metric-value{
    font-size:26px}
.metric-detail{
    font-size:10px}
.metric-top{
    gap:6px;
    margin-bottom:13px}
.metrics-grid.compact .metric-card{
    padding:16px}
.metrics-grid.compact .metric-value{
    font-size:24px}
.content-grid{
    gap:18px;
    margin-bottom:18px}
.panel{
    padding:20px;
    margin-bottom:18px}
.panel-header{
    padding:18px}
.filters{
    padding:16px;
    gap:10px}
.filters .form-field{
    min-width:120px}
.filters .search-field{
    min-width:100%;
    flex-basis:100%}
.table-footer{
    padding:12px 17px}
.form-grid{
    gap:18px 14px}
.form-aside ol{
    display:block}
.form-aside li{
    margin-bottom:16px}
.form-aside li:last-child{
    margin:0}
.activity-chart{
    gap:3px}
.form-layout{
    gap:0}
.auth-content{
    padding:30px 16px;
    min-height:calc(100vh - 60px)}
.login-card{
    padding:28px;
    margin-top:3vh}
.confirm-card{
    padding:25px}
.period-strip{
    font-size:10px}
}

@media(max-width:430px){
    .metrics-grid{
    gap:9px}
.metric-card,.metrics-grid.compact .metric-card{
    padding:13px}
.metric-top{
    align-items:flex-start}
.metric-icon{
    width:25px;
    height:25px}
.metric-icon .admin-icon{
    width:15px;
    height:15px}
.metric-value{
    font-size:24px}
.metric-detail{
    line-height:1.6}
.form-grid{
    grid-template-columns:1fr}
.form-field.full-span{
    grid-column:auto}
.page-actions{
    width:100%}
.page-actions .button{
    flex:1}
.form-actions{
    flex-wrap:wrap}
.form-actions .button{
    flex:1}
.detail-list{
    grid-template-columns:1fr;
    gap:3px}
.detail-list dd{
    margin-bottom:13px}
.panel-header{
    align-items:flex-start;
    flex-wrap:wrap}
.appbar-actions{
    gap:3px}
.appbar-actions select{
    max-width:105px}
.brand{
    padding:5px}
.brand img{
    width:100px}
.main-content{
    padding:22px 14px}
.activity-chart{
    gap:2px}
}

@media(prefers-reduced-motion:reduce){
    html{
    scroll-behavior:auto}
.sidebar{
    transition:none}
}


/* Language picker with local flag icons. */
.fleet-language-selector {
     display: inline-flex;
     align-items: center;
     margin: 0 .5rem;
     }

.fleet-language-selector .language-picker {
     position: relative;
     font: inherit;
     }

.fleet-language-selector summary {
     display: flex;
     align-items: center;
     gap: .5rem;
     padding: .4rem .6rem;
     min-height: 34px;
     border: 1px solid currentColor;
     border-radius: 6px;
     color: inherit;
     cursor: pointer;
     list-style: none;
     white-space: nowrap;
     }

.fleet-language-selector summary::-webkit-details-marker {
     display: none;
     }

.fleet-language-selector .language-flag {
     display: block;
     flex: 0 0 24px;
     width: 24px;
     height: 16px;
     object-fit: cover;
     border-radius: 2px;
     box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
     }

.fleet-language-selector .language-chevron {
     width: 6px;
     height: 6px;
     margin: -.2rem .15rem 0 .35rem;
     border-right: 1.5px solid currentColor;
     border-bottom: 1.5px solid currentColor;
     transform: rotate(45deg);
     }

.fleet-language-selector details[open] .language-chevron {
     transform: rotate(225deg);
     margin-top: .2rem;
     }

.fleet-language-selector .language-options {
     position: absolute;
     z-index: 1500;
     inset-inline-end: 0;
     top: calc(100% + 6px);
     width: 200px;
     max-width: calc(100vw - 32px);
     max-height: min(440px, 60vh);
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: 6px;
     border: 1px solid #dce1ea;
     border-radius: 8px;
     background: #fff;
     color: #29304b;
     box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
     }

.fleet-language-selector .language-options button {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: .65rem;
     width: 100%;
     min-height: 36px;
     margin: 0;
     padding: .45rem .6rem;
     border: 0;
     border-radius: 4px;
     background: transparent;
     color: inherit;
     font: inherit;
     font-size: 14px;
     line-height: 1.3;
     text-align: left;
     text-transform: none;
     cursor: pointer;
     }

.fleet-language-selector .language-options button:hover {
     background: #f0f4fa;
     }

.fleet-language-selector .language-options button[aria-current="true"] {
     background: #e7f0fc;
     color: #135fb4;
     font-weight: 600;
     }

.fleet-language-selector summary:focus-visible, .fleet-language-selector .language-options button:focus-visible {
     outline: 2px solid #5798e8;
     outline-offset: 2px;
     }