/* ============================================================
   Wilton CERT — Shared Stylesheet (assets/styles.css)
   ============================================================
   PURPOSE:
     This file contains all CSS that is shared across every page
     of the Wilton CERT website. It is loaded in the <head> of
     each page via:
       <link rel="stylesheet" href="assets/styles.css">

   WHAT GOES HERE vs IN EACH PAGE:
     ✓ Put here:  variables, reset, nav, footer, shared components
     ✗ Keep in page <style>: layouts and styles unique to that page

   FONTS:
     Barlow Condensed — headings, nav, labels, badges (Google Fonts)
     Barlow           — body text, inputs, paragraphs (Google Fonts)
     Both are loaded via <link> in each page's <head>.

   SECTIONS IN THIS FILE:
     1. CSS Variables & Color Palette
     2. Reset & Base Styles
     3. Navigation
     4. Footer
     5. Shared Page Header
     6. Eyebrow (decorative section labels)
     7. Badges (Active / Inactive status pills)
     8. Shared Buttons
     9. Toast Notifications
    10. Animations
    11. Responsive / Mobile Overrides

   MAINTENANCE:
     To change a color site-wide, update the variable in section 1.
     To change the nav or footer layout, edit sections 3 or 4.
     Changes here instantly apply to all 9 pages.

   LAST UPDATED: March 2026
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES & COLOR PALETTE
   ============================================================
   All brand colors are defined here as CSS custom properties.
   Use these variables throughout this file and in page-level
   styles — never hardcode hex values directly.

   COLOR ROLES:
     --red / --red-light   Emergency red. Used for CTA buttons,
                           danger states, and the Join CERT button.
     --green-dark          Darkest green. Page background.
     --green-mid           Medium green. Cards, footer, modals.
     --green-light         Lighter green. Hover states.
     --green-accent        Bright accent green. Active states,
                           highlights, cert tags, links.
     --gold                Gold/amber. Eyebrow labels, award tags,
                           board member badge.
     --white               Pure white. Primary text on dark bg.
     --off-white           Slightly warm white. Light backgrounds.
     --text                Near-black. Text on light backgrounds
                           (e.g. inside green-accent buttons).
   ============================================================ */
:root {
  --red: #c8102e;   /* Emergency red — CTAs, danger */
  --red-light:        #E8192F;   /* Hover state for red */
  --red-text: #ff8a8a;   /* Light red for badge/text on dark backgrounds */
  --red-text-bright: #ff6b6b;   /* Brighter red for delete/error text */
  --red-dark: #3b1020;   /* Dark burgundy for error toast backgrounds */
  --green-accent-hover: #74c69d; /* Hover state for accent-colored buttons */
  --green-dark: #1b4332;   /* Page background */
  --green-mid: #2d6a4f;   /* Cards, modals, footer */
  --green-light: #40916C;   /* Subtle hover / secondary elements */
  --green-accent: #52b788;   /* Active links, highlights, badges */
  --gold: #f5a623;   /* Eyebrows, award labels */
  --white:       #FFFFFF;   /* Primary text */
  --off-white:   #F0F5F2;   /* Warm white for light surfaces */
  --text:        #1A2419;   /* Dark text on light backgrounds */
  --muted-text:  rgba(255,255,255,0.35); /* Secondary/descriptive text on dark backgrounds */
  --hub-card-body-text: rgba(255,255,255,0.5); /* Hub card description text on resources page */

  /* ── Typography tokens (overridable via theme admin) ── */
  --heading-size: clamp(32px,4vw,48px);
  --heading-letter-spacing: -0.5px;
  --label-size: 15px;
  --label-letter-spacing: 4px;
  --eyebrow-size: 15px;
  --eyebrow-letter-spacing:  3px;

  /* ── Nav & card tokens (overridable via theme admin) ── */
  --nav-bg: color-mix(in srgb, var(--green-dark) 97%, transparent); /* Navigation bar background */
  --card-radius: 12px;           /* Border radius for cards, modals, and panels */

  /* ── Button tokens (overridable via theme admin) ── */
  --btn-radius: 6px;
  --btn-font-size: 13px;

  /* ── Layout tokens (overridable via theme admin) ── */
  --page-max-width: 1100px;
}


/* ============================================================
   2. RESET & BASE STYLES
   ============================================================
   Normalizes browser defaults so the site looks consistent
   across Chrome, Firefox, Safari, and Edge.

   box-sizing: border-box  — padding/border included in element
                             width, preventing layout overflow.
   scroll-behavior: smooth — animates anchor link scrolling.
   overflow-x: hidden      — prevents horizontal scrollbars from
                             appearing due to edge elements.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

body {
  font-family: 'Barlow', sans-serif;
  background: var(--green-dark);
  color: var(--white);
  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}


/* ============================================================
   3. NAVIGATION
   ============================================================
   The nav bar is injected dynamically by assets/nav.js into
   every page via a <div id="nav-placeholder"> element.

   STRUCTURE (injected by nav.js):
     <nav>
       <a class="nav-logo">...</a>       — Logo + site name
       <ul class="nav-links">
         <li><a>Page Link</a></li>       — Regular nav links
         <li><a class="cta">...</a></li> — Join CERT red button
         <li><a class="nav-signin">...</a></li>   — Sign In (logged out)
         <li><span class="nav-user">...</span></li> — Username (logged in)
         <li><a class="nav-signout">...</a></li>  — Sign Out (logged in)
       </ul>
     </nav>

   DYNAMIC BEHAVIOR (controlled by nav.js + sessionStorage):
     Logged out → shows public pages + Sign In button
     Logged in  → shows member pages + username + Sign Out

   ACTIVE STATE:
     nav.js compares window.location.pathname to each href and
     adds class="active" to the matching link automatically.

   z-index: 200 ensures nav sits above all page content.
   backdrop-filter: blur gives frosted glass effect on scroll.
   ============================================================ */

/* Fixed top bar — spans full viewport width */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;                              /* Above all page content */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 72px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--green-accent) 30%, transparent);
}

/* Logo container: image + "WILTON CERT" text */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* CERT logo image in nav */
.nav-logo img {
  height: 46px;
  width: auto;
}

/* "WILTON CERT" wordmark next to logo */
.nav-logo span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--white);
  text-transform: uppercase;
}

/* "CERT" portion of wordmark appears in accent green */
.nav-logo span em {
  color: var(--green-accent);
  font-style: normal;
}

/* Horizontal list of nav links */
.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
}

/* Individual nav link styling */
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  padding: 6px 12px;
  border-radius: 3px;
  transition: all 0.2s;
}

/* Hover and active (current page) state */
.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
  background: color-mix(in srgb, var(--green-accent) 20%, transparent);
}

/* "Join CERT" call-to-action button — always red */
.nav-links a.cta {
  background: var(--red);
  color: white;
}
.nav-links a.cta:hover {
  background: var(--red-light);
}

