* {
    box-sizing:border-box;
    margin:0;
    padding:0
}
:root {
    --grn:#006B3C;
    --g2:#00522e;
    --red:#C8001E;
    --blue:#1565C0;
    --grey:#546E7A;
    --sp:#2E7D32;
    --bg:#f0f2f5;
    --sur:#fff;
    --brd:#e4e7eb;
    --t1:#1a1a1a;
    --t2:#6b7280;
    --r:8px
}

/* ─────────────────────────────────────────────────────────────
   Icons. Line drawings that take the colour and the size of the
   text they sit in, so they need no sizing of their own at any
   of the places they are used.
   ───────────────────────────────────────────────────────────── */
.icon-sprite {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.icon {
    width:1.15em;
    height:1.15em;
    flex:none;
    vertical-align:-.22em
}

body {
    font-family:'Segoe UI',system-ui,sans-serif;
    background:var(--bg);
    color:var(--t1);
    font-size:14px;
    line-height:1.5;
    min-height:100vh
}

/* ─────────────────────────────────────────────────────────────
   Mobile-first. Base rules target small screens; min-width
   queries layer on the larger layouts. Breakpoint: 640px.
   ───────────────────────────────────────────────────────────── */

/* Form primitives — shared by the login and password-change screens */
.field {
    margin-bottom:14px
}
.field__label {
    font-size:11px;
    font-weight:700;
    color:#888;
    display:block;
    margin-bottom:5px;
    text-transform:uppercase;
    letter-spacing:.06em
}
.field__input {
    width:100%;
    padding:11px 12px;
    border:1.5px solid var(--brd);
    border-radius:8px;
    font-family:inherit;
    font-size:16px
}
.field__input--invalid {
    border-color:var(--red);
    background:#fff5f5
}
/* The reason a field was refused, under the field it belongs to. */
.field__error {
    margin:4px 0 0;
    color:var(--red);
    font-size:13px;
    line-height:1.35
}
/* A material two teams made: who with, and whether they agree it happened. */
.materials-table__joint {
    min-width:140px;
    font-size:12px
}
.materials-table__joint-warning {
    display:block;
    margin-top:3px;
    padding:3px 6px;
    background:#FFF8E1;
    border-left:2px solid #F9A825;
    border-radius:0 4px 4px 0;
    color:#8D6E00;
    font-size:11px;
    line-height:1.35
}

/* The same, for a value refused while editing a cell in the table. */
.editable-cell--invalid {
    border-color:var(--red);
    background:#fff5f5
}
.editable-cell__error {
    display:block;
    margin-top:2px;
    color:var(--red);
    font-size:12px;
    line-height:1.3;
    white-space:normal
}
.field__input:focus {
    outline:none;
    border-color:var(--grn);
    box-shadow:0 0 0 3px rgba(0,107,60,.12)
}
.button {
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 12px;
    border:1px solid transparent;
    border-radius:6px;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer
}
.button--primary {
    background:var(--grn);
    color:#fff
}
.button--primary:hover {
    background:var(--g2)
}
.button--ghost {
    background:#fff;
    color:var(--t1);
    border-color:var(--brd)
}
.button--ghost:hover {
    border-color:var(--grn);
    color:var(--grn)
}
.button--block {
    width:100%;
    margin-top:8px;
    padding:12px;
    border-radius:8px;
    font-size:15px
}
.button--small {
    padding:4px 9px;
    font-size:12px
}
.button--confirm {
    background:#E8F5E9;
    color:#2E7D32;
    border-color:#C8E6C9
}
.button--danger {
    background:#FFEBEE;
    color:var(--red);
    border-color:#FFCDD2
}
.button--info {
    background:#E3F2FD;
    color:var(--blue);
    border-color:#BBDEFB
}
.button--neutral {
    background:#f5f5f5;
    color:#555;
    border-color:#ddd
}
.field__label--plain {
    color:var(--t2);
    font-size:12px;
    font-weight:600;
    text-transform:none;
    letter-spacing:normal
}
.field__input--compact {
    padding:7px 10px;
    font-size:14px
}
.form-error {
    color:var(--red);
    font-size:13px;
    text-align:center;
    margin-top:10px;
    min-height:18px
}

/* Login screen */
.login {
    min-height:100vh;
    min-height:100dvh; /* mobile browsers: the toolbars are not viewport */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:linear-gradient(140deg,#0a2e1c,#1a4a2e 50%,#0a2e1c)
}
.login__card {
    width:100%;
    max-width:440px;
    padding:24px 20px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 24px 64px rgba(0,0,0,.4)
}
.login__brand {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:20px
}
.login__logo {
    height:32px
}
.login__logo-fallback {
    height:32px;
    display:none;
    align-items:center;
    padding:0 10px;
    background:var(--grn);
    border-radius:6px;
    font-weight:700;
    font-size:13px;
    color:#fff
}
.login__logo-fallback--visible {
    display:flex
}
.login__title {
    font-size:15px;
    font-weight:700
}

/* Application header */
.app-header {
    position:sticky;
    top:0;
    z-index:200;
    background:var(--grn);
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.18)
}
.app-header__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:52px;
    max-width:1200px;
    margin:0 auto;
    padding:0 12px
}
.app-header__brand {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0
}
.app-header__logo {
    height:26px;
    filter:brightness(0) invert(1)
}
.app-header__logo-fallback {
    height:26px;
    display:none;
    align-items:center;
    padding:0 10px;
    background:rgba(255,255,255,.15);
    border-radius:6px;
    font-weight:700;
    font-size:13px;
    color:#fff
}
.app-header__logo-fallback--visible {
    display:flex
}
.app-header__titles {
    min-width:0
}
.app-header__title {
    font-size:13px;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.app-header__subtitle {
    display:none;
    font-size:11px;
    opacity:.7
}
.app-header__account {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0
}
.app-header__badge {
    text-decoration:none;
    color:inherit;
    display:inline-block;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:5px 10px;
    background:rgba(255,255,255,.18);
    border-radius:20px;
    font-size:11px;
    font-weight:500
}
.app-header__badge:hover {
    background:rgba(255,255,255,.28)
}
.app-header__logout {
    flex:none;
    padding:5px 10px;
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1px solid rgba(255,255,255,.28);
    border-radius:6px;
    font-family:inherit;
    font-size:12px;
    cursor:pointer
}
.app-header__logout:hover {
    background:rgba(255,255,255,.28)
}

/* Тарифа panel */
.tariff__grid {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    padding:14px
}
.tariff__category {
    --category-accent:var(--t2);
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:10px;
    padding:14px
}
.tariff__category-title {
    margin-bottom:10px;
    padding-bottom:8px;
    color:var(--category-accent);
    border-bottom:2px solid var(--category-accent);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.07em
}
.tariff__row {
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 0;
    border-bottom:1px solid #f5f5f5
}
.tariff__row:last-of-type {
    border-bottom:none
}
.tariff__row-name {
    flex:1;
    font-size:13px
}
.tariff__row-fee {
    min-width:70px;
    text-align:right;
    color:var(--category-accent);
    font-family:'Courier New',monospace;
    font-weight:700
}
.tariff__row-input {
    padding:6px 8px;
    border:1.5px solid var(--brd);
    border-radius:6px;
    font-family:inherit;
    font-size:16px
}
.tariff__row-input:focus {
    outline:none;
    border-color:var(--grn)
}
.tariff__row-input--fee {
    width:92px;
    text-align:right;
    font-family:'Courier New',monospace
}
.tariff__row-remove {
    flex:none;
    padding:0 4px;
    background:none;
    border:none;
    color:#ccc;
    font-size:20px;
    line-height:1;
    cursor:pointer
}
.tariff__row-remove:hover {
    color:var(--red)
}
/* Picking a type to assign, and the button that does it. */
.tariff__assign {
    display:flex;
    gap:8px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed var(--brd)
}
.tariff__assign-select {
    flex:1;
    min-width:0;
    padding:6px 8px;
    border:1px solid var(--brd);
    border-radius:6px;
    font-family:inherit;
    font-size:13px
}
.tariff__add {
    flex:none;
    padding:6px 12px;
    background:none;
    border:1px solid var(--grn);
    border-radius:6px;
    color:var(--grn);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer
}
.tariff__add:hover {
    background:var(--grn);
    color:#fff
}
/* A category nobody has assigned a type to yet — correspondents cannot file
   into it at all, so it says so rather than showing an empty box. */
.tariff__empty {
    padding:8px 10px;
    background:#FFF8E1;
    border-left:3px solid #F9A825;
    border-radius:0 4px 4px 0;
    color:#8D6E00;
    font-size:12px;
    line-height:1.4
}
/* A refused administration save, above the form that was refused. */
.admin__error {
    margin-bottom:12px;
    padding:10px 12px;
    background:#FFEBEE;
    border-left:3px solid var(--red);
    border-radius:0 6px 6px 0;
    color:var(--red);
    font-size:13px;
    line-height:1.45
}
/* Administration writes are form posts; a form around a single button must
   not break the row it sits in. */
.admin__form {
    display:contents
}
.admin__show-form {
    display:flex;
    flex:1;
    align-items:center;
    gap:8px
}

/* Роли: the permission grid — one block per screen, a row per thing that may
   be done in it. Mobile-first: one column, two from the 640px breakpoint. */
.permission-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:14px 0
}
.permission-grid__area {
    padding:10px 12px;
    background:#fafbfc;
    border:1px solid var(--brd);
    border-radius:8px
}
.permission-grid__legend {
    padding:0 4px;
    color:var(--t1);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em
}
.permission-grid__option {
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:4px 0;
    font-size:13px;
    line-height:1.4;
    cursor:pointer
}
.permission-grid__option--special .permission-grid__name {
    color:var(--red);
    font-weight:600
}
.permission-grid__checkbox {
    flex:none;
    margin-top:2px;
    width:16px;
    height:16px;
    accent-color:var(--grn)
}
.permission-grid__checkbox:disabled {
    cursor:not-allowed
}
.permission-grid__checkbox:disabled+.permission-grid__name {
    color:var(--t2)
}
.permission-grid__locked {
    flex:none;
    font-size:11px;
    opacity:.6
}
.inset-form--inline {
    margin:0
}
.admin__badge {
    margin-left:6px;
    padding:2px 7px;
    background:#E8F5E9;
    border-radius:10px;
    color:var(--grn);
    font-size:11px;
    font-weight:600
}

