:root {
    /* Ensure native controls (month/date pickers) are rendered for a dark UI.
       Otherwise some browsers can show black text/icons on dark backgrounds. */
    color-scheme: dark;

    --color-bg: #0f172a;
    --color-surface: #111827;
    --color-surface-soft: #1f2937;
    --color-border: #1f2937;
    --color-text-main: #e5e7eb;
    --color-text-muted: #9ca3af;
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-danger: #ef4444;
    --color-success: #22c55e;
    --color-warning: #eab308;

    --radius-md: 10px;
    --radius-lg: 16px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 20px;
    --spacing-xl: 32px;

    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.6);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
    color: var(--color-text-main);
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
}

.app {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(15,23,42,.9), rgba(30,64,175,.7));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.brand-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(15,23,42,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-title {
    font-weight: 600;
    font-size: 18px;
}

.brand-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    flex: 1;
    justify-content: center;
}

.nav-group {
    position: relative;
}

/* Navigation items (desktop/base)
   NOTE: keep specificity consistent so mobile overrides work reliably. */
.nav-link,
.nav-group-label {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.28);
    background: rgba(15,23,42,0.35);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-main);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.nav-link {
    text-decoration: none;
}

.nav-group-label {
    cursor: pointer;
}

.nav-group-label::after {
    content: "▾";
    font-size: 14px;
    line-height: 1;
    opacity: 0.85;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.nav-group-label[aria-expanded="true"]::after {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-link:hover,
.nav-group-label:hover {
    background: rgba(148,163,184,0.12);
    border-color: rgba(96,165,250,0.55);
}

.nav-link:focus-visible,
.nav-group-label:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
}

.nav-link.is-active {
    background: rgba(30,64,175,0.28);
    border-color: rgba(96,165,250,0.65);
}

.nav-group.nav-group--active .nav-group-label {
    background: rgba(30,64,175,0.22);
    border-color: rgba(96,165,250,0.55);
}

.nav-group-menu {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 8px;
    margin-top: 4px;
    border-radius: 14px;
    background: rgba(15,23,42,0.98);
    box-shadow: 0 18px 45px rgba(15,23,42,0.9);
    display: flex;
    flex-direction: column;
    gap: 6px;
    white-space: nowrap;
    z-index: 20;

    opacity: 0;
    transform: translateY(6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}

/* Desktop dropdown items */
.nav-group-menu a {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--color-text-main);
    white-space: nowrap;
    background: rgba(148,163,184,0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-group-menu a:hover,
.nav-group-menu a:focus-visible {
    background: rgba(30,64,175,0.18);
    border-color: rgba(96,165,250,0.35);
    outline: none;
}

.nav-group-menu a.is-active {
    background: rgba(30,64,175,0.26);
    border-color: rgba(96,165,250,0.55);
}


/* Desktop only: hover bridge so the dropdown doesn't close while moving the mouse */
@media (min-width: 769px) {
    .nav-group-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }
}
.nav-group:hover .nav-group-menu,
.nav-group:focus-within .nav-group-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.nav-toggle {
    display: none;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.4);
    background: rgba(15,23,42,0.7);
    color: var(--color-text-main);
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.nav-toggle:hover {
    background: rgba(30,64,175,0.8);
    border-color: var(--color-primary);
}

.nav-toggle--open {
    transform: rotate(90deg);
}


/* (Removed generic .app-nav a styling)
   It caused conflicts between "Главное" and expandable groups on mobile. */

.user-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 13px;
}

.user-badge > * {
    min-width: 0;
}

.user-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.user-role {
    color: var(--color-text-muted);
    font-size: 12px;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.app-footer {
    font-size: 12px;
    color: var(--color-text-muted);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(15,23,42,0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    text-align: left;
}

.footer-support {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-support a {
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px dashed rgba(148,163,184,0.35);
}

.footer-support a:hover {
    color: var(--color-text-main);
    border-bottom-color: var(--color-primary);
}

.footer-sep {
    opacity: 0.55;
}

.footer-user {
    margin-left: auto;
    white-space: nowrap;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: 8px 14px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, transform .1s ease, box-shadow .1s ease;
    white-space: nowrap;
}

/* Prevent accidental double-click spam on navigation buttons (e.g. Refresh). */
a.btn.is-busy {
    pointer-events: none;
    opacity: 0.7;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn.small {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid rgba(148,163,184,0.4);
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.btn-secondary {
    background: var(--color-surface-soft);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.btn-danger {
    background: var(--color-danger);
    color: white;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* Cards & layout */

.card {
    background: radial-gradient(circle at top left, rgba(15,23,42,.9), rgba(15,23,42,.95));
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(15,23,42,0.9);
}

.card-soft {
    background: linear-gradient(145deg, #020617, #020617, #111827);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-soft);
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* allow long titles/strings to shrink inside flex containers (prevents horizontal overflow on mobile) */
.card-header > * {
    min-width: 0;
}

.card-title {
    font-size: 16px;
    margin: 0 0 var(--spacing-sm);
}

.page-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 22px;
    font-weight: 600;
}

.page-subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

.grid {
    display: grid;
    gap: var(--spacing-lg);
}

/* Worker dashboard layout (mobile-first ordering) */
.worker-dashboard-grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 991.98px) {
    .worker-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: var(--spacing-sm);
}

.profile-card.is-collapsed .profile-content {
    display: none;
}

.grid-2 {
    grid-template-columns: 2fr 3fr;
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991.98px) {
    .app {
        padding: var(--spacing-lg);
    }
    .app-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Forms */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form.inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

label {
    font-size: 13px;
    color: var(--color-text-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="month"],
input[type="date"],
select,
textarea {
    background: var(--color-surface-soft);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    color: var(--color-text-main);
    font-size: 14px;
    outline: none;
}

/* Make placeholders and native pickers readable on dark UI */
input::placeholder,
textarea::placeholder {
    color: rgba(226, 232, 240, 0.65);
}

/* Month/Date pickers: keep readable text + visible calendar icon on dark background */
input[type="month"],
input[type="date"] {
    color-scheme: dark;
}

input[type="month"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit {
    color: var(--color-text-main);
    -webkit-text-fill-color: var(--color-text-main);
}

input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.7);
}

textarea {
    resize: vertical;
}

.field-hint {
    font-size: 11px;
    color: var(--color-text-muted);
}

.field-error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #ff6b6b;
}

/* Auth pages */

.auth-page {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: linear-gradient(145deg, #020617, #020617, #111827);
    border-radius: 24px;
    padding: 28px 28px 32px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(30,64,175,.7);
}

.auth-footer-text {
    margin-top: var(--spacing-md);
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

/* Tables */

.table-wrapper {
    border-radius: var(--radius-md);
    border: 1px solid rgba(15,23,42,0.9);
    background: radial-gradient(circle at top, #020617, #020617, #020617);
    overflow-x: auto;
    overflow-y: hidden;
    /* mobile: smoother horizontal scroll */
    -webkit-overflow-scrolling: touch;
}

/* Default tables should try to fit the screen; wide tables will naturally overflow & scroll */
.table-wrapper table {
    width: 100%;
    min-width: 100%;
}

/* Force wide/administrative tables to stay in one line and scroll horizontally */
.table-wrapper.table-nowrap table {
    width: max-content;
    min-width: 900px;
}

.table-wrapper.table-nowrap th,
.table-wrapper.table-nowrap td {
    white-space: nowrap;
}

/* Prevent long strings (emails, IBAN) from breaking the layout */
.table-wrapper th,
.table-wrapper td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table.table thead {
    background: rgba(15,23,42,0.9);
}

table.table th,
table.table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(31,41,55,0.8);
    text-align: left;
    vertical-align: top;
    /* stop long strings (emails, IBAN, etc.) from breaking mobile layout */
    overflow-wrap: anywhere;
    word-break: break-word;
}

table.table th {
    font-weight: 500;
    color: var(--color-text-muted);
}

table.table tr:nth-child(even) td {
    background: rgba(15,23,42,0.4);
}

/* --- Workers table: fit on desktop WITHOUT horizontal scroll --- */
@media (min-width: 1024px){
    /* IMPORTANT: users asked to avoid horizontal scroll bars.
       We keep the table at 100% width and let content wrap inside columns. */
    /* NOTE: We no longer hide overflow here, because it causes columns to be clipped.
       For narrower screens we switch to card layout instead of cropping/scrolling. */
    /* NOTE: this behavior is ONLY for the big coordinator workers table.
       Other pages may also use .table-fit-desktop, so we keep this scoped. */
    .table-wrapper.workers-table-fit-desktop{ overflow-x: visible; }
    .table-wrapper.workers-table-fit-desktop table{ min-width: 0; }

    table.workers-table{
        table-layout: fixed;
        width: 100%;
    }

    /* Slightly tighter paddings so columns fit comfortably */
    table.workers-table th,
    table.workers-table td{
        padding: 7px 8px;
    }

    /* Column widths tuned for typical laptop screens (12 columns) */
    table.workers-table th:nth-child(1),
    table.workers-table td:nth-child(1){ width: 56px; }
    table.workers-table th:nth-child(2),
    table.workers-table td:nth-child(2){ width: 110px; }
    table.workers-table th:nth-child(3),
    table.workers-table td:nth-child(3){ width: 240px; }
    table.workers-table th:nth-child(4),
    table.workers-table td:nth-child(4){ width: 190px; }
    table.workers-table th:nth-child(5),
    table.workers-table td:nth-child(5){ width: 78px; }
    table.workers-table th:nth-child(6),
    table.workers-table td:nth-child(6){ width: 110px; }
    table.workers-table th:nth-child(7),
    table.workers-table td:nth-child(7){ width: 90px; }
    table.workers-table th:nth-child(8),
    table.workers-table td:nth-child(8){ width: 120px; }
    table.workers-table th:nth-child(9),
    table.workers-table td:nth-child(9){ width: 150px; }
    table.workers-table th:nth-child(10),
    table.workers-table td:nth-child(10){ width: 130px; }
    table.workers-table th:nth-child(11),
    table.workers-table td:nth-child(11){ width: 110px; }
    table.workers-table th:nth-child(12),
    table.workers-table td:nth-child(12){ width: 120px; }

    /* Allow long text to wrap inside its column instead of expanding the table */

/* Make key identity columns compact (single-line with ellipsis)
   so the row doesn't "разъезжаться" on desktops. */
table.workers-table td:nth-child(2),
table.workers-table td:nth-child(3),
table.workers-table td:nth-child(4),
table.workers-table td:nth-child(9){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    word-break: normal;
}
table.workers-table td:nth-child(3){ font-size: 13px; }
}

/* --- Workers list: responsive cards for laptops where the table would be clipped --- */
.workers-cards{ display: none; }

@media (max-width: 1199.98px){
    .table-wrapper.workers-table-fit-desktop{ display: none; }
    .workers-cards{
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: var(--spacing-md);
    }
    .worker-card{
        padding: 12px;
        border-radius: var(--radius-md);
        background: var(--color-surface-soft);
        border: 1px solid rgba(15,23,42,0.7);
        box-shadow: var(--shadow-soft);
    }
    .worker-card-top{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }
    .worker-card-name{ font-weight: 700; font-size: 14px; }
    .worker-card-sub{ color: var(--color-text-muted); font-size: 12px; }
    .worker-card-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;
        margin-top: 10px;
    }
    .worker-card-row{ display: flex; justify-content: space-between; gap: 12px; }
    .worker-card-label{ color: var(--color-text-muted); font-size: 12px; }
    .worker-card-value{ font-weight: 600; text-align: right; overflow-wrap: anywhere; }
    .worker-card-signals{ margin-top: 10px; display:flex; flex-wrap: wrap; gap: 10px; }

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

/* --- Worker unified card helpers --- */
.worker-profile{
    padding: 18px;
}

.worker-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 14px;
    padding: 14px 14px 12px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(15,23,42,.2));
    border: 1px solid rgba(148,163,184,0.18);
    margin-bottom: 14px;
}

.worker-ident{ min-width: 0; }

.worker-name-row{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: wrap;
}

.worker-name{
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: .2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-meta{
    margin-top: 6px;
    display:flex;
    align-items:center;
    gap: 8px;
    flex-wrap: wrap;
}

.worker-meta .sep{ color: rgba(148,163,184,0.5); }

.worker-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content:flex-end;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    border: 1px solid rgba(148,163,184,0.28);
    background: rgba(15,23,42,0.35);
    color: var(--color-text-main);
}

.badge-success{
    border-color: rgba(34,197,94,.35);
    background: rgba(34,197,94,.12);
}

.badge-muted{
    border-color: rgba(148,163,184,.25);
    background: rgba(148,163,184,.10);
    color: var(--color-text-muted);
}

.section-head{
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.badges{ display:flex; gap: 8px; flex-wrap: wrap; justify-content:flex-end; }

.summary-tiles{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.summary-tile{
    display:block;
    background: rgba(17,24,39,0.85);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: var(--radius-md);
    padding: 12px 12px 10px;
    text-decoration: none;
    color: var(--color-text-main);
    box-shadow: 0 10px 22px rgba(2,6,23,.35);
    transition: transform 0.10s ease, border-color 0.15s ease, filter 0.15s ease;
}

.summary-tile:hover{
    transform: translateY(-1px);
    border-color: rgba(59,130,246,0.35);
    filter: brightness(1.03);
}

.summary-tile.is-static{
    cursor: default;
}

.summary-tile.is-static:hover{
    transform: none;
    border-color: rgba(148,163,184,0.18);
    filter: none;
}

.tile-top{ display:flex; align-items:center; gap: 8px; margin-bottom: 8px; }
.tile-icon{ font-size: 16px; line-height: 1; }
.tile-label{ font-size: 12px; color: var(--color-text-muted); }
.tile-value{ font-weight: 750; font-size: 14px; letter-spacing: .2px; }

.section-meta{
    margin-top: 12px;
    font-size: 12px;
}

.note-compose{
    display:flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.note-compose textarea{
    width: 100%;
    resize: vertical;
}

.note-compose-actions{ display:flex; justify-content:flex-end; }

.timeline{
    position: relative;
    margin-top: 14px;
    padding-left: 14px;
    display:flex;
    flex-direction: column;
    gap: 12px;
}

.timeline::before{
    content:"";
    position:absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: rgba(148,163,184,0.18);
    border-radius: 999px;
}

.timeline-item{
    position: relative;
    padding: 10px 12px 10px 14px;
    background: rgba(17,24,39,0.70);
    border: 1px solid rgba(148,163,184,0.16);
    border-radius: var(--radius-md);
}

.timeline-item::before{
    content:"";
    position:absolute;
    left: -14px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(59,130,246,0.95);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.timeline-meta{ display:flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 6px; }
.timeline-text{ white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 991.98px){
    .worker-header{ flex-direction: column; align-items: flex-start; }
    .worker-actions{ width: 100%; justify-content:flex-start; }
    .summary-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.mini-stat{
    display:block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    text-decoration: none;
    color: var(--color-text-main);
}

.mini-stat:hover{ filter: brightness(1.02); }

.mini-stat-label{
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.mini-stat-value{
    font-weight: 700;
    font-size: 14px;
}

.notes-list{ display:flex; flex-direction:column; gap: 12px; }
.note-item{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}
.note-meta{ margin-bottom: 6px; }
.note-text{ white-space: pre-wrap; overflow-wrap: anywhere; }

/* Small commute toggle used inside "Сигналы" cell (so it's always visible) */
.commute-mini-form{ display: inline; }
.commute-mini-btn{
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
}

/* Misc */

.text-muted {
    color: var(--color-text-muted);
}

.text-strong {
    font-weight: 500;
}

.metric-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(148,163,184,0.5);
    font-size: 12px;
}

.metric-label {
    color: var(--color-text-muted);
}

.metric-value {
    font-weight: 600;
}

.total-badge {
    margin-top: var(--spacing-md);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15,23,42,0.8);
    display: inline-flex;
    gap: 8px;
    font-size: 13px;
}

.flash-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--spacing-md);
}

.back-home-bar {
    margin-bottom: var(--spacing-md);
}

.flash,
.alert {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    border: 1px solid transparent;
}

.flash-success,
.alert-success {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.4);
}

.flash-error,
.flash-danger,
.alert-error,
.alert-danger {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.4);
}

.flash-warning,
.alert-warning {
    background: rgba(234,179,8,0.12);
    border-color: rgba(234,179,8,0.4);
}

.flash-info,
.alert-info {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.4);
}

/* Optional: alert text spacing for inline alerts in templates */
.alert {
    margin: 0;
}

/* Empty state (reusable component) */
.empty-state {
    padding: 18px 16px;
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(148,163,184,0.35);
    background: rgba(15,23,42,0.35);
    text-align: center;
}

.empty-state-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 8px;
}

.empty-state-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.empty-state-text {
    color: var(--color-text-muted);
    font-size: 13px;
    max-width: 640px;
    margin: 0 auto;
}

.empty-state-actions {
    margin-top: 12px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.news-card {
    background: radial-gradient(circle at top left, rgba(15,23,42,.9), rgba(15,23,42,.95));
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border: 1px solid rgba(31,41,55,0.9);
}

.news-title {
    margin: 0 0 4px;
    font-size: 17px;
}

.news-short {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

.news-meta {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.news-article-full {
    margin-top: var(--spacing-md);
    line-height: 1.6;
    font-size: 14px;
}

.news-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-sm);
}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-danger);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid transparent;
}

.status-confirmed {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.5);
    color: var(--color-success);
}

.status-approved {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.5);
    color: var(--color-success);
}

.status-rejected {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.5);
    color: var(--color-danger);
}

.status-pending {
    background: rgba(234,179,8,0.12);
    border-color: rgba(234,179,8,0.5);
    color: var(--color-warning);
}

.status-closed {
    background: rgba(148,163,184,0.12);
    border-color: rgba(148,163,184,0.5);
    color: rgba(203,213,225,0.95);
}


.status-accounting {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.5);
    color: var(--color-primary-dark);
}

/* --- Tabs (Active / Archive) ------------------------------------------ */
.tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(226,232,240,0.9);
    text-decoration: none;
    font-size: 13px;
    background: rgba(255,255,255,0.04);
}

