/*
 * skanvika СтройКонтроль — тёплая тема.
 * Визуальный слой: дерево, брус, светлые кремовые поверхности и природный зелёный.
 */

/* Font loaded via <link rel="preload"> in base.html for non-blocking render */

:root {
    color-scheme: light dark;

    /* Brand accents: skanvika wood + forest */
    --brand-green: #2f5d3a;
    --brand-green-2: #3f7a49;
    --brand-gold: #b87a3d;
    --brand-gold-hover: #9f6330;
    --brand-wood: #7b4a2a;
    --brand-wood-dark: #4a2f1d;
    --brand-cream: #f6efe4;
    --brand-sand: #eadbc4;

    /* Surfaces (light) */
    --color-bg: #ede2d2;
    --color-surface: #ffffff;
    --color-surface-2: #faf5ed;
    --color-elevated: rgba(255, 250, 242, 0.94);

    /* Text (light) */
    --color-text: #2b2118;
    --color-text-muted: #6f5a45;
    --color-text-soft: #8a755e;

    /* Borders */
    --color-border: rgba(92, 61, 36, 0.20);
    --color-border-strong: rgba(92, 61, 36, 0.34);

    /* Accents */
    --color-accent: var(--brand-gold);
    --color-accent-hover: var(--brand-gold-hover);
    --color-accent-contrast: #fffaf2;

    /* Status */
    --color-success: #2f7d46;
    --color-warning: #c8872f;
    --color-danger: #c9493d;

    /* Shadows */
    --shadow-1: 0 1px 3px rgba(47, 93, 58, 0.08), 0 4px 16px rgba(47, 93, 58, 0.10), 0 0 0 1px rgba(92, 61, 36, 0.08);
    --shadow-2: 0 2px 6px rgba(47, 93, 58, 0.10), 0 12px 36px rgba(47, 93, 58, 0.15), 0 0 0 1px rgba(92, 61, 36, 0.10);

    /* Radius */
    --radius: 12px;
    --radius-sm: 10px;
    --radius-lg: 16px;

    --touch-min: 44px;
    --layout-max-width: 1240px;
    --content-gutter: 1.25rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.25rem;
    --space-xl: 1.5rem;
    --control-height: 38px;
    --control-height-sm: 32px;
    --form-compact-padding-y: 0.42rem;
    --form-compact-padding-x: 0.75rem;
    --form-compact-min-height: 38px;
    --btn-compact-padding-y: 0.46rem;
    --btn-compact-padding-x: 0.95rem;
    --btn-small-compact-padding-y: 0.25rem;
    --btn-small-compact-padding-x: 0.5rem;

    /* Typography */
    --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Noto Sans', 'Liberation Sans', sans-serif;

    /* Focus */
    --focus-ring: rgba(184, 122, 61, 0.24);
    --focus-ring-strong: rgba(184, 122, 61, 0.36);

    /* Buttons */
    --btn-shadow: 0 1px 1px rgba(74, 47, 29, 0.06), 0 12px 28px rgba(74, 47, 29, 0.12);
    --btn-shadow-pressed: 0 1px 1px rgba(74, 47, 29, 0.08);

    /* Header */
    --header-bg: linear-gradient(135deg, #1a3828 0%, #2f5d3a 60%, #1e4a2d 100%);
    --header-fg: rgba(255, 255, 255, 0.98);
    --header-fg-soft: rgba(230, 255, 235, 0.90);
    --header-border: rgba(255, 255, 255, 0.12);

    /* Dark accent (header nav, badges, links) */
    --color-dark: var(--brand-wood-dark);
    --color-ink-strong: var(--color-text);

    /* Card surface (shared alias) */
    --color-card: var(--color-surface);

    /* Type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    /*
     * Единая типографика интерфейса (как на проде: body + compact-mode в base.html).
     * Все формы, кнопки и заголовки страниц опираются на эти переменные — локально и на сервере одинаково.
     */
    --typo-document: 16px;
    --typo-page-title: 1.35rem;
    --typo-card-title: 1rem;
    --typo-subtitle: 0.9rem;
    --typo-body: 1rem;
    --typo-label: 0.85rem;
    --typo-control: 0.9rem;
    --typo-hint: 0.8rem;
    --typo-btn: 0.9rem;
    --typo-btn-sm: 0.85rem;
    --typo-secondary: 0.85rem;
    --typo-caption: 0.82rem;
    --typo-lead: 0.95rem;
    --typo-micro: 0.78rem;

    /* Компактные формы / тулбары (единая шкала ширин) */
    --form-toolbar-gap-row: 0.65rem;
    --form-toolbar-gap-col: 1rem;
    --field-w-date: 11.75rem;
    --field-w-num-sm: 7.5rem;
    --field-w-num-md: 9.5rem;
    --field-w-select-sm: 11rem;
    --field-w-select-md: 16rem;
    --field-w-select-lg: 20rem;
    --field-w-email: 22rem;
    --field-w-name-max: 24rem;
    --field-amocrm-sub: 13.5rem;
    --field-amocrm-tok: 20rem;
    --field-w-year: 8.75rem;
    --field-w-month: 10rem;
    --field-w-month-nav: 11.25rem;
    --field-w-stage-input: 17.5rem;
}

/*
 * Масштаб UI: см. STROYCONTROL_UI_FONT_PLUS_PT и inject_ui_font_plus_pt в app.py.
 * Корневой rem + N pt — масштабируются все --typo-* в rem; --typo-document → 1rem следует корню.
 */
html.ui-font-plus-pt {
    font-size: calc(100% + var(--ui-font-plus-pt, 2pt));
    --typo-document: 1rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Surfaces (dark) */
        --color-bg: #18110c;
        --color-surface: rgba(45, 31, 22, 0.82);
        --color-surface-2: rgba(58, 40, 28, 0.70);
        --color-elevated: rgba(45, 31, 22, 0.90);

        /* Text (dark) */
        --color-text: rgba(255, 248, 235, 0.94);
        --color-text-muted: rgba(239, 221, 198, 0.74);
        --color-text-soft: rgba(217, 190, 158, 0.82);

        /* Borders (dark) */
        --color-border: rgba(234, 219, 196, 0.16);
        --color-border-strong: rgba(234, 219, 196, 0.24);

        /* Shadows (dark) */
        --shadow-1: 0 1px 1px rgba(0,0,0,0.35), 0 18px 45px rgba(0,0,0,0.30);
        --shadow-2: 0 2px 3px rgba(0,0,0,0.45), 0 28px 70px rgba(0,0,0,0.42);

        /* Focus */
        --focus-ring: rgba(204, 140, 75, 0.30);

        /* Header */
        --header-bg: linear-gradient(135deg, rgba(24, 17, 12, 0.92), rgba(38, 75, 47, 0.88));
        --header-fg: rgba(255, 248, 235, 0.94);
        --header-fg-soft: rgba(239, 221, 198, 0.76);
        --header-border: rgba(234, 219, 196, 0.16);

        /* Dark accent (dark mode) */
        --color-dark: #f8fafc;
        --color-ink-strong: var(--color-text);
    }
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    font-size: var(--typo-document);
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
    body {
        background: var(--color-bg);
    }
}

/* Skip-link: скрыт, виден при фокусе (Tab) */
.skip-link {
    position: fixed;
    left: -9999px;
    top: 0.75rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
}
.skip-link:focus {
    left: 1rem;
}

/* Шапка */
.header {
    position: relative;
    z-index: 1000;
    background: var(--header-bg);
    color: var(--header-fg);
    padding: 0.6rem var(--content-gutter);
    padding-top: max(0.6rem, env(safe-area-inset-top));
    box-shadow: 0 2px 18px rgba(0,0,0,0.26);
    border-bottom: none;
}

.header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(184, 122, 61, 0.85) 30%, rgba(255, 200, 80, 0.70) 50%, rgba(184, 122, 61, 0.85) 70%, transparent 100%);
    pointer-events: none;
}

.header-inner {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* stretch — логотип занимает полную высоту строки вместе с навигацией */
    align-items: stretch;
    gap: 0.2rem 1.5rem;
}

.logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--header-fg);
    text-decoration: none;
    /* вертикальная разделительная черта справа */
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.20);
}

.logo-img {
    height: 32px;
    width: auto;
    max-width: 100%;
    display: block;
}

.logo-img-skanvika {
    /*
     * height: 100% — логотип растягивается на всю высоту строки шапки.
     * У дир. производства (1 строка) — высота ~52px, у админа (2 строки) — ~88px.
     * Ширина следует из пропорций изображения автоматически.
     */
    height: 100%;
    width: auto;
    min-height: 52px;
    max-height: 90px;
    max-width: none;
    display: block;
    object-fit: contain;
    object-position: left center;
    /* чёрный фон PNG исчезает: screen(black, bg)=bg, screen(white, bg)=white */
    mix-blend-mode: screen;
}

.logo-text {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .header {
        padding-top: max(0.45rem, env(safe-area-inset-top));
        padding-bottom: 0.45rem;
    }

    .logo-text {
        font-size: 1rem;
    }
    .logo-img {
        height: 28px;
    }
    .logo-img-skanvika {
        /* на мобильных: фиксированная высота, ширина пропорциональна */
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        width: auto;
        max-width: calc(100vw - 92px);
    }
}

.nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
}

.nav-section-primary {
    flex: 1 1 0;
    min-width: 0;
}

.nav-section-system {
    flex: 0 0 auto;
    min-width: max-content;
    padding-left: 0.5rem;
    margin-left: 0.2rem;
    border-left: 1px solid rgba(255,255,255,0.15);
}

.nav-section-items {
    display: flex;
    align-items: center;
    gap: 0.1rem 0.15rem;
    flex-wrap: wrap;
    min-width: 0;
}

.nav-system-actions {
    gap: 0.35rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Кнопка выхода — всегда справа, крупная для touch */
.btn-logout {
    margin-left: 0;
    min-height: var(--form-compact-min-height);
    padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--header-fg) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.btn-logout:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.impersonation-form {
    margin: 0;
}
.impersonation-select {
    min-width: 200px;
    max-width: 280px;
    min-height: var(--form-compact-min-height);
    padding: var(--form-compact-padding-y) 0.7rem;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--header-fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.impersonation-select:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}
.impersonation-select option {
    background: var(--color-surface);
    color: var(--color-text);
}
/* Impersonation — максимальный контраст при любых стилях */
.impersonation-form-high-contrast .impersonation-select {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border: 2px solid rgba(255, 255, 255, 0.9);
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.impersonation-form-high-contrast .impersonation-select:hover {
    background: #fff;
    border-color: #fff;
}
.mobile-impersonation-bar {
    display: none;
}

/* Mobile impersonation panel — compact horizontal role picker */
.mobile-imp-panel {
    width: 100%;
}
.mobile-imp-panel > summary { list-style: none; }
.mobile-imp-panel > summary::-webkit-details-marker { display: none; }

.mobile-imp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    user-select: none;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
}
.mobile-imp-toggle-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.mobile-imp-toggle-arrow {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    transition: transform 0.2s;
}
.mobile-imp-panel[open] .mobile-imp-toggle-arrow {
    transform: rotate(180deg);
}

.mobile-imp-panel-body {
    display: flex;
    flex-direction: column;
}
.mobile-imp-search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.9rem;
    font-size: 14px;
    font-family: inherit;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.9);
    outline: none;
    -webkit-appearance: none;
}
.mobile-imp-search::placeholder {
    color: rgba(255,255,255,0.35);
}
.mobile-imp-search:focus {
    background: rgba(0,0,0,0.25);
}

.mobile-imp-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.2rem 0;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-imp-group-label {
    padding: 0.55rem 0.9rem 0.2rem;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-gold);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-imp-list .mobile-imp-group-label:first-child {
    border-top: none;
    margin-top: 0;
}
.mobile-imp-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: left;
    cursor: pointer;
    color: rgba(255,255,255,0.88);
    font-family: inherit;
    transition: background 0.15s;
    min-height: 0;
}

.mobile-imp-item:last-child {
    border-bottom: none;
}
.mobile-imp-item:hover,
.mobile-imp-item:active {
    background: rgba(255,255,255,0.1);
}
.mobile-imp-item-active {
    background: rgba(255,255,255,0.10);
    border-left: 3px solid var(--brand-gold);
    padding-left: calc(0.9rem - 3px);
}
.mobile-imp-item-back {
    color: var(--brand-gold);
    font-weight: 600;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.4rem;
    margin-bottom: 0.1rem;
}
.mobile-imp-name-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    overflow: hidden;
}
.mobile-imp-name {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    flex-shrink: 1;
}
.mobile-imp-login {
    font-weight: 400;
    color: rgba(255,255,255,0.4);
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.mobile-imp-role {
    /* Hidden — role is already shown by group headers (АДМИНИСТРАТОРЫ, ДИРЕКТОРА, etc.) */
    display: none;
}

/* Desktop impersonation dropdown — styled list with role pills */
.desktop-imp-dropdown {
    position: relative;
}
.desktop-imp-trigger {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.desktop-imp-menu {
    min-width: 280px;
    max-height: min(70vh, 500px);
    overflow-y: auto;
    padding: 0.35rem 0 !important;
}
.desktop-imp-group-label {
    padding: 0.5rem 0.75rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-gold);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.desktop-imp-menu .desktop-imp-group-label:first-child {
    border-top: none;
}
.desktop-imp-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: rgba(255,255,255,0.88);
    font-family: inherit;
    border-radius: 6px;
    margin: 0 0.25rem;
    width: calc(100% - 0.5rem);
    transition: background 0.15s;
}
.desktop-imp-item:hover {
    background: rgba(255,255,255,0.1);
}
.desktop-imp-item-active {
    background: rgba(255,255,255,0.08);
    border-left: 3px solid var(--brand-gold);
    padding-left: calc(0.75rem - 3px);
}
.desktop-imp-item-back {
    color: var(--brand-gold);
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.5rem;
    margin-bottom: 0.15rem;
    border-radius: 0;
    width: 100%;
    margin-left: 0;
}
.desktop-imp-group-divider,
.mobile-imp-group-divider {
    height: 1px;
    margin: 0.35rem 0.5rem 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
}
.desktop-imp-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
}
.desktop-imp-login {
    font-weight: 400;
    color: rgba(255,255,255,0.4);
    font-size: 0.78rem;
}
.desktop-imp-sub {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255,255,255,0.52);
    max-width: 100%;
}
.desktop-imp-role {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.1rem;
    padding: 0.12rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.1);
    border-radius: 100px;
}
/* Связи ролей — верхний уровень доступа, выделение в навигации */
.nav-link-roles.active {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

.nav-link {
    color: var(--header-fg-soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.22rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 1.15;
    transition: background 0.15s, color 0.15s;
}

/* All nav links stay single-line; dropdowns handle overflow */

@media (min-width: 1025px) {
    .header {
        padding: 0.35rem var(--content-gutter);
        padding-top: max(0.35rem, env(safe-area-inset-top));
    }

    .logo-img {
        height: 28px;
    }

    .nav-link {
        min-height: 30px;
        padding: 0.18rem 0.42rem;
        font-size: 0.88rem;
    }

    .impersonation-select {
        min-height: 30px;
        max-width: 220px;
        padding: 0.18rem 0.5rem;
        font-size: 0.84rem;
    }

    .btn-logout {
        min-height: 30px;
        padding: 0.18rem 0.5rem;
        font-size: 0.86rem;
    }
}

/* (compact nav handled in base styles) */

.nav-link:hover, .nav-link.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.nav-link.active {
    background: rgba(255, 255, 255, 0.22);
    font-weight: 600;
}
.nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Выпадающие пункты меню в шапке (для админа — много разделов) */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary.nav-link {
    list-style: none;
    cursor: pointer;
    user-select: none;
    justify-content: space-between;
}

.nav-dropdown > summary.nav-link::-webkit-details-marker {
    display: none;
}

.nav-dropdown > summary.nav-link::after {
    content: "▾";
    margin-left: 0.45rem;
    font-size: 0.85em;
    opacity: 0.9;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    min-width: 260px;
    width: max-content;
    max-width: min(420px, calc(100vw - 24px));
    padding: 0.45rem;
    border-radius: var(--radius);
    background: rgba(2, 6, 23, 0.86);
    border: 1px solid rgba(148,163,184,0.18);
    box-shadow: var(--shadow-2);
    z-index: 200;
    max-height: min(70vh, calc(100dvh - 24px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translate(var(--dropdown-shift-x, 0px), var(--dropdown-shift-y, 0px));
}

.nav-dropdown[open] .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nav-dropdown-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--control-height);
    padding: 0.55rem 0.75rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-radius: 10px;
}

.nav-dropdown-menu .nav-link.active {
    background: rgba(255, 255, 255, 0.22);
    font-weight: 600;
}

/* Глобальный .nav-link:hover слишком похож на .active — визуально «два выбранных» пункта */
.nav-dropdown-menu .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--header-fg);
}

.nav-dropdown-menu .nav-link.active:hover {
    background: rgba(255, 255, 255, 0.26);
    color: var(--header-fg);
}

/* Заголовки секций (мастер/прораб/рабочий и др.) */
.flow-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Мобильные: dropdown открывается поверх контента и не растягивает шапку */
@media (max-width: 1024px) {
    .nav-dropdown > summary.nav-link::after {
        margin-left: auto;
    }
    .nav-dropdown[open] > summary.nav-link {
        background: rgba(255, 255, 255, 0.14);
        color: var(--header-fg);
    }
    .nav-dropdown-menu .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 10px;
    }
}

.nav-badge {
    display: inline-block;
    min-width: 1.25em;
    padding: 0.15em 0.4em;
    margin-left: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-danger);
    color: #fff;
    border-radius: 10px;
    vertical-align: middle;
}

.project-badge {
    display: inline-block;
    min-width: 1.25em;
    padding: 0.15em 0.4em;
    margin-left: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-danger);
    color: #fff;
    border-radius: 10px;
    vertical-align: middle;
}

.project-card-mini .project-badge,
.project-card .project-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    margin: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.project-badge-corner {
    top: 0.4rem;
    right: 0.4rem;
}

/* Кнопки */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    min-height: var(--form-compact-min-height);
    font-size: var(--typo-btn);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--btn-shadow);
    transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-ring), var(--btn-shadow);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: var(--btn-shadow-pressed);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn[disabled],
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-wood), var(--color-accent));
    color: #fff;
    border-color: rgba(74, 47, 29, 0.16);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-wood-dark), var(--color-accent-hover));
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-ring-strong), var(--btn-shadow);
}

.btn-outline {
    background: rgba(255, 250, 242, 0.45);
    color: var(--brand-wood-dark);
    border: 1px solid var(--color-border-strong);
    box-shadow: none;
}

.btn-outline:hover {
    background: rgba(184, 122, 61, 0.10);
    border-color: var(--color-border-strong);
}

@media (prefers-color-scheme: dark) {
    .btn-outline:hover {
        background: rgba(148, 163, 184, 0.10);
    }
}

.btn-sm {
    min-height: 32px;
    padding: 0.25rem 0.65rem;
    font-size: var(--typo-btn-sm);
}

.btn-block {
    width: 100%;
}

.btn-small {
    min-height: var(--control-height-sm);
    padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
    font-size: var(--typo-btn-sm);
    font-weight: 600;
    box-shadow: none;
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border: none;
    border-color: rgba(0,0,0,0.06);
}

.btn-danger:hover {
    background: #dc2626;
}
.btn-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
}
.btn-danger[disabled],
.btn-danger.disabled {
    background: #fca5a5;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-action-edit {
    background: rgba(47, 93, 58, 0.10);
    border-color: rgba(47, 93, 58, 0.20);
    color: #1e4a2d;
    box-shadow: none;
}

.btn-action-edit:hover {
    background: rgba(47, 93, 58, 0.16);
    border-color: rgba(47, 93, 58, 0.32);
    color: #1a3828;
}

.btn-action-delete {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.14);
    color: #dc2626;
    box-shadow: none;
}

.btn-action-delete:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.2);
    color: #b91c1c;
}

.work-items-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.work-qr-btn,
.worker-qr-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.work-qr-btn {
    min-width: 38px;
    padding-inline: 0.6rem;
}

