/* ==========================================================================
   VGDS Admin CMS — visual layer on top of MudBlazor's own component styles.
   Scoped to .vgds-admin-shell (AdminLayout's <MudLayout>) so none of this
   leaks into MudBlazor components used elsewhere (there currently aren't
   any on the public site, but this keeps the intent explicit either way).
   Reuses the brand tokens from variables.css (already loaded globally via
   App.razor) rather than redefining colors, so the admin tool and the
   public site can never visually drift apart.
   ========================================================================== */

.vgds-admin-shell {
  --admin-appbar-h: 68px;
}

/* ---------- App bar: gradient + a faint wave pattern instead of a flat fill ---------- */
.vgds-admin-shell .mud-appbar {
  min-height: var(--admin-appbar-h);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 12 Q 15 0 30 12 T 60 12 T 90 12 T 120 12' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom / 120px 24px,
    linear-gradient(120deg, var(--vgds-river-blue-900) 0%, var(--vgds-river-blue-700) 55%, var(--vgds-forest-green-800) 130%) !important;
  box-shadow: 0 2px 16px rgba(7, 43, 62, 0.25) !important;
}

.vgds-admin-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: 0.35rem;
}
.vgds-admin-brand .vgds-admin-emblem {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.vgds-admin-brand .vgds-admin-emblem img { width: 100%; height: 100%; object-fit: cover; }
.vgds-admin-brand .vgds-admin-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.vgds-admin-brand .vgds-admin-title {
  font-family: "Bebas Neue", var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
  color: #fff;
}
.vgds-admin-brand .vgds-admin-subtitle {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 600;
}

.vgds-admin-user-chip {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-weight: 600;
  backdrop-filter: blur(2px);
}

.vgds-admin-shell .mud-appbar .mud-button-root.mud-button-text.mud-button-text-inherit:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Drawer / nav ---------- */
.vgds-admin-shell .mud-drawer {
  border-right: 1px solid var(--vgds-border);
}
.vgds-admin-shell .mud-nav-group .mud-nav-link .mud-nav-link-text,
.vgds-admin-shell .mud-nav-group > .mud-nav-link {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vgds-text-muted);
}
.vgds-admin-shell .mud-nav-link {
  border-radius: var(--radius-sm, 8px);
  margin: 2px 8px;
  transition: background-color 120ms ease, color 120ms ease;
  text-decoration: none !important;
}
.vgds-admin-shell .mud-nav-link * {
  text-decoration: none !important;
}
.vgds-admin-shell .mud-nav-link:not(.mud-nav-link-disabled):hover {
  background: var(--vgds-aqua-100);
}
.vgds-admin-shell .mud-nav-link.active,
.vgds-admin-shell .mud-nav-link[href$="/admin"].active {
  background: var(--vgds-primary) !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}
.vgds-admin-shell .mud-nav-link.active *,
.vgds-admin-shell .mud-nav-link[href$="/admin"].active * {
  text-decoration: none !important;
}
.vgds-admin-shell .mud-nav-link.active .mud-icon-root {
  color: #fff !important;
}

/* ---------- Dashboard: section headers ---------- */
.vgds-admin-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--vgds-primary-dark);
  margin: 2rem 0 1rem;
}
.vgds-admin-section-title:first-child {
  margin-top: 0;
}
.vgds-admin-section-title .mud-icon-root {
  color: var(--vgds-accent-icon, var(--vgds-aqua-600));
}

.vgds-admin-welcome {
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--vgds-river-blue-800), var(--vgds-forest-green-700));
}
.vgds-admin-welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='170' cy='30' r='90' fill='rgba(255,255,255,0.05)'/%3E%3Ccircle cx='20' cy='180' r='60' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") no-repeat;
  background-size: cover;
  pointer-events: none;
}
.vgds-admin-welcome h4 {
  color: #fff;
  position: relative;
}
.vgds-admin-welcome p {
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  margin: 0;
}

/* ---------- Dashboard: stat cards ---------- */
.vgds-admin-stat-card {
  border-radius: var(--radius-lg, 16px) !important;
  border-top: 4px solid var(--stat-accent, var(--vgds-primary));
  transition: transform 160ms ease, box-shadow 160ms ease;
  height: 100%;
}
.vgds-admin-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 16px 32px rgba(7, 43, 62, 0.14)) !important;
}
.vgds-admin-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--stat-accent, var(--vgds-primary)) 14%, transparent);
  color: var(--stat-accent, var(--vgds-primary));
  margin-bottom: 0.75rem;
}
.vgds-admin-stat-count {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--vgds-primary-dark);
  line-height: 1;
}
.vgds-admin-stat-label {
  font-size: 0.82rem;
  color: var(--vgds-text-muted);
  font-weight: 600;
  margin-top: 0.35rem;
}