/**
 * SaloNation — system-wide design tokens
 * Warm Editorial Operational (DESIGN.md): botanical-emerald CTAs, terracotta
 * accents, espresso sidebar, warm canvas. Plus Jakarta Sans headlines + Inter UI.
 *
 * Use the --sn-* variables in any theme CSS. Prefer these over one-off hex values.
 */

:root {
    /* -------------------------------------------------------------------------
     * Color — Primary (botanical emerald #005d42)
     * ------------------------------------------------------------------------- */
    --sn-primary-50: #97f5cc;
    --sn-primary-100: #97f5cc;
    --sn-primary-200: #7bd8b1;
    --sn-primary-300: #7bd8b1;
    --sn-primary-400: #047857;
    --sn-primary-500: #005d42;
    --sn-primary-600: #00513a;
    --sn-primary-700: #002115;
    --sn-primary-800: #002115;
    --sn-primary-900: #002115;
    --sn-primary-500-rgb: 0, 93, 66;

    /* -------------------------------------------------------------------------
     * Color — Secondary (warm stone #625d5b)
     * ------------------------------------------------------------------------- */
    --sn-secondary-50: #e9e1dd;
    --sn-secondary-100: #e9e1dd;
    --sn-secondary-200: #ccc5c2;
    --sn-secondary-300: #ccc5c2;
    --sn-secondary-400: #686361;
    --sn-secondary-500: #625d5b;
    --sn-secondary-600: #4a4643;
    --sn-secondary-700: #4a4643;
    --sn-secondary-800: #1e1b19;
    --sn-secondary-900: #1e1b19;
    --sn-secondary-500-rgb: 98, 93, 91;

    /* -------------------------------------------------------------------------
     * Color — Tertiary (terracotta #7d4200)
     * ------------------------------------------------------------------------- */
    --sn-tertiary-50: #ffe5d3;
    --sn-tertiary-100: #ffdcc3;
    --sn-tertiary-200: #ffdcc3;
    --sn-tertiary-300: #ffb77d;
    --sn-tertiary-400: #a05600;
    --sn-tertiary-500: #7d4200;
    --sn-tertiary-600: #6e3900;
    --sn-tertiary-700: #6e3900;
    --sn-tertiary-800: #2f1500;
    --sn-tertiary-900: #2f1500;
    --sn-tertiary-500-rgb: 125, 66, 0;

    /* -------------------------------------------------------------------------
     * Color — Neutral (warm canvas / espresso ink)
     * ------------------------------------------------------------------------- */
    --sn-neutral-50: #fff8f5;
    --sn-neutral-100: #fcf2eb;
    --sn-neutral-200: #eae1da;
    --sn-neutral-300: #bdc9c1;
    --sn-neutral-400: #6e7a73;
    --sn-neutral-500: #3e4943;
    --sn-neutral-600: #3e4943;
    --sn-neutral-700: #1f1b17;
    --sn-neutral-800: #1f1b17;
    --sn-neutral-900: #002115;
    --sn-neutral-500-rgb: 62, 73, 67;

    /* -------------------------------------------------------------------------
     * Semantic
     * ------------------------------------------------------------------------- */
    --sn-color-text: #1f1b17;
    --sn-color-text-muted: #3e4943;
    --sn-color-headline: #1f1b17;
    --sn-color-on-primary-solid: #ffffff;
    --sn-color-danger: #ba1a1a;
    --sn-color-danger-hover: #93000a;
    --sn-color-danger-rgb: 186, 26, 26;
    --sn-color-success: #047857;
    --sn-color-success-deep: #005d42;
    --sn-color-warning: #a05600;
    --sn-color-warning-deep: #6e3900;
    --sn-warning-subtle: #ffdcc3;
    --sn-error-subtle: #ffdad6;
    --sn-success-subtle: #97f5cc;
    --sn-accent: #7d4200;
    --sn-accent-subtle: #ffdcc3;
    --sn-accent-wash: #ffe5d3;
    --sn-on-primary: #ffffff;

    --sn-surface-page: #fff8f5;
    --sn-surface-subtle: var(--sn-neutral-100);
    --sn-surface-card: #ffffff;
    --sn-border-default: #bdc9c1;
    --sn-border-strong: #e2d8d2;

    --sn-color-sidebar: #342f2b;
    --sn-color-sidebar-active: #4a4643;
    --sn-color-sidebar-subnav: #625d5b;
    --sn-color-on-sidebar: #f9efe8;
    --sn-color-topbar: #fff8f5;
    --sn-color-on-topbar: #1f1b17;
    --sn-color-on-topbar-mute: #3e4943;
    --sn-sidenav-width: 15rem;
    --sn-topbar-height: 4rem;

    --sn-chart-1: #005d42;
    --sn-chart-2: #047857;
    --sn-chart-3: #7d4200;
    --sn-chart-4: #ffb77d;
    --sn-chart-5: #625d5b;

    --sn-whatsapp: #25d366;
    --sn-whatsapp-container: #dcfce7;
    --sn-whatsapp-border: #86efac;
    --sn-whatsapp-text: #15803d;

    --sn-status-booked: #f3f4f6;
    --sn-status-booked-text: #4b5563;
    --sn-status-confirmed: #eff6ff;
    --sn-status-confirmed-text: #1d4ed8;
    --sn-status-offline: #f5f3ff;
    --sn-status-offline-text: #6d28d9;
    --sn-status-offline-border: #ddd6fe;

    /* -------------------------------------------------------------------------
     * Typography
     * ------------------------------------------------------------------------- */
    --sn-font-headline: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    --sn-font-body: "Inter", system-ui, -apple-system, sans-serif;
    --sn-font-label: var(--sn-font-body);

    --sn-text-headline: var(--sn-color-headline);
    --sn-text-body: var(--sn-color-text);
    --sn-text-label: var(--sn-color-text-muted);

    --sn-font-size-xs: 0.75rem;
    --sn-font-size-sm: 0.875rem;
    --sn-font-size-base: 1rem;
    --sn-font-size-lg: 1.125rem;
    --sn-font-size-xl: 1.25rem;
    --sn-font-size-2xl: 1.5rem;
    --sn-font-size-3xl: 1.875rem;

    --sn-font-weight-normal: 400;
    --sn-font-weight-medium: 500;
    --sn-font-weight-semibold: 600;
    --sn-font-weight-bold: 700;

    --sn-line-tight: 1.25;
    --sn-line-normal: 1.5;
    --sn-line-relaxed: 1.625;

    /* -------------------------------------------------------------------------
     * Radius & shadow
     * ------------------------------------------------------------------------- */
    --sn-radius-sm: 0.25rem;
    --sn-radius-md: 0.5rem;
    --sn-radius-lg: 0.75rem;
    --sn-radius-xl: 1rem;
    --sn-radius-pill: 9999px;

    --sn-shadow-card: 0 1px 3px 0 rgba(31, 27, 23, 0.04), 0 1px 2px -1px rgba(31, 27, 23, 0.03);
    --sn-shadow-elevated: 0 10px 15px -3px rgba(31, 27, 23, 0.08), 0 4px 6px -4px rgba(31, 27, 23, 0.04);

    /* -------------------------------------------------------------------------
     * Spacing scale (rem)
     * ------------------------------------------------------------------------- */
    --sn-space-1: 0.25rem;
    --sn-space-2: 0.5rem;
    --sn-space-3: 0.75rem;
    --sn-space-4: 1rem;
    --sn-space-5: 1.25rem;
    --sn-space-6: 1.5rem;
    --sn-space-8: 2rem;
    --sn-space-10: 2.5rem;

    /* -------------------------------------------------------------------------
     * Component tokens — buttons (emerald solid)
     * ------------------------------------------------------------------------- */
    --sn-btn-font-weight: var(--sn-font-weight-semibold);
    --sn-btn-padding-y: 0.625rem;
    --sn-btn-padding-x: 1.125rem;
    --sn-btn-radius: var(--sn-radius-md);

    --sn-btn-primary-bg: var(--sn-primary-500);
    --sn-btn-primary-bg-hover: var(--sn-primary-400);
    --sn-btn-primary-color: var(--sn-color-on-primary-solid);

    --sn-btn-secondary-bg: #e9e1dd;
    --sn-btn-secondary-bg-hover: #f6ece6;
    --sn-btn-secondary-color: #686361;

    --sn-btn-inverted-bg: #342f2b;
    --sn-btn-inverted-bg-hover: #4a4643;
    --sn-btn-inverted-color: #f9efe8;

    --sn-btn-outline-bg: var(--sn-surface-card);
    --sn-btn-outline-border: var(--sn-border-default);
    --sn-btn-outline-color: var(--sn-color-headline);
    --sn-btn-outline-hover-bg: var(--sn-surface-subtle);

    /* Inputs / search bar */
    --sn-input-bg: var(--sn-surface-card);
    --sn-input-border: var(--sn-border-default);
    --sn-input-radius: var(--sn-radius-md);
    --sn-input-padding-y: var(--sn-space-2);
    --sn-input-padding-x: var(--sn-space-3);

    /* Progress / accent bars */
    --sn-progress-track: var(--sn-accent-subtle);
    --sn-progress-fill: var(--sn-primary-500);

    /* Focus ring (keyboard) */
    --sn-focus-ring: 0 0 0 3px rgba(var(--sn-primary-500-rgb), 0.15);

    /* -------------------------------------------------------------------------
     * Legacy compatibility aliases (existing app/admin/auth CSS)
     * ------------------------------------------------------------------------- */
    --bs-primary: var(--sn-primary-500);
    --bs-success: var(--sn-color-success);
    --bs-info: var(--sn-accent);
    --bs-warning: var(--sn-color-warning);
    --bs-danger: var(--sn-color-danger);

    --bf-primary: var(--sn-primary-500);
    --bf-body-bg: var(--sn-surface-page);
    --bf-black: var(--sn-neutral-800);
    --bf-blue: var(--sn-primary-500);
    --bf-grey: var(--sn-neutral-500);
    --bf-light-grey: var(--sn-neutral-300);
    --bf-white: var(--sn-surface-card);
    --bf-success: var(--sn-color-success);

    --bf-sidebar-bg: var(--sn-color-sidebar);
    --bf-sidebar-bg-active: var(--sn-color-sidebar-active);
    --bf-sidebar-subnav-bg-active: var(--sn-color-sidebar-subnav);
    --bf-sidebar-text: var(--sn-color-on-sidebar);

    --info: var(--sn-accent);
    --warning: var(--sn-color-warning);
    --danger: var(--sn-color-danger);
    --dark: var(--sn-neutral-800);

    --blue: var(--sn-primary-500);
    --red: var(--sn-color-danger);
    --orange: var(--sn-color-warning);
    --light: var(--sn-neutral-100);
    --inverse: var(--sn-neutral-800);
    --indigo: var(--sn-chart-5);
    --purple: var(--sn-primary-500);
    --pink: var(--sn-accent);
    --yellow: var(--sn-color-warning);
    --green: var(--sn-color-success);
    --teal: var(--sn-accent);
    --lime: var(--sn-color-success);
    --cyan: var(--sn-accent);
    --white: #ffffff;
    --gray: var(--sn-neutral-500);
    --gray-dark: var(--sn-neutral-800);

    --blue-rgb: var(--sn-primary-500-rgb);
    --red-rgb: var(--sn-color-danger-rgb);
    --orange-rgb: 160, 86, 0;
    --light-rgb: 252, 242, 235;
    --dark-rgb: 31, 27, 23;
    --inverse-rgb: 31, 27, 23;
    --indigo-rgb: 98, 93, 91;
    --purple-rgb: var(--sn-tertiary-500-rgb);
    --pink-rgb: var(--sn-secondary-500-rgb);
    --yellow-rgb: 160, 86, 0;
    --green-rgb: 4, 120, 87;
    --teal-rgb: var(--sn-primary-500-rgb);
    --lime-rgb: 4, 120, 87;
    --cyan-rgb: 4, 120, 87;
    --white-rgb: 255, 255, 255;
    --gray-rgb: var(--sn-neutral-500-rgb);
    --gray-dark-rgb: 31, 27, 23;
}

/* -----------------------------------------------------------------------------
 * Base typography helpers
 * ----------------------------------------------------------------------------- */
.sn-headline,
h1.sn-headline,
h2.sn-headline,
h3.sn-headline {
    font-family: var(--sn-font-headline);
    color: var(--sn-text-headline);
    font-weight: var(--sn-font-weight-semibold);
    line-height: var(--sn-line-tight);
}

body {
    font-family: var(--sn-font-body);
    color: var(--sn-color-text);
    background: var(--sn-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sn-font-headline);
    color: var(--sn-color-headline);
}

.sn-body {
    font-family: var(--sn-font-body);
    color: var(--sn-text-body);
    font-size: var(--sn-font-size-base);
    line-height: var(--sn-line-normal);
}

.sn-label {
    font-family: var(--sn-font-label);
    color: var(--sn-text-label);
    font-size: var(--sn-font-size-sm);
    font-weight: var(--sn-font-weight-medium);
}

/* -----------------------------------------------------------------------------
 * Surfaces
 * ----------------------------------------------------------------------------- */
.sn-page-bg {
    background-color: var(--sn-surface-page);
}

.sn-card {
    background: var(--sn-surface-card);
    border-radius: var(--sn-radius-lg);
    box-shadow: var(--sn-shadow-card);
    border: 1px solid var(--sn-border-default);
}

