/* =============================================================================
   kh-ui.css — Kingsleigh OS design system (TASK 5: UI/UX consistency pass)
   -----------------------------------------------------------------------------
   ADDITIVE + NON-DESTRUCTIVE. This file changes presentation only — no markup
   logic, no JS behaviour. It is safe to ship on its own because:

     1. The :root tokens reconcile the real palette already in use (see note).
     2. The base layer only sets properties the existing inline styles OMIT
        (cursor, transitions, focus rings, disabled states, ::selection,
        reduced-motion, responsive scale). Inline styles win on specificity for
        everything they DO set, so nothing currently styled is overridden.
     3. The utility classes (.kh-*) are OPT-IN — they do nothing until a node
        adds the class. Use them for the Task-1 modal and to migrate the 90
        bespoke buttons / forms / tables / empty+loading states screen by screen.

   BRAND RECONCILIATION
     The handoff brief lists navy #283447. The codebase actually uses #20283A
     (225 occurrences) as the canonical navy, plus #C6A14C gold and #F3F0E9
     cream. We standardise on the REAL value #20283A so the tokens match what is
     already on screen — switching 225 sites to #283447 would be a visual change,
     not a consistency pass. If the true brand navy must become #283447, change
     --kh-navy below ONCE and migrate inline #20283A → var(--kh-navy) separately.

   Wire-up: <link rel="stylesheet" href="kh-ui.css"> after the Google Fonts link
   in web/index.html. Served as text/css by server.py (works in dev and .app).
   ========================================================================== */

:root {
  /* — Navy / dark chrome (login, sync bar, dark surfaces) — */
  --kh-navy:       #20283A;   /* canonical brand navy / app background */
  --kh-navy-2:     #34425A;   /* raised navy panel, login chips */
  --kh-navy-3:     #161D2B;   /* deep input on dark */
  --kh-navy-line:  #3A4760;   /* hairline on dark */
  --kh-slate:      #8C97A8;   /* muted text on dark */
  --kh-slate-2:    #AEB7C6;   /* brighter muted on dark */

  /* — Ink / text on light — */
  --kh-ink:        #20283A;   /* primary text on light (== navy) */
  --kh-ink-2:      #3F3D36;   /* warm dark text */
  --kh-muted:      #716E62;   /* secondary text */
  --kh-muted-2:    #94907F;   /* tertiary text */
  --kh-muted-3:    #A6A092;   /* faint / captions */

  /* — Cream / paper surfaces — */
  --kh-cream:      #F3F0E9;   /* brand cream */
  --kh-paper:      #FBFAF6;   /* lightest card */
  --kh-paper-2:    #F7F5EF;   /* hover / striped row */
  --kh-paper-3:    #F4F0E7;
  --kh-sand:       #EFEBE1;
  --kh-line:       #E7E2D7;   /* default hairline on light */
  --kh-line-2:     #D9D2C4;   /* stronger divider */

  /* — Gold accent — */
  --kh-gold:       #C6A14C;   /* primary action / accent */
  --kh-gold-hover: #B8923F;   /* gold button hover */
  --kh-gold-deep:  #9A7B2E;   /* gold text on light */
  --kh-gold-soft:  #F7F0DD;   /* gold tint background */
  --kh-gold-soft-2:#E7D9B4;

  /* — Semantic — */
  --kh-ok:         #3F7D5A;   --kh-ok-soft:   #E8F0EA;
  --kh-warn:       #BD832A;   --kh-warn-soft: #F7EEDC;
  --kh-risk:       #B0432E;   --kh-risk-soft: #F6E7E1;
  --kh-live:       #61C554;   /* "live" status dot */

  /* — Type — */
  --kh-font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --kh-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* — Radius / shadow / motion / spacing — */
  --kh-r-sm: 7px;  --kh-r: 9px;  --kh-r-lg: 11px;  --kh-r-xl: 14px;  --kh-r-pill: 999px;
  --kh-shadow-sm: 0 1px 2px rgba(20,28,42,.06);
  --kh-shadow:    0 4px 14px rgba(20,28,42,.10);
  --kh-shadow-lg: 0 18px 50px rgba(20,28,42,.28);
  --kh-t: 140ms ease;
  --kh-ring: 0 0 0 3px rgba(198,161,76,.30);   /* gold focus ring */
  --kh-1: 4px; --kh-2: 8px; --kh-3: 12px; --kh-4: 16px; --kh-5: 24px; --kh-6: 32px;
  --kh-z-modal: 600;   /* above the portal overlay (z-index 500) */
}

/* =============================================================================
   1) BASE LAYER — only sets properties the inline styles leave unset, so it is
      non-destructive. These are the headline consistency wins that land even
      before any class migration.
   ========================================================================== */

/* Every button gets a pointer, a transition, a press response and a real
   disabled state — none of which the inline styles currently specify. */
button { cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: filter var(--kh-t), background var(--kh-t), box-shadow var(--kh-t), transform var(--kh-t); }
button:not(:disabled):hover  { filter: brightness(1.04); }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled, button[disabled], [aria-disabled="true"] {
  cursor: not-allowed; opacity: .5; filter: grayscale(.25); }

/* Consistent, accessible focus — keyboard only, so mouse users see no rings. */
:focus-visible { outline: none; box-shadow: var(--kh-ring); border-radius: var(--kh-r-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--kh-ring); }
/* Inputs that already set an inline border keep it; the ring is purely additive. */
input:focus, select:focus, textarea:focus { outline: none; }

::selection { background: var(--kh-gold-soft); color: var(--kh-ink); }

/* Respect reduced-motion (turns off khPulse/khShimmer etc. for a11y). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
}

/* =============================================================================
   2) RESPONSIVE — the layout is authored at ~1440×900 and runs full-bleed.
      Scale the whole app down so it fits a laptop without horizontal scroll.
      `zoom` is reliable in pywebview/WebKit and keeps proportions intact.
      Breakpoints start BELOW 1440 so 1440-class displays stay pixel-pristine.

      NOTE: if a fixed overlay (login / portal) ever mis-positions under zoom on
      a given WebKit build, swap the rule for the transform fallback at the
      bottom of this block (commented) which is overlay-safe.
   ========================================================================== */
@media (max-width: 1366px) { #root { zoom: 0.90; } }
@media (max-width: 1280px) { #root { zoom: 0.82; } }
@media (max-width: 1180px) { #root { zoom: 0.76; } }
/* Fallback (overlay-safe) — uncomment if zoom misbehaves, remove the rules above:
   @media (max-width:1366px){ #root{ transform:scale(.90); transform-origin:top left; width:111.1%; height:111.1%; } }
   @media (max-width:1280px){ #root{ transform:scale(.82); transform-origin:top left; width:121.9%; height:121.9%; } } */

/* =============================================================================
   3) UTILITY COMPONENTS (opt-in). Add the class; existing inline styles can stay
      during migration (class + inline coexist) or be removed once swapped.
   ========================================================================== */

/* ---- Buttons -------------------------------------------------------------- */
.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kh-2);
  font: 800 13px/1 var(--kh-font); padding: 12px 16px; border: 1px solid transparent;
  border-radius: var(--kh-r); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: var(--kh-t); }
.kh-btn--primary   { background: var(--kh-gold); color: var(--kh-navy); }
.kh-btn--primary:not(:disabled):hover   { background: var(--kh-gold-hover); filter: none; }
.kh-btn--secondary { background: var(--kh-paper); color: var(--kh-ink); border-color: var(--kh-line); }
.kh-btn--secondary:not(:disabled):hover { background: var(--kh-sand); filter: none; }
.kh-btn--ghost     { background: transparent; color: var(--kh-muted); }
.kh-btn--ghost:not(:disabled):hover     { background: var(--kh-paper-2); color: var(--kh-ink); filter: none; }
.kh-btn--danger    { background: var(--kh-risk); color: #fff; }
.kh-btn--dark      { background: var(--kh-navy); color: var(--kh-cream); }
.kh-btn--sm { padding: 8px 12px; font-size: 12px; border-radius: var(--kh-r-sm); }
.kh-btn--lg { padding: 15px 20px; font-size: 14px; }
.kh-btn--block { width: 100%; }

/* ---- Form fields ---------------------------------------------------------- */
.kh-field { display: flex; flex-direction: column; gap: var(--kh-1); }
.kh-label { font: 700 11px/1.2 var(--kh-font); letter-spacing: .04em; text-transform: uppercase; color: var(--kh-muted); }
.kh-input, .kh-select, .kh-textarea {
  width: 100%; box-sizing: border-box; font: 600 13.5px/1.3 var(--kh-font);
  padding: 11px 13px; border: 1px solid var(--kh-line); border-radius: var(--kh-r);
  background: #fff; color: var(--kh-ink); transition: var(--kh-t); }
.kh-input::placeholder, .kh-textarea::placeholder { color: var(--kh-muted-3); }
.kh-input:focus, .kh-select:focus, .kh-textarea:focus { border-color: var(--kh-gold); box-shadow: var(--kh-ring); }
.kh-mono { font-family: var(--kh-mono); font-variant-numeric: tabular-nums; }
.kh-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--kh-4); }
.kh-form-row  { display: flex; flex-direction: column; gap: var(--kh-1); }

/* ---- Cards / sections ----------------------------------------------------- */
.kh-card { background: var(--kh-paper); border: 1px solid var(--kh-line); border-radius: var(--kh-r-lg); padding: 18px; }
.kh-card--flush { padding: 0; overflow: hidden; }
.kh-card__head { display: flex; align-items: center; gap: var(--kh-2); margin-bottom: var(--kh-3); }
.kh-card__title { font: 800 14px/1 var(--kh-font); color: var(--kh-ink); }

/* ---- Pills / badges ------------------------------------------------------- */
.kh-pill { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--kh-font);
  padding: 5px 10px; border-radius: var(--kh-r-pill); }
