/* ════════════════════════════════════════════════════════
 VISUAL ESTATE CRM — Design System
 Единый стиль для всех пользователей. Цвет только в календаре.
 ════════════════════════════════════════════════════════ */

:root {
 /* ── Accent — янтарный ── */
 --accent: #525252;
 --accent-hover: #434343;
 --accent-light: #f1f1f1;
 --accent-border: #dbdbdb;
 --accent-strong: #292929;
 --accent-contrast: #fbfbfb;

 /* ── Sidebar ── */
 --sidebar-bg: #282828;
 --sidebar-bg-dark: #1a1a1a;

 /* ── Calendar color ── */
 --cal-pavel-color: #0f766e;
 --cal-pavel-light: #99f6e4;
 --cal-pavel-border: #0d9488;

 /* ── Active calendar user (default = Pavel) ── */
 --cal-user-color: var(--cal-pavel-color);
 --cal-user-light: var(--cal-pavel-light);
 --cal-user-border: var(--cal-pavel-border);

 /* ── Sidebar badge (нейтральный) ── */
 --user-badge-bg: rgba(255,255,255,.15);
 --user-badge-text: #FFFFFF;

 /* ── Legacy aliases (чтобы не ломать кнопки) ── */
 --user-primary: var(--accent);
 --user-accent: var(--accent);
 --user-light: var(--accent-light);

 /* ── Slot colors (light theme) ── */
 --slot-free-bg: rgba(0,0,0,.03);
 --slot-free-border: rgba(0,0,0,.18);
 --slot-free-text: #404040;
 --slot-free-hover-bg: rgba(0,0,0,.06);
 --slot-free-hover-br: rgba(0,0,0,.35);
 --slot-occ-bg: #fafafa;
 --slot-occ-border: #e7e7e7;
 --slot-occ-text: #d5d5d5;
 --slot-off-border: #e7e7e7;
 --slot-off-text: #d5d5d5;
 --slot-off-sub: #e7e7e7;
 --slot-book-bg: #FFF7ED;
 --slot-book-border: #FED7AA;
 --slot-book-accent: #EA580C;
 --slot-book-text: #373737;
 --slot-book-sub: #545454;

 /* ── Light surfaces ── */
 --bg-app: #f6f6f6;
 --bg-surface: #FFFFFF;
 --bg-surface-2: #f8f8f8;
 --bg-surface-3: #f1f1f1;
 --border: #dedede;
 --border-light: #eaeaea;
 --text-primary: #1c1c1c;
 --text-secondary:#5f5f5f;
 --text-muted: #9a9a9a;
 --shadow-sm: 0 4px 14px rgba(23, 23, 23,.05);
 --shadow-md: 0 12px 34px rgba(23, 23, 23,.08);
 --shadow-lg: 0 22px 56px rgba(23, 23, 23,.12);
 --radius-sm: 5px;
 --radius-md: 8px;
 --radius-lg: 12px;
 --radius-xl: 18px;
 --transition: all .14s ease;
}


/* Booking editor: all fields in one window. */
#modal-order #order-modal-box.booking-one-page{
 width:min(960px,calc(100vw - 32px))!important;
 max-width:960px!important;
 height:min(760px,calc(100vh - 32px))!important;
 max-height:calc(100vh - 32px)!important;
 border-radius:14px!important;
 overflow:hidden!important;
}

#modal-order .booking-one-page>div:first-child{padding:15px 20px!important}
#modal-order .booking-one-page #wiz-assignee-row{display:flex!important;width:220px;margin-top:0}
#modal-order .booking-one-page #wiz-assignee-row>button{width:100%}
#modal-order .booking-one-page .booking-one-page-body{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
 grid-template-areas:"client payment" "services location"!important;
 gap:12px!important;
 padding:14px!important;
 position:relative!important;
 overflow-y:auto!important;
 overflow-x:hidden!important;
 align-content:start!important;
 background:var(--bg-surface-2)!important;
}
#modal-order .booking-one-page .booking-section{
 position:static!important;
 inset:auto!important;
 min-width:0!important;
 height:auto!important;
 padding:15px!important;
 overflow:visible!important;
 border:1px solid var(--border-light)!important;
 border-radius:12px!important;
 background:var(--bg-surface)!important;
 box-shadow:0 1px 2px rgba(23, 23, 23,.03)!important;
}
#modal-order .booking-one-page .booking-section-client{grid-area:client}




#modal-order .booking-one-page .booking-section-title{
 margin:0 0 12px!important;
 padding-bottom:9px;
 border-bottom:1px solid var(--border-light);
 color:var(--text-primary)!important;
 font-size:12px!important;
 line-height:1.2!important;
 font-weight:800!important;
 letter-spacing:0!important;
 text-transform:none!important;
}
#modal-order .booking-one-page #order-svc-label{display:none!important}
#modal-order .booking-one-page #order-client-drop{max-height:210px!important}
#modal-order .booking-one-page-footer{
 padding:12px 18px!important;
 background:var(--bg-surface)!important;
 border-radius:0!important;
}

