/*
  MandalaMine ERP — PHASE 1: Design System & UI Cleanup
  File: mandalamine-phase1-ds.css
  Scope: ADDITIVE. Every rule is scoped to body.mmd-v2, so removing the
         <link> in erp_v3.html fully reverts the app — no markup/JS/DB change.
  Goal: make the BASE ERP components (.kc/.kv/.tbl/.btn/.pill/.fg/.cd) read as
        ONE premium navy+gold system instead of the old cyan #00d4ff accent.
  Targets REAL existing classes (see erp_assets/001_base.css). No new markup.

  Brand tokens reused from the V2 layer (defined when body.mmd-v2):
    --mmd2-gold  #C99A2E   --mmd2-gold-2 #E2BE69
    --mmd2-green #34d399    --mmd2-orange #fb923c   --mmd2-red #f87171
*/

/* ============================================================
   0. DESIGN TOKENS (8px spacing, radius 12–16, soft shadow)
   Brand accent map: kill cyan, adopt gold. Local aliases keep
   this file self-documenting and easy to retune.
   ============================================================ */
body.mmd-v2 {
  --ds-accent: var(--mmd2-gold, #C99A2E);
  --ds-accent-2: var(--mmd2-gold-2, #E2BE69);
  --ds-ok: #34d399;
  --ds-warn: #f5b14a;
  --ds-danger: #f87171;
  --ds-info: #5bb4e6;
  --ds-surface: #0e1a2c;
  --ds-surface-2: #122438;
  --ds-line: rgba(201,154,46,.16);
  --ds-line-soft: rgba(255,255,255,.07);
  --ds-r-sm: 12px;
  --ds-r-md: 14px;
  --ds-r-lg: 16px;
  --ds-sp-1: 8px;
  --ds-sp-2: 16px;
  --ds-sp-3: 24px;
  --ds-shadow: 0 10px 30px rgba(4,12,22,.30);
  --ds-shadow-soft: 0 4px 16px rgba(4,12,22,.22);
}

/* ============================================================
   1. KPI CARDS  (.kg grid / .kc card / .kl label / .kv value / .ku unit)
   Also cockpit .ck-kpi. Premium surface, gold value, hover lift,
   gold top-accent. Badge (.pill) inside a card sits top-right.
   ============================================================ */
body.mmd-v2 .kg {
  gap: var(--ds-sp-2);
}
body.mmd-v2 .kc {
  position: relative;
  background: linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface));
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  padding: 16px 18px;
  box-shadow: var(--ds-shadow-soft);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.mmd-v2 .kc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-accent-2), var(--ds-accent));
  opacity: .9;
}
body.mmd-v2 .kc:hover {
  transform: translateY(-2px);
  border-color: var(--ds-accent);
  box-shadow: var(--ds-shadow);
}
body.mmd-v2 .kl {
  color: #aebccd;
  letter-spacing: .04em;
  font-size: 11px;
}
body.mmd-v2 .kv {
  /* was cyan #00d4ff — unify to brand gold */
  color: var(--ds-accent-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
body.mmd-v2 .ku { color: #8fa0b3; }
/* a status pill placed inside a KPI card floats to the corner */
body.mmd-v2 .kc .pill {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Cockpit KPI cards — align accent + hover with the rest */
body.mmd-v2 .ck-kpi {
  border-radius: var(--ds-r-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
body.mmd-v2 .ck-kpi:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-soft); }

/* ============================================================
   2. CARDS / PANELS  (.cd  + .cd-h / .cd-t / .cd-sub)
   ============================================================ */
body.mmd-v2 .cd {
  background: linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface));
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-shadow-soft);
}
body.mmd-v2 .cd:hover { border-color: var(--ds-line); }
body.mmd-v2 .cd-t { color: #eef3f9; letter-spacing: -.01em; }
body.mmd-v2 .cd-sub { color: #8fa0b3; }

/* ============================================================
   3. DATA TABLES  (.tw wrapper / .tbl table)
   Rounded bordered wrapper, sticky navy header, zebra + hover,
   tabular numerics. Status pills inside tables polished in §5.
   ============================================================ */
body.mmd-v2 .tw {
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-r-md);
  overflow: auto;
  background: var(--ds-surface);
  -webkit-overflow-scrolling: touch;
}
body.mmd-v2 .tbl { border-collapse: separate; border-spacing: 0; }
body.mmd-v2 .tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #0d2138, #0a1b2e);
  color: var(--ds-accent-2);
  border-bottom: 1px solid var(--ds-line);
  letter-spacing: .05em;
  white-space: nowrap;
}
body.mmd-v2 .tbl tbody tr { transition: background .12s ease; }
body.mmd-v2 .tbl tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
body.mmd-v2 .tbl tbody tr:hover td { background: rgba(201,154,46,.07); }
body.mmd-v2 .tbl td { border-bottom: 1px solid rgba(255,255,255,.04); }
body.mmd-v2 .tbl tbody tr:last-child td { border-bottom: 0; }
body.mmd-v2 .tbl td:not([class]) { font-variant-numeric: tabular-nums; }
/* placeholder rows (empty/loading) use colspan — center + soften.
   Inline color/padding on the cell still win; we add what they don't set. */
body.mmd-v2 .tbl td[colspan] {
  text-align: center;
  font-style: italic;
  letter-spacing: .02em;
}

/* ============================================================
   4. BUTTONS  (.btn + .btp primary / .btd secondary / .btw warning
                / .btr2 danger / .btg success)
   Consistent radius, weight, focus ring; gold primary (was cyan).
   ============================================================ */
body.mmd-v2 .btn {
  border-radius: var(--ds-r-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}
body.mmd-v2 .btn:active { transform: translateY(1px); }
body.mmd-v2 .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201,154,46,.30); }
/* primary: gold gradient on dark ink text (replaces cyan) */
body.mmd-v2 .btn.btp {
  background: linear-gradient(180deg, var(--ds-accent-2), var(--ds-accent));
  border-color: var(--ds-accent);
  color: #1b1405;
}
body.mmd-v2 .btn.btp:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(201,154,46,.28); }
/* secondary */
body.mmd-v2 .btn.btd {
  background: rgba(255,255,255,.05);
  border-color: var(--ds-line-soft);
  color: #d7e0ee;
}
body.mmd-v2 .btn.btd:hover { background: rgba(255,255,255,.09); border-color: var(--ds-line); }
/* warning / danger / success — keep semantics, polish tone */
body.mmd-v2 .btn.btw  { background: rgba(245,177,74,.16); border-color: rgba(245,177,74,.34); color: #f5b14a; }
body.mmd-v2 .btn.btr2 { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.34); color: #f87171; }
body.mmd-v2 .btn.btg  { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.34); color: #34d399; }
body.mmd-v2 .btn.btw:hover  { background: rgba(245,177,74,.24); }
body.mmd-v2 .btn.btr2:hover { background: rgba(248,113,113,.24); }
body.mmd-v2 .btn.btg:hover  { background: rgba(52,211,153,.24); }

/* ============================================================
   5. STATUS PILLS  (.pill + pok/pw/pe/pd/pi/pg)
   Uppercase, consistent weight; tones aligned to the token set.
   Maps Kevin's states: OK=pok, Tinjau=pw, Tahan/Exception=pe,
   Approved=pok, Pending=pw, Rejected/Expired=pe, Draft=pg, Info=pi.
   ============================================================ */
body.mmd-v2 .pill {
  border-radius: 999px;
  padding: 3px 11px;
  font-weight: 700;
  letter-spacing: .03em;
  border: 1px solid transparent;
}
body.mmd-v2 .pill.pok { background: rgba(52,211,153,.15);  color: #4ade8c; border-color: rgba(52,211,153,.30); }
body.mmd-v2 .pill.pw  { background: rgba(245,177,74,.15);  color: #f5b14a; border-color: rgba(245,177,74,.30); }
body.mmd-v2 .pill.pe,
body.mmd-v2 .pill.pd  { background: rgba(248,113,113,.15); color: #f87171; border-color: rgba(248,113,113,.30); }
body.mmd-v2 .pill.pi  { background: rgba(91,180,230,.15);  color: #5bb4e6; border-color: rgba(91,180,230,.30); }
body.mmd-v2 .pill.pg  { background: rgba(148,163,184,.15); color: #aab6c6; border-color: rgba(148,163,184,.28); }

/* ============================================================
   6. FORMS  (.frow grid / .fg group / label / .rq required / inputs)
   8px rhythm, clearer labels, gold focus ring (was cyan).
   ============================================================ */
body.mmd-v2 .frow { gap: var(--ds-sp-2); }
body.mmd-v2 .fg label {
  color: #aebccd;
  letter-spacing: .04em;
  margin-bottom: var(--ds-sp-1);
}
body.mmd-v2 .fg .rq { color: var(--ds-danger); }
body.mmd-v2 .fg input,
body.mmd-v2 .fg select,
body.mmd-v2 .fg textarea,
body.mmd-v2 .sfm-fg input,
body.mmd-v2 .sfm-fg select,
body.mmd-v2 .sfm-fg textarea {
  border-radius: var(--ds-r-sm);
  border-color: var(--ds-line-soft);
  transition: border-color .12s ease, box-shadow .12s ease;
}
body.mmd-v2 .fg input:focus,
body.mmd-v2 .fg select:focus,
body.mmd-v2 .fg textarea:focus,
body.mmd-v2 .sfm-fg input:focus,
body.mmd-v2 .sfm-fg select:focus,
body.mmd-v2 .sfm-fg textarea:focus {
  outline: none;
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px rgba(201,154,46,.18);
}

/* ============================================================
   7. SUB-TAB NAV  (.sbn / .sbt / .sbt.active) — active was cyan
   ============================================================ */
body.mmd-v2 .sbt.active {
  color: var(--ds-accent-2);
  border-bottom-color: var(--ds-accent);
}
body.mmd-v2 .sbt:hover { color: #e6edf6; }

/* ============================================================
   8. EMPTY / LOADING / PLACEHOLDER STATES  (.es / .ch)
   ============================================================ */
body.mmd-v2 .es { color: #93a4b8; }
body.mmd-v2 .es h3 { color: #d7e0ee; }
body.mmd-v2 .ch {
  border: 1px dashed var(--ds-line);
  color: #8fa0b3;
  background: rgba(255,255,255,.02);
  border-radius: var(--ds-r-md);
}

/* ============================================================
   9. TOAST — recolor success/info to brand (kept semantic)
   ============================================================ */
body.mmd-v2 #toast { border-radius: var(--ds-r-sm); }
body.mmd-v2 #toast.to-ok   { background: #2fbf71; }
body.mmd-v2 #toast.to-err  { background: #ef5d6b; }
body.mmd-v2 #toast.to-warn { background: #e0a64a; }

/* ============================================================
   10. RESPONSIVE GUARDRAILS — no horizontal overflow at 390px
   (tables already convert to cards via the V2 JS; this protects
    the KPI grid + form rows on small screens.)
   ============================================================ */
@media (max-width: 560px) {
  body.mmd-v2 .kg { gap: 10px; }
  body.mmd-v2 .kc { padding: 13px 14px; }
  body.mmd-v2 .frow { gap: 12px; }
}