/* -----------------------------------------------------------------------------
 * Admin component vocabulary (DESIGN.md content-card, data-table, kpi-card)
 * ----------------------------------------------------------------------------- */
.sn-section-kicker {
    font-family: var(--sn-font-body);
    font-size: 0.75rem;
    font-weight: var(--sn-font-weight-semibold);
    line-height: 1.43;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sn-color-text-muted);
    margin-bottom: 0.25rem;
}

.sn-display,
h1.sn-display,
h2.sn-display,
h3.sn-display {
    font-family: var(--sn-font-headline);
    font-weight: var(--sn-font-weight-semibold);
    color: var(--sn-color-headline);
    line-height: var(--sn-line-tight);
}

.sn-data-card {
    background: var(--sn-surface-card);
    border-radius: var(--sn-radius-lg);
    box-shadow: var(--sn-shadow-card);
    border: 1px solid var(--sn-border-default);
    overflow: hidden;
}

.sn-data-card .card-header {
    background: var(--sn-surface-card);
    border-bottom: 1px solid var(--sn-border-default);
}

.sn-data-card .card-title,
.sn-data-card h5 {
    font-family: var(--sn-font-headline);
    font-weight: var(--sn-font-weight-semibold);
    font-size: 1.125rem;
    color: var(--sn-color-headline);
}

.sn-data-table thead th {
    font-family: var(--sn-font-body);
    font-weight: var(--sn-font-weight-semibold);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sn-color-text-muted);
    border-bottom: 1px solid var(--sn-border-default);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.sn-data-table tbody td {
    font-family: var(--sn-font-body);
    font-size: 0.875rem;
    font-weight: var(--sn-font-weight-normal);
    line-height: 1.5;
    vertical-align: middle;
}

.sn-data-table tbody tr:hover {
    background-color: rgba(var(--sn-primary-500-rgb), 0.05);
}

.sn-data-table tbody .badge {
    font-size: 0.75rem;
    font-weight: var(--sn-font-weight-semibold);
}

.sn-metric-card {
    background: var(--sn-surface-card);
    border-radius: var(--sn-radius-lg);
    box-shadow: var(--sn-shadow-card);
    border: 1px solid var(--sn-border-default);
}

.sn-metric-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--sn-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.sn-metric-card__icon--primary {
    background-color: rgba(var(--sn-tertiary-500-rgb), 0.12);
    color: var(--sn-tertiary-500);
}

.sn-metric-card__icon--secondary {
    background-color: rgba(var(--sn-secondary-500-rgb), 0.12);
    color: var(--sn-secondary-500);
}

.sn-metric-card__icon--accent {
    background-color: rgba(var(--sn-primary-500-rgb), 0.12);
    color: var(--sn-primary-500);
}