#modal-order .booking-one-page-footer #order-save-btn{min-width:150px}
body.dark #modal-order .booking-one-page .booking-section{border-color:var(--border)!important;box-shadow:none!important}
@media(max-width:720px){

 #modal-order .booking-one-page .booking-one-page-body{display:flex!important;flex-direction:column!important;padding:10px!important;gap:10px!important}
 #modal-order .booking-one-page .booking-section{padding:13px!important}
 #modal-order .booking-one-page #wiz-assignee-row{width:100%}
 #modal-order .booking-one-page-footer{padding:10px!important;gap:8px!important}
 #modal-order .booking-one-page-footer>div:last-child{width:auto!important;flex:1;justify-content:flex-end}
 #modal-order .booking-one-page-footer .btn{padding:0 12px!important}
 #modal-order .booking-one-page-footer #order-save-btn{min-width:0;flex:1}
}

/* ===== Unified header controls ===== */
:root{
 --crm-head-control-h:34px;
 --crm-head-control-inner-h:28px;
 --crm-head-control-radius:9px;
 --crm-head-control-font:12px;
}

.topbar .topbar-right,
#orders-filter-bar,
#page-calendar > div[style*="height:44px"],
#page-clients .content > div:first-child,
#page-services > .svc-page-content > div:first-child,
#page-kanban .content > div:first-child,
#page-finance .payment-page-actions,
#page-settings .topbar-right{
 align-items:center !important;
 gap:8px !important;
}

.topbar .btn,
.topbar .btn-logout,
.topbar-right .btn,
.topbar-right .btn-logout,
#orders-filter-bar .btn,
#orders-filter-bar .btn-logout,
#page-calendar > div[style*="height:44px"] .btn,
#page-calendar > div[style*="height:44px"] .btn-logout,
#page-clients .topbar .btn,
#page-clients .topbar .btn-logout,
#page-services .topbar .btn,
#page-services .topbar .btn-logout,
#page-finance .payment-page-actions .btn,
#page-finance .payment-page-actions button,
#page-settings .topbar .btn,
#page-settings .topbar .btn-logout{
 height:var(--crm-head-control-h) !important;
 min-height:var(--crm-head-control-h) !important;
 padding:0 13px !important;
 border-radius:var(--crm-head-control-radius) !important;
 font-size:var(--crm-head-control-font) !important;
 line-height:1 !important;
 font-weight:650 !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 gap:7px !important;
 box-sizing:border-box !important;
 white-space:nowrap !important;
 transform:none !important;
}

.topbar .btn svg,
.topbar .btn-logout svg,
#orders-filter-bar .btn svg,
#page-calendar > div[style*="height:44px"] .btn svg,
#page-finance .payment-page-actions .btn svg{
 width:14px !important;
 height:14px !important;
 margin:0 !important;
 flex:0 0 auto !important;
}

.topbar .btn-icon,
#orders-filter-bar .order-view-btn,
#page-calendar > div[style*="height:44px"] .cal-nav-btn,
#page-calendar > div[style*="height:44px"] button[onclick="printSchedule()"],
#orders-filter-bar button[onclick^="ofNavMonth"],
#page-finance .payment-page-actions button[aria-label],
#page-finance .payment-page-actions .btn-icon{
 width:var(--crm-head-control-h) !important;
 min-width:var(--crm-head-control-h) !important;
 padding:0 !important;
}

.search-input,
.topbar select,
#orders-filter-bar .search-input,
#orders-filter-bar .form-input,
#page-clients .search-input,
#page-clients .form-input,
#page-finance .payment-page-actions input,
#page-finance .payment-page-actions select{
 height:var(--crm-head-control-h) !important;
 min-height:var(--crm-head-control-h) !important;
 padding-top:0 !important;
 padding-bottom:0 !important;
 border-radius:var(--crm-head-control-radius) !important;
 font-size:var(--crm-head-control-font) !important;
 line-height:1 !important;
 box-sizing:border-box !important;
}

.cal-view-switch,
#of-asg-row,
#orders-filter-bar div[style*="background:var(--bg-surface-2)"][style*="border:1px solid var(--border)"],
#page-clients div[style*="background:var(--bg-surface-2)"][style*="border:1px solid var(--border)"],
#page-services .segmented-mini,
#page-finance .debt-calendar-filters,
#page-finance .payment-group-filters{
 min-height:var(--crm-head-control-h) !important;
 height:var(--crm-head-control-h) !important;
 padding:3px !important;
 border-radius:calc(var(--crm-head-control-radius) + 1px) !important;
 display:inline-flex !important;
 align-items:center !important;
 gap:3px !important;
 box-sizing:border-box !important;
}

.cal-view-btn,
#of-asg-row button,
#orders-filter-bar button[id^="of-quick-"],
.client-filter-btn,
.filter-btn,
.order-view-btn,
.segmented-mini button,
#page-finance .debt-calendar-filter,
#page-finance .payment-group-filter,
#page-kanban button{
 height:var(--crm-head-control-inner-h) !important;
 min-height:var(--crm-head-control-inner-h) !important;
 padding:0 12px !important;
 border-radius:7px !important;
 font-size:11px !important;
 line-height:1 !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 gap:6px !important;
 box-sizing:border-box !important;
 white-space:nowrap !important;
}

#orders-filter-bar #of-asg-row button{
 min-width:64px !important;
}

#page-calendar .cal-view-switch .cal-view-btn{
 min-width:58px !important;
}

#orders-filter-bar button[id^="of-quick-"]{
 min-width:54px !important;
}

#orders-filter-bar #of-month-label,
#page-calendar .cal-title-text,
#page-finance .debt-calendar-title,
#page-finance .payment-month-title{
 height:var(--crm-head-control-h) !important;
 min-height:var(--crm-head-control-h) !important;
 padding:0 12px !important;
 border-radius:var(--crm-head-control-radius) !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 box-sizing:border-box !important;
 line-height:1 !important;
}

