/* =====================================================================
   Jaihind Sales Cloud — design system
   Brand (from the Jaihind Group logo / jaihindgroup.in):
     red #A61C1C · amber #E8A020 · orange #FF7618 · gunmetal #565B60 · ink #15141C
   Principles: one restrained palette, a single spacing/type scale, generous
   whitespace, clear hierarchy, fully responsive (nothing overflows the page).
   ===================================================================== */
:root {
  --red:#A61C1C; --red-2:#8a1616; --amber:#E8A020; --orange:#FF7618;
  --gun:#565B60; --ink:#1b1c22; --muted:#6b7280;
  --bg:#f4f5f7; --surface:#ffffff; --line:#e8eaee; --line-2:#f0f1f4;
  --flame:linear-gradient(90deg,var(--amber),var(--orange) 45%,var(--red));
  --r-sm:8px; --r:12px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(20,20,28,.04),0 1px 3px rgba(20,20,28,.06);
  --sh-2:0 4px 16px rgba(20,20,28,.08);
  --nav-w:248px; --top-h:60px;
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 { color:var(--ink); font-weight:700; letter-spacing:-.01em; }
h4 { font-size:1.4rem; } h5 { font-size:1.1rem; } h6 { font-size:.95rem; }
a { color:var(--red); text-decoration:none; }
a:hover { color:var(--red-2); text-decoration:underline; }
.text-muted { color:var(--muted)!important; }
code { color:var(--gun); background:var(--line-2); padding:.05rem .3rem; border-radius:5px; font-size:.86em; }
.tnum, .val, .table td, .money { font-variant-numeric:tabular-nums; }

/* ---------- App shell ---------- */
.topbar {
  background:var(--surface); border-bottom:1px solid var(--line);
  min-height:var(--top-h); box-shadow:var(--sh-1); z-index:1030;
}
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--flame); }
.topbar .container-fluid { gap:.5rem; flex-wrap:nowrap; padding-inline:.75rem; }
.topbar .navbar-brand { display:flex; align-items:center; gap:.6rem; padding:0; margin:0; min-width:0; }
.topbar .brand-logo { height:36px; width:auto; flex:none; }
.topbar .brand-app { font-weight:800; font-size:1rem; line-height:1.05; color:var(--ink); white-space:nowrap; }
.topbar .brand-sub { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; }
.topbar .tb-actions { display:flex; align-items:center; gap:.5rem; margin-left:auto; flex:none; }
.topbar .tb-link { color:var(--gun); font-size:1.15rem; line-height:1; position:relative; text-decoration:none; }
.topbar .tb-user { color:var(--ink); font-weight:600; }
.topbar .tb-role { color:var(--muted); }
.hamburger { border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); width:40px; height:40px; display:none; align-items:center; justify-content:center; flex:none; }
.hamburger span { display:block; width:18px; height:2px; background:var(--gun); box-shadow:0 6px 0 var(--gun),0 -6px 0 var(--gun); }