/* "Sign In" link — shown when user is logged out */
.nav-signin {
  background: color-mix(in srgb, var(--green-accent) 20%, transparent);
  color: var(--white) !important;
  border: 1px solid color-mix(in srgb, var(--green-accent) 40%, transparent);
  border-radius: 4px;
}
.nav-signin:hover {
  background: color-mix(in srgb, var(--green-accent) 40%, transparent) !important;
}

/* "Sign Out" link — shown when user is logged in */
.nav-signout {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11px !important;
}
.nav-signout:hover {
  color: var(--white) !important;
  background: rgba(255,255,255,0.1) !important;
}

/* Logged-in username display (e.g. "👤 thuffard") */
.nav-user {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  padding: 6px 8px;
  text-transform: uppercase;
}

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: 8px;
  z-index: 300;
  -webkit-user-select: none;
  user-select: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Mobile drawer — hidden by default on desktop */
#nav-drawer { display: none; }

/* Overlay — covers page behind open drawer */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 199;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.nav-open .nav-overlay { display: block; }


/* ============================================================
   4. FOOTER
   ============================================================
   The footer is injected dynamically by assets/footer.js into
   every page via a <div id="footer-placeholder"> element.

   STRUCTURE (injected by footer.js):
     <footer>
       <div class="footer-brand">    — Logo, org name, tagline
       <div class="footer-col">      — Quick Links list
       <div class="footer-col footer-contact"> — Contact info
     </footer>
     <div class="footer-bottom">    — Copyright bar

   Three-column grid layout. Collapses to single column
   on mobile (see responsive section below).

   To update footer content (links, contact info, copyright),
   edit assets/footer.js — changes apply to all pages.
   ============================================================ */

/* Three-column grid footer */
footer {
  background: #0D2B1E;                      /* Darker than page bg */
  padding: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  border-top: 2px solid var(--green-accent);
}

/* Footer logo image */
.footer-brand img {
  height: 64px;
  width: auto;
  margin-bottom: 16px;
  display: block;
}

/* Org name in footer */
.footer-brand h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Tagline below org name */
.footer-brand p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* Section headings inside footer columns (e.g. "Quick Links") */
.footer-col h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-accent);
  margin-bottom: 20px;
}

/* Vertical list of footer links */
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  text-decoration: none;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}
.footer-col ul a:hover {
  color: var(--white);
}

/* Contact info items (email, address, social) */
.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Contact links (email, Facebook) appear in gold */
.footer-contact a {
  color: var(--gold);
  text-decoration: none;
}

/* Thin copyright bar below the main footer */
.footer-bottom {
  background: #030810;                      /* Nearly black */
  padding: 20px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 1px;
}


/* ============================================================
   5. SHARED PAGE HEADER
   ============================================================
   Used on all inner pages (Join CERT, Events, Deployments, etc.)
   to provide a consistent top section with page title and
   optional subtitle. Not used on index.html which has its own
   full-screen hero section.

   USAGE:
     <div class="page-header">
       <div class="page-header-inner">
         <div>
           <h1>Page <em>Title</em></h1>
           <p>Subtitle text</p>
         </div>
       </div>
     </div>

   Top padding (120px) accounts for the fixed 72px nav bar
   plus breathing room above the heading.
   clamp() on font-size makes the heading fluid between
   40px (mobile) and 64px (large screens).
   ============================================================ */

.page-header {
  padding: 120px 64px 60px;               /* 120px top = 72px nav + 48px breathing room */
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  border-bottom: 1px solid color-mix(in srgb, var(--green-accent) 15%, transparent);
}

/* Constrained inner wrapper with flex layout */
.page-header-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* Page title — fluid size from 40px to 64px */
.page-header h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Accent word in title appears in green (wrap in <em>) */
.page-header h1 em {
  color: var(--green-accent);
  font-style: normal;
}

/* Page subtitle / description below the title */
.page-header p {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  margin-top: 12px;
  line-height: 1.6;
}

/* Small metadata text below the title (e.g. member count) */
.page-header-meta {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}


/* ============================================================
   6. EYEBROW
   ============================================================
   A decorative label element used above section headings to
   provide context. Consists of a short horizontal line and
   an all-caps gold label.

   USAGE:
     <div class="eyebrow">
       <div class="line"></div>
       <span>Section Label</span>
     </div>
     <h1>Main Heading</h1>
   ============================================================ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Short horizontal accent line to the left of the label */
.eyebrow .line {
  width: 32px;
  height: 2px;
  background: var(--green-accent);
}

/* All-caps gold label text */
.eyebrow span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
  color: var(--gold);
}


/* ============================================================
   7. SHARED BADGES
   ============================================================
   Pill-shaped status indicators used in the Members table
   and elsewhere to show Active / Inactive status.

   USAGE:
     <span class="badge badge-active">Active</span>
     <span class="badge badge-inactive">Inactive</span>
   ============================================================ */

/* Base badge shape and typography */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Green pill — member is active */
.badge-active {
  background: color-mix(in srgb, var(--green-accent) 20%, transparent);
  color: var(--green-accent);
  border: 1px solid color-mix(in srgb, var(--green-accent) 40%, transparent);
}

/* Grey pill — member is inactive */
.badge-inactive {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.15);
}


/* ============================================================
   8. SHARED BUTTONS
   ============================================================
   Base button classes used across members.html and blog.html.
   Each page may also define its own button styles for unique
   contexts (e.g. .btn-google on the login screen).

   USAGE:
     <button class="btn btn-primary-green">Save</button>
     <button class="btn btn-red">Delete</button>
     <button class="btn btn-ghost btn-sm">Cancel</button>

   NOTE: index.html uses .btn-primary and .btn-secondary which
   are defined in its own <style> block as they are unique to
   the hero section layout.
   ============================================================ */

/* Base button — all variants extend this */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--btn-radius);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: var(--btn-font-size);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

/* Green filled button — primary action (Save, Add, etc.) */
.btn-primary-green { background: var(--green-accent); color: var(--text); }
.btn-primary-green:hover { background: var(--green-accent-hover); }

/* Red filled button — destructive action (Delete, Remove) */
.btn-red { background: var(--red); color: white; }
.btn-red:hover { background: var(--red-light); }

/* Transparent button with white text — secondary/cancel action */
.btn-ghost { background: rgba(255,255,255,0.1); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,0.2); }

/* Smaller variant — use alongside .btn and a color modifier */
.btn-sm { padding: 6px 12px; font-size: 11px; }


/* ============================================================
   9. TOAST NOTIFICATIONS
   ============================================================
   Brief pop-up messages that appear bottom-right to confirm
   actions (e.g. "Member saved", "Post published") or report
   errors. They fade in, stay 3 seconds, then fade out.

   Controlled by the showToast(message, isError) function
   defined in members.html and blog.html.

   USAGE (JS):
     showToast('Member saved.');           // Green toast
     showToast('Error saving.', true);     // Red error toast
   ============================================================ */

.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: var(--green-accent);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  z-index: 700;                            /* Above modals and overlays */
  opacity: 0;
  transform: translateY(10px);            /* Starts slightly below final position */
  transition: all 0.3s;
  pointer-events: none;                   /* Does not block clicks beneath it */
}

/* Visible state — added/removed by JS */
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Error variant — red background */
.toast.error {
  background: var(--red);
  color: white;
}


/* ============================================================
   10. ANIMATIONS
   ============================================================
   Reusable keyframe animations referenced by page-level styles.

   fadeUp — elements slide up from 30px below while fading in.
   Used on the hero section of index.html for staggered
   entrance animations on headings and buttons.

   USAGE (in page CSS):
     .hero h1 { animation: fadeUp 0.8s ease 0.1s both; }
     The delay value (0.1s) staggers multiple elements.
     "both" fills forward and backward (preserves end state).
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   11. RESPONSIVE / MOBILE OVERRIDES
   ============================================================
   Breakpoint: 900px (tablets and phones).

   Changes at this breakpoint:
   - Nav padding reduces to 20px sides
   - Nav links hidden (hamburger menu not yet implemented;
     mobile users use the Sign In link and page scrolling)
   - Page header padding reduces for smaller screens
   - Page header inner switches from row to column layout
   - Footer collapses from 3 columns to single column
   - Footer bottom bar stacks vertically and centers text

   TO ADD A HAMBURGER MENU in future:
     1. Add a hamburger button element to nav.js
     2. Add CSS here to show/hide .nav-links on toggle
     3. Add JS toggle in nav.js
   ============================================================ */

@media (max-width: 900px) {

  /* Reduce nav side padding on small screens */
  nav {
    padding: 0 20px;
  }

  /* Show hamburger, hide desktop horizontal links */
  .nav-hamburger { display: flex; }
  .nav-links { display: none; }

  /* Mobile drawer — sibling of <nav> in <body>, avoids backdrop-filter containment */
  #nav-drawer {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(300px, 82vw);
    background: var(--green-dark);
    border-left: 1px solid color-mix(in srgb, var(--green-accent) 20%, transparent);
    z-index: 300;
    padding: 80px 0 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease, box-shadow 0.3s;
  }

  body.nav-open #nav-drawer {
    transform: translateX(0);
    box-shadow: -12px 0 40px rgba(0,0,0,0.4);
  }

  /* Drawer link list */
  .nav-drawer-links { list-style: none; width: 100%; margin: 0; padding: 0; }
  .nav-drawer-links li { width: 100%; }

  .nav-drawer-links a,
  .nav-drawer-links .nav-user {
    display: block;
    padding: 14px 28px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid color-mix(in srgb, var(--green-accent) 8%, transparent);
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
  }
  .nav-drawer-links a:visited { color: rgba(255,255,255,0.7); }
  .nav-drawer-links a:hover  { color: var(--white); background: color-mix(in srgb, var(--green-accent) 12%, transparent); }
  .nav-drawer-links a.active {
    color: var(--white);
    border-left: 3px solid var(--green-accent);
    padding-left: 25px;
  }
  .nav-drawer-links .nav-user { color: var(--green-accent); font-size: 13px; }
  .nav-drawer-links .nav-signin { color: var(--white) !important; background: color-mix(in srgb, var(--green-accent) 15%, transparent); }
  .nav-drawer-links .nav-signout { color: rgba(255,255,255,0.4) !important; font-size: 12px; }

  /* Hamburger → X when drawer open */
  body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Reduce page header padding on mobile */
  .page-header {
    padding: 100px 24px 40px;
  }

  /* Stack header content vertically on mobile */
  .page-header-inner {
    flex-direction: column;
  }

  /* Stack footer columns vertically on mobile */
  footer {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }

  /* Center and stack the copyright bar on mobile */
  .footer-bottom {
    padding: 16px 24px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

}

/* ── Section headings (shared across pages) ── */
.section-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:var(--label-size);letter-spacing:var(--label-letter-spacing);text-transform:uppercase;color:var(--green-accent);margin-bottom:12px;}
.section-heading{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:var(--heading-size);text-transform:uppercase;letter-spacing:var(--heading-letter-spacing);color:var(--white);margin-bottom:32px;line-height:1;}
.section-heading span{color:var(--green-accent);}

/* ── Status badges (shared — used on deployment and training admin pages) ── */
.dep-list-status{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:1px 6px;border-radius:10px;}
.dep-list-status.open{background:color-mix(in srgb, var(--green-accent) 20%, transparent);color:var(--green-accent);}
.dep-list-status.closed{background:rgba(200,16,46,0.15);color:var(--red-text);}

/* ── Hours admin manager chips (shared between planned and training hours pages) ── */
.hours-managers{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.hours-manager-chip{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb, var(--gold) 10%, transparent);border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);border-radius:5px;padding:3px 8px;cursor:pointer;transition:background 0.15s;}
.hours-manager-chip:hover{background:color-mix(in srgb, var(--gold) 20%, transparent);}
.hours-manager-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);}
.hours-manager-name{font-size:12px;color:rgba(255,255,255,0.7);}

/* ── Certification tag (shared — used on member list and admin pages) ── */
.cert-tag{display:inline-block;padding:2px 7px;border-radius:4px;background:color-mix(in srgb, var(--gold) 15%, transparent);color:var(--gold);border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);font-size:11px;margin:2px 2px 2px 0;white-space:nowrap;}

/* ── PlaceAutocompleteElement wrapper (shared across all pages using address autocomplete) ── */
.gmp-location-wrap{width:100%;background:rgba(0,0,0,0.3);border:1px solid color-mix(in srgb, var(--green-accent) 25%, transparent);border-radius:6px;overflow:hidden;transition:border-color 0.2s;box-sizing:border-box;}
.gmp-location-wrap:focus-within{border-color:var(--green-accent);}
.gmp-location-wrap.error{border-color:rgba(220,80,80,0.7);}
/* ── Google Places Autocomplete dropdown — dark theme ── */
.pac-container{background:var(--green-mid);border:1px solid color-mix(in srgb, var(--green-accent) 30%, transparent);border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,0.5);font-family:'Barlow',sans-serif;}
.pac-item{padding:8px 14px;border-top:1px solid color-mix(in srgb, var(--green-accent) 10%, transparent);color:rgba(255,255,255,0.75);font-size:13px;cursor:pointer;}
.pac-item:hover,.pac-item-selected{background:color-mix(in srgb, var(--green-accent) 15%, transparent);}
.pac-item-query{color:white;font-weight:600;}
.pac-icon{display:none;}
.pac-logo:after{display:none;}

