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

/* Font optimization - font-display: swap для всех внешних шрифтов */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap;
}

/* Preload Font Awesome fonts to reduce render-blocking */
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-display: swap;
}

/* ============================================
   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%;
}

/* 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="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="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);
}

[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);
}

/* 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;
}

.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);
    }
}

/* Зоны нажатия ≥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;
}

/* 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;
}

/* Свёрнутый стек: одна карточка сверху, остальные «веером» сзади */
.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: 639px) {
    .notification-toast-stack {
        left: 0.75rem;
        bottom: calc(4.75rem + 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"],
    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;
}

/* Task cards: wrap long text by words, not letter-by-letter on narrow screens */
.task-card-text {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    max-width: 100%;
    min-width: 0;
}

/* 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-баннером, если он есть (--cookie-banner-clearance) */
    bottom: calc(1.5rem + var(--cookie-banner-clearance, 0px));
    z-index: 9999;
    transition: bottom var(--transition-base);
}

.scroll-to-top {
    position: fixed;
    right: 1.5rem;
    /* Зазор над cookie-баннером, если он есть (--cookie-banner-clearance) */
    bottom: calc(1.5rem + 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;
    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);
}

@keyframes scroll-top-pulse {
    0% {
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5), 0 0 0 0 rgba(14, 165, 233, 0.55);
    }
    50% {
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5), 0 0 0 9px rgba(14, 165, 233, 0);
    }
    100% {
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5), 0 0 0 0 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),
        0 0 0 0 rgba(14, 165, 233, 0.7);
    transition: all var(--transition-base);
    font-size: 1.25rem;
    position: relative;
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    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;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5), 0 0 0 0 rgba(14, 165, 233, 0.7);
    }
    50% {
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5), 0 0 0 8px rgba(14, 165, 233, 0);
    }
    100% {
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5), 0 0 0 0 rgba(14, 165, 233, 0);
    }
}

.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),
        0 0 0 0 rgba(14, 165, 233, 0.7);
    background: linear-gradient(145deg, #22b7f6 0%, #0284c7 100%);
    animation: none;
}

.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;
}

[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.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-base);
    font-size: 0.875rem;
}

.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 */
@media (max-width: 640px) {
    .support-widget {
        right: 1rem;
        bottom: calc(1rem + var(--cookie-banner-clearance, 0px));
    }

    .scroll-to-top {
        right: 1rem;
        bottom: calc(1rem + var(--cookie-banner-clearance, 0px));
        width: 3rem;
        height: 3rem;
        font-size: 1.125rem;
    }
    
    .support-widget-button {
        width: 3rem;
        height: 3rem;
        font-size: 1.125rem;
    }
    
    .support-widget-menu {
        width: 14rem;
        bottom: 4rem;
    }
    
    .support-widget-menu-item {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
}

/* 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.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    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;
    }
}

/* 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;
    }
}