/* PIE brand stylesheet — shared by the store app (/) and the admin portal (/admin/). See docs/pie-brand.md.
   Tokens first, then base, header, navigation, cards and lists, forms, buttons, status, tables, camera, portal. */

/* ---- Fonts (self-hosted, latin subset; OFL) ---- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-500.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-700.woff2) format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-semi-condensed-700.woff2) format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-semi-condensed-800.woff2) format("woff2");}

/* ---- Tokens ---- */
:root{
  --blue:#006491; --blue-deep:#00527a; --blue-ink:#006491; --on-blue:#ffffff;
  --red:#e31837; --red-ink:#c8102e; --on-red:#ffffff;
  --green:#1b7f3b; --amber:#b25e09;
  --bg:#f3f6f8; --card:#ffffff; --text:#11202b; --muted:#5b6b78; --border:#dbe3e9; --field:#f3f6f8;
  --okbg:#e8f6ec; --warnbg:#fdf1e3; --dangerbg:#fde8eb;
  --radius:14px; --radius-s:10px; --tap:48px;
  --font-display:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --blue-ink:#5cb6de; --red-ink:#ff6b80; --green:#4cc06f; --amber:#f0a94a;
    --bg:#0f171d; --card:#18232b; --text:#eef3f6; --muted:#97a6b1; --border:#273540; --field:#101a21;
    --okbg:#143524; --warnbg:#3a2a12; --dangerbg:#3c171d; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --blue-ink:#5cb6de; --red-ink:#ff6b80; --green:#4cc06f; --amber:#f0a94a;
  --bg:#0f171d; --card:#18232b; --text:#eef3f6; --muted:#97a6b1; --border:#273540; --field:#101a21;
  --okbg:#143524; --warnbg:#3a2a12; --dangerbg:#3c171d; color-scheme:dark;
}

/* ---- Base ---- */
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.35;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
a{color:var(--blue-ink);}
h2{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:.005em;margin:0 0 10px;color:var(--text);}
h3{font-size:.95rem;font-weight:700;margin:12px 0 6px;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-visible{outline:2px solid var(--blue-ink);outline-offset:2px;}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px;border-color:transparent;}

/* ---- Header: brand on the left, context (store / role) beside it ---- */
header{background:var(--blue);color:var(--on-blue);padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;}
header.admin{background:var(--blue-deep);}
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--on-blue);text-decoration:none;}
.mark{width:28px;height:28px;display:block;flex-shrink:0;}
.word{font-family:var(--font-display);font-weight:800;font-size:1.45rem;letter-spacing:.03em;line-height:1;}
.ctx[hidden]{display:none;}
.ctx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;padding-left:12px;border-left:1px solid rgba(255,255,255,.28);}
.ctx h1{margin:0;font-size:1rem;font-weight:700;font-family:var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctx p{margin:0;font-size:.8rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.logout{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:var(--on-blue);min-height:40px;padding:0 14px;border-radius:var(--radius-s);font-weight:600;font-size:.88rem;white-space:nowrap;margin-left:auto;}
.wrap{max-width:680px;margin:0 auto;padding:16px;}
footer.legal{text-align:center;font-size:.72rem;color:var(--muted);padding:12px 16px calc(18px + env(safe-area-inset-bottom,0px));}

/* ---- Sign-in hero ---- */
.hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 10px;}
.hero .mark{width:56px;height:56px;color:var(--blue-ink);--slice:var(--red);}
.hero .word{font-size:2.3rem;color:var(--blue-ink);}
.hero p{margin:0;color:var(--muted);font-size:.95rem;text-align:center;max-width:32ch;}

/* ---- Navigation: role switch (segmented), section tabs (pills) ---- */
.roles{display:flex;gap:4px;margin-bottom:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-s);padding:4px;}
.roles button{flex:1;min-width:90px;min-height:44px;border:none;border-radius:8px;background:transparent;color:var(--text);font-weight:600;font-size:.92rem;}
.roles button.active{background:var(--red);color:var(--on-red);}
/* the tab bar scrolls sideways: a thin scrollbar always, plus a fade on the right edge while more tabs are hidden
   (the app sets data-more); wheel and drag scrolling for desktop are in the app */
.tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;overscroll-behavior-x:contain;cursor:default;}
.tabs::-webkit-scrollbar{height:6px;}
.tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.tabs[data-more="1"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
.tabs.dragging{cursor:grabbing;user-select:none;}
.tabs button{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:600;font-size:.86rem;white-space:nowrap;}
.tabs button.active{background:var(--blue);color:var(--on-blue);border-color:var(--blue);}
.chip{display:inline-block;min-height:40px;line-height:38px;padding:0 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-weight:600;cursor:pointer;font-size:.9rem;}
.chip.on{background:var(--red);color:var(--on-red);border-color:var(--red);}
.pill{display:inline-block;background:var(--red);color:var(--on-red);border-radius:10px;font-size:.7rem;padding:1px 6px;margin-left:4px;font-weight:700;vertical-align:middle;}
.alertTab{background:var(--red)!important;color:var(--on-red)!important;border-color:var(--red)!important;animation:pulse 1.2s infinite;}
.alertBanner{cursor:pointer;animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(227,24,55,.5)}50%{box-shadow:0 0 0 6px rgba(227,24,55,0)}}
@media (prefers-reduced-motion: reduce){ .alertTab,.alertBanner{animation:none;} }

/* ---- Cards, lists, rows ---- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;}
.cardHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
.cardHead h2{margin:0;}
.count{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.progress{height:6px;border-radius:3px;background:var(--field);overflow:hidden;margin-bottom:10px;}
.progress i{display:block;height:100%;background:var(--blue);border-radius:3px;}
.task{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);min-height:52px;}
.task:last-child{border-bottom:none;}
.task input[type=checkbox]{width:26px;height:26px;margin:0;flex-shrink:0;accent-color:var(--blue);}
.task .title{font-weight:600;}
.task .meta{font-size:.8rem;color:var(--muted);margin-top:2px;}
.task.done .title{text-decoration:line-through;color:var(--muted);}
.icon{width:26px;height:26px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;border:1.5px solid var(--border);color:var(--muted);font-size:.95rem;}
.icon.ok{border-color:var(--green);color:var(--green);font-weight:800;}
.ans{font-size:.9rem;color:var(--text);background:var(--field);padding:5px 10px;border-radius:8px;display:inline-block;margin-top:6px;}
.empty{color:var(--muted);font-size:.95rem;text-align:center;padding:16px 0;}
.storeRow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);}
.storeRow:last-child{border-bottom:none;}
.status{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:.92rem;}
.status:last-child{border-bottom:none;}
.perm{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.perm:last-child{border-bottom:none;}
.perm input[type=checkbox]{width:26px;height:26px;margin:0;flex-shrink:0;accent-color:var(--blue);}
.perm.off{opacity:.55;cursor:default;}
.perm .title{font-weight:600;} .perm .meta{font-size:.8rem;color:var(--muted);margin-top:2px;}
#rolePanel{border-color:var(--blue-ink);}
.req{border:1px solid var(--border);border-left:4px solid var(--border);border-radius:var(--radius-s);padding:10px 12px;margin-bottom:8px;background:var(--card);}
.req.prio-Urgent{border-left-color:var(--red);} .req.prio-High{border-left-color:var(--amber);} .req.prio-Normal{border-left-color:var(--blue);} .req.prio-Low{border-left-color:var(--muted);}
.req.done{opacity:.6;} .req .title{font-weight:600;}
ul.miss{margin:4px 0 8px 18px;padding:0;font-size:.85rem;}
ul.miss li.ok{color:var(--muted);} ul.miss li.bad{color:var(--red-ink);}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;font-weight:700;background:var(--field);padding:4px 10px;border-radius:6px;letter-spacing:.04em;}
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--field);color:var(--muted);margin-left:6px;border:1px solid var(--border);vertical-align:middle;}
.badge.ok{color:var(--green);} .badge.warn{color:var(--amber);} .badge.bad{color:var(--red-ink);}
.badge.prio.Urgent{color:var(--on-red);background:var(--red);border-color:var(--red);} .badge.prio.High{color:var(--amber);} .badge.prio.Normal{color:var(--blue-ink);}
.badge.status-InProgress{color:var(--amber);} .badge.status-Done{color:var(--green);}
.thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--border);vertical-align:middle;cursor:pointer;}
.photoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:10px;}
.photoGrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:pointer;}

/* ---- Forms ---- */
input[type=text],input[type=email],input[type=password],input[type=time],input[type=date],input[type=search],input[type=number],select,textarea{min-height:var(--tap);padding:0 14px;border-radius:var(--radius-s);border:1.5px solid var(--border);background:var(--field);color:var(--text);font-size:1rem;width:100%;}
textarea{padding:10px 14px;}
select{-webkit-appearance:none;appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6b78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;line-height:1.25;}
select.tplType{max-width:140px;font-size:.85rem;padding-left:8px;min-height:40px;}
select.reqStatus{max-width:160px;font-size:.88rem;min-height:40px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.85rem;font-weight:600;color:var(--muted);}
.row{display:flex;gap:8px;align-items:center;}
.row > *{flex:1;}
.row > .fixed{flex:0 0 auto;width:auto;}
.error{color:var(--red-ink);font-size:.88rem;min-height:1.2em;}
.hint{font-size:.85rem;color:var(--muted);margin:4px 0 8px;}
.meta{font-size:.8rem;color:var(--muted);}
.divider{border-top:1px solid var(--border);margin:6px 0 2px;}

