:root {
    --bg-dark: #05080c;
    --bg-surface: rgba(255, 255, 255, 0.02);
    --bg-card: rgba(255, 255, 255, 0.04);
    --border-color: rgba(255, 255, 255, 0.08);
    --accent-primary: #06b6d4;
    --accent-secondary: #8b5cf6;
    --text-main: #eef2f4;
    --text-muted: #93a1ab;

    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    --gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-elevation: 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 8px 24px rgba(6, 182, 212, 0.18);

    --bg-card-element: rgba(8, 13, 19, 0.95);
    --bg-day-card: rgba(0, 0, 0, 0.15);
    --bg-tabs: rgba(0, 0, 0, 0.2);
    --bg-controls: rgba(0, 0, 0, 0.15);
    --bg-shift-item: rgba(255, 255, 255, 0.02);
    --border-shift-item: rgba(255, 255, 255, 0.04);
    --bg-market-item: rgba(0, 0, 0, 0.1);
    --bg-dropdown: #0a1016;
    --bg-modal: rgba(7, 11, 16, 0.98);
    --bg-backdrop: rgba(2, 4, 6, 0.82);
    --bg-comment: rgba(255, 255, 255, 0.03);
    --border-comment: rgba(255, 255, 255, 0.06);
    --text-comment: #e5e7eb;
    --bg-party: rgba(255, 255, 255, 0.01);
    --border-party: rgba(255, 255, 255, 0.03);
    --gradient-body: radial-gradient(circle at top, #0b1c22 0%, var(--bg-dark) 100%);
}

.light-theme {
    --bg-dark: #f8fafc;
    --bg-surface: rgba(0, 0, 0, 0.02);
    --bg-card: rgba(0, 0, 0, 0.03);
    --bg-card-element: rgba(255, 255, 255, 0.85);
    --border-color: rgba(0, 0, 0, 0.08);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --bg-day-card: rgba(255, 255, 255, 0.6);
    --bg-tabs: rgba(0, 0, 0, 0.04);
    --bg-controls: rgba(0, 0, 0, 0.04);
    --bg-shift-item: rgba(0, 0, 0, 0.01);
    --border-shift-item: rgba(0, 0, 0, 0.04);
    --bg-market-item: rgba(0, 0, 0, 0.02);
    --bg-dropdown: #ffffff;
    --bg-modal: rgba(255, 255, 255, 0.98);
    --bg-backdrop: rgba(15, 23, 42, 0.4);
    --bg-comment: rgba(0, 0, 0, 0.02);
    --border-comment: rgba(0, 0, 0, 0.04);
    --text-comment: #1e293b;
    --bg-party: rgba(0, 0, 0, 0.02);
    --border-party: rgba(0, 0, 0, 0.04);
    --gradient-body: radial-gradient(circle at top, #e7f3f5 0%, var(--bg-dark) 100%);
}

.pink-theme {
    --bg-dark: #fff0f5;
    --bg-surface: rgba(219, 39, 119, 0.05);
    --bg-card: rgba(219, 39, 119, 0.08);
    --bg-card-element: rgba(255, 255, 255, 0.9);
    --border-color: rgba(219, 39, 119, 0.15);
    --text-main: #4a042e;
    --text-muted: #8b3a62;
    --bg-day-card: rgba(255, 255, 255, 0.7);
    --bg-tabs: rgba(219, 39, 119, 0.1);
    --bg-controls: rgba(219, 39, 119, 0.08);
    --bg-shift-item: rgba(219, 39, 119, 0.03);
    --border-shift-item: rgba(219, 39, 119, 0.08);
    --bg-market-item: rgba(219, 39, 119, 0.06);
    --bg-dropdown: #ffffff;
    --bg-modal: rgba(255, 255, 255, 0.98);
    --bg-backdrop: rgba(74, 4, 46, 0.4);
    --bg-comment: rgba(219, 39, 119, 0.04);
    --border-comment: rgba(219, 39, 119, 0.08);
    --text-comment: #5c053a;
    --bg-party: rgba(219, 39, 119, 0.05);
    --border-party: rgba(219, 39, 119, 0.08);
    --gradient-body: radial-gradient(circle at top, #ffd1dc 0%, var(--bg-dark) 100%);
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--gradient-body);
    background-attachment: fixed;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100dvh;
    width: 100%;
    width: 100dvw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Кастомный скроллбар */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.container { 
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#loginScreen {
    margin: auto;
    max-width: 420px;
    width: calc(100% - 32px);
    box-sizing: border-box;
}

h1, h2, h3, h4 {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 0;
}

.card {
    background: var(--bg-card-element);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-elevation);
    margin-bottom: 24px;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, rgba(6, 182, 212, 0.25), rgba(255, 255, 255, 0) 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.text-center { text-align: center; }
.hidden { display: none !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Кнопки */
button,
.btn-shift-action,
.btn-off-duty,
.day-card,
.click-day-cell,
.tabs button,
.select-item,
.user-profile-badge {
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease, opacity 0.15s ease;
}

button {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    background: var(--gradient-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

@media (hover: hover) {
    button:hover { 
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(6, 182, 212, 0.35);
        filter: brightness(1.1);
    }
}

button:active {
    transform: scale(0.96) !important;
    opacity: 0.9;
}

.btn-danger { 
    background: var(--gradient-danger); 
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

@media (hover: hover) {
    .btn-danger:hover {
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
    }
}

.btn-success { 
    background: var(--gradient-success); 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

@media (hover: hover) {
    .btn-success:hover {
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
    }
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

@media (hover: hover) {
    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }
}

/* Профиль шапки */
.user-profile-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid transparent;
}
@media (hover: hover) {
    .user-profile-badge:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--border-color);
    }
}
.user-profile-badge:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.03);
}
.header-avatar-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-primary);
}
.header-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.has-badges-wrapper {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.has-badges-wrapper img {
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.header-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 18px;
}
.user-profile-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.user-profile-info h3,
.user-profile-info small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
@media (max-width: 768px) {
    .user-profile-info h3,
    .user-profile-info small {
        max-width: 100%;
    }
}
.badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
    margin-top: 4px;
}
.badge-admin { 
    background: rgba(139, 92, 246, 0.2); 
    color: #d8b4fe; 
    border: 1px solid rgba(139, 92, 246, 0.4);
}

#appScreen {
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    width: 100%;
    width: 100dvw;
    overflow: hidden;
    position: relative;
}

#view-schedule, #view-market, #view-exchange, #view-admin, #view-quests, #view-shop, #view-faq {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 40px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- ШТОРКА НАВИГАЦИИ (DRAWER) --- */
.tabs { 
    display: flex; 
    flex-direction: column;
    background: rgba(7, 12, 18, 0.98); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: calc(30px + var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px 16px; 
    border: none;
    border-right: 1px solid var(--border-color);
    gap: 8px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    height: 100dvh;
    z-index: 1200;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
}

.tabs.open {
    left: 0;
}

/* Staggered entry for drawer items when opened */
.tabs.open button {
    animation: drawerItemFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.tabs.open button:nth-child(2) { animation-delay: 0.04s; }
.tabs.open button:nth-child(3) { animation-delay: 0.08s; }
.tabs.open button:nth-child(4) { animation-delay: 0.12s; }
.tabs.open button:nth-child(5) { animation-delay: 0.16s; }
.tabs.open button:nth-child(6) { animation-delay: 0.2s; }

@keyframes drawerItemFadeIn {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tabs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.tabs-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-close-drawer {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-drawer:hover {
    color: var(--text-main);
}

.tabs button { 
    width: 100%;
    background: transparent; 
    color: var(--text-muted); 
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    height: 48px;
    border: 1px solid transparent;
}

@media (hover: hover) {
    .tabs button:hover { 
        color: var(--text-main);
        background: rgba(255, 255, 255, 0.04);
        box-shadow: none;
        transform: translateX(4px);
    }
}

.tabs button:active {
    opacity: 0.7;
    transform: scale(0.98) !important;
}

.tabs button.active { 
    background: rgba(6, 182, 212, 0.15); 
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.tabs button .svg-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    transition: transform 0.2s, filter 0.2s;
}

.tabs button.active .svg-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px var(--accent-primary));
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.light-theme .tabs {
    background: rgba(255, 255, 255, 0.98);
}

.light-theme .tabs button.active {
    background: rgba(6, 182, 212, 0.1);
}

/* --- ПРАВАЯ ШТОРКА ПРОФИЛЯ (PROFILE DRAWER) --- */
.profile-drawer {
    left: auto !important;
    right: -320px;
    width: 320px;
    max-width: 100vw;
    border-right: none !important;
    border-left: 1px solid var(--border-color);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.profile-drawer.open {
    right: 0 !important;
    left: auto !important;
}

/* Staggered entry for profile drawer items when opened */
.profile-drawer.open .profile-drawer-content > * {
    animation: profileItemFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.profile-drawer.open .profile-drawer-content > *:nth-child(1) { animation-delay: 0.04s; }
.profile-drawer.open .profile-drawer-content > *:nth-child(2) { animation-delay: 0.08s; }
.profile-drawer.open .profile-drawer-content > *:nth-child(3) { animation-delay: 0.12s; }
.profile-drawer.open .profile-drawer-content > *:nth-child(4) { animation-delay: 0.16s; }

@keyframes profileItemFadeIn {
    from {
        opacity: 0;
        transform: translateX(15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.profile-drawer-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 20px;
    margin-top: 10px;
}

.svg-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    fill: currentColor;
    vertical-align: middle;
}

/* Процедурные line-иконки (замена эмодзи) */
.icon {
    width: 17px;
    height: 17px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -3px;
    color: currentColor;
}
.icon-lg { width: 22px; height: 22px; }
.icon-sm { width: 14px; height: 14px; }
.icon-accent { color: var(--accent-primary); }

/* --- КАЛЕНДАРЬ --- */
.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.month-navigation {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-controls);
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.month-navigation span {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    min-width: 140px;
    text-align: center;
}
.btn-nav {
    background: transparent;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--text-main);
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 6px;
}
@media (hover: hover) {
    .btn-nav:hover {
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
        transform: none;
    }
}
.btn-nav:active {
    background: rgba(255, 255, 255, 0.08);
}
.period-selector {
    display: flex;
    background: var(--bg-controls);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    gap: 4px;
}
.btn-period {
    background: transparent;
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}
@media (hover: hover) {
    .btn-period:hover {
        background: rgba(255, 255, 255, 0.02);
        box-shadow: none;
        transform: none;
    }
}
.btn-period:active {
    transform: scale(0.97);
}
.btn-period.active {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.15);
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 24px;
    margin-top: 10px;
}

#calendarGrid {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) transparent;
}

#calendarGrid::-webkit-scrollbar {
    height: 8px;
}

#calendarGrid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

#calendarGrid::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 4px;
}

#calendarGrid::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

#calendarGrid .day-card {
    width: 320px;
    max-width: calc(100vw - 32px);
    flex-shrink: 0;
    scroll-snap-align: start;
}

