/* Bliss Events and Staffing -- app theme
   Palette pulled from blisseventsandstaffing.com (champagne #d6ceba) plus
   black/gold for a luxury feel. Gold was brightened and a coral accent added
   (Vanessa's pick: a lighter, brighter, "spring/summer" two-tone -- coral +
   gold -- over the original muted/darker gold, to feel less formal and more
   in step with an all-female-led company). */
:root {
  --champagne: #d6ceba;
  --champagne-light: #ece7db;
  --black: #14120f;
  --charcoal: #262420;
  --gold: #d9a13e;
  --gold-dark: #4a3308;
  --gold-light: #f0c878;
  --coral: #f2b3a0;
  --coral-dark: #7a2e13;
  --cream: #faf8f4;
  --success: #4b7a51;
  --warning: #b3742c;
  --danger: #a13b3b;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(20,18,15,0.12);
  /* Serif stays reserved for headers, the logo, and login -- that's where
     the elegant/boutique brand feel needs to show up. Everything else
     (body copy, labels, buttons, data) uses a clean sans-serif so dense
     info-heavy pages (event/shift details, tables) stay easy to scan on
     a phone, matching the reference layout Vanessa approved. */
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); letter-spacing: 0.02em; margin: 0 0 8px; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: 16px; }

#app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  background: var(--black);
  color: var(--champagne-light);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar .brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
/* Header + confirmation-page logos -- dark line-art on a transparent
   background, so each needs a light chip behind it to read on dark or busy
   backgrounds. */
.brand-logo-wrap { background: #fff; border-radius: 999px; padding: 4px; display: inline-flex; align-items: center; }
.brand-logo-wrap img.brand-logo { height: 30px; width: 30px; object-fit: contain; display: block; }
.confirm-logo-wrap { background: #fff; border: 1px solid var(--champagne); border-radius: 14px; padding: 10px 18px; display: block; text-align: center; margin-bottom: 14px; }
.confirm-logo-wrap img { height: 60px; width: auto; }

/* Single dropdown in the top-right corner replaces the old tab bar -- easier
   to reach with one thumb on a phone, and every page (including "Settings")
   is always one tap away instead of requiring horizontal scrolling. */
.nav-select {
  background: var(--charcoal); color: var(--champagne-light); border: 1px solid var(--gold);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer;
  max-width: 45vw;
}
.nav-select:focus { outline: 2px solid var(--gold); }

.topbar-right { display: flex; align-items: center; gap: 10px; position: relative; }
.bell-btn {
  background: none; border: none; color: var(--champagne-light); cursor: pointer;
  padding: 4px; display: flex; align-items: center; position: relative; line-height: 0;
}
.bell-btn:hover { color: var(--gold); }
.notif-badge {
  position: absolute; top: -2px; right: -2px; background: var(--danger, #b00);
  color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: 85vw;
  max-height: 420px; overflow-y: auto; background: #fff; color: var(--black, #14120f);
  border: 1px solid var(--champagne); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 20;
}
.notif-panel h4 { margin: 0; padding: 12px 14px; border-bottom: 1px solid #f0ece2; font-size: 14px; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid #f5f2ea; font-size: 13px; }
.notif-item:last-child { border-bottom: none; }
.notif-item .notif-subject { font-weight: 600; margin: 0 0 2px; }
.notif-item .notif-time { font-size: 11px; color: var(--muted, #8a8578); margin-top: 4px; }
.notif-empty { padding: 18px 14px; text-align: center; font-size: 13px; color: var(--muted, #8a8578); }

.container { max-width: 720px; margin: 0 auto; width: 100%; padding: 18px; flex: 1; }

/* On tablets/desktop, widen the reading column and add hover states since
   there's a mouse instead of a finger. */
@media (min-width: 860px) {
  .container { max-width: 900px; }
  .btn:hover:not(:disabled) { filter: brightness(1.08); }
  .list-item:hover { background: #fbf9f4; }
  .cal-cell:not(.cal-head):not(.empty):hover { background: var(--champagne-light); }
}

.card {
  background: #fff;
  border: 1px solid var(--champagne);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card h3 { color: var(--charcoal); }
.muted { color: #77706a; font-size: 14px; }

/* A plain section label (no box/border/shadow) sitting directly above a group
   of cards -- reads as "here's a heading for what follows" rather than its
   own separate tile, so a run of cards under one heading looks like one
   grouped section instead of a stack of disconnected bubbles. */
.section-label { padding: 6px 4px 0; margin-bottom: 2px; }
.section-label h3 { margin: 0 0 4px; color: var(--charcoal); }
.section-label p.muted { margin: 0; }

.btn {
  display: inline-block; padding: 12px 18px; border-radius: 999px; border: none;
  background: var(--black); color: var(--champagne-light); font-weight: 600; cursor: pointer;
  text-align: center; text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.gold { background: var(--gold); color: var(--black); }
.btn.outline { background: transparent; color: var(--black); border: 1.5px solid var(--black); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.btn.block { display: block; width: 100%; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b6459; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--champagne); border-radius: 8px; background: #fffdfa;
}
.field textarea { min-height: 80px; }
/* Document-editor textareas (onboarding docs, reference guides) that render
   directly inside a .card rather than a .field never got width:100% from the
   rule above -- browsers then fall back to the default ~20-column intrinsic
   width, and the auto-grow-to-fit-content script (which sets height from
   scrollHeight) turns that narrow width into a very tall skinny column. */
.autosize-textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1.5px solid var(--champagne); border-radius: 8px; background: #fffdfa;
}
/* The rule above is meant for text/select/textarea fields -- it was also
   catching checkboxes and radio buttons (like the W-9 tax classification
   options and the "interested in" checkboxes), stretching them to full
   width with padding/border/background and breaking their layout badly on
   mobile. Reset them back to their normal native size and drop the text-field
   look entirely. */
.field input[type="checkbox"], .field input[type="radio"] {
  width: auto; min-width: 0; padding: 0; margin: 0; border: none; background: transparent; border-radius: 0; flex: none; -webkit-appearance: auto; appearance: auto;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 130px; }
/* Highlights a required field that was left blank on a failed submit attempt
   (e.g. W-9 legal name / business name / tax classification). */
.field-invalid { border-color: #b00 !important; box-shadow: 0 0 0 2px rgba(187, 0, 0, 0.15); }
div.field-invalid { border: 1.5px solid #b00; border-radius: 8px; padding: 8px; box-shadow: none; }

/* The address field's autocomplete input must always stay clickable/editable
   above anything Google's dropdown injects into the page. Google appends its
   suggestion dropdown (.pac-container) directly to <body> with inline
   positioning -- if that positioning or its stylesheet fails to apply for any
   reason, the dropdown items can otherwise collapse into the page's normal
   flow right on top of the input, blocking it. These rules force it to
   always render as a proper floating dropdown instead. */
#e-address { position: relative; z-index: 1; }
.pac-container {
  z-index: 10000 !important;
  position: absolute !important;
  background: #fff !important;
  border: 1.5px solid var(--champagne) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
  font-family: var(--font-sans) !important;
  margin-top: 4px;
}
.pac-item { padding: 8px 10px !important; cursor: pointer; }
.pac-item:hover, .pac-item-selected { background: var(--champagne-light) !important; }
/* Hide the little Google/pin icon per suggestion row -- if its image asset
   fails to load (ad blocker, network hiccup) this is what shows up as a row
   of broken-image icons stacked across the field. */
.pac-icon { display: none !important; }

/* Our own address-suggestion dropdown (see wireCustomAddressAutocomplete in
   api.js) -- fully our markup and styling instead of Google's own injected
   .pac-container widget, which kept rendering broken icons/error text that
   our CSS couldn't reliably override. */
.addr-suggest-list {
  position: absolute; z-index: 10000; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: #fff; border: 1.5px solid var(--champagne); border-radius: 8px;
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto;
}
.addr-suggest-item { padding: 10px 12px; cursor: pointer; font-size: 15px; border-bottom: 1px solid #f0ece2; }
.addr-suggest-item:last-child { border-bottom: none; }
.addr-suggest-item:hover, .addr-suggest-item.active { background: var(--champagne-light); }

/* Small uppercase label used above a value on info-dense detail pages
   (event/shift details) -- matches the "label above, value below" pattern
   Vanessa liked, instead of inline "Label: value" text. */
.info-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal); opacity: 0.75; margin: 14px 0 4px; }
.info-label:first-child { margin-top: 0; }
.info-value { font-size: 14px; color: var(--black); line-height: 1.5; margin: 0; }
/* A rounded rectangle chip (not a pill) for a value that deserves visual
   weight -- e.g. "On-premise"/"Off-premise" -- reusing the gold-light tone
   from age18 so it stays inside the existing palette. */
.info-chip { display: inline-block; background: var(--gold-light); color: var(--gold-dark); font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 8px; }
/* Admin "Calendar" tab -- a plain month grid, one column per weekday. */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cal-grid-header { margin-top: 12px; margin-bottom: 0; }
.cal-cell-label { text-align: center; font-size: 12px; font-weight: 700; color: var(--charcoal); opacity: 0.7; padding: 4px 0; }
.cal-cell { min-height: 56px; border: 1px solid #f0ece2; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: #fff; }
.cal-cell-blank { border: none; background: transparent; }
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--black); }
.cal-cell-today { border-color: var(--gold); border-width: 2px; }
.cal-cell-selected { background: var(--gold-light); }

/* Home page hero -- the big wordmark logo at the top of the admin dashboard,
   Vanessa's actual daily "front door" to the business. Kept to a simple,
   clean, pale gold-tinted gradient -- no bold border/shadow/coral -- per her
   direct feedback that a bolder multi-color version read as "a rainbow."
   Everything on the home page now shares ONE consistent scheme (black +
   gold, matching the clock widget) instead of each card having its own
   different treatment. */
.home-hero { background: var(--coral); border-radius: 18px; padding: 28px 20px 22px; text-align: center; margin-bottom: 16px; }
.home-hero-logo { max-width: 380px; width: 88%; height: auto; }

/* Home nav pills ("Go to") -- dark background matching the quote card, a
   gold border matching "Bliss team" on the quote, and coral text matching
   the day-of-week label on the clock widget -- pulls all three existing
   home-page colors into one pill instead of introducing a new combo. */
.home-nav-btn { display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--black); border: 1.5px solid var(--gold-light); color: var(--coral); font-weight: 700; text-decoration: none; text-align: center; white-space: nowrap; flex-shrink: 0; }

/* Affirmation/motivation quote banner -- black into the exact same coral/
   peach used for "WEDNESDAY" on the clock widget (var(--coral)) -- that's
   the specific pink Vanessa meant, not a deeper rose/berry tone. */
.quote-card { background: linear-gradient(135deg, #1c1710, #14120f 45%, var(--coral)); border-radius: 18px; padding: 26px 22px 22px; margin-bottom: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.quote-mark { font-family: var(--font-serif); font-size: 40px; color: var(--coral); line-height: 0.6; margin-bottom: 6px; }
.quote-body { min-width: 0; }
.quote-text { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.55; color: #fff; margin: 0; text-align: center; }
.quote-attribution { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); margin: 12px 0 0; font-weight: 600; text-align: center; }

/* Home widget -- a compact "phone widget" style card, everything centered
   in a single stacked column (day, small analog clock, date, big digital
   time, then a row of quick stats: working now / today / needs confirm) --
   accented in gold+coral two-tone rather than all-gold, so it feels livelier. */
.home-widget { background: var(--black); border-radius: 18px; padding: 20px 18px 16px; margin-bottom: 16px; color: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-widget-day { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); font-weight: 700; }
.home-widget-date { font-size: 13px; color: var(--champagne-light); margin-top: 2px; }
.home-widget-time { font-size: 38px; font-weight: 700; margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.home-widget-stats { display: flex; gap: 8px; margin-top: 14px; width: 100%; }
.home-widget-stat { flex: 1; background: rgba(217,161,62,0.15); border-radius: 10px; padding: 8px 6px; text-align: center; text-decoration: none; color: inherit; }
.home-widget-stat:nth-child(2) { background: rgba(242,179,160,0.18); }
.home-widget-stat-num { font-size: 18px; font-weight: 700; color: var(--gold-light); }
.home-widget-stat:nth-child(2) .home-widget-stat-num { color: var(--coral); }
.home-widget-stat-label { font-size: 10px; color: var(--champagne-light); margin-top: 2px; }

/* Birthday banner -- a small, warm callout on the days it applies, distinct
   from the widget/quote so it doesn't get lost. Pink/coral leaning since
   it's a celebratory, personal moment rather than a business stat. */
.birthday-card { background: linear-gradient(135deg, var(--coral) 0%, var(--gold-light) 100%); border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; }
.birthday-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--coral-dark); margin: 0 0 8px; }
.birthday-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--black); padding: 4px 0; }
.birthday-working-tag { font-size: 11px; font-weight: 700; background: var(--black); color: var(--gold-light); padding: 3px 9px; border-radius: 999px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.pending, .badge.upcoming { background: #f1e3c8; color: var(--warning); }
.badge.approved, .badge.active, .badge.eligible, .badge.completed, .badge.ok { background: #e2ecdf; color: var(--success); }
.badge.declined, .badge.rejected, .badge.flagged, .badge.held { background: #f3dede; color: var(--danger); }
.badge.assigned, .badge.checked_in, .badge.checked_out { background: #e6e1f5; color: #5a4a9c; }
.badge.no_show, .badge.cancelled, .badge.banned { background: #a13b3b; color: #fff; }
.badge.external { background: #d9bd8c; color: #4a3a1a; }
.badge.withdrawn { background: #e8e4dc; color: #6b6459; }
.badge.draft { background: #ece7db; color: #8a7f5a; border: 1px dashed #b8a97a; }
/* Age-requirement tag on events (21+/18+) is purely informational, not a
   status like the ones above -- broken out into its own coral/gold pairing
   (rather than reusing badge.held's warning-red) so it reads as a fun accent
   instead of looking like something's wrong. */
.badge.age21 { background: var(--coral); color: var(--coral-dark); }
.badge.age18 { background: var(--gold-light); color: var(--gold-dark); }
.stars { color: var(--gold); letter-spacing: 2px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; cursor: pointer; position: relative; }
.cal-cell.cal-head { font-weight: 700; color: #77706a; cursor: default; aspect-ratio: auto; padding: 4px 0; }
.cal-cell.empty { cursor: default; }
.cal-cell.has-shift { background: #f1e3c8; }
.cal-cell.today .cal-daynum { color: var(--gold); font-weight: 700; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-top: 2px; }

.grid-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.grid-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--champagne); cursor: zoom-in; }

/* Full-screen click-to-enlarge overlay for grid photos -- see app.js. The
   image itself is shown at its real resolution (max-width/height only caps
   it to the viewport), so nothing is downscaled beyond what the screen can
   show. */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 99999; background: rgba(10, 9, 7, 0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  cursor: zoom-out;
}
.lightbox-overlay img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 6px; }

/* Comp-card photo picker -- deliberately NOT .grid-photos so clicking a
   thumbnail toggles its checkbox instead of opening the lightbox overlay. */
.comp-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: 10px 0; }
.comp-pick-item { position: relative; display: block; cursor: pointer; }
.comp-pick-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--champagne); display: block; }
.comp-pick-item input[type="checkbox"] { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; z-index: 2; }
.comp-pick-item input[type="checkbox"]:checked + img { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

/* Training-guide product photos: shown one under another (not a grid) so
   landscape spec-sheet images of any size never overlap or spill outside
   their box -- the old rule was missing width:100% on the <img> itself, so
   full-size source images (2000px+ wide) ignored their thumbnail container
   and rendered on top of each other. */
.guide-photos { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.guide-photos img { width: 100%; max-width: 480px; height: auto; display: block; border-radius: 8px; border: 1px solid var(--champagne); cursor: zoom-in; }

.camera-wrap { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.camera-wrap video, .camera-wrap canvas { width: 100%; display: block; }
.camera-controls { display: flex; justify-content: center; padding: 12px; background: var(--black); }
.shutter { width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 4px solid var(--gold); cursor: pointer; }
/* Alignment guide overlay for ID/document photos -- a card-ratio rectangle
   centered over the live video so people know how to angle the license. */
.camera-guide-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 82%; aspect-ratio: 1.586 / 1; max-height: 70%;
  border: 3px dashed rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.alert.error { background: #f3dede; color: var(--danger); }
.alert.success { background: #e2ecdf; color: var(--success); }
.alert.info { background: var(--champagne-light); color: var(--charcoal); }

.list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0ece2; }
.list-item:last-child { border-bottom: none; }

.spinner { text-align: center; padding: 40px; color: #999; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #f0ece2; }
th { color: #6b6459; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }

.login-hero { background: var(--cream); padding: 36px 20px 14px; text-align: center; }
.login-hero .logo-wrap img { height: 150px; width: auto; display: block; margin: 0 auto; }
.login-hero .logo-word { font-size: 28px; letter-spacing: 0.15em; text-transform: uppercase; }
.login-hero .tag { color: var(--gold-light); margin-top: 6px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }