/* ============================================================================
   CLIENT DIS — Brand Stylesheet
   Source of truth: brand.md. Tokens here mirror tailwind.config.js theme tokens.
   Usable two ways:
     1) Standalone (this file alone styles the mockup), and
     2) Alongside the compiled Tailwind build in the PHP app (the :root tokens
        below should match tailwind.config.js `theme.extend.colors`).
   No external fonts / no CDN — self-host the font files in /assets/fonts.
   ============================================================================ */

/* ---- Self-hosted faces (drop real files in /assets/fonts; falls back gracefully) ---- */
/* @font-face { font-family:'ClientSerif'; src:url('fonts/client-serif.woff2') format('woff2'); font-weight:400 500; font-display:swap; }
   @font-face { font-family:'ClientSans';  src:url('fonts/client-sans.woff2')  format('woff2'); font-weight:400 600; font-display:swap; } */

/* ===========================  DESIGN TOKENS  =============================== */
:root {
  /* Palette (brand.md §2) */
  --ink:        #1A1714;
  --ink-soft:   #2A2622;
  --ivory:      #F7F4EF;
  --paper:      #FFFFFF;
  --stone:      #8A8178;
  --stone-line: #E3DDD3;
  --gold:       #B08D57;
  --gold-soft:  #EFE4D2;
  --risk-high:  #7A2E2E;
  --risk-med:   #9A7B3F;
  --success:    #3F5A45;

  /* Type (brand.md §3) */
  --font-serif: "ClientSerif","Cormorant Garamond",Garamond,Palatino,"Palatino Linotype",serif;
  --font-sans:  "ClientSans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Spacing base 8px (brand.md §4) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgba(26,23,20,.04), 0 6px 20px rgba(26,23,20,.05);
  --maxw: 1200px;
}

/* ===========================  RESET / BASE  =============================== */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ===========================  TYPOGRAPHY  ================================ */
.k-serif { font-family:var(--font-serif); }
.k-wordmark {
  font-family:var(--font-serif);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:500;
}
.k-page-title { font-family:var(--font-serif); font-weight:500; font-size:34px; line-height:1.15; margin:0; }
.k-section-title { font-family:var(--font-serif); font-weight:500; font-size:24px; line-height:1.2; margin:0; }
.k-fit-headline { font-family:var(--font-serif); font-weight:500; font-size:20px; color:var(--ink); margin:0; }
.k-label {
  font-size:12px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--stone); font-weight:500;
}
.k-meta { font-size:13px; color:var(--stone); }
.k-muted { color:var(--stone); }