/* Explains what a new material type still needs before anyone can use it. */
.inset-form__note {
    margin:8px 0 0;
    color:var(--t2);
    font-size:12px;
    line-height:1.45
}
.tariff__notes {
    grid-column:1/-1; /* a full-width row under the categories, never beside one */
    padding:14px 16px;
    background:#fffde7;
    border:1px solid #fff176;
    border-radius:10px
}
.tariff__notes-title {
    margin-bottom:8px;
    color:#888;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase
}
.tariff__notes-list {
    padding-left:18px;
    color:#888;
    font-size:12px;
    line-height:2.2
}
/* Dashboard cards */
.stats {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:20px
}
.stats__card {
    padding:12px 14px;
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r)
}
.stats__card--warning {
    background:#FFF8E1;
    border-color:#FFE082
}
.stats__card--danger {
    background:#FFEBEE;
    border-color:#FFCDD2
}
.stats__label {
    margin-bottom:6px;
    color:var(--t2);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em
}
.stats__value {
    font-size:22px;
    font-weight:700;
    line-height:1
}
.stats__unit {
    font-size:13px
}
.stats__note {
    margin-top:4px;
    color:var(--t2);
    font-family:'Courier New',monospace;
    font-size:12px
}

/* Tab bar */
.tab-bar {
    display:flex;
    overflow-x:auto;
    padding:0 10px;
    background:var(--sur);
    border-bottom:1px solid var(--brd)
}
.tab-bar__tab {
    padding:12px 10px;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    color:var(--t2);
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap
}
.tab-bar__tab:hover {
    color:var(--t1)
}
.tab-bar__tab--active {
    color:var(--grn);
    border-bottom-color:var(--grn)
}

/* A material whose show has been renamed since it aired */

/* Shared panel chrome (tariff / admin / budget fragments) */
.panel-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    background:#fafafa;
    border-bottom:1px solid #f0f0f0
}
.panel-toolbar__title {
    font-size:15px;
    font-weight:600
}
.panel-toolbar__label {
    color:#888;
    font-size:12px;
    font-weight:600
}
.panel-toolbar__select {
    width:auto
}
.panel-toolbar__actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-left:auto
}
.correspondent-card--inactive {
    opacity:.65
}
/* An inactive correspondent: still listed, visibly not current. */
.admin__row--inactive {
    opacity:.6
}
/* The refusal page: one message and the way back out of it. */
.error-page {
    padding:20px
}
.panel-loading {
    padding:28px;
    color:var(--t2);
    text-align:center
}
.table-scroll {
    overflow-x:auto
}
.checkbox {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--t2);
    font-size:12px;
    font-weight:600;
    white-space:nowrap
}
.inset-form {
    margin:0 14px 10px;
    padding:14px;
    background:#f0f7f4;
    border:1px solid #d6e9e0;
    border-radius:8px
}
.inset-form__title {
    margin-bottom:10px;
    font-size:13px;
    font-weight:600
}
.inset-form__grid {
    display:grid;
    grid-template-columns:1fr;
    gap:10px
}
.inset-form__actions {
    display:flex;
    gap:8px;
    margin-top:10px
}

/* Администрация */
.admin__section {
    padding-bottom:8px;
    border-bottom:2px solid #f0f0f0
}
.admin__section:last-child {
    border-bottom:none
}
.admin__row--editing {
    background:#F1F8E9
}
/* A row shows either what it says or what it is edited with. Only the hidden
   half is ever named, so the visible half keeps the display its own rules
   give it — a form stays a form, a field stays a field. */
.admin__row--editing .admin__shown,
.admin__row:not(.admin__row--editing) .admin__edited {
    display:none
}
.admin__row-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px
}
.admin__role {
    max-width:220px;
    color:#666;
    font-size:12px;
    white-space:normal
}
.admin__badge {
    padding:1px 5px;
    background:var(--grn);
    border-radius:3px;
    color:#fff;
    font-size:10px
}
.admin__name {
    font-weight:600
}
.admin__muted {
    color:#888;
    font-size:12px
}
.admin__index {
    color:#bbb;
    font-size:12px
}
.admin__swatch {
    display:inline-block;
    width:18px;
    height:18px;
    border:1px solid var(--brd);
    border-radius:4px;
    background:var(--category-accent, transparent);
    vertical-align:middle
}
.field__input--colour {
    width:56px;
    padding:2px 4px
}
.admin__count {
    font-family:'Courier New',monospace;
    font-size:12px
}
.admin__shows {
    padding:0 14px;
    list-style:none
}
.admin__show {
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 0;
    border-bottom:1px solid #f5f5f5
}
.admin__show-name {
    flex:1;
    font-size:13px
}
.admin__show-input {
    flex:1
}
.admin__show-materials {
    color:var(--t2);
    font-size:12px;
    white-space:nowrap
}
.admin__show-materials--none {
    color:#b0b6bd;
    font-style:italic
}
.admin__show-add {
    display:flex;
    gap:8px;
    padding:10px 14px
}
.admin__show-add .field__input {
    flex:1
}

/* Бюджет */
.budget__body {
    padding:14px
}
.budget__caption {
    margin-bottom:12px;
    color:#888;
    font-size:12px
}
.budget__line {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #f5f5f5
}
.budget__label {
    flex:1;
    min-width:150px;
    font-size:13px;
    font-weight:500
}
.budget__line--summary .budget__label {
    font-weight:700
}
.budget__bar {
    flex:1;
    min-width:100px;
    height:7px;
    background:#eee;
    border-radius:4px;
    overflow:hidden
}
.budget__bar-fill {
    width:var(--budget-fill,0);
    height:100%;
    border-radius:4px;
    transition:width .3s
}
.budget__bar-fill--ok {
    background:#22c55e
}
.budget__bar-fill--warn {
    background:#f97316
}
.budget__bar-fill--over {
    background:#ef4444
}
.budget__spent {
    min-width:85px;
    text-align:right;
    color:#333;
    font-family:'Courier New',monospace;
    font-size:13px;
    font-weight:600
}
.budget__spent--over {
    color:#ef4444
}
.budget__limit {
    min-width:130px;
    text-align:right;
    color:#888;
    font-size:12px
}
.budget__limit-input {
    display:inline-block;
    width:80px;
    font-family:'Courier New',monospace
}
.budget__no-limit {
    color:#ccc
}
.budget__over {
    color:#ef4444;
    font-size:11px;
    font-weight:700;
    white-space:nowrap
}
.budget__divider {
    height:1px;
    margin:8px 0;
    background:#e8e8e8;
    border:none
}
.budget__total {
    display:flex;
    justify-content:space-between;
    margin-top:4px;
    padding-top:12px;
    font-size:14px;
    font-weight:700
}
.budget__total-value {
    color:var(--red);
    font-family:'Courier New',monospace
}

@media(min-width:640px) {
    .permission-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .stats {
        grid-template-columns:repeat(3,1fr)
    }
    .stats__card {
        padding:14px 16px
    }
    .tab-bar {
        padding:0 14px
    }
    .tab-bar__tab {
        padding:12px 14px;
        font-size:13px
    }
    .inset-form__grid {
        grid-template-columns:1fr 1fr
    }
    .inset-form {
        margin:0 16px 10px
    }
    .budget__body {
        padding:16px 20px
    }
    .budget__label {
        min-width:195px
    }
    .tariff__grid {
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:14px;
        padding:16px
    }
    .tariff__row-input {
        padding:4px 7px;
        font-size:13px
    }
    .tariff__row-input--fee {
        width:78px
    }
    .field__input {
        font-size:14px;
        padding:10px 12px
    }
    .login {
        padding:20px
    }
    .login__card {
        padding:36px 32px;
        border-radius:16px
    }
    .login__brand {
        gap:12px;
        margin-bottom:24px
    }
    .login__logo,
    .login__logo-fallback {
        height:38px
    }
    .login__title {
        font-size:16px
    }
    .app-header__inner {
        min-height:54px;
        padding:0 16px;
        gap:12px
    }
    .app-header__brand {
        gap:10px
    }
    .app-header__logo,
    .app-header__logo-fallback {
        height:28px
    }
    .app-header__title {
        font-size:14px
    }
    .app-header__subtitle {
        display:block
    }
    .app-header__account {
        gap:10px
    }
    .app-header__badge {
        max-width:380px;
        padding:5px 12px
    }
    .app-header__logout {
        padding:5px 12px
    }
}

/* Portal header (BEM block) — inline styles folded in from the old JS template */
.app {
    max-width:1200px;
    margin:0 auto;
    padding:0 16px 80px
}
.ct {
    padding-top:20px
}
.card {
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    overflow:hidden
}
table {
    width:100%;
    border-collapse:collapse;
    min-width:500px
}
th {
    text-align:left;
    padding:8px 10px;
    font-size:11px;
    font-weight:600;
    color:var(--t2);
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:2px solid #f0f0f0;
    white-space:nowrap;
    background:#fafafa
}
td {
    padding:7px 10px;
    border-bottom:1px solid #f5f5f5;
    vertical-align:middle;
    font-size:13px
}
tr:last-child td {
    border-bottom:none
}
.editable-cell {
    cursor:pointer;
    border-radius:4px;
    padding:3px 5px;
    transition:background .12s;
    min-height:24px;
    display:inline-block;
    background:#f4f8f6;
    box-shadow:inset 0 -1px 0 #cddfd5
}
@media (hover:hover) {
    .editable-cell:hover {
        background:#e8f5ee
    }
}
.editable-cell__control {
    padding:4px 7px;
    border:1.5px solid var(--grn);
    border-radius:5px;
    font-family:inherit;
    font-size:13px;
    background:#fff;
    color:var(--t1);
    width:100%
}
.editable-cell__control:focus {
    outline:2px solid var(--grn);
    outline-offset:1px
}
select.editable-cell__control {
    cursor:pointer
}
.note-cell {
    cursor:pointer;
    background:#f4f8f6;
    box-shadow:inset 0 -1px 0 #cddfd5;
    border-radius:5px;
    padding:4px 6px;
    transition:background .12s;
    min-height:28px;
    min-width:140px;
    max-width:230px;
    font-size:12px;
    vertical-align:top
}
@media (hover:hover) {
    .note-cell:hover {
        background:#e8f5ee
    }
}
.note-cell__label {
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    opacity:.55;
    margin-bottom:1px
}
.note-cell__textarea {
    width:100%;
    min-height:62px;
    font-family:inherit;
    font-size:12px;
    padding:6px;
    border:1.5px solid var(--grn);
    border-radius:5px;
    resize:vertical;
    background:#fff
}
.note-cell__textarea:focus {
    outline:2px solid var(--grn);
    outline-offset:1px
}

/* ─────────────────────────────────────────────────────────────
   Province map. Server-rendered from the provinces table; every
   state below is expressed as a class, so the SVG carries no
   colours of its own.
   ───────────────────────────────────────────────────────────── */
