:root{
  --bg:#f6f7fb;
  --card:#fff;
  --border:#e5e7eb;
  --muted:#6b7280;
  --primary:#2563eb;
  --primaryHover:#1e40af;
  --danger:#dc2626;
  --dangerHover:#b91c1c;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.small{ font-size:.875rem; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  margin:1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Topbar */
.topbar{ padding:8px 16px; margin:0 1rem .5rem 1rem; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar-left{ display:flex; align-items:center; gap:8px; }
.welcome{
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:bold;
  font-size: 2em;
  text-transform: none;
}
.welcome-username { text-transform: uppercase; }
.welcome-label { margin-right: .35em; text-transform: none; }
.welcome-username { text-transform: uppercase; }

/* .welcome-label{ opacity:.8; }*/
#username{ font-weight:700; }

/* Buttons */
button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  background:#f8fafc; color:#111; border:1px solid #cbd5e1;
  border-radius:8px; cursor:pointer; text-decoration:none;
  line-height:1.2; padding:.5rem .8rem;
}
button:hover, .btn:hover{ background:#eef2f7; }

.btn-primary{ background:var(--primary); color:#fff; border:0; }
.btn-primary:hover{ background:var(--primaryHover); }

.btn-secondary{ background:#6c757d; color:#fff; border:0; }
.btn-secondary:hover{ background:#5a6268; }

.btn-outline{ background:#fff; border:1px solid #6c757d; color:#6c757d; }
.btn-outline:hover{ background:#f8f9fa; border-color:#5a6268; color:#111; }

.btn-danger{ background:var(--danger); color:#fff; border:0; }
.btn-danger:hover{ background:var(--dangerHover); }

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

.btn-icon{ padding:4px 8px; }
.btn-xs{ padding:2px 6px; font-size:12px; line-height:1.2; }

/* Inputs */
input,select,button{
  font:inherit;
  padding:.5rem .7rem;
  border:1px solid #cbd5e1;
  border-radius:8px;
}
.form-control{ padding:.45rem .6rem; }

/* Tables */
.table-wrap {
  max-height: 480px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
table{ width:100%; border-collapse:collapse; }
th,td{ padding:.5rem .6rem; border-bottom:1px solid #eef2f7; text-align:left; }
/* th.sortable{ cursor:pointer; user-select:none; position:sticky; top:0; background:#fff; z-index:2; box-shadow:0 1px 0 var(--border); }
*/

#ops-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;                 /* a tad higher to sit above body cells */
  box-shadow: 0 1px 0 var(--border);
}

/* Keep sortable-specific affordances */
th.sortable {
  cursor: pointer;
  user-select: none;
}

/* Zebra striping */
#ops-table tbody tr:nth-child(odd) { background-color: #f1f5f9; }
#ops-table tbody tr:nth-child(even){ background-color: #ffffff; }

/* Badges */
.badge-tag{
  display:inline-block; padding:2px 6px; border-radius:6px; font-size:.8em;
  margin-right:4px; color:#fff; line-height:1.2;
}
.badge-member{ background:#007bff }
.badge-visitor{ background:#6c757d }
.badge-ares{ background:#28a745 }
.badge-cert{ background:#ffc107; color:#111 }
.badge-skywarn{ background:#17a2b8 }
.badge-arc{ background:#dc3545 }
.badge-active{ background:#6f42c1; color:#fff }

/* Optional compact pill for collapsed tags on small screens */
.tags-chip{
  display:none !important;       /* force hidden on desktop */
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f8fafc;
  font-size:.8rem;
  color:#111;
  white-space:nowrap;
}

/* Operators header layout */
.operators-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ops-left{ display:flex; align-items:center; gap:8px; }
.ops-title{ font-weight:700; text-align:center; flex:1; }
.ops-right{ display:flex; align-items:center; gap:8px; }

/* Bold helpers */
.bold{ font-weight:700; }

/* Current checkins scroll area tighter */
#current-checkins .table-wrap { max-height: 360px; overflow:auto; border:1px solid var(--border); border-radius:8px; }

/* Net header split with status under */
.net-header{ display:flex; flex-direction:column; gap:10px; }
.net-top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
}
.net-left, .net-past{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.net-status{ display:flex; justify-content:flex-start; padding-top:4px; }

/* Add Operator cleaner menu (2-column) */
.strong { font-weight: 700; }

#add-operator-card .ao-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#add-operator-card .ao-title { font-weight: 700; letter-spacing: .2px; }

#add-operator-card .ao-body-2col {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items:start;
}
#add-operator-card .ao-left,
#add-operator-card .ao-right {
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
#add-operator-card .ao-subtitle { margin:0 0 4px; font-weight:600; }
#add-operator-card .ao-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#add-operator-card .ao-file { flex:1 1 220px; min-width:180px; }

#add-operator-card .ao-row {
  display: grid; grid-template-columns: max-content 1fr max-content 1fr;
  gap: 10px 6px; align-items: center;
}
#add-operator-card .ao-row-notes { grid-template-columns: max-content 1fr; }
#add-operator-card .ao-label { white-space: nowrap; color:#111; }

#add-operator-card .ao-input, #add-operator-card .ao-select {
  height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; outline: none; min-width: 0;
}
#add-operator-card .ao-input:focus, #add-operator-card .ao-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
#add-operator-card .ao-divider { height:1px; background:var(--border); margin:2px 0; }
#add-operator-card .ao-row-tags { grid-template-columns: max-content 1fr; align-items:start; }
#add-operator-card .ao-tags { display:flex; flex-wrap:wrap; gap:8px 14px; }
#add-operator-card .ao-tag {
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:8px; background:#f8fafc; border:1px solid var(--border);
}
#add-operator-card .ao-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:2px; }

/* Simple grid helper used on login card */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 640px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* ===== Modal fix for Change Password ===== */
.modal.hidden { display: none !important; }

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;            /* ensure modal stack is above app */
}

.modal-body {
  padding: 8px 16px 16px 32px;  /* top, right, bottom, left */
  display: grid;
  gap: 12px;
}

.modal-backdrop {
  position: fixed;          /* fill entire screen */
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;            /* lower than the card */
}

/* Center the modal header title */
.modal-header {
  text-align: center;
}

.modal-header h3 {
  margin: 0;
  font-weight: bold;
  font-size: 1.25rem;
}

/* Center the footer buttons */
.modal-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
}

.modal-card {
  position: relative;
  z-index: 1001;            /* ABOVE backdrop */
  background: #fff;
  border-radius: 12px;
  width: min(520px, 92vw);
  max-width: 560px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  pointer-events: auto;     /* allow mouse input */
}

/* Pill (used by current net readout if present) */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5ch;
  padding:.25rem .6rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:.9rem;
}

/* =========================================================
   Responsive collapse of last 4 columns (ARES, CERT, SkyWarn, ARC)
   Works regardless of total column count by targeting the last 4 cells.
   Also reveals an optional .tags-chip cell on small screens.
   ========================================================= */
@media (max-width: 820px){
  /* Hide last four columns in the table body and header */
  #ops-table th:nth-last-child(-n+4),
  #ops-table td:nth-last-child(-n+4){
    display:none !important;
  }

  /* Tighten spacing on mobile */
  th, td { padding: .45rem .5rem; }
  .table-wrap { max-height: 60vh; }
}

/* Make action buttons same size as tag badges */
#ops-table .op-actions .btn-sm {
  padding: 2px 6px;
  font-size: 0.8em;
  line-height: 1.2;
  border-radius: 6px;
  min-height: 0;   /* prevent browser default button height from stretching */
}

/* Keep variant styles but inherit the compact sizing */
#ops-table .op-actions .btn-sm.btn-primary,
#ops-table .op-actions .btn-sm.btn-outline,
#ops-table .op-actions .btn-sm.btn-danger {
  padding: 2px 6px;
  font-size: 0.8em;
  line-height: 1.2;
  border-radius: 6px;
}
#ops-table .op-actions {
  white-space: nowrap;
}
#ops-table .op-actions .btn-sm + .btn-sm {
  margin-left: 4px;
}

/* --- Mobile polish --- */
@media (max-width: 700px) {
  /* Bigger tap targets */
  button, .btn, input, select {
    min-height: 44px;
  }

  /* Reduce card padding a bit to fit more on screen */
  .card { padding: .8rem; }

  /* Make the tables a bit more scroll-friendly */
  .table-wrap { overflow-x: auto; }

  /* Keep the topbar lean on mobile */
  .topbar-inner { gap: 8px; }
  .welcome { font-size: 1.3em; }
}

/* ===== Login polish ===== */
.login-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.login-card{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  text-align: center;
}

.brand .logo{
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primaryHover));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 22px;
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
}

.brand-title{
  margin: 6px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .2px;
}

.brand-subtitle{
  color: var(--muted);
  font-size: .95rem;
  margin-top: 2px;
}

.login-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-actions .btn-primary{
  min-width: 120px;
}

/* Simple 2-col grid helper for the form */
.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* ===== Finance: Dues & Donations (Owner) ===== */

#owner-finance-card {
  padding: 0;
  overflow: hidden;
}

/* Header */
.finance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #fafbff);
}

.finance-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .2px;
}

.finance-title .logo-chip {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primaryHover));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
}

.finance-header-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Metrics row */
.finance-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.metric {
  background: #f8fafc;
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.metric .label { color: var(--muted); font-size: .9rem; }
.metric .value { font-weight: 800; font-size: 1.15rem; }

/* Forms area */
.finance-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.finance-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.finance-form h4 {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1rem;
}

.finance-form .grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.finance-form .grid-1 { grid-template-columns: 1fr; }

.finance-form .row {
  display: grid;
  gap: 8px;
  grid-template-columns: max-content 1fr;
  align-items: center;
}
.finance-form label { white-space: nowrap; color:#111; }
.finance-form input, .finance-form select, .finance-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  outline: none;
  min-height: 36px;
  padding: 6px 10px;
}
.finance-form textarea { min-height: 72px; resize: vertical; }
.finance-form .actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Tables block */
.finance-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}

.finance-table-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.finance-table-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}

.finance-table-head .title {
  font-weight: 700;
  letter-spacing: .2px;
}

.finance-table-head .tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Search input */
.finance-search {
  max-width: 260px;
}

/* Table visuals */
.finance-table-card .table-wrap {
  max-height: 420px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
}
.finance-table-card table { width: 100%; border-collapse: collapse; }
.finance-table-card thead th {
  position: sticky; top: 0; z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: .55rem .6rem;
}
.finance-table-card tbody td {
  border-bottom: 1px solid #eef2f7;
  padding: .55rem .6rem;
}
.finance-table-card tbody tr:nth-child(odd)  { background: #f9fbfd; }
.finance-table-card tbody tr:nth-child(even) { background: #ffffff; }
.finance-table-card tbody tr:hover { background: #eef5ff; }

/* Footer message line */
.finance-footer {
  padding: 10px 16px 16px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; color: var(--muted);
}

/* Responsive */
@media (max-width: 1024px) {
  .finance-forms { grid-template-columns: 1fr; }
  .finance-tables { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .finance-metrics { grid-template-columns: 1fr; }
  .finance-header { padding: 12px; }
  .finance-forms, .finance-tables { padding: 12px; }
  .finance-table-card { padding: 10px; }
  .finance-form .row { grid-template-columns: 1fr; }
}

/* Hide owner-only controls by default... */
.owner-only { display: none !important; }
/* ...but show them when an owner is logged in */
.is-owner .owner-only { display: inline-flex !important; }  /* or inline/block as you prefer */

#inactive-days-panel .muted.small { margin-left: 4px; }
.owner-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Cardlets */
.owner-settings-box {
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface, #fff);
}

.owner-settings-title {
  margin: 0 0 10px;
  font-size: 1rem;
}

/* Small helpers */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

/* Responsive: stack on narrow screens */
@media (max-width: 720px) {
  .owner-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Owner-only separator */
.owner-only-sep {
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .4px;
}
.owner-only-sep::before,
.owner-only-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border, #ddd);
  opacity: .9;
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,1px,1px);
  white-space:nowrap;border:0;
}


/* ===== Section separators (Owner Settings / Add Operator, etc.) ===== */
.section-sep {
  --sep-color: var(--border, #e5e7eb);
  --sep-label-bg: var(--bg, #f6f7fb);
  --sep-text: #111;

  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 16px 10px;
}

.section-sep::before,
.section-sep::after {
  content: "";
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--sep-color),
    transparent
  );
}

.section-sep .label {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sep-label-bg);
  border: 1px solid var(--sep-color);
  font-weight: 800;
  letter-spacing: .25px;
  color: var(--sep-text);
  line-height: 1;
  white-space: nowrap;
}

/* Compact variant for tight cards */
.section-sep.sm {
  margin: 12px 8px 8px;
  gap: 10px;
}
.section-sep.sm .label {
  padding: 3px 8px;
  font-weight: 700;
  font-size: .95rem;
}

/* Darken a bit when inside cards (helps contrast on white) */
.card .section-sep {
  --sep-label-bg: #fff;
  --sep-color: var(--border, #e5e7eb);
}

/* If you want an icon chip in the label, it aligns nicely */
.section-sep .icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primaryHover));
  color: #fff;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}

/* Accessibility: ensure separators never overlap sticky table headers */
#ops-table thead th { position: sticky; z-index: 3; }
.section-sep { z-index: 1; position: relative; }


/* Separator icon uses the app’s tower image */
.section-sep .sep-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  object-fit: contain;
  margin-right: 4px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
  /* Prevent layout shift if image takes a moment */
  vertical-align: -3px;
}