.tab.is-active {
    border-color: rgba(59,130,246,0.45);
    background: rgba(59,130,246,0.12);
    color: rgba(226,232,240,0.98);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
    height: 18px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

.link-muted {
    cursor: pointer;
    color: rgba(148,163,184,0.95);
    font-size: 12px;
}

.inline-details summary::-webkit-details-marker { display: none; }
.inline-details summary { list-style: none; }

.status-paid {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.5);
    color: var(--color-success);
}

/* --- Filter chips (status quick filters) --- */
.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0 14px 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
}

.filter-chip:hover {
    background: rgba(255,255,255,0.10);
}

.filter-chip.is-active {
    border-color: rgba(59,130,246,0.55);
    background: rgba(59,130,246,0.10);
}

.chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,255,255,0.10);
    color: var(--color-text);
}

/* --- Table column picker --- */
.table-ui-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 8px 0;
}

.table-ui-left { flex: 1; }
.table-ui-right { position: relative; }

.table-col-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    max-width: 80vw;
    background: rgba(20,20,20,0.96);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    display: none;
    z-index: 20;
}

.table-col-menu.is-open { display: block; }

.table-col-title {
    font-size: 12px;
    color: var(--color-muted);
    margin-bottom: 8px;
}

/* Small confirmation text inside "Колонки" menu */
.table-col-flash{
    font-size: 12px;
    color: var(--color-success);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: -2px;
    margin-bottom: 6px;
    transition: opacity .15s ease, max-height .15s ease;
}
.table-col-flash.is-show{
    opacity: 1;
    max-height: 20px;
}