.province-map {
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    padding:10px 8px;
    margin-bottom:18px;
    display:flex;
    flex-direction:column;
    align-items:center
}
.province-map[hidden] {
    display:none
}
.province-map__hint {
    font-size:13px;
    font-weight:600;
    color:var(--t2);
    margin-bottom:8px;
    text-align:center
}
.province-map__canvas {
    width:100%;
    /* Wide enough to read the small provinces without crowding the panel. */
    max-width:940px;
    border-radius:6px
}
.province-map__shape {
    fill:#CFD8DC;
    stroke:#fff;
    stroke-width:1
}
.province-map__province--staffed .province-map__shape {
    fill:#4CAF50
}
.province-map__link {
    cursor:pointer;
    text-decoration:none
}
.province-map__link:hover .province-map__shape,
.province-map__link:focus-visible .province-map__shape {
    fill:#388E3C
}
.province-map__link:focus-visible {
    outline:none
}
.province-map__link:focus-visible .province-map__shape {
    stroke:var(--t1);
    stroke-width:2
}
.province-map__label {
    fill:#78909C;
    font-family:'Segoe UI',system-ui,sans-serif;
    font-weight:600;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none
}
.province-map__province--staffed .province-map__label {
    fill:#fff
}
.province-map__badge {
    fill:var(--red);
    stroke:#fff;
    stroke-width:1.5;
    pointer-events:none
}
.province-map__badge-count {
    fill:#fff;
    font-size:8px;
    font-weight:700;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none
}
.province-map__legend {
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:14px;
    font-size:12px;
    color:var(--t2);
    list-style:none
}
.province-map__legend-item {
    display:flex;
    align-items:center;
    gap:4px
}
.province-map__legend-swatch {
    width:12px;
    height:12px;
    border-radius:2px;
    background:#CFD8DC;
    display:inline-block
}
.province-map__legend-swatch--staffed {
    background:#4CAF50
}
.province-map__legend-swatch--many {
    background:var(--red)
}

@media(min-width:640px) {
    .province-map {
        padding:14px 12px
    }
    /* On a wide screen the width would make the map taller than the window,
       so the chrome above it — header, cards, tabs, hint — is subtracted and
       the map takes what is left. Narrow screens scroll instead. */
    .province-map__canvas {
        max-height:calc(100vh - 260px)
    }
}

/* Popup for multi-corr provinces */

/* SUBPAGE */
@media(max-width:680px) {
    .fg {
        grid-template-columns:1fr
    }
}
@media(max-width:640px) {
    .card {
        padding:12px
    }
    table {
        min-width:600px
    }
    .page {
        padding:10px
    }
}


/* ─────────────────────────────────────────────────────────────
   Materials screen — one correspondent's reporting period.
   Correspondents and staff share it; what differs is which
   controls the server renders, not which stylesheet applies.
   ───────────────────────────────────────────────────────────── */
.materials-screen__header {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:12px
}
.materials-screen__correspondent {
    font-size:15px;
    font-weight:600
}
.materials-screen__password {
    margin-left:auto
}
.materials-screen__period {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    padding:10px 12px;
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r)
}
.materials-screen__period-label {
    font-size:12px;
    font-weight:600;
    color:var(--t2)
}
.materials-screen__period-select {
    font-family:inherit;
    font-size:16px;
    padding:6px 8px;
    border:1px solid var(--brd);
    border-radius:6px;
    background:var(--sur);
    color:var(--t1)
}
.materials-screen__period-summary {
    margin-left:auto;
    font-size:12px;
    color:var(--t2)
}
.materials-screen__period-total {
    font-family:'Courier New',monospace;
    color:var(--grn);
    font-weight:700
}
.materials-screen__locked {
    padding:10px 14px;
    margin-bottom:12px;
    background:#f0f4f8;
    border-radius:6px;
    font-size:12px;
    color:var(--t2)
}

.status-badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    padding:3px 10px;
    border-radius:20px;
    border:1px solid var(--brd);
    background:#f5f5f5;
    color:var(--t2)
}
.status-badge--sent,
.status-badge--verified {
    background:#E8F5E9;
    border-color:#A5D6A7;
    color:var(--sp)
}
.status-badge--pending {
    background:#FFF8E1;
    border-color:#FFE082;
    color:#E65100
}

/* Category tabs. Each tab carries its category's accent as a custom
   property, the same way the tariff panel does. */
.category-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:14px
}
.category-tabs__tab {
    --category-accent:var(--t2);
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    font-family:inherit;
    font-size:13px;
    text-decoration:none;
    color:var(--t2);
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:20px;
    cursor:pointer
}
.category-tabs__tab:hover {
    border-color:var(--category-accent)
}
.category-tabs__tab--travel {
    --category-accent:#5E35B1
}
.category-tabs__tab--active {
    color:var(--category-accent);
    border-color:var(--category-accent);
    font-weight:600
}
.category-tabs__dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--category-accent);
    display:inline-block
}
.category-tabs__badge {
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:11px;
    font-weight:700;
    padding:1px 7px;
    border-radius:10px;
    background:#eef2f6;
    color:var(--t2)
}
.category-tabs__badge--note {
    background:#FFF3E0;
    color:#E65100
}
.category-tabs__badge--locked {
    background:#E8F5E9;
    color:var(--sp)
}
.category-tabs__badge--travel {
    background:#EDE7F6;
    color:#5E35B1
}

