:root{--bg:#f4f7f8;--card:#fff;--text:#172b2d;--muted:#667b7e;--line:#dce6e7;--primary:#00777b;--primary2:#00979b;--danger:#b42318;--sidebar:#063f43;--shadow:0 10px 30px rgba(20,55,58,.08)}
[data-theme=dark]{--bg:#0f1719;--card:#182326;--text:#edf7f7;--muted:#a3b8ba;--line:#304144;--primary:#19aeb1;--sidebar:#091f22;--shadow:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}a{color:var(--primary);text-decoration:none}button,input,select{font:inherit}.system-topbar{height:34px;background:#006e72;color:#fff}.system-topbar-inner{max-width:1600px;height:100%;padding:0 20px;display:flex;align-items:center;justify-content:space-between;font-size:13px}.system-topbar-left,.system-topbar-right,.header-actions,.button-group,.panel-heading,.page-heading,.progress-label{display:flex;align-items:center;gap:10px}.system-status-dot{width:8px;height:8px;border-radius:50%;background:#67e8a5;box-shadow:0 0 0 3px rgba(103,232,165,.18)}.app-shell{display:flex;min-height:calc(100vh - 34px)}.sidebar{width:250px;background:var(--sidebar);color:#dff4f4;display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:calc(100vh - 34px)}.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:17px;padding:0 7px 20px}.brand img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:12px;padding:4px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{color:#d9eeef;padding:10px 12px;border-radius:9px}.sidebar nav a:hover{background:rgba(255,255,255,.1)}.sidebar-footer{margin-top:auto;padding:15px 10px 0;border-top:1px solid rgba(255,255,255,.13);font-size:12px;line-height:1.65}.sidebar-footer a{color:#b7f3f4}.main-area{flex:1;min-width:0}.main-header{height:64px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:15px;position:sticky;top:0;z-index:10}.header-title{font-weight:750;flex:1}.header-actions form{display:inline}.icon-button,.link-button{border:0;background:transparent;color:var(--text);cursor:pointer;font-size:18px}.link-button{font-size:14px}.content{padding:28px;max-width:1500px;margin:auto}.page-heading{justify-content:space-between;margin-bottom:20px;align-items:flex-end}.page-heading h1{margin:0 0 5px;font-size:29px}.page-heading p{margin:0;color:var(--muted)}.primary,.secondary-button,.danger-button,.filter-bar button{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:8px 14px;border-radius:9px;border:1px solid transparent;cursor:pointer}.primary,.filter-bar button{background:var(--primary);color:#fff}.secondary-button{background:var(--card);border-color:var(--line);color:var(--text)}.danger-button{background:var(--danger);color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.stat-card,.panel,.summary-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.stat-card{padding:20px}.stat-card span,.summary-card span{display:block;color:var(--muted);font-size:13px}.stat-card strong{display:block;font-size:32px;margin-top:8px}.stat-card.warning{border-left:4px solid #f59e0b}.stat-card.danger{border-left:4px solid #ef4444}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.panel{padding:20px;overflow:hidden}.panel h2{margin:0 0 16px;font-size:19px}.panel-heading{justify-content:space-between}.big-number{font-size:34px;font-weight:800}.big-number small{font-size:14px;color:var(--muted)}.progress{height:12px;border-radius:999px;background:var(--line);overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2))}.indeterminate span{width:40%;animation:slide 1.3s infinite}@keyframes slide{from{margin-left:-40%}to{margin-left:100%}}.filter-bar{display:grid;grid-template-columns:minmax(250px,1fr) repeat(3,minmax(150px,auto)) auto;gap:9px;margin-bottom:14px}.filter-bar input,.filter-bar select,.review-form input,.review-form select,input[type=file]{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--text)}.table-wrapper{overflow:auto;border:1px solid var(--line);border-radius:13px;background:var(--card)}.compact-table{width:100%;border-collapse:collapse}.compact-table th,.compact-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.compact-table th{font-size:12px;text-transform:uppercase;color:var(--muted);background:rgba(90,120,122,.06)}.compact-table tr:last-child td{border-bottom:0}.compact-table tr:hover td{background:rgba(0,119,123,.05)}.clickable-row{cursor:pointer}.pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin:18px}.pagination a,.pagination span{padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card)}.summary-grid,.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.summary-card,.match-grid>div{padding:17px}.match-grid>div{background:rgba(0,119,123,.06);border-radius:10px}.match-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.review-layout{display:grid;grid-template-columns:minmax(420px,1.15fr) minmax(380px,.85fr);gap:18px}.preview-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}.preview-panel iframe{width:100%;height:72vh;border:0;border-radius:8px;background:#d9e0e1}.matched-box{padding:14px;border:1px solid #8fd6bd;background:#effbf6;border-radius:10px;margin:15px 0;color:#175c43}[data-theme=dark] .matched-box{background:#163a31;color:#baf3dc}.review-form p{margin:11px 0}.review-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}.message{padding:12px 15px;border-radius:9px;margin-bottom:14px;background:#e7f5ff}.message.error{background:#fef0ef;color:#9f1c12}.message.warning{background:#fff6df}.file-chip{display:inline-block;padding:7px 10px;background:rgba(0,119,123,.08);border-radius:8px;margin:5px}.hidden{display:none}.upload-progress{margin:16px 0}.status-badge{padding:4px 8px;border-radius:99px;font-size:12px;background:#e9eff0}.status-accepted,.status-auto{background:#ddf8e9;color:#177245}.status-review,.status-new{background:#fff1cf;color:#8a5a00}.status-error,.status-rejected{background:#ffe3e0;color:#a52a1f}details{margin-top:16px}pre{white-space:pre-wrap;max-height:340px;overflow:auto;background:var(--bg);padding:12px;border-radius:8px}.icon-button#menu-toggle{display:none}
@media(max-width:1050px){.sidebar{position:fixed;left:-270px;z-index:50;transition:.2s}.sidebar.open{left:0}.icon-button#menu-toggle{display:block}.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.review-layout{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr 1fr}.summary-grid,.match-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.content{padding:16px}.system-topbar-left{display:none}.system-topbar-right{margin:auto}.stats-grid,.summary-grid,.match-grid,.filter-bar{grid-template-columns:1fr}.page-heading{align-items:stretch;flex-direction:column}.dashboard-grid{grid-template-columns:1fr}.preview-panel iframe{height:55vh}}

/* User, logo, support and disk widgets */
.top-user{display:inline-flex;align-items:center;gap:5px}.top-user strong{font-weight:800}.brand{align-items:center}.brand-logo-wrap{width:68px;height:68px;min-width:68px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.22);overflow:hidden}.brand-logo-wrap img{width:60px!important;height:60px!important;padding:0!important;background:transparent!important;border-radius:0!important}.brand-text{display:flex;flex-direction:column;gap:3px}.brand-text strong{font-size:17px;color:#fff}.brand-text small{font-size:12px;color:rgba(223,244,244,.72)}.sidebar-footer{border-top:0;padding:14px 0 0;display:grid;gap:10px}.side-card{padding:13px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));display:flex;flex-direction:column;gap:5px}.side-card-head{display:flex;justify-content:space-between;align-items:center}.side-card small{color:rgba(217,238,239,.68)}.disk-dot{width:10px;height:10px;border-radius:50%;background:#8b9b9c;box-shadow:0 0 0 4px rgba(139,155,156,.13)}.disk-dot.success{background:#50db94}.disk-dot.warning{background:#fbbf24}.disk-dot.danger{background:#fb5f61}.disk-main{display:flex;align-items:baseline;gap:6px;margin-top:6px}.disk-main strong{font-size:22px;color:#fff}.disk-main span{font-size:11px;color:rgba(217,238,239,.7)}.disk-track{height:9px;border-radius:999px;background:rgba(255,255,255,.11);overflow:hidden;margin:3px 0 7px}.disk-track>span{display:block;height:100%;min-width:2px;border-radius:inherit;background:linear-gradient(90deg,#18aeb2,#2ed6c7)}.disk-track>span.warning{background:linear-gradient(90deg,#e5a214,#facc15)}.disk-track>span.danger{background:linear-gradient(90deg,#dc3d43,#fb6464)}.disk-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.disk-grid>div{padding:7px;border-radius:9px;background:rgba(0,0,0,.12)}.disk-grid small,.disk-grid strong{display:block}.disk-grid strong{font-size:12px;color:#fff;margin-top:2px}.support-card span{color:rgba(255,255,255,.88);font-size:12px}.support-card a{font-size:11px;color:#8cecef}.support-card a:hover{color:#fff;text-decoration:underline}@media(max-width:650px){.top-user{display:none}}

/* Страница авторизации */

.login-page {
    min-height: calc(100vh - 126px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.login-card {
    width: 100%;
    max-width: 470px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--line);
}

.login-logo-wrap {
    width: 72px;
    height: 72px;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.login-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.login-brand h1 {
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1.1;
    color: var(--text);
}

.login-brand p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.login-heading {
    margin-bottom: 24px;
}

.login-heading h2 {
    margin: 0 0 7px;
    font-size: 27px;
    color: var(--text);
}

.login-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.login-error {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    color: #fda29b;
    background: rgba(239, 68, 68, 0.10);
    font-size: 14px;
}

.login-form {
    display: grid;
    gap: 18px;
}

.login-field {
    display: grid;
    gap: 8px;
}

.login-field label {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrap input {
    width: 100%;
    min-height: 48px;
    padding: 10px 44px 10px 43px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    font-size: 15px;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.login-input-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 181, 186, 0.13);
}

.login-input-icon {
    position: absolute;
    left: 15px;
    z-index: 2;
    color: var(--primary);
    font-size: 11px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
}

.password-toggle:hover {
    color: var(--text);
    background: rgba(128, 128, 128, 0.10);
}

.login-submit {
    min-height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(18, 175, 180, 0.20);
}

.login-submit:hover {
    filter: brightness(1.06);
}

.login-footer {
    display: grid;
    gap: 7px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.login-support-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-support-links a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.login-support-links a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .login-page {
        padding: 22px 14px;
        align-items: flex-start;
    }

    .login-card {
        padding: 24px 20px;
        border-radius: 17px;
    }

    .login-logo-wrap {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .login-logo {
        width: 53px;
        height: 53px;
    }

    .login-brand h1 {
        font-size: 19px;
    }

    .login-heading h2 {
        font-size: 23px;
    }
}




/* Логотипы по теме */
.theme-aware-logo {
    display: block;
    object-fit: contain;
}

.sidebar-brand-logo.theme-aware-logo {
    width: 58px;
    height: 58px;
}

.login-logo.theme-aware-logo {
    width: 64px;
    height: 64px;
}

@media (max-width: 600px) {
    .login-logo.theme-aware-logo {
        width: 53px;
        height: 53px;
    }
}

/* === ZHYLOISU ICON PATCH START === */

.theme-aware-logo {
    display: block;
    object-fit: contain;
}

.sidebar-brand {
    align-items: center;
}

.sidebar-brand-logo-wrap {
    width: 68px;
    height: 68px;
    min-width: 68px;
    padding: 7px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.sidebar-brand-logo.theme-aware-logo {
    width: 54px;
    height: 54px;
}

.sidebar-brand-title {
    font-size: 16px;
    line-height: 1.15;
}

.sidebar-brand-subtitle {
    font-size: 12px;
    line-height: 1.2;
}

.login-logo-wrap {
    width: 74px;
    height: 74px;
    min-width: 74px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.login-logo.theme-aware-logo {
    width: 58px;
    height: 58px;
}

@media (max-width: 600px) {
    .sidebar-brand-logo-wrap {
        width: 60px;
        height: 60px;
        min-width: 60px;
        padding: 6px;
    }

    .sidebar-brand-logo.theme-aware-logo {
        width: 48px;
        height: 48px;
    }

    .login-logo-wrap {
        width: 64px;
        height: 64px;
        min-width: 64px;
        padding: 6px;
    }

    .login-logo.theme-aware-logo {
        width: 50px;
        height: 50px;
    }
}

/* === ZHYLOISU ICON PATCH END === */

/* === ИСПРАВЛЕНИЕ РАЗМЕРА ЛОГОТИПА === */

/* Боковое меню */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-brand-logo-wrap {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-brand-logo,
.sidebar-brand-logo.theme-aware-logo {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.22);
}

/* Страница входа */
.login-logo-wrap {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.login-logo,
.login-logo.theme-aware-logo {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.22);
}

/* В тёмной теме убираем белую рамку */
[data-theme="dark"] .sidebar-brand-logo-wrap,
[data-theme="dark"] .login-logo-wrap {
    background: rgba(10, 35, 40, 0.35) !important;
    border: 1px solid rgba(38, 201, 205, 0.30) !important;
}

/* В светлой теме */
[data-theme="light"] .sidebar-brand-logo-wrap,
[data-theme="light"] .login-logo-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(0, 130, 140, 0.18) !important;
}

@media (max-width: 600px) {
    .sidebar-brand-logo-wrap {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
    }

    .login-logo-wrap {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
    }
}

/* === КОНЕЦ ИСПРАВЛЕНИЯ ЛОГОТИПА === */


/* === ЛОГОТИП НА ВЕСЬ КВАДРАТ === */

.sidebar-brand-logo-wrap,
.login-logo-wrap {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Боковое меню */
.sidebar-brand-logo-wrap {
    width: 102px !important;
    height: 102px !important;
    min-width: 102px !important;
    border-radius: 20px !important;
}

.sidebar-brand-logo,
.sidebar-brand-logo.theme-aware-logo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.65) !important;
    transform-origin: center !important;
}

/* Страница входа */
.login-logo-wrap {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    border-radius: 24px !important;
}

.login-logo,
.login-logo.theme-aware-logo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.50) !important;
    transform-origin: center !important;
}

/* Тёмная тема */
[data-theme="dark"] .sidebar-brand-logo-wrap,
[data-theme="dark"] .login-logo-wrap {
    background: #071b20 !important;
    border: 1px solid rgba(30, 210, 215, 0.35) !important;
}

/* Светлая тема */
[data-theme="light"] .sidebar-brand-logo-wrap,
[data-theme="light"] .login-logo-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(0, 150, 160, 0.25) !important;
}

@media (max-width: 700px) {
    .sidebar-brand-logo-wrap {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
    }

    .login-logo-wrap {
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
    }
}

/* === КОНЕЦ ЛОГОТИПА НА ВЕСЬ КВАДРАТ === */


/* Финальная настройка логотипа в боковом меню */

[data-theme="dark"] .sidebar-brand-logo-wrap {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;

    padding: 0 !important;
    overflow: hidden !important;

    border-radius: 20px !important;
    background: #071b20 !important;
    border: 1px solid rgba(27, 211, 218, 0.32) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .sidebar-brand-logo,
[data-theme="dark"] .sidebar-brand-logo.theme-aware-logo {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: scale(1.95) !important;
    transform-origin: center !important;
}

/* Светлая тема */
[data-theme="light"] .sidebar-brand-logo-wrap {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;

    padding: 0 !important;
    overflow: hidden !important;

    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 150, 160, 0.22) !important;
}

[data-theme="light"] .sidebar-brand-logo,
[data-theme="light"] .sidebar-brand-logo.theme-aware-logo {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: scale(1.85) !important;
    transform-origin: center !important;
}


/* === ФИНАЛЬНЫЙ КВАДРАТНЫЙ ЛОГОТИП === */

.sidebar-brand-logo-wrap {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

.sidebar-brand-logo,
.sidebar-brand-logo.theme-aware-logo {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
}

.login-logo-wrap {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}

.login-logo,
.login-logo.theme-aware-logo {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
}

[data-theme="dark"] .sidebar-brand-logo-wrap,
[data-theme="dark"] .login-logo-wrap {
    background: #071b20 !important;
    border: 1px solid rgba(28, 210, 218, 0.30) !important;
}

[data-theme="light"] .sidebar-brand-logo-wrap,
[data-theme="light"] .login-logo-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(0, 150, 160, 0.20) !important;
}

/* === КОНЕЦ ФИНАЛЬНОГО ЛОГОТИПА === */


/* === ОБНОВЛЁННАЯ КАРТОТЕКА НАСЕЛЕНИЯ === */

.population-page {
    width: 100%;
}

.population-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.population-heading h1 {
    margin: 0 0 5px;
}

.population-import-button {
    white-space: nowrap;
}

.population-filters {
    display: grid;
    grid-template-columns:
        minmax(320px, 1fr)
        minmax(145px, 180px)
        minmax(180px, 220px)
        minmax(170px, 220px)
        auto
        auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.population-filters input,
.population-filters select {
    width: 100%;
    min-height: 42px;
}

.population-reset {
    padding: 9px 4px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.population-reset:hover {
    text-decoration: underline;
}

.population-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--panel);
}

.population-table {
    width: 100%;
    min-width: 1380px;
    border-collapse: collapse;
    table-layout: fixed;
}

.population-table th,
.population-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    text-align: left;
}

.population-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--muted);
    background: var(--panel2);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.population-table tbody tr:last-child td {
    border-bottom: 0;
}

.population-row {
    cursor: pointer;
    transition: background-color 0.14s ease;
}

.population-row:hover {
    background: rgba(24, 185, 190, 0.07);
}

.population-account-column {
    width: 115px;
}

.population-name-column {
    width: 275px;
}

.population-address-column {
    width: 360px;
}

.population-phone-column {
    width: 145px;
}

.population-residents-column {
    width: 85px;
}

.population-contract-column {
    width: 125px;
}

.population-date-column {
    width: 120px;
}

.population-documents-column {
    width: 75px;
}

.population-account a,
.population-name a,
.population-phone a {
    color: inherit;
    text-decoration: none;
}

.population-account a {
    color: var(--primary);
    font-weight: 800;
}

.population-name a {
    font-weight: 700;
}

.population-phone a:hover,
.population-name a:hover {
    color: var(--primary);
}

.population-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.center {
    text-align: center !important;
}

.residents-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 27px;
    padding: 0 8px;
    border-radius: 999px;
    color: #dffeff;
    background: rgba(22, 178, 184, 0.16);
    border: 1px solid rgba(29, 202, 207, 0.25);
    font-weight: 800;
}

