/* VE CRM / Graphite Glass. Canonical component and responsive contract.
   Semantic colours: crm-design-tokens.css; workflow fills: styles-graphite-approved.css.
   This sheet is intentionally LAST after the legacy platform adapters. */
body {
 --ds-space-1:4px; --ds-space-2:8px; --ds-space-3:12px; --ds-space-4:16px; --ds-space-6:24px;
 --ds-radius-control:8px; --ds-radius-panel:12px; --ds-radius-modal:18px;
 --ds-motion-fast:140ms; --ds-motion-page:200ms; --ds-motion-slide:320ms;
 --ds-ease:cubic-bezier(.2,.72,.2,1);
 --ds-glass-blur:22px; --ds-touch-target:44px;
}
/* The notes shell previously used the undefined legacy --bg-main alias. */
#page-materials .materials-shell {background:var(--bg-app)}
/* The default authentication shell is graphite; an explicit brand image keeps
   its inline priority. Decorative legacy emerald glows must not bleed through. */
#login-screen {
 background-color:#131313;background-image:none;
 background-size:cover;background-position:center;background-repeat:no-repeat;
 color-scheme:dark;
 --login-control-bg:#242424;--login-control-text:#f2f2f2;
 --border-control:#777777;--text-primary:#f2f2f2;
 --action-primary:#f2f2f2;--action-primary-hover:#ffffff;--action-primary-contrast:#242424;
 --crm-focus:0 0 0 3px #cecece;
}
#login-screen.has-login-cover .login-bg-overlay {background:rgba(0,0,0,var(--login-cover-dim,.5))!important}
#login-screen :is(.login-pw-inner,.login-pw-input) {background:var(--login-control-bg)!important}
#login-screen .login-pw-input {color:var(--login-control-text)!important;caret-color:var(--login-control-text)}
/* Chromium/Yandex autofill may paint its own light background despite normal
   background declarations. Keep its text and inset fill on the dark login plane. */
#login-screen .login-pw-input:is(:autofill,:-webkit-autofill) {
 -webkit-text-fill-color:var(--login-control-text);
 box-shadow:0 0 0 1000px var(--login-control-bg) inset!important;
 transition:none!important;
}
#login-screen::before {background-image:none}
#login-screen .login-bg-overlay::after {background:none}
#login-screen .login-context-kicker {color:#a4a4a4}
#settings-section-design .login-preview-submit {background:var(--action-primary);color:var(--action-primary-contrast)}
#app #crm-sync-state[hidden] {display:none!important}
#app #crm-sync-state.crm-sync-warning {
 position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:90;
 box-sizing:border-box;width:max-content;max-width:min(420px,calc(100vw - 32px));
 display:flex;align-items:center;gap:12px;padding:10px 12px;
 border:1px solid var(--border);border-radius:var(--ds-radius-panel);
 background:var(--bg-surface);color:var(--text-primary);box-shadow:0 8px 24px rgba(0,0,0,.16);
}
#app #crm-sync-state [data-sync-message] {min-width:0;overflow-wrap:anywhere}
#app #crm-sync-state button {flex:none;min-width:44px;min-height:44px}
@media(forced-colors:active) {
 #app #crm-sync-state.crm-sync-warning {background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}
}
/* Refractive chrome may overlap content; nested data planes must stay solid. */
#app :is(.table-wrap,.svc-grid,.svc-data-row,.svc-hero,.svc-section,.svc-summary) {
 backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
#app .table-wrap {background:var(--bg-surface)!important;box-shadow:none}
/* Dashboard and tracker data planes share the opaque table surface; glass
   remains on chrome and semantic booking/payment fills remain untouched. */
#app #page-dashboard :is(.an-panel,.an-kpi),
#app #page-kanban .kanban-col {
 background:var(--bg-surface)!important;
 backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