.back-link{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--green-accent);text-decoration:none;margin-bottom:32px;}
.back-link:hover{color:var(--white);}


/* ============================================================
   13. SIGN-IN WALL
   ============================================================
   Full-page gate shown on member-only pages when the visitor is
   not authenticated. Controlled by assets/auth-check.js, which
   reads sessionStorage written by members_members.html after a
   successful Firebase Auth sign-in.

   USAGE:
     <!-- always hidden by CSS; auth-check.js shows it if needed -->
     <div id="signin-wall">
       <div class="signin-wall-card">
         <div class="lock">🔒</div>
         <h2>Members Only</h2>
         <p>Please sign in to continue.</p>
         <a href="members_members.html" class="btn-signin-wall">Sign In</a>
       </div>
     </div>
     <!-- hidden until auth confirmed -->
     <div id="members-content"> … </div>
   ============================================================ */

#signin-wall {
  display: none;                        /* auth-check.js sets display:flex when needed */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 64px 20px;
  text-align: center;
}

#members-content {
  display: none;                        /* auth-check.js sets display:block when logged in */
}

.signin-wall-card {
  background: color-mix(in srgb, var(--green-mid) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--green-accent) 20%, transparent);
  border-radius: var(--card-radius);
  padding: 48px;
  max-width: 440px;
}

.signin-wall-card .lock {
  font-size: 40px;
  margin-bottom: 16px;
}

.signin-wall-card h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.signin-wall-card p {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.6;
}

.btn-signin-wall {
  display: inline-block;
  padding: 12px 28px;
  background: var(--green-accent);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-signin-wall:hover { background: var(--green-accent-hover); }


/* ============================================================
   12. TAG INPUT COMPONENT
   ============================================================
   Chip-style tag input used on blog_admin.html and
   blog_members.html. Managed by assets/tag-input.js.

   STRUCTURE:
     <div class="tag-wrap-outer">           — position:relative wrapper
       <div class="tag-input-wrap">         — chip container (focusable)
         <span class="tag-item">           — individual tag chip
           Tag Label
           <button>×</button>              — remove button
         </span>
         <input class="tag-input-field">   — text input at end of chips
       </div>
     </div>
     <div class="tag-sug-row">             — suggestion pills below wrap
       <button class="tag-sug">…</button>
     </div>
   ============================================================ */

.tag-wrap-outer { position: relative; }

.tag-input-wrap {
  min-height: 44px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid color-mix(in srgb, var(--green-accent) 25%, transparent);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  cursor: text;
  transition: border-color 0.2s;
}
.tag-input-wrap:focus-within { border-color: var(--green-accent); }

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--green-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--green-accent) 40%, transparent);
  border-radius: 20px;
  font-size: 13px;
  color: var(--white);
}
.tag-item button {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.tag-item button:hover { color: var(--white); }

.tag-input-field {
  border: none;
  background: none;
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  outline: none;
  min-width: 100px;
  flex: 1;
}

.tag-sug-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag-sug {
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tag-sug:hover {
  background: color-mix(in srgb, var(--green-accent) 20%, transparent);
  color: var(--white);
}

/* ============================================================
   13. LEADER CARD GRID
   ============================================================
   4-column grid of person cards used on leadership pages and
   the officer descriptions page. Collapses to 2 columns on
   narrow viewports.

   STRUCTURE:
     <div class="leadership-grid">
       <div class="leader-card [clickable]">
         <div class="leader-avatar">👤</div>
         <h3>Name</h3>
         <div class="role">Role Title</div>
         <div class="term">Term ends …</div>   — optional
       </div>
     </div>
     <p class="grid-loading">⏳ Loading…</p>   — while fetching
     <p class="grid-empty">No members found.</p> — if empty
   ============================================================ */

.leadership-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 64px; }
@media (max-width: 700px) { .leadership-grid { grid-template-columns: repeat(2, 1fr); } }
.leader-card { background: var(--green-mid); padding: 36px 28px; text-align: center; transition: all 0.25s; border-radius: var(--card-radius); }
.leader-card:hover { background: var(--green-light); transform: translateY(-4px); }
.leader-card.clickable { cursor: pointer; }
.leader-avatar { width: 72px; height: 72px; background: color-mix(in srgb, var(--green-accent) 20%, transparent); border: 2px solid color-mix(in srgb, var(--green-accent) 50%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; }
.leader-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.leader-card .term { font-size: 11px; color: var(--muted-text); margin-top: 6px; letter-spacing: 1px; }
.leader-card .role { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--green-accent); }
.grid-loading, .grid-empty { opacity: 0.4; padding: 20px; grid-column: 1 / -1; font-size: 13px; }

/* ============================================================
   14. MEMBER CONTACT MODAL
   ============================================================
   Full-screen overlay showing a person's name, role, phone,
   and email. Used on leadership pages and officer descriptions.
   Toggle open/closed by adding/removing the .open class on
   .member-modal-overlay.

   STRUCTURE:
     <div class="member-modal-overlay [open]">
       <div class="member-modal">
         <div class="member-modal-header">
           <div class="member-modal-header-left">
             <div class="member-modal-avatar">👤</div>
             <div>
               <div class="member-modal-name">…</div>
               <div class="member-modal-role">…</div>
             </div>
           </div>
           <button class="member-modal-close">×</button>
         </div>
         <div class="member-modal-body">
           <div class="member-modal-row">
             <div class="member-modal-icon">📞</div>
             <div>
               <div class="member-modal-label">Phone</div>
               <div class="member-modal-value"><a href="tel:…">…</a></div>
             </div>
           </div>
         </div>
       </div>
     </div>
   ============================================================ */

/* ── Simple contact modal (admin + member pages) ─────────────────────────────
   Used by openMemberModal() in utils.js. Requires #member-modal in page HTML.
   Pages that need the full admin edit modal use the richer structure below. */
.member-modal-simple {
  max-width: 460px !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
.member-modal-simple::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--green-accent);
}
.member-modal-close-abs {
  position: absolute;
  top: 18px; right: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  width: 30px; height: 30px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.member-modal-close-abs:hover { background: rgba(255,255,255,0.18); color: var(--white); }
.member-modal-simple h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 22px 60px 20px 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--green-accent) 15%, transparent);
}
.mm-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--green-accent) 8%, transparent);
}
.mm-row:last-of-type { border-bottom: none; }
.mm-icon {
  width: 36px; height: 36px;
  background: color-mix(in srgb, var(--green-accent) 10%, transparent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.mm-row a { color: var(--green-accent); text-decoration: none; font-size: 14px; }
.mm-row a:hover { text-decoration: underline; }
.mm-none { color: rgba(255,255,255,0.3); font-size: 14px; font-style: italic; }
.mm-icon-phone { display: none; }
.mm-email-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-email-addr { font-size: 14px; color: rgba(255,255,255,0.75); }
.mm-phone-num { font-size: 14px; color: var(--white); margin-bottom: 10px; }
.mm-phone-actions { display: flex; gap: 8px; }
.mm-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px;
  background: color-mix(in srgb, var(--green-accent) 12%, transparent);
  border: 1px solid rgba(82,183,136,0.28);
  border-radius: 20px;
  color: var(--green-accent);
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.15s;
}
.mm-action-btn:hover { background: rgba(82,183,136,0.24); text-decoration: none; }
.mm-certs-row {
  display: none;
  flex-wrap: wrap;
  gap: 7px;
  padding: 16px 28px 24px;
  border-top: 1px solid color-mix(in srgb, var(--green-accent) 10%, transparent);
  min-height: 0;
}
.mm-certs-row.has-certs { display: flex; }
.mm-cert-tag {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(212,175,55,0.15);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold);
}

