/* ============================================================================
   WERRING LAW OFFICE — portal.css
   The staff portal at time.werringlaw.com: TimeClock + website admin.

   REPLACES the ~500 lines of inline <style> that used to live in index.html.
   That block was mid-rebrand and self-contradictory: green CSS variables with
   hardcoded navy (#181b5e / rgba(24,27,94,…)) surviving underneath from the old
   theme, `--cyan` that was actually green, legacy `.btn-navy` / `.stat-icon.navy`,
   16px radii, glassmorphism blur, and Space Grotesk — none of which is the brand.

   DESIGN LAW, same as the public site (public/css/core.css):
     1. RADIUS IS ZERO. No bubbles.
     2. NO DROP SHADOWS. Separation is flat colour + hairline borders.
     3. Two fonts: Cormorant Garamond (display) + DM Sans (everything else).
     4. Palette anchored on the logo: forest #1B4332, gold #C49A2A.

   Dark shell on purpose: this is a tool the office looks at all day, and the
   TimeClock has always been dark. But it is forest-dark now, not navy-dark, and
   GOLD is the action colour — forest #1B4332 on a forest-dark surface would be
   nearly invisible.

   Font Awesome is retained here (not the public site's icon registry): ~40 FA
   glyphs are already wired through the markup and time-app.js, and this is an
   internal tool. Not worth the churn.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

:root {
  /* Surfaces — forest-dark ladder */
  --bg:         #0A1710;
  --surface:    #0D2818;   /* forest-deep */
  --surface-2:  #123020;
  --surface-3:  #17392A;
  --border:     #234936;
  --border-light: #2F5C45;

  /* Brand */
  --forest:       #1B4332;
  --forest-mid:   #2D6A4F;   /* 6.39:1 under white — the safe "go" green for solid buttons */
  --forest-light: #40916C;
  --gold:         #C49A2A;
  --gold-soft:    #E5D5A8;
  --parchment:    #F0E0C8;

  /* Action colour on dark = gold */
  --accent:        #C49A2A;
  --accent-hover:  #D9AE3C;
  --accent-muted:  rgba(196,154,42,0.14);

  /* Text */
  --text:           #FFFFFF;
  --text-secondary: #D8CBB4;
  --text-muted:     #8FA69A;

  /* Status. These are TEXT colours, sat on the muted background beside them
     (badges, cp-msg). Measured composited over --surface: green 5.37:1, red
     5.02:1. They are NOT safe as a solid background under white text — for that
     see --forest-mid / --danger-deep and the .clock-btn / .btn-green rules. */
  --success: #5CBB8D;  --success-muted: rgba(79,169,127,0.14);
  --danger:  #E2795F;  --danger-muted:  rgba(210,96,74,0.14);
  /* Deep variant for a solid button carrying white text (6.07:1). */
  --danger-deep: #A8412F;
  --warning: #C49A2A;  --warning-muted: rgba(196,154,42,0.14);
  --info:    #6FA391;  --info-muted:    rgba(111,163,145,0.14);

  --font:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  --sidebar-w: 260px;
  --t: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DESIGN LAW #1 — enforced globally, exactly as on the public site. */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
a { color: var(--gold); text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- EMBLEM */
.emblem-mark {
  display: block; width: 100%; aspect-ratio: 1494 / 1746;
  background-color: currentColor;
  -webkit-mask: url('/images/werring-emblem.svg') no-repeat center / contain;
          mask: url('/images/werring-emblem.svg') no-repeat center / contain;
}

/* ------------------------------------------------------------- UTILITIES */
/* .hidden is how time-app.js dismisses the login screen (enterApp() adds it,
   resetLoginShell() removes it). It lived in the old inline <style> and was
   lost when that block was replaced — without it, .login-screen's
   `position:fixed; inset:0; z-index:100` keeps the login card on top of the
   app forever and NOBODY can sign in. `hidden` covers the HTML attribute the
   sidebar's unread badge uses, which `display:flex` would otherwise defeat. */
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- LOGIN */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg);
}
/* Was a navy radial-gradient glow + glassmorphism blur. Now a flat forest field
   with a gold hairline — same job, on brand, and it renders identically on
   browsers with no backdrop-filter support. */
