:root{
  --ink:#16202b; --slate:#2b3a4a; --muted:#64748b; --line:#e2e8f0;
  --bg:#e7ecf2; --panel:#ffffff; --accent:#1e5fa8; --accent-soft:#e8f0fa;
  --ok:#1a7f4b; --warn:#b7791f; --bad:#c0392b; --neutral:#64748b;
  --input-border:#94a3b8; --card-border:#bcc9d8;
  --shadow:0 1px 3px rgba(16,32,43,.12),0 6px 18px rgba(16,32,43,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45}

/* Header */
header{background:var(--ink);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
header .brand{font-weight:700;font-size:16px;letter-spacing:.2px}
header .proj{background:rgba(255,255,255,.12);padding:3px 10px;border-radius:5px;font-size:12px;font-weight:600}

/* Layout */
.wrap{max-width:1400px;margin:0 auto;padding:22px}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:0 0 12px;font-weight:700}
h2.section-gap{margin-top:26px}

/* Dashboard cards */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:8px}
.card{background:var(--panel);border:1px solid var(--card-border);border-radius:10px;padding:16px 16px 14px;box-shadow:var(--shadow)}
.card .num{font-size:30px;font-weight:750;letter-spacing:-.5px;line-height:1}
.card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-top:8px;font-weight:600}
.card .sub{font-size:11px;color:var(--muted);margin-top:3px;min-height:14px}
.card.total .num{color:var(--ink)} .card.tbs .num{color:var(--neutral)}
.card.appr .num{color:var(--ok)} .card.del .num{color:var(--bad)} .card.stop .num{color:var(--warn)}
.card.total{border-top:3px solid var(--accent)} .card.tbs{border-top:3px solid var(--neutral)}
.card.appr{border-top:3px solid var(--ok)} .card.del{border-top:3px solid var(--bad)} .card.stop{border-top:3px solid var(--warn)}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--card-border);border-radius:10px;padding:18px;box-shadow:var(--shadow)}

/* Form */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px}
.field{display:flex;flex-direction:column;gap:4px}
.field.full{grid-column:1/-1}
.field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.field.required label::after{content:" *";color:var(--bad)}
/* Clearly visible input borders (was too faint at --line) */
.field input,.field select,.field textarea{
  font-family:var(--font);font-size:13px;padding:8px 10px;border:1px solid var(--input-border);
  border-radius:7px;background:#fff;color:var(--ink)
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.field textarea{resize:vertical;min-height:44px}

.form-actions{margin-top:18px;display:flex;align-items:center;gap:14px}
button,.btn{font-family:var(--font);font-size:13px;font-weight:600;padding:9px 18px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--slate);cursor:pointer}
button:hover:not(:disabled){border-color:#c4d1de;background:#f8fafc}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover:not(:disabled){background:#194f8c}

.msg{font-size:13px;font-weight:600}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--bad)}

@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}

/* Utility */
.hidden{display:none !important}
.muted{color:var(--muted)}

/* Header extras */
header .spacer{flex:1}
.user-badge{font-size:12px;font-weight:600;color:#cdd8e3;background:rgba(255,255,255,.1);padding:4px 10px;border-radius:5px}
.header-btn{font-size:12px;font-weight:600;padding:6px 12px;border-radius:6px;border:1px solid #34506b;background:#22303f;color:#fff;cursor:pointer}
.header-btn:hover{background:#2c3d4f}

/* Section head with a right-aligned action */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-head h2{margin-bottom:12px}

/* Form actions cancel button */
#cancel-edit{color:var(--slate)}

/* Records table */
.table-panel{padding:0;overflow:auto}
table.records{border-collapse:collapse;width:100%;font-size:12.5px}
table.records th{position:sticky;top:0;background:#f1f5f9;color:var(--slate);text-align:left;padding:9px 12px;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}
table.records td{padding:8px 12px;border-bottom:1px solid #f1f5f9;color:var(--slate);white-space:nowrap}
table.records tr:hover td{background:#f8fbff}
.actions-col{text-align:right;white-space:nowrap}
.row-btn{padding:4px 10px;font-size:12px;margin-left:6px}
.row-btn.danger{color:var(--bad);border-color:#e6c3bd}
.row-btn.danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.empty-note{padding:18px;color:var(--muted);font-size:13px}

/* User management form: inline row */
.user-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:16px}
.user-form .field{min-width:170px}
.users-table{margin-top:4px}

/* Header: project selector + view toggle */
.header-select{font-family:var(--font);font-size:13px;padding:6px 10px;border-radius:6px;border:1px solid #34506b;background:#22303f;color:#fff;max-width:220px}
.view-toggle{display:inline-flex;gap:2px;background:#22303f;border:1px solid #34506b;border-radius:7px;padding:2px}
.view-toggle .header-btn{border:none;background:transparent}
.view-toggle .header-btn.active{background:var(--accent);color:#fff}

/* Create-project + admin sub-headings */
.new-project-panel{margin-bottom:16px}
.sub-h{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin:18px 0 10px;font-weight:750}
.sub-h:first-child{margin-top:0}
.checkbox-field{flex-direction:row;align-items:center;gap:8px;min-width:auto}
.checkbox-field label{margin:0}
.checkbox-field input{width:16px;height:16px}

/* Per-project role chips in the users table */
.role-chip{display:inline-flex;align-items:center;background:var(--accent-soft);color:#194f8c;border-radius:14px;padding:2px 4px 2px 10px;font-size:11px;font-weight:700;margin:2px 4px 2px 0}
.chip-x{border:none;background:transparent;color:#194f8c;font-size:14px;line-height:1;padding:0 4px;cursor:pointer}
.chip-x:hover{color:var(--bad)}

/* Portfolio overall row */
.overall-row td{font-weight:750;background:#f1f5f9;border-top:2px solid var(--line)}

/* Read-only project target on the New Drawing form */
.form-target{font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-soft);
  border:1px solid #cfe0f2;border-radius:7px;padding:8px 12px;margin-bottom:12px;display:inline-block}

/* Button row (Export CSV / Export PDF together) */
.btn-row{display:inline-flex;gap:8px}

/* Dashboard breakdowns */
.breakdowns{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.breakdown{padding:14px 16px}
.breakdown .sub-h{margin:0 0 10px}
.bd-list{display:flex;flex-direction:column;gap:2px}
.bd-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding-top:6px}
.bd-row .bd-k{color:var(--slate)}
.bd-row .bd-v{font-weight:750;font-variant-numeric:tabular-nums}
.bd-bar{height:5px;border-radius:3px;background:var(--accent);margin-top:2px;min-width:4px}
@media(max-width:1000px){.breakdowns{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.breakdowns{grid-template-columns:1fr}}

/* Portfolio flash cards */
.portfolio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-bottom:20px}
.portfolio-card{
  padding:0;overflow:hidden;border:1px solid #c3cedb;border-radius:12px;
  box-shadow:0 1px 2px rgba(16,32,43,.08),0 8px 22px rgba(16,32,43,.08)
}
/* Dark project header strip */
.portfolio-card .pc-head{
  display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.3px;padding:13px 16px
}
.portfolio-card .pc-head::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(30,95,168,.25)
}
.pc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:16px;align-items:stretch}
.pc-stat{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  background:#f8fafc;border:1px solid #c3cedb;border-top:3px solid #c3cedb;
  border-radius:9px;padding:12px 4px 10px
}
.pc-num{font-size:22px;font-weight:800;line-height:1}
/* reserve two lines so every tile is the same height regardless of label wrap */
.pc-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-top:6px;
  font-weight:700;line-height:1.25;min-height:23px;display:flex;align-items:center;justify-content:center}
/* Approved-progress bar on each card */
.pc-appr{padding:0 16px 15px}
.pc-appr-top{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);font-weight:700;margin-bottom:5px}
.pc-appr-pct{color:var(--ok)}
.pc-appr-track{height:8px;background:#e8edf3;border-radius:5px;overflow:hidden}
.pc-appr-fill{height:100%;background:var(--ok);border-radius:5px;min-width:2px}
.pc-stat.total{border-top-color:var(--accent)} .pc-stat.total .pc-num{color:var(--accent)}
.pc-stat.tbs{border-top-color:var(--neutral)}  .pc-stat.tbs .pc-num{color:var(--neutral)}
.pc-stat.appr{border-top-color:var(--ok)}      .pc-stat.appr .pc-num{color:var(--ok)}
.pc-stat.del{border-top-color:var(--bad)}      .pc-stat.del .pc-num{color:var(--bad)}
.pc-stat.stop{border-top-color:var(--warn)}    .pc-stat.stop .pc-num{color:var(--warn)}
@media(max-width:640px){.pc-grid{grid-template-columns:repeat(2,1fr)}}

/* Portfolio slicers */
.slicers{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:16px}
.slicers .field{min-width:180px;flex:1}
.slicers .header-btn{color:var(--slate);border-color:var(--input-border);background:#fff}
.slicers .header-btn:hover{background:#f8fafc}

/* Portfolio KPI strip */
.pf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.card.pf-proj{border-top:3px solid var(--ink)} .card.pf-proj .num{color:var(--ink)}
.card.unassigned{border-top:3px solid #a16207} .card.unassigned .num{color:#a16207}

/* Portfolio charts grid */
.pf-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.pf-charts .breakdown{padding:14px 16px}
.bd-bar.red{background:var(--bad)}
@media(max-width:1000px){.pf-charts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pf-charts{grid-template-columns:1fr}}

/* Login page */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--ink)}
.login-card{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:30px 30px 26px;width:100%;max-width:360px}
.login-brand{font-size:20px;font-weight:750;color:var(--ink)}
.login-sub{font-size:13px;color:var(--muted);margin:4px 0 20px}
.login-card .field{margin-bottom:14px}
.login-btn{width:100%;margin-top:4px;justify-content:center}
#login-msg{margin-top:12px;min-height:16px}