:root {
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-border: #dbe3ef;
  --app-text: #152033;
  --app-muted: #617089;
  --app-primary: #2563eb;
  --app-primary-dark: #1d4ed8;
  --app-success: #059669;
  --app-warning: #b45309;
  --app-danger: #dc2626;
  --app-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  --app-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem),
    linear-gradient(180deg, #f8fbff 0%, var(--app-bg) 52%, #eef4fb 100%) !important;
  color: var(--app-text);
  letter-spacing: 0;
}

a,
button,
input,
select,
textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

input,
select,
textarea {
  background-color: #fff;
  border-color: var(--app-border) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, .75) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16) !important;
}

body > aside,
.admin-sidebar {
  background: rgba(255, 255, 255, .88) !important;
  border-right: 1px solid rgba(219, 227, 239, .9) !important;
  box-shadow: 8px 0 28px rgba(15, 23, 42, .05) !important;
}

aside h1 {
  color: #0f2f69 !important;
  font-size: 1.08rem !important;
  letter-spacing: .02em;
}

aside nav a {
  color: #31415a;
  border-radius: 8px !important;
  font-weight: 600;
}

aside nav a:hover,
aside nav a.bg-blue-100 {
  background: #eaf2ff !important;
  color: var(--app-primary-dark) !important;
}

main {
  min-width: 0;
}

.app-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.app-page-title {
  color: #102a56;
  font-size: clamp(1.7rem, 2.2vw, 2.35rem);
  font-weight: 800;
  line-height: 1.1;
}

.app-page-subtitle {
  color: var(--app-muted);
  margin-top: .35rem;
}

.app-card,
.bg-white\/70,
.bg-white\/80,
.bg-white\/90 {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(219, 227, 239, .9) !important;
  border-radius: 12px !important;
  box-shadow: var(--app-shadow-sm) !important;
}

.rounded-2xl {
  border-radius: 12px !important;
}

.rounded-xl {
  border-radius: 10px !important;
}

.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--app-shadow) !important;
}

.app-btn,
a[class*="bg-blue"],
a[class*="bg-green"],
a[class*="bg-yellow"],
a[class*="bg-red"],
button[class*="bg-blue"],
button[class*="bg-green"],
button[class*="bg-yellow"],
button[class*="bg-red"] {
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
}

a[class*="bg-blue"]:hover,
a[class*="bg-green"]:hover,
a[class*="bg-yellow"]:hover,
a[class*="bg-amber"]:hover,
a[class*="bg-red"]:hover,
button[class*="bg-blue"]:hover,
button[class*="bg-green"]:hover,
button[class*="bg-yellow"]:hover,
button[class*="bg-amber"]:hover,
button[class*="bg-red"]:hover {
  transform: translateY(-1px);
}

a[class*="bg-yellow"],
a[class*="bg-amber"],
button[class*="bg-yellow"],
button[class*="bg-amber"] {
  background-color: #d97706 !important;
  color: #ffffff !important;
}

a[class*="bg-yellow"]:hover,
a[class*="bg-amber"]:hover,
button[class*="bg-yellow"]:hover,
button[class*="bg-amber"]:hover {
  background-color: #b45309 !important;
  color: #ffffff !important;
}

a[class*="bg-emerald"], button[class*="bg-emerald"] { background-color: #059669 !important; color: #ffffff !important; }
a[class*="bg-emerald"]:hover, button[class*="bg-emerald"]:hover { background-color: #047857 !important; color: #ffffff !important; }

a[class*="bg-sky"], button[class*="bg-sky"] { background-color: #0284c7 !important; color: #ffffff !important; }
a[class*="bg-sky"]:hover, button[class*="bg-sky"]:hover { background-color: #0369a1 !important; color: #ffffff !important; }

a[class*="bg-teal"], button[class*="bg-teal"] { background-color: #0d9488 !important; color: #ffffff !important; }
a[class*="bg-teal"]:hover, button[class*="bg-teal"]:hover { background-color: #0f766e !important; color: #ffffff !important; }

a[class*="bg-purple"], button[class*="bg-purple"] { background-color: #7c3aed !important; color: #ffffff !important; }
a[class*="bg-purple"]:hover, button[class*="bg-purple"]:hover { background-color: #6d28d9 !important; color: #ffffff !important; }

table {
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}

thead {
  background: #eef5ff !important;
}

th {
  color: #41516a;
  font-size: .76rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

td,
th {
  border-color: #e5ecf5 !important;
}

tbody tr:hover {
  background: #f6f9fd !important;
}

.manage-actions-heading,
.manage-actions-cell {
  min-width: 390px;
}

.manage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

.manage-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: .4rem .75rem;
  border-radius: 8px;
  color: #fff !important;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}

.manage-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(.94);
}

.action-view { background: #2563eb; }
.action-edit { background: #d97706; }
.action-form { background: #059669; }
.action-payment { background: #0f766e; }
.action-communications { background: #0369a1; }
.action-cert { background: #7c3aed; }
.action-delete { background: #dc2626; }

.event-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.event-card img,
.event-poster {
  aspect-ratio: 16 / 10;
  height: auto !important;
  object-fit: cover;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 700;
}

.status-pill.is-open {
  background: #dcfce7;
  color: #166534;
}

.status-pill.is-past {
  background: #e5e7eb;
  color: #374151;
}

.portal-hero {
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid rgba(219, 227, 239, .9);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
}

.portal-search {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(219, 227, 239, .9);
  border-radius: 12px;
  box-shadow: var(--app-shadow-sm);
  padding: 1rem;
}

.form-shell {
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(219, 227, 239, .9);
  border-radius: 12px !important;
  box-shadow: var(--app-shadow) !important;
}

@media (max-width: 900px) {
  body.min-h-screen.flex {
    flex-direction: column;
  }

  body > aside {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
  }

  aside nav {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
  }

  aside nav a {
    white-space: nowrap;
  }

  main {
    padding: 1rem !important;
  }

  .app-page-header {
    align-items: stretch;
    flex-direction: column;
  }
}