/* ── Alpha Scratcher — Global base + Dark mode overrides ────────────────────────── */
/* Loaded render-blocking from <head> so styles apply before first paint.       */
/* This file also contains theme-independent rules (icon FOUC prevention, etc.) */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SECTION A — Theme-independent globals (applies to light AND dark)           */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icon-font FOUC prevention ──────────────────────────────────────────────── */
/*                                                                               */
/* Material Symbols is a ligature font loaded from Google CDN.  Before it        */
/* arrives the browser renders the ligature TEXT ("notifications", "dashboard"   */
/* etc.) using the system fallback — this is the "flash of broken icons".        */
/*                                                                               */
/* Fix layers:                                                                   */
/*   1. opacity:0 for 150ms — icon spans are invisible while font loads.         */
/*   2. overflow:hidden + max-width:1.5em — clips any fallback text that leaks.  */
/*   3. display:inline-flex — stable sizing so layout never shifts.              */
/*   4. alpha-scratcher-fonts-ready class (set by api.js via document.fonts.ready) —       */
/*      disables the animation once the font is confirmed loaded, so dynamic     */
/*      icons injected after load appear instantly without delay.                 */
/* ────────────────────────────────────────────────────────────────────────────── */
.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 1.5em;
  user-select: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  /* Hidden for 150 ms; instant reveal once animation fires */
  animation: _alpha-scratcher-icon-in 0.001s 0.15s both;
}
@keyframes _alpha-scratcher-icon-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* After api.js marks fonts ready: no delay for dynamically added icons */
.alpha-scratcher-fonts-ready .material-symbols-outlined {
  animation: none    !important;
  opacity:   1       !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION B — Dark-mode overrides (html.dark prefix)                         */
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── Alpha Scratcher — Dark mode overrides ──────────────────────────────────────── */
/* Loaded render-blocking from <head> so dark theme applies before first paint */

/* ── Backgrounds ── */
html.dark body                                { background-color: #111318 !important; color: #e2e5e8; }
html.dark [class~="bg-background"]            { background-color: #111318 !important; }
html.dark [class~="bg-surface"]               { background-color: #1c1f24 !important; }
html.dark [class~="bg-surface-bright"]        { background-color: #1c1f24 !important; }
html.dark [class~="bg-surface-dim"]           { background-color: #0d1017 !important; }
html.dark [class~="bg-surface-container-lowest"]  { background-color: #0d1017 !important; }
html.dark [class~="bg-surface-container-low"]     { background-color: #191c22 !important; }
html.dark [class~="bg-surface-container"]         { background-color: #21252b !important; }
html.dark [class~="bg-surface-container-high"]    { background-color: #282c33 !important; }
html.dark [class~="bg-surface-container-highest"] { background-color: #2f343c !important; }
html.dark [class~="bg-surface-variant"]       { background-color: #2f343c !important; }
html.dark [class~="bg-primary-container"]     { background-color: #0e1520 !important; }
html.dark [class~="bg-primary-fixed"]         { background-color: #1a3d26 !important; }
html.dark [class~="bg-secondary-fixed"]       { background-color: #0d3520 !important; }
html.dark [class~="bg-tertiary-fixed"]        { background-color: #003d26 !important; }
html.dark [class~="bg-secondary"]             { background-color: var(--tenant-secondary) !important; }
html.dark [class~="bg-secondary-container"]   { background-color: color-mix(in srgb, var(--tenant-secondary) 35%, #111318) !important; }

/* ── Text ── */
html.dark [class~="text-on-background"]           { color: #e2e5e8 !important; }
html.dark [class~="text-on-surface"]              { color: #e2e5e8 !important; }
html.dark [class~="text-on-surface-variant"]      { color: #9aa0ab !important; }
html.dark [class~="text-primary"]                 { color: #e2e5e8 !important; }
html.dark [class~="text-on-primary"]              { color: #e2e5e8 !important; }
html.dark [class~="text-on-primary-container"]    { color: #85C598 !important; }
html.dark [class~="text-on-primary-fixed"]        { color: #c8eddb !important; }
html.dark [class~="text-on-secondary-container"]  { color: color-mix(in srgb, var(--tenant-secondary) 25%, #fff) !important; }
html.dark [class~="text-on-tertiary-container"]   { color: #6ffbbe !important; }
html.dark [class~="text-on-secondary-fixed"]      { color: #d4f0dc !important; }
html.dark [class~="text-on-tertiary-fixed"]       { color: #6ffbbe !important; }
html.dark [class~="text-outline"]                 { color: #7a8190 !important; }

/* ── Borders ── */
html.dark [class~="border-outline-variant"] { border-color: #35393f !important; }
html.dark [class~="border-outline"]         { border-color: #5c6068 !important; }
html.dark [class~="border-secondary"]       { border-color: var(--tenant-secondary) !important; }

/* ── Opacity / special backgrounds ── */
html.dark [class~="bg-background\/40"]                 { background-color: rgba(17,19,24,.4)   !important; }
html.dark [class~="bg-on-tertiary-container\/10"]      { background-color: rgba(111,251,190,.1) !important; }
html.dark [class~="bg-error-container"]                { background-color: #4a0010 !important; }
html.dark [class~="text-on-error-container"]           { color: #ffb3b0 !important; }

/* ── Text opacity variants ── */
html.dark .text-on-primary-container\/70  { color: rgba(133,197,152,.7) !important; }
html.dark .text-on-primary-container\/60  { color: rgba(133,197,152,.6) !important; }

/* ── Form elements ── */
html.dark input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=color]),
html.dark textarea,
html.dark select {
  background-color: #21252b !important;
  color:            #e2e5e8 !important;
  border-color:     #35393f !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6b7280 !important; }
html.dark select option          { background-color: #21252b; color: #e2e5e8; }

/* ── Hover states ── */
html.dark .hover\:bg-surface-container-low:hover        { background-color: #191c22 !important; }
html.dark .hover\:bg-surface-container:hover            { background-color: #21252b !important; }
html.dark .hover\:bg-surface:hover                      { background-color: #1c1f24 !important; }
html.dark .hover\:bg-background:hover                   { background-color: #1f2228 !important; }
html.dark .hover\:bg-background\/50:hover                { background-color: rgba(31,34,40,.5) !important; }
html.dark .hover\:bg-on-primary-container\/10:hover     { background-color: rgba(133,197,152,.1) !important; }
html.dark .hover\:bg-error\/10:hover                    { background-color: rgba(255,148,148,.08) !important; }
html.dark .hover\:bg-outline-variant\/20:hover          { background-color: rgba(53,57,63,.4) !important; }

/* ── Misc ── */
html.dark [class~="bg-inverse-surface"]   { background-color: #e2e5e8 !important; }
html.dark [class~="text-inverse-on-surface"] { color: #2d3133 !important; }
html.dark ::-webkit-scrollbar-thumb       { background: #35393f; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4a4f58; }

/* ── Global header panels ── */
html.dark #notif-panel,
html.dark #user-menu-panel      { background-color: #1c1f24 !important; border-color: #35393f !important; }
html.dark #notif-panel *,
html.dark #user-menu-panel *    { color: #e2e5e8; }
html.dark #notif-list > div:hover { background-color: #21252b !important; }

/* ── Quick-action buttons ── */
html.dark .qa-btn             { background: #21252b !important; border-color: #35393f !important; color: #e2e5e8 !important; }
html.dark .qa-btn:hover       { background: #282c33 !important; border-color: var(--tenant-secondary) !important; color: rgb(var(--tenant-secondary-ink)) !important; }

/* ── Modal panels & semantic chips (status badges, product/document types) ── */
html.dark [class~="bg-white"]      { background-color: #1c1f24 !important; }
html.dark [class~="bg-green-100"]  { background-color: rgba(34,197,94,.16) !important; }
html.dark [class~="bg-blue-100"]   { background-color: rgba(59,130,246,.18) !important; }
html.dark [class~="bg-yellow-100"],
html.dark [class~="bg-amber-100"]  { background-color: rgba(234,179,8,.16) !important; }
html.dark [class~="bg-red-100"]    { background-color: rgba(239,68,68,.18) !important; }
html.dark [class~="bg-teal-100"]   { background-color: rgba(20,184,166,.18) !important; }
html.dark [class~="bg-purple-100"] { background-color: rgba(168,85,247,.18) !important; }
html.dark [class~="bg-gray-100"]   { background-color: #282c33 !important; }
html.dark [class~="bg-red-50"]     { background-color: rgba(239,68,68,.12) !important; }
html.dark [class~="bg-yellow-50"]  { background-color: rgba(234,179,8,.10) !important; }
html.dark [class~="text-green-700"],html.dark [class~="text-green-600"] { color: #86efac !important; }
html.dark [class~="text-blue-700"]   { color: #93c5fd !important; }
html.dark [class~="text-yellow-700"],html.dark [class~="text-yellow-800"],html.dark [class~="text-amber-800"] { color: #fde68a !important; }
html.dark [class~="text-red-700"]    { color: #fca5a5 !important; }
html.dark [class~="text-teal-700"]   { color: #5eead4 !important; }
html.dark [class~="text-purple-700"] { color: #d8b4fe !important; }
html.dark [class~="text-gray-600"],html.dark [class~="text-gray-500"] { color: #9aa0ab !important; }
html.dark [class~="border-red-200"]    { border-color: rgba(239,68,68,.35) !important; }
html.dark [class~="border-yellow-200"] { border-color: rgba(234,179,8,.35) !important; }

/* ── Settings page cards ── */
html.dark .theme-card-selected { border-color: var(--tenant-secondary) !important; box-shadow: 0 0 0 2px var(--tenant-secondary) !important; }

/* ── Fix: framed view stuck invisible ──────────────────────────────────────
   The alpha-scratcher-frame-in fade-in animation (animation-fill-mode:both, from
   opacity:0) can get stuck in the "running" state at currentTime 0 when a
   view is loaded into the shell iframe, leaving the whole page invisible
   (white content area, data present but opacity:0). An !important opacity
   declaration overrides the animation per the CSS cascade, guaranteeing the
   content is always visible. The brief fade is sacrificed for reliability. */
html.alpha-scratcher-framed main { opacity: 1 !important; }
/* Tenant branding is applied centrally by api.js. */
:root{--tenant-primary:#2D7A50;--tenant-secondary:#85C598;--tenant-on-primary:#fff;--tenant-on-secondary:#111827;--tenant-sidebar-text:#FFFFFF;
  --tenant-primary-rgb:45 122 80;--tenant-secondary-rgb:133 197 152;
  /* The same colours as text ("ink"): readable on the page background of each theme (api.js readableChannels). */
  --tenant-primary-ink-light:45 122 80;--tenant-secondary-ink-light:60 127 80;--tenant-primary-ink-dark:56 152 100;--tenant-secondary-ink-dark:133 197 152;
  --tenant-primary-ink:var(--tenant-primary-ink-light);--tenant-secondary-ink:var(--tenant-secondary-ink-light)}
html.dark{--tenant-primary-ink:var(--tenant-primary-ink-dark);--tenant-secondary-ink:var(--tenant-secondary-ink-dark)}
[class~="bg-primary-container"]{background-color:var(--tenant-primary)!important}
[class~="bg-secondary-container"],[class~="bg-secondary"]{background-color:var(--tenant-secondary)!important}
[class~="text-on-primary"]{color:var(--tenant-on-primary)!important}
nav[class~="bg-primary-container"] [class*="text-on-primary-container"],nav[class~="bg-primary-container"] [class~="text-on-primary"]{color:var(--tenant-sidebar-text)!important}
nav[class~="bg-primary-container"] a:not([class~="bg-secondary-container"]){color:var(--tenant-sidebar-text)!important}
[class~="text-on-secondary-container"]{color:var(--tenant-on-secondary)!important}
[class~="border-secondary"]{border-color:var(--tenant-secondary)!important}
.btn-primary{background:var(--tenant-primary)!important;color:var(--tenant-on-primary)!important}
.btn-primary:hover{filter:brightness(.92)}
.btn-primary:focus-visible{outline:3px solid color-mix(in srgb,var(--tenant-secondary) 55%,transparent);outline-offset:2px}
.btn-primary:disabled{filter:grayscale(.35);opacity:.55}

/* ── Pages inside the app shell ───────────────────────────────────────────────
   The frame starts right of the sidebar and the shell has no top header, so
   a page drops its own sidebar copy, its old fixed header and the 240px/64px
   offsets that made room for them. The page bar (title, buttons, search) is
   built by api.js (_buildPageBar). */
html.alpha-scratcher-framed body > nav.fixed,
html.alpha-scratcher-framed header.fixed.top-0 { display: none !important; }
html.alpha-scratcher-framed .ml-60 { margin-left: 0 !important; }
html.alpha-scratcher-framed .pl-60 { padding-left: 0 !important; }
html.alpha-scratcher-framed main.pt-16, html.alpha-scratcher-framed main.mt-16,
html.alpha-scratcher-framed main .mt-16 { padding-top: 0 !important; margin-top: 0 !important; }
/* One layout for every page: the page bar (title + buttons) gives the room
   above the title, so the page's own top padding goes, and the content
   starts right under the bar's bottom margin — whichever wrapper the page
   uses. Detail pages use the full width like the lists, without breadcrumbs
   (the bar has the back arrow). */
html.alpha-scratcher-framed main:has(> #as-pagebar) { padding-top: 0 !important; }
html.alpha-scratcher-framed #as-pagebar + *,
html.alpha-scratcher-framed #as-pagebar + input[type="hidden"] + * { padding-top: 0 !important; margin-top: 0 !important; }
html.alpha-scratcher-framed main .max-w-7xl.mx-auto { max-width: none !important; }
html.alpha-scratcher-framed [data-breadcrumb] { display: none !important; }
html.alpha-scratcher-framed .fixed.left-60 { left: 0 !important; }
html.alpha-scratcher-framed .fixed.top-16 { top: 0 !important; }
html.alpha-scratcher-framed .settings-canvas { height: auto !important; overflow: visible !important; }
html.alpha-scratcher-framed main[style*="min-height"] { min-height: 100vh !important; }
/* Dialogs marked .shell-safe stay centred with a little room on every side. */
html.alpha-scratcher-framed .shell-safe { padding-top: 16px !important; padding-left: 16px !important; }
html.alpha-scratcher-framed .shell-safe > div { max-height: calc(100vh - 32px) !important; overflow-y: auto; }

/* Parts of the app a company has turned off (api.js applyModuleClasses):
   everything marked data-module="<part>" disappears. */
html.mod-off-sales [data-module~="sales"],
html.mod-off-privateLabel [data-module~="privateLabel"],
html.mod-off-calls [data-module~="calls"],
html.mod-off-emails [data-module~="emails"],
html.mod-off-tasks [data-module~="tasks"],
html.mod-off-reports [data-module~="reports"],
html.mod-off-agents [data-module~="agents"] { display: none !important; }

/* Page bar */
/* Title 20px from the top in a row as high as its buttons (34px), the content
   16px below — the same on every page. */
.as-pagebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 24px 0; margin: 0 0 16px; min-height: 54px; }
.as-pagebar.as-pagebar-flush { padding: 20px 0 0; }
.as-pagebar-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.as-pagebar-title h1 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; color: #191c1e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pagebar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-icon-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #45464d; }
.as-icon-btn:hover { background: rgba(0,0,0,.05); }
.as-btn-primary { height: 34px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--tenant-secondary, #85C598); color: var(--tenant-on-secondary, #111827); white-space: nowrap; }
.as-btn-primary:hover { filter: brightness(.95); }
/* Buttons that add something new (customer, contact, task, …): the company's main colour. */
.as-btn-add { background: var(--tenant-primary, #2D7A50); color: var(--tenant-on-primary, #fff); }
.as-btn-primary .material-symbols-outlined, .as-btn-quiet .material-symbols-outlined { font-size: 18px; }
.as-btn-quiet { height: 34px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #45464d; border: 1px solid #c6c6cd; background: #fff; white-space: nowrap; }
.as-btn-quiet:hover { background: #f2f4f6; }
.as-btn-quiet.as-danger { color: #ba1a1a; }
.as-btn-quiet.as-danger:hover { background: #ffdad6; border-color: #ba1a1a; }
/* "hidden" (Tailwind) must still hide these buttons: their own display rule
   comes later in the cascade and would otherwise win. */
.hidden.as-utab, .hidden.as-btn-primary, .hidden.as-btn-quiet, .hidden.as-icon-btn, .hidden.as-search, .hidden.as-tabs, .hidden.as-badge, .hidden.as-count, .hidden.as-period, .hidden.as-stat, .hidden.as-card { display: none; }
/* Search box (in the filter row or the page bar) */
.as-search { position: relative; display: flex; align-items: center; min-width: 200px; flex: 1 1 220px; max-width: 320px; height: 32px; border: 1px solid #c6c6cd; border-radius: 8px; background: #fff; padding: 0 8px 0 32px; }
.as-search:focus-within { border-color: var(--tenant-secondary, #85C598); box-shadow: 0 0 0 2px rgb(var(--tenant-secondary-rgb) / .25); }
.as-search > .material-symbols-outlined { position: absolute; left: 8px; font-size: 18px; color: #76777d; pointer-events: none; }
.as-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13px; color: inherit; padding: 0; box-shadow: none !important; }
.as-search input::-webkit-search-cancel-button { cursor: pointer; }
.as-search kbd { font: 600 11px Inter, sans-serif; color: #76777d; border: 1px solid #c6c6cd; border-radius: 4px; padding: 0 5px; line-height: 16px; }
/* Column chooser */
.as-cols { position: relative; }
.as-cols-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 200px; max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid #c6c6cd; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; }
.as-cols-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.as-cols-menu label:hover { background: #f2f4f6; }
.as-cols-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #76777d; margin: 8px 6px 4px; }
.as-cols-title:first-child { margin-top: 2px; }
.as-cols-menu { min-width: 264px; max-width: calc(100vw - 24px); }
.as-cols-menu.as-cols-menu-start { right: auto; left: 0; }
.as-cols-item { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.as-cols-item:hover { background: #f2f4f6; }
.as-cols-item.dragging { opacity: .5; }
.as-cols-item.drop-before { box-shadow: 0 -2px 0 0 var(--tenant-secondary, #85C598); }
.as-cols-item label { flex: 1; min-width: 0; padding: 4px 4px 4px 0; }
.as-cols-item label:hover { background: none; }
.as-cols-item label span { overflow: hidden; text-overflow: ellipsis; }
.as-cols-grip { font-size: 18px; color: #a0a3a8; cursor: grab; flex-shrink: 0; }
.as-cols-move { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #45464d; }
.as-cols-move:hover { background: #e0e3e5; }
.as-cols-move:disabled { opacity: .3; cursor: default; background: none; }
.as-cols-move .material-symbols-outlined { font-size: 18px; }
.as-cols-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 6px 0; border-top: 1px solid #e0e3e5; font-size: 12px; color: #76777d; }
.as-cols-foot button { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #45464d; white-space: nowrap; }
.as-cols-foot button:hover { color: #191c1e; }
.as-cols-foot .material-symbols-outlined { font-size: 16px; }
/* Compact select for filter rows */
.as-select { height: 32px; min-width: 130px; max-width: 220px; padding: 0 28px 0 10px; border: 1px solid #c6c6cd; border-radius: 8px; background-color: #fff; font-size: 13px; color: inherit; }
.as-select:focus { outline: none; border-color: var(--tenant-secondary, #85C598); box-shadow: 0 0 0 2px rgb(var(--tenant-secondary-rgb) / .25); }
html.dark .as-select { background-color: #1a1c22; border-color: #35393f; }
/* Compact filter rows: smaller controls everywhere a page marks one. */
[data-filter-bar] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-filter-bar] select, [data-filter-bar] input:not([type="checkbox"]):not([type="search"]) { height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
[data-filter-bar] label:not(.as-search) { font-size: 12px; }
[data-filter-bar] .as-btn-quiet, [data-filter-bar] .as-btn-primary { height: 32px; }
/* Filter selects as wide as their longest choice, so a row of filters fits. */
[data-filter-bar] .as-select { min-width: 0; }
/* Status labels (api.js statusBadge): only the coloured text, no bubble. The
   company picks the colour per status in Settings → Statuses and lists. */
.as-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.as-badge-gray   { color: #71747c; }
.as-badge-blue   { color: #4a7fd1; }
.as-badge-green  { color: #2a9160; }
.as-badge-yellow { color: #a67c0f; }
.as-badge-orange { color: #c96d28; }
.as-badge-red    { color: #d9534f; }
.as-badge-purple { color: #8d63d2; }
.as-badge-teal   { color: #1f8f86; }
html.dark .as-badge-gray   { color: #a3a7ae; }
html.dark .as-badge-blue   { color: #8fb4ee; }
html.dark .as-badge-green  { color: #7fcfa4; }
html.dark .as-badge-yellow { color: #e0c068; }
html.dark .as-badge-orange { color: #eba777; }
html.dark .as-badge-red    { color: #ef9a9a; }
html.dark .as-badge-purple { color: #c3a6ee; }
html.dark .as-badge-teal   { color: #6fd0c6; }
/* Tags and market codes are not statuses: they stay small chips. */
.as-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.as-tag.as-badge-gray   { background: #eceef0; color: #45464d; }
.as-tag.as-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.as-tag.as-badge-green  { background: #dcfce7; color: #15803d; }
.as-tag.as-badge-yellow { background: #fef3c7; color: #a16207; }
.as-tag.as-badge-orange { background: #ffedd5; color: #c2410c; }
.as-tag.as-badge-red    { background: #fee2e2; color: #b91c1c; }
.as-tag.as-badge-purple { background: #f3e8ff; color: #7e22ce; }
.as-tag.as-badge-teal   { background: #ccfbf1; color: #0f766e; }
html.dark .as-tag.as-badge-gray { background: #2a2e35; color: #c6c6cd; }
/* Counts next to a title or tab */
.as-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: #eceef0; color: #45464d; font-size: 11px; font-weight: 600; white-space: nowrap; }
.as-count:empty { display: none; }
.as-count-red { background: #fee2e2; color: #b91c1c; }
html.dark .as-count { background: #2a2e35; color: #c6c6cd; }
html.dark .as-count-red { background: rgba(239,68,68,.18); color: #fca5a5; }
/* Compact density (My account → Language and theme) */
html.density-compact table td, html.density-compact table th { padding-top: 6px !important; padding-bottom: 6px !important; }
html.dark .as-pagebar-title h1 { color: #e2e2e9; }
html.dark .as-search, html.dark .as-btn-quiet, html.dark .as-cols-menu { background: #1a1c22; border-color: #35393f; color: #e2e2e9; }
html.dark .as-cols-menu label:hover, html.dark .as-btn-quiet:hover { background: #262a31; }
html.dark .as-cols-menu label:hover { background: none; }
html.dark .as-cols-item:hover, html.dark .as-cols-move:hover { background: #262a31; }
html.dark .as-cols-move, html.dark .as-cols-foot button { color: #c6c6cd; }
html.dark .as-cols-foot { border-color: #35393f; }

/* ── Small screens (pages shown inside the app shell) ────────────────────────
   The shell turns its sidebar into a drawer below 1024px (see app.html), so
   pages give up their 240px left offset there. Below 768px the layout is
   reduced to one or two columns, wide tables scroll sideways inside their
   card, and dialogs use the full width. */

@media (max-width: 767px) {
  html.alpha-scratcher-framed main .p-lg,
  html.alpha-scratcher-framed main.p-lg,
  html.alpha-scratcher-framed main .p-xl { padding: 12px !important; }
  /* …but pages whose <main> carries the 64px header offset keep it. */
  html.alpha-scratcher-framed main.pt-16.p-lg { padding-top: 12px !important; }
  html.alpha-scratcher-framed main .px-lg,
  html.alpha-scratcher-framed main .px-xl { padding-left: 12px !important; padding-right: 12px !important; }

  /* Fixed multi-column grids → 2 columns (KPI rows) or 1 column (content). */
  html.alpha-scratcher-framed main .grid.grid-cols-3,
  html.alpha-scratcher-framed main .grid.grid-cols-4,
  html.alpha-scratcher-framed main .grid.grid-cols-5,
  html.alpha-scratcher-framed main .grid.grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Two fixed columns stack, unless the page already defined its own breakpoints. */
  html.alpha-scratcher-framed main .grid.grid-cols-2:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]) { grid-template-columns: minmax(0, 1fr) !important; }
  html.alpha-scratcher-framed main .grid > [class*="col-span-"] { grid-column: 1 / -1 !important; }
  /* Grids whose columns are set from JavaScript (dashboard rows). */
  html.alpha-scratcher-framed main #row-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.alpha-scratcher-framed main #row-performance,
  html.alpha-scratcher-framed main #perf-cards { grid-template-columns: minmax(0, 1fr) !important; }

  /* Wide tables scroll inside their own card instead of widening the page. */
  html.alpha-scratcher-framed main div:has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html.alpha-scratcher-framed main table:not([class*="min-w-"]) { min-width: 620px; }
  html.alpha-scratcher-framed main table.st-table { min-width: 560px; }

  /* Filter / action bars wrap instead of overflowing. */
  html.alpha-scratcher-framed main .flex.items-end:not(.flex-col),
  html.alpha-scratcher-framed main .flex.justify-between.items-center:not(.flex-col):not(.flex-nowrap) { flex-wrap: wrap; row-gap: 8px; }
  /* Page headers: title block above its stats / buttons. */
  html.alpha-scratcher-framed main .flex.justify-between.items-end,
  html.alpha-scratcher-framed main .flex.justify-between.items-start:has(> div > h2, > div > h3) { flex-wrap: wrap; row-gap: 8px; }
  /* Fixed-height KPI cards grow with their (now wrapping) labels. */
  html.alpha-scratcher-framed main .h-28 { height: auto !important; min-height: 7rem; }
  html.alpha-scratcher-framed main select,
  html.alpha-scratcher-framed main input[type="date"] { max-width: 100%; }
  html.alpha-scratcher-framed main [class*="min-w-["] { min-width: 0 !important; }

  /* Form fields in dialogs: one per row instead of two squeezed columns. */
  html.alpha-scratcher-framed .fixed.inset-0 .grid.grid-cols-2:has(input, select, textarea):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]) { grid-template-columns: minmax(0, 1fr) !important; }
  html.alpha-scratcher-framed .fixed.inset-0 .grid:has(input, select, textarea) > [class*="col-span-"] { grid-column: 1 / -1 !important; }

  /* Dialogs: full width, scroll inside, comfortable padding. */
  html.alpha-scratcher-framed .fixed.inset-0 { padding: 8px !important; align-items: flex-start !important; }
  html.alpha-scratcher-framed .fixed.inset-0 > div { max-width: 100% !important; width: 100% !important; max-height: calc(100vh - 16px) !important; overflow-y: auto; }
  html.alpha-scratcher-framed .fixed.inset-0 > div .p-lg,
  html.alpha-scratcher-framed .fixed.inset-0 > div .px-lg { padding-left: 14px !important; padding-right: 14px !important; }

  /* Headings a notch smaller so they fit one line. */
  html.alpha-scratcher-framed main .text-headline-md { font-size: 20px !important; line-height: 28px !important; }
  html.alpha-scratcher-framed main .text-display-lg { font-size: 24px !important; line-height: 32px !important; }
}

/* Segmented tabs (e.g. E-mail log) */
.as-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #eceef0; flex-wrap: wrap; }
.as-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #45464d; white-space: nowrap; }
.as-tab:hover { color: #191c1e; }
.as-tab.active { background: #fff; color: #191c1e; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
html.dark .as-tabs { background: #23262c; }
html.dark .as-tab.active { background: #1a1c22; color: #e2e2e9; }

/* Button labels that only fit on wide pages (the icon stays). */
.as-wide-only { display: none; }
@media (min-width: 1100px) { .as-wide-only { display: inline; } }

/* Hints and descriptions: paragraphs marked font-body-sm (the small body
   text) got the font but not its size, so they showed at full size. Zero
   specificity: an explicit size class on the element still wins. */
:where(p.font-body-sm) { font-size: 13px; line-height: 18px; }

/* Choices in a dialog: icon, name and hint in one row (call answered) */
.as-choice { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #c6c6cd; border-radius: 8px; background: #fff; text-align: left; transition: background .15s, border-color .15s; }
.as-choice:hover { background: rgb(var(--tenant-secondary-rgb) / .1); border-color: var(--tenant-secondary); }
.as-choice.as-danger:hover { background: rgba(186,26,26,.05); border-color: #ba1a1a; }
.as-choice:disabled { cursor: default; }
.as-choice > .material-symbols-outlined:first-child { font-size: 20px; flex-shrink: 0; }
.as-choice > .material-symbols-outlined:last-child { font-size: 18px; margin-left: auto; flex-shrink: 0; color: #a0a3a8; }
.as-choice-name { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: #191c1e; }
.as-choice-hint { display: block; font-size: 12px; line-height: 16px; color: #76777d; }
html.dark .as-choice { background: #1a1c22; border-color: #35393f; }
html.dark .as-choice-name { color: #e2e2e9; }

/* Buttons at the end of a list row. A button that cannot be used is not shown;
   .as-row-slot keeps the others in line with the rows around them. */
.as-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
.as-row-btn, .as-row-slot { width: 24px; height: 26px; flex-shrink: 0; }
/* The buttons' column takes only what the buttons need. */
td.as-sticky-end, th.as-sticky-end { width: 1%; padding-left: 4px !important; padding-right: 6px !important; }
.as-row-btn { border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #45464d; transition: background .15s, color .15s; }
.as-row-btn .material-symbols-outlined { font-size: 16px; }
button.as-row-btn:hover, a.as-row-btn:hover { background: #eceef0; color: #191c1e; }
button.as-row-btn.danger:hover { background: #ffdad6; color: #ba1a1a; }
html.dark .as-row-btn { color: #c6c6cd; }
html.dark button.as-row-btn:hover, html.dark a.as-row-btn:hover { background: #2a2e35; color: #e2e2e9; }
html.dark button.as-row-btn.danger:hover { background: rgba(239,68,68,.18); color: #fca5a5; }

/* Compact KPI cards (lists and detail pages) */
.as-stat { background: #fff; border: 1px solid #c6c6cd; border-radius: 8px; padding: 8px 16px; min-width: 0; }
.as-stat-label { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #45464d; }
.as-stat-value { font-size: 20px; line-height: 28px; font-weight: 600; color: #191c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-stat-sub { font-size: 12px; line-height: 16px; color: #76777d; }
html.dark .as-stat { background: #1a1c22; border-color: #35393f; }
html.dark .as-stat-label { color: #c6c6cd; }
html.dark .as-stat-value { color: #e2e2e9; }

/* Shipment cards (shipment-view.js) */
.as-ship { background: #fff; border: 1px solid #c6c6cd; border-radius: 10px; overflow: hidden; }
.as-ship + .as-ship { margin-top: 8px; }
.as-ship-head { display: grid; grid-template-columns: 28px minmax(200px, 1.6fr) minmax(150px, 1fr) minmax(150px, auto) auto; align-items: center; column-gap: 20px; padding: 12px 16px 12px 10px; }
.as-ship-toggle { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #45464d; align-self: start; }
.as-ship-toggle:hover { background: #f2f4f6; color: #191c1e; }
.as-ship-toggle .material-symbols-outlined { font-size: 20px; transition: transform .2s; }
.as-ship-toggle.open .material-symbols-outlined { transform: rotate(180deg); }
.as-ship-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.as-ship-customer { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; }
.as-ship-customer a { flex-shrink: 0; max-width: 75%; font-weight: 600; color: #191c1e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-ship-customer a:hover { color: rgb(var(--tenant-secondary-ink)); text-decoration: underline; }
.as-ship-customer span { flex: 1 1 0; min-width: 0; font-size: 12px; color: #76777d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-ship-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-ship-num { font-size: 13px; color: #76777d; }
.as-ship-date { font-size: 14px; font-weight: 600; color: #191c1e; }
.as-ship-lines { display: flex; flex-wrap: wrap; gap: 4px; }
.as-ship-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: #eceef0; color: #191c1e; font-size: 12px; white-space: nowrap; }
.as-ship-chip b { font-weight: 600; color: #45464d; }
.as-ship-note { font-size: 12px; color: #76777d; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-ship-progress { min-width: 0; }
.as-ship-progress-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #191c1e; white-space: nowrap; }
.as-ship-progress-top b { font-weight: 600; color: #45464d; }
.as-ship-progress-top b.as-ship-full { color: rgb(var(--tenant-primary-ink)); }
.as-ship-bar { height: 6px; border-radius: 999px; background: #eceef0; overflow: hidden; margin: 5px 0 4px; }
.as-ship-bar > div { height: 100%; border-radius: 999px; background: var(--tenant-secondary, #85C598); transition: width .4s; }
.as-ship-bar > div.as-ship-full { background: var(--tenant-primary); }
.as-ship-sub { font-size: 12px; line-height: 16px; color: #76777d; white-space: nowrap; }
.as-ship-money { text-align: right; min-width: 0; }
.as-ship-total { font-size: 16px; line-height: 22px; font-weight: 600; color: #191c1e; white-space: nowrap; }
.as-ship-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.as-ship-actions:empty { display: none; }
.as-ship-icon { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #45464d; }
.as-ship-icon:hover { background: #f2f4f6; color: #191c1e; }
.as-ship-icon.danger:hover { color: #ba1a1a; }
.as-ship-icon .material-symbols-outlined { font-size: 16px; }
.as-ship-body { display: none; border-top: 1px solid #e0e3e5; background: #fafbfc; padding: 4px 0 8px; }
.as-ship-body.open { display: block; }
.as-ship-table { overflow-x: auto; }
.as-ship-table table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; font-size: 13px; }
.as-ship-table th { padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #45464d; white-space: nowrap; }
.as-ship-table td { padding: 8px 16px; border-top: 1px solid #eceef0; color: #191c1e; }
.as-ship-muted { color: #76777d !important; }
.as-ship-notes { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-ship-section { padding: 12px 16px 2px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #76777d; }
.as-ship-empty { padding: 4px 16px 6px; font-size: 13px; color: #76777d; font-style: italic; }
.as-empty { text-align: center; padding: 32px 16px; color: #76777d; font-size: 14px; background: #fff; border: 1px solid #c6c6cd; border-radius: 10px; }
.as-empty .material-symbols-outlined { display: block; width: 36px; margin: 0 auto 6px; font-size: 36px; color: #a0a3a8; }
/* Narrower: products under the title, invoicing and amounts side by side. */
@media (max-width: 899px) {
  .as-ship-head { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto; row-gap: 10px; }
  .as-ship-main { grid-column: 2 / 4; }
  .as-ship-actions { grid-column: 4; grid-row: 1; align-self: start; }
  .as-ship-progress { grid-column: 2; grid-row: 2; }
  .as-ship-money { grid-column: 3 / 5; grid-row: 2; }
}
@media (max-width: 560px) {
  .as-ship-head { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; }
  .as-ship-main { grid-column: 2; }
  .as-ship-actions { grid-column: 3; }
  .as-ship-progress, .as-ship-money { grid-column: 2 / 4; grid-row: auto; text-align: left; }
}
html.dark .as-ship, html.dark .as-empty { background: #1a1c22; border-color: #35393f; }
html.dark .as-ship-body { background: #16181d; border-color: #35393f; }
html.dark .as-ship-date, html.dark .as-ship-total, html.dark .as-ship-customer a, html.dark .as-ship-progress-top, html.dark .as-ship-table td { color: #e2e2e9; }
html.dark .as-ship-chip, html.dark .as-ship-bar { background: #2a2e35; color: #e2e2e9; }
html.dark .as-ship-table td { border-color: #2a2e35; }
html.dark .as-ship-toggle:hover, html.dark .as-ship-icon:hover { background: #262a31; }

/* List tables with fixed columns (Call tracking, E-mail log, contact page):
   the page sets the column widths with <col> classes; text that does not fit
   ends in "…". */
.as-ltable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.as-ltable th { padding: 7px 10px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #45464d; background: #f2f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-ltable td { padding: 8px 10px; border-top: 1px solid #e0e3e5; vertical-align: middle; overflow: hidden; }
.as-ltable tbody tr:hover { background: #f7f9fb; }
.as-ltable th:first-child, .as-ltable td:first-child { padding-left: 16px; }
.as-ltable th:last-child, .as-ltable td:last-child { padding-right: 16px; }
.as-ltable .as-muted { color: #76777d; }
.as-ltable tr.as-clickable { cursor: pointer; }
html.dark .as-ltable th { background: #23262c; color: #c6c6cd; }
html.dark .as-ltable td { border-color: #2a2e35; }
html.dark .as-ltable tbody tr:hover { background: #1f2228; }
/* A card holding one list table */
.as-lcard { background: #fff; border: 1px solid #c6c6cd; border-radius: 8px; overflow-x: auto; }
html.dark .as-lcard { background: #1a1c22; border-color: #35393f; }

/* Underlined tabs on detail pages (customer, contact) with an optional count.
   The line under the tabs is a shadow, so the active tab's border covers it
   without overflowing the (sideways scrolling) row. */
.as-utab-row { display: flex; align-items: center; gap: 24px; overflow-x: auto; box-shadow: inset 0 -1px 0 #c6c6cd; }
.as-utab { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 2px; border-bottom: 2px solid transparent; color: #45464d; font-size: 14px; font-weight: 500; white-space: nowrap; }
.as-utab:hover { color: #191c1e; }
.as-utab:focus { outline: none; }
.as-utab:focus-visible { outline: 2px solid var(--tenant-secondary, #85C598); outline-offset: 2px; border-radius: 4px; }
.as-utab.active { color: #191c1e; border-bottom-color: var(--tenant-secondary, #85C598); font-weight: 600; }
.as-utab-count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: #eceef0; color: #45464d; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.as-utab-count:empty { display: none; }
html.dark .as-utab-row { box-shadow: inset 0 -1px 0 #35393f; }
html.dark .as-utab { color: #c6c6cd; }
html.dark .as-utab.active, html.dark .as-utab:hover { color: #e2e2e9; }
html.dark .as-utab-count { background: #2a2e35; color: #c6c6cd; }

/* Row buttons stay in view at the right edge of a list that scrolls sideways. */
.as-sticky-end { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -10px 0 10px -10px rgba(0,0,0,.18); }
thead .as-sticky-end { background: #f2f4f6; }
tr:hover > .as-sticky-end { background: #f7f9fb; }
html.dark .as-sticky-end { background: #1a1c22; }
html.dark thead .as-sticky-end { background: #23262c; }
html.dark tr:hover > .as-sticky-end { background: #1f2228; }

/* Content cards (Reports, Agents) and their titles */
.as-card { background: #fff; border: 1px solid #c6c6cd; border-radius: 8px; padding: 16px; min-width: 0; }
.as-card-title { font-size: 15px; line-height: 22px; font-weight: 600; color: #191c1e; margin: 0 0 8px; }
.as-card-label { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #76777d; }
html.dark .as-card { background: #1a1c22; border-color: #35393f; }
html.dark .as-card-title { color: #e2e2e9; }
/* A table inside a card or on its own, as on the list pages */
.as-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.as-table th { padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #45464d; background: #f2f4f6; white-space: nowrap; }
.as-table td { padding: 8px 16px; border-top: 1px solid #e0e3e5; color: #191c1e; vertical-align: middle; }
.as-table tbody tr:hover { background: #f7f9fb; }
html.dark .as-table th { background: #23262c; color: #c6c6cd; }
html.dark .as-table td { border-color: #2a2e35; color: #e2e2e9; }
html.dark .as-table tbody tr:hover { background: #1f2228; }
/* The chosen period next to the period choice (Reports) */
.as-period { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: #eceef0; color: #45464d; font-size: 13px; white-space: nowrap; }
.as-period .material-symbols-outlined { font-size: 16px; }
html.dark .as-period { background: #2a2e35; color: #c6c6cd; }
.as-card.p-0 { padding: 0; }

/* Tags: coloured text like the statuses, several side by side. */
.as-tags { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; }

/* Commission per product (User Management, Agents page). */
.pr-rate-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px 32px; gap: 8px; align-items: center; }
.pr-rate-row .as-select { max-width: none; width: 100%; }
.pr-rate-pct { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #45464d; }
.pr-rate-pct input { width: 80px; height: 32px; padding: 0 8px; border: 1px solid #c6c6cd; border-radius: 8px; background: #fff; font-size: 13px; text-align: right; color: inherit; outline: none; }
.pr-rate-pct input:focus { border-color: var(--tenant-secondary, #85C598); box-shadow: 0 0 0 2px rgb(var(--tenant-secondary-rgb) / .25); }
html.dark .pr-rate-pct { color: #9aa0ab; }
html.dark .pr-rate-pct input { background: #1a1c22; border-color: #35393f; }
/* Commission per product: every product with its own % */
.pr-grid-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: #f3f4f6; font-size: 13px; color: #45464d; }
.pr-grid-fill > span:first-child { font-weight: 600; margin-right: auto; }
.pr-grid-list { border: 1px solid #e3e4e8; border-radius: 8px; max-height: 320px; overflow-y: auto; }
.pr-grid-extras { margin-top: 8px; max-height: none; }
.pr-grid-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-top: 1px solid #eeeff2; cursor: pointer; }
.pr-grid-row:first-child { border-top: 0; }
.pr-grid-row:hover { background: #f8f9fb; }
.pr-grid-name { min-width: 0; font-size: 13px; color: #1b1b21; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.pr-grid-name .material-symbols-outlined { font-size: 16px; color: #5b6170; }
.pr-grid-hint { flex-basis: 100%; font-size: 11px; color: #6b7080; }
.pr-grid-muted { color: #8a8f9c; font-size: 12px; }
.pr-grid-empty { font-size: 13px; color: #6b7080; padding: 8px 0; }
html.dark .pr-grid-fill { background: #22252c; color: #9aa0ab; }
html.dark .pr-grid-list { border-color: #35393f; }
html.dark .pr-grid-row { border-color: #2c2f36; }
html.dark .pr-grid-row:hover { background: #22252c; }
html.dark .pr-grid-name { color: #e3e5ea; }
.pr-add { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: rgb(var(--tenant-secondary-ink, 60 127 80)); }
.pr-add:hover { text-decoration: underline; }
.pr-add .material-symbols-outlined { font-size: 16px; }

/* ── Private label mark (Calls, E-mail, dashboard): the company's colours, a seal ── */
.as-pl-mark { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 5px; border-radius: 999px; flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; line-height: 1;
  color: rgb(var(--tenant-secondary-ink, 60 127 80));
  background: linear-gradient(135deg, rgb(var(--tenant-secondary-rgb, 133 197 152) / .26) 0%, rgb(var(--tenant-secondary-rgb, 133 197 152) / .07) 100%);
  box-shadow: inset 0 0 0 1px rgb(var(--tenant-secondary-rgb, 133 197 152) / .5); }
.as-pl-mark .material-symbols-outlined { font-size: 14px; font-variation-settings: 'FILL' 1, 'wght' 500; }
.as-pl-mark.is-compact { padding: 0; width: 20px; justify-content: center; }
html.dark .as-pl-mark { color: rgb(var(--tenant-secondary-rgb, 133 197 152)); background: linear-gradient(135deg, rgb(var(--tenant-secondary-rgb, 133 197 152) / .2), rgb(var(--tenant-secondary-rgb, 133 197 152) / .05)); }
/* Its row: a thin accent on the left edge. */
.as-pl-row > td:first-child { box-shadow: inset 3px 0 0 rgb(var(--tenant-secondary-rgb, 133 197 152) / .85); }
.as-pl-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.as-pl-name > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pl-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: 12px; color: #6b7080; }
.as-pl-sub > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pl-sub .as-pl-mark { height: 18px; font-size: 9.5px; }
html.dark .as-pl-sub { color: #9aa0ab; }

/* Checkboxes, radio buttons and the focus ring follow the company colours
   (the forms plugin in tailwind.css draws them blue). Zero-specificity
   selectors: a utility class on an element still wins. The fill is the
   secondary colour darkened until a white tick reads on it. */
input:where([type=checkbox], [type=radio]) { color: rgb(var(--tenant-secondary-ink-light)); accent-color: rgb(var(--tenant-secondary-ink-light)); }
input:where([type=checkbox], [type=radio]):focus { --tw-ring-color: rgb(var(--tenant-secondary-rgb) / .5); }
input:where([type=checkbox], [type=radio]):focus:not(:focus-visible) { --tw-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; }
html.dark input:where([type=checkbox], [type=radio]):focus { --tw-ring-offset-color: #1a1c22; }
input:where(:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=range], [type=color], [type=file])):focus,
select:focus, textarea:focus { --tw-ring-color: rgb(var(--tenant-secondary-rgb) / .35); border-color: var(--tenant-secondary); }