:root {
  --ink: #14172b;
  --ink-soft: #565a72;
  --ink-faint: #8a8ea3;
  --bg: #f5f6fb;
  --surface: #ffffff;
  --border: #e5e6f0;
  --brand: #269b4e;
  --brand-dark: #1a7038;
  --brand-soft: #e6f5eb;
  --accent: #269b4e;
  --danger: #d43d3d;
  --danger-soft: #fdecec;
  --warn: #b8860b;
  --warn-soft: #fdf6e3;
  --success: #1a8f5f;
  --success-soft: #e7f7f0;
  --sidebar-bg: #000000;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20,23,43,0.04), 0 8px 24px rgba(20,23,43,0.06);
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 28px; margin: 0 0 8px; }
h2 { font-size: 19px; margin: 0 0 14px; }
h3 { font-size: 15px; margin: 0 0 10px; }
p { color: var(--ink-soft); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}
.back-link:hover { color: var(--brand); text-decoration: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.15s, transform 0.05s;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f0f0f7; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b32e2e; }
.btn-block { width: 100%; }

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
label { font-weight: 600; font-size: 13.5px; display: block; margin-bottom: 6px; color: var(--ink); }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  border-bottom: 2px solid var(--border);
}
td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--border); font-size: 14.5px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge-draft { background: #eeeef4; color: #565a72; }
.badge-published { background: var(--success-soft); color: var(--success); }
.badge-paid { background: var(--success-soft); color: var(--success); }
.badge-pending { background: var(--warn-soft); color: var(--warn); }
.badge-cancelled { background: var(--danger-soft); color: var(--danger); }
.badge-partially-refunded { background: var(--warn-soft); color: var(--warn); }

.topnav { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.ticket-row:last-of-type { border-bottom: none; }

.error {
  background: var(--danger-soft);
  color: var(--danger);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 14px;
}
.success-msg {
  background: var(--success-soft);
  color: var(--success);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 14px;
}

#payment-element { margin: 16px 0; }

.event-hero {
  background: linear-gradient(135deg, #14171c 0%, #05070a 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 24px;
  border: 1px solid var(--brand);
}
.event-hero .logo-mark { height: 26px; margin-bottom: 14px; display: block; }
.event-hero h1 { color: #fff; margin-bottom: 6px; }
.event-hero .meta { color: rgba(255,255,255,0.85); font-size: 14.5px; }
.event-hero .hebrew-date { color: rgba(255,255,255,0.65); font-size: 13px; margin-top: 2px; }

.pill-nav {
  display: inline-flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}
.pill-nav a, .pill-nav button {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.pill-nav a.active, .pill-nav button.active { background: var(--brand); color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.stat-tile .num { font-size: 24px; font-weight: 700; color: var(--ink); }
.stat-tile .label { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

.discount-box {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 4px 0 16px;
}
.discount-box input { margin-bottom: 0; }
.discount-box .btn { padding: 10px 16px; white-space: nowrap; }

/* ---- Mobile responsiveness ----
   Applies across every public and admin page that includes this stylesheet. Public
   pages use plain document flow (body max-width + padding), so the two rules below
   handle the vast majority of the work: tighter edge padding so content isn't
   cramped against the screen edge, and letting flex rows that assume desktop width
   (topnav, ticket rows, stat grids) wrap onto their own lines instead of squeezing
   or overflowing horizontally. Tables scroll horizontally within their own row
   rather than forcing the whole page wider than the viewport. The admin sidebar has
   its own dedicated mobile behavior in _sidebar.ejs, since a fixed side column needs
   different handling (a slide-out drawer) than a simple reflow. */
@media (max-width: 640px) {
  body { padding: 20px 14px 48px; }
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }
  .card { padding: 16px 16px; }
  .topnav { flex-direction: column; align-items: stretch; }
  .ticket-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .event-hero { padding: 22px 18px; }
  /* Any table wider than the screen scrolls horizontally within its own row instead
     of forcing the page itself wider than the viewport (which would re-trigger
     unwanted zoom/pan on the whole page just to read one wide table). */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  /* Buttons that were only ever meant to sit in a row (e.g. multiple action buttons
     in a topnav or card) stack full-width on narrow screens so they stay tappable
     without being squeezed down to an unreadable size. */
  .topnav .btn, .topnav .btn-secondary, .topnav .btn-danger { width: 100%; }
}