:root {
  --ink: #1f2430;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2f5d50;
  --accent-hover: #244a40;
  --bg: #f7f7f5;
  --card-bg: #ffffff;
  --full: #b45309;
  --open: #2f5d50;
  --display-font: "Fraunces", Georgia, "Times New Roman", serif;
}

h1, .hero h1, .brand, .about-card h2, .card.narrow h1 { font-family: var(--display-font); font-weight: 600; letter-spacing: -0.01em; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
header{
    background:white;
    border-bottom:1px solid #ddd;padding:14px 1.5rem;
    display:flex;
    justify-content:space-between;align-items:center;
    gap:20px}

.brand{
    font-weight:800;
    color:#1d2730;
    text-decoration:none;
    white-space:nowrap;
    flex-shrink:0}

nav{display:flex;gap:16px;align-items:center;flex-shrink:0}nav a{color:inherit}

.lang{position:relative;cursor:pointer;flex-shrink:0;white-space:nowrap}

.lang-menu{
    display:none;
    position:absolute;
    right:0;top:100%;
    background:white;
    border:1px solid #ddd;
    border-radius:8px;
    padding:6px;min-width:150px;
    z-index:5}

.lang:hover .lang-menu,.lang:focus-within

.lang-menu{display:block}.lang-menu a{display:block;padding:9px;text-decoration:none}

main{
    max-width:1000px;
    margin:30px auto;
    padding:0 18px}

.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }

.narrow{
    max-width:520px;
    margin:50px auto}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:14px}.event-card{text-decoration:none;color:inherit}

h1 { margin-top: 0; }

form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }

label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; }

input, textarea {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  cursor: pointer;
}
button:hover { background: var(--accent-hover); }

.btn-secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f0f0ee; }

