/* Bismillah
   CAISi — "Apple" design language PREVIEW (owner-selected, 2026-07-16).
   Loaded AFTER brand.css on /registry only, as a live preview before the
   platform-wide rollout. Principles: near-white surfaces, hairline
   separators instead of boxes, ONE accent blue, quiet dot+word statuses,
   restrained type with tight tracking. Light theme only for the preview —
   the dark variant ships with the full rollout. */

:root{
  /* surfaces */
  --bg-0:#fbfbfd;                    /* page canvas — Apple near-white */
  --bg-1:#ffffff;
  --header-bg:rgba(251,251,253,0.85);
  --bg-2:#f5f5f7;
  --bg-3:#ececf0;
  --glass:rgba(0,0,0,0.025);
  --gb:rgba(60,60,67,0.14);          /* hairline */
  --divider:rgba(60,60,67,0.08);
  /* ONE accent */
  --blue:#0071e3;
  --teal:#0071e3;
  --grad:#0071e3;
  --accent-soft:rgba(0,113,227,0.08);
  --accent-border:rgba(0,113,227,0.28);
  --tab-active-bg:#ffffff; --tab-active-text:#0071e3;
  /* semantic colors — text-legible on light */
  --green:#248a3d; --amber:#c25705; --red:#d70015;
  --purple:#8944ab; --pink:#c6395f;
  /* text */
  --tp:#1d1d1f; --ts:#424245; --tm:#86868b;
  /* shape & motion */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',sans-serif;
  --rsm:8px; --rmd:12px; --rlg:14px;
  --sh:none;
  --tr:all 0.18s ease;
}

/* the light-mode grid decoration is a distraction — off */
body::before{display:none !important}

/* header: quieter title */
header h1{font-weight:700;letter-spacing:-0.3px}

/* KPI cards: flatter, tighter numerals, thin tick */
.card{box-shadow:none;border-color:var(--gb)}
.card .tick{height:2px;width:18px;margin-bottom:8px}
.card .v{font-weight:600;letter-spacing:-0.4px}
.card .l{text-transform:none;letter-spacing:0;font-size:10.5px}

/* tables: hairline rows, headerless-looking heads */
table{box-shadow:none;border:0.5px solid var(--gb)}
th{background:transparent;border-bottom:1px solid var(--gb);
   color:var(--tm);font-weight:500;letter-spacing:0.3px}
td{border-top:0.5px solid var(--divider)}
tr:hover td{background:var(--glass)}

/* statuses: quiet dot + word, no colored pill */
.badge{background:transparent !important;border:none;padding:1px 2px;
       font-weight:500;border-radius:0}
.b-gray{color:var(--tm)}

/* buttons: hairline secondary, pill primary in the single accent */
.btn{border-radius:8px;border-color:var(--gb);box-shadow:none}
.btn:hover{border-color:var(--accent-border);color:var(--blue)}
.btn-primary{background:#0071e3;border-color:#0071e3;border-radius:980px;
             font-weight:500}
.btn-primary:hover{background:#0077ed;color:#fff}
.btn-sm{border-radius:7px}

/* tabs: soft track, blue active */
.tabs{background:var(--bg-3);border-radius:11px}
.tab{border-radius:8px;font-weight:500}
.tab.active{box-shadow:0 1px 3px rgba(0,0,0,0.08)}

/* dialogs: soft corners, hairline */
dialog{border-radius:14px;border:0.5px solid var(--gb);
       box-shadow:0 20px 60px rgba(0,0,0,0.18)}

/* inputs */
input,select,textarea{border-radius:8px;border-color:var(--gb)}
input:focus,select:focus,textarea:focus{border-color:#0071e3;
  outline:none;box-shadow:0 0 0 3px rgba(0,113,227,0.15)}

/* links */
.link{color:#0071e3}

/* ── Apple dark theme (platform rollout) — loaded after brand.css, so this
   block outranks its dark values. macOS dark: elevated grays, brighter
   accent, hairlines that survive dark backgrounds. ─────────────────────── */
body[data-theme="dark"]{
  --bg-0:#161617;
  --bg-1:#1d1d1f;
  --header-bg:rgba(22,22,23,0.85);
  --bg-2:#2c2c2e;
  --bg-3:#3a3a3c;
  --glass:rgba(255,255,255,0.04);
  --gb:rgba(84,84,88,0.65);
  --divider:rgba(84,84,88,0.35);
  --blue:#0a84ff; --teal:#0a84ff; --grad:#0a84ff;
  --accent-soft:rgba(10,132,255,0.16);
  --accent-border:rgba(10,132,255,0.4);
  --tab-active-bg:#3a3a3c; --tab-active-text:#0a84ff;
  --green:#30d158; --amber:#ff9f0a; --red:#ff453a;
  --purple:#bf5af2; --pink:#ff375f;
  --tp:#f5f5f7; --ts:#d1d1d6; --tm:#8e8e93;
  --sh:none;
}
body[data-theme="dark"] .btn-primary{background:#0a84ff;border-color:#0a84ff}
body[data-theme="dark"] .b-green{background:transparent;color:#30d158}
body[data-theme="dark"] .b-amber{background:transparent;color:#ff9f0a}
body[data-theme="dark"] .b-red{background:transparent;color:#ff453a}
body[data-theme="dark"] .b-blue{background:transparent;color:#0a84ff}
body[data-theme="dark"] .b-purple{background:transparent;color:#bf5af2}
body[data-theme="dark"] .b-gray{background:transparent;color:#8e8e93}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] textarea:focus{border-color:#0a84ff;
  box-shadow:0 0 0 3px rgba(10,132,255,0.25)}