.day-card {
    background: var(--bg-day-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
    min-height: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
    .day-card:hover {
        transform: translateY(-2px);
        border-color: rgba(6, 182, 212, 0.3);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        background: var(--bg-surface);
    }
}
.day-card:active {
    transform: scale(0.99);
}
.day-card.today {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
    background: rgba(6, 182, 212, 0.02);
}
.day-card.today .day-number {
    font-size: 28px;
}
.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}
.day-header.weekend .day-number {
    color: var(--danger);
}
.day-number {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}
.day-name {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.today-badge {
    background: var(--accent-primary);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Уведомление о нехватке персонала */
.staffing-warning {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.warning-tag {
    font-size: 10px;
    font-weight: 600;
    color: #fca5a5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.day-shifts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    margin-bottom: 12px;
}
.no-shifts {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin: auto;
    font-style: italic;
}

/* Карточка смены */
.shift-card-item {
    background: var(--bg-shift-item);
    border: 1px solid var(--border-shift-item);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    overflow: visible;
}
.shift-employee-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    flex-grow: 1;
}
.shift-avatar, .shift-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.shift-avatar-placeholder {
    background: var(--gradient-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
}
.shift-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.shift-employee-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
    display: block;
}
.role-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 6px;
    width: fit-content;
    margin-top: 2px;
}
.role-cook {
    background: rgba(6, 182, 212, 0.15);
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.3);
}
.role-cashier {
    background: rgba(6, 182, 212, 0.15);
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.3);
}
.role-other {
    background: rgba(156, 163, 175, 0.15);
    color: #e5e7eb;
    border: 1px solid rgba(156, 163, 175, 0.3);
}
.btn-shift-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-main);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (hover: hover) {
    .btn-shift-action:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }
}
.btn-shift-action:active {
    transform: scale(0.95);
}
.light-theme .btn-shift-action {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--text-main) !important;
}
@media (hover: hover) {
    .light-theme .btn-shift-action:hover {
        background: rgba(0, 0, 0, 0.07) !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
    }
}
.shift-status {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 4px;
    flex-shrink: 0;
}
.status-market {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.status-pending {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.btn-add-day-shift {
    background: rgba(255, 255, 255, 0.01);
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    padding: 8px;
    font-size: 12px;
    border-radius: 10px;
    width: 100%;
    margin-top: auto;
    box-shadow: none;
}
.btn-add-day-shift:hover {
    background: rgba(6, 182, 212, 0.05);
    border-color: var(--accent-primary);
    color: white;
    box-shadow: none;
    transform: none;
}

/* --- БИРЖА СМЕН --- */
.shift-list { list-style: none; padding: 0; margin: 0; }
.shift-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-market-item);
    margin-bottom: 12px;
    border-radius: 12px;
    gap: 16px;
}
.shift-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--bg-surface);
}
.market-shift-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.market-date {
    font-size: 15px;
    font-weight: 600;
}
.market-role {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent-secondary);
}
.market-owner {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- ЗАЯВКИ АДМИНА --- */
.request-item {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.request-direction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.request-party {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
    background: var(--bg-party);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-party);
}
.request-party-details {
    display: flex;
    flex-direction: column;
}
.request-party-details strong {
    font-size: 13px;
}
.request-party-details small {
    font-size: 10px;
    color: var(--text-muted);
}
.request-arrow {
    font-size: 20px;
    color: var(--accent-primary);
}
.request-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}
.no-requests {
    text-align: center;
    color: var(--text-muted);
    padding: 30px;
    font-style: italic;
}

/* --- МОДАЛЬНЫЕ ОКНА (DIALOG) --- */
.glass-modal {
    background: var(--bg-modal);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0;
    color: var(--text-main);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    max-width: 450px;
    width: calc(100% - 32px);
    box-sizing: border-box;
    outline: none;
    
    /* Premium Opening Transitions */
    opacity: 0;
    transform: scale(0.96) translateY(12px);
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                display 0.35s allow-discrete;
}
.glass-modal[open] {
    transform: scale(1) translateY(0);
    opacity: 1;
}
@starting-style {
    .glass-modal[open] {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
}
dialog::backdrop {
    background: var(--bg-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, display 0.3s allow-discrete;
}
dialog[open]::backdrop {
    opacity: 1;
}
@starting-style {
    dialog[open]::backdrop {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
}
.modal-content {
    padding: 28px;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0;
    padding-bottom: 14px;
}
.modal-header h3 {
    margin: 0;
    font-size: 20px;
}
.btn-close-modal {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    box-shadow: none;
}
.btn-close-modal:hover {
    color: white;
    background: transparent;
    transform: none;
    box-shadow: none;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 18px;
}

.form-group {
    margin-bottom: 18px;
    position: relative;
}
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.form-group input, .form-group select {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
    background: var(--bg-surface);
}

/* Загрузка аватара */
.avatar-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}
.avatar-preview-wrapper {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px dashed var(--border-color);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
}
.avatar-preview-wrapper:hover {
    border-color: var(--accent-primary);
}
.profile-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-preview-placeholder {
    font-family: 'Outfit', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--text-muted);
}
.avatar-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}
.avatar-hover-overlay span {
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.avatar-preview-wrapper:hover .avatar-hover-overlay {
    opacity: 1;
}
.upload-hint {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Выпадающий список выбора сотрудника */
.custom-select-wrapper {
    position: relative;
}
.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}
.select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
}
.select-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.select-checkbox {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}
.select-avatar, .select-avatar-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.select-avatar-placeholder {
    background: var(--gradient-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}
.select-user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
}
.select-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.select-user-email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.no-users {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 14px;
    font-size: 13px;
}

/* Выделенные важные даты */
.day-card.day-card-important {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: rgba(239, 68, 68, 0.04) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.1) !important;
}
.day-card.day-card-info {
    border-color: rgba(59, 130, 246, 0.45) !important;
    background: rgba(59, 130, 246, 0.04) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.1) !important;
}
.day-card.day-card-success {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: rgba(16, 185, 129, 0.04) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1) !important;
}

/* Комментарии к датам на календаре */
.day-comment {
    background: var(--bg-comment);
    border: 1px solid var(--border-comment);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-comment);
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
}

/* Кнопка настроек даты для админа */
.btn-edit-day-config:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

/* Красные индикаторы (точки) на вкладках */
.badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--danger);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 8px var(--danger);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px var(--danger); }
    100% { transform: scale(0.9); opacity: 0.6; }
}

