/* ===== Spicemore Corporate — luxury chrome overlay =====
 * Loaded AFTER css/style.css on corporate pages. Restyles only the shared
 * chrome (navbar, brand, dropdown, footer, auth gate) to the deep-green + gold
 * theme. Deliberately does NOT touch the :root design tokens that the tool
 * bodies (staff-attendance, sepl, etc.) consume, so those layouts stay intact.
 */

:root {
  --lx-gold:      #CBA24A;
  --lx-gold-soft: #E8CD87;
  --lx-cream:     #F1EAD8;
  --lx-muted:     rgba(241,234,216,0.64);
  --lx-line:      rgba(203,162,74,0.30);
  --lx-line-soft: rgba(203,162,74,0.16);
  --lx-grad:      linear-gradient(135deg, #EAD08C 0%, #CBA24A 48%, #9A7A2E 100%);
}

body {
  background: linear-gradient(180deg, #0A1C15 0%, #07160F 58%, #03100B 100%) fixed;
  color: var(--lx-cream);
}

/* ===== NAVBAR ===== */
.navbar {
  background: rgba(4,25,15,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lx-line);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand .medallion {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  border: 1px solid rgba(203,162,74,0.55);
  box-shadow: 0 0 0 5px rgba(203,162,74,0.06), 0 10px 28px rgba(0,0,0,0.4);
}
.brand .medallion img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-name {
  font-family: 'Cinzel', Georgia, serif; font-size: 15px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--lx-cream); line-height: 1.1;
}
.brand-name small {
  display: block; font-family: 'Poppins', sans-serif; font-size: 8.5px;
  letter-spacing: 0.32em; color: var(--lx-gold); margin-top: 3px;
}

.nav-links a {
  color: var(--lx-muted); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px;
}
.nav-links a:hover,
.nav-links a.active { color: var(--lx-gold-soft); }
.nav-links a.active::after { background: var(--lx-gold); }

.dropdown-trigger,
.dropdown-trigger.active { color: var(--lx-gold); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; }
.dropdown-arrow { color: var(--lx-gold); }
.dropdown-menu {
  background: rgba(6,20,13,0.98); border: 1px solid var(--lx-line);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
}
/* Invisible bridge so the dropdown stays open while the cursor crosses the
   8px gap between the trigger and the menu. Without it, the hover is lost
   mid-traverse and the menu snaps shut before the user can click an item. */
.dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 14px; }
.dropdown-menu a { color: var(--lx-muted); }
.dropdown-menu a:hover { background: rgba(203,162,74,0.08); color: var(--lx-gold-soft); }

.hamburger span { background: var(--lx-cream); }

/* ===== AUTH GATE (static fallback) ===== */
#authRedirect.portal-gate { background: transparent; }
.gate-card {
  background: rgba(4,25,15,0.6); border: 1px solid var(--lx-line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.gate-card h2 { color: var(--lx-cream); font-family: 'Cinzel', Georgia, serif; }
.gate-card p { color: var(--lx-muted); }
.gate-card .btn-submit { background: var(--lx-grad); color: #14210d; font-weight: 600; }
.gate-card .btn-submit:hover { filter: brightness(1.07); background: var(--lx-grad); }

/* Ivory overrides — without these the cream h2 + muted-cream p render
   invisible on the ivory cream gate-card surface. Wrappers
   (daily-outstanding, credit-assessor, reconciliation, …) already flip
   the card background to #FBF5E2 in ivory mode; this gives the text
   inside readable contrast. */
:root[data-theme="ivory"] .gate-card h2 { color: #07120A; }
:root[data-theme="ivory"] .gate-card p { color: #5C4A1F; }
:root[data-theme="ivory"] .gate-card .btn-submit { color: #14210d; }

/* ===== FOOTER ===== */
.footer { background: #03100B; border-top: 1px solid var(--lx-line); }
.footer-col h4 { color: var(--lx-gold); }
.footer-col p { color: var(--lx-muted); }
.footer-bottom { border-top: 1px solid var(--lx-line-soft); color: rgba(241,234,216,0.42); }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .nav-links {
    background: rgba(4,25,15,0.98);
    border-bottom: 1px solid var(--lx-line);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .nav-dropdown .dropdown-menu { border-left: 2px solid var(--lx-gold); }
}