/* Construction Demo Theme */
:root {
  --void: #0d0d0d;
  --deep: #1a1a1a;
  --surface: #242424;
  --elevated: #2e2e2e;
  --amber: #F5A623;
  --rust: #c44a1a;
  --text: #f2ede6;
  --dim: rgba(242,237,230,0.3);
  --mid: rgba(242,237,230,0.6);
  --safe: #22c55e;
  --warn: #F5A623;
  --danger: #ef4444;
  --info: #c8dde4;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Barlow', sans-serif; background: var(--void); color: var(--text); min-height:100vh; }
a { color: inherit; text-decoration: none; }

/* Layout */
.shell { display:flex; min-height:100vh; }
#sidebar { width:220px; background:var(--deep); border-right:1px solid rgba(245,166,35,0.1); position:fixed; top:0; bottom:0; left:0; display:flex; flex-direction:column; z-index:40; }
#header { position:fixed; top:0; left:220px; right:0; height:56px; background:rgba(26,26,26,0.95); backdrop-filter:blur(8px); border-bottom:1px solid rgba(245,166,35,0.1); display:flex; align-items:center; padding:0 24px; z-index:30; }
#main { margin-left:220px; padding:80px 24px 24px; flex:1; }

/* Cards */
.card { background:var(--deep); border:1px solid rgba(245,166,35,0.08); border-radius:6px; padding:20px; transition:border-color 0.2s; }
.card:hover { border-color:rgba(245,166,35,0.25); }
.kpi { text-align:center; }
.kpi .value { font-size:2rem; font-weight:700; color:var(--amber); font-variant-numeric:tabular-nums; }
.kpi .label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--mid); margin-top:4px; }
.kpi .sub { font-size:0.7rem; color:var(--dim); margin-top:2px; }

/* Table */
table { width:100%; border-collapse:collapse; font-size:0.8rem; }
th { text-align:left; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--dim); padding:8px 12px; border-bottom:1px solid rgba(245,166,35,0.1); font-weight:500; }
td { padding:10px 12px; border-bottom:1px solid rgba(245,166,35,0.05); color:var(--mid); }
tr:hover td { background:rgba(245,166,35,0.02); }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:2px 8px; font-size:0.6rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; border-radius:3px; }
.badge-safe { background:rgba(34,197,94,0.1); color:var(--safe); }
.badge-warn { background:rgba(245,166,35,0.1); color:var(--warn); }
.badge-danger { background:rgba(239,68,68,0.1); color:var(--danger); }
.badge-info { background:rgba(200,221,228,0.1); color:var(--info); }
.badge-neutral { background:rgba(242,237,230,0.06); color:var(--mid); }

/* Progress */
.progress { height:6px; background:rgba(245,166,35,0.1); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg, var(--amber), var(--rust)); border-radius:3px; transition:width 0.5s ease; }

/* Grid helpers */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

/* Section */
.section-title { font-size:1.5rem; font-weight:700; letter-spacing:0.05em; margin-bottom:4px; }
.section-sub { font-size:0.75rem; color:var(--dim); font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:20px; }

/* Gantt bar */
.gantt-bar { height:24px; border-radius:3px; position:relative; display:flex; align-items:center; padding-left:8px; font-size:0.65rem; font-weight:600; }
.gantt-fill { position:absolute; left:0; top:0; bottom:0; border-radius:3px; }

/* Alert */
.alert { padding:12px 16px; border-radius:6px; font-size:0.8rem; display:flex; align-items:center; gap:8px; }
.alert-warn { background:rgba(245,166,35,0.08); border:1px solid rgba(245,166,35,0.2); color:var(--amber); }
.alert-danger { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); color:var(--danger); }

@media(max-width:768px) {
  #sidebar { display:none; }
  #header { left:0; }
  #main { margin-left:0; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:1fr; }
}