/* ============================================================================
   L.P.S. WOODENWORK — "Structural Cadence" theme for the ERP_SQL web app.
   Override stylesheet: it REMAPS the app's existing CSS variables and status
   classes, so no page markup needs to change.

   INSTALL — add these to each page's <head>, AFTER the page's inline <style>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="stylesheet" href="/static/erp-theme.css">
   (or include once in nav.html / a shared header partial).

   Default = light (warm paper). For dark, set: <html data-theme="dark">.
   Bilingual-safe: Latin uses Jura/IBM Plex Mono, Thai falls back to Noto Sans Thai.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400;500;700&family=Jura:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

/* ---- remap the app's design variables to Structural Cadence (light) ------ */
:root{
  --bg:#F2EEE5;      /* warm technical paper            */
  --panel:#FBF9F3;   /* card surface                    */
  --panel2:#ECE7DA;  /* sunken / hover row              */
  --line:#D9D3C5;    /* hairline                        */
  --ink:#1B1A17;     /* primary text                    */
  --muted:#6E6A5E;   /* muted text (AA on paper)        */
  --accent:#C4292A;  /* BRAND RED (tuned from logo)     */
  --good:#4F6B4A;    /* ok / issued                     */
  --bad:#8A2E26;     /* danger / blocked (maroon)       */
  --warn:#7E5912;    /* warning / pending               */
  --radius:4px;      /* precision = minimal rounding    */
  font-family:"Jura","Noto Sans Thai",ui-sans-serif,system-ui,sans-serif;
}

/* ---- dark variant (warm charcoal, brightened red) ------------------------ */
:root[data-theme="dark"]{
  --bg:#16140F; --panel:#221F18; --panel2:#201D16; --line:#332F26;
  --ink:#EAE4D6; --muted:#9B9486; --accent:#EE4B47;
  --good:#8FB07F; --bad:#D9745F; --warn:#D9A441;
}

/* ---- typography ---------------------------------------------------------- */
body{ font-family:"Jura","Noto Sans Thai",ui-sans-serif,system-ui,sans-serif; }
/* Remove UA blue/purple default; explicitly coloured links still win via specificity */
a{ color:inherit; }
/* Codes & figures: add class="mono" / class="num" to a cell to get the
   engineering-plate voice (Latin only — leave Thai cells unclassed). */
.mono,.num{ font-family:"IBM Plex Mono",ui-monospace,monospace; letter-spacing:.02em; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---- buttons: white on red, squared, tracked caps ------------------------ */
button{
  color:#fff; border-radius:var(--radius);
  font-family:"Jura","Noto Sans Thai",sans-serif; font-weight:600;
  letter-spacing:.03em;
}
button:hover{ filter:brightness(1.06); }
button.ghost{ color:var(--accent); background:transparent; }
button.ghost:hover{ background:var(--panel2); filter:none; }
button.danger{ color:var(--bad); background:transparent; }
button.danger:hover{ background:var(--panel2); filter:none; }

/* ---- inputs -------------------------------------------------------------- */
select,input,textarea{ border-radius:3px; background:var(--panel); }
select:focus,input:focus,textarea:focus{ border-color:var(--accent); }

/* ---- panel section labels (the annotation voice) ------------------------- */
.panel h2{ color:var(--muted); letter-spacing:.08em; }

/* ---- status pills -> brand status palette (kept Thai-safe; no mono) ------ */
.pill{ border-radius:3px; font-weight:600; }
.pill.on{  background:var(--panel); color:var(--good); border:1px solid var(--good); }
.pill.off{ background:var(--panel); color:var(--bad);  border:1px solid var(--bad); }
.pill.int{ background:var(--panel); color:#3F5A63;      border:1px solid #3F5A63; }
.pill.warn{ background:var(--panel); color:var(--warn); border:1px solid var(--warn); }
:root[data-theme="dark"] .pill.int{ color:#84A6B0; border-color:#84A6B0; }

/* ---- messages ------------------------------------------------------------ */
.msg.err{ background:var(--panel); border:1px solid var(--bad);  color:var(--bad); }
.msg.ok{  background:var(--panel); border:1px solid var(--good); color:var(--good); }

/* ---- the brand signature: a datum tick under the masthead ---------------- */
.header{ position:relative; }
.header::after{
  content:""; position:absolute; left:0; bottom:-10px;
  width:48px; height:3px; background:var(--accent);
}