/* ===========================  LAYOUT  ==================================== */
.k-shell { min-height:100vh; display:flex; flex-direction:column; }
.k-container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--space-6); }
.k-main { flex:1; padding:var(--space-12) 0 var(--space-16); }
.k-stack > * + * { margin-top:var(--space-4); }
.k-row { display:flex; align-items:center; gap:var(--space-3); }
.k-spread { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.k-divider { height:1px; background:var(--stone-line); border:0; margin:var(--space-8) 0; }

/* ===========================  NAV (dark)  =============================== */
.k-nav {
  background:var(--ink); color:var(--ivory);
  border-bottom:1px solid #322d28;
}
.k-nav .k-container { display:flex; align-items:center; justify-content:space-between; height:64px; }
.k-nav-links { display:flex; gap:var(--space-6); align-items:center; }
.k-nav-link {
  font-size:13px; letter-spacing:.04em; color:#CFC7BC;
  padding:6px 0; border-bottom:2px solid transparent;
  background:none; border-left:0; border-right:0; border-top:0;
}
.k-nav-link:hover { color:var(--ivory); }
.k-nav-link.is-active { color:var(--ivory); border-bottom-color:var(--gold); }
.k-nav-role { font-size:12px; color:#A79E92; }
.k-nav .k-wordmark { color:var(--ivory); font-size:20px; }

/* ===========================  BUTTONS  ================================== */
.k-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 var(--space-6);
  font-size:14px; letter-spacing:.02em; border-radius:var(--radius-sm);
  border:1px solid transparent; transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.k-btn--primary { background:var(--ink); color:var(--ivory); }
.k-btn--primary:hover { background:var(--ink-soft); }
.k-btn--gold { background:var(--gold); color:var(--ink); }
.k-btn--gold:hover { background:#9E7C49; }
.k-btn--ghost { background:transparent; color:var(--ink); border-color:var(--stone-line); }
.k-btn--ghost:hover { background:var(--ivory); border-color:var(--stone); }
.k-btn--sm { min-height:36px; padding:0 var(--space-4); font-size:13px; }
.k-btn--block { width:100%; }

/* ===========================  CARDS  =================================== */
.k-card {
  background:var(--paper); border:1px solid var(--stone-line);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:var(--space-6);
}
.k-card--flush { padding:0; overflow:hidden; }

/* ===========================  BADGES  ================================== */
.k-badge {
  display:inline-block; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; padding:3px 9px; border-radius:999px;
}
.k-badge--high { color:var(--risk-high); background:rgba(122,46,46,.08); }
.k-badge--med  { color:var(--risk-med);  background:rgba(154,123,63,.10); }
.k-badge--low  { color:var(--stone);     background:rgba(138,129,120,.10); }

/* ===========================  HUB GRID  =============================== */
.k-grid { display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media(min-width:640px){ .k-grid{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .k-grid{ grid-template-columns:repeat(3,1fr);} }
.k-tile { display:flex; flex-direction:column; }
.k-tile__img {
  aspect-ratio:3/4; background:linear-gradient(135deg,#EDE7DD,#DED6C8);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.k-tile__img .k-wordmark { color:#C5BBAC; font-size:18px; }
.k-tile__badge { position:absolute; top:12px; left:12px; }
.k-tile__body { padding:var(--space-4); flex:1; display:flex; flex-direction:column; gap:6px; }
.k-tile__name { font-family:var(--font-serif); font-size:18px; font-weight:500; }
.k-tile__sku { font-size:12px; color:var(--stone); letter-spacing:.04em; }

/* ===========================  FILTERS / SEARCH  ====================== */
.k-toolbar { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.k-input, .k-select {
  font-family:var(--font-sans); font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--stone-line);
  border-radius:var(--radius-sm); min-height:44px; padding:0 var(--space-4);
}
.k-input:focus, .k-select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,87,.18); }
.k-search { flex:1; min-width:200px; }

/* ===========================  DETAIL  ================================ */
.k-detail { display:grid; gap:var(--space-12); grid-template-columns:1fr; }
@media(min-width:900px){ .k-detail{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);} }
.k-gallery__main {
  aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,#EDE7DD,#DED6C8);
  display:flex; align-items:center; justify-content:center;
}
.k-gallery__main .k-wordmark { color:#C5BBAC; font-size:26px; }
.k-thumbs { display:flex; gap:var(--space-2); margin-top:var(--space-3); }
.k-thumb {
  flex:1; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
  background:linear-gradient(135deg,#EDE7DD,#DED6C8); border:1px solid transparent;
  padding:0; position:relative;
}
.k-thumb.is-active { border-color:var(--gold); box-shadow:0 2px 0 var(--gold); }
.k-thumb span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:#B7AD9D; text-transform:uppercase; letter-spacing:.06em; }

.k-points { list-style:none; margin:var(--space-4) 0 0; padding:0; }
.k-points li { position:relative; padding-left:var(--space-6); margin-bottom:10px; }
.k-points li::before { content:""; position:absolute; left:0; top:.7em; width:14px; height:1px; background:var(--gold); }

/* Counterintuitive callout (brand.md §5) */
.k-callout {
  background:var(--gold-soft); border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:var(--space-4) var(--space-4) var(--space-4) var(--space-6);
}
.k-callout__label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8A6A3A; font-weight:600; }
.k-callout p { margin:6px 0 0; font-size:14px; }

.k-stat-row { display:flex; gap:var(--space-8); flex-wrap:wrap; }
.k-stat .k-label { display:block; margin-bottom:2px; }
.k-stat strong { font-family:var(--font-serif); font-weight:500; font-size:18px; }

/* Sticky mobile action bar (brand.md §7) */
.k-actionbar { display:flex; gap:var(--space-3); }
@media(max-width:899px){
  .k-actionbar{
    position:sticky; bottom:0; background:var(--ivory);
    padding:var(--space-3) 0; border-top:1px solid var(--stone-line);
    z-index:20;
  }
}

/* ===========================  TABLE (List.js)  ====================== */
.k-table { width:100%; border-collapse:collapse; background:var(--paper); }
.k-table th, .k-table td { text-align:left; padding:14px var(--space-4); border-bottom:1px solid var(--stone-line); font-size:14px; }
.k-table th {
  font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--stone);
  font-weight:600; cursor:pointer; user-select:none;
}
.k-table th.is-sorted { color:var(--gold); }
.k-table tr:last-child td { border-bottom:0; }
.k-sort:after { content:"↕"; margin-left:6px; opacity:.4; font-size:11px; }
.k-sort.asc:after { content:"↑"; opacity:1; color:var(--gold); }
.k-sort.desc:after{ content:"↓"; opacity:1; color:var(--gold); }

/* ===========================  STARS  ============================== */
.k-stars { display:inline-flex; gap:2px; color:var(--stone-line); }
.k-stars .on { color:var(--gold); }

/* ===========================  FORMS  ============================= */
.k-field { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-4); }
.k-field textarea.k-input { min-height:96px; padding:12px var(--space-4); resize:vertical; }
.k-checkline { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px; }

/* ===========================  KPI CARDS  ========================= */
.k-kpis { display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr); }
@media(min-width:900px){ .k-kpis{ grid-template-columns:repeat(4,1fr);} }
.k-kpi strong { display:block; font-family:var(--font-serif); font-size:30px; font-weight:500; line-height:1; }
.k-kpi .k-label { margin-top:8px; }

/* ===========================  LOGIN (dark)  ===================== */
.k-login { min-height:100vh; background:var(--ink); color:var(--ivory); display:flex; align-items:center; justify-content:center; padding:var(--space-6); }
.k-login__panel { width:100%; max-width:420px; text-align:center; }
.k-login__rule { width:48px; height:2px; background:var(--gold); margin:var(--space-6) auto; border:0; }
.k-login__eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.k-role-grid { display:grid; gap:var(--space-3); grid-template-columns:1fr 1fr; margin-top:var(--space-8); }
.k-role {
  background:transparent; border:1px solid #3A352F; color:var(--ivory);
  border-radius:var(--radius-sm); padding:var(--space-4); min-height:64px; text-align:left;
  transition:border-color .15s, background .15s;
}
.k-role:hover { border-color:var(--gold); }
.k-role.is-active { border-color:var(--gold); background:#221E1A; }
.k-role small { display:block; color:#A79E92; font-size:12px; }

/* ===========================  MODAL  =========================== */
.k-modal-backdrop { position:fixed; inset:0; background:rgba(26,23,20,.55); display:flex; align-items:center; justify-content:center; padding:var(--space-4); z-index:60; }
.k-modal { background:var(--paper); border-radius:var(--radius); max-width:520px; width:100%; padding:var(--space-8); box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:90vh; overflow:auto; }

/* ===========================  TOAST  ========================== */
.k-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--ivory); padding:12px 20px; border-radius:var(--radius-sm); font-size:14px; box-shadow:0 8px 30px rgba(0,0,0,.3); z-index:80; }

/* ===========================  A11Y / MOTION  ================= */
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* utility */
.k-hidden{ display:none !important; }
.k-mt-2{margin-top:var(--space-2);} .k-mt-4{margin-top:var(--space-4);} .k-mt-6{margin-top:var(--space-6);} .k-mt-8{margin-top:var(--space-8);}
.k-mb-2{margin-bottom:var(--space-2);} .k-mb-4{margin-bottom:var(--space-4);} .k-mb-6{margin-bottom:var(--space-6);}

/* ===========================  PRINT (PDF action)  ================ */
@media print {
  .k-nav, .k-actionbar, #viewToggle, .k-toolbar, #pdfBtn,
  .k-modal-backdrop, .k-toast { display:none !important; }
  body { background:#fff; }
  .k-main { padding:0; }
  .k-card { box-shadow:none; border-color:#ccc; }
  a[href^="/"] { text-decoration:none; color:inherit; }
}

/* ===========================  BRAND LOGO  ==================== */
/* Source webp is 700x350 with dark padding around a 184x40 wordmark. */
/* Login: crop to the wordmark at 1:1. */
.k-login__logo{ display:block; margin:0 auto; width:184px; height:40px;
  object-fit:none; object-position:-264px -156px; }
/* Nav: same crop scaled to .652 (184x40 -> 120x26). */
.k-nav__logo{ display:block; position:relative; width:120px; height:26px; overflow:hidden; }
.k-nav__logo img{ position:absolute; left:-172px; top:-102px; width:457px; max-width:none; }

/* ===========================  LOGIN "WHY" LINK  ============== */
.k-login__why{ display:inline-block; margin-top:var(--space-6); color:var(--gold);
  font-size:13px; letter-spacing:.06em; border-bottom:1px solid transparent; }
.k-login__why:hover{ border-bottom-color:var(--gold); }

/* ===========================  WHY / MARKETING PAGE  ========= */
.k-hero{ background:var(--ink); color:var(--ivory); padding:var(--space-16) 0 var(--space-12); text-align:center; }
.k-hero .k-page-title{ font-size:40px; line-height:1.1; margin:var(--space-4) 0 0; }
.k-hero__lead{ color:#C7BFB4; max-width:640px; margin:var(--space-6) auto 0; font-size:17px; line-height:1.6; }
.k-eyebrow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.k-section{ padding:var(--space-12) 0; }
.k-section + .k-section{ border-top:1px solid var(--stone-line); }
.k-lead{ font-size:18px; line-height:1.7; max-width:760px; }
.k-feature__label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.k-feature h3{ font-family:var(--font-serif); font-weight:500; font-size:20px; margin:8px 0 6px; }
.k-feature p{ margin:0; color:var(--ink); font-size:14px; line-height:1.6; }
.k-numbered{ list-style:none; counter-reset:n; margin:var(--space-4) 0 0; padding:0; max-width:820px; }
.k-numbered li{ counter-increment:n; position:relative; padding:0 0 var(--space-4) var(--space-12); margin-bottom:var(--space-4); border-bottom:1px solid var(--stone-line); }
.k-numbered li:last-child{ border-bottom:0; }
.k-numbered li::before{ content:counter(n,decimal-leading-zero); position:absolute; left:0; top:0;
  font-family:var(--font-serif); font-size:24px; color:var(--gold); }
.k-numbered strong{ font-weight:600; }

/* ===========================  TASK QUEUE (admin)  =========== */
.k-task__title{ font-family:var(--font-serif); font-size:18px; font-weight:500; }
.k-select--sm{ min-height:34px; padding:0 10px; font-size:13px; }
.k-tstatus{ border-radius:999px; }
.k-tstatus--pending{ color:var(--stone); background:rgba(138,129,120,.12); }
.k-tstatus--working{ color:#7A5C25; background:var(--gold-soft); }
.k-tstatus--working::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--gold); margin-right:6px; vertical-align:middle; animation:k-pulse 1s infinite; }
.k-tstatus--completed{ color:var(--success); background:rgba(63,90,69,.12); }
.k-tstatus--rejected{ color:var(--risk-high); background:rgba(122,46,46,.10); }
@keyframes k-pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
@media(prefers-reduced-motion:reduce){ .k-tstatus--working::before{ animation:none; } }

/* ===========================  ANALYTICS (refined)  ========= */
/* KPI cards — fix label/meta run-on; clean metric stack. */
.k-kpi{ display:flex; flex-direction:column; align-items:flex-start; }
.k-kpi strong{ display:block; font-family:var(--font-serif); font-size:32px; font-weight:500; line-height:1; }
.k-kpi .k-label{ display:block; margin-top:10px; }
.k-kpi .k-meta{ display:block; margin-top:4px; }

/* Horizontal bar chart (server-rendered, crisp text). */
.k-bars{ display:flex; flex-direction:column; }
.k-bar-row{ display:grid; grid-template-columns:130px 1fr 52px; align-items:center; gap:var(--space-4); height:34px; }
.k-bar-label{ font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-bar-track{ position:relative; height:12px; background:var(--stone-line); border-radius:999px; }
.k-bar-fill{ position:absolute; left:0; top:0; height:100%; border-radius:999px; background:var(--gold); transition:width .4s ease; }
.k-bar-fill--good{ background:var(--success); }
.k-bar-fill--over{ background:var(--risk-high); }
.k-bar-base{ position:absolute; top:-5px; bottom:-5px; width:0; border-left:1px dashed var(--stone); }
.k-bar-val{ font-size:13px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
.k-bar-zero .k-bar-val{ color:var(--stone); font-weight:500; }

/* Weekly trend — column chart. */
.k-cols{ display:flex; align-items:flex-end; gap:var(--space-2); height:170px; padding-top:20px; }
.k-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
.k-col-bar{ width:60%; max-width:48px; background:var(--gold); border-radius:5px 5px 0 0; min-height:3px; position:relative; transition:height .4s ease; }
.k-col-val{ font-size:12px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.k-col-label{ font-size:12px; color:var(--stone); }

/* ===========================  LIST.JS PAGINATION  ========== */
.k-pagination-wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-3); padding:var(--space-4) var(--space-6); border-top:1px solid var(--stone-line); }
.pagination{ list-style:none; display:flex; gap:6px; margin:0; padding:0; }
.pagination li a, .pagination li .page{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px;
  padding:0 8px; font-size:13px; color:var(--ink); border:1px solid var(--stone-line);
  border-radius:var(--radius-sm); cursor:pointer; user-select:none; background:var(--paper); }
.pagination li a:hover{ border-color:var(--stone); }
.pagination li.active a, .pagination li.active .page{
  background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:600; }
.pagination li.disabled a{ opacity:.4; pointer-events:none; }

/* Hub tile photo (uploaded image via /img proxy; SVG placeholder when absent) */
.k-tile__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }