/* =========================================================================
   SOLIT ERP — Design tokens
   Theme: "Smelt & Ledger" — industrial copper-works palette.
   Rationale: the brief is literally about tracing copper through melting,
   extrusion, drawing — so the UI borrows the material's own colour story
   (raw cathode pink-orange -> oxidised patina green -> blackened tool steel)
   instead of a generic SaaS blue. Document codes (SO-26-0001, WO-26-0001...)
   are everywhere in the spec, so a mono face is used for every code/number
   to make traceability *visually* legible at a glance.
   ========================================================================= */

:root{
  /* --- copper-works palette --- */
  --copper-900:#1B1411;     /* blackened steel — sidebar */
  --copper-800:#2A211C;     /* sidebar hover */
  --copper-700:#3C2F27;     /* borders on dark */
  --copper-500:#B8703A;     /* raw copper — primary accent */
  --copper-400:#D98E4F;     /* warm highlight */
  --patina-600:#4F7C68;     /* oxidised green — success / approved */
  --patina-100:#E4EEE8;
  --rust-600:#B23B30;       /* rejected / overdue */
  --rust-100:#F6E3E0;
  --amber-600:#C9881F;      /* pending / hold */
  --amber-100:#F7ECD6;
  --slate-700:#3A4046;      /* info / in-transit */
  --slate-100:#E7ECEF;

  --paper:#F6F2EC;          /* warm off-white floor */
  --card:#FFFFFF;
  --ink-900:#211C17;
  --ink-600:#5C5249;
  --ink-300:#9C9186;
  --line:#E4DCD0;

  --font-display:'Arial Narrow', Arial, 'Helvetica Neue', sans-serif;
  --font-body:'Segoe UI','Helvetica Neue', Arial, sans-serif;
  --font-mono:'Consolas','Courier New', monospace;

  --radius:6px;
  --shadow-card:0 1px 2px rgba(27,20,17,.06), 0 1px 1px rgba(27,20,17,.04);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink-900);
  font-size:14px;
  line-height:1.45;
}
a{color:var(--copper-500); text-decoration:none;}
a:hover{text-decoration:underline;}
code,.mono,.doc-code{font-family:var(--font-mono); letter-spacing:.2px;}

/* ---------------------------------------------------------------- layout */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:248px; flex-shrink:0;
  background:var(--copper-900);
  color:#E9E1D8;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--copper-700);
}
.sidebar-brand .mark{
  font-family:var(--font-display); font-weight:700; font-size:21px;
  letter-spacing:.5px; color:#fff; display:flex; align-items:center; gap:8px;
}
.sidebar-brand .mark .dot{width:9px;height:9px;border-radius:50%;background:var(--copper-500); display:inline-block; box-shadow:0 0 0 3px rgba(184,112,58,.25);}
.sidebar-brand .sub{font-size:11px; color:var(--ink-300); margin-top:3px; letter-spacing:.4px;}

