/* ─────────────────────────────────────────────────────────────────────────
   Green Moss Psychology - shared site theme.

   The palette mirrors greenmoss.com.au (deep forest green primary, moss
   green accent, mint-white page, Kumbh Sans body / Nunito headings) so the
   booking app reads as part of the same site. Every page links this file
   first; page-specific rules (the booking grid, the admin tables) live with
   the page and are written against the --gm-* tokens below.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --gm-primary:        #0C3227;   /* deep forest green - brand primary */
  --gm-primary-hover:  #144837;
  --gm-primary-active: #08221a;
  --gm-secondary:      #658B38;   /* moss green - brand secondary */
  --gm-secondary-hover:#55742e;
  --gm-secondary-soft: #eaf2e0;   /* moss at ~10% over white */
  --gm-ink:            #252337;   /* body text */
  --gm-muted:          #6f7a74;   /* labels, captions, disabled text */
  --gm-light:          #F7FFF7;   /* page background */
  --gm-surface:        #FFFFFF;   /* cards, navbar, modals */
  --gm-sunken:         #f2f7f1;   /* inputs, inset panels */
  --gm-border:         #dde7dd;
  --gm-border-strong:  #c2d2c2;
  --gm-danger:         #b3261e;
  --gm-danger-soft:    #fbeceb;

  --gm-shadow-sm: 0 1px 2px rgba(12, 50, 39, .06);
  --gm-shadow-md: 0 8px 24px rgba(12, 50, 39, .12);
}

/* ── Bootstrap light-theme mapping ──────────────────────────────────────── */
[data-bs-theme="light"] {
  --bs-body-bg: var(--gm-light);
  --bs-body-bg-rgb: 247, 255, 247;
  --bs-body-color: var(--gm-ink);
  --bs-body-color-rgb: 37, 35, 55;
  --bs-emphasis-color: var(--gm-primary);
  --bs-secondary-color: var(--gm-muted);
  --bs-secondary-bg: var(--gm-surface);
  --bs-tertiary-bg: var(--gm-sunken);
  --bs-border-color: var(--gm-border);
  --bs-primary: #0C3227;
  --bs-primary-rgb: 12, 50, 39;
  --bs-link-color: #0C3227;
  --bs-link-color-rgb: 12, 50, 39;
  --bs-link-hover-color: #658B38;
  --bs-link-hover-color-rgb: 101, 139, 56;
  --bs-danger: #b3261e;
  --bs-danger-rgb: 179, 38, 30;
  --bs-heading-color: var(--gm-primary);
}

body {
  font-family: 'Kumbh Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--gm-light);
  color: var(--gm-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', 'Kumbh Sans', system-ui, sans-serif;
  color: var(--gm-primary);
}

/* ── Navbar & brand ─────────────────────────────────────────────────────── */
.navbar {
  background-color: var(--gm-surface) !important;
  border-bottom: 1px solid var(--gm-border);
  box-shadow: var(--gm-shadow-sm);
}
.navbar-brand {
  font-family: 'Nunito', sans-serif;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--gm-primary);
}
.navbar-brand span { color: var(--gm-secondary); }

/* The wordmark from greenmoss.com.au. Shrinks on narrow screens so it never
   crowds the user dropdown on a phone. The -sm variant is for the secondary
   pages, where the navbar also carries a back button and a page title. */
.brand-logo {
  height: 40px; width: auto; display: inline-block; vertical-align: middle;
}
.brand-logo-sm { height: 26px; }
.brand-logo-lg { height: 58px; }   /* login card */
.brand-link { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 576px) {
  .brand-logo { height: 26px; }
  .brand-logo-sm { height: 20px; }
  .brand-logo-lg { height: 44px; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--gm-primary); --bs-btn-border-color: var(--gm-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--gm-primary-hover); --bs-btn-hover-border-color: var(--gm-primary-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--gm-primary-active); --bs-btn-active-border-color: var(--gm-primary-active);
  --bs-btn-disabled-bg: var(--gm-primary); --bs-btn-disabled-border-color: var(--gm-primary);
}
.btn-outline-secondary {
  --bs-btn-color: var(--gm-primary); --bs-btn-border-color: var(--gm-border-strong);
  --bs-btn-bg: var(--gm-surface);
  --bs-btn-hover-bg: var(--gm-secondary-soft); --bs-btn-hover-border-color: var(--gm-secondary);
  --bs-btn-hover-color: var(--gm-primary);
  --bs-btn-active-bg: var(--gm-secondary-soft); --bs-btn-active-border-color: var(--gm-secondary);
  --bs-btn-active-color: var(--gm-primary);
}
/* Bootstrap compiles the -primary variants with literal hex, so overriding
   --bs-primary alone leaves them Bootstrap blue. */
