@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  --steel: #1a2332;
  --plate: #243040;
  --weld: #2e3f52;
  --amber: #f5a623;
  --amber-dim: #c07d10;
  --flame: #e85c1a;
  --green: #2dce6a;
  --red: #e84040;
  --blue: #3a7bd5;
  --text: #c8d8e8;
  --muted: #6a8aaa;
  --border: #2e4060;
  --warn: #f5a62333;
  --warn-border: #f5a62388;
  --error: #e8404020;
  --error-border: #e8404088;
  --ok: #2dce6a20;
  --ok-border: #2dce6a88;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--steel); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; }

/* HEADER */
#header {
  background: var(--plate);
  border-bottom: 2px solid var(--amber);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#header .logo { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; color: var(--amber); letter-spacing: 2px; }
#header .subtitle { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
#header .proj-info { margin-left: auto; display: flex; gap: 12px; align-items: center; }
#header input { background: var(--weld); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 3px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; width: 160px; }
#header input:focus { outline: none; border-color: var(--amber); }
.badge { background: var(--amber); color: #000; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 2px; font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; }

/* LAYOUT */
#app { display: flex; height: calc(100vh - 58px); }
#sidebar { width: 180px; background: var(--plate); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
#content { flex: 1; overflow-y: auto; padding: 0; }

/* SIDEBAR */
.nav-section { padding: 8px 12px 4px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; }
.nav-item { padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.15s; border-left: 3px solid transparent; font-size: 12px; color: var(--text); }
.nav-item:hover { background: var(--weld); color: #fff; }
.nav-item.active { background: var(--weld); border-left-color: var(--amber); color: var(--amber); font-weight: 600; }
.nav-item .icon { font-size: 14px; width: 18px; text-align: center; }
.nav-item .warn-dot { width: 6px; height: 6px; background: var(--flame); border-radius: 50%; margin-left: auto; }
.mh-total { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--amber); margin-left: auto; }

/* PANELS */
.panel { padding: 16px 20px; }
.panel-title { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: var(--amber); letter-spacing: 1px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.panel-subtitle { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); margin-bottom: 16px; letter-spacing: 1px; }

/* TABLES */
.est-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.est-table th { background: var(--weld); color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.est-table td { padding: 5px 10px; border-bottom: 1px solid #1e2e40; vertical-align: middle; }
.est-table tr:hover td { background: rgba(255,255,255,0.03); }
.est-table tr.subtotal td { background: var(--weld); font-weight: 600; border-top: 1px solid var(--border); }
.est-table tr.warn-row td { background: var(--warn); }
.est-table tr.warn-row td:first-child { border-left: 3px solid var(--amber); }
.est-table tr.error-row td { background: var(--error); }
.est-table tr.error-row td:first-child { border-left: 3px solid var(--red); }

.num-input { background: transparent; border: none; color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 12px; width: 80px; text-align: right; padding: 2px 4px; border-radius: 2px; }
.num-input:focus { outline: none; background: var(--steel); color: #fff; }
.num-input.modified { color: var(--amber); background: var(--warn); }
.num-input.override { color: var(--flame) !important; }
/* Clearly styled entry input for user-editable wage fields */
.wage-input { background: var(--weld); border: 1px solid var(--amber); color: var(--amber); font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; width: 72px; text-align: right; padding: 4px 6px; border-radius: 3px; cursor: text; }
.wage-input:focus { outline: none; background: var(--steel); border-color: var(--green); color: #fff; box-shadow: 0 0 0 2px rgba(45,206,106,0.3); }
.wage-input:hover { border-color: #f5c060; }
.lr-lock { transition: all 0.15s; }
.lr-lock:hover { opacity: 0.8; transform: scale(1.05); }

.mh-val { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--green); text-align: right; }
.mh-val.zero { color: var(--muted); }
.cost-val { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text); text-align: right; }
.uom-tag { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); }
.ref-val { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--blue); }


/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.card { background: var(--plate); border: 1px solid var(--border); border-radius: 4px; padding: 12px; }
.card-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.card-value { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; color: var(--amber); }
.card-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.card.alert { border-color: var(--warn-border); background: var(--warn); }
.card.alert .card-value { color: var(--flame); }

/* SECTION HEADERS */
.section-hdr { background: var(--weld); padding: 6px 12px; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin: 12px 0 0; border-left: 3px solid var(--amber); }

/* BUTTONS */
.btn { padding: 5px 12px; border: none; border-radius: 3px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; transition: all 0.15s; }
.btn-primary { background: var(--amber); color: #000; }
.btn-primary:hover { background: var(--amber-dim); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text); }
.btn-ai { background: linear-gradient(135deg, #1a3a6a, #2a5aaa); color: #7ac0ff; border: 1px solid #3a6aaa; }
.btn-ai:hover { background: linear-gradient(135deg, #2a4a7a, #3a6aba); }
.btn-danger { background: var(--error); color: var(--red); border: 1px solid var(--error-border); }
.btn-danger:hover { background: #e8404030; }
.btn-sm { padding: 3px 8px; font-size: 10px; }

/* ── PACKAGE BUILDER ── */
.pkg-builder { display:flex; flex-direction:column; gap:10px; }
.pkg-card { background:var(--plate); border:1px solid var(--border); border-radius:4px; overflow:hidden; transition: border-color 0.2s; }
.pkg-card.drag-over { border-color: var(--amber); box-shadow: 0 0 8px rgba(245,166,35,0.3); }
.pkg-card-hdr { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(255,100,100,0.06); border-bottom:1px solid var(--border); }
.pkg-card-hdr .pkg-num { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; color:#ff6464; min-width:26px; }
.pkg-card-hdr .pkg-name-input { background:transparent; border:none; color:var(--text); font-size:12px; font-weight:700; font-family:'IBM Plex Sans',sans-serif; flex:1; min-width:0; padding:2px 4px; border-radius:2px; }
.pkg-card-hdr .pkg-name-input:focus { outline:none; background:var(--steel); border:1px solid var(--amber); color:#fff; }
.pkg-card-hdr .pkg-item-count { font-size:9px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.pkg-card-hdr .pkg-actions { display:flex; gap:4px; margin-left:auto; }
.pkg-card-body { padding:6px 0; max-height:200px; overflow-y:auto; }
.pkg-item { display:flex; align-items:center; gap:6px; padding:4px 12px; font-size:11px; color:var(--text); border-bottom:1px solid rgba(255,255,255,0.03); cursor:grab; transition:background 0.1s; }
.pkg-item:hover { background:rgba(255,255,255,0.03); }
.pkg-item:active { cursor:grabbing; }
.pkg-item.dragging { opacity:0.4; }
.pkg-item .pkg-item-id { font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--muted); min-width:24px; }
.pkg-item .pkg-item-disc { font-size:8px; padding:1px 5px; border-radius:2px; font-weight:700; letter-spacing:0.5px; }
.pkg-item .pkg-item-desc { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pkg-item .pkg-move-select { background:var(--weld); border:1px solid var(--border); color:var(--muted); font-size:9px; padding:1px 4px; border-radius:2px; cursor:pointer; max-width:90px; }
.pkg-item .pkg-move-select:hover { border-color:var(--amber); color:var(--text); }
.pkg-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.pkg-stat { font-size:10px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }

/* ── ADDENDUM / REVISION COMPARISON ── */
.rev-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 12px; background:rgba(167,139,250,0.06); border:1px solid rgba(167,139,250,0.25); border-radius:4px; margin-top:10px; }
.rev-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:3px; font-size:10px; font-weight:700; font-family:'IBM Plex Mono',monospace; cursor:pointer; border:1px solid var(--border); background:var(--plate); transition:all 0.15s; }
.rev-chip:hover { border-color:var(--amber); }
.rev-chip.active { border-color:#a78bfa; background:rgba(167,139,250,0.15); color:#a78bfa; }
.rev-chip .rev-dot { width:6px; height:6px; border-radius:50%; }
.delta-row { display:flex; align-items:center; gap:6px; padding:4px 10px; font-size:11px; border-bottom:1px solid rgba(255,255,255,0.04); }
.delta-row.added { background:rgba(45,206,106,0.06); }
.delta-row.added .delta-tag { color:#2dce6a; }
.delta-row.removed { background:rgba(232,64,64,0.06); }
.delta-row.removed .delta-tag { color:#e84040; }
.delta-row.changed { background:rgba(245,166,35,0.06); }
.delta-row.changed .delta-tag { color:var(--amber); }
.delta-tag { font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; min-width:50px; }
.delta-disc { font-size:8px; padding:1px 5px; border-radius:2px; font-weight:700; letter-spacing:0.5px; }
.delta-desc { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.delta-qty { font-family:'IBM Plex Mono',monospace; font-size:10px; min-width:80px; text-align:right; }

/* ── SCOPE FLAGS REVIEW PANEL ── */
.flags-panel { background:var(--plate); border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-top:10px; }
.flags-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); overflow-x:auto; }
.flags-tab { padding:10px 16px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:all 0.15s; display:flex; align-items:center; gap:6px; }
.flags-tab:hover { color:var(--text); background:rgba(255,255,255,0.02); }
.flags-tab.active { color:var(--amber); border-bottom-color:var(--amber); }
.flags-tab .flags-count { font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; min-width:18px; text-align:center; }
.flags-body { padding:14px; max-height:500px; overflow-y:auto; }
.flag-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04); transition:background 0.15s; border-radius:3px; margin-bottom:2px; }
.flag-row:hover { background:rgba(255,255,255,0.02); }
.flag-row.reviewed { opacity:0.7; }
.flag-row.resolved { opacity:0.35; text-decoration:line-through; }
.flag-check { accent-color:var(--amber); width:16px; height:16px; cursor:pointer; flex-shrink:0; margin-top:2px; }
.flag-content { flex:1; min-width:0; }
.flag-title { font-size:13px; color:var(--text); font-weight:600; line-height:1.5; }
.flag-meta { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; }
.flag-disc-tag { font-size:9px; font-weight:700; padding:2px 7px; border-radius:2px; letter-spacing:0.5px; display:inline-block; }
.flag-actions { display:flex; gap:4px; flex-shrink:0; align-items:flex-start; margin-top:2px; }

/* AI PANEL */
#ai-panel { background: var(--plate); border: 1px solid #3a6aaa; border-radius: 4px; padding: 14px; margin-bottom: 16px; }
#ai-panel .ai-header { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: #7ac0ff; letter-spacing: 1px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
#ai-input-row { display: flex; gap: 8px; margin-bottom: 10px; }
#ai-scope-input { flex: 1; background: var(--steel); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; border-radius: 3px; font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; }
#ai-scope-input:focus { outline: none; border-color: #3a6aaa; }
#ai-result { background: var(--steel); border: 1px solid var(--border); border-radius: 3px; padding: 10px; font-size: 12px; line-height: 1.6; min-height: 60px; white-space: pre-wrap; color: #a8c8e8; font-family: 'IBM Plex Mono', monospace; font-size: 11px; display: none; }
#ai-result.loading { color: var(--muted); font-style: italic; }
.ai-spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* PROGRESS PIPELINE */
.prog-pipeline { display:flex; flex-direction:column; gap:0; }
.prog-step { display:flex; align-items:flex-start; gap:10px; padding:8px 0; position:relative; }
.prog-step:not(:last-child)::after { content:''; position:absolute; left:11px; top:30px; bottom:-2px; width:2px; background:var(--border); }
.prog-step.active:not(:last-child)::after { background:var(--amber); }
.prog-step.done:not(:last-child)::after { background:var(--green); }
.prog-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; border:2px solid var(--border); background:var(--steel); color:var(--muted); transition:all 0.3s; z-index:1; }
.prog-step.active .prog-icon { border-color:var(--amber); color:var(--amber); background:var(--warn); animation:pulse-glow 1.5s ease-in-out infinite; }
.prog-step.done .prog-icon { border-color:var(--green); color:#000; background:var(--green); }
.prog-step.error .prog-icon { border-color:var(--red); color:#fff; background:var(--red); }
.prog-step.skip .prog-icon { border-color:var(--muted); color:var(--muted); background:var(--weld); }
.prog-body { flex:1; min-width:0; }
.prog-label { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.5px; color:var(--muted); transition:color 0.3s; }
.prog-step.active .prog-label { color:var(--amber); }
.prog-step.done .prog-label { color:var(--green); }
.prog-step.error .prog-label { color:var(--red); }
.prog-detail { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); margin-top:2px; transition:color 0.3s; }
.prog-step.active .prog-detail { color:var(--text); }
.prog-bar-wrap { display:flex; align-items:center; gap:8px; margin-top:5px; }
.prog-bar-track { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.prog-bar-fill { height:100%; border-radius:3px; transition:width 0.4s ease-out; width:0%; }
.prog-bar-fill.amber { background:linear-gradient(90deg, var(--amber-dim), var(--amber)); }
.prog-bar-fill.green { background:linear-gradient(90deg, #1a9e4f, var(--green)); }
.prog-bar-fill.blue { background:linear-gradient(90deg, #2a5aaa, #5a9aee); }
.prog-bar-fill.llama { background:linear-gradient(90deg, #6a4aaa, #9a7aee); }
.prog-bar-fill.stripe { background-image:repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(255,255,255,0.12) 6px, rgba(255,255,255,0.12) 12px); background-size:200% 100%; animation:stripe-scroll 1s linear infinite; }
.prog-pct { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; min-width:52px; text-align:right; color:var(--muted); transition:color 0.3s; }
.prog-step.active .prog-pct { color:var(--amber); }
.prog-step.done .prog-pct { color:var(--green); }
.prog-step.error .prog-pct { color:var(--red); }
@keyframes stripe-scroll { to { background-position: -34px 0; } }
@keyframes pulse-glow { 0%,100%{ box-shadow:0 0 0 0 rgba(245,166,35,0.3); } 50%{ box-shadow:0 0 0 6px rgba(245,166,35,0); } }

/* WARNING MODAL */
#warn-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 999; align-items: center; justify-content: center; }
#warn-modal.open { display: flex; }
.modal-box { background: var(--plate); border: 1px solid var(--warn-border); border-radius: 6px; padding: 20px; max-width: 480px; width: 90%; }
.modal-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; color: var(--amber); margin-bottom: 8px; }
.modal-body { font-size: 12px; color: var(--text); line-height: 1.6; margin-bottom: 14px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; }

/* DISC PANEL */


/* SUMMARY BARS */
.mh-bar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mh-bar-label { width: 140px; font-size: 11px; color: var(--muted); }
.mh-bar-track { flex: 1; height: 6px; background: var(--weld); border-radius: 3px; overflow: hidden; }
.mh-bar-fill { height: 100%; background: var(--amber); border-radius: 3px; transition: width 0.5s; }
.mh-bar-val { width: 70px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--amber); text-align: right; }

/* PROJECT ARCHIVE */
.proj-card { background: var(--plate); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.proj-card:hover { border-color: var(--amber); }
.proj-status { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.proj-status.closed { background: var(--muted); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--steel); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* TABS */
.tab-row { display: flex; gap: 2px; margin-bottom: 0; border-bottom: 1px solid var(--border); padding: 0 16px; background: var(--plate); }
.tab-btn { padding: 8px 14px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; transition: all 0.15s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--amber); border-bottom-color: var(--amber); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* OVERRIDE LOG */
.override-log { background: var(--steel); border: 1px solid var(--warn-border); border-radius: 3px; padding: 8px; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--amber); max-height: 120px; overflow-y: auto; }
.override-log .entry { display: flex; gap: 8px; margin-bottom: 3px; color: var(--muted); }
.override-log .entry span:first-child { color: var(--amber); }

.flex-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flex-row label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); }
.inline-input { background: var(--weld); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 3px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.inline-input:focus { outline: none; border-color: var(--amber); }

.total-row { background: var(--weld) !important; }
.total-row td { font-weight: 700; color: var(--amber) !important; font-family: 'IBM Plex Mono', monospace; }

/* Discount / note tag */
.note-tag { font-size: 9px; color: var(--muted); background: var(--steel); border: 1px solid var(--border); padding: 1px 4px; border-radius: 2px; cursor: help; }

/* ══ PRINT STYLES ══ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  #header, #nav, .no-print { display: none !important; }
  #content { margin-left: 0 !important; padding: 0 !important; }
  .panel { padding: 0 !important; }
  .tab-content { display: none !important; }
  #panel-ratesheet { display: block !important; }
  #rs-document { border: none !important; max-width: 100% !important; box-shadow: none !important; }
  @page { margin: 0.5in; size: letter portrait; }
}
.no-print { }

/* ══ SANITY CHECK ══ */
.sanity-flag { 
  display:inline-block; cursor:pointer; font-size:9px; font-family:'Rajdhani',sans-serif;
  font-weight:700; letter-spacing:0.5px; padding:1px 5px; border-radius:2px; margin-left:4px;
  background:rgba(232,92,26,0.2); color:var(--flame); border:1px solid var(--flame);
  animation: flagPulse 2s ease-in-out infinite;
}
.sanity-flag:hover { background:var(--flame); color:#fff; }
@keyframes flagPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.sc-ai-pending { color:var(--muted); font-style:italic; font-size:10px; }
.sc-ai-result  { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--blue); font-weight:700; }
.sc-choose-btn { 
  font-size:9px; padding:3px 7px; border-radius:2px; cursor:pointer; font-family:'Rajdhani',sans-serif;
  font-weight:700; letter-spacing:0.5px; border:1px solid; margin:0 2px;
}
.sc-use-input  { background:rgba(232,92,26,0.15); color:var(--flame); border-color:var(--flame); }
.sc-use-input:hover  { background:var(--flame); color:#fff; }
.sc-use-bm     { background:rgba(245,166,35,0.15); color:var(--amber); border-color:var(--amber); }
.sc-use-bm:hover     { background:var(--amber); color:#000; }
.sc-use-ai     { background:rgba(58,123,213,0.15); color:var(--blue); border-color:var(--blue); }
.sc-use-ai:hover     { background:var(--blue); color:#fff; }
.sc-resolved   { opacity:0.45; }
.sc-applied    { background:rgba(45,206,106,0.1); }
.sc-applied td:first-child { border-left:3px solid var(--green); }

[data-manual-override="1"] { border-color: var(--amber) !important; }
#sch-staffing input[title*="Auto-set"] { border-color: var(--border); }

/* VIEWER MODE — read-only overlay */
.viewer-mode input, .viewer-mode select, .viewer-mode textarea { pointer-events: none !important; opacity: 0.85; }
.viewer-mode button, .viewer-mode .btn, .viewer-mode [onclick]:not(.nav-item):not(.tab-btn) { pointer-events: none !important; opacity: 0.4; }
.viewer-mode .nav-item { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; }
.viewer-mode .tab-btn { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; }
.viewer-mode input[type="file"] { display: none !important; }
.viewer-mode .drop-zone { display: none !important; }
#viewer-banner { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: linear-gradient(135deg, #3a7bd5 0%, #2856a0 100%); color: #fff; padding: 6px 20px; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.viewer-mode #viewer-banner { display: flex !important; }
.viewer-mode #header { top: 32px; }

/* ROLE-BASED VISIBILITY */
.role-admin { display: none; }
.role-executive { display: none; }
.role-pm { display: none; }
.role-it { display: none; }
.role-owner { display: none; }
/* OWNER — platform god mode, sees EVERYTHING */
body.user-owner .role-owner { display: block; }
body.user-owner .role-owner.nav-section { display: block; }
body.user-owner .role-owner.nav-item { display: flex; }
body.user-owner .role-admin { display: block; }
body.user-owner .role-executive { display: block; }
body.user-owner .role-pm { display: block; }
body.user-owner .role-it { display: block; }
body.user-owner .role-admin.nav-section { display: block; }
body.user-owner .role-admin.nav-item { display: flex; }
body.user-owner .role-executive.nav-section { display: block; }
body.user-owner .role-executive.nav-item { display: flex; }
body.user-owner .role-pm.nav-section { display: block; }
body.user-owner .role-pm.nav-item { display: flex; }
body.user-owner .role-it.nav-section { display: block; }
body.user-owner .role-it.nav-item { display: flex; }
/* ADMIN — company-level admin */
body.user-admin .role-admin { display: block; }
body.user-admin .role-executive { display: block; }
body.user-admin .role-pm { display: block; }
body.user-admin .role-it { display: block; }
body.user-it .role-it { display: block; }
body.user-it .role-admin { display: block; }
body.user-it .role-executive { display: block; }
body.user-it .role-pm { display: block; }
body.user-executive .role-executive { display: block; }
body.user-pm .role-pm { display: block; }
/* IT users see admin sections but can't interact */
body.user-it .admin-write { pointer-events: none !important; opacity: 0.5; }
body.user-it .admin-write::after { content: '🔒'; position: absolute; top: 4px; right: 4px; font-size: 10px; }
/* Nav items in role sections need display:flex when visible */
body.user-admin .role-admin.nav-section { display: block; }
body.user-admin .role-admin.nav-item { display: flex; }
body.user-it .role-admin.nav-section { display: block; }
body.user-it .role-admin.nav-item { display: flex; }
body.user-it .role-it.nav-section { display: block; }
body.user-it .role-it.nav-item { display: flex; }
body.user-admin .role-executive.nav-section { display: block; }
body.user-admin .role-executive.nav-item { display: flex; }
body.user-executive .role-executive.nav-section { display: block; }
body.user-executive .role-executive.nav-item { display: flex; }
body.user-admin .role-pm.nav-section { display: block; }
body.user-admin .role-pm.nav-item { display: flex; }
body.user-pm .role-pm.nav-section { display: block; }
body.user-pm .role-pm.nav-item { display: flex; }
/* Nav section header styling */
.nav-section.admin-section { color: #e84040; }
body.user-owner .nav-section.admin-section { color: #ffd700; }
.nav-section.owner-section { color: #ffd700; font-weight: 700; }
/* Jarvis KB-writing sections — owner only */
.jarvis-owner-only { display: none; }
body.user-owner .jarvis-owner-only { display: block; }
body.user-owner .jarvis-owner-only.jarvis-flex-row { display: flex; }
body.user-it .jarvis-owner-only.jarvis-it-ok { display: block; }
.nav-section.exec-section { color: #a78bfa; }
.nav-section.pm-section { color: #3a7bd5; }

/* LOGIN SCREEN */
#login-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #0d1520 0%, #1a2332 40%, #0d1520 100%);
  z-index: 99999; display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Sans', sans-serif;
}
#login-screen.hidden { display: none !important; }
.login-box {
  background: var(--plate); border: 1px solid var(--border); border-radius: 8px;
  padding: 40px; width: 380px; max-width: 90vw; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.login-logo { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight: 700;
  color: var(--amber); letter-spacing: 2px; text-align: center; margin-bottom: 4px; }
.login-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: var(--muted); letter-spacing: 1px; text-align: center; margin-bottom: 28px; }
.login-field { margin-bottom: 16px; }
.login-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.login-input { width: 100%; background: var(--steel); border: 1px solid var(--border);
  color: var(--text); padding: 10px 14px; border-radius: 4px; font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif; box-sizing: border-box; }
.login-input:focus { outline: none; border-color: var(--amber); }
.login-btn { width: 100%; padding: 12px; background: var(--amber); color: #000;
  border: none; border-radius: 4px; cursor: pointer; font-family: 'Rajdhani', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 2px; margin-top: 8px; }
.login-btn:hover { background: var(--amber-dim); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-error { color: var(--red); font-size: 11px; text-align: center; margin-top: 10px;
  font-family: 'IBM Plex Mono', monospace; min-height: 16px; }
.login-forgot { text-align: center; margin-top: 16px; }
.login-forgot a { color: var(--muted); font-size: 11px; text-decoration: none; }
.login-forgot a:hover { color: var(--text); }
/* Hide app until logged in */
body:not(.authenticated) #header { display: none; }
body:not(.authenticated) #app { display: none; }
body.authenticated #login-screen { display: none; }