/* ZeroStack Portal - Main Stylesheet */
/* Объединенный файл стилей для оптимизации производительности */

/* ============================================
   CSS Variables - Dark Theme (Default)
   ============================================ */
:root {
    /* Base colors - Dark theme */
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    
    /* Text colors - improved contrast for WCAG AA compliance */
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    --color-text-muted: #94a3b8; /* slate-400 instead of slate-500 for better contrast */
    
    /* Accent — единая sky-шкала для light и dark */
    --color-accent: #0284c7;
    --color-accent-hover: #0369a1;
    --color-accent-dark: #075985;
    
    /* Status colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;
    
    /* Border colors */
    --color-border: #334155;
    --color-border-light: #475569;

    /* Surfaces / elevation (dark) */
    --color-surface: #1e293b;
    --color-surface-hover: #334155;
    --color-surface-active: #475569;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.35);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Цвета категорий уведомлений (toast) */
    --notification-cat-support: #38bdf8;
    --notification-cat-projects: #818cf8;
    --notification-cat-metrology: #fbbf24;
    --notification-cat-shift-log: #2dd4bf;
    --notification-cat-maintenance: #fb923c;
    --notification-cat-news: #34d399;
}

/* ============================================
   CSS Variables - Light Theme
   ============================================ */
[data-theme="light"] {
    /* Base colors - Light theme (modern, soft, professional palette) */
    /* Using warm off-white backgrounds for better eye comfort */
    --color-bg-primary: #fafbfc; /* Soft off-white with slight blue tint */
    --color-bg-secondary: #ffffff; /* Pure white for cards and elevated surfaces */
    --color-bg-tertiary: #f8f9fa; /* Very light gray for subtle backgrounds */
    
    /* Text colors - optimized contrast hierarchy for readability */
    --color-text-primary: #1a202c; /* Near-black for primary text (better than pure black) */
    --color-text-secondary: #4a5568; /* Medium gray for secondary text */
    --color-text-tertiary: #718096; /* Lighter gray for tertiary text */
    --color-text-muted: #a0aec0; /* Muted gray for disabled/placeholder text */
    
    /* Accent — та же sky-шкала, что и в dark */
    --color-accent: #0284c7;
    --color-accent-hover: #0369a1;
    --color-accent-dark: #075985;
    
    /* Status colors - optimized for light theme with better visibility */
    --color-success: #10b981; /* Emerald-500 - fresh and positive */
    --color-warning: #f59e0b; /* Amber-500 - attention-grabbing but not harsh */
    --color-error: #ef4444; /* Red-500 - clear and urgent */
    --color-info: #3b82f6; /* Blue-500 - informative and trustworthy */
    
    /* Border colors - subtle and refined */
    --color-border: #e5e7eb; /* Light gray-200 for main borders */
    --color-border-light: #f3f4f6; /* Very light gray-100 for subtle separators */
    
    /* Additional semantic colors for better UX */
    --color-surface: #ffffff; /* Surface color for cards, modals */
    --color-surface-hover: #f9fafb; /* Hover state for interactive surfaces */
    --color-surface-active: #f3f4f6; /* Active state for pressed surfaces */
    
    /* Shadow colors for depth (light theme) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Категории уведомлений — насыщеннее на светлой теме */
    --notification-cat-support: #0284c7;
    --notification-cat-projects: #4f46e5;
    --notification-cat-metrology: #d97706;
    --notification-cat-shift-log: #0d9488;
    --notification-cat-maintenance: #ea580c;
    --notification-cat-news: #059669;
}

/* ============================================
   Base Styles
   ============================================ */
/* Ограничение ширины: без горизонтальной прокрутки на планшетах и телефонах */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-base), color var(--transition-base);
    overflow-x: hidden;
    max-width: 100%;
}

/* Нативные контролы следуют теме портала */
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

/*
 * Поля ввода с учётом темы и автозаполнения браузера.
 * Chrome после autofill перекрашивает background — перекрываем inset box-shadow
 * через CSS-переменные темы (без !important).
 */
.theme-input {
    --theme-input-bg: #f9fafb;
    --theme-input-fg: #0f172a;
    --theme-input-border: #d1d5db;
    background-color: var(--theme-input-bg);
    color: var(--theme-input-fg);
    border-color: var(--theme-input-border);
    caret-color: var(--theme-input-fg);
}

html[data-theme="dark"] .theme-input,
html.dark .theme-input {
    --theme-input-bg: #0f172a;
    --theme-input-fg: #f8fafc;
    --theme-input-border: #475569;
}

.theme-input::placeholder {
    color: color-mix(in srgb, var(--theme-input-fg) 45%, transparent);
}

.theme-input:focus {
    border-color: var(--color-accent);
    outline: none;
}

.theme-input:-webkit-autofill,
.theme-input:-webkit-autofill:hover,
.theme-input:-webkit-autofill:focus,
.theme-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--theme-input-fg);
    caret-color: var(--theme-input-fg);
    /* Фон автозаполнения перекрывается тенью цвета поля */
    box-shadow: 0 0 0 1000px var(--theme-input-bg) inset;
    /* Откладываем смену background от UA autofill */
    transition: background-color 99999s ease-out;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

/* Links */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-accent-hover);
}

/* Focus states */
*:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   Component Styles
   ============================================ */
/* Sidebar — атмосфера как у landing hero, без «плоской» админ-панели */
.sidebar,
#sidebar.sidebar {
    --sidebar-link-hover: color-mix(in srgb, #e2e8f0 7%, transparent);
    --sidebar-link-active: color-mix(in srgb, var(--color-accent) 16%, transparent);
    --sidebar-border: color-mix(in srgb, #94a3b8 16%, transparent);
    --sidebar-icon: var(--color-text-tertiary);
    background:
        radial-gradient(
            ellipse 95% 50% at 0% 6%,
            color-mix(in srgb, var(--color-accent) 16%, transparent),
            transparent 58%
        ),
        radial-gradient(
            ellipse 70% 35% at 110% 92%,
            color-mix(in srgb, #0ea5e9 10%, transparent),
            transparent 55%
        ),
        linear-gradient(180deg, #0b1220 0%, #152338 44%, #0f172a 100%);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: inset -1px 0 0 color-mix(in srgb, #38bdf8 10%, transparent);
}

[data-theme="light"] .sidebar,
[data-theme="light"] #sidebar.sidebar {
    --sidebar-link-hover: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
    --sidebar-link-active: color-mix(in srgb, var(--color-accent) 12%, #ffffff);
    --sidebar-border: color-mix(in srgb, #94a3b8 28%, transparent);
    background:
        radial-gradient(
            ellipse 90% 48% at 0% 0%,
            color-mix(in srgb, var(--color-accent) 12%, transparent),
            transparent 58%
        ),
        linear-gradient(180deg, #f7fafc 0%, #eef4fa 48%, #e8eef5 100%);
    box-shadow: var(--shadow-sm);
}

#sidebar .sidebar-module-row.is-active {
    background-color: transparent;
}

#sidebar a.sidebar-nav-link,
#sidebar button.sidebar-nav-link {
    border-radius: 0.65rem;
    color: var(--color-text-secondary);
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base);
}

#sidebar a.sidebar-nav-link i,
#sidebar button.sidebar-nav-link i {
    color: var(--sidebar-icon);
}

#sidebar a.sidebar-nav-link:hover,
#sidebar button.sidebar-nav-link:hover,
#sidebar form:has(.sidebar-nav-link):hover {
    background-color: var(--sidebar-link-hover);
}

#sidebar a.sidebar-nav-link.is-active {
    background-color: var(--sidebar-link-active);
    box-shadow: inset 2px 0 0 var(--color-accent);
    color: #e0f2fe;
}

[data-theme="light"] #sidebar a.sidebar-nav-link.is-active {
    color: var(--color-accent-dark);
}

#sidebar a.sidebar-nav-link.is-active:not([data-sidebar-module]) {
    --sidebar-icon: var(--color-accent);
}

/* Цвета иконок через --sidebar-icon на пункте меню */
#sidebar .sidebar-nav-link[data-sidebar-module="dashboard"] { --sidebar-icon: #38bdf8; }
#sidebar .sidebar-nav-link[data-sidebar-module="org_settings"] { --sidebar-icon: #67e8f9; }
#sidebar .sidebar-nav-link[data-sidebar-module="staff"] { --sidebar-icon: #fb7185; }
#sidebar .sidebar-nav-link[data-sidebar-module="support"] { --sidebar-icon: var(--notification-cat-support); }
#sidebar .sidebar-nav-link[data-sidebar-module="projects"] { --sidebar-icon: var(--notification-cat-projects); }
#sidebar .sidebar-nav-link[data-sidebar-module="metrology"] { --sidebar-icon: var(--notification-cat-metrology); }
#sidebar .sidebar-nav-link[data-sidebar-module="shift_log"] { --sidebar-icon: var(--notification-cat-shift-log); }
#sidebar .sidebar-nav-link[data-sidebar-module="maintenance"] { --sidebar-icon: var(--notification-cat-maintenance); }
#sidebar .sidebar-nav-link[data-sidebar-module="news"] { --sidebar-icon: var(--notification-cat-news); }
#sidebar .sidebar-nav-link[data-sidebar-module="diary"] { --sidebar-icon: #38bdf8; }
#sidebar .sidebar-nav-link[data-sidebar-module="downtime"] { --sidebar-icon: #f87171; }
#sidebar .sidebar-nav-link[data-sidebar-module="office_floor"] { --sidebar-icon: #c084fc; }
#sidebar .sidebar-nav-link[data-sidebar-module="notifications"] { --sidebar-icon: #60a5fa; }
#sidebar .sidebar-nav-link[data-sidebar-module="profile"] { --sidebar-icon: #7dd3fc; }
#sidebar .sidebar-nav-link[data-sidebar-module="copy-link"] { --sidebar-icon: #34d399; }
#sidebar .sidebar-nav-link[data-sidebar-module="logout"] { --sidebar-icon: #f87171; }