.login-bg-pattern {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.login-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 46px 40px;
  text-align: center;
}
.login-logo { width: 60px; margin: 0 auto 20px; color: var(--gold); }
.login-card h1 {
  font-size: 2rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text); font-weight: 700; line-height: 1;
}
.login-card .login-sub {
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin: 6px 0 0;
}
.login-card > p { color: var(--text-muted); font-size: 0.88rem; margin: 22px 0; }
.login-field { margin-bottom: 14px; text-align: left; }
.login-field label {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.login-field input {
  width: 100%; padding: 13px 14px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 0.95rem; transition: border-color var(--t);
}
.login-field input:focus { outline: none; border-color: var(--gold); }
.login-btn {
  width: 100%; padding: 14px; margin-top: 8px;
  background: var(--gold); color: var(--surface);
  border: 0; font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: background var(--t);
}
.login-btn:hover { background: var(--text); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-footer { margin-top: 20px; font-size: 0.82rem; }
.login-footer a { color: var(--text-muted); }
.login-footer a:hover { color: var(--gold); }

/* ------------------------------------------------------------------ SHELL */
.app { display: none; min-height: 100vh; }
.app.active { display: flex; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px; border-bottom: 1px solid var(--border);
}
.sidebar-brand .brand-mark { width: 32px; flex: none; color: var(--gold); }
/* Must stack: without this the spans run inline and the lockup reads
   "WERRING STAFF / PORTAL" instead of "WERRING / STAFF PORTAL". */
/* Sub-line centred under the name, matching the public site's .lockup
   (Eddie 2026-07-22). The column shrinks to its widest child, so centring here
   centres "STAFF PORTAL" under "WERRING". */
.sidebar-brand .brand-words { display: flex; flex-direction: column; line-height: 1; min-width: 0; text-align: center; }
.sidebar-brand .brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
  text-indent: 0.02em;   /* half the tracking — see .brand-sub */
}
.sidebar-brand .brand-sub {
  font-size: 0.52rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-top: 4px; white-space: nowrap;
  /* letter-spacing leaves a trailing gap after the last letter that sits inside
     the centred box, so nudge back by half the tracking to look truly centred. */
  text-indent: 0.13em;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 0; }
.nav-section { margin-bottom: 6px; }
.nav-section-label {
  padding: 14px 20px 8px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; cursor: pointer;
  color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.nav-item i { width: 17px; text-align: center; font-size: 0.9rem; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--surface-2); color: var(--gold);
  border-left-color: var(--gold);
}
/* Unread inquiry count */
.nav-item .nav-count {
  margin-left: auto; background: var(--gold); color: var(--surface);
  font-size: 0.65rem; font-weight: 700; padding: 2px 7px; min-width: 20px; text-align: center;
}

/* The markup is:
     .sidebar-user > .sidebar-user-info(avatar + name/role) + 2× button.sidebar-logout
   so .sidebar-user must STACK, and only .sidebar-user-info is the avatar row.
   Making .sidebar-user itself a flex row (an earlier mistake here) put the
   avatar, Change Password and Sign Out side by side and overlapping. */
.sidebar-user { border-top: 1px solid var(--border); }
.sidebar-user-info {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 20px;
}
.sidebar-user .sidebar-logout { width: 100%; border-top: 0; }
.sidebar-user .sidebar-logout + .sidebar-logout { border-top: 1px solid var(--border); }
.sidebar-user-avatar {
  width: 36px; height: 36px; flex: none;
  background: var(--forest); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.82rem;
}
.sidebar-user-info { min-width: 0; }
.sidebar-user-name { font-size: 0.86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.7rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.sidebar-logout {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.82rem; cursor: pointer;
  transition: color var(--t), background var(--t);
}
.sidebar-logout:hover { color: var(--danger); background: var(--surface-2); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 30px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 10;
}
.topbar-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.topbar-clock { font-size: 0.9rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.content { padding: 30px; flex: 1; }
.page { display: none; }
.page.active { display: block; }

/* ------------------------------------------------------------------ CARDS */
.card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 24px; margin-bottom: 20px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.card-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.card-title i { color: var(--gold); font-size: 0.9rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--border); margin-bottom: 20px; }
.stat-card { background: var(--surface); padding: 22px; }
.stat-icon {
  width: 36px; height: 36px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-muted); color: var(--gold); font-size: 0.95rem;
}
/* Legacy colour modifiers. `.navy` is a leftover from the pre-rebrand theme and
   is kept only so existing markup doesn't fall through to an unstyled box —
   it renders forest now. Remove the class from the markup when convenient. */
.stat-icon.gold  { background: var(--accent-muted);  color: var(--gold); }
.stat-icon.green { background: var(--success-muted);  color: var(--success); }
.stat-icon.blue  { background: var(--info-muted);     color: var(--info); }
.stat-icon.navy  { background: rgba(27,67,50,0.35);   color: var(--forest-light); }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; }
.stat-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 7px; }