.materials-table {
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    overflow-x:auto
}
.materials-table__table {
    width:100%;
    border-collapse:collapse;
    font-size:13px
}
.materials-table__row--flagged {
    background:#FFFDE7
}
.materials-table__title {
    max-width:260px
}
.materials-table__type,
.materials-table__date {
    white-space:nowrap
}
.materials-table__show {
    font-size:12px
}
.materials-table__fee-heading,
.materials-table__fee {
    text-align:right;
    white-space:nowrap;
    font-family:'Courier New',monospace;
    font-weight:700
}
.note-cell__own--locked {
    cursor:default;
    color:var(--t2)
}
.materials-table__actions {
    width:34px;
    text-align:right
}
.materials-table__delete {
    padding:2px 5px;
    background:none;
    border:none;
    border-radius:4px;
    font-size:13px;
    line-height:1;
    opacity:.35;
    cursor:pointer
}
.materials-table__delete:hover,
.materials-table__delete:focus-visible {
    background:#FFEBEE;
    opacity:1
}
.materials-table__fee-manual {
    margin-left:3px;
    color:var(--t2);
    font-size:11px;
    cursor:help
}
.materials-table__empty {
    text-align:center;
    padding:48px 12px;
    color:#bbb
}
.editable-cell--renamed {
    border-bottom:1px dotted var(--t2)
}
.note-cell__other {
    font-size:11px;
    color:var(--t2);
    margin-bottom:3px
}
.note-cell__own {
    display:inline-block;
    cursor:pointer;
    border-radius:4px;
    padding:2px 5px;
    font-size:12px
}
.note-cell__own:hover {
    background:#e8f5ee
}

.fee-breakdown {
    margin-top:12px;
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    overflow:hidden
}
.fee-breakdown__title {
    padding:10px 16px;
    background:#f8fafc;
    border-bottom:1px solid var(--brd);
    font-size:11px;
    font-weight:700;
    color:#555;
    text-transform:uppercase;
    letter-spacing:.05em
}
.fee-breakdown__list {
    display:grid;
    grid-template-columns:1fr auto;
    row-gap:8px;
    column-gap:16px;
    align-items:center;
    padding:14px 16px;
    font-size:13px
}
.fee-breakdown__amount {
    font-family:'Courier New',monospace;
    font-weight:700;
    text-align:right
}
.fee-breakdown__label--total {
    font-weight:700;
    font-size:14px;
    border-top:1px solid var(--brd);
    padding-top:8px
}
.fee-breakdown__amount--total {
    font-size:17px;
    color:var(--red);
    border-top:1px solid var(--brd);
    padding-top:8px
}

.report-status {
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
    margin-top:14px;
    padding:16px 18px;
    background:#fafafa;
    border:2px dashed var(--brd);
    border-radius:var(--r)
}
.report-status--sent {
    background:#E8F5E9;
    border:1px solid #A5D6A7
}
.report-status--empty {
    background:#fff8e1;
    border:1px solid #ffe082;
    font-size:12px;
    color:#555
}
.report-status__title {
    font-size:14px
}
.report-status__note {
    font-size:12px;
    color:var(--t2)
}

.verify-bar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-top:16px;
    padding:16px;
    background:#fafafa;
    border:1px solid var(--brd);
    border-radius:var(--r)
}
.verify-bar--locked {
    background:#F1F8E9;
    border-color:#A5D6A7
}
.verify-bar__text {
    flex:1 1 240px;
    display:flex;
    flex-direction:column;
    gap:2px
}
.verify-bar__title {
    font-size:13px
}
.verify-bar__note {
    font-size:11px;
    color:var(--t2)
}

/* Пътен лист */
.travel-log {
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    padding:16px
}
.travel-log__title {
    font-size:15px;
    color:#5E35B1;
    margin-bottom:4px
}
.travel-log__note {
    font-size:12px;
    color:var(--t2);
    margin-bottom:14px
}
.travel-log__empty {
    padding:24px;
    text-align:center;
    color:#aaa;
    font-size:13px;
    background:#f8fafc;
    border:1px dashed var(--brd);
    border-radius:8px
}
.travel-log__table-wrapper {
    overflow-x:auto
}
.travel-log__table {
    width:100%;
    border-collapse:collapse;
    font-size:13px
}
.travel-log__number-heading,
.travel-log__number,
.travel-log__distance,
.travel-log__fuel,
.travel-log__total-label {
    text-align:right
}
.travel-log__index {
    color:#aaa;
    font-size:12px
}
.travel-log__place {
    font-weight:600
}
.travel-log__distance {
    font-family:'Courier New',monospace;
    font-weight:700;
    color:#5E35B1
}
.travel-log__fuel {
    font-family:'Courier New',monospace;
    font-weight:600;
    color:#E65100
}
.travel-log__delete {
    background:none;
    border:none;
    color:#ccc;
    cursor:pointer;
    font-size:18px;
    line-height:1
}
.travel-log__delete:hover {
    color:var(--red)
}
.travel-log__formula {
    margin-top:12px;
    padding:12px 16px;
    background:#FFF3E0;
    border:1px solid #FFCC80;
    border-radius:8px;
    font-size:12px;
    color:#E65100
}
.travel-log__locked {
    margin-top:12px;
    padding:10px 14px;
    background:#f0f4f8;
    border-radius:6px;
    font-size:12px;
    color:var(--t2)
}
.travel-form {
    margin-top:14px;
    padding:16px;
    background:#EDE7F6;
    border:1px solid #CE93D8;
    border-radius:8px
}
.travel-form__title {
    font-size:13px;
    color:#5E35B1;
    margin-bottom:12px
}
.travel-form__grid,
.material-form__grid {
    display:grid;
    grid-template-columns:1fr;
    gap:10px
}
.travel-form__actions,
.material-form__actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:12px
}