/* When user changed checkboxes but didn't click "Применить" yet */
.table-col-flash.is-dirty{
    color: var(--color-warning);
}

.table-col-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow: auto;
    padding-right: 4px;
}

.table-col-item {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.table-col-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    gap: 8px;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: rgba(20,20,20,0.96);
    padding-top: 8px;
    padding-bottom: 2px;
}

.is-hidden-col { display: none !important; }




/* --- Responsive utility helpers (consistent desktop/tablet/mobile toggles) --- */
.only-mobile { display: none; }
.only-desktop { display: block; }

@media (max-width: 991.98px) {
    .only-mobile { display: block; }
    .only-desktop { display: none; }
}

/* --- Mobile helpers: logout button + stacked cards for tables --- */

.mobile-logout {
    display: none;
    margin-bottom: var(--spacing-sm);
    text-align: right;
}

@media (max-width: 991.98px) {
    .mobile-logout {
        display: block;
    }
}

/* Desktop tables vs mobile cards */
.table-responsive-desktop {
    width: 100%;
}

.hours-mobile,
.salary-mobile {
    display: none;
}

.advances-mobile {
    display: none;
}

@media (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
    .table-responsive-desktop {
        display: none;
    }

    .hours-mobile,
    .salary-mobile,
    .advances-mobile {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: var(--spacing-md);
    }

    .hours-item,
    .salary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border-radius: var(--radius-md);
        background: var(--color-surface-soft);
        border: 1px solid rgba(15,23,42,0.7);
        font-size: 13px;
    }

    .hours-label,
    .salary-label {
        color: var(--color-text-muted);
        margin-right: 12px;
    }

    .hours-value,
    .salary-value {
        font-weight: 500;
        text-align: right;
    }

    .advance-item {
        padding: 10px 12px;
        border-radius: var(--radius-md);
        background: var(--color-surface-soft);
        border: 1px solid rgba(15,23,42,0.7);
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
    }

    .advance-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .advance-label {
        color: var(--color-text-muted);
    }

    .advance-value {
        font-weight: 600;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .advance-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 6px;
    }
}


/* --- Global mobile layout: unify “capec” pages (tables + headers + toolbars) --- */

@media (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
    /* Headers with action buttons should stack */
    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .card-header .btn,
    .card-header a.btn {
        width: 100%;
        justify-content: center;
    }

    /* Toolbars (like workers search/sort) should not overflow */
    .worker-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .worker-legend-main {
        flex-wrap: wrap;
    }

    .worker-tools {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .worker-tools-left,
    .worker-tools-right {
        width: 100%;
    }

    .worker-tools-left .form-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Tables: on mobile, stack every row into a “card” layout.
       Labels are generated in templates/base.html (data-label from thead). */
    .table-wrapper {
        /* don't clip dropdowns/buttons inside responsive card tables */
        overflow-x: visible;
    }

    .table-wrapper table {
        min-width: 0;
        width: 100%;
    }

    .table-wrapper.table-nowrap table {
        width: 100%;
        min-width: 0;
    }

    .table-wrapper table thead {
        display: none;
    }

    .table-wrapper table,
    .table-wrapper tbody,
    .table-wrapper tr,
    .table-wrapper td {
        display: block;
        width: 100%;
    }

    .table-wrapper tbody tr {
        /* Avoid horizontal overflow on phones: 100% width + left/right margin shifts cards off-screen */
        margin: 10px 0;
        padding: 10px 12px;
        border-radius: var(--radius-md);
        background: var(--color-surface-soft);
        border: 1px solid rgba(15,23,42,0.7);
    }

    .table-wrapper tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px dashed rgba(31,41,55,0.7);
        text-align: right;
        overflow-wrap: anywhere;
        word-break: break-word;
        flex-wrap: wrap;
    }

    .table-wrapper tbody tr td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .table-wrapper tbody tr td:first-child {
        padding-top: 0;
    }

    .table-wrapper tbody tr td::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-weight: 500;
        text-align: left;
        flex: 0 0 44%;
        max-width: 44%;
    }

    /* Keep buttons usable inside stacked cells */
    .table-wrapper tbody tr td form {
        margin: 0;
    }

    .table-wrapper tbody tr td .btn.small {
        padding: 6px 10px;
    }
}