/* ------------------------------------------------------------ ALERT BAR */
/* The "someone is waiting on you" bar at the top of the Dashboard. Gold left
   rule so it reads as a prompt, not an error — nothing is wrong, Andrew just
   has something to approve. */
.alert-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--accent-muted); border: 1px solid rgba(196,154,42,0.4);
  border-left: 3px solid var(--gold);
  color: var(--text); padding: 16px 20px; margin-bottom: 20px; font-size: 0.92rem;
}
.alert-bar i { color: var(--gold); }
.alert-bar[hidden] { display: none; }

/* ------------------------------------------------------------ CLOCK HERO */
.clock-hero {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 40px; text-align: center; margin-bottom: 20px; position: relative;
}
.live-time {
  font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4.6rem);
  font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.live-date { color: var(--text-muted); font-size: 0.95rem; margin-top: 8px; }
.clock-btn {
  margin-top: 26px; padding: 17px 44px;
  background: var(--success); color: #fff; border: 0;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; gap: 11px;
  transition: background var(--t), opacity var(--t);
}
.clock-btn:hover { opacity: 0.9; }
.clock-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* The class names time-app.js actually sets (setClockedIn):
     clocked OUT -> class="clock-btn clock-in"   (the button says "Clock In",  green)
     clocked IN  -> class="clock-btn clock-out"  (the button says "Clock Out", red)
   Two bugs lived here after the CSS rewrite, both on the app's most-used control:
     1. this file only styled `.clocked-out`, which setClockedIn never sets — so
        the Clock Out button stayed green instead of red;
     2. `.clock-in { color: var(--success) }` (intended as a text colour) landed
        on the BUTTON, painting a green label on a green background — the button
        rendered completely blank.
   Hence the explicit, high-specificity pairs below. Don't "tidy" these away. */
/* Colours are the DEEP variants, not --success/--danger. Those two are tuned to
   be readable as light TEXT on a dark muted badge; as a BACKGROUND under white
   they only reach 2.87:1 (green) and 3.81:1 (red), and this label is 13.6px
   bold — under WCAG's large-text threshold, so it needs 4.5:1. Darkening the
   tokens themselves would fix the button and break every badge, hence separate
   values here. --forest-mid is an existing brand token and scores 6.39:1. */