#svc-page-catalog :is(.svc-hero,.svc-data-row,.svc-grid) {box-shadow:none!important}
#svc-page-catalog .svc-hero-icon {background:transparent!important;border:0!important;box-shadow:none!important}
body :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
 outline:2px solid var(--accent);outline-offset:3px;
}
#modal-order :is(.booking-v5-slide,.booking-v5-nav,.booking-v5-service-results) {scrollbar-width:none}
#modal-order :is(.booking-v5-slide,.booking-v5-nav,.booking-v5-service-results)::-webkit-scrollbar {display:none;width:0;height:0}
/* Keep footer labels and actions available when text is enlarged. */
#modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer {flex-wrap:wrap!important;gap:8px;max-height:45dvh;overflow-y:auto!important}
#modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer > div {min-width:0;max-width:100%;flex-wrap:wrap!important}
#modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer > div:last-child {flex-wrap:wrap!important}
#modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer button {flex:0 0 auto!important;width:auto!important;min-width:max-content!important;height:auto!important;min-height:var(--control-height,36px)!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere}
#modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer #wiz-block-btn {min-width:44px!important}
#modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer #order-save-error {flex:1 0 100%;min-width:0;overflow-wrap:anywhere}
#modal-order #order-modal-box.booking-wizard-v5 .booking-v5-nav-number {width:auto;min-width:24px;height:auto;min-height:24px;padding:2px}
@media(max-width:767px) and (max-height:600px) {
 #modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer > div:last-child {flex:1 1 100%!important}
}
/* Preserve a usable, independently scrolling slide on short browser viewports. */
@media(max-width:720px) and (max-height:500px) {
 #modal-order #order-modal-box.booking-wizard-v5 > div:first-child {padding:5px 12px!important}
 #modal-order #order-modal-box.booking-wizard-v5 #order-modal-title-display {font-size:16px!important}
 #modal-order #order-modal-box.booking-wizard-v5 #wiz-step-1 {margin-top:3px!important}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-v5-nav {padding:3px 8px!important}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-v5-slide {padding:8px 14px 20px!important}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-v5-heading {margin-bottom:10px!important}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer {min-height:0!important;padding:5px 10px!important;gap:4px!important}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer > div:last-child {display:flex!important;flex:0 1 auto!important;grid-template-columns:none!important;gap:6px!important;justify-content:flex-end!important}
}
@media(max-width:1200px) {
 #clients-side-panel:not(.mobile-open) {display:none!important}
 #cal-sch-side-panel[style*="width:0"],#cal-sch-side-panel[style*="width: 0"] {display:none!important}
}
@media(max-width:1100px) {
 #app #page-calendar #cal-main-area[data-cal-view="week"] #cal-week-view {min-width:1200px!important;width:max(100%,1200px)!important}
 #page-calendar #cal-week-view .cal-booking-v2 .cal-booking-name {-webkit-line-clamp:1;max-height:16px}
 #app #page-calendar > .calendar-commandbar[style] {height:auto!important;max-height:none!important;min-height:52px;flex-wrap:wrap;padding:8px 12px!important;gap:8px!important;overflow:visible!important}
 #page-calendar .calendar-commandbar > div {flex-wrap:wrap;max-width:100%;min-width:0;gap:6px!important}
 #page-calendar .calendar-commandbar > div:last-child {flex:1 1 100%;justify-content:flex-start}
 #page-calendar .cal-view-switch {flex-shrink:0}
}
@media(max-width:767px) {
 #app #main .workspace-page > .workspace-topbar {height:auto!important;max-height:none!important;flex:0 0 auto!important;flex-wrap:wrap!important;overflow:visible!important;padding-block:8px!important}
 #app #main .workspace-page > .workspace-topbar .page-title {flex:1 1 130px;white-space:normal;overflow:visible;text-overflow:clip}
 #app #main .workspace-page > .workspace-topbar .topbar-right {width:auto!important;max-width:100%!important;overflow:visible!important;flex:0 1 auto!important}
 #app #main .workspace-page > .workspace-topbar .topbar-right > button {width:auto!important;max-width:100%!important;height:auto!important;min-height:44px;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere}
 /* Week remains a usable timeline with local horizontal pan, never seven 40px cards. */
 #app #page-calendar #cal-main-area[data-cal-view="week"] #cal-week-view {min-width:1050px!important;width:1050px!important}
 #app #page-calendar #cal-main-area {overflow:auto!important;overscroll-behavior:contain}
 #page-calendar .calendar-commandbar > div:first-child {width:100%;flex:1 1 100%!important}
 #app #page-calendar .cal-view-switch {display:flex!important;margin-left:0!important;flex:1 1 100%!important;justify-content:center;height:auto!important}
 #page-calendar .cal-view-btn {flex:1;min-height:40px}
 #page-calendar .calendar-commandbar > div:last-child {overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
 #page-calendar .calendar-commandbar > div:last-child > button {flex-shrink:0}
 #page-calendar .cal-title-text {flex:1 1 0;text-align:center;min-width:0!important;height:auto!important;min-height:44px!important;font-size:12px;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere;line-height:1.2!important}
 #page-calendar .cal-mobile-export-btn {display:none!important}
 #page-calendar #cal-month-view {padding:6px!important}
 #page-calendar #cal-block-panel {left:8px!important;right:8px;bottom:8px!important;transform:none!important;flex-wrap:wrap;max-width:calc(100vw - 16px);padding:12px!important}
 #page-calendar #cal-block-type-row {flex-wrap:wrap}
 /* Orders: use the same cells and actions as desktop, arranged as compact cards. */
 #page-orders .orders-workspace {display:block!important;overflow-x:hidden!important;overflow-y:auto!important}
 #page-orders #orders-table-view {height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;flex:none!important;margin-top:12px}
 #page-orders #orders-table-view .table-wrap {border:0;background:transparent!important;overflow:visible!important}
 #page-orders #orders-table {display:block!important;width:100%!important;min-width:0!important;table-layout:auto!important}
 #page-orders #orders-table thead {display:none!important}
 #page-orders #orders-body {display:grid;gap:10px;padding:0}
 #page-orders #orders-body > tr {display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px;border:1px solid var(--border-light);border-radius:var(--ds-radius-panel);background:var(--bg-surface)}
 #page-orders #orders-body > tr > td {display:none!important;position:static!important;left:auto!important;min-width:0!important;max-width:none!important;width:auto!important;height:auto!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
 #page-orders #orders-body > tr > td:is([data-col-id="client"],[data-col-id="date"],[data-col-id="status"],[data-col-id="amount"],[data-col-id="type"]):not([style*="display: none"]):not([style*="display:none"]) {display:block!important;white-space:normal!important}
 #page-orders #orders-body [data-col-id="client"] {grid-column:1/-1;grid-row:1}
 #page-orders #orders-body [data-col-id="client"] :is(.client-presentation-name,.client-name) {min-width:0;white-space:normal!important;overflow-wrap:anywhere}
 #page-orders #orders-body [data-col-id="date"] {grid-column:1;grid-row:2;color:var(--text-muted)}
 #page-orders #orders-body [data-col-id="status"] {grid-column:2;grid-row:2}
 #page-orders #orders-body [data-col-id="type"] {grid-column:1;grid-row:3;color:var(--text-muted)}
 #page-orders #orders-body [data-col-id="amount"] {grid-column:2;grid-row:3}
 #page-orders #orders-body .empty-row > td {display:block!important;grid-column:1/-1}
 #page-orders #orders-body .orders-group-header > td {display:block!important;grid-column:1/-1}
 #page-orders #orders-body .orders-group-header > td > div {flex-wrap:wrap}
 #page-orders .orders-metric {padding:10px!important;border:0!important;border-bottom:1px solid var(--border-light)!important;min-width:0}
 #page-orders .orders-metric:last-child {grid-column:auto!important}
 #page-orders .orders-metric-label,#page-orders .orders-metric-hint {overflow-wrap:anywhere}
 #page-orders .orders-metric-handle {display:none}
 #page-orders #orders-filter-bar {position:static!important;top:auto!important;min-width:0!important}
 #page-orders #orders-filter-bar .orders-period-control {min-width:0!important;max-width:100%;width:100%;flex-wrap:wrap}
 #page-orders #orders-filter-bar #of-month-nav {min-width:0!important;flex:1 1 100%;justify-content:space-between;max-width:100%}
 /* Client table becomes an identity/contact card; selecting it keeps the existing card flow. */
 #page-clients table:has(.cl-row),#page-clients table:has(.cl-row) tbody {display:block;min-width:0!important;width:100%!important}
 #page-clients table:has(.cl-row) thead {display:none}
 #page-clients .cl-row {display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 8px;padding:12px;border-bottom:1px solid var(--border-light)}
 #page-clients .cl-row > td {display:none;padding:0!important;max-width:none!important;min-width:0}
 #page-clients .cl-row > td:nth-child(1) {display:block;grid-column:1;grid-row:1/3}
 #page-clients .cl-row > td:nth-child(2) {display:block;grid-column:2}
 #page-clients .cl-row > td:nth-child(2) > div {white-space:normal!important;overflow-wrap:anywhere}
 #page-clients .cl-row > td:nth-child(3) {display:block;grid-column:2}
 /* Service identity, price and all three actions stay reachable without a hidden strip. */
 #svc-page-catalog .svc-data-row {display:grid!important;grid-template-columns:20px minmax(0,1fr) repeat(3,44px)!important;gap:8px!important;padding:12px!important}
 #svc-page-catalog .svc-data-row > div:nth-child(2) {grid-column:2/-1;grid-row:1}
 #svc-page-catalog .svc-name-text {white-space:normal!important}
 #svc-page-catalog .svc-drag-handle {grid-column:1;grid-row:1}
 #svc-page-catalog .svc-format-cell {grid-column:1/3;grid-row:2}
 #svc-page-catalog .svc-price-cell {grid-column:1/3;grid-row:3}
 #svc-page-catalog .svc-price-input {width:100%!important;min-width:0}
 #svc-page-catalog .svc-data-row > button {grid-row:3;width:44px!important;height:44px!important}
 #svc-page-catalog .svc-hero {padding:16px!important}
 #page-dashboard .an-tabs {max-width:100%;overflow-x:auto}
 #page-dashboard .an-tabs > button {flex:0 0 auto;padding-inline:10px}
 #page-dashboard .an-periods {max-width:100%;flex-wrap:wrap}
 #page-dashboard .an-period-nav {min-width:0;max-width:100%}
 #page-dashboard .an-period-nav strong {min-width:0;flex:1}
 #page-dashboard .an-toolbar,#page-dashboard .an-filters {min-width:0;max-width:100%}
 #page-dashboard .an-plain-kpis .an-kpi {min-height:100px;padding:14px!important}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-v5-service-results {max-height:220px}
 #modal-order #order-modal-box.booking-wizard-v5 .svc2-selected-empty-text {padding:16px;font-size:12px}
}
/* The legacy tablet sidebar width must not become the height of a horizontal row. */
#app #page-settings > .settings-shell {height:calc(100dvh - var(--workspace-topbar-h,82px))!important}
@media(max-width:900px) {
 #app #page-settings > .settings-shell {height:calc(100dvh - var(--workspace-topbar-h,68px))!important}
}
@media(min-width:769px) and (max-width:900px) {
 #app #page-settings > .settings-shell > .settings-subnav {width:100%!important;height:auto!important;min-height:58px!important;flex:0 0 auto!important}
 #app #page-settings .settings-subnav .settings-nav-btn {height:auto!important}
}
@media(pointer:coarse) {
 #app .order-inline-editor .order-inline-action {width:44px!important;min-width:44px!important;height:44px!important}
 #app .order-inline-editor input {min-height:44px}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-one-page-footer button {min-height:44px!important}
 #app :is(.burger-btn,.icon-btn,.svc-icon-btn,.cal-nav-btn,.settings-nav-btn,.btn,.cal-view-btn),
 #modal-order :is(button,input:not([type="checkbox"]):not([type="radio"]),select) {min-height:var(--ds-touch-target)}
 #app :is(input,select,textarea) {font-size:16px}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-v5-nav-item {min-height:44px}
 /* Legacy calendar rules use !important fixed dimensions; override both axes on touch. */
 #app #page-calendar .cal-nav-btn {width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
 #app #page-calendar .cal-view-switch {height:auto!important;min-height:50px!important}
 #app #page-calendar .cal-view-btn {min-width:44px!important;height:44px!important;min-height:44px!important}
 #app #page-dashboard .an-period-nav button {min-width:44px!important;min-height:44px!important}
 #app #page-clients :is(button[onclick^="_clSetSegment"],button[onclick^="_clSetView"],#clients-search,#cf-source),
 #app #page-orders :is(#orders-search,#of-quick-all,#of-quick-month,#of-month-nav button),
 #app #page-services :is(.svc-page-tab,#svc-search),
 #app #page-kanban .kanban-view-chip,
 #app #page-finance :is(.settings-nav-btn,.debt-calendar-filter) {min-height:44px!important}
 #app #page-orders #of-month-nav button,
 #app #page-finance .icon-btn {min-width:44px!important;min-height:44px!important}
 #app #page-calendar .calendar-commandbar .btn,
 #app #page-finance .btn,
 #app #page-dashboard :is(.an-tab,.crm-segment,.an-export),
 #app #page-orders .orders-metrics-reset,
 #app #page-materials :is(.materials-nav-button,#materials-mode-library,#materials-mode-command),
 #app #page-settings .settings-nav-btn {min-height:44px!important}
 #app #page-calendar .calendar-commandbar .btn {min-width:44px!important;height:44px!important}
 #app #page-clients div:has(> button[onclick^="_clSetView"]),
 #app #page-orders div:has(> #of-quick-all),
 #app #page-finance .debt-calendar-filters {height:auto!important;min-height:50px!important}
}
/* Tablet compositors get the same graphite edges and depth without expensive blur planes. */
@media(max-width:1279px) and (pointer:coarse) {
 body *,body *::before,body *::after {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 #app .topbar,#app .calendar-commandbar {background:var(--bg-surface)!important}
}
@media(prefers-reduced-motion:reduce) {
 #app *,#app *::before,#app *::after,.modal-bg * {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Touch targets grow without adding decorative backgrounds to icon controls. */
@media (max-width:1279px), (pointer:coarse) {
 #modal-order #order-modal-box .ui-modal-close,
 #modal-order #order-modal-box .booking-client-remove {
  box-sizing:border-box;min-width:44px!important;min-height:44px!important;
 }
 #modal-order #order-modal-box .booking-client-remove {width:44px!important}
 #modal-order #order-modal-box.booking-wizard-v5 .booking-v5-slide :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea) {
  box-sizing:border-box;min-width:44px!important;min-height:44px!important;
 }
 #modal-order #order-modal-box.booking-wizard-v5 .booking-datetime-block :is(.booking-date-field,.booking-time-select) {grid-template-rows:16px minmax(44px,auto)!important}
 #modal-order #order-modal-box.booking-wizard-v5 :is(#order-time-start-display,#order-time-end-display) {box-sizing:border-box;height:44px!important;min-height:44px!important}
 #app #page-orders #orders-filter-bar .orders-metric-handle {width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;right:0;top:0}
 #page-orders .orders-metric {padding-right:48px!important}
 #app #page-orders #orders-filter-bar .orders-metrics-reset {height:auto!important;min-width:44px!important;min-height:44px!important}
 #page-orders #orders-table .col-filter-btn {position:relative}
 #page-orders #orders-table .col-filter-btn::before {content:"";position:absolute;inset:-11px}
 #page-clients .cl-row .icon-btn {box-sizing:border-box;width:44px!important;min-width:44px!important;min-height:44px!important}
 #page-finance :is(.debt-sort-button,.microcredit-view-tab,.subscription-filter) {box-sizing:border-box;min-width:44px;min-height:44px!important}
 #page-services label:has(#svc-show-inactive) {box-sizing:border-box;min-height:44px}
}