/* SPNL Crew Manager — design tokens
   Base:      #F5F3EE  paper
   Surface:   #FFFFFF
   Ink:       #211B3F  deep indigo-navy, sampled from the globe in the real
              Stalion-Primi logo (letterhead documents)
   Ink-soft:  #55636E
   Line:      #DCD7CC
   Accent:    #8D2530  brick-red, sampled from the horse in the real
              Stalion-Primi logo
   Steel:     #1F6F78  teal-steel (secondary / informational)
   Good:      #2E7D4F  approved / valid
   Warn:      #C7891A  due soon / expiring
   Bad:       #B23A2E  refused / expired
*/

@font-face {
  font-family: 'Local UI';
  src: local('system-ui');
}

:root{
  --paper:#F5F3EE;
  --surface:#FFFFFF;
  --ink:#211B3F;
  --ink-soft:#55636E;
  --line:#DCD7CC;
  --accent:#8D2530;
  --accent-ink:#5C1720;
  --steel:#1F6F78;
  --good:#2E7D4F;
  --warn:#C7891A;
  --bad:#B23A2E;
  --radius:10px;
  --tap:56px;
  font-size:17px;
  /* Fixed brand-navy for chrome surfaces (topbar, sidebar, gauge card) —
     deliberately does NOT flip with the theme, unlike --ink above, which
     is body text and needs to invert for readability in dark mode. */
  --brandbar:#211B3F;
}

/* Dark mode — same brand colors (accent, good, warn, bad, steel stay put
   for consistent meaning), only the base surface/text tokens flip. Status
   pills below use semi-transparent overlays of these same colors rather
   than separate hardcoded pastels, so they adapt automatically without
   needing their own dark-mode rules. */
[data-theme="dark"]{
  --paper:#171325;
  --surface:#221D38;
  --ink:#EFEDF7;
  --ink-soft:#A79FC2;
  --line:#3B3456;
}

*{box-sizing:border-box;}
html{overflow-x:hidden;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-weight:800;
  letter-spacing:-0.01em;
  margin:0 0 4px 0;
}
h1{font-size:1.6rem;}
h2{font-size:1.2rem;}
h3{font-size:1rem; font-weight:700;}
p{margin:0 0 8px 0;}
a{color:var(--steel); text-decoration:none;}
a:hover{text-decoration:underline;}

.numeral{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  letter-spacing:-0.02em;
}

