/* =========================================================================== * components.css — shared component library. Reads tokens.css. * ADDITIVE in Wave 0: never redefines a selector already in style.css. * Base classes (.btn/.table/.badge/.panel/.empty/.flash) stay in style.css and * get consolidated here as pages migrate in later waves. * ======================================================================== */ /* ---- buttons ---- Base classes live HERE, not in style.css: the client shell loads this file but not style.css, and row drawers put .btn on tenant pages. They must come before the modifiers below — same specificity, so source order decides. */ .btn { font-size:var(--fs-sm); font-weight:var(--fw-medium); padding:.5rem 1rem; border-radius:6px; border:1px solid var(--border); background:var(--panel2); color:var(--text); cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s; } .btn:hover { border-color:var(--accent); } /* .btn also lands on (drawer links) — kill the underline it inherits. */ a.btn { display:inline-block; text-decoration:none; text-align:center; } .btn-primary { background:var(--accent); border-color:var(--accent-hover); color:var(--accent-fg); } .btn-primary:hover { background:var(--accent-hover); } .btn-ghost { background:transparent; } .btn-danger { color:var(--err); border-color:var(--err-border); } .btn-danger:hover { background:var(--err-soft); } .btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; } .btn-secondary { background:var(--panel2); } .btn-sm { font-size:var(--fs-sm); padding:.25rem .625rem; border-radius:var(--r-sm); } /* ---- badges (base classes, same reason as buttons) ---- */ .badge { display:inline-block; font-size:var(--fs-sm); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.4px; padding:2px 8px; border-radius:20px; background:var(--panel2); color:var(--muted); border:1px solid var(--border); } .badge-ok { background:var(--ok-soft); color:var(--ok); border-color:var(--ok-border); } .badge-warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-border); } .badge-err { background:var(--err-soft); color:var(--err); border-color:var(--err-border); } /* ---- zoom control (moved here from style.css: the client shell loads this file but not style.css, and it now has the [−][+] control too). ALL measurements are fixed px — this control does NOT scale with --ui-scale. HARD RULE: no rem, no em, no calc(px * var(--ui-scale)) anywhere in this block. */ .zoom-control { display:inline-flex; align-items:center; gap:4px; } .zoom-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; font-size:16px; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1; transition:border-color .12s, color .12s, background .12s; } .zoom-btn:hover:not([disabled]) { border-color:var(--accent); color:var(--text); background:var(--panel2); } .zoom-btn[disabled] { opacity:.3; cursor:not-allowed; } .zoom-label { font-family:ui-monospace, Menlo, monospace; font-size:11px; color:var(--muted); min-width:32px; text-align:center; /* fixed size — never shifts between 85% and 100% or 145% */ user-select:none; } /* ---- form fields ---- */ .field { display:block; margin-bottom:1rem; } .field > label { display:block; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--muted); letter-spacing:.02em; margin-bottom:.375rem; } .input, .select, textarea.input { width:100%; font-family:var(--font); font-size:var(--fs-md); color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:.5625rem .6875rem; transition:border-color .15s, box-shadow .15s; } .input:focus, .select:focus, textarea.input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .input.mono { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; } .input:disabled, .select:disabled, textarea.input:disabled { opacity:.45; cursor:not-allowed; } .input.is-invalid, .select.is-invalid, textarea.is-invalid { border-color:var(--err); box-shadow:0 0 0 3px var(--err-soft); } .field-error { display:none; align-items:center; gap:.3125rem; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--err); margin-top:.375rem; } .field-hint { font-size:var(--fs-xs); color:var(--faint); margin-top:.375rem; line-height:1.5;} .field-row { display:flex; gap:.857rem; flex-wrap:wrap; } .field-row .field { flex:1; min-width:160px; } /* ---- table enhancers (base .table stays in style.css; these layer on it) ---- */ .table-wrap { overflow-x:auto; border-radius:var(--r-lg); } .table th.sortable { cursor:pointer; user-select:none; } .table .sort-arrow { color:var(--accent); margin-left:.25rem; } .table th.num, .table td.num { text-align:right; } .table td.mono, .table .mono { font-family:var(--font-mono); color:var(--text); font-variant-numeric:tabular-nums; } .table .table-actions { text-align:right; white-space:nowrap; } .table .table-empty td { text-align:center; color:var(--muted); padding:2.25rem 0; } /* ---- cards ---- */ .card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .card > .card-head { font-size:var(--fs-sm); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:.8125rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; } .card > .card-body { padding:1rem; } /* ---- KPI tiles ---- */ .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.875rem; } .kpi { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:.875rem .9375rem; box-shadow:var(--shadow-sm); } .kpi .kpi-label { font-size:var(--fs-xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .kpi .kpi-value { font-size:var(--fs-3xl); font-weight:var(--fw-semibold); letter-spacing:-.02em; margin-top:.4375rem; color:var(--text); font-variant-numeric:tabular-nums; } .kpi .kpi-value small { font-size:var(--fs-md); color:var(--muted); font-weight:var(--fw-medium); } .kpi .kpi-sub { font-size:var(--fs-sm); color:var(--muted); margin-top:.1875rem; } .kpi.is-alert .kpi-value { color:var(--err); } @media (max-width:760px) { .kpi-grid { grid-template-columns:repeat(2,1fr); } } /* ---- badge / status extras (base .badge/.badge-ok/warn/err in style.css) ---- */ .badge-neutral { background:var(--panel2); color:var(--muted); border:1px solid var(--border); } .pill { font-family:var(--font-mono); font-size:var(--fs-xs); padding:.125rem .5rem; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent); } .status { display:inline-flex; align-items:center; gap:.375rem; color:var(--text2); font-size:var(--fs-sm); } .status .dot { width:6px; height:6px; border-radius:50%; background:var(--muted); } .status-ok .dot { background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); } .status-warn .dot { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); } .status-err .dot { background:var(--err); box-shadow:0 0 0 3px var(--err-soft); } /* token-driven accent text (used by js/test.js) */ .accent-text { color:var(--accent); } /* ---- states ---- */ .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; color:var(--muted); padding:2.5rem 1rem; } .empty-state .empty-icon { font-size:var(--fs-2xl); opacity:.5; } .skeleton { height:.6875rem; border-radius:var(--r-sm); background:linear-gradient(90deg,var(--panel2),var(--border),var(--panel2)); background-size:200% 100%; animation:skeleton-shimmer 1.3s infinite; } @keyframes skeleton-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } .error-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:2rem 1rem; color:var(--text2); } .error-state .error-icon { font-size:var(--fs-2xl); color:var(--err); } .toast { display:flex; align-items:center; gap:.5625rem; padding:.5625rem .8125rem; border-radius:var(--r); font-size:var(--fs-sm); font-weight:var(--fw-medium); margin-bottom:.5625rem; } .toast-ok { background:var(--ok-soft); border:1px solid var(--ok); color:var(--ok); } .toast-err { background:var(--err-soft); border:1px solid var(--err-border); color:var(--err); } /* ---- spacing / layout utilities (kill inline styles) ---- */ .mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; } .mb-2 { margin-bottom:1rem; } .ml-auto { margin-left:auto; } .row { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; } .spread { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; } .ellipsis { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---- chrome: grouped top-bar nav (Wave 1) ---- */ .nav { gap:.1875rem; align-items:center; } .nav a { padding:.3125rem .6875rem; border-radius:var(--r-sm); border-bottom:0; } .nav a:hover { color:var(--text); background:var(--accent-soft); } .nav a.active { color:var(--text); background:var(--accent-soft); border-bottom:0; font-weight:var(--fw-medium); } .nav-group { font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:var(--fw-medium); padding:0 .375rem; align-self:center; } .nav-sep { width:1px; height:1rem; background:var(--border); margin:0 .25rem; align-self:center; } .nav-overflow { position:relative; } .nav-overflow > button { font-family:var(--font); font-size:var(--fs-md); color:var(--muted); padding:.3125rem .6875rem; border:1px solid var(--border); border-radius:var(--r-sm); background:transparent; cursor:pointer; } .nav-overflow > button:hover, .nav-overflow.open > button { color:var(--text); border-color:var(--accent); } .nav-overflow > button.active { color:var(--text); background:var(--accent-soft); border-color:var(--accent-border); } .nav-overflow .nav-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:190px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:.375rem; display:none; z-index:20; } .nav-overflow.open .nav-menu { display:block; } .nav-overflow .nav-menu a { display:block; padding:.4375rem .625rem; border-radius:var(--r-sm); color:var(--muted); text-decoration:none; } .nav-overflow .nav-menu a:hover { background:var(--accent-soft); color:var(--text); } .nav-overflow .nav-menu a.active { background:var(--accent-soft); color:var(--text); font-weight:var(--fw-medium); } @media (max-width:720px) { .topbar { flex-wrap:wrap; gap:.875rem; padding:.625rem 1rem; } .nav { width:100%; order:5; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.25rem; } .nav-group { display:none; } } /* ---- operator rich table (js/table.js mounted on a .table, e.g. dashboard.php's "Corridas recientes" panel). Scoped under .op-table-wrap: js/table.js injects the column-picker popover and pager with the SAME class names the client panel uses (.cp-picker/.cp-pager, hardcoded in table.js) — this file loads AFTER client.css on client pages, so an unscoped rule here would win the cascade and clobber the client panel's look. Scoping avoids that entirely. */ .op-table-wrap .table th[draggable] { position:relative; cursor:grab; user-select:none; } .op-table-wrap .table th.drag-over { box-shadow:inset 2px 0 0 var(--accent); } .op-table-wrap .table .th-sort { margin-left:.25rem; color:var(--accent); } .op-table-wrap .table .th-grip { position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; } .op-table-wrap .table th:hover .th-grip { box-shadow:inset -2px 0 0 var(--accent); } .op-table-wrap .table col.col-hidden { visibility:collapse; } .op-table-wrap .table th.col-hidden, .op-table-wrap .table td.col-hidden { display:none; } .op-table-wrap .table td.zero { color:var(--err); font-weight:var(--fw-medium); } .op-tablefoot { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; font-size:var(--fs-sm); color:var(--muted); } .op-table-wrap .cp-pager { display:flex; gap:.25rem; } .op-table-wrap .cp-pager button { font-family:var(--font-mono); font-size:var(--fs-sm); padding:.125rem .5rem; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--panel2); color:var(--text2); cursor:pointer; } .op-table-wrap .cp-pager button.on { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); } .op-table-wrap .cp-pager button:disabled { opacity:.4; cursor:not-allowed; } .op-colbtn { margin-left:auto; font-family:var(--font); font-size:var(--fs-sm); padding:.3125rem .75rem; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--panel2); color:var(--text2); cursor:pointer; position:relative; } .op-table-wrap .cp-picker { position:absolute; right:0; top:36px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:.5rem; width:200px; z-index:6; text-align:left; } .op-table-wrap .cp-picker label { display:flex; align-items:center; gap:.5rem; padding:.375rem .5rem; font-size:var(--fs-sm); font-weight:var(--fw-normal); text-transform:none; letter-spacing:normal; color:var(--text2); border-radius:var(--r-sm); cursor:pointer; } .op-table-wrap .cp-picker label:hover { background:var(--panel2); } .op-table-toolbar { display:flex; align-items:center; padding:.625rem 1rem 0; } /* ---- admin form layout (settings/tenants/sites) ---- */ .form-tbl { width:100%; border-collapse:collapse; } .form-tbl > tbody > tr > td { padding:.5rem 0; vertical-align:top; } .form-tbl td.label { width:220px; color:var(--muted); font-size:var(--fs-md); padding-right:1rem; } .top { vertical-align:top; } .check { display:inline-flex; align-items:center; gap:.375rem; font-size:var(--fs-md); color:var(--muted); cursor:pointer; } .check-row { display:flex; gap:.5rem 1rem; flex-wrap:wrap; align-items:center; } .rules-tbl { border-collapse:collapse; margin:.375rem 0; } .rules-tbl th { text-align:left; color:var(--muted); font-size:var(--fs-sm); font-weight:var(--fw-medium); padding:.125rem .5rem .125rem 0; } .rules-tbl td { padding:.1875rem .5rem .1875rem 0; } .w-auto { width:auto; } .w-num { width:90px; } .w-amt { width:120px; } .w-mid { width:160px; } .w-tz { width:240px; } .w-lg { width:100%; max-width:400px; } .w-xs { width:60px; } .input.code, .select.code { font-family:var(--font-mono); text-transform:none; letter-spacing:0; } .form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.75rem; margin-bottom:.75rem; } .strong { font-weight:var(--fw-medium); } .contents { display:contents; } /* ---- sites pacing config (cards, one per portal) ---- */ .site-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1rem; } .site-card .card-head .row { gap:.5rem; } .site-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem 1rem; margin:0 0 1rem; padding:0 0 1rem; border-bottom:1px solid var(--border-subtle); } .site-meta > div { display:flex; flex-direction:column; gap:.125rem; } .site-meta dt { font-size:var(--fs-xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); } .site-meta dd { margin:0; font-size:var(--fs-md); color:var(--text2); } .pacing-grid { display:grid; grid-template-columns:1fr; gap:.5rem 1rem; } .pacing-grid .field { margin-bottom:.5rem; } .pacing-pair { display:flex; align-items:center; gap:.5rem; } .pacing-pair .input { width:5rem; } .pacing-sep { color:var(--faint); } .pacing-actions { display:flex; justify-content:flex-end; margin-top:.25rem; } @media (min-width:520px) { .site-meta { grid-template-columns:repeat(4,1fr); } } /* Las dos URLs del portal: una columna por fila incluso en ancho grande — son largas y truncarlas en 4 columnas las vuelve ilegibles. La plantilla se corta con ellipsis. */ .site-urls { grid-template-columns:1fr; } @media (min-width:520px) { .site-urls { grid-template-columns:1fr; } } .site-urls dd { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .site-urls dd a { color:var(--accent); text-decoration:none; } .site-urls dd a:hover { text-decoration:underline; } .site-urls code.small { font-size:var(--fs-sm); color:var(--text2); } /* ---- sites page: help disclosure ---- */ .sites-help { margin:0 0 1rem; border:1px solid var(--border-subtle); border-radius:var(--r); background:var(--panel2); } .sites-help > summary { cursor:pointer; padding:.625rem .875rem; font-weight:var(--fw-medium); font-size:var(--fs-md); color:var(--text2); list-style:none; user-select:none; } .sites-help > summary::-webkit-details-marker { display:none; } .sites-help > summary::before { content:'▸ '; color:var(--faint); } .sites-help[open] > summary::before { content:'▾ '; } .sites-help-body { padding:0 .875rem .875rem; font-size:var(--fs-md); color:var(--text2); line-height:1.5; } .sites-help-body p { margin:.5rem 0; } .sites-help-body ul { margin:.25rem 0 .5rem; padding-left:1.25rem; } .sites-help-body li { margin:.25rem 0; } .sites-help-body hr { border:0; border-top:1px solid var(--border-subtle); margin:.75rem 0; } .sites-help-tip { color:var(--text2); } /* ---- sites page: kill-switch + disabled state ---- */ .sites-killswitch { display:flex; align-items:center; gap:.75rem; margin:0 0 1rem; } .site-card--off { opacity:.55; } .site-toggle { margin:0; } .badge-muted { background:var(--panel2); color:var(--muted); } /* ---- two-context admin shell ----------------------------------------- */ .admin-body { min-width:320px; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--bg); } /* Sidebar width lives in a token so the rail toggle only swaps one value. [data-sidebar="rail"] is set on by the boot script BEFORE paint. */ .admin-app { min-height:100vh; display:grid; grid-template-columns:minmax(220px,var(--sidebar-w)) minmax(0,1fr); } [data-sidebar="rail"] .admin-app { grid-template-columns:var(--sidebar-w-rail) minmax(0,1fr); } .app-workspace { min-width:0; min-height:100vh; display:flex; flex-direction:column; } .app-sidebar { position:sticky; top:0; height:100vh; z-index:30; overflow-y:auto; padding:1.15rem .9rem .85rem; display:flex; flex-direction:column; color:var(--sidebar-text); background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border); box-shadow:none; } /* The sidebar is a 100vh flex column: its children shrink by default, so once the nav outgrows the viewport the browser squeezes the brand/tenant card instead of scrolling — and the card's own overflow:hidden then CLIPS the status badge. These blocks keep their intrinsic height and let .app-sidebar's overflow-y:auto do the scrolling. */ .app-brand, .tenant-back, .tenant-context-card, .app-navigation, .app-sidebar-foot { flex:none; } .app-brand { display:flex; align-items:center; gap:.72rem; padding:.05rem .48rem 1.15rem; color:var(--sidebar-heading); font-weight:var(--fw-semibold); letter-spacing:-.025em; font-size:var(--fs-lg); } .app-brand-mark { width:2rem; height:2rem; display:grid; place-items:center; flex:0 0 auto; border-radius:.63rem; color:var(--accent-fg); background:linear-gradient(145deg,var(--accent),var(--accent-hover)); box-shadow:none; font-family:var(--font-display); font-size:var(--fs-lg); } .tenant-back { display:flex; align-items:center; gap:.5rem; padding:.62rem .62rem .78rem; margin:0 0 .76rem; color:var(--sidebar-text-muted); text-decoration:none; font-size:var(--fs-sm); border-bottom:1px solid var(--sidebar-border); } .tenant-back:hover { color:var(--sidebar-heading); } .tenant-context-card { position:relative; display:flex; flex-direction:column; gap:.16rem; margin:0 0 .85rem; padding:.78rem .8rem .82rem; overflow:hidden; border:1px solid var(--sidebar-border); border-radius:.78rem; background:color-mix(in srgb, var(--sidebar-text) 7%, transparent); box-shadow:none; } .tenant-context-card::after { content:""; position:absolute; width:4rem; height:4rem; right:-2rem; top:-2rem; border-radius:50%; background:var(--accent-soft); filter:blur(.2rem); } .tenant-context-label { color:var(--sidebar-text-muted); font-size:var(--fs-2xs); line-height:1.3; font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.07em; } .tenant-context-card strong { position:relative; z-index:1; margin-top:.16rem; color:var(--sidebar-heading); font-size:var(--fs-md); font-weight:var(--fw-medium); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tenant-context-card > span:not(.tenant-context-label):not(.tenant-context-status) { color:var(--sidebar-text-muted); font-size:var(--fs-xs); } .tenant-context-status { align-self:flex-start; margin-top:.45rem; padding:.16rem .46rem; border-radius:999px; font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.06em; text-transform:uppercase; } .tenant-context-status.is-active { color:var(--ok); background:var(--ok-soft); } .tenant-context-status.is-inactive { color:var(--warn); background:var(--warn-soft); } /* The gap below separates GROUPS. Items need their own gap inside each group — without it their rounded backgrounds touch edge to edge and an active item reads as overlapping its neighbour. */ .app-navigation { display:flex; flex-direction:column; gap:.9rem; } .app-nav-group { display:flex; flex-direction:column; gap:.3rem; } .app-nav-label { padding:.75rem .7rem .4rem; color:var(--sidebar-text-muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.07em; text-transform:uppercase; } .app-nav-item { position:relative; display:flex; align-items:center; gap:.65rem; min-height:2.6rem; padding:.6rem .75rem; color:var(--sidebar-text); text-decoration:none; border-radius:.62rem; font-size:var(--fs-sm); font-weight:var(--fw-normal); transition:color .16s,background .16s,transform .16s; } .app-nav-item:hover { color:var(--sidebar-heading); background:color-mix(in srgb, var(--sidebar-text) 9%, transparent); transform:translateX(2px); } .app-nav-item.is-active { color:var(--sidebar-heading); background:var(--accent-soft); box-shadow:inset 2px 0 var(--accent); font-weight:var(--fw-medium);} /* Icons are stroke SVGs applied as a MASK filled with currentColor — the hover/active colour rules below keep working untouched. They replace the unicode glyphs (⌂ ▦ ♙ ≋ …), which rendered from whatever fallback font had them, at 14px, and became illegible once the sidebar collapsed to a rail. The SVG sources live in css/tokens.css as --ic-*. */ .app-nav-icon { display:block; width:1.25rem; height:1.25rem; flex:0 0 auto; font-size:0; color:var(--sidebar-text-muted); background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-image:var(--ic-logs); mask-image:var(--ic-logs); } .app-nav-item.is-active .app-nav-icon { color:var(--accent); } .app-nav-icon[data-icon="home"] { -webkit-mask-image:var(--ic-home); mask-image:var(--ic-home); } .app-nav-icon[data-icon="tenants"] { -webkit-mask-image:var(--ic-tenants); mask-image:var(--ic-tenants); } .app-nav-icon[data-icon="settings"] { -webkit-mask-image:var(--ic-settings); mask-image:var(--ic-settings); } .app-nav-icon[data-icon="sites"] { -webkit-mask-image:var(--ic-sites); mask-image:var(--ic-sites); } .app-nav-icon[data-icon="alerts"] { -webkit-mask-image:var(--ic-alerts); mask-image:var(--ic-alerts); } .app-nav-icon[data-icon="health"] { -webkit-mask-image:var(--ic-health); mask-image:var(--ic-health); } .app-nav-icon[data-icon="ai"] { -webkit-mask-image:var(--ic-ai); mask-image:var(--ic-ai); } .app-nav-icon[data-icon="logs"] { -webkit-mask-image:var(--ic-logs); mask-image:var(--ic-logs); } .app-nav-icon[data-icon="fines"] { -webkit-mask-image:var(--ic-fines); mask-image:var(--ic-fines); } .app-nav-icon[data-icon="plates"] { -webkit-mask-image:var(--ic-plates); mask-image:var(--ic-plates); } .app-nav-icon[data-icon="runs"] { -webkit-mask-image:var(--ic-runs); mask-image:var(--ic-runs); } .app-nav-icon[data-icon="queue"] { -webkit-mask-image:var(--ic-queue); mask-image:var(--ic-queue); } .app-nav-icon[data-icon="download"] { -webkit-mask-image:var(--ic-download); mask-image:var(--ic-download); } .app-nav-icon[data-icon="upload"] { -webkit-mask-image:var(--ic-upload); mask-image:var(--ic-upload); } .app-nav-icon[data-icon="users"] { -webkit-mask-image:var(--ic-users); mask-image:var(--ic-users); } .app-nav-icon[data-icon="test"] { -webkit-mask-image:var(--ic-test); mask-image:var(--ic-test); } /* ---- nav badge (active-count pill; used in BOTH shells — the operator sidebar's .app-nav-item and the client panel's .cp-nav a). Tokens only: --danger is the --err alias, --accent-fg is the existing "text on a saturated background" token (used by .btn-primary etc.) and inverts light/dark exactly like --err/--danger does per theme, so it reads as white-on-dark-red / dark-on-light-red in both skins without a literal hex. */ .app-nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.125rem; height:1.125rem; padding:0 5px; margin-left:6px; border-radius:var(--r-pill); background:var(--danger); color:var(--accent-fg); font-size:var(--fs-2xs); font-weight:var(--fw-semibold); line-height:1; } /* ---- collapsed rail (72px) ------------------------------------------ The old collapse read as broken because the glyph stayed at 14px in a 60px column. Here the icon goes to 24px inside a 44px hit area, and the group labels are replaced by a divider since they are hidden. Each item keeps its title="" so the native tooltip names it. DESKTOP ONLY (min-width:921px): below that the sidebar is the off-canvas drawer, and a persisted rail cookie would otherwise open a full-width drawer with every label hidden. */ @media (min-width:921px) { [data-sidebar="rail"] .app-sidebar { padding:1.1rem .5rem .85rem; overflow:visible; } [data-sidebar="rail"] .app-brand > span:not(.app-brand-mark), [data-sidebar="rail"] .app-nav-item > span:not(.app-nav-icon), [data-sidebar="rail"] .app-nav-label, [data-sidebar="rail"] .tenant-back, [data-sidebar="rail"] .app-sidebar-foot, [data-sidebar="rail"] .tenant-context-card > span, [data-sidebar="rail"] .tenant-context-card > strong { display:none; } [data-sidebar="rail"] .app-brand { justify-content:center; padding:.05rem 0 1rem; } [data-sidebar="rail"] .app-brand-mark { width:2.35rem; height:2.35rem; font-size:var(--fs-xl); } [data-sidebar="rail"] .app-nav-item { justify-content:center; min-height:2.75rem; padding:.55rem 0; border-radius:.7rem; } [data-sidebar="rail"] .app-nav-item:hover { transform:none; } [data-sidebar="rail"] .app-nav-icon { width:1.5rem; height:1.5rem; } [data-sidebar="rail"] .app-nav-group { gap:.25rem; } [data-sidebar="rail"] .app-navigation { gap:.7rem; } [data-sidebar="rail"] .app-nav-group + .app-nav-group { padding-top:.7rem; border-top:1px solid var(--sidebar-border); } [data-sidebar="rail"] .tenant-context-card { align-items:center; justify-content:center; min-height:2.6rem; padding:.4rem .25rem; margin-bottom:.7rem; } [data-sidebar="rail"] .tenant-context-card::before { content:attr(data-initials); color:var(--sidebar-heading); font-size:var(--fs-md); font-weight:var(--fw-semibold); letter-spacing:.02em; } [data-sidebar="rail"] .tenant-context-card::after { display:none; } } /* Collapse button — fixed px, immune to --ui-scale: it is a control, not content. Same hard rule as the zoom stepper and the theme toggle. */ .sidebar-toggle { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; flex-shrink:0; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; transition:border-color .15s, color .15s, background .15s; /* HARD RULE: no rem, no calc with --ui-scale */ } .sidebar-toggle:hover { border-color:var(--accent); color:var(--text); background:var(--panel2); } .sidebar-toggle svg { width:17px; height:17px; display:block; } .app-sidebar-foot { margin-top:auto; padding:.9rem .65rem .15rem; color:var(--sidebar-text-muted); font-size:var(--fs-xs); border-top:1px solid var(--sidebar-border); } .app-topbar { position:sticky; top:0; z-index:20; min-height:4.15rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.72rem 1.65rem; background:color-mix(in srgb,var(--panel) 91%,transparent); border-bottom:1px solid var(--border); backdrop-filter:blur(15px); } .app-topbar-context { min-width:0; display:flex; align-items:center; gap:.8rem; } .app-topbar-context > div { min-width:0; display:flex; flex-direction:column; } .app-context-kicker { color:var(--faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .app-topbar-context strong { color:var(--text); font-size:var(--fs-md); letter-spacing:-.015em; font-weight:var(--fw-medium);} .app-topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; } .app-menu-toggle { display:none; width:34px; height:34px; padding:7px; border:1px solid var(--border); border-radius:8px; background:var(--panel2); cursor:pointer; flex:0 0 auto; } .app-menu-toggle span { display:block; height:2px; margin:3px 0; border-radius:2px; background:var(--text2); } .sidebar-scrim { display:none; } .app-run-button { white-space:nowrap; } .app-logout-button { font-size:var(--fs-sm); } .app-content.wrap { width:100%; max-width:104rem; flex:1; margin:0 auto; padding:1.75rem 2rem 5rem; } .app-footer { margin-left:0; } .page-head-spacious { align-items:flex-end; justify-content:space-between; margin-bottom:1.5rem; } .page-eyebrow { display:block; margin-bottom:.25rem; color:var(--accent); font-size:var(--fs-2xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.08em; } .page-head-spacious h1 { font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:var(--fw-semibold); letter-spacing:-.02em; } .page-subtitle { max-width:48rem; margin:.35rem 0 0; color:var(--muted); font-size:var(--fs-md); font-weight:var(--fw-normal); line-height:1.6;} .system-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .system-tool-card { min-height:9rem; display:grid; grid-template-columns:2.35rem 1fr auto; gap:1rem; align-items:start; padding:1.25rem; color:var(--text); text-decoration:none; background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel2) 45%,var(--panel))); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .18s,border-color .18s,box-shadow .18s; } .system-tool-card:hover { transform:translateY(-2px); border-color:var(--accent-border); box-shadow:var(--shadow); } .system-tool-icon { width:2.35rem; height:2.35rem; border-radius:.7rem; color:var(--accent); background:var(--accent-soft); font-size:var(--fs-lg); } .system-tool-copy { display:flex; flex-direction:column; gap:.38rem; } .system-tool-copy strong { font-size:var(--fs-lg); letter-spacing:-.015em; } .system-tool-copy span { color:var(--muted); font-size:var(--fs-sm); line-height:1.55; } .system-tool-action { align-self:end; color:var(--accent); font-size:var(--fs-xs); font-weight:var(--fw-medium); white-space:nowrap; } .tenant-create-card { margin-bottom:1.25rem; } .tenant-create-card > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.15rem; cursor:pointer; } .tenant-create-card > summary::-webkit-details-marker { display:none; } .tenant-create-card > summary span { display:flex; flex-direction:column; gap:.18rem; } .tenant-create-card > summary strong { color:var(--text); font-size:var(--fs-md); } .tenant-create-card > summary small { color:var(--muted); font-size:var(--fs-xs); font-weight:var(--fw-normal); } .tenant-create-card > summary::after { content:"+"; color:var(--accent); font-size:var(--fs-xl); } .tenant-create-card[open] > summary::after { content:"−"; } .tenant-create-form { padding:0 1.15rem 1.15rem; border-top:1px solid var(--border-subtle); } .tenant-create-form .form-grid { padding-top:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); } .tenant-directory-toolbar { display:flex; align-items:center; gap:.8rem; margin:0 0 .9rem; } .tenant-directory-toolbar label { color:var(--muted); font-size:var(--fs-sm); font-weight:var(--fw-medium); } .tenant-directory-toolbar .input { width:min(100%,25rem); } .tenant-directory-grid { display:grid; gap:.85rem; } .tenant-directory-card { position:relative; display:grid; grid-template-columns:minmax(15rem,1.15fr) minmax(25rem,1fr); gap:1rem 1.5rem; padding:1.1rem 1.15rem; overflow:hidden; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .18s,border-color .18s,box-shadow .18s; } .tenant-directory-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); } .tenant-directory-card:hover { transform:translateY(-1px); border-color:var(--accent-border); box-shadow:var(--shadow); } .tenant-directory-card.is-disabled { opacity:.72; } .tenant-directory-card.is-disabled::before { background:var(--warn); } .tenant-directory-main { display:flex; align-items:center; gap:.9rem; min-width:0; } .tenant-avatar { width:2.75rem; height:2.75rem; flex:0 0 auto; display:grid; place-items:center; border-radius:.8rem; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-border); font-family:var(--font-display); font-size:var(--fs-md); font-weight:var(--fw-medium); } .tenant-directory-identity { min-width:0; display:flex; flex-direction:column; color:var(--muted); font-size:var(--fs-xs); } .tenant-directory-name-row { display:flex; align-items:center; gap:.55rem; min-width:0; } .tenant-directory-name-row h2 { margin:0; color:var(--text); font-family:var(--font-display); font-size:var(--fs-lg); font-weight:var(--fw-semibold); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tenant-directory-metrics { display:grid; grid-template-columns:.6fr .6fr 1.2fr 1fr; gap:.8rem; margin:0; align-items:center; } .tenant-directory-metrics div { min-width:0; } .tenant-directory-metrics dt { color:var(--faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase; } .tenant-directory-metrics dd { margin:.2rem 0 0; color:var(--text2); font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tenant-directory-notes { grid-column:1/-1; margin:0; padding:.55rem .7rem; color:var(--muted); font-size:var(--fs-xs); background:var(--panel2); border-radius:var(--r-sm); } .tenant-directory-actions { grid-column:1/-1; display:flex; align-items:center; gap:.55rem; padding-top:.75rem; border-top:1px solid var(--border-subtle); } .tenant-directory-actions .btn { font-size:var(--fs-sm); padding:.4rem .72rem; text-decoration:none; } /* ---- tenant settings workspace -------------------------------------- */ .settings-page-head { margin-bottom:1rem; } .settings-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem; } .settings-summary-card { position:relative; min-height:6.2rem; padding:.9rem 1rem; overflow:hidden; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } .settings-summary-card::after { content:""; position:absolute; right:-1.7rem; bottom:-1.7rem; width:4.5rem; height:4.5rem; border-radius:50%; background:var(--accent-soft); } .settings-summary-card > span { display:block; color:var(--faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.09em; text-transform:uppercase; } .settings-summary-card strong { position:relative; z-index:1; display:block; margin-top:.38rem; color:var(--text); font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:var(--fw-semibold); letter-spacing:-.025em; } .settings-summary-card small { position:relative; z-index:1; display:block; margin-top:.14rem; color:var(--muted); font-size:var(--fs-xs); } .settings-summary-card.is-sensitive { border-color:color-mix(in srgb,var(--warn) 55%,var(--border)); } .settings-summary-card.is-sensitive::after { background:var(--warn-soft); } /* Section nav is a TAB STRIP on top, not a left column: it used to eat up to 256px of width next to a sidebar that already took 296px. Each tab shows only its label — the description is not lost, .settings-form-head

repeats it for the active section right below. */ .settings-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:1.1rem; align-items:start; } .settings-section-nav { position:static; display:flex; flex-direction:row; gap:.25rem; overflow-x:auto; scrollbar-width:thin; padding:.3rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } .settings-section-nav a { flex:0 0 auto; display:flex; align-items:center; gap:.12rem; padding:.5rem .8rem; color:var(--muted); white-space:nowrap; text-decoration:none; border-radius:var(--r); border:1px solid transparent; transition:background .15s,color .15s,border-color .15s; font-size:var(--fs-sm); font-weight:var(--fw-normal);} .settings-section-nav a:hover { color:var(--text); background:var(--panel2); } .settings-section-nav a.is-active { color:var(--text); background:var(--accent-soft); border-color:var(--accent-border); font-weight:var(--fw-medium);} .settings-section-nav strong { font-size:inherit; font-weight:inherit;} .settings-section-nav span { display:none; } /* duplicated in .settings-form-head p */ .settings-form { overflow:hidden; } .settings-form-head { display:flex; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--panel2) 58%,var(--panel))); } .settings-form-head h2 { margin:0; color:var(--text); font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:var(--fw-semibold); letter-spacing:-.015em; } .settings-form-head p { margin:.25rem 0 0; color:var(--muted); font-size:var(--fs-md); } .settings-tenant-id { align-self:flex-start; padding:.3rem .52rem; color:var(--faint); background:var(--panel); border:1px solid var(--border); border-radius:999px; font-family:var(--font-mono); font-size:var(--fs-2xs); white-space:nowrap; } .settings-form-body { padding:1.25rem; } .settings-form-body > .field:last-child { margin-bottom:0; } .settings-form-footer { display:flex; justify-content:flex-end; padding:.85rem 1.25rem; border-top:1px solid var(--border); background:var(--panel2); } .settings-input-lg { max-width:38rem; } .settings-readonly-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:.35rem; } .settings-readonly-grid div { display:flex; flex-direction:column; gap:.2rem; padding:.7rem .8rem; background:var(--panel2); border:1px solid var(--border-subtle); border-radius:var(--r); } .settings-readonly-grid span { color:var(--faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase; } .settings-readonly-grid strong { color:var(--text2); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:var(--fw-medium); } .settings-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; } .settings-field-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .settings-inline-fields { display:grid; grid-template-columns:1fr auto 1fr; gap:.5rem; align-items:center; } .settings-inline-fields > span { color:var(--faint); } .settings-switch-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-bottom:1rem; } .settings-switch-row { display:flex; align-items:flex-start; gap:.7rem; padding:.78rem .85rem; cursor:pointer; background:var(--panel2); border:1px solid var(--border); border-radius:var(--r); } .settings-switch-row input { margin-top:.2rem; accent-color:var(--accent); } .settings-switch-row span { display:flex; flex-direction:column; gap:.15rem; } .settings-switch-row strong { color:var(--text2); font-size:var(--fs-sm); } .settings-switch-row small { color:var(--muted); font-size:var(--fs-xs); line-height:1.4; } .settings-day-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.4rem; } .settings-day-grid label { cursor:pointer; } .settings-day-grid input { position:absolute; opacity:0; pointer-events:none; } .settings-day-grid span { display:grid; place-items:center; min-height:2.25rem; color:var(--muted); background:var(--panel2); border:1px solid var(--border); border-radius:var(--r); font-size:var(--fs-xs); font-weight:var(--fw-medium); transition:.15s; } .settings-day-grid input:checked + span { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-border); } .settings-section-help { margin:0 0 .9rem; color:var(--muted); font-size:var(--fs-sm); } .settings-portal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } .settings-portal-option { display:flex; align-items:center; gap:.65rem; padding:.72rem .8rem; cursor:pointer; background:var(--panel2); border:1px solid var(--border); border-radius:var(--r); } .settings-portal-option:has(input:checked) { background:var(--accent-soft); border-color:var(--accent-border); } .settings-portal-option input { accent-color:var(--accent); } .settings-portal-option span { display:flex; flex-direction:column; } .settings-portal-option strong { color:var(--text2); font-size:var(--fs-sm); } .settings-portal-option small { color:var(--faint); font-family:var(--font-mono); font-size:var(--fs-2xs); } .settings-compact-field { max-width:18rem; } .settings-warning { margin-bottom:1rem; padding:.82rem .9rem; color:var(--text2); background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 48%,transparent); border-radius:var(--r); } .settings-warning strong { display:block; color:var(--warn); font-size:var(--fs-sm); } .settings-warning p { margin:.28rem 0 0; font-size:var(--fs-xs); line-height:1.5; } .settings-subsection { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-subtle); } .settings-subsection h3 { margin:0 0 .75rem; color:var(--text2); font-size:var(--fs-xs); } .settings-rules-table { max-width:36rem; margin:.6rem 0 .85rem; } .settings-rules-head,.settings-rule-row { display:grid; grid-template-columns:minmax(0,1fr) 9rem auto; gap:.55rem; } .settings-rules-head { padding:0 .15rem .35rem; color:var(--faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.08em; } .settings-rule-row { margin-bottom:.4rem; } .settings-rule-remove { display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-width:5.5rem; padding:.42rem .55rem; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer; font:var(--fw-medium) var(--fs-2xs)/1 var(--font-body); } .settings-rule-remove > span:first-child { color:var(--danger); font-size:var(--fs-lg); line-height:.7; } .settings-rule-remove:hover { color:var(--danger); background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 35%,transparent); } .settings-rule-remove:focus-visible,.settings-rule-add:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .settings-rule-add { margin:-.15rem 0 .9rem; } .settings-advanced { margin-top:1rem; border:1px solid var(--border); border-radius:var(--r); background:var(--panel2); } .settings-advanced > summary { display:flex; flex-direction:column; gap:.15rem; padding:.75rem .85rem; cursor:pointer; list-style:none; } .settings-advanced > summary::-webkit-details-marker { display:none; } .settings-advanced > summary strong { color:var(--text2); font-size:var(--fs-sm); } .settings-advanced > summary span { color:var(--muted); font-size:var(--fs-xs); } .settings-advanced > .settings-field-grid { padding:.2rem .85rem .85rem; } .settings-advanced > .field-hint { padding:0 .85rem .35rem; } /* Read-only reference list: the mapping destinations a NEW tenant is seeded with. Editing them happens in the field-mapping editor (single owner), so these render as plain rows. */ .settings-hq-seeds { list-style:none; margin:0; padding:0 .85rem .85rem; display:grid; gap:.35rem; } .settings-hq-seeds li { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem .6rem; padding:.35rem .5rem; border-radius:var(--r-sm); background:var(--panel); } .settings-hq-seeds span { color:var(--text2); font-size:var(--fs-xs); min-width:13rem; } .settings-hq-seeds code { color:var(--text); font-size:var(--fs-xs); } .settings-hq-seeds small { color:var(--muted); font-size:var(--fs-2xs); } /* ---- HQ fine field mapping editor ---------------------------------- */ .hqfm-editor { margin-top:1.2rem; overflow:hidden; background:color-mix(in srgb,var(--panel2) 42%,var(--panel)); border:1px solid var(--accent-border); border-radius:var(--r-lg); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent),var(--shadow-sm); } .hqfm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.1rem 1.15rem; background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel) 68%); border-bottom:1px solid var(--accent-border); } .hqfm-head-copy { min-width:0; } .hqfm-kicker { display:block; margin-bottom:.25rem; color:var(--accent); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase; } .hqfm-head h3 { margin:0; color:var(--text); font-family:var(--font-display); font-size:var(--fs-xl); font-weight:var(--fw-semibold); letter-spacing:-.01em; text-transform:none;} .hqfm-head p { max-width:48rem; margin:.3rem 0 0; color:var(--muted); font-size:var(--fs-sm); line-height:1.6; } .hqfm-contract-badge { flex:none; min-width:6.8rem; padding:.55rem .65rem; text-align:right; background:var(--panel); border:1px solid var(--accent-border); border-radius:var(--r); } .hqfm-contract-badge span { display:block; color:var(--faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.05em; text-transform:uppercase; } .hqfm-contract-badge strong { display:block; margin-top:.14rem; color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-lg); font-weight:var(--fw-medium);} /* Reads under the two numbers, so it must NOT inherit the uppercase kicker treatment of the label span above it — the legend is prose that maps 6 → 5, not a heading. */ .hqfm-contract-badge .hqfm-contract-legend { margin-top:.1rem; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-normal); letter-spacing:0; text-transform:none; white-space:nowrap; } .hqfm-alert { margin:.8rem 1rem 0; padding:.65rem .75rem; color:var(--err); background:var(--err-soft); border:1px solid var(--err-border); border-radius:var(--r); font-size:var(--fs-xs); line-height:1.45; } .hqfm-variable-bar { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(17rem,1.25fr) auto; gap:.65rem; align-items:end; margin:1rem; padding:.75rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); } .hqfm-variable-bar > div { display:flex; flex-direction:column; gap:.12rem; } .hqfm-variable-bar strong { color:var(--text2); font-size:var(--fs-sm); font-weight:var(--fw-medium);} .hqfm-variable-bar span { color:var(--muted); font-size:var(--fs-xs); line-height:1.45; } .hqfm-stage { display:grid; grid-template-columns:2.75rem minmax(0,1fr); margin:0 1rem; padding:1rem 0; border-top:1px solid var(--border-subtle); } .hqfm-stage-index { position:relative; padding-top:.08rem; color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:var(--fw-medium); } .hqfm-stage-index::after { content:""; position:absolute; top:1.5rem; bottom:-1rem; left:.55rem; width:1px; background:var(--accent-border); } .hqfm-stage:last-of-type .hqfm-stage-index::after { display:none; } .hqfm-stage-body { min-width:0; } .hqfm-stage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; margin-bottom:.8rem; } .hqfm-stage-head h4 { margin:0; color:var(--text); font-size:var(--fs-lg); font-weight:var(--fw-semibold);} .hqfm-stage-head p { margin:.2rem 0 0; color:var(--muted); font-size:var(--fs-sm); line-height:1.55; } .hqfm-lock { flex:none; padding:.25rem .45rem; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:var(--r-pill); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:0; } .hqfm-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } .hqfm-create-card { min-width:0; padding:.7rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); } .hqfm-card-title { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; } .hqfm-card-title > span { color:var(--text2); font-size:var(--fs-md); font-weight:var(--fw-medium); } .hqfm-card-title code { padding:.15rem .32rem; color:var(--faint); background:var(--panel2); border-radius:var(--r-sm); font-size:var(--fs-2xs); } .hqfm-create-card label,.hqfm-sheet-row label,.hqfm-preview-controls label { display:flex; min-width:0; flex-direction:column; gap:.25rem; } .hqfm-create-card label > span,.hqfm-sheet-row label > span,.hqfm-preview-controls label > span { color:var(--faint); font-size:var(--fs-xs); font-weight:var(--fw-medium); letter-spacing:0; text-transform:none; } .hqfm-card-split { display:grid; grid-template-columns:minmax(0,1fr) 8.5rem; gap:.5rem; margin-top:.45rem; } .hqfm-sheet-list { display:flex; flex-direction:column; gap:.5rem; } .hqfm-sheet-row { position:relative; padding:.65rem; background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent-border); border-radius:var(--r); } .hqfm-sheet-row.is-files { background:color-mix(in srgb,var(--accent-soft) 38%,var(--panel)); border-color:var(--accent-border); } .hqfm-sheet-main { display:grid; grid-template-columns:minmax(8.5rem,.8fr) minmax(9rem,1fr) minmax(13rem,1.5fr) minmax(8rem,.85fr) 7.5rem auto 2rem; gap:.5rem; align-items:end; } .hqfm-destination .input { color:var(--accent); font-weight:var(--fw-medium); } .hqfm-template-field { min-width:0; } .hqfm-required { flex-direction:row !important; align-items:center; gap:.35rem !important; min-height:2.1rem; padding:.45rem .2rem; cursor:pointer; } .hqfm-required input { accent-color:var(--accent); } .hqfm-required > span { color:var(--text2) !important; font-size:var(--fs-xs)!important; letter-spacing:0 !important; text-transform:none !important; } .hqfm-remove { display:grid; place-items:center; width:2rem; height:2rem; padding:0; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; font:var(--fw-medium) var(--fs-lg)/1 var(--font-body); } .hqfm-remove:hover:not(:disabled) { color:var(--err); background:var(--err-soft); border-color:var(--err-border); } .hqfm-remove:disabled { opacity:.35; cursor:not-allowed; } .hqfm-files-copy { grid-column:3/6; display:flex; min-height:2.1rem; flex-direction:column; justify-content:center; gap:.12rem; padding:.35rem .5rem; color:var(--muted); background:var(--accent-soft); border:1px dashed var(--accent-border); border-radius:var(--r-sm); } .hqfm-files-copy strong { color:var(--accent); font-size:var(--fs-sm); font-weight:var(--fw-medium);} .hqfm-files-copy span { font-size:var(--fs-xs); line-height:1.45; } .hqfm-sheet-row .is-invalid { border-color:var(--err); box-shadow:0 0 0 2px var(--err-soft); } .hqfm-preview-stage { padding-bottom:1.15rem; } .hqfm-preview-controls { display:grid; grid-template-columns:minmax(10rem,1fr) minmax(12rem,1.25fr) auto; gap:.6rem; align-items:end; padding:.7rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); } .hqfm-error { margin:.55rem 0 0; color:var(--err); font-size:var(--fs-xs); line-height:1.4; } .hqfm-preview-dialog { width:min(56rem,calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; color:var(--text); background:var(--panel); border:1px solid var(--accent-border); border-radius:var(--r-lg); box-shadow:0 1.5rem 5rem rgba(0,0,0,.5); } .hqfm-preview-dialog::backdrop { background:rgba(5,10,18,.72); backdrop-filter:blur(4px); } .hqfm-preview-dialog > header { position:sticky; top:0; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.9rem 1rem; background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel)); border-bottom:1px solid var(--accent-border); } .hqfm-preview-dialog > header span { display:block; color:var(--accent); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.1em; text-transform:uppercase; } .hqfm-preview-dialog > header h3 { margin:.18rem 0 0; font-family:var(--font-display); font-size:var(--fs-lg); } .hqfm-preview-dialog > header button { display:grid; place-items:center; width:2rem; height:2rem; padding:0; color:var(--muted); background:var(--panel2); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-lg); } .hqfm-preview-output { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; padding:1rem; overflow:auto; } .hqfm-preview-output h4 { margin:0 0 .55rem; color:var(--text); font-size:var(--fs-sm); } .hqfm-preview-table { overflow:hidden; border:1px solid var(--border); border-radius:var(--r); } .hqfm-preview-row { display:grid; grid-template-columns:minmax(7rem,.65fr) minmax(0,1.35fr) auto; gap:.55rem; align-items:center; padding:.48rem .55rem; border-bottom:1px solid var(--border-subtle); } .hqfm-preview-row:last-child { border-bottom:0; } .hqfm-preview-row strong { color:var(--text2); font-family:var(--font-mono); font-size:var(--fs-2xs); } .hqfm-preview-row code { min-width:0; overflow:hidden; color:var(--text); font-size:var(--fs-2xs); text-overflow:ellipsis; white-space:nowrap; } .hqfm-preview-row span { padding:.14rem .3rem; color:var(--accent); background:var(--accent-soft); border-radius:var(--r-pill); font-size:var(--fs-2xs); font-weight:var(--fw-medium); } .hqfm-preview-row.is-error { background:var(--err-soft); } .hqfm-preview-row.is-error code { color:var(--err); } /* Was max-width:1500px, calibrated when the section nav ate up to 256px on the left. With the nav moved to a tab strip the form is ~250px wider, so at 1500px the 7-column sheet row fits with room to spare (it needs ~830px and the form is ~1360px) — the old value stacked it on screens that had space. */ @media (max-width:1200px) { .hqfm-variable-bar,.hqfm-preview-controls { grid-template-columns:1fr; } .hqfm-card-split,.hqfm-sheet-main { grid-template-columns:1fr; } .hqfm-template-field,.hqfm-files-copy { grid-column:1/-1; } .hqfm-remove { align-self:end; } } @media (max-width:1120px) { .settings-field-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .hqfm-sheet-main { grid-template-columns:repeat(2,minmax(0,1fr)); } .hqfm-files-copy { grid-column:auto; } .hqfm-remove { align-self:end; } } @media (max-width:1120px) { .tenant-directory-card { grid-template-columns:1fr; } .tenant-directory-metrics { grid-template-columns:repeat(4,1fr); } .tenant-create-form .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:920px) { .admin-app { display:block; } .app-sidebar { position:fixed; left:0; top:0; width:min(18rem,84vw); transform:translateX(-105%); transition:transform .2s ease; box-shadow:1rem 0 3rem rgba(0,0,0,.28); } .sidebar-open .app-sidebar { transform:translateX(0); } .sidebar-scrim { position:fixed; inset:0; z-index:25; width:100%; height:100%; padding:0; border:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); opacity:0; pointer-events:none; display:block; transition:opacity .2s; } .sidebar-open .sidebar-scrim { opacity:1; pointer-events:auto; } .app-menu-toggle { display:block; } /* The rail is a desktop affordance: here the sidebar is an off-canvas drawer driven by .app-menu-toggle, so showing the collapse button too would put two menu buttons side by side that do different things. */ .sidebar-toggle { display:none; } .app-content.wrap { padding-inline:1rem; } .system-tool-grid { grid-template-columns:1fr; } } @media (max-width:620px) { .app-topbar { padding:.65rem .8rem; align-items:flex-start; } .app-topbar-actions { gap:5px; } .app-context-kicker { max-width:10rem; } .app-run-button { width:34px; height:34px; overflow:hidden; padding:0; font-size:0; } .app-run-button::first-letter { font-size:13px; } .app-logout-button { display:none; } .system-tool-card { grid-template-columns:2.35rem 1fr; } .system-tool-action { grid-column:2; } .tenant-directory-card { padding:.9rem; } .tenant-directory-metrics { grid-template-columns:repeat(2,1fr); } .tenant-directory-actions { align-items:stretch; flex-direction:column; } .tenant-directory-actions .btn, .tenant-directory-actions form, .tenant-directory-actions form .btn { width:100%; text-align:center; } .tenant-directory-actions .ml-auto { margin-left:0; } .tenant-create-form .form-grid { grid-template-columns:1fr; } .settings-summary-grid { grid-template-columns:1fr; } .settings-field-grid,.settings-field-grid-4,.settings-switch-grid,.settings-readonly-grid,.settings-portal-grid { grid-template-columns:1fr; } .settings-day-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .settings-form-head { flex-direction:column; } .settings-rules-head,.settings-rule-row { grid-template-columns:minmax(0,1fr) 6.5rem auto; gap:.4rem; } .settings-rule-remove { min-width:2.5rem; padding-inline:.4rem; } .settings-rule-remove > span:last-child { display:none; } .hqfm-head,.hqfm-stage-head { flex-direction:column; } .hqfm-contract-badge { text-align:left; } .hqfm-variable-bar,.hqfm-preview-controls,.hqfm-preview-output { grid-template-columns:1fr; } .hqfm-stage { grid-template-columns:2rem minmax(0,1fr); margin-inline:.7rem; } .hqfm-create-grid,.hqfm-card-split,.hqfm-sheet-main { grid-template-columns:1fr; } .hqfm-files-copy { grid-column:auto; } } /* ========================================================================= * UNIFIED DATA TABLE (.ff-*) — one pattern for every table in the admin. * Emitted by admin/public/table_component.php, enhanced by js/table.js and * js/drawer.js. Lives here because BOTH shells load components.css (the client * panel never loads style.css). Consumes canonical tokens only (--panel, * --border, --accent, …), which tokens.css defines for :root, [data-theme=light] * and .cp-app — so the same rules render correctly in all three skins. * Supersedes .cp-table / .table / .cp-recent / .umgmt-table as pages migrate. * ====================================================================== */ /* ---- panel + head ---- */ /* overflow stays VISIBLE: the column picker is absolutely positioned inside this panel, and clipping it cut the popover off — badly on a short table (filter down to one row and half the columns became unreachable). The rounded bottom corners are handled by the last child instead. */ .ff-panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:visible; margin:1.75rem 0 1.5rem; } /* First panel on a page sits right under the heading — no extra gap there. */ .ff-panel:first-child { margin-top:0; } .ff-panel > :last-child { border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg); } .ff-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1rem 1.15rem .9rem; } .ff-panel-head h2 { margin:0; font-size:var(--fs-xl); font-weight:var(--fw-semibold); letter-spacing:-.01em; color:var(--text); } .ff-panel-head p { margin:.2rem 0 0; color:var(--muted); font-size:var(--fs-sm); } .ff-count { flex:none; display:flex; align-items:baseline; gap:.4rem; padding:.4rem .7rem; border:1px solid var(--border); border-radius:var(--r); background:var(--panel2); } .ff-count strong { font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--text); } .ff-count span { color:var(--muted); font-size:var(--fs-xs); } /* ---- filter console ---- */ .ff-filters { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:0 1.15rem .9rem; } .ff-search-field { flex:1; min-width:220px; max-width:420px; } .ff-search-field .ff-search { width:100%; max-width:none; } .ff-field-label { display:block; margin:0 0 .3rem; color:var(--text2); font-size:var(--fs-xs); font-weight:var(--fw-medium); letter-spacing:.06em; text-transform:uppercase; } .ff-search { flex:1; min-width:220px; max-width:420px; display:flex; align-items:center; gap:.5rem; height:2.4rem; padding:0 .75rem; border:1px solid var(--border); border-radius:var(--r); background:var(--bg); transition:border-color .15s, box-shadow .15s; } .ff-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .ff-search > span { color:var(--accent); font-size:var(--fs-lg); line-height:1; } .ff-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:var(--fs-md); } .ff-search input::placeholder { color:var(--faint); } .ff-seg { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--border); border-radius:var(--r); background:var(--panel2); } .ff-seg button { border:0; border-radius:calc(var(--r) - 3px); background:transparent; color:var(--text2); padding:.4rem .7rem; font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium); cursor:pointer; } .ff-seg button:hover { color:var(--text); background:var(--accent-soft); } .ff-seg button.on { background:var(--accent); color:var(--accent-fg); font-weight:var(--fw-medium); } .ff-field { display:flex; flex-direction:column; gap:.2rem; } .ff-field > span { color:var(--muted); font-size:var(--fs-xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.07em; } .ff-sel { height:2.4rem; padding:0 2rem 0 .7rem; border:1px solid var(--border); border-radius:var(--r); background:var(--panel); color:var(--text); font:inherit; font-size:var(--fs-sm); } .ff-sel:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .ff-tools { display:flex; align-items:center; gap:.4rem; margin-left:auto; } .ff-tools button, .ff-tools .btn { height:2.4rem; padding:0 .8rem; border:1px solid var(--border); border-radius:var(--r); background:var(--panel); color:var(--text2); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; } .ff-tools button:hover, .ff-tools .btn:hover { border-color:var(--accent); color:var(--accent); } .ff-tools form { display:flex; align-items:center; gap:.4rem; margin:0; } .ff-colbtn { position:relative; } .ff-exp-label { color:var(--muted); font-size:var(--fs-xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.06em; padding-left:.5rem; border-left:1px solid var(--border); margin-left:.2rem; } /* discreet marker when the cross-device prefs save failed (js/table.js) */ .ff-prefs-warn { color:var(--warn); font-size:var(--fs-md); line-height:1; cursor:help; align-self:center; } /* column picker popover (js/table.js injects class "cp-picker ff-picker"). table.js wraps the trigger button in .ff-picker-anchor and hangs the popover off THAT, never inside the