.sn-metric-card__icon--danger {
    background-color: rgba(var(--sn-color-danger-rgb), 0.12);
    color: var(--sn-color-danger);
}

.sn-metric-card__value {
    font-family: var(--sn-font-headline);
    font-size: 1.5rem;
    font-weight: var(--sn-font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.33;
    color: var(--sn-color-headline);
    margin: 0;
}

.sn-icon-action {
    color: var(--sn-primary-500);
}

.sn-icon-action--danger {
    color: var(--sn-color-danger);
}

.sn-tabular {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * Buttons (namespaced to avoid clashing with Bootstrap)
 * ----------------------------------------------------------------------------- */
.sn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sn-space-2);
    font-family: var(--sn-font-body);
    font-weight: var(--sn-btn-font-weight);
    font-size: var(--sn-font-size-sm);
    line-height: 1.25;
    padding: var(--sn-btn-padding-y) var(--sn-btn-padding-x);
    border-radius: var(--sn-btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.sn-btn:focus-visible {
    outline: none;
    box-shadow: var(--sn-focus-ring);
}

.sn-btn-primary {
    background-color: var(--sn-btn-primary-bg);
    color: var(--sn-btn-primary-color);
}

.sn-btn-primary:hover {
    background-color: var(--sn-btn-primary-bg-hover);
    color: var(--sn-btn-primary-color);
}

.sn-btn-secondary {
    background-color: var(--sn-btn-secondary-bg);
    color: var(--sn-btn-secondary-color);
}

.sn-btn-secondary:hover {
    background-color: var(--sn-btn-secondary-bg-hover);
    color: var(--sn-btn-secondary-color);
}

.sn-btn-inverted {
    background-color: var(--sn-btn-inverted-bg);
    color: var(--sn-btn-inverted-color);
}

.sn-btn-inverted:hover {
    background-color: var(--sn-btn-inverted-bg-hover);
    color: var(--sn-btn-inverted-color);
}

.sn-btn-outline {
    background-color: var(--sn-btn-outline-bg);
    border-color: var(--sn-btn-outline-border);
    color: var(--sn-btn-outline-color);
}

.sn-btn-outline:hover {
    background-color: var(--sn-btn-outline-hover-bg);
    color: var(--sn-btn-outline-color);
}

.sn-btn-danger {
    background-color: var(--sn-color-danger);
    color: #fff;
    border-color: var(--sn-color-danger);
}

.sn-btn-danger:hover {
    background-color: var(--sn-color-danger-hover);
    color: #fff;
}

.sn-btn-whatsapp {
    background-color: var(--sn-whatsapp-container);
    color: var(--sn-whatsapp-text);
    border-color: var(--sn-whatsapp-border);
}

.sn-btn-whatsapp:hover {
    background-color: var(--sn-whatsapp-container);
    color: var(--sn-whatsapp-text);
    filter: brightness(0.97);
}

.sn-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--sn-radius-pill);
}

.sn-btn-icon.sn-btn-primary {
    background-color: var(--sn-primary-500);
}

.sn-btn-icon.sn-btn-danger {
    background-color: var(--sn-color-danger);
}

