@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

/**
 * MARKOM Dashboard Progress — warm editorial dashboard.
 * Scope: light mode + body.markom-dashboard-progress saja.
 * Tidak menyentuh data, perilaku widget, maupun running text.
 */

html:not(.dark) body.markom-dashboard-progress {
    --mdp-canvas: #f3f0e9;
    --mdp-sidebar: #ebe8e3;
    --mdp-surface: #fffdf8;
    --mdp-surface-soft: #f8f5ee;
    --mdp-yellow: #f6c928;
    --mdp-yellow-soft: #fff4bf;
    --mdp-ink: #252525;
    --mdp-muted: #706d66;
    --mdp-line: #ded9ce;
    --mdp-line-strong: #cbc4b7;
    --mdp-shadow: 0 8px 24px rgb(70 61 43 / 0.06);
    --mdp-radius: 1rem;
}

/*
 * Tipografi Dashboard Progress — satu standar untuk semua widget.
 * Tanpa :where() agar spesifisitas cukup mengalahkan CSS widget lama.
 */
html:not(.dark) body.markom-dashboard-progress .fi-topbar,
html:not(.dark) body.markom-dashboard-progress .fi-sidebar,
html:not(.dark) body.markom-dashboard-progress .fi-main,
html:not(.dark) body.markom-dashboard-progress .fi-modal,
html:not(.dark) body.markom-dashboard-progress .fi-dropdown-panel {
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Judul halaman / widget — Outfit 700, huruf besar semua */
html:not(.dark) body.markom-dashboard-progress .fi-header-heading,
html:not(.dark) body.markom-dashboard-progress .fi-section-header-heading,
html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-header-heading,
html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__title,
html:not(.dark) body.markom-dashboard-progress .markom-crm-entry-gap__title,
html:not(.dark) body.markom-dashboard-progress .markom-fu-leaderboard__title,
html:not(.dark) body.markom-dashboard-progress .markom-share-board__section-title,
html:not(.dark) body.markom-dashboard-progress .markom-fn__title,
html:not(.dark) body.markom-dashboard-progress .markom-dt__title,
html:not(.dark) body.markom-dashboard-progress .markom-ul__title,
html:not(.dark) body.markom-dashboard-progress .fi-wi-marketing-funnel .markom-fn__title,
html:not(.dark) body.markom-dashboard-progress .fi-wi-marketing-tele-share .markom-dt__title,
html:not(.dark) body.markom-dashboard-progress .fi-wi-marketing-updated-leads .markom-ul__title,
html:not(.dark) body.markom-dashboard-progress .markom-activity-funnel-composition .markom-share-filter__title {
    font-family: "Outfit", "Work Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    color: var(--mdp-ink) !important;
    text-transform: uppercase !important;
}

/* Judul filter / subbagian — huruf besar, ukuran tetap dari CSS widget */
html:not(.dark) body.markom-dashboard-progress .markom-share-filter__title,
html:not(.dark) body.markom-dashboard-progress .markom-board-composition__title,
html:not(.dark) body.markom-dashboard-progress .markom-crm-entry-gap__table-title {
    text-transform: uppercase !important;
}

/* Subjudul widget (grafik / bagian dalam) — sedikit lebih kecil, tetap Outfit */
html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__subtitle,
html:not(.dark) body.markom-dashboard-progress .markom-crm-entry-gap__table-title,
html:not(.dark) body.markom-dashboard-progress .markom-board-composition__title,
html:not(.dark) body.markom-dashboard-progress .markom-fn__card-title {
    font-family: "Outfit", "Work Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--mdp-ink) !important;
}

/* Angka besar di kartu — Outfit 700, ukuran sama di semua widget */
html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat-value,
html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__stat-value,
html:not(.dark) body.markom-dashboard-progress .markom-crm-entry-gap__gap-value,
html:not(.dark) body.markom-dashboard-progress .markom-metric-card__value,
html:not(.dark) body.markom-dashboard-progress .markom-board-header__total,
html:not(.dark) body.markom-dashboard-progress .markom-af-row__total,
html:not(.dark) body.markom-dashboard-progress .markom-fn__donut-value,
html:not(.dark) body.markom-dashboard-progress .fi-wi-marketing-tele-share .markom-dt__hero-num,
html:not(.dark) body.markom-dashboard-progress .fi-wi-marketing-updated-leads .markom-ul__hero-num {
    font-family: "Outfit", "Work Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.05 !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__stat-value--sm {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
}

/* Label kartu — Work Sans, seragam (jangan campur casing) */
html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__stat-label,
html:not(.dark) body.markom-dashboard-progress .markom-metric-card__label,
html:not(.dark) body.markom-dashboard-progress .markom-crm-entry-gap__gap-label,
html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat-label {
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--mdp-muted) !important;
}

