:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22d3ee;
  --border:#1f2937;
  --row:#0b1224;
  --rowAlt:#0d152b;
}

/* base */
*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 20% -10%, #0b1022 0%, #0a0f1f 40%, var(--bg) 100%);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  line-height:1.45;
}
.wrap{max-width:980px; margin:48px auto; padding:0 16px;}
.card{
  background:
    radial-gradient(600px 180px at 10% -30%, rgba(34,211,238,.06), transparent 60%),
    radial-gradient(600px 220px at 110% -40%, rgba(99,102,241,.08), transparent 60%),
    var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 22px 12px; border-bottom:1px solid var(--border);
}
h1{margin:0; font-size:22px; letter-spacing:.2px;}
.hint{font-size:12px; color:var(--muted);}

/* landing: buttons + hero (new) */
.landing-actions{display:flex; gap:8px;}
.btn{
  display:inline-block; padding:8px 14px; border-radius:10px;
  border:1px solid var(--border); color:var(--text); text-decoration:none;
  transition:.18s ease; font-weight:600; background:#0f172a;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(34,211,238,.35); color:var(--accent); }
.btn-accent{ border-color:rgba(34,211,238,.35); color:var(--accent); }

.hero{ margin:0; position:relative; }
.hero img{
  width:100%; height:auto; display:block;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%);
}
.hero-caption{
  position:absolute; left:16px; bottom:12px; padding:6px 10px; border-radius:10px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb; font-size:14px;
}

/* table */
.table-wrap{width:100%; overflow:auto;}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:15px;}
thead th{
  position:sticky; top:0;
  background:linear-gradient(#0f172a, #0f172a) padding-box;
  color:#cbd5e1; text-align:left; padding:14px 16px; font-weight:600;
  border-bottom:1px solid var(--border); backdrop-filter:saturate(140%) blur(6px); z-index:1;
}
tbody tr:nth-child(odd){background-color:var(--row);}
tbody tr:nth-child(even){background-color:var(--rowAlt);}
td{padding:14px 16px; border-bottom:1px solid var(--border); white-space:nowrap;}
tbody tr:hover{outline:1px solid rgba(34,211,238,.25); background-color:#0e1730;}
.idx{width:64px; color:var(--muted); text-align:right; padding-right:12px;}
.name{min-width:260px; font-weight:600; letter-spacing:.2px;}
.phone a{
  color:var(--text); text-decoration:none; padding:6px 10px;
  border:1px solid var(--border); border-radius:10px; transition:.18s ease; display:inline-block;
}
.phone a:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(34,211,238,.18);
  border-color:rgba(34,211,238,.35); color:var(--accent);
}

/* chips */
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--border); font-size:.9em; }
.badge.ok{ color:#93c5fd; background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.35); }
.badge.meal{ color:#a7f3d0; background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.35); }
.badge.pending{ color:#fde68a; background:rgba(217,119,6,.12); border-color:rgba(217,119,6,.35); }
.badge.host{ color:#fcd34d; background:rgba(250,204,21,.10); border-color:rgba(250,204,21,.35); }

/* pending row highlight */
tbody tr.pending{ background-color:#3a2f13; }
tbody tr.pending:hover{ background-color:#42361a; }

/* sortable headers (+ hover/focus + arrows) */
th.sortable{
  cursor:pointer; user-select:none; position:relative; padding-right:28px;
  transition: color .15s ease, background-color .15s ease;
}
th.sortable::after{
  content:"↕"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:14px; color:#cbd5e1; opacity:.35;
  transition: transform .15s ease, opacity .15s ease, color .15s ease;
}
th.sortable:hover,
th.sortable:focus-visible{ color:var(--accent); background-color:rgba(34,211,238,.06); }
th.sortable:hover::after,
th.sortable:focus-visible::after{ opacity:.9; color:var(--accent); transform:translateY(-50%) scale(1.08); }
th.sortable.asc::after,
th.sortable[aria-sort="ascending"]::after{ content:"↑"; color:var(--accent); opacity:.95; }
th.sortable.desc::after,
th.sortable[aria-sort="descending"]::after{ content:"↓"; color:var(--accent); opacity:.95; }

/* footer + responsive */
footer{padding:10px 22px 18px; color:var(--muted); font-size:12px;}
@media (max-width:640px){
  .idx{display:none;}
  .name{min-width:180px;}
  header{padding:18px;}
  td, thead th{padding:12px 14px;}
}


/* HERO */
.hero{ margin:0; position:relative; }
.hero img{
  width:100%;
  /* Make it tall and consistent */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%);
}
.hero-caption{
  position:absolute; left:16px; bottom:12px; padding:6px 10px; border-radius:10px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb; font-size:14px;
}

/* Reuse your .btn; highlight current page */
.btn-current{
  color: var(--accent);
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 0 2px rgba(34,211,238,.15) inset;
}

/* Mobile: center the nav at the top */
@media (max-width: 520px){
  .floating-nav{ left:50%; right:auto; transform:translateX(-50%); }
}

/* reuse your .btn style; highlight current */
.btn{
  display:inline-block; padding:8px 14px; border-radius:10px;
  border:1px solid var(--border); color:var(--text); text-decoration:none;
  transition:.18s ease; font-weight:600; background:#0f172a;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(34,211,238,.35); color:var(--accent); }
.btn-current{
  color:var(--accent);
  border-color:rgba(34,211,238,.45);
  box-shadow:0 0 0 2px rgba(34,211,238,.12) inset;
}

/* small screens: keep it tidy */
@media (max-width:640px){
  .header-nav{ padding:4px; }
  .btn{ padding:6px 10px; }
}

/* Keep header content on a single, tidy line */
.card > header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* right-side container that holds nav + auth */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* button group */
.header-nav{
  display:flex;
  gap:8px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}

/* reuse your .btn look; small variants */
.btn{
  display:inline-block; padding:8px 14px; border-radius:10px;
  border:1px solid var(--border); color:var(--text); text-decoration:none;
  transition:.18s ease; font-weight:600; background:#0f172a; line-height:1.2;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(34,211,238,.35); color:var(--accent); }
.btn-current{ color:var(--accent); border-color:rgba(34,211,238,.45); box-shadow:0 0 0 2px rgba(34,211,238,.12) inset; }
.btn-ghost{ background:transparent; }

/* make sure long titles don't push buttons down */
h1{ margin:0; font-size:22px; min-width:0; }

/* small screens: shrink padding so it stays on one line */
@media (max-width:640px){
  .header-nav{ padding:4px; }
  .btn{ padding:6px 10px; }
  .header-actions{ gap:8px; }
}


/* --- nicer card footer bar on all pages --- */
.card > footer{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid var(--border);
  /* subtle glass strip */
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) padding-box,
    rgba(0,0,0,.15);
}

/* optional tiny sparkle before the text */
.card > footer::before{
  content:"✦";
  font-size:12px;
  color:var(--accent);
  opacity:.85;
}

/* keep hero caption element around but invisible (JS also hides it) */
.hero-caption{ display:none; }


/* Remove the old single-line footer text flair */
.card > footer::before { content: none; }


/* Ticker container in footer */
.ticker{ width:100%; }
.ticker-viewport{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) padding-box,
    rgba(0,0,0,.12);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 0;
}

/* Edge fades */
.ticker-viewport::before,
.ticker-viewport::after{
  content:"";
  position:absolute; top:0; bottom:0; width:40px; pointer-events:none;
}
.ticker-viewport::before{
  left:0;  background:linear-gradient(90deg, var(--card) 0%, rgba(17,24,39,0) 100%);
}
.ticker-viewport::after{
  right:0; background:linear-gradient(270deg, var(--card) 0%, rgba(17,24,39,0) 100%);
}

/* Moving track — JS updates translateX continuously */
.ticker-track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  gap:0;            /* passes sit flush */
  will-change:transform;
  padding:0 48px;   /* breathing room */
}
.pass{ display:flex; align-items:center; gap:24px; }

.ticker-item{ color:var(--text); opacity:.9; }
.ticker-sep{ color:var(--accent); opacity:.8; }

@media (max-width:640px){
  .ticker-viewport::before, .ticker-viewport::after { width:24px; }
  .ticker-track{ padding:0 28px; }
  .pass{ gap:18px; }
}