.document-count-active,
.document-count-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 27px;
    padding: 0 8px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
}

.document-count-active {
    color: #087647;
    background: #ecfdf3;
}

.document-count-empty {
    color: var(--muted);
    background: rgba(128, 128, 128, 0.10);
}

.population-empty {
    padding: 42px !important;
    color: var(--muted);
    text-align: center !important;
}

.population-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
}

.pagination-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-side-right {
    justify-content: flex-end;
}

.population-pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 35px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: var(--panel);
    text-decoration: none;
}

.population-pagination a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-current {
    color: var(--muted);
    white-space: nowrap;
}

.pagination-current strong {
    color: var(--text);
}

[data-theme="light"] .residents-badge {
    color: #05696d;
    background: rgba(22, 178, 184, 0.10);
}

@media (max-width: 1250px) {
    .population-filters {
        grid-template-columns:
            minmax(300px, 1fr)
            minmax(150px, 190px)
            minmax(190px, 220px)
            minmax(180px, 220px);
    }

    .population-filters button {
        width: 100%;
    }
}

@media (max-width: 850px) {
    .population-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .population-import-button {
        width: fit-content;
    }

    .population-filters {
        grid-template-columns: 1fr 1fr;
    }

    .population-search {
        grid-column: span 2;
    }

    .population-pagination {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .pagination-side,
    .pagination-side-right {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .population-filters {
        grid-template-columns: 1fr;
    }

    .population-search {
        grid-column: auto;
    }
}

/* === КОНЕЦ ОБНОВЛЁННОЙ КАРТОТЕКИ === */


/* === ПОЛНАЯ КАРТОЧКА АБОНЕНТА === */

.population-filters-updated {
    grid-template-columns:
        minmax(380px, 1fr)
        minmax(210px, 260px)
        minmax(190px, 230px)
        auto
        auto;
}

.account-profile-page {
    width: 100%;
}

.account-profile-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.account-back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.account-profile-header h1 {
    margin: 0 0 7px;
}

.account-profile-subtitle {
    color: var(--muted);
}

.account-profile-subtitle strong {
    color: var(--text);
}

.account-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.account-profile-card {
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--panel);
}

.account-profile-card h2 {
    margin: 0 0 18px;
    font-size: 18px;
}

.account-data-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.account-data-list > div {
    display: grid;
    grid-template-columns: minmax(120px, 42%) 1fr;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.account-data-list > div:last-child {
    border-bottom: 0;
}

.account-data-list dt {
    color: var(--muted);
    font-size: 12px;
}

.account-data-list dd {
    margin: 0;
    color: var(--text);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.account-data-list dd a {
    color: var(--primary);
    text-decoration: none;
}

.large-residents-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    color: #dffeff;
    background: rgba(22, 178, 184, 0.18);
    border: 1px solid rgba(29, 202, 207, 0.30);
    font-size: 16px;
    font-weight: 850;
}

.account-section {
    margin-top: 24px;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--panel);
}

.account-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.account-section-heading h2 {
    margin: 0 0 4px;
}

.account-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.account-documents-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.account-documents-table th,
.account-documents-table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.account-documents-table th {
    color: var(--muted);
    background: var(--panel2);
    font-size: 11px;
    text-transform: uppercase;
}

.account-document-actions {
    white-space: nowrap;
}

.account-document-actions a {
    margin-right: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.account-history-list {
    display: grid;
    gap: 10px;
}

.account-history-item {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 18px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg);
}

.account-history-date {
    color: var(--muted);
    font-size: 12px;
}

.account-history-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.account-history-content span {
    color: var(--muted);
    font-size: 12px;
}

.account-history-empty {
    padding: 28px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 1200px) {
    .account-profile-grid {
        grid-template-columns: 1fr 1fr;
    }

    .population-filters-updated {
        grid-template-columns:
            minmax(320px, 1fr)
            minmax(200px, 250px)
            minmax(180px, 220px);
    }
}

@media (max-width: 800px) {
    .account-profile-header,
    .account-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .account-profile-grid {
        grid-template-columns: 1fr;
    }

    .account-header-actions {
        flex-wrap: wrap;
    }

    .account-history-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .population-filters-updated {
        grid-template-columns: 1fr;
    }
}

/* === КОНЕЦ ПОЛНОЙ КАРТОЧКИ АБОНЕНТА === */


/* WhatsApp и имена документов */

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.document-file-name {
    display: grid;
    gap: 4px;
}

.document-file-name strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.document-file-name small {
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}


.document-share-button {
    padding: 0;
    margin-right: 12px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.document-share-button:hover {
    text-decoration: underline;
}

.document-share-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Ручное добавление документов */

.attachment-upload-form {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel2);
}

.attachment-upload-form[hidden] {
    display: none;
}

.attachment-form-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(260px, 1fr)
        minmax(260px, 1fr);
    gap: 14px;
}

.attachment-form-grid label {
    display: grid;
    gap: 7px;
}

.attachment-form-grid label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.attachment-form-grid input,
.attachment-form-grid textarea {
    width: 100%;
}

.attachment-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

@media (max-width: 900px) {
    .attachment-form-grid {
        grid-template-columns: 1fr;
    }
}


/* Видимость результатов поиска абонента */
.account-search-results .account-search-result {
    color: #eaf4f5 !important;
}

.account-search-results .account-search-number {
    color: #18d5df !important;
    font-weight: 700 !important;
}

.account-search-results .account-search-name {
    display: block !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 600 !important;
}

.account-search-results .account-search-address {
    display: block !important;
    color: #b9cacc !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* === ACCOUNT DIGITAL CARD === */

.account-digital-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        180px
        minmax(260px, .9fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
    margin: 0 0 24px;
    background:
        linear-gradient(
            135deg,
            rgba(8,127,134,.08),
            rgba(255,255,255,.96)
        );
    border: 1px solid
        rgba(8,127,134,.18);
    border-radius: 18px;
    box-shadow:
        0 10px 30px
        rgba(15,43,47,.06);
}

.account-digital-label {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #087f86;
}

.account-digital-number {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
    color: #087f86;
}

.account-digital-name {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.25;
}

.account-digital-address {
    margin-top: 8px;
    color: var(
        --text-muted,
        #65757a
    );
    line-height: 1.45;
}

.account-digital-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    font-size: 14px;
}

.account-digital-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px;
    background: rgba(
        8,
        127,
        134,
        .08
    );
    border-radius: 999px;
}

.account-digital-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.account-digital-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}

.account-digital-qr img {
    display: block;
    width: 160px;
    height: 160px;
    padding: 7px;
    background: white;
    border: 1px solid
        rgba(8,127,134,.18);
    border-radius: 14px;
    box-shadow:
        0 6px 18px
        rgba(15,43,47,.08);
}

.account-digital-qr small,
.account-email-panel > small {
    font-size: 11px;
    color: var(
        --text-muted,
        #68777c
    );
}

.account-email-panel {
    padding: 18px;
    background: rgba(
        255,
        255,
        255,
        .72
    );
    border: 1px solid
        rgba(8,127,134,.14);
    border-radius: 14px;
}

.account-email-title {
    margin-bottom: 11px;
    font-size: 15px;
    font-weight: 750;
}

.account-email-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-email-form input[type="email"] {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid
        rgba(100,120,125,.35);
    border-radius: 9px;
    background: var(
        --input-bg,
        #fff
    );
    color: inherit;
}

.account-email-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
}

.account-email-checkbox input {
    margin-top: 2px;
}

.account-email-panel > small {
    display: block;
    margin-top: 9px;
    line-height: 1.35;
}

@media (max-width: 1050px) {
    .account-digital-card {
        grid-template-columns:
            minmax(0, 1fr)
            170px;
    }

    .account-email-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .account-digital-card {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .account-digital-qr {
        order: -1;
    }

    .account-email-panel {
        grid-column: auto;
    }
}

@media print {
    body * {
        visibility: hidden !important;
    }

    .account-digital-card,
    .account-digital-card * {
        visibility: visible !important;
    }

    .account-digital-card {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns:
            1fr 180px;
        box-shadow: none;
        border: 1px solid #bbb;
        background: white;
    }

    .account-email-panel,
    .account-digital-actions {
        display: none !important;
    }
}

/* === END ACCOUNT DIGITAL CARD === */

/* ======================================================
   DOCUMENT QUALITY CONTROL
   ====================================================== */

.document-quality-panel {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid rgba(120,135,140,.22);
    border-radius: 14px;
    background: var(--card-bg, #fff);
}

.document-quality-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.document-quality-heading h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.document-quality-heading p {
    margin: 0;
    font-size: 12px;
    opacity: .68;
}

.document-quality-list {
    display: grid;
    gap: 8px;
}

.document-quality-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.4;
}

.document-quality-item strong {
    display: block;
    margin-bottom: 2px;
}

.document-quality-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: 800;
}

.document-quality-success {
    background: rgba(28,150,95,.08);
    border-color: rgba(28,150,95,.18);
}

.document-quality-success .document-quality-icon {
    background: rgba(28,150,95,.16);
    color: #168454;
}

.document-quality-warning {
    background: rgba(224,155,20,.10);
    border-color: rgba(224,155,20,.20);
}

.document-quality-warning .document-quality-icon {
    background: rgba(224,155,20,.18);
    color: #a86d00;
}

.document-quality-danger {
    background: rgba(198,55,55,.08);
    border-color: rgba(198,55,55,.20);
}

.document-quality-danger .document-quality-icon {
    background: rgba(198,55,55,.16);
    color: #b52626;
}

.document-check-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.document-check-success {
    color: #14744a;
    background: rgba(28,150,95,.12);
}

.document-check-warning {
    color: #986200;
    background: rgba(224,155,20,.15);
}

.document-check-danger {
    color: #a52222;
    background: rgba(198,55,55,.13);
}

.document-duplicates {
    margin-top: 14px;
    padding: 13px;
    border-radius: 10px;
    border: 1px solid rgba(224,155,20,.25);
    background: rgba(224,155,20,.08);
}

.document-duplicates > p {
    margin: 4px 0 10px;
    font-size: 12px;
}

.document-duplicate-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.document-duplicate-links a {
    font-size: 12px;
    font-weight: 650;
}

.document-check-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.document-duplicate-count {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #986200;
    background: rgba(224,155,20,.13);
}

/* ======================================================
   END DOCUMENT QUALITY CONTROL
   ====================================================== */

/* ======================================================
   BULK DOCUMENT REVIEW
   ====================================================== */

.review-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 18px;
}

.review-queue-header h1 {
    margin-bottom: 4px;
}

.review-queue-header p {
    margin: 0;
    opacity: .68;
}

.bulk-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.bulk-selected-counter {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(8,127,134,.10);
}

.bulk-action-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    padding: 14px 16px;
    margin-bottom: 12px;

    border: 1px solid
        rgba(8,127,134,.20);

    border-radius: 12px;

    background:
        rgba(8,127,134,.06);
}

.bulk-action-help {
    margin-top: 3px;
    font-size: 12px;
    opacity: .7;
}

.review-queue-table {
    width: 100%;
    border-collapse: collapse;
}

.review-queue-table th,
.review-queue-table td {
    padding: 11px 10px;
    border-bottom: 1px solid
        rgba(125,145,150,.17);
    vertical-align: middle;
}

.review-queue-table tbody tr:hover {
    background:
        rgba(8,127,134,.035);
}

.bulk-checkbox-column {
    width: 42px;
    text-align: center;
}

.bulk-document-checkbox,
.bulk-checkbox-column input {
    width: 18px;
    height: 18px;
    accent-color: #087f86;
    cursor: pointer;
}

.bulk-checkbox-column input:disabled {
    cursor: not-allowed;
    opacity: .32;
}

.review-quality-success {
    box-shadow:
        inset 3px 0 0
        rgba(28,150,95,.65);
}

.review-quality-warning {
    box-shadow:
        inset 3px 0 0
        rgba(224,155,20,.75);
}

.review-quality-danger {
    box-shadow:
        inset 3px 0 0
        rgba(198,55,55,.75);
}

.compact-button {
    display: inline-flex;
    white-space: nowrap;
}

#bulk-accept-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 900px) {

    .review-queue-header,
    .bulk-action-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .bulk-toolbar {
        width: 100%;
    }
}

/* ======================================================
   END BULK DOCUMENT REVIEW
   ====================================================== */

/* ======================================================
   EMAIL FORM / DARK THEME FIX
   ====================================================== */

.account-email-panel {
    color: #17252a;
}

.account-email-title {
    color: #17252a;
    font-weight: 700;
}

.account-email-form input[type="email"] {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;

    background: #ffffff !important;
    color: #111827 !important;

    -webkit-text-fill-color: #111827 !important;

    caret-color: #111827 !important;

    border: 1px solid #7d8b8f !important;
    border-radius: 9px;

    padding: 10px 12px;

    font-size: 15px;
    font-weight: 500;
}

.account-email-form input[type="email"]::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;

    -webkit-text-fill-color: #6b7280 !important;
}

.account-email-form input[type="email"]:focus {
    outline: none;

    border-color: #12adb5 !important;

    box-shadow:
        0 0 0 3px
        rgba(18,173,181,.18);
}

.account-email-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #34474b !important;

    font-size: 12px;
    opacity: 1 !important;
}

.account-email-checkbox span {
    color: #34474b !important;
    opacity: 1 !important;
}

.account-email-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    accent-color: #12adb5;
}

.account-email-panel > small {
    color: #627477 !important;
}

[data-theme="dark"] .account-email-panel {
    background: #f4f6f6 !important;
    color: #17252a !important;
}

[data-theme="dark"] .account-email-title {
    color: #17252a !important;
}

[data-theme="dark"] .account-email-checkbox,
[data-theme="dark"] .account-email-checkbox span {
    color: #34474b !important;
}

[data-theme="dark"] .account-email-panel > small {
    color: #627477 !important;
}

/* ======================================================
   END EMAIL FORM FIX
   ====================================================== */

/* ======================================================
   DJANGO MESSAGES DARK THEME
   ====================================================== */

.messages,
.message-list {
    width: 100%;
}

.message,
.messages li,
.alert {
    box-sizing: border-box;
    border-radius: 10px;
    font-weight: 600;
}

.message.success,
.messages .success,
.alert-success {
    background: #dff7ed !important;
    color: #14532d !important;
    border: 1px solid #9ddfc2 !important;
}

.message.warning,
.messages .warning,
.alert-warning {
    background: #fff6d9 !important;
    color: #7a4b00 !important;
    border: 1px solid #e8cc7a !important;
}

.message.error,
.messages .error,
.alert-error,
.alert-danger {
    background: #fde7e7 !important;
    color: #8f1d1d !important;
    border: 1px solid #efb0b0 !important;
}

.message.info,
.messages .info,
.alert-info {
    background: #e6f4fb !important;
    color: #164e63 !important;
    border: 1px solid #aad8ea !important;
}

[data-theme="dark"] .message.success,
[data-theme="dark"] .messages .success,
[data-theme="dark"] .alert-success {
    background: #dff7ed !important;
    color: #14532d !important;
}

[data-theme="dark"] .message.warning,
[data-theme="dark"] .messages .warning,
[data-theme="dark"] .alert-warning {
    background: #fff6d9 !important;
    color: #7a4b00 !important;
}

[data-theme="dark"] .message.error,
[data-theme="dark"] .messages .error,
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
    background: #fde7e7 !important;
    color: #8f1d1d !important;
}

