/* =========================================================================
   JASTECA 5S Audit — shared design system
   Used by index.html (audit form + login), admin.html and bootstrap-admin.html.
   Light by default, dark when the device asks for it, or when the user picks
   a theme with the toggle (theme.js sets data-theme on <html>).
   ========================================================================= */

:root{
  color-scheme: light;
  --bg:#F4F7F4; --surface:#FFFFFF; --surface-2:#F0F4F0; --surface-3:#E7EDE7;
  --border:#E1E7E0; --border-strong:#C9D3C9;
  --text:#15202B; --muted:#5A6573; --faint:#8A95A3;
  --brand:#228B52; --brand-strong:#1A6F41; --brand-soft:#E4F3EA; --on-brand:#FFFFFF;
  --danger:#C0402D; --danger-soft:#FBECE8; --danger-border:#EBC4BB;
  --warn-soft:#FFF6E0; --warn-border:#EACB7A; --warn-text:#6B4E0B;
  --ok-soft:#E8F5ED; --ok-border:#B7DBC5;
  --r-poor:#C0402D; --r-fair:#D17B2F; --r-good:#D6A431; --r-vgood:#7DA83A; --r-excellent:#228B52;
  --track:#E6EBE5;
  --shadow-sm:0 1px 2px rgba(16,24,20,.06);
  --shadow:0 6px 18px rgba(16,24,20,.07);
  --shadow-lg:0 20px 55px rgba(16,24,20,.18);
  --radius:16px; --radius-sm:10px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0D1310; --surface:#151D19; --surface-2:#1B2520; --surface-3:#243029;
    --border:#27332D; --border-strong:#37463E;
    --text:#E7EEE9; --muted:#9BA9A1; --faint:#6F7D75;
    --brand:#3DB574; --brand-strong:#63CF93; --brand-soft:#173225; --on-brand:#06140C;
    --danger:#F0735F; --danger-soft:#33201C; --danger-border:#5B3029;
    --warn-soft:#2E2812; --warn-border:#6A5A22; --warn-text:#EBD28A;
    --ok-soft:#15291E; --ok-border:#2B5A3F;
    --r-poor:#E2604B; --r-fair:#E08A3E; --r-good:#E2B340; --r-vgood:#93BE4D; --r-excellent:#3DB574;
    --track:#26322B;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 20px 55px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0D1310; --surface:#151D19; --surface-2:#1B2520; --surface-3:#243029;
  --border:#27332D; --border-strong:#37463E;
  --text:#E7EEE9; --muted:#9BA9A1; --faint:#6F7D75;
  --brand:#3DB574; --brand-strong:#63CF93; --brand-soft:#173225; --on-brand:#06140C;
  --danger:#F0735F; --danger-soft:#33201C; --danger-border:#5B3029;
  --warn-soft:#2E2812; --warn-border:#6A5A22; --warn-text:#EBD28A;
  --ok-soft:#15291E; --ok-border:#2B5A3F;
  --r-poor:#E2604B; --r-fair:#E08A3E; --r-good:#E2B340; --r-vgood:#93BE4D; --r-excellent:#3DB574;
  --track:#26322B;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 20px 55px rgba(0,0,0,.55);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{line-height:1.25; margin:0; letter-spacing:-.01em;}
a{color:var(--brand-strong);}
:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset:2px; border-radius:6px;}
[hidden]{display:none !important;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important; scroll-behavior:auto !important;}}

/* ---------- Logos ----------
   The marks are transparent PNGs (green mark + black wordmark, navy "B"), so
   on dark surfaces they sit on a white chip to stay legible. */
.logo-chip{display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:0;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-chip{background:#fff; padding:6px 8px;}}
:root[data-theme="dark"] .logo-chip{background:#fff; padding:6px 8px;}
.logo-chip img{display:block; height:100%; width:auto;}

/* ---------- Top bar ---------- */
.navbar{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 28px; min-height:64px;
}
.navbar .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); flex-shrink:0;}
.navbar .brand .logo-chip{height:42px;}
.navbar .brand-text{display:flex; flex-direction:column; line-height:1.15;}
.navbar .brand-text b{font-size:15px; font-weight:700; letter-spacing:-.01em;}
.navbar .brand-text span{font-size:11.5px; color:var(--muted); font-weight:500;}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:40px; height:40px; background:transparent; border:1px solid var(--border); border-radius:10px; padding:0; cursor:pointer; flex-shrink:0;
}
.nav-toggle span{display:block; width:17px; height:2px; background:var(--muted); border-radius:2px; transition:transform .15s ease, opacity .15s ease;}
.navbar.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.navbar.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.navbar.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:8px;}
.navbar a.nav-link,.nav-links a{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;
  padding:8px 12px; border-radius:10px;
}
.nav-links a:hover{background:var(--surface-2); color:var(--text);}
.nav-links a.active{background:var(--brand-soft); color:var(--brand-strong);}
.nav-session{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0;}
.session-chip{
  display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:230px;
  font-size:13px; font-weight:600; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:6px 12px 6px 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.session-chip .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
}
.session-chip .chip-label{overflow:hidden; text-overflow:ellipsis;}
.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:10px; padding:0; cursor:pointer;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
.icon-btn svg{width:19px; height:19px;}
.icon-btn .sun{display:none;}
:root[data-theme="dark"] .icon-btn .sun{display:block;}
:root[data-theme="dark"] .icon-btn .moon{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-btn .sun{display:block;}
  :root:not([data-theme="light"]) .icon-btn .moon{display:none;}
}
.logout-btn{
  background:transparent; color:var(--text); border:1px solid var(--border-strong);
  padding:9px 14px; font-size:13px; font-weight:600; border-radius:10px; flex-shrink:0;
}
.logout-btn:hover{background:var(--surface-2);}

@media (max-width:760px){
  .navbar{padding:8px 14px; min-height:60px; gap:10px;}
  .nav-toggle{display:flex;}
  .navbar .brand-text span{display:none;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; background:var(--surface);
    border-bottom:1px solid var(--border); padding:8px 14px 14px; box-shadow:var(--shadow);
  }
  .navbar.nav-open .nav-links{display:flex;}
  .nav-links a{padding:13px 12px; font-size:15px;}
  .session-chip{max-width:130px;}
  .session-chip .chip-label{display:none;}
  .session-chip{padding:4px;}
  .logout-btn{padding:9px 11px;}
}

/* ---------- Buttons ---------- */
button{font-family:inherit; cursor:pointer;}
.btn,.btn-primary,.btn-ghost,.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:10px; padding:10px 16px;
  font-size:14px; font-weight:600; line-height:1.2; min-height:42px;
  transition:background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:active,.btn-primary:active,.btn-ghost:active,.btn-danger:active{transform:scale(.98);}
.btn-primary,.btn.primary{background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm);}
.btn-primary:hover,.btn.primary:hover{background:var(--brand-strong); color:#fff;}
.btn-ghost,.btn.secondary{background:var(--surface); color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover,.btn.secondary:hover{background:var(--surface-2);}
.btn-danger,.btn.danger{background:transparent; color:var(--danger); border-color:var(--danger-border);}
.btn-danger:hover,.btn.danger:hover{background:var(--danger-soft);}
.btn-sm{padding:6px 12px; font-size:13px; min-height:34px;}
button:disabled{opacity:.55; cursor:not-allowed;}

/* ---------- Form fields ---------- */
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field label,.auth-field label{font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:.01em;}
.field input,.field select,.field textarea,
.auth-field input,.inline-add input,#add-org-row input,#add-site-row input{
  font-family:inherit; font-size:15px; color:var(--text); width:100%; min-width:0;
  padding:10px 12px; min-height:44px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder,.auth-field input::placeholder,.inline-add input::placeholder{color:var(--faint);}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus,.auth-field input:focus,.inline-add input:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}
.field select{appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A95A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;}
.readonly-field{background-color:var(--surface-2) !important; font-weight:600;}
.auditor-type{display:flex; align-items:center; gap:14px; border:1px solid var(--border-strong); border-radius:10px; padding:8px 12px; background:var(--surface); min-height:44px;}
.auditor-type label{font-size:14px; text-transform:none; letter-spacing:0; color:var(--text); font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;}
.auditor-type input{accent-color:var(--brand); width:auto; min-height:0;}
input[type="checkbox"],input[type="radio"]{accent-color:var(--brand);}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px; margin-bottom:18px;
}
.card h2{font-size:18px; margin-bottom:4px;}
.muted{color:var(--muted); font-size:13.5px;}
.msg{min-height:20px; color:var(--danger); font-size:13.5px; line-height:1.45; margin-top:8px;}

/* ---------- Authentication ---------- */
#authScreen{
  position:fixed; inset:0; z-index:9999; background:var(--bg); overflow-y:auto;
  display:flex; flex-direction:column; align-items:stretch;
}
.auth-shell{flex:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:0;}
.auth-brand{
  position:relative; overflow:hidden; color:#fff; padding:56px 56px 40px;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(150deg, #2AA062 0%, #1A6F41 55%, #124D2E 100%);
}
.auth-brand .logo-chip{background:#fff; padding:12px 16px; height:92px; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.18); align-self:flex-start;}
.auth-brand h1{font-size:clamp(30px,3.6vw,44px); font-weight:800; letter-spacing:-.025em; margin:28px 0 14px;}
.auth-brand p.lead{font-size:17px; line-height:1.55; color:rgba(255,255,255,.88); max-width:30rem; margin:0;}
.auth-points{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px;}
.auth-points li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:rgba(255,255,255,.92);}
.auth-points svg{width:22px; height:22px; flex-shrink:0; margin-top:1px; color:#BFEBD2;}
.auth-brand small{color:rgba(255,255,255,.7); font-size:12.5px;}
.auth-panel{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; gap:36px;}
.auth-card{
  width:min(420px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:20px; box-shadow:var(--shadow-lg); padding:34px 32px;
}
.auth-card .auth-eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--brand-strong); text-transform:uppercase; margin:0 0 8px;}
.auth-card h2{font-size:28px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px;}
.auth-card p{margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.55;}
.auth-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.pw-wrap{position:relative; display:flex;}
.pw-wrap input{flex:1; padding-right:46px;}
.pw-toggle{position:absolute; right:2px; top:2px; bottom:2px; width:42px; display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--muted); padding:0; border-radius:8px;}
.pw-toggle:hover{color:var(--brand-strong);}
.pw-toggle svg{width:20px; height:20px;}
.pw-toggle .eye-on{display:none;}
.pw-toggle.is-visible .eye-off{display:none;}
.pw-toggle.is-visible .eye-on{display:block;}
#loginBtn{width:100%; margin-top:6px; padding:13px 16px; font-size:15px; background:var(--brand); color:var(--on-brand); border:0; border-radius:12px; font-weight:700; min-height:48px; box-shadow:var(--shadow-sm);}
#loginBtn:hover{background:var(--brand-strong); color:#fff;}
#loginMsg{min-height:22px; margin-top:12px; font-size:13.5px; color:var(--danger); line-height:1.45;}
.powered-by{display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13px; flex-wrap:wrap; text-align:center;}
.powered-by .logo-chip{height:34px;}
.powered-by b{color:var(--text); font-weight:700; letter-spacing:.01em;}
.auth-theme{position:absolute; top:16px; right:16px; z-index:20; background:var(--surface);}
@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr;}
  /* On a phone the toggle floats over the green brand panel. */
  .auth-theme{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(4px);}
  .auth-theme:hover{background:rgba(255,255,255,.32); color:#fff;}
  .auth-brand{padding:28px 24px 26px; gap:18px;}
  .auth-brand .logo-chip{height:64px; padding:8px 12px;}
  .auth-brand h1{font-size:28px; margin:18px 0 8px;}
  .auth-brand p.lead{font-size:15px;}
  .auth-points{display:none;}
  .auth-brand small{display:none;}
  .auth-panel{padding:26px 16px 32px; gap:26px; justify-content:flex-start;}
  .auth-card{padding:26px 22px; margin-top:-8px;}
}