@import url("/css/poppins-local.css");

:root {
    --sk-primary: #9c1e61;
    --sk-primary-dark: #7f174f;
    --sk-primary-deep: #68113f;
    --sk-primary-soft: #f8edf3;
    --sk-primary-muted: #ead6e1;
    --sk-primary-faint: #fdf9fb;

    --sk-bg: #f5f6f8;
    --sk-panel: #ffffff;
    --sk-sidebar: #ffffff;
    --sk-text: #16181d;
    --sk-muted: #6b7280;
    --sk-subtle: #94a3b8;
    --sk-line: #e5e7eb;
    --sk-line-soft: #edf0f3;
    --sk-hover: #f7f7f9;
    --sk-active: #f1f1f3;

    --sk-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 4px rgba(16, 24, 40, .04);
    --sk-shadow-pop: 0 6px 18px rgba(16, 24, 40, .08);
    --sk-radius: 7px;
    --sk-radius-sm: 5px;
}

/* =========================================================
   TYPOGRAPHY
   CSS-only phase: Poppins is loaded here so the PHP panel
   provider does not need to be changed yet.
   ========================================================= */
html,
body,
.fi-body,
.fi-layout,
.fi-main,
.fi-modal-window,
.fi-dropdown-panel,
.fi-input-wrp,
.fi-btn,
.fi-ta,
.fi-fo-field-wrp,
.fi-section,
.fi-tabs,
.fi-badge,
.fi-no,
.fi-topbar,
.fi-sidebar,
button,
input,
select,
textarea,
table,
code,
pre {
    font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html,
body {
    background: var(--sk-bg) !important;
}

.fi-body,
.fi-main,
.fi-main-ctn {
    background: var(--sk-bg) !important;
    color: var(--sk-text) !important;
}

.fi-page {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
}

.fi-main {
    max-width: none !important;
}

/* =========================================================
   TOP HEADER — solid Superkidz purple, InvoiceShelf-like
   ========================================================= */
.fi-topbar,
.fi-topbar-ctn,
.fi-sidebar-header {
    background: var(--sk-primary) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.fi-topbar {
    min-height: 54px !important;
    border-bottom: 0 !important;
}

.fi-sidebar-header {
    min-height: 54px !important;
    border-bottom: 0 !important;
}

.fi-topbar .fi-logo,
.fi-topbar .fi-logo *,
.fi-sidebar-header .fi-logo,
.fi-sidebar-header .fi-logo *,
.fi-topbar-start a,
.fi-sidebar-header a {
    color: #fff !important;
}

.fi-topbar .fi-logo,
.fi-sidebar-header .fi-logo {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn {
    color: #fff !important;
}

.fi-topbar .fi-icon-btn:hover {
    background: rgba(255, 255, 255, .12) !important;
}

.fi-topbar .fi-global-search-ctn,
.fi-topbar .fi-global-search {
    color: var(--sk-text) !important;
}

.fi-topbar .fi-global-search-field .fi-input-wrp,
.fi-topbar .fi-global-search .fi-input-wrp {
    background: #fff !important;
    border-color: rgba(255, 255, 255, .45) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.fi-topbar .fi-global-search-field input,
.fi-topbar .fi-global-search input {
    color: var(--sk-text) !important;
    font-size: .82rem !important;
}

.fi-topbar .fi-global-search-field svg,
.fi-topbar .fi-global-search svg {
    color: #98a2b3 !important;
}

/* =========================================================
   SIDEBAR — white with purple active marker
   ========================================================= */
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-footer {
    background: var(--sk-sidebar) !important;
}

.fi-sidebar {
    border-inline-end: 1px solid var(--sk-line) !important;
    box-shadow: none !important;
}

.fi-sidebar-nav {
    padding-top: .55rem !important;
    padding-inline: 0 !important;
}

.fi-sidebar-group {
    gap: 0 !important;
}

.fi-sidebar-item {
    margin: 0 !important;
}

.fi-sidebar-item-btn {
    position: relative !important;
    margin-inline: 0 !important;
    min-height: 42px !important;
    padding: .66rem 1rem .66rem 1.55rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #26282d !important;
    box-shadow: none !important;
    gap: .75rem !important;
    transition: background-color .14s ease, color .14s ease !important;
}

.fi-sidebar-item-btn:hover {
    background: var(--sk-is-gray-50) !important;
    color: var(--sk-is-primary-500) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--sk-active) !important;
    color: var(--sk-is-primary-500) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '' !important;
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    width: 3px !important;
    background: var(--sk-primary) !important;
}

.fi-sidebar-item-label {
    color: currentColor !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-icon {
    width: 1.08rem !important;
    height: 1.08rem !important;
    min-width: 1.08rem !important;
    color: #9aa4b2 !important;
    stroke-width: 1.6 !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--sk-is-primary-500) !important;
}

.fi-sidebar-group-label {
    color: #9aa4b2 !important;
    font-size: .68rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.fi-sidebar-close-btn,
.fi-sidebar-open-btn {
    color: #64748b !important;
}

/* =========================================================
   PAGE HEADERS / BREADCRUMBS
   ========================================================= */
.fi-header {
    gap: .8rem !important;
}

.fi-header-heading {
    color: var(--sk-text) !important;
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
}

.fi-header-subheading {
    color: var(--sk-muted) !important;
    font-size: .82rem !important;
    line-height: 1.55 !important;
}

.fi-breadcrumbs,
.fi-breadcrumbs-item,
.fi-breadcrumbs-item a {
    color: #737b87 !important;
    font-size: .73rem !important;
}

/* =========================================================
   CARDS / SECTIONS — flatter and tighter
   ========================================================= */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-card {
    border: 1px solid var(--sk-line) !important;
    border-radius: var(--sk-radius) !important;
    background: var(--sk-panel) !important;
    box-shadow: var(--sk-shadow) !important;
}

.fi-section-header {
    border-bottom: 1px solid var(--sk-line-soft) !important;
    padding-block: .9rem !important;
}

.fi-section-header-heading {
    color: var(--sk-text) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
}

.fi-section-header-description {
    color: var(--sk-muted) !important;
    font-size: .76rem !important;
}

/* =========================================================
   TABLES — InvoiceShelf-like compact rows
   ========================================================= */
.fi-ta-ctn {
    overflow: hidden !important;
}

.fi-ta-header,
.fi-ta-header-toolbar,
.fi-ta-header-ctn,
.fi-ta-content,
.fi-ta-footer {
    background: #fff !important;
}

.fi-ta-header,
.fi-ta-header-toolbar {
    border-bottom-color: var(--sk-line) !important;
}

.fi-ta-header-cell {
    background: #fafafa !important;
}

.fi-ta-header-cell-label {
    color: #70798a !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}

.fi-ta-row {
    border-color: var(--sk-line-soft) !important;
    background: #fff !important;
}

.fi-ta-row:nth-child(even) {
    background: #fbfbfc !important;
}

.fi-ta-row:hover {
    background: var(--sk-primary-faint) !important;
}

.fi-ta-cell {
    padding-block: .72rem !important;
}

.fi-ta-text-item-label,
.fi-ta-text {
    color: #272a30 !important;
    font-size: .76rem !important;
}

.fi-ta-footer {
    border-top: 1px solid var(--sk-line) !important;
}

/* =========================================================
   INPUTS / SEARCH / SELECTS
   ========================================================= */
.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp input,
.fi-fo-field-wrp textarea,
.fi-fo-field-wrp select {
    border-radius: var(--sk-radius-sm) !important;
}

.fi-input-wrp {
    border-color: #dfe3e8 !important;
    box-shadow: none !important;
}

.fi-input-wrp:hover {
    border-color: #cfd5dc !important;
}

.fi-input-wrp:focus-within {
    border-color: rgba(156, 30, 97, .65) !important;
    box-shadow: 0 0 0 2px rgba(156, 30, 97, .09) !important;
}

.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    font-size: .78rem !important;
}

/* =========================================================
   BUTTONS / ACTIONS — no oversized icon, no heavy shadow
   ========================================================= */
.fi-btn {
    min-height: 34px !important;
    border-radius: var(--sk-radius-sm) !important;
    padding-inline: .8rem !important;
    padding-block: .42rem !important;
    font-size: .76rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    gap: .42rem !important;
}

.fi-btn svg,
.fi-btn .fi-btn-icon {
    width: .95rem !important;
    height: .95rem !important;
    min-width: .95rem !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

.fi-btn.fi-color-primary {
    background: var(--sk-primary) !important;
    background-image: none !important;
    border: 1px solid var(--sk-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.fi-btn.fi-color-primary:hover {
    background: var(--sk-primary-dark) !important;
    border-color: var(--sk-primary-dark) !important;
    color: #fff !important;
}

.fi-btn.fi-color-primary svg,
.fi-btn.fi-color-primary .fi-btn-icon,
.fi-btn.fi-color-primary span {
    color: #fff !important;
    stroke: currentColor !important;
}

.fi-btn.fi-color-gray {
    background: #fff !important;
    border-color: #dfe3e8 !important;
    color: #343942 !important;
    box-shadow: none !important;
}

.fi-btn.fi-color-gray:hover {
    background: #f7f7f8 !important;
    border-color: #d2d7de !important;
}

.fi-link.fi-color-primary,
.fi-ac-link-action.fi-color-primary,
a.fi-color-primary {
    color: var(--sk-is-primary-500) !important;
}

.fi-icon-btn {
    border-radius: 5px !important;
}

.fi-icon-btn svg {
    width: 1rem !important;
    height: 1rem !important;
}

/* =========================================================
   TABS / BADGES / PAGINATION
   ========================================================= */
.fi-tabs {
    border: 0 !important;
    border-bottom: 1px solid var(--sk-line) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: .35rem !important;
}

.fi-tabs-item {
    border-radius: 0 !important;
    color: #667085 !important;
    background: transparent !important;
    font-size: .76rem !important;
}

.fi-tabs-item.fi-active {
    color: var(--sk-is-primary-500) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--sk-primary) !important;
}

.fi-badge {
    border-radius: 4px !important;
    padding: .18rem .4rem !important;
    font-size: .64rem !important;
    font-weight: 500 !important;
}

.fi-badge.fi-color-primary {
    background: var(--sk-primary-soft) !important;
    color: var(--sk-is-primary-500) !important;
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--sk-primary-soft) !important;
    color: var(--sk-is-primary-500) !important;
}

/* =========================================================
   MODALS / DROPDOWNS
   ========================================================= */
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: 7px !important;
    border-color: var(--sk-line) !important;
    box-shadow: var(--sk-shadow-pop) !important;
}

/* =========================================================
   CUSTOM SUPERKIDZ PAGES
   Override Blade-local visual rules only; no behavior changes.
   ========================================================= */
.sk-card,
.sk-metric,
.sk-avail-shell,
.sk-cal-shell,
.sk-share-shell,
.sk-holiday-shell,
.sk-preview,
.sk-summary-card,
.sk-stat,
.sk-day-summary {
    border-radius: var(--sk-radius) !important;
    border-color: var(--sk-line) !important;
    box-shadow: var(--sk-shadow) !important;
    background: #fff !important;
}

.sk-card-head,
.sk-share-head,
.sk-card-body,
.sk-avail-toolbar,
.sk-cal-toolbar {
    border-color: var(--sk-line-soft) !important;
}

.sk-card-title,
.sk-share-title,
.sk-pro-name,
.sk-week-pro-name,
.sk-holiday-title {
    color: var(--sk-text) !important;
    font-weight: 600 !important;
}

.sk-dashboard-intro,
.sk-share-intro,
.sk-share-sub,
.sk-pro-meta,
.sk-week-pro-meta,
.sk-week-source,
.sk-holiday-meta,
.sk-meta,
.sk-sub {
    color: var(--sk-muted) !important;
    font-weight: 400 !important;
}

.sk-metric {
    padding: .95rem 1rem !important;
}

.sk-metric-top,
.sk-summary-label,
.sk-stat-label {
    color: #70798a !important;
    font-weight: 500 !important;
}

.sk-metric-value,
.sk-summary-value,
.sk-stat-value {
    color: var(--sk-text) !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
}

.sk-metric-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    border-radius: 6px !important;
    background: var(--sk-primary-soft) !important;
    color: var(--sk-is-primary-500) !important;
}

.sk-metric-icon svg {
    width: .9rem !important;
    height: .9rem !important;
}

.sk-table th,
.sk-week-table th,
.sk-exception-table th,
.sk-share-table th,
.sk-holiday-table th {
    background: #fafafa !important;
    color: #70798a !important;
    font-size: .67rem !important;
    font-weight: 600 !important;
    letter-spacing: .035em !important;
    border-color: var(--sk-line-soft) !important;
}

.sk-table td,
.sk-week-table td,
.sk-exception-table td,
.sk-share-table td,
.sk-holiday-table td {
    color: #2b2e34 !important;
    font-size: .75rem !important;
    border-color: var(--sk-line-soft) !important;
}

.sk-table tr:nth-child(even),
.sk-exception-table tr:nth-child(even),
.sk-share-table tr:nth-child(even),
.sk-holiday-table tr:nth-child(even) {
    background: #fbfbfc !important;
}

.sk-badge,
.sk-chip,
.sk-state,
.sk-status,
.sk-exception-type,
.sk-week-competency,
.sk-competency {
    border-radius: 4px !important;
    font-weight: 500 !important;
}

.sk-card-link,
.sk-action-btn,
.sk-link-btn,
.sk-share-btn,
.sk-avail-add,
.sk-manage-link {
    border-radius: var(--sk-radius-sm) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.sk-primary-bg,
.sk-action-btn.primary,
.sk-share-btn.primary,
.sk-manage-link.primary {
    background: var(--sk-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--sk-is-primary-500) !important;
}

.sk-action-btn svg,
.sk-link-btn svg,
.sk-share-btn svg,
.sk-avail-add svg,
.sk-manage-link svg {
    width: .95rem !important;
    height: .95rem !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

.sk-avail-search,
.sk-share-search,
.sk-cal-field {
    border-radius: var(--sk-radius-sm) !important;
    box-shadow: none !important;
}

.sk-slot,
.sk-week-availability,
.sk-week-booking,
.sk-service,
.sk-code,
.sk-pin {
    border-radius: 4px !important;
}

.sk-avail-matrix,
.sk-week-table,
.sk-month-grid,
.sk-day,
.sk-day-head,
.sk-day-header,
.sk-week-cell,
.sk-slot-cell {
    border-color: var(--sk-line-soft) !important;
}

.sk-holiday-hero {
    background: var(--sk-primary-soft) !important;
    background-image: none !important;
    border-color: var(--sk-primary-muted) !important;
    border-radius: var(--sk-radius) !important;
}

.sk-holiday-date {
    background: var(--sk-primary) !important;
    background-image: none !important;
    border-radius: var(--sk-radius-sm) !important;
    color: #fff !important;
}

.sk-notice,
.sk-attn-item,
.sk-info,
.sk-warning-box,
.sk-error-box,
.sk-success-box {
    border-radius: var(--sk-radius) !important;
    box-shadow: none !important;
}

/* Utility classes */
.sk-primary-text { color: var(--sk-is-primary-500) !important; }
.sk-primary-bg { background: var(--sk-primary) !important; color: #fff !important; }
.sk-primary-soft { background: var(--sk-primary-soft) !important; color: var(--sk-is-primary-500) !important; }

/* Keep desktop layout calm and closer to InvoiceShelf. */
@media (min-width: 1025px) {
    .fi-main {
        padding-top: 1.7rem !important;
    }
}

@media (max-width: 1024px) {
    .fi-sidebar {
        box-shadow: 8px 0 22px rgba(16, 24, 40, .09) !important;
    }
}

/* =========================================================
   TOPBAR BRAND — white Superkidz logo, no global search
   ========================================================= */
.fi-topbar-start > a {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

.fi-topbar-start .fi-logo {
    display: block !important;
    width: auto !important;
    max-width: 92px !important;
    height: 34px !important;
    object-fit: contain !important;
}

.fi-topbar-end {
    margin-inline-start: auto !important;
}

/* Global search is disabled in the panel provider; keep this as a safety net. */
.fi-topbar .fi-global-search,
.fi-topbar .fi-global-search-ctn {
    display: none !important;
}


/* =========================================================
   SUPERKIDZ UI V4 — reference mockup visual language
   Dashboard is polished first; the rest of Filament inherits
   the shell, spacing, cards, inputs, tables and colors as a
   rough first pass without changing business behavior.
   ========================================================= */
:root {
    --sk-bg: #f6f7fb;
    --sk-panel: #ffffff;
    --sk-text: #172033;
    --sk-muted: #667085;
    --sk-subtle: #98a2b3;
    --sk-line: #e7e9f0;
    --sk-line-soft: #eff1f4;
    --sk-primary: #d81b72;
    --sk-primary-dark: #b91560;
    --sk-primary-soft: #fff0f6;
    --sk-primary-softer: #fff7fa;
    --sk-nav: #11182e;
    --sk-green: #18865c;
    --sk-green-soft: #eaf8f1;
    --sk-orange: #b86f00;
    --sk-orange-soft: #fff7e8;
    --sk-red: #bd3139;
    --sk-red-soft: #fff0f1;
    --sk-blue: #2563eb;
    --sk-blue-soft: #eff6ff;
    --sk-shadow: 0 8px 28px rgba(25, 34, 55, .06);
    --sk-shadow-pop: 0 16px 40px rgba(17, 24, 46, .14);
    --sk-radius: 16px;
    --sk-radius-sm: 10px;
}

html,
body,
.fi-body,
.fi-layout,
.fi-main,
.fi-modal-window,
.fi-dropdown-panel,
.fi-input-wrp,
.fi-btn,
.fi-ta,
.fi-fo-field-wrp,
.fi-section,
.fi-tabs,
.fi-badge,
.fi-no,
.fi-topbar,
.fi-sidebar,
button,
input,
select,
textarea,
table,
code,
pre {
    font-family: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html,
body,
.fi-body,
.fi-main,
.fi-main-ctn {
    background: var(--sk-bg) !important;
    color: var(--sk-text) !important;
}

/* ---------- desktop application shell ---------- */
@media (min-width: 1025px) {
    .fi-sidebar {
        top: 0 !important;
        height: 100dvh !important;
        background: var(--sk-nav) !important;
        border-inline-end: 0 !important;
        box-shadow: none !important;
        z-index: 35 !important;
    }

    .fi-topbar-ctn {
        margin-inline-start: 15.375rem !important;
        width: calc(100% - 15.375rem) !important;
        z-index: 30 !important;
    }
}

.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-footer,
.fi-sidebar-header,
.fi-sidebar-header-ctn {
    background: var(--sk-nav) !important;
    background-image: none !important;
}

.fi-sidebar-header-ctn {
    border-bottom: 0 !important;
}

.fi-sidebar-header {
    min-height: 86px !important;
    padding: 20px 24px 14px !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.fi-sidebar-header-logo-ctn {
    width: 100% !important;
    justify-content: flex-start !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

.fi-sidebar-header .fi-logo {
    display: block !important;
    width: 132px !important;
    max-width: 132px !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.fi-sidebar-nav {
    padding: 4px 16px 20px !important;
}

.fi-sidebar-nav-groups,
.fi-sidebar-group-items {
    gap: 7px !important;
}

.fi-sidebar-item-btn {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #cbd2e3 !important;
    gap: 10px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #ffffff !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: rgba(216, 27, 114, .22) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: none !important;
    display: none !important;
}

.fi-sidebar-item-label {
    color: currentColor !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: inherit !important;
}

.fi-sidebar-item-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    color: #9fa9be !important;
    stroke-width: 1.6 !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* ---------- white topbar ---------- */
.fi-topbar,
.fi-topbar-ctn {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--sk-line) !important;
    box-shadow: none !important;
}

.fi-topbar {
    min-height: 70px !important;
    height: 70px !important;
    padding-inline: 28px !important;
    gap: 12px !important;
}

.fi-topbar-start {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

/* The application identity lives in the navy sidebar. */
.fi-topbar-start > a,
.fi-topbar-start > .fi-logo {
    display: none !important;
}

.sk-topbar-branch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.sk-topbar-branch-pin {
    font-size: 13px;
    line-height: 1;
}

.fi-topbar-end {
    margin-inline-start: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sk-topbar-user-name {
    color: var(--sk-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.fi-user-menu-trigger {
    border-radius: 999px !important;
}

.fi-user-avatar,
.fi-avatar.fi-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn {
    color: #667085 !important;
}

.fi-topbar .fi-icon-btn:hover {
    color: var(--sk-is-primary-500) !important;
    background: var(--sk-primary-soft) !important;
}

/* ---------- page rhythm ---------- */
.fi-main {
    max-width: none !important;
    width: 100% !important;
    padding-top: 0 !important;
}

.fi-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.fi-page-header-main-ctn,
.fi-page-main,
.fi-page-content {
    width: 100% !important;
    max-width: none !important;
}

.fi-page-header-main-ctn {
    max-width: 1600px !important;
    margin-inline: auto !important;
    padding: 26px 28px 0 !important;
}

.fi-page-main {
    padding-top: 0 !important;
}

.fi-page-content {
    max-width: 1600px !important;
    margin-inline: auto !important;
    padding: 20px 28px 42px !important;
}

.fi-header {
    gap: 0 !important;
}

.fi-header-heading {
    margin: 0 0 6px !important;
    color: var(--sk-text) !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: -.4px !important;
}

.fi-header-subheading {
    margin: 0 !important;
    color: var(--sk-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ---------- rough shared component pass ---------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-card {
    border: 1px solid var(--sk-line) !important;
    border-radius: var(--sk-radius) !important;
    background: #fff !important;
    box-shadow: var(--sk-shadow) !important;
}

.fi-section-header {
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--sk-line) !important;
}

.fi-section-header-heading {
    color: var(--sk-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.fi-section-header-description {
    color: var(--sk-muted) !important;
    font-size: 12px !important;
}

.fi-ta-header-cell {
    background: #fafbfc !important;
}

.fi-ta-header-cell-label {
    color: var(--sk-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.fi-ta-row,
.fi-ta-row:nth-child(even) {
    background: #fff !important;
    border-color: var(--sk-line-soft) !important;
}

.fi-ta-row:hover {
    background: #fcfcfd !important;
}

.fi-ta-cell {
    padding-block: 13px !important;
}

.fi-ta-text-item-label,
.fi-ta-text {
    color: #344054 !important;
    font-size: 13px !important;
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp input,
.fi-fo-field-wrp textarea,
.fi-fo-field-wrp select {
    border-radius: 10px !important;
}

.fi-input-wrp {
    border-color: var(--sk-line) !important;
    box-shadow: none !important;
}

.fi-input-wrp:focus-within {
    border-color: #f0a0bf !important;
    box-shadow: 0 0 0 3px #fff1f6 !important;
}

.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    font-size: 13px !important;
}

.fi-btn {
    min-height: 40px !important;
    padding: 9px 13px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.fi-btn.fi-color-primary {
    background: var(--sk-primary) !important;
    border-color: var(--sk-is-primary-500) !important;
    color: #fff !important;
}

.fi-btn.fi-color-primary:hover {
    background: var(--sk-primary-dark) !important;
    border-color: var(--sk-primary-dark) !important;
}

.fi-btn.fi-color-gray {
    background: #fff !important;
    border-color: var(--sk-line) !important;
    color: #344054 !important;
}

.fi-btn.fi-color-gray:hover {
    background: #fcfcfd !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05) !important;
}

.fi-badge {
    border-radius: 999px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.fi-modal-window,
.fi-dropdown-panel {
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--sk-shadow-pop) !important;
}

/* ---------- polished operational dashboard ---------- */
.sk-dash-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.sk-metric {
    position: relative;
    overflow: hidden;
    padding: 18px !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--sk-shadow) !important;
}

.sk-metric-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--sk-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.sk-metric-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    background: var(--sk-primary-soft) !important;
    color: var(--sk-is-primary-500) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.sk-metric-value {
    margin-top: 12px !important;
    color: var(--sk-text) !important;
    font-size: 29px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: -.03em !important;
}

.sk-metric-foot {
    margin-top: 6px !important;
    color: var(--sk-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.sk-two {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: 16px;
    align-items: start;
}

.sk-dashboard-side {
    display: grid;
    gap: 16px;
    align-content: start;
}

.sk-dashboard-bottom {
    margin-top: 16px;
}

.sk-card {
    overflow: hidden !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--sk-shadow) !important;
}

.sk-card-head {
    min-height: 57px;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--sk-line) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.sk-card-title {
    margin: 0 !important;
    color: var(--sk-text) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
}

.sk-card-body {
    padding: 18px !important;
}

.sk-card-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 40px !important;
    padding: 9px 13px !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #344054 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.sk-card-link:hover {
    color: var(--sk-is-primary-500) !important;
    border-color: #f0b7d1 !important;
    background: var(--sk-primary-softer) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05) !important;
}

.sk-table-wrap {
    overflow-x: auto !important;
}

.sk-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

.sk-table th {
    padding: 12px 14px !important;
    background: #fafbfc !important;
    border-bottom: 1px solid var(--sk-line) !important;
    color: var(--sk-muted) !important;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.sk-table td {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--sk-line-soft) !important;
    color: #344054 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
}

.sk-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.sk-table tbody tr:hover td {
    background: #fcfcfd !important;
}

.sk-table-sub {
    margin-top: 2px;
    color: var(--sk-muted);
    font-size: 12px;
    font-weight: 400;
}

.sk-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.sk-badge.scheduled { color: var(--sk-blue) !important; background: var(--sk-blue-soft) !important; }
.sk-badge.finished { color: var(--sk-green) !important; background: var(--sk-green-soft) !important; }
.sk-badge.no_show { color: var(--sk-orange) !important; background: var(--sk-orange-soft) !important; }

.sk-attn {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.sk-attn-item {
    padding: 13px 14px !important;
    border: 1px solid #f1d28c !important;
    border-radius: 12px !important;
    background: #fffaf0 !important;
    color: #845800 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.sk-attn-item strong {
    color: #714b00 !important;
    font-weight: 800 !important;
}

.sk-attn-reason {
    color: #7b6c53 !important;
}

.sk-link {
    color: var(--sk-blue) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

.sk-link:hover {
    text-decoration: underline !important;
}

.sk-notice {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 13px 14px !important;
    border: 1px solid #f1d28c !important;
    border-radius: 12px !important;
    background: #fffaf0 !important;
    color: #845800 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.sk-notice.info {
    border-color: #cfe0ff !important;
    background: #f5f9ff !important;
    color: #2a5ea9 !important;
}

.sk-notice-icon {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    font-weight: 800;
}

.sk-status-list {
    display: grid !important;
    gap: 10px !important;
}

.sk-status-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px dashed var(--sk-line) !important;
    color: #344054 !important;
    font-size: 13px !important;
}

.sk-status-row:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.sk-empty {
    color: var(--sk-muted) !important;
    font-size: 13px !important;
}

.sk-rm-list {
    display: grid !important;
}

.sk-rm-row {
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--sk-line-soft) !important;
    color: #344054 !important;
    font-size: 13px !important;
}

.sk-rm-row:last-child {
    border-bottom: 0 !important;
}

.sk-rm-branch {
    color: var(--sk-muted) !important;
    font-weight: 400 !important;
}

@media (max-width: 1150px) {
    .sk-dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sk-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .fi-topbar-ctn {
        margin-inline-start: 0 !important;
        width: 100% !important;
    }

    .fi-sidebar {
        top: var(--topbar-height) !important;
        height: calc(100dvh - var(--topbar-height)) !important;
        background: var(--sk-nav) !important;
        box-shadow: 8px 0 24px rgba(17, 24, 46, .18) !important;
    }

    .fi-sidebar-header-ctn {
        display: none !important;
    }

    .fi-topbar-start > a {
        display: none !important;
    }

    .sk-topbar-user-name {
        display: none !important;
    }
}

@media (max-width: 650px) {
    .fi-topbar {
        min-height: 62px !important;
        height: 62px !important;
        padding-inline: 14px !important;
    }

    .sk-topbar-branch {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fi-page-header-main-ctn {
        padding: 20px 14px 0 !important;
    }

    .fi-page-content {
        padding: 18px 14px 34px !important;
    }

    .sk-dash-grid {
        grid-template-columns: 1fr;
    }

    .sk-card-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* =========================================================
   V5 — NATIVE FILAMENT SHELL
   Full-width Superkidz purple topbar + white native sidebar.
   Keep the V4 content/card/table language across all pages.
   No independent fixed brand block.
   ========================================================= */

/* The old V4.2 injected brand is no longer part of the shell. */
.sk-app-brand {
    display: none !important;
}

/* ---------- full-width purple topbar ---------- */
.fi-topbar-ctn,
.fi-topbar {
    background: #9c1e61 !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.fi-topbar {
    min-height: 70px !important;
    height: 70px !important;
    padding-inline: 24px !important;
    gap: 14px !important;
}

.fi-topbar-start {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

/* Logo lives only in the topbar. */
.fi-topbar-start > a {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.fi-topbar-start .fi-logo {
    display: block !important;
    width: auto !important;
    max-width: 120px !important;
    height: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.sk-topbar-branch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 36px !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.sk-topbar-branch-pin {
    font-size: 13px !important;
    line-height: 1 !important;
}

.fi-topbar-end {
    margin-inline-start: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sk-topbar-user-name {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn {
    color: #fff !important;
}

.fi-topbar .fi-icon-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
}

.fi-topbar .fi-user-avatar,
.fi-topbar .fi-avatar.fi-user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) !important;
}

/* ---------- native white sidebar below topbar ---------- */
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-footer {
    background: #fff !important;
    background-image: none !important;
}

.fi-sidebar {
    border-inline-end: 1px solid #e7e9f0 !important;
    box-shadow: none !important;
}

.fi-sidebar-nav {
    padding: 10px 12px 18px !important;
}

.fi-sidebar-nav-groups,
.fi-sidebar-group-items {
    gap: 5px !important;
}

.fi-sidebar-item-btn {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #333843 !important;
    gap: 10px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-btn:hover {
    background: #f7f7f9 !important;
    color: #9c1e61 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: #f0f0f3 !important;
    color: #9c1e61 !important;
    font-weight: 600 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: none !important;
    display: none !important;
}

.fi-sidebar-item-label {
    color: currentColor !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: inherit !important;
}

.fi-sidebar-item-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    color: #929bad !important;
    stroke-width: 1.6 !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #9c1e61 !important;
}

/* Desktop: topbar owns the first row. Sidebar begins under it. */
@media (min-width: 1025px) {
    .fi-topbar-ctn {
        margin-inline-start: 0 !important;
        width: 100% !important;
        inset-inline: 0 !important;
        z-index: 40 !important;
    }

    .fi-sidebar {
        top: 70px !important;
        inset-block-start: 70px !important;
        height: calc(100dvh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;
        overflow: hidden !important;
        z-index: 30 !important;
    }

    /* Avoid a second copy of the logo inside the sidebar. */
    .fi-sidebar-header-ctn,
    .fi-sidebar-header {
        display: none !important;
    }

    .fi-sidebar-nav {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

/* Mobile keeps Filament's drawer behavior, but the drawer itself stays white. */
@media (max-width: 1024px) {
    .fi-sidebar,
    .fi-sidebar-nav,
    .fi-sidebar-footer {
        background: #fff !important;
    }

    .fi-sidebar-header,
    .fi-sidebar-header-ctn {
        background: #9c1e61 !important;
    }
}



/* =========================================================
   ROUTE A v1 — NATIVE FILAMENT + INVOICESHELF DESIGN LANGUAGE
   ---------------------------------------------------------
   Principle:
   - Keep Filament's native shell and components.
   - Do not replace Filament markup.
   - Apply InvoiceShelf-like sizing, rhythm, typography, tables,
     buttons and page headers through stable CSS selectors.
   - Page-specific operational UI (.sk-*) remains intact.
   ========================================================= */

:root {
    --sk-route-a-topbar-h: 64px;
    --sk-route-a-page-pad: 32px;
    --sk-route-a-sidebar-w: 224px;
    --sk-route-a-bg: #f3f4f6;
    --sk-route-a-surface: #ffffff;
    --sk-route-a-surface-alt: #f9fafb;
    --sk-route-a-line: #e5e7eb;
    --sk-route-a-heading: #111827;
    --sk-route-a-body: #667085;
    --sk-route-a-subtle: #98a2b3;
    --sk-route-a-radius: 12px;
}

/* --- Global type and canvas --- */
html,
body,
.fi-body,
.fi-layout,
.fi-main,
.fi-page,
.fi-topbar,
.fi-sidebar,
.fi-btn,
.fi-ta,
.fi-section,
.fi-input-wrp,
.fi-dropdown-panel,
.fi-modal-window {
    font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html,
body,
.fi-body,
.fi-layout,
.fi-main,
.fi-main-ctn {
    background: var(--sk-route-a-bg) !important;
}

/* --- Topbar: native Filament structure, InvoiceShelf proportions --- */
.fi-topbar-ctn,
.fi-topbar {
    background: #9c1e61 !important;
    background-image: linear-gradient(90deg, #9c1e61 0%, #b24d83 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fi-topbar {
    min-height: var(--sk-route-a-topbar-h) !important;
    height: var(--sk-route-a-topbar-h) !important;
    padding-inline: 32px !important;
    gap: 12px !important;
}

.fi-topbar-start,
.fi-topbar-end {
    display: flex !important;
    align-items: center !important;
}

.fi-topbar-start {
    gap: 0 !important;
}

.fi-topbar-end {
    margin-inline-start: auto !important;
    gap: 10px !important;
}

.fi-topbar-start .fi-logo {
    width: auto !important;
    height: 40px !important;
    max-height: 40px !important;
    max-width: 132px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.sk-topbar-branch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.sk-topbar-branch-pin,
.sk-topbar-user-name {
    display: none !important;
}

.fi-topbar .fi-user-avatar,
.fi-topbar .fi-avatar.fi-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .28) !important;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn {
    color: #fff !important;
}

.fi-topbar .fi-icon-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
}

/* --- Native white sidebar, InvoiceShelf spacing --- */
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-footer {
    background: #fff !important;
}

.fi-sidebar {
    border-inline-end: 1px solid var(--sk-route-a-line) !important;
    box-shadow: none !important;
}

.fi-sidebar-nav {
    padding: 12px !important;
}

.fi-sidebar-nav-groups,
.fi-sidebar-group-items {
    gap: 4px !important;
}

.fi-sidebar-item-btn {
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    gap: 12px !important;
    color: #111827 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-sidebar-item-btn:hover {
    color: var(--sk-is-primary-500) !important;
    background: #f9fafb !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    color: var(--sk-is-primary-500) !important;
    background: #f3f4f6 !important;
    font-weight: 500 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: none !important;
    display: none !important;
}

.fi-sidebar-item-label {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: inherit !important;
}

.fi-sidebar-item-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    color: #98a2b3 !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--sk-is-primary-500) !important;
}

@media (min-width: 1025px) {
    .fi-topbar-ctn {
        margin-inline-start: 0 !important;
        width: 100% !important;
        inset-inline: 0 !important;
        z-index: 40 !important;
    }

    .fi-sidebar {
        top: var(--sk-route-a-topbar-h) !important;
        inset-block-start: var(--sk-route-a-topbar-h) !important;
        height: calc(100dvh - var(--sk-route-a-topbar-h)) !important;
        max-height: calc(100dvh - var(--sk-route-a-topbar-h)) !important;
        z-index: 30 !important;
    }

    .fi-sidebar-header-ctn,
    .fi-sidebar-header {
        display: none !important;
    }
}

/* --- One global page grid: header and content always align --- */
.fi-main,
.fi-page,
.fi-page-header-main-ctn,
.fi-page-main,
.fi-page-content {
    width: 100% !important;
    max-width: none !important;
}

.fi-page {
    margin: 0 !important;
}

.fi-page-header-main-ctn {
    margin: 0 !important;
    padding: var(--sk-route-a-page-pad) var(--sk-route-a-page-pad) 0 !important;
}

.fi-page-main {
    padding-top: 0 !important;
}

.fi-page-content {
    margin: 0 !important;
    padding: 28px 0 40px !important;
}

/* InvoiceShelf order: Title, then breadcrumb. Filament renders the
   breadcrumb first, so use layout order instead of replacing markup. */
.fi-header > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.fi-header-heading {
    order: 1 !important;
    margin: 0 !important;
    color: var(--sk-route-a-heading) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.fi-breadcrumbs {
    order: 2 !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
}

.fi-breadcrumbs-list {
    gap: 8px !important;
}

.fi-breadcrumbs-item,
.fi-breadcrumbs-item-label,
.fi-breadcrumbs-item a {
    color: #344054 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.fi-breadcrumbs-item-separator {
    display: none !important;
}

.fi-breadcrumbs-item:not(:first-child)::before {
    content: '/' !important;
    display: inline-block !important;
    margin-inline-end: 8px !important;
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.fi-header-subheading {
    order: 3 !important;
    display: none !important;
}

.fi-header {
    align-items: flex-start !important;
    gap: 20px !important;
}

.fi-header-actions-ctn {
    padding-top: 0 !important;
}

/* --- Native sections / cards --- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-card {
    border: 1px solid var(--sk-route-a-line) !important;
    border-radius: var(--sk-route-a-radius) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}

.fi-section-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--sk-route-a-line) !important;
}

.fi-section-header-heading {
    color: var(--sk-route-a-heading) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
}

.fi-section-header-description {
    margin-top: 2px !important;
    color: var(--sk-route-a-body) !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

/* --- Filament tables -> InvoiceShelf DataTable language --- */
.fi-ta-ctn {
    overflow: hidden !important;
}

.fi-ta-header,
.fi-ta-header-toolbar,
.fi-ta-header-ctn,
.fi-ta-footer {
    background: #fff !important;
    border-color: var(--sk-route-a-line) !important;
}

.fi-ta-header-cell {
    background: var(--sk-route-a-surface-alt) !important;
    padding: 12px 24px !important;
    border-color: var(--sk-route-a-line) !important;
}

.fi-ta-header-cell-label {
    color: #667085 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.fi-ta-row,
.fi-ta-row:nth-child(odd) {
    background: var(--sk-route-a-surface) !important;
}

.fi-ta-row:nth-child(even) {
    background: var(--sk-route-a-surface-alt) !important;
}

.fi-ta-row:hover {
    background: #f6f7f9 !important;
}

.fi-ta-cell {
    padding: 16px 24px !important;
    border-color: var(--sk-route-a-line) !important;
}

.fi-ta-text,
.fi-ta-text-item-label {
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
}

.fi-ta-footer {
    padding: 0 !important;
}

/* --- Inputs --- */
.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp input,
.fi-fo-field-wrp textarea,
.fi-fo-field-wrp select {
    border-radius: 8px !important;
}

.fi-input-wrp {
    min-height: 40px !important;
    border-color: #d0d5dd !important;
    background: #fff !important;
    box-shadow: none !important;
}

.fi-input-wrp:focus-within {
    border-color: #c35a8d !important;
    box-shadow: 0 0 0 2px rgba(156, 30, 97, .12) !important;
}

.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    font-size: 14px !important;
    line-height: 20px !important;
}

/* --- Buttons: InvoiceShelf md = px-4 py-2, 14px, radius 8 --- */
.fi-btn {
    min-height: 40px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.fi-btn.fi-color-primary {
    background: var(--sk-primary) !important;
    border-color: var(--sk-is-primary-500) !important;
    color: #fff !important;
}

.fi-btn.fi-color-primary:hover {
    background: #86184f !important;
    border-color: #86184f !important;
}

.fi-btn.fi-color-gray {
    background: #fff !important;
    border-color: #d0d5dd !important;
    color: #344054 !important;
}

.fi-btn.fi-color-gray:hover {
    background: #f9fafb !important;
}

/* --- Badges stay compact; do not inflate table rows --- */
.fi-badge {
    border-radius: 999px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
}

/* --- Dashboard custom cards follow the same global grid and radius. --- */
.sk-dashboard-root {
    width: 100% !important;
    gap: 24px !important;
}

.sk-dash-grid,
.sk-two,
.sk-dashboard-side {
    gap: 24px !important;
}

.sk-card,
.sk-metric {
    border-radius: var(--sk-route-a-radius) !important;
    border-color: var(--sk-route-a-line) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}

/* --- Keep large-container focus outlines from drawing a black frame. --- */
.fi-layout:focus,
.fi-layout:focus-visible,
.fi-main:focus,
.fi-main:focus-visible,
.fi-main-ctn:focus,
.fi-main-ctn:focus-visible,
.fi-page:focus,
.fi-page:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 1024px) {
    :root {
        --sk-route-a-page-pad: 20px;
    }

    .fi-topbar {
        padding-inline: 16px !important;
    }
}

@media (max-width: 640px) {
    :root {
        --sk-route-a-page-pad: 16px;
    }

    .sk-topbar-branch {
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .fi-header {
        gap: 12px !important;
    }

    .fi-header-actions-ctn {
        width: 100% !important;
        padding-top: 8px !important;
    }

    .fi-ta-header-cell,
    .fi-ta-cell {
        padding-inline: 16px !important;
    }
}

/* =========================================================
   ROUTE A v2 — INVOICESHELF SIDEBAR + BUTTON FIDELITY
   Source reference: Superkidz InvoiceShelf frontend.

   InvoiceShelf desktop navigation uses:
   - 4px primary left border on the active item
   - gray-100 active background
   - primary-500 text/icon
   - square/full-width menu rows (no pill / rounded active block)
   - 14px / 500 menu typography and 20px icons

   InvoiceShelf primary md buttons use:
   - primary-600 (#841850), hover primary-700 (#6f1543)
   - px-4 / py-2, 14px text, rounded-md (6px)
   ========================================================= */

:root {
    --sk-is-primary-500: #9c1e61;
    --sk-is-primary-600: #841850;
    --sk-is-primary-700: #6f1543;
    --sk-is-gray-50: #f9fafb;
    --sk-is-gray-100: #f3f4f6;
    --sk-is-gray-200: #e5e7eb;
    --sk-is-gray-400: #9ca3af;
    --sk-is-black: #040405;
}

/* Keep enough width for long labels such as "Professional Availability". */
html.fi {
    --sidebar-width: 16rem !important;
}

/* Sidebar: full-width rows with the InvoiceShelf active marker. */
.fi-sidebar {
    border-inline-end: 1px solid var(--sk-is-gray-200) !important;
}

.fi-sidebar-nav {
    padding: 12px 0 18px !important;
    /* Filament reserves scrollbar space with scrollbar-gutter: stable.
       InvoiceShelf does not reserve that strip, so let the scrollbar use
       space only when it is actually needed. */
    scrollbar-gutter: auto !important;
}

.fi-sidebar-nav-groups,
.fi-sidebar-group-items {
    margin-inline: 0 !important;
    gap: 0 !important;
}

.fi-sidebar-item {
    margin: 0 !important;
}

.fi-sidebar-item > .fi-sidebar-item-btn {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 12px 12px 12px 24px !important;
    border: 0 !important;
    border-inline-start: 4px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--sk-is-black) !important;
    gap: 16px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item > .fi-sidebar-item-btn:hover {
    background: var(--sk-is-gray-50) !important;
    color: var(--sk-is-black) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    border-inline-start-color: var(--sk-is-primary-500) !important;
    background: var(--sk-is-gray-100) !important;
    color: var(--sk-is-primary-500) !important;
    font-weight: 500 !important;
}

/* The active marker is a real border now; disable older pseudo markers. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: none !important;
    display: none !important;
}

.fi-sidebar-item-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    color: currentColor !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-icon,
.fi-sidebar-item-btn > .fi-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    color: var(--sk-is-gray-400) !important;
}

.fi-sidebar-item > .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item > .fi-sidebar-item-btn:hover > .fi-icon {
    color: var(--sk-is-black) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--sk-is-primary-500) !important;
}

/* Filament primary buttons: match InvoiceShelf BaseButton md / primary. */
.fi-btn {
    min-height: 38px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.fi-btn.fi-color-primary {
    border: 1px solid transparent !important;
    background: var(--sk-is-primary-600) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}

.fi-btn.fi-color-primary:hover {
    border-color: transparent !important;
    background: var(--sk-is-primary-700) !important;
    color: #fff !important;
}

.fi-btn.fi-color-gray {
    border: 1px solid var(--sk-is-gray-200) !important;
    background: #fff !important;
    color: #374151 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
}

.fi-btn.fi-color-gray:hover {
    border-color: var(--sk-is-gray-200) !important;
    background: var(--sk-is-gray-50) !important;
    color: #374151 !important;
}

/* Primary actions on custom Blade pages that do not use <x-filament::button>. */
.sk-avail-add,
.sk-action-btn.primary,
.sk-share-btn.primary {
    min-height: 38px !important;
    padding: 8px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: var(--sk-is-primary-600) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.sk-avail-add:hover,
.sk-action-btn.primary:hover,
.sk-share-btn.primary:hover {
    border-color: transparent !important;
    background: var(--sk-is-primary-700) !important;
    color: #fff !important;
}

/* On narrow screens keep the mobile drawer roomy enough for full labels. */
@media (max-width: 640px) {
    html.fi {
        --sidebar-width: min(20rem, 88vw) !important;
    }
}

/* =========================================================
   SIDEBAR ACTIVE HOVER — InvoiceShelf behavior
   Active item keeps Superkidz purple text/icon while only
   the gray background becomes slightly lighter on hover.
   ========================================================= */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background: var(--sk-is-gray-50) !important;
    color: var(--sk-is-primary-500) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: var(--sk-is-primary-500) !important;
}

/* =========================================================
   FILAMENT FORM TOGGLE ON — SUPERKIDZ PURPLE
   Keep the native Filament switch geometry; only replace the
   default pink ON state with the Superkidz primary purple.
   Scope is limited to form toggles so semantic/table toggle
   colors are not unintentionally overridden.
   ========================================================= */
.fi-fo-toggle.fi-toggle-on {
    background-color: var(--sk-is-primary-500, #9c1e61) !important;
}

.fi-fo-toggle.fi-toggle-on:focus-visible {
    --tw-ring-color: var(--sk-is-primary-500, #9c1e61) !important;
}

/* =========================================================
   FILAMENT INPUT BORDER — INVOICESHELF-LIKE
   Filament normally draws its field outline with a ring / box-shadow.
   Our InvoiceShelf skin removes that shadow, so give form controls a
   real 1px border instead. Keep hover subtle and focus Superkidz purple.
   ========================================================= */
.fi-input-wrp {
    border: 1px solid #dfe3e8 !important;
    box-shadow: none !important;
    transition: border-color .14s ease, box-shadow .14s ease !important;
}

.fi-input-wrp:hover {
    border-color: #cfd5dc !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--sk-is-primary-500, #9c1e61) !important;
    box-shadow: 0 0 0 1px rgba(156, 30, 97, .10) !important;
}

.fi-input-wrp:has(input:disabled),
.fi-input-wrp:has(textarea:disabled),
.fi-input-wrp:has(select:disabled) {
    border-color: #e7e9ed !important;
}

/* =========================================================
   V8 — INVOICESHELF DEFAULT DATA TABLE LANGUAGE
   Reference: InvoiceShelf 3.x DataTable.vue
   - white surface
   - 1px neutral border
   - shadow-sm
   - rounded-xl (12px) container
   - surface-secondary header / zebra rows
   - uppercase muted 12px headers
   - compact muted body text

   This block is intentionally global for Filament tables so
   Professionals, Invoices, Calendar List, Tanggal Libur, etc.
   share the same table language. Common custom Blade tables
   receive the same surface treatment where safe.
   ========================================================= */
.fi-ta-ctn {
    border: 1px solid var(--sk-is-gray-200, #e5e7eb) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    overflow: hidden !important;
}

.fi-ta-header,
.fi-ta-header-toolbar,
.fi-ta-header-ctn,
.fi-ta-content,
.fi-ta-footer {
    background: #fff !important;
}

.fi-ta-header,
.fi-ta-header-toolbar {
    border-bottom: 1px solid var(--sk-is-gray-200, #e5e7eb) !important;
}

.fi-ta-header-cell {
    padding: 12px 24px !important;
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
}

.fi-ta-header-cell-label {
    color: #667085 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.fi-ta-row {
    border-color: #e5e7eb !important;
    background: #fff !important;
}

.fi-ta-row:nth-child(even) {
    background: #f9fafb !important;
}

/* InvoiceShelf DataTable does not add a colored row hover. */
.fi-ta-row:hover {
    background: #f3f4f6 !important;
}

.fi-ta-cell {
    padding: 14px 24px !important;
    border-color: #e5e7eb !important;
}

.fi-ta-text-item-label,
.fi-ta-text {
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

.fi-ta-footer {
    border-top: 1px solid #e5e7eb !important;
    background: #fff !important;
}

/* Keep primary/link cells recognizable without turning entire rows pink. */
.fi-ta-cell a:not(.fi-btn):not(.fi-icon-btn) {
    color: var(--sk-is-primary-500, #9c1e61) !important;
}

/* Common custom tables: same InvoiceShelf surface, while retaining
   horizontal scrolling for wide operational matrices. */
.sk-table-wrap,
.sk-avail-matrix-wrap,
.sk-share-table-wrap,
.sk-holiday-table-wrap,
.sk-week-wrap,
.sk-month-wrap {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.sk-table,
.sk-avail-matrix,
.sk-exception-table,
.sk-share-table,
.sk-holiday-table,
.sk-alt-table,
.sk-week-table {
    background: #fff !important;
}

.sk-table th,
.sk-avail-matrix th,
.sk-exception-table th,
.sk-share-table th,
.sk-holiday-table th,
.sk-alt-table th,
.sk-week-table th {
    background: #f9fafb !important;
    color: #667085 !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
}

.sk-table tbody tr:nth-child(even),
.sk-exception-table tbody tr:nth-child(even),
.sk-share-table tbody tr:nth-child(even),
.sk-holiday-table tbody tr:nth-child(even),
.sk-alt-table tbody tr:nth-child(even) {
    background: #f9fafb !important;
}

/* Calendar Week metadata needs to be operationally readable, not disabled. */
.sk-week-pro-meta {
    color: #7a8392 !important;
    opacity: 1 !important;
}

.sk-week-source {
    color: #8a93a1 !important;
    opacity: 1 !important;
}

.sk-week-empty {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* =========================================================
   LOGIN — Superkidz Scheduling
   Keeps the application typography (Poppins) and gives the
   auth page its own clean Superkidz gradient treatment.
   ========================================================= */
body.sk-login-page {
    min-height: 100dvh !important;
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #aa2c70 0%, #901a57 52%, #741343 100%) !important;
}

body.sk-login-page .fi-simple-layout,
body.sk-login-page .fi-simple-main-ctn {
    min-height: 100dvh !important;
    background: transparent !important;
}

body.sk-login-page .fi-simple-main-ctn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: clamp(5.5rem, 11vh, 7.5rem) 1rem 2rem !important;
}

body.sk-login-page .fi-simple-main {
    width: min(100%, 26rem) !important;
    max-width: 26rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

body.sk-login-page .sk-login-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-family: inherit !important;
}

body.sk-login-page .sk-login-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5rem;
}

body.sk-login-page .sk-login-logo {
    display: block;
    width: auto;
    height: 5.25rem;
    max-width: 10rem;
    object-fit: contain;
}

body.sk-login-page .sk-login-card {
    width: 100%;
    padding: 1.75rem;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 14px;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.sk-login-page .sk-login-card-head {
    margin-bottom: 1.5rem;
    text-align: center;
}

body.sk-login-page .sk-login-card-head h1 {
    margin: 0;
    color: var(--sk-text);
    font-size: 1.25rem;
    line-height: 1.55rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

body.sk-login-page .sk-login-card-head p {
    margin: .4rem 0 0;
    color: var(--sk-muted);
    font-size: .78rem;
    line-height: 1.2rem;
    font-weight: 400;
}

body.sk-login-page .sk-login-card .fi-sc {
    gap: 1.1rem !important;
}

body.sk-login-page .sk-login-card .fi-btn {
    min-height: 2.5rem !important;
}

body.sk-login-page .sk-login-footer {
    margin: .1rem 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
    line-height: 1rem;
    font-weight: 400;
    text-align: center;
}

@media (max-width: 639px) {
    body.sk-login-page .fi-simple-main-ctn {
        padding: clamp(2.5rem, 7vh, 4rem) 1rem 1.5rem !important;
    }

    body.sk-login-page .sk-login-logo {
        height: 5.5rem;
        max-width: 10.5rem;
    }

    body.sk-login-page .sk-login-card {
        padding: 1.4rem;
        border-radius: 12px;
    }
}

/* =========================================================
   MODAL SECONDARY ACTIONS — unified neutral button treatment
   Filament 5 renders gray actions without a .fi-color-* class,
   so older .fi-btn.fi-color-gray rules do not catch them.
   Keep modal cancel / "create another" actions consistent with
   custom Sharing modal secondary buttons.
   ========================================================= */
.fi-modal-footer-actions > .fi-btn:not(.fi-color),
.sk-share-modal-actions .sk-share-btn:not(.primary) {
    min-height: 38px !important;
    padding: 8px 16px !important;
    border: 1px solid var(--sk-is-gray-200, #e5e7eb) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #374151 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease !important;
}

.fi-modal-footer-actions > .fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover,
.sk-share-modal-actions .sk-share-btn:not(.primary):hover {
    border-color: var(--sk-is-gray-300, #d1d5db) !important;
    background: var(--sk-is-gray-50, #f9fafb) !important;
    color: #374151 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}

.fi-modal-footer-actions > .fi-btn:not(.fi-color):focus-visible,
.sk-share-modal-actions .sk-share-btn:not(.primary):focus-visible {
    outline: none !important;
    border-color: var(--sk-is-gray-300, #d1d5db) !important;
    box-shadow: 0 0 0 3px rgba(156, 30, 97, .10) !important;
}