[data-theme="dark"] .message.info,
[data-theme="dark"] .messages .info,
[data-theme="dark"] .alert-info {
    background: #e6f4fb !important;
    color: #164e63 !important;
}

/* ======================================================
   END DJANGO MESSAGES DARK THEME
   ====================================================== */

/* ======================================================
   DJANGO MESSAGES DARK THEME
   ====================================================== */

.messages,
.message-list {
    width: 100%;
}

.message,
.messages li,
.alert {
    box-sizing: border-box;
    border-radius: 10px;
    font-weight: 600;
}

.message.success,
.messages .success,
.alert-success {
    background: #dff7ed !important;
    color: #14532d !important;
    border: 1px solid #9ddfc2 !important;
}

.message.warning,
.messages .warning,
.alert-warning {
    background: #fff6d9 !important;
    color: #7a4b00 !important;
    border: 1px solid #e8cc7a !important;
}

.message.error,
.messages .error,
.alert-error,
.alert-danger {
    background: #fde7e7 !important;
    color: #8f1d1d !important;
    border: 1px solid #efb0b0 !important;
}

.message.info,
.messages .info,
.alert-info {
    background: #e6f4fb !important;
    color: #164e63 !important;
    border: 1px solid #aad8ea !important;
}

[data-theme="dark"] .message.success,
[data-theme="dark"] .messages .success,
[data-theme="dark"] .alert-success {
    background: #dff7ed !important;
    color: #14532d !important;
}

[data-theme="dark"] .message.warning,
[data-theme="dark"] .messages .warning,
[data-theme="dark"] .alert-warning {
    background: #fff6d9 !important;
    color: #7a4b00 !important;
}

[data-theme="dark"] .message.error,
[data-theme="dark"] .messages .error,
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
    background: #fde7e7 !important;
    color: #8f1d1d !important;
}

[data-theme="dark"] .message.info,
[data-theme="dark"] .messages .info,
[data-theme="dark"] .alert-info {
    background: #e6f4fb !important;
    color: #164e63 !important;
}

/* ======================================================
   END DJANGO MESSAGES DARK THEME
   ====================================================== */

/* ======================================================
   ACCOUNT BALANCE
   ====================================================== */

.account-balance-section {
    margin-top: 24px;
    padding: 22px;

    border: 1px solid
        rgba(125,145,150,.24);

    border-radius: 16px;

    background:
        rgba(20,40,44,.28);
}

.account-balance-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.account-balance-heading h2 {
    margin: 0;
    font-size: 20px;
}

.account-balance-date {
    margin-top: 5px;
    font-size: 12px;
    opacity: .62;
}

.account-balance-current {
    margin-bottom: 22px;
}

.balance-state {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 105px;
    padding: 18px 20px;

    border-radius: 14px;
}

.balance-state-label {
    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .06em;

    opacity: .72;
}

.balance-state strong {
    font-size: 30px;
    line-height: 1.15;
}

.balance-debt {
    background:
        rgba(211,72,72,.12);

    border:
        1px solid rgba(211,72,72,.30);
}

.balance-debt strong {
    color: #ef7777;
}

.balance-overpayment {
    background:
        rgba(36,177,126,.12);

    border:
        1px solid rgba(36,177,126,.30);
}

.balance-overpayment strong {
    color: #42d39d;
}

.balance-zero {
    background:
        rgba(42,175,184,.10);

    border:
        1px solid rgba(42,175,184,.25);
}

.balance-zero strong {
    color: #35c8d0;
}

.balance-history-wrapper h3 {
    margin:
        0 0 10px 0;

    font-size: 15px;
}

.balance-history-table {
    overflow: hidden;

    border:
        1px solid rgba(125,145,150,.20);

    border-radius: 12px;
}

.balance-history-row {
    display: grid;

    grid-template-columns:
        minmax(110px,.8fr)
        minmax(150px,1.4fr)
        minmax(120px,1fr);

    gap: 12px;

    align-items: center;

    padding: 11px 14px;

    border-bottom:
        1px solid rgba(125,145,150,.14);
}

.balance-history-row:last-child {
    border-bottom: 0;
}

.balance-history-head {
    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;

    opacity: .6;
}

.balance-history-row strong {
    text-align: right;
}

.balance-history-empty {
    padding: 16px;

    border:
        1px dashed rgba(125,145,150,.25);

    border-radius: 10px;

    opacity: .68;
}

@media (max-width: 700px) {

    .balance-history-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .balance-history-row strong {
        text-align: left;
    }
}

/* ======================================================
   END ACCOUNT BALANCE
   ====================================================== */

/* =====================================================
   DASHBOARD CLICKABLE + DEBT
   ===================================================== */

.dashboard-click-card {
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.dashboard-click-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .16);
}

.dashboard-click-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.dashboard-debt-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 150px;

    margin-top: 18px;
    padding: 22px;

    text-decoration: none;
    color: inherit;

    border:
        1px solid rgba(214, 76, 76, .34);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(194, 55, 55, .15),
            rgba(115, 34, 34, .08)
        );
}

.dashboard-debt-label {
    font-size: 14px;
    font-weight: 700;
    opacity: .72;
}

.dashboard-debt-value {
    margin-top: 8px;

    font-size: clamp(
        26px,
        4vw,
        38px
    );

    font-weight: 800;
    line-height: 1.1;
}

.dashboard-debt-meta {
    margin-top: 8px;

    font-size: 13px;
    opacity: .68;
}


/* =====================================================
   ACCOUNT IIN
   ===================================================== */

.account-iin-card {
    display: inline-flex;
    flex-direction: column;

    min-width: 220px;

    margin-top: 12px;
    padding: 12px 16px;

    border:
        1px solid rgba(91, 160, 170, .25);

    border-radius: 12px;

    background:
        rgba(50, 110, 120, .08);
}

.account-iin-label {
    margin-bottom: 3px;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .06em;

    opacity: .62;
}

.account-iin-value {
    font-size: 18px;
    letter-spacing: .04em;
}


/* =====================================================
   POPULATION BALANCE FILTER
   ===================================================== */

.population-balance-filter {
    min-width: 190px;
}


/* =====================================================
   ACCOUNT BALANCE
   ===================================================== */

.account-balance-card {
    margin-top: 18px;
    padding: 18px 20px;

    border: 1px solid rgba(127, 127, 127, .20);
    border-radius: 14px;

    background: rgba(127, 127, 127, .05);
}

.account-balance-title {
    margin-bottom: 6px;

    font-size: 13px;
    font-weight: 700;

    opacity: .68;
}

.account-balance-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.account-balance-debt {
    color: #d9534f;
}

.account-balance-positive {
    color: #2f9e68;
}

.account-balance-zero {
    font-size: 18px;
    font-weight: 700;
}

.account-balance-empty {
    font-size: 16px;
    opacity: .65;
}

.account-balance-date {
    margin-top: 8px;

    font-size: 12px;
    opacity: .55;
}


/* =====================================================
   DASHBOARD — 5 CARDS
   ===================================================== */

.stats-grid-five {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}

.dashboard-stat-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

.dashboard-stat-link:hover {
    transform: translateY(-2px);
}

.dashboard-debt-summary {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.35;
    opacity: .72;
}

.stat-card.debt {
    border-color: rgba(220, 80, 80, .35);
}


/* =====================================================
   ACCOUNT — BALANCE AT TOP
   ===================================================== */

.account-balance-top {
    margin-bottom: 20px;
}

