/* Approved graphite concept applied to the working desktop CRM. */
body{--crm-glass-surface:rgba(255,255,255,.77);--crm-glass-chrome:rgba(255,255,255,.86);--crm-glass-edge:rgba(255,255,255,.7);--crm-glass-shadow:0 14px 38px rgba(22,22,22,.07);--crm-glass-haze:rgba(75,75,75,.06)}
body.dark{--crm-glass-surface:rgba(35,35,37,.76);--crm-glass-chrome:rgba(35,35,37,.88);--crm-glass-edge:rgba(255,255,255,.11);--crm-glass-shadow:0 16px 42px rgba(0,0,0,.2);--crm-glass-haze:rgba(255,255,255,.045)}
/* Keep wheel, touch and keyboard scrolling; remove the browser chrome from CRM workspaces. */
html,body,#app,#main,#sidebar,#app .page,#app .content,#app .modal,#app .modal-body,#app .booking-v5-service-results,#app .settings-content,#app .finance-content{scrollbar-width:none!important}
html::-webkit-scrollbar,body::-webkit-scrollbar,#app::-webkit-scrollbar,#main::-webkit-scrollbar,#sidebar::-webkit-scrollbar,#app .page::-webkit-scrollbar,#app .content::-webkit-scrollbar,#app .modal::-webkit-scrollbar,#app .modal-body::-webkit-scrollbar,#app .booking-v5-service-results::-webkit-scrollbar,#app .settings-content::-webkit-scrollbar,#app .finance-content::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
#main{background:var(--bg-app)}
#sidebar{background:linear-gradient(155deg,rgba(38,38,40,.94),rgba(22,22,23,.96))!important;backdrop-filter:blur(24px) saturate(1.08);-webkit-backdrop-filter:blur(24px) saturate(1.08)}
body.dark #sidebar{background:linear-gradient(155deg,rgba(32,32,34,.94),rgba(19,19,20,.97))!important}
.topbar{background:var(--crm-glass-chrome)!important;border-bottom-color:var(--crm-glass-edge)!important;backdrop-filter:blur(22px) saturate(1.12);-webkit-backdrop-filter:blur(22px) saturate(1.12)}
#page-calendar .calendar-commandbar{background:var(--crm-glass-chrome)!important;border-bottom-color:var(--crm-glass-edge)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#page-calendar #cal-week-header,#page-calendar #cal-day-header{background:var(--crm-glass-chrome)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card,#page-dashboard .an-kpi,#page-dashboard .an-panel,#page-kanban .kanban-col{background:var(--crm-glass-surface);border-color:var(--crm-glass-edge);box-shadow:var(--crm-glass-shadow);backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08)}
#page-dashboard .an-kpi{min-height:128px}
#page-dashboard .an-panel{box-shadow:var(--crm-glass-shadow)}
#page-kanban .kanban-col{min-height:0}
body .btn:not(.btn-primary),body .cal-nav-btn,body .cal-view-switch{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body :is(.btn,.btn-logout,.icon-btn,.cal-nav-btn,.nav-item){transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}
body :is(.btn,.btn-logout,.icon-btn,.cal-nav-btn):hover{transform:translateY(-1px);box-shadow:0 5px 15px rgba(0,0,0,.12)}
body :is(.btn,.btn-logout,.icon-btn,.cal-nav-btn):active{transform:translateY(0) scale(.985)}
body .nav-item:hover{transform:translateX(2px)}
.page.active{animation:crm-glass-page-in .2s ease-out both}
.modal-bg.open{background:rgba(9,9,10,.56)!important;backdrop-filter:blur(14px) saturate(.84)!important;-webkit-backdrop-filter:blur(14px) saturate(.84)!important;animation:crm-glass-fade .18s ease-out both}
.modal-bg.open > .modal,.modal-bg.open > #order-modal-box{animation:crm-glass-modal-in .22s cubic-bezier(.2,.72,.2,1) both}
.modal-bg.open > .modal{background:var(--crm-glass-chrome);border:1px solid var(--crm-glass-edge);box-shadow:0 28px 74px rgba(0,0,0,.29),inset 0 1px rgba(255,255,255,.09);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
#modal-order #order-modal-box.booking-wizard-v5{--bw-bg:rgba(250,250,250,.9);--bw-side:rgba(239,239,239,.88);width:min(1120px,calc(100vw - 48px))!important;max-width:1120px!important;height:min(760px,calc(100dvh - 48px))!important;border-color:var(--crm-glass-edge)!important;border-radius:18px!important;box-shadow:0 36px 90px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.4)!important;backdrop-filter:blur(28px) saturate(1.08);-webkit-backdrop-filter:blur(28px) saturate(1.08)}
body.dark #modal-order #order-modal-box.booking-wizard-v5{--bw-bg:rgba(29,29,31,.88);--bw-side:rgba(39,39,41,.88);border-color:rgba(255,255,255,.18)!important;box-shadow:0 36px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.11)!important}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-nav-item:hover{transform:translateX(2px)}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-track{transition-duration:.32s}
/* The real service catalog occupies the first step instead of a blank dropdown. */
#modal-order #order-modal-box.booking-wizard-v5 #order-svc-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px;align-items:start}
#modal-order #order-modal-box.booking-wizard-v5 .svc2-wrap{display:none!important}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-search-wrap{grid-column:1;grid-row:1;margin:0!important;min-width:0}
#modal-order #order-modal-box.booking-wizard-v5 #svc2-table{grid-column:2;grid-row:1;min-width:0;margin:0!important}
#modal-order #order-modal-box.booking-wizard-v5 #svc2-total-wrap{grid-column:2;grid-row:2;margin-top:0!important}
#modal-order #order-modal-box.booking-wizard-v5 .svc2-selected-empty{min-height:164px}
#modal-order #order-modal-box.booking-wizard-v5 .svc2-selected-empty-text{padding:25px 16px;color:var(--bw-muted);font-size:13px;line-height:1.5}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-service-results{position:static;z-index:auto;display:block;max-height:min(330px,43dvh);margin-top:8px;border-radius:8px;background:var(--bw-side);box-shadow:none}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-service-results[hidden]{display:none!important}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-service-result{min-height:48px;border-bottom:1px solid var(--bw-line);border-radius:6px}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-service-result:last-child{border-bottom:0}
@media(min-width:1600px){.settings-content > .settings-section,.finance-content > .settings-section,.directory-workspace{max-width:none;margin-inline:0}#page-dashboard .dashboard-workspace{padding-bottom:0!important}#page-dashboard .dashboard-workspace #orders-analytics-view{max-width:none;padding-bottom:0!important}}
@media(max-width:900px){#modal-order #order-modal-box.booking-wizard-v5 #order-svc-content{display:flex;flex-direction:column}#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-search-wrap{order:0}#modal-order #order-modal-box.booking-wizard-v5 #svc2-table{order:1}#modal-order #order-modal-box.booking-wizard-v5 #svc2-total-wrap{order:2}#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-search-wrap,#modal-order #order-modal-box.booking-wizard-v5 #svc2-table,#modal-order #order-modal-box.booking-wizard-v5 #svc2-total-wrap{width:100%}#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-service-results{max-height:190px}}
@media(max-width:720px){#modal-order #order-modal-box.booking-wizard-v5{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;border-radius:12px!important}}
@media(max-width:420px){#modal-order #order-modal-box.booking-wizard-v5{width:100vw!important;max-width:100vw!important;height:100dvh!important;border-radius:0!important}}
@keyframes crm-glass-page-in{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes crm-glass-fade{from{opacity:0}to{opacity:1}}
@keyframes crm-glass-modal-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .page.active,.modal-bg.open,.modal-bg.open > .modal,.modal-bg.open > #order-modal-box{animation:none!important}
 body :is(.btn,.btn-logout,.icon-btn,.cal-nav-btn,.nav-item),#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-nav-item{transition:none!important;transform:none!important}
 /* Keep the selected panel's position; remove only its animated transition. */
 #modal-order #order-modal-box.booking-wizard-v5 .booking-v5-track{transition:none!important}
}

/* Concept parity: a restrained graphite depth system across actual CRM screens. */
body{--crm-concept-panel:rgba(255,255,255,.79);--crm-concept-panel-hi:rgba(255,255,255,.9);--crm-concept-stroke:rgba(45,45,45,.09);--crm-concept-shine:rgba(255,255,255,.78);--crm-concept-shadow:0 12px 32px rgba(20,20,20,.07)}
body.dark{--crm-concept-panel:rgba(36,36,38,.78);--crm-concept-panel-hi:rgba(42,42,44,.9);--crm-concept-stroke:rgba(255,255,255,.105);--crm-concept-shine:rgba(255,255,255,.09);--crm-concept-shadow:0 14px 36px rgba(0,0,0,.25)}
body,#main{background:var(--bg-app)!important}
/* A scrolling data table must be an opaque layer. Nested backdrop blurs left
   visible vertical seams beside the sticky order columns. */
#page-orders #orders-table-view,#page-orders #orders-table-view .table-wrap{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#page-orders #orders-table-view .table-wrap{background:var(--bg-surface)!important}
.topbar{box-shadow:0 1px 0 var(--crm-concept-shine),0 9px 25px rgba(0,0,0,.045)}
body.dark .topbar{box-shadow:inset 0 1px var(--crm-concept-shine),0 12px 30px rgba(0,0,0,.16)}
:is(.card,.table-wrap,.settings-block,.svc-card,.payment-panel,.debt-card,.kanban-toolbar,.kanban-col,#page-dashboard .an-kpi,#page-dashboard .an-panel,#page-clients .clients-commandbar,#page-orders .orders-workspace > div){border-color:var(--crm-concept-stroke);box-shadow:var(--crm-concept-shadow),inset 0 1px var(--crm-concept-shine);backdrop-filter:blur(22px) saturate(1.08);-webkit-backdrop-filter:blur(22px) saturate(1.08)}
:is(.card,.table-wrap,.settings-block,.svc-card,.payment-panel,.debt-card,.kanban-toolbar,.kanban-col,#page-dashboard .an-kpi,#page-dashboard .an-panel){background:var(--crm-concept-panel)!important}
body.dark :is(.card,.table-wrap,.settings-block,.svc-card,.payment-panel,.debt-card,.kanban-toolbar,.kanban-col,#page-dashboard .an-kpi,#page-dashboard .an-panel){background:var(--crm-concept-panel)!important}
.settings-block{border-color:var(--crm-concept-stroke)!important}
#page-dashboard .an-shell{gap:12px}
#page-dashboard .an-context{margin:2px 0 4px}
#page-dashboard .an-plain-kpis{gap:12px}
#page-dashboard .an-plain-kpis .an-kpi{min-height:112px;padding:17px 19px}
#page-dashboard .an-plain-kpis .an-kpi-label{font-size:12px}
#page-dashboard .an-plain-kpis .an-kpi-value{font-size:clamp(22px,1.55vw,29px)}
#page-dashboard .an-plain-kpis .an-kpi-basis{font-size:11px}
#page-dashboard .an-comparison-note{margin:0}
#page-dashboard .an-main-grid{grid-template-columns:minmax(0,1.8fr) minmax(320px,.85fr);gap:12px;align-items:start}
#page-dashboard .an-work-chart,#page-dashboard .an-next-actions{min-height:0;padding:17px 20px}
#page-dashboard .an-work-chart > .an-table-scroll{overflow:hidden;max-height:264px}
#page-dashboard .an-work-chart > .an-table-scroll svg{width:100%;height:250px;min-width:0;max-height:250px}
#page-dashboard .an-work-chart details{margin-top:8px}
#page-dashboard .an-next-actions > button{padding:13px 0}
#page-dashboard .an-next-actions strong{font-size:12px}
#page-dashboard .an-next-actions small{font-size:11px;margin-top:2px}
#page-dashboard .an-next-actions b{font-size:13px}
#page-dashboard .an-calculation-help{margin-top:0}
#page-dashboard .an-overview-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#page-dashboard .an-overview-lists .an-panel{padding:0;overflow:hidden}
#page-dashboard .an-overview-lists .an-panel-heading{padding:13px 18px;border-bottom:1px solid var(--crm-concept-stroke);align-items:center}
#page-dashboard .an-overview-lists .an-text-link{padding:0;color:var(--text-secondary);font-size:11px}
#page-dashboard .an-overview-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:9px 18px;border:0;border-bottom:1px solid var(--crm-concept-stroke);background:transparent;color:var(--text-primary);text-align:left;font:inherit;cursor:pointer;transition:background .16s ease}
#page-dashboard .an-overview-row:last-child{border-bottom:0}
#page-dashboard .an-overview-row:hover{background:var(--crm-concept-panel-hi)}
#page-dashboard .an-overview-row strong,#page-dashboard .an-overview-row small{display:block}
#page-dashboard .an-overview-row strong{font-size:12px}
#page-dashboard .an-overview-row small{margin-top:3px;color:var(--text-muted);font-size:10px}
#page-dashboard .an-overview-row b{color:var(--semantic-danger,#bd3838);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
#page-dashboard .an-overview-lists .an-empty{padding:16px 18px}
#page-dashboard .an-panel{transition:border-color .2s ease,box-shadow .22s ease,transform .22s ease}
#page-dashboard .an-panel:hover{border-color:rgba(180,180,180,.28)}
body.dark #page-dashboard .an-panel:hover{border-color:rgba(255,255,255,.18)}
@media(max-width:1100px){#page-dashboard .an-main-grid{grid-template-columns:minmax(0,1fr)}#page-dashboard .an-work-chart > .an-table-scroll{overflow-x:auto}}
@media(max-width:720px){#page-dashboard .an-overview-lists{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){#page-dashboard .an-work-chart > .an-table-scroll svg{min-width:640px}#page-dashboard .an-plain-kpis .an-kpi{min-height:102px}}