.member-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 500; align-items: center; justify-content: center; padding: 24px; }
.member-modal-overlay.open { display: flex; }
.member-modal { background: var(--green-mid); border: 1px solid color-mix(in srgb, var(--green-accent) 35%, transparent); border-top: 3px solid var(--green-accent); border-radius: var(--card-radius); width: 100%; max-width: 440px; padding: 0; overflow: hidden; }
.member-modal-header { padding: 28px 28px 20px; border-bottom: 1px solid color-mix(in srgb, var(--green-accent) 15%, transparent); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.member-modal-header-left { display: flex; align-items: center; gap: 14px; }
.member-modal-avatar { width: 56px; height: 56px; background: color-mix(in srgb, var(--green-accent) 20%, transparent); border: 2px solid color-mix(in srgb, var(--green-accent) 50%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.member-modal-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1; }
.member-modal-role { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--green-accent); margin-top: 4px; }
.member-modal-close { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: white; font-size: 18px; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.member-modal-close:hover { background: rgba(255,255,255,0.18); }
.member-modal-body { padding: 20px 28px 28px; }
.member-modal-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--green-accent) 10%, transparent); }
.member-modal-row:last-child { border-bottom: none; }
.member-modal-icon { width: 32px; height: 32px; background: color-mix(in srgb, var(--green-accent) 12%, transparent); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.member-modal-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-text); margin-bottom: 2px; }
.member-modal-value { font-size: 14px; color: var(--white); }
.member-modal-value a { color: var(--green-accent); text-decoration: none; }
.member-modal-value a:hover { text-decoration: underline; }
.member-modal-loading { text-align: center; padding: 24px; color: rgba(255,255,255,0.4); font-size: 13px; }
.member-modal-none { text-align: center; padding: 20px; font-size: 13px; color: var(--muted-text); }

/* ── Responsive visibility utilities (used across admin and member pages) ───── */
.d-only { display: revert; }
.m-only  { display: none; }
@media(max-width:600px){
  .d-only { display: none !important; }
  .m-only { display: revert; }
}

/* ── Admin shared ──────────────────────────────────────────────────────────── */

/* Header */
.admin-header{padding:80px 64px 40px;background:linear-gradient(135deg,var(--green-mid),var(--green-dark));border-bottom:2px solid color-mix(in srgb, var(--green-accent) 20%, transparent);}
.admin-header-inner{max-width:var(--page-max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.admin-header h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(32px,4vw,52px);text-transform:uppercase;letter-spacing:-0.5px;}
.admin-header h1 span{color:var(--green-accent);}
.admin-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--green-accent);margin-bottom:8px;}
.admin-back-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.admin-back-link{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--green-accent);text-decoration:none;}
.admin-back-link:hover{color:var(--white);}

/* Layout */
.admin-layout{max-width:var(--page-max-width);margin:0 auto;padding:40px 64px 96px;}
.admin-body{padding-top:0;}
.btn-new-post{padding:10px 20px;background:var(--green-accent);color:var(--text);border:none;border-radius:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:background 0.2s;}
.btn-new-post:hover{background:var(--green-accent-hover);}

/* Admin tab strip */
.admin-tab-strip-wrap{position:relative;}
.admin-tab-strip-wrap::after{content:'';position:absolute;right:0;top:0;bottom:2px;width:56px;background:linear-gradient(to right,transparent,var(--green-dark));pointer-events:none;z-index:1;}
.admin-tab-strip{display:flex;overflow-x:auto;gap:2px;border-bottom:2px solid color-mix(in srgb, var(--green-accent) 18%, transparent);scrollbar-width:none;margin-top:16px;}
.admin-tab-strip::-webkit-scrollbar{display:none;}
.admin-tab{padding:12px 20px 14px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all 0.2s;white-space:nowrap;border-radius:8px 8px 0 0;background:color-mix(in srgb, var(--green-mid) 12%, transparent);flex-shrink:0;}
.admin-tab:hover{background:color-mix(in srgb, var(--green-mid) 22%, transparent);}
.admin-tab.active{background:color-mix(in srgb, var(--green-mid) 40%, transparent);border-bottom-color:var(--green-accent);}
.admin-tab-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:0.5px;color:var(--white);}
.admin-tab-date{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;}
.admin-tab-badge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:20px;margin-top:5px;}
.admin-tab-badge.open{background:color-mix(in srgb, var(--green-accent) 15%, transparent);color:var(--green-accent);border:1px solid color-mix(in srgb, var(--green-accent) 30%, transparent);}
.admin-tab-badge.closed{background:rgba(200,16,46,0.12);color:var(--red-text);border:1px solid rgba(200,16,46,0.25);}
.admin-tab-pill{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:20px;margin-top:5px;background:color-mix(in srgb, var(--green-accent) 15%, transparent);color:var(--green-accent);border:1px solid color-mix(in srgb, var(--green-accent) 30%, transparent);}

