/* ═════════════════════════════════════════════════════════════════════════════
   Header Standard (24.09.2026) — the look of public/hdr.js
   Title · Custom · Switch · Platform · Model|Account · Time · Actions · Close
   Every control is 32 px tall (44 px on phones), square, gold when active.
   Mockups: https://claude.ai/artifact/Fih4HRkq7i61aAwnfGXqQB
   ═════════════════════════════════════════════════════════════════════════════ */

.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px 8px;min-width:0}
.page-header.hdr{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap}
.hdr-head{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto;margin-right:auto;padding-right:16px}
.hdr-tw{min-width:0;display:flex;flex-direction:column}
.hdr-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.15;letter-spacing:.5px;color:var(--text)}
.hdr-popup .hdr-title{font-size:28px}
.hdr-modal .hdr-title{font-size:20px;line-height:1.2}
.hdr-title .hdr-real{font-family:var(--font-display)}
.hdr-subslot:empty{display:none}
.hdr-subslot>*,.hdr-sub{margin-top:3px;font-size:12px;color:var(--text-2);text-transform:none;letter-spacing:0;font-family:var(--font-body)}
.hdr-ctrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.hdr-custom,.hdr-std{display:contents}
/* One gap everywhere: every control is 8 px from the next, nothing brings its own margin */
.hdr-ctrls>*,.hdr-custom>*,.hdr-tail>*{margin:0!important}
.hdr-tail{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hdr-tail:empty{display:none}

/* Icons */
.hdr-i{display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Icon buttons (refresh, add, open …) */
.hdr-ibtn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;flex-shrink:0;border-radius:0;transition:background .12s,color .12s}
.hdr-ibtn:hover{background:var(--hover);color:var(--text)}
.hdr-ibtn:disabled{opacity:.4;cursor:default}
.hdr-ibtn.is-on{border-color:var(--indigo);color:var(--indigo-dark);background:var(--indigo-bg)}
.hdr-ibtn.is-primary{background:var(--indigo);border-color:var(--indigo);color:#0a0a0a}
.hdr-ibtn.is-primary:hover{background:var(--indigo-light)}
.hdr-ibtn.is-busy{border-color:var(--indigo);color:var(--indigo-dark);background:var(--indigo-bg)}
.hdr-ibtn.is-busy .hdr-i{animation:hdrSpin .9s linear infinite}
.hdr-ibtn-sm{width:28px;height:28px}
/* Head row above a table (Hdr.bar): card title left, controls right, 8 px apart */
.hdr-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 20px 12px;flex-wrap:wrap;min-height:58px;box-sizing:border-box}
.hdr-bar-t{font:600 10px/1.3 var(--font-body);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-2);min-width:0}
.hdr-bar-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.hdr-bar-tw{display:flex;align-items:center;gap:8px;min-width:0}
.hdr-bar-i{display:inline-flex;color:var(--text-3);cursor:help}
.hdr-bar-i:hover,.hdr-bar-i:focus-visible{color:var(--indigo-dark);outline:0}
.hdr-bar-n{font:500 12px var(--font-body);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hdr-bar-n:empty{display:none}
/* A bar in a padded card (.card, not .tbl-card) sits flush with the card's own padding */
.card:not(.tbl-card)>.hdr-bar:first-child{margin:-22px -22px 12px;padding:14px 22px 12px}
/* The ONE search field (Hdr.search) — variant B, Lasse's pick (2026-09-25): an icon the
   size of every other control; a click opens the field (it is a <label>, so the click
   focuses the input and :focus-within opens it). It stays open, gold, while it filters
   and folds back to the icon when it is empty and loses focus. No JS needed for that. */
.hdr-find{height:32px;width:32px;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:0 4px 0 8px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);flex-shrink:0;cursor:pointer;overflow:hidden;transition:width .18s ease,border-color .12s,background .12s}
.hdr-find:hover{background:var(--hover);color:var(--text)}
.hdr-find:focus-within{width:240px;border-color:var(--indigo);background:var(--surface);color:var(--text-2);cursor:text}
.hdr-find.is-set{width:240px;border-color:var(--indigo);background:var(--indigo-bg);color:var(--indigo-dark);cursor:text}
/* Folded: only the icon, centred; the empty input takes no room (nothing peeks out) */
.hdr-find:not(:focus-within):not(.is-set){justify-content:center;padding:0;gap:0}
.hdr-find:not(:focus-within):not(.is-set) input{flex:0 0 0;width:0}
.hdr-find input{flex:1;min-width:0;height:30px;border:0;outline:0;background:transparent;font:13px var(--font-body);color:var(--text);padding:0;margin:0;box-shadow:none}
.hdr-find input::placeholder{color:var(--text-3)}
.hdr-find input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.hdr-find-x{width:24px;height:24px;flex-shrink:0;display:none;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--text-2);cursor:pointer;border-radius:0}
.hdr-find-x:hover{background:var(--hover);color:var(--text)}
.hdr-find.is-set .hdr-find-x{display:inline-flex}
/* is-wide: open, the field takes the whole row (narrow panes like the chat list) */
.hdr-find.is-wide:focus-within,.hdr-find.is-wide.is-set{width:auto;flex:1 1 100%}
/* On/off filter button (Hdr.toggle): white off, gold on — same gold as an active switch */
.hdr-ibtn.hdr-tog.is-on{background:var(--indigo);border-color:var(--indigo);color:#0a0a0a}
.hdr-ibtn.hdr-tog.is-on:hover{background:var(--indigo-light)}
.hdr-ibtn.hdr-tog.hdr-tog-t{width:auto;min-width:32px;padding:0 8px;gap:5px}
.hdr-tog-n{font:600 11px/1 var(--font-body);font-variant-numeric:tabular-nums}
@keyframes hdrSpin{to{transform:rotate(360deg)}}

/* Text buttons (only where an icon alone would be a guess) */
.hdr-btn{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font:600 11px/1 var(--font-body);letter-spacing:.3px;cursor:pointer;white-space:nowrap;flex-shrink:0;border-radius:0}
.hdr-btn:hover{background:var(--hover);color:var(--text)}
.hdr-btn.is-primary{background:var(--indigo);border-color:var(--indigo);color:#0a0a0a}
.hdr-btn.is-primary:hover{background:var(--indigo-light)}
.hdr-btn.is-busy{border-color:var(--indigo);color:var(--indigo-dark);background:var(--indigo-bg);cursor:progress}
.hdr-btn.is-busy .hdr-i{animation:hdrSpin .9s linear infinite}
.hdr-count{min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--indigo);color:#0a0a0a;font-size:10px;font-weight:700}

/* Close — always gold */
.hdr-close{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:var(--indigo);color:#0a0a0a;cursor:pointer;flex-shrink:0;border-radius:0}
.hdr-close:hover{background:var(--indigo-light)}
.hdr-div{width:1px;height:20px;background:var(--border);flex-shrink:0}

/* Segments: timeframe and switches */
.hdr-seg{display:inline-flex;height:32px;box-sizing:border-box;border:1px solid var(--border);background:var(--surface);flex-shrink:0}
.hdr-seg>button{height:30px;padding:0 12px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--text-2);font:600 11px/1 var(--font-body);letter-spacing:.3px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border-radius:0}
.hdr-seg>button:last-child{border-right:0}
.hdr-seg>button:hover{background:var(--hover);color:var(--text)}
.hdr-seg>button.is-on{background:var(--indigo);color:#0a0a0a}
.hdr-seg>button.hdr-seg-ico{width:32px;padding:0}
.hdr-seg>button.hdr-cal{min-width:32px;padding:0 8px}
.hdr-seg>button.hdr-cal.is-on{padding:0 10px}

/* Pickers: platform, model, account */
.hdr-pick{height:32px;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:0 10px 0 6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:500 12px/1 var(--font-body);cursor:pointer;min-width:0;max-width:260px;flex:0 1 auto;border-radius:0}
.hdr-pick:hover{background:var(--hover)}
.hdr-pick.is-open{border-color:var(--indigo)}
.hdr-pick.is-open .hdr-caret{transform:rotate(180deg)}
.hdr-pick-model,.hdr-pick-acc{min-width:176px}
.hdr-caret{display:flex;color:var(--text-2);flex-shrink:0;margin-left:auto}
.hdr-ico-slot{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0}
.hdr-ico-24{width:24px;height:24px}
.hdr-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-block;background:var(--hover)}
.hdr-av-ini{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-body);color:#7a5f22;background:#f3e7c4}
.hdr-avw{position:relative;display:inline-flex;flex-shrink:0}
.hdr-badge{position:absolute;right:-4px;bottom:-3px;display:flex}
.hdr-badge .hdr-logo,.hdr-badge img{width:11px!important;height:11px!important;border-radius:50%;box-shadow:0 0 0 1.5px var(--surface);object-fit:contain;background:var(--surface)}
.hdr-logo{border-radius:4px;object-fit:contain;flex-shrink:0;display:inline-block}
.hdr-logo-ini{display:inline-flex;align-items:center;justify-content:center;background:#1a1a1a;color:#fff;font:700 7px var(--font-body);letter-spacing:.2px}
.hdr-real{color:var(--text-2);font-weight:400}
.hdr-tag{flex:0 1 auto;min-width:0;max-width:130px;display:inline-flex;padding:2px 6px;background:var(--indigo-bg);color:#7a5f22;font:600 10px/1.3 var(--font-body);letter-spacing:.2px}

/* Names slide like the chat sidebar (.nav-sub-label, keyframes navSubMarquee) */
.hdr-name{min-width:0;overflow:hidden;white-space:nowrap;flex:0 1 auto;text-align:left}
.hdr-name-in{display:inline-block;white-space:nowrap}
.hdr-name.is-long{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
.hdr-pick:hover .hdr-name.is-long>.hdr-name-in,.hdr-pick:focus-visible .hdr-name.is-long>.hdr-name-in,
.hdr-opt:hover .hdr-name.is-long>.hdr-name-in,.hdr-opt:focus-visible .hdr-name.is-long>.hdr-name-in,
.hdr-opt.is-on .hdr-name.is-long>.hdr-name-in{animation:navSubMarquee var(--marq-dur,4s) ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.hdr-name-in{animation:none!important}}

/* Popover: lists and calendar */
.hdr-pop{position:fixed;z-index:12000;background:var(--surface);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;min-width:220px;max-width:min(340px,calc(100vw - 16px));overflow:hidden;color:var(--text);font-family:var(--font-body)}
.hdr-pop[hidden]{display:none}
.hdr-pop-acc{width:360px}
.hdr-pop-list{width:290px}
.hdr-pop-plat{width:220px}
.hdr-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid var(--line-soft);color:var(--text-2);flex-shrink:0}
.hdr-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:13px var(--font-body);color:var(--text)}
.hdr-list{overflow:auto;padding:4px 0;overscroll-behavior:contain;min-height:0}
.hdr-opt{width:100%;min-height:36px;display:flex;align-items:center;gap:10px;padding:0 12px;border:0;background:transparent;color:var(--text);font:400 12px/1.2 var(--font-body);text-align:left;cursor:pointer;border-radius:0}
.hdr-opt[hidden]{display:none}
.hdr-opt:hover{background:var(--hover)}
.hdr-opt.is-on{background:var(--indigo-bg);font-weight:600}
.hdr-opt.is-off{color:var(--text-2)}
.hdr-opt .hdr-nick{font-weight:600}
.hdr-opt .hdr-name{flex:1 1 auto}
.hdr-sub-opt{min-height:32px;padding-left:46px}
.hdr-chk{display:flex;color:var(--indigo-dark);margin-left:auto;flex-shrink:0}
.hdr-sep{height:1px;background:var(--line-soft);margin:4px 0}
.hdr-sep[hidden],.hdr-grp[hidden]{display:none}
.hdr-grp{padding:10px 12px 4px;font:600 10px var(--font-body);letter-spacing:.8px;text-transform:uppercase;color:var(--text-2)}
.hdr-empty{padding:14px 12px;font-size:12px;color:var(--text-2)}
.hdr-pop-cal{width:282px;padding:12px;gap:10px;box-sizing:border-box}
.hdr-cal-head{display:flex;align-items:center;justify-content:space-between;font:600 12px var(--font-body);letter-spacing:.3px}
.hdr-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:2px}
.hdr-cal-wd{text-align:center;font:600 10px var(--font-body);letter-spacing:.5px;text-transform:uppercase;color:var(--text-2);padding-bottom:4px}
.hdr-day{height:32px;padding:0;border:0;background:transparent;color:var(--text);font:400 12px var(--font-body);cursor:pointer;border-radius:0}
.hdr-day:hover{background:var(--hover)}
.hdr-day.is-mid{background:var(--indigo-bg)}
.hdr-day.is-end{background:var(--indigo);color:#0a0a0a;font-weight:600}
.hdr-day.is-today{box-shadow:inset 0 0 0 1px var(--indigo);font-weight:600}
.hdr-day:disabled{color:var(--text-3);cursor:default;background:transparent}
.hdr-cal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.hdr-cal-span{font:600 12px var(--font-body)}
.hdr-apply{height:32px;padding:0 16px;border:0;background:var(--indigo);color:#0a0a0a;font:600 11px var(--font-body);letter-spacing:.5px;cursor:pointer;border-radius:0}
.hdr-apply:hover{background:var(--indigo-light)}
.hdr-apply:disabled{opacity:.45;cursor:default}

/* Popups: fullscreen / JS popups carry their own padding; upgraded .modal-header keeps its box */
.hdr-popup{padding:18px 32px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.modal-header.hdr{flex-wrap:wrap}
.hdr-modal .hdr-close,.hdr-popup .hdr-close{margin-left:0}

/* Controls moved in from an old header keep working, but take the standard size */
.hdr-custom>.btn,.hdr-custom>.btn-sm,.hdr-custom>.btn-xs,.hdr-custom>.btn-outline,.hdr-custom>.btn-indigo,.hdr-custom>.btn-secondary,
.hdr-custom>button:not([class]),.hdr-custom>.btn-sm-outline{height:32px;box-sizing:border-box;padding:0 12px;border-radius:0;font:600 11px/1 var(--font-body);letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;width:auto;margin:0;text-transform:none}
.hdr-custom>select,.hdr-custom select.input,.hdr-custom>.input,.hdr-custom>input[type=search],.hdr-custom>input[type=text]{height:32px;box-sizing:border-box;border-radius:0;font-size:12px;padding:0 10px;width:auto;min-width:0;margin:0}

@media (max-width:768px){
  .hdr-find input{font-size:16px}
  .card:not(.tbl-card)>.hdr-bar:first-child{margin:-14px -14px 10px;padding:12px 14px}
  .hdr-bar{padding:12px 16px}
  .hdr-bar-c{width:100%;margin-left:0}
  .hdr-find{height:44px;width:44px}
  .hdr-find:focus-within,.hdr-find.is-set{width:auto;flex:1 1 100%}
  .hdr-find input{height:42px}
  .page-header.hdr{margin-bottom:14px;gap:10px}
  .page-header.hdr>.hdr-head{flex:1 1 0;min-width:0}
  .page-header.hdr>.hdr-tail{flex:0 0 auto;order:1}
  .page-header.hdr>.hdr-ctrls{flex:1 1 100%;order:2;justify-content:flex-start}
  .hdr-popup{padding:12px 16px}
  .hdr-popup>.hdr-head,.modal-header.hdr>.hdr-head{flex:1 1 0;min-width:0}
  .hdr-popup>.hdr-tail,.modal-header.hdr>.hdr-tail{order:1}
  .hdr-popup>.hdr-ctrls,.modal-header.hdr>.hdr-ctrls{flex:1 1 100%;order:2;justify-content:flex-start}
  /* Icon actions + close stay on the title row; text actions get their own row
     under the pickers instead of squeezing the title. */
  .page-header.hdr>.hdr-tail,.hdr-popup>.hdr-tail,.modal-header.hdr>.hdr-tail{display:contents}
  .hdr>.hdr-tail>.hdr-ibtn,.hdr>.hdr-tail>.hdr-close{order:1}
  .hdr>.hdr-tail>.hdr-div{display:none}
  .hdr>.hdr-tail>.hdr-btn{order:3;flex:1 1 0;justify-content:center;min-width:0}
  .hdr-title{font-size:22px}
  .hdr-modal .hdr-title{font-size:19px}
  .hdr-ibtn,.hdr-close{width:44px;height:44px}
  .hdr-btn{height:44px}
  .hdr-seg{height:44px}
  .hdr-seg>button{height:42px}
  .hdr-seg.hdr-time{flex:1 1 100%}
  .hdr-seg.hdr-time>button{flex:1 1 0}
  .hdr-seg.hdr-time>button.hdr-cal{flex:0 0 auto;min-width:52px}
  .hdr-pick{height:44px;flex:1 1 100%;max-width:none;font-size:14px}
  .hdr-pick-plat{flex:1 1 40%}
  .hdr-av{width:24px;height:24px}
  .hdr-opt{min-height:44px;font-size:14px}
  .hdr-sub-opt{min-height:40px}
  .hdr-pop,.hdr-pop-list,.hdr-pop-acc,.hdr-pop-plat{max-width:none;width:auto}
  .hdr-pop-cal{width:auto}
  .hdr-custom>*{max-width:100%}
  .hdr-custom>.btn,.hdr-custom>.btn-sm,.hdr-custom>select,.hdr-custom>.input,.hdr .hdr-nsel{height:44px}
  .hdr .hdr-nsel{max-width:none;flex:1 1 40%}
}

/* Model name above its accounts when the model itself can't be picked */
.hdr-opt-head{cursor:default;font-weight:600}
.hdr-opt-head:hover{background:transparent}


/* On/off action (a single toggle, e.g. "New on top"): gold edge when on */
.hdr-btn.is-on{border-color:var(--indigo);color:var(--indigo-dark);background:var(--indigo-bg)}
.hdr-btn[hidden],.hdr-ibtn[hidden],.hdr-seg[hidden],.hdr-pick[hidden]{display:none}
.hdr-btn:disabled{opacity:.45;cursor:default}
.hdr-btn:disabled:hover{background:var(--surface);color:var(--text-2)}
.hdr-btn.is-primary:disabled:hover{background:var(--indigo);color:#0a0a0a}

/* Filter select (cfg.selects): gold edge while something other than "All …" is picked */
.hdr-pick-sel{min-width:120px}
.hdr-pick-sel.is-set{border-color:var(--indigo);background:var(--indigo-bg)}
.hdr-pop-sel{width:240px}

/* The ONE select (hdr.js enhanceSelect): the native <select> stays as the data
   source, hidden; the picker-look button stands in its place. Form fields keep
   the input box of the form they sit in. */
select.hdr-nsel-src{display:none!important}
.hdr-nsel{max-width:100%}
.hdr-nsel .hdr-name{flex:1 1 auto}
.hdr-nsel.is-form{width:100%;height:38px;padding:0 12px;background:var(--bg);border-radius:6px;font-size:13px;font-weight:400}
/* Inside a header it is always the 32 px picker, whatever it was before the
   header adopted it. */
.hdr .hdr-nsel,.hdr .hdr-nsel.is-form{width:auto!important;max-width:240px;height:32px;padding:0 10px;background:var(--surface);border-radius:0;font-size:12px;font-weight:500}
.hdr-nsel.is-form:hover{background:var(--hover)}
.hdr-nsel:disabled{opacity:.5;cursor:default}
.hdr-pop-nsel{max-width:min(420px,calc(100vw - 16px))}