@media (max-width: 768px) {
    .app {
        padding: var(--spacing-md);
    }

    /* Touch-friendly controls */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
    }
    .btn.small,
    .btn-sm {
        min-height: 36px;
        padding: 6px 12px;
    }
    .nav-link,
    .nav-group-label,
    .nav-toggle {
        min-height: 44px;
    }

    .app-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .brand {
        width: 100%;
        justify-content: space-between;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .app-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 8px;
    }

    .app-nav.app-nav--open {
        display: flex;
    }

    .nav-group {
        position: static;
    }

    .nav-group-menu {
        position: static;
        display: none;
        flex-direction: column;
        gap: 4px;
        padding: 0;
        margin-top: 6px;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-group.nav-group--open .nav-group-menu {
        display: flex;
    }

    /*
      Mobile navigation
      - Make "Главное" and group headers visually consistent
      - Make it obvious which items expand (caret)
      - Increase tap targets
    */
    .nav-link,
    .nav-group-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 12px;
        border-radius: 16px;
        border: 1px solid rgba(148,163,184,0.22);
        background: rgba(15,23,42,0.55);
        text-align: left;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1.2;
    }

    /* Reserve space on the right so "Главное" aligns perfectly with expandable items */
    .nav-link::after {
        content: "";
        width: 16px;
        flex: 0 0 16px;
    }

    .nav-link {
        text-decoration: none;
        color: var(--color-text-main);
    }

    .nav-link:hover,
    .nav-link:focus-visible {
        background: rgba(30,64,175,0.25);
        border-color: rgba(96,165,250,0.45);
        outline: none;
    }

    .nav-group-label {
        cursor: pointer;
        color: var(--color-text-main);
    }

    /* Caret indicator for expandable groups */
    .nav-group-label::after {
        content: "▾";
        font-size: 16px;
        line-height: 1;
        opacity: 0.85;
        transform: rotate(0deg);
        transition: transform 0.15s ease, opacity 0.15s ease;
        margin-left: 10px;
        flex: 0 0 auto;
    }

    .nav-group-label[aria-expanded="true"]::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* When a group is open, slightly highlight its header */
    .nav-group.nav-group--open .nav-group-label {
        background: rgba(30,64,175,0.18);
        border-color: rgba(96,165,250,0.35);
    }

    /* Submenu links (inside groups) */
    .nav-group-menu {
        margin-top: 8px;
        gap: 6px;
    }

    .nav-group-menu a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(148,163,184,0.14);
        background: rgba(148,163,184,0.08);
        text-decoration: none;
        color: var(--color-text-main);
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: none;
        margin-left: 10px;
    }

    .nav-group-menu a:hover,
    .nav-group-menu a:focus-visible {
        background: rgba(30,64,175,0.18);
        border-color: rgba(96,165,250,0.35);
        outline: none;
    }

    .page-title {
        font-size: 20px;
    }

    .page-subtitle {
        font-size: 13px;
    }

    .card {
        padding: var(--spacing-md);
    }

    /* Mobile: forms that are "inline" on desktop should stack nicely */
    .form.inline {
        flex-direction: column;
        align-items: stretch;
    }

    .form.inline .form-group {
        min-width: 0;
        width: 100%;
    }
}


/* Extra small screens tweaks for very small mobile devices */
@media (max-width: 480px) {
    .app {
        padding: var(--spacing-sm);
    }

    .app-header {
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .brand-main {
        gap: 6px;
    }

    .brand-title {
        font-size: 18px;
    }

    .brand-subtitle {
        font-size: 11px;
    }

    .app-nav {
        left: 0;
        right: 0;
        width: 100%;
    }

    .app-nav a {
        font-size: 13px;
        padding: 6px 10px;
    }

    .layout-main {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-md);
    }

    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-md);
    }

    .card {
        padding: var(--spacing-sm);
    }

    .page-title {
        font-size: 18px;
    }

    .page-subtitle {
        font-size: 12px;
    }

    .form.inline {
        flex-direction: column;
        align-items: stretch;
    }

    .form-group {
        min-width: 0;
        width: 100%;
    }

    .table-wrapper table {
        min-width: 100%;
    }

    table.table {
        font-size: 11px;
    }

    table.table th,
    table.table td {
        padding: 6px 6px;
    }

    .hours-item,
    .salary-item {
        padding: 6px 8px;
        font-size: 12px;
    }

    .total-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .auth-card {
        padding: var(--spacing-md);
        margin: 0 auto;
    }

    .auth-page {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}


/* Fleet / cars overview */
.fleet-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
}

.fleet-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
    gap: var(--spacing-md);
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148,163,184,0.6);
    background: radial-gradient(circle at top left, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
}

.fleet-card-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fleet-car-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 4px;
}

.fleet-plate {
    font-weight: 700;
    font-size: 18px;
}

.fleet-brand {
    font-size: 14px;
    color: var(--color-text-muted);
}

.fleet-meta {
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    gap: 12px;
}

.fleet-route {
    margin-top: 4px;
    font-size: 13px;
}

.fleet-passengers {
    margin-top: 6px;
}

.fleet-passengers-header {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.fleet-passengers-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 13px;
}

.fleet-passengers-list li + li {
    margin-top: 2px;
}

.fleet-card-side {
    border-left: 1px dashed rgba(148,163,184,0.5);
    padding-left: var(--spacing-md);
}

.fleet-add-form .input.small {
    font-size: 13px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Car driver layout */
.car-driver-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.2fr);
    gap: var(--spacing-lg);
}

.car-driver-side {
    border-left: 1px dashed rgba(148,163,184,0.5);
    padding-left: var(--spacing-lg);
}

@media (max-width: 991.98px) {
    .fleet-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .fleet-card-side {
        border-left: none;
        border-top: 1px dashed rgba(148,163,184,0.5);
        padding-left: 0;
        padding-top: var(--spacing-md);
    }
    .car-driver-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .car-driver-side {
        border-left: none;
        border-top: 1px dashed rgba(148,163,184,0.5);
        padding-left: 0;
        padding-top: var(--spacing-lg);
    }
}

/* Hours calendar */
.month-picker-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.month-picker-form .month-input {
    max-width: 190px;
}

/* Improve readability of month picker (numbers can be hard to see on dark gradients) */
.month-picker-form .month-input {
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(148,163,184,0.65);
    color: var(--color-text-main);
    -webkit-text-fill-color: var(--color-text-main);
    font-weight: 700;
}

.month-picker-form .month-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}

.hours-calendar-grid {
    display: grid;
    /*
      Using minmax(0, 1fr) lets columns shrink to nearly zero on narrow screens,
      which makes the day number and the input overlap and become unreadable.
      Keep a sane minimum width per column and allow horizontal scrolling.
    */
    grid-template-columns: repeat(8, minmax(92px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    gap: 8px;
    margin-top: var(--spacing-md);
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(2, 6, 23, 0.35);
}

.hours-calendar-grid::-webkit-scrollbar {
    height: 10px;
}

.hours-calendar-grid::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.35);
    border-radius: 999px;
}

.hours-calendar-grid::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.45);
    border-radius: 999px;
}

.calendar-header-cell {
    font-size: 12px;
    text-align: center;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.25);
    background: rgba(17, 24, 39, 0.6);
}

.calendar-header-cell.total-header {
    position: sticky;
    right: 0;
    z-index: 5;
    background: rgba(17, 24, 39, 0.92);
}