/* Стили для выбора дней недели в быстром планировании */
.weekday-select-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-shift-item);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}
.weekday-select-label:hover {
    background: var(--bg-surface);
    border-color: rgba(255, 255, 255, 0.15);
}
.weekday-select-label input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* Стили для ячеек быстрого планирования кликами */
.click-day-cell {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-day-card);
    justify-content: flex-start;
}
.click-day-cell:hover {
    background: var(--bg-surface);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --- СТИЛИ ДЛЯ ГРУППИРОВКИ ПО ДОЛЖНОСТЯМ --- */
.role-group {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 6px;
}
.light-theme .role-group {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(0, 0, 0, 0.03);
}
.role-group-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 2px;
}
.light-theme .role-group-header {
    border-bottom-color: rgba(0, 0, 0, 0.04);
}
.role-group-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- КНОПКА "КТО ВЫХОДНОЙ?" --- */
.btn-off-duty {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    padding: 8px 10px;
    border-radius: 8px;
    width: 100%;
    margin-top: auto;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.light-theme .btn-off-duty {
    background: rgba(0, 0, 0, 0.02);
}
.btn-off-duty:hover {
    background: rgba(6, 182, 212, 0.08);
    border-color: var(--accent-primary);
    color: var(--text-main);
    transform: translateY(-1px);
}

/* --- КЛАССЫ ДЛЯ РЕПОРТАЖА ШАПКИ --- */
.header-card {
    padding: 16px 24px;
}

/* --- МЕДИА-ЗАПРОСЫ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ --- */
@media (max-width: 768px) {
    body {
        padding: 0;
    }
    
    .container {
        padding-bottom: 0;
        height: 100%;
    }
    
    .header-card {
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        padding-top: calc(8px + var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px))) !important;
        padding-bottom: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        height: calc(56px + var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px))) !important;
        border-radius: 0;
        background: rgba(7, 12, 18, 0.4) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    
    .light-theme .header-card {
        background: rgba(255, 255, 255, 0.4) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    
    .user-profile-badge {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 4px;
        gap: 8px;
        background: transparent;
        border: none;
    }
    
    .user-profile-badge:hover {
        background: transparent;
        border-color: transparent;
    }
    
    .user-profile-info {
        align-items: flex-start;
    }
    
    .user-profile-info small,
    .user-profile-info div {
        display: none !important;
    }
    
    .user-profile-info h3 {
        font-size: 13px !important;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    .header-avatar-wrapper {
        border-width: 1.5px !important;
    }
    
    .header-card div:last-child {
        gap: 6px !important;
    }
    
    .header-card button {
        padding: 0 !important; /* Set to 0 to ensure centering with flex */
        border-radius: 50% !important;
        width: 36px;
        height: 36px;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0 !important; /* Hide text */
        gap: 0 !important; /* Clear gap for centering icon */
    }

    .header-card button .btn-text {
        display: none !important;
    }
    
    .header-card button svg,
    .header-card button .svg-icon {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
    
    .badge {
        justify-content: center;
    }
    
    .calendar-controls {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .month-navigation, .period-selector {
        flex: 1;
        justify-content: center;
        padding: 4px;
    }
    
    .month-navigation span {
        font-size: 14px;
        min-width: 80px;
    }
    
    .btn-period {
        flex: 1;
        text-align: center;
        padding: 6px;
        font-size: 11px;
    }
    
    /* Сетка планирования кликами в модалке */
    .click-schedule-layout {
        flex-direction: column;
        gap: 16px;
    }
    
    .click-schedule-sidebar {
        width: 100%;
    }
    
    .click-schedule-grid-container {
        width: 100%;
    }

    .day-card {
        width: 100% !important;
        min-height: auto;
        padding: 12px;
    }
    
    /* МОДАЛЬНЫЕ ОКНА КАК БОТОМ-ШИТЫ НА МОБИЛЬНОМ */
    .glass-modal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-width: 100%;
        width: 100%;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        border-left: none;
        border-right: none;
        margin: 0 !important;
        inset: auto 0px 0px 0px !important;
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                    display 0.35s allow-discrete;
        max-height: 85vh;
        overflow-y: auto;
        padding-bottom: calc(16px + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important;
    }
    
    .glass-modal[open] {
        transform: translateY(0);
    }
    
    @starting-style {
        .glass-modal[open] {
            transform: translateY(100%);
        }
    }
    
    .glass-modal::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        margin: 8px auto 0;
    }

    .modal-content {
        padding: 16px 20px 24px;
    }
    
    .modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }
    
    .modal-footer button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-content {
        padding: 12px 16px 20px;
    }
    
    .day-number {
        font-size: 18px;
    }
}

/* --- СТИЛИ ДЛЯ СВЕТЛОЙ ТЕМЫ (ЧИТАЕМОСТЬ) --- */
.light-theme .role-cook {
    background: rgba(6, 182, 212, 0.12) !important;
    color: #0891b2 !important;
    border-color: rgba(6, 182, 212, 0.25) !important;
}
.light-theme .role-cashier {
    background: rgba(6, 182, 212, 0.12) !important;
    color: #0891b2 !important;
    border-color: rgba(6, 182, 212, 0.25) !important;
}
.light-theme .role-other {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
}

.light-theme .warning-tag {
    color: #b91c1c !important;
}
.light-theme .staffing-warning {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.light-theme .status-market {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}
.light-theme .status-pending {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

.light-theme .form-group input, 
.light-theme .form-group select {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
.light-theme .form-group input:focus, 
.light-theme .form-group select:focus {
    border-color: var(--accent-primary) !important;
    background: #ffffff !important;
}
.light-theme .custom-select-dropdown {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
.light-theme .select-item:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}
.light-theme .select-user-name {
    color: #0f172a !important;
}
.light-theme .select-user-email {
    color: #64748b !important;
}

/* --- НОВЫЕ КЛАССЫ СТИЛЕЙ --- */
.badge-hours {
    background: rgba(6, 182, 212, 0.15);
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.3);
}
.light-theme .badge-hours {
    background: rgba(6, 182, 212, 0.1) !important;
    color: #0891b2 !important;
    border-color: rgba(6, 182, 212, 0.2) !important;
}
.badge-earnings {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.light-theme .badge-earnings {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}
.paper-theme .badge-earnings {
    background: rgba(39, 174, 96, 0.1) !important;
    color: #27ae60 !important;
    border: 1.5px dashed rgba(39, 174, 96, 0.3) !important;
}

/* --- Рекламный баннер --- */
.promo-banner-card {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.12);
    line-height: 0;
}
.promo-banner-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Блок Google AdSense (под рекламным баннером локации) --- */
.ad-banner-card {
    position: relative;
    margin-bottom: 16px;
    padding: 18px 10px 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    min-height: 60px;
}
.ad-banner-label {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.55;
    pointer-events: none;
}
.ad-banner-card .adsbygoogle {
    display: block;
    width: 100%;
}

/* --- Партнёрская вставка (показывается в Telegram вместо Google) --- */
.partner-insert {
    --partner-accent: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
    text-decoration: none;
    color: var(--text-main);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.partner-insert-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    overflow: hidden;
    /* запасные значения для старых веб-вью без color-mix */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--partner-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--partner-accent) 30%, transparent);
}
.partner-insert-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.partner-insert-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.partner-insert-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}
.partner-insert-text {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}
.partner-insert-cta {
    flex-shrink: 0;
    align-self: center;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--partner-accent);
    transition: filter 0.2s, transform 0.15s;
}
.partner-insert:hover .partner-insert-cta {
    filter: brightness(1.12);
}
.partner-insert:active .partner-insert-cta {
    transform: scale(0.97);
}

/* На узких экранах кнопка уезжает под текст, чтобы заголовок не сжимался */
@media (max-width: 420px) {
    .partner-insert {
        flex-wrap: wrap;
    }
    .partner-insert-cta {
        width: 100%;
        /* палец должен попадать по кнопке: минимум 44px по высоте */
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.banner-upload-zone {
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}
.banner-upload-zone:hover {
    border-color: var(--accent-primary);
    background: rgba(6, 182, 212, 0.06);
}
.banner-preview-wrap {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.banner-preview-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.cohort-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%) !important;
    border: 1px solid rgba(6, 182, 212, 0.2) !important;
    margin-bottom: 20px;
    padding: 16px 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.04) !important;
}
.light-theme .cohort-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%) !important;
    border-color: rgba(6, 182, 212, 0.15) !important;
}

.cohort-header {
    margin: 0;
    font-size: 13px;
    color: #67e8f9;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.light-theme .cohort-header {
    color: #0891b2 !important;
}

.coworker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}
.light-theme .coworker-badge {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
    color: var(--text-main) !important;
}

.btn-demo-admin {
    border-color: var(--accent-secondary) !important;
    color: #d8b4fe !important;
}
.light-theme .btn-demo-admin {
    color: #7e22ce !important;
}

.click-shift-badge {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
}
.light-theme .click-shift-badge {
    background: rgba(0, 0, 0, 0.03);
}

.light-theme .click-day-cell {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #cbd5e1 !important;
}
.light-theme .click-day-cell:hover {
    border-color: var(--accent-primary) !important;
}
.light-theme .click-sch-user-label:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* =============================================
   СИСТЕМА НАГРАД — ОРБИТАЛЬНЫЕ ЗНАЧКИ
   ============================================= */

/* Контейнер аватарки с орбитой */
.avatar-orbit-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Орбитальное кольцо */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Один орбитальный значок */
.orbit-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
}

.orbit-badge img,
.orbit-badge svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

/* Разные размеры орбит */
.orbit-sm .orbit-badge {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    font-size: 10px;
    filter: drop-shadow(0 0 3px rgba(255,215,0,0.7));
}
.orbit-sm {
    width: 68px;
    height: 68px;
}
.orbit-md .orbit-badge {
    width: 22px;
    height: 22px;
    margin-top: -11px;
    margin-left: -11px;
    font-size: 15px;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.8));
}
.orbit-md {
    width: 80px;
    height: 80px;
}
.orbit-lg .orbit-badge {
    width: 28px;
    height: 28px;
    margin-top: -14px;
    margin-left: -14px;
    font-size: 20px;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.9));
}
.orbit-lg {
    width: 130px;
    height: 130px;
}

/* Анимации вращения — разная скорость для каждого */
@keyframes orbit-cw {
    from { transform: rotate(0deg) translateX(calc(var(--orbit-r, 27px))) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(calc(var(--orbit-r, 27px))) rotate(-360deg); }
}
@keyframes orbit-ccw {
    from { transform: rotate(0deg) translateX(calc(var(--orbit-r, 27px))) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(calc(var(--orbit-r, 27px))) rotate(360deg); }
}

.orbit-badge.spin-cw  { animation: orbit-cw  var(--orbit-speed, 6s) linear infinite; will-change: transform; }
.orbit-badge.spin-ccw { animation: orbit-ccw var(--orbit-speed, 8s) linear infinite; will-change: transform; }

/* Пульсация ореола вокруг аватарки с наградами */
@keyframes halo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.0), 0 0 8px rgba(255, 215, 0, 0.15); }
    50%  { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18), 0 0 14px rgba(255, 215, 0, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.0), 0 0 8px rgba(255, 215, 0, 0.15); }
}
.has-badges {
    animation: halo-pulse 2.5s ease-in-out infinite;
    border-color: rgba(255, 215, 0, 0.6) !important;
}

/* --- Менеджер наград администратора --- */
.awards-manager-section {
    margin-top: 28px;
}

.award-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.award-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    user-select: none;
}
.award-item-card:hover {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.1);
}
.award-item-card.selected {
    border-color: rgba(255, 215, 0, 0.7);
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
.award-icon {
    font-size: 24px;
    line-height: 1;
}
.award-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}
.award-item-card .award-delete-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: rgba(239, 68, 68, 0.8);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
    min-width: 0;
}
.award-item-card:hover .award-delete-btn {
    display: flex;
}
.award-delete-btn:hover {
    background: rgba(239, 68, 68, 1) !important;
    transform: scale(1.1) !important;
}

/* Строка назначения награды пользователю */
.user-award-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
}
.user-award-badges-strip {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}
.user-award-badge-pill {
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.15s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.user-award-badge-pill img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}
.user-award-badge-pill:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    transform: scale(1.15);
}
.user-award-badge-pill.empty {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    border: 1px dashed var(--border-color);
    padding: 2px 8px;
}

/* Анимация появления значка */
@keyframes badge-pop {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.badge-pop-anim {
    animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Панель загрузки PNG */
.award-upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-surface);
}
.award-upload-zone:hover {
    border-color: var(--accent-primary);
    background: rgba(6, 182, 212, 0.05);
}

/* Light theme adaptations */
.light-theme .award-item-card {
    background: rgba(0,0,0,0.02);
    border-color: #e2e8f0;
}
.light-theme .user-award-row {
    background: rgba(0,0,0,0.02);
    border-color: #e2e8f0;
}

/* --- Streak Badge & Admin User Card styles --- */
.badge-streak {
    background: rgba(249, 115, 22, 0.15);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.3);
}
.light-theme .badge-streak {
    background: rgba(249, 115, 22, 0.1) !important;
    color: #c2410c !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}

.admin-user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    gap: 12px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}
.admin-user-card.banned {
    background: rgba(239, 68, 68, 0.03);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.light-theme .admin-user-card {
    background: rgba(0, 0, 0, 0.02);
}
.light-theme .admin-user-card.banned {
    background: rgba(239, 68, 68, 0.05);
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    flex-grow: 1;
}
.admin-user-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.coworker-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsiveness on screens under 768px */
@media (max-width: 768px) {
    .admin-user-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .admin-user-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .shift-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Click Schedule Grid cell status colors */
.click-day-cell.status-green {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: rgba(16, 185, 129, 0.04) !important;
}
.click-day-cell.status-green:hover {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
}
.click-day-cell.status-yellow {
    border-color: rgba(245, 158, 11, 0.45) !important;
    background: rgba(245, 158, 11, 0.04) !important;
}
.click-day-cell.status-yellow:hover {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}
.click-day-cell.status-red {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}
.click-day-cell.status-red:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

.light-theme .click-day-cell.status-green {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}
.light-theme .click-day-cell.status-green:hover {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
}
.light-theme .click-day-cell.status-yellow {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}
.light-theme .click-day-cell.status-yellow:hover {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}
.light-theme .click-day-cell.status-red {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
}
.light-theme .click-day-cell.status-red:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

/* Стили для обмена сменами */
.exchange-clickable-shift {
    cursor: pointer !important;
    border-color: rgba(6, 182, 212, 0.25) !important;
    transition: all 0.2s ease !important;
}
.exchange-clickable-shift:hover {
    transform: translateY(-1px) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2) !important;
    background: rgba(6, 182, 212, 0.05) !important;
}
.light-theme .exchange-clickable-shift:hover {
    background: rgba(6, 182, 212, 0.08) !important;
}

/* Кнопка обмена сменами на карточках */
.btn-exchange-action {
    pointer-events: none; /* Пробрасывает клики на карточку смены */
}

.exchange-clickable-shift:hover .btn-exchange-action {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.3) !important;
}

#particlesCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

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

@media (max-width: 768px) {
    .hidden-desktop {
        display: inline-flex !important;
    }
}



/* =============================================
   FULLSCREEN WORKSPACE DESIGN (CLICK SCHEDULER)
   ============================================= */

/* Glass modal override for FullHD Fullscreen */
.glass-modal.fullscreen-modal {
    max-width: 98vw;
    width: 98vw;
    max-height: 96vh;
    height: 96vh;
    border-radius: 20px;
    margin: auto;
    display: none;
    flex-direction: column;
}

.glass-modal.fullscreen-modal[open] {
    display: flex;
}

.glass-modal.fullscreen-modal .modal-content {
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.fullscreen-modal .click-schedule-layout {
    flex: 1;
    display: flex;
    gap: 24px;
    overflow: hidden; /* Prevent layout from breaking the container */
    min-height: 0;
    margin-top: 14px;
}

/* Sidebar structure */
.fullscreen-modal .click-schedule-sidebar {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow-y: auto;
    padding-right: 8px;
    border-right: 1px solid var(--border-color);
}

/* Sidebar sections */
.click-sch-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.click-sch-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

/* Main workspace */
.fullscreen-modal .click-schedule-grid-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    min-width: 0;
}

/* Stats dashboard card */
.click-sch-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.click-sch-stat-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.light-theme .click-sch-stat-card {
    background: rgba(0, 0, 0, 0.01);
}

.click-sch-stat-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-primary);
}

.click-sch-stat-info {
    display: flex;
    flex-direction: column;
}

.click-sch-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

.click-sch-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Scrollable Calendar Workspace */
.click-schedule-calendar-workspace {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

/* FullHD Click Schedule Day cells (larger) */
.fullscreen-modal .click-day-cell {
    min-height: 120px;
    padding: 10px;
    border-radius: 12px;
    align-items: stretch;
}

.click-day-cell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.click-day-coverage-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 4px 6px;
    margin-bottom: 6px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.light-theme .click-day-coverage-panel {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.03);
}

.click-day-coverage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.click-day-coverage-ok {
    color: var(--success);
}

.click-day-coverage-alert {
    color: var(--warning);
}

/* Scrollable list of employee checklist */
#clickSchEmployeesList {
    flex: 1;
    min-height: 0;
}

/* Hover style for label items */
.click-sch-user-label:hover {
    background: rgba(255, 255, 255, 0.03);
}
.light-theme .click-sch-user-label:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

