/* =========================================================================== IntellectAds admin — design system --------------------------------------------------------------------------- Direction: PRECISION INSTRUMENT. This panel is read all day by operators scanning conversions, payouts and fraud counts. So: high density, tabular numerals, one sharp accent, and no decoration that competes with data. Built on the existing brand navy (#001E40) and orange (#e36d05) so the logo sits naturally rather than fighting a new palette. Layer order: tokens -> reset -> layout -> components -> legacy bridge The legacy bridge restyles the old .adminlist/.adminheading/.adminform class names, so ~100 unported pages inherit the new look untouched. =========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { /* brand */ --navy-900:#00152d; --navy-800:#001E40; --navy-700:#0a2c55; --navy-600:#14406f; --amber-600:#c25a04; --amber-500:#e36d05; --amber-400:#f5893a; /* neutrals (cool, so the navy reads as deliberate) */ --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f5f7fa; --n-100:#eceff4; --n-200:#dde2ea; --n-300:#c3cbd7; --n-400:#95a1b3; --n-500:#6b7789; --n-600:#4c5666; --n-700:#333c49; --n-800:#212831; --n-900:#141920; /* semantic */ --ok-bg:#e7f6ec; --ok-fg:#1a7f3c; --ok-bd:#b7e3c6; --warn-bg:#fff6e0; --warn-fg:#9a6700; --warn-bd:#f0dca8; --bad-bg:#fdecec; --bad-fg:#b3261e; --bad-bd:#f3c6c3; --info-bg:#e8f1fd; --info-fg:#14406f; --info-bd:#c2d8f2; /* surfaces */ --bg:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-25); --border:var(--n-200); --border-strong:var(--n-300); --text:var(--n-800); --text-dim:var(--n-500); --text-mute:var(--n-400); --accent:var(--amber-500); --accent-ink:#ffffff; --link:var(--navy-600); /* type — tabular figures are non-negotiable for money/count columns */ --font: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:15px; --fs-xl:19px; --fs-2xl:24px; /* space — 4px base */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --r-sm:6px; --r-md:9px; --r-lg:14px; --r-xl:18px; --r-pill:999px; --sh-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05); --sh-2:0 4px 12px rgba(16,24,40,.10); --sh-3:0 12px 32px rgba(16,24,40,.16); --ring:0 0 0 3px rgba(227,109,5,.28); --row-h:44px; /* compact default; density toggle changes it */ --topbar-h:60px; --side-w:236px; } /* Dark is opt-in via the topbar toggle (data-theme on ). Operators on night shift asked for it in every ops tool I've seen; it costs one block. */ :root[data-theme="dark"] { --bg:#0d1117; --surface:#141a22; --surface-2:#1a212b; --border:#252d38; --border-strong:#333d4b; --text:#e6edf3; --text-dim:#9aa7b6; --text-mute:#6e7d8f; --link:#7db3ff; --ok-bg:#0f2a1a; --ok-fg:#7ee2a0; --ok-bd:#1e4630; --warn-bg:#2b220b; --warn-fg:#f0c674; --warn-bd:#4a3a12; --bad-bg:#2c1416; --bad-fg:#ff9a92; --bad-bd:#4d2225; --info-bg:#0f2033; --info-fg:#9ec5f5; --info-bd:#1d3a5c; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 12px rgba(0,0,0,.5); --sh-3:0 12px 32px rgba(0,0,0,.6); } /* ----------------------------------------------------------------- reset -- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-md); line-height:1.45; -webkit-font-smoothing:antialiased; } a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%} /* Numbers must line up. Applied broadly, then reinforced on numeric cells. */ table,input,select,textarea,.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} /* ----------------------------------------------------------------- icons -- */ /* Vendored Lucide sprite (assets/icons.svg, inlined by layout.html). The sprite groups carry geometry only; stroke/fill are inherited from here, so a single class themes every icon and they follow currentColor. */ .ic{ display:inline-block; vertical-align:-.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ic--thin{stroke-width:1.5} /* ---------------------------------------------------------------- layout -- */ .topbar{ position:sticky; top:0; z-index:60; height:var(--topbar-h); display:flex; align-items:center; gap:var(--s-4); padding:0 var(--s-4); color:#fff; background:linear-gradient(180deg,var(--navy-800),var(--navy-900)); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:var(--sh-1); } .topbar__logo img{height:26px; display:block} .topbar__spacer{flex:1} .topbar__nav{display:flex; gap:var(--s-1); align-items:center} .topbar__link{ color:#c9d6e6; padding:6px 10px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:500; white-space:nowrap; } .topbar__link:hover{background:rgba(255,255,255,.10); color:#fff; text-decoration:none} .topbar__link--accent{background:var(--amber-500); color:#fff} .topbar__link--accent:hover{background:var(--amber-400)} /* width:100% is REQUIRED here: this is a flex child in a column container, and `margin:0 auto` cancels the default stretch, collapsing it to min-content. */ .page{width:100%; max-width:1680px; margin:0 auto; padding:var(--s-5) var(--s-4) var(--s-8)} .crumb{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:var(--s-3); text-transform:uppercase; letter-spacing:.06em; } .crumb a{color:var(--text-dim)} .page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-4); flex-wrap:wrap; } .page-title{ margin:0; font-size:var(--fs-2xl); font-weight:650; letter-spacing:-.02em; color:var(--text); display:flex; align-items:center; gap:var(--s-3); } /* The one deliberate flourish: a short accent rule under the page title. */ .page-title::after{ content:""; flex:0 0 28px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--amber-500),transparent); } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-1); } .card__head{ padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; } .card__body{padding:var(--s-4)} .card__foot{padding:var(--s-3) var(--s-4); border-top:1px solid var(--border)} .card__t{font-weight:650; font-size:var(--fs-sm); letter-spacing:.01em} /* kv is the read-only detail sheet used by the portal "details" screens — label/value pairs that are prose, not tabular data, so they deliberately do NOT get the .data table treatment (no sorting, no column picker). */ .kv{width:100%; border-collapse:collapse; font-size:var(--fs-sm)} .kv th{ width:210px; text-align:left; vertical-align:top; font-weight:600; color:var(--text-dim); padding:8px var(--s-4) 8px 0; white-space:nowrap; } .kv td{padding:8px 0; vertical-align:top; overflow-wrap:anywhere; word-break:break-word} .kv tr + tr th,.kv tr + tr td{border-top:1px solid var(--border)} /* rowform is an edit-in-place form living inside a table cell. */ .rowform{display:flex; gap:var(--s-2); align-items:center; margin:0} .rowform input[type=text]{flex:1; min-width:220px} /* macros is the collapsible token reference on the piggyback-pixel screen. */ .macros{ margin-top:var(--s-3); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); padding:var(--s-3) var(--s-4); } .macros > summary{cursor:pointer; font-weight:650; font-size:var(--fs-sm)} .macros__list{ list-style:none; padding:var(--s-3) 0 0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:6px var(--s-4); font-size:var(--fs-sm); color:var(--text-dim); } .macros__list b{color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace} /* jump-to-page control that sits inside .pager */ .pager__jump{display:flex; align-items:center; gap:6px; margin-left:auto} .pager__jump label{color:var(--text-dim)} .pager__jump input[type=number]{width:70px} .pager__count{color:var(--text-dim)} /* statline is the summary strip some reports print under their filter bar. */ .statline{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--border); font-size:var(--fs-sm); color:var(--text-dim); } .statline b{color:var(--text); font-weight:650} /* a short explanation printed alongside the controls in a .filterbar */ .filterbar__note{color:var(--text-dim); font-size:var(--fs-xs)} /* ------------------------------------------------------------ components -- */ .btn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:7px 13px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-sm); font-weight:550; line-height:1.2; transition:background .12s ease, border-color .12s ease, transform .06s ease; } .btn:hover{background:var(--n-100); text-decoration:none} :root[data-theme="dark"] .btn:hover{background:var(--surface-2)} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:none; box-shadow:var(--ring)} .btn--primary{background:var(--amber-500); border-color:var(--amber-600); color:var(--accent-ink)} .btn--primary:hover{background:var(--amber-400)} .btn--ghost{background:transparent; border-color:transparent; color:var(--text-dim)} .btn--ghost:hover{background:var(--n-100); color:var(--text)} :root[data-theme="dark"] .btn--ghost:hover{background:var(--surface-2)} .btn--sm{padding:4px 9px; font-size:var(--fs-xs)} .btn--danger{color:var(--bad-fg); border-color:var(--bad-bd); background:var(--bad-bg)} .input,.select,textarea, input[type=text],input[type=search],input[type=date],input[type=number], input[type=password],input[type=email],select,textarea{ padding:7px 10px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-sm); max-width:100%; transition:border-color .12s ease, box-shadow .12s ease; } input:focus,select:focus,textarea:focus{outline:none; border-color:var(--amber-500); box-shadow:var(--ring)} input[type=search]{-webkit-appearance:none} label{font-size:var(--fs-sm); color:var(--text-dim)} .badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:var(--fs-xs); font-weight:600; border:1px solid var(--border); background:var(--n-100); color:var(--text-dim); white-space:nowrap; } .badge--ok{background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd)} .badge--warn{background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-bd)} .badge--bad{background:var(--bad-bg); color:var(--bad-fg); border-color:var(--bad-bd)} .badge--info{background:var(--info-bg); color:var(--info-fg); border-color:var(--info-bd)} .note{ padding:var(--s-3) var(--s-4); border-radius:var(--r-md); border:1px solid var(--info-bd); background:var(--info-bg); color:var(--info-fg); font-size:var(--fs-sm); } /* Copy field — a readonly value the operator is meant to take away, with the copy button attached. Used for publisher tracking URLs and pixel snippets, where selecting a long URL by hand is the failure mode. */ .copyfield{display:flex; gap:6px; align-items:center; max-width:100%} .copyfield input{flex:1 1 auto; min-width:0; font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-size:12px} .copyfield .btn{flex:0 0 auto} /* On/off switch used in list rows. It is a link, so it works with keyboard navigation and without JavaScript; the confirm sits on top as an onclick. The knob is a child of the track and positioned against it — as a sibling nudged by a negative margin it had no positioning context and floated off to the left of the pill. */ .wtog{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; line-height:1; cursor:pointer} .wtog__track{position:relative; flex:0 0 auto; width:34px; height:19px; border-radius:999px; background:var(--muted,#94a3b8); opacity:.55; transition:background .18s ease, opacity .18s ease} .wtog__knob{position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .18s ease} .wtog__txt{font-size:12px; font-weight:600; color:var(--muted)} .wtog.is-on .wtog__track{background:#16a34a; opacity:1} .wtog.is-on .wtog__knob{transform:translateX(15px)} .wtog.is-on .wtog__txt{color:#16a34a} .wtog:hover .wtog__track{opacity:1} .wtog:focus-visible{outline:2px solid var(--accent,#e36d05); outline-offset:3px; border-radius:999px} /* Action row on a webhook's child screens, so none of them is a dead end. */ .whbar{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px} .whbar .btn.is-active{background:var(--accent,#e36d05); color:#fff; border-color:transparent} /* Breadcrumb links read as navigation rather than body text. */ .crumbs a,.pathway a{color:inherit; text-decoration:none} .crumbs a:hover,.pathway a:hover{text-decoration:underline} /* Command palette (Ctrl+K / Cmd+K). */ .cmdk{position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-start; justify-content:center} .cmdk[hidden]{display:none!important} .cmdk__backdrop{position:absolute; inset:0; background:rgba(0,15,35,.45); backdrop-filter:blur(2px)} .cmdk__panel{position:relative; width:min(640px,92vw); margin-top:12vh; background:var(--surface,#fff); border:1px solid var(--bd); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.28); overflow:hidden; display:flex; flex-direction:column} .cmdk__input{border:0; border-bottom:1px solid var(--bd); padding:15px 18px; font-size:15px; background:transparent; color:inherit; outline:none; width:100%; box-sizing:border-box} .cmdk__list{max-height:52vh; overflow-y:auto; padding:6px} .cmdk__row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:8px; text-decoration:none; color:inherit} .cmdk__row.is-sel{background:var(--accent,#e36d05); color:#fff} .cmdk__row.is-sel .cmdk__meta{color:rgba(255,255,255,.8)} .cmdk__label{font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .cmdk__meta{font-size:11px; color:var(--muted); flex:0 0 auto} .cmdk__empty{padding:22px; text-align:center; color:var(--muted); font-size:13px} .cmdk__foot{display:flex; gap:14px; padding:8px 14px; border-top:1px solid var(--bd); font-size:11px; color:var(--muted)} .cmdk__foot kbd{display:inline-block; min-width:16px; padding:1px 4px; margin-right:3px; border:1px solid var(--bd); border-bottom-width:2px; border-radius:4px; font:inherit; font-size:10px; text-align:center} /* Creative-type chooser: the first step of Add Creative. Cards rather than a bare radio list, because the advertiser is picking between seven things that lead to different forms. */ .ckinds{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px} .ckind{display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--bd); border-radius:10px; cursor:pointer; background:var(--surface)} .ckind:hover{border-color:var(--accent,#e36d05)} .ckind:has(input:checked){border-color:var(--accent,#e36d05); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent,#e36d05) 22%, transparent)} .ckind input{margin-top:2px; flex:0 0 auto} .ckind__body{display:flex; flex-direction:column; gap:3px; min-width:0} .ckind__name{font-weight:600} .ckind__blurb{color:var(--muted); font-size:12px; line-height:1.35} /* Tracking-URL builder. Its table intentionally avoids the shared .data class, whose sort/filter/column behaviour would reorder a reference list. */ .ub{margin-top:6px} .ub__bar{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:6px} .ub__hint{color:var(--muted); font-size:12px} .ub__t{width:100%; border-collapse:collapse; border:1px solid var(--bd); border-radius:8px} .ub__t th,.ub__t td{padding:5px 8px; font-size:12px; text-align:left; border-bottom:1px solid var(--bd)} .ub__t thead th{color:var(--muted); font-weight:600; background:var(--surface-2,transparent)} .ub__t tbody tr:last-child td{border-bottom:0} .ub__row{cursor:pointer} .ub__row:hover{background:var(--surface-2,rgba(0,0,0,.03))} .ub__row.is-on{background:var(--ok-bg,rgba(0,128,0,.06))} .ub__pick{width:32px} .ub__val{width:100%; box-sizing:border-box; padding:3px 6px; font-size:12px; border:1px solid var(--bd); border-radius:6px; background:var(--surface); color:inherit} .ub__t code{font-size:12px} .note--ok{border-color:var(--ok-bd); background:var(--ok-bg); color:var(--ok-fg)} .note--warn{border-color:var(--warn-bd); background:var(--warn-bg); color:var(--warn-fg)} .note--bad{border-color:var(--bad-bd); background:var(--bad-bg); color:var(--bad-fg)} /* ------------------------------------------------------------- toolbar --- */ .toolbar{ display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-4); flex-wrap:wrap; border-bottom:1px solid var(--border); background:var(--surface-2); border-radius:var(--r-lg) var(--r-lg) 0 0; } .toolbar__grow{flex:1 1 auto} .toolbar form{display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; margin:0} .toolbar label{display:inline-flex; align-items:center; gap:6px; white-space:nowrap} /* --------------------------------------------------------------- table --- */ .tablewrap{overflow:auto; max-width:100%; border-radius:0 0 var(--r-lg) var(--r-lg)} table.data{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm)} table.data thead th{ position:sticky; top:0; z-index:5; background:var(--surface-2); color:var(--text-dim); text-align:left; font-weight:650; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; padding:9px var(--s-3); border-bottom:1px solid var(--border-strong); } table.data tbody td{ padding:0 var(--s-3); height:var(--row-h); border-bottom:1px solid var(--border); vertical-align:middle; } table.data tbody tr:hover td{background:var(--surface-2)} table.data tbody tr:last-child td{border-bottom:0} /* Totals rows the reports append read as a summary, not another data row. */ table.data tbody tr.is-total td{ font-weight:700; background:var(--n-100); border-top:2px solid var(--border-strong); border-bottom:0; } :root[data-theme="dark"] table.data tbody tr.is-total td{background:var(--surface-2)} table.data td.num,table.data th.num{text-align:right; font-variant-numeric:tabular-nums} table.data td .mono{font-family:var(--mono); font-size:var(--fs-xs)} /* Density toggle — operators scanning 100 rows want tighter than form-filling. --row-h alone only moves single-line rows: on a table with a wrapping cell (transaction ids, long descriptions) the height is content-driven and the setting looks broken. So each step also sets the vertical padding and line height, which multi-line rows do respond to. */ :root{--row-pad-y:6px; --row-lh:1.45} :root[data-density="comfortable"]{--row-h:56px; --row-pad-y:12px; --row-lh:1.6} :root[data-density="compact"]{--row-h:44px; --row-pad-y:6px; --row-lh:1.45} :root[data-density="tight"]{--row-h:34px; --row-pad-y:2px; --row-lh:1.25} table.data tbody td{padding-top:var(--row-pad-y); padding-bottom:var(--row-pad-y); line-height:var(--row-lh)} :root[data-density="tight"] table.data tbody td{padding-left:var(--s-2); padding-right:var(--s-2)} :root[data-density="tight"] table.data{font-size:var(--fs-xs)} /* sortable headers */ th.sortable{cursor:pointer; user-select:none} th.sortable:hover{color:var(--text)} th.sortable::after{content:"↕"; opacity:.25; margin-left:6px; font-size:10px} th.sortable.asc::after{content:"↑"; opacity:.9; color:var(--amber-500)} th.sortable.desc::after{content:"↓"; opacity:.9; color:var(--amber-500)} .empty{padding:var(--s-8) var(--s-4); text-align:center; color:var(--text-mute)} .empty__icon{opacity:.35; margin-bottom:var(--s-3)} /* ------------------------------------------------------- column picker --- */ .popover{ position:absolute; z-index:70; min-width:280px; max-width:min(560px,90vw); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:var(--s-3); } .popover[hidden]{display:none} .popover__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-2); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); } .colgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:2px 10px; max-height:320px; overflow:auto} .colgrid label{ display:flex; align-items:center; gap:7px; padding:4px 6px; border-radius:var(--r-sm); cursor:pointer; color:var(--text); font-size:var(--fs-sm); } .colgrid label:hover{background:var(--surface-2)} /* ---------------------------------------------------------- typeahead ---- */ .ta{position:relative; display:inline-block} .ta__menu{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:80; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--sh-3); max-height:300px; overflow:auto; min-width:280px; } .ta__menu[hidden]{display:none} .ta__item{padding:7px 10px; cursor:pointer; display:flex; gap:8px; align-items:baseline} .ta__item[aria-selected="true"],.ta__item:hover{background:var(--info-bg)} .ta__item mark{background:transparent; color:var(--amber-500); font-weight:700} .ta__id{font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-mute)} .ta__empty{padding:10px; color:var(--text-mute); font-size:var(--fs-sm)} /* --------------------------------------------------------- pagination ---- */ .pager{display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; font-size:var(--fs-sm)} .pager a,.pager strong{ display:inline-block; min-width:30px; text-align:center; padding:5px 8px; border-radius:var(--r-sm); border:1px solid transparent; } .pager a{color:var(--link)} .pager a:hover{background:var(--n-100); text-decoration:none} :root[data-theme="dark"] .pager a:hover{background:var(--surface-2)} .pager strong{background:var(--amber-500); color:#fff; border-color:var(--amber-600)} /* ------------------------------------------------------------- home ------ */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-3); margin-bottom:var(--s-5)} @media (min-width:1180px){ .kpis{grid-template-columns:repeat(4,1fr)} } .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-4); box-shadow:var(--sh-1); position:relative; overflow:hidden; } .kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--amber-500)} .kpi__label{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim)} .kpi__value{font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; margin-top:2px} .kpi__sub{font-size:var(--fs-xs); color:var(--text-mute)} .section-label{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:650; margin:var(--s-6) 0 var(--s-3); display:flex; align-items:center; gap:var(--s-3); } .section-label::after{content:""; flex:1; height:1px; background:var(--border)} .tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:var(--s-3)} .tile{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); color:var(--text); box-shadow:var(--sh-1); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .tile:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--amber-500); } .tile__icon{ flex:0 0 34px; height:34px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--info-bg); color:var(--navy-600); } :root[data-theme="dark"] .tile__icon{color:var(--info-fg)} .tile:hover .tile__icon{background:var(--amber-500); color:#fff} .tile__label{font-size:var(--fs-sm); font-weight:600; line-height:1.25} /* Staggered reveal on load — one orchestrated moment, not scattered fidgets. */ @media (prefers-reduced-motion:no-preference){ .tile,.kpi{animation:rise .32s cubic-bezier(.2,.7,.3,1) both} .tiles .tile:nth-child(n+1){animation-delay:calc(var(--i,0) * 18ms)} @keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} } /* ------------------------------------------------------------- footer ---- */ .foot{ margin-top:var(--s-8); padding:var(--s-4); text-align:center; color:var(--text-mute); font-size:var(--fs-xs); border-top:1px solid var(--border); } /* ==================================================== legacy class bridge == The unported pages still emit .adminlist / .adminheading / .adminform / .menubar markup. Rather than touch ~25 bespoke templates, map those class names onto the new system so they modernise for free. */ table.adminlist{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; } table.adminlist th{ background:var(--surface-2); color:var(--text-dim); text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; padding:9px var(--s-3); border-bottom:1px solid var(--border-strong); white-space:nowrap; } table.adminlist td{padding:7px var(--s-3); border-bottom:1px solid var(--border)} table.adminlist tr:hover td{background:var(--surface-2)} table.adminheading{width:100%; margin:0 0 var(--s-3)} table.adminheading th.website,th.website{ text-align:left; font-size:var(--fs-xl); font-weight:650; color:var(--text); letter-spacing:-.01em; padding:0 0 var(--s-2); } table.adminform{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-3)} table.adminform td{padding:6px var(--s-3); font-size:var(--fs-sm)} /* Form-control class names from the old sheets. The handlers that still emit inline legacy markup put .inputbox / .text_area on their fields, so these map onto the same control styling the design system gives bare inputs. */ .inputbox,.text_area{ font:inherit; font-size:var(--fs-sm); color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:6px 10px; } .inputbox:focus,.text_area:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)} .menudottedline{border-bottom:1px dotted var(--border); margin:var(--s-2) 0} .menubar,#toolbar{background:transparent!important} .menubar td{border:0!important} .pathway{font-size:var(--fs-xs); color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em} .pathway a{color:var(--text-dim)} a.toolbar{display:inline-block; font-size:var(--fs-xs); color:var(--text-dim); text-align:center} a.toolbar img{height:22px; width:auto; opacity:.8} a.toolbar:hover{color:var(--amber-500); text-decoration:none} .errormessage,.successmessage{ padding:var(--s-3) var(--s-4); border-radius:var(--r-md); font-size:var(--fs-sm); border:1px solid var(--ok-bd); background:var(--ok-bg); color:var(--ok-fg); margin:var(--s-3) 0; width:auto!important; } .centermain{text-align:left!important} .page_jump{margin-top:var(--s-3)} .smallgrey{color:var(--text-mute); font-size:var(--fs-xs)} .asterik{color:var(--bad-fg); font-style:normal; margin-left:2px} fieldset{border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-4); margin:var(--s-4) 0} legend{padding:0 var(--s-2); font-size:var(--fs-xs); font-weight:650; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim)} @media (max-width:820px){ .page{padding:var(--s-3)} .topbar__nav .topbar__link span{display:none} .page-title{font-size:var(--fs-xl)} } @media print{ .topbar,.toolbar,.pager,.foot{display:none!important} .card{border:0; box-shadow:none} } /* ======================================================= SIDEBAR SHELL ==== */ .shell{display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh} .side{ position:sticky; top:0; align-self:start; height:100vh; overflow:auto; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; gap:2px; padding:var(--s-3); } .side__brand{display:flex; align-items:center; gap:10px; padding:6px 8px var(--s-4)} .side__brand img{height:26px} .side__group{margin-top:var(--s-4)} .side__label{ font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--text-mute); padding:0 10px var(--s-2); } .side__link{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-md); color:var(--text-dim); font-size:var(--fs-sm); font-weight:550; transition:background .12s ease, color .12s ease; } .side__link:hover{background:var(--n-100); color:var(--text); text-decoration:none} :root[data-theme="dark"] .side__link:hover{background:var(--surface-2)} .side__link .ic{opacity:.75; flex:none} .side__link.is-active{background:var(--info-bg); color:var(--navy-600); font-weight:650} :root[data-theme="dark"] .side__link.is-active{color:var(--info-fg)} .side__link.is-active .ic{opacity:1; color:var(--amber-500)} .side__text{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .side__badge{ flex:none; min-width:20px; text-align:center; padding:1px 7px; border-radius:var(--r-pill); background:var(--amber-500); color:#fff; font-size:10px; font-weight:700; } .side__foot{margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--border)} .side__user{display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:var(--fs-sm)} /* Collapsed rail */ :root[data-side="mini"] .shell{grid-template-columns:64px minmax(0,1fr)} :root[data-side="mini"] .side__text, :root[data-side="mini"] .side__label, :root[data-side="mini"] .side__brand span, :root[data-side="mini"] .side__user div{display:none} :root[data-side="mini"] .side__link{justify-content:center; padding:10px 0} :root[data-side="mini"] .side__badge{position:absolute; transform:translate(14px,-10px)} :root[data-side="mini"] .side__link{position:relative} /* ============================================================ AVATARS ===== */ .av{ flex:none; width:32px; height:32px; border-radius:var(--r-pill); display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--info-bg); color:var(--navy-600); letter-spacing:.02em; } :root[data-theme="dark"] .av{color:var(--info-fg)} .cellwho{display:flex; align-items:center; gap:10px; min-width:0} .cellwho__main{min-width:0} .cellwho__t{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .cellwho__s{font-size:var(--fs-xs); color:var(--text-mute)} /* ============================================== STATUS PILLS / ACTIONS ==== */ .pill{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:3px 10px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:650; border:1px solid transparent; } .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none} .pill--ok{background:var(--ok-bg); color:var(--ok-fg)} .pill--warn{background:var(--warn-bg); color:var(--warn-fg)} .pill--bad{background:var(--bad-bg); color:var(--bad-fg)} .pill--info{background:var(--info-bg); color:var(--info-fg)} .pill--mute{background:var(--n-100); color:var(--text-dim)} :root[data-theme="dark"] .pill--mute{background:var(--surface-2)} .iconbtn{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:var(--r-md); border:1px solid transparent; background:transparent; color:var(--text-mute); cursor:pointer; transition:all .12s ease; } .iconbtn:hover{background:var(--n-100); color:var(--text); text-decoration:none} :root[data-theme="dark"] .iconbtn:hover{background:var(--surface-2)} .iconbtn--danger:hover{background:var(--bad-bg); color:var(--bad-fg)} .rowactions{display:inline-flex; gap:2px; align-items:center} /* =============================================================== TABS ===== */ .tabs{display:flex; gap:2px; align-items:center; flex-wrap:wrap} .tab{ padding:7px 14px; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:600; color:var(--text-dim); border:1px solid transparent; } .tab:hover{background:var(--n-100); color:var(--text); text-decoration:none} :root[data-theme="dark"] .tab:hover{background:var(--surface-2)} .tab.is-active{background:var(--navy-800); color:#fff} :root[data-theme="dark"] .tab.is-active{background:var(--amber-500)} .tab__n{opacity:.7; margin-left:5px; font-weight:500} /* ====================================================== CHECKBOX COLUMN === */ table.data td.pick,table.data th.pick{width:38px; text-align:center; padding-right:0} input[type=checkbox]{accent-color:var(--amber-500); width:15px; height:15px; cursor:pointer} .bulkbar{ display:none; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); background:var(--info-bg); border-bottom:1px solid var(--info-bd); font-size:var(--fs-sm); color:var(--info-fg); } .bulkbar.is-on{display:flex} /* ====================================================== KPI / SPARKLINE === */ .kpi{padding:var(--s-4) var(--s-5); border-radius:var(--r-xl)} .kpi::before{display:none} /* replaced by the icon chip below */ .kpi__top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3)} .kpi__chip{ width:34px; height:34px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--info-bg); color:var(--navy-600); flex:none; } :root[data-theme="dark"] .kpi__chip{color:var(--info-fg)} .kpi__value{font-size:28px; line-height:1.1; margin-top:var(--s-2)} .kpi__row{display:flex; align-items:center; gap:var(--s-2); margin-top:6px; flex-wrap:wrap} .delta{ display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700; } .delta--up{background:var(--ok-bg); color:var(--ok-fg)} .delta--down{background:var(--bad-bg); color:var(--bad-fg)} .delta--flat{background:var(--n-100); color:var(--text-dim)} .spark{display:block; width:100%; height:30px; margin-top:var(--s-2); overflow:visible} .spark path{fill:none; stroke:var(--amber-500); stroke-width:2; stroke-linecap:round; stroke-linejoin:round} .spark .fill{fill:var(--amber-500); opacity:.10; stroke:none} /* ========================================================== PAGINATION ==== */ .pagebar{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap} .pagebar__info{font-size:var(--fs-sm); color:var(--text-dim)} .pagebar__info b{color:var(--text)} .pager a,.pager strong{min-width:32px; height:32px; line-height:22px; border-radius:var(--r-md)} .pager a{border:1px solid var(--border)} .pager strong{background:var(--navy-800); border-color:var(--navy-800)} :root[data-theme="dark"] .pager strong{background:var(--amber-500); border-color:var(--amber-500)} /* rounder cards + roomier tables to match the reference scale */ table.data thead th{padding:11px var(--s-4); font-size:10px} table.data tbody td{padding:0 var(--s-4)} .toolbar{padding:var(--s-4); border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--surface)} .tablewrap{border-radius:0 0 var(--r-xl) var(--r-xl)} .card{border-radius:var(--r-xl)} .tile{border-radius:var(--r-xl)} @media (max-width:1000px){ .shell{grid-template-columns:1fr} .side{position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:90; transform:translateX(-100%); transition:transform .2s ease} :root[data-side="open"] .side{transform:none; box-shadow:var(--sh-3)} .sidetoggle{display:inline-grid!important} } .sidetoggle{display:none} /* ------------------------------------------------- topbar control cluster - */ .tbctl{display:inline-flex; align-items:center; gap:6px} .tbctl select{ padding:6px 26px 6px 10px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:var(--fs-sm); -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 14px) 51%, calc(100% - 9px) 51%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } .topbar{gap:var(--s-3); padding:0 var(--s-5)} /* =========================================================================== COLOUR SYSTEM + 3D CONTROLS Adopted from the noqueue brand system: generous radii, and shadows tinted with the control's OWN hue cast far below it (0 Ypx Bpx -Spx) rather than a neutral grey. That coloured cast is what reads as "3D" — the element looks lit and lifted off the page instead of outlined on it. =========================================================================== */ :root{ --c-indigo:#4f46e5; --c-indigo-2:#6366f1; --c-indigo-bg:#eef0ff; --c-teal:#0d9488; --c-teal-2:#14b8a6; --c-teal-bg:#e6faf7; --c-violet:#7c3aed; --c-violet-2:#8b5cf6; --c-violet-bg:#f3eeff; --c-rose:#e11d48; --c-rose-2:#f43f5e; --c-rose-bg:#ffeef1; --c-amber:#e36d05; --c-amber-2:#f5893a; --c-amber-bg:#fff2e6; --c-sky:#0284c7; --c-sky-2:#0ea5e9; --c-sky-bg:#e6f5fe; --c-emerald:#059669;--c-emerald-2:#10b981;--c-emerald-bg:#e7f8f0; --c-slate:#475569; --c-slate-2:#64748b; --c-slate-bg:#eef1f5; } :root[data-theme="dark"]{ --c-indigo-bg:#1b1e3d; --c-teal-bg:#0a2b28; --c-violet-bg:#251a3d; --c-rose-bg:#331319; --c-amber-bg:#2e1c07; --c-sky-bg:#0a2437; --c-emerald-bg:#08281c;--c-slate-bg:#1b212b; } /* ---- 3D buttons ---------------------------------------------------------- */ .btn3d{ --b1:var(--c-amber); --b2:var(--c-amber-2); display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border:0; border-radius:var(--r-lg); cursor:pointer; font:inherit; font-size:var(--fs-sm); font-weight:650; color:#fff; line-height:1.2; background:linear-gradient(135deg,var(--b2),var(--b1)); box-shadow:0 18px 34px -18px var(--b1), 0 2px 4px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.28); transition:transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, filter .14s ease; } .btn3d:hover{ text-decoration:none; transform:translateY(-2px); filter:saturate(1.06); box-shadow:0 26px 44px -20px var(--b1), 0 3px 6px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.34); } .btn3d:active{transform:translateY(1px); box-shadow:0 10px 20px -14px var(--b1), inset 0 2px 5px rgba(0,0,0,.18)} .btn3d:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--b1) 35%,transparent), 0 18px 34px -18px var(--b1)} .btn3d--indigo{--b1:var(--c-indigo); --b2:var(--c-indigo-2)} .btn3d--teal{--b1:var(--c-teal); --b2:var(--c-teal-2)} .btn3d--violet{--b1:var(--c-violet); --b2:var(--c-violet-2)} .btn3d--rose{--b1:var(--c-rose); --b2:var(--c-rose-2)} .btn3d--sky{--b1:var(--c-sky); --b2:var(--c-sky-2)} .btn3d--emerald{--b1:var(--c-emerald); --b2:var(--c-emerald-2)} .btn3d--slate{--b1:var(--c-slate); --b2:var(--c-slate-2)} .btn3d--sm{padding:8px 14px; font-size:var(--fs-xs); border-radius:var(--r-md)} /* Give the ordinary primary button the same lift so the language is consistent. */ .btn--primary{ background:linear-gradient(135deg,var(--c-amber-2),var(--c-amber)); border-color:transparent; box-shadow:0 14px 26px -16px var(--c-amber), inset 0 1px 0 rgba(255,255,255,.25); } .btn--primary:hover{transform:translateY(-1px); box-shadow:0 20px 32px -18px var(--c-amber)} /* ---- colourful KPI cards ------------------------------------------------- */ .kpi{ --k1:var(--c-indigo); --k2:var(--c-indigo-2); --kbg:var(--c-indigo-bg); position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border); box-shadow:0 18px 40px -30px var(--k1), var(--sh-1); transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease; } .kpi:hover{transform:translateY(-3px); box-shadow:0 28px 52px -28px var(--k1), var(--sh-2); text-decoration:none} /* A soft tinted wash in the corner instead of a flat coloured card: keeps the number high-contrast while still reading as "this metric has an identity". */ .kpi::after{ content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle,var(--kbg),transparent 70%); pointer-events:none; } .kpi__chip{background:var(--kbg); color:var(--k1)} .kpi__value{color:var(--text)} .kpi--indigo{--k1:var(--c-indigo);--k2:var(--c-indigo-2);--kbg:var(--c-indigo-bg)} .kpi--teal{--k1:var(--c-teal);--k2:var(--c-teal-2);--kbg:var(--c-teal-bg)} .kpi--violet{--k1:var(--c-violet);--k2:var(--c-violet-2);--kbg:var(--c-violet-bg)} .kpi--rose{--k1:var(--c-rose);--k2:var(--c-rose-2);--kbg:var(--c-rose-bg)} .kpi--amber{--k1:var(--c-amber);--k2:var(--c-amber-2);--kbg:var(--c-amber-bg)} .kpi--sky{--k1:var(--c-sky);--k2:var(--c-sky-2);--kbg:var(--c-sky-bg)} .kpi--emerald{--k1:var(--c-emerald);--k2:var(--c-emerald-2);--kbg:var(--c-emerald-bg)} .kpi--slate{--k1:var(--c-slate);--k2:var(--c-slate-2);--kbg:var(--c-slate-bg)} /* ---- quick actions ------------------------------------------------------- */ .quick{ display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center; padding:var(--s-4) var(--s-5); margin-bottom:var(--s-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-1); } .quick__label{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-right:var(--s-2); } /* ---- colourful nav tiles ------------------------------------------------- */ .tile{--t1:var(--c-slate); --tbg:var(--c-slate-bg)} .tile__icon{background:var(--tbg); color:var(--t1)} .tile:hover{border-color:var(--t1); box-shadow:0 20px 38px -26px var(--t1), var(--sh-2)} .tile:hover .tile__icon{background:var(--t1); color:#fff} .tile--indigo{--t1:var(--c-indigo);--tbg:var(--c-indigo-bg)} .tile--teal{--t1:var(--c-teal);--tbg:var(--c-teal-bg)} .tile--violet{--t1:var(--c-violet);--tbg:var(--c-violet-bg)} .tile--rose{--t1:var(--c-rose);--tbg:var(--c-rose-bg)} .tile--amber{--t1:var(--c-amber);--tbg:var(--c-amber-bg)} .tile--sky{--t1:var(--c-sky);--tbg:var(--c-sky-bg)} .tile--emerald{--t1:var(--c-emerald);--tbg:var(--c-emerald-bg)} /* Sidebar active state picks up the accent gradient too. */ .side__link.is-active{ background:linear-gradient(135deg,var(--c-amber-bg),transparent); box-shadow:inset 3px 0 0 var(--c-amber); } /* --- KPI polish ---------------------------------------------------------- The corner wash is an absolutely-positioned ::after, so it painted OVER the statically-positioned chip and washed it out. Lift the real content above it and give the chip a saturated tint so it reads at a glance. */ .kpi > *{position:relative; z-index:1} .kpi::after{z-index:0; opacity:.75} .kpi__chip{ width:38px; height:38px; border-radius:var(--r-md); background:linear-gradient(135deg,var(--k2),var(--k1)); color:#fff; box-shadow:0 10px 20px -12px var(--k1); } .kpi__chip .ic{stroke-width:2.2} .kpi__label{font-size:11px; font-weight:650; letter-spacing:.07em} .kpi__value{font-size:34px; font-weight:750; letter-spacing:-.03em; margin-top:var(--s-3)} .kpi__sub{margin-top:2px} /* --- tile polish ---------------------------------------------------------- */ .tile__icon{ width:38px; height:38px; background:linear-gradient(135deg,color-mix(in srgb,var(--t1) 14%,var(--surface)),var(--tbg)); color:var(--t1); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t1) 18%,transparent); } .tile__icon .ic{stroke-width:2.1} .tile:hover .tile__icon{ background:linear-gradient(135deg,var(--t1),color-mix(in srgb,var(--t1) 75%,#fff)); color:#fff; box-shadow:0 10px 18px -10px var(--t1); } .tile{padding:var(--s-4)} /* Tile chips go SOLID, matching the KPI chips: at 14% tint adjacent sections (indigo vs violet, teal vs emerald) were indistinguishable, which defeats the point of colour-coding them. */ .tile__icon{ background:linear-gradient(135deg,var(--t1),color-mix(in srgb,var(--t1) 72%,#ffffff)); color:#fff; box-shadow:0 8px 16px -10px var(--t1); } .tile:hover .tile__icon{ background:linear-gradient(135deg,color-mix(in srgb,var(--t1) 88%,#000),var(--t1)); box-shadow:0 12px 22px -10px var(--t1); } /* =========================================================================== DATE RANGE PICKER (.drp) One field instead of two. Presets on the left, two months on the right — the shape operators already know from every analytics tool. Values are written into hidden inputs using each page's OWN param names (sd/ed, std/end), so no handler had to change. =========================================================================== */ .drp{position:relative; display:inline-block} .drp__field{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; padding:8px 13px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-sm); font-weight:550; white-space:nowrap; transition:border-color .12s ease, box-shadow .12s ease; } .drp__field:hover{border-color:var(--c-amber)} .drp__field:focus-visible{outline:none; box-shadow:var(--ring)} .drp__field .ic{opacity:.55} .drp__caret{opacity:.5; margin-left:2px} .drp__pop{ position:absolute; z-index:95; top:calc(100% + 6px); left:0; display:flex; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden; } .drp__pop[hidden]{display:none} .drp--right .drp__pop{left:auto; right:0} /* ------------------------------------------------- searchable select -- */ /* Wraps a long