/* -----------------------------------------------------------------------------
 * Form controls
 * ----------------------------------------------------------------------------- */
.sn-input,
.sn-input-search {
    font-family: var(--sn-font-body);
    font-size: var(--sn-font-size-sm);
    color: var(--sn-color-text);
    background: var(--sn-input-bg);
    border: 1px solid var(--sn-input-border);
    border-radius: var(--sn-input-radius);
    padding: var(--sn-input-padding-y) var(--sn-input-padding-x);
    width: 100%;
    max-width: 100%;
    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.sn-input::placeholder,
.sn-input-search::placeholder {
    color: var(--sn-color-text-muted);
}

.sn-input:focus,
.sn-input-search:focus {
    outline: none;
    border-color: var(--sn-primary-400);
    box-shadow: var(--sn-focus-ring);
}

.sn-input-search {
    padding-left: 2.5rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 50%;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
 * Progress strips (loading / meter)
 * ----------------------------------------------------------------------------- */
.sn-progress {
    height: 0.5rem;
    border-radius: var(--sn-radius-pill);
    background: var(--sn-progress-track);
    overflow: hidden;
}

.sn-progress-bar {
    height: 100%;
    border-radius: var(--sn-radius-pill);
    background: var(--sn-progress-fill);
    transition: width 0.3s ease;
}

/* -----------------------------------------------------------------------------
 * Pills / chips (accent)
 * ----------------------------------------------------------------------------- */
.sn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sn-space-2);
    font-family: var(--sn-font-body);
    font-size: var(--sn-font-size-sm);
    font-weight: var(--sn-font-weight-medium);
    padding: var(--sn-space-1) var(--sn-space-3);
    border-radius: var(--sn-radius-pill);
    background: var(--sn-accent-subtle);
    color: var(--sn-primary-600);
}

.sn-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--sn-font-body);
    font-size: var(--sn-font-size-xs);
    font-weight: var(--sn-font-weight-semibold);
    line-height: 1.25;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--sn-radius-pill);
    white-space: nowrap;
}

.sn-badge--soft-booked,
.sn-badge--soft-neutral {
    background: var(--sn-neutral-100);
    color: var(--sn-neutral-600);
}

.sn-badge--soft-confirmed {
    background: var(--sn-status-confirmed);
    color: var(--sn-status-confirmed-text);
}

.sn-badge--soft-info {
    background: var(--sn-accent-wash);
    color: var(--sn-accent);
}

.sn-badge--soft-offline {
    background: var(--sn-status-offline);
    color: var(--sn-status-offline-text);
}

.sn-badge--soft-arrived,
.sn-badge--soft-warning {
    background: var(--sn-warning-subtle);
    color: var(--sn-color-warning-deep);
}

.sn-badge--solid-in-service,
.sn-badge--solid-primary {
    background: var(--sn-primary-500);
    color: var(--sn-on-primary);
}

.sn-badge--soft-completed,
.sn-badge--soft-active {
    background: var(--sn-success-subtle);
    color: var(--sn-color-success-deep);
}

.sn-badge--soft-no-show,
.sn-badge--soft-suspended {
    background: var(--sn-error-subtle);
    color: var(--sn-color-danger);
}

.sn-badge--trial {
    background: var(--sn-accent-subtle);
    color: var(--sn-primary-700);
}

.sn-badge--deposit {
    background: var(--sn-accent-wash);
    color: var(--sn-secondary-800);
}

/* -----------------------------------------------------------------------------
 * Tab / bottom nav shell (light pill on pale bg)
 * ----------------------------------------------------------------------------- */
.sn-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sn-space-2);
    padding: var(--sn-space-2);
    background: var(--sn-neutral-100);
    border-radius: var(--sn-radius-pill);
}

.sn-nav-pill .sn-nav-pill-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sn-radius-pill);
    background: var(--sn-primary-500);
    color: #fff;
}