/* Bella Cosmetics — restyle the Filament admin to match the old admin identity
   (charcoal #2d2d2d primary + mauve/gold #564452 accent + Playfair headings). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');

:root {
  --bella-charcoal: #2d2d2d;
  --bella-gold: #564452;
}

/* --- Playfair for brand + all headings (like the old admin) --- */
.fi-logo,
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-heading,
.fi-fo-wizard-header-step-label,
.fi-simple-header h1,
h1.fi-header-heading {
  font-family: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif !important;
  letter-spacing: .2px;
}
.fi-logo { color: var(--bella-charcoal) !important; font-weight: 800; }

/* --- Sidebar: rounded items, solid charcoal active state (old admin look) --- */
.fi-sidebar-item-button { border-radius: .75rem !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button {
  background-color: var(--bella-charcoal) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(45, 45, 45, .18);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }

/* Sidebar group labels + a subtle gold accent line */
.fi-sidebar-group-label { color: var(--bella-gold) !important; font-weight: 700; letter-spacing: .06em; }

/* --- Login / simple page card: rounded + soft shadow like the old login --- */
.fi-simple-main {
  border-radius: 1rem !important;
  box-shadow: 0 20px 50px rgba(45, 45, 45, .10) !important;
  border: 1px solid rgba(45, 45, 45, .06) !important;
}
.fi-simple-header { text-align: center; }

/* --- Primary buttons: charcoal with soft shadow (matches old "Login" button) --- */
.fi-btn.fi-color-primary { box-shadow: 0 6px 16px rgba(45, 45, 45, .18); }

/* --- Topbar brand area a touch of gold underline on hover --- */
a.fi-topbar-item:hover { color: var(--bella-gold) !important; }

/* --- Cards / sections rounded like the storefront (rounded-2xl) --- */
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn { border-radius: 1rem !important; }

/* --- Focus ring accent in the brand mauve/gold --- */
.fi-input:focus, .fi-select-input:focus, .fi-fo-field-wrp :focus-visible {
  --tw-ring-color: var(--bella-gold) !important;
}