@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

/* ============================================================
   KTO Digital - CRM brand theme
   Force-apply dark theme + brand colors
   ============================================================ */

:root {
    /* Brand colors - lime yellow accent */
    --kto-accent: #f5ff1a;
    --kto-accent-dark: #c2cc00;
    --kto-accent-light: #faffcc;

    /* Dark theme grays - override Tailwind defaults */
    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    --gray-950: #09090b;

    /* Primary = KTO lime */
    --primary-50: #faffcc;
    --primary-100: #f2ff8a;
    --primary-200: #e6ff4d;
    --primary-300: #dcf500;
    --primary-400: #c2d800;
    --primary-500: #f5ff1a;
    --primary-600: #c2cc00;
    --primary-700: #8c9400;
    --primary-800: #555900;
    --primary-900: #2a2c00;
    --primary-950: #141500;

    /* Font */
    --font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body, .fi-body {
    font-family: var(--font-family) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

/* Ensure dark mode background works even without .dark class
   by overriding both light and dark variants */
.fi-body,
.fi-main-ctn,
.fi-simple-main,
.fi-topbar nav,
.fi-sidebar {
    background-color: var(--gray-950) !important;
    color: var(--gray-50) !important;
}

/* Topbar */
.fi-topbar nav {
    border-bottom-color: var(--gray-800) !important;
}

/* Sidebar */
.fi-sidebar {
    border-right-color: var(--gray-800) !important;
    background-color: var(--gray-950) !important;
}
.fi-sidebar-item-label {
    color: var(--gray-400) !important;
}
.fi-sidebar-icon svg {
    color: var(--gray-500) !important;
}
.fi-sidebar-item a:hover {
    background-color: var(--gray-900) !important;
}
.fi-sidebar-item-active a {
    background-color: var(--primary-500) !important;
    color: #000000 !important;
}
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #000000 !important;
    font-weight: 600 !important;
}
.fi-sidebar-item-active .fi-sidebar-icon svg {
    color: #000000 !important;
}

/* Cards, tables, sections */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-modal-window,
.fi-in-entry-wrp,
.fi-fo-field-wrp,
.fi-dropdown-panel,
.fi-tabs {
    background-color: var(--gray-900) !important;
    border-color: var(--gray-800) !important;
    color: var(--gray-100) !important;
}

/* Table */
.fi-ta-row:hover,
.fi-ta-row:hover .fi-ta-cell,
.fi-ta-row:hover .fi-ta-text {
    background-color: var(--gray-800) !important;
}
.fi-ta-text {
    color: var(--gray-100) !important;
}
.fi-ta-header {
    background-color: var(--gray-900) !important;
}
.fi-ta-header-cell-label {
    color: var(--gray-400) !important;
    font-weight: 500 !important;
}

/* Inputs */
.fi-input-wrp,
.fi-select-input,
input, textarea, select {
    background-color: var(--gray-900) !important;
    border-color: var(--gray-700) !important;
    color: var(--gray-100) !important;
}
.fi-input-wrp:focus-within,
input:focus, textarea:focus, select:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(245, 255, 26, 0.15) !important;
    outline: none !important;
}
.fi-fo-field-wrp-label span,
.fi-fo-field-wrp-label {
    color: var(--gray-300) !important;
}

/* Buttons */
.fi-btn-color-primary,
button.fi-btn.fi-color-primary {
    background-color: var(--primary-500) !important;
    color: #000000 !important;
    font-weight: 600 !important;
    border: none !important;
}
.fi-btn-color-primary:hover {
    background-color: var(--primary-600) !important;
    color: #000000 !important;
}