#orders-summary{
 gap:6px !important;
}

#orders-summary > div,
#orders-summary .order-summary-card,
#orders-summary .orders-summary-card{
 min-height:var(--crm-head-control-h) !important;
 height:var(--crm-head-control-h) !important;
 border-radius:var(--crm-head-control-radius) !important;
 padding:0 10px !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 box-sizing:border-box !important;
}

#page-clients .client-filter-btn{
 min-width:72px !important;
}

#page-services .svc-tab,
#page-services .segmented-mini button{
 min-width:88px !important;
}

#page-calendar > div[style*="height:44px"]{
 min-height:50px !important;
 height:50px !important;
 padding:7px 16px !important;
}

.topbar{
 min-height:56px !important;
}

/* Tracker uses the same left-aligned title/action layout as other workspaces. */
#page-kanban > .topbar{
 justify-content:flex-start !important;
}

#page-kanban > .topbar > .page-title{
 margin-right:auto;
 text-align:left;
}

/* ===== Booking quick view: dark theme polish ===== */
body.dark #modal-booking #booking-modal-inner{
 background:#1b1b1b !important;
 border:1px solid #454545 !important;
 box-shadow:0 28px 80px rgba(0,0,0,.56) !important;
 color:#ececec !important;
}

body.dark #modal-booking #booking-modal-header{
 background:#333333 !important;
 border-bottom:1px solid #454545 !important;
 color:#fafafa !important;
}

body.dark #modal-booking #booking-modal-badges span:first-child{
 background:rgba(255,255,255,.08) !important;
 border-color:rgba(255,255,255,.72) !important;
 color:#fff !important;
}

body.dark #modal-booking #booking-modal-badges span:last-child,
body.dark #modal-booking #booking-modal-sub{
 color:#cfcfcf !important;
}

body.dark #modal-booking #booking-modal-client{
 color:#fff !important;
}

body.dark #modal-booking #booking-modal-header button{
 background:#404040 !important;
 border-color:#585858 !important;
 color:#fafafa !important;
}

body.dark #modal-booking #booking-modal-meta > div{
 background:#3f3f3f !important;
 border:1px solid #515151 !important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.dark #modal-booking #booking-modal-meta > div > div:first-child{
 color:#aeaeae !important;
}

body.dark #modal-booking #booking-modal-meta > div > div:last-child,
body.dark #modal-booking #booking-modal-meta > div > div:last-child span{
 color:#fafafa !important;
}

body.dark #modal-booking #booking-modal-meta > div:nth-child(3) > div:last-child span:first-child{
 color:#ff9aa4 !important;
}

body.dark #modal-booking #booking-modal-body-v2{
 background:#1b1b1b !important;
 color:#e4e4e4 !important;
}

body.dark #modal-booking .bm-lbl{
 color:#aeaeae !important;
}

body.dark #modal-booking #booking-modal-body-v2 button{
 background:#252525 !important;
 border-color:#4a4a4a !important;
 color:#d5d5d5 !important;
}

body.dark #modal-booking #booking-modal-body-v2 button:hover{
 background:#313131 !important;
 color:#fff !important;
}

body.dark #modal-booking #booking-modal-body-v2 > div[style*="display:flex"][style*="align-items:flex-start"]{
 color:#d2d2d2 !important;
}

body.dark #modal-booking #booking-modal-body-v2 > div[style*="border:1px solid #fecaca"],
body.dark #modal-booking #booking-modal-body-v2 > div[style*="background:#fff5f5"]{
 background:#3a2026 !important;
 border-color:#8f3d49 !important;
}

body.dark #modal-booking #booking-modal-body-v2 > div[style*="border:1px solid #bbf7d0"],
body.dark #modal-booking #booking-modal-body-v2 > div[style*="background:#f0fdf4"]{
 background:#173326 !important;
 border-color:#2f8f62 !important;
}

body.dark #modal-booking #booking-modal-body-v2 > div[style*="border:1px solid #fecaca"] span,
body.dark #modal-booking #booking-modal-body-v2 > div[style*="background:#fff5f5"] span,
body.dark #modal-booking #booking-modal-body-v2 > div[style*="border:1px solid #fecaca"] div,
body.dark #modal-booking #booking-modal-body-v2 > div[style*="background:#fff5f5"] div{
 color:#ffb4bd !important;
}

body.dark #modal-booking #booking-modal-body-v2 > div[style*="border:1px solid #bbf7d0"] span,
body.dark #modal-booking #booking-modal-body-v2 > div[style*="background:#f0fdf4"] span,
body.dark #modal-booking #booking-modal-body-v2 > div[style*="border:1px solid #bbf7d0"] div,
body.dark #modal-booking #booking-modal-body-v2 > div[style*="background:#f0fdf4"] div{
 color:#86efac !important;
}

body.dark #modal-booking #booking-modal-body-v2 input,
body.dark #modal-booking #booking-modal-body-v2 select{
 background:#252525 !important;
 border-color:#4e4e4e !important;
 color:#fafafa !important;
}

body.dark #modal-booking #booking-modal-body-v2 input:focus,
body.dark #modal-booking #booking-modal-body-v2 select:focus{
 border-color:#a2a2a2 !important;
 box-shadow:0 0 0 3px rgba(162, 162, 162,.16) !important;
}

body.dark #modal-booking #booking-modal-inner > div:last-child{
 background:#202020 !important;
 border-top-color:#404040 !important;
}