[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="dashboard"] { --sidebar-icon: #0284c7; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="org_settings"] { --sidebar-icon: #0891b2; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="staff"] { --sidebar-icon: #e11d48; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="diary"] { --sidebar-icon: #0284c7; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="downtime"] { --sidebar-icon: #dc2626; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="office_floor"] { --sidebar-icon: #7c3aed; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="notifications"] { --sidebar-icon: #2563eb; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="profile"] { --sidebar-icon: #0284c7; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="copy-link"] { --sidebar-icon: #059669; }
[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="logout"] { --sidebar-icon: #dc2626; }

/* Иконка «инструкция» наследует цвет модуля из ряда */
#sidebar .sidebar-module-row:has([data-sidebar-module="support"]) {
    --sidebar-icon: var(--notification-cat-support);
}
#sidebar .sidebar-module-row:has([data-sidebar-module="projects"]) {
    --sidebar-icon: var(--notification-cat-projects);
}
#sidebar .sidebar-module-row:has([data-sidebar-module="metrology"]) {
    --sidebar-icon: var(--notification-cat-metrology);
}
#sidebar .sidebar-module-row:has([data-sidebar-module="shift_log"]) {
    --sidebar-icon: var(--notification-cat-shift-log);
}
#sidebar .sidebar-module-row:has([data-sidebar-module="maintenance"]) {
    --sidebar-icon: var(--notification-cat-maintenance);
}
#sidebar .sidebar-module-row:has([data-sidebar-module="news"]) {
    --sidebar-icon: var(--notification-cat-news);
}
#sidebar .sidebar-module-row:has([data-sidebar-module="diary"]) {
    --sidebar-icon: #38bdf8;
}
#sidebar .sidebar-module-row:has([data-sidebar-module="downtime"]) {
    --sidebar-icon: #f87171;
}
#sidebar .sidebar-module-row:has([data-sidebar-module="notifications"]) {
    --sidebar-icon: #60a5fa;
}

#sidebar .sidebar-mobile-header {
    border-bottom: 1px solid var(--sidebar-border);
    background: color-mix(in srgb, #0f172a 35%, transparent);
    backdrop-filter: blur(8px);
    /* Под Dynamic Island / статус-бар; !important — иначе утилиты padding перебивают */
    padding-top: max(1rem, calc(0.75rem + env(safe-area-inset-top, 0px))) !important;
}

[data-theme="light"] #sidebar .sidebar-mobile-header {
    background: color-mix(in srgb, #ffffff 70%, transparent);
}

/* Заголовки секций сайдбара */
#sidebar .sidebar-section-title,
#sidebar h3.text-xs.uppercase {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

/* Блок «Команда» — в той же стеклянной эстетике */
#sidebar .sidebar-team__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#sidebar .sidebar-team-member {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.7rem;
}

#sidebar .sidebar-team-member__avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
}

#sidebar .sidebar-team-member__avatar img,
#sidebar .sidebar-team-member__avatar-fallback {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--sidebar-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

#sidebar .sidebar-team-member__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    font-size: 0.7rem;
}

#sidebar .sidebar-team-member__avatar-fallback i {
    color: var(--color-accent);
}

#sidebar .sidebar-team-member__meta {
    min-width: 0;
    flex: 1;
}

#sidebar .sidebar-team-member__name {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-base);
}

#sidebar .sidebar-team-member:hover .sidebar-team-member__name {
    color: #f8fafc;
}

[data-theme="light"] #sidebar .sidebar-team-member:hover .sidebar-team-member__name {
    color: var(--color-accent-dark);
}

#sidebar .sidebar-team-member__role {
    margin: 0.1rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar .sidebar-team-member__role--owner {
    color: var(--color-success);
}

#sidebar .sidebar-team-member__role--admin {
    color: var(--color-accent);
}

#sidebar .sidebar-team__all {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    --sidebar-icon: #38bdf8;
}

[data-theme="light"] #sidebar .sidebar-team__all {
    --sidebar-icon: #0284c7;
}

#sidebar .sidebar-nav-link[data-sidebar-module="team"] {
    --sidebar-icon: #38bdf8;
}

[data-theme="light"] #sidebar .sidebar-nav-link[data-sidebar-module="team"] {
    --sidebar-icon: #0284c7;
}

/* ——— Страница участников организации ——— */
.org-members {
    width: min(52rem, 100%);
    margin: 0 auto;
    min-width: 0;
}

.org-members__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.org-members__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.org-members__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.org-members__lead {
    margin: 0.4rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.org-members__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.org-members__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.6rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
}

.org-members__btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    background: color-mix(in srgb, #0f172a 28%, transparent);
    color: var(--color-text-primary);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.org-members__btn-ghost:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-accent);
}

[data-theme="light"] .org-members__btn-ghost {
    background: color-mix(in srgb, #ffffff 75%, transparent);
    border-color: var(--color-border);
}

.org-members__panel {
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, #94a3b8 16%, transparent);
    background:
        radial-gradient(
            ellipse 80% 50% at 0% 0%,
            color-mix(in srgb, var(--color-accent) 10%, transparent),
            transparent 55%
        ),
        color-mix(in srgb, var(--color-bg-secondary) 92%, transparent);
    box-shadow: inset 1px 0 0 color-mix(in srgb, #38bdf8 8%, transparent);
    overflow: hidden;
}

[data-theme="light"] .org-members__panel {
    background:
        radial-gradient(
            ellipse 80% 50% at 0% 0%,
            color-mix(in srgb, var(--color-accent) 8%, transparent),
            transparent 55%
        ),
        var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.org-members__panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, #94a3b8 14%, transparent);
}

.org-members__panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.org-members__panel-meta,
.org-members__manage-hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.org-members__list {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
}

.org-members__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.9rem 1.15rem;
    transition: background-color var(--transition-base);
}

.org-members__item:hover {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.org-members__person {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    flex: 1;
}

.org-members__avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
}

.org-members__avatar img,
.org-members__avatar-fallback {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.org-members__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    font-size: 0.85rem;
}

.org-members__info {
    min-width: 0;
    flex: 1;
}

.org-members__name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.org-members__name a {
    color: inherit;
    transition: color var(--transition-base);
}

.org-members__name a:hover {
    color: var(--color-accent);
}

.org-members__you {
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    vertical-align: middle;
}

.org-members__email {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
}

.org-members__email a,
.org-members__phone {
    color: var(--color-accent);
    word-break: break-all;
}

.org-members__email a:hover,
.org-members__phone:hover {
    text-decoration: underline;
}

.org-members__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin-top: 0.45rem;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.org-members__dot {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 9999px;
    background: color-mix(in srgb, #94a3b8 55%, transparent);
}

.org-members__role {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, #94a3b8 12%, transparent);
    color: var(--color-text-secondary);
}

.org-members__role--owner {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
}

.org-members__role--admin {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.org-members__perm-yes {
    color: var(--color-success);
    font-weight: 600;
}

.org-members__item-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
    padding-top: 0.15rem;
}

.org-members__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.org-members__icon-btn--edit:hover {
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.org-members__icon-btn--danger:hover {
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 45%, transparent);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.org-members__solo-hint {
    padding: 0.85rem 1.15rem;
    border-top: 1px solid color-mix(in srgb, #94a3b8 14%, transparent);
    font-size: 0.8125rem;
    text-align: center;
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.org-members__empty {
    display: grid;
    gap: 1rem;
    justify-items: center;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.org-members__btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-error);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.org-members__btn-danger:hover {
    background: color-mix(in srgb, var(--color-error) 85%, #000);
}

.org-members-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, #020617 55%, transparent);
    backdrop-filter: blur(6px);
}

.org-members-modal.is-open {
    display: flex;
}

.org-members-modal__dialog {
    width: min(26rem, 100%);
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, #94a3b8 18%, transparent);
    background:
        radial-gradient(
            ellipse 70% 40% at 0% 0%,
            color-mix(in srgb, var(--color-accent) 12%, transparent),
            transparent 55%
        ),
        var(--color-bg-secondary);
    box-shadow: 0 20px 48px rgba(2, 12, 27, 0.45);
}

[data-theme="light"] .org-members-modal__dialog {
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
}

.org-members-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.org-members-modal__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.org-members-modal__label {
    display: block;
    margin: 1.1rem 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
}

.org-members-modal__select {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    background: color-mix(in srgb, #0f172a 35%, transparent);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

[data-theme="light"] .org-members-modal__select {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.org-members-modal__select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.org-members-modal__hint {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.org-members-modal__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    margin-top: 1.35rem;
}

@media (min-width: 640px) {
    .org-members-modal__actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

@media (max-width: 639px) {
    .org-members__header {
        align-items: stretch;
    }

    .org-members__actions {
        width: 100%;
    }

    .org-members__actions > * {
        flex: 1;
    }
}

/* Scrollbar improvements */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.5);
}

[data-theme="light"] * {
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

[data-theme="light"] *::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
}

[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6);
}

/* Mobile sidebar scroll improvements */
@media (max-width: 1482px) {
    .sidebar {
        /* Smooth scrolling on mobile */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Custom scrollbar for mobile sidebar */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }
    
    .sidebar::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.3);
        border-radius: 3px;
    }
    
    .sidebar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(148, 163, 184, 0.5);
    }
    
    [data-theme="light"] .sidebar::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.4);
    }
    
    [data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(156, 163, 175, 0.6);
    }
}

/* Cards */
.card {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.card--flat {
    box-shadow: none;
    border-radius: var(--radius-lg);
}

.card--raised {
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-light);
}

/* Блок с несохранёнными изменениями (настройки простоев и аналоги) */
.card--unsaved {
    border-color: var(--color-warning);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-warning) 55%, transparent),
        var(--shadow-sm);
    background-color: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-secondary));
}