.qr-mini-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 4px;
    background:
        linear-gradient(#111827 0 0) left top / 5px 5px no-repeat,
        linear-gradient(#111827 0 0) right top / 5px 5px no-repeat,
        linear-gradient(#111827 0 0) left bottom / 5px 5px no-repeat,
        linear-gradient(#111827 0 0) right bottom / 5px 5px no-repeat,
        linear-gradient(#111827 0 0) center / 4px 4px no-repeat,
        linear-gradient(#111827 0 0) 70% 45% / 3px 3px no-repeat,
        linear-gradient(#111827 0 0) 38% 72% / 3px 3px no-repeat;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.14);
}

.qr-display-modal,
.worker-qr-scan-modal {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.qr-display-meta {
    margin-bottom: 1rem;
}

.qr-display-meta strong,
.qr-display-meta span {
    display: block;
}

.qr-display-meta span {
    margin-top: 0.2rem;
    color: var(--color-text-muted);
}

.qr-display-canvas-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.qr-display-canvas {
    width: min(320px, 100%);
    height: auto;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Хлебные крошки */
.breadcrumbs {
    max-width: 1200px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.breadcrumbs a {
    color: var(--color-accent);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Основной контент */
.main {
    flex: 1;
    max-width: var(--layout-max-width);
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: var(--space-lg) var(--content-gutter);
}

/* TV-режим: без шапки, на весь экран */
body.tv-mode .main {
    max-width: none;
    padding: 0.5rem 1rem;
}

/* Сообщения */
.flash-messages {
    margin-bottom: 1rem;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-1);
}

.flash-success {
    border-color: rgba(22, 163, 74, 0.30);
    background: rgba(22, 163, 74, 0.10);
    color: var(--color-text);
}

.flash-error {
    border-color: rgba(239, 68, 68, 0.30);
    background: rgba(239, 68, 68, 0.10);
    color: var(--color-text);
}

.flash-warning {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-text);
}

.flash-info {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(96, 165, 250, 0.12);
    color: var(--color-text);
}

/* Всплывающее уведомление (toast) */
.toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(20px);
    max-width: min(720px, calc(100% - 32px));
    background: rgba(2, 6, 23, 0.86);
    color: var(--header-fg);
    border: 1px solid rgba(148,163,184,0.18);
    padding: 0.75rem 1rem;
    border-radius: 999px;
    box-shadow: var(--shadow-2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 400;
    font-weight: 600;
    text-align: center;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast.toast-error {
    background: rgba(185, 28, 28, 0.92);
    border-color: rgba(239, 68, 68, 0.3);
}
.toast.toast-success {
    background: rgba(21, 128, 61, 0.92);
    border-color: rgba(22, 163, 74, 0.3);
}

/* Страница */
.page-header {
    margin-bottom: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
}

.page-header h1 {
    margin: 0;
    font-size: var(--typo-page-title);
    line-height: 1.12;
}

.page-header .subtitle {
    flex-basis: 100%;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.page-header-actions .btn {
    white-space: normal;
}

/* TV-dashboard header: everything in one row */
.tv-dash-header,
.page-header:has(.tv-dash-actions) {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.tv-dash-actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.tv-dash-actions .btn {
    white-space: nowrap;
}
.tv-dash-label {
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: 600;
}
.tv-dash-select {
    width: auto;
    min-width: 90px;
}
@media (max-width: 768px) {
    .tv-dash-header,
    .page-header:has(.tv-dash-actions) {
        flex-wrap: wrap;
    }
    .tv-dash-actions {
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.page-header-with-actions .theme-toggle {
    margin-left: auto;
}

.page-header-actions-sep {
    width: 1px;
    height: 1.5em;
    background: var(--color-border);
    margin: 0 0.25rem;
}

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

/* Карточки */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1);
    padding: 1.15rem 1.25rem;
    margin-bottom: var(--space-lg);
    min-width: 0;
    overflow-wrap: break-word;
}

body.theme-style-6 .card,
body.theme-style-6 .project-card,
body.theme-style-6 .project-card-mini,
body.theme-style-6 .project-card-link,
body.theme-style-6 .data-table,
body.theme-style-6 .users-table {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 250, 242, 0.88)),
        var(--color-surface);
    border-color: rgba(92, 61, 36, 0.16);
}

body.theme-style-6 .card h2,
body.theme-style-6 .page-header h1,
body.theme-style-6 .project-name {
    color: var(--brand-wood-dark);
}

@media (prefers-color-scheme: dark) {
    body.theme-style-6 .card h2,
    body.theme-style-6 .page-header h1,
    body.theme-style-6 .project-name {
        color: var(--color-text);
    }
}

.card h2 {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--typo-card-title);
    line-height: 1.2;
}

.card-meta {
    margin-top: 0.75rem;
    color: var(--color-text-muted);
    font-size: var(--typo-subtitle);
}

.form-hint {
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--typo-hint);
}

.amocrm-leads-card {
    background: var(--color-surface-2);
}

.amocrm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.amocrm-filters-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem 0.6rem;
    align-items: end;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.6rem;
    margin-bottom: 0.75rem;
}

.amocrm-filter-box {
    min-width: 280px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem;
}

.amocrm-filters-compact .amocrm-filter-box {
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.amocrm-filters-compact .amocrm-filter-box label {
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amocrm-filters-compact .amocrm-filter-box .form-control {
    min-height: var(--form-compact-min-height);
    padding: var(--form-compact-padding-y) 0.6rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

.amocrm-filters-compact .amocrm-filter-box .form-hint {
    display: none;
}

.amocrm-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.amocrm-filters-compact .amocrm-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.1rem;
}

.amocrm-filters-compact .amocrm-filter-actions .btn {
    min-height: var(--form-compact-min-height);
    padding: var(--btn-compact-padding-y) 0.75rem;
    font-size: 0.88rem;
}

.amocrm-leads-table th,
.amocrm-leads-table td {
    font-size: 0.92rem;
}

/* AmoCRM «Потенциальные клиенты»: не сжимать колонки — как у проектов, но без nth-child под 19 колонок */
table.users-table.amocrm-leads-table:not(.amocrm-projects-table) {
    width: max-content;
    min-width: 100%;
}

table.users-table.amocrm-leads-table:not(.amocrm-projects-table) tbody td {
    white-space: nowrap;
    vertical-align: middle;
}

table.users-table.amocrm-leads-table:not(.amocrm-projects-table) tbody td.amocrm-comment-cell {
    white-space: normal;
    max-width: 22rem;
    overflow-wrap: break-word;
}

/* AmoCRM «Проекты skanvika»: шапка переносится по словам; значения в строку, прокрутка по X */
.amocrm-projects-table.amocrm-leads-table {
    width: max-content;
    min-width: 100%;
}

/* Колонка широкая из-за tbody (nowrap) — перенос только у текста внутри span */
.amocrm-projects-table.amocrm-leads-table thead th {
    text-align: center;
    vertical-align: middle;
    padding: 0.45rem 0.3rem;
}

.amocrm-projects-table.amocrm-leads-table thead th .amocrm-prj-th-text {
    display: inline-block;
    max-width: 9rem;
    margin: 0 auto;
    text-align: center;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.25;
}

.amocrm-projects-table.amocrm-leads-table thead th:first-child .amocrm-prj-th-text {
    max-width: 2.25rem;
}

/* Перебить глобальный .users-table th { white-space: nowrap } */
table.users-table.amocrm-leads-table.amocrm-projects-table > thead > tr > th {
    white-space: normal !important;
}

.amocrm-projects-table.amocrm-leads-table tbody td {
    white-space: nowrap;
    vertical-align: middle;
}

/* Центр: дата заключения; площадь и суммы; итог договора; даты */
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(2),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(8),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(9),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(10),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(11),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(12),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(14),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(15),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(16),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(17),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(18) {
    text-align: center;
}

.amocrm-report-view {
    display: none;
}

.amocrm-report-view.is-active {
    display: block;
}

.amocrm-cards-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.amocrm-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 360px);
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.amocrm-kanban-col {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    min-height: 220px;
}

.amocrm-kanban-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.amocrm-kanban-col-head h3 {
    margin: 0;
    font-size: 1rem;
}

.amocrm-kanban-col-head span {
    background: var(--color-surface-2);
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.85rem;
}

.amocrm-kanban-col-body {
    padding: 0.65rem;
    display: grid;
    gap: 0.55rem;
}

.amocrm-kanban-card {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.55rem;
}

.amocrm-kanban-title {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.amocrm-kanban-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2rem;
    font-size: 0.88rem;
}

.amocrm-kanban-comment {
    margin: 0.45rem 0 0 0;
    font-size: 0.88rem;
    font-weight: 700;
}

.amocrm-summary-kpis {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    margin-bottom: 0.8rem;
}

.amocrm-kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.7rem;
}

.amocrm-kpi-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.amocrm-kpi-value {
    margin-top: 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.amocrm-summary-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.amocrm-lead-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.8rem;
}

.amocrm-lead-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.amocrm-lead-title {
    font-weight: 700;
    line-height: 1.3;
}

.amocrm-lead-price {
    font-weight: 700;
    white-space: nowrap;
}

.amocrm-lead-meta {
    display: grid;
    gap: 0.35rem 0.9rem;
    grid-template-columns: 1fr 1fr;
    font-size: 0.9rem;
}

.amocrm-lead-comment {
    margin: 0.6rem 0 0 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.amocrm-group-block {
    margin-bottom: 1rem;
}

.amocrm-group-block h3 {
    margin: 0 0 0.5rem 0;
}

.amocrm-mobile-list {
    display: grid;
    gap: 0.7rem;
}

.amocrm-mobile-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem;
}

.amocrm-mobile-title {
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.amocrm-mobile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
    font-size: 0.9rem;
}

.amocrm-mobile-comment {
    margin-top: 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.amocrm-comment-cell {
    font-weight: 700;
}

.amocrm-sources-weekly-table th,
.amocrm-sources-weekly-table td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-color: var(--color-border-strong);
    padding: 0.3rem 0.35rem;
}

.amocrm-sources-weekly-table td:first-child {
    text-align: left;
    font-weight: 600;
}

.amocrm-sources-weekly-table td:last-child {
    white-space: normal;
    text-align: left;
}

.amocrm-sources-weekly-table thead th {
    background: var(--brand-gold);
    color: var(--color-accent-contrast);
    font-weight: 700;
    border-width: 1.5px;
}

.amocrm-sources-weekly-table thead .source-group {
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.amocrm-sources-weekly-table .source-tag-head {
    min-width: 42px;
    height: 112px;
    padding: 0;
    vertical-align: bottom;
    position: relative;
}

.amocrm-sources-weekly-table .source-tag-rot {
    position: absolute;
    left: 8px;
    bottom: 10px;
    transform: rotate(-45deg);
    transform-origin: left bottom;
    white-space: nowrap;
    font-size: 0.86rem;
}

.amocrm-sources-weekly-table .source-value {
    font-variant-numeric: tabular-nums;
}

.amocrm-sources-weekly-table .total-leads-cell {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.amocrm-sources-weekly-table col.col-week { width: 72px; }
.amocrm-sources-weekly-table col.col-source { width: 48px; }
.amocrm-sources-weekly-table col.col-total { width: 108px; }
.amocrm-sources-weekly-table col.col-meetings { width: 132px; }
.amocrm-sources-weekly-table col.col-comment { width: 340px; }

.amocrm-sources-weekly-table .source-comment-input {
    min-height: 38px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.amocrm-sources-monthly-table th,
.amocrm-sources-monthly-table td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.amocrm-sources-monthly-table th {
    font-size: 0.84rem;
}

.amocrm-sources-monthly-table .form-control {
    min-height: var(--form-compact-min-height);
    padding: var(--form-compact-padding-y) 0.45rem;
    font-size: 0.88rem;
}

/* Фиксация первых 2 столбцов в месячном отчёте при скролле вправо */
.amocrm-sources-monthly-table th:nth-child(1),
.amocrm-sources-monthly-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--color-surface);
}

.amocrm-sources-monthly-table th:nth-child(2),
.amocrm-sources-monthly-table td:nth-child(2) {
    position: sticky;
    left: 90px;
    z-index: 3;
    background: var(--color-surface);
}

.amocrm-sources-monthly-table thead th:nth-child(1),
.amocrm-sources-monthly-table thead th:nth-child(2) {
    z-index: 4;
    background: var(--brand-gold);
}

@media (max-width: 860px) {
    .amocrm-filter-box {
        min-width: 100%;
    }
    .amocrm-filter-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .amocrm-filters-compact {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    .amocrm-filters-compact .amocrm-filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .amocrm-lead-meta {
        grid-template-columns: 1fr;
    }
    .amocrm-summary-kpis {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
    .amocrm-summary-grid {
        grid-template-columns: 1fr;
    }
    .amocrm-filters-compact {
        grid-template-columns: 1fr;
        padding: 0.55rem;
    }
    .amocrm-filters-compact .amocrm-filter-actions .btn {
        width: 100%;
    }
}

.td-null {
    color: var(--color-danger);
    font-weight: 600;
    font-style: italic;
}

/* Формы */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--typo-label);
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: var(--form-compact-padding-y) var(--form-compact-padding-x);
    font-size: var(--typo-control);
    line-height: 1.3;
    color: var(--color-text);
    background: rgba(255, 252, 247, 0.92);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-height: var(--form-compact-min-height);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.form-control::placeholder {
    color: var(--color-text-soft);
}

.form-control:hover {
    border-color: var(--color-border-strong);
}

.form-control:focus {
    outline: none;
    border-color: rgba(184, 122, 61, 0.62);
}

.form-control:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(148,163,184,0.95) 50%),
        linear-gradient(135deg, rgba(148,163,184,0.95) 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px),
        calc(100% - 2rem) 50%;
    background-size: 5px 5px, 5px 5px, 1px 60%;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 3.0rem;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    box-shadow: none;
}

.password-toggle-icon {
    padding: 0;
    width: 34px;
}

.password-toggle-icon svg {
    display: block;
}

.password-toggle-icon .icon-eye-off {
    display: none;
}

.password-toggle-icon.is-visible .icon-eye {
    display: none;
}

.password-toggle-icon.is-visible .icon-eye-off {
    display: block;
}

.password-toggle:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.password-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/*
 * Поле пароля = тот же input.form-control, что у логина (одинаковая высота и рамка).
 * Кнопка глаза — absolute поверх правого края: фокус/autofill закрашивают всю ширину под ней.
 */
.password-field--modern {
    position: relative;
    display: block;
    width: 100%;
}

.login-form .form-group .password-field.password-field--modern {
    display: block;
}

.password-field--modern .password-field__input,
.password-field--modern .form-control.password-field__input {
    width: 100%;
    padding-right: 2.75rem;
    /* остальное — от .form-control: border, radius, min-height, фокус, голубая обводка */
}

/* Три класса на кнопке — выше, чем отдельно .password-toggle-icon, чтобы не потерять absolute */
.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    box-shadow: none;
    border-radius: 50%;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield:hover {
    background: rgba(148, 163, 184, 0.14);
    color: var(--color-text);
}

.password-field--modern .password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield,
.password-field--modern .form-control.password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield {
    color: var(--color-text-muted);
    background: transparent;
}

.password-field--modern .password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield:hover,
.password-field--modern .form-control.password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield:hover {
    background: rgba(96, 165, 250, 0.12);
    color: var(--color-text);
}

.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield:active {
    transform: translateY(-50%) scale(0.94);
}

.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield:focus-visible {
    outline: none;
    box-shadow: none;
}

.password-field--modern .password-toggle-icon .icon-eye,
.password-field--modern .password-toggle-icon .icon-eye-off {
    transition: opacity 0.2s ease, transform 0.22s ease;
}

/* Пароль скрыт (точки): закрытый глаз */
.password-field--modern .password-toggle-icon .icon-eye-off {
    display: block;
    opacity: 1;
    transform: scale(1);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -11px;
    margin-top: -11px;
    pointer-events: none;
}

.password-field--modern .password-toggle-icon .icon-eye {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -11px;
    margin-top: -11px;
    opacity: 0;
    transform: scale(0.88);
    pointer-events: none;
}

.password-field--modern .password-toggle-icon:not(.is-visible) .icon-eye {
    display: block;
}

/* Не задавать position:relative здесь — перебивает position:absolute у .password-toggle--infield
   и кнопка уезжает в поток. У absolute-кнопки дочерние svg всё равно якорятся к ней. */

/* Пароль виден: открытый глаз (перебиваем глобальные .password-toggle-icon.is-visible) */
.password-field--modern .password-toggle-icon.is-visible .icon-eye-off {
    display: block;
    opacity: 0;
    transform: scale(0.88);
}

.password-field--modern .password-toggle-icon.is-visible .icon-eye {
    display: block;
    opacity: 1;
    transform: scale(1);
}

.login-form .form-group .password-field--modern {
    max-width: 100%;
}

@media (max-width: 480px) {
    .password-field--modern .password-field__input,
    .password-field--modern .form-control.password-field__input {
        font-size: 16px; /* меньше зум iOS при фокусе */
    }
}

textarea.form-control {
    min-height: 112px;
    padding: var(--form-compact-padding-y) var(--form-compact-padding-x);
    line-height: 1.4;
    resize: vertical;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.95rem 1rem;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
}

.form-row .form-group.form-group-wide {
    flex: 2 1 260px;
    min-width: 260px;
}

.form-row .form-group.form-group-medium {
    flex: 1.5 1 220px;
    min-width: 220px;
}

.form-row .form-group.form-group-compact {
    flex: 1 1 120px;
    min-width: 120px;
}

.form-row .form-group.form-group-filter-compact {
    flex: 0 1 var(--field-w-date);
    min-width: min(11rem, 100%);
    max-width: var(--field-w-date);
}

.form-row .form-group.form-group-actions-end {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-width: 140px;
}

.form-row .form-group.form-group-actions-end .btn {
    min-width: 140px;
}

.action-link-inline {
    margin-left: 0.5rem;
}

.table-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.table-cell-actions > form {
    display: inline-flex;
    margin: 0;
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.95rem 1rem;
}
.form-inline .form-control {
    flex: 0 1 auto;
}

/* ========== Компактные формы: тулбар + стек «подпись → поле → подсказка» ========== */
.form-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--form-toolbar-gap-row) var(--form-toolbar-gap-col);
    width: 100%;
}

.form-toolbar--nowrap {
    flex-wrap: nowrap;
}

.form-field-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.form-field-stack > label {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
}

.form-field-stack .form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-field-stack .form-hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
}

.form-col--date {
    flex: 0 0 auto;
    width: var(--field-w-date);
    max-width: 100%;
}

.form-col--select-sm {
    flex: 0 0 auto;
    width: var(--field-w-select-sm);
    max-width: 100%;
}

.form-col--select-md {
    flex: 0 0 auto;
    width: var(--field-w-select-md);
    max-width: 100%;
}

.form-col--select-lg {
    flex: 1 1 var(--field-w-select-lg);
    min-width: min(var(--field-w-select-md), 100%);
    max-width: min(var(--field-w-select-lg), 100%);
    width: auto;
}

.form-col--num-sm {
    flex: 0 0 auto;
    width: var(--field-w-num-sm);
    max-width: 100%;
}

.form-col--num-md {
    flex: 0 0 auto;
    width: var(--field-w-num-md);
    max-width: 100%;
}

.form-col--email {
    flex: 0 0 auto;
    width: min(var(--field-w-email), 100%);
    max-width: 100%;
}

.form-col--name {
    flex: 1 1 14rem;
    min-width: min(12rem, 100%);
    max-width: min(var(--field-w-name-max), 100%);
}

.form-col--year {
    flex: 0 0 auto;
    width: var(--field-w-year);
    max-width: 100%;
}

.form-col--month {
    flex: 0 0 auto;
    width: var(--field-w-month);
    max-width: 100%;
}

.form-col--month-nav {
    flex: 0 0 auto;
    width: var(--field-w-month-nav);
    max-width: 100%;
}

/* AmoCRM settings + любые формы с теми же ширинами */
.form-col--amocrm-sub {
    flex: 0 0 auto;
    width: var(--field-amocrm-sub);
    max-width: 100%;
}

.form-col--amocrm-tok {
    flex: 0 1 auto;
    width: var(--field-amocrm-tok);
    max-width: min(var(--field-amocrm-tok), 100%);
    min-width: 0;
}

.form-col--text-wide {
    flex: 1 1 var(--field-w-stage-input);
    min-width: min(var(--field-w-stage-input), 100%);
    max-width: 100%;
}

.form-toolbar--align-center {
    align-items: center;
}

.form-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.amocrm-sources-top-toolbar {
    align-items: flex-end;
}

.amocrm-sources-top-toolbar .form-field-stack > label {
    font-size: 0.92rem;
    font-weight: 600;
}

body.amocrm-settings-page .amocrm-settings-form > .form-toolbar {
    gap: 0.65rem 1.1rem;
}

.form-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    flex: 0 0 auto;
    align-self: flex-end;
}

/* Выровнять кнопки с полями ввода (ниже подписи) */
.form-toolbar-actions--align-fields {
    align-self: center;
    padding-top: calc(0.92rem * 1.25 + 0.35rem);
    padding-bottom: 0.1rem;
}

@media (max-width: 900px) {
    .form-toolbar--nowrap {
        flex-wrap: wrap;
    }

    .form-col--date,
    .form-col--select-sm,
    .form-col--select-md,
    .form-col--email {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    .form-col--select-lg,
    .form-col--name {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .form-col--year,
    .form-col--month,
    .form-col--month-nav,
    .form-col--amocrm-sub,
    .form-col--amocrm-tok {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .form-col--text-wide {
        flex: 1 1 100%;
    }

    .form-toolbar-actions--align-fields {
        padding-top: 0.25rem;
        align-self: flex-start;
        width: 100%;
    }
}

/* Страница входа — без шапки и подвала */
body.login-page .header,
body.login-page .footer {
    display: none !important;
}

/* Страница входа */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(47, 93, 58, 0.20), transparent 55%),
        var(--color-bg);
}

.login-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
    padding: 2rem 2rem 1.75rem;
    width: 100%;
    max-width: 400px;
}

.login-logo {
    display: block;
    width: min(260px, 85%);
    height: auto;
    margin: 0 auto 1.25rem;
    /* чёрный прямоугольный фон вокруг логотипа скрываем через clip */
    border-radius: 6px;
    overflow: hidden;
}

.login-title {
    text-align: center;
    margin: 0 0 0.25rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}

.login-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem 0;
    font-size: 0.88rem;
}

.login-form {
    text-align: center;
}
.login-form .form-group {
    margin-bottom: 0.65rem;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.login-form .form-group label {
    display: block;
    text-align: center;
}
.login-form .form-group .form-control {
    width: 100%;
}
.login-form .form-group .password-field {
    display: flex;
}
.login-form .btn {
    margin-top: 0.5rem;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Кнопка «Войти» — случайный цвет при каждой загрузке */
.login-form .btn-primary {
    --login-btn-color: var(--login-btn-random, var(--brand-green));
    background: var(--login-btn-color) !important;
    border-color: var(--login-btn-color) !important;
    color: #fff !important;
}

.login-hint {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .login-hint {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .login-hint-table {
        min-width: 520px;
    }
}

.login-hint ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.login-hint-table {
    width: 100%;
    margin-top: 0.75rem;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.login-hint-table th,
.login-hint-table td {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}
.login-hint-table thead th {
    background: var(--color-surface-2);
    font-weight: 600;
}

@media (min-width: 641px) {
    .login-hint-table thead th {
        white-space: nowrap;
    }
}
.login-hint-table tr:nth-child(even) td {
    background: var(--color-surface-2);
}
.login-hint-table code {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    font-size: 0.85em;
    font-family: monospace;
    color: var(--brand-green-2);
}

/* Проекты */
.project-list-simple { list-style: none; padding: 0; margin: 0; }
.project-list-simple li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.project-list-simple a { font-weight: 500; }

.project-list, .project-grid, .dashboard-grid {
    display: grid;
    gap: 1rem;
}

.project-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.project-card, .project-card-mini, .project-card-link {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s, box-shadow 0.2s;
}

body.theme-style-6 .project-card,
body.theme-style-6 .project-card-mini,
body.theme-style-6 .project-card-link {
    border-top: 3px solid rgba(184, 122, 61, 0.56);
}

.project-card:hover, .project-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
a.project-card:focus-visible,
a.project-card-link:focus-visible,
a.project-card-mini:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.project-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.project-type {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-address {
    margin: 0.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.project-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.project-card-photo {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: -1.25rem -1.25rem 1rem -1.25rem;
}

.project-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* У клиента — фото отцентровано в карточке */
.project-card-photo-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-2);
}

.project-card-photo-centered img {
    object-fit: contain;
    object-position: center;
}

/* У админа — миниатюра */
.project-card-photo-thumb {
    height: 120px;
}

.project-card-photo-mini {
    height: 100px;
    margin: -1rem -1rem 0.75rem -1rem;
}

/* === 4 варианта карточки проекта (превью) === */

/* Вариант A: Классика — фото cover сверху */
.project-card-variant-a .project-card-photo {
    height: 160px;
    margin: -1.25rem -1.25rem 1rem -1.25rem;
    border-radius: var(--radius) var(--radius) 0 0;
}
.project-card-variant-a .project-card-photo img { object-fit: cover; }

/* Вариант B: Горизонтальная — фото слева, текст справа */
.project-card-variant-b {
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
}
.project-card-variant-b .project-card-photo {
    width: 140px;
    min-width: 140px;
    height: auto;
    min-height: 120px;
    margin: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    flex-shrink: 0;
}
.project-card-variant-b .project-card-photo img { object-fit: cover; height: 100%; min-height: 120px; }
.project-card-variant-b .project-card-inner {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Вариант C: Оверлей — фото на весь фон, текст поверх градиента */
.project-card-variant-c {
    position: relative;
    padding: 0;
    min-height: 200px;
    overflow: hidden;
}
.project-card-variant-c .project-card-photo {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    border-radius: var(--radius);
}
.project-card-variant-c .project-card-photo img { object-fit: cover; height: 100%; }
.project-card-variant-c .project-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.25rem 1.25rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
}
.project-card-variant-c .project-card-overlay .project-name { color: #fff; }
.project-card-variant-c .project-card-overlay .project-type { color: var(--color-accent); }
.project-card-variant-c .project-card-overlay .project-address,
.project-card-variant-c .project-card-overlay .project-meta { color: rgba(255,255,255,0.85); }

/* Плейсхолдер при отсутствии фото (вариант C) */
.project-card-photo-placeholder {
    background: var(--color-text-muted);
    background:
        linear-gradient(135deg, rgba(74, 47, 29, 0.88), rgba(47, 93, 58, 0.78)),
        linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.08) 75%, transparent 75%, transparent);
    background-size: auto, 18px 18px;
}

/* === Варианты отображения проектов для админа (много объектов) === */

/* Вариант 1: Таблица */
.admin-projects-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-projects-table th,
.admin-projects-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.admin-projects-table th {
    font-weight: 600;
    background: var(--color-surface-2);
    font-size: 0.9rem;
    color: var(--brand-wood-dark);
}
.admin-projects-table tr:hover {
    background: var(--color-surface-2);
}
.admin-projects-table a {
    color: inherit;
    text-decoration: none;
}
.admin-projects-table a:hover {
    color: var(--color-accent);
}
.admin-projects-table .table-filter-row th {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}
.admin-projects-table .table-filter {
    width: 100%;
    min-width: 60px;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
}
.admin-projects-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.admin-projects-thumb-placeholder {
    width: 48px;
    height: 48px;
    background: #ddd;
    border-radius: 4px;
}

/* Вариант 2: Компактные строки (ленточки) */
.admin-project-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.admin-project-row:hover {
    box-shadow: var(--shadow-1);
    border-color: var(--color-accent);
}
.admin-project-row-thumb {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}
.admin-project-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-project-row-thumb-placeholder {
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.75rem;
}
.admin-project-row-body {
    flex: 1;
    min-width: 0;
}
.admin-project-row-body .project-name {
    font-size: 1rem;
    margin-right: 0.5rem;
}
.admin-project-row-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.admin-project-row-badges {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding-left: 0.5rem;
}

.admin-project-row-badges .project-badge {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
}

/* Вариант 3: Плотная сетка (мини-карточки) */
.admin-projects-dense {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.admin-project-dense {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.admin-project-dense .project-card-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: var(--radius);
    height: 100%;
}
.admin-project-dense .project-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-project-dense .project-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    font-size: 0.9rem;
}

/* Вариант 5: Переключатель сетка/список (только CSS для списка) */
.admin-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.admin-view-toggle .btn-small.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Компактный переключатель отображения (админ + мастер) */
.card-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.card-header-row > h2 {
    margin: 0;
    line-height: 1.2;
}

.display-toggle-compact {
    display: flex;
    gap: 0.2rem;
    padding: 0.18rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.display-toggle-compact .display-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-height-sm);
    min-height: var(--control-height-sm);
    padding: 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.display-toggle-compact .display-btn:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: var(--color-surface-2);
}

.display-toggle-compact .display-btn.active {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.dashboard-recent-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Вариант D: Акцентная рамка — оранжевая полоса слева, фото по центру */
.project-card-variant-d {
    border-left: 4px solid var(--color-accent);
}
.project-card-variant-d .project-card-photo {
    height: 140px;
    margin: -1.25rem -1.25rem 1rem -1.25rem;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}
.project-card-variant-d .project-card-photo img { object-fit: contain; }

.project-photo-gallery-preview {
    margin-bottom: 1rem;
}

.project-photo-gallery-preview .project-photo-preview-track {
    max-height: 200px;
    border-radius: var(--radius);
}
.project-gallery-edit .project-photo-preview-track {
    max-height: none;
}

/* Не трогать режим редактирования галереи (.project-gallery-edit) — там плитка 4:3 и cover */
.project-photo-gallery-preview:not(.project-gallery-edit) .project-gallery-slide .project-photo-preview {
    max-height: 200px;
    width: auto;
    max-width: 100%;
}

.project-gallery-slide-edit {
    position: relative;
}
.project-gallery-slide-edit .gallery-remove-form {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    margin: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.project-gallery-slide-edit:hover .gallery-remove-form {
    opacity: 1;
}
.project-gallery-slide-edit .gallery-remove-btn {
    padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
    line-height: 1;
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.project-gallery-slide-edit .gallery-remove-btn:hover {
    background: #c82333;
    border-color: #bd2130;
    color: #fff;
}

/* Галерея проекта у админа — слайдер как у заказчика + кнопка удаления поверх плитки */
.project-gallery-section-edit .stage-photo-tile {
    position: relative;
}
.gallery-remove-form-tile {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    margin: 0;
    z-index: 3;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}
.stage-photo-tile:hover .gallery-remove-form-tile,
.stage-photo-tile:focus-within .gallery-remove-form-tile {
    opacity: 1;
}
.gallery-remove-form-tile .btn.gallery-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-height: 26px;
    min-width: 26px;
    padding: 0;
    line-height: 1;
    font-size: 0.8rem;
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.gallery-remove-form-tile .btn.gallery-remove-btn:hover {
    background: #c82333;
    border-color: #bd2130;
    color: #fff;
}

/* Галерея в режиме редактирования: адаптивная сетка 4→2→1, плитка 4:3, cover (как /test/gallery-grid-demo) */
.project-gallery-edit .project-gallery-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    overflow-x: visible;
    scroll-snap-type: none;
    max-width: 100%;
}
@media (max-width: 900px) {
    .project-gallery-edit .project-gallery-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .project-gallery-edit .project-gallery-track {
        grid-template-columns: 1fr;
    }
}
.project-gallery-edit .project-gallery-slide {
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 3;
    height: auto;
    scroll-snap-align: none;
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
    background: var(--color-surface-2);
}
.project-gallery-edit .project-gallery-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* img.project-photo-preview + ниже .project-photo-card .project-photo-preview { contain } — перебиваем жёстко */
.project-photo-card .project-gallery-edit .project-gallery-slide img.project-photo-preview,
.project-photo-card .project-gallery-edit .project-gallery-slide-edit img.project-photo-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
    margin-bottom: 0;
    border-radius: 0;
}

.project-photo-card .project-photo-preview {
    max-width: 300px;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.project-photo-form {
    margin-top: 1rem;
}

/* Кнопки загрузки файлов — единый стиль skanvika, эмодзи по типу раздела */
.photo-upload-btn-wrap,
.file-upload-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.photo-upload-input,
.photo-upload-input-hidden,
.file-upload-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* Базовый стиль всех кнопок выбора файла */
.photo-upload-btn,
.btn-photo-upload,
.btn-file-upload {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    min-height: var(--form-compact-min-height);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
    background: var(--brand-green);
    color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: var(--btn-shadow);
}

.photo-upload-btn:hover,
.btn-photo-upload:hover,
.btn-file-upload:hover {
    background: var(--brand-green-2);
    color: #fff;
    transform: translateY(-1px);
}

.photo-upload-btn:active,
.btn-photo-upload:active,
.btn-file-upload:active {
    transform: translateY(0);
}

/* Эмодзи в начале кнопки — в одну строку с надписью, выровнены по центру */
.photo-upload-btn,
.btn-photo-upload,
.btn-file-upload {
    line-height: 1.2;
}

.photo-upload-btn::before,
.btn-photo-upload::before,
.btn-file-upload[data-emoji]::before {
    display: inline-block;
    line-height: 1;
    font-size: 1.1em;
    vertical-align: middle;
    transform: translateY(-0.08em);
}

.photo-upload-btn::before,
.btn-photo-upload::before {
    content: "📷 ";
}

.btn-file-upload[data-emoji]::before {
    content: attr(data-emoji) " ";
}

.photo-upload-count {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.photo-upload-count.ok {
    color: var(--color-success, #22c55e);
}

.photo-upload-count.warn {
    color: var(--color-warning, #eab308);
}

.file-upload-filename {
    font-size: 0.85rem;
    color: var(--color-success, #22c55e);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-group-photo-upload .photo-upload-btn-wrap,
.form-group-file-upload .file-upload-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Мастер: превью выбранных фото с отметкой «отправить» */
.photo-pick-list {
    margin-top: 0.75rem;
}
.photo-pick-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.45rem;
    margin-bottom: 0;
}
.photo-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}
.modal-report .photo-pick-list,
.modal-substage .photo-pick-list {
    width: 100%;
}
.photo-pick-count {
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.photo-pick-tile {
    position: relative;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--color-bg-elevated, #f4f4f5);
}
.photo-pick-tile.is-selected {
    border-color: var(--brand-green, #16a34a);
}
.photo-pick-tile-inner {
    display: block;
    position: relative;
    cursor: pointer;
    margin: 0;
}
.photo-pick-preview {
    display: block;
    text-decoration: none;
    color: inherit;
}
.photo-pick-tile-inner img {
    width: 100%;
    height: 5.5rem;
    object-fit: cover;
    display: block;
    vertical-align: top;
}
.photo-pick-check {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 1.15rem;
    height: 1.15rem;
    z-index: 1;
    margin: 0;
}
.photo-pick-label {
    display: block;
    font-size: 0.68rem;
    text-align: center;
    padding: 0.15rem 0.25rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    line-height: 1.2;
}
.photo-pick-remove {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    z-index: 2;
    width: 1.6rem;
    min-height: 1.6rem;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    border-radius: var(--radius-sm, 6px);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-pick-remove:hover {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
}

/* Создание проекта: заметная «кнопка»-summary, форма по умолчанию свёрнута у всех ролей */
.admin-projects-page #project-create-form .project-create-collapsible > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    margin: 0;
    border-radius: var(--radius-md, 10px);
    border: 1px solid rgba(37, 99, 235, 0.35);
    background: linear-gradient(145deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.65));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary::-webkit-details-marker {
    display: none;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary:hover {
    border-color: rgba(37, 99, 235, 0.55);
    background: linear-gradient(145deg, rgba(239, 246, 255, 1), rgba(191, 219, 254, 0.75));
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary:focus {
    outline: none;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary:focus-visible {
    outline: 2px solid var(--brand-green, #2f5d3a);
    outline-offset: 2px;
}
.admin-projects-page #project-create-form .project-create-collapsible[open] > summary {
    border-color: rgba(37, 99, 235, 0.45);
    background: linear-gradient(145deg, rgba(224, 231, 255, 0.5), rgba(239, 246, 255, 0.9));
    margin-bottom: 0.5rem;
}
.admin-projects-page #project-create-form .project-create-summary-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-green-2, #3a7a4a), var(--brand-green, #2f5d3a));
    box-shadow: 0 2px 8px rgba(47, 93, 58, 0.35);
    transition: transform 0.25s ease;
}
.admin-projects-page #project-create-form .project-create-collapsible[open] .project-create-summary-icon {
    transform: rotate(45deg);
}
.admin-projects-page #project-create-form .project-create-summary-copy {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.admin-projects-page #project-create-form .project-create-summary-h2 {
    margin: 0 0 0.2rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.admin-projects-page #project-create-form .project-create-summary-hint {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: #475569;
}
.admin-projects-page #project-create-form .project-create-summary-cta {
    flex-shrink: 0;
    display: none;
}
@media (min-width: 520px) {
    .admin-projects-page #project-create-form .project-create-summary-cta {
        display: block;
    }
    .admin-projects-page #project-create-form .project-create-summary-cta-inner {
        display: inline-block;
        padding: 0.4rem 0.75rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: #1e40af;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(37, 99, 235, 0.35);
        border-radius: 999px;
    }
    .admin-projects-page #project-create-form .project-create-collapsible[open] .project-create-cta-when-closed,
    .admin-projects-page #project-create-form .project-create-collapsible:not([open]) .project-create-cta-when-open {
        display: none;
    }
    .admin-projects-page #project-create-form .project-create-collapsible > summary:hover .project-create-summary-cta-inner {
        background: #fff;
        border-color: rgba(37, 99, 235, 0.5);
    }
}
.admin-projects-page #project-create-form .project-create-collapsible-body {
    padding-top: 0.15rem;
}

/* Единый паттерн action-формы для создания проекта */
.project-create-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
}
.project-create-form .form-row {
    align-items: flex-start;
}
.project-create-form .form-row-uploads {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: stretch;
}
.project-create-form .form-row-uploads .form-group {
    min-width: 0;
    margin-bottom: 0;
    align-self: stretch;
}
.project-create-form .photo-upload-btn-wrap,
.project-create-form .file-upload-wrap,
.project-create-form .form-group-submit-inner {
    display: grid;
    grid-template-rows: minmax(var(--control-height), 1fr) 1.15rem;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
}
.project-create-form .photo-upload-btn,
.project-create-form .btn-file-upload,
.project-create-form .form-row-uploads .form-group-create-client .btn-create-client,
.project-create-form .form-row-uploads .form-group-submit .btn-primary {
    width: 100%;
    height: 100%;
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}
.project-create-form .photo-upload-count,
.project-create-form .file-upload-filename,
.project-create-form .project-create-meta-spacer {
    display: block;
    min-height: 1.15rem;
    max-width: none;
    line-height: 1.25;
}
.project-create-form .project-create-meta-spacer {
    visibility: hidden;
}
.project-create-form .form-row-uploads .form-group-submit {
    align-self: stretch;
}
.project-create-form .form-row-uploads .form-group-submit-inner {
    align-items: stretch;
}
.project-create-form .form-row-uploads .form-group-create-client .btn-create-client {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-height: var(--form-compact-min-height);
    padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-green, #2f5d3a), var(--brand-green-2, #3a7a4a));
    color: #fff;
    border: 1px solid var(--brand-green, #2f5d3a);
    box-shadow: var(--btn-shadow);
}
.admin-projects-page .form-row-uploads .form-group-create-client .btn-create-client:hover {
    background: linear-gradient(135deg, #1e4a2d, var(--brand-green, #2f5d3a));
    color: #fff;
    border-color: #1e4a2d;
}
.project-create-form .form-row-uploads .form-group-create-client .btn-create-client:focus-visible {
    box-shadow: 0 0 0 3px rgba(47, 93, 58, 0.45), var(--btn-shadow);
}
.project-client-modal-card {
    max-width: 420px;
}
.project-client-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.project-client-modal-title {
    margin: 0;
}
.project-client-modal-footer {
    margin-top: 1rem;
}

.project-card-mini {
    padding: 1rem;
}

.dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    min-height: 100%;
}

.dashboard-card h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    width: 100%;
}

.dashboard-card .btn {
    width: 100%;
    max-width: none;
    align-self: stretch;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: normal;
}

.dashboard-card .btn + .btn {
    margin-top: 0.5rem;
}

.dashboard-card .card-meta {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    width: 100%;
}

.admin-dashboard-page .dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}

.admin-dashboard-page .dashboard-card {
    padding: 0.9rem 0.95rem;
    gap: 0.55rem;
    min-height: 0;
}

.admin-dashboard-page .dashboard-card h2 {
    font-size: 0.98rem;
}

.admin-dashboard-page .dashboard-card .btn {
    min-height: 36px;
}

.admin-dashboard-page .dashboard-card .card-meta {
    margin-top: 0.1rem;
    font-size: 0.82rem;
}

/* Этапы */
.stages-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stage-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.65rem 0.75rem;
    background: var(--color-surface-2);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.stage-item-content {
    min-width: 0;
    /* Левый край поля названия: ручка + gap + номер + gap (без ручки — только номер + gap) */
    --stage-dates-indent: calc(28px + 0.5rem);
}

.stage-item-content--reorder {
    --stage-dates-indent: calc(1.35rem + 0.5rem + 28px + 0.5rem);
}

/* Верхняя строка: ручка (если есть) · номер · название · удалить */
.stage-item-row-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.stage-drag-handle {
    cursor: grab;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
    width: 1.35rem;
    flex-shrink: 0;
    text-align: center;
    padding: 0.15rem 0;
}

.stage-drag-handle:hover {
    color: var(--color-text);
}

.stage-drag-handle:active {
    cursor: grabbing;
}

.stage-item-wrapper.stage-draggable-wrap .stage-item.stage-item-with-drag {
    display: block;
}

.stage-order {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.stage-name-wrap {
    flex: 1;
    min-width: 0;
}

/* Этапы проекта: «Этап закрыт» и бейдж в строке с названием; без отдельной строки «Дата закрытия» и без заголовка «Фото:» */
.stages-list .stage-name-wrap--closure-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.25rem;
}
.stages-list .stage-name-heading {
    flex: 0 1 auto;
    min-width: 0;
}
.stages-list .stage-item-row-top .stage-name-wrap--closure-inline .stage-name-readonly {
    display: inline;
}
.stages-list .stage-name-wrap--closure-inline .stage-name-edit {
    width: auto;
    flex: 1 1 10rem;
    min-width: 7rem;
    max-width: min(100%, 22rem);
}
.stages-list .stage-top-inline-closure {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
}
.stages-list .stage-top-inline-closure .badge {
    font-size: 0.75rem;
    color: #fff;
}
.stages-list .stage-top-inline-gap {
    white-space: pre;
    user-select: none;
}

.stage-item-row-top .stage-delete-btn {
    flex-shrink: 0;
    margin-left: 0.15rem;
}

.stage-item-row-top .stage-title-text,
.stage-item-row-top .stage-name-edit {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
    color: #111827;
}

.stage-item-row-top .stage-name-readonly {
    display: block;
}

.stage-name-edit {
    width: 100%;
    max-width: none;
}

/* Вторая строка: даты с выравниванием по левому краю поля названия */
.stage-item-row-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 1rem;
    margin-top: 0.4rem;
    margin-left: var(--stage-dates-indent);
    padding-top: 0.45rem;
    border-top: 1px solid var(--color-border);
}

.stage-date-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.stage-date-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.stage-item-row-dates .stage-date-input {
    max-width: 11rem;
    min-width: 8.5rem;
}

.stage-date-input {
    max-width: 11rem;
}

.stage-item-row-dates-readonly {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.4rem;
    margin-left: var(--stage-dates-indent);
    padding-top: 0.45rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.stage-item-row-dates .stage-dates-readonly {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Карточки этапов для мастера и клиента */
.stage-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.stage-card.stage-done {
    border-left: 4px solid var(--color-success);
}

.stage-card.stage-done .stage-card-header {
    border-left-color: var(--color-success);
}

.stage-card.stage-pending {
    border-left: 4px solid var(--color-warning);
}

.stage-card.stage-pending .stage-card-header {
    border-left-color: var(--color-warning);
}

/* Этап с заявкой на редактирование (ожидает подтверждения админа) */
.stage-card.stage-pending-edit {
    border-left: 4px solid var(--color-danger);
    background: rgba(239, 68, 68, 0.08);
}

.stage-card.stage-pending-edit .stage-card-header {
    border-left-color: var(--color-danger);
}

.stage-pending-edit .stage-status-label {
    color: var(--color-danger) !important;
}

.edit-pending-note {
    color: var(--color-danger);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
}

/* Группа кнопок в ряд — единый размер, не съезжают */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.btn-row .btn,
.btn-row .btn-small,
.btn-row form {
    flex-shrink: 0;
}

.reject-details {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.reject-details summary {
    cursor: pointer;
    list-style: none;
}
.reject-details summary::-webkit-details-marker { display: none; }
.reject-form {
    position: static;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid #cfd6de;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 0;
    width: min(420px, 100%);
    max-width: 420px;
}
.reject-form textarea {
    width: 100%;
    min-height: 72px;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-backdrop[hidden] {
    display: none !important;
}
.modal-card {
    width: min(520px, 100%);
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 1rem;
}
.btn-row .btn,
.btn-row .btn-small {
    white-space: nowrap;
    min-width: fit-content;
}
.nav-approvals-dropdown .nav-dropdown-menu {
    right: 0;
    left: auto;
}
.btn-row form {
    display: inline-flex;
}

@media (max-width: 480px) {
    .btn-row .btn,
    .btn-row .btn-small {
        white-space: normal;
        min-width: 0;
    }
}

.takeover-actions .takeover-reject-form {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}
.takeover-actions .takeover-comment {
    width: 120px;
    min-width: 80px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
}

.import-extras-form {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}
.import-extras-form .import-file-input {
    width: 140px;
    min-width: 100px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.stage-actions-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.stage-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(15, 23, 42, 0.04);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-accent);
}

.stage-status-icon {
    font-size: 1.25rem;
}

.stage-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text);
}

.stage-dates {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.stage-status-label {
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 500;
}

.stage-done .stage-status-label {
    color: var(--color-success);
}

.stage-pending .stage-status-label {
    color: var(--color-warning);
}

.stages-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* Клиент — этапы: иконка, название, статус в одну линию; статусы выровнены по столбцу */
.client-stages .stage-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 14.5rem;
    column-gap: 0.65rem;
    align-items: center;
}
.client-stages .stage-status-icon {
    grid-column: 1;
}
.client-stages .stage-name {
    grid-column: 2;
    min-width: 0;
}
.client-stages .stage-status-label {
    grid-column: 3;
    margin-left: 0;
    justify-self: start;
    text-align: left;
}

.foreman-substages-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.foreman-substage-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-card);
}

.foreman-substage-item.substage-done {
    border-color: rgba(16, 185, 129, 0.42);
    background: rgba(16, 185, 129, 0.08);
}

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

.substage-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.substage-meta-row {
    margin-top: 0.25rem;
}

.substage-actions {
    display: flex;
    align-items: center;
}

.substage-actions .close-substage-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.88rem;
    line-height: 1.1;
    padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    min-height: var(--form-compact-min-height);
}

/* Подложка модалки «Закрыть подэтап» — затемнённый фон для читаемости */
.modal-substage {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-substage .substage-modal-content {
    width: min(760px, 95vw);
    max-width: 760px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.15rem 1.2rem 1rem;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
    .modal-substage .substage-modal-content {
        background: #1e293b;
        color: #f1f5f9;
    }
    .modal-substage .checklist-section {
        background: #334155;
        border-color: #475569;
    }
    .modal-substage .checklist-op {
        background: #475569;
        border-color: #64748b;
    }
}

.substage-modal-close {
    border: none;
    background: transparent;
    line-height: 1;
}

.substage-photo-info {
    margin-top: 0.4rem;
}

.checklist-section {
    margin-top: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.checklist-op {
    margin: 0.5rem 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.checklist-op strong {
    display: block;
    margin-bottom: 0.4rem;
}

.checklist-op .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

.checklist-hint {
    margin-top: 0.35rem;
}

.substage-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.8rem;
}

body.modal-open {
    overflow: hidden;
}

.foreman-style-switcher-card {
    margin-bottom: 1rem;
}

.foreman-style-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.foreman-style-switcher-buttons {
    display: inline-flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.foreman-style-btn.is-active {
    background: var(--fp-btn-primary-bg, var(--color-accent));
    color: var(--fp-btn-primary-text, #fff);
    border-color: var(--fp-btn-primary-bg, var(--color-accent));
}

.foreman-style-scope {
    --fp-page-bg: transparent;
    --fp-card-bg: var(--color-card);
    --fp-surface-bg: var(--color-surface);
    --fp-substage-bg: var(--color-card);
    --fp-border: var(--color-border);
    --fp-title: var(--color-text);
    --fp-muted: var(--color-text-muted);
    --fp-accent: #c78a12;
    --fp-success: #138a5d;
    --fp-warning: #c78a12;
    --fp-btn-primary-bg: #d1a62a;
    --fp-btn-primary-text: #1f2937;
    --fp-btn-primary-border: #b88712;
    --fp-btn-outline-bg: transparent;
    --fp-btn-outline-text: var(--color-text);
    --fp-btn-outline-border: var(--color-border);
    --fp-btn-radius: 10px;
    --fp-card-shadow: var(--shadow-1);
}

.foreman-style-scope .card {
    background: var(--fp-card-bg);
    border-color: var(--fp-border);
    box-shadow: var(--fp-card-shadow);
}

.foreman-style-scope .subtitle,
.foreman-style-scope .card-meta,
.foreman-style-scope .substage-photos {
    color: var(--fp-muted);
}

.foreman-style-scope .stage-card {
    background: var(--fp-surface-bg);
    border-color: var(--fp-border);
}

.foreman-style-scope .stage-card.stage-done {
    border-left-color: var(--fp-success);
}

.foreman-style-scope .stage-card.stage-pending {
    border-left-color: var(--fp-warning);
}

.foreman-style-scope .stage-status-label,
.foreman-style-scope .stage-name,
.foreman-style-scope .substage-name {
    color: var(--fp-title);
}

.foreman-style-scope .stage-card-header {
    background: rgba(15, 23, 42, 0.06);
    border-left-color: var(--fp-warning);
}

.foreman-style-scope .stage-card.stage-done .stage-card-header {
    border-left-color: var(--fp-success);
}

.foreman-style-scope .stage-dates {
    color: var(--fp-muted);
}

/* Проект 200: кнопки «Закрыть подэтап» — один размер, выровнены в столбик по правому краю */
#foremanStyleScope.foreman-style-scope .foreman-substage-item,
.foreman-style-scope .foreman-substage-item {
    display: grid !important;
    grid-template-columns: 1fr 150px !important;
    align-items: center;
    gap: 1rem 3rem;
    width: 100%;
    background: var(--fp-substage-bg);
    border-color: var(--fp-border);
}

#foremanStyleScope.foreman-style-scope .substage-main,
.foreman-style-scope .substage-main {
    min-width: 0;
}

#foremanStyleScope.foreman-style-scope .substage-actions,
.foreman-style-scope .substage-actions {
    width: 150px;
    flex-shrink: 0;
    justify-content: center;
}

#foremanStyleScope.foreman-style-scope .substage-actions .close-substage-btn,
.foreman-style-scope .substage-actions .close-substage-btn {
    width: 150px;
    min-width: 150px;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
}

.foreman-style-scope .btn-primary,
.foreman-style-scope .close-substage-btn {
    background: var(--fp-btn-primary-bg);
    color: var(--fp-btn-primary-text);
    border-color: var(--fp-btn-primary-border);
    border-radius: var(--fp-btn-radius);
    font-weight: 600;
}

.foreman-style-scope .btn-primary:hover,
.foreman-style-scope .close-substage-btn:hover {
    filter: brightness(0.95);
}

.foreman-style-scope .btn-outline {
    background: var(--fp-btn-outline-bg);
    color: var(--fp-btn-outline-text);
    border-color: var(--fp-btn-outline-border);
    border-radius: var(--fp-btn-radius);
}

/* foreman-style-scope наследует тему от body */
body.theme-style-1 .foreman-style-scope,
.foreman-style-scope.foreman-style-1 {
    --fp-card-bg: #ffffff;
    --fp-surface-bg: #f8fafc;
    --fp-substage-bg: #ffffff;
    --fp-border: #d6deea;
    --fp-title: #0f172a;
    --fp-muted: #64748b;
    --fp-success: #0f766e;
    --fp-warning: #2563eb;
    --fp-btn-primary-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
    --fp-btn-primary-text: #ffffff;
    --fp-btn-primary-border: #1e40af;
    --fp-btn-outline-bg: #f8fafc;
    --fp-btn-outline-text: #1e293b;
    --fp-btn-outline-border: #cbd5e1;
    --fp-btn-radius: 12px;
    --fp-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body.theme-style-2 .foreman-style-scope,
.foreman-style-scope.foreman-style-2 {
    --fp-card-bg: #f6fffb;
    --fp-surface-bg: #eefcf6;
    --fp-substage-bg: #f8fffc;
    --fp-border: #c5ead7;
    --fp-title: #113229;
    --fp-muted: #4d6b62;
    --fp-success: #047857;
    --fp-warning: #059669;
    --fp-btn-primary-bg: linear-gradient(135deg, #10b981, #059669);
    --fp-btn-primary-text: #ffffff;
    --fp-btn-primary-border: #047857;
    --fp-btn-outline-bg: #ecfdf5;
    --fp-btn-outline-text: #14532d;
    --fp-btn-outline-border: #86efac;
    --fp-btn-radius: 14px;
    --fp-card-shadow: 0 8px 20px rgba(5, 150, 105, 0.12);
}

body.theme-style-3 .foreman-style-scope,
.foreman-style-scope.foreman-style-3 {
    --fp-card-bg: #fffaf2;
    --fp-surface-bg: #fff5e6;
    --fp-substage-bg: #fffdf8;
    --fp-border: #f3d3a3;
    --fp-title: #412819;
    --fp-muted: #7c5a41;
    --fp-success: #b45309;
    --fp-warning: #ea580c;
    --fp-btn-primary-bg: linear-gradient(135deg, #f97316, #ea580c);
    --fp-btn-primary-text: #ffffff;
    --fp-btn-primary-border: #c2410c;
    --fp-btn-outline-bg: #fff7ed;
    --fp-btn-outline-text: #9a3412;
    --fp-btn-outline-border: #fdba74;
    --fp-btn-radius: 18px;
    --fp-card-shadow: 0 8px 22px rgba(194, 65, 12, 0.14);
}

body.theme-style-4 .foreman-style-scope,
.foreman-style-scope.foreman-style-4 {
    --fp-card-bg: #f7f5ff;
    --fp-surface-bg: #efebff;
    --fp-substage-bg: #f9f7ff;
    --fp-border: #d9ccff;
    --fp-title: #2e1f63;
    --fp-muted: #5b4d95;
    --fp-success: #6d28d9;
    --fp-warning: #7c3aed;
    --fp-btn-primary-bg: linear-gradient(135deg, #8b5cf6, #7c3aed);
    --fp-btn-primary-text: #ffffff;
    --fp-btn-primary-border: #6d28d9;
    --fp-btn-outline-bg: #f5f3ff;
    --fp-btn-outline-text: #5b21b6;
    --fp-btn-outline-border: #c4b5fd;
    --fp-btn-radius: 10px;
    --fp-card-shadow: 0 8px 24px rgba(91, 33, 182, 0.14);
}

body.theme-style-5 .foreman-style-scope,
.foreman-style-scope.foreman-style-5 {
    --fp-card-bg: #0f172a;
    --fp-surface-bg: #111c33;
    --fp-substage-bg: #16233e;
    --fp-border: #2b3b5f;
    --fp-title: #eaf1ff;
    --fp-muted: #9fb1d7;
    --fp-success: #38bdf8;
    --fp-warning: #60a5fa;
    --fp-btn-primary-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
    --fp-btn-primary-text: #0b1220;
    --fp-btn-primary-border: #2563eb;
    --fp-btn-outline-bg: #111b30;
    --fp-btn-outline-text: #dbeafe;
    --fp-btn-outline-border: #3b4f75;
    --fp-btn-radius: 12px;
    --fp-card-shadow: 0 10px 28px rgba(2, 6, 23, 0.55);
}

/* skanvika — фирменный стиль для карточки прораба */
body.theme-style-6 .foreman-style-scope {
    --fp-card-bg: var(--color-surface);
    --fp-surface-bg: var(--color-surface-2);
    --fp-substage-bg: rgba(255, 250, 242, 0.86);
    --fp-border: var(--color-border);
    --fp-title: var(--brand-wood-dark);
    --fp-muted: var(--color-text-muted);
    --fp-success: var(--color-success);
    --fp-warning: var(--brand-gold);
    --fp-btn-primary-bg: linear-gradient(135deg, var(--brand-wood), var(--brand-gold));
    --fp-btn-primary-text: #ffffff;
    --fp-btn-primary-border: rgba(74, 47, 29, 0.16);
    --fp-btn-outline-bg: rgba(255, 250, 242, 0.74);
    --fp-btn-outline-text: var(--brand-wood-dark);
    --fp-btn-outline-border: var(--color-border-strong);
    --fp-btn-radius: 12px;
    --fp-card-shadow: var(--shadow-1);
}

.stage-reports, .stage-gallery {
    margin: 1rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.reports-title, .gallery-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.report-item {
    margin-bottom: 1rem;
}

.report-thumb {
    max-width: 200px;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.report-comment {
    margin: 0.35rem 0 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Галерея (клиент) — сетка 3-4 в ряд */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.gallery-item {
    text-align: center;
}

.gallery-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius);
    cursor: pointer;
    transition: opacity 0.2s;
}

.gallery-item img:hover {
    opacity: 0.9;
}

.photo-link {
    display: block;
}

.gallery-comment {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Комментарий клиента к сданному этапу (стройка на участке) */
.client-stage-comment-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.client-comments-list {
    margin-bottom: 0.75rem;
}
.client-comment {
    margin: 0.35rem 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.client-comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.client-comment-form textarea {
    flex: 1;
    min-width: 200px;
    min-height: 2.25rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    resize: vertical;
}

/* Прогресс-бар */
.progress-section {
    margin-bottom: 2rem;
}

.progress-bar-wrap {
    position: relative;
    height: 32px;
    background: rgba(148, 163, 184, 0.28);
    border-radius: var(--radius);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius);
    transition: width 0.3s;
}

.progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}

/* ========== Карточка «Документы» клиента — 6 стилей ========== */
.client-docs-card .client-docs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.client-docs-card .client-docs-header h2 {
    margin: 0;
}
.client-docs-style-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.style-switcher-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}
.doc-style-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.doc-style-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}
.doc-style-btn.active {
    background: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
}

/* Базовые элементы документа */
.client-doc-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.client-doc-item .doc-name a {
    color: var(--color-accent);
    text-decoration: none;
}
.client-doc-item .doc-name a:hover {
    text-decoration: underline;
}
.doc-status-ok {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.doc-status-wait {
    font-size: 0.85rem;
    color: var(--color-warning);
}
.doc-actions-inline {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

/* Стиль 1: Компактная строка — всё в одну линию */
.client-docs-card[data-doc-style="1"] .client-docs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}
.client-docs-card[data-doc-style="1"] .client-doc-item {
    gap: 0.35rem;
}
.client-docs-card[data-doc-style="1"] .doc-status-ok::before {
    content: "· ";
    color: var(--color-text-soft);
}

/* Стиль 2: Чипы — документы как pill-бейджи */
.client-docs-card[data-doc-style="2"] .client-docs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.client-docs-card[data-doc-style="2"] .client-doc-item {
    background: var(--color-surface-2);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    gap: 0.4rem;
}
.client-docs-card[data-doc-style="2"] .doc-status-ok {
    font-size: 0.75rem;
}
.client-docs-card[data-doc-style="2"] .doc-actions-inline {
    margin-left: 0.25rem;
}

/* Стиль 3: список — название и статус в одной строке, статусы в одном столбце */
.client-docs-card[data-doc-style="3"] .client-docs-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.client-docs-card[data-doc-style="3"] .client-doc-item {
    display: grid;
    grid-template-columns: 7.75rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.client-docs-card[data-doc-style="3"] .client-doc-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.client-docs-card[data-doc-style="3"] .doc-name {
    grid-column: 1;
}
.client-docs-card[data-doc-style="3"] .doc-status,
.client-docs-card[data-doc-style="3"] .doc-actions-inline {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
}

/* Стиль 4: Таблица — документ | статус в колонках */
.client-docs-card[data-doc-style="4"] .client-docs-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1.5rem;
    align-items: center;
    font-size: 0.9rem;
}
.client-docs-card[data-doc-style="4"] .client-doc-item {
    display: contents;
}
.client-docs-card[data-doc-style="4"] .client-doc-item .doc-name {
    grid-column: 1;
}
.client-docs-card[data-doc-style="4"] .client-doc-item .doc-status,
.client-docs-card[data-doc-style="4"] .client-doc-item .doc-actions-inline {
    grid-column: 2;
}

/* Стиль 5: Иконка + текст — компактно в ряд */
.client-docs-card[data-doc-style="5"] .client-docs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
}
.client-docs-card[data-doc-style="5"] .client-doc-item .doc-name::before {
    content: "📄 ";
    font-size: 0.9em;
}
.client-docs-card[data-doc-style="5"] .doc-status-ok {
    font-size: 0.8rem;
}
.client-docs-card[data-doc-style="5"] .doc-status-ok::before {
    content: " ";
}

/* Стиль 6: Ультра-компакт — всё в одну строку, даты мелко */
.client-docs-card[data-doc-style="6"] .client-docs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
    font-size: 0.9rem;
}
.client-docs-card[data-doc-style="6"] .client-doc-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}
.client-docs-card[data-doc-style="6"] .client-doc-item::after {
    content: "";
    margin-right: 0.25rem;
}
.client-docs-card[data-doc-style="6"] .client-doc-item:last-child::after {
    display: none;
}
.client-docs-card[data-doc-style="6"] .client-doc-item:not(:last-child)::after {
    content: "|";
    color: var(--color-border);
    font-weight: 300;
}
.client-docs-card[data-doc-style="6"] .doc-status-ok {
    font-size: 0.75rem;
    color: var(--color-text-soft);
}

/* ========== Глобальный компактный стиль (минимализм) — body.compact-mode ========== */
body.compact-mode .page-header {
    margin-bottom: 1rem;
}
body.compact-mode .page-header h1 {
    font-size: var(--typo-page-title);
    font-weight: 600;
}
body.compact-mode .page-header .subtitle {
    font-size: var(--typo-subtitle);
    color: var(--color-text-muted);
}
body.compact-mode .card {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
}
body.compact-mode .card h2 {
    font-size: var(--typo-card-title);
    font-weight: 600;
    margin: 0 0 0.6rem 0;
}
body.compact-mode .card-meta {
    font-size: var(--typo-secondary);
    margin-top: 0.5rem;
}
body.compact-mode .progress-section {
    margin-bottom: 1.25rem;
}
body.compact-mode .progress-section h2 {
    font-size: var(--typo-card-title);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}
body.compact-mode .progress-bar-wrap {
    height: 24px;
}
body.compact-mode .progress-text {
    font-size: var(--typo-hint);
}
body.compact-mode .client-docs-card .client-docs-header h2 {
    font-size: var(--typo-card-title);
}
body.compact-mode .client-docs-style-switcher {
    transform: scale(0.9);
    transform-origin: right center;
}
body.compact-mode .client-stages h2,
body.compact-mode .stages-section h2 {
    font-size: var(--typo-card-title);
    font-weight: 600;
    margin: 0 0 0.6rem 0;
}
body.compact-mode .stage-card {
    padding: 0.75rem 1rem;
    margin-bottom: 0.65rem;
    border-radius: var(--radius);
}
body.compact-mode .stages-section {
    gap: 0.6rem;
}
body.compact-mode .stage-card-header {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}
body.compact-mode .client-stages .stage-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 12.5rem;
    column-gap: 0.5rem;
}
body.compact-mode .stage-status-icon {
    font-size: 1rem;
}
body.compact-mode .stage-name {
    font-weight: 500;
    font-size: var(--typo-lead);
}
body.compact-mode .stage-status-label {
    font-size: var(--typo-micro);
    color: var(--color-text-muted);
}
body.compact-mode .stage-gallery {
    margin: 0.6rem 0 0 0;
    padding-top: 0.6rem;
}
body.compact-mode .gallery-title,
body.compact-mode .reports-title {
    font-size: var(--typo-secondary);
    margin: 0 0 0.5rem 0;
}
body.compact-mode .stage-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.4rem;
}
body.compact-mode .client-stage-comment-block {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}
body.compact-mode .client-comment-form textarea {
    min-height: 60px;
    font-size: var(--typo-control);
}
body.compact-mode .client-comment {
    font-size: var(--typo-secondary);
}
body.compact-mode .project-gallery-section .card h2,
body.compact-mode .project-gallery-section h2 {
    font-size: var(--typo-card-title);
}
body.compact-mode .photo-carousel-hint {
    font-size: var(--typo-hint);
}
body.compact-mode .back-link {
    font-size: var(--typo-subtitle);
    margin-top: 0.5rem;
}
body.compact-mode section.card p {
    font-size: var(--typo-subtitle);
}

/* Дашборды и карточки проектов */
body.compact-mode .main {
    padding: 0.85rem 1rem;
}
body.compact-mode .breadcrumbs {
    font-size: var(--typo-subtitle);
    padding: 0.4rem 0;
}
body.compact-mode .dashboard-grid {
    gap: 0.85rem;
}
body.compact-mode .dashboard-card h2 {
    font-size: var(--typo-card-title);
    margin: 0 0 0.5rem 0;
}
body.compact-mode .dashboard-card .card-meta {
    font-size: var(--typo-hint);
}
body.compact-mode .project-card .project-name,
body.compact-mode .project-card .project-card-header .project-name {
    font-size: var(--typo-lead);
}
body.compact-mode .project-card .project-type,
body.compact-mode .project-card .project-address {
    font-size: var(--typo-secondary);
}
body.compact-mode .card-header-row h2 {
    font-size: var(--typo-card-title);
    margin: 0;
}

/* Таблицы */
body.compact-mode .data-table th,
body.compact-mode .data-table td,
body.compact-mode .users-table th,
body.compact-mode .users-table td,
body.compact-mode .admin-projects-table th,
body.compact-mode .admin-projects-table td {
    padding: 0.5rem 0.65rem;
    font-size: var(--typo-control);
}
body.compact-mode .admin-projects-thumb {
    width: 48px;
    height: 48px;
}
body.compact-mode .admin-project-row,
body.compact-mode .dashboard-recent-rows .admin-project-row {
    padding: 0.5rem 0.75rem;
}
body.compact-mode .admin-project-row .project-name {
    font-size: var(--typo-lead);
}
body.compact-mode .admin-project-row-meta {
    font-size: var(--typo-caption);
}

/* Формы и кнопки — компактный принцип как в «Добавить этап» */
body.compact-mode .form-group {
    margin-bottom: 0.5rem;
}
body.compact-mode .form-row .form-group {
    margin-bottom: 0;
}
body.compact-mode .form-row {
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
}
body.compact-mode .form-row .form-group {
    min-width: 140px;
}
body.compact-mode .form-group label {
    font-size: var(--typo-label);
    margin-bottom: 0.2rem;
}
body.compact-mode .form-control {
    padding: 0.25rem 0.5rem;
    font-size: var(--typo-control);
    min-height: 30px;
}
body.compact-mode .form-group .form-hint,
body.compact-mode .form-group .card-meta {
    font-size: var(--typo-hint);
    margin-top: 0.2rem;
}
body.compact-mode .card .subtitle {
    margin-bottom: 0.5rem;
}
body.compact-mode textarea.form-control {
    min-height: 80px;
    padding: 0.25rem 0.5rem;
}
body.compact-mode .btn-small {
    padding: 0.2rem 0.45rem;
    font-size: var(--typo-btn-sm);
    min-height: 28px;
}
body.compact-mode .btn {
    font-size: var(--typo-btn);
}

/* Прораб, мастер — этапы и подэтапы */
body.compact-mode .foreman-style-scope .card,
body.compact-mode .substage-item,
body.compact-mode .foreman-substage-item {
    padding: 0.65rem 0.85rem;
}
body.compact-mode .substage-name {
    font-size: 0.9rem;
}
body.compact-mode .stage-item {
    padding: 0.5rem 0.75rem;
}

/* Отчёты и аналитика */
body.compact-mode .report-section h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
}
body.compact-mode .report-dashboard,
body.compact-mode .analytics-dashboard {
    gap: 0.85rem;
}

/* Карточки проектов (сетка клиента, дашборды) */
body.compact-mode .project-card-variant-c .project-card-overlay {
    padding: 0.6rem 0.85rem;
}
body.compact-mode .project-card-variant-c .project-card-photo {
    height: 140px;
}
body.compact-mode .project-grid {
    gap: 0.85rem;
}
body.compact-mode .flash {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Пользователи */
.users-search-form {
    margin-bottom: 1rem;
}

.users-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.9fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.users-search-row input[type="text"] {
    flex: 1;
    min-width: 180px;
}

.users-role-filter {
    min-width: 160px;
}

.users-list-details summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.5rem 0;
    user-select: none;
}

.users-list-details summary::-webkit-details-marker {
    opacity: 0.6;
}

.users-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
    border-radius: var(--radius);
    /* Во flex/grid-родителях без min-width:0 таблица может раздувать страницу по ширине */
    max-width: 100%;
    min-width: 0;
}

/* data-table — базовые стили (совместимо с users-table-wrap) */
.data-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.data-table th, .data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    font-size: var(--typo-control);
    /* break-word переносит длинные «слова» без пробелов; word-break: break-word устарел и даёт перенос по буквам в узких ячейках */
    overflow-wrap: break-word;
    word-break: normal;
}

/* Доска календаря: мини-график и фиксированная колонка — не ломать переносами внутри трека */
.data-table.cal-board-table .cal-board-chart-cell {
    overflow-wrap: normal;
    word-break: normal;
}
.data-table th {
    background: var(--color-surface-2);
    font-weight: 600;
    color: var(--brand-wood-dark);
}

/* ДП — подтверждение дат: без горизонтального скролла, таблица на всю ширину карточки */
.production-dates-pending-wrap .production-dates-pending-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.production-dates-pending-wrap .production-dates-pending-table th,
.production-dates-pending-wrap .production-dates-pending-table td {
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(1),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(1) {
    width: 19%;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(2),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(2) {
    width: 35%;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(3),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(3),
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(4),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(4) {
    width: 12%;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(5),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(5) {
    width: 22%;
    vertical-align: middle;
}

/* ДП — мобильные карточки вместо таблицы */
.production-dates-pending-mobile-list {
    display: none;
}
.production-dates-pending-mcard {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-2, #f8fafc);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.production-dates-mcard-line {
    margin: 0 0 0.55rem 0;
    font-size: var(--typo-control);
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: break-word;
}
.production-dates-mcard-line:last-of-type {
    margin-bottom: 0.65rem;
}
.production-dates-mcard-label {
    font-weight: 600;
    color: var(--color-text);
}
.production-dates-mcard-value {
    color: var(--color-text);
}
.production-dates-mcard-btn {
    margin-top: 0.15rem;
    box-sizing: border-box;
    text-align: center;
}
@media (max-width: 768px) {
    .production-dates-pending-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 0.35rem;
    }
    .production-dates-pending-desktop {
        display: none !important;
    }
}

/* Таблица «Закрыть день» — горизонтальный скролл на мобильных */
@media (max-width: 600px) {
    .work-rows-wrap #work-rows {
        min-width: 520px;
    }
}

.worker-mobile-style-toggle {
    display: none;
}

.worker-mobile-style-btn {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 999px;
    padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    min-height: var(--form-compact-min-height);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.worker-mobile-style-btn.is-active {
    background: rgba(16, 75, 45, 0.1);
    border-color: rgba(16, 75, 45, 0.28);
    color: var(--brand-green, #104b2d);
    font-weight: 700;
}

.worker-row-summary {
    display: none;
}

.worker-row-summary-title,
.worker-row-summary-meta {
    display: block;
}

.worker-row-summary-title {
    font-weight: 700;
    color: var(--color-text);
}

.worker-row-summary-meta {
    margin-top: 0.2rem;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

.worker-row-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.worker-report-table {
    overflow: visible;
}

.worker-report-table tbody,
.worker-report-table tr.work-row,
.worker-report-table td.work-col-item,
.work-item-combobox {
    position: relative;
}

.worker-report-table tr.work-row:focus-within {
    z-index: 25;
}

#workerDayConfirmModal {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#workerQrScanModal {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.worker-day-confirm-modal {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.worker-day-confirm-modal p {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.worker-qr-scan-hint {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.worker-qr-reader {
    width: 100%;
    min-height: 260px;
    border-radius: 18px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.worker-qr-reader video {
    width: 100% !important;
    height: auto !important;
    border-radius: 18px;
}

.worker-qr-scan-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.worker-qr-scan-actions .btn {
    min-width: 150px;
}

.worker-form-actions-row.form-toolbar {
    flex-wrap: nowrap;
}

.worker-form-actions-row .form-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(72px, 0.62fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    width: 100%;
    flex: 1 1 auto;
    align-self: stretch;
}

.worker-form-actions-row .form-toolbar-actions .btn,
.worker-form-actions-row .form-toolbar-actions .worker-qr-trigger {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}

.worker-day-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.worker-day-confirm-actions .btn {
    min-width: 150px;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.users-table th, .users-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.users-table th {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .worker-mobile-style-toggle {
        display: inline-flex;
        gap: 0.45rem;
        flex-wrap: wrap;
        margin: 0.5rem 0 0.9rem;
    }

    #close-day-form[data-mobile-style] .work-rows-wrap #work-rows {
        min-width: 0;
    }

    #close-day-form[data-mobile-style] .worker-report-table {
        border: none;
        background: transparent;
    }

    #close-day-form[data-mobile-style] .worker-report-table thead {
        display: none;
    }

    #close-day-form[data-mobile-style] .worker-report-table,
    #close-day-form[data-mobile-style] .worker-report-table tbody {
        display: block;
        width: 100%;
    }

    #close-day-form[data-mobile-style] .worker-report-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    #close-day-form[data-mobile-style] .worker-report-table tr.work-row {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        box-shadow: var(--shadow-1);
        overflow: visible;
    }

    #close-day-form[data-mobile-style] .worker-report-table td {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
    }

    #close-day-form[data-mobile-style] .worker-report-table td::before {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.73rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    #close-day-form[data-mobile-style] .worker-report-table .work-item-combobox,
    #close-day-form[data-mobile-style] .worker-report-table .work-item-dropdown {
        min-width: 0;
    }

    #close-day-form[data-mobile-style="compact"] .worker-report-table tr.work-row {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 0.65rem 0.75rem;
        padding: 0.75rem;
    }

    #close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-item {
        grid-column: 1 / -1;
    }

    #close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-percent {
        grid-column: 1;
    }

    #close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-comment {
        grid-column: 2;
    }

    #close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-actions {
        grid-column: 1 / -1;
    }

    #close-day-form[data-mobile-style="compact"] .worker-report-table td[data-label]::before {
        content: attr(data-label);
    }

    #close-day-form[data-mobile-style="compact"] .worker-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #close-day-form[data-mobile-style="compact"] .worker-row-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: var(--form-compact-min-height);
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row {
        display: block;
        padding: 0.8rem;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] td + td {
        margin-top: 0.8rem;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] td[data-step-label]::before {
        content: attr(data-step-label);
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] .worker-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.1rem;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] .worker-row-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: var(--form-compact-min-height);
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] {
        padding: 0.7rem 0.8rem;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] td {
        display: none;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-col-item {
        display: block;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-col-actions {
        display: block;
        margin-top: 0.75rem;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-item-combobox {
        display: none;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .worker-row-summary {
        display: block;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-col-item::before {
        content: none;
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .worker-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .worker-row-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: var(--form-compact-min-height);
    }

    .worker-day-confirm-actions {
        flex-direction: column;
    }

    .worker-day-confirm-actions .btn {
        width: 100%;
    }

    .worker-qr-scan-actions {
        flex-direction: column;
    }

    .worker-qr-scan-actions .btn {
        width: 100%;
    }

    .worker-form-actions-row .form-toolbar-actions {
        grid-template-columns: minmax(0, 1.22fr) minmax(64px, 0.58fr) minmax(0, 0.96fr);
        gap: 0.4rem;
    }

    .worker-form-actions-row .form-toolbar-actions .btn,
    .worker-form-actions-row .form-toolbar-actions .worker-qr-trigger {
        padding: var(--btn-compact-padding-y) 0.6rem;
        font-size: 0.92rem;
        gap: 0.35rem;
    }
}

@media (max-width: 760px) {
    .mobile-card-table {
        min-width: 0 !important;
        border: none;
        background: transparent;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table,
    .mobile-card-table tbody {
        display: block;
        width: 100%;
    }

    .mobile-card-table tbody {
        display: grid;
        gap: 0.5rem;
    }

    .mobile-card-table tr {
        display: block;
        width: 100%;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        box-shadow: var(--shadow-1);
    }

    /* Inline label:value layout — compact single line per field */
    .mobile-card-table td {
        display: block;
        padding: 0.15rem 0;
        border: none;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: 0.9rem;
    }

    /* No separator lines between cells */
    .mobile-card-table td + td {
        border-top: none;
    }

    /* Label is now inline prefix, not a block above */
    .mobile-card-table td[data-label]::before {
        content: attr(data-label) ":\00a0";
        display: inline;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-bottom: 0;
    }

    /* "Действия" label is obvious from the button — hide it */
    .mobile-card-table td[data-label="Действия"]::before,
    .mobile-card-table td[data-label="действия"]::before {
        display: none;
    }

    /* Primary content fields: slightly larger, no label needed for first td */
    .mobile-card-table tr td:first-child {
        font-weight: 600;
        font-size: 0.92rem;
        padding-bottom: 0.2rem;
    }

    .mobile-card-table .stage-actions-cell,
    .mobile-card-table .stage-actions-cell .production-stage-delete-form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
    }

    .mobile-card-table .stage-actions-cell .btn {
        flex: 1 1 8rem;
        justify-content: center;
        margin: 0;
    }

    .mobile-card-table .drag-handle-cell {
        display: none;
    }

    /* Даты производства: имя этапа сверху, поля «Начало/Окончание» — в 2 колонки */
    .production-dates-table.mobile-card-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0.5rem;
        row-gap: 0.25rem;
        padding: 0.5rem 0.6rem;
    }
    .production-dates-table.mobile-card-table td:first-child {
        grid-column: 1 / -1;
        padding-bottom: 0.1rem;
    }
    .production-dates-table.mobile-card-table td[data-label] {
        padding: 0;
    }
    .production-dates-table.mobile-card-table td[data-label]::before {
        display: block;
        margin-bottom: 0.1rem;
    }
    .production-dates-table.mobile-card-table td[data-label] input {
        width: 100%;
    }
}

/* Универсальный сворачиваемый блок-карточка (вторичные секции) */
.collapsible-card > .collapsible-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    cursor: pointer;
    list-style: none;
}
.collapsible-card > .collapsible-card-summary::-webkit-details-marker {
    display: none;
}
.collapsible-card > .collapsible-card-summary h2 {
    margin: 0;
}
.collapsible-card-chevron {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.collapsible-card[open] > .collapsible-card-summary .collapsible-card-chevron {
    transform: rotate(-135deg);
}
.collapsible-card-body {
    margin-top: 0.75rem;
}

/* Плавающая панель главного действия (мобильный): управляется JS-классом is-visible */
.sticky-submit-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    justify-content: center;
    padding: 0.6rem 0.85rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(237, 226, 210, 0), var(--color-surface) 45%);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 22px rgba(74, 47, 29, 0.14);
}
.sticky-submit-bar.is-visible {
    display: flex;
}
.sticky-submit-bar .btn {
    width: 100%;
    max-width: 520px;
}
@media (min-width: 769px) {
    .sticky-submit-bar { display: none !important; }
}

@media (max-width: 640px) {
    .project-list-simple {
        list-style: none;
        padding-left: 0;
        margin: 0;
        display: grid;
        gap: 0.6rem;
    }

    .project-list-simple li {
        padding: 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        box-shadow: var(--shadow-1);
        overflow-wrap: anywhere;
    }

    .project-list-simple a {
        display: block;
        font-weight: 700;
        margin-bottom: 0.2rem;
    }

    .stage-card-header,
    .substage-title-row,
    .client-doc-item,
    .doc-actions-inline,
    .client-comment-form {
        flex-direction: column;
        align-items: stretch;
    }

    .stage-card-header .badge,
    .stage-status-label,
    .doc-actions-inline .btn,
    .doc-actions-inline form,
    .client-comment-form .btn {
        width: 100%;
        justify-content: center;
    }

    .client-comment-form textarea {
        width: 100%;
        min-height: 72px;
    }
}

/* Мои выполненные работы — строчный формат (номер слева, 3 строки справа) */
.worker-completed-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.worker-completed-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg-soft, #f8fafc);
    border-radius: var(--radius, 6px);
    border: 1px solid var(--color-border, #e2e8f0);
}
.worker-completed-num {
    flex-shrink: 0;
    width: 2.5rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-muted, #64748b);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
}
.worker-completed-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.worker-completed-name {
    font-weight: 600;
    color: var(--color-text, #0f172a);
}
.worker-completed-percent {
    font-size: 0.9rem;
    color: var(--color-text-muted, #64748b);
}
.worker-completed-status {
    font-size: 0.85rem;
    font-weight: 500;
}
.worker-completed-status--pending {
    color: #b45309;
}
.worker-completed-status--approved {
    color: #059669;
}
.worker-completed-status--rejected {
    color: #dc2626;
}

/* Подтверждение работ — мастер и директор: компактный мобильный вид */
.work-approvals-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.work-approvals-mobile {
    display: none;
}
@media (max-width: 768px) {
    .work-approvals-desktop {
        display: none;
    }
    .work-approvals-mobile {
        display: block;
    }
    .work-approvals-worker-block {
        margin-bottom: 1.25rem;
    }
    .work-approvals-worker-block:last-child {
        margin-bottom: 0;
    }
    .work-approvals-worker-name {
        margin: 0 0 0.5rem;
        padding-bottom: 0.35rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text, #0f172a);
        border-bottom: 2px solid var(--color-border, #e2e8f0);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
    }
    .work-approvals-worker-date {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--color-text-muted, #64748b);
    }
    .work-approvals-mobile-row {
        display: flex;
        flex-direction: column;
        gap: 0.18rem;
        padding: 0.3rem 0.5rem;
        margin-bottom: 0.25rem;
        background: var(--color-bg-soft, #f8fafc);
        border-radius: var(--radius, 6px);
        border: 1px solid var(--color-border, #e2e8f0);
    }
    .work-approvals-mobile-row:last-child {
        margin-bottom: 0;
    }
    .work-approvals-mobile-line {
        display: block;
    }
    .work-approvals-mobile-obj {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-text-muted, #64748b);
    }
    .work-approvals-mobile-work .work-approvals-select,
    .work-approvals-mobile-pct .work-approvals-select {
        width: 100%;
        max-width: none;
        padding: 0.15rem 0.3rem;
        min-height: 1.6rem;
        font-size: 0.8rem;
    }
    .work-approvals-mobile-actions {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-wrap: wrap;
    }
    .work-approvals-mobile-actions .btn {
        padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
        font-size: 0.85rem;
        min-height: var(--form-compact-min-height);
    }
    .work-approvals-inline-form {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }
    .work-approvals-select {
        min-width: 0;
        max-width: 12rem;
        padding: 0.15rem 0.3rem;
        min-height: 1.6rem;
        font-size: 0.8rem;
    }
}

/* Resizable report columns (per-user) */
.users-table.report-cols-resizable {
    table-layout: fixed;
}

.users-table.report-cols-resizable th {
    position: relative;
    padding-right: 18px;
}

.users-table.report-cols-resizable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-table.report-cols-resizable .col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
}

.users-table.report-cols-resizable th:hover .col-resizer::before {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 4px;
    width: 2px;
    border-radius: 2px;
    background: rgba(201, 162, 39, 0.7);
}

/* На мобильных: скрыть ручки ресайза, сохранить адаптивность */
@media (max-width: 768px) {
    .users-table.report-cols-resizable .col-resizer,
    .wr-list.wr-cols-resizable .col-resizer {
        display: none;
    }
    .users-table.report-cols-resizable th {
        padding-right: 0.75rem;
    }
    .wr-list.wr-cols-resizable .wr-cell {
        padding-right: 0.75rem;
    }
}

/* wr-list: ресайз колонок (grid) */
.wr-list.wr-cols-resizable .wr-cell {
    position: relative;
    padding-right: 18px;
}
.wr-list.wr-cols-resizable .col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
}
.wr-list.wr-cols-resizable .wr-cell:hover .col-resizer::before {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 4px;
    width: 2px;
    border-radius: 2px;
    background: rgba(201, 162, 39, 0.7);
}

.wr-list.wr-cols-resizable .wr-row.wr-style-3-main {
    grid-template-columns: var(--wr-date, 90px) minmax(80px, var(--wr-work, 1.8fr)) minmax(70px, var(--wr-project, 1.2fr)) minmax(70px, var(--wr-worker, 1fr)) var(--wr-pct, 80px) var(--wr-amount, 100px) minmax(60px, var(--wr-comment, 1.2fr));
}
.wr-list.wr-cols-resizable .wr-row.wr-style-3-main-admin {
    grid-template-columns: var(--wr-date, 90px) minmax(80px, var(--wr-work, 1.6fr)) minmax(70px, var(--wr-project, 1.1fr)) minmax(70px, var(--wr-worker, 1fr)) var(--wr-pct, 80px) var(--wr-amount, 100px) minmax(60px, var(--wr-comment, 1fr)) minmax(180px, var(--wr-actions, 210px));
}

/* Sticky filter row in reports */
.report-filter-row-sticky th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-surface);
    box-shadow: 0 1px 0 var(--color-border);
}

.wr-list .report-filter-row-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-surface);
    box-shadow: 0 1px 0 var(--color-border);
}

/* Greeting banner (all authenticated pages) */
.greeting-banner {
    margin: 0 0 1rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.10), rgba(16, 75, 45, 0.10));
    color: var(--color-text);
    box-shadow: 0 1px 1px rgba(15,23,42,0.04);
}

.greeting-banner-text {
    font-weight: 600;
    line-height: 1.45;
}

/* ===== Reports: worker report row style test ===== */
.wr-style-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.wr-style-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    white-space: nowrap;
}

.wr-style-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
    background: var(--color-surface-2);
}

.wr-style-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.wr-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    max-width: 100%;
}

.wr-style-3-wrap {
    min-width: 0;
}

.wr-row {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    border-radius: var(--radius);
    min-width: 0;
}

.wr-head {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    padding: 0.4rem 0.75rem;
}

.wr-head-cell {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.wr-row * {
    min-width: 0;
}

.wr-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wr-mono {
    font-variant-numeric: tabular-nums;
}

.wr-right {
    text-align: right;
}

.wr-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    white-space: nowrap;
}

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

.wr-pill-accent {
    border-color: rgba(201, 162, 39, 0.45);
    background: rgba(201, 162, 39, 0.12);
}

.wr-main-text {
    font-weight: 600;
}

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

/* Style presets (all no-wrap, just different layouts) */
.wr-style-1 {
    grid-template-columns: 120px 1.3fr 1.1fr 90px 2.2fr 120px 120px 120px 1.2fr;
}

.wr-style-2 {
    grid-template-columns: 2.6fr 1.2fr 1.1fr 120px 120px 140px 1.1fr;
}

.wr-style-3 {
    grid-template-columns: 2.6fr 1.5fr 1.3fr 140px 140px 1.2fr;
}

.wr-style-4 {
    grid-template-columns: 140px 1.5fr 1.4fr 2.8fr 1.4fr 1.2fr;
}

.wr-style-5 {
    grid-template-columns: 2.6fr 2.2fr 90px 120px 120px 140px 1.2fr;
}

.wr-style-6 {
    grid-template-columns: 2.8fr 2.1fr 1.2fr 120px 1.2fr;
}

/* Worker reports main view: Style 3 (pills) with date column — компактный, влезает на экран */
.wr-style-3-main {
    min-width: 0;
    grid-template-columns: 90px minmax(80px, 1.8fr) minmax(70px, 1.2fr) minmax(70px, 1fr) 80px 100px minmax(60px, 1.2fr);
}

.wr-style-3-main-admin {
    min-width: 0;
    grid-template-columns: 90px minmax(80px, 1.6fr) minmax(70px, 1.1fr) minmax(70px, 1fr) 80px 100px minmax(60px, 1fr) 210px;
}

.wr-actions {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    justify-content: flex-end;
    gap: 0.5rem;
}

.wr-actions form {
    margin: 0;
}

.users-table th {
    font-weight: 600;
    background: var(--color-surface-2);
    color: var(--brand-wood-dark);
}

.users-table tbody tr:nth-child(even) td {
    background: rgba(184, 122, 61, 0.055);
}

.users-table tbody tr:hover td {
    background: rgba(47, 93, 58, 0.08);
}

@media (prefers-color-scheme: dark) {
    .users-table tbody tr:nth-child(even) td { background: rgba(148, 163, 184, 0.05); }
    .users-table tbody tr:hover td { background: rgba(148, 163, 184, 0.09); }
}

/* Сортировка в таблицах (кликабельные заголовки) */
.table-sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    gap: 0.35rem;
}

.table-sort-link:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.table-sort-ind {
    font-size: 0.85em;
    opacity: 0.9;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.badge-admin { background: var(--color-text); color: var(--color-surface); }
.badge-success { background: var(--color-success, #16a34a); color: #fff; }
.badge-manager_op { background: var(--brand-green); color: #fff; }
.badge-superadmin { background: var(--brand-wood-dark); color: #fff; }
.badge-super { background: var(--brand-wood-dark); color: #fff; }
.badge-director_construction { background: #315f48; color: #fff; }
.badge-director_production { background: #6f4b2f; color: #fff; }
.badge-foreman { background: var(--brand-gold); color: #fff; }
.badge-master { background: var(--color-accent); color: #fff; }
.badge-worker { background: #7d6a55; color: #fff; }
.badge-client { background: var(--color-success); color: #fff; }
.badge-warning { background: var(--color-warning); color: #fff; }
.badge-completed { background: var(--color-success); color: #fff; }

/* Чек-лист завершения проекта: по умолчанию свёрнут; раскрыт, если не все пункты пройдены */
.project-closure-readiness-details > summary {
    list-style: none;
    cursor: pointer;
}
.project-closure-readiness-details > summary::-webkit-details-marker {
    display: none;
}
.project-closure-readiness-summary {
    padding: 0;
    border-radius: var(--radius-sm);
    outline: none;
}
.project-closure-readiness-summary:focus-visible {
    box-shadow: 0 0 0 2px var(--focus-ring-strong, rgba(201, 162, 39, 0.45));
}
.project-closure-readiness-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}
.project-closure-readiness-summary-title {
    margin: 0;
    font-size: var(--typo-card-title, 1.1rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
}
.project-closure-readiness-chevron {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    margin-top: -0.15rem;
    transition: transform 0.2s ease;
}
.project-closure-readiness-details[open] .project-closure-readiness-chevron {
    transform: rotate(-135deg);
    margin-top: 0.12rem;
}
.project-closure-readiness-body {
    margin-top: 0.85rem;
}
.project-closure-readiness-body > .subtitle:first-child {
    margin-top: 0;
}

/* Чек-лист завершения проекта (страница этапов) */
.project-closure-readiness-card .project-closure-checklist {
    margin: 0.75rem 0 0 0;
    padding-left: 1.2rem;
    line-height: 1.45;
}
.project-closure-readiness-card .project-closure-checklist li {
    margin-bottom: 0.35rem;
}
.project-closure-readiness-card .project-closure-ok {
    color: var(--color-success);
}
.project-closure-readiness-card .project-closure-bad {
    color: var(--color-danger);
}
.project-closure-readiness-card .project-closure-detail {
    font-weight: 500;
}
.project-closure-readiness-card .project-closure-summary--ok {
    color: var(--color-success);
    font-weight: 600;
}
.page-header-actions .project-close-form,
.stages-page-footer .project-close-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0;
}

.stages-page-footer {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
/* Единое скругление в ряду (все кнопки — btn-small) */
.stages-page-footer .btn,
.stages-page-footer .project-close-form button.btn {
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}
.project-force-close-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
}
.badge-pending { background: var(--color-warning, #eab308); color: #1a1a1a; }
.badge-approved { background: var(--color-success); color: #fff; }
.badge-rejected { background: var(--color-danger, #c53030); color: #fff; }

.badge-success-subtle { background: color-mix(in srgb, var(--color-success) 22%, transparent); color: var(--color-success); font-weight: 600; }
.badge-warning-subtle { background: color-mix(in srgb, var(--color-warning) 22%, transparent); color: var(--color-warning); font-weight: 600; }

/* Двухколоночный layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
}

/* Модальное окно */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

/* Подложка для модалок мастера (фотоотчёт, редактирование этапа) */
.modal-report {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
}
.modal-report .modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-report .form-control::placeholder,
.modal-report .form-control::-webkit-input-placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}
.modal-report .form-control {
    color: var(--color-text);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--color-card);
    padding: 2rem;
    border-radius: var(--radius);
    max-width: 500px;
    width: 90%;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-muted);
}

.modal-close:hover {
    color: var(--color-text);
}
.modal-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.modal-content h3 {
    margin: 0 0 1.5rem 0;
}

/* Lightbox для фото на весь экран */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    user-select: none;
}

.lightbox.active {
    display: flex;
}

.lightbox-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 2rem;
    line-height: 1;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    background: rgba(0,0,0,0.35);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2001;
}

.lightbox-close:hover {
    background: rgba(0,0,0,0.6);
    color: #fff;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.38);
    border: none;
    color: rgba(255,255,255,0.9);
    font-size: 2.2rem;
    line-height: 1;
    width: 44px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    z-index: 2001;
    padding: 0;
}

.lightbox-prev { left: 0.75rem; }
.lightbox-next { right: 0.75rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0,0,0,0.6);
    color: #fff;
}

@media (max-width: 480px) {
    .lightbox-prev,
    .lightbox-next {
        display: none;
    }
}

.lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.9);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
}

.lightbox-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.18s ease;
    will-change: transform;
}

.lightbox-track.is-instant {
    transition: none;
}

.lightbox-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    box-sizing: border-box;
}

.lightbox-slide img,
.lightbox-img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    transition: opacity 0.11s ease;
    border-radius: 4px;
}

.lightbox-img.lb-fade {
    opacity: 0;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}
.empty-state a {
    color: var(--color-accent);
    text-decoration: none;
}
.empty-state a:hover {
    text-decoration: underline;
}

/* Кнопка "Назад" */
.back-link {
    display: inline-block;
    margin-top: 1rem;
}

/* Адаптивность для планшета 10" */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Админ: заявки на редактирование */
.edit-request-card {
    margin-bottom: 1.5rem;
}

.edit-request-header h3 {
    margin: 0 0 0.25rem 0;
}

.edit-request-meta {
    margin: 0 0 1rem 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Сообщение мастера к заявке — выделение для админа */
.master-comment-highlight {
    background: #fff3cd;
    border: 2px solid #f39c12;
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.edit-request-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .edit-request-comparison {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Стили интерфейса (1–5: карточка проекта 200, 6: skanvika)
   ========================= */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.theme-toggle-btn {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.theme-toggle-btn.is-active {
    background: var(--brand-green);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(16, 75, 45, 0.4);
}

/* Стиль 1 — нейтральный (карточка проекта 200) */
body.theme-style-1 {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-2: #f8fafc;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-dark: #0f172a;
    --color-border: #d6deea;
    --color-accent: #2563eb;
    --color-accent-contrast: #fff;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
}
body.theme-style-1 .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: #1e40af; color: #fff; }
body.theme-style-1 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-1 .users-table th { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; }

/* Стиль 2 — зелёный (карточка проекта 200) */
body.theme-style-2 {
    --color-bg: #eefcf6;
    --color-surface: #f6fffb;
    --color-surface-2: #f8fffc;
    --color-text: #113229;
    --color-text-muted: #4d6b62;
    --color-dark: #113229;
    --color-border: #c5ead7;
    --color-accent: #059669;
    --color-accent-contrast: #fff;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-danger: #dc2626;
}
body.theme-style-2 .btn-primary { background: linear-gradient(135deg, #10b981, #059669); border-color: #047857; color: #fff; }
body.theme-style-2 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-2 .users-table th { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }

/* Стиль 3 — оранжевый (карточка проекта 200) */
body.theme-style-3 {
    --color-bg: #fff5e6;
    --color-surface: #fffaf2;
    --color-surface-2: #fffdf8;
    --color-text: #412819;
    --color-text-muted: #7c5a41;
    --color-dark: #412819;
    --color-border: #f3d3a3;
    --color-accent: #ea580c;
    --color-accent-contrast: #fff;
    --color-success: #16a34a;
    --color-warning: #ea580c;
    --color-danger: #dc2626;
}
body.theme-style-3 .btn-primary { background: linear-gradient(135deg, #f97316, #ea580c); border-color: #c2410c; color: #fff; }
body.theme-style-3 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-3 .users-table th { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }

/* Стиль 4 — фиолетовый (карточка проекта 200) */
body.theme-style-4 {
    --color-bg: #efebff;
    --color-surface: #f7f5ff;
    --color-surface-2: #f9f7ff;
    --color-text: #2e1f63;
    --color-text-muted: #5b4d95;
    --color-dark: #2e1f63;
    --color-border: #d9ccff;
    --color-accent: #7c3aed;
    --color-accent-contrast: #fff;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;
}
body.theme-style-4 .btn-primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); border-color: #6d28d9; color: #fff; }
body.theme-style-4 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-4 .users-table th { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }

/* Стиль 5 — тёмный (карточка проекта 200) */
body.theme-style-5 {
    --color-bg: #111c33;
    --color-surface: #16233e;
    --color-surface-2: #0f172a;
    --color-text: #eaf1ff;
    --color-text-muted: #9fb1d7;
    --color-dark: #eaf1ff;
    --color-border: #2b3b5f;
    --color-accent: #38bdf8;
    --color-accent-contrast: #0b1220;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
}
body.theme-style-5 .btn-primary { background: linear-gradient(135deg, #38bdf8, #3b82f6); border-color: #2563eb; color: #fff; }
body.theme-style-5 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-5 .users-table th { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: #0b1220; }
body.theme-style-5 .header { background: rgba(2, 6, 23, 0.95); }

/* Стиль 6 — skanvika (фирменный) */
body.theme-style-6 {
    --color-bg: #ede2d2;
    --color-surface: #ffffff;
    --color-surface-2: #faf5ed;
    --color-text: #1e1510;
    --color-text-muted: #5e4a35;
    --color-dark: var(--brand-wood-dark);
    --color-border: rgba(92, 61, 36, 0.20);
    --color-border-strong: rgba(92, 61, 36, 0.34);
    --color-accent: var(--brand-gold);
    --color-accent-contrast: #ffffff;
    --color-success: #2f7d46;
    --color-warning: #c8872f;
    --color-danger: #c9493d;
    --header-bg: linear-gradient(135deg, #1a3828 0%, #2f5d3a 60%, #1e4a2d 100%);
    --header-fg: rgba(255, 255, 255, 0.98);
    --header-fg-soft: rgba(230, 255, 235, 0.90);
}
/* ─── Тема 6: skanvika — единый зелёный стиль для ВСЕХ интерактивных элементов ─── */

/* Кнопки */
body.theme-style-6 .btn-primary {
    background: linear-gradient(135deg, #2a6038, #3a7a4a) !important;
    border-color: #1e4a2d !important;
    color: #fff !important;
}
body.theme-style-6 .btn-primary:hover {
    background: linear-gradient(135deg, #1e4a2d, #2f5d3a) !important;
}

/* Все заголовки таблиц — зелёные (используем !important чтобы перебить compact-mode и другие утилиты) */
body.theme-style-6 .users-table th,
body.theme-style-6 .data-table th,
body.theme-style-6 .admin-projects-table th,
body.theme-style-6 table th {
    background: linear-gradient(135deg, #2a6038, #3a7a4a) !important;
    color: #fff !important;
}

/* Шапка */
body.theme-style-6 .header { background: var(--header-bg); }
body.theme-style-6 .theme-toggle-btn.is-active { background: var(--brand-gold); color: #fff; }

/* Активный пункт меню — золотой акцент */
body.theme-style-6 .nav-link-roles.active {
    background: var(--brand-gold) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(184, 122, 61, 0.55);
}

/* btn-outline */
body.theme-style-6 .btn-outline {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(47, 93, 58, 0.40);
    color: #1a3828;
}
body.theme-style-6 .btn-outline:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(47, 93, 58, 0.60);
}

/* Кнопки прораба/мастера (foreman-style-scope) — зелёные в теме 6 */
body.theme-style-6 .foreman-style-scope {
    --fp-btn-primary-bg: linear-gradient(135deg, #2a6038, #3a7a4a);
    --fp-btn-primary-border: #1e4a2d;
    --fp-btn-primary-text: #ffffff;
    --fp-warning: var(--brand-gold);
}

/* Кнопка-иконка «создать проект» — убираем синий */
body.theme-style-6 .admin-projects-page #project-create-form .project-create-summary-icon {
    background: linear-gradient(145deg, #3a7a4a, #2a6038) !important;
    box-shadow: 0 2px 8px rgba(42, 96, 56, 0.35) !important;
}

/* Кнопка создания клиента — убираем синий */
body.theme-style-6 .admin-projects-page .form-row-uploads .form-group-create-client .btn-create-client {
    background: linear-gradient(135deg, #2a6038, #3a7a4a) !important;
    border-color: #1e4a2d !important;
    color: #fff !important;
}
body.theme-style-6 .admin-projects-page .form-row-uploads .form-group-create-client .btn-create-client:hover {
    background: linear-gradient(135deg, #1e4a2d, #2f5d3a) !important;
}

/* Страница подтверждения этапов — убираем синий из кнопки подтвердить */
body.theme-style-6.stage-confirmations-page .stage-confirm-actions .btn-primary,
body.stage-confirmations-page .stage-confirm-actions .btn-primary {
    background: linear-gradient(135deg, #2a6038, #3a7a4a) !important;
    border-color: #1e4a2d !important;
    color: #fff !important;
}
body.theme-style-6.stage-confirmations-page .stage-confirm-actions .btn-primary:hover,
body.stage-confirmations-page .stage-confirm-actions .btn-primary:hover {
    background: linear-gradient(135deg, #1e4a2d, #2f5d3a) !important;
}


.edit-request-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
}

.edit-request-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.edit-request-photos img {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
}

.edit-request-photos .muted {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.edit-request-comment {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.edit-request-actions {
    display: flex;
    gap: 0.5rem;
}

.edit-warning {
    background: #fff3cd;
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Карусель фото в заявках (пролистывание) */
.photo-carousel-wrap {
    margin-bottom: 0.5rem;
}

.photo-carousel {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scroll-snap-type: x mandatory;
}

.photo-carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.photo-carousel-item {
    cursor: pointer;
}

.photo-carousel-item {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius);
}

.photo-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: var(--radius);
    display: block;
}

/* Слайд карусели (фото + комментарий) */
.photo-carousel-slide {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.photo-carousel-slide .report-comment,
.photo-carousel-slide .gallery-comment {
    margin: 0.35rem 0 0 0;
    max-width: 200px;
}

/* Карусель фото на этапах (мастер, клиент) */
.stage-photo-carousel .photo-carousel-item {
    cursor: pointer;
}

.stage-photo-carousel .photo-carousel-item img {
    transition: opacity 0.2s;
}

.stage-photo-carousel .photo-carousel-item:hover img {
    opacity: 0.9;
}

/* Плиточная карусель — горизонтальный скролл с плитками (мастер, этапы) */
.stage-photo-carousel-tiles-wrap {
    margin-bottom: 0.5rem;
    position: relative;
}

.stage-photo-carousel-tiles-wrap.project-gallery-with-arrows {
    padding: 0 40px 0 0;
}

.stage-photo-carousel-tiles-wrap.project-gallery-with-arrows .gallery-arrow {
    top: 50%;
    transform: translateY(-50%);
}

.stage-photo-carousel-tiles {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

/* Горизонтальная карусель: превью 4:3 — div.stage-photo-thumb-frame; панорамы — object-fit:cover + увеличение. */
.stage-photo-carousel-tiles .stage-photo-tile {
    flex: 0 0 120px;
    min-width: 120px;
    max-width: 120px;
    scroll-snap-align: start;
    flex-shrink: 0;
    scroll-snap-align: start;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
}

.stage-photo-carousel-tiles .stage-photo-tile > .stage-photo-tile-link {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
    color: inherit;
}

.stage-photo-carousel-tiles .stage-photo-thumb-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}

.stage-photo-carousel-tiles .stage-photo-thumb-frame img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Галерея проекта у клиента — плитки в 2 раза больше */
.project-gallery-section .stage-photo-carousel-tiles .stage-photo-tile {
    flex: 0 0 240px;
    min-width: 240px;
    max-width: 240px;
}

.stage-photo-carousel-tiles .stage-photo-tile-caption {
    max-width: 100%;
}

.stage-photo-tile-caption {
    margin: 0.25rem 0 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Плиточная сетка фото этапов (клиент, прораб) */
.stage-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.stage-photo-tile {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-2);
}

.stage-photo-tile-link {
    display: block;
    width: 100%;
    height: 100%;
}

.stage-photo-tile-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}

.stage-photo-tile-link:hover img {
    opacity: 0.9;
}

.stage-photo-caption {
    margin: 0.25rem 0 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.foreman-stage-photos .stage-photo-tile {
    display: flex;
    flex-direction: column;
}

.photo-carousel-hint {
    display: none;
}

/* Мини-галерея в карточке проекта (клиент) */
.project-card-gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}

.project-card-gallery.project-card-photo-mini {
    height: 100px;
    margin: -1rem -1rem 0.75rem -1rem;
}

.project-card-gallery.project-card-gallery-large {
    height: 200px;
    margin: 0;
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
}

.project-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.project-gallery-track::-webkit-scrollbar {
    display: none;
}

.project-gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    min-height: 0;
}

.project-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.project-gallery-dots {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    z-index: 2;
}

.project-gallery-dots .gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s;
}

.project-gallery-dots .gallery-dot.active {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

/* Стрелки карусели галереи */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.gallery-arrow:hover {
    background: rgba(0,0,0,0.6);
}

.gallery-arrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.gallery-arrow-left {
    left: 8px;
}

.gallery-arrow-left::before {
    transform: rotate(-45deg);
    margin-left: 4px;
}

.gallery-arrow-right {
    right: 8px;
}

.gallery-arrow-right::before {
    transform: rotate(135deg);
    margin-right: 4px;
}

.gallery-arrow-large {
    width: 40px;
    height: 40px;
}

.gallery-arrow-large::before {
    width: 10px;
    height: 10px;
}

.project-gallery-with-arrows {
    position: relative;
}

.project-gallery-section .project-gallery-full .photo-carousel {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0;
    scrollbar-width: none;
}
.project-gallery-section .project-gallery-full .photo-carousel::-webkit-scrollbar { display: none; }

.project-gallery-section .project-gallery-full .photo-carousel-slide {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: 280px;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius);
}

.project-gallery-section .project-gallery-full .photo-carousel-item {
    display: block;
    width: 100%;
    height: 100%;
}

.project-gallery-section .project-gallery-full .photo-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: var(--radius);
    display: block;
}

/* Клиентская карусель в стиле coverflow */
.client-coverflow-carousel {
    perspective: 900px;
    padding: 0.75rem 0.25rem 1rem;
}
.client-coverflow-slide {
    transition: transform 0.28s ease, opacity 0.28s ease, filter 0.28s ease;
    opacity: 0.65;
    filter: saturate(0.85);
    transform: scale(0.9);
}
.client-coverflow-slide.is-left {
    transform: translateX(4px) rotateY(8deg) scale(0.9);
}
.client-coverflow-slide.is-right {
    transform: translateX(-4px) rotateY(-8deg) scale(0.9);
}
.client-coverflow-slide.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.client-coverflow-slide .photo-carousel-item {
    border-radius: calc(var(--radius) + 2px);
}

@media (max-width: 768px) {
    .project-gallery-section .project-gallery-full .photo-carousel-slide {
        width: min(84vw, 320px);
        height: 200px;
    }
    .client-coverflow-slide.is-left,
    .client-coverflow-slide.is-right {
        transform: scale(0.92);
    }
}

/* Фото от прораба в подтверждении этапов (директор по строительству) */
.stage-confirm-photos .photo-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stage-confirm-photos .photo-carousel-item {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}

.stage-confirm-photos .photo-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Подтверждение этапов: таблица и скролл при необходимости — внутри белой карточки */
body.stage-confirmations-page .users-table-wrap.stage-confirm-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* table-layout: fixed + % по col — «Фото» не раздвигает «Действие» за пределы блока */
body.stage-confirmations-page table.users-table.stage-confirm-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed !important;
    overflow: visible;
}

body.stage-confirmations-page .stage-confirm-col-stage,
body.stage-confirmations-page .stage-confirm-cell-stage,
body.stage-confirmations-page .stage-confirm-col-substage,
body.stage-confirmations-page .stage-confirm-cell-substage {
    min-width: 0;
    box-sizing: border-box;
    vertical-align: top;
}

body.stage-confirmations-page .stage-confirm-stage-text {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

body.stage-confirmations-page .stage-confirm-cell-photos {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

body.stage-confirmations-page .stage-confirm-cell-photos .stage-comment {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

body.stage-confirmations-page .stage-confirm-cell-photos .stage-photo-carousel-tiles-wrap {
    max-width: 100%;
    overflow: hidden;
}

body.stage-confirmations-page .stage-confirm-cell-action {
    min-width: 0;
    vertical-align: top;
    overflow: visible;
}

/* Доли колонок при table-layout: fixed (сумма ~100%) */
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-project { width: 12%; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-type { width: 10%; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-stage { width: 17%; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-photos { width: 46%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-action { width: 15%; min-width: 12rem; }

body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-project { width: 9%; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-type { width: 8%; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-stage { width: 10%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-substage { width: 10%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-foreman { width: 9%; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-photos { width: 36%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-action { width: 18%; min-width: 11.5rem; }

body.stage-confirmations-page .stage-confirm-actions.btn-row {
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    max-width: 100%;
}

body.stage-confirmations-page .stage-confirm-actions.btn-row .btn {
    flex: 0 0 auto;
}

body.stage-confirmations-page .stage-confirm-actions.btn-row form {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

body.stage-confirmations-page .stage-confirm-actions.btn-row form > .btn {
    width: 100%;
    min-height: var(--control-height-sm);
}

body.stage-confirmations-page .stage-confirm-actions.btn-row > .reject-stage-btn {
    min-height: var(--control-height-sm);
    align-self: stretch;
}

/* «Чат»: та же высота и отступы, что у Подтвердить/Отклонить; ширина по короткому слову */
body.stage-confirmations-page .stage-confirm-actions.btn-row > a.btn.btn-small.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    min-height: var(--control-height-sm);
    padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
}

body.stage-confirmations-page .stage-confirm-cell-photos .stage-photo-carousel-tiles {
    max-width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
}

body.stage-confirmations-page .stage-confirm-table th {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-border);
}

body.stage-confirmations-page .stage-confirm-table th.stage-confirm-col-stage,
body.stage-confirmations-page .stage-confirm-table th.stage-confirm-col-substage {
    white-space: nowrap !important;
    line-height: 1.25;
}

body.stage-confirmations-page .stage-confirm-table th.stage-confirm-col-action {
    white-space: nowrap;
}

body.stage-confirmations-page .stage-confirm-table td[data-label="Проект"],
body.stage-confirmations-page .stage-confirm-table td[data-label="Тип"],
body.stage-confirmations-page .stage-confirm-table td[data-label="Прораб"] {
    white-space: nowrap;
}

body.stage-confirmations-page .stage-confirm-actions .btn-primary {
    background: linear-gradient(135deg, #2a6038, #3a7a4a);
    border-color: #1e4a2d;
    color: #fff;
}

body.stage-confirmations-page .stage-confirm-actions .btn-primary:hover {
    background: linear-gradient(135deg, #1e4a2d, #2f5d3a);
    border-color: #1a3828;
}

body.stage-confirmations-page .stage-confirm-actions .reject-stage-btn {
    background: #ef4444;
    border-color: #dc2626;
    color: #fff;
}

body.stage-confirmations-page .stage-confirm-actions .reject-stage-btn:hover {
    background: #dc2626;
    border-color: #b91c1c;
    color: #fff;
}

body.stage-confirmations-page .stage-confirm-actions > a.btn.btn-small.btn-outline {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

body.stage-confirmations-page .stage-confirm-actions > a.btn.btn-small.btn-outline:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}

@media (max-width: 1100px) and (min-width: 901px) {
    body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-action,
    body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-action {
        width: 15rem;
        min-width: 14rem;
    }
    body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-stage {
        width: 13rem;
    }
}

/* Мобильная адаптация: карточки вместо таблицы (≤900px) */
@media (max-width: 900px) {
    .stage-confirm-wrap {
        overflow-x: visible;
    }
    .stage-confirm-table,
    .stage-confirm-table thead,
    .stage-confirm-table tbody,
    .stage-confirm-table th,
    .stage-confirm-table td,
    .stage-confirm-table tr {
        display: block;
    }
    .stage-confirm-table thead tr {
        position: absolute;
        left: -9999px;
    }
    .stage-confirm-table .stage-confirm-row {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.65rem;
        box-shadow: var(--shadow-1);
    }
    .stage-confirm-table .stage-confirm-row td {
        border: none;
        padding: 0.05rem 0;
    }
    .stage-confirm-table .stage-confirm-row td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-text-muted);
        display: inline;
    }
    /* Тип / Этап / Подэтап — подпись и значение в одну строку (сетка как у «Фото») */
    .stage-confirm-table .stage-confirm-row td[data-label="Тип"],
    .stage-confirm-table .stage-confirm-row td[data-label="Этап"],
    .stage-confirm-table .stage-confirm-row td[data-label="Подэтап"] {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 0.35rem;
        row-gap: 0.1rem;
        align-items: start;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Тип"]::before,
    .stage-confirm-table .stage-confirm-row td[data-label="Этап"]::before,
    .stage-confirm-table .stage-confirm-row td[data-label="Подэтап"]::before {
        grid-column: 1;
        grid-row: 1;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Тип"] .stage-confirm-field-value,
    .stage-confirm-table .stage-confirm-row td[data-label="Этап"] .stage-confirm-stage-text,
    .stage-confirm-table .stage-confirm-row td[data-label="Подэтап"] .stage-confirm-stage-text {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    /* Фото и отчёты: подпись отдельной строкой, комментарий и миниатюры — ниже */
    .stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"]::before {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] > p.stage-comment {
        margin: 0;
        min-width: 0;
        width: 100%;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] > [data-lightbox-group] {
        min-width: 0;
        width: 100%;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] > .stage-confirm-photos-empty {
        margin: 0;
        min-width: 0;
        width: 100%;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Проект"] {
        font-weight: 600;
        padding-bottom: 0.15rem;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Проект"]:before {
        display: none;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Действие"] {
        padding-top: 0.35rem;
        margin-top: 0.2rem;
        border-top: 1px solid var(--color-border);
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Действие"]:before {
        display: none;
    }
    .stage-confirm-table .stage-confirm-row td[data-label="Этап"],
    .stage-confirm-table .stage-confirm-row td[data-label="Подэтап"] {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    .stage-confirm-table .stage-confirm-row .stage-confirm-stage-text {
        max-width: 100%;
        white-space: normal !important;
        overflow: visible;
        text-overflow: unset;
    }
    .stage-confirm-table .stage-confirm-row .btn-row.stage-confirm-actions,
    .stage-confirm-table .stage-confirm-row .btn-row {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        gap: 0.4rem;
        overflow-x: visible;
        justify-content: flex-start;
        align-items: center;
    }
    .stage-confirm-table .stage-confirm-row .btn-row .btn,
    .stage-confirm-table .stage-confirm-row .btn-row form button {
        min-height: var(--form-compact-min-height);
    }
    body.stage-confirmations-page .stage-confirm-table .stage-photo-carousel-tiles {
        flex-wrap: wrap;
        overflow-x: visible;
        max-width: 100%;
    }
    body.stage-confirmations-page .stage-confirm-table .stage-photo-carousel-tiles .stage-photo-tile {
        flex: 0 0 56px;
        min-width: 56px;
        scroll-snap-align: none;
    }
    .stage-confirm-photos .photo-carousel-item {
        width: 48px;
        height: 48px;
    }
}

/* Компактное отображение на десктопе: подтверждение этапов */
@media (min-width: 901px) {
    body.stage-confirmations-page .stage-confirm-table th,
    body.stage-confirmations-page .stage-confirm-table td {
        padding: 0.4rem 0.5rem;
        font-size: 0.875rem;
    }
    body.stage-confirmations-page .stage-confirm-table th {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--color-text-muted);
    }
    body.stage-confirmations-page .stage-photo-carousel-tiles .stage-photo-tile {
        flex: 0 0 72px;
        min-width: 72px;
        scroll-snap-align: none;
    }
    body.stage-confirmations-page .stage-photo-carousel-tiles {
        gap: 0.35rem;
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        max-width: 100%;
    }
    body.stage-confirmations-page .stage-comment {
        margin: 0 0 0.25rem 0;
        font-size: 0.8rem;
        line-height: 1.35;
    }
    body.stage-confirmations-page .stage-confirm-row .btn-row.stage-confirm-actions {
        flex-wrap: wrap;
        gap: 0.35rem;
        min-width: 0;
        max-width: 100%;
    }
    body.stage-confirmations-page .stage-confirm-row td.stage-confirm-cell-action {
        min-width: 0;
        white-space: normal;
    }
    body.stage-confirmations-page .stage-confirm-row .btn-row .btn,
    body.stage-confirmations-page .stage-confirm-row .btn-row form button,
    body.stage-confirmations-page .stage-confirm-row .btn-row a.btn.btn-small.btn-outline {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        min-height: 30px;
    }
    body.stage-confirmations-page .stage-confirm-wrap {
        margin: -0.25rem 0 0 0;
    }
    body.stage-confirmations-page .card h2 {
        font-size: 1.05rem;
        margin-bottom: 0.4rem;
    }
    body.stage-confirmations-page .card-meta {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }
    body.stage-confirmations-page .page-header {
        margin-bottom: 0.75rem;
    }
    body.stage-confirmations-page .page-header h1 {
        font-size: 1.25rem;
    }
    body.stage-confirmations-page .page-header .subtitle {
        font-size: 0.85rem;
        margin-top: 0.2rem;
    }
    body.stage-confirmations-page .card {
        padding: 0.75rem 1rem;
    }
}

.stage-comment {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.stage-rejection-note {
    margin: 0.35rem 0 0.5rem 0;
    padding: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--color-danger);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.edit-request-rejection-comment {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border-radius: var(--radius);
    border-left: 4px solid var(--color-danger, #c53030);
}

.edit-request-comment-block {
    margin: 1rem 0;
}

.edit-request-comment-block label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

/* Чат проекта */
.chat-container {
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    max-height: 500px;
    padding: 1rem 0;
}

.chat-message {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-dark);
}

/* Сообщения между админом и мастером — синяя подсветка */
.chat-msg-chat {
    background: #e8f4fc;
    border-left-color: #3498db;
}

.chat-msg-edit_approval {
    border-left-color: var(--color-success);
}

.chat-msg-edit_reject {
    border-left-color: var(--color-danger);
}

/* События согласования документов: контрастные и читаемые блоки */
.chat-msg-doc_contract_uploaded,
.chat-msg-doc_estimate_uploaded {
    background: #fff7d6;
    border-left-color: #d4a017;
}
.chat-msg-doc_contract_approved,
.chat-msg-doc_estimate_approved {
    background: #dff6e4;
    border-left-color: #1f8a4c;
}
.chat-msg-doc_contract_rejected,
.chat-msg-doc_estimate_rejected {
    background: #fde4e6;
    border-left-color: #c53030;
}
.chat-msg-doc_contract_uploaded .chat-message-body,
.chat-msg-doc_estimate_uploaded .chat-message-body,
.chat-msg-doc_contract_approved .chat-message-body,
.chat-msg-doc_estimate_approved .chat-message-body,
.chat-msg-doc_contract_rejected .chat-message-body,
.chat-msg-doc_estimate_rejected .chat-message-body {
    color: #1f2937;
    font-weight: 500;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.chat-message-time {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.chat-msg-label {
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.chat-msg-request {
    background: #fff3cd;
    color: #856404;
}

.chat-msg-approval {
    background: #d4edda;
    color: #155724;
}

.chat-msg-reject {
    background: #f8d7da;
    color: #721c24;
}

.chat-msg-edit_request {
    background: #fff8e6;
    border-left-color: #f39c12;
}

.chat-msg-stage {
    font-size: 0.85rem;
    color: var(--color-accent);
    font-weight: 500;
}

/* Переписка по этапу (под карточкой этапа) */
.stage-pending-confirm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff8e6;
    border-radius: var(--radius);
    border-left: 4px solid var(--color-primary, #e6a800);
}

.stage-pending-badge {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}

.stage-name-readonly {
    font-weight: 500;
}

/* Мастер: переписка по этапу — десктоп как раньше; на мобильном — аккордеон по тапу */
.stage-chat-wrap {
    margin-top: 1rem;
}

.stage-chat-mobile-head {
    display: none;
}

.stage-chat-mobile-head-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.stage-chat-mobile-head-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.stage-chat-mobile-chevron {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    margin-top: -0.2rem;
    transition: transform 0.2s ease;
}

.stage-chat-wrap.stage-chat-mobile-open .stage-chat-mobile-chevron {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}

.stage-chat-mobile-head--has-new {
    border-left: 4px solid var(--color-warning, #ca8a04);
    background: color-mix(in srgb, var(--color-warning, #eab308) 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 22%, transparent);
}

.stage-chat-new-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--color-warning, #ca8a04);
    color: #fff;
    flex-shrink: 0;
}

.stage-chat-desktop-only-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.stage-chat-panel {
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--color-surface-2);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-accent);
    color: var(--color-text);
}

/* Мастер: журнал по проекту — по умолчанию свёрнут (<details>), раскрытие по строке с шевроном */
.master-project-journal-details > summary {
    list-style: none;
    cursor: pointer;
}
.master-project-journal-details > summary::-webkit-details-marker {
    display: none;
}
.master-project-journal-summary {
    padding: 0;
    border-radius: var(--radius-sm);
    outline: none;
}
.master-project-journal-summary:focus-visible {
    box-shadow: 0 0 0 2px var(--focus-ring-strong, rgba(201, 162, 39, 0.45));
}
.master-project-journal-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}
.master-project-journal-summary-title {
    margin: 0;
    font-size: var(--typo-card-title, 1.1rem);
    font-weight: 600;
    line-height: 1.25;
}
.master-project-journal-chevron {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    margin-top: -0.15rem;
    transition: transform 0.2s ease;
}
.master-project-journal-details[open] .master-project-journal-chevron {
    transform: rotate(-135deg);
    margin-top: 0.12rem;
}
.master-project-journal-body {
    margin-top: 0.85rem;
}
.master-project-journal-body .subtitle.card-meta {
    margin-top: 0;
}

@media (max-width: 768px) {
    .stage-chat-desktop-only-title {
        display: none;
    }

    .stage-chat-mobile-head {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.35rem 0.6rem;
        width: 100%;
        margin: 0;
        padding: 0.65rem 0.85rem;
        text-align: left;
        cursor: pointer;
        font: inherit;
        color: inherit;
        background: #f1f3f5;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--radius-sm);
        border-left: 3px solid var(--color-accent);
        -webkit-tap-highlight-color: transparent;
    }

    .stage-chat-mobile-head:active {
        background: #e9ecef;
    }

    .stage-chat-panel {
        display: none;
        margin-top: 0.5rem;
        animation: none;
    }

    .stage-chat-wrap.stage-chat-mobile-open .stage-chat-panel {
        display: block;
        animation: stage-chat-panel-open 0.2s ease-out;
    }
}

@media (min-width: 769px) {
    .stage-chat-mobile-head {
        display: none !important;
    }

    .stage-chat-panel {
        display: block !important;
        margin-top: 1rem;
    }

    .stage-chat-wrap .stage-chat-new-pill {
        display: none !important;
    }
}

@keyframes stage-chat-panel-open {
    from { opacity: 0.65; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.stage-chat-section {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--color-surface-2);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-accent);
    color: var(--color-text);
}

.stage-chat-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.stage-chat-message {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border-radius: 4px;
    color: var(--color-text);
}

.stage-chat-message.chat-msg-chat {
    background: #e8f4fc;
    border-left: 3px solid #3498db;
}

.stage-chat-message.chat-msg-edit_request {
    background: #fff8e6;
    border-left: 3px solid #f39c12;
}

.stage-chat-message:last-child {
    margin-bottom: 0;
}

.stage-chat-author {
    font-weight: 600;
    margin-right: 0.5rem;
}

.stage-chat-time {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.stage-chat-body {
    margin-top: 0.35rem;
    font-size: 0.95rem;
}

.stage-chat-empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
}

.stage-chat-form {
    margin-top: 0.75rem;
}

.stage-chat-form-row {
    display: flex;
    gap: 0.5rem;
}

.stage-chat-form-row .form-control {
    flex: 1;
}

.chat-stage-select {
    max-width: 280px;
}

.stage-item-wrapper {
    margin-bottom: 1rem;
}

/* Форма «Добавить этап» — компактная, всё в одну строку */
.stages-add-subtitle {
    margin: 0 0 0.5rem 0 !important;
    font-size: 0.85rem;
}
.stages-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}
.stages-add-group {
    margin-bottom: 0 !important;
    flex: 1 1 auto;
    min-width: 120px;
}
.stages-add-group:first-child {
    min-width: 160px;
    flex: 2 1 auto;
}
.stages-add-group label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
}
.stages-add-group .form-control {
    padding: var(--form-compact-padding-y) var(--form-compact-padding-x);
    font-size: 0.9rem;
}
.stages-add-btn {
    flex-shrink: 0;
    align-self: flex-end;
}

@media (max-width: 600px) {
    .stages-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    .stages-add-group {
        min-width: 100%;
    }
    .stages-add-btn {
        align-self: stretch;
    }
}

.stage-chat-inline {
    margin-left: 2.5rem;
}

@media (max-width: 600px) {
    .stage-chat-inline {
        margin-left: 0;
    }
}

.chat-message-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: 2rem;
}

.chat-form {
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.chat-form-row {
    display: flex;
    gap: 0.5rem;
}

.chat-form-row textarea {
    flex: 1;
    resize: vertical;
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .project-grid {
        grid-template-columns: 1fr;
    }
}

/* Диаграмма Ганта — производственный календарь */
.gantt-legend-green { color: var(--color-success); }
.gantt-legend-blue { color: #3498db; }
.gantt-legend-red { color: var(--color-danger); }

.gantt-bar-actual {
    background: #3498db;
    opacity: 0.9;
}

.gantt-stage-overdue .gantt-stage-label {
    color: var(--color-danger);
}

.gantt-stage-overdue {
    background: #fff5f5;
}

.gantt-overdue-label {
    color: var(--color-danger);
}

.gantt-days-diff {
    font-weight: 600;
}

.gantt-days-early {
    color: var(--color-success);
}

.gantt-days-late {
    color: var(--color-danger);
}

.gantt-card {
    overflow-x: auto;
}

.gantt-header {
    display: flex;
    border-bottom: 2px solid var(--color-border-strong);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 600px;
    color: var(--color-text);
}

.gantt-label-col {
    width: 220px;
    flex-shrink: 0;
}

.gantt-timeline-col {
    flex: 1;
    min-width: 400px;
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
}

.gantt-project {
    border-bottom: 1px solid var(--color-border);
}

.gantt-project:last-child {
    border-bottom: none;
}

.gantt-project-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
    min-width: 600px;
}

.gantt-project-header:hover {
    background: var(--color-surface-2);
}

.gantt-project-header-main {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    min-width: 0;
}

.gantt-project-header-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.65rem;
}

.gantt-project-title-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.gantt-project-meta-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    min-width: 0;
}

.gantt-project-meta-row .gantt-project-responsible,
.gantt-project-meta-row .gantt-project-type-label {
    font-size: inherit;
}

.gantt-project-title-text {
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
    max-width: 100%;
}

.gantt-project-responsible,
.gantt-project-type-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.gantt-project-goto {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}

.gantt-project-goto-txt--short {
    display: none;
}

.gantt-project-goto-txt--long {
    display: inline;
}

.gantt-toggle {
    width: 18px;
    flex-shrink: 0;
    padding-top: 0.2em;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    transition: transform 0.2s;
}

.gantt-project.expanded .gantt-toggle {
    transform: rotate(0deg);
}

.gantt-project:not(.expanded) .gantt-toggle {
    transform: rotate(-90deg);
}

.gantt-project-name {
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
}

.gantt-project-name:hover {
    color: var(--color-accent);
}

.gantt-project-type {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}

.gantt-project-overdue {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-danger);
    white-space: nowrap;
}

.gantt-project-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.gantt-stages {
    display: none;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.gantt-project.expanded .gantt-stages {
    display: block;
}

.gantt-stage-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    min-width: 600px;
}

.gantt-stage-label {
    width: 220px;
    flex-shrink: 0;
}

.gantt-stage-num {
    color: var(--color-accent);
    font-weight: 600;
}

.gantt-stage-dates {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.gantt-bar-wrap {
    flex: 1;
    min-width: 350px;
}

.gantt-bar-track {
    position: relative;
    height: 20px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: visible;
}

.gantt-project-markers {
    display: flex;
    align-items: stretch;
    padding: 0.2rem 0 0.35rem 1.5rem;
    border-bottom: 1px dashed #e8e8e8;
}

.gantt-markers-label {
    flex: 0 0 260px;
    max-width: 38%;
    font-size: 0.75rem;
}

.gantt-markers-wrap {
    flex: 1;
    min-width: 350px;
}

.gantt-marker-track {
    height: 12px;
    background: transparent;
    border: 1px dashed #ddd;
    border-radius: 4px;
}

.gantt-marker-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 1px;
    z-index: 5;
    pointer-events: auto;
}

.gantt-marker-line--sales-contract {
    background: #9b59b6;
}

.gantt-marker-line--sales-site {
    background: #2980b9;
}

.gantt-legend-marker-contract {
    color: #9b59b6;
}

.gantt-legend-marker-site {
    color: #2980b9;
}

/* ——— Производственный календарь: компактный переключатель видов (точки / номера) ——— */
.calendar-view-switcher {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

.calendar-view-switcher-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.calendar-view-switcher-pips {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.calendar-view-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.calendar-view-pip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.calendar-view-pip.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.calendar-view-pip-num {
    pointer-events: none;
}

.calendar-skin--compact .gantt-stage-row {
    font-size: 0.8rem;
    padding: 0.2rem 0;
    min-width: 0;
}

.calendar-skin--compact .gantt-stage-label {
    width: 160px;
}

.calendar-skin--compact .gantt-bar-track {
    height: 14px;
}

.calendar-skin--compact .gantt-project-header {
    padding: 0.35rem 0;
    min-width: 0;
}

.calendar-skin--compact .gantt-marker-track {
    height: 8px;
}

.cal-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.cal-card {
    border: 1px solid #e4e8ee;
    border-radius: 10px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.cal-card-head {
    margin-bottom: 0.65rem;
}

.cal-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.cal-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.cal-card-title-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cal-card-goto {
    flex-shrink: 0;
}

.cal-card-title a {
    color: inherit;
    text-decoration: none;
}

.cal-card-title a:hover {
    color: var(--color-accent);
}

.cal-card-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.cal-card-markers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.cal-marker-pill {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: #eef2f7;
}

.cal-marker-pill--sales-contract {
    background: #f3e8ff;
    color: #6b2d8a;
}

.cal-marker-pill--sales-site {
    background: #e3f2fd;
    color: #1565a0;
}

.cal-card-stages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cal-card-stage {
    padding: 0.55rem 0;
    border-top: 1px solid #f0f0f0;
}

.cal-card-stage.is-overdue .cal-card-stage-status {
    color: var(--color-danger);
    font-weight: 600;
}

.cal-card-stage.is-done .cal-card-stage-status {
    color: var(--color-success);
}

.cal-card-stage-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.cal-card-stage-name {
    font-size: 0.88rem;
    font-weight: 500;
}

.cal-card-stage-status {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.cal-card-stage-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.cal-chip {
    font-size: 0.72rem;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    background: #f4f6f9;
}

.cal-chip--fact {
    background: #e8f4fd;
}

.cal-board-wrap {
    padding: 0.75rem 1rem 1rem;
    overflow-x: auto;
}

.cal-board-project-cell {
    vertical-align: top;
}

.cal-board-project-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 140px;
    max-width: 240px;
}

.cal-board-goto {
    white-space: nowrap;
}

.cal-board-type-cell {
    vertical-align: top;
    white-space: nowrap;
}

.cal-board-table {
    font-size: 0.85rem;
}

.cal-board-table th,
.cal-board-table td {
    vertical-align: middle;
}

.cal-board-row-overdue {
    background: #fff5f5;
}

.cal-board-col-chart {
    width: 140px;
    min-width: 120px;
}

.cal-board-chart-cell {
    padding: 0.35rem 0.5rem !important;
}

.cal-board-mini-track {
    height: 12px;
    min-width: 100px;
}

.cal-board-scale {
    margin: 0.5rem 0 0;
}

@media (max-width: 768px) {
    .cal-cards-grid {
        grid-template-columns: 1fr;
    }

    .calendar-view-switcher {
        padding: 0.3rem 0.5rem;
        gap: 0.35rem;
    }

    .calendar-view-pip {
        min-width: 1.5rem;
        height: 1.5rem;
        font-size: 0.66rem;
    }
}

.gantt-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
    min-width: 4px;
}

.gantt-bar-green {
    background: var(--color-success);
    opacity: 0.85;
}

.gantt-bar-red {
    background: var(--color-danger);
}

.gantt-bar-wrap.gantt-bar-hoverable {
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
}

.gantt-bar-hoverable:hover,
.gantt-bar-hoverable.gantt-tooltip-visible {
    z-index: 10000;
    position: relative;
}

.gantt-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b !important;
    color: #ffffff !important;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    white-space: normal;
    max-width: 280px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.gantt-tooltip strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #ffffff !important;
}

.gantt-tooltip-row {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #f1f5f9 !important;
}

.gantt-tooltip-label {
    opacity: 0.9;
    margin-right: 0.35rem;
    color: #e2e8f0 !important;
}

.gantt-tooltip-diff {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255,255,255,0.25);
    font-weight: 600;
}

.gantt-tooltip .gantt-days-early {
    color: #86efac !important;
}

.gantt-tooltip .gantt-days-late {
    color: #fca5a5 !important;
}

.gantt-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #1e293b;
}

.gantt-bar-hoverable:hover .gantt-tooltip,
.gantt-bar-hoverable.gantt-tooltip-visible .gantt-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (hover: none) {
    .gantt-bar-hoverable:hover .gantt-tooltip {
        opacity: 0;
        visibility: hidden;
    }
}

/* ========== Аналитика цеха модульных домов ========== */
.analytics-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.analytics-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analytics-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.analytics-kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-1);
}

.analytics-kpi-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.analytics-kpi-value.analytics-good {
    color: var(--color-success);
}

.analytics-kpi-value.analytics-warn {
    color: var(--color-warning);
}

.analytics-kpi-value.analytics-bad {
    color: var(--color-danger);
}

.analytics-kpi-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.analytics-kpi-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.analytics-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .analytics-chart-row {
        grid-template-columns: 1fr;
    }
}

.analytics-chart-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-1);
}

.analytics-chart-card h3 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.analytics-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.analytics-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr 40px;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

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

.analytics-bar-track {
    height: 20px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.analytics-bar {
    height: 100%;
    min-width: 4px;
    border-radius: 4px;
    transition: width 0.3s;
}

.analytics-bar-good {
    background: var(--color-success);
}

.analytics-bar-bad {
    background: var(--color-danger);
}

.analytics-bar-pending {
    background: var(--color-text-muted);
    opacity: 0.6;
}

.analytics-bar-value {
    font-weight: 600;
    text-align: right;
}

.analytics-master-table-wrap {
    overflow-x: auto;
}

.analytics-master-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.analytics-master-table th,
.analytics-master-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

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

.analytics-master-table .analytics-good {
    color: var(--color-success);
}

.analytics-master-table .analytics-warn {
    color: var(--color-warning);
}

.analytics-master-table .analytics-bad {
    color: var(--color-danger);
}

.analytics-empty {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.analytics-summary-row {
    display: grid;
    grid-template-columns: 1fr;
}

.analytics-summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-1);
}

.analytics-summary-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
}

.analytics-summary-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ========== Отчёт по производственному календарю ========== */
.report-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.report-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.report-section h2 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.report-direction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .report-direction-grid { grid-template-columns: 1fr; }
    .report-chart-grid { grid-template-columns: 1fr; }
    .report-table-grid { grid-template-columns: 1fr; }
}

.report-direction-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-1);
}

.report-direction-card h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.report-direction-desc {
    margin: 0 0 0.75rem 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.report-kpi {
    text-align: center;
    padding: 0.4rem;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}

.report-kpi-val {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
}

.report-kpi-val.good { color: var(--color-success); }
.report-kpi-val.warn { color: var(--color-warning); }
.report-kpi-val.bad { color: var(--color-danger); }

.report-kpi-lbl {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.report-chart-grid,
.report-table-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.report-chart-card,
.report-table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-1);
}

.report-chart-card h3,
.report-table-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.report-bar-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.report-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr 36px;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.report-bar-track {
    height: 16px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.report-bar {
    height: 100%;
    min-width: 4px;
    border-radius: 4px;
}

.report-bar-good { background: var(--color-success); }
.report-bar-bad { background: var(--color-danger); }

.report-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.report-table th,
.report-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

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

.report-table .good { color: var(--color-success); }
.report-table .warn { color: var(--color-warning); }
.report-table .bad { color: var(--color-danger); }

.report-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.report-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.report-summary-item {
    font-size: 0.9rem;
}

.gantt-page-header { flex-wrap: wrap; }
.gantt-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ========== Адаптация под мобильные устройства ========== */

/* Кнопка-гамбургер (скрыта на десктопе) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

@media (max-width: 1024px) {
    .header {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    body.nav-open {
        overflow: hidden;
    }
    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.35);
        z-index: 900;
    }
    .header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.4rem;
    }

    .logo {
        min-width: 0;
        max-width: calc(100% - 56px);
        padding-right: 0;
        border-right: none;
    }
    .logo-img {
        height: 24px;
        width: auto;
        max-width: min(72vw, 260px);
    }
    .logo-img-skanvika {
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        width: auto;
        max-width: min(55vw, 260px);
    }

    .nav-toggle {
        display: flex;
        margin-left: auto;
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
    }

    /* Мобильное меню: выпадает под шапкой */
    .nav {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        gap: 0;
        background: rgba(2, 6, 23, 0.97);
        padding: 0.55rem 0;
        padding-bottom: max(0.55rem, env(safe-area-inset-bottom, 0));
        box-shadow: 0 20px 48px rgba(0,0,0,0.32);
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 16px;
        z-index: 1001;
        max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0));
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .nav.nav-open {
        display: flex;
        flex-direction: column;
    }

    .nav-section {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.15rem 0;
        border-top: none;
    }

    .nav-section:first-child {
        padding-top: 0;
    }

    .nav-section-primary,
    .nav-section-system {
        min-width: 0;
        width: 100%;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }

    .nav-section-items,
    .nav-system-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        overflow: visible;
    }

    .nav-link {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown > summary.nav-link {
        width: 100%;
        border-radius: 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
    }

    .nav-dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        min-width: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0.35rem 0;
        border-radius: 14px;
        background: rgba(8, 14, 32, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        transform: none;
        overflow: hidden;
        z-index: auto;
    }

    .nav-dropdown[open] .nav-dropdown-menu {
        margin: 0.2rem 0.75rem 0.1rem;
    }

    .nav-dropdown-menu .nav-link {
        min-height: 42px;
        padding: 0.7rem 1rem;
        border-radius: 0;
        overflow-wrap: anywhere;
    }

    .nav-dropdown-menu .nav-link + .nav-link {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-dropdown-menu .nav-badge {
        margin-left: 0.75rem;
    }

    .impersonation-form {
        width: 100%;
        margin: 0;
        padding: 0 1rem;
    }
    .mobile-impersonation-bar {
        display: block;
        padding: 0.4rem 0.75rem;
        background: rgba(2, 6, 23, 0.25);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .mobile-impersonation-form {
        padding: 0;
    }
    .nav-section-system .nav-impersonation-form,
    .nav-section-system .desktop-imp-dropdown {
        display: none;
    }
    .impersonation-select {
        width: 100%;
        max-width: none;
        min-height: var(--touch-min);
        height: auto;
    }
    .nav-link {
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
        font-size: 0.95rem;
        white-space: normal;
    }
    .nav .btn-logout {
        margin: 0;
        width: auto;
        margin: 0.2rem 1rem 0;
        text-align: center;
        justify-content: center;
    }

    /* Переключатель тем — скрыть на мобильных (экономия места) */
    .theme-toggle {
        display: none !important;
    }

    .refresh-progress-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .refresh-progress-bar {
        height: 100%;
        width: 100%;
        background: rgba(22, 75, 45, 0.4);
        transition: width 0.05s linear;
        position: absolute;
        right: 0;
        top: 0;
    }
}

@media (max-width: 768px) {
    .progress-text {
        width: calc(100% - 0.75rem);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.84rem;
        line-height: 1;
    }
}

/* Админ-панель: компактный вид на планшетах (768px) */
@media (max-width: 768px) {
    .admin-dashboard-page .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .admin-dashboard-page .dashboard-card {
        padding: 0.5rem 0.65rem;
    }
    .admin-dashboard-page .dashboard-card h2 {
        font-size: 0.85rem;
        margin: 0 0 0.3rem 0;
    }
    .admin-dashboard-page .dashboard-card .btn {
        padding: var(--btn-compact-padding-y) 0.6rem;
        font-size: 0.8rem;
    }
    .admin-dashboard-page .dashboard-card .card-meta {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    .admin-dashboard-page .page-header {
        margin-bottom: 0.6rem;
    }
    .admin-dashboard-page .page-header h1 {
        font-size: 1.15rem;
    }
    .admin-dashboard-page .dashboard-grid + .card {
        padding: 0.65rem 0.85rem;
        margin-bottom: 0.65rem;
    }
}

/* Управление проектами: компактный вид на планшетах (768px) */
@media (max-width: 768px) {
    .admin-projects-page .page-header {
        margin-bottom: 0.6rem;
    }
    .admin-projects-page .page-header h1 {
        font-size: 1.15rem;
    }
    .admin-projects-page .card {
        padding: 0.65rem 0.85rem;
        margin-bottom: 0.65rem;
    }
    .admin-projects-page .card h2,
    .admin-projects-page #project-create-form .project-create-summary-h2 {
        font-size: 0.95rem;
        margin: 0 0 0.15rem 0;
    }
    .admin-projects-page #project-create-form .project-create-summary-hint {
        font-size: 0.78rem;
    }
    .admin-projects-page #project-create-form .project-create-collapsible > summary {
        flex-wrap: wrap;
        gap: 0.6rem;
        padding: 0.65rem 0.75rem;
    }
    .admin-projects-page .form-row {
        gap: 0.5rem;
    }
    .admin-projects-page .form-row .form-group {
        margin-bottom: 0.5rem;
        min-width: 140px;
    }
    .admin-projects-page .project-create-form .form-row-uploads {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
    .admin-projects-page .project-create-form .form-row-uploads .form-group-submit {
        grid-column: 1 / -1;
    }
    .admin-projects-page .form-group label {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }
    .admin-projects-page .form-control {
        padding: 0.4rem 0.5rem;
        font-size: 0.9rem;
    }
    .admin-projects-page .card-meta {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    .admin-projects-page .btn-primary {
        padding: var(--btn-compact-padding-y) 0.75rem;
        font-size: 0.9rem;
    }
    .admin-projects-page .admin-projects-table th,
    .admin-projects-page .admin-projects-table td {
        padding: 0.4rem 0.35rem;
        font-size: 0.85rem;
    }
    .admin-projects-page .admin-projects-thumb,
    .admin-projects-page .admin-projects-thumb-placeholder {
        width: 32px;
        height: 32px;
    }
    .admin-projects-page .table-filter-row th {
        padding: 0.25rem 0.3rem;
    }
    .admin-projects-page .table-filter {
        padding: 0.2rem 0.3rem;
        font-size: 0.8rem;
    }
    .admin-projects-page .btn-row {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .admin-projects-page .btn-small {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Touch targets на мобильных — компактные отступы */
@media (max-width: 768px) {
    .btn-small,
    body.compact-mode .btn-small {
        min-height: var(--form-compact-min-height);
        padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    }
    body.compact-mode .form-control {
        min-height: var(--form-compact-min-height);
        padding: 0.4rem 0.6rem;
    }
    .display-toggle-compact .display-btn {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        padding: 0 0.5rem;
    }
    .password-toggle {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        height: var(--touch-min);
    }
    /* Не раздувать строку пароля на странице входа — высота как у логина */
    .password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
    }
    .table-sort-link {
        min-height: var(--touch-min);
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 15px;
    }

    .main {
        padding: 0.85rem 0.9rem;
    }

    .breadcrumbs {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .page-header h1 {
        font-size: 1.35rem;
    }

    .page-header .btn,
    .page-header form {
        width: 100%;
    }

    .page-header .btn {
        text-align: center;
    }

    .page-header form button {
        width: 100%;
    }

    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .card h2 {
        font-size: 1.1rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row .form-group {
        min-width: 100% !important;
        max-width: none !important;
        /* В колоночном флексе flex-basis (напр. 260px у form-group-wide) становится высотой,
           создавая огромные пустые блоки. Сбрасываем — высота по контенту. */
        flex: 0 0 auto !important;
    }

    .form-control {
        font-size: 16px; /* предотвращает зум iOS при фокусе */
    }

    .login-container {
        padding: 1rem;
        min-height: calc(100vh - 100px);
    }

    .login-card {
        padding: 1.25rem;
    }

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

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

    .admin-projects-dense {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-project-dense .project-name {
        font-size: 0.8rem;
    }

    .card-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .display-toggle-compact {
        justify-content: flex-start;
    }

    /* Админ-панель: горизонтальный список (мобильные) */
    .admin-dashboard-page .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    .admin-dashboard-page .dashboard-card {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        text-align: left !important;
        padding: 0.55rem 0.85rem !important;
        gap: 0.15rem 0.6rem;
        min-height: 0;
    }
    .admin-dashboard-page .dashboard-card h2 {
        flex: 1 1 auto;
        order: 1;
        font-size: 0.95rem;
        font-weight: 600;
        margin: 0;
        width: auto;
    }
    .admin-dashboard-page .dashboard-card .btn {
        order: 2;
        flex-shrink: 0;
        width: auto !important;
        align-self: center;
        padding: 0.25rem 0.75rem;
        font-size: 0.78rem;
        min-height: 30px;
        max-width: none;
    }
    .admin-dashboard-page .dashboard-card .btn + .btn {
        order: 3;
        margin-top: 0;
    }
    .admin-dashboard-page .dashboard-card .card-meta {
        order: 4;
        flex: 1 1 100%;
        margin: 0;
        text-align: left;
        font-size: 0.72rem;
    }
    .admin-dashboard-page .page-header {
        margin-bottom: 0.4rem;
    }
    .admin-dashboard-page .page-header h1 {
        font-size: 1rem;
    }
    .admin-dashboard-page .dashboard-grid + .card {
        padding: 0.5rem 0.65rem;
        margin-bottom: 0.5rem;
    }
    .admin-dashboard-page .dashboard-grid + .card .card-header-row h2 {
        font-size: 0.85rem;
        margin: 0;
    }
    .admin-dashboard-page .dashboard-grid + .card .display-toggle-compact .display-btn {
        min-width: 32px;
        min-height: 32px;
        font-size: 0.8rem;
    }
    .admin-dashboard-page .dashboard-recent-rows .admin-project-row {
        padding: 0.35rem 0.5rem;
    }
    .admin-dashboard-page .admin-projects-table th,
    .admin-dashboard-page .admin-projects-table td {
        padding: 0.35rem 0.3rem;
        font-size: 0.8rem;
    }
    .admin-dashboard-page .admin-projects-thumb {
        width: 28px;
        height: 28px;
    }
}

/* Управление проектами: компактный вид в 4 раза (480px) */
@media (max-width: 480px) {
    .admin-projects-page .page-header {
        margin-bottom: 0.4rem;
    }
    .admin-projects-page .page-header h1 {
        font-size: 1rem;
    }
    .admin-projects-page .card {
        padding: 0.45rem 0.55rem;
        margin-bottom: 0.5rem;
    }
    .admin-projects-page .card h2,
    .admin-projects-page #project-create-form .project-create-summary-h2 {
        font-size: 0.85rem;
        margin: 0 0 0.12rem 0;
    }
    .admin-projects-page #project-create-form .project-create-summary-hint {
        font-size: 0.72rem;
    }
    .admin-projects-page #project-create-form .project-create-collapsible > summary {
        padding: 0.55rem 0.6rem;
        gap: 0.5rem;
    }
    .admin-projects-page #project-create-form .project-create-summary-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.35rem;
    }
    .admin-projects-page .form-row {
        gap: 0.35rem;
    }
    .admin-projects-page .form-row .form-group {
        margin-bottom: 0.35rem;
        min-width: 100%;
    }
    .admin-projects-page .project-create-form .form-row-uploads {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .admin-projects-page .project-create-form .form-row-uploads .form-group-submit {
        grid-column: 1 / -1;
    }
    .admin-projects-page .form-group label {
        font-size: 0.75rem;
        margin-bottom: 0.15rem;
    }
    .admin-projects-page .form-control {
        padding: 0.35rem 0.45rem;
        font-size: 16px; /* предотвращает зум iOS */
    }
    .admin-projects-page .card-meta {
        font-size: 0.7rem;
        margin-top: 0.2rem;
    }
    .admin-projects-page .photo-upload-btn-wrap,
    .admin-projects-page .file-upload-wrap {
        gap: 0.35rem;
    }
    .admin-projects-page .btn,
    .admin-projects-page .photo-upload-btn,
    .admin-projects-page .btn-file-upload,
    .admin-projects-page .form-row-uploads .form-group-create-client .btn-create-client {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }
    .admin-projects-page .btn-primary {
        padding: var(--btn-compact-padding-y) 0.6rem;
        font-size: 0.85rem;
    }
    .admin-projects-page .admin-projects-table th,
    .admin-projects-page .admin-projects-table td {
        padding: 0.3rem 0.25rem;
        font-size: 0.75rem;
    }
    .admin-projects-page .admin-projects-thumb,
    .admin-projects-page .admin-projects-thumb-placeholder {
        width: 28px;
        height: 28px;
    }
    .admin-projects-page .table-filter-row th {
        padding: 0.2rem 0.25rem;
    }
    .admin-projects-page .table-filter {
        padding: 0.18rem 0.25rem;
        font-size: 0.75rem;
    }
    .admin-projects-page .btn-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    .admin-projects-page .btn-row .btn,
    .admin-projects-page .btn-row form {
        width: 100%;
    }
    .admin-projects-page .btn-row .btn,
    .admin-projects-page .btn-row button {
        justify-content: center;
    }
    /* Таблица проектов — карточки на мобильных */
    .admin-projects-page .users-table-wrap {
        overflow-x: visible;
    }
    .admin-projects-page .admin-projects-table,
    .admin-projects-page .admin-projects-table thead,
    .admin-projects-page .admin-projects-table tbody,
    .admin-projects-page .admin-projects-table th,
    .admin-projects-page .admin-projects-table td,
    .admin-projects-page .admin-projects-table tr {
        display: block;
    }
    .admin-projects-page .admin-projects-table thead {
        display: block;
    }
    .admin-projects-page .admin-projects-table .table-header-row {
        position: absolute;
        left: -9999px;
    }
    .admin-projects-page .admin-projects-table .table-filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.35rem 0.5rem;
        margin-bottom: 0.35rem;
        background: var(--color-surface-2);
        border-radius: var(--radius);
    }
    .admin-projects-page .admin-projects-table .table-filter-row th {
        flex: 1 1 45%;
        min-width: 0;
        padding: 0;
        border: none;
    }
    .admin-projects-page .admin-projects-table .table-filter-row th:first-child,
    .admin-projects-page .admin-projects-table .table-filter-row th:last-child {
        display: none;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: 0.5rem;
        padding: 0.4rem 0.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td {
        border: none;
        padding: 0;
        display: flex;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label=""] {
        flex: 0 0 auto;
        order: -2;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Объект"] {
        flex: 1 1 calc(100% - 40px);
        order: -1;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted);
        flex-shrink: 0;
        min-width: 7em;
        font-size: 0.7rem;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label=""] {
        display: flex;
        align-items: center;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label=""]:before {
        display: none;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Объект"] {
        font-weight: 600;
        padding-bottom: 0.2rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Объект"]:before {
        display: none;
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Действия"] {
        padding-top: 0.35rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--color-border);
    }
    .admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Действия"]:before {
        display: none;
    }
}

/* Управление пользователями: компактный вид на планшетах (768px) */
@media (max-width: 768px) {
    .admin-users-page .page-header {
        margin-bottom: 0.6rem;
    }
    .admin-users-page .page-header h1 {
        font-size: 1.15rem;
    }
    .admin-users-page .two-column-layout {
        gap: 1rem;
    }
    .admin-users-page .card {
        padding: 0.65rem 0.85rem;
        margin-bottom: 0.65rem;
    }
    .admin-users-page .card h2 {
        font-size: 0.95rem;
        margin: 0 0 0.5rem 0;
    }
    .admin-users-page .form-group {
        margin-bottom: 0.5rem;
    }
    .admin-users-page .form-group label {
        font-size: 0.85rem;
    }
    .admin-users-page .form-control {
        padding: 0.4rem 0.5rem;
        font-size: 0.9rem;
    }
    .admin-users-page .card-meta {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    .admin-users-page .users-search-form {
        margin-bottom: 0.6rem;
    }
    .admin-users-page .users-search-row {
        gap: 0.4rem;
    }
    .admin-users-page .users-search-row input {
        min-width: 120px;
    }
    .admin-users-page .users-role-filter {
        min-width: 120px;
    }
    .admin-users-page .users-table th,
    .admin-users-page .users-table td {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }
    .admin-users-page .users-list-details summary {
        font-size: 0.9rem;
    }
    /* Форма «Добавить пользователя» — планшет */
    .admin-users-page .users-add-form input,
    .admin-users-page .users-add-form select {
        min-height: var(--touch-min);
    }
    .admin-users-page .users-add-form .btn-primary {
        min-height: var(--form-compact-min-height);
    }
}

/* Управление пользователями: карточки на мобильных (480px) */
@media (max-width: 480px) {
    .admin-users-page .page-header {
        margin-bottom: 0.4rem;
    }
    .admin-users-page .page-header h1 {
        font-size: 1rem;
    }
    .admin-users-page .card {
        padding: 0.45rem 0.55rem;
        margin-bottom: 0.5rem;
    }
    .admin-users-page .card h2 {
        font-size: 0.85rem;
        margin: 0 0 0.35rem 0;
    }
    .admin-users-page .form-group {
        margin-bottom: 0.35rem;
    }
    .admin-users-page .form-group label {
        font-size: 0.75rem;
    }
    .admin-users-page .form-control {
        padding: 0.35rem 0.45rem;
        font-size: 16px;
    }
    .admin-users-page .card-meta {
        font-size: 0.7rem;
    }
    .admin-users-page .users-search-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .admin-users-page .users-search-row input,
    .admin-users-page .users-search-row select,
    .admin-users-page .users-search-row button {
        width: 100%;
    }
    /* Форма «Добавить пользователя» — мобильная адаптация */
    .admin-users-page .users-add-card .form-group {
        margin-bottom: 0.4rem;
    }
    .admin-users-page .users-add-form input,
    .admin-users-page .users-add-form select {
        width: 100%;
        min-height: var(--touch-min);
        font-size: 16px; /* предотвращает зум iOS при фокусе */
    }
    .admin-users-page .users-add-form .card-meta {
        font-size: 0.65rem;
        margin-top: 0.15rem;
        line-height: 1.3;
    }
    .admin-users-page .users-add-form .btn-primary {
        width: 100%;
        min-height: var(--form-compact-min-height);
        padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
        font-size: 1rem;
        margin-top: 0.25rem;
    }
    .admin-users-page .users-list-details summary {
        font-size: 0.85rem;
    }
    /* Таблица пользователей — карточки на мобильных */
    .admin-users-page .users-table-wrap {
        overflow-x: visible;
    }
    .admin-users-page .users-table,
    .admin-users-page .users-table thead,
    .admin-users-page .users-table tbody,
    .admin-users-page .users-table th,
    .admin-users-page .users-table td,
    .admin-users-page .users-table tr {
        display: block;
    }
    .admin-users-page .users-table .users-table-header-row {
        position: absolute;
        left: -9999px;
    }
    .admin-users-page .users-table .admin-user-row-mobile {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: 0.5rem;
        padding: 0.4rem 0.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }
    .admin-users-page .users-table .admin-user-row-mobile td {
        border: none;
        padding: 0;
        display: flex;
        align-items: flex-start;
        gap: 0.35rem;
        font-size: 0.85rem;
    }
    .admin-users-page .users-table .admin-user-row-mobile td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted);
        flex-shrink: 0;
        min-width: 5em;
        font-size: 0.75rem;
    }
    .admin-users-page .users-table .admin-user-row-mobile td[data-label="Имя"] {
        font-weight: 600;
        order: -2;
    }
    .admin-users-page .users-table .admin-user-row-mobile td[data-label="Логин"] {
        order: -1;
    }
    .admin-users-page .users-table .admin-user-row-mobile td[data-label="Логин"]:before,
    .admin-users-page .users-table .admin-user-row-mobile td[data-label="Имя"]:before {
        display: none;
    }
    .admin-users-page .users-table .admin-user-row-mobile td[data-label="Действия"] {
        flex: 1 1 100%;
        padding-top: 0.35rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--color-border);
    }
    .admin-users-page .users-table .admin-user-row-mobile td[data-label="Действия"]:before {
        display: none;
    }
    .admin-users-page .users-table .admin-user-row-mobile .btn-row {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .admin-users-page .users-table .admin-user-row-mobile .btn-row .btn,
    .admin-users-page .users-table .admin-user-row-mobile .btn-row form {
        flex: 1 1 auto;
    }
}

/* Таблицы и списки: горизонтальная прокрутка на мобильных */
.users-table-wrap,
.gantt-card,
.wr-list {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    input,
    select,
    textarea,
    .form-control,
    .report-inline-filter {
        font-size: 16px !important; /* предотвращает авто-зум Safari на iPhone */
    }

    .form-toolbar,
    .form-toolbar-actions,
    .btn-row,
    .stage-confirm-actions,
    .worker-row-actions,
    .substage-form-actions,
    .worker-qr-scan-actions,
    .worker-day-confirm-actions {
        gap: 0.5rem;
    }

    .form-toolbar-actions,
    .btn-row,
    .stage-confirm-actions,
    .substage-form-actions {
        flex-wrap: wrap;
    }

    .form-toolbar-actions .btn,
    .btn-row .btn,
    .stage-confirm-actions .btn,
    .substage-form-actions .btn,
    .photo-upload-btn-wrap .btn,
    .btn-photo-upload {
        min-height: var(--touch-min);
        justify-content: center;
    }

    .photo-upload-btn-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .photo-pick-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-content,
    .substage-modal-content,
    .worker-day-confirm-modal,
    .worker-qr-scan-modal {
        width: min(100% - 1rem, 760px) !important;
        max-height: calc(100dvh - 1rem) !important;
        margin: 0.5rem auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Таблица «ожидающие дат» — без горизонтального скролла (перекрывает overflow-x: auto у .users-table-wrap) */
.users-table-wrap.production-dates-pending-wrap {
    overflow-x: visible;
}

/* Мобильный вид wr-list style3: карточки вместо сетки */
@media (max-width: 900px) {
    .wr-style-3-wrap .wr-row {
        display: block;
        padding: 0.6rem 0.75rem;
        min-width: 0;
    }
    .wr-style-3-wrap .wr-row.wr-head {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .wr-style-3-wrap .wr-row.wr-head .wr-cell {
        display: block;
        padding: 0;
        border: none;
    }
    .wr-style-3-wrap .wr-row.wr-head .wr-cell::before {
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.7rem;
    }
    .wr-style-3-wrap .wr-row.wr-head .wr-cell .report-inline-filter {
        width: 100%;
        min-width: 0;
    }
    .wr-style-3-wrap .wr-row.wr-head .col-resizer {
        display: none;
    }
    .wr-style-3-wrap .wr-row .wr-cell {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.25rem 0;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        border-bottom: 1px solid var(--color-border);
    }
    .wr-style-3-wrap .wr-row .wr-cell:last-child {
        border-bottom: none;
    }
    .wr-style-3-wrap .wr-row .wr-cell::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-muted);
        min-width: 5.5rem;
    }
    .wr-style-3-wrap .wr-row .wr-cell[data-col="actions"]::before {
        min-width: 4.5rem;
    }
    .wr-style-3-wrap .wr-row .wr-cell .wr-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.4rem;
    }
    .wr-style-3-wrap .wr-row .wr-cell .wr-actions .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    .wr-style-3-wrap .wr-list {
        overflow-x: visible;
    }
    .wr-style-3-wrap .wr-pill {
        font-size: 0.85rem;
        height: 22px;
        padding: 0 0.4rem;
    }
}

@media (max-width: 768px) {
    .admin-projects-table th,
    .admin-projects-table td {
        padding: 0.5rem 0.4rem;
        font-size: 0.9rem;
    }

    .admin-projects-table th:nth-child(n+4),
    .admin-projects-table td:nth-child(n+4) {
        white-space: nowrap;
    }

    .admin-projects-thumb,
    .admin-projects-thumb-placeholder {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .admin-projects-table {
        font-size: 0.85rem;
    }

    .admin-projects-table th,
    .admin-projects-table td {
        padding: 0.4rem 0.3rem;
    }
}

/* Вариант B карточки — на мобильных в колонку */
@media (max-width: 600px) {
    .project-card-variant-b {
        flex-direction: column;
    }

    .project-card-variant-b .project-card-photo {
        width: 100%;
        min-width: 100%;
        height: 140px;
        min-height: 140px;
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

/* Ленточки проектов — адаптив */
@media (max-width: 480px) {
    .admin-project-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .admin-project-row-thumb {
        width: 100%;
        height: 120px;
    }
}

/* Критичные кнопки — увеличенная touch-зона на мобильных */
@media (max-width: 768px) {
    .stage-confirm,
    .close-substage-btn,
    .btn-primary[type="submit"] {
        min-height: var(--form-compact-min-height);
        padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    }
}

/* Этапы — мобильная версия */
@media (max-width: 768px) {
    .stage-item {
        padding: 0.5rem 0.6rem;
    }

    .stage-item-row-dates,
    .stage-item-row-dates-readonly {
        flex-wrap: nowrap;
        gap: 0.35rem 0.65rem;
        padding-top: 0.35rem;
    }

    .stage-item-row-dates .stage-date-field {
        flex: 1;
        min-width: 0;
    }

    .stage-item-row-dates .stage-date-input {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .stage-date-label {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .stage-item-row-top {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .stage-item-row-top .stage-order {
        order: 0;
    }

    .stage-item-row-top .stage-drag-handle {
        order: 0;
    }

    .stage-name-wrap {
        flex: 1 1 100%;
        min-width: 0;
        order: 2;
    }

    .stage-item-row-top .stage-delete-btn {
        order: 1;
        margin-left: auto;
    }

    /* Название на всю ширину — даты по левому краю поля имени (без отступа под ручку/номер) */
    .stage-item-row-dates,
    .stage-item-row-dates-readonly {
        margin-left: 0;
    }

    .stage-date-input {
        flex: 1;
        min-width: 0;
    }

    .stage-card-header {
        flex-wrap: wrap;
    }

    .stage-status-label {
        margin-left: 0;
        width: 100%;
        margin-top: 0.25rem;
    }

    .stage-actions-row {
        flex-direction: column;
    }

    .stage-actions-row .btn,
    .stage-actions-row .btn-small {
        width: 100%;
    }

    .foreman-substage-item {
        flex-direction: column;
    }

    .foreman-style-scope .foreman-substage-item {
        grid-template-columns: 1fr !important;
    }

    .foreman-substage-item {
        flex-direction: column;
    }

    .substage-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .foreman-style-scope .substage-actions {
        min-width: unset;
        justify-content: flex-start;
        position: static;
    }

    .substage-actions .close-substage-btn {
        width: auto;
        max-width: 100%;
    }

    .foreman-style-scope .substage-actions .close-substage-btn {
        min-width: unset;
    }

    .substage-form-actions .btn {
        width: 100%;
    }

    .btn-row.takeover-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn-row.takeover-actions .takeover-reject-form {
        width: 100%;
        flex-wrap: wrap;
    }
    .btn-row.takeover-actions .takeover-comment {
        flex: 1;
        min-width: 100px;
    }

    .stage-chat-form-row {
        flex-direction: column;
    }
}

/* Чат */
@media (max-width: 600px) {
    .chat-messages {
        max-height: 300px;
    }

    .chat-form-row {
        flex-direction: column;
    }

    .chat-form-row .chat-stage-select {
        max-width: 100%;
    }

    .chat-form-row textarea {
        min-height: 80px;
    }
}

/* Диаграмма Ганта */
@media (max-width: 768px) {
    .gantt-label-col {
        width: 160px;
    }

    .gantt-stage-label {
        width: 160px;
    }

    .gantt-bar-wrap {
        min-width: 200px;
    }

    .gantt-header,
    .gantt-project-header,
    .gantt-stage-row {
        min-width: 480px;
    }

    /* Производственный календарь (компакт): без принудительной ширины — влезает в мобильный экран */
    .gantt-card.calendar-skin--compact .gantt-header,
    .gantt-card.calendar-skin--compact .gantt-project-header,
    .gantt-card.calendar-skin--compact .gantt-stage-row {
        min-width: 0;
    }

    .gantt-card.calendar-skin--compact .gantt-timeline-col {
        min-width: 0;
        flex: 1 1 auto;
    }

    .gantt-card.calendar-skin--compact .gantt-bar-wrap {
        min-width: 0;
    }
}

/* Шапка строки проекта в календаре: колонка + кнопка на всю ширину на узких экранах */
@media (max-width: 640px) {
    .gantt-card .gantt-project-header-main {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .gantt-card .gantt-project-header-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
        width: 100%;
    }

    .gantt-card .gantt-project-goto {
        margin-left: 0;
        align-self: stretch;
        width: 100%;
        box-sizing: border-box;
    }

    .gantt-card .gantt-project-goto-txt--long {
        display: none;
    }

    .gantt-card .gantt-project-goto-txt--short {
        display: inline;
    }
}

@media (max-width: 480px) {
    .gantt-label-col {
        width: 100px;
        font-size: 0.8rem;
    }

    .gantt-stage-label {
        width: 100px;
    }

    .gantt-stage-num {
        font-size: 0.85rem;
    }

    .gantt-stage-dates {
        font-size: 0.7rem;
    }
}

/* Галерея фото */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .gallery-item img {
        height: 100px;
    }
}

/* Модальное окно и лайтбокс */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        margin: 1rem;
        padding: 1.25rem;
    }

    .lightbox-close {
        right: 1rem;
        top: 1rem;
        font-size: 1.5rem;
    }
}

/* Футер */
.footer {
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .footer {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}

/* Карточка проекта с фото — минимальная высота на мобильных */
.project-card-variant-c {
    min-height: 180px;
}

@media (max-width: 480px) {
    .project-card-variant-c {
        min-height: 160px;
    }

    .project-card-variant-c .project-card-overlay {
        padding: 1.25rem 1rem 1rem;
    }

    .project-photo-form .form-row {
        flex-direction: column;
    }

    .project-photo-form .btn {
        width: 100%;
    }
}

/* Заявки на редактирование */
@media (max-width: 600px) {
    .edit-request-actions {
        flex-direction: column;
    }

    .edit-request-actions .btn {
        width: 100%;
    }

    .photo-carousel-item {
        width: 160px;
        height: 160px;
    }
}

/* Предотвращение горизонтального скролла страницы */
html {
    overflow-x: hidden;
}

/* (overflow-x: hidden already on body:130) */

/* Страница производственного календаря — кнопка "Свернуть" */
@media (max-width: 600px) {
    .page-header .btn-small {
        align-self: flex-start;
    }
}

/* Плавная прокрутка на iOS */
@media (max-width: 768px) {
    .project-list.dashboard-recent-cards {
        grid-template-columns: 1fr;
    }
}

/* Фильтры и формы: адаптивность на планшетах и телефонах */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }

    .form-row .form-group {
        min-width: 100% !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }
}

/* Очень узкие экраны: уменьшить отступы */
@media (max-width: 360px) {
    .main {
        padding: 0.5rem 0.75rem;
    }
    .card {
        padding: 0.75rem;
    }
    .breadcrumbs {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Страница связей ролей (супер-админ) */
.roles-hierarchy-card .roles-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
}
.roles-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.roles-row-branch {
    gap: 1.5rem;
}
.roles-connector {
    color: var(--color-text-muted);
    font-size: 1.2rem;
}
.role-node {
    padding: 0.75rem 1.25rem;
    background: var(--color-bg);
    border-radius: var(--radius);
    text-align: center;
    min-width: 140px;
}
.role-node-hint {
    margin: 0.35rem 0 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    font-weight: 500;
}
/* Тёмная тема — читаемость подсказок */
@media (prefers-color-scheme: dark) {
    .role-node-hint { color: var(--color-text-muted); }
}
body.theme-style-5 .role-node-hint,
body.theme-style-5 .roles-reports-to,
body.theme-style-5 .roles-subsection { color: #e2e8f0; }
/* Верхний уровень: admin/roles, impersonation, стратегические правила — максимальный контраст */
.role-node-top-level {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #6b2d5c;
    box-shadow: 0 4px 12px rgba(107, 45, 92, 0.2);
}
body.theme-style-5 .role-node-top-level,
body.theme-style-5 .role-super {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-color: #a78bfa;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
}
.role-node-hint-high-contrast {
    color: #0f172a !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.85);
    border-radius: 6px;
    margin-top: 0.5rem !important;
    line-height: 1.45;
    text-shadow: none;
}
body.theme-style-5 .role-node-hint-high-contrast,
body.theme-style-5 .role-super .role-node-hint {
    color: #f8fafc !important;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(167, 139, 250, 0.4);
}
.roles-reports-to, .roles-reports-via {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
body.theme-style-5 .roles-reports-to,
body.theme-style-5 .roles-reports-via { color: #cbd5e1; }
.roles-subsection {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 600;
}
.roles-rights {
    color: var(--color-text-muted);
    font-weight: 500;
}
body.theme-style-5 .roles-rights { color: #94a3b8; }
.roles-detail-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.roles-detail-item {
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-accent);
}
.roles-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.roles-subordinates {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #334155;
    font-weight: 500;
}
body.theme-style-5 .roles-subordinates { color: #cbd5e1; }
.roles-duties, .roles-rights {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
}
.roles-duties li, .roles-rights li {
    margin-bottom: 0.25rem;
}
.roles-duties li {
    color: #334155;
}
body.theme-style-5 .roles-duties li { color: #cbd5e1; }

/* Сценарии и цепочки действий (страница связей ролей) */
.scenarios-card {
    margin-top: 1.5rem;
}
.scenario-block {
    padding: 1.25rem 1.5rem;
    background: var(--color-bg);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-accent);
    margin-bottom: 1rem;
}
.scenario-block:last-child {
    margin-bottom: 0;
}
.scenario-block h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 700;
}
body.theme-style-5 .scenario-block h3 { color: #f1f5f9; }
.scenario-steps {
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.6;
    color: #334155;
}
body.theme-style-5 .scenario-steps { color: #cbd5e1; }
.scenario-steps li {
    margin-bottom: 0.5rem;
}
.scenario-steps li:last-child {
    margin-bottom: 0;
}
.scenario-steps .arrow {
    color: var(--color-accent);
    font-weight: bold;
}
.scenario-steps strong {
    color: var(--color-accent);
}
/* Страница связей ролей — читаемость заголовков и подзаголовков */
.roles-page-content .page-header h1 {
    color: #0f172a;
    font-weight: 800;
}
.roles-page-content .page-header .subtitle {
    color: #334155;
    font-weight: 500;
    line-height: 1.5;
}
body.theme-style-5 .roles-page-content .page-header h1 { color: #f8fafc; }
body.theme-style-5 .roles-page-content .page-header .subtitle { color: #cbd5e1; }
.roles-page-content .card h2 {
    color: #0f172a;
    font-weight: 700;
}
body.theme-style-5 .roles-page-content .card h2 { color: #f1f5f9; }
body.roles-page .breadcrumbs {
    color: #475569;
    font-weight: 500;
}
body.roles-page.theme-style-5 .breadcrumbs { color: #94a3b8; }

/* Roles Lab: три формата страницы /admin/roles */
.roles-lab-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.roles-lab-header {
    align-items: flex-start;
    gap: 1rem;
}

.roles-lab-header .subtitle {
    max-width: 900px;
}

.roles-lab-switcher-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.35rem;
}

.roles-lab-switcher-copy {
    max-width: 42rem;
}

.roles-lab-switcher-copy h2 {
    margin: 0 0 0.35rem 0;
}

.roles-lab-switcher {
    width: 100%;
}

.roles-lab-switcher--luxury {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.roles-lab-switch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.4rem;
    margin: 0;
    padding: 1.2rem 1.25rem 1.3rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 45%),
        var(--color-surface);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.16s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
}

.roles-lab-switch-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-gold), rgba(201, 162, 39, 0.25));
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.roles-lab-switch-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
}

.roles-lab-switch-card:focus {
    outline: none;
}

.roles-lab-switch-card:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 3px;
}

.roles-lab-switch-card.is-active {
    border-color: rgba(201, 162, 39, 0.5);
    box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.18),
        0 20px 50px rgba(15, 23, 42, 0.14);
}

.roles-lab-switch-card.is-active::before {
    opacity: 1;
}

.roles-lab-switch-card-index {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--color-text-muted);
}

.roles-lab-switch-card-title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.roles-lab-switch-card-desc {
    font-size: 0.84rem;
    line-height: 1.48;
    color: var(--color-text-muted);
    font-weight: 500;
}

.roles-lab-switch-card.is-active .roles-lab-switch-card-title {
    color: var(--color-text);
}

.roles-lab-switch-card.is-active .roles-lab-switch-card-desc {
    color: var(--color-text);
    opacity: 0.9;
}

@media (prefers-color-scheme: dark) {
    .roles-lab-switch-card:hover {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    }

    .roles-lab-switch-card.is-active {
        box-shadow:
            0 0 0 1px rgba(201, 162, 39, 0.28),
            0 20px 56px rgba(0, 0, 0, 0.4);
    }
}

@media (max-width: 1040px) {
    .roles-lab-switcher--luxury {
        grid-template-columns: 1fr;
    }
}

.roles-lab-view[hidden] {
    display: none !important;
}

.roles-lab-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.roles-lab-view.is-entering {
    animation: roles-lab-reveal 220ms ease;
}

@keyframes roles-lab-reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.roles-lab-eyebrow {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.roles-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.roles-system-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.roles-accent-violet { --roles-accent: #8b5cf6; }
.roles-accent-slate { --roles-accent: #334155; }
.roles-accent-emerald { --roles-accent: #059669; }
.roles-accent-amber { --roles-accent: #d97706; }
.roles-accent-pink { --roles-accent: #db2777; }
.roles-accent-blue { --roles-accent: #2563eb; }
.roles-accent-cyan { --roles-accent: #0891b2; }
.roles-accent-indigo { --roles-accent: #4f46e5; }
.roles-accent-orange { --roles-accent: #ea580c; }
.roles-accent-green { --roles-accent: #16a34a; }
.roles-accent-rose { --roles-accent: #e11d48; }
.roles-accent-governance { --roles-accent: #7c3aed; }
.roles-accent-sales { --roles-accent: #059669; }
.roles-accent-production { --roles-accent: #2f5d3a; }
.roles-accent-construction { --roles-accent: #ea580c; }
.roles-accent-execution { --roles-accent: #16a34a; }

/* View 1: Executive Command Center */
.roles-view-command {
    color: #e2e8f0;
}

.roles-command-hero,
.roles-command-card {
    color: #e2e8f0;
    background: linear-gradient(160deg, #0f172a 0%, #111827 50%, #1f2937 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: calc(var(--radius-lg) + 4px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22);
}

.roles-command-hero {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

.roles-command-hero::before {
    content: "";
    position: absolute;
    inset: -40% auto auto 58%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 62%);
    pointer-events: none;
}

.roles-command-hero::after {
    content: "";
    position: absolute;
    inset: auto auto -80px -40px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 68%);
    pointer-events: none;
}

.roles-command-hero h2,
.roles-command-card h3,
.roles-command-panel h4 {
    color: #f8fafc;
}

.roles-command-hero h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.roles-command-hero p,
.roles-command-card p,
.roles-command-card li,
.roles-command-card dd {
    color: #cbd5e1;
}

.roles-command-hero-main {
    position: relative;
    z-index: 1;
}

.roles-command-signal-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.roles-command-signal-chip {
    min-width: 148px;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.14);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.roles-command-signal-chip strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.1;
    color: #fff;
}

.roles-command-signal-chip span {
    display: block;
    margin-top: 0.22rem;
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 700;
}

.roles-command-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.roles-command-metric {
    padding: 1rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.roles-command-metric strong {
    color: #f8fafc;
}

.roles-command-metric span:last-child {
    color: #94a3b8;
    font-size: 0.85rem;
}

.roles-command-metric-value {
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
    color: #fff;
}

.roles-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 1.5rem;
}

.roles-command-card {
    padding: 1.35rem;
}

.roles-command-band + .roles-command-band {
    margin-top: 1rem;
}

.roles-command-band-title {
    margin-bottom: 0.7rem;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.roles-command-band-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.roles-command-role,
.roles-command-panel,
.roles-command-split-card {
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.roles-command-role {
    padding: 1rem;
    border-top: 3px solid var(--roles-accent, #94a3b8);
}

.roles-command-role:hover,
.roles-command-panel:hover,
.roles-command-split-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(15, 23, 42, 0.18);
}

.roles-command-role .role-badge,
.roles-command-split-card .role-badge {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.roles-command-role .role-badge,
.roles-command-panel .role-badge,
.roles-command-split-card .role-badge {
    position: relative;
}

.roles-command-role p {
    margin: 0.65rem 0 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.roles-command-role p:first-of-type {
    min-height: 4.2em;
}

.roles-command-panel-list {
    display: grid;
    gap: 0.9rem;
}

.roles-command-panel {
    padding: 1.05rem 1rem 1.05rem 1.15rem;
    position: relative;
    overflow: hidden;
}

.roles-command-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.9), rgba(59, 130, 246, 0.45));
}

.roles-command-panel h4 {
    margin: 0 0 0.55rem 0;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

.roles-command-panel ul {
    margin: 0;
    padding-left: 1.15rem;
}

.roles-command-panel li + li {
    margin-top: 0.4rem;
}

.roles-command-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
}

.roles-command-split-card {
    padding: 1rem;
    border-left: 4px solid var(--roles-accent, #94a3b8);
}

.roles-command-split-card > .role-badge {
    margin-bottom: 0.15rem;
}

.roles-command-split-card dl {
    margin: 0.8rem 0 0 0;
    display: grid;
    gap: 0.65rem;
}

.roles-command-split-card dt {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.roles-command-split-card dd {
    margin: 0.18rem 0 0;
    font-size: 0.92rem;
}

.roles-view-command .role-badge {
    filter: saturate(1.08) contrast(1.04);
}

.roles-view-command .roles-lab-eyebrow {
    color: #93c5fd;
}

/* Master: доступ работников к объекту */
.master-worker-access-form .form-group {
    margin-bottom: 1.4rem;
}

.master-worker-access-submit {
    margin-top: 0.2rem;
}

.master-worker-access-table th:first-child {
    position: relative;
    font-weight: 800;
}

.master-worker-access-table th:first-child::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.42rem;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
}

.master-worker-access-row td {
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.06), rgba(249, 115, 22, 0.03));
    vertical-align: middle;
}

.master-worker-access-row:hover td {
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.07));
}

.master-worker-access-name {
    font-weight: 700;
    color: #9a3412;
    vertical-align: middle;
}

/* View 2: Product Operating System */
.roles-system-shell {
    padding: 1.35rem;
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.roles-system-topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.roles-system-topbar h2 {
    margin: 0;
}

.roles-system-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.roles-system-subnav a {
    text-decoration: none;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: #334155;
    font-weight: 700;
}

.roles-system-section + .roles-system-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.roles-system-section h3 {
    margin: 0 0 1rem 0;
}

.roles-system-hierarchy {
    display: grid;
    gap: 1rem;
}

.roles-system-band {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.85);
}

.roles-system-band-head {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 800;
    color: #334155;
}

.roles-system-band-grid {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.roles-system-role-card,
.roles-system-directory-card,
.roles-system-rule-card,
.roles-system-scenario {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
}

.roles-system-role-card {
    padding: 0.9rem;
}

.roles-system-role-card p {
    margin: 0.55rem 0 0;
    font-size: 0.9rem;
}

.roles-system-directory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.roles-system-directory-card {
    padding: 1rem;
}

.roles-system-directory-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.roles-system-summary {
    margin: 0.8rem 0 0.65rem;
    color: #334155;
}

.roles-system-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    color: #64748b;
    font-size: 0.84rem;
}

.roles-system-tables {
    display: grid;
    gap: 1rem;
}

.roles-system-rule-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.roles-system-rule-card {
    padding: 0.9rem;
}

.roles-system-rule-card code {
    display: block;
    margin-top: 0.7rem;
    white-space: normal;
}

.roles-system-scenario-list {
    display: grid;
    gap: 0.85rem;
}

.roles-system-scenario {
    padding: 1rem;
}

.roles-system-scenario-head {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.roles-system-scenario-head h4 {
    margin: 0;
}

.roles-system-scenario-head p {
    margin: 0.2rem 0 0;
    color: #64748b;
}

.roles-system-scenario-index {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(47, 93, 58, 0.10);
    color: #2a6038;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.roles-system-scenario ol {
    margin: 0;
    padding-left: 1.25rem;
}

/* View 3: Interactive Role Atlas */
.roles-atlas-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 1.5rem;
}

.roles-atlas-map-card,
.roles-atlas-detail-card {
    padding: 1.25rem;
    border-radius: calc(var(--radius-lg) + 2px);
}

.roles-atlas-map-card {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 45%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.roles-atlas-map {
    display: grid;
    gap: 1rem;
}

.roles-atlas-band {
    padding: 0.9rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.roles-atlas-band-title {
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.roles-atlas-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.7rem;
}

.roles-atlas-connector {
    display: flex;
    justify-content: center;
    padding: 0.1rem 0 0.25rem;
}

.roles-atlas-connector span {
    width: 2px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.55), rgba(99, 102, 241, 0.15));
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.05);
}

.roles-atlas-node {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
    border-radius: var(--radius);
    padding: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.roles-atlas-node:hover,
.roles-atlas-node.is-active {
    transform: translateY(-1px);
    border-color: var(--roles-accent, #2563eb);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.roles-atlas-node.is-related {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), #fff);
}

.roles-atlas-node small {
    display: block;
    margin-top: 0.55rem;
    color: #64748b;
    font-weight: 700;
}

.roles-atlas-node-link {
    display: block;
    margin-top: 0.55rem;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.roles-atlas-detail-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.roles-atlas-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.roles-atlas-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.1);
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 700;
}

.roles-atlas-legend-item::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.roles-atlas-legend-item-related {
    background: rgba(47, 93, 58, 0.10);
    color: #2a6038;
}

.roles-atlas-detail {
    display: none;
}

.roles-atlas-detail.is-active {
    display: block;
}

.roles-atlas-detail.is-related {
    outline: 2px solid rgba(59, 130, 246, 0.18);
    outline-offset: 8px;
}

.roles-atlas-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.roles-atlas-summary {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: #334155;
}

.roles-atlas-meta {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.roles-atlas-meta p {
    margin: 0;
    color: #475569;
}

.roles-atlas-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.roles-atlas-columns h4 {
    margin: 0 0 0.65rem;
}

.roles-atlas-columns ul {
    margin: 0;
    padding-left: 1.15rem;
    color: #334155;
}

/* View 4: Scenario Storyboard */
.roles-storyboard-hero {
    padding: 1.4rem;
    background: linear-gradient(140deg, #fffbeb 0%, #fff7ed 50%, #fef2f2 100%);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: calc(var(--radius-lg) + 2px);
}

.roles-storyboard-hero h2 {
    margin: 0 0 0.45rem;
}

.roles-storyboard-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.roles-storyboard-summary span {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(251, 191, 36, 0.22);
    color: #92400e;
    font-size: 0.84rem;
    font-weight: 700;
}

.roles-storyboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.roles-storyboard-lane {
    padding: 1rem;
    border-radius: calc(var(--radius-lg) + 2px);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.roles-storyboard-lane-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.roles-storyboard-lane h3 {
    margin: 0;
}

.roles-storyboard-lane-head span {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 700;
}

.roles-storyboard-list {
    display: grid;
    gap: 0.85rem;
}

.roles-storyboard-card {
    padding: 0.95rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-left: 4px solid var(--roles-accent, #94a3b8);
}

.roles-storyboard-card-head {
    margin-bottom: 0.75rem;
}

.roles-storyboard-card-head h4 {
    margin: 0 0 0.6rem;
}

.roles-storyboard-actors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.roles-storyboard-steps {
    margin: 0;
    padding-left: 1.2rem;
}

.roles-storyboard-steps li + li {
    margin-top: 0.45rem;
}

.roles-storyboard-rules {
    padding: 1rem;
}

.roles-storyboard-rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.roles-storyboard-rule-card {
    padding: 0.95rem;
    border-radius: var(--radius);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.roles-storyboard-rule-card p {
    margin: 0.7rem 0 0;
    color: #334155;
}

/* responsive */
@media (max-width: 1024px) {
    .roles-command-hero,
    .roles-command-grid,
    .roles-atlas-layout,
    .roles-storyboard-grid {
        grid-template-columns: 1fr;
    }

    .roles-atlas-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .roles-lab-switcher-card,
    .roles-system-topbar,
    .roles-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .roles-lab-switch-card {
        width: 100%;
    }

    .roles-command-metrics {
        grid-template-columns: 1fr;
    }

    .roles-command-signal-rail {
        flex-direction: column;
    }

    .roles-system-subnav {
        width: 100%;
    }

    .roles-system-subnav a {
        flex: 1 1 calc(50% - 0.55rem);
        text-align: center;
    }

    .roles-atlas-map-card,
    .roles-atlas-detail-card,
    .roles-storyboard-lane,
    .roles-storyboard-hero {
        padding: 1rem;
    }

    .roles-atlas-band {
        padding: 0.8rem;
    }

    .roles-atlas-band-grid {
        grid-template-columns: 1fr;
    }

    .roles-atlas-node {
        padding: 0.9rem;
    }

    .roles-storyboard-grid {
        gap: 0.85rem;
    }

    .roles-storyboard-lane-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .roles-storyboard-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .roles-storyboard-summary span {
        justify-content: center;
    }

    .roles-command-band-list,
    .roles-system-band-grid,
    .roles-system-directory,
    .roles-system-rule-list,
    .roles-storyboard-rule-grid {
        grid-template-columns: 1fr;
    }
}

/* Уведомления */
.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.notification-item {
    border-bottom: 1px solid var(--color-border);
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-link {
    display: block;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.notification-link:hover {
    background: var(--color-surface-2);
}
.notification-message {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.notification-project {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-text-soft);
}
.notification-time {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-text-soft);
}

/* Skeleton loaders (для будущего использования) */
.skeleton {
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-2) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text { height: 1em; }
.skeleton-title { height: 1.5em; width: 60%; }
.skeleton-card { height: 120px; }
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Combobox: выпадающий список с поиском (работы для работника) */
.work-item-combobox {
    position: relative;
    min-width: 200px;
}
.work-item-combobox .work-item-search {
    width: 100%;
}
.work-item-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22), 0 8px 20px rgba(15, 23, 42, 0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 5000;
    min-width: 200px;
    width: min(480px, calc(100vw - 20px));
}
.work-item-dropdown li[role="option"] {
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.work-item-dropdown li[role="option"]:last-child {
    border-bottom: none;
}
.work-item-dropdown li[role="option"]:hover,
.work-item-dropdown li[role="option"].highlight {
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.9);
    color: #0f172a;
}
.work-item-dropdown li[role="option"]:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}


/* Справочник работ — компактный вид для Производства */
.work-items-production .users-table {
    table-layout: fixed;
}
.work-items-production .work-items-name-col {
    width: auto;
}
.work-items-production .work-items-name-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.work-items-production .work-items-name-cell input.form-control {
    min-width: 150px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Ячейки ч/ч, 1 ч, Стоим. — полное отображение чисел */
.work-items-production td.work-items-num-cell {
    overflow: visible;
    white-space: nowrap;
}
.work-items-production td.work-items-num-cell input.form-control {
    min-width: 4.5em;
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    text-overflow: clip;
}

/* Мобильная адаптация: горизонтальный скролл таблиц справочников */
@media (max-width: 768px) {
    .users-table-wrap.work-items-table-wrap,
    .users-table-wrap.production-extras-table-wrap {
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    .users-table-wrap.work-items-table-wrap .users-table {
        min-width: 680px;
    }
    .users-table-wrap.work-items-production .users-table {
        min-width: 720px;
        table-layout: auto;
    }
    .users-table-wrap.work-items-production .work-items-name-col {
        min-width: 140px;
    }
    .users-table-wrap.work-items-production .work-items-name-cell,
    .users-table-wrap.work-items-production .work-items-name-cell input.form-control {
        min-width: 140px;
        white-space: normal;
        word-break: break-word;
    }
    .users-table-wrap.production-extras-table-wrap .users-table {
        min-width: 520px;
    }
    .users-table-wrap.production-extras-table-wrap th:nth-child(2),
    .users-table-wrap.production-extras-table-wrap td:nth-child(2) {
        min-width: 160px;
        word-break: break-word;
    }
    .users-table-wrap.production-extras-table-wrap th:nth-child(3),
    .users-table-wrap.production-extras-table-wrap td:nth-child(3) {
        min-width: 110px;
    }
    .users-table-wrap.work-items-production .work-items-actions {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* Подсказка о горизонтальном скролле — только на мобильных */
.mobile-scroll-hint {
    display: none;
}
@media (max-width: 768px) {
    .mobile-scroll-hint {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: var(--color-text-muted);
    }
    .card-meta .mobile-scroll-hint {
        display: inline;
    }
}

/* ================================================================
   A11Y / UX AUDIT ADDITIONS (2026-03-23)
   ================================================================ */

/* Visually hidden — accessible to screen readers only */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Inline form validation */
.form-group.has-error .form-control {
    border-color: var(--color-danger);
}
.form-group.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.form-error-msg {
    display: none;
    font-size: var(--text-sm);
    color: var(--color-danger);
    margin-top: 0.25rem;
}
.form-group.has-error .form-error-msg {
    display: block;
}

/* Table scroll hint (fade edge on mobile) */
@media (max-width: 768px) {
    .users-table-wrap {
        position: relative;
    }
    .users-table-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, var(--color-surface));
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .users-table-wrap.has-scroll::after {
        opacity: 1;
    }
}

/* Display toggle view icons (replace numeric "2","3","4") */
.display-btn svg {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

/* Photo compress progress overlay */
.photo-compress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.photo-compress-progress {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-2);
    min-width: 240px;
}
.photo-compress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    margin-top: 0.75rem;
    overflow: hidden;
}
.photo-compress-bar-fill {
    height: 100%;
    background: var(--brand-green);
    border-radius: 3px;
    transition: width 0.15s ease;
    width: 0%;
}

/* Mobile nav: плавное раскрытие (max-height обязан сбрасываться в .nav-open — иначе меню остаётся с высотой 0) */
@media (max-width: 1024px) {
    .nav {
        transition: max-height 0.28s ease, opacity 0.2s ease;
        opacity: 0;
        max-height: 0;
    }
    .nav.nav-open {
        opacity: 1;
        max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0));
    }
}

/* ─── Global mobile compactness overrides ─── */
@media (max-width: 640px) {
    /* Reduce side gutters: more content width on small screens */
    .main {
        padding-top: 0.85rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Cards: less padding */
    .card {
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.75rem;
    }

    .card h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .card h3 {
        font-size: 0.95rem;
    }

    /* Page titles */
    h1 {
        font-size: 1.2rem;
        margin-bottom: 0.4rem;
    }

    /* Subtitles: smaller and less margin */
    .subtitle {
        font-size: 0.82rem;
        margin-bottom: 0.5rem;
    }

    /* Breadcrumbs: tighter */
    .breadcrumbs {
        padding: 0.3rem 0.75rem;
        font-size: 0.78rem;
    }

    /* Section titles (stage sections, etc.) */
    .flow-section-title {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }

    /* Stages section gap */
    .stages-section {
        gap: 0.6rem;
    }

    /* Flash messages */
    .flash-messages {
        padding: 0 0.75rem;
        margin-bottom: 0.5rem;
    }

    /* Page header */
    .page-header {
        margin-bottom: 0.75rem;
    }

    /* Reports title / section headings */
    .reports-title,
    .gallery-title {
        font-size: 0.82rem;
        margin-bottom: 0.3rem;
    }

    /* Stage reports section: tighten the separator spacing */
    .stage-reports,
    .stage-gallery {
        margin: 0.5rem 0 0;
        padding-top: 0.5rem;
    }

    /* Stage card header bottom gap */
    .stage-card-header {
        margin-bottom: 0.4rem;
    }

    /* Photo carousel: remove bottom gap and hide scrollbar */
    .stage-photo-carousel-tiles {
        padding: 0.3rem 0 0;
        gap: 0.4rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .stage-photo-carousel-tiles::-webkit-scrollbar {
        display: none;
    }

    .stage-photo-carousel-tiles-wrap {
        margin-bottom: 0;
    }

    /* Stage card overall padding */
    .stage-card {
        padding: 0.7rem 0.8rem;
    }
}

/* ─── Project list cards: name + button on same row, address below ─── */
@media (max-width: 760px) {
    /* Foreman/admin project tables: 2-column grid card */
    .admin-projects-table.mobile-card-table tr {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 0.6rem;
        align-items: center;
        padding: 0.6rem 0.75rem;
    }

    .admin-projects-table.mobile-card-table tr td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
        font-size: 0.92rem;
        padding: 0;
    }

    .admin-projects-table.mobile-card-table tr td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        font-size: 0.8rem;
        color: var(--color-text-muted);
        padding: 0.1rem 0 0;
    }

    .admin-projects-table.mobile-card-table tr td:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / 3;
        padding: 0;
        text-align: right !important;
    }

    /* Hide "ОБЪЕКТ:" and "АДРЕС:" labels — layout makes it obvious */
    .admin-projects-table.mobile-card-table td[data-label="Объект"]::before,
    .admin-projects-table.mobile-card-table td[data-label="Адрес"]::before,
    .admin-projects-table.mobile-card-table td[data-label="Название"]::before,
    .admin-projects-table.mobile-card-table td[data-label="Клиент"]::before {
        display: none;
    }

    /* Worker access tables: Работник + Действия on one row */
    .master-worker-access-table.mobile-card-table tr {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .master-worker-access-table.mobile-card-table td {
        padding: 0;
    }

    .master-worker-access-table.mobile-card-table td[data-label="Работник"] {
        flex: 1;
        font-weight: 600;
    }

    .master-worker-access-table.mobile-card-table td[data-label="Работник"]::before,
    .master-worker-access-table.mobile-card-table td[data-label="Действия"]::before {
        display: none;
    }
}

/* Stage inline meta (photos count next to close button) */
.stage-meta-inline {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    align-self: center;
}

/* Substage photos count inline in title row */
.substage-photos-inline {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: rgba(0,0,0,0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Substage card: compact mobile redesign ─── */
@media (max-width: 640px) {
    /* Fix substage-title-row: use grid to keep icon | name | badge in one row */
    .substage-title-row {
        display: grid !important;
        flex-direction: unset !important;
        align-items: center !important;
        grid-template-columns: auto 1fr auto;
        gap: 0.35rem 0.4rem;
    }

    .substage-toggle {
        grid-column: 1;
        line-height: 1;
    }

    .substage-name {
        grid-column: 2;
        min-width: 0;
        font-size: 0.9rem;
    }

    /* Badges inside substage-title-row: right-aligned pill, not stretched button */
    .substage-title-row .badge {
        grid-column: 3;
        width: auto !important;
        justify-content: flex-end !important;
        align-self: center;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 0.15rem 0.5rem;
        border-radius: 100px;
        white-space: nowrap;
    }

    /* badge-completed: green pill */
    .substage-title-row .badge-completed {
        background: rgba(22, 163, 74, 0.13);
        color: var(--color-success);
        border: 1px solid rgba(22, 163, 74, 0.25);
    }

    /* badge-pending: yellow pill */
    .substage-title-row .badge-pending {
        background: rgba(202, 138, 4, 0.13);
        color: var(--color-warning);
        border: 1px solid rgba(202, 138, 4, 0.25);
    }

    /* Foreman substage item: keep as horizontal flex, name left — button right */
    .foreman-substage-item {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6rem;
        padding: 0.55rem 0.75rem;
    }

    /* Foreman style scope: restore 2-column grid (not single column override at 480px) */
    .foreman-style-scope .foreman-substage-item {
        grid-template-columns: 1fr auto !important;
        gap: 0.5rem 0.75rem;
    }

    /* Substage actions: auto width, compact */
    .substage-actions {
        width: auto !important;
        flex-shrink: 0;
    }

    .substage-actions .close-substage-btn,
    .foreman-style-scope .substage-actions .close-substage-btn {
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Substage meta row (photos count) */
    .substage-meta-row {
        margin-top: 0.15rem;
        font-size: 0.78rem;
        color: var(--color-text-muted);
    }

    /* Substage list gap */
    .foreman-substages-list {
        gap: 0.4rem;
    }
}

/* ─── Stage card: compact mobile redesign ─── */
@media (max-width: 640px) {
    .stage-card {
        padding: 0.85rem 0.9rem;
        margin-bottom: 0.75rem;
    }

    /* CSS Grid: icon | name | status-badge
                  .   | dates (spans name+badge cols) */
    .stage-card-header {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: start;
        column-gap: 0.45rem;
        row-gap: 0.18rem;
        padding: 0.55rem 0.75rem;
        margin-bottom: 0.6rem;
        /* reset flex overrides */
        flex-direction: unset !important;
        flex-wrap: unset !important;
    }

    .stage-status-icon {
        grid-column: 1;
        grid-row: 1;
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 1px;
    }

    .stage-name {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        font-size: 0.94rem;
        line-height: 1.35;
        font-weight: 700;
        /* reset flex properties */
        flex: unset;
        width: auto;
    }

    /* Status label: top-right cell, override all mobile overrides */
    .stage-status-label {
        grid-column: 3;
        grid-row: 1;
        width: auto !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        justify-content: flex-end !important;
        align-self: center;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 0.15rem 0.55rem;
        border-radius: 100px;
        background: rgba(0, 0, 0, 0.06);
        line-height: 1.5;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .stage-done .stage-status-label {
        background: rgba(22, 163, 74, 0.13);
        color: var(--color-success);
    }

    .stage-pending .stage-status-label {
        background: rgba(202, 138, 4, 0.14);
        color: var(--color-warning);
    }

    .stage-pending-edit .stage-status-label {
        background: rgba(239, 68, 68, 0.12);
        color: var(--color-danger);
    }

    /* Dates: second row, spans under name and status columns */
    .stage-dates {
        grid-column: 2 / 4;
        grid-row: 2;
        font-size: 0.76rem;
        margin-top: 0;
        /* reset flex */
        flex: unset;
        width: auto;
        padding-left: 0;
    }

    /* Actions: horizontal row instead of stacked column */
    .stage-actions-row {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.1rem;
    }

    .stage-actions-row .btn,
    .stage-actions-row .btn-small {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }
}

/* ─── Stage actions row: badges match button height and style ─── */
.stage-actions-row .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height-sm);
    padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
    font-size: var(--typo-btn-sm);
    font-weight: 600;
    border-radius: var(--radius);
    line-height: 1;
    border: 1px solid transparent;
    box-sizing: border-box;
}

/* On mobile, match the same min-height as btn-small gets at 768px */
@media (max-width: 768px) {
    .stage-actions-row .badge {
        min-height: var(--form-compact-min-height);
        padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
    }
}

.stage-actions-row .badge-admin {
    background: rgba(22, 163, 74, 0.12);
    color: var(--color-success);
    border-color: rgba(22, 163, 74, 0.28);
}

.stage-actions-row .badge-warning {
    background: rgba(202, 138, 4, 0.1);
    color: var(--color-warning);
    border-color: rgba(202, 138, 4, 0.25);
}

.stage-actions-row .badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border-color: rgba(239, 68, 68, 0.22);
}

/* Print styles */
@media print {
    .header, footer, .mobile-impersonation-bar,
    .skip-link, .desktop-imp-dropdown, .mobile-imp-panel,
    .report-theme-toggle, .display-toggle-compact,
    .btn-logout {
        display: none !important;
    }
    body {
        font-size: 11pt;
        background: #fff;
        color: #000;
    }
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
    .content-wrapper {
        max-width: 100%;
        padding: 0;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #666;
    }
    a.nav-link::after, a.btn::after {
        content: none;
    }
}

/* ─── Мобильные карточки проектов (/a/projects) ─── */
.admin-project-cards-mobile {
    display: none;
}

@media (max-width: 768px) {
    .admin-projects-page .users-table-wrap {
        display: none;
    }

    .admin-project-cards-mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 0.5rem;
    }

    .apc-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
        overflow: hidden;
    }

    .apc-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 16px 14px;
    }

    .apc-photo {
        width: 72px;
        height: 72px;
        border-radius: 14px;
        flex-shrink: 0;
        overflow: hidden;
        background: linear-gradient(135deg, #8a7a6a, #b8a080);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .apc-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .apc-photo-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .apc-meta {
        flex: 1;
        min-width: 0;
    }

    .apc-title-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .apc-name {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--color-text);
        text-decoration: none;
        line-height: 1.2;
    }

    .apc-name:hover {
        text-decoration: underline;
    }

    .apc-type-badge {
        display: inline-block;
        background: rgba(59, 109, 17, 0.12);
        color: #3B6D11;
        font-size: 0.68rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 20px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .apc-address {
        margin: 0;
        font-size: 0.78rem;
        color: var(--color-text-muted);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
    }

    .apc-divider {
        height: 1px;
        background: var(--color-border);
        margin: 0 16px;
    }

    .apc-fields {
        padding: 12px 16px 14px;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .apc-field {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .apc-field-label {
        font-size: 0.73rem;
        color: var(--color-text-muted);
        width: 108px;
        flex-shrink: 0;
        padding-top: 1px;
        line-height: 1.3;
    }

    .apc-field-value {
        font-size: 0.82rem;
        color: var(--color-text);
        font-weight: 500;
        flex: 1;
        min-width: 0;
        line-height: 1.3;
    }

    .apc-actions {
        display: flex;
        gap: 8px;
        padding: 0 16px 16px;
    }

    .apc-delete-form {
        flex: 1;
        display: flex;
    }

    .apc-btn {
        flex: 1;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        border: none;
        font-family: inherit;
        transition: opacity 0.15s;
    }

    .apc-btn:active {
        opacity: 0.82;
    }

    .apc-btn-edit {
        background: #2D6A2D;
        color: #fff;
    }

    .apc-btn-delete {
        width: 100%;
        background: #fff5f3;
        border: 1px solid #e05a3a;
        color: #e05a3a;
    }

    .apc-actions-solo .apc-btn-edit {
        max-width: 60%;
        margin: 0 auto;
    }

    .apc-btn-primary-full {
        flex: 1;
        background: #2D6A2D;
        color: #fff;
    }

    .apc-btn-outline-action {
        flex: 1;
        background: transparent;
        border: 1.5px solid var(--color-border-strong, rgba(148,163,184,0.35));
        color: var(--color-text);
    }

    .apc-badge-sent {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        border-radius: 10px;
        background: rgba(245, 158, 11, 0.1);
        color: #b45309;
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center;
    }

    .apc-requests-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 0.5rem;
    }

    .apc-request-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 14px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 12px;
    }

    .apc-request-name {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text);
        flex: 1;
        min-width: 0;
    }

    .apc-request-meta {
        font-size: 0.72rem;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }
}

/* ── Auth Modal (session-expired login overlay) ─────────────────────────── */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.auth-modal-card {
    position: relative;
    background: var(--color-card, #fff);
    border-radius: 16px;
    padding: 2rem 1.75rem 1.75rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
    animation: auth-modal-in 0.22s ease;
}

@keyframes auth-modal-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.auth-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--color-text);
}

.auth-modal-subtitle {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

.auth-modal-form .form-group {
    margin-bottom: 0.85rem;
}

.auth-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.auth-modal-close:hover {
    background: var(--color-bg-hover, rgba(0,0,0,0.06));
    color: var(--color-text);
}

/* Roles XMind map: single clean role-flow page */
.roles-map-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.roles-map-header .subtitle {
    max-width: 760px;
}

.roles-map-shell {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border-radius: calc(var(--radius-lg) + 6px);
    background:
        radial-gradient(circle at 18% 14%, rgba(184, 122, 61, 0.22), transparent 32%),
        radial-gradient(circle at 78% 24%, rgba(47, 93, 58, 0.24), transparent 34%),
        linear-gradient(145deg, #182217 0%, #233826 48%, #171f18 100%);
    border: 1px solid rgba(234, 219, 196, 0.18);
    box-shadow: 0 26px 70px rgba(47, 93, 58, 0.24);
    color: #f8fafc;
}

.roles-map-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black, transparent 82%);
    pointer-events: none;
}

.roles-map-shell > * {
    position: relative;
    z-index: 1;
}

.roles-map-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.roles-map-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: #f5d6a8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.roles-map-hero h2 {
    margin: 0;
    color: #fffaf2;
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    line-height: 1.08;
}

.roles-map-hero p {
    max-width: 660px;
    margin: 0.5rem 0 0;
    color: rgba(255, 250, 242, 0.78);
}

.roles-map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 420px;
}

.roles-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.08);
    border: 1px solid rgba(255, 250, 242, 0.16);
    color: rgba(255, 250, 242, 0.86);
    font-size: 0.82rem;
    font-weight: 700;
}

.roles-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.roles-dot-create { background: #f59e0b; }
.roles-dot-transfer { background: #38bdf8; }
.roles-dot-report { background: #22c55e; }
.roles-dot-approve { background: #a78bfa; }

.roles-xmind {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(220px, 0.68fr) minmax(360px, 1.35fr);
    gap: 1rem;
    align-items: center;
}

.roles-xmind-lane,
.roles-xmind-center,
.roles-xmind-branches,
.roles-branch-line {
    min-width: 0;
}

.roles-xmind-lane,
.roles-branch-line {
    display: grid;
    gap: 0.65rem;
}

.roles-xmind-center {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
}

.roles-xmind-branches {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
}

.roles-branch {
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 250, 242, 0.055);
    border: 1px solid rgba(255, 250, 242, 0.12);
}

.roles-branch-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    color: #f8fafc;
    font-weight: 800;
}

.roles-branch-title a {
    color: #f5d6a8;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
}

.roles-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.9rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 250, 242, 0.94);
    border: 1px solid rgba(234, 219, 196, 0.70);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20);
    color: #2b2118;
}

.roles-node::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background: var(--roles-node-accent, var(--brand-gold));
}

.roles-node h3 {
    margin: 0;
    color: #1f2937;
    font-size: 1.02rem;
    line-height: 1.2;
}

.roles-node p {
    margin: 0;
    color: #5f4b39;
    font-size: 0.9rem;
    line-height: 1.46;
}

.roles-node-step {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    background: rgba(47, 93, 58, 0.10);
    color: #1e4a2d;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.roles-node-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.roles-node-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    background: rgba(47, 93, 58, 0.10);
    border: 1px solid rgba(47, 93, 58, 0.16);
    color: #1e4a2d;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
}

.roles-node-link:hover {
    background: rgba(47, 93, 58, 0.17);
    color: #173b24;
}

.roles-node-meta {
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(92, 61, 36, 0.22);
    color: #6f5a45;
    font-size: 0.82rem;
}

.roles-node-core {
    --roles-node-accent: #f59e0b;
    text-align: center;
    background: linear-gradient(180deg, #fffaf2, #f7ead7);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 22px 55px rgba(245, 158, 11, 0.18), 0 0 0 8px rgba(255, 250, 242, 0.08);
}

.roles-node-sales { --roles-node-accent: #22c55e; }
.roles-node-approval { --roles-node-accent: #10b981; }
.roles-node-td { --roles-node-accent: #b87a3d; }
.roles-node-chief { --roles-node-accent: #2f5d3a; }
.roles-node-master { --roles-node-accent: #16a34a; }
.roles-node-worker { --roles-node-accent: #0ea5e9; }
.roles-node-contractor { --roles-node-accent: #f97316; }
.roles-node-ds { --roles-node-accent: #8b5cf6; }
.roles-node-foreman { --roles-node-accent: #6366f1; }
.roles-node-client { --roles-node-accent: #0891b2; }
.roles-node-admin { --roles-node-accent: #64748b; }

.roles-core-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

.roles-core-types span {
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(184, 122, 61, 0.12);
    color: #6f3f1d;
    font-size: 0.76rem;
    font-weight: 800;
}

.roles-node-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.roles-flow-arrow {
    position: relative;
    min-height: 28px;
}

.roles-flow-arrow-down::before,
.roles-flow-arrow-in::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(245, 214, 168, 0.18), rgba(245, 214, 168, 0.92));
}

.roles-flow-arrow-down::after,
.roles-flow-arrow-in::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 2px solid rgba(245, 214, 168, 0.92);
    border-bottom: 2px solid rgba(245, 214, 168, 0.92);
}

.roles-flow-arrow-in {
    width: 100%;
    min-height: 34px;
}

.roles-map-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

@media (max-width: 1180px) {
    .roles-xmind {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .roles-xmind-center {
        order: -1;
    }

    .roles-flow-arrow-in {
        display: none;
    }
}

@media (max-width: 760px) {
    .roles-map-shell {
        padding: 0.85rem;
        border-radius: var(--radius-lg);
    }

    .roles-map-hero,
    .roles-branch-title {
        flex-direction: column;
        align-items: stretch;
    }

    .roles-map-legend {
        justify-content: flex-start;
        max-width: none;
    }

    .roles-node-grid,
    .roles-map-bottom {
        grid-template-columns: 1fr;
    }

    .roles-node-actions,
    .roles-core-types {
        display: grid;
        grid-template-columns: 1fr;
    }

    .roles-node-link {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════
   /a/roles — перестроенная страница: процесс + контуры + хаб ролей
   (презентация .pres-* не затрагивается)
   ════════════════════════════════════════════════════════════════════ */
.rmap-card,
.rmap-track,
.rolehub {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.rmap-card,
.rolehub {
    padding: 1.1rem 1.25rem 1.25rem;
}

.rmap-card-head { margin-bottom: 0.9rem; }

.rmap-card-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.rmap-card-head p {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

/* ── Pipeline процесса ─────────────────────────────────────────────── */
.rmap-pipeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
}

.rmap-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 0.85rem 0.9rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--rc, var(--color-accent));
    border-radius: var(--radius);
}

.rmap-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rc, var(--color-accent));
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.rmap-step-body h3 {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.rmap-step-body p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* ── Два контура ───────────────────────────────────────────────────── */
.rmap-tracks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.rmap-track {
    padding: 1rem 1.1rem 1.1rem;
    border-left: 4px solid var(--rc, var(--color-accent));
}

.rmap-track-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.rmap-track-tag {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text);
}

.rmap-track-prefix {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rc, var(--color-accent));
    text-decoration: none;
    background: color-mix(in srgb, var(--rc, var(--color-accent)) 14%, transparent);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.rmap-track-sub {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.rmap-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.rmap-chain-node {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.65rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.rmap-chain-node:not(:last-child)::after {
    content: "→";
    margin-left: 0.55rem;
    color: var(--color-text-soft);
    font-weight: 700;
}

.rmap-track-note {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-soft);
}

.rmap-track-note strong { color: var(--color-text-muted); }

/* ── Хаб ролей ─────────────────────────────────────────────────────── */
.rolehub-group { margin-top: 1.1rem; }
.rolehub-group:first-of-type { margin-top: 0.25rem; }

.rolehub-group-title {
    margin: 0 0 0.6rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.rolehub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 0.7rem;
}

.rolehub-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem 0.9rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rolehub-card:hover {
    border-color: var(--rc, var(--color-accent));
    box-shadow: var(--shadow-1);
}

.rolehub-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.rolehub-card-dot {
    width: 10px;
    height: 10px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--rc, var(--color-accent));
    flex-shrink: 0;
}

.rolehub-card-head h4 {
    margin: 0 0 0.15rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
}

.rolehub-card-head p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.rolehub-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
}

.rolehub-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rc, var(--color-accent));
    background: color-mix(in srgb, var(--rc, var(--color-accent)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rc, var(--color-accent)) 28%, transparent);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.rolehub-link:hover {
    background: color-mix(in srgb, var(--rc, var(--color-accent)) 22%, transparent);
}

/* Тёмная тема (style-5): подложки и текст */
body.theme-style-5 .rmap-card,
body.theme-style-5 .rmap-track,
body.theme-style-5 .rolehub {
    background: rgba(15, 23, 19, 0.55);
    border-color: rgba(255, 255, 255, 0.10);
}

body.theme-style-5 .rmap-step,
body.theme-style-5 .rmap-chain-node,
body.theme-style-5 .rolehub-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

body.theme-style-5 .rmap-card-head h2,
body.theme-style-5 .rmap-step-body h3,
body.theme-style-5 .rmap-track-tag,
body.theme-style-5 .rmap-chain-node,
body.theme-style-5 .rolehub-card-head h4 { color: #f1f5f9; }

body.theme-style-5 .rmap-card-head p,
body.theme-style-5 .rmap-step-body p,
body.theme-style-5 .rmap-track-sub,
body.theme-style-5 .rolehub-card-head p { color: #cbd5e1; }

/* ── Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .rmap-pipeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .rmap-tracks {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .rmap-pipeline {
        grid-template-columns: 1fr;
    }
    .rolehub-grid {
        grid-template-columns: 1fr;
    }
    .rmap-card,
    .rolehub {
        padding: 0.9rem 0.95rem 1rem;
    }
}

/* Pre-demo alignment layer: единая сетка действий на desktop/mobile */
.btn,
button.btn,
a.btn,
input.btn {
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.btn-row,
.page-header-actions,
.form-actions,
.card-actions,
.table-actions,
.actions-row,
.action-row,
.form-toolbar-actions,
.worker-row-actions,
.stage-confirm-actions,
.substage-form-actions,
.worker-qr-scan-actions,
.worker-day-confirm-actions,
.amocrm-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.btn-row > form,
.form-actions > form,
.card-actions > form,
.table-actions > form,
.actions-row > form,
.action-row > form,
.form-toolbar-actions > form,
.worker-row-actions > form,
.stage-confirm-actions > form,
.substage-form-actions > form,
.worker-qr-scan-actions > form,
.worker-day-confirm-actions > form {
    display: inline-flex;
    align-items: stretch;
    margin: 0;
}

.btn-row > .btn,
.btn-row > form > .btn,
.form-actions > .btn,
.form-actions > form > .btn,
.card-actions > .btn,
.card-actions > form > .btn,
.table-actions > .btn,
.table-actions > form > .btn,
.actions-row > .btn,
.actions-row > form > .btn,
.action-row > .btn,
.action-row > form > .btn,
.form-toolbar-actions > .btn,
.form-toolbar-actions > form > .btn,
.worker-row-actions > .btn,
.worker-row-actions > form > .btn,
.stage-confirm-actions > .btn,
.stage-confirm-actions > form > .btn,
.substage-form-actions > .btn,
.substage-form-actions > form > .btn,
.worker-qr-scan-actions > .btn,
.worker-qr-scan-actions > form > .btn,
.worker-day-confirm-actions > .btn,
.worker-day-confirm-actions > form > .btn {
    align-self: stretch;
}

.page-header-actions {
    align-items: center;
}

.page-header-actions > .btn,
.page-header-actions > form,
.page-header-actions > form > .btn {
    min-height: var(--form-compact-min-height);
}

.card-header-row,
.section-header-row,
.toolbar-row,
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-header-row > *,
.section-header-row > *,
.toolbar-row > *,
.filter-row > * {
    min-width: 0;
}

.card-header-row h1,
.card-header-row h2,
.section-header-row h1,
.section-header-row h2,
.toolbar-row h1,
.toolbar-row h2 {
    margin-bottom: 0;
}

.card .btn-row,
.card .form-actions,
.card .card-actions,
.card .action-row,
.card .actions-row {
    margin-top: 0.75rem;
}

@media (max-width: 768px) {
    :root {
        --content-gutter: 0.85rem;
    }

    .main {
        padding-top: 0.7rem;
        padding-bottom: 0.85rem;
    }

    body.compact-mode .card {
        padding: 0.8rem 0.85rem;
        margin-bottom: 0.7rem;
    }

    body.compact-mode .page-header {
        margin-bottom: 0.7rem;
    }

    .card h2,
    body.compact-mode .card h2 {
        margin-bottom: 0.55rem;
    }

    .page-header {
        align-items: stretch;
        gap: 0.5rem;
    }

    .page-header h1 {
        flex: 1 1 100%;
    }

    .page-header-actions {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
        align-items: stretch;
        gap: 0.4rem;
    }

    .page-header-actions > .btn,
    .page-header-actions > form,
    .page-header-actions > form > .btn {
        width: 100%;
    }

    .btn-row,
    .form-actions,
    .card-actions,
    .table-actions,
    .actions-row,
    .action-row,
    .form-toolbar-actions,
    .worker-row-actions,
    .stage-confirm-actions,
    .substage-form-actions,
    .worker-qr-scan-actions,
    .worker-day-confirm-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
        align-items: stretch;
        gap: 0.4rem;
    }

    .btn-row > form,
    .form-actions > form,
    .card-actions > form,
    .table-actions > form,
    .actions-row > form,
    .action-row > form,
    .form-toolbar-actions > form,
    .worker-row-actions > form,
    .stage-confirm-actions > form,
    .substage-form-actions > form,
    .worker-qr-scan-actions > form,
    .worker-day-confirm-actions > form,
    .btn-row > .btn,
    .form-actions > .btn,
    .card-actions > .btn,
    .table-actions > .btn,
    .actions-row > .btn,
    .action-row > .btn,
    .form-toolbar-actions > .btn,
    .worker-row-actions > .btn,
    .stage-confirm-actions > .btn,
    .substage-form-actions > .btn,
    .worker-qr-scan-actions > .btn,
    .worker-day-confirm-actions > .btn {
        width: 100%;
        min-width: 0;
    }

    .btn-row > form > .btn,
    .form-actions > form > .btn,
    .card-actions > form > .btn,
    .table-actions > form > .btn,
    .actions-row > form > .btn,
    .action-row > form > .btn,
    .form-toolbar-actions > form > .btn,
    .worker-row-actions > form > .btn,
    .stage-confirm-actions > form > .btn,
    .substage-form-actions > form > .btn,
    .worker-qr-scan-actions > form > .btn,
    .worker-day-confirm-actions > form > .btn {
        width: 100%;
    }

    .card-header-row,
    .section-header-row,
    .toolbar-row,
    .filter-row {
        align-items: stretch;
    }

    .card-header-row > .btn,
    .card-header-row > form,
    .section-header-row > .btn,
    .section-header-row > form,
    .toolbar-row > .btn,
    .toolbar-row > form,
    .filter-row > .btn,
    .filter-row > form {
        width: auto;
    }
}

@media (max-width: 480px) {
    .page-header-actions,
    .btn-row,
    .form-actions,
    .card-actions,
    .table-actions,
    .actions-row,
    .action-row,
    .form-toolbar-actions,
    .worker-row-actions,
    .stage-confirm-actions,
    .substage-form-actions,
    .worker-qr-scan-actions,
    .worker-day-confirm-actions {
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
        gap: 0.4rem;
    }

    .card,
    body.compact-mode .card {
        padding: 0.7rem 0.75rem;
        margin-bottom: 0.6rem;
        border-radius: var(--radius);
    }

    .btn,
    .btn-small,
    .btn-sm {
        white-space: normal;
    }
}

/* Очень узкие экраны: гарантированно вмещаем 2 короткие кнопки в ряд */
@media (max-width: 360px) {
    .page-header-actions,
    .btn-row,
    .form-actions,
    .card-actions,
    .table-actions,
    .actions-row,
    .action-row,
    .form-toolbar-actions,
    .worker-row-actions,
    .stage-confirm-actions,
    .substage-form-actions,
    .worker-qr-scan-actions,
    .worker-day-confirm-actions {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRESENTATION OVERLAY — /a/roles?present=1
   ═══════════════════════════════════════════════════════════════════════ */

/* Palette tokens for the presentation (warm theme) */
:root {
    --pres-bg:         #fdf6ed;
    --pres-surface:    rgba(139,90,43,0.07);
    --pres-surface-hi: rgba(139,90,43,0.13);
    --pres-border:     rgba(139,90,43,0.18);
    --pres-text:       #2b1a0e;
    --pres-muted:      rgba(43,26,14,0.52);
    --pres-green:      #2f5d3a;
    --pres-green-hi:   #3f7a49;
    --pres-gold:       #b87a3d;
    --pres-gold-hi:    #c8923d;
    --pres-radius:     1rem;
}

/* Lock body scroll while open */
body.pres-open { overflow: hidden; }

/* ── OVERLAY BASE ─────────────────────────────────────────────────────── */
.pres-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--pres-bg);
    color: var(--pres-text);
    font-family: 'Manrope', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Атрибут hidden должен реально скрывать оверлей: иначе display:flex выше
   перебивает встроенное правило [hidden]{display:none} и презентация
   висит поверх страницы с пустыми слайдами. */
.pres-overlay[hidden] {
    display: none !important;
}

/* ── HEADER ──────────────────────────────────────────────────────────── */
.pres-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--pres-border);
    background: rgba(253,246,237,0.92);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.pres-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--pres-text);
    opacity: 0.9;
}

.pres-brand svg { color: var(--pres-gold); }

.pres-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pres-dots {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.5rem;
}

.pres-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(139,90,43,0.25);
    border: none;
    cursor: pointer;
    transition: width 0.25s, background 0.25s;
    padding: 0;
}

.pres-dot.is-active {
    width: 24px;
    background: var(--pres-gold);
}

.pres-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0.5rem;
    border: 1px solid var(--pres-border);
    background: rgba(139,90,43,0.06);
    color: var(--pres-text);
    cursor: pointer;
    transition: background 0.15s;
}

.pres-icon-btn:hover { background: rgba(139,90,43,0.14); }

/* ── SLIDES WRAPPER ───────────────────────────────────────────────────── */
.pres-slides-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── SINGLE SLIDE ─────────────────────────────────────────────────────── */
.pres-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.pres-slide.pres-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Staggered entrance animations for children */
@keyframes pres-fade-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pres-slide.pres-in .pres-slide-head {
    animation: pres-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

.pres-slide.pres-in .pres-org,
.pres-slide.pres-in .pres-lifecycle,
.pres-slide.pres-in .pres-role-flow,
.pres-slide.pres-in .pres-tracks,
.pres-slide.pres-in .pres-roles-grid {
    animation: pres-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both;
}

.pres-slide-inner {
    width: 100%;
    max-width: 1160px;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.pres-slide-head {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.pres-slide-num {
    flex-shrink: 0;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pres-green-hi);
    opacity: 0.5;
    min-width: 2.5rem;
}

.pres-slide-head h2 {
    margin: 0 0 0.3rem;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--pres-text);
}

.pres-slide-head p {
    margin: 0;
    color: var(--pres-muted);
    font-size: 1rem;
}

/* ── SLIDE 1: HERO ────────────────────────────────────────────────────── */
.pres-slide-hero {
    position: relative;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #3a1f0d 0%, #6b3515 35%, #9b5a25 65%, #b87a3d 100%);
    color: #fdf4e3;
}

.pres-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pres-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.22;
}

.pres-hero-orb-1 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, #d4924e, transparent 70%);
    top: -140px; left: -120px;
    animation: pres-float 8s ease-in-out infinite;
}

.pres-hero-orb-2 {
    width: 440px; height: 440px;
    background: radial-gradient(circle, #7b4a2a, transparent 70%);
    bottom: -100px; right: -80px;
    animation: pres-float 10s ease-in-out infinite reverse;
}

.pres-hero-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #e8bc56, transparent 70%);
    top: 40%; left: 50%; transform: translate(-50%, -50%);
    animation: pres-float 12s ease-in-out infinite 2s;
}

@keyframes pres-float {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(20px, -20px); }
}

.pres-hero-orb-3 { animation-name: pres-float3; }
@keyframes pres-float3 {
    0%, 100% { transform: translate(-50%, -50%); }
    50%       { transform: translate(calc(-50% + 15px), calc(-50% - 15px)); }
}

.pres-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.pres-hero-eyebrow {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f5d898;
    background: rgba(232,188,86,0.15);
    border: 1px solid rgba(232,188,86,0.30);
    padding: 0.35rem 1rem;
    border-radius: 999px;
}

.pres-hero-title {
    margin: 0;
    font-size: clamp(3rem, 9vw, 7.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #fdf4e3;
}

.pres-hero-title span {
    display: block;
    background: linear-gradient(135deg, #f5d898 0%, #e8bc56 50%, #c49a3d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pres-hero-sub {
    max-width: 620px;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: rgba(253,244,227,0.72);
    line-height: 1.65;
    margin: 0;
}

.pres-hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(253,244,227,0.10);
    border: 1px solid rgba(253,244,227,0.20);
    border-radius: 1.25rem;
    padding: 1.25rem 2rem;
}

.pres-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0 2rem;
}

.pres-stat-div {
    width: 1px;
    height: 2.5rem;
    background: rgba(253,244,227,0.20);
}

.pres-stat-value {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    color: #fdf4e3;
}

.pres-stat-label {
    font-size: 0.78rem;
    color: rgba(253,244,227,0.65);
    text-align: center;
    max-width: 120px;
}

.pres-hero-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.pres-hero-types span {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(253,244,227,0.10);
    border: 1px solid rgba(253,244,227,0.20);
    font-size: 0.85rem;
    color: rgba(253,244,227,0.75);
}

.pres-slide-hint {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: rgba(253,244,227,0.45);
    letter-spacing: 0.06em;
}

/* ── SLIDE 2: ORG CHART ───────────────────────────────────────────────── */
.pres-slide-org { justify-content: flex-start; }

.pres-org {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.pres-org-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.pres-org-row-sm {
    gap: 0.75rem;
}

.pres-org-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 0.65rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--pres-border);
    background: var(--pres-surface);
    min-width: 140px;
    text-decoration: none;
    color: var(--pres-text);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(139,90,43,0.02);
}

.pres-org-node:hover {
    background: var(--pres-surface-hi);
    border-color: var(--pres-gold);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 20px rgba(139,90,43,0.12);
}

.pres-org-role {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pres-text);
}

.pres-org-desc {
    font-size: 0.7rem;
    color: var(--pres-muted);
    line-height: 1.3;
}

/* Color accents per role */
.pres-org-admin  { border-color: rgba(100,76,54,0.40); }
.pres-org-rop    { border-color: rgba(47,93,58,0.50);  }
.pres-org-mo     { border-color: rgba(63,122,73,0.45); }
.pres-org-mk     { border-color: rgba(63,122,73,0.35); }
.pres-org-td     { border-color: rgba(184,122,61,0.55);}
.pres-org-pc     { border-color: rgba(47,93,58,0.55);  }
.pres-org-ds     { border-color: rgba(139,90,43,0.45); }
.pres-org-master { border-color: rgba(63,122,73,0.45); }
.pres-org-ct     { border-color: rgba(200,146,61,0.50);}
.pres-org-worker { border-color: rgba(139,90,43,0.40); }
.pres-org-foreman{ border-color: rgba(107,53,21,0.40); }
.pres-org-client { border-color: rgba(184,122,61,0.55); background: rgba(184,122,61,0.07); }

.pres-org-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    width: 100%;
}

.pres-org-connector span {
    display: block;
    width: 1px;
    height: 100%;
    background: var(--pres-border);
}

.pres-org-vline {
    width: 1px;
    height: 0.9rem;
    background: var(--pres-border);
    margin: 0 auto;
}

.pres-org-split {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 1rem;
    width: 100%;
    margin-top: 0;
}

.pres-org-split-div {
    background: var(--pres-border);
    align-self: stretch;
    margin: 0.5rem 0;
}

.pres-org-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0.5rem 0;
}

.pres-org-branch-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pres-muted);
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--pres-surface);
    border: 1px solid var(--pres-border);
}

.pres-org-branch-prod .pres-org-branch-label  { color: var(--pres-green);  border-color: rgba(47,93,58,0.35); }
.pres-org-branch-const .pres-org-branch-label { color: var(--pres-gold);   border-color: rgba(184,122,61,0.35); }

.pres-org-client-final {
    margin-top: 0;
    min-width: 220px;
    background: rgba(184,122,61,0.08);
}

/* ── SLIDE 3: LIFECYCLE ───────────────────────────────────────────────── */
.pres-lifecycle {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.pres-lc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    min-width: 140px;
    flex: 1;
    padding: 1.25rem 0.75rem;
    background: var(--pres-surface);
    border: 1px solid var(--pres-border);
    border-radius: var(--pres-radius);
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pres-lc-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(139,90,43,0.1);
    border-color: var(--pres-gold);
}

.pres-lc-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.pres-lc-mo     { background: rgba(47,93,58,0.12);   color: #2f5d3a; border: 2px solid rgba(47,93,58,0.30); }
.pres-lc-rop    { background: rgba(63,122,73,0.12);  color: #3f7a49; border: 2px solid rgba(63,122,73,0.30); }
.pres-lc-td     { background: rgba(184,122,61,0.15); color: #9b5a25; border: 2px solid rgba(184,122,61,0.35);}
.pres-lc-pc     { background: rgba(107,53,21,0.12);  color: #7b4a2a; border: 2px solid rgba(107,53,21,0.30); }
.pres-lc-check  { background: rgba(200,146,61,0.15); color: #9b5a25; border: 2px solid rgba(200,146,61,0.35);}
.pres-lc-client { background: rgba(184,122,61,0.15); color: #7b4a2a; border: 2px solid rgba(184,122,61,0.35);}

.pres-lc-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pres-lc-body strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pres-text);
}

.pres-lc-body span {
    font-size: 0.75rem;
    color: var(--pres-muted);
    line-height: 1.45;
}

.pres-lc-num {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--pres-muted);
    opacity: 0.4;
}

.pres-lc-step-final { border-color: rgba(184,122,61,0.40); background: rgba(184,122,61,0.07); }

.pres-lc-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pres-muted);
    padding: 0 0.2rem;
    opacity: 0.5;
}

/* ── SLIDE 4: ROLE FLOW ───────────────────────────────────────────────── */
.pres-slide-flow { justify-content: flex-start; }
.pres-slide-flow-inner { gap: 1.2rem; }

.pres-role-flow {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
}

.pres-flow-main,
.pres-flow-branches,
.pres-flow-row {
    display: grid;
    gap: 0.75rem;
}

.pres-flow-main {
    grid-template-columns: 1fr auto 1fr auto 1.15fr;
    align-items: stretch;
}

.pres-flow-branches {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
}

.pres-flow-node {
    min-width: 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--pres-border);
    border-radius: 0.85rem;
    background: rgba(255,255,255,0.48);
    box-shadow: 0 8px 20px rgba(139,90,43,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.pres-flow-node strong {
    color: var(--pres-text);
    font-size: 0.92rem;
    line-height: 1.2;
}

.pres-flow-node span {
    color: var(--pres-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.pres-flow-node-lead     { border-color: rgba(139,90,43,0.28); }
.pres-flow-node-sales    { border-color: rgba(184,122,61,0.35); }
.pres-flow-node-approve  { border-color: rgba(47,93,58,0.35); }
.pres-flow-node-client {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    border-color: rgba(47,93,58,0.45);
    background: rgba(47,93,58,0.10);
}

.pres-flow-arrow,
.pres-flow-down,
.pres-flow-arrow-wide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pres-muted);
    font-weight: 800;
    opacity: 0.55;
}

.pres-flow-arrow { min-width: 1.4rem; }
.pres-flow-down { line-height: 1; padding: 0.05rem 0; }
.pres-flow-arrow-wide { margin-top: -0.1rem; }

.pres-flow-split-label {
    align-self: center;
    padding: 0.35rem 0.85rem;
    border: 1px dashed var(--pres-border);
    border-radius: 999px;
    color: var(--pres-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    background: rgba(255,255,255,0.3);
}

.pres-flow-branch {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--pres-radius);
    border: 1px solid var(--pres-border);
    background: var(--pres-surface);
}

.pres-flow-branch-prod  { border-color: rgba(47,93,58,0.35); }
.pres-flow-branch-const { border-color: rgba(184,122,61,0.35); }

.pres-flow-branch-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--pres-border);
}

.pres-flow-branch-head span {
    color: var(--pres-text);
    font-size: 0.98rem;
    font-weight: 800;
}

.pres-flow-branch-head small {
    color: var(--pres-muted);
    font-size: 0.72rem;
    text-align: right;
}

.pres-flow-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pres-flow-row {
    grid-template-columns: 1fr 1fr;
}

.pres-flow-note {
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(184,122,61,0.24);
    background: rgba(184,122,61,0.08);
    color: var(--pres-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.pres-flow-client {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* ── SLIDE 5: TWO TRACKS ─────────────────────────────────────────────── */
.pres-tracks {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    width: 100%;
    align-items: start;
}

.pres-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--pres-radius);
    border: 1px solid var(--pres-border);
    background: var(--pres-surface);
}

.pres-track-prod  { border-color: rgba(47,93,58,0.35); }
.pres-track-const { border-color: rgba(184,122,61,0.35); }

.pres-track-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pres-track-badge {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    align-self: flex-start;
}

.pres-track-prod  .pres-track-badge { background: rgba(47,93,58,0.15);  color: var(--pres-green);  }
.pres-track-const .pres-track-badge { background: rgba(184,122,61,0.15); color: var(--pres-gold); }

.pres-track-urls {
    font-size: 0.72rem;
    color: var(--pres-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.pres-track-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pres-track-types span {
    font-size: 0.78rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--pres-border);
    color: var(--pres-muted);
}

.pres-track-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.pres-track-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0.65rem 1.25rem;
    border-radius: 0.65rem;
    border: 1px solid var(--pres-border);
    background: var(--pres-surface);
    width: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(139,90,43,0.02);
}

.pres-track-node:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 15px rgba(139,90,43,0.1);
    border-color: var(--pres-gold);
    background: var(--pres-surface-hi);
}

.pres-track-node span { font-size: 0.85rem; font-weight: 700; color: var(--pres-text); }
.pres-track-node small { font-size: 0.72rem; color: var(--pres-muted); }

.pres-tn-td     { border-color: rgba(184,122,61,0.45); }
.pres-tn-pc     { border-color: rgba(47,93,58,0.45);  }
.pres-tn-master { border-color: rgba(63,122,73,0.40); }
.pres-tn-ct     { border-color: rgba(200,146,61,0.40);}
.pres-tn-worker { border-color: rgba(139,90,43,0.35); }
.pres-tn-ds     { border-color: rgba(184,122,61,0.45);}
.pres-tn-foreman{ border-color: rgba(107,53,21,0.40); }

.pres-track-arrow-v {
    font-size: 1rem;
    color: var(--pres-muted);
    opacity: 0.4;
    line-height: 1;
    padding: 0.1rem 0;
}

.pres-track-row-sm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

.pres-track-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--pres-muted);
    padding: 0.75rem;
    background: rgba(184,122,61,0.07);
    border: 1px solid rgba(184,122,61,0.22);
    border-radius: 0.65rem;
    width: 100%;
    line-height: 1.45;
}

.pres-track-note svg { flex-shrink: 0; margin-top: 2px; color: var(--pres-gold); }

.pres-tracks-sep {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 1.5rem;
    align-self: center;
}

.pres-tracks-sep-line {
    width: 1px;
    height: 60px;
    background: var(--pres-border);
}

.pres-tracks-sep-label {
    font-size: 0.72rem;
    color: var(--pres-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.pres-tracks-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.pres-tracks-footer-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--pres-muted);
    padding: 0.85rem 1rem;
    background: var(--pres-surface);
    border: 1px solid var(--pres-border);
    border-radius: 0.75rem;
    line-height: 1.45;
}

.pres-tracks-footer-item svg { flex-shrink: 0; margin-top: 2px; color: var(--pres-gold); }

/* ── SLIDE 6: ALL ROLES ───────────────────────────────────────────────── */
.pres-slide-roles { justify-content: flex-start; }
.pres-slide-roles-inner { gap: 1.25rem; }

.pres-roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
}

.pres-role-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--pres-border);
    background: var(--pres-surface);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.pres-role-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.4) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pres-role-card:hover {
    background: var(--pres-surface-hi);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(139,90,43,0.15);
    border-color: var(--pres-gold);
}

.pres-role-card:hover::after {
    opacity: 1;
}

.pres-rc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pres-rc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.pres-rc-url {
    font-size: 0.65rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--pres-muted);
    opacity: 0.7;
}

.pres-rc-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pres-text);
    line-height: 1.2;
}

.pres-rc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pres-rc-list li {
    font-size: 0.72rem;
    color: var(--pres-muted);
    padding-left: 0.8rem;
    position: relative;
    line-height: 1.35;
}

.pres-rc-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--pres-muted);
    opacity: 0.5;
}

/* Role-specific dot colors (warm palette) */
.pres-rc-admin  .pres-rc-dot { background: #8c6a4a; }
.pres-rc-rop    .pres-rc-dot { background: #3f7a49; }
.pres-rc-mo     .pres-rc-dot { background: #2f5d3a; }
.pres-rc-mk     .pres-rc-dot { background: #5a9466; }
.pres-rc-td     .pres-rc-dot { background: #b87a3d; }
.pres-rc-pc     .pres-rc-dot { background: #4a7a37; }
.pres-rc-ds     .pres-rc-dot { background: #9b5a25; }
.pres-rc-f      .pres-rc-dot { background: #7b4a2a; }
.pres-rc-m      .pres-rc-dot { background: #4a9445; }
.pres-rc-w      .pres-rc-dot { background: #6b8a3a; }
.pres-rc-ct     .pres-rc-dot { background: #c8923d; }
.pres-rc-client .pres-rc-dot { background: #b87a3d; }

/* Role card border accents (warm palette) */
.pres-rc-admin  { border-color: rgba(140,106,74,0.35); }
.pres-rc-rop    { border-color: rgba(63,122,73,0.40);  }
.pres-rc-mo     { border-color: rgba(47,93,58,0.40);   }
.pres-rc-mk     { border-color: rgba(90,148,102,0.35); }
.pres-rc-td     { border-color: rgba(184,122,61,0.45); }
.pres-rc-pc     { border-color: rgba(74,122,55,0.40);  }
.pres-rc-ds     { border-color: rgba(155,90,37,0.40);  }
.pres-rc-f      { border-color: rgba(123,74,42,0.40);  }
.pres-rc-m      { border-color: rgba(74,148,69,0.38);  }
.pres-rc-w      { border-color: rgba(107,138,58,0.38); }
.pres-rc-ct     { border-color: rgba(200,146,61,0.42); }
.pres-rc-client { border-color: rgba(184,122,61,0.50); background: rgba(184,122,61,0.06); }

/* ── NAVIGATION ARROWS ────────────────────────────────────────────────── */
.pres-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--pres-border);
    background: rgba(253,246,237,0.85);
    color: var(--pres-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(139,90,43,0.12);
}

.pres-nav-btn:hover { background: rgba(253,246,237,0.98); }
.pres-nav-btn:disabled { opacity: 0.2; pointer-events: none; }
.pres-prev { left: 1rem; }
.pres-next { right: 1rem; }

/* ── PROGRESS BAR ─────────────────────────────────────────────────────── */
.pres-progress-bar-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255,255,255,0.07);
    z-index: 20;
}

.pres-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pres-gold), var(--pres-gold-hi));
    transition: width 0.4s ease;
    width: 20%;
}

/* ── OPEN BUTTON ON MAIN PAGE ─────────────────────────────────────────── */
.pres-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pres-roles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .pres-lifecycle {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .pres-lc-arrow { display: none; }
    .pres-lc-step { min-width: calc(33% - 0.35rem); flex: none; }
    .pres-flow-main,
    .pres-flow-branches {
        grid-template-columns: 1fr;
    }
    .pres-flow-arrow {
        min-width: 0;
        transform: rotate(90deg);
    }
    .pres-tracks {
        grid-template-columns: 1fr;
    }
    .pres-tracks-sep {
        flex-direction: row;
        padding: 0.75rem 0;
    }
    .pres-tracks-sep-line { width: 60px; height: 1px; }
    .pres-tracks-footer {
        grid-template-columns: 1fr;
    }
    .pres-org-split {
        grid-template-columns: 1fr;
    }
    .pres-org-split-div { display: none; }
    .pres-hero-stats { padding: 1rem 1.25rem; }
    .pres-stat { padding: 0 1.25rem; }
}

@media (max-width: 768px) {
    .pres-slide { padding: 1rem 0.75rem; }
    .pres-slide-head { flex-direction: column; gap: 0.5rem; }
    .pres-slide-num { font-size: 1.5rem; }
    .pres-slide-head h2 { font-size: 1.35rem; }
    .pres-roles-grid { grid-template-columns: repeat(2, 1fr); }
    .pres-hero-stats { flex-direction: column; gap: 1rem; }
    .pres-stat-div { width: 60px; height: 1px; }
    .pres-lc-step { min-width: calc(50% - 0.25rem); }
    .pres-flow-row {
        grid-template-columns: 1fr;
    }
    .pres-flow-branch-head {
        flex-direction: column;
        gap: 0.25rem;
    }
    .pres-flow-branch-head small {
        text-align: left;
    }
    .pres-org-top { flex-direction: column; }
    .pres-org-split { gap: 0.75rem; }
    .pres-nav-btn { width: 36px; height: 36px; }
    .pres-prev { left: 0.4rem; }
    .pres-next { right: 0.4rem; }
}

@media (max-width: 480px) {
    .pres-hero-title { font-size: clamp(2.5rem, 12vw, 4rem); }
    .pres-roles-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .pres-rc-name { font-size: 0.78rem; }
    .pres-lc-step { min-width: 100%; }
    .pres-header { padding: 0.5rem 0.75rem; }
    .pres-brand span { display: none; }
}

/* Таблица «Назначенные подрядчики»: плотный вид, помещается на телефон без бокового скролла */
.assignments-table .cell-dt-short { display: none; }
.assignments-table .assign-actions { white-space: nowrap; }
.assignments-table .assign-actions .btn { margin-left: 0.3rem; }
.assignments-table .assign-actions .btn:first-child,
.assignments-table .assign-actions form:first-child .btn { margin-left: 0; }
.assignments-table .assign-actions form { display: inline; }

@media (max-width: 600px) {
    /* На телефоне 4 колонки не вмещают полные названия — показываем каждое
       назначение компактной карточкой: видно ВСЁ (подрядчик, проект, дата, кнопки). */
    .assignments-table,
    .assignments-table tbody {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }
    .assignments-table thead { display: none; }
    .assignments-table tbody {
        display: grid;
        gap: 0.4rem;
    }
    .assignments-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "worker  date"
            "project project"
            "actions actions";
        column-gap: 0.5rem;
        row-gap: 0.1rem;
        align-items: start;
        padding: 0.5rem 0.65rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
    }
    .assignments-table--with-owner tr {
        grid-template-areas:
            "worker  date"
            "project project"
            "owner owner"
            "actions actions";
    }
    .assignments-table td {
        display: block;
        padding: 0;
        border: none;
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .assignments-table .assign-worker {
        grid-area: worker;
        font-weight: 600;
        font-size: 0.92rem;
        overflow-wrap: anywhere;
    }
    .assignments-table .assign-date {
        grid-area: date;
        text-align: right;
        font-size: 0.72rem;
        color: var(--color-text-muted);
        white-space: nowrap;
    }
    .assignments-table .assign-project {
        grid-area: project;
        font-size: 0.82rem;
        color: var(--color-text-muted);
        overflow-wrap: anywhere;
    }
    .assignments-table .assign-owner {
        grid-area: owner;
        font-size: 0.76rem;
        color: var(--color-text-muted);
        overflow-wrap: anywhere;
    }
    .assignments-table .assign-owner::before {
        content: "Назначил: ";
        font-weight: 700;
    }
    /* в дате на телефоне — только число */
    .assignments-table .cell-dt-full { display: none; }
    .assignments-table .cell-dt-short { display: inline; }
    /* кнопки во всю ширину строки, удобные для тапа */
    .assignments-table .assign-actions {
        grid-area: actions;
        display: flex;
        gap: 0.4rem;
        margin-top: 0.4rem;
        white-space: normal;
    }
    .assignments-table .assign-actions form {
        display: flex;
        flex: 1;
        margin: 0;
    }
    .assignments-table .assign-actions > .btn,
    .assignments-table .assign-actions form .btn {
        flex: 1;
        margin: 0;
        justify-content: center;
        padding: 0.4rem 0.5rem;
        font-size: 0.82rem;
    }
}