.account-balance-top > section {
    margin-top: 0;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1200px) {
    .stats-grid-five {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .stats-grid-five {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .stats-grid-five {
        grid-template-columns: 1fr;
    }
}


/* ===== DASHBOARD FIVE CARDS FIX ===== */

.stats-grid-five {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-stat-link {
    box-sizing: border-box;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.dashboard-debt-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dashboard-debt-count {
    font-size: 30px;
    line-height: 1;
}

.dashboard-debt-word {
    margin-top: 5px;
    font-size: 13px;
    opacity: .75;
}

.dashboard-debt-money {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-debt-bottom {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    opacity: .7;
}

@media (max-width: 1250px) {
    .stats-grid-five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .stats-grid-five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .stats-grid-five {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   GLOBAL FONT — UBUNTU
   ===================================================== */

html,
body,
button,
input,
select,
textarea {
    font-family:
        "Ubuntu",
        "Segoe UI",
        Arial,
        sans-serif;
}


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

.status-badge.status-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: #dcfce7;
    color: #166534;

    border: 1px solid rgba(22, 101, 52, .20);

    font-weight: 700;
}

.status-badge.status-success::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
}

.status-badge.status-muted {
    background: #e5e7eb;
    color: #4b5563;
    font-weight: 700;
}

[data-theme="dark"] .status-badge.status-success {
    background: rgba(22, 163, 74, .18);
    color: #86efac;
    border-color: rgba(74, 222, 128, .32);
}

[data-theme="dark"] .status-badge.status-success::before {
    background: #4ade80;
}

[data-theme="dark"] .status-badge.status-muted {
    background: rgba(148, 163, 184, .14);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .22);
}


/* =====================================================
   PRINT CARD FOOTER
   ===================================================== */

.account-print-footer {
    display: none;
}

@media print {

    /* Не печатать URL после ссылок */
    a[href]::after {
        content: none !important;
    }

    .account-digital-qr a::after {
        content: none !important;
    }

    .account-digital-qr small {
        display: none !important;
    }

    .account-print-footer {
        display: flex !important;
        visibility: visible !important;

        grid-column: 1 / -1;

        justify-content: space-between;
        align-items: flex-end;
        gap: 20px;

        margin-top: 18px;
        padding-top: 12px;

        border-top: 1px solid #d5d5d5;

        color: #333;
    }

    .account-print-footer * {
        visibility: visible !important;
    }

    .account-print-company {
        display: flex;
        flex-direction: column;
        gap: 3px;

        font-size: 10px;
        line-height: 1.35;
    }

    .account-print-company strong {
        font-size: 11px;
        color: #111;
    }

    .account-print-support {
        font-size: 8px;
        line-height: 1.3;
        color: #777;
        text-align: right;
        white-space: nowrap;
    }
}


@media print {
    .account-print-footer {
        justify-content: flex-start !important;
    }

    .account-print-support {
        display: none !important;
    }
}


/* =====================================================
   PRINT DETAILS — IIN + BALANCE
   ===================================================== */

.account-print-details {
    display: none;
}

@media print {

    .account-print-details {
        display: grid !important;
        visibility: visible !important;
        gap: 0;

        margin-top: 14px;
        padding-top: 10px;

        border-top: 1px solid #d8d8d8;

        color: #111;
    }

    .account-print-details *,
    .account-print-row,
    .account-print-row * {
        visibility: visible !important;
    }

    .account-print-row {
        display: grid !important;
        grid-template-columns: 135px 1fr;
        gap: 12px;

        padding: 5px 0;

        font-size: 10px;
        line-height: 1.3;
    }

    .account-print-row span {
        color: #666;
        font-weight: 500;
    }

    .account-print-row strong {
        color: #111;
        font-weight: 700;
    }

    .account-print-debt {
        color: #a61b1b !important;
    }

    .account-print-overpayment {
        color: #087647 !important;
    }
}



/* =====================================================
   ACCOUNT DETAIL — LIGHT / DARK COLOR SYSTEM
   ===================================================== */

@media screen {

    /* =================================================
       LIGHT THEME — DIGITAL CARD
       ================================================= */

    .account-digital-card {
        background:
            linear-gradient(
                135deg,
                #f1fbfb 0%,
                #ffffff 55%,
                #f7fbfb 100%
            ) !important;

        border-color: rgba(8, 127, 134, .20) !important;

        box-shadow:
            0 10px 32px
            rgba(18, 61, 66, .07) !important;
    }

    .account-digital-label,
    .account-digital-number {
        color: #087f86 !important;
    }

    .account-digital-name {
        color: #102f35 !important;
    }

    .account-digital-address {
        color: #60777b !important;
    }

    .account-digital-meta span {
        background: #e6f5f6 !important;
        color: #24494e !important;
    }

    .account-digital-qr img {
        background: #ffffff !important;
        border-color: #cfe2e4 !important;
    }


    /* =================================================
       LIGHT THEME — EMAIL PANEL
       ================================================= */

    .account-email-panel {
        background: #ffffff !important;

        border-color:
            rgba(8, 127, 134, .18) !important;

        box-shadow:
            0 5px 18px
            rgba(26, 68, 72, .04);
    }

    .account-email-title {
        color: #12363b !important;
    }

    .account-email-form input[type="email"] {
        background: #ffffff !important;
        color: #172f34 !important;
        border-color: #9bafb2 !important;
    }

    .account-email-form input[type="email"]::placeholder {
        color: #77898c !important;
    }


    /* =================================================
       LIGHT THEME — BALANCE SECTION
       ================================================= */

    .account-balance-section {
        background: #ffffff !important;

        border-color:
            rgba(8, 127, 134, .16) !important;

        box-shadow:
            0 8px 26px
            rgba(20, 60, 65, .05);
    }

    .account-balance-heading h2,
    .balance-history-wrapper h3 {
        color: #17363b !important;
    }

    .account-balance-date {
        color: #718286 !important;
        opacity: 1 !important;
    }

    .balance-history-table {
        background: #ffffff !important;
        border-color: #dce7e8 !important;
    }

    .balance-history-row {
        border-color: #e5eded !important;
        color: #243d42 !important;
    }

    .balance-history-head {
        color: #708185 !important;
        opacity: 1 !important;
    }


    /* Переплата — LIGHT */

    .balance-overpayment {
        background: #ecfaf5 !important;
        border-color: #b7e8d5 !important;
    }

    .balance-overpayment .balance-state-label {
        color: #27765d !important;
        opacity: 1 !important;
    }

    .balance-overpayment strong {
        color: #15936a !important;
    }


    /* Задолженность — LIGHT */

    .balance-debt {
        background: #fff2f2 !important;
        border-color: #f1c4c4 !important;
    }

    .balance-debt .balance-state-label {
        color: #9b4545 !important;
        opacity: 1 !important;
    }

    .balance-debt strong {
        color: #c74242 !important;
    }


    /* Нулевой баланс — LIGHT */

    .balance-zero {
        background: #eef9fa !important;
        border-color: #c3e4e6 !important;
    }

    .balance-zero .balance-state-label {
        color: #33747a !important;
        opacity: 1 !important;
    }

    .balance-zero strong {
        color: #138b94 !important;
    }


    /* =================================================
       DARK THEME — DIGITAL CARD
       ================================================= */

    [data-theme="dark"] .account-digital-card {
        background:
            linear-gradient(
                135deg,
                #102326 0%,
                #13292d 55%,
                #102124 100%
            ) !important;

        border-color:
            rgba(46, 174, 181, .26) !important;

        box-shadow:
            0 12px 34px
            rgba(0, 0, 0, .20) !important;
    }

    [data-theme="dark"] .account-digital-label,
    [data-theme="dark"] .account-digital-number {
        color: #21b5bd !important;
    }

    [data-theme="dark"] .account-digital-name {
        color: #f2f7f7 !important;
    }

    [data-theme="dark"] .account-digital-address {
        color: #adc1c4 !important;
    }

    [data-theme="dark"] .account-digital-meta span {
        background:
            rgba(35, 170, 178, .12) !important;

        color: #d8eeee !important;
    }

    [data-theme="dark"] .account-digital-qr img {
        background: #ffffff !important;

        border-color:
            rgba(58, 185, 191, .28) !important;

        box-shadow:
            0 8px 24px
            rgba(0, 0, 0, .20) !important;
    }

    [data-theme="dark"] .account-digital-qr small {
        color: #92aaae !important;
    }


    /* =================================================
       DARK THEME — EMAIL PANEL
       ================================================= */

    [data-theme="dark"] .account-email-panel {
        background: #15282c !important;

        border-color:
            rgba(57, 157, 164, .25) !important;

        box-shadow:
            none !important;
    }

    [data-theme="dark"] .account-email-title {
        color: #f1f7f7 !important;
    }

    [data-theme="dark"] .account-email-panel > small,
    [data-theme="dark"] .account-email-checkbox {
        color: #9fb3b6 !important;
    }

    [data-theme="dark"]
    .account-email-form input[type="email"] {
        background: #0e1d20 !important;
        color: #eef7f7 !important;

        border-color:
            rgba(132, 169, 174, .38) !important;
    }

    [data-theme="dark"]
    .account-email-form input[type="email"]::placeholder {
        color: #81999d !important;
    }


    /* =================================================
       DARK THEME — BALANCE SECTION
       ================================================= */

    [data-theme="dark"] .account-balance-section {
        background: #0f1e21 !important;

        border-color:
            rgba(89, 141, 147, .28) !important;

        box-shadow:
            0 10px 30px
            rgba(0, 0, 0, .14) !important;
    }

    [data-theme="dark"] .account-balance-heading h2,
    [data-theme="dark"] .balance-history-wrapper h3 {
        color: #f0f6f6 !important;
    }

    [data-theme="dark"] .account-balance-date {
        color: #91a5a8 !important;
        opacity: 1 !important;
    }

    [data-theme="dark"] .balance-history-table {
        background: #102124 !important;

        border-color:
            rgba(108, 148, 153, .24) !important;
    }

    [data-theme="dark"] .balance-history-row {
        border-color:
            rgba(115, 153, 158, .16) !important;

        color: #dce8e9 !important;
    }

    [data-theme="dark"] .balance-history-head {
        color: #8fa3a7 !important;
        opacity: 1 !important;
    }


    /* Переплата — DARK */

    [data-theme="dark"] .balance-overpayment {
        background:
            rgba(26, 126, 91, .22) !important;

        border-color:
            rgba(53, 196, 145, .32) !important;
    }

    [data-theme="dark"]
    .balance-overpayment .balance-state-label {
        color: #9acdbb !important;
        opacity: 1 !important;
    }

    [data-theme="dark"] .balance-overpayment strong {
        color: #38d69b !important;
    }


    /* Задолженность — DARK */

    [data-theme="dark"] .balance-debt {
        background:
            rgba(142, 48, 48, .22) !important;

        border-color:
            rgba(226, 90, 90, .32) !important;
    }

    [data-theme="dark"]
    .balance-debt .balance-state-label {
        color: #e8aaaa !important;
        opacity: 1 !important;
    }

    [data-theme="dark"] .balance-debt strong {
        color: #ff7f7f !important;
    }


    /* Нулевой баланс — DARK */

    [data-theme="dark"] .balance-zero {
        background:
            rgba(22, 112, 120, .20) !important;

        border-color:
            rgba(50, 184, 194, .30) !important;
    }

    [data-theme="dark"]
    .balance-zero .balance-state-label {
        color: #a4d2d6 !important;
        opacity: 1 !important;
    }

    [data-theme="dark"] .balance-zero strong {
        color: #42ced6 !important;
    }
}


/* =====================================================
   END ACCOUNT DETAIL COLOR SYSTEM
   ===================================================== */


/* =====================================================
   ACCOUNT EDIT
   ===================================================== */

.population-edit-column {
    width: 54px;
}

.population-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 9px;
    border: 1px solid rgba(8,127,134,.22);

    background: rgba(8,127,134,.08);

    color: #087f86;
    text-decoration: none;

    font-size: 19px;
    font-weight: 700;

    transition:
        background .15s ease,
        transform .15s ease;
}

.population-edit-button:hover {
    background: rgba(8,127,134,.16);
    transform: translateY(-1px);
}

.account-edit-form {
    display: grid;
    gap: 18px;
}

.account-edit-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-edit-field {
    display: grid;
    gap: 6px;
}

.account-edit-field label {
    font-size: 12px;
    font-weight: 700;
    opacity: .72;
}

.account-edit-field input,
.account-edit-field select {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;

    padding: 8px 11px;

    border: 1px solid
        rgba(110,135,140,.35);

    border-radius: 9px;

    background: var(--input-bg, #fff);
    color: inherit;
}

.account-edit-reason ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.account-edit-reason label {
    display: inline-flex;
    gap: 7px;
    align-items: center;

    padding: 10px 14px;

    border: 1px solid
        rgba(8,127,134,.20);

    border-radius: 10px;

    cursor: pointer;
}

.account-edit-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

[data-theme="dark"]
.population-edit-button {
    color: #5dd7dc;

    background:
        rgba(44,170,178,.12);

    border-color:
        rgba(71,190,198,.25);
}

[data-theme="dark"]
.account-edit-field input,
[data-theme="dark"]
.account-edit-field select {
    background: #102124;
    color: #eef6f7;

    border-color:
        rgba(129,160,165,.32);
}

@media (max-width: 700px) {
    .account-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   END ACCOUNT EDIT
   ===================================================== */


/* =====================================================
   ACCOUNT OWNER HISTORY
   ===================================================== */

.account-owner-history {
    margin: 0 0 24px;
    padding: 22px;

    border: 1px solid rgba(8,127,134,.16);
    border-radius: 16px;

    background: var(--card-bg, #fff);
}

.account-owner-history-heading h2 {
    margin: 0;
    font-size: 20px;
}

.account-owner-history-heading p {
    margin: 5px 0 0;
    font-size: 12px;
    opacity: .65;
}

.account-owner-history-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.account-owner-history-item {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        190px;

    gap: 20px;
    align-items: center;

    padding: 15px 16px;

    border: 1px solid rgba(120,140,145,.18);
    border-radius: 12px;

    background: rgba(120,140,145,.04);
}

.account-owner-history-item.is-current {
    border-color: rgba(29,164,111,.30);
    background: rgba(29,164,111,.07);
}

.account-owner-history-name {
    font-size: 16px;
    font-weight: 800;
}

.account-owner-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;

    margin-top: 6px;

    font-size: 12px;
    opacity: .78;
}

.account-owner-history-address {
    margin-top: 6px;
    font-size: 13px;
    opacity: .72;
}

.account-owner-history-period {
    display: grid;
    gap: 5px;

    font-size: 12px;
}

.account-owner-history-period div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.account-owner-history-period span {
    opacity: .62;
}

.account-owner-history-period small {
    margin-top: 4px;
    opacity: .55;
}

.account-owner-history-empty {
    margin-top: 14px;
    padding: 14px;

    border: 1px dashed rgba(120,140,145,.25);
    border-radius: 10px;

    opacity: .65;
}

[data-theme="dark"] .account-owner-history {
    background: #102124;
    border-color: rgba(79,151,157,.25);
}

[data-theme="dark"]
.account-owner-history-item {
    background: rgba(255,255,255,.025);
    border-color: rgba(125,155,160,.18);
}

[data-theme="dark"]
.account-owner-history-item.is-current {
    background: rgba(32,150,105,.12);
    border-color: rgba(61,198,148,.30);
}

@media (max-width: 700px) {
    .account-owner-history-item {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   END ACCOUNT OWNER HISTORY
   ===================================================== */


/* =====================================================
   OWNER CHANGE DATE PICKER
   ===================================================== */

.account-owner-date-field {
    max-width: 360px;
}

.account-date-picker-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.account-date-picker-wrap
input[type="date"] {
    width: 100%;

    min-height: 46px;

    padding:
        9px
        52px
        9px
        12px;

    cursor: pointer;
}

.account-date-picker-button {
    position: absolute;

    right: 5px;
    top: 50%;

    transform: translateY(-50%);

    width: 38px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background:
        rgba(8,127,134,.10);

    cursor: pointer;

    font-size: 17px;

    transition:
        background .15s ease,
        transform .15s ease;
}

.account-date-picker-button:hover {
    background:
        rgba(8,127,134,.18);

    transform:
        translateY(-50%)
        scale(1.03);
}

/* Скрываем встроенную иконку Chrome,
   потому что используем свою справа */

.account-date-picker-wrap
input[type="date"]
::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 45px;
    height: 100%;
    cursor: pointer;
}

[data-theme="dark"]
.account-date-picker-button {
    background:
        rgba(52,177,185,.15);

    color: #dff7f8;
}

[data-theme="dark"]
.account-date-picker-button:hover {
    background:
        rgba(52,177,185,.25);
}

/* =====================================================
   END OWNER CHANGE DATE PICKER
   ===================================================== */


/* =====================================================
   REVIEW — ADDITIONAL DOCUMENT
   ===================================================== */

.additional-document-box {
    margin: 16px 0 12px;
    padding: 14px;

    border: 1px solid rgba(8,127,134,.20);
    border-radius: 11px;

    background: rgba(8,127,134,.055);
}

.additional-document-box label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;
    font-weight: 700;
}

.additional-document-box select {
    width: 100%;
    min-height: 42px;

    padding: 8px 10px;

    border: 1px solid rgba(100,130,135,.35);
    border-radius: 9px;

    background: #fff;
    color: #17363b;
}

.additional-document-button {
    border-color: rgba(8,127,134,.35) !important;
}

[data-theme="dark"]
.additional-document-box {
    background: rgba(30,150,158,.08);
    border-color: rgba(60,175,182,.25);
}

[data-theme="dark"]
.additional-document-box select {
    background: #102124;
    color: #edf7f7;
    border-color: rgba(120,160,165,.35);
}

/* =====================================================
   END REVIEW — ADDITIONAL DOCUMENT
   ===================================================== */


/* ==================================================
   SPEEDOMETER — EDGES / SIDE SPACING FIX
   Чтобы края таблицы были видны лучше
   ================================================== */

@media (min-width: 1200px) {
  .content,
  .main-content,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Блок журнала — немного воздуха по бокам */
.speedometer-page,
.speedometer-dashboard,
.speedometer-layout,
.speedometer-section,
.speedometer-card,
.speedometer-table-section {
  box-sizing: border-box;
}

/* Обёртка таблицы */
.speedometer-table-wrapper,
.speedometer-grid-wrapper,
.speedometer-month-table-wrapper,
.speedometer-table-scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-bottom: 8px !important;
  box-sizing: border-box;
  scrollbar-gutter: stable both-edges;
}

/* Сама таблица — чуть отступить от краёв */
.speedometer-table,
.speedometer-grid,
table.speedometer-table,
table.speedometer-month-table {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Если используется общая карточка-контейнер */
.speedometer-table-wrapper > table,
.speedometer-grid-wrapper > table,
.speedometer-table-scroll > table {
  margin: 0 auto !important;
}

/* Верхняя панель и навигация месяца */
.speedometer-toolbar,
.speedometer-header,
.speedometer-month-nav {
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box;
}

/* На очень широких экранах не растягивать впритык */
@media (min-width: 1600px) {
  .speedometer-page,
  .speedometer-dashboard,
  .speedometer-layout {
    padding-right: 10px !important;
  }
}

/* ==================================================
   SPEEDOMETER — TABLE GRID VISIBILITY FIX
   Сетка таблицы более заметная
   ================================================== */

/* Общая таблица */
.speedometer-table,
.speedometer-month-table,
table.speedometer-table,
table.speedometer-month-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  border: 1px solid rgba(21, 101, 109, 0.55) !important;
  border-radius: 12px;
  overflow: hidden;
  background: #0a171b;
}

/* Ячейки */
.speedometer-table th,
.speedometer-table td,
.speedometer-month-table th,
.speedometer-month-table td,
table.speedometer-table th,
table.speedometer-table td,
table.speedometer-month-table th,
table.speedometer-month-table td {
  border-right: 1px solid rgba(39, 121, 128, 0.42) !important;
  border-bottom: 1px solid rgba(39, 121, 128, 0.34) !important;
}

/* Последняя колонка без двойной правой линии */
.speedometer-table tr > *:last-child,
.speedometer-month-table tr > *:last-child,
table.speedometer-table tr > *:last-child,
table.speedometer-month-table tr > *:last-child {
  border-right: 0 !important;
}

/* Последняя строка без двойной нижней линии */
.speedometer-table tbody tr:last-child > * ,
.speedometer-month-table tbody tr:last-child > *,
table.speedometer-table tbody tr:last-child > *,
table.speedometer-month-table tbody tr:last-child > * {
  border-bottom: 0 !important;
}

/* Шапка таблицы */
.speedometer-table thead th,
.speedometer-month-table thead th,
table.speedometer-table thead th,
table.speedometer-month-table thead th {
  background: #10262b !important;
  color: #eaf7f8 !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(61, 154, 161, 0.65) !important;
}

/* Первый и второй столбец — авто / водитель */
.speedometer-table th:nth-child(1),
.speedometer-table td:nth-child(1),
.speedometer-table th:nth-child(2),
.speedometer-table td:nth-child(2),
.speedometer-table th:nth-child(3),
.speedometer-table td:nth-child(3),
.speedometer-month-table th:nth-child(1),
.speedometer-month-table td:nth-child(1),
.speedometer-month-table th:nth-child(2),
.speedometer-month-table td:nth-child(2),
.speedometer-month-table th:nth-child(3),
.speedometer-month-table td:nth-child(3),
table.speedometer-table th:nth-child(1),
table.speedometer-table td:nth-child(1),
table.speedometer-table th:nth-child(2),
table.speedometer-table td:nth-child(2),
table.speedometer-table th:nth-child(3),
table.speedometer-table td:nth-child(3),
table.speedometer-month-table th:nth-child(1),
table.speedometer-month-table td:nth-child(1),
table.speedometer-month-table th:nth-child(2),
table.speedometer-month-table td:nth-child(2),
table.speedometer-month-table th:nth-child(3),
table.speedometer-month-table td:nth-child(3) {
  background: #0f2025 !important;
}

/* Усиленный разделитель после блока "Водитель" */
.speedometer-table th:nth-child(3),
.speedometer-table td:nth-child(3),
.speedometer-month-table th:nth-child(3),
.speedometer-month-table td:nth-child(3),
table.speedometer-table th:nth-child(3),
table.speedometer-table td:nth-child(3),
table.speedometer-month-table th:nth-child(3),
table.speedometer-month-table td:nth-child(3) {
  border-right: 2px solid rgba(74, 181, 189, 0.72) !important;
}

/* Разделитель перед колонкой "Пробег" */
.speedometer-table th:last-child,
.speedometer-table td:last-child,
.speedometer-month-table th:last-child,
.speedometer-month-table td:last-child,
table.speedometer-table th:last-child,
table.speedometer-table td:last-child,
table.speedometer-month-table th:last-child,
table.speedometer-month-table td:last-child {
  border-left: 2px solid rgba(74, 181, 189, 0.72) !important;
  background: #0d1d22 !important;
  font-weight: 700;
}

/* Наведение на строку */
.speedometer-table tbody tr:hover td,
.speedometer-month-table tbody tr:hover td,
table.speedometer-table tbody tr:hover td,
table.speedometer-month-table tbody tr:hover td {
  background: rgba(28, 81, 88, 0.22) !important;
}

/* Более заметные клетки дней */
.speedometer-table tbody td,
.speedometer-month-table tbody td,
table.speedometer-table tbody td,
table.speedometer-month-table tbody td {
  box-shadow: inset 0 0 0 1px rgba(10, 34, 38, 0.08);
}

/* Если в шаблоне есть классы выходных — делаем мягкую подсветку */
.weekend,
.is-weekend,
.weekend-col {
  background: rgba(181, 121, 121, 0.10) !important;
}

/* Если есть сегодняшний день */
.today,
.is-today,
.today-col {
  background: rgba(58, 192, 200, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(58, 192, 200, 0.45) !important;
}

/* Обертка таблицы */
.speedometer-table-wrapper,
.speedometer-grid-wrapper,
.speedometer-table-scroll,
.speedometer-month-table-wrapper {
  border: 1px solid rgba(21, 101, 109, 0.38) !important;
  border-radius: 14px;
  overflow: auto;
  background: #081417;
  padding: 0;
}


/* ============================================================
   ZHYLOISU PORTAL — STAGE 15A
   CORPORATE OFFICE SHELL
   ============================================================ */

:root {
    --bg: #f5f7f9;
    --card: #ffffff;
    --text: #1d2b31;
    --muted: #6c7f87;
    --line: #dde5e8;

    --primary: #0d8b93;
    --primary2: #16a3ab;

    --sidebar: #0b3f46;
    --sidebar2: #0d4d55;

    --danger: #c23b34;
    --warning: #c88b18;
    --success: #238b63;

    --shadow:
        0 8px 24px rgba(32, 61, 69, 0.07);

    --shadow-soft:
        0 3px 12px rgba(32, 61, 69, 0.05);

    --radius: 14px;
    --radius-sm: 10px;
}

[data-theme="dark"] {
    --bg: #10181b;
    --card: #182326;
    --text: #edf5f6;
    --muted: #9fb1b5;
    --line: #304147;

    --primary: #31bec3;
    --primary2: #45d0d3;

    --sidebar: #0a2024;
    --sidebar2: #0d2a2f;

    --shadow: none;
    --shadow-soft: none;
}

html,
body {
    min-height: 100%;
}

body {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--bg) 94%,
                #ffffff
            ),
            var(--bg)
        );
    color: var(--text);
    font-family:
        "Ubuntu",
        "Segoe UI",
        Arial,
        sans-serif;
    font-size: 14px;
}

/* ------------------------------------------------------------
   TOP SYSTEM BAR
   ------------------------------------------------------------ */

.system-topbar {
    height: 36px;
    background:
        linear-gradient(
            90deg,
            #086f77,
            #0d858c
        );
    color: #ffffff;
    border-bottom:
        1px solid rgba(255,255,255,.12);
}

.system-topbar-inner {
    max-width: none;
    padding: 0 22px;
    font-size: 12px;
    letter-spacing: .01em;
}

.system-status-dot {
    width: 8px;
    height: 8px;
    background: #6ee7ae;
    box-shadow:
        0 0 0 3px rgba(110,231,174,.15);
}

/* ------------------------------------------------------------
   APP SHELL
   ------------------------------------------------------------ */

.app-shell {
    min-height:
        calc(100vh - 36px);
}

.main-area {
    background: var(--bg);
}

/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------ */

.sidebar {
    width: 258px;
    padding: 18px 14px 16px;

    background:
        linear-gradient(
            180deg,
            var(--sidebar),
            var(--sidebar2)
        );

    border-right:
        1px solid rgba(255,255,255,.06);

    box-shadow:
        12px 0 30px rgba(20,50,55,.06);
}

.brand {
    min-height: 74px;
    margin-bottom: 10px;
    padding: 4px 7px 18px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}

.brand-logo-wrap {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;

    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(0,0,0,.16) !important;

    padding: 4px !important;
}

.brand-logo-wrap img {
    width: 50px !important;
    height: 50px !important;

    object-fit: contain !important;
    transform: none !important;
}

.brand-text {
    gap: 4px;
}

.brand-text strong {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
}

.brand-text small {
    font-size: 11px;
    color:
        rgba(223,244,244,.68);
}

/* ------------------------------------------------------------
   SIDEBAR NAVIGATION
   ------------------------------------------------------------ */

.sidebar nav {
    display: grid;
    gap: 4px;
    margin-top: 5px;
}

.sidebar nav a {
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 9px 12px;

    border-radius: 10px;

    color: rgba(232,248,249,.88);

    font-size: 13px;
    font-weight: 500;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.sidebar nav a:hover {
    background:
        rgba(255,255,255,.09);

    color: #ffffff;
}

.sidebar nav a.active {
    background:
        linear-gradient(
            90deg,
            rgba(49,190,195,.24),
            rgba(49,190,195,.12)
        );

    color: #ffffff;

    box-shadow:
        inset 3px 0 0
        #52d4d8;
}

/* ------------------------------------------------------------
   SIDEBAR SERVICE CARDS
   ------------------------------------------------------------ */

.sidebar-footer {
    gap: 9px;
    padding-top: 14px;
}

.side-card {
    padding: 12px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 12px;

    background:
        rgba(255,255,255,.045);

    box-shadow: none;
}

.side-card strong {
    color: #ffffff;
}

.side-card small {
    font-size: 11px;
}

.disk-main strong {
    font-size: 20px;
}

.disk-grid > div {
    padding: 6px;
    border-radius: 8px;
}

.support-card a {
    color: #95e9ec;
}

/* ------------------------------------------------------------
   MAIN HEADER
   ------------------------------------------------------------ */

.main-header {
    height: 66px;

    padding:
        0 26px;

    background:
        color-mix(
            in srgb,
            var(--card) 96%,
            transparent
        );

    backdrop-filter:
        blur(10px);

    border-bottom:
        1px solid var(--line);

    box-shadow:
        0 3px 12px
        rgba(31,55,61,.04);
}

.header-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

.header-actions {
    gap: 12px;
}

.header-actions > span {
    font-size: 13px;
    color: var(--muted);
}

.icon-button {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
}

.icon-button:hover {
    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            transparent
        );
}

.link-button {
    min-height: 34px;

    padding:
        6px 11px;

    border-radius: 9px;

    color: var(--text);

    font-weight: 500;
}

.link-button:hover {
    background:
        color-mix(
            in srgb,
            var(--danger) 8%,
            transparent
        );

    color: var(--danger);
}

/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.content {
    max-width: 1580px;

    padding:
        26px 30px 40px;

    margin:
        0 auto;
}

/* ------------------------------------------------------------
   PAGE HEADINGS
   ------------------------------------------------------------ */

.page-heading {
    margin-bottom: 22px;
    align-items: flex-end;
}

.page-heading h1 {
    margin:
        0 0 6px;

    font-size: 26px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.02em;
}

.page-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.primary,
.secondary-button,
.danger-button,
.filter-bar button {
    min-height: 40px;

    padding:
        8px 14px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 600;

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background .12s ease;
}

.primary,
.filter-bar button {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );

    color: #ffffff;

    box-shadow:
        0 5px 14px
        rgba(13,139,147,.18);
}

.primary:hover,
.filter-bar button:hover {
    transform:
        translateY(-1px);
}

.secondary-button {
    background: var(--card);

    border-color: var(--line);

    color: var(--text);

    box-shadow: var(--shadow-soft);
}

.secondary-button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 36%,
            var(--line)
        );

    color: var(--primary);
}

.danger-button {
    background:
        color-mix(
            in srgb,
            var(--danger) 10%,
            var(--card)
        );

    border-color:
        color-mix(
            in srgb,
            var(--danger) 28%,
            var(--line)
        );

    color: var(--danger);
}

/* ------------------------------------------------------------
   CARDS AND PANELS
   ------------------------------------------------------------ */

.stat-card,
.panel,
.summary-card {
    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:
        var(--card);

    box-shadow:
        var(--shadow-soft);
}

.stat-card {
    padding: 18px;

    transition:
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.stat-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 25%,
            var(--line)
        );

    transform:
        translateY(-1px);

    box-shadow:
        var(--shadow);
}

.stat-card span,
.summary-card span {
    font-size: 12px;
    color: var(--muted);
}

.stat-card strong {
    margin-top: 7px;

    font-size: 30px;
    line-height: 1;

    font-weight: 700;
}

.panel {
    padding: 18px;
}

.panel h2 {
    margin:
        0 0 15px;

    font-size: 18px;

    font-weight: 700;
}

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

input,
select,
textarea {
    color: var(--text);
}

.filter-bar input,
.filter-bar select,
.review-form input,
.review-form select,
input[type=file],
textarea {
    min-height: 41px;

    padding:
        8px 11px;

    border:
        1px solid var(--line);

    border-radius: 9px;

    background: var(--card);

    color: var(--text);

    outline: none;
}

textarea {
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 68%,
            var(--line)
        );

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--primary) 11%,
            transparent
        );
}

/* ------------------------------------------------------------
   TABLES
   ------------------------------------------------------------ */

.table-wrapper {
    overflow: auto;

    border:
        1px solid var(--line);

    border-radius: 12px;

    background:
        var(--card);

    box-shadow:
        var(--shadow-soft);
}

.compact-table {
    width: 100%;
    border-collapse: collapse;

    font-size: 13px;
}

.compact-table th,
.compact-table td {
    padding:
        11px 13px;

    border-bottom:
        1px solid var(--line);

    vertical-align: middle;
}

.compact-table th {
    background:
        color-mix(
            in srgb,
            var(--bg) 72%,
            var(--card)
        );

    color:
        var(--muted);

    font-size: 11px;
    font-weight: 700;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}

.compact-table tbody tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--card)
        );
}

/* ------------------------------------------------------------
   STATUS BADGES
   ------------------------------------------------------------ */

.status-badge {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding:
        4px 8px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        600;
}

.status-accepted,
.status-auto {
    background:
        #e5f7ef;

    color:
        #1f7957;
}

.status-review,
.status-new {
    background:
        #fff5da;

    color:
        #936512;
}

.status-error,
.status-rejected {
    background:
        #fde8e5;

    color:
        #ae332d;
}

[data-theme="dark"]
.status-accepted,
[data-theme="dark"]
.status-auto {
    background:
        rgba(35,139,99,.18);

    color:
        #8de5c3;
}

[data-theme="dark"]
.status-review,
[data-theme="dark"]
.status-new {
    background:
        rgba(200,139,24,.18);

    color:
        #f0c76d;
}

[data-theme="dark"]
.status-error,
[data-theme="dark"]
.status-rejected {
    background:
        rgba(194,59,52,.18);

    color:
        #f2a09a;
}

/* ------------------------------------------------------------
   MESSAGES
   ------------------------------------------------------------ */

.message {
    padding:
        11px 14px;

    margin-bottom:
        14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 16%,
            var(--line)
        );

    border-radius:
        10px;

    background:
        color-mix(
            in srgb,
            var(--primary) 6%,
            var(--card)
        );

    color:
        var(--text);

    box-shadow:
        var(--shadow-soft);
}

.message.success {
    background:
        color-mix(
            in srgb,
            var(--success) 8%,
            var(--card)
        );
}

.message.warning {
    background:
        color-mix(
            in srgb,
            var(--warning) 9%,
            var(--card)
        );
}

.message.error {
    background:
        color-mix(
            in srgb,
            var(--danger) 8%,
            var(--card)
        );

    color:
        var(--danger);
}

/* ------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------ */

.pagination a,
.pagination span {
    min-width:
        34px;

    min-height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        6px 10px;

    border:
        1px solid
        var(--line);

    border-radius:
        9px;

    background:
        var(--card);

    color:
        var(--text);
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 1050px) {

    .sidebar {
        width: 258px;
        left: -270px;

        box-shadow:
            20px 0 40px
            rgba(0,0,0,.20);
    }

    .sidebar.open {
        left: 0;
    }

    .content {
        padding:
            22px 20px 34px;
    }

    .main-header {
        padding:
            0 18px;
    }
}

@media (max-width: 650px) {

    .system-topbar {
        height: 32px;
    }

    .content {
        padding:
            16px 12px 28px;
    }

    .main-header {
        height: 60px;

        padding:
            0 12px;
    }

    .header-title {
        font-size:
            13px;
    }

    .page-heading h1 {
        font-size:
            22px;
    }

    .panel,
    .stat-card {
        border-radius:
            11px;
    }

    .compact-table th,
    .compact-table td {
        padding:
            9px 10px;
    }
}

/* ============================================================
   END STAGE 15A
   ============================================================ */



/* ============================================================
   STAGE 15B — OFFICE DASHBOARD
   ============================================================ */

.office-dashboard {
    display: grid;
    gap: 20px;
}

.office-dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.office-kicker {
    margin-bottom: 6px;

    color: var(--primary);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .06em;
}

.office-dashboard-head h1 {
    margin: 0 0 7px;

    color: var(--text);

    font-size: 29px;

    line-height: 1.15;
}

.office-dashboard-head p {
    margin: 0;

    color: var(--muted);
}

.office-dashboard-actions {
    display: flex;
    gap: 9px;

    flex-wrap: wrap;
}


/* KPI */

.office-kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.office-kpi-card {
    min-height: 116px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    color: var(--text);

    box-shadow: var(--shadow-soft);

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.office-kpi-card:hover {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 30%,
            var(--line)
        );

    box-shadow: var(--shadow);
}

.office-kpi-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        color-mix(
            in srgb,
            var(--primary) 11%,
            var(--card)
        );

    color: var(--primary);

    font-size: 22px;

    font-weight: 800;
}

.office-kpi-card span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 12px;
}

.office-kpi-card strong {
    display: block;

    color: var(--text);

    font-size: 28px;

    line-height: 1;

    font-weight: 700;
}

.office-kpi-card small {
    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 11px;
}

.office-kpi-warning .office-kpi-icon {
    background: #fff5dc;

    color: #b47a0d;
}

.office-kpi-danger .office-kpi-icon {
    background: #fdebea;

    color: #c54740;
}

[data-theme="dark"]
.office-kpi-warning
.office-kpi-icon {
    background: rgba(180,122,13,.17);

    color: #f2c76b;
}

[data-theme="dark"]
.office-kpi-danger
.office-kpi-icon {
    background: rgba(197,71,64,.17);

    color: #efa19c;
}


/* WELCOME */

.office-welcome-card {
    min-height: 150px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(340px, .8fr);

    gap: 20px;

    padding: 24px;

    border: 1px solid var(--line);

    border-radius: 16px;

    background:
        linear-gradient(
            110deg,
            var(--card) 0%,
            color-mix(
                in srgb,
                var(--primary) 5%,
                var(--card)
            ) 100%
        );

    box-shadow: var(--shadow-soft);
}

.office-welcome-content {
    max-width: 720px;
}

.office-welcome-label {
    color: var(--primary);

    font-size: 12px;

    font-weight: 700;
}

.office-welcome-content h2 {
    margin: 8px 0;

    font-size: 23px;
}

.office-welcome-content p {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    line-height: 1.55;
}

.office-welcome-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;
}

.office-welcome-stats {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}

.office-welcome-stats > div {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 16px;

    border: 1px solid var(--line);

    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--card) 90%,
            transparent
        );
}

.office-welcome-stats span,
.office-welcome-stats small {
    color: var(--muted);

    font-size: 11px;
}

.office-welcome-stats strong {
    margin: 7px 0;

    font-size: 25px;

    color: var(--text);
}


/* LAYOUT */

.office-dashboard-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: 18px;
}

.office-dashboard-main {
    display: grid;

    gap: 18px;
}

.office-panel {
    overflow: hidden;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow-soft);
}

.office-panel-head {
    min-height: 66px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding: 14px 17px;

    border-bottom: 1px solid var(--line);
}

.office-panel-head > div {
    display: flex;

    align-items: center;

    gap: 11px;
}

.office-panel-head h2 {
    margin: 0 0 3px;

    font-size: 16px;
}

.office-panel-head p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}

.office-panel-head > a {
    white-space: nowrap;

    font-size: 12px;

    font-weight: 600;
}

.office-panel-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--card)
        );

    color: var(--primary);

    font-weight: 800;
}


/* TABLE */

.office-table-wrap {
    overflow: auto;
}

.office-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

.office-table th,
.office-table td {
    padding: 11px 13px;

    border-bottom: 1px solid var(--line);

    text-align: left;

    vertical-align: middle;
}

.office-table th {
    color: var(--muted);

    background:
        color-mix(
            in srgb,
            var(--bg) 70%,
            var(--card)
        );

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;
}

.office-table tbody tr:last-child td {
    border-bottom: 0;
}

.office-table tbody tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 3.5%,
            var(--card)
        );
}

.office-file-link {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text);

    font-weight: 500;
}

.office-file-icon {
    min-width: 29px;

    padding: 4px 5px;

    border-radius: 6px;

    background: #f05d57;

    color: #fff;

    font-size: 8px;

    font-weight: 800;

    text-align: center;
}

.office-view-button {
    display: inline-flex;

    padding: 5px 8px;

    border: 1px solid var(--line);

    border-radius: 7px;

    background: var(--card);

    color: var(--text);

    font-size: 11px;
}


/* SIDEBAR */

.office-dashboard-side {
    display: grid;

    gap: 14px;

    align-content: start;
}

.office-side-card {
    display: block;

    padding: 17px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    color: var(--text);

    box-shadow: var(--shadow-soft);
}

.office-side-card h3 {
    margin: 0 0 13px;

    font-size: 15px;
}

.office-side-card p {
    margin: 10px 0 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.5;
}

.office-side-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 11px;
}

.office-side-title span {
    color: var(--muted);

    font-size: 12px;
}

.office-side-title strong {
    font-size: 18px;
}

.office-progress {
    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--text) 9%,
            var(--card)
        );
}

.office-progress > span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary2)
        );
}


/* DEBT */

.office-debt-card {
    border-color:
        color-mix(
            in srgb,
            #d05a51 30%,
            var(--line)
        );
}

.office-debt-card:hover {
    border-color: #d05a51;
}

.office-side-label {
    display: block;

    color: var(--muted);

    font-size: 11px;
}

.office-debt-count {
    display: block;

    margin: 7px 0 3px;

    font-size: 30px;

    line-height: 1;
}

.office-debt-card > span {
    color: var(--muted);

    font-size: 11px;
}

.office-debt-card b {
    display: block;

    margin-top: 12px;

    color: var(--text);

    font-size: 16px;
}


/* QUICK ACTIONS */

.office-quick-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}

.office-quick-actions a {
    min-height: 74px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 6px;

    padding: 11px;

    border: 1px solid var(--line);

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--bg) 55%,
            var(--card)
        );

    color: var(--text);
}

.office-quick-actions a:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 35%,
            var(--line)
        );
}

.office-quick-actions strong {
    color: var(--primary);

    font-size: 18px;
}

.office-quick-actions span {
    font-size: 11px;

    line-height: 1.25;
}


/* VISION */

.office-vision-number {
    margin-top: 4px;

    color: var(--text);

    font-size: 30px;

    line-height: 1;

    font-weight: 700;
}

.office-side-card small {
    color: var(--muted);
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .office-kpi-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .office-dashboard-layout {
        grid-template-columns:
            1fr;
    }

    .office-dashboard-side {
        grid-template-columns:
            repeat(3, 1fr);
    }

}