.calendar-day-cell {
    min-height: 92px;
    padding: 8px 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(17, 24, 39, 0.72);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.calendar-day-cell:hover {
    border-color: rgba(148,163,184,0.55);
    background: rgba(17, 24, 39, 0.82);
    transform: translateY(-1px);
}

.calendar-day-cell.weekend {
    border-color: rgba(234, 179, 8, 0.35);
}

.calendar-day-cell.has-hours {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.35);
}

.calendar-day-cell.has-hours::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.75);
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0 0 0 2px rgba(2, 6, 23, 0.5);
}

.calendar-day-cell {
    position: relative;
}

.calendar-day-cell.today {
    border-color: rgba(59,130,246,0.85);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25), 0 10px 22px rgba(0,0,0,0.28);
}

.calendar-day-cell.empty {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.calendar-day-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.calendar-day-number {
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.calendar-day-weekday {
    font-size: 11px;
    color: var(--color-text-muted);
}

.calendar-day-body .hours-input {
    margin-top: 4px;
    width: 100%;
    font-size: 14px;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
    /* Mobile fix: make typed hours clearly visible on dark background */
    color: var(--color-text-main);
    -webkit-text-fill-color: var(--color-text-main);
    caret-color: var(--color-text-main);
    font-weight: 800;
    min-height: 38px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(148,163,184,0.55);
    box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.15);
}

/* Coordinator view: black day background + white digits (read-only calendar) */
.coordinator-hours-calendar .calendar-day-cell{
    background: #000;
    border-color: rgba(148,163,184,0.42);
}
.coordinator-hours-calendar .calendar-day-cell:hover{
    background: #000;
    border-color: rgba(148,163,184,0.6);
}
.coordinator-hours-calendar .calendar-day-cell.weekend{
    border-color: rgba(234, 179, 8, 0.55);
}
.coordinator-hours-calendar .calendar-day-cell.has-hours{
    background: #000;
    border-color: rgba(34, 197, 94, 0.55);
}
.coordinator-hours-calendar .calendar-day-number{
    color: rgba(255,255,255,0.95);
}
.coordinator-hours-calendar .calendar-day-weekday{
    color: rgba(255,255,255,0.65);
}
.coordinator-hours-calendar .calendar-day-body .hours-input{
    background: #000;
    border-color: rgba(148,163,184,0.5);
    color: rgba(255,255,255,0.95);
    -webkit-text-fill-color: rgba(255,255,255,0.95);
}
.coordinator-hours-calendar .calendar-day-body .hours-input.empty-hours{
    color: rgba(255,255,255,0.55);
    -webkit-text-fill-color: rgba(255,255,255,0.55);
    border-style: dashed;
}
.coordinator-hours-calendar .hours-input-readonly{
    pointer-events: none;
    user-select: text;
}

.calendar-day-cell:focus-within {
    border-color: rgba(59,130,246,0.9);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.55);
}

.calendar-summary {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(148,163,184,0.5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: space-between;
}

.calendar-summary-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.calendar-summary-value {
    font-weight: 700;
    font-size: 18px;
}

.calendar-summary-actions .btn {
    min-width: 200px;
}

.calendar-legend {
    font-size: 13px;
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    .hours-calendar-grid {
        grid-template-columns: repeat(8, minmax(76px, 1fr));
        gap: 4px;
    }
    .calendar-day-cell {
        min-height: 76px;
    }
    .calendar-day-body .hours-input {
        font-size: 14px;
        min-height: 36px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .calendar-summary-actions .btn {
        width: 100%;
    }
}


/* Worker center layout */
.worker-center-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    min-width: 260px;
}

.metric-pill.subtle {
    background: rgba(15,23,42,0.7);
    border-color: rgba(148,163,184,0.6);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
}

.quick-action {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148,163,184,0.5);
    background: radial-gradient(circle at top left, rgba(30,64,175,0.22), rgba(15,23,42,0.96));
    text-decoration: none;
}

.quick-action-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.quick-action-desc {
    font-size: 13px;
    color: var(--color-text-muted);
}

.quick-action:hover {
    border-color: rgba(59,130,246,0.9);
    transform: translateY(-1px);
    transition: all 0.12s ease-out;
}

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.timeline-group-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.timeline-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-item {
    position: relative;
    padding-left: 14px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(59,130,246,0.9);
}

.timeline-item-main {
    font-size: 13px;
}

.timeline-item-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Responsive tweaks */
@media (max-width: 800px) {
    .worker-center-metrics {
        align-items: flex-start;
        margin-top: var(--spacing-md);
    }
}


/* Notifications page */
.notifications-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.notifications-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(148,163,184,0.6);
    text-decoration: none;
    color: var(--color-text-main);
    background: rgba(15,23,42,0.9);
}

.chip-sep{
    width: 1px;
    height: 18px;
    display: inline-block;
    background: rgba(148,163,184,0.35);
    margin: 0 4px;
    border-radius: 1px;
}

.chip-active {
    border-color: rgba(59,130,246,0.9);
    background: radial-gradient(circle at top left, rgba(59,130,246,0.4), rgba(15,23,42,0.95));
}

.notification-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-item {
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(30,64,175,0.7);
    background: radial-gradient(circle at top left, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}

.notification-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid transparent;
}

.notification-category-hours {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.6);
}

.notification-category-money {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.6);
}

.notification-category-salary {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.6);
}

.notification-category-docs {
    background: rgba(148,163,184,0.25);
    border-color: rgba(148,163,184,0.75);
}

.notification-category-timeoff {
    background: rgba(234,179,8,0.2);
    border-color: rgba(234,179,8,0.7);
}

.notification-category-resignation {
    background: rgba(248,113,113,0.18);
    border-color: rgba(248,113,113,0.7);
}

.notification-category-cars {
    background: rgba(96,165,250,0.18);
    border-color: rgba(96,165,250,0.7);
}

.notification-time {
    font-size: 11px;
    color: var(--color-text-muted);
}

.notification-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.notification-description {
    font-size: 13px;
}

@media (max-width: 600px) {
    .notification-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Header notifications bell */
.user-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    text-decoration: none;
    font-size: 16px;
}

.header-icon:hover {
    border-color: rgba(59,130,246,0.9);
    transform: translateY(-1px);
    transition: all 0.12s ease-out;
}

.notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(248,113,113,0.95);
    color: #fff;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Badges (status pills) */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(15,23,42,0.55);
    color: var(--color-text-main);
}