.click-sch-employee-hours {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(6, 182, 212, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
}

/* Shift badge colors for specific roles in grid */
.click-shift-badge-admin {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}
.click-shift-badge-cook {
    background: rgba(6, 182, 212, 0.08) !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
}
.click-shift-badge-cashier {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
}
.click-shift-badge-other {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.light-theme .click-shift-badge-admin {
    background: rgba(245, 158, 11, 0.12) !important;
}
.light-theme .click-shift-badge-cook {
    background: rgba(6, 182, 212, 0.12) !important;
}
.light-theme .click-shift-badge-cashier {
    background: rgba(139, 92, 246, 0.12) !important;
}
.light-theme .click-shift-badge-other {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

@media (max-width: 1024px) {
    .glass-modal.fullscreen-modal {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    
    .fullscreen-modal .click-schedule-layout {
        flex-direction: column;
        overflow-y: auto;
    }
    
    .fullscreen-modal .click-schedule-sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 16px;
    }
    
    .fullscreen-modal .click-schedule-grid-container {
        height: auto;
        overflow: visible;
    }
}

/* --- COLLAPSIBLE ADMIN SECTIONS (ACCORDION) --- */
.admin-section {
    background: var(--bg-day-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-section summary {
    padding: 20px 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background 0.2s;
}

.admin-section summary:hover {
    background: rgba(255, 255, 255, 0.02);
}

.admin-section summary::-webkit-details-marker {
    display: none;
}

.admin-section summary::after {
    content: '▼';
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-section[open] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.admin-section[open] summary {
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.01);
}

.admin-section[open] summary::after {
    transform: rotate(-180deg);
    color: var(--accent-primary);
}

.admin-section-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.light-theme .admin-section[open] {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(6, 182, 212, 0.2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

/* --- 3D БУРГЕР ЗАГРУЗЧИК (3D BURGER LOADER) --- */
.burger-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    width: 100%;
    min-height: 220px;
    gap: 24px;
    perspective: 1000px;
}

.burger-3d-wrapper {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.burger-3d {
    position: relative;
    width: 70px;
    height: 70px;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(0deg);
    animation: spinBurger 4s infinite linear;
}

@keyframes spinBurger {
    0% {
        transform: rotateX(-25deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-25deg) rotateY(360deg);
    }
}

.burger-layer {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    transform-style: preserve-3d;
}

/* Детализация слоев бургера */
.burger-layer.bun-top {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: 2px solid #b45309;
    box-shadow: inset 0 6px 10px rgba(255, 255, 255, 0.45), 
                inset 0 -6px 10px rgba(0, 0, 0, 0.15),
                0 6px 12px rgba(0, 0, 0, 0.3);
    animation: animBunTop 3s infinite ease-in-out;
}

/* Кунжут на верхней булке */
.sesame-seed {
    position: absolute;
    width: 3.5px;
    height: 1.8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.seed-1 { top: 22px; left: 26px; transform: rotate(15deg); }
.seed-2 { top: 32px; left: 44px; transform: rotate(-30deg); }
.seed-3 { top: 40px; left: 22px; transform: rotate(45deg); }
.seed-4 { top: 18px; left: 38px; transform: rotate(-10deg); }

.burger-layer.sauce {
    background: rgba(239, 68, 68, 0.9); /* Кетчуп */
    width: 64px;
    height: 64px;
    left: 3px;
    top: 3px;
    border: 2px dashed #b91c1c;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    animation: animSauce 3s infinite ease-in-out;
}

.burger-layer.cheese {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border: 1px solid #d97706;
    border-radius: 4px;
    width: 62px;
    height: 62px;
    left: 4px;
    top: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    animation: animCheese 3s infinite ease-in-out;
}

.burger-layer.tomato {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border: 1.8px solid #991b1b;
    width: 66px;
    height: 66px;
    left: 2px;
    top: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    animation: animTomato 3s infinite ease-in-out;
}

.burger-layer.lettuce {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: 2px dashed #16a34a;
    width: 72px;
    height: 72px;
    left: -1px;
    top: -1px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    animation: animLettuce 3s infinite ease-in-out;
}

.burger-layer.patty {
    background: linear-gradient(135deg, #5c2c16 0%, #361709 100%);
    border: 2px solid #290f04;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.4), 
                0 4px 8px rgba(0, 0, 0, 0.35);
    animation: animPatty 3s infinite ease-in-out;
}

.burger-layer.bun-bottom {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border: 2px solid #92400e;
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.25), 
                0 5px 10px rgba(0, 0, 0, 0.4);
    animation: animBunBottom 3s infinite ease-in-out;
}

/* 3D-анимации разлета слоев бургера */
@keyframes animBunTop {
    0%, 100% { transform: translateZ(28px); }
    50% { transform: translateZ(48px); }
}
@keyframes animSauce {
    0%, 100% { transform: translateZ(18px); }
    50% { transform: translateZ(30px); }
}
@keyframes animCheese {
    0%, 100% { transform: translateZ(10px) rotateZ(45deg); }
    50% { transform: translateZ(18px) rotateZ(45deg); }
}
@keyframes animTomato {
    0%, 100% { transform: translateZ(2px); }
    50% { transform: translateZ(6px); }
}
@keyframes animLettuce {
    0%, 100% { transform: translateZ(-6px); }
    50% { transform: translateZ(-8px); }
}
@keyframes animPatty {
    0%, 100% { transform: translateZ(-16px); }
    50% { transform: translateZ(-24px); }
}
@keyframes animBunBottom {
    0%, 100% { transform: translateZ(-26px); }
    50% { transform: translateZ(-42px); }
}

.burger-loader-text {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: pulseLoaderText 1.5s infinite ease-in-out;
}

@keyframes pulseLoaderText {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* =============================================
   PREMIUM ENTRANCE ANIMATIONS & EFFECTS
   ============================================= */

/* Tab Views transition entry */
#view-schedule:not(.hidden),
#view-market:not(.hidden),
#view-exchange:not(.hidden),
#view-admin:not(.hidden),
#loginScreen:not(.hidden) {
    animation: viewEntrance 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* Calendar Day Cards stagger animation base style */
.day-card {
    opacity: 1;
    animation: cardEntrance 0.5s cubic-bezier(0.21, 1.02, 0.43, 1.01) both;
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.975);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger animation for List Items */
.shift-item,
.request-item,
.shift-card-item,
.coworker-badge {
    opacity: 1;
    animation: listItemEntrance 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes listItemEntrance {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Admin editable shifts hover/active premium touch effects */
.shift-card-item.admin-editable {
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
@media (hover: hover) {
    .shift-card-item.admin-editable:hover {
        transform: translateY(-2px) scale(1.02);
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(6, 182, 212, 0.3);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}
.shift-card-item.admin-editable:active {
    transform: scale(0.97) !important;
    opacity: 0.9;
}

/* =============================================
   SKEUOMORPHIC "PAPER" THEME (БУМАГА)
   ============================================= */

/* Universal Font Override for Paper Theme */
.paper-theme,
.paper-theme body,
.paper-theme button,
.paper-theme input,
.paper-theme select,
.paper-theme textarea,
.paper-theme span,
.paper-theme h1,
.paper-theme h2,
.paper-theme h3,
.paper-theme h4,
.paper-theme p,
.paper-theme a,
.paper-theme small,
.paper-theme label,
.paper-theme strong,
.paper-theme li,
.paper-theme option,
.paper-theme td,
.paper-theme th {
    font-family: 'Neucha', 'Caveat', cursive, sans-serif !important;
    font-size: 1.15rem !important; /* Handwriting fonts are visually smaller */
    font-weight: 500 !important;
}

.paper-theme h1,
.paper-theme h2,
.paper-theme h3,
.paper-theme h4 {
    font-family: 'Neucha', cursive, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #162544 !important;
}

/* Double notebook line for headings */
.paper-theme .card h2,
.paper-theme .card h3,
.paper-theme .tabs-header,
.paper-theme .modal-header {
    border-bottom: 2px double rgba(192, 57, 43, 0.4) !important;
    padding-bottom: 8px !important;
    margin-bottom: 18px !important;
}

/* Variables for Paper Theme */
.paper-theme {
    --bg-dark: #fbf5e7; /* warm yellowish cream notebook paper background */
    --bg-surface: #fdfaf0;
    --bg-card: #f9f1e0;
    --bg-card-element: #ffffff;
    --border-color: rgba(43, 92, 143, 0.25); /* blue ink color */
    --text-main: #162544; /* Royal blue ink */
    --text-muted: #5e6f8a;
    --bg-day-card: #ffffff;
    --bg-tabs: #f3e8d2;
    --bg-controls: #f3e8d2;
    --bg-shift-item: #fcf9f2;
    --border-shift-item: rgba(43, 92, 143, 0.15);
    --bg-market-item: #fcf9f2;
    --bg-dropdown: #ffffff;
    --bg-modal: #fbf7ee;
    --bg-backdrop: rgba(22, 37, 68, 0.45);
    --bg-comment: #fcf6eb;
    --border-comment: rgba(43, 92, 143, 0.15);
    --text-comment: #1e3157;
    --bg-party: #fbf6ec;
    --border-party: rgba(43, 92, 143, 0.1);
    --gradient-body: none;
}

/* Grid background pattern for the whole paper theme app */
.paper-theme.container,
.paper-theme .container,
.paper-theme body {
    background-color: #fbf5e7 !important;
    background-image: 
        linear-gradient(rgba(43, 92, 143, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 92, 143, 0.08) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    background-attachment: fixed !important;
}

/* Red margin line like in a real school notebook */
.paper-theme .container::after {
    content: '';
    position: fixed;
    top: 0;
    left: 80px;
    bottom: 0;
    width: 2px;
    background: rgba(192, 57, 43, 0.35); /* Red margin line */
    z-index: 5;
    pointer-events: none;
}

/* Punch holes on the left side, representing binder holes */
.paper-theme .container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 24px;
    bottom: 0;
    width: 28px;
    z-index: 6;
    pointer-events: none;
    background-image: 
        radial-gradient(circle, #ffffff 8px, rgba(43, 37, 30, 0.15) 9px, transparent 11px);
    background-size: 28px 180px;
    background-position: center 40px;
    background-repeat: repeat-y;
}

/* Give cards and day cards a nice skeuomorphic paper sheet styling */
.paper-theme .card,
.paper-theme .day-card {
    border: 2px solid rgba(43, 92, 143, 0.3) !important; /* blue ink border */
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; /* Rough hand-drawn radius */
    box-shadow: 3px 3px 0px rgba(145, 130, 115, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important; /* White sheets of paper stacked */
}

/* Specific Rotation for Day Cards (sticky note sheets) */
.paper-theme .day-card {
    transform: rotate(var(--card-rotation, 0deg));
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Adjust dialogs to look like paper documents */
.paper-theme .glass-modal {
    border: 2px solid rgba(43, 92, 143, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(43, 37, 30, 0.25) !important;
    background: #ffffff !important;
}

/* Drawers on paper */
.paper-theme .tabs {
    background: rgba(251, 245, 231, 0.98) !important;
    border-right: 2px solid rgba(43, 92, 143, 0.25) !important;
    border-radius: 0 20px 20px 0/0 255px 255px 0 !important;
}

.paper-theme .profile-drawer {
    border-left: 2px solid rgba(43, 92, 143, 0.25) !important;
    border-radius: 20px 0 0 20px/255px 0 0 255px !important;
}

/* Buttons and Form elements rough hand-sketched styling */
.paper-theme button,
.paper-theme input[type="text"],
.paper-theme input[type="number"],
.paper-theme input[type="email"],
.paper-theme input[type="password"],
.paper-theme input[type="date"],
.paper-theme input[type="time"],
.paper-theme select {
    border: 2px solid #2b5c8f !important; /* Royal blue ink outline */
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
    background: #ffffff !important;
    color: #162544 !important;
    box-shadow: 1px 2px 0px rgba(43, 92, 143, 0.15) !important;
}

.paper-theme .btn-secondary {
    background: transparent !important;
    border: 2px dashed #2b5c8f !important; /* dashed outline for secondary draft options */
    color: #2b5c8f !important;
    box-shadow: none !important;
}

/* Focus state - turns to red pen correction line! */
.paper-theme input:focus,
.paper-theme select:focus {
    outline: none !important;
    border-color: #c0392b !important;
    box-shadow: 0 0 5px rgba(192, 57, 43, 0.2) !important;
}

/* Hover Jitter/Wiggle Animation to bring the sketch to life */
@keyframes paperWiggle {
    0% { transform: rotate(var(--card-rotation, 0deg)) translate(0, 0); }
    33% { transform: rotate(calc(var(--card-rotation, 0deg) + 0.35deg)) translate(-0.5px, 0.5px); }
    66% { transform: rotate(calc(var(--card-rotation, 0deg) - 0.35deg)) translate(0.5px, -0.5px); }
    100% { transform: rotate(var(--card-rotation, 0deg)) translate(0, 0); }
}

@keyframes buttonWiggle {
    0% { transform: scale(1.02) rotate(0deg); }
    33% { transform: scale(1.02) rotate(0.6deg) translate(-0.5px, 0.5px); }
    66% { transform: scale(1.02) rotate(-0.6deg) translate(0.5px, -0.5px); }
    100% { transform: scale(1.02) rotate(0deg); }
}

.paper-theme .day-card:hover {
    animation: paperWiggle 0.25s infinite linear !important;
    box-shadow: 4px 8px 22px rgba(43, 37, 30, 0.12) !important;
    z-index: 10;
}

.paper-theme button:hover,
.paper-theme .btn-shift-action:hover,
.paper-theme .user-profile-badge:hover,
.paper-theme .btn-nav:hover,
.paper-theme .btn-period:hover {
    animation: buttonWiggle 0.2s infinite linear !important;
}

.paper-theme button:active,
.paper-theme .btn-shift-action:active,
.paper-theme .user-profile-badge:active {
    transform: scale(0.96) rotate(0deg) !important;
    animation: none !important;
}

/* Active tab button */
.paper-theme .tabs button.active {
    background: rgba(43, 92, 143, 0.08) !important;
    border: 2px solid #2b5c8f !important;
    color: #2b5c8f !important;
}

/* Highlighter colors for statuses */
.paper-theme .btn-success,
.paper-theme .status-green {
    background: rgba(39, 174, 96, 0.15) !important; /* Green highlighter */
    border-color: #27ae60 !important;
    color: #1e6b30 !important;
    box-shadow: none !important;
}

.paper-theme .btn-danger,
.paper-theme .status-red {
    background: rgba(192, 57, 43, 0.12) !important; /* Red highlighter */
    border-color: #c0392b !important;
    color: #7b1f15 !important;
    box-shadow: none !important;
}

.paper-theme .status-pending,
.paper-theme .status-yellow {
    background: rgba(241, 196, 15, 0.18) !important; /* Yellow highlighter */
    border-color: #f1c40f !important;
    color: #7f6500 !important;
    box-shadow: none !important;
}

.paper-theme .status-market,
.paper-theme .status-info {
    background: rgba(43, 92, 143, 0.12) !important; /* Blue highlighter */
    border-color: #2b5c8f !important;
    color: #1e3a5f !important;
    box-shadow: none !important;
}

.paper-theme .badge-streak {
    background: rgba(192, 57, 43, 0.1) !important; /* Red highlight */
    color: #c0392b !important;
    border: 1.5px solid rgba(192, 57, 43, 0.25) !important;
    border-radius: 8px !important;
}

.paper-theme .click-sch-user-label input:checked + span {
    background: rgba(192, 57, 43, 0.12) !important; /* Highlight and red line strike out */
    text-decoration: line-through #c0392b 2px !important;
    border-color: #c0392b !important;
}

/* Custom bullet circles in click scheduler list */
.paper-theme .click-sch-user-label {
    border-radius: 8px !important;
}

/* Mobile responsiveness adjustments */
@media (max-width: 768px) {
    .paper-theme .container::after {
        left: 35px; /* Move margin line closer to the left edge */
    }
    .paper-theme .container::before {
        left: 8px; /* Move punch holes closer to left edge */
        background-size: 20px 140px; /* Scale down holes */
    }
    .paper-theme #view-schedule, 
    .paper-theme #view-market, 
    .paper-theme #view-exchange, 
    .paper-theme #view-admin,
    .paper-theme #loginScreen {
        padding-left: 48px !important; /* Ensure content doesn't overlap punch holes and red line */
    }
}

/* =============================================
   CSP — CLICK SCHEDULE PLAN (SPREADSHEET TABLE)
   ============================================= */

.csp-table-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.csp-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 13px;
    font-family: 'Outfit', sans-serif;
}

.csp-th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(20, 20, 35, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid rgba(6, 182, 212, 0.4);
    border-right: 1px solid var(--border-color);
    padding: 6px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
    user-select: none;
}

/* Ширина должна совпадать с .csp-td-name, иначе залипшая колонка разъезжается */
.csp-th-name {
    position: sticky;
    left: 0;
    z-index: 4;
    text-align: left;
    min-width: 178px;
    max-width: 210px;
    background: rgba(15, 15, 30, 0.97);
    border-right: 2px solid rgba(6, 182, 212, 0.4);
    padding: 8px 14px;
    font-size: 11px;
    color: var(--accent-primary);
}

.csp-th-day { min-width: 52px; max-width: 72px; width: 60px; }
.csp-dow { font-size: 10px; font-weight: 700; opacity: 0.7; margin-bottom: 2px; }
.csp-date { font-size: 12px; font-weight: 700; color: var(--text-main); }

.csp-th-total {
    position: sticky;
    right: 0;
    z-index: 4;
    min-width: 72px;
    background: rgba(139, 92, 246, 0.2);
    border-left: 2px solid rgba(139, 92, 246, 0.45);
    color: #c4b5fd;
    font-size: 10px;
}

.csp-th.csp-weekend, .csp-th-day.csp-weekend .csp-date { color: #f87171; }
.csp-th.csp-weekend { background: rgba(239, 68, 68, 0.06); }

/* ── Заголовок секции должности ─────────────────────────────────────────── */
/* Ячейка растянута на всю ширину таблицы, поэтому содержимое прилипает
   к левому краю само — иначе при прокрутке вправо название должности уезжает. */
.csp-group-td {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}
.csp-group-inner {
    position: sticky;
    left: 0;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-left: 3px solid var(--csp-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--csp-accent);
}
.csp-group-icon { display: inline-flex; align-items: center; }
.csp-group-icon .svg-icon { width: 15px; height: 15px; }
.csp-group-label { white-space: nowrap; }
.csp-group-count {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    text-transform: none;
}
.csp-group-guests {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--csp-accent);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

/* Кнопка «поставить сюда совместителя» */
.csp-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 2px 9px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--csp-accent);
    background: transparent;
    border: 1px dashed var(--csp-accent);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.6;
    box-shadow: none;
    transition: opacity 0.15s, background 0.15s;
}
.csp-add-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.07); }
.csp-add-btn-open { opacity: 1; border-style: solid; }
.csp-add-plus { font-size: 13px; font-weight: 800; line-height: 1; }

/* ── Выбор совместителя ─────────────────────────────────────────────────── */
.csp-picker-row { background: rgba(6, 182, 212, 0.05); }
.csp-picker-td { padding: 0; border-bottom: 1px solid var(--border-color); }
.csp-picker-box {
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 760px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
}
.csp-picker-hint {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-right: 2px;
}
.csp-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.csp-picker-chip:hover {
    border-color: var(--csp-accent);
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-1px);
}
.csp-chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--csp-accent);
    flex-shrink: 0;
}
.csp-chip-role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── Строка сотрудника ──────────────────────────────────────────────────── */
.csp-user-row { transition: background 0.15s; }
.csp-user-row:hover { background: rgba(255, 255, 255, 0.025); }
.csp-user-row.csp-row-selected { background: rgba(6, 182, 212, 0.06); }

.csp-td-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: rgba(12, 12, 24, 0.97);
    border-right: 2px solid rgba(6, 182, 212, 0.25);
    border-bottom: 1px solid var(--border-color);
    /* Полоска слева — цвет ОСНОВНОЙ должности человека. В секции чужой
       должности она сразу выдаёт совместителя. */
    box-shadow: inset 3px 0 0 var(--csp-accent);
    padding: 0;
    min-width: 178px;
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
}
.csp-row-selected .csp-td-name { background-color: rgba(6, 182, 212, 0.12); }
.csp-row-guest .csp-td-name { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 60%); }
/* Заблокированный сотрудник со старыми сменами — строка приглушена */
.csp-row-banned .csp-name-text { opacity: 0.6; text-decoration: line-through; }
.csp-row-banned .csp-name-sub { color: #f87171; }
.csp-row-banned .csp-avatar { opacity: 0.6; }

.csp-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 22px 5px 14px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.csp-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--csp-accent);
    box-sizing: border-box;
}
.csp-avatar-fallback {
    background: var(--gradient-accent);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}
.csp-name-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.csp-name-text {
    font-size: 13px; font-weight: 500;
    color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csp-name-sub {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--csp-accent);
    opacity: 0.85;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Убрать вручную поставленного совместителя */
.csp-unpin-btn {
    position: absolute;
    top: 50%; right: 5px;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    font-size: 14px; line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    box-shadow: none;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.csp-user-row:hover .csp-unpin-btn { opacity: 0.55; }
.csp-unpin-btn:hover {
    opacity: 1;
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
}

.csp-td-day {
    position: relative;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0;
    width: 60px; min-width: 52px;
    height: 38px; vertical-align: middle;
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s;
}
.csp-td-day:hover { background: rgba(6, 182, 212, 0.12) !important; }
.csp-td-day.csp-has-shift { background: rgba(16, 185, 129, 0.13); }
.csp-td-day.csp-has-shift:hover { background: rgba(16, 185, 129, 0.22) !important; }
.csp-td-day.csp-no-shift { background: rgba(239, 68, 68, 0.08); }
.csp-td-day.csp-no-shift:hover { background: rgba(239, 68, 68, 0.18) !important; }
.csp-td-day.csp-weekend-col { border-right-color: rgba(239, 68, 68, 0.25); }
.csp-td-day.csp-no-shift.csp-weekend-col { background: rgba(239, 68, 68, 0.13); }
/* Маркер в чужой секции: человека в этот день нет, но и смены ему не поставить */
.csp-td-day.csp-td-faded { opacity: 0.55; }

/* Занят в этот день, но за другую должность. Штриховка + буква должности:
   видно, что человек не свободен, и куда именно он поставлен. */
.csp-td-day.csp-td-elsewhere {
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0 4px,
        rgba(255, 255, 255, 0) 4px 9px
    );
}
.csp-td-day.csp-td-elsewhere:hover {
    background: rgba(6, 182, 212, 0.14) !important;
}
.csp-cell-role {
    position: absolute;
    top: 2px; right: 4px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    color: var(--csp-accent);
    pointer-events: none;
}

.csp-cell-val {
    font-size: 13px; font-weight: 700;
    color: #6ee7b7;
    display: block; line-height: 1;
}
.csp-cell-elsewhere { color: var(--text-muted); opacity: 0.8; font-weight: 600; }
.csp-cell-marker { color: inherit; font-weight: 800; }

.csp-td-total {
    position: sticky; right: 0; z-index: 2;
    background: rgba(139, 92, 246, 0.15);
    border-left: 2px solid rgba(139, 92, 246, 0.4);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    text-align: center; min-width: 72px;
    vertical-align: middle; padding: 2px 0; height: 38px;
}
.csp-total-val {
    font-size: 14px; font-weight: 800;
    color: #c4b5fd;
    display: block; line-height: 1.15;
    font-family: 'Outfit', sans-serif;
}
/* Сколько из общих часов человек отработал именно в этой должности */
.csp-total-split {
    display: block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* ── Итог секции: сколько человек этой должности выходит в день ──────────── */
.csp-sub-label {
    position: sticky; left: 0; z-index: 2;
    background-color: rgba(12, 12, 24, 0.97);
    border-right: 2px solid rgba(6, 182, 212, 0.25);
    border-bottom: 1px solid var(--border-color);
    box-shadow: inset 3px 0 0 var(--csp-accent);
    padding: 0 14px;
    height: 27px;
}
.csp-sub-label-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--csp-accent);
    opacity: 0.9;
}
.csp-sub-cell {
    text-align: center;
    padding: 0;
    height: 27px;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.015);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.csp-sub-val {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-muted);
}
.csp-sub-req { font-size: 9px; font-weight: 600; opacity: 0.6; }
.csp-sub-ok .csp-sub-val { color: #34d399; }
.csp-sub-low .csp-sub-val { color: #fbbf24; }
.csp-sub-none .csp-sub-val { color: #f87171; }
.csp-sub-cell.csp-sub-low { background: rgba(245, 158, 11, 0.09); }
.csp-sub-cell.csp-sub-none { background: rgba(239, 68, 68, 0.11); }
.csp-sub-cell.csp-sub-total {
    position: sticky; right: 0; z-index: 2;
    background: rgba(139, 92, 246, 0.15);
    border-left: 2px solid rgba(139, 92, 246, 0.4);
}
.csp-sub-total .csp-sub-val { color: #c4b5fd; }

/* ── Сегодняшний столбец ────────────────────────────────────────────────── */
.csp-td-day.csp-today-col,
.csp-sub-cell.csp-today-col,
.csp-foot-cell.csp-today-col {
    box-shadow: inset 1px 0 0 rgba(6, 182, 212, 0.55), inset -1px 0 0 rgba(6, 182, 212, 0.55);
}
.csp-th-day.csp-today-col { background: rgba(6, 182, 212, 0.12); }
.csp-th-day.csp-today-col .csp-date { color: var(--accent-primary); }

.csp-foot-row { position: sticky; bottom: 0; z-index: 3; }
.csp-foot-label {
    position: sticky; left: 0; z-index: 4;
    background: rgba(15, 15, 30, 0.97);
    border-top: 2px solid rgba(245, 158, 11, 0.4);
    border-right: 2px solid rgba(6, 182, 212, 0.25);
    padding: 5px 14px; min-width: 178px;
}
.csp-foot-label-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fbbf24;
}
.csp-foot-cell {
    background: rgba(245, 158, 11, 0.08);
    border-top: 2px solid rgba(245, 158, 11, 0.4);
    border-right: 1px solid var(--border-color);
    text-align: center; padding: 5px 0;
    height: 32px; vertical-align: middle;
}
.csp-foot-cell.csp-weekend-col { background: rgba(245, 158, 11, 0.05); }
.csp-foot-cell.csp-foot-total {
    position: sticky; right: 0;
    background: rgba(139, 92, 246, 0.15);
    border-left: 2px solid rgba(139, 92, 246, 0.4);
    border-top: 2px solid rgba(139, 92, 246, 0.4);
}
.csp-foot-val { font-size: 12px; font-weight: 700; color: #fbbf24; display: block; }

/* Light theme */
.light-theme .csp-table-wrapper { background: #ffffff; border-color: #e2e8f0; }
.light-theme .csp-th { background: rgba(248, 249, 253, 0.97); border-color: #e2e8f0; color: #64748b; }
.light-theme .csp-th-name { background: rgba(248, 249, 253, 0.99); color: var(--accent-primary); }
.light-theme .csp-th-total { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.light-theme .csp-th.csp-weekend { background: rgba(239, 68, 68, 0.05); }
.light-theme .csp-group-td { background: rgba(15, 23, 42, 0.03); border-color: #e2e8f0; }
.light-theme .csp-group-count { color: #64748b; }
.light-theme .csp-group-guests { background: rgba(15, 23, 42, 0.06); }
.light-theme .csp-add-btn:hover { background: rgba(15, 23, 42, 0.05); }
.light-theme .csp-picker-row { background: rgba(6, 182, 212, 0.04); }
.light-theme .csp-picker-chip { background: #ffffff; border-color: #e2e8f0; color: #1e293b; }
.light-theme .csp-picker-chip:hover { background: #f8fafc; }
.light-theme .csp-user-row:hover { background: rgba(0, 0, 0, 0.02); }
.light-theme .csp-user-row.csp-row-selected { background: rgba(6, 182, 212, 0.06); }
.light-theme .csp-td-name { background-color: rgba(248, 249, 253, 0.98); }
.light-theme .csp-row-selected .csp-td-name { background-color: rgba(6, 182, 212, 0.1); }
.light-theme .csp-row-guest .csp-td-name { background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.05), transparent 60%); }
.light-theme .csp-name-text { color: #1e293b; }
.light-theme .csp-td-day { border-color: #e2e8f0; }
.light-theme .csp-td-day.csp-has-shift { background: rgba(16, 185, 129, 0.15); }
.light-theme .csp-td-day.csp-no-shift { background: rgba(239, 68, 68, 0.08); }
.light-theme .csp-td-day.csp-td-elsewhere {
    background: repeating-linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.07) 0 4px,
        rgba(15, 23, 42, 0) 4px 9px
    );
}
.light-theme .csp-cell-val { color: #059669; }
.light-theme .csp-cell-elsewhere { color: #64748b; }
.light-theme .csp-td-total { background: rgba(139, 92, 246, 0.12); }
.light-theme .csp-total-val { color: #7c3aed; }
.light-theme .csp-sub-label { background-color: rgba(248, 249, 253, 0.98); }
.light-theme .csp-sub-cell { background: rgba(15, 23, 42, 0.02); border-color: #e2e8f0; }
.light-theme .csp-sub-val { color: #64748b; }
.light-theme .csp-sub-ok .csp-sub-val { color: #059669; }
.light-theme .csp-sub-low .csp-sub-val { color: #b45309; }
.light-theme .csp-sub-none .csp-sub-val { color: #dc2626; }
.light-theme .csp-sub-cell.csp-sub-total { background: rgba(139, 92, 246, 0.12); }
.light-theme .csp-sub-total .csp-sub-val { color: #7c3aed; }
.light-theme .csp-foot-cell { background: rgba(245, 158, 11, 0.08); border-color: #e2e8f0; }
.light-theme .csp-foot-label { background: rgba(248, 249, 253, 0.97); }
.light-theme .csp-foot-val { color: #b45309; }
.light-theme .csp-foot-label-text { color: #b45309; }
.light-theme .csp-th-day.csp-today-col { background: rgba(6, 182, 212, 0.1); }

/* ── Легенда в боковой панели планирования ──────────────────────────────── */
.csp-legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.15);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}
.csp-legend-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-primary);
    margin-bottom: 1px;
}
.csp-legend-title .svg-icon { width: 14px; height: 14px; }
.csp-legend-row { display: flex; align-items: center; gap: 8px; }
.csp-legend-swatch {
    position: relative;
    flex-shrink: 0;
    width: 30px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 700;
}
.csp-legend-shift { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
.csp-legend-elsewhere {
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.07) 0 4px,
        rgba(255, 255, 255, 0) 4px 9px
    );
    color: var(--text-muted);
    font-weight: 600;
}
.csp-legend-elsewhere i {
    position: absolute;
    top: 1px; right: 2px;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    color: #38bdf8;
}
.csp-legend-marker { background: rgba(239, 68, 68, 0.22); color: #f87171; }
.csp-legend-bar {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 3px 0 0 #fb923c;
}
.csp-legend-note {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11.5px;
}
.csp-legend-note b { color: var(--text-main); }

.light-theme .csp-legend-elsewhere {
    background: repeating-linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.09) 0 4px,
        rgba(15, 23, 42, 0) 4px 9px
    );
}
.light-theme .csp-legend-shift { color: #059669; }
.light-theme .csp-legend-bar { background: rgba(15, 23, 42, 0.03); }
.light-theme .csp-legend-note { border-top-color: rgba(15, 23, 42, 0.1); }

/* Fix the grid container to be flex for table */
.fullscreen-modal .click-schedule-calendar-workspace {
    flex: 1;
    overflow: hidden;
    padding-right: 0 !important;
    display: flex;
    flex-direction: column;
}
.fullscreen-modal #clickScheduleGrid {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ─── ПОДПИСЬ ПОД СМЕНОЙ (РАСПИСАТЬСЯ) ─────────────────────────────────────── */

/* Кнопка «Расписаться» в карточке смены */
.btn-sign {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.22) 100%);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.3);
    transition: all 0.2s ease;
    box-shadow: none;
    white-space: nowrap;
}
.btn-sign:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.3) 0%, rgba(5,150,105,0.35) 100%);
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16,185,129,0.2);
}
.btn-sign:active {
    transform: translateY(0);
}

/* Кнопка «Расписаться» в модале */
.btn-sign-modal {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Значок «Подписано» в карточке смены */
.shift-signed-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 6px;
    padding: 2px 8px;
    animation: signedPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Значок «Не расписался» для администратора */
.shift-unsigned-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.75;
}

@keyframes signedPop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ─── МОДАЛ НЕПОДПИСАННЫХ СМЕН ─────────────────────────────────────────────── */

/* Предупреждающий баннер в модале */
.unsigned-modal-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    margin-bottom: 16px;
}
.unsigned-modal-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.4;
}
.unsigned-modal-banner p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Список смен в модале */
.unsigned-shifts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 2px;
}
.unsigned-shifts-list::-webkit-scrollbar {
    width: 4px;
}
.unsigned-shifts-list::-webkit-scrollbar-track {
    background: transparent;
}
.unsigned-shifts-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

/* Карточка неподписанной смены */
.unsigned-modal-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: border-color 0.2s ease;
    animation: slideInCard 0.25s ease both;
}
.unsigned-modal-card:hover {
    border-color: rgba(245, 158, 11, 0.3);
}

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

.unsigned-card-info {
    flex: 1;
    min-width: 0;
}
.unsigned-card-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unsigned-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.unsigned-card-role {
    font-size: 11px;
    font-weight: 600;
    color: #67e8f9;
    background: rgba(6, 182, 212,0.12);
    border-radius: 5px;
    padding: 2px 7px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.unsigned-card-hours {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* =============================================
   ОПТИМИЗАЦИЯ ПРОИЗВОДИТЕЛЬНОСТИ
   ============================================= */

/* --- Contain для стабильных элементов --- */
.day-card {
    contain: layout style;
}
.shift-card-item {
    contain: layout style;
}
.shift-item {
    contain: layout style;
}

/* --- will-change только для активно анимируемых элементов --- */
.tabs,
.profile-drawer {
    will-change: transform;
}

.glass-modal {
    will-change: transform, opacity;
}

.drawer-backdrop {
    will-change: opacity;
}

/* --- Оптимизация orbit badge --- */
/* GPU-слой только для значков с анимацией, не для всей обёртки */
.orbit-badge.spin-cw,
.orbit-badge.spin-ccw {
    contain: layout style;
}

/* --- prefers-reduced-motion: отключаем все анимации --- */
@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;
    }

    /* Полностью скрываем canvas частиц */
    #particlesCanvas {
        display: none !important;
    }

    /* Орбитальные значки — статично */
    .orbit-badge.spin-cw,
    .orbit-badge.spin-ccw {
        animation: none !important;
        transform: translateX(calc(var(--orbit-r, 27px))) !important;
    }

    .has-badges {
        animation: none !important;
    }

    .badge-dot {
        animation: none !important;
    }
}

/* --- Оптимизация backdrop-filter на слабых устройствах ---
   На устройствах без поддержки backdrop-filter заменяем на непрозрачный фон */
@supports not (backdrop-filter: blur(1px)) {
    .card {
        background: rgba(7, 12, 18, 0.97) !important;
    }
    .tabs {
        background: rgba(7, 12, 18, 0.99) !important;
    }
    .header-card {
        background: rgba(7, 12, 18, 0.97) !important;
    }
    .drawer-backdrop {
        background: rgba(0, 0, 0, 0.7) !important;
    }
    .light-theme .card {
        background: rgba(255, 255, 255, 0.97) !important;
    }
    .light-theme .tabs {
        background: rgba(255, 255, 255, 0.99) !important;
    }
    .light-theme .header-card {
        background: rgba(255, 255, 255, 0.97) !important;
    }
}

/* --- Уменьшение blur на мобильных для экономии GPU ---
   Шапка на мобиле уже переопределяет blur(20px), здесь снижаем для drawer */
@media (max-width: 768px) {
    .tabs {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .drawer-backdrop {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    dialog::backdrop {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

}



/* ─── Анимация имени и фамилии (Кастомизация) ─── */
.animated-name-text {
    background: linear-gradient(90deg, #ff007f, #ff7f00, #ff00ff, #00ffff, #00ff00, #ff7f00, #ff007f);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(255, 0, 127, 0.15);
    animation: shineName 4s linear infinite;
    display: inline-block;
}

@keyframes shineName {
    to {
        background-position: 200% center;
    }
}

/* ─── РЕЖИМ ПОВЫШЕННОЙ ПРОИЗВОДИТЕЛЬНОСТИ (PERFORMANCE MODE) ─── */
body.perf-mode, 
html.perf-mode {
    --animation-duration: 0s !important;
    --transition-duration: 0s !important;
}

/* Отключение всех CSS анимаций и переходов для мгновенного отклика */
body.perf-mode *,
body.perf-mode *::before,
body.perf-mode *::after {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    transition: none !important;
    animation: none !important;
}

/* Отключение случайных поворотов карточек календаря */
body.perf-mode .day-card {
    transform: none !important;
}

/* Отключение размытия (backdrop-filter) и замена на сплошные / простые цвета */
body.perf-mode .card,
body.perf-mode .header-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 12, 18, 0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.perf-mode .tabs,
body.perf-mode .profile-drawer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0f0b21 !important;
}

body.perf-mode .drawer-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.75) !important;
}

body.perf-mode dialog::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Переопределения под светлую тему */
body.perf-mode.light-theme .card,
body.perf-mode.light-theme .header-card {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

body.perf-mode.light-theme .tabs,
body.perf-mode.light-theme .profile-drawer {
    background: #f8fafc !important;
}

/* Переопределения под бумажную тему */
body.perf-mode.paper-theme .day-card {
    transform: none !important;
}
body.perf-mode.paper-theme .day-card:hover {
    animation: none !important;
}

/* Стили и анимация для виджета "Онлайн" */
@keyframes onlinePulseAnim {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    70% {
        transform: scale(2.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.light-theme #onlineUsersCard {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(6, 182, 212, 0.03) 100%) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
}

/* --- СТИЛИ FAQ РАЗДЕЛА --- */
.faq-category {
    margin-bottom: 12px;
}
.faq-category-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
    padding-left: 10px;
    border-left: 3px solid var(--accent-primary);
    line-height: 1.2;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(6, 182, 212, 0.35);
}
.faq-item.active {
    background: rgba(6, 182, 212, 0.03);
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.04);
}
.faq-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 20px;
    text-align: left;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    outline: none;
    transition: color 0.2s ease;
}
.faq-trigger:hover {
    color: var(--accent-secondary);
}
.faq-chevron {
    width: 18px;
    height: 18px;
    fill: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), fill 0.25s ease;
    flex-shrink: 0;
}
.faq-item.active .faq-chevron {
    transform: rotate(180deg);
    fill: var(--accent-secondary);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer-content {
    padding: 0 20px 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}
.faq-answer-content p {
    margin: 0 0 8px 0;
}
.faq-answer-content p:last-child {
    margin-bottom: 0;
}
.faq-answer-content strong {
    color: var(--text-main);
}
.faq-search-wrapper input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.15);
}
/* Стили для светлой темы */
body.light-theme .faq-item {
    background: #ffffff;
    border-color: #e2e8f0;
}
body.light-theme .faq-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
body.light-theme .faq-item.active {
    background: #f1f5f9;
    border-color: var(--accent-primary);
}
body.light-theme .faq-trigger {
    color: #1e293b;
}
body.light-theme .faq-answer-content {
    color: #475569;
}
body.light-theme .faq-answer-content strong {
    color: #0f172a;
}
body.light-theme .faq-category-title {
    color: var(--accent-primary);
}



/* --- ЛОГИРОВАНИЕ ДЕЙСТВИЙ (LOGGING SYSTEM) --- */
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: 'Outfit', sans-serif;
}
.log-table th {
    padding: 12px 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    text-align: left;
}
.log-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}
.light-theme .log-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.log-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.log-badge-admin {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.log-badge-user {
    background: rgba(6, 182, 212, 0.15);
    color: #818cf8;
    border: 1px solid rgba(6, 182, 212, 0.3);
}
.light-theme .log-badge-admin {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.light-theme .log-badge-user {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.2);
}




/* --- БЫСТРЫЙ ПЕРЕХОД МЕЖДУ ЛОКАЦИЯМИ (шапка, только главный администратор) --- */
.quick-location-wrap {
    position: relative;
    flex-shrink: 0;
}

.quick-location-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    max-width: 220px;
    white-space: nowrap;
}

.quick-location-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

.quick-location-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.quick-location-wrap.is-open .quick-location-chevron {
    transform: rotate(180deg);
}

.quick-location-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 240px;
    max-width: 300px;
    max-height: min(420px, 60vh);
    overflow-y: auto;
    padding: 8px;
    border-radius: 14px;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-elevation);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-location-menu-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
    padding: 6px 10px 4px;
}

.quick-location-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.quick-location-item:hover:not(:disabled) {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.3);
}

.quick-location-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: currentColor;
    opacity: 0.85;
}

.quick-location-item .quick-location-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-location-item.is-current {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.35);
    color: #67e8f9;
    cursor: default;
}

.light-theme .quick-location-item.is-current {
    color: #0891b2;
}

.quick-location-item .quick-location-current-mark {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.9;
    flex-shrink: 0;
}

.quick-location-empty {
    padding: 10px 12px;
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    /* В мобильной шапке кнопки превращаются в круглые иконки — прячем подпись */
    .quick-location-name,
    .quick-location-chevron {
        display: none !important;
    }

    .quick-location-menu {
        position: fixed;
        top: calc(56px + var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + 6px);
        right: 10px;
        left: 10px;
        min-width: 0;
        max-width: none;
    }

    /* Пункты меню — обычные строки, а не круглые иконки из мобильных правил .header-card button */
    .header-card .quick-location-menu .quick-location-item {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 12px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    .header-card .quick-location-menu .quick-location-item svg {
        width: 16px !important;
        height: 16px !important;
    }
}