body.dark #modal-booking #booking-edit-btn{
 background:#f1f1f1 !important;
 border-color:#f1f1f1 !important;
 color:#181818 !important;
}

body.dark #modal-booking #booking-pay-btn,
body.dark #modal-booking #booking-save-dt-btn{
 background:#2f2f2f !important;
 border-color:#4a4a4a !important;
 color:#f3f3f3 !important;
}

body.dark #modal-booking #booking-pay-btn:hover,
body.dark #modal-booking #booking-save-dt-btn:hover{
 background:#393939 !important;
}

/* ── Dark theme ── */
body.dark {
 /* ── Уголь — нейтральный серый без оттенков ── */
 --bg-app:      #1a1a1a;
 --bg-surface:  #242424;
 --bg-surface-2:#2e2e2e;
 --bg-surface-3:#383838;
 --border:        #454545;
 --border-light:  #383838;
 --text-primary:  #f0f0f0;
 --text-secondary:#a0a0a0;
 --text-muted:    #707070;
 --accent:        #b7b7b7;
 --accent-hover:  #cbcbcb;
 --accent-light:  #2a2a2a;
 --accent-border: #595959;
 --accent-strong: #e1e1e1;
 --accent-contrast:#181818;
 --user-primary:  #b7b7b7;
 --user-light:    #2a2a2a;
 --shadow-sm: 0 1px 4px rgba(0,0,0,.55);
 --shadow-md: 0 4px 20px rgba(0,0,0,.65);
 --shadow-lg: 0 8px 32px rgba(0,0,0,.75);
 --user-badge-bg:   #f0f0f0;
 --user-badge-text: #1a1a1a;
 --slot-free-bg:      rgba(255,255,255,.03);
 --slot-free-border:  rgba(255,255,255,.15);
 --slot-free-text:    #a0a0a0;
 --slot-free-hover-bg:rgba(255,255,255,.07);
 --slot-free-hover-br:rgba(255,255,255,.3);
 --slot-occ-bg:       #242424;
 --slot-occ-border:   #454545;
 --slot-occ-text:     #f0f0f0;
 --slot-off-border:   #404040;
 --slot-off-text:     #707070;
 --slot-off-sub:      #454545;
 --slot-book-bg:      #2d2000;
 --slot-book-border:  #7c4a0a;
 --slot-book-accent:  #f59e0b;
 --slot-book-text:    #f0f0f0;
 --slot-book-sub:     #d97706;
 --cal-pavel-color:  #0f766e;
 --cal-pavel-light:  #062320;
 --cal-pavel-border: #0d9488;
}


