/* ============================================================
   Beacon Camera Club Programme Calendar — style.css
   Complete fresh file — replaces all previous versions
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #1a3a52;
  --blue:      #1a5c8a;
  --blue-lt:   #e8f4fd;
  --blue-mid:  #c2dff5;
  --ink:       #1e2a35;
  --muted:     #5a6e7f;
  --faint:     #8da0b0;
  --border:    #dde6ed;
  --surface:   #f4f7fa;
  --white:     #ffffff;
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 2px 12px rgba(26,58,82,.10);
  --shadow-lg: 0 8px 40px rgba(26,58,82,.18);
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --topbar-h:  60px;
}

html { font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Belt-and-suspenders iOS safe area: applied at body level so PWA
     standalone mode on iPhone always honours the insets */
  padding-left:   env(safe-area-inset-left,   0px);
  padding-right:  env(safe-area-inset-right,  0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }

/* ── Top bar ──────────────────────────────────────────────── */
.topbar {
  background: var(--navy);
  position: sticky; top: 0; z-index: 200;
  height: var(--topbar-h);
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.topbar-inner {
  max-width: 1100px; margin: 0 auto;
  height: 100%;
  padding: 0 max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 1rem;
}
.logo { display:flex; align-items:center; gap:.5rem; color:#fff; font-family:var(--font-head); }
.logo-img { height:36px; width:auto; flex-shrink:0; filter:invert(1); }
.logo-text { font-size:17px; font-weight:500; white-space:nowrap; }
.logo-text em { font-style:italic; color:#7ec8f0; }
.topnav { margin-left:auto; display:flex; gap:4px; }
.nav-btn {
  background:none; border:none;
  color:rgba(255,255,255,.7);
  border-radius:var(--radius-sm);
  padding:7px 12px;
  font-size:14px; font-family:var(--font-body);
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:background .15s, color .15s;
}
.nav-btn i { font-size:17px; }
.nav-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav-btn.active { background:rgba(255,255,255,.18); color:#fff; }

.view-toggle-group {
  display: flex; align-items: center; gap: 2px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.view-toggle-label {
  font-size: 12px; color: rgba(255,255,255,.6);
  white-space: nowrap; padding: 0 6px 0 4px;
}

@media(max-width:480px) {
  .view-toggle-label { display: none; }
  .nav-btn span:not(.sr-only) { display:none; }
  .nav-btn { padding:7px 9px; }
  .logo-text { font-size:15px; }
}

/* ── Token banner ─────────────────────────────────────────── */
.token-banner {
  background:#1d5c36; color:#fff;
  padding:.6rem 1.25rem;
  display:flex; align-items:center; gap:.75rem;
  font-size:13px;
}
.token-banner i { font-size:16px; flex-shrink:0; }
.token-banner span { flex:1; }
.banner-dismiss { background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-size:16px; display:flex; }
.banner-dismiss:hover { color:#fff; }

/* ── Content ──────────────────────────────────────────────── */
.content {
  max-width: 1100px; margin: 0 auto;
  padding: 1.25rem max(1.5rem, env(safe-area-inset-right)) 4rem max(1.5rem, env(safe-area-inset-left));
}

/* ── Filter pills ─────────────────────────────────────────── */
.filter-bar { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.filter-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
.pill-row { display:flex; gap:6px; flex-wrap:wrap; }
.pill {
  border:1.5px solid var(--border); border-radius:20px; padding:4px 13px;
  font-size:12px; font-weight:500; cursor:pointer;
  background:var(--white); color:var(--muted);
  transition:all .15s; white-space:nowrap;
}
.pill:hover { border-color:var(--blue); color:var(--blue); }
.pill.on { font-weight:600; }

/* ── Calendar ─────────────────────────────────────────────── */
/* cal-header: 3-col grid — Today | centred nav | balancing spacer */
.cal-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem; margin-bottom:1rem; }
.cal-nav { display:flex; align-items:center; justify-content:center; gap:.5rem; }
.cal-header-end { /* balancing spacer — same visual weight as .today-btn */ min-width:54px; }
.cal-title { font-family:var(--font-head); font-size:22px; font-weight:600; color:var(--navy);
             display:flex; align-items:baseline; gap:.35em; white-space:nowrap; }
.cal-year-select {
  font-family:var(--font-head); font-size:22px; font-weight:600; color:var(--navy);
  background:transparent; border:none; border-bottom:1.5px solid var(--blue);
  cursor:pointer; padding:0 2px; appearance:auto; -webkit-appearance:auto;
  outline:none; line-height:inherit;
}
.cal-year-select:focus { border-bottom-color:var(--navy); }
.icon-btn {
  width:34px; height:34px; background:var(--white);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); font-size:18px;
  transition:all .15s; flex-shrink:0;
}
.icon-btn:hover { border-color:var(--blue); color:var(--blue); }
.today-btn {
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--white); padding:6px 14px;
  font-size:13px; font-family:var(--font-body);
  cursor:pointer; color:var(--muted); transition:all .15s;
}
.today-btn:hover { border-color:var(--blue); color:var(--blue); }

.cal-grid { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.cal-day-names { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1.5px solid var(--border); background:var(--navy); }
.cal-day-names span { text-align:center; padding:9px 4px; font-size:11px; font-weight:600; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.07em; }
.cal-day-names .weekend { color:rgba(255,255,255,.45); }
.cal-cells { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-cell { min-height:90px; min-width:0; padding:6px 5px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; overflow:hidden; }
.cal-cell:hover { background:#f0f6fb; }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell.other-month { background:#f9fafb; }
.cal-cell.other-month .cell-num { color:#c5d0d8; }
.cal-cell.weekend { background:#fafbfc; }
.cal-cell.today .cell-num { background:var(--blue); color:#fff; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.cell-num { font-size:12px; font-weight:600; color:var(--ink); width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin-bottom:3px; }
.cell-events { display:flex; flex-direction:column; gap:2px; }
.cell-event { font-size:10.5px; padding:2px 5px; border-radius:3px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; line-height:1.4; }

@media(max-width:640px) {
  .cal-cell { min-height:56px; padding:4px 2px; }
  .cell-num { font-size:11px; width:20px; height:20px; }
  .cell-event { font-size:9px; padding:1px 3px; }
}

/* ── List view ────────────────────────────────────────────── */
.section-head { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); padding:1.5rem 0 .6rem; border-bottom:1px solid var(--border); margin-bottom:.75rem; }
.event-list { display:flex; flex-direction:column; gap:10px; }
.event-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; display:flex; gap:1rem; align-items:flex-start; cursor:pointer; transition:border-color .15s, box-shadow .15s; box-shadow:var(--shadow); }
.event-card:hover { border-color:var(--blue); box-shadow:0 4px 20px rgba(26,92,138,.12); }
.date-block { min-width:50px; text-align:center; background:var(--navy); color:#fff; border-radius:var(--radius-sm); padding:7px 5px; flex-shrink:0; }
.date-block .db-month { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.7; line-height:1; }
.date-block .db-day { font-family:var(--font-head); font-size:26px; font-weight:600; line-height:1.1; }
.date-block .db-dow { font-size:10px; opacity:.6; line-height:1; margin-top:1px; }
.event-info { flex:1; min-width:0; }
.ev-title { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.ev-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--muted); align-items:center; }
.ev-meta i { font-size:14px; vertical-align:-2px; }
.ev-badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:700; }
.no-events { text-align:center; padding:3rem 1rem; color:var(--faint); font-size:15px; }
.no-events i { font-size:40px; display:block; margin-bottom:.5rem; }

/* ── Modal ─────────────────────────────────────────────────── */
.overlay {
  position:fixed; inset:0; background:rgba(10,20,35,.5);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:500; opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.open { opacity:1; pointer-events:all; }
#overlay { z-index:600; }

.modal {
  background:var(--white); border-radius:var(--radius) var(--radius) 0 0;
  width:100%; max-width:540px; max-height:90vh; overflow-y:auto;
  padding:1rem 1.25rem;
  transform:translateY(40px); transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.overlay.open .modal { transform:translateY(0); }
.modal-wide { max-width:820px; }

@media(min-width:640px) {
  .overlay { align-items:center; }
  .modal { border-radius:var(--radius); max-height:85vh; }
}

/* ── Mobile: pin modal below topbar so content is fully scrollable ── */
@media(max-width:639px) {
  .overlay { align-items:flex-start; padding-top:calc(var(--topbar-h) + 0.5rem); }
  .modal { border-radius:var(--radius); max-height:calc(100vh - var(--topbar-h) - 1rem); }
}

.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.modal-title { font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--navy); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-row { margin-bottom:.55rem; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.form-hint { font-weight:400; text-transform:none; font-size:11px; color:var(--faint); }
.form-required { font-weight:600; text-transform:none; font-size:12px; color:#c0392b; }
input, select, textarea {
  width:100%; font-size:13px; font-family:var(--font-body);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:5px 9px; background:var(--white); color:var(--ink);
  transition:border-color .15s; appearance:auto;
}
input[type="color"] { padding:2px; cursor:pointer; width:48px; height:36px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,92,138,.1); }
textarea { resize:vertical; min-height:56px; }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.colour-input-row { display:flex; gap:8px; align-items:center; }
.colour-input-row input[type="color"] { flex-shrink:0; }
.colour-input-row input[type="text"] { flex:1; }
@media(max-width:480px) { .form-2col { grid-template-columns:1fr; } }

.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:var(--radius-sm); font-size:14px; font-family:var(--font-body); font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none; }
.btn-primary { background:var(--blue); color:#fff; border:none; width:100%; justify-content:center; margin-top:.4rem; padding:7px; }
.btn-primary:hover { background:#154e78; }
.btn-secondary { background:var(--white); color:var(--muted); border:1.5px solid var(--border); }
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); }
.btn-danger { background:none; color:#b03030; border:1.5px solid #e8b4b4; }
.btn-danger:hover { background:#fdf0f0; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-row { display:flex; gap:8px; margin-top:1rem; flex-wrap:wrap; }

/* ── Event detail ───────────────────────────────────────────── */
.ev-detail-meta { display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted); margin:.75rem 0 1rem; }
.ev-detail-meta span { display:flex; align-items:center; gap:7px; }
.ev-detail-meta i { font-size:17px; color:var(--blue); flex-shrink:0; }
.ev-desc { font-size:14px; line-height:1.7; color:var(--ink); }

/* ── Upload notice ──────────────────────────────────────────── */
.upload-notice { background:#eef8f2; border:1.5px solid #a8ddc0; border-radius:var(--radius-sm); padding:.75rem 1rem; margin-bottom:1.25rem; font-size:13px; color:#1d5c36; display:flex; gap:.5rem; align-items:flex-start; }
.upload-notice i { font-size:16px; flex-shrink:0; margin-top:1px; }

/* ── Date warning ───────────────────────────────────────────── */
.date-warning { background:#fdf0f0; border:1.5px solid #e8b4b4; border-radius:var(--radius-sm); color:#8b2020; font-size:13px; padding:.5rem .75rem; margin-top:6px; display:flex; gap:6px; align-items:flex-start; line-height:1.5; }
.date-warning i { font-size:16px; flex-shrink:0; margin-top:1px; }

/* ══ ADMIN PANEL ════════════════════════════════════════════ */
.admin-login { max-width:300px; margin:0 auto; text-align:center; }
.admin-login p { font-size:14px; color:var(--muted); margin-bottom:1rem; }

.admin-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1.25rem; }
.admin-tab { background:none; border:none; border-bottom:2px solid transparent; padding:8px 18px; font-size:14px; font-family:var(--font-body); font-weight:600; cursor:pointer; color:var(--muted); margin-bottom:-2px; transition:all .15s; }
.admin-tab.on { color:var(--blue); border-bottom-color:var(--blue); }
.admin-tab-signout { margin-left:auto; color:#b03030 !important; }
.admin-tab-signout:hover { color:#7a2020 !important; }

.tab-toolbar { display:flex; justify-content:flex-end; margin-bottom:.75rem; }

/* ── Admin table — used for all tabular data in admin ──────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.admin-table thead { background: var(--navy); }
.admin-table th {
  text-align: left;
  padding: 9px 12px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
.admin-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: #f8fbfd; }

.td-center { text-align: center; }
.td-actions { white-space: nowrap; text-align: right; }

/* ── Inline action buttons ──────────────────────────────────── */
.copy-link {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 8px;
  font-size: 11px; cursor: pointer; color: var(--muted);
  transition: all .15s; white-space: nowrap;
  font-family: var(--font-body);
  margin-left: 3px;
}
.copy-link:hover { border-color: var(--blue); color: var(--blue); }
.copy-link.copied { border-color: #1d5c36; color: #1d5c36; }
.copy-link.danger { color: #b03030; border-color: #e8b4b4; }
.copy-link.danger:hover { background: #fdf0f0; }

/* ── Status badges ──────────────────────────────────────────── */
.badge-active   { color:#1d5c36; background:#eef8f2; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; }
.badge-inactive { color:#7a3020; background:#fdf0f0; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; }

/* ── Colour swatches ────────────────────────────────────────── */
.colour-swatch {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  margin-right: 2px;
  vertical-align: middle;
}

/* ── Slug code ──────────────────────────────────────────────── */
.slug-code { font-size: 11px; color: var(--faint); background: var(--surface); padding: 1px 5px; border-radius: 3px; }

/* ── Link URL display ───────────────────────────────────────── */
.link-url { font-family:monospace; font-size:11px; color:var(--muted); word-break:break-all; max-width:200px; margin-bottom:3px; }

/* ── Members panel (inline in groups table) ─────────────────── */
.members-cell { padding: 0 !important; background: var(--surface); }
.members-panel { padding: 1rem 1.25rem; }
.members-panel-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .75rem;
  font-size: 14px; color: var(--navy);
}
.members-panel-head i { font-size: 16px; }
.members-table { margin-bottom: 0; }

/* ── Spinner ──────────────────────────────────────────────── */
.spinner { display:flex; justify-content:center; padding:3rem; }
.spinner::after { content:''; width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 30px));
  opacity: 0;
  background: var(--navy); color: #fff;
  padding: 1.1rem 2rem;
  border-radius: var(--radius);
  font-size: 16px; font-weight: 600;
  z-index: 2000;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
  pointer-events: none;
  max-width: 480px; width: 90%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.toast.show {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* ── Subscribe bar ──────────────────────────────────────── */
.subscribe-bar {
  margin-bottom: 1.25rem;
}

/* Desktop: search and subscribe link on same row */
@media (min-width: 700px) {
  .search-subscribe-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
  }
  .search-subscribe-row .search-bar {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    order: 1;
  }
  .search-subscribe-row .subscribe-bar {
    flex-shrink: 0;
    margin-bottom: 0;
    order: 2;
  }
  /* Search hint always sits below the search/subscribe row, above the expanded form */
  .search-subscribe-row .search-hint {
    flex-basis: 100%;
    order: 3;
    margin-top: -.25rem;
    margin-bottom: .5rem;
  }
  /* When the form is open, push subscribe bar below the hint */
  .search-subscribe-row .subscribe-bar.sub-open {
    flex-basis: 100%;
    order: 4;
  }
}
.subscribe-details { }
.subscribe-summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.subscribe-summary::-webkit-details-marker { display: none; }
.subscribe-summary i { font-size: 1rem; }
.subscribe-details[open] .subscribe-summary {
}
.subscribe-form-wrap {
  padding: .9rem 1rem 1rem;
}
.subscribe-intro {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .75rem;
  line-height: 1.5;
}
.subscribe-groups {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  margin-bottom: .85rem;
}
.subscribe-groups-loading {
  font-size: .82rem;
  color: var(--faint);
}
.subscribe-groups label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.subscribe-groups input[type=checkbox] {
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.subscribe-fields {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.sub-input {
  flex: 1;
  min-width: 140px;
  padding: .45rem .7rem;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.sub-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(26,92,138,.15); }
.sub-btn {
  padding: .45rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.sub-btn:hover { background: var(--navy); }
.sub-msg {
  margin-top: .65rem;
  padding: .45rem .8rem;
  border-radius: var(--radius-sm);
  font-size: .82rem;
}
.sub-msg.ok  { background: #e6f4ea; color: #2e6b3e; }
.sub-msg.err { background: #fdecea; color: #9c2c2c; }

/* ── Search bar ──────────────────────────────────────────── */
.search-bar {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .75rem; flex-wrap: wrap;
}
.search-input-wrap {
  display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 200px;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 .75rem;
  transition: border-color .15s;
}
.search-input-wrap:focus-within { border-color: var(--blue); }
.search-input-wrap i { color: var(--faint); font-size: 16px; flex-shrink: 0; }
.search-input-wrap input {
  border: none; box-shadow: none; padding: .45rem 0;
  flex: 1; font-size: 14px; width: auto;
}
.search-input-wrap input:focus { outline: none; box-shadow: none; border-color: transparent; }
.search-past-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.search-past-label input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--blue); cursor: pointer;
}
.search-btn {
  padding: .45rem 1.1rem; font-size: 13px; font-weight: 600;
  background: var(--blue); color: var(--white); border: none;
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-body); white-space: nowrap; transition: background .15s;
}
.search-btn:hover { background: var(--navy); }
.search-hint {
  font-size: 12px; color: var(--faint);
  margin: -.25rem 0 .75rem;
  line-height: 1.5;
}

/* ── Search result nav bar ───────────────────────────────── */
.search-nav {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .75rem; padding: .5rem .75rem;
  background: #fff8e1; border: 1.5px solid #ffe082;
  border-radius: var(--radius-sm);
}
.search-count { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.search-nav-btn {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px;
  cursor: pointer; color: var(--muted); display: flex; align-items: center;
  gap: 3px; font-family: var(--font-body); transition: all .15s;
}
.search-nav-btn:hover { border-color: var(--blue); color: var(--blue); }
.search-nav-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.search-clear-btn {
  background: none; border: 1.5px solid #e8b4b4; border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: 12px; cursor: pointer; color: #b03030;
  display: flex; align-items: center; gap: 3px;
  font-family: var(--font-body); transition: all .15s;
}
.search-clear-btn:hover { background: #fdf0f0; }

/* ── Search highlight (calendar cell) ───────────────────── */
.cal-cell.search-highlight {
  background: #fff9c4 !important;
  box-shadow: inset 0 0 0 2px #f9a825;
}