/* ============================================
   FLA Event Management System — Stylesheet
   v1.4 Redesign | shadcn/ui Minimal
   Palette: Zinc Neutrals + Emerald + Amber
   Font: Plus Jakarta Sans
   ============================================ */

/* ---------- Design Tokens ---------- */
:root {
  --background: #fafafa;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #10b981;

  --primary: #09090b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --accent: #10b981;
  --accent-foreground: #ffffff;
  --accent-hover: #059669;
  --destructive: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  --gold: #f59e0b;
  --gold-light: #fef3c7;
  --gold-dark: #d97706;

  --sidebar-bg: #09090b;
  --sidebar-fg: #fafafa;
  --sidebar-muted: #a1a1aa;
  --sidebar-border: #27272a;
  --sidebar-accent: #10b981;

  /* Legacy compat aliases */
  --bg-primary: var(--background);
  --bg-secondary: var(--card);
  --bg-tertiary: var(--muted);
  --text-primary: var(--foreground);
  --text-secondary: #3f3f46;
  --text-muted: var(--muted-foreground);
  --border-color: var(--border);
  --primary-dark: #18181b;
  --accent-dark: var(--accent-hover);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --transition: 200ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 300ms cubic-bezier(.4,0,.2,1);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
}

[data-theme=dark] {
  --background: #09090b;
  --foreground: #fafafa;
  --card: #18181b;
  --card-foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --border: #27272a;
  --input: #27272a;
  --primary: #fafafa;
  --primary-foreground: #09090b;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --text-secondary: #d4d4d8;
  --sidebar-bg: #09090b;
  --sidebar-border: #27272a;
  --bg-primary: var(--background);
  --bg-secondary: var(--card);
  --bg-tertiary: var(--muted);
  --text-primary: var(--foreground);
  --text-muted: var(--muted-foreground);
  --border-color: var(--border);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,.3);
}
/* Dark mode overrides for row highlights & gold cards */
[data-theme=dark] .table tbody tr.winner-row { background:linear-gradient(90deg,rgba(16,185,129,.12),var(--card)); }
[data-theme=dark] .table tbody tr.winner-row:hover { background:linear-gradient(90deg,rgba(16,185,129,.18),var(--muted)); }
[data-theme=dark] .table tbody tr.shortlisted { background:linear-gradient(90deg,rgba(245,158,11,.1),var(--card)); }
[data-theme=dark] .table tbody tr.shortlisted:hover { background:linear-gradient(90deg,rgba(245,158,11,.16),var(--muted)); }
[data-theme=dark] .stat-card.gold { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.06)); border-color:rgba(245,158,11,.25); }
[data-theme=dark] .badge-gold { background:rgba(245,158,11,.18); color:#fbbf24; border-color:rgba(245,158,11,.3); }
[data-theme=dark] .badge-success { background:rgba(16,185,129,.15); color:#34d399; }
[data-theme=dark] .badge-warning { background:rgba(245,158,11,.15); color:#fbbf24; }
[data-theme=dark] .badge-danger { background:rgba(239,68,68,.15); color:#f87171; }
[data-theme=dark] .badge-primary { background:rgba(59,130,246,.15); color:#60a5fa; }
[data-theme=dark] .badge-outline { border-color:var(--border); color:var(--muted-foreground); }
[data-theme=dark] .mobile-nominee-card.winner-row { background:linear-gradient(90deg,rgba(16,185,129,.1),var(--card)); }
[data-theme=dark] .mobile-nominee-card.shortlisted { background:linear-gradient(90deg,rgba(245,158,11,.08),var(--card)); }

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

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration:none; color:inherit; }

/* Prevent horizontal scroll at page level */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* Settings: flags grid */
.flags-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.flag-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--muted); border-radius:var(--radius-md); }

/* ============================================
   LAYOUT
   ============================================ */
.app-container { display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 260px;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  position: fixed;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-logo { display:flex; align-items:center; gap:12px; }

.logo-icon {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.logo-text { font-size:14px; font-weight:700; line-height:1.3; letter-spacing:-0.3px; }
.logo-text span { font-size:11px; font-weight:400; opacity:.5; display:block; letter-spacing:0; }

/* Sidebar uploaded logo image */
.logo-img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-close {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,.08);
  color: var(--sidebar-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  transition: all var(--transition-fast);
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: rgba(255,255,255,.12);
  touch-action: manipulation;
}
.sidebar-close:hover { background:rgba(255,255,255,.15); color:#fff; }
.sidebar-close:active { background:rgba(255,255,255,.2); transform:scale(.92); }

.nav-container { flex:1; overflow-y:auto; padding:12px 0; }
.nav-container::-webkit-scrollbar { width:4px; }
.nav-container::-webkit-scrollbar-track { background:transparent; }
.nav-container::-webkit-scrollbar-thumb { background:var(--sidebar-border); border-radius:4px; }
.nav-section { padding:4px 12px; }

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sidebar-muted);
  opacity: .45;
  padding: 8px 12px 6px;
  margin-top: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  color: var(--sidebar-muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 1px;
  position: relative;
}
.nav-item:hover { background:rgba(255,255,255,.06); color:var(--sidebar-fg); }
.nav-item.active { background:rgba(255,255,255,.08); color:var(--sidebar-fg); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--sidebar-accent);
  border-radius: 0 3px 3px 0;
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .7;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity:1; }

.nav-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label { white-space:nowrap; }

.nav-badge {
  background: rgba(255,255,255,.1);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
}

.sidebar-footer { padding:16px 20px; border-top:1px solid var(--sidebar-border); }
.sidebar-user { display:flex; flex-direction:column; gap:2px; }
.sidebar-user-name { font-size:13px; font-weight:600; }
.sidebar-user-role { font-size:11px; opacity:.45; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 99;
  transition: opacity var(--transition);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active { display:block; }

/* ---------- Main ---------- */
.main-content {
  flex: 1;
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  min-width: 0;
  max-width: calc(100vw - 260px);
  overflow-x: hidden;
}

/* ---------- Top Bar ---------- */
.top-bar {
  background: var(--card);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
  z-index: 50;
  gap: 12px;
  min-width: 0;
  overflow: visible;
  transition: transform 0.3s ease;
  will-change: transform;
}
.top-bar.auto-hidden {
  transform: translateY(-100%);
}
.top-bar-left { display:flex; align-items:center; gap:14px; min-width:0; flex:1; overflow:visible; }
.top-bar-title-wrap { min-width:0; overflow:hidden; flex:1; }

.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: rgba(0,0,0,.08);
  touch-action: manipulation;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn:hover { background:var(--muted); }
.mobile-menu-btn:active { background:var(--muted); transform:scale(.95); }
.mobile-menu-btn svg { pointer-events:none; }

.page-title {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.4px;
  color: var(--foreground);
}
.page-subtitle { font-size:12px; color:var(--muted-foreground); margin-top:1px; }
.top-actions { display:flex; gap:8px; flex-shrink:0; white-space:nowrap; }
.content-area { flex:1; padding:28px; padding-top:92px; min-width:0; overflow-x:auto; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}
.btn:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn-primary { background:var(--primary); color:var(--primary-foreground); box-shadow:var(--shadow-xs); }
.btn-primary:hover:not(:disabled) { opacity:.9; }
.btn-accent { background:var(--accent); color:#fff; box-shadow:var(--shadow-xs); }
.btn-accent:hover:not(:disabled) { background:var(--accent-hover); }
.btn-outline { background:var(--card); border:1px solid var(--border); color:var(--foreground); box-shadow:var(--shadow-xs); }
.btn-outline:hover:not(:disabled) { background:var(--muted); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover:not(:disabled) { background:#059669; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover:not(:disabled) { background:#dc2626; }
.btn-ghost { background:transparent; color:var(--muted-foreground); padding:6px 10px; }
.btn-ghost:hover:not(:disabled) { background:var(--muted); color:var(--foreground); }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:var(--radius-sm); }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
  color: var(--foreground);
}
.card-body { padding:20px; }
.card-body.no-padding { padding:0; }
.mb-4 { margin-bottom:16px; }

/* ============================================
   STATS
   ============================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--transition);
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-card:hover::after { background:var(--accent); }

.stat-card.gold { background:linear-gradient(135deg,#fffbeb,#fef3c7); border-color:#fde68a; }
.stat-card.gold::after { background:var(--gold); }

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
  background: var(--muted);
}
.stat-label { font-size:12px; color:var(--muted-foreground); font-weight:500; margin-bottom:4px; }
.stat-value { font-size:28px; font-weight:700; line-height:1.1; letter-spacing:-1px; color:var(--foreground); }
.stat-change { font-size:12px; margin-top:6px; color:var(--muted-foreground); }

/* ============================================
   TABLES
   ============================================ */
.table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }

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

.table th {
  background: var(--muted);
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: 12px;
  position: sticky;
  top: 0;
}
.table th.sortable { cursor:pointer; user-select:none; }
.table th.sortable:hover { color:var(--foreground); }

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--foreground);
}
.table tbody tr { transition:background var(--transition-fast); }
.table tbody tr:hover { background:var(--muted); }
.table tbody tr:last-child td { border-bottom:none; }

.table tbody tr.winner-row { background:linear-gradient(90deg,#ecfdf5,var(--card)); }
.table tbody tr.winner-row:hover { background:linear-gradient(90deg,#d1fae5,var(--muted)); }
.table tbody tr.shortlisted { background:linear-gradient(90deg,#fffbeb,var(--card)); }
.table tbody tr.shortlisted:hover { background:linear-gradient(90deg,#fef3c7,var(--muted)); }
.table-actions { display:flex; gap:4px; justify-content:flex-end; }

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-primary { background:#dbeafe; color:#1e40af; }
.badge-success { background:#d1fae5; color:#065f46; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-danger  { background:#fee2e2; color:#991b1b; }
.badge-gold    { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border:1px solid #fde68a; }
.badge-outline { background:transparent; border:1px solid var(--border); color:var(--muted-foreground); }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:13px; font-weight:500; color:var(--foreground); margin-bottom:6px; }
.form-label .required { color:var(--danger); margin-left:2px; }

.form-input,.form-select,.form-textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  background: var(--card);
  color: var(--foreground);
  transition: all var(--transition-fast);
  line-height: 1.5;
}
.form-input:hover,.form-select:hover,.form-textarea:hover { border-color:#a1a1aa; }
.form-input:focus,.form-select:focus,.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.form-input::placeholder { color:var(--muted-foreground); opacity:.6; }
.form-textarea { min-height:90px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-hint { font-size:12px; color:var(--muted-foreground); margin-top:4px; }
.checkbox { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; border-radius:4px; }

/* ============================================
   TOGGLE
   ============================================ */
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.toggle.active { background:var(--accent); }
.toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle.active::after { transform:translateX(18px); }

/* ============================================
   FILTERS
   ============================================ */
.filters-bar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }

.search-box { flex:1; min-width:220px; position:relative; }
.search-box input {
  width: 100%;
  padding: 9px 13px 9px 38px;
  border: 1px solid var(--input);
  border-radius: 8px;
  font-size: 13px;
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  transition: all .15s;
}
.search-box input:hover { border-color:#a1a1aa; }
.search-box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,.12); }
.search-box .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--muted-foreground); pointer-events:none; display:flex; align-items:center; }

.filter-select {
  padding: 9px 13px;
  border: 1px solid var(--input);
  border-radius: 8px;
  font-size: 13px;
  min-width: 150px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.filter-select:hover { border-color:#a1a1aa; }
.filter-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,.12); }
.filters-actions { display:flex; gap:8px; margin-left:auto; flex-shrink:0; }

/* ============================================
   BULK ACTIONS
   ============================================ */
.bulk-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.bulk-actions-text { font-size:12px; font-weight:600; color:var(--accent); margin-right:8px; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
.pagination-info { font-size:12px; color:var(--muted-foreground); }
.pagination-controls { display:flex; gap:4px; flex-wrap:wrap; }
.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.pagination-btn:hover:not(:disabled) { background:var(--muted); color:var(--foreground); }
.pagination-btn.active { background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.pagination-btn:disabled { opacity:.4; cursor:not-allowed; }

/* Score Input */
.score-input {
  width: 64px;
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  transition: all var(--transition-fast);
}
.score-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,.12); }

/* ============================================
   TABS
   ============================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  padding: 10px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.tab:hover { color:var(--foreground); }
.tab.active { color:var(--foreground); border-bottom-color:var(--accent); font-weight:600; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.active,.modal-overlay[style*="flex"] { display:flex; }

.modal {
  background: var(--card);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  animation: modalIn var(--transition-slow) ease;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(.97) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:16px; font-weight:600; letter-spacing:-0.3px; }
.modal-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.modal-close:hover { background:var(--muted); color:var(--foreground); }
.modal-body { padding:24px; overflow-y:auto; flex:1; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; background:var(--muted); }

/* ============================================
   TOAST
   ============================================ */
.toast-container { position:fixed; top:20px; right:20px; z-index:300; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  max-width: 420px;
  pointer-events: auto;
  animation: toastIn var(--transition-slow) ease;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-foreground);
}
.toast.success { border-left-color:var(--success); }
.toast.error   { border-left-color:var(--danger); }
.toast.warning { border-left-color:var(--warning); }
.toast.info    { border-left-color:var(--info); }
.toast-icon { font-size:16px; flex-shrink:0; }
.toast-content { flex:1; }
.toast-title { font-size:13px; font-weight:600; }
.toast-message { font-size:12px; color:var(--muted-foreground); margin-top:2px; }
.toast-close { background:none; border:none; color:var(--muted-foreground); cursor:pointer; padding:4px; font-size:14px; }
@keyframes toastIn { from{opacity:0;transform:translateY(-10px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.toast.removing { animation:toastOut var(--transition) ease forwards; }
@keyframes toastOut { to{opacity:0;transform:translateY(-10px) scale(.96)} }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state-icon {
  width: 52px;
  height: 52px;
  background: var(--muted);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 22px;
}
.empty-state-title { font-size:15px; font-weight:600; margin-bottom:4px; letter-spacing:-0.2px; }
.empty-state-text { font-size:13px; color:var(--muted-foreground); max-width:300px; margin:0 auto; }

/* Email Template */
.email-template {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: 'JetBrains Mono','Fira Code',monospace;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 280px;
  overflow-y: auto;
  color: var(--foreground);
  line-height: 1.7;
  width: 100%;
  resize: vertical;
}

/* ============================================
   ACTIVITY
   ============================================ */
.activity-list { display:flex; flex-direction:column; }
.activity-list.scrollable { max-height:420px; overflow-y:auto; }
.activity-list.scrollable::-webkit-scrollbar { width:4px; }
.activity-list.scrollable::-webkit-scrollbar-track { background:transparent; }
.activity-list.scrollable::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.activity-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--muted);
  flex-shrink: 0;
}
.activity-content { flex:1; min-width:0; }
.activity-text { font-size:13px; color:var(--foreground); }
.activity-time { font-size:12px; color:var(--muted-foreground); margin-top:2px; }
.activity-meta { display:flex; gap:8px; align-items:center; margin-top:3px; flex-wrap:wrap; }
.activity-module-badge { font-size:10px; font-weight:600; padding:1px 7px; border-radius:9999px; background:var(--muted); color:var(--muted-foreground); }
.activity-ip { font-size:10px; color:var(--muted-foreground); opacity:.7; font-family:monospace; }

/* ============================================
   DETAIL VIEW
   ============================================ */
.detail-header { margin-bottom:24px; }
.detail-name { font-size:22px; font-weight:700; letter-spacing:-0.5px; }
.detail-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.detail-item { padding:14px 0; border-bottom:1px solid var(--border); }
.detail-item.detail-full { grid-column:1 / -1; }
.detail-label { font-size:12px; font-weight:500; color:var(--muted-foreground); margin-bottom:4px; }
.detail-value { font-size:14px; color:var(--foreground); word-break:break-word; }

/* ============================================
   FILE UPLOAD
   ============================================ */
.file-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--muted);
}
.file-upload-area:hover,.file-upload-area.drag-over { border-color:var(--accent); background:rgba(16,185,129,.04); }
.file-upload-area.has-file { border-color:var(--success); background:#ecfdf5; }
.file-upload-icon { font-size:28px; margin-bottom:8px; }
.file-upload-text { font-size:13px; font-weight:500; color:var(--foreground); }
.file-upload-hint { font-size:12px; color:var(--muted-foreground); margin-top:4px; }

/* ============================================
   MOBILE CARDS
   ============================================ */
.mobile-card-list { display:flex; flex-direction:column; }
.mobile-nominee-card { padding:14px 16px; border-bottom:1px solid var(--border); transition:background var(--transition-fast); }
.mobile-nominee-card:last-child { border-bottom:none; }
.mobile-nominee-card.winner-row { background:linear-gradient(90deg,#ecfdf5,var(--card)); }
.mobile-nominee-card.shortlisted { background:linear-gradient(90deg,#fffbeb,var(--card)); }
.mobile-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mobile-card-body { margin-top:6px; padding-left:0; font-size:12px; color:var(--muted-foreground); }
.mobile-card-actions { display:flex; gap:4px; margin-top:10px; }

/* Visibility — don't set explicit display so it works with tables, divs, etc. */
.hide-mobile { /* visible by default, hidden on mobile via media query */ }
.show-mobile { display:none; }

/* Utilities */
.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--muted-foreground)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-4{margin-bottom:16px}
.flex{display:flex}.gap-2{gap:8px}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.hidden{display:none!important}

/* ============================================
   RESPONSIVE: TABLET
   ============================================ */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%);transition:none}
  .sidebar.sidebar-ready{transition:transform var(--transition-slow)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:flex;align-items:center;justify-content:center}
  .sidebar-overlay.active{display:block}
  .main-content{margin-left:0;max-width:100vw}
  .top-bar{left:0}
  .mobile-menu-btn{display:flex;align-items:center;justify-content:center}
  .hide-tablet{display:none!important}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}

  /* Contain tables within viewport */
  .table-container { max-width:100%; }
  .content-area { max-width:100vw; overflow-x:hidden; }
  .card-body.no-padding { overflow-x:auto; }
}

/* ============================================
   RESPONSIVE: MOBILE
   ============================================ */
@media(max-width:640px){
  /* Core layout */
  .content-area { padding:14px; padding-top:72px; }
  .top-bar { padding:10px 14px; }
  .top-bar-left { gap:10px; }
  .page-title { font-size:16px; }
  .page-subtitle { display:none; }

  /* Hamburger button — ensure SVG never swallows taps */
  .mobile-menu-btn svg { pointer-events:none; }

  /* Stats — single column on small screens */
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-card { padding:14px; }
  .stat-value { font-size:20px; letter-spacing:-0.5px; }
  .stat-icon { width:34px; height:34px; font-size:16px; margin-bottom:10px; }
  .stat-label { font-size:11px; }

  /* Cards — tighter */
  .card-header { padding:12px 14px; gap:8px; }
  .card-header h3.card-title { font-size:13px; }
  .card-body { padding:14px; }

  /* Filters — stack vertically */
  .filters-bar { flex-direction:column; align-items:stretch; gap:8px; }
  .search-box { min-width:100%; }
  .filter-select { min-width:100%; width:100%; }
  .filters-actions { margin-left:0; justify-content:stretch; }
  .filters-actions .btn { flex:1; }

  /* Forms — single column */
  .form-row { grid-template-columns:1fr; gap:0; }

  /* Detail view */
  .detail-grid { grid-template-columns:1fr; }
  .detail-name { font-size:18px; }

  /* Table/card swap */
  .hide-mobile { display:none !important; }
  .show-mobile { display:flex !important; }

  /* Tables — compact on mobile */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 28px);
    margin: 0 -14px;
    padding: 0 14px;
  }
  .table { font-size:12px; min-width:0; table-layout:auto; }
  .table th { padding:7px 8px; font-size:10px; }
  .table td { padding:7px 8px; font-size:12px; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
  .table td .badge { font-size:10px; padding:2px 6px; }
  .table .table-actions { gap:2px; }
  .table .table-actions .btn { padding:4px 6px; font-size:11px; }
  /* Toggle smaller on mobile */
  .toggle { width:36px; height:20px; }
  .toggle::after { width:14px; height:14px; }
  .toggle.active::after { transform:translateX(16px); }

  /* Modal — full-width mobile */
  .modal-overlay { padding:10px; align-items:flex-end; }
  .modal {
    margin:0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    max-height:92vh;
    max-width:100%;
  }
  .modal-header { padding:14px 16px; }
  .modal-body { padding:16px; }
  .modal-footer { padding:12px 16px; }

  /* Pagination */
  .pagination { padding:10px 14px; justify-content:center; }
  .pagination-info { width:100%; text-align:center; }
  .pagination-controls { justify-content:center; }

  /* Toast — full width */
  .toast-container { left:10px; right:10px; top:10px; }
  .toast { min-width:auto; width:100%; }

  /* Bulk actions — bottom bar */
  .bulk-actions { left:14px; right:14px; transform:none; flex-wrap:wrap; justify-content:center; }

  /* Tabs */
  .tabs { gap:0; overflow-x:auto; }
  .tab { padding:8px 12px; font-size:12px; }

  /* File upload */
  .file-upload-area { padding:20px 14px; }

  /* Top actions: hide labels, keep icons, prevent clip */
  .top-actions .btn span.btn-label { display:none; }
  .top-actions { gap:6px; flex-shrink:0; }
  .top-actions .btn { padding:6px 8px; min-width:32px; }
  .page-title { font-size:15px; flex-shrink:1; }
  .top-bar-left { gap:8px; }

  /* Settings: flags grid */
  .flags-grid { grid-template-columns:1fr; }
  .flag-item { padding:10px 12px; }

  /* Score input in tables */
  .score-input { width:50px; padding:4px 6px; font-size:12px; }

  /* Mobile card list refinements */
  .mobile-nominee-card { padding:12px 14px; }
  .mobile-card-body { font-size:12px; }

  /* Email template on mobile */
  .email-template { font-size:11px; padding:12px; max-height:200px; }

  /* Card header: ensure buttons don't clip */
  .card-header { flex-wrap:wrap !important; gap:8px !important; }
  .card-header .btn { white-space:nowrap; flex-shrink:0; }
  .card-header h3.card-title { font-size:13px; min-width:0; flex:1; }

  /* Prevent any child from causing overflow */
  .card, .card-body, .content-area { max-width:100%; overflow-x:hidden; }
  .card-body.no-padding { overflow-x:auto; }

  /* Import wizard mobile fixes */
  .import-wizard { max-width:100%; }
  .import-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .import-stats { flex-direction:column; gap:8px; }
  .import-stat { min-width:100%; }
  .mapping-row { grid-template-columns:1fr !important; gap:4px !important; }
  .file-columns-preview table { font-size:10px; }
  .file-columns-preview td, .file-columns-preview th { padding:4px 6px; max-width:100px; }
  .quiz-cols-grid { grid-template-columns:1fr !important; }
  .import-options { flex-direction:column; gap:12px; }

  /* Badges wrap nicely */
  .detail-badges { gap:4px; }
  .detail-badges .badge { font-size:10px; }
}

/* ============================================
   RESPONSIVE: SMALL MOBILE
   ============================================ */
@media(max-width:400px){
  .stats-grid { grid-template-columns:1fr; }
  .stat-card { padding:12px; }
  .stat-value { font-size:18px; }
  .content-area { padding:10px; padding-top:66px; }
  .top-bar { padding:8px 10px; }
  .card-header { padding:10px 12px; }
  .card-body { padding:10px; }
  .mobile-nominee-card { padding:10px 12px; }
  .page-title { font-size:15px; }

  /* Prevent zoom on table containers */
  .table-container { max-width:calc(100vw - 20px); margin:0 -10px; padding:0 10px; }
  .table th { padding:6px 8px; font-size:10px; }
  .table td { padding:6px 8px; font-size:11px; }

  /* Buttons tighter */
  .btn { padding:6px 12px; font-size:12px; }
  .btn-sm { padding:4px 8px; font-size:11px; }

  /* Modal fills screen */
  .modal-overlay { padding:0; }
  .modal { border-radius:0; max-height:100vh; height:auto; }
}

/* ============================================
   PRINT
   ============================================ */
@media print{
  .sidebar,.sidebar-overlay,.top-bar,.btn,.filters-bar,.toast-container,.modal-overlay,.bulk-actions,.mobile-card-actions{display:none!important}
  .main-content{margin-left:0!important}
  .content-area{padding-top:0!important}
  .card{box-shadow:none!important;border:1px solid #ddd}
  .content-area{padding:0}
  body{background:#fff}
  .hide-mobile{display:revert!important}
  .show-mobile{display:none!important}
}

/* ========== Global Search — v1.7.0 (Command Palette) ========== */

/* Trigger button in topbar */
.gs-box{flex:0 1 360px;min-width:0}
.gs-trigger{display:flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:var(--muted);cursor:pointer;transition:all .15s;user-select:none}
.gs-trigger:hover{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px rgba(16,185,129,.08)}
.gs-trigger-icon{color:var(--muted-foreground);flex-shrink:0;opacity:.6}
.gs-trigger-text{flex:1;font-size:13px;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-trigger-kbd{font-size:10px;color:var(--muted-foreground);background:var(--card);padding:2px 6px;border-radius:4px;font-family:'SF Mono',Monaco,Consolas,monospace;border:1px solid var(--border);flex-shrink:0;line-height:1.4;letter-spacing:.3px}

/* Dimmed background overlay */
.gs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9998;display:none}
.gs-overlay.active{display:block}

/* Modal container */
.gs-modal{position:fixed;top:0;left:0;right:0;z-index:9999;display:none;justify-content:center;padding-top:min(20vh,140px)}
.gs-modal.active{display:flex}

/* Inner card */
.gs-modal-inner{width:100%;max-width:620px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column;max-height:min(520px,70vh)}
[data-theme=dark] .gs-modal-inner{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}

/* Search input area */
.gs-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.gs-input-icon{color:var(--muted-foreground);flex-shrink:0;opacity:.5}
.gs-input{flex:1;border:none;background:transparent;font-size:15px;color:var(--foreground);font-family:inherit;outline:none;padding:0;line-height:1.4}
.gs-input::placeholder{color:var(--muted-foreground);opacity:.5}
.gs-input-clear{background:none;border:none;color:var(--muted-foreground);cursor:pointer;font-size:13px;padding:4px 6px;border-radius:4px;transition:all .1s;flex-shrink:0;line-height:1}
.gs-input-clear:hover{background:var(--muted);color:var(--foreground)}

/* Results area */
.gs-results{flex:1;overflow-y:auto;overscroll-behavior:contain}
.gs-results::-webkit-scrollbar{width:6px}
.gs-results::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Hint / empty state */
.gs-hint{padding:32px 20px;text-align:center}
.gs-hint-text{font-size:13px;color:var(--muted-foreground);opacity:.7;margin-bottom:14px}
.gs-hint-shortcuts{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.gs-hint-shortcuts span{font-size:11px;color:var(--muted-foreground);opacity:.5;display:flex;align-items:center;gap:4px}
.gs-hint-shortcuts kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:var(--muted);border:1px solid var(--border);border-radius:4px;font-size:10px;font-family:'SF Mono',Monaco,Consolas,monospace;color:var(--muted-foreground)}

/* Section headers */
.gs-section{padding-top:6px}
.gs-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-foreground);padding:6px 18px 4px;opacity:.6}

/* Result items */
.gs-item{display:flex;align-items:center;gap:12px;padding:8px 18px;cursor:pointer;transition:background .08s;text-decoration:none;color:inherit;margin:0 6px;border-radius:8px}
.gs-item:hover,.gs-item.focused{background:var(--accent);color:#fff}
.gs-item:hover .gs-item-name,.gs-item.focused .gs-item-name{color:#fff}
.gs-item:hover .gs-item-detail,.gs-item.focused .gs-item-detail{color:rgba(255,255,255,.7)}
.gs-item:hover .gs-item-icon,.gs-item.focused .gs-item-icon{background:rgba(255,255,255,.2);color:#fff}
.gs-item:hover .gs-item-badge,.gs-item.focused .gs-item-badge{background:rgba(255,255,255,.2);color:#fff}
.gs-item:hover mark,.gs-item.focused mark{background:rgba(255,255,255,.25);color:#fff}

/* Item icon avatar */
.gs-item-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;text-transform:uppercase;transition:all .08s}
.gs-item-icon.nominee{background:rgba(16,185,129,.1);color:#059669}
.gs-item-icon.goh{background:rgba(245,158,11,.1);color:#b45309}
.gs-item-icon.delegate{background:rgba(59,130,246,.1);color:#2563eb}
.gs-item-icon.additional_guest{background:rgba(107,114,128,.1);color:#6b7280}
.gs-item-icon.category{background:rgba(139,92,246,.1);color:#7c3aed}
.gs-item-icon.form{background:rgba(236,72,153,.1);color:#db2777}
.gs-item-icon.activity{background:rgba(245,158,11,.1);color:#d97706}
.gs-item-icon.attendance{background:rgba(16,185,129,.1);color:#059669}
.gs-item-icon.shortlist{background:rgba(245,158,11,.1);color:#d97706}
.gs-item-icon.winner{background:rgba(245,158,11,.12);color:#92400e}
.gs-item-icon.form_response{background:rgba(59,130,246,.1);color:#2563eb}
.gs-item-icon.media{background:rgba(139,92,246,.1);color:#7c3aed}
.gs-item-icon.user{background:rgba(16,185,129,.1);color:#059669}
.gs-item-icon.setting{background:rgba(107,114,128,.1);color:#6b7280}

/* Item content */
.gs-item-body{flex:1;min-width:0}
.gs-item-name{font-size:13px;font-weight:600;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .08s}
.gs-item-name mark{background:rgba(16,185,129,.18);color:inherit;border-radius:2px;padding:0 2px;font-weight:700;transition:all .08s}
.gs-item-detail{font-size:11px;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;transition:color .08s}
.gs-item-badge{font-size:10px;padding:3px 8px;border-radius:10px;font-weight:600;flex-shrink:0;white-space:nowrap;transition:all .08s}

/* Loading spinner */
.gs-loading{padding:24px 20px;text-align:center;color:var(--muted-foreground);font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}
.gs-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:gsSpin .6s linear infinite}
@keyframes gsSpin{to{transform:rotate(360deg)}}

/* Empty state */
.gs-empty{padding:28px 20px;text-align:center}
.gs-empty-icon{font-size:28px;margin-bottom:6px;opacity:.5}
.gs-empty-text{font-size:13px;color:var(--muted-foreground)}

/* Footer */
.gs-footer{padding:8px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.gs-footer-left,.gs-footer-right{display:flex;align-items:center;gap:10px}
.gs-footer span{font-size:10px;color:var(--muted-foreground);opacity:.5;display:flex;align-items:center;gap:3px}
.gs-footer kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:var(--muted);border:1px solid var(--border);border-radius:3px;font-size:9px;font-family:'SF Mono',Monaco,Consolas,monospace;color:var(--muted-foreground)}

/* Search highlight pulse animation */
@keyframes searchHighlightPulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.5);background:rgba(16,185,129,.08)}
  40%{box-shadow:0 0 0 8px rgba(16,185,129,.2);background:rgba(16,185,129,.12)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0);background:transparent}
}
.search-highlight{animation:searchHighlightPulse 1s ease-in-out 3;border-radius:6px;scroll-margin-top:100px}
tr.search-highlight>td{background:rgba(16,185,129,.08)!important}
.card.search-highlight,.person-card.search-highlight,.photo-card.search-highlight{box-shadow:0 0 0 3px rgba(16,185,129,.4)}

/* Responsive */
@media(max-width:768px){
  .gs-box{flex:0 0 auto}
  .gs-trigger-text{display:none}
  .gs-trigger{padding:7px 10px;gap:6px}
  .gs-trigger-kbd{display:none}
  .gs-modal{padding-top:12px;padding-left:10px;padding-right:10px}
  .gs-modal-inner{max-height:calc(100vh - 40px);border-radius:12px}
}
@media(max-width:480px){
  .gs-modal{padding-top:0}
  .gs-modal-inner{max-height:100vh;border-radius:0;max-width:100%}
}
.photo-thumb-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#000}
.photo-thumb-wrap video{width:100%;height:100%;object-fit:cover}
.video-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);cursor:pointer;transition:background .15s}
.video-play-overlay:hover{background:rgba(0,0,0,.4)}
.video-play-icon{width:44px;height:44px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center}
.video-play-icon svg{margin-left:3px}
.video-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}
.lightbox-video{max-width:92vw;max-height:88vh;border-radius:6px;outline:none}

/* ============================================
   CEREMONY & BACKSTAGE — Mobile Fixes v1.8.2
   ============================================ */

/* Touch-friendly reorder buttons everywhere */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .seq-handle { width: 48px; }
  .seq-handle .reorder-btn {
    width: 42px; height: 28px; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,.08);
    touch-action: manipulation;
  }
  .seq-handle .reorder-btns { gap: 4px; }
}

/* Ceremony sequence mobile layout */
@media (max-width: 640px) {
  .ceremony-grid { grid-template-columns: 1fr !important; }
  .seq-item {
    flex-wrap: wrap;
    gap: 0;
  }
  .seq-body { flex-basis: calc(100% - 96px); }
  .seq-status { min-width: auto; padding: 4px 8px; flex-direction: row; }
  .seq-actions {
    width: 100%;
    border-top: 1px solid var(--border);
    padding: 6px 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .seq-actions .btn {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px;
    touch-action: manipulation;
  }
  .seq-actions form { display: inline; }

  /* Backstage view mobile */
  .backstage-now { font-size: 28px !important; }
  .backstage-now-category { font-size: 16px !important; }
  .backstage-now-presenter { font-size: 14px !important; }
  .backstage-label { font-size: 14px !important; letter-spacing: 2px !important; }
  .backstage-next { font-size: 20px !important; }
  .backstage-next-label { font-size: 13px !important; }
  .backstage-next-category { font-size: 14px !important; }
  .backstage-content { padding: 20px 16px !important; }
  .backstage-header { padding: 10px 14px !important; }
  .backstage-header h2 { font-size: 14px !important; }
  .backstage-divider { margin: 24px 0 !important; }
  .backstage-footer {
    padding: 10px 14px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .backstage-controls { width: 100% !important; justify-content: stretch; }
  .backstage-btn {
    flex: 1 !important;
    padding: 14px 8px !important;
    font-size: 14px !important;
    min-height: 48px;
    touch-action: manipulation;
  }
  .backstage-progress { text-align: center; width: 100%; }
}

/* Ceremony category filter pill */
.ceremony-cat-filter {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.ceremony-cat-pill {
  padding: 5px 12px; border-radius: 16px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.ceremony-cat-pill:hover { border-color: var(--accent); }
.ceremony-cat-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* GOH plaque entry styling */
.seq-item.entry-goh { border-left: 3px solid #f59e0b; }
.seq-item.entry-goh .seq-num { color: #f59e0b; }
.goh-plaque-badge { background: #fef3c7; color: #92400e; font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }