/* =====================================================================================================
   2.4.7 shared layering, surface and spacing rules. Loaded last so every page follows them.
   1. One layer scale. Anything that floats uses these, nothing else.
        page sticky bits 2-5 < in-page sheets 30 < top bar 40 < floating buttons 45 < drawers / panels 50
        < email composer 55 < menus, dropdowns, popovers 60 < tooltips 70 < dialogs 80 < undo bar 85 < toasts 90 < drag 95
   2. Surfaces that sit on top of other content are solid. Glass stays only on cards that sit on the plain background.
   3. Floating controls (Sunny, Drafts) rise above bottom action bars, and scroll areas leave room for them at the end.
   4. Keyboard focus is always visible.
   ===================================================================================================== */
:root {
  --z-sticky: 2; --z-raised: 20; --z-sheet: 30; --z-topbar: 40; --z-float: 45; --z-panel: 50; --z-composer: 55;
  --z-pop: 60; --z-tip: 70; --z-modal: 80; --z-undo: 85; --z-toast: 90; --z-drag: 95;
  --surface-overlay: #fff;                    /* menus, dialogs, drawers, previews, composer */
  --surface-bar: #fff;                        /* sticky headers, tab rows and action bars over scrolling content */
  --surface-sunken: #f4f6fb;                  /* sticky table headers and quiet sticky rows */
  --lx-float: 0px;                            /* set by web/layers.js: height the floating buttons take at the bottom */
  --lx-dock-lift: 0px;                        /* set by web/layers.js: how far the Drafts dock rises above a bar */
  --lx-float-bar: 0px;                        /* set by web/layers.js: height of floating buttons above a bottom action bar */
  --focus-solid: #3552B5;
}

/* ---------------------------------------------------------------- 1. layer scale (values that were ad hoc) */
.mail-host { z-index: var(--z-composer); }
.sun-dot { z-index: var(--z-float); }
.tk-project-toggle { z-index: var(--z-float) !important; }
.cb-drawer, .sn-root { z-index: var(--z-panel); }
.jx-menu, .fx-menu, .dx-pop, .f3-pop, .menu, .picker-list, .vw-multi-pop, .md-clock-menu { z-index: var(--z-pop); }
.dx-hover { z-index: var(--z-tip); }
body > .dx-ghost { z-index: var(--z-drag); }
.dx-dropprev { z-index: calc(var(--z-drag) + 1); }
.modal-back, .fx-sheet-wrap, .pv-root { z-index: var(--z-modal); }
.sx-preview .fx-sheet-wrap { z-index: calc(var(--z-modal) + 1); }
.undo-bar { z-index: var(--z-undo); }
.toast { z-index: var(--z-toast); }

