/* Legacy --hc-* variables, now carrying KiwiHacks values.
 *
 * The names are kept because .btn-hc-primary, .card-hc, .nav-item and friends
 * are referenced throughout the views; renaming them would be churn rather
 * than rebranding. themes.css re-points these at the active theme's semantic
 * vars, so the values here are the fallback for the default theme. */
:root {
  /* KiwiHacks palette */
  --hc-darker: #0d0d0d;
  --hc-dark: #132f1e;
  --hc-darkless: #1c3a26;
  --hc-black: #132f1e;
  --hc-steel: #2e522b;
  --hc-slate: #2e522b;
  --hc-muted: #607067;
  --hc-smoke: rgba(19, 47, 30, 0.22);
  --hc-snow: #eae6e2;
  --hc-white: #ffffff;
  --hc-red: #2e522b;
  --hc-orange: #6a4b00;
  --hc-yellow: #fff0c7;
  --hc-green: #205b2a;
  --hc-cyan: #36c6fb;
  --hc-blue: #155a72;
  --hc-purple: #8b59a3;
  --hc-primary: #2e522b;

  /* Shadows — physical, not glossy */
  --hc-shadow-small: 0 1px 2px rgba(19, 47, 30, 0.14);
  --hc-shadow-card: 0 2px 4px rgba(19, 47, 30, 0.18);
  --hc-shadow-elevated: 0 8px 18px rgba(19, 47, 30, 0.14);

  /* Border radius */
  --hc-radii-small: 8px;
  --hc-radii-default: 12px;
  --hc-radii-extra: 15px;
  --hc-radii-circle: 99999px;
}

/* Kiwihacks primary button style */
.btn-hc-primary {
  background-color: var(--hc-red);
  color: white;
  font-weight: 700;
  border-radius: var(--hc-radii-extra);
  padding: 0.75rem 1.5rem;
  box-shadow: var(--hc-shadow-card);
  transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-hc-primary:hover,
.btn-hc-primary:focus {
  box-shadow: var(--hc-shadow-elevated);
  transform: translateY(-2px);
}

/* Kiwihacks outline button */
.btn-hc-outline {
  background-color: transparent;
  color: var(--hc-red);
  font-weight: 700;
  border: 2px solid var(--hc-red);
  border-radius: var(--hc-radii-circle);
  padding: 0.75rem 1.5rem;
  transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-hc-outline:hover,
.btn-hc-outline:focus {
  box-shadow: var(--hc-shadow-card);
  transform: scale(1.0625);
}

/* Kiwihacks card styles */
.card-hc {
  background-color: var(--hc-white);
  border-radius: var(--hc-radii-extra);
  box-shadow: var(--hc-shadow-card);
  padding: 1.5rem;
  overflow: hidden;
}

.card-hc-sunken {
  background-color: var(--hc-smoke);
  border-radius: var(--hc-radii-extra);
  padding: 1.5rem;
}

.card-hc-interactive {
  background-color: var(--hc-white);
  border-radius: var(--hc-radii-extra);
  box-shadow: var(--hc-shadow-card);
  padding: 1.5rem;
  overflow: hidden;
  transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
  text-decoration: none;
}

.card-hc-interactive:hover,
.card-hc-interactive:focus {
  transform: scale(1.0625);
  box-shadow: var(--hc-shadow-elevated);
}

/* Text colors */
.text-hc-red { color: var(--hc-red); }
.text-hc-orange { color: var(--hc-orange); }
.text-hc-green { color: var(--hc-green); }
.text-hc-blue { color: var(--hc-blue); }
.text-hc-muted { color: var(--hc-muted); }

/* Background colors */
.bg-hc-red { background-color: var(--hc-red); }
.bg-hc-dark { background-color: var(--hc-dark); }
.bg-hc-darker { background-color: var(--hc-darker); }
.bg-hc-snow { background-color: var(--hc-snow); }
.bg-hc-smoke { background-color: var(--hc-smoke); }

.turbo-progress-bar { background-color: var(--hc-red); }

/* Expo-style light sidebar navigation */
.nav-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  color: #3c4858;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  line-height: 1.4;
}
.nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1f2d3d;
}
.nav-item-active {
  background: #e6e6ea;
  color: #1f2d3d;
  font-weight: 600;
}
.nav-item svg {
  margin-right: 10px;
  flex-shrink: 0;
  color: #6b7280;
}
.nav-item-active svg {
  color: #1f2d3d;
}

/* Sidebar pills (user / event selectors) */
.sidebar-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 10px 6px 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  text-align: left;
}
.sidebar-pill:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Sidebar floating dropdown */
.sidebar-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.sidebar-dropdown-up {
  top: auto;
  bottom: calc(100% + 6px);
}
.sidebar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: #1f2d3d;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.sidebar-dropdown-item:hover {
  background: #f3f4f6;
}
.sidebar-dropdown-item-active {
  background: #e6e6ea;
  font-weight: 600;
}

/* Mobile sidebar drawer (admin layout)
 *
 * Kept in the DOM rather than toggled with `hidden` so the slide and fade can
 * actually transition. `visibility` is delayed off the transition so the panel
 * stays keyboard- and screen-reader-inert once it has finished sliding away.
 * The scrim tints with --bg-darker: `bg-gray-600/bg-opacity-75` used to resolve
 * to an opaque green here, since tailwind v4 dropped the bg-opacity-* utilities
 * and themes.css remaps gray-600 to a semantic token. */
.mobile-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg-darker, #132f1e) 65%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.mobile-drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: 16rem;
  max-width: 85vw;
  box-shadow: var(--shadow-lg, 0 8px 18px rgba(19, 47, 30, 0.14));
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.2s;
}
.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .mobile-drawer,
  .mobile-drawer-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer-scrim {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* Modal scrim
 *
 * Shares the drawer's ink so every overlay in the app dims the same way, and
 * gives one place to tune it. Reach for this instead of a colour utility:
 * `bg-opacity-*` no longer exists in tailwind v4 (so `bg-gray-500
 * bg-opacity-75` painted a solid block), and themes.css remaps
 * --color-gray-900 to --text-strong, which is near-white under the dark theme
 * and hazes the page rather than dimming it. --bg-darker is dark in every
 * theme, which is what a scrim actually needs. */
.modal-scrim {
  background: color-mix(in srgb, var(--bg-darker, #132f1e) 65%, transparent);
}

/* Small sidebar icon button (search, kebab) */
.sidebar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #6b7280;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1f2d3d;
}

/* Stripe-style search trigger */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  color: #9ca3af;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 240px;
}
.search-trigger:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.search-trigger kbd {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #9ca3af;
  background: #e5e7eb;
  border-radius: 4px;
}

/* Header icon buttons */
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #6b7280;
  transition: all 0.15s ease;
}
.header-icon-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Sidebar section label */
.nav-section-label {
  padding: 0 12px;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hc-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}