/* ===== UI font — driven by --ui-font-family from theme settings ===== */
html {
    font-family: var(--ui-font-family, "Cairo", sans-serif) !important;
}

body,
body :where(
    nav,
    aside,
    header,
    footer,
    main,
    section,
    article,
    div,
    span,
    p,
    a,
    li,
    ul,
    ol,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    input,
    select,
    textarea,
    label,
    option,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td,
    small,
    strong,
    em,
    b,
    u,
    figcaption,
    dt,
    dd,
    pre,
    blockquote
):not(i):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon) {
    font-family: var(--ui-font-family, "Cairo", sans-serif) !important;
}

.font-sans,
.font-serif,
.font-mono,
.font-normal,
.font-medium,
.font-semibold,
.font-bold,
.font-extrabold,
.font-light,
.font-thin,
[class*="text-xs"],
[class*="text-sm"],
[class*="text-base"],
[class*="text-lg"],
[class*="text-xl"],
[class*="text-2xl"],
[class*="text-3xl"] {
    font-family: var(--ui-font-family, "Cairo", sans-serif) !important;
}

#sidebar,
#sidebar *:not(i):not(svg),
nav,
nav *:not(i):not(svg),
#main-body,
#main-body *:not(i):not(svg),
#main-content,
#main-content *:not(i):not(svg),
.landing-page,
.landing-page *:not(i):not(svg),
[wire\:id],
[wire\:id] *:not(i):not(svg) {
    font-family: var(--ui-font-family, "Cairo", sans-serif) !important;
}

/* Font Awesome — keep icon glyphs */
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

/*
 * Dashboard dark mode fallbacks.
 */
html.dark #main-content .bg-white {
    background-color: #1f2937 !important;
}

html.dark #main-content .border-gray-100,
html.dark #main-content .border-gray-200 {
    border-color: #374151 !important;
}

html.dark #main-content .divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
    border-color: #374151 !important;
}

html.dark #main-content .text-gray-900,
html.dark #main-content .text-gray-800,
html.dark #main-content .text-gray-700 {
    color: #f9fafb !important;
}

html.dark #main-content .text-gray-600 {
    color: #d1d5db !important;
}

html.dark #main-content .text-gray-400 {
    color: #9ca3af !important;
}

html.dark #main-content .text-gray-300 {
    color: #6b7280 !important;
}

html.dark #main-content .text-emerald-600 {
    color: #34d399 !important;
}

html.dark #main-content .text-amber-600 {
    color: #fbbf24 !important;
}

html.dark #main-content .shadow-sm {
    box-shadow: none !important;
}

html.dark #main-content .dashboard-header {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark #main-content .dashboard-header .dashboard-date {
    color: #9ca3af !important;
}

/*
 * Top nav & sidebar — dark mode for header action / icon buttons.
 * Tailwind dark:bg-* can lose to bg-skin-base / bg-white on some builds; force consistent nav chrome.
 */
html.dark nav .nav-action-btn,
html.dark nav a.nav-action-btn,
html.dark nav button.nav-action-btn,
html.dark nav .nav-status-btn,
html.dark nav a.nav-status-btn,
html.dark nav .nav-icon-btn,
html.dark nav button.nav-icon-btn,
.dark nav .nav-action-btn,
.dark nav a.nav-action-btn,
.dark nav button.nav-action-btn,
.dark nav .nav-status-btn,
.dark nav a.nav-status-btn,
.dark nav .nav-icon-btn,
.dark nav button.nav-icon-btn {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

html.dark nav .nav-action-btn:hover,
html.dark nav a.nav-action-btn:hover,
html.dark nav button.nav-action-btn:hover,
html.dark nav .nav-status-btn:hover,
html.dark nav a.nav-status-btn:hover,
html.dark nav .nav-icon-btn:hover,
html.dark nav button.nav-icon-btn:hover,
.dark nav .nav-action-btn:hover,
.dark nav a.nav-action-btn:hover,
.dark nav button.nav-action-btn:hover,
.dark nav .nav-status-btn:hover,
.dark nav a.nav-status-btn:hover,
.dark nav .nav-icon-btn:hover,
.dark nav button.nav-icon-btn:hover {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

html.dark nav .bg-white,
html.dark nav a.bg-white,
html.dark nav button.bg-white,
.dark nav .bg-white,
.dark nav a.bg-white,
.dark nav button.bg-white {
    background-color: #374151 !important;
}

html.dark nav .bg-skin-base,
html.dark nav a.bg-skin-base,
html.dark nav button.bg-skin-base,
.dark nav .bg-skin-base,
.dark nav a.bg-skin-base,
.dark nav button.bg-skin-base {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

html.dark nav .bg-gray-100,
html.dark nav button.bg-gray-100,
.dark nav .bg-gray-100,
.dark nav button.bg-gray-100 {
    background-color: #374151 !important;
}

html.dark #sidebar .app-branch-btn,
html.dark #sidebar button.app-branch-btn,
.dark #sidebar .app-branch-btn,
.dark #sidebar button.app-branch-btn {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

html.dark #sidebar .sidebar-branch-strip,
.dark #sidebar .sidebar-branch-strip {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark #sidebar .bg-white,
html.dark #sidebar button.bg-white {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
}

html.dark #sidebar .text-skin-base {
    color: #e5e7eb !important;
}

/* Dashboard panels & stat cards — dark mode */
html.dark .dash-stat-card,
.dark .dash-stat-card,
html.dark .dash-panel,
.dark .dash-panel {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    border-color: #374151 !important;
}

html.dark .dash-hero,
.dark .dash-hero {
    background: linear-gradient(135deg, rgba(var(--color-base), 0.18) 0%, rgba(31, 41, 55, 0.95) 55%, rgba(17, 24, 39, 0.98) 100%) !important;
    border-color: rgba(75, 85, 99, 0.8) !important;
}

html.dark .dashboard-date,
.dark .dashboard-date {
    background-color: rgba(31, 41, 55, 0.85) !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}