/* ==========================================================================
   COSANI 2.0 — tech-contemporary theme layer
   Loaded AFTER cosani-plm.css and apple-typography.css; overrides only.
   Direction (GC, 2026-07-28): ApparelMagic's STRUCTURE (flat panels, stat
   cards, light dense grids, quiet toolbars) executed Apple-style — gray /
   black / navy palette, red & green reserved for alerts and status, gold
   demoted to a small brand accent. NO blue hero color.
   To revert: remove the two <link> tags from cosani-plm-prototype.html.
   ========================================================================== */

:root{
  --bg:#F5F5F7;            /* Apple canvas gray */
  --card:#FFFFFF;
  --alt:#EFEFF1;
  --cream:#FBFBFD;
  --goldbg:#F0F0F2;        /* former gold tint areas go neutral */
  --line:#D9D9DE;          /* hairline */
  --ink:#1D1D1F;           /* near-black */
  --muted:#6E6E73;
  --navy:#101A2E;          /* deep navy = primary/brand */
  --navy2:#1E2C4A;
  --gold:#A98436;          /* muted brass, small accents only */
  --gold-light:#C9B37E;
  --ok:#1F7A3D;            /* green = good / delivered / approved */
  --bad:#C81E1E;           /* red = alert / late / rejected */
  --warn:#9A6700;
  --blue:#31517F;          /* links lean navy, not AM blue */
}

body{background:var(--bg);color:var(--ink)}

/* ---- surfaces -------------------------------------------------------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(16,26,46,.05);
}
.card h3{color:var(--ink);font-weight:700;letter-spacing:-.01em}

/* ---- top bar: flat deep navy, no clutter ----------------------------- */
.topbar{background:var(--navy);height:60px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .search .global-search-field{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
}
.topbar .search .global-search-field:focus{border-color:rgba(255,255,255,.35);outline:none}

/* ---- sidebar: white rail, pill highlight ----------------------------- */
.navsec{color:#9A9AA0;font-weight:600;letter-spacing:.16em}
.navitem{
  color:#3A3A3F;font-weight:600;border-left:none;
  margin:1px 8px;width:calc(100% - 16px);border-radius:9px;min-height:40px;padding:9px 12px;
}
.navitem:hover{background:var(--alt)}
.navitem.active{background:rgba(16,26,46,.07);border-left:none;color:var(--navy);font-weight:700}
.navitem .ic{color:#8A8A90}
.navitem.active .ic{color:var(--navy)}

/* ---- page headings ---------------------------------------------------- */
.pagehead h1{font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.pagehead .sub{color:var(--muted)}

/* ---- buttons: navy primary, quiet secondary, gold retired ------------ */
.btn{border-radius:9px;font-weight:600;letter-spacing:.005em;background:var(--navy)}
.btn:hover{background:var(--navy2)}
.btn.gold{background:var(--navy);color:#fff}          /* primary actions */
.btn.gold:hover{background:var(--navy2)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--alt)}

/* ---- inputs ----------------------------------------------------------- */
input.fi,select.fi,textarea.fi{
  border:1px solid var(--line);border-radius:9px;background:#fff;
}
input.fi:focus,select.fi:focus,textarea.fi:focus{
  border-color:var(--navy);outline:2px solid rgba(16,26,46,.12);outline-offset:0;
}
.fl{color:var(--muted);font-weight:600;letter-spacing:.06em}

/* ---- pills & badges: semantic color only ----------------------------- */
.pill{border-radius:99px;font-weight:650}
.badge{border-radius:99px}

/* ---- tables (generic): light AM-style grid --------------------------- */
table th{color:#4B4B52}
.card table thead tr,.card table tr:first-child th{background:var(--alt)}

/* ---- modal ------------------------------------------------------------ */
.modal-card,.modal .card{border-radius:16px}

/* ---- ws- grids (Wholesale / Buyer pages) pick vars up automatically;
       tighten their chrome to match ------------------------------------ */
.ws-wrap{border-radius:14px}
.ws-kpi{border-radius:14px}
.ws-kpi b{color:var(--ink);font-weight:700;letter-spacing:-.02em}
.ws-tab.on{border-bottom-color:var(--navy);color:var(--ink)}
table.ws-grid th{background:var(--alt);color:#4B4B52}
.ws-link{color:var(--blue)}
.ws-chip.submitted{background:#F4EDDA;color:#7A5B00;border-color:#E3D5AB}
.ws-chip.confirmed{background:#E4F2E8;color:var(--ok);border-color:#BFDCC9}
.ws-chip.shipped{background:#EAEDF3;color:var(--navy);border-color:#CBD2DE}
.ws-chip.canceled{background:#F9E5E5;color:var(--bad);border-color:#EBC4C4}

/* ---- scrollbars (WebKit): quiet -------------------------------------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C9C9CE;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}