/* =========================================================
   Project Control System + Submittal Summary — design system
   Adapted from the original app's palette for visual continuity.
   ========================================================= */
:root{
  --primary-900:#062A4D; --primary-800:#083E6E; --primary-700:#0B5FA5;
  --primary-600:#1373C2; --primary-100:#E7F1FA; --primary-50:#F3F8FD;
  --accent:#F2A93B; --accent-dark:#C77B2E;
  --success:#1E8E5A; --success-bg:#E6F6EE;
  --warning:#B8860B; --warning-bg:#FFF6E0;
  --danger:#C0392B; --danger-bg:#FBEAE8;
  --info:#1FA2B8; --info-bg:#E4F6F8;
  --ink-900:#101828; --ink-700:#344054; --ink-500:#667085; --ink-300:#D0D5DD; --ink-100:#F2F4F7;
  --surface:#FFFFFF; --surface-alt:#F7FAFD; --border:#E3E9F0;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(8,62,110,.08);
  --shadow-lg:0 12px 28px rgba(8,62,110,.14);
  --sidebar-w:250px; --topbar-h:64px;

  --stA:#92D050; --stB:#00B0F0; --stC:#FFFF00; --stD:#C00000; --stUR:#FFD24D; --stE:#7030A0; --stW:#FF0000;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink-900); background:linear-gradient(180deg,var(--primary-50) 0%, #EEF3F8 100%);
  background-attachment:fixed;}
a{color:var(--primary-700); text-decoration:none;}
a:hover{color:var(--primary-900);}
h1,h2,h3,h4{color:var(--primary-900); margin:0 0 .4em 0;}
h1{font-size:1.55rem;font-weight:800;} h2{font-size:1.2rem;font-weight:700;} h3{font-size:1rem;font-weight:700;}
p{line-height:1.55;}

/* Baseline for every ordinary text-entry control app-wide, so a plain
   <input>/<select>/<textarea> that ends up outside a styled wrapper (a bare
   cell in a data-table, a one-off dropdown that forgot its container class,
   etc.) still matches the design system instead of silently falling back to
   the browser's default control chrome (system font, square corners). This
   sits early in the cascade at equal specificity to .form-field/.search-bar/
   .revtable's own input rules, so those — defined further down — still win
   wherever they apply; this is only the floor for everything else. */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="tel"], input[type="password"], input[type="search"], input:not([type]),
select, textarea{
  font-family:inherit; font-size:.85rem; color:var(--ink-900);
  border:1px solid var(--border); border-radius:8px; padding:8px 11px; background:#fff;
}

