/* Safety Lessons screen (inside app.html; drawn by public/safety.js into #safety-section > #sf-root).
 *
 * Every rule is scoped under #safety-section and coloured from the app's theme (--app-*), so the screen follows
 * the company's theme like every other screen. The outer card IS the app's own `.container admin-dashboard`
 * with an `.admin-controls` title row, and the tab rows use the shared `.app-tabbar`.
 *
 * The only rules NOT under #safety-section are the two pop-ups safety.js puts on <body> -- the phone
 * full-screen player (#sf-fs) and the confirm box (#sf-modal) -- because the .container card has
 * backdrop-filter, which would trap a position:fixed child. Their ids are unique to this screen.
 * Green / red stay fixed: pass / fail, done / past due.
 */

#safety-section { font-size: 15px; }
#safety-section .sf-shell { max-width: 900px; margin-left: auto; margin-right: auto; }
#safety-section .admin-controls { gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
#safety-section .admin-controls h2 { text-align: left; font-size: 1.35em; flex: 1 1 auto; min-width: 0; }
#safety-section #sf-back { width: auto; margin-top: 0; }
#safety-section #sf-back[hidden] { display: none; }
#safety-section .sf-co { color: var(--app-label-color); text-shadow: 0 1px 4px var(--app-shadow-color), 0 0 2px var(--app-shadow-color); font-size: 0.85em; margin: -2px 0 10px; opacity: 0.9; }
#safety-section .sf-co:empty { display: none; }
#safety-section #sf-net { display: none; align-items: center; gap: 4px; vertical-align: middle; font-size: 0.5em; font-weight: bold; background: #fff; color: var(--app-accent-ink); border-radius: 12px; padding: 3px 10px; text-shadow: none; }
#safety-section #sf-net .sf-spin { margin: 0; }

/* Tab rows: the app's shared look (.app-tabbar, which wraps), with the tab cells sized like Manage Trucks'. */
#safety-section .app-tabbar { margin-bottom: 12px; }
#safety-section .app-tabbar > .sf-tabbtn { flex: 1 1 auto; text-align: center; padding: 9px 8px; font-size: 0.8em; font-weight: 700; cursor: pointer; user-select: none; }
#safety-section .sf-tabs2 > .sf-tabbtn { flex: 1 1 0; font-size: 0.9em; }

/* Cards: white, like the app's light cards; accent text uses --app-accent-ink (readable on white). */
#safety-section #sf-body input[type=text], #safety-section #sf-body input[type=date], #safety-section #sf-body textarea { width: 100%; padding: 10px; font-size: 1em; border: 1px solid #bbb; border-radius: 8px; font-family: inherit; color: #222; background: #fff; margin: 4px 0; box-sizing: border-box; }
#safety-section .sf-card { background: #fff; color: #222; border-radius: 12px; padding: 14px; margin: 0 0 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.25); text-shadow: none; }
#safety-section .sf-h  { font-size: 1.08em; font-weight: bold; color: var(--app-accent-ink); margin-bottom: 8px; }
#safety-section .sf-hw { font-size: 1.08em; font-weight: bold; color: var(--app-label-color); text-shadow: 0 1px 4px var(--app-shadow-color), 0 2px 10px var(--app-shadow-color), 0 0 2px var(--app-shadow-color); margin: 4px 2px 8px; }
#safety-section .sf-h2 { font-size: 0.98em; font-weight: bold; color: var(--app-accent-ink); margin: 12px 0 6px; }
#safety-section .sf-t  { font-weight: bold; color: #222; word-wrap: break-word; overflow-wrap: anywhere; }
#safety-section .sf-sub { font-size: 0.85em; color: #555; margin-top: 2px; word-wrap: break-word; overflow-wrap: anywhere; }
#safety-section .sf-red { color: #c62828; font-weight: bold; }
#safety-section .sf-lbl { display: block; font-size: 0.88em; font-weight: bold; color: #333; margin: 8px 0 4px; text-shadow: none; }
#safety-section .sf-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
#safety-section .sf-row:last-child { border-bottom: none; }
#safety-section .sf-tools { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons: the app's button (accent fill, accent text, hover), reset from the app's full-width default. */
#safety-section .sf-btn { width: auto; margin: 0; padding: 10px 14px; background-color: var(--app-accent-color); color: var(--app-accent-text); border: none; border-radius: 6px; font-size: 0.95em; font-weight: 600; cursor: pointer; font-family: inherit; text-shadow: none; }
#safety-section .sf-btn:hover { background-color: var(--app-accent-hover); }
#safety-section .sf-btn:disabled { opacity: 0.55; cursor: default; }
#safety-section .sf-btn.sf-green { background-color: #2e7d32; color: #fff; } #safety-section .sf-btn.sf-green:hover { background-color: #1b5e20; }
#safety-section .sf-btn.sf-green:disabled { background-color: #757575; opacity: 1; }
#safety-section .sf-btn.sf-grey { background-color: #78909c; color: #fff; } #safety-section .sf-btn.sf-grey:hover { background-color: #546e7a; }
#safety-section .sf-btn.sf-purple { background-color: #6a1b9a; color: #fff; } #safety-section .sf-btn.sf-purple:hover { background-color: #4a148c; }
#safety-section .sf-btn.sf-orange { background-color: #e65100; color: #fff; } #safety-section .sf-btn.sf-orange:hover { background-color: #bf360c; }
#safety-section .sf-btn.sf-danger { background-color: #c62828; color: #fff; } #safety-section .sf-btn.sf-danger:hover { background-color: #b71c1c; }
#safety-section .sf-btn.sf-sm { padding: 6px 10px; font-size: 0.85em; }

