/* ═══════════════════════════════════════
   THE STEEL REPORT — core.css
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600&family=Barlow+Semi+Condensed:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --steel:     #1E1E1C;
  --steel-2:   #2C2C2A;
  --steel-3:   #3A3A37;
  --steel-4:   #52524E;
  --steel-5:   #888780;
  --steel-6:   #C4C2BB;
  --steel-7:   #E4E2DA;
  --steel-8:   #F2F0E8;
  --steel-9:   #FAFAF7;
  --amber:     #F0A030;
  --amber-d:   #C07818;
  --amber-l:   #FDF0D8;
  --amber-t:   #3D2000;
  --teal:      #1A9E78;
  --teal-d:    #0F6E52;
  --teal-l:    #E0F5EE;
  --red:       #D94545;
  --red-l:     #FDEAEA;
  --blue:      #2B6CB0;
  --blue-l:    #EBF4FF;
  --yellow:    #D4A017;
  --yellow-l:  #FEF9E7;
  --purple:    #6B46C1;
  --purple-l:  #F0EBFF;
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-semi: 'Barlow Semi Condensed', sans-serif;
  --r:         4px;
  --rl:        8px;
  --shadow:    0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
}

body {
  font-family: var(--font-body);
  background: var(--steel-8);
  color: var(--steel-2);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

/* ── KPI BAR ── */
#kpi-bar {
  background: var(--steel);
  color: #fff;
  display: flex;
  align-items: stretch;
  padding: 0 24px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.kpi-brand { display:flex; align-items:center; gap:10px; padding-right:24px; border-right:1px solid var(--steel-3); margin-right:8px; flex-shrink:0; }