.shell { display:flex; align-items:flex-start; }
.sidebar {
  width:var(--nav-w); flex:none; background:var(--surface);
  border-right:1px solid var(--line); min-height:calc(100vh - var(--top-h));
  position:sticky; top:var(--top-h); align-self:flex-start; max-height:calc(100vh - var(--top-h)); overflow-y:auto;
}
.sidebar .nav { padding:.6rem; }
.sidebar .nav-link {
  color:var(--gun); border-radius:var(--r-sm); padding:.55rem .7rem; font-size:.9rem;
  font-weight:500; display:flex; align-items:center; gap:.6rem; margin-bottom:1px;
  border-left:3px solid transparent; transition:background .12s,color .12s;
}
.sidebar .nav-link:hover { background:#fbeee3; color:var(--red); text-decoration:none; }
.sidebar .nav-link.active { background:linear-gradient(90deg,rgba(166,28,28,.09),rgba(232,160,32,.05)); color:var(--red); border-left-color:var(--red); font-weight:600; }
.sidebar .nav-link .ico { font-size:1rem; width:1.2rem; text-align:center; flex:none; }
.nav-section { font-size:.64rem; text-transform:uppercase; letter-spacing:.11em; color:#9aa0ab; padding:.7rem .8rem .25rem; font-weight:700; }
.content { flex:1 1 auto; min-width:0; padding:1.25rem; }
.content > h4:first-of-type, .page-title { margin-bottom:1rem; }
@media (min-width:1400px){ .content { padding:1.5rem 2rem; } }

/* mobile sidebar drawer */
.nav-backdrop { position:fixed; inset:0; background:rgba(15,15,20,.45); z-index:1035; display:none; }
@media (max-width:991.98px){
  .hamburger { display:flex; }
  .sidebar {
    position:fixed; top:0; left:0; height:100vh; max-height:100vh; width:270px; z-index:1040;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--sh-2);
  }
  body.nav-open .sidebar { transform:translateX(0); }
  body.nav-open .nav-backdrop { display:block; }
  .sidebar .sb-head { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border-bottom:1px solid var(--line); }
}
.sidebar .sb-head { display:none; }

/* ---------- Cards & KPIs ---------- */
.card { border:1px solid var(--line); box-shadow:var(--sh-1); border-radius:var(--r); background:var(--surface); }
.card .card-body { padding:1rem 1.15rem; }
.kpi { border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:var(--r); }
.kpi .val { font-size:clamp(1.15rem,4.4vw,1.55rem); font-weight:800; color:var(--ink); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.02em; }
.kpi .lbl { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-top:.15rem; }
.kpi.red{border-left-color:var(--red);} .kpi.amber{border-left-color:var(--amber);}
.kpi.orange{border-left-color:var(--orange);} .kpi.gun{border-left-color:var(--gun);}
.kpi-link{ text-decoration:none; color:inherit; display:block; }
.kpi-link:hover{ text-decoration:none; }
.kpi-link:hover .card{ box-shadow:var(--sh-2); transform:translateY(-1px); transition:.15s; }

/* ---------- Buttons ---------- */
.btn { border-radius:var(--r-sm); font-weight:600; font-size:.88rem; padding:.45rem .9rem; }
.btn-sm { padding:.3rem .6rem; font-size:.8rem; }
.btn-primary,.btn-warning { background:var(--red); border-color:var(--red); color:#fff; }
.btn-primary:hover,.btn-warning:hover,.btn-primary:focus,.btn-warning:focus { background:var(--red-2); border-color:var(--red-2); color:#fff; }
.btn-accent { background:var(--orange); border-color:var(--orange); color:#fff; }
.btn-accent:hover { background:#e8620d; border-color:#e8620d; color:#fff; }
.btn-outline-primary { color:var(--red); border-color:var(--red); }
.btn-outline-primary:hover { background:var(--red); border-color:var(--red); color:#fff; }
.btn-info { background:var(--gun); border-color:var(--gun); color:#fff; }
.btn-info:hover { background:#43474b; border-color:#43474b; color:#fff; }
.btn-success { background:#188f52; border-color:#188f52; }
.btn-outline-secondary { color:var(--gun); border-color:var(--line); }
.btn-outline-secondary:hover { background:var(--gun); border-color:var(--gun); color:#fff; }

/* ---------- Forms ---------- */
.form-control,.form-select { border-radius:var(--r-sm); border-color:#d9dce2; font-size:.9rem; padding:.5rem .75rem; }
.form-control:focus,.form-select:focus { border-color:var(--amber); box-shadow:0 0 0 .2rem rgba(232,160,32,.18); }
.form-label { font-weight:600; font-size:.85rem; margin-bottom:.3rem; }
.form-check-input:checked { background-color:var(--red); border-color:var(--red); }
.input-group-text { background:var(--line-2); border-color:#d9dce2; }

/* ---------- Tables ---------- */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { margin-bottom:0; }
.table thead th { color:var(--gun); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; border-bottom:2px solid var(--line); white-space:nowrap; }
.table td,.table th { padding:.6rem .75rem; vertical-align:middle; }
.table-sm td,.table-sm th { padding:.45rem .6rem; font-size:.85rem; }
.table-hover tbody tr:hover { background:#faf6f0; }
.table > :not(caption) > * > * { border-bottom-color:var(--line-2); }

/* ---------- AI insight strip ---------- */
.ai-strip { border-radius:var(--r); padding:.85rem 1.05rem; display:flex; gap:.8rem; align-items:flex-start;
  background:linear-gradient(90deg,rgba(232,160,32,.10),rgba(255,118,24,.05)); border:1px solid rgba(232,160,32,.28); }
.ai-strip .ai-ico { font-size:1.15rem; line-height:1.3; flex:none; }
.ai-strip .ai-body { flex:1; min-width:0; }
.ai-title { font-weight:700; font-size:.72rem; color:var(--red); text-transform:uppercase; letter-spacing:.05em; }
.ai-text { font-size:.92rem; color:var(--ink); }
.ai-badge { font-size:.6rem; padding:.15rem .45rem; border-radius:6px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.ai-badge.genie{background:#d1e7dd;color:#0f5132;} .ai-badge.offline{background:#fdf0cf;color:#8a6d00;} .ai-badge.cache{background:#cfe2ff;color:#084298;}
.ai-evidence { font-size:.78rem; color:var(--muted); }

/* score chips */
.score-hot{background:#fbe0e2;color:#a4262c;} .score-warm{background:#fdf0cf;color:#8a6d00;} .score-cold{background:#e9eaee;color:#495057;}

/* ---------- Badges / status pills ---------- */
.badge { font-weight:600; font-size:.72rem; padding:.32em .6em; border-radius:6px; }
.badge-status,.badge-pill-soft { font-size:.72rem; }
.badge-pill-soft { background:#f4e7d6; color:var(--red); }
.slab-bar { height:12px; background:#edeff3; border-radius:6px; overflow:hidden; }
.slab-bar > div { height:100%; background:var(--flame); }
.status-pending_approval,.status-open,.status-draft,.status-planned,.status-pending,.status-submitted,.status-new{background:#fdf0cf;color:#8a6d00;}
.status-approved,.status-fulfilled,.status-invoiced,.status-dispatched,.status-accepted,.status-converted,.status-completed,.status-paid,.status-qualified{background:#d6efe0;color:#0f5132;}
.status-rejected,.status-cancelled,.status-lost{background:#fbe0e2;color:#a4262c;}
.status-hold,.status-contacted{background:#e9eaee;color:#495057;}
.status-partially_fulfilled,.status-sent,.status-quoted,.status-head_approved{background:#d7e6ff;color:#084298;}
.bg-info{background:#d7e6ff!important;color:#084298;} .bg-secondary{background:#e9eaee!important;color:#495057;}

/* ---------- Login ---------- */
.login-bg { min-height:100vh; background:radial-gradient(120% 120% at 15% 10%,#4a1010,var(--ink) 70%); display:flex; align-items:center; padding:1rem; }
.login-card { border-radius:var(--r-lg); overflow:hidden; border:0; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.login-flame { height:5px; background:var(--flame); }

/* ---------- Settings ---------- */
.settings-nav .list-group-item { cursor:pointer; border-color:var(--line); font-size:.9rem; font-weight:500; }
.settings-nav .list-group-item.active { background:var(--red); border-color:var(--red); }
.set-help { font-size:.8rem; color:var(--muted); }

/* ---------- Ask pane / offcanvas ---------- */
.offcanvas { border-left:1px solid var(--line); }

/* ---------- Utilities ---------- */
.notif-badge { position:absolute; top:-7px; right:-9px; font-size:.58rem; }
@media (max-width:575.98px){
  .content { padding:1rem .85rem; }
  h4 { font-size:1.25rem; }
  .btn { font-size:.85rem; }
  .topbar .tb-hidexs { display:none!important; }
}