/* Shared visual tokens to mirror the Next.js admin shell */
:root {
  --brand-primary: #0058be;
  --brand-ink: #091426;
  --surface-soft: #f2f4f6;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
}

.editorial-shadow {
  box-shadow: 0 20px 40px rgba(9, 20, 38, 0.05);
}

.ghost-border-input {
  border: none;
  border-bottom: 1px solid rgba(197, 198, 205, 0.25);
  background: transparent;
  transition: all 0.3s ease;
}

.ghost-border-input:focus {
  outline: none;
  border-bottom-color: var(--brand-primary);
  box-shadow: 0 4px 12px -4px rgba(0, 88, 190, 0.15);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.admin-shell {
  background: var(--surface-soft);
  color: var(--brand-ink);
}

.admin-sidebar {
  background: var(--surface-soft);
  border-right: 1px solid #e6ebf0;
}

.admin-brand-dot {
  background: var(--brand-primary);
  color: #fff;
}

.admin-nav-link {
  color: #64748b;
  transition: all 0.2s ease;
}

.admin-nav-link:hover {
  transform: translateX(4px);
  color: var(--brand-ink);
}

.admin-nav-link.active {
  background: #fff;
  color: var(--brand-primary);
  font-weight: 600;
}

.admin-main {
  background: #f8fafc;
}

.admin-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e6ebf0;
}

.kpi-card {
  background: #fff;
  border: 1px solid #e6ebf0;
  border-radius: 0.9rem;
  transition: all 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(9, 20, 38, 0.08);
}