/* HGE Solar Manager — prototype styles
   Design tokens follow the plan document (dark, border-defined depth, emerald accent). */

:root{
  --bg:#171717; --surface:#0f0f0f; --surface-2:#1c1c1c;
  --line:#242424; --line-2:#2e2e2e; --line-3:#363636;
  --ink:#fafafa; --muted:#b4b4b4; --dim:#898989;
  --accent:#3ecf8e; --warn:#d8a24a; --danger:#e5646a;
  --display:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Source Code Pro',Menlo,ui-monospace,monospace;
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%;
  /* An app shell, not a document. The header, the module tabs and the status
     strip stay where they are and only the middle scrolls. When this was a
     normal page with a sticky header, scrolling slid the tab strip up behind
     the header where it could not be read or tapped. */
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0 0 6px}
h1{font-size:22px;font-weight:600}
h2{font-size:18px;font-weight:600}
h3{font-size:15px;font-weight:600}
p{margin:0 0 10px;color:var(--muted)}
.mono{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}

/* top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);
  flex:0 0 auto;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.mark{width:12px;height:12px;border-radius:3px;background:var(--accent);display:inline-block}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.role-switch{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);flex:0 0 auto;white-space:nowrap}
.role-switch span{white-space:nowrap}
.role-switch select{
  background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:999px;
  padding:5px 10px;font-family:var(--body);font-size:13px;text-transform:none;letter-spacing:0;
}
.net{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:4px 10px}
.net.off{border-color:rgba(216,162,74,.5);color:var(--warn)}

/* nav */
.nav{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg);flex:0 0 auto;min-width:0;scrollbar-width:thin}
.nav button{
  background:transparent;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 14px;font-family:var(--body);font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.nav button:hover{border-color:var(--line-3);color:var(--ink)}
.nav button[aria-current="true"]{border-color:rgba(62,207,142,.45);color:var(--accent)}

/* view — the only part of the app that scrolls */
.view{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 40px}
/* content is centred and capped whichever way the device is turned; the scroll
   bar stays at the edge of the window rather than in the middle of the page */
.view>*{max-width:1100px;margin-left:auto;margin-right:auto}
.boot{display:flex;align-items:center;gap:12px;color:var(--dim);padding:40px 0}
.spinner{width:16px;height:16px;border:2px solid var(--line-3);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation:none}}

/* blocks */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:16px 18px}
.card p{margin:0;font-size:13.5px;color:var(--dim)}
.kpi{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;margin:2px 0 4px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.list{display:grid;gap:8px;margin-top:14px}
.item{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;display:grid;gap:4px}
.item .t{font-weight:500}
.item .m{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--line-3);background:#000}
.item-media{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}

/* forms */
label{display:block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:0 0 5px}
input,select,textarea{
  width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:9px;
  padding:10px 12px;font-family:var(--body);font-size:14.5px;
}
input:disabled,select:disabled{opacity:.5}
textarea{min-height:70px;resize:vertical}
.field{margin-bottom:12px}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.err{color:var(--danger);font-size:12.5px;margin-top:5px;display:none}
.err.on{display:block;role:alert}
.hint{font-size:12.5px;color:var(--dim);margin-top:6px}

/* buttons */
button.btn{
  background:var(--bg);color:var(--ink);border:1px solid var(--line-3);border-radius:999px;
  padding:9px 18px;font-family:var(--body);font-size:14px;font-weight:500;cursor:pointer;
}
button.btn:hover{border-color:var(--muted)}
button.btn.primary{border-color:rgba(62,207,142,.55);color:var(--accent)}
button.btn.danger{border-color:rgba(229,100,106,.5);color:var(--danger)}
button.btn[disabled]{opacity:.45;cursor:not-allowed}
button.btn.sm{padding:6px 13px;font-size:13px}

/* table */
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);background:#141414;font-weight:400}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--mono);font-size:12px}