/* ---------------------------------------------------------------- 2. solid surfaces for anything on top of content */
.menu, .picker-list, .vw-multi-pop, .md-clock-menu, .jx-menu, .fx-menu, .dx-pop, .dx-hover, .dx-dropprev, .f3-pop,
.mail-drafts, .mail-window, .modal, .qv-sheet, .fx-sheet, .sn-panel, .cb-drawer, .dt-panel, .tb-search-results, .pk-sheet,
.nv-util, .ctx-menu, [role=menu], [role=listbox]:not(select), [role=tooltip] {
  background-color: var(--surface-overlay);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* gradients and translucent fills some of them used are replaced by the solid color */
.menu, .picker-list, .vw-multi-pop, .fx-menu, .modal, .qv-sheet, .mail-drafts { background-image: none; }
body.fd-phone .modal { background: var(--surface-overlay); }
.modal-head { background: var(--surface-overlay); }
.qv-head { background: var(--surface-overlay); }
/* sticky bars that content scrolls under */
.tk.gx .tk-foot, .ps-bar, .ps-bar.dirty, .tk.gx .save-bar, .dk-head, .lv-head, .lv-filters, .dx-head, .dx-sheet-head, .tk-side-head { -webkit-backdrop-filter: none; backdrop-filter: none; }
.tk.gx .tk-foot { background: var(--surface-bar); }
.ps-bar { background: var(--surface-bar); }
.ps-bar.dirty { background: #fff6df; }
.tk.gx .tk-tabs .tab-more { background: var(--surface-bar); }
.dk-table th, .gx-table th { background: var(--surface-sunken); }
@media (max-width: 1100px) {
  .tk.gx .tk-tabs { background: var(--surface-sunken); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the Sunny dot is a solid disc so nothing under it shows through its edge */
.sun-dot { background: radial-gradient(circle at 35% 30%, #fff, #fff7e2 55%, #fde9be); }

/* ---------------------------------------------------------------- 3. floating controls and the room they need */
/* Drafts dock rises above the ticket / customer action bar, like Sunny does */
.mail-dock { bottom: calc(14px + var(--lx-dock-lift)); transition: bottom .3s cubic-bezier(.22, 1, .36, 1); }
.mail-drafts { bottom: calc(57px + var(--lx-dock-lift)); max-height: min(60vh, calc(100dvh - 140px - var(--lx-dock-lift))); }
/* scroll areas end with room for the floating buttons so their last rows and buttons can be scrolled clear */
.main:not(.flush), .tk-main, .tk-side, .tk-ext, .tk-side-body, .dk-list, .dk-tablewrap, .lv-main, .c4, .svc, .sh, .vw-page, .sx-page {
  scroll-padding-bottom: calc(var(--lx-float) + 8px);
}
.main:not(.flush) { padding-bottom: max(var(--sp-6, 24px), calc(var(--lx-float) + 8px)); }
.tk-side, .tk-ext { padding-bottom: calc(var(--lx-float) + 8px); }
@media (max-width: 700px) {
  /* phones: the dock is a compact mail button next to Sunny */
  .mail-dock { right: 74px; max-width: calc(100vw - 160px); }
}

/* ---------------------------------------------------------------- 4. focus is always visible */
:is(input, select, textarea, button, a[href], summary, [tabindex], [role=button], [role=tab], [role=menuitem], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--focus-solid) !important; outline-offset: 2px;
}
.menu :is(button, a):focus-visible, .tk-tabs .tab:focus-visible { outline-offset: -2px; }
.topbar :is(button, a):focus-visible { outline-color: #FCB537 !important; }
:is(input, select, textarea):focus-visible { outline-offset: 1px; }

/* ---------------------------------------------------------------- 5. overlays stay on the screen and scroll inside */
.menu, .picker-list, .vw-multi-pop, .md-clock-menu, .jx-menu, .fx-menu, .dx-pop { max-width: calc(100vw - 16px); overscroll-behavior: contain; }
.modal { max-height: calc(var(--vh, 100vh) - 32px); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { flex: none; }
.modal-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.mail-drafts { right: 74px; max-width: calc(100vw - 16px); }

@media (prefers-contrast: more) {
  .menu, .modal, .qv-sheet, .mail-window, .sn-panel, .cb-drawer, .dt-panel { border: 1px solid var(--ink); }
}

/* ---------------------------------------------------------------- 6. specific fixes found by tools/audit-layout.mjs */
/* header rows that hold dropdowns: their menus open above the content that follows, and nothing in them clips a menu */
.dx-tabsrow, .dxp-head { position: relative; z-index: var(--z-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dx-tabsrow:has(.menu) { overflow: visible; }
/* the Drafts dock is a floating control: solid like Sunny */
.mail-dock .btn:not(.btn-primary) { background: var(--surface-overlay); box-shadow: 0 1px 2px rgb(16 22 43 / .12), 0 4px 12px rgb(16 22 43 / .1); }
/* service board charts fit a phone (a 1fr column grew to the chart's drawn width) */
.cb-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cb-charts { grid-template-columns: minmax(0, 1fr); } }
.cb-canvas { max-width: 100%; }

/* ---------------------------------------------------------------- 7. the email composer never sits on top of the ticket */
/* Wide screens: the composer docks as a column on the right and the page makes room for it (the project sidebar
   steps aside while it is open). Narrow screens: it opens as a full-screen sheet with Minimize at the top. */
:root { --lx-mail-w: clamp(440px, 36vw, 600px); }
@media (min-width: 1180px) {
  html.lx-mail-docked .mail-window:not(.mail-expanded) { top: calc(var(--topbar-h) + 8px); right: 8px; bottom: 8px; left: auto; width: calc(var(--lx-mail-w) - 16px); height: auto;
    min-height: 0; max-height: none; min-width: 0; transform: none !important; resize: none; }
  html.lx-mail-docked main.main { margin-right: var(--lx-mail-w); transition: margin-right .25s cubic-bezier(.22, 1, .36, 1); }
  html.lx-mail-docked .tk.gx .tk-frame.with-ext { grid-template-columns: 44px 280px minmax(0, 1fr); }
  html.lx-mail-docked .tk-frame.with-ext .tk-ext, html.lx-mail-docked .tk.gx .tk-frame.with-ext.project-open .tk-ext { display: none !important; }
  html.lx-mail-docked .tk-project-toggle { display: none !important; }
  /* while the composer is docked, the dock (its Minimize brings it back) and Sunny (Ctrl J) step out of the page */
  html.lx-mail-docked .sun-dot, html.lx-mail-docked .mail-dock, html.lx-mail-docked .mail-drafts { visibility: hidden; pointer-events: none; }
  html.lx-mail-docked .mail-window-head { cursor: default; }
}
@media (max-width: 1179.98px) {
  .mail-window, .mail-window.mail-expanded { top: var(--topbar-h); left: 0; right: 0; bottom: 0; width: auto; height: auto; min-width: 0; min-height: 0;
    max-width: none; max-height: none; border-radius: 0; border-width: 1px 0 0; transform: none !important; resize: none; }
  .mail-window-head { cursor: default; }
}

/* ---------------------------------------------------------------- 8. action bars wrap instead of hiding actions off the edge */
/* The ticket / customer action bar used to scroll sideways with a hidden scrollbar, so on a narrower column (or with the
   composer docked) its last actions - "Comment", "Next: ..." - could not be reached with a mouse. */
.tk.gx .tk-foot { flex-wrap: wrap; justify-content: center; row-gap: 2px; overflow: visible; border-radius: 22px; }
.tk.gx .tk-foot .act, .tk.gx .tk-foot .gx-advance { flex: none; }
/* the bar is taller when it wraps: the scroll area keeps room for it */
.tk.gx .tk-body { padding-bottom: max(104px, calc(var(--lx-float) + 64px)); }
/* the bar becomes sticky (in the flow) at 980px and below (x-a.css), so only then the smaller end room */
@media (max-width: 980px) { .tk.gx .tk-body { padding-bottom: calc(18px + var(--lx-float-bar, 0px)); } }
/* the opened properties drawer on phones is a solid sheet */
@media (max-width: 700px) { .tk.gx .tk-frame.side-open .tk-side { background: var(--surface-overlay); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* date and time fields focus inside their own parts: ring the field itself */
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):is(:focus, :focus-within) { outline: 2px solid var(--focus-solid) !important; outline-offset: 1px; }
/* service board on phones: the main column never grows wider than the screen */
@media (max-width: 1200px) { .cb-main, .cb.cb-drawer-open .cb-main { grid-template-columns: minmax(0, 1fr); } }
.cb-main > * { min-width: 0; }
/* drafts list header with its close control; destructive confirm button */
.mail-drafts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mail-drafts-x { border: 0; background: none; font-size: 20px; line-height: 1; padding: 2px 8px; cursor: pointer; color: #26384d; border-radius: 4px; }
.mail-drafts-x:hover { background: #eef1f6; }
.mail-discard { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail-discard > span { flex: 1 1 100%; }
/* long record titles: two lines, the whole title on click (and in the tooltip) */
.tk.gx .tk-title h1 .t { cursor: pointer; }
.tk.gx .tk-title h1 .t.lx-open { -webkit-line-clamp: unset; display: block; overflow: visible; }
/* an open menu is never under the floating buttons, the docked composer or a tooltip of its own button */
html.lx-menu-open :is(.sun-dot, .mail-dock) { visibility: hidden; pointer-events: none; }
.topbar:has(.menu, [role=menu]) { z-index: var(--z-pop); }
[aria-expanded="true"][data-tip]::after, [aria-expanded="true"][data-tip]::before { display: none !important; }
/* set by web/layers.js on the positioned panels around an open menu, only while it is open */
.lx-lift { z-index: var(--z-pop) !important; }
.topbar.lx-lift, .mail-host.lx-lift { z-index: calc(var(--z-pop) + 1) !important; }
.lx-flat { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; }
/* Sunny panel opened after the composer sits above it (web/layers.js toggles lx-sunny-top) */
html.lx-sunny-top .sn-root { z-index: calc(var(--z-composer) + 1); }
/* while a composer is open (docked, expanded or the phone sheet) the Drafts dock steps out; Minimize brings it back */
html.lx-mail-open :is(.mail-dock, .mail-drafts) { visibility: hidden; pointer-events: none; }
/* a tile whose list shows more than its count says so (Home: Team) */
.sh-kpi .sh-kpi-note { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }