/* ═══════════════════════════════════════════════════════════
   INTELOMELT ALU — Global Overseas Metals Industries
   Dark nav + Light content + Print-ready
   Primary: #0d2137 (navy) | Accent: #1a7c4f (green) | Gold: #c8962a
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Dark nav colours */
  --nav-bg:      #0d2137;
  --nav-border:  #1a3a56;
  --nav-text:    #a8c4d8;
  --nav-active:  #ffffff;
  --nav-accent:  #1a7c4f;

  /* Light content area */
  --bg:          #f0f4f7;
  --surface:     #ffffff;
  --surface2:    #f5f8fa;
  --border:      #b8c8d8;
  --text1:       #1a2733;
  --text2:       #4a6070;
  --text3:       #8aa0b0;

  /* Brand colours */
  --green:       #1a7c4f;
  --green-lt:    #e8f5ee;
  --navy:        #0d2137;
  --gold:        #c8962a;
  --gold-lt:     #fdf5e6;

  /* Status */
  --ok:          #16a34a;
  --warn:        #d97706;
  --danger:      #dc2626;
  --info:        #2563eb;

  --radius:      8px;
  --shadow:      0 1px 4px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 8px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.08);
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:-apple-system,'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text1); font-size:13px; display:flex; flex-direction:column; overflow:hidden; }

/* ── NAV BAR ── */
/* IMPORTANT: overflow must be visible so absolutely-positioned dropdown menus
   are not clipped. Horizontal scrolling is handled by the inner .nav-inner wrapper. */
.nav { background:var(--nav-bg); border-bottom:3px solid var(--nav-accent); padding:0 14px;
  display:flex; align-items:center; flex-shrink:0; height:48px;
  overflow:visible; position:relative; z-index:500; }
/* overflow-x:clip clips horizontally without creating a scroll container,
   so overflow-y is NOT forced to auto — dropdown menus can paint below the nav. */
.nav-inner { display:flex; align-items:center; gap:2px; overflow-x:clip; overflow-y:visible;
  flex:1; height:100%; }
