/*
 * PalaMemo – Filament Admin Panel Theme
 *
 * ── Dark mode (html.dark) ──────────────────────────────────
 *   kSurface        #0E1A2A  – główne tło, topbar, AppBar
 *   kSurface2       #11233A  – sidebar, formularze, dialogi
 *   kBlueDeep       #1F3B5C  – kolor startowy gradientu kart
 *   kBluePastel     #7EC8F3  – akcent główny
 *   kBluePastel2    #BFE8FF  – akcent jasny, aktywne ikony
 *   kBluePremium    #1E3A5F  – tło badge premium
 *
 *   Gradient kart: linear-gradient(135deg, #1F3B5C 0%, rgba(126,200,243,0.12) 100%)
 *   Border kart:   1px solid rgba(191,232,255,0.18)
 *   Shadow kart:   0 8px 12px rgba(0,0,0,0.38)
 *
 * ── Light mode (html:not(.dark)) ──────────────────────────
 *   bg-main         #F0F7FD  – główne tło (bardzo jasny niebieski)
 *   bg-card         #FFFFFF  – karty i sekcje
 *   sidebar         #0E1A2A  – ciemny sidebar (jak AppBar mobilny)
 *   topbar          #FFFFFF
 *   tekst           #0E1A2A  – kSurface jako kolor tekstu
 *   tekst-muted     rgba(14,26,42,0.60)
 *   border          rgba(31,59,92,0.14)
 *   akcent          #7EC8F3  (bez zmian)
 */

/* ──────────────────────────────────────────────────────────
   1. Wymuszenie dark mode
   ────────────────────────────────────────────────────────── */

html, html.dark {
    color-scheme: dark;
}

/* ──────────────────────────────────────────────────────────
   2. Tło główne panelu — kSurface
   ────────────────────────────────────────────────────────── */

.fi-body,
.fi-body.antialiased,
body.fi-body {
    background-color: #0E1A2A !important;
    color: #ffffff !important;
}

.fi-main,
.fi-main-ctn,
.fi-main > .fi-main-ctn {
    background-color: #0E1A2A !important;
}

/* ──────────────────────────────────────────────────────────
   3. Sidebar — kSurface2 + border
   ────────────────────────────────────────────────────────── */

.fi-sidebar,
.fi-sidebar-nav,
.fi-compact-sidebar,
aside.fi-sidebar {
    background-color: #11233A !important;
    border-right: 1px solid rgba(191, 232, 255, 0.15) !important;
}

/* Pasek z logo — kSurface (jak strona główna) */
.fi-sidebar-header,
.fi-sidebar header {
    background-color: #0E1A2A !important;
    border-bottom: 1px solid rgba(191, 232, 255, 0.15) !important;
    padding: 1rem 1.25rem !important;
}

/* Aktywna pozycja nav */
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-active .fi-sidebar-item-label {
    color: #BFE8FF !important;
    font-weight: 600;
}

.fi-sidebar-item-label,
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.70) !important;
}

.fi-sidebar-item-active {
    background-color: rgba(126, 200, 243, 0.14) !important;
    border-radius: 10px !important;
}

.fi-sidebar-item:hover:not(.fi-sidebar-item-active) {
    background-color: rgba(126, 200, 243, 0.08) !important;
    border-radius: 10px !important;
}

/* Separator grup nawigacji */
.fi-sidebar-group {
    border-top: 1px solid rgba(191, 232, 255, 0.08) !important;
    margin-top: 0.25rem !important;
    padding-top: 0.25rem !important;
}

/* ──────────────────────────────────────────────────────────
   4. Topbar — kSurface
   ────────────────────────────────────────────────────────── */

header.fi-topbar,
.fi-topbar,
.fi-topbar-ctn {
    background-color: #0E1A2A !important;
    border-bottom: 1px solid rgba(191, 232, 255, 0.15) !important;
    box-shadow: none !important;
}