/* New-material form: a <details> so opening it needs no script. */
.material-form {
    --category-accent:var(--t2);
    background:var(--sur);
    border:1px solid var(--brd);
    border-left:3px solid var(--category-accent);
    border-radius:var(--r);
    padding:12px 14px;
    margin-bottom:12px
}
.material-form__summary {
    font-size:14px;
    font-weight:600;
    color:var(--category-accent);
    cursor:pointer
}
.material-form__period {
    margin:10px 0;
    padding:7px 12px;
    background:#E3F2FD;
    border:1px solid #90CAF9;
    border-radius:6px;
    font-size:12px;
    color:#0D47A1
}
.field--wide {
    grid-column:1/-1
}
.field__select,
.field__textarea {
    width:100%;
    font-family:inherit;
    font-size:16px;
    padding:8px 10px;
    border:1px solid var(--brd);
    border-radius:6px;
    background:var(--sur);
    color:var(--t1)
}
.field__textarea {
    min-height:64px;
    resize:vertical
}

@media(min-width:640px) {
    .travel-form__grid,
    .material-form__grid {
        grid-template-columns:1fr 1fr
    }
    .materials-screen__period-select,
    .field__select,
    .field__textarea {
        font-size:13px
    }
}

/* ─────────────────────────────────────────────────────────────
   Period bar — the reporting-cycle picker above the staff-wide
   tables. The materials screen has its own, narrower one.
   ───────────────────────────────────────────────────────────── */
.period-bar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    padding:10px 12px;
    background:#f8fafc;
    border:1px solid var(--brd);
    border-radius:var(--r)
}
.period-bar__label {
    font-size:12px;
    font-weight:600;
    color:var(--t2)
}
.period-bar__select {
    font-family:inherit;
    font-size:16px;
    padding:6px 8px;
    border:1px solid var(--brd);
    border-radius:6px;
    background:var(--sur);
    color:var(--t1)
}

/* Staff-wide tables: one row per correspondent, money on the right. */
.data-table {
    overflow-x:auto;
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r)
}
.data-table__table {
    width:100%;
    border-collapse:collapse;
    font-size:13px
}
.data-table__table tfoot td {
    font-weight:700;
    border-top:2px solid var(--brd);
    background:#f8fafc
}
.data-table__name {
    font-weight:600
}
.data-table__sub {
    font-size:11px;
    color:var(--t2)
}
.data-table__index {
    color:#bbb;
    font-size:12px
}
.data-table__amount-heading,
.data-table__amount,
.data-table__total-label {
    text-align:right;
    white-space:nowrap
}
.data-table__amount {
    font-family:'Courier New',monospace;
    font-weight:600
}
.data-table__travel,
.data-table__travel-heading {
    font-family:'Courier New',monospace;
    font-size:12px;
    text-align:right;
    white-space:nowrap
}
.data-table__travel-heading {
    color:var(--t2)
}
.data-table__status {
    font-size:11px;
    color:var(--t2);
    white-space:nowrap
}
.data-table__status--verified {
    color:var(--sp);
    font-weight:600
}
.data-table__status--not_submitted {
    color:#b0b6bd;
    font-style:italic
}
.data-table__amount-heading--allowance,
.data-table__amount--allowance {
    color:#E65100;
    text-align:center
}
.data-table__amount-heading--total,
.data-table__amount--total {
    color:var(--red);
    font-weight:700
}
.data-table__allowance {
    text-align:center;
    white-space:nowrap
}
.data-table__allowance-input {
    width:96px;
    padding:5px 8px;
    border:1px solid var(--brd);
    border-radius:5px;
    font-family:'Courier New',monospace;
    font-size:16px;
    text-align:right;
    color:#E65100;
    font-weight:600
}
.data-table__allowance-input:focus {
    outline:none;
    border-color:#FF6F00
}
.data-table__set-mark {
    font-size:10px;
    color:var(--t2);
    margin-left:4px
}
.data-table__empty {
    text-align:center;
    padding:36px 12px;
    color:#bbb
}

.fuel__note,
.fuel__footnote {
    font-size:12px;
    color:var(--t2);
    margin-bottom:14px
}
.fuel__note {
    margin-top:14px;
    font-weight:700;
    text-align:center
}
.fuel__footnote {
    margin:10px 0 0
}

/* Monthly export */
.export-box {
    margin-top:16px;
    padding:18px;
    background:#F1F8E9;
    border:1px solid #A5D6A7;
    border-radius:10px
}
.export-box__title {
    font-size:15px;
    color:var(--sp);
    margin-bottom:12px
}
.export-box__controls {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px
}
.export-box__note {
    margin-top:10px;
    font-size:12px;
    color:#555
}