.clock-btn.clock-in    { background: var(--forest-mid); color: #fff; }   /* 6.39:1 */
.clock-btn.clock-out   { background: var(--danger-deep); color: #fff; }  /* 6.07:1 */
.clock-btn.clocked-out { background: var(--danger-deep); color: #fff; }  /* legacy alias */
.clock-elapsed {
  margin-top: 18px; font-size: 0.95rem; color: var(--gold);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
/* Status-badge text colours. Scoped to .status-badge on purpose — an unscoped
   `.clock-in`/`.clock-out` also matches the clock BUTTON, which is what made it
   render blank. */
.status-badge.clocked-in  { background: var(--success-muted); color: var(--success); border-color: rgba(79,169,127,0.4); }
.status-badge.clocked-out { background: var(--danger-muted);  color: var(--danger);  border-color: rgba(210,96,74,0.4); }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }

/* --------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid transparent; cursor: pointer;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; transition: background var(--t), color var(--t), border-color var(--t);
  background: var(--forest); color: #fff;
}
.btn:hover { background: var(--forest-light); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm { padding: 7px 12px; font-size: 0.68rem; }
.btn-gold  { background: var(--gold); color: var(--surface); }
.btn-gold:hover { background: var(--accent-hover); }
/* --success under white text is 2.87:1. This is the Approve button — it must be
   readable. --forest-mid is the same "go" green, 6.39:1, and already brand. */
.btn-green { background: var(--forest-mid); color: #fff; }
.btn-green:hover { background: var(--forest-light); color: var(--surface); }
/* legacy alias — was the old navy primary */
.btn-navy  { background: var(--forest); color: #fff; }
.btn-navy:hover { background: var(--forest-light); }
.btn-danger, .btn-red { background: var(--danger); color: #fff; }
.btn-danger:hover, .btn-red:hover { background: #E0705A; }
.btn-outline {
  background: transparent; color: var(--text-secondary); border-color: var(--border-light);
}
.btn-outline:hover { background: var(--surface-2); color: var(--text); border-color: var(--gold); }

/* ---------------------------------------------------------------- BADGES */
.badge, .status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid transparent;
}
.badge-gold   { background: var(--warning-muted); color: var(--gold);    border-color: rgba(196,154,42,0.4); }
.badge-green  { background: var(--success-muted); color: var(--success); border-color: rgba(79,169,127,0.4); }
.badge-red    { background: var(--danger-muted);  color: var(--danger);  border-color: rgba(210,96,74,0.4); }
.badge-orange { background: var(--warning-muted); color: var(--warning); border-color: rgba(196,154,42,0.4); }
.badge-gray   { background: var(--surface-2);     color: var(--text-muted); border-color: var(--border); }
.status-badge { background: var(--success-muted); color: var(--success); border-color: rgba(79,169,127,0.4); }

/* ----------------------------------------------------------------- FORMS */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.form-input, .form-select, textarea.form-input {
  width: 100%; padding: 11px 13px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 0.92rem; transition: border-color var(--t);
}
.form-input:focus, .form-select:focus { outline: none; border-color: var(--gold); }
.form-input::placeholder { color: var(--text-muted); }
textarea.form-input { min-height: 110px; resize: vertical; line-height: 1.6; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA69A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
  padding-right: 36px;
}
/* Small hint under a field. Was missing, so modules fell back to inline styles. */
.form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.form-note {
  padding: 14px 16px; margin-bottom: 20px; font-size: 0.85rem; line-height: 1.6;
  background: var(--accent-muted); border-left: 3px solid var(--gold); color: var(--text-secondary);
}

/* ── Blog & Videos — drag-drop video upload ────────────────────────────────
   All colours are palette vars, so light mode adapts with no extra rules.
   DESIGN LAW: no radius, no shadow — a dashed rule and a gold hover carry it. */
.vdrop {
  border: 1px dashed var(--border-light); background: var(--bg);
  padding: 30px 20px; text-align: center; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.vdrop:hover { border-color: var(--gold); }
.vdrop.is-drag { border-color: var(--gold); background: var(--surface-2); }
.vdrop__ico { display: block; font-size: 1.9rem; color: var(--gold); margin-bottom: 10px; }
.vdrop__lead { font-size: 1rem; font-weight: 600; color: var(--text); }
.vdrop__sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 6px; }
.vdrop__sub .btn { margin-left: 3px; }
.vdrop__hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 13px; line-height: 1.5; }

.vcard { border: 1px solid var(--border); background: var(--bg); }
.vcard__preview { display: block; width: 100%; max-height: 300px; background: #000; }
.vcard__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border);
}
.vcard__name { font-size: 0.85rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard__remove { flex: none; color: var(--danger); border-color: var(--danger); }
.vcard__remove:hover { background: var(--danger-muted); color: var(--danger); border-color: var(--danger); }

.vprog { padding: 10px 0; }
.vprog__track { height: 8px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.vprog__fill { display: block; height: 100%; width: 0%; background: var(--gold); transition: width 0.2s ease; }
.vprog__label { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; text-align: center; }

.vor {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.vor::before, .vor::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.vor-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* Compact drop zone + photo card — Team member portraits. */
.vdrop--sm { padding: 20px 16px; }
.vdrop--sm .vdrop__ico { font-size: 1.5rem; margin-bottom: 7px; }
.pcard {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); background: var(--bg); padding: 12px;
}
.pcard__img {
  width: 72px; height: 90px; flex: none;
  object-fit: cover; object-position: top; background: var(--surface-2);
  border: 1px solid var(--border);
}
.pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; min-width: 0; }
.pcard__name { font-size: 0.85rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__remove { flex: none; color: var(--danger); border-color: var(--danger); }
.pcard__remove:hover { background: var(--danger-muted); color: var(--danger); border-color: var(--danger); }

/* ── Events — RSVP method options (editor) + RSVP list summary ─────────────── */
.rsvp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .rsvp-opts { grid-template-columns: 1fr; } }
.rsvp-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--border); background: var(--bg);
  transition: border-color var(--t), background var(--t);
}
.rsvp-opt:hover { border-color: var(--gold); }
.rsvp-opt input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--gold); flex: none; cursor: pointer; }
.rsvp-opt span { display: flex; flex-direction: column; line-height: 1.35; }
.rsvp-opt strong { font-size: 0.9rem; color: var(--text); }
.rsvp-opt em { font-style: normal; font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }

.rsvp-summary {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--surface-2); border-left: 3px solid var(--gold);
}
.rsvp-summary > span { font-size: 0.9rem; color: var(--text-secondary); }
.rsvp-summary > span strong { color: var(--gold); font-size: 1.05rem; }
/* Right-aligned action cluster: Copy emails + the Export dropdown, kept together. */
.rsvp-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Export dropdown — the toggle button plus a small anchored CSV / PDF menu. */
.rsvp-export { position: relative; }
.rsvp-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  min-width: 210px; padding: 6px;
  background: var(--surface-3); border: 1px solid var(--border-light);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.rsvp-export-menu[hidden] { display: none; }
