/** © 2026 HardYard - ALL RIGHTS RESERVED. */
/* safety-redesign.css — VISUAL RESTYLE ONLY for the Safety Hub.
   Scoped entirely to #safety-page. No JS logic is touched by this file.
   Matches the LED-glow / Barlow Condensed language used in the Home Hub,
   Jobs and calculator redesigns (#FF6B1A orange / #00D4FF cyan accents).

   IMPORTANT: properties that safety.js toggles at runtime to show state
   (tab active color, chip selected color, countdown ring stroke, siren
   on/off color) are deliberately left alone in this file so the app's
   functional behaviour is unaffected. */

#safety-page,
#safety-page * {
    font-family: 'Barlow Condensed', sans-serif;
}

/* ---------- Top bar title ---------- */
#safety-page .top-bar > div:nth-child(2) {
    letter-spacing: 3px !important;
}

/* ---------- Tab bar (Safety / Medical ID / Contacts) ---------- */
#safety-page [id^="safety-tabbtn-"] {
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    border-radius: 9px !important;
    background: #141414 !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
#safety-page [id^="safety-tabbtn-"]:active {
    background: #1c1c1c !important;
}

/* ---------- Generic LED-glow card frame ---------- */
/* Applies to the GPS status panel + every .hub-card on this page
   (check-in card, medical ID card, medical preview, contacts card). */
#safety-page .status-panel,
#safety-page .hub-card {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    position: relative;
    overflow: hidden;
}

/* Cyan strip = informational cards (location, medical, contacts) */
#safety-page .status-panel,
#safety-page #safety-pane-medical .hub-card,
#safety-page #safety-med-preview .hub-card,
#safety-page #safety-pane-contacts .hub-card {
    border-top: 2px solid #00D4FF !important;
    box-shadow: 0 0 10px rgba(0,212,255,0.10), inset 0 1px 0 rgba(0,212,255,0.12) !important;
}

/* Orange strip = the action card (lone worker check-in) */
#safety-page #safety-pane-safety .hub-card {
    border-top: 2px solid #FF6B1A !important;
    box-shadow: 0 0 10px rgba(255,107,26,0.10), inset 0 1px 0 rgba(255,107,26,0.15) !important;
}

/* Decorative LED sweep on tap — mirrors the Home Hub micro-interaction */
#safety-page .status-panel::before,
#safety-page .hub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 2px;
    border-radius: 2px;
    pointer-events: none;
}
#safety-page .status-panel::before,
#safety-page #safety-pane-medical .hub-card::before,
#safety-page #safety-med-preview .hub-card::before,
#safety-page #safety-pane-contacts .hub-card::before {
    background: linear-gradient(90deg, transparent, #00D4FF, transparent);
}
#safety-page #safety-pane-safety .hub-card::before {
    background: linear-gradient(90deg, transparent, #FF6B1A, transparent);
}
#safety-page .status-panel:active::before,
#safety-page .hub-card:active::before {
    animation: safetyLedRun 0.6s ease-in-out forwards;
}
@keyframes safetyLedRun {
    0%   { left: -60%; opacity: 1; }
    100% { left: 140%; opacity: 0; }
}

/* ---------- Section labels ---------- */
#safety-page .section-label {
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
}

/* ---------- GPS location readout ---------- */
#safety-page #gps-display {
    letter-spacing: 0.5px;
}

/* ---------- Check-in time / hazard chips ---------- */
/* Only static box properties — background/color/border-color are left
   alone because selectCheckinTime()/toggleCheckinHazard() set those
   inline to show which chip is selected. */
#safety-page .checkin-time-chip,
#safety-page .checkin-hazard-chip {
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* ---------- Buttons ---------- */
/* Semantic colours (red = start/alert, green = safe, grey = cancel) are
   left untouched — only typography/shape polish here. */
#safety-page .calc-btn {
    border-radius: 10px !important;
    letter-spacing: 1.5px !important;
}

/* ---------- Lone worker countdown ring ---------- */
/* Stroke colour is left alone (updateCheckinRing() drives red/orange/
   green urgency colour) — add a soft glow around the ring container only. */
#safety-page #checkin-active svg {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.08));
}
#safety-page #checkin-ring-time {
    letter-spacing: 1px;
}

/* ---------- SOS hold button + ring ---------- */
#safety-page .sos-container svg {
    filter: drop-shadow(0 0 10px rgba(255,51,51,0.35));
}
#safety-page .btn-sos {
    letter-spacing: 2px !important;
    box-shadow: 0 0 25px rgba(255,51,51,0.45) !important;
}

/* ---------- Siren button ---------- */
/* background/color/border/animation are left alone — toggleSiren() drives
   those to show on/off state. Shape + glow only. */
#safety-page #siren-btn {
    border-radius: 30px !important;
    letter-spacing: 1px !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.06);
}

/* ---------- Medical ID ---------- */
#safety-page #user-med {
    border-radius: 10px !important;
    letter-spacing: 0.3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#safety-page #user-med:focus {
    outline: none;
    border-color: #00D4FF !important;
    box-shadow: 0 0 10px rgba(0,212,255,0.25);
}

/* ---------- Emergency contacts ---------- */
/* Re-skins the contact rows (rendered fresh on every renderContacts()
   call, never toggled per-interaction) to match the LED card language
   instead of the flat red-tinted box. The delete "X" stays untouched. */
#safety-page #sos-contact-list > div {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-left: 2px solid #00D4FF !important;
    border-radius: 12px !important;
    box-shadow: 0 0 8px rgba(0,212,255,0.08) !important;
}

#safety-page #new-contact-name,
#safety-page #new-contact-number {
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#safety-page #new-contact-name:focus,
#safety-page #new-contact-number:focus {
    outline: none;
    border-color: #FF6B1A !important;
    box-shadow: 0 0 10px rgba(255,107,26,0.25);
}