.badge-success {
    border-color: rgba(34,197,94,0.6);
    background: rgba(34,197,94,0.10);
    color: var(--color-success);
}

.badge-danger {
    border-color: rgba(239,68,68,0.6);
    background: rgba(239,68,68,0.10);
    color: var(--color-danger);
}

.badge-muted {
    border-color: rgba(156,163,175,0.4);
    background: rgba(31,41,55,0.55);
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .user-badge {
        gap: 8px;
        flex-wrap: wrap;
    }
}


/* Coordinator dashboard tasks */
.tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.task-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at top left, rgba(59,130,246,0.18), transparent 55%),
                var(--color-surface-soft);
    border: 1px solid rgba(148, 163, 184, 0.3);
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.9);
    border-color: rgba(59, 130, 246, 0.8);
}

.task-card-icon {
    font-size: 20px;
    margin-right: 12px;
}

.task-card-main {
    flex: 1;
    min-width: 0;
}

.task-card-label {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.task-card-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.task-card-count {
    font-weight: 700;
    font-size: 1.25rem;
    padding-left: 12px;
}


/* Mini-CRM workers list */
.worker-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.worker-legend-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.legend-label {
    font-weight: 600;
    color: rgba(226, 232, 240, 0.9);
    margin-right: 4px;
}

.legend-item {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: rgba(226, 232, 240, 0.9);
}

.worker-legend-actions .btn.small {
    font-size: 11px;
    padding-inline: 10px;
    padding-block: 4px;
}

.worker-tools{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 10px 10px;
    border-radius: var(--radius-lg);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.worker-tools-right{
    font-size: 12px;
    color: var(--color-text-muted);
    padding-bottom: 4px;
}

.worker-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.signal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.5);
    font-size: 13px;
}

.signal-icon.signal-ok {
    background: rgba(22, 163, 74, 0.35);
    border-color: rgba(22, 163, 74, 0.9);
}

.signal-icon-link {
    text-decoration: none;
}

.signal-icon-link .signal-icon {
    cursor: pointer;
}



/* --- Mobile overflow fixes (hours/salary header actions) --- */
.card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
}

/* Prevent horizontal "slide" on small screens caused by long buttons/tables */
html, body {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 991.98px) {
    .app { overflow-x: hidden; }
}

@media (max-width: 640px) {
    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .card-actions {
        width: 100%;
        justify-content: stretch;
    }

    .card-actions .btn {
        width: 100%;
        justify-content: center;
        white-space: normal;   /* allow wrapping instead of pushing layout */
        line-height: 1.2;
    }
}


/* --- Regulations installer-like window --- */
.reg-shell{
    display:flex;
    justify-content:center;
    padding:24px 12px;
}

.reg-window{
    width:min(980px, 100%);
    border-radius:20px;
    /* deliberately high-contrast, readable "installer" look */
    background: rgba(229, 236, 247, 0.96); /* soft blue-gray */
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 18px 55px rgba(0,0,0,0.18);
    overflow:hidden;
}