/* ---------- Layout shells ---------- */
.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  background:var(--brandbar);
  color:#fff;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.05rem;
}
.brand .mark{
  width:30px;height:30px;border-radius:6px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:800; font-size:0.95rem; color:#fff;
}
.brand-logo-img{
  height:34px; width:auto; display:block;
  border-radius:6px; background:#fff; padding:2px;
}
.mark-fallback{ display:none; }
.topbar .who{
  font-size:0.85rem;
  color:#C9D2D8;
  text-align:right;
}
.topbar .who b{color:#fff; display:block; font-size:0.95rem;}
.topbar form{display:inline;}
.logout-btn{
  background:transparent;
  border:1px solid #3A4753;
  color:#E7EAEC;
  padding:8px 12px;
  border-radius:8px;
  font-size:0.85rem;
  cursor:pointer;
}
.logout-btn:hover{border-color:var(--accent); color:#fff;}
.theme-toggle-btn{
  background:transparent; border:1px solid #3A4753; color:#E7EAEC;
  width:36px; height:36px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; flex-shrink:0;
}
.theme-toggle-btn:hover{border-color:var(--accent);}
.theme-toggle-btn svg{width:18px; height:18px;}

.main{
  flex:1;
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:18px 16px 90px 16px;
}

/* ---------- Worker: big-card home ---------- */
.tile-group{margin-top:20px;}
.tile-group:first-child{margin-top:14px;}
.tile-group-label{
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
  padding:0 2px;
}
.grid-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}
.tile-group .grid-cards{margin-top:0;}
@media(min-width:560px){
  .grid-cards{grid-template-columns:1fr 1fr;}
}

.tile{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:6px solid var(--steel);
  border-radius:var(--radius);
  padding:18px;
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
.tile svg{width:20px; height:20px; color:var(--ink-soft); margin-bottom:6px;}
.tile.accent svg{color:var(--accent);}
.tile.good svg{color:var(--good);}
.tile.warn svg{color:var(--warn);}
.tile.bad svg{color:var(--bad);}
.tile.link{cursor:pointer; transition:border-color .15s ease, transform .05s ease;}
.tile.link:hover{border-left-color:var(--accent);}
.tile.link:active{transform:scale(0.99);}
.tile .tile-label{
  font-size:0.85rem;
  color:var(--ink-soft);
  font-weight:600;
}
.tile .tile-value{
  font-size:1.5rem;
  font-weight:800;
}
.tile.accent{border-left-color:var(--accent);}
.tile.good{border-left-color:var(--good);}
.tile.warn{border-left-color:var(--warn);}
.tile.bad{border-left-color:var(--bad);}

.tile-link-block{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Rotation gauge on worker home */
.gauge-card{
  background:var(--brandbar);
  color:#fff;
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.gauge-card .big-number{
  font-size:3rem;
  line-height:1;
}
.gauge-card .gauge-label{
  color:#B9C3CA;
  font-size:0.85rem;
  margin-top:4px;
}
.gauge-card .status-pill{
  display:inline-block;
  padding:5px 12px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  background:var(--accent);
  color:#fff;
}
.status-pill.on_break{background:var(--steel);}
.status-pill.due_soon,.status-pill.due_for_break_end{background:var(--warn); color:#241a02;}
.status-pill.upcoming{background:#3A4753;}
[data-theme="dark"] .status-pill.upcoming{background:#544C74;}

/* ---------- Sections / rows ---------- */
.section{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin-top:16px;
}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:8px;
}
.row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--line);
  gap:6px 12px;
}
.row:first-of-type{border-top:none;}
.row .meta{color:var(--ink-soft); font-size:0.85rem;}
.row > *{min-width:0; overflow-wrap:break-word;}

.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:700;
  white-space:nowrap;
}
.pill.pending,.pill.expiring,.pill.due_soon,.pill.due_for_break_end{background:rgba(199,137,26,0.18); color:var(--warn);}
.pill.approved,.pill.valid,.pill.active,.pill.on_rig{background:rgba(46,125,79,0.18); color:var(--good);}
.pill.refused,.pill.expired{background:rgba(178,58,46,0.18); color:var(--bad);}
.pill.on_break{background:rgba(31,111,120,0.18); color:var(--steel);}
.pill.upcoming,.pill.neutral{background:rgba(85,99,110,0.14); color:var(--ink-soft);}
[data-theme="dark"] .pill.upcoming,[data-theme="dark"] .pill.neutral{background:rgba(239,237,247,0.10);}

/* ---------- Buttons & forms ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--tap);
  padding:0 20px;
  border-radius:8px;
  border:none;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
}
.btn:hover{background:var(--accent-ink);}
.btn.secondary{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn.secondary:hover{border-color:var(--ink);}
.btn.good{background:var(--good);}
.btn.bad{background:var(--bad);}
.btn.small{min-height:40px; padding:0 14px; font-size:0.85rem;}
.btn.block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* Back link on pages reached one level deep (My rotation, profile,
   support) that aren't in the tab bar / sidebar — quick way back
   without relying on the browser's own back button. */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  padding:6px 0;
  margin-bottom:10px;
  color:var(--ink-soft);
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
}
.back-link:hover{color:var(--accent);}

label{
  display:block;
  font-size:0.85rem;
  font-weight:700;
  color:var(--ink-soft);
  margin:14px 0 6px 0;
}
label:first-of-type{margin-top:0;}
input,select,textarea{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:var(--tap);
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:0 14px;
  font-size:1rem;
  font-family:inherit;
  background:var(--surface);
  color:var(--ink);
}
textarea{min-height:90px; padding:12px 14px;}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--steel);
  box-shadow:0 0 0 3px rgba(31,111,120,0.15);
}

/* Date/time inputs render a wider native widget on some mobile browsers
   (Android Chrome especially) than their box-sizing width would suggest —
   without min-width:0 on the grid item wrapping them, the grid track grows
   to fit that intrinsic content size and pushes the field past the edge
   of its card instead of wrapping to the constrained column width. */
.field-row{display:grid; grid-template-columns:1fr; gap:0; min-width:0;}
.field-row > div{min-width:0;}
@media(min-width:560px){
  .field-row.two{grid-template-columns:1fr 1fr; gap:0 14px;}
}