.nav-logo { display:flex; align-items:center; gap:8px; margin-right:14px; flex-shrink:0; }
.nav-logo-icon { width:28px; height:28px; background:var(--nav-accent); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.nav-logo-text { color:#fff; font-weight:800; font-size:13px; letter-spacing:.04em; line-height:1.2; }
.nav-logo-text span { color:#7ecbab; font-size:10px; display:block; font-weight:500; letter-spacing:.06em; }
.nav-btn { padding:5px 12px; border:none; border-radius:5px; background:transparent; color:var(--nav-text); cursor:pointer; font-size:11.5px; font-weight:600; transition:all .15s; white-space:nowrap; letter-spacing:.02em; }
.nav-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-btn.active { background:var(--nav-accent); color:#fff; }
.nav-divider { width:1px; height:20px; background:var(--nav-border); margin:0 4px; }

/* ── LAYOUT ── */
.main { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.section { display:none; flex:1; overflow-y:auto; padding:16px; flex-direction:column; gap:14px; background:var(--bg); }
.section.active { display:flex; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cols3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.cols4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.cols5 { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }

/* ── CARD ── */
.card { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.card-title { font-size:10px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; border-bottom:2px solid var(--border); }
.card-title .card-title-icon { color:var(--green); margin-right:5px; }

/* ── SECTION HEADER ── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.section-header h2 { font-size:15px; font-weight:700; color:var(--navy); }
.section-header .sub { font-size:11px; color:var(--text3); }

/* ── FORM FIELDS ── */
.field { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.field label { font-size:10px; color:var(--text2); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
input[type=text],input[type=number],input[type=date],select,textarea {
  padding:7px 10px; background:#fff; border:2px solid #c8d4de;
  border-radius:5px; color:var(--text1); font-size:12px; outline:none;
  transition:border .15s; width:100%;
}
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(26,124,79,.15); }
input[type=number] { text-align:right; }
select { background:#fff; }

/* ── GRADE SEARCH ── */
.grade-search-wrap { position:relative; }
.grade-search-wrap::before { content:'🔍'; position:absolute; left:9px; top:50%; transform:translateY(-50%); font-size:11px; pointer-events:none; z-index:1; }
.grade-search-wrap input { padding-left:28px; }
.grade-dropdown { position:fixed; background:#fff; border:2px solid #c8d4de; border-radius:6px;
  box-shadow:var(--shadow-md); max-height:220px; overflow-y:auto; z-index:9999; display:none; }
.grade-dropdown.open { display:block; }
.grade-option { padding:8px 12px; cursor:pointer; font-size:12px; border-bottom:1px solid #f0f4f7; }
.grade-option:last-child { border-bottom:none; }
.grade-option:hover,.grade-option.hovered { background:var(--green-lt); }
.grade-code { font-weight:700; color:var(--green); margin-right:6px; font-size:11px; }
.grade-no-result { color:var(--text3); font-style:italic; }

/* ── BUTTONS ── */
.btn { padding:7px 16px; border:none; border-radius:6px; cursor:pointer; font-weight:700; font-size:12px; transition:all .15s; letter-spacing:.02em; }
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:#156640; }
.btn-gold { background:var(--gold); color:#fff; }
.btn-gold:hover { background:#a87820; }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:#162d44; }
.btn-ghost { background:var(--surface2); color:var(--text1); border:2px solid #c8d4de; }
.btn-ghost:hover { background:#e8edf2; }
.btn-danger { background:#fff1f1; color:var(--danger); border:1.5px solid #fca5a5; }
.btn-sm { padding:3px 10px; font-size:11px; }
.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline:hover { background:var(--navy); color:#fff; }
.dash-period-btn { background:var(--surface2); color:var(--text2); border:1.5px solid var(--border); }
.dash-period-btn:hover { background:#e0eaf4; color:var(--navy); }
.dash-period-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ── TABLES ── */
.tbl { width:100%; border-collapse:collapse; font-size:12px; }
.tbl thead tr { background:var(--navy); border-bottom:2px solid #334; }
.tbl th { color:#fff; font-weight:700; font-size:9.5px; padding:8px 10px; text-align:left; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.tbl td { padding:7px 10px; border-bottom:1.5px solid #d8e0e8; vertical-align:middle; color:var(--text1); }
.tbl tr:hover td { background:#f8fbff; }
.tbl tfoot td { background:var(--navy); color:#fff; border-bottom:none; font-weight:700; }
.tbl tfoot tr:hover td { background:#1e3a5f; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl .act-col { text-align:center; width:80px; }
.icon-btn { background:none; border:none; cursor:pointer; font-size:14px; padding:2px 5px; opacity:.6; transition:opacity .15s; border-radius:4px; }
.icon-btn:hover { opacity:1; background:var(--surface2); }

/* ── STATUS ── */
.st-ok   { color:var(--ok); font-weight:600; }
.st-low  { color:var(--warn); font-weight:700; }
.st-high { color:var(--danger); font-weight:700; }
.st-critical_low,.st-critical_high { background:#fef2f2; color:var(--danger); border-radius:4px; padding:1px 7px; font-weight:700; }

/* ── BADGES ── */
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.badge-ok    { background:#dcfce7; color:#166534; }
.badge-warn  { background:#fef9c3; color:#854d0e; }
.badge-err   { background:#fee2e2; color:#991b1b; }
.badge-green { background:var(--green-lt); color:var(--green); }
.badge-gold  { background:var(--gold-lt); color:var(--gold); }
.badge-navy  { background:#e8f0f8; color:var(--navy); }
.badge-info  { background:#dbeafe; color:#1e40af; }

/* ── TOTAL BAR ── */
.total-bar { background:var(--navy); border-radius:6px; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.total-bar .lbl { font-size:11px; color:rgba(255,255,255,.7); font-weight:600; }
.total-bar .val { font-size:16px; font-weight:700; color:#fff; }
.total-bar .val .ok { color:#86efac; }

/* ── STAT BOX ── */
.stat-box { background:var(--surface); border:2px solid #c8d4de; border-radius:8px; padding:12px; text-align:center; box-shadow:var(--shadow); }
.stat-box .stat-label { font-size:9.5px; color:var(--text2); font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
.stat-box .stat-value { font-size:20px; font-weight:800; color:var(--navy); }
.stat-box .stat-sub { font-size:10px; color:var(--text3); margin-top:2px; }

/* ── RECOVERY BAR ── */
.rec-bar { height:6px; border-radius:3px; background:#e2e8f0; overflow:hidden; margin-top:4px; }
.rec-fill { height:100%; border-radius:3px; background:var(--green); transition:width .4s; }

/* ── MGR BLOCKS ── */
.mgr-block { background:var(--surface2); border:2px solid #c8d4de; border-radius:6px; padding:12px; margin-bottom:10px; }
.mgr-block-title { font-size:10px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.mgr-block-title::before { content:''; display:inline-block; width:3px; height:14px; background:var(--green); border-radius:2px; }
.mgr-hint { font-size:9px; color:var(--text3); font-weight:400; text-transform:none; }
.mgr-row-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mgr-row-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.mgr-field { display:flex; flex-direction:column; gap:3px; }
.mgr-field label { font-size:9.5px; color:var(--text2); font-weight:700; text-transform:uppercase; }

/* ── EL GRID ── */
.el-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.el-cell { display:flex; flex-direction:column; gap:3px; }
.el-cell label { font-size:9.5px; color:var(--text2); font-weight:700; text-align:center; text-transform:uppercase; }
.el-cell input { text-align:center; padding:6px 4px; font-size:12px; font-weight:600; }

/* ── TOAST ── */
#toast { position:fixed; bottom:20px; right:20px; padding:10px 18px; border-radius:8px; font-size:12px; font-weight:700; opacity:0; transition:opacity .25s; pointer-events:none; z-index:9999; box-shadow:var(--shadow-md); }
#toast.show { opacity:1; }
#toast.success { background:#166534; color:#fff; }
#toast.error   { background:#991b1b; color:#fff; }
#toast.info    { background:#1e40af; color:#fff; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

/* ═══════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════ */
@media print {
  .toolbar, .nav { display:none !important; }
  body { background:#fff; overflow:visible; }
  .section { display:block !important; overflow:visible; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  @page { size:A4 portrait; margin:8mm 8mm 8mm 8mm; }
}

/* ── CHEMISTRY WIDGET (Intelomelt-style cards + bars) ── */
.chem-widget { }

.chem-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700;
  margin-bottom:10px;
}
.chem-badge.ok  { background:#dcfce7; color:#166534; }
.chem-badge.err { background:#fee2e2; color:#991b1b; }
.chem-badge.warn{ background:#fef9c3; color:#854d0e; }

.chem-cells {
  display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;
}
.chem-cell {
  border:2px solid #dde4eb; border-radius:8px; padding:6px 10px;
  min-width:68px; text-align:center; background:#fff;
  transition:border-color .15s;
}
.chem-cell.status-ok   { border-color:#86efac; background:#f0fdf4; }
.chem-cell.status-low  { border-color:#fca5a5; background:#fff1f1; }
.chem-cell.status-high { border-color:#fcd34d; background:#fffbeb; }
.chem-cell.status-critical_low,.chem-cell.status-critical_high {
  border-color:#ef4444; background:#fef2f2;
}
.chem-cell .el  { font-size:9.5px; font-weight:700; color:#4a6070; text-transform:uppercase; }
.chem-cell .el .icon { font-size:9px; margin-left:2px; }
.chem-cell .val { font-size:16px; font-weight:800; color:#0d2137; line-height:1.2; }
.chem-cell.status-ok   .val { color:#166534; }
.chem-cell.status-low  .val { color:#dc2626; }
.chem-cell.status-high .val { color:#92400e; }
.chem-cell .aim-lbl { font-size:9px; color:#8aa0b0; margin-top:1px; }

/* Bar rows */
.bar-rows { display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.bar-row { display:flex; align-items:center; gap:8px; }
.bar-el  { font-size:11px; font-weight:700; color:#4a6070; width:24px; flex-shrink:0; }
.bar-bg  { flex:1; height:10px; background:#e8edf2; border-radius:5px;
           position:relative; overflow:visible; }
.bar-fill { height:100%; border-radius:5px; background:#1a7c4f;
            transition:width .4s; position:relative; }
.bar-fill.status-ok   { background:#1a7c4f; }
.bar-fill.status-low  { background:#dc2626; }
.bar-fill.status-high { background:#d97706; }
.bar-fill.status-critical_low,.bar-fill.status-critical_high { background:#dc2626; }
.bar-aim-mark { position:absolute; top:-3px; bottom:-3px; width:2px;
                background:#0d2137; border-radius:2px; transform:translateX(-50%); }
.bar-val { font-size:10.5px; font-weight:600; color:#4a6070;
           white-space:nowrap; width:80px; text-align:right; flex-shrink:0; }

/* ── Nav dropdowns ──────────────────────────────────────────────────────── */
/* The wrap must have overflow:visible (default) so the menu can paint outside it. */
.nav-dropdown-wrap { position:relative; display:inline-flex; align-items:center;
  overflow:visible; }
.nav-dropdown-trigger { padding:5px 12px; border:none; border-radius:5px;
  background:transparent; color:var(--nav-text); cursor:pointer;
  font-size:11.5px; font-weight:600; transition:all .15s; white-space:nowrap; letter-spacing:.02em; }
.nav-dropdown-trigger:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-dropdown-trigger.active { background:var(--nav-accent); color:#fff; }
/* position:fixed takes the menu out of every overflow/clip stacking context —
   JS in app.js sets left/top via getBoundingClientRect when the menu opens. */
.nav-dropdown-menu { display:none; position:fixed; top:48px; left:0;
  z-index:99999;
  background:var(--navy); border:1px solid rgba(255,255,255,.15); border-radius:7px;
  box-shadow:0 12px 32px rgba(0,0,0,.55); min-width:200px; padding:5px 0; }
.nav-dropdown-menu.open { display:block; }
.nav-dropdown-menu button { display:block; width:100%; text-align:left;
  padding:8px 16px; border:none; background:transparent;
  color:var(--nav-text); cursor:pointer; font-size:11.5px; font-weight:600; white-space:nowrap; }
.nav-dropdown-menu button:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ── Material type-to-search dropdown ────────────────────────────────────── */
.mat-dd-opt:hover { background:rgba(255,255,255,.1) !important; }

/* ── Density index badge colours ──────────────────────────────────────────── */
.di-pass { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.di-marginal { background:#fff3e0; color:#e65100; border:1px solid #ffcc80; }
.di-fail { background:#ffebee; color:#c62828; border:1px solid #ef9a9a; }

/* ── surface-alt for calc result panels ────────────────────────────────────── */
:root { --surface-alt: #f8f9ff; }