@media (max-width: 850px) {

    .office-dashboard-head {
        align-items: stretch;

        flex-direction: column;
    }

    .office-welcome-card {
        grid-template-columns:
            1fr;
    }

    .office-dashboard-side {
        grid-template-columns:
            1fr;
    }

}

@media (max-width: 600px) {

    .office-kpi-grid {
        grid-template-columns:
            1fr;
    }

    .office-welcome-stats {
        grid-template-columns:
            1fr;
    }

    .office-dashboard-head h1 {
        font-size: 24px;
    }

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

}


/* ============================================================
   END STAGE 15B
   ============================================================ */



/* ============================================================
   STAGE 15C
   POPULATION + ACCOUNT CARD + DOCUMENT ARCHIVE
   ============================================================ */


/* ------------------------------------------------------------
   COMMON ARCHIVE PAGE HEADINGS
   ------------------------------------------------------------ */

.account-profile-page,
.population-page {
    color: var(--text);
}

.account-profile-header,
.population-header {
    margin-bottom: 20px;
}

.account-profile-header h1,
.population-header h1 {
    margin: 5px 0 7px;

    color: var(--text);

    font-size: 27px;
    line-height: 1.2;

    letter-spacing: -.02em;
}

.account-profile-subtitle {
    color: var(--muted);

    font-size: 13px;
}

.account-back-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 5px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 600;
}


/* ------------------------------------------------------------
   POPULATION — FILTERS
   ------------------------------------------------------------ */

.population-filters,
.population-filters-updated {
    margin-bottom: 16px;

    padding: 14px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow-soft);
}

.population-filters input,
.population-filters select,
.population-filters-updated input,
.population-filters-updated select {
    min-height: 40px;

    border: 1px solid var(--line);

    border-radius: 9px;

    background: var(--bg);

    color: var(--text);
}

.population-filters input:focus,
.population-filters select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--primary) 11%,
            transparent
        );
}

.population-balance-filter {
    border-color: var(--line) !important;

    background: var(--bg) !important;

    color: var(--text) !important;

    border-radius: 9px !important;
}


/* ------------------------------------------------------------
   POPULATION — TABLE
   ------------------------------------------------------------ */

.population-table-wrapper {
    overflow: auto;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow-soft);
}

.population-table {
    width: 100%;

    border-collapse: collapse;

    background: var(--card);

    color: var(--text);

    font-size: 12px;
}

.population-table th {
    padding: 11px 12px;

    background:
        color-mix(
            in srgb,
            var(--bg) 72%,
            var(--card)
        );

    border-bottom: 1px solid var(--line);

    color: var(--muted);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .045em;

    white-space: nowrap;
}

.population-table td {
    padding: 11px 12px;

    border-bottom: 1px solid var(--line);

    color: var(--text);

    vertical-align: middle;
}

.population-table tbody tr:last-child td {
    border-bottom: 0;
}

.population-table tbody tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--card)
        );
}

.population-table a {
    font-weight: 600;
}

.population-edit-button {
    min-height: 30px !important;

    padding: 5px 9px !important;

    border: 1px solid var(--line) !important;

    border-radius: 8px !important;

    background: var(--card) !important;

    color: var(--text) !important;

    font-size: 11px !important;
}


/* ------------------------------------------------------------
   POPULATION — PAGINATION
   ------------------------------------------------------------ */

.population-pagination {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 16px;
}

.population-pagination a,
.population-pagination span {
    min-width: 34px;
    min-height: 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    border: 1px solid var(--line);

    border-radius: 8px;

    background: var(--card);

    color: var(--text);

    font-size: 12px;
}


/* ------------------------------------------------------------
   ACCOUNT PROFILE — HEADER ACTIONS
   ------------------------------------------------------------ */

.account-profile-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;
}

.account-header-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    flex-wrap: wrap;
}

.account-header-actions a,
.account-header-actions button {
    border-radius: 9px;
}


/* ------------------------------------------------------------
   ACCOUNT PROFILE — ALL MAJOR CARDS
   ------------------------------------------------------------ */

.account-profile-page .panel,
.account-profile-page .card,
.account-profile-page [class*="account-"][class*="card"],
.account-profile-page [class*="account-"][class*="panel"] {
    border-color: var(--line);

    background: var(--card);

    box-shadow: var(--shadow-soft);
}


/* ------------------------------------------------------------
   ACCOUNT SUMMARY / MAIN INFO
   ------------------------------------------------------------ */

.account-profile-page h2,
.account-profile-page h3 {
    color: var(--text);
}

.account-profile-page label,
.account-profile-page small {
    color: var(--muted);
}

.account-profile-page strong {
    color: var(--text);
}

.account-profile-page input,
.account-profile-page select,
.account-profile-page textarea {
    border: 1px solid var(--line);

    border-radius: 9px;

    background: var(--bg);

    color: var(--text);
}


/* ------------------------------------------------------------
   ACCOUNT BALANCE
   ------------------------------------------------------------ */

.account-balance-card,
.account-balance-panel,
.balance-card {
    border: 1px solid
        color-mix(
            in srgb,
            var(--primary) 18%,
            var(--line)
        ) !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--success) 8%,
                var(--card)
            ),
            var(--card)
        ) !important;

    box-shadow: var(--shadow-soft) !important;
}


/* ------------------------------------------------------------
   ACCOUNT DOCUMENTS
   ------------------------------------------------------------ */

.account-profile-page table {
    border-collapse: collapse;
}

.account-profile-page table th {
    color: var(--muted);
}

.account-profile-page table td,
.account-profile-page table th {
    border-color: var(--line);
}

.additional-document-button,
.document-share-button {
    border-radius: 9px !important;
}


/* ------------------------------------------------------------
   OWNER HISTORY
   ------------------------------------------------------------ */

.account-owner-history {
    border: 1px solid var(--line) !important;

    border-radius: 14px !important;

    background: var(--card) !important;

    box-shadow: var(--shadow-soft);
}

.account-owner-history-item {
    border-color: var(--line) !important;

    background:
        color-mix(
            in srgb,
            var(--bg) 55%,
            var(--card)
        ) !important;
}

.account-owner-history-item.is-current {
    background:
        color-mix(
            in srgb,
            var(--success) 7%,
            var(--card)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--success) 28%,
            var(--line)
        ) !important;
}


/* ------------------------------------------------------------
   SELECTED ACCOUNT / QR / EMAIL
   ------------------------------------------------------------ */

.selected-account-card {
    border: 1px solid var(--line) !important;

    border-radius: 14px !important;

    background: var(--card) !important;

    color: var(--text) !important;

    box-shadow: var(--shadow-soft);
}


/* ------------------------------------------------------------
   CONTRACT / DOCUMENT LIST
   Existing page mostly uses common table classes.
   ------------------------------------------------------------ */

.table-wrapper {
    border-radius: 14px;

    box-shadow: var(--shadow-soft);
}

.compact-table {
    font-size: 12px;
}

.compact-table th {
    font-size: 10px;
    letter-spacing: .045em;
}

.compact-table td {
    color: var(--text);
}

.compact-table td a {
    font-weight: 600;
}


/* ------------------------------------------------------------
   DOCUMENT STATUS PILLS
   ------------------------------------------------------------ */

.status-badge {
    min-height: 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;
}


/* ------------------------------------------------------------
   DARK MODE CLEANUP
   ------------------------------------------------------------ */

[data-theme="dark"]
.population-table-wrapper,
[data-theme="dark"]
.population-filters,
[data-theme="dark"]
.population-filters-updated,
[data-theme="dark"]
.account-owner-history,
[data-theme="dark"]
.selected-account-card {
    background: var(--card) !important;

    border-color: var(--line) !important;
}

[data-theme="dark"]
.population-table {
    background: var(--card);
}

[data-theme="dark"]
.population-table th {
    background:
        color-mix(
            in srgb,
            var(--bg) 72%,
            var(--card)
        );
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .account-profile-header {
        align-items: stretch;

        flex-direction: column;
    }

    .account-header-actions {
        justify-content: flex-start;
    }

}

@media (max-width: 650px) {

    .account-profile-header h1 {
        font-size: 22px;
    }

    .population-filters,
    .population-filters-updated {
        padding: 11px;
    }

    .population-table {
        font-size: 11px;
    }

    .population-table th,
    .population-table td {
        padding: 9px;
    }

}


/* ============================================================
   END STAGE 15C
   ============================================================ */



/* ============================================================
   STAGE 15D
   ARCHIVE OFFICE UI — DETAIL / REVIEW / FORMS
   ============================================================ */


/* ============================================================
   ACCOUNT PROFILE
   ============================================================ */

.account-profile-page {
    display: grid;
    gap: 16px;
}


/* Header */

.account-profile-header {
    position: relative;

    padding: 18px 20px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow-soft);
}

.account-profile-header::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;
    bottom: 16px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--primary2)
        );
}

.account-profile-header h1 {
    font-size: 25px;
    font-weight: 700;

    margin-top: 4px;
}

.account-profile-subtitle {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 3px;

    padding: 5px 9px;

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            var(--card)
        );
}

.account-profile-subtitle strong {
    font-size: 15px;
}


/* Header buttons */

.account-header-actions {
    gap: 7px;
}

.account-header-actions .primary,
.account-header-actions .secondary-button,
.account-header-actions .danger-button,
.account-header-actions button,
.account-header-actions a {
    min-height: 36px;

    font-size: 12px;
}


/* ============================================================
   ACCOUNT CONTENT CARDS
   ============================================================ */

.account-profile-page section,
.account-profile-page .panel,
.account-profile-page .selected-account-card,
.account-profile-page .account-owner-history {
    border-radius: 14px;
}

.account-profile-page .panel {
    padding: 18px;
}

.account-profile-page h2 {
    margin-top: 0;

    font-size: 17px;

    letter-spacing: -.01em;
}

.account-profile-page h3 {
    font-size: 14px;
}


/* Generic internal information rows */

.account-profile-page dl,
.account-profile-page .info-grid {
    margin: 0;
}

.account-profile-page dt {
    color: var(--muted);

    font-size: 11px;
}

.account-profile-page dd {
    color: var(--text);

    font-weight: 600;
}


/* ============================================================
   SELECTED ACCOUNT / IDENTITY CARD
   ============================================================ */

.selected-account-card {
    padding: 18px !important;

    border: 1px solid var(--line) !important;

    background:
        linear-gradient(
            135deg,
            var(--card),
            color-mix(
                in srgb,
                var(--primary) 3%,
                var(--card)
            )
        ) !important;
}

.selected-account-card strong {
    color: var(--text);
}


/* ============================================================
   QR / IMAGE / PREVIEW ELEMENTS
   ============================================================ */

.account-profile-page img {
    max-width: 100%;
}

.account-profile-page iframe {
    border: 1px solid var(--line);

    border-radius: 10px;

    background: #ffffff;
}


/* ============================================================
   BALANCE VISUAL
   ============================================================ */

.account-profile-page
[class*="balance"] {
    border-radius: 12px;
}

.account-profile-page
[class*="balance"]
strong {
    letter-spacing: -.02em;
}


/* ============================================================
   DOCUMENTS TABLE
   ============================================================ */

.account-profile-page table {
    width: 100%;

    background: var(--card);

    color: var(--text);
}

.account-profile-page table th {
    padding: 10px 11px;

    background:
        color-mix(
            in srgb,
            var(--bg) 70%,
            var(--card)
        );

    color: var(--muted);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;
}

.account-profile-page table td {
    padding: 10px 11px;

    color: var(--text);

    font-size: 12px;
}

.account-profile-page table tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--card)
        );
}


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

.additional-document-button,
.document-share-button,
.whatsapp-button {
    min-height: 36px !important;

    padding: 7px 11px !important;

    border-radius: 9px !important;

    font-size: 12px !important;
}


/* ============================================================
   OWNER HISTORY
   ============================================================ */

.account-owner-history {
    padding: 17px !important;
}

.account-owner-history-item {
    padding: 12px !important;

    border-radius: 10px !important;
}

.account-owner-history-item + .account-owner-history-item {
    margin-top: 8px;
}


/* ============================================================
   REVIEW QUEUE
   ============================================================ */

.review-queue-table {
    width: 100%;

    border-collapse: collapse;

    overflow: hidden;

    border-radius: 12px;

    background: var(--card);

    font-size: 12px;
}

.review-queue-table th {
    padding: 11px 12px;

    background:
        color-mix(
            in srgb,
            var(--bg) 70%,
            var(--card)
        );

    border-bottom: 1px solid var(--line);

    color: var(--muted);

    font-size: 10px;

    text-align: left;

    text-transform: uppercase;

    letter-spacing: .04em;
}

.review-queue-table td {
    padding: 11px 12px;

    border-bottom: 1px solid var(--line);

    color: var(--text);
}

.review-queue-table tr:last-child td {
    border-bottom: 0;
}

.review-queue-table tbody tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--card)
        );
}


/* ============================================================
   REVIEW / OCR SCREEN
   ============================================================ */

.review-layout {
    gap: 16px;
}

.preview-panel {
    padding: 10px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow-soft);
}

.review-form {
    padding: 17px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow-soft);
}

.review-form label {
    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 600;
}

.review-form input,
.review-form select,
.review-form textarea {
    background: var(--bg);
}


/* ============================================================
   UPLOAD PAGE
   ============================================================ */

#upload-form {
    display: grid;

    gap: 13px;
}

#upload-form p {
    margin: 0;
}

#upload-form label {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 12px;

    font-weight: 600;
}

#upload-form input[type="file"] {
    padding: 10px;

    border: 1px dashed
        color-mix(
            in srgb,
            var(--primary) 38%,
            var(--line)
        );

    border-radius: 11px;

    background:
        color-mix(
            in srgb,
            var(--primary) 3%,
            var(--card)
        );
}

.file-chip {
    margin: 3px;

    padding: 7px 10px;

    border: 1px solid var(--line);

    border-radius: 8px;

    background: var(--bg);

    color: var(--text);

    font-size: 11px;
}


/* ============================================================
   IMPORT APRO
   ============================================================ */

.content > .card {
    padding: 20px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow-soft);
}

.content > .card h1 {
    margin-top: 0;

    color: var(--text);

    font-size: 24px;
}

.content > .card p {
    color: var(--muted);

    line-height: 1.55;
}

.content > .card form p {
    margin: 13px 0;
}

.content > .card form label {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 12px;

    font-weight: 600;
}


/* ============================================================
   AUDIT LOG
   ============================================================ */

.compact-table th:first-child,
.compact-table td:first-child {
    padding-left: 15px;
}

.compact-table th:last-child,
.compact-table td:last-child {
    padding-right: 15px;
}


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

.status-badge.status-muted {
    background:
        color-mix(
            in srgb,
            var(--muted) 12%,
            var(--card)
        );

    color: var(--muted);
}

.status-badge.status-success {
    background:
        color-mix(
            in srgb,
            var(--success) 13%,
            var(--card)
        );

    color: var(--success);
}


/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"]
.account-profile-header,

[data-theme="dark"]
.review-form,

[data-theme="dark"]
.preview-panel,

[data-theme="dark"]
.content > .card {
    background: var(--card);

    border-color: var(--line);
}

[data-theme="dark"]
#upload-form input[type="file"] {
    background:
        color-mix(
            in srgb,
            var(--primary) 5%,
            var(--card)
        );
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .account-profile-header {
        padding: 16px;
    }

    .account-header-actions {
        width: 100%;
    }

}

@media (max-width: 650px) {

    .account-profile-header {
        border-radius: 11px;
    }

    .account-profile-header h1 {
        font-size: 21px;
    }

    .review-queue-table {
        font-size: 11px;
    }

    .review-queue-table th,
    .review-queue-table td {
        padding: 8px;
    }

}


/* ============================================================
   END STAGE 15D
   ============================================================ */



/* ============================================================
   STAGE 16
   SPEEDOMETER — CORPORATE OFFICE UI
   ============================================================ */


/* ============================================================
   GLOBAL SPEEDOMETER PAGE
   ============================================================ */

.speedometer-page,
.speed-page,
.sa-page,
.vc-page {
    color: var(--text);
}


/* ============================================================
   SPEEDOMETER SUBNAV
   ============================================================ */

.speed-subnav {
    display: flex !important;

    align-items: center;

    gap: 6px !important;

    margin-bottom: 17px !important;

    padding: 6px !important;

    overflow-x: auto;

    border:
        1px solid var(--line) !important;

    border-radius:
        12px !important;

    background:
        var(--card) !important;

    box-shadow:
        var(--shadow-soft);
}

