/* =========================
   HORIZON THEME
   Royal Blue (primary) + Amber (accent) on Charcoal
   – Drop-in replacement for your current theme tokens
   ========================= */

:root {
  /* Brand */
  --barca-blue: #0b1220;        /* page gradient base (deep charcoal/navy) */
  --barca-red:  #2563eb;        /* PRIMARY now: Royal Blue 600 */
  --barca-gold: #f59e0b;        /* ACCENT now: Amber 500 */

  /* System */
  --text-light: #eef2f7;
  --text-muted: #a6b0bf;
  --panel: #0e1526;             /* panels */
  --card:  #111a2e;             /* cards */
  --line: rgba(255,255,255,.08);
  --shadow-1: 0 6px 18px rgba(0,0,0,.25);
  --shadow-2: 0 10px 30px rgba(0,0,0,.35);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Fonts */
  --font-heading: 'Montserrat Alternates', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

/* ===== Sticky footer foundation ===== */
html, body { height: 100%; }

body {
  /* sticky footer mechanics */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* existing base */
  margin: 0;
  font-family: var(--font-body);
  background: radial-gradient(1200px 800px at 20% -10%,
              #0a1c2e 0%,
              #1a0c3c 40%,
              #000000 70%,
              #0c0c2e 100%) fixed;
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Any main wrapper should flex-fill */
main, .site-main { flex: 1 0 auto; }

/* Footer will stick at the bottom when content is short */
footer { margin-top: auto; width: 100%; }

/* Base links/buttons */
a{
  color:var(--barca-gold);
  text-decoration:none;
  transition:color .25s var(--ease), opacity .25s var(--ease);
}
a:hover{ color:#ffb547 }

button, .btn{
  background:var(--barca-red);
  color:#eaf2ff;
  border:none;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  font-weight:800;
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .25s var(--ease);
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
button:hover,.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
button:active,.btn:active{ transform:translateY(0) scale(.99) }
button:focus-visible,.btn:focus-visible,.nav-link:focus-visible,.nav-button:focus-visible{
  outline:2px solid var(--barca-gold);
  outline-offset:2px;
}

/* Button variants */
.btn-primary{
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#eaf2ff;
}
.btn-ghost{
  background:transparent; color:#e5e7eb; border:1px solid var(--line)
}
.btn-ghost:hover{ background:rgba(255,255,255,.06) }
.btn-danger{ background:#e11d48; color:#fff }

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}

/* ================= Header & Footer ================= */
header, footer{
  background: rgba(15,23,42,.78); /* slate/charcoal glass */
  backdrop-filter: blur(6px);
  text-align:center; padding:14px;
  font-family:var(--font-heading); color:#fff;
}

/* ================= NAVBAR ================= */
.navbar{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, rgba(13,22,40,.92), rgba(13,22,40,.86));
  backdrop-filter: blur(10px);
  color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.navbar-container{
  max-width:1400px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.navbar-brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-size:1.6rem; font-weight:900; letter-spacing:.2px;
  font-family:var(--font-heading); transition:transform .2s var(--ease);
}
.navbar-brand:hover{ transform:translateY(-1px) }
.logo-icon{ font-size:1.8rem; color:#60a5fa }
.navbar-links{ display:flex; align-items:center; gap:12px }
.navbar-auth{ display:flex; align-items:center; gap:10px }
.nav-link,.nav-button{
  color:#e5e7eb; font-weight:700; padding:8px 12px; border-radius:12px; display:flex; align-items:center; gap:8px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .18s var(--ease);
}
.nav-link:hover{ background:rgba(255,255,255,.08) }
.nav-button.login-button{ background:#1d4ed8 }
.nav-button.login-button:hover{ background:#1e40af; transform:translateY(-1px) }
.nav-button.register-button{
  background: linear-gradient(135deg, #f59e0b, #fbbf24); color:#1a1400;
}
.nav-button.register-button:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.navbar-toggle{ display:none; color:#fff; font-size:1.5rem; background:none; border:none }

@media (max-width:768px){
  .navbar-toggle{ display:block }
  .navbar-links{ display:none; width:100%; flex-direction:column; gap:8px; padding:10px 0 }
  .navbar-links.active{ display:flex }
  .navbar-auth{ flex-direction:column; width:100% }
  .nav-link,.nav-button{ width:100%; justify-content:center }
}

/* ============ PROFILE DROPDOWN ============ */
.profile-dropdown{ position:relative; display:inline-block }
.profile-icon{
  display:flex; align-items:center; gap:10px;
  color:#e5e7eb; padding:8px 12px; border-radius:12px; transition:background .25s var(--ease);
  border:1px solid var(--line);
}
.profile-icon:hover{ background: rgba(255,255,255,.06) }
.profile-name{ font-family:var(--font-body) }
.dropdown-content{
  display:none; position:absolute; right:0; min-width:230px;
  background:#0e1526; color:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-2); z-index:100; padding:8px;
}
.dropdown-content a,.dropdown-form{
  color:#e8eef8; padding:10px 12px; display:block; border-radius:10px; font-weight:700
}
.dropdown-content a:hover,.dropdown-item:hover{ background: rgba(37,99,235,.18) }
.dropdown-form{ margin:0 }
.dropdown-item{
  width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  padding:10px 12px; color:#e8eef8; border-radius:10px; font-weight:700;
}
.dropdown-content i{ width:20px; margin-right:8px; text-align:center }
.profile-dropdown:hover .dropdown-content{ display:block }

/* ============== OWNER DASHBOARD ============== */
.owner-dashboard{ max-width:1200px; margin:36px auto; padding:0 20px }
.dashboard-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background: linear-gradient(135deg, #0f1b33 0%, #0d1728 60%);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 22px; margin-bottom:22px; box-shadow:var(--shadow-1);
}
.dashboard-header h2{
  color:#fff; font-size:1.8rem; font-weight:900; display:flex; align-items:center; gap:12px
}
.dashboard-header h2 i{ color:#60a5fa }

.stadium-info{ background:var(--card); padding:22px; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-1) }
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px }
.info-item{ display:flex; align-items:center; gap:12px; background:#0e1526; border:1px solid var(--line); border-radius:12px; padding:12px }
.info-icon{ font-size:1.35rem; color:#93c5fd }
.info-label{ color:var(--text-muted); font-weight:800; margin-bottom:2px }
.info-value{ color:#fff; font-weight:900 }

.status-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); font-weight:900; font-size:.9rem
}
.status-active{ background: rgba(16,185,129,.14); color:#a7f3d0 }
.status-inactive{ background: rgba(244,63,94,.16); color:#fecdd3 }

.toggle-form{ margin-top:16px }
.toggle-button{
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color:#eaf2ff; border-radius:12px; padding:12px 18px; font-weight:900; border:1px solid rgba(37,99,235,.35)
}
.toggle-button:hover{ transform:translateY(-1px) }

.empty-state{
  text-align:center; padding:28px; background:#0e1526; border:1px solid var(--line); border-radius:14px; color:var(--text-muted)
}

.dashboard-buttons{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px; margin-top:20px
}
.dashboard-button{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; border-radius:14px; color:#f8fafc; font-weight:900;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  border:1px solid rgba(37,99,235,.28); box-shadow:var(--shadow-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .25s var(--ease);
}
.dashboard-button:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); filter:saturate(1.05) }
.dashboard-button i{ font-size:1.3rem }

/* ================ TIME SLOTS AREA ================= */
.time-slots-container{ max-width:1200px; margin:0 auto; padding:24px 20px }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1); padding:18px; margin-bottom:22px
}
.card .title{ display:flex; align-items:center; gap:10px; font-weight:900; color:#fff; margin:0 0 6px 0 }
.card .subtitle{ color:var(--text-muted); margin:0 0 10px 0 }

.form-group{ margin-bottom:12px }
.form-group label{ display:block; margin-bottom:6px; font-weight:800; color:#93c5fd }
.form-group input,.form-group select,.form-group textarea{
  width:100%; color:#e5e7eb; background:#0b1324; border:1px solid var(--line); border-radius:12px; padding:10px 12px; outline:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18)
}

.slots-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:16px }
.day-slots{ background:#0e1526; border:1px solid var(--line); border-radius:12px; padding:12px }
.day-slots h4{ margin:0 0 8px 0; color:#fff; font-weight:900 }
.slot-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 0; border-bottom:1px dashed var(--line)
}
.slot-item:last-child{ border-bottom:0 }
.slot-time{ color:#e9ecf6; font-weight:800 }
.btn-generate{ background:#16a34a; color:#eafff5; border-radius:12px }
.btn-delete{ background:#ef4444; color:#fff; border:none; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:800 }

.empty-state{ text-align:center; padding:32px; color:var(--text-muted); border:1px dashed var(--line); border-radius:12px; background:rgba(255,255,255,.03) }

/* =================== ALERTS ==================== */
.alert-danger{
  background:#2b1416; color:#ffe5e7;
  padding:12px 14px; border-radius:12px; margin-bottom:12px;
  border-left:4px solid #dc2626; border:1px solid rgba(220,38,38,.25)
}
.alert-danger i{ color:#ff9aa3; margin-right:8px }

/* =================== BADGES ==================== */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:900;
  background: linear-gradient(135deg, #f59e0b, #fbbf24); color:#1a1400; border:1px solid rgba(0,0,0,.05)
}

/* =============== RESPONSIVE =============== */
@media (max-width:768px){
  .owner-dashboard{ padding:0 14px }
  .dashboard-header h2{ font-size:1.5rem }
  .stadium-info{ padding:16px }
  .card{ padding:16px }
}