/* ===== Amateur Radio Net Roster — Polished UI =====
   - Works with your existing HTML (no markup changes required)
   - Dark theme, responsive, crisp tables & forms, accessible focus states
   - Zero external fonts; CSP-friendly
==================================================== */
:root{
  /* Brand palette */
  --bg: #0c1220;
  --bg-soft: #0f1830;
  --card: #111a2e;
  --card-2: #101a33;
  --border: #223153;
  --text: #e8eefc;
  --muted: #a6b7d8;
  --accent: #7cc3ff;
  --accent-2: #6fffb8;
  --warning: #ffcc66;
  --danger: #ff6b6b;

  /* Effects */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-1: 0 8px 20px rgba(0,0,0,.35);
  --shadow-2: 0 10px 28px rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(124,195,255,.25);
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at -10% -10%, #163055 0%, transparent 60%),
    radial-gradient(1200px 800px at 110% -10%, #1d3a66 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-soft) 100%);
}

/* Header */
header{
  position: sticky; top:0; z-index:10;
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(10,16,30,.6);
  border-bottom:1px solid var(--border);
  padding:14px 18px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
header strong{ font-weight:800; letter-spacing:.2px }
header a{ color:var(--accent); text-decoration:none; font-weight:600 }
header a:hover{ text-decoration:underline }

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:18px }
.card{
  background: linear-gradient(180deg, rgba(18,28,50,.9), rgba(16,26,46,.9));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow-1);
}
.card + .card{ margin-top:16px }
.row{ display:flex; gap:16px; flex-wrap:wrap }
.col{ flex:1; min-width:260px }

/* Text helpers */
.muted{ color:var(--muted) }
.kbd, kbd{
  background:#0b1426;
  padding:2px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.92em;
}

/* Buttons */
button, .btn{
  appearance:none;
  background: linear-gradient(180deg, var(--accent), #5aa2ff);
  color:#071123;
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 2px 0 0 rgba(0,0,0,.25);
}
button:hover, .btn:hover{ filter:brightness(1.05) }
button:active, .btn:active{ transform: translateY(1px) }
button:focus-visible, .btn:focus-visible{ outline:none; box-shadow: var(--ring) }

button.secondary, .btn.secondary{
  background: linear-gradient(180deg, #1e2a43, #18243e);
  color:var(--text);
  border:1px solid var(--border);
}
button.danger, .btn.danger{
  background: linear-gradient(180deg, #ff7e7e, var(--danger));
  color:#2b0b0b;
}

/* action buttons */
.icon-btn {
  font: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  cursor: pointer;
}
.icon-btn:hover { background:#eef2ff; border-color:#c7d2fe; }
.icon-btn.danger { background:#fff1f2; border-color:#fecaca; }
.icon-btn.danger:hover { background:#ffe4e6; border-color:#fca5a5; }
.icon-btn.small { padding: 4px 8px; font-size: 12px; }

tr.editing td { background: #fffbeb; } /* gentle highlight while editing */

button.danger {
  background:#ef4444; color:#fff; border:1px solid #dc2626; border-radius:10px;
  padding:10px 14px; cursor:pointer;
}
button.danger:hover { background:#dc2626; }
button.is-disabled { opacity:.6; cursor:not-allowed; }


/* Forms */
input, select, textarea{
  width:100%;
  background:#0b1426;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{ color:#7f95bc }
input:focus, select:focus, textarea:focus{
  border-color:#3b5ea0;
  box-shadow: var(--ring);
}
label{ display:block; font-size:.92rem; color:var(--muted); margin-bottom:6px }

/* Tables */
table{ width:100%; border-collapse:collapse; }
thead th{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  padding:10px;
  position:sticky; top:0; background:rgba(16,26,46,.85); backdrop-filter: blur(3px);
}
tbody td{
  border-bottom:1px solid rgba(34,49,83,.6);
  padding:10px;
}
tbody tr:hover{ background: rgba(255,255,255,.02) }
tbody tr:last-child td{ border-bottom:0 }

input[type="checkbox"]{
  width:18px; height:18px; vertical-align:middle; cursor:pointer;
  accent-color:#6fb9ff;
}

/* Badges / Pills */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px; font-size:.80rem;
  border:1px solid var(--border);
  background:#0e1a32; color:#cfe1ff;
}
.badge.green{ background:#173226; color:#b8ffe3; border-color:#285f49 }
.badge.blue{  background:#0e243b; color:#cfe1ff; border-color:#21456f }
.badge.gray{  background:#1a2236; color:#d2daea; border-color:#2a3654 }
.badge.warn{  background:#3a2a10; color:#ffe3a0; border-color:#5e471a }

/* Toolbar utilities */
.toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }

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

/* Toasty status label inside cards */
.status-line{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* Responsive tweaks */
@media (max-width: 720px){
  header{ gap:10px }
  .container{ padding:14px }
  .card{ padding:14px }
  thead th{ position:static }
}

/* Scrollbar (Chromium/Edge) */
*::-webkit-scrollbar{ height:12px; width:12px }
*::-webkit-scrollbar-thumb{ background:#24385f; border-radius:10px; border:3px solid transparent; background-clip:content-box }
*::-webkit-scrollbar-thumb:hover{ background:#2e4a7d; border:3px solid transparent; background-clip:content-box }

/* Print (for roster/history pages) */
@media print{
  body{ background:#fff; color:#000 }
  header{ display:none }
  .card{ box-shadow:none; border:1px solid #ddd; background:#fff }
  .badge{ border:1px solid #888; color:#000; background:#eee }
  a{ color:#000; text-decoration:none }
}
/* Force black checkmark for all checkboxes */
input[type="checkbox"] {
  accent-color: #000; /* Chrome, Edge, Firefox, Safari 15+ */
}

/* --- Page layout so only the Check-ins area scrolls --- */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }

/* wrapper used by pages */
.page { flex: 1; display: flex; flex-direction: column; }
.main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* everything above the table lives here and stays visible */
.top-stack { display: flex; flex-direction: column; gap: 12px; }

/* only this area scrolls */
.scroll-area { flex: 1; min-height: 0; overflow: auto; padding-bottom: 12px; }

/* keep table header visible while you scroll the rows */
table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #f9fafb; /* same as your th background */
}

/* always-visible footer */
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #111827; color: #fff; text-align: center;
  padding: 8px 12px; font-size: 12px; z-index: 50;
}
/* avoid footer covering content */
body { padding-bottom: 44px; }

/* (already added earlier) black checkmarks for all checkboxes */
input[type="checkbox"] { accent-color: #000; }