/* Province chooser */
.province-chooser__header {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:8px
}
.province-chooser__name {
    font-size:15px;
    font-weight:600
}
.province-chooser__hint {
    font-size:13px;
    color:var(--t2);
    margin-bottom:16px
}
.province-chooser__grid {
    display:grid;
    grid-template-columns:1fr;
    gap:12px
}
.correspondent-card {
    text-decoration:none;
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    padding:16px;
    text-align:left;
    font-family:inherit;
    color:var(--t1);
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    cursor:pointer
}
.correspondent-card:hover {
    box-shadow:0 4px 16px rgba(0,107,60,.15)
}
.correspondent-card__company {
    font-size:15px;
    font-weight:700
}
.correspondent-card__city {
    font-size:12px;
    color:var(--t2);
    margin-bottom:8px
}
.correspondent-card__figures {
    display:flex;
    gap:8px
}
.correspondent-card__figure {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:8px 12px;
    background:#f5f5f5;
    border-radius:6px
}
.correspondent-card__figure--period {
    background:#E8F5E9;
    color:var(--grn)
}
.correspondent-card__figure--fees {
    background:#E3F2FD;
    color:var(--blue)
}
.correspondent-card__value {
    font-size:19px;
    font-weight:700
}
.correspondent-card__label {
    font-size:11px;
    color:inherit;
    opacity:.75
}
.correspondent-card__notes {
    margin-top:8px;
    padding:4px 8px;
    font-size:11px;
    color:#E65100;
    background:#FFF3E0;
    border-radius:4px
}
.correspondent-card__open {
    margin-top:10px;
    text-align:right;
    font-size:12px;
    font-weight:500;
    color:var(--grn)
}

/* Password change */
.password-change {
    max-width:480px;
    margin:0 auto;
    padding-top:20px
}
.password-change__header {
    margin-bottom:16px
}
.password-change__card {
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    padding:22px
}
.password-change__title {
    font-size:16px;
    margin-bottom:18px
}
.password-change__rules {
    margin-top:12px;
    padding:10px;
    font-size:12px;
    color:var(--t2);
    background:#f8f8f8;
    border-radius:6px
}
.password-strength {
    margin-top:6px
}
.password-strength__bar {
    height:5px;
    background:#eee;
    border-radius:3px;
    overflow:hidden
}
.password-strength__fill {
    height:100%;
    width:0;
    border-radius:3px;
    transition:width .15s,background .15s
}
.password-strength__label {
    font-size:11px;
    margin-top:3px
}
.password-strength--weak .password-strength__fill {
    background:#ef4444
}
.password-strength--weak .password-strength__label {
    color:#ef4444
}
.password-strength--poor .password-strength__fill {
    background:#f97316
}
.password-strength--poor .password-strength__label {
    color:#f97316
}
.password-strength--fair .password-strength__fill {
    background:#eab308
}
.password-strength--fair .password-strength__label {
    color:#eab308
}
.password-strength--good .password-strength__fill {
    background:#84cc16
}
.password-strength--good .password-strength__label {
    color:#84cc16
}
.password-strength--strong .password-strength__fill {
    background:#22c55e
}
.password-strength--strong .password-strength__label {
    color:#22c55e
}

@media(min-width:640px) {
    .period-bar__select {
        font-size:13px
    }
    .data-table__allowance-input {
        font-size:13px
    }
    .province-chooser__grid {
        grid-template-columns:repeat(auto-fill,minmax(260px,1fr))
    }
}
.field__hint {
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
    opacity:.7
}

/* ─────────────────────────────────────────────────────────────
   Профил — the signed-in person's own account.
   ───────────────────────────────────────────────────────────── */
.profile {
    max-width:520px;
    margin:0 auto;
    padding-top:20px
}
.profile__header {
    margin-bottom:16px
}
.profile__card {
    background:var(--sur);
    border:1px solid var(--brd);
    border-radius:var(--r);
    padding:22px
}
.profile__title {
    font-size:16px;
    margin-bottom:18px
}
.profile__actions {
    display:flex;
    justify-content:flex-end;
    margin-bottom:18px
}
.profile__facts {
    display:grid;
    grid-template-columns:1fr;
    gap:2px;
    padding-top:16px;
    border-top:1px solid var(--brd)
}
.profile__fact-label {
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--t2)
}
.profile__fact {
    margin-bottom:12px;
    font-size:14px
}
.profile__note {
    font-size:12px;
    color:var(--t2);
    background:#f8fafc;
    border-radius:6px;
    padding:10px 12px
}
.profile__password-link {
    margin-top:16px
}
.password-change__external {
    padding:14px 16px;
    background:#E3F2FD;
    border:1px solid #90CAF9;
    border-radius:8px;
    font-size:13px;
    color:#0D47A1;
    margin-bottom:12px
}
.password-change__note {
    font-size:12px;
    color:var(--t2)
}

/* ─────────────────────────────────────────────────────────────
   Sub-tabs — a section picker inside a panel, one level below
   the main tab bar it sits under.
   ───────────────────────────────────────────────────────────── */
.sub-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:16px;
    border-bottom:1px solid var(--brd)
}
.sub-tabs__tab {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    font-size:13px;
    color:var(--t2);
    text-decoration:none;
    border-bottom:2px solid transparent;
    margin-bottom:-1px
}
.sub-tabs__tab:hover {
    color:var(--t1)
}
.sub-tabs__tab--active {
    color:var(--grn);
    font-weight:600;
    border-bottom-color:var(--grn)
}
.password-change__required {
    padding:14px 16px;
    margin-bottom:16px;
    background:#FFF8E1;
    border:1px solid #FFE082;
    border-radius:8px;
    font-size:13px;
    color:#E65100
}