.rsvp-export-menu button {
  display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 0;
  padding: 9px 10px; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--text); font-size: 0.9rem; font-weight: 600;
}
.rsvp-export-menu button:hover { background: var(--surface-2); color: var(--gold); }
.rsvp-export-menu button i { color: var(--gold); width: 16px; }
.rsvp-export-menu button span { font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; }

/* ---------------------------------------------------------------- TABLES */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tbl th {
  text-align: left; padding: 11px 12px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:hover { background: var(--surface-2); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
/* Was missing — modules reached for it and had to fall back to inline styles. */
.text-muted  { color: var(--text-muted); }
.text-gold   { color: var(--gold); }
.text-danger { color: var(--danger); }
.text-sm     { font-size: 0.82rem; }

.empty-state {
  padding: 44px 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem;
}
.empty-state i { font-size: 1.7rem; color: var(--border-light); display: block; margin-bottom: 12px; }

/* ---------------------------------------------------------------- MODALS */
/* Structure is `.modal-overlay > .modal` and `.cp-overlay > .cp-modal` — the
   *-overlay is the backdrop, .modal/.cp-modal is the PANEL. This is what
   time-app.js has always built (openChangePassword, editEmployee, editEntry).
   An earlier version of this file styled .modal/.cp-modal AS the backdrop,
   which left the real overlays unstyled and gave the panels `position:fixed;
   inset:0` — i.e. Change Password and Edit Employee were visibly broken. */
.modal-overlay, .cp-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,23,16,0.86);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  overflow-y: auto;
}
.modal, .cp-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  width: 100%; max-width: 560px; padding: 28px; margin: auto;
}
/* Wide variant for modals holding a full table (e.g. the Events → RSVPs contact
   list, which has Name/Party/Email/Phone/When and got cut off at 560px). */
.modal--wide { max-width: 920px; }
.modal-title, .cp-modal h3, .modal h3 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.modal-actions, .cp-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.cp-field { margin-bottom: 14px; }
.cp-msg { padding: 11px 13px; font-size: 0.84rem; margin-bottom: 14px;
          background: var(--surface-2); border-left: 3px solid var(--border-light); color: var(--text-secondary); }
/* time-app.js's changePassword() emits `cp-msg error` / `cp-msg success`, not
   .err/.ok — those messages rendered unstyled. Both spellings supported rather
   than editing live payroll code for a class name. */
.cp-msg.err, .cp-msg.error   { background: var(--danger-muted);  border-left-color: var(--danger);  color: var(--danger); }
.cp-msg.ok,  .cp-msg.success { background: var(--success-muted); border-left-color: var(--success); color: var(--success); }
.cp-msg.info { background: var(--accent-muted); border-left-color: var(--gold); color: var(--gold-soft); }

/* ---------------------------------------------------------- THEME TOGGLE */
.theme-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.82rem; cursor: pointer;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle-track {
  margin-left: auto; width: 38px; height: 20px;
  background: var(--surface-3); border: 1px solid var(--border-light);
  position: relative; transition: background var(--t);
}
.theme-toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; background: var(--text-muted);
  transition: transform var(--t), background var(--t);
}
body.light-mode .theme-toggle-track { background: var(--accent-muted); border-color: var(--gold); }
body.light-mode .theme-toggle-track::after { transform: translateX(18px); background: var(--gold); }

/* ------------------------------------------------------------ LIGHT MODE */
/* Retained because the existing Settings page and sidebar both toggle it.
   Re-mapped onto the brand's light palette (cream/parchment/forest) instead of
   the old theme's partial navy override, which only ever recoloured the login. */
body.light-mode {
  --bg:         #F5F0E6;
  --surface:    #FFFFFF;
  --surface-2:  #F5F0E6;
  --surface-3:  #E8F0EB;
  --border:     #D8D3C7;
  --border-light: #B9B3A3;
  --text:           #1C2B23;
  --text-secondary: #2C3E36;
  --text-muted:     #5E7D6F;
  --accent:       #1B4332;
  --accent-hover: #2D6A4F;
  --accent-muted: rgba(27,67,50,0.10);
}
body.light-mode .login-card h1,
body.light-mode .topbar-title,
body.light-mode .stat-value,
body.light-mode .live-time { color: var(--text); }
body.light-mode .sidebar-brand .brand-mark,
body.light-mode .login-logo { color: var(--forest); }
body.light-mode .login-bg-pattern { background: linear-gradient(180deg, #FFF 0%, var(--bg) 100%); }
body.light-mode .login-btn,
body.light-mode .btn-gold { background: var(--forest); color: #fff; }
body.light-mode .login-btn:hover,
body.light-mode .btn-gold:hover { background: var(--forest-light); }
body.light-mode .nav-item.active { color: var(--forest); border-left-color: var(--gold); }
body.light-mode .sidebar-user-avatar { background: var(--forest); color: var(--gold); }
/* The translucent-dark backdrop belongs on the OVERLAY, not the panel. This
   rule used to target .modal/.cp-modal back when those WERE the backdrop; after
   the .modal-overlay > .modal refactor, .modal is the PANEL — so in light mode
   the panel was getting a dark translucent background with light-mode DARK text
   on top of it = ~1:1 contrast (invisible title, Cancel, Published label; the
   whole Add-Event modal was unreadable in light mode). The panel keeps its
   light-mode white (var(--surface)); the dim goes on the overlay where it
   belongs. */
body.light-mode .modal-overlay, body.light-mode .cp-overlay { background: rgba(28,43,35,0.5); }

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 1024px) {
  :root { --sidebar-w: 68px; }
  .sidebar-brand .brand-words, .nav-item span, .nav-section-label,
  .sidebar-user-info, .sidebar-logout span, .theme-toggle span, .theme-toggle-track { display: none; }
  .sidebar-brand, .nav-item, .sidebar-user, .sidebar-logout, .theme-toggle { justify-content: center; padding-inline: 0; }
  .nav-item { border-left-width: 0; border-bottom: 2px solid transparent; }
  .nav-item.active { border-left-width: 0; border-bottom-color: var(--gold); }
  .form-grid-3, .form-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .app.active { flex-direction: column; }
  .sidebar {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0;
    width: 100%; height: auto; flex-direction: row;
    border-right: 0; border-top: 1px solid var(--border); z-index: 50;
  }
  .sidebar-brand, .sidebar-user, .theme-toggle { display: none; }
  .sidebar-nav { display: flex; overflow-x: auto; padding: 0; flex: 1; }
  .nav-section { display: flex; margin: 0; }
  .nav-item { padding: 14px 18px; }
  .main { padding-bottom: 60px; }
  .content, .topbar { padding: 18px; }
  .form-grid, .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
  .tbl { font-size: 0.8rem; }
  .tbl th, .tbl td { padding: 9px 7px; }
}