/* ===========================================================
   HAIKO NATURAL — Filament Admin Theme
   Adapted from handoff: keeps Filament structure, overrides look
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    /* Haiko tokens */
    --hk-white: #FFFFFF;
    --hk-cream: #F8F5F0;
    --hk-cream-2: #FBF4EE;
    --hk-cream-3: #F4EEE6;

    --hk-coral: #E8603A;
    --hk-coral-600: #D8512D;
    --hk-coral-100: #FBE5DC;
    --hk-coral-tint: #FDF1EC;

    --hk-ink: #1C1C1C;
    --hk-ink-2: #2B2B2B;
    --hk-ink-soft: #6B6660;
    --hk-ink-faint: #9A938B;

    --hk-dark: #3A3A3A;

    --hk-border: #F0EBE5;
    --hk-border-strong: #E4DDD3;
    --hk-border-input: #DAD3C9;

    --hk-paid: #4F8A5B;
    --hk-paid-bg: #E7F0E8;
    --hk-pending: #C7912E;
    --hk-pending-bg: #F8EFD9;

    --hk-display: 'Playfair Display', Georgia, serif;
    --hk-label: 'Montserrat', system-ui, sans-serif;
}

/* ===== Override Filament Tailwind primary palette ===== */
:root, [data-theme="light"] {
    --primary-50:  246 230 220;
    --primary-100: 251 229 220;
    --primary-200: 248 207 192;
    --primary-300: 241 175 152;
    --primary-400: 235 134 100;
    --primary-500: 232 96 58;   /* coral */
    --primary-600: 216 81 45;
    --primary-700: 184 63 32;
    --primary-800: 145 48 24;
    --primary-900: 109 35 17;
    --primary-950: 70 23 11;
}

/* ===== Body / global ===== */
body, .fi-body {
    font-family: var(--hk-label) !important;
    background: var(--hk-cream) !important;
    color: var(--hk-ink);
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--hk-coral-100); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D8D1C7; border-radius: 999px; border: 3px solid var(--hk-cream); }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Headings: Playfair Display ===== */
h1, h2, h3, .fi-header-heading, .fi-section-header-heading {
    font-family: var(--hk-display) !important;
    letter-spacing: -0.01em !important;
    color: var(--hk-ink) !important;
    font-weight: 700 !important;
}

/* Labels Montserrat uppercase with wide tracking (Filament eyebrows/section headings) */
.fi-section-header-description,
.fi-fo-field-wrp-label,
.fi-input-wrp-label label {
    font-family: var(--hk-label);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
    font-size: 10.5px;
    color: var(--hk-ink-soft) !important;
}

/* ===== Sidebar (left nav) ===== */
.fi-sidebar {
    background: var(--hk-white) !important;
    border-right: 1px solid var(--hk-border) !important;
}
.fi-sidebar-header {
    background: var(--hk-white) !important;
    border-bottom: 1px solid var(--hk-border);
    padding: 26px 24px 22px !important;
}
.fi-sidebar-nav-group-label {
    font-family: var(--hk-label) !important;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    font-size: 10px;
    color: var(--hk-ink-faint) !important;
    padding: 18px 24px 10px !important;
}
.fi-sidebar-item button, .fi-sidebar-item a {
    border-radius: 0 !important;
    padding: 11px 18px 11px 24px !important;
    color: var(--hk-ink-soft) !important;
    transition: background .2s ease, color .2s ease !important;
    position: relative;
}
.fi-sidebar-item button:hover, .fi-sidebar-item a:hover {
    background: var(--hk-cream-2) !important;
    color: var(--hk-ink) !important;
}
.fi-sidebar-item-active button,
.fi-sidebar-item-active a,
.fi-sidebar-item.fi-active button,
.fi-sidebar-item-active > a {
    background: var(--hk-cream) !important;
    color: var(--hk-ink) !important;
}
.fi-sidebar-item-active button::before,
.fi-sidebar-item-active a::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--hk-coral);
    border-radius: 0 3px 3px 0;
}
.fi-sidebar-item-label {
    font-family: var(--hk-label) !important;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-weight: 500;
    font-size: 11.5px !important;
}
.fi-sidebar-item-active .fi-sidebar-item-label { font-weight: 600 !important; }
.fi-sidebar-item-active .fi-sidebar-item-icon { color: var(--hk-coral) !important; }

/* Badge on sidebar */
.fi-sidebar-item .fi-badge {
    background: var(--hk-cream-3) !important;
    color: var(--hk-ink-soft) !important;
    border-radius: 999px;
    min-width: 20px; height: 20px; padding: 0 6px;
    font-size: 10px; font-weight: 600;
    border: none !important;
}
.fi-sidebar-item-active .fi-badge {
    background: var(--hk-coral) !important;
    color: #fff !important;
}