.fi-topbar-breadcrumbs-ctn {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* ──────────────────────────────────────────────────────────
   5. Sekcje / Karty — gradient jak w aplikacji mobilnej
   ────────────────────────────────────────────────────────── */

.fi-section,
.fi-section-content,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-account {
    background: linear-gradient(135deg, #1F3B5C 0%, rgba(126, 200, 243, 0.10) 100%) !important;
    border: 1px solid rgba(191, 232, 255, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.38) !important;
}

.fi-section-header {
    border-bottom: 1px solid rgba(191, 232, 255, 0.15) !important;
    border-radius: 20px 20px 0 0 !important;
}

.fi-section-header-heading,
.fi-section-header-label,
h3.fi-section-header-heading {
    color: #ffffff !important;
    font-weight: 700;
}

/* Widget statystyk — gradient kart */
.fi-wi-stats-overview-stat {
    border-radius: 20px !important;
}

/* ──────────────────────────────────────────────────────────
   6. Tabele
   ────────────────────────────────────────────────────────── */

.fi-ta-table,
.fi-ta-content,
table.fi-ta-table {
    background: transparent !important;
}

.fi-ta-header,
.fi-ta-filters,
.fi-ta-footer {
    background: rgba(14, 26, 42, 0.45) !important;
    border-color: rgba(191, 232, 255, 0.12) !important;
}

/* Nagłówki kolumn */
.fi-ta-header-cell,
th.fi-ta-header-cell {
    background: rgba(14, 26, 42, 0.55) !important;
    color: #BFE8FF !important;
    border-bottom: 1px solid rgba(191, 232, 255, 0.18) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Wiersze */
.fi-ta-row td {
    background: transparent !important;
    border-bottom: 1px solid rgba(191, 232, 255, 0.08) !important;
    color: #ffffff !important;
}

.fi-ta-row:hover td {
    background: rgba(126, 200, 243, 0.10) !important;
}

.fi-ta-row-selected td {
    background: rgba(126, 200, 243, 0.18) !important;
    border-bottom-color: rgba(126, 200, 243, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────
   7. Formularze i inputy — kSurface2
   ────────────────────────────────────────────────────────── */

.fi-input,
input.fi-input,
textarea.fi-textarea,
select.fi-select,
.fi-fo-text-input,
.fi-fo-select,
.fi-select-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
    background-color: #11233A !important;
    border: 1px solid rgba(191, 232, 255, 0.20) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}

.fi-input:focus,
input.fi-input:focus,
textarea.fi-textarea:focus {
    border-color: #7EC8F3 !important;
    box-shadow: 0 0 0 2px rgba(126, 200, 243, 0.20) !important;
    outline: none !important;
}

/* Labels */
.fi-fo-field-wrp-label,
.fi-fo-label,
label.fi-fo-field-wrp-label {
    color: rgba(255, 255, 255, 0.54) !important;
    font-size: 13px;
    font-weight: 600;
}

/* Tekst pomocniczy */
.fi-fo-helper-text,
.fi-hint-text {
    color: rgba(255, 255, 255, 0.54) !important;
    font-size: 12px;
}

.fi-fo-cmp,
.fi-fo-cmp-content,
.fi-fo-field-wrp {
    background-color: transparent !important;
}

/* ──────────────────────────────────────────────────────────
   8. Przyciski
   ────────────────────────────────────────────────────────── */

/* Primary — kBluePastel */
.fi-btn-primary,
button.fi-btn[data-button-type="primary"],
.fi-btn.fi-color-primary {
    background-color: #7EC8F3 !important;
    color: #0E1A2A !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    border: none !important;
    transition: background-color 200ms ease !important;
}

.fi-btn-primary:hover,
button.fi-btn[data-button-type="primary"]:hover {
    background-color: #BFE8FF !important;
}

/* Secondary / Outlined */
.fi-btn-outlined,
.fi-btn.fi-color-secondary {
    border: 1px solid #7EC8F3 !important;
    color: #7EC8F3 !important;
    background: transparent !important;
    border-radius: 10px !important;
    transition: all 200ms ease !important;
}

.fi-btn-outlined:hover,
.fi-btn.fi-color-secondary:hover {
    background: rgba(126, 200, 243, 0.10) !important;
    border-color: #BFE8FF !important;
    color: #BFE8FF !important;
}

/* Danger */
.fi-btn.fi-color-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.50) !important;
    color: #fca5a5 !important;
    border-radius: 10px !important;
}

/* Warning */
.fi-btn.fi-color-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border: 1px solid rgba(255, 193, 7, 0.50) !important;
    color: #fcd34d !important;
    border-radius: 10px !important;
}

/* Akcje w tabeli */
.fi-ta-action button,
.fi-ac-action {
    color: rgba(255, 255, 255, 0.70) !important;
    transition: all 200ms ease !important;
}

.fi-ta-action button:hover,
.fi-ac-action:hover {
    color: #7EC8F3 !important;
    background-color: rgba(126, 200, 243, 0.12) !important;
    border-radius: 8px !important;
}

/* ──────────────────────────────────────────────────────────
   9. Badge'y / Pill — wzorzec z wizualizacja.md
   ────────────────────────────────────────────────────────── */

.fi-badge {
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
}

/* Premium — kBluePremium */
.fi-badge.fi-color-primary {
    background-color: #1E3A5F !important;
    border: 1px solid #7EC8F3 !important;
    color: #7EC8F3 !important;
}

.fi-badge.fi-color-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.50) !important;
    color: #6ee7b7 !important;
}

