/* =====================================================
   Global Theme Variables (Obsidian × Linear)
   ===================================================== */

:root{
  --bg: #0b0f17;
  --bg2:#071224;

  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);
  --text2: rgba(255,255,255,.72);
  --muted: rgba(255,255,255,.56);

  --accent: #7c3aed;
  --success: #22c55e;
  --danger:#ef4444;

  --shadow: 0 10px 30px rgba(0,0,0,.45);

  /* Sharp UI */
  --radius: 0px;

  --ring: 0 0 0 3px rgba(124,58,237,.28);
}

/* =====================================================
   Base Reset / Layout
   ===================================================== */

*{ box-sizing:border-box; }
html, body{ height:100%; }

/* iOS Safari grid overflow guard */
.grid > div { min-width: 0; }
input, select { min-width: 0; }

/* specifically help datetime-local overflow */
input[type="datetime-local"]{
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

body{
  margin:0;
  padding:24px;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  background-color: var(--bg);
  background-image:
    radial-gradient(900px 400px at 20% 0%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(700px 300px at 90% 10%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.wide{ max-width:1200px; margin:0 auto; }

/* =====================================================
   Cards / Headings
   ===================================================== */

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

h1,h2,h3{
  margin:0 0 12px 0;
  letter-spacing:-0.02em;
}

h1{ font-size:28px; }
h2{ font-size:22px; }
h3{ font-size:16px; opacity:.95; }

.muted{
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
}

/* Title row used for "Recent QSOs" + badge */
.cardTitleRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px 0;
}

/* QSO count badge base */
.qsoCount{
  font-weight: 700;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--radius);
}

/* No QSOs yet → RED */
.qsoCount.is-empty{
  color: var(--danger);
  border: 1px solid rgba(239,68,68,.30);
  background: rgba(239,68,68,.10);
}

/* QSOs present → GREEN */
.qsoCount.has-count{
  color: var(--success);
  border: 1px solid rgba(34,197,94,.30);
  background: rgba(34,197,94,.08);
}

/* =====================================================
   Toasts
   ===================================================== */

.toastHost{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  pointer-events:none;
  border: 1px solid var(--border2);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  min-width: 180px;
  max-width: min(360px, calc(100vw - 32px));
  box-shadow: var(--shadow);
}

.toast.success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
}

.toast.danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}

/* =====================================================
   Top Bar / Layout
   ===================================================== */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* =====================================================
   Buttons (NORMALIZED)
   ===================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 14px;
  min-height: 40px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(124,58,237,.92), rgba(124,58,237,.75));
  border: 1px solid rgba(124,58,237,.35);
  color: rgba(255,255,255,.95);
  text-decoration:none;
  cursor:pointer;

  transition: transform .08s ease, opacity .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 24px rgba(124,58,237,.18);

  appearance: none;
  -webkit-appearance: none;
}

a.btn{ line-height: 1; }

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); opacity:.92; }

.btn.secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border2);
  color: var(--text);
  box-shadow:none;
}

.btn:focus,
.btn:focus-visible{
  outline:none;
  box-shadow: var(--ring);
}