/* ---------- Auth screen ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brandbar);
  padding:20px;
}
.auth-box{
  background:var(--paper);
  border-radius:14px;
  padding:32px 28px;
  width:100%;
  max-width:380px;
}
.auth-box .mark{
  width:44px;height:44px;border-radius:10px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:800; color:#fff; font-size:1.2rem;
  margin-bottom:16px;
}
.auth-box .brand-logo-img{ height:56px; margin-bottom:16px; }
.auth-box h1{font-size:1.3rem;}
.company-wordmark{
  font-size:0.8rem;
  font-weight:800;
  letter-spacing:0.12em;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.auth-box .sub{color:var(--ink-soft); font-size:0.9rem; margin-bottom:20px;}
.error-box{
  background:#F6DCD8; color:var(--bad);
  border-radius:8px; padding:12px 14px;
  font-size:0.9rem; margin-bottom:14px; font-weight:600;
}
.hint-box{
  background:#DCE7EA; color:var(--steel);
  border-radius:8px; padding:12px 14px;
  font-size:0.82rem; margin-top:18px; line-height:1.5;
}

/* ---------- Bottom tab bar (worker mobile nav) ---------- */
.tabbar{
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--surface);
  border-top:1px solid var(--line);
  display:flex;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0)) 4px;
  z-index:10;
}
.tabbar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 2px;
  color:var(--ink-soft);
  font-size:0.72rem;
  font-weight:700;
  border-radius:8px;
}
.tabbar a.active{color:var(--accent);}
.tabbar svg{width:22px;height:22px;}
.notif-bell-icon svg{width:22px;height:22px;}

/* ---------- Notification bell dropdown ---------- */
.notif-bell-wrap{position:relative; display:inline-block;}
.notif-bell-btn{
  background:transparent; border:none; cursor:pointer;
  padding:0; margin:0; font:inherit;
  display:inline-flex; align-items:center; gap:8px;
  color:inherit;
}
.notif-panel{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:320px;
  max-width:calc(100vw - 32px);
  max-height:70vh;
  overflow-y:auto;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(0,0,0,0.25);
  z-index:200;
  padding:4px 0;
}
.notif-panel.open{display:block;}
/* The admin bell sits at the LEFT end of its topline, so its dropdown
   opens from the left edge instead — anchoring it to the right there
   would push most of the panel off the left side of the content area. */
