/* ==========================================================================
   PUGCRM - ULTRA-GLASSMORPHISM UI (visionOS/Apple Style)
   DEEP PURPLE, NEON, & HIGH-TECH TRANSPARENCY
   ========================================================================== */

/* --- 1. ПЕРЕМЕННЫЕ И ДИЗАЙН-СИСТЕМА (NEON & DEEP SPACE) --- */
:root {
    /* Фоновая палитра (Глубокий космос, см. image_1.png) */
    --bg-app: radial-gradient(circle at center, #2e1a4f 0%, #1a0b2e 100%);
    
    /* Стеклянные панели (Ultra-Glass, Apple Style) */
    --glass-bg: rgba(255, 255, 255, 0.03); /* Очень прозрачное */
    --glass-border: rgba(255, 255, 255, 0.08); /* Тонкая хайтек рамка */
    --glass-blur: blur(35px) saturate(200%); /* Мощное размытие и насыщенность */
    
    /* Текстовые цвета */
    --text-main: #ffffff;         /* Белоснежный */
    --text-muted: rgba(255, 255, 255, 0.6); /* Полупрозрачный белый */
    
    /* Фирменные НЕОНОВЫЕ акценты (см. image_4.png) */
    --primary-neon: #a361ff;      /* Яркий фиолетовый неон */
    --primary-glow: 0 0 15px rgba(163, 97, 255, 0.5);
    --accent-neon: #ff61f6;       /* Розовый неон для ховеров */
    
    /* "Ядовитые" статусы */
    --color-success: #00ff88;
    --color-warning: #ffe600;
    --color-danger: #ff3333;

    /* Системные переменные */
    --sidebar-width: 280px;
    --radius-lg: 24px;            /* Более мягкие скругления */
    --radius-md: 14px;
    --radius-sm: 8px;
    --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --shadow-premium: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   FINANCE — THEME BRIDGE
   Keeps every finance workspace in sync with the clinic theme.
   ========================================================= */

:root,
body[data-theme="purple"] {
  --finance-accent: #a855f7;
  --finance-accent-2: #c888ff;
  --finance-accent-soft: rgba(168, 85, 247, 0.16);
  --finance-accent-glow: rgba(168, 85, 247, 0.28);
  --finance-surface-1: rgba(34, 20, 58, 0.97);
  --finance-surface-2: rgba(13, 8, 26, 0.98);
  --finance-surface-soft: rgba(255, 255, 255, 0.025);
  --finance-surface-hover: rgba(255, 255, 255, 0.045);
  --finance-input: rgba(7, 4, 15, 0.62);
  --finance-border: rgba(255, 255, 255, 0.085);
  --finance-border-strong: rgba(184, 101, 255, 0.24);
  --finance-text: #ffffff;
  --finance-text-soft: rgba(255, 255, 255, 0.7);
  --finance-text-muted: rgba(255, 255, 255, 0.44);
  --finance-text-faint: rgba(255, 255, 255, 0.28);
  --finance-overlay: rgba(3, 2, 10, 0.84);
  --finance-shadow: rgba(0, 0, 0, 0.34);
  --finance-color-scheme: dark;
}

body[data-theme="black"] {
  --finance-accent: #f43f5e;
  --finance-accent-2: #fb7185;
  --finance-accent-soft: rgba(244, 63, 94, 0.14);
  --finance-accent-glow: rgba(244, 63, 94, 0.25);
  --finance-surface-1: rgba(19, 19, 22, 0.98);
  --finance-surface-2: rgba(5, 5, 7, 0.99);
  --finance-surface-soft: rgba(255, 255, 255, 0.025);
  --finance-surface-hover: rgba(255, 255, 255, 0.05);
  --finance-input: rgba(0, 0, 0, 0.66);
  --finance-border: rgba(255, 255, 255, 0.1);
  --finance-border-strong: rgba(244, 63, 94, 0.27);
  --finance-text: #f8f8fa;
  --finance-text-soft: rgba(255, 255, 255, 0.72);
  --finance-text-muted: rgba(255, 255, 255, 0.45);
  --finance-text-faint: rgba(255, 255, 255, 0.28);
  --finance-overlay: rgba(0, 0, 0, 0.88);
  --finance-shadow: rgba(0, 0, 0, 0.56);
  --finance-color-scheme: dark;
}

body[data-theme="blue"] {
  --finance-accent: #06b6d4;
  --finance-accent-2: #38d4ed;
  --finance-accent-soft: rgba(6, 182, 212, 0.15);
  --finance-accent-glow: rgba(6, 182, 212, 0.26);
  --finance-surface-1: rgba(7, 36, 56, 0.97);
  --finance-surface-2: rgba(2, 13, 24, 0.99);
  --finance-surface-soft: rgba(88, 203, 232, 0.035);
  --finance-surface-hover: rgba(88, 203, 232, 0.065);
  --finance-input: rgba(2, 14, 26, 0.68);
  --finance-border: rgba(108, 207, 232, 0.13);
  --finance-border-strong: rgba(6, 182, 212, 0.3);
  --finance-text: #f4fcff;
  --finance-text-soft: rgba(226, 247, 255, 0.73);
  --finance-text-muted: rgba(201, 232, 242, 0.47);
  --finance-text-faint: rgba(185, 221, 233, 0.3);
  --finance-overlay: rgba(1, 9, 17, 0.87);
  --finance-shadow: rgba(0, 9, 20, 0.48);
  --finance-color-scheme: dark;
}

body[data-theme="green"] {
  --finance-accent: #10b981;
  --finance-accent-2: #4adea7;
  --finance-accent-soft: rgba(16, 185, 129, 0.14);
  --finance-accent-glow: rgba(16, 185, 129, 0.25);
  --finance-surface-1: rgba(7, 38, 29, 0.97);
  --finance-surface-2: rgba(2, 15, 11, 0.99);
  --finance-surface-soft: rgba(82, 214, 160, 0.032);
  --finance-surface-hover: rgba(82, 214, 160, 0.06);
  --finance-input: rgba(2, 17, 12, 0.68);
  --finance-border: rgba(111, 218, 173, 0.13);
  --finance-border-strong: rgba(16, 185, 129, 0.3);
  --finance-text: #f3fff9;
  --finance-text-soft: rgba(226, 250, 238, 0.73);
  --finance-text-muted: rgba(202, 237, 220, 0.47);
  --finance-text-faint: rgba(188, 225, 207, 0.3);
  --finance-overlay: rgba(1, 11, 7, 0.87);
  --finance-shadow: rgba(0, 18, 10, 0.46);
  --finance-color-scheme: dark;
}

body[data-theme="white"] {
  --finance-accent: #5856d6;
  --finance-accent-2: #7c6ee6;
  --finance-accent-soft: rgba(88, 86, 214, 0.1);
  --finance-accent-glow: rgba(88, 86, 214, 0.17);
  --finance-surface-1: rgba(255, 255, 255, 0.97);
  --finance-surface-2: rgba(244, 245, 251, 0.98);
  --finance-surface-soft: rgba(41, 38, 62, 0.035);
  --finance-surface-hover: rgba(88, 86, 214, 0.065);
  --finance-input: rgba(255, 255, 255, 0.88);
  --finance-border: rgba(38, 34, 61, 0.11);
  --finance-border-strong: rgba(88, 86, 214, 0.24);
  --finance-text: #1c1c1e;
  --finance-text-soft: rgba(35, 33, 48, 0.72);
  --finance-text-muted: rgba(49, 46, 65, 0.5);
  --finance-text-faint: rgba(58, 54, 75, 0.35);
  --finance-overlay: rgba(27, 25, 40, 0.48);
  --finance-shadow: rgba(48, 43, 74, 0.14);
  --finance-color-scheme: light;
}


/* --- 2. БАЗОВЫЕ СТИЛИ И СБРОС --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: var(--bg-app);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- 3. ГЛАВНЫЙ КАРКАС ПРИЛОЖЕНИЯ (LAYOUT) --- */
.app-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Боковое меню (Sidebar - Глубокое матовое стекло) */
.sidebar {
    width: var(--sidebar-width);
    background: rgba(20, 10, 35, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 100;
    border-right: 1px solid var(--glass-border);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-main);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 50px;
}

.sidebar-logo span:first-child {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 5px var(--primary-neon));
}

/* Профиль клиники */
.user-profile-badge {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 35px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.user-profile-badge h4 {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 600;
}

.user-profile-badge span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Навигация (Неоновые пункты) */
.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item a {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition);
}

.menu-item a:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.04);
}

/* Активный пункт меню с неоновым свечением */
.menu-item.active a {
    color: #ffffff;
    background: var(--primary-neon);
    box-shadow: var(--primary-glow);
}

/* Главная контентная область */
.main-content {
    margin-left: var(--sidebar-width);
    flex-grow: 1;
    padding: 40px;
    max-width: calc(100% - var(--sidebar-width));
}

/* Верхняя шапка (Панель управления) */
.header-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.search-bar {
    width: 400px;
    position: relative;
}

.search-bar input {
    width: 100%;
    padding: 16px 24px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    font-size: 0.95rem;
    color: var(--text-main);
    transition: var(--transition);
}

.search-bar input:focus {
    border-color: var(--primary-neon);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 15px rgba(163, 97, 255, 0.1);
}

/* --- 4. КНОПКИ И ПЕРЕКЛЮЧАТЕЛИ (NEON GLASS STYLE) --- */
.nav-buttons-group {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 40px;
    border: 1px solid var(--glass-border);
}

.btn-tab {
    padding: 12px 24px;
    border: none;
    background: transparent;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

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

.btn-tab.active {
    background: var(--primary-neon);
    color: #ffffff;
    box-shadow: var(--primary-glow);
}

/* Датапикер (Светящиеся стрелочки) */
.btn-arrow {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-arrow:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-neon);
    color: var(--accent-neon);
}

.current-date-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
}

/* --- 5. МОДУЛЬ КАЛЕНДАРЯ (ULTRA GLASS GRID) --- */

/* Главная плашка календаря - Максимальное стекло */
.calendar-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

/* Обертка для горизонтального скролла */
.calendar-grid-wrapper {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
}

/* Неоновый скроллбар */
.calendar-grid-wrapper::-webkit-scrollbar {
    height: 7px;
}
.calendar-grid-wrapper::-webkit-scrollbar-thumb {
    background: rgba(163, 97, 255, 0.3);
    border-radius: 10px;
}
.calendar-grid-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--primary-neon);
    box-shadow: var(--primary-glow);
}

/* Сетка календаря */
.calendar-grid {
    display: grid;
    /* Время зафиксировано, колонки врачей не сжимаются меньше 240px */
    grid-template-columns: 80px repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    min-width: max-content; 
}

/* Липкая колонка времени (Тонированное стекло) */
.time-column-header,
.time-cell {
    position: sticky;
    left: 0;
    background: rgba(26, 11, 46, 0.9); /* Глубокий фон под цвет базы */
    backdrop-filter: blur(15px);
    z-index: 10;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.time-column-header {
    height: 80px;
    text-transform: uppercase;
}

/* Стеклянные карточки ветеринаров (Хай-тек шапки) */
.vet-column-header {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: var(--transition);
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vet-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1.05rem;
    margin-bottom: 3px;
}

.vet-spec {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Эффект при наведении на врача (Неоновая рамка) */
.vet-column-header:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--primary-neon);
    box-shadow: 0 8px 30px rgba(163, 97, 255, 0.2);
}

/* Ячейки времени (Пустые) */
.appointment-cell {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
}

/* Эффект при наведении на пустую ячейку (Появляется неоновый плюс) */
.appointment-cell:hover {
    background: rgba(163, 97, 255, 0.05);
    border: 1px solid var(--primary-neon);
    color: var(--primary-neon);
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(163, 97, 255, 0.1);
}

/* --- 6. ТАБЛИЦЫ (ХАЙ-ТЕК СПИСКИ) --- */
.data-table-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 25px;
    box-shadow: var(--shadow-premium);
}

.data-table th {
    padding: 16px 20px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.data-table td {
    padding: 18px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Неоновые статусы */
.badge-success { background: rgba(0, 255, 136, 0.1); color: var(--color-success); border: 1px solid rgba(0, 255, 136, 0.2); }
.badge-danger { background: rgba(255, 51, 51, 0.1); color: var(--color-danger); border: 1px solid rgba(255, 51, 51, 0.2); }


/* --- 7. ПАЦИЕНТЫ И МОДАЛКИ (GLASS MODAL ИСПРАВЛЕНИЕ) --- */
.patients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.patient-premium-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 25px;
    transition: var(--transition);
}

.patient-premium-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* МОДАЛЬНЫЕ ОКНА (ULTRA GLASS ИСПРАВЛЕНИЕ АРТЕФАКТА, СМ. IMAGE_6.PNG) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 5, 20, 0.7); /* Очень темный бэкдроп */
    backdrop-filter: blur(15px); /* Сильное размытие фона */
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-window {
    background: rgba(25, 15, 40, 0.8);
    backdrop-filter: blur(40px); /* Сверхчеткое размытие внутри окна */
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 550px;
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: var(--transition);
}

.modal-overlay.active .modal-window {
    transform: scale(1);
}

/* Главная Хайтек Кнопка */
.btn-primary {
    background: var(--primary-neon);
    color: #fff;
    padding: 16px 30px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(163, 97, 255, 0.6);
}
/* --- МИНИМАЛИСТИЧНАЯ ПАНЕЛЬ ВЕТЕРИНАРОВ (APPLE ULTRA-SLIM) --- */
aside[style*="width: 240px"] {
    width: 260px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
}

/* Сверхтонкие стеклянные плашки перетаскивания */
.calStaffDrag {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.calStaffDrag:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateX(4px);
}
.calStaffDragName {
    color: #fff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}
.calStaffDragRole {
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
}

/* --- КРАСИВЫЙ СИНХРОННЫЙ ВЕРХНИЙ СКРОЛЛБАР --- */
.calendar-top-scrollbar-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 10px;
}
/* Скрываем сам пустой блок, оставляем только трек полосы */
.calendar-top-scrollbar-container::-webkit-scrollbar {
    height: 5px;
}
.calendar-top-scrollbar-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
}
.calendar-top-scrollbar-container::-webkit-scrollbar-thumb {
    background: rgba(163, 97, 255, 0.2);
    border-radius: 10px;
}
.calendar-top-scrollbar-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-neon);
}
/* Растянутый верхний блок */
.owner-hero {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.2), rgba(15, 23, 42, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    width: 100%;
}

/* Рамка для животных */
.pets-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 24px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
}

.pet-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.pet-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}
.patient-hero {
    background: linear-gradient(160deg, rgba(30, 15, 50, 0.8), rgba(15, 10, 30, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 20px;
}

.tab-nav {
    display: flex;
    gap: 8px;
    background: rgba(0,0,0,0.2);
    padding: 6px;
    border-radius: 12px;
    width: fit-content;
}

.tab-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
}

.tab-btn.active {
    background: var(--accent-color);
    color: #fff;
}
/* Контейнер для переключателя вкладок пациента */
.patient-tabs-nav {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px border rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 14px;
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none; /* Убираем скроллбар в Firefox */
}

.patient-tabs-nav::-webkit-scrollbar {
    display: none; /* Убираем скроллбар в Chrome/Safari */
}

/* Кнопка вкладки */
.patient-tab-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Эффект при наведении */
.patient-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Активная вкладка в стиле Apple */
.patient-tab-btn.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 
                inset 0 1px 1px rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* Контейнер контента с плавной анимацией появления */
.patient-tab-content {
    animation: fadeInTab 0.35s ease forwards;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Общие стили для "стеклянных" карточек */
.glass-panel {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
    color: white;
}

/* Сетка для референса */
.visit-grid {
    display: grid;
    grid-template-columns: 350px 1fr; /* Левая панель и правая часть */
    gap: 20px;
}

/* ==========================================================================
   PREMIUM VISIT PAGE - GLASSMORPHISM FIXES
   ========================================================================== */

.visit-grid-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  padding: 10px 0;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.visit-sidebar-sticky {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Базовая стеклянная карточка */
.glass-card {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(25px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Паспорт пациента в сайдбаре */
.patient-avatar-badge {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(59, 130, 246, 0.15));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-patient-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.sidebar-patient-breed {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
}

.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 18px 0;
}

.sidebar-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.sidebar-meta-item:last-child {
  margin-bottom: 0;
}

.sidebar-meta-item .label {
  color: rgba(255, 255, 255, 0.45);
}

.sidebar-meta-item .val {
  color: #fff;
  font-weight: 500;
}

.sidebar-meta-item .val.highlight {
  color: #60a5fa;
  font-weight: 600;
}

/* Финансовый блок */
.finance-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(168, 85, 247, 0.03) 100%) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  text-align: center;
}

.finance-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.finance-amount {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-top: 6px;
  background: linear-gradient(135deg, #fff 40%, #c084fc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Главная Кнопка Сохранения */
.premium-neon-btn {
  width: 100%;
  height: auto !important;
  padding: 14px 20px !important;
  border-radius: 16px !important;
  border: none !important;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25) !important;
  transition: all 0.25s ease !important;
}

.premium-neon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.4) !important;
  filter: brightness(1.1);
}

/* Контентная зона */
.section-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.section-card-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}

/* Сетка полей */
.visit-form-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.premium-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}

/* СБРОС И КОРРЕКЦИЯ ИНПУТОВ */
.premium-input, 
.premium-textarea, 
.premium-select {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  min-height: unset !important;
  transition: all 0.2s ease !important;
}

.premium-input:focus, 
.premium-textarea:focus, 
.premium-select:focus {
  outline: none !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.premium-input.text-bold {
  font-weight: 600 !important;
  color: #f1f5f9 !important;
}

.premium-textarea {
  resize: vertical;
}

.premium-textarea.rx-accent:focus {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15) !important;
}

/* Интерактивные строки (Услуги/Товары) */
.premium-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 10px 14px;
}

.visitLineIcon {
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Нижний Пикер-Бар */
.premium-picker-bar {
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.15);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
}

.premium-picker-bar .select-wrapper {
  flex: 1;
}

.premium-picker-bar .premium-select {
  padding: 10px 12px !important;
  margin: 0 !important;
}

.premium-qty-input {
  width: 65px !important;
  height: 38px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #fff !important;
  text-align: center !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Кнопки добавить */
.add-line-btn {
  height: 38px !important;
  padding: 0 16px !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  color: #60a5fa !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

.add-line-btn:hover {
  background: #3b82f6 !important;
  color: #fff !important;
}

.add-line-btn.stock-accent {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  color: #c084fc !important;
}

.add-line-btn.stock-accent:hover {
  background: #8b5cf6 !important;
  color: #fff !important;
}

/* Круглая кнопка удаления крестиком */
.action-circle-btn.delete {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Область для файлов */
.file-upload-placeholder {
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .visit-grid-layout { grid-template-columns: 1fr; }
  .field-row-grid { grid-template-columns: 1fr; }
}
/* Навигация вкладок на странице визита */
.visit-tabs-nav {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px;
  border-radius: 14px;
  margin-bottom: 16px;
  width: max-content;
  border: 1px solid rgba(255,255,255,0.05);
}

.tab-nav-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  padding: 10px 20px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tab-nav-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.tab-nav-btn.active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  font-weight: 600 !important;
}

/* Фикс для кнопок в пикере внутри табов */
.premium-picker-bar button {
  height: 38px !important;
  padding: 0 16px !important;
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.premium-picker-bar button:hover {
  background: #3b82f6 !important;
  color: #fff !important;
}
.premium-picker-bar button.stock-btn {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #c084fc !important;
}
.premium-picker-bar button.stock-btn:hover {
  background: #8b5cf6 !important;
  color: #fff !important;
}
/* Стили для кнопки выписки */
.premium-secondary-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s ease !important;
}

.premium-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
/* ==============================================================
   ГЛОБАЛЬНЫЙ МАКОВСКИЙ DOCK СНИЗУ
============================================================== */
.mac-dock {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    
    /* СТЕКЛО, КОТОРОЕ МЕНЯЕТСЯ С ТЕМОЙ */
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    /* Добавляем обводку, которая тоже может быть акцентной */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    padding: 8px 16px;
    transition: background 0.3s ease;
}
/* При наведении подсвечиваем активным цветом */
.dock-menu .menu-item.active {
    background: var(--accent-glow) !important;
    border: 1px solid var(--accent-color) !important;
    box-shadow: 0 0 15px var(--accent-glow) !important;
}

.dock-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    align-items: center;
}

.dock-menu .menu-item {
    border-radius: 20px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-menu .menu-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dock-menu .menu-item a .dock-icon {
    font-size: 1.2rem;
}

/* Эффекты наведения (Hover) */
.dock-menu .menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}
.dock-menu .menu-item:hover a {
    color: #fff;
}

/* Активная вкладка */
.dock-menu .menu-item.active {
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.dock-menu .menu-item.active a {
    color: #fff;
    font-weight: 600;
}

/* Адаптация под телефоны */
@media (max-width: 768px) {
    .mac-dock {
        width: 90vw;
        padding: 6px 10px;
        bottom: 12px;
    }
    .dock-menu {
        justify-content: space-between;
        width: 100%;
        gap: 4px;
    }
    .dock-menu .menu-item a {
        padding: 12px;
        flex-direction: column;
        gap: 4px;
        font-size: 0.7rem;
    }
    .dock-menu .menu-item a .dock-text {
        display: none; /* Прячем текст на узких экранах, оставляем только иконки */
    }
    .dock-menu .menu-item a .dock-icon {
        font-size: 1.4rem;
    }
}
/* ==============================================================
   ДИНАМИЧЕСКИЕ ТЕМЫ ЧЕРЕЗ CSS-ПЕРЕМЕННЫЕ
============================================================== */

/* Дефолтная фиолетовая тема */
:root, body[data-theme="purple"] {
    --accent-color: #a855f7;
    --accent-glow: rgba(168, 85, 247, 0.4);
    --bg-gradient: linear-gradient(135deg, #130b2b 0%, #070412 100%);
    --card-bg: rgba(255, 255, 255, 0.02);
    --text-main: #ffffff;
}

/* Глубокая черная тема (OLED Black) */
body[data-theme="black"] {
    --accent-color: #f43f5e; /* Малиново-неоновый акцент */
    --accent-glow: rgba(244, 63, 94, 0.4);
    --bg-gradient: linear-gradient(180deg, #000000 0%, #09090b 100%);
    --card-bg: rgba(255, 255, 255, 0.01);
    --text-main: #f4f4f5;
}

/* Чистая белая тема (Светлый матовый VisionOS) */
/* --- БЕЛАЯ ТЕМА (iOS WATER GLASS STYLE) --- */
body[data-theme="white"] {
    --accent-color: #5856d6;
    --accent-glow: rgba(88, 86, 214, 0.2);
    --bg-gradient: #f2f2f7; /* Светлый iOS фон */
    --card-bg: rgba(255, 255, 255, 0.7); /* Полупрозрачность для эффекта воды */
    --text-main: #1c1c1e; /* Темно-серый текст Apple */
    --text-muted: #8e8e93;
    --input-bg: rgba(0, 0, 0, 0.05);
    --glass-border: rgba(0, 0, 0, 0.1);
}

/* --- СТЕКЛЯННЫЕ КАРТОЧКИ (VisionOS/iOS Style) --- */
.glass-card {
    background: var(--card-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px;
    padding: 24px;
    color: var(--text-main) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

/* Сделаем Dock таким же "водянистым" */
.mac-dock {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Неоновая синяя тема */
body[data-theme="blue"] {
    --accent-color: #06b6d4;
    --accent-glow: rgba(6, 182, 212, 0.4);
    --bg-gradient: linear-gradient(135deg, #041d30 0%, #020b14 100%);
    --card-bg: rgba(255, 255, 255, 0.02);
    --text-main: #ffffff;
}

/* Смарагдовая зеленая тема */
body[data-theme="green"] {
    --accent-color: #10b981;
    --accent-glow: rgba(16, 185, 129, 0.4);
    --bg-gradient: linear-gradient(135deg, #021e17 0%, #020a07 100%);
    --card-bg: rgba(255, 255, 255, 0.02);
    --text-main: #ffffff;
}

/* Привязываем глобальный фон к переменным */
body {
    background: var(--bg-gradient);
    color: var(--text-main);
    transition: background 0.5s ease, color 0.3s ease;
}

/* Элементы управления в настройках */
.theme-picker-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theme-btn-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.theme-btn-pill:hover {
    background: rgba(255, 255, 255, 0.08);
}

.theme-btn-pill.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent-color);
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Цветные индикаторы кнопок */
.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.color-dot.purple { background: #a855f7; box-shadow: 0 0 8px #a855f7; }
.color-dot.black  { background: #f43f5e; box-shadow: 0 0 8px #f43f5e; }
.color-dot.white  { background: #7c3aed; box-shadow: 0 0 8px #7c3aed; }
.color-dot.blue   { background: #06b6d4; box-shadow: 0 0 8px #06b6d4; }
.color-dot.green  { background: #10b981; box-shadow: 0 0 8px #10b981; }

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    transition: all 0.2s;
}
.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}
/* Улучшенный Dock с использованием CSS-переменных */
/* style.css — исправленный док */
.mac-dock {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    
    /* СТЕКЛО, КОТОРОЕ МЕНЯЕТСЯ С ТЕМОЙ */
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    /* Добавляем обводку, которая тоже может быть акцентной */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    padding: 8px 16px;
    transition: background 0.3s ease;
}

/* При наведении подсвечиваем активным цветом */
.dock-menu .menu-item.active {
    background: var(--accent-glow) !important;
    border: 1px solid var(--accent-color) !important;
    box-shadow: 0 0 15px var(--accent-glow) !important;
}

.dock-menu .menu-item.active a {
    color: #fff;
    font-weight: 600;
}

/* При наведении тоже используем переменную акцента, если хочешь */
.dock-menu .menu-item:hover a {
    color: var(--accent-color); 
}
/* --- БЕЛАЯ ТЕМА (iOS Water Glass Style) --- */
body[data-theme="white"] {
    --accent-color: #5856d6;
    --accent-glow: rgba(88, 86, 214, 0.15);
    --bg-gradient: linear-gradient(160deg, #e8eaf0 0%, #f2f2f7 50%, #e5e7ed 100%);
    --card-bg: rgba(255, 255, 255, 0.55);
    --text-main: #1c1c1e;
    --text-muted: #6e6e73;
    --glass-border: rgba(0, 0, 0, 0.07);
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-blur: blur(30px) saturate(200%);
    --primary-neon: #5856d6;
    --primary-glow: 0 0 15px rgba(88, 86, 214, 0.25);
    --shadow-premium: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Фон тела */
body[data-theme="white"] {
    background: var(--bg-gradient);
    color: var(--text-main);
}

/* Все стеклянные карточки */
body[data-theme="white"] .glass-card,
body[data-theme="white"] .data-table-container,
body[data-theme="white"] .calendar-container,
body[data-theme="white"] .patient-premium-card,
body[data-theme="white"] .patient-hero,
body[data-theme="white"] .glass-panel {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    color: #1c1c1e !important;
}

/* Сайдбар */
body[data-theme="white"] .sidebar {
    background: rgba(242, 242, 247, 0.75) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
}

body[data-theme="white"] .sidebar-logo,
body[data-theme="white"] .menu-item a {
    color: #1c1c1e !important;
}

body[data-theme="white"] .menu-item a {
    color: #6e6e73 !important;
}

body[data-theme="white"] .menu-item.active a {
    background: var(--accent-color) !important;
    color: #fff !important;
}

body[data-theme="white"] .menu-item a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1c1c1e !important;
}

/* Строка поиска */
body[data-theme="white"] .search-bar input {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1c1c1e !important;
    backdrop-filter: blur(20px) !important;
}

body[data-theme="white"] .search-bar input::placeholder {
    color: #8e8e93 !important;
}

body[data-theme="white"] .search-bar input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.15) !important;
}

/* Текст */
body[data-theme="white"] .text-main,
body[data-theme="white"] h1,
body[data-theme="white"] h2,
body[data-theme="white"] h3,
body[data-theme="white"] h4,
body[data-theme="white"] .section-card-title,
body[data-theme="white"] .vet-name,
body[data-theme="white"] .sidebar-patient-name,
body[data-theme="white"] .current-date-title,
body[data-theme="white"] .finance-amount {
    color: #1c1c1e !important;
}

body[data-theme="white"] .text-muted,
body[data-theme="white"] .vet-spec,
body[data-theme="white"] .sidebar-patient-breed,
body[data-theme="white"] .field-title,
body[data-theme="white"] .sidebar-meta-item .label,
body[data-theme="white"] .finance-label {
    color: #6e6e73 !important;
}

/* Таблицы */
body[data-theme="white"] .data-table th {
    color: #1c1c1e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body[data-theme="white"] .data-table td {
    color: #3c3c43 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Инпуты */
body[data-theme="white"] .premium-input,
body[data-theme="white"] .premium-textarea,
body[data-theme="white"] .premium-select {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1c1c1e !important;
}

body[data-theme="white"] .premium-input:focus,
body[data-theme="white"] .premium-textarea:focus,
body[data-theme="white"] .premium-select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.15) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Dock снизу */
body[data-theme="white"] .mac-dock {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

body[data-theme="white"] .dock-menu .menu-item a {
    color: #6e6e73 !important;
}

body[data-theme="white"] .dock-menu .menu-item:hover a {
    color: #1c1c1e !important;
}

body[data-theme="white"] .dock-menu .menu-item.active {
    background: rgba(88, 86, 214, 0.12) !important;
    border: 1px solid rgba(88, 86, 214, 0.25) !important;
}

body[data-theme="white"] .dock-menu .menu-item.active a {
    color: var(--accent-color) !important;
}

/* Кнопки вкладок */
body[data-theme="white"] .btn-tab,
body[data-theme="white"] .patient-tab-btn,
body[data-theme="white"] .tab-nav-btn {
    color: #6e6e73 !important;
}

body[data-theme="white"] .btn-tab.active,
body[data-theme="white"] .patient-tab-btn.active,
body[data-theme="white"] .tab-nav-btn.active {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #1c1c1e !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Ячейки календаря */
body[data-theme="white"] .appointment-cell {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px dashed rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.2) !important;
}

body[data-theme="white"] .appointment-cell:hover {
    background: rgba(88, 86, 214, 0.06) !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
}

/* Хедер ветеринара в календаре */
body[data-theme="white"] .vet-column-header {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

/* Профиль в сайдбаре */
body[data-theme="white"] .user-profile-badge {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

body[data-theme="white"] .user-profile-badge h4 {
    color: #1c1c1e !important;
}

body[data-theme="white"] .user-profile-badge span {
    color: #6e6e73 !important;
}

/* Finance gradient fix */
body[data-theme="white"] .finance-amount {
    background: linear-gradient(135deg, #1c1c1e 40%, #5856d6 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Настройки — карточки тем */
body[data-theme="white"] .theme-btn-pill {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1c1c1e !important;
}

body[data-theme="white"] .theme-btn-pill:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}

body[data-theme="white"] .theme-btn-pill.active {
    border-color: var(--accent-color) !important;
    background: rgba(88, 86, 214, 0.06) !important;
}

/* Премиум Экран Входа */
.auth-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: radial-gradient(circle at 50% 50%, rgba(88, 28, 135, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%);
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

.auth-glass-panel {
  display: flex;
  width: 800px; max-width: 90vw; height: 480px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.auth-art-zone {
  flex: 1;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(0, 0, 0, 0.3));
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; position: relative;
}

.pug-digital-avatar {
  font-size: 5rem;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6));
  animation: floatAnim 4s ease-in-out infinite;
}

.pug-bubble {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px 18px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem; text-align: center; line-height: 1.4;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.auth-form-zone {
  width: 420px; padding: 44px;
  display: flex; flex-direction: column; justify-content: center;
}

.auth-header h1 {
  font-size: 1.8rem; margin: 0; color: #fff; font-weight: 700;
}
.auth-header h1 span { color: #c084fc; }
.auth-header p {
  margin: 6px 0 28px 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.5);
}

.auth-field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px;
}
.auth-field label {
  font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.5px;
}
.auth-field input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px; border-radius: 12px;
  color: #fff; font-size: 1rem; transition: all 0.2s ease;
}
.auth-field input:focus {
  outline: none; border-color: #c084fc; background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.auth-submit-btn {
  width: 100%; padding: 14px; background: #9333ea;
  color: #fff; border: none; border-radius: 12px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.3);
}
.auth-submit-btn:hover {
  background: #a855f7; transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(147, 51, 234, 0.5);
}

.auth-error-msg {
  background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171; padding: 10px 14px; border-radius: 10px;
  font-size: 0.85rem; margin-bottom: 20px; font-weight: 500;
}

@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* --- iOS BLUE ТЕМА (замена белой) --- */
body[data-theme="white"] {
    --accent-color: #007aff;
    --accent-glow: rgba(0, 122, 255, 0.15);
    --bg-gradient: linear-gradient(145deg, #dde3ec 0%, #e8ecf2 40%, #d8dfe9 100%);
    --card-bg: rgba(255, 255, 255, 0.6);
    --text-main: #1c1c1e;
    --text-muted: #8e8e93;
    --glass-border: rgba(255, 255, 255, 0.9);
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-blur: blur(30px) saturate(180%);
    --primary-neon: #007aff;
    --primary-glow: 0 4px 16px rgba(0, 122, 255, 0.2);
    --shadow-premium: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
}

body[data-theme="white"] {
    background: var(--bg-gradient);
    color: var(--text-main);
}

body[data-theme="white"] .glass-card,
body[data-theme="white"] .data-table-container,
body[data-theme="white"] .calendar-container,
body[data-theme="white"] .patient-premium-card,
body[data-theme="white"] .patient-hero,
body[data-theme="white"] .glass-panel,
body[data-theme="white"] .owner-hero {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    color: #1c1c1e !important;
}

body[data-theme="white"] .sidebar {
    background: rgba(220, 228, 238, 0.75) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-right: 0.5px solid rgba(255, 255, 255, 0.7) !important;
}

body[data-theme="white"] .sidebar-logo { color: #1c1c1e !important; }
body[data-theme="white"] .menu-item a { color: #6e6e73 !important; }
body[data-theme="white"] .menu-item a:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #1c1c1e !important;
}
body[data-theme="white"] .menu-item.active a {
    background: #007aff !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

body[data-theme="white"] .search-bar input {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.85) !important;
    color: #1c1c1e !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
body[data-theme="white"] .search-bar input::placeholder { color: #8e8e93 !important; }
body[data-theme="white"] .search-bar input:focus {
    border-color: rgba(0, 122, 255, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
}

body[data-theme="white"] h1,
body[data-theme="white"] h2,
body[data-theme="white"] h3,
body[data-theme="white"] h4,
body[data-theme="white"] .section-card-title,
body[data-theme="white"] .vet-name,
body[data-theme="white"] .sidebar-patient-name,
body[data-theme="white"] .current-date-title { color: #1c1c1e !important; }

body[data-theme="white"] .text-muted,
body[data-theme="white"] .vet-spec,
body[data-theme="white"] .sidebar-patient-breed,
body[data-theme="white"] .field-title,
body[data-theme="white"] .sidebar-meta-item .label,
body[data-theme="white"] .finance-label { color: #8e8e93 !important; }

body[data-theme="white"] .data-table th {
    color: #1c1c1e !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
}
body[data-theme="white"] .data-table td {
    color: #3c3c43 !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04) !important;
}

body[data-theme="white"] .premium-input,
body[data-theme="white"] .premium-textarea,
body[data-theme="white"] .premium-select {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    color: #1c1c1e !important;
}
body[data-theme="white"] .premium-input:focus,
body[data-theme="white"] .premium-textarea:focus,
body[data-theme="white"] .premium-select:focus {
    border-color: rgba(0, 122, 255, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="white"] .mac-dock {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
body[data-theme="white"] .dock-menu .menu-item a { color: #8e8e93 !important; }
body[data-theme="white"] .dock-menu .menu-item:hover a { color: #1c1c1e !important; }
body[data-theme="white"] .dock-menu .menu-item.active {
    background: rgba(0, 122, 255, 0.1) !important;
    border: 0.5px solid rgba(0, 122, 255, 0.25) !important;
}
body[data-theme="white"] .dock-menu .menu-item.active a { color: #007aff !important; }

body[data-theme="white"] .btn-tab,
body[data-theme="white"] .patient-tab-btn,
body[data-theme="white"] .tab-nav-btn { color: #8e8e93 !important; }
body[data-theme="white"] .btn-tab.active,
body[data-theme="white"] .patient-tab-btn.active,
body[data-theme="white"] .tab-nav-btn.active {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1c1c1e !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body[data-theme="white"] .appointment-cell {
    background: rgba(255, 255, 255, 0.35) !important;
    border: 1px dashed rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.2) !important;
}
body[data-theme="white"] .appointment-cell:hover {
    background: rgba(0, 122, 255, 0.06) !important;
    border: 1px solid rgba(0, 122, 255, 0.3) !important;
    color: #007aff !important;
}

body[data-theme="white"] .vet-column-header {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.85) !important;
}
body[data-theme="white"] .user-profile-badge {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.8) !important;
}
body[data-theme="white"] .user-profile-badge h4 { color: #1c1c1e !important; }
body[data-theme="white"] .user-profile-badge span { color: #8e8e93 !important; }

body[data-theme="white"] .finance-amount {
    background: linear-gradient(135deg, #1c1c1e 40%, #007aff 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body[data-theme="white"] .theme-btn-pill {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    color: #1c1c1e !important;
}
body[data-theme="white"] .theme-btn-pill.active {
    border-color: #007aff !important;
    background: rgba(0, 122, 255, 0.06) !important;
}

body[data-theme="white"] .btn-primary,
body[data-theme="white"] .premium-neon-btn {
    background: #007aff !important;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3) !important;
}
#staffDrawer.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
}
#staffDrawer {
    opacity: 0;
    pointer-events: none;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(10, 5, 20, 0.7);
    backdrop-filter: blur(15px);
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

#staffDrawer.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* ===== DOCK — ФИКС ДЛЯ ВСЕХ ТЕМ ===== */

/* Сброс глобального белого фона dock */
.mac-dock {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Фиолетовая тема */
body[data-theme="purple"] .mac-dock {
    background: rgba(147, 51, 234, 0.15) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 10px 30px rgba(147, 51, 234, 0.2) !important;
}

/* Чёрная тема */
body[data-theme="black"] .mac-dock {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(244, 63, 94, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* iOS Blue / Белая тема */
body[data-theme="white"] .mac-dock {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Синяя тема */
body[data-theme="blue"] .mac-dock {
    background: rgba(6, 182, 212, 0.1) !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.15) !important;
}

/* Зелёная тема */
body[data-theme="green"] .mac-dock {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15) !important;
}

/* Цвет иконок и текста в dock по теме */
body[data-theme="purple"] .dock-menu .menu-item a { color: rgba(255,255,255,0.6) !important; }
body[data-theme="black"] .dock-menu .menu-item a { color: rgba(255,255,255,0.5) !important; }
body[data-theme="blue"] .dock-menu .menu-item a { color: rgba(255,255,255,0.5) !important; }
body[data-theme="green"] .dock-menu .menu-item a { color: rgba(255,255,255,0.5) !important; }

/* Активный элемент dock по теме */
body[data-theme="purple"] .dock-menu .menu-item.active {
    background: rgba(168, 85, 247, 0.3) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
}
body[data-theme="black"] .dock-menu .menu-item.active {
    background: rgba(244, 63, 94, 0.2) !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
}
body[data-theme="blue"] .dock-menu .menu-item.active {
    background: rgba(6, 182, 212, 0.2) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
}
body[data-theme="green"] .dock-menu .menu-item.active {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
#staffDrawer.open {
  opacity: 1;
  pointer-events: auto;
}

#staffDrawer.open {
  display: flex; /* или block, в зависимости от верстки */
  opacity: 1;
  pointer-events: auto;
}
/* ==========================================================================
   PUGCRM - CALENDAR PREMIUM 2026 PRO FIXES (visionOS GLASS EFFECT)
   ========================================================================== */

/* Обновленный контейнер сетки */
.calendar-grid {
    display: grid;
    grid-template-columns: 80px repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 10px;
    min-width: max-content;
}

/* Фикс липких элементов: идеальное стекло без швов */
.time-column-header,
.time-cell {
    position: sticky;
    left: 0;
    background: rgba(20, 10, 35, 0.7) !important;
    backdrop-filter: blur(25px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(140%) !important;
    border-right: 1px solid var(--glass-border);
    z-index: 20;
    font-weight: 600;
    color: var(--text-muted);
}

body[data-theme="white"] .time-column-header,
body[data-theme="white"] .time-cell {
    background: rgba(220, 228, 238, 0.8) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    color: #1c1c1e !important;
}

/* Премиальные карточки визитов (записей на приём) */
.calendar-appointment-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Левая цветная полоса статуса визита */
.calendar-appointment-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-color, var(--primary-neon));
    transition: var(--transition);
}

/* Статусы записей */
.calendar-appointment-card.status-planned::before  { background: var(--primary-neon); }
.calendar-appointment-card.status-active::before   { background: var(--color-warning); }
.calendar-appointment-card.status-done::before     { background: var(--color-success); }

/* Эффект парения при наведении */
.calendar-appointment-card:hover {
    transform: translateY(-3px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 15px var(--accent-glow);
}

/* Контент внутри карточки записи */
.app-card-time {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-neon);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-card-pet {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}

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

/* Адаптация карточек под БЕЛУЮ ТЕМУ (iOS Water Glass) */
body[data-theme="white"] .calendar-appointment-card {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
body[data-theme="white"] .calendar-appointment-card:hover {
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}
body[data-theme="white"] .app-card-time {
    color: var(--accent-color) !important;
}

/* Красивая сетка часов (фоновые полосы времени внутри календаря) */
.time-grid-line {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
    width: 100%;
    height: 0;
}
body[data-theme="white"] .time-grid-line {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}

/* Индикатор текущего времени (Красная неоновая нить 2026 года) */
.current-time-indicator {
    position: absolute;
    left: 80px;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff3333 0%, rgba(255, 51, 51, 0) 100%);
    box-shadow: 0 0 8px #ff3333;
    z-index: 15;
    pointer-events: none;
}
/* ==========================================================================
   DOC.PUG CALENDAR — EMERGENCY RESTORE PATCH
   Под новые классы renderCalendarTab()
   ========================================================================== */

.calendarCard {
  width: 100%;
  padding: 28px;
  border-radius: 26px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  backdrop-filter: var(--glass-blur, blur(24px));
  -webkit-backdrop-filter: var(--glass-blur, blur(24px));
  box-shadow: var(--shadow-premium, 0 18px 60px rgba(0,0,0,0.25));
  overflow: hidden;
}

.calendarHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
}

.calendarHeader h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-main, #fff);
}

.hint {
  color: var(--text-muted, rgba(255,255,255,0.58));
  font-size: 0.92rem;
  line-height: 1.4;
}

.calendarModes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

button.primary,
button.ghost,
.miniBtn {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main, #fff);
  cursor: pointer;
  transition: 0.2s ease;
}

button.primary {
  background: var(--accent-color, #a855f7);
  box-shadow: 0 0 16px var(--accent-glow, rgba(168,85,247,0.35));
}

button.ghost,
.miniBtn {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted, rgba(255,255,255,0.68));
}

button.ghost:hover,
.miniBtn:hover {
  color: #fff;
  background: rgba(255,255,255,0.09);
  border-color: var(--accent-color, #a855f7);
}

.calendarTop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 20px;
}

.calendarDate {
  min-width: 160px;
  text-align: center;
  font-weight: 800;
  color: var(--text-main, #fff);
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ===== День календаря ===== */

.calendarWorkArea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}

.calendarDayGrid {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.calTimeCol {
  position: sticky;
  left: 0;
  z-index: 5;
}

.calTimeHead,
.calTime {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, rgba(255,255,255,0.58));
  font-weight: 700;
  font-size: 0.86rem;
}

.calTimeHead {
  height: 84px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calDoctorsGrid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 12px;
  min-width: max-content;
}

.calDoctorCol {
  min-width: 250px;
}

.calDoctorHead {
  height: 84px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calDoctorName {
  font-weight: 800;
  color: var(--text-main, #fff);
  font-size: 0.98rem;
}

.calDoctorMeta {
  margin-top: 4px;
  color: var(--text-muted, rgba(255,255,255,0.55));
  font-size: 0.82rem;
}

.calStaffSpecializations {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.calStaffSpecialization {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 19px;
  padding: 2px 7px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--specialization-color, var(--accent-color, #a855f7)) 45%, transparent);
  background: color-mix(in srgb, var(--specialization-color, var(--accent-color, #a855f7)) 14%, transparent);
  color: var(--text-main, #fff);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calStaffSpecialization.is-empty {
  opacity: 0.65;
}

.calSlot {
  min-height: 86px;
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.075);
  transition: 0.2s ease;
  position: relative;
}

.calSlot:hover {
  background: rgba(168,85,247,0.08);
  border-color: var(--accent-color, #a855f7);
}

.calSlotDrop {
  background: rgba(168,85,247,0.14) !important;
  border-color: var(--accent-color, #a855f7) !important;
  box-shadow: 0 0 18px var(--accent-glow, rgba(168,85,247,0.3));
}

.calSlotCovered {
  opacity: 0.38;
}

.calEmptySlot {
  height: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.26);
  font-weight: 800;
  cursor: pointer;
}

.calEmptySlot:hover {
  color: var(--accent-color, #a855f7);
}

.calEventCard {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px;
  padding: 11px 12px;
  color: var(--text-main, #fff);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  cursor: pointer;
  overflow: hidden;
}

.calEventCard:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.1);
}

.calEventTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.calEventTitle {
  font-weight: 800;
  font-size: 0.92rem;
}

.calEventTime,
.calEventMeta {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255,255,255,0.62));
}

.calEventDelete {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,80,80,0.25);
  background: rgba(255,80,80,0.12);
  color: #ff8a8a;
  cursor: pointer;
}

/* ===== Правая панель ветеринаров ===== */

.calStaffPanel {
  position: sticky;
  top: 24px;
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}

.calStaffPanelHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.calStaffPanelTitle {
  font-weight: 800;
  color: var(--text-main, #fff);
}

.calStaffPanelSub {
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255,255,255,0.54));
}

.calStaffDragList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Неделя ===== */

.weekCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(160px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.weekDayCol {
  min-height: 420px;
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.weekDayHead {
  padding: 14px;
  background: rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.weekDayName {
  font-weight: 900;
  color: var(--text-main, #fff);
}

.weekDayDate {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-muted, rgba(255,255,255,0.55));
}

.weekDayBody {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weekEventCard {
  border-radius: 15px;
  padding: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.weekEventTime {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-color, #a855f7);
}

.weekEventTitle {
  margin-top: 5px;
  font-weight: 800;
  color: var(--text-main, #fff);
}

.weekEventVet,
.weekEventMeta,
.weekEmpty {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255,255,255,0.55));
}

/* ===== Ветеринари / Schedule ===== */

.specPanel,
.vetList {
  margin-top: 18px;
}

.specPanel {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}

.specPanelHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.specPanelTitle {
  font-weight: 900;
  color: var(--text-main, #fff);
}

.specList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.specPill {
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-main, #fff);
  font-weight: 700;
}

.vetList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staffGroupHeader {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 2px 2px;
  color: var(--text-main, #fff);
  font-size: 15px;
  font-weight: 900;
}

.staffGroupHeader small {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--module-accent, var(--accent-color, #a855f7));
  background: var(--module-accent-soft, rgba(168,85,247,0.13));
  border: 1px solid var(--module-border, rgba(255,255,255,0.1));
}

.vetCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}

.scheduleName {
  font-weight: 900;
  color: var(--text-main, #fff);
}

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

.scheduleStatus {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted, rgba(255,255,255,0.65));
  cursor: pointer;
  font-weight: 800;
}

.scheduleStatus.active {
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.35);
  color: #6ee7a8;
}

/* ===== Белая тема ===== */

body[data-theme="white"] .calendarCard,
body[data-theme="white"] .calDoctorHead,
body[data-theme="white"] .calStaffPanel,
body[data-theme="white"] .weekDayCol,
body[data-theme="white"] .specPanel,
body[data-theme="white"] .vetCard {
  background: rgba(255,255,255,0.62) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #1c1c1e !important;
}

body[data-theme="white"] .calendarHeader h2,
body[data-theme="white"] .calendarDate,
body[data-theme="white"] .calDoctorName,
body[data-theme="white"] .calStaffPanelTitle,
body[data-theme="white"] .weekDayName,
body[data-theme="white"] .weekEventTitle,
body[data-theme="white"] .specPanelTitle,
body[data-theme="white"] .specPill,
body[data-theme="white"] .scheduleName {
  color: #1c1c1e !important;
}

body[data-theme="white"] .hint,
body[data-theme="white"] .calDoctorMeta,
body[data-theme="white"] .calStaffPanelSub,
body[data-theme="white"] .calTime,
body[data-theme="white"] .weekDayDate,
body[data-theme="white"] .weekEventVet,
body[data-theme="white"] .weekEventMeta,
body[data-theme="white"] .weekEmpty {
  color: #6e6e73 !important;
}

body[data-theme="white"] .calSlot {
  background: rgba(255,255,255,0.36) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body[data-theme="white"] .calEventCard,
body[data-theme="white"] .weekEventCard,
body[data-theme="white"] .specPill {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.07) !important;
  color: #1c1c1e !important;
}

@media (max-width: 1100px) {
  .calendarWorkArea {
    grid-template-columns: 1fr;
  }

  .calStaffPanel {
    position: static;
  }
}
/* FIX: старые JS-модалки открываются через .open, а не .active */
.modal-overlay.open,
.modal.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 999999 !important;
}

.modal-overlay:not(.open):not(.active),
.modal:not(.open):not(.active) {
  display: none;
}
/* =======================================================
   PREMIUM VISIT MODAL v2
======================================================= */

#visitModal .modal-card{
    width:min(1120px,96vw);
    max-height:92vh;
    overflow:auto;

    padding:34px;

    border-radius:28px;

    background:
        linear-gradient(180deg,#2b2042,#1d1631);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 1px rgba(255,255,255,.05);
}

.visitHeader{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:24px;
}

.visitHeader h2{
    margin:0;
    font-size:34px;
    font-weight:700;
}

.visitHeader p{
    margin-top:6px;
    color:#9e97b8;
}

.visitGrid{
    display:grid;
    grid-template-columns:520px 1fr;
    gap:24px;
}

.visitBlock{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.07);

    border-radius:22px;

    padding:22px;
}

.visitBlockTitle{

    display:flex;
    align-items:center;
    gap:10px;

    font-size:24px;
    font-weight:700;

    margin-bottom:18px;
}

.visitBlockTitle span{

    width:36px;
    height:36px;

    border-radius:12px;

    background:#8d52ff;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 0 24px rgba(141,82,255,.55);
}

.visitSearch{

    background:#2b2442;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    padding:14px 18px;

    color:white;
}

.patientSearchResults{

    margin-top:14px;

    display:flex;
    flex-direction:column;
    gap:10px;

    max-height:360px;

    overflow:auto;
}

.patientSearchItem{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:12px 16px;

    border-radius:14px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.05);

    cursor:pointer;

    transition:.2s;
}

.patientSearchItem:hover{

    background:#342754;

    border-color:#8d52ff;

    transform:translateY(-2px);
}

.patientLeft{

    display:flex;
    align-items:center;
    gap:14px;
}

.patientAvatar{

    width:54px;
    height:54px;

    border-radius:50%;

    background:linear-gradient(135deg,#9959ff,#6b37ff);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;
}

.patientInfo strong{

    display:block;

    font-size:17px;
}

.patientInfo small{

    color:#aaa2c8;
}

.patientSpecies{

    padding:6px 14px;

    border-radius:999px;

    background:#5c2bb8;

    color:white;

    font-size:13px;
}

.visitFields{

    display:grid;
    gap:18px;
}

.visitFields.two{

    grid-template-columns:1fr 1fr;
}

.visitFooter{

    margin-top:28px;

    display:flex;

    justify-content:flex-end;

    gap:16px;
}

.visitFooter button{

    min-width:190px;
}
/* =======================================================
   DOC.PUG — PREMIUM VISIT MODAL V2
======================================================= */

.pugVisitOverlay.open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(168, 85, 247, 0.2), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(124, 58, 237, 0.22), transparent 30%),
    rgba(5, 3, 14, 0.72) !important;
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}

.pugVisitModal {
  width: min(1180px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 30px;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(49, 35, 82, 0.92), rgba(17, 12, 35, 0.94)),
    radial-gradient(circle at top left, rgba(168, 85, 247, 0.22), transparent 35%);
  border: 1px solid rgba(196, 181, 253, 0.22);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.58),
    0 0 70px rgba(168, 85, 247, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  animation: pugVisitPop 0.24s ease both;
}

@keyframes pugVisitPop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */

.pugVisitHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.pugVisitHeadLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pugVisitIcon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  background: linear-gradient(135deg, #a855f7, #6d28d9);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.55);
}

.pugVisitTitle {
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.pugVisitSub {
  margin-top: 6px;
  font-size: 0.98rem;
  color: rgba(233, 213, 255, 0.68);
}

.pugVisitClose {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s ease;
}

.pugVisitClose:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(196, 181, 253, 0.35);
  transform: translateY(-1px);
}

/* Body layout */

.pugVisitBody {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1fr);
  gap: 16px;
  max-height: calc(92vh - 170px);
  overflow: auto;
  padding-right: 6px;
}

.pugVisitBody::-webkit-scrollbar,
.pugPatientResults::-webkit-scrollbar {
  width: 8px;
}

.pugVisitBody::-webkit-scrollbar-thumb,
.pugPatientResults::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.35);
}

.pugVisitSection {
  border-radius: 22px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.105);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 34px rgba(0, 0, 0, 0.18);
}

.pugVisitPatientBlock {
  border-color: rgba(168, 85, 247, 0.38);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.08),
    0 16px 45px rgba(0, 0, 0, 0.2);
}

.pugVisitMedicalBlock {
  grid-column: 1 / -1;
}

.pugSectionTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 1.15rem;
  color: #fff;
}

.pugSectionTitle span {
  color: #c084fc;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.5));
}

.pugSectionTitle strong {
  font-weight: 850;
  letter-spacing: -0.02em;
}

/* Fields */

.pugVisitFieldsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

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

.pugVisitField > span {
  color: rgba(237, 233, 254, 0.72);
  font-size: 0.88rem;
  font-weight: 650;
}

.pugVisitInput {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  background: rgba(10, 7, 25, 0.36);
  color: #fff;
  padding: 12px 14px;
  font-size: 0.96rem;
  outline: none;
  transition: 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.pugVisitInput::placeholder {
  color: rgba(233, 213, 255, 0.38);
}

.pugVisitInput:focus {
  border-color: rgba(168, 85, 247, 0.78);
  background: rgba(20, 13, 42, 0.55);
  box-shadow:
    0 0 0 4px rgba(168, 85, 247, 0.13),
    0 0 22px rgba(168, 85, 247, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pugVisitTextarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.45;
}

/* Search */

.pugSearchWrap {
  position: relative;
}

.pugSearchIcon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(233, 213, 255, 0.56);
  z-index: 1;
}

.pugVisitSearch {
  padding-left: 42px;
}

.pugPatientResults {
  margin-top: 14px;
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pugPatientResults .hint {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Patient result cards */

.patientSearchItem {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  cursor: pointer;
  transition: 0.2s ease;
  position: relative;
  overflow: hidden;
}

.patientSearchItem::before {
  content: "🐾";
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(91, 33, 182, 0.9));
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.28);
  font-size: 1.25rem;
}

.patientSearchItem:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.55) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(255, 255, 255, 0.055)) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.patientSearchItem strong {
  display: block;
  font-size: 1rem;
  font-weight: 850;
  color: #fff;
}

.patientSearchItem span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: rgba(233, 213, 255, 0.68);
}

.pugAddPatientBtn {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border-radius: 15px;
  border: 1px dashed rgba(168, 85, 247, 0.55);
  background: rgba(168, 85, 247, 0.065);
  color: #c084fc;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.pugAddPatientBtn:hover {
  background: rgba(168, 85, 247, 0.14);
  color: #fff;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.16);
}
/* =======================================================
   DOC.PUG — PREMIUM VISIT MODAL V2 / PART 2
======================================================= */

.pugVisitMedicalGrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.45fr;
  gap: 18px;
  align-items: start;
}

.pugFieldWide {
  grid-row: span 2;
}

.pugFieldWideRight {
  grid-column: 2 / -1;
}

.pugVisitFoot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.095);
}

.pugVisitCancel,
.pugVisitSave {
  min-height: 52px;
  border-radius: 15px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.96rem;
  font-weight: 850;
  cursor: pointer;
  transition: 0.22s ease;
}

.pugVisitCancel {
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
}

.pugVisitCancel:hover {
  background: rgba(255, 255, 255, 0.105);
  color: #fff;
  transform: translateY(-1px);
}

.pugVisitSave {
  min-width: 230px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-color: rgba(216, 180, 254, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow:
    0 0 28px rgba(168, 85, 247, 0.38),
    0 12px 30px rgba(124, 58, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pugVisitSave:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 0 38px rgba(168, 85, 247, 0.52),
    0 18px 42px rgba(124, 58, 237, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Date/time native controls polish */

.pugVisitInput[type="date"],
.pugVisitInput[type="time"],
.pugVisitInput select {
  color-scheme: dark;
}

.pugVisitInput::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.75;
  cursor: pointer;
}

/* Better select look */

select.pugVisitInput {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(233, 213, 255, 0.8) 50%),
    linear-gradient(135deg, rgba(233, 213, 255, 0.8) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 22px,
    calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

select.pugVisitInput option {
  background: #171027;
  color: #fff;
}

/* Cleaner fallback for old modal globals */

#visitModal.modal-overlay.open,
#visitModal.modal.open {
  display: flex !important;
}

#visitModal:not(.open) {
  display: none !important;
}

/* Patient block hidden/open still controlled by JS */

#visitPatientBlock[style*="display: block"] {
  display: block !important;
}

/* Small selected visual polish */

#visitPatientSearch:not(:placeholder-shown) {
  border-color: rgba(168, 85, 247, 0.55);
}

/* Soft inner separators */

.pugVisitDetailsBlock,
.pugVisitMedicalBlock {
  position: relative;
}

.pugVisitDetailsBlock::after,
.pugVisitMedicalBlock::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    transparent 32%,
    rgba(168, 85, 247, 0.045)
  );
  opacity: 0.7;
}

/* White / iOS theme support */

body[data-theme="white"] .pugVisitOverlay.open {
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 122, 255, 0.16), transparent 28%),
    radial-gradient(circle at 84% 74%, rgba(88, 86, 214, 0.14), transparent 32%),
    rgba(235, 239, 247, 0.72) !important;
}

body[data-theme="white"] .pugVisitModal {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 240, 248, 0.78)) !important;
  color: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

body[data-theme="white"] .pugVisitTitle,
body[data-theme="white"] .pugSectionTitle,
body[data-theme="white"] .pugSectionTitle strong,
body[data-theme="white"] .patientSearchItem strong {
  color: #1c1c1e !important;
}

body[data-theme="white"] .pugVisitSub,
body[data-theme="white"] .pugVisitField > span,
body[data-theme="white"] .patientSearchItem span {
  color: #6e6e73 !important;
}

body[data-theme="white"] .pugVisitSection,
body[data-theme="white"] .patientSearchItem {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="white"] .pugVisitInput {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1c1c1e !important;
}

body[data-theme="white"] .pugVisitInput::placeholder {
  color: rgba(60, 60, 67, 0.35) !important;
}

body[data-theme="white"] .pugVisitClose,
body[data-theme="white"] .pugVisitCancel {
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1c1c1e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Responsive */

@media (max-width: 980px) {
  .pugVisitModal {
    width: 96vw;
    padding: 20px;
    border-radius: 24px;
  }

  .pugVisitBody {
    grid-template-columns: 1fr;
    max-height: calc(92vh - 160px);
  }

  .pugVisitMedicalBlock {
    grid-column: auto;
  }

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

  .pugFieldWide,
  .pugFieldWideRight {
    grid-column: auto;
    grid-row: auto;
  }

  .pugVisitFoot {
    flex-direction: column-reverse;
  }

  .pugVisitCancel,
  .pugVisitSave {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .pugVisitOverlay.open {
    padding: 10px;
  }

  .pugVisitHead {
    align-items: center;
  }

  .pugVisitIcon {
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
  }

  .pugVisitTitle {
    font-size: 1.45rem;
  }

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

  .pugVisitClose {
    width: 44px;
    height: 44px;
  }
}
/* =======================================================
   VISIT MODAL — THEME ADAPTIVE PATCH
======================================================= */

.pugVisitModal {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 18%, rgba(20,12,35,.94)), rgba(10,7,22,.95)) !important;
  border-color: color-mix(in srgb, var(--accent-color) 34%, rgba(255,255,255,.12)) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.58),
    0 0 70px color-mix(in srgb, var(--accent-color) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.pugVisitIcon,
.pugVisitSave {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 72%, #000)) !important;
  box-shadow:
    0 0 28px var(--accent-glow),
    0 12px 30px color-mix(in srgb, var(--accent-color) 26%, transparent) !important;
}

.pugVisitPatientBlock {
  border-color: color-mix(in srgb, var(--accent-color) 44%, rgba(255,255,255,.12)) !important;
}

.pugSectionTitle span,
.pugAddPatientBtn {
  color: var(--accent-color) !important;
}

.pugVisitInput:focus {
  border-color: color-mix(in srgb, var(--accent-color) 78%, white) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent-color) 14%, transparent),
    0 0 22px color-mix(in srgb, var(--accent-color) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.pugAddPatientBtn {
  border-color: color-mix(in srgb, var(--accent-color) 55%, rgba(255,255,255,.15)) !important;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent) !important;
}

.pugAddPatientBtn:hover {
  background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
}

.patientSearchItem::before {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #000)) !important;
}

.patientSearchItem:hover {
  border-color: color-mix(in srgb, var(--accent-color) 55%, rgba(255,255,255,.1)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 18%, transparent), rgba(255,255,255,.055)) !important;
}
/* =======================================================
   DOC.PUG — MONTH CALENDAR
======================================================= */

.monthWeekHead {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin: 18px 0 10px;
}

.monthWeekHead div {
  color: var(--text-muted, rgba(255,255,255,.55));
  font-weight: 800;
  font-size: .85rem;
  text-align: center;
  text-transform: uppercase;
}

.monthGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 10px;
}

.monthDay {
  min-height: 150px;
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: .2s ease;
  overflow: hidden;
}

.monthDay:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color, #a855f7);
  background: color-mix(in srgb, var(--accent-color) 10%, rgba(255,255,255,.04));
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.monthDay.muted {
  opacity: .35;
}

.monthDay.today {
  border-color: var(--accent-color, #a855f7);
  box-shadow: 0 0 0 1px var(--accent-glow, rgba(168,85,247,.3));
}

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

.monthDayNum {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--text-main, #fff);
  background: rgba(255,255,255,.055);
}

.monthVisitCount {
  font-size: .72rem;
  color: var(--accent-color, #a855f7);
  font-weight: 800;
}

.monthStaffList {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.monthStaffPill {
  padding: 7px 9px;
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text-main, #fff);
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthEmptyShift {
  padding: 8px;
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.07);
  color: var(--text-muted, rgba(255,255,255,.45));
  font-size: .78rem;
}

.monthMore {
  color: var(--accent-color, #a855f7);
  font-size: .78rem;
  font-weight: 850;
  padding-left: 4px;
}

body[data-theme="white"] .monthDay,
body[data-theme="white"] .monthStaffPill {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(0,0,0,.07) !important;
  color: #1c1c1e !important;
}

body[data-theme="white"] .monthDayNum {
  color: #1c1c1e !important;
  background: rgba(255,255,255,.75) !important;
}

@media (max-width: 1100px) {
  .monthGrid,
  .monthWeekHead {
    grid-template-columns: repeat(7, 150px);
    overflow-x: auto;
  }
}
/* MONTH SHIFT DRAWER */

.monthShiftDrawer {
  display: none;
  margin-top: 18px;
}

.monthShiftDrawer.open {
  display: block;
}

.monthDrawerCard {
  border-radius: 22px;
  padding: 20px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
}

.monthDrawerHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.monthDrawerTitle {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-main, #fff);
}

.monthDrawerStaff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.monthShiftToggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-main, #fff);
  cursor: pointer;
  transition: .2s ease;
}

.monthShiftToggle:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.monthShiftToggle b {
  color: var(--text-muted);
  font-size: .8rem;
}

.monthShiftToggle.active {
  background: color-mix(in srgb, var(--accent-color) 16%, rgba(255,255,255,.04));
  border-color: color-mix(in srgb, var(--accent-color) 55%, rgba(255,255,255,.1));
  box-shadow: 0 0 18px var(--accent-glow);
}

.monthShiftToggle.active b {
  color: var(--accent-color);
}

.monthDrawerActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
/* =======================================================
   DOC.PUG — MONTH SHIFT DRAWER
======================================================= */

.monthShiftDrawer {
  display: none;
  margin-top: 18px;
}

.monthShiftDrawer.open {
  display: block;
}

.monthDrawerCard {
  border-radius: 24px;
  padding: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
}

.monthDrawerHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.monthDrawerTitle {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-main, #fff);
}

.monthDrawerQuick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.monthDrawerStaff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.monthShiftToggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 15px;
  border-radius: 17px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-main, #fff);
  cursor: pointer;
  transition: .2s ease;
}

.monthShiftToggle:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.monthShiftToggle span {
  font-weight: 850;
}

.monthShiftToggle b {
  color: var(--text-muted);
  font-size: .8rem;
}

.monthShiftToggle.active {
  background: color-mix(in srgb, var(--accent-color) 16%, rgba(255,255,255,.04));
  border-color: color-mix(in srgb, var(--accent-color) 55%, rgba(255,255,255,.1));
  box-shadow: 0 0 18px var(--accent-glow);
}

.monthShiftToggle.active b {
  color: var(--accent-color);
}

.monthDrawerActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.monthPlannerLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.monthPlannerMain {
  min-width: 0;
}

.monthShiftDrawer {
  display: block;
  position: sticky;
  top: 24px;
  z-index: 20;
}

.monthDrawerPlaceholder,
.monthDrawerCard {
  border-radius: 24px;
  padding: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.monthDrawerPlaceholder {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.monthDrawerPlaceholderIcon {
  font-size: 2rem;
}

.monthDrawerPlaceholderTitle {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-main, #fff);
}

.monthDay.selected {
  border-color: var(--accent-color, #a855f7) !important;
  box-shadow: 0 0 0 1px var(--accent-glow), 0 16px 38px rgba(0,0,0,.24);
}

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

.monthDrawerActions {
  flex-direction: column;
}

.monthDrawerActions button {
  width: 100%;
}

@media (max-width: 1250px) {
  .monthPlannerLayout {
    grid-template-columns: 1fr;
  }

  .monthShiftDrawer {
    position: static;
  }
}
/* MONTH PLANNER SIZE FIX */

.monthPlannerLayout {
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 14px !important;
}

.monthGrid {
  grid-template-columns: repeat(7, minmax(92px, 1fr)) !important;
  gap: 8px !important;
}

.monthDay {
  min-height: 118px !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

.monthDrawerCard,
.monthDrawerPlaceholder {
  padding: 14px !important;
  border-radius: 20px !important;
}

.monthDrawerTitle {
  font-size: 1rem !important;
}

.monthDrawerQuick {
  gap: 8px !important;
}

.monthDrawerQuick .ghost {
  padding: 8px 10px !important;
  font-size: 0.78rem !important;
}

.monthShiftToggle {
  padding: 11px !important;
  border-radius: 14px !important;
  font-size: 0.82rem !important;
}

.monthShiftToggle b {
  font-size: 0.72rem !important;
}

.monthDrawerActions {
  gap: 8px !important;
}

.monthDrawerActions button {
  padding: 10px 12px !important;
  font-size: 0.82rem !important;
}

.monthStaffPill,
.monthEmptyShift {
  font-size: 0.72rem !important;
  padding: 6px 8px !important;
}
/* MONTH BULK SCHEDULE */

.monthBulkBox {
  margin: 14px 0 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.monthBulkTitle {
  font-weight: 900;
  color: var(--text-main, #fff);
  margin-bottom: 12px;
}

.monthBulkField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.monthBulkField span {
  font-size: .76rem;
  font-weight: 800;
  color: var(--text-muted, rgba(255,255,255,.58));
}

.monthBulkField input,
.monthBulkField select {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
  color: var(--text-main, #fff);
  padding: 0 10px;
  outline: none;
}

.monthBulkDates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.monthBulkDays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 10px 0 12px;
}

.monthBulkDay {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--text-muted, rgba(255,255,255,.62));
  font-weight: 900;
  cursor: pointer;
}

.monthBulkDay.active {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color) 55%, rgba(255,255,255,.1));
  background: color-mix(in srgb, var(--accent-color) 16%, rgba(255,255,255,.04));
  box-shadow: 0 0 14px var(--accent-glow);
}

.monthBulkApply {
  width: 100%;
}
.monthDay.rangeSelected {
  border-color: var(--accent-color, #a855f7) !important;
  background: color-mix(in srgb, var(--accent-color) 16%, rgba(255,255,255,.04)) !important;
  box-shadow: 0 0 0 1px var(--accent-glow), 0 14px 32px rgba(0,0,0,.24);
}

.monthSelectedBox {
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-color) 10%, rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, rgba(255,255,255,.1));
}
.monthGrid,
.monthDay,
.monthDay * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.monthDay {
  cursor: pointer;
}
/* ==========================================================
   MONTH PLANNER FINAL POLISH
========================================================== */

.monthLayout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:28px;
    align-items:start;
}

.monthGrid{
    user-select:none;
    -webkit-user-select:none;
}

.monthDay{
    cursor:pointer;
    transition:.18s ease;
}

.monthDay:hover{
    transform:translateY(-2px);
}

.monthShiftDrawer{
    width:380px;
    flex:0 0 380px;
    position:sticky;
    top:24px;
    align-self:start;
}

.monthDrawerCard{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.monthDrawerHead{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.monthDrawerTitle{
    font-size:30px;
    font-weight:700;
    line-height:1.1;
}

.monthDrawerQuick{
    display:flex;
    gap:10px;
}

.monthBulkBox{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}

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

.monthBulkField{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.monthBulkField span{
    font-size:12px;
    font-weight:600;
    opacity:.7;
}

.monthBulkField input,
.monthBulkField select{
    width:100%;
    box-sizing:border-box;
}

.monthBulkDates{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.monthBulkDates input{
    min-width:0;
}

.monthBulkDays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
}

.monthBulkDay{
    height:38px;
    border-radius:12px;
    font-weight:600;
}

.monthBulkApply{
    width:100%;
    margin-top:6px;
}

.monthDrawerStaff{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.monthShiftToggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:52px;
    padding:0 16px;
    border-radius:16px;
    transition:.18s;
}

.monthShiftToggle:hover{
    transform:translateX(3px);
}

.monthDrawerActions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:auto;
}

.monthDrawerActions button{
    width:100%;
}

/* Placeholder */

.monthDrawerPlaceholder{
    height:100%;
    min-height:620px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:12px;
    opacity:.8;
}

.monthDrawerPlaceholderIcon{
    font-size:54px;
}

.monthDrawerPlaceholderTitle{
    font-size:34px;
    font-weight:700;
}

/* Responsive */

@media (max-width:1450px){

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

    .monthShiftDrawer{
        width:100%;
        position:relative;
        top:0;
    }

}
/* MONTH DRAWER — COMPACT FIX */

.monthPlannerLayout {
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 14px !important;
}

.monthShiftDrawer {
  width: 300px !important;
  flex: 0 0 300px !important;
}

.monthDrawerCard {
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

.monthDrawerTitle {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.monthBulkBox {
  padding: 12px !important;
  gap: 10px !important;
}

.monthBulkTitle {
  font-size: 1rem !important;
}

.monthBulkDates {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.monthBulkField input,
.monthBulkField select {
  height: 38px !important;
  font-size: 0.82rem !important;
  padding: 8px 10px !important;
}

.monthBulkDays {
  gap: 6px !important;
}

.monthBulkDay {
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
}

.monthShiftToggle {
  min-height: 44px !important;
  padding: 0 12px !important;
  font-size: 0.82rem !important;
}

.monthDrawerActions button,
.monthBulkApply {
  height: 40px !important;
  font-size: 0.85rem !important;
}
.premiumVetCard {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid rgba(124, 92, 255, 0.14);
  border-left: 5px solid var(--staff-color);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--staff-color) 16%, transparent), transparent 34%),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

.vetAvatarWrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.vetAvatarLetter,
.vetAvatarImg {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--staff-color) 55%, white 15%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--staff-color) 26%, transparent);
}

.vetAvatarLetter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--staff-color), rgba(255, 255, 255, 0.12));
  color: white;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.vetAvatarImg {
  object-fit: cover;
  display: block;
}

.premiumVetInfo {
  min-width: 0;
}

.premiumVetTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.premiumVetName {
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.premiumVetRole {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.premiumVetSpecs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.premiumSpecTag {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--specialization-color, var(--staff-color)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--specialization-color, var(--staff-color)) 38%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.premiumSpecTag.is-empty {
  opacity: 0.7;
}

.premiumVetMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.premiumMetaItem {
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
}

.premiumMetaItem span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.premiumMetaItem strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.premiumVetActions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.premiumEditBtn {
  white-space: nowrap;
  border-radius: 14px;
}

.premiumStatus {
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .premiumVetCard {
    grid-template-columns: 56px 1fr;
  }

  .vetAvatarLetter,
  .vetAvatarImg {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    font-size: 22px;
  }

  .premiumVetActions {
    grid-column: 1 / -1;
  }

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

  .premiumVetTop {
    flex-direction: column;
  }
}
.staffProfileModal {
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--staff-color) 32%, white 8%);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--staff-color) 22%, transparent), transparent 34%),
    rgba(13, 22, 42, 0.96);
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);
}

.staffProfileClose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}

.staffProfileHero {
  display: flex;
  gap: 18px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.staffProfileAvatarLetter,
.staffProfileAvatarImg {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--staff-color) 55%, white 12%);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--staff-color) 28%, transparent);
}

.staffProfileAvatarLetter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--staff-color), rgba(255,255,255,0.14));
  color: white;
  font-size: 38px;
  font-weight: 900;
}

.staffProfileAvatarImg {
  object-fit: cover;
}

.staffProfileHero h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.staffProfileRole {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.staffProfileTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.staffProfileTags span,
.staffSkillList span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--staff-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--staff-color) 26%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.staffProfileStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.staffProfileStats div,
.staffProfileGrid section {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  padding: 16px;
}

.staffProfileStats span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.staffProfileStats strong {
  display: block;
  margin-top: 7px;
  font-size: 22px;
  color: var(--text);
}

.staffProfileGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.staffProfileGrid h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.staffProfileGrid p {
  margin: 8px 0;
  color: var(--muted);
}

.staffProfileGrid b {
  color: var(--text);
}

.staffSkillList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 760px) {
  .staffProfileStats,
  .staffProfileGrid {
    grid-template-columns: 1fr;
  }

  .staffProfileHero {
    align-items: flex-start;
  }
}
.staffProfileOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(18px);
}

.staffProfileModal {
  margin: 0;
  transform: none;
}

.premiumVetActions {
  gap: 8px;
  flex-wrap: wrap;
}

.premiumProfileBtn,
.premiumEditBtn {
  min-width: 108px;
  justify-content: center;
}
.staffProfilePro {
  width: min(1320px, calc(100vw - 34px));
  height: min(850px, calc(100vh - 34px));
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.staffProfileSidebar {
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  border-right: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--staff-color) 20%, transparent), transparent 45%),
    rgba(255,255,255,0.025);
}

.staffProfileSideTop {
  text-align: center;
}

.staffProfileSideName {
  margin-top: 12px;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.staffProfileSideRole {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.staffProfileSideStatus {
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #dfffee;
  background: rgba(34,197,94,0.17);
  border: 1px solid rgba(34,197,94,0.35);
  font-size: 12px;
  font-weight: 900;
}

.staffProfileNav {
  display: grid;
  gap: 8px;
  margin-top: 28px;
}

.staffProfileNav button {
  width: 100%;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-weight: 850;
  cursor: pointer;
}

.staffProfileNav button:hover,
.staffProfileNav button.active {
  background: linear-gradient(135deg, rgba(168,85,247,0.42), rgba(124,92,255,0.22));
  color: var(--text);
  border-color: rgba(255,255,255,0.08);
}

.staffProfileContactCard {
  margin-top: auto;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  display: grid;
  gap: 9px;
  font-size: 13px;
}

.staffProfileContactCard h4 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 15px;
}

.staffProfileMain {
  min-width: 0;
  overflow: auto;
  padding: 28px;
}

.staffProfileHeaderPro {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.staffProfileBreadcrumb {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 5px;
}

.staffProfileHeaderPro h2 {
  margin: 0;
  color: var(--text);
  font-size: 34px;
  letter-spacing: -0.05em;
}

.staffProfileSubtitle {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
}

.staffProfileSpecializations {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.staffProfileSpecialization {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--specialization-color, var(--staff-color)) 48%, transparent);
  background: color-mix(in srgb, var(--specialization-color, var(--staff-color)) 16%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--specialization-color, var(--staff-color)) 10%, transparent);
}

.staffProfileSpecialization.is-empty {
  opacity: 0.65;
}

.staffProfileKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.staffKpiCard {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.staffKpiIcon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--staff-color) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--staff-color) 30%, transparent);
}

.staffKpiCard span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.staffKpiCard strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.staffKpiCard small {
  display: block;
  margin-top: 3px;
  color: #5ff28c;
  font-size: 12px;
  font-weight: 850;
}

.staffProfileDashboardGrid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.95fr;
  gap: 12px;
  margin-top: 14px;
}

.staffPanel {
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.staffPanel h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 16px;
}

.staffPanelHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.staffPanelHead h3 {
  margin: 0;
}

.staffPanelHead span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

.staffFakeLineChart,
.staffFakeBarChart {
  height: 150px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 12px 8px 4px;
  border-radius: 16px;
  background:
    linear-gradient(to top, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 25%;
}

.staffFakeLineChart span {
  flex: 1;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(to top, rgba(34,197,94,0.22), rgba(34,197,94,0.95));
  box-shadow: 0 12px 26px rgba(34,197,94,0.16);
}

.staffFakeBarChart span {
  flex: 1;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(to top, rgba(168,85,247,0.35), rgba(168,85,247,1));
  box-shadow: 0 12px 26px rgba(168,85,247,0.18);
}

.staffChartLabels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  font-weight: 800;
}

.staffRatingPanel {
  grid-row: span 1;
}

.staffRatingBig {
  color: var(--text);
  font-size: 34px;
  font-weight: 950;
}

.staffRatingBig span {
  color: #ffd65a;
  font-size: 22px;
  letter-spacing: 2px;
}

.staffRatingPanel p {
  color: var(--muted);
  margin: 6px 0 16px;
}

.staffRatingRows {
  display: grid;
  gap: 8px;
}

.staffRatingRows div {
  display: grid;
  grid-template-columns: 28px 1fr 26px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.staffRatingRows b {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a855f7, #7c5cff);
}

.staffRatingRows em {
  font-style: normal;
  text-align: right;
}

.staffCallsPanel {
  grid-column: span 1;
}

.staffCallRow {
  display: grid;
  grid-template-columns: 70px 1fr 105px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.staffCallRow:last-child {
  border-bottom: 0;
}

.staffCallRow b,
.staffCallRow strong {
  color: var(--text);
}

.staffCallRow span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.staffCallRow .done {
  color: #5ff28c;
  font-weight: 900;
}

.staffFinanceRows {
  display: grid;
  gap: 12px;
}

.staffFinanceRows div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
}

.staffFinanceRows b {
  color: var(--text);
}

.staffSkillsPanel {
  grid-column: span 2;
}

.staffSkillList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staffSkillList span,
.staffSkillList button {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--staff-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--staff-color) 28%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.staffSkillList button {
  cursor: pointer;
  color: #c4b5fd;
  background: rgba(124,92,255,0.12);
}

@media (max-width: 1050px) {
  .staffProfilePro {
    grid-template-columns: 1fr;
    height: min(900px, calc(100vh - 24px));
  }

  .staffProfileSidebar {
    display: none;
  }

  .staffProfileKpis,
  .staffProfileDashboardGrid {
    grid-template-columns: 1fr 1fr;
  }

  .staffSkillsPanel {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .staffProfileMain {
    padding: 18px;
  }

  .staffProfileKpis,
  .staffProfileDashboardGrid {
    grid-template-columns: 1fr;
  }

  .staffSkillsPanel {
    grid-column: span 1;
  }
}

/* Patients: honest loading state while the clinic data is requested. */
.patientsTabLoading {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-main);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 50% 15%,
      var(--accent-glow),
      transparent 48%
    ),
    var(--glass-bg);
}

.patientsTabLoadingIcon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--accent-glow);
  box-shadow: 0 14px 40px var(--accent-glow);
  font-size: 28px;
  animation: patientsLoadingFloat 1.8s ease-in-out infinite;
}

.patientsTabLoading strong {
  font-size: 18px;
  letter-spacing: -.01em;
}

.patientsTabLoading > span {
  color: var(--text-muted);
  font-size: 13px;
}

.patientsTabLoadingDots {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.patientsTabLoadingDots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-color);
  animation: patientsLoadingDot 1.1s ease-in-out infinite;
}

.patientsTabLoadingDots i:nth-child(2) {
  animation-delay: .14s;
}

.patientsTabLoadingDots i:nth-child(3) {
  animation-delay: .28s;
}

@keyframes patientsLoadingFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes patientsLoadingDot {
  0%, 60%, 100% {
    opacity: .32;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .patientsTabLoadingIcon,
  .patientsTabLoadingDots i {
    animation: none;
  }
}
.staffInsightCard {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(168,85,247,0.22), transparent 42%),
    rgba(255,255,255,0.045);
  border: 1px solid rgba(168,85,247,0.22);
  box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.staffInsightIcon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(168,85,247,0.18);
  border: 1px solid rgba(168,85,247,0.28);
  font-size: 20px;
}

.staffInsightTitle {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  margin-bottom: 5px;
}

.staffInsightText {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
}

.staffInsightText b {
  color: #5ff28c;
}
.staffEmptyState {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 7px;
  padding: 18px;
  color: var(--muted);
}

.staffEmptyState b {
  color: var(--text);
  font-size: 15px;
}

.staffEmptyState span {
  max-width: 320px;
  font-size: 13px;
  line-height: 1.4;
}

.staffEmptyIcon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  font-size: 22px;
}

.staffVisitRow {
  width: 100%;
  display: grid;
  grid-template-columns: 78px 1fr 110px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.staffVisitRow:hover {
  background: rgba(255,255,255,0.035);
}

.staffVisitRow b,
.staffVisitRow strong {
  color: var(--text);
}

.staffVisitRow span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.staffVisitRow .done {
  color: #5ff28c;
  font-weight: 900;
}
.staffCareerPanel {
  grid-column: span 1;
}

.staffLevelBox {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 14px;
}

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

.staffLevelTop strong {
  color: var(--text);
  font-size: 17px;
}

.staffLevelTop span {
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.staffXpBar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
  background: rgba(255,255,255,0.08);
}

.staffXpBar div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #a855f7);
  box-shadow: 0 0 18px rgba(168,85,247,0.35);
}

.staffLevelBox p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.staffAchievementList {
  display: grid;
  gap: 10px;
}

.staffAchievementItem {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
}

.staffAchievementItem > div:first-child {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(168,85,247,0.16);
  font-size: 20px;
}

.staffAchievementItem b {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.staffAchievementItem span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
/* ===== TEAM PROFILE PAGE — STEP 1 HERO ===== */

.teamProfileFullPage {
  width: min(1400px, calc(100vw - 48px));
  margin: 32px auto 140px;
  color: #fff;
}

.teamProfileTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.teamProfileTopActions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.teamProfileHero {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 26px;
  align-items: center;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--staff-color) 28%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(24, 18, 56, .92), rgba(10, 14, 30, .86));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  margin-bottom: 18px;
}

.teamProfileAvatar {
  width: 118px;
  height: 118px;
  border-radius: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--staff-color), #b45cff);
  box-shadow: 0 18px 55px color-mix(in srgb, var(--staff-color) 45%, transparent);
  border: 1px solid rgba(255,255,255,.22);
  overflow: hidden;
}

.teamProfileAvatar span {
  font-size: 58px;
  font-weight: 900;
  color: #fff;
}

.teamProfileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teamProfileCrumb {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.52);
  margin-bottom: 8px;
}

.teamProfileHeroInfo h1 {
  margin: 0;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.teamProfileHeroInfo p {
  margin: 10px 0 16px;
  color: rgba(255,255,255,.72);
  font-weight: 700;
}

.teamProfileBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teamProfileBadges span {
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.76);
  font-size: 13px;
  font-weight: 800;
}

.teamProfileBadges .teamStatusBadge {
  color: #61ff9b;
  background: rgba(34,197,94,.15);
  border-color: rgba(34,197,94,.32);
}

.teamInsightCard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(180,92,255,.22), transparent 36%),
    rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  margin-bottom: 18px;
}

.teamInsightIcon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(180,92,255,.18);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 22px;
}

.teamInsightCard b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.teamInsightCard p {
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  font-weight: 650;
}

.teamInsightCard strong {
  color: #5cff9a;
}
/* ===== TEAM PROFILE DASHBOARD ===== */

.teamDashProfile {
  width: min(1500px, calc(100vw - 40px));
  margin: 28px auto 140px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  color: #fff;
}

.teamDashSidebar,
.teamDashPanel,
.teamKpiCard,
.teamDashInsight {
  background: rgba(10, 16, 34, .78);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  backdrop-filter: blur(22px);
}

.teamDashSidebar {
  border-radius: 26px;
  padding: 18px;
  min-height: 720px;
}

.teamBackBtn {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 22px;
}

.teamDashAvatar {
  width: 118px;
  height: 118px;
  margin: 0 auto 14px;
  border-radius: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--staff-color), #b45cff);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--staff-color) 45%, transparent);
}

.teamDashAvatar span {
  font-size: 58px;
  font-weight: 900;
}

.teamDashAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teamDashName {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
}

.teamDashRole {
  text-align: center;
  color: rgba(255,255,255,.65);
  font-weight: 700;
  margin-top: 4px;
}

.teamDashStatus {
  width: fit-content;
  margin: 12px auto 18px;
  padding: 7px 13px;
  border-radius: 999px;
  color: #5cff9a;
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.32);
  font-weight: 900;
  font-size: 13px;
}

.teamDashContact {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 18px;
}

.teamDashNav {
  display: grid;
  gap: 8px;
}

.teamDashNav button {
  border: 0;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  color: rgba(255,255,255,.68);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.teamDashNav button.active,
.teamDashNav button:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(124,92,255,.5), rgba(180,92,255,.24));
}

.teamDashIdBox {
  margin-top: 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}

.teamDashIdBox span {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  margin-bottom: 6px;
}

.teamDashIdBox b {
  font-size: 14px;
}

.teamDashMain {
  min-width: 0;
}

.teamDashTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.teamDashTop h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.04em;
}

.teamDashTop p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.65);
  font-weight: 700;
}

.teamDashActions {
  display: flex;
  gap: 12px;
}

.teamGhostBtn,
.teamPrimaryBtn {
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  cursor: pointer;
}

.teamGhostBtn {
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.1);
}

.teamPrimaryBtn {
  background: linear-gradient(135deg, #7c5cff, #b45cff);
  color: #fff;
  border: 0;
  box-shadow: 0 16px 36px rgba(124,92,255,.35);
}

.teamDashKpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.teamKpiCard {
  min-height: 128px;
  border-radius: 22px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,.18), transparent 42%),
    rgba(12, 18, 38, .82);
}

.teamKpiIcon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(124,92,255,.22);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 22px;
}

.teamKpiCard span {
  display: block;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  font-weight: 800;
}

.teamKpiCard strong {
  display: block;
  margin: 5px 0;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.teamKpiCard small {
  color: #5cff9a;
  font-weight: 800;
  font-size: 12px;
}

.teamDashInsight {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  border-radius: 22px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(180,92,255,.2), transparent 38%),
    rgba(12,18,38,.78);
}

.teamInsightIcon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(124,92,255,.22);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 22px;
}

.teamDashInsight b {
  display: block;
  margin-bottom: 6px;
}

.teamDashInsight p {
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  font-weight: 650;
}

.teamDashInsight strong {
  color: #5cff9a;
}

.teamDashGrid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .9fr;
  gap: 14px;
}

.teamDashPanel {
  border-radius: 22px;
  padding: 18px;
  min-height: 190px;
}

.teamDashPanelLarge {
  min-height: 300px;
}

.teamDashFull {
  grid-column: 1 / -1;
}

.teamDashPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.teamDashPanelHead h3 {
  margin: 0;
  font-size: 17px;
}

.teamDashPanelHead span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 800;
}

.teamBars {
  height: 220px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 10px 8px 0;
}

.teamBarItem {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.teamBarTrack {
  flex: 1;
  width: 100%;
  max-width: 46px;
  border-radius: 14px 14px 5px 5px;
  background: rgba(255,255,255,.045);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.teamBarTrack i {
  width: 100%;
  display: block;
  border-radius: 14px 14px 5px 5px;
}

.teamBarTrack i.green {
  background: linear-gradient(180deg, #36e07f, rgba(34,197,94,.38));
}

.teamBarTrack i.purple {
  background: linear-gradient(180deg, #b45cff, rgba(124,92,255,.42));
}

.teamBarItem span {
  margin-top: 10px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  font-weight: 800;
}

.teamDashRows {
  display: grid;
  gap: 10px;
}

.teamDashRows p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.teamDashRows p:last-child {
  border-bottom: 0;
}

.teamDashRows span {
  color: rgba(255,255,255,.58);
  font-weight: 700;
}

.teamDashRows b {
  color: #fff;
}

.teamDashXp div {
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  margin-bottom: 12px;
}

.teamDashXp i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}

.teamDashXp em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7c5cff, #b45cff);
}

.teamDashXp p {
  color: rgba(255,255,255,.62);
  font-weight: 700;
}

.teamDashReviews {
  text-align: center;
  padding: 26px;
}

.teamDashReviews div {
  font-size: 36px;
  margin-bottom: 10px;
}

.teamDashReviews b {
  font-size: 24px;
}

.teamDashReviews p {
  color: rgba(255,255,255,.62);
  font-weight: 700;
}

@media (max-width: 1200px) {
  .teamDashProfile {
    grid-template-columns: 1fr;
  }

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

  .teamDashGrid {
    grid-template-columns: 1fr;
  }
}
/* ===== TEAM PROFILE DASHBOARD — LAYOUT FIX ===== */

.teamDashProfile {

    width: calc(100vw - 32px);

    max-width: 1680px;

    margin: 42px 16px 150px;

    display: grid;

    grid-template-columns: 240px minmax(0,1fr);

    gap: 22px;

}

.teamDashSidebar {
  min-height: auto;
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding: 16px;
  position: sticky;
  top: 24px;
}

.teamDashMain {
  min-width: 0;
  overflow: hidden;
}

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

.teamKpiCard {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
}

.teamKpiIcon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  flex: 0 0 auto;
}

.teamKpiCard strong {
  font-size: 21px;
}

.teamKpiCard small {
  font-size: 11px;
}

.teamDashGrid {
  grid-template-columns: 1fr 1fr 320px;
  gap: 12px;
}

.teamDashPanel {
  min-width: 0;
}

.teamDashPanelLarge {
  min-height: 260px;
}

.teamBars {
  height: 190px;
  gap: 14px;
}

.teamDashActions {
  flex-shrink: 0;
}

.teamDashTop h1 {
  font-size: 32px;
}

@media (max-width: 1350px) {
  .teamDashKpis {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .teamDashGrid .teamDashPanel:nth-child(3),
  .teamDashGrid .teamDashPanel:nth-child(4),
  .teamDashGrid .teamDashPanel:nth-child(5),
  .teamDashGrid .teamDashPanel:nth-child(6) {
    min-height: 180px;
  }
}
/* ===== TEAM PROFILE — WIDE PREMIUM OVERRIDE ===== */

.teamDashProfile {
  width: calc(100vw - 24px);
  max-width: none;
  margin: 30px 12px 150px;
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.teamDashSidebar {
  min-height: calc(100vh - 205px);
  max-height: calc(100vh - 205px);
  overflow: hidden;
  border-radius: 30px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--staff-color) 30%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(18, 22, 44, .94), rgba(8, 13, 28, .86));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 24px 80px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.teamBackBtn {
  height: 42px;
  border-radius: 16px;
  margin-bottom: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.teamDashAvatar {
  width: 124px;
  height: 124px;
  border-radius: 36px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(135deg, var(--staff-color), #b45cff);
  box-shadow:
    0 18px 45px color-mix(in srgb, var(--staff-color) 45%, transparent),
    0 0 80px color-mix(in srgb, var(--staff-color) 25%, transparent);
}

.teamDashName {
  font-size: 26px;
  letter-spacing: -0.035em;
}

.teamDashRole {
  font-size: 15px;
}

.teamDashStatus {
  margin-top: 12px;
  margin-bottom: 18px;
  box-shadow: 0 0 24px rgba(34,197,94,.13);
}

.teamDashContact {
  border-radius: 20px;
  padding: 15px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.teamDashNav {
  gap: 7px;
}

.teamDashNav button {
  min-height: 42px;
  border-radius: 15px;
  font-size: 14px;
  transition: .18s ease;
}

.teamDashNav button.active {
  background:
    radial-gradient(circle at 0% 50%, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(135deg, rgba(124,92,255,.72), rgba(180,92,255,.32));
  box-shadow: 0 12px 34px rgba(124,92,255,.22);
}

.teamDashIdBox {
  margin-top: 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}

.teamDashMain {
  min-width: 0;
  padding-right: 0;
}

.teamDashTop {
  min-height: 58px;
  margin-bottom: 16px;
}

.teamDashTop h1 {
  font-size: 38px;
  line-height: 1;
}

.teamDashTop p {
  font-size: 15px;
}

.teamDashActions {
  gap: 12px;
}

.teamGhostBtn,
.teamPrimaryBtn {
  min-height: 46px;
  border-radius: 16px;
  padding: 0 18px;
}

.teamGhostBtn {
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.teamPrimaryBtn {
  background: linear-gradient(135deg, #7c5cff, #b45cff);
  box-shadow:
    0 18px 42px rgba(124,92,255,.34),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.teamDashKpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.teamKpiCard {
  min-height: 116px;
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,.22), transparent 42%),
    linear-gradient(145deg, rgba(17, 24, 49, .9), rgba(8, 13, 28, .8));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 18px 54px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.teamKpiIcon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 35%),
    rgba(124,92,255,.24);
}

.teamKpiCard strong {
  font-size: 25px;
}

.teamDashInsight {
  border-radius: 24px;
  padding: 19px 22px;
  margin-bottom: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(180,92,255,.24), transparent 36%),
    linear-gradient(135deg, rgba(23, 18, 54, .9), rgba(8, 13, 28, .82));
  border: 1px solid rgba(180,92,255,.16);
}

.teamDashGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 330px;
  gap: 14px;
}

.teamDashPanel {
  border-radius: 24px;
  padding: 19px;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,.1), transparent 36%),
    linear-gradient(145deg, rgba(15, 22, 45, .9), rgba(8, 13, 28, .8));
  border: 1px solid rgba(255,255,255,.095);
  box-shadow:
    0 18px 54px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.teamDashPanelLarge {
  min-height: 286px;
}

.teamDashPanelHead h3 {
  font-size: 18px;
}

.teamBars {
  height: 205px;
  gap: 17px;
  padding-top: 8px;
}

.teamBarTrack {
  max-width: 48px;
  border-radius: 15px 15px 6px 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}

.teamBarTrack i.green {
  background:
    linear-gradient(180deg, #42f08a, rgba(34,197,94,.38));
  box-shadow: 0 -10px 34px rgba(34,197,94,.22);
}

.teamBarTrack i.purple {
  background:
    linear-gradient(180deg, #bf5cff, rgba(124,92,255,.42));
  box-shadow: 0 -10px 34px rgba(180,92,255,.22);
}

.teamDashRows p {
  padding: 12px 0;
}

.teamDashXp i {
  height: 11px;
}

.teamDashFull {
  grid-column: 1 / -1;
  min-height: 150px;
}

/* keep the profile above the dock visually */
.mac-dock {
  z-index: 80;
}

.teamDashProfile {
  position: relative;
  z-index: 2;
}

/* responsive */
@media (max-width: 1450px) {
  .teamDashProfile {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .teamDashGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px;
  }

  .teamKpiCard strong {
    font-size: 22px;
  }
}

@media (max-width: 1250px) {
  .teamDashProfile {
    grid-template-columns: 1fr;
  }

  .teamDashSidebar {
    position: relative;
    max-height: none;
    min-height: auto;
  }

  .teamDashKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teamDashGrid {
    grid-template-columns: 1fr;
  }
}
/* ===== TEAM PROFILE — REAL STRUCTURE FIX ===== */

.teamDashProfile {
  width: min(1320px, calc(100vw - 48px)) !important;
  margin: 34px auto 150px !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  overflow: visible !important;
}

.teamDashMain {
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

.teamDashKpis {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.teamDashGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.teamDashPanel:nth-child(3),
.teamDashPanel:nth-child(4),
.teamDashPanel:nth-child(5),
.teamDashPanel:nth-child(6) {
  min-height: 185px;
}

.teamDashFull {
  grid-column: 1 / -1 !important;
}

.teamKpiCard,
.teamDashPanel,
.teamDashInsight {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.teamDashActions {
  max-width: 100%;
}

.teamDashTop {
  align-items: flex-start;
}
.teamChartBox {
  height: 215px;
  width: 100%;
  position: relative;
}

.teamChartBox canvas {
  width: 100% !important;
  height: 100% !important;
}
.teamSubHero {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(180,92,255,.22), transparent 36%),
    linear-gradient(135deg, rgba(15,22,45,.92), rgba(8,13,28,.82));
  border: 1px solid rgba(255,255,255,.095);
  box-shadow: 0 18px 54px rgba(0,0,0,.25);
}

.teamSubHero h2 {
  margin: 0;
  font-size: 28px;
}

.teamSubHero p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.65);
  font-weight: 700;
}

.teamAnalyticsInsight p {
  margin: 0;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  font-weight: 700;
}

.teamAnalyticsInsight b {
  color: #5cff9a;
}
.teamChartRange {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
}

.teamChartRange button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.7);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.teamChartRange button.active {
  color: #fff;
  background: linear-gradient(135deg, #7c5cff, #b45cff);
  box-shadow: 0 12px 28px rgba(124,92,255,.28);
}
.teamVisitFilters {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.teamVisitFilters button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.7);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.teamVisitFilters button.active {
  color: #fff;
  background: linear-gradient(135deg, #7c5cff, #b45cff);
  box-shadow: 0 12px 28px rgba(124,92,255,.28);
}

.teamVisitsLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}

.teamVisitsList {
  display: grid;
  gap: 12px;
}

.teamVisitCard {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,.13), transparent 36%),
    linear-gradient(145deg, rgba(15,22,45,.9), rgba(8,13,28,.8));
  border: 1px solid rgba(255,255,255,.095);
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
}

.teamVisitIcon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(124,92,255,.22);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 24px;
}

.teamVisitTitle {
  font-size: 18px;
  font-weight: 900;
}

.teamVisitMeta,
.teamVisitOwner {
  color: rgba(255,255,255,.6);
  font-weight: 700;
  margin-top: 4px;
}

.teamVisitRight {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.teamVisitStatus {
  padding: 6px 10px;
  border-radius: 999px;
  color: #5cff9a;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.28);
  font-size: 12px;
  font-weight: 900;
}

.teamVisitRight b {
  font-size: 18px;
}

.teamVisitOpenBtn {
  border: 0;
  background: transparent;
  color: #b982ff;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .teamVisitsLayout {
    grid-template-columns: 1fr;
  }

  .teamVisitCard {
    grid-template-columns: 54px 1fr;
  }

  .teamVisitRight {
    grid-column: 1 / -1;
    justify-items: start;
  }
}
.teamFinanceList {
  display: grid;
  gap: 10px;
}

.teamFinanceRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}

.teamFinanceRow b {
  display: block;
  color: #fff;
}

.teamFinanceRow span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.58);
  font-weight: 700;
}

.teamFinanceRow strong {
  color: #5cff9a;
  white-space: nowrap;
}
.teamCareerHero {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  margin-bottom: 16px;
}

.teamCareerLevel,
.teamCareerProgress {
  border-radius: 24px;
  padding: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(180,92,255,.22), transparent 36%),
    linear-gradient(145deg, rgba(15,22,45,.92), rgba(8,13,28,.84));
  border: 1px solid rgba(255,255,255,.095);
  box-shadow: 0 18px 54px rgba(0,0,0,.25);
}

.teamCareerLevel {
  display: flex;
  align-items: center;
  gap: 16px;
}

.teamCareerBadge {
  width: 62px;
  height: 62px;
  border-radius: 21px;
  display: grid;
  place-items: center;
  font-size: 32px;
  background: rgba(124,92,255,.22);
  border: 1px solid rgba(255,255,255,.12);
}

.teamCareerTitle {
  font-size: 23px;
  font-weight: 950;
}

.teamCareerSub {
  color: rgba(255,255,255,.62);
  font-weight: 800;
  margin-top: 4px;
}

.teamCareerProgress div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,.7);
  font-weight: 800;
  margin-bottom: 14px;
}

.teamCareerProgress i,
.achievementProgress i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}

.teamCareerProgress em,
.achievementProgress em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c5cff, #b45cff);
}

.teamAchievementsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.achievementCard {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,.13), transparent 36%),
    linear-gradient(145deg, rgba(15,22,45,.9), rgba(8,13,28,.8));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
  opacity: .62;
}

.achievementCard.unlocked {
  opacity: 1;
}

.achievementIcon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}

.achievementTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.achievementTop b {
  color: #fff;
}

.achievementTop span {
  color: rgba(255,255,255,.56);
  font-size: 12px;
  font-weight: 900;
}

.achievementBody p {
  margin: 5px 0 10px;
  color: rgba(255,255,255,.62);
  font-weight: 700;
}

.achievementProgress div {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.58);
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
}

.achievementXp {
  color: #5cff9a;
  font-weight: 950;
  white-space: nowrap;
}

.rarity-common.unlocked {
  border-color: rgba(255,255,255,.16);
}

.rarity-uncommon.unlocked {
  border-color: rgba(34,197,94,.32);
}

.rarity-rare.unlocked {
  border-color: rgba(59,130,246,.36);
}

.rarity-epic.unlocked {
  border-color: rgba(180,92,255,.42);
}

.rarity-legendary.unlocked {
  border-color: rgba(255,204,77,.5);
  box-shadow: 0 18px 54px rgba(0,0,0,.22), 0 0 34px rgba(255,204,77,.08);
}

.rarity-mythic.unlocked {
  border-color: rgba(255,90,90,.55);
  box-shadow: 0 18px 54px rgba(0,0,0,.22), 0 0 38px rgba(255,90,90,.12);
}

@media (max-width: 1100px) {
  .teamCareerHero,
  .teamAchievementsGrid {
    grid-template-columns: 1fr;
  }

  .achievementCard {
    grid-template-columns: 56px 1fr;
  }

  .achievementXp {
    grid-column: 1 / -1;
  }
}

.achievementReward {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  opacity: .55;
}

.achievementReward.unlocked {
  opacity: 1;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,204,77,.12), transparent 42%),
    rgba(255,255,255,.055);
}

.achievementReward span {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(124,92,255,.2);
  border: 1px solid rgba(255,255,255,.1);
}

.achievementReward b {
  display: block;
  color: #fff;
  font-size: 13px;
}

.achievementReward small {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.56);
  font-weight: 800;
  font-size: 12px;
}

.teamDashAvatar.frame-common {
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

.teamDashAvatar.frame-uncommon {
  box-shadow: 0 0 0 3px rgba(34,197,94,.55), 0 0 28px rgba(34,197,94,.18);
}

.teamDashAvatar.frame-rare {
  box-shadow: 0 0 0 3px rgba(59,130,246,.65), 0 0 30px rgba(59,130,246,.2);
}

.teamDashAvatar.frame-epic {
  box-shadow: 0 0 0 3px rgba(180,92,255,.7), 0 0 36px rgba(180,92,255,.28);
}

.teamDashAvatar.frame-legendary,
.teamDashAvatar.frame-gold {
  box-shadow: 0 0 0 3px rgba(255,204,77,.85), 0 0 42px rgba(255,204,77,.28);
}

.teamDashAvatar.frame-mythic {
  box-shadow:
    0 0 0 3px rgba(255,90,90,.85),
    0 0 34px rgba(255,90,90,.28),
    0 0 60px rgba(180,92,255,.18);
}
.careerChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.careerChoice {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  text-align: left;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  color: #fff;
  cursor: pointer;
}

.careerChoice span {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(124,92,255,.2);
}

.careerChoice b {
  display: block;
}

.careerChoice small {
  display: block;
  color: rgba(255,255,255,.55);
  font-weight: 800;
}

.careerChoice.active {
  border-color: rgba(180,92,255,.65);
  background: rgba(124,92,255,.18);
  box-shadow: 0 0 30px rgba(124,92,255,.16);
}
.teamDashTitle {
  width: fit-content;
  margin: 8px auto 4px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffe28a;
  font-weight: 950;
  font-size: 12px;
  text-align: center;
  letter-spacing: .02em;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,204,77,.22), transparent 42%),
    rgba(255,255,255,.055);
  border: 1px solid rgba(255,204,77,.22);
  box-shadow: 0 0 28px rgba(255,204,77,.1);
}
.teamDashAvatar {
  position: relative;
  border: 1px solid rgba(255,255,255,.14);
}

.teamDashAvatar.frame-common {
  border: 3px solid rgba(255,255,255,.42);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.055),
    0 0 28px rgba(255,255,255,.16),
    0 18px 70px rgba(0,0,0,.35);
}

.teamDashAvatar.frame-uncommon {
  border: 3px solid rgba(34,197,94,.85);
  box-shadow:
    0 0 0 5px rgba(34,197,94,.12),
    0 0 34px rgba(34,197,94,.34),
    0 18px 70px rgba(0,0,0,.35);
}

.teamDashAvatar.frame-rare {
  border: 3px solid rgba(59,130,246,.9);
  box-shadow:
    0 0 0 5px rgba(59,130,246,.13),
    0 0 38px rgba(59,130,246,.38),
    0 18px 70px rgba(0,0,0,.35);
}

.teamDashAvatar.frame-epic {
  border: 3px solid rgba(180,92,255,.95);
  box-shadow:
    0 0 0 5px rgba(180,92,255,.16),
    0 0 42px rgba(180,92,255,.45),
    0 18px 70px rgba(0,0,0,.35);
}

.teamDashAvatar.frame-legendary,
.teamDashAvatar.frame-gold {
  border: 3px solid rgba(255,204,77,.98);
  box-shadow:
    0 0 0 5px rgba(255,204,77,.17),
    0 0 28px rgba(255,204,77,.46),
    0 0 68px rgba(255,180,0,.24),
    0 18px 70px rgba(0,0,0,.35);
}

.teamDashAvatar.frame-mythic {
  border: 3px solid rgba(255,90,90,.98);
  box-shadow:
    0 0 0 5px rgba(255,90,90,.16),
    0 0 40px rgba(255,90,90,.38),
    0 0 78px rgba(180,92,255,.28),
    0 18px 70px rgba(0,0,0,.35);
}
/* =========================================================
   Career settings — professional premium version
   ========================================================= */

.careerChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.careerChoice {
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: #fff;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: .2s ease;
}

.careerChoice:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

.careerChoice.active {
  border-color: rgba(180,92,255,.62);
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,.24), transparent 48%),
    linear-gradient(135deg, rgba(124,92,255,.16), rgba(255,255,255,.035));
  box-shadow: 0 0 34px rgba(124,92,255,.16);
}

.careerChoice span {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(255,255,255,.08);
}

.careerChoice b {
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.careerChoice small {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 850;
  color: rgba(255,255,255,.48);
}

/* rarity accents — stricter */
.careerChoice.rarity-common.active {
  border-color: rgba(255,255,255,.26);
}

.careerChoice.rarity-uncommon.active,
.careerChoice.rarity-bronze.active {
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 28px rgba(34,197,94,.12);
}

.careerChoice.rarity-rare.active {
  border-color: rgba(59,130,246,.48);
  box-shadow: 0 0 30px rgba(59,130,246,.14);
}

.careerChoice.rarity-epic.active {
  border-color: rgba(180,92,255,.55);
  box-shadow: 0 0 34px rgba(180,92,255,.17);
}

.careerChoice.rarity-legendary.active,
.careerChoice.rarity-gold.active {
  border-color: rgba(255,204,77,.6);
  box-shadow:
    0 0 28px rgba(255,204,77,.14),
    inset 0 0 0 1px rgba(255,204,77,.08);
}

.careerChoice.rarity-mythic.active {
  border-color: rgba(255,120,180,.58);
  box-shadow:
    0 0 30px rgba(255,120,180,.13),
    inset 0 0 0 1px rgba(180,92,255,.08);
}

/* selected checkmark */
.careerChoice.active::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 12px;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 950;
  color: white;
  background: rgba(124,92,255,.55);
  border: 1px solid rgba(255,255,255,.18);
}

/* Profile title badge */
.teamDashTitle {
  width: fit-content;
  max-width: 92%;
  margin: 9px auto 5px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffe28a;
  font-weight: 950;
  font-size: 12px;
  text-align: center;
  letter-spacing: .015em;
  background:
    linear-gradient(135deg, rgba(255,204,77,.15), rgba(255,255,255,.045));
  border: 1px solid rgba(255,204,77,.24);
  box-shadow: 0 0 24px rgba(255,204,77,.1);
}

/* Avatar frames — premium, not childish */
.teamDashAvatar {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
}

.teamDashAvatar.frame-common {
  border: 3px solid rgba(255,255,255,.38);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.045),
    0 0 26px rgba(255,255,255,.13);
}

.teamDashAvatar.frame-bronze {
  border: 3px solid rgba(190,120,58,.82);
  box-shadow:
    0 0 0 5px rgba(190,120,58,.1),
    0 0 30px rgba(190,120,58,.22);
}

.teamDashAvatar.frame-uncommon {
  border: 3px solid rgba(34,197,94,.78);
  box-shadow:
    0 0 0 5px rgba(34,197,94,.1),
    0 0 32px rgba(34,197,94,.25);
}

.teamDashAvatar.frame-rare {
  border: 3px solid rgba(59,130,246,.84);
  box-shadow:
    0 0 0 5px rgba(59,130,246,.11),
    0 0 34px rgba(59,130,246,.27);
}

.teamDashAvatar.frame-epic {
  border: 3px solid rgba(180,92,255,.88);
  box-shadow:
    0 0 0 5px rgba(180,92,255,.12),
    0 0 38px rgba(180,92,255,.32);
}

.teamDashAvatar.frame-legendary,
.teamDashAvatar.frame-gold {
  border: 3px solid rgba(255,204,77,.92);
  box-shadow:
    0 0 0 5px rgba(255,204,77,.12),
    0 0 30px rgba(255,204,77,.34),
    0 0 64px rgba(255,180,0,.18);
}

.teamDashAvatar.frame-mythic {
  border: 3px solid rgba(255,125,190,.9);
  box-shadow:
    0 0 0 5px rgba(255,125,190,.11),
    0 0 34px rgba(255,125,190,.25),
    0 0 68px rgba(180,92,255,.18);
}

/* very subtle animation only for top frames */
.teamDashAvatar.frame-legendary::after,
.teamDashAvatar.frame-gold::after,
.teamDashAvatar.frame-mythic::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: .32;
  pointer-events: none;
  animation: premiumFramePulse 2.8s ease-in-out infinite;
}

@keyframes premiumFramePulse {
  0%, 100% {
    opacity: .18;
    transform: scale(1);
  }
  50% {
    opacity: .48;
    transform: scale(1.035);
  }
}
/* =========================================================
   Premium avatar frames — decorative version
   ========================================================= */

.teamDashAvatar {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
}

.teamDashAvatar::before,
.teamDashAvatar::after {
  pointer-events: none;
}

/* базовый внутренний блеск */
.teamDashAvatar[class*="frame-"] {
  border: 0 !important;
}

.teamDashAvatar[class*="frame-"]::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 34px;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.06));
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}

.teamDashAvatar[class*="frame-"]::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 39px;
  z-index: -2;
  opacity: .75;
  filter: blur(10px);
}

/* COMMON */
.teamDashAvatar.frame-common::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.08)),
    linear-gradient(45deg, transparent 18%, rgba(255,255,255,.24) 20%, transparent 23%);
}

.teamDashAvatar.frame-common::after {
  background: rgba(255,255,255,.22);
}

/* BRONZE */
.teamDashAvatar.frame-bronze::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,218,160,.95), transparent 14%),
    radial-gradient(circle at 82% 82%, rgba(255,170,70,.7), transparent 16%),
    linear-gradient(135deg, #8b4a20, #f1a85c 38%, #6e3518 70%, #ffd09a);
}

.teamDashAvatar.frame-bronze::after {
  background: rgba(190,120,58,.45);
}

/* UNCOMMON / GREEN */
.teamDashAvatar.frame-uncommon::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(190,255,130,.85), transparent 15%),
    radial-gradient(circle at 80% 80%, rgba(34,197,94,.9), transparent 16%),
    conic-gradient(from 160deg, #14532d, #22c55e, #bbf7d0, #16a34a, #052e16, #22c55e, #14532d);
}

.teamDashAvatar.frame-uncommon::after {
  background: rgba(34,197,94,.48);
}

/* RARE / BLUE */
.teamDashAvatar.frame-rare::before {
  background:
    radial-gradient(circle at 22% 18%, rgba(180,220,255,.95), transparent 13%),
    radial-gradient(circle at 80% 78%, rgba(59,130,246,.9), transparent 16%),
    conic-gradient(from 200deg, #0f2a5f, #3b82f6, #bfdbfe, #2563eb, #0b1740, #60a5fa, #0f2a5f);
}

.teamDashAvatar.frame-rare::after {
  background: rgba(59,130,246,.52);
}

/* EPIC / PURPLE */
.teamDashAvatar.frame-epic::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(245,208,254,.9), transparent 13%),
    radial-gradient(circle at 82% 82%, rgba(217,70,239,.95), transparent 16%),
    conic-gradient(from 210deg, #3b0764, #a855f7, #f0abfc, #7e22ce, #1e0638, #c084fc, #3b0764);
}

.teamDashAvatar.frame-epic::after {
  background: rgba(180,92,255,.56);
}

/* LEGENDARY / GOLD */
.teamDashAvatar.frame-legendary::before,
.teamDashAvatar.frame-gold::before {
  inset: -9px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,210,.95), transparent 12%),
    radial-gradient(circle at 84% 84%, rgba(255,180,0,.9), transparent 16%),
    conic-gradient(from 220deg, #7a4b00, #facc15, #fff7ad, #f59e0b, #4a2600, #ffd166, #7a4b00);
  box-shadow:
    0 0 0 2px rgba(255,230,140,.28),
    0 0 26px rgba(255,204,77,.42),
    0 0 70px rgba(255,170,0,.25),
    0 18px 70px rgba(0,0,0,.5);
}

.teamDashAvatar.frame-legendary::after,
.teamDashAvatar.frame-gold::after {
  background: rgba(255,204,77,.68);
  animation: frameGlowGold 2.8s ease-in-out infinite;
}

/* MYTHIC */
.teamDashAvatar.frame-mythic::before {
  inset: -9px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,220,255,.95), transparent 12%),
    radial-gradient(circle at 84% 84%, rgba(56,189,248,.85), transparent 16%),
    conic-gradient(from 220deg, #312e81, #ec4899, #22d3ee, #a855f7, #0f172a, #f0abfc, #312e81);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12),
    0 0 34px rgba(236,72,153,.32),
    0 0 80px rgba(56,189,248,.22),
    0 18px 70px rgba(0,0,0,.5);
}

.teamDashAvatar.frame-mythic::after {
  background: linear-gradient(135deg, rgba(236,72,153,.6), rgba(56,189,248,.5));
  animation: frameGlowMythic 2.5s ease-in-out infinite;
}

/* маленькая корона для топовых рамок */
.teamDashAvatar.frame-legendary .teamFrameCrown,
.teamDashAvatar.frame-gold .teamFrameCrown,
.teamDashAvatar.frame-mythic .teamFrameCrown {
  display: grid;
}

.teamFrameCrown {
  display: none;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 26px;
  place-items: center;
  font-size: 20px;
  z-index: 5;
  filter: drop-shadow(0 0 12px rgba(255,204,77,.55));
}

/* если crown не добавим в HTML — рамка всё равно работает */
.teamDashAvatar.frame-legendary::marker,
.teamDashAvatar.frame-gold::marker,
.teamDashAvatar.frame-mythic::marker {
  display: none;
}

@keyframes frameGlowGold {
  0%, 100% {
    opacity: .45;
    transform: scale(1);
  }
  50% {
    opacity: .9;
    transform: scale(1.04);
  }
}

@keyframes frameGlowMythic {
  0%, 100% {
    opacity: .42;
    transform: scale(1);
  }
  50% {
    opacity: .82;
    transform: scale(1.045);
  }
}
.teamDashAvatar,
.profilePhotoPreview {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

.teamDashAvatar img,
.profilePhotoPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.teamDashAvatar::before,
.profilePhotoPreview::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.teamDashAvatar::after,
.profilePhotoPreview::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.teamDashAvatar.frame-common::before,
.profilePhotoPreview.frame-common::before {
  opacity: 1;
  border: 3px solid rgba(255,255,255,.45);
  box-shadow: 0 0 0 5px rgba(255,255,255,.05), 0 0 28px rgba(255,255,255,.16);
}

.teamDashAvatar.frame-bronze::before,
.profilePhotoPreview.frame-bronze::before {
  opacity: 1;
  border: 3px solid rgba(190,120,58,.9);
  box-shadow: 0 0 0 5px rgba(190,120,58,.12), 0 0 34px rgba(190,120,58,.25);
}

.teamDashAvatar.frame-uncommon::before,
.profilePhotoPreview.frame-uncommon::before,
.teamDashAvatar.frame-dogs::before,
.profilePhotoPreview.frame-dogs::before {
  opacity: 1;
  border: 3px solid rgba(34,197,94,.88);
  box-shadow: 0 0 0 5px rgba(34,197,94,.13), 0 0 36px rgba(34,197,94,.32);
}

.teamDashAvatar.frame-rare::before,
.profilePhotoPreview.frame-rare::before {
  opacity: 1;
  border: 3px solid rgba(59,130,246,.95);
  box-shadow: 0 0 0 5px rgba(59,130,246,.14), 0 0 40px rgba(59,130,246,.36);
}

.teamDashAvatar.frame-epic::before,
.profilePhotoPreview.frame-epic::before {
  opacity: 1;
  border: 3px solid rgba(180,92,255,.95);
  box-shadow: 0 0 0 5px rgba(180,92,255,.15), 0 0 44px rgba(180,92,255,.42);
}

.teamDashAvatar.frame-legendary::before,
.profilePhotoPreview.frame-legendary::before,
.teamDashAvatar.frame-gold::before,
.profilePhotoPreview.frame-gold::before {
  opacity: 1;
  border: 3px solid rgba(255,204,77,.98);
  box-shadow:
    0 0 0 5px rgba(255,204,77,.16),
    0 0 38px rgba(255,204,77,.48),
    0 0 78px rgba(255,170,0,.22);
}

.teamDashAvatar.frame-mythic::before,
.profilePhotoPreview.frame-mythic::before {
  opacity: 1;
  border: 3px solid rgba(255,120,190,.98);
  box-shadow:
    0 0 0 5px rgba(255,120,190,.15),
    0 0 42px rgba(255,120,190,.36),
    0 0 78px rgba(180,92,255,.25);
}

.teamDashAvatar.frame-legendary::after,
.profilePhotoPreview.frame-legendary::after,
.teamDashAvatar.frame-gold::after,
.profilePhotoPreview.frame-gold::after,
.teamDashAvatar.frame-mythic::after,
.profilePhotoPreview.frame-mythic::after {
  opacity: .45;
  background: conic-gradient(from 0deg, transparent, rgba(255,204,77,.5), transparent, rgba(180,92,255,.35), transparent);
  filter: blur(10px);
  animation: frameAuraSpin 5.5s linear infinite;
}

.teamDashAvatar.frame-dogs::after,
.profilePhotoPreview.frame-dogs::after {
  opacity: .32;
  background: conic-gradient(from 0deg, transparent, rgba(34,197,94,.45), transparent, rgba(255,204,77,.26), transparent);
  filter: blur(10px);
  animation: frameAuraSpin 6.5s linear infinite;
}

@keyframes frameAuraSpin {
  to { transform: rotate(360deg); }
}

.profilePhotoPanel {
  margin-top: 16px;
}

.profilePhotoSettings {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
}

.profilePhotoPreview {
  width: 86px;
  height: 86px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 950;
  font-size: 34px;
  background: linear-gradient(135deg, rgba(78,166,255,.95), rgba(180,92,255,.95));
  border: 1px solid rgba(255,255,255,.12);
}

.profilePhotoInfo b {
  display: block;
  font-size: 15px;
  font-weight: 950;
  color: #fff;
}

.profilePhotoInfo p {
  margin: 6px 0 14px;
  color: rgba(255,255,255,.58);
  font-weight: 700;
  line-height: 1.45;
}

.profilePhotoActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* ===== Staff profile photo settings ===== */

.teamPhotoSettings {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
}

.teamPhotoPreview {
  width: 86px;
  height: 86px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(78,166,255,.95), rgba(180,92,255,.95));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 55px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff;
  font-size: 34px;
  font-weight: 950;
}

.teamPhotoPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.teamPhotoRight h4 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
}

.teamPhotoRight p {
  margin: 0 0 14px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.profileUploadBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: fit-content;
}

@media (max-width: 760px) {
  .teamPhotoSettings {
    grid-template-columns: 1fr;
  }
}
.teamPhotoButtons{
    display:flex;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap;
}

.teamPhotoButtons .teamPrimaryBtn,
.teamPhotoButtons .teamGhostBtn{
    min-width:180px;
    justify-content:center;
}
/* ===== Clinic MMO Rating ===== */

.clinicRatingBoard {
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(18,24,52,.92), rgba(8,10,24,.92));
  border-radius: 26px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}

.clinicRatingHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.clinicRatingHead h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}

.clinicRatingHead p {
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 700;
}

.clinicRatingHead > span {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.76);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.clinicRatingTable {
  display: grid;
  gap: 10px;
}

.clinicRatingRow {
  display: grid;
  grid-template-columns: 56px 52px 1fr 2.2fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}

.clinicRatingRow.current {
  border-color: rgba(180,92,255,.65);
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.24), transparent 42%),
    rgba(124,92,255,.1);
  box-shadow: 0 0 0 1px rgba(180,92,255,.14), 0 18px 45px rgba(124,92,255,.16);
}

.clinicRatingRow.rank-1 {
  border-color: rgba(255,200,87,.42);
}

.clinicRatingRow.rank-2 {
  border-color: rgba(210,220,255,.32);
}

.clinicRatingRow.rank-3 {
  border-color: rgba(205,127,50,.36);
}

.clinicRatingPlace {
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}

.clinicRatingAvatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(78,166,255,.95), rgba(180,92,255,.95));
  color: #fff;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.clinicRatingAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinicRatingPerson b {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.clinicRatingPerson span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.48);
  font-size: 12px;
  font-weight: 700;
}

.clinicRatingStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.clinicRatingStats div {
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}

.clinicRatingStats span {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
}

.clinicRatingStats b {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

@media (max-width: 900px) {
  .clinicRatingRow {
    grid-template-columns: 44px 46px 1fr;
  }

  .clinicRatingStats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ===== Clinic MMO Rating ===== */

.clinicRatingBoard {
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(18,24,52,.92), rgba(8,10,24,.92));
  border-radius: 26px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}

.clinicRatingHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.clinicRatingHead h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}

.clinicRatingHead p {
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 700;
}

.clinicRatingHead > span {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.76);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.clinicRatingTable {
  display: grid;
  gap: 10px;
}

.clinicRatingRow {
  display: grid;
  grid-template-columns: 56px 52px 1fr 2.2fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}

.clinicRatingRow.current {
  border-color: rgba(180,92,255,.65);
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.24), transparent 42%),
    rgba(124,92,255,.1);
  box-shadow: 0 0 0 1px rgba(180,92,255,.14), 0 18px 45px rgba(124,92,255,.16);
}

.clinicRatingRow.rank-1 {
  border-color: rgba(255,200,87,.42);
}

.clinicRatingRow.rank-2 {
  border-color: rgba(210,220,255,.32);
}

.clinicRatingRow.rank-3 {
  border-color: rgba(205,127,50,.36);
}

.clinicRatingPlace {
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}

.clinicRatingAvatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(78,166,255,.95), rgba(180,92,255,.95));
  color: #fff;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.clinicRatingAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinicRatingPerson b {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.clinicRatingPerson span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.48);
  font-size: 12px;
  font-weight: 700;
}

.clinicRatingStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.clinicRatingStats div {
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}

.clinicRatingStats span {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
}

.clinicRatingStats b {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

@media (max-width: 900px) {
  .clinicRatingRow {
    grid-template-columns: 44px 46px 1fr;
  }

  .clinicRatingStats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
}
.staffSkillsCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.staffSkillCard {
  position: relative;
  min-height: 118px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.2), transparent 42%),
    rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}

.staffSkillIcon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(124,92,255,.18);
  border: 1px solid rgba(180,92,255,.22);
  font-size: 20px;
}

.staffSkillCard b {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  margin-bottom: 6px;
}

.staffSkillCard span {
  color: rgba(255,255,255,.58);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.staffSkillRemove {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 18px;
}

.staffSkillModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 18, .72);
  backdrop-filter: blur(10px);
}

.staffSkillModal {
  width: min(520px, calc(100vw - 28px));
  border-radius: 28px;
  padding: 26px;
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.22), transparent 42%),
    linear-gradient(135deg, rgba(22,25,52,.98), rgba(9,11,25,.98));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  position: relative;
}

.staffSkillModalClose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
  font-size: 24px;
  cursor: pointer;
}

.staffSkillModalHead {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}

.staffSkillModalIcon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(180,92,255,.16);
  border: 1px solid rgba(180,92,255,.24);
  font-size: 24px;
}

.staffSkillModalHead h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 950;
}

.staffSkillModalHead p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.56);
  font-size: 13px;
  font-weight: 700;
}

.staffSkillField span,
.staffSkillPresets > span {
  display: block;
  margin-bottom: 9px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  font-weight: 850;
}

.staffSkillField input {
  width: 100%;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(180,92,255,.55);
  background: rgba(0,0,0,.2);
  color: #fff;
  padding: 0 18px;
  outline: none;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(180,92,255,.08);
}

.staffSkillPresets {
  margin-top: 20px;
}

.staffSkillPresets div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.staffSkillPresets button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 850;
  cursor: pointer;
}

.staffSkillModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}
.teamDashPanel.teamDashFull {
  grid-column: 1 / -1;
}

.panelMutedTitle {
  color: rgba(255,255,255,.5);
  font-size: 14px;
  font-weight: 800;
}

.moneyPlus {
  color: #4ade80 !important;
}

.moneyMinus {
  color: #fb7185 !important;
}
.financeAdjustModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 18, .72);
  backdrop-filter: blur(10px);
}

.financeAdjustModal {
  width: min(520px, calc(100vw - 28px));
  border-radius: 28px;
  padding: 26px;
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.22), transparent 42%),
    linear-gradient(135deg, rgba(22,25,52,.98), rgba(9,11,25,.98));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  position: relative;
}

.financeAdjustClose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
  font-size: 24px;
  cursor: pointer;
}

.financeAdjustHead {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
}

.financeAdjustIcon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(180,92,255,.16);
  border: 1px solid rgba(180,92,255,.24);
  font-size: 24px;
}

.financeAdjustHead h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 950;
}

.financeAdjustHead p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.56);
  font-size: 13px;
  font-weight: 700;
}

.financeTypeSwitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.financeTypeSwitch button {
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-weight: 950;
  cursor: pointer;
}

.financeTypeSwitch button.active {
  color: #fff;
  border-color: rgba(180,92,255,.55);
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(180,92,255,.22));
  box-shadow: 0 0 0 3px rgba(180,92,255,.08);
}

.financeAdjustField {
  display: block;
  margin-bottom: 16px;
}

.financeAdjustField span,
.financeQuickReasons > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  font-weight: 850;
}

.financeAdjustField input {
  width: 100%;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(180,92,255,.45);
  background: rgba(0,0,0,.2);
  color: #fff;
  padding: 0 18px;
  outline: none;
  font-size: 15px;
  font-weight: 800;
}

.financeQuickReasons {
  margin-top: 4px;
}

.financeQuickReasons div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.financeQuickReasons button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 850;
  cursor: pointer;
}

.financeAdjustActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}
.financeDeleteBtn{
    width:34px;
    height:34px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:rgba(255,255,255,.55);
    transition:.2s;
}

.financeDeleteBtn:hover{
    background:rgba(255,70,70,.15);
    color:#ff6b6b;
    transform:scale(1.06);
}
.calTopScroll {
  width: 100%;
  height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 10px 0 14px;
  padding: 0 2px;
}

.calTopScrollInner {
  height: 1px;
}

.calTopScroll::-webkit-scrollbar {
  height: 10px;
}

.calTopScroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.045);
  border-radius: 999px;
}

.calTopScroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(190,92,255,.95));
  border-radius: 999px;
  border: 2px solid rgba(10,8,24,.9);
}

.calTopScroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(160,110,255,1), rgba(220,120,255,1));
}
.calendarWorkArea {
  align-items: flex-start;
}

.calendarDayGrid {
  max-height: calc(100vh - 330px);
  overflow: auto;
  border-radius: 22px;
  min-width: 0;
}

.calTimeHead,
.calDoctorHead {
  position: sticky;
  top: 0;
  z-index: 25;
  backdrop-filter: blur(14px);
}

.calTimeHead {
  background: rgba(18, 14, 42, .96);
}

.calDoctorHead {
  background:
    radial-gradient(circle at top left, rgba(180,92,255,.18), transparent 45%),
    linear-gradient(135deg, rgba(28,22,62,.97), rgba(11,13,31,.97));
}

.calendarDayGrid::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.calendarDayGrid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.045);
  border-radius: 999px;
}

.calendarDayGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(190,92,255,.95));
  border-radius: 999px;
  border: 2px solid rgba(10,8,24,.9);
}
.calendarMainArea {
  flex: 1;
  min-width: 0;
}

.calTopScroll {
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 10px;
}

.calTopScrollInner {
  height: 1px;
}

.calendarDayGrid {
  max-height: calc(100vh - 330px);
  overflow: auto;
  border-radius: 22px;
}

.calTopScroll::-webkit-scrollbar,
.calendarDayGrid::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.calTopScroll::-webkit-scrollbar-track,
.calendarDayGrid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.045);
  border-radius: 999px;
}

.calTopScroll::-webkit-scrollbar-thumb,
.calendarDayGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(190,92,255,.95));
  border-radius: 999px;
  border: 2px solid rgba(10,8,24,.9);
}
.pugQuickPatientBox {
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(160, 120, 255, 0.28);
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.20), transparent 34%),
    rgba(12, 8, 24, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.pugQuickPatientHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.pugQuickPatientTitle {
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
}

.pugQuickPatientSub {
  margin-top: 3px;
  color: rgba(255,255,255,.48);
  font-size: .82rem;
}

.pugQuickPatientGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pugQuickGroup {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pugQuickGroupTitle {
  color: rgba(255,255,255,.86);
  font-weight: 800;
  margin-bottom: 2px;
}

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

.pugQuickCancel,
.pugQuickCreate {
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  font-weight: 800;
  cursor: pointer;
}

.pugQuickCancel {
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
}

.pugQuickCreate {
  color: white;
  background: linear-gradient(135deg, #7C5CFF, #B45CFF);
  box-shadow: 0 10px 28px rgba(124,92,255,.28);
}

@media (max-width: 760px) {
  .pugQuickPatientGrid {
    grid-template-columns: 1fr;
  }
}
/* FIX: footer кнопки в модалке визита всегда видны */
.pugVisitModal {
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.pugVisitBody {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding-bottom: 24px !important;
}

.pugVisitFoot {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  background: rgba(20, 10, 38, 0.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 24px !important;
}
/* FIX: footer кнопок внутри модалки визита всегда виден */
.pugVisitModal {
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pugVisitBody {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 110px;
}

.pugVisitFoot {
  position: sticky;
  bottom: 0;
  z-index: 50;
  flex-shrink: 0;
  background: rgba(22, 10, 42, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 24px;
}
.pugOwnerOverlay {
  align-items: center;
  justify-content: center;
}

.pugOwnerOverlay.open {
  display: flex !important;
}

.pugOwnerModal {
  width: min(620px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(180, 92, 255, 0.28);
  background:
    radial-gradient(circle at top left, rgba(180, 92, 255, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(35, 17, 62, 0.96), rgba(12, 8, 24, 0.98));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.55), 0 0 46px rgba(180, 92, 255, 0.18);
}

.pugOwnerBody {
  padding: 24px;
  overflow-y: auto;
}
.btnDanger{
    background:linear-gradient(180deg,#ff5d5d,#d52d2d);
    color:#fff;
    border:none;
    border-radius:14px;
    padding:12px 22px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 0 20px rgba(255,70,70,.35);
    transition:.2s;
}

.btnDanger:hover{
    transform:translateY(-1px);
    box-shadow:0 0 28px rgba(255,70,70,.55);
}
/* ===== Doc.PUG Premium Delete Modal ===== */

.deleteModalOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px;
  background: rgba(5, 2, 12, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.deleteModal {
  width: min(460px, 92vw);
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255, 95, 95, 0.26);
  background:
    radial-gradient(circle at top, rgba(255, 80, 120, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(38, 16, 36, 0.97), rgba(12, 7, 22, 0.98));
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.65),
    0 0 46px rgba(255, 70, 110, 0.18);
  text-align: center;
  animation: deletePop .18s ease-out;
}

.deleteIcon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  font-size: 2rem;
  background: rgba(255, 80, 100, 0.14);
  border: 1px solid rgba(255, 120, 140, 0.24);
  box-shadow: 0 0 34px rgba(255, 70, 110, 0.24);
}

.deleteModal h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
}

.deleteModal p {
  margin: 0;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
  font-size: .96rem;
}

.deleteModal p b {
  color: #fff;
  font-size: 1.05rem;
}

.deleteButtons {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.deleteButtons button {
  min-width: 138px;
  border: 0;
  border-radius: 16px;
  padding: 13px 18px;
  font-weight: 850;
  cursor: pointer;
  transition: .18s ease;
}

.deleteButtons .btnSecondary {
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.deleteButtons .btnSecondary:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.deleteButtons .btnDanger {
  color: #fff;
  background: linear-gradient(135deg, #ff4d6d, #d92c45);
  box-shadow: 0 14px 32px rgba(255, 70, 100, .30);
}

.deleteButtons .btnDanger:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(255, 70, 100, .42);
}

@keyframes deletePop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* OWNER PROFILE — bigger premium card */
[data-page="owner"] #ownerName {
  font-size: 2rem !important;
  line-height: 1.15;
}

[data-page="owner"] #ownerMeta {
  font-size: 1.15rem !important;
  line-height: 1.7;
}

[data-page="owner"] .glass-card:first-of-type,
[data-page="owner"] .owner-profile-card,
[data-page="owner"] .owner-card {
  width: min(520px, 100%) !important;
  padding: 30px !important;
  border-radius: 26px !important;
}

[data-page="owner"] .owner-stats,
[data-page="owner"] .ownerStats {
  gap: 16px !important;
}

[data-page="owner"] .owner-stats > *,
[data-page="owner"] .ownerStats > * {
  min-height: 82px !important;
  border-radius: 18px !important;
}

.ownerHeroCard {
  width: min(620px, 100%) !important;
  padding: 34px !important;
  border-radius: 28px !important;
  margin-bottom: 42px !important;
  background:
    radial-gradient(circle at top left, rgba(168, 85, 247, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(76, 29, 149, 0.26), rgba(15, 23, 42, 0.48)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.32);
}

.ownerHeroCard h2 {
  font-size: 2.15rem !important;
}

.ownerHeroCard [style*="opacity: 0.7"],
.ownerHeroCard [style*="opacity: 0.5"] {
  font-size: 1.25rem !important;
}

.ownerHeroCard [style*="grid-template-columns"] {
  gap: 18px !important;
}

.ownerHeroCard [style*="text-align: center"] {
  min-height: 86px !important;
  border-radius: 18px !important;
}

/* OWNER PAGE — wide premium hero */
[data-page="owner"] {
  max-width: 1180px;
  margin: 0 auto;
}

.ownerHeroWide {
  width: 100%;
  padding: 34px;
  border-radius: 30px;
  margin-bottom: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at top left, rgba(168, 85, 247, 0.24), transparent 34%),
    radial-gradient(circle at bottom right, rgba(124, 92, 255, 0.14), transparent 35%),
    linear-gradient(135deg, rgba(44, 18, 80, 0.78), rgba(10, 7, 22, 0.82));
  box-shadow:
    0 30px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.ownerHeroTop {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.ownerHeroKicker {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.42);
  margin-bottom: 8px;
}

.ownerHeroName {
  font-size: 2.45rem;
  line-height: 1.05;
  font-weight: 900;
  color: #fff;
}

.ownerHeroContacts {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  color: rgba(255,255,255,.68);
  font-size: 1.05rem;
}

.ownerHeroActions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.ownerHeroEdit,
.ownerHeroBack {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  padding: 11px 15px;
  font-weight: 800;
  cursor: pointer;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.07);
}

.ownerHeroEdit {
  color: #fff;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(180,92,255,.82));
  box-shadow: 0 14px 34px rgba(124,92,255,.22);
}

.ownerHeroStats {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ownerHeroStat {
  min-height: 96px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ownerHeroStat span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.46);
  margin-bottom: 7px;
}

.ownerHeroStat strong {
  color: #c084fc;
  font-size: 1.55rem;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .ownerHeroTop {
    flex-direction: column;
  }

  .ownerHeroActions {
    width: 100%;
  }

  .ownerHeroEdit,
  .ownerHeroBack {
    flex: 1;
  }

  .ownerHeroStats {
    grid-template-columns: 1fr 1fr;
  }
}
.ownerHeroWide {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 34px;
  border-radius: 34px;
  margin-bottom: 42px;
  border: 1px solid rgba(180,92,255,.22);
  background:
    radial-gradient(circle at 14% 18%, rgba(180,92,255,.34), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(124,92,255,.18), transparent 24%),
    linear-gradient(135deg, rgba(36,14,70,.92), rgba(10,7,22,.92));
  box-shadow: 0 34px 100px rgba(0,0,0,.42), 0 0 60px rgba(168,85,247,.12);
}

.ownerHeroWide::before {
  content: "";
  position: absolute;
  inset: -80px;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 60%);
  transform: rotate(8deg);
  pointer-events: none;
}

.ownerHeroTop {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 22px;
  align-items: start;
}

.ownerHeroTop::before {
  content: "👤";
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  font-size: 3rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 38px rgba(180,92,255,.24);
}

.ownerHeroKicker {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.45);
  margin-bottom: 8px;
}

.ownerHeroName {
  font-size: 2.55rem;
  line-height: 1.02;
  font-weight: 950;
  color: #fff;
}

.ownerHeroContacts {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ownerHeroContacts span {
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
}

.ownerHeroStats {
  position: relative;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ownerHeroStat {
  min-height: 106px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(168,85,247,.18), transparent 40%),
    rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.07);
}

.ownerHeroStat span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.46);
}

.ownerHeroStat strong {
  margin-top: 8px;
  display: block;
  color: #c084fc;
  font-size: 1.65rem;
  line-height: 1.05;
}

.ownerHeroEdit,
.ownerHeroBack {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 850;
  cursor: pointer;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.07);
}

.ownerHeroEdit {
  color: #fff;
  background: linear-gradient(135deg, #7C5CFF, #B45CFF);
  box-shadow: 0 16px 36px rgba(124,92,255,.28);
}
/* OWNER PAGE — full-width dashboard hero */
[data-page="owner"] {
  max-width: 1220px !important;
  margin: 0 auto !important;
}


.ownerHeroFull {
  width: min(1120px, 100%) !important;
  max-width: none !important;
}

.ownerHeroTop {
  grid-template-columns: 100px 1fr auto !important;
}

.ownerHeroTop::before {
  display: none !important;
}

.ownerAvatarBig {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  font-size: 3.2rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 42px rgba(180,92,255,.26);
}

.ownerHeroStatsPlus {
  grid-template-columns: repeat(6, 1fr) !important;
}

.ownerHeroStatus strong {
  color: #22c55e !important;
}

@media (max-width: 1100px) {
  .ownerHeroStatsPlus {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .ownerHeroTop {
    grid-template-columns: 1fr !important;
  }

  .ownerHeroStatsPlus {
    grid-template-columns: 1fr 1fr !important;
  }
}
.ownerDashboardHero {
  width: min(1120px, 100%);
  padding: 34px;
  border-radius: 34px;
  margin: 0 auto 42px;
  border: 1px solid rgba(180,92,255,.22);
  background:
    radial-gradient(circle at 12% 12%, rgba(180,92,255,.32), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(124,92,255,.18), transparent 26%),
    linear-gradient(135deg, rgba(36,14,70,.92), rgba(10,7,22,.94));
  box-shadow: 0 34px 100px rgba(0,0,0,.42), 0 0 60px rgba(168,85,247,.12);
}

.ownerDashTop {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 24px;
  align-items: start;
}

.ownerDashAvatar {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  font-size: 3.2rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 42px rgba(180,92,255,.26);
}

.ownerDashKicker {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.45);
  margin-bottom: 8px;
}

.ownerDashName {
  font-size: 2.65rem;
  line-height: 1.02;
  font-weight: 950;
  color: #fff;
}

.ownerDashContacts {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ownerDashContacts span {
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
}

.ownerDashStatus {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.ownerDashBadge {
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #7C5CFF, #B45CFF);
  box-shadow: 0 12px 34px rgba(124,92,255,.28);
}

.ownerDashStats {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.ownerDashStat {
  min-height: 106px;
  padding: 18px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(168,85,247,.18), transparent 40%), rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.07);
}

.ownerDashStat span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.46);
}

.ownerDashStat strong {
  margin-top: 8px;
  display: block;
  color: #c084fc;
  font-size: 1.55rem;
  line-height: 1.05;
}

@media (max-width: 900px) {
  .ownerDashTop {
    grid-template-columns: 1fr;
  }

  .ownerDashStatus {
    align-items: stretch;
  }

  .ownerDashStats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ownerPetsHeader {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ownerPetsHeader h3 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
}
/* OWNER DASHBOARD — premium polish with theme variables */

.ownerDashboardHero {
  width: min(1080px, 100%) !important;
  padding: 30px 32px !important;
  border-radius: 32px !important;
  margin: 0 auto 38px !important;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--primary-neon) 28%, transparent), transparent 30%),
    radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--accent-neon) 16%, transparent), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(0,0,0,.22)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-premium), var(--primary-glow) !important;
}

.ownerDashTop {
  grid-template-columns: 88px 1fr auto !important;
  gap: 22px !important;
  align-items: center !important;
}

.ownerDashAvatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 26px !important;
  font-size: 2.7rem !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--primary-glow) !important;
}

.ownerDashName {
  font-size: 2.45rem !important;
  letter-spacing: -0.04em;
  color: var(--text-main) !important;
}

.ownerDashContacts {
  margin-top: 12px !important;
  gap: 8px !important;
}

.ownerDashContacts span,
.ownerHeroBack,
.ownerDashStat {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-main) !important;
}

.ownerDashContacts span {
  font-size: 1rem !important;
  padding: 8px 13px !important;
}

.ownerDashBadge,
.ownerHeroEdit,
#btnAddPet {
  background: var(--primary-neon) !important;
  box-shadow: var(--primary-glow) !important;
  color: #fff !important;
}

.ownerDashBadge {
  font-size: 1.35rem !important;
  padding: 13px 20px !important;
}

.ownerDashStatus {
  gap: 9px !important;
}

.ownerHeroEdit,
.ownerHeroBack {
  min-width: 140px;
  text-align: center;
  padding: 10px 14px !important;
}

.ownerDashStats {
  margin-top: 28px !important;
  gap: 12px !important;
}

.ownerDashStat {
  min-height: 92px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    var(--glass-bg) !important;
}

.ownerDashKicker,
.ownerDashStat span {
  color: var(--text-muted) !important;
}

.ownerDashStat span {
  font-size: .68rem !important;
}

.ownerDashStat strong {
  font-size: 1.45rem !important;
  color: var(--primary-neon) !important;
}

/* owner pets block polish */

.ownerPetsHeader {
  width: min(1080px, 100%);
  margin: 0 auto 14px !important;
}

.ownerPetsHeader h3 {
  color: var(--text-main) !important;
}

#petsList.pets-container,
[data-page="owner"] #petsList {
  width: min(1080px, 100%) !important;
  margin: 0 auto !important;
  min-height: 118px;
  border-radius: 24px !important;
  border: 1px dashed var(--glass-border) !important;
  background: color-mix(in srgb, var(--glass-bg) 55%, transparent) !important;
}

[data-page="owner"] .pet-card {
  width: min(360px, 100%) !important;
  min-height: 72px;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.035)),
    var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.20);
}
/* THEME FIX — remove hardcoded purple from premium components */

.ownerDashBadge,
.ownerHeroEdit,
#btnAddPet,
.mac-dock .menu-item.active,
.mac-dock .menu-item.active a,
.dock-menu .menu-item.active,
.dock-menu .menu-item.active a {
  background: var(--primary-neon) !important;
  box-shadow: var(--primary-glow) !important;
  color: #fff !important;
}

.ownerDashboardHero,
.ownerDashAvatar,
.pugVisitModal,
.pugOwnerModal,
.deleteModal {
  box-shadow:
    0 30px 90px rgba(0,0,0,.38),
    var(--primary-glow) !important;
}

.ownerDashboardHero {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--primary-neon) 26%, transparent), transparent 32%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent-neon) 14%, transparent), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(0,0,0,.24)) !important;
}

.ownerDashStat strong,
.ownerDashName,
.ownerPetsHeader h3 {
  color: var(--text-main) !important;
}

.ownerDashStat strong {
  color: var(--primary-neon) !important;
}

.ownerDashContacts span,
.ownerDashStat,
[data-page="owner"] .pet-card,
.pugVisitSection,
.pugQuickGroup {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}

.pugAddPatientBtn,
.pugQuickCreate,
.pugVisitSave,
.ownerModalSave,
.btn-primary {
  background: var(--primary-neon) !important;
  box-shadow: var(--primary-glow) !important;
}
/* THEME VARIABLES — support body.green / body.purple / body.blue */

body.green {
  --primary-neon: #22c55e;
  --accent-neon: #34d399;
  --primary-glow: 0 0 18px rgba(34, 197, 94, 0.45);
  --glass-border: rgba(52, 211, 153, 0.16);
}

body.blue {
  --primary-neon: #3b82f6;
  --accent-neon: #60a5fa;
  --primary-glow: 0 0 18px rgba(59, 130, 246, 0.45);
  --glass-border: rgba(96, 165, 250, 0.16);
}

body.purple {
  --primary-neon: #a361ff;
  --accent-neon: #ff61f6;
  --primary-glow: 0 0 18px rgba(163, 97, 255, 0.48);
  --glass-border: rgba(180, 92, 255, 0.18);
}

body.black {
  --primary-neon: #e5e7eb;
  --accent-neon: #94a3b8;
  --primary-glow: 0 0 18px rgba(229, 231, 235, 0.22);
  --glass-border: rgba(255,255,255,0.14);
}

body.white {
  --primary-neon: #7c3aed;
  --accent-neon: #a855f7;
  --primary-glow: 0 0 18px rgba(124, 58, 237, 0.30);
  --glass-border: rgba(124,58,237,0.18);
}
/* OWNER DASHBOARD — theme compatible */

.ownerDashBadge,
.ownerHeroEdit,
#btnAddPet,
.pugVisitSave,
.pugQuickCreate,
.btn-primary {
  background: var(--accent-color) !important;
  box-shadow: 0 0 18px var(--accent-glow) !important;
  color: #fff !important;
}

.ownerDashStat strong {
  color: var(--accent-color) !important;
}

.ownerDashboardHero,
.ownerDashAvatar {
  box-shadow:
    0 30px 90px rgba(0,0,0,.38),
    0 0 28px var(--accent-glow) !important;
}

.ownerDashboardHero {
  background:
    radial-gradient(circle at 12% 12%, var(--accent-glow), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(0,0,0,.22)) !important;
  border: 1px solid var(--glass-border) !important;
}

.ownerDashAvatar,
.ownerDashContacts span,
.ownerDashStat,
.ownerHeroBack,
[data-page="owner"] .pet-card,
[data-page="owner"] #petsList {
  background: var(--card-bg) !important;
  border-color: var(--glass-border) !important;
}

.mac-dock .menu-item.active,
.mac-dock .menu-item.active a,
.dock-menu .menu-item.active,
.dock-menu .menu-item.active a {
  background: var(--accent-color) !important;
  box-shadow: 0 0 18px var(--accent-glow) !important;
  color: #fff !important;
}
/* =========================================================
   DOC.PUG — ADD PET PREMIUM MODAL
   ========================================================= */

.addPetModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 100000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(130, 71, 255, 0.17),
      transparent 40%
    ),
    rgba(3, 2, 11, 0.82);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.addPetModalOverlay.is-open {
  opacity: 1;
  visibility: visible;
}

.addPetModal {
  position: relative;

  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;

  padding: 32px;

  color: #f8f6ff;

  background:
    linear-gradient(
      145deg,
      rgba(25, 22, 43, 0.985),
      rgba(11, 9, 23, 0.995)
    );

  border: 1px solid rgba(175, 148, 255, 0.22);
  border-radius: 28px;

  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 90px rgba(124, 71, 255, 0.13);

  transform: translateY(22px) scale(0.97);

  transition:
    transform 0.26s cubic-bezier(.2, .8, .2, 1);
}

.addPetModalOverlay.is-open .addPetModal {
  transform: translateY(0) scale(1);
}

.addPetModal::-webkit-scrollbar {
  width: 6px;
}

.addPetModal::-webkit-scrollbar-thumb {
  background: rgba(151, 109, 255, 0.36);
  border-radius: 999px;
}

.addPetModalGlow {
  position: absolute;
  border-radius: 50%;
  filter: blur(65px);
  pointer-events: none;
}

.addPetModalGlowOne {
  top: -140px;
  right: -120px;

  width: 300px;
  height: 300px;

  background: rgba(147, 76, 255, 0.19);
}

.addPetModalGlowTwo {
  bottom: -180px;
  left: -160px;

  width: 310px;
  height: 310px;

  background: rgba(83, 47, 194, 0.11);
}

.addPetModalHeader {
  position: relative;
  z-index: 1;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;

  margin-bottom: 26px;
}

.addPetModalKicker {
  margin-bottom: 8px;

  color: #a985ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.addPetModalHeader h2 {
  margin: 0;

  color: #ffffff;
  font-size: 32px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.addPetModalHeader p {
  max-width: 480px;
  margin: 10px 0 0;

  color: rgba(229, 222, 246, 0.53);
  font-size: 14px;
  line-height: 1.5;
}

.addPetModalClose {
  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.67);
  font-size: 26px;
  line-height: 1;

  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.addPetModalClose:hover {
  color: #ffffff;

  background: rgba(145, 87, 255, 0.14);
  border-color: rgba(164, 112, 255, 0.36);

  transform: rotate(5deg);
}

.addPetModalForm {
  position: relative;
  z-index: 1;
}

.addPetModalGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.addPetField {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.addPetFieldFull {
  grid-column: 1 / -1;
}

.addPetLabel {
  color: rgba(247, 244, 255, 0.86);
  font-size: 13px;
  font-weight: 750;
}

.addPetLabel b {
  color: #af78ff;
}

.addPetLabel small {
  margin-left: 5px;

  color: rgba(222, 214, 239, 0.36);
  font-size: 11px;
  font-weight: 600;
}

.addPetInputWrap {
  position: relative;
}

.addPetInputIcon {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 2;

  color: #a77aff;
  font-size: 15px;

  transform: translateY(-50%);
  pointer-events: none;
}

.addPetInput,
.addPetTextarea {
  width: 100%;
  box-sizing: border-box;

  color: #ffffff;
  font: inherit;
  font-size: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.047),
      rgba(255, 255, 255, 0.024)
    );

  border: 1px solid rgba(192, 174, 225, 0.14);
  border-radius: 15px;

  outline: none;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.addPetInput {
  height: 52px;
  padding: 0 16px;
}

.addPetInputWithIcon {
  padding-left: 44px;
}

.addPetTextarea {
  min-height: 112px;
  padding: 15px 16px;

  resize: vertical;
  line-height: 1.5;
}

.addPetInput::placeholder,
.addPetTextarea::placeholder {
  color: rgba(220, 212, 240, 0.3);
}

.addPetInput:hover,
.addPetTextarea:hover {
  border-color: rgba(169, 126, 255, 0.3);
}

.addPetInput:focus,
.addPetTextarea:focus {
  background: rgba(124, 78, 255, 0.075);
  border-color: rgba(168, 112, 255, 0.82);

  box-shadow:
    0 0 0 4px rgba(126, 79, 255, 0.1),
    0 12px 35px rgba(0, 0, 0, 0.14);
}

.addPetInput.is-error,
.addPetTextarea.is-error {
  border-color: rgba(255, 92, 117, 0.84);
  box-shadow: 0 0 0 4px rgba(255, 72, 105, 0.1);
}

.addPetSpeciesSelector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;

  padding: 2px;
  border-radius: 19px;
}

.addPetSpeciesSelector.is-error {
  box-shadow: 0 0 0 3px rgba(255, 72, 105, 0.12);
}

.addPetSpeciesButton {
  position: relative;

  min-height: 82px;
  padding: 15px;

  display: flex;
  align-items: center;
  gap: 13px;

  color: rgba(239, 234, 250, 0.69);
  text-align: left;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.047),
      rgba(255, 255, 255, 0.019)
    );

  border: 1px solid rgba(191, 174, 224, 0.13);
  border-radius: 18px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.addPetSpeciesButton:hover {
  color: #ffffff;
  border-color: rgba(164, 116, 255, 0.37);
  transform: translateY(-2px);
}

.addPetSpeciesButton.is-active {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      rgba(126, 76, 255, 0.29),
      rgba(178, 80, 255, 0.105)
    );

  border-color: rgba(173, 114, 255, 0.85);

  box-shadow:
    0 0 0 3px rgba(134, 79, 255, 0.09),
    0 15px 35px rgba(82, 35, 171, 0.17);
}

.addPetSpeciesEmoji {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  font-size: 24px;

  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
}

.addPetSpeciesButton.is-active .addPetSpeciesEmoji {
  background: rgba(140, 84, 255, 0.22);
}

.addPetSpeciesInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.addPetSpeciesInfo strong {
  font-size: 15px;
  font-weight: 800;
}

.addPetSpeciesInfo small {
  color: rgba(220, 212, 238, 0.37);
  font-size: 11px;
}

.addPetSpeciesCheck {
  position: absolute;
  top: 11px;
  right: 12px;

  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  color: #ffffff;
  font-size: 11px;
  font-weight: 900;

  background: #995cff;
  border-radius: 50%;

  opacity: 0;
  transform: scale(0.6);

  transition:
    opacity 0.17s ease,
    transform 0.17s ease;
}

.addPetSpeciesButton.is-active .addPetSpeciesCheck {
  opacity: 1;
  transform: scale(1);
}

.addPetWeightWrap {
  position: relative;
}

.addPetWeightWrap .addPetInput {
  padding-right: 58px;
}

.addPetWeightWrap > span {
  position: absolute;
  top: 50%;
  right: 15px;

  color: rgba(228, 222, 243, 0.45);
  font-size: 12px;
  font-weight: 800;

  transform: translateY(-50%);
  pointer-events: none;
}

.addPetNotesCounter {
  margin-top: -4px;

  color: rgba(224, 217, 240, 0.29);
  font-size: 11px;
  text-align: right;
}

.addPetModalError {
  min-height: 18px;
  margin-top: 13px;

  color: #ff8094;
  font-size: 12px;
  font-weight: 700;
}

.addPetModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  margin-top: 19px;
  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.addPetCancelButton,
.addPetSubmitButton {
  min-height: 51px;
  padding: 0 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;

  border-radius: 15px;
  cursor: pointer;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.addPetCancelButton {
  color: rgba(244, 239, 254, 0.78);

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.addPetCancelButton:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.addPetSubmitButton {
  min-width: 204px;

  background:
    linear-gradient(
      135deg,
      #7149ff 0%,
      #9854ff 52%,
      #bd65ff 100%
    );

  border: 0;

  box-shadow:
    0 15px 34px rgba(115, 60, 255, 0.29),
    0 1px 0 rgba(255, 255, 255, 0.27) inset;
}

.addPetSubmitButton:hover {
  transform: translateY(-2px);

  box-shadow:
    0 19px 42px rgba(119, 62, 255, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.32) inset;
}

.addPetSubmitButton:disabled {
  opacity: 0.58;
  cursor: wait;
  transform: none;
}

.addPetSubmitPlus {
  font-size: 18px;
  line-height: 1;
}

.addPetLoader {
  width: 16px;
  height: 16px;

  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;

  animation: addPetLoaderSpin 0.7s linear infinite;
}

@keyframes addPetLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

body.addPetModalOpened {
  overflow: hidden;
}

@media (max-width: 680px) {
  .addPetModalOverlay {
    align-items: flex-end;
    padding: 10px;
  }

  .addPetModal {
    width: 100%;
    max-height: calc(100vh - 20px);

    padding: 24px 18px 20px;
    border-radius: 25px;
  }

  .addPetModalHeader h2 {
    font-size: 27px;
  }

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

  .addPetFieldFull {
    grid-column: auto;
  }

  .addPetSpeciesButton {
    min-height: 76px;
    padding: 12px;
  }

  .addPetSpeciesEmoji {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }

  .addPetModalActions {
    flex-direction: column-reverse;
  }

  .addPetCancelButton,
  .addPetSubmitButton {
    width: 100%;
  }
}
/* =========================================================
   DOC.PUG — ADD PET MODAL: ПОДДЕРЖКА ТЕМ
   ВАЖНО: вставить ниже основного CSS .addPetModal...
   ========================================================= */

/* ---------- Базовые переменные: PURPLE ---------- */

body,
body[data-theme="purple"] {
  --pet-modal-accent: #9a5cff;
  --pet-modal-accent-2: #c064ff;
  --pet-modal-accent-soft: rgba(145, 83, 255, 0.18);
  --pet-modal-accent-border: rgba(171, 112, 255, 0.78);
  --pet-modal-focus-ring: rgba(139, 80, 255, 0.13);

  --pet-modal-bg-1: rgba(27, 22, 46, 0.99);
  --pet-modal-bg-2: rgba(11, 9, 23, 0.995);
  --pet-modal-surface: rgba(255, 255, 255, 0.045);
  --pet-modal-surface-hover: rgba(255, 255, 255, 0.075);

  --pet-modal-text: #ffffff;
  --pet-modal-text-soft: rgba(238, 233, 250, 0.68);
  --pet-modal-text-muted: rgba(225, 217, 240, 0.38);

  --pet-modal-border: rgba(189, 170, 226, 0.14);
  --pet-modal-strong-border: rgba(180, 148, 255, 0.23);

  --pet-modal-overlay: rgba(3, 2, 11, 0.84);
  --pet-modal-shadow: rgba(0, 0, 0, 0.72);
}

/* ---------- BLACK ---------- */

body[data-theme="black"] {
  --pet-modal-accent: #ffffff;
  --pet-modal-accent-2: #a8a8b3;
  --pet-modal-accent-soft: rgba(255, 255, 255, 0.09);
  --pet-modal-accent-border: rgba(255, 255, 255, 0.42);
  --pet-modal-focus-ring: rgba(255, 255, 255, 0.09);

  --pet-modal-bg-1: rgba(18, 18, 21, 0.995);
  --pet-modal-bg-2: rgba(5, 5, 7, 0.998);
  --pet-modal-surface: rgba(255, 255, 255, 0.045);
  --pet-modal-surface-hover: rgba(255, 255, 255, 0.085);

  --pet-modal-text: #ffffff;
  --pet-modal-text-soft: rgba(255, 255, 255, 0.68);
  --pet-modal-text-muted: rgba(255, 255, 255, 0.36);

  --pet-modal-border: rgba(255, 255, 255, 0.11);
  --pet-modal-strong-border: rgba(255, 255, 255, 0.17);

  --pet-modal-overlay: rgba(0, 0, 0, 0.89);
  --pet-modal-shadow: rgba(0, 0, 0, 0.9);
}

/* ---------- BLUE ---------- */

body[data-theme="blue"] {
  --pet-modal-accent: #4285ff;
  --pet-modal-accent-2: #42c7ff;
  --pet-modal-accent-soft: rgba(49, 122, 255, 0.17);
  --pet-modal-accent-border: rgba(74, 147, 255, 0.78);
  --pet-modal-focus-ring: rgba(58, 132, 255, 0.13);

  --pet-modal-bg-1: rgba(15, 28, 50, 0.99);
  --pet-modal-bg-2: rgba(5, 12, 25, 0.998);
  --pet-modal-surface: rgba(100, 166, 255, 0.055);
  --pet-modal-surface-hover: rgba(100, 178, 255, 0.1);

  --pet-modal-text: #f8fbff;
  --pet-modal-text-soft: rgba(224, 238, 255, 0.7);
  --pet-modal-text-muted: rgba(197, 220, 248, 0.4);

  --pet-modal-border: rgba(127, 180, 255, 0.15);
  --pet-modal-strong-border: rgba(95, 157, 255, 0.25);

  --pet-modal-overlay: rgba(2, 7, 17, 0.86);
  --pet-modal-shadow: rgba(0, 5, 20, 0.78);
}

/* ---------- GREEN ---------- */

body[data-theme="green"] {
  --pet-modal-accent: #28c985;
  --pet-modal-accent-2: #66e8ab;
  --pet-modal-accent-soft: rgba(35, 197, 129, 0.16);
  --pet-modal-accent-border: rgba(60, 212, 149, 0.74);
  --pet-modal-focus-ring: rgba(35, 199, 130, 0.13);

  --pet-modal-bg-1: rgba(15, 38, 31, 0.99);
  --pet-modal-bg-2: rgba(5, 18, 14, 0.998);
  --pet-modal-surface: rgba(71, 211, 153, 0.05);
  --pet-modal-surface-hover: rgba(73, 220, 159, 0.095);

  --pet-modal-text: #f5fff9;
  --pet-modal-text-soft: rgba(219, 246, 231, 0.69);
  --pet-modal-text-muted: rgba(193, 229, 210, 0.39);

  --pet-modal-border: rgba(105, 222, 165, 0.14);
  --pet-modal-strong-border: rgba(74, 211, 146, 0.23);

  --pet-modal-overlay: rgba(2, 12, 8, 0.87);
  --pet-modal-shadow: rgba(0, 17, 10, 0.8);
}

/* ---------- WHITE ---------- */

body[data-theme="white"] {
  --pet-modal-accent: #7557eb;
  --pet-modal-accent-2: #a45cf0;
  --pet-modal-accent-soft: rgba(111, 80, 225, 0.1);
  --pet-modal-accent-border: rgba(111, 80, 225, 0.62);
  --pet-modal-focus-ring: rgba(111, 80, 225, 0.12);

  --pet-modal-bg-1: rgba(255, 255, 255, 0.995);
  --pet-modal-bg-2: rgba(245, 245, 251, 0.998);
  --pet-modal-surface: rgba(34, 31, 55, 0.035);
  --pet-modal-surface-hover: rgba(83, 65, 145, 0.065);

  --pet-modal-text: #191725;
  --pet-modal-text-soft: rgba(39, 35, 56, 0.68);
  --pet-modal-text-muted: rgba(45, 39, 64, 0.42);

  --pet-modal-border: rgba(40, 34, 64, 0.11);
  --pet-modal-strong-border: rgba(92, 68, 173, 0.2);

  --pet-modal-overlay: rgba(21, 18, 34, 0.48);
  --pet-modal-shadow: rgba(32, 24, 56, 0.25);
}

/* =========================================================
   ПРИМЕНЕНИЕ ПЕРЕМЕННЫХ
   ========================================================= */

.addPetModalOverlay {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 12%,
      var(--pet-modal-accent-soft),
      transparent 42%
    ),
    var(--pet-modal-overlay);
}

.addPetModal {
  overflow-x: hidden;

  color: var(--pet-modal-text);

  background:
    linear-gradient(
      145deg,
      var(--pet-modal-bg-1),
      var(--pet-modal-bg-2)
    );

  border-color: var(--pet-modal-strong-border);

  box-shadow:
    0 40px 120px var(--pet-modal-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 90px var(--pet-modal-accent-soft);
}

.addPetModalGlowOne {
  background: var(--pet-modal-accent-soft);
}

.addPetModalGlowTwo {
  background: var(--pet-modal-accent-soft);
  opacity: 0.55;
}

.addPetModalKicker {
  color: var(--pet-modal-accent);
}

.addPetModalHeader h2 {
  color: var(--pet-modal-text);
}

.addPetModalHeader p {
  color: var(--pet-modal-text-soft);
}

.addPetModalClose {
  color: var(--pet-modal-text-soft);
  background: var(--pet-modal-surface);
  border-color: var(--pet-modal-border);
}

.addPetModalClose:hover {
  color: var(--pet-modal-text);
  background: var(--pet-modal-accent-soft);
  border-color: var(--pet-modal-accent-border);
}

.addPetLabel {
  color: var(--pet-modal-text);
}

.addPetLabel b {
  color: var(--pet-modal-accent);
}

.addPetLabel small {
  color: var(--pet-modal-text-muted);
}

.addPetInputIcon {
  color: var(--pet-modal-accent);
}

.addPetInput,
.addPetTextarea {
  color: var(--pet-modal-text);

  background:
    linear-gradient(
      180deg,
      var(--pet-modal-surface),
      color-mix(in srgb, var(--pet-modal-surface) 55%, transparent)
    );

  border-color: var(--pet-modal-border);
}

.addPetInput::placeholder,
.addPetTextarea::placeholder {
  color: var(--pet-modal-text-muted);
}

.addPetInput:hover,
.addPetTextarea:hover {
  border-color: var(--pet-modal-accent-border);
}

.addPetInput:focus,
.addPetTextarea:focus {
  background: var(--pet-modal-accent-soft);
  border-color: var(--pet-modal-accent);

  box-shadow:
    0 0 0 4px var(--pet-modal-focus-ring),
    0 12px 35px rgba(0, 0, 0, 0.14);
}

.addPetSpeciesButton {
  color: var(--pet-modal-text-soft);

  background:
    linear-gradient(
      155deg,
      var(--pet-modal-surface),
      color-mix(in srgb, var(--pet-modal-surface) 45%, transparent)
    );

  border-color: var(--pet-modal-border);
}

.addPetSpeciesButton:hover {
  color: var(--pet-modal-text);
  background: var(--pet-modal-surface-hover);
  border-color: var(--pet-modal-accent-border);
}

.addPetSpeciesButton.is-active {
  color: var(--pet-modal-text);

  background:
    linear-gradient(
      135deg,
      var(--pet-modal-accent-soft),
      color-mix(in srgb, var(--pet-modal-accent-soft) 45%, transparent)
    );

  border-color: var(--pet-modal-accent);

  box-shadow:
    0 0 0 3px var(--pet-modal-focus-ring),
    0 15px 35px rgba(0, 0, 0, 0.16);
}

.addPetSpeciesEmoji {
  background: var(--pet-modal-surface);
  border-color: var(--pet-modal-border);
}

.addPetSpeciesButton.is-active .addPetSpeciesEmoji {
  background: var(--pet-modal-accent-soft);
}

.addPetSpeciesInfo strong {
  color: inherit;
}

.addPetSpeciesInfo small {
  color: var(--pet-modal-text-muted);
}

.addPetSpeciesCheck {
  color: #ffffff;
  background: var(--pet-modal-accent);
}

.addPetWeightWrap > span,
.addPetNotesCounter {
  color: var(--pet-modal-text-muted);
}

.addPetModalActions {
  border-top-color: var(--pet-modal-border);
}

.addPetCancelButton {
  color: var(--pet-modal-text-soft);
  background: var(--pet-modal-surface);
  border-color: var(--pet-modal-border);
}

.addPetCancelButton:hover {
  color: var(--pet-modal-text);
  background: var(--pet-modal-surface-hover);
}

.addPetSubmitButton {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--pet-modal-accent),
      var(--pet-modal-accent-2)
    );

  box-shadow:
    0 15px 34px
      color-mix(in srgb, var(--pet-modal-accent) 32%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.27) inset;
}

.addPetSubmitButton:hover {
  box-shadow:
    0 19px 42px
      color-mix(in srgb, var(--pet-modal-accent) 44%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.32) inset;
}

.addPetModal::-webkit-scrollbar-thumb {
  background: var(--pet-modal-accent-border);
}

/* Белая тема: более естественная тень и поля */

body[data-theme="white"] .addPetModal {
  box-shadow:
    0 35px 100px rgba(34, 27, 58, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

body[data-theme="white"] .addPetInput,
body[data-theme="white"] .addPetTextarea,
body[data-theme="white"] .addPetSpeciesButton {
  box-shadow: 0 1px 2px rgba(32, 24, 55, 0.03);
}

body[data-theme="white"] .addPetSubmitButton {
  color: #ffffff;
}

body[data-theme="white"] .addPetModalClose {
  box-shadow: 0 3px 12px rgba(42, 34, 70, 0.06);
}
/* =========================================================
   DOC.PUG — SPECIES + BREED COMBOBOX
   ========================================================= */

.addPetSpeciesSelector {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.addPetSpeciesButtonOther {
  grid-column: auto;
}

.addPetBreedCombobox {
  position: relative;
}

.addPetBreedField {
  position: relative;
}

.addPetBreedClear {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 3;

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  color: var(--pet-modal-text-muted);
  font-size: 18px;
  line-height: 1;

  background: transparent;
  border: 0;
  border-radius: 9px;

  cursor: pointer;
  transform: translateY(-50%);

  transition:
    color 0.16s ease,
    background 0.16s ease;
}

.addPetBreedClear:hover {
  color: var(--pet-modal-text);
  background: var(--pet-modal-surface-hover);
}

.addPetBreedCombobox .addPetInput {
  padding-right: 48px;
}

.addPetBreedDropdown {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  right: 0;
  z-index: 40;

  max-height: 310px;
  overflow-y: auto;

  padding: 8px;

  background:
    linear-gradient(
      145deg,
      var(--pet-modal-bg-1),
      var(--pet-modal-bg-2)
    );

  border: 1px solid var(--pet-modal-strong-border);
  border-radius: 17px;

  box-shadow:
    0 22px 60px var(--pet-modal-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px) scale(0.985);

  transition:
    opacity 0.16s ease,
    visibility 0.16s ease,
    transform 0.16s ease;
}

.addPetBreedDropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.addPetBreedDropdown::-webkit-scrollbar {
  width: 6px;
}

.addPetBreedDropdown::-webkit-scrollbar-thumb {
  background: var(--pet-modal-accent-border);
  border-radius: 999px;
}

.addPetBreedOption {
  width: 100%;
  min-height: 46px;
  padding: 9px 11px;

  display: flex;
  align-items: center;
  gap: 11px;

  color: var(--pet-modal-text-soft);
  text-align: left;

  background: transparent;
  border: 0;
  border-radius: 12px;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.addPetBreedOption:hover {
  color: var(--pet-modal-text);
  background: var(--pet-modal-accent-soft);
  transform: translateX(2px);
}

.addPetBreedOption.is-selected {
  color: var(--pet-modal-text);
  background: var(--pet-modal-accent-soft);
}

.addPetBreedOptionIcon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  background: var(--pet-modal-surface);
  border: 1px solid var(--pet-modal-border);
  border-radius: 10px;

  font-size: 14px;
}

.addPetBreedOption > span:nth-child(2) {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.addPetBreedOption b {
  color: var(--pet-modal-accent);
  font-size: 13px;
}

.addPetBreedEmpty {
  padding: 24px 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  color: var(--pet-modal-text-soft);
  text-align: center;
}

.addPetBreedEmpty span {
  font-size: 13px;
  font-weight: 800;
}

.addPetBreedEmpty small {
  color: var(--pet-modal-text-muted);
  font-size: 11px;
}

.addPetBreedHint {
  margin-top: -2px;

  color: var(--pet-modal-text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.addPetInput:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.addPetBreedField.is-other-species .addPetInputIcon {
  color: var(--pet-modal-accent);
}

body[data-theme="white"] .addPetBreedDropdown {
  box-shadow:
    0 22px 55px rgba(31, 24, 54, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.85) inset;
}

@media (max-width: 680px) {
  .addPetSpeciesSelector {
    grid-template-columns: 1fr 1fr;
  }

  .addPetSpeciesButtonOther {
    grid-column: 1 / -1;
  }

  .addPetSpeciesButtonOther {
    min-height: 66px;
  }

  .addPetBreedDropdown {
    max-height: 245px;
  }
}
.petDeleteBtn{
    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;

    color:#a8a8b3;
    cursor:pointer;

    transition:.18s;
}

.petDeleteBtn:hover{
    color:#ff6b81;
    background:rgba(255,80,80,.12);
    border-color:rgba(255,80,80,.35);

    transform:scale(1.08);
}

.petDeleteBtn svg{
    width:16px;
    height:16px;
}
/* =========================================================
   DOC.PUG — КНОПКА УДАЛЕНИЯ ПАЦИЕНТА
   ========================================================= */

#petsList button.iconBtn[data-del-pet],
.pets-container button.iconBtn[data-del-pet] {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 15px !important;
  line-height: 1 !important;

  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 11px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 5px 14px rgba(0, 0, 0, 0.12) !important;

  cursor: pointer !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

#petsList button.iconBtn[data-del-pet]:hover,
.pets-container button.iconBtn[data-del-pet]:hover {
  color: #ff8495 !important;

  background: rgba(255, 76, 103, 0.13) !important;
  border-color: rgba(255, 96, 120, 0.38) !important;

  box-shadow:
    0 0 18px rgba(255, 76, 103, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  transform: translateY(-2px) scale(1.04) !important;
}

#petsList button.iconBtn[data-del-pet]:active,
.pets-container button.iconBtn[data-del-pet]:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Белая тема */

body[data-theme="white"] #petsList button.iconBtn[data-del-pet],
body[data-theme="white"] .pets-container button.iconBtn[data-del-pet] {
  color: rgba(28, 28, 30, 0.46) !important;

  background: rgba(255, 255, 255, 0.68) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="white"] #petsList button.iconBtn[data-del-pet]:hover,
body[data-theme="white"] .pets-container button.iconBtn[data-del-pet]:hover {
  color: #e5484d !important;
  background: rgba(255, 69, 79, 0.09) !important;
  border-color: rgba(229, 72, 77, 0.25) !important;
}
#petsList button.iconBtn[data-del-pet] svg,
.pets-container button.iconBtn[data-del-pet] svg {
  display: block;
  pointer-events: none;
}
/* =========================================================
   DOC.PUG — ДІЇ У ТАБЛИЦІ ВЛАСНИКІВ
   ========================================================= */

.ownerActionsCell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.ownerActionBtn {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: rgba(255, 255, 255, 0.52) !important;

  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 11px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 5px 14px rgba(0, 0, 0, 0.12) !important;

  cursor: pointer !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

.ownerActionBtn svg {
  display: block;
  pointer-events: none;
}

/* Редагування */

.ownerEditBtn:hover {
  color: var(--accent-color, #a855f7) !important;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 14%,
      transparent
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 38%,
      transparent
    ) !important;

  box-shadow:
    0 0 18px var(--accent-glow, rgba(168, 85, 247, 0.18)),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  transform: translateY(-2px) scale(1.04) !important;
}

/* Видалення */

.ownerDeleteBtn:hover {
  color: #ff8495 !important;

  background: rgba(255, 76, 103, 0.13) !important;
  border-color: rgba(255, 96, 120, 0.38) !important;

  box-shadow:
    0 0 18px rgba(255, 76, 103, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  transform: translateY(-2px) scale(1.04) !important;
}

.ownerActionBtn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Белая тема */

body[data-theme="white"] .ownerActionBtn {
  color: rgba(28, 28, 30, 0.48) !important;

  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

body[data-theme="white"] .ownerEditBtn:hover {
  color: var(--accent-color, #007aff) !important;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #007aff) 10%,
      white
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #007aff) 25%,
      transparent
    ) !important;
}

body[data-theme="white"] .ownerDeleteBtn:hover {
  color: #e5484d !important;
  background: rgba(255, 69, 79, 0.09) !important;
  border-color: rgba(229, 72, 77, 0.25) !important;
}
/* =========================================================
   DOC.PUG — ДІЇ У СПИСКУ ПАЦІЄНТІВ
   ========================================================= */

.patientActionsCell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding-left: 16px !important;
  flex-shrink: 0 !important;
}

.patientActionBtn {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: rgba(255, 255, 255, 0.52) !important;

  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 11px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 5px 14px rgba(0, 0, 0, 0.12) !important;

  cursor: pointer !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

.patientActionBtn svg {
  display: block !important;
  pointer-events: none !important;
}

.patientEditBtn:hover {
  color: var(--accent-color, #a855f7) !important;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 14%,
      transparent
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 38%,
      transparent
    ) !important;

  box-shadow:
    0 0 18px var(--accent-glow, rgba(168, 85, 247, 0.18)),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  transform: translateY(-2px) scale(1.04) !important;
}

.patientDeleteBtn:hover {
  color: #ff8495 !important;

  background: rgba(255, 76, 103, 0.13) !important;
  border-color: rgba(255, 96, 120, 0.38) !important;

  box-shadow:
    0 0 18px rgba(255, 76, 103, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  transform: translateY(-2px) scale(1.04) !important;
}

.patientActionBtn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Белая тема */

body[data-theme="white"] .patientActionBtn {
  color: rgba(28, 28, 30, 0.48) !important;

  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

body[data-theme="white"] .patientEditBtn:hover {
  color: var(--accent-color, #007aff) !important;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #007aff) 10%,
      white
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #007aff) 25%,
      transparent
    ) !important;
}

body[data-theme="white"] .patientDeleteBtn:hover {
  color: #e5484d !important;
  background: rgba(255, 69, 79, 0.09) !important;
  border-color: rgba(229, 72, 77, 0.25) !important;
}
/* =========================================================
   DOC.PUG — ДІЇ У КАРТЦІ ВІЗИТУ
   ========================================================= */

.visitCardActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.visitCardAction {
  appearance: none;
  -webkit-appearance: none;

  min-height: 36px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: rgba(255, 255, 255, 0.58);
  font: inherit;
  font-size: 12px;
  font-weight: 750;

  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.visitCardAction svg {
  display: block;
  pointer-events: none;
}

.visitCardAction span {
  pointer-events: none;
}

.visitCardEdit:hover {
  color: var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 13%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 36%,
      transparent
    );

  box-shadow:
    0 0 18px var(--accent-glow, rgba(168, 85, 247, 0.18));

  transform: translateY(-2px);
}

.visitCardDelete {
  color: rgba(255, 125, 145, 0.72);
  background: rgba(255, 72, 100, 0.055);
  border-color: rgba(255, 84, 110, 0.13);
}

.visitCardDelete:hover {
  color: #ff8b9d;
  background: rgba(255, 72, 100, 0.14);
  border-color: rgba(255, 96, 120, 0.4);

  box-shadow:
    0 0 20px rgba(255, 72, 100, 0.15);

  transform: translateY(-2px);
}

.visitCardAction:active {
  transform: translateY(0) scale(0.97);
}

/* Светлая тема */

body[data-theme="white"] .visitCardAction {
  color: rgba(28, 28, 30, 0.52);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.08);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="white"] .visitCardDelete {
  color: #d94b57;
  background: rgba(255, 69, 79, 0.07);
  border-color: rgba(229, 72, 77, 0.16);
}

body[data-theme="white"] .visitCardDelete:hover {
  color: #c9343f;
  background: rgba(255, 69, 79, 0.12);
  border-color: rgba(229, 72, 77, 0.3);
}

@media (max-width: 680px) {
  .visitCardActions {
    flex-wrap: wrap;
  }

  .visitCardAction {
    flex: 1;
  }
}
.visitCardActions {
    justify-content: flex-end;
}

.visitCardActions .visitCardDelete {
    margin-left: auto;
}
/* =========================================================
   DOC.PUG — PREMIUM PATIENT VISIT HISTORY
   ========================================================= */

.premiumVisitTimelineItem {
  position: relative;
  padding-left: 34px;
  margin-bottom: 18px;
}

.premiumVisitNode {
  position: absolute;
  top: 28px;
  left: 5px;
  z-index: 3;

  width: 14px;
  height: 14px;

  background:
    radial-gradient(
      circle,
      var(--accent-color, #a855f7) 0 35%,
      rgba(168, 85, 247, 0.22) 38% 100%
    );

  border: 2px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 55%,
      white
    );

  border-radius: 50%;

  box-shadow:
    0 0 0 6px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 10%,
        transparent
      ),
    0 0 18px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 42%,
        transparent
      );
}

.premiumVisitCard {
  position: relative;
  overflow: hidden;

  padding: 26px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 9%,
        transparent
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(28, 19, 51, 0.88),
      rgba(13, 10, 29, 0.94)
    );

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;

  box-shadow:
    0 16px 46px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  cursor: pointer;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.premiumVisitCard:hover {
  transform: translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 34%,
      transparent
    );

  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.34),
    0 0 32px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 12%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.premiumVisitCard:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 24%,
        transparent
      ),
    0 24px 62px rgba(0, 0, 0, 0.34);
}

.premiumVisitAccent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background:
    linear-gradient(
      180deg,
      var(--accent-color, #a855f7),
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 25%,
        transparent
      )
    );

  box-shadow:
    0 0 18px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 40%,
        transparent
      );
}

.premiumVisitTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.premiumVisitHeading {
  min-width: 0;
  flex: 1;
}

.premiumVisitEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 10px;

  color: rgba(231, 225, 244, 0.48);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.premiumVisitDateIcon {
  display: inline-flex;
  color: var(--accent-color, #a855f7);
}

.premiumVisitDiagnosis {
  margin: 0;

  display: flex;
  align-items: flex-start;
  gap: 10px;

  color: #ffffff;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 820;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.premiumVisitDiagnosis .v-dx {
  min-width: 0;
  overflow-wrap: anywhere;
}

.premiumVisitDiagnosisIcon {
  flex: 0 0 auto;

  margin-top: 3px;

  color: var(--accent-color, #a855f7);
}

.premiumVisitBadges {
  display: flex;
  max-width: 46%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.premiumVisitPrice,
.premiumVisitType {
  min-height: 34px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;

  border-radius: 999px;
}

.premiumVisitPrice {
  color: #66e89b;

  background: rgba(35, 200, 107, 0.09);
  border: 1px solid rgba(65, 221, 134, 0.19);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.premiumVisitType {
  color: rgba(236, 230, 247, 0.61);

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.premiumVisitDivider {
  height: 1px;
  margin: 21px 0;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.025),
      transparent
    );
}

.premiumVisitContent {
  display: grid;
  gap: 14px;
}

.premiumVisitSection {
  padding: 17px 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.034),
      rgba(255, 255, 255, 0.015)
    );

  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 16px;
}

.premiumVisitSectionHead {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;

  color: rgba(240, 235, 249, 0.58);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premiumVisitSectionIcon {
  display: inline-flex;
  color: var(--accent-color, #a855f7);
}

.premiumVisitText {
  color: rgba(250, 248, 255, 0.88);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.premiumVisitTreatment {
  font-family: inherit;
}

.premiumVisitList {
  margin: 0;
  padding: 0;

  display: grid;
  gap: 7px;

  list-style: none;
}

.premiumVisitList li {
  position: relative;
  padding-left: 17px;
}

.premiumVisitList li::before {
  content: "";

  position: absolute;
  top: 0.72em;
  left: 1px;

  width: 5px;
  height: 5px;

  background: var(--accent-color, #a855f7);
  border-radius: 50%;

  box-shadow:
    0 0 8px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 45%,
        transparent
      );
}

.premiumVisitFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-top: 20px;
  padding-top: 17px;

  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.premiumVisitOpenHint {
  color: rgba(222, 215, 238, 0.32);
  font-size: 11px;

  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.premiumVisitCard:hover .premiumVisitOpenHint {
  color: rgba(232, 225, 246, 0.57);
  transform: translateX(2px);
}

.visitCardActions {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.visitCardAction {
  min-height: 36px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: rgba(255, 127, 145, 0.69);
  font: inherit;
  font-size: 12px;
  font-weight: 750;

  background: rgba(255, 72, 100, 0.05);
  border: 1px solid rgba(255, 82, 108, 0.13);
  border-radius: 11px;

  cursor: pointer;

  opacity: 0.72;

  transition:
    color 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.premiumVisitCard:hover .visitCardAction {
  opacity: 1;
}

.visitCardAction:hover {
  color: #ff91a2;
  background: rgba(255, 72, 100, 0.14);
  border-color: rgba(255, 96, 120, 0.38);

  box-shadow:
    0 0 20px rgba(255, 72, 100, 0.14);

  transform: translateY(-2px);
}

.visitCardAction:active {
  transform: translateY(0) scale(0.97);
}

.visitCardAction svg,
.visitCardAction span {
  pointer-events: none;
}

/* ---------- WHITE THEME ---------- */

body[data-theme="white"] .premiumVisitCard {
  color: #1d1b28;

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--accent-color, #7557eb) 7%,
        transparent
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 245, 250, 0.98)
    );

  border-color: rgba(40, 32, 65, 0.09);

  box-shadow:
    0 16px 42px rgba(35, 27, 60, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="white"] .premiumVisitDiagnosis {
  color: #1d1b28;
}

body[data-theme="white"] .premiumVisitEyebrow {
  color: rgba(37, 31, 55, 0.48);
}

body[data-theme="white"] .premiumVisitType {
  color: rgba(37, 31, 55, 0.56);
  background: rgba(40, 32, 65, 0.035);
  border-color: rgba(40, 32, 65, 0.08);
}

body[data-theme="white"] .premiumVisitDivider {
  background:
    linear-gradient(
      90deg,
      rgba(40, 32, 65, 0.1),
      rgba(40, 32, 65, 0.03),
      transparent
    );
}

body[data-theme="white"] .premiumVisitSection {
  background:
    linear-gradient(
      145deg,
      rgba(40, 32, 65, 0.025),
      rgba(40, 32, 65, 0.012)
    );

  border-color: rgba(40, 32, 65, 0.07);
}

body[data-theme="white"] .premiumVisitSectionHead {
  color: rgba(37, 31, 55, 0.5);
}

body[data-theme="white"] .premiumVisitText {
  color: rgba(29, 27, 40, 0.84);
}

body[data-theme="white"] .premiumVisitFooter {
  border-top-color: rgba(40, 32, 65, 0.07);
}

body[data-theme="white"] .premiumVisitOpenHint {
  color: rgba(37, 31, 55, 0.34);
}

/* ---------- MOBILE ---------- */

@media (max-width: 720px) {
  .premiumVisitTimelineItem {
    padding-left: 24px;
  }

  .premiumVisitNode {
    left: 0;
  }

  .premiumVisitCard {
    padding: 20px 17px;
    border-radius: 19px;
  }

  .premiumVisitTop {
    flex-direction: column;
    gap: 15px;
  }

  .premiumVisitBadges {
    justify-content: flex-start;
  }

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

  .premiumVisitOpenHint {
    display: none;
  }

  .visitCardActions,
  .visitCardAction {
    width: 100%;
  }
}
/* =========================================================
   DOC.PUG — PREMIUM VISIT CARDS: THEME ADAPTIVE FIX
   Вставить в самый конец style.css
   ========================================================= */

/* PURPLE — базовая тема */
:root,
body[data-theme="purple"] {
  --visit-card-bg-start: rgba(28, 19, 51, 0.92);
  --visit-card-bg-end: rgba(13, 10, 29, 0.96);

  --visit-card-section-start: rgba(255, 255, 255, 0.04);
  --visit-card-section-end: rgba(255, 255, 255, 0.016);

  --visit-card-border: rgba(255, 255, 255, 0.075);
  --visit-card-divider: rgba(255, 255, 255, 0.055);
  --visit-card-text: #ffffff;
  --visit-card-text-soft: rgba(250, 248, 255, 0.88);
  --visit-card-text-muted: rgba(231, 225, 244, 0.48);
}

/* BLACK */
body[data-theme="black"] {
  --visit-card-bg-start: rgba(22, 22, 25, 0.96);
  --visit-card-bg-end: rgba(6, 6, 8, 0.985);

  --visit-card-section-start: rgba(255, 255, 255, 0.038);
  --visit-card-section-end: rgba(255, 255, 255, 0.012);

  --visit-card-border: rgba(255, 255, 255, 0.09);
  --visit-card-divider: rgba(255, 255, 255, 0.06);
  --visit-card-text: #ffffff;
  --visit-card-text-soft: rgba(255, 255, 255, 0.86);
  --visit-card-text-muted: rgba(255, 255, 255, 0.46);
}

/* BLUE */
body[data-theme="blue"] {
  --visit-card-bg-start: rgba(8, 35, 48, 0.94);
  --visit-card-bg-end: rgba(3, 15, 24, 0.98);

  --visit-card-section-start: rgba(65, 205, 232, 0.055);
  --visit-card-section-end: rgba(22, 117, 145, 0.018);

  --visit-card-border: rgba(76, 205, 232, 0.12);
  --visit-card-divider: rgba(90, 211, 235, 0.07);
  --visit-card-text: #f5fdff;
  --visit-card-text-soft: rgba(227, 248, 252, 0.88);
  --visit-card-text-muted: rgba(199, 234, 241, 0.48);
}

/* GREEN */
body[data-theme="green"] {
  --visit-card-bg-start: rgba(7, 42, 33, 0.94);
  --visit-card-bg-end: rgba(2, 19, 14, 0.985);

  --visit-card-section-start: rgba(44, 211, 148, 0.055);
  --visit-card-section-end: rgba(21, 112, 80, 0.018);

  --visit-card-border: rgba(67, 221, 161, 0.12);
  --visit-card-divider: rgba(75, 222, 165, 0.07);
  --visit-card-text: #f3fff9;
  --visit-card-text-soft: rgba(226, 249, 237, 0.88);
  --visit-card-text-muted: rgba(194, 232, 211, 0.48);
}

/* WHITE */
body[data-theme="white"] {
  --visit-card-bg-start: rgba(255, 255, 255, 0.98);
  --visit-card-bg-end: rgba(241, 244, 249, 0.98);

  --visit-card-section-start: rgba(40, 42, 55, 0.032);
  --visit-card-section-end: rgba(40, 42, 55, 0.012);

  --visit-card-border: rgba(40, 32, 65, 0.09);
  --visit-card-divider: rgba(40, 32, 65, 0.07);
  --visit-card-text: #1d1b28;
  --visit-card-text-soft: rgba(29, 27, 40, 0.84);
  --visit-card-text-muted: rgba(37, 31, 55, 0.48);
}

/* ---------- ПРИМЕНЕНИЕ ---------- */

.premiumVisitCard {
  color: var(--visit-card-text) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 11%,
        transparent
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      var(--visit-card-bg-start),
      var(--visit-card-bg-end)
    ) !important;

  border-color: var(--visit-card-border) !important;

  box-shadow:
    0 16px 46px rgba(0, 0, 0, 0.24),
    0 0 34px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 6%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.premiumVisitCard:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 38%,
      var(--visit-card-border)
    ) !important;

  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.34),
    0 0 34px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 14%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.premiumVisitDiagnosis {
  color: var(--visit-card-text) !important;
}

.premiumVisitEyebrow,
.premiumVisitSectionHead,
.premiumVisitOpenHint {
  color: var(--visit-card-text-muted) !important;
}

.premiumVisitText {
  color: var(--visit-card-text-soft) !important;
}

.premiumVisitSection {
  background:
    linear-gradient(
      145deg,
      var(--visit-card-section-start),
      var(--visit-card-section-end)
    ) !important;

  border-color: var(--visit-card-border) !important;
}

.premiumVisitDivider {
  background:
    linear-gradient(
      90deg,
      var(--visit-card-divider),
      color-mix(
        in srgb,
        var(--visit-card-divider) 40%,
        transparent
      ),
      transparent
    ) !important;
}

.premiumVisitFooter {
  border-top-color: var(--visit-card-divider) !important;
}

.premiumVisitType {
  color: var(--visit-card-text-muted) !important;
  background: var(--visit-card-section-start) !important;
  border-color: var(--visit-card-border) !important;
}

/* Чтобы зелёная тема выглядела именно изумрудной, а не фиолетовой */
body[data-theme="green"] .premiumVisitCard {
  box-shadow:
    0 18px 52px rgba(0, 16, 10, 0.34),
    0 0 38px rgba(16, 185, 129, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* Синяя тема */
body[data-theme="blue"] .premiumVisitCard {
  box-shadow:
    0 18px 52px rgba(0, 11, 20, 0.34),
    0 0 38px rgba(6, 182, 212, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* Белая тема */
body[data-theme="white"] .premiumVisitCard {
  box-shadow:
    0 16px 42px rgba(35, 27, 60, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
/* =========================================================
   DOC.PUG — PREMIUM MEDCARD / STATIONARY DIARY MODAL
   ========================================================= */

body.medcardModalIsOpen {
  overflow: hidden !important;
}

/* ---------- Theme variables ---------- */

body,
body[data-theme="purple"] {
  --med-accent: var(--accent-color, #a855f7);
  --med-accent-soft: rgba(168, 85, 247, 0.14);
  --med-accent-border: rgba(181, 119, 255, 0.38);

  --med-overlay: rgba(3, 2, 12, 0.82);
  --med-window-start: rgba(28, 21, 49, 0.985);
  --med-window-end: rgba(10, 8, 23, 0.995);

  --med-surface: rgba(255, 255, 255, 0.038);
  --med-surface-hover: rgba(255, 255, 255, 0.06);
  --med-input: rgba(4, 3, 12, 0.28);

  --med-border: rgba(255, 255, 255, 0.085);
  --med-text: #ffffff;
  --med-text-soft: rgba(244, 239, 252, 0.72);
  --med-text-muted: rgba(226, 217, 241, 0.4);

  --med-shadow: rgba(0, 0, 0, 0.68);
}

body[data-theme="black"] {
  --med-accent: var(--accent-color, #f43f5e);
  --med-accent-soft: rgba(244, 63, 94, 0.11);
  --med-accent-border: rgba(244, 63, 94, 0.32);

  --med-overlay: rgba(0, 0, 0, 0.9);
  --med-window-start: rgba(20, 20, 23, 0.99);
  --med-window-end: rgba(5, 5, 7, 0.998);

  --med-surface: rgba(255, 255, 255, 0.038);
  --med-surface-hover: rgba(255, 255, 255, 0.065);
  --med-input: rgba(0, 0, 0, 0.32);

  --med-border: rgba(255, 255, 255, 0.09);
  --med-text: #ffffff;
  --med-text-soft: rgba(255, 255, 255, 0.7);
  --med-text-muted: rgba(255, 255, 255, 0.38);

  --med-shadow: rgba(0, 0, 0, 0.88);
}

body[data-theme="blue"] {
  --med-accent: var(--accent-color, #06b6d4);
  --med-accent-soft: rgba(6, 182, 212, 0.13);
  --med-accent-border: rgba(47, 204, 227, 0.35);

  --med-overlay: rgba(1, 8, 15, 0.86);
  --med-window-start: rgba(8, 34, 47, 0.985);
  --med-window-end: rgba(3, 14, 23, 0.998);

  --med-surface: rgba(83, 205, 227, 0.04);
  --med-surface-hover: rgba(83, 205, 227, 0.07);
  --med-input: rgba(1, 10, 18, 0.3);

  --med-border: rgba(89, 209, 229, 0.1);
  --med-text: #f5fdff;
  --med-text-soft: rgba(224, 246, 250, 0.72);
  --med-text-muted: rgba(199, 232, 239, 0.4);

  --med-shadow: rgba(0, 10, 18, 0.76);
}

body[data-theme="green"] {
  --med-accent: var(--accent-color, #10b981);
  --med-accent-soft: rgba(16, 185, 129, 0.13);
  --med-accent-border: rgba(55, 211, 153, 0.34);

  --med-overlay: rgba(1, 11, 7, 0.87);
  --med-window-start: rgba(7, 39, 30, 0.985);
  --med-window-end: rgba(2, 17, 12, 0.998);

  --med-surface: rgba(71, 211, 153, 0.04);
  --med-surface-hover: rgba(71, 211, 153, 0.07);
  --med-input: rgba(1, 12, 8, 0.3);

  --med-border: rgba(92, 221, 169, 0.1);
  --med-text: #f4fff9;
  --med-text-soft: rgba(221, 246, 233, 0.72);
  --med-text-muted: rgba(190, 226, 207, 0.4);

  --med-shadow: rgba(0, 15, 9, 0.78);
}

body[data-theme="white"] {
  --med-accent: var(--accent-color, #007aff);
  --med-accent-soft: rgba(0, 122, 255, 0.09);
  --med-accent-border: rgba(0, 122, 255, 0.25);

  --med-overlay: rgba(27, 32, 44, 0.43);
  --med-window-start: rgba(255, 255, 255, 0.99);
  --med-window-end: rgba(240, 244, 250, 0.99);

  --med-surface: rgba(36, 42, 56, 0.028);
  --med-surface-hover: rgba(36, 42, 56, 0.05);
  --med-input: rgba(255, 255, 255, 0.72);

  --med-border: rgba(35, 40, 52, 0.09);
  --med-text: #1c1c1e;
  --med-text-soft: rgba(28, 28, 30, 0.68);
  --med-text-muted: rgba(60, 60, 67, 0.43);

  --med-shadow: rgba(26, 34, 53, 0.22);
}

/* ---------- Overlay ---------- */

.medcardModalOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: none !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;

  background:
    radial-gradient(
      circle at 20% 12%,
      var(--med-accent-soft),
      transparent 34%
    ),
    var(--med-overlay) !important;

  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

.medcardModalOverlay.open {
  display: flex !important;
}

.medcardModalBackdrop {
  position: absolute;
  inset: 0;
}

/* ---------- Window ---------- */

.medcardModalWindow {
  position: relative;
  z-index: 2;

  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  color: var(--med-text);

  background:
    radial-gradient(
      circle at 100% 0%,
      var(--med-accent-soft),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      var(--med-window-start),
      var(--med-window-end)
    );

  border: 1px solid var(--med-accent-border);
  border-radius: 30px;

  box-shadow:
    0 35px 110px var(--med-shadow),
    0 0 70px var(--med-accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);

  animation: medcardModalAppear 0.24s ease both;
}

@keyframes medcardModalAppear {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.medcardModalGlow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.38;
}

.medcardModalGlowOne {
  top: -110px;
  left: -80px;
  width: 260px;
  height: 260px;
  background: var(--med-accent-soft);
}

.medcardModalGlowTwo {
  right: -100px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  background: var(--med-accent-soft);
}

/* ---------- Header ---------- */

.medcardModalHeader {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;

  padding: 25px 27px 22px;

  border-bottom: 1px solid var(--med-border);
}

.medcardModalHeaderMain {
  display: flex;
  align-items: center;
  gap: 16px;
}

.medcardModalIcon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--med-accent),
      color-mix(in srgb, var(--med-accent) 65%, #000)
    );

  border: 1px solid
    color-mix(in srgb, var(--med-accent) 45%, white);

  border-radius: 17px;

  box-shadow:
    0 12px 30px
      color-mix(in srgb, var(--med-accent) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.medcardModalKicker {
  margin-bottom: 4px;

  color: var(--med-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.medcardModalHeader h2 {
  margin: 0;

  color: var(--med-text);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.medcardModalHeader p {
  max-width: 690px;
  margin: 7px 0 0;

  color: var(--med-text-soft);
  font-size: 13px;
  line-height: 1.45;
}

.medcardModalClose {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  color: var(--med-text-soft);

  background: var(--med-surface);
  border: 1px solid var(--med-border);
  border-radius: 14px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.medcardModalClose:hover {
  color: var(--med-text);
  background: var(--med-accent-soft);
  border-color: var(--med-accent-border);
  transform: rotate(3deg);
}

/* ---------- Scroll/body ---------- */

.medcardModalScroll {
  position: relative;
  z-index: 2;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 22px 27px 8px;

  scrollbar-width: thin;
  scrollbar-color: var(--med-accent-border) transparent;
}

.medcardModalScroll::-webkit-scrollbar {
  width: 7px;
}

.medcardModalScroll::-webkit-scrollbar-thumb {
  background: var(--med-accent-border);
  border-radius: 999px;
}

/* ---------- Sections ---------- */

.medcardFormSection {
  margin-bottom: 17px;
  padding: 19px;

  background:
    linear-gradient(
      145deg,
      var(--med-surface),
      color-mix(in srgb, var(--med-surface) 42%, transparent)
    );

  border: 1px solid var(--med-border);
  border-radius: 21px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.medcardTreatmentSection {
  border-color:
    color-mix(
      in srgb,
      var(--med-accent) 22%,
      var(--med-border)
    );
}

.medcardSectionHeader {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 17px;
}

.medcardSectionIcon {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  color: var(--med-accent);

  background: var(--med-accent-soft);
  border: 1px solid var(--med-accent-border);
  border-radius: 13px;
}

.medcardSectionHeader h3 {
  margin: 0;

  color: var(--med-text);
  font-size: 15px;
  font-weight: 880;
}

.medcardSectionHeader p {
  margin: 3px 0 0;

  color: var(--med-text-muted);
  font-size: 11px;
}

/* ---------- Grids ---------- */

.medcardVitalsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 13px;
}

.medcardVitalsGrid .medcardFieldWide {
  grid-column: span 2;
}

.medcardStateGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.medcardTextGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.medcardPlanGrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
}

.medcardPlanSide {
  display: grid;
  gap: 13px;
}

.medcardConditionField {
  margin-top: 13px;
}

/* ---------- Fields ---------- */

.medcardField {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 7px;
}

.medcardFieldLabel {
  display: flex;
  align-items: center;
  gap: 5px;

  color: var(--med-text-soft);
  font-size: 12px;
  font-weight: 760;
}

.medcardFieldLabel b {
  color: var(--med-accent);
}

.medcardFieldLabel small {
  color: var(--med-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.medcardInput,
.medcardTextarea {
  width: 100%;

  color: var(--med-text);
  font: inherit;
  font-size: 13px;

  background: var(--med-input);
  border: 1px solid var(--med-border);
  border-radius: 13px;

  outline: none;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.medcardInput {
  min-height: 45px;
  padding: 0 13px;
}

.medcardTextarea {
  min-height: 96px;
  padding: 12px 13px;

  resize: vertical;
  line-height: 1.55;
}

.medcardTextareaLarge {
  min-height: 155px;
}

.medcardInput::placeholder,
.medcardTextarea::placeholder {
  color: var(--med-text-muted);
}

.medcardInput:hover,
.medcardTextarea:hover {
  border-color:
    color-mix(
      in srgb,
      var(--med-accent) 28%,
      var(--med-border)
    );
}

.medcardInput:focus,
.medcardTextarea:focus {
  background:
    color-mix(
      in srgb,
      var(--med-accent) 5%,
      var(--med-input)
    );

  border-color: var(--med-accent);

  box-shadow:
    0 0 0 4px
      color-mix(
        in srgb,
        var(--med-accent) 12%,
        transparent
      ),
    0 10px 28px rgba(0, 0, 0, 0.1);
}

.medcardInputUnit {
  position: relative;
}

.medcardInputUnit .medcardInput {
  padding-right: 48px;
}

.medcardInputUnit > span {
  position: absolute;
  top: 50%;
  right: 13px;

  color: var(--med-text-muted);
  font-size: 11px;
  font-weight: 800;

  pointer-events: none;
  transform: translateY(-50%);
}

.medcardInput[type="date"],
.medcardInput[type="time"] {
  color-scheme: dark;
}

body[data-theme="white"] .medcardInput[type="date"],
body[data-theme="white"] .medcardInput[type="time"] {
  color-scheme: light;
}

/* ---------- Footer ---------- */

.medcardModalFooter {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 17px 27px;

  background:
    color-mix(
      in srgb,
      var(--med-window-end) 92%,
      transparent
    );

  border-top: 1px solid var(--med-border);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

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

.medcardModalActions {
  display: flex;
  gap: 10px;
}

.medcardCancelButton,
.medcardSaveButton {
  min-height: 44px;

  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font: inherit;
  font-size: 13px;
  font-weight: 830;

  border-radius: 13px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.medcardCancelButton {
  color: var(--med-text-soft);

  background: var(--med-surface);
  border: 1px solid var(--med-border);
}

.medcardCancelButton:hover {
  color: var(--med-text);
  background: var(--med-surface-hover);
}

.medcardSaveButton {
  min-width: 190px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--med-accent),
      color-mix(in srgb, var(--med-accent) 68%, #000)
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--med-accent) 48%,
      white
    );

  box-shadow:
    0 13px 28px
      color-mix(
        in srgb,
        var(--med-accent) 28%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.medcardSaveButton:hover {
  transform: translateY(-2px);

  box-shadow:
    0 17px 36px
      color-mix(
        in srgb,
        var(--med-accent) 39%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.medcardSaveButton:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

/* ---------- White theme ---------- */

body[data-theme="white"] .medcardModalWindow {
  box-shadow:
    0 30px 90px rgba(28, 38, 58, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

body[data-theme="white"] .medcardFormSection {
  box-shadow:
    0 3px 14px rgba(32, 40, 58, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .medcardVitalsGrid {
    grid-template-columns: 1fr 1fr;
  }

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

  .medcardTextGrid,
  .medcardPlanGrid {
    grid-template-columns: 1fr;
  }

  .medcardVitalsGrid .medcardFieldWide {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .medcardModalOverlay {
    align-items: flex-end !important;
    padding: 8px !important;
  }

  .medcardModalWindow {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 24px;
  }

  .medcardModalHeader {
    padding: 19px 17px 17px;
  }

  .medcardModalIcon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .medcardModalHeader h2 {
    font-size: 21px;
  }

  .medcardModalHeader p {
    display: none;
  }

  .medcardModalScroll {
    padding: 16px 14px 4px;
  }

  .medcardFormSection {
    padding: 15px;
    border-radius: 18px;
  }

  .medcardVitalsGrid,
  .medcardStateGrid {
    grid-template-columns: 1fr;
  }

  .medcardVitalsGrid .medcardFieldWide {
    grid-column: auto;
  }

  .medcardModalFooter {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .medcardModalFooterHint {
    display: none;
  }

  .medcardModalActions {
    flex-direction: column-reverse;
  }

  .medcardCancelButton,
  .medcardSaveButton {
    width: 100%;
  }
}
.medcardSelect {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 42px !important;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--med-text-muted) 50%
    ),
    linear-gradient(
      135deg,
      var(--med-text-muted) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 19px) 19px,
    calc(100% - 13px) 19px;

  background-size: 6px 6px;
  background-repeat: no-repeat;

  cursor: pointer;
}

.medcardSelect option {
  color: #ffffff;
  background: #171124;
}

body[data-theme="black"] .medcardSelect option {
  background: #0a0a0c;
}

body[data-theme="blue"] .medcardSelect option {
  background: #061b26;
}

body[data-theme="green"] .medcardSelect option {
  background: #05241a;
}

body[data-theme="white"] .medcardSelect option {
  color: #1c1c1e;
  background: #ffffff;
}
/* =========================================================
   DOC.PUG — PREMIUM MEDCARD ENTRY
   ========================================================= */

.premiumMedEntry {
  position: relative;
  overflow: hidden;

  margin-bottom: 18px;
  padding: 24px !important;

  color: var(--text-main, #fff);

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 8%,
        transparent
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(27, 20, 49, 0.94),
      rgba(11, 9, 25, 0.97)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;

  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.premiumMedEntryAccent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;

  background:
    linear-gradient(
      180deg,
      var(--accent-color, #a855f7),
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 18%,
        transparent
      )
    );

  box-shadow:
    0 0 20px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 42%,
        transparent
      );
}

.premiumMedEntryHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;

  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.premiumMedEntryMainInfo {
  min-width: 0;
}

.premiumMedEntryDateRow {
  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(240, 234, 250, 0.9);
  font-size: 15px;
  font-weight: 850;
}

.premiumMedEntryDateIcon {
  display: inline-flex;
  color: var(--accent-color, #a855f7);
}

.premiumMedEntryVitalsLine {
  margin-top: 8px;

  color: rgba(231, 223, 243, 0.56);
  font-size: 13px;
  line-height: 1.5;
}

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

.premiumMedEntryAction {
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: rgba(255, 255, 255, 0.52);

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.premiumMedEntryEdit:hover {
  color: var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 13%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 34%,
      transparent
    );

  transform: translateY(-2px);
}

.premiumMedEntryDelete:hover {
  color: #ff8da0;
  background: rgba(255, 74, 102, 0.13);
  border-color: rgba(255, 96, 120, 0.34);

  box-shadow:
    0 0 18px rgba(255, 74, 102, 0.13);

  transform: translateY(-2px);
}

.premiumMedEntryAction svg {
  pointer-events: none;
}

.premiumMedVitalsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;

  margin-top: 18px;
}

.premiumMedVitalCell {
  padding: 12px 13px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.038),
      rgba(255, 255, 255, 0.016)
    );

  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
}

.premiumMedVitalCell .med-mini-label {
  color: rgba(224, 216, 239, 0.42);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.premiumMedVitalCell .med-mini-value {
  margin-top: 5px;

  color: rgba(250, 248, 255, 0.88);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.4;
}

.premiumMedBlocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  margin-top: 14px;
}

.premiumMedBlock {
  padding: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.014)
    );

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 17px;
}

.premiumMedCondition,
.premiumMedTreatment {
  grid-column: 1 / -1;
}

.premiumMedBlockHeader {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;
}

.premiumMedBlockIcon {
  display: inline-flex;
  color: var(--accent-color, #a855f7);
}

.premiumMedBlock .history-label {
  color: rgba(224, 216, 239, 0.48);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premiumMedText {
  color: rgba(250, 248, 255, 0.86);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.premiumMedTreatment .premiumMedText {
  color: rgba(236, 225, 249, 0.94);
}

.premiumMedNote .premiumMedText {
  color: rgba(235, 228, 244, 0.62);
  font-style: italic;
}

.premiumMedEntryFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  margin-top: 16px;
  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.premiumMedDoctor {
  color: rgba(244, 239, 252, 0.76);
  font-size: 13px;
  font-weight: 760;
}

.premiumMedEntryStatus {
  padding: 7px 10px;

  color: var(--accent-color, #a855f7);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 9%,
      transparent
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 22%,
      transparent
    );

  border-radius: 999px;
}

/* ---------- GREEN ---------- */

body[data-theme="green"] .premiumMedEntry {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(16, 185, 129, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(7, 40, 31, 0.95),
      rgba(2, 17, 12, 0.985)
    ) !important;
}

/* ---------- BLUE ---------- */

body[data-theme="blue"] .premiumMedEntry {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(6, 182, 212, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(7, 34, 48, 0.95),
      rgba(2, 14, 23, 0.985)
    ) !important;
}

/* ---------- BLACK ---------- */

body[data-theme="black"] .premiumMedEntry {
  background:
    linear-gradient(
      145deg,
      rgba(20, 20, 23, 0.97),
      rgba(5, 5, 7, 0.995)
    ) !important;
}

/* ---------- WHITE ---------- */

body[data-theme="white"] .premiumMedEntry {
  color: #1d1b28;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 122, 255, 0.06),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(241, 244, 249, 0.98)
    ) !important;

  border-color: rgba(35, 40, 52, 0.08) !important;

  box-shadow:
    0 16px 42px rgba(35, 27, 60, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

body[data-theme="white"] .premiumMedEntryHeader,
body[data-theme="white"] .premiumMedEntryFooter {
  border-color: rgba(35, 40, 52, 0.07);
}

body[data-theme="white"] .premiumMedEntryDateRow {
  color: #1d1b28;
}

body[data-theme="white"] .premiumMedEntryVitalsLine {
  color: rgba(29, 27, 40, 0.52);
}

body[data-theme="white"] .premiumMedVitalCell,
body[data-theme="white"] .premiumMedBlock {
  background: rgba(36, 42, 56, 0.025);
  border-color: rgba(35, 40, 52, 0.07);
}

body[data-theme="white"] .premiumMedVitalCell .med-mini-label,
body[data-theme="white"] .premiumMedBlock .history-label {
  color: rgba(29, 27, 40, 0.42);
}

body[data-theme="white"] .premiumMedVitalCell .med-mini-value,
body[data-theme="white"] .premiumMedText,
body[data-theme="white"] .premiumMedDoctor {
  color: rgba(29, 27, 40, 0.82);
}

/* ---------- MOBILE ---------- */

@media (max-width: 760px) {
  .premiumMedEntry {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .premiumMedEntryHeader {
    gap: 12px;
  }

  .premiumMedVitalsGrid,
  .premiumMedBlocks {
    grid-template-columns: 1fr;
  }

  .premiumMedCondition,
  .premiumMedTreatment {
    grid-column: auto;
  }

  .premiumMedEntryFooter {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* =========================================================
   DOC.PUG CRM — PREMIUM LABS
   ========================================================= */

body.premiumLabModalOpen {
  overflow: hidden;
}

/* =========================
   LABS PAGE
   ========================= */

.premiumLabsPage {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.premiumLabsHero {
  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;

  padding: 26px;

  background:
    radial-gradient(
      circle at 90% 10%,
      color-mix(in srgb, var(--accent-color, #a855f7) 18%, transparent),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );

  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 24px;

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.premiumLabsHero::before {
  content: "";

  position: absolute;
  top: -90px;
  right: -80px;

  width: 230px;
  height: 230px;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 20%,
      transparent
    );

  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.premiumLabsHeroText {
  position: relative;
  z-index: 2;
}

.premiumLabsKicker {
  margin-bottom: 7px;

  color: var(--accent-color, #a855f7);

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.premiumLabsHero h2 {
  margin: 0;

  color: #fff;

  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.premiumLabsHero p {
  max-width: 680px;

  margin: 9px 0 0;

  color: rgba(239, 233, 248, 0.55);

  font-size: 13px;
  line-height: 1.55;
}

.premiumLabsSpecies {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-top: 15px;
  padding: 8px 11px;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 8%,
      transparent
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 20%,
      transparent
    );

  border-radius: 999px;

  font-size: 10px;
}

.premiumLabsSpecies span {
  color: rgba(240, 234, 249, 0.44);
}

.premiumLabsSpecies strong {
  color: var(--accent-color, #a855f7);
}

.premiumLabsHeroIcon {
  position: relative;
  z-index: 2;

  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;
  flex: 0 0 auto;

  color: var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 10%,
      transparent
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 26%,
      transparent
    );

  border-radius: 22px;

  box-shadow:
    0 14px 34px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 12%,
        transparent
      );
}

/* =========================
   LAB TYPE BUTTONS
   ========================= */

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

.premiumLabTypeButton {
  min-height: 86px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px;

  color: #fff;
  text-align: left;
  font: inherit;

  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 7%,
        transparent
      ),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.017)
    );

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.premiumLabTypeButton:hover {
  transform: translateY(-3px);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 9%,
      rgba(255, 255, 255, 0.025)
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 36%,
      transparent
    );

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.2),
    0 0 26px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 10%,
        transparent
      );
}

.premiumLabTypeIcon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;
  flex: 0 0 auto;

  font-size: 18px;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 11%,
      transparent
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 23%,
      transparent
    );

  border-radius: 14px;
}

.premiumLabTypeText {
  min-width: 0;
  flex: 1;
}

.premiumLabTypeText strong,
.premiumLabTypeText small {
  display: block;
}

.premiumLabTypeText strong {
  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;
  font-weight: 850;
}

.premiumLabTypeText small {
  margin-top: 4px;

  color: rgba(238, 232, 248, 0.4);

  font-size: 9px;
  line-height: 1.35;
}

.premiumLabTypePlus {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  color: var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 9%,
      transparent
    );

  border-radius: 9px;

  font-size: 17px;
  font-weight: 700;
}

/* =========================
   HISTORY
   ========================= */

.premiumLabsHistory {
  padding: 22px;

  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 22px;
}

.premiumLabsHistoryHead {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 16px;
}

.premiumLabsHistoryHead h3 {
  margin: 0;

  color: #fff;

  font-size: 17px;
  font-weight: 820;
}

.premiumLabsHistoryHead p {
  margin: 5px 0 0;

  color: rgba(239, 233, 248, 0.4);

  font-size: 10px;
}

.premiumLabsList {
  display: grid;
  gap: 14px;
}

.premiumLabsEmpty {
  padding: 52px 20px;

  text-align: center;

  background: rgba(255, 255, 255, 0.012);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 18px;
}

.premiumLabsEmptyIcon {
  font-size: 36px;
}

.premiumLabsEmpty h3 {
  margin: 12px 0 5px;

  color: #fff;
}

.premiumLabsEmpty p {
  margin: 0;

  color: rgba(239, 233, 248, 0.42);

  font-size: 11px;
}

/* =========================
   MODAL OVERLAY
   ========================= */

.premiumLabModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 22px;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.premiumLabModalOverlay.open {
  opacity: 1;
  visibility: visible;
}

.premiumLabModalBackdrop {
  position: absolute;
  inset: 0;

  background: rgba(3, 2, 12, 0.84);

  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.premiumLabModal {
  position: relative;
  z-index: 2;

  width: min(1100px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  color: #fff;

  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 14%,
        transparent
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(27, 20, 48, 0.995),
      rgba(8, 7, 20, 0.999)
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 32%,
      transparent
    );

  border-radius: 28px;

  box-shadow:
    0 36px 120px rgba(0, 0, 0, 0.72),
    0 0 65px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 11%,
        transparent
      );

  transform: translateY(16px) scale(0.985);

  transition:
    transform 0.2s ease;
}

.premiumLabModalOverlay.open .premiumLabModal {
  transform: translateY(0) scale(1);
}

/* =========================
   MODAL HEADER
   ========================= */

.premiumLabModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  padding: 23px 26px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.premiumLabModalHeaderMain {
  display: flex;
  align-items: center;
  gap: 14px;
}

.premiumLabModalIcon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  font-size: 22px;

  background:
    linear-gradient(
      135deg,
      var(--accent-color, #a855f7),
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 64%,
        black
      )
    );

  border-radius: 16px;

  box-shadow:
    0 14px 30px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 28%,
        transparent
      );
}

.premiumLabModalKicker {
  margin-bottom: 4px;

  color: var(--accent-color, #a855f7);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.premiumLabModalHeader h2 {
  margin: 0;

  color: #fff;

  font-size: 23px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.premiumLabModalHeader p {
  margin: 5px 0 0;

  color: rgba(239, 233, 248, 0.45);

  font-size: 10px;
}

.premiumLabModalClose {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  padding: 0;

  color: rgba(255, 255, 255, 0.5);

  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;

  font-size: 23px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.premiumLabModalClose:hover {
  color: #fff;

  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
}

/* =========================
   MODAL CONTENT
   ========================= */

.premiumLabModalScroll {
  overflow-y: auto;

  padding: 20px 26px 14px;
}

.premiumLabMetaSection {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  gap: 12px;

  margin-bottom: 16px;
}

.premiumLabField,
.premiumLabCommentField,
.premiumLabValueField,
.premiumLabReferenceGrid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.premiumLabField > span,
.premiumLabCommentField > span,
.premiumLabValueField > span,
.premiumLabReferenceGrid label > span {
  color: rgba(239, 233, 248, 0.52);

  font-size: 9px;
  font-weight: 800;
}

.premiumLabField input,
.premiumLabField select,
.premiumLabCommentField textarea,
.premiumLabValueField input,
.premiumLabReferenceGrid input {
  width: 100%;

  color: #fff;
  font: inherit;
  font-size: 12px;

  background: rgba(2, 2, 9, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;

  outline: none;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.premiumLabField input,
.premiumLabField select {
  min-height: 42px;
  padding: 0 12px;
}

.premiumLabField select option {
  color: #fff;
  background: #171022;
}

.premiumLabCommentField textarea {
  min-height: 105px;

  padding: 12px;

  resize: vertical;
}

.premiumLabField input:focus,
.premiumLabField select:focus,
.premiumLabCommentField textarea:focus,
.premiumLabValueField input:focus,
.premiumLabReferenceGrid input:focus {
  border-color: var(--accent-color, #a855f7);

  box-shadow:
    0 0 0 4px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 10%,
        transparent
      );
}

/* =========================
   RESULTS SECTION
   ========================= */

.premiumLabResultsSection {
  padding: 18px;

  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 19px;
}

.premiumLabSectionHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;

  margin-bottom: 15px;
}

.premiumLabSectionHead h3 {
  margin: 0;

  color: #fff;

  font-size: 15px;
}

.premiumLabSectionHead p {
  margin: 5px 0 0;

  color: rgba(239, 233, 248, 0.38);

  font-size: 9px;
}

.premiumLabSectionHead > span {
  padding: 7px 10px;

  color: var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 8%,
      transparent
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 20%,
      transparent
    );

  border-radius: 999px;

  font-size: 9px;
  font-weight: 850;
}

.premiumLabResultsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.premiumLabResultCard {
  position: relative;

  padding: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.037),
      rgba(255, 255, 255, 0.014)
    );

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.premiumLabResultTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 11px;
}

.premiumLabResultTop strong,
.premiumLabResultTop small {
  display: block;
}

.premiumLabResultTop strong {
  color: rgba(255, 255, 255, 0.88);

  font-size: 11px;
  font-weight: 820;
}

.premiumLabResultTop small {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.3);

  font-size: 8px;
  font-weight: 700;
}

.premiumLabLiveStatus {
  align-self: flex-start;

  padding: 5px 7px;

  color: rgba(255, 255, 255, 0.34);

  background: rgba(255, 255, 255, 0.035);
  border-radius: 8px;

  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.premiumLabValueField > div {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 7px;
}

.premiumLabValueField input,
.premiumLabReferenceGrid input {
  min-height: 39px;
  padding: 0 10px;
}

.premiumLabReferenceGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;

  margin-top: 9px;
}

/* STATUS COLORS */

.premiumLabResultCard.is-normal {
  background:
    linear-gradient(
      145deg,
      rgba(48, 210, 126, 0.07),
      rgba(255, 255, 255, 0.015)
    );

  border-color: rgba(48, 210, 126, 0.19);
}

.premiumLabResultCard.is-normal .premiumLabLiveStatus {
  color: #62e49d;
  background: rgba(48, 210, 126, 0.1);
}

.premiumLabResultCard.is-high {
  background:
    linear-gradient(
      145deg,
      rgba(255, 117, 72, 0.08),
      rgba(255, 255, 255, 0.015)
    );

  border-color: rgba(255, 117, 72, 0.2);
}

.premiumLabResultCard.is-high .premiumLabLiveStatus {
  color: #ff9670;
  background: rgba(255, 117, 72, 0.11);
}

.premiumLabResultCard.is-low {
  background:
    linear-gradient(
      145deg,
      rgba(61, 151, 255, 0.08),
      rgba(255, 255, 255, 0.015)
    );

  border-color: rgba(61, 151, 255, 0.2);
}

.premiumLabResultCard.is-low .premiumLabLiveStatus {
  color: #69b7ff;
  background: rgba(61, 151, 255, 0.11);
}

.premiumLabCommentField {
  margin-top: 14px;
}

/* =========================
   MODAL FOOTER
   ========================= */

.premiumLabModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  padding: 16px 26px;

  background: rgba(8, 7, 20, 0.86);
  border-top: 1px solid rgba(255, 255, 255, 0.065);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.premiumLabCancel,
.premiumLabSave {
  min-height: 42px;

  padding: 0 18px;

  font: inherit;
  font-size: 11px;
  font-weight: 850;

  border-radius: 12px;

  cursor: pointer;
}

.premiumLabCancel {
  color: rgba(255, 255, 255, 0.64);

  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.premiumLabSave {
  min-width: 170px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--accent-color, #a855f7),
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 65%,
        black
      )
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 42%,
      white
    );

  box-shadow:
    0 12px 28px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7) 26%,
        transparent
      );
}

/* =========================
   THEMES
   ========================= */

body[data-theme="green"] .premiumLabModal {
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(16, 185, 129, 0.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(7, 40, 31, 0.995),
      rgba(2, 16, 11, 0.999)
    );
}

body[data-theme="blue"] .premiumLabModal {
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(6, 182, 212, 0.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(7, 34, 48, 0.995),
      rgba(2, 14, 23, 0.999)
    );
}

body[data-theme="black"] .premiumLabModal {
  background:
    linear-gradient(
      145deg,
      rgba(20, 20, 23, 0.998),
      rgba(4, 4, 6, 0.999)
    );
}

/* =========================
   WHITE THEME
   ========================= */

body[data-theme="white"] .premiumLabsHero,
body[data-theme="white"] .premiumLabTypeButton,
body[data-theme="white"] .premiumLabsHistory {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(242, 245, 250, 0.98)
    );

  border-color: rgba(35, 40, 52, 0.08);

  box-shadow:
    0 16px 40px rgba(30, 35, 50, 0.07);
}

body[data-theme="white"] .premiumLabsHero h2,
body[data-theme="white"] .premiumLabsHistoryHead h3,
body[data-theme="white"] .premiumLabTypeText strong {
  color: #1d1b28;
}

body[data-theme="white"] .premiumLabsHero p,
body[data-theme="white"] .premiumLabsHistoryHead p,
body[data-theme="white"] .premiumLabTypeText small {
  color: rgba(29, 27, 40, 0.48);
}

body[data-theme="white"] .premiumLabModal {
  color: #1d1b28;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(0, 122, 255, 0.08),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f1f4f8
    );
}

body[data-theme="white"] .premiumLabModalHeader h2,
body[data-theme="white"] .premiumLabSectionHead h3,
body[data-theme="white"] .premiumLabResultTop strong {
  color: #1d1b28;
}

body[data-theme="white"] .premiumLabField input,
body[data-theme="white"] .premiumLabField select,
body[data-theme="white"] .premiumLabCommentField textarea,
body[data-theme="white"] .premiumLabValueField input,
body[data-theme="white"] .premiumLabReferenceGrid input {
  color: #1d1b28;

  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(30, 35, 50, 0.1);
}

body[data-theme="white"] .premiumLabField select option {
  color: #1d1b28;
  background: #fff;
}

body[data-theme="white"] .premiumLabResultsSection,
body[data-theme="white"] .premiumLabResultCard {
  background: rgba(25, 31, 45, 0.025);
  border-color: rgba(30, 35, 50, 0.075);
}

body[data-theme="white"] .premiumLabModalFooter {
  background: rgba(245, 247, 251, 0.9);
  border-color: rgba(30, 35, 50, 0.08);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1100px) {
  .premiumLabTypes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .premiumLabTypes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (max-width: 620px) {
  .premiumLabsHero {
    align-items: flex-start;
    flex-direction: column;

    padding: 20px;
  }

  .premiumLabsHeroIcon {
    width: 58px;
    height: 58px;
  }

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

  .premiumLabsHistory {
    padding: 16px;
  }

  .premiumLabModalOverlay {
    align-items: flex-end;

    padding: 7px;
  }

  .premiumLabModal {
    width: 100%;
    max-height: calc(100vh - 14px);

    border-radius: 23px;
  }

  .premiumLabModalHeader {
    padding: 18px 16px;
  }

  .premiumLabModalScroll {
    padding: 15px 14px 10px;
  }

  .premiumLabModalFooter {
    flex-direction: column-reverse;

    padding: 14px;
  }

  .premiumLabCancel,
  .premiumLabSave {
    width: 100%;
  }

  .premiumLabValueField > div {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   PREMIUM LAB RESULT CARD
   ========================================================= */

.labHistoryCard {
  position: relative;
  overflow: hidden;

  padding: 20px 20px 18px;
  margin-bottom: 16px;

  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--accent-color, #a855f7) 10%, transparent),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    );

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.labHistoryCardAccent {
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;

  width: 4px;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-color, #a855f7) 95%, white),
      color-mix(in srgb, var(--accent-color, #a855f7) 60%, transparent)
    );

  border-radius: 999px;
  box-shadow:
    0 0 22px color-mix(in srgb, var(--accent-color, #a855f7) 35%, transparent);
}

.labHistoryHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;

  margin-bottom: 16px;
}

.labHistoryMeta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.labHistoryIcon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;
  flex: 0 0 auto;

  font-size: 22px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--accent-color, #a855f7),
      color-mix(in srgb, var(--accent-color, #a855f7) 65%, black)
    );

  border-radius: 16px;

  box-shadow:
    0 14px 30px color-mix(in srgb, var(--accent-color, #a855f7) 28%, transparent);
}

.labHistoryText {
  min-width: 0;
}

.labHistoryKicker {
  margin-bottom: 5px;

  color: var(--accent-color, #a855f7);

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.labHistoryTitle {
  margin: 0;

  color: #fff;

  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.labHistorySubtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;

  margin-top: 8px;

  color: rgba(238, 232, 248, 0.55);

  font-size: 12px;
}

.labHistoryActions {
  display: flex;
  gap: 8px;
}

.labActionBtn {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.labActionBtn:hover {
  transform: translateY(-2px);

  background:
    color-mix(in srgb, var(--accent-color, #a855f7) 8%, rgba(255, 255, 255, 0.05)) !important;

  border-color:
    color-mix(in srgb, var(--accent-color, #a855f7) 32%, transparent) !important;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.15);
}

.labActionBtnDanger:hover {
  background: rgba(255, 80, 80, 0.08) !important;
  border-color: rgba(255, 80, 80, 0.26) !important;
}

.labHistoryStats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-bottom: 18px;
}

.labHistoryStat {
  min-width: 120px;

  padding: 10px 12px;

  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.labHistoryStat span,
.labHistoryStat strong {
  display: block;
}

.labHistoryStat span {
  margin-bottom: 4px;

  color: rgba(238, 232, 248, 0.44);

  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.labHistoryStat strong {
  color: #fff;

  font-size: 20px;
  font-weight: 850;
}

.labHistoryStatOk {
  border-color: rgba(66, 211, 146, 0.16);
  background: rgba(66, 211, 146, 0.05);
}

.labHistoryStatOk strong {
  color: #6be6a7;
}

.labHistoryStatHigh {
  border-color: rgba(255, 125, 86, 0.16);
  background: rgba(255, 125, 86, 0.05);
}

.labHistoryStatHigh strong {
  color: #ff9a74;
}

.labHistoryStatLow {
  border-color: rgba(80, 170, 255, 0.16);
  background: rgba(80, 170, 255, 0.05);
}

.labHistoryStatLow strong {
  color: #7dbdff;
}

.labMetricsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;

  margin-bottom: 16px;
}

.labMetricCard {
  padding: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.015)
    );

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.labMetricCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.labMetricCard.is-normal {
  border-color: rgba(66, 211, 146, 0.18);
  background:
    linear-gradient(
      145deg,
      rgba(66, 211, 146, 0.06),
      rgba(255, 255, 255, 0.015)
    );
}

.labMetricCard.is-high {
  border-color: rgba(255, 125, 86, 0.18);
  background:
    linear-gradient(
      145deg,
      rgba(255, 125, 86, 0.06),
      rgba(255, 255, 255, 0.015)
    );
}

.labMetricCard.is-low {
  border-color: rgba(80, 170, 255, 0.18);
  background:
    linear-gradient(
      145deg,
      rgba(80, 170, 255, 0.06),
      rgba(255, 255, 255, 0.015)
    );
}

.labMetricHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;

  margin-bottom: 10px;
}

.labMetricNames {
  min-width: 0;
}

.labMetricLabel {
  color: #fff;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.labMetricCode {
  margin-top: 3px;

  color: rgba(238, 232, 248, 0.34);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.labMetricStatus {
  flex: 0 0 auto;

  padding: 6px 8px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.labMetricStatus-normal {
  color: #6be6a7;
  background: rgba(66, 211, 146, 0.12);
}

.labMetricStatus-high {
  color: #ff9a74;
  background: rgba(255, 125, 86, 0.12);
}

.labMetricStatus-low {
  color: #7dbdff;
  background: rgba(80, 170, 255, 0.12);
}

.labMetricStatus-unknown,
.labMetricStatus-empty {
  color: rgba(238, 232, 248, 0.44);
  background: rgba(255, 255, 255, 0.05);
}

.labMetricMain {
  display: flex;
  align-items: baseline;
  gap: 8px;

  margin-bottom: 8px;
}

.labMetricValue {
  color: #fff;

  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.labMetricUnit {
  color: rgba(238, 232, 248, 0.45);

  font-size: 12px;
  font-weight: 700;
}

.labMetricRef {
  color: rgba(238, 232, 248, 0.5);

  font-size: 11px;
  line-height: 1.45;
}

.labHistoryComment {
  margin-top: 4px;
  padding: 14px 16px;

  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
}

.labHistoryCommentLabel {
  margin-bottom: 8px;

  color: var(--accent-color, #a855f7);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.labHistoryCommentText {
  color: rgba(255, 255, 255, 0.82);

  font-size: 13px;
  line-height: 1.6;
}

/* WHITE THEME */

body[data-theme="white"] .labHistoryCard,
body[data-theme="white"] .labMetricCard,
body[data-theme="white"] .labHistoryComment,
body[data-theme="white"] .labHistoryStat {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(243, 246, 250, 0.98)
    );

  border-color: rgba(30, 35, 50, 0.08);
}

body[data-theme="white"] .labHistoryTitle,
body[data-theme="white"] .labMetricLabel,
body[data-theme="white"] .labMetricValue {
  color: #1d1b28;
}

body[data-theme="white"] .labHistorySubtitle,
body[data-theme="white"] .labMetricRef,
body[data-theme="white"] .labMetricUnit,
body[data-theme="white"] .labMetricCode {
  color: rgba(29, 27, 40, 0.52);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .labMetricsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .labHistoryHeader {
    flex-direction: column;
    align-items: stretch;
  }

  .labHistoryActions {
    justify-content: flex-end;
  }

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

  .labHistoryStat {
    min-width: calc(50% - 5px);
  }
}
/* =========================================================
   DOC.PUG CRM — CLINIC SETTINGS / OWNER PROFILE
   ========================================================= */

.clinicSettingsPage {
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding: 6px 0 120px;
  color: #fff;
}

.clinicSettingsHero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}

.clinicSettingsKicker,
.clinicPreviewKicker {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.clinicSettingsHero h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
}

.clinicSettingsHero p {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.clinicSettingsUser {
  min-width: 210px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.clinicSettingsUser span,
.clinicSettingsUser strong {
  display: block;
}

.clinicSettingsUser span {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.clinicSettingsUser strong {
  font-size: 12px;
  font-weight: 700;
  color: #bf8cff;
}

.clinicSettingsPanel {
  position: relative;
  margin-bottom: 22px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at top left,
      rgba(147, 70, 232, 0.12),
      transparent 32%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.clinicSettingsPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.035),
      transparent 30%
    );
}

.clinicSettingsPanelHead {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.clinicSettingsPanelHead > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.clinicSettingsPanelIcon {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(190, 119, 255, 0.24);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.28),
      rgba(147, 70, 232, 0.08)
    );
  box-shadow:
    0 12px 28px rgba(98, 37, 170, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 21px;
}

.clinicSettingsPanelHead h2 {
  margin: 0 0 5px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.clinicSettingsPanelHead p {
  max-width: 690px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.53);
}

.clinicOwnerBadge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(182, 108, 255, 0.25);
  border-radius: 999px;
  background: rgba(147, 70, 232, 0.13);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #d9b5ff;
}

.clinicSettingsLoading {
  position: relative;
  z-index: 1;
  padding: 34px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.58);
}

.clinicSettingsContent {
  position: relative;
  z-index: 1;
}

.clinicProfileLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 24px;
  align-items: start;
}

.clinicProfileForm {
  min-width: 0;
}

.clinicSettingsFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.clinicSettingsField {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.clinicSettingsFieldWide {
  grid-column: 1 / -1;
}

.clinicSettingsField > span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.68);
}

.clinicSettingsInput {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.11);
  outline: none;
  border-radius: 14px;
  background: rgba(7, 5, 18, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 8px 22px rgba(0, 0, 0, 0.08);
  font: inherit;
  font-size: 14px;
  color: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.clinicSettingsInput::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.clinicSettingsInput:hover {
  border-color: rgba(184, 106, 255, 0.24);
}

.clinicSettingsInput:focus {
  border-color: rgba(177, 91, 255, 0.8);
  background: rgba(15, 9, 34, 0.7);
  box-shadow:
    0 0 0 4px rgba(147, 70, 232, 0.13),
    0 12px 30px rgba(55, 18, 95, 0.18);
}

select.clinicSettingsInput {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      rgba(255, 255, 255, 0.55) 50%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 50%,
      transparent 50%
    );
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.clinicColorField {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
}

.clinicColorField input[type="color"] {
  width: 54px;
  height: 48px;
  padding: 4px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(7, 5, 18, 0.46);
}

.clinicColorField input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.clinicColorField input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 9px;
}

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

.clinicBrandUpload {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012)
    );
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.clinicBrandUpload:hover {
  transform: translateY(-2px);
  border-color: rgba(177, 91, 255, 0.25);
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.08),
      rgba(255, 255, 255, 0.018)
    );
}

.clinicBrandUpload.uploading {
  pointer-events: none;
  opacity: 0.58;
}

.clinicBrandUpload.uploading::after {
  content: "Завантаження…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(9, 5, 20, 0.82);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.clinicBrandPreview {
  display: grid;
  width: 100%;
  height: 108px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at center,
      rgba(147, 70, 232, 0.11),
      transparent 68%
    ),
    rgba(5, 3, 13, 0.32);
}

.clinicBrandPreview span {
  font-size: 28px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.34);
}

.clinicBrandPreview img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  object-fit: contain;
}

.clinicBrandUploadText strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #fff;
}

.clinicBrandUploadText p {
  min-height: 36px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.44);
}

.clinicBrandUploadActions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.clinicBrandUploadButton,
.clinicBrandRemoveButton {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.clinicBrandUploadButton {
  flex: 1;
  border: 1px solid rgba(180, 96, 255, 0.28);
  background: rgba(147, 70, 232, 0.15);
  color: #e1c2ff;
}

.clinicBrandRemoveButton {
  border: 1px solid rgba(255, 88, 112, 0.18);
  background: rgba(255, 75, 103, 0.08);
  color: #ff93a4;
}

.clinicBrandUploadButton:hover,
.clinicBrandRemoveButton:hover {
  transform: translateY(-1px);
}

.clinicProfileActions {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.clinicProfileSaveStatus {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.clinicProfileSaveStatus.success {
  color: #65e6a3;
}

.clinicProfileSaveButton {
  min-width: 190px;
  min-height: 48px;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid rgba(215, 167, 255, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      #a84dff,
      #7c3fe6
    );
  box-shadow:
    0 14px 32px rgba(120, 47, 210, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.clinicProfileSaveButton:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 18px 38px rgba(120, 47, 210, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.clinicProfileSaveButton:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

.clinicDocumentPreview {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.clinicPreviewPaper {
  --document-accent: #9346e8;

  min-height: 610px;
  padding: 26px;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #15131a;
}

.clinicPreviewHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.clinicPreviewBrand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.clinicPreviewBrand img,
.clinicPreviewLogoFallback {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
}

.clinicPreviewBrand img {
  object-fit: contain;
}

.clinicPreviewLogoFallback {
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      var(--document-accent),
      #4c1d95
    );
  box-shadow: 0 8px 18px color-mix(
    in srgb,
    var(--document-accent) 28%,
    transparent
  );
  font-size: 19px;
  font-weight: 900;
  color: #fff;
}

.clinicPreviewBrand strong,
.clinicPreviewBrand span {
  display: block;
}

.clinicPreviewBrand strong {
  max-width: 170px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #16131b;
}

.clinicPreviewBrand span {
  margin-top: 3px;
  font-size: 9px;
  color: #77717f;
}

.clinicPreviewDocTitle {
  max-width: 145px;
  text-align: right;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--document-accent);
}

.clinicPreviewLine {
  height: 3px;
  margin: 18px 0 12px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--document-accent),
      color-mix(
        in srgb,
        var(--document-accent) 20%,
        transparent
      )
    );
}

.clinicPreviewContacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  min-height: 22px;
  font-size: 8px;
  line-height: 1.4;
  color: #77717f;
}

.clinicPreviewPatient {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 16px;
}

.clinicPreviewPatient > div {
  padding: 11px 12px;
  border: 1px solid #ece8f0;
  border-radius: 10px;
  background: #faf8fc;
}

.clinicPreviewPatient span,
.clinicPreviewPatient strong {
  display: block;
}

.clinicPreviewPatient span {
  margin-bottom: 3px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9a93a1;
}

.clinicPreviewPatient strong {
  font-size: 11px;
  color: #252029;
}

.clinicPreviewTable {
  overflow: hidden;
  border: 1px solid #e9e5ed;
  border-radius: 12px;
}

.clinicPreviewTable > div {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid #eeeaf1;
  font-size: 9px;
}

.clinicPreviewTable > div:last-child {
  border-bottom: none;
}

.clinicPreviewTable .head {
  min-height: 34px;
  background:
    color-mix(
      in srgb,
      var(--document-accent) 10%,
      #fff
    );
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--document-accent);
}

.clinicPreviewTable strong {
  font-weight: 800;
  color: #28232d;
}

.clinicPreviewTable b {
  justify-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e7f8ef;
  font-size: 7px;
  color: #12894d;
}

.clinicPreviewTable b.high {
  background: #fff0e6;
  color: #dd6d20;
}

.clinicPreviewSignatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 54px;
}

.clinicPreviewSignatures > div {
  display: grid;
  min-height: 72px;
  place-items: end center;
  padding-bottom: 8px;
  border-bottom: 1px solid #cfc9d4;
  font-size: 8px;
  color: #9c95a3;
}

.clinicPreviewSignatures img {
  display: block;
  max-width: 110px;
  max-height: 58px;
  object-fit: contain;
}

.clinicPreviewFooter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #ece8ef;
  font-size: 8px;
  color: #8c8493;
}

.clinicPreviewFooter small {
  flex: 0 0 auto;
  font-size: 7px;
  color: var(--document-accent);
}

.clinicPersonalGrid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
}

.clinicPersonalBlock {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.clinicPersonalBlock h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #fff;
}

.clinicPersonalBlock p {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.45);
}

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

.clinicThemeChoice {
  display: flex;
  min-width: 0;
  min-height: 72px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 11px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  font: inherit;
  color: rgba(255, 255, 255, 0.72);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.clinicThemeChoice > span {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.clinicThemeChoice strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinicThemeChoice:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 106, 255, 0.25);
  background: rgba(147, 70, 232, 0.07);
}

.clinicThemeChoice.active {
  border-color: rgba(179, 93, 255, 0.78);
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.2),
      rgba(147, 70, 232, 0.07)
    );
  box-shadow:
    0 0 0 3px rgba(147, 70, 232, 0.09),
    0 12px 30px rgba(65, 20, 112, 0.18);
  color: #fff;
}

.clinicThemeSaveRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.clinicThemeSaveButton {
  min-height: 40px;
  padding: 0 16px;
  cursor: pointer;
  border: 1px solid rgba(179, 93, 255, 0.64);
  border-radius: 12px;
  background: linear-gradient(135deg, #7c5cff, #b45cff);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 10px 26px rgba(124, 92, 255, 0.22);
}

.clinicThemeSaveButton:disabled {
  cursor: wait;
  opacity: 0.65;
}

#clinicThemeSaveStatus {
  font-size: 12px;
  color: #6ee7b7;
}

#clinicThemeSaveStatus.error {
  color: #ff8ca0;
}

.clinicSettingsLogoutRow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.clinicSettingsLogoutRow > div {
  min-width: 0;
}

.clinicSettingsLogoutRow strong,
.clinicSettingsLogoutRow span {
  display: block;
}

.clinicSettingsLogoutRow strong {
  margin-bottom: 4px;
  font-size: 13px;
  color: #fff;
}

.clinicSettingsLogoutRow span {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.46);
}

.clinicLogoutButton {
  min-height: 42px;
  padding: 0 16px;
  cursor: pointer;
  border: 1px solid rgba(255, 84, 110, 0.2);
  border-radius: 12px;
  background: rgba(255, 70, 100, 0.09);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #ff8ca0;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.clinicLogoutButton:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 84, 110, 0.35);
  background: rgba(255, 70, 100, 0.14);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
  .clinicProfileLayout {
    grid-template-columns: 1fr;
  }

  .clinicDocumentPreview {
    position: static;
  }

  .clinicPreviewPaper {
    max-width: 620px;
  }

  .clinicThemeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .clinicSettingsPage {
    padding-bottom: 100px;
  }

  .clinicSettingsHero {
    flex-direction: column;
  }

  .clinicSettingsUser {
    width: 100%;
    box-sizing: border-box;
  }

  .clinicSettingsPanel {
    padding: 20px;
    border-radius: 22px;
  }

  .clinicSettingsPanelHead {
    flex-direction: column;
  }

  .clinicOwnerBadge {
    align-self: flex-start;
  }

  .clinicSettingsFormGrid,
  .clinicPersonalGrid {
    grid-template-columns: 1fr;
  }

  .clinicSettingsFieldWide {
    grid-column: auto;
  }

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

  .clinicBrandPreview {
    height: 140px;
  }

  .clinicThemeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .clinicSettingsHero h1 {
    font-size: 34px;
  }

  .clinicSettingsPanel {
    padding: 16px;
  }

  .clinicSettingsPanelIcon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .clinicSettingsPanelHead h2 {
    font-size: 19px;
  }

  .clinicProfileActions,
  .clinicSettingsLogoutRow {
    flex-direction: column;
    align-items: stretch;
  }

  .clinicProfileSaveButton,
  .clinicLogoutButton {
    width: 100%;
  }

  .clinicPreviewPaper {
    min-height: 540px;
    padding: 18px;
    border-radius: 17px;
  }

  .clinicPreviewHeader {
    flex-direction: column;
  }

  .clinicPreviewDocTitle {
    max-width: none;
    text-align: left;
  }

  .clinicPreviewPatient,
  .clinicPreviewSignatures {
    grid-template-columns: 1fr;
  }

  .clinicPreviewSignatures {
    margin-top: 30px;
  }

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

  .clinicThemeChoice {
    min-height: 56px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}

/* Deletable clinic specialization chips. */
body .specPill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
  color: var(--module-text) !important;
}

.specPillDelete {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 99, 119, 0.2);
  border-radius: 9px;
  background: rgba(255, 77, 103, 0.07);
  color: #ff8295;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.specPillDelete:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 99, 119, 0.42);
  background: rgba(255, 77, 103, 0.16);
}

.specPillDelete:focus-visible {
  outline: 3px solid rgba(255, 99, 119, 0.2);
  outline-offset: 2px;
}

/* =========================================================
   DOC.PUG CRM — PATIENT FILES ARCHIVE
   ========================================================= */

.patientFilesArchive {
  width: 100%;
  color: #fff;
}

.patientFilesArchiveHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
}

.patientFilesKicker {
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.patientFilesArchiveHead h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.patientFilesArchiveHead p {
  max-width: 720px;
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

.patientFilesAddButton {
  min-height: 44px;
  padding: 0 18px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid rgba(207, 158, 255, 0.28);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      #a84dff,
      #7c3fe6
    );
  box-shadow:
    0 13px 30px rgba(112, 44, 198, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.patientFilesAddButton:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    0 17px 36px rgba(112, 44, 198, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.patientFilesStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.patientFilesStats > div {
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.014)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.patientFilesStats span,
.patientFilesStats strong {
  display: block;
}

.patientFilesStats span {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.patientFilesStats strong {
  font-size: 22px;
  font-weight: 850;
  color: #c88cff;
}

.patientFilesFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.patientFilesFilter {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  color: rgba(255, 255, 255, 0.54);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.patientFilesFilter:hover {
  transform: translateY(-1px);
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
}

.patientFilesFilter.active {
  border-color: rgba(182, 101, 255, 0.35);
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.23),
      rgba(147, 70, 232, 0.08)
    );
  box-shadow:
    0 8px 22px rgba(61, 20, 108, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
}

.patientFilesFilter span {
  font-size: 14px;
}

.patientFilesFilter b {
  font-size: 11px;
  font-weight: 800;
}

.patientFilesFilter em {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.patientFilesGroup {
  margin-bottom: 28px;
}

.patientFilesGroupHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.patientFilesGroupHead > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.patientFilesGroupHead h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.patientFilesGroupHead strong {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.38);
}

.patientFilesGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.patientFileCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.014)
    );
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.patientFileCard:hover {
  transform: translateY(-3px);
  border-color: rgba(173, 92, 255, 0.25);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(147, 70, 232, 0.05);
}

.patientFilePreview {
  position: relative;
  display: grid;
  height: 164px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(147, 70, 232, 0.1),
      transparent 68%
    ),
    rgba(4, 2, 11, 0.48);
}

.patientFilePreview img,
.patientFilePreview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.patientFileDocumentIcon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(190, 116, 255, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.24),
      rgba(147, 70, 232, 0.07)
    );
  box-shadow:
    0 16px 32px rgba(75, 26, 130, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 31px;
}

.patientFilePlayIcon {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(6, 4, 14, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 16px;
  color: #fff;
}

.patientFileCategory {
  position: absolute;
  top: 11px;
  left: 11px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(10, 7, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}

.patientFileCardBody {
  padding: 15px;
}

.patientFileCardBody h4 {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.patientFileMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 7px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.patientFileNote {
  min-height: 38px;
  margin: 11px 0 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.patientFileCardActions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}

.patientFileOpenButton,
.patientFileActionButton {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  font: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.patientFileOpenButton {
  flex: 1;
  padding: 0 13px;
  border: 1px solid rgba(182, 98, 255, 0.28);
  background: rgba(147, 70, 232, 0.14);
  font-size: 10px;
  font-weight: 800;
  color: #e1c1ff;
}

.patientFileOpenButton:hover {
  transform: translateY(-1px);
  background: rgba(147, 70, 232, 0.21);
}

.patientFileOpenButton:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
}

.patientFileActionButton {
  width: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.patientFileActionButton:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.07);
}

.patientFileActionButton.danger {
  border-color: rgba(255, 82, 108, 0.16);
  background: rgba(255, 68, 96, 0.06);
  color: #ff8296;
}

.patientFilesEmpty {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at center,
      rgba(147, 70, 232, 0.08),
      transparent 65%
    ),
    rgba(255, 255, 255, 0.015);
  text-align: center;
}

.patientFilesEmptyIcon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid rgba(181, 104, 255, 0.2);
  border-radius: 20px;
  background: rgba(147, 70, 232, 0.1);
  font-size: 28px;
}

.patientFilesEmpty h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}

.patientFilesEmpty p {
  max-width: 420px;
  margin: 8px 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.46);
}

/* =========================================================
   PATIENT FILE MODAL
   ========================================================= */

.patientFileModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 2, 9, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.patientFileModal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at top left,
      rgba(147, 70, 232, 0.15),
      transparent 32%
    ),
    linear-gradient(
      150deg,
      rgba(22, 14, 42, 0.98),
      rgba(10, 7, 21, 0.98)
    );
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #fff;
}

.patientFileModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font: inherit;
  font-size: 23px;
  color: rgba(255, 255, 255, 0.62);
}

.patientFileModalHead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 48px;
  margin-bottom: 24px;
}

.patientFileModalIcon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(181, 102, 255, 0.22);
  border-radius: 15px;
  background: rgba(147, 70, 232, 0.13);
  font-size: 22px;
}

.patientFileModalHead h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.patientFileModalHead p {
  margin: 5px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.patientFileModalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.patientFileModalField {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.patientFileModalWide {
  grid-column: 1 / -1;
}

.patientFileModalField > span {
  font-size: 11px;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.64);
}

.patientFileModalField input,
.patientFileModalField select,
.patientFileModalField textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  border-radius: 13px;
  background: rgba(5, 3, 13, 0.45);
  font: inherit;
  font-size: 13px;
  color: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.patientFileModalField input,
.patientFileModalField select {
  min-height: 46px;
  padding: 0 13px;
}

.patientFileModalField textarea {
  min-height: 96px;
  padding: 12px 13px;
  resize: vertical;
}

.patientFileModalField input:focus,
.patientFileModalField select:focus,
.patientFileModalField textarea:focus {
  border-color: rgba(178, 91, 255, 0.75);
  background: rgba(13, 8, 29, 0.72);
  box-shadow: 0 0 0 4px rgba(147, 70, 232, 0.11);
}

.patientFileUploadZone {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.025);
}

.patientFileUploadPreview {
  display: grid;
  height: 150px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at center,
      rgba(147, 70, 232, 0.1),
      transparent 68%
    ),
    rgba(5, 3, 13, 0.42);
}

.patientFileUploadPreview img,
.patientFileUploadPreview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.patientFileUploadEmpty,
.patientFileUploadDocument {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px;
  text-align: center;
}

.patientFileUploadEmpty > span,
.patientFileUploadDocument {
  font-size: 28px;
}

.patientFileUploadEmpty small,
.patientFileUploadDocument span {
  max-width: 150px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.46);
}

.patientFileUploadInfo h3 {
  margin: 0;
  font-size: 15px;
}

.patientFileUploadInfo p {
  max-width: 430px;
  margin: 7px 0 14px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.44);
}

.patientFileUploadChoose {
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  border: 1px solid rgba(180, 95, 255, 0.28);
  border-radius: 11px;
  background: rgba(147, 70, 232, 0.14);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  color: #dfbeff;
}

.patientFileModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.patientFileModalCancel,
.patientFileModalSave {
  min-height: 42px;
  padding: 0 17px;
  cursor: pointer;
  border-radius: 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.patientFileModalCancel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.66);
}

.patientFileModalSave {
  min-width: 150px;
  border: 1px solid rgba(212, 163, 255, 0.27);
  background:
    linear-gradient(
      135deg,
      #a84dff,
      #7c3fe6
    );
  box-shadow:
    0 12px 28px rgba(111, 42, 196, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
}

.patientFileModalSave:disabled {
  cursor: wait;
  opacity: 0.55;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .patientFilesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patientFilesStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .patientFilesArchiveHead {
    flex-direction: column;
  }

  .patientFilesAddButton {
    width: 100%;
  }

  .patientFilesStats,
  .patientFilesGrid,
  .patientFileModalGrid {
    grid-template-columns: 1fr;
  }

  .patientFileModalWide {
    grid-column: auto;
  }

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

  .patientFileUploadPreview {
    height: 190px;
  }
}

@media (max-width: 520px) {
  .patientFileModalOverlay {
    padding: 10px;
  }

  .patientFileModal {
    max-height: calc(100vh - 20px);
    padding: 18px;
    border-radius: 18px;
  }

  .patientFilesFilters {
    flex-direction: column;
  }

  .patientFilesFilter {
    width: 100%;
    justify-content: flex-start;
  }

  .patientFilesFilter em {
    margin-left: auto;
  }

  .patientFileModalActions {
    flex-direction: column-reverse;
  }

  .patientFileModalCancel,
  .patientFileModalSave {
    width: 100%;
  }
}
/* =========================================================
   DOC.PUG CRM — PATIENT FINANCE
   ========================================================= */

/* =========================================================
   DOC.PUG CRM — PATIENT DOCUMENTS
   ========================================================= */

.patientDocumentsPage {
  width: 100%;
  color: var(--text-main, #fff);
}

.patientDocumentsLoading {
  padding: 42px 24px;
  border: 1px dashed var(--glass-border, rgba(255,255,255,.1));
  border-radius: 20px;
  text-align: center;
  color: var(--text-muted, rgba(255,255,255,.55));
}

.patientDocumentsHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
}

.patientDocumentsKicker {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  color: var(--text-muted, rgba(255,255,255,.44));
}

.patientDocumentsHead h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.03em;
  color: var(--text-main, #fff);
}

.patientDocumentsHead p {
  max-width: 680px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted, rgba(255,255,255,.5));
}

.patientDocumentsSummary {
  min-width: 220px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--primary-neon, #9346e8) 28%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary-neon, #9346e8) 15%, transparent),
      rgba(255,255,255,.025)
    );
}

.patientDocumentsSummary span,
.patientDocumentsSummary strong,
.patientDocumentsSummary small {
  display: block;
}

.patientDocumentsSummary span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,.45));
}

.patientDocumentsSummary strong {
  margin-top: 3px;
  font-size: 25px;
  color: var(--primary-neon, #c98dff);
}

.patientDocumentsSummary small {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted, rgba(255,255,255,.42));
}

.patientDocumentsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.patientDocumentCard {
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--glass-border, rgba(255,255,255,.08));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--primary-neon, #9346e8) 12%, transparent),
      transparent 38%
    ),
    linear-gradient(
      150deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    var(--glass-bg, rgba(10,7,22,.72));
  box-shadow:
    0 18px 48px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.patientDocumentCard::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-neon, #9346e8) 8%, transparent);
  pointer-events: none;
}

.patientDocumentCard.is-disabled {
  min-height: 235px;
  opacity: .68;
}

.patientDocumentCardTop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.patientDocumentIcon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary-neon, #9346e8) 26%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary-neon, #9346e8) 11%, transparent);
  font-size: 21px;
}

.patientDocumentBadge {
  padding: 6px 9px;
  border: 1px solid var(--glass-border, rgba(255,255,255,.08));
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  color: var(--text-muted, rgba(255,255,255,.55));
  background: rgba(255,255,255,.035);
}

.patientDocumentCard h3 {
  position: relative;
  z-index: 1;
  margin: 18px 0 7px;
  font-size: 18px;
  color: var(--text-main, #fff);
}

.patientDocumentCard > p {
  position: relative;
  z-index: 1;
  min-height: 58px;
  margin: 0 0 17px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted, rgba(255,255,255,.48));
}

.patientDocumentSelectLabel {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: auto;
}

.patientDocumentSelectLabel > span {
  display: block;
  margin-bottom: 7px;
  font-size: 9px;
  font-weight: 750;
  color: var(--text-muted, rgba(255,255,255,.48));
}

.patientDocumentSelect {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 12px;
  outline: none;
  color: var(--text-main, #fff);
  background: rgba(0,0,0,.24);
}

.patientDocumentCreate {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 11px;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      var(--primary-neon, #7c5cff),
      var(--accent-neon, #b45cff)
    );
  box-shadow: var(--primary-glow, 0 12px 30px rgba(124,92,255,.24));
  transition: transform .18s ease, opacity .18s ease;
}

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

.patientDocumentCreate:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}

.patientDocumentEmpty,
.patientDocumentNotice {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 14px;
  border: 1px dashed var(--glass-border, rgba(255,255,255,.1));
  border-radius: 12px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted, rgba(255,255,255,.46));
  background: rgba(255,255,255,.02);
}

.patientDocumentsHint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border, rgba(255,255,255,.08));
  border-radius: 15px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-muted, rgba(255,255,255,.48));
  background: rgba(255,255,255,.025);
}

@media (max-width: 820px) {
  .patientDocumentsHead {
    flex-direction: column;
  }

  .patientDocumentsSummary {
    width: 100%;
    box-sizing: border-box;
  }

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

/* =========================================================
   PATIENT CONSENT MODAL
   ========================================================= */

.patientConsentModalOpen {
  overflow: hidden;
}

.patientConsentOverlay {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.patientConsentBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 7, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.patientConsentModal {
  position: relative;
  width: min(880px, 100%);
  max-height: min(900px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 24px;
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--primary-neon, #9346e8) 13%, transparent),
      transparent 34%
    ),
    var(--bg-secondary, #071c16);
  box-shadow: 0 32px 90px rgba(0,0,0,.42);
  color: var(--text-main, #fff);
}

.patientConsentModalHead {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.08));
  background:
    color-mix(
      in srgb,
      var(--bg-secondary, #071c16) 92%,
      transparent
    );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.patientConsentModalHead span {
  display: block;
  margin-bottom: 6px;
  color: var(--primary-neon, #65e4ab);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
}

.patientConsentModalHead h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-main, #fff);
}

.patientConsentModalHead p {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--text-muted, rgba(255,255,255,.5));
  font-size: 11px;
  line-height: 1.5;
}

.patientConsentClose {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 11px;
  background: var(--glass-bg, rgba(255,255,255,.035));
  color: var(--text-main, #fff);
  font: inherit;
  font-size: 22px;
}

.patientConsentForm {
  padding: 20px 24px 24px;
}

.patientConsentNotice {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, #f0b84b 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #f0b84b 8%, transparent);
  color: color-mix(in srgb, #f0b84b 72%, var(--text-main, #fff));
  font-size: 10px;
  line-height: 1.45;
}

.patientConsentGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.patientConsentField {
  display: block;
  min-width: 0;
}

.patientConsentFieldWide {
  grid-column: 1 / -1;
}

.patientConsentField > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted, rgba(255,255,255,.55));
  font-size: 9px;
  font-weight: 800;
}

.patientConsentField input,
.patientConsentField select,
.patientConsentField textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 11px;
  outline: none;
  background: color-mix(in srgb, var(--glass-bg, #08130f) 80%, #000 20%);
  color: var(--text-main, #fff);
  font: inherit;
  font-size: 11px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.patientConsentField input,
.patientConsentField select {
  min-height: 41px;
  padding: 0 11px;
}

.patientConsentField textarea {
  min-height: 76px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.5;
}

.patientConsentField input:focus,
.patientConsentField select:focus,
.patientConsentField textarea:focus {
  border-color: color-mix(in srgb, var(--primary-neon, #65e4ab) 58%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-neon, #65e4ab) 12%, transparent);
}

.patientConsentChecks {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.patientConsentChecks label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  cursor: pointer;
  border: 1px solid var(--glass-border, rgba(255,255,255,.08));
  border-radius: 11px;
  background: var(--glass-bg, rgba(255,255,255,.025));
  color: var(--text-muted, rgba(255,255,255,.62));
  font-size: 10px;
  line-height: 1.45;
}

.patientConsentChecks input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  flex: 0 0 15px;
  accent-color: var(--primary-neon, #65e4ab);
}

.patientConsentActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.patientConsentCancel,
.patientConsentSubmit {
  min-height: 42px;
  padding: 0 18px;
  cursor: pointer;
  border-radius: 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
}

.patientConsentCancel {
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  background: var(--glass-bg, rgba(255,255,255,.03));
  color: var(--text-muted, rgba(255,255,255,.7));
}

.patientConsentSubmit {
  border: 0;
  background:
    linear-gradient(
      135deg,
      var(--primary-neon, #4adea7),
      var(--accent-neon, #10b981)
    );
  color: #fff;
  box-shadow: var(--primary-glow, 0 12px 28px rgba(16,185,129,.25));
}

@media (max-width: 680px) {
  .patientConsentOverlay {
    padding: 0;
  }

  .patientConsentModal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

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

  .patientConsentFieldWide {
    grid-column: auto;
  }

  .patientConsentActions {
    flex-direction: column-reverse;
  }

  .patientConsentCancel,
  .patientConsentSubmit {
    width: 100%;
  }
}

.patientFinancePage {
  width: 100%;
  color: #fff;
}

.patientFinanceHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
}

.patientFinanceKicker {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.patientFinanceHead h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #fff;
}

.patientFinanceHead p {
  max-width: 720px;
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.48);
}

.patientFinanceValueBadge {
  min-width: 200px;
  padding: 15px 17px;
  border: 1px solid rgba(182, 102, 255, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.17),
      rgba(147, 70, 232, 0.05)
    );
  box-shadow:
    0 14px 34px rgba(65, 20, 112, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.patientFinanceValueBadge span,
.patientFinanceValueBadge strong {
  display: block;
}

.patientFinanceValueBadge span {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

.patientFinanceValueBadge strong {
  font-size: 21px;
  font-weight: 850;
  color: #c98dff;
}

.patientFinanceKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.patientFinanceKpi {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.patientFinanceKpi.accent {
  border-color: rgba(177, 91, 255, 0.22);
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.16),
      rgba(147, 70, 232, 0.045)
    );
}

.patientFinanceKpiIcon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(180, 104, 255, 0.18);
  border-radius: 13px;
  background: rgba(147, 70, 232, 0.09);
  font-size: 18px;
}

.patientFinanceKpi > div:last-child {
  min-width: 0;
}

.patientFinanceKpi span,
.patientFinanceKpi strong,
.patientFinanceKpi small {
  display: block;
}

.patientFinanceKpi span {
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.patientFinanceKpi strong {
  overflow: hidden;
  font-size: 18px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.patientFinanceKpi small {
  margin-top: 4px;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.35);
}

.patientFinanceMainGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 16px;
  margin-bottom: 16px;
}

.patientFinancePanel {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at top left,
      rgba(147, 70, 232, 0.08),
      transparent 36%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.012)
    );
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.patientFinancePanelHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.patientFinancePanelHead > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.patientFinancePanelIcon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(178, 93, 255, 0.18);
  border-radius: 12px;
  background: rgba(147, 70, 232, 0.09);
  font-size: 16px;
}

.patientFinancePanelHead h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 820;
  color: #fff;
}

.patientFinancePanelHead p {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.4);
}

.patientFinanceSmallBadge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(176, 91, 255, 0.18);
  border-radius: 999px;
  background: rgba(147, 70, 232, 0.08);
  font-size: 8px;
  font-weight: 850;
  color: #d6b2ff;
}

.patientTopServices {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.patientTopServiceRow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
}

.patientTopServiceRank {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(181, 103, 255, 0.18);
  border-radius: 10px;
  background: rgba(147, 70, 232, 0.08);
  font-size: 11px;
  font-weight: 850;
  color: #d4aeff;
}

.patientTopServiceInfo {
  min-width: 0;
}

.patientTopServiceInfo strong,
.patientTopServiceInfo span {
  display: block;
}

.patientTopServiceInfo strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.patientTopServiceInfo span {
  margin-top: 3px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
}

.patientTopServiceRow > b {
  font-size: 11px;
  font-weight: 850;
  color: #c98cff;
}

.patientExpenseTotal {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.patientExpenseTotal span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.42);
}

.patientExpenseTotal strong {
  font-size: 20px;
  font-weight: 850;
  color: #fff;
}

.patientExpenseBar {
  display: flex;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.patientExpenseBar i {
  display: block;
  height: 100%;
  min-width: 0;
}

.patientExpenseBar i.services {
  background:
    linear-gradient(
      90deg,
      #9f4cff,
      #7b3fe6
    );
}

.patientExpenseBar i.stock {
  background:
    linear-gradient(
      90deg,
      #24d07b,
      #18a65f
    );
}

.patientExpenseLegend {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.patientExpenseLegend > div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.patientExpenseLegend > div > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.patientExpenseLegend > div > span.services {
  background: #9f4cff;
}

.patientExpenseLegend > div > span.stock {
  background: #24d07b;
}

.patientExpenseLegend small,
.patientExpenseLegend strong {
  display: block;
}

.patientExpenseLegend small {
  margin-bottom: 2px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
}

.patientExpenseLegend strong {
  font-size: 12px;
  color: #fff;
}

.patientExpenseLegend b {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
}

.patientPaymentsPanel {
  margin-bottom: 16px;
}

.patientPaymentsToggle {
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
  border: 1px solid rgba(177, 91, 255, 0.2);
  border-radius: 10px;
  background: rgba(147, 70, 232, 0.08);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  color: #dcbcff;
}

.patientPaymentsList {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.patientPaymentRow {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
}

.patientPaymentRow.is-hidden {
  display: none;
}

.patientPaymentDate strong,
.patientPaymentDate span,
.patientPaymentDescription strong,
.patientPaymentDescription span {
  display: block;
}

.patientPaymentDate strong {
  font-size: 11px;
  color: #fff;
}

.patientPaymentDate span {
  margin-top: 3px;
  font-size: 8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.patientPaymentDescription {
  min-width: 0;
}

.patientPaymentDescription strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.86);
}

.patientPaymentDescription span {
  margin-top: 4px;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.36);
}

.patientPaymentAmount {
  font-size: 12px;
  font-weight: 850;
  color: #5ee59a;
}

.patientFinanceInsight {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid rgba(167, 87, 255, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.12),
      rgba(147, 70, 232, 0.035)
    );
}

.patientFinanceInsightIcon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid rgba(181, 101, 255, 0.18);
  border-radius: 12px;
  background: rgba(147, 70, 232, 0.09);
  font-size: 17px;
}

.patientFinanceInsight span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #cfa6ff;
}

.patientFinanceInsight p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);
}

.patientFinanceEmpty {
  padding: 28px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .patientFinanceKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 720px) {
  .patientFinanceHead {
    flex-direction: column;
  }

  .patientFinanceValueBadge {
    width: 100%;
    box-sizing: border-box;
  }

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

  .patientPaymentRow {
    grid-template-columns: 1fr auto;
  }

  .patientPaymentDescription {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 520px) {
  .patientFinancePanel {
    padding: 16px;
  }

  .patientFinancePanelHead {
    flex-direction: column;
  }

  .patientPaymentsToggle {
    width: 100%;
  }

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

  .patientPaymentDescription {
    grid-column: auto;
    grid-row: auto;
  }

  .patientPaymentAmount {
    justify-self: start;
  }
}
/* =========================================================
   DOC.PUG CRM — VISIT WORKSPACE
   ========================================================= */

.visitWorkspace {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 4px 0 130px;
  color: #fff;
}

.visitWorkspaceHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.visitWorkspaceHeaderMain {
  min-width: 0;
}

.visitBackPatientButton {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  margin: 0 0 14px;
  cursor: pointer;
  border: 1px solid var(--finance-border);
  border-radius: 999px;
  background: var(--finance-surface-soft);
  color: var(--finance-text-soft);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.visitBackPatientButton:hover {
  transform: translateY(-1px);
  border-color: var(--finance-border-strong);
  background: var(--finance-surface-hover);
  color: var(--finance-accent-2);
}

.visitWorkspaceEyebrow {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.visitWorkspaceHeader h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: #fff;
}

.visitWorkspaceMeta {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.48);
}

.visitWorkspaceHeaderActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.visitWorkspaceStatus,
.visitWorkspaceDate {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
}

.visitWorkspaceStatus {
  gap: 7px;
}

.visitWorkspaceStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0b84b;
  box-shadow: 0 0 14px rgba(240, 184, 75, 0.55);
}

.visitWorkspaceDate {
  color: #fff;
}

.visitWorkspaceGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.visitWorkspaceMain {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
}

.visitSectionCard {
  position: relative;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at top left,
      rgba(147, 70, 232, 0.09),
      transparent 34%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.014)
    );
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.visitSectionCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.025),
      transparent 32%
    );
}

.visitSectionHead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.visitSectionHead > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.visitSectionIcon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(183, 103, 255, 0.2);
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      rgba(147, 70, 232, 0.18),
      rgba(147, 70, 232, 0.06)
    );
  box-shadow:
    0 12px 28px rgba(75, 25, 130, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-size: 18px;
}

.visitSectionHead h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 820;
  letter-spacing: -0.02em;
  color: #fff;
}

.visitSectionHead p {
  max-width: 620px;
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}

.visitSectionTotal {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 9px 11px;
  border: 1px solid rgba(177, 91, 255, 0.16);
  border-radius: 12px;
  background: rgba(147, 70, 232, 0.07);
  text-align: right;
}

.visitSectionTotal span,
.visitSectionTotal strong {
  display: block;
}

.visitSectionTotal span {
  margin-bottom: 3px;
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.visitSectionTotal strong {
  font-size: 14px;
  font-weight: 850;
  color: #c88cff;
}

.visitMedicalGrid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.5fr);
  gap: 16px;
}

.visitField {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.visitFieldWide {
  grid-column: 1 / -1;
}

.visitField > span {
  font-size: 10px;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.62);
}

.visitControl {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  border-radius: 13px;
  background: rgba(5, 3, 13, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 8px 22px rgba(0, 0, 0, 0.08);
  font: inherit;
  font-size: 13px;
  color: #fff;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

textarea.visitControl {
  min-height: 94px;
  padding: 12px 13px;
  line-height: 1.55;
  resize: vertical;
}

.visitTextareaLarge {
  min-height: 120px !important;
}

.visitControl::placeholder {
  color: rgba(255, 255, 255, 0.26);
}

.visitControl:hover {
  border-color: rgba(181, 101, 255, 0.22);
}

.visitControl:focus {
  border-color: rgba(178, 91, 255, 0.72);
  background: rgba(13, 8, 28, 0.72);
  box-shadow:
    0 0 0 4px rgba(147, 70, 232, 0.1),
    0 12px 30px rgba(54, 17, 94, 0.16);
}

select.visitControl {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      rgba(255, 255, 255, 0.55) 50%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 50%,
      transparent 50%
    );
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.visitWeightControl {
  position: relative;
}

.visitWeightControl .visitControl {
  padding-right: 42px;
}

.visitWeightControl > span {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.4);
}

.visitPickerModern {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(160px, 0.7fr)
    minmax(260px, 1.3fr)
    86px
    112px;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
}

.visitPickerModern label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.visitPickerModern label > span {
  font-size: 9px;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.52);
}

.visitPickerQty .visitControl {
  text-align: center;
}

.visitAddLineButton {
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  border: 1px solid rgba(211, 164, 255, 0.28);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      #a84dff,
      #7c3fe6
    );
  box-shadow:
    0 12px 28px rgba(111, 42, 196, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  color: #fff;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.visitAddLineButton:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    0 16px 34px rgba(111, 42, 196, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.visitLinesModern {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.visitLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.visitLine:hover {
  transform: translateY(-1px);
  border-color: rgba(177, 91, 255, 0.18);
  background: rgba(147, 70, 232, 0.045);
}

.visitLineMain {
  min-width: 0;
}

.visitLineMain strong,
.visitLineMain span {
  display: block;
}

.visitLineMain strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.visitLineMain span {
  margin-top: 4px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
}

.visitLineActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.visitLineTotal {
  font-size: 12px;
  font-weight: 850;
  color: #c98cff;
}

.visitLineDelete {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 79, 105, 0.16);
  border-radius: 9px;
  background: rgba(255, 67, 96, 0.06);
  font: inherit;
  font-size: 11px;
  color: #ff8296;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.visitLineDelete:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 105, 0.28);
  background: rgba(255, 67, 96, 0.12);
}

.visitLinesEmpty {
  padding: 24px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.36);
}

/* =========================================================
   VISIT SUMMARY SIDEBAR
   ========================================================= */

.visitWorkspaceSidebar {
  position: sticky;
  top: 18px;
}

.visitSummaryCard {
  position: relative;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--finance-border-strong);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at top left,
      var(--finance-accent-soft),
      transparent 36%
    ),
    linear-gradient(
      150deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 26px 70px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.visitSummaryCard::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -80px;
  width: 210px;
  height: 210px;
  pointer-events: none;
  border-radius: 50%;
  background: var(--finance-accent-glow);
  filter: blur(40px);
}

.visitSummaryHead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.visitSummaryHead span {
  font-size: 13px;
  font-weight: 850;
  color: var(--finance-text);
}

.visitSummaryHead b {
  padding: 5px 7px;
  border: 1px solid rgba(97, 229, 154, 0.18);
  border-radius: 999px;
  background: rgba(48, 206, 118, 0.07);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #6ae7a1;
}

.visitSummaryPatient {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--finance-border);
  border-radius: 14px;
  background: var(--finance-surface-soft);
}

.visitSummaryAvatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--finance-border-strong);
  border-radius: 12px;
  background: var(--finance-accent-soft);
  font-size: 17px;
}

.visitSummaryPatient strong,
.visitSummaryPatient span {
  display: block;
}

.visitSummaryPatient strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--finance-text);
}

.visitSummaryPatient span {
  margin-top: 4px;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--finance-text-muted);
}

.visitSummaryRows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 17px;
}

.visitSummaryRows > div:not(.visitSummaryDivider) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.visitSummaryRows span {
  font-size: 10px;
  color: var(--finance-text-muted);
}

.visitSummaryRows strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--finance-text);
}

.visitSummaryDivider {
  height: 1px;
  background: var(--finance-border);
}

.visitSummaryGrand {
  align-items: flex-end !important;
}

.visitSummaryGrand span {
  font-size: 11px;
  font-weight: 700;
  color: var(--finance-text-soft);
}

.visitSummaryGrand strong {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--finance-accent-2);
}

.visitSavePrimary,
.visitCompleteButton,
.visitPrintButton {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 44px;
  margin-top: 9px;
  cursor: pointer;
  border-radius: 13px;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.visitSavePrimary {
  border: 1px solid var(--finance-border-strong);
  background:
    linear-gradient(
      135deg,
      var(--finance-accent-2),
      var(--finance-accent)
    );
  box-shadow:
    0 14px 32px var(--finance-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
}

.visitCompleteButton {
  border: 1px solid rgba(71, 222, 139, 0.22);
  background: rgba(45, 205, 116, 0.08);
  color: #72e6a7;
}

.visitPrintButton {
  border: 1px solid var(--finance-border);
  background: var(--finance-surface-soft);
  color: var(--finance-text-soft);
}

.visitSavePrimary:hover,
.visitCompleteButton:hover,
.visitPrintButton:hover {
  transform: translateY(-2px);
}

.visitSavePrimary:hover {
  filter: brightness(1.08);
  box-shadow:
    0 18px 38px var(--finance-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.visitCompleteButton:hover {
  border-color: rgba(71, 222, 139, 0.34);
  background: rgba(45, 205, 116, 0.13);
}

.visitPrintButton:hover {
  background: var(--finance-surface-hover);
}

.visitSummaryHint {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--finance-border);
  font-size: 8px;
  line-height: 1.5;
  color: var(--finance-text-faint);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {
  .visitWorkspaceGrid {
    grid-template-columns: 1fr;
  }

  .visitWorkspaceSidebar {
    position: static;
  }

  .visitSummaryCard {
    max-width: none;
  }

  .visitPickerModern {
    grid-template-columns:
      minmax(150px, 0.7fr)
      minmax(220px, 1.3fr)
      80px
      110px;
  }
}

@media (max-width: 820px) {
  .visitWorkspaceHeader {
    flex-direction: column;
  }

  .visitWorkspaceHeaderActions {
    justify-content: flex-start;
  }

  .visitSectionCard {
    padding: 18px;
  }

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

  .visitFieldWide {
    grid-column: auto;
  }

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

  .visitPickerQty {
    grid-column: 1;
  }

  .visitAddLineButton {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .visitWorkspace {
    padding-bottom: 100px;
  }

  .visitWorkspaceHeader h1 {
    font-size: 34px;
  }

  .visitWorkspaceHeaderActions {
    width: 100%;
  }

  .visitWorkspaceStatus,
  .visitWorkspaceDate {
    flex: 1;
  }

  .visitSectionHead {
    flex-direction: column;
  }

  .visitSectionTotal {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }

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

  .visitPickerQty,
  .visitAddLineButton {
    grid-column: auto;
  }

  .visitAddLineButton {
    width: 100%;
  }

  .visitLine {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .visitSummaryGrand {
    align-items: flex-start !important;
    flex-direction: column;
  }
}
/* =========================================================
   PREMIUM VISIT DISCHARGE / PRINT DOCUMENT
   ========================================================= */

#disA4 {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  background: #ffffff;
  color: #172033;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.premiumDischargeDocument {
  --discharge-accent: #9346e8;

  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: #172033;
  padding: 42px;
  border-radius: 24px;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dischargeHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.dischargeClinicIdentity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.dischargeClinicLogo {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  object-fit: contain;
  border-radius: 16px;
  background: #ffffff;
}

.dischargeClinicLogoFallback {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 30px;
  color: var(--discharge-accent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--discharge-accent) 14%, white),
      #ffffff
    );
  border: 1px solid
    color-mix(in srgb, var(--discharge-accent) 22%, white);
}

.dischargeClinicName {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 850;
  color: #111827;
  letter-spacing: -0.03em;
}

.dischargeClinicSubtitle {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #667085;
}

.dischargeClinicContacts {
  margin-top: 8px;
  max-width: 430px;
  font-size: 11px;
  line-height: 1.55;
  color: #7b8497;
}

.dischargeDocumentMeta {
  flex: 0 0 280px;
  text-align: right;
}

.dischargeDocumentType {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: #111827;
}

.dischargeDocumentNumber {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 750;
  color: var(--discharge-accent);
}

.dischargeDocumentDate {
  margin-top: 4px;
  font-size: 12px;
  color: #7b8497;
}

.dischargeAccentLine {
  height: 3px;
  margin: 26px 0 28px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--discharge-accent),
      color-mix(in srgb, var(--discharge-accent) 18%, white),
      transparent
    );
}

.dischargePeopleGrid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dischargeInfoCard {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid #e8ebf2;
  background:
    linear-gradient(
      180deg,
      #fbfcff,
      #f7f8fc
    );
  box-sizing: border-box;
}

.dischargeInfoLabel {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--discharge-accent);
}

.dischargeInfoName {
  margin-top: 7px;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 850;
  color: #111827;
}

.dischargeInfoRows {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.dischargeInfoRows p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  font-size: 12px;
  line-height: 1.45;
}

.dischargeInfoRows span {
  color: #7b8497;
}

.dischargeInfoRows strong {
  max-width: 65%;
  text-align: right;
  color: #273044;
  overflow-wrap: anywhere;
}

.dischargeMedicalGrid {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.dischargeMedicalSection {
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #e8ebf2;
  background: #ffffff;
  box-sizing: border-box;
}

.dischargePrescriptionSection {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--discharge-accent) 5%, white),
      #ffffff
    );
  border-color:
    color-mix(in srgb, var(--discharge-accent) 18%, #e8ebf2);
}

.dischargeSectionTitle {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--discharge-accent);
}

.dischargeSectionText {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.65;
  color: #2f3748;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dischargeFinanceSection {
  margin-top: 22px;
  border-radius: 18px;
  border: 1px solid #e5e8ef;
  overflow: hidden;
  background: #ffffff;
}

.dischargeFinanceHeader {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--discharge-accent) 7%, white),
      #ffffff
    );
  border-bottom: 1px solid #e5e8ef;
}

.dischargeFinanceSubtitle {
  margin-top: 4px;
  font-size: 11px;
  color: #7b8497;
}

.dischargeTotalBadge {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 10px 14px;
  border-radius: 14px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  color: var(--discharge-accent);
  background:
    color-mix(
      in srgb,
      var(--discharge-accent) 10%,
      white
    );
  border: 1px solid
    color-mix(
      in srgb,
      var(--discharge-accent) 16%,
      white
    );
}

.dischargeFinanceTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dischargeFinanceTable th,
.dischargeFinanceTable td {
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f5;
  text-align: left;
  vertical-align: top;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.dischargeFinanceTable th {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #687386;
  background: #f7f8fb;
}

.dischargeFinanceTable td {
  font-size: 11px;
  line-height: 1.45;
  color: #293246;
}

.dischargeFinanceTable th:nth-child(1),
.dischargeFinanceTable td:nth-child(1) {
  width: 40%;
}

.dischargeFinanceTable th:nth-child(2),
.dischargeFinanceTable td:nth-child(2) {
  width: 17%;
}

.dischargeFinanceTable th:nth-child(3),
.dischargeFinanceTable td:nth-child(3) {
  width: 11%;
  text-align: center;
}

.dischargeFinanceTable th:nth-child(4),
.dischargeFinanceTable td:nth-child(4),
.dischargeFinanceTable th:nth-child(5),
.dischargeFinanceTable td:nth-child(5) {
  width: 16%;
  text-align: right;
  white-space: nowrap;
}

.dischargeFinanceTable tbody tr:last-child td {
  border-bottom: 0;
}

.dischargeEmptyTable {
  padding: 24px !important;
  text-align: center !important;
  color: #8c95a5 !important;
}

.dischargeTotals {
  padding: 16px 20px 18px;
  margin-left: auto;
  width: min(100%, 340px);
  display: grid;
  gap: 8px;
  box-sizing: border-box;
}

.dischargeTotals > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 12px;
  color: #687386;
}

.dischargeTotals strong {
  color: #172033;
}

.dischargeTotals .grand {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e4e8ef;
  font-size: 14px;
  font-weight: 850;
  color: #172033;
}

.dischargeTotals .grand strong {
  font-size: 17px;
  color: var(--discharge-accent);
}

.dischargeSignatureSection {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.dischargeDoctorSignature {
  width: 270px;
}

.dischargeSignatureLabel {
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #7b8497;
}

.dischargeSignatureImage {
  display: block;
  max-width: 160px;
  max-height: 68px;
  margin-top: 10px;
  object-fit: contain;
}

.dischargeSignatureLine {
  width: 190px;
  height: 34px;
  margin-top: 10px;
  border-bottom: 1px solid #9ea6b5;
}

.dischargeSignatureName {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 750;
  color: #273044;
}

.dischargeStamp img {
  display: block;
  max-width: 105px;
  max-height: 105px;
  object-fit: contain;
  opacity: 0.9;
}

.dischargeFooter {
  margin-top: 30px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #e7eaf0;
  font-size: 10px;
  line-height: 1.4;
  color: #8a93a3;
}

/* =========================================================
   RESPONSIVE PREVIEW
   ========================================================= */

@media (max-width: 760px) {
  .premiumDischargeDocument {
    padding: 24px;
    border-radius: 18px;
  }

  .dischargeHeader {
    flex-direction: column;
  }

  .dischargeDocumentMeta {
    flex: none;
    width: 100%;
    text-align: left;
  }

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

  .dischargeFinanceSection {
    overflow-x: auto;
  }

  .dischargeFinanceTable {
    min-width: 650px;
  }

  .dischargeSignatureSection,
  .dischargeFooter {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   PRINT — A4, CORRECT MULTI-PAGE BREAKS
   ========================================================= */

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 11mm 14mm;
  }

  html,
  body {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body.docpug-printing * {
    visibility: hidden !important;
  }

  body.docpug-printing #disA4,
  body.docpug-printing #disA4 * {
    visibility: visible !important;
  }

  body.docpug-printing #disA4 {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.docpug-printing .premiumDischargeDocument {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    overflow: visible !important;
    transform: none !important;
  }

  .dischargeHeader {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeAccentLine {
    break-after: avoid;
    page-break-after: avoid;
  }

  .dischargePeopleGrid {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeInfoCard {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeMedicalSection {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeSectionTitle {
    break-after: avoid;
    page-break-after: avoid;
  }

  .dischargeFinanceSection {
    overflow: visible !important;
    break-inside: auto;
    page-break-inside: auto;
  }

  .dischargeFinanceHeader {
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }

  .dischargeFinanceTable {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .dischargeFinanceTable thead {
    display: table-header-group;
  }

  .dischargeFinanceTable tfoot {
    display: table-footer-group;
  }

  .dischargeFinanceTable tbody {
    display: table-row-group;
  }

  .dischargeFinanceTable tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeFinanceTable th,
  .dischargeFinanceTable td {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeTotals {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeSignatureSection {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeFooter {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dischargeClinicLogo,
  .dischargeSignatureImage,
  .dischargeStamp img {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .dischargeAccentLine,
  .dischargeInfoCard,
  .dischargePrescriptionSection,
  .dischargeFinanceHeader,
  .dischargeTotalBadge,
  .dischargeFinanceTable th {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}
/* Скрытый контейнер выписки вне режима печати */
.visitDischargePrintHost {
  display: none;
}

/* Во время печати показываем только выписку */
@media print {
  body.docpug-printing .visitDischargePrintHost {
    display: block !important;
  }

  body.docpug-printing #disA4 {
    display: block !important;
  }
}
/* =========================================
   MODERN DISCHARGE / ВИПИСКА
========================================= */

#disA4 {
  background: #f5f7fb;
  padding: 24px;
}

.disModernDoc {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  background: #ffffff;
  color: #1f2937;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
  padding: 36px 36px 28px;
  box-sizing: border-box;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.disModernHead {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.disModernBrand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.disModernLogoBox,
.disModernLogoFallback {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  flex: 0 0 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4efff;
  border: 1px solid #e9defd;
}

.disModernLogoImg {
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
}

.disModernLogoFallback {
  color: var(--disAccent, #9346E8);
  font-size: 28px;
  font-weight: 800;
}

.disModernBrandText {
  min-width: 0;
}

.disModernClinicName {
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
  color: #0f172a;
}

.disModernClinicSubtitle {
  margin-top: 4px;
  color: #667085;
  font-size: 15px;
  font-weight: 600;
}

.disModernClinicContacts {
  margin-top: 8px;
  color: #7b8794;
  font-size: 13px;
  line-height: 1.5;
}

.disModernHeadRight {
  text-align: right;
  flex: 0 0 auto;
}

.disModernDocType {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}

.disModernDocMeta {
  margin-top: 6px;
  color: var(--disAccent, #9346E8);
  font-size: 14px;
  font-weight: 700;
}

.disModernAccentLine {
  height: 3px;
  background: linear-gradient(90deg, var(--disAccent, #9346E8), rgba(148, 70, 232, 0.15));
  border-radius: 999px;
  margin: 24px 0 22px;
}

.disModernInfoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.disModernCard {
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 18px;
  padding: 18px 18px 16px;
}

.disModernCardTitle {
  color: var(--disAccent, #9346E8);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.disModernCardMain {
  margin-top: 6px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
}

.disModernInfoRows {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.disModernInfoRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.disModernInfoRow span {
  color: #7a8797;
}

.disModernInfoRow b {
  color: #0f172a;
  text-align: right;
  font-weight: 700;
}

.disModernSection {
  margin-top: 16px;
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 18px;
  padding: 18px;
  page-break-inside: avoid;
}

.disModernSectionTitle {
  color: var(--disAccent, #9346E8);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.disModernSectionSub {
  margin-top: 4px;
  color: #7a8797;
  font-size: 13px;
}

.disModernText {
  margin-top: 10px;
  color: #253041;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.disModernTextSoft {
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  padding: 14px;
}

.disModernFinanceSection {
  overflow: hidden;
}

.disModernFinanceHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.disModernGrandTotalBadge {
  background: #f4efff;
  color: var(--disAccent, #9346E8);
  border: 1px solid #e6d8ff;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 24px;
  font-weight: 800;
  white-space: nowrap;
}

.disModernTableWrap {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #e8edf3;
  border-radius: 16px;
}

.disModernTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.disModernTable th {
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e8edf3;
}

.disModernTable td {
  padding: 13px 14px;
  border-bottom: 1px solid #eef2f7;
  color: #253041;
  font-size: 14px;
  vertical-align: top;
}

.disModernTable tbody tr:last-child td {
  border-bottom: none;
}

.disModernEmpty {
  text-align: center;
  color: #94a3b8;
  padding: 24px !important;
}

.disModernFinanceSummary {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.disModernFinanceMini {
  min-width: 170px;
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  padding: 12px 14px;
}

.disModernFinanceMini span {
  display: block;
  color: #7a8797;
  font-size: 12px;
}

.disModernFinanceMini b {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
}

.disModernFinanceMiniTotal {
  background: #f4efff;
  border-color: #e6d8ff;
}

.disModernFinanceMiniTotal b {
  color: var(--disAccent, #9346E8);
}

.disModernSignGrid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  page-break-inside: avoid;
}

.disModernSignBox {
  border: 1px solid #e8edf3;
  border-radius: 18px;
  padding: 16px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.disModernSignTitle {
  color: #7a8797;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.disModernSignLine {
  border-top: 1px solid #94a3b8;
  margin-top: 34px;
}

.disModernSignImg,
.disModernStampImg {
  max-height: 70px;
  max-width: 180px;
  object-fit: contain;
  margin-top: auto;
}

.disModernSignName {
  margin-top: 10px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.disModernFooter {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #8a94a6;
  font-size: 13px;
}

@media (max-width: 900px) {
  .disModernHead,
  .disModernInfoGrid,
  .disModernSignGrid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .disModernHeadRight {
    text-align: left;
  }

  .disModernFinanceHead {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media print {
  body {
    background: #ffffff !important;
  }

  #disA4 {
    background: #ffffff !important;
    padding: 0 !important;
  }

  .disModernDoc {
    max-width: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 18mm 14mm 14mm !important;
  }

  .disModernSection,
  .disModernCard,
  .disModernSignBox,
  .disModernTableWrap {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .disModernFooter {
    page-break-inside: avoid;
  }
}
.visitDischargePrintHost {
  display: none;
}
/* ===== COMPACT PDF DISCHARGE ===== */

.disModernDoc {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.disModernHead {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.disModernLogoBox,
.disModernLogoFallback {
  width: 48px !important;
  height: 48px !important;
  flex-basis: 48px !important;
  border-radius: 13px !important;
}

.disModernLogoImg {
  max-width: 36px !important;
  max-height: 36px !important;
}

.disModernClinicName {
  font-size: 21px !important;
  line-height: 1.08 !important;
}

.disModernClinicSubtitle {
  margin-top: 2px !important;
  font-size: 11px !important;
}

.disModernClinicContacts {
  margin-top: 4px !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

.disModernHeadRight {
  max-width: 46% !important;
  text-align: right !important;
}

.disModernDocType {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.disModernDocMeta {
  margin-top: 4px !important;
  font-size: 10px !important;
}

.disModernAccentLine {
  margin: 14px 0 12px !important;
}

.disModernTitle {
  font-size: 21px !important;
}

.disModernCardsGrid {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.disModernCard {
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

.disModernInfoGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
}

.disModernInfoGrid .disModernCard {
  min-width: 0 !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
}

.disModernInfoGrid .disModernCardTitle {
  font-size: 8px !important;
  letter-spacing: .07em !important;
}

.disModernInfoGrid .disModernCardMain {
  margin-top: 2px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}

.disModernInfoGrid .disModernInfoRows {
  margin-top: 6px !important;
  gap: 3px !important;
}

.disModernInfoGrid .disModernInfoRow {
  gap: 8px !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.disModernInfoGrid .disModernInfoRow span {
  flex: 0 0 auto !important;
}

.disModernInfoGrid .disModernInfoRow b {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.disModernCard h3 {
  margin-bottom: 6px !important;
}

.disModernSection {
  margin: 9px 0 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
}

.disModernSectionTitle {
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  letter-spacing: .06em !important;
}

.disModernText {
  margin-top: 6px !important;
  color: #344054 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.disModernTextSoft {
  padding: 9px 10px !important;
  border-radius: 9px !important;
}

.disModernTextLine {
  margin: 0 !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

.disModernTextLine + .disModernTextLine {
  margin-top: 3px !important;
}

.disModernTextLine.is-spaced {
  margin-top: 8px !important;
}

.disModernTextBullet {
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) !important;
  gap: 2px !important;
}

.disModernTextBullet > span:first-child {
  color: var(--disAccent, #9346E8) !important;
  font-weight: 800 !important;
}

.disModernFinanceBlock {
  margin-top: 10px !important;
  padding: 12px !important;
}

.disModernTable th,
.disModernTable td {
  padding: 6px 8px !important;
  font-size: 10px !important;
}

.disModernFinanceSummary {
  margin-top: 8px !important;
  gap: 8px !important;
}

.disModernFinanceSummary > div {
  padding: 8px 10px !important;
}

.disModernSignGrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  margin-top: 12px !important;
  gap: 10px !important;
}

.disModernSignBox {
  min-height: 76px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

.disModernSignTitle {
  margin-bottom: 5px !important;
  font-size: 9px !important;
}

.disModernSignLine {
  margin-top: 18px !important;
}

.disModernSignName {
  margin-top: 6px !important;
  font-size: 10px !important;
}

.disModernFooter {
  margin-top: 12px !important;
  padding-top: 8px !important;
}
/* ===== PDF-выписка: уменьшаем разрыв и центрируем ===== */

.disModernDoc {
  margin: 0 auto !important;
}

.disModernSection {
  margin-bottom: 0 !important;
}

.disModernSection--follow,
.disModernFollowBlock,
.disModernControlBlock {
  margin-bottom: 10px !important;
}

.disModernSection--finance,
.disModernFinanceBlock,
.disModernServicesBlock {
  margin-top: 10px !important;
}

/* если где-то секция услуг прижимается вниз */
.disModernSection--finance,
.disModernFinanceBlock,
.disModernServicesBlock {
  align-self: auto !important;
}
/* PDF: финансовый блок можно делить между страницами */
.disModernFinanceSection {
  break-inside: auto !important;
  page-break-inside: auto !important;
  overflow: visible !important;
}

.disModernTableWrap {
  break-inside: auto !important;
  page-break-inside: auto !important;
  overflow: visible !important;
}

.disModernTable tr {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* =========================================================
   INFORMED CONSENT PDF
   ========================================================= */

.disConsentRepresentative {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 1fr)
    minmax(0, .8fr);
  gap: 8px;
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  background: #f8fafc;
}

.disConsentRepresentative span,
.disConsentRepresentative strong {
  display: block;
}

.disConsentRepresentative span {
  color: var(--disAccent, #9346e8);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .07em;
}

.disConsentRepresentative strong {
  margin-top: 3px;
  color: #273044;
  font-size: 9px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.disConsentSection {
  /*
   * html2canvas 1.x не умеет разбирать вычисленный
   * цвет из color-mix()/color(). Для PDF оставляем
   * такой же лёгкий фон в обычном sRGB.
   */
  background:
    linear-gradient(
      135deg,
      rgba(72, 199, 213, .045),
      #ffffff
    ) !important;
}

.disConsentLead {
  margin: 6px 0 0;
  color: #344054;
  font-size: 10px;
  line-height: 1.45;
}

.disConsentClauses {
  margin: 8px 0 0;
  padding-left: 20px;
  color: #344054;
  font-size: 10px;
  line-height: 1.45;
}

.disConsentClause {
  padding-left: 3px;
}

.disConsentClause + .disConsentClause {
  margin-top: 5px;
}

.disConsentClause::marker {
  color: var(--disAccent, #9346e8);
  font-weight: 850;
}

.disConsentDataSection {
  border-left: 3px solid
    var(--disAccent, #9346e8) !important;
  background: #fbfcfe !important;
}

.disConsentAcknowledgements {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.disConsentAcknowledgements > div {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid #e8edf3;
  border-radius: 9px;
  background: #f8fafc;
  color: #536071;
  font-size: 8px;
  line-height: 1.35;
}

.disConsentAcknowledgements span {
  display: grid;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  place-items: center;
  border-radius: 4px;
  background: #eaf8fa;
  color: var(--disAccent, #9346e8);
  font-size: 8px;
  font-weight: 900;
}

.disConsentSignGrid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.disConsentSignBox {
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  background: #fff;
}

.disConsentSignDate {
  margin-top: 3px;
  color: #8a94a6;
  font-size: 7px;
}

@media print {
  .disConsentRepresentative,
  .disConsentClause,
  .disConsentDataSection,
  .disConsentAcknowledgements,
  .disConsentSignGrid {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* =====================================================
   DOC.PUG — HOSPITAL / СТАЦІОНАР
===================================================== */

.hospitalPage {
  width: 100%;
  padding-bottom: 110px;
}

.hospitalHero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding: 30px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168, 85, 247, 0.18),
      transparent 38%
    ),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.2);
}

.hospitalEyebrow {
  margin-bottom: 8px;
  color: var(--accent-color, #a855f7);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.hospitalHero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
}

.hospitalHero p {
  max-width: 680px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.54);
  line-height: 1.55;
}

.hospitalAdmitButton {
  padding: 14px 20px;
  border: 1px solid rgba(196, 130, 255, 0.45);
  border-radius: 15px;
  background:
    linear-gradient(
      135deg,
      #8b3fff,
      #b24eff
    );
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(168, 85, 247, 0.3);
}

.hospitalStats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.hospitalStatCard {
  padding: 18px;
  border: 1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 19px;
  background:
    rgba(255, 255, 255, 0.03);
}

.hospitalStatCard span,
.hospitalStatCard small {
  display: block;
  color: rgba(255, 255, 255, 0.48);
}

.hospitalStatCard strong {
  display: block;
  margin: 8px 0 4px;
  color: #fff;
  font-size: 2rem;
}

.hospitalStatStable strong {
  color: #42e99d;
}

.hospitalStatWatch strong {
  color: #f5c451;
}

.hospitalStatCritical strong {
  color: #ff7070;
}

.hospitalToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.hospitalFilters {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    rgba(255, 255, 255, 0.03);
}

.hospitalFilter {
  padding: 9px 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(255, 255, 255, 0.54);
  font-weight: 700;
  cursor: pointer;
}

.hospitalFilter.active {
  background:
    rgba(168, 85, 247, 0.22);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px
    rgba(168, 85, 247, 0.36);
}

.hospitalSearch {
  width: min(340px, 100%);
  padding: 12px 15px;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  outline: none;
  background:
    rgba(0, 0, 0, 0.2);
  color: #fff;
}

.hospitalPatientGrid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hospitalPatientCard {
  position: relative;
  padding: 20px;
  overflow: hidden;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background:
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.18);
}

.hospitalPatientCard::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #f5c451;
}

.hospitalStatus-stable::before {
  background: #42e99d;
}

.hospitalStatus-critical::before {
  background: #ff5f6d;
}

.hospitalPatientTop {
  display: flex;
  align-items: center;
  gap: 13px;
}

.hospitalPatientAvatar {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid
    rgba(168, 85, 247, 0.26);
  border-radius: 14px;
  background:
    rgba(168, 85, 247, 0.13);
}

.hospitalPatientIdentity {
  min-width: 0;
  flex: 1;
}

.hospitalPatientIdentity h2 {
  margin: 0;
  color: #fff;
  font-size: 1.18rem;
}

.hospitalPatientIdentity p {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}

.hospitalStatusBadge {
  padding: 7px 10px;
  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 800;
}

.hospitalPatientBody {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.hospitalInfoRow {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.84rem;
}

.hospitalInfoRow span {
  color: rgba(255, 255, 255, 0.42);
}

.hospitalInfoRow strong {
  max-width: 65%;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
}

.hospitalNextAction {
  margin-top: 17px;
  padding: 12px 14px;
  border: 1px solid
    rgba(168, 85, 247, 0.18);
  border-radius: 14px;
  background:
    rgba(168, 85, 247, 0.08);
}

.hospitalNextAction span {
  display: block;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.71rem;
}

.hospitalNextAction strong {
  display: block;
  margin-top: 4px;
  color: #d9b6ff;
  font-size: 0.9rem;
}

.hospitalPatientActions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.hospitalGhostButton,
.hospitalPrimaryButton {
  flex: 1;
  padding: 11px 13px;
  border-radius: 13px;
  font-weight: 800;
  cursor: pointer;
}

.hospitalGhostButton {
  border: 1px solid
    rgba(255, 255, 255, 0.1);
  background:
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
}

.hospitalPrimaryButton {
  border: 1px solid
    rgba(168, 85, 247, 0.35);
  background:
    rgba(168, 85, 247, 0.18);
  color: #dcbcff;
}

.hospitalEmpty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  border: 1px dashed
    rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.48);
}

.hospitalEmpty > div {
  font-size: 2rem;
}

.hospitalEmpty h3 {
  margin: 10px 0 5px;
  color: #fff;
}

@media (max-width: 1000px) {
  .hospitalStats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 720px) {
  .hospitalHero,
  .hospitalToolbar {
    flex-direction: column;
    align-items: stretch;
  }

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

  .hospitalFilters {
    overflow-x: auto;
  }
}
.hospitalDischargeButton {
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;

  border: 1px solid
    rgba(255, 95, 109, 0.22);

  border-radius: 12px;

  background:
    rgba(255, 95, 109, 0.07);

  color:
    rgba(255, 135, 145, 0.82);

  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;
  transition: 0.2s ease;
}

.hospitalDischargeButton:hover {
  background:
    rgba(255, 95, 109, 0.16);

  border-color:
    rgba(255, 95, 109, 0.4);

  color: #ff9ca5;
}

.hospitalDischargeButton:disabled {
  opacity: 0.5;
  cursor: wait;
}
/* =====================================================
   HOSPITAL ADMISSION MODAL
===================================================== */

.hospitalAdmissionOverlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hospitalAdmissionBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 12, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hospitalAdmissionModal {
  position: relative;
  z-index: 1;
  width: min(1040px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(151, 71, 255, 0.17),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #211636,
      #130d22
    );
  box-shadow:
    0 35px 100px rgba(0,0,0,0.58);
}

.hospitalAdmissionHeader {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.hospitalAdmissionEyebrow {
  margin-bottom: 6px;
  color: #b668ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.hospitalAdmissionHeader h2 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
}

.hospitalAdmissionHeader p {
  margin-top: 7px;
  color: rgba(255,255,255,0.48);
}

.hospitalAdmissionClose {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}

.hospitalAdmissionGrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
}

.hospitalAdmissionSection {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
}

.hospitalAdmissionSectionFull {
  margin-top: 16px;
}

.hospitalAdmissionSectionTitle {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}

.hospitalAdmissionSectionTitle > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 12px;
  background: rgba(168,85,247,0.12);
}

.hospitalAdmissionSectionTitle strong,
.hospitalAdmissionSectionTitle small {
  display: block;
}

.hospitalAdmissionSectionTitle strong {
  color: #fff;
}

.hospitalAdmissionSectionTitle small {
  margin-top: 2px;
  color: rgba(255,255,255,0.4);
}

.hospitalAdmissionField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 13px;
}

.hospitalAdmissionField > span {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  font-weight: 700;
}

.hospitalAdmissionInput,
.hospitalAdmissionTextarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  outline: none;
  background: rgba(0,0,0,0.22);
  color: #fff;
}

.hospitalAdmissionTextarea {
  resize: vertical;
  font-family: inherit;
}

.hospitalAdmissionInput:focus,
.hospitalAdmissionTextarea:focus {
  border-color: rgba(168,85,247,0.55);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.12);
}

.hospitalAdmissionFieldsRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hospitalPatientSelectList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 345px;
  margin-top: 12px;
  overflow-y: auto;
}

.hospitalPatientSelectItem {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) minmax(120px,0.75fr) 28px;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
  background: rgba(255,255,255,0.025);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.hospitalPatientSelectItem:hover,
.hospitalPatientSelectItem.selected {
  border-color: rgba(168,85,247,0.45);
  background: rgba(168,85,247,0.1);
}

.hospitalPatientSelectAvatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: rgba(168,85,247,0.13);
}

.hospitalPatientSelectMain strong,
.hospitalPatientSelectMain small,
.hospitalPatientSelectOwner strong,
.hospitalPatientSelectOwner small {
  display: block;
}

.hospitalPatientSelectMain small,
.hospitalPatientSelectOwner small {
  margin-top: 3px;
  color: rgba(255,255,255,0.4);
  font-size: 0.72rem;
}

.hospitalPatientSelectOwner {
  text-align: right;
}

.hospitalPatientSelectOwner strong {
  font-size: 0.78rem;
}

.hospitalPatientSelectCheck {
  color: #c181ff;
  font-weight: 900;
  text-align: center;
}

.hospitalPatientSelectEmpty {
  padding: 28px 15px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 14px;
  text-align: center;
}

.hospitalPatientSelectEmpty strong,
.hospitalPatientSelectEmpty span {
  display: block;
}

.hospitalPatientSelectEmpty span {
  margin-top: 5px;
  color: rgba(255,255,255,0.4);
}

.hospitalSelectedPatientPreview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(66,233,157,0.24);
  border-radius: 14px;
  background: rgba(66,233,157,0.07);
}

.hospitalSelectedPatientIcon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: rgba(66,233,157,0.12);
}

.hospitalSelectedPatientPreview span,
.hospitalSelectedPatientPreview strong,
.hospitalSelectedPatientPreview small {
  display: block;
}

.hospitalSelectedPatientPreview span {
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
}

.hospitalSelectedPatientPreview strong {
  margin-top: 2px;
  color: #fff;
}

.hospitalSelectedPatientPreview small {
  margin-top: 3px;
  color: rgba(255,255,255,0.48);
}

.hospitalAdmissionFooter {
  display: flex;
  justify-content: flex-end;
  gap: 11px;
  margin-top: 20px;
}

.hospitalAdmissionCancel,
.hospitalAdmissionSubmit {
  padding: 12px 19px;
  border-radius: 13px;
  font-weight: 800;
  cursor: pointer;
}

.hospitalAdmissionCancel {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
}

.hospitalAdmissionSubmit {
  border: 1px solid rgba(193,129,255,0.45);
  background: linear-gradient(135deg,#8d42ff,#b34cff);
  color: #fff;
  box-shadow: 0 10px 26px rgba(168,85,247,0.27);
}

.hospitalAdmissionSubmit:disabled {
  opacity: 0.55;
  cursor: wait;
}

.hospitalAdmissionLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 180px;
  color: #fff;
}

.hospitalAdmissionSpinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255,255,255,0.14);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: hospitalAdmissionSpin 0.8s linear infinite;
}

@keyframes hospitalAdmissionSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 820px) {
  .hospitalAdmissionGrid,
  .hospitalAdmissionFieldsRow {
    grid-template-columns: 1fr;
  }

  .hospitalPatientSelectItem {
    grid-template-columns:
      42px minmax(0,1fr) 24px;
  }

  .hospitalPatientSelectOwner {
    display: none;
  }
}
/* =====================================================
   HOSPITAL TASKS MODAL
===================================================== */

.hospitalTasksOverlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.hospitalTasksBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 12, 0.84);
  backdrop-filter: blur(18px);
}

.hospitalTasksModal {
  position: relative;
  z-index: 1;
  width: min(1150px, 97vw);
  max-height: 93vh;
  overflow-y: auto;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 27px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(151, 71, 255, 0.16),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #211636,
      #120c20
    );
  box-shadow:
    0 35px 100px rgba(0,0,0,0.58);
}

.hospitalTasksHeader {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.hospitalTasksEyebrow {
  margin-bottom: 5px;
  color: #b668ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.hospitalTasksHeader h2 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
}

.hospitalTasksHeader p {
  margin-top: 7px;
  color: rgba(255,255,255,0.48);
}

.hospitalTasksClose {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}

.hospitalTasksLayout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 330px;
  gap: 17px;
}

.hospitalTasksTimeline,
.hospitalTaskCreateCard {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
}

.hospitalTasksSectionHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.hospitalTasksSectionHead h3,
.hospitalTaskCreateCard h3 {
  margin: 0;
  color: #fff;
}

.hospitalTasksSectionHead p {
  margin-top: 4px;
  color: rgba(255,255,255,0.42);
  font-size: 0.82rem;
}

.hospitalTasksCount {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(168,85,247,0.13);
  color: #d2a5ff;
  font-size: 0.75rem;
  font-weight: 800;
}

.hospitalTasksList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hospitalTaskItem {
  display: flex;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
}

.hospitalTaskItem.completed {
  opacity: 0.66;
  background: rgba(66,233,157,0.045);
  border-color: rgba(66,233,157,0.16);
}

.hospitalTaskIcon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 13px;
  background: rgba(168,85,247,0.12);
  font-size: 1.15rem;
}

.hospitalTaskContent {
  min-width: 0;
  flex: 1;
}

.hospitalTaskTop {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.hospitalTaskType {
  color: #b979ff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hospitalTaskTop h4 {
  margin: 4px 0 0;
  color: #fff;
}

.hospitalTaskTop time {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.48);
  font-size: 0.75rem;
}

.hospitalTaskContent > p {
  margin-top: 8px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}

.hospitalTaskActions {
  display: flex;
  gap: 8px;
  margin-top: 11px;
}

.hospitalTaskStaffSelect,
.hospitalTaskInput,
.hospitalTaskTextarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 11px;
  outline: none;
  background: rgba(0,0,0,0.23);
  color: #fff;
}

.hospitalTaskStaffSelect {
  max-width: 210px;
}

.hospitalTaskCompleteButton,
.hospitalTaskDeleteButton {
  padding: 9px 12px;
  border-radius: 11px;
  font-weight: 800;
  cursor: pointer;
}

.hospitalTaskCompleteButton {
  border: 1px solid rgba(66,233,157,0.25);
  background: rgba(66,233,157,0.1);
  color: #76efb6;
}

.hospitalTaskDeleteButton {
  border: 1px solid rgba(255,95,109,0.2);
  background: rgba(255,95,109,0.07);
  color: #ff939d;
}

.hospitalTaskField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 13px;
}

.hospitalTaskField > span {
  color: rgba(255,255,255,0.52);
  font-size: 0.76rem;
  font-weight: 700;
}

.hospitalTaskTextarea {
  resize: vertical;
  font-family: inherit;
}

.hospitalTaskCreateButton {
  width: 100%;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid rgba(193,129,255,0.45);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      #8d42ff,
      #b34cff
    );
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.hospitalTaskCompletedInfo {
  margin-top: 10px;
  color: #76efb6;
  font-size: 0.76rem;
  font-weight: 700;
}

.hospitalTasksEmpty {
  padding: 55px 20px;
  text-align: center;
  color: rgba(255,255,255,0.44);
}

.hospitalTasksEmpty > div {
  font-size: 2rem;
}

.hospitalTasksEmpty strong,
.hospitalTasksEmpty span {
  display: block;
}

.hospitalTasksEmpty strong {
  margin-top: 9px;
  color: #fff;
}

.hospitalTasksEmpty span {
  margin-top: 5px;
}

.hospitalTasksLoading {
  padding: 70px;
  text-align: center;
  color: #fff;
}

@media (max-width: 850px) {
  .hospitalTasksLayout {
    grid-template-columns: 1fr;
  }

  .hospitalTaskTop,
  .hospitalTaskActions {
    flex-direction: column;
  }

  .hospitalTaskStaffSelect {
    max-width: none;
  }
}
/* =====================================================
   HOSPITAL PATIENT CARD TASKS
===================================================== */

.hospitalCardTasks {
  margin-top: 15px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.09),
      rgba(255, 255, 255, 0.025)
    );
}

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

.hospitalCardTasksHead > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hospitalCardTasksHead span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.69rem;
}

.hospitalCardTasksHead strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.77rem;
}

.hospitalCardTasksHead > small {
  display: grid;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  place-items: center;
  border: 1px solid rgba(184, 104, 255, 0.25);
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.13);
  color: #d4a7ff;
  font-size: 0.68rem;
  font-weight: 800;
}

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

.hospitalCardTask {
  display: flex;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.hospitalCardTask.planned {
  border-color: rgba(184, 104, 255, 0.22);
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.12),
      rgba(255, 255, 255, 0.018)
    );
}

.hospitalCardTask.completed {
  border-color: rgba(79, 225, 157, 0.16);
  background:
    linear-gradient(
      135deg,
      rgba(79, 225, 157, 0.07),
      rgba(255, 255, 255, 0.018)
    );
  opacity: 0.76;
}

.hospitalCardTaskIcon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgba(184, 104, 255, 0.16);
  border-radius: 11px;
  background: rgba(168, 85, 247, 0.11);
  font-size: 0.95rem;
}

.hospitalCardTaskMain {
  min-width: 0;
  flex: 1;
}

.hospitalCardTaskTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hospitalCardTaskTop span {
  color: #ba76ff;
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hospitalCardTaskTop time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.61rem;
  white-space: nowrap;
}

.hospitalCardTaskMain > strong {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.91);
  font-size: 0.77rem;
  line-height: 1.3;
}

.hospitalCardTaskMain > p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.68rem;
  line-height: 1.35;
}

.hospitalCardTaskDone,
.hospitalCardTaskPending {
  display: block;
  margin-top: 6px;
  font-size: 0.63rem;
  font-weight: 700;
}

.hospitalCardTaskDone {
  color: #64ddb0;
}

.hospitalCardTaskPending {
  color: #d5a2ff;
}

.hospitalCardTasksEmpty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.018);
}

.hospitalCardTasksEmpty > span {
  font-size: 1.15rem;
}

.hospitalCardTasksEmpty strong,
.hospitalCardTasksEmpty small {
  display: block;
}

.hospitalCardTasksEmpty strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.72rem;
}

.hospitalCardTasksEmpty small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.63rem;
}
/* =====================================================
   HOSPITAL DISCHARGE CONFIRM
===================================================== */

.hospitalDischargeConfirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hospitalDischargeConfirmBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 10, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hospitalDischargeConfirmModal {
  position: relative;
  z-index: 1;
  width: min(500px, 94vw);
  padding: 30px;
  border: 1px solid
    rgba(255, 255, 255, 0.11);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 76, 112, 0.15),
      transparent 38%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(154, 79, 255, 0.16),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(34, 23, 55, 0.98),
      rgba(16, 10, 29, 0.99)
    );
  box-shadow:
    0 35px 110px rgba(0, 0, 0, 0.62),
    inset 0 1px 0
      rgba(255, 255, 255, 0.04);
  text-align: center;
}

.hospitalDischargeConfirmClose {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.035);
  color:
    rgba(255, 255, 255, 0.56);
  cursor: pointer;
}

.hospitalDischargeConfirmIcon {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 0 auto 17px;
  place-items: center;
  border: 1px solid
    rgba(255, 102, 128, 0.22);
  border-radius: 21px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 82, 112, 0.17),
      rgba(168, 85, 247, 0.12)
    );
  box-shadow:
    0 13px 34px
      rgba(255, 75, 105, 0.11);
  font-size: 1.7rem;
}

.hospitalDischargeConfirmEyebrow {
  margin-bottom: 7px;
  color: #ff8799;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.hospitalDischargeConfirmModal h2 {
  margin: 0;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.2;
}

.hospitalDischargeConfirmModal > p {
  max-width: 390px;
  margin: 10px auto 19px;
  color:
    rgba(255, 255, 255, 0.48);
  font-size: 0.86rem;
  line-height: 1.55;
}

.hospitalDischargeConfirmPatient {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  text-align: left;
}

.hospitalDischargeConfirmAvatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid
    rgba(174, 92, 255, 0.2);
  border-radius: 14px;
  background:
    rgba(168, 85, 247, 0.11);
}

.hospitalDischargeConfirmPatient strong,
.hospitalDischargeConfirmPatient span {
  display: block;
}

.hospitalDischargeConfirmPatient strong {
  color: #fff;
  font-size: 0.91rem;
}

.hospitalDischargeConfirmPatient span {
  margin-top: 3px;
  color:
    rgba(255, 255, 255, 0.42);
  font-size: 0.72rem;
}

.hospitalDischargeConfirmField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 15px;
  text-align: left;
}

.hospitalDischargeConfirmField > span {
  color:
    rgba(255, 255, 255, 0.52);
  font-size: 0.75rem;
  font-weight: 700;
}

.hospitalDischargeConfirmField textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 13px;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  outline: none;
  background:
    rgba(0, 0, 0, 0.2);
  color: #fff;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.hospitalDischargeConfirmField textarea:focus {
  border-color:
    rgba(255, 98, 126, 0.38);
  box-shadow:
    0 0 0 3px
      rgba(255, 78, 111, 0.08);
}

.hospitalDischargeConfirmActions {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.hospitalDischargeConfirmCancel,
.hospitalDischargeConfirmSubmit {
  min-height: 46px;
  padding: 11px 15px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
}

.hospitalDischargeConfirmCancel {
  border: 1px solid
    rgba(255, 255, 255, 0.1);
  background:
    rgba(255, 255, 255, 0.035);
  color:
    rgba(255, 255, 255, 0.7);
}

.hospitalDischargeConfirmSubmit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid
    rgba(255, 111, 135, 0.35);
  background:
    linear-gradient(
      135deg,
      #d63c63,
      #f05275
    );
  color: #fff;
  box-shadow:
    0 13px 30px
      rgba(227, 55, 94, 0.23);
}

.hospitalDischargeConfirmSubmit:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px
      rgba(227, 55, 94, 0.3);
}

.hospitalDischargeConfirmSubmit b {
  font-size: 1rem;
}

@media (max-width: 560px) {
  .hospitalDischargeConfirmModal {
    padding: 25px 18px 18px;
  }

  .hospitalDischargeConfirmActions {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   PREMIUM SERVICES PAGE
===================================================== */

.servicesPremiumPage {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0 130px;
}

.servicesPremiumHero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 92% 15%,
      rgba(168,85,247,0.22),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(35,23,58,0.96),
      rgba(24,16,42,0.97)
    );
  box-shadow:
    0 25px 70px rgba(0,0,0,0.25);
  overflow: hidden;
}

.servicesPremiumHeroContent {
  position: relative;
  z-index: 1;
}

.servicesPremiumEyebrow {
  margin-bottom: 7px;
  color: #bc71ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.servicesPremiumHero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.08;
}

.servicesPremiumHero p {
  max-width: 590px;
  margin: 11px 0 0;
  color: rgba(255,255,255,0.5);
  font-size: 0.93rem;
  line-height: 1.55;
}

.servicesPremiumAddButton {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
  padding: 13px 20px;
  border: 1px solid rgba(211,157,255,0.42);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      #8d42ff,
      #b447ff
    );
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  box-shadow:
    0 14px 35px rgba(168,85,247,0.28);
}

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

.servicesPremiumStats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-top: 16px;
}

.servicesPremiumStat {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.018)
    );
}

.servicesPremiumStat span,
.servicesPremiumStat strong,
.servicesPremiumStat small {
  display: block;
}

.servicesPremiumStat span {
  color: rgba(255,255,255,0.43);
  font-size: 0.78rem;
}

.servicesPremiumStat strong {
  margin-top: 8px;
  color: #fff;
  font-size: 1.7rem;
}

.servicesPremiumStat small {
  margin-top: 4px;
  color: rgba(255,255,255,0.33);
  font-size: 0.7rem;
}

.servicesPremiumStatActive strong {
  color: #4be29c;
}

.servicesPremiumStatPrice strong {
  color: #c287ff;
}

.servicesPremiumControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.servicesPremiumSearchWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(430px,100%);
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  background: rgba(8,5,18,0.42);
}

.servicesPremiumSearchWrap > span {
  color: rgba(255,255,255,0.38);
  font-size: 1.15rem;
}

.servicesPremiumSearchWrap input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
}

.servicesPremiumStatusFilter {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px;
  background: rgba(255,255,255,0.025);
}

.servicesPremiumStatusFilter button {
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,0.48);
  font-weight: 750;
  cursor: pointer;
}

.servicesPremiumStatusFilter button.active {
  background: rgba(168,85,247,0.18);
  color: #d4a4ff;
}

.servicesPremiumCategories {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 4px;
  overflow-x: auto;
}

.servicesPremiumCategory {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
}

.servicesPremiumCategory.active {
  border-color: rgba(179,98,255,0.35);
  background: rgba(168,85,247,0.14);
  color: #dfbdff;
}

.servicesPremiumCategory b {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 0.65rem;
}

.servicesPremiumGrid {
  margin-top: 22px;
}

.servicesPremiumGroup {
  margin-bottom: 28px;
}

.servicesPremiumGroupHead {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.servicesPremiumGroupTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.servicesPremiumGroupTitle > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(
    in srgb,
    var(--service-category-color) 40%,
    transparent
  );
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--service-category-color) 13%,
    transparent
  );
}

.servicesPremiumGroupTitle h2 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

.servicesPremiumGroupTitle p {
  margin: 3px 0 0;
  color: rgba(255,255,255,0.35);
  font-size: 0.69rem;
}

.servicesPremiumGroupLine {
  height: 1px;
  flex: 1;
  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--service-category-color) 25%,
        transparent
      ),
      transparent
    );
}

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

.servicesPremiumCard {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--service-category-color) 10%,
        transparent
      ),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.servicesPremiumCard.inactive {
  opacity: 0.52;
}

.servicesPremiumCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.servicesPremiumCardIcon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(180,105,255,0.18);
  border-radius: 13px;
  background: rgba(168,85,247,0.1);
}

.servicesPremiumCardBody {
  flex: 1;
  padding-top: 13px;
}

.servicesPremiumCardCategory {
  color: #b974ff;
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.servicesPremiumCardBody h3 {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.91);
  font-size: 0.95rem;
  line-height: 1.35;
}

.servicesPremiumCardPrice {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 11px;
}

.servicesPremiumCardPrice strong {
  color: #fff;
  font-size: 1.45rem;
}

.servicesPremiumCardPrice span {
  color: rgba(255,255,255,0.38);
  font-size: 0.72rem;
}

.servicesPremiumCardFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.servicesPremiumCardStatus {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.42);
  font-size: 0.68rem;
}

.servicesPremiumCardStatus i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.servicesPremiumCardStatus.active i {
  background: #4de29f;
  box-shadow: 0 0 12px rgba(77,226,159,0.55);
}

.servicesPremiumCardStatus.inactive i {
  background: #ff6c7d;
}

.servicesPremiumCardActions {
  display: flex;
  gap: 6px;
}

.servicesPremiumCardActions button {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
}

.servicesPremiumCardActions button.danger {
  color: #ff8794;
}

.servicesPremiumSwitch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 23px;
}

.servicesPremiumSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.servicesPremiumSwitch > span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.11);
  cursor: pointer;
  transition: 0.2s;
}

.servicesPremiumSwitch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
  content: "";
  transition: 0.2s;
}

.servicesPremiumSwitch input:checked + span {
  background:
    linear-gradient(
      135deg,
      #7d45ff,
      #ba4cff
    );
}

.servicesPremiumSwitch input:checked + span::after {
  transform: translateX(19px);
  background: #fff;
}

.servicesPremiumEmpty {
  padding: 75px 20px;
  border: 1px dashed rgba(255,255,255,0.09);
  border-radius: 20px;
  text-align: center;
}

.servicesPremiumEmpty > div {
  font-size: 2rem;
}

.servicesPremiumEmpty h3 {
  margin: 10px 0 0;
  color: #fff;
}

.servicesPremiumEmpty p {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.38);
}

.servicesPremiumLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 300px;
  color: #fff;
}

.servicesPremiumLoading > div {
  width: 25px;
  height: 25px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: servicesPremiumSpin 0.8s linear infinite;
}

@keyframes servicesPremiumSpin {
  to {
    transform: rotate(360deg);
  }
}


/* =====================================================
   SERVICE EDITOR MODAL
===================================================== */

.serviceEditorOverlay,
.serviceDeleteOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.serviceEditorBackdrop,
.serviceDeleteBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,2,10,0.86);
  backdrop-filter: blur(18px);
}

.serviceEditorModal {
  position: relative;
  z-index: 1;
  width: min(580px,95vw);
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 25px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168,85,247,0.18),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #211536,
      #120b20
    );
  box-shadow:
    0 35px 100px rgba(0,0,0,0.6);
}

.serviceEditorClose {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 11px;
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
}

.serviceEditorHeader {
  display: flex;
  gap: 14px;
  padding-right: 35px;
}

.serviceEditorIcon {
  display: grid;
  width: 51px;
  height: 51px;
  flex: 0 0 51px;
  place-items: center;
  border: 1px solid rgba(182,103,255,0.22);
  border-radius: 16px;
  background: rgba(168,85,247,0.12);
  color: #d19dff;
  font-size: 1.2rem;
}

.serviceEditorEyebrow {
  color: #b970ff;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.serviceEditorHeader h2 {
  margin: 4px 0 0;
  color: #fff;
}

.serviceEditorHeader p {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.43);
  font-size: 0.8rem;
  line-height: 1.45;
}

.serviceEditorForm {
  margin-top: 22px;
}

.serviceEditorFieldsRow {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 12px;
}

.serviceEditorField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 13px;
}

.serviceEditorField > span {
  color: rgba(255,255,255,0.52);
  font-size: 0.75rem;
  font-weight: 750;
}

.serviceEditorField input,
.serviceEditorField select {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  outline: none;
  background: rgba(0,0,0,0.2);
  color: #fff;
  box-sizing: border-box;
}

.serviceEditorStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
}

.serviceEditorStatus strong,
.serviceEditorStatus span {
  display: block;
}

.serviceEditorStatus strong {
  color: #fff;
  font-size: 0.82rem;
}

.serviceEditorStatus span {
  margin-top: 3px;
  color: rgba(255,255,255,0.37);
  font-size: 0.68rem;
}

.serviceEditorPreview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(181,103,255,0.18);
  border-radius: 15px;
  background:
    linear-gradient(
      135deg,
      rgba(168,85,247,0.1),
      rgba(255,255,255,0.02)
    );
}

.serviceEditorPreviewIcon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 13px;
  background: rgba(168,85,247,0.12);
}

.serviceEditorPreview span,
.serviceEditorPreview strong,
.serviceEditorPreview small {
  display: block;
}

.serviceEditorPreview span {
  color: rgba(255,255,255,0.36);
  font-size: 0.64rem;
}

.serviceEditorPreview strong {
  margin-top: 2px;
  color: #fff;
  font-size: 0.86rem;
}

.serviceEditorPreview small {
  margin-top: 3px;
  color: rgba(255,255,255,0.45);
}

.serviceEditorPreview em {
  font-style: normal;
}

.serviceEditorActions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.serviceEditorCancel,
.serviceEditorSubmit {
  padding: 11px 17px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
}

.serviceEditorCancel {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.65);
}

.serviceEditorSubmit {
  border: 1px solid rgba(191,121,255,0.38);
  background:
    linear-gradient(
      135deg,
      #8942ff,
      #b349ff
    );
  color: #fff;
}

.serviceEditorSubmit:disabled {
  opacity: 0.55;
  cursor: wait;
}


/* =====================================================
   SERVICE DELETE CONFIRM
===================================================== */

.serviceDeleteModal {
  position: relative;
  z-index: 1;
  width: min(430px,94vw);
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,77,105,0.15),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #211432,
      #120b1c
    );
  box-shadow:
    0 35px 100px rgba(0,0,0,0.6);
  text-align: center;
}

.serviceDeleteIcon {
  display: grid;
  width: 61px;
  height: 61px;
  margin: 0 auto 14px;
  place-items: center;
  border: 1px solid rgba(255,93,120,0.22);
  border-radius: 19px;
  background: rgba(255,75,107,0.1);
  font-size: 1.4rem;
}

.serviceDeleteEyebrow {
  color: #ff8798;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.serviceDeleteModal h2 {
  margin: 6px 0 0;
  color: #fff;
}

.serviceDeleteModal > p {
  margin: 8px 0 17px;
  color: rgba(255,255,255,0.43);
  font-size: 0.81rem;
}

.serviceDeleteService {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  text-align: left;
}

.serviceDeleteService > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: rgba(168,85,247,0.1);
}

.serviceDeleteService strong,
.serviceDeleteService small {
  display: block;
}

.serviceDeleteService strong {
  color: #fff;
}

.serviceDeleteService small {
  margin-top: 3px;
  color: rgba(255,255,255,0.39);
}

.serviceDeleteActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 17px;
}

.serviceDeleteCancel,
.serviceDeleteSubmit {
  padding: 11px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
}

.serviceDeleteCancel {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.66);
}

.serviceDeleteSubmit {
  border: 1px solid rgba(255,100,125,0.3);
  background:
    linear-gradient(
      135deg,
      #d73e62,
      #ef5373
    );
  color: #fff;
}

@media (max-width: 900px) {
  .servicesPremiumStats {
    grid-template-columns: repeat(2,1fr);
  }

  .servicesPremiumCards {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 650px) {
  .servicesPremiumPage {
    width: min(100% - 24px,1180px);
  }

  .servicesPremiumHero,
  .servicesPremiumControls {
    flex-direction: column;
    align-items: stretch;
  }

  .servicesPremiumAddButton {
    width: 100%;
  }

  .servicesPremiumCards,
  .servicesPremiumStats,
  .serviceEditorFieldsRow {
    grid-template-columns: 1fr;
  }

  .servicesPremiumStatusFilter {
    overflow-x: auto;
  }

  .serviceEditorModal {
    padding: 23px 17px;
  }
}
/* =====================================================
   VISIT PREMIUM SERVICE PICKER
===================================================== */

.visitServicePickerButton {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 47px;
  padding: 8px 12px;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.09),
      rgba(255, 255, 255, 0.025)
    );
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.visitServicePickerButton:hover {
  border-color:
    rgba(182, 103, 255, 0.34);
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.14),
      rgba(255, 255, 255, 0.035)
    );
}

.visitServicePickerIcon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 10px;
  background:
    rgba(168, 85, 247, 0.13);
}

.visitServicePickerText {
  min-width: 0;
  flex: 1;
}

.visitServicePickerText strong,
.visitServicePickerText small {
  display: block;
}

.visitServicePickerText strong {
  overflow: hidden;
  color: rgba(255,255,255,0.9);
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitServicePickerText small {
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255,255,255,0.38);
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitServicePickerArrow {
  color: rgba(255,255,255,0.42);
}

.visitServicePickerOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.visitServicePickerBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 10, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.visitServicePickerModal {
  position: relative;
  z-index: 1;
  width: min(920px, 95vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px;
  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168, 85, 247, 0.18),
      transparent 37%
    ),
    linear-gradient(
      180deg,
      #211536,
      #120b20
    );
  box-shadow:
    0 35px 110px
      rgba(0, 0, 0, 0.62);
}

.visitServicePickerHeader {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

.visitServicePickerEyebrow {
  color: #b970ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.visitServicePickerHeader h2 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 1.8rem;
}

.visitServicePickerHeader p {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.43);
  font-size: 0.82rem;
}

.visitServicePickerClose {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  border: 1px solid
    rgba(255,255,255,0.09);
  border-radius: 12px;
  background:
    rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.58);
  cursor: pointer;
}

.visitServicePickerSearch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 0 14px;
  border: 1px solid
    rgba(255,255,255,0.09);
  border-radius: 13px;
  background: rgba(0,0,0,0.2);
}

.visitServicePickerSearch span {
  color: rgba(255,255,255,0.4);
}

.visitServicePickerSearch input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
}

.visitServicePickerCategories {
  display: flex;
  gap: 7px;
  margin-top: 13px;
  overflow-x: auto;
}

.visitServicePickerCategories button {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid
    rgba(255,255,255,0.08);
  border-radius: 11px;
  background:
    rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.48);
  cursor: pointer;
}

.visitServicePickerCategories button.active {
  border-color:
    rgba(181,101,255,0.35);
  background:
    rgba(168,85,247,0.14);
  color: #deb8ff;
}

.visitServicePickerCategories b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background:
    rgba(255,255,255,0.06);
  font-size: 0.62rem;
}

.visitServicePickerGrid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 17px;
}

.visitServicePickerCard {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid
    rgba(255,255,255,0.075);
  border-radius: 15px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.visitServicePickerCard:hover {
  border-color:
    rgba(181,101,255,0.32);
  background:
    linear-gradient(
      135deg,
      rgba(168,85,247,0.11),
      rgba(255,255,255,0.02)
    );
  transform: translateY(-1px);
}

.visitServicePickerCardIcon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background:
    rgba(168,85,247,0.11);
}

.visitServicePickerCardMain {
  min-width: 0;
  flex: 1;
}

.visitServicePickerCardMain span,
.visitServicePickerCardMain strong {
  display: block;
}

.visitServicePickerCardMain span {
  color: #b970ff;
  font-size: 0.6rem;
  font-weight: 850;
  text-transform: uppercase;
}

.visitServicePickerCardMain strong {
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255,255,255,0.9);
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitServicePickerCardPrice {
  flex: 0 0 auto;
  text-align: right;
}

.visitServicePickerCardPrice strong,
.visitServicePickerCardPrice span {
  display: block;
}

.visitServicePickerCardPrice strong {
  color: #d19aff;
  font-size: 0.94rem;
}

.visitServicePickerCardPrice span {
  color: rgba(255,255,255,0.34);
  font-size: 0.59rem;
}

.visitServicePickerEmpty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
}

.visitServicePickerEmpty > div {
  font-size: 2rem;
}

.visitServicePickerEmpty strong,
.visitServicePickerEmpty span {
  display: block;
}

.visitServicePickerEmpty strong {
  margin-top: 9px;
  color: #fff;
}

.visitServicePickerEmpty span {
  margin-top: 4px;
  color: rgba(255,255,255,0.38);
}

@media (max-width: 680px) {
  .visitServicePickerGrid {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   PREMIUM STOCK PAGE
===================================================== */

.stockPremiumPage {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0 130px;
}

.stockPremiumHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(168,85,247,.22),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(35,23,58,.97),
      rgba(23,15,40,.98)
    );
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.stockPremiumEyebrow {
  margin-bottom: 7px;
  color: #bd72ff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.stockPremiumHero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem,4vw,2.8rem);
}

.stockPremiumHero p {
  max-width: 580px;
  margin: 11px 0 0;
  color: rgba(255,255,255,.48);
  line-height: 1.55;
}

.stockPremiumAddButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
  padding: 13px 19px;
  border: 1px solid rgba(211,157,255,.42);
  border-radius: 14px;
  background: linear-gradient(135deg,#8d42ff,#b447ff);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(168,85,247,.27);
}

.stockPremiumStats {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
  margin-top: 16px;
}

.stockPremiumStat {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.016)
  );
}

.stockPremiumStat span,
.stockPremiumStat strong,
.stockPremiumStat small {
  display: block;
}

.stockPremiumStat span {
  color: rgba(255,255,255,.42);
  font-size: .75rem;
}

.stockPremiumStat strong {
  margin-top: 8px;
  color: #fff;
  font-size: 1.55rem;
}

.stockPremiumStat small {
  margin-top: 4px;
  color: rgba(255,255,255,.32);
  font-size: .67rem;
}

.stockPremiumStatUnits strong {
  color: #9f79ff;
}

.stockPremiumStatLow strong {
  color: #f5c552;
}

.stockPremiumStatEmpty strong {
  color: #ff6c7d;
}

.stockPremiumStatValue strong {
  color: #55dfa2;
}

.stockPugBrief {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--module-border-strong);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0,
      var(--module-accent-soft),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      var(--module-surface-1),
      var(--module-surface-2)
    );
  box-shadow:
    0 20px 55px var(--module-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.stockPugBriefHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

.stockPugBriefIdentity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.stockPugBriefIcon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid var(--module-border-strong);
  border-radius: 15px;
  background: var(--module-accent-soft);
  color: var(--module-accent-2);
  font-size: 20px;
  box-shadow: 0 0 22px var(--module-accent-glow);
}

.stockPugBriefEyebrow {
  color: var(--module-accent-2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.stockPugBrief h2 {
  margin: 5px 0 0;
  color: var(--module-text);
  font-size: 20px;
  line-height: 1.25;
}

.stockPugBriefIdentity p {
  margin: 5px 0 0;
  color: var(--module-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.stockPugBriefMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, auto));
  gap: 8px;
}

.stockPugBriefMetrics > div {
  min-width: 92px;
  padding: 10px 12px;
  border: 1px solid var(--module-border);
  border-radius: 13px;
  background: var(--module-surface-soft);
}

.stockPugBriefMetrics span,
.stockPugBriefMetrics strong {
  display: block;
}

.stockPugBriefMetrics span {
  color: var(--module-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.stockPugBriefMetrics strong {
  margin-top: 4px;
  color: var(--module-text);
  font-size: 16px;
}

.stockPugBriefSignals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.stockPugSignal {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--module-border);
  border-radius: 14px;
  background: var(--module-surface-soft);
  color: var(--module-text);
  cursor: pointer;
  text-align: left;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.stockPugSignal:hover {
  transform: translateY(-1px);
  border-color: var(--module-border-strong);
  background: var(--module-accent-soft);
}

.stockPugSignalIcon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: var(--module-accent-soft);
  color: var(--module-accent-2);
  font-weight: 900;
}

.stockPugSignal.danger .stockPugSignalIcon {
  background: rgba(255, 83, 111, 0.12);
  color: #ff647d;
}

.stockPugSignal.warning .stockPugSignalIcon {
  background: rgba(244, 183, 64, 0.13);
  color: #e5a629;
}

.stockPugSignalCopy {
  min-width: 0;
}

.stockPugSignalCopy strong,
.stockPugSignalCopy small {
  display: block;
}

.stockPugSignalCopy strong {
  overflow: hidden;
  color: var(--module-text);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stockPugSignalCopy small {
  margin-top: 3px;
  color: var(--module-text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.stockPugSignalAction {
  color: var(--module-accent-2);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.stockPugBriefHealthy {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(71, 207, 143, 0.2);
  border-radius: 14px;
  background: rgba(71, 207, 143, 0.07);
}

.stockPugBriefHealthy > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(71, 207, 143, 0.12);
  color: #45cf8f;
  font-weight: 900;
}

.stockPugBriefHealthy strong,
.stockPugBriefHealthy small {
  display: block;
}

.stockPugBriefHealthy strong {
  color: var(--module-text);
  font-size: 13px;
}

.stockPugBriefHealthy small {
  margin-top: 2px;
  color: var(--module-text-muted);
  font-size: 11px;
}

.stockPremiumControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.stockPremiumSearch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(430px,100%);
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(8,5,18,.42);
}

.stockPremiumSearch span {
  color: rgba(255,255,255,.4);
}

.stockPremiumSearch input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
}

.stockPremiumFilters {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

.stockPremiumFilters button {
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,.47);
  font-weight: 750;
  cursor: pointer;
}

.stockPremiumFilters button.active {
  background: rgba(168,85,247,.18);
  color: #d8adff;
}

.stockPremiumCategories {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
}

.stockPremiumCategories button {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.48);
  cursor: pointer;
}

.stockPremiumCategories button.active {
  border-color: rgba(180,100,255,.35);
  background: rgba(168,85,247,.14);
  color: #dfbbff;
}

.stockPremiumCategories b {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-size: .64rem;
}

.stockPremiumGrid {
  margin-top: 23px;
}

.stockPremiumGroup {
  margin-bottom: 28px;
}

.stockPremiumGroupHead {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.stockPremiumGroupHead > div:last-child {
  height: 1px;
  flex: 1;
  background: linear-gradient(
    90deg,
    rgba(168,85,247,.24),
    transparent
  );
}

.stockPremiumGroupTitle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stockPremiumGroupTitle > span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(177,101,255,.2);
  border-radius: 12px;
  background: rgba(168,85,247,.1);
}

.stockPremiumGroupTitle h2 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

.stockPremiumGroupTitle p {
  margin: 3px 0 0;
  color: rgba(255,255,255,.35);
  font-size: .68rem;
}

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

.stockPremiumCard {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 19px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168,85,247,.08),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.014)
    );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.stockPremiumCard.inactive {
  opacity: .52;
}

.stockPremiumCard.stock-status-critical {
  border-color: rgba(255,177,73,.2);
}

.stockPremiumCard.stock-status-empty {
  border-color: rgba(255,91,112,.2);
}

.stockPremiumCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stockPremiumCardIcon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(180,105,255,.18);
  border-radius: 13px;
  background: rgba(168,85,247,.1);
}

.stockPremiumCardBody {
  flex: 1;
  padding-top: 13px;
}

.stockPremiumCardCategory {
  color: #b974ff;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.stockPremiumCardBody h3 {
  margin: 6px 0 0;
  color: rgba(255,255,255,.92);
  font-size: .98rem;
  line-height: 1.35;
}

.stockPremiumTraceability {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.stockPremiumTraceability > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid var(--module-border);
  border-radius: 999px;
  background: var(--module-surface-soft);
  color: var(--module-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.stockPremiumTraceability b {
  color: var(--module-accent-2);
}

.stockPremiumExpiry.expired {
  border-color: rgba(255, 84, 111, 0.25);
  background: rgba(255, 84, 111, 0.08);
  color: #ff647d;
}

.stockPremiumExpiry.critical {
  border-color: rgba(244, 183, 64, 0.28);
  background: rgba(244, 183, 64, 0.09);
  color: #d99b20;
}

.stockPremiumExpiry.warning {
  border-color: rgba(244, 183, 64, 0.2);
  color: #d3a342;
}

.stockPremiumPrices,
.stockPremiumQuantity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
}

.stockPremiumPrices > div,
.stockPremiumQuantity > div {
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  background: rgba(255,255,255,.022);
}

.stockPremiumPrices span,
.stockPremiumQuantity span {
  display: block;
  color: rgba(255,255,255,.34);
  font-size: .61rem;
}

.stockPremiumPrices strong,
.stockPremiumQuantity strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: .83rem;
}

.stockPremiumQuantity strong {
  font-size: 1.05rem;
}

.stockPremiumQuantity small {
  color: rgba(255,255,255,.38);
  font-size: .62rem;
}

.stockPremiumStatus {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: .69rem;
  font-weight: 750;
}

.stockPremiumStatus i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stockPremiumStatus.good {
  color: #5ce1a6;
}

.stockPremiumStatus.good i {
  background: #4de19c;
  box-shadow: 0 0 11px rgba(77,225,156,.5);
}

.stockPremiumStatus.low {
  color: #edc75f;
}

.stockPremiumStatus.low i {
  background: #eac04c;
}

.stockPremiumStatus.critical {
  color: #ffad62;
}

.stockPremiumStatus.critical i {
  background: #ff9e4d;
}

.stockPremiumStatus.empty {
  color: #ff7b89;
}

.stockPremiumStatus.empty i {
  background: #ff6576;
}

.stockPremiumCardValue {
  margin-top: 8px;
  color: rgba(255,255,255,.35);
  font-size: .64rem;
}

.stockPremiumCardValue strong {
  color: rgba(255,255,255,.68);
}

.stockPremiumCardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 14px;
}

.stockActionButton {
  padding: 9px 8px;
  border-radius: 11px;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}

.stockActionWriteoff {
  border: 1px solid rgba(255,105,123,.2);
  background: rgba(255,82,106,.07);
  color: #ff8795;
}

.stockActionIncome {
  border: 1px solid rgba(81,224,157,.22);
  background: rgba(69,220,151,.08);
  color: #69e2ac;
}

.stockPremiumCardFooter {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.stockPremiumCardFooter button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.48);
  font-size: .68rem;
  cursor: pointer;
}

.stockPremiumCardFooter button.danger {
  color: #ff7888;
}

.stockPremiumSwitch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 23px;
}

.stockPremiumSwitch input {
  position: absolute;
  opacity: 0;
}

.stockPremiumSwitch > span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  cursor: pointer;
  transition: .2s;
}

.stockPremiumSwitch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  content: "";
  transition: .2s;
}

.stockPremiumSwitch input:checked + span {
  background: linear-gradient(135deg,#7d45ff,#ba4cff);
}

.stockPremiumSwitch input:checked + span::after {
  transform: translateX(19px);
  background: #fff;
}

.stockPremiumEmpty {
  padding: 70px 20px;
  border: 1px dashed rgba(255,255,255,.09);
  border-radius: 20px;
  text-align: center;
}

.stockPremiumEmpty > div {
  font-size: 2rem;
}

.stockPremiumEmpty h3 {
  margin: 10px 0 0;
  color: #fff;
}

.stockPremiumEmpty p {
  color: rgba(255,255,255,.38);
}


/* =====================================================
   STOCK MODALS
===================================================== */

.stockEditorOverlay,
.stockAdjustmentOverlay,
.stockDeleteOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.stockEditorBackdrop,
.stockAdjustmentBackdrop,
.stockDeleteBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,2,10,.86);
  backdrop-filter: blur(18px);
}

.stockEditorModal,
.stockAdjustmentModal,
.stockDeleteModal {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 25px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168,85,247,.17),
      transparent 38%
    ),
    linear-gradient(180deg,#211536,#120b20);
  box-shadow: 0 35px 105px rgba(0,0,0,.62);
}

.stockEditorModal {
  width: min(650px,95vw);
  max-height: 92vh;
  padding: 28px;
  overflow-y: auto;
}

.stockEditorClose,
.stockAdjustmentClose {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.55);
  cursor: pointer;
}

.stockEditorHeader {
  display: flex;
  gap: 14px;
  padding-right: 35px;
}

.stockEditorIcon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border: 1px solid rgba(182,103,255,.22);
  border-radius: 16px;
  background: rgba(168,85,247,.12);
  color: #d19dff;
}

.stockEditorEyebrow,
.stockAdjustmentEyebrow,
.stockDeleteEyebrow {
  color: #b970ff;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.stockEditorHeader h2,
.stockAdjustmentModal h2,
.stockDeleteModal h2 {
  margin: 5px 0 0;
  color: #fff;
}

.stockEditorHeader p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.43);
  font-size: .8rem;
}

#stockEditorForm {
  margin-top: 22px;
}

.stockEditorRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stockEditorField,
.stockAdjustmentField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 13px;
}

.stockEditorField > span,
.stockAdjustmentField > span {
  color: rgba(255,255,255,.52);
  font-size: .73rem;
  font-weight: 750;
}

.stockEditorField input,
.stockEditorField select,
.stockAdjustmentField input,
.stockAdjustmentField textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  outline: 0;
  background: rgba(0,0,0,.2);
  color: #fff;
  box-sizing: border-box;
}

.stockEditorStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.stockEditorStatus strong,
.stockEditorStatus span {
  display: block;
}

.stockEditorTraceabilityToggle {
  margin-bottom: 12px;
}

.stockEditorTraceabilityPanel {
  margin-bottom: 13px;
  padding: 14px;
  border: 1px solid var(--module-border);
  border-radius: 14px;
  background: var(--module-surface-soft);
}

.stockEditorTraceabilityPanel.hidden {
  display: none;
}

.stockEditorTraceabilityPanel .stockEditorRow {
  margin: 0;
}

.stockEditorTraceabilityPanel .stockEditorField {
  margin-bottom: 0;
}

.stockEditorTraceabilityPanel > p {
  margin: 10px 0 0;
  color: var(--module-text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.stockEditorStatus strong {
  color: #fff;
  font-size: .82rem;
}

.stockEditorStatus span {
  margin-top: 3px;
  color: rgba(255,255,255,.37);
  font-size: .67rem;
}

.stockEditorPreview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(181,103,255,.18);
  border-radius: 15px;
  background: linear-gradient(
    135deg,
    rgba(168,85,247,.1),
    rgba(255,255,255,.02)
  );
}

.stockEditorPreviewIcon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: rgba(168,85,247,.12);
}

.stockEditorPreview span,
.stockEditorPreview strong,
.stockEditorPreview small {
  display: block;
}

.stockEditorPreview span {
  color: rgba(255,255,255,.36);
  font-size: .63rem;
}

.stockEditorPreview strong {
  margin-top: 2px;
  color: #fff;
}

.stockEditorPreview small {
  margin-top: 3px;
  color: rgba(255,255,255,.43);
}

.stockEditorActions,
.stockAdjustmentActions,
.stockDeleteActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.stockEditorCancel,
.stockEditorSubmit,
.stockAdjustmentCancel,
.stockAdjustmentSubmit,
.stockDeleteCancel,
.stockDeleteSubmit {
  padding: 11px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
}

.stockEditorCancel,
.stockAdjustmentCancel,
.stockDeleteCancel {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.66);
}

.stockEditorSubmit,
.stockAdjustmentSubmit.income {
  border: 1px solid rgba(191,121,255,.38);
  background: linear-gradient(135deg,#8942ff,#b349ff);
  color: #fff;
}

.stockAdjustmentModal {
  width: min(470px,94vw);
  padding: 28px;
  text-align: center;
}

.stockAdjustmentIcon {
  display: grid;
  width: 61px;
  height: 61px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 19px;
  font-size: 1.5rem;
  font-weight: 900;
}

.stockAdjustmentIcon.income {
  border: 1px solid rgba(71,224,154,.22);
  background: rgba(65,221,148,.1);
  color: #67e1aa;
}

.stockAdjustmentIcon.writeoff {
  border: 1px solid rgba(255,91,115,.22);
  background: rgba(255,76,104,.1);
  color: #ff8090;
}

.stockAdjustmentItem,
.stockDeleteItem {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 17px 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  text-align: left;
}

.stockAdjustmentItem > span,
.stockDeleteItem > span {
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border-radius: 12px;
  background: rgba(168,85,247,.1);
}

.stockAdjustmentItem strong,
.stockAdjustmentItem small,
.stockDeleteItem strong,
.stockDeleteItem small {
  display: block;
}

.stockAdjustmentItem strong,
.stockDeleteItem strong {
  color: #fff;
}

.stockAdjustmentItem small,
.stockDeleteItem small {
  margin-top: 3px;
  color: rgba(255,255,255,.4);
}

.stockAdjustmentField {
  text-align: left;
}

.stockAdjustmentResult {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(181,103,255,.15);
  border-radius: 13px;
  background: rgba(168,85,247,.07);
}

.stockAdjustmentResult span {
  color: rgba(255,255,255,.43);
}

.stockAdjustmentResult strong {
  color: #fff;
}

.stockAdjustmentSubmit.writeoff {
  border: 1px solid rgba(255,97,122,.3);
  background: linear-gradient(135deg,#d63d61,#ef5273);
  color: #fff;
}

.stockDeleteModal {
  width: min(430px,94vw);
  padding: 28px;
  text-align: center;
}

.stockDeleteIcon {
  display: grid;
  width: 61px;
  height: 61px;
  margin: 0 auto 14px;
  place-items: center;
  border: 1px solid rgba(255,93,120,.22);
  border-radius: 19px;
  background: rgba(255,75,107,.1);
  font-size: 1.4rem;
}

.stockDeleteModal > p {
  color: rgba(255,255,255,.43);
  font-size: .8rem;
  line-height: 1.45;
}

.stockDeleteSubmit {
  border: 1px solid rgba(255,100,125,.3);
  background: linear-gradient(135deg,#d73e62,#ef5373);
  color: #fff;
}

@media (max-width: 1050px) {
  .stockPremiumStats {
    grid-template-columns: repeat(3,1fr);
  }

  .stockPremiumCards {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

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

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

@media (max-width: 700px) {
  .stockPremiumPage {
    width: min(100% - 24px,1180px);
  }

  .stockPremiumHero,
  .stockPremiumControls {
    flex-direction: column;
    align-items: stretch;
  }

  .stockPremiumAddButton {
    width: 100%;
  }

  .stockPremiumStats,
  .stockPremiumCards,
  .stockEditorRow {
    grid-template-columns: 1fr;
  }

  .stockPremiumFilters {
    overflow-x: auto;
  }

  .stockEditorModal {
    padding: 23px 17px;
  }

  .stockPugBrief {
    padding: 17px;
  }

  .stockPugBriefIdentity {
    align-items: flex-start;
  }

  .stockPugBriefMetrics,
  .stockPugBriefSignals {
    grid-template-columns: 1fr;
  }

  .stockPugSignal {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .stockPugSignalAction {
    grid-column: 2;
  }
}
/* =====================================================
   STOCK FILTERS — CLEAN PREMIUM
===================================================== */

.stockAdvancedFilters {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(220px, 320px));
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid
    rgba(255, 255, 255, 0.075);
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012)
    );
}

.stockAdvancedFilter {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.stockAdvancedFilter > span {
  color:
    rgba(255, 255, 255, 0.44);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.stockSelectWrap {
  position: relative;
  min-width: 0;
}

.stockPremiumSelect {
  width: 100%;
  height: 43px;
  padding: 0 42px 0 13px;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(
      135deg,
      rgba(20, 12, 37, 0.98),
      rgba(12, 7, 25, 0.98)
    );
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.stockPremiumSelect:hover {
  border-color:
    rgba(180, 103, 255, 0.38);
}

.stockPremiumSelect:focus {
  border-color:
    rgba(181, 103, 255, 0.72);
  box-shadow:
    0 0 0 3px
    rgba(168, 85, 247, 0.13);
}

.stockPremiumSelect option {
  background: #1a1029;
  color: #ffffff;
}

.stockSelectArrow {
  position: absolute;
  top: 50%;
  right: 14px;
  color:
    rgba(211, 167, 255, 0.72);
  font-size: 1rem;
  pointer-events: none;
  transform: translateY(-55%);
}


/* Группы и категории */

.stockPremiumGroupFilters,
.stockPremiumCategories {
  display: flex;
  gap: 8px;
  padding: 3px 0 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.stockPremiumGroupFilters {
  margin-top: 16px;
}

.stockPremiumCategories {
  margin-top: 9px;
}

.stockPremiumGroupFilters::-webkit-scrollbar,
.stockPremiumCategories::-webkit-scrollbar {
  display: none;
}

.stockPremiumGroupFilters button,
.stockPremiumCategories button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid
    rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.038),
      rgba(255, 255, 255, 0.014)
    );
  color:
    rgba(255, 255, 255, 0.54);
  font-size: 0.72rem;
  font-weight: 760;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.stockPremiumGroupFilters button:hover,
.stockPremiumCategories button:hover {
  border-color:
    rgba(177, 96, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.stockPremiumGroupFilters button.active,
.stockPremiumCategories button.active {
  border-color:
    rgba(202, 145, 255, 0.48);
  background:
    linear-gradient(
      135deg,
      rgba(159, 79, 255, 0.32),
      rgba(191, 79, 255, 0.17)
    );
  color: #f1dcff;
  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.07),
    0 9px 24px
    rgba(139, 63, 233, 0.12);
}

.stockPremiumGroupFilters button b,
.stockPremiumCategories button b {
  display: grid;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.07);
  color:
    rgba(255, 255, 255, 0.74);
  font-size: 0.61rem;
}


/* Верхний статусный переключатель */

.stockPremiumFilters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid
    rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background:
    rgba(255, 255, 255, 0.025);
}

.stockPremiumFilters button {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.47);
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.stockPremiumFilters button:hover {
  color:
    rgba(255, 255, 255, 0.86);
}

.stockPremiumFilters button.active {
  background:
    linear-gradient(
      135deg,
      rgba(145, 71, 241, 0.63),
      rgba(180, 70, 242, 0.43)
    );
  color: #ffffff;
  box-shadow:
    0 7px 18px
    rgba(144, 60, 224, 0.2);
}


/* Карточные характеристики */

.stockPremiumProperties {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.stockPremiumProperties > span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid
    rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background:
    rgba(255, 255, 255, 0.022);
  color:
    rgba(255, 255, 255, 0.68);
  font-size: 0.64rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stockPremiumProperties b {
  display: block;
  margin-bottom: 4px;
  color:
    rgba(255, 255, 255, 0.3);
  font-size: 0.53rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}


/* Один элемент в строке редактора */

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

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

  .stockPremiumProperties {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   VISIT PAYMENT STATUS
   ========================================================= */

.visitPaymentState[hidden],
.visitPaymentButton[hidden] {
  display: none !important;
}

.visitPaymentState {
  position: relative;
  z-index: 1;

  padding: 12px;
  margin: 3px 0 8px;

  border: 1px solid
    var(--finance-border);

  border-radius: 14px;

  background:
    var(--finance-surface-soft);
}

.visitPaymentStateTop,
.visitPaymentStateMoney {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.visitPaymentStateTop {
  padding-bottom: 10px;
  margin-bottom: 10px;

  border-bottom: 1px solid
    var(--finance-border);
}

.visitPaymentStateTop > span,
.visitPaymentStateMoney span {
  display: block;

  font-size: 8px;

  color:
    var(--finance-text-muted);
}

.visitPaymentStateTop b,
.visitPaymentStatus {
  padding: 5px 8px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 8px;
  font-weight: 900;
}

.visitPaymentStateMoney > div:last-child {
  text-align: right;
}

.visitPaymentStateMoney strong {
  display: block;

  margin-top: 4px;

  font-size: 11px;

  color: var(--finance-text);
}

.visitPaymentStateMoney
> div:last-child
strong {
  color: var(--finance-accent-2);
}


/* Статусы оплаты */

.is-unpaid {
  border-color:
    rgba(255, 105, 128, 0.2)
    !important;

  background:
    rgba(255, 75, 105, 0.08)
    !important;

  color: #ff8b9d
    !important;
}

.is-partial {
  border-color:
    rgba(255, 194, 73, 0.22)
    !important;

  background:
    rgba(255, 181, 45, 0.08)
    !important;

  color: #ffd06b
    !important;
}

.is-paid {
  border-color:
    rgba(78, 224, 145, 0.22)
    !important;

  background:
    rgba(48, 206, 118, 0.08)
    !important;

  color: #72e6a7
    !important;
}

.is-refunded,
.is-cancelled {
  border-color:
    rgba(255, 255, 255, 0.1)
    !important;

  background:
    rgba(255, 255, 255, 0.04)
    !important;

  color:
    rgba(255, 255, 255, 0.6)
    !important;
}


/* Кнопка оплаты */

.visitPaymentButton {
  position: relative;
  z-index: 1;

  display: flex;

  width: 100%;
  min-height: 48px;

  align-items: center;
  justify-content: center;
  gap: 8px;

  margin: 9px 0 3px;

  cursor: pointer;

  border: 1px solid
    rgba(99, 229, 165, 0.3);

  border-radius: 13px;

  background:
    radial-gradient(
      circle at top left,
      rgba(105, 255, 184, 0.13),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(37, 178, 108, 0.18),
      rgba(20, 93, 68, 0.16)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.08);

  color: #83f0b5;

  font: inherit;
  font-size: 11px;
  font-weight: 900;

  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.visitPaymentButton:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.08);

  box-shadow:
    0 14px 28px
    rgba(29, 175, 102, 0.15);
}

.visitPaymentButton.is-paid {
  cursor: default;

  border-color:
    rgba(78, 224, 145, 0.18);

  background:
    rgba(48, 206, 118, 0.07);

  box-shadow: none;
}
/* =========================================================
   VISIT PAYMENT MODAL
   ========================================================= */

.visitPaymentModalOpen {
  overflow: hidden;
}

.visitPaymentOverlay {
  position: fixed;
  z-index: 10050;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 24px;
}

.visitPaymentBackdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(4, 2, 10, 0.78);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

.visitPaymentModal {
  position: relative;

  width: min(
    760px,
    100%
  );

  max-height: min(
    860px,
    calc(100vh - 48px)
  );

  overflow: auto;

  border: 1px solid
    rgba(190, 111, 255, 0.22);

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(156, 74, 238, 0.2),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(24, 15, 43, 0.99),
      rgba(8, 6, 18, 0.99)
    );

  box-shadow:
    0 42px 110px
    rgba(0, 0, 0, 0.65),
    inset 0 1px 0
    rgba(255, 255, 255, 0.06);

  color: #ffffff;
}


/* Заголовок */

.visitPaymentHeader {
  display: grid;

  grid-template-columns:
    48px
    1fr
    38px;

  gap: 14px;

  align-items: center;

  padding: 22px 24px;

  border-bottom: 1px solid
    rgba(255, 255, 255, 0.07);
}

.visitPaymentHeaderIcon {
  display: grid;

  width: 48px;
  height: 48px;

  place-items: center;

  border: 1px solid
    rgba(190, 111, 255, 0.2);

  border-radius: 15px;

  background:
    rgba(147, 70, 232, 0.1);

  font-size: 20px;
}

.visitPaymentEyebrow {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;

  color: #bd78ff;
}

.visitPaymentHeader h2 {
  margin: 0;

  font-size: 20px;
  letter-spacing: -0.02em;
}

.visitPaymentHeader p {
  margin: 5px 0 0;

  font-size: 9px;

  color:
    rgba(255, 255, 255, 0.4);
}

.visitPaymentClose {
  display: grid;

  width: 36px;
  height: 36px;

  cursor: pointer;

  place-items: center;

  border: 1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.035);

  color:
    rgba(255, 255, 255, 0.58);
}

.visitPaymentClose:hover {
  background:
    rgba(255, 255, 255, 0.07);

  color: #ffffff;
}

.visitPaymentContent {
  padding: 22px 24px 24px;
}


/* Финансовая сводка */

.visitPaymentOverview {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-bottom: 18px;
}

.visitPaymentOverview > div {
  padding: 14px;

  border: 1px solid
    rgba(255, 255, 255, 0.065);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.025);
}

.visitPaymentOverview span {
  display: block;

  margin-bottom: 7px;

  font-size: 8px;
  font-weight: 800;

  color:
    rgba(255, 255, 255, 0.4);
}

.visitPaymentOverview strong {
  font-size: 16px;
}

.visitPaymentRemainingCard {
  border-color:
    rgba(190, 111, 255, 0.16)
    !important;

  background:
    rgba(147, 70, 232, 0.07)
    !important;
}

.visitPaymentRemainingCard strong {
  color: #ce8dff;
}

.visitPaymentStatus {
  position: absolute;

  top: -8px;
  right: -8px;
}


/* Форма оплаты */

.visitPaymentForm,
.visitPaymentHistory,
.visitPaymentSuccess {
  padding: 17px;

  border: 1px solid
    rgba(255, 255, 255, 0.07);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.022);
}

.visitPaymentAmountField > span,
.visitPaymentMethodsLabel {
  display: block;

  margin-bottom: 7px;

  font-size: 8px;
  font-weight: 800;

  color:
    rgba(255, 255, 255, 0.4);
}

.visitPaymentAmountField > div {
  display: flex;
  align-items: center;

  border: 1px solid
    rgba(188, 104, 255, 0.2);

  border-radius: 14px;

  background:
    rgba(8, 5, 16, 0.48);
}

.visitPaymentAmountField input {
  width: 100%;

  padding: 14px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #ffffff;

  font: inherit;
  font-size: 20px;
  font-weight: 900;
}

.visitPaymentAmountField b {
  padding-right: 15px;

  color: #c98cff;
}


/* Быстрые суммы */

.visitPaymentQuickAmounts {
  display: flex;

  gap: 8px;

  margin: 9px 0 16px;
}

.visitPaymentQuickAmounts button {
  padding: 7px 10px;

  cursor: pointer;

  border: 1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.035);

  color:
    rgba(255, 255, 255, 0.62);

  font: inherit;
  font-size: 8px;
  font-weight: 800;
}

.visitPaymentQuickAmounts button:hover {
  border-color:
    rgba(190, 111, 255, 0.22);

  background:
    rgba(147, 70, 232, 0.09);

  color: #deb2ff;
}


/* Способы оплаты */

.visitPaymentMethods {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 8px;
}

.visitPaymentMethods button {
  display: flex;

  min-height: 70px;

  cursor: pointer;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border: 1px solid
    rgba(255, 255, 255, 0.07);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    rgba(255, 255, 255, 0.58);

  font: inherit;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.visitPaymentMethods button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(190, 111, 255, 0.2);
}

.visitPaymentMethods button span {
  font-size: 17px;
}

.visitPaymentMethods button b {
  font-size: 8px;
}

.visitPaymentMethods button.active {
  border-color:
    rgba(190, 111, 255, 0.34);

  background:
    rgba(147, 70, 232, 0.12);

  box-shadow:
    inset 0 0 0 1px
    rgba(190, 111, 255, 0.08);

  color: #e1b9ff;
}


/* Провести оплату */

.visitPaymentSubmit {
  display: flex;

  width: 100%;
  min-height: 50px;

  align-items: center;
  justify-content: space-between;

  margin-top: 14px;
  padding: 0 17px;

  cursor: pointer;

  border: 1px solid
    rgba(220, 175, 255, 0.25);

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #a94dff,
      #7139db
    );

  box-shadow:
    0 15px 32px
    rgba(111, 44, 190, 0.28),
    inset 0 1px 0
    rgba(255, 255, 255, 0.16);

  color: #ffffff;

  font: inherit;
  font-size: 10px;
  font-weight: 900;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.visitPaymentSubmit:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.08);
}

.visitPaymentSubmit:disabled {
  cursor: wait;

  opacity: 0.68;

  transform: none;
}


/* История транзакций */

.visitPaymentHistory {
  margin-top: 14px;
}

.visitPaymentHistoryHead {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 11px;
}

.visitPaymentHistoryHead span,
.visitPaymentHistoryHead strong {
  display: block;
}

.visitPaymentHistoryHead span {
  margin-bottom: 4px;

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.12em;

  color: #b66dff;
}

.visitPaymentHistoryHead strong {
  font-size: 11px;
}

.visitPaymentHistoryHead > b {
  display: grid;

  width: 26px;
  height: 26px;

  place-items: center;

  border-radius: 8px;

  background:
    rgba(147, 70, 232, 0.1);

  font-size: 9px;

  color: #c989ff;
}

.visitPaymentHistoryList {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.visitPaymentHistoryItem {
  display: grid;

  grid-template-columns:
    34px
    1fr
    auto;

  gap: 10px;

  align-items: center;

  padding: 10px;

  border: 1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.018);
}

.visitPaymentHistoryIcon {
  display: grid;

  width: 34px;
  height: 34px;

  place-items: center;

  border-radius: 10px;

  background:
    rgba(147, 70, 232, 0.09);

  font-size: 14px;
}

.visitPaymentHistoryMain strong,
.visitPaymentHistoryMain span,
.visitPaymentHistoryAmount strong,
.visitPaymentHistoryAmount span {
  display: block;
}

.visitPaymentHistoryMain strong,
.visitPaymentHistoryAmount strong {
  font-size: 9px;
}

.visitPaymentHistoryMain span,
.visitPaymentHistoryAmount span {
  margin-top: 4px;

  font-size: 7px;

  color:
    rgba(255, 255, 255, 0.35);
}

.visitPaymentHistoryAmount {
  text-align: right;
}

.visitPaymentHistoryAmount strong {
  color: #74e9a9;
}

.visitPaymentHistoryEmpty {
  padding: 18px;

  text-align: center;

  font-size: 9px;

  color:
    rgba(255, 255, 255, 0.34);
}


/* Полностью оплачено */

.visitPaymentSuccess {
  display: flex;

  flex-direction: column;
  align-items: center;

  margin-bottom: 14px;
  padding: 24px;

  text-align: center;
}

.visitPaymentSuccess div {
  display: grid;

  width: 48px;
  height: 48px;

  margin-bottom: 11px;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(48, 206, 118, 0.12);

  color: #72e6a7;

  font-size: 20px;
}

.visitPaymentSuccess strong {
  font-size: 13px;
}

.visitPaymentSuccess span {
  margin-top: 6px;

  font-size: 9px;

  color:
    rgba(255, 255, 255, 0.4);
}


/* Загрузка */

.visitPaymentLoading {
  display: flex;

  min-height: 260px;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 13px;

  color:
    rgba(255, 255, 255, 0.64);

  font-size: 11px;
}

.visitPaymentSpinner {
  width: 30px;
  height: 30px;

  border: 3px solid
    rgba(255, 255, 255, 0.08);

  border-top-color:
    #b760ff;

  border-radius: 50%;

  animation:
    visitPaymentSpin
    0.8s
    linear
    infinite;
}

@keyframes visitPaymentSpin {
  to {
    transform:
      rotate(360deg);
  }
}


/* Адаптация */

@media (
  max-width: 650px
) {
  .visitPaymentOverlay {
    padding: 10px;
  }

  .visitPaymentModal {
    max-height:
      calc(100vh - 20px);

    border-radius: 20px;
  }

  .visitPaymentHeader,
  .visitPaymentContent {
    padding: 17px;
  }

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

  .visitPaymentMethods {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}
/* =========================================================
   FINANCE DASHBOARD
   ========================================================= */

.financeDashboard {
  width: min(1480px, calc(100% - 36px));
  margin: 0 auto;
  padding: 34px 0 150px;
  color: #fff;
}

.financePageLoading,
.financeLoadError {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.58);
}

.financeLoadError > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 100, 126, 0.24);
  border-radius: 17px;
  background: rgba(255, 71, 103, 0.09);
  color: #ff8297;
  font-size: 24px;
  font-weight: 900;
}

.financeLoadError h2,
.financeLoadError p {
  margin: 0;
}

.financeLoadError p {
  color: rgba(255, 255, 255, 0.38);
}

.financeLoadError button,
.financeRefreshButton {
  min-height: 40px;
  padding: 0 15px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.financeHero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 32px;
  overflow: hidden;
  border: 1px solid rgba(184, 101, 255, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 82% 10%,
      rgba(169, 76, 255, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 5% 100%,
      rgba(92, 58, 198, 0.18),
      transparent 40%
    ),
    linear-gradient(
      140deg,
      rgba(34, 20, 58, 0.97),
      rgba(13, 8, 26, 0.98)
    );
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.financeHero::after {
  content: "₴";
  position: absolute;
  top: -70px;
  right: 5%;
  color: rgba(255, 255, 255, 0.025);
  font-size: 230px;
  font-weight: 950;
  pointer-events: none;
}

.financeHero > div {
  position: relative;
  z-index: 1;
}

.financeEyebrow,
.financePanelHead span,
.financeInsightPanel > div:last-child > span {
  display: block;
  margin-bottom: 7px;
  color: #be73ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.financeHero h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.financeHero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  line-height: 1.55;
}

.financeHeroActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.financePresetSwitch {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(5, 3, 12, 0.3);
}

.financePresetSwitch button {
  min-height: 34px;
  padding: 0 13px;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
}

.financePresetSwitch button.active {
  background: linear-gradient(
    135deg,
    rgba(174, 76, 255, 0.9),
    rgba(105, 51, 215, 0.9)
  );
  box-shadow: 0 8px 20px rgba(119, 50, 211, 0.25);
  color: #fff;
}

.financeDateRange {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.022);
}

.financeDateRange label span {
  display: block;
  margin: 0 0 7px 2px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 8px;
  font-weight: 800;
}

.financeDateRange input,
.financeDateRange button {
  width: 100%;
  min-height: 42px;
  border-radius: 11px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

.financeDateRange input {
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  outline: 0;
  background: rgba(7, 4, 15, 0.44);
  color: rgba(255, 255, 255, 0.78);
  color-scheme: dark;
}

.financeDateRange button {
  padding: 0 18px;
  cursor: pointer;
  border: 1px solid rgba(191, 119, 255, 0.24);
  background: rgba(147, 70, 232, 0.12);
  color: #d7a5ff;
}

.financeKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.financeKpiCard,
.financePanel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(151, 74, 225, 0.08),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(23, 15, 39, 0.94),
      rgba(10, 7, 20, 0.96)
    );
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.financeKpiCard {
  min-height: 154px;
  padding: 18px;
  border-radius: 19px;
}

.financeKpiCard::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -55px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(
    --finance-kpi-glow,
    rgba(167, 82, 255, 0.12)
  );
  filter: blur(22px);
}

.financeKpiCard.is-revenue {
  --finance-kpi-color: #8af0b6;
  --finance-kpi-glow: rgba(58, 219, 135, 0.15);
}

.financeKpiCard.is-profit {
  --finance-kpi-color: #c888ff;
  --finance-kpi-glow: rgba(164, 72, 255, 0.18);
}

.financeKpiCard.is-check {
  --finance-kpi-color: #79bfff;
  --finance-kpi-glow: rgba(67, 157, 255, 0.15);
}

.financeKpiCard.is-debt {
  --finance-kpi-color: #ffca66;
  --finance-kpi-glow: rgba(255, 174, 55, 0.16);
}

.financeKpiIcon {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 15px;
  place-items: center;
  border: 1px solid
    color-mix(
      in srgb,
      var(--finance-kpi-color) 24%,
      transparent
    );
  border-radius: 10px;
  background:
    color-mix(
      in srgb,
      var(--finance-kpi-color) 9%,
      transparent
    );
  color: var(--finance-kpi-color);
  font-size: 14px;
  font-weight: 900;
}

.financeKpiCard > span,
.financeKpiCard > strong,
.financeKpiCard > small {
  position: relative;
  z-index: 1;
  display: block;
}

.financeKpiCard > span {
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  font-weight: 750;
}

.financeKpiCard > strong {
  color: var(--finance-kpi-color);
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.financeKpiCard > small {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 8px;
}

.financeMainGrid,
.financeSecondaryGrid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.financeMainGrid {
  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(300px, 0.75fr);
}

.financeSecondaryGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.financePanel {
  padding: 20px;
  border-radius: 21px;
}

.financePanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.financePanelHead h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 880;
}

.financePanelHead > strong {
  color: #c989ff;
  font-size: 20px;
  font-weight: 900;
}

.financePanelHead > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(147, 70, 232, 0.12);
  color: #c989ff;
  font-size: 10px;
}

.financeChartCanvas svg {
  display: block;
  width: 100%;
  height: 235px;
  overflow: visible;
}

.financeChartCanvas svg > line {
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
  stroke-dasharray: 5 7;
}

.financeChartArea {
  fill: url(#financeAreaGradient);
}

.financeChartLine {
  fill: none;
  stroke: #bd70ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(
    0 8px 10px rgba(174, 84, 255, 0.3)
  );
}

.financeChartPoints circle {
  fill: #0e091c;
  stroke: #d19aff;
  stroke-width: 3;
}

.financeChartLabels {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 8px;
}

.financeChartEmpty {
  display: flex;
  min-height: 235px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.financeChartEmpty > span {
  color: #af65f5;
  font-size: 35px;
}

.financeChartEmpty strong {
  margin-top: 8px;
  font-size: 12px;
}

.financeChartEmpty p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.32);
  font-size: 9px;
}

.financeMethodsVisual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  padding-top: 4px;
}

.financeDonut {
  display: grid;
  width: 178px;
  height: 178px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    #63e1a0 0 var(--cash),
    #a961ff var(--cash) var(--card),
    #55b9ff var(--card) 100%
  );
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

.financeDonut::before {
  content: "";
  grid-area: 1 / 1;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #100a1d;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.45);
}

.financeDonut > div {
  z-index: 1;
  grid-area: 1 / 1;
  text-align: center;
}

.financeDonut strong,
.financeDonut span {
  display: block;
}

.financeDonut strong {
  font-size: 17px;
  font-weight: 900;
}

.financeDonut span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.32);
  font-size: 8px;
}

.financeMethodsLegend {
  width: 100%;
}

.financeMethodsLegend > div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.financeMethodsLegend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.financeMethodsLegend i.cash {
  background: #63e1a0;
}

.financeMethodsLegend i.card {
  background: #a961ff;
}

.financeMethodsLegend i.transfer {
  background: #55b9ff;
}

.financeMethodsLegend span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 9px;
}

.financeMethodsLegend strong {
  font-size: 10px;
}

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

.financeDebtNumbers > div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
}

.financeDebtNumbers span,
.financeDebtNumbers strong {
  display: block;
}

.financeDebtNumbers span {
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 8px;
}

.financeDebtNumbers strong {
  font-size: 13px;
}

.financeDebtNumbers > div:last-child strong {
  color: #ffcc6d;
}

.financeProgress {
  height: 7px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.financeProgress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #6fe5a6,
    #b25cff
  );
  box-shadow: 0 0 16px rgba(113, 225, 167, 0.3);
}

.financeInsightPanel {
  display: flex;
  align-items: center;
  gap: 15px;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(164, 78, 255, 0.18),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(30, 17, 51, 0.96),
      rgba(13, 8, 26, 0.98)
    );
}

.financeInsightIcon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(200, 135, 255, 0.22);
  border-radius: 15px;
  background: rgba(151, 74, 232, 0.11);
  box-shadow: 0 12px 28px rgba(106, 45, 184, 0.18);
  color: #d8a7ff;
  font-size: 20px;
}

.financeInsightPanel h2 {
  margin: 0;
  font-size: 14px;
}

.financeInsightPanel p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  line-height: 1.55;
}

.financeTransactionsPanel {
  margin-top: 12px;
}

.financeTransactionsList {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.financeTransactionRow {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.018);
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.financeTransactionRow:hover {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.032);
}

.financeTransactionIcon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 900;
}

.financeTransactionIcon.is-income {
  background: rgba(48, 206, 118, 0.1);
  color: #72e6a7;
}

.financeTransactionIcon.is-outcome {
  background: rgba(255, 71, 103, 0.1);
  color: #ff8297;
}

.financeTransactionMain strong,
.financeTransactionMain span,
.financeTransactionAmount strong,
.financeTransactionAmount span {
  display: block;
}

.financeTransactionMain strong,
.financeTransactionAmount strong {
  font-size: 10px;
}

.financeTransactionMain span,
.financeTransactionAmount span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.32);
  font-size: 8px;
}

.financeTransactionAmount {
  text-align: right;
}

.financeTransactionAmount.is-income strong {
  color: #72e6a7;
}

.financeTransactionAmount.is-outcome strong {
  color: #ff8297;
}

.financeTransactionsEmpty {
  padding: 28px;
  text-align: center;
  color: rgba(255, 255, 255, 0.33);
  font-size: 10px;
}

@media (max-width: 1100px) {
  .financeKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financeMainGrid,
  .financeSecondaryGrid {
    grid-template-columns: 1fr;
  }

  .financeMethodsVisual {
    flex-direction: row;
  }
}

@media (max-width: 760px) {
  .financeDashboard {
    width: min(100% - 20px, 1480px);
    padding-top: 18px;
  }

  .financeHero {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }

  .financeHeroActions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .financePresetSwitch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .financeDateRange,
  .financeKpiGrid,
  .financeDebtNumbers {
    grid-template-columns: 1fr;
  }

  .financeMethodsVisual {
    flex-direction: column;
  }

  .financeTransactionRow {
    grid-template-columns: 36px 1fr;
  }

  .financeTransactionAmount {
    grid-column: 2;
    text-align: left;
  }
}
/* FINANCE CASHFLOW CHART */

.financeCashflowLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 8px 6px;
}

.financeCashflowLegend span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  font-weight: 750;
}

.financeCashflowLegend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.financeCashflowLegend i.is-income {
  background: #63e1a0;
  box-shadow: 0 0 10px rgba(99, 225, 160, 0.35);
}

.financeCashflowLegend i.is-outcome {
  background: #ff738c;
  box-shadow: 0 0 10px rgba(255, 115, 140, 0.3);
}

.financeCashflowLegend i.is-net {
  background: #bd70ff;
  box-shadow: 0 0 10px rgba(189, 112, 255, 0.35);
}

.financeCashflowGrid {
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
  stroke-dasharray: 5 7;
}

.financeCashflowZeroLine {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
}

.financeCashflowAxisLabel,
.financeCashflowDateLabel {
  fill: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  font-weight: 700;
}

.financeIncomeBar {
  fill: url("#financeIncomeGradient");
  fill: #63e1a0;
  opacity: 0.86;
  filter: drop-shadow(
    0 6px 9px rgba(61, 213, 132, 0.2)
  );
}

.financeOutcomeBar {
  fill: #ff738c;
  opacity: 0.82;
  filter: drop-shadow(
    0 6px 9px rgba(255, 91, 119, 0.18)
  );
}

.financeNetLine {
  fill: none;
  stroke: #bd70ff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(
    0 5px 8px rgba(189, 112, 255, 0.32)
  );
}

.financeNetPoint {
  fill: #100a1d;
  stroke: #d49bff;
  stroke-width: 3;
  filter: drop-shadow(
    0 4px 7px rgba(189, 112, 255, 0.35)
  );
}
/* =========================================================
   FINANCE EXPENSE MODAL
   ========================================================= */

.financeHeroActions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.financeAddExpenseButton {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 17px;
  cursor: pointer;
  border: 1px solid rgba(255, 112, 139, 0.26);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 84, 116, 0.18),
      rgba(155, 55, 115, 0.13)
    );
  box-shadow:
    0 14px 30px rgba(94, 18, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: #ff9bad;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.financeAddExpenseButton:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 130, 153, 0.42);
  background:
    linear-gradient(
      135deg,
      rgba(255, 84, 116, 0.26),
      rgba(155, 55, 115, 0.2)
    );
}

.financeAddExpenseButton span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 112, 139, 0.12);
  font-size: 15px;
  line-height: 1;
}

body.financeExpenseModalOpen {
  overflow: hidden;
}

.financeExpenseOverlay {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.financeExpenseBackdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(139, 62, 220, 0.15),
      transparent 38%
    ),
    rgba(3, 2, 10, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.financeExpenseModal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(197, 119, 255, 0.2);
  border-radius: 25px;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(170, 75, 255, 0.18),
      transparent 35%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(255, 82, 119, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(29, 17, 49, 0.99),
      rgba(10, 7, 20, 0.99)
    );
  box-shadow:
    0 45px 110px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: #fff;
  animation:
    financeExpenseAppear
    0.22s ease-out;
}

.financeRefundModal {
  width: min(620px, 100%);
}

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

.financeRefundSummary > div {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    rgba(255, 255, 255, 0.035);
}

.financeRefundSummary span {
  color:
    rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 700;
}

.financeRefundSummary strong {
  color: #fff;
  font-size: 20px;
  letter-spacing: -0.02em;
}

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

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.financeExpenseModal::-webkit-scrollbar {
  width: 7px;
}

.financeExpenseModal::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(187, 105, 255, 0.25);
}

.financeExpenseHeader {
  display: grid;
  grid-template-columns: 48px 1fr 40px;
  gap: 14px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.financeExpenseHeaderIcon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 112, 139, 0.24);
  border-radius: 15px;
  background: rgba(255, 75, 110, 0.1);
  box-shadow: 0 12px 28px rgba(123, 25, 68, 0.15);
  color: #ff8fa4;
  font-size: 24px;
  font-weight: 900;
}

.financeExpenseHeader > div:nth-child(2) > span {
  display: block;
  margin-bottom: 5px;
  color: #c47cff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.financeExpenseHeader h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.financeExpenseHeader p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: 9px;
  line-height: 1.45;
}

.financeExpenseClose {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.45);
  font: inherit;
  font-size: 13px;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.financeExpenseClose:hover {
  background: rgba(255, 82, 119, 0.1);
  color: #ff8fa4;
}

.financeExpenseForm {
  padding: 22px 24px 24px;
}

.financeExpenseError {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 89, 120, 0.22);
  border-radius: 11px;
  background: rgba(255, 63, 99, 0.08);
  color: #ff9bad;
  font-size: 9px;
  font-weight: 750;
}

.financeExpenseAmountBlock {
  margin-bottom: 17px;
  padding: 16px;
  border: 1px solid rgba(255, 112, 139, 0.13);
  border-radius: 17px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 86, 120, 0.09),
      transparent 44%
    ),
    rgba(255, 255, 255, 0.018);
}

.financeExpenseAmountBlock label > span,
.financeExpenseField > span {
  display: block;
  margin: 0 0 8px 2px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 8px;
  font-weight: 800;
}

.financeExpenseAmountInput {
  position: relative;
}

.financeExpenseAmountInput input {
  width: 100%;
  height: 64px;
  padding: 0 58px 0 17px;
  border: 1px solid rgba(255, 112, 139, 0.18);
  border-radius: 14px;
  outline: 0;
  background: rgba(4, 3, 11, 0.42);
  color: #ffb1bf;
  font: inherit;
  font-size: 29px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.financeExpenseAmountInput input:focus {
  border-color: rgba(255, 125, 150, 0.5);
  box-shadow:
    0 0 0 3px rgba(255, 91, 124, 0.07);
}

.financeExpenseAmountInput b {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: #ff8fa4;
  font-size: 19px;
}

.financeExpenseGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.financeExpenseField {
  display: block;
}

.financeExpenseWide {
  margin-top: 13px;
}

.financeExpenseField input,
.financeExpenseField select,
.financeExpenseField textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  outline: 0;
  background: rgba(5, 3, 13, 0.42);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.financeExpenseField input,
.financeExpenseField select {
  height: 45px;
  padding: 0 13px;
}

.financeExpenseField textarea {
  min-height: 82px;
  padding: 12px 13px;
  resize: vertical;
  line-height: 1.55;
}

.financeExpenseField input:focus,
.financeExpenseField select:focus,
.financeExpenseField textarea:focus {
  border-color: rgba(193, 112, 255, 0.42);
  box-shadow:
    0 0 0 3px rgba(164, 72, 255, 0.065);
}

.financeExpenseField input::placeholder,
.financeExpenseField textarea::placeholder {
  color: rgba(255, 255, 255, 0.21);
}

.financeExpenseField select {
  cursor: pointer;
  color-scheme: dark;
}

.financeExpenseField select option {
  background: #171022;
  color: #fff;
}

.financeExpenseField input[type="datetime-local"] {
  color-scheme: dark;
}

.financeExpenseHint {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid rgba(124, 190, 255, 0.1);
  border-radius: 12px;
  background: rgba(71, 144, 255, 0.045);
}

.financeExpenseHint > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: rgba(84, 160, 255, 0.1);
  color: #82bfff;
  font-size: 10px;
  font-weight: 900;
}

.financeExpenseHint p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 8px;
  line-height: 1.55;
}

.financeExpenseFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.financeExpenseCancel,
.financeExpenseSubmit {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  cursor: pointer;
  border-radius: 12px;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
}

.financeExpenseCancel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.48);
}

.financeExpenseSubmit {
  min-width: 190px;
  border: 1px solid rgba(255, 112, 139, 0.25);
  background:
    linear-gradient(
      135deg,
      #ed4f72,
      #a846d5
    );
  box-shadow: 0 14px 28px rgba(168, 50, 117, 0.24);
  color: #fff;
}

.financeExpenseSubmit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(168, 50, 117, 0.32);
}

.financeExpenseSubmit:disabled,
.financeExpenseCancel:disabled {
  cursor: wait;
  opacity: 0.58;
}

.financeExpenseSubmit .visitPaymentSpinner {
  width: 17px;
  height: 17px;
}

@media (max-width: 900px) {
  .financeHeroActions {
    width: 100%;
  }

  .financeAddExpenseButton {
    flex: 1;
  }
}

@media (max-width: 640px) {
  .financeExpenseOverlay {
    align-items: flex-end;
    padding: 0;
  }

  .financeExpenseModal {
    width: 100%;
    max-height: 92vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 23px 23px 0 0;
  }

  .financeExpenseHeader {
    grid-template-columns: 42px 1fr 38px;
    padding: 18px 16px;
  }

  .financeExpenseHeaderIcon {
    width: 42px;
    height: 42px;
  }

  .financeExpenseForm {
    padding: 17px 16px 22px;
  }

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

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

  .financeExpenseFooter {
    flex-direction: column-reverse;
  }

  .financeExpenseCancel,
  .financeExpenseSubmit {
    width: 100%;
  }
}
.financeExpenseAmountInput
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.financeExpenseAmountInput
input[type="number"]::-webkit-inner-spin-button,
.financeExpenseAmountInput
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}
.deleteModalOverlay.is-success
.deleteModal {
  border-color: rgba(91, 232, 158, 0.28);
  background:
    radial-gradient(
      circle at top,
      rgba(66, 222, 142, 0.16),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(20, 48, 39, 0.98),
      rgba(9, 18, 19, 0.99)
    );
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.65),
    0 0 46px rgba(70, 224, 146, 0.16);
}

.deleteModalOverlay.is-success
.deleteIcon {
  border-color: rgba(103, 239, 170, 0.3);
  background: rgba(71, 222, 145, 0.12);
  box-shadow: 0 0 34px rgba(70, 224, 146, 0.2);
  color: #72e6a7;
}

.deleteModalOverlay.is-success
.deleteButtons .primary {
  color: #071510;
  background:
    linear-gradient(
      135deg,
      #7ce9ad,
      #45c987
    );
  border-color: rgba(151, 245, 192, 0.35);
  box-shadow:
    0 14px 32px rgba(69, 201, 135, 0.24);
}

.deleteModalOverlay.is-success
.deleteButtons .primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 42px rgba(69, 201, 135, 0.34);
}
.financeCashflowValueLabel {
  font-size: 9px;
  font-weight: 900;
}

.financeCashflowValueLabel.is-income {
  fill: #72e6a7;
}

.financeCashflowValueLabel.is-outcome {
  fill: #ff8ba0;
}
/* =========================================
   FINANCE — INTERNAL NAVIGATION
   ========================================= */

.financeSectionNavigation {
  position: relative;
  z-index: 4;

  display: flex;
  align-items: center;
  gap: 8px;

  width: 100%;
  padding: 8px;

  overflow-x: auto;
  scrollbar-width: none;

  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(35, 20, 58, 0.88),
      rgba(12, 9, 27, 0.92)
    );

  box-shadow:
    0 18px 55px
      rgba(0, 0, 0, 0.22),
    inset 0 1px 0
      rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(24px);
}

.financeSectionNavigation::-webkit-scrollbar {
  display: none;
}

.financeSectionButton {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-width: max-content;
  min-height: 48px;

  padding: 0 18px;

  border: 1px solid transparent;
  border-radius: 16px;

  color: rgba(255, 255, 255, 0.58);
  background: transparent;

  font: inherit;
  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.financeSectionButton span {
  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

  border-radius: 9px;

  color: rgba(255, 255, 255, 0.7);
  background:
    rgba(255, 255, 255, 0.055);

  font-size: 14px;
}

.financeSectionButton strong {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.financeSectionButton small {
  padding: 3px 6px;

  border-radius: 999px;

  color: rgba(255, 255, 255, 0.38);
  background:
    rgba(255, 255, 255, 0.055);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.financeSectionButton:not(:disabled):hover {
  color: #fff;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      35%,
      rgba(255, 255, 255, 0.09)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      10%,
      rgba(255, 255, 255, 0.035)
    );

  transform: translateY(-1px);
}

.financeSectionButton.active {
  color: #fff;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      62%,
      rgba(255, 255, 255, 0.12)
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--accent-color, #a855f7)
        32%,
        rgba(255, 255, 255, 0.06)
      ),
      color-mix(
        in srgb,
        var(--accent-color, #a855f7)
        14%,
        rgba(15, 10, 29, 0.75)
      )
    );

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7)
        18%,
        transparent
      ),
    0 12px 30px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7)
        20%,
        transparent
      );
}

.financeSectionButton.active span {
  color: #fff;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      40%,
      rgba(255, 255, 255, 0.1)
    );

  box-shadow:
    0 0 18px
      var(
        --accent-glow,
        rgba(168, 85, 247, 0.35)
      );
}

.financeSectionButton.is-disabled {
  opacity: 0.42;
  cursor: default;
}


/* =========================================
   FINANCE — OPERATIONS HERO
   ========================================= */

.financeOperationsHero {
  overflow: hidden;
}

.financeOperationsHero::after {
  content: "↕";

  position: absolute;
  right: 55px;
  bottom: -70px;

  color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      10%,
      transparent
    );

  font-size: 210px;
  font-weight: 900;
  line-height: 1;

  pointer-events: none;
}


/* =========================================
   FINANCE — OPERATIONS FILTERS
   ========================================= */

.financeOperationsFilters {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.5fr)
    minmax(160px, 0.8fr)
    minmax(160px, 0.8fr)
    minmax(145px, 0.65fr)
    minmax(145px, 0.65fr);

  gap: 14px;

  padding: 20px;

  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(26, 16, 46, 0.9),
      rgba(10, 8, 23, 0.94)
    );

  box-shadow:
    0 20px 60px
      rgba(0, 0, 0, 0.2),
    inset 0 1px 0
      rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(22px);
}

.financeOperationsFilters label {
  display: flex;
  flex-direction: column;
  gap: 8px;

  min-width: 0;
}

.financeOperationsFilters label > span {
  padding-left: 3px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.financeOperationsFilters input,
.financeOperationsFilters select {
  width: 100%;
  min-width: 0;
  height: 48px;

  padding: 0 14px;

  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  outline: none;

  color: rgba(255, 255, 255, 0.9);
  background:
    rgba(6, 5, 17, 0.62);

  font: inherit;
  font-size: 13px;

  color-scheme: dark;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.financeOperationsFilters input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.financeOperationsFilters input:focus,
.financeOperationsFilters select:focus {
  border-color:
    var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      7%,
      rgba(6, 5, 17, 0.72)
    );

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--accent-color, #a855f7)
        14%,
        transparent
      );
}

.financeOperationsFilterActions {
  grid-column: 1 / -1;

  display: flex;
  justify-content: flex-end;
  gap: 10px;

  padding-top: 4px;
}

.financeOperationsFilterActions button {
  min-height: 42px;
  padding: 0 20px;

  border-radius: 13px;

  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    border-color 0.2s ease;
}

.financeOperationsApply {
  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      70%,
      white
    );

  background:
    linear-gradient(
      135deg,
      var(--accent-color, #a855f7),
      color-mix(
        in srgb,
        var(--accent-color, #a855f7)
        70%,
        #5011a5
      )
    );

  box-shadow:
    0 10px 25px
      var(
        --accent-glow,
        rgba(168, 85, 247, 0.25)
      );
}

.financeOperationsReset {
  border: 1px solid
    rgba(255, 255, 255, 0.1);

  background:
    rgba(255, 255, 255, 0.045);
}

.financeOperationsFilterActions button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}


/* =========================================
   FINANCE — OPERATIONS JOURNAL
   ========================================= */

.financeOperationsPanel {
  overflow: hidden;
}

.financeOperationsList {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 18px;
}

.financeOperationCard {
  position: relative;

  display: grid;
  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 15px;

  min-height: 82px;
  padding: 15px 18px;

  overflow: hidden;

  border: 1px solid
    rgba(255, 255, 255, 0.075);
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.018)
    );

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.financeOperationCard::before {
  content: "";

  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;

  width: 2px;
  border-radius: 999px;

  background:
    var(--accent-color, #a855f7);

  opacity: 0.45;
}

.financeOperationCard:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      28%,
      rgba(255, 255, 255, 0.1)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      5%,
      rgba(255, 255, 255, 0.035)
    );

  transform: translateY(-1px);
}

.financeOperationContent {
  min-width: 0;
}

.financeOperationTitle {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.financeOperationTitle strong {
  overflow: hidden;

  color: rgba(255, 255, 255, 0.94);

  font-size: 14px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeOperationTitle span {
  overflow: hidden;

  color: rgba(255, 255, 255, 0.43);

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeOperationContent p {
  margin: 7px 0 0;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.57);

  font-size: 11px;
  line-height: 1.45;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeOperationContent p b {
  color: rgba(255, 255, 255, 0.72);
}

.financeOperationContent small {
  display: block;

  margin-top: 7px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.29);

  font-size: 9px;
  letter-spacing: 0.03em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeOperationAmount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;

  min-width: 115px;
}

.financeOperationAmount strong {
  color: rgba(255, 255, 255, 0.9);

  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.financeOperationAmount.is-income strong {
  color: #63e6a3;

  text-shadow:
    0 0 18px
      rgba(99, 230, 163, 0.18);
}

.financeOperationAmount.is-outcome strong {
  color: #ff708d;

  text-shadow:
    0 0 18px
      rgba(255, 112, 141, 0.16);
}

.financeOperationStatus {
  display: inline-flex;
  align-items: center;

  min-height: 23px;
  padding: 0 9px;

  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 999px;

  color: rgba(255, 255, 255, 0.48);
  background:
    rgba(255, 255, 255, 0.035);

  font-size: 9px;
  font-weight: 800;
}

.financeOperationStatus.is-completed {
  color: #63e6a3;
  border-color:
    rgba(99, 230, 163, 0.2);
  background:
    rgba(99, 230, 163, 0.07);
}

.financeOperationStatus.is-pending {
  color: #ffc85c;
  border-color:
    rgba(255, 200, 92, 0.22);
  background:
    rgba(255, 200, 92, 0.07);
}

.financeOperationStatus.is-cancelled,
.financeOperationStatus.is-failed {
  color: #ff708d;
  border-color:
    rgba(255, 112, 141, 0.22);
  background:
    rgba(255, 112, 141, 0.07);
}

.financeOperationsPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: 18px;
  padding-top: 18px;

  border-top: 1px solid
    rgba(255, 255, 255, 0.07);
}

.financeOperationsPagination > span {
  color: rgba(255, 255, 255, 0.4);

  font-size: 11px;
  font-weight: 650;
}

.financeOperationsPagination > div {
  display: flex;
  gap: 9px;
}

.financeOperationsPagination button {
  min-height: 39px;
  padding: 0 15px;

  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 12px;

  color: rgba(255, 255, 255, 0.76);
  background:
    rgba(255, 255, 255, 0.045);

  font: inherit;
  font-size: 11px;
  font-weight: 750;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.financeOperationsPagination button:not(:disabled):hover {
  border-color:
    var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      12%,
      rgba(255, 255, 255, 0.04)
    );

  transform: translateY(-1px);
}

.financeOperationsPagination button:disabled {
  opacity: 0.28;
  cursor: default;
}

.financeTransactionsEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 180px;

  border: 1px dashed
    rgba(255, 255, 255, 0.09);
  border-radius: 18px;

  color: rgba(255, 255, 255, 0.4);
  background:
    rgba(255, 255, 255, 0.018);

  text-align: center;
}

.financeTransactionsEmpty strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.financeTransactionsEmpty span {
  font-size: 11px;
}


/* =========================================
   FINANCE OPERATIONS — TABLET
   ========================================= */

@media (max-width: 1180px) {
  .financeOperationsFilters {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .financeOperationsSearch {
    grid-column: 1 / -1;
  }
}


/* =========================================
   FINANCE OPERATIONS — MOBILE
   ========================================= */

@media (max-width: 720px) {
  .financeSectionNavigation {
    gap: 6px;

    padding: 6px;

    border-radius: 18px;
  }

  .financeSectionButton {
    min-height: 43px;
    padding: 0 13px;

    border-radius: 13px;
  }

  .financeSectionButton strong {
    font-size: 11px;
  }

  .financeSectionButton small {
    display: none;
  }

  .financeOperationsHero::after {
    display: none;
  }

  .financeOperationsFilters {
    grid-template-columns: 1fr;

    gap: 12px;
    padding: 15px;

    border-radius: 19px;
  }

  .financeOperationsSearch {
    grid-column: auto;
  }

  .financeOperationsFilterActions {
    grid-column: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .financeOperationsFilterActions button {
    width: 100%;
    padding: 0 12px;
  }

  .financeOperationCard {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap: 11px;
    padding: 14px;

    border-radius: 16px;
  }

  .financeOperationAmount {
    grid-column: 2;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    padding-top: 8px;

    border-top: 1px solid
      rgba(255, 255, 255, 0.06);
  }

  .financeOperationAmount strong {
    font-size: 14px;
  }

  .financeOperationContent p {
    white-space: normal;
  }

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

  .financeOperationsPagination > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .financeOperationsPagination button {
    width: 100%;
  }
}
.financeOperationActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 11px;
}

.financeOperationActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 31px;
  padding: 0 11px;

  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 10px;

  color: rgba(255, 255, 255, 0.72);
  background:
    rgba(255, 255, 255, 0.045);

  font: inherit;
  font-size: 9px;
  font-weight: 800;

  cursor: pointer;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.financeOperationVisitButton:hover {
  color: #fff;

  border-color:
    var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      14%,
      rgba(255, 255, 255, 0.04)
    );

  transform: translateY(-1px);
}

.financeOperationDocumentButton:hover {
  color: #63e6a3;

  border-color:
    rgba(99, 230, 163, 0.35);

  background:
    rgba(99, 230, 163, 0.08);

  transform: translateY(-1px);
}

.financeOperationCancelButton:hover {
  color: #ff8aa1;

  border-color:
    rgba(255, 112, 141, 0.38);

  background:
    rgba(255, 112, 141, 0.09);

  transform: translateY(-1px);
}

.financeOperationEditButton:hover {
  color: #ffd48b;

  border-color:
    rgba(255, 212, 139, 0.36);

  background:
    rgba(255, 212, 139, 0.08);

  transform: translateY(-1px);
}

.financeOperationActions button:disabled {
  opacity: 0.45;
  cursor: wait;
}

.financeOperationRefundState {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid
    rgba(244, 175, 84, 0.22);
  border-radius: 10px;
  color: #e4a34d;
  background:
    rgba(244, 175, 84, 0.09);
  font-size: 9px;
  font-weight: 800;
}

.financeOperationRefundButton {
  color: #e4a34d !important;
  border-color:
    rgba(244, 175, 84, 0.25) !important;
  background:
    rgba(244, 175, 84, 0.08) !important;
}

.financeOperationRefundButton:hover {
  color: #ffd18f !important;
  border-color:
    rgba(244, 175, 84, 0.44) !important;
  background:
    rgba(244, 175, 84, 0.16) !important;
  transform: translateY(-1px);
}

body[data-theme="white"]
  .financeOperationRefundState {
  color: #93570c;
  border-color:
    rgba(157, 94, 16, 0.2);
  background:
    rgba(157, 94, 16, 0.07);
}

body[data-theme="white"]
  .financeOperationRefundButton {
  color: #86500d !important;
  border-color:
    rgba(157, 94, 16, 0.22) !important;
  background:
    rgba(157, 94, 16, 0.07) !important;
}

.deleteModalOverlay.is-payment-cancel
  .deleteIcon {
  color: #ff8aa1;
  border-color:
    rgba(255, 112, 141, 0.28);
  background:
    rgba(255, 112, 141, 0.1);
}

@media (max-width: 720px) {
  .financeOperationActions {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .financeOperationActions button {
    width: 100%;
  }
}
/* =========================================
   FINANCE — EXPENSES
   ========================================= */

.financeExpensesDashboard {
  padding-bottom: 130px;
}


/* =========================================
   EXPENSES HERO
   ========================================= */

.financeExpensesHero {
  position: relative;
  overflow: hidden;
}

.financeExpensesHero::after {
  content: "−";

  position: absolute;
  right: 55px;
  bottom: -105px;

  color:
    color-mix(
      in srgb,
      #ff6485 10%,
      transparent
    );

  font-size: 260px;
  font-weight: 900;
  line-height: 1;

  pointer-events: none;
}

.financeExpensesHero > * {
  position: relative;
  z-index: 2;
}

.financeExpensesJournalButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 48px;
  padding: 0 18px;

  border: 1px solid
    rgba(255, 255, 255, 0.11);
  border-radius: 15px;

  color: rgba(255, 255, 255, 0.75);
  background:
    rgba(255, 255, 255, 0.045);

  font: inherit;
  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.financeExpensesJournalButton:hover {
  color: #fff;

  border-color:
    var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      12%,
      rgba(255, 255, 255, 0.04)
    );

  transform: translateY(-1px);
}


/* =========================================
   EXPENSE KPI CARDS
   ========================================= */

.financeExpenseKpiGrid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 14px;
}

.financeExpenseKpi {
  position: relative;

  min-width: 0;
  min-height: 168px;
  padding: 20px;

  overflow: hidden;

  border: 1px solid
    rgba(255, 255, 255, 0.085);
  border-radius: 23px;

  background:
    linear-gradient(
      145deg,
      rgba(31, 20, 50, 0.94),
      rgba(11, 9, 25, 0.96)
    );

  box-shadow:
    0 18px 50px
      rgba(0, 0, 0, 0.2),
    inset 0 1px 0
      rgba(255, 255, 255, 0.035);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.financeExpenseKpi::after {
  content: "";

  position: absolute;
  right: -45px;
  bottom: -55px;

  width: 130px;
  height: 130px;

  border-radius: 50%;

  background:
    var(
      --expense-kpi-glow,
      rgba(168, 85, 247, 0.16)
    );

  filter: blur(28px);
  pointer-events: none;
}

.financeExpenseKpi:hover {
  border-color:
    rgba(255, 255, 255, 0.14);

  transform: translateY(-2px);
}

.financeExpenseKpi.is-total {
  --expense-kpi-color:
    #ff708d;

  --expense-kpi-glow:
    rgba(255, 112, 141, 0.2);
}

.financeExpenseKpi.is-purchases {
  --expense-kpi-color:
    #a970ff;

  --expense-kpi-glow:
    rgba(169, 112, 255, 0.2);
}

.financeExpenseKpi.is-salary {
  --expense-kpi-color:
    #ff75b5;

  --expense-kpi-glow:
    rgba(255, 117, 181, 0.18);
}

.financeExpenseKpi.is-fixed {
  --expense-kpi-color:
    #ffb85c;

  --expense-kpi-glow:
    rgba(255, 184, 92, 0.18);
}

.financeExpenseKpi.is-average {
  --expense-kpi-color:
    #56b8ff;

  --expense-kpi-glow:
    rgba(86, 184, 255, 0.18);
}

.financeExpenseKpiIcon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  margin-bottom: 18px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--expense-kpi-color)
      38%,
      rgba(255, 255, 255, 0.08)
    );
  border-radius: 13px;

  color:
    var(--expense-kpi-color);

  background:
    color-mix(
      in srgb,
      var(--expense-kpi-color)
      11%,
      rgba(255, 255, 255, 0.025)
    );

  font-size: 17px;
  font-weight: 900;
}

.financeExpenseKpi > span {
  display: block;

  margin-bottom: 7px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.financeExpenseKpi > strong {
  position: relative;
  z-index: 2;

  display: block;

  overflow: hidden;

  color:
    var(--expense-kpi-color);

  font-size: clamp(
    21px,
    2vw,
    31px
  );
  font-weight: 900;
  line-height: 1.05;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseKpi > small {
  display: block;

  margin-top: 10px;

  color: rgba(255, 255, 255, 0.32);

  font-size: 9px;
  line-height: 1.35;
}


/* =========================================
   EXPENSE MAIN GRID
   ========================================= */

.financeExpensesMainGrid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(330px, 0.85fr);

  gap: 16px;
}

.financeExpenseTotalValue {
  color: #ff708d !important;
}


/* =========================================
   EXPENSE TREND CHART
   ========================================= */

.financeExpenseTrendChart {
  width: 100%;
  min-height: 280px;
  margin-top: 10px;

  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255, 255, 255, 0.12)
    transparent;
}

.financeExpenseTrendChart svg {
  display: block;

  width: 100%;
  min-width: 650px;
  height: auto;
}

.financeExpenseGridLine {
  stroke:
    rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  stroke-dasharray: 4 7;
}

.financeExpenseGridLabel,
.financeExpenseDateLabel {
  fill:
    rgba(255, 255, 255, 0.32);

  font-family: inherit;
  font-size: 9px;
  font-weight: 650;
}

.financeExpenseBar {
  fill: url("#financeExpenseGradient");
  fill: #ff6485;

  opacity: 0.82;

  filter:
    drop-shadow(
      0 5px 9px
      rgba(255, 100, 133, 0.16)
    );

  transition:
    opacity 0.2s ease;
}

.financeExpenseBarGroup:hover
.financeExpenseBar {
  opacity: 1;
}

.financeExpenseBarPoint {
  fill: #ffd1dc;
  stroke: #ff6485;
  stroke-width: 2;
}


/* =========================================
   EXPENSE CATEGORIES
   ========================================= */

.financeExpenseCategories {
  display: flex;
  flex-direction: column;
  gap: 9px;

  margin-top: 18px;
}

.financeExpenseCategory {
  display: grid;
  grid-template-columns:
    40px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 12px;

  padding: 11px;

  border: 1px solid
    rgba(255, 255, 255, 0.065);
  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.financeExpenseCategory:hover {
  border-color:
    rgba(255, 255, 255, 0.12);

  background:
    rgba(255, 255, 255, 0.04);

  transform: translateX(2px);
}

.financeExpenseCategoryIcon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--category-color)
      32%,
      rgba(255, 255, 255, 0.07)
    );
  border-radius: 13px;

  background:
    color-mix(
      in srgb,
      var(--category-color)
      10%,
      rgba(255, 255, 255, 0.02)
    );

  font-size: 15px;
}

.financeExpenseCategoryMain {
  min-width: 0;
}

.financeExpenseCategoryMain > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;

  margin-bottom: 8px;
}

.financeExpenseCategoryMain strong {
  overflow: hidden;

  color: rgba(255, 255, 255, 0.81);

  font-size: 11px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseCategoryMain span {
  flex: 0 0 auto;

  color: rgba(255, 255, 255, 0.3);

  font-size: 8px;
}

.financeExpenseCategoryProgress {
  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.055);
}

.financeExpenseCategoryProgress i {
  display: block;

  height: 100%;
  border-radius: inherit;

  background:
    var(--category-color);

  box-shadow:
    0 0 12px
      color-mix(
        in srgb,
        var(--category-color)
        45%,
        transparent
      );
}

.financeExpenseCategoryAmount {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 4px;

  min-width: 82px;
}

.financeExpenseCategoryAmount strong {
  color: rgba(255, 255, 255, 0.88);

  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.financeExpenseCategoryAmount span {
  color: rgba(255, 255, 255, 0.35);

  font-size: 9px;
}


/* =========================================
   PURCHASES / SALARIES / COUNTERPARTIES
   ========================================= */

.financeExpensesSecondaryGrid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(330px, 0.75fr);

  gap: 16px;
}

.financeExpenseControlCards {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;

  margin-top: 18px;
}

.financeExpenseControlCards > article {
  position: relative;

  min-width: 0;
  min-height: 205px;
  padding: 18px;

  overflow: hidden;

  border: 1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );
}

.financeExpenseControlCards > article::after {
  content: "";

  position: absolute;
  right: -45px;
  bottom: -55px;

  width: 130px;
  height: 130px;

  border-radius: 50%;

  filter: blur(30px);
  pointer-events: none;
}

.financeExpenseControlCards
.is-purchase::after {
  background:
    rgba(169, 112, 255, 0.18);
}

.financeExpenseControlCards
.is-salary::after {
  background:
    rgba(255, 117, 181, 0.16);
}

.financeExpenseControlCards
> article
> div:first-child {
  display: flex;
  align-items: center;
  gap: 11px;
}

.financeExpenseControlCards
> article
> div:first-child
> span {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.045);

  font-size: 17px;
}

.financeExpenseControlCards small {
  color:
    var(--accent-color, #a855f7);

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.financeExpenseControlCards h3 {
  margin: 4px 0 0;

  color: rgba(255, 255, 255, 0.84);

  font-size: 12px;
}

.financeExpenseControlCards
> article
> strong {
  position: relative;
  z-index: 2;

  display: block;

  margin-top: 23px;

  color: rgba(255, 255, 255, 0.94);

  font-size: 25px;
  font-weight: 900;
}

.financeExpenseControlCards p {
  position: relative;
  z-index: 2;

  margin: 12px 0 0;

  color: rgba(255, 255, 255, 0.36);

  font-size: 9px;
  line-height: 1.55;
}

.financeExpenseCounterparties {
  display: flex;
  flex-direction: column;
  gap: 9px;

  margin-top: 18px;
}

.financeExpenseCounterparty {
  display: grid;
  grid-template-columns:
    29px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 11px;

  padding: 11px;

  border: 1px solid
    rgba(255, 255, 255, 0.065);
  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.025);
}

.financeExpenseCounterparty
> span {
  display: grid;
  place-items: center;

  width: 29px;
  height: 29px;

  border-radius: 9px;

  color:
    var(--accent-color, #a855f7);

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7)
      11%,
      rgba(255, 255, 255, 0.025)
    );

  font-size: 9px;
  font-weight: 900;
}

.financeExpenseCounterparty div {
  min-width: 0;
}

.financeExpenseCounterparty
div strong {
  display: block;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.8);

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseCounterparty
div small {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.3);

  font-size: 8px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseCounterparty
> b {
  color: #ff8099;

  font-size: 11px;
  white-space: nowrap;
}


/* =========================================
   EXPENSES — RESPONSIVE
   ========================================= */

@media (max-width: 1280px) {
  .financeExpenseKpiGrid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .financeExpensesMainGrid,
  .financeExpensesSecondaryGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .financeExpenseKpiGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

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

  .financeExpensesHero::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .financeExpenseKpiGrid {
    grid-template-columns: 1fr;
  }

  .financeExpenseKpi {
    min-height: 150px;
  }

  .financeExpenseCategory {
    grid-template-columns:
      38px
      minmax(0, 1fr);
  }

  .financeExpenseCategoryAmount {
    grid-column: 2;

    align-items: center;
    flex-direction: row;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    padding-top: 7px;
  }

  .financeExpenseCounterparty {
    grid-template-columns:
      29px
      minmax(0, 1fr);
  }

  .financeExpenseCounterparty
  > b {
    grid-column: 2;
  }

  .financeExpensesJournalButton,
  #financeExpensesAddButton {
    width: 100%;
  }
}
/* =========================================================
   FINANCE — PURCHASES
   ========================================================= */

.financePurchasesPanel {
  margin-top: 22px;
  padding: 24px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(168, 85, 247, 0.12),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(31, 20, 54, 0.94),
      rgba(12, 11, 30, 0.97)
    );
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.financePurchasesPanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.financePurchasesPanelHead h3 {
  margin: 5px 0 7px;
  font-size: clamp(21px, 2vw, 28px);
  color: var(--text-primary, #ffffff);
}

.financePurchasesPanelHead p {
  margin: 0;
  color: var(--text-secondary, #9993ab);
  line-height: 1.55;
}

.financePurchasesPanelActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.financePurchasesSummary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary, #aaa4b9);
  font-size: 13px;
  font-weight: 700;
}

#financePurchaseCreateButton {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(192, 132, 252, 0.5);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      var(--accent-color, #a855f7),
      #d946ef
    );
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(168, 85, 247, 0.24);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

#financePurchaseCreateButton:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 34px rgba(168, 85, 247, 0.32);
}

.financePurchasesList {
  display: grid;
  gap: 12px;
}

.financePurchaseCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.financePurchaseCard:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 132, 252, 0.35);
  background: rgba(168, 85, 247, 0.075);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.financePurchaseCardIcon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 15px;
  background: rgba(168, 85, 247, 0.11);
  font-size: 21px;
}

.financePurchaseCardMain {
  min-width: 0;
}

.financePurchaseCardTitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.financePurchaseCardTitle strong {
  overflow: hidden;
  color: var(--text-primary, #fff);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financePurchaseCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  color: var(--text-secondary, #918ba0);
  font-size: 12px;
}

.financePurchaseCardAmount {
  min-width: 125px;
  text-align: right;
}

.financePurchaseCardAmount strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
}

.financePurchaseCardAmount span {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary, #8c8599);
  font-size: 11px;
}

.financePurchaseCardArrow {
  color: var(--accent-color, #b267ff);
  font-size: 20px;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.financePurchaseCard:hover .financePurchaseCardArrow {
  transform: translateX(3px);
  opacity: 1;
}

.financePurchaseStatus,
.financePurchasePaymentStatus {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 800;
}

.financePurchaseStatus.is-draft {
  border-color: rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
}

.financePurchaseStatus.is-ordered,
.financePurchasePaymentStatus.is-partial {
  border-color: rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.08);
  color: #facc15;
}

.financePurchaseStatus.is-received,
.financePurchasePaymentStatus.is-paid {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  color: #5ee9ad;
}

.financePurchaseStatus.is-cancelled,
.financePurchasePaymentStatus.is-unpaid {
  border-color: rgba(251, 113, 133, 0.28);
  background: rgba(251, 113, 133, 0.07);
  color: #fb8ba0;
}

.financePurchaseProgress {
  width: 100%;
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.financePurchaseProgress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--accent-color, #a855f7),
      #d946ef
    );
}

.financePurchasesEmpty {
  padding: 38px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: var(--text-secondary, #9790a5);
  text-align: center;
}

.financePurchasesPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.financePurchasesPagination button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.financePurchasesPagination button:hover:not(:disabled) {
  border-color: rgba(192, 132, 252, 0.38);
  background: rgba(168, 85, 247, 0.1);
}

.financePurchasesPagination button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* =========================================================
   PURCHASE MODALS — SHARED
   ========================================================= */

body.financePurchaseModalOpen {
  overflow: hidden;
}

.financePurchaseCreateOverlay,
.financePurchaseDetailsOverlay {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  overflow-y: auto;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(168, 85, 247, 0.16),
      transparent 42%
    ),
    rgba(3, 2, 12, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: financePurchaseOverlayIn 0.18s ease both;
}

.financePurchaseCreateModal,
.financePurchaseDetailsModal {
  position: relative;
  width: min(940px, 100%);
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, 0.26);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(168, 85, 247, 0.19),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(28, 17, 48, 0.985),
      rgba(9, 8, 24, 0.99)
    );
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.58),
    0 0 45px rgba(168, 85, 247, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: financePurchaseModalIn 0.22s ease both;
}

.financePurchaseDetailsModal {
  width: min(860px, 100%);
}

.financePurchaseCreateHeader,
.financePurchaseDetailsHeader {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.018);
}

.financePurchaseCreateHeaderIcon,
.financePurchaseDetailsHeaderIcon {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  flex: 0 0 auto;
  border: 1px solid rgba(192, 132, 252, 0.32);
  border-radius: 16px;
  background: rgba(168, 85, 247, 0.12);
  font-size: 23px;
  box-shadow: inset 0 0 22px rgba(168, 85, 247, 0.08);
}

.financePurchaseCreateHeader h2,
.financePurchaseDetailsHeader h2 {
  margin: 3px 0 4px;
  color: var(--text-primary, #fff);
  font-size: clamp(21px, 3vw, 28px);
}

.financePurchaseCreateHeader p,
.financePurchaseDetailsHeader p {
  margin: 0;
  color: var(--text-secondary, #938c9f);
  font-size: 13px;
}

.financePurchaseCreateClose,
.financePurchaseDetailsClose {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: #aaa4b6;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.financePurchaseCreateClose:hover,
.financePurchaseDetailsClose:hover {
  transform: rotate(3deg);
  background: rgba(251, 113, 133, 0.1);
  color: #fb7185;
}

.financePurchaseCreateBody,
.financePurchaseDetailsBody {
  max-height: calc(100vh - 220px);
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.financePurchaseCreateBody::-webkit-scrollbar,
.financePurchaseDetailsBody::-webkit-scrollbar {
  width: 7px;
}

.financePurchaseCreateBody::-webkit-scrollbar-thumb,
.financePurchaseDetailsBody::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.34);
}

/* =========================================================
   CREATE PURCHASE
   ========================================================= */

.financePurchaseCreateGeneral,
.financePurchaseCreateAdditional,
.financePurchaseCreateItems,
.financePurchaseCreateTotals,
.financePurchaseDetailsSupplier {
  padding: 19px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.025);
}

.financePurchaseCreateAdditional,
.financePurchaseCreateItems,
.financePurchaseCreateTotals {
  margin-top: 14px;
}

.financePurchaseCreateSectionHead,
.financePurchaseDetailsSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}

.financePurchaseCreateSectionHead h3,
.financePurchaseDetailsSectionHead h3 {
  margin: 0;
  color: var(--text-primary, #fff);
  font-size: 16px;
}

.financePurchaseCreateSectionHead span,
.financePurchaseDetailsSectionHead span {
  color: var(--text-secondary, #8f899b);
  font-size: 12px;
}

.financePurchaseGeneralGrid,
.financePurchaseSupplierGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.financePurchaseCreateModal label,
.financePurchaseDetailsModal label {
  display: grid;
  gap: 7px;
  color: var(--text-secondary, #a59eae);
  font-size: 12px;
  font-weight: 700;
}

.financePurchaseCreateModal input,
.financePurchaseCreateModal select,
.financePurchaseCreateModal textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 13px;
  outline: none;
  background: rgba(5, 4, 17, 0.62);
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 14px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.financePurchaseCreateModal input,
.financePurchaseCreateModal select {
  padding: 0 13px;
}

.financePurchaseCreateModal textarea {
  min-height: 88px;
  padding: 13px;
  resize: vertical;
}

.financePurchaseCreateModal input:focus,
.financePurchaseCreateModal select:focus,
.financePurchaseCreateModal textarea:focus {
  border-color: rgba(192, 132, 252, 0.62);
  background: rgba(14, 8, 29, 0.86);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.11);
}

.financePurchaseCreateModal input::placeholder,
.financePurchaseCreateModal textarea::placeholder {
  color: rgba(200, 195, 210, 0.38);
}

.financePurchaseGeneralGrid .is-wide,
.financePurchaseSupplierGrid .is-wide {
  grid-column: 1 / -1;
}

.financePurchaseNoSuppliers {
  padding: 14px;
  border: 1px solid rgba(250, 204, 21, 0.18);
  border-radius: 13px;
  background: rgba(250, 204, 21, 0.055);
  color: #dcc86c;
  font-size: 13px;
  line-height: 1.55;
}

.financePurchaseCreateItemsList {
  display: grid;
  gap: 11px;
}

.financePurchaseItemLine {
  position: relative;
  display: grid;
  grid-template-columns:
    34px
    minmax(210px, 1.8fr)
    minmax(92px, 0.55fr)
    minmax(110px, 0.7fr)
    minmax(110px, 0.7fr)
    38px;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.financePurchaseCreateItemNumber {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  align-self: center;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.12);
  color: #c88cff;
  font-size: 12px;
  font-weight: 900;
}

.financePurchaseStockSelect,
.financePurchaseItemNameInput {
  min-width: 0;
}

.financePurchaseItemLineTotal {
  display: grid;
  align-content: center;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #d8a6ff;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.financePurchaseItemRemove {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  align-self: center;
  border: 1px solid rgba(251, 113, 133, 0.2);
  border-radius: 11px;
  background: rgba(251, 113, 133, 0.065);
  color: #fb7185;
  font: inherit;
  cursor: pointer;
}

.financePurchaseItemRemove:hover {
  background: rgba(251, 113, 133, 0.14);
}

.financePurchaseCreateSectionHead button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 11px;
  background: rgba(168, 85, 247, 0.09);
  color: #c999ff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.financePurchaseCreateTotals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.financePurchaseCreateTotals > div {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.financePurchaseCreateTotals span {
  display: block;
  margin-bottom: 7px;
  color: var(--text-secondary, #948c9e);
  font-size: 11px;
}

.financePurchaseCreateTotals strong {
  color: #ffffff;
  font-size: 18px;
}

.financePurchaseCreateTotals .is-total {
  border-color: rgba(192, 132, 252, 0.26);
  background: rgba(168, 85, 247, 0.085);
}

.financePurchaseCreateTotals .is-total strong {
  color: #ce8cff;
  font-size: 21px;
}

.financePurchaseCreateError {
  display: none;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(251, 113, 133, 0.24);
  border-radius: 13px;
  background: rgba(251, 113, 133, 0.07);
  color: #fda4af;
  font-size: 13px;
  line-height: 1.45;
}

.financePurchaseCreateError:not(:empty) {
  display: block;
}

.financePurchaseCreateFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  padding: 18px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(5, 4, 16, 0.34);
}

.financePurchaseCreateActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.financePurchaseCreateCancel,
.financePurchaseCreateSubmit {
  min-height: 45px;
  padding: 0 20px;
  border-radius: 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.financePurchaseCreateCancel {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary, #aaa4b6);
}

.financePurchaseCreateSubmit {
  min-width: 190px;
  border: 1px solid rgba(192, 132, 252, 0.4);
  background:
    linear-gradient(
      135deg,
      var(--accent-color, #a855f7),
      #d946ef
    );
  color: #fff;
  box-shadow: 0 11px 28px rgba(168, 85, 247, 0.22);
}

.financePurchaseCreateSubmit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.financePurchaseCreateSubmit:disabled {
  cursor: wait;
  opacity: 0.58;
}

.financePurchaseCreateModal.financePurchaseLoadError {
  width: min(520px, 100%);
}

/* =========================================================
   PURCHASE DETAILS
   ========================================================= */

.financePurchaseDetailsStatuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.financePurchaseDetailsSupplier {
  margin-bottom: 14px;
}

.financePurchaseDetailsSupplier strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary, #fff);
  font-size: 17px;
}

.financePurchaseDetailsSupplier p {
  margin: 4px 0 0;
  color: var(--text-secondary, #958e9f);
  font-size: 13px;
  line-height: 1.5;
}

.financePurchaseDetailsItems {
  display: grid;
  gap: 9px;
}

.financePurchaseDetailsItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.024);
}

.financePurchaseDetailsItem strong {
  color: var(--text-primary, #fff);
  font-size: 14px;
}

.financePurchaseDetailsItem span {
  color: var(--text-secondary, #91899b);
  font-size: 12px;
}

.financePurchaseDetailsItemAmount {
  color: #cc91ff;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

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

.financePurchaseDetailsTotals > div {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.financePurchaseDetailsTotals span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary, #91899b);
  font-size: 11px;
}

.financePurchaseDetailsTotals strong {
  color: #fff;
  font-size: 18px;
}

.financePurchaseDetailsTotals .is-total {
  border-color: rgba(192, 132, 252, 0.25);
  background: rgba(168, 85, 247, 0.08);
}

.financePurchaseDetailsTotals .is-total strong {
  color: #cd8eff;
}

.financePurchaseDetailsActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.financePurchaseDetailsActions button,
.financePurchaseDetailsActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(192, 132, 252, 0.24);
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.08);
  color: #c996ff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.financePageLoading {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: var(--text-secondary, #9b94a5);
  text-align: center;
}

.financePurchaseCreateModal .visitPaymentSpinner,
.financePurchaseDetailsModal .visitPaymentSpinner {
  margin: 40px auto;
}

/* =========================================================
   ANIMATION + RESPONSIVE
   ========================================================= */

@keyframes financePurchaseOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .financePurchaseItemLine {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      minmax(90px, 0.45fr)
      38px;
  }

  .financePurchaseItemLineTotal {
    grid-column: 2 / -1;
  }

  .financePurchaseCard {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .financePurchaseCardAmount {
    grid-column: 2;
    text-align: left;
  }

  .financePurchaseCardArrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 680px) {
  .financePurchasesPanel {
    padding: 17px;
    border-radius: 21px;
  }

  .financePurchasesPanelHead {
    flex-direction: column;
  }

  .financePurchasesPanelActions {
    width: 100%;
  }

  #financePurchaseCreateButton {
    flex: 1;
  }

  .financePurchaseCreateOverlay,
  .financePurchaseDetailsOverlay {
    align-items: flex-end;
    padding: 0;
  }

  .financePurchaseCreateModal,
  .financePurchaseDetailsModal {
    width: 100%;
    max-height: 94vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }

  .financePurchaseCreateHeader,
  .financePurchaseDetailsHeader {
    padding: 18px;
  }

  .financePurchaseCreateBody,
  .financePurchaseDetailsBody {
    max-height: calc(94vh - 190px);
    padding: 17px;
  }

  .financePurchaseGeneralGrid,
  .financePurchaseSupplierGrid,
  .financePurchaseCreateTotals,
  .financePurchaseDetailsTotals {
    grid-template-columns: 1fr;
  }

  .financePurchaseItemLine {
    grid-template-columns: 32px minmax(0, 1fr) 38px;
    align-items: center;
  }

  .financePurchaseItemLine > label {
    grid-column: 1 / -1;
  }

  .financePurchaseCreateItemNumber {
    grid-column: 1;
  }

  .financePurchaseItemRemove {
    grid-column: 3;
    grid-row: 1;
  }

  .financePurchaseItemLineTotal {
    grid-column: 1 / -1;
  }

  .financePurchaseCreateFooter {
    padding: 14px 17px;
  }

  .financePurchaseCreateActions {
    width: 100%;
  }

  .financePurchaseCreateCancel,
  .financePurchaseCreateSubmit {
    flex: 1;
    min-width: 0;
  }

  .financePurchaseCard {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  .financePurchaseCardIcon {
    width: 42px;
    height: 42px;
  }

  .financePurchaseCardAmount {
    grid-column: 2;
  }

  .financePurchaseCardArrow {
    display: none;
  }
}
/* FIX: footer и кнопка подтверждения закупки всегда видимы */

.financePurchaseCreateModal,
.financePurchaseDetailsModal {
  display: flex;
  flex-direction: column;
}

.financePurchaseCreateHeader,
.financePurchaseDetailsHeader,
.financePurchaseCreateFooter {
  flex: 0 0 auto;
}

.financePurchaseCreateBody,
.financePurchaseDetailsBody {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.financePurchaseCreateFooter {
  position: relative;
  z-index: 5;
  background:
    linear-gradient(
      180deg,
      rgba(18, 11, 34, 0.98),
      rgba(9, 7, 22, 0.995)
    );
  box-shadow:
    0 -14px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* =========================================================
   FINANCE — CREATE SUPPLIER
   ========================================================= */

.financeSupplierCreateOverlay {
  position: fixed;
  z-index: 10040;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  overflow-y: auto;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(168, 85, 247, 0.2),
      transparent 40%
    ),
    rgba(3, 2, 12, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: financePurchaseOverlayIn 0.18s ease both;
}

.financeSupplierCreateModal {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: 27px;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(168, 85, 247, 0.2),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(29, 17, 49, 0.99),
      rgba(9, 8, 24, 0.995)
    );
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.62),
    0 0 50px rgba(168, 85, 247, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: financePurchaseModalIn 0.22s ease both;
}

.financeSupplierCreateHeader {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.018);
}

.financeSupplierCreateIcon {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  flex: 0 0 auto;
  border: 1px solid rgba(192, 132, 252, 0.32);
  border-radius: 16px;
  background: rgba(168, 85, 247, 0.12);
  font-size: 23px;
}

.financeSupplierCreateHeader > div:nth-child(2) {
  min-width: 0;
}

.financeSupplierCreateHeader span {
  color: #c084fc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.financeSupplierCreateHeader h2 {
  margin: 4px 0;
  color: var(--text-primary, #fff);
  font-size: clamp(21px, 3vw, 27px);
}

.financeSupplierCreateHeader p {
  margin: 0;
  color: var(--text-secondary, #938c9f);
  font-size: 13px;
  line-height: 1.45;
}

.financeSupplierCreateClose {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: #aaa4b6;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.financeSupplierCreateClose:hover {
  border-color: rgba(251, 113, 133, 0.24);
  background: rgba(251, 113, 133, 0.1);
  color: #fb7185;
}

.financeSupplierCreateBody {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.financeSupplierCreateBody::-webkit-scrollbar {
  width: 7px;
}

.financeSupplierCreateBody::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.35);
}

.financeSupplierCreateGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.financeSupplierCreateGrid label {
  display: grid;
  gap: 7px;
  color: var(--text-secondary, #a59eae);
  font-size: 12px;
  font-weight: 700;
}

.financeSupplierCreateGrid label.is-wide {
  grid-column: 1 / -1;
}

.financeSupplierCreateGrid input,
.financeSupplierCreateGrid textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 13px;
  outline: none;
  background: rgba(5, 4, 17, 0.64);
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 14px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.financeSupplierCreateGrid input {
  min-height: 47px;
  padding: 0 13px;
}

.financeSupplierCreateGrid textarea {
  min-height: 94px;
  padding: 13px;
  resize: vertical;
}

.financeSupplierCreateGrid input:focus,
.financeSupplierCreateGrid textarea:focus {
  border-color: rgba(192, 132, 252, 0.62);
  background: rgba(14, 8, 29, 0.88);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.11);
}

.financeSupplierCreateGrid input::placeholder,
.financeSupplierCreateGrid textarea::placeholder {
  color: rgba(200, 195, 210, 0.38);
}

.financeSupplierCreateError {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(251, 113, 133, 0.25);
  border-radius: 13px;
  background: rgba(251, 113, 133, 0.075);
  color: #fda4af;
  font-size: 13px;
  line-height: 1.45;
}

.financeSupplierCreateError[hidden] {
  display: none;
}

.financeSupplierCreateFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  flex: 0 0 auto;
  padding: 18px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(
      180deg,
      rgba(18, 11, 34, 0.98),
      rgba(9, 7, 22, 0.995)
    );
  box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.2);
}

.financeSupplierCreateCancel,
.financeSupplierCreateSubmit {
  min-height: 45px;
  padding: 0 20px;
  border-radius: 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.financeSupplierCreateCancel {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary, #aaa4b6);
}

.financeSupplierCreateSubmit {
  min-width: 205px;
  border: 1px solid rgba(192, 132, 252, 0.42);
  background:
    linear-gradient(
      135deg,
      var(--accent-color, #a855f7),
      #d946ef
    );
  color: #fff;
  box-shadow: 0 11px 28px rgba(168, 85, 247, 0.23);
}

.financeSupplierCreateSubmit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.financeSupplierCreateSubmit:disabled {
  cursor: wait;
  opacity: 0.58;
}

@media (max-width: 680px) {
  .financeSupplierCreateOverlay {
    align-items: flex-end;
    padding: 0;
  }

  .financeSupplierCreateModal {
    width: 100%;
    max-height: 94vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }

  .financeSupplierCreateHeader {
    padding: 18px;
  }

  .financeSupplierCreateBody {
    padding: 17px;
  }

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

  .financeSupplierCreateGrid label.is-wide {
    grid-column: auto;
  }

  .financeSupplierCreateFooter {
    padding: 14px 17px;
  }

  .financeSupplierCreateCancel,
  .financeSupplierCreateSubmit {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
  }
}
/* =========================================================
   FINANCE — PURCHASE RECEIVING
   ========================================================= */

.financePurchaseReceiveModal {
  width: min(760px, 100%);
}

.financePurchaseReceiveHint {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(96, 225, 164, 0.2);
  border-radius: 14px;
  background: rgba(96, 225, 164, 0.07);
  color: #9ee8c4;
  font-size: 13px;
  line-height: 1.55;
}

.financePurchaseReceiveItem {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.financePurchaseReceiveItem > span {
  color: var(--text-primary, #fff);
  font-size: 14px;
  font-weight: 850;
}

.financePurchaseReceiveItem > small {
  display: block;
  color: var(--text-secondary, #938c9f);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.financePurchaseReceiveItem input {
  margin-top: 3px;
  border-color: rgba(96, 225, 164, 0.22);
}

.financePurchaseReceiveItem input:focus {
  border-color: rgba(96, 225, 164, 0.6);
  box-shadow: 0 0 0 3px rgba(96, 225, 164, 0.1);
}

.financePurchaseReceiveItem.is-invalid {
  border-color: rgba(251, 113, 133, 0.42);
  background: rgba(251, 113, 133, 0.055);
}

.financePurchaseReceiveItem.is-invalid input {
  border-color: rgba(251, 113, 133, 0.58);
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.08);
}

.financePurchaseReceiveModal[aria-busy="true"] {
  cursor: wait;
}

.financePurchaseReceiveModal[aria-busy="true"] button,
.financePurchaseReceiveModal[aria-busy="true"] input {
  cursor: wait;
  opacity: 0.68;
}

.financePurchaseReceiveModal .financeSupplierCreateFooter {
  flex-wrap: wrap;
}

.financePurchaseReceiveSubmit {
  background:
    linear-gradient(
      135deg,
      #27b978,
      #55d99c
    );
  border-color: rgba(96, 225, 164, 0.42);
  box-shadow: 0 11px 28px rgba(39, 185, 120, 0.2);
}

.financePurchaseReceiveAll {
  border-color: rgba(96, 225, 164, 0.22);
  color: #79dbae;
}

.financePurchaseReceiveZero {
  margin-right: auto;
}

.financePurchaseDetailsActionButtons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.financePurchaseDetailsReceive {
  min-height: 43px;
  padding: 0 17px;
  border: 1px solid rgba(96, 225, 164, 0.32);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(39, 185, 120, 0.17),
      rgba(85, 217, 156, 0.1)
    );
  color: #79e0b0;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.financePurchaseDetailsReceive:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(
      135deg,
      rgba(39, 185, 120, 0.28),
      rgba(85, 217, 156, 0.16)
    );
  box-shadow: 0 10px 25px rgba(39, 185, 120, 0.14);
}

@media (max-width: 680px) {
  .financePurchaseDetailsActions {
    align-items: stretch;
    flex-direction: column;
  }

  .financePurchaseDetailsActionButtons {
    width: 100%;
  }

  .financePurchaseDetailsActionButtons button {
    flex: 1;
  }

  .financePurchaseReceiveModal
    .financeSupplierCreateFooter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom:
      max(14px, env(safe-area-inset-bottom));
  }

  .financePurchaseReceiveModal {
    max-height: 94dvh;
  }

  .financePurchaseReceiveItem {
    padding: 13px;
  }

  .financePurchaseReceiveItem input {
    min-height: 48px;
  }

  .financePurchaseReceiveZero {
    margin-right: 0;
  }

  .financePurchaseReceiveSubmit {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   FINANCE STAGE 1.1 — EXPENSE DOCUMENT WORKSPACE
   ========================================================= */

.financeExpenseWorkspace,
.financeExpenseDocumentOverlay,
.financeExpenseDetailsOverlay,
.financeExpenseActionOverlay {
  --expense-surface: rgba(20, 15, 38, 0.94);
  --expense-surface-soft: rgba(255, 255, 255, 0.035);
  --expense-surface-strong: rgba(8, 6, 22, 0.82);
  --expense-border: rgba(255, 255, 255, 0.09);
  --expense-border-strong: rgba(192, 132, 252, 0.28);
  --expense-text: rgba(255, 255, 255, 0.94);
  --expense-muted: rgba(255, 255, 255, 0.5);
  --expense-subtle: rgba(255, 255, 255, 0.3);
  --expense-input: rgba(6, 4, 18, 0.68);
  --expense-shadow: 0 22px 65px rgba(0, 0, 0, 0.28);
}

.financeExpenseWorkspaceContent {
  display: grid;
  gap: 18px;
}

.financeExpenseWorkspaceTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--expense-border);
  border-radius: 20px;
  background: var(--expense-surface-soft);
  overflow: hidden;
}

.financeExpenseWorkspaceTabs button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--expense-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.financeExpenseWorkspaceTabs button:hover {
  transform: translateY(-1px);
  border-color: var(--expense-border);
  color: var(--expense-text);
}

.financeExpenseWorkspaceTabs button.active {
  border-color: var(--expense-border-strong);
  color: var(--expense-text);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent-color, #a855f7) 17%, transparent),
      var(--expense-surface-soft)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.financeExpenseWorkspaceTabs strong,
.financeExpenseWorkspaceTabs small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseWorkspaceTabs strong {
  font-size: 12px;
  font-weight: 850;
}

.financeExpenseWorkspaceTabs small {
  color: var(--expense-subtle);
  font-size: 9px;
}

.financeExpenseDocumentFilters {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.5fr)
    repeat(4, minmax(130px, 0.72fr))
    auto;
  align-items: end;
  gap: 11px;
  padding: 16px;
  border: 1px solid var(--expense-border);
  border-radius: 20px;
  background: var(--expense-surface-soft);
  box-shadow: var(--expense-shadow);
}

.financeExpenseDocumentFilters label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.financeExpenseDocumentFilters label > span {
  color: var(--expense-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.financeExpenseDocumentFilters input,
.financeExpenseDocumentFilters select,
.financeExpenseActionModal input,
.financeExpenseActionModal select,
.financeExpenseActionModal textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--expense-border);
  border-radius: 12px;
  outline: none;
  background: var(--expense-input);
  color: var(--expense-text);
  font: inherit;
  font-size: 12px;
  color-scheme: dark;
}

.financeExpenseActionModal textarea {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

.financeExpenseDocumentFilters input:focus,
.financeExpenseDocumentFilters select:focus,
.financeExpenseActionModal input:focus,
.financeExpenseActionModal select:focus,
.financeExpenseActionModal textarea:focus {
  border-color: rgba(192, 132, 252, 0.58);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

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

.financeExpenseFilterActions button,
.financeRecurringIntro button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--expense-border);
  border-radius: 12px;
  background: var(--expense-surface-soft);
  color: var(--expense-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.financeExpenseFilterActions button.is-primary,
.financeRecurringIntro button {
  border-color: rgba(192, 132, 252, 0.34);
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.25),
      rgba(217, 70, 239, 0.13)
    );
  color: #dfb6ff;
}

.financeExpenseFilterError {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(251, 113, 133, 0.25);
  border-radius: 11px;
  background: rgba(251, 113, 133, 0.07);
  color: #fda4af;
  font-size: 12px;
}

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

.financeExpenseDocumentKpis article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--expense-border);
  border-radius: 19px;
  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(in srgb, var(--kpi-color, #a855f7) 15%, transparent),
      transparent 42%
    ),
    var(--expense-surface-soft);
  box-shadow: var(--expense-shadow);
}

.financeExpenseDocumentKpis article.is-paid {
  --kpi-color: #55d99c;
}

.financeExpenseDocumentKpis article.is-planned {
  --kpi-color: #f5c768;
}

.financeExpenseDocumentKpis article.is-reversed {
  --kpi-color: #fb7185;
}

.financeExpenseDocumentKpis article.is-count {
  --kpi-color: #8ebcff;
}

.financeExpenseDocumentKpis span,
.financeExpenseDocumentKpis strong,
.financeExpenseDocumentKpis small {
  display: block;
}

.financeExpenseDocumentKpis span {
  color: var(--expense-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.financeExpenseDocumentKpis strong {
  margin-top: 9px;
  overflow: hidden;
  color: var(--kpi-color);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseDocumentKpis small {
  margin-top: 9px;
  color: var(--expense-subtle);
  font-size: 9px;
  line-height: 1.45;
}

.financeExpenseDocumentKpis small.is-up {
  color: #f5a4b5;
}

.financeExpenseDocumentKpis small.is-down {
  color: #72dba7;
}

.financeExpenseMarketingKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(111, 156, 255, 0.18);
  border-radius: 19px;
  background:
    linear-gradient(
      135deg,
      rgba(111, 156, 255, 0.08),
      var(--expense-surface-soft)
    );
}

.financeExpenseMarketingKpis > div {
  padding: 12px;
  border-radius: 13px;
  background: var(--expense-surface-soft);
}

.financeExpenseMarketingKpis span,
.financeExpenseMarketingKpis strong {
  display: block;
}

.financeExpenseMarketingKpis span {
  color: var(--expense-muted);
  font-size: 9px;
}

.financeExpenseMarketingKpis strong {
  margin-top: 6px;
  color: #94b8ff;
  font-size: 17px;
}

.financeExpenseMarketingKpis p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--expense-subtle);
  font-size: 9px;
}

.financeExpenseDocumentsPanel,
.financeSupplierWorkspacePanel,
.financePurchaseWorkspacePanel {
  padding: 22px;
}

.financeExpenseDocumentsList,
.financeSupplierWorkspaceList {
  display: grid;
  gap: 9px;
  margin-top: 17px;
}

.financeExpenseDocumentCard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--expense-border);
  border-radius: 16px;
  background: var(--expense-surface-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.financeExpenseDocumentCard:hover {
  transform: translateY(-1px);
  border-color: var(--expense-border-strong);
  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 7%,
      var(--expense-surface-soft)
    );
}

.financeExpenseDocumentIcon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--expense-document-color) 35%,
      var(--expense-border)
    );
  border-radius: 14px;
  background:
    color-mix(
      in srgb,
      var(--expense-document-color) 10%,
      transparent
    );
}

.financeExpenseDocumentMain {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.financeExpenseDocumentTitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.financeExpenseDocumentTitle strong {
  overflow: hidden;
  color: var(--expense-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseDocumentMain > small,
.financeExpenseDocumentMain > p {
  overflow: hidden;
  color: var(--expense-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeExpenseDocumentMain > p {
  margin: 0;
  color: var(--expense-subtle);
}

.financeExpenseDocumentStatus {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--expense-surface-soft);
  color: var(--expense-muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.financeExpenseDocumentStatus.is-paid {
  background: rgba(85, 217, 156, 0.1);
  color: #69dca4;
}

.financeExpenseDocumentStatus.is-planned {
  background: rgba(245, 199, 104, 0.1);
  color: #e6c16e;
}

.financeExpenseDocumentStatus.is-cancelled,
.financeExpenseDocumentStatus.is-reversed {
  background: rgba(251, 113, 133, 0.1);
  color: #f58da0;
}

.financeExpenseDocumentAmount {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.financeExpenseDocumentAmount strong {
  color: #ff8ca5;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.financeExpenseDocumentAmount small {
  color: var(--expense-subtle);
  font-size: 8px;
}

.financeExpensesPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--expense-border);
}

.financeExpensesPagination > span {
  color: var(--expense-muted);
  font-size: 10px;
}

.financeExpensesPagination > div {
  display: flex;
  gap: 8px;
}

.financeExpensesPagination button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--expense-border);
  border-radius: 11px;
  background: var(--expense-surface-soft);
  color: var(--expense-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.financeExpensesPagination button:disabled {
  opacity: 0.38;
  cursor: default;
}

/* Expense document form */

.financeExpenseDocumentModal {
  width: min(820px, 100%);
}

.financeExpenseLifecycleChoice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
}

.financeExpenseLifecycleChoice legend {
  margin-bottom: 8px;
  color: var(--expense-muted);
  font-size: 10px;
  font-weight: 850;
}

.financeExpenseLifecycleChoice label {
  position: relative;
  display: block;
  cursor: pointer;
}

.financeExpenseLifecycleChoice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.financeExpenseLifecycleChoice label > span {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 13px;
  border: 1px solid var(--expense-border);
  border-radius: 14px;
  background: var(--expense-surface-soft);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.financeExpenseLifecycleChoice input:checked + span {
  border-color: rgba(192, 132, 252, 0.48);
  background: rgba(168, 85, 247, 0.1);
}

.financeExpenseLifecycleChoice b {
  color: var(--expense-text);
  font-size: 12px;
}

.financeExpenseLifecycleChoice small {
  color: var(--expense-muted);
  font-size: 9px;
  line-height: 1.4;
}

.financeExpensePaymentFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(85, 217, 156, 0.17);
  border-radius: 15px;
  background: rgba(85, 217, 156, 0.045);
}

.financeExpensePaymentFields[hidden],
.financeExpenseMarketingFields[hidden] {
  display: none;
}

.financeExpenseMarketingFields {
  margin: 14px 0;
  padding: 15px;
  border: 1px solid rgba(111, 156, 255, 0.2);
  border-radius: 16px;
  background: rgba(111, 156, 255, 0.045);
}

.financeExpenseSubsectionHead {
  margin-bottom: 12px;
}

.financeExpenseSubsectionHead strong,
.financeExpenseSubsectionHead span {
  display: block;
}

.financeExpenseSubsectionHead strong {
  color: var(--expense-text);
  font-size: 13px;
}

.financeExpenseSubsectionHead span {
  margin-top: 4px;
  color: var(--expense-muted);
  font-size: 9px;
}

.financeExpenseDocumentFields {
  margin-top: 12px;
}

.financeExpenseFileField input[type="file"] {
  min-height: 46px;
  padding: 9px;
}

.financeExpenseFileField small {
  color: var(--expense-subtle);
  font-size: 8px;
}

.financeExpenseDocumentModal input[readonly],
.financeExpenseDocumentModal select:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Details and lifecycle modals */

.financeExpenseDetailsOverlay,
.financeExpenseActionOverlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5, 3, 14, 0.74);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.financeExpenseActionOverlay {
  z-index: 10090;
}

.financeExpenseDetailsModal,
.financeExpenseActionModal {
  width: min(760px, 100%);
  max-height: calc(100dvh - 44px);
  overflow: hidden auto;
  border: 1px solid var(--expense-border-strong);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(168, 85, 247, 0.14),
      transparent 35%
    ),
    var(--expense-surface);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.55);
}

.financeExpenseActionModal {
  width: min(590px, 100%);
}

.financeRecurringTemplateModal {
  width: min(720px, 100%);
}

.financeExpenseDetailsHeader,
.financeExpenseActionModal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--expense-border);
}

.financeExpenseDetailsTitle,
.financeExpenseActionModal > header > div {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.financeExpenseDetailsTitle > span,
.financeExpenseActionModal > header > div > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid var(--expense-border-strong);
  border-radius: 14px;
  background: rgba(168, 85, 247, 0.1);
  color: #ce93ff;
  font-size: 19px;
  font-weight: 900;
}

.financeExpenseDetailsTitle small {
  color: #bb83eb;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.financeExpenseDetailsTitle h2,
.financeExpenseActionModal h2 {
  margin: 3px 0;
  color: var(--expense-text);
  font-size: clamp(18px, 3vw, 24px);
}

.financeExpenseDetailsTitle p,
.financeExpenseActionModal header p {
  margin: 0;
  color: var(--expense-muted);
  font-size: 11px;
  line-height: 1.45;
}

.financeExpenseDetailsHeader > button,
.financeExpenseActionModal > header > button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--expense-border);
  border-radius: 12px;
  background: var(--expense-surface-soft);
  color: var(--expense-muted);
  font: inherit;
  cursor: pointer;
}

.financeExpenseDetailsBody,
.financeExpenseActionModal > form {
  padding: 20px;
}

.financeExpenseDetailsSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.financeExpenseDetailsSummary > div {
  padding: 14px;
  border: 1px solid var(--expense-border);
  border-radius: 14px;
  background: var(--expense-surface-soft);
}

.financeExpenseDetailsSummary span,
.financeExpenseDetailsSummary strong {
  display: block;
}

.financeExpenseDetailsSummary span {
  color: var(--expense-muted);
  font-size: 9px;
}

.financeExpenseDetailsSummary strong {
  margin-top: 7px;
  color: var(--expense-text);
  font-size: 15px;
}

.financeExpenseDetailsSummary strong.is-paid {
  color: #69dca4;
}

.financeExpenseDetailsSummary strong.is-planned {
  color: #e7c36f;
}

.financeExpenseDetailsSummary strong.is-cancelled,
.financeExpenseDetailsSummary strong.is-reversed {
  color: #f58da0;
}

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

.financeExpenseDetailsFields > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--expense-border);
  border-radius: 13px;
  background: var(--expense-surface-soft);
}

.financeExpenseDetailsFields > div.is-wide {
  grid-column: 1 / -1;
}

.financeExpenseDetailsFields dt {
  color: var(--expense-subtle);
  font-size: 8px;
  text-transform: uppercase;
}

.financeExpenseDetailsFields dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: var(--expense-text);
  font-size: 11px;
  line-height: 1.5;
}

.financeExpenseDetailsMarketing,
.financeExpenseDetailsAttachments,
.financeExpenseAudit {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--expense-border);
  border-radius: 14px;
  background: var(--expense-surface-soft);
}

.financeExpenseDetailsMarketing h3,
.financeExpenseDetailsAttachments h3 {
  margin: 0 0 10px;
  color: var(--expense-text);
  font-size: 12px;
}

.financeExpenseDetailsMarketing > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.financeExpenseDetailsMarketing span {
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(111, 156, 255, 0.08);
  color: var(--expense-muted);
  font-size: 9px;
}

.financeExpenseDetailsMarketing b {
  color: #96b9ff;
}

.financeExpenseDetailsAttachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.financeExpenseDetailsAttachments h3 {
  width: 100%;
}

.financeExpenseDetailsAttachments button,
.financeExpenseDetailsAttachments a {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(111, 156, 255, 0.2);
  border-radius: 10px;
  background: rgba(111, 156, 255, 0.07);
  color: #9fbdff;
  font: inherit;
  font-size: 9px;
  text-decoration: none;
  cursor: pointer;
}

.financeExpenseAudit summary {
  color: var(--expense-muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.financeExpenseAudit p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 9px 0 0;
  color: var(--expense-muted);
  font-size: 9px;
}

.financeExpenseDetailsActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
}

.financeExpenseDetailsActions button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--expense-border);
  border-radius: 11px;
  background: var(--expense-surface-soft);
  color: var(--expense-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.financeExpenseDetailsActions button.is-primary {
  border-color: rgba(85, 217, 156, 0.28);
  background: rgba(85, 217, 156, 0.08);
  color: #72dba8;
}

.financeExpenseDetailsActions button.is-danger,
.financeExpenseSubmit.is-danger {
  border-color: rgba(251, 113, 133, 0.28);
  background: rgba(251, 113, 133, 0.08);
  color: #f69aab;
  box-shadow: none;
}

.financeExpenseActionModal footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin: 16px -20px -20px;
  padding: 15px 20px;
  border-top: 1px solid var(--expense-border);
}

.financeRecurringActiveField {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--expense-border);
  border-radius: 13px;
  background: var(--expense-surface-soft);
}

.financeRecurringActiveField input {
  width: 18px;
  min-height: 18px;
}

.financeRecurringActiveField span,
.financeRecurringActiveField small {
  display: block;
}

.financeRecurringActiveField span {
  color: var(--expense-text);
  font-size: 11px;
}

.financeRecurringActiveField small {
  margin-top: 3px;
  color: var(--expense-muted);
  font-size: 8px;
}

/* Supplier and recurring workspaces */

.financeSupplierWorkspaceFilters {
  grid-template-columns: minmax(240px, 1fr) auto;
}

.financeSupplierWorkspaceCard {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--expense-border);
  border-radius: 15px;
  background: var(--expense-surface-soft);
}

.financeSupplierWorkspaceCard.is-inactive {
  opacity: 0.58;
}

.financeSupplierWorkspaceIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(168, 85, 247, 0.1);
  color: #cb91ff;
  font-size: 14px;
  font-weight: 900;
}

.financeSupplierWorkspaceCard > div {
  min-width: 0;
}

.financeSupplierWorkspaceCard strong,
.financeSupplierWorkspaceCard p,
.financeSupplierWorkspaceCard small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeSupplierWorkspaceCard strong {
  color: var(--expense-text);
  font-size: 12px;
}

.financeSupplierWorkspaceCard p {
  margin: 5px 0 0;
  color: var(--expense-muted);
  font-size: 9px;
}

.financeSupplierWorkspaceCard small {
  margin-top: 4px;
  color: var(--expense-subtle);
  font-size: 8px;
}

.financeSupplierWorkspaceState {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}

.financeSupplierWorkspaceState.is-on {
  background: rgba(85, 217, 156, 0.1);
  color: #72dba8;
}

.financeSupplierWorkspaceState.is-off {
  background: rgba(255, 255, 255, 0.05);
  color: var(--expense-muted);
}

.financeRecurringIntro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px;
  border: 1px solid rgba(245, 199, 104, 0.18);
  border-radius: 19px;
  background:
    linear-gradient(
      135deg,
      rgba(245, 199, 104, 0.07),
      var(--expense-surface-soft)
    );
}

.financeRecurringIntro span {
  color: #dcc27c;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.financeRecurringIntro h2 {
  margin: 5px 0;
  color: var(--expense-text);
  font-size: 18px;
}

.financeRecurringIntro p {
  max-width: 680px;
  margin: 0;
  color: var(--expense-muted);
  font-size: 10px;
  line-height: 1.55;
}

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

.financeRecurringTemplateCard {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--expense-border);
  border-radius: 18px;
  background: var(--expense-surface-soft);
  box-shadow: var(--expense-shadow);
}

.financeRecurringTemplateCard.is-inactive {
  opacity: 0.62;
}

.financeRecurringTemplateCard header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.financeRecurringTemplateCard header > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(245, 199, 104, 0.08);
  color: #dfc275;
}

.financeRecurringTemplateCard header i {
  color: var(--expense-muted);
  font-size: 8px;
  font-style: normal;
}

.financeRecurringTemplateCard h3 {
  margin: 14px 0 0;
  overflow: hidden;
  color: var(--expense-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeRecurringTemplateCard > strong {
  margin-top: 9px;
  color: #e3c878;
  font-size: 22px;
  font-weight: 900;
}

.financeRecurringTemplateCard > p,
.financeRecurringTemplateCard > small {
  margin: 8px 0 0;
  color: var(--expense-muted);
  font-size: 9px;
  line-height: 1.45;
}

.financeRecurringTemplateCard footer {
  display: flex;
  gap: 7px;
  margin-top: 17px;
}

.financeRecurringTemplateCard footer button {
  flex: 1;
  min-height: 38px;
  border: 1px solid var(--expense-border);
  border-radius: 10px;
  background: var(--expense-surface-soft);
  color: var(--expense-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.financeRecurringTemplateCard footer button.is-primary {
  border-color: rgba(245, 199, 104, 0.22);
  background: rgba(245, 199, 104, 0.07);
  color: #dec478;
}

.financeRecurringTemplateCard footer button:disabled {
  opacity: 0.4;
  cursor: default;
}

.financeRecurringEmpty {
  grid-column: 1 / -1;
}

/* White theme */

body[data-theme="white"] .financeExpenseWorkspace,
body[data-theme="white"] .financeExpenseDocumentOverlay,
body[data-theme="white"] .financeExpenseDetailsOverlay,
body[data-theme="white"] .financeExpenseActionOverlay {
  --expense-surface: rgba(255, 255, 255, 0.98);
  --expense-surface-soft: rgba(44, 34, 66, 0.035);
  --expense-surface-strong: rgba(247, 245, 251, 0.98);
  --expense-border: rgba(40, 28, 58, 0.11);
  --expense-border-strong: rgba(124, 58, 237, 0.25);
  --expense-text: #24202a;
  --expense-muted: #77717e;
  --expense-subtle: #9b95a1;
  --expense-input: #ffffff;
  --expense-shadow: 0 18px 45px rgba(45, 33, 62, 0.08);
}

body[data-theme="white"] .financeExpenseDetailsOverlay,
body[data-theme="white"] .financeExpenseActionOverlay {
  background: rgba(48, 37, 61, 0.3);
}

body[data-theme="white"] .financeExpenseDocumentFilters input,
body[data-theme="white"] .financeExpenseDocumentFilters select,
body[data-theme="white"] .financeExpenseActionModal input,
body[data-theme="white"] .financeExpenseActionModal select,
body[data-theme="white"] .financeExpenseActionModal textarea {
  color-scheme: light;
}

body[data-theme="white"] .financeExpenseDocumentModal {
  background: #fff;
}

body[data-theme="white"] .financeExpenseDocumentModal input,
body[data-theme="white"] .financeExpenseDocumentModal select,
body[data-theme="white"] .financeExpenseDocumentModal textarea {
  border-color: rgba(40, 28, 58, 0.13);
  background: #fff;
  color: #24202a;
  color-scheme: light;
}

body[data-theme="white"] .financeExpenseDocumentModal .financeExpenseHeader,
body[data-theme="white"] .financeExpenseDocumentModal .financeExpenseFooter {
  background: #faf8fc;
}

body[data-theme="white"] .financeExpenseDocumentModal .financeExpenseHeader h2,
body[data-theme="white"] .financeExpenseDocumentModal .financeExpenseAmountInput input,
body[data-theme="white"] .financeExpenseLifecycleChoice b,
body[data-theme="white"] .financeExpenseSubsectionHead strong {
  color: #24202a;
}

body[data-theme="white"] .financeExpenseDocumentModal .financeExpenseField > span,
body[data-theme="white"] .financeExpenseDocumentModal .financeExpenseHeader p,
body[data-theme="white"] .financeExpenseLifecycleChoice small,
body[data-theme="white"] .financeExpenseFileField small {
  color: #77717e;
}

/* Responsive */

@media (max-width: 1180px) {
  .financeExpenseDocumentFilters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .financeExpenseDocumentFilters .is-search {
    grid-column: span 2;
  }

  .financeExpenseDocumentKpis,
  .financeExpenseMarketingKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financeRecurringTemplateGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .financeExpenseWorkspaceTabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .financeExpenseWorkspaceTabs button {
    min-width: 178px;
    scroll-snap-align: start;
  }

  .financeExpenseDocumentFilters,
  .financeSupplierWorkspaceFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financeExpenseDocumentFilters .is-search {
    grid-column: 1 / -1;
  }

  .financeExpenseFilterActions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .financeExpenseDetailsFields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 600px) {
  .financeExpenseDocumentFilters,
  .financeSupplierWorkspaceFilters,
  .financeExpenseDocumentKpis,
  .financeExpenseMarketingKpis,
  .financeExpensePaymentFields,
  .financeExpenseLifecycleChoice,
  .financeExpenseDetailsSummary,
  .financeExpenseDetailsFields,
  .financeRecurringTemplateGrid {
    grid-template-columns: 1fr;
  }

  .financeExpenseDocumentFilters .is-search,
  .financeExpenseDetailsFields > div.is-wide {
    grid-column: auto;
  }

  .financeExpenseFilterActions button {
    flex: 1;
  }

  .financeExpenseMarketingKpis p {
    grid-column: auto;
  }

  .financeExpenseDocumentCard {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .financeExpenseDocumentIcon {
    width: 40px;
    height: 40px;
  }

  .financeExpenseDocumentAmount {
    grid-column: 2;
    justify-items: start;
  }

  .financeExpensesPagination,
  .financeExpenseDetailsActions,
  .financeExpenseActionModal footer {
    align-items: stretch;
    flex-direction: column;
  }

  .financeExpensesPagination > div,
  .financeExpenseDetailsActions button,
  .financeExpenseActionModal footer button {
    width: 100%;
  }

  .financeExpenseDetailsOverlay,
  .financeExpenseActionOverlay,
  .financeExpenseDocumentOverlay {
    align-items: end;
    padding: 0;
  }

  .financeExpenseDetailsModal,
  .financeExpenseActionModal,
  .financeExpenseDocumentModal {
    width: 100%;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
  }

  .financeExpenseDetailsHeader,
  .financeExpenseActionModal > header {
    padding: 16px;
  }

  .financeExpenseDetailsBody,
  .financeExpenseActionModal > form {
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .financeSupplierWorkspaceCard {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .financeSupplierWorkspaceState {
    grid-column: 2;
    justify-self: start;
  }
}

/* Finance theme bridge: late-cascade application rules. */
body .financeDashboard,
body .financeExpenseModal,
body .financeExpenseDetailsModal,
body .financeExpenseActionModal,
body .financeExpenseDocumentModal,
body .financeRecurringTemplateModal,
body .financePurchaseCreateModal,
body .financePurchaseDetailsModal,
body .financePurchaseReceiveModal,
body .financeSupplierCreateModal {
  color: var(--finance-text);
}

body .financeRefundSummary > div {
  border-color: var(--finance-border);
  background: var(--finance-surface-soft);
}

body .financeRefundSummary span {
  color: var(--finance-text-muted);
}

body .financeRefundSummary strong {
  color: var(--finance-text);
}

/* Refund is a high-attention action: keep every instruction comfortably readable. */
body .financeRefundModal {
  width: min(700px, 100%);
}

body .financeRefundModal .financeExpenseHeader {
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  gap: 16px;
  padding: 26px 28px;
}

body .financeRefundModal .financeExpenseHeaderIcon {
  width: 56px;
  height: 56px;
  font-size: 28px;
}

body .financeRefundModal .financeExpenseHeader > div:nth-child(2) > span {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.3;
}

body .financeRefundModal .financeExpenseHeader h2 {
  font-size: 28px;
  line-height: 1.15;
}

body .financeRefundModal .financeExpenseHeader p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

body .financeRefundModal .financeExpenseForm {
  padding: 24px 28px 28px;
}

body .financeRefundModal .financeRefundSummary > div {
  gap: 7px;
  padding: 16px 18px;
}

body .financeRefundModal .financeRefundSummary span {
  font-size: 12px;
  line-height: 1.35;
}

body .financeRefundModal .financeRefundSummary strong {
  font-size: 24px;
  line-height: 1.2;
}

body .financeRefundModal .financeExpenseAmountBlock {
  margin-bottom: 18px;
  padding: 18px;
}

body .financeRefundModal :is(
  .financeExpenseAmountBlock label > span,
  .financeExpenseField > span
) {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.35;
}

body .financeRefundModal .financeExpenseAmountInput input {
  height: 70px;
  font-size: 32px;
}

body .financeRefundModal .financeExpenseField textarea {
  min-height: 110px;
  padding: 14px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

body .financeRefundModal .financeExpenseField textarea::placeholder {
  font-size: 13px;
}

body .financeRefundModal .financeExpenseHint {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

body .financeRefundModal .financeExpenseHint > span {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

body .financeRefundModal .financeExpenseHint p {
  font-size: 12px;
  line-height: 1.55;
}

body .financeRefundModal .financeExpenseError {
  font-size: 12px;
  line-height: 1.45;
}

body .financeRefundModal .financeExpenseFooter {
  margin-top: 22px;
  padding-top: 20px;
}

body .financeRefundModal :is(
  .financeExpenseCancel,
  .financeExpenseSubmit
) {
  min-height: 50px;
  padding: 0 22px;
  font-size: 13px;
}

@media (max-width: 640px) {
  body .financeRefundModal .financeExpenseHeader {
    grid-template-columns: 46px minmax(0, 1fr) 42px;
    gap: 12px;
    padding: 20px 18px;
  }

  body .financeRefundModal .financeExpenseHeaderIcon {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }

  body .financeRefundModal .financeExpenseHeader h2 {
    font-size: 24px;
  }

  body .financeRefundModal .financeExpenseForm {
    padding: 20px 18px max(22px, env(safe-area-inset-bottom));
  }
}

body .financeHero,
body .financeExpensesHero,
body .financeKpiCard,
body .financePanel,
body .financeInsightPanel,
body .financeSectionNavigation,
body .financeOperationsFilters,
body .financeExpenseWorkspaceTabs,
body .financeExpenseKpi,
body .financeExpenseCategory,
body .financeExpenseCounterparty,
body .financeExpenseDocumentCard,
body .financeRecurringTemplateCard,
body .financeSupplierWorkspaceCard,
body .financePurchaseCard,
body .financePurchaseWorkspacePanel {
  border-color: var(--finance-border);
  background:
    radial-gradient(circle at 100% 0, var(--finance-accent-soft), transparent 44%),
    linear-gradient(145deg, var(--finance-surface-1), var(--finance-surface-2));
  box-shadow:
    0 20px 55px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body .financeHero,
body .financeExpensesHero {
  border-color: var(--finance-border-strong);
  background:
    radial-gradient(circle at 82% 10%, var(--finance-accent-soft), transparent 36%),
    radial-gradient(circle at 5% 100%, var(--finance-accent-soft), transparent 42%),
    linear-gradient(140deg, var(--finance-surface-1), var(--finance-surface-2));
}

body :is(
  .financeEyebrow,
  .financePanelHead span,
  .financeInsightPanel > div:last-child > span,
  .financeExpenseHeader > div:nth-child(2) > span,
  .financeExpenseSubsectionHead > span
) {
  color: var(--finance-accent);
}

body :is(
  .financePanelHead > strong,
  .financeChartEmpty > span,
  .financeExpenseTotalValue
) {
  color: var(--finance-accent-2);
}

body .financePanelHead > b,
body .financeInsightIcon,
body .financeExpenseKpiIcon,
body .financeExpenseCategoryIcon,
body .financeSupplierWorkspaceIcon,
body .financePurchaseCardIcon {
  border-color: var(--finance-border-strong);
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
}

body .financePresetSwitch,
body .financeDateRange,
body .financeDebtNumbers > div,
body .financeTransactionRow,
body .financeOperationCard,
body .financeTransactionsEmpty,
body .financeExpenseDetailsSummary,
body .financePurchaseDetailsItem,
body .financePurchaseReceiveItem {
  border-color: var(--finance-border);
  background: var(--finance-surface-soft);
}

body .financeTransactionRow:hover,
body .financeOperationCard:hover,
body .financePurchaseCard:hover,
body .financeExpenseDocumentCard:hover {
  background: var(--finance-surface-hover);
}

body .financePresetSwitch button.active,
body .financeSectionButton.active,
body .financeOperationsApply,
body .financeExpenseWorkspaceTabs button.active,
body .financeExpensesJournalButton,
body .financePurchaseCreateSubmit,
body .financePurchaseReceiveSubmit,
body .financeSupplierCreateSubmit {
  border-color: color-mix(in srgb, var(--finance-accent) 62%, white);
  background: linear-gradient(
    135deg,
    var(--finance-accent),
    color-mix(in srgb, var(--finance-accent) 72%, var(--finance-surface-2))
  );
  box-shadow: 0 10px 28px var(--finance-accent-glow);
  color: #fff;
}

body .financeSectionButton,
body .financeSectionButton span,
body .financeSectionButton small,
body .financePresetSwitch button {
  color: var(--finance-text-muted);
}

body .financeSectionButton span,
body .financeSectionButton small {
  background: var(--finance-surface-soft);
}

body .financeDateRange input,
body .financeOperationsFilters input,
body .financeOperationsFilters select,
body .financeExpenseField input,
body .financeExpenseField select,
body .financeExpenseField textarea,
body .financeExpenseDocumentFilters input,
body .financeExpenseDocumentFilters select,
body .financeExpenseDetailsFields input,
body .financeExpenseDetailsFields select,
body .financeExpenseDetailsFields textarea,
body .financePurchaseCreateModal input,
body .financePurchaseCreateModal select,
body .financePurchaseCreateModal textarea,
body .financePurchaseReceiveModal input,
body .financeSupplierCreateModal input,
body .financeSupplierCreateModal select,
body .financeSupplierCreateModal textarea {
  border-color: var(--finance-border);
  background: var(--finance-input);
  color: var(--finance-text-soft);
  color-scheme: var(--finance-color-scheme);
}

body .financeDateRange button {
  border-color: var(--finance-border-strong);
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
}

body .financeChartLine,
body .financeNetLine {
  stroke: var(--finance-accent);
  filter: drop-shadow(0 6px 9px var(--finance-accent-glow));
}

body .financeChartPoints circle,
body .financeNetPoint {
  fill: var(--finance-surface-2);
  stroke: var(--finance-accent-2);
}

body .financeCashflowLegend i.is-net,
body .financeMethodsLegend i.card {
  background: var(--finance-accent);
  box-shadow: 0 0 10px var(--finance-accent-glow);
}

body .financeDonut {
  background: conic-gradient(
    #63e1a0 0 var(--cash),
    var(--finance-accent) var(--cash) var(--card),
    #55b9ff var(--card) 100%
  );
}

body .financeDonut::before {
  background: var(--finance-surface-2);
}

body .financeProgress i,
body .financeExpenseCategoryProgress i,
body .financePurchaseProgress i {
  background: linear-gradient(90deg, #6fe5a6, var(--finance-accent));
}

body .financeExpenseBackdrop,
body .financeExpenseDetailsOverlay,
body .financeExpenseActionOverlay,
body .financeExpenseDocumentOverlay,
body .financePurchaseCreateOverlay,
body .financePurchaseDetailsOverlay,
body .financeSupplierCreateOverlay {
  background:
    radial-gradient(circle at 50% 20%, var(--finance-accent-soft), transparent 40%),
    var(--finance-overlay);
}

body .financeExpenseModal,
body .financeExpenseDetailsModal,
body .financeExpenseActionModal,
body .financeExpenseDocumentModal,
body .financeRecurringTemplateModal,
body .financePurchaseCreateModal,
body .financePurchaseDetailsModal,
body .financePurchaseReceiveModal,
body .financeSupplierCreateModal {
  border-color: var(--finance-border-strong);
  background:
    radial-gradient(circle at 0 0, var(--finance-accent-soft), transparent 36%),
    linear-gradient(145deg, var(--finance-surface-1), var(--finance-surface-2));
  box-shadow: 0 40px 105px var(--finance-shadow);
}

body :is(
  .financeHero p,
  .financeChartEmpty p,
  .financeInsightPanel p,
  .financeExpenseHeader p,
  .financeExpenseHint p,
  .financeOperationTitle span,
  .financeOperationContent p,
  .financeOperationContent small,
  .financeExpensesPagination > span,
  .financePurchasesPagination > span
) {
  color: var(--finance-text-muted);
}

body :is(
  .financeKpiCard > span,
  .financeKpiCard > small,
  .financeChartLabels,
  .financeCashflowLegend span,
  .financeCashflowAxisLabel,
  .financeCashflowDateLabel,
  .financeMethodsLegend span,
  .financeDebtNumbers span,
  .financeTransactionMain span,
  .financeTransactionAmount span,
  .financeOperationsFilters label > span,
  .financeOperationsPagination > span
) {
  color: var(--finance-text-faint);
  fill: var(--finance-text-faint);
}

body[data-theme="white"] .financeDashboard :is(h1, h2, h3),
body[data-theme="white"] .financeTransactionMain strong,
body[data-theme="white"] .financeOperationTitle strong,
body[data-theme="white"] .financeOperationContent p b,
body[data-theme="white"] .financeOperationAmount > strong,
body[data-theme="white"] .financeTransactionsEmpty strong,
body[data-theme="white"] :is(
  .financeExpenseModal,
  .financeExpenseDetailsModal,
  .financeExpenseActionModal,
  .financeExpenseDocumentModal,
  .financePurchaseCreateModal,
  .financePurchaseDetailsModal,
  .financePurchaseReceiveModal,
  .financeSupplierCreateModal
) :is(h1, h2, h3, strong) {
  color: var(--finance-text);
}

body[data-theme="white"] .financeKpiCard.is-profit,
body[data-theme="blue"] .financeKpiCard.is-profit,
body[data-theme="green"] .financeKpiCard.is-profit,
body[data-theme="black"] .financeKpiCard.is-profit {
  --finance-kpi-color: var(--finance-accent-2);
  --finance-kpi-glow: var(--finance-accent-soft);
}

/* =========================================================
   SHARED MODULE THEME BRIDGE
   Calendar and editor dialogs follow the saved clinic theme.
   ========================================================= */

:root,
body {
  --module-accent: var(--finance-accent);
  --module-accent-2: var(--finance-accent-2);
  --module-accent-soft: var(--finance-accent-soft);
  --module-accent-glow: var(--finance-accent-glow);
  --module-surface-1: var(--finance-surface-1);
  --module-surface-2: var(--finance-surface-2);
  --module-surface-soft: var(--finance-surface-soft);
  --module-surface-hover: var(--finance-surface-hover);
  --module-input: var(--finance-input);
  --module-border: var(--finance-border);
  --module-border-strong: var(--finance-border-strong);
  --module-text: var(--finance-text);
  --module-text-soft: var(--finance-text-soft);
  --module-text-muted: var(--finance-text-muted);
  --module-text-faint: var(--finance-text-faint);
  --module-overlay: var(--finance-overlay);
  --module-shadow: var(--finance-shadow);
  --module-color-scheme: var(--finance-color-scheme);
}

/* Calendar: day, week and month surfaces. */
body .calendarCard {
  color: var(--module-text);
  border-color: var(--module-border-strong);
  background:
    radial-gradient(circle at 100% 0, var(--module-accent-soft), transparent 40%),
    linear-gradient(145deg, var(--module-surface-1), var(--module-surface-2));
  box-shadow: 0 28px 80px var(--module-shadow);
}

body :is(
  .calendarModes,
  .calendarDate,
  .calDoctorHead,
  .calStaffPanel,
  .weekDayCol,
  .weekDayHead,
  .monthDay,
  .monthDrawerCard,
  .monthDrawerPlaceholder,
  .monthBulkBox,
  .specPanel
) {
  border-color: var(--module-border);
  background: var(--module-surface-soft);
}

body :is(
  .calSlot,
  .calEventCard,
  .calStaffDrag,
  .weekEventCard,
  .monthStaffPill,
  .monthEmptyShift,
  .monthShiftToggle
) {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
}

body :is(
  .calendarCard button.ghost,
  .calendarCard .miniBtn,
  .monthBulkDay,
  .monthBulkField input,
  .monthBulkField select
) {
  border-color: var(--module-border);
  background: var(--module-input);
  color: var(--module-text-soft);
  color-scheme: var(--module-color-scheme);
}

body :is(
  .calendarCard button.primary,
  .monthBulkApply,
  .monthShiftToggle.active
) {
  border-color: color-mix(in srgb, var(--module-accent) 58%, white) !important;
  background: linear-gradient(
    135deg,
    var(--module-accent),
    color-mix(in srgb, var(--module-accent) 72%, var(--module-surface-2))
  ) !important;
  box-shadow: 0 10px 28px var(--module-accent-glow) !important;
  color: #fff !important;
}

body :is(
  .calSlot:hover,
  .calSlotDrop,
  .monthDay:hover,
  .monthDay.selected,
  .monthDay.rangeSelected,
  .monthShiftToggle.active,
  .monthBulkDay.active
) {
  border-color: var(--module-accent) !important;
  background: var(--module-accent-soft) !important;
  box-shadow: 0 0 18px var(--module-accent-glow) !important;
}

body :is(
  .calendarHeader h2,
  .calendarDate,
  .calDoctorName,
  .calStaffPanelTitle,
  .calStaffDragName,
  .weekDayName,
  .weekEventTitle,
  .monthDayNum,
  .monthStaffPill,
  .monthDrawerTitle,
  .monthDrawerPlaceholderTitle,
  .monthBulkTitle
) {
  color: var(--module-text) !important;
}

body :is(
  .calendarCard .hint,
  .calTimeHead,
  .calTime,
  .calDoctorMeta,
  .calEventTime,
  .calEventMeta,
  .calStaffPanelSub,
  .calStaffDragRole,
  .weekDayDate,
  .weekEventVet,
  .weekEventMeta,
  .weekEmpty,
  .monthWeekHead div,
  .monthEmptyShift,
  .monthBulkField span
) {
  color: var(--module-text-muted) !important;
}

body :is(
  .weekEventTime,
  .monthVisitCount,
  .monthMore,
  .monthShiftToggle.active b,
  .monthBulkDay.active,
  .calEmptySlot:hover
) {
  color: var(--module-accent-2) !important;
}

body .calendar-top-scrollbar-container::-webkit-scrollbar-track {
  background: var(--module-surface-soft);
}

body .calendar-top-scrollbar-container::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--module-accent) 42%, transparent);
}

body .calendar-top-scrollbar-container::-webkit-scrollbar-thumb:hover {
  background: var(--module-accent);
}

/* Shared themed backdrops and modal shells. */
body :is(
  .pugOwnerOverlay,
  .hospitalAdmissionBackdrop,
  .serviceEditorBackdrop,
  .stockEditorBackdrop,
  #staffDrawer
) {
  background:
    radial-gradient(circle at 50% 22%, var(--module-accent-soft), transparent 42%),
    var(--module-overlay) !important;
}

body :is(
  .pugOwnerModal,
  .hospitalAdmissionModal,
  .serviceEditorModal,
  .stockEditorModal,
  #staffDrawer .modal-window
) {
  color: var(--module-text);
  border-color: var(--module-border-strong) !important;
  background:
    radial-gradient(circle at 100% 0, var(--module-accent-soft), transparent 38%),
    linear-gradient(145deg, var(--module-surface-1), var(--module-surface-2)) !important;
  box-shadow:
    0 38px 105px var(--module-shadow),
    0 0 38px var(--module-accent-glow) !important;
}

body :is(
  .pugQuickGroup,
  .hospitalAdmissionSection,
  .hospitalPatientSelectItem,
  .hospitalPatientSelectEmpty,
  .serviceEditorStatus,
  .serviceEditorPreview,
  .stockEditorStatus,
  .stockEditorPreview
) {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
}

body :is(
  .pugVisitInput,
  .hospitalAdmissionInput,
  .hospitalAdmissionTextarea,
  .serviceEditorField input,
  .serviceEditorField select,
  .stockEditorField input,
  .stockEditorField select,
  #staffDrawer .premium-input,
  #staffDrawer .premium-select
) {
  border-color: var(--module-border) !important;
  background: var(--module-input) !important;
  color: var(--module-text) !important;
  color-scheme: var(--module-color-scheme);
}

body :is(
  .pugVisitInput,
  .hospitalAdmissionInput,
  .hospitalAdmissionTextarea,
  .serviceEditorField input,
  .serviceEditorField select,
  .stockEditorField input,
  .stockEditorField select,
  #staffDrawer .premium-input,
  #staffDrawer .premium-select
):focus {
  border-color: var(--module-accent) !important;
  box-shadow:
    0 0 0 3px var(--module-accent-soft),
    0 0 20px var(--module-accent-glow) !important;
}

#staffDrawer .staffSpecializationSelect {
  position: relative;
  width: 100%;
}

#staffDrawer .staffSpecializationToggle {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--module-border);
  border-radius: 12px;
  background: var(--module-input);
  color: var(--module-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#staffDrawer .staffSpecializationSelect.open .staffSpecializationToggle {
  border-color: var(--module-accent);
  box-shadow:
    0 0 0 3px var(--module-accent-soft),
    0 0 20px var(--module-accent-glow);
}

#staffDrawer .staffSpecializationSummary {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

#staffDrawer .staffSpecializationPlaceholder {
  color: var(--module-text-muted);
  font-size: 14px;
  font-weight: 650;
}

#staffDrawer .staffSpecializationChip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--specialization-color) 48%, transparent);
  background: color-mix(in srgb, var(--specialization-color) 16%, transparent);
  color: var(--module-text);
  font-size: 12px;
  font-weight: 850;
}

#staffDrawer .staffSpecializationChevron {
  flex: 0 0 auto;
  color: var(--module-text-muted);
  transition: transform 0.18s ease;
}

#staffDrawer .staffSpecializationSelect.open .staffSpecializationChevron {
  transform: rotate(180deg);
}

#staffDrawer .staffSpecializationMenu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 230px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--module-border-strong);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, var(--module-accent-soft), transparent 45%),
    var(--module-surface-1);
  box-shadow:
    0 22px 55px var(--module-shadow),
    0 0 24px var(--module-accent-glow);
  backdrop-filter: blur(22px);
}

#staffDrawer .staffSpecializationOption {
  min-height: 42px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--module-text-soft);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

#staffDrawer .staffSpecializationOption:hover,
#staffDrawer .staffSpecializationOption:has(input:checked) {
  border-color: var(--module-border);
  background: var(--module-accent-soft);
}

#staffDrawer .staffSpecializationOption input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#staffDrawer .staffSpecDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

#staffDrawer .staffSpecializationOptionName {
  font-size: 14px;
  font-weight: 780;
}

#staffDrawer .staffSpecializationCheckmark {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--module-border);
  border-radius: 7px;
  color: transparent;
  background: var(--module-input);
  font-size: 13px;
  font-weight: 900;
}

#staffDrawer .staffSpecializationOption input:checked ~ .staffSpecializationCheckmark {
  border-color: var(--module-accent);
  background: var(--module-accent);
  color: #fff;
  box-shadow: 0 0 14px var(--module-accent-glow);
}

body :is(
  .pugVisitIcon,
  .hospitalAdmissionSectionTitle > span,
  .hospitalPatientSelectAvatar,
  .serviceEditorIcon,
  .serviceEditorPreviewIcon,
  .stockEditorIcon,
  .stockEditorPreviewIcon
) {
  border-color: var(--module-border-strong) !important;
  background: var(--module-accent-soft) !important;
  color: var(--module-accent-2) !important;
  box-shadow: 0 0 24px var(--module-accent-glow) !important;
}

body :is(
  .hospitalAdmissionEyebrow,
  .hospitalPatientSelectCheck,
  .serviceEditorEyebrow,
  .stockEditorEyebrow,
  .pugQuickGroupTitle
) {
  color: var(--module-accent-2) !important;
}

body :is(
  .pugVisitTitle,
  .pugQuickGroupTitle,
  .hospitalAdmissionHeader h2,
  .hospitalAdmissionSectionTitle strong,
  .hospitalPatientSelectItem strong,
  .hospitalPatientSelectEmpty strong,
  .hospitalSelectedPatientPreview strong,
  .serviceEditorHeader h2,
  .serviceEditorStatus strong,
  .serviceEditorPreview strong,
  .stockEditorHeader h2,
  .stockEditorStatus strong,
  .stockEditorPreview strong,
  #staffDrawer h3
) {
  color: var(--module-text) !important;
}

body :is(
  .pugVisitSub,
  .pugVisitField > span,
  .hospitalAdmissionHeader p,
  .hospitalAdmissionSectionTitle small,
  .hospitalAdmissionField > span,
  .hospitalPatientSelectItem small,
  .hospitalPatientSelectEmpty span,
  .hospitalSelectedPatientPreview span,
  .hospitalSelectedPatientPreview small,
  .serviceEditorHeader p,
  .serviceEditorField > span,
  .serviceEditorStatus span,
  .serviceEditorPreview span,
  .serviceEditorPreview small,
  .stockEditorHeader p,
  .stockEditorField > span,
  .stockEditorStatus span,
  .stockEditorPreview span,
  .stockEditorPreview small,
  #staffDrawer .modal-window > div
) {
  color: var(--module-text-muted) !important;
}

body :is(
  .pugVisitClose,
  .hospitalAdmissionClose,
  .serviceEditorClose,
  .stockEditorClose,
  .pugVisitCancel,
  .hospitalAdmissionCancel,
  .serviceEditorCancel,
  .stockEditorCancel,
  #staffDrawer .premium-secondary-btn
) {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
  color: var(--module-text-soft) !important;
  box-shadow: none !important;
}

body :is(
  .pugVisitSave,
  .hospitalAdmissionSubmit,
  .serviceEditorSubmit,
  .stockEditorSubmit,
  #staffDrawer #staffSave
) {
  border-color: color-mix(in srgb, var(--module-accent) 58%, white) !important;
  background: linear-gradient(
    135deg,
    var(--module-accent),
    color-mix(in srgb, var(--module-accent) 72%, var(--module-surface-2))
  ) !important;
  color: #fff !important;
  box-shadow:
    0 12px 30px var(--module-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body :is(
  .servicesPremiumSwitch,
  .stockPremiumSwitch
) input:checked + span {
  background: linear-gradient(
    135deg,
    var(--module-accent),
    var(--module-accent-2)
  ) !important;
  box-shadow: 0 0 16px var(--module-accent-glow);
}

body .pugVisitFoot {
  border-color: var(--module-border) !important;
  background: color-mix(in srgb, var(--module-surface-2) 90%, transparent) !important;
}

body .hospitalPatientSelectItem:hover,
body .hospitalPatientSelectItem.selected {
  border-color: var(--module-accent) !important;
  background: var(--module-accent-soft) !important;
}

body .hospitalAdmissionSpinner {
  border-top-color: var(--module-accent);
}

body[data-theme="white"] :is(
  .calendarCard,
  .pugOwnerModal,
  .hospitalAdmissionModal,
  .serviceEditorModal,
  .stockEditorModal,
  #staffDrawer .modal-window
) {
  box-shadow: 0 28px 80px var(--module-shadow) !important;
}

/* Hospital, services and stock page headers and controls. */
body :is(
  .hospitalHero,
  .servicesPremiumHero,
  .stockPremiumHero
) {
  border-color: var(--module-border-strong) !important;
  background:
    radial-gradient(circle at 92% 10%, var(--module-accent-soft), transparent 38%),
    linear-gradient(145deg, var(--module-surface-1), var(--module-surface-2)) !important;
  box-shadow: 0 25px 70px var(--module-shadow) !important;
}

body :is(
  .hospitalEyebrow,
  .servicesPremiumEyebrow,
  .stockPremiumEyebrow
) {
  color: var(--module-accent-2) !important;
}

body :is(
  .hospitalHero h1,
  .servicesPremiumHero h1,
  .stockPremiumHero h1
) {
  color: var(--module-text) !important;
}

body :is(
  .hospitalHero p,
  .servicesPremiumHero p,
  .stockPremiumHero p
) {
  color: var(--module-text-muted) !important;
}

body :is(
  .hospitalAdmitButton,
  .servicesPremiumAddButton,
  .stockPremiumAddButton
) {
  border-color: color-mix(in srgb, var(--module-accent) 58%, white) !important;
  background: linear-gradient(
    135deg,
    var(--module-accent),
    color-mix(in srgb, var(--module-accent) 72%, var(--module-surface-2))
  ) !important;
  color: #fff !important;
  box-shadow: 0 14px 35px var(--module-accent-glow) !important;
}

body :is(
  .hospitalStatCard,
  .servicesPremiumStat,
  .stockPremiumStat,
  .hospitalPatientCard,
  .servicesPremiumCard,
  .stockPremiumCard,
  .hospitalFilters,
  .servicesPremiumStatusFilter,
  .stockPremiumFilters,
  .stockAdvancedFilters
) {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
}

body :is(
  .hospitalStatCard strong,
  .servicesPremiumStat strong,
  .stockPremiumStat strong,
  .hospitalPatientIdentity h2,
  .servicesPremiumGroupTitle h2,
  .servicesPremiumCardBody h3,
  .servicesPremiumCardPrice strong,
  .stockPremiumGroupTitle h2,
  .stockPremiumCardBody h3,
  .stockPremiumPrices strong,
  .stockPremiumQuantity strong
) {
  color: var(--module-text);
}

body :is(
  .hospitalStatCard span,
  .hospitalStatCard small,
  .hospitalPatientIdentity p,
  .hospitalInfoRow span,
  .servicesPremiumStat span,
  .servicesPremiumStat small,
  .servicesPremiumGroupTitle p,
  .servicesPremiumCardPrice span,
  .servicesPremiumCardStatus,
  .stockPremiumStat span,
  .stockPremiumStat small,
  .stockPremiumGroupTitle p,
  .stockPremiumPrices span,
  .stockPremiumQuantity span,
  .stockPremiumQuantity small,
  .stockPremiumCardValue,
  .stockAdvancedFilter > span
) {
  color: var(--module-text-muted);
}

body .servicesPremiumStatPrice strong,
body .stockPremiumStatUnits strong {
  color: var(--module-accent-2) !important;
}

body :is(
  .hospitalSearch,
  .servicesPremiumSearchWrap,
  .stockPremiumSearch,
  .stockPremiumSelect
) {
  border-color: var(--module-border) !important;
  background: var(--module-input) !important;
  color: var(--module-text) !important;
  color-scheme: var(--module-color-scheme);
}

body :is(
  .servicesPremiumSearchWrap input,
  .stockPremiumSearch input
) {
  color: var(--module-text) !important;
}

body :is(
  .hospitalSearch,
  .servicesPremiumSearchWrap input,
  .stockPremiumSearch input,
  .stockPremiumSelect
)::placeholder {
  color: var(--module-text-faint) !important;
}

body .stockPremiumSelect option {
  background: var(--module-surface-2);
  color: var(--module-text);
}

body :is(
  .hospitalSearch,
  .servicesPremiumSearchWrap,
  .stockPremiumSearch,
  .stockPremiumSelect
):focus,
body :is(
  .servicesPremiumSearchWrap,
  .stockPremiumSearch
):focus-within {
  border-color: var(--module-accent) !important;
  box-shadow: 0 0 0 3px var(--module-accent-soft) !important;
}

body :is(
  .hospitalFilter,
  .servicesPremiumStatusFilter button,
  .servicesPremiumCategory,
  .stockPremiumFilters button,
  .stockPremiumGroupFilters button,
  .stockPremiumCategories button
) {
  color: var(--module-text-muted) !important;
}

body :is(
  .servicesPremiumCategory,
  .stockPremiumGroupFilters button,
  .stockPremiumCategories button
) {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
}

body :is(
  .hospitalFilter.active,
  .servicesPremiumStatusFilter button.active,
  .servicesPremiumCategory.active,
  .stockPremiumFilters button.active,
  .stockPremiumGroupFilters button.active,
  .stockPremiumCategories button.active
) {
  border-color: var(--module-border-strong) !important;
  background: var(--module-accent-soft) !important;
  color: var(--module-accent-2) !important;
  box-shadow:
    inset 0 0 0 1px var(--module-border-strong),
    0 7px 18px var(--module-accent-glow) !important;
}

body :is(
  .hospitalPatientAvatar,
  .servicesPremiumCardIcon,
  .stockPremiumGroupTitle > span,
  .stockPremiumCardIcon
) {
  border-color: var(--module-border-strong) !important;
  background: var(--module-accent-soft) !important;
}

body :is(
  .servicesPremiumCardCategory,
  .stockPremiumCardCategory,
  .stockSelectArrow
) {
  color: var(--module-accent-2) !important;
}

body .stockPremiumGroupHead > div:last-child {
  background: linear-gradient(90deg, var(--module-border-strong), transparent);
}

body :is(
  .hospitalNextAction,
  .hospitalPrimaryButton
) {
  border-color: var(--module-border-strong) !important;
  background: var(--module-accent-soft) !important;
  color: var(--module-accent-2) !important;
}

body .hospitalNextAction strong {
  color: var(--module-accent-2) !important;
}

body :is(
  .hospitalGhostButton,
  .servicesPremiumCardActions button
) {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
  color: var(--module-text-soft) !important;
}

body[data-theme="white"] :is(
  .hospitalHero,
  .servicesPremiumHero,
  .stockPremiumHero
) {
  box-shadow: 0 25px 65px var(--module-shadow) !important;
}

/* Settings page and global header theme bridge. */
body .top-logo,
body .user-profile-badge > div:first-child {
  color: var(--module-text) !important;
}

body .user-profile-badge > div:last-child {
  color: var(--module-text-muted) !important;
}

body .user-profile-badge {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
}

body .clinicSettingsPage {
  color: var(--module-text);
}

body :is(
  .clinicSettingsUser,
  .clinicSettingsPanel
) {
  border-color: var(--module-border-strong) !important;
  background:
    radial-gradient(circle at 0 0, var(--module-accent-soft), transparent 36%),
    linear-gradient(145deg, var(--module-surface-1), var(--module-surface-2)) !important;
  box-shadow: 0 24px 70px var(--module-shadow) !important;
}

body .clinicSettingsPanel::before {
  background: linear-gradient(120deg, var(--module-surface-soft), transparent 32%);
}

body :is(
  .clinicSettingsHero h1,
  .clinicSettingsUser span,
  .clinicSettingsPanelHead h2,
  .clinicBrandUploadText strong,
  .clinicPersonalBlock h3,
  .clinicSettingsLogoutRow strong
) {
  color: var(--module-text) !important;
}

body :is(
  .clinicSettingsKicker,
  .clinicPreviewKicker,
  .clinicSettingsHero p,
  .clinicSettingsPanelHead p,
  .clinicSettingsLoading,
  .clinicSettingsField > span,
  .clinicBrandUploadText p,
  .clinicProfileSaveStatus,
  .clinicPersonalBlock p,
  .clinicSettingsLogoutRow span
) {
  color: var(--module-text-muted) !important;
}

body :is(
  .clinicSettingsUser strong,
  .clinicOwnerBadge
) {
  color: var(--module-accent-2) !important;
}

body :is(
  .clinicSettingsPanelIcon,
  .clinicOwnerBadge
) {
  border-color: var(--module-border-strong) !important;
  background: var(--module-accent-soft) !important;
  box-shadow: 0 10px 26px var(--module-accent-glow) !important;
}

body :is(
  .clinicSettingsInput,
  .clinicColorField input[type="color"]
) {
  border-color: var(--module-border) !important;
  background-color: var(--module-input) !important;
  color: var(--module-text) !important;
  color-scheme: var(--module-color-scheme);
}

body .clinicSettingsInput::placeholder {
  color: var(--module-text-faint) !important;
}

body .clinicSettingsInput:focus {
  border-color: var(--module-accent) !important;
  background-color: var(--module-input) !important;
  box-shadow:
    0 0 0 4px var(--module-accent-soft),
    0 12px 30px var(--module-shadow) !important;
}

body select.clinicSettingsInput {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--module-text-muted) 50%),
    linear-gradient(135deg, var(--module-text-muted) 50%, transparent 50%);
}

body :is(
  .clinicBrandUpload,
  .clinicPersonalBlock,
  .clinicThemeChoice,
  .clinicSettingsLogoutRow
) {
  border-color: var(--module-border) !important;
  background: var(--module-surface-soft) !important;
}

body .clinicBrandPreview {
  border-color: var(--module-border) !important;
  background:
    radial-gradient(circle at center, var(--module-accent-soft), transparent 68%),
    var(--module-input) !important;
}

body .clinicBrandPreview span {
  color: var(--module-text-faint) !important;
}

body .clinicBrandUpload:hover,
body .clinicThemeChoice:hover {
  border-color: var(--module-border-strong) !important;
  background: var(--module-surface-hover) !important;
}

body .clinicBrandUploadButton {
  border-color: var(--module-border-strong) !important;
  background: var(--module-accent-soft) !important;
  color: var(--module-accent-2) !important;
}

body .clinicThemeChoice {
  color: var(--module-text-soft) !important;
}

body .clinicThemeChoice.active {
  border-color: var(--module-accent) !important;
  background: var(--module-accent-soft) !important;
  box-shadow:
    0 0 0 3px var(--module-accent-soft),
    0 12px 30px var(--module-accent-glow) !important;
  color: var(--module-text) !important;
}

body :is(
  .clinicProfileSaveButton,
  .clinicThemeSaveButton
) {
  border-color: color-mix(in srgb, var(--module-accent) 58%, white) !important;
  background: linear-gradient(
    135deg,
    var(--module-accent),
    color-mix(in srgb, var(--module-accent) 72%, var(--module-surface-2))
  ) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px var(--module-accent-glow) !important;
}

body .clinicProfileActions {
  border-color: var(--module-border) !important;
}

/* The white theme needs dark header text and a soft active dock item. */
body[data-theme="white"] .mac-dock .menu-item.active,
body[data-theme="white"] .dock-menu .menu-item.active {
  border-color: var(--module-border-strong) !important;
  background: var(--module-accent-soft) !important;
  box-shadow: 0 6px 18px var(--module-accent-glow) !important;
}

body[data-theme="white"] .mac-dock .menu-item.active a,
body[data-theme="white"] .dock-menu .menu-item.active a {
  background: transparent !important;
  color: var(--module-accent) !important;
  box-shadow: none !important;
}

body[data-theme="white"] :is(
  .clinicSettingsUser,
  .clinicSettingsPanel
) {
  box-shadow: 0 20px 55px var(--module-shadow) !important;
}

/* Platform owner: atomic clinic provisioning. */
.platformClinicLayout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 22px;
  align-items: start;
}

.platformClinicForm,
.platformClinicsColumn {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--module-border);
  border-radius: 20px;
  background: var(--module-surface-soft);
}

.platformClinicFormTitle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.platformClinicFormTitle strong {
  color: var(--module-text);
  font-size: 15px;
  font-weight: 800;
}

.platformClinicFormTitle span {
  color: var(--module-text-muted);
  font-size: 11px;
  text-align: right;
}

.platformClinicFormActions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.platformClinicFormActions > span {
  margin-right: auto;
  color: var(--module-accent-2);
  font-size: 12px;
  font-weight: 700;
}

.platformClinicFormActions > span.error,
.platformClinicEmpty.error {
  color: #ff8fa3;
}

.platformClinicFormActions button,
.platformCopyCredentialsButton {
  min-height: 44px;
  padding: 0 18px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--module-accent) 58%, white);
  border-radius: 13px;
  background: linear-gradient(
    135deg,
    var(--module-accent),
    color-mix(in srgb, var(--module-accent) 70%, var(--module-surface-2))
  );
  box-shadow: 0 12px 30px var(--module-accent-glow);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.platformClinicFormActions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.platformClinicsList {
  display: flex;
  max-height: 555px;
  overflow: auto;
  flex-direction: column;
  gap: 9px;
  padding-right: 3px;
}

.platformClinicItem {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--module-border);
  border-radius: 15px;
  background: var(--module-input);
}

.platformClinicMark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--module-border-strong);
  border-radius: 13px;
  background: var(--module-accent-soft);
}

.platformClinicMark[data-clinic-theme="black"] { filter: grayscale(0.65); }
.platformClinicMark[data-clinic-theme="blue"] { filter: hue-rotate(45deg); }
.platformClinicMark[data-clinic-theme="green"] { filter: hue-rotate(100deg); }

.platformClinicMeta,
.platformClinicState {
  min-width: 0;
}

.platformClinicMeta strong,
.platformClinicMeta span,
.platformClinicState strong,
.platformClinicState span {
  display: block;
}

.platformClinicMeta strong {
  overflow: hidden;
  color: var(--module-text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platformClinicMeta span,
.platformClinicState strong {
  margin-top: 4px;
  color: var(--module-text-muted);
  font-size: 10px;
}

.platformClinicState {
  text-align: right;
}

.platformClinicState strong {
  margin: 0 0 4px;
}

.platformClinicState span {
  color: #75d7a2;
  font-size: 10px;
  font-weight: 800;
}

.platformClinicState span.inactive {
  color: #ff8fa3;
}

.platformSubscriptionRow {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--module-border);
}

.platformSubscriptionRow > div:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.platformSubscriptionRow strong,
.platformSubscriptionRow small {
  color: var(--module-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.platformSubscriptionBadge {
  padding: 5px 8px;
  border: 1px solid var(--module-border-strong);
  border-radius: 999px;
  background: var(--module-accent-soft);
  color: var(--module-accent-2);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.platformSubscriptionBadge.active { color: #75d7a2; }
.platformSubscriptionBadge.expiring { color: #ffc66f; }
.platformSubscriptionBadge.expired,
.platformSubscriptionBadge.paused { color: #ff8fa3; }

.platformSubscriptionActions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.platformSubscriptionActions button,
.platformSubscriptionEditorActions button {
  min-height: 30px;
  padding: 0 10px;
  cursor: pointer;
  border: 1px solid var(--module-border-strong);
  border-radius: 9px;
  background: var(--module-accent-soft);
  color: var(--module-accent-2);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

.platformSubscriptionActions button:first-child {
  border-color: color-mix(in srgb, #55d99b 44%, var(--module-border));
  color: #75d7a2;
}

.platformSubscriptionActions button:disabled,
.platformSubscriptionEditorActions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.platformSubscriptionEditor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--module-border);
  border-radius: 13px;
  background: var(--module-surface-soft);
}

.platformSubscriptionEditor[hidden] {
  display: none;
}

.platformSubscriptionEditor label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.platformSubscriptionEditor label.wide,
.platformSubscriptionEditor > p,
.platformSubscriptionEditorActions,
.platformSubscriptionHistory {
  grid-column: 1 / -1;
}

.platformSubscriptionEditor label > span {
  color: var(--module-text-muted);
  font-size: 9px;
  font-weight: 800;
}

.platformSubscriptionEditor input {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--module-border);
  outline: none;
  border-radius: 9px;
  background: var(--module-input);
  color: var(--module-text);
  color-scheme: var(--module-color-scheme);
  font: inherit;
  font-size: 11px;
}

.platformSubscriptionEditor input:focus {
  border-color: var(--module-accent);
  box-shadow: 0 0 0 3px var(--module-accent-soft);
}

.platformSubscriptionEditor > p {
  margin: 0;
  color: var(--module-text-faint);
  font-size: 9px;
  line-height: 1.4;
}

.platformSubscriptionEditorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.platformSubscriptionEditorActions button:first-child {
  background: var(--module-accent);
  color: #fff;
}

.platformSubscriptionHistory {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--module-border);
  color: var(--module-text-muted);
  font-size: 10px;
}

.platformSubscriptionHistory[hidden] {
  display: none;
}

.platformSubscriptionHistory > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 8px;
  border-radius: 9px;
  background: var(--module-input);
}

.platformSubscriptionHistory strong {
  color: var(--module-text);
}

.platformSubscriptionHistory span,
.platformSubscriptionHistory small {
  color: var(--module-text-muted);
}

.platformClinicEmpty {
  padding: 34px 16px;
  border: 1px dashed var(--module-border);
  border-radius: 15px;
  color: var(--module-text-muted);
  font-size: 12px;
  text-align: center;
}

.platformClinicCredentials {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, #55d99b 44%, var(--module-border));
  border-radius: 20px;
  background: color-mix(in srgb, #38c985 9%, var(--module-surface-1));
}

.platformClinicCredentials[hidden] {
  display: none;
}

.platformClinicCredentials > div > span,
.platformClinicCredentials > div > strong,
.platformClinicCredentials > div > p {
  display: block;
}

.platformClinicCredentials > div > span {
  margin-bottom: 5px;
  color: #75d7a2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platformClinicCredentials > div > strong {
  color: var(--module-text);
  font-size: 17px;
}

.platformClinicCredentials > div > p {
  margin: 6px 0 0;
  color: var(--module-text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.platformClinicCredentials dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.platformClinicCredentials dl > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--module-border);
  border-radius: 12px;
  background: var(--module-input);
}

.platformClinicCredentials dt {
  margin-bottom: 4px;
  color: var(--module-text-muted);
  font-size: 9px;
  text-transform: uppercase;
}

.platformClinicCredentials dd {
  overflow: hidden;
  margin: 0;
  color: var(--module-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ownerSubscriptionStatus {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px solid var(--module-border-strong);
  border-radius: 20px;
  background:
    linear-gradient(135deg, var(--module-accent-soft), transparent 62%),
    var(--module-surface-1);
  box-shadow: 0 16px 40px var(--module-shadow);
  color: var(--module-text);
}

.ownerSubscriptionStatus.expired,
.ownerSubscriptionStatus.paused {
  border-color: color-mix(in srgb, #ff6f87 42%, var(--module-border));
}

.ownerSubscriptionStatus.expiring {
  border-color: color-mix(in srgb, #ffc66f 42%, var(--module-border));
}

.ownerSubscriptionIcon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--module-border-strong);
  border-radius: 15px;
  background: var(--module-accent-soft);
  font-size: 21px;
}

.ownerSubscriptionStatus > div:nth-child(2) > span,
.ownerSubscriptionStatus > div:nth-child(2) > strong,
.ownerSubscriptionStatus > div:nth-child(2) > p {
  display: block;
}

.ownerSubscriptionStatus > div:nth-child(2) > span {
  margin-bottom: 4px;
  color: var(--module-accent-2);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.ownerSubscriptionStatus > div:nth-child(2) > strong {
  font-size: 15px;
}

.ownerSubscriptionStatus > div:nth-child(2) > p {
  margin: 4px 0 0;
  color: var(--module-text-muted);
  font-size: 11px;
}

.ownerSubscriptionDays {
  min-width: 90px;
  text-align: right;
}

.ownerSubscriptionDays strong,
.ownerSubscriptionDays span {
  display: block;
}

.ownerSubscriptionDays strong {
  font-size: 24px;
}

.ownerSubscriptionDays span {
  color: var(--module-text-muted);
  font-size: 9px;
}

@media (max-width: 980px) {
  .platformClinicLayout,
  .platformClinicCredentials {
    grid-template-columns: 1fr;
  }

  .platformCopyCredentialsButton {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .platformClinicForm,
  .platformClinicsColumn {
    padding: 15px;
  }

  .platformClinicItem {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .platformClinicState {
    grid-column: 2;
    text-align: left;
  }

  .platformClinicCredentials dl {
    grid-template-columns: 1fr;
  }

  .platformSubscriptionRow,
  .platformSubscriptionRow > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .platformSubscriptionActions {
    width: 100%;
  }

  .platformSubscriptionActions button {
    flex: 1;
  }

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

  .platformSubscriptionEditor label,
  .platformSubscriptionEditor label.wide {
    grid-column: 1;
  }

  .ownerSubscriptionStatus {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .ownerSubscriptionDays {
    grid-column: 2;
    text-align: left;
  }
}

/* Team specialization editor. */
.specializationEditorOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 22px;
}

.specializationEditorBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 22%, var(--module-accent-soft), transparent 42%),
    var(--module-overlay);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: default;
}

.specializationEditorModal {
  position: relative;
  z-index: 1;
  width: min(520px, 94vw);
  padding: 28px;
  border: 1px solid var(--module-border-strong);
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0, var(--module-accent-soft), transparent 38%),
    linear-gradient(145deg, var(--module-surface-1), var(--module-surface-2));
  box-shadow:
    0 38px 105px var(--module-shadow),
    0 0 38px var(--module-accent-glow);
  color: var(--module-text);
  animation: specializationEditorOpen 0.18s ease-out;
}

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

.specializationEditorClose {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--module-border);
  border-radius: 11px;
  background: var(--module-surface-soft);
  color: var(--module-text-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.specializationEditorHeader {
  display: flex;
  gap: 14px;
  padding-right: 34px;
}

.specializationEditorIcon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border: 1px solid var(--module-border-strong);
  border-radius: 16px;
  background: var(--module-accent-soft);
  box-shadow: 0 0 24px var(--module-accent-glow);
  color: var(--module-accent-2);
  font-size: 1.2rem;
}

.specializationEditorEyebrow {
  color: var(--module-accent-2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.specializationEditorHeader h2 {
  margin: 4px 0 0;
  color: var(--module-text);
  font-size: 1.55rem;
}

.specializationEditorHeader p {
  margin: 7px 0 0;
  color: var(--module-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.specializationEditorForm {
  margin-top: 23px;
}

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

.specializationEditorField > span,
.specializationEditorColorField strong {
  color: var(--module-text-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.specializationEditorField input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--module-border);
  border-radius: 13px;
  outline: none;
  background: var(--module-input);
  color: var(--module-text);
  font: inherit;
  color-scheme: var(--module-color-scheme);
}

.specializationEditorField input::placeholder {
  color: var(--module-text-faint);
}

.specializationEditorField input:focus {
  border-color: var(--module-accent);
  box-shadow:
    0 0 0 3px var(--module-accent-soft),
    0 0 20px var(--module-accent-glow);
}

.specializationEditorColorField {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--module-border);
  border-radius: 14px;
  background: var(--module-surface-soft);
}

.specializationEditorColorField > span,
.specializationEditorColorField small {
  display: block;
}

.specializationEditorColorField small {
  margin-top: 4px;
  color: var(--module-text-muted);
  font-size: 0.68rem;
}

.specializationEditorColorField input {
  width: 48px;
  height: 40px;
  flex: 0 0 48px;
  padding: 4px;
  border: 1px solid var(--module-border);
  border-radius: 11px;
  background: var(--module-input);
  cursor: pointer;
}

.specializationEditorColorField input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.specializationEditorColorField input::-webkit-color-swatch {
  border: 0;
  border-radius: 7px;
}

.specializationEditorError {
  min-height: 18px;
  margin-top: 9px;
  color: #ff8295;
  font-size: 0.72rem;
  font-weight: 700;
}

.specializationEditorActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.specializationEditorCancel,
.specializationEditorSubmit {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 13px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.specializationEditorCancel {
  border: 1px solid var(--module-border);
  background: var(--module-surface-soft);
  color: var(--module-text-soft);
}

.specializationEditorSubmit {
  border: 1px solid color-mix(in srgb, var(--module-accent) 58%, white);
  background: linear-gradient(
    135deg,
    var(--module-accent),
    color-mix(in srgb, var(--module-accent) 72%, var(--module-surface-2))
  );
  box-shadow: 0 12px 30px var(--module-accent-glow);
  color: #fff;
}

@media (max-width: 560px) {
  .specializationEditorModal {
    padding: 23px 17px;
  }

  .specializationEditorHeader {
    padding-right: 30px;
  }

  .specializationEditorActions {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   PUGCRM — CALENDAR FULL WIDTH DESKTOP
   Большой рабочий календарь + компактная панель справа
========================================================= */

/* Только на странице календаря расширяем общий рабочий холст */
.main-content:has(
  .page[data-page="calendar"].active
) {
  width: calc(100vw - 32px) !important;
  max-width: none !important;

  margin-left: 16px !important;
  margin-right: 16px !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Сама страница календаря занимает всю доступную ширину */
.page[data-page="calendar"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Контейнер, в который JS вставляет календарь */
.page[data-page="calendar"]
#calendar-grid-target {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Главная карточка календаря */
.page[data-page="calendar"]
.calendarCard {
  width: 100% !important;
  max-width: none !important;

  padding: 24px !important;
  border-radius: 26px !important;
}

/* Календарь слева, ветеринары узкой колонкой справа */
.page[data-page="calendar"]
.calendarWorkArea {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    220px !important;

  gap: 14px !important;
  align-items: start !important;

  width: 100% !important;
  min-width: 0 !important;
}

/* Левая рабочая часть должна уметь занимать всё свободное место */
.page[data-page="calendar"]
.calendarMainArea {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Основной скролл календаря */
.page[data-page="calendar"]
.calendarDayGrid {
  width: 100% !important;
  min-width: 0 !important;

  grid-template-columns:
    62px
    minmax(0, 1fr) !important;

  gap: 10px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Колонки врачей чуть компактнее:
   на большом экране больше врачей видно сразу */
.page[data-page="calendar"]
.calDoctorsGrid {
  grid-auto-columns:
    minmax(220px, 1fr) !important;

  gap: 10px !important;
}

/* Убираем старое минимальное ограничение 250px */
.page[data-page="calendar"]
.calDoctorCol {
  min-width: 220px !important;
}

/* Чуть уменьшаем внутренние отступы заголовков врачей */
.page[data-page="calendar"]
.calDoctorHead {
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

/* Правая панель у самого края */
.page[data-page="calendar"]
.calStaffPanel {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;

  position: sticky !important;
  top: 18px !important;

  padding: 12px !important;
  border-radius: 18px !important;

  max-height:
    calc(100vh - 180px) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Компактнее заголовок панели */
.page[data-page="calendar"]
.calStaffPanelHead {
  margin-bottom: 10px !important;
}

/* Компактные карточки ветеринаров */
.page[data-page="calendar"]
.calStaffDragList {
  gap: 8px !important;
}

.page[data-page="calendar"]
.calStaffDrag {
  min-height: 0 !important;

  padding:
    9px 10px !important;

  margin-bottom: 0 !important;

  border-radius: 13px !important;
}

.page[data-page="calendar"]
.calStaffDragName {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}

.page[data-page="calendar"]
.calStaffDragRole {
  font-size: 0.67rem !important;
  line-height: 1.2 !important;
}

/* Немного больше полезной высоты ячеек */
.page[data-page="calendar"]
.calSlot {
  min-height: 82px !important;
  margin-bottom: 7px !important;
}

/* Верхняя полоса прокрутки тоже занимает весь календарь */
.page[data-page="calendar"]
.calTopScroll {
  width: 100% !important;
  max-width: 100% !important;
}

/* На средних ноутбуках панель всё ещё справа */
@media (
  min-width: 1101px
) and (
  max-width: 1350px
) {
  .page[data-page="calendar"]
  .calendarWorkArea {
    grid-template-columns:
      minmax(0, 1fr)
      200px !important;
  }

  .page[data-page="calendar"]
  .calStaffPanel {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }

  .page[data-page="calendar"]
  .calDoctorsGrid {
    grid-auto-columns:
      minmax(210px, 1fr) !important;
  }

  .page[data-page="calendar"]
  .calDoctorCol {
    min-width: 210px !important;
  }
}

/* На планшете панель переносится вниз */
@media (
  max-width: 1100px
) {
  .main-content:has(
    .page[data-page="calendar"].active
  ) {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .page[data-page="calendar"]
  .calendarWorkArea {
    grid-template-columns:
      1fr !important;
  }

  .page[data-page="calendar"]
  .calStaffPanel {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    max-height: none !important;
  }

  .page[data-page="calendar"]
  .calStaffDragList {
    display: grid !important;

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(180px, 1fr)
      ) !important;
  }
}
/* =========================
   OWNER EXISTS MODAL
========================= */

.pugOwnerExistsModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pugOwnerExistsModal.is-open {
  display: flex !important;
}

.pugOwnerExistsBackdrop {
  position: absolute;
  inset: 0;
  background:
    rgba(2, 8, 20, 0.72);
  backdrop-filter: blur(8px);
}

.pugOwnerExistsDialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 24px;
  padding: 26px 24px 22px;
  background:
    linear-gradient(
      180deg,
      rgba(12, 24, 46, 0.96) 0%,
      rgba(8, 18, 36, 0.98) 100%
    );
  border: 1px solid
    rgba(103, 201, 255, 0.20);
  box-shadow:
    0 22px 70px
      rgba(0, 0, 0, 0.45),
    0 0 0 1px
      rgba(255,255,255,0.03) inset,
    0 0 32px
      rgba(130, 84, 255, 0.16);
  color: #fff;
  overflow: hidden;
}

.pugOwnerExistsDialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      #7b5cff 0%,
      #48d8ff 100%
    );
  opacity: 0.95;
}

.pugOwnerExistsClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  color: #d9e8ff;
  font-size: 24px;
  line-height: 1;
  background:
    rgba(255,255,255,0.06);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.pugOwnerExistsClose:hover {
  background:
    rgba(255,255,255,0.12);
  transform: scale(1.04);
}

.pugOwnerExistsHead {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.pugOwnerExistsIcon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(123, 92, 255, 0.24),
      rgba(72, 216, 255, 0.18)
    );
  border: 1px solid
    rgba(255,255,255,0.10);
  box-shadow:
    0 10px 24px
      rgba(72, 216, 255, 0.08);
  flex-shrink: 0;
}

.pugOwnerExistsHead h3 {
  margin: 0 0 6px;
  font-size: 1.28rem;
  font-weight: 800;
  color: #fff;
}

.pugOwnerExistsHead p {
  margin: 0;
  color: rgba(218, 231, 255, 0.72);
  line-height: 1.5;
  font-size: 0.95rem;
}

.pugOwnerExistsCard {
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  background:
    rgba(255,255,255,0.04);
  border: 1px solid
    rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pugOwnerExistsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pugOwnerExistsRow span {
  color: rgba(208, 223, 255, 0.64);
  font-size: 0.92rem;
}

.pugOwnerExistsRow b {
  color: #ffffff;
  font-size: 0.98rem;
  text-align: right;
}

.pugOwnerExistsHint {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    rgba(72, 216, 255, 0.07);
  border: 1px solid
    rgba(72, 216, 255, 0.14);
  color: rgba(224, 239, 255, 0.80);
  line-height: 1.5;
  font-size: 0.92rem;
}

.pugOwnerExistsActions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.pugOwnerExistsBtn {
  min-width: 160px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

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

.pugOwnerExistsBtn.ghost {
  color: #dbe8ff;
  background:
    rgba(255,255,255,0.07);
  border: 1px solid
    rgba(255,255,255,0.08);
}

.pugOwnerExistsBtn.ghost:hover {
  background:
    rgba(255,255,255,0.12);
}

.pugOwnerExistsBtn.primary {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #39c8ff 0%,
      #5a8cff 100%
    );
  box-shadow:
    0 12px 30px
      rgba(57, 200, 255, 0.20);
}

.pugOwnerExistsBtn.primary:hover {
  box-shadow:
    0 16px 36px
      rgba(57, 200, 255, 0.26);
}

@media (max-width: 640px) {
  .pugOwnerExistsDialog {
    padding: 22px 18px 18px;
    border-radius: 20px;
  }

  .pugOwnerExistsRow {
    flex-direction: column;
    align-items: flex-start;
  }

  .pugOwnerExistsRow b {
    text-align: left;
  }

  .pugOwnerExistsActions {
    flex-direction: column;
  }

  .pugOwnerExistsBtn {
    width: 100%;
  }
}
#ownerExistsModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

#ownerExistsModal
.pugOwnerExistsBackdrop {
  pointer-events: auto !important;
}

#ownerExistsModal
.pugOwnerExistsDialog {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#ownerExistsModal
button {
  pointer-events: auto !important;
}
/* Попередження поверх усіх CRM-модалок */
#deleteModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

#deleteModal .modalBackdrop,
#deleteModal .deleteBackdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

#deleteModal .modalContent,
#deleteModal .deleteModalContent,
#deleteModal .deleteDialog {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
/* =========================================================
   PUGCRM — OWNER PAGE STRICT PREMIUM PATCH
   Более строгая страница владельца
   ========================================================= */

.page[data-page="owner"] {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-bottom: 120px;
}

/* ---------- Верхняя карточка владельца ---------- */

.page[data-page="owner"] .owner-hero {
  position: relative;
  overflow: hidden;

  width: 100%;
  margin: 0 0 28px;
  padding: 28px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 25, 44, 0.94),
      rgba(6, 14, 27, 0.96)
    ) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.08) !important;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  backdrop-filter:
    blur(24px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(135%);
}

.page[data-page="owner"] .owner-hero::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent-color),
      transparent
    );

  opacity: 0.72;
}

.page[data-page="owner"] .owner-hero::after {
  content: "";

  position: absolute;
  top: -120px;
  left: -80px;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  background:
    var(--accent-color);

  opacity: 0.07;

  filter:
    blur(90px);

  pointer-events: none;
}

/* ---------- Заголовок списка животных ---------- */

.page[data-page="owner"]
.ownerPetsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin:
    0 0 14px;

  padding:
    0 2px;
}

.page[data-page="owner"]
.ownerPetsHeader h3 {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.9);

  font-size:
    1rem;

  font-weight:
    750;

  letter-spacing:
    -0.01em;
}

/* ---------- Кнопка добавления животного ---------- */

.page[data-page="owner"]
#btnAddPet {
  min-height:
    42px;

  padding:
    0 18px;

  border-radius:
    12px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 36%,
      rgba(255, 255, 255, 0.08)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-color) 18%,
      rgba(255, 255, 255, 0.025)
    );

  color:
    #ffffff;

  font-size:
    0.8rem;

  font-weight:
    800;

  letter-spacing:
    0.025em;

  box-shadow:
    0 8px 24px
    color-mix(
      in srgb,
      var(--accent-color) 15%,
      transparent
    );

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.page[data-page="owner"]
#btnAddPet:hover {
  transform:
    translateY(-1px);

  background:
    color-mix(
      in srgb,
      var(--accent-color) 25%,
      rgba(255, 255, 255, 0.03)
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 52%,
      rgba(255, 255, 255, 0.1)
    );

  box-shadow:
    0 12px 28px
    color-mix(
      in srgb,
      var(--accent-color) 20%,
      transparent
    );
}

/* ---------- Контейнер животных ---------- */

.page[data-page="owner"]
.pets-container {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(300px, 1fr)
    );

  gap:
    12px;

  width:
    100%;

  padding:
    14px;

  border-radius:
    20px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07) !important;

  background:
    rgba(4, 11, 22, 0.54) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

/* ---------- Карточка животного ---------- */

.page[data-page="owner"]
.pet-card {
  position:
    relative;

  min-height:
    92px;

  padding:
    16px 14px 16px 18px !important;

  border-radius:
    16px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.065) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.018)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease !important;
}

.page[data-page="owner"]
.pet-card::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    14px;

  bottom:
    14px;

  width:
    3px;

  border-radius:
    0 3px 3px 0;

  background:
    var(--accent-color);

  opacity:
    0.55;
}

.page[data-page="owner"]
.pet-card:hover {
  transform:
    translateY(-2px) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 28%,
      rgba(255, 255, 255, 0.08)
    ) !important;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--accent-color) 7%,
        rgba(255, 255, 255, 0.035)
      ),
      rgba(255, 255, 255, 0.02)
    ) !important;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, 0.2),
    inset 0 1px 0
    rgba(255, 255, 255, 0.035) !important;
}

/* ---------- Кнопки редактирования и удаления ---------- */

.page[data-page="owner"]
.pet-card
.iconBtn {
  width:
    34px !important;

  height:
    34px !important;

  min-width:
    34px !important;

  min-height:
    34px !important;

  padding:
    0 !important;

  border-radius:
    10px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  color:
    rgba(255, 255, 255, 0.52) !important;

  background:
    rgba(255, 255, 255, 0.035) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.075) !important;

  box-shadow:
    none !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease !important;
}

.page[data-page="owner"]
.pet-card
.iconBtn:hover {
  transform:
    translateY(-1px) !important;

  color:
    #ffffff !important;

  background:
    color-mix(
      in srgb,
      var(--accent-color) 13%,
      rgba(255, 255, 255, 0.035)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 30%,
      rgba(255, 255, 255, 0.08)
    ) !important;

  box-shadow:
    none !important;
}

.page[data-page="owner"]
.pet-card
.iconBtn[data-del-pet]:hover {
  color:
    #ff8998 !important;

  background:
    rgba(255, 79, 103, 0.08) !important;

  border-color:
    rgba(255, 99, 119, 0.2) !important;

  box-shadow:
    none !important;
}

.page[data-page="owner"]
.pet-card
.iconBtn svg {
  pointer-events:
    none;

  display:
    block;
}

/* ---------- Светлая тема ---------- */

body[data-theme="white"]
.page[data-page="owner"]
.owner-hero {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.86),
      rgba(239, 243, 249, 0.8)
    ) !important;

  border-color:
    rgba(0, 0, 0, 0.07) !important;

  box-shadow:
    0 18px 44px rgba(32, 48, 73, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body[data-theme="white"]
.page[data-page="owner"]
.ownerPetsHeader h3 {
  color:
    #1c1c1e;
}

body[data-theme="white"]
.page[data-page="owner"]
.pets-container {
  background:
    rgba(255, 255, 255, 0.5) !important;

  border-color:
    rgba(0, 0, 0, 0.065) !important;
}

body[data-theme="white"]
.page[data-page="owner"]
.pet-card {
  background:
    rgba(255, 255, 255, 0.72) !important;

  border-color:
    rgba(0, 0, 0, 0.065) !important;

  color:
    #1c1c1e;
}

body[data-theme="white"]
.page[data-page="owner"]
.pet-card
.iconBtn {
  color:
    rgba(28, 28, 30, 0.48) !important;

  background:
    rgba(255, 255, 255, 0.72) !important;

  border-color:
    rgba(0, 0, 0, 0.08) !important;
}

/* ---------- Адаптив ---------- */

@media (max-width: 760px) {
  .page[data-page="owner"] {
    padding-inline:
      4px;
  }

  .page[data-page="owner"]
  .owner-hero {
    padding:
      20px;

    border-radius:
      20px;
  }

  .page[data-page="owner"]
  .ownerPetsHeader {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .page[data-page="owner"]
  #btnAddPet {
    width:
      100%;
  }

  .page[data-page="owner"]
  .pets-container {
    grid-template-columns:
      1fr;

    padding:
      10px;
  }
}
/* =====================================================
   КАЛЕНДАРЬ — СТРОГАЯ КНОПКА "НОВИЙ ПАЦІЄНТ"
===================================================== */

#visitModal .pugAddPatientBtn {
  width: 100%;
  min-height: 44px;

  margin-top: 12px;
  padding: 0 16px;

  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      var(--accent-color) 11%,
      rgba(255, 255, 255, 0.025)
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 30%,
      rgba(255, 255, 255, 0.08)
    ) !important;

  color: rgba(255, 255, 255, 0.82) !important;

  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0;

  box-shadow: none !important;
  text-shadow: none !important;

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

#visitModal .pugAddPatientBtn:hover {
  transform: translateY(-1px);

  background:
    color-mix(
      in srgb,
      var(--accent-color) 17%,
      rgba(255, 255, 255, 0.035)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 44%,
      rgba(255, 255, 255, 0.1)
    ) !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

#visitModal .pugAddPatientBtn:active {
  transform: translateY(0);
}
/* =====================================================
   PUGCRM — CALENDAR EVENT EDIT MODAL
===================================================== */

.calEditOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.calEditOverlay.open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.calEditBackdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(3, 5, 12, 0.78);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.calEditModal {
  position: relative;
  z-index: 2;

  width:
    min(720px, 96vw);

  max-height:
    min(780px, 92vh);

  overflow: auto;

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 27, 39, 0.98),
      rgba(10, 12, 19, 0.99)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 26%,
      rgba(255, 255, 255, 0.08)
    );

  box-shadow:
    0 36px 100px
      rgba(0, 0, 0, 0.58),
    0 0 50px
      color-mix(
        in srgb,
        var(--accent-color) 12%,
        transparent
      ),
    inset 0 1px 0
      rgba(255, 255, 255, 0.06);

  color: #ffffff;

  animation:
    calEditModalAppear
    0.2s ease both;
}

@keyframes calEditModalAppear {
  from {
    opacity: 0;
    transform:
      translateY(12px)
      scale(0.98);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

.calEditHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    24px 24px 18px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);
}

.calEditHeaderMain {
  display: flex;
  align-items: center;
  gap: 14px;
}

.calEditHeaderIcon {
  width: 48px;
  height: 48px;

  flex:
    0 0 48px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background:
    color-mix(
      in srgb,
      var(--accent-color) 18%,
      rgba(255, 255, 255, 0.035)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 34%,
      rgba(255, 255, 255, 0.08)
    );
}

.calEditTitle {
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.calEditSubtitle {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 0.86rem;
}

.calEditClose {
  width: 42px;
  height: 42px;

  padding: 0;

  border-radius: 13px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  background:
    rgba(255, 255, 255, 0.035);

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 1.55rem;
  cursor: pointer;
}

.calEditClose:hover {
  color: #ffffff;

  background:
    rgba(255, 255, 255, 0.075);
}

.calEditPatient {
  display: flex;
  align-items: center;
  gap: 12px;

  margin:
    18px 24px 0;

  padding:
    14px 16px;

  border-radius: 16px;

  background:
    color-mix(
      in srgb,
      var(--accent-color) 8%,
      rgba(255, 255, 255, 0.025)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 20%,
      rgba(255, 255, 255, 0.07)
    );
}

.calEditPatientIcon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.05);
}

.calEditPatient span {
  display: block;

  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.calEditPatient strong {
  display: block;
  margin-top: 3px;

  color: #ffffff;
  font-size: 0.98rem;
}

.calEditBody {
  padding: 20px 24px 24px;
}

.calEditGrid {
  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 16px;
}

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

.calEditFieldWide {
  grid-column: 1 / -1;
}

.calEditField > span {
  color:
    rgba(255, 255, 255, 0.58);

  font-size: 0.8rem;
  font-weight: 700;
}

.calEditInput,
.calEditTextarea {
  width: 100%;

  border-radius: 13px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  background:
    rgba(0, 0, 0, 0.25);

  color: #ffffff;

  font: inherit;
  font-size: 0.92rem;

  outline: none;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.calEditInput {
  min-height: 46px;
  padding: 0 13px;
}

.calEditTextarea {
  min-height: 110px;
  padding: 13px;

  resize: vertical;
  line-height: 1.45;
}

.calEditInput:focus,
.calEditTextarea:focus {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 65%,
      white
    );

  background:
    rgba(0, 0, 0, 0.34);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--accent-color) 12%,
      transparent
    );
}

.calEditInput option {
  background: #15161d;
  color: #ffffff;
}

.calEditFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 12px;

  padding:
    18px 24px 24px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.07);
}

.calEditCancel,
.calEditSave {
  min-height: 46px;

  padding:
    0 20px;

  border-radius: 13px;

  font-size: 0.88rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.calEditCancel {
  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  background:
    rgba(255, 255, 255, 0.035);

  color:
    rgba(255, 255, 255, 0.72);
}

.calEditCancel:hover {
  color: #ffffff;

  background:
    rgba(255, 255, 255, 0.075);
}

.calEditSave {
  min-width: 190px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 54%,
      rgba(255, 255, 255, 0.1)
    );

  background:
    var(--accent-color);

  color: #ffffff;

  box-shadow:
    0 10px 26px
    color-mix(
      in srgb,
      var(--accent-color) 22%,
      transparent
    );
}

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

.calEditSave:disabled {
  opacity: 0.58;
  cursor: wait;
  transform: none;
}

body.calendarEditModalOpen {
  overflow: hidden;
}

@media (max-width: 650px) {
  .calEditOverlay {
    padding: 10px;
  }

  .calEditModal {
    width: 100%;
    border-radius: 22px;
  }

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

  .calEditFieldWide {
    grid-column: auto;
  }

  .calEditFooter {
    flex-direction: column-reverse;
  }

  .calEditCancel,
  .calEditSave {
    width: 100%;
  }
}
.calEditFooterActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calEditStart {
  min-height: 46px;
  padding: 0 20px;

  border-radius: 13px;

  border: 1px solid
    color-mix(
      in srgb,
      #37d98b 55%,
      rgba(255, 255, 255, 0.1)
    );

  background:
    rgba(55, 217, 139, 0.14);

  color: #8ff0bd;

  font-size: 0.88rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

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

  background:
    rgba(55, 217, 139, 0.22);

  border-color:
    rgba(91, 235, 160, 0.6);

  color: #ffffff;
}

.calEditStart:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

@media (max-width: 650px) {
  .calEditFooterActions {
    width: 100%;
    flex-direction: column;
  }

  .calEditStart {
    width: 100%;
  }
}
/* =======================================
   СТАТУСИ ВІЗИТІВ У КАРТЦІ ПАЦІЄНТА
======================================= */

.premiumVisitStatus {
  min-height: 34px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;

  border-radius: 999px;
  border: 1px solid transparent;
}

.premiumVisitStatusPlanned {
  color: rgba(229, 214, 255, 0.92);
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.24);
}

.premiumVisitStatusInProgress {
  color: #ffd978;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

.premiumVisitStatusCompleted {
  color: #7ff0b1;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
}

/* Карточка: заплановано */
.premiumVisitCardPlanned {
  --accent-color: #a855f7;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168, 85, 247, 0.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(28, 19, 51, 0.72),
      rgba(13, 10, 29, 0.80)
    );

  border-color: rgba(168, 85, 247, 0.12);
  backdrop-filter: blur(12px);
}

/* Карточка: прийом триває */
.premiumVisitCardInProgress {
  --accent-color: #f59e0b;

  border-color: rgba(245, 158, 11, 0.28);

  box-shadow:
    0 16px 46px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(245, 158, 11, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* Карточка: завершено */
.premiumVisitCardCompleted {
  --accent-color: #22c55e;

  border-color: rgba(34, 197, 94, 0.24);

  box-shadow:
    0 16px 46px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(34, 197, 94, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.premiumVisitCardCompleted .premiumVisitOpenHint {
  color: rgba(179, 241, 205, 0.72);
}

.premiumVisitCardInProgress .premiumVisitOpenHint {
  color: rgba(255, 226, 153, 0.72);
}

.premiumVisitCardPlanned .premiumVisitOpenHint {
  color: rgba(226, 214, 245, 0.60);
}
.page[data-page="calendar"]
.calSlot {
  position: relative;
  overflow: visible !important;
}

.page[data-page="calendar"]
.calDoctorCol {
  position: relative;
}

.page[data-page="calendar"]
.calEventCard {
  box-sizing: border-box;
}

.page[data-page="calendar"]
.calSlotCovered {
  opacity: 1;
}

.page[data-page="calendar"]
.calSlotCovered::after {
  content: "Зайнято до завершення прийому";

  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 8px;

  color: rgba(255, 255, 255, 0.22);
  font-size: 10px;
  font-weight: 700;

  pointer-events: none;
}
.page[data-page="calendar"]
.calEventCard {
  box-sizing: border-box;

  border-radius: 14px;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.page[data-page="calendar"]
.calEventCard:hover {
  z-index: 12 !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(255, 255, 255, 0.04);
}
/* ==========================================================
   PUGCRM — CONTINUOUS DAY TIMELINE
   ========================================================== */

.page[data-page="calendar"]
.calendarDayGrid {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 0;

  padding: 0;
  overflow: auto;

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;

  background: rgba(0, 0, 0, 0.08);
}

.page[data-page="calendar"]
.calendarTimelineTimeColumn {
  position: sticky;
  left: 0;
  z-index: 20;

  min-width: 68px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 10, 20, 0.93),
      rgba(12, 10, 20, 0.86)
    );

  border-right:
    1px solid
    rgba(255, 255, 255, 0.075);

  backdrop-filter: blur(18px);
}

.page[data-page="calendar"]
.calendarTimelineTimeHead {
  height: 82px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(255, 255, 255, 0.32);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);
}

.page[data-page="calendar"]
.calendarTimelineTimeBody {
  position: relative;
}

.page[data-page="calendar"]
.calendarTimelineTimeLabel {
  position: absolute;
  left: 0;
  right: 0;

  transform: translateY(-7px);

  padding-right: 11px;

  color: rgba(255, 255, 255, 0.38);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  line-height: 14px;

  pointer-events: none;
}

.page[data-page="calendar"]
.calendarDoctorsTimelineGrid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(245px, 1fr);

  min-width: max-content;
}

.page[data-page="calendar"]
.calendarDoctorTimelineColumn {
  min-width: 245px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.06);
}

.page[data-page="calendar"]
.calendarDoctorTimelineColumn:last-child {
  border-right: 0;
}

.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  height: 82px;
  padding: 13px 15px;

  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-content: center;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.018)
    );

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);
}

.page[data-page="calendar"]
.calendarDoctorAvatar {
  grid-row: 1 / 3;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  color: #fff;
  font-size: 14px;
  font-weight: 850;

  background:
    color-mix(
      in srgb,
      var(--doctor-color) 20%,
      rgba(255, 255, 255, 0.035)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--doctor-color) 42%,
      transparent
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.07);
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity {
  min-width: 0;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity strong {
  display: block;
  overflow: hidden;

  color: rgba(255, 255, 255, 0.91);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity span {
  display: block;
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.37);
  font-size: 10px;
  font-weight: 600;
}

.page[data-page="calendar"]
.calendarDoctorSpecializations {
  grid-column: 2;
  min-width: 0;
  margin-top: 5px;
}

.page[data-page="calendar"]
.calendarDoctorTimeline {
  position: relative;

  cursor: crosshair;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012),
      transparent 50%,
      rgba(255, 255, 255, 0.012)
    );
}

.page[data-page="calendar"]
.calendarDoctorTimeline:hover {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.006),
      rgba(255, 255, 255, 0.018)
    );
}

.page[data-page="calendar"]
.calendarDoctorTimeline.is-drag-over {
  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 6%,
      transparent
    );
}

.page[data-page="calendar"]
.calendarTimelineHourLine,
.page[data-page="calendar"]
.calendarTimelineHalfLine {
  position: absolute;
  left: 0;
  right: 0;

  pointer-events: none;
}

.page[data-page="calendar"]
.calendarTimelineHourLine {
  height: 1px;

  background:
    rgba(255, 255, 255, 0.065);
}

.page[data-page="calendar"]
.calendarTimelineHalfLine {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 50%,
      transparent 50%
    );

  background-size:
    8px 1px;
}

.page[data-page="calendar"]
.calendarTimelineHover {
  position: absolute;
  left: 7px;
  right: 7px;
  z-index: 3;

  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  transform:
    translateY(-13px);

  color:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 78%,
      white
    );

  font-size: 10px;
  font-weight: 800;

  background:
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 9%,
      transparent
    );

  border:
    1px dashed
    color-mix(
      in srgb,
      var(--accent-color, #a855f7) 35%,
      transparent
    );

  border-radius: 8px;

  pointer-events: none;
}

.page[data-page="calendar"]
.calendarTimelineHover[hidden] {
  display: none;
}

.page[data-page="calendar"]
.calendarTimelineHover span {
  font-size: 14px;
  line-height: 1;
}

.page[data-page="calendar"]
.calendarTimelineEvent {
  position: absolute;
  left: 6px;
  right: 6px;
  z-index: 7;

  min-height: 42px;
  padding: 9px 30px 9px 12px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.88);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.035)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.095);

  border-radius: 11px;

  box-shadow:
    0 8px 20px
      rgba(0, 0, 0, 0.17),
    inset 0 1px 0
      rgba(255, 255, 255, 0.045);

  cursor: pointer;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.page[data-page="calendar"]
.calendarTimelineEvent:hover {
  z-index: 14;

  transform:
    translateY(-1px);

  border-color:
    rgba(255, 255, 255, 0.16);

  box-shadow:
    0 12px 26px
      rgba(0, 0, 0, 0.24),
    inset 0 1px 0
      rgba(255, 255, 255, 0.065);
}

.page[data-page="calendar"]
.calendarTimelineEventAccent {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 5px;

  width: 3px;

  border-radius: 99px;

  background:
    var(
      --doctor-color,
      var(--accent-color, #a855f7)
    );

  opacity: 0.82;
}

.page[data-page="calendar"]
.calendarTimelineEventContent {
  padding-left: 4px;
  min-width: 0;
}

.page[data-page="calendar"]
.calendarTimelineEventHead {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 6px;
}

.page[data-page="calendar"]
.calendarTimelineEventTime {
  min-width: 0;
  flex: 1;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.43);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.015em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.page[data-page="calendar"]
.calendarTimelineEventTitle {
  margin-top: 4px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.page[data-page="calendar"]
.calendarTimelineEventNote {
  margin-top: 4px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  font-weight: 550;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.page[data-page="calendar"]
.calendarTimelineStatus {
  min-height: 18px;
  padding: 0 6px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.page[data-page="calendar"]
.calendarStatusPlanned {
  color: rgba(223, 211, 247, 0.75);

  background:
    rgba(168, 85, 247, 0.08);

  border:
    1px solid
    rgba(168, 85, 247, 0.15);
}

.page[data-page="calendar"]
.calendarStatusInProgress {
  color: #f4d074;

  background:
    rgba(245, 158, 11, 0.08);

  border:
    1px solid
    rgba(245, 158, 11, 0.18);
}

.page[data-page="calendar"]
.calendarStatusCompleted {
  color: #73dda2;

  background:
    rgba(34, 197, 94, 0.075);

  border:
    1px solid
    rgba(34, 197, 94, 0.16);
}

.page[data-page="calendar"]
.calendarCardInProgress {
  background:
    linear-gradient(
      145deg,
      rgba(245, 158, 11, 0.075),
      rgba(255, 255, 255, 0.032)
    );

  border-color:
    rgba(245, 158, 11, 0.16);
}

.page[data-page="calendar"]
.calendarCardCompleted {
  opacity: 0.72;

  background:
    linear-gradient(
      145deg,
      rgba(34, 197, 94, 0.055),
      rgba(255, 255, 255, 0.025)
    );

  border-color:
    rgba(34, 197, 94, 0.13);
}

.page[data-page="calendar"]
.calendarTimelineEventMenu {
  position: absolute;
  top: 7px;
  right: 7px;

  width: 21px;
  height: 21px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -1px;

  background: transparent;
  border: 0;
  border-radius: 6px;

  opacity: 0;

  cursor: pointer;

  transition:
    opacity 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.page[data-page="calendar"]
.calendarTimelineEvent:hover
.calendarTimelineEventMenu {
  opacity: 1;
}

.page[data-page="calendar"]
.calendarTimelineEventMenu:hover {
  color: #ff8f99;
  background:
    rgba(255, 75, 90, 0.1);
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-compact {
  padding-top: 6px;
  padding-bottom: 6px;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-compact
.calendarTimelineEventNote {
  display: none;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineStatus {
  display: none;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineEventTitle {
  margin-top: 1px;
  font-size: 10px;
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineTimeColumn {
  background:
    rgba(242, 245, 250, 0.92);
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  background:
    rgba(255, 255, 255, 0.52);
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarDoctorTimeline {
  background:
    rgba(255, 255, 255, 0.19);
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineHourLine {
  background:
    rgba(26, 29, 38, 0.075);
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineHalfLine {
  background:
    linear-gradient(
      90deg,
      rgba(26, 29, 38, 0.035) 50%,
      transparent 50%
    );

  background-size:
    8px 1px;
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineTimeLabel {
  color:
    rgba(26, 29, 38, 0.42);
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineEvent {
  color: #1c1c1e;

  background:
    rgba(255, 255, 255, 0.8);

  border-color:
    rgba(26, 29, 38, 0.09);

  box-shadow:
    0 5px 16px
      rgba(43, 47, 58, 0.09),
    inset 0 1px 0
      rgba(255, 255, 255, 0.95);
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineEventTitle {
  color: #25252b;
}

body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineEventTime,
body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineEventNote {
  color:
    rgba(37, 37, 43, 0.48);
}

/* =========================================================
   WHITE THEME — CLINICAL EDITORIAL
   Сдержанная премиальная тема без неонового свечения.
   ========================================================= */

body[data-theme="white"] {
  --accent-color: #526b73;
  --accent-glow: rgba(82, 107, 115, 0.11);
  --primary-neon: #526b73;
  --primary-glow: 0 7px 18px rgba(61, 79, 86, 0.12);

  --bg-gradient:
    linear-gradient(
      145deg,
      #efefeb 0%,
      #f7f7f4 48%,
      #eceeec 100%
    );

  --card-bg: rgba(255, 255, 253, 0.88);
  --glass-bg: rgba(255, 255, 253, 0.84);
  --glass-border: rgba(45, 55, 59, 0.09);
  --glass-blur: blur(22px) saturate(118%);

  --text-main: #23282b;
  --text-muted: #737b7f;
  --input-bg: rgba(255, 255, 253, 0.92);

  --color-success: #477a67;
  --color-warning: #9b7438;
  --color-danger: #a95858;

  --shadow-premium:
    0 20px 55px rgba(42, 49, 52, 0.07),
    0 2px 7px rgba(42, 49, 52, 0.035);

  --finance-accent: #526b73;
  --finance-accent-2: #6f858c;
  --finance-accent-soft: rgba(82, 107, 115, 0.085);
  --finance-accent-glow: rgba(82, 107, 115, 0.11);
  --finance-surface-1: rgba(255, 255, 253, 0.97);
  --finance-surface-2: rgba(246, 247, 244, 0.98);
  --finance-surface-soft: rgba(48, 61, 66, 0.035);
  --finance-surface-hover: rgba(82, 107, 115, 0.055);
  --finance-input: rgba(255, 255, 253, 0.94);
  --finance-border: rgba(45, 55, 59, 0.095);
  --finance-border-strong: rgba(82, 107, 115, 0.2);
  --finance-text: #23282b;
  --finance-text-soft: rgba(35, 40, 43, 0.74);
  --finance-text-muted: rgba(52, 61, 65, 0.54);
  --finance-text-faint: rgba(59, 68, 72, 0.38);
  --finance-overlay: rgba(32, 38, 40, 0.42);
  --finance-shadow: rgba(44, 52, 55, 0.09);

  --pet-modal-accent: #526b73;
  --pet-modal-accent-2: #6f858c;
  --pet-modal-accent-soft: rgba(82, 107, 115, 0.085);
  --pet-modal-accent-border: rgba(82, 107, 115, 0.35);
  --pet-modal-focus-ring: rgba(82, 107, 115, 0.1);

  --med-accent: #526b73;
  --med-accent-soft: rgba(82, 107, 115, 0.08);
  --med-accent-border: rgba(82, 107, 115, 0.22);
}

body[data-theme="white"] {
  background: var(--bg-gradient) !important;
  color: var(--text-main) !important;
}

body[data-theme="white"] .glass-card,
body[data-theme="white"] .glass-panel,
body[data-theme="white"] .data-table-container,
body[data-theme="white"] .calendar-container,
body[data-theme="white"] .patient-premium-card,
body[data-theme="white"] .patient-hero,
body[data-theme="white"] .owner-hero {
  background: rgba(255, 255, 253, 0.86) !important;
  border: 1px solid rgba(45, 55, 59, 0.085) !important;
  box-shadow:
    0 20px 55px rgba(42, 49, 52, 0.065),
    0 2px 7px rgba(42, 49, 52, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(22px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(118%) !important;
}

body[data-theme="white"] :is(
  h1,
  h2,
  h3,
  h4,
  .text-main,
  .section-card-title,
  .current-date-title
) {
  color: #23282b !important;
}

body[data-theme="white"] :is(
  .text-muted,
  .hint,
  .field-title
) {
  color: #737b7f !important;
}

body[data-theme="white"] .search-bar input {
  background: rgba(255, 255, 253, 0.88) !important;
  border: 1px solid rgba(45, 55, 59, 0.09) !important;
  color: #23282b !important;
  box-shadow:
    0 8px 24px rgba(42, 49, 52, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body[data-theme="white"] .search-bar input::placeholder {
  color: #8a9194 !important;
}

body[data-theme="white"] .search-bar input:focus {
  border-color: rgba(82, 107, 115, 0.4) !important;
  box-shadow:
    0 0 0 3px rgba(82, 107, 115, 0.09),
    0 10px 26px rgba(42, 49, 52, 0.06) !important;
}

body[data-theme="white"] .user-profile-badge {
  background: rgba(255, 255, 253, 0.76) !important;
  border: 1px solid rgba(45, 55, 59, 0.08) !important;
  box-shadow: 0 9px 26px rgba(42, 49, 52, 0.055) !important;
}

body[data-theme="white"] .mac-dock {
  background: rgba(255, 255, 253, 0.92) !important;
  border: 1px solid rgba(45, 55, 59, 0.1) !important;
  box-shadow:
    0 16px 38px rgba(42, 49, 52, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(115%) !important;
}

body[data-theme="white"] .dock-menu .menu-item {
  box-shadow: none !important;
}

body[data-theme="white"] .dock-menu .menu-item a {
  color: #737b7f !important;
}

body[data-theme="white"] .dock-menu .menu-item:hover {
  background: rgba(82, 107, 115, 0.055) !important;
  transform: translateY(-1px);
}

body[data-theme="white"] .dock-menu .menu-item:hover a {
  color: #34434a !important;
}

body[data-theme="white"] .dock-menu .menu-item.active {
  background: #eef2f2 !important;
  border: 1px solid #d6dfe0 !important;
  box-shadow: none !important;
}

body[data-theme="white"] .dock-menu .menu-item.active a {
  color: #435b64 !important;
}

body[data-theme="white"] .color-dot.white {
  background: #526b73;
  box-shadow: none;
}

body[data-theme="white"] :is(
  .btn-primary,
  .premium-neon-btn,
  button.primary
) {
  background: #526b73 !important;
  border-color: #526b73 !important;
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(61, 79, 86, 0.16) !important;
}

body[data-theme="white"] :is(
  .btn-primary,
  .premium-neon-btn,
  button.primary
):hover {
  background: #465d65 !important;
  border-color: #465d65 !important;
  box-shadow: 0 9px 22px rgba(61, 79, 86, 0.18) !important;
  transform: translateY(-1px);
}

/* Calendar — quiet contrast and editorial hierarchy. */

body[data-theme="white"] .page[data-page="calendar"] .calendarCard {
  background: rgba(255, 255, 253, 0.9) !important;
  border: 1px solid rgba(45, 55, 59, 0.09) !important;
  box-shadow:
    0 26px 68px rgba(42, 49, 52, 0.075),
    0 2px 8px rgba(42, 49, 52, 0.035) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarModes {
  background: #f1f2ef !important;
  border: 1px solid #e2e5e1 !important;
  box-shadow: none !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  button.ghost,
  .miniBtn,
  .calendarDate
) {
  background: #fff !important;
  border: 1px solid #e0e3e0 !important;
  color: #5f686c !important;
  box-shadow: 0 2px 6px rgba(42, 49, 52, 0.035) !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  button.ghost,
  .miniBtn
):hover {
  background: #f5f6f3 !important;
  border-color: #cbd3d3 !important;
  color: #34434a !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarModes button.primary {
  background: #526b73 !important;
  border-color: #526b73 !important;
  box-shadow: none !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calDoctorHead,
  .calendarDoctorTimelineHead,
  .calTimeHead
) {
  background: rgba(246, 247, 244, 0.97) !important;
  border-color: #e2e5e1 !important;
  box-shadow: 0 5px 14px rgba(42, 49, 52, 0.045) !important;
  backdrop-filter: blur(12px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(108%) !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calDoctorName,
  .calendarDoctorTimelineName
) {
  color: #2d3437 !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calDoctorMeta,
  .calendarDoctorTimelineMeta,
  .calTime,
  .calendarTimelineTimeLabel
) {
  color: #7e8689 !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calStaffSpecialization {
  background:
    color-mix(
      in srgb,
      var(--specialization-color, #526b73) 7%,
      #ffffff
    ) !important;
  border-color:
    color-mix(
      in srgb,
      var(--specialization-color, #526b73) 24%,
      #dfe3e1
    ) !important;
  color: #4e595e !important;
  box-shadow: none !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calendarDayGrid,
  .calendarDoctorTimeline,
  .calendarTimelineTimeColumn
) {
  background: rgba(248, 249, 247, 0.78) !important;
  border-color: #e4e7e3 !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calSlot {
  background: rgba(252, 252, 250, 0.9) !important;
  border-color: rgba(66, 77, 81, 0.09) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calSlot:hover {
  background: #f2f5f4 !important;
  border-color: rgba(82, 107, 115, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(82, 107, 115, 0.06) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calEmptySlot {
  color: rgba(59, 69, 73, 0.26) !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calEventCard,
  .weekEventCard,
  .calendarTimelineEvent
) {
  background: rgba(255, 255, 253, 0.96) !important;
  border-color: rgba(52, 63, 67, 0.1) !important;
  color: #2d3437 !important;
  box-shadow:
    0 7px 18px rgba(42, 49, 52, 0.07),
    inset 3px 0 0 var(--staff-color, #526b73) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calStaffPanel {
  background: rgba(248, 249, 247, 0.94) !important;
  border: 1px solid #e1e4e0 !important;
  box-shadow: none !important;
}

body[data-theme="white"] .page[data-page="calendar"] .vetCard {
  background: rgba(255, 255, 253, 0.94) !important;
  border: 1px solid #e2e5e1 !important;
  box-shadow: 0 3px 9px rgba(42, 49, 52, 0.04) !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calTopScroll,
  .calendarDayGrid
)::-webkit-scrollbar-track {
  background: #e9ece9 !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calTopScroll,
  .calendarDayGrid
)::-webkit-scrollbar-thumb {
  background: #829399 !important;
  border: 2px solid #f7f7f4 !important;
  box-shadow: none !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calendarTimelineHourLine,
  .time-grid-line
) {
  background: rgba(52, 63, 67, 0.075) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarTimelineHalfLine {
  background:
    linear-gradient(
      90deg,
      rgba(52, 63, 67, 0.035) 50%,
      transparent 50%
    ) !important;
  background-size: 8px 1px !important;
}

/* =========================================================
   RESTRAINED DARK THEMES
   Purple intentionally remains unchanged.
   ========================================================= */

body[data-theme="black"] {
  --accent-color: #b79a72;
  --accent-glow: rgba(183, 154, 114, 0.13);
  --primary-neon: #b79a72;
  --primary-glow: 0 8px 22px rgba(183, 154, 114, 0.13);
  --accent-neon: #d2b88f;

  --bg-gradient:
    linear-gradient(
      145deg,
      #191b1a 0%,
      #101211 52%,
      #090b0a 100%
    );

  --card-bg: rgba(255, 252, 246, 0.035);
  --glass-bg: rgba(255, 252, 246, 0.035);
  --glass-border: rgba(226, 217, 200, 0.1);
  --glass-blur: blur(22px) saturate(112%);
  --text-main: #f1eee8;
  --text-muted: #96968f;

  --color-success: #6f9b82;
  --color-warning: #b18d54;
  --color-danger: #b86a67;

  --finance-accent: #b79a72;
  --finance-accent-2: #d2b88f;
  --finance-accent-soft: rgba(183, 154, 114, 0.105);
  --finance-accent-glow: rgba(183, 154, 114, 0.13);
  --finance-surface-1: rgba(28, 30, 29, 0.98);
  --finance-surface-2: rgba(12, 14, 13, 0.99);
  --finance-surface-soft: rgba(255, 250, 240, 0.028);
  --finance-surface-hover: rgba(255, 250, 240, 0.05);
  --finance-input: rgba(8, 10, 9, 0.7);
  --finance-border: rgba(226, 217, 200, 0.1);
  --finance-border-strong: rgba(183, 154, 114, 0.24);
  --finance-text: #f1eee8;
  --finance-text-soft: rgba(241, 238, 232, 0.74);
  --finance-text-muted: rgba(219, 214, 203, 0.48);
  --finance-text-faint: rgba(219, 214, 203, 0.29);
  --finance-overlay: rgba(5, 6, 5, 0.88);
  --finance-shadow: rgba(0, 0, 0, 0.46);

  --pet-modal-accent: #b79a72;
  --pet-modal-accent-2: #d2b88f;
  --pet-modal-accent-soft: rgba(183, 154, 114, 0.1);
  --pet-modal-accent-border: rgba(183, 154, 114, 0.36);
  --pet-modal-focus-ring: rgba(183, 154, 114, 0.11);

  --med-accent: #b79a72;
  --med-accent-soft: rgba(183, 154, 114, 0.1);
  --med-accent-border: rgba(183, 154, 114, 0.25);
}

body[data-theme="blue"] {
  --accent-color: #6f91ad;
  --accent-glow: rgba(111, 145, 173, 0.13);
  --primary-neon: #6f91ad;
  --primary-glow: 0 8px 22px rgba(111, 145, 173, 0.13);
  --accent-neon: #91aec4;

  --bg-gradient:
    linear-gradient(
      145deg,
      #142231 0%,
      #0c1722 52%,
      #071019 100%
    );

  --card-bg: rgba(230, 241, 250, 0.032);
  --glass-bg: rgba(230, 241, 250, 0.032);
  --glass-border: rgba(176, 203, 222, 0.11);
  --glass-blur: blur(22px) saturate(112%);
  --text-main: #edf3f7;
  --text-muted: #8e9da8;

  --color-success: #6f9b82;
  --color-warning: #ad8b55;
  --color-danger: #b66b69;

  --finance-accent: #6f91ad;
  --finance-accent-2: #91aec4;
  --finance-accent-soft: rgba(111, 145, 173, 0.105);
  --finance-accent-glow: rgba(111, 145, 173, 0.13);
  --finance-surface-1: rgba(18, 34, 48, 0.98);
  --finance-surface-2: rgba(6, 15, 23, 0.99);
  --finance-surface-soft: rgba(211, 231, 244, 0.027);
  --finance-surface-hover: rgba(211, 231, 244, 0.05);
  --finance-input: rgba(4, 13, 21, 0.7);
  --finance-border: rgba(176, 203, 222, 0.105);
  --finance-border-strong: rgba(111, 145, 173, 0.25);
  --finance-text: #edf3f7;
  --finance-text-soft: rgba(237, 243, 247, 0.74);
  --finance-text-muted: rgba(210, 224, 233, 0.48);
  --finance-text-faint: rgba(210, 224, 233, 0.29);
  --finance-overlay: rgba(3, 8, 13, 0.88);
  --finance-shadow: rgba(0, 5, 10, 0.45);

  --pet-modal-accent: #6f91ad;
  --pet-modal-accent-2: #91aec4;
  --pet-modal-accent-soft: rgba(111, 145, 173, 0.1);
  --pet-modal-accent-border: rgba(111, 145, 173, 0.36);
  --pet-modal-focus-ring: rgba(111, 145, 173, 0.11);

  --med-accent: #6f91ad;
  --med-accent-soft: rgba(111, 145, 173, 0.1);
  --med-accent-border: rgba(111, 145, 173, 0.25);
}

body[data-theme="green"] {
  --accent-color: #7c9c8a;
  --accent-glow: rgba(124, 156, 138, 0.13);
  --primary-neon: #7c9c8a;
  --primary-glow: 0 8px 22px rgba(124, 156, 138, 0.13);
  --accent-neon: #a0b9aa;

  --bg-gradient:
    linear-gradient(
      145deg,
      #17251f 0%,
      #0f1a16 52%,
      #09110e 100%
    );

  --card-bg: rgba(232, 243, 236, 0.032);
  --glass-bg: rgba(232, 243, 236, 0.032);
  --glass-border: rgba(180, 207, 191, 0.105);
  --glass-blur: blur(22px) saturate(110%);
  --text-main: #eef4f0;
  --text-muted: #91a098;

  --color-success: #78a58b;
  --color-warning: #ad8c57;
  --color-danger: #b86d68;

  --finance-accent: #7c9c8a;
  --finance-accent-2: #a0b9aa;
  --finance-accent-soft: rgba(124, 156, 138, 0.105);
  --finance-accent-glow: rgba(124, 156, 138, 0.13);
  --finance-surface-1: rgba(21, 38, 31, 0.98);
  --finance-surface-2: rgba(7, 17, 13, 0.99);
  --finance-surface-soft: rgba(218, 238, 226, 0.027);
  --finance-surface-hover: rgba(218, 238, 226, 0.05);
  --finance-input: rgba(4, 14, 10, 0.7);
  --finance-border: rgba(180, 207, 191, 0.105);
  --finance-border-strong: rgba(124, 156, 138, 0.25);
  --finance-text: #eef4f0;
  --finance-text-soft: rgba(238, 244, 240, 0.74);
  --finance-text-muted: rgba(215, 230, 220, 0.48);
  --finance-text-faint: rgba(215, 230, 220, 0.29);
  --finance-overlay: rgba(3, 10, 7, 0.88);
  --finance-shadow: rgba(0, 9, 5, 0.44);

  --pet-modal-accent: #7c9c8a;
  --pet-modal-accent-2: #a0b9aa;
  --pet-modal-accent-soft: rgba(124, 156, 138, 0.1);
  --pet-modal-accent-border: rgba(124, 156, 138, 0.36);
  --pet-modal-focus-ring: rgba(124, 156, 138, 0.11);

  --med-accent: #7c9c8a;
  --med-accent-soft: rgba(124, 156, 138, 0.1);
  --med-accent-border: rgba(124, 156, 138, 0.25);
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) {
  background: var(--bg-gradient) !important;
  color: var(--text-main) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) :is(
  .glass-card,
  .glass-panel,
  .data-table-container,
  .calendar-container,
  .patient-premium-card,
  .patient-hero,
  .owner-hero
) {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.018)
    ) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(22px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(112%) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .search-bar input {
  background: rgba(5, 10, 10, 0.34) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-main) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .search-bar input:focus {
  border-color: var(--accent-color) !important;
  box-shadow:
    0 0 0 3px var(--accent-glow),
    0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .mac-dock {
  background: rgba(8, 12, 11, 0.82) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(24px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(112%) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item {
  box-shadow: none !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item a {
  color: var(--text-muted) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item.active {
  background: var(--finance-accent-soft) !important;
  border: 1px solid var(--finance-border-strong) !important;
  box-shadow: none !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item.active a {
  color: var(--finance-accent-2) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .page[data-page="calendar"] :is(
  .calDoctorHead,
  .calendarDoctorTimelineHead,
  .calTimeHead
) {
  background:
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    ) !important;
  border-color: var(--finance-border) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .page[data-page="calendar"] :is(
  .calTopScroll,
  .calendarDayGrid
)::-webkit-scrollbar-thumb {
  background: var(--accent-color) !important;
  border: 2px solid var(--finance-surface-2) !important;
  box-shadow: none !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .page[data-page="calendar"] :is(
  .calEventCard,
  .weekEventCard,
  .calendarTimelineEvent
) {
  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.2),
    inset 3px 0 0 var(--staff-color, var(--accent-color)) !important;
}

.color-dot.black {
  background: #b79a72;
  box-shadow: none;
}

.color-dot.blue {
  background: #6f91ad;
  box-shadow: none;
}

.color-dot.green {
  background: #7c9c8a;
  box-shadow: none;
}

/* =========================================================
   WHITE THEME — MARBLE BLUE
   Светлая современная основа с холодным синим акцентом.
   ========================================================= */

body[data-theme="white"] {
  --accent-color: #3478a8;
  --accent-glow: rgba(52, 120, 168, 0.14);
  --primary-neon: #3478a8;
  --primary-glow: 0 8px 22px rgba(44, 103, 145, 0.16);

  --bg-gradient:
    radial-gradient(
      ellipse at 12% 8%,
      rgba(137, 190, 226, 0.2) 0%,
      rgba(137, 190, 226, 0.05) 24%,
      transparent 43%
    ),
    radial-gradient(
      ellipse at 86% 18%,
      rgba(185, 214, 234, 0.22) 0%,
      transparent 37%
    ),
    linear-gradient(
      117deg,
      transparent 0 27%,
      rgba(79, 132, 166, 0.035) 27.2%,
      transparent 27.7% 63%,
      rgba(79, 132, 166, 0.028) 63.2%,
      transparent 63.8%
    ),
    linear-gradient(
      142deg,
      #f9fcfe 0%,
      #edf4f8 46%,
      #f8fbfd 100%
    );

  --card-bg: rgba(255, 255, 255, 0.91);
  --glass-bg: rgba(255, 255, 255, 0.87);
  --glass-border: rgba(47, 86, 112, 0.12);
  --text-main: #172b3a;
  --text-muted: #687b89;
  --input-bg: rgba(255, 255, 255, 0.94);

  --finance-accent: #3478a8;
  --finance-accent-2: #5c91b6;
  --finance-accent-soft: rgba(52, 120, 168, 0.09);
  --finance-accent-glow: rgba(52, 120, 168, 0.14);
  --finance-surface-1: rgba(255, 255, 255, 0.98);
  --finance-surface-2: rgba(243, 248, 251, 0.98);
  --finance-surface-soft: rgba(52, 120, 168, 0.04);
  --finance-surface-hover: rgba(52, 120, 168, 0.07);
  --finance-input: rgba(255, 255, 255, 0.96);
  --finance-border: rgba(47, 86, 112, 0.12);
  --finance-border-strong: rgba(52, 120, 168, 0.28);
  --finance-text: #172b3a;
  --finance-text-soft: rgba(23, 43, 58, 0.76);
  --finance-text-muted: rgba(44, 68, 84, 0.58);
  --finance-text-faint: rgba(53, 78, 94, 0.4);
  --finance-shadow: rgba(43, 79, 103, 0.1);

  --pet-modal-accent: #3478a8;
  --pet-modal-accent-2: #5c91b6;
  --pet-modal-accent-soft: rgba(52, 120, 168, 0.09);
  --pet-modal-accent-border: rgba(52, 120, 168, 0.34);
  --pet-modal-focus-ring: rgba(52, 120, 168, 0.12);

  --med-accent: #3478a8;
  --med-accent-soft: rgba(52, 120, 168, 0.09);
  --med-accent-border: rgba(52, 120, 168, 0.24);

  background: var(--bg-gradient) !important;
  color: #172b3a !important;
}

body[data-theme="white"] .glass-card,
body[data-theme="white"] .glass-panel,
body[data-theme="white"] .data-table-container,
body[data-theme="white"] .calendar-container,
body[data-theme="white"] .patient-premium-card,
body[data-theme="white"] .patient-hero,
body[data-theme="white"] .owner-hero {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(47, 86, 112, 0.115) !important;
  box-shadow:
    0 22px 58px rgba(47, 83, 107, 0.085),
    0 2px 7px rgba(47, 83, 107, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body[data-theme="white"] :is(
  h1,
  h2,
  h3,
  h4,
  .text-main,
  .section-card-title,
  .current-date-title
) {
  color: #172b3a !important;
}

body[data-theme="white"] :is(
  .text-muted,
  .hint,
  .field-title
) {
  color: #687b89 !important;
}

body[data-theme="white"] .search-bar input,
body[data-theme="white"] .user-profile-badge {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(47, 86, 112, 0.12) !important;
  color: #172b3a !important;
  box-shadow:
    0 10px 28px rgba(47, 83, 107, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body[data-theme="white"] .search-bar input:focus {
  border-color: rgba(52, 120, 168, 0.52) !important;
  box-shadow:
    0 0 0 3px rgba(52, 120, 168, 0.1),
    0 12px 28px rgba(47, 83, 107, 0.08) !important;
}

body[data-theme="white"] .mac-dock {
  background: rgba(255, 255, 255, 0.93) !important;
  border-color: rgba(47, 86, 112, 0.13) !important;
  box-shadow:
    0 18px 42px rgba(47, 83, 107, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body[data-theme="white"] .dock-menu .menu-item a {
  color: #667987 !important;
}

body[data-theme="white"] .dock-menu .menu-item:hover {
  background: rgba(52, 120, 168, 0.065) !important;
}

body[data-theme="white"] .dock-menu .menu-item:hover a {
  color: #245f89 !important;
}

body[data-theme="white"] .dock-menu .menu-item.active {
  background: #edf6fc !important;
  border-color: #bdd7e8 !important;
}

body[data-theme="white"] .dock-menu .menu-item.active a {
  color: #286f9f !important;
}

body[data-theme="white"] .color-dot.white {
  background: #3478a8;
}

body[data-theme="white"] :is(
  .btn-primary,
  .premium-neon-btn,
  button.primary
) {
  background: #3478a8 !important;
  border-color: #3478a8 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(44, 103, 145, 0.2) !important;
}

body[data-theme="white"] :is(
  .btn-primary,
  .premium-neon-btn,
  button.primary
):hover {
  background: #286b9a !important;
  border-color: #286b9a !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarCard {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(47, 86, 112, 0.12) !important;
  box-shadow:
    0 26px 68px rgba(47, 83, 107, 0.095),
    0 2px 8px rgba(47, 83, 107, 0.04) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarModes {
  background: #edf4f8 !important;
  border-color: #d8e5ed !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  button.ghost,
  .miniBtn,
  .calendarDate
) {
  background: #ffffff !important;
  border-color: #d8e4eb !important;
  color: #526b7b !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  button.ghost,
  .miniBtn
):hover {
  background: #f0f7fb !important;
  border-color: #b9d3e4 !important;
  color: #245f89 !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarModes button.primary {
  background: #3478a8 !important;
  border-color: #3478a8 !important;
  color: #ffffff !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calDoctorHead,
  .calendarDoctorTimelineHead,
  .calTimeHead
) {
  background:
    linear-gradient(
      180deg,
      rgba(247, 251, 254, 0.99),
      rgba(236, 244, 249, 0.98)
    ) !important;
  border-color: #d8e5ed !important;
  box-shadow: 0 5px 14px rgba(47, 83, 107, 0.055) !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calDoctorName,
  .calendarDoctorTimelineIdentity strong
) {
  color: #172b3a !important;
  opacity: 1 !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calDoctorMeta,
  .calendarDoctorTimelineIdentity span,
  .calTime,
  .calendarTimelineTimeLabel
) {
  color: #607786 !important;
  opacity: 1 !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarDoctorAvatar {
  color: #24475e !important;
  background:
    color-mix(
      in srgb,
      var(--doctor-color) 16%,
      #ffffff
    ) !important;
  border-color:
    color-mix(
      in srgb,
      var(--doctor-color) 38%,
      #d5e3ec
    ) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calStaffSpecialization {
  background:
    color-mix(
      in srgb,
      var(--specialization-color, #3478a8) 9%,
      #ffffff
    ) !important;
  border-color:
    color-mix(
      in srgb,
      var(--specialization-color, #3478a8) 28%,
      #d8e5ed
    ) !important;
  color: #3d5667 !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calendarDayGrid,
  .calendarDoctorTimeline,
  .calendarTimelineTimeColumn
) {
  background: rgba(251, 253, 254, 0.96) !important;
  border-color: #dde8ee !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarDoctorTimelineColumn {
  border-right-color: rgba(47, 86, 112, 0.1) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calSlot {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(47, 86, 112, 0.1) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calSlot:hover {
  background: #eff7fc !important;
  border-color: rgba(52, 120, 168, 0.38) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calStaffPanel {
  background: rgba(246, 250, 252, 0.97) !important;
  border-color: #dbe7ee !important;
}

body[data-theme="white"] .page[data-page="calendar"] .vetCard {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #dce7ed !important;
  box-shadow: 0 4px 11px rgba(47, 83, 107, 0.055) !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calTopScroll,
  .calendarDayGrid
)::-webkit-scrollbar-track {
  background: #e8f0f5 !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calTopScroll,
  .calendarDayGrid
)::-webkit-scrollbar-thumb {
  background: #6f9eba !important;
  border-color: #f5f9fc !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calendarTimelineHourLine,
  .time-grid-line
) {
  background: rgba(47, 86, 112, 0.1) !important;
}

body[data-theme="white"] .page[data-page="calendar"] .calendarTimelineHalfLine {
  background:
    linear-gradient(
      90deg,
      rgba(47, 86, 112, 0.05) 50%,
      transparent 50%
    ) !important;
  background-size: 8px 1px !important;
}

/* Patient card and medical archive. */

body[data-theme="white"] .patientRecordSummary {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(105, 171, 214, 0.15),
      transparent 34%
    ),
    rgba(255, 255, 255, 0.91) !important;
  border-color: rgba(47, 86, 112, 0.13) !important;
  color: #172b3a !important;
  box-shadow:
    0 22px 58px rgba(47, 83, 107, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body[data-theme="white"] .patientRecordTitle {
  color: #172b3a !important;
}

body[data-theme="white"] .patientRecordStat {
  background: rgba(241, 247, 251, 0.88) !important;
  border-color: #dbe7ee !important;
}

body[data-theme="white"] .patientRecordStat > div:first-child {
  color: #667987 !important;
  opacity: 1 !important;
}

body[data-theme="white"] .patientRecordStat > div:last-child {
  color: #3478a8 !important;
}

body[data-theme="white"] .patient-tabs-nav {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(47, 86, 112, 0.12) !important;
  box-shadow: 0 8px 24px rgba(47, 83, 107, 0.055) !important;
}

body[data-theme="white"] .patient-tab-btn {
  color: #667987 !important;
}

body[data-theme="white"] .patient-tab-btn:hover {
  background: #f0f7fb !important;
  color: #245f89 !important;
}

body[data-theme="white"] .patientFilesArchive {
  color: #172b3a !important;
}

body[data-theme="white"] .patientFilesKicker {
  color: #66869a !important;
}

body[data-theme="white"] .patientFilesArchiveHead h2,
body[data-theme="white"] .patientFilesGroupHead h3,
body[data-theme="white"] .patientFileCardBody h4,
body[data-theme="white"] .patientFilesEmpty h3 {
  color: #172b3a !important;
}

body[data-theme="white"] .patientFilesArchiveHead p,
body[data-theme="white"] .patientFilesGroupHead strong,
body[data-theme="white"] .patientFileMeta,
body[data-theme="white"] .patientFileNote,
body[data-theme="white"] .patientFilesEmpty p {
  color: #687b89 !important;
}

body[data-theme="white"] .patientFilesAddButton,
body[data-theme="white"] .patientFileOpenButton {
  border-color: rgba(52, 120, 168, 0.28) !important;
  background: #3478a8 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(44, 103, 145, 0.18) !important;
}

body[data-theme="white"] .patientFilesStats > div,
body[data-theme="white"] .patientFileCard {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(242, 248, 251, 0.96)
    ) !important;
  border-color: #dbe7ee !important;
  box-shadow:
    0 10px 26px rgba(47, 83, 107, 0.065),
    inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .patientFilesStats span {
  color: #687b89 !important;
}

body[data-theme="white"] .patientFilesStats strong {
  color: #3478a8 !important;
}

body[data-theme="white"] .patientFilesFilters {
  background: rgba(246, 250, 252, 0.94) !important;
  border-color: #dbe7ee !important;
}

body[data-theme="white"] .patientFilesFilter {
  color: #607786 !important;
}

body[data-theme="white"] .patientFilesFilter:hover {
  background: #edf6fc !important;
  color: #245f89 !important;
}

body[data-theme="white"] .patientFilesFilter.active {
  background: #e5f2fa !important;
  border-color: #b8d4e6 !important;
  color: #245f89 !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .patientFilesFilter em {
  background: rgba(52, 120, 168, 0.1) !important;
  color: #286f9f !important;
}

body[data-theme="white"] .patientFilesEmpty {
  background:
    radial-gradient(
      circle at center,
      rgba(105, 171, 214, 0.1),
      transparent 65%
    ),
    rgba(255, 255, 255, 0.66) !important;
  border-color: #cddfe9 !important;
}

body[data-theme="white"] .patientFilesEmptyIcon,
body[data-theme="white"] .patientFileDocumentIcon {
  background: #e8f3fa !important;
  border-color: #bfd8e8 !important;
  box-shadow: none !important;
}

body[data-theme="white"] .patientFilePreview {
  background:
    radial-gradient(
      circle at center,
      rgba(105, 171, 214, 0.13),
      transparent 68%
    ),
    #edf4f8 !important;
}

body[data-theme="white"] .patientFileActionButton {
  background: #f4f8fb !important;
  border-color: #dbe7ee !important;
  color: #526b7b !important;
}

body[data-theme="white"] .patientFileModalOverlay {
  background: rgba(23, 43, 58, 0.34) !important;
}

body[data-theme="white"] .patientFileModal {
  background:
    radial-gradient(
      circle at top left,
      rgba(105, 171, 214, 0.13),
      transparent 34%
    ),
    #f8fbfd !important;
  border-color: #d2e1ea !important;
  color: #172b3a !important;
  box-shadow: 0 32px 90px rgba(23, 43, 58, 0.22) !important;
}

/* Hospital task modal. */

body[data-theme="white"] .hospitalTasksBackdrop {
  background: rgba(23, 43, 58, 0.32) !important;
}

body[data-theme="white"] .hospitalTasksModal {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(105, 171, 214, 0.15),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #fbfdfe,
      #eef5f9
    ) !important;
  border-color: #cfdfe9 !important;
  box-shadow: 0 34px 90px rgba(23, 43, 58, 0.24) !important;
  color: #172b3a !important;
}

body[data-theme="white"] .hospitalTasksEyebrow,
body[data-theme="white"] .hospitalTaskType {
  color: #3478a8 !important;
}

body[data-theme="white"] :is(
  .hospitalTasksHeader h2,
  .hospitalTasksSectionHead h3,
  .hospitalTaskCreateCard h3,
  .hospitalTaskTop h4,
  .hospitalTasksEmpty strong
) {
  color: #172b3a !important;
}

body[data-theme="white"] :is(
  .hospitalTasksHeader p,
  .hospitalTasksSectionHead p,
  .hospitalTaskTop time,
  .hospitalTaskContent > p,
  .hospitalTaskField > span,
  .hospitalTasksEmpty
) {
  color: #687b89 !important;
}

body[data-theme="white"] .hospitalTasksClose {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: #d3e2eb !important;
  color: #526b7b !important;
}

body[data-theme="white"] :is(
  .hospitalTasksTimeline,
  .hospitalTaskCreateCard,
  .hospitalTaskItem
) {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: #d9e6ed !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .hospitalTaskItem.completed {
  background: rgba(66, 154, 124, 0.07) !important;
  border-color: rgba(66, 154, 124, 0.2) !important;
}

body[data-theme="white"] .hospitalTasksCount,
body[data-theme="white"] .hospitalTaskIcon {
  background: rgba(52, 120, 168, 0.1) !important;
  color: #286f9f !important;
}

body[data-theme="white"] :is(
  .hospitalTaskStaffSelect,
  .hospitalTaskInput,
  .hospitalTaskTextarea
) {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #cfdfe9 !important;
  color: #172b3a !important;
}

body[data-theme="white"] :is(
  .hospitalTaskStaffSelect,
  .hospitalTaskInput,
  .hospitalTaskTextarea
)::placeholder {
  color: #8b9ba6 !important;
}

body[data-theme="white"] .hospitalTaskCreateButton {
  background: #3478a8 !important;
  border-color: #3478a8 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(44, 103, 145, 0.18) !important;
}

/* Team member profile and analytics. */

body[data-theme="white"] .teamDashProfile {
  color: #172b3a !important;
}

body[data-theme="white"] .teamDashSidebar {
  background:
    radial-gradient(
      circle at 50% 10%,
      color-mix(
        in srgb,
        var(--staff-color) 14%,
        transparent
      ),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(239, 246, 250, 0.94)
    ) !important;
  border-color: #d3e2eb !important;
  box-shadow:
    0 24px 64px rgba(47, 83, 107, 0.11),
    inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .teamBackBtn,
body[data-theme="white"] .teamGhostBtn {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: #d2e1ea !important;
  color: #526b7b !important;
}

body[data-theme="white"] :is(
  .teamDashName,
  .teamDashTop h1,
  .teamKpiCard strong,
  .teamDashPanelHead h3,
  .teamDashRows b,
  .teamDashIdBox b
) {
  color: #172b3a !important;
}

body[data-theme="white"] :is(
  .teamDashRole,
  .teamDashTop p,
  .teamKpiCard span,
  .teamDashRows span,
  .teamDashXp p,
  .teamDashIdBox span
) {
  color: #687b89 !important;
}

body[data-theme="white"] .teamDashContact,
body[data-theme="white"] .teamDashIdBox {
  background: rgba(244, 249, 252, 0.9) !important;
  border-color: #d9e6ed !important;
  color: #526b7b !important;
}

body[data-theme="white"] .teamDashNav button {
  color: #607786 !important;
}

body[data-theme="white"] .teamDashNav button:hover,
body[data-theme="white"] .teamDashNav button.active {
  background: #e6f2fa !important;
  color: #245f89 !important;
  box-shadow: inset 0 0 0 1px #bfd8e8 !important;
}

body[data-theme="white"] .teamPrimaryBtn {
  background: #3478a8 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(44, 103, 145, 0.2) !important;
}

body[data-theme="white"] :is(
  .teamKpiCard,
  .teamDashPanel,
  .teamDashInsight,
  .teamSubHero
) {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(105, 171, 214, 0.11),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(241, 247, 251, 0.96)
    ) !important;
  border-color: #d6e4ec !important;
  box-shadow:
    0 14px 36px rgba(47, 83, 107, 0.08),
    inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .teamKpiIcon,
body[data-theme="white"] .teamInsightIcon {
  background: rgba(52, 120, 168, 0.1) !important;
  border-color: rgba(52, 120, 168, 0.18) !important;
}

body[data-theme="white"] .teamDashInsight {
  border-left: 3px solid #6a9fbe !important;
}

body[data-theme="white"] .teamDashInsight b,
body[data-theme="white"] .teamDashInsight p {
  color: #385365 !important;
}

body[data-theme="white"] .teamDashInsight strong,
body[data-theme="white"] .teamKpiCard small {
  color: #32745f !important;
}

body[data-theme="white"] .teamDashPanelHead > span {
  background: #edf4f8 !important;
  color: #607786 !important;
}

body[data-theme="white"] .teamDashRows p {
  border-bottom-color: rgba(47, 86, 112, 0.1) !important;
}

body[data-theme="white"] .teamDashXp i,
body[data-theme="white"] .teamBarTrack {
  background: #e2ebf1 !important;
}

body[data-theme="white"] .teamDashXp em,
body[data-theme="white"] .teamBarTrack i.purple {
  background:
    linear-gradient(
      180deg,
      #5d9bc2,
      rgba(52, 120, 168, 0.38)
    ) !important;
}

/* =========================================================
   HOSPITAL — MARBLE BLUE CONTRAST FIX
   Explicit colors override legacy hard-coded dark surfaces.
   ========================================================= */

html body[data-theme="white"] .hospitalPatientCard {
  background-color: rgba(255, 255, 255, 0.94) !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(239, 247, 251, 0.96)
    ) !important;
  border-color: #ccdee9 !important;
  box-shadow:
    0 18px 44px rgba(47, 83, 107, 0.11),
    inset 0 1px 0 #ffffff !important;
}

html body[data-theme="white"] .hospitalPatientIdentity h2 {
  color: #172b3a !important;
}

html body[data-theme="white"] .hospitalPatientIdentity p {
  color: #667987 !important;
}

html body[data-theme="white"] .hospitalStatusBadge {
  background: #e9f5ef !important;
  border-color: #badaca !important;
  color: #31705c !important;
}

html body[data-theme="white"] .hospitalInfoRow span {
  color: #718491 !important;
}

html body[data-theme="white"] .hospitalInfoRow strong {
  color: #203847 !important;
}

html body[data-theme="white"] .hospitalCardTasks {
  background-color: #f3f8fb !important;
  background-image: none !important;
  border-color: #d5e4ec !important;
}

html body[data-theme="white"] .hospitalCardTasksHead span {
  color: #718491 !important;
}

html body[data-theme="white"] .hospitalCardTasksHead strong {
  color: #294656 !important;
}

html body[data-theme="white"] .hospitalCardTasksHead > small {
  background: #e5f2fa !important;
  border-color: #bdd7e8 !important;
  color: #286f9f !important;
}

html body[data-theme="white"] .hospitalCardTask {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d8e5ed !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

html body[data-theme="white"] .hospitalCardTask.planned {
  background-color: #edf6fc !important;
  background-image: none !important;
  border-color: #bed9e9 !important;
}

html body[data-theme="white"] .hospitalCardTask.completed {
  background-color: #eef8f3 !important;
  background-image: none !important;
  border-color: #c6e1d4 !important;
}

html body[data-theme="white"] .hospitalCardTaskIcon {
  background: #e4f1f9 !important;
  border-color: #bfd8e8 !important;
}

html body[data-theme="white"] .hospitalCardTaskTop span {
  color: #3478a8 !important;
}

html body[data-theme="white"] .hospitalCardTaskTop time {
  color: #7b8e9a !important;
}

html body[data-theme="white"] .hospitalCardTaskMain > strong {
  color: #203847 !important;
}

html body[data-theme="white"] .hospitalCardTaskMain > p {
  color: #667987 !important;
}

html body[data-theme="white"] .hospitalCardTaskPending {
  color: #3478a8 !important;
}

html body[data-theme="white"] .hospitalGhostButton {
  background: #ffffff !important;
  border-color: #cfdee7 !important;
  color: #385567 !important;
}

html body[data-theme="white"] .hospitalPrimaryButton {
  background: #e7f3fa !important;
  border-color: #b9d5e6 !important;
  color: #286f9f !important;
}

html body[data-theme="white"] .hospitalDischargeButton {
  background: #fff3f4 !important;
  border-color: #efc8ce !important;
  color: #b24e5c !important;
}

html body[data-theme="white"] .hospitalTasksBackdrop {
  background-color: rgba(23, 43, 58, 0.36) !important;
  background-image: none !important;
}

html body[data-theme="white"] .hospitalTasksModal {
  background-color: #f7fbfd !important;
  background-image: none !important;
  border-color: #c8dce8 !important;
  color: #172b3a !important;
  box-shadow:
    0 34px 90px rgba(23, 43, 58, 0.26),
    inset 0 1px 0 #ffffff !important;
}

html body[data-theme="white"] .hospitalTasksTimeline,
html body[data-theme="white"] .hospitalTaskCreateCard {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d4e3eb !important;
}

html body[data-theme="white"] .hospitalTaskItem {
  background-color: #f4f8fb !important;
  background-image: none !important;
  border-color: #d8e5ed !important;
}

html body[data-theme="white"] .hospitalTaskItem.completed {
  background-color: #edf8f3 !important;
  background-image: none !important;
}

html body[data-theme="white"] .hospitalTasksHeader h2,
html body[data-theme="white"] .hospitalTasksSectionHead h3,
html body[data-theme="white"] .hospitalTaskCreateCard h3,
html body[data-theme="white"] .hospitalTaskTop h4 {
  color: #172b3a !important;
}

html body[data-theme="white"] .hospitalTasksHeader p,
html body[data-theme="white"] .hospitalTasksSectionHead p,
html body[data-theme="white"] .hospitalTaskTop time,
html body[data-theme="white"] .hospitalTaskContent > p,
html body[data-theme="white"] .hospitalTaskField > span {
  color: #667987 !important;
}

html body[data-theme="white"] .hospitalTaskStaffSelect,
html body[data-theme="white"] .hospitalTaskInput,
html body[data-theme="white"] .hospitalTaskTextarea {
  background-color: #f8fbfd !important;
  background-image: none !important;
  border-color: #cbdde7 !important;
  color: #172b3a !important;
  color-scheme: light !important;
}

html body[data-theme="white"] .hospitalTaskCreateButton {
  background-color: #3478a8 !important;
  background-image: none !important;
  border-color: #3478a8 !important;
  color: #ffffff !important;
}

/* =========================================================
   HOSPITAL — ALL CLINIC THEMES
   Every hospital surface follows the active theme palette.
   ========================================================= */

html body .hospitalPatientCard {
  background:
    radial-gradient(
      circle at 100% 0%,
      var(--module-accent-soft),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      var(--module-surface-1),
      var(--module-surface-2)
    ) !important;
  border-color: var(--module-border) !important;
  box-shadow:
    0 18px 46px var(--module-shadow),
    inset 0 1px 0
      color-mix(
        in srgb,
        var(--module-text) 7%,
        transparent
      ) !important;
}

html body .hospitalPatientIdentity h2,
html body .hospitalInfoRow strong,
html body .hospitalCardTasksHead strong,
html body .hospitalCardTaskMain > strong,
html body .hospitalCardTasksEmpty strong {
  color: var(--module-text) !important;
}

html body .hospitalPatientIdentity p,
html body .hospitalInfoRow span,
html body .hospitalCardTasksHead span,
html body .hospitalCardTaskTop time,
html body .hospitalCardTaskMain > p,
html body .hospitalCardTasksEmpty small {
  color: var(--module-text-muted) !important;
}

html body .hospitalStatusBadge {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text-soft) !important;
}

html body .hospitalCardTasks {
  background:
    linear-gradient(
      145deg,
      var(--module-accent-soft),
      var(--module-surface-soft)
    ) !important;
  border-color: var(--module-border) !important;
}

html body .hospitalCardTasksHead > small {
  background: var(--module-accent-soft) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-accent-2) !important;
}

html body .hospitalCardTask,
html body .hospitalCardTasksEmpty {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
}

html body .hospitalCardTask.planned {
  background:
    linear-gradient(
      145deg,
      var(--module-accent-soft),
      var(--module-surface-soft)
    ) !important;
  border-color: var(--module-border-strong) !important;
}

html body .hospitalCardTask.completed {
  background: rgba(66, 154, 124, 0.08) !important;
  border-color: rgba(66, 154, 124, 0.24) !important;
}

html body .hospitalCardTaskIcon {
  background: var(--module-accent-soft) !important;
  border-color: var(--module-border-strong) !important;
}

html body .hospitalCardTaskTop span,
html body .hospitalCardTaskPending {
  color: var(--module-accent-2) !important;
}

html body .hospitalGhostButton {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text-soft) !important;
}

html body .hospitalPrimaryButton {
  background: var(--module-accent-soft) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-accent-2) !important;
}

html body .hospitalTasksBackdrop {
  background:
    radial-gradient(
      circle at 50% 26%,
      var(--module-accent-soft),
      transparent 45%
    ),
    var(--module-overlay) !important;
}

html body .hospitalTasksModal {
  background:
    radial-gradient(
      circle at 100% 0%,
      var(--module-accent-soft),
      transparent 36%
    ),
    linear-gradient(
      155deg,
      var(--module-surface-1),
      var(--module-surface-2)
    ) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-text) !important;
  box-shadow:
    0 34px 96px var(--module-shadow),
    0 0 34px var(--module-accent-glow) !important;
}

html body .hospitalTasksEyebrow,
html body .hospitalTaskType {
  color: var(--module-accent-2) !important;
}

html body .hospitalTasksHeader h2,
html body .hospitalTasksSectionHead h3,
html body .hospitalTaskCreateCard h3,
html body .hospitalTaskTop h4,
html body .hospitalTasksEmpty strong {
  color: var(--module-text) !important;
}

html body .hospitalTasksHeader p,
html body .hospitalTasksSectionHead p,
html body .hospitalTaskTop time,
html body .hospitalTaskContent > p,
html body .hospitalTaskField > span,
html body .hospitalTasksEmpty {
  color: var(--module-text-muted) !important;
}

html body .hospitalTasksClose {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text-soft) !important;
}

html body .hospitalTasksTimeline,
html body .hospitalTaskCreateCard,
html body .hospitalTaskItem {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
}

html body .hospitalTaskItem.completed {
  background: rgba(66, 154, 124, 0.08) !important;
  border-color: rgba(66, 154, 124, 0.24) !important;
}

html body .hospitalTasksCount,
html body .hospitalTaskIcon {
  background: var(--module-accent-soft) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-accent-2) !important;
}

html body .hospitalTaskStaffSelect,
html body .hospitalTaskInput,
html body .hospitalTaskTextarea {
  background: var(--module-input) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text) !important;
  color-scheme: var(--module-color-scheme);
}

html body .hospitalTaskStaffSelect:focus,
html body .hospitalTaskInput:focus,
html body .hospitalTaskTextarea:focus {
  border-color: var(--module-accent) !important;
  box-shadow:
    0 0 0 3px var(--module-accent-soft) !important;
}

html body .hospitalTaskCreateButton {
  background:
    linear-gradient(
      135deg,
      var(--module-accent),
      var(--module-accent-2)
    ) !important;
  border-color: var(--module-border-strong) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 28px var(--module-accent-glow) !important;
}

/* =========================================================
   DARK THEMES — LIQUID GLASS DOCK
   Purple and marble-white keep their established treatment.
   ========================================================= */

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .mac-dock {
  overflow: hidden;
  isolation: isolate;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--finance-accent) 24%,
      rgba(255, 255, 255, 0.14)
    ) !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter:
    blur(34px)
    saturate(138%) !important;
  -webkit-backdrop-filter:
    blur(34px)
    saturate(138%) !important;
}

body[data-theme="black"] .mac-dock {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.025)
    ),
    rgba(30, 31, 29, 0.58) !important;
}

body[data-theme="blue"] .mac-dock {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.022)
    ),
    rgba(14, 31, 45, 0.58) !important;
}

body[data-theme="green"] .mac-dock {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.022)
    ),
    rgba(14, 33, 26, 0.58) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .mac-dock::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 18% 0%,
      rgba(255, 255, 255, 0.11),
      transparent 34%
    ),
    linear-gradient(
      105deg,
      transparent 0 34%,
      rgba(255, 255, 255, 0.045) 48%,
      transparent 62%
    );
  opacity: 0.82;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .mac-dock .dock-menu {
  position: relative;
  z-index: 1;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item {
  border: 1px solid transparent;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item:hover a {
  color: var(--finance-text) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item.active {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--finance-accent) 28%,
        rgba(255, 255, 255, 0.055)
      ),
      color-mix(
        in srgb,
        var(--finance-accent) 13%,
        transparent
      )
    ) !important;
  border-color:
    color-mix(
      in srgb,
      var(--finance-accent) 48%,
      rgba(255, 255, 255, 0.1)
    ) !important;
  box-shadow:
    0 9px 24px var(--finance-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body:is(
  [data-theme="black"],
  [data-theme="blue"],
  [data-theme="green"]
) .dock-menu .menu-item.active a {
  color: var(--finance-text) !important;
  text-shadow: 0 1px 12px var(--finance-accent-glow);
}

/* =========================================================
   VETERINARIAN PROFILE — ALL CLINIC THEMES
   Personal staff color stays in the avatar; UI follows theme.
   ========================================================= */

html body .teamDashProfile {
  color: var(--module-text) !important;
}

html body .teamDashSidebar {
  background:
    radial-gradient(
      circle at 50% 10%,
      color-mix(
        in srgb,
        var(--staff-color) 16%,
        transparent
      ),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      var(--module-surface-1),
      var(--module-surface-2)
    ) !important;
  border-color: var(--module-border-strong) !important;
  box-shadow:
    0 24px 70px var(--module-shadow),
    inset 0 1px 0
      color-mix(
        in srgb,
        var(--module-text) 8%,
        transparent
      ) !important;
}

html body .teamBackBtn,
html body .teamGhostBtn {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text-soft) !important;
}

html body .teamBackBtn:hover,
html body .teamGhostBtn:hover {
  background: var(--module-surface-hover) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-text) !important;
}

html body .teamDashName,
html body .teamDashTop h1,
html body .teamKpiCard strong,
html body .teamDashPanelHead h3,
html body .teamDashRows b,
html body .teamDashIdBox b,
html body .teamVisitTitle,
html body .teamVisitRight b,
html body .teamFinanceRow b,
html body .teamCareerTitle,
html body .achievementTop b,
html body .achievementReward b,
html body .staffSkillCard b {
  color: var(--module-text) !important;
}

html body .teamDashRole,
html body .teamDashTop p,
html body .teamKpiCard span,
html body .teamDashRows span,
html body .teamDashXp p,
html body .teamDashIdBox span,
html body .teamSubHero p,
html body .teamVisitMeta,
html body .teamVisitOwner,
html body .teamFinanceRow span,
html body .teamCareerSub,
html body .teamCareerProgress div,
html body .achievementTop span,
html body .achievementBody p,
html body .achievementProgress div,
html body .achievementReward small,
html body .staffSkillCard span,
html body .panelMutedTitle {
  color: var(--module-text-muted) !important;
}

html body .teamDashContact,
html body .teamDashIdBox,
html body .teamFinanceRow,
html body .achievementReward {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text-soft) !important;
}

html body .teamDashNav button {
  color: var(--module-text-muted) !important;
}

html body .teamDashNav button:hover,
html body .teamDashNav button.active {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--module-accent) 26%,
        var(--module-surface-soft)
      ),
      var(--module-accent-soft)
    ) !important;
  color: var(--module-text) !important;
  box-shadow:
    inset 0 0 0 1px var(--module-border-strong),
    0 9px 24px var(--module-accent-glow) !important;
}

html body .teamPrimaryBtn {
  background:
    linear-gradient(
      135deg,
      var(--module-accent),
      var(--module-accent-2)
    ) !important;
  border-color: var(--module-border-strong) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 32px var(--module-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html body .teamKpiCard,
html body .teamDashPanel,
html body .teamDashInsight,
html body .teamSubHero,
html body .teamVisitCard,
html body .teamCareerLevel,
html body .teamCareerProgress,
html body .achievementCard,
html body .staffSkillCard {
  background:
    radial-gradient(
      circle at 100% 0%,
      var(--module-accent-soft),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      var(--module-surface-1),
      var(--module-surface-2)
    ) !important;
  border-color: var(--module-border) !important;
  box-shadow:
    0 17px 46px var(--module-shadow),
    inset 0 1px 0
      color-mix(
        in srgb,
        var(--module-text) 7%,
        transparent
      ) !important;
}

html body .teamKpiIcon,
html body .teamInsightIcon,
html body .teamVisitIcon,
html body .teamCareerBadge,
html body .staffSkillIcon {
  background: var(--module-accent-soft) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-accent-2) !important;
}

html body .teamDashInsight {
  background:
    radial-gradient(
      circle at 0% 0%,
      color-mix(
        in srgb,
        var(--module-accent) 24%,
        transparent
      ),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      var(--module-surface-1),
      var(--module-surface-2)
    ) !important;
  border-color: var(--module-border-strong) !important;
}

html body .teamDashInsight b,
html body .teamDashInsight p,
html body .teamAnalyticsInsight p {
  color: var(--module-text-soft) !important;
}

html body .teamDashInsight strong,
html body .teamAnalyticsInsight b,
html body .teamVisitOpenBtn {
  color: var(--module-accent-2) !important;
}

html body .teamDashPanelHead > span {
  background: var(--module-surface-soft) !important;
  color: var(--module-text-muted) !important;
}

html body .teamDashRows p {
  border-bottom-color: var(--module-border) !important;
}

html body .teamDashXp i,
html body .teamBarTrack,
html body .teamCareerProgress i,
html body .achievementProgress i {
  background: var(--module-surface-hover) !important;
}

html body .teamDashXp em,
html body .teamBarTrack i.purple,
html body .teamCareerProgress em,
html body .achievementProgress em {
  background:
    linear-gradient(
      90deg,
      var(--module-accent),
      var(--module-accent-2)
    ) !important;
}

html body .teamChartRange button,
html body .teamVisitFilters button {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text-muted) !important;
}

html body .teamChartRange button:hover,
html body .teamVisitFilters button:hover {
  background: var(--module-surface-hover) !important;
  color: var(--module-text) !important;
}

html body .teamChartRange button.active,
html body .teamVisitFilters button.active {
  background:
    linear-gradient(
      135deg,
      var(--module-accent),
      var(--module-accent-2)
    ) !important;
  border-color: var(--module-border-strong) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 28px var(--module-accent-glow) !important;
}

html body .teamVisitStatus,
html body .teamDashStatus {
  color: #65c59e !important;
  background: rgba(66, 154, 124, 0.11) !important;
  border-color: rgba(66, 154, 124, 0.27) !important;
}

html body .achievementIcon {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
}

html body .achievementXp {
  color: var(--module-accent-2) !important;
}

html body .staffSkillRemove {
  background: var(--module-surface-hover) !important;
  color: var(--module-text-soft) !important;
}

html body .staffSkillModalOverlay,
html body .financeAdjustModalOverlay {
  background:
    radial-gradient(
      circle at 50% 24%,
      var(--module-accent-soft),
      transparent 44%
    ),
    var(--module-overlay) !important;
}

html body .staffSkillModal,
html body .financeAdjustModal {
  background:
    radial-gradient(
      circle at top left,
      var(--module-accent-soft),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      var(--module-surface-1),
      var(--module-surface-2)
    ) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-text) !important;
  box-shadow:
    0 30px 90px var(--module-shadow),
    0 0 30px var(--module-accent-glow) !important;
}

html body .staffSkillModalHead h2 {
  color: var(--module-text) !important;
}

html body .staffSkillModalHead p,
html body .staffSkillField span,
html body .staffSkillPresets > span {
  color: var(--module-text-muted) !important;
}

html body .staffSkillModalIcon {
  background: var(--module-accent-soft) !important;
  border-color: var(--module-border-strong) !important;
}

html body .staffSkillField input {
  background: var(--module-input) !important;
  border-color: var(--module-border-strong) !important;
  color: var(--module-text) !important;
  box-shadow:
    0 0 0 3px var(--module-accent-soft) !important;
}

html body .staffSkillPresets button {
  background: var(--module-surface-soft) !important;
  border-color: var(--module-border) !important;
  color: var(--module-text-soft) !important;
}

/* =========================================================
   TEAM DIRECTORY — MARBLE WHITE ONLY
   Compact hierarchy for the staff list; other themes unchanged.
   ========================================================= */

body[data-theme="white"] .teamPageCard {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 4px !important;
}

body[data-theme="white"] .teamPageCard > .row:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
}

body[data-theme="white"] .teamPageCard > .row:first-child > button {
  margin-left: auto;
  flex: 0 0 auto;
}

body[data-theme="white"] .teamPageCard > .row:first-child h2 {
  color: #172b3a !important;
  font-size: 30px;
  letter-spacing: -0.035em;
}

body[data-theme="white"] .teamPageCard > .row:first-child .hint {
  color: #687b89 !important;
}

body[data-theme="white"] .teamPageCard > .row:first-child .primary,
body[data-theme="white"] .specPanel .primary {
  background: #3478a8 !important;
  border-color: #3478a8 !important;
  color: #ffffff !important;
  box-shadow: 0 9px 22px rgba(44, 103, 145, 0.18) !important;
}

body[data-theme="white"] .teamPageCard .specPanel {
  padding: 16px 18px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.94),
      rgba(242, 248, 251, 0.91)
    ) !important;
  border: 1px solid #d4e3eb !important;
  box-shadow:
    0 12px 30px rgba(47, 83, 107, 0.07),
    inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .teamPageCard .specPanelHead {
  margin-bottom: 12px;
}

body[data-theme="white"] .teamPageCard .specPanelTitle {
  color: #203847 !important;
  font-size: 16px;
}

body[data-theme="white"] .teamPageCard .specPanel .hint {
  color: #718491 !important;
}

body[data-theme="white"] .teamPageCard .specPill {
  min-height: 38px;
  padding: 5px 7px 5px 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #d7e4eb !important;
  color: #294656 !important;
  box-shadow:
    0 3px 10px rgba(47, 83, 107, 0.045),
    inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .teamPageCard .specPillDelete {
  background: #fff4f5 !important;
  border-color: #f2d2d7 !important;
  color: #c55b6a !important;
}

body[data-theme="white"] .teamPageCard .vetList {
  gap: 10px;
  margin-top: 20px;
}

body[data-theme="white"] .teamPageCard .staffGroupHeader {
  display: grid;
  grid-template-columns: auto auto minmax(30px, 1fr);
  gap: 9px;
  margin: 18px 2px 4px;
  color: #294656 !important;
  font-size: 14px;
}

body[data-theme="white"] .teamPageCard .staffGroupHeader::after {
  content: "";
  align-self: center;
  height: 1px;
  margin-left: 4px;
  background:
    linear-gradient(
      90deg,
      #cddfe9,
      transparent
    );
}

body[data-theme="white"] .teamPageCard .staffGroupHeader small {
  min-width: 22px;
  height: 22px;
  background: #e6f2fa !important;
  border-color: #c5dce9 !important;
  color: #3478a8 !important;
}

body[data-theme="white"] .teamPageCard .premiumVetCard {
  grid-template-columns:
    64px
    minmax(0, 1fr)
    126px;
  gap: 15px;
  align-items: center;
  min-height: 0;
  padding: 16px 17px !important;
  background:
    radial-gradient(
      circle at 0% 0%,
      color-mix(
        in srgb,
        var(
          --staff-color-contrast,
          var(--staff-color)
        ) 10%,
        transparent
      ),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(244, 249, 252, 0.94)
    ) !important;
  border: 1px solid #d4e3eb !important;
  border-left:
    4px solid
    var(
      --staff-color-contrast,
      var(--staff-color)
    ) !important;
  border-radius: 20px;
  box-shadow:
    0 12px 32px rgba(47, 83, 107, 0.09),
    inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .teamPageCard .premiumVetCard:hover {
  transform: translateY(-1px);
  border-color:
    color-mix(
      in srgb,
      var(
        --staff-color-contrast,
        var(--staff-color)
      ) 28%,
      #d4e3eb
    ) !important;
  box-shadow:
    0 16px 38px rgba(47, 83, 107, 0.12),
    inset 0 1px 0 #ffffff !important;
}

body[data-theme="white"] .teamPageCard :is(
  .vetAvatarLetter,
  .vetAvatarImg
) {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  box-shadow:
    0 9px 22px
    color-mix(
      in srgb,
      var(
        --staff-color-contrast,
        var(--staff-color)
      ) 19%,
      transparent
    );
}

body[data-theme="white"] .teamPageCard .vetAvatarLetter {
  background:
    linear-gradient(
      135deg,
      var(--staff-color) 0%,
      color-mix(
        in srgb,
        var(
          --staff-color-contrast,
          var(--staff-color)
        ) 82%,
        #ffffff
      ) 100%
    ) !important;
  border-color:
    color-mix(
      in srgb,
      var(
        --staff-color-contrast,
        var(--staff-color)
      ) 56%,
      #d3e2eb
    ) !important;
  color: #ffffff !important;
  text-shadow:
    0 1px 3px rgba(20, 38, 49, 0.42);
}

body[data-theme="white"] .teamPageCard .premiumVetTop {
  justify-content: flex-start;
  align-items: center;
}

body[data-theme="white"] .teamPageCard .premiumVetName {
  color: #172b3a !important;
  font-size: 18px;
}

body[data-theme="white"] .teamPageCard .premiumVetRole {
  color: #667987 !important;
  font-size: 12px;
}

body[data-theme="white"] .teamPageCard .premiumStatus {
  margin-left: 12px;
  padding: 6px 10px;
  background: #f2f6f8 !important;
  border-color: #d5e2e9 !important;
  color: #6c7f8c !important;
  font-size: 11px;
}

body[data-theme="white"] .teamPageCard .premiumStatus.active {
  background: #e9f6ef !important;
  border-color: #bddfce !important;
  color: #31705c !important;
}

body[data-theme="white"] .teamPageCard .premiumVetSpecs {
  gap: 6px;
  margin-top: 8px;
}

body[data-theme="white"] .teamPageCard .premiumSpecTag {
  padding: 5px 9px;
  color: #385567 !important;
  font-size: 10px;
}

body[data-theme="white"] .teamPageCard .premiumVetMeta {
  grid-template-columns:
    repeat(3, minmax(115px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body[data-theme="white"] .teamPageCard .premiumMetaItem {
  padding: 8px 10px;
  background: rgba(235, 244, 249, 0.72) !important;
  border: 1px solid #dbe7ee !important;
  border-radius: 12px;
}

body[data-theme="white"] .teamPageCard .premiumMetaItem span {
  color: #78909e !important;
  font-size: 9px;
}

body[data-theme="white"] .teamPageCard .premiumMetaItem strong {
  margin-top: 3px;
  color: #294656 !important;
  font-size: 12px;
}

body[data-theme="white"] .teamPageCard .premiumVetActions {
  display: grid;
  align-content: center;
  gap: 6px;
}

body[data-theme="white"] .teamPageCard .premiumVetActions button {
  width: 126px;
  min-width: 0;
  min-height: 34px;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 11px;
  box-shadow: none !important;
}

body[data-theme="white"] .teamPageCard .premiumProfileBtn {
  background: #e8f3fa !important;
  border-color: #bfd8e8 !important;
  color: #286f9f !important;
}

body[data-theme="white"] .teamPageCard .premiumEditBtn {
  background: #ffffff !important;
  border-color: #d4e2ea !important;
  color: #526b7b !important;
}

body[data-theme="white"] .teamPageCard .premiumDeleteBtn {
  background: #fff4f5 !important;
  border-color: #f0d0d5 !important;
  color: #b85160 !important;
}

@media (max-width: 900px) {
  body[data-theme="white"] .teamPageCard .premiumVetCard {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  body[data-theme="white"] .teamPageCard .premiumVetActions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }

  body[data-theme="white"] .teamPageCard .premiumVetActions button {
    width: auto;
  }
}

/* =========================================================
   CALENDAR — READABLE WORK SCALE
   Увеличиваем рабочую информацию без масштабирования страницы.
   ========================================================= */

.page[data-page="calendar"] .calendarTimelineTimeHead {
  font-size: 11px;
}

.page[data-page="calendar"] .calendarTimelineTimeLabel {
  transform: translateY(-8px);
  font-size: 12px;
  font-weight: 760;
  line-height: 16px;
}

.page[data-page="calendar"] .calendarDoctorsTimelineGrid {
  grid-auto-columns: minmax(260px, 1fr);
}

.page[data-page="calendar"] .calendarDoctorTimelineColumn {
  min-width: 260px;
}

.page[data-page="calendar"] .calendarDoctorTimelineHead {
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 11px;
  padding: 13px 16px;
}

.page[data-page="calendar"] .calendarDoctorAvatar {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.page[data-page="calendar"] .calendarDoctorTimelineIdentity strong {
  font-size: 14px;
}

.page[data-page="calendar"] .calendarDoctorTimelineIdentity span {
  font-size: 11px;
}

.page[data-page="calendar"] .calendarTimelineHover {
  height: 30px;
  transform: translateY(-15px);
  font-size: 11px;
}

.page[data-page="calendar"] .calendarTimelineEvent {
  min-height: 46px;
  padding: 10px 32px 10px 13px;
}

.page[data-page="calendar"] .calendarTimelineEventTime {
  font-size: 10.5px;
  line-height: 1.25;
}

.page[data-page="calendar"] .calendarTimelineEventTitle {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.28;
}

.page[data-page="calendar"] .calendarTimelineEventNote {
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.25;
}

.page[data-page="calendar"] .calendarTimelineStatus {
  min-height: 20px;
  padding: 0 7px;
  font-size: 9px;
}

.page[data-page="calendar"] .calendarTimelineEvent.is-tiny
.calendarTimelineEventTitle {
  font-size: 12px;
}

.page[data-page="calendar"] .calStaffPanel {
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  padding: 14px !important;
}

.page[data-page="calendar"] .calStaffPanelTitle {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.page[data-page="calendar"] .calStaffPanelSub {
  margin-top: 3px;
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
}

.page[data-page="calendar"] .calStaffDrag {
  padding: 11px 12px !important;
}

.page[data-page="calendar"] .calStaffDragName {
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
}

.page[data-page="calendar"] .calStaffDragRole {
  margin-top: 2px;
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
}

.page[data-page="calendar"] .calStaffDrag .specTag {
  font-size: 0.68rem !important;
}

@media (max-width: 1100px) {
  .page[data-page="calendar"] .calendarDoctorsTimelineGrid {
    grid-auto-columns: minmax(245px, 1fr);
  }

  .page[data-page="calendar"] .calendarDoctorTimelineColumn {
    min-width: 245px;
  }

  .page[data-page="calendar"] .calStaffPanel {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}

/* =========================================================
   FINANCE WORKSPACE 2.0
   Action-first finance for the clinic team.
   ========================================================= */

.page[data-page="finance"] .financeWorkspaceV2 {
  color: var(--finance-text);
}

.page[data-page="finance"] .financeSectionNavigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  border-color: var(--finance-border);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--finance-surface-1) 88%, transparent),
      color-mix(in srgb, var(--finance-surface-2) 82%, transparent)
    );
  box-shadow:
    0 18px 52px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.page[data-page="finance"] .financeSectionButton {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  color: var(--finance-text-muted);
}

.page[data-page="finance"] .financeSectionButton.active {
  border-color:
    color-mix(
      in srgb,
      var(--finance-accent) 48%,
      var(--finance-border)
    );
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--finance-accent) 24%, var(--finance-surface-soft)),
      color-mix(in srgb, var(--finance-accent) 9%, var(--finance-surface-2))
    );
  color: var(--finance-text);
}

.financeControlHero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 196px;
  padding: 34px 36px;
  overflow: hidden;
  border: 1px solid var(--finance-border-strong);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 86% 12%,
      var(--finance-accent-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at 2% 110%,
      var(--finance-accent-soft),
      transparent 43%
    ),
    linear-gradient(
      140deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 28px 76px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.financeControlHero::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -30px;
  width: 290px;
  height: 290px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--finance-accent) 16%,
      transparent
    );
  border-radius: 50%;
  box-shadow:
    0 0 0 42px
      color-mix(
        in srgb,
        var(--finance-accent) 4%,
        transparent
      ),
    0 0 0 90px
      color-mix(
        in srgb,
        var(--finance-accent) 2%,
        transparent
      );
  pointer-events: none;
}

.financeControlHeroMain,
.financeControlHeroActions,
.financeCollectionScore {
  position: relative;
  z-index: 1;
}

.financeControlHeroMain {
  min-width: 0;
}

.financeControlHero .financeEyebrow {
  color: var(--finance-accent-2);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.financeControlHero h1 {
  margin: 0;
  color: var(--finance-text);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.financeControlHero p {
  max-width: 670px;
  margin: 14px 0 0;
  color: var(--finance-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.financeControlHeroActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.financePrimaryAction,
.financeQuietAction {
  min-height: 46px;
  padding: 0 18px;
  cursor: pointer;
  border-radius: 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.financePrimaryAction {
  border: 1px solid
    color-mix(
      in srgb,
      var(--finance-accent) 65%,
      white
    );
  background:
    linear-gradient(
      135deg,
      var(--finance-accent),
      color-mix(
        in srgb,
        var(--finance-accent) 70%,
        var(--finance-surface-2)
      )
    );
  box-shadow:
    0 14px 34px var(--finance-accent-glow);
  color: #fff;
}

.financePrimaryAction span {
  margin-right: 5px;
}

.financeQuietAction {
  border: 1px solid var(--finance-border);
  background: var(--finance-surface-soft);
  color: var(--finance-text-soft);
}

.financePrimaryAction:hover,
.financeQuietAction:hover {
  transform: translateY(-1px);
}

.financeTodayKpis,
.financeClientKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.financeTodayKpis :is(
  article,
  .financeKpiCard
),
.financeClientKpis article {
  position: relative;
  min-width: 0;
  min-height: 132px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--finance-border);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 100% 0,
      var(--finance-accent-soft),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 18px 45px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.financeTodayKpis .financeKpiCard {
  width: 100%;
  appearance: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.financeTodayKpis .financeKpiCard:hover,
.financeTodayKpis .financeKpiCard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--finance-accent);
  outline: none;
  box-shadow:
    0 22px 52px var(--finance-shadow),
    0 0 0 3px var(--finance-accent-soft);
}

.financeTodayKpis :is(
  article,
  .financeKpiCard
) > span,
.financeClientKpis article > span {
  display: block;
  color: var(--finance-text-muted);
  font-size: 11px;
  font-weight: 750;
}

.financeTodayKpis :is(
  article,
  .financeKpiCard
) > strong,
.financeClientKpis article > strong {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  color: var(--finance-text);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeTodayKpis :is(
  article,
  .financeKpiCard
) > small {
  display: block;
  margin-top: 12px;
  color: var(--finance-text-faint);
  font-size: 10px;
  line-height: 1.35;
}

.financeTodayKpis :is(
  article,
  .financeKpiCard
):nth-child(1)::after,
.financeClientKpis article:nth-child(2)::after {
  content: "";
  position: absolute;
  right: -25px;
  bottom: -38px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(72, 211, 145, 0.13);
  filter: blur(18px);
}

.financeTodayKpis :is(
  article,
  .financeKpiCard
):nth-child(2) > strong,
.financeClientKpis .is-debt > strong {
  color: #ff889d;
}

.financePartialDataNotice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 181, 71, 0.35);
  border-radius: 16px;
  background: rgba(255, 181, 71, 0.1);
  color: var(--finance-text);
}

.financePartialDataNotice > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 181, 71, 0.16);
  color: #d58c20;
  font-weight: 900;
}

.financePartialDataNotice p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.financePartialDataNotice strong {
  font-size: 12px;
}

.financePartialDataNotice small {
  color: var(--finance-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.financePartialDataNotice button {
  padding: 8px 12px;
  border: 1px solid var(--finance-border);
  border-radius: 10px;
  background: var(--finance-surface-soft);
  color: var(--finance-text);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.financeInlineUnavailable {
  padding: 16px;
  border: 1px dashed var(--finance-border);
  border-radius: 14px;
  color: var(--finance-text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.financeTodayLayout,
.financeTodayBottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.financeAccountsPanel {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--finance-border);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 18px 45px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.financeAccountsHeading {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}

.financeAccountsHeading > div:first-child > span {
  color: var(--finance-accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.financeAccountsHeading h2 {
  margin: 5px 0 0;
  color: var(--finance-text);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.financeAccountsHeading p {
  margin: 5px 0 0;
  color: var(--finance-text-muted);
  font-size: 10px;
}

.financeAccountsTotal {
  display: grid;
  gap: 3px;
  justify-items: end;
}

.financeAccountsTotal span {
  color: var(--finance-text-muted);
  font-size: 9px;
  font-weight: 750;
}

.financeAccountsTotal strong {
  color: var(--finance-text);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.financeAccountsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.financeAccountCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 11px;
  align-items: center;
  min-width: 0;
  padding: 15px;
  cursor: pointer;
  border: 1px solid var(--finance-border);
  border-radius: 17px;
  background: var(--finance-surface-soft);
  color: inherit;
  text-align: left;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.financeAccountCard:hover,
.financeAccountCard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--finance-accent);
  outline: none;
  box-shadow:
    0 14px 30px var(--finance-shadow),
    0 0 0 3px var(--finance-accent-soft);
}

.financeAccountIcon {
  display: grid;
  grid-row: 1 / span 3;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--finance-accent-soft);
  color: var(--finance-accent);
  font-size: 16px;
  font-weight: 900;
}

.financeAccountCard.is-cash .financeAccountIcon {
  background: rgba(72, 211, 145, 0.12);
  color: #37b879;
}

.financeAccountName {
  overflow: hidden;
  color: var(--finance-text-muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeAccountCard strong {
  overflow: hidden;
  color: var(--finance-text);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeAccountCard small {
  color: var(--finance-text-faint);
  font-size: 9px;
}

.financeActionPanel {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--finance-border);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 20px 55px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.financeActionPanel .financePanelHead {
  align-items: center;
}

.financeActionPanel .financePanelHead h2 {
  margin: 0;
  color: var(--finance-text);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.financeActionPanel .financePanelHead span {
  color: var(--finance-accent-2);
}

.financeActionPanel .financePanelHead button {
  min-height: 34px;
  padding: 0 10px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--finance-text-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

.financeActionPanel .financePanelHead button:hover {
  color: var(--finance-accent-2);
}

.financeAttentionList {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.financeAttentionRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--finance-border);
  border-radius: 15px;
  background: var(--finance-surface-soft);
}

.financeAttentionAvatar,
.financeClientAvatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--finance-border-strong);
  border-radius: 14px;
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
  font-size: 15px;
  font-weight: 900;
}

.financeAttentionMain {
  min-width: 0;
}

.financeAttentionMain strong,
.financeAttentionMain span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeAttentionMain strong {
  color: var(--finance-text);
  font-size: 12px;
}

.financeAttentionMain span {
  margin-top: 4px;
  color: var(--finance-text-muted);
  font-size: 9px;
}

.financeAttentionAmount {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.financeAttentionAmount strong {
  color: #ff8ba0;
  font-size: 12px;
}

.financeAttentionAmount button {
  min-height: 26px;
  padding: 0 9px;
  cursor: pointer;
  border: 1px solid
    color-mix(
      in srgb,
      var(--finance-accent) 42%,
      var(--finance-border)
    );
  border-radius: 8px;
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
  font: inherit;
  font-size: 8px;
  font-weight: 850;
}

.financePositiveEmpty {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 116px;
  padding: 18px;
  border: 1px solid rgba(69, 208, 140, 0.18);
  border-radius: 16px;
  background: rgba(69, 208, 140, 0.055);
}

.financePositiveEmpty > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: rgba(69, 208, 140, 0.1);
  color: #6edca6;
  font-size: 17px;
  font-weight: 900;
}

.financePositiveEmpty strong {
  color: var(--finance-text);
  font-size: 12px;
}

.financePositiveEmpty p {
  margin: 5px 0 0;
  color: var(--finance-text-muted);
  font-size: 9px;
  line-height: 1.45;
}

.financeSignalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.financeSignalCard {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 82px;
  padding: 13px;
  cursor: pointer;
  border: 1px solid var(--finance-border);
  border-radius: 16px;
  background: var(--finance-surface-soft);
  color: var(--finance-text);
  text-align: left;
}

.financeSignalIcon {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
  font-weight: 900;
}

.financeSignalCard.is-warning .financeSignalIcon {
  background: rgba(245, 184, 75, 0.11);
  color: #e8bc68;
}

.financeSignalCard.is-danger .financeSignalIcon {
  background: rgba(255, 98, 126, 0.11);
  color: #ff879d;
}

.financeSignalCard.is-good .financeSignalIcon {
  background: rgba(69, 208, 140, 0.1);
  color: #67dca2;
}

.financeSignalCard strong,
.financeSignalCard span {
  display: block;
}

.financeSignalCard strong {
  font-size: 20px;
  line-height: 1;
}

.financeSignalCard div > span {
  margin-top: 6px;
  color: var(--finance-text-muted);
  font-size: 9px;
  line-height: 1.3;
}

.financeSignalDetails {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.financeSignalDetails > div {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--finance-surface-soft);
}

.financeSignalDetails span,
.financeSignalDetails small {
  color: var(--finance-text-muted);
  font-size: 8px;
}

.financeSignalDetails strong {
  overflow: hidden;
  color: var(--finance-text-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeSignalDetails > .is-calm {
  grid-template-columns: 66px 1fr;
  min-height: 44px;
}

.financeCompactOperations {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.financeCompactOperations > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--finance-border);
  border-radius: 13px;
  background: var(--finance-surface-soft);
}

.financeCompactOperations > div > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: rgba(70, 211, 144, 0.09);
  color: #63d99e;
}

.financeCompactOperations > div > span.is-outcome {
  background: rgba(255, 98, 126, 0.09);
  color: #ff8298;
}

.financeCompactOperations p {
  min-width: 0;
  margin: 0;
}

.financeCompactOperations p strong,
.financeCompactOperations p small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeCompactOperations p strong {
  color: var(--finance-text);
  font-size: 10px;
}

.financeCompactOperations p small {
  margin-top: 4px;
  color: var(--finance-text-muted);
  font-size: 8px;
}

.financeCompactOperations b {
  color: #67dca2;
  font-size: 10px;
}

.financeCompactOperations b.is-outcome {
  color: #ff8298;
}

.financeCompactOperations > .financeCompactEmpty {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  color: var(--finance-text-muted);
  font-size: 10px;
}

.financeDayBrief {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 23px;
  border: 1px solid var(--finance-border);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0,
      var(--finance-accent-soft),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 20px 55px var(--finance-shadow);
}

.financeDayBrief > span {
  display: grid;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid var(--finance-border-strong);
  border-radius: 14px;
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
  font-size: 17px;
}

.financeDayBrief small {
  color: var(--finance-accent-2);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.financeDayBrief h2 {
  margin: 7px 0 0;
  color: var(--finance-text);
  font-size: 18px;
  line-height: 1.2;
}

.financeDayBrief p {
  margin: 9px 0 0;
  color: var(--finance-text-muted);
  font-size: 10px;
  line-height: 1.55;
}

.financeCollectionScore {
  display: grid;
  min-width: 180px;
  justify-items: end;
}

.financeCollectionScore > span,
.financeCollectionScore > small {
  color: var(--finance-text-muted);
  font-size: 9px;
}

.financeCollectionScore > strong {
  margin: 6px 0;
  color: var(--finance-accent-2);
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.financeClientKpis article {
  min-height: 108px;
}

.financeClientKpis article > strong {
  font-size: clamp(22px, 2vw, 30px);
}

.financeClientsToolbar {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--finance-border);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
}

.financeClientFilters {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--finance-surface-soft);
}

.financeClientFilters button {
  min-height: 34px;
  padding: 0 11px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--finance-text-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
}

.financeClientFilters button.active {
  border-color: var(--finance-border-strong);
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
}

.financeClientSearch {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  max-width: 520px;
  min-height: 42px;
  justify-self: end;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--finance-border);
  border-radius: 12px;
  background: var(--finance-input);
  color: var(--finance-text-muted);
}

.financeClientSearch input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--finance-text);
  font: inherit;
  font-size: 10px;
}

.financeClientSearch input::placeholder {
  color: var(--finance-text-faint);
}

.financeClientsCount {
  padding: 0 8px;
  color: var(--finance-text-muted);
  font-size: 9px;
  white-space: nowrap;
}

.financeClientsCount strong {
  color: var(--finance-text);
}

.financeClientsList {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.financeClientCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--finance-border);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 20px 55px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.financeClientCard[hidden] {
  display: none;
}

.financeClientCard.has-debt {
  border-left: 3px solid #f0b75e;
}

.financeClientCard.is-paid {
  border-left: 3px solid #5ed99d;
}

.financeClientCard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--finance-border);
}

.financeClientIdentity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
}

.financeClientIdentity > div:last-child {
  min-width: 0;
}

.financeClientIdentity h2,
.financeClientIdentity p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeClientIdentity h2 {
  margin: 0;
  color: var(--finance-text);
  font-size: 16px;
}

.financeClientIdentity p {
  margin: 5px 0 0;
  color: var(--finance-text-muted);
  font-size: 9px;
}

.financeClientBalance {
  display: grid;
  justify-items: end;
  flex: 0 0 auto;
}

.financeClientBalance > span {
  color: var(--finance-text-muted);
  font-size: 8px;
}

.financeClientBalance > strong {
  margin-top: 5px;
  color: var(--finance-text);
  font-size: 19px;
}

.financeClientCard.has-debt
.financeClientBalance > strong {
  color: #efbd6b;
}

.financeClientBalance > small {
  margin-top: 5px;
  font-size: 8px;
}

.financeClientBalance > small.is-unpaid {
  color: #e9b767;
}

.financeClientBalance > small.is-paid {
  color: #65d9a0;
}

.financeClientVisitList {
  display: grid;
  gap: 7px;
  padding: 12px 20px;
}

.financeClientVisit {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(115px, auto)
    auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--finance-surface-soft);
}

.financeClientVisit > div:first-child {
  min-width: 0;
}

.financeClientVisit > div:first-child strong,
.financeClientVisit > div:first-child span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeClientVisit > div:first-child strong {
  color: var(--finance-text);
  font-size: 11px;
}

.financeClientVisit > div:first-child span {
  margin-top: 4px;
  color: var(--finance-text-muted);
  font-size: 8px;
}

.financeClientVisitAmounts {
  display: grid;
  justify-items: end;
}

.financeClientVisitAmounts span {
  color: var(--finance-text-muted);
  font-size: 8px;
}

.financeClientVisitAmounts strong {
  margin-top: 4px;
  color: var(--finance-text-soft);
  font-size: 11px;
}

.financeClientVisitActions {
  display: flex;
  gap: 7px;
}

.financeClientVisitActions button {
  min-height: 32px;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 9px;
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.financeVisitOpenButton {
  border: 1px solid var(--finance-border);
  background: transparent;
  color: var(--finance-text-muted);
}

.financeVisitPayButton {
  border: 1px solid var(--finance-border-strong);
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
}

.financeClientVisitsEmpty {
  padding: 16px;
  color: var(--finance-text-muted);
  font-size: 9px;
  text-align: center;
}

.financeClientCard > footer {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 20px;
  border-top: 1px solid var(--finance-border);
  color: var(--finance-text-muted);
  font-size: 8px;
}

.financeClientCard > footer div strong {
  margin-left: 5px;
  color: var(--finance-text-soft);
}

.financeClientCard > footer button {
  margin-left: auto;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--finance-accent-2);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
}

.financeClientsFilteredEmpty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed var(--finance-border);
  border-radius: 22px;
  color: var(--finance-text-muted);
  text-align: center;
}

.financeClientsFilteredEmpty[hidden] {
  display: none;
}

.financeClientsFilteredEmpty > span {
  font-size: 25px;
}

.financeClientsFilteredEmpty > strong {
  color: var(--finance-text);
  font-size: 13px;
}

.financeClientsFilteredEmpty > p {
  margin: 0;
  font-size: 9px;
}

body[data-theme="white"]
.page[data-page="finance"]
:is(
  .financeControlHero,
  .financeTodayKpis article,
  .financeTodayKpis .financeKpiCard,
  .financeClientKpis article,
  .financeActionPanel,
  .financeAccountsPanel,
  .financeDayBrief,
  .financeClientsToolbar,
  .financeClientCard
) {
  box-shadow:
    0 18px 52px rgba(46, 61, 74, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="white"]
.page[data-page="finance"]
:is(
  .financeControlHero h1,
  .financeTodayKpis strong,
  .financeClientKpis strong,
  .financeActionPanel h2,
  .financeAttentionMain strong,
  .financeSignalCard,
  .financeSignalDetails strong,
  .financeCompactOperations p strong,
  .financeDayBrief h2,
  .financeClientIdentity h2,
  .financeClientVisit strong,
  .financeClientsFilteredEmpty strong
) {
  color: var(--finance-text);
}

@media (max-width: 1080px) {
  .financeTodayKpis,
  .financeClientKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financeClientsToolbar {
    grid-template-columns: 1fr auto;
  }

  .financeClientFilters {
    grid-column: 1 / -1;
  }

  .financeClientSearch {
    justify-self: stretch;
  }
}

@media (max-width: 860px) {
  .page[data-page="finance"] .financeSectionNavigation {
    display: flex;
    margin-inline: 0;
  }

  .page[data-page="finance"] .financeSectionButton {
    width: auto;
    min-width: 142px;
  }

  .financeControlHero {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    padding: 26px;
  }

  .financeControlHeroActions {
    align-items: stretch;
  }

  .financeTodayLayout,
  .financeTodayBottom {
    grid-template-columns: 1fr;
  }

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

  .financeCollectionScore {
    min-width: 0;
    justify-items: start;
  }

  .financeClientVisit {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .financeClientVisitActions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 580px) {
  .financeControlHero {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .financeControlHero h1 {
    font-size: 34px;
  }

  .financeControlHeroActions {
    flex-direction: column;
  }

  .financeTodayKpis,
  .financeClientKpis,
  .financeSignalGrid {
    grid-template-columns: 1fr;
  }

  .financeTodayKpis article,
  .financeTodayKpis .financeKpiCard,
  .financeClientKpis article {
    min-height: 104px;
  }

  .financeActionPanel {
    padding: 17px;
  }

  .financeAccountsHeading {
    align-items: flex-start;
    flex-direction: column;
  }

  .financeAccountsTotal {
    justify-items: start;
  }

  .financeAttentionRow {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .financeAttentionAvatar {
    width: 38px;
    height: 38px;
  }

  .financeAttentionAmount {
    grid-column: 2;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
    width: 100%;
  }

  .financeSignalDetails > div {
    grid-template-columns: 55px minmax(0, 1fr);
  }

  .financeSignalDetails small {
    grid-column: 2;
  }

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

  .financeClientFilters {
    overflow-x: auto;
  }

  .financeClientsCount {
    justify-self: end;
  }

  .financeClientCard > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .financeClientBalance {
    justify-items: start;
  }

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

  .financeClientVisitAmounts {
    justify-items: start;
  }

  .financeClientVisitActions {
    grid-column: auto;
    justify-content: stretch;
  }

  .financeClientVisitActions button {
    flex: 1;
  }

  .financeClientCard > footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .financeClientCard > footer button {
    margin-left: 0;
  }
}
/* =====================================================
   OWNER AUDIT EVENTS
   ===================================================== */

.auditEventsPage {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px 18px 110px;
}

.auditEventsHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(147, 70, 232, 0.2), transparent 40%),
    rgba(14, 14, 18, 0.8);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.auditEventsHero span {
  color: var(--accent, #a970ee);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.auditEventsHero h1 {
  margin: 7px 0 8px;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
}

.auditEventsHero p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.55;
}

.auditOwnerBadge {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(169, 112, 238, 0.35);
  border-radius: 999px;
  background: rgba(147, 70, 232, 0.12);
  color: #d9bfff;
  font-size: 12px;
  font-weight: 800;
}

.auditEventsPanel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(14, 14, 18, 0.78);
}

.auditEventsFilters {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.8fr 0.8fr auto;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.auditEventsFilters label {
  display: grid;
  gap: 7px;
}

.auditEventsFilters label > span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auditEventsFilters input,
.auditEventsFilters select {
  min-height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  outline: none;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
}

.auditEventsFilters input:focus,
.auditEventsFilters select:focus {
  border-color: rgba(169, 112, 238, 0.8);
  box-shadow: 0 0 0 3px rgba(147, 70, 232, 0.13);
}

.auditEventsFilterActions {
  display: flex;
  gap: 8px;
}

.auditEventsFilterActions button,
.auditEventsPagination button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.auditEventsFilterActions button[type="submit"] {
  border-color: rgba(147, 70, 232, 0.6);
  background: linear-gradient(135deg, #9346e8, #6e2dbc);
}

.auditEventsFilterActions button:hover,
.auditEventsPagination button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(169, 112, 238, 0.7);
}

.auditEventsPagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.auditEventsTableWrap {
  overflow-x: auto;
}

.auditEventsTable {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
}

.auditEventsTable th,
.auditEventsTable td {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  vertical-align: top;
}

.auditEventsTable th {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auditEventsTable td {
  font-size: 13px;
}

.auditEventsTable td strong,
.auditEventsTable td small {
  display: block;
}

.auditEventsTable td small {
  max-width: 290px;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auditActionBadge {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(169, 112, 238, 0.28);
  border-radius: 999px;
  background: rgba(147, 70, 232, 0.12);
  color: #d9bfff;
  font-size: 11px;
  font-weight: 800;
}

.auditEventDetails {
  position: relative;
}

.auditEventDetails summary {
  color: #d9bfff;
  font-weight: 800;
  cursor: pointer;
}

.auditEventDetails > div {
  min-width: min(480px, 75vw);
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #111116;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.auditEventDetails p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.8);
}

.auditEventDetails label {
  display: block;
  margin: 10px 0 5px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.auditEventDetails pre {
  overflow: auto;
  max-height: 220px;
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #d8d8e3;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.auditEventDetails footer {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
}

.auditEventsPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.auditEventsPagination > div {
  display: flex;
  gap: 8px;
}

.auditEventsLoading,
.auditEventsError,
.auditEventsEmpty,
.auditEventsDenied {
  padding: 54px 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

.auditEventsEmpty span,
.auditEventsDenied span {
  display: block;
  margin-bottom: 10px;
  font-size: 38px;
}

.auditEventsEmpty strong,
.auditEventsDenied h2 {
  display: block;
  margin: 0 0 7px;
  color: #fff;
}

.auditEventsEmpty p,
.auditEventsDenied p {
  margin: 0;
}

.auditEventsError {
  color: #ffaaa6;
}

@media (max-width: 1080px) {
  .auditEventsFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auditEventsFilterActions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .auditEventsPage {
    padding-inline: 10px;
  }

  .auditEventsHero {
    display: grid;
    padding: 20px;
  }

  .auditOwnerBadge {
    width: fit-content;
  }

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

  .auditEventsFilterActions {
    grid-column: auto;
  }

  .auditEventsTable,
  .auditEventsTable tbody,
  .auditEventsTable tr,
  .auditEventsTable td {
    display: block;
    width: 100%;
  }

  .auditEventsTable thead {
    display: none;
  }

  .auditEventsTable tr {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .auditEventsTable td {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border: 0;
  }

  .auditEventsTable td::before {
    content: attr(data-label);
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .auditEventsPagination {
    align-items: stretch;
    flex-direction: column;
  }
}
/* =====================================================
   OWNER DAILY REPORT
   ===================================================== */

.ownerReportDashboard {
  --report-purple: #9b5cff;
  --report-cyan: #58d7ff;
  --report-green: #59e6a7;
}

.ownerReportHero {
  background:
    radial-gradient(circle at 86% 20%, rgba(88, 215, 255, .16), transparent 34%),
    linear-gradient(135deg, rgba(28, 20, 50, .98), rgba(14, 15, 24, .98));
}

.ownerReportHeroActions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ownerReportHeroActions label {
  display: grid;
  gap: 7px;
}

.ownerReportHeroActions label span {
  color: rgba(255, 255, 255, .54);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ownerReportHeroActions input,
.ownerReportHeroActions button,
.ownerReportTelegramControls input,
.ownerReportTelegramControls button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .055);
  padding: 0 14px;
  font: inherit;
}

.ownerReportHeroActions button,
.ownerReportTelegramControls button {
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.ownerReportMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.ownerReportMetric,
.ownerReportPanel,
.ownerReportTelegram {
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 18px;
  background: rgba(12, 12, 19, .86);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.ownerReportMetric {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 150px;
  padding: 20px;
  overflow: hidden;
}

.ownerReportMetric::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -54px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(155, 92, 255, .12);
  filter: blur(5px);
}

.ownerReportMetricIcon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #d9c4ff;
  background: rgba(155, 92, 255, .14);
  font-size: 17px;
  font-weight: 900;
}

.ownerReportMetric > span,
.ownerReportMetric small {
  color: rgba(255, 255, 255, .54);
  font-size: 12px;
}

.ownerReportMetric > strong {
  color: #fff;
  font-size: clamp(22px, 2vw, 31px);
  letter-spacing: -.04em;
}

.ownerReportDelta {
  width: max-content;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px !important;
  font-weight: 800;
}

.ownerReportDelta.is-positive {
  color: #78edba;
  background: rgba(89, 230, 167, .1);
}

.ownerReportDelta.is-negative {
  color: #ff9aa8;
  background: rgba(255, 103, 126, .1);
}

.ownerReportDelta.is-neutral {
  color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .05);
}

.ownerReportMainGrid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
}

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

.ownerReportPanel {
  padding: 20px;
}

.ownerReportPanelHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.ownerReportPanelHead span,
.ownerReportTelegramCopy > span {
  color: #b887ff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .15em;
}

.ownerReportPanelHead h2,
.ownerReportTelegram h2 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 17px;
}

.ownerReportPanelHead > strong {
  color: #fff;
  font-size: 24px;
}

.ownerReportProgress {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
  margin-bottom: 17px;
}

.ownerReportProgress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--report-purple), var(--report-cyan));
}

.ownerReportRows {
  display: grid;
  gap: 0;
}

.ownerReportRows p {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
}

.ownerReportRows p:last-child {
  border-bottom: 0;
}

.ownerReportRows b {
  color: #fff;
}

.ownerReportServiceList {
  display: grid;
}

.ownerReportServiceList > div:not(.ownerReportEmpty) {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.ownerReportServiceList i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #d7bdff;
  background: rgba(155, 92, 255, .12);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.ownerReportServiceList span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ownerReportServiceList b,
.ownerReportServiceList strong {
  color: #fff;
  font-size: 12px;
}

.ownerReportServiceList small,
.ownerReportEmpty {
  color: rgba(255, 255, 255, .45);
  font-size: 10px;
}

.ownerReportChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.ownerReportChips span {
  border: 1px solid rgba(255, 190, 92, .16);
  border-radius: 999px;
  padding: 6px 8px;
  color: #ffd28e;
  background: rgba(255, 190, 92, .07);
  font-size: 9px;
}

.ownerReportAttention ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ownerReportAttention li {
  position: relative;
  border-radius: 11px;
  padding: 10px 10px 10px 28px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .035);
  font-size: 11px;
}

.ownerReportAttention li::before {
  content: "•";
  position: absolute;
  left: 12px;
  color: #ffbd68;
}

.ownerReportTelegram {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) minmax(280px, .8fr);
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(88, 215, 255, .13), transparent 37%),
    rgba(12, 12, 19, .9);
}

.ownerReportTelegramIcon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #37b8ee, #1976c9);
  font-size: 24px;
  transform: rotate(-8deg);
}

.ownerReportTelegramCopy p {
  max-width: 610px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .52);
  font-size: 11px;
  line-height: 1.55;
}

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

.ownerReportTelegramControls .is-primary {
  grid-column: 1 / -1;
  color: #fff;
  border-color: rgba(155, 92, 255, .55);
  background: linear-gradient(135deg, #8b48ee, #6431c7);
}

.ownerReportAutoToggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 8px 11px;
  color: #fff;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
}

.ownerReportAutoToggle input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #8b48ee;
}

.ownerReportAutoToggle span {
  display: grid;
  gap: 2px;
}

.ownerReportAutoToggle b {
  font-size: 11px;
}

.ownerReportAutoToggle small {
  color: rgba(255, 255, 255, .45);
  font-size: 9px;
}

.ownerReportTelegramControls button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ownerReportTelegramStatus {
  position: absolute;
  right: 22px;
  bottom: 8px;
  color: rgba(255, 255, 255, .38);
  font-size: 9px;
}

@media (max-width: 1050px) {
  .ownerReportMetricGrid,
  .ownerReportSecondaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ownerReportMainGrid,
  .ownerReportTelegram {
    grid-template-columns: 1fr;
  }

  .ownerReportTelegramIcon {
    display: none;
  }

  .ownerReportTelegramStatus {
    position: static;
  }
}

@media (max-width: 640px) {
  .ownerReportMetricGrid,
  .ownerReportSecondaryGrid {
    grid-template-columns: 1fr;
  }

  .ownerReportHeroActions,
  .ownerReportHeroActions label,
  .ownerReportHeroActions input,
  .ownerReportHeroActions button {
    width: 100%;
  }

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

  .ownerReportTelegramControls .is-primary {
    grid-column: auto;
  }
}

/* =========================================================
   REPORT + AUDIT — CLINIC THEME BRIDGE
   New owner workspaces inherit all five saved clinic themes.
   ========================================================= */

body .ownerReportDashboard {
  --report-purple: var(--finance-accent);
  --report-cyan: var(--finance-accent-2);
  --report-green: #59dca1;
  color: var(--finance-text);
}

body :is(
  .ownerReportHero,
  .ownerReportMetric,
  .ownerReportPanel,
  .ownerReportTelegram,
  .auditEventsHero,
  .auditEventsPanel
) {
  border-color: var(--finance-border);
  background:
    radial-gradient(
      circle at 100% 0,
      var(--finance-accent-soft),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
  box-shadow:
    0 20px 55px var(--finance-shadow),
    inset 0 1px 0 rgba(255, 255, 255, .045);
}

body :is(
  .ownerReportHero,
  .ownerReportTelegram,
  .auditEventsHero
) {
  border-color: var(--finance-border-strong);
  background:
    radial-gradient(
      circle at 84% 12%,
      var(--finance-accent-soft),
      transparent 36%
    ),
    radial-gradient(
      circle at 4% 100%,
      var(--finance-accent-soft),
      transparent 44%
    ),
    linear-gradient(
      140deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );
}

body :is(
  .ownerReportHeroActions input,
  .ownerReportHeroActions button,
  .ownerReportTelegramControls input,
  .ownerReportTelegramControls button,
  .auditEventsFilters input,
  .auditEventsFilters select,
  .auditEventsFilterActions button,
  .auditEventsPagination button
) {
  border-color: var(--finance-border);
  background: var(--finance-input);
  color: var(--finance-text-soft);
  color-scheme: var(--finance-color-scheme);
}

body :is(
  .ownerReportHeroActions input,
  .ownerReportTelegramControls input,
  .auditEventsFilters input,
  .auditEventsFilters select
):focus {
  border-color: var(--finance-accent);
  box-shadow: 0 0 0 3px var(--finance-accent-soft);
  outline: none;
}

body :is(
  .ownerReportHeroActions label span,
  .ownerReportMetric > span,
  .ownerReportMetric small,
  .ownerReportRows p,
  .ownerReportServiceList small,
  .ownerReportEmpty,
  .ownerReportTelegramCopy p,
  .ownerReportAutoToggle small,
  .ownerReportTelegramStatus,
  .auditEventsHero p,
  .auditEventsFilters label > span,
  .auditEventsTable th,
  .auditEventsTable td small,
  .auditEventDetails label,
  .auditEventDetails footer,
  .auditEventsPagination,
  .auditEventsLoading,
  .auditEventsEmpty,
  .auditEventsDenied
) {
  color: var(--finance-text-muted);
}

body :is(
  .ownerReportMetric > strong,
  .ownerReportPanelHead h2,
  .ownerReportPanelHead > strong,
  .ownerReportRows b,
  .ownerReportServiceList b,
  .ownerReportServiceList strong,
  .ownerReportTelegram h2,
  .ownerReportAutoToggle,
  .auditEventsHero h1,
  .auditEventsTable,
  .auditEventsTable td strong,
  .auditEventDetails p,
  .auditEventsEmpty strong,
  .auditEventsDenied h2
) {
  color: var(--finance-text);
}

body :is(
  .ownerReportPanelHead span,
  .ownerReportTelegramCopy > span,
  .auditEventsHero span,
  .auditEventDetails summary
) {
  color: var(--finance-accent-2);
}

body .ownerReportMetric::after {
  background: var(--finance-accent-soft);
}

body :is(
  .ownerReportMetricIcon,
  .ownerReportServiceList i,
  .auditOwnerBadge,
  .auditActionBadge
) {
  border-color: var(--finance-border-strong);
  background: var(--finance-accent-soft);
  color: var(--finance-accent-2);
}

body .ownerReportProgress {
  background: var(--finance-surface-soft);
}

body .ownerReportProgress i {
  background: linear-gradient(
    90deg,
    var(--finance-accent),
    var(--finance-accent-2)
  );
  box-shadow: 0 0 14px var(--finance-accent-glow);
}

body :is(
  .ownerReportRows p,
  .ownerReportServiceList > div:not(.ownerReportEmpty),
  .auditEventsFilters,
  .auditEventsTable th,
  .auditEventsTable td
) {
  border-color: var(--finance-border);
}

body .ownerReportAttention li {
  color: var(--finance-text-soft);
  background: var(--finance-surface-soft);
}

body .ownerReportTelegramIcon {
  background: linear-gradient(
    145deg,
    var(--finance-accent-2),
    color-mix(
      in srgb,
      var(--finance-accent) 72%,
      var(--finance-surface-2)
    )
  );
  box-shadow: 0 12px 30px var(--finance-accent-glow);
}

body .ownerReportAutoToggle {
  border-color: var(--finance-border);
  background: var(--finance-surface-soft);
}

body .ownerReportAutoToggle:hover {
  border-color: var(--finance-border-strong);
  background: var(--finance-surface-hover);
}

body .ownerReportAutoToggle input {
  accent-color: var(--finance-accent);
}

body :is(
  .ownerReportTelegramControls .is-primary,
  .auditEventsFilterActions button[type="submit"]
) {
  border-color: color-mix(
    in srgb,
    var(--finance-accent) 62%,
    white
  );
  background: linear-gradient(
    135deg,
    var(--finance-accent),
    color-mix(
      in srgb,
      var(--finance-accent) 72%,
      var(--finance-surface-2)
    )
  );
  box-shadow: 0 10px 28px var(--finance-accent-glow);
  color: #fff;
}

body :is(
  .ownerReportHeroActions button,
  .ownerReportTelegramControls button:not(.is-primary),
  .auditEventsPagination button
):hover:not(:disabled) {
  border-color: var(--finance-border-strong);
  background: var(--finance-surface-hover);
  color: var(--finance-accent-2);
}

body .auditEventsPanel {
  overflow: hidden;
}

body .auditEventsTable tr:hover td {
  background: var(--finance-surface-hover);
}

body .auditEventDetails > div {
  border-color: var(--finance-border-strong);
  background:
    radial-gradient(
      circle at 100% 0,
      var(--finance-accent-soft),
      transparent 42%
    ),
    var(--finance-surface-2);
  box-shadow: 0 18px 40px var(--finance-shadow);
}

body .auditEventDetails pre {
  background: var(--finance-input);
  color: var(--finance-text-soft);
  color-scheme: var(--finance-color-scheme);
}

body .auditEventsError {
  color: #ef777e;
}

body[data-theme="white"] :is(
  .ownerReportMetric,
  .ownerReportPanel,
  .ownerReportTelegram,
  .ownerReportHero,
  .auditEventsHero,
  .auditEventsPanel
) {
  box-shadow:
    0 18px 52px rgba(46, 61, 74, .1),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

body[data-theme="white"] .ownerReportTelegramIcon {
  color: #fff;
}

body[data-theme="white"] .ownerReportDelta.is-neutral {
  color: var(--finance-text-muted);
  background: var(--finance-surface-soft);
}

@media (max-width: 720px) {
  body .auditEventsTable tr {
    border-color: var(--finance-border);
    background: var(--finance-surface-soft);
  }

  body .auditEventsTable td::before {
    color: var(--finance-text-faint);
  }
}
/* =====================================================
   PUG CRM — READABILITY / ACCESSIBILITY
   Покращена читабельність на ноутбуках і малих екранах
===================================================== */

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

/* Основний текст */
p,
td,
label,
input,
select,
textarea,
button {
  font-size: max(0.88rem, 14px);
}

/* Поля вводу не повинні бути дрібними */
input,
select,
textarea {
  min-height: 42px;
  line-height: 1.35;
}

/* Підказки й другорядний текст */
.hint,
small,
[class*="hint"],
[class*="Hint"],
[class*="sub"],
[class*="Sub"],
[class*="meta"],
[class*="Meta"],
[class*="eyebrow"],
[class*="Eyebrow"] {
  font-size: max(0.78rem, 13px);
  line-height: 1.4;
}

/* Таблиці */
.data-table {
  font-size: 0.9rem;
}

.data-table th {
  font-size: max(0.78rem, 13px);
  line-height: 1.3;
}

.data-table td {
  font-size: max(0.86rem, 14px);
  line-height: 1.45;
}

/* Кнопки */
button,
.btn-primary,
.primary,
.ghost {
  font-size: max(0.86rem, 14px);
}

/* Заголовки */
h1 {
  font-size: clamp(1.65rem, 2.2vw, 2.35rem);
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.75rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.25;
}

/* Таблиця може прокручуватись, а не стискати текст */
.data-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  min-width: 920px;
}

/* Невеликі ноутбуки */
@media (max-width: 1280px) {
  html {
    font-size: 16px;
  }

  .main-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .data-table td,
  .data-table th {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Планшети та вузькі екрани */
@media (max-width: 900px) {
  html {
    font-size: 16px;
  }

  body {
    line-height: 1.55;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  .data-table {
    min-width: 850px;
  }
}
/* =====================================================
   PUG CRM — CALENDAR READABILITY FINAL FIX
   Крупный читаемый календарь без мелкого текста
===================================================== */

.page[data-page="calendar"] {
  font-size: 16px !important;
}

/* Основная карточка календаря */
.page[data-page="calendar"] .calendarCard {
  padding: 26px !important;
}

/* Заголовок календаря */
.page[data-page="calendar"] .calendarHeader h2 {
  font-size: 26px !important;
  line-height: 1.2 !important;
}

.page[data-page="calendar"] .calendarCard .hint {
  font-size: 14px !important;
  line-height: 1.45 !important;
  opacity: 0.78 !important;
}

/* Кнопки День / Неделя / Месяц */
.page[data-page="calendar"] .calendarModes button,
.page[data-page="calendar"] button.primary,
.page[data-page="calendar"] button.ghost,
.page[data-page="calendar"] .miniBtn {
  min-height: 42px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* Навигация по дате */
.page[data-page="calendar"] .calendarDate {
  min-width: 170px !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* Часы слева */
.page[data-page="calendar"] .calTimeHead {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.page[data-page="calendar"] .calTime {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Делаем колонку времени немного шире */
.page[data-page="calendar"] .calendarDayGrid {
  grid-template-columns: 82px minmax(0, 1fr) !important;
}

/* Колонки врачей больше не ужимаются */
.page[data-page="calendar"] .calDoctorsGrid {
  grid-auto-columns: minmax(285px, 1fr) !important;
}

.page[data-page="calendar"] .calDoctorCol {
  min-width: 285px !important;
}

/* Шапка врача */
.page[data-page="calendar"] .calDoctorHead {
  min-height: 92px !important;
  height: auto !important;
  padding: 14px 16px !important;
}

.page[data-page="calendar"] .calDoctorName {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

.page[data-page="calendar"] .calDoctorMeta {
  margin-top: 5px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Специализации врачей */
.page[data-page="calendar"] .calStaffSpecialization,
.page[data-page="calendar"] .specTag {
  min-height: 23px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Слоты календаря */
.page[data-page="calendar"] .calSlot {
  min-height: 92px !important;
}

.page[data-page="calendar"] .calEmptySlot {
  font-size: 14px !important;
}

/* Карточки записей */
.page[data-page="calendar"] .calEventCard {
  padding: 13px 14px !important;
}

.page[data-page="calendar"] .calEventTitle {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.page[data-page="calendar"] .calEventTime,
.page[data-page="calendar"] .calEventMeta {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Правая панель врачей */
.page[data-page="calendar"] .calStaffPanel {
  width: 290px !important;
  padding: 18px !important;
}

.page[data-page="calendar"] .calendarWorkArea {
  grid-template-columns:
    minmax(0, 1fr)
    290px !important;
}

.page[data-page="calendar"] .calStaffPanelTitle {
  font-size: 17px !important;
  line-height: 1.25 !important;
}

.page[data-page="calendar"] .calStaffPanelSub {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Перетаскиваемые карточки врачей */
.page[data-page="calendar"] .calStaffDrag {
  min-height: 66px !important;
  padding: 12px 14px !important;
  border-radius: 15px !important;
}

.page[data-page="calendar"] .calStaffDragName {
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.page[data-page="calendar"] .calStaffDragRole {
  margin-top: 3px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* Нижняя навигация */
.mac-dock {
  max-width: calc(100vw - 32px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.dock-menu .menu-item a {
  min-height: 48px !important;
  padding: 11px 16px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.dock-menu .menu-item a .dock-icon {
  font-size: 19px !important;
}

/* Экраны ноутбуков */
@media (max-width: 1366px) {
  .page[data-page="calendar"] .calendarWorkArea {
    grid-template-columns:
      minmax(0, 1fr)
      260px !important;
  }

  .page[data-page="calendar"] .calStaffPanel {
    width: 260px !important;
  }

  .page[data-page="calendar"] .calDoctorsGrid {
    grid-auto-columns: 280px !important;
  }

  .page[data-page="calendar"] .calDoctorCol {
    min-width: 280px !important;
  }

  .dock-menu .menu-item a {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* На узких экранах панель врачей уходит вниз */
@media (max-width: 1050px) {
  .page[data-page="calendar"] .calendarWorkArea {
    grid-template-columns: 1fr !important;
  }

  .page[data-page="calendar"] .calStaffPanel {
    position: static !important;
    width: 100% !important;
  }

  .page[data-page="calendar"] .calStaffDragList {
    display: grid !important;
    grid-template-columns:
      repeat(auto-fit, minmax(190px, 1fr)) !important;
  }
}
/* =====================================================
   CALENDAR — CONTRAST FIX
   Убираем слишком бледный текст
===================================================== */

.page[data-page="calendar"] .calendarHeader .hint {
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Вторичный текст в календаре */
.page[data-page="calendar"] :is(
  .calDoctorMeta,
  .calStaffPanelSub,
  .calStaffDragRole,
  .calEventTime,
  .calEventMeta,
  .calendarTimelineTimeLabel,
  .calendarTimelineTimeHead
) {
  color: rgba(255, 255, 255, 0.68) !important;
  opacity: 1 !important;
}

/* Самый важный текст */
.page[data-page="calendar"] :is(
  .calDoctorName,
  .calStaffDragName,
  .calStaffPanelTitle,
  .calendarDate,
  .calendarHeader h2
) {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Часы слева */
.page[data-page="calendar"] .calendarTimelineTimeLabel {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Подписи врачей */
.page[data-page="calendar"] .calDoctorMeta,
.page[data-page="calendar"] .calStaffDragRole {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Правая подсказка */
.page[data-page="calendar"] .calStaffPanelSub {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Белая тема */
body[data-theme="white"] .page[data-page="calendar"] .calendarHeader .hint {
  color: rgba(28, 28, 30, 0.78) !important;
  text-shadow: none !important;
}

body[data-theme="white"] .page[data-page="calendar"] :is(
  .calDoctorMeta,
  .calStaffPanelSub,
  .calStaffDragRole,
  .calEventTime,
  .calEventMeta,
  .calendarTimelineTimeLabel,
  .calendarTimelineTimeHead
) {
  color: rgba(28, 28, 30, 0.62) !important;
}
.calendarEmptyShift {
  min-height: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  box-sizing: border-box;
}

.calendarEmptyShiftIcon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 20px;
  font-size: 28px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 14px 36px rgba(80, 28, 140, 0.2);
}

.calendarEmptyShift h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.calendarEmptyShift p {
  max-width: 430px;
  margin: 12px 0 22px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.68;
}

.calendarEmptyShift .primary {
  min-height: 44px;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .calendarEmptyShift {
    min-height: 420px;
    padding: 32px 18px;
  }

  .calendarEmptyShift h3 {
    font-size: 20px;
  }

  .calendarEmptyShift p {
    font-size: 14px;
  }

  .calendarEmptyShift .primary {
    width: 100%;
    max-width: 280px;
  }
}
.monthScheduleSection,
.monthBulkBox {
  padding: 14px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.monthScheduleSection {
  margin-bottom: 12px;
}

.monthScheduleSectionHead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.monthScheduleSectionHead > div {
  min-width: 0;
}

.monthScheduleSectionHead strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

.monthScheduleSectionHead small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.58;
}

.monthScheduleStep {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(
    135deg,
    #8b5cf6,
    #c04cff
  );
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.28);
}

.monthDrawerQuick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.monthScheduleQuickButton {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.monthScheduleQuickButton:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.09);
}

.monthScheduleQuickButton > span {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.13);
}

.monthScheduleQuickButton div {
  min-width: 0;
}

.monthScheduleQuickButton strong,
.monthScheduleQuickButton small {
  display: block;
}

.monthScheduleQuickButton strong {
  font-size: 12px;
}

.monthScheduleQuickButton small {
  margin-top: 3px;
  font-size: 10px;
  opacity: 0.55;
}

.monthScheduleQuickButton.is-off > span {
  background: rgba(255, 255, 255, 0.06);
}
.weekDayHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.weekCreateVisitButton {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 10px;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  background: rgba(168, 85, 247, 0.08);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.weekCreateVisitButton:hover {
  border-color: rgba(168, 85, 247, 0.62);
  background: rgba(168, 85, 247, 0.18);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .weekCreateVisitButton {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}
/* ===== Edit patient form: prettier field panels ===== */

.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card input[type="date"],
.modal-card input[type="email"],
.modal-card input[type="tel"],
.modal-card select,
.modal-card textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(32, 18, 58, 0.96) 0%,
      rgba(20, 12, 40, 0.96) 100%
    );
  color: #f5edff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(30, 12, 60, 0.18);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card input[type="date"],
.modal-card input[type="email"],
.modal-card input[type="tel"],
.modal-card select {
  padding: 0 14px;
}

.modal-card textarea {
  min-height: 108px;
  padding: 14px;
  resize: vertical;
}

.modal-card input::placeholder,
.modal-card textarea::placeholder {
  color: rgba(235, 225, 255, 0.42);
}

.modal-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(
      180deg,
      rgba(32, 18, 58, 0.96) 0%,
      rgba(20, 12, 40, 0.96) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23CFA8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 14px center;
  background-size: auto, 14px 14px;
  cursor: pointer;
}

.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus {
  outline: none;
  border-color: rgba(196, 118, 255, 0.75);
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.14),
    0 12px 28px rgba(120, 45, 190, 0.18);
  transform: translateY(-1px);
}

.modal-card label,
.modal-card .field-label,
.modal-card .form-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(244, 236, 255, 0.94);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.modal-card small,
.modal-card .field-hint {
  color: rgba(226, 213, 255, 0.46);
}

.modal-card .field,
.modal-card .form-field {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(168, 85, 247, 0.08);
}

.modal-card .field + .field,
.modal-card .form-field + .form-field {
  margin-top: 10px;
}

/* nicer 2-column rows in the animal form */
.modal-card .grid-2,
.modal-card .two-col,
.modal-card .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* make white browser autofill less ugly */
.modal-card input:-webkit-autofill,
.modal-card textarea:-webkit-autofill,
.modal-card select:-webkit-autofill {
  -webkit-text-fill-color: #f5edff;
  -webkit-box-shadow:
    0 0 0 1000px rgba(24, 14, 45, 1) inset;
  transition: background-color 9999s ease-in-out 0s;
}

@media (max-width: 768px) {
  .modal-card .grid-2,
  .modal-card .two-col,
  .modal-card .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .modal-card input[type="text"],
  .modal-card input[type="number"],
  .modal-card input[type="date"],
  .modal-card input[type="email"],
  .modal-card input[type="tel"],
  .modal-card select {
    min-height: 50px;
  }

  .modal-card .field,
  .modal-card .form-field {
    padding: 10px;
    border-radius: 16px;
  }
}
/* ===== Edit patient form: prettier field panels ===== */

.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card input[type="date"],
.modal-card input[type="email"],
.modal-card input[type="tel"],
.modal-card select,
.modal-card textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(32, 18, 58, 0.96) 0%,
      rgba(20, 12, 40, 0.96) 100%
    );
  color: #f5edff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(30, 12, 60, 0.18);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card input[type="date"],
.modal-card input[type="email"],
.modal-card input[type="tel"],
.modal-card select {
  padding: 0 14px;
}

.modal-card textarea {
  min-height: 108px;
  padding: 14px;
  resize: vertical;
}

.modal-card input::placeholder,
.modal-card textarea::placeholder {
  color: rgba(235, 225, 255, 0.42);
}

.modal-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(
      180deg,
      rgba(32, 18, 58, 0.96) 0%,
      rgba(20, 12, 40, 0.96) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23CFA8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 14px center;
  background-size: auto, 14px 14px;
  cursor: pointer;
}

.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus {
  outline: none;
  border-color: rgba(196, 118, 255, 0.75);
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.14),
    0 12px 28px rgba(120, 45, 190, 0.18);
  transform: translateY(-1px);
}

.modal-card label,
.modal-card .field-label,
.modal-card .form-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(244, 236, 255, 0.94);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.modal-card small,
.modal-card .field-hint {
  color: rgba(226, 213, 255, 0.46);
}

.modal-card .field,
.modal-card .form-field {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(168, 85, 247, 0.08);
}

.modal-card .field + .field,
.modal-card .form-field + .form-field {
  margin-top: 10px;
}

/* nicer 2-column rows in the animal form */
.modal-card .grid-2,
.modal-card .two-col,
.modal-card .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* make white browser autofill less ugly */
.modal-card input:-webkit-autofill,
.modal-card textarea:-webkit-autofill,
.modal-card select:-webkit-autofill {
  -webkit-text-fill-color: #f5edff;
  -webkit-box-shadow:
    0 0 0 1000px rgba(24, 14, 45, 1) inset;
  transition: background-color 9999s ease-in-out 0s;
}

@media (max-width: 768px) {
  .modal-card .grid-2,
  .modal-card .two-col,
  .modal-card .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .modal-card input[type="text"],
  .modal-card input[type="number"],
  .modal-card input[type="date"],
  .modal-card input[type="email"],
  .modal-card input[type="tel"],
  .modal-card select {
    min-height: 50px;
  }

  .modal-card .field,
  .modal-card .form-field {
    padding: 10px;
    border-radius: 16px;
  }
}
/* ======================================================
   PATIENT EDIT MODAL — FORCE DARK SELECTS
====================================================== */

.modal select,
.modal-overlay select,
[role="dialog"] select {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 42px 0 14px !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  border: 1px solid rgba(168, 85, 247, 0.24) !important;
  border-radius: 14px !important;

  background-color: rgba(24, 15, 43, 0.98) !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23CFA8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;

  color: #f5edff !important;
  color-scheme: dark !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(30, 12, 60, 0.16) !important;

  cursor: pointer !important;
}

.modal select:hover,
.modal-overlay select:hover,
[role="dialog"] select:hover {
  border-color: rgba(196, 118, 255, 0.48) !important;
}

.modal select:focus,
.modal-overlay select:focus,
[role="dialog"] select:focus {
  outline: none !important;

  border-color: rgba(196, 118, 255, 0.78) !important;

  background-color: rgba(30, 18, 52, 1) !important;

  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.15),
    0 12px 28px rgba(120, 45, 190, 0.2) !important;
}

.modal select option,
.modal-overlay select option,
[role="dialog"] select option {
  background: #1b102e !important;
  color: #f5edff !important;
}
/* ======================================================
   MODAL SELECTS — THEME ADAPTIVE
====================================================== */

.modal select,
.modal-overlay select,
[role="dialog"] select {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 28%,
      rgba(255, 255, 255, 0.08)
    ) !important;

  background-color:
    color-mix(
      in srgb,
      var(--accent-color) 8%,
      rgba(12, 8, 24, 0.98)
    ) !important;

  color: var(--text-main, #ffffff) !important;
}

.modal select:hover,
.modal-overlay select:hover,
[role="dialog"] select:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 55%,
      rgba(255, 255, 255, 0.1)
    ) !important;
}

.modal select:focus,
.modal-overlay select:focus,
[role="dialog"] select:focus {
  border-color: var(--accent-color) !important;

  background-color:
    color-mix(
      in srgb,
      var(--accent-color) 12%,
      rgba(15, 9, 28, 1)
    ) !important;

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--accent-color) 16%,
        transparent
      ),
    0 12px 28px
      color-mix(
        in srgb,
        var(--accent-color) 16%,
        transparent
      ) !important;
}

.modal select option,
.modal-overlay select option,
[role="dialog"] select option {
  background:
    color-mix(
      in srgb,
      var(--accent-color) 8%,
      #100a1d
    ) !important;

  color: #ffffff !important;
}

/* Белая / iOS-тема */

body[data-theme="white"] .modal select,
body[data-theme="white"] .modal-overlay select,
body[data-theme="white"] [role="dialog"] select {
  background-color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(0, 122, 255, 0.18) !important;
  color: #1c1c1e !important;
  color-scheme: light !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 6px 18px rgba(30, 50, 90, 0.08) !important;
}

body[data-theme="white"] .modal select:hover,
body[data-theme="white"] .modal-overlay select:hover,
body[data-theme="white"] [role="dialog"] select:hover {
  border-color: rgba(0, 122, 255, 0.38) !important;
}

body[data-theme="white"] .modal select:focus,
body[data-theme="white"] .modal-overlay select:focus,
body[data-theme="white"] [role="dialog"] select:focus {
  background-color: #ffffff !important;
  border-color: #007aff !important;

  box-shadow:
    0 0 0 3px rgba(0, 122, 255, 0.12),
    0 8px 22px rgba(0, 80, 180, 0.1) !important;
}

body[data-theme="white"] .modal select option,
body[data-theme="white"] .modal-overlay select option,
body[data-theme="white"] [role="dialog"] select option {
  background: #ffffff !important;
  color: #1c1c1e !important;
}
/* ===== PATIENT VACCINATION CARD ===== */

.patientVaccinationCard {
  display: grid;
  grid-template-columns:
    44px
    minmax(120px, auto)
    minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.patientVaccinationIcon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 20px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.24);
}

.patientVaccinationMain span,
.patientVaccinationDetails span {
  display: block;
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.55)
  );
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.patientVaccinationMain strong,
.patientVaccinationDetails strong {
  display: block;
  margin-top: 4px;
  color: var(--text-main, #fff);
  font-size: 13px;
  font-weight: 900;
}

.patientVaccinationDetails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-left: 16px;
  border-left: 1px solid
    rgba(255, 255, 255, 0.08);
}

.patientVaccinationCard.is-vaccinated {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.07);
}

.patientVaccinationCard.is-vaccinated
.patientVaccinationIcon {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.28);
}

.patientVaccinationCard.is-not-vaccinated {
  border-color: rgba(239, 68, 68, 0.26);
  background: rgba(239, 68, 68, 0.065);
}

.patientVaccinationCard.is-unknown {
  opacity: 0.78;
}

body[data-theme="white"]
.patientVaccinationCard {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="white"]
.patientVaccinationMain strong,
body[data-theme="white"]
.patientVaccinationDetails strong {
  color: #1c1c1e;
}

body[data-theme="white"]
.patientVaccinationDetails {
  border-left-color: rgba(0, 0, 0, 0.08);
}

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

  .patientVaccinationDetails {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid
      rgba(255, 255, 255, 0.08);
  }
}
.patientPassportVaccination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.patientVaccinationBadge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.patientVaccinationBadge.is-vaccinated {
  color: #6ee7a8;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.patientVaccinationBadge.is-not-vaccinated {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.11);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.patientVaccinationBadge.is-unknown {
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.62)
  );
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

body[data-theme="white"]
.patientVaccinationBadge.is-vaccinated {
  color: #16803d;
}

body[data-theme="white"]
.patientVaccinationBadge.is-not-vaccinated {
  color: #c93030;
}
/* ======================================================
   OWNERS — DEDICATED HEADER SEARCH
====================================================== */

.ownersGlobalSearchWrap {
  position: relative;
  width: min(460px, 38vw);
  min-width: 320px;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.ownersGlobalSearchWrap[hidden] {
  display: none !important;
}

.ownersGlobalSearchWrap #globalSearch {
  width: 100%;
  min-height: 48px;
  padding:
    0
    48px
    0
    46px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 30%,
      rgba(255, 255, 255, 0.08)
    );

  border-radius: 16px;

  background:
    color-mix(
      in srgb,
      var(--accent-color) 9%,
      rgba(14, 9, 28, 0.96)
    );

  color:
    var(--text-main, #fff);

  font-size: 13px;
  font-weight: 600;

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.04),
    0 10px 28px
      rgba(15, 5, 35, 0.18);

  outline: none;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.ownersGlobalSearchWrap::before {
  content: "⌕";
  position: absolute;
  z-index: 2;
  left: 17px;
  top: 50%;
  transform:
    translateY(-52%);

  color:
    var(--accent-color);

  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}

.ownersGlobalSearchWrap
#globalSearch::placeholder {
  color:
    var(
      --text-muted,
      rgba(255, 255, 255, 0.42)
    );
}

.ownersGlobalSearchWrap
#globalSearch:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 50%,
      rgba(255, 255, 255, 0.08)
    );
}

.ownersGlobalSearchWrap
#globalSearch:focus {
  border-color:
    var(--accent-color);

  background:
    color-mix(
      in srgb,
      var(--accent-color) 13%,
      rgba(14, 9, 28, 1)
    );

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--accent-color) 15%,
        transparent
      ),
    0 14px 34px
      color-mix(
        in srgb,
        var(--accent-color) 15%,
        transparent
      );
}

.ownersGlobalSearchClear {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 50%;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;
  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.05);

  color:
    var(
      --text-muted,
      rgba(255, 255, 255, 0.65)
    );

  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ownersGlobalSearchClear:hover {
  color:
    var(--text-main, #fff);

  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 45%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent-color) 14%,
      transparent
    );
}

.ownersGlobalSearchClear[hidden] {
  display: none !important;
}

/* Светлая тема */

body[data-theme="white"]
.ownersGlobalSearchWrap
#globalSearch {
  background:
    rgba(255, 255, 255, 0.82);

  border-color:
    rgba(0, 0, 0, 0.09);

  color:
    #1c1c1e;

  box-shadow:
    0 8px 24px
    rgba(30, 50, 90, 0.07);
}

body[data-theme="white"]
.ownersGlobalSearchClear {
  background:
    rgba(0, 0, 0, 0.035);

  border-color:
    rgba(0, 0, 0, 0.07);

  color:
    #636366;
}

@media (max-width: 850px) {
  .ownersGlobalSearchWrap {
    width: 100%;
    min-width: 0;
  }

  .ownersGlobalSearchWrap
  #globalSearch {
    min-height: 50px;
  }
}
/* ======================================================
   CALENDAR — VISITS AND TEAM SCHEDULE SEPARATION
====================================================== */

.calendarViewSwitcher {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendarViewGroup {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.calendarViewGroupLabel {
  padding: 0 8px;
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.5)
  );
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calendarScheduleButton {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 30%,
      rgba(255, 255, 255, 0.08)
    ) !important;
}

.calendarScheduleButton:hover {
  border-color:
    var(--accent-color) !important;

  background:
    color-mix(
      in srgb,
      var(--accent-color) 12%,
      transparent
    ) !important;
}

.calendarScheduleActive {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 14px;
  border: 1px solid var(--accent-color);
  background:
    color-mix(
      in srgb,
      var(--accent-color) 18%,
      rgba(255, 255, 255, 0.03)
    );
  box-shadow:
    0 0 20px
    color-mix(
      in srgb,
      var(--accent-color) 18%,
      transparent
    );
}

.calendarScheduleActive > span {
  font-size: 20px;
}

.calendarScheduleActive strong,
.calendarScheduleActive small {
  display: block;
}

.calendarScheduleActive strong {
  color: var(--text-main, #fff);
  font-size: 13px;
}

.calendarScheduleActive small {
  margin-top: 2px;
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.55)
  );
  font-size: 10px;
}

.calendarBackToVisits {
  min-height: 46px !important;
}

body[data-theme="white"]
.calendarViewGroup {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="white"]
.calendarScheduleActive {
  background:
    color-mix(
      in srgb,
      var(--accent-color) 10%,
      #ffffff
    );
}

@media (max-width: 850px) {
  .calendarViewSwitcher {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .calendarViewGroup {
    width: 100%;
  }

  .calendarViewGroup button {
    flex: 1;
  }

  .calendarScheduleButton,
  .calendarBackToVisits,
  .calendarScheduleActive {
    width: 100%;
    justify-content: center;
  }
}
/* ======================================================
   VISIT TASKS
====================================================== */

.visitTasksSection {
  margin-top: 18px;
}

.visitTasksCounter {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--accent-color) 28%,
      rgba(255, 255, 255, 0.08)
    );
  background:
    color-mix(
      in srgb,
      var(--accent-color) 10%,
      rgba(255, 255, 255, 0.03)
    );
  color: var(--text-main, #fff);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.visitTaskCreateForm {
  display: grid;
  grid-template-columns:
    minmax(240px, 1fr)
    150px
    120px
    150px
    auto;
  gap: 10px;
  align-items: end;
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid
    rgba(255, 255, 255, 0.07);
  background:
    rgba(255, 255, 255, 0.025);
}

.visitTaskCreateForm label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.visitTaskCreateForm label > span {
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.58)
  );
  font-size: 11px;
  font-weight: 800;
}

.visitTaskCreateForm .visitControl {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 13px;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  background:
    color-mix(
      in srgb,
      var(--accent-color) 6%,
      rgba(12, 8, 24, 0.96)
    );
  color: var(--text-main, #fff);
  outline: none;
}

.visitTaskCreateForm select.visitControl {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23CFA8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
}

.visitTaskCreateForm .visitControl:focus {
  border-color:
    var(--accent-color);
  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--accent-color) 14%,
      transparent
    );
}

.visitTaskCreateForm
.visitAddLineButton {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid
    var(--accent-color);
  border-radius: 13px;
  background:
    color-mix(
      in srgb,
      var(--accent-color) 82%,
      #ffffff 0%
    );
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.visitTaskCreateForm
.visitAddLineButton:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.visitTaskCreateForm
.visitAddLineButton:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.visitTasksList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.visitTasksLoading {
  min-height: 90px;
  display: grid;
  place-items: center;
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.55)
  );
  font-size: 13px;
}

.visitTasksEmpty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  text-align: center;
  border: 1px dashed
    rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.55)
  );
  background:
    rgba(255, 255, 255, 0.018);
}

.visitTasksEmpty > div {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background:
    color-mix(
      in srgb,
      var(--accent-color) 12%,
      transparent
    );
  color: var(--accent-color);
  font-size: 20px;
}

.visitTasksEmpty strong {
  color: var(--text-main, #fff);
  font-size: 15px;
}

.visitTasksEmpty span {
  max-width: 420px;
  font-size: 12px;
  line-height: 1.5;
}

.visitTaskItem {
  position: relative;
  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr)
    34px;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 12px 13px;
  border: 1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background:
    rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.visitTaskItem:hover {
  transform: translateY(-1px);
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 38%,
      rgba(255, 255, 255, 0.08)
    );
  background:
    color-mix(
      in srgb,
      var(--accent-color) 6%,
      rgba(255, 255, 255, 0.03)
    );
}

.visitTaskItem.priority-high {
  border-left: 4px solid
    #ef4444;
}

.visitTaskItem.priority-low {
  border-left: 4px solid
    #38bdf8;
}

.visitTaskItem.is-overdue {
  border-color:
    rgba(239, 68, 68, 0.28);
  background:
    rgba(239, 68, 68, 0.055);
}

.visitTaskItem.is-completed {
  opacity: 0.62;
}

.visitTaskItem.is-completed
.visitTaskMain strong {
  text-decoration: line-through;
}

.visitTaskCheck {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 11px;
  border: 1px solid
    rgba(255, 255, 255, 0.12);
  background:
    rgba(255, 255, 255, 0.035);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.visitTaskCheck:hover {
  border-color:
    var(--accent-color);
  background:
    color-mix(
      in srgb,
      var(--accent-color) 16%,
      transparent
    );
}

.visitTaskItem.is-completed
.visitTaskCheck {
  border-color:
    rgba(34, 197, 94, 0.32);
  background:
    rgba(34, 197, 94, 0.15);
  color: #6ee7a8;
}

.visitTaskMain {
  min-width: 0;
}

.visitTaskMain > strong {
  display: block;
  color: var(--text-main, #fff);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.visitTaskMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.visitTaskMeta > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.045);
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.58)
  );
  font-size: 10px;
  font-weight: 800;
}

.visitTaskPriority {
  border: 1px solid
    rgba(255, 255, 255, 0.07);
}

.visitTaskItem.priority-high
.visitTaskPriority {
  color: #fca5a5;
  background:
    rgba(239, 68, 68, 0.1);
  border-color:
    rgba(239, 68, 68, 0.2);
}

.visitTaskItem.priority-low
.visitTaskPriority {
  color: #7dd3fc;
  background:
    rgba(56, 189, 248, 0.1);
  border-color:
    rgba(56, 189, 248, 0.2);
}

.visitTaskOverdue {
  color: #fca5a5 !important;
  background:
    rgba(239, 68, 68, 0.12) !important;
}

.visitTaskDelete {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid
    rgba(255, 255, 255, 0.08);
  background:
    rgba(255, 255, 255, 0.025);
  color: var(
    --text-muted,
    rgba(255, 255, 255, 0.55)
  );
  font-size: 18px;
  cursor: pointer;
}

.visitTaskDelete:hover {
  border-color:
    rgba(239, 68, 68, 0.3);
  background:
    rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

/* Белая тема */

body[data-theme="white"]
.visitTaskCreateForm,
body[data-theme="white"]
.visitTaskItem,
body[data-theme="white"]
.visitTasksEmpty {
  background:
    rgba(255, 255, 255, 0.68);
  border-color:
    rgba(0, 0, 0, 0.08);
}

body[data-theme="white"]
.visitTaskCreateForm
.visitControl {
  background: #fff;
  border-color:
    rgba(0, 0, 0, 0.09);
  color: #1c1c1e;
}

body[data-theme="white"]
.visitTaskMain > strong,
body[data-theme="white"]
.visitTasksEmpty strong {
  color: #1c1c1e;
}

body[data-theme="white"]
.visitTaskMeta > span {
  background:
    rgba(0, 0, 0, 0.035);
  color: #6e6e73;
}

body[data-theme="white"]
.visitTaskCheck,
body[data-theme="white"]
.visitTaskDelete {
  background:
    rgba(0, 0, 0, 0.025);
  border-color:
    rgba(0, 0, 0, 0.08);
  color: #636366;
}

/* Планшеты */

@media (max-width: 1180px) {
  .visitTaskCreateForm {
    grid-template-columns:
      minmax(220px, 1fr)
      140px
      120px;
  }

  .visitTaskCreateForm
  label:nth-of-type(4) {
    grid-column: 1 / 2;
  }

  .visitTaskCreateForm
  .visitAddLineButton {
    grid-column: 2 / 4;
  }
}

/* Телефоны */

@media (max-width: 700px) {
  .visitTaskCreateForm {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .visitTaskCreateForm
  label:nth-of-type(4),
  .visitTaskCreateForm
  .visitAddLineButton {
    grid-column: auto;
  }

  .visitTaskCreateForm
  .visitAddLineButton {
    width: 100%;
    min-height: 48px;
  }

  .visitTaskItem {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      34px;
    gap: 10px;
  }

  .visitTaskCheck {
    width: 38px;
    height: 38px;
  }

  .visitTaskMeta {
    flex-direction: column;
    align-items: flex-start;
  }

  .visitTaskMeta > span {
    width: fit-content;
  }
}
/* =====================================================
   STAFF EMERGENCY CONTACT
===================================================== */

.staffEmergencyContactBlock {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(168, 85, 247, 0.1),
      rgba(20, 10, 35, 0.35)
    );
}

.staffEmergencyContactHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.staffEmergencyContactHead strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text, #ffffff);
}

.staffEmergencyContactHead span {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted, rgba(255, 255, 255, 0.55));
}

.staffEmergencyContactBlock > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-bottom: 12px;
}

.staffEmergencyContactBlock > label:last-child {
  margin-bottom: 0;
}

.staffEmergencyContactBlock > label > span {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted, rgba(255, 255, 255, 0.6));
}

.staffEmergencyContactBlock input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(8, 4, 18, 0.7);
  color: var(--text, #ffffff);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.staffEmergencyContactBlock input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.staffEmergencyContactBlock input:focus {
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.12);
}

@media (max-width: 700px) {
  .staffEmergencyContactBlock {
    padding: 14px;
  }

  .staffEmergencyContactBlock input {
    min-height: 42px;
    font-size: 14px;
  }
}
/* =====================================================
   STAFF MODAL — WIDE PREMIUM WINDOW
===================================================== */

#staffDrawer {
  padding: 24px;
  align-items: center;
  justify-content: center;
}

#staffDrawer .modal-window {
  width: min(
    760px,
    calc(100vw - 48px)
  ) !important;

  max-width: 760px !important;
  max-height: min(
    860px,
    calc(100vh - 48px)
  ) !important;

  padding: 28px !important;
  box-sizing: border-box;

  overflow-x: hidden;
  overflow-y: auto;

  border-radius: 24px !important;
  border: 1px solid
    var(
      --module-border-strong,
      rgba(168, 85, 247, 0.45)
    ) !important;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(168, 85, 247, 0.18),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(31, 17, 51, 0.98),
      rgba(15, 8, 28, 0.98)
    ) !important;

  box-shadow:
    0 40px 120px
      rgba(0, 0, 0, 0.65),
    0 0 55px
      rgba(168, 85, 247, 0.22) !important;
}

/* Заголовок */

#staffDrawer .modal-window > h3 {
  margin: 0 0 24px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Все подписи */

#staffDrawer .modal-window label {
  min-width: 0;
}

#staffDrawer .modal-window label > span,
#staffDrawer .modal-window label > div:first-child {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

/* Поля */

#staffDrawer .modal-window input:not(
  [type="color"]
):not(
  [type="checkbox"]
),
#staffDrawer .modal-window select,
#staffDrawer .modal-window textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 12px;
}

#staffDrawer .modal-window input:not(
  [type="color"]
):not(
  [type="checkbox"]
),
#staffDrawer .modal-window select {
  min-height: 46px;
  padding: 0 13px;
}

#staffDrawer .modal-window textarea {
  min-height: 92px;
  padding: 12px 13px;
  resize: vertical;
}

/* Экстренный контакт */

#staffDrawer
  .staffEmergencyContactBlock {
  margin-top: 22px;
  padding: 20px;
  border-radius: 18px;

  border: 1px solid
    rgba(168, 85, 247, 0.38);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(168, 85, 247, 0.16),
      transparent 45%
    ),
    rgba(8, 4, 18, 0.44);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.04);
}

#staffDrawer
  .staffEmergencyContactHead {
  margin-bottom: 16px;
}

#staffDrawer
  .staffEmergencyContactHead strong {
  font-size: 15px;
}

#staffDrawer
  .staffEmergencyContactHead span {
  margin-top: 4px;
  font-size: 12px;
}

/* На широкой модалке три поля в линию */

#staffDrawer
  .staffEmergencyContactBlock {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#staffDrawer
  .staffEmergencyContactHead {
  grid-column: 1 / -1;
}

#staffDrawer
  .staffEmergencyContactBlock > label {
  margin: 0;
  gap: 7px;
}

/* Кнопки снизу */

#staffDrawer
  .modal-window
  button {
  min-height: 44px;
  border-radius: 12px;
}

#staffDrawer
  #staffSave {
  min-width: 150px;
  padding: 0 22px;
  font-weight: 800;
}

/* Аккуратный скролл */

#staffDrawer
  .modal-window::-webkit-scrollbar {
  width: 8px;
}

#staffDrawer
  .modal-window::-webkit-scrollbar-track {
  background: transparent;
}

#staffDrawer
  .modal-window::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    rgba(168, 85, 247, 0.42);
  background-clip:
    padding-box;
}

/* Планшет */

@media (
  max-width: 820px
) {
  #staffDrawer {
    padding: 16px;
  }

  #staffDrawer .modal-window {
    width:
      calc(100vw - 32px)
      !important;

    max-height:
      calc(100vh - 32px)
      !important;

    padding: 22px !important;
  }

  #staffDrawer
    .staffEmergencyContactBlock {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #staffDrawer
    .staffEmergencyContactBlock
    > label:last-child {
    grid-column: 1 / -1;
  }
}

/* Телефон */

@media (
  max-width: 560px
) {
  #staffDrawer {
    padding: 0;
    align-items: flex-end;
  }

  #staffDrawer .modal-window {
    width: 100% !important;
    max-width: none !important;
    max-height: 94vh !important;

    padding: 20px 16px
      calc(
        20px +
        env(
          safe-area-inset-bottom
        )
      )
      !important;

    border-radius:
      24px 24px 0 0
      !important;
  }

  #staffDrawer
    .staffEmergencyContactBlock {
    grid-template-columns: 1fr;
  }

  #staffDrawer
    .staffEmergencyContactBlock
    > label:last-child {
    grid-column: auto;
  }
}
/* =====================================================
   PUGCRM — COMPACT DAY CALENDAR
   More working hours visible on one screen
===================================================== */

.page[data-page="calendar"]
.calendarCard {
  padding: 18px !important;
}

.page[data-page="calendar"]
.calendarHeader {
  margin-bottom: 12px !important;
}

.page[data-page="calendar"]
.calendarTop {
  margin-bottom: 12px !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeHead,
.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  min-height: 64px !important;
  height: 64px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  padding: 8px 12px !important;
  align-content: center !important;
  overflow: hidden;
}

.page[data-page="calendar"]
.calendarDoctorAvatar {
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity strong {
  font-size: 13px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity span {
  font-size: 10px !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeLabel {
  font-size: 11px !important;
}

.page[data-page="calendar"]
.calendarTimelineEvent {
  min-height: 30px !important;
  padding:
    5px 27px 5px 9px !important;

  border-radius: 9px !important;
}

.page[data-page="calendar"]
.calendarTimelineEventTime {
  font-size: 9px !important;
  line-height: 1.1 !important;
}

.page[data-page="calendar"]
.calendarTimelineEventTitle {
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.12 !important;
}

.page[data-page="calendar"]
.calendarTimelineEventNote {
  display: none !important;
}

.page[data-page="calendar"]
.calendarTimelineStatus {
  min-height: 16px !important;
  padding: 0 5px !important;
  font-size: 8px !important;
}

.page[data-page="calendar"]
.calendarTimelineHover {
  height: 22px !important;
  transform:
    translateY(-11px) !important;

  font-size: 9px !important;
}

/* Правая панель тоже компактнее */

.page[data-page="calendar"]
.calStaffPanel {
  padding: 10px !important;
}

.page[data-page="calendar"]
.calStaffDrag {
  min-height: 48px !important;
  padding: 8px 10px !important;
}

.page[data-page="calendar"]
.calStaffDragName {
  font-size: 13px !important;
}

.page[data-page="calendar"]
.calStaffDragRole {
  font-size: 10px !important;
}
.page[data-page="calendar"]
.calendarDoctorTimelineIdentity {
  min-width: 0;
  align-self: center;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity strong,
.page[data-page="calendar"]
.calendarDoctorTimelineIdentity span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* =====================================================
   PUGCRM — CALENDAR DAY V2
   Clean full-width clinical schedule
===================================================== */

.page[data-page="calendar"]
.calendarWorkArea {
  display: block !important;
  width: 100% !important;
}

.page[data-page="calendar"]
.calendarMainArea {
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
}

.page[data-page="calendar"]
.calStaffPanel {
  display: none !important;
}

.page[data-page="calendar"]
.calendarDayGrid {
  display: grid !important;

  grid-template-columns:
    68px
    minmax(0, 1fr) !important;

  gap: 0 !important;

  width: 100% !important;
  overflow-x: auto !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 18px;
  background:
    rgba(2, 9, 18, 0.2);
}

.page[data-page="calendar"]
.calendarDoctorsTimelineGrid {
  display: grid !important;
  grid-auto-flow: column !important;

  grid-auto-columns:
    minmax(260px, 1fr) !important;

  width: 100%;
  min-width: 100%;
}

.page[data-page="calendar"]
.calendarDoctorTimelineColumn {
  min-width: 260px !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeHead,
.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  height: 58px !important;
  min-height: 58px !important;
}

/* Левая колонка ЧАС */

.page[data-page="calendar"]
.calendarTimelineTimeHead {
  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 0 !important;

  color:
    rgba(255,255,255,.38);

  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;

  background:
    rgba(0, 0, 0, 0.18);

  border-right:
    1px solid
    rgba(255,255,255,.06);
}

/* Новая шапка врача */

.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  display: grid !important;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto !important;

  grid-template-rows:
    1fr !important;

  align-items: center !important;
  align-content: center !important;

  column-gap: 10px !important;

  padding:
    8px 12px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.page[data-page="calendar"]
.calendarDoctorAvatar {
  grid-row: auto !important;

  width: 34px !important;
  height: 34px !important;

  border-radius: 10px !important;

  font-size: 12px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity {
  min-width: 0;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity strong {
  display: block;

  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity span {
  margin-top: 2px !important;

  font-size: 9px !important;
  line-height: 1.2 !important;

  color:
    rgba(255,255,255,.38);
}

/* Специализации теперь справа */

.page[data-page="calendar"]
.calendarDoctorSpecializations {
  grid-column: 3 !important;
  grid-row: 1 !important;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 4px;

  min-width: 0;
}

.page[data-page="calendar"]
.calendarDoctorSpecializations
.calStaffSpecialization {
  margin: 0 !important;
  padding:
    3px 6px !important;

  font-size: 8px !important;
  line-height: 1 !important;

  white-space: nowrap;
}

/* Временная шкала */

.page[data-page="calendar"]
.calendarTimelineTimeBody {
  background:
    rgba(0,0,0,.12);

  border-right:
    1px solid
    rgba(255,255,255,.06);
}

.page[data-page="calendar"]
.calendarTimelineTimeLabel {
  padding-right: 8px !important;

  font-size: 10px !important;
  font-weight: 650 !important;

  color:
    rgba(255,255,255,.44);
}

/* Вертикальные колонки */

.page[data-page="calendar"]
.calendarDoctorTimelineColumn {
  border-right:
    1px solid
    rgba(255,255,255,.055) !important;
}

.page[data-page="calendar"]
.calendarDoctorTimeline {
  background:
    rgba(255,255,255,.005);
}

/* События */

.page[data-page="calendar"]
.calendarTimelineEvent {
  min-height: 28px !important;

  padding:
    4px 8px !important;

  border-radius:
    7px !important;
}

.page[data-page="calendar"]
.calendarTimelineEventHead {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page[data-page="calendar"]
.calendarTimelineEventTime {
  font-size: 8px !important;
  opacity: .65;
}

.page[data-page="calendar"]
.calendarTimelineEventTitle {
  margin-top: 2px !important;

  font-size: 10px !important;
  line-height: 1.15 !important;

  font-weight: 700 !important;
}

.page[data-page="calendar"]
.calendarTimelineStatus {
  min-height: 14px !important;

  padding:
    1px 4px !important;

  font-size: 7px !important;
}

.page[data-page="calendar"]
.calendarTimelineEventNote {
  display: none !important;
}
/* =====================================================
   APPOINTMENT TEMPLATE PICKER
===================================================== */

.appointmentTemplatePicker {
  margin-top: 10px;
  margin-bottom: 16px;
}

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

.appointmentTemplatePickerHead > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.appointmentTemplatePickerHead strong {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}

.appointmentTemplatePickerHead span {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255,255,255,.42);
}

.appointmentTemplateClear {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: 10px;
  cursor: pointer;
}

.appointmentTemplateList {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(125px, 1fr)
  );
  gap: 7px;
}

.appointmentTemplateCard {
  --template-color: #7C5CFF;

  position: relative;

  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  min-height: 42px;

  padding: 8px 10px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;

  background: rgba(255,255,255,.035);
  color: #fff;

  font: inherit;
  text-align: left;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.appointmentTemplateCard::before {
  content: "";

  position: absolute;

  left: 0;
  top: 8px;
  bottom: 8px;

  width: 3px;

  border-radius: 3px;

  background:
    var(--template-color);
}

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

  background:
    rgba(255,255,255,.06);

  border-color:
    rgba(255,255,255,.16);
}

.appointmentTemplateCard.active {
  border-color:
    var(--template-color);

  background:
    color-mix(
      in srgb,
      var(--template-color) 15%,
      rgba(255,255,255,.02)
    );

  box-shadow:
    inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--template-color) 20%,
      transparent
    );
}

.appointmentTemplateIcon {
  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background:
    color-mix(
      in srgb,
      var(--template-color) 16%,
      transparent
    );

  font-size: 14px;
}

.appointmentTemplateText {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.appointmentTemplateText strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.appointmentTemplateText small {
  font-size: 9px;

  color:
    rgba(255,255,255,.42);
}

.appointmentTemplateEmpty,
.appointmentTemplateLoading {
  padding: 10px;

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);

  font-size: 10px;

  color:
    rgba(255,255,255,.4);
}
/* =====================================================
   APPOINTMENT TEMPLATE DRAWER
===================================================== */

.appointmentTemplatePicker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 12px 0 18px;
}

.appointmentTemplateSelector {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-height: 66px;
  padding: 12px 14px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 14px;

  background:
    rgba(255,255,255,.035);

  color: #fff;
  text-align: left;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

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

  background:
    rgba(255,255,255,.055);

  border-color:
    rgba(255,255,255,.18);
}

.appointmentTemplateSelectorIcon {
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    rgba(124,92,255,.15);

  font-size: 22px;
}

.appointmentTemplateSelectorMain {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.appointmentTemplateSelectorLabel {
  font-size: 12px;
  font-weight: 700;
  color:
    rgba(255,255,255,.46);

  text-transform: uppercase;
  letter-spacing: .05em;
}

#appointmentTemplateSelectorName {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 750;

  color:
    rgba(255,255,255,.95);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#appointmentTemplateSelectorMeta {
  font-size: 12px;
  line-height: 1.35;

  color:
    rgba(255,255,255,.52);
}

.appointmentTemplateSelectorArrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 8px;

  background:
    rgba(255,255,255,.05);

  font-size: 16px;
  color:
    rgba(255,255,255,.6);
}

.appointmentTemplateAddQuick {
  min-width: 150px;
  padding: 0 16px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 14px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.88);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.appointmentTemplateAddQuick:hover {
  background:
    rgba(255,255,255,.055);
}


/* DRAWER OVERLAY */

.appointmentTemplateDrawer {
  position: fixed;
  inset: 0;
  z-index: 90000 !important;

  display: none;

  align-items: stretch;
  justify-content: flex-end;
}

.appointmentTemplateDrawer.is-open {
  display: flex;
}

.appointmentTemplateDrawerBackdrop {
  position: absolute;
  inset: 0;

  border: 0;

  background:
    rgba(2,7,15,.68);

  backdrop-filter:
    blur(6px);

  cursor: pointer;
}

.appointmentTemplateDrawerPanel {
  position: relative;
  z-index: 1;

  width: min(
    460px,
    calc(100vw - 24px)
  );

  height: 100%;

  padding: 24px;

  overflow-y: auto;

  border-left:
    1px solid
    rgba(255,255,255,.10);

  background:
    linear-gradient(
      180deg,
      rgba(20,25,45,.99),
      rgba(9,14,28,.99)
    );

  box-shadow:
    -24px 0 80px
    rgba(0,0,0,.42);
}

.appointmentTemplateDrawerHeader {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    42px;

  gap: 16px;

  align-items: start;

  padding-bottom: 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}

.appointmentTemplateDrawerEyebrow {
  display: block;

  margin-bottom: 7px;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .08em;

  color:
    rgba(255,255,255,.42);
}

.appointmentTemplateDrawerHeader h3 {
  margin: 0;

  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;

  color: #fff;
}

.appointmentTemplateDrawerHeader p {
  margin: 8px 0 0;

  max-width: 330px;

  font-size: 13px;
  line-height: 1.5;

  color:
    rgba(255,255,255,.52);
}

.appointmentTemplateDrawerClose {
  width: 42px;
  height: 42px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 12px;

  background:
    rgba(255,255,255,.035);

  color: #fff;

  font-size: 22px;

  cursor: pointer;
}

.appointmentTemplateDrawerActions {
  margin: 18px 0;
}

.appointmentTemplateDrawerAdd {
  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  width: 100%;
  padding: 13px 14px;

  border:
    1px dashed
    rgba(124,92,255,.45);

  border-radius: 14px;

  background:
    rgba(124,92,255,.07);

  color: #fff;

  text-align: left;

  cursor: pointer;
}

.appointmentTemplateDrawerAdd > span:first-child {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background:
    rgba(124,92,255,.16);

  font-size: 22px;
}

.appointmentTemplateDrawerAdd > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.appointmentTemplateDrawerAdd strong {
  font-size: 15px;
  font-weight: 750;
}

.appointmentTemplateDrawerAdd small {
  font-size: 12px;

  color:
    rgba(255,255,255,.5);
}


/* TEMPLATE LIST */

.appointmentTemplateDrawerList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.appointmentTemplateCard {
  --template-color: #7C5CFF;

  position: relative;

  display: grid;
  grid-template-columns:
    48px
    minmax(0, 1fr);

  align-items: center;
  gap: 12px;

  min-height: 70px;
  padding: 12px 14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 14px;

  background:
    rgba(255,255,255,.028);

  color: #fff;

  text-align: left;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .15s ease;
}

.appointmentTemplateCard::before {
  content: "";

  position: absolute;

  left: 0;
  top: 10px;
  bottom: 10px;

  width: 4px;

  border-radius: 4px;

  background:
    var(--template-color);
}

.appointmentTemplateCard:hover {
  transform:
    translateX(-2px);

  background:
    rgba(255,255,255,.05);

  border-color:
    rgba(255,255,255,.14);
}

.appointmentTemplateCard.active {
  border-color:
    var(--template-color);

  background:
    color-mix(
      in srgb,
      var(--template-color) 14%,
      rgba(255,255,255,.02)
    );
}

.appointmentTemplateIcon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      var(--template-color) 17%,
      transparent
    );

  font-size: 22px;
}

.appointmentTemplateText {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.appointmentTemplateText strong {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 750;

  color:
    rgba(255,255,255,.95);
}

.appointmentTemplateText small {
  font-size: 12px;
  line-height: 1.35;

  color:
    rgba(255,255,255,.5);
}

.appointmentTemplateDrawerClear {
  width: 100%;

  margin-top: 18px;
  padding: 11px 14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 12px;

  background:
    transparent;

  color:
    rgba(255,255,255,.55);

  font-size: 12px;
  font-weight: 650;

  cursor: pointer;
}

.appointmentTemplateLoading,
.appointmentTemplateEmpty {
  padding: 18px;

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);

  text-align: center;

  font-size: 13px;

  color:
    rgba(255,255,255,.5);
}


/* RESPONSIVE */

@media (max-width: 760px) {
  .appointmentTemplatePicker {
    grid-template-columns: 1fr;
  }

  .appointmentTemplateAddQuick {
    min-height: 44px;
  }

  .appointmentTemplateDrawerPanel {
    width: 100%;
    padding: 18px;
  }
}
.appointmentTemplateSelector.has-template {
  border-color:
    var(--template-color);

  background:
    color-mix(
      in srgb,
      var(--template-color) 10%,
      rgba(255,255,255,.025)
    );
}

.appointmentTemplateSelector.has-template
.appointmentTemplateSelectorIcon {
  background:
    color-mix(
      in srgb,
      var(--template-color) 20%,
      transparent
    );

  box-shadow:
    0 0 0 1px
    color-mix(
      in srgb,
      var(--template-color) 25%,
      transparent
    );
}

.appointmentTemplateSelector.has-template
.appointmentTemplateSelectorArrow {
  color:
    var(--template-color);
}
/* =====================================================
   APPOINTMENT TEMPLATE EDITOR
===================================================== */

.appointmentTemplateEditorOverlay {
  position: fixed;
  inset: 0;
  z-index: 13000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.appointmentTemplateEditorBackdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(2, 7, 15, .72);

  backdrop-filter:
    blur(8px);
}

.appointmentTemplateEditorModal {
  position: relative;
  z-index: 1;

  width: min(
    620px,
    calc(100vw - 32px)
  );

  max-height: calc(100vh - 48px);

  overflow-y: auto;

  padding: 24px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(24, 30, 52, .99),
      rgba(10, 15, 30, .99)
    );

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.48);
}

.appointmentTemplateEditorClose {
  position: absolute;

  top: 16px;
  right: 16px;

  width: 42px;
  height: 42px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 12px;

  background:
    rgba(255,255,255,.035);

  color: #fff;

  font-size: 22px;
  line-height: 1;

  cursor: pointer;
}

.appointmentTemplateEditorClose:hover {
  background:
    rgba(255,255,255,.07);
}


/* HEADER */

.appointmentTemplateEditorHeader {
  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr);

  gap: 14px;

  align-items: start;

  padding-right: 52px;
  padding-bottom: 20px;

  margin-bottom: 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}

.appointmentTemplateEditorHeaderIcon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background:
    rgba(124,92,255,.16);

  color: #fff;

  font-size: 26px;
}

.appointmentTemplateEditorHeader > div:last-child > span {
  display: block;

  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .08em;

  color:
    rgba(255,255,255,.42);
}

.appointmentTemplateEditorHeader h2 {
  margin: 0;

  font-size: 23px;
  line-height: 1.2;
  font-weight: 800;

  color: #fff;
}

.appointmentTemplateEditorHeader p {
  margin:
    8px
    0
    0;

  max-width: 430px;

  font-size: 13px;
  line-height: 1.5;

  color:
    rgba(255,255,255,.52);
}


/* FORM */

.appointmentTemplateEditorForm {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.appointmentTemplateEditorGrid {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(130px, 1fr)
    100px
    110px;

  gap: 12px;
}

.appointmentTemplateEditorField {
  display: flex;
  flex-direction: column;

  gap: 7px;
}

.appointmentTemplateEditorField > span {
  font-size: 12px;
  font-weight: 700;

  color:
    rgba(255,255,255,.68);
}

.appointmentTemplateEditorField input,
.appointmentTemplateEditorField textarea {
  width: 100%;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 12px;

  background:
    rgba(255,255,255,.035);

  color: #fff;

  font: inherit;

  font-size: 14px;

  outline: none;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.appointmentTemplateEditorField input {
  min-height: 46px;

  padding:
    0
    13px;
}

.appointmentTemplateEditorField textarea {
  min-height: 96px;

  padding: 12px 13px;

  resize: vertical;

  line-height: 1.45;
}

.appointmentTemplateEditorField input::placeholder,
.appointmentTemplateEditorField textarea::placeholder {
  color:
    rgba(255,255,255,.28);
}

.appointmentTemplateEditorField input:focus,
.appointmentTemplateEditorField textarea:focus {
  border-color:
    rgba(124,92,255,.78);

  background:
    rgba(255,255,255,.05);

  box-shadow:
    0 0 0 3px
    rgba(124,92,255,.10);
}


/* DURATION */

.appointmentTemplateDurationInput {
  position: relative;
}

.appointmentTemplateDurationInput input {
  padding-right: 42px;
}

.appointmentTemplateDurationInput b {
  position: absolute;

  top: 50%;
  right: 12px;

  transform:
    translateY(-50%);

  font-size: 12px;
  font-weight: 700;

  color:
    rgba(255,255,255,.42);

  pointer-events: none;
}


/* COLOR INPUT */

#appointmentTemplateEditorColor {
  min-height: 46px;

  padding: 5px;

  cursor: pointer;
}


/* PREVIEW */

.appointmentTemplateEditorPreview {
  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr);

  align-items: center;

  gap: 12px;

  padding: 14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 14px;

  background:
    rgba(255,255,255,.025);
}

.appointmentTemplateEditorPreviewIcon {
  --template-color: #7C5CFF;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  background:
    color-mix(
      in srgb,
      var(--template-color) 18%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--template-color) 28%,
      transparent
    );

  font-size: 24px;
}

.appointmentTemplateEditorPreview > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.appointmentTemplateEditorPreview span {
  font-size: 11px;
  font-weight: 700;

  letter-spacing: .04em;

  color:
    rgba(255,255,255,.40);
}

.appointmentTemplateEditorPreview strong {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 750;

  color:
    rgba(255,255,255,.96);
}

.appointmentTemplateEditorPreview small {
  font-size: 12px;

  color:
    rgba(255,255,255,.48);
}


/* ERROR */

.appointmentTemplateEditorError {
  min-height: 18px;

  font-size: 12px;
  line-height: 1.4;

  color:
    #ff7b92;
}


/* ACTIONS */

.appointmentTemplateEditorActions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  padding-top: 4px;
}

.appointmentTemplateEditorCancel,
.appointmentTemplateEditorSave {
  min-height: 44px;

  padding:
    0
    18px;

  border-radius: 12px;

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;
}

.appointmentTemplateEditorCancel {
  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.72);
}

.appointmentTemplateEditorCancel:hover {
  background:
    rgba(255,255,255,.05);
}

.appointmentTemplateEditorSave {
  border:
    1px solid
    rgba(124,92,255,.60);

  background:
    linear-gradient(
      135deg,
      #7C5CFF,
      #9C6BFF
    );

  color: #fff;

  box-shadow:
    0 10px 28px
    rgba(124,92,255,.22);
}

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

.appointmentTemplateEditorSave:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 760px) {
  .appointmentTemplateEditorOverlay {
    padding: 10px;
  }

  .appointmentTemplateEditorModal {
    width: 100%;
    max-height:
      calc(100vh - 20px);

    padding: 18px;

    border-radius: 16px;
  }

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

  .appointmentTemplateEditorField.templateNameField {
    grid-column:
      1 / -1;
  }

  .appointmentTemplateEditorHeader h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .appointmentTemplateEditorGrid {
    grid-template-columns: 1fr;
  }

  .appointmentTemplateEditorField.templateNameField {
    grid-column: auto;
  }

  .appointmentTemplateEditorActions {
    flex-direction: column-reverse;
  }

  .appointmentTemplateEditorCancel,
  .appointmentTemplateEditorSave {
    width: 100%;
  }
}
/* =====================================================
   FIX MODAL LAYERS
===================================================== */

.appointmentTemplateDrawer {
  z-index: 90000 !important;
}

.appointmentTemplateEditorOverlay {
  z-index: 100000 !important;
}

.appointmentTemplateEditorBackdrop {
  z-index: 0;
}

.appointmentTemplateEditorModal {
  position: relative;
  z-index: 2;
}
/* =====================================================
   TEMPLATE EDITOR — SHOW VISIT MODAL UNDER IT
===================================================== */

.appointmentTemplateEditorOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.appointmentTemplateEditorBackdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(3, 7, 18, .42) !important;

  backdrop-filter:
    blur(2px) !important;

  -webkit-backdrop-filter:
    blur(2px) !important;
}

.appointmentTemplateEditorModal {
  position: relative !important;
  z-index: 2 !important;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .65) !important;
}
/* =====================================================
   VISIT MODAL — LARGE DESKTOP LAYOUT
===================================================== */

.pugVisitModal {
  width: min(
    1120px,
    calc(100vw - 48px)
  ) !important;

  max-width: 1120px !important;

  max-height:
    calc(100vh - 40px) !important;
}

.pugVisitHead {
  padding:
    20px
    22px !important;
}

.pugVisitTitle {
  font-size:
    24px !important;

  line-height:
    1.2 !important;
}

.pugVisitSub {
  margin-top:
    4px;

  font-size:
    13px !important;
}

.pugVisitBody {
  display: grid !important;

  grid-template-columns:
    minmax(340px, .92fr)
    minmax(0, 1.25fr) !important;

  gap:
    16px !important;

  padding:
    16px 18px 18px !important;

  align-items:
    start;
}


/* =====================================================
   PATIENT SECTION
===================================================== */

.pugVisitPatientBlock {
  min-height:
    330px;

  padding:
    18px !important;
}

.pugVisitPatientBlock .pugSectionTitle {
  margin-bottom:
    16px;
}

.pugSearchWrap {
  margin-bottom:
    14px;
}

.pugVisitSearch {
  min-height:
    46px !important;

  font-size:
    14px !important;
}

.pugAddPatientBtn {
  min-height:
    44px;

  font-size:
    13px !important;
}


/* =====================================================
   APPOINTMENT DETAILS
===================================================== */

.pugVisitDetailsBlock {
  padding:
    18px !important;

  min-width:
    0;
}

.pugVisitDetailsBlock > .pugSectionTitle {
  margin-bottom:
    14px;
}

.pugSectionTitle {
  gap:
    8px;

  font-size:
    15px !important;
}

.pugSectionTitle strong {
  font-size:
    15px !important;

  font-weight:
    750;
}


/* =====================================================
   TEMPLATE SELECTOR
===================================================== */

.appointmentTemplatePicker {
  grid-template-columns:
    minmax(0, 1fr)
    170px !important;

  gap:
    10px;

  margin:
    0 0 16px !important;
}

.appointmentTemplateSelector {
  min-height:
    72px !important;

  padding:
    12px 14px !important;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    30px !important;
}

.appointmentTemplateSelectorIcon {
  width:
    48px !important;

  height:
    48px !important;

  font-size:
    22px !important;
}

.appointmentTemplateSelectorLabel {
  font-size:
    11px !important;
}

#appointmentTemplateSelectorName {
  font-size:
    15px !important;
}

#appointmentTemplateSelectorMeta {
  font-size:
    12px !important;
}

.appointmentTemplateAddQuick {
  min-width:
    170px !important;

  min-height:
    72px !important;

  padding:
    0 14px !important;

  font-size:
    12px !important;
}


/* =====================================================
   DATE / TIME / DURATION / VET
===================================================== */

.pugVisitFieldsGrid {
  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;

  gap:
    14px !important;
}

.pugVisitField {
  gap:
    7px !important;
}

.pugVisitField > span {
  font-size:
    12px !important;

  font-weight:
    650;

  color:
    rgba(
      255,
      255,
      255,
      .62
    ) !important;
}

.pugVisitInput {
  min-height:
    46px !important;

  padding:
    0 13px !important;

  font-size:
    14px !important;

  border-radius:
    11px !important;
}


/* =====================================================
   REASON BLOCK
===================================================== */

.pugVisitMedicalBlock {
  grid-column:
    1 / -1;

  padding:
    18px !important;

  margin-top:
    0 !important;
}

.pugVisitMedicalGrid {
  display: grid;

  grid-template-columns:
    1fr;
}

.pugVisitTextarea {
  min-height:
    110px !important;

  padding:
    12px 14px !important;

  font-size:
    14px !important;

  line-height:
    1.5;
}


/* =====================================================
   FOOTER
===================================================== */

.pugVisitFoot {
  grid-column:
    1 / -1;

  padding:
    14px 18px !important;

  margin-top:
    0 !important;
}

.pugVisitCancel,
.pugVisitSave {
  min-height:
    44px;

  padding:
    0 18px !important;

  font-size:
    13px !important;
}


/* =====================================================
   NEW PATIENT QUICK FORM
===================================================== */

.pugQuickPatientBox {
  grid-column:
    1 / -1;

  padding:
    18px !important;
}

.pugQuickPatientGrid {
  gap:
    18px !important;
}


/* =====================================================
   MEDIUM SCREENS
===================================================== */

@media (
  max-width: 980px
) {
  .pugVisitModal {
    width:
      min(
        900px,
        calc(
          100vw - 28px
        )
      ) !important;
  }

  .pugVisitBody {
    grid-template-columns:
      minmax(
        300px,
        .9fr
      )
      minmax(
        0,
        1.1fr
      ) !important;

    gap:
      12px !important;
  }

  .appointmentTemplatePicker {
    grid-template-columns:
      1fr !important;
  }

  .appointmentTemplateAddQuick {
    min-height:
      46px !important;
  }
}


/* =====================================================
   TABLET / MOBILE
===================================================== */

@media (
  max-width: 760px
) {
  .pugVisitModal {
    width:
      calc(
        100vw - 16px
      ) !important;

    max-height:
      calc(
        100vh - 16px
      ) !important;
  }

  .pugVisitBody {
    display:
      block !important;

    padding:
      12px !important;
  }

  .pugVisitPatientBlock,
  .pugVisitDetailsBlock,
  .pugVisitMedicalBlock {
    margin-bottom:
      12px;
  }

  .pugVisitFieldsGrid {
    grid-template-columns:
      1fr !important;
  }

  .pugVisitTitle {
    font-size:
      20px !important;
  }
}
/* =====================================================
   VISIT MODAL — WIDE DESKTOP REWORK
===================================================== */

.pugVisitModal {
  width: min(
    1380px,
    calc(100vw - 40px)
  ) !important;

  max-width: 1380px !important;

  max-height:
    calc(100vh - 36px) !important;
}


/* HEADER */

.pugVisitHead {
  padding:
    18px
    24px !important;
}

.pugVisitTitle {
  font-size:
    23px !important;
}

.pugVisitSub {
  font-size:
    12px !important;
}


/* BODY — WIDE TWO COLUMN */

.pugVisitBody {
  display: grid !important;

  grid-template-columns:
    380px
    minmax(0, 1fr) !important;

  grid-template-areas:
    "patient details"
    "reason reason"
    "footer footer";

  gap:
    14px !important;

  padding:
    14px 20px 18px !important;

  align-items:
    stretch;
}


/* =====================================================
   LEFT PATIENT BLOCK
===================================================== */

.pugVisitPatientBlock {
  grid-area:
    patient;

  min-height:
    270px !important;

  height:
    auto !important;

  padding:
    18px !important;
}


/* =====================================================
   RIGHT DETAILS BLOCK
===================================================== */

.pugVisitDetailsBlock {
  grid-area:
    details;

  display: grid !important;

  grid-template-columns:
    minmax(300px, .9fr)
    minmax(0, 1.25fr) !important;

  grid-template-areas:
    "title title"
    "template fields";

  gap:
    14px 18px !important;

  align-items:
    start;

  padding:
    18px !important;
}

.pugVisitDetailsBlock > .pugSectionTitle {
  grid-area:
    title;

  margin:
    0 !important;
}


/* =====================================================
   TEMPLATE — LEFT SIDE INSIDE DETAILS
===================================================== */

.appointmentTemplatePicker {
  grid-area:
    template;

  display:
    grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    10px !important;

  margin:
    0 !important;
}

.appointmentTemplateSelector {
  min-height:
    82px !important;

  width:
    100% !important;

  padding:
    14px 16px !important;

  grid-template-columns:
    50px
    minmax(0,1fr)
    30px !important;
}

.appointmentTemplateSelectorIcon {
  width:
    50px !important;

  height:
    50px !important;

  font-size:
    23px !important;
}

#appointmentTemplateSelectorName {
  font-size:
    16px !important;
}

#appointmentTemplateSelectorMeta {
  font-size:
    12px !important;
}

.appointmentTemplateAddQuick {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    46px !important;

  font-size:
    12px !important;
}


/* =====================================================
   DATE / TIME / DURATION / VET — RIGHT SIDE
===================================================== */

.pugVisitFieldsGrid {
  grid-area:
    fields;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  gap:
    12px 14px !important;

  align-content:
    start;
}

.pugVisitField > span {
  font-size:
    12px !important;
}

.pugVisitInput {
  min-height:
    46px !important;

  font-size:
    14px !important;
}


/* =====================================================
   REASON
===================================================== */

.pugVisitMedicalBlock {
  grid-area:
    reason;

  padding:
    16px 18px !important;

  margin:
    0 !important;
}

.pugVisitTextarea {
  min-height:
    96px !important;
}


/* =====================================================
   FOOTER
===================================================== */

.pugVisitFoot {
  grid-area:
    footer;

  margin:
    0 !important;

  padding:
    12px 18px !important;
}


/* =====================================================
   KEEP IT TIGHT ON DESKTOP
===================================================== */

@media (min-width: 1100px) {
  .pugVisitBody {
    grid-template-columns:
      400px
      minmax(0,1fr) !important;
  }

  .pugVisitDetailsBlock {
    grid-template-columns:
      minmax(320px,.85fr)
      minmax(460px,1.15fr) !important;
  }
}
/* =========================================
   CALENDAR — PATIENT WAITING STATUS
   ========================================= */

.calendarCardWaiting {
  border-color: rgba(245, 183, 45, 0.55) !important;
  background:
    linear-gradient(
      135deg,
      rgba(245, 183, 45, 0.16),
      rgba(245, 183, 45, 0.06)
    ) !important;
  box-shadow:
    inset 3px 0 0 rgba(245, 183, 45, 0.95),
    0 8px 22px rgba(0, 0, 0, 0.08);
}

.calendarStatusWaiting {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 9px;
  border-radius: 999px;

  background: rgba(245, 183, 45, 0.16);
  border: 1px solid rgba(245, 183, 45, 0.38);

  color: #d99a10;
  font-weight: 700;
}

.calendarStatusWaiting::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #f5b72d;

  box-shadow:
    0 0 0 4px rgba(245, 183, 45, 0.13);
}
/* =========================================
   WAITING PATIENT TOAST
   ========================================= */

.waitingPatientToast {
  position: fixed;

  top: 24px;
  right: 24px;

  z-index: 99999;

  min-width: 320px;
  max-width: 420px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;

  border-radius: 16px;

  background:
    rgba(20, 24, 32, 0.96);

  border:
    1px solid
    rgba(245, 183, 45, 0.35);

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.28);

  backdrop-filter:
    blur(16px);

  opacity: 0;

  transform:
    translateY(-12px);

  pointer-events: none;

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.waitingPatientToast.is-visible {
  opacity: 1;

  transform:
    translateY(0);

  pointer-events: auto;
}

.waitingPatientToastIcon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    rgba(245, 183, 45, 0.15);

  font-size: 20px;
}

.waitingPatientToastContent {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;

  flex: 1;
}

.waitingPatientToastContent strong {
  font-size: 14px;
  font-weight: 800;

  color: #ffffff;
}

.waitingPatientToastContent span {
  font-size: 13px;
  line-height: 1.35;

  color:
    rgba(255, 255, 255, 0.72);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waitingPatientToastClose {
  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  border: 0;
  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.06);

  color:
    rgba(255, 255, 255, 0.7);

  cursor: pointer;

  font-size: 18px;
  line-height: 1;
}

.waitingPatientToastClose:hover {
  background:
    rgba(255, 255, 255, 0.12);

  color: #ffffff;
}
/* =========================================
   GLOBAL WAITING PATIENT ALERT
   ========================================= */

.waitingPatientAlert {
  position: fixed;

  top: 24px;
  right: 24px;

  z-index: 99999;

  min-width: 340px;
  max-width: 460px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;

  border-radius: 16px;

  background:
    rgba(20, 24, 32, 0.97);

  border:
    1px solid
    rgba(245, 183, 45, 0.42);

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.3);

  backdrop-filter:
    blur(16px);
}

.waitingPatientAlertIcon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    rgba(245, 183, 45, 0.14);

  font-size: 20px;
}

.waitingPatientAlertContent {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;

  flex: 1;
}

.waitingPatientAlertContent strong {
  font-size: 14px;
  font-weight: 800;

  color: #ffffff;
}

.waitingPatientAlertContent span {
  font-size: 13px;
  line-height: 1.35;

  color:
    rgba(255, 255, 255, 0.72);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waitingPatientAlertCount {
  min-width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 8px;

  border-radius: 999px;

  background:
    rgba(245, 183, 45, 0.14);

  border:
    1px solid
    rgba(245, 183, 45, 0.3);

  color: #f5b72d;

  font-size: 12px;
  font-weight: 800;
}
/* =========================================
   CALENDAR EDIT — ARRIVAL BUTTON
   ========================================= */

.calEditArrival {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 160px;
  height: 44px;
  padding: 0 16px;

  border: 1px solid rgba(245, 183, 45, 0.42);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(245, 183, 45, 0.22),
      rgba(245, 183, 45, 0.12)
    );

  color: #fff4cf;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;

  white-space: nowrap;
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(245, 183, 45, 0.12);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.calEditArrival::before {
  content: "";

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #f5b72d;

  box-shadow:
    0 0 0 4px rgba(245, 183, 45, 0.14);
}

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

  border-color: rgba(245, 183, 45, 0.62);

  background:
    linear-gradient(
      135deg,
      rgba(245, 183, 45, 0.28),
      rgba(245, 183, 45, 0.16)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 28px rgba(245, 183, 45, 0.16);
}

.calEditArrival:active {
  transform: translateY(0);

  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(245, 183, 45, 0.12);
}

.calEditArrival:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.calEditArrival[hidden] {
  display: none !important;
}
/* =========================================
   MONTH SHIFT — CLEAN DAY DRAWER
   ========================================= */

.monthShiftDayList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.monthShiftDayRow {
  position: relative;

  padding: 14px 14px 14px 18px;

  border: 1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.035);

  overflow: hidden;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.monthShiftDayRow.is-active {
  border-color:
    rgba(124, 92, 255, 0.28);

  background:
    rgba(124, 92, 255, 0.07);
}

.monthShiftDayRow.is-off {
  opacity: 0.62;
}

.monthShiftDayAccent {
  position: absolute;

  top: 0;
  left: 0;

  width: 4px;
  height: 100%;
}

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

.monthShiftDayPerson {
  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 0;
}

.monthShiftDayAvatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.06);

  font-size: 17px;
}

.monthShiftDayPerson > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;

  min-width: 0;
}

.monthShiftDayPerson strong {
  color: #fff;

  font-size: 13px;
  font-weight: 700;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthShiftDayPerson span {
  color:
    rgba(255, 255, 255, 0.48);

  font-size: 11px;
}

.monthShiftDayStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-width: 98px;

  padding: 8px 11px;

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.04);

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 11px;

  cursor: pointer;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.monthShiftDayStatus.active {
  border-color:
    rgba(64, 211, 140, 0.42);

  background:
    rgba(64, 211, 140, 0.11);

  color:
    #9ff0c8;
}

.monthShiftDayStatusDot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.28);
}

.monthShiftDayStatus.active
.monthShiftDayStatusDot {
  background:
    #49d795;

  box-shadow:
    0 0 0 4px
    rgba(73, 215, 149, 0.1);
}

.monthShiftDayTimes {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: end;

  gap: 8px;

  margin-top: 13px;
}

.monthShiftDayTimes label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.monthShiftDayTimes label > span {
  color:
    rgba(255, 255, 255, 0.43);

  font-size: 10px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.monthShiftDayTimes input {
  width: 100%;
  height: 38px;

  box-sizing: border-box;

  padding: 0 10px;

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius: 11px;

  background:
    rgba(0, 0, 0, 0.22);

  color: #fff;

  font-size: 12px;

  outline: none;
}

.monthShiftDayTimes input:focus {
  border-color:
    rgba(124, 92, 255, 0.55);

  box-shadow:
    0 0 0 3px
    rgba(124, 92, 255, 0.1);
}

.monthShiftDayTimesArrow {
  padding-bottom: 11px;

  color:
    rgba(255, 255, 255, 0.3);

  font-size: 14px;
}

.monthShiftDayTimes.is-disabled {
  opacity: 0.38;
}

.monthShiftDayTimes input:disabled {
  cursor: not-allowed;
}

.monthRepeatScheduleButton {
  width: 100%;

  margin-top: 16px;
  padding: 12px 14px;

  border:
    1px dashed rgba(124, 92, 255, 0.3);

  border-radius: 14px;

  background:
    rgba(124, 92, 255, 0.06);

  color:
    rgba(255, 255, 255, 0.76);

  font-size: 12px;
  font-weight: 650;

  cursor: pointer;

  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.monthRepeatScheduleButton:hover {
  border-color:
    rgba(124, 92, 255, 0.55);

  background:
    rgba(124, 92, 255, 0.11);
}

.monthDrawerActions {
  display: grid;
  grid-template-columns:
    1fr 1.35fr;

  gap: 10px;

  margin-top: 16px;
}

.monthDrawerActions button {
  min-height: 42px;

  border-radius: 12px;
}
/* =========================================
   MONTH SHIFT — COMPACT + FIXED FOOTER
   ========================================= */

.monthDrawerCard {
  display: flex;
  flex-direction: column;

  height: 100%;
  max-height: calc(100vh - 32px);

  overflow: hidden;
}

.monthDrawerHead {
  flex: 0 0 auto;

  padding-bottom: 12px;
}

.monthShiftDayList {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 4px;

  margin-top: 10px;
  margin-bottom: 10px;

  gap: 8px;
}

/* компактнее карточки врача */

.monthShiftDayRow {
  padding:
    10px
    10px
    10px
    14px;

  border-radius: 13px;
}

.monthShiftDayMain {
  gap: 8px;
}

.monthShiftDayAvatar {
  width: 30px;
  height: 30px;

  flex-basis: 30px;

  border-radius: 9px;

  font-size: 14px;
}

.monthShiftDayPerson strong {
  font-size: 12px;
}

.monthShiftDayPerson span {
  font-size: 9px;
}

.monthShiftDayStatus {
  min-width: 82px;

  padding: 6px 9px;

  font-size: 10px;
}

.monthShiftDayTimes {
  margin-top: 8px;

  gap: 6px;
}

.monthShiftDayTimes label {
  gap: 4px;
}

.monthShiftDayTimes label > span {
  font-size: 8px;
}

.monthShiftDayTimes input {
  height: 32px;

  padding: 0 8px;

  border-radius: 9px;

  font-size: 11px;
}

.monthShiftDayTimesArrow {
  padding-bottom: 8px;

  font-size: 11px;
}

/* отдельный постоянно видимый footer */

.monthDrawerFooter {
  flex: 0 0 auto;

  position: relative;

  margin:
    0
    -4px
    -4px;

  padding:
    12px
    4px
    4px;

  background:
    linear-gradient(
      180deg,
      rgba(10, 22, 34, 0),
      rgba(10, 22, 34, 0.96) 22%,
      rgba(10, 22, 34, 1)
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.07);

  z-index: 5;
}

.monthRepeatScheduleButton {
  margin-top: 0;
  margin-bottom: 9px;

  min-height: 38px;

  padding: 9px 12px;
}

.monthDrawerActions {
  display: grid;

  grid-template-columns:
    0.8fr
    1.35fr;

  gap: 8px;

  margin-top: 0;
}

.monthDrawerActions button {
  min-height: 46px;

  font-weight: 700;
}

#monthSaveShift {
  font-size: 12px;
}
/* =========================================
   MONTH DAY SUMMARY
   ========================================= */

.monthDaySummary {
  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 16px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.02)
    );

  color: #fff;
}

.monthDaySummaryHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.monthDaySummaryEyebrow {
  display: block;

  margin-bottom: 5px;

  color: rgba(255,255,255,.38);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .08em;
}

.monthDaySummaryHead h3 {
  margin: 0;

  color: #fff;

  font-size: 18px;
  font-weight: 750;
}

.monthDaySummaryClose {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;

  background: rgba(0,0,0,.22);

  color: rgba(255,255,255,.7);

  font-size: 20px;

  cursor: pointer;
}

.monthDaySummaryClose:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}


/* COUNTERS */

.monthDaySummaryStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.monthDaySummaryStat {
  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 11px 12px;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;

  background: rgba(0,0,0,.18);
}

.monthDaySummaryStat span {
  color: rgba(255,255,255,.45);

  font-size: 10px;
  font-weight: 600;
}

.monthDaySummaryStat strong {
  color: #fff;

  font-size: 20px;
  font-weight: 750;
}


/* STAFF PREVIEW */

.monthDaySummaryList {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.monthDaySummaryPerson {
  display: grid;

  grid-template-columns:
    4px
    minmax(0,1fr)
    auto;

  align-items: center;
  gap: 9px;

  min-height: 48px;

  padding: 7px 9px;

  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;

  background: rgba(255,255,255,.025);
}

.monthDaySummaryPersonColor {
  width: 4px;
  height: 28px;

  border-radius: 999px;
}

.monthDaySummaryPersonMain {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.monthDaySummaryPersonMain strong {
  overflow: hidden;

  color: #fff;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.monthDaySummaryPersonMain small {
  margin-top: 2px;

  color: rgba(255,255,255,.38);

  font-size: 9px;
}

.monthDaySummaryPerson > b {
  color: rgba(255,255,255,.78);

  font-size: 10px;
  font-weight: 650;

  white-space: nowrap;
}

.monthDaySummaryMore {
  padding: 7px;

  color: rgba(255,255,255,.45);

  font-size: 10px;
  font-weight: 600;

  text-align: center;
}


/* EMPTY */

.monthDaySummaryEmpty {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px;

  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 13px;

  background: rgba(255,255,255,.02);
}

.monthDaySummaryEmpty > span {
  font-size: 20px;
}

.monthDaySummaryEmpty div {
  display: flex;
  flex-direction: column;
}

.monthDaySummaryEmpty strong {
  color: #fff;

  font-size: 12px;
}

.monthDaySummaryEmpty small {
  margin-top: 2px;

  color: rgba(255,255,255,.4);

  font-size: 10px;
}


/* MAIN ACTION */

.monthDaySummaryManage {
  display: grid;

  grid-template-columns:
    32px
    minmax(0,1fr)
    auto;

  align-items: center;
  gap: 10px;

  width: 100%;

  padding: 12px;

  border:
    1px solid
    rgba(124,92,255,.32);

  border-radius: 14px;

  background:
    rgba(124,92,255,.09);

  color: #fff;

  text-align: left;

  cursor: pointer;

  transition:
    background .18s ease,
    border-color .18s ease;
}

.monthDaySummaryManage:hover {
  background:
    rgba(124,92,255,.15);

  border-color:
    rgba(124,92,255,.52);
}

.monthDaySummaryManage > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border-radius: 10px;

  background:
    rgba(124,92,255,.18);
}

.monthDaySummaryManage > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.monthDaySummaryManage strong {
  font-size: 11px;
  font-weight: 700;
}

.monthDaySummaryManage small {
  margin-top: 2px;

  color: rgba(255,255,255,.45);

  font-size: 9px;
}

.monthDaySummaryManage > b {
  color: rgba(255,255,255,.45);

  font-size: 17px;
}


/* OPEN DAY */

.monthDaySummaryOpenDay {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;

  background: rgba(255,255,255,.035);

  color: rgba(255,255,255,.72);

  font-size: 10px;
  font-weight: 650;

  cursor: pointer;
}

.monthDaySummaryOpenDay:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
/* =========================================
   MONTH DAY SUMMARY — READABILITY BOOST
   ========================================= */

.monthDaySummary {
  gap: 18px;
  padding: 20px;
}

.monthDaySummaryEyebrow {
  margin-bottom: 7px;

  font-size: 12px;
  letter-spacing: .07em;
}

.monthDaySummaryHead h3 {
  font-size: 22px;
}

.monthDaySummaryClose {
  width: 38px;
  height: 38px;

  font-size: 22px;
}


/* STATS */

.monthDaySummaryStats {
  gap: 10px;
}

.monthDaySummaryStat {
  padding: 14px 15px;
}

.monthDaySummaryStat span {
  font-size: 12px;
}

.monthDaySummaryStat strong {
  margin-top: 2px;

  font-size: 26px;
}


/* STAFF */

.monthDaySummaryList {
  gap: 9px;
}

.monthDaySummaryPerson {
  grid-template-columns:
    5px
    minmax(0, 1fr)
    auto;

  min-height: 62px;

  gap: 12px;

  padding: 10px 12px;

  border-radius: 14px;
}

.monthDaySummaryPersonColor {
  width: 5px;
  height: 36px;
}

.monthDaySummaryPersonMain strong {
  font-size: 14px;
}

.monthDaySummaryPersonMain small {
  margin-top: 4px;

  font-size: 11px;
}

.monthDaySummaryPerson > b {
  font-size: 12px;
}

.monthDaySummaryMore {
  padding: 9px;

  font-size: 12px;
}


/* MAIN ACTION */

.monthDaySummaryManage {
  grid-template-columns:
    40px
    minmax(0, 1fr)
    auto;

  gap: 12px;

  padding: 15px;

  border-radius: 16px;
}

.monthDaySummaryManage > span:first-child {
  width: 40px;
  height: 40px;

  border-radius: 12px;

  font-size: 17px;
}

.monthDaySummaryManage strong {
  font-size: 14px;
}

.monthDaySummaryManage small {
  margin-top: 3px;

  font-size: 11px;
}

.monthDaySummaryManage > b {
  font-size: 20px;
}


/* OPEN DAY */

.monthDaySummaryOpenDay {
  padding: 13px 14px;

  border-radius: 14px;

  font-size: 12px;
}
/* =========================================
   TEAM SCHEDULE — LARGE EDITOR
   ========================================= */

.monthScheduleEditorOpen {
  overflow: hidden;
}

.monthScheduleEditorOverlay {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 32px;

  background:
    rgba(2, 7, 14, .78);

  backdrop-filter:
    blur(12px);

  z-index: 99999;
}

.monthScheduleEditorModal {
  display: flex;
  flex-direction: column;

  width:
    min(
      1100px,
      calc(100vw - 64px)
    );

  max-height:
    min(
      820px,
      calc(100vh - 64px)
    );

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 24px;

  background:
    #0d1b29;

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.48);
}


/* HEADER */

.monthScheduleEditorHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  padding:
    24px 26px 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.monthScheduleEditorHead > div > span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(255,255,255,.42);

  font-size: 11px;
  font-weight: 750;

  letter-spacing: .09em;
}

.monthScheduleEditorHead h2 {
  margin: 0;

  color: #fff;

  font-size: 24px;
}

.monthScheduleEditorHead p {
  margin:
    7px 0 0;

  color:
    rgba(255,255,255,.5);

  font-size: 13px;
}

.monthScheduleEditorClose {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 12px;

  background:
    rgba(0,0,0,.2);

  color:
    rgba(255,255,255,.7);

  font-size: 24px;

  cursor: pointer;
}


/* TABS */

.monthScheduleEditorTabs {
  display: flex;
  gap: 8px;

  padding:
    16px 26px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.monthScheduleEditorTabs button {
  padding:
    9px 14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 10px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.55);

  font-size: 13px;

  cursor: pointer;
}

.monthScheduleEditorTabs button.active {
  border-color:
    rgba(124,92,255,.45);

  background:
    rgba(124,92,255,.14);

  color: #fff;
}


/* TABLE */

.monthScheduleEditorColumns,
.monthScheduleEditorRow {
  display: grid;

  grid-template-columns:
    minmax(260px, 1.5fr)
    160px
    150px
    150px;

  align-items: center;

  gap: 18px;
}

.monthScheduleEditorColumns {
  padding:
    12px 26px;

  color:
    rgba(255,255,255,.38);

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .05em;
}

.monthScheduleEditorRows {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  padding:
    0 18px 18px;
}

.monthScheduleEditorRow {
  min-height: 70px;

  margin-bottom: 8px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 14px;

  background:
    rgba(255,255,255,.025);

  transition:
    opacity .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.monthScheduleEditorRow.is-active {
  border-color:
    rgba(124,92,255,.22);

  background:
    rgba(124,92,255,.045);
}

.monthScheduleEditorRow.is-off {
  opacity: .58;
}


/* PERSON */

.monthScheduleEditorPerson {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 11px;
}

.monthScheduleEditorColor {
  width: 4px;
  height: 38px;

  flex: 0 0 4px;

  border-radius: 999px;
}

.monthScheduleEditorAvatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 11px;

  background:
    rgba(255,255,255,.055);
}

.monthScheduleEditorIdentity {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.monthScheduleEditorIdentity strong {
  overflow: hidden;

  color: #fff;

  font-size: 14px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.monthScheduleEditorIdentity span {
  margin-top: 3px;

  color:
    rgba(255,255,255,.4);

  font-size: 11px;
}


/* STATUS */

.monthScheduleEditorStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 38px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 999px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.55);

  cursor: pointer;
}

.monthScheduleEditorStatus > span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.3);
}

.monthScheduleEditorStatus.active {
  border-color:
    rgba(64,211,140,.4);

  background:
    rgba(64,211,140,.1);

  color:
    #a1f0ca;
}

.monthScheduleEditorStatus.active > span {
  background:
    #49d795;
}


/* TIME */

.monthScheduleEditorTime {
  display: flex;
  flex-direction: column;

  gap: 5px;
}

.monthScheduleEditorTime > span {
  display: none;
}

.monthScheduleEditorTime input {
  width: 100%;
  height: 40px;

  box-sizing: border-box;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 11px;

  background:
    rgba(0,0,0,.22);

  color: #fff;

  font-size: 13px;

  outline: none;
}

.monthScheduleEditorTime input:focus {
  border-color:
    rgba(124,92,255,.55);

  box-shadow:
    0 0 0 3px
    rgba(124,92,255,.1);
}


/* FOOTER */

.monthScheduleEditorFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  padding:
    16px 26px;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(7,16,25,.97);
}

.monthScheduleEditorFooter button {
  min-width: 150px;
  min-height: 44px;

  border-radius: 12px;
}
/* =========================================
   CALENDAR — OUTSIDE DOCTOR SHIFT
   ========================================= */

.calendarDoctorTimeline {
  position: relative;
}

.calendarShiftUnavailable {
  position: absolute;

  left: 0;
  right: 0;

  z-index: 5;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  padding: 10px;

  box-sizing: border-box;

  overflow: hidden;

  background:
    rgba(120, 130, 145, 0.18);

  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 8px,
      transparent 8px,
      transparent 16px
    );

  border-top:
    1px solid
    rgba(255,255,255,0.05);

  border-bottom:
    1px solid
    rgba(255,255,255,0.05);

  pointer-events: none;
}

.calendarShiftUnavailable span {
  color:
    rgba(255,255,255,0.28);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  user-select: none;
}

.calendarShiftUnavailableBefore {
  border-top: 0;
}

.calendarShiftUnavailableAfter {
  border-bottom: 0;
}
/* =========================================
   CALENDAR — OUTSIDE DOCTOR SHIFT
   ========================================= */

.calendarDoctorTimeline {
  position: relative;
}

.calendarShiftUnavailable {
  position: absolute;
  left: 0;
  right: 0;

  z-index: 5;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  padding: 10px;

  box-sizing: border-box;
  overflow: hidden;

  background:
    rgba(105, 115, 130, 0.18);

  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 8px,
      transparent 8px,
      transparent 16px
    );

  border-top:
    1px solid rgba(255, 255, 255, 0.05);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.05);

  pointer-events: none;
}

.calendarShiftUnavailable span {
  color:
    rgba(255, 255, 255, 0.25);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.07em;

  user-select: none;
}

.calendarShiftUnavailableBefore {
  border-top: 0;
}

.calendarShiftUnavailableAfter {
  border-bottom: 0;
}
/* =========================================
   REPEATING STAFF SCHEDULE
   ========================================= */

.monthScheduleRepeatContent {
  padding: 22px 24px 24px;
}

.monthScheduleRepeatContent[hidden] {
  display: none !important;
}

.monthScheduleRepeatIntro {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
  padding: 16px 18px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.025);
}

.monthScheduleRepeatIntro > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.monthScheduleRepeatIntro > div > span {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  background: rgba(124, 92, 255, 0.14);

  color: #a995ff;
  font-size: 20px;
}

.monthScheduleRepeatIntro strong {
  display: block;

  margin-bottom: 3px;

  font-size: 15px;
  font-weight: 750;
}

.monthScheduleRepeatIntro small {
  display: block;

  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
}

.monthScheduleRepeatGrid {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.4fr)
    minmax(130px, 1fr)
    minmax(130px, 1fr);

  gap: 18px;
}

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

.monthScheduleRepeatField > span {
  color: rgba(255, 255, 255, 0.52);

  font-size: 10px;
  font-weight: 750;

  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.monthScheduleRepeatField input,
.monthScheduleRepeatField select {
  width: 100%;
  height: 42px;

  box-sizing: border-box;

  padding: 0 12px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.035);

  color: inherit;

  font: inherit;

  outline: none;
}

.monthScheduleRepeatField input:focus,
.monthScheduleRepeatField select:focus {
  border-color: rgba(124, 92, 255, 0.75);

  box-shadow:
    0 0 0 3px
    rgba(124, 92, 255, 0.1);
}

.monthScheduleRepeatDaysField {
  grid-column: 1 / -1;
}

.monthScheduleRepeatDays {
  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  gap: 8px;
}

.monthScheduleRepeatDays button {
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.025);

  color: rgba(255, 255, 255, 0.65);

  font-weight: 700;

  cursor: pointer;

  transition:
    0.15s ease;
}

.monthScheduleRepeatDays button:hover {
  border-color:
    rgba(124, 92, 255, 0.55);

  background:
    rgba(124, 92, 255, 0.08);
}

.monthScheduleRepeatDays button.active {
  border-color:
    rgba(124, 92, 255, 0.9);

  background:
    rgba(124, 92, 255, 0.18);

  color: #ffffff;

  box-shadow:
    inset 0 0 0 1px
    rgba(124, 92, 255, 0.12);
}

.monthScheduleRepeatHint {
  margin-top: 18px;
  padding-top: 14px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);

  color:
    rgba(255, 255, 255, 0.38);

  font-size: 11px;
}
/* =========================================================
   MEDICAL CORE — ACTIVE DIAGNOSES
   ========================================================= */

.patientDiagnosesPanel {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(24, 20, 42, 0.92), rgba(12, 17, 29, 0.94));
  box-shadow: 0 18px 45px rgba(4, 7, 20, 0.24);
}

.patientDiagnosesHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.patientDiagnosesKicker,
.patientDiagnosisModalHeader span {
  display: block;
  margin-bottom: 4px;
  color: #a78bfa;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.patientDiagnosesHeader h3,
.patientDiagnosisModalHeader h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.16rem;
  line-height: 1.25;
}

.patientDiagnosesHeader p,
.patientDiagnosisModalHeader p {
  max-width: 600px;
  margin: 6px 0 0;
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.84rem;
  line-height: 1.45;
}

.patientDiagnosesHeaderActions,
.patientDiagnosisActions,
.patientDiagnosisFormActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.patientDiagnosesHeaderActions button,
.patientDiagnosisActions button,
.patientDiagnosisFormActions button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: 160ms ease;
}

.patientDiagnosesHeaderActions button:hover,
.patientDiagnosisActions button:hover,
.patientDiagnosisFormActions button:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(139, 92, 246, 0.16);
  transform: translateY(-1px);
}

.patientDiagnosesHeaderActions .is-primary,
.patientDiagnosisFormActions .is-primary {
  border-color: rgba(139, 92, 246, 0.7);
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.24);
}

.patientDiagnosisActions .is-danger {
  color: #fecaca;
}

.patientDiagnosesList,
.patientDiagnosisHistoryList {
  display: grid;
  gap: 10px;
}

.patientDiagnosisCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-left: 3px solid rgba(148, 163, 184, 0.45);
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.34);
}

.patientDiagnosisCard.severity-mild {
  border-left-color: #22c55e;
}

.patientDiagnosisCard.severity-moderate {
  border-left-color: #eab308;
}

.patientDiagnosisCard.severity-severe {
  border-left-color: #f97316;
}

.patientDiagnosisCard.severity-critical {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.15), rgba(2, 6, 23, 0.34));
}

.patientDiagnosisCard.status-entered_in_error {
  opacity: 0.64;
}

.patientDiagnosisCardMain {
  min-width: 0;
}

.patientDiagnosisCardTitleRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.patientDiagnosisCard h4 {
  margin: 0;
  color: #f8fafc;
  font-size: 0.98rem;
  line-height: 1.3;
}

.patientDiagnosisCode {
  padding: 2px 7px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.66rem;
  font-weight: 700;
}

.patientDiagnosisMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
  color: rgba(226, 232, 240, 0.58);
  font-size: 0.73rem;
}

.patientDiagnosisStatus,
.patientDiagnosisSeverity {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 800;
}

.patientDiagnosisStatus.status-active {
  background: rgba(34, 197, 94, 0.13);
  color: #86efac;
}

.patientDiagnosisStatus.status-remission {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}

.patientDiagnosisStatus.status-resolved {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}

.patientDiagnosisStatus.status-entered_in_error {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.patientDiagnosisSeverity.severity-critical,
.patientDiagnosisSeverity.severity-severe {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.patientDiagnosisSeverity.severity-moderate {
  background: rgba(234, 179, 8, 0.11);
  color: #fde047;
}

.patientDiagnosisSeverity.severity-mild {
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
}

.patientDiagnosisNote {
  display: -webkit-box;
  overflow: hidden;
  margin: 9px 0 0;
  color: rgba(226, 232, 240, 0.75);
  font-size: 0.8rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.patientDiagnosisActions {
  justify-content: flex-end;
  flex: 0 0 auto;
  max-width: 410px;
}

.patientDiagnosisActions button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.7rem;
}

.patientDiagnosesEmpty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.32);
  color: rgba(226, 232, 240, 0.68);
}

.patientDiagnosesEmpty > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-weight: 900;
}

.patientDiagnosesEmpty strong {
  display: block;
  color: #e2e8f0;
  font-size: 0.85rem;
}

.patientDiagnosesEmpty p {
  margin: 3px 0 0;
  font-size: 0.73rem;
  line-height: 1.4;
}

.patientDiagnosesEmpty.is-error > span {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.patientDiagnosesEmpty > button {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.patientDiagnosisModalOverlay {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.patientDiagnosisModal {
  overflow: auto;
  width: min(720px, 100%);
  max-height: min(860px, calc(100vh - 36px));
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.13), transparent 36%),
    #101522;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.patientDiagnosisModalHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}

.patientDiagnosisModalHeader > button {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 1.35rem;
  cursor: pointer;
}

.patientDiagnosisForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 22px 22px;
}

.patientDiagnosisForm label {
  display: grid;
  gap: 7px;
}

.patientDiagnosisForm label.is-wide,
.patientDiagnosisFormError,
.patientDiagnosisFormActions {
  grid-column: 1 / -1;
}

.patientDiagnosisForm label > span {
  color: rgba(226, 232, 240, 0.7);
  font-size: 0.73rem;
  font-weight: 700;
}

.patientDiagnosisForm input,
.patientDiagnosisForm select,
.patientDiagnosisForm textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 11px;
  outline: none;
  background: rgba(2, 6, 23, 0.42);
  color: #f8fafc;
  font: inherit;
  font-size: 0.84rem;
}

.patientDiagnosisForm textarea {
  min-height: 98px;
  resize: vertical;
}

.patientDiagnosisForm input:focus,
.patientDiagnosisForm select:focus,
.patientDiagnosisForm textarea:focus {
  border-color: rgba(139, 92, 246, 0.75);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.patientDiagnosisFormError {
  min-height: 18px;
  color: #fca5a5;
  font-size: 0.78rem;
}

.patientDiagnosisFormActions {
  justify-content: flex-end;
  padding-top: 4px;
}

.patientDiagnosisFormActions button:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.patientDiagnosisTimeline,
.patientDiagnosisHistoryList {
  padding: 18px 22px 22px;
}

.patientDiagnosisTimelineItem {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  padding-bottom: 18px;
}

.patientDiagnosisTimelineItem::before {
  position: absolute;
  top: 13px;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: rgba(148, 163, 184, 0.2);
  content: "";
}

.patientDiagnosisTimelineItem:last-child::before {
  display: none;
}

.patientDiagnosisTimelineItem > span {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border: 2px solid #a78bfa;
  border-radius: 50%;
  background: #101522;
}

.patientDiagnosisTimelineItem strong,
.patientDiagnosisTimelineItem time {
  display: block;
}

.patientDiagnosisTimelineItem strong {
  color: #f1f5f9;
  font-size: 0.84rem;
}

.patientDiagnosisTimelineItem time {
  margin-top: 3px;
  color: rgba(226, 232, 240, 0.5);
  font-size: 0.7rem;
}

.patientDiagnosisTimelineItem p {
  margin: 7px 0 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
}

.patientDiagnosisModalLoading {
  padding: 24px;
  color: rgba(226, 232, 240, 0.58);
  text-align: center;
}

body[data-theme="white"] .patientDiagnosesPanel,
body[data-theme="white"] .patientDiagnosisModal {
  border-color: #cbddec;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 139, 177, 0.12), transparent 42%),
    #f8fbfd;
  box-shadow: 0 18px 42px rgba(31, 73, 102, 0.1);
}

body[data-theme="white"] .patientDiagnosesHeader h3,
body[data-theme="white"] .patientDiagnosisModalHeader h3,
body[data-theme="white"] .patientDiagnosisCard h4,
body[data-theme="white"] .patientDiagnosesEmpty strong {
  color: #17374e;
}

body[data-theme="white"] .patientDiagnosesHeader p,
body[data-theme="white"] .patientDiagnosisModalHeader p,
body[data-theme="white"] .patientDiagnosisMeta,
body[data-theme="white"] .patientDiagnosisNote {
  color: #607788;
}

body[data-theme="white"] .patientDiagnosisCard,
body[data-theme="white"] .patientDiagnosesEmpty,
body[data-theme="white"] .patientDiagnosisForm input,
body[data-theme="white"] .patientDiagnosisForm select,
body[data-theme="white"] .patientDiagnosisForm textarea {
  border-color: #d7e4ed;
  background: rgba(255, 255, 255, 0.82);
  color: #17374e;
}

body[data-theme="white"] .patientDiagnosesHeaderActions button,
body[data-theme="white"] .patientDiagnosisActions button,
body[data-theme="white"] .patientDiagnosisFormActions button,
body[data-theme="white"] .patientDiagnosisModalHeader > button {
  border-color: #cadce8;
  background: #edf5fa;
  color: #315a76;
}

body[data-theme="white"] .patientDiagnosesHeaderActions .is-primary,
body[data-theme="white"] .patientDiagnosisFormActions .is-primary {
  border-color: #467fa7;
  background: linear-gradient(135deg, #376f98, #568bb1);
  color: #fff;
}

@media (max-width: 900px) {
  .patientDiagnosisCard {
    align-items: flex-start;
    flex-direction: column;
  }

  .patientDiagnosisActions {
    justify-content: flex-start;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .patientDiagnosesPanel {
    margin-inline: -2px;
    padding: 16px;
    border-radius: 16px;
  }

  .patientDiagnosesHeader {
    flex-direction: column;
  }

  .patientDiagnosesHeaderActions {
    width: 100%;
  }

  .patientDiagnosesHeaderActions button {
    flex: 1 1 0;
  }

  .patientDiagnosisCard {
    padding: 13px;
  }

  .patientDiagnosisActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patientDiagnosisActions button {
    width: 100%;
  }

  .patientDiagnosisModalOverlay {
    align-items: end;
    padding: 0;
  }

  .patientDiagnosisModal {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 20px 20px 0 0;
  }

  .patientDiagnosisModalHeader {
    padding: 18px 16px 14px;
  }

  .patientDiagnosisForm {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .patientDiagnosisForm label,
  .patientDiagnosisForm label.is-wide,
  .patientDiagnosisFormError,
  .patientDiagnosisFormActions {
    grid-column: 1;
  }

  .patientDiagnosisTimeline,
  .patientDiagnosisHistoryList {
    padding: 16px;
  }
}
.appPromptModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 8, 18, 0.66);
  backdrop-filter: blur(10px);
}

.appPromptModal[hidden] {
  display: none !important;
}

.appPromptModalCard {
  position: relative;
  width: min(100%, 460px);
  border-radius: 24px;
  padding: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03)
    ),
    var(--app-modal-surface, #131b2b);
  border: 1px solid var(--app-modal-border, rgba(147, 70, 232, 0.38));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: var(--app-modal-text, #f5f7ff);
}

.appPromptModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--app-modal-border, rgba(147, 70, 232, 0.38));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--app-modal-text, #f5f7ff);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.appPromptModalClose:hover {
  background: rgba(255, 255, 255, 0.08);
}

.appPromptModalBadge {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  font-size: 26px;
  font-weight: 800;
  background: var(--app-modal-accent-soft, rgba(147, 70, 232, 0.14));
  color: var(--app-modal-accent, #9346e8);
  border: 1px solid var(--app-modal-border, rgba(147, 70, 232, 0.38));
  box-shadow: 0 0 30px var(--app-modal-accent-glow, rgba(147, 70, 232, 0.18));
}

.appPromptModalTitle {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 8px;
}

.appPromptModalText {
  font-size: 15px;
  line-height: 1.55;
  color: var(--app-modal-muted, rgba(235, 240, 255, 0.72));
  margin-bottom: 18px;
}

.appPromptModalLabel {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--app-modal-muted, rgba(235, 240, 255, 0.72));
}

.appPromptModalInput {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--app-modal-border, rgba(147, 70, 232, 0.38));
  background: rgba(7, 12, 24, 0.72);
  color: var(--app-modal-text, #f5f7ff);
  padding: 0 16px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.appPromptModalInput:focus {
  border-color: var(--app-modal-accent, #9346e8);
  box-shadow: 0 0 0 4px var(--app-modal-accent-soft, rgba(147, 70, 232, 0.14));
}

.appPromptModalError {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.24);
  color: #ffb1b1;
}

.appPromptModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.appPromptModalBtn {
  min-width: 128px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

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

.appPromptModalBtnSecondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-modal-text, #f5f7ff);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.appPromptModalBtnPrimary {
  background: linear-gradient(
    135deg,
    var(--app-modal-accent, #9346e8),
    var(--app-modal-accent-2, #7c5cff)
  );
  color: #fff;
  box-shadow: 0 14px 34px var(--app-modal-accent-glow, rgba(147, 70, 232, 0.22));
}

.appPromptModalBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---------- ТЕМЫ ---------- */

body[data-theme="purple"] {
  --app-modal-surface: #151b2d;
  --app-modal-border: rgba(147, 70, 232, 0.34);
  --app-modal-text: #f4f1ff;
  --app-modal-muted: rgba(238, 232, 255, 0.72);
  --app-modal-accent: #a259ff;
  --app-modal-accent-2: #7b5cff;
  --app-modal-accent-soft: rgba(162, 89, 255, 0.14);
  --app-modal-accent-glow: rgba(162, 89, 255, 0.24);
}

body[data-theme="blue"] {
  --app-modal-surface: #121c2c;
  --app-modal-border: rgba(99, 171, 255, 0.34);
  --app-modal-text: #eef6ff;
  --app-modal-muted: rgba(214, 230, 255, 0.72);
  --app-modal-accent: #63abff;
  --app-modal-accent-2: #3a86ff;
  --app-modal-accent-soft: rgba(99, 171, 255, 0.14);
  --app-modal-accent-glow: rgba(99, 171, 255, 0.24);
}

body[data-theme="green"] {
  --app-modal-surface: #13251d;
  --app-modal-border: rgba(69, 214, 140, 0.34);
  --app-modal-text: #effff6;
  --app-modal-muted: rgba(214, 245, 227, 0.72);
  --app-modal-accent: #45d68c;
  --app-modal-accent-2: #24b66a;
  --app-modal-accent-soft: rgba(69, 214, 140, 0.14);
  --app-modal-accent-glow: rgba(69, 214, 140, 0.22);
}

body[data-theme="black"] {
  --app-modal-surface: #111317;
  --app-modal-border: rgba(255, 255, 255, 0.12);
  --app-modal-text: #ffffff;
  --app-modal-muted: rgba(255, 255, 255, 0.68);
  --app-modal-accent: #d8dde8;
  --app-modal-accent-2: #9ca8bc;
  --app-modal-accent-soft: rgba(216, 221, 232, 0.12);
  --app-modal-accent-glow: rgba(216, 221, 232, 0.16);
}

body[data-theme="white"] {
  --app-modal-surface: #f7fbff;
  --app-modal-border: rgba(48, 84, 125, 0.16);
  --app-modal-text: #182435;
  --app-modal-muted: rgba(24, 36, 53, 0.66);
  --app-modal-accent: #4a7dff;
  --app-modal-accent-2: #6f5cff;
  --app-modal-accent-soft: rgba(74, 125, 255, 0.12);
  --app-modal-accent-glow: rgba(74, 125, 255, 0.16);
}

body[data-theme="white"] .appPromptModalInput {
  background: rgba(255, 255, 255, 0.88);
  color: #182435;
}

body[data-theme="white"] .appPromptModalBtnSecondary {
  background: rgba(24, 36, 53, 0.06);
  color: #182435;
}
/* =====================================================
   APP PROMPT MODAL — HARD FIX
   ===================================================== */

#appPromptModal.appPromptModal {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  z-index: 2147483647 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;

  box-sizing: border-box !important;

  background: rgba(
    3,
    8,
    18,
    0.66
  ) !important;

  backdrop-filter:
    blur(10px);

  pointer-events: auto !important;
}

#appPromptModal.appPromptModal[hidden] {
  display: none !important;
}

#appPromptModal
.appPromptModalCard {
  position: relative !important;

  display: block !important;

  width: 460px !important;
  max-width: calc(
    100vw - 48px
  ) !important;

  min-width: 0 !important;
  min-height: 280px !important;

  flex: 0 0 auto !important;

  box-sizing: border-box !important;

  padding: 26px !important;

  border-radius: 24px !important;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.08
      ),
      rgba(
        255,
        255,
        255,
        0.03
      )
    ),
    var(
      --app-modal-surface,
      #131b2b
    ) !important;

  border:
    1px solid
    var(
      --app-modal-border,
      rgba(
        147,
        70,
        232,
        0.38
      )
    ) !important;

  color:
    var(
      --app-modal-text,
      #f5f7ff
    ) !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  box-shadow:
    0 30px 80px
      rgba(
        0,
        0,
        0,
        0.45
      ),
    0 0 0 1px
      rgba(
        255,
        255,
        255,
        0.04
      )
      inset !important;
}
/* =========================================================
   PATIENT DIAGNOSES — THEME ADAPTIVE OVERRIDE
   ========================================================= */

.patientDiagnosesPanel,
.patientDiagnosisModal {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 28%,
      rgba(255, 255, 255, 0.08)
    );

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--accent-color) 14%,
        transparent
      ),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(15, 22, 40, 0.94),
      rgba(8, 13, 26, 0.96)
    );

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.24),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--accent-color) 5%,
        transparent
      )
      inset;
}

.patientDiagnosesHeader h3,
.patientDiagnosisModalHeader h3 {
  color: var(--text-main);
}

.patientDiagnosesHeader p,
.patientDiagnosisModalHeader p,
.patientDiagnosisMeta,
.patientDiagnosisNote,
.patientDiagnosisModalLoading {
  color: var(--text-muted);
}

.patientDiagnosisCard {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.02)
    );

  border-color:
    rgba(255, 255, 255, 0.075);
}

.patientDiagnosisCard:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 38%,
      rgba(255, 255, 255, 0.08)
    );
}

.patientDiagnosisCard h4 {
  color: var(--text-main);
}

/* Акцентная полоска слева у активной карточки */

.patientDiagnosisCard.status-active {
  border-left:
    3px solid
    var(--accent-color);
}

/* Обычные кнопки */

.patientDiagnosesHeaderActions button,
.patientDiagnosisActions button,
.patientDiagnosisFormActions button,
.patientDiagnosisModalHeader > button {
  border-color:
    rgba(255, 255, 255, 0.1);

  background:
    rgba(255, 255, 255, 0.045);

  color:
    var(--text-main);
}

.patientDiagnosesHeaderActions button:hover,
.patientDiagnosisActions button:hover,
.patientDiagnosisFormActions button:hover,
.patientDiagnosisModalHeader > button:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 50%,
      rgba(255, 255, 255, 0.1)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-color) 12%,
      rgba(255, 255, 255, 0.035)
    );

  color:
    var(--text-main);

  box-shadow:
    0 0 16px
      color-mix(
        in srgb,
        var(--accent-color) 13%,
        transparent
      );
}

/* Главная кнопка */

.patientDiagnosesHeaderActions .is-primary,
.patientDiagnosisFormActions .is-primary {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 65%,
      transparent
    );

  background:
    linear-gradient(
      135deg,
      var(--accent-color),
      color-mix(
        in srgb,
        var(--accent-color) 72%,
        #000
      )
    );

  color: #fff;

  box-shadow:
    0 8px 22px
      color-mix(
        in srgb,
        var(--accent-color) 25%,
        transparent
      );
}

/* Код диагноза */

.patientDiagnosisCode {
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 22%,
      rgba(255, 255, 255, 0.08)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-color) 8%,
      rgba(255, 255, 255, 0.03)
    );

  color:
    color-mix(
      in srgb,
      var(--accent-color) 65%,
      #ffffff
    );
}

/* Timeline истории */

.patientDiagnosisTimelineItem > span {
  border-color:
    var(--accent-color);

  background:
    color-mix(
      in srgb,
      var(--accent-color) 10%,
      #101522
    );

  box-shadow:
    0 0 10px
      color-mix(
        in srgb,
        var(--accent-color) 30%,
        transparent
      );
}

.patientDiagnosisTimelineItem::before {
  background:
    color-mix(
      in srgb,
      var(--accent-color) 22%,
      rgba(148, 163, 184, 0.16)
    );
}

/* Инпуты */

.patientDiagnosisForm input,
.patientDiagnosisForm select,
.patientDiagnosisForm textarea {
  background:
    rgba(5, 10, 20, 0.42);

  border-color:
    rgba(255, 255, 255, 0.09);

  color:
    var(--text-main);
}

.patientDiagnosisForm input:focus,
.patientDiagnosisForm select:focus,
.patientDiagnosisForm textarea:focus {
  outline: none;

  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 65%,
      white
    );

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--accent-color) 13%,
        transparent
      );
}

/* =========================================================
   WHITE THEME
   ========================================================= */

body[data-theme="white"] .patientDiagnosesPanel,
body[data-theme="white"] .patientDiagnosisModal {
  border-color:
    rgba(0, 122, 255, 0.16);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 122, 255, 0.08),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.62);

  backdrop-filter:
    blur(26px)
    saturate(180%);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(180%);

  box-shadow:
    0 12px 38px
      rgba(40, 60, 90, 0.09),
    inset 0 1px 0
      rgba(255, 255, 255, 0.9);
}

body[data-theme="white"] .patientDiagnosisCard {
  background:
    rgba(255, 255, 255, 0.68);

  border-color:
    rgba(0, 0, 0, 0.065);
}

body[data-theme="white"] .patientDiagnosesHeader h3,
body[data-theme="white"] .patientDiagnosisModalHeader h3,
body[data-theme="white"] .patientDiagnosisCard h4 {
  color:
    #1c1c1e;
}

body[data-theme="white"] .patientDiagnosesHeader p,
body[data-theme="white"] .patientDiagnosisModalHeader p,
body[data-theme="white"] .patientDiagnosisMeta,
body[data-theme="white"] .patientDiagnosisNote,
body[data-theme="white"] .patientDiagnosisModalLoading {
  color:
    #6e6e73;
}

body[data-theme="white"] .patientDiagnosesHeaderActions button,
body[data-theme="white"] .patientDiagnosisActions button,
body[data-theme="white"] .patientDiagnosisFormActions button,
body[data-theme="white"] .patientDiagnosisModalHeader > button {
  background:
    rgba(255, 255, 255, 0.72);

  border-color:
    rgba(0, 0, 0, 0.08);

  color:
    #3c3c43;
}

body[data-theme="white"] .patientDiagnosesHeaderActions .is-primary,
body[data-theme="white"] .patientDiagnosisFormActions .is-primary {
  background:
    #007aff;

  border-color:
    #007aff;

  color:
    #fff;

  box-shadow:
    0 6px 18px
      rgba(0, 122, 255, 0.22);
}

body[data-theme="white"] .patientDiagnosisForm input,
body[data-theme="white"] .patientDiagnosisForm select,
body[data-theme="white"] .patientDiagnosisForm textarea {
  background:
    rgba(255, 255, 255, 0.76);

  border-color:
    rgba(0, 0, 0, 0.09);

  color:
    #1c1c1e;
}
/* =========================================================
   PATIENT WEIGHT — FINAL BALANCED CARD
   ========================================================= */

.patientWeightPanel {
  margin-top: 14px;
  padding: 15px 16px;

  border-radius: 20px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 32%,
      rgba(255, 255, 255, 0.08)
    );

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--accent-color) 12%,
        transparent
      ),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(19, 18, 38, 0.82),
      rgba(10, 12, 27, 0.88)
    );

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.patientWeightHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;
  margin-bottom: 12px;
}

.patientWeightHeader h3 {
  margin: 0;

  font-size: 17px;
  line-height: 1.2;
  font-weight: 850;

  color: var(--text-main);
}

.patientWeightHeader p {
  margin: 4px 0 0;

  font-size: 11px;
  line-height: 1.35;

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

.patientWeightAdd {
  min-height: 34px;
  padding: 0 12px;

  border-radius: 11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 48%,
      rgba(255, 255, 255, 0.08)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-color) 13%,
      rgba(255, 255, 255, 0.03)
    );

  color: var(--text-main);

  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}

.patientWeightAdd:hover {
  background:
    color-mix(
      in srgb,
      var(--accent-color) 20%,
      rgba(255, 255, 255, 0.04)
    );
}

.patientWeightBody {
  display: grid;

  grid-template-columns:
    minmax(190px, 0.62fr)
    minmax(0, 1.38fr);

  gap: 10px;
}

.patientWeightCurrent {
  min-height: 92px;
  padding: 13px 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-radius: 15px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 20%,
      rgba(255, 255, 255, 0.07)
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--accent-color) 9%,
        rgba(255, 255, 255, 0.035)
      ),
      rgba(255, 255, 255, 0.018)
    );
}

.patientWeightCurrent > span {
  font-size: 10px;
  font-weight: 800;

  color: var(--text-muted);

  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.patientWeightCurrent > strong {
  margin-top: 5px;

  font-size: 26px;
  line-height: 1;

  font-weight: 900;

  color: var(--text-main);
}

.patientWeightCurrent small {
  margin-top: 7px;

  font-size: 10px;
  line-height: 1.3;

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

.patientWeightHistory {
  display: flex;
  flex-direction: column;

  min-height: 92px;
  gap: 6px;
}

.patientWeightRow {
  min-height: 38px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.065);

  background:
    rgba(255, 255, 255, 0.025);
}

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

.patientWeightRow strong {
  font-size: 12px;
  color: var(--text-main);
}

.patientWeightEmpty {
  min-height: 92px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  border:
    1px dashed
    color-mix(
      in srgb,
      var(--accent-color) 20%,
      rgba(255, 255, 255, 0.08)
    );

  background:
    rgba(255, 255, 255, 0.018);

  color: var(--text-muted);

  font-size: 11px;
}

/* WHITE */

body[data-theme="white"] .patientWeightPanel {
  border-color:
    rgba(0, 122, 255, 0.16);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 122, 255, 0.07),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.62);

  box-shadow:
    0 12px 34px rgba(40, 60, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="white"] .patientWeightCurrent,
body[data-theme="white"] .patientWeightRow {
  background:
    rgba(255, 255, 255, 0.66);

  border-color:
    rgba(0, 0, 0, 0.065);
}

body[data-theme="white"] .patientWeightEmpty {
  background:
    rgba(255, 255, 255, 0.4);

  border-color:
    rgba(0, 0, 0, 0.08);
}
/* =========================================================
   PATIENT STATUS BADGE
   ========================================================= */

.patientStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  width: fit-content;

  margin-top: 10px;
  padding: 6px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  border: 1px solid transparent;
}

.patientStatusBadge.is-active {
  color: #58d68d;

  background:
    rgba(46, 204, 113, 0.10);

  border-color:
    rgba(46, 204, 113, 0.22);
}

.patientStatusBadge.is-deceased {
  color: #ff7b7b;

  background:
    rgba(255, 90, 90, 0.10);

  border-color:
    rgba(255, 90, 90, 0.22);
}

.patientStatusBadge.is-archived {
  color: var(--text-muted);

  background:
    rgba(255, 255, 255, 0.04);

  border-color:
    rgba(255, 255, 255, 0.08);
}

body[data-theme="white"]
.patientStatusBadge.is-archived {
  background:
    rgba(0, 0, 0, 0.035);

  border-color:
    rgba(0, 0, 0, 0.08);
}
/* =========================================================
   PATIENT STATUS BADGE
   ========================================================= */

.patientStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  width: fit-content;

  margin-top: 10px;
  padding: 6px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  border: 1px solid transparent;
}

.patientStatusBadge.is-active {
  color: #58d68d;

  background:
    rgba(46, 204, 113, 0.10);

  border-color:
    rgba(46, 204, 113, 0.22);
}

.patientStatusBadge.is-deceased {
  color: #ff7b7b;

  background:
    rgba(255, 90, 90, 0.10);

  border-color:
    rgba(255, 90, 90, 0.22);
}

.patientStatusBadge.is-archived {
  color: var(--text-muted);

  background:
    rgba(255, 255, 255, 0.04);

  border-color:
    rgba(255, 255, 255, 0.08);
}

body[data-theme="white"]
.patientStatusBadge.is-archived {
  background:
    rgba(0, 0, 0, 0.035);

  border-color:
    rgba(0, 0, 0, 0.08);
}
.patientStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  width: fit-content;

  margin-top: 3px;
  padding: 8px 13px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 850;
  line-height: 1;

  border: 1px solid transparent;
}
.patientStatusMenu {
  position: absolute;
  z-index: 1200;

  display: flex;
  gap: 8px;

  margin-top: 8px;
  padding: 8px;

  background: rgba(18, 18, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;

  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.28);

  backdrop-filter: blur(14px);
}

.patientStatusMenu button {
  appearance: none;
  border: 1px solid transparent;

  padding: 9px 13px;

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.05);

  color: var(--text-primary, #f5f5f7);

  font-size: 13px;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.patientStatusMenu button:hover {
  background:
    rgba(255, 255, 255, 0.10);

  border-color:
    rgba(255, 255, 255, 0.12);

  transform: translateY(-1px);
}

.patientStatusMenu button[
  data-patient-status-value="active"
] {
  color: #69d28a;
}

.patientStatusMenu button[
  data-patient-status-value="archived"
] {
  color: #c9c9d1;
}

.patientStatusMenu button[
  data-patient-status-value="deceased"
] {
  color: #ef7b84;
}

.patientStatusMenu button:active {
  transform: translateY(0);
}
/* =========================================================
   PATIENT STATUS MENU — FINAL
   ========================================================= */

.patientStatusBadge {
  position: relative;
  cursor: pointer;
}

.patientStatusMenu {
  position: absolute;
  z-index: 99999;

  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 10px;
  padding: 7px;

  width: max-content;

  border-radius: 16px;

  background:
    rgba(18, 14, 30, 0.96);

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  box-shadow:
    0 18px 45px
      rgba(0, 0, 0, 0.38),
    inset 0 1px 0
      rgba(255, 255, 255, 0.06);

  backdrop-filter:
    blur(22px)
    saturate(160%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(160%);
}

.patientStatusMenu button {
  appearance: none !important;

  min-height: 38px;

  padding:
    0 14px !important;

  margin: 0 !important;

  border-radius:
    11px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.07) !important;

  background:
    rgba(255, 255, 255, 0.045) !important;

  color:
    rgba(255, 255, 255, 0.78) !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  font-family:
    inherit !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    color 0.16s ease !important;
}

.patientStatusMenu button:hover {
  transform:
    translateY(-1px);

  background:
    rgba(255, 255, 255, 0.09) !important;

  border-color:
    rgba(255, 255, 255, 0.14) !important;

  color:
    #ffffff !important;
}

/* Активний */

.patientStatusMenu
button[data-patient-status-value="active"] {
  color:
    #69dc95 !important;

  background:
    rgba(46, 204, 113, 0.08) !important;

  border-color:
    rgba(46, 204, 113, 0.16) !important;
}

.patientStatusMenu
button[data-patient-status-value="active"]:hover {
  background:
    rgba(46, 204, 113, 0.16) !important;

  border-color:
    rgba(46, 204, 113, 0.32) !important;
}

/* Архів */

.patientStatusMenu
button[data-patient-status-value="archived"] {
  color:
    rgba(255, 255, 255, 0.64) !important;
}

.patientStatusMenu
button[data-patient-status-value="archived"]:hover {
  color:
    #ffffff !important;
}

/* Помер */

.patientStatusMenu
button[data-patient-status-value="deceased"] {
  color:
    #ff8585 !important;

  background:
    rgba(255, 90, 90, 0.07) !important;

  border-color:
    rgba(255, 90, 90, 0.16) !important;
}

.patientStatusMenu
button[data-patient-status-value="deceased"]:hover {
  background:
    rgba(255, 90, 90, 0.15) !important;

  border-color:
    rgba(255, 90, 90, 0.30) !important;
}
/* =========================================================
   PATIENT VACCINATIONS
   ========================================================= */

.patientVaccinationsPanel {
  margin-top: 18px;
  padding: 20px;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.015)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.035);
}


.patientVaccinationsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 16px;
}


.patientVaccinationsEyebrow {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: 0.12em;

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


.patientVaccinationsHead h3 {
  margin: 0;

  font-size: 17px;
  font-weight: 850;

  color:
    var(--text);
}


.patientVaccinationAddButton {
  min-height: 38px;

  padding:
    0 14px;

  border-radius: 11px;

  border:
    1px solid
    rgba(162, 89, 255, 0.38);

  background:
    linear-gradient(
      135deg,
      rgba(151, 71, 255, 0.95),
      rgba(177, 78, 255, 0.85)
    );

  color: #fff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 850;

  cursor: pointer;

  box-shadow:
    0 8px 22px
    rgba(132, 62, 255, 0.22);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


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

  box-shadow:
    0 11px 28px
    rgba(132, 62, 255, 0.3);
}


.patientVaccinationsList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.patientVaccinationItem {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 13px 14px;

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.025);

  border:
    1px solid
    rgba(255, 255, 255, 0.07);
}


.patientVaccinationIcon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 11px;

  background:
    rgba(168, 85, 247, 0.12);

  border:
    1px solid
    rgba(168, 85, 247, 0.2);

  font-size: 18px;
}


.patientVaccinationMain {
  display: flex;
  flex-direction: column;
  gap: 3px;

  min-width: 0;

  flex: 1;
}


.patientVaccinationMain strong {
  font-size: 13px;
  font-weight: 850;

  color:
    var(--text);
}


.patientVaccinationMain span,
.patientVaccinationMain small {
  font-size: 11px;

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


.patientVaccinationNext {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 3px;
}


.patientVaccinationNext span {
  font-size: 10px;

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


.patientVaccinationNext strong {
  font-size: 12px;
  font-weight: 850;

  color:
    #bb8cff;
}


.patientVaccinationsEmpty {
  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 72px;

  padding:
    14px 16px;

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.02);

  border:
    1px dashed
    rgba(255, 255, 255, 0.1);
}


.patientVaccinationsEmpty > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 11px;

  background:
    rgba(168, 85, 247, 0.1);

  font-size: 18px;
}


.patientVaccinationsEmpty > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.patientVaccinationsEmpty strong {
  font-size: 13px;

  color:
    var(--text);
}


.patientVaccinationsEmpty small {
  font-size: 11px;

  color:
    var(--text-muted);
}
/* =====================================================
   PATIENT VACCINE PICKER
   ===================================================== */

.patientVaccinePickerOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 32px !important;

  background: rgba(5, 6, 10, 0.78) !important;
  backdrop-filter: blur(14px) !important;
}


.patientVaccinePicker {
  position: relative !important;

  width: min(920px, 92vw) !important;
  max-height: 86vh !important;

  overflow-y: auto !important;

  padding: 26px !important;

  border-radius: 24px !important;

  background:
    linear-gradient(
      145deg,
      rgba(30, 29, 34, 0.99),
      rgba(18, 18, 22, 0.99)
    ) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.12) !important;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, 0.65) !important;

  color: #f5f5f7 !important;
}


.patientVaccinePickerHead {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;

  gap: 20px !important;

  margin-bottom: 26px !important;
}


.patientVaccinePickerEyebrow {
  display: block !important;

  margin-bottom: 6px !important;

  font-size: 10px !important;
  font-weight: 800 !important;

  letter-spacing: 0.14em !important;

  opacity: 0.55 !important;
}


.patientVaccinePickerHead h2 {
  margin: 0 !important;

  font-size: 24px !important;
  font-weight: 850 !important;

  color: #fff !important;
}


.patientVaccinePickerHead p {
  margin: 7px 0 0 !important;

  font-size: 13px !important;

  opacity: 0.6 !important;
}


.patientVaccinePickerClose {
  width: 40px !important;
  height: 40px !important;

  flex: 0 0 40px !important;

  border: 0 !important;
  border-radius: 12px !important;

  background:
    rgba(255, 255, 255, 0.07) !important;

  color: #fff !important;

  font-size: 24px !important;

  cursor: pointer !important;
}


.patientVaccinePickerTitle {
  margin-bottom: 12px !important;

  font-size: 11px !important;
  font-weight: 850 !important;

  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;

  opacity: 0.55 !important;
}


.patientVaccineBrandGrid {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 10px !important;
}


.patientVaccineBrandCard {
  appearance: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  min-width: 0 !important;
  min-height: 110px !important;

  padding: 15px !important;

  border-radius: 16px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.09) !important;

  background:
    rgba(255, 255, 255, 0.035) !important;

  color: #fff !important;

  text-align: left !important;

  cursor: pointer !important;
}


.patientVaccineBrandCard:hover,
.patientVaccineBrandCard.is-active {
  border-color:
    rgba(180, 118, 255, 0.7) !important;

  background:
    rgba(151, 71, 255, 0.16) !important;

  transform:
    translateY(-2px) !important;
}


.patientVaccineBrandFlag {
  display: block !important;

  margin-bottom: 10px !important;

  font-size: 22px !important;
}


.patientVaccineBrandCard strong {
  display: block !important;

  font-size: 14px !important;
  font-weight: 850 !important;

  color: #fff !important;
}


.patientVaccineBrandCard small {
  display: block !important;

  margin-top: 4px !important;

  font-size: 10px !important;

  color:
    rgba(255, 255, 255, 0.5) !important;
}


.patientVaccineProducts {
  margin-top: 24px !important;
}


.patientVaccineChooseHint {
  padding: 26px !important;

  border:
    1px dashed
    rgba(255, 255, 255, 0.12) !important;

  border-radius: 16px !important;

  text-align: center !important;

  color:
    rgba(255, 255, 255, 0.5) !important;
}


.patientVaccineSelectedBrand {
  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  margin-bottom: 20px !important;
}


.patientVaccineSelectedBrand > span {
  font-size: 26px !important;
}


.patientVaccineSelectedBrand div {
  display: flex !important;
  flex-direction: column !important;
}


.patientVaccineSelectedBrand strong {
  font-size: 15px !important;
}


.patientVaccineSelectedBrand small {
  margin-top: 3px !important;

  font-size: 11px !important;

  opacity: 0.5 !important;
}


.patientVaccineCategory {
  margin-top: 20px !important;
}


.patientVaccineCategoryTitle {
  display: flex !important;
  align-items: center !important;

  gap: 7px !important;

  margin-bottom: 9px !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  opacity: 0.7 !important;
}


.patientVaccineProductGrid {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 10px !important;
}


.patientVaccineProductCard {
  appearance: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  min-height: 86px !important;

  padding: 14px !important;

  border-radius: 14px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.08) !important;

  background:
    rgba(255, 255, 255, 0.03) !important;

  color: #fff !important;

  text-align: left !important;

  cursor: pointer !important;
}


.patientVaccineProductCard:hover {
  border-color:
    rgba(180, 118, 255, 0.6) !important;

  background:
    rgba(151, 71, 255, 0.12) !important;
}


.patientVaccineProductCard strong {
  font-size: 13px !important;
  font-weight: 850 !important;
}


.patientVaccineProductCard small {
  margin-top: 6px !important;

  font-size: 10px !important;
  line-height: 1.4 !important;

  color:
    rgba(255, 255, 255, 0.52) !important;
}


@media (max-width: 900px) {
  .patientVaccineBrandGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .patientVaccineProductGrid {
    grid-template-columns:
      1fr !important;
  }
}
.patientVaccineProductCard.is-active {
  border-color:
    rgba(
      177,
      104,
      255,
      0.85
    ) !important;

  background:
    rgba(
      151,
      71,
      255,
      0.18
    ) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(
      177,
      104,
      255,
      0.15
    );
}


.patientVaccineSaveBox {
  margin-top: 24px;

  padding: 20px;

  border-radius: 18px;

  border:
    1px solid
    rgba(
      177,
      104,
      255,
      0.28
    );

  background:
    rgba(
      151,
      71,
      255,
      0.07
    );
}


.patientVaccineSaveHead {
  margin-bottom: 18px;
}


.patientVaccineSaveHead > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.patientVaccineSaveHead span {
  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    0.12em;

  opacity: 0.5;
}


.patientVaccineSaveHead strong {
  font-size: 17px;
}


.patientVaccineSaveHead small {
  font-size: 11px;

  opacity: 0.55;
}


.patientVaccineFormGrid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.patientVaccineFormGrid label {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


.patientVaccineFormGrid label > span {
  font-size: 10px;
  font-weight: 750;

  opacity: 0.62;
}


.patientVaccineFormGrid input {
  width: 100%;

  min-height: 42px;

  box-sizing: border-box;

  padding:
    0 12px;

  border-radius: 11px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  outline: none;

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );

  color: inherit;

  font-family: inherit;
}


.patientVaccineFormGrid input:focus {
  border-color:
    rgba(
      177,
      104,
      255,
      0.65
    );
}


.patientVaccineSaveActions {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 18px;
}


.patientVaccineSaveCancel,
.patientVaccineSaveButton {
  min-height: 40px;

  padding:
    0 15px;

  border-radius: 11px;

  font-family: inherit;
  font-weight: 800;

  cursor: pointer;
}


.patientVaccineSaveCancel {
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  color: inherit;
}


.patientVaccineSaveButton {
  border: 0;

  background:
    linear-gradient(
      135deg,
      #9346e8,
      #b45cff
    );

  color: #fff;

  box-shadow:
    0 8px 24px
    rgba(
      147,
      70,
      232,
      0.25
    );
}


.patientVaccineSaveButton:disabled {
  opacity: 0.55;

  cursor: wait;
}


@media (
  max-width: 760px
) {
  .patientVaccineFormGrid {
    grid-template-columns:
      1fr;
  }
}
/* =========================================================
   PUGCRM — VACCINATION MODULE THEME ADAPTIVE
   purple / black / blue / green / white
   ========================================================= */


/* ---------- MAIN VACCINATION CARD ---------- */

.patientVaccinationsPanel {
  background:
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    ) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text) !important;

  box-shadow:
    0 14px 38px
    var(--finance-shadow) !important;
}


.patientVaccinationsEyebrow {
  color:
    var(--finance-text-muted) !important;
}


.patientVaccinationsHead h3 {
  color:
    var(--finance-text) !important;
}


.patientVaccinationAddButton {
  border-color:
    var(--finance-border-strong) !important;

  background:
    linear-gradient(
      135deg,
      var(--finance-accent),
      var(--finance-accent-2)
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 8px 24px
    var(--finance-accent-glow) !important;
}


.patientVaccinationAddButton:hover {
  box-shadow:
    0 12px 32px
    var(--finance-accent-glow) !important;
}


/* ---------- VACCINATION HISTORY ---------- */

.patientVaccinationItem {
  background:
    var(--finance-surface-soft) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text) !important;
}


.patientVaccinationItem:hover {
  background:
    var(--finance-surface-hover) !important;

  border-color:
    var(--finance-border-strong) !important;
}


.patientVaccinationIcon {
  background:
    var(--finance-accent-soft) !important;

  border-color:
    var(--finance-border-strong) !important;
}


.patientVaccinationMain strong {
  color:
    var(--finance-text) !important;
}


.patientVaccinationMain span,
.patientVaccinationMain small {
  color:
    var(--finance-text-muted) !important;
}


.patientVaccinationNext span {
  color:
    var(--finance-text-muted) !important;
}


.patientVaccinationNext strong {
  color:
    var(--finance-accent-2) !important;
}


.patientVaccinationsEmpty {
  background:
    var(--finance-surface-soft) !important;

  border-color:
    var(--finance-border) !important;
}


.patientVaccinationsEmpty > span {
  background:
    var(--finance-accent-soft) !important;
}


.patientVaccinationsEmpty strong {
  color:
    var(--finance-text) !important;
}


.patientVaccinationsEmpty small {
  color:
    var(--finance-text-muted) !important;
}


/* =========================================================
   VACCINE PICKER MODAL
   ========================================================= */

.patientVaccinePickerOverlay {
  background:
    var(--finance-overlay) !important;
}


.patientVaccinePicker {
  background:
    linear-gradient(
      145deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    ) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text) !important;

  box-shadow:
    0 30px 100px
    var(--finance-shadow) !important;

  color-scheme:
    var(--finance-color-scheme);
}


/* ---------- HEADER ---------- */

.patientVaccinePickerEyebrow {
  color:
    var(--finance-text-muted) !important;
}


.patientVaccinePickerHead h2 {
  color:
    var(--finance-text) !important;
}


.patientVaccinePickerHead p {
  color:
    var(--finance-text-muted) !important;
}


.patientVaccinePickerClose {
  background:
    var(--finance-surface-soft) !important;

  border:
    1px solid
    var(--finance-border) !important;

  color:
    var(--finance-text) !important;
}


.patientVaccinePickerClose:hover {
  background:
    var(--finance-surface-hover) !important;

  border-color:
    var(--finance-border-strong) !important;
}


.patientVaccinePickerTitle {
  color:
    var(--finance-text-muted) !important;
}


/* =========================================================
   BRAND CARDS
   ========================================================= */

.patientVaccineBrandCard {
  background:
    var(--finance-surface-soft) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text) !important;
}


.patientVaccineBrandCard:hover {
  background:
    var(--finance-surface-hover) !important;

  border-color:
    var(--finance-border-strong) !important;
}


.patientVaccineBrandCard.is-active {
  background:
    var(--finance-accent-soft) !important;

  border-color:
    var(--finance-accent) !important;

  box-shadow:
    0 8px 24px
    var(--finance-accent-glow) !important;
}


.patientVaccineBrandCard strong {
  color:
    var(--finance-text) !important;
}


.patientVaccineBrandCard small {
  color:
    var(--finance-text-muted) !important;
}


/* =========================================================
   SELECTED BRAND
   ========================================================= */

.patientVaccineSelectedBrand strong {
  color:
    var(--finance-text) !important;
}


.patientVaccineSelectedBrand small {
  color:
    var(--finance-text-muted) !important;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.patientVaccineCategoryTitle {
  color:
    var(--finance-text-soft) !important;
}


/* =========================================================
   VACCINE CARDS
   ========================================================= */

.patientVaccineProductCard {
  background:
    var(--finance-surface-soft) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text) !important;
}


.patientVaccineProductCard:hover {
  background:
    var(--finance-surface-hover) !important;

  border-color:
    var(--finance-border-strong) !important;
}


.patientVaccineProductCard.is-active {
  background:
    var(--finance-accent-soft) !important;

  border-color:
    var(--finance-accent) !important;

  box-shadow:
    inset 0 0 0 1px
    var(--finance-border-strong),
    0 8px 22px
    var(--finance-accent-glow) !important;
}


.patientVaccineProductCard strong {
  color:
    var(--finance-text) !important;
}


.patientVaccineProductCard small {
  color:
    var(--finance-text-muted) !important;
}


/* ---------- EMPTY / CHOOSE HINT ---------- */

.patientVaccineChooseHint {
  background:
    var(--finance-surface-soft) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text-muted) !important;
}


/* =========================================================
   FINAL SAVE BOX
   ========================================================= */

.patientVaccineSaveBox {
  background:
    var(--finance-accent-soft) !important;

  border-color:
    var(--finance-border-strong) !important;
}


.patientVaccineSaveHead span {
  color:
    var(--finance-text-muted) !important;
}


.patientVaccineSaveHead strong {
  color:
    var(--finance-text) !important;
}


.patientVaccineSaveHead small {
  color:
    var(--finance-text-muted) !important;
}


/* =========================================================
   FORM
   ========================================================= */

.patientVaccineFormGrid label > span {
  color:
    var(--finance-text-soft) !important;
}


.patientVaccineFormGrid input {
  background:
    var(--finance-input) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text) !important;

  color-scheme:
    var(--finance-color-scheme);
}


.patientVaccineFormGrid input::placeholder {
  color:
    var(--finance-text-faint) !important;
}


.patientVaccineFormGrid input:focus {
  border-color:
    var(--finance-accent) !important;

  box-shadow:
    0 0 0 3px
    var(--finance-accent-soft) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.patientVaccineSaveCancel {
  background:
    var(--finance-surface-soft) !important;

  border-color:
    var(--finance-border) !important;

  color:
    var(--finance-text-soft) !important;
}


.patientVaccineSaveCancel:hover {
  background:
    var(--finance-surface-hover) !important;

  color:
    var(--finance-text) !important;
}


.patientVaccineSaveButton {
  background:
    linear-gradient(
      135deg,
      var(--finance-accent),
      var(--finance-accent-2)
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 8px 24px
    var(--finance-accent-glow) !important;
}


.patientVaccineSaveButton:hover:not(:disabled) {
  box-shadow:
    0 12px 32px
    var(--finance-accent-glow) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.patientVaccinePicker::-webkit-scrollbar {
  width: 7px;
}


.patientVaccinePicker::-webkit-scrollbar-track {
  background:
    transparent;
}


.patientVaccinePicker::-webkit-scrollbar-thumb {
  background:
    var(--finance-border-strong);

  border-radius:
    20px;
}


.patientVaccinePicker::-webkit-scrollbar-thumb:hover {
  background:
    var(--finance-accent);
}
/* =====================================================
   ADD PATIENT MODAL — WIDE DESKTOP VERSION
   ===================================================== */

.addPetModal {
  width: min(1040px, calc(100vw - 48px)) !important;
  max-width: 1040px !important;

  max-height: calc(100vh - 40px) !important;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 28px 30px 24px;
}


/* Основная сетка формы */

.addPetModalGrid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  column-gap: 22px !important;
  row-gap: 16px !important;

  align-items: start;
}


/* Поля, которым действительно нужна
   вся ширина окна */

.addPetFieldFull {
  grid-column: 1 / -1;
}


/* Кличка */

.addPetModalGrid
  > .addPetFieldFull:first-child {
  grid-column: 1 / -1;
}


/* Вид пациента */

.addPetSpeciesSelector {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;
}


/* Сказ + общая вакцина —
   всегда рядом */

.addPetVaccinationStatusRow {
  grid-column: 1 / -1;

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;
}


/* Раскрытые данные вакцинации */

.addPetVaccinationDetails {
  grid-column: 1 / -1;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;

  padding: 16px 18px;

  border-radius: 14px;
}


/* hidden должен реально скрывать блок */

.addPetVaccinationDetails[hidden] {
  display: none !important;
}


/* Чтобы select/input не раздували колонки */

.addPetModal input,
.addPetModal select,
.addPetModal textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* Нотатки не должны делать
   форму гигантской */

.addPetTextarea {
  min-height: 82px !important;
  max-height: 120px !important;
  resize: vertical;
}


/* Нижняя панель */

.addPetModalActions {
  position: sticky;

  bottom: 0;

  z-index: 5;

  margin-top: 18px;

  padding-top: 14px;
  padding-bottom: 4px;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {
  .addPetModal {
    width:
      min(
        760px,
        calc(100vw - 32px)
      ) !important;
  }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 640px) {
  .addPetModal {
    width:
      calc(100vw - 20px) !important;

    max-height:
      calc(100vh - 20px) !important;

    padding:
      20px 16px;
  }


  .addPetModalGrid,
  .addPetVaccinationStatusRow,
  .addPetVaccinationDetails {
    grid-template-columns:
      1fr !important;
  }


  .addPetSpeciesSelector {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}
/* =====================================================
   PATIENT VACCINATION ACTIONS
   ===================================================== */

.patientVaccinationItem {
  position: relative;
}


.patientVaccinationActions {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-left: 12px;
}


.patientVaccinationActionButton {
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border-radius: 9px;

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.035);

  color: inherit;

  font-size: 15px;

  cursor: pointer;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}


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

  background:
    rgba(255,255,255,.08);

  border-color:
    rgba(255,255,255,.16);
}


.patientVaccinationDeleteButton {
  opacity: .72;
}


.patientVaccinationDeleteButton:hover {
  opacity: 1;

  background:
    rgba(255,70,90,.10);

  border-color:
    rgba(255,70,90,.25);
}
#visitNewPetRabiesDetails[hidden],
#visitNewPetGeneralVaccinationDetails[hidden] {
  display: none !important;
}
/* =========================================================
   PUG AI — VISIT WORKSPACE
   ========================================================= */

.visitWorkspace.hasPugAiWorkspace {
  max-width: 1760px;
}

.visitWorkspaceGrid.hasPugAiWorkspace {
  grid-template-columns:
    minmax(320px, 360px)
    minmax(680px, 1fr)
    330px;
}

.visitAiWorkspace {
  position: sticky;
  top: 18px;
  min-width: 0;
  max-height: calc(100vh - 36px);
  overflow: hidden;

  border:
    1px solid
    var(--finance-border-strong);
  border-radius: 22px;

  background:
    linear-gradient(
      155deg,
      var(--finance-surface-1),
      var(--finance-surface-2)
    );

  box-shadow:
    0 22px 65px
    var(--finance-shadow);

  color:
    var(--finance-text);
}

.visitAiWorkspaceHead {
  padding: 18px 18px 14px;

  border-bottom:
    1px solid
    var(--finance-border);

  background:
    linear-gradient(
      135deg,
      var(--finance-accent-soft),
      transparent
    );
}

.visitAiWorkspaceBrand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.visitAiWorkspaceBrandIcon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      var(--finance-accent),
      var(--finance-accent-2)
    );

  color: #ffffff;
  font-size: 17px;

  box-shadow:
    0 10px 26px
    var(--finance-accent-glow);
}

.visitAiWorkspaceBrand strong {
  display: block;

  color:
    var(--finance-text);

  font-size: 15px;
  font-weight: 850;
}

.visitAiWorkspaceBrand span {
  display: block;

  margin-top: 3px;

  color:
    var(--finance-text-muted);

  font-size: 10px;
  line-height: 1.4;
}

.visitAiWorkspaceTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;

  margin-top: 15px;
  padding: 4px;

  border:
    1px solid
    var(--finance-border);
  border-radius: 12px;

  background:
    var(--finance-input);
}

.visitAiWorkspaceTab {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;

  border: 0;
  border-radius: 9px;

  background: transparent;
  color:
    var(--finance-text-muted);

  font: inherit;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.visitAiWorkspaceTab:hover {
  color:
    var(--finance-text);
}

.visitAiWorkspaceTab.active {
  background:
    var(--finance-accent-soft);

  color:
    var(--finance-accent-2);

  box-shadow:
    inset 0 0 0 1px
    var(--finance-border-strong);
}

.visitAiWorkspaceBody {
  max-height:
    calc(100vh - 180px);

  overflow-y: auto;
  padding: 14px;
}

.visitAiWorkspacePane[hidden] {
  display: none !important;
}

.visitAiWorkspacePane {
  min-width: 0;
}

.visitAiWorkspacePane
#visitAiIntakePanel,
.visitAiWorkspacePane
#visitAiConsultPanel {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.visitAiWorkspacePane
#visitAiIntakePanel
> div {
  margin-bottom: 0 !important;
}

.visitAiWorkspacePane
#visitAiConsultPanel {
  grid-column: auto;
}

body[data-theme="white"]
.visitAiWorkspace {
  box-shadow:
    0 20px 55px
    rgba(35, 30, 60, 0.12),
    inset 0 1px 0
    rgba(255, 255, 255, 0.92);
}

/* Средние ноутбуки:
   AI остаётся единым блоком над рабочей зоной. */

@media (max-width: 1550px) {
  .visitWorkspace.hasPugAiWorkspace {
    max-width: 1380px;
  }

  .visitWorkspaceGrid.hasPugAiWorkspace {
    grid-template-columns:
      minmax(0, 1fr)
      330px;
  }

  .visitAiWorkspace {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }

  .visitAiWorkspaceBody {
    max-height: none;
  }
}

/* Планшеты и телефоны. */

@media (max-width: 1120px) {
  .visitWorkspaceGrid.hasPugAiWorkspace {
    grid-template-columns: 1fr;
  }

  .visitAiWorkspace {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .visitAiWorkspace {
    border-radius: 18px;
  }

  .visitAiWorkspaceHead {
    padding: 15px;
  }

  .visitAiWorkspaceBody {
    padding: 11px;
  }

  .visitAiWorkspaceTabs {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   PUG AI — WIDE DESKTOP WORKSPACE FIX
   ========================================================= */

@media (min-width: 1551px) {
  .main-content:has(
  .page[data-page="visit"].active
  .visitWorkspace.hasPugAiWorkspace
) {
    width:
      calc(100vw - 32px) !important;

    max-width:
      none !important;

    margin-left:
      16px !important;

    margin-right:
      16px !important;

    padding-left:
      0 !important;

    padding-right:
      0 !important;
  }

  .visitWorkspace.hasPugAiWorkspace {
    width: 100%;
    max-width: 1780px;
  }

  .visitWorkspaceGrid.hasPugAiWorkspace {
    grid-template-columns:
      minmax(420px, 460px)
      minmax(760px, 1fr)
      330px;

    gap: 20px;
  }
}

/* Внутри левой колонки поле вопроса
   и кнопка располагаются вертикально. */

.visitAiWorkspace
.visitAiConsultComposer {
  grid-template-columns:
    minmax(0, 1fr);
}

.visitAiWorkspace
.visitAiConsultSend {
  width: 100%;
}

.visitAiWorkspace
.visitAiConsultQuickActions {
  display: grid;
  grid-template-columns:
    1fr;
}

.visitAiWorkspace
.visitAiConsultQuickButton {
  width: 100%;
  text-align: left;
}
/* =========================================================
   PUG AI — READABLE TYPOGRAPHY
   ========================================================= */

.visitAiWorkspaceBrand strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.visitAiWorkspaceBrand span {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.visitAiWorkspaceTab {
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

.visitAiWorkspace
.visitAiConsultTitle {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.visitAiWorkspace
.visitAiConsultSubtitle {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.visitAiWorkspace
.visitAiConsultBadge {
  font-size: 11px !important;
}

.visitAiWorkspace
.visitAiConsultQuickButton {
  min-height: 42px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.visitAiWorkspace
.visitAiConsultInput {
  min-height: 105px !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.visitAiWorkspace
.visitAiConsultSend {
  min-height: 46px !important;
  font-size: 14px !important;
}

.visitAiWorkspace
.visitAiConsultDirectAnswer {
  font-size: 15px !important;
  line-height: 1.68 !important;
}

.visitAiWorkspace
.visitAiConsultSection h4 {
  margin-bottom: 10px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.visitAiWorkspace
.visitAiConsultSection ul {
  padding-left: 21px !important;
}

.visitAiWorkspace
.visitAiConsultSection li {
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.visitAiWorkspace
.visitAiConsultMeta {
  gap: 12px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.visitAiWorkspace
.visitAiConsultPriority {
  margin-top: 14px !important;

  padding:
    15px 17px !important;

  border:
    1px solid
    rgba(45, 212, 191, 0.34)
    !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      135deg,
      rgba(13, 148, 136, 0.15),
      rgba(15, 23, 42, 0.44)
    ) !important;

  box-shadow:
    inset 3px 0 0
    rgba(45, 212, 191, 0.7);
}

.visitAiWorkspace
.visitAiConsultPriority h4 {
  margin:
    0 0 10px !important;

  color:
    #99f6e4 !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.visitAiWorkspace
.visitAiConsultPriority ul {
  margin:
    0 !important;

  padding-left:
    20px !important;
}

.visitAiWorkspace
.visitAiConsultPriority li {
  margin:
    7px 0 !important;

  color:
    rgba(
      240,
      253,
      250,
      0.94
    ) !important;

  font-weight:
    650 !important;

  line-height:
    1.55 !important;
}

.visitAiWorkspace
.visitAiConsultPriority li::marker {
  color:
    #2dd4bf;
}

/* Первый AI-блок оформления приёма */

.visitAiWorkspace
#visitAiIntakePanel {
  font-size: 14px !important;
}

.visitAiWorkspace
#visitAiIntakePanel textarea {
  min-height: 120px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.visitAiWorkspace
#visitAiIntakePanel button {
  min-height: 42px;
  font-size: 13px !important;
}

.visitAiWorkspace
#visitAiStructureResult {
  font-size: 14px !important;
  line-height: 1.58 !important;
}

@media (max-width: 560px) {
  .visitAiWorkspace
  .visitAiConsultDirectAnswer,
  .visitAiWorkspace
  .visitAiConsultSection li,
  .visitAiWorkspace
  #visitAiStructureResult {
    font-size: 14px !important;
  }
}
/* =========================================================
   PUG AI — LARGE CLINICAL WORKSPACE
   ========================================================= */

@media (min-width: 1551px) {
  .main-content:has(
  .page[data-page="visit"].active
  .visitWorkspace.hasPugAiWorkspace
) {
    width:
      calc(100vw - 16px) !important;

    margin-left:
      8px !important;

    margin-right:
      8px !important;
  }

  .visitWorkspace.hasPugAiWorkspace {
    max-width: 1900px !important;
  }

  .visitWorkspaceGrid.hasPugAiWorkspace {
    grid-template-columns:
      minmax(560px, 600px)
      minmax(720px, 1fr)
      330px !important;
  }
}

/* Заголовок AI Workspace */

.visitAiWorkspaceBrand strong {
  font-size: 20px !important;
}

.visitAiWorkspaceBrand span {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.visitAiWorkspaceBrandIcon {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  font-size: 20px !important;
}

/* Вкладки */

.visitAiWorkspaceTab {
  min-height: 50px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
}

/* Заголовок консультанта */

.visitAiWorkspace
.visitAiConsultTitle {
  font-size: 20px !important;
  line-height: 1.3 !important;
}

.visitAiWorkspace
.visitAiConsultSubtitle {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.visitAiWorkspace
.visitAiConsultBadge {
  padding: 7px 10px !important;
  font-size: 13px !important;
}

/* Быстрые вопросы */

.visitAiWorkspace
.visitAiConsultQuickButton {
  min-height: 48px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Поле вопроса */

.visitAiWorkspace
.visitAiConsultInput {
  min-height: 125px !important;
  padding: 15px 16px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.visitAiWorkspace
.visitAiConsultSend {
  min-height: 52px !important;
  font-size: 16px !important;
}

/* Основной ответ */

.visitAiWorkspace
.visitAiConsultAnswer {
  padding: 19px !important;
}

.visitAiWorkspace
.visitAiConsultDirectAnswer {
  font-size: 18px !important;
  line-height: 1.72 !important;
}

/* Разделы ответа */

.visitAiWorkspace
.visitAiConsultSection {
  margin-top: 19px !important;
  padding-top: 17px !important;
}

.visitAiWorkspace
.visitAiConsultSection h4 {
  margin-bottom: 12px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.visitAiWorkspace
.visitAiConsultSection ul {
  padding-left: 24px !important;
}

.visitAiWorkspace
.visitAiConsultSection li {
  margin: 10px 0 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.visitAiWorkspace
.visitAiConsultMeta {
  margin-top: 17px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Оформление приёма */

.visitAiWorkspace
#visitAiIntakePanel {
  font-size: 17px !important;
}

.visitAiWorkspace
#visitAiIntakePanel textarea {
  min-height: 150px !important;
  padding: 15px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.visitAiWorkspace
#visitAiIntakePanel button {
  min-height: 48px !important;
  font-size: 15px !important;
}

.visitAiWorkspace
#visitAiStructureResult {
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* Чуть больше воздуха внутри панели */

.visitAiWorkspaceHead {
  padding: 21px 21px 17px !important;
}

.visitAiWorkspaceBody {
  padding: 18px !important;
}
/* ========================================
   PUG AI — лабораторный ассистент
======================================== */

.labAiWrap {
  margin-top: 18px;
  padding-top: 16px;
  border-top:
    1px solid
    rgba(148, 163, 184, 0.16);
}

.labAiButton {
  width: 100%;
  min-height: 50px;
  padding: 12px 18px;

  border:
    1px solid
    rgba(139, 92, 246, 0.45);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.22),
      rgba(76, 29, 149, 0.09)
    );

  color: #ddd6fe;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

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

  border-color:
    rgba(167, 139, 250, 0.75);

  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.32),
      rgba(76, 29, 149, 0.15)
    );
}

.labAiButton:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.labAiLoading,
.labAiError {
  margin-top: 12px;
  padding: 14px 16px;

  border-radius: 13px;

  background:
    rgba(15, 23, 42, 0.55);

  color:
    rgba(226, 232, 240, 0.84);

  line-height: 1.55;
}

.labAiError {
  border:
    1px solid
    rgba(248, 113, 113, 0.34);

  color: #fecaca;
}

.labAiPanel {
  margin-top: 14px;
  padding: 18px;

  border:
    1px solid
    rgba(139, 92, 246, 0.28);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(30, 24, 54, 0.92),
      rgba(15, 23, 42, 0.8)
    );
}

.labAiPanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.labAiEyebrow {
  color: #a78bfa;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.labAiPanel h4 {
  margin: 5px 0 0;

  color: #f8fafc;

  font-size: 17px;
}

.labAiConfidence {
  flex: 0 0 auto;

  padding: 6px 9px;

  border-radius: 999px;

  background:
    rgba(139, 92, 246, 0.16);

  color: #c4b5fd;

  font-size: 11px;
  font-weight: 700;
}

.labAiOverview {
  margin-top: 15px;
  padding: 14px;

  border-radius: 13px;

  background:
    rgba(139, 92, 246, 0.1);

  color: #e2e8f0;

  line-height: 1.6;
}
.labAiClinicalConclusion {
  margin-top: 12px;
  padding: 15px 16px;

  border:
    1px solid
    rgba(167, 139, 250, 0.34);

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.18),
      rgba(76, 29, 149, 0.08)
    );

  box-shadow:
    inset 3px 0 0
    rgba(167, 139, 250, 0.72);
}

.labAiClinicalConclusionTitle {
  margin-bottom: 7px;

  color: #c4b5fd;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.labAiClinicalConclusionText {
  color: #f8fafc;

  font-size: 14px;
  font-weight: 650;

  line-height: 1.6;
}

.labAiHypotheses {
  margin-top: 12px;
}

.labAiHypothesesTitle {
  margin-bottom: 9px;

  color:
    rgba(226, 232, 240, 0.92);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.labAiHypothesesGrid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(230px, 1fr)
    );

  gap: 10px;
}

.labAiHypothesisCard {
  position: relative;

  overflow: hidden;

  padding: 14px;

  border:
    1px solid
    rgba(167, 139, 250, 0.24);

  border-radius: 13px;

  background:
    rgba(15, 23, 42, 0.5);
}

.labAiHypothesisHead {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 11px;
}

.labAiHypothesisHead h5 {
  margin: 0;

  color: #f8fafc;

  font-size: 13px;
  font-weight: 750;

  line-height: 1.4;
}

.labAiHypothesisPercent {
  flex: 0 0 auto;

  min-width: 48px;

  padding: 5px 8px;

  border:
    1px solid
    rgba(167, 139, 250, 0.3);

  border-radius: 999px;

  background:
    rgba(124, 58, 237, 0.2);

  color: #ddd6fe;

  font-size: 12px;
  font-weight: 800;

  text-align: center;
}

.labAiHypothesisEvidence,
.labAiHypothesisCounterpoints {
  color:
    rgba(203, 213, 225, 0.9);

  font-size: 11px;

  line-height: 1.55;
}

.labAiHypothesisEvidence {
  margin-bottom: 8px;
}

.labAiHypothesisEvidence b {
  color: #a7f3d0;
}

.labAiHypothesisCounterpoints b {
  color: #fcd34d;
}

.labAiHypothesisBar {
  overflow: hidden;

  height: 5px;

  margin-top: 12px;

  border-radius: 999px;

  background:
    rgba(148, 163, 184, 0.12);
}

.labAiHypothesisBar span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #a78bfa
    );

  box-shadow:
    0 0 10px
    rgba(167, 139, 250, 0.38);
}

.labAiHypothesesDisclaimer {
  margin-top: 9px;

  color:
    rgba(148, 163, 184, 0.82);

  font-size: 9px;

  line-height: 1.5;
}

.labAiPanel.is-collapsed
.labAiClinicalConclusion,
.labAiPanel.is-collapsed
.labAiHypotheses {
  display: none;
}
.labAiSections {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 12px;
}

.labAiSection {
  padding: 13px 14px;

  border:
    1px solid
    rgba(148, 163, 184, 0.14);

  border-radius: 13px;

  background:
    rgba(15, 23, 42, 0.42);
}

.labAiSection.is-accent {
  border-color:
    rgba(167, 139, 250, 0.28);

  background:
    rgba(76, 29, 149, 0.13);
}

.labAiSection.is-action {
  border-color:
    rgba(52, 211, 153, 0.24);

  background:
    rgba(6, 78, 59, 0.1);
}

.labAiSection.is-warning {
  border-color:
    rgba(251, 191, 36, 0.3);

  background:
    rgba(120, 53, 15, 0.14);
}

.labAiSection.is-muted {
  opacity: 0.82;
}

.labAiSection h5 {
  margin:
    0
    0
    8px;

  color: #e9d5ff;

  font-size: 12px;
  font-weight: 800;
}

.labAiSection ul {
  margin: 0;

  padding-left: 17px;

  color:
    rgba(226, 232, 240, 0.84);

  line-height: 1.52;
}

.labAiSection li + li {
  margin-top: 6px;
}

.labAiFooter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  margin-top: 14px;
  padding-top: 12px;

  border-top:
    1px solid
    rgba(148, 163, 184, 0.14);

  color:
    rgba(148, 163, 184, 0.84);

  font-size: 10px;
}

@media (
  max-width: 760px
) {
  .labAiSections {
    grid-template-columns:
      1fr;
  }

  .labAiPanelHead,
  .labAiFooter {
    flex-direction:
      column;
  }

  .labAiPanel {
    padding: 15px;
  }

  .labAiConfidence {
    align-self:
      flex-start;
  }
}
.labAiPanel.is-collapsed
.labAiSections,

.labAiPanel.is-collapsed
.labAiFooter {
  display: none;
}

.labAiPanel.is-collapsed {
  padding-bottom: 16px;
}

.labAiPanel.is-collapsed
.labAiOverview {
  margin-bottom: 0;
}
.labAiPanel.is-stale {
  border-color:
    rgba(245, 158, 11, 0.48);
}

.labAiStaleNotice {
  margin:
    0 0 14px;
  padding:
    11px 13px;
  border:
    1px solid
    rgba(245, 158, 11, 0.34);
  border-radius:
    12px;
  background:
    rgba(245, 158, 11, 0.09);
  color:
    rgba(254, 243, 199, 0.92);
  font-size:
    12px;
  line-height:
    1.55;
}
.labAiStaleNotice {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;
  gap:
    14px;
}

.labAiStaleNotice span {
  flex:
    1;
}

.labAiStaleNotice button {
  flex:
    0 0 auto;
  padding:
    8px 11px;
  border:
    1px solid
    rgba(245, 158, 11, 0.42);
  border-radius:
    9px;
  background:
    rgba(245, 158, 11, 0.14);
  color:
    rgba(254, 243, 199, 0.96);
  font:
    inherit;
  font-weight:
    700;
  cursor:
    pointer;
  transition:
    0.18s ease;
}

.labAiStaleNotice button:hover {
  background:
    rgba(245, 158, 11, 0.24);
  border-color:
    rgba(245, 158, 11, 0.68);
}

@media (max-width: 720px) {
  .labAiStaleNotice {
    align-items:
      stretch;
    flex-direction:
      column;
  }

  .labAiStaleNotice button {
    width:
      100%;
  }
}
/* =========================================================
   PUG AI LABS — OWNER EXPLANATION
   ========================================================= */

.labAiOwnerExplanation {
  margin-top: 16px;
  padding: 18px;

  border:
    1px solid
    rgba(45, 212, 191, 0.28);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 148, 136, 0.11),
      rgba(15, 23, 42, 0.56)
    );

  box-shadow:
    inset 3px 0 0
    rgba(45, 212, 191, 0.62);
}

.labAiOwnerExplanationHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  margin-bottom: 14px;
}

.labAiOwnerExplanationEyebrow {
  margin-bottom: 4px;

  color: #5eead4;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.labAiOwnerExplanation h5 {
  margin: 0;

  color: #f0fdfa;

  font-size: 15px;
  font-weight: 800;
}

.labAiOwnerCopyButton {
  flex: 0 0 auto;

  padding: 8px 11px;

  border:
    1px solid
    rgba(45, 212, 191, 0.34);

  border-radius: 10px;

  background:
    rgba(13, 148, 136, 0.13);

  color: #99f6e4;

  font: inherit;
  font-size: 11px;
  font-weight: 750;

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

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

  border-color:
    rgba(45, 212, 191, 0.62);

  background:
    rgba(13, 148, 136, 0.22);
}

.labAiOwnerSummary {
  margin:
    0
    0
    16px;

  color:
    rgba(240, 253, 250, 0.94);

  font-size: 14px;
  line-height: 1.65;
}

.labAiOwnerGroup {
  margin-top: 14px;
}

.labAiOwnerGroupTitle {
  margin-bottom: 9px;

  color:
    rgba(204, 251, 241, 0.82);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.labAiOwnerDeviations {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );

  gap: 9px;
}

.labAiOwnerDeviation {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  padding: 12px;

  border:
    1px solid
    rgba(148, 163, 184, 0.14);

  border-radius: 12px;

  background:
    rgba(15, 23, 42, 0.42);
}

.labAiOwnerDeviationIcon {
  display: inline-flex;
  flex: 0 0 30px;

  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border-radius: 9px;

  background:
    rgba(148, 163, 184, 0.12);

  color: #e2e8f0;

  font-size: 17px;
  font-weight: 900;
}

.labAiOwnerDeviation strong {
  display: block;

  margin-bottom: 4px;

  color: #f8fafc;

  font-size: 12px;
  line-height: 1.4;
}

.labAiOwnerDeviation p {
  margin: 0;

  color:
    rgba(226, 232, 240, 0.82);

  font-size: 12px;
  line-height: 1.55;
}

.labAiOwnerDeviation.is-high
.labAiOwnerDeviationIcon,
.labAiOwnerDeviation.is-abnormal
.labAiOwnerDeviationIcon {
  background:
    rgba(245, 158, 11, 0.16);

  color: #fcd34d;
}

.labAiOwnerDeviation.is-low
.labAiOwnerDeviationIcon {
  background:
    rgba(59, 130, 246, 0.16);

  color: #93c5fd;
}

.labAiOwnerDeviation.is-mixed
.labAiOwnerDeviationIcon {
  background:
    rgba(139, 92, 246, 0.18);

  color: #c4b5fd;
}

.labAiOwnerDeviation.is-positive
.labAiOwnerDeviationIcon {
  background:
    rgba(244, 63, 94, 0.16);

  color: #fda4af;
}

.labAiOwnerDeviation.is-negative
.labAiOwnerDeviationIcon {
  background:
    rgba(34, 197, 94, 0.15);

  color: #86efac;
}

.labAiOwnerNormal,
.labAiOwnerNextStep {
  margin-top: 12px;
  padding: 12px 13px;

  border-radius: 12px;

  background:
    rgba(15, 23, 42, 0.34);
}

.labAiOwnerNormal {
  border:
    1px solid
    rgba(34, 197, 94, 0.18);
}

.labAiOwnerNextStep {
  border:
    1px solid
    rgba(45, 212, 191, 0.2);
}

.labAiOwnerNormal > strong,
.labAiOwnerNextStep > strong {
  display: block;

  margin-bottom: 6px;

  color: #a7f3d0;

  font-size: 11px;
  font-weight: 800;
}

.labAiOwnerNormal ul {
  margin: 0;
  padding-left: 18px;

  color:
    rgba(226, 232, 240, 0.82);

  font-size: 12px;
  line-height: 1.55;
}

.labAiOwnerNormal li + li {
  margin-top: 4px;
}

.labAiOwnerNextStep p {
  margin: 0;

  color:
    rgba(240, 253, 250, 0.9);

  font-size: 12px;
  line-height: 1.58;
}

@media (max-width: 720px) {
  .labAiOwnerExplanation {
    padding: 15px;
  }

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

  .labAiOwnerCopyButton {
    width: 100%;
  }

  .labAiOwnerDeviations {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   PUG AI LABS — PRIMARY ACTIONS AND DETAILS
   ========================================================= */

.labAiPrimaryChecks {
  margin-top: 14px;
}

.labAiPrimaryChecks
.labAiSection {
  padding: 15px 16px;

  border-color:
    rgba(52, 211, 153, 0.3);

  background:
    linear-gradient(
      135deg,
      rgba(6, 78, 59, 0.17),
      rgba(15, 23, 42, 0.42)
    );

  box-shadow:
    inset 3px 0 0
    rgba(52, 211, 153, 0.58);
}

.labAiPrimaryChecks
.labAiSection h5 {
  margin-bottom: 9px;

  color: #a7f3d0;

  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.labAiPrimaryChecks
.labAiSection ul {
  padding-left: 19px;

  color:
    rgba(236, 253, 245, 0.92);

  font-size: 13px;
  line-height: 1.58;
}

.labAiPrimaryChecks
.labAiSection li::marker {
  color: #34d399;
}

.labAiDetails {
  overflow: hidden;

  margin-top: 16px;

  border:
    1px solid
    rgba(139, 92, 246, 0.24);

  border-radius: 14px;

  background:
    rgba(15, 23, 42, 0.34);
}

.labAiDetails > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;

  color: #ddd6fe;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  list-style: none;

  transition:
    background 0.18s ease,
    color 0.18s ease;
}

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

.labAiDetails > summary:hover {
  background:
    rgba(124, 58, 237, 0.1);

  color: #f5f3ff;
}

.labAiDetails[open] > summary {
  border-bottom:
    1px solid
    rgba(139, 92, 246, 0.18);

  background:
    rgba(124, 58, 237, 0.08);
}

.labAiDetailsChevron {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  border-radius: 8px;

  background:
    rgba(139, 92, 246, 0.14);

  color: #c4b5fd;

  font-size: 13px;

  transition:
    transform 0.18s ease;
}

.labAiDetails[open]
.labAiDetailsChevron {
  transform:
    rotate(180deg);
}

.labAiDetailsBody {
  padding: 0 14px 14px;
}

.labAiDetailsBody
.labAiHypotheses {
  margin-top: 14px;
}

.labAiDetailsBody
.labAiSections {
  margin-top: 12px;
}

.labAiDetailsBody
.labAiSection {
  background:
    rgba(15, 23, 42, 0.5);
}

@media (max-width: 720px) {
  .labAiDetails > summary {
    padding: 13px 14px;
  }

  .labAiDetailsBody {
    padding:
      0
      11px
      11px;
  }
}
/* =========================================================
   LAB FORM — OWNER EXPLANATION
   ========================================================= */

.premiumLabOwnerExplanationField {
  margin-top: 18px;
  padding: 16px;

  border:
    1px solid
    rgba(45, 212, 191, 0.22);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 148, 136, 0.1),
      rgba(15, 23, 42, 0.18)
    );
}

.premiumLabOwnerExplanationField > span {
  color: #99f6e4;

  font-size: 11px;
  font-weight: 850;
}

.premiumLabOwnerExplanationField textarea {
  min-height: 135px;

  border-color:
    rgba(45, 212, 191, 0.2);

  background:
    rgba(2, 15, 18, 0.34);

  font-size: 13px;
  line-height: 1.58;
}

.premiumLabOwnerExplanationField textarea:focus {
  border-color:
    rgba(45, 212, 191, 0.62);

  box-shadow:
    0 0 0 4px
    rgba(45, 212, 191, 0.1);
}

.premiumLabOwnerExplanationHint {
  display: block;

  color:
    rgba(204, 251, 241, 0.6);

  font-size: 10px;
  line-height: 1.5;
}

body[data-theme="white"]
.premiumLabOwnerExplanationField {
  border-color:
    rgba(13, 148, 136, 0.2);

  background:
    rgba(13, 148, 136, 0.055);
}

body[data-theme="white"]
.premiumLabOwnerExplanationField > span {
  color: #0f766e;
}

body[data-theme="white"]
.premiumLabOwnerExplanationField textarea {
  color: #1d1b28;

  border-color:
    rgba(13, 148, 136, 0.18);

  background:
    rgba(255, 255, 255, 0.82);
}

body[data-theme="white"]
.premiumLabOwnerExplanationHint {
  color:
    rgba(15, 118, 110, 0.72);
}
/* =========================================================
   LAB CARD — SAVED OWNER EXPLANATION
   ========================================================= */

.labHistoryOwnerExplanation {
  margin-top: 14px;
  padding: 15px 16px;

  border:
    1px solid
    rgba(45, 212, 191, 0.22);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 148, 136, 0.1),
      rgba(15, 23, 42, 0.26)
    );

  box-shadow:
    inset 3px 0 0
    rgba(45, 212, 191, 0.56);
}

.labHistoryOwnerExplanationLabel {
  margin-bottom: 7px;

  color: #99f6e4;

  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.labHistoryOwnerExplanationText {
  color:
    rgba(240, 253, 250, 0.9);

  font-size: 13px;
  line-height: 1.62;
}

body[data-theme="white"]
.labHistoryOwnerExplanation {
  border-color:
    rgba(13, 148, 136, 0.2);

  background:
    rgba(13, 148, 136, 0.055);

  box-shadow:
    inset 3px 0 0
    rgba(13, 148, 136, 0.48);
}

body[data-theme="white"]
.labHistoryOwnerExplanationLabel {
  color: #0f766e;
}

body[data-theme="white"]
.labHistoryOwnerExplanationText {
  color:
    rgba(23, 48, 45, 0.9);
}
/* =========================================================
   PUG AI LAB — ПОЛНОЕ СВОРАЧИВАНИЕ РАСШИФРОВКИ
   ========================================================= */

.labAiPanel.is-collapsed {
  display:
    none !important;
}
/* =========================================================
   VISIT — CLINICAL VITAL SIGNS
   ========================================================= */

.visitTextareaShort {
  min-height:
    76px !important;
}

.visitVitalsBlock {
  padding:
    14px;

  border:
    1px solid
    rgba(177, 91, 255, 0.14);

  border-radius:
    15px;

  background:
    linear-gradient(
      135deg,
      rgba(147, 70, 232, 0.075),
      rgba(5, 3, 13, 0.3)
    );
}

.visitVitalsTitle {
  margin-bottom:
    11px;

  color:
    rgba(255, 255, 255, 0.72);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;
}

.visitVitalsGrid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(125px, 1fr)
    );

  gap:
    10px;
}

.visitVitalField {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  gap:
    7px;
}

.visitVitalField > span {
  overflow:
    hidden;

  color:
    rgba(255, 255, 255, 0.5);

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.visitVitalField
.visitControl {
  min-height:
    44px;

  font-size:
    12px;
}

@media (max-width: 560px) {
  .visitVitalsGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .visitVitalsBlock {
    padding:
      12px;
  }
}
/* =========================================================
   VISIT — CLINICAL ASSESSMENT
   ========================================================= */

.visitTextareaClinical {
  min-height:
    118px !important;
}

.visitTextareaProblems {
  min-height:
    82px !important;
}

.visitTextareaDiagnosis {
  min-height:
    92px !important;
}

.visitAssessmentBlock {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    15px;

  border:
    1px solid
    rgba(177, 91, 255, 0.16);

  border-radius:
    15px;

  background:
    rgba(147, 70, 232, 0.055);
}

.visitAssessmentGrid {
  display:
    grid;

  grid-template-columns:
    minmax(170px, 0.28fr)
    minmax(0, 1fr);

  gap:
    14px;
}

.visitField > span small {
  margin-left:
    6px;

  color:
    rgba(255, 255, 255, 0.3);

  font-size:
    8px;

  font-weight:
    650;

  text-transform:
    none;
}

@media (max-width: 720px) {
  .visitAssessmentGrid {
    grid-template-columns:
      1fr;
  }
}
/* =========================================================
   VISIT — PLAN AND OWNER COMMUNICATION
   ========================================================= */

.visitActionGrid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    14px;
}

.visitTextareaAction {
  min-height:
    96px !important;
}

.visitTextareaPrescription {
  min-height:
    112px !important;
}

.visitOwnerCommunication {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    16px;

  border:
    1px solid
    rgba(45, 212, 191, 0.22);

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      rgba(13, 148, 136, 0.09),
      rgba(5, 3, 13, 0.24)
    );

  box-shadow:
    inset 3px 0 0
    rgba(45, 212, 191, 0.48);
}

.visitOwnerCommunicationHead {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}

.visitOwnerCommunicationHead > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.visitOwnerCommunicationHead strong {
  color:
    #99f6e4;

  font-size:
    12px;

  font-weight:
    850;
}

.visitOwnerCommunicationHead
span {
  color:
    rgba(204, 251, 241, 0.48);

  font-size:
    9px;
}

.visitOwnerCommunicationBadge {
  flex:
    0 0 auto;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(45, 212, 191, 0.18);

  border-radius:
    999px;

  background:
    rgba(13, 148, 136, 0.1);

  color:
    rgba(153, 246, 228, 0.78)
    !important;

  font-size:
    8px !important;

  font-weight:
    800;
}

.visitTextareaOwner {
  min-height:
    94px !important;
}

.visitOwnerFollowGrid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    14px;
}

.visitTextareaFollow {
  min-height:
    78px !important;
}

@media (max-width: 720px) {
  .visitActionGrid,
  .visitOwnerFollowGrid {
    grid-template-columns:
      1fr;
  }
}
/* =========================================================
   VISIT WORKSPACE — AUTO-HIDE MAC DOCK
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  body:has(
    .page[data-page="visit"].active
  )
  .mac-dock {
    bottom: 0 !important;

    transform:
      translate(
        -50%,
        calc(100% - 14px)
      ) !important;

    opacity: 0.82;

    transition:
      transform
        320ms
        cubic-bezier(
          0.16,
          1,
          0.3,
          1
        ),
      opacity
        180ms
        ease,
      background
        300ms
        ease !important;

    transition-delay:
      30s;

    will-change:
      transform;
  }

  body:has(
    .page[data-page="visit"].active
  )
  .mac-dock:hover,
  body:has(
    .page[data-page="visit"].active
  )
  .mac-dock:focus-within {
        transform:
      translate(
        -50%,
        0
      ) !important;

    opacity: 1;

    transition-delay:
      0ms;
  }

  body:has(
    .page[data-page="visit"].active
  )
  .mac-dock::after {
    content: "";

    position: absolute;
    top: 4px;
    left: 50%;

    width: 54px;
    height: 4px;

    transform:
      translateX(-50%);

    border-radius:
      999px;

    background:
      rgba(
        255,
        255,
        255,
        0.48
      );

    box-shadow:
      0 0 10px
      rgba(
        255,
        255,
        255,
        0.12
      );

    pointer-events: none;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  body:has(
    .page[data-page="visit"].active
  )
  .mac-dock {
    transition:
      none !important;
  }
}
/* =========================================================
   PUG AI — WIDER CLINICAL WORKSPACE
   ========================================================= */

@media (min-width: 1750px) {
  .visitWorkspace.hasPugAiWorkspace {
    max-width:
      1960px !important;
  }

  .visitWorkspaceGrid.hasPugAiWorkspace {
    grid-template-columns:
      minmax(680px, 720px)
      minmax(700px, 1fr)
      310px !important;

    gap:
      18px !important;
  }
}
/* =========================================================
   PUG AI — VISIT CONSULTATION CHAT
   ========================================================= */

.visitAiWorkspace
#visitAiConsultPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.visitAiWorkspace
.visitAiConsultMessages {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(
    62vh,
    820px
  );

  overflow-x: hidden;
  overflow-y: auto;

  margin-top: 14px;
  padding:
    3px 8px
    10px 2px;

  flex-direction: column;
  gap: 14px;

  scroll-behavior: smooth;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color:
    var(--ai-consult-accent)
    rgba(255, 255, 255, 0.05);
}

.visitAiWorkspace
.visitAiConsultMessages::-webkit-scrollbar {
  width: 7px;
}

.visitAiWorkspace
.visitAiConsultMessages::-webkit-scrollbar-track {
  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );
}

.visitAiWorkspace
.visitAiConsultMessages::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    var(--ai-consult-accent);
}

.visitAiWorkspace
.visitAiConsultMessage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.visitAiWorkspace
.visitAiConsultMessage.is-user {
  width: min(
    84%,
    560px
  );

  margin-left: auto;
  align-items: flex-end;
}

.visitAiWorkspace
.visitAiConsultMessage.is-assistant {
  width: 100%;
  align-items: stretch;
}

.visitAiWorkspace
.visitAiConsultMessageRole {
  margin:
    0 7px
    5px;

  color:
    var(--ai-consult-muted);

  font-size:
    11px;

  font-weight:
    750;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.visitAiWorkspace
.visitAiConsultUserBubble {
  padding:
    13px 15px;

  border:
    1px solid
    var(--ai-consult-border);

  border-radius:
    16px 16px
    5px 16px;

  background:
    linear-gradient(
      135deg,
      var(--ai-consult-accent),
      var(--ai-consult-accent-strong)
    );

  color:
    var(--ai-consult-button-text);

  box-shadow:
    0 10px 28px
    rgba(
      0,
      0,
      0,
      0.15
    );

  font-size:
    15px;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}

.visitAiWorkspace
.visitAiConsultAnswer {
  min-width: 0;

  border-radius:
    5px 16px
    16px 16px !important;
}

.visitAiWorkspace
.visitAiConsultAnswerLabel {
  margin-bottom:
    9px;

  color:
    var(--ai-consult-accent);

  font-size:
    11px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

/* Первый ответ остаётся подробным. */

.visitAiWorkspace
.visitAiConsultAnswer.is-full {
  box-shadow:
    0 14px 34px
    rgba(
      0,
      0,
      0,
      0.14
    );
}

/* Продолжения диалога компактнее. */

.visitAiWorkspace
.visitAiConsultAnswer.is-compact {
  padding:
    15px 16px !important;

  background:
    color-mix(
      in srgb,
      var(--ai-consult-surface-strong)
        92%,
      var(--ai-consult-accent)
        8%
    );
}

.visitAiWorkspace
.visitAiConsultAnswer.is-compact
.visitAiConsultDirectAnswer {
  font-size:
    15px !important;

  line-height:
    1.6 !important;
}

.visitAiWorkspace
.visitAiConsultAnswer.is-compact
.visitAiConsultSection {
  margin-top:
    13px !important;

  padding-top:
    12px !important;
}

.visitAiWorkspace
.visitAiConsultAnswer.is-compact
.visitAiConsultSection h4 {
  margin-bottom:
    7px !important;

  font-size:
    13px !important;

  line-height:
    1.4 !important;
}

.visitAiWorkspace
.visitAiConsultAnswer.is-compact
.visitAiConsultSection ul {
  padding-left:
    20px !important;
}

.visitAiWorkspace
.visitAiConsultAnswer.is-compact
.visitAiConsultSection li {
  margin:
    6px 0 !important;

  font-size:
    14px !important;

  line-height:
    1.55 !important;
}

.visitAiWorkspace
.visitAiConsultAnswer.is-compact
.visitAiConsultMeta {
  margin-top:
    12px !important;

  font-size:
    11px !important;
}

/* Поле ввода всегда остаётся внизу чата. */

.visitAiWorkspace
#visitAiConsultPanel
.visitAiConsultComposer {
  position: sticky;
  bottom: 0;
  z-index: 4;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    155px !important;

  gap:
    10px;

  align-items:
    stretch;

  margin-top:
    12px;

  padding-top:
    14px;

  border-top:
    1px solid
    var(--ai-consult-border);

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--ai-consult-surface-strong)
        18%
    );
}

.visitAiWorkspace
#visitAiConsultPanel
.visitAiConsultInput {
  min-height:
    78px !important;

  max-height:
    170px;

  padding:
    12px 14px !important;

  font-size:
    15px !important;

  line-height:
    1.5 !important;
}

.visitAiWorkspace
#visitAiConsultPanel
.visitAiConsultSend {
  width:
    100%;

  min-height:
    52px !important;

  padding:
    11px 14px !important;

  font-size:
    14px !important;
}

.visitAiWorkspace
.visitAiConsultComposerHint {
  margin-top:
    7px;

  color:
    var(--ai-consult-muted);

  font-size:
    10px;

  line-height:
    1.4;

  text-align:
    right;
}

/* Анимация ожидания ответа. */

.visitAiWorkspace
.visitAiConsultLoading {
  display: flex;
  align-items: center;
  gap: 5px;
}

.visitAiWorkspace
.visitAiConsultHistoryLoading {
  width: 100%;
  box-sizing: border-box;
}

.visitAiWorkspace
.visitAiConsultTypingDot {
  width: 6px;
  height: 6px;

  border-radius:
    999px;

  background:
    var(--ai-consult-accent);

  animation:
    visitAiConsultTyping
    1.15s
    infinite ease-in-out;
}

.visitAiWorkspace
.visitAiConsultTypingDot:nth-child(2) {
  animation-delay:
    0.14s;
}

.visitAiWorkspace
.visitAiConsultTypingDot:nth-child(3) {
  margin-right:
    5px;

  animation-delay:
    0.28s;
}

@keyframes visitAiConsultTyping {
  0%,
  60%,
  100% {
    transform:
      translateY(0);

    opacity:
      0.38;
  }

  30% {
    transform:
      translateY(-4px);

    opacity:
      1;
  }
}

.visitAiWorkspace
.visitAiConsultHistoryWarning {
  padding:
    10px 12px;

  border:
    1px solid
    rgba(
      245,
      158,
      11,
      0.32
    );

  border-radius:
    11px;

  background:
    rgba(
      245,
      158,
      11,
      0.10
    );

  color:
    #fde68a;

  font-size:
    12px;

  line-height:
    1.5;
}

/* На большом экране чат получает
   отдельную стабильную высоту. */

@media (min-width: 1551px) {
  .visitAiWorkspace
  #visitAiConsultPanel {
    height:
      calc(
        100vh - 285px
      );

    min-height:
      610px;

    max-height:
      1180px;
  }

  .visitAiWorkspace
  .visitAiConsultMessages {
    max-height:
      none;
  }
}

@media (max-width: 700px) {
  .visitAiWorkspace
  #visitAiConsultPanel
  .visitAiConsultComposer {
    grid-template-columns:
      1fr !important;
  }

  .visitAiWorkspace
  .visitAiConsultMessage.is-user {
    width:
      92%;
  }

  .visitAiWorkspace
  .visitAiConsultMessages {
    max-height:
      68vh;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .visitAiWorkspace
  .visitAiConsultMessages {
    scroll-behavior:
      auto;
  }

  .visitAiWorkspace
  .visitAiConsultTypingDot {
    animation:
      none;
  }
}
/* Компактные подробности
   уточняющего ответа PUG AI */

.visitAiWorkspace
.visitAiConsultFollowUpDetails {
  margin-top:
    12px;

  border-top:
    1px solid
    var(--ai-consult-border);
}

.visitAiWorkspace
.visitAiConsultFollowUpDetails
> summary {
  padding:
    11px 0 2px;

  color:
    var(--ai-consult-muted);

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1.4;

  cursor:
    pointer;

  user-select:
    none;

  list-style:
    none;
}

.visitAiWorkspace
.visitAiConsultFollowUpDetails
> summary::-webkit-details-marker {
  display:
    none;
}

.visitAiWorkspace
.visitAiConsultFollowUpDetails
> summary::after {
  content:
    "↓";

  display:
    inline-block;

  margin-left:
    7px;

  color:
    var(--ai-consult-accent);

  transition:
    transform
    160ms ease;
}

.visitAiWorkspace
.visitAiConsultFollowUpDetails[open]
> summary::after {
  transform:
    rotate(180deg);
}

.visitAiWorkspace
.visitAiConsultFollowUpDetailsBody {
  padding-top:
    3px;
}
/* Обычные сообщения продолжения чата */

.visitAiWorkspace
.visitAiConsultAnswer.is-chat-reply {
  padding:
    14px 16px !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    ) !important;

  border-radius:
    5px 17px
    17px 17px !important;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    ) !important;

  box-shadow:
    none !important;
}

.visitAiWorkspace
.visitAiConsultAnswer.is-chat-reply
.visitAiConsultDirectAnswer {
  font-size:
    15px !important;

  line-height:
    1.62 !important;

  font-weight:
    450 !important;
}

.visitAiWorkspace
.visitAiConsultAnswer.is-chat-reply
.visitAiConsultAnswerLabel {
  margin-bottom:
    7px;

  font-size:
    10px;
}
.visitAiWorkspace
.visitAiConsultDirectAnswer,
.visitAiWorkspace
.visitAiConsultUserBubble {
  margin: 0 !important;
  text-align: left !important;
  text-indent: 0 !important;
}
/* =====================================================
   PUGCRM — CALENDAR READABILITY V3
   Финальный приоритет над compact-calendar
===================================================== */

.page[data-page="calendar"]
.calendarHeader h2 {
  font-size: 28px !important;
  line-height: 1.15 !important;
}

.page[data-page="calendar"]
.calendarHeader .hint {
  margin-top: 5px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color:
    rgba(255, 255, 255, 0.72)
    !important;
}

.page[data-page="calendar"]
.calendarViewGroupLabel {
  padding: 0 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.page[data-page="calendar"]
.calendarHeaderActions button,
.page[data-page="calendar"]
.calendarTop button {
  min-height: 42px !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.page[data-page="calendar"]
.calendarDate {
  min-height: 42px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}

.page[data-page="calendar"]
.calendarDayGrid {
  grid-template-columns:
    76px
    minmax(0, 1fr)
    !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeHead,
.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  height: 66px !important;
  min-height: 66px !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeHead {
  font-size: 12px !important;
  font-weight: 800 !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto
    !important;

  column-gap: 11px !important;
  padding: 9px 13px !important;
}

.page[data-page="calendar"]
.calendarDoctorAvatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 14px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity span {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 550 !important;
  color:
    rgba(255, 255, 255, 0.58)
    !important;
}

.page[data-page="calendar"]
.calendarDoctorSpecializations
.calStaffSpecialization {
  min-height: 22px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeLabel {
  padding-right: 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color:
    rgba(255, 255, 255, 0.64)
    !important;
}

.page[data-page="calendar"]
.calendarTimelineEvent {
  min-height: 32px !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
}

.page[data-page="calendar"]
.calendarTimelineEventTime {
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
}

.page[data-page="calendar"]
.calendarTimelineEventTitle {
  margin-top: 3px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.page[data-page="calendar"]
.calendarTimelineStatus {
  min-height: 20px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
}

.page[data-page="calendar"]
.calendarTimelineHover {
  height: 26px !important;
  font-size: 11px !important;
  font-weight: 750 !important;

  transform:
    translateY(-13px)
    !important;
}

.page[data-page="calendar"]
.calendarShiftUnavailable span {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
}

/* Светлая тема */

body[data-theme="white"]
.page[data-page="calendar"]
.calendarHeader .hint,
body[data-theme="white"]
.page[data-page="calendar"]
.calendarDoctorTimelineIdentity span,
body[data-theme="white"]
.page[data-page="calendar"]
.calendarTimelineTimeLabel {
  color:
    rgba(28, 28, 30, 0.68)
    !important;
}
/* =====================================================
   PUGCRM — CALENDAR LARGE TYPOGRAPHY V2
===================================================== */

.page[data-page="calendar"]
.calendarHeader h2 {
  font-size: 32px !important;
}

.page[data-page="calendar"]
.calendarHeader .hint {
  font-size: 17px !important;
}

.page[data-page="calendar"]
.calendarViewGroupLabel {
  font-size: 14px !important;
}

.page[data-page="calendar"]
.calendarHeaderActions button,
.page[data-page="calendar"]
.calendarTop button {
  min-height: 46px !important;
  padding: 11px 17px !important;
  font-size: 16px !important;
}

.page[data-page="calendar"]
.calendarDate {
  min-height: 46px !important;
  min-width: 180px !important;
  font-size: 17px !important;
}

.page[data-page="calendar"]
.calendarDayGrid {
  grid-template-columns:
    86px
    minmax(0, 1fr)
    !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeHead,
.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  height: 74px !important;
  min-height: 74px !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeHead {
  font-size: 14px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineHead {
  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto
    !important;

  padding: 10px 15px !important;
}

.page[data-page="calendar"]
.calendarDoctorAvatar {
  width: 42px !important;
  height: 42px !important;
  font-size: 16px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity strong {
  font-size: 17px !important;
}

.page[data-page="calendar"]
.calendarDoctorTimelineIdentity span {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.page[data-page="calendar"]
.calendarDoctorSpecializations
.calStaffSpecialization {
  min-height: 25px !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
}

.page[data-page="calendar"]
.calendarTimelineTimeLabel {
  padding-right: 12px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

.page[data-page="calendar"]
.calendarTimelineEvent {
  min-height: 38px !important;
  padding: 7px 10px !important;
}

.page[data-page="calendar"]
.calendarTimelineEventTime {
  font-size: 13px !important;
}

.page[data-page="calendar"]
.calendarTimelineEventTitle {
  font-size: 16px !important;
}

.page[data-page="calendar"]
.calendarTimelineStatus {
  min-height: 23px !important;
  padding: 4px 7px !important;
  font-size: 11px !important;
}

.page[data-page="calendar"]
.calendarTimelineHover {
  height: 30px !important;
  font-size: 13px !important;

  transform:
    translateY(-15px)
    !important;
}

.page[data-page="calendar"]
.calendarShiftUnavailable span {
  font-size: 13px !important;
}

/* Верхняя панель */

.header-panel
#clinicNameTitle {
  font-size: 18px !important;
}

.header-panel
.user-profile-badge {
  font-size: 15px !important;
}

.header-panel
.user-profile-badge > div:last-child {
  font-size: 14px !important;
}

/* Нижнее меню */

.dock-menu
.menu-item a {
  min-height: 52px !important;
  padding: 12px 17px !important;
  font-size: 16px !important;
}

.dock-menu
.menu-item a
.dock-icon {
  font-size: 21px !important;
}
/* =========================================
   OWNERS — READABILITY V1
   ========================================= */

.page[data-page="owners"] h2 {
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.page[data-page="owners"] #btnAddOwner {
  min-height: 50px;
  padding: 13px 24px !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  border-radius: 11px !important;
}

/* Глобальный поиск на странице владельцев */
body:has(
  .page[data-page="owners"].active
)
.ownersGlobalSearchWrap {
  width: min(430px, 36vw) !important;
}

body:has(
  .page[data-page="owners"].active
)
#globalSearch {
  min-height: 48px !important;
  padding: 12px 18px 12px 44px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

body:has(
  .page[data-page="owners"].active
)
#globalSearch::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
  opacity: 1;
}

/* Контейнер таблицы */
.page[data-page="owners"]
.data-table-container {
  padding: 26px !important;
  border-radius: 20px !important;
}

/* Таблица */
.page[data-page="owners"]
.data-table {
  min-width: 1080px;
  font-size: 16px !important;
}

.page[data-page="owners"]
.data-table th {
  padding: 17px 20px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em;
  color: rgba(255, 255, 255, 0.78) !important;
}

.page[data-page="owners"]
.data-table td {
  padding: 20px !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Имя владельца */
.page[data-page="owners"]
#owners-table-body
td:first-child {
  font-size: 17px !important;
  font-weight: 750 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Телефон и адрес — немного контрастнее */
.page[data-page="owners"]
#owners-table-body
td:nth-child(3),

.page[data-page="owners"]
#owners-table-body
td:nth-child(5) {
  color: rgba(255, 255, 255, 0.74) !important;
}

/* Кнопки редактирования и удаления */
.page[data-page="owners"]
#owners-table-body
button {
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 9px !important;
  font-size: 17px !important;
  border-radius: 10px !important;
}

/* Расстояние между действиями */
.page[data-page="owners"]
#owners-table-body
td:last-child {
  white-space: nowrap;
}

.page[data-page="owners"]
#owners-table-body
td:last-child
button + button {
  margin-left: 7px;
}

@media (max-width: 850px) {
  .page[data-page="owners"] h2 {
    font-size: 27px !important;
  }

  .page[data-page="owners"]
  .data-table-container {
    padding: 16px !important;
  }

  .page[data-page="owners"]
  .data-table th {
    font-size: 13px !important;
  }

  .page[data-page="owners"]
  .data-table td {
    font-size: 15px !important;
  }
}
/* =========================================
   OWNERS — PREMIUM LIST V2
   ========================================= */

/* Раздел шире нижнего дока */
.main-content:has(
  .page[data-page="owners"].active
) {
  width: calc(100% - 48px) !important;
  max-width: 1680px !important;
}

/* Основная панель */
.page[data-page="owners"]
.data-table-container {
  padding: 18px 20px 24px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.1) !important;

  border-radius: 24px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.025)
    ) !important;

  box-shadow:
    0 24px 70px
      rgba(0, 0, 0, 0.24),
    inset 0 1px 0
      rgba(255, 255, 255, 0.045);
}

/* Отдельные карточки вместо плоских строк */
.page[data-page="owners"]
.data-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate !important;
  border-spacing: 0 9px !important;
}

.page[data-page="owners"]
.data-table thead th {
  padding:
    10px
    18px
    12px !important;

  border-bottom: 0 !important;
}

.page[data-page="owners"]
#owners-table-body tr {
  cursor: pointer;

  transition:
    transform 160ms ease,
    filter 160ms ease;
}

.page[data-page="owners"]
#owners-table-body td {
  padding:
    17px
    18px !important;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.055);

  background:
    rgba(255, 255, 255, 0.032);

  vertical-align: middle;

  transition:
    background 160ms ease,
    border-color 160ms ease;
}

.page[data-page="owners"]
#owners-table-body td:first-child {
  border-left:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius:
    15px
    0
    0
    15px;
}

.page[data-page="owners"]
#owners-table-body td:last-child {
  border-right:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius:
    0
    15px
    15px
    0;
}

.page[data-page="owners"]
#owners-table-body tr:hover {
  transform:
    translateY(-1px);
}

.page[data-page="owners"]
#owners-table-body tr:hover td {
  background:
    color-mix(
      in srgb,
      var(--accent-color) 9%,
      rgba(255, 255, 255, 0.045)
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 24%,
      rgba(255, 255, 255, 0.06)
    );
}

/* Питомцы */
.ownerPetsStack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 360px;
}

.ownerPetChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 38px;
  padding: 6px 11px 6px 7px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-color) 28%,
      rgba(255, 255, 255, 0.07)
    );

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--accent-color) 15%,
        rgba(255, 255, 255, 0.04)
      ),
      rgba(255, 255, 255, 0.025)
    );

  color:
    rgba(255, 255, 255, 0.88);
}

.ownerPetChipIcon {
  display: grid;
  place-items: center;

  width: 26px;
  height: 26px;

  border-radius: 8px;

  background:
    color-mix(
      in srgb,
      var(--accent-color) 20%,
      transparent
    );

  font-size: 14px;
}

.ownerPetChipText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.ownerPetChipText b {
  font-size: 14px;
  font-weight: 800;
}

.ownerPetBreed {
  max-width: 145px;
  margin-top: 3px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 11px;
  font-weight: 550;
}

.ownerPetMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 36px;
  min-height: 36px;
  padding: 5px 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.045);

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 13px;
  font-weight: 800;
}

.ownerPetsEmpty,
.ownerPhoneEmpty {
  color:
    rgba(255, 255, 255, 0.38);

  font-size: 14px;
}

/* Копирование номера */
.ownerPhoneCopy {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 38px !important;
  padding: 7px 10px !important;

  border:
    1px solid
    transparent !important;

  border-radius: 11px !important;

  background:
    transparent !important;

  color:
    rgba(255, 255, 255, 0.74) !important;

  cursor: copy;

  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.ownerPhoneCopy:hover {
  color:
    #ffffff !important;

  border-color:
    rgba(255, 255, 255, 0.1)
    !important;

  background:
    rgba(255, 255, 255, 0.055)
    !important;

  transform:
    translateY(-1px);
}

.ownerPhoneNumber {
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}

.ownerPhoneCopyLabel {
  padding: 4px 7px;

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.055);

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 10px;
  font-weight: 750;

  opacity: 0;

  transform:
    translateX(-4px);

  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.ownerPhoneCopy:hover
.ownerPhoneCopyLabel,

.ownerPhoneCopy.is-copied
.ownerPhoneCopyLabel {
  opacity: 1;

  transform:
    translateX(0);
}

.ownerPhoneCopy.is-copied {
  border-color:
    rgba(52, 211, 153, 0.28)
    !important;

  background:
    rgba(52, 211, 153, 0.1)
    !important;

  color:
    #86efac !important;
}

/* Действия справа */
.page[data-page="owners"]
.ownerActionsCell {
  width: 112px;
  text-align: right;
  white-space: nowrap;
}

.page[data-page="owners"]
.ownerActionBtn {
  width: 40px !important;
  height: 40px !important;

  border-radius: 11px !important;
}

/* Светлая тема */
body[data-theme="white"]
.page[data-page="owners"]
#owners-table-body td {
  background:
    rgba(255, 255, 255, 0.68);

  border-color:
    rgba(35, 35, 45, 0.07);
}

body[data-theme="white"]
.ownerPetChip {
  color: #25232d;
}

body[data-theme="white"]
.ownerPetBreed {
  color:
    rgba(30, 28, 40, 0.52);
}

body[data-theme="white"]
.ownerPhoneCopy {
  color:
    rgba(30, 28, 40, 0.74)
    !important;
}

@media (max-width: 1280px) {
  .main-content:has(
    .page[data-page="owners"].active
  ) {
    width: calc(100% - 24px) !important;
  }

  .ownerPhoneCopyLabel {
    display: none;
  }
}
/* =========================================
   PATIENT RECORD — READABILITY V1
   ========================================= */

/* Расширяем всю карточку пациента */
.main-content:has(
  .page[data-page="patient"].active
) {
  width: calc(100% - 48px) !important;
  max-width: 1680px !important;
}

/* Кнопки возврата */
.page[data-page="patient"]
#btnBackPatient,

.page[data-page="patient"]
#btnBackToProfile {
  min-height: 44px !important;
  padding: 10px 16px !important;

  border-radius: 11px !important;

  font-size: 15px !important;
  font-weight: 700 !important;
}

/* =========================================
   ГЛАВНАЯ КАРТОЧКА ПАЦИЕНТА
   ========================================= */

.page[data-page="patient"]
.patientRecordSummary {
  padding: 30px !important;
  margin-bottom: 24px !important;

  border-radius: 24px !important;

  box-shadow:
    0 24px 70px
      rgba(0, 0, 0, 0.22),
    inset 0 1px 0
      rgba(255, 255, 255, 0.05);
}

/* Надпись "Медична карта пацієнта" */
.page[data-page="patient"]
.patientRecordSummary
> div:first-child
> div:first-child
> div:first-child {
  margin-bottom: 7px !important;

  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;

  letter-spacing: 0.09em !important;
}

/* Имя пациента */
.page[data-page="patient"]
.patientRecordTitle {
  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em;
}

/* Вид животного и порода */
.page[data-page="patient"]
.patientRecordTitle
+ .patientStatusBadge {
  min-height: 34px !important;
  padding: 7px 11px !important;

  font-size: 13px !important;
}

.page[data-page="patient"]
.patientRecordSummary
> div:first-child
> div:first-child
> div:last-child {
  margin-top: 9px !important;

  font-size: 16px !important;
  line-height: 1.4 !important;

  opacity: 0.72 !important;
}

/* Кнопка нового визита */
.page[data-page="patient"]
#btnAddVisit {
  min-height: 50px !important;
  padding: 13px 22px !important;

  border-radius: 13px !important;

  font-size: 16px !important;
  font-weight: 800 !important;
}

/* =========================================
   СТАТИСТИКА ПАЦИЕНТА
   ========================================= */

.page[data-page="patient"]
.patientRecordStats {
  gap: 18px !important;
  margin-top: 28px !important;
}

.page[data-page="patient"]
.patientRecordStat {
  min-height: 92px !important;
  padding: 18px !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.065)
    !important;

  border-radius: 15px !important;

  background:
    rgba(0, 0, 0, 0.22)
    !important;
}

.page[data-page="patient"]
.patientRecordStat
> div:first-child {
  margin-bottom: 7px !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  letter-spacing: 0.045em;
}

.page[data-page="patient"]
.patientRecordStat
> div:last-child {
  margin-top: 0 !important;

  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
}

/* =========================================
   ВКЛАДКИ КАРТОЧКИ
   ========================================= */

.page[data-page="patient"]
.patient-tabs-nav {
  width: 100% !important;
  min-height: 58px;

  display: grid !important;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 7px !important;
  padding: 7px !important;

  border-radius: 16px !important;
}

.page[data-page="patient"]
.patient-tab-btn {
  min-height: 44px !important;
  padding: 11px 16px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px !important;

  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;

  white-space: nowrap;
}

/* =========================================
   AI-БЛОК
   ========================================= */

.page[data-page="patient"]
#patientTabContent
> section:has(
  [data-patient-ai-generate]
) {
  padding: 25px !important;
  margin-bottom: 22px !important;

  border-radius: 21px !important;
}

.page[data-page="patient"]
#patientTabContent
> section:has(
  [data-patient-ai-generate]
)
> div:first-child {
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;

  letter-spacing: 0.11em !important;
}

.page[data-page="patient"]
#patientTabContent
> section:has(
  [data-patient-ai-generate]
)
h3 {
  margin:
    9px
    0
    7px !important;

  font-size: 22px !important;
  line-height: 1.2 !important;
}

.page[data-page="patient"]
#patientTabContent
> section:has(
  [data-patient-ai-generate]
)
p {
  font-size: 15px !important;
  line-height: 1.5 !important;

  opacity: 0.7 !important;
}

.page[data-page="patient"]
[data-patient-ai-generate] {
  min-height: 46px !important;

  padding:
    11px
    17px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}

/* =========================================
   АКТИВНЫЕ ДИАГНОЗЫ
   ========================================= */

.page[data-page="patient"]
.patientDiagnosesPanel {
  padding: 24px !important;
  margin-bottom: 22px !important;

  border-radius: 21px !important;
}

.page[data-page="patient"]
.patientDiagnosesHeader {
  margin-bottom: 19px !important;
}

.page[data-page="patient"]
.patientDiagnosesHeader h3 {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

.page[data-page="patient"]
.patientDiagnosesHeader p {
  max-width: 760px;

  margin-top: 7px !important;

  font-size: 14px !important;
  line-height: 1.45 !important;
}

.page[data-page="patient"]
.patientDiagnosesHeaderActions button {
  min-height: 42px !important;
  padding: 9px 14px !important;

  font-size: 14px !important;
  font-weight: 750 !important;
}

.page[data-page="patient"]
.patientDiagnosesEmpty {
  min-height: 74px;
  padding: 18px !important;

  border-radius: 15px !important;
}

.page[data-page="patient"]
.patientDiagnosesEmpty
> span {
  width: 40px !important;
  height: 40px !important;

  font-size: 19px !important;
}

.page[data-page="patient"]
.patientDiagnosesEmpty strong {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.page[data-page="patient"]
.patientDiagnosesEmpty p {
  margin-top: 5px !important;

  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Карточки диагнозов */
.page[data-page="patient"]
.patientDiagnosisCard {
  padding: 17px 18px !important;

  border-radius: 15px !important;
}

.page[data-page="patient"]
.patientDiagnosisCard h4 {
  font-size: 16px !important;
}

.page[data-page="patient"]
.patientDiagnosisMeta {
  font-size: 13px !important;
}

.page[data-page="patient"]
.patientDiagnosisNote {
  font-size: 14px !important;
}

/* =========================================
   ДИНАМИКА ВЕСА
   ========================================= */

.page[data-page="patient"]
.patientWeightPanel {
  padding: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;

  border-radius: 21px !important;
}

.page[data-page="patient"]
.patientWeightHeader {
  margin-bottom: 17px !important;
}

.page[data-page="patient"]
.patientWeightHeader h3 {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

.page[data-page="patient"]
.patientWeightHeader p {
  margin-top: 6px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
}

.page[data-page="patient"]
.patientWeightAdd {
  min-height: 42px !important;
  padding: 9px 14px !important;

  font-size: 14px !important;
  font-weight: 750 !important;
}

.page[data-page="patient"]
.patientWeightBody {
  grid-template-columns:
    minmax(260px, 0.58fr)
    minmax(0, 1.42fr)
    !important;

  gap: 14px !important;
}

.page[data-page="patient"]
.patientWeightCurrent {
  min-height: 112px !important;
  padding: 17px 19px !important;

  border-radius: 16px !important;
}

.page[data-page="patient"]
.patientWeightCurrent
> span {
  font-size: 12px !important;
}

.page[data-page="patient"]
.patientWeightCurrent
> strong {
  margin-top: 7px !important;

  font-size: 30px !important;
}

.page[data-page="patient"]
.patientWeightCurrent small {
  margin-top: 9px !important;

  font-size: 13px !important;
}

.page[data-page="patient"]
.patientWeightRow {
  min-height: 48px !important;
  padding: 0 15px !important;

  border-radius: 12px !important;
}

.page[data-page="patient"]
.patientWeightRow span {
  font-size: 14px !important;
}

.page[data-page="patient"]
.patientWeightRow strong {
  font-size: 15px !important;
}

.page[data-page="patient"]
.patientWeightEmpty {
  min-height: 112px !important;

  font-size: 14px !important;
}

/* =========================================
   ВАКЦИНАЦИИ
   ========================================= */

.page[data-page="patient"]
.patientVaccinationsPanel {
  padding: 24px !important;
  margin-bottom: 22px !important;

  border-radius: 21px !important;
}

.page[data-page="patient"]
.patientVaccinationsEyebrow {
  font-size: 12px !important;
}

.page[data-page="patient"]
.patientVaccinationsHead h3 {
  font-size: 21px !important;
}

.page[data-page="patient"]
.patientVaccinationAddButton {
  min-height: 43px !important;
  padding: 9px 15px !important;

  font-size: 14px !important;
}

.page[data-page="patient"]
.patientVaccinationItem {
  min-height: 74px;
  padding: 16px !important;

  border-radius: 15px !important;
}

.page[data-page="patient"]
.patientVaccinationMain strong {
  font-size: 16px !important;
}

.page[data-page="patient"]
.patientVaccinationMain span,

.page[data-page="patient"]
.patientVaccinationMain small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.page[data-page="patient"]
.patientVaccinationNext span {
  font-size: 12px !important;
}

.page[data-page="patient"]
.patientVaccinationNext strong {
  font-size: 15px !important;
}

/* =========================================
   АДАПТИВ
   ========================================= */

@media (max-width: 1100px) {
  .main-content:has(
    .page[data-page="patient"].active
  ) {
    width: calc(100% - 24px) !important;
  }

  .page[data-page="patient"]
  .patient-tabs-nav {
    display: flex !important;

    overflow-x: auto;
    overflow-y: hidden;

    width: 100% !important;

    -webkit-overflow-scrolling:
      touch;
  }

  .page[data-page="patient"]
  .patient-tab-btn {
    flex: 0 0 auto;
  }

  .page[data-page="patient"]
  .patientRecordStats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }
}

@media (max-width: 700px) {
  .page[data-page="patient"]
  .patientRecordSummary {
    padding: 20px !important;
  }

  .page[data-page="patient"]
  .patientRecordSummary
  > div:first-child {
    flex-direction: column;
    gap: 18px;
  }

  .page[data-page="patient"]
  .patientRecordTitle {
    font-size: 31px !important;
  }

  .page[data-page="patient"]
  #btnAddVisit {
    width: 100%;
  }

  .page[data-page="patient"]
  .patientRecordStats {
    grid-template-columns:
      1fr !important;
  }

  .page[data-page="patient"]
  .patientWeightBody {
    grid-template-columns:
      1fr !important;
  }

  .page[data-page="patient"]
  .patientDiagnosesHeader,

  .page[data-page="patient"]
  .patientWeightHeader,

  .page[data-page="patient"]
  .patientVaccinationsHead {
    flex-direction: column;
  }
}
/* =========================================
   PATIENT LABS — READABILITY V1
   ========================================= */

.page[data-page="patient"]
.premiumLabsPage {
  gap: 24px !important;
}

/* Главный лабораторный блок */
.page[data-page="patient"]
.premiumLabsHero {
  min-height: 180px;
  padding: 30px 32px !important;

  border-radius: 25px !important;
}

.page[data-page="patient"]
.premiumLabsKicker {
  margin-bottom: 9px !important;

  font-size: 12px !important;
  line-height: 1.3 !important;
}

.page[data-page="patient"]
.premiumLabsHero h2 {
  font-size: 32px !important;
  line-height: 1.15 !important;
}

.page[data-page="patient"]
.premiumLabsHero p {
  max-width: 850px !important;

  margin-top: 11px !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
}

.page[data-page="patient"]
.premiumLabsSpecies {
  min-height: 38px;
  margin-top: 18px !important;
  padding: 9px 13px !important;

  font-size: 13px !important;
}

.page[data-page="patient"]
.premiumLabsHeroIcon {
  width: 82px !important;
  height: 82px !important;

  border-radius: 24px !important;
}

/* =========================================
   ВЫБОР ТИПА АНАЛИЗА
   ========================================= */

.page[data-page="patient"]
.premiumLabTypes {
  gap: 14px !important;
}

.page[data-page="patient"]
.premiumLabTypeButton {
  min-height: 98px !important;
  padding: 16px !important;

  gap: 13px !important;

  border-radius: 19px !important;
}

.page[data-page="patient"]
.premiumLabTypeIcon {
  width: 48px !important;
  height: 48px !important;

  border-radius: 15px !important;

  font-size: 21px !important;
}

.page[data-page="patient"]
.premiumLabTypeText strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.page[data-page="patient"]
.premiumLabTypeText small {
  margin-top: 5px !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
}

.page[data-page="patient"]
.premiumLabTypePlus {
  width: 32px !important;
  height: 32px !important;

  border-radius: 10px !important;

  font-size: 19px !important;
}

@media (min-width: 1500px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      repeat(5, minmax(0, 1fr))
      !important;
  }
}

/* =========================================
   ИСТОРИЯ ИССЛЕДОВАНИЙ
   ========================================= */

.page[data-page="patient"]
.premiumLabsHistory {
  padding: 25px !important;

  border-radius: 23px !important;
}

.page[data-page="patient"]
.premiumLabsHistoryHead {
  margin-bottom: 20px !important;
}

.page[data-page="patient"]
.premiumLabsHistoryHead h3 {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

.page[data-page="patient"]
.premiumLabsHistoryHead p {
  margin-top: 7px !important;

  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Карточка сохранённого анализа */
.page[data-page="patient"]
.labHistoryCard {
  padding: 23px 23px 21px !important;

  border-radius: 22px !important;
}

.page[data-page="patient"]
.labHistoryIcon {
  width: 52px !important;
  height: 52px !important;

  font-size: 23px !important;
}

.page[data-page="patient"]
.labHistoryKicker {
  font-size: 11px !important;
}

.page[data-page="patient"]
.labHistoryTitle {
  font-size: 26px !important;
  line-height: 1.15 !important;
}

.page[data-page="patient"]
.labHistorySubtitle {
  margin-top: 9px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
}

.page[data-page="patient"]
.labActionBtn {
  width: 43px !important;
  height: 43px !important;

  font-size: 16px !important;
}

/* Цифровая сводка */
.page[data-page="patient"]
.labHistoryStats {
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.page[data-page="patient"]
.labHistoryStat {
  min-width: 132px !important;
  padding: 12px 14px !important;

  border-radius: 14px !important;
}

.page[data-page="patient"]
.labHistoryStat span {
  margin-bottom: 6px !important;

  font-size: 11px !important;
}

.page[data-page="patient"]
.labHistoryStat strong {
  font-size: 23px !important;
}

/* Качественное исследование вместо четырёх нулей */
.labHistoryQualitative {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 20px;
  padding: 14px 16px;

  border:
    1px solid
    rgba(96, 211, 148, 0.17);

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(48, 180, 112, 0.09),
      rgba(255, 255, 255, 0.025)
    );
}

.labHistoryQualitativeIcon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  background:
    rgba(52, 211, 153, 0.13);

  color: #86efac;

  font-size: 18px;
  font-weight: 900;
}

.labHistoryQualitative strong,
.labHistoryQualitative small {
  display: block;
}

.labHistoryQualitative strong {
  color:
    rgba(255, 255, 255, 0.88);

  font-size: 15px;
  line-height: 1.3;
}

.labHistoryQualitative small {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 13px;
  line-height: 1.4;
}

/* Отдельные показатели анализа */
.page[data-page="patient"]
.labMetricsGrid {
  gap: 14px !important;
}

.page[data-page="patient"]
.labMetricCard {
  padding: 17px !important;

  border-radius: 17px !important;
}

.page[data-page="patient"]
.labMetricLabel {
  font-size: 15px !important;
}

.page[data-page="patient"]
.labMetricCode {
  font-size: 11px !important;
}

.page[data-page="patient"]
.labMetricStatus {
  padding: 6px 9px !important;

  font-size: 11px !important;
}

.page[data-page="patient"]
.labMetricValue {
  font-size: 30px !important;
}

.page[data-page="patient"]
.labMetricUnit {
  font-size: 13px !important;
}

.page[data-page="patient"]
.labMetricRef {
  font-size: 13px !important;
}

/* Комментарий врача */
.page[data-page="patient"]
.labHistoryComment {
  padding: 17px 18px !important;

  border-radius: 16px !important;
}

.page[data-page="patient"]
.labHistoryCommentLabel {
  margin-bottom: 9px !important;

  font-size: 12px !important;
}

.page[data-page="patient"]
.labHistoryCommentText {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.page[data-page="patient"]
.labHistoryOwnerExplanationText {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.page[data-page="patient"]
.labAiButton {
  min-height: 46px !important;
  padding: 11px 16px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Светлая тема */
body[data-theme="white"]
.labHistoryQualitative {
  border-color:
    rgba(22, 163, 74, 0.17);

  background:
    rgba(22, 163, 74, 0.055);
}

body[data-theme="white"]
.labHistoryQualitative strong {
  color: #1d1b28;
}

body[data-theme="white"]
.labHistoryQualitative small {
  color:
    rgba(29, 27, 40, 0.55);
}

/* Адаптив */
@media (max-width: 1250px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;
  }
}

@media (max-width: 850px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }
}

@media (max-width: 600px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      1fr !important;
  }

  .page[data-page="patient"]
  .premiumLabsHero {
    min-height: 0;
    padding: 21px !important;
  }

  .page[data-page="patient"]
  .premiumLabsHero h2 {
    font-size: 27px !important;
  }
}
/* =========================================
   PATIENT LABS — READABILITY V1
   ========================================= */

.page[data-page="patient"]
.premiumLabsPage {
  gap: 24px !important;
}

/* Главный лабораторный блок */
.page[data-page="patient"]
.premiumLabsHero {
  min-height: 180px;
  padding: 30px 32px !important;

  border-radius: 25px !important;
}

.page[data-page="patient"]
.premiumLabsKicker {
  margin-bottom: 9px !important;

  font-size: 12px !important;
  line-height: 1.3 !important;
}

.page[data-page="patient"]
.premiumLabsHero h2 {
  font-size: 32px !important;
  line-height: 1.15 !important;
}

.page[data-page="patient"]
.premiumLabsHero p {
  max-width: 850px !important;

  margin-top: 11px !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
}

.page[data-page="patient"]
.premiumLabsSpecies {
  min-height: 38px;
  margin-top: 18px !important;
  padding: 9px 13px !important;

  font-size: 13px !important;
}

.page[data-page="patient"]
.premiumLabsHeroIcon {
  width: 82px !important;
  height: 82px !important;

  border-radius: 24px !important;
}

/* =========================================
   ВЫБОР ТИПА АНАЛИЗА
   ========================================= */

.page[data-page="patient"]
.premiumLabTypes {
  gap: 14px !important;
}

.page[data-page="patient"]
.premiumLabTypeButton {
  min-height: 98px !important;
  padding: 16px !important;

  gap: 13px !important;

  border-radius: 19px !important;
}

.page[data-page="patient"]
.premiumLabTypeIcon {
  width: 48px !important;
  height: 48px !important;

  border-radius: 15px !important;

  font-size: 21px !important;
}

.page[data-page="patient"]
.premiumLabTypeText strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.page[data-page="patient"]
.premiumLabTypeText small {
  margin-top: 5px !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
}

.page[data-page="patient"]
.premiumLabTypePlus {
  width: 32px !important;
  height: 32px !important;

  border-radius: 10px !important;

  font-size: 19px !important;
}

@media (min-width: 1500px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      repeat(5, minmax(0, 1fr))
      !important;
  }
}

/* =========================================
   ИСТОРИЯ ИССЛЕДОВАНИЙ
   ========================================= */

.page[data-page="patient"]
.premiumLabsHistory {
  padding: 25px !important;

  border-radius: 23px !important;
}

.page[data-page="patient"]
.premiumLabsHistoryHead {
  margin-bottom: 20px !important;
}

.page[data-page="patient"]
.premiumLabsHistoryHead h3 {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

.page[data-page="patient"]
.premiumLabsHistoryHead p {
  margin-top: 7px !important;

  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Карточка сохранённого анализа */
.page[data-page="patient"]
.labHistoryCard {
  padding: 23px 23px 21px !important;

  border-radius: 22px !important;
}

.page[data-page="patient"]
.labHistoryIcon {
  width: 52px !important;
  height: 52px !important;

  font-size: 23px !important;
}

.page[data-page="patient"]
.labHistoryKicker {
  font-size: 11px !important;
}

.page[data-page="patient"]
.labHistoryTitle {
  font-size: 26px !important;
  line-height: 1.15 !important;
}

.page[data-page="patient"]
.labHistorySubtitle {
  margin-top: 9px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
}

.page[data-page="patient"]
.labActionBtn {
  width: 43px !important;
  height: 43px !important;

  font-size: 16px !important;
}

/* Цифровая сводка */
.page[data-page="patient"]
.labHistoryStats {
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.page[data-page="patient"]
.labHistoryStat {
  min-width: 132px !important;
  padding: 12px 14px !important;

  border-radius: 14px !important;
}

.page[data-page="patient"]
.labHistoryStat span {
  margin-bottom: 6px !important;

  font-size: 11px !important;
}

.page[data-page="patient"]
.labHistoryStat strong {
  font-size: 23px !important;
}

/* Качественное исследование вместо четырёх нулей */
.labHistoryQualitative {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 20px;
  padding: 14px 16px;

  border:
    1px solid
    rgba(96, 211, 148, 0.17);

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(48, 180, 112, 0.09),
      rgba(255, 255, 255, 0.025)
    );
}

.labHistoryQualitativeIcon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  background:
    rgba(52, 211, 153, 0.13);

  color: #86efac;

  font-size: 18px;
  font-weight: 900;
}

.labHistoryQualitative strong,
.labHistoryQualitative small {
  display: block;
}

.labHistoryQualitative strong {
  color:
    rgba(255, 255, 255, 0.88);

  font-size: 15px;
  line-height: 1.3;
}

.labHistoryQualitative small {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 13px;
  line-height: 1.4;
}

/* Отдельные показатели анализа */
.page[data-page="patient"]
.labMetricsGrid {
  gap: 14px !important;
}

.page[data-page="patient"]
.labMetricCard {
  padding: 17px !important;

  border-radius: 17px !important;
}

.page[data-page="patient"]
.labMetricLabel {
  font-size: 15px !important;
}

.page[data-page="patient"]
.labMetricCode {
  font-size: 11px !important;
}

.page[data-page="patient"]
.labMetricStatus {
  padding: 6px 9px !important;

  font-size: 11px !important;
}

.page[data-page="patient"]
.labMetricValue {
  font-size: 30px !important;
}

.page[data-page="patient"]
.labMetricUnit {
  font-size: 13px !important;
}

.page[data-page="patient"]
.labMetricRef {
  font-size: 13px !important;
}

/* Комментарий врача */
.page[data-page="patient"]
.labHistoryComment {
  padding: 17px 18px !important;

  border-radius: 16px !important;
}

.page[data-page="patient"]
.labHistoryCommentLabel {
  margin-bottom: 9px !important;

  font-size: 12px !important;
}

.page[data-page="patient"]
.labHistoryCommentText {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.page[data-page="patient"]
.labHistoryOwnerExplanationText {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.page[data-page="patient"]
.labAiButton {
  min-height: 46px !important;
  padding: 11px 16px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Светлая теыgit add style.css index.html && git commit -m "Increase laboratory workspace readability" && git pushма */
body[data-theme="white"]
.labHistoryQualitative {
  border-color:
    rgba(22, 163, 74, 0.17);

  background:
    rgba(22, 163, 74, 0.055);
}

body[data-theme="white"]
.labHistoryQualitative strong {
  color: #1d1b28;
}

body[data-theme="white"]
.labHistoryQualitative small {
  color:
    rgba(29, 27, 40, 0.55);
}

/* Адаптив */
@media (max-width: 1250px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;
  }
}

@media (max-width: 850px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }
}

@media (max-width: 600px) {
  .page[data-page="patient"]
  .premiumLabTypes {
    grid-template-columns:
      1fr !important;
  }

  .page[data-page="patient"]
  .premiumLabsHero {
    min-height: 0;
    padding: 21px !important;
  }

  .page[data-page="patient"]
  .premiumLabsHero h2 {
    font-size: 27px !important;
  }
}
/* =========================================
   PATIENT LABS — FINAL READABILITY BOOST
   ========================================= */

.premiumLabsPage {
  gap: 24px;
}

.patientProfileTabs button,
.patientProfileTabs .patientProfileTab {
  min-height: 52px;
  font-size: 15px !important;
  font-weight: 700;
}

.premiumLabsHero {
  padding: 30px 32px !important;
  min-height: 190px;
}

.premiumLabsKicker {
  font-size: 12px !important;
  letter-spacing: 0.13em;
}

.premiumLabsHeroText h2 {
  margin-top: 10px;
  font-size: 30px !important;
  line-height: 1.15;
}

.premiumLabsHeroText p {
  margin-top: 12px;
  max-width: 900px;
  font-size: 15px !important;
  line-height: 1.55;
}

.premiumLabsSpecies {
  margin-top: 18px;
  padding: 9px 14px !important;
  font-size: 13px !important;
}

.premiumLabsHeroIcon {
  width: 78px !important;
  height: 78px !important;
  font-size: 34px !important;
}


/* Типы анализов */

.premiumLabTypes {
  gap: 14px !important;
}

.premiumLabTypeButton {
  min-height: 98px !important;
  padding: 17px 16px !important;
  border-radius: 18px !important;
}

.premiumLabTypeIcon {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px;
  border-radius: 14px !important;
  font-size: 21px !important;
}

.premiumLabTypeText strong {
  display: block;
  font-size: 16px !important;
  line-height: 1.25;
  font-weight: 750;
}

.premiumLabTypeText span {
  display: block;
  margin-top: 5px;
  font-size: 13px !important;
  line-height: 1.35;
}

.premiumLabTypePlus {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px;
  font-size: 20px !important;
}


/* История исследований */

.premiumLabsHistory {
  padding: 28px 24px !important;
  border-radius: 22px !important;
}

.premiumLabsHistoryHead h3 {
  font-size: 22px !important;
  line-height: 1.25;
}

.premiumLabsHistoryHead p {
  margin-top: 6px;
  font-size: 14px !important;
}

.labHistoryCard {
  border-radius: 20px !important;
}

.labHistoryHeader {
  padding: 22px 22px 18px !important;
}

.labHistoryIcon {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px;
  font-size: 22px !important;
}

.labHistoryKicker {
  font-size: 11px !important;
  letter-spacing: 0.12em;
}

.labHistoryTitle {
  margin-top: 5px;
  font-size: 24px !important;
  line-height: 1.2;
}

.labHistorySubtitle {
  margin-top: 7px;
  font-size: 14px !important;
}

.labHistoryStat {
  min-height: 72px;
  padding: 13px 15px !important;
}

.labHistoryStat span {
  font-size: 11px !important;
}

.labHistoryStat strong {
  margin-top: 5px;
  font-size: 22px !important;
}


/* Показатели и текст результатов */

.labMetricCard {
  padding: 17px !important;
  border-radius: 16px !important;
}

.labMetricLabel {
  font-size: 15px !important;
  line-height: 1.35;
}

.labMetricCode,
.labMetricRef,
.labMetricUnit {
  font-size: 12.5px !important;
}

.labMetricValue {
  font-size: 22px !important;
}

.labMetricStatus {
  font-size: 11px !important;
}

.labHistoryComment,
.labHistoryOwnerExplanation,
.labHistoryQualitative {
  padding: 18px 20px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.labHistoryComment strong,
.labHistoryOwnerExplanation strong,
.labHistoryQualitative strong {
  font-size: 14px !important;
}

.labHistoryActions button,
.labAiButton {
  min-height: 42px;
  font-size: 14px !important;
}


/* На больших экранах оставляем пять карточек,
   но даём тексту нормальную ширину */

@media (min-width: 1500px) {
  .premiumLabTypes {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1200px) {
  .premiumLabTypes {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .premiumLabsHero {
    padding: 23px 20px !important;
  }

  .premiumLabsHeroText h2 {
    font-size: 26px !important;
  }

  .premiumLabTypes {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .premiumLabTypeButton {
    min-height: 94px !important;
  }
}

@media (max-width: 520px) {
  .premiumLabTypes {
    grid-template-columns: 1fr !important;
  }
}
/* LAB TYPE CARD — readable descriptions */

.premiumLabTypeText strong {
  font-size: 17px !important;
  line-height: 1.25 !important;
}

.premiumLabTypeText small {
  display: block !important;
  margin-top: 6px !important;

  color:
    rgba(
      238,
      232,
      248,
      0.62
    ) !important;

  font-size: 14px !important;
  font-weight: 520 !important;
  line-height: 1.4 !important;
}

.premiumLabTypeButton {
  min-height: 108px !important;
  padding: 18px 16px !important;
}
/* =========================================
   PATIENT FILES — READABILITY UPGRADE
   ========================================= */

.patientFilesArchive {
  font-size: 15px;
}


/* Шапка раздела */

.patientFilesArchiveHead {
  margin-bottom: 28px !important;
}

.patientFilesKicker {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  letter-spacing: 0.12em;
}

.patientFilesArchiveHead h2 {
  font-size: 32px !important;
  line-height: 1.15;
}

.patientFilesArchiveHead p {
  max-width: 850px;
  margin-top: 10px !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color:
    rgba(
      255,
      255,
      255,
      0.58
    ) !important;
}

.patientFilesAddButton {
  min-height: 52px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}


/* Счётчики */

.patientFilesStats {
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.patientFilesStats > div {
  min-height: 90px;
  padding: 19px 20px !important;
  border-radius: 17px !important;
}

.patientFilesStats span {
  margin-bottom: 7px !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
}

.patientFilesStats strong {
  font-size: 28px !important;
  line-height: 1.1;
}


/* Фильтры */

.patientFilesFilters {
  gap: 10px !important;
  margin-bottom: 28px !important;
  padding: 8px !important;
  border-radius: 17px !important;
}

.patientFilesFilter {
  min-height: 46px !important;
  gap: 8px !important;
  padding: 0 15px !important;
  border-radius: 12px !important;
}

.patientFilesFilter span {
  font-size: 17px !important;
}

.patientFilesFilter b {
  font-size: 14px !important;
}

.patientFilesFilter em {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
}


/* Пустое состояние */

.patientFilesEmpty {
  min-height: 370px !important;
  padding: 44px !important;
  border-radius: 22px !important;
}

.patientFilesEmptyIcon {
  width: 78px !important;
  height: 78px !important;
  margin-bottom: 18px !important;
  border-radius: 22px !important;
  font-size: 32px !important;
}

.patientFilesEmpty h3 {
  font-size: 23px !important;
  line-height: 1.25;
}

.patientFilesEmpty p {
  max-width: 560px;
  margin: 10px 0 22px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color:
    rgba(
      255,
      255,
      255,
      0.56
    ) !important;
}


/* Заголовки групп файлов */

.patientFilesGroup {
  margin-bottom: 34px !important;
}

.patientFilesGroupHead {
  margin-bottom: 16px !important;
}

.patientFilesGroupHead h3 {
  font-size: 21px !important;
}

.patientFilesGroupHead strong {
  font-size: 13px !important;
}


/* Карточки загруженных файлов */

.patientFilesGrid {
  gap: 17px !important;
}

.patientFileCard {
  border-radius: 20px !important;
}

.patientFilePreview {
  height: 190px !important;
}

.patientFileCategory {
  top: 13px !important;
  left: 13px !important;
  min-height: 32px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
}

.patientFileCardBody {
  padding: 19px !important;
}

.patientFileCardBody h4 {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.patientFileMeta {
  gap: 7px 14px !important;
  margin-top: 9px !important;
  font-size: 13px !important;
  color:
    rgba(
      255,
      255,
      255,
      0.52
    ) !important;
}

.patientFileNote {
  min-height: 46px !important;
  margin-top: 13px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color:
    rgba(
      255,
      255,
      255,
      0.65
    ) !important;
}

.patientFileCardActions {
  gap: 9px !important;
  margin-top: 17px !important;
}

.patientFileOpenButton,
.patientFileActionButton {
  min-height: 44px !important;
  border-radius: 12px !important;
}

.patientFileOpenButton {
  font-size: 13px !important;
}

.patientFileActionButton {
  width: 44px !important;
  flex-basis: 44px !important;
  font-size: 16px !important;
}


/* Окно добавления файла */

.patientFileModal {
  width: min(860px, 100%) !important;
  padding: 30px !important;
}

.patientFileModalClose {
  width: 42px !important;
  height: 42px !important;
}

.patientFileModalHead {
  margin-bottom: 28px !important;
}

.patientFileModalIcon {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  font-size: 25px !important;
}

.patientFileModalHead h2 {
  font-size: 27px !important;
}

.patientFileModalHead p {
  margin-top: 7px !important;
  font-size: 15px !important;
  line-height: 1.45;
}

.patientFileModalGrid {
  gap: 19px !important;
}

.patientFileModalField {
  gap: 9px !important;
}

.patientFileModalField > span {
  font-size: 14px !important;
}

.patientFileModalField input,
.patientFileModalField select,
.patientFileModalField textarea {
  font-size: 15px !important;
  border-radius: 14px !important;
}

.patientFileModalField input,
.patientFileModalField select {
  min-height: 52px !important;
  padding: 0 15px !important;
}

.patientFileModalField textarea {
  min-height: 112px !important;
  padding: 14px 15px !important;
}

.patientFileUploadZone {
  grid-template-columns:
    210px minmax(0, 1fr) !important;
  gap: 22px !important;
  margin-top: 24px !important;
  padding: 20px !important;
}

.patientFileUploadPreview {
  height: 180px !important;
}

.patientFileUploadEmpty small,
.patientFileUploadDocument span {
  max-width: 180px !important;
  font-size: 13px !important;
}

.patientFileUploadInfo h3 {
  font-size: 19px !important;
}

.patientFileUploadInfo p {
  margin: 9px 0 17px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.patientFileUploadChoose {
  min-height: 46px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
}

.patientFileModalCancel,
.patientFileModalSave {
  min-height: 48px !important;
  padding: 0 21px !important;
  font-size: 14px !important;
}


/* Адаптивность */

@media (max-width: 1100px) {
  .patientFilesStats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .patientFilesGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .patientFilesArchiveHead {
    gap: 18px;
  }

  .patientFilesArchiveHead h2 {
    font-size: 28px !important;
  }

  .patientFilesStats,
  .patientFilesGrid {
    grid-template-columns: 1fr;
  }

  .patientFileUploadZone {
    grid-template-columns: 1fr !important;
  }

  .patientFileUploadPreview {
    height: 210px !important;
  }
}

@media (max-width: 520px) {
  .patientFileModal {
    padding: 20px !important;
  }

  .patientFilesEmpty {
    min-height: 320px !important;
    padding: 28px 20px !important;
  }

  .patientFilesFilter {
    width: 100%;
  }
}
/* =========================================
   PATIENT DOCUMENTS — READABILITY UPGRADE
   ========================================= */

.patientDocumentsPage {
  font-size: 15px;
}

.patientDocumentsLoading {
  padding: 52px 28px !important;
  font-size: 15px !important;
}


/* Шапка раздела */

.patientDocumentsHead {
  gap: 28px !important;
  margin-bottom: 28px !important;
}

.patientDocumentsKicker {
  margin-bottom: 9px !important;
  font-size: 13px !important;
  letter-spacing: 0.12em;
}

.patientDocumentsHead h2 {
  font-size: 32px !important;
  line-height: 1.15;
}

.patientDocumentsHead p {
  max-width: 850px !important;
  margin-top: 10px !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color:
    var(
      --text-muted,
      rgba(255, 255, 255, 0.58)
    ) !important;
}


/* Счётчик доступных документов */

.patientDocumentsSummary {
  min-width: 240px !important;
  padding: 20px 22px !important;
  border-radius: 19px !important;
}

.patientDocumentsSummary span {
  font-size: 12px !important;
  line-height: 1.3;
}

.patientDocumentsSummary strong {
  margin-top: 6px !important;
  font-size: 30px !important;
  line-height: 1.1;
}

.patientDocumentsSummary small {
  margin-top: 7px !important;
  font-size: 13px !important;
  line-height: 1.4;
}


/* Сетка документов */

.patientDocumentsGrid {
  gap: 20px !important;
}

.patientDocumentCard {
  min-height: 340px !important;
  padding: 27px !important;
  border-radius: 24px !important;
}

.patientDocumentCard.is-disabled {
  min-height: 275px !important;
}


/* Верх карточки */

.patientDocumentCardTop {
  gap: 15px !important;
}

.patientDocumentIcon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 17px !important;
  font-size: 25px !important;
}

.patientDocumentBadge {
  padding: 8px 12px !important;
  font-size: 11px !important;
  line-height: 1.2;
}


/* Название и описание */

.patientDocumentCard h3 {
  margin: 22px 0 10px !important;
  font-size: 22px !important;
  line-height: 1.25;
}

.patientDocumentCard > p {
  min-height: 70px !important;
  margin-bottom: 21px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color:
    var(
      --text-muted,
      rgba(255, 255, 255, 0.6)
    ) !important;
}


/* Выбор визита */

.patientDocumentSelectLabel > span {
  margin-bottom: 9px !important;
  font-size: 13px !important;
  font-weight: 750;
}

.patientDocumentSelect {
  min-height: 52px !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
}


/* Кнопка формирования PDF */

.patientDocumentCreate {
  min-height: 50px !important;
  gap: 9px !important;
  margin-top: 13px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}


/* Пустые и недоступные состояния */

.patientDocumentEmpty,
.patientDocumentNotice {
  padding: 18px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color:
    var(
      --text-muted,
      rgba(255, 255, 255, 0.58)
    ) !important;
}


/* Подсказка под документами */

.patientDocumentsHint {
  gap: 12px !important;
  margin-top: 20px !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color:
    var(
      --text-muted,
      rgba(255, 255, 255, 0.58)
    ) !important;
}


/* Планшет */

@media (max-width: 1100px) {
  .patientDocumentCard {
    min-height: 325px !important;
  }
}


/* Мобильная версия */

@media (max-width: 820px) {
  .patientDocumentsHead {
    gap: 18px !important;
  }

  .patientDocumentsHead h2 {
    font-size: 28px !important;
  }

  .patientDocumentsSummary {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .patientDocumentsGrid {
    grid-template-columns: 1fr !important;
  }

  .patientDocumentCard {
    min-height: auto !important;
    padding: 22px !important;
  }

  .patientDocumentCard > p {
    min-height: 0 !important;
  }
}

@media (max-width: 520px) {
  .patientDocumentsHead p {
    font-size: 15px !important;
  }

  .patientDocumentIcon {
    width: 52px !important;
    height: 52px !important;
  }

  .patientDocumentCard h3 {
    font-size: 20px !important;
  }
}
/* =========================================================
   VISIT WORKSPACE — READABLE DESKTOP UI
   ========================================================= */

.visitWorkspace.hasPugAiWorkspace {
  width: min(
    calc(100% - 40px),
    1900px
  ) !important;
  max-width: 1900px !important;
}


/* ---------- Заголовок визита ---------- */

.visitBackPatientButton {
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.visitWorkspaceEyebrow {
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: .14em !important;
}

.visitWorkspaceHeader h1 {
  font-size: clamp(
    42px,
    3vw,
    52px
  ) !important;
  line-height: 1.04 !important;
}

.visitWorkspaceMeta {
  margin-top: 10px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.visitWorkspaceStatus,
.visitWorkspaceDate {
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}


/* ---------- Основная сетка ---------- */

@media (min-width: 1551px) {
  .visitWorkspaceGrid.hasPugAiWorkspace {
    grid-template-columns:
      minmax(540px, 590px)
      minmax(760px, 1fr)
      360px !important;

    gap: 22px !important;
    align-items: start !important;
  }

  .visitWorkspaceSidebar {
    width: 360px !important;
    min-width: 360px !important;
  }
}


/* ---------- Медицинские секции ---------- */

.visitSectionCard {
  padding: 28px !important;
  border-radius: 24px !important;
}

.visitSectionHead {
  gap: 15px !important;
  margin-bottom: 24px !important;
}

.visitSectionIcon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 14px !important;
  font-size: 21px !important;
}

.visitSectionHead h2 {
  font-size: 23px !important;
  line-height: 1.2 !important;
}

.visitSectionHead p {
  margin-top: 5px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.visitSectionTotal {
  min-width: 126px !important;
  padding: 12px 15px !important;
}

.visitSectionTotal span {
  font-size: 11px !important;
}

.visitSectionTotal strong {
  font-size: 19px !important;
}


/* ---------- Поля формы ---------- */

.visitMedicalGrid {
  gap: 20px !important;
}

.visitField {
  gap: 8px !important;
}

.visitField > span,
.visitPickerModern label > span {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

.visitControl,
.visitPickerModern input,
.visitPickerModern select {
  min-height: 52px !important;
  padding: 13px 15px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

textarea.visitControl {
  padding: 15px 16px !important;
  line-height: 1.58 !important;
  resize: vertical !important;
}

.visitControl::placeholder,
.visitPickerModern input::placeholder {
  font-size: 15px !important;
  opacity: .68 !important;
}

.visitTextareaShort {
  min-height: 92px !important;
}

.visitTextareaLarge {
  min-height: 145px !important;
}

.visitTextareaClinical {
  min-height: 135px !important;
}

.visitTextareaProblems {
  min-height: 115px !important;
}

.visitTextareaDiagnosis {
  min-height: 112px !important;
}

.visitTextareaAction {
  min-height: 115px !important;
}

.visitTextareaPrescription {
  min-height: 150px !important;
}

.visitTextareaOwner {
  min-height: 125px !important;
}

.visitTextareaFollow {
  min-height: 100px !important;
}

.visitWeightControl > span {
  font-size: 13px !important;
}


/* ---------- Показатели состояния ---------- */

.visitVitalsBlock {
  padding: 19px !important;
  border-radius: 17px !important;
}

.visitVitalsTitle {
  margin-bottom: 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}

.visitVitalsGrid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr))
    !important;

  gap: 14px !important;
}

.visitVitalField {
  gap: 7px !important;
}

.visitVitalField > span {
  min-height: 18px !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.visitVitalField .visitControl {
  min-height: 52px !important;
  font-size: 15.5px !important;
}

.visitVitalField
.visitWeightControl > span {
  font-size: 12px !important;
}


/* ---------- Диагноз и действия ---------- */

.visitAssessmentBlock {
  padding: 20px !important;
  border-radius: 17px !important;
}

.visitAssessmentGrid,
.visitActionGrid {
  gap: 17px !important;
}


/* ---------- Коммуникация с владельцем ---------- */

.visitOwnerCommunication {
  padding: 21px !important;
  border-radius: 18px !important;
}

.visitOwnerCommunicationHead {
  margin-bottom: 18px !important;
}

.visitOwnerCommunicationHead strong {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.visitOwnerCommunicationHead span {
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.visitOwnerCommunicationBadge {
  padding: 7px 11px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
}

.visitOwnerFollowGrid {
  gap: 16px !important;
}


/* ---------- Услуги и препараты ---------- */

.visitPickerModern {
  gap: 14px !important;
}

.visitPickerModern label {
  gap: 8px !important;
}

.visitServicePickerButton {
  min-height: 56px !important;
  padding: 9px 14px !important;
  border-radius: 14px !important;
}

.visitServicePickerIcon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 11px !important;
  font-size: 18px !important;
}

.visitServicePickerText strong {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.visitServicePickerText small {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.visitServicePickerArrow {
  font-size: 15px !important;
}

.visitAddLineButton {
  min-height: 54px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.visitLinesModern {
  gap: 11px !important;
}

.visitLine {
  min-height: 58px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

.visitLineMain strong {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.visitLineMain span {
  margin-top: 3px !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

.visitLineTotal {
  font-size: 15px !important;
}

.visitLineDelete {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  font-size: 16px !important;
}

.visitLinesEmpty {
  padding: 22px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}


/* ---------- Правая панель визита ---------- */

.visitSummaryCard {
  padding: 24px !important;
  border-radius: 22px !important;
}

.visitSummaryHead {
  margin-bottom: 18px !important;
}

.visitSummaryHead > span,
.visitSummaryHead strong {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.visitSummaryHead b {
  padding: 6px 9px !important;
  font-size: 10px !important;
}

.visitSummaryPatient {
  gap: 13px !important;
  padding: 15px !important;
  border-radius: 15px !important;
}

.visitSummaryAvatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 13px !important;
}

.visitSummaryPatient strong {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.visitSummaryPatient span {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.visitSummaryRows {
  gap: 12px !important;
  padding: 18px 0 !important;
}

.visitSummaryRows span {
  font-size: 13px !important;
}

.visitSummaryRows strong {
  font-size: 14px !important;
}

.visitSummaryGrand {
  padding: 17px 0 !important;
}

.visitSummaryGrand span {
  font-size: 14px !important;
  font-weight: 750 !important;
}

.visitSummaryGrand strong {
  font-size: 32px !important;
  line-height: 1 !important;
}

.visitPaymentState {
  padding: 16px !important;
  border-radius: 15px !important;
}

.visitPaymentStateTop,
.visitPaymentStateMoney {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.visitPaymentStateTop strong,
.visitPaymentStateTop b,
.visitPaymentStateMoney strong,
.visitPaymentStateMoney b {
  font-size: 14px !important;
}

.visitPaymentButton,
.visitSavePrimary,
.visitCompleteButton,
.visitPrintButton {
  min-height: 52px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.visitSummaryHint {
  margin-top: 18px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}


/* ---------- Левая панель PUG AI ---------- */

.visitAiWorkspaceHead {
  padding: 22px !important;
}

.visitAiWorkspaceBrandIcon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

.visitAiWorkspaceBrand strong {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

.visitAiWorkspaceBrand span {
  margin-top: 4px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.visitAiWorkspaceTabs {
  padding: 4px !important;
}

.visitAiWorkspaceTab {
  min-height: 52px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}

.visitAiWorkspaceBody {
  padding: 18px !important;
}

.visitAiWorkspace
#visitAiIntakePanel {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.visitAiWorkspace
#visitAiIntakePanel textarea {
  min-height: 150px !important;
  padding: 15px !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.visitAiWorkspace
#visitAiIntakePanel button {
  min-height: 50px !important;
  padding: 0 17px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}


/* ---------- Окно выбора услуги ---------- */

.visitServicePickerEyebrow {
  font-size: 12px !important;
}

.visitServicePickerHeader h2 {
  font-size: 26px !important;
}

.visitServicePickerHeader p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.visitServicePickerSearch input {
  min-height: 52px !important;
  font-size: 15px !important;
}

.visitServicePickerCategories button {
  min-height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

.visitServicePickerCard {
  min-height: 70px !important;
  padding: 14px !important;
}

.visitServicePickerCardMain strong {
  font-size: 15px !important;
}

.visitServicePickerCardMain span {
  font-size: 12.5px !important;
}

.visitServicePickerCardPrice strong {
  font-size: 16px !important;
}

.visitServicePickerEmpty {
  font-size: 14px !important;
}


/* ---------- Адаптивность ---------- */

@media (max-width: 1120px) {
  .visitVitalsGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }
}

@media (max-width: 820px) {
  .visitSectionCard {
    padding: 22px !important;
  }

  .visitWorkspaceHeader h1 {
    font-size: 38px !important;
  }

  .visitWorkspaceMeta {
    font-size: 15px !important;
  }
}

@media (max-width: 560px) {
  .visitWorkspace.hasPugAiWorkspace {
    width: min(
      calc(100% - 20px),
      1900px
    ) !important;
  }

  .visitSectionCard {
    padding: 18px !important;
  }

  .visitVitalsGrid {
    grid-template-columns:
      1fr
      !important;
  }

  .visitControl,
  .visitPickerModern input,
  .visitPickerModern select {
    font-size: 16px !important;
  }
}
/* =========================================================
   DISCHARGE — CLINICAL SUMMARY
   ========================================================= */

.disModernClinicalGrid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 9px;
}

.disModernClinicalGrid
.disModernSection {
  min-width: 0;
  margin-top: 0 !important;
}

.disModernSection--warning {
  border-color:
    #fecaca !important;

  background:
    #fff7f7 !important;
}

.disModernSection--warning
.disModernSectionTitle {
  color:
    #b42318 !important;
}

@media (max-width: 720px) {
  .disModernClinicalGrid {
    grid-template-columns:
      1fr;
  }
}
.disModernBulletList {
  margin: 0;
  padding-left: 17px;
  color: #374151;
  font-size: 11px;
  line-height: 1.42;
}

.disModernBulletList li {
  padding-left: 2px;
}

.disModernBulletList li + li {
  margin-top: 5px;
}

.disModernBulletList li::marker {
  color: var(
    --disAccent,
    #0f8f87
  );
  font-size: 1.05em;
}
.disModernBulletList--prescriptions li {
  break-inside: avoid;
  page-break-inside: avoid;
}
/* =====================================================
   CALENDAR — QUICK PATIENT FORM READABILITY
===================================================== */

#visitNewPatientBox {
  font-size:
    16px !important;
}

#visitNewPatientBox
.pugQuickPatientTitle {
  font-size:
    20px !important;

  line-height:
    1.25 !important;

  font-weight:
    800 !important;
}

#visitNewPatientBox
.pugQuickPatientSub {
  margin-top:
    5px !important;

  font-size:
    14px !important;

  line-height:
    1.4 !important;
}

#visitNewPatientBox
.pugQuickGroupTitle {
  margin-bottom:
    6px !important;

  font-size:
    17px !important;

  line-height:
    1.3 !important;

  font-weight:
    800 !important;
}

#visitNewPatientBox
.pugVisitField {
  gap:
    8px !important;
}

#visitNewPatientBox
.pugVisitField > span {
  font-size:
    14px !important;

  line-height:
    1.3 !important;

  font-weight:
    700 !important;

  color:
    rgba(
      255,
      255,
      255,
      .72
    ) !important;
}

#visitNewPatientBox
.pugVisitInput {
  min-height:
    50px !important;

  padding:
    0 15px !important;

  font-size:
    16px !important;

  line-height:
    1.35 !important;
}

#visitNewPatientBox
.pugVisitInput::placeholder {
  font-size:
    15px !important;

  color:
    rgba(
      255,
      255,
      255,
      .34
    ) !important;
}

#visitNewPatientBox
.pugQuickPatientActions button,
#visitNewPatientCreate {
  min-height:
    46px !important;

  padding:
    0 18px !important;

  font-size:
    15px !important;

  font-weight:
    750 !important;
}
/* =====================================================
   CALENDAR — COMPACT TIMELINE EVENTS
===================================================== */

.page[data-page="calendar"]
.calendarTimelineEvent.is-compact {
  padding:
    5px 28px 5px 10px !important;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny {
  min-height:
    34px !important;

  padding:
    4px 28px 4px 10px !important;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineEventContent {
  height:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineEventHead {
  flex:
    0 0 auto;

  min-width:
    auto;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineEventTime {
  flex:
    none;

  font-size:
    11px !important;

  line-height:
    1 !important;

  white-space:
    nowrap;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineStatus {
  display:
    none !important;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineEventTitle {
  flex:
    1;

  min-width:
    0;

  margin-top:
    0 !important;

  font-size:
    14px !important;

  line-height:
    1.1 !important;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.page[data-page="calendar"]
.calendarTimelineEvent.is-tiny
.calendarTimelineEventNote {
  display:
    none !important;
}
/* Calendar translations: allow longer labels without clipping controls. */
.monthScheduleEditorTabs,
.monthScheduleEditorFooter,
.calEditFooter,
.calEditFooterActions {
  flex-wrap: wrap;
}
.monthScheduleEditorTabs button,
.monthScheduleEditorFooter button,
.calEditFooter button,
#visitModal .pugVisitFoot button {
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
  line-height: 1.35;
}
.monthScheduleEditorFooter button,
.calEditFooter button {
  padding: 10px 18px;
}
.page[data-page="calendar"] .calendarDate {
  text-align: center;
  white-space: normal;
}
@media (max-width: 650px) {
  .monthScheduleEditorFooter button {
    min-width: 0;
    flex: 1 1 130px;
  }
  .monthScheduleEditorTabs button {
    flex: 1 1 120px;
  }
}
#calendarEventModal .calEditModal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#calendarEventModal .calEditHeader,
#calendarEventModal .calEditPatient,
#calendarEventModal .calEditFooter {
  flex-shrink: 0;
}
#calendarEventModal .calEditBody {
  min-height: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
@media (max-width: 900px) {
  .monthScheduleEditorColumns { display: none; }
  .monthScheduleEditorRow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .monthScheduleEditorPerson,
  .monthScheduleEditorStatus {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .monthScheduleEditorTime { min-width: 0; }
  .monthScheduleEditorTime > span {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .65);
  }
  .monthScheduleRepeatGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .monthScheduleRepeatDaysField { grid-column: auto; }
  .monthScheduleRepeatDays { flex-wrap: wrap; }
}
/* OWNER MODAL — inline validation */

#ownerModal .pugVisitField.has-error > span {
  color: #ff9bad;
}

#ownerModal .pugVisitField.has-error .pugVisitInput {
  border-color: rgba(255, 92, 125, 0.9) !important;
  background: rgba(255, 65, 105, 0.07) !important;
  box-shadow:
    0 0 0 3px rgba(255, 65, 105, 0.1),
    0 0 20px rgba(255, 65, 105, 0.12) !important;
}

#ownerModal .pugOwnerFieldError {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #ff9bad;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  animation: ownerFieldErrorIn 0.18s ease-out;
}

#ownerModal .pugOwnerFieldError::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 76, 115, 0.85);
  font-size: 10px;
  font-weight: 900;
}

@keyframes ownerFieldErrorIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* OWNER MODAL — international phone */

#ownerModal .pugOwnerPhoneRow {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}

#ownerModal .pugOwnerPhoneCountry {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  border-radius: 14px;
  outline: none;
  cursor: pointer;
  background: rgba(10, 7, 25, 0.5);
  color: #fff;
  font: inherit;
  font-size: 14px;
  color-scheme: dark;
  transition: 0.2s ease;
}

#ownerModal .pugOwnerPhoneCountry:focus {
  border-color: rgba(168, 85, 247, 0.78);
  box-shadow:
    0 0 0 4px rgba(168, 85, 247, 0.13),
    0 0 22px rgba(168, 85, 247, 0.13);
}

#ownerModal .pugOwnerPhoneCountry option {
  background: #171027;
  color: #fff;
}

body[data-theme="white"]
#ownerModal .pugOwnerPhoneCountry {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: #1c1c1e;
  color-scheme: light;
}

@media (max-width: 560px) {
  #ownerModal .pugOwnerPhoneRow {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 8px;
  }

  #ownerModal .pugOwnerPhoneCountry {
    padding: 0 8px;
    font-size: 13px;
  }
}
/* PUG CRM — mobile foundation v1. Append at the end of style.css. */

#crmImportPanel .clinicSettingsPanelHead > div {
  display: block;
  min-width: 0;
}

.clinicSettingsPage,
.clinicSettingsPanel,
.clinicSettingsPanelHead > div,
.clinicSettingsPanelHead > div > div,
.clinicSettingsField,
.clinicPersonalBlock {
  min-width: 0;
}

.clinicSettingsPage p,
.clinicSettingsUser,
.clinicSettingsLogoutRow,
#crmImportPanel [role="status"] {
  overflow-wrap: anywhere;
}

#crmImportPanel .crmImportTableWrap {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

#crmImportPanel .crmImportPagination {
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .app-container {
    min-width: 0;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .main-content {
    width: 100%;
    min-width: 0;
    margin: 0 auto !important;
    padding: 20px 16px !important;
  }

  .mac-dock {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .mac-dock .dock-menu {
    width: max-content !important;
    min-width: 100%;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0;
    padding: 0;
  }

  .mac-dock .menu-item {
    flex: 0 0 auto;
  }

  .mac-dock .dock-menu .menu-item a {
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .mac-dock .dock-menu .menu-item a .dock-text {
    display: block !important;
    white-space: nowrap;
  }

  .mac-dock .dock-menu .menu-item a .dock-icon {
    font-size: 20px !important;
    line-height: 1.2;
  }

  .clinicSettingsPage {
    padding-bottom: 24px;
  }
}

@media (max-width: 640px) {
  .main-content {
    padding: 16px 10px !important;
  }

  .header-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center !important;
  }

  .header-panel > .search-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
  }

  .header-panel .user-profile-badge {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .header-panel input,
  .clinicSettingsPage input,
  .clinicSettingsPage select,
  .clinicSettingsPage textarea,
  .addPetModal input,
  .addPetModal select,
  .addPetModal textarea {
    font-size: 16px !important;
  }

  .clinicSettingsPanel {
    padding: 16px;
  }

  .clinicSettingsPanelHead > div {
    gap: 10px;
    width: 100%;
  }

  .clinicThemeChoice,
  .clinicSettingsPage button,
  #crmImportPanel button {
    min-height: 44px !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #crmImportPanel .crmImportActions > button {
    flex: 1 1 180px;
  }

  #crmImportPanel input[type="file"] {
    height: auto;
    min-height: 48px;
    padding: 10px;
  }

  .addPetModalOverlay {
    padding: 10px !important;
  }

  .addPetModal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 20px 16px !important;
    overscroll-behavior-y: contain;
  }

  .addPetSpeciesSelector {
    grid-template-columns: 1fr !important;
  }

  .addPetModalActions {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--pet-modal-bg-2, var(--pet-modal-bg-1));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .addPetModalActions > button {
    flex: 1 1 160px;
    min-height: 44px;
    height: auto;
    white-space: normal;
  }
}
/* PUG CRM — адаптация экрана входа */
@media (max-width: 900px) {
  .auth-overlay {
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: 16px;
    padding-top: max(
      16px,
      env(safe-area-inset-top, 0px)
    );
    padding-bottom: max(
      16px,
      env(safe-area-inset-bottom, 0px)
    );
    overflow-y: auto;
    align-items: flex-start;
  }

  .auth-glass-panel {
    width: 100%;
    max-width: 720px;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    margin: auto;
  }

  .auth-art-zone,
  .auth-form-zone {
    min-width: 0;
  }

  .auth-form-zone {
    width: 100%;
    padding: 28px;
  }

  .auth-header h1 {
    font-size: 28px;
    overflow-wrap: anywhere;
  }

  .auth-header p,
  .auth-error-msg {
    overflow-wrap: anywhere;
  }

  .auth-field input,
  .auth-field select,
  .auth-submit-btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 16px !important;
  }

  .auth-submit-btn {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .auth-art-zone {
    display: none;
  }

  .auth-glass-panel {
    max-width: 440px;
    border-radius: 22px;
  }

  .auth-form-zone {
    padding: 24px 20px;
  }
}
/* PUG CRM — mobile calendar v1 */
@media (max-width: 640px) {
  .page[data-page="calendar"] {
    min-width: 0;
    width: 100%;
  }

  .page[data-page="calendar"] .calendarCard {
    width: 100%;
    min-width: 0;
    padding: 14px 12px !important;
    border-radius: 20px;
  }

  .page[data-page="calendar"] .calendarHeader {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .page[data-page="calendar"] .calendarHeader > div {
    width: 100%;
    min-width: 0;
  }

  .page[data-page="calendar"] .calendarHeader h2 {
    font-size: 24px !important;
    margin: 0;
  }

  .page[data-page="calendar"] .calendarHeader .hint {
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
  }

  .page[data-page="calendar"] .calendarHeaderActions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .page[data-page="calendar"] .calendarViewSwitcher {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .page[data-page="calendar"] .calendarViewGroup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 4px;
  }

  .page[data-page="calendar"] .calendarViewGroupLabel {
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .page[data-page="calendar"] .calendarHeaderActions button,
  .page[data-page="calendar"] .calendarViewSwitcher button {
    width: 100%;
    min-width: 0;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    white-space: normal;
    justify-content: center;
  }

  .page[data-page="calendar"] .calendarTop {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    margin: 14px 0 !important;
  }

  .page[data-page="calendar"] .calendarTop button {
    width: 44px;
    min-width: 0;
    min-height: 44px !important;
    padding: 8px !important;
  }

  .page[data-page="calendar"] .calendarDate {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 6px !important;
    font-size: 14px !important;
    overflow-wrap: anywhere;
  }

  .page[data-page="calendar"] .calendarMainArea {
    min-width: 0;
  }

  .page[data-page="calendar"] .calendarDayGrid {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    border-radius: 14px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .page[data-page="calendar"] .calendarTimelineTimeColumn {
    min-width: 0;
  }

  .page[data-page="calendar"] .calendarDoctorsTimelineGrid {
    grid-auto-columns: 100% !important;
    min-width: 0;
  }

  .page[data-page="calendar"] .calendarDoctorTimelineColumn {
    min-width: 0 !important;
  }

  .page[data-page="calendar"] .calendarDoctorTimelineHead {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: 88px !important;
    min-height: 88px !important;
    gap: 4px 8px !important;
    padding: 8px !important;
  }

  .page[data-page="calendar"] .calendarDoctorAvatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .page[data-page="calendar"] .calendarDoctorTimelineIdentity strong {
    font-size: 15px !important;
  }

  .page[data-page="calendar"] .calendarDoctorTimelineIdentity span {
    font-size: 11px !important;
  }

  .page[data-page="calendar"] .calendarDoctorSpecializations {
    display: flex;
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-content: flex-start;
    overflow: hidden;
  }

  .page[data-page="calendar"] .calendarTimelineTimeHead {
    height: 88px !important;
    min-height: 88px !important;
  }

  .page[data-page="calendar"] .calendarTimelineTimeHead,
  .page[data-page="calendar"] .calendarTimelineTimeLabel {
    font-size: 12px !important;
  }

  .page[data-page="calendar"] .calendarTimelineTimeLabel {
    padding-right: 6px !important;
  }
}
/* PUG CRM — calendar height and landscape v2 */
@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .page[data-page="calendar"] .calendarDayGrid {
    max-height: none !important;
  }
}

@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .main-content {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  .page[data-page="calendar"] .calendarCard {
    min-width: 0;
    padding: 12px !important;
  }

  .page[data-page="calendar"] .calendarHeader {
    display: block;
  }

  .page[data-page="calendar"] .calendarHeader h2 {
    font-size: 22px !important;
  }

  .page[data-page="calendar"] .calendarHeader .hint {
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  .page[data-page="calendar"] .calendarHeaderActions {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
  }

  .page[data-page="calendar"] .calendarViewSwitcher {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
  }

  .page[data-page="calendar"] .calendarViewGroup {
    min-width: 0;
    gap: 4px;
  }

  .page[data-page="calendar"] .calendarViewGroupLabel {
    font-size: 10px !important;
    padding: 0 4px !important;
  }

  .page[data-page="calendar"] .calendarHeaderActions button {
    min-width: 0;
    min-height: 44px !important;
    padding: 8px !important;
    font-size: 13px !important;
    white-space: normal;
  }

  .page[data-page="calendar"] .calendarDayGrid {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .page[data-page="calendar"] .calendarTimelineTimeColumn {
    min-width: 0;
  }

  .page[data-page="calendar"] .calendarDoctorsTimelineGrid {
    grid-auto-columns: minmax(280px, 1fr) !important;
  }

  .page[data-page="calendar"] .calendarDoctorTimelineColumn {
    min-width: 280px !important;
  }
}
/* PUG CRM — mobile appointment form v1 */
@media (max-width: 760px),
       (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  #visitModal.pugVisitOverlay.open {
    padding: 10px;
  }

  #visitModal .pugVisitModal {
    width: 100% !important;
    max-width: 620px !important;
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 0 !important;
    border-radius: 20px;
    min-width: 0;
    min-height: 0;
  }

  #visitModal .pugVisitHead {
    flex: 0 0 auto;
    gap: 10px;
    padding: 14px !important;
    margin-bottom: 0;
  }

  #visitModal .pugVisitHeadLeft,
  #visitModal .pugVisitHeadLeft > div:last-child {
    min-width: 0;
  }

  #visitModal .pugVisitHeadLeft {
    gap: 10px;
  }

  #visitModal .pugVisitIcon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 20px;
  }

  #visitModal .pugVisitTitle {
    font-size: 20px !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  #visitModal .pugVisitClose {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  #visitModal .pugVisitBody {
    display: flex !important;
    flex-direction: column;
    grid-template-areas: none;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 12px !important;
    padding: 10px 12px 16px !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  #visitModal .pugVisitBody > .pugVisitSection {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px;
  }

  #visitModal .pugVisitDetailsBlock {
    display: block !important;
  }

  #visitModal .pugVisitFieldsGrid,
  #visitModal .pugVisitMedicalGrid,
  #visitModal .pugQuickPatientGrid,
  #visitModal .pugQuickVaccinationBlock,
  #visitModal #visitNewPetRabiesDetails,
  #visitModal #visitNewPetGeneralVaccinationDetails {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #visitModal .pugVisitFieldsGrid {
    margin-top: 12px;
  }

  #visitModal .pugVisitField,
  #visitModal .pugSearchWrap,
  #visitModal .pugQuickGroup {
    min-width: 0;
  }

  #visitModal .pugSectionTitle {
    margin-bottom: 10px !important;
    font-size: 15px;
  }

  #visitModal input:not([type="hidden"]),
  #visitModal select,
  #visitModal textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }

  #visitModal .pugPatientResults {
    min-height: 0;
    max-height: 180px;
  }

  #visitModal .appointmentTemplateSelector {
    min-height: 60px !important;
    padding: 10px !important;
    grid-template-columns: 32px minmax(0, 1fr) 20px !important;
  }

  #visitModal .appointmentTemplateSelectorIcon {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
  }

  #visitModal .pugVisitFoot {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 8px;
    padding: 10px 12px !important;
    position: static !important;
  }

  #visitModal .pugVisitFoot button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px;
    padding: 10px !important;
    font-size: 14px;
  }

  #visitModal .pugQuickPatientActions {
    flex-wrap: wrap;
  }

  #visitModal .pugQuickPatientActions button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 140px;
  }

  #visitModal [hidden] {
    display: none !important;
  }
}
/* PUG CRM — mobile team schedule v1 */
@media (max-width: 760px),
       (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .page[data-page="calendar"] .monthPlannerLayout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .page[data-page="calendar"] .monthPlannerMain,
  .page[data-page="calendar"] .monthShiftDrawer {
    min-width: 0;
    width: 100% !important;
    max-width: 100%;
  }

  .page[data-page="calendar"] .monthShiftDrawer {
    position: static !important;
    top: auto;
    flex: none !important;
    z-index: auto;
  }

  .page[data-page="calendar"] .monthGrid,
  .page[data-page="calendar"] .monthWeekHead {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: visible;
  }

  .page[data-page="calendar"] .monthWeekHead {
    margin: 0 0 8px;
  }

  .page[data-page="calendar"] .monthWeekHead div {
    min-width: 0;
    font-size: 11px;
  }

  .page[data-page="calendar"] .monthDay {
    min-width: 0;
    min-height: 58px !important;
    padding: 5px 2px !important;
    border-radius: 10px !important;
  }

  .page[data-page="calendar"] .monthDayTop {
    justify-content: center;
    gap: 0;
    margin-bottom: 5px;
  }

  .page[data-page="calendar"] .monthDayNum {
    width: 26px;
    height: 26px;
    font-size: 14px;
    border-radius: 8px;
  }

  .page[data-page="calendar"] .monthStaffList {
    flex-direction: row;
    justify-content: center;
    gap: 3px;
    flex-wrap: wrap;
  }

  .page[data-page="calendar"] .monthStaffPill {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    padding: 0 !important;
    border-radius: 50%;
    border-left-width: 7px !important;
    border-left-color: var(--accent-color, #7C5CFF) !important;
    font-size: 0 !important;
  }

  .page[data-page="calendar"] .monthEmptyShift,
  .page[data-page="calendar"] .monthVisitCount,
  .page[data-page="calendar"] .monthMore {
    display: none;
  }

  .page[data-page="calendar"] .monthDrawerPlaceholder {
    min-height: 110px;
    padding: 14px !important;
    gap: 6px;
  }

  .page[data-page="calendar"] .monthDrawerPlaceholderIcon {
    font-size: 24px;
  }

  .page[data-page="calendar"] .monthDrawerPlaceholderTitle {
    font-size: 18px;
  }

  .page[data-page="calendar"] .monthShiftDrawer .hint {
    font-size: 13px;
  }

  .page[data-page="calendar"] .monthDaySummary {
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  .page[data-page="calendar"] .monthDaySummaryStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page[data-page="calendar"] .monthDaySummaryPerson {
    min-width: 0;
    flex-wrap: wrap;
  }

  .page[data-page="calendar"] .monthDaySummaryPersonMain {
    min-width: 0;
    flex: 1 1 140px;
  }

  .page[data-page="calendar"] .monthDaySummaryManage,
  .page[data-page="calendar"] .monthDaySummaryOpenDay {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  #monthScheduleEditorOverlay {
    padding: 10px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorModal {
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    min-width: 0;
    border-radius: 20px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead {
    padding: 14px;
    gap: 10px;
    flex-shrink: 0;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead h2 {
    font-size: 20px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead p {
    font-size: 13px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorClose {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorTabs {
    padding: 10px 12px;
    flex-shrink: 0;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorColumns {
    display: none;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorRows,
  #monthScheduleEditorOverlay .monthScheduleRepeatContent {
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorPerson,
  #monthScheduleEditorOverlay .monthScheduleEditorStatus {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #monthScheduleEditorOverlay input,
  #monthScheduleEditorOverlay select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatDaysField {
    grid-column: auto;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatDays {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatDays button {
    min-width: 0;
    min-height: 44px;
    padding: 4px;
    overflow-wrap: anywhere;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatIntro > div,
  #monthScheduleEditorOverlay .monthScheduleRepeatIntro > div > div {
    min-width: 0;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatIntro > div > span {
    flex: 0 0 38px;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatIntro,
  #monthScheduleEditorOverlay .monthScheduleRepeatField,
  #monthScheduleEditorOverlay .monthScheduleRepeatHint {
    overflow-wrap: anywhere;
  }

  #monthScheduleEditorOverlay [hidden] {
    display: none !important;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorFooter {
    padding: 10px 12px;
    gap: 8px;
    flex-shrink: 0;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorFooter button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 120px;
  }
}
/* PUG CRM — compact owners and shift editor v1 */
@media (max-width: 760px),
       (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  body:has(.page[data-page="owners"].active) .header-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 16px !important;
  }

  body:has(.page[data-page="owners"].active) .top-logo {
    font-size: 18px !important;
  }

  body:has(.page[data-page="owners"].active) .user-profile-badge {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
  }

  body:has(.page[data-page="owners"].active) #clinicNameTitle {
    font-size: 14px !important;
    overflow-wrap: anywhere;
  }

  body:has(.page[data-page="owners"].active) .user-profile-badge > div:last-child {
    font-size: 11px !important;
  }

  body:has(.page[data-page="owners"].active) .ownersGlobalSearchWrap {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body:has(.page[data-page="owners"].active) #globalSearch {
    width: 100%;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  .page[data-page="owners"] > div:first-child {
    gap: 12px;
    margin-bottom: 14px !important;
  }

  .page[data-page="owners"] h2 {
    min-width: 0;
    margin: 0;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .page[data-page="owners"] #btnAddOwner {
    flex: 0 0 auto;
    max-width: 48%;
    min-height: 44px;
    padding: 8px 12px !important;
    font-size: 13px !important;
    white-space: normal;
    line-height: 1.2;
  }

  .page[data-page="owners"] .data-table-container {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
  }

  .page[data-page="owners"] .data-table,
  .page[data-page="owners"] #owners-table-body {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border-spacing: 0 !important;
  }

  .page[data-page="owners"] .data-table thead {
    display: none;
  }

  .page[data-page="owners"] #owners-table-body tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas: "name actions" "pets actions" "phone phone";
    align-items: center;
    gap: 3px 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.1));
    border-radius: 0;
    transform: none !important;
  }

  .page[data-page="owners"] #owners-table-body td {
    display: block;
    min-width: 0;
    width: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow-wrap: anywhere;
    color: var(--text-main, #fff) !important;
  }

  .page[data-page="owners"] #owners-table-body td:first-child {
    grid-area: name;
    color: var(--text-main, #fff) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  .page[data-page="owners"] #owners-table-body td:nth-child(2) {
    grid-area: pets;
  }

  .page[data-page="owners"] #owners-table-body td:nth-child(3) {
    grid-area: phone;
  }

  .page[data-page="owners"] #owners-table-body td:nth-child(4),
  .page[data-page="owners"] #owners-table-body td:nth-child(5) {
    display: none;
  }

  .page[data-page="owners"] #owners-table-body td:last-child:not(:first-child) {
    grid-area: actions;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-self: start;
  }

  .page[data-page="owners"] #owners-table-body td[colspan] {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 14px !important;
  }

  .page[data-page="owners"] #owners-table-body .ownerActionBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  .page[data-page="owners"] .ownerPetsStack {
    max-width: 100%;
    gap: 4px;
  }

  .page[data-page="owners"] .ownerPetChip {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    gap: 4px;
  }

  .page[data-page="owners"] .ownerPetChipIcon,
  .page[data-page="owners"] .ownerPetBreed {
    display: none;
  }

  .page[data-page="owners"] .ownerPetChipText b,
  .page[data-page="owners"] .ownerPetsEmpty {
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .page[data-page="owners"] .ownerPetMore {
    min-width: 0;
    min-height: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-size: 12px;
  }

  .page[data-page="owners"] #owners-table-body .ownerPhoneCopy {
    max-width: 100%;
    min-height: 44px !important;
    padding: 4px 0 !important;
  }

  .page[data-page="owners"] .ownerPhoneNumber {
    font-size: 13px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body:has(.page[data-page="owners"].active) #globalSearch::placeholder {
    color: var(--text-muted, rgba(255,255,255,.55)) !important;
  }

  .page[data-page="owners"] .ownerPetsEmpty,
  .page[data-page="owners"] .ownerPhoneEmpty,
  .page[data-page="owners"] .ownerPetMore {
    color: var(--text-muted, rgba(255,255,255,.55));
  }

  .page[data-page="owners"] .ownerPhoneIcon {
    font-size: 14px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead {
    padding: 12px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead > div {
    min-width: 0;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead h2 {
    margin: 4px 0 0;
    font-size: 18px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead > div > span {
    font-size: 10px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorHead p,
  #monthScheduleEditorOverlay .monthScheduleRepeatIntro {
    display: none;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorTabs button {
    min-width: 0;
    min-height: 40px;
    padding: 8px;
    font-size: 13px;
    white-space: normal;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatContent {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    min-width: 0;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatGrid > :first-child,
  #monthScheduleEditorOverlay .monthScheduleRepeatDaysField {
    grid-column: 1 / -1;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatField {
    min-width: 0;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatField > span {
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1.3;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatField input,
  #monthScheduleEditorOverlay .monthScheduleRepeatField select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 8px;
    font-size: 16px;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatDays {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatDays button {
    min-width: 0;
    min-height: 44px;
    padding: 4px 0;
    font-size: 12px;
  }

  #monthScheduleEditorOverlay .monthScheduleRepeatHint {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 11px;
    overflow-wrap: anywhere;
  }

  #monthScheduleEditorOverlay .monthScheduleEditorFooter button {
    font-size: 13px;
    padding: 8px 12px;
    min-height: 44px;
  }
}
/* PUG CRM — compact mobile owner profile v1 */
@media (max-width: 760px),
       (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  body:has(.page[data-page="owner"].active) .header-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 16px !important;
  }

  body:has(.page[data-page="owner"].active) .top-logo {
    font-size: 18px !important;
  }

  body:has(.page[data-page="owner"].active) .user-profile-badge {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
  }

  body:has(.page[data-page="owner"].active) #clinicNameTitle {
    font-size: 14px !important;
    overflow-wrap: anywhere;
  }

  body:has(.page[data-page="owner"].active) .user-profile-badge > div:last-child {
    font-size: 11px !important;
  }

  body:has(.page[data-page="owner"].active) .ownersGlobalSearchWrap {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body:has(.page[data-page="owner"].active) #globalSearch {
    width: 100%;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  .page[data-page="owner"] {
    width: 100%;
    min-width: 0;
    padding-inline: 0;
  }

  .page[data-page="owner"] .ownerDashboardHero {
    width: 100% !important;
    min-width: 0;
    padding: 0 0 16px !important;
    margin: 0 0 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .page[data-page="owner"] .ownerDashTop {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    align-items: start !important;
  }

  .page[data-page="owner"] .ownerDashAvatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 24px !important;
    box-shadow: none !important;
  }

  .page[data-page="owner"] .ownerDashInfo {
    min-width: 0;
  }

  .page[data-page="owner"] .ownerDashKicker {
    display: none;
  }

  .page[data-page="owner"] .ownerDashName {
    font-size: 24px !important;
    line-height: 1.15;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
  }

  .page[data-page="owner"] .ownerDashContacts {
    margin-top: 6px !important;
    gap: 4px !important;
    flex-direction: column;
    align-items: flex-start;
  }

  .page[data-page="owner"] .ownerDashContacts span {
    min-width: 0;
    max-width: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .page[data-page="owner"] .ownerDashStatus {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    align-items: stretch;
  }

  .page[data-page="owner"] .ownerDashBadge {
    grid-column: 1 / -1;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--accent-color, #7C5CFF) !important;
    font-size: 12px !important;
    font-weight: 600;
  }

  .page[data-page="owner"] .ownerHeroEdit,
  .page[data-page="owner"] .ownerHeroBack {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 10px;
    white-space: normal;
    line-height: 1.3;
  }

  .page[data-page="owner"] .ownerDashStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px !important;
    gap: 8px !important;
  }

  .page[data-page="owner"] .ownerDashStat {
    min-width: 0;
    min-height: 60px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .page[data-page="owner"] .ownerDashStat span {
    font-size: 10px !important;
    letter-spacing: 0;
  }

  .page[data-page="owner"] .ownerDashStat strong {
    margin-top: 5px;
    font-size: 18px !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .page[data-page="owner"] .ownerDashStat:last-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 40px !important;
  }

  .page[data-page="owner"] .ownerDashStat:last-child strong {
    margin-top: 0;
    font-size: 14px !important;
  }

  .page[data-page="owner"] .ownerPetsHeader {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
  }

  .page[data-page="owner"] .ownerPetsHeader h3 {
    min-width: 0;
    font-size: 15px;
    color: var(--text-main, #fff);
  }

  .page[data-page="owner"] #btnAddPet {
    width: auto;
    max-width: 48%;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: normal;
    line-height: 1.3;
  }

  .page[data-page="owner"] #petsList.pets-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
  }

  .page[data-page="owner"] .pet-card {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    min-width: 0;
    min-height: 72px;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .page[data-page="owner"] .pet-card::before {
    display: none;
  }

  .page[data-page="owner"] .pet-card > div {
    min-width: 0;
  }

  .page[data-page="owner"] .pet-card > div:first-child > div:first-child {
    font-size: 16px !important;
    line-height: 1.3;
    color: var(--text-main, #fff);
    overflow-wrap: anywhere;
  }

  .page[data-page="owner"] .pet-card > div:first-child > div:last-child {
    font-size: 12px !important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .page[data-page="owner"] .pet-card > div:last-child {
    padding-left: 0 !important;
    gap: 4px !important;
  }

  .page[data-page="owner"] .pet-card .iconBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    flex: 0 0 44px;
  }
}
/* PUG CRM — complete mobile patient workflow, v2 */
@media screen and (max-width: 700px), screen and (max-width: 950px) and (max-height: 500px) {
  .main-content:has(.page[data-page="patient"].active) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px 120px !important;
    box-sizing: border-box;
  }
  .main-content:has(.page[data-page="patient"].active) .header-panel {
    gap: 10px !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    min-height: 44px !important;
  }
  .main-content:has(.page[data-page="patient"].active) .top-logo { font-size: 18px !important; }
  .main-content:has(.page[data-page="patient"].active) .user-profile-badge {
    padding: 4px 0 !important; background: none !important; border: 0 !important;
    border-radius: 0 !important; min-width: 0 !important; max-width: 55%;
  }
  .main-content:has(.page[data-page="patient"].active) #clinicNameTitle { font-size: 14px !important; overflow-wrap: anywhere; }
  .main-content:has(.page[data-page="patient"].active) .user-profile-badge small { font-size: 11px !important; }
  .page[data-page="patient"], .page[data-page="patient"] #patientCardRoot,
  .page[data-page="patient"] #patientTabContent { min-width: 0; width: 100%; box-sizing: border-box; }
  .page[data-page="patient"] #patientCardRoot :is(div, section, article, header) { min-width: 0; box-sizing: border-box; }
  .page[data-page="patient"] #btnBackPatient,
  .page[data-page="patient"] #patientCardRoot #btnBackToProfile {
    min-height: 44px !important; padding: 8px 10px !important;
    font-size: 13px !important; margin-bottom: 4px !important; width: auto !important;
    white-space: normal !important;
  }
  .page[data-page="patient"] #patientCardRoot > div:first-child { margin-bottom: 8px !important; }
  .page[data-page="patient"] #patientCardRoot .patientRecordSummary {
    padding: 14px !important; margin-bottom: 12px !important; border-radius: 16px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordSummary > div:first-child {
    flex-direction: column !important; align-items: stretch !important; gap: 12px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordSummary > div:first-child > div:first-child > div:first-child {
    font-size: 10px !important; margin-bottom: 6px !important; letter-spacing: .06em !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordTitle {
    font-size: 24px !important; line-height: 1.2 !important; overflow-wrap: anywhere; color: var(--text-main, #f8fafc) !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordTitle + .patientStatusBadge {
    min-height: 30px !important; padding: 5px 9px !important; font-size: 12px !important;
    max-width: 100%; white-space: normal !important; overflow-wrap: anywhere;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordSummary > div:first-child > div:first-child > div:last-child {
    font-size: 13px !important; line-height: 1.4 !important; margin-top: 6px !important; overflow-wrap: anywhere;
  }
  .page[data-page="patient"] #patientCardRoot #btnAddVisit {
    width: 100% !important; min-height: 44px !important; padding: 10px 12px !important;
    font-size: 14px !important; border-radius: 11px !important; white-space: normal !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important; margin-top: 12px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordStat {
    min-height: 64px !important; padding: 10px 8px !important; border-radius: 10px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordStat > div:first-child {
    font-size: 10px !important; line-height: 1.3 !important; margin-bottom: 5px !important; letter-spacing: .03em !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientRecordStat > div:last-child {
    font-size: 19px !important; line-height: 1.2 !important; overflow-wrap: anywhere;
  }
  .page[data-page="patient"] #patientCardRoot .patient-tabs-nav {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important; min-height: 0 !important; gap: 4px !important;
    padding: 4px !important; margin-bottom: 12px !important; border-radius: 12px !important; overflow: visible !important;
  }
  .page[data-page="patient"] #patientCardRoot .patient-tabs-nav .patient-tab-btn {
    width: 100% !important; min-width: 0 !important; min-height: 44px !important;
    padding: 8px 4px !important; font-size: 12px !important; line-height: 1.3 !important;
    border-radius: 9px !important; white-space: normal !important; overflow-wrap: anywhere;
  }
  .page[data-page="patient"] #patientCardRoot #patientTabContent > section:has([data-patient-ai-generate]),
  .page[data-page="patient"] #patientCardRoot :is(.patientDiagnosesPanel, .patientWeightPanel, .patientVaccinationsPanel, .patientPassportCard, .patientDoctorNotesCard) {
    padding: 14px !important; margin-inline: 0 !important; margin-bottom: 12px !important; border-radius: 14px !important;
  }
  .page[data-page="patient"] #patientCardRoot #patientTabContent > section:has([data-patient-ai-generate]) > div:first-child {
    font-size: 10px !important; letter-spacing: .05em !important;
  }
  .page[data-page="patient"] #patientCardRoot #patientTabContent > section:has([data-patient-ai-generate]) h3,
  .page[data-page="patient"] #patientCardRoot :is(.patientDiagnosesHeader, .patientWeightHeader, .patientVaccinationsHead, .patientPassportCard, .patientDoctorNotesCard) h3 {
    font-size: 17px !important; line-height: 1.3 !important; margin: 0 0 6px !important; overflow-wrap: anywhere;
  }
  .page[data-page="patient"] #patientCardRoot #patientTabContent > section:has([data-patient-ai-generate]) h3 { margin-top: 7px !important; }
  .page[data-page="patient"] #patientCardRoot #patientTabContent > section:has([data-patient-ai-generate]) p,
  .page[data-page="patient"] #patientCardRoot :is(.patientDiagnosesHeader, .patientWeightHeader) p {
    font-size: 13px !important; line-height: 1.45 !important; margin: 0 0 10px !important;
  }
  .page[data-page="patient"] #patientCardRoot [data-patient-ai-result]:empty { margin: 0 !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientDiagnosesHeader, .patientWeightHeader, .patientVaccinationsHead) {
    gap: 10px !important; margin-bottom: 10px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientDiagnosesHeaderActions {
    display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
  }
  .page[data-page="patient"] #patientCardRoot :is(button, a.patientFileOpenButton) {
    min-height: 44px !important; max-width: 100%; font-size: 14px !important;
    white-space: normal; overflow-wrap: anywhere;
  }
  .page[data-page="patient"] #patientCardRoot :is(.patientDiagnosesEmpty, .patientWeightEmpty) {
    min-height: 62px !important; padding: 12px !important; gap: 10px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientDiagnosesEmpty > span { font-size: 24px !important; }
  .page[data-page="patient"] #patientCardRoot .patientDiagnosesEmpty :is(strong,p) { font-size: 13px !important; line-height: 1.45 !important; }
  .page[data-page="patient"] #patientCardRoot .patientDiagnosisCard { padding: 12px !important; border-radius: 10px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientDiagnosisTitleRow, .patientDiagnosisMeta, .patientDiagnosisActions) { flex-wrap: wrap !important; gap: 6px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientDiagnosisMain, .patientDiagnosisNote) { overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .patientWeightBody { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .patientWeightCurrent { min-height: 72px !important; padding: 12px !important; }
  .page[data-page="patient"] #patientCardRoot .patientWeightCurrent strong { font-size: 24px !important; }
  .page[data-page="patient"] #patientCardRoot .patientWeightRow { min-height: 44px !important; padding: 8px 10px !important; flex-wrap: wrap; }
  .page[data-page="patient"] #patientCardRoot .patientVaccinationItem { min-height: 64px !important; padding: 12px !important; gap: 8px !important; flex-wrap: wrap; }
  .page[data-page="patient"] #patientCardRoot .patientVaccinationItem strong { font-size: 14px !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .patientVaccinationNext { font-size: 13px !important; }
  .page[data-page="patient"] #patientCardRoot #patientTabContent > div:has(> .patientPassportCard) {
    grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientPassportCard > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
    font-size: 13px !important; margin-top: 10px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientPassportCard :is(b,span) { overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .patientDoctorNotesCard > div:first-child { flex-wrap: wrap !important; gap: 4px !important; }
  .page[data-page="patient"] #patientCardRoot :is(input, select, textarea) {
    min-width: 0 !important; max-width: 100%; box-sizing: border-box; font-size: 16px !important;
  }
  .page[data-page="patient"] #patientCardRoot [data-patient-doctor-notes] {
    min-height: 96px !important; padding: 10px !important; margin-top: 10px !important; color: var(--text-main, #f8fafc) !important;
  }
  /* Visits and medical history */
  .page[data-page="patient"] #patientCardRoot :is(.patientInfoBox, .premiumLabsPage) { padding: 12px !important; border-radius: 14px !important; }
  .page[data-page="patient"] #patientCardRoot .patientInfoBox > .row:has(#btnAddMedcardEntry) { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .patientInfoBox > .row h2 { font-size: 19px !important; }
  .page[data-page="patient"] #patientCardRoot .hint { font-size: 13px !important; line-height: 1.45 !important; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitTimelineItem { padding-left: 20px !important; margin-bottom: 12px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitCard, .premiumMedEntry) { padding: 14px !important; border-radius: 14px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitTop, .premiumMedEntryHeader, .premiumVisitFooter) { flex-wrap: wrap !important; gap: 10px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitHeading, .premiumMedEntryMainInfo) { flex: 1 1 180px; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitBadges { flex-wrap: wrap !important; max-width: 100%; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitDiagnosis { font-size: 17px !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitContent, .premiumMedBlocks) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitSection, .premiumMedBlock) { padding: 10px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitText, .premiumMedText) { font-size: 14px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .premiumMedVitalsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  /* Lab archive */
  .page[data-page="patient"] #patientCardRoot .premiumLabsHero { padding: 14px !important; gap: 10px !important; margin-bottom: 12px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabsHeroIcon { display: none !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabsHero h2 { font-size: 19px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabsHero p { font-size: 13px !important; line-height: 1.45 !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabTypes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabTypeButton { padding: 10px !important; gap: 8px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabTypeIcon { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabTypeText strong { font-size: 14px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabTypeText small { font-size: 11px !important; white-space: normal; }
  .page[data-page="patient"] #patientCardRoot .premiumLabsHistory { padding: 14px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumLabsHistoryHead h3, .premiumLabsEmpty h3) { font-size: 17px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabsEmpty { min-height: 100px !important; padding: 16px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumLabsEmptyIcon { font-size: 28px !important; }
  /* Files and documents */
  .page[data-page="patient"] #patientCardRoot :is(.patientFilesArchive, .patientDocumentsPage) { padding: 12px !important; border-radius: 14px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFilesArchiveHead, .patientDocumentsHead) { gap: 10px !important; flex-wrap: wrap !important; margin-bottom: 12px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFilesArchiveHead h2, .patientDocumentsHead h2) { font-size: 19px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFilesStats, .patientDocumentsSummary) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFilesFilters, .patientFilesGrid, .patientDocumentsGrid) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFileCardBody, .patientDocumentCard) { padding: 12px !important; }
  .page[data-page="patient"] #patientCardRoot .patientDocumentIconBadge { width: 36px !important; height: 36px !important; font-size: 20px !important; }
  .page[data-page="patient"] #patientCardRoot .patientDocumentCard h3 { font-size: 17px !important; }
  .page[data-page="patient"] #patientCardRoot .patientDocumentCard p { font-size: 13px !important; line-height: 1.45 !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFilesArchiveEmpty, .patientDocumentEmpty) { min-height: 80px !important; padding: 14px !important; }
  .page[data-page="patient"] #patientCardRoot .patientFilesStats {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important; margin-bottom: 10px !important;
  }
  .page[data-page="patient"] #patientCardRoot .patientFilesStats > div { min-height: 56px !important; padding: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .patientFilesStats strong { font-size: 20px !important; }
  .page[data-page="patient"] #patientCardRoot .patientFilesFilters { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFilesArchiveHead p, .patientDocumentsHead p, .patientVaccinationsEmpty small) { font-size: 13px !important; line-height: 1.45 !important; }
  .page[data-page="patient"] #patientCardRoot .labHistoryHeader { padding: 14px !important; flex-wrap: wrap; gap: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .labHistoryIcon { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
  .page[data-page="patient"] #patientCardRoot .labHistoryTitle { font-size: 18px !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .labHistoryStat { min-height: 56px !important; padding: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .labHistoryStat strong { font-size: 19px !important; }
  .page[data-page="patient"] #patientCardRoot .patientPassportCard :is(b, span) { color: var(--text-main, #f8fafc) !important; }
  body[data-theme="white"] .page[data-page="patient"] #patientCardRoot .patientRecordStat {
    background: #f1f6fa !important; border-color: #e0e9f0 !important;
  }
  body[data-theme="white"] .page[data-page="patient"] #patientCardRoot #patientTabContent > section:has([data-patient-ai-generate]) {
    background: #f5effc !important; border-color: #d9c7ee !important;
  }
  body[data-theme="white"] .page[data-page="patient"] #patientCardRoot #patientTabContent > section:has([data-patient-ai-generate]) > div:first-child { color: #7841a7 !important; }
}

/* PUG CRM — patient records, visits and editors, mobile v2 */
@media screen and (max-width: 700px), screen and (max-width: 950px) and (max-height: 500px) {
  /* Flex items in the stacked visit header must not acquire a fixed height. */
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitHeading, .premiumMedEntryMainInfo) {
    flex: 0 1 auto !important; width: 100% !important; min-height: 0 !important;
  }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitTop, .premiumMedEntryHeader) { align-items: flex-start !important; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitBadges { width: 100%; flex-direction: row !important; justify-content: flex-start !important; gap: 6px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitStatus, .premiumVisitPrice, .premiumVisitType) {
    min-height: 28px !important; padding: 5px 8px !important; font-size: 11px !important;
  }
  .page[data-page="patient"] #patientCardRoot .premiumVisitDivider { margin: 10px 0 !important; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitText:has(.premiumVisitList),
  .page[data-page="patient"] #patientCardRoot .premiumVisitList { white-space: normal !important; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitList { gap: 6px !important; margin: 0 !important; padding: 0 !important; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitList li { white-space: normal !important; line-height: 1.5 !important; padding-left: 14px !important; }
  .page[data-page="patient"] #patientCardRoot .premiumVisitSectionHead { margin-bottom: 6px !important; font-size: 10px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumVisitOpenHint, .premiumMedEntryVitalsLine, .premiumMedBlockHeader) { font-size: 12px !important; line-height: 1.4 !important; }
  .page[data-page="patient"] #patientCardRoot .premiumMedEntryActions { flex-direction: row !important; width: auto !important; }
  .page[data-page="patient"] #patientCardRoot .premiumMedEntryAction { width: 44px !important; height: 44px !important; padding: 10px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.premiumMedMiniRow, .premiumMedVitalsGrid > div) { min-width: 0; padding: 10px !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .patientFilesEmpty { padding: 16px !important; min-height: 110px !important; }
  .page[data-page="patient"] #patientCardRoot .patientFilesEmptyIcon { width: 36px !important; height: 36px !important; font-size: 22px !important; }
  .page[data-page="patient"] #patientCardRoot .patientFilesEmpty h3 { font-size: 17px !important; }
  .page[data-page="patient"] #patientCardRoot .patientFilesEmpty p { font-size: 13px !important; line-height: 1.45 !important; }
  .page[data-page="patient"] #patientCardRoot .patientFileCardBody h4 { font-size: 15px !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot :is(.patientFileMeta, .patientFileNote) { font-size: 12px !important; line-height: 1.45 !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .patientFileCardActions { gap: 6px !important; padding: 10px !important; flex-wrap: wrap; }
  .page[data-page="patient"] #patientCardRoot .patientFileActionButton { min-width: 44px !important; min-height: 44px !important; padding: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .patientFileOpenButton { min-height: 44px !important; padding: 10px !important; font-size: 13px !important; }
  .page[data-page="patient"] #patientCardRoot .labHistoryStats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 12px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.labHistoryComment, .labHistoryOwnerExplanation, .labHistoryQualitative) { padding: 12px !important; font-size: 13px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .labHistoryActions { flex-wrap: wrap; gap: 6px !important; }
  .page[data-page="patient"] #patientCardRoot .labActionBtn { width: 44px !important; height: 44px !important; padding: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .patientDocumentCard { gap: 8px !important; border-radius: 12px !important; }
  .page[data-page="patient"] #patientCardRoot .patientDocumentCard :is(select, button) { width: 100% !important; min-height: 44px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.patientDocumentHint, .patientDocumentNotice) { font-size: 12px !important; line-height: 1.45 !important; }

  /* The open appointment is part of the same patient workflow. */
  .main-content:has(.page[data-page="visit"].active) { width: 100% !important; max-width: 100% !important; padding: 12px 10px 120px !important; box-sizing: border-box; }
  .main-content:has(.page[data-page="visit"].active) .header-panel { padding: 0 !important; min-height: 44px !important; gap: 10px !important; margin-bottom: 14px !important; }
  .main-content:has(.page[data-page="visit"].active) .top-logo { font-size: 18px !important; }
  .main-content:has(.page[data-page="visit"].active) .user-profile-badge { background: none !important; border: 0 !important; padding: 4px 0 !important; min-width: 0 !important; max-width: 55%; }
  .main-content:has(.page[data-page="visit"].active) #clinicNameTitle { font-size: 14px !important; overflow-wrap: anywhere; }
  .page[data-page="visit"] .visitWorkspace,
  .page[data-page="visit"] .visitWorkspace.hasPugAiWorkspace { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box; }
  .page[data-page="visit"] .visitWorkspace :is(div, section, aside, main, label, header) { min-width: 0; box-sizing: border-box; }
  .page[data-page="visit"] .visitWorkspaceHeader { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 12px !important; }
  .page[data-page="visit"] .visitBackPatientButton { min-height: 44px !important; margin-bottom: 8px !important; padding: 8px 10px !important; font-size: 13px !important; }
  .page[data-page="visit"] .visitWorkspaceHeader h1 { font-size: 26px !important; line-height: 1.15 !important; overflow-wrap: anywhere; }
  .page[data-page="visit"] .visitWorkspaceEyebrow { font-size: 10px !important; margin-bottom: 5px !important; }
  .page[data-page="visit"] .visitWorkspaceMeta { font-size: 13px !important; line-height: 1.4 !important; margin-top: 6px !important; overflow-wrap: anywhere; }
  .page[data-page="visit"] .visitWorkspaceHeaderActions { display: flex !important; justify-content: flex-start !important; width: 100%; gap: 6px !important; }
  .page[data-page="visit"] :is(.visitWorkspaceStatus, .visitWorkspaceDate) { width: auto !important; min-height: 30px !important; padding: 6px 10px !important; font-size: 12px !important; }
  .page[data-page="visit"] .visitWorkspaceGrid,
  .page[data-page="visit"] .visitWorkspaceGrid.hasPugAiWorkspace { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .page[data-page="visit"] :is(.visitAiWorkspace, .visitWorkspaceMain, .visitWorkspaceSidebar) { grid-column: 1 !important; width: 100% !important; position: static !important; max-height: none !important; }
  .page[data-page="visit"] .visitAiWorkspace { grid-row: auto !important; order: 0; border-radius: 14px !important; }
  .page[data-page="visit"] .visitWorkspaceMain { order: 1; gap: 12px !important; }
  .page[data-page="visit"] .visitWorkspaceSidebar { order: 2; }
  .page[data-page="visit"] .visitAiWorkspaceHead { padding: 12px !important; }
  .page[data-page="visit"] .visitAiWorkspaceBrand { gap: 8px !important; }
  .page[data-page="visit"] .visitAiWorkspaceBrandIcon { width: 32px !important; height: 32px !important; min-width: 32px !important; flex: 0 0 32px !important; border-radius: 10px !important; }
  .page[data-page="visit"] .visitAiWorkspaceBrand strong { font-size: 16px !important; }
  .page[data-page="visit"] .visitAiWorkspaceBrand span { font-size: 11px !important; line-height: 1.35 !important; }
  .page[data-page="visit"] .visitAiWorkspaceTabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 10px !important; gap: 4px !important; }
  .page[data-page="visit"] .visitAiWorkspaceTab { min-height: 44px !important; padding: 8px 4px !important; font-size: 12px !important; white-space: normal !important; }
  .page[data-page="visit"] .visitAiWorkspaceBody { padding: 10px !important; max-height: none !important; overflow: visible !important; }
  .page[data-page="visit"] #visitAiIntakePanel { font-size: 13px !important; line-height: 1.45 !important; }
  .page[data-page="visit"] #visitAiIntakePanel > div { padding: 12px !important; border-radius: 12px !important; }
  .page[data-page="visit"] #visitAiIntakePanel > div > div:first-child { gap: 8px !important; flex-wrap: wrap !important; }
  .page[data-page="visit"] #visitAiIntakePanel > div > div:first-child > div > div { font-size: 14px !important; }
  .page[data-page="visit"] #visitAiIntakePanel > div > div:first-child > div > div + div { font-size: 12px !important; }
  .page[data-page="visit"] :is(input, select, textarea) { min-width: 0 !important; max-width: 100%; box-sizing: border-box; font-size: 16px !important; }
  .page[data-page="visit"] :is(.visitControl, .visitAiConsultInput) { min-height: 44px !important; padding: 10px !important; border-radius: 10px !important; }
  .page[data-page="visit"] #visitAiIntakePanel textarea { min-height: 110px !important; padding: 10px !important; margin-top: 10px !important; }
  .page[data-page="visit"] #visitAiIntakePanel button { min-height: 44px !important; min-width: 0 !important; padding: 10px !important; font-size: 13px !important; max-width: 100%; white-space: normal; }
  .page[data-page="visit"] .visitSectionCard { padding: 14px !important; border-radius: 14px !important; }
  .page[data-page="visit"] .visitSectionHead { gap: 8px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; }
  .page[data-page="visit"] .visitSectionHead > div:first-child { gap: 8px !important; }
  .page[data-page="visit"] .visitSectionIcon { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 18px !important; }
  .page[data-page="visit"] .visitSectionHead h2 { font-size: 18px !important; line-height: 1.3 !important; }
  .page[data-page="visit"] .visitSectionHead p { font-size: 12px !important; line-height: 1.4 !important; margin-top: 4px !important; }
  .page[data-page="visit"] :is(.visitMedicalGrid, .visitAssessmentGrid, .visitOwnerFollowGrid) { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .page[data-page="visit"] .visitVitalsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .page[data-page="visit"] :is(.visitField, .visitVitalField) > span { font-size: 12px !important; line-height: 1.4 !important; }
  .page[data-page="visit"] :is(.visitVitalsBlock, .visitOwnerCommunicationBlock) { padding: 10px !important; }
  .page[data-page="visit"] .visitTextareaShort { min-height: 80px !important; }
  .page[data-page="visit"] .visitTextareaLarge { min-height: 120px !important; }
  .page[data-page="visit"] .visitPickerModern { display: grid !important; grid-template-columns: minmax(0, 1fr) 64px !important; gap: 8px !important; padding: 10px !important; }
  .page[data-page="visit"] .visitPickerModern .visitPickerSearch { grid-column: 1 / -1 !important; }
  .page[data-page="visit"] .visitPickerModern .visitPickerSelect { grid-column: 1 !important; }
  .page[data-page="visit"] .visitPickerModern .visitPickerQty { grid-column: 2 !important; }
  .page[data-page="visit"] .visitPickerModern .visitAddLineButton { grid-column: 1 / -1 !important; min-height: 44px !important; width: 100% !important; }
  .page[data-page="visit"] .visitPickerModern label > span { font-size: 12px !important; }
  .page[data-page="visit"] .visitServicePickerButton { width: 100% !important; padding: 8px !important; min-height: 44px !important; }
  .page[data-page="visit"] .visitServicePickerIcon { width: 26px !important; height: 26px !important; flex: 0 0 26px; }
  .page[data-page="visit"] .visitServicePickerText strong { font-size: 13px !important; }
  .page[data-page="visit"] .visitServicePickerText small { font-size: 11px !important; white-space: normal; }
  .page[data-page="visit"] .visitSectionTotal { padding: 8px !important; }
  .page[data-page="visit"] .visitSectionTotal strong { font-size: 16px !important; }
  .page[data-page="visit"] .visitSummaryCard { position: static !important; padding: 14px !important; border-radius: 14px !important; }
  .page[data-page="visit"] .visitSummaryPatient { padding: 10px !important; margin: 12px 0 !important; }
  .page[data-page="visit"] .visitSummaryAvatar { width: 32px !important; height: 32px !important; min-width: 32px !important; }
  .page[data-page="visit"] .visitSummaryPatient strong { font-size: 15px !important; }
  .page[data-page="visit"] .visitSummaryPatient span { font-size: 12px !important; overflow-wrap: anywhere; }
  .page[data-page="visit"] .visitSummaryRows { gap: 8px !important; }
  .page[data-page="visit"] .visitSummaryGrand strong { font-size: 24px !important; }
  .page[data-page="visit"] :is(.visitSavePrimary, .visitCompleteButton, .visitPrintButton, .visitPaymentButton) { min-height: 44px !important; padding: 10px !important; font-size: 14px !important; white-space: normal; }
  .page[data-page="visit"] .visitSummaryHint { font-size: 12px !important; line-height: 1.4 !important; }

  /* Patient editors: scroll within the window; keep close/save accessible. */
  :is(.premiumLabModalOverlay, .medcardModalOverlay, .patientFileModalOverlay, .patientDiagnosisModalOverlay, .patientVaccinePickerOverlay, .patientConsentOverlay, .visitServicePickerOverlay, .addPetModalOverlay) {
    padding: 8px !important; box-sizing: border-box; align-items: center !important;
  }
  :is(#premiumLabModal .premiumLabModal, #medcardModal .medcardModalWindow, .patientFileModalOverlay .patientFileModal, .patientDiagnosisModalOverlay .patientDiagnosisModal, .patientVaccinePickerOverlay .patientVaccinePicker, .patientConsentOverlay .patientConsentModal, .visitServicePickerOverlay .visitServicePickerModal, #addPetModalOverlay .addPetModal) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    max-height: calc(100dvh - 16px) !important; margin: 0 !important; box-sizing: border-box; border-radius: 16px !important;
  }
  :is(#premiumLabModal, #medcardModal, .patientFileModalOverlay, .patientDiagnosisModalOverlay, .patientVaccinePickerOverlay, .patientConsentOverlay, .visitServicePickerOverlay, #addPetModalOverlay) :is(div, section, label, form, header, footer) { min-width: 0; box-sizing: border-box; }
  :is(#premiumLabModal, #medcardModal, .patientFileModalOverlay, .patientDiagnosisModalOverlay, .patientVaccinePickerOverlay, .patientConsentOverlay, .visitServicePickerOverlay, #addPetModalOverlay) :is(input, select, textarea) { max-width: 100%; min-width: 0 !important; box-sizing: border-box; font-size: 16px !important; }
  :is(#premiumLabModal, #medcardModal, .patientFileModalOverlay, .patientDiagnosisModalOverlay, .patientVaccinePickerOverlay, .patientConsentOverlay, .visitServicePickerOverlay, #addPetModalOverlay) button { min-height: 44px !important; max-width: 100%; font-size: 14px !important; white-space: normal; }
  :is(#premiumLabModal .premiumLabModalHeader, #medcardModal .medcardModalHeader, .patientFileModalOverlay .patientFileModalHead, .patientDiagnosisModalOverlay .patientDiagnosisModalHeader, .patientVaccinePickerOverlay .patientVaccinePickerHead, .patientConsentOverlay .patientConsentModalHead, .visitServicePickerOverlay .visitServicePickerHeader, #addPetModalOverlay .addPetModalHeader) { padding: 12px !important; gap: 8px !important; flex: 0 0 auto; }
  :is(#premiumLabModal, #medcardModal, .patientFileModalOverlay, .patientDiagnosisModalOverlay, .patientVaccinePickerOverlay, .patientConsentOverlay, .visitServicePickerOverlay, #addPetModalOverlay) :is(h2, h3) { font-size: 18px !important; line-height: 1.3 !important; overflow-wrap: anywhere; }
  :is(#premiumLabModal, #medcardModal, .patientFileModalOverlay, .patientDiagnosisModalOverlay, .patientVaccinePickerOverlay, .patientConsentOverlay, .visitServicePickerOverlay, #addPetModalOverlay) p { font-size: 12px !important; line-height: 1.45 !important; }
  :is(#premiumLabModal .premiumLabModalIcon, #medcardModal .medcardModalIcon, .patientFileModalOverlay .patientFileModalIcon) { width: 32px !important; height: 32px !important; min-width: 32px !important; flex: 0 0 32px !important; font-size: 18px !important; }
  #premiumLabModal .premiumLabModalScroll, #medcardModal .medcardModalScroll { padding: 12px !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; }
  #premiumLabModal :is(.premiumLabMetaSection, .premiumLabResultsGrid), #medcardModal :is(.medcardTextGrid, .medcardPlanGrid) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  #premiumLabModal .premiumLabResultCard { padding: 12px !important; }
  #premiumLabModal .premiumLabReferenceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #medcardModal :is(.medcardVitalsGrid, .medcardStateGrid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #medcardModal .medcardFormSection { padding: 12px !important; margin-bottom: 10px !important; }
  #medcardModal .medcardSectionHeader { gap: 8px !important; margin-bottom: 10px !important; }
  #medcardModal :is(.medcardInput, .medcardTextarea) { padding: 10px !important; min-height: 44px !important; }
  #medcardModal .medcardTextarea { min-height: 90px !important; }
  #medcardModal .medcardModalFooterHint { display: none !important; }
  #medcardModal .medcardModalActions { width: 100% !important; }
  #premiumLabModal .premiumLabModalFooter, #medcardModal .medcardModalFooter { padding: 10px 12px !important; gap: 8px !important; flex: 0 0 auto; }
  #premiumLabModal .premiumLabModalFooter button, #medcardModal .medcardModalActions button { flex: 1 1 0; min-width: 0; padding: 10px !important; }
  .patientFileModalOverlay .patientFileModal { padding: 12px !important; overflow-y: auto !important; overscroll-behavior: contain; }
  .patientFileModalOverlay .patientFileModalHead { padding: 0 44px 10px 0 !important; }
  .patientFileModalOverlay .patientFileModalClose { top: 8px !important; right: 8px !important; width: 44px !important; height: 44px !important; }
  .patientFileModalOverlay :is(.patientFileModalGrid, .patientFileUploadZone) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .patientFileModalOverlay .patientFileUploadZone { padding: 12px !important; }
  .patientFileModalOverlay .patientFileModalField :is(input, select) { min-height: 44px !important; padding: 10px !important; }
  .patientFileModalOverlay .patientFileModalField textarea { min-height: 80px !important; padding: 10px !important; }
  .patientFileModalOverlay .patientFileModalActions { position: sticky; bottom: -12px; padding: 10px 0; display: flex !important; gap: 8px !important; background: var(--finance-surface-1, #111827); }
  .patientFileModalOverlay .patientFileModalActions button { flex: 1 1 0; padding: 10px !important; }
  .patientDiagnosisModalOverlay .patientDiagnosisModal { overflow-y: auto !important; padding: 12px !important; overscroll-behavior: contain; }
  .patientDiagnosisModalOverlay .patientDiagnosisModalHeader { padding: 0 0 10px !important; }
  .patientDiagnosisModalOverlay .patientDiagnosisForm { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .patientDiagnosisModalOverlay .patientDiagnosisForm .is-wide { grid-column: 1 !important; }
  .patientVaccinePickerOverlay .patientVaccinePicker { overflow-y: auto !important; overscroll-behavior: contain; }
  .patientVaccinePickerOverlay .patientVaccinePicker > div:has(> label) { padding: 12px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .patientConsentOverlay .patientConsentModal { overflow-y: auto !important; }
  .patientConsentOverlay .patientConsentForm { padding: 12px !important; }
  .patientConsentOverlay .patientConsentGrid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .patientConsentOverlay .patientConsentChecks label { min-height: 44px; }
  .patientConsentOverlay .patientConsentActions { gap: 8px !important; }
  .visitServicePickerOverlay .visitServicePickerModal { display: flex; flex-direction: column; overflow: hidden; }
  .visitServicePickerOverlay .visitServicePickerGrid { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; overflow-y: auto; padding: 10px !important; gap: 8px !important; }
  .visitServicePickerOverlay .visitServicePickerSearch { padding: 10px !important; }
  .visitServicePickerOverlay .visitServicePickerSearch input { min-height: 44px !important; }
  .visitServicePickerOverlay .visitServicePickerCategories { padding: 0 10px 10px !important; gap: 6px !important; flex-shrink: 0; }
  .visitServicePickerOverlay .visitServicePickerCard { min-height: 64px !important; padding: 10px !important; }
  #addPetModalOverlay .addPetModalForm { overflow-y: auto !important; padding: 12px !important; }
  #addPetModalOverlay .addPetModalGrid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }

  .page[data-page="visit"] #visitAiConsultPanel { padding: 12px !important; border-radius: 12px !important; }
  .page[data-page="visit"] .visitAiConsultTitle { font-size: 15px !important; }
  .page[data-page="visit"] .visitAiConsultSubtitle { font-size: 12px !important; line-height: 1.45 !important; }
  .page[data-page="visit"] .visitAiConsultHead { gap: 8px !important; flex-wrap: wrap; }
  .page[data-page="visit"] .visitAiConsultQuickActions { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  .page[data-page="visit"] :is(.visitAiConsultQuickButton, .visitAiConsultSend) { min-height: 44px !important; padding: 10px !important; font-size: 13px !important; }
  .page[data-page="visit"] .visitAiConsultComposer { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .page[data-page="visit"] .visitAiConsultMessages:empty { min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
  .page[data-page="visit"] .visitAiConsultMessage { padding: 10px !important; font-size: 13px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
  .page[data-page="visit"] .visitAiConsultInput { min-height: 90px !important; }
  .page[data-page="visit"] .visitAiConsultComposerHint { font-size: 11px !important; }
  .patientFileModalOverlay .patientFileUploadPreview { min-height: 100px !important; height: 110px !important; }
  .patientFileModalOverlay .patientFileModalActions { flex-direction: row !important; }
  .patientFileModalOverlay .patientFileModalActions button { width: auto !important; }
  .patientDiagnosisModalOverlay .patientDiagnosisFormActions { gap: 8px !important; }
  .page[data-page="patient"] #patientCardRoot .patientDocumentIcon { width: 36px !important; height: 36px !important; font-size: 20px !important; }
  body[data-theme="white"] :is(.patientFileModalOverlay, .patientVaccinePickerOverlay) :is(p, label > span, .patientFileUploadInfo, .patientFileUploadEmpty, .patientFileUploadDocument) { color: #526779 !important; }
  body[data-theme="white"] :is(.patientFileModalOverlay, .patientVaccinePickerOverlay) :is(input, select, textarea) { color: #172b3a !important; background: #f1f6fa !important; border-color: #dce6ee !important; }
  body[data-theme="white"] :is(.patientFileModalOverlay, .patientVaccinePickerOverlay) :is(input, textarea)::placeholder { color: #738493 !important; opacity: 1; }
  body[data-theme="white"] .patientFileModalOverlay :is(.patientFileUploadPreview, .patientFileUploadZone) { background: #edf3f8 !important; border-color: #dce6ee !important; }
  body[data-theme="white"] .patientFileModalOverlay :is(.patientFileModalClose, .patientFileModalCancel),
  body[data-theme="white"] .patientVaccinePickerOverlay .patientVaccinePickerClose { color: #172b3a !important; background: #edf3f8 !important; }
  body[data-theme="white"] .patientFileModalOverlay .patientFileModalActions { background: #f8fbfe !important; }
  body[data-theme="white"] .page[data-page="visit"] #visitAiIntakePanel > div > div:first-child > div > div { color: #172b3a !important; }
  body[data-theme="white"] .page[data-page="visit"] #visitAiIntakeInput { color: #172b3a !important; background: #f8fbfe !important; }
  #visitPaymentModal { padding: 8px !important; }
  #visitPaymentModal .visitPaymentModal { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 16px) !important; overflow-y: auto; border-radius: 16px !important; }
  #visitPaymentModal .visitPaymentHeader { grid-template-columns: 32px minmax(0, 1fr) 44px !important; padding: 12px !important; gap: 8px !important; }
  #visitPaymentModal .visitPaymentHeaderIcon { width: 32px !important; height: 32px !important; }
  #visitPaymentModal .visitPaymentClose { width: 44px !important; height: 44px !important; }
  #visitPaymentModal .visitPaymentHeader h2 { font-size: 18px !important; }
  #visitPaymentModal .visitPaymentHeader p { font-size: 12px !important; }
  #visitPaymentModal .visitPaymentContent { padding: 12px !important; }
  #visitPaymentModal :is(input, select) { font-size: 16px !important; min-width: 0; max-width: 100%; box-sizing: border-box; }
  #visitPaymentModal button { min-height: 44px !important; font-size: 13px !important; max-width: 100%; }

  .page[data-page="patient"] #patientCardRoot .labMetricsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 12px !important; }
  .page[data-page="patient"] #patientCardRoot .labMetricCard { padding: 10px !important; border-radius: 10px !important; }
  .page[data-page="patient"] #patientCardRoot .labMetricHeader { flex-wrap: wrap; gap: 6px !important; }
  .page[data-page="patient"] #patientCardRoot .labMetricLabel { font-size: 12px !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .labMetricValue { font-size: 21px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.labMetricUnit, .labMetricRef) { font-size: 11px !important; overflow-wrap: anywhere; }
  .page[data-page="patient"] #patientCardRoot .labAiPanel { padding: 12px !important; border-radius: 12px !important; }
  .page[data-page="patient"] #patientCardRoot .labAiSections { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .page[data-page="patient"] #patientCardRoot .labAiDetails > summary { min-height: 44px !important; font-size: 13px !important; }
  .page[data-page="patient"] #patientCardRoot :is(.labAiSection, .labAiDetailsBody) { padding: 10px !important; font-size: 13px !important; line-height: 1.5 !important; }
  .patientVaccinePickerOverlay :is(.patientVaccinePickerSection, .patientVaccineProducts, .patientVaccineSaveBox) { padding: 12px !important; }
  .patientVaccinePickerOverlay :is(.patientVaccineBrandGrid, .patientVaccineProductGrid, .patientVaccineFormGrid) { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .patientVaccinePickerOverlay :is(.patientVaccineBrandCard, .patientVaccineProductCard) { padding: 10px !important; }
  .patientVaccinePickerOverlay :is(.patientVaccineBrandCard, .patientVaccineProductCard) strong { font-size: 14px !important; }
  #visitPaymentModal :is(.visitPaymentOverview, .visitPaymentMethods) { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
}
/* PUG CRM — compact mobile patients list, v1 */
.mobilePatientsTools, .mobilePatientDetails, .mobilePatientsNoResults { display: none; }
@media screen and (max-width:700px), screen and (max-width:950px) and (max-height:500px) {
  body:has(.page[data-page="patients"].active) .header-panel { gap: 10px !important; margin-bottom: 14px !important; padding: 12px 0 !important; min-width: 0; }
  body:has(.page[data-page="patients"].active) .top-logo { font-size: 18px !important; white-space: nowrap; }
  body:has(.page[data-page="patients"].active) .user-profile-badge { min-width: 0 !important; max-width: 55%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  body:has(.page[data-page="patients"].active) #clinicNameTitle { font-size: 14px !important; overflow-wrap: anywhere; }
  body:has(.page[data-page="patients"].active) .user-profile-badge span { font-size: 11px !important; }
  .page[data-page="patients"] { min-width: 0; max-width: 100%; }
  .page[data-page="patients"] > .glass-card { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
  .page[data-page="patients"] > .glass-card > div:first-child { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px !important; }
  .page[data-page="patients"] h2 { font-size: 22px !important; line-height: 1.2 !important; }
  .page[data-page="patients"] > .glass-card > div:first-child .hint { font-size: 12px !important; line-height: 1.4 !important; }
  .page[data-page="patients"] .mobilePatientsTools { display: grid; gap: 8px; margin-bottom: 8px; min-width: 0; }
  .page[data-page="patients"] .mobilePatientsSearch { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); }
  .page[data-page="patients"] .mobilePatientsSearch input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 16px !important; color: var(--text-main) !important; box-sizing: border-box; }
  .page[data-page="patients"] .mobilePatientsSearch input::placeholder { color: var(--text-muted); opacity: 1; }
  .page[data-page="patients"] .mobilePatientsSearch input::-webkit-search-cancel-button { display: none; }
  .page[data-page="patients"] .mobilePatientsSearch button { width: 44px; height: 44px; min-width: 44px; padding: 0 !important; font-size: 22px !important; color: var(--text-muted); border: 0; border-radius: 10px; background: transparent; }
  .page[data-page="patients"] .mobilePatientsSearch button:disabled { opacity: .3; }
  .page[data-page="patients"] .mobilePatientsFilter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
  .page[data-page="patients"] .mobilePatientsFilter select { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px !important; font-size: 16px !important; box-sizing: border-box; border: 1px solid var(--glass-border); border-radius: 10px; color: var(--text-main) !important; background: var(--glass-bg) !important; }
  .page[data-page="patients"] .mobilePatientsCount { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
  .page[data-page="patients"] #patientsTabList { min-width: 0; }
  .page[data-page="patients"] #patientsTabList > [data-open-pet] { display: grid !important; grid-template-columns: minmax(0, 1fr) 94px; gap: 8px; align-items: center !important; padding: 12px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--glass-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; }
  .page[data-page="patients"] #patientsTabList > [data-open-pet][hidden] { display: none !important; }
  .page[data-page="patients"] #patientsTabList > [data-open-pet] > div:first-child { min-width: 0; }
  .page[data-page="patients"] #patientsTabList > [data-open-pet] > div:first-child > div:first-child { font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; overflow-wrap: anywhere; }
  .page[data-page="patients"] .mobilePatientDesktopMeta { display: none; }
  .page[data-page="patients"] .mobilePatientDetails { display: grid; gap: 3px; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
  .page[data-page="patients"] .mobilePatientOwner { font-size: 12px; color: var(--text-main); opacity: .8; }
  .page[data-page="patients"] .patientActionsCell { padding: 0 !important; gap: 6px !important; }
  .page[data-page="patients"] .patientActionBtn { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; box-shadow: none !important; }
  .page[data-page="patients"] .patientActionBtn svg { width: 17px; height: 17px; }
  .page[data-page="patients"] .mobilePatientsNoResults:not([hidden]) { display: block; padding: 24px 12px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--text-muted); }
  .page[data-page="patients"] .patientsTabLoading { min-height: 150px !important; padding: 20px 12px !important; }
  .page[data-page="patients"] .patientsTabLoadingIcon { width: 36px; height: 36px; font-size: 22px; border-radius: 12px; }
  .page[data-page="patients"] #patientsTabList > .hint { padding: 24px 12px !important; font-size: 13px !important; }
  body[data-theme="white"] .page[data-page="patients"] .mobilePatientsSearch,
  body[data-theme="white"] .page[data-page="patients"] .mobilePatientsFilter select { background: #f3f6f5 !important; border-color: #dce5df !important; }
}
/* PUG CRM — compact mobile hospital and team, v1 */
@media screen and (max-width:700px), screen and (max-width:950px) and (max-height:500px) {
  body:has(.page:is([data-page="hospital"], [data-page="team"]).active) .header-panel { gap: 10px !important; margin-bottom: 14px !important; padding: 12px 0 !important; }
  body:has(.page:is([data-page="hospital"], [data-page="team"]).active) .top-logo { font-size: 18px !important; white-space: nowrap; }
  body:has(.page:is([data-page="hospital"], [data-page="team"]).active) .user-profile-badge { min-width: 0 !important; max-width: 55%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  body:has(.page:is([data-page="hospital"], [data-page="team"]).active) #clinicNameTitle { font-size: 14px !important; overflow-wrap: anywhere; }
  body:has(.page:is([data-page="hospital"], [data-page="team"]).active) .user-profile-badge > div:last-child { font-size: 11px !important; }
  .page:is([data-page="hospital"], [data-page="team"]) { min-width: 0; max-width: 100%; }
  .page:is([data-page="hospital"], [data-page="team"]) :is(input, select, textarea) { min-width: 0 !important; max-width: 100%; box-sizing: border-box; font-size: 16px !important; }
  .page:is([data-page="hospital"], [data-page="team"]) button { min-height: 44px !important; max-width: 100%; box-sizing: border-box; font-size: 13px !important; white-space: normal; line-height: 1.3; }

  /* Hospital: overview and patients */
  .page[data-page="hospital"] .hospitalPage { padding: 0 !important; margin: 0 !important; min-width: 0; }
  .page[data-page="hospital"] .hospitalHero { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; padding: 14px !important; border-radius: 14px !important; margin-bottom: 12px !important; }
  .page[data-page="hospital"] .hospitalHero h1 { font-size: 24px !important; line-height: 1.2 !important; margin: 5px 0 !important; }
  .page[data-page="hospital"] .hospitalHero p { font-size: 12px !important; line-height: 1.45 !important; margin: 6px 0 0 !important; }
  .page[data-page="hospital"] .hospitalEyebrow { font-size: 10px !important; }
  .page[data-page="hospital"] .hospitalAdmitButton { width: 100%; padding: 10px 12px !important; }
  .page[data-page="hospital"] .hospitalStats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 12px !important; }
  .page[data-page="hospital"] .hospitalStatCard { min-width: 0; min-height: 0 !important; padding: 12px !important; border-radius: 12px !important; }
  .page[data-page="hospital"] .hospitalStatCard span { font-size: 11px !important; }
  .page[data-page="hospital"] .hospitalStatCard strong { font-size: 24px !important; margin: 4px 0 !important; }
  .page[data-page="hospital"] .hospitalStatCard small { font-size: 10px !important; line-height: 1.3; }
  .page[data-page="hospital"] .hospitalToolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; margin-bottom: 12px !important; }
  .page[data-page="hospital"] .hospitalFilters { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .page[data-page="hospital"] .hospitalFilter { min-width: 0 !important; width: 100%; padding: 8px !important; }
  .page[data-page="hospital"] .hospitalSearch { width: 100% !important; min-height: 44px; padding: 10px 12px !important; }
  .page[data-page="hospital"] .hospitalPatientGrid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .page[data-page="hospital"] .hospitalPatientCard { min-width: 0; padding: 14px !important; border-radius: 14px !important; }
  .page[data-page="hospital"] .hospitalPatientTop { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; gap: 8px !important; margin-bottom: 12px !important; }
  .page[data-page="hospital"] .hospitalPatientAvatar { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 20px !important; }
  .page[data-page="hospital"] .hospitalPatientIdentity { min-width: 0; }
  .page[data-page="hospital"] .hospitalPatientIdentity h2 { font-size: 18px !important; line-height: 1.3 !important; margin: 0 !important; overflow-wrap: anywhere; }
  .page[data-page="hospital"] .hospitalPatientIdentity p { font-size: 12px !important; line-height: 1.4; margin: 3px 0 0 !important; overflow-wrap: anywhere; }
  .page[data-page="hospital"] .hospitalStatusBadge { grid-column: 2; justify-self: start; padding: 4px 8px !important; font-size: 11px !important; white-space: normal; }
  .page[data-page="hospital"] .hospitalPatientBody { gap: 7px !important; padding: 0 !important; margin-bottom: 12px !important; }
  .page[data-page="hospital"] .hospitalInfoRow { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; gap: 8px !important; align-items: start; }
  .page[data-page="hospital"] .hospitalInfoRow span { font-size: 11px !important; }
  .page[data-page="hospital"] .hospitalInfoRow strong { min-width: 0; font-size: 12px !important; line-height: 1.45 !important; text-align: left !important; overflow-wrap: anywhere; }
  .page[data-page="hospital"] .hospitalCardTasks { padding: 10px !important; margin: 12px 0 !important; border-radius: 10px !important; }
  .page[data-page="hospital"] .hospitalCardTasksHead { gap: 8px !important; margin-bottom: 8px !important; }
  .page[data-page="hospital"] .hospitalCardTasksHead :is(span, strong, small) { font-size: 11px !important; }
  .page[data-page="hospital"] .hospitalCardTask { grid-template-columns: 26px minmax(0, 1fr) !important; gap: 7px !important; padding: 8px !important; }
  .page[data-page="hospital"] .hospitalCardTaskIcon { width: 26px !important; height: 26px !important; font-size: 16px !important; }
  .page[data-page="hospital"] .hospitalCardTaskMain { min-width: 0; }
  .page[data-page="hospital"] .hospitalCardTaskTop { flex-wrap: wrap; gap: 3px 8px !important; }
  .page[data-page="hospital"] .hospitalCardTaskTop :is(span, time) { font-size: 10px !important; }
  .page[data-page="hospital"] .hospitalCardTaskMain strong { font-size: 12px !important; line-height: 1.4; overflow-wrap: anywhere; }
  .page[data-page="hospital"] .hospitalCardTaskMain p { font-size: 11px !important; line-height: 1.45 !important; margin: 4px 0 !important; overflow-wrap: anywhere; }
  .page[data-page="hospital"] .hospitalCardTaskMain small { font-size: 10px !important; overflow-wrap: anywhere; }
  .page[data-page="hospital"] .hospitalCardTasksEmpty { padding: 10px !important; gap: 8px !important; }
  .page[data-page="hospital"] .hospitalCardTasksEmpty :is(strong, small) { font-size: 11px !important; line-height: 1.4; }
  .page[data-page="hospital"] :is(.hospitalOpenCardButton, .hospitalDischargeButton) { width: 100%; padding: 10px !important; margin-top: 6px !important; }
  .page[data-page="hospital"] .hospitalEmpty { grid-column: 1 / -1; min-height: 0 !important; padding: 24px 12px !important; }

  /* Hospital forms and prescriptions */
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionOverlay, .hospitalTasksOverlay, .hospitalDischargeConfirmOverlay) { padding: 8px !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionModal, .hospitalTasksModal, .hospitalDischargeConfirmModal) { width: 100% !important; max-width: 620px !important; max-height: calc(100dvh - 16px) !important; min-width: 0 !important; padding: 14px !important; border-radius: 16px !important; box-sizing: border-box; overflow-y: auto !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionModal, .hospitalTasksModal, .hospitalDischargeConfirmModal) :is(input, select, textarea) { width: 100%; min-width: 0 !important; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px !important; font-size: 16px !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionModal, .hospitalTasksModal, .hospitalDischargeConfirmModal) textarea { min-height: 88px !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionModal, .hospitalTasksModal, .hospitalDischargeConfirmModal) button { min-height: 44px !important; min-width: 44px !important; max-width: 100%; padding: 10px !important; font-size: 13px !important; white-space: normal; box-sizing: border-box; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionHeader, .hospitalTasksHeader) { gap: 8px !important; margin-bottom: 12px !important; align-items: start; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionHeader, .hospitalTasksHeader) > div { min-width: 0; flex: 1; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionHeader, .hospitalTasksHeader) h2 { font-size: 20px !important; overflow-wrap: anywhere; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionHeader, .hospitalTasksHeader) p { font-size: 12px !important; line-height: 1.4 !important; margin: 5px 0 0 !important; overflow-wrap: anywhere; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionClose, .hospitalTasksClose, .hospitalDischargeConfirmClose) { width: 44px !important; height: 44px !important; flex: 0 0 44px; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionGrid, .hospitalTasksLayout) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionSection, .hospitalTasksTimeline, .hospitalTaskCreateCard) { min-width: 0; padding: 12px !important; border-radius: 12px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalAdmissionSectionTitle { gap: 8px !important; margin-bottom: 10px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalAdmissionSectionTitle > span { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalAdmissionSectionTitle strong { font-size: 14px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalAdmissionSectionTitle small { font-size: 11px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalAdmissionFieldsRow { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  body:has(.page[data-page="hospital"].active) .hospitalPatientSelectList { max-height: 180px !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalPatientSelectItem, .hospitalSelectedPatientPreview) { min-width: 0; padding: 10px !important; overflow-wrap: anywhere; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionField, .hospitalTaskField) { gap: 5px !important; margin-bottom: 10px !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalAdmissionField, .hospitalTaskField) > span { font-size: 11px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalAdmissionFooter { position: sticky; bottom: -14px; z-index: 2; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 10px 0 !important; background: var(--module-surface, #131c20); }
  body:has(.page[data-page="hospital"].active) :is(.hospitalTasksSectionHead, .hospitalTaskTop) { flex-wrap: wrap; gap: 6px !important; }
  body:has(.page[data-page="hospital"].active) :is(.hospitalTasksSectionHead h3, .hospitalTaskCreateCard h3) { font-size: 16px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskItem { display: grid !important; grid-template-columns: 28px minmax(0, 1fr) !important; padding: 10px !important; gap: 8px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskIcon { width: 28px !important; height: 28px !important; font-size: 16px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskContent { min-width: 0; overflow-wrap: anywhere; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskTop h4 { font-size: 14px !important; line-height: 1.4; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskTop time { font-size: 11px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskContent > p { font-size: 12px !important; line-height: 1.5 !important; margin: 6px 0 !important; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskActions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalTaskStaffSelect { grid-column: 1 / -1; }
  body:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmModal { padding-top: 54px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmIcon { width: 40px !important; height: 40px !important; margin-bottom: 8px !important; font-size: 22px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmModal h2 { font-size: 20px !important; }
  body:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmModal > p { font-size: 12px !important; line-height: 1.45; }
  body:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmPatient > div { min-width: 0; overflow-wrap: anywhere; }
  body:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmActions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }

  /* Team list */
  .page[data-page="team"] .teamPageCard { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .page[data-page="team"] .teamPageCard > .row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="team"] .teamPageCard h2 { font-size: 22px !important; margin: 0 0 4px !important; }
  .page[data-page="team"] .teamPageCard .hint { font-size: 12px !important; line-height: 1.45 !important; }
  .page[data-page="team"] :is(#btnAddStaffTeam, #btnAddSpecTeam) { width: 100%; padding: 10px !important; }
  .page[data-page="team"] .specPanel { padding: 12px !important; margin: 12px 0 !important; border-radius: 12px !important; }
  .page[data-page="team"] .specPanelHead { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .page[data-page="team"] .specPanelTitle { font-size: 14px !important; }
  .page[data-page="team"] .specList { flex-wrap: wrap; gap: 6px !important; }
  .page[data-page="team"] .specPill { max-width: 100%; padding: 0 0 0 8px !important; gap: 6px !important; font-size: 12px !important; }
  .page[data-page="team"] .specPill > span { min-width: 0; overflow-wrap: anywhere; }
  .page[data-page="team"] .specPillDelete { width: 44px !important; flex: 0 0 44px; padding: 0 !important; }
  .page[data-page="team"] .vetList { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="team"] .staffGroupHeader { padding: 8px 0 !important; font-size: 13px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .premiumVetCard { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; align-items: start !important; gap: 8px !important; padding: 12px !important; border-radius: 12px !important; min-width: 0 !important; }
  .page[data-page="team"] .vetAvatarWrap { width: 36px !important; height: 36px !important; }
  .page[data-page="team"] :is(.vetAvatarImg, .vetAvatarLetter) { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 18px !important; }
  .page[data-page="team"] .premiumVetInfo { min-width: 0; }
  .page[data-page="team"] .premiumVetTop { flex-wrap: wrap; gap: 6px !important; }
  .page[data-page="team"] .premiumVetTop > div { min-width: 0; }
  .page[data-page="team"] .premiumVetName { font-size: 17px !important; line-height: 1.3 !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .premiumVetRole { font-size: 11px !important; line-height: 1.4; }
  .page[data-page="team"] .premiumStatus { padding: 8px 10px !important; font-size: 11px !important; }
  .page[data-page="team"] .premiumVetSpecs { margin: 8px 0 !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .premiumVetSpecs > * { max-width: 100%; font-size: 11px !important; white-space: normal; }
  .page[data-page="team"] .premiumVetMeta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .page[data-page="team"] .premiumMetaItem { min-width: 0; padding: 6px !important; }
  .page[data-page="team"] .premiumMetaItem:first-child { grid-column: 1 / -1; }
  .page[data-page="team"] .premiumMetaItem span { font-size: 10px !important; }
  .page[data-page="team"] .premiumMetaItem strong { font-size: 12px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .premiumVetActions { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; width: 100%; }
  .page[data-page="team"] .premiumVetActions button { width: 100%; padding: 8px !important; }
  .page[data-page="team"] .premiumProfileBtn { grid-column: 1 / -1; }

  body[data-theme="white"] .page[data-page="team"] .teamPageCard > .row:first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  body[data-theme="white"] .page[data-page="team"] .teamPageCard > .row:first-child > button { margin-left: 0 !important; min-width: 0 !important; }

  /* Employee profile and its tabs */
  .page[data-page="team"] .teamDashProfile { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .page[data-page="team"] .teamDashSidebar { min-width: 0; min-height: 0 !important; max-height: none !important; padding: 12px !important; border-radius: 14px !important; overflow: visible !important; }
  .page[data-page="team"] .teamBackBtn { margin-bottom: 10px !important; padding: 8px 12px !important; }
  .page[data-page="team"] .teamDashAvatar { width: 48px !important; height: 48px !important; border-radius: 14px !important; margin-bottom: 8px !important; font-size: 24px !important; box-shadow: none !important; }
  .page[data-page="team"] .teamDashAvatar > img { border-radius: inherit; }
  .page[data-page="team"] .teamDashName { font-size: 22px !important; line-height: 1.3; overflow-wrap: anywhere; }
  .page[data-page="team"] :is(.teamDashTitle, .teamDashRole) { font-size: 12px !important; margin: 4px 0 !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .teamDashStatus { padding: 5px 8px !important; font-size: 11px !important; margin: 6px 0 !important; }
  .page[data-page="team"] .teamDashContact { padding: 8px 0 !important; margin: 4px 0 8px !important; background: transparent !important; font-size: 12px !important; line-height: 1.5; overflow-wrap: anywhere; }
  .page[data-page="team"] .teamDashContact > div { margin-bottom: 4px !important; }
  .page[data-page="team"] .teamDashEmergencyContact { padding: 8px !important; margin-top: 6px !important; }
  .page[data-page="team"] .teamDashEmergencyContact :is(span, strong, small, a) { font-size: 12px !important; }
  .page[data-page="team"] .teamDashNav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .page[data-page="team"] .teamDashNav button { width: 100%; min-width: 0; padding: 8px 4px !important; font-size: 12px !important; }
  .page[data-page="team"] .teamDashIdBox { padding: 8px !important; margin-top: 8px !important; font-size: 11px !important; }
  .page[data-page="team"] .teamDashMain { min-width: 0; max-height: none !important; overflow: visible !important; padding: 0 !important; }
  .page[data-page="team"] :is(.teamDashTop, .teamSubHero) { flex-wrap: wrap; gap: 10px !important; margin-bottom: 12px !important; padding: 12px !important; border-radius: 12px !important; }
  .page[data-page="team"] :is(.teamDashTop, .teamSubHero) :is(h1, h2) { font-size: 22px !important; line-height: 1.3; overflow-wrap: anywhere; }
  .page[data-page="team"] :is(.teamDashTop, .teamSubHero) p { font-size: 12px !important; line-height: 1.45 !important; }
  .page[data-page="team"] .teamDashActions { flex-wrap: wrap; gap: 6px !important; width: 100%; }
  .page[data-page="team"] .teamDashActions button { flex: 1 1 120px; padding: 8px !important; }
  .page[data-page="team"] .teamDashKpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 12px !important; }
  .page[data-page="team"] .teamKpiCard { min-width: 0; min-height: 0 !important; padding: 12px !important; border-radius: 12px !important; }
  .page[data-page="team"] .teamKpiIcon { width: 28px !important; height: 28px !important; font-size: 16px !important; }
  .page[data-page="team"] .teamKpiTitle { font-size: 11px !important; }
  .page[data-page="team"] .teamKpiValue { font-size: 22px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .teamKpiTrend { font-size: 10px !important; }
  .page[data-page="team"] :is(.teamDashInsight, .teamAnalyticsInsight) { padding: 12px !important; gap: 8px !important; margin-bottom: 12px !important; }
  .page[data-page="team"] .teamInsightIcon { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; font-size: 16px !important; }
  .page[data-page="team"] :is(.teamDashInsight, .teamAnalyticsInsight) :is(b, p) { font-size: 12px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
  .page[data-page="team"] :is(.teamDashGrid, .teamVisitsLayout, .teamAchievementsGrid, .careerChoiceGrid) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="team"] .teamDashPanel { grid-column: auto !important; min-width: 0; min-height: 0 !important; padding: 12px !important; border-radius: 12px !important; }
  .page[data-page="team"] .teamDashPanelHead { flex-wrap: wrap; gap: 8px !important; margin-bottom: 10px !important; }
  .page[data-page="team"] .teamDashPanelHead > div { min-width: 0; }
  .page[data-page="team"] .teamDashPanelHead h3 { font-size: 16px !important; line-height: 1.35; overflow-wrap: anywhere; }
  .page[data-page="team"] :is(.teamDashPanelHead span, .teamDashPanel .hint) { font-size: 12px !important; }
  .page[data-page="team"] .teamChartBox { width: 100% !important; min-width: 0; height: 180px !important; }
  .page[data-page="team"] .teamChartBox canvas { max-width: 100% !important; }
  .page[data-page="team"] .teamChartRange { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100%; gap: 4px !important; }
  .page[data-page="team"] .teamDashRows p { gap: 8px !important; font-size: 12px !important; line-height: 1.45; }
  .page[data-page="team"] .teamDashRows p :is(span, b) { min-width: 0; overflow-wrap: anywhere; }
  .page[data-page="team"] .teamVisitFilters { flex-wrap: wrap; gap: 6px !important; }
  .page[data-page="team"] .teamVisitFilters button { flex: 1 1 100px; padding: 8px !important; }
  .page[data-page="team"] .teamVisitCard { grid-template-columns: 28px minmax(0, 1fr) !important; padding: 12px !important; gap: 8px !important; }
  .page[data-page="team"] .teamVisitIcon { width: 28px !important; height: 28px !important; font-size: 16px !important; }
  .page[data-page="team"] .teamVisitMain { min-width: 0; }
  .page[data-page="team"] .teamVisitTitle { font-size: 16px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] :is(.teamVisitMeta, .teamVisitOwner) { font-size: 12px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .teamVisitRight { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px !important; }
  .page[data-page="team"] .teamFinanceRow { flex-wrap: wrap; gap: 8px !important; padding: 10px !important; }
  .page[data-page="team"] .teamFinanceRow > div { min-width: 0; flex: 1 1 140px; }
  .page[data-page="team"] .teamFinanceRow :is(b, span, strong) { font-size: 12px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .teamCareerHero { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; padding: 14px !important; gap: 12px !important; }
  .page[data-page="team"] .teamCareerTitle { font-size: 22px !important; }
  .page[data-page="team"] .teamCareerBadge { width: 44px !important; height: 44px !important; font-size: 24px !important; }
  .page[data-page="team"] .teamCareerLevel { font-size: 16px !important; }
  .page[data-page="team"] .clinicRatingHead { flex-wrap: wrap; gap: 8px !important; }
  .page[data-page="team"] .clinicRatingTable { min-width: 0 !important; }
  .page[data-page="team"] .clinicRatingRow { display: grid !important; grid-template-columns: 24px 32px minmax(0, 1fr) !important; gap: 6px !important; padding: 10px !important; }
  .page[data-page="team"] .clinicRatingAvatar { width: 32px !important; height: 32px !important; }
  .page[data-page="team"] .clinicRatingPerson { min-width: 0; }
  .page[data-page="team"] .clinicRatingPerson :is(b, span) { font-size: 12px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .clinicRatingStats { grid-column: 1 / -1; flex-wrap: wrap; gap: 6px !important; }
  .page[data-page="team"] :is(.staffAccountForm, .teamPhotoSettings) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="team"] .teamPhotoRight { min-width: 0; }
  .page[data-page="team"] .teamPhotoPreview { width: 64px !important; height: 64px !important; }
  .page[data-page="team"] .teamPhotoButtons { flex-wrap: wrap; gap: 6px !important; }
  .page[data-page="team"] .teamPhotoButtons :is(button, label) { min-height: 44px; padding: 10px !important; font-size: 13px !important; }
  .page[data-page="team"] .financeAdjustField { min-width: 0; }
  .page[data-page="team"] .financeAdjustField > span { font-size: 11px !important; }

  .page[data-page="hospital"] .hospitalCardActions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .page[data-page="hospital"] .hospitalCardActions button { min-width: 0; padding: 10px 6px !important; }
  .page[data-page="team"] .teamKpiCard { gap: 8px !important; }
  .page[data-page="team"] .teamKpiCard > div:last-child { min-width: 0; }
  .page[data-page="team"] .teamKpiCard > div:last-child > span { font-size: 11px !important; }
  .page[data-page="team"] .teamKpiCard > div:last-child > strong { font-size: 22px !important; line-height: 1.3; overflow-wrap: anywhere; }
  .page[data-page="team"] .teamKpiCard > div:last-child > small { font-size: 10px !important; }
  .page[data-page="team"] .staffAccessPanel > div:has(> .financeAdjustField) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .page[data-page="team"] .staffAccessPanel :is(input, select) { width: 100%; min-height: 44px; }
  .page[data-page="team"] .staffAccessPanel > div:last-child > div { min-width: 0; flex-wrap: wrap; }
  .page[data-page="team"] .achievementCard { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 8px !important; padding: 12px !important; }
  .page[data-page="team"] .achievementIcon { width: 32px !important; height: 32px !important; font-size: 18px !important; }
  .page[data-page="team"] .achievementCard > div { min-width: 0; overflow-wrap: anywhere; }
  .page[data-page="team"] .achievementCard :is(b, h3) { font-size: 14px !important; }
  .page[data-page="team"] .achievementCard :is(p, small) { font-size: 12px !important; line-height: 1.45; }
  .page[data-page="team"] .achievementState { grid-column: 1 / -1; }
  .page[data-page="team"] .careerChoice { min-height: 64px !important; padding: 10px !important; }

  .page[data-page="team"] button { min-width: 44px !important; }
  .page[data-page="team"] .teamDashAvatar { display: grid !important; place-items: center; }
  .page[data-page="team"] .teamDashAvatar > span { font-size: 24px !important; line-height: 1 !important; }
  .page[data-page="team"] .staffSkillCard { padding: 12px !important; min-width: 0; }
  .page[data-page="team"] .staffSkillIcon { width: 28px !important; height: 28px !important; font-size: 18px !important; }
  .page[data-page="team"] .staffSkillRemove { width: 44px !important; height: 44px !important; top: 4px !important; right: 4px !important; }
  .page[data-page="team"] .staffSkillCard b { font-size: 13px !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .staffSkillCard span { font-size: 11px !important; line-height: 1.45 !important; overflow-wrap: anywhere; }
  .page[data-page="team"] .achievementXp { grid-column: 1 / -1; }

  /* Team forms only: shared forms in other sections keep their styles */
  body:has(.page[data-page="team"].active) :is(#staffDrawer, .specializationEditorOverlay, .staffSkillModalOverlay, .financeAdjustModalOverlay) { padding: 8px !important; }
  body:has(.page[data-page="team"].active) :is(#staffDrawer .modal-window, .specializationEditorModal, .staffSkillModal, .financeAdjustModal) { width: 100% !important; max-width: 520px !important; min-width: 0 !important; max-height: calc(100dvh - 16px) !important; overflow-y: auto !important; padding: 14px !important; border-radius: 16px !important; box-sizing: border-box; }
  body:has(.page[data-page="team"].active) :is(#staffDrawer, .specializationEditorModal, .staffSkillModal, .financeAdjustModal) :is(input, select, textarea) { min-width: 0 !important; max-width: 100%; min-height: 44px; font-size: 16px !important; padding: 10px !important; box-sizing: border-box; }
  body:has(.page[data-page="team"].active) :is(#staffDrawer, .specializationEditorModal, .staffSkillModal, .financeAdjustModal) input[type="color"] { width: 44px !important; height: 44px !important; padding: 3px !important; }
  body:has(.page[data-page="team"].active) :is(#staffDrawer, .specializationEditorModal, .staffSkillModal, .financeAdjustModal) :is(button, .staffSpecializationToggle) { min-height: 44px !important; min-width: 44px !important; max-width: 100%; padding: 8px !important; font-size: 13px !important; white-space: normal; box-sizing: border-box; }
  body:has(.page[data-page="team"].active) :is(.specializationEditorModal, .staffSkillModal, .financeAdjustModal) :is(h2, h3) { font-size: 20px !important; line-height: 1.3 !important; }
  body:has(.page[data-page="team"].active) :is(.specializationEditorHeader, .staffSkillModalHead, .financeAdjustHead) { gap: 8px !important; padding-right: 42px; margin-bottom: 12px !important; }
  body:has(.page[data-page="team"].active) :is(.specializationEditorHeader, .staffSkillModalHead, .financeAdjustHead) p { font-size: 12px !important; line-height: 1.45 !important; }
  body:has(.page[data-page="team"].active) :is(.specializationEditorIcon, .staffSkillModalIcon, .financeAdjustIcon) { width: 30px !important; height: 30px !important; flex: 0 0 30px; font-size: 18px !important; }
  body:has(.page[data-page="team"].active) :is(.specializationEditorClose, .staffSkillModalClose, .financeAdjustClose) { width: 44px !important; height: 44px !important; top: 8px !important; right: 8px !important; }
  body:has(.page[data-page="team"].active) :is(.specializationEditorActions, .staffSkillModalActions, .financeAdjustActions, .financeTypeSwitch) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body:has(.page[data-page="team"].active) .staffSkillPresets > div { flex-wrap: wrap; gap: 6px !important; }
  body:has(.page[data-page="team"].active) #staffDrawer h3 { font-size: 20px !important; margin-bottom: 12px !important; }
  body:has(.page[data-page="team"].active) #staffDrawer .modal-window > div:last-child { position: sticky; bottom: -14px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; margin-top: 12px !important; padding: 10px 0 !important; background: var(--module-surface, #131c20); z-index: 3; }
  body:has(.page[data-page="team"].active) #staffDrawer .modal-window > div:last-child button { width: 100% !important; }
  body:has(.page[data-page="team"].active) #staffDrawer .staffSpecializationSummary { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  body:has(.page[data-page="team"].active) #staffDrawer .staffEmergencyContactBlock { padding: 10px !important; }
  body:has(.page[data-page="team"].active) #staffDrawer .staffEmergencyContactHead :is(strong, span) { font-size: 12px !important; }
  body[data-theme="white"]:has(.page[data-page="team"].active) #staffDrawer .modal-window > div:last-child,
  body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalAdmissionFooter { background: #f4f8fb !important; }

  /* Readable labels and close buttons in the light theme */
  html body[data-theme="white"]:has(.page[data-page="team"].active) :is(.specializationEditorModal, .staffSkillModal, .financeAdjustModal) { color: #172b3a !important; background: #f8fbfe !important; }
  html body[data-theme="white"]:has(.page[data-page="team"].active) :is(.specializationEditorModal, .staffSkillModal, .financeAdjustModal) :is(h2, h3) { color: #172b3a !important; }
  html body[data-theme="white"]:has(.page[data-page="team"].active) :is(.specializationEditorHeader, .staffSkillModalHead, .financeAdjustHead) p,
  html body[data-theme="white"]:has(.page[data-page="team"].active) :is(.financeAdjustField, .specializationEditorField, .specializationEditorColorField, .staffSkillField, .staffSkillPresets, .financeQuickReasons) > span { color: #607586 !important; }
  html body[data-theme="white"]:has(.page[data-page="team"].active) :is(.specializationEditorModal, .staffSkillModal, .financeAdjustModal) :is(input, select, textarea) { color: #172b3a !important; background: #f0f5f8 !important; border-color: #dce6ee !important; color-scheme: light; }
  html body[data-theme="white"]:has(.page[data-page="team"].active) :is(.specializationEditorClose, .staffSkillModalClose, .financeAdjustClose) { color: #172b3a !important; background: #edf3f8 !important; border-color: #dce6ee !important; }
  html body[data-theme="white"]:has(.page[data-page="team"].active) :is(.financeQuickReasons button, .financeTypeSwitch button:not(.active)) { color: #486477 !important; background: #edf3f8 !important; border-color: #dce6ee !important; }
  html body[data-theme="white"]:has(.page[data-page="team"].active) .financeTypeSwitch button.active { color: #ffffff !important; background: #3478a8 !important; }
  html body[data-theme="white"]:has(.page[data-page="team"].active) #staffDrawer .modal-window > div:first-of-type > div > div:first-child { color: #607586 !important; opacity: 1 !important; }
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmModal { color: #172b3a !important; background: #f8fbfe !important; border-color: #dce6ee !important; }
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmModal h2,
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmPatient strong { color: #172b3a !important; }
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmModal > p,
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmPatient span,
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmField > span { color: #607586 !important; }
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmPatient,
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) .hospitalDischargeConfirmField textarea { color: #172b3a !important; background: #f0f5f8 !important; border-color: #dce6ee !important; color-scheme: light; }
  html body[data-theme="white"]:has(.page[data-page="hospital"].active) :is(.hospitalDischargeConfirmCancel, .hospitalDischargeConfirmClose) { color: #486477 !important; background: #edf3f8 !important; border-color: #dce6ee !important; }
}
/* PUG CRM — white theme and readable interface typography, v1.
   Append after the existing styles. Screen interface only. */
/* This layer gives these final corrections priority over older overrides. */
@layer pugReadableInterface {
@media screen {
  html body {
    --pug-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  }
  html body :is(.main-content, .header-panel, .mac-dock, [class*="Modal"], [class*="modal"], #staffDrawer, .login-container) {
    font-family: var(--pug-ui-font) !important;
    -webkit-text-size-adjust: 100%;
  }
  html body :is(.page, .header-panel, .mac-dock, [class*="Modal"], [class*="modal"], #staffDrawer, .login-container) :is(input, select, textarea, button) {
    font-family: var(--pug-ui-font) !important;
  }
  html body .page { font-size: 15px; line-height: 1.5; }
  html body :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) :is(p, li):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) {
    line-height: 1.55 !important;
  }
  html body :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) :is(label > span, small):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  html body :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) :is(input, select, textarea):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *, [type="checkbox"], [type="radio"], [type="color"])) {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  html body :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) button:not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) {
    font-family: var(--pug-ui-font) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  html body .page :is(th, td):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) { font-size: 14px !important; line-height: 1.5 !important; }
  html body :is(.page, [class*="Modal"], [class*="modal"]) :is(h1, h2, h3, h4):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) {
    font-family: var(--pug-ui-font) !important;
    line-height: 1.3 !important;
    letter-spacing: -.02em;
    font-weight: 700;
  }

  /* White theme: opaque secondary text and calm, solid surfaces. */
  html body[data-theme="white"] {
    color-scheme: light;
    --text-main: #172b3a !important;
    --text-muted: #526575 !important;
    --card-bg: #ffffff !important;
    --glass-bg: #ffffff !important;
    --glass-border: #d9e3eb !important;
    --input-bg: #f8fafc !important;
    --accent-color: #2b638e !important;
    --primary-neon: #2b638e !important;
    --finance-accent: #2b638e !important;
    --finance-accent-2: #2b638e !important;
    --finance-accent-soft: #eaf2f8 !important;
    --finance-surface-1: #ffffff !important;
    --finance-surface-2: #f5f8fb !important;
    --finance-surface-soft: #f0f5f9 !important;
    --finance-surface-hover: #e9f1f7 !important;
    --finance-input: #f8fafc !important;
    --finance-border: #d9e3eb !important;
    --finance-border-strong: #b4cbdc !important;
    --finance-text: #172b3a !important;
    --finance-text-soft: #425869 !important;
    --finance-text-muted: #526575 !important;
    --finance-text-faint: #526575 !important;
    --finance-color-scheme: light !important;
    --pet-modal-accent: #2b638e !important;
    --pet-modal-accent-2: #2b638e !important;
    --med-accent: #2b638e !important;
    --color-success: #176746 !important;
    --color-warning: #805315 !important;
    --color-danger: #ad3345 !important;
    background: linear-gradient(145deg, #f8fafc, #edf3f7 55%, #f8fafc) !important;
    color: var(--text-main) !important;
  }
  html body[data-theme="white"] :is(.hint, .text-muted, .field-title, .panelMutedTitle, .user-profile-badge > div) {
    color: var(--text-muted) !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) :is(p, small, label > span):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) {
    color: var(--text-muted) !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) :is(input, select, textarea):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *, [type="checkbox"], [type="radio"], [type="color"])) {
    color: var(--text-main) !important;
    background: #f8fafc !important;
    border-color: #cad8e3 !important;
    color-scheme: light;
    opacity: 1;
  }
  html body[data-theme="white"] :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) :is(input, textarea)::placeholder { color: #607384 !important; opacity: 1 !important; }
  html body[data-theme="white"] :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) :is(input, select, textarea):focus-visible { outline: 2px solid #2b638e; outline-offset: 2px; }

  /* Forms that originally used a fixed dark palette. */
  html body[data-theme="white"] :is(.premiumLabModal, .medcardModalWindow, .visitServicePickerModal, .patientConsentModal, .patientDiagnosisModal, .hospitalDischargeConfirmModal, .financeAdjustModal, .staffSkillModal, .specializationEditorModal) {
    background: #ffffff !important;
    color: var(--text-main) !important;
    border-color: var(--glass-border) !important;
  }
  html body[data-theme="white"] :is(.premiumLabModalHeader, .premiumLabModalFooter, .premiumLabMetaSection, .premiumLabResultsSection, .premiumLabResultCard, .medcardFormSection, .medcardModalHeader, .medcardModalFooter, .visitServicePickerHeader, .patientConsentModalHead, .patientConsentModalFooter, .patientDiagnosisModalHeader, .patientDiagnosisModalFooter, .financeAdjustHead, .financeAdjustActions) {
    background: #f5f8fb !important;
    color: var(--text-main) !important;
    border-color: var(--glass-border) !important;
  }
  html body[data-theme="white"] :is(.premiumLabCancel, .medcardCancel, .visitServicePickerClose, .patientConsentCancel, .patientFileUploadChoose, .patientVaccinePickerClose, .financeLoadError button, .financeQuietAction, .careerChoice) {
    background: #edf3f8 !important;
    color: #2b638e !important;
    border-color: #cad8e3 !important;
  }
  html body[data-theme="white"] :is(.careerChoice b, .teamPhotoRight b, .staffAccessPanel .financeAdjustField > div, .labHistoryCommentText, .visitServicePickerText strong, .visitPickerSelect > span, .visitOwnerCommunicationHead strong, .visitVitalsTitle) { color: var(--text-main) !important; }
  html body[data-theme="white"] :is(.premiumLabsSpecies span, .labHistoryStat span, .labMetricRef, .labMetricUnit, .premiumLabTypeText small, .premiumLabResultsSection, .visitWorkspaceMeta, .visitWeightControl > span, .visitSectionTotal > span, .visitOwnerCommunicationHead span, .premiumVisitType, .premiumVisitSectionHead > span, .premiumMetaItem > span, .teamDashIdBox > span, .teamDashNav button, .patientFilesStats span, .patientDocumentsSummary span) {
    color: var(--text-muted) !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] :is([class$="Eyebrow"], [class$="Kicker"], .teamDashTitle, .hospitalCardTaskPending, .hospitalTaskType, .hospitalCardTaskTop > span, .auditOwnerBadge) {
    color: #2b638e !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] :is(.patientStatusBadge.is-active, .teamDashStatus, .teamVisitStatus, .hospitalCardTaskDone, .hospitalTaskCompleteButton, .visitCompleteButton, .visitSummaryHead > b, .visitOwnerCommunicationBadge, .labMetricStatus-normal, .moneyPlus) {
    color: #176746 !important;
    background-color: #eaf5ee !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] :is(.labMetricStatus-high, .labMetricStatus-low, .patientConsentNotice) { color: #805315 !important; background: #fff5e4 !important; }
  html body[data-theme="white"] :is(.hospitalTaskDeleteButton, .visitCardDelete, .premiumDeleteBtn, .moneyMinus) { color: #ad3345 !important; opacity: 1 !important; }
  html body[data-theme="white"] :is(.premiumVisitStatusPlanned, .patientFileUploadChoose, .labAiButton) { color: #65409b !important; background: #f0eafa !important; }
  html body[data-theme="white"] .hospitalCardTask.completed { opacity: 1 !important; }
  html body[data-theme="white"] :is(.hospitalFilter.active, .visitAiWorkspaceTab.active, .patient-tab-btn.active, .teamVisitOpenBtn) { color: #2b638e !important; }

  /* Visit workspace and AI draft use the same light surfaces as the record. */
  html body[data-theme="white"] :is(.visitWorkspaceStatus, .visitWorkspaceDate, .visitSectionTotal, .visitOwnerCommunicationPanel) { background: #edf3f8 !important; color: var(--text-main) !important; border-color: #cad8e3 !important; }
  html body[data-theme="white"] #visitAiIntakePanel > div { background: #f2edf9 !important; border-color: #d8c7e9 !important; }
  html body[data-theme="white"] #visitAiIntakePanel :is(div, span):not(:has(> div, > section, > button, > textarea)) { color: #425869 !important; }
  html body[data-theme="white"] :is(#visitAiIntakePanel button, .patientDocumentCreate, .patientConsentSubmit, .patientFileModalSave, .patientVaccineSaveButton, .visitAddLineButton, .visitTaskCreateForm .is-primary) {
    color: #ffffff !important;
    background: #2b638e !important;
    border-color: #2b638e !important;
  }
  html body[data-theme="white"] :is(#visitAiIntakePanel button, .patientDocumentCreate, .patientConsentSubmit) span { color: inherit !important; }
  html body[data-theme="white"] #visitAiRecordButton { background: #8f345b !important; border-color: #8f345b !important; }
  html body[data-theme="white"] .hospitalDischargeConfirmSubmit { background: #ad3345 !important; color: #ffffff !important; }
  html body[data-theme="white"] .hospitalDischargeConfirmSubmit span { color: inherit !important; }

  /* Legacy inline copy and task filters: remove white-on-white text. */
  html body[data-theme="white"] .page :is(div, p, small, label, span)[style*="color:"]:is([style*="rgba(255,255,255"], [style*="rgba(255, 255, 255"], [style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"], [style*="color: #FFF"]):not(:where(button *, .premiumVetAvatar *, .teamDashAvatar *, .teamPhotoPreview *, #disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) {
    color: var(--text-muted) !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] :is(.page, #staffDrawer) :is(div, span)[style*="opacity:"]:is([style*=".5"], [style*="0.5"], [style*=".6"], [style*="0.6"]):not(:where(button *, #disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) { color: var(--text-muted) !important; opacity: 1 !important; }
  html body[data-theme="white"] .taskCenterScopes button { color: #425869 !important; background: #edf3f8 !important; border-color: #cad8e3 !important; }
  html body[data-theme="white"] .taskCenterScopes button.active { color: #ffffff !important; background: #2b638e !important; }
}

/* Appointment templates: complete white-theme treatment.
   The picker and drawer were originally authored with fixed dark colours. */
@media screen {
  html body[data-theme="white"] #visitModal .appointmentTemplateSelector,
  html body[data-theme="white"] #visitModal .appointmentTemplateAddQuick {
    color: #172b3a !important;
    background: #ffffff !important;
    border-color: #d9e3eb !important;
    box-shadow: 0 6px 18px rgba(23, 43, 58, 0.06) !important;
  }

  html body[data-theme="white"] #visitModal .appointmentTemplateSelector:hover,
  html body[data-theme="white"] #visitModal .appointmentTemplateAddQuick:hover {
    background: #f5f8fb !important;
    border-color: #b4cbdc !important;
  }

  html body[data-theme="white"] #visitModal .appointmentTemplateSelector.has-template {
    background: color-mix(in srgb, var(--template-color) 8%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--template-color) 55%, #b4cbdc) !important;
  }

  html body[data-theme="white"] #visitModal .appointmentTemplateSelectorIcon {
    background: #eaf2f8 !important;
    box-shadow: none !important;
  }

  html body[data-theme="white"] #visitModal .appointmentTemplateSelector.has-template .appointmentTemplateSelectorIcon {
    background: color-mix(in srgb, var(--template-color) 13%, #ffffff) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--template-color) 32%, transparent) !important;
  }

  html body[data-theme="white"] #visitModal .appointmentTemplateSelectorLabel {
    color: #526575 !important;
  }

  html body[data-theme="white"] #visitModal #appointmentTemplateSelectorName {
    color: #172b3a !important;
  }

  html body[data-theme="white"] #visitModal #appointmentTemplateSelectorMeta {
    color: #526575 !important;
  }

  html body[data-theme="white"] #visitModal .appointmentTemplateSelectorArrow {
    color: #425869 !important;
    background: #eaf2f8 !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerBackdrop {
    background: rgba(23, 43, 58, 0.36) !important;
    backdrop-filter: blur(5px) !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerPanel {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%) !important;
    border-left-color: #d9e3eb !important;
    box-shadow: -24px 0 70px rgba(23, 43, 58, 0.18) !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerHeader {
    border-bottom-color: #d9e3eb !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerEyebrow {
    color: #2b638e !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerHeader h3 {
    color: #172b3a !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerHeader p,
  html body[data-theme="white"] .appointmentTemplateDrawerAdd small,
  html body[data-theme="white"] .appointmentTemplateText small,
  html body[data-theme="white"] .appointmentTemplateLoading,
  html body[data-theme="white"] .appointmentTemplateEmpty {
    color: #526575 !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerClose {
    color: #425869 !important;
    background: #ffffff !important;
    border-color: #d9e3eb !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerClose:hover {
    color: #172b3a !important;
    background: #eaf2f8 !important;
    border-color: #b4cbdc !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerAdd {
    color: #172b3a !important;
    background: #f4f1ff !important;
    border-color: #b9abea !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerAdd:hover {
    background: #ece7ff !important;
    border-color: #8f78d8 !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerAdd > span:first-child {
    color: #5c46ad !important;
    background: #e5ddff !important;
  }

  html body[data-theme="white"] .appointmentTemplateCard {
    color: #172b3a !important;
    background: #ffffff !important;
    border-color: #d9e3eb !important;
    box-shadow: 0 4px 14px rgba(23, 43, 58, 0.04) !important;
  }

  html body[data-theme="white"] .appointmentTemplateCard:hover {
    background: #f5f8fb !important;
    border-color: #b4cbdc !important;
  }

  html body[data-theme="white"] .appointmentTemplateCard.active {
    background: color-mix(in srgb, var(--template-color) 9%, #ffffff) !important;
    border-color: var(--template-color) !important;
  }

  html body[data-theme="white"] .appointmentTemplateText strong {
    color: #172b3a !important;
  }

  html body[data-theme="white"] .appointmentTemplateLoading,
  html body[data-theme="white"] .appointmentTemplateEmpty {
    background: #ffffff !important;
    border: 1px solid #d9e3eb !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerClear {
    color: #425869 !important;
    background: #ffffff !important;
    border-color: #d9e3eb !important;
  }

  html body[data-theme="white"] .appointmentTemplateDrawerClear:hover {
    color: #172b3a !important;
    background: #eaf2f8 !important;
    border-color: #b4cbdc !important;
  }

  html body[data-theme="white"] :is(.appointmentTemplateSelector, .appointmentTemplateAddQuick, .appointmentTemplateDrawerClose, .appointmentTemplateDrawerAdd, .appointmentTemplateCard, .appointmentTemplateDrawerClear):focus-visible {
    outline: 2px solid #2b638e !important;
    outline-offset: 2px !important;
  }
}

/* Universal confirmation dialog: readable white-theme states. */
@media screen {
  html body[data-theme="white"] .deleteModalOverlay {
    background: rgba(23, 43, 58, 0.38) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteModal {
    background:
      radial-gradient(circle at top, rgba(216, 70, 92, 0.08), transparent 38%),
      #ffffff !important;
    border-color: #ecc6cc !important;
    box-shadow: 0 28px 80px rgba(23, 43, 58, 0.22) !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteIcon {
    color: #ad3345 !important;
    background: #fceef0 !important;
    border-color: #ecc6cc !important;
    box-shadow: none !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteModal h2 {
    color: #172b3a !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteModal p {
    color: #526575 !important;
    opacity: 1 !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteModal p b {
    color: #172b3a !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteButtons .btnSecondary {
    color: #425869 !important;
    background: #f5f8fb !important;
    border: 1px solid #d9e3eb !important;
    box-shadow: none !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteButtons .btnSecondary:hover {
    color: #172b3a !important;
    background: #eaf2f8 !important;
    border-color: #b4cbdc !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteButtons .btnDanger {
    color: #ffffff !important;
    background: #c83f58 !important;
    border-color: #c83f58 !important;
    box-shadow: 0 10px 24px rgba(173, 51, 69, 0.2) !important;
  }

  html body[data-theme="white"] .deleteModalOverlay .deleteButtons .btnDanger:hover {
    background: #ad3345 !important;
    border-color: #ad3345 !important;
    box-shadow: 0 12px 28px rgba(173, 51, 69, 0.26) !important;
  }

  html body[data-theme="white"] .deleteModalOverlay[data-confirm-mode="unsaved"] .deleteModal {
    background:
      radial-gradient(circle at top, rgba(194, 132, 36, 0.1), transparent 38%),
      #ffffff !important;
    border-color: #e7cf9e !important;
  }

  html body[data-theme="white"] .deleteModalOverlay[data-confirm-mode="unsaved"] .deleteIcon {
    color: #805315 !important;
    background: #fff5e4 !important;
    border-color: #e7cf9e !important;
  }

  html body[data-theme="white"] .deleteModalOverlay.is-success .deleteModal {
    background:
      radial-gradient(circle at top, rgba(44, 143, 91, 0.09), transparent 38%),
      #ffffff !important;
    border-color: #bedcc9 !important;
  }

  html body[data-theme="white"] .deleteModalOverlay.is-success .deleteIcon {
    color: #176746 !important;
    background: #eaf5ee !important;
    border-color: #bedcc9 !important;
    box-shadow: none !important;
  }

  html body[data-theme="white"] .deleteModalOverlay.is-success .deleteButtons .primary {
    color: #ffffff !important;
    background: #277a52 !important;
    border-color: #277a52 !important;
    box-shadow: 0 10px 24px rgba(23, 103, 70, 0.18) !important;
  }

  html body[data-theme="white"] .deleteModalOverlay :is(button):focus-visible {
    outline: 2px solid #2b638e !important;
    outline-offset: 3px !important;
  }
}

@media screen {
  /* Readable secondary labels, dates and help text throughout the interface. */
  html body :is(
    #appointmentTemplateSelectorMeta,
    #monthScheduleEditorOverlay .monthScheduleRepeatHint,
    .addPetBreedEmpty small,
    .addPetBreedHint,
    .addPetLabel small,
    .addPetModalKicker,
    .addPetNotesCounter,
    .appointmentTemplateDrawerEyebrow,
    .appointmentTemplateEmpty,
    .appointmentTemplateSelectorLabel,
    .auditEventsFilters > label > span,
    .auditEventsHero > div > span,
    .auditOwnerBadge,
    .calendarViewGroupLabel,
    .careerChoice > small,
    .careerChoice.rarity-rare > small,
    .clinicSettingsKicker,
    .clinicSettingsLogoutRow > div > span,
    .financeAccountsHeading > div > p,
    .financeAccountsHeading > div > span,
    .financeAccountsTotal > span,
    .financeAdjustField > span,
    .financeAdjustHead > div > p,
    .financeCashflowAxisLabel,
    .financeCashflowDateLabel,
    .financeCashflowValueLabel,
    .financeChartEmpty p,
    .financeChartEmpty strong,
    .financeClientVisitsEmpty,
    .financeClientsFilteredEmpty > p,
    .financeCompactEmpty,
    .financeCompactOperations > .financeCompactEmpty,
    .financeControlHero .financeEyebrow,
    .financeDayBrief.is-calm > div > small,
    .financeExpenseDateLabel,
    .financeExpenseGridLabel,
    .financeExpenseHint > span,
    .financeExpenseHint p,
    .financeEyebrow,
    .financeInlineUnavailable,
    .financeKpiCard > small,
    .financeKpiCard > span,
    .financeLoadError > button,
    .financePanelHead > button,
    .financePanelHead > div > span,
    .financePositiveEmpty p,
    .financePositiveEmpty strong,
    .financePrimaryAction,
    .financePurchaseCardMeta,
    .financeQuietAction,
    .financeRefundModal .financeExpenseHint p,
    .financeTransactionsEmpty,
    .financeTransactionsEmpty span,
    .hint,
    .hospitalAdmissionField > span,
    .hospitalAdmissionHeader > div > p,
    .hospitalAdmissionSectionTitle > div > small,
    .hospitalCardTaskDone,
    .hospitalCardTaskMain > p,
    .hospitalCardTaskMain > strong,
    .hospitalCardTaskPending,
    .hospitalCardTaskTop > span,
    .hospitalCardTasksEmpty > div > small,
    .hospitalCardTasksEmpty > div > strong,
    .hospitalCardTasksHead > div > span,
    .hospitalCardTasksHead > div > strong,
    .hospitalDischargeConfirmField > span,
    .hospitalDischargeConfirmModal > p,
    .hospitalDischargeConfirmPatient > div > span,
    .hospitalEyebrow,
    .hospitalHero > div > p,
    .hospitalInfoRow > span,
    .hospitalInfoRow > strong,
    .hospitalPatientIdentity > p,
    .hospitalStatCard > small,
    .hospitalStatCard > span,
    .hospitalStatCard.hospitalStatCritical > small,
    .hospitalStatCard.hospitalStatCritical > span,
    .hospitalStatCard.hospitalStatStable > small,
    .hospitalStatCard.hospitalStatStable > span,
    .hospitalStatCard.hospitalStatWatch > small,
    .hospitalStatCard.hospitalStatWatch > span,
    .hospitalStatusBadge,
    .hospitalTaskContent > p,
    .hospitalTaskField > span,
    .hospitalTaskType,
    .hospitalTasksHeader > div > p,
    .labAiEyebrow,
    .labAiOwnerExplanationEyebrow,
    .labHistoryCommentLabel,
    .labHistoryKicker,
    .labHistoryOwnerExplanationLabel,
    .labHistoryStat > span,
    .labHistoryStat.labHistoryStatHigh > span,
    .labHistoryStat.labHistoryStatLow > span,
    .labHistoryStat.labHistoryStatOk > span,
    .labHistorySubtitle,
    .labMetricLabel,
    .labMetricRef,
    .labMetricStatus.labMetricStatus-high,
    .labMetricStatus.labMetricStatus-normal,
    .labMetricUnit,
    .medcardFieldLabel,
    .medcardFieldLabel small,
    .medcardModalFooterHint,
    .medcardModalKicker,
    .moneyMinus,
    .moneyPlus,
    .monthDaySummaryEmpty small,
    .monthDaySummaryEmpty strong,
    .monthDaySummaryEyebrow,
    .monthScheduleRepeatHint,
    .ownerPhoneCopyLabel,
    .ownerReportEmpty,
    .page[data-page="calendar"] .calendarTimelineEventNote,
    .page[data-page="calendar"] .calendarTimelineTimeLabel,
    .page[data-page="calendar"] .calendarViewGroupLabel,
    .page[data-page="hospital"] .hospitalEyebrow,
    .page[data-page="owners"] .ownerPetsEmpty,
    .page[data-page="patient"] #patientCardRoot .labMetricLabel,
    .page[data-page="patient"] .labHistoryCommentLabel,
    .page[data-page="patient"] .labHistoryKicker,
    .page[data-page="patient"] .patientVaccinationsEyebrow,
    .page[data-page="patient"] .premiumLabsKicker,
    .page[data-page="team"] .teamKpiTrend,
    .page[data-page="visit"] .visitAiConsultComposerHint,
    .page[data-page="visit"] .visitAiConsultSubtitle,
    .page[data-page="visit"] .visitSummaryHint,
    .page[data-page="visit"] .visitWorkspaceEyebrow,
    .panelMutedTitle,
    .patient-tab-btn,
    .patientConsentChecks > label > span,
    .patientConsentField > span,
    .patientConsentField.patientConsentFieldWide > span,
    .patientConsentModalHead > div > p,
    .patientConsentModalHead > div > span,
    .patientConsentNotice,
    .patientDiagnosisForm > label > span,
    .patientDiagnosisModalHeader > div > p,
    .patientDocumentBadge,
    .patientDocumentEmpty,
    .patientDocumentSelectLabel > span,
    .patientDocumentsHint,
    .patientDocumentsKicker,
    .patientDocumentsSummary > span,
    .patientFileMeta,
    .patientFileModalHead > div > p,
    .patientFileNote,
    .patientFileUploadEmpty small,
    .patientFileUploadInfo > p,
    .patientFilesEmpty p,
    .patientFilesKicker,
    .patientFinanceEmpty,
    .patientFinanceKicker,
    .patientPaymentDate span,
    .patientPaymentDate strong,
    .patientPaymentDescription span,
    .patientPaymentDescription strong,
    .patientRecordStat > div,
    .patientStatusBadge.is-active,
    .patientVaccinationsEmpty small,
    .patientVaccinationsEyebrow,
    .patientVaccinePickerEyebrow,
    .patientVaccinePickerHead > div > p,
    .patientVaccinePickerTitle,
    .patientWeightEmpty,
    .platformClinicEmpty,
    .platformClinicMeta span,
    .premiumLabCommentField > span,
    .premiumLabCommentField.premiumLabOwnerExplanationField > span,
    .premiumLabField > span,
    .premiumLabModalHeaderMain > div > p,
    .premiumLabModalKicker,
    .premiumLabOwnerExplanationHint,
    .premiumLabReferenceGrid > label > span,
    .premiumLabResultTop > div > strong,
    .premiumLabSectionHead > div > p,
    .premiumLabSectionHead > span,
    .premiumLabTypeText > small,
    .premiumLabValueField > span,
    .premiumLabsEmpty p,
    .premiumLabsKicker,
    .premiumMetaItem > span,
    .premiumMetaItem > strong,
    .premiumVetRole,
    .premiumVetSpecs > span,
    .premiumVisitEyebrow,
    .premiumVisitOpenHint,
    .premiumVisitSectionHead > span,
    .premiumVisitType,
    .scheduleStatus.premiumStatus.active,
    .servicesPremiumStat > small,
    .servicesPremiumStat > span,
    .servicesPremiumStat.servicesPremiumStatActive > small,
    .servicesPremiumStat.servicesPremiumStatActive > span,
    .servicesPremiumStat.servicesPremiumStatPrice > small,
    .servicesPremiumStat.servicesPremiumStatPrice > span,
    .specPill > span,
    .staffSkillModalHead > div > p,
    .stockAdvancedFilter > span,
    .stockPremiumCategories > button,
    .stockPremiumFilters > button,
    .stockPremiumGroupFilters > button,
    .stockPremiumStat > small,
    .stockPremiumStat > span,
    .stockPremiumStat.stockPremiumStatEmpty > small,
    .stockPremiumStat.stockPremiumStatEmpty > span,
    .stockPremiumStat.stockPremiumStatLow > small,
    .stockPremiumStat.stockPremiumStatLow > span,
    .stockPremiumStat.stockPremiumStatUnits > small,
    .stockPremiumStat.stockPremiumStatUnits > span,
    .stockPremiumStat.stockPremiumStatValue > small,
    .stockPremiumStat.stockPremiumStatValue > span,
    .stockPugBriefEyebrow,
    .stockPugBriefHealthy > div > small,
    .stockPugBriefMetrics > div > span,
    .teamDashContact > div,
    .teamDashIdBox > span,
    .teamDashInsight > div > b,
    .teamDashInsight > div > p,
    .teamDashNav > button,
    .teamDashPanelHead > span,
    .teamDashRows > p > b,
    .teamDashRows > p > span,
    .teamDashStatus,
    .teamDashTitle,
    .teamDashTop > div > p,
    .teamFinanceRow > div > b,
    .teamFinanceRow > div > span,
    .teamKpiCard > div > span,
    .teamSubHero > div > p,
    .teamVisitOwner,
    .teamVisitStatus,
    .user-profile-badge > div,
    .v-status-badge.premiumVisitStatus.premiumVisitStatusPlanned,
    .visitAiConsultComposerHint,
    .visitAiConsultSubtitle,
    .visitAiWorkspace .visitAiConsultAnswer.is-chat-reply .visitAiConsultAnswerLabel,
    .visitAiWorkspace .visitAiConsultAnswer.is-compact .visitAiConsultMeta,
    .visitAiWorkspace .visitAiConsultAnswerLabel,
    .visitAiWorkspace .visitAiConsultComposerHint,
    .visitAiWorkspace .visitAiConsultMeta,
    .visitAiWorkspaceBrand > div > span,
    .visitAiWorkspacePane > section > div > div,
    .visitAiWorkspacePane > section > div > div > div > div,
    .visitAiWorkspacePane > section > div > div > span,
    .visitAiWorkspaceTab,
    .visitAiWorkspaceTab.active,
    .visitField > span,
    .visitField > span > small,
    .visitField.visitFieldWide > span,
    .visitLinesEmpty,
    .visitPaymentEyebrow,
    .visitPaymentHistoryEmpty,
    .visitPaymentMethodsLabel,
    .visitPickerQty > span,
    .visitPickerSearch > span,
    .visitPickerSelect > span,
    .visitSectionHead > div > div > p,
    .visitSectionTotal > span,
    .visitServicePickerEyebrow,
    .visitServicePickerHeader > div > p,
    .visitServicePickerText > small,
    .visitSummaryHead > b,
    .visitSummaryHint,
    .visitSummaryPatient > div > span,
    .visitTaskMeta > span,
    .visitTasksCounter,
    .visitTasksEmpty span,
    .visitVitalField > span,
    .visitWeightControl > span,
    .visitWorkspaceDate,
    .visitWorkspaceEyebrow,
    .visitWorkspaceStatus
  ) { font-size: 13px !important; line-height: 1.45 !important; }
  html body :is(.page, [class*="Modal"], #staffDrawer) :is(div, span)[style*="font-size"]:is([style*=".75rem"], [style*="0.75rem"], [style*=".8rem"], [style*="0.8rem"]) { font-size: 13px !important; }
}

}
@layer pugReadableInterface {
  @media screen {
    html body[data-theme="white"] :is(.hospitalInfoRow > span, .hospitalCardTasksHead span, .premiumMetaItem > span, .premiumVetRole, .patientFilesFilter b, .teamKpiCard > div > span, .teamDashPanelHead > span, .teamDashRows > p > span, .financeAdjustField > span, .hospitalDischargeConfirmPatient span, .visitAiWorkspaceTab, .patientVaccinePickerTitle, .medcardInputUnit > span) { color: #526575 !important; opacity: 1 !important; }
    html body[data-theme="white"] :is(.stockPremiumCategories button, .stockPremiumGroupFilters button, .stockPremiumFilters button, .teamDashNav button, .patient-tab-btn) { color: #425869 !important; }
    html body[data-theme="white"] .premiumLabResultsSection > div { color: #425869 !important; }
    html body[data-theme="white"] .patientDiagnosisModal .is-primary { color: #ffffff !important; background: #2b638e !important; }
    html body[data-theme="white"] .patientRecordStat > div { color: #2b638e !important; }
    html body[data-theme="white"] .visitCardDelete span { color: #ad3345 !important; opacity: 1 !important; }
    html body[data-theme="white"] :is(.hospitalTaskCompleteButton, .visitCompleteButton) { background: #eaf5ee !important; }
  }
}
@layer pugReadableInterface {
  @media screen {
    html body :is(.page, .header-panel, .mac-dock, #authOverlay, [class*="Modal"], [class*="modal"], #staffDrawer) :is(div, section, article, aside, header, footer, p, li, span, strong, b, small, label, h1, h2, h3, h4):not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) { font-family: var(--pug-ui-font) !important; }
    html body :is(.page, [class*="Modal"], [class*="modal"], #staffDrawer) p:not(:where(#disA4, #disA4 *, #visitPdfRenderHost, #visitPdfRenderHost *, [id*="PdfRender"], [id*="PdfRender"] *, .clinicDocumentPreview, .clinicDocumentPreview *)) { font-size: 14px !important; }
    html body :is(.calendarMobileDoctorMeta, .calendarMobileScrollHint, .user-profile-badge > div, .auth-field label) { font-size: 13px !important; line-height: 1.45 !important; }
    html body #authOverlay :is(input, select, textarea, button) { font-family: var(--pug-ui-font) !important; font-size: 16px !important; }
    html body[data-theme="white"] .patientVaccinePickerHead :is(div, p) { opacity: 1 !important; }
  }
}
@layer pugReadableInterface {
  @media screen {
    html body :is(.financeDebtNumbers > div > span, .financeDonut > div > span, .financeMethodsLegend span, .financeMethodsLegend strong, .financeInsightPanel > div > span, .ownerReportAutoToggle b, .ownerReportPanelHead > div > span, .ownerReportTelegramCopy > span, .medcardInputUnit > span, .specializationEditorColorField strong) { font-size: 13px !important; line-height: 1.45 !important; }
    html body[data-theme="white"] .financeKpiCard.is-revenue { --finance-kpi-color: #176746 !important; }
    html body[data-theme="white"] .financeKpiCard.is-profit { --finance-kpi-color: #65409b !important; }
    html body[data-theme="white"] .financeKpiCard.is-check { --finance-kpi-color: #2b638e !important; }
    html body[data-theme="white"] .financeKpiCard.is-debt { --finance-kpi-color: #805315 !important; }
    html body[data-theme="white"] .financeDebtNumbers strong { color: #805315 !important; }
    html body[data-theme="white"] :is(.financeDonut span, .financeTransactionsEmpty) { color: #526575 !important; }
    html body[data-theme="white"] .financeRefreshButton { color: #2b638e !important; background: #edf3f8 !important; border-color: #cad8e3 !important; }
    html body[data-theme="white"] .financeAddExpenseButton { color: #ad3345 !important; background: #fff0f2 !important; border-color: #ebc2c9 !important; }
    html body[data-theme="white"] #authOverlay { background: linear-gradient(145deg, #f8fafc, #edf3f7) !important; }
    html body[data-theme="white"] .auth-glass-panel { background: #ffffff !important; border-color: #cad8e3 !important; box-shadow: 0 16px 50px rgba(36,68,89,.12) !important; }
    html body[data-theme="white"] .auth-form-zone { background: #ffffff !important; }
    html body[data-theme="white"] .auth-art-zone { background: #edf3f8 !important; border-color: #d9e3eb !important; }
    html body[data-theme="white"] .auth-header h1 { color: #172b3a !important; }
    html body[data-theme="white"] .auth-header h1 span { color: #2b638e !important; }
    html body[data-theme="white"] :is(.auth-header p, .auth-field label, .pug-bubble) { color: #526575 !important; }
    html body[data-theme="white"] .pug-bubble { background: #ffffff !important; border-color: #cad8e3 !important; }
    html body[data-theme="white"] #authOverlay :is(input, select) { color: #172b3a !important; background: #f8fafc !important; border-color: #cad8e3 !important; color-scheme: light; }
    html body[data-theme="white"] #authOverlay input::placeholder { color: #607384 !important; opacity: 1 !important; }
    html body[data-theme="white"] .auth-submit-btn { color: #ffffff !important; background: #2b638e !important; }
    html body[data-theme="white"] :is(.auth-error-msg, .financeExpenseError, .financeExpenseFilterError, .appointmentTemplateEditorError, .pugOwnerFieldError) { color: #ad3345 !important; background-color: #fff0f2 !important; }
  }
}
@layer pugReadableInterface {
  @media screen {
    html body[data-theme="white"] .taskCenterScopes button[style*="#f1d1a0"] { color: #ffffff !important; background: #2b638e !important; border-color: #2b638e !important; }
  }
}
/* PUG CRM — readable owners table in the white theme, v2.
   Append at the END of style.css, after the white/fonts patch. */
@layer pugReadableInterface {
  @media screen {
    html body[data-theme="white"] .page[data-page="owners"] .data-table-container {
      background: #f3f7fa !important;
      border-color: #d9e3eb !important;
      box-shadow: 0 12px 32px rgba(23,43,58,.06) !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .data-table th {
      color: #425869 !important;
      background: transparent !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] #owners-table-body td {
      color: #425869 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] #owners-table-body td:first-child {
      color: #172b3a !important;
      font-weight: 700 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] #owners-table-body td:nth-child(4) :is(div, span) {
      color: #425869 !important;
      opacity: 1 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] :is(.ownerPetsEmpty, .ownerPhoneEmpty, .ownerPetBreed, .ownerPetMore) {
      color: #526575 !important;
      opacity: 1 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] #owners-table-body td[colspan] {
      color: #526575 !important;
      opacity: 1 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerPetChip {
      color: #172b3a !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerPhoneCopy {
      color: #425869 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerPhoneCopy:hover {
      color: #2b638e !important;
      background: #eaf2f8 !important;
      border-color: #b4cbdc !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerPhoneCopyLabel {
      color: #425869 !important;
      background: #eaf2f8 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerPhoneCopy.is-copied {
      color: #176746 !important;
      background: #e8f5ed !important;
      border-color: #a7cfb6 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerActionBtn {
      color: #425869 !important;
      background: #fff !important;
      border-color: #d9e3eb !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerEditBtn:hover {
      color: #2b638e !important;
      background: #eaf2f8 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] .ownerDeleteBtn:hover {
      color: #ad3345 !important;
      background: #fceef0 !important;
    }
    html body[data-theme="white"] .header-panel #globalSearch {
      color: #172b3a !important;
      background: #fff !important;
    }
    html body[data-theme="white"] .header-panel #globalSearch::placeholder {
      color: #526575 !important;
      opacity: 1 !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] :is(button:focus-visible, tr:focus-visible),
    html body[data-theme="white"] .header-panel #globalSearch:focus-visible {
      outline: 2px solid #2b638e !important;
      outline-offset: 2px !important;
    }
  }
  /* Keep the existing compact cards on phones. */
  @media screen and (min-width: 761px) and (min-height: 501px), screen and (min-width: 1025px) {
    html body[data-theme="white"] .page[data-page="owners"] #owners-table-body td {
      background: #fff !important;
      border-color: #d9e3eb !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] #owners-table-body .ownerActionsCell {
      display: table-cell !important;
      vertical-align: middle !important;
    }
    html body[data-theme="white"] .page[data-page="owners"] #owners-table-body tr:hover td {
      background: #eaf2f8 !important;
      border-color: #b4cbdc !important;
    }
  }
}
/* PUG CRM — calm visit surfaces and readable payment states.
   Append at the END of style.css. White theme, screen interface only. */
@layer pugReadableInterface {
 @media screen {
  html body[data-theme="white"] .page[data-page="patient"] :is(.patientRecordSummary, .premiumVisitCard) {
    background: #fff !important;
    border-color: #d9e3eb !important;
    box-shadow: 0 8px 24px rgba(23,43,58,.05) !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] .premiumVisitCard:hover {
    background: #fff !important;
    border-color: #b4cbdc !important;
    box-shadow: 0 10px 26px rgba(23,43,58,.08) !important;
    transform: none !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] .premiumVisitAccent {
    width: 3px !important;
    background: #b4cbdc !important;
    box-shadow: none !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] .premiumVisitNode {
    background: #fff !important;
    border-color: #b4cbdc !important;
    box-shadow: none !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] :is(.patientRecordStat, .premiumVisitSection) {
    background: #f5f8fb !important;
    border: 1px solid #e0e8ef !important;
    box-shadow: none !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] :is(.premiumVisitDateIcon, .premiumVisitDiagnosisIcon, .premiumVisitSectionIcon) {
    color: #526575 !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] .premiumVisitOpenHint {
    color: #2b638e !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] .premiumVisitStatusInProgress {
    color: #805315 !important;
    background: #fff5e4 !important;
    border-color: #e7cf9e !important;
  }
  html body[data-theme="white"] .page[data-page="patient"] :is(.premiumVisitStatusCompleted, .premiumVisitPrice) {
    color: #176746 !important;
    background: #eaf5ee !important;
    border-color: #bedcc9 !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] :is(.visitSectionCard, .visitSummaryCard, .visitAiWorkspace) {
    background: #fff !important;
    border-color: #d9e3eb !important;
    box-shadow: 0 8px 24px rgba(23,43,58,.05) !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] :is(.visitSectionCard, .visitSummaryCard)::before {
    background: none !important;
    box-shadow: none !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] :is(.visitVitalsBlock, .visitAssessmentBlock, .visitOwnerCommunicationBlock, .visitOwnerCommunicationPanel) {
    background: #f5f8fb !important;
    border-color: #e0e8ef !important;
    box-shadow: none !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] .visitPaymentButton {
    color: #2b638e !important;
    background: #eaf2f8 !important;
    border-color: #b4cbdc !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] .visitPaymentButton span {
    color: inherit !important;
    opacity: 1 !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] .visitPaymentButton.is-partial {
    color: #805315 !important;
    background: #fff5e4 !important;
    border-color: #e7cf9e !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] .visitPaymentButton.is-paid {
    color: #176746 !important;
    background: #eaf5ee !important;
    border-color: #bedcc9 !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] .visitPaymentButton:hover {
    filter: none !important;
    transform: none !important;
    box-shadow: inset 0 0 0 1px currentColor !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] #visitPaymentStatus.is-unpaid {
    color: #ad3345 !important;
    background: #fceef0 !important;
    border-color: #ecc6cc !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] #visitPaymentStatus.is-partial {
    color: #805315 !important;
    background: #fff5e4 !important;
    border-color: #e7cf9e !important;
  }
  html body[data-theme="white"] .page[data-page="visit"] #visitPaymentStatus.is-paid {
    color: #176746 !important;
    background: #eaf5ee !important;
    border-color: #bedcc9 !important;
  }
  html body[data-theme="white"] .page :is(.premiumVisitCard, .visitPaymentButton):focus-visible {
    outline: 2px solid #2b638e !important;
    outline-offset: 3px !important;
  }
 }
}
/* PUG CRM — readable consultant messages, all themes.
   Append at the END of style.css, after the previous corrections. */
@layer pugReadableInterface {
 @media screen {
  html body .page[data-page="visit"] #visitAiConsultPanel :is(.visitAiConsultDirectAnswer, .visitAiConsultUserBubble, .visitAiConsultSection li, .visitAiConsultSection p, .visitAiConsultSafety li, .visitAiConsultSafety p) {
    font-family: var(--pug-ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif) !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel .visitAiConsultDirectAnswer {
    white-space: pre-wrap !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel :is(.visitAiConsultSection h4, .visitAiConsultSafety h4) {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel :is(.visitAiConsultMessageRole, .visitAiConsultAnswerLabel, .visitAiConsultMeta, .visitAiConsultBadge) {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel .visitAiConsultInput {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel .visitAiConsultSection li {
    margin: 8px 0 !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel :is(.visitAiConsultAnswer, .visitAiConsultUserBubble) {
    padding: 16px !important;
  }
 }
 @media screen and (max-width: 700px), screen and (max-width: 950px) and (max-height: 500px) {
  html body .page[data-page="visit"] #visitAiConsultPanel :is(.visitAiConsultDirectAnswer, .visitAiConsultUserBubble, .visitAiConsultSection li, .visitAiConsultSection p, .visitAiConsultSafety li, .visitAiConsultSafety p) {
    font-size: 16px !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel :is(.visitAiConsultAnswer, .visitAiConsultUserBubble) {
    padding: 12px !important;
  }
 }
}
@layer pugReadableInterface {
 @media screen {
  html body .page[data-page="visit"] #visitAiConsultPanel .visitAiConsultDirectAnswer {
    white-space: normal !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel .visitAiConsultDirectAnswer p {
    margin: 0 0 14px !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel .visitAiConsultDirectAnswer p:last-child {
    margin-bottom: 0 !important;
  }
  html body .page[data-page="visit"] #visitAiConsultPanel :is(.visitAiConsultDirectAnswer, .visitAiConsultSection) strong {
    font-size: inherit !important;
    color: inherit !important;
    font-weight: 700 !important;
  }
 }
}

@layer pugReadableInterface {
  @media screen {
    .staffAccessPanel .staffLoginInput {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      min-width: 0;
    }
    .staffAccessPanel .staffLoginInput .staffLoginPrefix {
      color: var(--text-main) !important;
      font: 600 15px/1.5 system-ui !important;
      overflow-wrap: anywhere;
      opacity: 1 !important;
    }
    .staffAccessPanel .staffLoginInput input {
      flex: 1 1 120px;
      min-width: 0;
      width: 100%;
      font-size: 16px !important;
    }
    .staffAccessPanel .staffLoginPreview {
      display: block;
      margin-top: 8px;
      color: var(--text-muted) !important;
      font: 400 14px/1.5 system-ui !important;
      overflow-wrap: anywhere;
      opacity: 1 !important;
    }
  }
}
/* ===== PUG CRM — СВЕТЛЫЙ РЕЙТИНГ КЛИНИКИ ===== */

body[data-theme="white"] .clinicRatingBoard {
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(124, 92, 255, 0.09),
      transparent 32%
    ),
    rgba(255, 255, 255, 0.82) !important;

  border: 1px solid rgba(31, 42, 58, 0.09) !important;
  border-radius: 26px;

  box-shadow:
    0 22px 55px rgba(56, 68, 84, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

/* Заголовок рейтинга */

body[data-theme="white"] .clinicRatingHead {
  align-items: center;
  margin-bottom: 16px;
}

body[data-theme="white"] .clinicRatingHead h3 {
  color: #172536 !important;
  letter-spacing: -0.02em;
}

body[data-theme="white"] .clinicRatingHead p {
  color: #748196 !important;
}

body[data-theme="white"] .clinicRatingHead > span {
  background: rgba(124, 92, 255, 0.08) !important;
  border: 1px solid rgba(124, 92, 255, 0.16) !important;
  color: #6750b8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Список сотрудников */

body[data-theme="white"] .clinicRatingTable {
  gap: 8px;
}

body[data-theme="white"] .clinicRatingRow {
  background: rgba(248, 250, 253, 0.88) !important;
  border: 1px solid rgba(45, 57, 74, 0.085) !important;
  border-radius: 18px;

  box-shadow:
    0 3px 12px rgba(39, 51, 68, 0.035) !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

body[data-theme="white"] .clinicRatingRow:hover {
  border-color: rgba(124, 92, 255, 0.2) !important;
  box-shadow:
    0 10px 24px rgba(61, 52, 100, 0.08) !important;
  transform: translateY(-1px);
}

/* Первое место */

body[data-theme="white"] .clinicRatingRow.rank-1 {
  background:
    linear-gradient(
      90deg,
      rgba(255, 247, 220, 0.96),
      rgba(255, 255, 255, 0.9) 34%
    ) !important;

  border-color: rgba(211, 164, 60, 0.24) !important;

  box-shadow:
    inset 3px 0 0 #d9a83e,
    0 5px 16px rgba(134, 98, 25, 0.055) !important;
}

/* Второе место */

body[data-theme="white"] .clinicRatingRow.rank-2 {
  background:
    linear-gradient(
      90deg,
      rgba(239, 243, 249, 0.98),
      rgba(255, 255, 255, 0.9) 34%
    ) !important;

  border-color: rgba(135, 151, 174, 0.22) !important;

  box-shadow:
    inset 3px 0 0 #aab6c7,
    0 5px 16px rgba(72, 88, 111, 0.045) !important;
}

/* Третье место */

body[data-theme="white"] .clinicRatingRow.rank-3 {
  background:
    linear-gradient(
      90deg,
      rgba(251, 239, 230, 0.96),
      rgba(255, 255, 255, 0.9) 34%
    ) !important;

  border-color: rgba(181, 119, 74, 0.2) !important;

  box-shadow:
    inset 3px 0 0 #bd7d50,
    0 5px 16px rgba(112, 68, 39, 0.045) !important;
}

/* Текущий пользователь */

body[data-theme="white"] .clinicRatingRow.current {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 85, 247, 0.12),
      transparent 36%
    ),
    linear-gradient(
      100deg,
      rgba(244, 239, 255, 0.98),
      rgba(255, 255, 255, 0.94)
    ) !important;

  border-color: rgba(124, 92, 255, 0.38) !important;

  box-shadow:
    inset 3px 0 0 #7c5cff,
    0 12px 30px rgba(88, 71, 150, 0.1) !important;
}

/* Место и аватар */

body[data-theme="white"] .clinicRatingPlace {
  color: #26364a !important;
}

body[data-theme="white"] .clinicRatingAvatar {
  background:
    linear-gradient(
      145deg,
      #43b8ee,
      #8a5cff 72%,
      #b65ce8
    ) !important;

  box-shadow:
    0 8px 18px rgba(103, 82, 204, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Имя сотрудника */

body[data-theme="white"] .clinicRatingPerson b {
  color: #1d2b3c !important;
}

body[data-theme="white"] .clinicRatingPerson span {
  color: #8490a1 !important;
}

/* Показатели */

body[data-theme="white"] .clinicRatingStats div {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(44, 56, 73, 0.075) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body[data-theme="white"] .clinicRatingStats span {
  color: #8b96a6 !important;
}

body[data-theme="white"] .clinicRatingStats b {
  color: #223247 !important;
}

/* PUG CRM — Firefox, desktop zoom and narrow desktop compatibility. */
@layer pugBrowserCompatibility {
  @media screen {
    /* Keep the dock inside the real browser viewport. Long translations scroll
       horizontally instead of shrinking or becoming transparent over content. */
    .mac-dock {
      box-sizing: border-box !important;
      width: max-content;
      max-width: calc(100vw - 24px) !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .3) transparent;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
    }

    .mac-dock::-webkit-scrollbar {
      height: 4px;
    }

    .mac-dock::-webkit-scrollbar-track {
      background: transparent;
    }

    .mac-dock::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(255, 255, 255, .3);
    }

    .mac-dock .dock-menu {
      width: max-content !important;
      min-width: max-content !important;
      flex-wrap: nowrap !important;
    }

    .mac-dock .menu-item {
      flex: 0 0 auto !important;
      min-width: 0 !important;
    }

    .mac-dock .menu-item a,
    .mac-dock .dock-text {
      white-space: nowrap !important;
    }

    body:not([data-theme="white"]) .mac-dock {
      background: rgba(13, 22, 27, .92) !important;
      border-color: rgba(255, 255, 255, .16) !important;
    }

    body[data-theme="white"] .mac-dock {
      background: rgba(255, 255, 255, .94) !important;
      border-color: rgba(35, 55, 70, .14) !important;
    }

    /* The schedule editor is a viewport-sized flex layout. Only its content
       scrolls, while the Save and Cancel actions always remain visible. */
    #monthScheduleEditorOverlay {
      box-sizing: border-box !important;
      padding: 16px !important;
      overflow: hidden !important;
    }

    #monthScheduleEditorOverlay .monthScheduleEditorModal {
      box-sizing: border-box !important;
      width: min(1100px, calc(100vw - 32px)) !important;
      max-width: 1100px !important;
      max-height: calc(100vh - 32px) !important;
      max-height: calc(100dvh - 32px) !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    #monthScheduleEditorOverlay :is(
      .monthScheduleEditorHead,
      .monthScheduleEditorTabs,
      .monthScheduleEditorColumns,
      .monthScheduleEditorFooter
    ) {
      flex: 0 0 auto !important;
    }

    #monthScheduleEditorOverlay :is(
      .monthScheduleEditorRows,
      .monthScheduleRepeatContent
    ) {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .32) transparent;
      overscroll-behavior: contain;
    }

    #monthScheduleEditorOverlay :is(
      .monthScheduleEditorRows,
      .monthScheduleRepeatContent
    )::-webkit-scrollbar {
      width: 8px;
    }

    #monthScheduleEditorOverlay :is(
      .monthScheduleEditorRows,
      .monthScheduleRepeatContent
    )::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: rgba(255, 255, 255, .32);
      background-clip: padding-box;
    }

    #monthScheduleEditorOverlay .monthScheduleEditorFooter {
      position: relative;
      z-index: 2;
    }
  }

  /* Firefox/Linux laptops and browser zoom often land in this range. */
  @media screen and (max-width: 1450px) {
    .mac-dock {
      width: calc(100vw - 24px) !important;
      padding: 6px 8px !important;
    }

    .mac-dock .dock-menu {
      gap: 3px !important;
    }

    .mac-dock .menu-item a {
      gap: 5px !important;
      padding: 9px 10px !important;
      font-size: 13px !important;
    }
  }

  @media screen and (max-height: 820px) {
    #monthScheduleEditorOverlay {
      padding: 8px !important;
    }

    #monthScheduleEditorOverlay .monthScheduleEditorModal {
      max-height: calc(100vh - 16px) !important;
      max-height: calc(100dvh - 16px) !important;
    }

    #monthScheduleEditorOverlay .monthScheduleEditorHead {
      padding: 12px 16px !important;
    }

    #monthScheduleEditorOverlay .monthScheduleEditorHead p {
      margin-top: 4px !important;
    }

    #monthScheduleEditorOverlay .monthScheduleEditorTabs,
    #monthScheduleEditorOverlay .monthScheduleEditorFooter {
      padding: 10px 16px !important;
    }

    #monthScheduleEditorOverlay .monthScheduleRepeatContent {
      padding: 14px 18px 18px !important;
    }

    #monthScheduleEditorOverlay .monthScheduleRepeatIntro {
      margin-bottom: 14px !important;
      padding: 12px 14px !important;
    }
  }
}