.btn:disabled{
  opacity:.60;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* =====================================================
   Errors
   ===================================================== */

.error{
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: rgba(255,255,255,.88);
  padding: 10px 12px;
  border-radius: var(--radius);
  margin: 10px 0;
}

/* =====================================================
   Forms / Inputs
   ===================================================== */

label{
  display:block;
  font-size:12px;
  color: var(--text2);
  margin: 10px 0 10px;
  letter-spacing:.02em;
}

label .tokenBadge{
  margin-left:6px;
  vertical-align:middle;
  position: relative;
  top: -1px;
}

input, select{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  transition: border-color .12s ease, box-shadow .12s ease;
}

input::placeholder{
  color: rgba(255,255,255,.35);
}

input:focus,
input:focus-visible,
select:focus,
select:focus-visible{
  outline:none;
  border-color: rgba(124,58,237,.55);
  box-shadow: var(--ring);
}

select{
  appearance: none;
  background-color: rgba(0,0,0,.28);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 12px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

select option{
  background-color: #0b0f17;
  color: rgba(255,255,255,.92);
}

select option:checked,
select option:hover{
  background-color: rgba(124,58,237,.25);
}

/* =====================================================
   Token UI (setup + log)
   ===================================================== */

.titleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.tokenRow{
  display:flex;
  align-items:center;
  gap:8px;
}

.tokenField{
  width: 360px;
  max-width: 55vw;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing:.02em;
  background: rgba(0,0,0,.18);
}

.copyStatus{
  font-size:12px;
  color: rgba(255,255,255,.60);
  width:64px;
}

.tokenBox{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  padding: 12px;
  margin-bottom:14px;
}

.tokenHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.tokenBadge{
  margin-left:8px;
  padding:2px 8px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-size:12px;
  color: rgba(255,255,255,.62);
}

/* =====================================================
   QSO Rows
   ===================================================== */

.qsoRow{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  padding: 12px;
  margin-bottom: 10px;
}

.grid{
  display:grid;
  grid-template-columns:
    1.2fr
    1fr
    .8fr
    .8fr
    .4fr
    1fr
    1.4fr;
  gap:10px;
  align-items:end;
}

.hidden{ display:none; }

/* =====================================================
   P2P checkbox field styling
   ===================================================== */

.p2pField{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:end;
}

.checkboxBox{
  min-height: 40px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}

.checkboxBox input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color: var(--accent);
  cursor:pointer;
}

.mini-actions{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;
}

.removeBtn{
  background: transparent;
  border: 1px solid rgba(239,68,68,.25);
  color: rgba(239,68,68,.95);
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor:pointer;
}

.removeBtn:hover{
  background: rgba(239,68,68,.10);
}

/* =====================================================
   RST Quick-fill Chips
   ===================================================== */

.rstChips{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.rstChipsLabel{
  font-size:12px;
  color: rgba(255,255,255,.55);
}

.chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  padding: 6px 10px;
  font-size:12px;
  cursor:pointer;
  border-radius:0;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

.chip:hover{
  border-color: rgba(124,58,237,.40);
  background: rgba(124,58,237,.10);
}

.chip:active{
  transform: translateY(1px);
}

.chip:focus,
.chip:focus-visible{
  outline:none;
  box-shadow: var(--ring);
}

/* =====================================================
   Tables
   ===================================================== */

.tableWrap{
  width:100%;
  overflow-x:auto;
  margin-top:10px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.12);
}

table{
  width:100%;
  border-collapse: collapse;
  font-size:13px;
  min-width:900px;
}

thead th{
  position: sticky;
  top:0;
  background: rgba(15,23,42,.92);
  color: rgba(255,255,255,.78);
  font-weight:600;
  letter-spacing:.02em;
  border-bottom:1px solid var(--border);
}

th, td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

tbody tr:hover{
  background: rgba(124,58,237,.06);
}

/* Column alignment */
table th:nth-child(1),
table td:nth-child(1),

table th:nth-child(3),
table td:nth-child(3),

table th:nth-child(4),
table td:nth-child(4),

table th:nth-child(5),
table td:nth-child(5),

table th:nth-child(6),
table td:nth-child(6){
  text-align: center;
}

table th:nth-child(2),
table td:nth-child(2),
table th:nth-child(7),
table td:nth-child(7){
  text-align: left;
}

/* ✅ Delete column: narrow + right aligned */
table th:last-child,
table td:last-child{
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 8px;
}

/* Delete button */
.deleteQsoBtn{
  border: 1px solid rgba(239,68,68,.30);
  background: rgba(239,68,68,.10);
  color: rgba(239,68,68,.95);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  line-height: 1;
  font-weight: 800;
}

.deleteQsoBtn:hover{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.45);
}

.deleteQsoBtn:active{
  opacity:.90;
}

.deleteQsoBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width:1000px){
  body{ padding:16px; }
  .grid{ grid-template-columns:1fr; }
  .topbar{ flex-direction:column; }
  .top-actions{ flex-wrap:wrap; }
}

@media (max-width:700px){
  .titleRow{ flex-direction:column; align-items:flex-start; }
  .tokenField{ width:100%; max-width:100%; }
}

/* Row actions */
.row-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
}

@media (prefers-reduced-motion: reduce) {
  *{ transition: none !important; }
}

/* =====================================================
   Band/Mode selectable chips (+More popover)
   ===================================================== */

.selectionGroup{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
}

.chipRow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, max-content));
  gap: 8px;
  align-items: center;
  margin: 6px 0 18px;
}

.chip.active{
  border-color: rgba(124,58,237,.55);
  background: rgba(124,58,237,.18);
  color: rgba(255,255,255,.92);
}

.chip[data-more-toggle]{
  opacity: .60;
  border-style: dashed;
}

.chip[data-more-toggle]:hover{
  opacity: 1;
}

.chipMoreWrap{
  position: relative;
  display: inline-block;
}

.chipMoreWrap .chipMenu{
  display:none !important;
  position:absolute;
  top: calc(100% + 8px);
  left: 0;

  min-width: 180px;
  padding: 8px;

  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);

  z-index: 50;
}

.chipMoreWrap .chipMenu.open{
  display:block !important;
}

.chipMenuItem{
  width:100%;
  text-align:left;

  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.86);

  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius);
}

.chipMenuItem:hover{
  border-color: rgba(124,58,237,.35);
  background: rgba(124,58,237,.10);
}

.chipMenuItem[aria-checked="true"]{
  border-color: rgba(124,58,237,.55);
  background: rgba(124,58,237,.18);
}