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

/* =========================================================
   SUPERKIDZ SCHEDULING DESIGN SYSTEM V1 — FINAL GLOBAL LAYER
   2026-09-09

   Visual contract:
   - Poppins typography with a small, fixed type scale.
   - Superkidz purple + neutral grays as the application palette.
   - Appointment lifecycle: Scheduled = Superkidz purple, Finished = blue, No Show = amber.
   - Amber/yellow is reserved for NO_SHOW only.
   - 12px surfaces, 8px controls, 6px buttons.
   - One outer section/card + optional inset data surface.
   - All content/action links use Superkidz purple.

   This block is intentionally last. It supersedes legacy visual tokens
   without changing any scheduling, invoice, availability, or sharing logic.
   ========================================================= */
:root {
    /* Brand */
    --sk-primary-50: #f8edf3;
    --sk-primary-100: #ead6e1;
    --sk-primary-500: #9c1e61;
    --sk-primary-600: #841850;
    --sk-primary-700: #6f1543;

    /* Neutral foundation */
    --sk-ds-bg: #f3f4f6;
    --sk-ds-surface: #ffffff;
    --sk-ds-gray-50: #f9fafb;
    --sk-ds-gray-100: #f3f4f6;
    --sk-ds-gray-200: #e5e7eb;
    --sk-ds-gray-300: #d1d5db;
    --sk-ds-text: #111827;
    --sk-ds-text-secondary: #475467;
    --sk-ds-text-muted: #667085;
    --sk-ds-text-subtle: #98a2b3;

    /* Appointment lifecycle semantic states */
    --sk-finished-bg: #eff6ff;
    --sk-finished-border: #bfdbfe;
    --sk-finished-text: #2563eb;
    --sk-finished-hover: #1d4ed8;

    /* NO_SHOW is the only amber/yellow semantic state in V1 */
    --sk-noshow-bg: #fff3d6;
    --sk-noshow-border: #f4c66a;
    --sk-noshow-text: #b45309;
    --sk-noshow-dot: #d97706;

    /* Geometry */
    --sk-ds-radius-surface: 12px;
    --sk-ds-radius-control: 8px;
    --sk-ds-radius-button: 6px;
    --sk-ds-shadow: 0 1px 2px rgba(16, 24, 40, .05);

    /* Compatibility aliases for older custom page CSS */
    --sk-bg: var(--sk-ds-bg);
    --sk-panel: var(--sk-ds-surface);
    --sk-text: var(--sk-ds-text);
    --sk-muted: var(--sk-ds-text-muted);
    --sk-subtle: var(--sk-ds-text-subtle);
    --sk-line: var(--sk-ds-gray-200);
    --sk-line-soft: #edf0f3;
    --sk-primary: var(--sk-primary-500);
    --sk-primary-dark: var(--sk-primary-700);
    --sk-primary-deep: var(--sk-primary-700);
    --sk-primary-soft: var(--sk-primary-50);
    --sk-primary-softer: #fbf5f8;
    --sk-primary-muted: var(--sk-primary-100);
    --sk-primary-faint: #fdf9fb;
    --sk-green: var(--sk-primary-500);
    --sk-green-soft: var(--sk-primary-50);
    --sk-blue: var(--sk-primary-500);
    --sk-blue-soft: var(--sk-primary-50);
    --sk-red: var(--sk-primary-500);
    --sk-red-soft: var(--sk-primary-50);
    --sk-orange: var(--sk-noshow-text);
    --sk-orange-soft: var(--sk-noshow-bg);
    --sk-shadow: var(--sk-ds-shadow);
    --sk-radius: var(--sk-ds-radius-surface);
    --sk-radius-sm: var(--sk-ds-radius-control);

    --sk-is-primary-500: var(--sk-primary-500);
    --sk-is-primary-600: var(--sk-primary-600);
    --sk-is-primary-700: var(--sk-primary-700);
    --sk-is-gray-50: var(--sk-ds-gray-50);
    --sk-is-gray-100: var(--sk-ds-gray-100);
    --sk-is-gray-200: var(--sk-ds-gray-200);
    --sk-route-a-bg: var(--sk-ds-bg);
    --sk-route-a-surface: var(--sk-ds-surface);
    --sk-route-a-surface-alt: var(--sk-ds-gray-50);
    --sk-route-a-line: var(--sk-ds-gray-200);
    --sk-route-a-heading: var(--sk-ds-text);
    --sk-route-a-body: var(--sk-ds-text-muted);
    --sk-route-a-subtle: var(--sk-ds-text-subtle);
    --sk-route-a-radius: var(--sk-ds-radius-surface);
}

/* ---------- Typography ---------- */
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,
button,
input,
select,
textarea,
table {
    font-family: 'Poppins', 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-ds-bg) !important;
    color: var(--sk-ds-text) !important;
}

.fi-header-heading {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
    color: var(--sk-ds-text) !important;
    letter-spacing: -.02em !important;
}

.fi-section-header-heading,
.sk-card-title,
.sk-share-title {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--sk-ds-text) !important;
}

.sk-avail-subheading,
.sk-holiday-title,
.sk-pro-name,
.sk-week-pro-name {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--sk-ds-text) !important;
}

.fi-section-header-description,
.fi-header-subheading,
.sk-avail-subdescription,
.sk-pro-meta,
.sk-week-pro-meta,
.sk-week-source,
.sk-share-sub,
.sk-meta,
.sk-sub,
.sk-table-sub,
.sk-metric-foot,
.sk-attn-reason {
    color: var(--sk-ds-text-muted) !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.fi-breadcrumbs,
.fi-breadcrumbs-item,
.fi-breadcrumbs-item a {
    color: var(--sk-ds-text-secondary) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
}

/* ---------- Surfaces / cards ---------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-card,
.sk-card,
.sk-metric,
.sk-preview,
.sk-summary-card,
.sk-stat,
.sk-share-shell,
.sk-holiday-shell > .fi-section {
    border: 1px solid var(--sk-ds-gray-200) !important;
    border-radius: var(--sk-ds-radius-surface) !important;
    background: var(--sk-ds-surface) !important;
    box-shadow: var(--sk-ds-shadow) !important;
}

.fi-section-header,
.sk-card-head,
.sk-share-head {
    border-color: var(--sk-ds-gray-200) !important;
}

/* ---------- Controls ---------- */
.fi-input-wrp,
.sk-avail-search,
.sk-share-search,
.sk-cal-field,
.sk-filter,
select.sk-cal-select,
input.sk-cal-input {
    min-height: 40px !important;
    border: 1px solid var(--sk-ds-gray-200) !important;
    border-radius: var(--sk-ds-radius-control) !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--sk-ds-text-secondary) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.fi-input-wrp:hover,
.sk-avail-search:hover,
.sk-share-search:hover,
.sk-cal-field:hover {
    border-color: var(--sk-ds-gray-300) !important;
}

.fi-input-wrp:focus-within,
.sk-avail-search:focus,
.sk-share-search:focus,
.sk-cal-field:focus {
    border-color: var(--sk-primary-500) !important;
    box-shadow: 0 0 0 1px rgba(156, 30, 97, .10) !important;
}

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

.fi-btn,
.sk-avail-add,
.sk-action-btn,
.sk-link-btn,
.sk-share-btn,
.sk-card-link {
    border-radius: var(--sk-ds-radius-button) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

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

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

/* Appointment lifecycle action colors. */
.fi-btn.fi-color-info {
    background: var(--sk-finished-text) !important;
    border-color: var(--sk-finished-text) !important;
    color: #fff !important;
}

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

/* ---------- Links ---------- */
.fi-ta-cell a:not(.fi-btn):not(.fi-icon-btn),
.fi-in-entry a:not(.fi-btn),
.sk-card-link,
.sk-manage-link,
.sk-target,
.sk-week-day-link:hover,
.sk-share-table a:not(.sk-share-btn),
.sk-table a:not(.fi-btn),
.sk-exception-table a,
.sk-holiday-table a,
.sk-alt-table a {
    color: var(--sk-primary-500) !important;
    text-decoration: none !important;
}

.fi-ta-cell a:not(.fi-btn):not(.fi-icon-btn):hover,
.fi-in-entry a:not(.fi-btn):hover,
.sk-card-link:hover,
.sk-manage-link:hover,
.sk-target:hover,
.sk-share-table a:not(.sk-share-btn):hover {
    color: var(--sk-primary-700) !important;
}

/* ---------- Tables ---------- */
.fi-ta-ctn,
.sk-members-shell,
.sk-action-required-shell,
.sk-table-wrap,
.sk-avail-matrix-wrap,
.sk-exception-table-shell,
.sk-share-table-shell,
.sk-holiday-table-wrap,
.sk-alt-table-wrap,
.sk-week-wrap,
.sk-month-wrap,
.sk-dashboard-table-shell {
    border: 1px solid var(--sk-ds-gray-200) !important;
    border-radius: var(--sk-ds-radius-surface) !important;
    background: #fff !important;
    box-shadow: var(--sk-ds-shadow) !important;
    overflow: hidden !important;
}

.fi-ta-header-cell,
.sk-table th,
.sk-share-table th,
.sk-exception-table th,
.sk-holiday-table th,
.sk-alt-table th,
.sk-avail-matrix th,
.sk-week-table th {
    background: var(--sk-ds-gray-50) !important;
    color: var(--sk-ds-text-muted) !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

.fi-ta-cell,
.fi-ta-text-item-label,
.fi-ta-text,
.sk-table td,
.sk-share-table td,
.sk-exception-table td,
.sk-holiday-table td,
.sk-alt-table td {
    color: var(--sk-ds-text-secondary) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Dense operational matrices intentionally keep a smaller data size. */
.sk-avail-matrix td,
.sk-week-table td,
.sk-month-grid,
.sk-day-status,
.sk-week-booking,
.sk-week-availability span {
    font-size: 12px !important;
    line-height: 18px !important;
}

.fi-ta-row,
.sk-table tr,
.sk-share-table tr,
.sk-exception-table tr,
.sk-holiday-table tr,
.sk-alt-table tr {
    border-color: var(--sk-ds-gray-200) !important;
}

.fi-ta-row:nth-child(even),
.sk-table tbody tr:nth-child(even),
.sk-share-table tbody tr:nth-child(even),
.sk-exception-table tbody tr:nth-child(even),
.sk-holiday-table tbody tr:nth-child(even),
.sk-alt-table tbody tr:nth-child(even) {
    background: var(--sk-ds-gray-50) !important;
}

.fi-ta-row:hover,
.sk-table tbody tr:hover,
.sk-share-table tbody tr:hover,
.sk-exception-table tbody tr:hover,
.sk-holiday-table tbody tr:hover,
.sk-alt-table tbody tr:hover {
    background: var(--sk-ds-gray-100) !important;
}

/* ---------- Badge contract ---------- */
.fi-badge,
.sk-badge,
.sk-chip,
.sk-status,
.sk-state,
.sk-exception-type,
.sk-week-competency,
.sk-competency,
.sk-slot {
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
}

.fi-badge.fi-color-primary,
.fi-badge.fi-color-success,
.sk-status.active,
.sk-chip:not(.is-fallback),
.sk-slot,
.sk-week-competency,
.sk-competency,
.sk-exception-type.is-custom {
    background: var(--sk-primary-50) !important;
    color: var(--sk-primary-500) !important;
    border-color: var(--sk-primary-100) !important;
}

/* Old semantic badge colors are deliberately collapsed into the V1 palette. */
.fi-badge.fi-color-danger,
.fi-badge.fi-color-gray,
.sk-chip.is-fallback,
.sk-exception-type.is-off,
.sk-status:not(.active) {
    background: var(--sk-ds-gray-100) !important;
    color: var(--sk-ds-text-secondary) !important;
    border-color: var(--sk-ds-gray-200) !important;
}

/* Blue is reserved for FINISHED appointment state/actions. */
.fi-badge.fi-color-info {
    background: var(--sk-finished-bg) !important;
    color: var(--sk-finished-text) !important;
    border-color: var(--sk-finished-border) !important;
}

/* Yellow is reserved for NO_SHOW. */
.fi-badge.fi-color-warning,
.sk-badge.no_show,
.sk-badge.no-show,
.sk-week-booking.is-no-show {
    background: var(--sk-noshow-bg) !important;
    color: var(--sk-noshow-text) !important;
    border-color: var(--sk-noshow-border) !important;
}

/* Appointment lifecycle: Scheduled purple, Finished blue, No Show amber. */
.sk-badge.scheduled,
.sk-week-booking:not(.is-finished):not(.is-no-show) {
    background: var(--sk-primary-50) !important;
    color: var(--sk-primary-500) !important;
    border: 1px solid var(--sk-primary-100) !important;
}

.sk-badge.finished,
.sk-week-booking.is-finished {
    background: var(--sk-finished-bg) !important;
    color: var(--sk-finished-text) !important;
    border: 1px solid var(--sk-finished-border) !important;
}

/* Boolean/active icons should not introduce green/red. */
.fi-ta-icon-item.fi-color-success,
.fi-ta-icon-item.fi-color-info,
.fi-ta-icon-item.fi-color-primary {
    color: var(--sk-primary-500) !important;
}

.fi-ta-icon-item.fi-color-danger {
    color: var(--sk-ds-text-subtle) !important;
}

/* ---------- Dashboard ---------- */
.sk-metric-icon {
    background: var(--sk-primary-50) !important;
    color: var(--sk-primary-500) !important;
}

.sk-attn-item,
.sk-notice.info,
.sk-info,
.sk-warning-box,
.sk-error-box,
.sk-cred {
    background: var(--sk-primary-50) !important;
    border-color: var(--sk-primary-100) !important;
    color: var(--sk-ds-text-secondary) !important;
}

.sk-attn-item strong,
.sk-cred strong,
.sk-warning-box strong,
.sk-error-box strong {
    color: var(--sk-ds-text) !important;
}

.sk-code {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
    background: #fff !important;
    border-color: var(--sk-primary-100) !important;
    color: var(--sk-ds-text-secondary) !important;
}

.sk-rm-missing {
    color: var(--sk-ds-text-secondary) !important;
}

/* ---------- Professional Availability ---------- */
.sk-chip,
.sk-slot,
.sk-week-competency,
.sk-week-availability:not(.is-unavailable) span {
    background: var(--sk-primary-50) !important;
    color: var(--sk-primary-500) !important;
}

.sk-week-availability.is-unavailable span,
.sk-exception-type.is-off {
    background: var(--sk-ds-gray-100) !important;
    color: var(--sk-ds-text-secondary) !important;
}

/* ---------- Calendar ---------- */
.sk-day-status.is-scheduled::before {
    background: var(--sk-primary-500) !important;
}

.sk-day-status.is-finished::before {
    background: var(--sk-finished-text) !important;
}

.sk-day-status.is-no-show::before {
    background: var(--sk-noshow-dot) !important;
}

.sk-day-status.is-scheduled,
.sk-day-status.is-scheduled strong {
    color: var(--sk-primary-500) !important;
}

.sk-day-status.is-finished,
.sk-day-status.is-finished strong {
    color: var(--sk-finished-text) !important;
}

.sk-day-status.is-no-show,
.sk-day-status.is-no-show strong {
    color: var(--sk-noshow-text) !important;
}

.sk-week-booking {
    color: var(--sk-ds-text-secondary) !important;
}

/* ---------- Schedule Generator ---------- */
.sk-error-box,
.sk-warning-box {
    box-shadow: none !important;
}

.sk-message {
    color: var(--sk-ds-text-secondary) !important;
}

/* ---------- Tanggal Libur / Closure ---------- */
.sk-summary-card.safe .sk-summary-value,
.sk-summary-card.warning .sk-summary-value,
.sk-summary-card.conflict .sk-summary-value,
.sk-summary-card .sk-summary-value {
    color: var(--sk-primary-500) !important;
}

.sk-state.safe,
.sk-state.warning,
.sk-state.conflict,
.sk-state.same {
    background: var(--sk-primary-50) !important;
    color: var(--sk-primary-500) !important;
    border-color: var(--sk-primary-100) !important;
}

.sk-state.other {
    background: var(--sk-ds-gray-100) !important;
    color: var(--sk-ds-text-secondary) !important;
    border-color: var(--sk-ds-gray-200) !important;
}

.sk-holiday-hero,
.sk-info {
    background: var(--sk-primary-50) !important;
    background-image: none !important;
    border-color: var(--sk-primary-100) !important;
}

/* ---------- Tabs / selected states ---------- */
.fi-tabs-item.fi-active,
.sk-cal-tab.is-active,
.sk-cal-tab.active {
    color: var(--sk-primary-500) !important;
}

/* ---------- Toggle ---------- */
.fi-fo-toggle.fi-toggle-on {
    background: var(--sk-primary-500) !important;
}

/* ==========================================================
   Superkidz Scheduling UI v22 — Flat inner data surfaces
   Inner tables live inside an outer section/card, so they must
   not introduce a second elevation layer. Keep only border + radius.
   ========================================================== */
.sk-avail-matrix-wrap,
.sk-share-table-shell,
.sk-share-table-wrap,
.sk-dashboard-table-shell,
.sk-dashboard-table-shell .sk-table-wrap {
    box-shadow: none !important;
    filter: none !important;
}

/* ==========================================================
   Superkidz Scheduling UI v29 — Section divider + Dashboard invoice weight
   - Filament already draws the section separator on .fi-section-content-ctn.
     Remove the extra header border so Availability/Sharing match Calendar.
   - Dashboard invoice links use semibold (600), overriding legacy .sk-link 700.
   ========================================================== */
.fi-section-header {
    border-bottom: 0 !important;
}

.sk-dashboard-table-shell .sk-link {
    font-weight: 600 !important;
}

/* =========================================================
   Superkidz Scheduling UI v30 — Restore Filter System v20
   v29 accidentally replaced the Design System stylesheet with
   a stale copy that did not include the persistent inline filter
   controls. Restore the filter layer without changing v29 fixes.
   ========================================================= */
.sk-table-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sk-ds-gray-200);
    background: var(--sk-ds-surface);
}

.sk-filter-control {
    height: 38px;
    border: 1px solid var(--sk-ds-gray-200);
    border-radius: var(--sk-ds-radius-control);
    background: var(--sk-ds-surface);
    color: var(--sk-ds-text-secondary);
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.sk-filter-control:hover {
    border-color: var(--sk-ds-gray-300);
}

.sk-filter-control:focus {
    border-color: var(--sk-primary-500);
    box-shadow: 0 0 0 1px rgba(156, 30, 97, .10);
}

.sk-filter-search {
    flex: 1 1 250px;
    min-width: 220px;
    max-width: 340px;
    padding: 0 12px;
}

.sk-filter-select {
    flex: 0 1 auto;
    min-width: 170px;
    padding: 0 34px 0 12px;
}

.sk-filter-select.is-branch {
    min-width: 180px;
}

.sk-filter-select.is-professional {
    min-width: 210px;
}

.sk-filter-select.is-service {
    min-width: 190px;
}

.sk-filter-select.is-status {
    min-width: 150px;
}

.sk-filter-date {
    flex: 0 0 148px;
    width: 148px;
    padding: 0 10px;
}

.sk-filter-reset {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--sk-primary-500);
    cursor: pointer;
    padding: 8px 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.sk-filter-reset:hover {
    color: var(--sk-primary-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Keep page-level actions inside the primary table surface on resource lists.
   This leaves the Filament page header responsible only for breadcrumbs/title,
   matching the composition used by the custom operational pages. */
.sk-table-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.sk-table-filter-actions .fi-btn {
    white-space: nowrap;
}

/* Custom persistent header replaces Filament's popup filter / column toolbar. */
.fi-ta-header-ctn:has(.sk-table-filter-bar) {
    border-bottom: 0 !important;
}

.fi-ta-header-ctn:has(.sk-table-filter-bar:not(.sk-invoice-filter-bar)) .fi-ta-header-toolbar {
    display: none !important;
}

@media (max-width: 900px) {
    .sk-filter-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .sk-filter-select,
    .sk-filter-select.is-branch,
    .sk-filter-select.is-professional,
    .sk-filter-select.is-service,
    .sk-filter-select.is-status,
    .sk-filter-date {
        flex: 1 1 180px;
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .sk-table-filter-bar {
        align-items: stretch;
    }

    .sk-filter-select,
    .sk-filter-select.is-branch,
    .sk-filter-select.is-professional,
    .sk-filter-select.is-service,
    .sk-filter-select.is-status,
    .sk-filter-date {
        flex: 1 1 100%;
    }

    .sk-table-filter-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   Superkidz Scheduling UI v31 — Canonical page primary surface
   Custom operational pages opt in with .sk-page-primary-surface.
   This keeps the first working surface on the same visual contract as
   native Filament list tables without changing global Filament layout.
   ========================================================= */
.sk-page-primary-surface {
    overflow: hidden;
    border: 1px solid var(--sk-ds-gray-200) !important;
    border-radius: var(--sk-ds-radius-surface) !important;
    background: var(--sk-ds-surface) !important;
    box-shadow: var(--sk-ds-shadow) !important;
}