/* Pakiet grupowy — amber (wzorzec z wizualizacja.md) */
.fi-badge.fi-color-warning {
    background-color: rgba(255, 193, 7, 0.10) !important;
    border: 1px solid rgba(255, 193, 7, 0.50) !important;
    color: #FFC107 !important;
}

.fi-badge.fi-color-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.50) !important;
    color: #fca5a5 !important;
}

.fi-badge.fi-color-info {
    background-color: rgba(126, 200, 243, 0.12) !important;
    border: 1px solid rgba(126, 200, 243, 0.45) !important;
    color: #BFE8FF !important;
}

/* Free / inactive */
.fi-badge.fi-color-gray {
    background-color: rgba(31, 59, 92, 0.50) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    color: rgba(255, 255, 255, 0.54) !important;
}

/* ──────────────────────────────────────────────────────────
   10. Modal / Dialog — kSurface2
   ────────────────────────────────────────────────────────── */

.fi-modal-window,
.fi-modal-content {
    background-color: #11233A !important;
    border: 1px solid rgba(191, 232, 255, 0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

.fi-modal-header {
    border-bottom: 1px solid rgba(191, 232, 255, 0.15) !important;
}

.fi-modal-header-heading {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.fi-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.60) !important;
    backdrop-filter: blur(4px) !important;
}

/* ──────────────────────────────────────────────────────────
   11. Powiadomienia — kSurface2
   ────────────────────────────────────────────────────────── */

.fi-no-notification {
    background-color: #11233A !important;
    border: 1px solid rgba(191, 232, 255, 0.22) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.fi-no-notification-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.fi-no-notification-body {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* ──────────────────────────────────────────────────────────
   12. Ekran logowania — kSurface + kSurface2
   ────────────────────────────────────────────────────────── */

.fi-simple-layout,
.fi-simple-main {
    background-color: #0E1A2A !important;
    background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31, 59, 92, 0.70) 0%, transparent 70%) !important;
}

.fi-simple-page,
.fi-simple-layout .fi-simple-page {
    background: linear-gradient(135deg, #1F3B5C 0%, rgba(126, 200, 243, 0.08) 100%) !important;
    border: 1px solid rgba(191, 232, 255, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

/* ──────────────────────────────────────────────────────────
   13. Dropdown / Select — kSurface2
   ────────────────────────────────────────────────────────── */

.fi-dropdown-panel,
.choices__list.choices__list--dropdown,
[x-placement] .fi-dropdown-panel {
    background-color: #11233A !important;
    border: 1px solid rgba(191, 232, 255, 0.22) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item-label:hover {
    background-color: rgba(126, 200, 243, 0.12) !important;
    color: #BFE8FF !important;
    border-radius: 6px !important;
}

.fi-dropdown-list-item-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ──────────────────────────────────────────────────────────
   14. Breadcrumbs
   ────────────────────────────────────────────────────────── */

.fi-breadcrumbs-item,
.fi-breadcrumbs-item-label {
    color: rgba(255, 255, 255, 0.54) !important;
    font-size: 13px;
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ──────────────────────────────────────────────────────────
   15. Kolory tekstu — zgodne z wizualizacja.md
   ────────────────────────────────────────────────────────── */

.fi-body,
.fi-body * {
    --fi-color-gray-50:  #eaf4fc;
    --fi-color-gray-100: #d2e8f6;
    --fi-color-gray-200: #a6cfec;
    --fi-color-gray-300: #7ab5e2;
    --fi-color-gray-400: #4e9bd8;
    --fi-color-gray-500: #2f7cb8;
    --fi-color-gray-600: #1F3B5C;
    --fi-color-gray-700: #11233A;
    --fi-color-gray-800: #0E1A2A;
    --fi-color-gray-900: #080e18;
    --fi-color-gray-950: #040810;
}

/* Biały 70% — opisy, podtytuły */
.text-gray-500,
.text-gray-400 {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* Biały 70–95% — pomocnicze */
.text-gray-600,
.text-gray-700 {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* Biały — nagłówki */
.text-gray-900,
.text-gray-800 {
    color: #ffffff !important;
}

/* Placeholder */
::placeholder {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* ──────────────────────────────────────────────────────────
   16. Paginacja
   ────────────────────────────────────────────────────────── */

.fi-pagination-item a,
.fi-pagination-item button {
    background-color: rgba(31, 59, 92, 0.60) !important;
    border: 1px solid rgba(191, 232, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.70) !important;
    border-radius: 8px !important;
    transition: all 200ms ease !important;
}

.fi-pagination-item a:hover,
.fi-pagination-item button:hover {
    background-color: rgba(126, 200, 243, 0.12) !important;
    border-color: rgba(126, 200, 243, 0.40) !important;
    color: #BFE8FF !important;
}

.fi-pagination-item-active a,
.fi-pagination-item-active button {
    background-color: #7EC8F3 !important;
    color: #0E1A2A !important;
    border-color: #7EC8F3 !important;
    font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────────
   17. Avatar — kBlueDeep
   ────────────────────────────────────────────────────────── */

.fi-avatar,
.fi-user-avatar {
    background-color: #1F3B5C !important;
    border-radius: 50% !important;
    color: #BFE8FF !important;
    border: 1px solid rgba(191, 232, 255, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────
   18. Toggle / Switch
   ────────────────────────────────────────────────────────── */

.fi-toggle-input:checked ~ .fi-toggle-indicator {
    background-color: #7EC8F3 !important;
}

.fi-toggle-indicator {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

/* ──────────────────────────────────────────────────────────
   19. FileUpload
   ────────────────────────────────────────────────────────── */

.fi-fo-file-upload,
.fi-fo-file-upload-placeholder {
    background-color: #11233A !important;
    border: 2px dashed rgba(191, 232, 255, 0.30) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.54) !important;
    transition: border-color 200ms ease !important;
}

.fi-fo-file-upload:hover {
    border-color: #7EC8F3 !important;
    background-color: rgba(126, 200, 243, 0.05) !important;
}

/* ──────────────────────────────────────────────────────────
   20. Scrollbars
   ────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0E1A2A;
}

::-webkit-scrollbar-thumb {
    background: rgba(126, 200, 243, 0.30);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 200, 243, 0.55);
}

/* ──────────────────────────────────────────────────────────
   21. Relation Manager
   ────────────────────────────────────────────────────────── */

.fi-relation-manager {
    background: transparent !important;
}

/* Zagnieżdżona tabela relation managera — tło z kSurface2 */
.fi-relation-manager .fi-ta-ctn {
    background: linear-gradient(135deg, #1F3B5C 0%, rgba(126, 200, 243, 0.08) 100%) !important;
    border: 1px solid rgba(191, 232, 255, 0.15) !important;
    border-radius: 14px !important;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — html:not(.dark)
   Paleta: jasne tło (#F0F7FD), ciemny sidebar (#0E1A2A),
   karty z subtelnym gradientem, tekst #0E1A2A
   ══════════════════════════════════════════════════════════ */

/* ── Tło główne ─────────────────────────────────────────── */

html:not(.dark) .fi-body,
html:not(.dark) .fi-body.antialiased,
html:not(.dark) body.fi-body {
    background-color: #F0F7FD !important;
    color: #0E1A2A !important;
}

html:not(.dark) .fi-main,
html:not(.dark) .fi-main-ctn,
html:not(.dark) .fi-main > .fi-main-ctn {
    background-color: #F0F7FD !important;
}

/* ── Sidebar — ciemny (jak AppBar w aplikacji mobilnej) ─── */

html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-nav,
html:not(.dark) aside.fi-sidebar {
    background-color: #F0F7FD !important;
    border-right: 1px solid rgba(31, 59, 92, 0.14) !important;
}

html:not(.dark) .fi-sidebar-header,
html:not(.dark) .fi-sidebar header {
    background-color: #F0F7FD !important;
    border-bottom: 1px solid rgba(31, 59, 92, 0.12) !important;
}

html:not(.dark) .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-group-label {
    color: rgba(14, 26, 42, 0.70) !important;
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #1F3B5C !important;
}

html:not(.dark) .fi-sidebar-item-active {
    background-color: rgba(126, 200, 243, 0.18) !important;
    border-radius: 10px !important;
}

html:not(.dark) .fi-sidebar-item:hover:not(.fi-sidebar-item-active) {
    background-color: rgba(31, 59, 92, 0.06) !important;
    border-radius: 10px !important;
}

html:not(.dark) .fi-sidebar-group {
    border-top: 1px solid rgba(31, 59, 92, 0.08) !important;
}

/* ── Topbar — biały ─────────────────────────────────────── */

html:not(.dark) header.fi-topbar,
html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar-ctn,
html:not(.dark) .fi-topbar .bg-white,
html:not(.dark) .fi-topbar > div {
    background-color: #F0F7FD !important;
    border-bottom: 1px solid rgba(31, 59, 92, 0.12) !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-shadow: none !important;
}

html:not(.dark) .fi-topbar-breadcrumbs-ctn {
    color: rgba(14, 26, 42, 0.60) !important;
}

/* ── Karty / Sekcje — biały z gradientem ────────────────── */

html:not(.dark) .fi-section,
html:not(.dark) .fi-section-content,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-wi-account {
    background: linear-gradient(135deg, #ffffff 0%, rgba(126, 200, 243, 0.08) 100%) !important;
    border: 1px solid rgba(31, 59, 92, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(14, 26, 42, 0.08) !important;
}

html:not(.dark) .fi-section-header {
    border-bottom: 1px solid rgba(31, 59, 92, 0.10) !important;
}

html:not(.dark) .fi-section-header-heading,
html:not(.dark) h3.fi-section-header-heading {
    color: #0E1A2A !important;
}

/* ── Tabele ─────────────────────────────────────────────── */

html:not(.dark) .fi-ta-table,
html:not(.dark) .fi-ta-content,
html:not(.dark) table.fi-ta-table {
    background: transparent !important;
}

html:not(.dark) .fi-ta-header,
html:not(.dark) .fi-ta-filters,
html:not(.dark) .fi-ta-footer {
    background: rgba(240, 247, 253, 0.80) !important;
    border-color: rgba(31, 59, 92, 0.10) !important;
}

html:not(.dark) .fi-ta-header-cell,
html:not(.dark) th.fi-ta-header-cell {
    background: rgba(31, 59, 92, 0.06) !important;
    color: #1F3B5C !important;
    border-bottom: 1px solid rgba(31, 59, 92, 0.14) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html:not(.dark) .fi-ta-row td {
    background: transparent !important;
    border-bottom: 1px solid rgba(31, 59, 92, 0.07) !important;
    color: #0E1A2A !important;
}

html:not(.dark) .fi-ta-row:hover td {
    background: rgba(126, 200, 243, 0.08) !important;
}

html:not(.dark) .fi-ta-row-selected td {
    background: rgba(126, 200, 243, 0.15) !important;
}

/* ── Formularze i inputy ─────────────────────────────────── */

html:not(.dark) .fi-input,
html:not(.dark) input.fi-input,
html:not(.dark) textarea.fi-textarea,
html:not(.dark) select.fi-select,
html:not(.dark) .fi-fo-text-input,
html:not(.dark) .fi-select-input,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="number"],
html:not(.dark) textarea,
html:not(.dark) .fi-fo-select,
html:not(.dark) .fi-fo-select-option,
html:not(.dark) .fi-select,
html:not(.dark) [data-headlessui-state] .fi-input-wrapper,
html:not(.dark) .fi-input-wrapper,
html:not(.dark) .fi-fo-field-wrp .fi-input-wrapper,
html:not(.dark) button[data-headlessui-state],
html:not(.dark) .choices,
html:not(.dark) .choices__inner,
html:not(.dark) .choices__list--single,
html:not(.dark) .choices__item {
    background-color: #ffffff !important;
    border: 1px solid rgba(31, 59, 92, 0.22) !important;
    border-radius: 10px !important;
    color: #0E1A2A !important;
}

html:not(.dark) .fi-input:focus,
html:not(.dark) input.fi-input:focus,
html:not(.dark) textarea.fi-textarea:focus {
    border-color: #7EC8F3 !important;
    box-shadow: 0 0 0 2px rgba(126, 200, 243, 0.20) !important;
}

html:not(.dark) .fi-fo-field-wrp-label,
html:not(.dark) .fi-fo-label,
html:not(.dark) label.fi-fo-field-wrp-label {
    color: rgba(14, 26, 42, 0.60) !important;
}

html:not(.dark) .fi-fo-helper-text,
html:not(.dark) .fi-hint-text {
    color: rgba(14, 26, 42, 0.54) !important;
}

html:not(.dark) ::placeholder {
    color: rgba(14, 26, 42, 0.35) !important;
}

/* ── Przyciski ──────────────────────────────────────────── */

html:not(.dark) .fi-btn-primary,
html:not(.dark) button.fi-btn[data-button-type="primary"],
html:not(.dark) .fi-btn.fi-color-primary {
    background-color: #7EC8F3 !important;
    color: #0E1A2A !important;
    border: none !important;
    font-weight: 700 !important;
}

html:not(.dark) .fi-btn-outlined,
html:not(.dark) .fi-btn.fi-color-secondary {
    border: 1px solid #7EC8F3 !important;
    color: #1F3B5C !important;
    background: transparent !important;
}

html:not(.dark) .fi-btn.fi-color-danger {
    background-color: rgba(239, 68, 68, 0.10) !important;
    border: 1px solid rgba(239, 68, 68, 0.40) !important;
    color: #dc2626 !important;
}

html:not(.dark) .fi-btn.fi-color-warning {
    background-color: rgba(255, 193, 7, 0.10) !important;
    border: 1px solid rgba(255, 193, 7, 0.45) !important;
    color: #b45309 !important;
}

html:not(.dark) .fi-ta-action button,
html:not(.dark) .fi-ac-action {
    color: rgba(14, 26, 42, 0.60) !important;
}

html:not(.dark) .fi-ta-action button:hover,
html:not(.dark) .fi-ac-action:hover {
    color: #1F3B5C !important;
    background-color: rgba(31, 59, 92, 0.08) !important;
}

/* ── Badge'y ─────────────────────────────────────────────── */

html:not(.dark) .fi-badge.fi-color-primary {
    background-color: rgba(126, 200, 243, 0.15) !important;
    border: 1px solid rgba(126, 200, 243, 0.50) !important;
    color: #1F3B5C !important;
}

html:not(.dark) .fi-badge.fi-color-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.40) !important;
    color: #065f46 !important;
}

html:not(.dark) .fi-badge.fi-color-warning {
    background-color: rgba(255, 193, 7, 0.12) !important;
    border: 1px solid rgba(255, 193, 7, 0.45) !important;
    color: #92400e !important;
}

html:not(.dark) .fi-badge.fi-color-danger {
    background-color: rgba(239, 68, 68, 0.10) !important;
    border: 1px solid rgba(239, 68, 68, 0.40) !important;
    color: #dc2626 !important;
}

html:not(.dark) .fi-badge.fi-color-info {
    background-color: rgba(126, 200, 243, 0.12) !important;
    border: 1px solid rgba(126, 200, 243, 0.40) !important;
    color: #1F3B5C !important;
}

html:not(.dark) .fi-badge.fi-color-gray {
    background-color: rgba(31, 59, 92, 0.08) !important;
    border: 1px solid rgba(31, 59, 92, 0.20) !important;
    color: rgba(14, 26, 42, 0.60) !important;
}

/* ── Modal ──────────────────────────────────────────────── */

html:not(.dark) .fi-modal-window,
html:not(.dark) .fi-modal-content {
    background-color: #ffffff !important;
    border: 1px solid rgba(31, 59, 92, 0.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(14, 26, 42, 0.20) !important;
}

html:not(.dark) .fi-modal-header {
    border-bottom: 1px solid rgba(31, 59, 92, 0.10) !important;
}

html:not(.dark) .fi-modal-header-heading {
    color: #0E1A2A !important;
}

html:not(.dark) .fi-modal-backdrop {
    background-color: rgba(14, 26, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
}

/* ── Powiadomienia ──────────────────────────────────────── */

html:not(.dark) .fi-no-notification {
    background-color: #ffffff !important;
    border: 1px solid rgba(31, 59, 92, 0.16) !important;
    border-radius: 12px !important;
    color: #0E1A2A !important;
    box-shadow: 0 8px 24px rgba(14, 26, 42, 0.15) !important;
}

html:not(.dark) .fi-no-notification-title {
    color: #0E1A2A !important;
}

html:not(.dark) .fi-no-notification-body {
    color: rgba(14, 26, 42, 0.70) !important;
}

/* ── Ekran logowania ─────────────────────────────────────── */

html:not(.dark) .fi-simple-layout,
html:not(.dark) .fi-simple-main {
    background-color: #F0F7FD !important;
    background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(126, 200, 243, 0.25) 0%, transparent 70%) !important;
}

html:not(.dark) .fi-simple-page,
html:not(.dark) .fi-simple-layout .fi-simple-page {
    background: linear-gradient(135deg, #ffffff 0%, rgba(126, 200, 243, 0.14) 100%) !important;
    border: 1px solid rgba(31, 59, 92, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(14, 26, 42, 0.14) !important;
}

/* Inputy na stronie logowania — jasne tło, ciemna czcionka */

/* Zewnętrzny kontener pola (ma ramkę i tło) */
html:not(.dark) .fi-simple-page .fi-input-wrp {
    background-color: #ffffff !important;
    border: 1px solid rgba(31, 59, 92, 0.22) !important;
    border-radius: 8px !important;
}

html:not(.dark) .fi-simple-page .fi-input-wrp:focus-within {
    border-color: #7EC8F3 !important;
    box-shadow: 0 0 0 2px rgba(126, 200, 243, 0.20) !important;
}

/* Sam element input — kolor czcionki i przezroczyste tło (tło jest na fi-input-wrp) */
html:not(.dark) .fi-simple-page input,
html:not(.dark) .fi-simple-page input[type="email"],
html:not(.dark) .fi-simple-page input[type="password"],
html:not(.dark) .fi-simple-page input[type="text"],
html:not(.dark) .fi-simple-page .fi-input {
    color: #0E1A2A !important;
    background-color: transparent !important;
}

html:not(.dark) .fi-simple-page input::placeholder {
    color: rgba(14, 26, 42, 0.38) !important;
}

html:not(.dark) .fi-simple-page label,
html:not(.dark) .fi-simple-page .fi-fo-field-wrp-label {
    color: rgba(14, 26, 42, 0.70) !important;
}

/* ── Dropdown ───────────────────────────────────────────── */

html:not(.dark) .fi-dropdown-panel,
html:not(.dark) [x-placement] .fi-dropdown-panel,
html:not(.dark) .fi-fo-select-option-list,
html:not(.dark) .choices__list--dropdown,
html:not(.dark) .choices__list--dropdown .choices__item {
    background-color: #ffffff !important;
    border: 1px solid rgba(31, 59, 92, 0.16) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(14, 26, 42, 0.14) !important;
    color: #0E1A2A !important;
}

html:not(.dark) .fi-dropdown-list-item:hover {
    background-color: rgba(126, 200, 243, 0.10) !important;
    color: #1F3B5C !important;
}

html:not(.dark) .fi-dropdown-list-item-label {
    color: #0E1A2A !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */

html:not(.dark) .fi-breadcrumbs-item-label {
    color: rgba(14, 26, 42, 0.54) !important;
}

html:not(.dark) .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: #0E1A2A !important;
}

/* ── Tekst ogólny ───────────────────────────────────────── */

html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-400 {
    color: rgba(14, 26, 42, 0.60) !important;
}

html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-700 {
    color: rgba(14, 26, 42, 0.75) !important;
}

html:not(.dark) .text-gray-800,
html:not(.dark) .text-gray-900 {
    color: #0E1A2A !important;
}

/* ── Paginacja ──────────────────────────────────────────── */

html:not(.dark) .fi-pagination-item a,
html:not(.dark) .fi-pagination-item button {
    background-color: #ffffff !important;
    border: 1px solid rgba(31, 59, 92, 0.18) !important;
    color: rgba(14, 26, 42, 0.70) !important;
    border-radius: 8px !important;
}

html:not(.dark) .fi-pagination-item a:hover,
html:not(.dark) .fi-pagination-item button:hover {
    background-color: rgba(126, 200, 243, 0.10) !important;
    border-color: #7EC8F3 !important;
    color: #1F3B5C !important;
}

html:not(.dark) .fi-pagination-item-active a,
html:not(.dark) .fi-pagination-item-active button {
    background-color: #7EC8F3 !important;
    color: #0E1A2A !important;
    border-color: #7EC8F3 !important;
    font-weight: 700 !important;
}

/* ── Avatar ─────────────────────────────────────────────── */

html:not(.dark) .fi-avatar,
html:not(.dark) .fi-user-avatar {
    background-color: #7EC8F3 !important;
    color: #0E1A2A !important;
    border: 1px solid rgba(31, 59, 92, 0.20) !important;
}

/* ── Toggle ─────────────────────────────────────────────── */

html:not(.dark) .fi-toggle-indicator {
    background-color: rgba(14, 26, 42, 0.20) !important;
}

/* ── FileUpload ─────────────────────────────────────────── */

html:not(.dark) .fi-fo-file-upload,
html:not(.dark) .fi-fo-file-upload-placeholder {
    background-color: #F0F7FD !important;
    border: 2px dashed rgba(31, 59, 92, 0.25) !important;
    color: rgba(14, 26, 42, 0.54) !important;
}

html:not(.dark) .fi-fo-file-upload:hover {
    border-color: #7EC8F3 !important;
}

/* ── Scrollbars ─────────────────────────────────────────── */

html:not(.dark) ::-webkit-scrollbar-track {
    background: #F0F7FD;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: rgba(31, 59, 92, 0.25);
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: rgba(31, 59, 92, 0.45);
}

/* ── Relation Manager ───────────────────────────────────── */

html:not(.dark) .fi-relation-manager .fi-ta-ctn {
    background: linear-gradient(135deg, #ffffff 0%, rgba(126, 200, 243, 0.06) 100%) !important;
    border: 1px solid rgba(31, 59, 92, 0.12) !important;
}