[data-theme="light"] .card--unsaved {
    background-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-warning) 40%, transparent),
        var(--shadow-sm);
}

.settings-unsaved-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
    background-color: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg-primary));
    color: var(--color-text-primary);
}

[data-theme="light"] .settings-unsaved-hint {
    background-color: color-mix(in srgb, var(--color-warning) 12%, #fff);
    border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
}

.settings-unsaved-hint__icon {
    color: var(--color-warning);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.settings-unsaved-hint__body {
    min-width: 0;
}

.settings-unsaved-hint__title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.35;
}

.settings-unsaved-hint__text {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.settings-tab--unsaved {
    position: relative;
}

.settings-tab--unsaved::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-warning);
    box-shadow: 0 0 0 2px var(--color-bg-secondary);
}

[data-theme="light"] .settings-tab--unsaved::after {
    box-shadow: 0 0 0 2px #fff;
}

/* Вкладки настроек организации — сетка + тёмная тема */
.org-settings-tabs-scroller {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background: var(--color-bg-tertiary, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
}

@media (min-width: 640px) {
    .org-settings-tabs-scroller {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .org-settings-tabs-scroller {
        gap: 0.625rem;
        padding: 0.625rem;
    }
}

[data-theme="dark"] .org-settings-tabs-scroller,
html.dark .org-settings-tabs-scroller {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(71, 85, 105, 0.85);
}

.org-settings-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    min-height: 3.75rem;
    text-align: left;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

[data-theme="dark"] .org-settings-tab,
html.dark .org-settings-tab {
    border-color: rgba(51, 65, 85, 0.55);
    background: rgba(30, 41, 59, 0.35);
}

.org-settings-tab:hover {
    background: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .org-settings-tab:hover,
html.dark .org-settings-tab:hover {
    background: rgba(51, 65, 85, 0.55);
    border-color: rgba(100, 116, 139, 0.7);
}

.org-settings-tab[aria-selected="true"] {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .org-settings-tab[aria-selected="true"],
html.dark .org-settings-tab[aria-selected="true"] {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2);
}

.org-settings-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    background: rgba(148, 163, 184, 0.18);
    color: #475569;
}

[data-theme="dark"] .org-settings-tab__icon,
html.dark .org-settings-tab__icon {
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
}

.org-settings-tab__icon--amber { color: #d97706; background: rgba(245, 158, 11, 0.16); }
.org-settings-tab__icon--sky { color: #0284c7; background: rgba(14, 165, 233, 0.16); }
.org-settings-tab__icon--indigo { color: #6366f1; background: rgba(99, 102, 241, 0.16); }
.org-settings-tab__icon--cyan { color: #0891b2; background: rgba(6, 182, 212, 0.16); }
.org-settings-tab__icon--emerald { color: #059669; background: rgba(16, 185, 129, 0.16); }

[data-theme="dark"] .org-settings-tab__icon--amber,
html.dark .org-settings-tab__icon--amber { color: #fbbf24; background: rgba(245, 158, 11, 0.28); }
[data-theme="dark"] .org-settings-tab__icon--sky,
html.dark .org-settings-tab__icon--sky { color: #38bdf8; background: rgba(14, 165, 233, 0.28); }
[data-theme="dark"] .org-settings-tab__icon--indigo,
html.dark .org-settings-tab__icon--indigo { color: #c4b5fd; background: rgba(99, 102, 241, 0.3); }
[data-theme="dark"] .org-settings-tab__icon--cyan,
html.dark .org-settings-tab__icon--cyan { color: #22d3ee; background: rgba(6, 182, 212, 0.28); }
[data-theme="dark"] .org-settings-tab__icon--emerald,
html.dark .org-settings-tab__icon--emerald { color: #34d399; background: rgba(16, 185, 129, 0.28); }

.org-settings-tab__label {
    min-width: 0;
    flex: 1;
}

.org-settings-tab__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary, #0f172a);
}

.org-settings-tab__hint {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--color-text-secondary, #64748b);
}

.org-settings-panel-header {
    margin-bottom: 1rem;
}

.org-settings-panel-header h2 {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--color-text-primary);
}

.org-settings-panel-header p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    max-width: 42rem;
}

/* Шаги и номера классификации — спокойный акцент без «кричащих» бейджей */
.classification-steps__sep {
    color: var(--color-text-muted);
    opacity: 0.7;
    font-size: 0.75rem;
}

.classification-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem 0.3rem 0.35rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--color-text-tertiary);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.classification-step:hover {
    color: var(--color-text-primary);
    background-color: color-mix(in srgb, var(--color-bg-tertiary) 70%, transparent);
    border-color: var(--color-border);
}

.classification-step__num,
.classification-section__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    margin: 0;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Violet */
.classification-step--violet .classification-step__num,
.classification-section__num--violet {
    color: #c4b5fd;
    background-color: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.28);
}

.classification-step--violet:hover {
    color: #ddd6fe;
    border-color: rgba(139, 92, 246, 0.35);
    background-color: rgba(139, 92, 246, 0.1);
}

/* Rose */
.classification-step--rose .classification-step__num,
.classification-section__num--rose {
    color: #fda4af;
    background-color: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.28);
}

.classification-step--rose:hover {
    color: #fecdd3;
    border-color: rgba(244, 63, 94, 0.35);
    background-color: rgba(244, 63, 94, 0.1);
}

/* Cyan */
.classification-step--cyan .classification-step__num,
.classification-section__num--cyan {
    color: #67e8f9;
    background-color: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.28);
}

.classification-step--cyan:hover {
    color: #a5f3fc;
    border-color: rgba(6, 182, 212, 0.35);
    background-color: rgba(6, 182, 212, 0.1);
}

[data-theme="light"] .classification-step {
    color: var(--color-text-secondary);
}

[data-theme="light"] .classification-step:hover {
    background-color: #f8fafc;
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="light"] .classification-step--violet .classification-step__num,
[data-theme="light"] .classification-section__num--violet {
    color: #6d28d9;
    background-color: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.22);
}

[data-theme="light"] .classification-step--violet:hover {
    color: #5b21b6;
    background-color: rgba(139, 92, 246, 0.08);
}

[data-theme="light"] .classification-step--rose .classification-step__num,
[data-theme="light"] .classification-section__num--rose {
    color: #be123c;
    background-color: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.2);
}

[data-theme="light"] .classification-step--rose:hover {
    color: #9f1239;
    background-color: rgba(244, 63, 94, 0.07);
}

[data-theme="light"] .classification-step--cyan .classification-step__num,
[data-theme="light"] .classification-section__num--cyan {
    color: #0e7490;
    background-color: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.22);
}

[data-theme="light"] .classification-step--cyan:hover {
    color: #155e75;
    background-color: rgba(6, 182, 212, 0.08);
}

/* Brand wordmark in top nav — sky pair in both themes (not black + blue) */
a.brand-wordmark {
    color: #f8fafc;
    text-decoration: none;
}

a.brand-wordmark:hover {
    color: #e2e8f0;
}

a.brand-wordmark .accent {
    color: #38bdf8;
}

a.brand-wordmark:hover .accent {
    color: #7dd3fc;
}

[data-theme="light"] a.brand-wordmark,
[data-theme="light"] a.brand-wordmark .brand-wordmark__zero {
    color: #0c4a6e;
}

[data-theme="light"] a.brand-wordmark:hover,
[data-theme="light"] a.brand-wordmark:hover .brand-wordmark__zero {
    color: #075985;
}

[data-theme="light"] a.brand-wordmark .accent {
    color: #38bdf8;
}

[data-theme="light"] a.brand-wordmark:hover .accent {
    color: #0ea5e9;
}

/* Accent text — brand «Стек» keeps sky cyan in both themes */
.accent {
    color: #38bdf8;
}

/* Buttons */
.btn-primary {
    background-color: var(--color-accent);
    color: #ffffff;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    /* Перебиваем a:hover — иначе текст = --color-accent-hover и сливается с фоном */
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    background-color: var(--color-accent-dark);
    color: #ffffff;
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Ссылки-кнопки: глобальный a/a:hover не должен менять цвет текста */
a.btn-primary,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
    color: #ffffff;
}

/* Вторичная кнопка (отмена / ручные действия) — outline на accent */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border, #64748b));
    color: var(--color-accent);
    box-shadow: none;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
    transform: translateY(-1px);
}

.btn-secondary:active {
    background-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent-dark);
    transform: translateY(0);
}

a.btn-secondary,
a.btn-secondary:visited,
a.btn-secondary:hover,
a.btn-secondary:focus,
a.btn-secondary:active {
    color: var(--color-accent);
    text-decoration: none;
}