.section-sep .label {
  font-size: 1.2rem;   /* slightly larger */
  font-weight: 800;     /* stronger weight */
  letter-spacing: .4px; /* optional: a bit more spacing */
}


/* =========================
   Floating Morse background
   ========================= */

/* =========================
   Floating Morse background
   ========================= */

/* Tweakables */
:root{
  --morse-color: rgba(0,0,0,.32);     /* light grey-ish, darker than before */
  --morse-shadow1: rgba(0,0,0,.10);   /* soft halo */
  --morse-shadow2: rgba(0,0,0,.18);   /* slightly darker edge for white UIs */
  --morse-size: 24px;                 /* a hair larger for legibility */
  --morse-speed: 60s;                 /* scroll period */
  --morse-weight: 700;                /* bold monospace for clean dots/dashes */
}

/* One clean, vertical scroll from bottom -> top using the 'top' property.
   Using 'top' avoids transform/fixed containment quirks in Chrome/Edge. */
@keyframes morse-scroll-up {
  0%   { top: 100vh; opacity: 0; }
  6%   { opacity: .6; }             /* fade in quickly */
  94%  { opacity: .6; }             /* stay visible while traversing */
  100% { top: -2rem; opacity: 0; }  /* fade out off-screen */
}

/* Make sure the page content sits above the background line */
#app,
#login-panel,
.topbar,
.card,
header, main, footer {
  position: relative;
  z-index: 2; /* UI above the line */
}

/* The line itself lives behind the UI but above the page background */
body::after{
  content: ".... .- -- -. . - / -... -.-- / -.- --... ...- ...- .--"; /* HAMNET BY K7VVW */
  position: fixed;
  left: 0;
  right: 0;
  top: 100vh;                      /* start just below the viewport */
  text-align: center;
  white-space: nowrap;
  pointer-events: none;

  z-index: 1;                      /* behind UI (z=2), above bg (z=0) */
  font: var(--morse-weight) var(--morse-size)/1.8 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  letter-spacing: .14em;
  color: var(--morse-color);
  text-shadow:
    0 0 8px var(--morse-shadow1),   /* soft glow for low-contrast areas */
    0 1px 0 var(--morse-shadow2);   /* subtle darker edge for white cards */

  animation: morse-scroll-up var(--morse-speed) linear infinite;
}

/* Keep the document stacking context predictable */
html, body { position: relative; z-index: 0; }