.btn-paid, .btn-confirm { background: #16a34a; }
.btn-reverse { background: #b3261e; }
.btn-confirm:hover { background: #15803d; }
.btn-reverse:hover { background: #8f1e18; }

.flash {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}
.flash-success { background: #e6f4ea; color: #1e7a34; }
.flash-error { background: #fdecec; color: #b3261e; }

.event-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.tour-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.tour-filters input[type="search"] { flex: 1; min-width: 180px; font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.tour-filters select { flex: 0 0 auto; }

.event-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
}
.event-card:hover { border-color: var(--accent); }
.event-card.urgency-you { border-left-color: #2563eb; }
.event-card.urgency-wait { border-left-color: #9a5b00; }
.event-card.urgency-full { border-left-color: var(--full); }
.event-card.urgency-open { border-left-color: var(--open); }
.event-card h2 { margin: 0 0 0.2rem 0; font-size: 1.05rem; }

.badge {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #eee;
}
.badge-open { background: #e6f4ea; color: var(--open); }
.badge-full { background: #fdf1e0; color: var(--full); }
.badge-you { background: #e6eef4; color: #2563eb; }

.back-link { display: inline-block; margin-bottom: 1rem; color: var(--accent); text-decoration: none; }

.member-list { padding-left: 1.2rem; }

.admin-header { display: flex; justify-content: space-between; align-items: baseline; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--accent); text-decoration: underline; }
.sort-icon { color: var(--muted); font-size: 0.78em; }
.member-actions { text-align: right; white-space: nowrap; }
.member-actions form { margin: 0; display: inline-flex; }
.member-delete { padding: 0.25rem 0.45rem; font-size: 0.72rem; font-weight: 500; color: #8a4d4a; background: transparent; border: 1px solid #e5cfcd; }
.member-delete:hover { background: #fdf3f2; color: #7d3835; }
.member-subscription { padding: 0.3rem 0.5rem; font-size: 0.75rem; background: #e6f4ea; color: var(--open); border: 1px solid #c9e5d1; }
.member-subscription:hover { filter: brightness(0.97); }
.member-subscription.is-paused { background: #f4f4f2; color: var(--muted); border-color: var(--border); }
.minimum-note { margin: 0.65rem 0 0; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.minimum-price-note { display: inline-block; margin-top: 0.25rem; font-weight: 500; }
.checkbox-row { flex-direction: row; align-items: flex-start; gap: 0.65rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: #fbfbfa; cursor: pointer; }
.checkbox-row input { width: auto; margin: 0.2rem 0 0; }
.checkbox-row span { display: flex; flex-direction: column; gap: 0.15rem; font-weight: 400; }
.checkbox-row small { color: var(--muted); font-weight: 400; }

.language-switcher {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 100;
    font-size: 14px;
}

.language-switcher a {
    color: inherit;
    text-decoration: none;
    opacity: 0.6;
    margin: 0 4px;
}

.language-switcher a.active {
    opacity: 1;
    font-weight: 600;
}
.language-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.language-button {
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.language-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 150px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 1000;
}

.language-menu a {
  display: block;
  padding: 9px 12px;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
}

.language-menu a:hover {
  background: #f5f5f5;
}

.language-dropdown:hover .language-menu {
  display: block;
}

.auth-background {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0.82)
    ),
    url("/static/images/KMSKA.jpg") center center / cover no-repeat;

  min-height: 100vh;
}

.auth-background main {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- added: forms, payment states, participant cards --- */
select {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.btn-other { background: #f59e0b; }
button:disabled { cursor: default; }
.btn-other:hover, .btn-paid:hover, .btn-unpaid:hover { filter: brightness(0.95); }
button.btn-other:disabled, button.btn-paid:disabled { opacity: 1; }
button.btn-other:disabled:hover { background: #f59e0b; }
button.btn-paid:disabled:hover { background: #16a34a; }
button.danger { background: #b3261e; }
button.danger:hover { background: #8f1e18; }
#submit-btn:disabled { background: var(--muted); }

.person {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfbfa;
}
.person h3 { margin: 0; font-size: 1rem; }
#people { display: flex; flex-direction: column; }
#extra-people { display: contents; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-label { font-size: 0.9rem; font-weight: 600; }

.yn { display: inline-flex; width: fit-content; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.yn label { display: block; margin: 0; font-weight: 600; cursor: pointer; }
.yn input { position: absolute; opacity: 0; pointer-events: none; }
.yn span { display: block; padding: 0.5rem 1.3rem; color: var(--muted); }
.yn label + label span { border-left: 1px solid var(--border); }
.yn input:checked + span { background: var(--accent); color: #fff; }
.yn input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
[hidden] { display: none !important; }

.flash-warning { background: #fff4e0; color: #9a5b00; border: 1px solid #f5c26b; }
.badge-wait { background: #fff4e0; color: #9a5b00; }

/* multi-date tours */
.series-card { display: block; }
.series-card h2 { margin: 0 0 0.15rem 0; }
.sessions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.session-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--ink); background: #fbfbfa; }
.session-row:hover { border-color: var(--accent); }
.dates { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.dates li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: #fbfbfa; }
.dates a { color: var(--ink); text-decoration: none; font-weight: 600; }
.date-row { display: flex; gap: 0.5rem; align-items: center; }
.date-row input { flex: 1; }
button.secondary, .button.secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.secondary:hover { background: #f0f0ee; }
a.button { display: inline-block; padding: 0.65rem 1rem; border-radius: 8px; text-decoration: none; font-weight: 600; }


/* ===== polish ===== */
header { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 8px rgba(20, 30, 25, 0.05); }
a { color: var(--accent); }
button, a.button { transition: background 0.15s, filter 0.15s, transform 0.05s; }
button:active, a.button:active { transform: translateY(1px); }
a.button { background: var(--accent); color: #fff; }
a.button:hover { background: var(--accent-hover); }
a.button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--border); }
a.button.secondary:hover { background: #f0f0ee; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.small { font-size: 0.85rem; }
.lead { font-size: 1.05rem; color: #3a4150; }
h2 { font-size: 1.25rem; }

.hero {
  background: linear-gradient(rgba(24, 42, 36, 0.74), rgba(24, 42, 36, 0.74)), url("/static/images/KMSKA.jpg") center 35% / cover no-repeat;
  color: #fff; border-radius: 16px; padding: 2.4rem 1.9rem; margin-bottom: 1.5rem;
}
.hero h1 { margin: 0 0 0.3rem 0; font-size: 2rem; }
.hero p { margin: 0; opacity: 0.9; }
.hero-next {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem; padding: 0.5rem 0.9rem;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}
.hero-next a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.date-tile { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.4rem 0; border-radius: 12px; background: #eaf2ee; color: var(--accent); line-height: 1.1; }
.date-tile .w { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.date-tile .d { font-size: 1.5rem; font-weight: 800; }
.date-tile .m { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.date-tile.big { width: 72px; padding: 0.6rem 0; }
.date-tile.big .d { font-size: 1.9rem; }

.event-card { transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
a.event-card:hover { box-shadow: 0 4px 16px rgba(20, 30, 25, 0.08); transform: translateY(-1px); }
.event-card-main { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1; }
.event-card-details { min-width: 0; flex: 1; }
.event-card-status { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.event-card h2 { font-size: 1.1rem; }
.event-card p { margin: 0; }
.event-list.past { opacity: 0.7; }

.meter { height: 6px; width: 100%; max-width: 220px; background: #e9ece8; border-radius: 999px; overflow: hidden; margin-top: 0.45rem; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.meter.full > span { background: var(--full); }
.meter-row { display: flex; align-items: center; gap: 0.8rem; margin: 0.8rem 0 1.1rem; }
.meter-row .meter { margin: 0; max-width: 260px; flex: 1; }

.session-when { display: flex; align-items: center; gap: 0.9rem; }
.session-when .date-tile { width: 50px; }
.session-when .date-tile .d { font-size: 1.25rem; }
.session-row { padding: 0.55rem 0.8rem; }

.event-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 0.9rem; }
.event-head h1 { margin: 0 0 0.4rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { background: #f1f3ef; border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.88rem; }

.panel { border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem; background: #fbfbfa; margin: 0.9rem 0; }
.panel ul { margin: 0.4rem 0 0 0; padding-left: 1.1rem; }
.panel p { margin: 0.35rem 0; }
.panel.pay { background: #f1f7f4; border-color: #cfe3d9; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; background: #fff; border: 1px dashed var(--accent); padding: 0.1rem 0.5rem; border-radius: 6px; }

.people-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.people-table th { text-align: left; font-size: 0.8rem; color: var(--muted); font-weight: 600; padding: 0.3rem 0.4rem; }
.people-table td { padding: 0.5rem 0.4rem; border-top: 1px solid var(--border); }
.people-table .num, .people-table th.num { text-align: right; white-space: nowrap; }
.names { columns: 2; padding-left: 1.1rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.4rem 0; }

.empty { text-align: center; color: var(--muted); }
.admin-header h1 { margin-bottom: 0.2rem; }

footer { max-width: 1000px; margin: 2.5rem auto 2rem; padding: 0 18px; color: var(--muted); font-size: 0.85rem; text-align: center; }

@media (max-width: 640px) {
  /* Keep bank-transfer details inside the green payment panel on narrow screens.
     Desktop layout remains unchanged. */
  .panel.pay .transfer-details {
    width: 100%;
    min-width: 0;
  }
  .panel.pay .transfer-details div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
    min-width: 0;
  }
  .panel.pay .transfer-details strong {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  .panel.pay .transfer-details .ref {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  header { flex-wrap: nowrap; gap: 8px; padding: 10px 0.75rem; }
  header > nav { flex-wrap: nowrap; justify-content: flex-end; width: auto; gap: 6px; min-width: 0; }
  header .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 1.15rem; }
  header .user-menu { min-width: 0; flex: 0 1 auto; }
  header .user-menu summary { max-width: 132px; padding: 0.3rem 0.55rem; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lang-name { display: none; }
  .lang-menu { right: 0; left: auto; }
  .hero { padding: 1.5rem 1.1rem; }
  .hero h1 { font-size: 1.6rem; }
  .event-card { flex-wrap: wrap; gap: 0.6rem; }
  .event-head { align-items: flex-start; }
  .names { columns: 1; }
  .actions { flex-wrap: wrap; }
  .sidebar-panel { justify-content: flex-start; align-items: stretch; }
  .sidebar-panel a.sidebar-link { width: 100%; }
}

@media print {
  header, footer, .no-print, .back-link, .actions, form button { display: none !important; }
  body { background: #fff; }
  .card { border: none; padding: 0; }
  .admin-table { font-size: 12pt; }
  .admin-table td, .admin-table th { border-bottom: 1px solid #999; }
}

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0 1.2rem; }
.actions form { margin: 0; }
.actions button, .actions a.button { padding: 0.55rem 0.95rem; }
button.secondary { color: var(--ink); }
.badge { white-space: nowrap; }


/* ===== profile, user menu, whatsapp ===== */
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; user-select: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::before { content: "👤 "; }
.user-menu summary::after { content: " ▾"; color: var(--muted); }
.user-menu summary.has-avatar::before { content: none; }
.user-menu[open] summary { border-color: var(--accent); }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 30, 25, 0.12); padding: 0.35rem; z-index: 30; }
.user-menu .menu a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.user-menu .menu a:hover { background: #eef3f0; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 0.5rem 0 1.3rem; }
.tabs a { padding: 0.6rem 1rem; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== admin month planner ===== */
.calendar-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.calendar-toolbar { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); position: relative; }
.calendar-toolbar h2 { margin: 0; min-width: 190px; text-align: center; font-size: 1.1rem; }
.calendar-arrow, .calendar-today { color: var(--accent); text-decoration: none; font-weight: 700; }
.calendar-arrow { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 1.2rem; }
.calendar-arrow:hover { background: #eef3f0; }
.calendar-today { position: absolute; right: 1rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 7px; font-size: 0.82rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekday { padding: 0.55rem 0.45rem; color: var(--muted); font-size: 0.76rem; font-weight: 700; text-align: right; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.calendar-day { min-height: 128px; padding: 0.4rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { background: #fafafa; }
.calendar-day.is-today { background: #f2f8f5; }
.calendar-day-number { display: block; text-align: right; color: var(--muted); font-size: 0.78rem; margin: 0 0 0.3rem; }
.is-today .calendar-day-number { color: var(--accent); font-weight: 800; }
.calendar-events { display: flex; flex-direction: column; gap: 0.25rem; }
.calendar-event { display: block; padding: 0.28rem 0.35rem; background: #edf6f2; border-left: 3px solid var(--accent); border-radius: 4px; color: var(--ink); font-size: 0.72rem; line-height: 1.25; text-decoration: none; overflow: hidden; }
.calendar-event.confirmed { background: #eaf0f8; border-left-color: #3b6d9d; }
.calendar-event.mine { background: #fff4db; border-left-color: #b36b00; }
.calendar-event:hover { filter: brightness(0.97); }
.calendar-event small { display: block; color: var(--muted); margin-top: 0.15rem; }
.calendar-legend { display: flex; gap: 1rem; margin: 0.75rem 0; color: var(--muted); font-size: 0.82rem; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 0.3rem; }
.legend-dot.confirmed { background: #3b6d9d; }
@media (max-width: 700px) { .calendar-toolbar h2 { min-width: 140px; font-size: 1rem; } .calendar-today { position: static; } .calendar-day { min-height: 92px; padding: 0.22rem; } .calendar-event { padding: 0.2rem; font-size: 0.63rem; } .calendar-event small { display: none; } .calendar-weekday { padding: 0.45rem 0.2rem; font-size: 0.65rem; } }
@media (max-width: 440px) { .calendar-toolbar { gap: 0.25rem; } .calendar-today { display: none; } .calendar-day { min-height: 76px; } .calendar-event { white-space: nowrap; text-overflow: ellipsis; } }

.whatsapp { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; background: #f0faf3; border-color: #cfe9d6; }
.whatsapp h3 { margin: 0 0 0.3rem 0; }
a.button.wa-button { background: #25d366; color: #0b2a17; }
a.button.wa-button:hover { background: #1fbe5b; }
.wa-qr { width: 132px; height: 132px; flex: none; background: #fff; border-radius: 10px; padding: 6px; border: 1px solid var(--border); }
.welcome { max-width: 560px; }
.welcome form { margin: 0.4rem 0 0 0; }
.verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.verify-banner form, .flash form { margin: 0; }
.verify-banner button, .flash button.secondary { padding: 0.4rem 0.8rem; background: #fff; }
label .badge { align-self: flex-start; }

@media (max-width: 640px) {
  .whatsapp { flex-direction: column-reverse; align-items: flex-start; }
  .user-menu .menu { right: auto; left: 0; }

  /* Profile tabs and tour cards: keep the three tabs readable and prevent
     status badges from sitting on top of the tour title/details on phones. */
  .profile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }
  .profile-tabs a {
    min-width: 0;
    justify-content: center;
    padding: .55rem .25rem;
    font-size: .9rem;
    white-space: nowrap;
  }
  .profile-tabs a span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .profile-event-list .event-card {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .profile-event-list .event-card-main {
    width: 100%;
    flex: 0 0 auto;
  }
  .profile-event-list .event-card-status {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ===== auth pages: flash message above the card, card never moves ===== */
.auth-wrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.auth-wrap > .card.narrow { margin: 0; max-width: none; }
.auth-flashes { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.auth-flashes .flash { margin: 0; }

/* ===== calendar chooser ===== */
.cal-menu { position: relative; display: inline-block; margin: 0.3rem 0 0.8rem; }
.cal-menu summary { list-style: none; cursor: pointer; display: inline-block; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; border: 1px solid var(--border); background: #fff; color: var(--ink); user-select: none; }
.cal-menu summary::-webkit-details-marker { display: none; }
.cal-menu .menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 250px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 30, 25, 0.12); padding: 0.35rem; z-index: 15; }
.cal-menu .menu a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.cal-menu .menu a:hover { background: #eef3f0; }

/* ===== history timeline ===== */
.stat-row, .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 0.4rem 0 1.4rem; }
.stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fbfbfa; text-decoration: none; color: var(--ink); }
a.stat:hover { border-color: var(--accent); }
.stat-num { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.stat-label { font-size: 0.82rem; color: var(--muted); }
.stat.warn { background: #fff7e8; border-color: #f5d18a; }
.stat.warn .stat-num { color: #b36b00; }
.stat.stat-good { background: #eef6f1; border-color: #bfdccc; }
.stat.stat-good .stat-num { color: var(--open); }
.stat-note { font-size: 0.76rem; color: #8a5a09; line-height: 1.25; }
.payment-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin: 0.85rem 0 0.45rem; }
.payment-overview > div { display: flex; flex-direction: column; padding: 0.75rem 0.85rem; border-radius: 10px; background: #fff7e8; border: 1px solid #f5d18a; }
.payment-overview strong { color: #b36b00; font-size: 1.25rem; }
.payment-overview span { color: var(--muted); font-size: 0.8rem; }
.payment-overview.settled > div { background: #edf8f0; border-color: #b9dfc3; }
.payment-overview.settled strong { color: #24733a; }
.admin-table { table-layout: auto; }
.admin-table td { vertical-align: middle; }
.admin-table .ref { white-space: nowrap; font-size: .78rem; }
.payment-detail-table { font-size: .84rem; }
.payment-detail-table th, .payment-detail-table td { padding: .65rem .45rem; }
.payment-detail-table td:nth-child(2) { max-width: 190px; overflow-wrap: anywhere; }
.payment-detail-table button { padding: .55rem .7rem; white-space: nowrap; }
h2.year { margin: 1.4rem 0 0.6rem; font-size: 1rem; color: var(--muted); letter-spacing: 0.08em; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid #dfe6e2; }
.timeline li { position: relative; margin-bottom: 0.7rem; }
.timeline .dot { position: absolute; left: -1.4rem; top: 1.15rem; width: 12px; height: 12px; margin-left: -7px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 2px #dfe6e2; }
.timeline li.off .dot { background: #c9cfcb; }
.tl-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-decoration: none; color: var(--ink); }
.tl-card:hover { border-color: var(--accent); }
.tl-date { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); min-width: 5.5rem; }
.tl-title { font-weight: 700; }
.timeline li.off .tl-title { color: var(--muted); text-decoration: line-through; }

/* ===== admin: members, archive, confirm dialog ===== */
.admin-tabs { margin-top: 0.4rem; justify-content: center; }
.members-bar { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 0.6rem; }
.members-bar input { flex: 1; }
.table-scroll { overflow-x: auto; }
.admin-table .num, .admin-table th.num { text-align: right; }
.admin-page main { max-width: 1000px; }
.admin-payments-page main { max-width: 1500px; }
.admin-page .card { padding: 1.5rem; }
.admin-payments-page .card { padding: 1.7rem 2.25rem; }
.admin-page .table-scroll { margin: 0 -0.25rem; padding: 0 0.25rem; }
.admin-payments-page .admin-table { min-width: 1050px; font-size: 1rem; }
.admin-payments-page .admin-table th, .admin-payments-page .admin-table td { padding: 0.85rem 0.8rem; }
.admin-payments-page .admin-table td:first-child { min-width: 145px; }
.admin-payments-page .admin-table td:last-child { min-width: 230px; overflow-wrap: anywhere; }
.admin-payments-page .admin-table form, .payment-detail-table form { margin: 0; }
.admin-payments-page .admin-table button, .payment-detail-table button { white-space: nowrap; }
.admin-event-page .payment-detail-table { min-width: 1050px; font-size: 0.95rem; }
.admin-event-page .payment-detail-table th, .admin-event-page .payment-detail-table td { padding: 0.8rem 0.7rem; }
@media (max-width: 700px) {
  .admin-page main { padding: 0 0.8rem; }
  .admin-page .card { padding: 1.1rem; }
  .admin-page .members-bar { align-items: stretch; flex-wrap: wrap; }
  .admin-page .members-bar form { width: 100%; }
  .admin-page .members-bar a { flex: 1; text-align: center; }
}
.exhibitions-table th:last-child{width:1%;}
.exhibition-actions{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;white-space:nowrap;}
.exhibition-actions form{display:block;margin:0;}
.exhibition-actions .button,.exhibition-actions button{margin:0;padding:.42rem .7rem;font-size:.85rem;}
.archive-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.8rem 0; border-top: 1px solid var(--border); }
.archive-row .actions { margin: 0; }
dialog.confirm { border: none; border-radius: 14px; padding: 1.4rem 1.5rem; max-width: 440px; width: calc(100% - 2rem); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
dialog.confirm::backdrop { background: rgba(20, 30, 25, 0.5); }
dialog.confirm h3 { margin: 0 0 0.5rem 0; }
dialog.confirm p { color: var(--muted); }
dialog.confirm .actions { justify-content: flex-end; margin: 1rem 0 0 0; }
.stat-label::first-letter { text-transform: uppercase; }

/* Exhibitions gallery */
.exhibition-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}
.exhibition-card{
  background:white;border:1px solid var(--border,#e5e7eb);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
}
.exhibition-card.is-past{opacity:0.75}
.exhibition-photo{
  width:100%;height:160px;object-fit:cover;display:block;background:#eee;
}
.exhibition-photo-placeholder{
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#bbb;
}
.exhibition-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.exhibition-body h2{margin:0;font-size:1.05rem}
.exhibition-body .button{align-self:flex-start;margin-top:4px}

/* Guest-facing guide introduction */
.about-hero{display:grid;grid-template-columns:1.35fr .65fr;gap:2rem;align-items:stretch;padding:2.5rem;overflow:hidden;border-radius:18px;background:linear-gradient(125deg,#1f3d34,#2f5d50);color:#fff;position:relative}
.about-hero:after{content:"";position:absolute;width:260px;height:260px;right:20%;bottom:-150px;border:1px solid rgba(255,255,255,.16);border-radius:50%}
.about-hero-copy{position:relative;z-index:1}.about-hero h1{font-size:clamp(2rem,5vw,3.3rem);margin:.2rem 0 .8rem}.about-hero p{max-width:600px;font-size:1.08rem;line-height:1.65;margin:0}.about-kicker{margin:0 0 .45rem!important;font-size:.74rem!important;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#b9ddc9}
.about-photo{position:relative;z-index:1;min-height:230px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 9px rgba(255,255,255,.16);transform:rotate(1.2deg)}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.25rem 0}.about-card{padding:1.55rem;border:1px solid var(--border);border-radius:14px;background:#fff}.about-card h2{margin:.8rem 0 .5rem}.about-card p{margin:0;color:var(--muted);line-height:1.6}.about-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eaf2ee;color:var(--accent);font-size:1.3rem}
.about-note{padding:1.8rem 2rem;border:1px dashed #a7c4b4;border-radius:14px;background:#f5faf7}.about-note h2{margin:.25rem 0 .55rem}.about-note p:not(.about-kicker){max-width:700px;line-height:1.6}.about-note .button{display:inline-block;margin-top:.35rem}
@media(max-width:650px){.about-hero{grid-template-columns:1fr;padding:1.6rem}.about-art-placeholder{min-height:180px;max-width:270px}.about-grid{grid-template-columns:1fr}.about-note{padding:1.4rem}}

/* Profile photo */
.profile-photo{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:1px solid var(--border,#e5e7eb);background:#eee;
}
.profile-photo-placeholder{
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:#bbb;background:#f1f1ef;border:1px solid var(--border,#e5e7eb);
}
.profile-photo-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.profile-photo-actions{display:flex;flex-direction:column;gap:6px}
.profile-photo-actions form{display:inline}

/* Small avatar for the header user menu */
.user-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:-5px;margin-right:4px}

/* ---- Photo galleries (event detail, exhibition detail) ---- */
.event-cover-photo{display:block;width:max-content;max-width:100%;}
.event-cover-photo img{display:block;max-width:100%;cursor:zoom-in;}
.photo-gallery{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:14px;
}
.photo-gallery img{
  height:110px; width:auto; border-radius:8px; object-fit:cover; flex:none;
  border:1px solid var(--border,#e5e7eb);
}
.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin:12px 0;
}
.photo-grid img{
  width:100%; height:140px; object-fit:cover; border-radius:8px; border:1px solid var(--border,#e5e7eb);
}
.photo-grid figure{margin:0}
.photo-grid figcaption{font-size:.8rem;color:var(--muted);margin-top:4px}
.photo-gallery a,.photo-grid a{display:block;cursor:zoom-in}

/* Foreground slideshow, keeping the current page visible behind it. */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(17,24,20,.78);display:grid;place-items:center;padding:4rem 5rem 3.5rem;color:#fff}
.lightbox[hidden]{display:none}
.lightbox-figure{max-width:min(100%,1100px);max-height:calc(100vh - 7.5rem);margin:0;display:flex;flex-direction:column;align-items:center}
.lightbox-figure img{max-width:100%;max-height:calc(100vh - 10rem);object-fit:contain;border-radius:10px;box-shadow:0 12px 45px rgba(0,0,0,.45)}
.lightbox-figure figcaption{margin-top:.7rem;text-align:center;min-height:1.2em}
.lightbox-close,.lightbox-nav{position:absolute;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;border-radius:999px;display:grid;place-items:center}
.lightbox-close{top:1rem;right:1rem;width:42px;height:42px;font-size:2rem;line-height:1}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:3rem;line-height:1}
.lightbox-prev{left:1rem}.lightbox-next{right:1rem}.lightbox-count{position:absolute;bottom:1rem;left:0;right:0;text-align:center;margin:0;color:#fff}
body.lightbox-open{overflow:hidden}
@media(max-width:600px){.lightbox{padding:4rem 1rem 3.5rem}.lightbox-nav{width:40px;height:40px;font-size:2.4rem}.lightbox-prev{left:.4rem}.lightbox-next{right:.4rem}}

/* ---- Admin: manage existing photos with a remove checkbox ---- */
.photo-manage-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin:10px 0;
}
.photo-manage-item{
  position:relative; text-align:center;
}
.photo-manage-item img{
  width:100%; height:90px; object-fit:cover; border-radius:8px; border:1px solid var(--border,#e5e7eb);
}
.photo-remove-check{
  display:block; font-size:.75rem; color:var(--muted); margin-top:4px;
}
.photo-remove-check input{margin-right:4px}

/* ---- Left-corner sidebar toggle: Tours / Exhibitions ---- */
.sidebar-toggle{
  background:none;border:none;cursor:pointer;font-size:1.4rem;line-height:1;
  padding:4px 8px;border-radius:8px;color:#1d2730;flex-shrink:0;
}
.sidebar-toggle:hover{background:#f1f1ef}
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(20,20,15,.35);z-index:29;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.sidebar-overlay.open{opacity:1;pointer-events:auto}
.sidebar-panel{
  position:fixed;top:0;left:0;bottom:0;width:250px;max-width:80vw;
  background:#fff;z-index:30;box-shadow:2px 0 18px rgba(20,30,25,.12);
  transform:translateX(-100%);transition:transform .2s ease;
  display:flex;flex-direction:column;padding:18px 14px;gap:4px;
}
.sidebar-panel.open{transform:translateX(0)}
.sidebar-panel .sidebar-brand{
  font-weight:800;color:#1d2730;text-decoration:none;margin-bottom:14px;padding:0 6px;
}
.sidebar-panel a.sidebar-link{
  display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:8px;
  color:#1d2730;text-decoration:none;font-weight:600;
}
.sidebar-panel a.sidebar-link:hover{background:#f1f1ef}
.sidebar-panel a.sidebar-link.active{background:var(--accent,#2f5d50);color:#fff}
.sidebar-panel .sidebar-close{
  align-self:flex-end;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);margin-bottom:6px;
}

/* ---- Exhibitions (now a distinct entity, not a copy of tour dates) ---- */
.exhibition-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.exhibition-card{background:var(--card-bg,#fff);border:1px solid var(--border,#e5e7eb);border-radius:12px;overflow:hidden}
.exhibition-photo{width:100%;height:180px;object-fit:cover;display:block}
.exhibition-photo-placeholder{display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:#f1f1ef;color:#bbb}
.exhibition-body{padding:14px 16px}
.exhibition-section-title{margin:22px 0 6px;font-size:1.05rem}

.quote-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.25rem 0}
.quote-strip blockquote{margin:0;padding:1.3rem 1.4rem;border-radius:14px;background:#f5faf7;border-left:3px solid var(--accent);font-style:italic;color:#2c3d36;line-height:1.55;font-size:.97rem}
@media(max-width:650px){.quote-strip{grid-template-columns:1fr}}
.month-filter{display:inline-flex}.inline-label{display:flex;flex-direction:row;align-items:center;gap:.5rem;font-weight:600}.inline-label select{padding:.5rem .6rem}

.pay-online-form{margin:.6rem 0 .1rem}
.pay-online-btn{background:#0a0b0d}
.pay-online-btn:hover{background:#000}

/* Dedicated payment page */
.payment-qr { display: block; width: 190px; height: 190px; margin: 1rem auto; border: 1px solid var(--border); border-radius: 8px; }
.transfer-details { display: grid; gap: .55rem; margin: 1rem 0; }
.transfer-details div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .45rem; }
.transfer-details span { color: var(--muted); }
.pay-page { max-width: 480px; margin: 0 auto; }
.pay-page-head { margin-bottom: 1.2rem; }
.pay-page-head h1 { font-size: 1.5rem; margin: 0 0 0.25rem 0; }
.event-mini { display: flex; align-items: center; gap: 14px; }
.event-mini .date-tile { flex: none; }
.price-breakdown .price-row { display: flex; justify-content: space-between; align-items: baseline; margin: 0.3rem 0; }
.price-row-total { font-size: 1.05rem; }
.big-amount { font-size: 1.6rem; color: var(--accent, #1f3d34); }
.price-breakdown hr { border: none; border-top: 1px solid var(--border); margin: 0.7rem 0; }
.pay-note { background: #eaf2ee; border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.88rem; margin: 0.8rem 0 0.6rem 0; }
.pay-online-btn.big { width: 100%; font-size: 1.05rem; padding: 0.85rem 1rem; }

/* Access-group administration */
.card-subsection {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfbfa;
}
.card-subsection h3 { margin: 0 0 .35rem; font-size: 1rem; }
.card-subsection > p { margin-top: .25rem; }
.group-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; margin-top: .8rem; }
.group-checklist .checkbox-row { margin: 0; }
.group-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 .65rem; }
.group-admin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.group-admin-card { margin: 0; }
.group-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.group-admin-stats { display: flex; gap: 1.5rem; margin: 1rem 0; }
.group-admin-stats > div { display: flex; flex-direction: column; gap: .1rem; }
.group-admin-stats strong { font-size: 1.25rem; }
.group-admin-stats span { color: var(--muted); font-size: .8rem; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input { flex: 1; min-width: 0; }
.group-admin-actions { display: flex; justify-content: flex-end; margin-top: .75rem; }
.group-name-list { font-size: .85rem; }
@media (max-width: 650px) {
  .group-admin-list { grid-template-columns: 1fr; }
  .copy-row { flex-direction: column; }
}

/* Admin action checklist */
.action-list-card { padding-bottom: 1.2rem; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.action-panel { border: 1px solid var(--line, #dbe5de); border-radius: 12px; padding: 1rem; background: #fbfdfb; min-width: 0; }
.action-panel.has-actions { box-shadow: 0 4px 16px rgba(31,61,52,.06); }
.action-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.action-panel-head h3 { margin: 0; font-size: 1rem; }
.action-list { list-style: none; padding: 0; margin: 0; }
.action-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line, #e4ebe6); }
.action-list li:first-child { border-top: 0; padding-top: .1rem; }
.action-list li > a:first-child { min-width: 0; flex: 1; text-decoration: none; }
.action-list li > a:first-child strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-list li > a:first-child span { display: block; color: var(--muted); font-size: .85rem; margin-top: .18rem; }
.action-list li form { margin: 0; flex: 0 0 auto; }
.button.small, button.small { padding: .4rem .65rem; font-size: .82rem; }
@media (max-width: 820px) { .action-grid { grid-template-columns: 1fr; } }

.admin-subtabs { display:flex; flex-wrap:wrap; gap:.45rem; margin:.8rem 0 1.35rem; padding:.2rem; border-radius:12px; background:var(--surface-2, #f2f6f3); width:max-content; max-width:100%; }
.admin-subtabs a { display:inline-flex; align-items:center; gap:.35rem; padding:.52rem .78rem; border-radius:9px; text-decoration:none; color:var(--muted); font-weight:650; font-size:.92rem; }
.admin-subtabs a:hover { color:var(--text); }
.admin-subtabs a.active { background:var(--surface, #fff); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.section-heading-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.section-heading-row h2 { margin-bottom:.25rem; }
.tour-history-section { margin-top:2rem; padding-top:.5rem; }
.archive-shortcut-card { margin-top:2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.dashboard-note-card { margin-top:1.5rem; }
@media (max-width: 640px) { .admin-subtabs { width:100%; } .admin-subtabs a { flex:1 1 auto; justify-content:center; } }


/* Bulk admin actions + activity feed */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .8rem .9rem;
  background: var(--surface-2, #f2f6f3);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.bulk-toolbar label { margin: 0; }
.bulk-check-all { flex-direction: row; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; }
.bulk-check-all input, .bulk-item { width: auto; margin: 0; }
.bulk-count { color: var(--muted); font-size: .82rem; min-width: 5.5rem; }
.bulk-group-picker { flex-direction: row; align-items: center; gap: .5rem; font-size: .82rem; margin-left: auto; }
.bulk-group-picker select { min-width: 180px; }
.check-col { width: 1%; white-space: nowrap; text-align: center !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bulk-event-row { display: flex; align-items: center; gap: .65rem; }
.bulk-event-row .bulk-event-checkbox { flex: none; }
.bulk-event-row .event-card { flex: 1; min-width: 0; }
.activity-filters { display: flex; align-items: end; gap: .7rem; flex-wrap: wrap; margin: 0 0 1rem; }
.activity-filters label { min-width: 170px; margin: 0; }
.activity-filters select { min-width: 150px; }
.activity-table { margin-top: 0; }
.activity-table td, .activity-table th { vertical-align: top; }
.activity-table .nowrap { white-space: nowrap; }

@media (max-width: 700px) {
  .bulk-toolbar { align-items: stretch; }
  .bulk-toolbar > button, .bulk-toolbar > .button { flex: 1 1 auto; }
  .bulk-group-picker { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; }
  .bulk-group-picker select { width: 100%; }
  .activity-filters label { width: 100%; }
  .activity-filters button, .activity-filters a.button { flex: 1; text-align: center; }
}


/* ===== cleaner admin navigation + compact bulk actions ===== */
.admin-tabs-shell {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: visible;
  text-align: center;
  margin-top: .35rem;
  margin-bottom: 1.15rem;
  scrollbar-width: thin;
}
.admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  justify-content: center;
  gap: .1rem;
  margin: 0 auto;
  padding: .15rem .5rem 0;
  overflow: visible;
}
.admin-tabs a {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  white-space: nowrap;
  padding: .55rem .65rem .62rem;
  font-size: .86rem;
  font-weight: 650;
  border-radius: 8px 8px 0 0;
}
.admin-tabs a:hover { color: var(--ink); background: #f6f8f6; }
.admin-tabs a.active { background: #f1f5f2; color: var(--accent); border-bottom-color: var(--accent); }
.admin-tabs a span:first-child { font-size: .9rem; line-height: 1; }

.profile-tabs { justify-content: center; }
.profile-tabs a { display: inline-flex; align-items: center; gap: .35rem; }

.bulk-actions-disclosure {
  margin: .1rem 0 1rem;
}
.bulk-actions-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 650;
  padding: .2rem 0;
}
.bulk-actions-disclosure > summary::-webkit-details-marker { display: none; }
.bulk-actions-disclosure > summary::before { content: '▸'; font-size: .7rem; color: var(--muted); }
.bulk-actions-disclosure[open] > summary::before { content: '▾'; }
.bulk-disclosure-count {
  padding: .08rem .38rem;
  border-radius: 999px;
  background: #eef2ef;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}

.bulk-toolbar {
  align-items: center;
  gap: .5rem;
  margin: 0 0 .85rem;
  padding: .55rem .7rem;
  background: #fafbf9;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.bulk-select { display: inline-flex; align-items: center; gap: .4rem; margin-right: .2rem; }
.bulk-select input { width: 15px; height: 15px; margin: 0; }
.bulk-select label { display: inline; font-size: .82rem; font-weight: 650; cursor: pointer; }
.bulk-count {
  min-width: 1.55rem;
  padding: .12rem .38rem;
  border-radius: 999px;
  background: #eef2ef;
  color: var(--muted);
  text-align: center;
  font-size: .75rem;
  line-height: 1.4;
}
.bulk-label { color: var(--muted); font-size: .76rem; font-weight: 650; margin-left: .15rem; }
.bulk-toolbar .button.small,
.bulk-toolbar button.small { padding: .42rem .68rem; font-size: .8rem; border-radius: 7px; }
.bulk-toolbar .secondary { background: #fff; }
.bulk-group-menu { position: relative; margin-left: .2rem; }
.bulk-group-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .65rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 650;
}
.bulk-group-menu summary::-webkit-details-marker { display: none; }
.bulk-group-menu summary::after { content: "▾"; color: var(--muted); font-size: .7rem; }
.bulk-group-menu-count {
  min-width: 1.2rem;
  padding: .08rem .3rem;
  border-radius: 999px;
  background: #eef2ef;
  color: var(--muted);
  text-align: center;
  font-size: .7rem;
}
.bulk-group-menu-popover {
  position: absolute;
  z-index: 25;
  top: calc(100% + .4rem);
  left: 0;
  width: 310px;
  padding: .8rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 30, 25, .12);
}
.bulk-group-menu-popover p { margin: 0 0 .55rem; }
.bulk-group-options { display: grid; gap: .35rem; margin-bottom: .65rem; }
.bulk-group-options label { display: flex; flex-direction: row; align-items: center; gap: .45rem; padding: .35rem .4rem; border-radius: 7px; font-size: .82rem; font-weight: 500; cursor: pointer; }
.bulk-group-options label:hover { background: #f6f8f6; }
.bulk-group-options input { width: auto; margin: 0; }

.filter-bar { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 0; }
.filter-row .inline-label { margin: 0; }
.filter-row select { min-width: 150px; }
.filter-links { display: flex; gap: .45rem; align-items: center; }

/* Capacity trend */
.capacity-trend-card { padding: 1.25rem 1.35rem; }
.capacity-trend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .65rem; margin-top: .85rem; }
.capacity-trend-item { display: block; min-width: 0; padding: .78rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: #fbfbfa; color: var(--ink); text-decoration: none; }
.capacity-trend-item:hover { border-color: var(--accent); background: #fff; }
.capacity-trend-title { min-width: 0; margin-bottom: .2rem; }
.capacity-trend-title strong { display: -webkit-box; min-width: 0; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .93rem; line-height: 1.2; }
.capacity-trend-date { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-size: .74rem; font-weight: 750; line-height: 1.25; }
.capacity-bar { height: 5px; margin: .62rem 0 .4rem; background: #e7ebe8; border-radius: 999px; overflow: hidden; }
.capacity-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.capacity-trend-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; color: var(--muted); font-size: .74rem; }

@media (max-width: 700px) {
  .admin-tabs {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
    padding-inline: .35rem;
    gap: .05rem;
  }
  .admin-tabs a {
    padding: .5rem .52rem .56rem;
    font-size: .8rem;
  }
  .bulk-toolbar { align-items: stretch; }
  .bulk-label { display: none; }
  .bulk-toolbar .button.small, .bulk-toolbar button.small { flex: 0 0 auto; }
  .bulk-group-menu { margin-left: 0; }
  .bulk-group-menu-popover { position: static; width: min(100%, 320px); margin-top: .45rem; box-shadow: none; }
  .filter-row { width: 100%; }
  .filter-row .inline-label { flex: 1 1 180px; }
  .filter-row select { width: 100%; min-width: 0; }
  .filter-links { width: 100%; }
  .filter-links .button { flex: 1; text-align: center; }
  .capacity-trend { grid-template-columns: 1fr; }
}

/* Mobile-only authentication background: use the portrait KMSKA image on small screens. */
@media (max-width: 640px) {
  .auth-background {
    background-image:
      linear-gradient(
        rgba(255, 255, 255, 0.82),
        rgba(255, 255, 255, 0.82)
      ),
      url("/static/images/kmska_vertical.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}