/* states */
.empty{background:var(--surface);border:1px dashed var(--line-3);border-radius:var(--r);padding:22px;text-align:center;color:var(--dim)}
.empty h3{color:var(--ink)}
.banner{border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:13.5px;color:var(--muted);background:var(--surface)}
.banner.warn{border-color:rgba(216,162,74,.45);color:var(--warn)}
.banner.bad{border-color:rgba(229,100,106,.5);color:var(--danger)}
.banner.ok{border-color:rgba(62,207,142,.4)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal[hidden]{display:none}
.modal .sheet{background:var(--surface);border:1px solid var(--line-3);border-radius:14px;padding:18px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
video{width:100%;border-radius:10px;background:#000;aspect-ratio:3/4;object-fit:cover}
.stage{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.pill{display:inline-block;border:1px solid var(--line-3);border-radius:999px;padding:2px 9px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pill.ok{border-color:rgba(62,207,142,.45);color:var(--accent)}
.pill.warn{border-color:rgba(216,162,74,.45);color:var(--warn)}
.pill.bad{border-color:rgba(229,100,106,.45);color:var(--danger)}

/* footer */
.status{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;align-items:baseline;border-top:1px solid var(--line);background:var(--surface);padding:8px 16px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.status span{white-space:nowrap;flex:0 0 auto}

@media (max-width:520px){
  .view{padding:14px 12px 28px}
  .kpi{font-size:22px}
  table{font-size:12.5px}
  th,td{padding:9px 10px}
  .topbar{padding:10px 12px}
  /* the two status notes would run off the edge of a small phone side by side */
  .status{font-size:9.5px;letter-spacing:.04em;padding:7px 12px;gap:2px 10px}
}

/* Tablets and small laptops: the module strip scrolls sideways rather than
   wrapping into a block that pushes the content down. The tabs keep a
   finger-sized height, because an iPad in portrait is 768 wide and is still a
   touch screen. */
@media (min-width:761px) and (max-width:1100px){
  .nav{padding:9px 14px}
  .nav button{min-height:44px;padding:10px 14px;font-size:13.5px}
}

/* ---- touch and phone ergonomics -------------------------------------------
   The engineer and the guards use this one-handed, outdoors, often in a hurry.
   Everything below exists so a thumb can actually hit it: 44px minimum targets,
   16px inputs so iOS does not zoom on focus, navigation moved to the bottom of
   the screen inside thumb reach, and safe-area padding for notched phones.     */
button,input,select,textarea,a{touch-action:manipulation}
body{-webkit-tap-highlight-color:transparent}

@media (max-width:760px){
  /* the tab bar is fixed to the bottom of the window, so the shell keeps that
     much room spare. Without it the status strip and the last card sat
     underneath the tabs. */
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}

  /* the middle scrolls up and down only; anything wide scrolls inside its own
     container so it can never push the page sideways */
  .view{overflow-x:hidden}

  /* navigation moves to the bottom, where a thumb actually is */
  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:30;gap:6px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line-2);border-bottom:none;background:#111;
  }
  .nav button{min-height:52px;min-width:96px;font-size:15px;padding:12px 16px;border-radius:14px}

  /* the status strip now sits just above the tab bar, inside the shell */
  .status{position:static;padding:9px 14px;border-top:1px solid var(--line)}

  /* controls sized for a finger */
  input,select,textarea{font-size:16px;min-height:50px;padding:12px 14px;border-radius:12px}
  textarea{min-height:110px}
  label{font-size:11px;margin-bottom:7px}
  .field{margin-bottom:16px}
  button.btn{min-height:50px;padding:13px 20px;font-size:15.5px;border-radius:14px}
  button.btn.sm{min-height:44px;padding:11px 16px;font-size:14.5px}
  .card .row button.btn{flex:1 1 auto}
  label.pill{min-height:44px;display:inline-flex;align-items:center;padding:6px 14px}

  /* one column, roomier cards, no cramped tap zones */
  .grid{grid-template-columns:1fr;gap:14px}
  .card{padding:18px 16px}
  .kpi{font-size:26px}
  .topbar{padding:12px 14px}
  .topbar-right{width:100%;justify-content:space-between}
  .role-switch select{min-height:46px;font-size:15px}

  /* wide tables scroll sideways instead of squashing */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table caption{white-space:normal}
  .thumb{width:64px;height:64px}

  /* the camera takes the whole screen on a phone */
  .modal{padding:0}
  .modal .sheet{
    border-radius:0;width:100%;height:100vh;max-height:100vh;padding:16px;
    display:flex;flex-direction:column;justify-content:center;
  }
  video{max-height:56vh}
  #capShoot{width:100%;min-height:58px;font-size:17px}
}

/* landscape phones: give the camera back its height */
@media (max-width:900px) and (orientation:landscape){
  video{max-height:60vh}
  .nav{overflow-x:auto}
}