/* ============================================================
   PlayPulse — Design Uplift 2026
   File: style_uplift.css
   Add AFTER style.css in index.html:
   <link rel="stylesheet" href="style_uplift.css">
   ============================================================ */

/* ── FONT ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ── TOKENS ────────────────────────────────────────────────── */
:root {
  --navy:       #0F1B2D;
  --navy-mid:   #162236;
  --navy-light: #1E3050;
  --coral:      #FF4F30;
  --coral-soft: #FF6B4A;
  --coral-dim:  rgba(255, 79, 48, 0.12);
  --amber:      #F59E0B;
  --emerald:    #10B981;
  --sky:        #3B82F6;
  --surface:    #FAFAF8;
  --surface-2:  #FFFFFF;
  --border:     #E8E8E4;
  --text-1:     #111827;
  --text-2:     #4B5563;
  --text-3:     #9CA3AF;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --r-sm:       8px;
  --r-md:       12px;
  --r-lg:       16px;
  --r-xl:       20px;
  --transition: 180ms cubic-bezier(.4,0,.2,1);
}

/* ── BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--surface);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── LANDSCAPE GATE (portrait tablets & phones) ───────────── */
#landscape-gate {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 99999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: white;
  text-align: center;
  padding: 32px;
}
#landscape-gate .gate-icon {
  font-size: 56px;
  animation: rotateHint 2s ease-in-out infinite;
}
#landscape-gate h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: white;
}
#landscape-gate p {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  margin: 0;
  max-width: 280px;
}
@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  40%       { transform: rotate(90deg); }
  60%       { transform: rotate(90deg); }
}
@media screen and (orientation: portrait) and (max-width: 1024px) {
  #landscape-gate { display: flex; }
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
#sidebar {
  background: var(--navy) !important;
  width: 15.5rem !important;
  border-right: 1px solid rgba(255,255,255,.04);
  box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Logo area */
#sidebar > div:first-child {
  padding: 1.25rem 1rem 1rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Nav list */
#sidebar ul {
  padding: 0.75rem 0.625rem !important;
  flex: 1;
  space-y: 0 !important;
}

.sidebar-link {
  display: flex !important;
  align-items: center !important;
  padding: 0.65rem 0.875rem !important;
  border-radius: var(--r-sm) !important;
  color: rgba(255,255,255,.55) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
  border-left: none !important;
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}
.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--coral);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transition: transform var(--transition);
}
.sidebar-link:hover {
  background: rgba(255,255,255,.07) !important;
  color: white !important;
}
.sidebar-link:hover::before {
  transform: scaleY(0.6);
}
.sidebar-link.active {
  background: var(--coral-dim) !important;
  color: white !important;
  font-weight: 600 !important;
}
.sidebar-link.active::before {
  transform: scaleY(1) !important;
  box-shadow: 0 0 8px var(--coral);
}
/* Pulse glow on active — the signature element */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 6px var(--coral), 0 0 0 rgba(255,79,48,0); }
  50%       { box-shadow: 0 0 12px var(--coral), 0 0 20px rgba(255,79,48,.2); }
}
.sidebar-link.active::before {
  animation: pulseGlow 2.4s ease-in-out infinite;
}
.sidebar-link i {
  width: 1.125rem;
  margin-right: 0.625rem;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity var(--transition);
}
.sidebar-link.active i,
.sidebar-link:hover i { opacity: 1; }

/* ── MAIN CONTENT CONTAINER ────────────────────────────────── */
@media (min-width: 768px) {
  #main-content-container {
    margin-left: 15.5rem !important;
    width: calc(100% - 15.5rem) !important;
  }
}

/* ── HEADER ────────────────────────────────────────────────── */
header {
  background: rgba(250,250,248,.88) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}
#page-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── CARDS ─────────────────────────────────────────────────── */
#main-content-area > main > div {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border);
}
.bg-white {
  background: var(--surface-2) !important;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
button, .button {
  transition: all var(--transition) !important;
  font-family: 'Inter', sans-serif;
}
/* Kill the old translateY on hover which feels janky at scale */
.bg-blue-600:hover,
.bg-green-600:hover {
  transform: none !important;
  filter: brightness(1.08);
}

/* Primary action buttons — sharper, more confident */
.bg-blue-600  { background: #2563EB !important; }
.bg-green-600 { background: #059669 !important; }
.bg-red-600   { background: #DC2626 !important; }
.bg-purple-600{ background: #7C3AED !important; }
.bg-coral, [class*="coral"] { background: var(--coral) !important; }

/* Consistent border-radius on all pill-shaped buttons */
button[class*="rounded-lg"],
button[class*="rounded-xl"],
button[class*="rounded-full"],
.btn-primary, .btn-cancel {
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Action icon buttons */
.action-btn {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--transition) !important;
}
.action-btn:hover { transform: scale(1.08) !important; }

/* ── FORM INPUTS ───────────────────────────────────────────── */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
select, textarea, .inp {
  border-radius: var(--r-sm) !important;
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .875rem !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
input:focus, select:focus, textarea:focus, .inp:focus {
  border-color: var(--sky) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
  outline: none !important;
}

/* ── TABLES ────────────────────────────────────────────────── */
.table-responsive {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
}
thead.bg-gray-50 th, thead th {
  background: #F8F8F6 !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  padding: 0.625rem 1rem !important;
}
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: #F5F5F2 !important; }
td {
  padding: 0.625rem 1rem !important;
  font-size: .875rem !important;
  border-bottom: 1px solid #F0F0ED;
}
tbody tr:last-child td { border-bottom: none; }

/* ── MODAL SYSTEM ──────────────────────────────────────────── */
#modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#modal-container {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border);
}

/* All module modals */
[id^="modal-"] > div {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border);
}

/* ── STATUS BADGES ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .25rem .625rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-green  { background: #DCFCE7; color: #15803D; }
.badge-red    { background: #FEE2E2; color: #B91C1C; }
.badge-blue   { background: #DBEAFE; color: #1D4ED8; }
.badge-amber  { background: #FEF3C7; color: #92400E; }
.badge-gray   { background: #F3F4F6; color: #374151; }
.badge-coral  { background: var(--coral-dim); color: var(--coral); }

/* ── CAMPS / EVENTS OVERLAY ────────────────────────────────── */
#camps-overlay {
  background: var(--surface) !important;
}
#camps-overlay > div:first-child {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Camp cards */
#camps-grid .bg-white {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
  cursor: pointer;
}
#camps-grid .bg-white:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* Event list cards */
#events-list .bg-white {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  transition: box-shadow var(--transition) !important;
}
#events-list .bg-white:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Detail panels */
#camp-detail-panel,
#event-detail-panel {
  background: var(--surface-2) !important;
  border-left: 1px solid var(--border) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.1) !important;
}

/* ── NOTIFICATIONS / TOASTS ────────────────────────────────── */
#message-box {
  border-radius: var(--r-md) !important;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-md) !important;
}

/* ── DASHBOARD STAT CARDS ──────────────────────────────────── */
.stat-card, [class*="stat"], .metric-card {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
}
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md) !important; }

/* ── ACTIVE CHECK-INS TABLE ROW ACCENT ─────────────────────── */
tbody tr.checkin-active {
  border-left: 3px solid var(--emerald);
}

/* ── PAGINATION ────────────────────────────────────────────── */
.pagination-controls .pagination-nav button {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border) !important;
  transition: all var(--transition) !important;
  font-size: .8rem !important;
}
.pagination-controls .pagination-nav button:hover {
  background: var(--surface) !important;
  border-color: var(--sky) !important;
  color: var(--sky) !important;
}

/* ── KID TAGS ──────────────────────────────────────────────── */
.kid-tag {
  background: #EEF2FF !important;
  color: #4338CA !important;
  border-radius: var(--r-sm) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  padding: .2rem .6rem !important;
}

/* ── FLOATING ACTION BUTTON ────────────────────────────────── */
#btn-camps-fab {
  background: var(--coral) !important;
  box-shadow: 0 4px 20px rgba(255,79,48,.4) !important;
  border-radius: var(--r-lg) !important;
  transition: all var(--transition) !important;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
}
#btn-camps-fab:hover {
  background: var(--coral-soft) !important;
  box-shadow: 0 6px 24px rgba(255,79,48,.5) !important;
  transform: translateY(-2px) scale(1.05) !important;
}
#btn-camps-fab span { display: none !important; } /* Icon only */

/* ── REPORT MODAL ──────────────────────────────────────────── */
#modal-ce-report .bg-gray-50 {
  background: #F8F8F6 !important;
  border-color: var(--border) !important;
}
#rpt-summary > div {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
}
#rpt-table-wrap table {
  font-size: .8125rem !important;
}
#rpt-thead th {
  background: #F8F8F6 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .675rem !important;
  letter-spacing: .06em !important;
}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ── SELECTION ─────────────────────────────────────────────── */
::selection { background: var(--coral-dim); color: var(--coral); }

/* ── FOCUS RING (accessibility) ────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── TABLET LANDSCAPE (768–1024px) ─────────────────────────── */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #sidebar { width: 13rem !important; }
  #main-content-container {
    margin-left: 13rem !important;
    width: calc(100% - 13rem) !important;
  }
  .sidebar-link { padding: .55rem .75rem !important; font-size: .8rem !important; }
  #camp-detail-panel,
  #event-detail-panel { width: 60% !important; }
  td { padding: .5rem .75rem !important; }
}

/* ── MOBILE (portrait blocked, but landscape small phones) ──── */
@media screen and (max-width: 767px) and (orientation: landscape) {
  #sidebar { width: 11rem !important; }
  #main-content-container {
    margin-left: 11rem !important;
    width: calc(100% - 11rem) !important;
  }
  .sidebar-link {
    padding: .45rem .6rem !important;
    font-size: .75rem !important;
  }
  .sidebar-link i { margin-right: .4rem !important; }
  #camp-detail-panel,
  #event-detail-panel { width: 85% !important; }
}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
  #sidebar, header, #btn-camps-fab { display: none !important; }
  #main-content-container { margin-left: 0 !important; width: 100% !important; }
}