/* ===== Topbar ===== */
.fi-topbar {
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hk-border) !important;
    padding: 14px 32px !important;
}

/* Optional top dark strip (announce style) injected via render hook */
.haiko-topstrip {
    background: var(--hk-dark);
    color: #fff;
    padding: 9px 32px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--hk-label);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    font-weight: 600;
}
.haiko-topstrip .right { color: rgba(255,255,255,.6); }

/* ===== Cards / sections ===== */
.fi-section, .fi-wi {
    background: var(--hk-white) !important;
    border: 1px solid var(--hk-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(28,28,28,.04), 0 1px 1px rgba(28,28,28,.03) !important;
}

/* ===== Buttons (coral pill) ===== */
.fi-btn,
.fi-btn-color-primary,
.fi-ac-action {
    font-family: var(--hk-label) !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    border-radius: 999px !important;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 13px 22px !important;
}
.fi-btn-color-primary {
    background: var(--hk-coral) !important;
    color: #fff !important;
    border-color: var(--hk-coral) !important;
}
.fi-btn-color-primary:hover {
    background: var(--hk-coral-600) !important;
    box-shadow: 0 8px 22px rgba(232,96,58,.32) !important;
}

/* ===== Form inputs ===== */
.fi-input, .fi-select-input, .fi-fo-text-input, .fi-fo-textarea {
    background: var(--hk-white) !important;
    border: 1px solid var(--hk-border-input) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: var(--hk-ink) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.fi-input:focus, .fi-select-input:focus, .fi-fo-text-input:focus, .fi-fo-textarea:focus {
    border-color: var(--hk-coral) !important;
    box-shadow: 0 0 0 4px rgba(232,96,58,.12) !important;
    outline: none !important;
}

/* ===== Tables ===== */
.fi-ta-table thead th {
    font-family: var(--hk-label) !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
    font-size: 10px !important;
    color: var(--hk-ink-faint) !important;
    border-bottom: 1px solid var(--hk-border) !important;
    background: transparent !important;
}
.fi-ta-table tbody tr:hover { background: var(--hk-cream-2) !important; }
.fi-ta-table td { font-size: 14px !important; border-bottom: 1px solid var(--hk-border) !important; }

/* ===== Status badges → mapping to Haiko status colors ===== */
.fi-badge.fi-color-success {
    color: var(--hk-paid) !important;
    background: var(--hk-paid-bg) !important;
    border: none !important;
}
.fi-badge.fi-color-warning {
    color: var(--hk-pending) !important;
    background: var(--hk-pending-bg) !important;
    border: none !important;
}
.fi-badge {
    border-radius: 999px !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: 10px !important;
    padding: 5px 11px !important;
}

/* ===== KPI stat widget (Filament StatsOverviewWidget) ===== */
.fi-wi-stats-overview-stat {
    background: var(--hk-white) !important;
    border: 1px solid var(--hk-border) !important;
    border-radius: 16px !important;
    padding: 22px !important;
}
.fi-wi-stats-overview-stat-label {
    font-family: var(--hk-label) !important;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    font-size: 11px !important;
    color: var(--hk-coral) !important;
}
.fi-wi-stats-overview-stat-value {
    font-family: var(--hk-display) !important;
    font-weight: 800;
    font-size: 34px !important;
    color: var(--hk-ink) !important;
    margin-top: 14px !important;
    letter-spacing: -.01em;
}
.fi-wi-stats-overview-stat-description {
    font-family: var(--hk-label);
    font-size: 11.5px !important;
    color: var(--hk-ink-faint) !important;
}

/* ===== Page header ===== */
.fi-header {
    background: transparent !important;
    border-bottom: none !important;
    padding-bottom: 32px !important;
}
.fi-header-heading {
    font-family: var(--hk-display) !important;
    font-weight: 800 !important;
    font-size: 40px !important;
    letter-spacing: -0.01em !important;
}

/* ===== Brand logo size ===== */
.fi-logo, .fi-sidebar-header img { max-width: 156px; height: auto; }

/* ===== Eyebrow style (above page heading) ===== */
.fi-header-subheading::before {
    content: "— ";
    color: var(--hk-coral);
}
.fi-header-subheading {
    font-family: var(--hk-label) !important;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    color: var(--hk-coral) !important;
    font-size: 11px;
}

/* ===== Auth pages (login / register) ===== */
.fi-simple-layout {
    background: var(--hk-cream) !important;
}
.fi-simple-main {
    background: var(--hk-white) !important;
    border: 1px solid var(--hk-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 8px rgba(28,28,28,.05), 0 16px 40px rgba(28,28,28,.10) !important;
    padding: 40px !important;
}