:root{
  --ink:#1c2128; --ink-soft:#565f68; --muted:#767f87;
  --paper:#f5f3ee; --surface:#ffffff; --surface-2:#eeece4;
  --line:#ddd8cc; --line-soft:#e7e3d8;
  --accent:#cf5f0e; --accent-ink:#fff8f0; --accent-soft:#fbe6d3;
  --good:#1f8a4c; --good-soft:#e3f4e9;
  --bad:#c53c2e; --bad-soft:#fbe7e3;
  --shadow:rgba(28,24,16,0.09);
  --focus:#2f6fb0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eeece6; --ink-soft:#b7b2a6; --muted:#8b8578;
    --paper:#15130f; --surface:#1d1b16; --surface-2:#26231c;
    --line:#3a3529; --line-soft:#2c2820;
    --accent:#f28a3f; --accent-ink:#1a0f04; --accent-soft:#3a2513;
    --good:#4fbf82; --good-soft:#173625;
    --bad:#e2695a; --bad-soft:#3a1e19;
    --shadow:rgba(0,0,0,0.45);
    --focus:#7fb2e6;
  }
}
:root[data-theme="dark"]{
  --ink:#eeece6; --ink-soft:#b7b2a6; --muted:#8b8578;
  --paper:#15130f; --surface:#1d1b16; --surface-2:#26231c;
  --line:#3a3529; --line-soft:#2c2820;
  --accent:#f28a3f; --accent-ink:#1a0f04; --accent-soft:#3a2513;
  --good:#4fbf82; --good-soft:#173625;
  --bad:#e2695a; --bad-soft:#3a1e19;
  --shadow:rgba(0,0,0,0.45);
  --focus:#7fb2e6;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700; text-wrap:balance; margin:0;}
.num{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
a{color:var(--accent);}
button{font-family:inherit;}
::selection{background:var(--accent-soft);}

#app{max-width:820px; margin:0 auto; padding:0 16px calc(96px + env(safe-area-inset-bottom,0px));}

/* ---- topbar ---- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:14px 16px 10px; margin:0 -16px 18px;
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:820px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:9px;}
.brand-mark{width:30px; height:30px; border-radius:7px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex:none;}
.brand-mark svg{width:17px; height:17px;}
.brand-name{font-size:21px; letter-spacing:0.2px;}
.tabs{display:flex; gap:4px; background:var(--surface-2); padding:3px; border-radius:9px; flex:none;}
.tab{
  border:none; background:transparent; color:var(--ink-soft); font-weight:600;
  font-size:13.5px; padding:7px 13px; border-radius:7px; cursor:pointer;
}
.tab[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px var(--shadow);}
.tab:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

.topbar-actions{display:flex; align-items:center; gap:8px;}
.account-btn{
  display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface);
  border-radius:99px; padding:5px 12px 5px 5px; cursor:pointer; font-weight:600; font-size:13px; color:var(--ink);
}
.avatar{width:24px; height:24px; border-radius:99px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none;}
.account-menu{position:absolute; right:16px; top:56px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px var(--shadow); min-width:200px; z-index:40; overflow:hidden;}
.account-menu button{display:block; width:100%; text-align:left; padding:11px 14px; border:none; background:none; color:var(--ink); font-size:13.5px; cursor:pointer;}
.account-menu button:hover{background:var(--surface-2);}
.account-menu .who{padding:12px 14px; border-bottom:1px solid var(--line-soft);}
.account-menu .who .n{font-weight:700; font-size:14px;}
.account-menu .who .r{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}

/* ---- generic ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px;}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px;}
.card-title{font-size:19px;}
.card-sub{color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600;}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px;}
.field:last-child{margin-bottom:0;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}
input[type="text"], input[type="date"], input[type="number"], input[type="password"], select, textarea{
  font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:9px; padding:10px 11px; width:100%;
}
textarea{resize:vertical; min-height:76px; font-family:inherit;}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row > *{flex:1 1 160px; min-width:0;}
.btn{
  font-weight:600; font-size:14px; border-radius:9px; padding:10px 16px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.btn:hover{background:var(--surface-2);}
.btn-accent{background:var(--accent); color:var(--accent-ink); border-color:transparent;}
.btn-accent:hover{filter:brightness(1.05);}
.btn-ghost{border-color:transparent; background:transparent; color:var(--ink-soft);}
.btn-sm{padding:6px 11px; font-size:12.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.muted{color:var(--muted);}
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600;}
.pill-good{background:var(--good-soft); color:var(--good);}
.pill-bad{background:var(--bad-soft); color:var(--bad);}
.pill-neutral{background:var(--surface-2); color:var(--ink-soft);}
.banner{background:var(--accent-soft); border:1px solid var(--accent); color:var(--ink); border-radius:11px; padding:11px 13px; font-size:13.5px; margin-bottom:14px;}
.banner strong{color:var(--accent);}
.banner-bad{background:var(--bad-soft); border-color:var(--bad);}
.banner-bad strong{color:var(--bad);}
[hidden]{display:none !important;}

/* ---- auth screens ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px 26px; box-shadow:0 12px 32px var(--shadow);}
.auth-brand{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.auth-title{font-size:26px; margin-bottom:4px;}
.auth-sub{color:var(--muted); font-size:13.5px; margin-bottom:22px;}
.auth-error{background:var(--bad-soft); color:var(--bad); border-radius:9px; padding:10px 12px; font-size:13px; margin-bottom:14px;}

/* ---- landing ---- */
.landing{padding:28px 0 10px;}
.landing h1{font-size:34px; margin-bottom:6px;}
.landing p{color:var(--ink-soft); max-width:46ch; margin-bottom:26px;}
.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.choice-grid{grid-template-columns:1fr;}}
.choice{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:20px; cursor:pointer; display:flex; flex-direction:column; gap:8px;
}
.choice:hover{border-color:var(--accent);}
.choice-icon{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}
.choice-icon svg{width:20px; height:20px;}
.choice h3{font-size:20px;}
.choice p{color:var(--muted); font-size:13.5px; margin:0;}

/* ---- manpower ---- */
.mp-stat{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--ink-soft);}
.att-list{display:flex; flex-direction:column; border-top:1px solid var(--line-soft);}
.att-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.att-name{flex:1; min-width:0;}
.att-name .who{font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.att-name .trade{color:var(--muted); font-size:12px;}
.switch{
  flex:none; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft);
  font-weight:700; font-size:11.5px; letter-spacing:0.03em; text-transform:uppercase;
  padding:10px 10px; min-height:40px; border-radius:99px; cursor:pointer; width:80px; text-align:center;
}
.switch[aria-pressed="true"]{background:var(--good-soft); color:var(--good); border-color:transparent;}
input.hours-input{flex:none; width:58px; text-align:center; padding:10px 4px; min-height:40px;}
.row-remove{flex:none; border:none; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:8px; min-width:36px; min-height:36px;}
.row-remove:hover{color:var(--bad);}
.add-worker{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.add-worker input{flex:1 1 120px;}
.empty-roster{color:var(--muted); font-size:13.5px; padding:14px 0; text-align:center;}

/* ---- photos ---- */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:12px;}
.photo-thumb{position:relative; aspect-ratio:1; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); cursor:pointer;}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-remove{position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:99px; background:rgba(20,16,10,0.65); color:#fff; border:none; font-size:13px; line-height:1; cursor:pointer;}
.upload-label{display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
.lightbox{position:fixed; inset:0; background:rgba(10,8,5,0.85); z-index:60; display:flex; align-items:center; justify-content:center; padding:24px;}
.lightbox img{max-width:100%; max-height:100%; border-radius:8px;}

/* ---- sticky save bar ---- */
.savebar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--surface); border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
}
.savebar-inner{max-width:820px; margin:0 auto; display:flex; align-items:center; gap:12px;}
.savebar-status{flex:1; font-size:12.5px; color:var(--muted); min-width:0;}
.savebar-status strong{color:var(--ink);}

/* ---- manager ---- */
.filter-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px;}
.chip-group{display:flex; gap:6px; background:var(--surface-2); padding:3px; border-radius:99px;}
.chip{border:none; background:transparent; color:var(--ink-soft); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:99px; cursor:pointer;}
.chip[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px var(--shadow);}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr 1fr;}}
.stat-tile{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:13px 14px;}
.stat-tile .n{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.1;}
.stat-tile .lbl{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; margin-top:3px;}
.alert-card{border-left:3px solid var(--bad); background:var(--bad-soft); border-radius:0 11px 11px 0; padding:11px 13px; margin-bottom:14px; font-size:13.5px;}
.alert-card strong{display:block; margin-bottom:3px; color:var(--bad);}
.report-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden;}
.report-summary{list-style:none; cursor:pointer; padding:13px 15px; display:flex; align-items:center; gap:12px;}
.report-summary::-webkit-details-marker{display:none;}
.report-summary .chevron{margin-left:auto; color:var(--muted); transition:transform .15s;}
details[open] .chevron{transform:rotate(90deg);}
.rs-main{flex:1; min-width:0;}
.rs-site{font-weight:700; font-size:15.5px;}
.rs-date{color:var(--muted); font-size:12.5px;}
.report-body{padding:0 15px 15px; border-top:1px solid var(--line-soft);}
.rb-section{margin-top:13px;}
.rb-label{font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:700; margin-bottom:5px;}
.rb-text{white-space:pre-wrap; font-size:13.5px;}
table.att-table{width:100%; border-collapse:collapse; font-size:13px;}
table.att-table th{text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; padding:6px 4px; border-bottom:1px solid var(--line);}
table.att-table td{padding:6px 4px; border-bottom:1px solid var(--line-soft);}
.att-table-wrap{overflow-x:auto;}
.empty-state{text-align:center; padding:40px 16px; color:var(--muted);}
.empty-state h3{color:var(--ink-soft); margin-bottom:6px;}

.site-manager-list{display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
.site-manager-row{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--surface-2); border-radius:9px; font-size:13.5px;}
.site-manager-row .name{flex:1; font-weight:600;}

/* ---- team / users panel ---- */
.user-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap;}
.user-row:last-child{border-bottom:none;}
.user-row .u-main{flex:1; min-width:140px;}
.user-row .u-name{font-weight:600; font-size:14px;}
.user-row .u-meta{color:var(--muted); font-size:12px;}
.user-row .u-actions{display:flex; gap:6px; flex-wrap:wrap;}
.modal-overlay{position:fixed; inset:0; background:rgba(10,8,5,0.55); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal{background:var(--surface); border-radius:16px; padding:22px; width:100%; max-width:400px; max-height:90vh; overflow-y:auto;}
.modal h3{margin-bottom:14px;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px;}