/* ============================================================
   Al Bayader Supply Chain — design foundations
   Layered AFTER bootstrap + base.html inline styles, so rules
   here win ties. Tokens + shared components; migrate pages to
   these instead of per-template styles.
   ============================================================ */
:root{
  --ink:#1B1D1A; --ink-2:#6B6E66; --ink-3:#9A9D93;
  --bg:#F4F4F1; --surface:#FFFFFF; --line:#E5E3DC; --line-soft:#ECEAE4;
  --forest:#0F2E1D;
  --crit:#B3261E; --crit-soft:#FBEAE8; --crit-ink:#9A2019;
  --warn:#B45309; --warn-soft:#FBEFDC; --warn-ink:#8F4308;
  --ok:#15803D;   --ok-soft:#E7F3EB;   --ok-ink:#116232;
  --info:#255BC4; --info-soft:#E9EFFC; --info-ink:#1D4AA8;
  --mut:#8A8D83;  --mut-soft:#F1F0EB;  --mut-ink:#5B5E55;
}

body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono, code, kbd { font-family:"IBM Plex Mono","SF Mono",Consolas,monospace; }
table { font-variant-numeric:tabular-nums; }

/* ---- Navbar: deep forest; count chips neutral (red is reserved
       for genuinely-bad signals like failed feeds) ---- */
.navbar-brand-bayader { background-color:var(--forest) !important; }
.navbar-brand-bayader .badge.bg-danger {
  background:rgba(255,255,255,.18) !important; color:#fff; font-weight:600;
}

/* ---- Badge families: .st-* solid = the state of a thing;
       .tag-* soft = metrics and qualifiers. Use these two, nothing else. ---- */
