@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700&display=swap');

:root {
  /* Brand — established (logo, emails, booking page). Not up for reinvention. */
  --navy-950: #0F1E2E;
  --navy-800: #16283D;
  --navy-700: #1F3A57;
  --gold-500: #C4962A;
  --gold-100: #F7ECD6;

  --ink-900: #12181F;
  --slate-500: #64748B;
  --slate-300: #B4BCC7;
  --slate-200: #E4E7EC;
  --slate-100: #EEF1F4;

  --surface: #F7F8FA;
  --surface-card: #FFFFFF;

  --success: #1B7F45;
  --success-tint: #E1F3E8;
  --danger: #C1443B;
  --danger-tint: #FBEAE8;

  --color-primary: var(--navy-700);
  --color-accent: var(--gold-500);
  --color-bg: var(--surface);
  --color-surface: var(--surface-card);
  --color-border: var(--slate-200);
  --color-text: var(--ink-900);
  --color-text-muted: var(--slate-500);
  --color-danger: var(--danger);
  --color-success: var(--success);
  --sidebar-bg: var(--navy-800);
  --sidebar-bg-deep: var(--navy-950);

  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 30, 46, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 30, 46, 0.10);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

:root[data-theme="dark"] {
  --ink-900: #E7EBF0;
  --slate-500: #8B98A8;
  --slate-300: #3D4A5A;
  --slate-200: #263140;
  --slate-100: #1A222C;

  --surface: #0D141C;
  --surface-card: #141C26;

  --success-tint: rgba(38, 166, 91, 0.16);
  --danger-tint: rgba(224, 92, 79, 0.16);
  --gold-100: rgba(196, 150, 42, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #E7EBF0;
    --slate-500: #8B98A8;
    --slate-300: #3D4A5A;
    --slate-200: #263140;
    --slate-100: #1A222C;

    --surface: #0D141C;
    --surface-card: #141C26;

    --success-tint: rgba(38, 166, 91, 0.16);
    --danger-tint: rgba(224, 92, 79, 0.16);
    --gold-100: rgba(196, 150, 42, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy-700);
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Auth shell (login/setup) */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(196, 150, 42, 0.10), transparent 60%),
    linear-gradient(160deg, var(--sidebar-bg-deep), var(--sidebar-bg));
}

/* Fixed dark surface, deliberately not following --color-surface: the crest's
   wordmark is baked in white (same asset the sidebar uses, which is likewise
   always-dark regardless of theme), so this card stays a constant brand
   plinth rather than flipping to white in light mode and erasing it. */
.auth-card {
  position: relative;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}


/* The auth gate is the one place "Sentinel" is the entire point of the page,
   so its signature reticle corners (see .card, above) stay permanently lit
   here instead of only revealing on hover — the sentinel is always watching
   the door. */
.auth-card::before, .auth-card::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  animation: auth-reticle-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.auth-card::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--gold-500);
  border-left: 2px solid var(--gold-500);
  border-radius: var(--radius-lg) 0 0 0;
}
.auth-card::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--gold-500);
  border-right: 2px solid var(--gold-500);
  border-radius: 0 0 var(--radius-lg) 0;
  animation-delay: 0.08s;
}

@keyframes auth-reticle-in {
  from { opacity: 0; transform: scale(1.7); }
  to { opacity: 1; transform: scale(1); }
}

.auth-mark {
  width: 196px;
  height: 182px;
  overflow: hidden;
  margin: -8px auto 20px;
}

.auth-mark img {
  width: 648px;
  height: 267px;
  max-width: none;
  margin-left: -227px;
  margin-top: -38px;
  display: block;
}

/* Fixed colors throughout — the card itself no longer follows the light/dark
   toggle (see .auth-card above), so nothing inside it should either. */
.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: rgba(224, 92, 79, 0.16);
  border: 1px solid rgba(224, 92, 79, 0.35);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.45;
  color: #FF9A8D;
}
.auth-error svg { flex-shrink: 0; margin-top: 1px; }

.btn-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 20px;
  margin-top: 10px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: #fff;
  color: var(--navy-950);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.12s ease, transform 0.05s ease;
}
.btn-google:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.btn-google:active { transform: translateY(1px); }

/* Logged-in shell */
.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-deep));
  color: #fff;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  display: block;
  padding: 8px 0 16px;
  text-align: center;
}

.sidebar-logo-crop {
  width: 140px;
  height: 130px;
  overflow: hidden;
  margin: 0 auto;
}

.sidebar-logo {
  width: 463px;
  height: 191px;
  max-width: none;
  margin-left: -162px;
  margin-top: -27px;
  display: block;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  padding: 9px 12px 9px 13px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar nav a svg { flex-shrink: 0; opacity: 0.85; }

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.sidebar nav a.active {
  background: rgba(196, 150, 42, 0.12);
  color: #fff;
  border-left-color: var(--gold-500);
  font-weight: 600;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 36px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.topbar-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-700);
}

.content {
  padding: 32px 36px 48px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

/* Components */
.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}

/* Signature: reticle corner-brackets, reveal on hover — a quiet nod to "Sentinel" */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.card::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--gold-500);
  border-left: 2px solid var(--gold-500);
  border-radius: var(--radius-lg) 0 0 0;
}
.card::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--gold-500);
  border-right: 2px solid var(--gold-500);
  border-radius: 0 0 var(--radius-lg) 0;
}
.card:hover::before, .card:hover::after { opacity: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.05s ease;
}

.btn:hover { border-color: var(--slate-300); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); }

.btn-accent {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-950);
}

.btn-danger {
  background: var(--danger-tint);
  border-color: #F0C4C0;
  color: var(--danger);
}
.btn-danger:hover { background: #F7DAD7; }

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13.5px;
}

th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

tbody tr { transition: background-color 0.1s ease; }
tbody tr:hover { background: var(--surface); }
tbody tr:last-child td { border-bottom: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--slate-100);
  color: var(--color-text);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.7;
}

.badge-success { background: var(--success-tint); color: var(--success); }
.badge-danger { background: var(--danger-tint); color: var(--danger); }
.badge-accent { background: var(--gold-100); color: #8A6A1C; }

.row-overdue { background: #FFF8F6; }

input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.12s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold-500);
  outline: none;
}

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}

.field {
  margin-bottom: 16px;
}

.filter-bar {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}

.error-text {
  color: var(--color-danger);
  font-size: 13px;
  margin-top: 8px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.pagination-spacer { flex: 1; }

/* Dashboard stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--gold-100);
  color: #8A6A1C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy-700);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    bottom: 0;
    z-index: 30;
    transition: left 0.2s ease;
  }
  .sidebar.open {
    left: 0;
  }
  [data-scrim] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 46, 0.45);
    z-index: 20;
  }
  [data-scrim].visible {
    display: block;
  }
}