.app-shell{display:flex; min-height:100vh;}
.sidebar{width:var(--sidebar-w); flex-shrink:0; background:linear-gradient(180deg,var(--primary-900) 0%,var(--primary-800) 60%,var(--primary-700) 100%);
  color:#fff; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; box-shadow:var(--shadow-lg); z-index:20;}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:20px; border-bottom:1px solid rgba(255,255,255,.12);}
.logo-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#3a2405;font-size:1.05rem;}
.brand-text{font-weight:800; font-size:1rem; color:#fff;}
.brand-sub{font-size:.66rem; color:#BFE0FF; letter-spacing:.05em; text-transform:uppercase;}
.nav-group{padding:14px 12px 4px;}
.nav-group-title{font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:#9CC4EE; font-weight:700; padding:6px 10px;}
.nav-link{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; color:#DCEBFA; font-size:.86rem; font-weight:600; margin:2px 0;}
.nav-link:hover{background:rgba(255,255,255,.10); color:#fff;}
.nav-link.active{background:rgba(255,255,255,.16); color:#fff; box-shadow:inset 3px 0 0 var(--accent);}
.dot{width:6px;height:6px;border-radius:50%; background:#7EB6E8; flex-shrink:0;}
.nav-link.active .dot{background:var(--accent);}

.main-area{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:10; box-shadow:var(--shadow-sm);}
.current-project{font-weight:700; color:var(--primary-900); font-size:.95rem;}
.muted{color:var(--ink-500); font-weight:500; font-size:.78rem; display:block;}
.user-chip{display:flex; align-items:center; gap:10px; padding:6px 12px; border-radius:999px; background:var(--primary-50); border:1px solid var(--primary-100);}
.avatar{width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--primary-700),var(--primary-900)); color:#fff;
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;}
.content{padding:22px 26px 60px;}
.footer-credit{padding:16px 28px; text-align:center; color:var(--ink-500); font-size:.78rem; border-top:1px solid var(--border); background:var(--surface);}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px; margin-bottom:18px;}
.card-header{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:14px;}
.card-header p{color:var(--ink-500); font-size:.85rem; margin:2px 0 0;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap;}

.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:#fff; color:var(--ink-700);
  padding:8px 14px; font-size:.83rem; font-weight:600; border-radius:8px; cursor:pointer; font-family:inherit;}
.btn:hover{background:var(--primary-50); border-color:var(--primary-100);}
.btn-primary{background:var(--primary-700); border-color:var(--primary-700); color:#fff;}
.btn-primary:hover{background:var(--primary-900);}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-dark)); border-color:var(--accent-dark); color:#3a2405;}
.btn-outline{background:#fff;}
.btn-danger{color:var(--danger); border-color:#E3B4B1;}
.btn-danger:hover{background:var(--danger-bg);}
.btn-sm{padding:5px 10px; font-size:.76rem;}

.form-field{margin-bottom:14px;}
.form-field label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.03em;color:var(--ink-700);margin-bottom:4px;text-transform:uppercase;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 11px; font-size:.9rem; font-family:inherit; background:#fff;}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--primary-600); outline-offset:0;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media(max-width:760px){.form-grid{grid-template-columns:1fr;}}
.required-mark{color:var(--danger);}

table.data-table{border-collapse:collapse; width:100%; font-size:.84rem;}
.data-table th{background:var(--primary-50); color:var(--primary-900); font-weight:700; padding:9px 10px; border:1px solid var(--border); text-align:left; white-space:nowrap; font-size:.76rem; text-transform:uppercase; letter-spacing:.02em;}
.data-table td{border:1px solid var(--border); padding:8px 10px; vertical-align:middle;}
.data-table tbody tr:hover{background:var(--primary-50);}
.table-wrap{overflow-x:auto;}
.table-actions{white-space:nowrap; display:flex; gap:6px;}
.empty-state{padding:36px 20px; text-align:center; color:var(--ink-500); font-size:.9rem;}
.big-icon{font-size:2.2rem; margin-bottom:8px;}

.badge{display:inline-block; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px;}
.badge-success{background:var(--success-bg); color:var(--success);}
.badge-warning{background:var(--warning-bg); color:var(--warning);}
.badge-danger{background:var(--danger-bg); color:var(--danger);}
.badge-info{background:var(--info-bg); color:var(--info);}
.badge-neutral{background:var(--ink-100); color:var(--ink-500);}

.st{display:inline-block; min-width:30px; text-align:center; font-weight:700; padding:3px 8px; border-radius:6px; border:1px solid rgba(0,0,0,.15); font-size:.72rem;}
.st-A{background:var(--stA); color:#000;}
.st-B{background:var(--stB); color:#000;}
.st-C{background:var(--stC); color:#000;}
.st-D{background:var(--stD); color:#fff;}
.st-UR{background:var(--stUR); color:#000; font-style:italic;}
.st-E{background:var(--stE); color:#fff;}
.st-W{background:var(--stW); color:#fff;}
.st-none{background:var(--ink-100); color:var(--ink-500);}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; border-top:4px solid var(--primary-700); box-shadow:var(--shadow-sm);}
.kpi .v{font-size:1.9rem; font-weight:800; line-height:1.1; color:var(--primary-900);}
.kpi .l{font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--ink-500); margin-top:4px; text-transform:uppercase;}
.kpi.kA{border-top-color:var(--stA);} .kpi.kB{border-top-color:var(--stB);}
.kpi.kC{border-top-color:#C8AE00;} .kpi.kD{border-top-color:var(--stD);}
.kpi.kUR{border-top-color:var(--warning);}
.kpi.kP{border-top-color:var(--primary-700);}
.kpi.kOD{border-top-color:var(--danger);}

/* ---- Submittal Summary module: matrix/status extras not covered above ---- */
.title-cell{min-width:220px; white-space:normal;}

/* Submittal Summary tables (Overall, Matrix, Status A-D, Under Review,
   Dashboard, Searcher, Letters) — every data cell centered, per request.
   Headers keep their normal left alignment; only body cells (td) change. */
.submittal-table td{text-align:center;}
.submittal-table .title-cell{text-align:center;}
.submittal-table .table-actions{justify-content:center;}
.overdue-row td{background:var(--danger-bg) !important;}
.overduebadge{display:inline-block; margin-left:6px; font-size:.62rem; font-weight:800; letter-spacing:.03em; padding:2px 6px; border-radius:99px; background:var(--danger); color:#fff; text-transform:uppercase; vertical-align:middle;}
.searcher-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
@media (max-width:900px){.searcher-grid{grid-template-columns:1fr;}}
.bigstatus{margin-top:10px; text-align:center; font-size:1.4rem; font-weight:800; letter-spacing:.03em; padding:14px; border-radius:var(--radius); background:var(--ink-100); color:var(--ink-500);}
.mini-toolbar{display:flex; gap:8px; justify-content:flex-end; margin-bottom:10px;}
.hint-banner{background:var(--info-bg); color:#0d7186; border:1px solid #c8e9ee; border-radius:var(--radius); padding:12px 16px; font-size:.85rem; margin-bottom:14px;}
.badge-out{background:var(--info-bg); color:var(--info);}
.badge-in{background:var(--success-bg); color:var(--success);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.grid-2 .card{margin-bottom:0;}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;}}
.data-table tfoot th{background:var(--primary-100);}

.bar{display:flex; height:24px; border-radius:6px; overflow:hidden; border:1px solid var(--border); margin:4px 0 16px;}
.bar div{display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; color:#000; min-width:0; overflow:hidden;}

.alert{padding:11px 15px; border-radius:8px; font-size:.85rem; margin-bottom:14px; border:1px solid transparent;}
.alert-success{background:var(--success-bg); color:var(--success); border-color:#bfe6d3;}
.alert-error{background:var(--danger-bg); color:var(--danger); border-color:#f0c4c0;}
.alert-info{background:var(--info-bg); color:#0d7186; border-color:#c8e9ee;}

.checkbox-row{display:flex; align-items:center; gap:8px; font-size:.85rem;}
fieldset{border:1px solid var(--border); border-radius:8px; padding:12px 14px;}
legend{font-size:.78rem; font-weight:700; color:var(--ink-700); padding:0 6px;}
.permission-grid{display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:center;}

.pill{font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--ink-100); color:var(--ink-700); text-transform:uppercase; letter-spacing:.03em;}
.pill.admin{background:#E3EEDB; color:#2E7D32;}
.pill.pm{background:#E4F0FA; color:var(--primary-700);}

.revtable td{padding:5px 6px;}
.revtable input, .revtable select{width:100%; border:1px solid var(--border); border-radius:6px; padding:6px 7px; font-size:.8rem; font-family:inherit;}
.rowbtn{border:none;background:none;cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:4px;}
.rowbtn:hover{background:var(--primary-50);}

.search-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.search-bar input, .search-bar select{border:1px solid var(--border); border-radius:8px; padding:8px 11px; font-size:.85rem; font-family:inherit;}

/* Typeahead dropdown for search boxes wired via data-autocomplete-list — see
   pcsAutocomplete() in app.js. Anchored to its input's wrapper. */
.autocomplete-wrap{position:relative; display:inline-block;}
.autocomplete-list{position:absolute; top:calc(100% + 4px); left:0; right:0; min-width:260px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); max-height:260px; overflow-y:auto; z-index:30;}
.autocomplete-item{padding:8px 12px; font-size:.85rem; color:var(--ink-700); cursor:pointer;}
.autocomplete-item + .autocomplete-item{border-top:1px solid var(--border);}
.autocomplete-item:hover, .autocomplete-item.active{background:var(--primary-50); color:var(--primary-900);}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--primary-900),var(--primary-700)); padding:20px;}
.login-box{background:#fff; border-radius:14px; max-width:400px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden;}
.login-head{background:var(--primary-900); color:#fff; padding:22px 26px;}
.login-head b{font-size:1.15rem;}
.login-head .sub{font-size:.78rem; opacity:.85; margin-top:2px;}
.login-body{padding:24px 26px;}
.login-foot{padding:0 26px 22px; font-size:.78rem; color:var(--ink-500);}

.install-wrap{max-width:720px;margin:40px auto;padding:0 20px;}
.step-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
code, .code{background:var(--ink-100); padding:2px 6px; border-radius:5px; font-size:.85em;}
pre{background:var(--ink-900); color:#e8edf3; padding:14px 16px; border-radius:8px; overflow-x:auto; font-size:.8rem;}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%); transition:transform .2s;}
  .main-area{margin-left:0;}
}

/* Applies to any in-app page (not the standalone *_print.php documents,
   which have no sidebar/topbar to begin with) that offers a "Print /
   Save as PDF" button — hides app chrome and anything marked .noprint. */
@media print{
  .sidebar, .topbar, .noprint{display:none !important;}
  .main-area{margin-left:0 !important;}
  .content{padding:0 !important;}
}