#safety-section .sf-lock { background: #ffebee; color: #b71c1c; border: 2px solid #c62828; font-weight: bold; }
#safety-section .sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
#safety-section .sf-vcard { border-radius: 10px; padding: 8px; background: #fff; color: #222; box-shadow: 0 2px 8px rgba(0,0,0,0.2); min-width: 0; text-shadow: none; }
#safety-section .sf-pick { cursor: pointer; border: 2px solid #e0e0e0; }
#safety-section .sf-pick:hover { border-color: var(--app-accent-tint-border); }
#safety-section .sf-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; display: block; cursor: pointer; background: #000; }
#safety-section .sf-thumb-sm { width: 110px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; flex-shrink: 0; cursor: pointer; background: #000; }
#safety-section .sf-vwrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; margin: 6px 0; }
#safety-section .sf-vwrap iframe, #safety-section .sf-vwrap > div { position: absolute; inset: 0; width: 100%; height: 100%; }
#safety-section .sf-q { border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px; margin: 6px 0; background: #fafafa; color: #222; }
#safety-section .sf-q.on { border-color: #2e7d32; background: #f1f8e9; }
#safety-section .sf-choices { display: block; font-size: 0.88em; margin-top: 4px; }
#safety-section .sf-choices span { display: block; }
#safety-section .sf-choices .sf-ok { color: #1b5e20; font-weight: bold; }
#safety-section .sf-meta { display: block; font-size: 0.78em; color: #666; margin-top: 4px; }
#safety-section .sf-link { width: auto; margin: 0; color: var(--app-accent-ink); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
#safety-section .sf-link:hover { background: none; }
#safety-section .sf-busy { background: #f3e5f5; color: #4a148c; border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 0.9em; font-weight: bold; text-shadow: none; }
#safety-section .sf-qform { border: 2px solid var(--app-accent-ink); border-radius: 8px; padding: 10px; margin: 8px 0; background: #fff; color: #222; }
#safety-section .sf-foot { border: 2px solid #2e7d32; }
#safety-section .sf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
#safety-section .sf-chip { width: auto; margin: 0; padding: 7px 11px; border-radius: 18px; background: #fff; color: var(--app-accent-ink); border: 2px solid var(--app-accent-ink); font-size: 0.86em; font-weight: 600; cursor: pointer; font-family: inherit; text-shadow: none; }
#safety-section .sf-chip:hover { background: var(--app-accent-tint); }
#safety-section .sf-chip.on { background: var(--app-accent-color); color: var(--app-accent-text); border-color: var(--app-accent-color); }
#safety-section .sf-chip.empty { border-color: #90a4ae; color: #546e7a; }
#safety-section .sf-person { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #eee; color: #222; cursor: pointer; margin: 0; font-weight: normal; text-shadow: none; }
#safety-section .sf-person.on { background: var(--app-accent-tint); }
#safety-section .sf-person input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
#safety-section .sf-click { cursor: pointer; }
#safety-section .sf-count { min-width: 58px; text-align: center; font-size: 1.3em; font-weight: bold; color: #e65100; }
#safety-section .sf-count.all { color: #2e7d32; } #safety-section .sf-count.late { color: #c62828; }
#safety-section .sf-pill { display: inline-block; font-size: 0.72em; padding: 2px 7px; border-radius: 10px; background: #eceff1; color: #37474f; font-weight: bold; vertical-align: middle; }
#safety-section .sf-red-pill { background: #c62828; color: #fff; }
#safety-section .sf-prog { height: 8px; background: #e0e0e0; border-radius: 4px; margin-top: 8px; overflow: hidden; }
#safety-section .sf-prog > div { height: 100%; background: #2e7d32; }
#safety-section .sf-qt { font-size: 1.05em; font-weight: bold; color: #222; margin: 6px 0 10px; }
#safety-section .sf-ans { display: block; width: 100%; text-align: left; margin: 0 0 7px; padding: 12px; background: #fff; color: #222; border: 2px solid #90a4ae; border-radius: 8px; font-size: 0.98em; font-weight: normal; cursor: pointer; font-family: inherit; text-shadow: none; }
#safety-section .sf-ans:hover { background: #fff; }
#safety-section .sf-ans.picked, #safety-section .sf-ans.picked:hover { border-color: var(--app-accent-ink); background: var(--app-accent-tint); font-weight: bold; }
#safety-section .sf-ans.good, #safety-section .sf-ans.good:hover { border-color: #2e7d32; background: #e8f5e9; font-weight: bold; }
#safety-section .sf-ans.bad, #safety-section .sf-ans.bad:hover { border-color: #c62828; background: #ffebee; }
#safety-section .sf-ans:disabled { cursor: default; color: #222; }
#safety-section .sf-fb { font-weight: bold; font-size: 1.05em; margin: 4px 0 10px; }
#safety-section .sf-fb.good { color: #2e7d32; } #safety-section .sf-fb.bad { color: #c62828; }
#safety-section .sf-warn { background: #fff8e1; border: 1px solid #f9a825; color: #5d4037; border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-weight: bold; font-size: 0.92em; }
#safety-section mark { background: #fff59d; color: inherit; padding: 0 2px; }
#safety-section label { color: inherit; text-shadow: none; }
@media (min-width: 760px) {
  #safety-section .sf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  #safety-section .sf-cols > .sf-card { margin-bottom: 0; }
  #safety-section .sf-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: start; }
}
#safety-section .sf-spin, #sf-fs .sf-spin, #sf-modal .sf-spin { display: inline-block; width: 14px; height: 14px; border: 3px solid var(--app-accent-tint-border); border-top-color: var(--app-accent-ink); border-radius: 50%; animation: sfspin 0.8s linear infinite; vertical-align: -2px; margin-right: 8px; box-sizing: border-box; }
#safety-section .sf-btn .sf-spin { border-color: rgba(255,255,255,0.35); border-top-color: #fff; }
#safety-section .sf-spin-lg { width: 30px; height: 30px; border-width: 4px; margin: 0 0 8px; }
@keyframes sfspin { to { transform: rotate(360deg); } }

/* ── On <body>: the phone full-screen video (black, like any video player) ─────────────────────────── */
#sf-fs { position: fixed; inset: 0; z-index: 9600; background: #000; display: flex; flex-direction: column; color: #fff; font-size: 15px; }
#sf-fs .sf-fs-top { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: #111; position: relative; z-index: 2; }
#sf-fs .sf-fs-title { flex: 1; min-width: 0; font-weight: bold; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sf-fs .sf-fs-x { width: auto; margin: 0; padding: 8px 12px; background: #424242; color: #fff; border: none; border-radius: 8px; font-weight: bold; font-size: 0.9em; font-family: inherit; touch-action: manipulation; }
#sf-fs .sf-fs-mid { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
#sf-fs #sf-fs-v { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#sf-fs .sf-vwrap { position: relative; height: 100%; width: auto; max-width: 100%; max-height: 100%; aspect-ratio: 16/9; background: #000; }
@media (orientation: portrait) { #sf-fs .sf-vwrap { height: auto; width: 100%; } }
#sf-fs .sf-vwrap iframe, #sf-fs .sf-vwrap > div { position: absolute; inset: 0; width: 100%; height: 100%; }
#sf-fs .sf-fs-bot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: #111; text-align: center; font-size: 0.95em; position: relative; z-index: 2; }
#sf-fs .sf-fs-next { width: 100%; max-width: 420px; margin: 8px auto 0; display: block; padding: 12px; background: #2e7d32; color: #fff; border: none; border-radius: 10px; font-weight: bold; font-size: 1.05em; font-family: inherit; }
#sf-fs.sf-rot { inset: auto; top: 0; left: 100vw; width: 100vh; height: 100vw; transform: rotate(90deg); transform-origin: top left; }
#sf-fs.sf-rot .sf-vwrap { height: 100%; width: auto; }
#sf-fs.sf-rot .sf-fs-bot { padding: 4px 10px; font-size: 0.82em; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
#sf-fs.sf-rot .sf-fs-next { width: auto; margin: 0; padding: 7px 14px; }
@media (orientation: landscape) { #sf-fs .sf-fs-rot { display: none; } #sf-fs .sf-fs-bot { padding: 4px 10px; font-size: 0.82em; } }
body:has(#sf-fs) #app-version-tag { display: none !important; }

/* ── On <body>: the confirm / notice box ──────────────────────────────────────────────────────────── */
#sf-modal { position: fixed; inset: 0; z-index: 9800; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
#sf-modal .sf-mbox { background: #fff; color: #222; border-radius: 12px; padding: 18px; max-width: 440px; width: 100%; box-shadow: 0 8px 30px rgba(0,0,0,0.5); text-shadow: none; }
#sf-modal .sf-mt { font-weight: bold; font-size: 1.1em; color: var(--app-accent-ink); margin-bottom: 8px; }
#sf-modal .sf-mm { white-space: pre-wrap; font-size: 0.95em; margin-bottom: 14px; line-height: 1.4; }
#sf-modal .sf-mb { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#sf-modal button { width: auto; margin: 0; padding: 10px 16px; border: none; border-radius: 6px; font-size: 0.95em; font-weight: 600; cursor: pointer; font-family: inherit; color: #fff; background-color: #78909c; }
#sf-modal button:hover { background-color: #546e7a; }
#sf-modal button.ok { background-color: var(--app-accent-color); color: var(--app-accent-text); }
#sf-modal button.ok:hover { background-color: var(--app-accent-hover); }
#sf-modal button.ok.danger { background-color: #c62828; color: #fff; }