/* ── Shared Deployment / Training History section (members pages) ── */
.history-loading{color:var(--muted-text);font-size:14px;font-style:italic;padding:8px 0;}
.history-loading-pad{padding:20px;}
.cat-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.cat-filter-pill{padding:4px 14px;border-radius:20px;border:1px solid color-mix(in srgb,var(--green-accent) 30%,transparent);background:transparent;color:rgba(255,255,255,0.55);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all 0.15s;}
.cat-filter-pill:hover{border-color:color-mix(in srgb,var(--green-accent) 55%,transparent);color:rgba(255,255,255,0.85);}
.cat-filter-pill.active{background:color-mix(in srgb,var(--green-accent) 18%,transparent);color:var(--green-accent);border-color:color-mix(in srgb,var(--green-accent) 50%,transparent);}
.history-year-tabs{display:flex;gap:2px;margin-bottom:0;border-bottom:2px solid color-mix(in srgb,var(--green-accent) 18%,transparent);}
.history-year-tab{padding:8px 18px 10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.45);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all 0.15s;white-space:nowrap;}
.history-year-tab:hover{color:rgba(255,255,255,0.75);}
.history-year-tab.active{color:var(--green-accent);border-bottom-color:var(--green-accent);}
.history-panel{background:var(--green-mid);border:1px solid color-mix(in srgb,var(--green-accent) 20%,transparent);border-top:none;border-radius:0 0 10px 10px;overflow:hidden;}
.history-table{width:100%;}
.history-head{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:9px 20px;border-bottom:1px solid color-mix(in srgb,var(--green-accent) 12%,transparent);}
.history-head.cols-2{grid-template-columns:1fr auto;}
.history-head span{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);}
.history-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:11px 20px;border-bottom:1px solid color-mix(in srgb,var(--green-accent) 7%,transparent);}
.history-row.cols-2{grid-template-columns:1fr auto;}
.history-row:last-child{border-bottom:none;}
.history-name{font-size:14px;color:rgba(255,255,255,0.85);}
.history-date{font-size:12px;color:rgba(255,255,255,0.45);margin-top:2px;}
.history-cats{display:flex;flex-wrap:wrap;gap:4px;}
.history-cat{padding:1px 7px;border-radius:10px;background:color-mix(in srgb,var(--green-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--green-accent) 22%,transparent);color:var(--green-accent);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:1px;text-transform:uppercase;}
.history-hrs{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--green-accent);white-space:nowrap;}
.history-total-row{display:flex;justify-content:flex-end;padding:10px 20px;border-top:2px solid color-mix(in srgb,var(--green-accent) 18%,transparent);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.5px;text-transform:uppercase;color:rgba(255,255,255,0.6);}
.history-total-row strong{color:var(--green-accent);margin-left:8px;}
.history-empty{padding:24px 20px;font-size:13px;color:rgba(255,255,255,0.3);font-style:italic;}
@media(max-width:600px){.history-head,.history-row{grid-template-columns:1fr auto !important;}.history-cats{display:none;}}

/* Access wall */
#access-wall{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;padding:64px 20px;text-align:center;}
.access-card{background:color-mix(in srgb, var(--green-mid) 30%, transparent);border:1px solid color-mix(in srgb, var(--green-accent) 20%, transparent);border-radius:16px;padding:48px;max-width:440px;}
.access-card-icon{font-size:40px;margin-bottom:16px;}
.access-card h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:28px;text-transform:uppercase;margin-bottom:8px;}
.access-card p{color:rgba(255,255,255,0.6);font-size:15px;margin-bottom:24px;line-height:1.6;}
.access-card-btn{display:inline-block;padding:12px 28px;background:var(--green-accent);color:var(--text);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;border-radius:8px;text-decoration:none;}
.access-card-btn:hover{background:var(--green-accent-hover);}

/* Admin banners */
#admin-content{display:none;}
#wrong-account-banner{display:none;background:rgba(200,16,46,0.15);border-bottom:2px solid rgba(200,16,46,0.4);padding:12px 24px;text-align:center;font-size:13px;color:#ffaaaa;position:fixed;top:64px;left:0;right:0;z-index:200;}
#wrong-account-banner strong{color:#ff8888;}
#dc-mode-banner,#tc-mode-banner{display:none;background:color-mix(in srgb, var(--gold) 10%, transparent);border-bottom:2px solid color-mix(in srgb, var(--gold) 30%, transparent);padding:10px 24px;text-align:center;font-size:13px;color:var(--gold);}

@media(max-width:900px){
  .admin-header{padding:80px 24px 32px;}
  .admin-layout{padding:24px 20px 64px;}
  .btn-new-post{width:100%;}
}

@media(max-width:600px){
  .admin-header{padding:72px 16px 20px;}
  .admin-header-inner{flex-direction:column;align-items:flex-start;gap:10px;}
  .admin-layout{padding:12px 12px 48px;}
  .admin-tab{padding:10px 14px 10px;}
  .admin-tab-name{font-size:13px;}
  .admin-tab-date{font-size:10px;}
  .admin-tab-badge{font-size:9px;padding:1px 5px;}
}

/* ============================================================
   FIELD MODE — high-contrast light theme for bright sunlight.
   Activated by adding data-field-mode="true" to <html>.
   ============================================================ */
html[data-field-mode="true"] {
  /* Structural backgrounds */
  --green-dark:         #ddeee5;
  --green-mid:          #ffffff;
  --green-light:        #c5e8d5;
  /* Accent — darker for legibility on white */
  --green-accent:       #1a5e3a;
  --green-accent-hover: #134a2d;
  /* Gold — darker for legibility on white */
  --gold:               #8a6000;
  /* Text — inverted: --white is now near-black body text */
  --white:              #1a2419;
  --off-white:          #2d3a2e;
  /* --text stays near-black so button labels on accent bg remain dark */
  /* Muted text — dark on light background */
  --muted-text:         rgba(26,36,25,0.55);
  --hub-card-body-text: rgba(26,36,25,0.55);
}

