/* ===========================
   Poker League – Global Styles
   =========================== */

/* ---- Theme tokens ---- */
:root{
  --bg:#0a0c11;
  --bg-2:#0e1220;
  --text:#e6e6e6;
  --muted:#b8b8b8;
  --accent:#ff2d55;   /* poker red */
  --gold:#ffbc00;     /* poker gold */
  --card:#141927;
  --card-2:#0f1422;
  --border:#1b2134;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Media defaults to prevent overflow on small screens */
img, video { max-width: 100%; height: auto; }
svg { height: auto; }

/* ---- Base / reset ---- */
*{ box-sizing:border-box; }
/* Allow the document to grow beyond the viewport so sticky elements
   remain sticky for the full page scroll length */
html,body{ min-height:100%; }
body{
  margin:0;
  color:var(--text);
  background: linear-gradient(to bottom, var(--bg), var(--bg-2));
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Prevent accidental horizontal scrollbars on mobile */
html, body { overflow-x: hidden; }

/* ---- Links ---- */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- Layout helpers ---- */
.container{ max-width:1400px; margin:0 auto; padding:24px 20px; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Header grid aligned to global three-column frame */
.site-header-grid{
  display:grid;
  grid-template-columns: 210px minmax(0,1fr) 330px; /* match .site-three */
  grid-gap:16px;
  gap:16px;
  align-items:center;
  padding:10px 20px;
}
@media (max-width:1200px){
  .site-header-grid{ grid-template-columns: 190px minmax(0,1fr) 310px; }
}
@media (max-width:1024px){
  .site-header-grid{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
  }
  /* Hide nav-center suits and nav, show nav in mobile drawer instead */
  .site-header-grid > .row .nav-center{
    display: none !important;
  }
  /* Keep nav visible but hide its children by default */
  .site-header-grid > .row .nav{
    display: flex !important;
    gap: 8px;
  }
  .site-header-grid > .row .nav > *{
    display: none !important;
  }
  /* EXCEPT: Show login/join buttons when not logged in on mobile */
  .site-header-grid > .row .nav .mobile-visible-link{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 32px;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  /* Login button - subtle style */
  .site-header-grid > .row .nav .mobile-visible-link:not(.cta){
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
  }

  .site-header-grid > .row .nav .mobile-visible-link:not(.cta):active{
    background: rgba(255, 255, 255, 0.1);
  }

  /* Join button - gold gradient CTA */
  .site-header-grid > .row .nav .mobile-visible-link.cta{
    background: linear-gradient(135deg, var(--accent), var(--gold));
    color: black;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255, 188, 0, 0.3);
  }

  .site-header-grid > .row .nav .mobile-visible-link.cta:active{
    filter: brightness(1.1);
  }

  /* Make row take center space with logo */
  .site-header-grid > .row{
    display: flex !important;
    flex: 1 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 8px;
  }

  /* Hamburger on the left */
  .site-header-grid .header-left{
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Logo centered on top */
  .logo-stack{
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Nav buttons row below logo */
  .site-header-grid > .row .nav{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }
}
/* Compact header layout on narrow phones */
@media (max-width:700px){
  .site-header-grid{
    padding: 12px 16px;
    gap: 10px;
  }
  .site-header-grid .row{
    width: 100%;
    justify-content: space-between;
  }
}

/* ---- Global three-column frame (all pages) ---- */
.site-three{
  display:grid;
  grid-template-columns: 210px minmax(0,1fr) 330px;
  grid-gap: 16px;
  gap: 16px;
  align-items:start;
  width:100%;
  padding: 16px 20px 24px;
  /* Ensure the overall content area fills the viewport below the sticky header */
  min-height: calc(100vh - var(--header-h));
}
.site-rail-left, .site-rail-right, .site-center{ min-width:0; }
.site-rail-left{ position: -webkit-sticky; position: sticky; top: calc(var(--header-h)); padding-top: 6px; height: -moz-fit-content; height: fit-content; }
.site-rail-right{ position: -webkit-sticky; position: sticky; top: calc(var(--header-h)); padding-top: 6px; height: -moz-fit-content; height: fit-content; }
.site-rail-left, .site-rail-right{ padding-left: 0; padding-right: 0; }
.site-rail-left > *, .site-rail-right > *{ margin: 0; max-width: 100%; box-sizing: border-box; }
.site-center{ display:flex; flex-direction:column; /* make footer stick to bottom */
  position: relative; z-index: 2; /* ensure center content stays above sticky rails */
  /* Account for the grid container's vertical padding (16 top + 24 bottom = 40) */
  min-height: calc(100vh - var(--header-h) - 40px);
}
.site-center > main{ flex:1 0 auto; }
.site-center > .admin-card, .site-center > section, .site-center > div{ width:100%; }

@media (max-width: 1200px){
  .site-three{ grid-template-columns: 190px minmax(0,1fr) 310px; }
}
@media (max-width: 1024px){
  .site-three{ grid-template-columns: 1fr; }
  .site-rail-left{ order: 2; position: static; }
  .site-center{ order: 1; }
  .site-rail-right{ order: 3; position: static; display: none; } /* Hide right rail on mobile */
}

/* ---- Dashboard three-pane layout ---- */
.dashboard-three{
  display:grid;
  grid-template-columns: 280px 1fr 420px;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}
.pane-left, .pane-center, .pane-right{ min-width: 0; }
.pane-center > .admin-card { width: 100%; }

@media (max-width: 1200px){
  .dashboard-three{ grid-template-columns: 240px 1fr 360px; }
}
@media (max-width: 1024px){
  .dashboard-three{ grid-template-columns: 1fr; }
  .pane-right{ order: 1; }
  .pane-center{ order: 2; }
  .pane-left{ order: 3; }
}

/* ---- Header ---- */
.site-header{
  /* Keep the main bar locked to the top while scrolling */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100; /* above content/toolbars */
  background:linear-gradient(to right, rgba(10,12,17,.92), rgba(20,25,39,.92));
  border-bottom:1px solid var(--border);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.logo-link{ display:inline-flex; align-items:center; }
.logo-svg{ width: clamp(220px, 50vw, 320px); height:auto; }
.logo-stack{ display:flex; align-items:center; gap:12px; }
.logo-stack > :not(.logo-link){ display:none !important; }
.brand-sub{ font-weight:900; font-size:18px; letter-spacing:.8px; color:#eaeaea; }

.nav a{ margin-left:18px; color:var(--text); }
.menu-btn{ display:none; }
.header-left{
  display:flex;
  align-items:center;
  gap: 12px;
}

@media (max-width: 1024px){
  .header-left{
    gap: 12px;
    position: relative;
    flex-direction: row;
    align-items: center;
  }
  .menu-btn{
    position: static;
    margin: 0;
    z-index: 120;
    flex-shrink: 0;
  }
}
.nav a.cta{
  background:linear-gradient(135deg, var(--accent), var(--gold));
  color:black; padding:10px 14px; border-radius:12px; font-weight:800;
  box-shadow:0 0 25px rgba(255,45,85,.25);
}
.nav a.cta:hover{ filter:brightness(1.05); }

/* Center suits pill */
.nav-center{ display:flex; align-items:center; justify-content:center; gap:16px; flex:1 1; }
.suits-bar{
  display:flex; gap:20px; padding:12px 22px; border-radius:999px;
  background:linear-gradient(180deg, rgba(20,25,39,.85), rgba(14,18,32,.85));
  border:1px solid var(--border); box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.suit{ font-size:30px; }
.suit.red{ color:var(--accent); }
.suit.gold{ color:var(--gold); }
.suit.silver{ color:#cfd8ff; }

/* ---- Hero ---- */
.hero{ display:grid; grid-gap:10px; gap:10px; padding:38px 0 8px; text-align:center; }
.hero h1{ margin:0; font-size:48px; letter-spacing:.6px; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.hero p{ color:var(--muted); margin:6px 0 0; }

/* ---- Cards / grids ---- */
.grid{ display:grid; grid-gap:18px; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); margin-top:22px; }
.card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
  scroll-margin-top: var(--header-h, 72px);
  /* Render heavy cards lazily where supported */
  content-visibility: auto;
  contain-intrinsic-size: 300px;
  /* Prevent overflow */
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 700px){
  .card{
    border-radius: 14px;
    padding: 16px;
  }
  .grid{
    gap: 14px;
    grid-template-columns: 1fr;
  }
}
.card:target{ outline:1px solid rgba(255,188,0,.45); box-shadow:0 0 0 2px rgba(255,188,0,.25) inset; }
.card h3{ margin:0 0 8px; }
.card p{ margin:0; color:var(--muted); }

/* Section title */
.section-title{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin:26px 0 10px; font-size:20px; letter-spacing:.3px;
}
.section-title .dot{
  width:10px; height:10px; border-radius:2px;
  background:linear-gradient(135deg, var(--accent), var(--gold));
  box-shadow:0 0 12px rgba(255,188,0,.45);
}

/* ---- Forms ---- */
.input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0c1120;
  color:var(--text);
  font-size: 16px; /* Prevents zoom on iOS */
}
.input-sm{ padding:.35rem .45rem; font-size:.9rem; }
.input:focus{ outline:none; border-color:rgba(255,255,255,.35); }
.label{ color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.2px; margin:4px 2px 2px; }

/* Privacy Radio Group */
.privacy-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacy-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.privacy-radio-option:hover {
  border-color: var(--gold);
  background: rgba(255, 188, 0, 0.05);
}

.privacy-radio-option input[type="radio"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--gold);
}

.privacy-radio-content {
  flex: 1 1;
}

.privacy-radio-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.privacy-radio-description {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Selected state */
.privacy-radio-option:has(input[type="radio"]:checked) {
  border-color: var(--gold);
  background: rgba(255, 188, 0, 0.08);
}

@media (max-width: 700px){
  .input{
    padding: 14px 16px;
    font-size: 16px;
  }
}

/* Lighter calendar icon for date/time pickers */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  /* Recolor to league gold */
  filter: invert(74%) sepia(86%) saturate(600%) hue-rotate(0deg) brightness(105%) contrast(105%);
  opacity: 1;
  cursor: pointer;
  /* Subtle gold background capsule for contrast on dark inputs */
  background-color: rgba(255,188,0,.18);
  border-radius: 6px;
  padding: 4px;
}
/* Firefox date icon color cannot be styled directly; keep input contrast high */

/* ---- Buttons (site-wide yellow CTA) ---- */
.btn{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  border:0;
  cursor:pointer;
  font-weight:800;
  border-radius:12px;
  padding:12px 16px;
  background:linear-gradient(135deg, var(--accent), var(--gold));
  color:black;
  box-shadow:0 0 20px rgba(255,45,85,.25);
  touch-action: manipulation; /* Prevents double-tap zoom */
}
.btn:hover{ filter:brightness(1.05); }
.btn-sm{ padding:10px 14px; font-size:.9rem; border-radius:10px; font-weight:800; }
.btn-xs{ padding:8px 12px; font-size:.85rem; border-radius:10px; }
.btn.block{ display:block; width:100%; text-align:center; }

@media (max-width: 700px){
  .btn{
    padding: 14px 18px;
    min-height: 44px; /* Apple's recommended minimum touch target */
  }
  .btn-sm{
    padding: 12px 16px;
    min-height: 40px;
  }
  .btn-xs{
    padding: 10px 14px;
    min-height: 38px;
  }
}

/* Subtle button variants for admin UIs */
.btn-ghost{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:var(--text); padding:10px 12px; border-radius:10px; font-weight:700;
}
.btn-ghost:hover{ background:rgba(255,255,255,.06); }
.btn-danger{ /* keep existing alias */ }

/* Map earlier admin helpers to yellow so everything matches */
.adm-btn, .adm-btn-yellow{ composes: btn; } /* (non-standard hint) */
.adm-btn, .adm-btn-yellow{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; border:0; cursor:pointer; font-weight:800; border-radius:12px;
  padding:12px 14px; background:linear-gradient(135deg, var(--accent), var(--gold)); color:black;
  box-shadow:0 0 20px rgba(255,45,85,.25);
}
.adm-btn-ghost{ padding:.45rem .7rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--text); }
.adm-btn-danger{
  padding:.45rem .7rem; border-radius:.6rem;
  background:linear-gradient(180deg, #ef4444, #b91c1c); border:none; color:#fff; font-weight:600;
}

/* ---- Accordions ---- */
details.accordion{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:16px; padding:10px 14px; box-shadow:var(--shadow);
}
details.accordion > summary{ cursor:pointer; font-weight:800; list-style:none; outline:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
details.accordion > summary::-webkit-details-marker{ display:none; }
.rule-list{ margin:8px 0 0; padding-left:18px; color:var(--muted); }
.rule-list li{ margin:6px 0; }

/* ---- Footer ---- */
.site-footer{
  /* Push footer to the bottom when content is short */
  margin-top:auto; padding:18px 0; color:var(--muted);
  border-top:1px solid var(--border); text-align:center;
}

/* ---- Responsive tweaks ---- */
@media (max-width:700px){
  .brand-sub{ display:none; }
  /* Let nav wrap and center to avoid overflow */
  .nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .nav a{
    margin-left:0;
    padding: 8px 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .nav a.cta{
    padding: 10px 16px;
    min-height: 44px;
  }
  .linklike-btn.logout-btn{
    margin-left: 0;
    padding: 8px 12px;
    min-height: 40px;
  }
  /* Make the suits pill smaller so it fits comfortably */
  .suits-bar{ gap:12px; padding:8px 14px; }
  .suit{ font-size:22px; }
  .hero h1{ font-size:36px; }
  /* Tighter tables on small screens */
  .admin-table th, .admin-table td{ padding:.5rem .5rem; }
  .events-table .loc-thumb{ width:64px; height:44px; }
}

/* =========================
   Mobile-first refinements
   ========================= */
@media (max-width: 820px){
  /* Hide decorative suits pill on small tablets/phones */
  .nav-center{ display:none; }
}

@media (max-width: 700px){
  /* Header compaction - already handled above */
  .nav a{ font-size:.95rem; }

  /* Global three-column → single stack with better spacing */
  .site-three{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .site-rail-left{
    position: static;
    padding-top: 0;
    order: 2;
  }
  .site-rail-right{
    position: static;
    padding-top: 0;
    order: 3;
  }
  .site-center{
    order: 1;
    min-height: auto;
  }

  /* Sidebar cards full width */
  .admin-side{
    width: auto;
    max-width: 100%;
    padding: 14px;
    border-radius: 12px;
  }
  .admin-side .side-link{
    padding: 12px 14px;
    font-size: .95rem;
  }
  .side-collapsible summary{
    padding: 10px 4px;
  }

  /* Admin layout: stack with better spacing */
  .admin-wrap{
    display: block;
  }
  .admin-main{
    padding: 0;
  }
  .admin-card{
    margin-bottom: 16px;
    padding: 18px 16px;
  }
  .admin-h1{
    font-size: 1.5rem;
    margin-bottom: .75rem;
  }

  /* Tables: better mobile scrolling */
  .table-wrap{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .admin-table{
    table-layout: auto;
    font-size: .9rem;
  }
  .admin-table th,
  .admin-table td{
    white-space: normal;
    padding: .6rem .5rem;
  }

  /* Events/User tables: relax fixed columns and wrap content */
  .events-table .col-starts{ width: auto; }
  .events-table .col-title{ width: auto; }
  .events-table .col-location{ width: auto; }
  .events-table .col-rsvp{ width: auto; min-width: 0; }
  .events-table td{ word-break: break-word; }
  .events-table .loc-wrap{ flex-wrap: wrap; gap: 8px; }
  .events-table .col-rsvp .flex{ flex-wrap: wrap; gap: 8px; }
  .btn.btn-xs{ padding: 8px 10px; font-size: .85rem; }

  /* Chat panel height on phones */
  .admin-card .chat-panel{ height: 65vh; max-height: 500px; }
}

/* Tiny phones */
@media (max-width: 360px){
  .nav a{ font-size:.88rem; }
  .logo-svg{ width: 150px; }
}

/* =========================
   Mobile menu drawer (uses .menu-open on <html>)
   ========================= */
@media (max-width: 1024px){
  .menu-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 14px;
  }
  /* Drawer defaults to hidden off-canvas */
  .site-rail-left{
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease;
    will-change: transform;
  }
  html:not(.menu-open) .site-rail-left{
    position: fixed;
    left: 0;
    right: auto;
    width: 85%;
    max-width: 320px;
    top: var(--header-h);
    bottom: 0;
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    z-index: 110;
    padding: 16px 12px 24px;
  }
  html.menu-open .site-rail-left{
    position: fixed;
    left: 0;
    right: auto;
    width: 85%;
    max-width: 320px;
    top: var(--header-h);
    bottom: 0;
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border-right: 1px solid var(--border);
    transform: translateX(0);
    z-index: 110;
    box-shadow: 8px 0 28px rgba(0,0,0,.5);
    padding: 16px 12px 24px;
  }
  /* Backdrop attached to body via portal */
  .mobile-backdrop{
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(0,0,0,.6);
    z-index: 100;
    animation: fadeIn .2s ease;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* Prevent body scroll when open */
  html.menu-open, html.menu-open body{ overflow: hidden; }

/* =========================
   Fluid type scale & buttons
   ========================= */
h1, .admin-h1{ font-size: clamp(1.5rem, 2.2vw + 1rem, 2rem); }
.hero h1{ font-size: clamp(1.8rem, 4.5vw + 1rem, 3rem); }
.btn{ font-size: clamp(.95rem, .6vw + .7rem, 1rem); }
.btn-sm{ font-size: clamp(.85rem, .5vw + .6rem, .95rem); }
.btn-xs{ font-size: clamp(.78rem, .5vw + .55rem, .9rem); }

/* =========================
   Responsive tables → keep as tables, just allow scroll
   ========================= */
@media (max-width: 640px){
  /* Remove the card transformation - keep tables as tables */
  .events-table, .standings-table{
    display: table;
    width: 100%;
    min-width: 600px; /* Ensure table maintains minimum width for readability */
  }
  .events-table thead, .standings-table thead{ display: table-header-group; }
  .events-table tr, .standings-table tr{ display: table-row; }
  .events-table td, .standings-table td{ display: table-cell; }
  .events-table .loc-thumb{ width:64px; height:44px; }
}
}

/* ---- Link-like buttons / misc ---- */
.linklike-btn{ background:none; border:0; color:var(--text); cursor:pointer; font:inherit; }
.linklike-btn:hover{ text-decoration:underline; }
.logout-btn{ margin-left:18px; }

/* ---- Utility helpers (minimal Tailwind-like) ---- */
/* spacing stacks */
.space-y-6 > * + *{ margin-top:1.5rem; }
.space-x-2 > * + *{ margin-left:.5rem; }

/* display + flex alignment */
.flex{ display:flex; }
.items-center{ align-items:center; }
.items-end{ align-items:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-end{ justify-content:flex-end; }
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-4{ gap:1rem; }

/* width */
.w-full{ width:100%; }

/* grid 12-col + spans (used in admin games form) */
.grid-cols-12{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); margin-top:0; }
.col-span-1{ grid-column: span 1 / span 1; }
.col-span-2{ grid-column: span 2 / span 2; }
.col-span-3{ grid-column: span 3 / span 3; }
.col-span-4{ grid-column: span 4 / span 4; }
.col-span-5{ grid-column: span 5 / span 5; }
.col-span-6{ grid-column: span 6 / span 6; }
.col-span-7{ grid-column: span 7 / span 7; }
.col-span-8{ grid-column: span 8 / span 8; }
.col-span-9{ grid-column: span 9 / span 9; }
.col-span-10{ grid-column: span 10 / span 10; }
.col-span-11{ grid-column: span 11 / span 11; }
.col-span-12{ grid-column: span 12 / span 12; }

/* text + whitespace + opacity */
.text-center{ text-align:center; }
.text-sm{ font-size:.9rem; }
.opacity-70{ opacity:.7; }
.opacity-80{ opacity:.8; }
.whitespace-pre-wrap{ white-space:pre-wrap; }
.py-8{ padding-top:2rem; padding-bottom:2rem; }

/* button variants used in admin tools */
.btn.primary{ /* same style as .btn to avoid missing class */ }

/* ===========================
   Admin area
   =========================== */

/* Layout (sidebar + main) */
.admin-main{ display:flex; flex-direction:column; gap:16px; width:100%; }
.admin-sidebar{ width:220px; flex-shrink:0; }
.admin-card{
  background: rgba(20,20,28,.35);
  border: 1px solid rgba(63,63,70,.7);
  border-radius:16px;
  padding:1.25rem;
  max-width: 100%;
  overflow: hidden;
}
.admin-card-link, .admin-card-link *{ color:inherit; text-decoration:none; }
.admin-card-link.active{ font-weight:600; }

/* Page header / crumbs */
.admin-breadcrumbs{
  display:flex; gap:.5rem; align-items:center;
  font-size:.9rem; opacity:.9; margin-bottom:.25rem;
}
.admin-breadcrumbs .crumb{ text-decoration:none; }
.admin-breadcrumbs .crumb.active{ font-weight:600; }

/* Table + badges */
.table-wrap{ width:100%; overflow:auto; }
.table{ width:100%; border-collapse:collapse; font-size:.925rem; }
.table th, .table td{ padding:.6rem .5rem; vertical-align:top; }
.table thead th{ opacity:.8; font-weight:600; border-bottom:1px solid rgba(255,255,255,.12); }
.table tbody tr{ border-bottom:1px solid rgba(255,255,255,.06); }

.badge{
  font-size:.75rem; padding:.15rem .5rem; border-radius:9999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.badge.gold{
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: black;
  border: 0;
  padding: 0 .45rem;
  min-width: 1.25rem;
  text-align: center;
  font-weight: 800;
}
.badge.ok{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.35); }
.badge.muted{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }

/* Toast */
.toast{
  background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.15);
  padding:.5rem .75rem; border-radius:.6rem; font-size:.9rem;
}
/* Top-right floating toast (outside cards) */
.toast-fixed{ position:fixed; top:18px; right:22px; z-index:9999; }
.toast.success{ border-color: rgba(34,197,94,.35); }
.toast.warn{ border-color: #5b4b18; }
.toast.error{ border-color: #7a2a2a; }

/* Simple modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9998; }
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.modal-card{
  /* Smaller, elegant dialog with widely-supported sizing */
  width:100%;
  max-width:520px;
  max-height:85vh;
  overflow:auto;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  box-sizing:border-box;
}
.modal-title{ font-weight:800; margin:0 0 10px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }

@media (max-width: 700px){
  .modal{
    padding: 12px;
    align-items: flex-end;
  }
  .modal-card{
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
  }
  .modal-actions{
    flex-direction: column-reverse;
    gap: 10px;
  }
  .modal-actions .btn{
    width: 100%;
  }
}

/* Address lookup suggestion list */
.addr-suggest{ margin-top:6px; border:1px solid var(--border); border-radius:10px; background:#0c1120; max-height:160px; overflow:auto; }
.addr-suggest-item{ padding:8px 10px; cursor:pointer; }
.addr-suggest-item:hover{ background:rgba(255,255,255,.06); }
\r\n/* Venues table sizing: 6 columns (cb, name, address, notes, status, actions) */\r\n.venues-table{ table-layout:fixed; width:100%; }\r\n.venues-table th:first-child, .venues-table td:first-child{ width:34px; }\r\n.venues-table th:nth-child(2), .venues-table td:nth-child(2){ width:18ch; }\r\n.venues-table th:nth-child(3), .venues-table td:nth-child(3){ width:auto; }\r\n.venues-table th:nth-child(4), .venues-table td:nth-child(4){ width:auto; }\r\n.venues-table th:nth-child(5), .venues-table td:nth-child(5){ width:9ch; white-space:nowrap; }\r\n.venues-table th:nth-child(6), .venues-table td:nth-child(6){ width:200px; }\r\n.venues-table td{ overflow:hidden; text-overflow:ellipsis; }\r\n
/* Toggle switch (for future) */
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; cursor:pointer; inset:0;
  background:#3a415a; border-radius:999px; transition:.2s ease;
  box-shadow: inset 0 0 0 1px var(--border);
}
.switch .slider:before{
  content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s ease;
}
.switch input:checked + .slider{
  background:linear-gradient(90deg,#ff2d55,#ffbc00);
  box-shadow: inset 0 0 0 1px rgba(255,188,0,.35);
}
.switch input:checked + .slider:before{ transform:translateX(20px); }

/* Alerts */
.alert{ border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0 18px; }
.alert .alert-title{ font-weight:800; margin-bottom:6px; }
.alert .alert-detail{ color:var(--muted); margin-bottom:12px; }
.alert .alert-actions{ margin-top:6px; }
.alert.warn{ background:#241f10; border-color:#5b4b18; }
.alert.danger{ background:#2a1216; border-color:#7a2a2a; }
.alert.info{
  background: linear-gradient(135deg, rgba(16,32,51,0.95), rgba(20,40,60,0.9));
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

/* Mobile announcements banner - hidden on desktop */
.mobile-announcements-banner{
  display: none;
}

@media (max-width: 1024px){
  .mobile-announcements-banner{
    display: block;
    margin-bottom: 16px;
  }
  .mobile-announcements-banner .alert{
    animation: slideInDown 0.4s ease;
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Success (submission) */
.alert.success{
  /* Success aligned to site palette (accent/gold) */
  background:linear-gradient(180deg, rgba(20,25,39,.55), rgba(14,18,32,.55));
  border-color: rgba(255,188,0,.35); /* gold accent border */
  box-shadow: 0 0 0 1px rgba(255,188,0,.06) inset;
}
.alert.success .alert-title{ color: var(--gold); }
.alert.success .alert-actions{ display:flex; gap:.5rem; }

/* =========================
   HOTFIX — Admin sidebar + buttons + header
   ========================= */

/* 1) Restore Admin layout used by /admin landing */
.admin-wrap{
  display:grid;
  grid-template-columns:240px 1fr;
  grid-gap:18px;
  gap:18px;
}
.admin-side{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  height:max-content;
}
.side-group{ display:grid; grid-gap:8px; gap:8px; margin-top:8px; }
.side-title{ font-weight:900; color:#eaeaea; margin-bottom:6px; }
.side-link{ display:block; padding:8px 10px; border-radius:10px; color:var(--text); }
.side-link:hover{ background:#12182a; text-decoration: none; }
.side-link.active{ background:#0f1527; outline:1px solid var(--border); }

/* Mobile/Desktop visibility toggles */
.mobile-only-nav{
  display: none;
}
.desktop-only-chat{
  display: block;
}

@media (max-width: 1024px){
  .mobile-only-nav{
    display: block;
  }
  .desktop-only-chat{
    display: none !important;
  }
  /* Make chat panel full-screen friendly on mobile */
  .chat-page-card{
    padding: 12px;
    min-height: calc(100vh - 180px);
  }
  .chat-page-card .admin-h1{
    margin-bottom: 12px;
  }
  .chat-page-card .chat-panel > aside > .admin-card{
    height: calc(100vh - 280px) !important;
    min-height: 500px;
  }
}

/* Chat panel mobile adjustments */
@media (max-width: 700px){
  .chat-page-card{
    padding: 10px;
    min-height: calc(100vh - 160px);
  }
  .chat-page-card .chat-panel > aside > .admin-card{
    height: calc(100vh - 240px) !important;
    min-height: 450px;
  }
}

/* existing collapsible patterns */

/* --- Admin global spacing improvements --- */
/* Admin page heading */
.admin-h1{ margin:0; font-size:1.5rem; font-weight:800; letter-spacing:.2px; }

/* Gentle spacing between stacked blocks */
.admin-main > * + *{ margin-top:.5rem; }

/* Space between collapsible groups in sidebar */
.admin-side details + details{ margin-top:10px; }

/* Toolbar + groups */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; margin-bottom:8px;
}
.btn-group{ display:flex; align-items:center; gap:8px; }
.toolbar .search{ max-width:280px; }

/* Admin table spacing */
.admin-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.925rem; table-layout:auto; }
.admin-table th, .admin-table td{ padding:12px 14px; vertical-align:top; }
.admin-table thead th{
  background: rgba(255,255,255,.02);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity:.9; font-weight:700; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.12);
}
.admin-table tbody tr{ border-bottom:1px solid rgba(255,255,255,.06); }
.admin-table tbody tr:nth-child(odd){ background: rgba(255,255,255,.015); }
.admin-table tbody tr:hover{ background: rgba(255,255,255,.03); }
.admin-table tbody tr.row-selected{ background: rgba(255,188,0,.06); }

/* Users table column sizing for stability */
.users-table{ table-layout:fixed; }
.users-table th:first-child, .users-table td:first-child{ width:34px; }
.users-table th:nth-child(2), .users-table td:nth-child(2){ width:14ch; }
.users-table th:nth-child(3), .users-table td:nth-child(3){ width:18ch; }
.users-table th:nth-child(4), .users-table td:nth-child(4){ width:28ch; }
.users-table th:nth-child(5), .users-table td:nth-child(5){ width:12ch; }
.users-table th:nth-child(6), .users-table td:nth-child(6){ width:8ch; }
.users-table th:nth-child(7), .users-table td:nth-child(7){ width:8ch; }
.users-table th:nth-child(8), .users-table td:nth-child(8){ width:10ch; }
.users-table th:nth-child(9), .users-table td:nth-child(9){ width:6ch; }
.users-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Games table column sizing + description clamp */
.games-table{ table-layout:auto; }
.games-table th:first-child, .games-table td:first-child{ width:28px; }
.games-table th:nth-child(7), .games-table td:nth-child(7){ width:220px; }
/* override any earlier widths to allow natural sizing */
.games-table th:nth-child(2), .games-table td:nth-child(2),
.games-table th:nth-child(3), .games-table td:nth-child(3),
.games-table th:nth-child(4), .games-table td:nth-child(4),
.games-table th:nth-child(5), .games-table td:nth-child(5),
.games-table th:nth-child(6), .games-table td:nth-child(6){ width:auto !important; }
.games-table td{ overflow:hidden; text-overflow:ellipsis; }
.truncate-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Keep status badges on a single line */
.badge{ white-space:nowrap; }

/* Destructive button variant */
.btn.danger{
  background:linear-gradient(180deg, #ef4444, #b91c1c);
  color:#fff; box-shadow:0 0 18px rgba(239,68,68,.25);
}
.side-collapsible summary{
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  padding:6px 2px;
  color:#eaeaea;
  font-weight:900;
  min-height: 40px; /* Better touch target */
}
.side-collapsible summary::-webkit-details-marker{ display:none; }
.side-collapsible .arrow{
  display:inline-block;
  width:8px;
  height:8px;
  border:2px solid #cfd8ff;
  border-left:0;
  border-top:0;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.side-collapsible[open] .arrow{ transform: rotate(225deg); }

@media (max-width: 700px){
  .side-collapsible summary{
    padding: 10px 6px;
    min-height: 44px;
  }
  .side-collapsible .arrow{
    width: 10px;
    height: 10px;
  }
}

/* 2) Keep Games page layout working too (sidebar + main) */
.admin-main{ display:flex; flex-direction:column; gap:16px; width:100%; } /* unified */
.admin-sidebar{ width:220px; flex-shrink:0; }

/* 3) Canonical yellow button across site (restore) */
.btn{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; border:0; cursor:pointer; font-weight:800; border-radius:12px;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--accent), var(--gold));
  color:black;
  box-shadow:0 0 20px rgba(255,45,85,.25);
}
.btn:hover{ filter:brightness(1.05); }
.btn.block{ display:block; width:100%; text-align:center; }

/* Map admin helpers to the same yellow look so pages stay consistent */
.adm-btn, .adm-btn-yellow{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; border:0; cursor:pointer; font-weight:800; border-radius:12px;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--accent), var(--gold));
  color:black;
  box-shadow:0 0 20px rgba(255,45,85,.25);
}
.adm-btn-ghost{
  padding:.45rem .7rem; border-radius:.6rem;
  border:1px solid rgba(255,255,255,.15);
  background:transparent; color:var(--text);
}
.adm-btn-danger{
  padding:.45rem .7rem; border-radius:.6rem;
  background:linear-gradient(180deg, #ef4444, #b91c1c);
  border:none; color:#fff; font-weight:600;
}

/* 4) Breadcrumb tidy (consistent weight/spacing) */
.admin-breadcrumbs{
  display:flex; gap:.5rem; align-items:center;
  font-size:.9rem; opacity:.9; margin-bottom:.25rem;
}
.admin-breadcrumbs .crumb{ text-decoration:none; color:var(--text); }
.admin-breadcrumbs .crumb.active{ font-weight:600; }

/* 5) Tables/badges (kept, but ensure present) */
.table-wrap{ width:100%; overflow:auto; }
.table{ width:100%; border-collapse:collapse; font-size:.925rem; }
.table th, .table td{ padding:.6rem .5rem; vertical-align:top; }
.table thead th{ opacity:.8; font-weight:600; border-bottom:1px solid rgba(255,255,255,.12); }
.table tbody tr{ border-bottom:1px solid rgba(255,255,255,.06); }

.badge{
  font-size:.75rem; padding:.15rem .5rem; border-radius:9999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.badge.ok{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.35); }
.badge.muted{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }

/* ==========================================================
   Poker League — Professional Admin Layout v2
   ========================================================== */

.admin-wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  gap: 16px;
  width: 100%;
  min-height: calc(100vh - 120px);
  padding: 0; /* container already provides padding */
  box-sizing: border-box;
}
.admin-wrap:has(.admin-side) {
  grid-template-columns: 240px 1fr;
}

/* Sidebar */
.admin-side {
  background: transparent;
  padding-top: 0.5rem;
  margin: 0; /* align to rail edge */
}

/* Main column */
.admin-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none; /* stretch to grid column */
  margin: 0;
}

/* Headings */
.admin-h1 {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.5rem;
}
/* Secondary heading for card sections */
.admin-h2{ font-size:1.25rem; font-weight:700; margin:0; }

/* Cards */
.admin-card {
  flex: 1 1;
  width: 100%;
  background: var(--card-bg, #18181b);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0; /* allow card to size to content */
}

/* Inner spacing for cards containing forms or tables */
.admin-card form,
.admin-card table,
.admin-card > div {
  width: 100%;
}

/* Tables look consistent */
.admin-card table {
  border-spacing: 0;
  width: 100%;
}

.admin-card table th,
.admin-card table td {
  padding: 0.75rem 0.75rem;
  text-align: left;
}

/* Responsive behaviour */
@media (max-width: 1024px) {
  .admin-wrap-legacy {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .admin-side {
    order: 2;
  }

  .admin-main {
    order: 1;
    max-width: 100%;
  }

  .admin-card {
    padding: 1.5rem;
    min-height: auto;
  }

  .admin-h1 {
    text-align: center;
    border-bottom: none;
  }
}

/* ===== Poker League — Admin layout (sticky sidebar, consistent grid) ===== */

:root {
  --header-h: 72px; /* adjust if your header height differs */
}

/* Two-column grid: fixed sidebar + fluid main */
.admin-wrap-legacy {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  width: 100%;
  min-height: calc(100vh - var(--header-h));
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

/* Sidebar locked to left and sticky under the header */
.admin-side {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-h) + 12px);
  align-self: start;
}

/* Main content column */
.admin-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;           /* use full center column width */
  margin: 0;                   /* no auto-centering gap on the left */
}

/* Final alignment with global rails */
.site-center > .admin-wrap { margin: 0; padding: 0; }
.site-center > .admin-wrap .admin-main { margin: 0; }

/* Title: tighter top space + subtle divider */
.admin-h1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  padding: 0 0 .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Cards: full-width within main, comfortable height */
.admin-card {
  width: 100%;
  background: var(--card-bg, #18181b);
  border-radius: 12px;
  padding: 1.75rem 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: auto;
}

/* Tables and forms stretch naturally inside card */
.admin-card form,
.admin-card table,
.admin-card > div {
  width: 100%;
}

/* Consistent table spacing */
.admin-card table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.admin-card th,
.admin-card td {
  padding: 0.75rem;
  text-align: left;
}

/* Responsive: stack layout on tablets/phones */
@media (max-width: 1024px) {
  .admin-wrap-legacy {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  .admin-side {
    position: static; /* no sticky on small screens */
    order: 2;
  }
  .admin-main {
    order: 1;
    max-width: 100%;
  }
  .admin-card {
    min-height: auto;
    padding: 1.25rem;
  }
  .admin-h1 {
    border-bottom: none;
    text-align: center;
    margin-bottom: .75rem;
  }
}



/* Admin: helpful tooling in cards */
.admin-card .toolbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-top: .25rem;
  padding-bottom: .5rem;
  background: linear-gradient(180deg, rgba(24,24,27,.95), rgba(24,24,27,.85));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 5;
}
.admin-card .table-wrap { max-height: 60vh; overflow: auto; }
.admin-card .admin-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: rgba(24,24,27,.95);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 4;
}

/* Subnav tabs inside admin pages */
.subnav { display:flex; flex-wrap: wrap; gap:.5rem; margin-bottom: .75rem; }
.subnav .tab { padding:.5rem .75rem; border:1px solid rgba(255,255,255,.12); border-radius:9999px; color:var(--text); text-decoration:none; }
.subnav .tab.active { background:rgba(255,188,0,.12); border-color:rgba(255,188,0,.35); }

/* Back to top floating button */
.back-to-top{ position:fixed; right:22px; bottom:22px; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:linear-gradient(135deg, var(--accent), var(--gold)); color:black; font-weight:900; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.back-to-top:hover{ filter:brightness(1.05); }

/* Button danger variant */
.btn.danger{ background:linear-gradient(180deg,#ef4444,#b91c1c); color:#fff; box-shadow:0 0 18px rgba(239,68,68,.25); }
.btn.danger:hover{ filter:brightness(1.05); }

/* User events table layout */
.events-table{ table-layout:fixed; width:100%; }
.events-table th, .events-table td{ padding:.6rem .6rem; vertical-align:middle; }
.events-table .col-starts{ width: 200px; }
.events-table .col-title{ width: 26%; }
.events-table .col-location{ width: 34%; }
.events-table .col-rsvp{ width: 240px; }
.events-table .loc-wrap{ display:flex; align-items:center; gap:10px; }
.events-table .loc-thumb{ width:80px; height:56px; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.12); }
.events-table .col-rsvp{ position:relative; z-index:10; }
.events-table .col-rsvp, .events-table .col-rsvp *{ pointer-events:auto; }
.events-table td{ overflow:visible; }

/* Home standings table */
.standings-wrapper{
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
}
.standings-table{
  table-layout: fixed;
  width: 100%;
  min-width: 500px; /* Ensure table doesn't shrink too much */
}
.standings-table th, .standings-table td{ padding:.5rem .5rem; }
.standings-table .col-rank{ width:8%; }
.standings-table .col-name{ width:40%; }
.standings-table .col-pts{ width:12%; }
.standings-table .col-events{ width:12%; }
.standings-table .col-wins{ width:12%; }
.standings-table .col-pct{ width:12%; }

@media (max-width: 700px){
  .standings-wrapper{
    margin: 8px -16px 0; /* Extend to card edges */
    padding: 0 16px;
  }
  .standings-table{
    font-size: .85rem;
    min-width: 480px;
  }
  .standings-table th, .standings-table td{
    padding: .4rem .35rem;
  }
}

/* Sticky toolbar + table header (if not already present) */
.admin-card .toolbar{ position:-webkit-sticky; position:sticky; top:0; padding:.25rem .25rem .5rem; background:linear-gradient(180deg,rgba(24,24,27,.95),rgba(24,24,27,.85)); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:5; }
.admin-card .table-wrap{ max-height:60vh; overflow:auto; }
.admin-card .admin-table thead th{ position:-webkit-sticky; position:sticky; top:0; background:rgba(24,24,27,.95); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:4; }
/* Don't use sticky headers on the user events table to avoid overlap issues */
.events-table thead th{ position:static !important; }

/* Subnav tabs */
.subnav{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.subnav .tab{ padding:.5rem .75rem; border:1px solid rgba(255,255,255,.12); border-radius:9999px; color:var(--text); text-decoration:none; }
.subnav .tab.active{ background:rgba(255,188,0,.12); border-color:rgba(255,188,0,.35); }

/* Back to top */
.back-to-top{ position:fixed; right:22px; bottom:22px; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--gold)); color:black; font-weight:900; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.back-to-top:hover{ filter:brightness(1.05); }

/* ===== Calendar Styles ===== */
.calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 6px;
  gap: 6px;
  width: 100%;
}
.calendar-day-header{
  text-align: center;
  font-size: .875rem;
  opacity: .7;
  padding: 4px 6px;
  font-weight: 600;
}
.calendar-day-cell{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border-radius: 8px;
  padding: 8px 6px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
}
.calendar-day-number{
  font-size: .875rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.calendar-no-events{
  font-size: .75rem;
  opacity: .4;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}
.calendar-events-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
}
.calendar-event-link{
  font-size: .75rem;
  color: var(--gold);
  text-decoration: none;
  padding: 4px 6px;
  background: rgba(255,188,0,.1);
  border-radius: 4px;
  border: 1px solid rgba(255,188,0,.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-event-link:hover{
  background: rgba(255,188,0,.2);
  text-decoration: none;
}

/* Mobile calendar improvements */
@media (max-width: 700px){
  .calendar-grid{
    gap: 4px;
  }
  .calendar-day-header{
    font-size: .7rem;
    padding: 2px;
  }
  .calendar-day-cell{
    min-height: 60px;
    padding: 6px 4px;
  }
  .calendar-day-number{
    font-size: .75rem;
  }
  .calendar-event-link{
    font-size: .65rem;
    padding: 3px 4px;
  }
}

/* Admin Users table: compact, truncation, fixed layout */
.users-table{ table-layout: auto; }
.users-table th, .users-table td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .5rem .6rem; }
.users-table .col-display{ max-width: 180px; }
.users-table .col-real{ max-width: 220px; }
.users-table .col-points{ width: 80px; text-align: right; }
.users-table .col-pref{ width: 120px; }
.users-table .col-status{ width: 120px; }
.users-table .col-actions{ width: 200px; }
.users-table .col-email{ max-width: 260px; }
.users-table .col-phone{ width: 140px; }
.users-table .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toggle switch for admin role */
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#444; transition:.2s; border-radius:999px; border:1px solid rgba(255,255,255,.25); }
.switch .slider:before{ position:absolute; content:""; height:18px; width:18px; left:3px; top:2px; background:white; transition:.2s; border-radius:50%; }
.switch input:checked + .slider{ background:linear-gradient(135deg, var(--accent), var(--gold)); }
.switch input:checked + .slider:before{ transform: translateX(20px); }

.admin-card{ scroll-margin-top: var(--header-h, 72px); }
.admin-card:target{ outline:1px solid rgba(255,188,0,.45); box-shadow:0 0 0 2px rgba(255,188,0,.25) inset; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =========================
   MOBILE-ONLY FIXES
   Desktop unchanged
   ========================= */

/* Mobile calendar - make events readable on small screens */
@media (max-width: 700px){
  /* Target calendar grid inside cards */
  .card > .grid[style*="repeat(7"]{
    gap: 2px !important;
  }

  /* Make calendar cells compact and readable */
  .card > .grid[style*="repeat(7"] > .card{
    padding: 3px !important;
    min-height: 70px;
    border-radius: 6px !important;
  }

  /* Calendar day numbers - bigger and clearer */
  .card > .grid[style*="repeat(7"] > .card > div:first-child{
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    margin-bottom: 2px;
  }

  /* Calendar event list container */
  .card > .grid[style*="repeat(7"] > .card ul{
    gap: 2px !important;
    margin-top: 2px !important;
  }

  /* Calendar event links - more visible */
  .card > .grid[style*="repeat(7"] > .card li a{
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    padding: 3px 4px !important;
    display: block;
    background: rgba(255,188,0,.2) !important;
    border: 1px solid rgba(255,188,0,.4) !important;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600 !important;
  }

  /* "No events" text */
  .card > .grid[style*="repeat(7"] > .card .text-xs{
    font-size: 0.65rem !important;
    margin-top: 2px !important;
  }

  /* Calendar controls - make buttons more touchable */
  .card > div:first-child button.btn-sm{
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }
}

/* Mobile global nav - hide on desktop */
.mobile-global-nav{
  display: none;
}

@media (max-width: 1024px){
  .mobile-global-nav{
    display: block !important;
  }
}

/* =========================
   Game Night Mobile Fixes
   ========================= */
@media (max-width: 700px){
  /* Stack the game night event card content vertically on mobile */
  .admin-card .flex.items-start.justify-between{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  /* Make "Manage Game" button full width and more prominent */
  .admin-card .flex.items-start.justify-between > div:last-child{
    width: 100%;
  }

  .admin-card .flex.items-start.justify-between .btn{
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* =========================
   Admin Landing Page - Details/Summary
   ========================= */
details.admin-card{
  transition: all 0.3s ease;
}
details.admin-card summary{
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  list-style: none;
  padding: 0;
  transition: all 0.2s ease;
  position: relative;
}
details.admin-card summary::-webkit-details-marker{
  display: none;
}
details.admin-card summary:hover{
  opacity: 0.85;
  transform: translateY(-2px);
}
details.admin-card[open] summary{
  margin-bottom: 0;
}
/* Add animated chevron indicator */
details.admin-card summary .text-xs::after{
  content: ' ▼';
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 0.7rem;
  margin-left: 6px;
  opacity: 0.7;
}
details.admin-card[open] summary .text-xs::after{
  transform: rotate(180deg);
}
/* Fade in content when opened */
details.admin-card[open] > div:not(summary){
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hover effect for admin landing cards */
.admin-card-link:hover,
.card:hover{
  border-color: var(--gold);
  transition: border-color 0.2s ease;
}

.hover\:border-gold:hover{
  border-color: var(--gold) !important;
}

/* =========================
   Mobile Standings Component
   ========================= */

/* Hide mobile version on desktop */
.mobile-standings {
  display: none;
}

/* Show desktop version by default */
.desktop-standings {
  display: block;
}

/* =========================
   Mobile Events Component
   ========================= */

/* Hide mobile version on desktop */
.mobile-events {
  display: none;
}

/* Show desktop version by default */
.desktop-events {
  display: block;
}

/* =========================
   Mobile Users Component
   ========================= */

/* Hide mobile version on desktop */
.mobile-users-list {
  display: none;
}

/* Show desktop version by default */
.desktop-users-table {
  display: block;
}

/* =========================
   Mobile Admin Events Component
   ========================= */

/* Hide mobile version on desktop */
.mobile-events-admin-list {
  display: none;
}

/* Show desktop version by default */
.desktop-events-table {
  display: block;
}

/* =========================
   Mobile Attendees Component (in modal)
   ========================= */

/* Hide mobile version on desktop */
.mobile-attendees-list {
  display: none;
}

/* Show desktop version by default */
.desktop-attendees-table {
  display: block;
}

/* =========================
   Mobile Game Night Component
   ========================= */

/* Hide mobile version on desktop */
.mobile-gamenight-list {
  display: none;
}

/* Show desktop version by default */
.desktop-gamenight-table {
  display: block;
}

/* =========================
   Mobile Games Setup Component
   ========================= */

/* Hide mobile version on desktop */
.mobile-games-list {
  display: none;
}

/* Show desktop version by default */
.desktop-games-table {
  display: block;
}

/* =========================
   Mobile Venues Setup Component
   ========================= */

/* Hide mobile version on desktop */
.mobile-venues-list {
  display: none;
}

/* Show desktop version by default */
.desktop-venues-table {
  display: block;
}

/* =========================
   Mobile Players/Friends Component
   ========================= */

/* Hide mobile versions on desktop */
.mobile-friends-list,
.mobile-players-list,
.mobile-incoming-list,
.mobile-outgoing-list {
  display: none;
}

/* Show desktop versions by default */
.desktop-friends-table,
.desktop-players-table,
.desktop-incoming-table,
.desktop-outgoing-table {
  display: block;
}

@media (max-width: 700px) {
  /* Hide desktop version on mobile */
  .desktop-standings {
    display: none;
  }

  /* Show mobile version on mobile */
  .mobile-standings {
    display: block;
  }

  .mobile-standings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Hide desktop events table on mobile */
  .desktop-events {
    display: none;
  }

  /* Show mobile events on mobile */
  .mobile-events {
    display: block;
  }

  .mobile-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-event-card {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    transition: all 0.2s ease;
  }

  .mobile-event-card:hover {
    border-color: var(--gold);
  }

  .mobile-event-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 8px;
    background: rgba(255, 188, 0, 0.1);
    border: 1px solid rgba(255, 188, 0, 0.3);
    border-radius: 8px;
  }

  .mobile-event-day {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    line-height: 1.2;
  }

  .mobile-event-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 2px;
    text-align: center;
  }

  .mobile-event-info {
    flex: 1 1;
    min-width: 0;
  }

  .mobile-event-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3;
  }

  .mobile-event-status {
    display: flex;
    gap: 6px;
  }

  .mobile-event-toggle {
    flex-shrink: 0;
    padding: 8px 12px;
    min-width: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .mobile-event-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-event-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mobile-event-detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-event-detail-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mobile-event-location-link {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
  }

  .mobile-event-location-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--gold);
  }

  .mobile-event-map {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
  }

  .mobile-event-address {
    flex: 1 1;
    min-width: 0;
  }

  .mobile-event-venue {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
  }

  .mobile-event-addr {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
  }

  .mobile-event-rsvp-buttons {
    display: flex;
    gap: 8px;
  }

  .mobile-event-rsvp-buttons .btn {
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 700;
  }

  /* Hide desktop users table on mobile */
  .desktop-users-table {
    display: none;
  }

  /* Show mobile users list on mobile */
  .mobile-users-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-user-card {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s ease;
  }

  .mobile-user-card.selected {
    border-color: var(--gold);
    background: rgba(255, 188, 0, 0.05);
  }

  .mobile-user-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-user-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-user-info {
    flex: 1 1;
    min-width: 0;
  }

  .mobile-user-display {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-user-real {
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-user-toggle {
    flex-shrink: 0;
    padding: 8px 12px;
    min-width: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .mobile-user-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-user-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-user-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
  }

  .mobile-user-label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
  }

  .mobile-user-value {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
  }

  .mobile-user-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .mobile-user-actions .btn {
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 700;
  }

  /* Fix subnav tabs to wrap properly on mobile */
  .subnav {
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .subnav .tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 8px 14px;
    min-height: 36px;
  }

  /* Fix table overflow on mobile for setup pages and admin tables */
  .admin-main .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .admin-main .admin-table {
    min-width: 600px;
  }

  /* Fix toolbar and button group wrapping on mobile */
  .admin-main .toolbar,
  .admin-main > div.flex.items-center.justify-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .admin-main .toolbar .btn-group,
  .admin-main .flex.gap-2 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Fix buttons to be full-width on very small screens */
  @media (max-width: 400px) {
    .admin-main .btn,
    .admin-main .toolbar .btn {
      width: 100%;
    }
  }

  /* Hide desktop events admin table on mobile */
  .desktop-events-table {
    display: none;
  }

  /* Show mobile events admin list on mobile */
  .mobile-events-admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-event-admin-card {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s ease;
  }

  .mobile-event-admin-card.selected {
    border-color: var(--gold);
    background: rgba(255, 188, 0, 0.05);
  }

  .mobile-event-admin-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-event-admin-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-event-admin-info {
    flex: 1 1;
    min-width: 0;
  }

  .mobile-event-admin-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-event-admin-date {
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-event-admin-toggle {
    flex-shrink: 0;
    padding: 8px 12px;
    min-width: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .mobile-event-admin-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-event-admin-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-event-admin-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    gap: 8px;
  }

  .mobile-event-admin-label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    flex-shrink: 0;
  }

  .mobile-event-admin-value {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    flex: 1 1;
  }

  .mobile-event-admin-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .mobile-event-admin-actions .btn {
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 700;
  }

  /* Mobile Attendees List (in modal) */
  .desktop-attendees-table {
    display: none;
  }

  .mobile-attendees-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-attendee-card {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
  }

  .mobile-attendee-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
  }

  .mobile-attendee-realname {
    font-size: 0.9rem;
    color: var(--text);
    opacity: 0.8;
    margin-bottom: 4px;
  }

  .mobile-attendee-email {
    font-size: 0.85rem;
    color: var(--muted);
    word-break: break-word;
  }

  /* Mobile Game Night Tables */
  .desktop-gamenight-table {
    display: none;
  }

  .mobile-gamenight-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-gamenight-card {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    transition: all 0.2s ease;
  }

  .mobile-gamenight-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-gamenight-info {
    flex: 1 1;
    min-width: 0;
  }

  .mobile-gamenight-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
  }

  .mobile-gamenight-rebuys {
    display: flex;
    gap: 6px;
  }

  .mobile-gamenight-toggle {
    flex-shrink: 0;
    padding: 8px 12px;
    min-width: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .mobile-gamenight-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-gamenight-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .mobile-gamenight-actions {
    display: flex;
    gap: 8px;
  }

  .mobile-gamenight-actions .btn {
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 700;
  }

  /* Eliminated players specific styles */
  .mobile-gamenight-eliminated {
    border-left: 3px solid var(--accent);
  }

  .mobile-gamenight-position {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
    min-width: 50px;
    text-align: center;
    flex-shrink: 0;
  }

  .mobile-gamenight-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .mobile-gamenight-label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
  }

  .mobile-gamenight-value {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 700;
  }

  /* Games Setup Mobile */
  .desktop-games-table {
    display: none;
  }

  .mobile-games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Venues Setup Mobile */
  .desktop-venues-table {
    display: none;
  }

  .mobile-venues-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Players/Friends Mobile */
  .desktop-friends-table,
  .desktop-players-table,
  .desktop-incoming-table,
  .desktop-outgoing-table {
    display: none;
  }

  .mobile-friends-list,
  .mobile-players-list,
  .mobile-incoming-list,
  .mobile-outgoing-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Chat Controls Mobile Layout */
  .chat-controls-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .chat-action-buttons {
    display: flex;
    gap: 6px;
    flex: 1 1;
  }

  .chat-action-btn {
    flex: 1 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    padding: 8px 12px;
  }

  .chat-send-btn {
    min-height: 44px;
    padding: 12px 24px;
    flex-shrink: 0;
  }

  /* Game Control Buttons Mobile */
  .game-control-buttons .btn {
    min-height: 50px;
    font-size: 1rem;
    font-weight: 800;
  }

  /* Chat Emoji Popup */
  .chat-emoji-popup {
    -webkit-overflow-scrolling: touch;
  }

  .emoji-btn:hover {
    background: rgba(255, 188, 0, 0.1) !important;
    border-color: var(--gold) !important;
  }

  .emoji-btn:active {
    transform: scale(0.95);
  }

  /* Games Create Form Mobile */
  .games-create-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 900px;
  }

  .games-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
  }

  .games-form-field {
    display: flex;
    flex-direction: column;
  }

  .games-form-field-full {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .games-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
  }

  @media (max-width: 700px) {
    .games-form-row {
      grid-template-columns: 1fr;
    }

    .games-form-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .games-form-actions .btn {
      width: 100%;
    }
  }

  /* PWA Install Banner - Thin banner under header */
  .pwa-install-banner {
    position: -webkit-sticky;
    position: sticky;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255, 45, 85, 0.15), rgba(255, 188, 0, 0.15));
    border-bottom: 1px solid rgba(255, 188, 0, 0.3);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    z-index: 90;
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .pwa-install-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 20px;
    max-width: 100%;
  }

  .pwa-install-banner-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1;
    min-width: 0;
  }

  .pwa-install-banner-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .pwa-install-banner-message {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pwa-install-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  @media (max-width: 700px) {
    .pwa-install-banner-content {
      padding: 6px 12px;
    }

    .pwa-install-banner-message {
      font-size: 0.8rem;
      white-space: normal;
      line-height: 1.2;
    }

    .pwa-install-banner-icon {
      font-size: 1rem;
    }
  }

  .pwa-install-description {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
  }

  .pwa-install-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
  }

  .pwa-install-actions .btn,
  .pwa-install-actions .btn-ghost {
    white-space: nowrap;
  }

  @media (max-width: 400px) {
    .pwa-install-prompt {
      left: 10px;
      right: 10px;
      bottom: 10px;
    }

    .pwa-install-content {
      flex-wrap: wrap;
    }

    .pwa-install-actions {
      width: 100%;
      flex-direction: row;
    }

    .pwa-install-actions .btn,
    .pwa-install-actions .btn-ghost {
      flex: 1 1;
    }
  }

  .mobile-standing-card {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.2s ease;
  }

  .mobile-standing-card:hover {
    border-color: var(--gold);
  }

  .mobile-standing-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-standing-rank {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
    min-width: 45px;
    text-align: center;
  }

  .mobile-standing-info {
    flex: 1 1;
    min-width: 0;
  }

  .mobile-standing-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-standing-points {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 600;
  }

  .mobile-standing-toggle {
    flex-shrink: 0;
    padding: 8px 12px;
    min-width: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .mobile-standing-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-standing-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-standing-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
  }

  .mobile-standing-label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
  }

  .mobile-standing-value {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 700;
  }
}

/* =========================
   Comprehensive Mobile Audit Fixes
   ========================= */

@media (max-width: 700px){
  /* Stats page - fix card spacing */
  .container > .grid{
    gap: 1rem !important;
  }

  /* Forms - ensure all inputs are touch-friendly */
  input, select, textarea{
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  textarea{
    min-height: 100px;
  }

  /* Modal improvements */
  .modal-card form label{
    margin-bottom: 12px;
    display: block;
  }

  .modal-card input, .modal-card select, .modal-card textarea{
    width: 100%;
    font-size: 16px;
  }

  /* User tables - ensure scrollable */
  .users-table{
    display: table;
    min-width: 600px;
  }

  .venues-table{
    display: table;
    min-width: 700px;
  }

  .games-table{
    display: table;
    min-width: 800px;
  }

  /* Buttons in tables - stack vertically */
  .admin-table td .flex.gap-2{
    flex-direction: column;
    gap: 8px;
  }

  .admin-table td .flex.gap-2 button,
  .admin-table td .flex.gap-2 .btn{
    width: 100%;
  }

  /* Admin cards - better mobile padding */
  .admin-card{
    padding: 16px 14px;
    border-radius: 12px;
  }

  /* Breadcrumbs - wrap on mobile */
  .admin-breadcrumbs{
    flex-wrap: wrap;
    font-size: 0.85rem;
  }

  /* Grid layouts - always stack on mobile */
  .grid[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  /* Dashboard cards - better spacing */
  .dashboard-three .card{
    margin-bottom: 16px;
  }

  /* Landing page hero - adjust for mobile */
  .hero{
    padding: 20px 16px 12px;
  }

  .hero h1{
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.2;
  }

  .hero p{
    font-size: 0.95rem;
    padding: 0 8px;
  }

  /* Section titles - better mobile spacing */
  .section-title{
    font-size: 1.1rem;
    margin: 20px 0 12px;
    flex-wrap: wrap;
  }

  /* Home page content - better spacing */
  .site-center > div[style*="gridTemplateColumns"]{
    gap: 16px !important;
  }

  /* Mobile calendar - ensure proper spacing */
  .mobile-calendar-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-calendar-event{
    transition: all 0.2s ease;
  }

  .mobile-calendar-event:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 188, 0, 0.2);
  }

  /* Ensure calendar/leaderboard controls don't overflow */
  .card > .flex.items-center.justify-between{
    flex-wrap: wrap;
    gap: 8px;
  }

  .card .input-sm,
  .card select.input-sm{
    min-width: 100px;
    max-width: 100%;
  }

  /* Profile page forms - full width */
  .admin-card form{
    width: 100%;
  }

  .admin-card form .grid-cols-12{
    grid-template-columns: 1fr !important;
  }

  .admin-card form .col-span-6,
  .admin-card form .col-span-4,
  .admin-card form .col-span-3{
    grid-column: span 12 / span 12 !important;
  }

  /* Standings table - ensure visible */
  .standings-table{
    font-size: 0.85rem;
  }

  .standings-table th,
  .standings-table td{
    padding: 8px 6px;
  }

  /* Events list - touch-friendly RSVPs */
  .events-table .col-rsvp button{
    min-width: 70px;
    padding: 8px 10px;
  }

  /* Chat - optimize for mobile */
  .chat-panel{
    height: calc(100vh - 200px) !important;
    max-height: none !important;
  }

  /* Site content editor - better textarea */
  .admin-card textarea{
    min-height: 200px;
    font-size: 15px;
  }

  /* Setup pages - stack form elements */
  .admin-card form .flex{
    flex-direction: column;
    gap: 12px;
  }

  .admin-card form .flex button{
    width: 100%;
  }

  /* Game night player tables - scrollable */
  .admin-card .table-wrap{
    overflow-x: auto;
    margin: 0 -14px;
    padding: 0 14px;
  }

  /* Admin landing cards - better touch targets */
  .admin-card-link{
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Admin dashboard - ensure cards stack properly */
  .admin-main > .grid{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Details/summary elements - larger touch area */
  details summary{
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 8px;
  }

  .admin-card details summary{
    padding: 14px 12px;
    min-height: 50px;
  }

  .admin-card details summary .flex.items-center{
    width: 100%;
  }

  /* Nested cards within details - better spacing */
  .admin-card details .grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
  }

  .admin-card details .card{
    padding: 14px !important;
  }

  .admin-card details .card .font-semibold{
    font-size: 0.95rem;
  }

  .admin-card details .card p{
    font-size: 0.85rem;
  }

  /* Announcements Manager - mobile layout */
  .announcement-card{
    width: 100%;
  }

  .announcement-header{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .announcement-title-input{
    width: 100% !important;
    box-sizing: border-box;
  }

  .announcement-controls{
    display: flex;
    gap: 6px;
    width: 100%;
  }

  .announcement-controls .btn{
    flex: 1 1;
    min-height: 44px;
  }

  /* Site Content Editor - mobile toolbar */
  .editor-toolbar{
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    margin: 8px 0 !important;
  }

  .editor-toolbar .btn{
    flex: 1 1;
    min-width: 70px;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  /* Site content sections - better mobile spacing and anchors */
  .admin-main > .admin-card{
    scroll-margin-top: 120px;
    margin-bottom: 20px;
  }

  .admin-main > .admin-card h2{
    font-size: 1.2rem;
    margin-bottom: 16px;
  }

  .admin-main .space-y-6{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .admin-main .space-y-4{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .admin-main .space-y-3{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Prevent horizontal overflow on admin pages */
  .admin-main{
    max-width: 100vw;
    overflow-x: hidden;
  }

  .admin-main > *{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Ensure all inputs and textareas fit within viewport */
  .admin-card input:not([type="radio"]):not([type="checkbox"]),
  .admin-card textarea,
  .admin-card select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep radio and checkbox inputs their natural size */
  .admin-card input[type="radio"],
  .admin-card input[type="checkbox"]{
    width: auto !important;
    max-width: none !important;
  }

  /* Modal actions should stack on mobile */
  .admin-card .modal-actions{
    flex-direction: column;
    width: 100%;
  }

  .admin-card .modal-actions .btn{
    width: 100%;
  }

  /* Site content editor preview section */
  .admin-card > div > div{
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Logs Viewer - Base Styles */
  .logs-controls{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }

  .logs-controls-row{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .logs-search,
  .logs-filter{
    width: 100%;
  }

  .logs-checkbox-label{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
  }

  .logs-container{
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .logs-empty{
    text-align: center;
    padding: 3rem 2rem;
    color: var(--muted);
    font-size: 1rem;
  }

  .logs-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .log-entry{
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }

  .log-entry:hover{
    border-color: rgba(255, 188, 0, 0.3);
  }

  .log-entry-main{
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .log-entry-main:hover{
    background: rgba(255, 255, 255, 0.03);
  }

  .log-entry-header{
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    grid-gap: 12px;
    gap: 12px;
    margin-bottom: 0;
  }

  .log-icon{
    font-size: 1.1rem;
  }

  .log-level{
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
  }

  .log-timestamp{
    font-size: 0.85rem;
    color: var(--muted);
  }

  .log-message{
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--text);
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .log-expand-btn{
    font-size: 0.75rem;
    color: var(--gold);
    background: rgba(255, 188, 0, 0.1);
    border: 1px solid rgba(255, 188, 0, 0.3);
    border-radius: 6px;
    cursor: pointer;
    padding: 6px 12px;
    font-weight: 600;
    margin-top: 12px;
    transition: all 0.2s;
    grid-column: 1 / -1;
    width: -moz-fit-content;
    width: fit-content;
  }

  .log-expand-btn:hover{
    background: rgba(255, 188, 0, 0.2);
    border-color: rgba(255, 188, 0, 0.5);
  }

  /* Desktop: FORCE CLEAN LAYOUT */
  @media (min-width: 1024px){
    .admin-card .logs-controls{
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 20px !important;
      margin-bottom: 30px !important;
      padding-bottom: 24px !important;
    }

    .admin-card .logs-controls-row{
      flex-direction: row !important;
      align-items: center !important;
      gap: 16px !important;
      width: auto !important;
    }

    .admin-card .logs-controls-row:first-child{
      flex: 1 1 !important;
    }

    .admin-card .logs-search{
      flex: 1 1 !important;
      min-width: 300px !important;
      max-width: 600px !important;
      font-size: 1rem !important;
      padding: 14px 18px !important;
    }

    .admin-card .logs-filter{
      width: 200px !important;
      font-size: 1rem !important;
      padding: 14px 18px !important;
    }

    .admin-card .logs-list{
      gap: 24px !important;
    }

    .admin-card .log-entry{
      border-radius: 12px !important;
      border: 1px solid var(--border) !important;
      background: linear-gradient(180deg, var(--card), var(--card-2)) !important;
      overflow: hidden !important;
    }

    .admin-card .log-entry:hover{
      border-color: rgba(255, 188, 0, 0.35) !important;
      box-shadow: 0 4px 16px rgba(255, 188, 0, 0.1) !important;
    }

    .admin-card .log-entry-main{
      padding: 20px 24px !important;
      cursor: pointer !important;
      display: block !important;
    }

    .admin-card .log-entry-main:hover{
      background: rgba(255, 255, 255, 0.03) !important;
    }

    .admin-card .log-entry-header{
      display: grid !important;
      grid-template-columns: auto auto 1fr auto !important;
      align-items: center !important;
      grid-gap: 16px !important;
      gap: 16px !important;
      margin-bottom: 0 !important;
    }

    .admin-card .log-icon{
      font-size: 1.2rem !important;
      line-height: 1 !important;
    }

    .admin-card .log-level{
      font-size: 0.75rem !important;
      padding: 6px 12px !important;
      border-radius: 6px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      white-space: nowrap !important;
    }

    .admin-card .log-level::after{
      content: ' :' !important;
      opacity: 0.6 !important;
    }

    .admin-card .log-timestamp{
      font-size: 0.85rem !important;
      color: rgba(255, 255, 255, 0.5) !important;
      text-align: right !important;
    }

    .admin-card .log-message{
      font-size: 0.95rem !important;
      line-height: 1.5 !important;
      color: rgba(255, 255, 255, 0.9) !important;
      margin: 12px 0 0 0 !important;
      grid-column: 1 / -1 !important;
    }

    .admin-card .log-expand-btn{
      margin: 12px 0 0 0 !important;
      padding: 6px 14px !important;
      background: rgba(255, 188, 0, 0.1) !important;
      border: 1px solid rgba(255, 188, 0, 0.3) !important;
      border-radius: 6px !important;
      color: var(--gold) !important;
      font-size: 0.75rem !important;
      font-weight: 600 !important;
      transition: all 0.2s ease !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      cursor: pointer !important;
      width: auto !important;
      grid-column: 1 / -1 !important;
    }

    .admin-card .log-expand-btn:hover{
      background: rgba(255, 188, 0, 0.2) !important;
      border-color: rgba(255, 188, 0, 0.5) !important;
      transform: none !important;
    }

    .admin-card .log-expand-btn:active{
      transform: none !important;
    }
  }

  .log-entry-details{
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--border);
  }

  .log-detail{
    margin-bottom: 16px;
  }

  .log-detail:last-child{
    margin-bottom: 0;
  }

  .log-detail-label{
    display: block;
    font-size: 0.75rem;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }

  .log-detail-value{
    font-size: 0.9rem;
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
  }

  .log-detail-value pre{
    background: rgba(0, 0, 0, 0.4);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.85rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.5;
  }

  /* Desktop: Better detail section */
  @media (min-width: 701px){
    .log-entry-details{
      padding: 20px;
    }

    .log-detail{
      margin-bottom: 18px;
    }

    .log-detail-label{
      font-size: 0.8rem;
      margin-bottom: 8px;
    }

    .log-detail-value{
      font-size: 0.9rem;
    }

    .log-detail-value pre{
      padding: 14px;
      font-size: 0.85rem;
    }
  }

  /* Payouts Card - Mobile Styles */
  .payouts-card{
    background: linear-gradient(135deg, rgba(255, 188, 0, 0.08), rgba(255, 188, 0, 0.05)) !important;
    border: 1px solid rgba(255, 188, 0, 0.3) !important;
  }

  .payouts-summary{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 12px;
    gap: 12px;
    margin-bottom: 20px;
  }

  .payout-stat-card{
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 188, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }

  .payout-stat-label{
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 8px;
  }

  .payout-stat-value{
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold);
    font-family: monospace;
  }

  .payouts-distribution{
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 188, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
  }

  .payouts-table{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .payout-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 188, 0, 0.15);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .payout-row:hover{
    background: rgba(255, 188, 0, 0.08);
    border-color: rgba(255, 188, 0, 0.3);
  }

  .payout-place{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
  }

  .payout-percentage{
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    font-family: monospace;
  }

  /* Desktop: Show stats in a row */
  @media (min-width: 700px) {
    .payouts-summary{
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Search inputs - full width */
  .toolbar .input,
  .toolbar input[type="text"],
  .toolbar input[type="search"]{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Badge spacing - don't let them crowd */
  .badge + .badge{
    margin-left: 4px;
  }

  /* Login/Signup forms - optimize */
  .card form{
    width: 100%;
  }

  .card form button[type="submit"]{
    width: 100%;
    padding: 14px;
    font-size: 1rem;
  }

  /* Friends page - stack elements */
  .flex.justify-between{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Players page - better list view */
  .card .flex.items-center{
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Announcements - better mobile display */
  .alert{
    padding: 16px 14px;
    font-size: 0.9rem;
  }

  .alert-title{
    font-size: 1rem;
    margin-bottom: 8px;
  }

  /* Footer - better spacing */
  .site-footer{
    padding: 24px 16px;
    font-size: 0.85rem;
  }

  /* Container padding - reduce on mobile */
  .container{
    padding: 16px 14px;
  }

  /* Reduce overall spacing in admin pages */
  .admin-main{
    gap: 12px;
  }

  /* Make nav links more tappable - but don't break layout */
  .nav a,
  .side-link{
    min-height: 32px;
  }

  /* Game Night Mobile - Convert player tables to cards with player names visible */
  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody tr{
    display: block;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--card-2);
    border-radius: 12px;
    border: 1px solid var(--border);
  }

  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) thead{
    display: none;
  }

  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td{
    display: block;
    text-align: left !important;
    padding: 8px 0 !important;
    border: none !important;
    position: relative;
    padding-left: 45% !important;
    min-height: 36px;
  }

  /* Show data-label before each cell value */
  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td[data-label]::before{
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 40%;
    padding-right: 10px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
  }

  /* Player name (first cell with data-label="Player") stands out at the top */
  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td[data-label="Player"]{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--border) !important;
    color: var(--gold);
    padding-left: 0 !important;
  }

  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td[data-label="Player"]::before{
    display: none;
  }

  /* Action buttons always visible and full width */
  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td[data-label="Actions"]{
    margin-top: 12px;
    padding-left: 0 !important;
  }

  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td[data-label="Actions"]::before{
    display: none;
  }

  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td .flex{
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }

  .admin-table:not(.users-table):not(.games-table):not(.venues-table):not(.standings-table):not(.events-table) tbody td .flex button{
    width: 100%;
    min-height: 44px;
    font-size: 0.95rem;
  }

  /* Toolbar buttons - stack vertically */
  .toolbar .btn-group{
    flex-direction: column;
    width: 100%;
  }

  .toolbar .btn-group > *{
    width: 100%;
  }
}

/* ========== Communications Composer ========== */
.communications-composer{
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1200px;
}

.composer-card{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.composer-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.composer-header h2{
  margin: 0;
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 700;
}

.preview-toggle{
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-toggle:hover{
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold);
}

.form-group{
  margin-bottom: 24px;
}

.form-group label{
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input,
.form-textarea{
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus{
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.4);
}

.form-textarea{
  resize: vertical;
  min-height: 200px;
  line-height: 1.6;
  font-family: 'Courier New', monospace;
}

.variable-picker{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variable-button{
  padding: 8px 12px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--gold);
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variable-button:hover{
  background: rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
}

.help-text{
  margin-top: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.form-actions{
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.btn-send{
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--gold), #d4af37);
  border: none;
  border-radius: 8px;
  color: var(--bg);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.btn-send:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

.btn-send:active{
  transform: translateY(0);
}

.btn-send:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Preview Styles */
.preview-container{
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
}

.preview-container h3{
  margin: 0 0 16px 0;
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: 700;
}

.preview-subject{
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 1.1rem;
  color: var(--text);
}

.preview-subject strong{
  color: var(--gold);
  margin-right: 8px;
}

.preview-body{
  color: var(--text);
  line-height: 1.8;
  font-size: 1rem;
}

.preview-body p{
  margin-bottom: 16px;
}

.preview-body p:last-child{
  margin-bottom: 0;
}

.preview-note{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Help Card */
.help-card{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.help-card h3{
  margin: 0 0 16px 0;
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: 700;
}

.help-card h3:not(:first-child){
  margin-top: 24px;
}

.variable-list,
.tips-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.variable-list li,
.tips-list li{
  margin-bottom: 12px;
  color: var(--text);
  line-height: 1.6;
}

.variable-list li:last-child,
.tips-list li:last-child{
  margin-bottom: 0;
}

.variable-list code{
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--gold);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--gold);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.tips-list li::before{
  content: "•";
  color: var(--gold);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Desktop Layout */
@media (min-width: 1024px){
  .communications-composer{
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-gap: 24px;
    gap: 24px;
  }

  .composer-card{
    grid-column: 1;
  }

  .help-card{
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
  }
}

/* Mobile Adjustments */
@media (max-width: 700px){
  .composer-card,
  .help-card{
    padding: 16px;
  }

  .composer-header h2{
    font-size: 1.3rem;
  }

  .variable-picker{
    gap: 6px;
  }

  .variable-button{
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  .form-textarea{
    min-height: 150px;
    font-size: 0.9rem;
  }

  .btn-send{
    width: 100%;
    padding: 14px 20px;
  }
}

/* Communications - Tabs */
.composer-tabs{
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

.composer-tabs .tab{
  flex: 1 1;
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -2px;
}

.composer-tabs .tab:hover{
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.03);
}

.composer-tabs .tab.active{
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(212, 175, 55, 0.05);
}

/* Schedule Options */
.schedule-options{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.radio-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-option:hover{
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--gold);
}

.radio-option input[type="radio"]{
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

.radio-option span{
  color: var(--text);
  font-weight: 500;
}

.schedule-input{
  margin-top: 12px;
}

.schedule-input input,
.schedule-input select{
  width: 100%;
}

/* Action Buttons */
.btn-secondary{
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover{
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--gold);
  color: var(--gold);
}

.btn-secondary:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger{
  padding: 10px 24px;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 8px;
  color: #ef4444;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover{
  background: rgba(220, 38, 38, 0.25);
  border-color: #ef4444;
}

/* Templates Tab */
.templates-list,
.scheduled-list{
  padding: 20px 0;
}

.templates-list h2,
.scheduled-list h2{
  margin: 0 0 20px 0;
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 700;
}

.loading-text,
.empty-text{
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}

.template-grid,
.scheduled-grid{
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.template-item,
.scheduled-item{
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
}

.template-item:hover,
.scheduled-item:hover{
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.4);
}

.template-header,
.scheduled-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.template-header h3,
.scheduled-header h3{
  margin: 0;
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: 700;
  flex: 1 1;
}

.template-category{
  display: inline-block;
  padding: 4px 12px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge{
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pending{
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.status-badge.sent{
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.status-badge.failed{
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #ef4444;
}

.status-badge.cancelled{
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

.template-subject{
  margin: 8px 0;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
}

.template-body,
.scheduled-info{
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.6;
}

.template-actions,
.scheduled-actions{
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Desktop Grid Layout for Templates/Scheduled */
@media (min-width: 768px){
  .template-grid,
  .scheduled-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px){
  .template-grid,
  .scheduled-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile adjustments for tabs */
@media (max-width: 700px){
  .composer-tabs .tab{
    font-size: 0.9rem;
    padding: 10px 12px;
  }

  .schedule-options{
    gap: 8px;
  }

  .radio-option{
    padding: 10px 12px;
  }

  .template-actions,
  .scheduled-actions{
    flex-direction: column;
  }

  .template-actions button,
  .scheduled-actions button{
    width: 100%;
  }
}

/* Event Trigger Configuration */
.event-trigger-config{
  margin-top: 16px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.trigger-timing-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.form-input-small{
  width: 80px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

.form-input-small:focus{
  outline: none;
  border-color: var(--gold);
}

.trigger-label{
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

.trigger-label-strong{
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 12px;
}

.trigger-recipients{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.radio-option-inline{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-option-inline:hover{
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--gold);
}

.radio-option-inline input[type="radio"]{
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--gold);
}

.radio-option-inline span{
  color: var(--text);
  font-size: 0.9rem;
}

.event-variables-hint{
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.event-variables-hint .help-text{
  margin: 0;
}

.variable-button-event{
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.variable-button-event:hover{
  background: rgba(59, 130, 246, 0.2);
}