a.btn-secondary:hover,
a.btn-secondary:focus {
    color: var(--color-accent-hover);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    background-color: #dc2626;
    border: 1px solid #b91c1c;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.btn-danger:hover {
    background-color: #b91c1c;
    border-color: #991b1b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

a.btn-danger,
a.btn-danger:visited,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:active {
    color: #ffffff;
    text-decoration: none;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Компактные кнопки в таблицах staff/agent-tasks */
.btn-sm {
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.35rem;
}

.agent-task-list .btn-primary,
.agent-task-list .btn-secondary,
.agent-task-detail .btn-primary,
.agent-task-detail .btn-secondary {
    white-space: nowrap;
}

/* Переключатель источника списка SKU на странице устройства */
.sku-list-mode-btn {
    background-color: transparent !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

html.dark .sku-list-mode-btn,
[data-theme="dark"] .sku-list-mode-btn {
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

.sku-list-mode-btn:hover:not(:disabled):not(.is-active) {
    background-color: color-mix(in srgb, #64748b 12%, transparent) !important;
}

.sku-list-mode-btn.is-active,
html.dark .sku-list-mode-btn.is-active,
[data-theme="dark"] .sku-list-mode-btn.is-active {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-sm) !important;
}

.sku-list-mode-btn.is-active:hover:not(:disabled),
html.dark .sku-list-mode-btn.is-active:hover:not(:disabled),
[data-theme="dark"] .sku-list-mode-btn.is-active:hover:not(:disabled) {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
}

/* «Весь список» — нейтральная заливка, чтобы отличать от режима плана */
.sku-list-mode-btn[data-sku-list-all].is-active,
html.dark .sku-list-mode-btn[data-sku-list-all].is-active,
[data-theme="dark"] .sku-list-mode-btn[data-sku-list-all].is-active {
    background-color: #475569 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

.sku-list-mode-btn[data-sku-list-all].is-active:hover:not(:disabled),
html.dark .sku-list-mode-btn[data-sku-list-all].is-active:hover:not(:disabled),
[data-theme="dark"] .sku-list-mode-btn[data-sku-list-all].is-active:hover:not(:disabled) {
    background-color: #334155 !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
}

.sku-list-mode-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Бейдж статуса устройства на странице простоев */
.downtime-device-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
}

html[data-theme="light"] .downtime-device-status-badge--active,
[data-theme="light"] .downtime-device-status-badge--active {
    color: #047857;
    background-color: #d1fae5;
    border-color: #059669;
}

html.dark .downtime-device-status-badge--active,
[data-theme="dark"] .downtime-device-status-badge--active {
    color: #34d399;
    background-color: rgba(6, 78, 59, 0.45);
    border-color: rgba(16, 185, 129, 0.35);
}

html[data-theme="light"] .downtime-device-status-badge--inactive,
[data-theme="light"] .downtime-device-status-badge--inactive {
    color: #475569;
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

html.dark .downtime-device-status-badge--inactive,
[data-theme="dark"] .downtime-device-status-badge--inactive {
    color: #94a3b8;
    background-color: #334155;
    border-color: #475569;
}

/* Кнопка «Завершить» выпуск SKU на странице устройства */
.sku-run-end-btn {
    background-color: #ffffff !important;
    border: 1px solid #475569 !important;
    color: #1e293b !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 600;
    cursor: pointer;
}

html.dark .sku-run-end-btn,
[data-theme="dark"] .sku-run-end-btn {
    background-color: transparent !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

.sku-run-end-btn:hover:not(:disabled) {
    background-color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark .sku-run-end-btn:hover:not(:disabled),
[data-theme="dark"] .sku-run-end-btn:hover:not(:disabled) {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: #64748b !important;
}

.sku-run-end-btn:disabled {
    color: #64748b !important;
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

html.dark .sku-run-end-btn:disabled,
[data-theme="dark"] .sku-run-end-btn:disabled {
    color: #64748b !important;
    background-color: rgba(15, 23, 42, 0.35) !important;
    border-color: #475569 !important;
}

/* Кнопка «Завершить» активного ручного простоя */
.downtime-end-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background-color: #dc2626 !important;
    border: 1px solid #b91c1c !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.downtime-end-btn:hover {
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
}

.downtime-end-btn:active {
    background-color: #991b1b !important;
    border-color: #7f1d1d !important;
    transform: translateY(0);
    box-shadow: var(--shadow-sm) !important;
}

.btn-primary:disabled,
.btn-primary.btn-loading {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Компактный CTA регистрации: на мобиле ≥44px по высоте */
.nav-signup-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    flex-shrink: 0;
    min-height: 44px;
}

@media (min-width: 640px) {
    .nav-signup-btn {
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* Меню гостя в шапке (маркетинговые разделы) */
.guest-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-secondary, #475569);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.guest-nav-link:hover,
.guest-nav-link.is-active {
    color: var(--color-accent, #0284c7);
    background: color-mix(in srgb, var(--color-accent, #0284c7) 10%, transparent);
}

@media (min-width: 768px) {
    .guest-nav-link {
        font-size: 0.875rem;
        padding: 0 0.625rem;
    }
}

/* Зоны нажатия ≥44px в верхней навигации (мобильный a11y).
   display не задаём: main.css идёт после Tailwind и иначе перебивает
   hidden / lg:hidden (одинаковая специфичность, побеждает порядок).
   На элементе нужен inline-flex (или другой display) из утилит. */
.nav-tap-target {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

/* Верхняя панель: не уходить под часы / Dynamic Island / статус-бар (PWA + viewport-fit=cover) */
.app-top-nav {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.5rem;
    padding-left: calc(0.75rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.75rem + env(safe-area-inset-right, 0px));
}

@media (min-width: 640px) {
    .app-top-nav {
        padding-left: calc(1rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 768px) {
    .app-top-nav {
        padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
    }
}

/* «Назад» в верхней панели: как theme-toggle, без тяжёлой заливки */
.mobile-nav-back {
    margin-left: -0.35rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-accent, #38bdf8);
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

[data-theme="light"] .mobile-nav-back {
    color: #0284c7;
}

.mobile-nav-back[hidden] {
    display: none !important;
}

.mobile-nav-back i {
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 700;
}

.mobile-nav-back:hover,
.mobile-nav-back:focus-visible {
    color: #7dd3fc;
    background: color-mix(in srgb, var(--color-accent, #0ea5e9) 14%, transparent);
    outline: none;
}

[data-theme="light"] .mobile-nav-back:hover,
[data-theme="light"] .mobile-nav-back:focus-visible {
    color: #0369a1;
    background: color-mix(in srgb, #0ea5e9 12%, #ffffff);
}

.mobile-nav-back:active {
    transform: scale(0.96);
}

@media (min-width: 1024px) {
    .mobile-nav-back {
        display: none !important;
    }
}

/* Status badges — semantic, not color-only */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
}

.status-badge--success {
    color: var(--color-success);
    background-color: color-mix(in srgb, var(--color-success) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.status-badge--warning {
    color: var(--color-warning);
    background-color: color-mix(in srgb, var(--color-warning) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.status-badge--error {
    color: var(--color-error);
    background-color: color-mix(in srgb, var(--color-error) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
}

.status-badge--info {
    color: var(--color-info);
    background-color: color-mix(in srgb, var(--color-info) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-info) 35%, transparent);
}

.status-badge--neutral {
    color: var(--color-text-secondary);
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border);
}

/* Profile avatar file upload (hidden native input + visible trigger) */
.profile-avatar-file {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    width: 100%;
}

.profile-avatar-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-avatar-file__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.profile-avatar-file__trigger:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
}

.profile-avatar-file__trigger:focus-visible,
.profile-avatar-file:focus-within .profile-avatar-file__trigger {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.profile-avatar-file__status {
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .profile-avatar-file__trigger {
        width: auto;
        align-self: center;
    }
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background-color: var(--color-error);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: var(--radius-full);
    min-width: 20px;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-xs);
}

.notification-badge.text-xs {
    font-size: 0.625rem;
}

/* Toast-стек уведомлений: снизу слева; hover раскрывает пачку */
.notification-toast-stack {
    --notification-toast-accent: var(--color-accent);
    position: fixed;
    left: 1.25rem;
    right: auto;
    bottom: calc(1.5rem + var(--cookie-banner-clearance, 0px));
    z-index: 10050;
    width: min(22rem, calc(100vw - 2.5rem));
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base);
    pointer-events: none;
}

.notification-toast-stack.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.notification-toast-stack__deck {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notification-toast-stack__badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    z-index: 6;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-full);
    background-color: var(--color-error);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
    transition: opacity var(--transition-fast);
}

.notification-toast-stack.is-expanded .notification-toast-stack__badge {
    opacity: 0;
    pointer-events: none;
}

.notification-toast-stack__hint {
    margin: 0.45rem 0.15rem 0;
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
}

.notification-toast-card {
    --notification-toast-accent: var(--color-accent);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 0.95rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--notification-toast-accent);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    transition:
        transform var(--transition-base),
        opacity var(--transition-base),
        margin var(--transition-base),
        box-shadow var(--transition-base);
}

[data-theme="light"] .notification-toast-card {
    background-color: var(--color-surface, #ffffff);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

.notification-toast-card--SUPPORT {
    --notification-toast-accent: var(--notification-cat-support);
}

.notification-toast-card--PROJECTS {
    --notification-toast-accent: var(--notification-cat-projects);
}

.notification-toast-card--METROLOGY {
    --notification-toast-accent: var(--notification-cat-metrology);
}

.notification-toast-card--SHIFT_LOG {
    --notification-toast-accent: var(--notification-cat-shift-log);
}

.notification-toast-card--MAINTENANCE {
    --notification-toast-accent: var(--notification-cat-maintenance);
}

.notification-toast-card--NEWS {
    --notification-toast-accent: var(--notification-cat-news);
}

.notification-toast-card__icon {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--notification-toast-accent) 18%, transparent);
    color: var(--notification-toast-accent);
    font-size: 0.9rem;
}

.notification-toast-card__body {
    min-width: 0;
    flex: 1;
}

.notification-toast-card__category {
    display: inline-flex;
    margin: 0 0 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--notification-toast-accent);
    background-color: color-mix(in srgb, var(--notification-toast-accent) 14%, transparent);
}

.notification-toast-card__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.notification-toast-card__message {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Список уведомлений: длинные URL/JSON в цитате комментария не раздувают карточку */
.notification-list-item {
    min-width: 0;
    max-width: 100%;
}

.notification-list-item__content {
    min-width: 0;
    max-width: 100%;
}

.notification-list-item__body,
.notification-list-item__quote,
.notification-list-item__meta {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notification-list-item__quote {
    white-space: pre-wrap;
}

/* Свёрнутый стек: одна карточка сверху, остальные «веером» сзади */
.notification-toast-stack.has-stack:not(.is-expanded) .notification-toast-card:nth-child(n + 2) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}

.notification-toast-stack.has-stack:not(.is-expanded) .notification-toast-card:nth-child(2) {
    transform: translate(0.35rem, 0.35rem) scale(0.985);
    opacity: 0.72;
    z-index: 1;
}

.notification-toast-stack.has-stack:not(.is-expanded) .notification-toast-card:nth-child(3) {
    transform: translate(0.65rem, 0.65rem) scale(0.97);
    opacity: 0.45;
    z-index: 0;
}

.notification-toast-stack.has-stack:not(.is-expanded) .notification-toast-card:nth-child(n + 4) {
    opacity: 0;
    transform: translate(0.8rem, 0.8rem) scale(0.95);
    z-index: 0;
}

.notification-toast-stack.has-stack:not(.is-expanded) .notification-toast-card:first-child {
    z-index: 3;
    position: relative;
}

/* Раскрытый стек: все карточки в колонке */
.notification-toast-stack.is-expanded .notification-toast-stack__deck {
    gap: 0.5rem;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    padding-right: 0.15rem;
}

.notification-toast-stack.is-expanded .notification-toast-card {
    position: relative;
    opacity: 1;
    transform: none;
    z-index: auto;
}

@media (max-width: 1023px) {
    .notification-toast-stack {
        left: 0.75rem;
        /* Над FAB + нижней навигацией */
        bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px) + var(--cookie-banner-clearance, 0px));
        width: min(22rem, calc(100vw - 1.5rem));
    }

    .notification-toast-stack__hint {
        display: none;
    }
}

/* Progress bar */
.progress-bar {
    height: 0.5rem;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
    background-color: var(--color-success);
}

.progress-bar.warning {
    background-color: var(--color-warning);
}

.progress-bar.error {
    background-color: var(--color-error);
}

/* Slow spin animation for icons */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* Note: status-badge, message-box, and spinner classes removed as they are not used */

/* ============================================
   Utility Classes
   ============================================ */
/* Note: Text utilities removed as they are not used - Tailwind provides these */

/* ============================================
   Responsive Utilities for Projects Page
   ============================================ */

/* Improve table responsiveness on medium screens */
@media (max-width: 1482px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-responsive table {
        min-width: 600px;
    }
}

/* Improve card spacing on small screens */
@media (max-width: 640px) {
    .metrics-card {
        padding: 0.75rem;
    }
    
    .metrics-card-title {
        font-size: 0.75rem;
    }
    
    .metrics-card-value {
        font-size: 1.5rem;
    }
}

/* Improve modal on very small screens */
@media (max-width: 480px) {
    .filter-modal {
        margin: 0.5rem;
        padding: 1rem;
    }
}

/* Improve chart containers on small and medium screens */
.chart-container-responsive {
    height: 180px;
    min-height: 180px;
}

@media (min-width: 768px) and (max-width: 1482px) {
    .chart-container-responsive {
        height: 200px;
        min-height: 200px;
    }
}

@media (min-width: 1483px) {
    .chart-container-responsive {
        height: 220px;
        min-height: 220px;
    }
}

@media (max-width: 640px) {
    .chart-container-responsive {
        height: 160px !important;
        min-height: 160px !important;
    }
}

/* Improve Gantt chart on all screen sizes */
.gantt-container-responsive {
    max-height: 35vh;
    min-height: 200px;
}

@media (min-width: 640px) and (max-width: 1482px) {
    .gantt-container-responsive {
        max-height: 40vh;
        min-height: 250px;
    }
}

@media (min-width: 1483px) {
    .gantt-container-responsive {
        max-height: 50vh;
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .gantt-container-responsive {
        max-height: 30vh !important;
        min-height: 180px !important;
    }
}

/* Improve form inputs on small screens */
@media (max-width: 640px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        font-size: 16px; /* Prevents zoom on iOS; required for reliable native pickers */
        min-height: 44px;
    }
}

/*
 * iOS Safari: native date/time pickers often fail inside overflow:hidden ancestors
 * (desktop devtools do not reproduce this). Preserve system appearance and stacking.
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input.native-datetime-input {
    -webkit-appearance: auto;
    appearance: auto;
    color-scheme: light dark;
    position: relative;
    z-index: 1;
    touch-action: manipulation;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

input.native-datetime-input {
    display: block;
    width: 100%;
}

.native-datetime-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.card-native-pickers {
    overflow: visible;
}

.ios-datetime-fallback {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ios-datetime-select {
    flex: 1 1 auto;
    min-width: 0;
}

/* Contain iOS date/time text inside the field (picker still opens) */
@supports (-webkit-touch-callout: none) {
    input[type="date"].native-datetime-input,
    input[type="time"].native-datetime-input {
        line-height: 1.25;
        padding-right: 0.5rem;
    }

    input[type="date"].native-datetime-input::-webkit-date-and-time-value,
    input[type="time"].native-datetime-input::-webkit-date-and-time-value {
        text-align: left;
        min-width: 0;
    }

    input[type="date"].native-datetime-input::-webkit-datetime-edit,
    input[type="time"].native-datetime-input::-webkit-datetime-edit {
        min-width: 0;
        overflow: hidden;
        padding: 0;
    }

    input[type="date"].native-datetime-input::-webkit-datetime-edit-fields-wrapper,
    input[type="time"].native-datetime-input::-webkit-datetime-edit-fields-wrapper {
        min-width: 0;
    }

    input[type="date"].native-datetime-input::-webkit-calendar-picker-indicator,
    input[type="time"].native-datetime-input::-webkit-calendar-picker-indicator {
        margin-left: 0.25rem;
        opacity: 1;
        cursor: pointer;
    }
}

/* Empty date placeholder (дд.мм.гггг) stays readable before focus */
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
input[type="date"].native-datetime-input:not(:focus):invalid::-webkit-datetime-edit {
    color: #64748b;
}

.dark input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
.dark input[type="date"].native-datetime-input:not(:focus):invalid::-webkit-datetime-edit,
[data-theme="dark"] input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
[data-theme="dark"] input[type="date"].native-datetime-input:not(:focus):invalid::-webkit-datetime-edit {
    color: #94a3b8;
}

/* Diary month calendar: fluid 7-col grid, no horizontal pan on phones */
.diary-calendar-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.diary-calendar-weekdays,
.diary-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
}

.diary-calendar-weekday {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.dark .diary-calendar-weekday,
[data-theme="dark"] .diary-calendar-weekday {
    color: #94a3b8;
}

.diary-calendar-cell {
    min-width: 0;
}

.diary-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 3rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: #475569;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dark .diary-calendar-day,
[data-theme="dark"] .diary-calendar-day {
    color: #cbd5e1;
}

.diary-calendar-day:not(.is-empty):hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.dark .diary-calendar-day:not(.is-empty):hover,
[data-theme="dark"] .diary-calendar-day:not(.is-empty):hover {
    background-color: #334155;
    color: #fff;
}

.diary-calendar-day.is-empty {
    pointer-events: none;
    color: transparent;
}

.diary-calendar-day.has-incomplete {
    background-color: #f59e0b;
    color: #fff;
}

.diary-calendar-day.has-incomplete:hover {
    background-color: #fbbf24;
    color: #fff;
}

.dark .diary-calendar-day.has-incomplete,
[data-theme="dark"] .diary-calendar-day.has-incomplete {
    background-color: #d97706;
}

.dark .diary-calendar-day.has-incomplete:hover,
[data-theme="dark"] .diary-calendar-day.has-incomplete:hover {
    background-color: #f59e0b;
}

.diary-calendar-day.all-done {
    background-color: #10b981;
    color: #fff;
}

.diary-calendar-day.all-done:hover {
    background-color: #34d399;
    color: #fff;
}

.dark .diary-calendar-day.all-done,
[data-theme="dark"] .diary-calendar-day.all-done {
    background-color: #059669;
}

.dark .diary-calendar-day.all-done:hover,
[data-theme="dark"] .diary-calendar-day.all-done:hover {
    background-color: #10b981;
}

.diary-calendar-day.is-today {
    box-shadow: inset 0 0 0 2px #0ea5e9;
}

.diary-calendar-day.is-today:not(.has-incomplete):not(.all-done) {
    background-color: #bae6fd;
    color: #0c4a6e;
}

.dark .diary-calendar-day.is-today:not(.has-incomplete):not(.all-done),
[data-theme="dark"] .diary-calendar-day.is-today:not(.has-incomplete):not(.all-done) {
    background-color: rgba(3, 105, 161, 0.8);
    color: #fff;
    box-shadow: inset 0 0 0 2px #38bdf8;
}

/* Аккордеон разделов проекта: flex на самом <summary> в WebKit не тянется на 100%,
   из‑за этого ряд сжимается и «N задач» липнет к названию. Раскладка — во внутреннем row. */
.module-accordion {
    width: 100%;
    min-width: 0;
}

.module-accordion > summary.module-accordion-summary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    list-style: none;
}

.module-accordion > summary.module-accordion-summary::-webkit-details-marker {
    display: none;
}

.module-accordion > summary.module-accordion-summary::marker {
    content: "";
}

.module-accordion-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

.module-accordion-summary-count {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

/* Карточки задач: длинные заголовки и узкая колонка без горизонтального overflow */
.project-task-card {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.task-card-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    min-width: 0;
}

/* Название задачи в форме: перенос длинных строк на телефоне */
.task-title-input,
textarea.task-title-input,
#id_title.task-title-input {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    min-height: 2.75rem;
    /* Длинный текст: растём до лимита, дальше — прокрутка жестом */
    max-height: min(55vh, 20rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    resize: vertical;
    box-sizing: border-box;
}

/* Подсказка, что текст можно прокрутить (когда не влез в max-height) */
.task-title-input--scrollable {
    box-shadow: inset 0 -0.75rem 0.75rem -0.75rem color-mix(in srgb, var(--color-text-primary, #0f172a) 18%, transparent);
}

[data-theme="dark"] .task-title-input--scrollable,
.dark .task-title-input--scrollable {
    box-shadow: inset 0 -0.75rem 0.75rem -0.75rem rgba(15, 23, 42, 0.55);
}

.task-comment-form,
.task-comments-container {
    min-width: 0;
    max-width: 100%;
}

/* Поле комментария: не клипать placeholder, не раздувать flex-ряд */
.task-comment-textarea,
.reply-comment-textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    max-height: 12rem;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.4;
}

/* Shift log filters: avoid squished row in phone landscape */
.shift-log-filters-dates {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 480px) and (orientation: portrait) {
    .shift-log-filters-dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .shift-log-filters-dates {
        grid-template-columns: repeat(2, minmax(10rem, 1fr));
    }
}

.shift-log-filters-rest {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 640px) {
    .shift-log-filters-rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .shift-log-filters-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem;
    }

    .shift-log-filters-dates {
        display: contents;
    }

    .shift-log-filters-rest {
        display: contents;
    }

    .shift-log-filters-form .native-datetime-field {
        flex: 0 1 10rem;
    }

    .shift-log-filters-form .shift-log-filter-search {
        flex: 1 1 12rem;
        min-width: 10rem;
    }
}

.org-work-hours-times {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 640px) and (orientation: portrait),
       (min-width: 768px) {
    .org-work-hours-times {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 932px) and (orientation: landscape) {
    .org-work-hours-times {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   Support Widget - Floating Action Button
   ============================================ */
.support-widget {
    position: fixed;
    right: 1.5rem;
    /* Зазор: cookie + safe-area (+ нижняя навигация на узких — в @media) */
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--cookie-banner-clearance, 0px));
    z-index: 9999;
    transition: bottom var(--transition-base);
}

/* Пульс снаружи кнопки: у самой кнопки overflow:hidden (клип блика),
   иначе translateX(-130%) у ::before даёт «цилиндрический» артефакт слева */
.support-widget::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px solid rgba(14, 165, 233, 0.65);
    pointer-events: none;
    z-index: 0;
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.support-widget:has(.support-widget-button:hover)::after,
.support-widget:has(.support-widget-button:focus-visible)::after {
    animation: none;
    opacity: 0;
}

.scroll-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--cookie-banner-clearance, 0px));
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #38bdf8 0%, #0ea5e9 45%, #0284c7 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 10px 24px rgba(14, 165, 233, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 1.25rem;
    /* Клип блика ::before; пульс — через box-shadow (не обрезается overflow) */
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base),
        bottom var(--transition-base);
    z-index: 9998;
    animation: none;
}

.scroll-to-top i {
    font-size: 0.875rem;
    transform: translateY(0);
    transition: transform var(--transition-base);
    position: relative;
    z-index: 1;
}

.scroll-to-top::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0) 75%
    );
    transform: translateX(-130%);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.scroll-to-top:hover {
    transform: translateY(0) scale(1.06);
    box-shadow:
        0 14px 28px rgba(14, 165, 233, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(145deg, #22b7f6 0%, #0284c7 100%);
}

.scroll-to-top:hover::before {
    transform: translateX(130%);
}

.scroll-to-top:hover i {
    transform: translateY(-1px);
}

.scroll-to-top:active {
    transform: translateY(0) scale(0.97);
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: scroll-top-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

[data-theme="light"] .scroll-to-top {
    box-shadow:
        0 12px 24px rgba(2, 6, 23, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .scroll-to-top.is-visible {
    animation-name: scroll-top-pulse-light;
}

/* Пульс через box-shadow: виден при overflow:hidden (в отличие от scale-кольца) */
@keyframes scroll-top-pulse {
    0% {
        box-shadow:
            0 10px 24px rgba(14, 165, 233, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            0 0 0 0 rgba(14, 165, 233, 0.55);
    }
    70%, 100% {
        box-shadow:
            0 10px 24px rgba(14, 165, 233, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            0 0 0 10px rgba(14, 165, 233, 0);
    }
}

@keyframes scroll-top-pulse-light {
    0% {
        box-shadow:
            0 12px 24px rgba(2, 6, 23, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 0 0 0 rgba(14, 165, 233, 0.45);
    }
    70%, 100% {
        box-shadow:
            0 12px 24px rgba(2, 6, 23, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 0 0 10px rgba(14, 165, 233, 0);
    }
}

.support-widget-button {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #38bdf8 0%, #0ea5e9 45%, #0284c7 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 10px 24px rgba(14, 165, 233, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
    /* Клип блика; пульс — на .support-widget::after */
    overflow: hidden;
}

.support-widget-button i {
    z-index: 1;
    position: relative;
    transition: transform var(--transition-base);
}

.support-widget-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0) 75%
    );
    transform: translateX(-130%);
    transition: transform 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

@keyframes pulse-ring {
    0% {
        opacity: 0.85;
        transform: scale(1);
    }
    70%, 100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.support-widget-button:hover {
    transform: scale(1.1);
    box-shadow:
        0 14px 28px rgba(14, 165, 233, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(145deg, #22b7f6 0%, #0284c7 100%);
}

.support-widget-button:hover::before {
    transform: translateX(130%);
}

.support-widget-button:hover i {
    transform: translateY(-1px);
}

.support-widget-button:active {
    transform: scale(0.95);
}

.support-widget-menu {
    position: absolute;
    bottom: 4.5rem;
    right: 0;
    width: 16rem;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideUp 0.2s ease-out;
    z-index: 2;
}

[data-theme="light"] .support-widget-menu {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Page 403 — Доступ запрещён (premium layout)
   ============================================ */
.page-403 {
    --page-403-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.page-403__bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.page-403__watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(12rem, 28vw, 22rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-bg-tertiary);
    opacity: 0.65;
    user-select: none;
    letter-spacing: -0.04em;
}

[data-theme="light"] .page-403__watermark {
    color: var(--color-border-light);
    opacity: 0.55;
}

.page-403__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    pointer-events: none;
}

.page-403__orb--1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    top: -100px;
    right: -80px;
}

.page-403__orb--2 {
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    bottom: 10%;
    left: -60px;
}

[data-theme="light"] .page-403__orb {
    opacity: 0.15;
}

@keyframes page403FadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.page-403__content {
    animation: page403FadeInUp 0.5s var(--page-403-ease) 0.15s both;
}

.page-403__actions {
    animation: page403FadeInUp 0.5s var(--page-403-ease) 0.3s both;
}

/* ============================================
   Page 404 — Страница не найдена (same layout as 403)
   ============================================ */
.page-404 {
    --page-404-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.page-404__bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.page-404__watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(12rem, 28vw, 22rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-bg-tertiary);
    opacity: 0.65;
    user-select: none;
    letter-spacing: -0.04em;
}

[data-theme="light"] .page-404__watermark {
    color: var(--color-border-light);
    opacity: 0.55;
}

.page-404__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    pointer-events: none;
}

.page-404__orb--1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    top: -100px;
    right: -80px;
}

.page-404__orb--2 {
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    bottom: 10%;
    left: -60px;
}

[data-theme="light"] .page-404__orb {
    opacity: 0.15;
}

@keyframes page404FadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.page-404__content {
    animation: page404FadeInUp 0.5s var(--page-404-ease) 0.15s both;
}

.page-404__actions {
    animation: page404FadeInUp 0.5s var(--page-404-ease) 0.3s both;
}

/* ============================================
   Page 500 — Ошибка сервера (same layout as 403/404)
   ============================================ */
.page-500 {
    --page-500-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.page-500__bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.page-500__watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(12rem, 28vw, 22rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-bg-tertiary);
    opacity: 0.65;
    user-select: none;
    letter-spacing: -0.04em;
}

[data-theme="light"] .page-500__watermark {
    color: var(--color-border-light);
    opacity: 0.55;
}

.page-500__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    pointer-events: none;
}

.page-500__orb--1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    top: -100px;
    right: -80px;
}

.page-500__orb--2 {
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    bottom: 10%;
    left: -60px;
}

[data-theme="light"] .page-500__orb {
    opacity: 0.15;
}

@keyframes page500FadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.page-500__content {
    animation: page500FadeInUp 0.5s var(--page-500-ease) 0.15s both;
}

.page-500__actions {
    animation: page500FadeInUp 0.5s var(--page-500-ease) 0.3s both;
}

.support-widget-menu.hidden {
    display: none;
}

.support-widget-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-tertiary);
}

[data-theme="light"] .support-widget-menu-header {
    background-color: var(--color-surface-hover);
    border-bottom: 1px solid var(--color-border);
}

.support-widget-menu-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.support-widget-close {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-base);
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

.support-widget-close:hover {
    color: var(--color-text-primary);
}

.support-widget-menu-content {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.support-widget-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    font-size: 0.875rem;
}

.support-widget-menu-item:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-accent);
}

[data-theme="light"] .support-widget-menu-item:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-accent);
}

.support-widget-menu-item i {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Responsive adjustments for support widget + нижняя навигация (< lg) */
@media (max-width: 1023px) {
    .support-widget {
        right: 1rem;
        bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px) + var(--cookie-banner-clearance, 0px));
    }

    .scroll-to-top {
        right: 1rem;
        bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px) + var(--cookie-banner-clearance, 0px));
    }
}

@media (max-width: 640px) {
    .scroll-to-top {
        width: 3rem;
        height: 3rem;
        font-size: 1.125rem;
    }

    .support-widget::after,
    .support-widget-button {
        width: 3rem;
        height: 3rem;
    }

    .support-widget-button {
        font-size: 1.125rem;
    }
    
    .support-widget-menu {
        width: 14rem;
        bottom: 4rem;
    }
    
    .support-widget-menu-item {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
}

/* ============================================
   Мобильная нижняя навигация (app-shell)
   ============================================ */
.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30; /* Ниже overlay сайдбара (z-40) и самого сайдбара (z-50) */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    min-height: 3.5rem;
    padding: 0.25rem 0.5rem max(0.25rem, env(safe-area-inset-bottom, 0px));
    background: var(--color-bg-secondary, #0f172a);
    border-top: 1px solid var(--color-border, #334155);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .mobile-bottom-nav {
    background: #ffffff;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

.mobile-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 44px;
    min-width: 0;
    padding: 0.35rem 0.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #94a3b8);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-bottom-nav__item i {
    font-size: 1.125rem;
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:focus-visible {
    color: var(--color-accent, #0ea5e9);
    outline: none;
}

.mobile-bottom-nav__item.is-active {
    color: var(--color-accent, #0ea5e9);
}

.mobile-bottom-nav__badge {
    position: absolute;
    top: 0.15rem;
    right: calc(50% - 1.35rem);
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.mobile-bottom-nav__modules-dot {
    position: absolute;
    top: 0.2rem;
    right: calc(50% - 1.1rem);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #0ea5e9;
    box-shadow: 0 0 0 2px var(--color-bg-secondary, #0f172a);
}

[data-theme="light"] .mobile-bottom-nav__modules-dot {
    box-shadow: 0 0 0 2px #ffffff;
}

@media (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Improve button spacing on small screens */
@media (max-width: 640px) {
    .action-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .action-buttons > * {
        width: 100%;
    }
}

/* Prevent horizontal overflow on medium screens */
@media (min-width: 768px) and (max-width: 1482px) {
    .metrics-grid {
        gap: 0.5rem;
    }
    
    .metrics-card {
        padding: 0.625rem;
    }
}

/* ============================================
   Оглавление (политика, cookie) — карточка с ссылками
   ============================================ */
.policy-toc {
    background: var(--color-bg-secondary);
    padding: 1.5rem 1.5rem 1.25rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .policy-toc {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
}
.policy-toc__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 1.25rem 0;
    letter-spacing: 0.02em;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.policy-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .policy-toc__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem 1.5rem;
    }
}
.policy-toc__list li {
    margin: 0;
}
.policy-toc__list a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.policy-toc__list a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}
.policy-toc__list a:hover {
    color: var(--color-accent);
    background: var(--color-bg-tertiary);
}
.policy-toc__list a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Контейнер документа согласия (страница согласия на обработку ПДн) */
.consent-document {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .consent-document {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.consent-document a {
    text-decoration: none;
}
.consent-document a:hover {
    text-decoration: underline;
}

/* Чекбоксы согласия при регистрации (не предустанавливать checked) */
.registration-consent,
.consent-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.registration-consent input[type="checkbox"],
.consent-checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.registration-consent a,
.consent-checkbox a {
    font-weight: 500;
}

/* Password field with visibility toggle */
.password-field {
    position: relative;
}

.password-field__toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.password-field__toggle:hover {
    color: var(--color-accent);
}

.password-field__toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Work order create — ошибки количества ЗЧ */
.wo-spare-row--has-error {
    border-color: color-mix(in srgb, var(--color-error) 50%, var(--color-border)) !important;
    background-color: color-mix(in srgb, var(--color-error) 8%, var(--color-bg-secondary));
    box-shadow: inset 3px 0 0 var(--color-error);
}

.wo-spare-row--has-error input[name="spare_line_quantity"],
.wo-create-catalog-qty--error {
    border-color: var(--color-error) !important;
    background-color: color-mix(in srgb, var(--color-error) 5%, var(--color-bg-secondary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 24%, transparent);
}

.wo-create-catalog-qty--error:focus {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 38%, transparent) !important;
    outline: none;
}

.wo-spare-qty-error,
.wo-catalog-qty-error {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.75rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--color-error);
}

.wo-catalog-qty-error {
    text-align: right;
    max-width: 16rem;
}

.wo-catalog-qty-error i,
.wo-spare-qty-error i {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--color-error);
}

.wo-spare-lines-hint--error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-error) 35%, var(--color-border));
    background-color: color-mix(in srgb, var(--color-error) 9%, var(--color-bg-secondary));
    padding: 0.75rem 1rem;
    color: color-mix(in srgb, var(--color-error) 82%, var(--color-text-primary)) !important;
    font-weight: 500;
}

.wo-spare-lines-hint--error i {
    color: var(--color-error);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.wo-spare-catalog-item--qty-error {
    border-color: color-mix(in srgb, var(--color-error) 55%, var(--color-border)) !important;
    background-color: color-mix(in srgb, var(--color-error) 10%, var(--color-bg-secondary)) !important;
    box-shadow: inset 3px 0 0 var(--color-error), 0 0 0 1px color-mix(in srgb, var(--color-error) 22%, transparent);
}

.wo-spare-catalog-item--qty-error .wo-spare-catalog-balance-label {
    color: color-mix(in srgb, var(--color-error) 70%, var(--color-text-secondary));
    font-weight: 600;
}

/* ——— Модуль поддержки ——— */
.support-page {
    width: min(72rem, 100%);
    margin: 0 auto;
    min-width: 0;
}

.support-page--narrow {
    width: min(48rem, 100%);
}

.support-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.support-page__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--notification-cat-support, var(--color-accent));
}

.support-page__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.support-page__lead {
    margin: 0.4rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.support-page__lead a {
    color: var(--color-accent);
}

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

.support-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.support-page__stack {
    display: grid;
    gap: 1.25rem;
}

.support-btn,
.support-page .btn-primary.support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.6rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
}

.support-btn-ghost,
.support-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.6rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    background: color-mix(in srgb, #0f172a 28%, transparent);
    color: var(--color-text-primary);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.support-btn-ghost:hover,
.support-back:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-accent);
}

[data-theme="light"] .support-btn-ghost,
[data-theme="light"] .support-back {
    background: color-mix(in srgb, #ffffff 75%, transparent);
    border-color: var(--color-border);
}

.support-panel {
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, #94a3b8 16%, transparent);
    background:
        radial-gradient(
            ellipse 80% 50% at 0% 0%,
            color-mix(in srgb, var(--notification-cat-support, var(--color-accent)) 10%, transparent),
            transparent 55%
        ),
        color-mix(in srgb, var(--color-bg-secondary) 92%, transparent);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--notification-cat-support, #38bdf8) 10%, transparent);
    overflow: hidden;
}

[data-theme="light"] .support-panel {
    background:
        radial-gradient(
            ellipse 80% 50% at 0% 0%,
            color-mix(in srgb, var(--color-accent) 8%, transparent),
            transparent 55%
        ),
        var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.support-panel__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, #94a3b8 14%, transparent);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.support-panel__title i {
    color: var(--notification-cat-support, var(--color-accent));
}

.support-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--notification-cat-support, var(--color-accent));
    background: color-mix(in srgb, var(--notification-cat-support, var(--color-accent)) 14%, transparent);
}

.support-chip--muted {
    color: var(--color-text-secondary);
    background: color-mix(in srgb, #94a3b8 14%, transparent);
}

.support-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.support-status--pending {
    color: #fbbf24;
    background: color-mix(in srgb, #fbbf24 16%, transparent);
}

.support-status--in_progress {
    color: #60a5fa;
    background: color-mix(in srgb, #60a5fa 16%, transparent);
}

.support-status--resolved {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 16%, transparent);
}

.support-status--closed {
    color: var(--color-text-secondary);
    background: color-mix(in srgb, #94a3b8 14%, transparent);
}

[data-theme="light"] .support-status--pending {
    color: #b45309;
}

[data-theme="light"] .support-status--in_progress {
    color: #1d4ed8;
}

/* Список обращений */
.support-cards {
    display: grid;
    gap: 0.85rem;
}

.support-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, #94a3b8 16%, transparent);
    background:
        radial-gradient(
            ellipse 70% 50% at 0% 0%,
            color-mix(in srgb, var(--notification-cat-support, var(--color-accent)) 8%, transparent),
            transparent 55%
        ),
        color-mix(in srgb, var(--color-bg-secondary) 92%, transparent);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.support-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg-secondary));
}

[data-theme="light"] .support-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.support-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.support-card__subject {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.35;
}

.support-card__user,
.support-card__excerpt,
.support-card__date {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.support-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.support-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.support-card__footer {
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, #94a3b8 14%, transparent);
}

.support-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
}

.support-card__link:hover {
    text-decoration: underline;
}

.support-table-wrap {
    overflow-x: auto;
}

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

.support-table th {
    padding: 0.85rem 1.1rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid color-mix(in srgb, #94a3b8 14%, transparent);
    background: color-mix(in srgb, #0f172a 25%, transparent);
}

[data-theme="light"] .support-table th {
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}

.support-table td {
    padding: 0.95rem 1.1rem;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, #94a3b8 10%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.support-table tr:last-child td {
    border-bottom: none;
}

.support-table tbody tr {
    transition: background-color var(--transition-base);
}

.support-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

.support-table__subject {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

.support-table__excerpt {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.support-table__user-name {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

.support-table__user-email {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.support-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.support-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    background: color-mix(in srgb, #0f172a 28%, transparent);
    color: var(--color-text-secondary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.support-pager__btn:hover {
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.support-pager__btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.support-pager__label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.support-pager__label strong {
    color: var(--color-text-primary);
}

.support-empty {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    padding: 2.75rem 1.25rem;
    text-align: center;
}

.support-empty__icon {
    font-size: 2.75rem;
    color: color-mix(in srgb, var(--notification-cat-support, var(--color-accent)) 55%, transparent);
}

.support-empty__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.support-empty__text {
    margin: 0;
    max-width: 28rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* Деталь обращения */
.support-ticket-head {
    padding: 1.15rem;
}

.support-ticket-head__title {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.support-ticket-head__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.support-ticket-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

.support-ticket-head__meta i {
    margin-right: 0.3rem;
    color: var(--notification-cat-support, var(--color-accent));
}

.support-thread {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.15rem 1.25rem;
}

.support-msg {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.support-msg__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.support-msg--user .support-msg__icon {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}

.support-msg--admin .support-msg__icon {
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
}

.support-msg__body {
    min-width: 0;
    flex: 1;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, #94a3b8 14%, transparent);
    background: color-mix(in srgb, #0f172a 22%, transparent);
}

[data-theme="light"] .support-msg__body {
    background: color-mix(in srgb, var(--color-accent) 3%, #ffffff);
    border-color: var(--color-border);
}

.support-msg--admin .support-msg__body {
    border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
}

.support-msg__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.45rem;
}

.support-msg__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.support-msg__author {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.support-msg__role {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
}

.support-msg__time {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.support-msg__text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.support-form-panel .support-form,
.support-form {
    padding: 1rem 1.15rem 1.25rem;
}

.support-form__field {
    margin-bottom: 1rem;
}

.support-form__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.support-form__error,
.support-form__alert {
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-error);
}

.support-form__alert {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.support-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.support-form__help {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.support-field {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    background: color-mix(in srgb, #0f172a 35%, transparent);
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

textarea.support-field {
    min-height: 10rem;
    resize: vertical;
}

[data-theme="light"] .support-field {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.support-field:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.support-field::placeholder {
    color: var(--color-text-tertiary);
}

.support-waiting {
    display: grid;
    gap: 0.85rem;
}

.support-hint {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

.support-hint__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}

.support-hint__title {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.support-hint__text {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.support-hint__link-short {
    display: none;
}

@media (max-width: 639px) {
    .support-page__header {
        align-items: stretch;
    }

    .support-page__actions {
        width: 100%;
    }

    .support-page__actions > * {
        flex: 1;
    }

    .support-hint__link-full {
        display: none;
    }

    .support-hint__link-short {
        display: inline;
    }

    .support-cards-only {
        display: grid;
    }

    .support-table-only {
        display: none;
    }
}

@media (min-width: 1280px) {
    .support-cards-only {
        display: none;
    }

    .support-table-only {
        display: block;
    }
}

@media (max-width: 1279px) {
    .support-cards-only {
        display: grid;
    }

    .support-table-only {
        display: none;
    }
}

.agent-task-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.agent-task-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.125rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--color-text-muted, #94a3b8);
    background: color-mix(in srgb, var(--color-surface, #1e293b) 70%, transparent);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.agent-task-filter-chip:hover {
    color: var(--color-text, #e2e8f0);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    text-decoration: none;
}

.agent-task-filter-chip.is-active {
    color: #ffffff;
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.agent-task-filter-chip.is-active:hover {
    color: #ffffff;
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.agent-task-filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.agent-task-filter-chip.is-active .agent-task-filter-chip__count {
    background: color-mix(in srgb, #ffffff 22%, transparent);
    color: #ffffff;
}

[data-theme="light"] .agent-task-filter-chip {
    color: #475569;
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="light"] .agent-task-filter-chip:hover {
    color: var(--color-accent-dark, #075985);
    background: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
    border-color: color-mix(in srgb, var(--color-accent) 40%, #cbd5e1);
}

[data-theme="light"] .agent-task-filter-chip.is-active,
[data-theme="light"] .agent-task-filter-chip.is-active:hover {
    color: #ffffff;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Устаревшие chip-классы (на случай кеша шаблона) */
.agent-task-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    color: var(--color-text-muted, #94a3b8);
    background: transparent;
}
.agent-task-status-chip.is-active {
    color: #ffffff;
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.agent-task-status-chip:hover {
    text-decoration: none;
}

/* Staff: читаемый итог Cursor agent task */
.agent-task-status {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    background: var(--color-surface-muted, #e2e8f0);
    color: var(--color-text, #0f172a);
}
.agent-task-status--success {
    background: color-mix(in srgb, #16a34a 18%, transparent);
    color: #166534;
}
.agent-task-status--danger {
    background: color-mix(in srgb, #dc2626 18%, transparent);
    color: #991b1b;
}
.agent-task-status--info {
    background: color-mix(in srgb, #0284c7 18%, transparent);
    color: #075985;
}
.agent-task-status--muted {
    background: color-mix(in srgb, #64748b 18%, transparent);
    color: #334155;
}
[data-theme="dark"] .agent-task-status--success,
html.dark .agent-task-status--success,
:root .agent-task-status--success {
    background: color-mix(in srgb, #22c55e 22%, transparent);
    color: #86efac;
}
[data-theme="dark"] .agent-task-status--danger,
html.dark .agent-task-status--danger,
:root .agent-task-status--danger {
    background: color-mix(in srgb, #f87171 22%, transparent);
    color: #fecaca;
}
[data-theme="dark"] .agent-task-status--info,
html.dark .agent-task-status--info,
:root .agent-task-status--info {
    background: color-mix(in srgb, #38bdf8 22%, transparent);
    color: #bae6fd;
}
[data-theme="dark"] .agent-task-status--muted,
html.dark .agent-task-status--muted,
:root .agent-task-status--muted {
    background: color-mix(in srgb, #94a3b8 18%, transparent);
    color: #cbd5e1;
}

[data-theme="light"] .agent-task-status--success {
    background: color-mix(in srgb, #16a34a 18%, transparent);
    color: #166534;
}
[data-theme="light"] .agent-task-status--danger {
    background: color-mix(in srgb, #dc2626 18%, transparent);
    color: #991b1b;
}
[data-theme="light"] .agent-task-status--info {
    background: color-mix(in srgb, #0284c7 18%, transparent);
    color: #075985;
}
[data-theme="light"] .agent-task-status--muted {
    background: color-mix(in srgb, #64748b 14%, transparent);
    color: #475569;
}

/* Метка QA-доработки в истории запусков */
.agent-task-rework-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #fbbf24;
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
}

[data-theme="light"] .agent-task-rework-badge {
    background: color-mix(in srgb, #d97706 14%, transparent);
    color: #92400e;
    border-color: color-mix(in srgb, #d97706 35%, transparent);
}

.agent-task-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.75rem;
}
.agent-task-meta-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #64748b) 28%, transparent);
    background: color-mix(in srgb, var(--color-surface-muted, #e2e8f0) 55%, transparent);
}
.agent-task-meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted, #64748b);
}
.agent-task-meta-value {
    font-size: 0.92rem;
    line-height: 1.35;
    word-break: break-word;
}
.agent-task-meta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-link, #0284c7);
    font-weight: 600;
    text-decoration: none;
}
.agent-task-meta-link:hover {
    text-decoration: underline;
}
[data-theme="dark"] .agent-task-meta-card,
html.dark .agent-task-meta-card {
    background: color-mix(in srgb, #334155 70%, transparent);
}

.agent-result-panel {
    padding: 1rem 1.05rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #64748b) 24%, transparent);
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, var(--color-surface-muted, #e2e8f0));
}
[data-theme="dark"] .agent-result-panel,
html.dark .agent-result-panel {
    background: color-mix(in srgb, #0f172a 88%, #1e293b);
}

.agent-result-body {
    color: var(--color-text, #1e293b);
    font-size: 0.95rem;
    line-height: 1.65;
}
[data-theme="dark"] .agent-result-body,
html.dark .agent-result-body {
    color: #e2e8f0;
}
.agent-result-body > :first-child {
    margin-top: 0;
}
.agent-result-body h2,
.agent-result-body h3,
.agent-result-body h4 {
    color: inherit;
    font-weight: 700;
    margin: 1.25rem 0 0.5rem;
    line-height: 1.3;
}
.agent-result-body h2 { font-size: 1.2rem; }
.agent-result-body h3 { font-size: 1.05rem; }
.agent-result-body h4 { font-size: 1rem; }
.agent-result-body p {
    margin: 0.65rem 0;
}
.agent-result-body a {
    color: var(--color-link, #0284c7);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    word-break: break-word;
}
.agent-result-body a:hover {
    color: color-mix(in srgb, var(--color-link, #0284c7) 82%, #0f172a);
}
.agent-result-hr {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #64748b) 35%, transparent);
    margin: 1rem 0;
}
.agent-result-blockquote {
    margin: 0.75rem 0;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid color-mix(in srgb, var(--color-link, #0284c7) 55%, transparent);
    border-radius: 0 0.5rem 0.5rem 0;
    background: color-mix(in srgb, var(--color-surface-muted, #e2e8f0) 45%, transparent);
    color: inherit;
}
.agent-result-list {
    margin: 0.5rem 0 0.75rem 1.15rem;
    padding: 0;
    list-style: disc;
}
.agent-result-body ol.agent-result-list {
    list-style: decimal;
}
.agent-result-list li {
    margin: 0.35rem 0;
    padding-left: 0.15rem;
}
.agent-result-task-list {
    list-style: none;
    margin-left: 0;
}
.agent-result-task {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.agent-result-task-mark {
    flex: 0 0 auto;
    width: 1.1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-muted, #64748b);
}
.agent-result-task--done .agent-result-task-mark {
    color: #16a34a;
}
.agent-result-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    background: color-mix(in srgb, #64748b 16%, transparent);
}
.agent-result-code {
    display: block;
    overflow-x: auto;
    margin: 0.85rem 0;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    background: #0f172a;
    color: #e2e8f0;
}
[data-theme="light"] .agent-result-code {
    background: #0f172a;
    color: #e2e8f0;
}
.agent-result-table-wrap {
    overflow-x: auto;
    margin: 0.85rem 0;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, #64748b 28%, transparent);
}
.agent-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.agent-result-table th,
.agent-result-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, #64748b 22%, transparent);
    vertical-align: top;
}
.agent-result-table th {
    font-weight: 600;
    background: color-mix(in srgb, #64748b 10%, transparent);
}
.agent-result-table tr:last-child td {
    border-bottom: 0;
}
.agent-result-error {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, #dc2626 35%, transparent);
    background: color-mix(in srgb, #dc2626 10%, transparent);
    color: #991b1b;
}
[data-theme="dark"] .agent-result-error,
html.dark .agent-result-error {
    color: #fecaca;
}

/* Respect reduced motion preferences globally */
@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;
    }
}