.notif-panel--left{right:auto; left:0;}
.notif-panel-header{
  padding:10px 14px;
  font-weight:800;
  font-size:0.82rem;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.notif-item{
  display:block;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
}
.notif-item:last-of-type{border-bottom:none;}
.notif-item:hover{background:var(--surface); text-decoration:none;}
.notif-item-title{font-weight:700; font-size:0.86rem; display:flex; align-items:center; gap:8px;}
.notif-item-title svg{width:15px; height:15px; flex-shrink:0; color:var(--steel);}
.notif-item-detail{font-size:0.78rem; color:var(--ink-soft); margin-top:2px; margin-left:23px; overflow-wrap:break-word;}
.notif-panel-footer{padding:8px 14px 10px 14px;}
.notif-panel-footer a{font-size:0.82rem; font-weight:700;}
.notif-panel-empty{padding:22px 14px; text-align:center; color:var(--ink-soft); font-size:0.85rem;}

@media(max-width:480px){
  .notif-panel, .notif-panel--left{ width:calc(100vw - 32px); right:0; left:auto; }
}

/* ---------- Photo/file upload choice (assets/js/photo-upload.js) ---------- */
.photo-upload-wrap{margin:6px 0 12px 0;}
.photo-upload-buttons{display:flex; flex-wrap:wrap; gap:8px;}
.photo-upload-buttons .btn{min-height:40px;}
.photo-upload-status{margin-top:6px; font-size:0.8rem; color:var(--ink-soft);}
.photo-upload-status.has-file{color:var(--good); font-weight:600;}

/* ---------- In-page camera modal (assets/js/photo-upload.js) ---------- */
.cam-modal{
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,8,20,0.82);
  align-items:center; justify-content:center;
  padding:16px;
}
.cam-modal.show{display:flex;}
.cam-modal-box{
  background:var(--surface); color:var(--ink);
  border-radius:var(--radius);
  width:100%; max-width:520px;
  padding:14px; box-shadow:0 18px 50px rgba(0,0,0,0.45);
}
.cam-modal-video-wrap{
  position:relative;
  width:100%; aspect-ratio:4/3;
  background:#000; border-radius:calc(var(--radius) - 2px);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.cam-modal-video{width:100%; height:100%; object-fit:cover;}
.cam-modal-error{
  padding:18px; text-align:center; font-size:0.86rem;
  color:#fff;
}
.cam-modal-controls{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:12px; flex-wrap:wrap;
}
.cam-shutter{
  background:var(--accent); border-color:var(--accent); color:#fff;
  font-weight:700; min-width:150px;
}
.cam-shutter:hover{background:var(--accent-ink); border-color:var(--accent-ink);}

/* ---------- Guided tour (assets/js/tour-guide.js) ---------- */
.tour-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:transparent;
}
.tour-spotlight{
  position:fixed; z-index:9999; display:none;
  border:2px solid var(--accent);
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(10,8,20,0.62);
  pointer-events:none;
  transition:left .32s ease, top .32s ease, width .32s ease, height .32s ease, opacity .2s ease;
}
.tour-spotlight--hidden{opacity:0;}
.tour-card{
  position:fixed; z-index:10000;
  width:320px; max-width:calc(100vw - 32px);
  background:var(--surface); color:var(--ink);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 20px 46px rgba(0,0,0,0.32);
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease, top .32s ease, left .32s ease;
}
.tour-card.show{opacity:1; transform:translateY(0);}
.tour-card-step{
  display:inline-block;
  background:var(--accent); color:#fff;
  font-weight:800; font-size:0.68rem; letter-spacing:0.03em;
  padding:4px 11px; border-radius:999px; margin-bottom:10px;
}
.tour-card-title{font-weight:800; font-size:1.05rem; color:var(--ink); margin-bottom:6px; letter-spacing:-0.01em;}
.tour-card-body{font-size:0.86rem; color:var(--ink-soft); line-height:1.5;}
.tour-card-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px;}
.tour-skip{
  background:transparent; border:none; color:var(--ink-soft);
  font-size:0.8rem; font-weight:700; text-decoration:underline; cursor:pointer; padding:0;
}
.tour-nav-btns{display:flex; gap:8px;}
.tour-back,.tour-next{
  border:none; border-radius:8px; font-weight:700; font-size:0.82rem; cursor:pointer;
  min-height:38px; padding:0 16px;
}
.tour-back{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.tour-next{background:var(--accent); color:#fff;}
.tour-next:hover{background:var(--accent-ink);}

/* ---------- Admin shell ---------- */
.admin-shell{display:flex; min-height:100vh;}
.admin-rail{
  width:220px;
  background:var(--brandbar);
  color:#fff;
  padding:18px 12px;
  flex-shrink:0;
}
.admin-rail .brand{font-weight:800; padding:0 8px 18px 8px; font-size:1.05rem; display:flex; gap:8px; align-items:center;}
.admin-rail .nav-group{margin-bottom:2px;}
.admin-rail .nav-group-label{
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:#8A97A0;
  padding:6px 10px 6px 10px;
}
.admin-rail .nav-divider{height:1px; background:rgba(255,255,255,0.09); margin:8px 10px 12px 10px;}
.admin-rail a{
  display:flex;
  align-items:center;
  gap:10px;
  color:#C9D2D8;
  padding:10px 10px;
  border-radius:8px;
  font-size:0.92rem;
  font-weight:600;
  margin-bottom:2px;
}
.admin-rail a svg{width:18px; height:18px; flex-shrink:0; opacity:0.8;}
.admin-rail a.active svg{opacity:1;}
.admin-rail a.active{background:var(--accent); color:#fff;}
.admin-rail a:hover{color:#fff; text-decoration:none;}
.admin-main{flex:1; padding:24px 28px 60px 28px; max-width:1100px;}
.admin-topline{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}

@media(max-width:820px){
  .admin-shell{flex-direction:column;}
  .admin-rail{width:100%; display:flex; align-items:center; overflow-x:auto; padding:10px 8px; gap:4px;}
  .admin-rail .brand{display:none;}
  .admin-rail .nav-group{display:flex; gap:4px; margin-bottom:0; flex-shrink:0;}
  .admin-rail .nav-group-label{display:none;}
  .admin-rail .nav-divider{display:block; width:1px; height:26px; flex-shrink:0; background:rgba(255,255,255,0.16); margin:0 6px;}
  .admin-rail a{white-space:nowrap; margin-bottom:0;}
  .admin-rail a span{display:inline;}
  .admin-main{padding:18px 16px 40px 16px;}
}

table{width:100%; border-collapse:collapse;}
th{
  text-align:left;
  font-size:0.78rem;
  color:var(--ink-soft);
  font-weight:700;
  padding:8px 10px;
  border-bottom:2px solid var(--line);
}
td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  font-size:0.92rem;
  vertical-align:middle;
}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);}

.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:14px 0;
}

.empty-state{
  text-align:center;
  padding:36px 20px;
  color:var(--ink-soft);
}

.flash{
  background:rgba(46,125,79,0.16); color:var(--good);
  padding:12px 16px; border-radius:8px;
  font-weight:600; font-size:0.9rem;
  margin-bottom:14px;
}
.flash.bad{background:rgba(178,58,46,0.16); color:var(--bad);}

.helper-text{font-size:0.8rem; color:var(--ink-soft); margin-top:-2px; margin-bottom:10px;}