.kpi-brand-icon { width:32px; height:32px; background:var(--amber); border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-brand-icon svg { width:18px; height:18px; }
.kpi-brand-name { font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:1px; color:#fff; line-height:1; }
.kpi-brand-sub  { font-size:9px; color:var(--steel-5); letter-spacing:2px; text-transform:uppercase; margin-top:1px; }
.kpi-metrics { display:flex; align-items:stretch; flex:1; overflow-x:auto; }
.kpi-metric { display:flex; flex-direction:column; justify-content:center; padding:0 20px; border-right:1px solid var(--steel-3); min-width:100px; flex-shrink:0; }
.kpi-metric:last-child { border-right:none; }
.kpi-v { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--amber); line-height:1; }
.kpi-v.green { color:#4ADE80; }
.kpi-v.red   { color:#F87171; }
.kpi-l { font-size:9px; color:var(--steel-5); text-transform:uppercase; letter-spacing:1.5px; margin-top:2px; }
.kpi-year-badge { display:flex; align-items:center; padding:0 16px; border-left:1px solid var(--steel-3); flex-shrink:0; }
.kpi-year { font-family:var(--font-head); font-size:13px; font-weight:600; color:var(--steel-5); letter-spacing:1px; }

/* ── MAIN NAV ── */
#main-nav {
  background: var(--steel-2);
  display: flex;
  align-items: stretch;
  padding: 0 24px;
  height: 44px;
  position: sticky;
  top: 56px;
  z-index: 190;
}
.nav-tab { font-family:var(--font-semi); font-size:13px; font-weight:600; letter-spacing:0.5px; padding:0 18px; background:transparent; border:none; border-bottom:3px solid transparent; color:var(--steel-6); cursor:pointer; transition:all 0.15s; display:flex; align-items:center; gap:7px; margin-bottom:-1px; }
.nav-tab:hover { color:#fff; }
.nav-tab.active { color:#fff; border-bottom-color:var(--amber); }
.nav-count { background:var(--steel-3); color:var(--steel-6); font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; min-width:20px; text-align:center; }
.nav-tab.active .nav-count { background:var(--amber); color:var(--amber-t); }

/* ── PAGES ── */
.page { display:none; }
.page.active { display:block; }
.page-inner { max-width:1400px; margin:0 auto; padding:24px; }

/* ── SECTION HEADERS ── */
.section-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-title { font-family:var(--font-head); font-size:28px; font-weight:700; letter-spacing:0.5px; color:var(--steel-2); line-height:1; }
.section-sub { font-size:13px; color:var(--steel-5); margin-top:3px; }

/* ── CARDS ── */
.card { background:#fff; border:1px solid var(--steel-7); border-radius:var(--rl); box-shadow:var(--shadow); }
.card-hdr { padding:14px 18px; border-bottom:1px solid var(--steel-7); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-family:var(--font-semi); font-size:14px; font-weight:600; color:var(--steel-2); }
.card-body { padding:16px 18px; }

/* ── BUTTONS ── */
.btn { font-family:var(--font-body); font-size:12px; font-weight:600; padding:7px 14px; border-radius:var(--r); border:1px solid; cursor:pointer; transition:all 0.12s; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; letter-spacing:0.3px; }
.btn-primary { background:var(--steel-2); color:#fff; border-color:var(--steel-2); }
.btn-primary:hover { background:var(--steel-3); }
.btn-amber { background:var(--amber); color:var(--amber-t); border-color:var(--amber-d); }
.btn-amber:hover { background:var(--amber-d); color:#fff; }
.btn-teal { background:var(--teal-l); color:var(--teal-d); border-color:var(--teal); }
.btn-teal:hover { background:var(--teal); color:#fff; }
.btn-ghost { background:transparent; color:var(--steel-4); border-color:var(--steel-7); }
.btn-ghost:hover { background:var(--steel-8); color:var(--steel-2); }
.btn-danger { background:transparent; color:var(--red); border-color:#F0A0A0; }
.btn-danger:hover { background:var(--red-l); }
.btn-success { background:var(--teal); color:#fff; border-color:var(--teal-d); }
.btn-success:hover { background:var(--teal-d); }
.btn-sm { font-size:11px; padding:4px 10px; }
.btn-lg { font-size:14px; padding:10px 20px; }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-semi); font-size:10px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; padding:3px 8px; border-radius:3px; white-space:nowrap; }
.badge::before { content:''; width:6px; height:6px; border-radius:50%; }
.badge-pending   { background:var(--yellow-l); color:var(--yellow);  border:1px solid #F0D080; } .badge-pending::before   { background:var(--yellow); }
.badge-submitted { background:var(--blue-l);   color:var(--blue);    border:1px solid #90C0F0; } .badge-submitted::before { background:var(--blue); }
.badge-awarded   { background:var(--teal-l);   color:var(--teal-d);  border:1px solid #80D4B8; } .badge-awarded::before   { background:var(--teal); }
.badge-signed    { background:var(--steel-2);  color:#fff;           border:1px solid var(--steel-3); } .badge-signed::before    { background:var(--amber); }
.badge-lost      { background:var(--red-l);    color:var(--red);     border:1px solid #F0A0A0; } .badge-lost::before      { background:var(--red); }
.badge-nobid     { background:var(--steel-8);  color:var(--steel-5); border:1px solid var(--steel-7); } .badge-nobid::before     { background:var(--steel-6); }
.badge-rebid     { background:var(--purple-l); color:var(--purple);  border:1px solid #C4AAEE; } .badge-rebid::before     { background:var(--purple); }
.badge-active    { background:var(--teal-l);   color:var(--teal-d);  border:1px solid #80D4B8; } .badge-active::before    { background:var(--teal); }
.badge-complete  { background:var(--blue-l);   color:var(--blue);    border:1px solid #90C0F0; } .badge-complete::before  { background:var(--blue); }

/* ── FORMS ── */
.form-row { display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.form-group { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px; }
.form-group.full { flex:100%; }
.form-group.w2 { flex:2; }
label { font-size:11px; font-weight:600; color:var(--steel-4); text-transform:uppercase; letter-spacing:0.8px; }
input[type=text], input[type=number], input[type=date],
input[type=email], input[type=tel], select, textarea {
  font-family:var(--font-body); font-size:13px; color:var(--steel-2);
  background:var(--steel-9); border:1px solid var(--steel-7);
  border-radius:var(--r); padding:7px 10px; transition:border-color 0.15s, background 0.15s; width:100%;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--amber); background:#fff; }
select { cursor:pointer; }
textarea { resize:vertical; min-height:80px; }

/* ── FILTER BAR ── */
.filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-pill { font-family:var(--font-semi); font-size:11px; font-weight:600; padding:5px 12px; border-radius:20px; border:1px solid var(--steel-7); background:#fff; color:var(--steel-5); cursor:pointer; transition:all 0.12s; letter-spacing:0.5px; }
.filter-pill:hover { border-color:var(--steel-4); color:var(--steel-2); }
.filter-pill.active { background:var(--steel-2); color:#fff; border-color:var(--steel-2); }
.filter-search { font-family:var(--font-body); font-size:13px; padding:5px 12px; border:1px solid var(--steel-7); border-radius:20px; background:#fff; color:var(--steel-2); width:200px; margin-left:auto; }
.filter-search:focus { outline:none; border-color:var(--amber); }

/* ── LIST TABLE ── */
.list-table { width:100%; border-collapse:collapse; }
.list-table th { font-family:var(--font-semi); font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--steel-5); padding:8px 12px; border-bottom:2px solid var(--steel-7); text-align:left; white-space:nowrap; background:var(--steel-8); }
.list-table td { padding:10px 12px; border-bottom:1px solid var(--steel-7); vertical-align:middle; font-size:13px; }
.list-table tr:last-child td { border-bottom:none; }
.list-table tbody tr { cursor:pointer; transition:background 0.1s; }
.list-table tbody tr:hover { background:var(--steel-8); }
.job-num  { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--steel-2); letter-spacing:0.5px; }
.job-name { font-weight:500; color:var(--steel-2); }
.job-gc   { font-size:12px; color:var(--steel-5); margin-top:1px; }
.td-r { text-align:right; }
.td-c { text-align:center; }
.mono { font-family:'Courier New',monospace; font-size:12px; }

/* ── DETAIL HEADER ── */
.detail-header { background:var(--steel-2); color:#fff; padding:16px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.detail-back { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:#fff; font-family:var(--font-body); font-size:12px; padding:5px 12px; border-radius:var(--r); cursor:pointer; transition:all 0.12s; display:flex; align-items:center; gap:5px; }
.detail-back:hover { background:rgba(255,255,255,0.18); }
.detail-num  { font-family:var(--font-head); font-size:13px; font-weight:600; color:var(--amber); letter-spacing:1px; }
.detail-name { font-family:var(--font-head); font-size:24px; font-weight:700; letter-spacing:0.5px; flex:1; }
.detail-gc   { font-size:13px; color:rgba(255,255,255,0.55); }
.detail-actions { display:flex; gap:8px; margin-left:auto; }

/* ── MODULE TABS ── */
.module-tabs { background:#fff; border-bottom:2px solid var(--steel-7); padding:0 24px; display:flex; overflow-x:auto; position:sticky; top:100px; z-index:100; }
.module-tab { font-family:var(--font-semi); font-size:12px; font-weight:600; letter-spacing:0.3px; padding:10px 16px; background:transparent; border:none; border-bottom:3px solid transparent; color:var(--steel-5); cursor:pointer; white-space:nowrap; margin-bottom:-2px; transition:all 0.12s; display:flex; align-items:center; gap:6px; }
.module-tab:hover { color:var(--steel-2); }
.module-tab.active { color:var(--steel-2); border-bottom-color:var(--amber); }
.module-content { display:none; padding:20px 24px; }
.module-content.active { display:block; }

/* ── DASHBOARD ── */
.dash-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.dash-kpi { background:#fff; border:1px solid var(--steel-7); border-radius:var(--rl); padding:16px 18px; box-shadow:var(--shadow); }
.dash-kpi-v { font-family:var(--font-head); font-size:32px; font-weight:700; color:var(--steel-2); line-height:1; }
.dash-kpi-l { font-size:11px; color:var(--steel-5); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.dash-kpi-sub { font-size:12px; color:var(--steel-5); margin-top:6px; }
.dash-kpi.amber .dash-kpi-v { color:var(--amber-d); }
.dash-kpi.teal  .dash-kpi-v { color:var(--teal-d); }
.dash-kpi.red   .dash-kpi-v { color:var(--red); }
.dash-grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:20px; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px); }
.modal { background:#fff; border-radius:var(--rl); box-shadow:var(--shadow-md); width:100%; max-width:640px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-hdr { padding:18px 20px; border-bottom:1px solid var(--steel-7); display:flex; align-items:center; justify-content:space-between; background:var(--steel-8); flex-shrink:0; }
.modal-title { font-family:var(--font-head); font-size:20px; font-weight:700; }
.modal-close { background:none; border:none; font-size:20px; color:var(--steel-5); cursor:pointer; padding:2px 6px; border-radius:3px; }
.modal-close:hover { background:var(--steel-7); color:var(--steel-2); }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--steel-7); display:flex; justify-content:flex-end; gap:8px; background:var(--steel-8); flex-shrink:0; }

/* ── SCOPE TAGS ── */
.scope-struct { background:#EEF2FF; color:#3730A3; border:1px solid #C7D2FE; font-size:10px; padding:2px 7px; border-radius:3px; font-weight:600; }
.scope-misc   { background:#FFF7ED; color:#C2410C; border:1px solid #FED7AA; font-size:10px; padding:2px 7px; border-radius:3px; font-weight:600; }
.scope-pemb   { background:#F0FDF4; color:#166534; border:1px solid #BBF7D0; font-size:10px; padding:2px 7px; border-radius:3px; font-weight:600; }

/* ── PLACEHOLDER ── */
.placeholder-module { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; text-align:center; border:2px dashed var(--steel-7); border-radius:var(--rl); background:var(--steel-9); margin:10px 0; }
.placeholder-module .ph-icon { font-size:36px; margin-bottom:12px; }
.placeholder-module h3 { font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--steel-4); margin-bottom:6px; }
.placeholder-module p  { font-size:12px; color:var(--steel-5); max-width:260px; }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:60px 20px; color:var(--steel-5); }
.empty-state .empty-icon { font-size:40px; margin-bottom:12px; }
.empty-state h3 { font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--steel-4); margin-bottom:6px; }
.empty-state p  { font-size:13px; max-width:300px; margin:0 auto 16px; }

/* ── UTILITY ── */
.flex { display:flex; }
.flex-center { display:flex; align-items:center; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.ml-auto { margin-left:auto; }
.mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; }
.text-muted { color:var(--steel-5); font-size:12px; }
.divider { height:1px; background:var(--steel-7); margin:16px 0; }

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--steel-6); border-radius:3px; }