.reg-header{
    padding:18px 18px 10px;
    background: rgba(243,244,246,0.9);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.reg-title{
    margin:0;
    font-size:1.35rem;
    letter-spacing:0.2px;
}

.reg-subtitle{
    margin:8px 0 0;
    color: rgba(17, 24, 39, 0.72);
    line-height:1.35;
}

.reg-scroll{
    max-height:62vh;
    overflow:auto;
    padding:16px 18px;
    /* визуально отделяем «окно прокрутки», но сохраняем читабельность */
    background: rgba(242, 246, 253, 0.98); /* softer inner panel */
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius:16px;
    margin:14px 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

/* скроллбар (не агрессивный, чтобы текст оставался читабельным) */
.reg-scroll::-webkit-scrollbar{ width:10px; }
.reg-scroll::-webkit-scrollbar-track{ background: rgba(15, 23, 42, 0.05); border-radius:999px; }
.reg-scroll::-webkit-scrollbar-thumb{ background: rgba(15, 23, 42, 0.20); border-radius:999px; }
.reg-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(15, 23, 42, 0.28); }

.reg-content{
    min-height: 120px;
    font-size: 15px;
    line-height: 1.55;
}

.reg-content p{ margin: 0 0 10px; }
.reg-content strong{ color: #111827; }

.reg-h2{
    margin:16px 0 8px;
    font-size:1.08rem;
}

.reg-h3{
    margin:12px 0 6px;
    font-size:1.0rem;
    opacity:0.95;
}

.reg-ul{
    margin:8px 0 0 18px;
}

.reg-hr{
    border:none;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    margin:16px 0;
}

.reg-note{
    margin:10px 0 0;
    padding:10px 12px;
    border-radius:12px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    line-height:1.35;
}

.reg-footer{
    padding:14px 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.reg-form{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.reg-form .btn{
    min-width:160px;
}

.reg-footer-hint{
    font-size:0.95rem;
    opacity:0.85;
}

@media (max-width: 640px){
    /* На небольших экранах главное — дать максимум ширины под текст */
    .reg-shell{ padding: 14px 0; }
    .reg-header{ padding: 14px 12px 8px; }
    .reg-scroll{
        max-height: 72vh;
        margin: 10px 12px;
        padding: 12px;
    }
    .reg-ul{ margin-left: 16px; }
    .reg-footer{ padding: 12px; }
    .reg-form .btn{ width:100%; }
}

@media (max-width: 420px){
    /* Очень узкие экраны: убираем лишние поля, чтобы текст не сжимался */
    .reg-shell{ padding: 10px 0; }
    .reg-title{ font-size: 1.2rem; }
    .reg-subtitle{ font-size: 0.95rem; }
    .reg-scroll{
        margin: 8px 10px;
        padding: 10px;
        border-radius: 14px;
    }
    .reg-content{ font-size: 14.5px; }
    .reg-ul{ margin-left: 14px; }
}



/* --- Responsive visibility helpers (fix: desktop tables should hide on mobile) --- */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Mobile card blocks are hidden by default (shown in media rules) */
/* NOTE: .salary-mobile is already controlled earlier (shown at max-width: 900px).
   Do not override it here, otherwise salary page becomes blank on mobile
   because the desktop table is hidden and mobile cards stay hidden too. */
.advances-mobile { display: none; }

@media (max-width: 991.98px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    /* Prevent accidental horizontal scroll on small screens */
    html, body { overflow-x: auto; }
}


/* --- Advances page: show requests as cards on mobile/tablet (avoid horizontal scrolling) --- */
.advances-page .advances-mobile {
    display: none;
}

@media (max-width: 1100px) {
    .advances-page .table-responsive-desktop {
        display: none;
    }
    .advances-page .advances-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: var(--spacing-md);
    }
}

/* --- Hours calendar: weekly sum column --- */
.calendar-week-total-cell {
    min-height: 92px;
    padding: 8px 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(17, 24, 39, 0.78);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.calendar-week-total-cell.sticky-total {
    position: sticky;
    right: 0;
    z-index: 4;
    box-shadow: -10px 0 18px rgba(0,0,0,0.22), 0 8px 18px rgba(0,0,0,0.25);
}

.calendar-week-total-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.calendar-week-total-value {
    font-weight: 800;
    font-size: 14px;
    color: var(--color-text-main);
}

.calendar-day-number {
    color: var(--color-text-main);
}

@media (max-width: 600px) {
    .calendar-week-total-cell {
        min-height: 76px;
    }
    .calendar-week-total-value {
        font-size: 14px;
    }
}


/* --- Modal (quality reminder) ------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 2000;
}

.is-hidden {
    display: none !important;
}

.modal-card {
    width: 100%;
    max-width: 560px;
    /* Mobile safety: if screen height is small (or keyboard is open), allow scrolling */
    max-height: calc(100vh - 36px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(17, 24, 39, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
    padding: 16px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.modal-title {
    font-size: 16px;
    font-weight: 650;
}

.modal-close {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
    color: var(--color-text-main);
    border-radius: 999px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 14px;
}

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

.modal-card textarea {
    width: 100%;
}

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

@media (max-width: 480px) {
    .modal-card {
        padding: 14px;
    }
    .modal-actions .btn {
        width: 100%;
    }
}


/* --- Surveys ------------------------------------------------------------- */
.survey-question {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.rating-option {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(2, 6, 23, 0.2);
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
}

.rating-option input {
    display: none;
}

.rating-option span {
    font-weight: 650;
}

.rating-option:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.18);
}

.choice-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.choice-option {
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(2, 6, 23, 0.15);
    padding: 10px 12px;
}

.choice-option input {
    margin: 0;
}

@media (max-width: 520px) {
    .rating-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
    .rating-option {
        padding: 9px 0;
    }
}


/* ------------------------------
   UX / Accessibility improvements
   ------------------------------ */

/* Visible keyboard focus without changing mouse/ touch aesthetics */
:focus-visible {
    outline: 2px solid rgba(96,165,250,0.9);
    outline-offset: 2px;
}

/* Prevent background scrolling when a modal is open */
body.modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    /* Mobile: make nav group toggles feel like accordions */
    .nav-group-label {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .nav-group-label::after {
        content: "▾";
        opacity: 0.8;
        transform: rotate(0deg);
        transition: transform 0.15s ease;
    }
    .nav-group.nav-group--open .nav-group-label::after {
        transform: rotate(180deg);
    }
}

/* ------------------------------
   Worker-friendly pages: History / FAQ
   ------------------------------ */

.history-mobile { display: none; }

.history-item {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--color-surface-soft);
}

.history-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}

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

.history-label { color: var(--color-text-muted); font-size: 12px; }
.history-value { font-size: 14px; text-align: right; }

@media (max-width: 768px) {
    .history-page .table-responsive-desktop { display: none; }
    .history-page .history-mobile { display: block; }
}

.faq-item {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--color-surface-soft);
}

.faq-item > summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    color: var(--color-text-main);
    -webkit-tap-highlight-color: transparent;
}

.faq-item > summary:focus {
    outline: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
    content: "▾";
    float: right;
    opacity: 0.8;
    color: var(--color-text-muted);
}

.faq-item[open] > summary::after { content: "▴"; }

.faq-answer { margin-top: 10px; }

/* Help page: keep secondary text readable (avoid “all grey” feel) */
.faq-page .text-muted {
    color: rgba(229, 231, 235, 0.78);
}

/* Note blocks (used on Help / Hours / Salary / History) */
.note-block {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(59,130,246,0.08);
    border-radius: 14px;
    padding: 12px;
}

.note-title {
    font-weight: 800;
    margin-bottom: 6px;
}

.note-text {
    margin: 0;
    color: var(--color-text-main);
}

/* --- Global loader overlay -------------------------------------------- */
.page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 9999;
}

.page-loader.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.page-loader-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(148,163,184,0.25);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.page-loader-text {
    font-size: 14px;
    color: rgba(226,232,240,0.92);
}

.spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(148,163,184,0.35);
    border-top-color: var(--color-primary);
    animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Small skeleton utility (optional) */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(148,163,184,0.18);
    border-radius: 12px;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: skeleton-shimmer 1.1s infinite;
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- Workers page: cleaner "Мои работники" --- */
.workers-page{ margin-top: var(--spacing-md); }

.workers-toolbar{ padding: 12px; }
.workers-toolbar-top{ display:flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.workers-toolbar-bottom{ margin-top: 10px; }
.workers-search-form{ display:flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.workers-toolbar-right{ display:flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.workers-view-toggle{ display:flex; gap: 8px; flex-wrap: wrap; }

/* chips: support both .chip-active and .active */
.chip.active{ border-color: rgba(59,130,246,0.9); background: radial-gradient(circle at top left, rgba(59,130,246,0.4), rgba(15,23,42,0.95)); }

.workers-legend-details{ max-width: 360px; }
.workers-legend-details summary{ cursor: pointer; user-select: none; color: var(--color-text-muted); font-size: 12px; }
.workers-legend-items{ display:flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }

/* View switching */
.workers-page.view-cards .table-wrapper.workers-table-fit-desktop{ display:none !important; }
.workers-page.view-table .workers-cards{ display:none !important; }
.workers-page.view-table .table-wrapper.workers-table-fit-desktop{ display:block !important; }

/* Cards layout on desktop (grid) */
.workers-page.view-cards .workers-cards{ 
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-top: var(--spacing-md);
}

.workers-page .worker-card{
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  border: 1px solid rgba(148,163,184,0.25);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 700px){
  .workers-page.view-cards .workers-cards{ grid-template-columns: 1fr; }
  .workers-toolbar-right{ align-items: flex-start; width: 100%; }
}