.st { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.05em;
      padding:3px 8px; border-radius:5px; color:#fff; text-transform:uppercase; white-space:nowrap; }
.st-crit{background:var(--crit)} .st-warn{background:var(--warn)} .st-ok{background:var(--ok)}
.st-info{background:var(--info)} .st-mut{background:var(--mut)}

.tag { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600;
       padding:2.5px 10px; border-radius:99px; white-space:nowrap; }
.tag-crit{background:var(--crit-soft);color:var(--crit-ink)}
.tag-warn{background:var(--warn-soft);color:var(--warn-ink)}
.tag-ok{background:var(--ok-soft);color:var(--ok-ink)}
.tag-info{background:var(--info-soft);color:var(--info-ink)}
.tag-mut{background:var(--mut-soft);color:var(--mut-ink)}

/* ---- Stat tile ---- */
.stat-tile { background:var(--surface); border:1px solid var(--line); border-radius:10px;
             padding:14px 16px; box-shadow:0 1px 2px rgba(20,24,18,.04); }
.stat-tile .lab { font-size:.66rem; font-weight:700; letter-spacing:.08em;
                  text-transform:uppercase; color:var(--ink-3); }
.stat-tile .num { font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin-top:2px;
                  font-variant-numeric:tabular-nums; color:var(--ink); }
.stat-tile .note { font-size:.72rem; color:var(--ink-2); margin-top:2px; }

/* ---- Card header label (pairs with .brand-header neutral treatment) ---- */
.ctitle { font-size:.69rem; font-weight:700; letter-spacing:.09em;
          text-transform:uppercase; color:var(--ink-2); }

/* ---- Underline tabs ---- */
.utabs { display:flex; gap:2px; border-bottom:1px solid var(--line); }
.utabs .utab { padding:9px 14px; font-size:.82rem; font-weight:600; color:var(--ink-2);
               border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
.utabs .utab:hover { color:var(--ink); }
.utabs .utab.on { color:var(--forest); border-bottom-color:var(--ok); }


/* ---- Shared list-page kit (order proposals / procurement requests) ---- */
.kchip { background:#fff; border:1px solid #DAD8D0; border-radius:99px; display:inline-flex;
         align-items:center; gap:7px; padding:4px 12px; font-size:.8rem; color:#33362F;
         text-decoration:none; }
a.kchip:hover { border-color:var(--ok); color:var(--ok-ink); }
.kchip.on { box-shadow:0 0 0 2px #15803d40; border-color:var(--ok); }
.kchip b { font-variant-numeric:tabular-nums; font-size:.85rem; }
.kchip .dot { width:8px; height:8px; border-radius:99px; display:inline-block; flex-shrink:0; }

.lst-wrap { background:#fff; border:1px solid var(--line); border-radius:10px;
  overflow:auto; box-shadow:0 1px 2px rgba(20,24,18,.04); }
.lst-table { font-size:12.8px; width:100%; border-collapse:collapse; background:#fff; }
.lst-table thead th { background:#FBFAF7; border-bottom:2px solid #DAD8D0;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-2); padding:8px 12px; text-align:left; }
.lst-table tbody td { padding:8px 12px; border-bottom:1px solid #E9E7E1; vertical-align:middle; }
.lst-table th + th, .lst-table td + td { border-left:1px solid #F4F2EE; }
.lst-table tbody tr:last-child td { border-bottom:0; }
.lst-table tbody tr:hover td { background:#F6F8F4; }
.lst-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.lst-table a.id-link { font-family:"IBM Plex Mono","SF Mono",Consolas,monospace; font-weight:600;
  color:var(--ok); text-decoration:none; }
.lst-table a.id-link:hover { text-decoration:underline; }

/* Lifecycle dots: filled = passed, ring = current, red = cancelled */
.flow-dots { display:inline-flex; align-items:center; vertical-align:middle; margin-left:7px; }
.flow-dots .fd { width:6px; height:6px; border-radius:99px; background:#E5E3DC; flex-shrink:0; }
.flow-dots .fc { width:8px; height:2px; background:#E5E3DC; flex-shrink:0; }
.flow-dots .fd.on { background:var(--ok); }
.flow-dots .fc.on { background:var(--ok); }
.flow-dots .fd.now { width:8px; height:8px; background:#fff; border:2px solid var(--ok); }
.flow-dots .fd.dead { background:var(--crit); }

.avx { width:18px; height:18px; border-radius:99px; background:var(--ok-soft); color:var(--ok-ink);
  font-size:8.5px; font-weight:700; display:inline-flex; align-items:center;
  justify-content:center; text-transform:uppercase; flex-shrink:0; }


/* ---- Pretty tooltips (replaces native title bubbles app-wide) ---- */
.ab-tip {
  position: fixed; z-index: 3000; display: none; max-width: 380px;
  background: #1B1D1A; color: #F1F1EE;
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px; line-height: 1.5; font-weight: 400;
  letter-spacing: 0; text-transform: none; text-align: left;
  padding: 8px 12px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  white-space: pre-line; pointer-events: none;
}

/* ---- charts -------------------------------------------------------------
   Axes, gridlines and bars shared by the FG and RM item pages. The FG page
   still carries its own copy inline, which wins the cascade, so promoting
   these here changes nothing there — it just stops the RM page inventing a
   second visual language for the same chart. Values match FG's deliberately. */
.sales-bar          { fill:#15803d; }
.sales-bar:hover    { fill:#166534; }
.sales-bar-old      { fill:#cbd5e1; }   /* outside the WMA12 window: context only */
.sales-bar-old:hover{ fill:#94a3b8; }
.sales-bar-ramadan  { fill:#ea580c; }
.sales-bar-ramadan:hover { fill:#c2410c; }
.sales-axis         { stroke:#9ca3af; stroke-width:0.8; }
.sales-grid         { stroke:#e5e7eb; stroke-width:0.5; stroke-dasharray:2 2; }
.sales-axis-label   { font-size:10px; fill:#6b7280; }
.sales-value-label  { font-size:9px;  fill:#374151; font-weight:600; }

/* projected on-hand curve */
.proj-line     { fill:none; stroke:#15803d; stroke-width:1.6; }
.proj-area     { fill:#15803d; fill-opacity:0.10; stroke:none; }
.proj-stockout { stroke:#b91c1c; stroke-width:1; stroke-dasharray:3 2; }