:root{
  --navy:#0b1f3a; --navy-2:#13315c; --ink:#16202c; --muted:#5a6672;
  --line:#e6e9ee; --bg:#eef2f8; --card:#ffffff;
  --ok:#1c7c3c; --warn:#9a5b00; --accent:#1d6fe0; --danger:#b0281f;
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.9);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Soft tinted mesh behind the whole feed — fixed so it doesn't scroll
   (background-attachment:fixed is ignored on iOS, a fixed layer is reliable). */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(95% 55% at 0% 0%,   #dcebff 0%, transparent 55%),
    radial-gradient(85% 50% at 100% 6%,  #d8f3fb 0%, transparent 52%),
    radial-gradient(120% 80% at 50% 120%,#e7e0ff 0%, transparent 55%),
    var(--bg);
}

/* shared focus ring (keyboard / desktop PWA) */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ── Header ─────────────────────────────────────────────── */
.topbar{
  background:rgba(11,31,58,.82); color:#fff; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topbar .brand{display:flex; align-items:center; gap:11px; min-width:0}
.topbar .brand-logo{width:36px; height:36px; border-radius:9px; flex:none;
  object-fit:contain; box-shadow:0 2px 6px rgba(0,0,0,.28)}
.topbar .brand-text{display:flex; flex-direction:column; min-width:0}
.topbar .brand-name{font-weight:700; letter-spacing:.3px; font-size:15px; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .brand small{display:block; font-weight:400; opacity:.75; font-size:11px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar form{flex:none}
/* The sign-out control is a <button>, not an <a> — match the class directly so
   the styling actually applies. min-height 44px keeps it a proper touch target. */
.topbar .logout{
  color:#fff; font:inherit; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.12); cursor:pointer; -webkit-tap-highlight-color:transparent;
  border:1px solid rgba(255,255,255,.35); padding:0 14px; min-height:44px;
  border-radius:10px; display:inline-flex; align-items:center;
  transition:background .15s ease, transform .05s ease;
}
.topbar .logout:hover{background:rgba(255,255,255,.2)}
.topbar .logout:active{transform:translateY(1px); background:rgba(255,255,255,.22)}

.wrap{max-width:680px; margin:0 auto; padding:14px}

/* ── Cards ──────────────────────────────────────────────── */
.card{
  background:var(--glass); border:1px solid var(--glass-line); border-radius:18px;
  padding:16px 18px; margin:14px 0;
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 8px 30px rgba(16,32,52,.10), inset 0 1px 0 rgba(255,255,255,.6);
}
.card h2{margin:0 0 12px; font-size:15px; color:var(--navy);
  display:flex; align-items:center; gap:9px}
.card h2 svg{width:20px; height:20px; flex:none; color:var(--accent)}
.card .empty{color:var(--muted); font-size:14px; padding:6px 0}

/* ── Push enable (primary CTA card) ─────────────────────── */
.push-card{
  background:linear-gradient(180deg, rgba(232,243,255,.85), rgba(214,233,255,.7));
  border-color:rgba(170,205,250,.85);
}
.btn-go{
  appearance:none; border:0; border-radius:13px; cursor:pointer;
  background:linear-gradient(180deg,#2b7af0,#1763d6); color:#fff;
  font-weight:700; font-size:16px; padding:14px 16px; width:100%;
  box-shadow:0 8px 20px rgba(29,111,224,.30);
  transition:transform .05s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-go:active{transform:translateY(1px)}
.btn-go:disabled{opacity:.6; cursor:default; box-shadow:none}
.push-status{font-size:13px; color:var(--muted); margin-top:12px}
.push-status.ok{color:var(--ok); font-weight:600}
.push-status.warn{color:var(--warn)}
body.push-enabled #enable-btn{
  background:linear-gradient(180deg,#2aa75a,#1c7c3c);
  box-shadow:0 8px 20px rgba(28,124,60,.30);
}

#install-banner{
  display:none; background:rgba(255,247,230,.92); border:1px solid #f0d9a6; color:#7a5800;
  border-radius:14px; padding:11px 13px; font-size:13px; margin:14px 0;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* Time-of-day greeting (top of the home feed). */
.greeting{padding:18px 4px 2px}
.greet-hi{font-size:22px; font-weight:500; color:var(--navy); letter-spacing:.2px}
.greet-hi b{font-weight:800}

/* Once notifications are on for this device, the enable card is no longer
   needed — app.js adds .push-enabled to <body> and we tuck it away. */
body.push-enabled .push-card{display:none}

/* ── Feed items ─────────────────────────────────────────── */
.item{padding:11px 0; border-top:1px solid rgba(16,32,52,.08)}
.item:first-of-type{border-top:0}
.item .ttl{font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.item .body{font-size:15px; margin-top:3px; white-space:pre-wrap; line-height:1.5}
.item .meta{font-size:12px; color:var(--muted); margin-top:5px}
.pill{display:inline-block; font-size:12px; font-weight:700; padding:2px 9px;
  border-radius:999px; letter-spacing:.2px}
.pill.Approved{background:#e3f5ea; color:var(--ok)}
.pill.Rejected{background:#fde7e7; color:var(--danger)}
.pill.Pending{background:#fff1da; color:var(--warn)}
.celebrate{font-size:15px; padding:5px 0}
.celebrate b{color:var(--navy)}

/* Gate-pass approve / reject — full-width split, proper 44px touch targets. */
.gp-actions{display:flex; gap:10px; margin-top:10px}
.gp-actions form{margin:0; flex:1}
.gp-actions button{
  width:100%; min-height:44px; border:0; border-radius:11px; color:#fff;
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .05s ease, opacity .15s ease;
}
.gp-actions button:active{transform:translateY(1px)}
.gp-actions button:disabled{opacity:.55}
.btn-approve{background:linear-gradient(180deg,#2aa75a,#1c7c3c)}
.btn-reject{background:linear-gradient(180deg,#e0584f,#b0281f)}

.links a{display:flex; align-items:center; gap:8px; padding:12px 4px;
  border-top:1px solid rgba(16,32,52,.08);
  color:var(--accent); text-decoration:none; font-weight:600; font-size:14px}
.links a:first-of-type{border-top:0}
.links a svg{width:18px; height:18px; flex:none}

/* ── Login (full dark-glass) ────────────────────────────── */
.login-body{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; position:relative; overflow:hidden; background:#0a1830;
}
/* Cheap, GPU-friendly moving colour wash (no JS particle loop). */
.login-bg{
  position:absolute; inset:-30%; z-index:1; pointer-events:none; filter:blur(22px);
  background:
    radial-gradient(closest-side, rgba(43,111,224,.42), transparent 70%) 20% 25%/55% 55% no-repeat,
    radial-gradient(closest-side, rgba(20,182,201,.34), transparent 70%) 85% 18%/45% 45% no-repeat,
    radial-gradient(closest-side, rgba(106,61,240,.38), transparent 70%) 55% 95%/60% 60% no-repeat;
  animation:floaty 18s ease-in-out infinite alternate;
}
@keyframes floaty{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to  {transform:translate3d(2%,2%,0) scale(1.08)}
}
.login-card{
  position:relative; z-index:2; width:min(380px,94vw);
  /* Dark navy-tinted glass so white text always has contrast, even where the
     bright colour blobs pass behind the card. */
  background:rgba(12,26,52,.55); border:1px solid rgba(255,255,255,.18);
  border-radius:22px; padding:26px 22px 24px;
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.login-logo{display:flex; justify-content:center; margin-bottom:14px}
.login-logo img{
  width:56px; height:56px; border-radius:15px; padding:7px; object-fit:contain;
  background:rgba(255,255,255,.85); box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.login-title{font-weight:700; font-size:20px; color:#fff; text-align:center}
.login-sub{color:rgba(255,255,255,.75); font-size:13px; text-align:center; margin:4px 0 20px}

.lf{margin-bottom:14px}
.lf label{display:block; font-size:13px; font-weight:600;
  color:#fff; margin-bottom:6px}
.lf input{
  width:100%; font-size:16px; padding:13px 14px; border-radius:12px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lf input::placeholder{color:rgba(255,255,255,.6)}
.lf input:focus{
  border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.18);
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.lf-pass{position:relative; display:flex; align-items:center}
.lf-pass input{padding-right:46px}
.lf-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:rgba(255,255,255,.8); padding:0;
}
.lf-eye svg{width:20px; height:20px}
.lf-eye .ic-eyeoff{display:none}
.lf-eye.on .ic-eye{display:none}
.lf-eye.on .ic-eyeoff{display:block}
.login-card .btn-go{margin-top:6px}
.login-err{
  color:#ffe1dd; background:rgba(176,40,31,.30); border:1px solid rgba(255,150,140,.45);
  font-size:13px; padding:9px 11px; border-radius:10px; margin:2px 0 14px;
}

/* Issue status pills (extend the gate-pass pill palette). */
.pill.Open{background:#fff1da; color:var(--warn)}
.pill.Acknowledged{background:#e2edfd; color:var(--accent)}
.pill.Resolved{background:#e3f5ea; color:var(--ok)}

/* ── Plant Issues page ──────────────────────────────────── */
.topbar .brand-back{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:9px; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  -webkit-tap-highlight-color:transparent;
}
.topbar .brand-back svg{width:20px; height:20px}
.topbar .brand-back:active{transform:translateY(1px)}

.flash-ok{
  background:rgba(227,245,234,.95); border:1px solid #bfe6cd; color:var(--ok);
  border-radius:14px; padding:11px 13px; font-size:14px; font-weight:600; margin:14px 0;
}

/* Collapsible report form */
details.card > summary{list-style:none; cursor:pointer}
details.card > summary::-webkit-details-marker{display:none}
.report-summary{
  display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px;
  color:var(--navy); -webkit-tap-highlight-color:transparent;
}
.report-summary svg{width:20px; height:20px; flex:none; color:var(--accent)}

.issue-form{margin-top:14px}
.ff{display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:13px}
.ff-row{display:flex; gap:11px}
.ff-row .ff{flex:1}
.ff input[type=text], .ff select, .ff textarea, .ff input[type=file]{
  width:100%; margin-top:6px; font:inherit; font-size:16px; font-weight:400;
  padding:12px 13px; border-radius:12px; color:var(--ink);
  background:#fff; border:1px solid var(--line); outline:none;
}
.ff textarea{resize:vertical}
.ff input:focus, .ff select:focus, .ff textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(29,111,224,.15);
}
.ff input[type=file]{padding:10px 12px; font-size:14px}
.ff-hint{display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:5px}
.issue-form .btn-go{margin-top:2px}

/* Filter chips */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.chip{
  font-size:13px; font-weight:600; text-decoration:none; padding:7px 14px;
  border-radius:999px; color:var(--navy); background:var(--glass);
  border:1px solid var(--glass-line); -webkit-tap-highlight-color:transparent;
}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy)}

.count-tag{
  margin-left:auto; font-size:12px; font-weight:700; color:var(--muted);
  background:rgba(16,32,52,.06); padding:1px 9px; border-radius:999px;
}

/* Issue feed item */
.issue{padding:13px 0; border-top:1px solid rgba(16,32,52,.08)}
.issue:first-of-type{border-top:0}
.issue .ttl{font-weight:600; font-size:15px; line-height:1.35}
.issue .meta{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.6}
.issue .body{font-size:15px; margin-top:7px; white-space:pre-wrap; line-height:1.5}
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.thumbs img{
  width:84px; height:84px; object-fit:cover; border-radius:11px;
  border:1px solid var(--line); background:#fff;
}
.pdf-link{display:inline-block; margin-top:9px; color:var(--accent);
  text-decoration:none; font-weight:600; font-size:14px}
.resolved{
  margin-top:10px; font-size:13px; color:var(--ok); font-weight:600;
  background:rgba(227,245,234,.7); border-radius:10px; padding:8px 11px;
}
.triage{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:11px}
.triage select, .triage input[type=text]{
  font:inherit; font-size:14px; padding:9px 11px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.triage input[type=text]{flex:1; min-width:140px}
.triage button{
  border:0; border-radius:10px; background:var(--navy-2); color:#fff;
  font:inherit; font-size:14px; font-weight:600; padding:9px 16px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.triage button:active{transform:translateY(1px)}

@media (prefers-reduced-motion: reduce){
  .login-bg{animation:none}
  *{transition:none !important}
}