.speed-subnav a {
    min-height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        6px 11px !important;

    white-space: nowrap;

    border:
        1px solid transparent !important;

    border-radius:
        8px !important;

    color:
        var(--muted) !important;

    background:
        transparent !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.speed-subnav a:hover {
    color:
        var(--primary) !important;

    background:
        color-mix(
            in srgb,
            var(--primary) 6%,
            var(--card)
        ) !important;
}

.speed-subnav a.active,
.speed-subnav .active {
    color:
        var(--primary) !important;

    border-color:
        color-mix(
            in srgb,
            var(--primary) 20%,
            var(--line)
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--primary) 9%,
            var(--card)
        ) !important;
}


/* ============================================================
   DASHBOARD TOP AREA
   ============================================================ */

.speed-dashboard-head,
.speed-header,
.speed-title-area {
    margin-bottom:
        16px;
}

.speed-dashboard-head h1,
.speed-header h1,
.speed-title-area h1 {
    margin:
        0 0 5px;

    color:
        var(--text);

    font-size:
        26px;

    line-height:
        1.15;

    letter-spacing:
        -.02em;
}

.speed-dashboard-head p,
.speed-header p,
.speed-title-area p {
    margin: 0;

    color:
        var(--muted);

    font-size:
        12px;
}


/* ============================================================
   KPI CARDS
   ============================================================ */

.speed-kpis,
.speed-stats,
.sa-kpis {
    gap:
        10px !important;
}

.speed-kpis > *,
.speed-stats > *,
.sa-card {
    border:
        1px solid var(--line) !important;

    border-radius:
        12px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.speed-kpis > *,
.speed-stats > * {
    padding:
        13px 14px !important;
}

.speed-kpis span,
.speed-stats span,
.sa-card span,
.sa-card small {
    color:
        var(--muted) !important;

    font-size:
        10.5px !important;
}

.speed-kpis strong,
.speed-stats strong,
.sa-card strong {
    color:
        var(--text) !important;

    font-size:
        22px !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.02em;
}


/* ============================================================
   MONTH NAVIGATION
   ============================================================ */

.month-nav {
    min-height:
        45px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px !important;

    padding:
        6px 8px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        11px !important;

    background:
        var(--card) !important;

    box-shadow:
        var(--shadow-soft);
}

.month-nav a,
.month-nav button {
    min-height:
        32px !important;

    padding:
        5px 9px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        8px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;
}

.month-nav a:hover,
.month-nav button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 30%,
            var(--line)
        ) !important;

    color:
        var(--primary) !important;
}


/* ============================================================
   MONTH TITLE
   ============================================================ */

.speed-month-title,
.month-title {
    color:
        var(--text) !important;
}

.speed-month-title strong,
.month-title strong {
    font-size:
        17px !important;

    font-weight:
        700 !important;
}

.speed-month-title small,
.month-title small {
    color:
        var(--muted) !important;

    font-size:
        10px !important;
}


/* ============================================================
   JOURNAL WRAPPER
   ============================================================ */

.speed-table-wrap {
    overflow:
        auto !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--text) 16%,
            var(--line)
        ) !important;

    border-radius:
        11px !important;

    background:
        var(--card) !important;

    box-shadow:
        var(--shadow-soft);
}


/* ============================================================
   JOURNAL TABLE
   Preserve compact month view.
   ============================================================ */

.speed-table {
    width:
        100%;

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    font-size:
        9.8px !important;
}

.speed-table th,
.speed-table td {
    border-right:
        1px solid
        color-mix(
            in srgb,
            var(--text) 17%,
            var(--line)
        ) !important;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--text) 17%,
            var(--line)
        ) !important;
}

.speed-table th {
    background:
        color-mix(
            in srgb,
            var(--bg) 64%,
            var(--card)
        ) !important;

    color:
        var(--text) !important;

    font-weight:
        700 !important;
}

.speed-table td {
    background:
        var(--card);

    color:
        var(--text);
}

.speed-table tbody tr:nth-child(even) td:not(.weekend):not(.sat):not(.sun):not(.holiday) {
    background:
        color-mix(
            in srgb,
            var(--bg) 28%,
            var(--card)
        );
}

.speed-table tbody tr:hover td {
    box-shadow:
        inset 0 0 0 999px
        color-mix(
            in srgb,
            var(--primary) 2.5%,
            transparent
        );
}


/* ============================================================
   STICKY COLUMNS
   ============================================================ */

.speed-table .sticky-number,
.speed-table .sticky-vehicle,
.speed-table .sticky-driver {
    background:
        var(--card) !important;
}

.speed-table tbody tr:nth-child(even)
.sticky-number,

.speed-table tbody tr:nth-child(even)
.sticky-vehicle,

.speed-table tbody tr:nth-child(even)
.sticky-driver {
    background:
        color-mix(
            in srgb,
            var(--bg) 28%,
            var(--card)
        ) !important;
}

.speed-table .sticky-driver {
    border-right:
        2px solid
        color-mix(
            in srgb,
            var(--primary) 24%,
            var(--line)
        ) !important;
}


/* ============================================================
   VEHICLE COLUMN
   ============================================================ */

.speed-table .sticky-vehicle strong {
    color:
        var(--text) !important;

    font-size:
        10.2px !important;

    font-weight:
        700 !important;
}

.speed-table .sticky-vehicle small {
    color:
        var(--muted) !important;

    font-size:
        7.8px !important;
}


/* ============================================================
   DRIVER SELECT
   ============================================================ */

.quick-driver select {
    min-height:
        29px !important;

    padding:
        3px 6px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        7px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    font-size:
        8.8px !important;
}

.quick-driver button {
    min-width:
        29px;

    min-height:
        29px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            var(--line)
        ) !important;

    border-radius:
        7px !important;

    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            var(--card)
        ) !important;

    color:
        var(--primary) !important;
}


/* ============================================================
   JOURNAL CELLS
   ============================================================ */

.speed-cell-link {
    min-height:
        39px !important;

    color:
        var(--text) !important;

    transition:
        background .12s ease;
}

.speed-cell-link:hover {
    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            transparent
        ) !important;
}

.speed-value {
    color:
        var(--text) !important;

    font-size:
        9.8px !important;

    font-weight:
        700 !important;
}

.speed-delta {
    color:
        var(--muted) !important;

    font-size:
        8.3px !important;
}

.speed-status {
    font-size:
        8.5px !important;

    font-weight:
        700 !important;
}


/* ============================================================
   DAY HEADER
   ============================================================ */

.day-head-number {
    color:
        var(--text) !important;

    font-size:
        10.5px !important;

    font-weight:
        800 !important;
}

.speed-table .speed-day small {
    color:
        var(--muted);

    font-size:
        7.3px !important;
}


/* ============================================================
   SATURDAY
   ============================================================ */

.speed-table .sat,
.speed-table .day-saturday {
    background:
        #edf5fa !important;
}

[data-theme="dark"]
.speed-table .sat,

[data-theme="dark"]
.speed-table .day-saturday {
    background:
        #142831 !important;
}


/* ============================================================
   SUNDAY
   ============================================================ */

.speed-table .sun,
.speed-table .day-sunday {
    background:
        #fff1f2 !important;
}

[data-theme="dark"]
.speed-table .sun,

[data-theme="dark"]
.speed-table .day-sunday {
    background:
        #342125 !important;
}


/* ============================================================
   HOLIDAY
   ============================================================ */

.speed-table .holiday,
.speed-table .day-holiday {
    background:
        #fff4bf !important;

    box-shadow:
        inset 1px 0 #e5c766,
        inset -1px 0 #e5c766;
}

[data-theme="dark"]
.speed-table .holiday,

[data-theme="dark"]
.speed-table .day-holiday {
    background:
        #433a1b !important;

    box-shadow:
        inset 1px 0 #796529,
        inset -1px 0 #796529;
}


/* ============================================================
   TODAY
   ============================================================ */

.speed-table .day-today {
    position:
        relative;

    outline:
        2px solid
        var(--primary) !important;

    outline-offset:
        -2px;
}


/* ============================================================
   MISSING
   ============================================================ */

.speed-table .day-missing {
    background:
        color-mix(
            in srgb,
            var(--warning) 7%,
            var(--card)
        ) !important;
}


/* ============================================================
   LEGEND
   ============================================================ */

.speed-legend {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px 13px;

    margin-top:
        9px;

    padding:
        8px 10px;

    border:
        1px solid var(--line);

    border-radius:
        9px;

    background:
        var(--card);

    color:
        var(--muted);

    font-size:
        9.5px;
}


/* ============================================================
   QUICK EDIT MODAL
   ============================================================ */

.speed-quick-card {
    border:
        1px solid var(--line) !important;

    border-radius:
        15px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        0 22px 70px
        rgba(0,0,0,.22) !important;
}

.speed-quick-card h2,
.speed-quick-card h3 {
    color:
        var(--text) !important;
}

.speed-quick-card label {
    color:
        var(--muted) !important;

    font-size:
        11px !important;
}

.speed-quick-card input,
.speed-quick-card select,
.speed-quick-card textarea {
    border:
        1px solid var(--line) !important;

    border-radius:
        8px !important;

    background:
        var(--bg) !important;

    color:
        var(--text) !important;
}


/* ============================================================
   TODAY ENTRY PAGE
   ============================================================ */

.today-panel,
.month-panel {
    border:
        1px solid var(--line) !important;

    border-radius:
        14px !important;

    background:
        var(--card) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.today-table {
    width:
        100%;

    border-collapse:
        collapse;

    color:
        var(--text);
}

.today-table th {
    background:
        color-mix(
            in srgb,
            var(--bg) 70%,
            var(--card)
        );

    color:
        var(--muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}

.today-table th,
.today-table td {
    padding:
        9px 10px;

    border-bottom:
        1px solid var(--line);
}


/* ============================================================
   MONTHLY PLAN
   ============================================================ */

.speedometer-page .panel,
.month-plan-page .panel {
    border:
        1px solid var(--line);

    border-radius:
        14px;

    background:
        var(--card);

    box-shadow:
        var(--shadow-soft);
}

.month-plan-page table,
.speedometer-page table:not(.speed-table) {
    color:
        var(--text);
}

.month-plan-page th,
.speedometer-page table:not(.speed-table) th {
    color:
        var(--muted);
}

.month-plan-page input,
.month-plan-page select {
    border:
        1px solid var(--line);

    border-radius:
        8px;

    background:
        var(--card);

    color:
        var(--text);
}


/* ============================================================
   VEHICLE + DRIVER LISTS
   ============================================================ */

.vc-grid {
    gap:
        14px !important;
}

.vc-card,
.vc-panel {
    border:
        1px solid var(--line) !important;

    border-radius:
        14px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.vc-card strong,
.vc-panel h2,
.vc-panel h3 {
    color:
        var(--text) !important;
}

.vc-card small,
.vc-panel small {
    color:
        var(--muted) !important;
}

.vc-table {
    width:
        100%;

    border-collapse:
        collapse;

    color:
        var(--text);
}

.vc-table th {
    color:
        var(--muted);

    background:
        color-mix(
            in srgb,
            var(--bg) 70%,
            var(--card)
        );

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}

.vc-table th,
.vc-table td {
    padding:
        10px 11px;

    border-bottom:
        1px solid var(--line);
}


/* ============================================================
   SIMPLE SPEEDOMETER PANEL TABLES
   vehicle_list / driver_list / history
   ============================================================ */

.content .panel > table {
    width:
        100%;

    border-collapse:
        collapse;

    color:
        var(--text);
}

.content .panel > table th {
    padding:
        10px 11px;

    border-bottom:
        1px solid var(--line);

    background:
        color-mix(
            in srgb,
            var(--bg) 70%,
            var(--card)
        );

    color:
        var(--muted);

    font-size:
        10px;

    text-align:
        left;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}

.content .panel > table td {
    padding:
        10px 11px;

    border-bottom:
        1px solid var(--line);

    color:
        var(--text);

    font-size:
        12px;
}

.content .panel > table tbody tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--card)
        );
}


/* ============================================================
   FORMS
   ============================================================ */

.speedometer-page input,
.speedometer-page select,
.speedometer-page textarea,

.vc-page input,
.vc-page select,
.vc-page textarea {
    border:
        1px solid var(--line);

    border-radius:
        8px;

    background:
        var(--bg);

    color:
        var(--text);
}


/* ============================================================
   ANALYTICS — OFFICE STYLE
   ============================================================ */

.sa-page {
    display:
        grid;

    gap:
        14px;

    color:
        var(--text) !important;
}

.sa-head {
    margin-bottom:
        2px;
}

.sa-head h1 {
    margin:
        0 0 5px !important;

    color:
        var(--text) !important;

    font-size:
        26px !important;

    letter-spacing:
        -.02em;
}

.sa-muted {
    color:
        var(--muted) !important;
}


/* Analytics filters */

.sa-filter {
    padding:
        12px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        12px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.sa-field label {
    color:
        var(--muted) !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;
}

.sa-field select,
.sa-field input {
    min-height:
        37px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        8px !important;

    background:
        var(--bg) !important;

    color:
        var(--text) !important;
}


/* Analytics cards */

.sa-card {
    min-height:
        84px;

    padding:
        14px !important;
}

.sa-card strong {
    display:
        block;

    margin-top:
        6px;

    font-size:
        22px !important;
}


/* Analytics panels */

.sa-grid {
    gap:
        14px !important;
}

.sa-panel {
    padding:
        16px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        14px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.sa-panel h2,
.sa-panel h3 {
    margin-top:
        0 !important;

    color:
        var(--text) !important;
}


/* Month rows */

.sa-month {
    padding:
        8px 0;

    border-bottom:
        1px solid var(--line);

    color:
        var(--text) !important;
}

.sa-month:last-child {
    border-bottom:
        0;
}


/* Vehicle ranking */

.sa-vehicle {
    padding:
        9px 0 !important;

    border-bottom:
        1px solid var(--line) !important;

    color:
        var(--text) !important;
}

.sa-vehicle:last-child {
    border-bottom:
        0 !important;
}

.sa-vehicle strong {
    color:
        var(--text) !important;
}

.sa-vehicle small {
    color:
        var(--muted) !important;
}


/* Analytics bars */

.sa-bar {
    overflow:
        hidden;

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--text) 9%,
            var(--card)
        ) !important;
}

.sa-bar > span,
.sa-bar > div {
    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary2)
        ) !important;
}


/* ============================================================
   HISTORY PAGE
   ============================================================ */

.speed-history,
.history-page {
    color:
        var(--text);
}


/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"]
.speed-table-wrap,

[data-theme="dark"]
.speed-subnav,

[data-theme="dark"]
.month-nav,

[data-theme="dark"]
.speed-quick-card,

[data-theme="dark"]
.today-panel,

[data-theme="dark"]
.month-panel,

[data-theme="dark"]
.sa-filter,

[data-theme="dark"]
.sa-card,

[data-theme="dark"]
.sa-panel,

[data-theme="dark"]
.vc-card,