.nav-group{padding:10px 10px 4px;}
.nav-group-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px;
  color:#8A7C6E; padding:10px 10px 4px; font-weight:600;
}
.nav-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:1px 2px; border-radius:5px;
  color:#D8CDC0; font-size:13.5px; cursor:pointer;
}
.nav-link .ico{width:16px; text-align:center; opacity:.85; font-family:var(--font-mono); font-size:12px;}
.nav-link:hover{background:var(--copper-800); color:#fff; text-decoration:none;}
.nav-link.active{background:linear-gradient(90deg, rgba(184,112,58,.35), rgba(184,112,58,.06)); color:#fff; border-left:3px solid var(--copper-500); padding-left:7px;}

.sidebar-foot{margin-top:auto; padding:14px 18px; border-top:1px solid var(--copper-700); font-size:11.5px; color:#8A7C6E;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}

.topbar{
  height:58px; background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:5;
}
.topbar h1{font-family:var(--font-display); font-size:18px; font-weight:700; margin:0; letter-spacing:.2px;}
.topbar .crumbs{font-size:11.5px; color:var(--ink-300); text-transform:uppercase; letter-spacing:.6px; margin-bottom:1px;}
.user-chip{display:flex; align-items:center; gap:10px;}
.user-chip .role-badge{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  background:var(--patina-100); color:var(--patina-600); padding:3px 8px; border-radius:20px; font-weight:600;
}
.user-chip .name{font-size:13px; font-weight:600;}
.logout-btn{font-size:12px; color:var(--ink-600); border:1px solid var(--line); padding:6px 10px; border-radius:5px; background:#fff;}
.logout-btn:hover{border-color:var(--copper-500); color:var(--copper-500); text-decoration:none;}

.content{padding:22px 26px 50px; flex:1;}

.flash-stack{margin-bottom:14px;}
.flash{padding:10px 14px; border-radius:5px; font-size:13px; margin-bottom:8px; border:1px solid transparent;}
.flash-success{background:var(--patina-100); color:var(--patina-600); border-color:#cfe3da;}
.flash-danger{background:var(--rust-100); color:var(--rust-600); border-color:#ecd2cd;}
.flash-info{background:var(--slate-100); color:var(--slate-700); border-color:#dbe2e6;}

/* ---------------------------------------------------------------- cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card);}
.card + .card{margin-top:16px;}
.card-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.card-head h2{font-family:var(--font-display); font-size:15.5px; margin:0; font-weight:700;}
.card-head .hint{font-size:12px; color:var(--ink-300);}
.card-body{padding:18px;}

.kpi-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px;}
@media (max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-card);}
.kpi .label{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-300); font-weight:600;}
.kpi .value{font-family:var(--font-display); font-size:24px; font-weight:700; margin-top:4px;}
.kpi .value small{font-size:13px; font-weight:400; color:var(--ink-300);}
.kpi.accent{border-top:3px solid var(--copper-500);}

/* ----------------------------------------------------------------- grid for forms */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px 16px;}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px;}
.field label{font-size:12px; font-weight:600; color:var(--ink-600);}
.field .req{color:var(--rust-600);}
input,select,textarea{
  font-family:var(--font-body); font-size:13.5px; padding:8px 10px;
  border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink-900);
  width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(184,112,58,.35); border-color:var(--copper-500);}
textarea{resize:vertical; min-height:60px;}

.btn{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:5px; border:1px solid transparent; cursor:pointer;
  background:var(--copper-500); color:#fff;
}
.btn:hover{background:var(--copper-400); text-decoration:none; color:#fff;}
.btn-outline{background:#fff; border:1px solid var(--line); color:var(--ink-900);}
.btn-outline:hover{border-color:var(--copper-500); color:var(--copper-500);}
.btn-success{background:var(--patina-600);}
.btn-success:hover{background:#5e927b;}
.btn-danger{background:var(--rust-600);}
.btn-danger:hover{background:#c4493d;}
.btn-sm{padding:4px 9px; font-size:11.5px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ----------------------------------------------------------------- table */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-300); font-weight:700; padding:9px 10px; border-bottom:2px solid var(--line); white-space:nowrap;
}
tbody td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:hover{background:#FBF8F4;}
tbody tr:last-child td{border-bottom:none;}
.empty-row{padding:26px; text-align:center; color:var(--ink-300); font-size:13px;}

.badge{display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.3px;}
.badge-amber{background:var(--amber-100); color:var(--amber-600);}
.badge-green{background:var(--patina-100); color:var(--patina-600);}
.badge-red{background:var(--rust-100); color:var(--rust-600);}
.badge-slate{background:var(--slate-100); color:var(--slate-700);}

.actions-cell{display:flex; gap:6px; white-space:nowrap;}

/* ----------------------------------------------------------------- traceability strip (signature element) */
.trace-strip{display:flex; align-items:center; overflow-x:auto; padding:18px 6px 6px;}
.trace-node{display:flex; flex-direction:column; align-items:center; min-width:96px; position:relative;}
.trace-node .dot{
  width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ink-300);
  z-index:2;
}
.trace-node.done .dot{border-color:var(--copper-500); background:var(--copper-500); color:#fff;}
.trace-node.current .dot{border-color:var(--copper-500); background:#fff; color:var(--copper-500); box-shadow:0 0 0 4px rgba(184,112,58,.18);}
.trace-node .lbl{font-size:11px; margin-top:7px; color:var(--ink-600); text-align:center; font-weight:600;}
.trace-node.done .lbl{color:var(--ink-900);}
.trace-line{flex:1; height:2px; background:var(--line); margin-top:-22px; min-width:18px;}
.trace-line.done{background:var(--copper-500);}

/* ----------------------------------------------------------------- misc */
.section-title{font-family:var(--font-display); font-size:14.5px; font-weight:700; margin:22px 0 10px; display:flex; align-items:center; gap:8px;}
.section-title .bar{width:4px; height:15px; background:var(--copper-500); display:inline-block; border-radius:2px;}
.pill-tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
.pill-tab{padding:6px 13px; border-radius:20px; border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-600); background:#fff;}
.pill-tab.active{background:var(--copper-900); color:#fff; border-color:var(--copper-900);}
.pill-tab:hover{text-decoration:none;}
.muted{color:var(--ink-300);}
.right{text-align:right;}
.help-text{font-size:11.5px; color:var(--ink-300); margin-top:-2px;}
.divider{border:none; border-top:1px solid var(--line); margin:18px 0;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--copper-900);}
.login-card{width:380px; background:#fff; border-radius:8px; padding:34px 30px; box-shadow:0 20px 50px rgba(0,0,0,.35);}
.login-card .mark{font-family:var(--font-display); font-size:24px; font-weight:700; display:flex; align-items:center; gap:8px;}
.login-card .mark .dot{width:10px;height:10px;border-radius:50%;background:var(--copper-500);}
.login-card .tag{font-size:12px; color:var(--ink-300); margin:4px 0 22px;}
.login-demo{margin-top:18px; font-size:11.5px; color:var(--ink-300); background:var(--paper); padding:10px 12px; border-radius:5px; line-height:1.6;}

/* ----------------------------------------------------------------- detail / document pages */
.detail-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px 22px; margin-bottom:6px;}
.detail-item{min-width:0;}
.detail-label{font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-300); font-weight:700; margin-bottom:3px;}
.detail-value{font-size:14px; color:var(--ink-900); font-weight:600;}
.status-actions-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
@media (max-width:900px){.detail-grid{grid-template-columns:repeat(2, 1fr);}}

/* ----------------------------------------------------------------- kanban board (dispatch tracking) */
.kanban{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start;}
.kanban-col{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px;}
.kanban-col h3{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-600); margin:0 0 10px; display:flex; justify-content:space-between;}
.kanban-card{background:#fff; border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin-bottom:9px; font-size:12.5px;}
.kanban-card .mono{display:block; margin-bottom:3px;}
.kanban-card .kc-meta{color:var(--ink-300); font-size:11px; margin-top:3px;}
@media (max-width:900px){.kanban{grid-template-columns:1fr;}}

/* ----------------------------------------------------------------- yield bars */
.yield-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.yield-row .yl-label{width:110px; font-size:12.5px; font-weight:700; color:var(--ink-600); flex-shrink:0;}
.yield-bar-track{flex:1; background:var(--paper); border:1px solid var(--line); border-radius:5px; height:20px; position:relative; overflow:hidden;}
.yield-bar-fill{background:var(--copper-500); height:100%; border-radius:5px 0 0 5px;}
.yield-row .yl-pct{width:58px; text-align:right; font-size:12.5px; font-weight:700; color:var(--ink-900); flex-shrink:0;}

/* ----------------------------------------------------------------- ledger / overdue table emphasis */
.row-overdue{background:rgba(178,59,48,.06);}
.credit-bar-track{background:var(--paper); border:1px solid var(--line); border-radius:5px; height:8px; width:100px; overflow:hidden; display:inline-block; vertical-align:middle;}
.credit-bar-fill{height:100%; background:var(--copper-500);}
.credit-bar-fill.over{background:var(--rust-600);}