.btn-outline-primary {
  --bs-btn-color: var(--gm-primary); --bs-btn-border-color: var(--gm-primary);
  --bs-btn-hover-bg: var(--gm-primary); --bs-btn-hover-border-color: var(--gm-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--gm-primary-active); --bs-btn-active-border-color: var(--gm-primary-active);
}
.btn-outline-danger {
  --bs-btn-color: var(--gm-danger); --bs-btn-border-color: var(--gm-danger);
  --bs-btn-hover-bg: var(--gm-danger); --bs-btn-hover-border-color: var(--gm-danger);
}
.btn-danger {
  --bs-btn-bg: var(--gm-danger); --bs-btn-border-color: var(--gm-danger);
  --bs-btn-hover-bg: #96201a; --bs-btn-hover-border-color: #96201a;
}
.btn-success {
  --bs-btn-bg: var(--gm-secondary); --bs-btn-border-color: var(--gm-secondary);
  --bs-btn-hover-bg: var(--gm-secondary-hover); --bs-btn-hover-border-color: var(--gm-secondary-hover);
}
.bg-primary { background-color: var(--gm-primary) !important; }
.bg-danger { background-color: var(--gm-danger) !important; }
.text-primary { color: var(--gm-primary) !important; }

/* Status badges. Bootstrap's stock info/success/secondary are far brighter
   than the brand, so they are pulled back into the palette here. */
.badge.bg-info { background-color: #cfe0d5 !important; color: var(--gm-primary); }
.badge.bg-success { background-color: var(--gm-secondary) !important; color: #fff; }
.badge.bg-secondary { background-color: #dfe6e0 !important; color: var(--gm-muted); }
.badge.bg-warning { background-color: #e6c86a !important; color: #4a3c10; }
.badge.bg-primary { color: #fff; }

/* ── Dropdown ───────────────────────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--gm-surface); border-color: var(--gm-border);
  box-shadow: var(--gm-shadow-md); border-radius: 10px; padding: 6px;
}
.dropdown-item {
  color: var(--gm-ink); font-size: 0.85rem; font-weight: 500; border-radius: 6px;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--gm-secondary-soft); color: var(--gm-primary);
}
.dropdown-item-danger, .dropdown-item-danger:hover { color: var(--gm-danger); }
.dropdown-item-danger:hover { background-color: var(--gm-danger-soft); }
.dropdown-divider { border-color: var(--gm-border); }
.dropdown-header {
  color: var(--gm-muted); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding-bottom: 2px;
}
/* The page you are already on, marked by /api/auth/menu?page=… */
.dropdown-item.active, .dropdown-item.active:hover, .dropdown-item.active:focus {
  background-color: var(--gm-secondary-soft); color: var(--gm-primary); font-weight: 700;
}

/* ── Cards & modals ─────────────────────────────────────────────────────── */
.card { background-color: var(--gm-surface); border-color: var(--gm-border); }
.modal-content {
  background-color: var(--gm-surface); border-color: var(--gm-border);
  border-radius: 14px; box-shadow: var(--gm-shadow-md);
}
.modal-body .form-label,
.form-label {
  font-size: .72rem; font-weight: 700; color: var(--gm-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px;
}
.modal-body .edit-info {
  background: var(--gm-sunken); border: 1px solid var(--gm-border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 16px; font-size: .85rem; line-height: 1.6;
}
.modal-body .ei-label {
  color: var(--gm-muted); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700;
}
.modal-body .ei-value { color: var(--gm-primary); font-weight: 700; }
.modal-body textarea.form-control { resize: vertical; }

/* ── Form controls ──────────────────────────────────────────────────────── */
.form-control, .form-select, textarea.form-control {
  background-color: var(--gm-surface); border-color: var(--gm-border-strong);
  color: var(--gm-ink);
}
.form-control:focus, .form-select:focus {
  background-color: var(--gm-surface); border-color: var(--gm-secondary);
  color: var(--gm-ink); box-shadow: 0 0 0 0.2rem rgba(101, 139, 56, .22);
}
.form-control::placeholder { color: #a8b3ab; }
.form-check-input:checked {
  background-color: var(--gm-secondary); border-color: var(--gm-secondary);
}
.form-check-input:focus {
  border-color: var(--gm-secondary); box-shadow: 0 0 0 0.2rem rgba(101, 139, 56, .22);
}