/* ---------- theme: dark (AquaGuard-like) ---------- */
:root{
  --bg:#061321; --bg2:#0a2238; --panel:#0d2540; --panel2:#0e2742; --line:#2a4f76;
  --text:#f4f7fb; --muted:#9db2c7; --accent:#22c7ff; --accent2:#75e7ff; --ok:#20c982; --warn:#ffb020; --bad:#ff5964;
  --shadow:0 0 0 1px rgba(34,199,255,.14), 0 10px 28px rgba(0,0,0,.5);
  --radius:8px; --font:Inter, "Helvetica Neue", Arial, sans-serif;
}
body.light{
  --bg:#f3f6fa; --bg2:#ffffff; --panel:#ffffff; --panel2:#f0f4f9; --line:#d7e0ea;
  --text:#0c1a2a; --muted:#5b6f85; --accent:#0a8fc9; --accent2:#22c7ff; --ok:#159a63; --warn:#c77d00; --bad:#d9364c;
  --shadow:0 1px 2px rgba(12,26,42,.06), 0 8px 24px rgba(12,26,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;max-width:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font:15px/1.4 var(--font);-webkit-font-smoothing:antialiased}
body{min-width:320px}
.app{width:100%;max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bg2),var(--bg) 40%)}
.wide .app{max-width:1680px}
header.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.1px}
.brand a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand .dot{width:28px;height:28px;border-radius:9px;background:url(/static/logo.png) center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 20px rgba(34,199,255,.5)}
.brand small{font-weight:500;color:var(--muted);margin-left:6px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--text);text-decoration:none}
.header-date{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.header-stats{display:flex;gap:22px;align-items:center}
.header-stats .stat{display:flex;flex-direction:column;gap:2px}
.header-stats .stat span{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--muted)}
.header-stats .stat b{font-size:16px;font-weight:800;letter-spacing:-.2px}
main{padding:16px 18px 96px;flex:1}
.wide main{padding:20px 24px 32px}
/* Employee screens (Today/jobs/clients) read like a list, not a data table —
   let the wide .app shell use the full window, but keep the actual content
   column at a comfortable reading width so it doesn't stretch paper-thin. */
@media(min-width:900px){
  .list-page main{max-width:1360px;margin:0 auto;width:100%}
  .list-page .kpi .card{padding:18px}
  .list-page .kpi b{font-size:26px}
}
@media(min-width:1600px){
  .list-page main{max-width:1680px}
  .list-page .kpi .card{padding:22px}
  .list-page .kpi b{font-size:30px}
}
@media(min-width:900px){
  .form-page .app{max-width:none}
  .form-page header.top,
  .form-page main{max-width:1680px;width:100%;margin-left:auto;margin-right:auto}
  .form-page main{padding-left:32px;padding-right:32px}
}
h1{font-size:22px;margin:6px 0 14px;font-weight:800;letter-spacing:0}
h2{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:22px 0 10px;font-weight:700}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.empty-state{text-align:center;padding:32px 20px;margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.empty-state-title{font-size:15px;font-weight:700;margin:0 0 6px}
.empty-state .small{display:block;max-width:340px;margin:0 auto 18px}
.card+.card{margin-top:12px}
.kpi .card+.card{margin-top:0}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}
.input,select,textarea{width:100%;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:12px 12px;font:inherit;outline:none}
.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,199,255,.18)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.row3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.row3 .input{padding:12px 8px}
.field{min-width:0}
.field label:first-child{margin-top:0}
.job-main-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;align-items:end}
.job-main-grid .span-2{grid-column:span 2}
.job-main-grid .span-3{grid-column:span 3}
.job-main-grid .span-full{grid-column:1/-1}
.job-main-grid textarea{min-height:72px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:13px 16px;font-weight:700;border:1px solid transparent;cursor:pointer;font:inherit;text-decoration:none}
.btn.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#04121e;box-shadow:0 6px 20px rgba(34,199,255,.35)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn.ghost.active{background:var(--panel2);border-color:var(--accent);color:var(--accent);font-weight:700}
.btn.bad{color:var(--bad);border-color:rgba(255,89,100,.4)}
.btn.block{width:100%}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--panel2);color:var(--muted)}
.chip.ok{color:var(--ok);border-color:rgba(32,201,130,.35)} .chip.warn{color:var(--warn);border-color:rgba(255,176,32,.35)} .chip.acc{color:var(--accent);border-color:rgba(34,199,255,.35)}
.line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.line:first-of-type{border-top:0}
.muted{color:var(--muted)} .small{font-size:12px} .mono{font-variant-numeric:tabular-nums}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi .card{padding:14px;display:flex;flex-direction:column;gap:6px}
.kpi .card>span{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--muted)}
.kpi b{display:block;font-size:22px;font-weight:800;overflow-wrap:anywhere;letter-spacing:-.2px}
.list-item{display:flex;gap:12px;align-items:flex-start}
.list-item .when{min-width:58px;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 4px;font-size:12px}
.list-item .when b{display:block;font-size:16px}
nav.tabs{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.build-tag{position:fixed;top:3px;right:10px;z-index:5;font-size:10px;line-height:1;color:var(--muted);opacity:.5;letter-spacing:.2px;font-variant-numeric:tabular-nums;pointer-events:none;user-select:text}
@media(max-width:720px){.build-tag{font-size:9px;right:6px}}
.wide nav.tabs{max-width:1680px}
nav.tabs a{text-align:center;font-size:11px;color:var(--muted);text-decoration:none;padding:6px 0}
nav.tabs a.active{color:var(--accent);font-weight:700}
nav.tabs a i{display:block;width:22px;height:22px;margin:0 auto 4px;border-radius:7px;border:1.5px solid currentColor;opacity:.9}
.fab{position:fixed;right:max(18px,calc((100vw - 560px)/2 + 18px));bottom:82px;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,var(--accent2),var(--accent));color:#04121e;font-size:30px;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 26px rgba(34,199,255,.45);text-decoration:none}
/* Desktop: the bottom pill-nav and floating "+" are mobile patterns. On wide
   screens <nav class="tabs"> is nested inside header.top (see templates) and
   becomes a row of inline pill buttons sharing the header's single line. */
@media(min-width:900px){
  .list-page nav.tabs{position:static;left:auto;right:auto;bottom:auto;max-width:none;width:auto;margin:0;display:flex;gap:6px;background:transparent;border-top:0;padding:0}
  .list-page nav.tabs a{flex:0 0 auto;display:inline-flex;align-items:center;padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);border:1px solid transparent;text-align:left;transition:color .15s,background-color .15s,border-color .15s}
  .list-page nav.tabs a:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .list-page nav.tabs a.active{color:var(--accent);background:var(--panel2);border-color:var(--accent);font-weight:700}
  .list-page nav.tabs a i{display:none}
  .list-page .fab{display:none}
}
.add{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:13px;margin-top:8px;cursor:pointer;background:none;border:0;padding:0;font-family:inherit}
.add span{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--accent);display:grid;place-items:center}
.total{display:flex;justify-content:space-between;font-weight:800;font-size:16px;padding-top:10px;border-top:1px dashed var(--line);margin-top:8px}
.button-row{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap}
.button-row .btn{flex:0 0 auto}
.button-row .grow{flex:1 1 180px}
.form-actions{display:flex;gap:10px;margin-top:16px}
.form-actions .btn{min-width:0}
.summary-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
/* admin table */
.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
.card.table-card{padding:0;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
tr:hover td{background:rgba(34,199,255,.05)}
.check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:inline-grid;place-items:center;background:var(--panel2)}
.check.invoiced-toggle{cursor:pointer}
.check.on{background:var(--ok);border-color:var(--ok);color:#03150c;font-weight:900;font-size:13px;cursor:default}
.actions{display:flex;gap:8px;justify-content:flex-end}
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow-x:hidden}
body.login-page .hero-glow{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(640px 640px at 10% 12%,rgba(34,199,255,.20),transparent 62%),
  radial-gradient(720px 720px at 90% 88%,rgba(18,104,215,.22),transparent 62%),
  radial-gradient(900px 900px at 50% 50%,rgba(11,31,51,.4),transparent 70%)}
body.light.login-page .hero-glow{background:
  radial-gradient(640px 640px at 10% 12%,rgba(10,143,201,.12),transparent 62%),
  radial-gradient(720px 720px at 90% 88%,rgba(18,104,215,.10),transparent 62%)}
.login-wrap{width:100%;max-width:440px;margin:0 auto;padding:32px 24px;position:relative;z-index:1}
.login{display:flex;flex-direction:column;--login-muted:#b9cbdf}
body.light .login{--login-muted:#4d6377}
.login .brand{justify-content:center;font-size:27px;margin-bottom:10px}
.login p.sub{text-align:center;color:var(--text);opacity:.75;margin:0 auto 28px;font-size:14px;max-width:280px;line-height:1.45}
.login .card{padding:28px 26px}
.login label{color:var(--login-muted)}
.login .btn.primary{box-shadow:0 4px 16px rgba(34,199,255,.25)}
.login .btn.block{margin-top:8px}
.login-hint{text-align:center;margin:16px 0 0;font-size:12.5px;color:var(--login-muted)}
.login-lang{text-align:center;margin:26px 0 0;font-size:12px;color:var(--login-muted);letter-spacing:.3px}
.error-box{background:rgba(255,89,100,.12);border:1px solid rgba(255,89,100,.4);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.notice-box{background:rgba(34,199,255,.1);border:1px solid rgba(34,199,255,.35);color:var(--accent);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.equip-row,.expense-row{display:grid;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.line-head{display:grid;gap:8px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:0 0 6px;border-bottom:1px solid var(--line)}
.equipment-head{grid-template-columns:minmax(0,1fr) 86px auto}
.expense-head{grid-template-columns:minmax(120px,1fr) minmax(100px,.9fr) minmax(90px,.7fr) minmax(120px,1fr) minmax(150px,1.2fr) minmax(130px,1fr) auto}
.equip-row:first-of-type,.expense-row:first-of-type{border-top:0}
.equip-row{grid-template-columns:minmax(0,1fr) 86px auto}
.expense-row{grid-template-columns:minmax(120px,1fr) minmax(100px,.9fr) minmax(90px,.7fr) minmax(120px,1fr) minmax(150px,1.2fr) minmax(130px,1fr) auto auto}
.equip-row .input,.expense-row .input{min-width:0}
.remove-line{background:none;border:0;color:var(--bad);font-size:18px;cursor:pointer;padding:4px 8px;line-height:1}
.topbar-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:0}
@media(min-width:900px){
  .wide .kpi.kpi-admin{grid-template-columns:1.2fr 1fr 1fr}
  .wide .card.table-card{overflow:hidden}
}
@media(min-width:921px){
  .wide .filters.filters-admin{grid-template-columns:1.2fr 1.2fr repeat(5,minmax(120px,1fr)) auto}
  .wide .filters:not(.filters-admin){grid-template-columns:1.2fr repeat(3,minmax(120px,1fr)) 1.4fr auto}
}
@media(min-width:1200px){
  .form-page .job-main-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px 16px}
  .form-page .job-main-grid .lg-1{grid-column:span 1}
  .form-page .job-main-grid .lg-2{grid-column:span 2}
  .form-page .job-main-grid .lg-3{grid-column:span 3}
  .form-page .job-main-grid .lg-4{grid-column:span 4}
  .form-page .job-main-grid .lg-5{grid-column:span 5}
  .form-page .job-main-grid .lg-7{grid-column:span 7}
  .form-page .job-main-grid .span-full{grid-column:1/-1}
  .form-page .job-main-grid textarea{min-height:88px}
}
@media(min-width:1600px){
  .form-page .card{padding:18px}
  .form-page .job-main-grid{gap:16px 18px}
  .form-page .expense-head{grid-template-columns:minmax(160px,1.1fr) minmax(140px,.9fr) minmax(120px,.7fr) minmax(180px,1.2fr) minmax(220px,1.4fr) minmax(180px,1fr) auto}
  .form-page .expense-row{grid-template-columns:minmax(160px,1.1fr) minmax(140px,.9fr) minmax(120px,.7fr) minmax(180px,1.2fr) minmax(220px,1.4fr) minmax(180px,1fr) auto auto}
}
@media(max-width:920px){
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters>div:last-child{grid-column:1/-1}
  .filters .btn{width:100%}
  .job-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .job-main-grid .span-2,.job-main-grid .span-3{grid-column:1/-1}
  .expense-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .line-head{display:none}
  .expense-row .remove-line{justify-self:end}
}
@media(max-width:720px){
  .app,.wide .app{max-width:100vw}
  header.top{align-items:flex-start;flex-wrap:wrap;padding:12px 14px}
  main,.wide main{padding:14px 14px 96px}
  .brand{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .brand small{display:none}
  .topbar-actions{flex:0 0 100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none;order:3}
  .topbar-actions::-webkit-scrollbar{display:none}
  .topbar-actions .btn.sm{padding:7px 9px;font-size:12px;white-space:nowrap;flex:0 0 auto}
  .topbar-actions .avatar{flex:0 0 auto}
  .header-date{flex:0 0 100%;order:1;margin-top:6px}
  .header-stats{flex:0 0 100%;justify-content:space-between;gap:10px;order:2;margin-top:10px}
  .row,.row3,.filters,.kpi,.job-main-grid{grid-template-columns:1fr}
  .job-main-grid .span-2,.job-main-grid .span-3,.job-main-grid .span-full{grid-column:auto}
  .login-wrap{padding:24px 20px}
  .login .card{padding:22px 20px}
  .login .brand{font-size:22px}
  .login p.sub{margin-bottom:22px}
  .card{padding:12px}
  .card.table-card{padding:0;border:0;background:transparent;box-shadow:none}
  table,thead,tbody,tr,td{display:block;width:100%}
  table{font-size:14px}
  thead{display:none}
  tr{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 12px;overflow:hidden}
  td{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:10px 12px}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
  td.actions{justify-content:stretch;display:flex;flex-wrap:wrap}
  td.actions::before{display:none}
  td.actions .btn,td.actions form,td.actions button{flex:1 1 auto}
  .actions{justify-content:stretch}
  .button-row,.form-actions,.summary-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .button-row .btn,.form-actions .btn,.summary-actions .btn{width:100%}
  .equip-row{grid-template-columns:minmax(0,1fr) 74px auto}
  .expense-row{grid-template-columns:1fr}
  .expense-row a.small{display:inline-block;padding:4px 0}
  nav.tabs{max-width:none}
  .fab{right:18px}
}
@media(max-width:420px){
  body{font-size:14px}
  h1{font-size:20px}
  .btn{padding:12px 13px}
  .topbar-actions{width:100%;justify-content:flex-start}
  td{grid-template-columns:1fr;gap:4px}
  td::before{font-size:10px}
}

/* Marketing pages: landing, pricing, contact */
.marketing-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;padding:40px 0 8px}
.marketing-hero img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow)}
.marketing-hero-text h1{font-size:36px;line-height:1.15;margin:0 0 14px;letter-spacing:-.3px}
.eyebrow{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent);font-weight:800;margin-bottom:10px}
.section-head{text-align:center;max-width:600px;margin:0 auto 28px}
.section-title{font-size:28px;font-weight:800;margin:0 0 10px;letter-spacing:-.3px}
.section-sub{color:var(--muted);margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(180deg,rgba(34,199,255,.22),rgba(34,199,255,.06));border:1px solid rgba(34,199,255,.35);display:grid;place-items:center;color:var(--accent);margin-bottom:14px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step-num{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;color:var(--accent);margin-bottom:12px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pricing-card{display:flex;flex-direction:column}
.pricing-card.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 28px rgba(34,199,255,.25);position:relative}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--accent2),var(--accent));color:#04121e;font-size:11px;font-weight:800;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.pricing-price{font-size:26px;font-weight:800;margin:8px 0 4px}
.pricing-price small{font-size:13px;font-weight:600;color:var(--muted)}
.pricing-features{list-style:none;padding:0;margin:14px 0;flex:1}
.pricing-features li{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:13px;color:var(--muted)}
.pricing-features li::before{content:"✓";color:var(--ok);font-weight:800}
.marketing-footer{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:28px 0 8px;color:var(--muted);font-size:13px}
.marketing-footer a{color:var(--muted)}

@media(max-width:860px){
  .marketing-hero{grid-template-columns:1fr}
  .marketing-hero img{order:-1;max-width:360px;margin:0 auto}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:360px;margin:0 auto}
}
@media(max-width:560px){
  .feature-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
}