/* Badges */
.fi-badge.fi-color-primary {
    background-color: var(--primary-500) !important;
    color: #000000 !important;
    font-weight: 600 !important;
}
.fi-badge.fi-color-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.fi-badge.fi-color-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
.fi-badge.fi-color-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.fi-badge.fi-color-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
.fi-badge.fi-color-gray {
    background-color: var(--gray-800) !important;
    color: var(--gray-400) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.fi-header-heading {
    color: var(--gray-50) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
.fi-header-subheading,
.fi-section-header-description {
    color: var(--gray-400) !important;
}

/* Text color overrides */
.text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900, .text-gray-950,
.text-zinc-600, .text-zinc-700, .text-zinc-800, .text-zinc-900, .text-zinc-950 {
    color: var(--gray-100) !important;
}
.text-gray-400, .text-gray-500,
.text-zinc-400, .text-zinc-500 {
    color: var(--gray-400) !important;
}
.bg-white, .bg-gray-50, .bg-gray-100 {
    background-color: var(--gray-900) !important;
}
.bg-gray-200, .bg-gray-300 {
    background-color: var(--gray-800) !important;
}
.border-gray-200, .border-gray-300, .border-gray-400 {
    border-color: var(--gray-800) !important;
}
.ring-gray-950\/5 {
    --tw-ring-color: var(--gray-800) !important;
}

/* Simple auth page */
.fi-simple-main {
    background-color: var(--gray-900) !important;
    border-color: var(--gray-800) !important;
}
.fi-simple-main h1,
.fi-simple-main h2 {
    color: var(--gray-50) !important;
}
.fi-auth-brand {
    color: var(--gray-50) !important;
}

/* Stats widgets */
.fi-wi-stats-overview-stat-value {
    color: var(--gray-50) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
.fi-wi-stats-overview-stat-label {
    color: var(--gray-400) !important;
}
.fi-wi-stats-overview-stat-description {
    color: var(--gray-500) !important;
}

/* Breadcrumbs */
.fi-breadcrumbs-item span {
    color: var(--gray-400) !important;
}
.fi-breadcrumbs-item-current span {
    color: var(--gray-100) !important;
}

/* Pagination */
.fi-pagination button {
    background-color: var(--gray-900) !important;
    border-color: var(--gray-700) !important;
    color: var(--gray-200) !important;
}
.fi-pagination button:hover {
    background-color: var(--gray-800) !important;
}
.fi-pagination {
    color: var(--gray-400) !important;
}

/* Logo */
.fi-logo {
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    letter-spacing: -0.03em !important;
    color: var(--gray-50) !important;
}

/* Tabs */
.fi-tabs-item {
    color: var(--gray-500) !important;
}
.fi-tabs-item-active {
    color: var(--primary-500) !important;
    border-bottom-color: var(--primary-500) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-950); }
::-webkit-scrollbar-thumb { background: var(--gray-800); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-700); }

/* Dividers */
hr, .border-t, .border-b, .border-l, .border-r {
    border-color: var(--gray-800) !important;
}

/* === Fix transparent selects / dropdowns === */
.filament-forms-select-component select,
.filament-forms-select-component .choices__inner,
.choices__inner,
.choices__list,
.choices__list--dropdown,
.choices__list[aria-expanded],
.choices__item,
.choices__item--choice,
.choices__item--selectable,
.choices__item--disabled,
.choices__item--choice.choices__item--selectable.is-highlighted,
.filament-tables-table select,
.fi-fo-select select,
.fi-fo-select .choices__inner,
.fi-fo-select .choices__list,
.fi-fo-select .choices__item,
.fi-fo-select .choices__list--dropdown,
.fi-fo-select .choices__list[aria-expanded] {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(229, 231, 235) !important;
    border-color: rgb(75, 85, 99) !important;
    opacity: 1 !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded],
.fi-fo-select .choices__list--dropdown,
.fi-fo-select .choices__list[aria-expanded] {
    background-color: rgb(17, 24, 39) !important;
    border: 1px solid rgb(75, 85, 99) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.choices__item--choice.choices__item--selectable.is-highlighted,
.fi-fo-select .choices__item--choice.choices__item--selectable.is-highlighted {
    background-color: rgb(55, 65, 81) !important;
    color: #d8ff00 !important;
}

.choices__item--choice,
.fi-fo-select .choices__item--choice {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(229, 231, 235) !important;
}

.choices__item--choice:hover,
.fi-fo-select .choices__item--choice:hover {
    background-color: rgb(55, 65, 81) !important;
}

/* Selected item in select */
.choices__item--selectable.is-selected,
.fi-fo-select .choices__item--selectable.is-selected {
    background-color: rgba(216, 255, 0, 0.15) !important;
    color: #d8ff00 !important;
}

/* Native select fallback */
select,
.fi-select,
.fi-fo-select select {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(229, 231, 235) !important;
    border-color: rgb(75, 85, 99) !important;
    opacity: 1 !important;
}

select option {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(229, 231, 235) !important;
}