/* Nav and mobile drawer stay dark in field mode */
html[data-field-mode="true"] nav a,
html[data-field-mode="true"] .nav-link,
html[data-field-mode="true"] .nav-cta { color: #ffffff !important; }
html[data-field-mode="true"] #nav-drawer { background: #1a2419 !important; }
html[data-field-mode="true"] .nav-drawer-links a,
html[data-field-mode="true"] .nav-drawer-links .nav-user { color: rgba(255,255,255,0.7) !important; }

/* Hardcoded rgba(255,255,255,x) text — roster & admin pages */
html[data-field-mode="true"] .roster-name { color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .shift-group-count { color: rgba(26,36,25,0.4) !important; }
html[data-field-mode="true"] .shift-group-sub { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .dep-panel-stats { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .roster-empty,
html[data-field-mode="true"] .roster-empty-page,
html[data-field-mode="true"] .no-events,
html[data-field-mode="true"] .list-loading { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .dep-panel-name { color: rgba(26,36,25,0.9) !important; }

/* Shift group header — was rgba(0,0,0,0.2) which works on light bg, but darken it a touch */
html[data-field-mode="true"] .shift-group-header { background: rgba(26,36,25,0.07) !important; }
html[data-field-mode="true"] .shift-group-header:hover { background: rgba(26,36,25,0.13) !important; }
html[data-field-mode="true"] .deq-group-header { background: rgba(26,36,25,0.07) !important; }

/* Admin back-links / eyebrow text */
html[data-field-mode="true"] .admin-eyebrow { color: var(--green-accent) !important; }
html[data-field-mode="true"] .admin-back-link { color: var(--green-accent) !important; }

/* Form inputs on light background */
html[data-field-mode="true"] input[type="text"],
html[data-field-mode="true"] input[type="number"],
html[data-field-mode="true"] select,
html[data-field-mode="true"] textarea {
  background: #ffffff !important;
  color: #1a2419 !important;
  border-color: rgba(26,36,25,0.25) !important;
}

/* Borders that use rgba(82,183,136,x) remain visible since they reference --green-accent */

/* Footer stays dark */
html[data-field-mode="true"] footer { background: #1a2419 !important; color: #ffffff !important; }

/* Global hardcoded rgba(255,255,255,x) text overrides */
html[data-field-mode="true"] .page-header p,
html[data-field-mode="true"] .page-header-meta { color: rgba(26,36,25,0.65) !important; }

html[data-field-mode="true"] .form-section-title { color: rgba(26,36,25,0.5) !important; }

html[data-field-mode="true"] .admin-tab-date { color: rgba(26,36,25,0.5) !important; }

html[data-field-mode="true"] .badge-inactive {
  background: rgba(26,36,25,0.08) !important;
  color: rgba(26,36,25,0.45) !important;
  border-color: rgba(26,36,25,0.15) !important;
}

html[data-field-mode="true"] .hours-manager-name { color: rgba(26,36,25,0.65) !important; }

html[data-field-mode="true"] .mm-none { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .mm-email-addr { color: rgba(26,36,25,0.75) !important; }
html[data-field-mode="true"] .member-modal-loading { color: rgba(26,36,25,0.4) !important; }
html[data-field-mode="true"] .access-card p { color: rgba(26,36,25,0.65) !important; }

/* Hub card description (resources page) */
html[data-field-mode="true"] .hub-card h3  { color: var(--white) !important; }
html[data-field-mode="true"] .hub-card p   { color: rgba(26,36,25,0.6) !important; }
html[data-field-mode="true"] .deploy-card p { color: rgba(26,36,25,0.65) !important; }

/* ── theme_admin.html page-specific ── */
html[data-field-mode="true"] .part-subtitle        { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .control-group-title  { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .control-label        { color: rgba(26,36,25,0.8)  !important; }
html[data-field-mode="true"] .preview-panel-title  { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .preview-section-label{ color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .ref-section-title    { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .ref-desc             { color: rgba(26,36,25,0.6)  !important; }
html[data-field-mode="true"] .backup-section-title { color: rgba(26,36,25,0.5)  !important; }
html[data-field-mode="true"] .backup-toggle        { color: rgba(26,36,25,0.3)  !important; }
html[data-field-mode="true"] .backup-empty         { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .backup-label         { color: rgba(26,36,25,0.7)  !important; }
html[data-field-mode="true"] .backup-age           { color: rgba(26,36,25,0.35) !important; }

/* ── planned_deployments_admin.html page-specific ── */
html[data-field-mode="true"] .mib-meta             { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .doc-empty            { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] #doc-progress         { color: rgba(26,36,25,0.5)  !important; }
html[data-field-mode="true"] .seed-selected-tag    { color: rgba(26,36,25,0.7)  !important; }
html[data-field-mode="true"] .seed-none-selected   { color: rgba(26,36,25,0.3)  !important; }
html[data-field-mode="true"] .roster-shift-heading-time  { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .roster-shift-tally.tally-neutral { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .move-modal-from      { color: rgba(26,36,25,0.5)  !important; }
html[data-field-mode="true"] .move-modal-label     { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .roster-empty-note    { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .unsaved-dialog p     { color: rgba(26,36,25,0.65) !important; }
html[data-field-mode="true"] .deq-empty            { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .deq-summary-truck-qty{ color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .deq-group-count      { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .deq-truck-chip       { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .deq-truck-chip-name  { color: rgba(26,36,25,0.6)  !important; }
html[data-field-mode="true"] .deq-group-empty      { color: rgba(26,36,25,0.3)  !important; }
html[data-field-mode="true"] .signin-dialog p      { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .signin-shift-label   { color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .signin-shift-sub     { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .form-section-title.sec-toggle:hover { color: rgba(26,36,25,0.7) !important; }

/* ── planned_deployments_admin.html — table cells & interactive elements ── */
html[data-field-mode="true"] .roster-table td  { color: #1a2419 !important; }
html[data-field-mode="true"] .deq-table td     { color: #1a2419 !important; }
html[data-field-mode="true"] .roster-name-btn  { color: rgba(26,36,25,0.75) !important; }
html[data-field-mode="true"] .roster-post-text,
html[data-field-mode="true"] .roster-role-mobile { color: rgba(26,36,25,0.8) !important; text-decoration-color: rgba(26,36,25,0.3) !important; }
html[data-field-mode="true"] .roster-btn-move,
html[data-field-mode="true"] .roster-btn-copy  { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .role-btn         { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .role-btn:hover:not(.active):not(.driver-active) { color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .mib-manager-name,
html[data-field-mode="true"] .manager-chip-name{ color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .seed-member-pill,
html[data-field-mode="true"] .seed-shift-pill  { color: rgba(26,36,25,0.6) !important; }
html[data-field-mode="true"] .seed-member-pill:hover { color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .deq-loc-pill     { color: #1a2419 !important; background: rgba(26,36,25,0.07) !important; border-color: rgba(26,36,25,0.2) !important; }
html[data-field-mode="true"] .post-modal-cancel,
html[data-field-mode="true"] .btn-move-cancel,
html[data-field-mode="true"] .btn-unsaved-cancel,
html[data-field-mode="true"] .btn-signin-cancel,
html[data-field-mode="true"] .rm-role-btn,
html[data-field-mode="true"] .deq-btn-cancel   { color: rgba(26,36,25,0.5) !important; border-color: rgba(26,36,25,0.15) !important; }
html[data-field-mode="true"] .post-select,
html[data-field-mode="true"] .truck-select      { background: #ffffff !important; color: rgba(26,36,25,0.8) !important; border-color: rgba(26,36,25,0.2) !important; }
html[data-field-mode="true"] .move-modal-select { background: #ffffff !important; color: rgba(26,36,25,0.8) !important; border-color: rgba(26,36,25,0.2) !important; }

/* ── hours_planned_admin.html ── */
html[data-field-mode="true"] .vol-name          { color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .vol-table-head span { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .vol-empty,
html[data-field-mode="true"] .walkin-modal-empty{ color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .walkin-modal-item { color: rgba(26,36,25,0.8) !important; }
html[data-field-mode="true"] .walkin-modal-cancel,
html[data-field-mode="true"] .nd-btn-cancel     { color: rgba(26,36,25,0.5) !important; border-color: rgba(26,36,25,0.15) !important; }
html[data-field-mode="true"] .period-label      { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .period-btn        { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .dep-panel-meta    { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .dep-panel-stats   { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .btn-pdf           { color: rgba(26,36,25,0.6) !important; background: rgba(26,36,25,0.06) !important; border-color: rgba(26,36,25,0.18) !important; }
html[data-field-mode="true"] .nd-close          { color: rgba(26,36,25,0.4) !important; }
html[data-field-mode="true"] .nd-section-hint,
html[data-field-mode="true"] .nd-shifts-col-hdr span { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .nd-label          { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .nd-input          { background: #ffffff !important; color: rgba(26,36,25,0.85) !important; border-color: rgba(26,36,25,0.2) !important; }

/* ── unplanned_deployments_members — soften red alert strip in field mode ── */
html[data-field-mode="true"] .alert-strip { background: rgba(200,16,46,0.1) !important; border:1px solid rgba(200,16,46,0.35); border-radius:8px; }
html[data-field-mode="true"] .alert-strip p { color: rgba(180,10,35,0.9) !important; }

/* ── unplanned_deployments_members — My Deployment History section ── */
html[data-field-mode="true"] .cat-filter-pill           { color: rgba(26,36,25,0.6) !important; border-color: rgba(26,36,25,0.25) !important; }
html[data-field-mode="true"] .cat-filter-pill:hover     { color: rgba(26,36,25,0.9) !important; border-color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .history-year-tab          { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .history-year-tab:hover    { color: rgba(26,36,25,0.8) !important; }
html[data-field-mode="true"] .history-head span         { color: rgba(26,36,25,0.35) !important; }
html[data-field-mode="true"] .history-name              { color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .history-total-row         { color: rgba(26,36,25,0.6) !important; }
html[data-field-mode="true"] .history-empty,
html[data-field-mode="true"] .history-none,
html[data-field-mode="true"] .history-loading           { color: rgba(26,36,25,0.4) !important; }

/* ── hours_unplanned_admin — category chips in modal ── */
html[data-field-mode="true"] .cat-chip           { color: rgba(26,36,25,0.6) !important; border-color: rgba(26,36,25,0.25) !important; }
html[data-field-mode="true"] .cat-chip:hover     { color: rgba(26,36,25,0.85) !important; border-color: rgba(26,36,25,0.4) !important; }
html[data-field-mode="true"] .cat-add-btn        { background: rgba(26,36,25,0.08) !important; border-color: rgba(26,36,25,0.25) !important; color: rgba(26,36,25,0.7) !important; }

/* ── roster_admin.html — safety modal checkboxes ── */
html[data-field-mode="true"] .safety-checkbox   { border-color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .safety-option     { border-color: rgba(26,36,25,0.15) !important; }
html[data-field-mode="true"] .safety-option:hover { border-color: rgba(26,36,25,0.35) !important; }

/* ── roster_admin.html — safety & signature modals ── */
html[data-field-mode="true"] .safety-demands         { color: rgba(26,36,25,0.6) !important; background: rgba(26,36,25,0.04) !important; }
html[data-field-mode="true"] .safety-demands strong  { color: rgba(26,36,25,0.8) !important; }
html[data-field-mode="true"] .safety-option-label    { color: rgba(26,36,25,0.8) !important; }
html[data-field-mode="true"] .btn-safety-ack         { background: rgba(26,36,25,0.06) !important; color: rgba(26,36,25,0.5) !important; border-color: rgba(26,36,25,0.15) !important; }
html[data-field-mode="true"] .btn-view-sigs          { background: rgba(26,36,25,0.06) !important; color: rgba(26,36,25,0.4) !important; border-color: rgba(26,36,25,0.12) !important; }
html[data-field-mode="true"] .sig-modal-close        { color: rgba(26,36,25,0.4) !important; }
html[data-field-mode="true"] .btn-sig-clear,
html[data-field-mode="true"] .btn-sig-cancel         { color: rgba(26,36,25,0.5) !important; background: rgba(26,36,25,0.06) !important; border-color: rgba(26,36,25,0.12) !important; }

/* ── blog_members.html — list and detail pages ── */
html[data-field-mode="true"] .card-summary      { color: rgba(26,36,25,0.65) !important; }
html[data-field-mode="true"] .tag-pill          { color: rgba(26,36,25,0.65) !important; }
html[data-field-mode="true"] .tag-cloud-pill    { color: rgba(26,36,25,0.65) !important; }
html[data-field-mode="true"] .back-btn          { color: rgba(26,36,25,0.7) !important; background: rgba(26,36,25,0.07) !important; }
html[data-field-mode="true"] .detail-body       { color: rgba(26,36,25,0.85) !important; }
html[data-field-mode="true"] .pc-loading,
html[data-field-mode="true"] .loading-state     { color: rgba(26,36,25,0.4) !important; }
html[data-field-mode="true"] .form-hint         { color: rgba(26,36,25,0.4) !important; }
html[data-field-mode="true"] .btn-cancel        { background: rgba(26,36,25,0.07) !important; border-color: rgba(26,36,25,0.15) !important; }
html[data-field-mode="true"] .format-tooltip .td-hint  { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .format-tooltip td { color: rgba(26,36,25,0.8) !important; }
html[data-field-mode="true"] .modal-guide-link  { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .format-info-icon  { color: rgba(26,36,25,0.45) !important; border-color: rgba(26,36,25,0.3) !important; }
html[data-field-mode="true"] .format-section-title { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .photo-drop-zone-text { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .photo-drop-zone-text strong { color: rgba(26,36,25,0.7) !important; }
html[data-field-mode="true"] .photo-upload-status  { color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .header-search input  { background: #ffffff !important; color: rgba(26,36,25,0.85) !important; }

/* ── planned_deployments_members.html ── */
html[data-field-mode="true"] .dep-shift-time    { color: rgba(26,36,25,0.6) !important; }
html[data-field-mode="true"] .dep-truck-chip    { color: rgba(26,36,25,0.65) !important; background: rgba(26,36,25,0.07) !important; border-color: rgba(26,36,25,0.18) !important; }
html[data-field-mode="true"] .dep-panel-meta    { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .dep-panel-desc    { color: rgba(26,36,25,0.65) !important; } /* unplanned + planned panel */
html[data-field-mode="true"] .dep-tab-date      { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .dep-captain-names { color: rgba(26,36,25,0.65) !important; }
html[data-field-mode="true"] .dep-captain-btn   { color: rgba(26,36,25,0.75) !important; text-decoration-color: rgba(26,36,25,0.3) !important; }
html[data-field-mode="true"] .legend-item       { color: rgba(26,36,25,0.65) !important; }
html[data-field-mode="true"] .calendar-note     { color: rgba(26,36,25,0.45) !important; }
html[data-field-mode="true"] .team-desc         { color: rgba(26,36,25,0.55) !important; }
html[data-field-mode="true"] .join-teams-box p  { color: rgba(26,36,25,0.75) !important; }
html[data-field-mode="true"] .member-popup-close{ color: rgba(26,36,25,0.5) !important; }
html[data-field-mode="true"] .member-popup-row span { color: rgba(26,36,25,0.7) !important; }
html[data-field-mode="true"] .btn-dep-select    { color: rgba(26,36,25,0.5) !important; border-color: rgba(26,36,25,0.2) !important; }