/* ── ТЁМНАЯ ТЕМА: все активные кнопки — белый текст ── */
body.dark .cal-view-btn.active,
body.dark .of-quick-btn.active,
body.dark .dash-period-btn.active,
body.dark .dash-nav-btn.active,
body.dark .dash-nav-btn2.active,
body.dark .order-view-btn.active,
body.dark .filter-btn.active,
body.dark .btn.active,
body.dark .tab-btn.active,
body.dark .svc-tab.active { color: #fff !important; }



body.dark .btn:not(.btn-primary):not(.active) { background: var(--bg-surface-2); border-color: var(--border); }

/* Кнопки без явного активного класса но с bg-surface (Скачать/Загрузить/График/Блок) */
body.dark button[style*="background:var(--bg-surface)"],
body.dark button[style*="background: var(--bg-surface)"] { color: var(--text-primary) !important; }

/* ══════════════════════════════════════════════════════════
   DARK THEME — дополнительные переопределения элементов
   ══════════════════════════════════════════════════════════ */
body.dark .stat-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 4px rgba(0,0,0,.5)}
body.dark .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 1px 4px rgba(0,0,0,.5)}
body.dark th{background:var(--bg-surface-2);color:var(--text-secondary);border-bottom-color:var(--border)}
body.dark td{border-bottom-color:var(--border-light)}
body.dark .form-input{background:var(--bg-surface-2);border-color:var(--border);color:var(--text-primary)}
body.dark .form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(156, 156, 156,.15)}
body.dark .modal{background:var(--bg-surface);border:1px solid var(--border)}
body.dark .modal-header{border-bottom-color:var(--border)}
body.dark .modal-footer{border-top-color:var(--border)}
body.dark .btn{border-color:var(--border);color:var(--text-primary) !important;background:var(--bg-surface-2)}
body.dark .btn:hover{background:var(--bg-surface-3)}
body.dark .btn-primary{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);border-color:var(--accent);color:#1a1a1a !important}
body.dark .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
body.dark .search-input{background:var(--bg-surface-2);border-color:var(--border);color:var(--text-primary)}
/* ── ТЁМНАЯ ТЕМА: читаемость кнопок ── */
body.dark .btn { color: var(--text-primary) !important; }
body.dark .btn-primary,body.dark .btn.active { color: #1a1a1a !important; }
body.dark .btn svg { color: var(--text-primary); }
body.dark .btn.active { background: var(--accent) !important; color: #1a1a1a !important; border-color: var(--accent) !important; }
body.dark .dash-period-btn { color: var(--text-muted) !important; }
body.dark .dash-period-btn.active { background: var(--accent) !important; color: #1a1a1a !important; border-color: var(--accent) !important; }
body.dark .client-filter-btn{color:var(--text-secondary)}
body.dark .cal-view-btn{color:var(--text-secondary) !important;background:transparent}
body.dark .cal-view-btn.active{background:var(--accent) !important;color:#1a1a1a !important;font-weight:700}

body.dark .cal-view-btn:hover:not(.active){background:var(--bg-surface-3) !important;color:var(--text-primary) !important}
body.dark .of-quick-btn,body.dark #of-quick-all:not([aria-pressed="true"]),body.dark #of-quick-month:not([aria-pressed="true"]){color:var(--text-primary) !important}
body.dark #of-quick-month.active-month{background:var(--accent) !important;color:#fff !important}
body.dark .client-filter-btn.active{background:var(--accent);color:#1a1a1a;border-color:var(--accent)}
body.dark .order-view-btn{color:var(--text-secondary);border-color:var(--border)}
body.dark .order-view-btn.active{background:var(--accent);color:#1a1a1a}
body.dark .badge-green{background:#303030;color:#c4c4c4}
body.dark .badge-amber{background:#303030;color:#cfcfcf}
body.dark .badge-red{background:#313131;color:#d2d2d2}
body.dark .badge-blue{background:#2b2b2b;color:#c2c2c2}
body.dark .badge-gray{background:#222222;color:#a3a3a3}
body.dark .rel-new{background:#292929;color:#b2b2b2;border-color:#494949}
body.dark .rel-active{background:#2b2b2b;color:#d6d6d6;border-color:#545454}
body.dark .rel-regular{background:#2b2b2b;color:#c1c1c1;border-color:#505050}
body.dark .rel-vip{background:#2c2c2c;color:#dddddd;border-color:#616161}
body.dark .rel-sleeping{background:#252525;color:#929292;border-color:#434343}
body.dark #sidebar{background:#232323;border-right-color:transparent}
body.dark .topbar{background:rgba(36,36,36,.88);border-bottom-color:var(--border)}
body.dark .section-header{border-bottom-color:var(--border-light)}
body.dark ::-webkit-scrollbar-track{background:var(--bg-app)}
body.dark ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
body.dark ::-webkit-scrollbar-thumb:hover{background:var(--bg-surface-3)}
body.dark #notif-bar{border-top-color:var(--border)}
body.dark .drop-target{outline-color:var(--accent)}
body.dark .om-section-label{color:var(--text-muted)}
body.dark .svc-section-row{background:var(--bg-surface-2);border-bottom-color:var(--border)}
body.dark .svc-data-row:hover{background:var(--bg-surface-2)}
body.dark .svc-price-input{background:var(--bg-surface-2);border-color:var(--border);color:var(--text-primary)}
body.dark .dash-metric-card{background:var(--bg-surface);border-color:var(--border)}
body.dark .cl-row:hover{background:var(--bg-surface-2)}
body.dark .cl-row.cl-vip{background:#3A2202;background:color-mix(in srgb,#3A2202 30%,var(--bg-surface))}
body.dark .cl-ltv-bar{background:var(--border)}
body.dark .progress-bar{background:var(--bg-surface-3)}
body.dark .two-col>div>.card,.two-col .card{border-color:var(--border)}
/* Only the approved graphite palette is supported. */

/* ── ТЕМА: ГРАФИТ ── */
body.theme-graphite {
 --accent: #525252;
 --accent-hover: #434343;
 --accent-light: #f1f1f1;
 --accent-border: #dbdbdb;
 --accent-strong: #292929;
 --accent-contrast: #fbfbfb;
 --user-primary: #525252;
 --user-accent: #525252;
 --user-light: #f1f1f1;
 --cal-pavel-color: #545454;
 --cal-pavel-light: #efefef;
 --cal-pavel-border:#a2a2a2;
}
body.theme-graphite.dark {
 --accent: #b7b7b7;
 --accent-hover: #cbcbcb;
 --accent-light: #2a2a2a;
 --accent-border: #595959;
 --accent-strong: #e1e1e1;
 --accent-contrast:#181818;
 --user-primary: #b7b7b7;
 --user-light: #2a2a2a;
 --cal-pavel-color: #aeaeae;
 --cal-pavel-light: #242424;
 --cal-pavel-border:#5a5a5a;
}

/* ── Превью-свотчи в настройках ── */
.theme-swatch {
 width:100%;border:2px solid transparent;border-radius:var(--radius-lg);
 padding:14px;cursor:pointer;transition:all .16s;
 background:var(--bg-surface-2);position:relative;text-align:left;
 display:flex;flex-direction:column;gap:8px;
}
.theme-swatch.active {
 border-color:var(--accent);
 background:var(--accent-light);
}
.theme-swatch-check {
 position:absolute;top:10px;right:10px;
 width:18px;height:18px;border-radius:50%;
 background:var(--accent);display:none;
 align-items:center;justify-content:center;
}
.theme-swatch.active .theme-swatch-check { display:flex; }
.theme-swatch-dots { display:flex;gap:5px;margin-bottom:2px }
.theme-swatch-dot { width:14px;height:14px;border-radius:50% }
.theme-swatch-label { font-size:13px;font-weight:600;color:var(--text-primary) }
.theme-swatch-sub { font-size:11px;color:var(--text-muted) }

/* ═══ RESET ═══ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;background:var(--bg-app);color:var(--text-primary);min-height:100vh;transition:background .2s,color .2s}
input,select,textarea,button{font-family:inherit;font-size:14px}

/* ═══ LAYOUT ═══ */
#app{display:flex;min-height:100vh}
#sidebar{
 width:220px;
 background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-dark) 100%);
 border-right:1px solid rgba(255,255,255,.06);
 display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;left:0;height:100vh;z-index:10;
 box-shadow:18px 0 42px rgba(23, 23, 23,.08)
}
#main{flex:1;margin-left:220px;min-height:100vh;display:flex;flex-direction:column}

/* ═══ SIDEBAR ═══ */
.logo{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.logo-brand{font-size:11px;font-weight:700;color:rgba(255,255,255,.38);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.logo-title{font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px;margin-bottom:8px;letter-spacing:.01em}
.logo-user-block{display:flex;align-items:center;gap:8px;margin-top:2px}
.logo-user-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:10px;font-weight:700;flex-shrink:0}
.logo-user-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.9)}
.logo-user-role{font-size:10px;color:rgba(255,255,255,.4)}

/* User switcher (admin only) */
.user-switcher{display:flex;margin:10px 16px 0;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);overflow:hidden;background:rgba(255,255,255,.05)}
.user-sw-btn{flex:1;padding:5px 8px;border:none;background:transparent;font-size:11px;font-weight:600;cursor:pointer;color:rgba(255,255,255,.5);transition:all .15s;text-align:center}
.user-sw-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);color:var(--accent-contrast,#fff);border-radius:var(--radius-md)}

.nav-section{padding:8px 0}
.nav-label{font-size:10px;color:rgba(255,255,255,.3);font-weight:600;letter-spacing:.08em;padding:6px 16px 3px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 16px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.58);border-left:2px solid transparent;transition:var(--transition);user-select:none;position:relative;border-radius:0 12px 12px 0;margin-right:8px}
.nav-drag-handle{display:none;width:14px;flex-shrink:0;cursor:grab;color:rgba(255,255,255,.2);padding:2px;margin-left:auto;opacity:0;transition:opacity .15s}
.nav-item:hover .nav-drag-handle{opacity:1;display:flex;align-items:center}
.nav-item.dragging-nav{opacity:.5;background:rgba(255,255,255,.07)}
.nav-drop-indicator{height:2px;background:var(--accent);border-radius:1px;margin:0 16px;transition:opacity .1s}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9)}
.nav-item.active{
 color:#ffffff;font-weight:600;border-left-color:var(--accent);
 background:linear-gradient(90deg,rgba(82, 82, 82,.22) 0%,rgba(255,255,255,.10) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
.nav-icon{width:15px;height:15px;flex-shrink:0;opacity:.5}
.nav-item.active .nav-icon{opacity:1}

/* Theme + bottom controls */
.sidebar-bottom{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);margin-top:auto}
.theme-toggle{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.theme-toggle-label{font-size:11px;color:rgba(255,255,255,.4);font-weight:500}
.toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:20px;cursor:pointer;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--bg-surface);border-radius:50%;transition:.2s}
.toggle-switch input:checked + .toggle-slider{background:var(--accent)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(16px)}
.sidebar-bottom .toggle-slider{background:rgba(255,255,255,.2)}
.sidebar-bottom .toggle-switch input:checked + .toggle-slider{background:var(--accent)}

/* ═══ TOPBAR ═══ */
.topbar{
 height:56px;padding:0 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
 background:rgba(255,255,255,.88);backdrop-filter:blur(16px);
 position:sticky;top:0;z-index:5;flex-shrink:0;box-sizing:border-box
}
.page-title{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.topbar-right{display:flex;align-items:center;gap:8px}

/* ═══ BUTTONS ═══ */
.btn{
 padding:8px 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface);color:var(--text-primary);font-size:13px;
 cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:var(--transition);font-weight:600;
 box-shadow:0 1px 0 rgba(255,255,255,.8),0 4px 12px rgba(23, 23, 23,.04)
}
.btn:hover{background:var(--bg-surface-2);border-color:var(--accent-border);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn-primary{
 background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);
 border-color:var(--accent-strong);color:var(--accent-contrast,#fff)
}
.btn-primary:hover{
 background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);
 border-color:var(--accent-hover);opacity:1
}
/* Светлая тема — все активные кнопки тёмные */
body:not(.dark) .btn-primary{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);border-color:var(--accent-strong);color:var(--accent-contrast,#fff)}
body:not(.dark) .btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .cal-view-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .filter-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .client-filter-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .order-view-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .of-quick-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .dash-period-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .dash-nav-btn2.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) .tab-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
body:not(.dark) #of-quick-month.active-month{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%) !important;border-color:var(--accent-strong) !important;color:var(--accent-contrast,#fff) !important}
.btn-accent{background:var(--user-accent);border-color:var(--user-accent);color:var(--text-primary)}
.btn-accent:hover{opacity:.88}
.btn-danger{background:var(--bg-surface);border-color:var(--accent-border);color:var(--text-primary)}
.btn-danger:hover{background:var(--bg-surface-2)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:var(--radius-sm)}

/* ── Unified icon action button (tables) ── */
.icon-btn {
 display:inline-flex;align-items:center;justify-content:center;
 width:28px;height:28px;border-radius:var(--radius-sm);
 border:1px solid var(--border);background:var(--bg-surface);
 cursor:pointer;transition:all .14s;color:var(--text-muted);
 flex-shrink:0;padding:0;
}
.icon-btn:hover { background:var(--bg-surface-2);color:var(--text-primary);border-color:var(--accent-border); }
.icon-btn.danger { border-color:var(--accent-border);color:var(--text-primary);background:var(--bg-surface); }
.icon-btn.danger:hover { background:var(--accent-light);border-color:var(--accent-border); }
.btn-icon{padding:6px;border-radius:var(--radius-sm);width:32px;height:32px;justify-content:center}
.btn-logout{padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:var(--transition)}


/* ═══ CONTENT ═══ */
.content{padding:24px}

/* ═══ STATS ═══ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.stat-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.stat-label{font-size:11px;color:var(--text-muted);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-size:24px;font-weight:700;color:var(--text-primary);line-height:1}
.stat-sub{font-size:12px;color:var(--text-secondary);margin-top:4px}
.stat-positive{color:var(--accent-strong,var(--accent))}

/* Dashboard period toggle */
.dash-period-toggle{display:flex;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:7px;padding:2px;gap:2px}
.dash-period-btn{padding:3px 9px;border-radius:5px;border:none;font-size:10px;font-weight:600;cursor:pointer;color:var(--text-muted);background:transparent;transition:all .12s}
.dash-period-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);color:var(--accent-contrast,#fff);border:1px solid var(--accent-strong);font-weight:700}
.dash-nav-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;border-radius:var(--radius-md);background:none;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;text-align:left;transition:all .12s}
.dash-nav-btn:hover{background:var(--bg-surface-3);color:var(--text-primary)}
.dash-nav-btn.active{background:var(--accent-light);color:var(--accent-strong,var(--accent));font-weight:700;border:1px solid var(--accent-border)}
.dash-nav-btn2{padding:4px 12px;border:none;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;background:none;color:var(--text-muted);transition:all .12s}
.dash-nav-btn2:hover{background:var(--bg-surface-3);color:var(--text-primary)}
.dash-nav-btn2.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);color:var(--accent-contrast,#fff);font-weight:700}
.dash-widget{position:relative}
.dash-edit-mode .dash-widget::after{content:'⠿';position:absolute;top:8px;right:10px;font-size:18px;color:var(--accent);line-height:1;pointer-events:none;opacity:.6}
#dw-gap{border-radius:10px;border:2px dashed var(--accent);background:var(--accent-light)}

/* Clients table — умные строки */
.cl-row{border-bottom:1px solid var(--border-light);transition:background .1s;cursor:pointer}
.cl-row:last-child{border-bottom:none}
.cl-row:hover{background:var(--bg-surface-2)}
.cl-row.cl-selected{background:var(--accent-light) !important;border-left:3px solid var(--accent)}
.cl-row.cl-vip{border-left:3px solid #BA7517;background:color-mix(in srgb,#FAEEDA 12%,var(--bg-surface))}
.cl-row.cl-vip:hover{background:color-mix(in srgb,#FAEEDA 22%,var(--bg-surface))}
.cl-row.cl-sleeping{opacity:.55}
.cl-row td{padding:9px 8px;vertical-align:middle}
.cl-row td:first-child{padding-left:14px}
.cl-row td:last-child{padding-right:14px}
.cl-ltv-bar{height:3px;border-radius:2px;background:var(--border-light);margin-top:4px;width:70px}
.cl-ltv-fill{height:3px;border-radius:2px}

/* Боковая панель клиента */

.cl-side-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.cl-side-order{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--bg-surface-2);margin-bottom:5px;cursor:pointer;transition:background .1s}
.cl-side-order:hover{background:var(--accent-light)}
.cl-side-stat{display:flex;flex-direction:column;align-items:center;padding:10px 8px;background:var(--bg-surface-2);border-radius:10px;flex:1}
.cl-side-stat-val{font-size:18px;font-weight:700;color:var(--text-primary);line-height:1}
.cl-side-stat-lbl{font-size:10px;color:var(--text-muted);margin-top:3px;text-align:center}

/* Clients side panel */
.cl-side-section{margin-bottom:14px}
.cl-side-lbl{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.cl-side-order{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-light)}
.cl-side-order:last-child{border-bottom:none}

/* Dashboard metric card */
.dash-metric-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:default;transition:border-color .15s}
.dash-metric-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.dash-metric-card:hover{border-color:var(--accent-border)}
.dash-metric-lbl{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.dash-metric-val{font-size:26px;font-weight:700;color:var(--text-primary);line-height:1}
.dash-metric-trend{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;display:inline-flex;align-items:center}
.trend-up{background:var(--bg-surface-2);color:var(--text-primary);border:1px solid var(--border-light)}
.trend-dn{background:#f5f5f5;color:#636363;border:1px solid var(--border-light)}
.trend-ne{background:var(--bg-surface-2);color:var(--text-muted)}

/* Sparkline bars */
.dash-spark{display:flex;gap:2px;align-items:flex-end;height:26px;margin-top:8px}
.dash-spark-bar{border-radius:2px 2px 0 0;flex:1;min-width:6px;transition:opacity .15s}

/* Side panel */
.dash-side-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background .1s;border-radius:4px;margin:0 -4px;padding-left:4px;padding-right:4px}
.dash-side-row:last-child{border-bottom:none}
.dash-side-row:hover{background:var(--bg-surface-2)}
.dash-side-row.active{background:var(--accent-light)}

/* Workload bars */
.dash-wl-bar{height:6px;border-radius:3px;background:var(--bg-surface-3);flex:1}
.dash-wl-fill{height:6px;border-radius:3px;transition:width .3s}

/* ═══ TABLES ═══ */
.table-wrap{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-sm);overflow-x:auto}

table{width:100%;border-collapse:collapse;font-size:13px}
#orders-table{width:auto;min-width:100%;table-layout:auto}
th{padding:9px 16px;text-align:left;color:var(--text-secondary);font-weight:600;font-size:11px;border-bottom:1px solid var(--border);background:var(--bg-surface-2);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;line-height:1}
td{padding:11px 16px;border-bottom:1px solid var(--border-light);color:var(--text-primary);vertical-align:middle;transition:background .15s}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg-surface-2)}
.empty-row td{text-align:center;color:var(--text-muted);padding:32px;font-size:13px}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.badge-blue{background:#f1f1f1;color:#4f4f4f;border-color:#dbdbdb}
.badge-green{background:#f1f1f1;color:#3f4f46;border-color:#dbdbdb}
.badge-amber{background:#f4f4f4;color:#646464;border-color:#e1e1e1}
.badge-red{background:#f5f5f5;color:#6a6a6a;border-color:#e1e1e1}
.badge-gray{background:#f4f4f4;color:var(--text-primary);border-color:#e1e1e1}
.badge-purple{background:#f1f1f1;color:#585858;border-color:#dddddd}

/* ===== AVATAR ===== */
.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.client-cell{display:flex;align-items:center;gap:8px;white-space:nowrap}
.client-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;max-width:160px;display:inline-block;vertical-align:middle}

/* ===== CARDS ===== */
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.card-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}

/* ===== PAGES ===== */
.page{display:none}
.page.active{display:block}.page.active#page-calendar{display:flex}.page.active#page-kanban{display:flex}

/* ===== FILTER BAR ===== */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.filter-btn{padding:6px 14px;border:1px solid #d5d5d5;border-radius:10px;font-size:12px;cursor:pointer;background:var(--bg-surface);color:var(--text-secondary);font-weight:600;transition:all .12s}
.filter-btn:hover{border-color:var(--accent-border);color:var(--text-primary);background:var(--bg-surface-2)}
.filter-btn.active{background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);border-color:var(--accent-strong);color:var(--accent-contrast,#fff)}
.search-input{padding:8px 12px;border:1px solid #d5d5d5;border-radius:8px;background:var(--bg-surface);color:var(--text-primary);font-size:13px;width:220px;outline:none}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}

/* ===== MODAL ===== */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px);overflow:hidden}
.modal-bg.open{display:flex}
.modal{background:var(--bg-surface);border-radius:16px;width:520px;max-width:calc(100vw - 32px);max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.modal.modal-wide{width:min(860px, calc(100vw - 32px))}
.modal-header{padding:20px 24px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#1f1f1f 0%,#313131 100%);color:#fff}
.modal-header h3{font-size:18px;font-weight:700;line-height:1.2;color:#fff}
.modal-close{width:32px;height:32px;border:none;background:rgba(255,255,255,.08);border-radius:10px;cursor:pointer;font-size:18px;color:#fff;display:flex;align-items:center;justify-content:center;transition:.12s;flex-shrink:0}
.modal-close:hover{background:rgba(255,255,255,.16)}
.modal-body{padding:20px 24px;background:linear-gradient(180deg,var(--bg-surface) 0%,var(--bg-surface-2) 100%)}
.modal-footer{padding:14px 24px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--border-light);background:var(--bg-surface)}

/* ===== FORMS ===== */
.form-group{margin-bottom:14px}
.form-label{font-size:12px;font-weight:500;color:var(--text-primary);margin-bottom:5px;display:block}
.form-input{width:100%;padding:9px 12px;border:1px solid #d5d5d5;border-radius:8px;background:var(--bg-surface);color:var(--text-primary);font-size:13px;outline:none;transition:.12s}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
textarea.form-input{resize:vertical;min-height:72px}

/* ===== PROGRESS ===== */
.progress-bar{height:6px;background:var(--bg-surface-3);border-radius:3px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .3s}

/* ===== TIMELINE ===== */
.timeline-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-light);align-items:flex-start}
.timeline-item:last-child{border-bottom:none}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.tl-body{flex:1}
.tl-text{font-size:13px;color:var(--text-primary)}
.tl-time{font-size:11px;color:var(--text-muted);margin-top:2px}

/* ===== CALENDAR ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.cal-header-day{font-size:11px;color:var(--text-muted);text-align:center;padding:4px;font-weight:500}
.cal-day{min-height:40px;padding:4px;border-radius:6px;font-size:12px;color:var(--text-secondary);position:relative;cursor:default}
.cal-day.has-event{background:var(--accent-light);color:var(--accent-strong,var(--accent));cursor:pointer;font-weight:600}
.cal-day.today{background:var(--accent);color:var(--accent-contrast,#fff);font-weight:700}
.cal-day.today .mini-event{background:color-mix(in srgb,var(--accent) 86%, #fff 14%);color:var(--accent-contrast,#fff)}
.mini-event{font-size:10px;background:color-mix(in srgb,var(--accent-light) 78%, var(--bg-surface) 22%);color:var(--accent-strong,var(--accent));border-radius:3px;padding:1px 4px;margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal-month-title{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}

/* ===== SECTION HEADER ===== */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:14px;font-weight:600;color:var(--text-primary)}

/* ===== TOAST ===== */
.topbar-logout{display:flex;align-items:center;gap:10px}
.user-info{display:flex;flex-direction:column;align-items:flex-end}
.user-info-name{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.2}
.user-info-role{font-size:11px;color:var(--text-muted)}
.btn-logout{padding:7px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-surface);color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .12s}
.btn-logout:hover{background:var(--bg-surface-2);border-color:var(--accent-border)}