/* Kanvas, topbar, sidebar */
html:not(.dark) body.markom-dashboard-progress .fi-main,
html:not(.dark) body.markom-dashboard-progress .fi-main-ctn,
html:not(.dark) body.markom-dashboard-progress .fi-page {
    background: var(--mdp-canvas) !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-topbar nav {
    background: rgb(255 253 248 / 0.94) !important;
    border-bottom: 1px solid var(--mdp-line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}

html:not(.dark) body.markom-dashboard-progress .fi-sidebar {
    background: var(--mdp-sidebar) !important;
    border-right: 1px solid var(--mdp-line) !important;
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--mdp-line);
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-sidebar-item-btn {
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    color: #514f4a;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

html:not(.dark) body.markom-dashboard-progress .fi-sidebar-item-btn:hover {
    background: rgb(255 253 248 / 0.72) !important;
    border-color: var(--mdp-line);
    color: var(--mdp-ink);
}

/* Aktif = Homies Lab: hitam + teks/ikon putih (class Filament 5: -btn) */
html:not(.dark) body.markom-dashboard-progress .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--mdp-ink) !important;
    border-color: var(--mdp-ink) !important;
    border-radius: 0.9rem !important;
    color: #fff !important;
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html:not(.dark) body.markom-dashboard-progress .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
html:not(.dark) body.markom-dashboard-progress .fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    color: #fff !important;
    stroke: currentColor !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-sidebar-group-label {
    color: #77736b;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Judul halaman */
html:not(.dark) body.markom-dashboard-progress .fi-header {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 1.4rem 1.5rem;
    overflow: hidden;
    border: 1px solid var(--mdp-line);
    border-radius: var(--mdp-radius);
    background:
        radial-gradient(circle at 92% 10%, rgb(246 201 40 / 0.25), transparent 30%),
        linear-gradient(125deg, var(--mdp-surface) 0%, #fff9df 100%);
    box-shadow: var(--mdp-shadow);
}

html:not(.dark) body.markom-dashboard-progress .fi-header::after {
    position: absolute;
    top: -3.75rem;
    right: -2.25rem;
    width: 10rem;
    height: 10rem;
    border: 1.25rem solid rgb(246 201 40 / 0.42);
    border-radius: 9999px;
    content: "";
    pointer-events: none;
}

html:not(.dark) body.markom-dashboard-progress .fi-header-heading {
    position: relative;
    z-index: 1;
    color: var(--mdp-ink) !important;
    font-size: clamp(1.6rem, 2.2vw, 2.25rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em;
}

html:not(.dark) body.markom-dashboard-progress .fi-header-subheading {
    position: relative;
    z-index: 1;
    color: var(--mdp-muted) !important;
}

/* Kartu statistik Filament */
html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview {
    gap: 0.7rem !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat {
    position: relative;
    min-height: 8.2rem;
    overflow: hidden;
    border: 1px solid var(--mdp-line) !important;
    border-radius: var(--mdp-radius) !important;
    background: var(--mdp-surface) !important;
    box-shadow: var(--mdp-shadow) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat::before {
    position: absolute;
    inset: 0 0 auto;
    height: 0.28rem;
    background: var(--mdp-yellow);
    content: "";
}

html:not(.dark) body.markom-dashboard-progress a.fi-wi-stats-overview-stat:hover {
    border-color: var(--mdp-line-strong) !important;
    box-shadow: 0 12px 28px rgb(70 61 43 / 0.1) !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat-label {
    color: var(--mdp-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat-value {
    color: var(--mdp-ink) !important;
    font-size: clamp(1.55rem, 2vw, 2.15rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em;
}

html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat-description {
    font-size: 0.75rem !important;
    font-weight: 500;
}

/* Panel dan widget umum */
html:not(.dark) body.markom-dashboard-progress :where(
    .fi-section,
    .fi-ta-ctn,
    .markom-marketing-board,
    .markom-fu-leaderboard__table-wrap,
    .markom-ue,
    .markom-ac,
    .markom-if,
    .markom-crm-gap
) {
    border-color: var(--mdp-line) !important;
    border-radius: var(--mdp-radius) !important;
    background: var(--mdp-surface) !important;
    box-shadow: var(--mdp-shadow) !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-section-header {
    border-bottom: 1px solid var(--mdp-line);
    background: linear-gradient(90deg, var(--mdp-surface) 0%, var(--mdp-surface-soft) 100%);
}

html:not(.dark) body.markom-dashboard-progress .fi-section-header-heading,
html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-header-heading,
html:not(.dark) body.markom-dashboard-progress .markom-share-board__section-title,
html:not(.dark) body.markom-dashboard-progress .markom-fu-leaderboard__title {
    color: var(--mdp-ink) !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .fi-section-header-description,
    .fi-wi-stats-overview-header-description,
    .markom-share-board__note,
    .markom-fu-leaderboard__intro
) {
    color: var(--mdp-muted) !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-ad-performance {
    --markom-ap-bg: var(--mdp-canvas);
    --markom-ap-surface: var(--mdp-surface);
    --markom-ap-surface-muted: var(--mdp-surface-soft);
    --markom-ap-border: var(--mdp-line);
    --markom-ap-input-border: var(--mdp-line-strong);
    --markom-ap-text: var(--mdp-ink);
    --markom-ap-text-strong: var(--mdp-ink);
    --markom-ap-text-muted: var(--mdp-muted);
}

html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__title,
html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__subtitle,
html:not(.dark) body.markom-dashboard-progress .markom-crm-entry-gap__title {
    color: var(--mdp-ink) !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .markom-ad-performance__intro,
    .markom-crm-entry-gap__intro,
    .markom-crm-entry-gap__foot
) {
    color: var(--mdp-muted) !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .markom-ad-performance__filter,
    .markom-share-filter,
    .markom-crm-entry-gap__panel
) {
    border-color: var(--mdp-line) !important;
    border-radius: 0.9rem !important;
    background: var(--mdp-surface-soft) !important;
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__stats {
    gap: 0.65rem;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .markom-ad-performance__stat,
    .markom-metric-card,
    .markom-crm-entry-gap__summary,
    .markom-af-row
) {
    border: 1px solid var(--mdp-line) !important;
    border-radius: 0.85rem !important;
    background: var(--mdp-surface) !important;
    color: var(--mdp-ink) !important;
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__stat--primary {
    border-color: #ebcd5f !important;
    background: var(--mdp-yellow-soft) !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__stat--success {
    border-color: var(--mdp-line) !important;
    background: var(--mdp-surface) !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-ad-performance__stat-value,
html:not(.dark) body.markom-dashboard-progress .markom-metric-card__value,
html:not(.dark) body.markom-dashboard-progress .markom-crm-entry-gap__gap-value {
    color: var(--mdp-ink) !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .markom-ad-performance__stat-label,
    .markom-metric-card__label,
    .markom-metric-card__sub
) {
    color: var(--mdp-muted) !important;
}

/* Filter dan tombol: bentuk pil seperti referensi */
html:not(.dark) body.markom-dashboard-progress :where(
    .fi-input-wrp,
    .fi-select-input,
    .fi-fo-date-time-picker-display
) {
    border-color: var(--mdp-line) !important;
    border-radius: 9999px !important;
    background: var(--mdp-surface-soft) !important;
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-btn {
    min-height: 2.5rem;
    border-radius: 9999px !important;
    font-weight: 600;
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress .fi-btn-color-primary {
    background: var(--mdp-ink) !important;
    color: #fff !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .markom-share-filter__btn,
    .markom-ad-performance__preset,
    .markom-ad-performance__reset,
    .markom-fn__reset
) {
    min-height: 2.25rem;
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--mdp-line-strong) !important;
    border-radius: 9999px !important;
    background: var(--mdp-surface) !important;
    color: #57534c !important;
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    box-shadow: none !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .markom-share-filter__btn--active,
    .markom-ad-performance__preset--active
) {
    border-color: var(--mdp-ink) !important;
    background: var(--mdp-ink) !important;
    color: #fff !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .markom-share-filter__date-display,
    .markom-share-filter__date-visible
) {
    border-color: var(--mdp-line-strong) !important;
    border-radius: 9999px !important;
    background: var(--mdp-surface) !important;
    color: var(--mdp-ink) !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .fi-btn,
    .fi-sidebar-item-btn,
    a,
    button,
    input,
    select
):focus-visible {
    outline: 3px solid rgb(246 201 40 / 0.72) !important;
    outline-offset: 2px;
}

/* Tabel */
html:not(.dark) body.markom-dashboard-progress :where(
    .fi-ta-header,
    .fi-ta-header-toolbar,
    .fi-ta-table thead,
    .markom-fu-leaderboard__table thead
) {
    background: var(--mdp-surface-soft) !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .fi-ta-header-cell,
    .markom-fu-leaderboard__table th
) {
    color: #6d6961 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .fi-ta-row,
    .markom-fu-leaderboard__table td
) {
    border-color: #ebe6dc !important;
}

html:not(.dark) body.markom-dashboard-progress :where(
    .fi-ta-row:hover,
    .markom-fu-leaderboard__table tbody tr:hover
) {
    background: #fff9df !important;
}

/* Board Share: hitam + kuning seperti referensi, isi/data tetap sama. */
html:not(.dark) body.markom-dashboard-progress .markom-board-header {
    color: #fff;
    background: var(--mdp-ink) !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-board-grid {
    background: var(--mdp-surface-soft) !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-metric-card:nth-child(3n + 1) {
    background: var(--mdp-yellow-soft) !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-metric-card:nth-child(3n + 2) {
    background: var(--mdp-surface) !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-metric-card:nth-child(3n) {
    background: #e8e6e1 !important;
}

html:not(.dark) body.markom-dashboard-progress .markom-board-header__badge {
    color: var(--mdp-ink) !important;
    background: var(--mdp-yellow) !important;
}

/* Chart dan warna dekoratif mendapat permukaan hangat tanpa mengubah datanya. */
html:not(.dark) body.markom-dashboard-progress canvas {
    filter: saturate(0.82) contrast(0.96);
}

html:not(.dark) body.markom-dashboard-progress .fi-badge {
    border-radius: 9999px;
}

@media (max-width: 768px) {
    html:not(.dark) body.markom-dashboard-progress .fi-header {
        padding: 1.1rem;
    }

    html:not(.dark) body.markom-dashboard-progress .fi-header::after {
        top: -4.5rem;
        right: -4.5rem;
    }

    html:not(.dark) body.markom-dashboard-progress .fi-wi-stats-overview-stat {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.dark) body.markom-dashboard-progress *,
    html:not(.dark) body.markom-dashboard-progress *::before,
    html:not(.dark) body.markom-dashboard-progress *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}