/* Orbitra UI kit (2026-06-11) — shared premium components layered on the existing
   theme variables (--bg-card, --text-main, --accent, …). Additive: pages opt in
   via .ui-* classes, so nothing else is affected. Themes automatically with
   dark/light AND the accent colour picker. This is the foundation the redesign
   builds on, starting with the auth screens. */
:root{--ui-r:11px;--ui-r-lg:18px}

/* ---- Auth screens (login / register / reset) ---- */
.ui-auth{min-height:calc(100dvh - 96px);display:flex;align-items:center;justify-content:center;padding:14px 2px}
.ui-auth-card{width:100%;max-width:398px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--ui-r-lg);padding:30px 28px 24px}
.ui-auth-brand{text-align:center;margin-bottom:24px}
.ui-auth-logo{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);font-size:26px;margin-bottom:13px}
.ui-auth-name{font-size:22px;font-weight:700;color:var(--text-main);letter-spacing:-.3px}
.ui-auth-tag{font-size:12.5px;color:var(--text-muted);margin-top:4px}
.ui-auth-foot{text-align:center;font-size:13px;color:var(--text-muted);margin-top:20px}
.ui-auth-secure{text-align:center;font-size:11.5px;color:var(--text-muted);margin-top:15px;display:flex;align-items:center;justify-content:center;gap:6px;opacity:.85}
.ui-auth-secure i{color:var(--accent)}

/* ---- Form primitives ---- */
.ui-form{display:flex;flex-direction:column;gap:16px}
.ui-field{display:flex;flex-direction:column;gap:7px}
.ui-label-row{display:flex;align-items:center;justify-content:space-between}
.ui-label{font-size:12.5px;font-weight:600;color:var(--text-main)}
.ui-input{width:100%;height:46px;padding:0 14px;border-radius:var(--ui-r);border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);font-size:14px;font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease}
.ui-input::placeholder{color:var(--text-muted);opacity:.7}
.ui-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}

/* ---- Buttons ---- */
.ui-btn{height:47px;border-radius:var(--ui-r);font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px solid transparent;font-family:inherit;transition:filter .15s ease,background .15s ease,border-color .15s ease,color .15s ease}
.ui-btn-primary{background:var(--accent);color:var(--accent-contrast,#fff);border-color:var(--accent)}
.ui-btn-primary:hover{filter:brightness(1.07)}
.ui-btn-ghost{background:transparent;color:var(--text-main);border-color:var(--input-border)}
.ui-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Bits ---- */
.ui-or{display:flex;align-items:center;gap:12px;margin:18px 0 16px;color:var(--text-muted);font-size:12px}
.ui-or::before,.ui-or::after{content:"";flex:1;height:1px;background:var(--border-color)}
.ui-link{color:var(--accent);text-decoration:none;font-weight:600}
.ui-link:hover{text-decoration:underline}
.ui-link-sm{font-size:12px;color:var(--text-muted);text-decoration:none}
.ui-link-sm:hover{color:var(--accent)}
.ui-linkbtn{background:none;border:0;cursor:pointer;font-family:inherit;font-size:12px;color:var(--text-muted);display:inline-flex;align-items:center;gap:5px;padding:0}
.ui-linkbtn:hover{color:var(--accent)}
.ui-input-otp{text-align:center;font-size:26px;letter-spacing:9px;font-family:ui-monospace,monospace;height:56px;font-weight:600}
.ui-input-otp::placeholder{letter-spacing:9px}

/* Live health-strip chip (admin Live/cockpit engine loop-lag + feed). Shared here so the
   monitor.html (Jinja) and monitor_cockpit.html (JS) strips use ONE style. Each page keeps
   its own container class (.mv-health / .ck-health) for layout. Used only on those 2 admin pages. */
.hchip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.05);color:#94a3b8;border:1px solid rgba(255,255,255,.07);font-variant-numeric:tabular-nums}
.hchip.green{background:rgba(16,185,129,.13);color:#34d399;border-color:rgba(16,185,129,.25)}
.hchip.amber{background:rgba(245,158,11,.13);color:#fbbf24;border-color:rgba(245,158,11,.25)}
.hchip.red{background:rgba(239,68,68,.13);color:#f87171;border-color:rgba(239,68,68,.25)}
.hchip.idle{opacity:.65}
[data-theme="light"] .hchip{background:rgba(15,23,42,.04);color:#5b6473;border-color:rgba(0,0,0,.08)}

/* ── T66 — kill the stray blinking text CARET globally (2026-07-12) ──
   A thin blinking vertical line (text caret) was appearing on non-editable UI
   (e.g. the Reports P&L calendar) whenever a non-input element took focus /
   Chrome Caret-Browsing engaged — "feels like a local tool, not an app". Past
   fixes were per-place and kept recurring; this is the ONE permanent app-wide
   rule (this sheet loads on every page via base.html). caret-color is an
   INHERITED property, so transparent on :root cascades everywhere; real inputs
   re-enable a visible, working caret below. Theme-agnostic (no colours added). */
:root{caret-color:transparent}
input,textarea,select,[contenteditable="true"],[contenteditable=""]{caret-color:auto}

/* T66 — interactive CHROME is not text: show the pointer cursor (never a text
   I-beam) and don't drop a stray selection when clicked. Scoped to genuinely
   CLICKABLE elements ONLY — report tables, P&L numbers, log text and any other
   CONTENT stay fully selectable + copyable (never add user-select:none here to
   content or a broad/global selector). Disabled buttons keep their own cursor. */
button:not(:disabled),[role="button"],.ui-btn,.ui-link,.ui-linkbtn,
.rpt-chip,.pnlcal-toggle button,.cv-chip{cursor:pointer}
button,[role="button"],.ui-btn,.ui-link,.ui-linkbtn,
.rpt-chip,.pnlcal-toggle button,.cv-chip{-webkit-user-select:none;user-select:none}