.kh-pill--ok      { background: var(--kh-ok-soft);   color: var(--kh-ok); }
.kh-pill--warn    { background: var(--kh-warn-soft); color: var(--kh-warn); }
.kh-pill--risk    { background: var(--kh-risk-soft); color: var(--kh-risk); }
.kh-pill--gold    { background: var(--kh-gold-soft); color: var(--kh-gold-deep); }
.kh-pill--neutral { background: var(--kh-sand);      color: var(--kh-muted); }
.kh-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.kh-dot--live { background: var(--kh-live); animation: khPulse 2.2s ease infinite; }

/* ---- Empty state ---------------------------------------------------------- */
.kh-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--kh-2); padding: 48px 24px; color: var(--kh-muted); }
.kh-empty__icon  { font-size: 30px; opacity: .5; }
.kh-empty__title { font: 800 15px/1.2 var(--kh-font); color: var(--kh-ink); }
.kh-empty__sub   { font: 500 12.5px/1.5 var(--kh-font); color: var(--kh-muted); max-width: 340px; }

/* ---- Loading states ------------------------------------------------------- */
.kh-skel { background: linear-gradient(90deg, var(--kh-sand) 25%, var(--kh-paper-2) 37%, var(--kh-sand) 63%);
  background-size: 400% 100%; animation: khShimmer 1.4s ease infinite; border-radius: 6px; min-height: 12px; }
.kh-skel--line  { height: 12px; margin: 7px 0; }
.kh-skel--block { height: 80px; }
@keyframes khShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.kh-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--kh-line);
  border-top-color: var(--kh-gold); animation: khSpin .7s linear infinite; display: inline-block; }
@keyframes khSpin { to { transform: rotate(360deg); } }

/* ---- Tables (consistent density + headers) -------------------------------- */
.kh-table { width: 100%; border-collapse: collapse; font: 500 13px/1.4 var(--kh-font); }
.kh-table th { font: 700 11px/1.2 var(--kh-font); text-transform: uppercase; letter-spacing: .04em;
  color: var(--kh-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--kh-line); }
.kh-table td { padding: 11px 12px; border-bottom: 1px solid var(--kh-line); color: var(--kh-ink); }
.kh-table tbody tr:hover { background: var(--kh-paper-2); }
.kh-table--tight th, .kh-table--tight td { padding: 7px 10px; }
.kh-table .kh-num { text-align: right; font-family: var(--kh-mono); font-variant-numeric: tabular-nums; }

/* ---- Modal / confirm (for the Task-1 in-app dialog) ----------------------- */
.kh-modal-backdrop { position: fixed; inset: 0; z-index: var(--kh-z-modal);
  background: rgba(20,28,42,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: khFade .14s ease; }
.kh-modal { width: 100%; max-width: 440px; max-height: 90vh; display: flex; flex-direction: column;
  background: var(--kh-paper); border-radius: var(--kh-r-xl); box-shadow: var(--kh-shadow-lg); overflow: hidden; }
.kh-modal--wide { max-width: 620px; }
.kh-modal__head  { padding: 18px 20px 0; }
.kh-modal__title { font: 800 16px/1.2 var(--kh-font); color: var(--kh-ink); }
.kh-modal__sub   { font: 500 12.5px/1.5 var(--kh-font); color: var(--kh-muted); margin-top: 4px; }
.kh-modal__body  { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--kh-4); }
.kh-modal__foot  { padding: 14px 20px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--kh-line); }

/* ---- Small helpers -------------------------------------------------------- */
.kh-stack   { display: flex; flex-direction: column; gap: var(--kh-3); }
.kh-row     { display: flex; align-items: center; gap: var(--kh-2); }
.kh-row--end{ justify-content: flex-end; }
.kh-spacer  { flex: 1; }
.kh-hr      { height: 1px; background: var(--kh-line); border: 0; margin: var(--kh-3) 0; }

/* ---- Glossary term — dotted underline, plain-English definition on hover (Move 4) ---
   Reusable: wrap any acronym <abbr class="kh-term" title="...">RAMS</abbr> so a
   novice never meets a bare term. Works on light and dark surfaces. */
abbr.kh-term, .kh-term {
  text-decoration: none;
  border-bottom: 1px dotted var(--kh-gold);
  cursor: help;
}
abbr.kh-term:hover, .kh-term:hover { border-bottom-color: var(--kh-gold-soft-2); }