/* ---- Buttons ---- */
button.primary{background:var(--blue);color:var(--on-blue);border:none;min-height:var(--tap);padding:0 16px;border-radius:var(--radius-s);font-weight:700;font-size:1.02rem;letter-spacing:.01em;width:100%;}
button.primary:disabled{opacity:.5;cursor:default;}
button.small{background:transparent;border:1px solid var(--border);color:var(--text);min-height:36px;padding:0 12px;border-radius:9px;font-size:.85rem;font-weight:600;white-space:nowrap;}
button.small.danger{color:var(--red-ink);}
.del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;padding:0 8px;min-height:36px;}
.photoBtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--radius-s);border:1.5px solid var(--blue-ink);color:var(--blue-ink);background:transparent;font-weight:600;font-size:.88rem;cursor:pointer;}
.outline{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--radius-s);border:1.5px solid var(--blue-ink);color:var(--blue-ink);background:transparent;font-weight:600;}
@media (prefers-reduced-motion: no-preference){ button.primary,.logout,.roles button,.tabs button{transition:filter .15s,background-color .15s;} button.primary:hover,.logout:hover{filter:brightness(1.08);} }

/* ---- Status banners ---- */
.banner{padding:9px 12px;border-radius:var(--radius-s);font-size:.9rem;font-weight:500;margin-bottom:10px;border:none;}
.banner.warn{background:var(--warnbg);color:var(--amber);} .banner.bad{background:var(--dangerbg);color:var(--red-ink);} .banner.ok{background:var(--okbg);color:var(--green);}

/* ---- Tables and grids ---- */
table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums;}
th,td{padding:8px 4px;border-bottom:1px solid var(--border);text-align:center;}
th{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
th:first-child,td:first-child{text-align:left;font-weight:600;}
td input[type=checkbox]{width:22px;height:22px;accent-color:var(--blue);}
table.grid td,table.grid th{padding:6px 2px;}
button.cell{width:100%;min-width:44px;min-height:40px;padding:0 2px;border-radius:8px;border:1px solid var(--border);font-weight:700;font-size:.85rem;background:var(--field);color:var(--text);}
button.cell.ok{background:var(--okbg);color:var(--green);border-color:transparent;}
button.cell.warn{background:var(--warnbg);color:var(--amber);border-color:transparent;}
button.cell.bad{background:var(--dangerbg);color:var(--red-ink);border-color:transparent;}
button.cell.open{outline:2px solid var(--blue-ink);}
tr.detail td{text-align:left;background:var(--field);font-size:.85rem;}

/* ---- Camera (vehicle check) ---- */
#cam{position:fixed;inset:0;background:#000;z-index:50;}
#cam video,#cam #camPrev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.camBg{position:absolute;inset:0;background:radial-gradient(ellipse at center,#2a3140,#0b0d12);}
.camMid{position:absolute;left:0;right:0;bottom:calc(120px + env(safe-area-inset-bottom,0px));text-align:center;color:#fff;font-size:.9rem;opacity:.9;}
.camGo{background:var(--red);color:#fff;border:none;min-height:48px;padding:0 22px;border-radius:28px;font-weight:700;font-size:1rem;}
.camOverlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:110px 18px 130px;}
.camOverlay svg{width:100%;height:100%;max-width:640px;color:#fff;overflow:visible;}
.camOverlay svg *{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(0,0,0,.7));}
.camOverlay svg .body{fill:rgba(255,255,255,.07);stroke-width:2.5;}
.camOverlay svg .lit{stroke:rgba(255,220,120,.95);fill:rgba(255,220,120,.18);}
.camOverlay svg .frame{stroke:rgba(255,255,255,.55);stroke-width:2;}
.camTop{position:absolute;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px;background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));color:#fff;}
.camTitle{font-weight:700;font-size:1rem;font-family:var(--font-display);} .camTip{font-size:.82rem;margin-top:3px;line-height:1.3;}
.camBar{position:absolute;bottom:0;left:0;right:0;padding:16px 24px calc(22px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));}
.camBtn{background:rgba(255,255,255,.18);color:#fff;border:none;min-height:44px;padding:0 16px;border-radius:22px;font-weight:600;font-size:.9rem;}
.camShutter{width:72px;height:72px;border-radius:50%;background:#fff;border:6px solid rgba(255,255,255,.4);box-shadow:0 0 0 2px #fff inset;}

/* ---- Admin portal ---- */
.wrap.wide{max-width:960px;}
.narrow{max-width:460px;margin:0 auto;}
.orgRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;min-height:52px;}
.orgRow:last-child{border-bottom:none;}
.orgRow:hover{background:var(--field);}
.cols{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:760px){ .cols{grid-template-columns:1fr 1fr;} }
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}