[data-theme="dark"]
.vc-panel {
    background:
        var(--card) !important;

    border-color:
        var(--line) !important;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .speed-subnav {
        border-radius:
            10px !important;
    }

    .sa-grid {
        grid-template-columns:
            1fr !important;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 650px) {

    .speed-subnav {
        margin-left:
            -4px !important;

        margin-right:
            -4px !important;

        padding:
            5px !important;
    }

    .speed-subnav a {
        font-size:
            10px !important;
    }

    .month-nav {
        overflow-x:
            auto;

        white-space:
            nowrap;
    }

    .speed-table-wrap {
        border-radius:
            8px !important;
    }

    .speed-table {
        font-size:
            9px !important;
    }

    .speed-table .sticky-vehicle strong {
        font-size:
            9.5px !important;
    }

    .sa-head h1 {
        font-size:
            22px !important;
    }

}


/* ============================================================
   END STAGE 16
   ============================================================ */



/* ============================================================
   SIDEBAR FOOTER FIX
   Хранилище + поддержка остаются внизу экрана
   ============================================================ */

@media (min-width:1051px) {

    .sidebar {
        height:
            calc(100vh - 36px) !important;

        min-height:
            0 !important;

        position:
            sticky !important;

        top:
            0 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        overflow:
            hidden !important;
    }


    /* Логотип не сжимается */

    .sidebar .brand {
        flex:
            0 0 auto !important;
    }


    /* Меню занимает оставшееся пространство */

    .sidebar > nav {
        flex:
            1 1 auto !important;

        min-height:
            0 !important;

        overflow-y:
            auto !important;

        overflow-x:
            hidden !important;

        padding-right:
            3px;

        margin-bottom:
            8px;
    }


    /* Незаметный scrollbar */

    .sidebar > nav::-webkit-scrollbar {
        width:
            4px;
    }

    .sidebar > nav::-webkit-scrollbar-thumb {
        background:
            rgba(255,255,255,.14);

        border-radius:
            999px;
    }

    .sidebar > nav::-webkit-scrollbar-track {
        background:
            transparent;
    }


    /* Нижние сервисные карточки */

    .sidebar-footer {
        flex:
            0 0 auto !important;

        margin-top:
            auto !important;

        padding-top:
            8px !important;

        padding-bottom:
            0 !important;

        background:
            transparent;
    }


    /* Чуть компактнее, чтобы обе карточки помещались */

    .sidebar-footer .side-card {
        padding:
            10px !important;
    }

    .sidebar-footer .disk-card {
        margin-bottom:
            7px;
    }

    .sidebar-footer .support-card {
        margin-bottom:
            0 !important;
    }


    .sidebar-footer .support-card strong {
        font-size:
            11px;
    }

    .sidebar-footer .support-card span,
    .sidebar-footer .support-card a {
        font-size:
            10px;
        line-height:
            1.35;
    }


    /* Хранилище немного компактнее */

    .disk-card .side-card-head {
        margin-bottom:
            5px;
    }

    .disk-card .disk-main strong {
        font-size:
            18px;
    }

    .disk-card .disk-grid {
        gap:
            5px;
    }

    .disk-card .disk-grid > div {
        padding:
            5px !important;
    }

}


/* ------------------------------------------------------------
   MOBILE/TABLET
   Оставляем sidebar прокручиваемым целиком
   ------------------------------------------------------------ */

@media (max-width:1050px) {

    .sidebar {
        height:
            100vh !important;

        max-height:
            100vh !important;

        overflow-y:
            auto !important;
    }

    .sidebar-footer {
        margin-top:
            12px !important;
    }

}


/* ============================================================
   END SIDEBAR FOOTER FIX
   ============================================================ */



/* ============================================================
   SPEEDOMETER STAGE 16B — FINAL OFFICE PAGES

   Analytics
   Vehicles
   Vehicle detail
   Drivers
   History
   ============================================================ */


/* ============================================================
   COMMON PAGE HEADING
   ============================================================ */

.speed-office-vehicle-list,
.speed-office-driver-list,
.speed-office-history {
    align-items:
        center !important;

    margin-bottom:
        16px !important;

    padding:
        0 !important;
}

.speed-office-vehicle-list h1,
.speed-office-driver-list h1,
.speed-office-history h1 {
    margin:
        0 0 5px !important;

    color:
        var(--text) !important;

    font-size:
        25px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -.02em;
}

.speed-office-vehicle-list p,
.speed-office-driver-list p,
.speed-office-history p {
    margin:
        0 !important;

    color:
        var(--muted) !important;

    font-size:
        12px !important;
}


/* ============================================================
   COMMON OFFICE PANEL
   ============================================================ */

.speed-office-panel {
    overflow:
        hidden;

    padding:
        0 !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        14px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}


/* ============================================================
   COMMON SPEEDOMETER TABLE
   ============================================================ */

.speed-office-table {
    width:
        100% !important;

    border-collapse:
        collapse !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    font-size:
        12px !important;
}

.speed-office-table thead {
    background:
        color-mix(
            in srgb,
            var(--bg) 68%,
            var(--card)
        ) !important;
}

.speed-office-table th {
    height:
        42px;

    padding:
        10px 13px !important;

    border-bottom:
        1px solid var(--line) !important;

    color:
        var(--muted) !important;

    background:
        color-mix(
            in srgb,
            var(--bg) 68%,
            var(--card)
        ) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    text-align:
        left;

    text-transform:
        uppercase;

    letter-spacing:
        .045em;
}

.speed-office-table td {
    min-height:
        44px;

    padding:
        11px 13px !important;

    border-bottom:
        1px solid var(--line) !important;

    color:
        var(--text) !important;

    vertical-align:
        middle;
}

.speed-office-table tbody tr:last-child td {
    border-bottom:
        0 !important;
}

.speed-office-table tbody tr {
    transition:
        background .12s ease;
}

.speed-office-table tbody tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--card)
        ) !important;
}

.speed-office-table a {
    color:
        var(--primary);

    font-weight:
        600;
}


/* ============================================================
   SMALL TABLE ACTION BUTTONS
   ============================================================ */

.speed-office-table
.secondary-button,

.speed-office-table
.primary,

.speed-office-table
button {
    min-height:
        30px !important;

    padding:
        5px 9px !important;

    border-radius:
        7px !important;

    font-size:
        10px !important;
}


/* ============================================================
   VEHICLES LIST
   ============================================================ */

.speed-office-vehicle-list {
    position:
        relative;
}

.speed-office-vehicle-list::before {
    content:
        "Автопарк";

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    margin-right:
        9px;

    padding:
        4px 8px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            var(--line)
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            var(--card)
        );

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .03em;

    text-transform:
        uppercase;
}


/* ============================================================
   DRIVERS LIST
   ============================================================ */

.speed-office-driver-list::before {
    content:
        "Персонал";

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    margin-right:
        9px;

    padding:
        4px 8px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            var(--line)
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            var(--card)
        );

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;
}


/* ============================================================
   HISTORY
   ============================================================ */

.speed-office-history::before {
    content:
        "Аудит";

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    margin-right:
        9px;

    padding:
        4px 8px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            var(--line)
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            var(--card)
        );

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;
}


/* ============================================================
   VEHICLE DETAIL
   Existing vc-* classes
   ============================================================ */

.vc-page {
    display:
        grid;

    gap:
        15px;

    color:
        var(--text) !important;
}

.vc-page .page-heading {
    margin-bottom:
        2px;
}

.vc-page .page-heading h1 {
    margin:
        0 0 5px;

    color:
        var(--text);

    font-size:
        25px;

    letter-spacing:
        -.02em;
}

.vc-page .page-heading p {
    color:
        var(--muted);

    font-size:
        12px;
}


/* Main summary cards */

.vc-grid {
    display:
        grid;

    gap:
        12px !important;
}

.vc-card {
    padding:
        15px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        13px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.vc-card span,
.vc-card small {
    color:
        var(--muted) !important;
}

.vc-card strong {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--text) !important;

    font-size:
        20px !important;

    font-weight:
        700 !important;
}


/* Vehicle panels */

.vc-panel {
    overflow:
        hidden;

    padding:
        16px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        14px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.vc-panel h2,
.vc-panel h3 {
    margin-top:
        0;

    color:
        var(--text) !important;

    font-weight:
        700;
}

.vc-panel p,
.vc-panel small {
    color:
        var(--muted) !important;
}


/* Vehicle detail table */

.vc-table {
    width:
        100%;

    border-collapse:
        collapse;

    color:
        var(--text);
}

.vc-table th {
    padding:
        10px 11px;

    border-bottom:
        1px solid var(--line);

    background:
        color-mix(
            in srgb,
            var(--bg) 68%,
            var(--card)
        );

    color:
        var(--muted);

    font-size:
        10px;

    text-align:
        left;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}

.vc-table td {
    padding:
        10px 11px;

    border-bottom:
        1px solid var(--line);

    color:
        var(--text);

    font-size:
        11.5px;
}

.vc-table tr:last-child td {
    border-bottom:
        0;
}

.vc-table tbody tr:hover td {
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--card)
        );
}


/* ============================================================
   ANALYTICS PAGE
   ============================================================ */

.sa-page {
    display:
        grid !important;

    gap:
        14px !important;

    color:
        var(--text) !important;
}


/* Heading */

.sa-head {
    align-items:
        center !important;

    margin-bottom:
        1px;
}

.sa-head h1 {
    margin:
        0 0 5px !important;

    color:
        var(--text) !important;

    font-size:
        25px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -.02em;
}

.sa-muted {
    color:
        var(--muted) !important;

    font-size:
        12px !important;
}


/* Filter */

.sa-filter {
    display:
        flex !important;

    align-items:
        flex-end !important;

    gap:
        10px !important;

    flex-wrap:
        wrap;

    padding:
        13px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        13px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.sa-field {
    min-width:
        180px;
}

.sa-field label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--muted) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase;

    letter-spacing:
        .035em;
}

.sa-field select,
.sa-field input {
    width:
        100%;

    min-height:
        38px !important;

    padding:
        7px 10px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        8px !important;

    background:
        var(--bg) !important;

    color:
        var(--text) !important;

    box-shadow:
        none !important;
}


/* Analytics KPI */

.sa-kpis {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        ) !important;

    gap:
        10px !important;
}

.sa-card {
    min-height:
        92px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        14px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        12px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;

    transition:
        transform .13s ease,
        border-color .13s ease;
}

.sa-card:hover {
    transform:
        translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 25%,
            var(--line)
        ) !important;
}

.sa-card span,
.sa-card small {
    color:
        var(--muted) !important;

    font-size:
        10px !important;
}

.sa-card strong {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--text) !important;

    font-size:
        22px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        -.02em;
}


/* Analytics main panels */

.sa-grid {
    display:
        grid !important;

    gap:
        13px !important;
}

.sa-panel {
    overflow:
        hidden;

    padding:
        16px !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        14px !important;

    background:
        var(--card) !important;

    color:
        var(--text) !important;

    box-shadow:
        var(--shadow-soft) !important;
}

.sa-panel h2,
.sa-panel h3 {
    margin:
        0 0 13px !important;

    color:
        var(--text) !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;
}


/* Analytics month rows */

.sa-month {
    display:
        grid;

    align-items:
        center;

    min-height:
        38px;

    padding:
        7px 0 !important;

    border-bottom:
        1px solid var(--line) !important;

    color:
        var(--text) !important;
}

.sa-month:last-child {
    border-bottom:
        0 !important;
}

.sa-month span,
.sa-month small {
    color:
        var(--muted) !important;
}


/* Ranking */

.sa-vehicle {
    min-height:
        46px;

    padding:
        8px 0 !important;

    border-bottom:
        1px solid var(--line) !important;

    color:
        var(--text) !important;
}

.sa-vehicle:last-child {
    border-bottom:
        0 !important;
}

.sa-vehicle strong {
    color:
        var(--text) !important;

    font-weight:
        700 !important;
}

.sa-vehicle span,
.sa-vehicle small {
    color:
        var(--muted) !important;
}


/* Graph bars */

.sa-bar {
    overflow:
        hidden;

    height:
        9px;

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--text) 9%,
            var(--card)
        ) !important;
}

.sa-bar > span,
.sa-bar > div {
    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary2)
        ) !important;
}


/* Analytics badges */

.sa-badge {
    min-height:
        23px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        4px 7px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--warning) 20%,
            var(--line)
        ) !important;

    border-radius:
        999px !important;

    background:
        color-mix(
            in srgb,
            var(--warning) 9%,
            var(--card)
        ) !important;

    color:
        var(--text) !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;
}


/* ============================================================
   BUTTONS ON SECONDARY SPEEDOMETER PAGES
   ============================================================ */

.speed-office-vehicle-list
.primary,

.speed-office-driver-list
.primary,

.speed-office-history
.primary,

.vc-page
.primary,

.sa-page
.primary {
    min-height:
        36px;

    padding:
        7px 12px;

    border-radius:
        9px;

    font-size:
        11px;
}


.speed-office-vehicle-list
.secondary-button,

.speed-office-driver-list
.secondary-button,

.speed-office-history
.secondary-button,

.vc-page
.secondary-button,

.sa-page
.secondary-button {
    min-height:
        36px;

    padding:
        7px 11px;

    border:
        1px solid var(--line);

    border-radius:
        9px;

    background:
        var(--card);

    color:
        var(--text);

    font-size:
        11px;

    font-weight:
        600;
}


/* ============================================================
   FORMS
   ============================================================ */

.vc-page input,
.vc-page select,
.vc-page textarea,

.sa-page input,
.sa-page select,
.sa-page textarea {
    border:
        1px solid var(--line);

    border-radius:
        8px;

    background:
        var(--bg);

    color:
        var(--text);
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

[data-theme="light"]
.speed-office-panel,

[data-theme="light"]
.vc-card,

[data-theme="light"]
.vc-panel,

[data-theme="light"]
.sa-filter,

[data-theme="light"]
.sa-card,

[data-theme="light"]
.sa-panel {
    background:
        #ffffff !important;

    color:
        #1d2b31 !important;

    border-color:
        #dde5e8 !important;
}


/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"]
.speed-office-panel,

[data-theme="dark"]
.vc-card,

[data-theme="dark"]
.vc-panel,

[data-theme="dark"]
.sa-filter,

[data-theme="dark"]
.sa-card,

[data-theme="dark"]
.sa-panel {
    background:
        var(--card) !important;

    color:
        var(--text) !important;

    border-color:
        var(--line) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1250px) {

    .sa-kpis {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
    }

}


@media (max-width: 850px) {

    .sa-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

    .sa-field {
        min-width:
            calc(50% - 10px);
    }

}


@media (max-width: 600px) {

    .speed-office-vehicle-list h1,
    .speed-office-driver-list h1,
    .speed-office-history h1,
    .sa-head h1 {
        font-size:
            21px !important;
    }

    .sa-kpis {
        grid-template-columns:
            1fr !important;
    }

    .sa-field {
        min-width:
            100%;
    }

    .speed-office-table {
        min-width:
            620px;
    }

    .speed-office-panel {
        overflow-x:
            auto;
    }

}


/* ============================================================
   END SPEEDOMETER STAGE 16B
   ============================================================ */


/* ===== APRO PROGRESS SMALL V1 ===== */

.apro-page{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    gap:14px
}

.apro-head,
.apro-file-card,
.apro-progress-card,
.apro-actions{
    border:1px solid var(--line);
    background:var(--card);
    border-radius:14px;
    box-shadow:var(--shadow-soft)
}

.apro-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:20px
}

.apro-head h1{
    margin:3px 0 7px;
    font-size:25px
}

.apro-head p{
    margin:0;
    color:var(--muted);
    font-size:12px
}

.apro-kicker{
    color:var(--primary);
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em
}

.apro-ready{
    height:30px;
    padding:0 10px;
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--muted);
    font-size:10px
}

.apro-form{
    display:grid;
    gap:12px
}

.apro-file-card,
.apro-progress-card{
    padding:17px
}

.apro-label{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:700
}

.apro-file-card input[type=file]{
    width:100%;
    padding:12px;
    border:1px dashed var(--line);
    border-radius:10px;
    background:var(--bg);
    color:var(--text)
}

.apro-file-info{
    margin-top:9px;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--bg)
}

.apro-file-info strong,
.apro-file-info span{
    display:block
}

.apro-file-info strong{
    font-size:11px
}

.apro-file-info span{
    margin-top:2px;
    color:var(--muted);
    font-size:9px
}

.apro-progress-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:9px
}

.apro-progress-head small{
    display:block;
    color:var(--muted);
    font-size:8px
}

.apro-progress-head strong{
    font-size:13px
}

.apro-percent{
    color:var(--primary);
    font-size:18px!important
}

.apro-progress{
    height:12px
}

.apro-progress-grid,
.apro-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin-top:10px
}

.apro-progress-grid>div,
.apro-step{
    padding:8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--bg)
}

.apro-progress-grid span,
.apro-progress-grid strong{
    display:block
}

.apro-progress-grid span{
    color:var(--muted);
    font-size:8px
}

.apro-progress-grid strong{
    overflow:hidden;
    margin-top:2px;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap
}

.apro-steps{
    grid-template-columns:repeat(3,1fr)
}

.apro-step{
    display:flex;
    align-items:center;
    gap:8px
}

.apro-step i{
    width:9px;
    height:9px;
    flex:0 0 auto;
    border:2px solid var(--muted);
    border-radius:50%
}

.apro-step strong,
.apro-step span{
    display:block
}

.apro-step strong{
    font-size:9px
}

.apro-step span{
    margin-top:2px;
    color:var(--muted);
    font-size:8px
}

.apro-step.active{
    border-color:var(--primary)
}

.apro-step.active i{
    border-color:var(--primary)
}

.apro-step.done i{
    border-color:var(--success);
    background:var(--success)
}

.apro-step.error i{
    border-color:var(--danger);
    background:var(--danger)
}

.apro-processing{
    margin-top:10px;
    padding:9px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--muted);
    font-size:9px
}

.apro-spinner{
    width:14px;
    height:14px;
    border:2px solid var(--line);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:aprospin .8s linear infinite
}

@keyframes aprospin{
    to{transform:rotate(360deg)}
}

.apro-actions{
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px
}

.apro-actions>div{
    display:grid;
    gap:3px
}

.apro-actions strong{
    font-size:11px
}

.apro-actions span{
    color:var(--muted);
    font-size:9px
}

.apro-actions-secondary{
    box-shadow:none
}

.apro-actions button{
    min-height:37px;
    white-space:nowrap
}

@media(max-width:700px){

    .apro-head,
    .apro-actions{
        flex-direction:column;
        align-items:stretch
    }

    .apro-progress-grid,
    .apro-steps{
        grid-template-columns:1fr
    }

}

/* ===== END APRO PROGRESS SMALL V1 ===== */