/* ===========================
   Body Background
   =========================== */
body {
    background: linear-gradient(to bottom, #f1f5f9, #f1f5f9);
}

.dark body {
    background: linear-gradient(to bottom, #1f2937, #0f172a);
}

/* ===========================
   Sidebar
   =========================== */
.fi-sidebar-nav, .sidebar-profile-bg {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.65)),
        url('/assets/filametbackground/filament.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: #f9fafb !important;
}

.fi-sidebar-header {
    background-color: #0a1d31 !important;
}

/* Sidebar text - default state */
.fi-sidebar .fi-sidebar-item a,
.fi-sidebar .fi-sidebar-item span,
.fi-sidebar .fi-sidebar-item .fi-sidebar-item-label {
    color: #ffffff !important;
}

/* Dark mode sidebar */
.dark .fi-sidebar-nav {
    background: #0f172a;
}

/* Sidebar text – dark mode default state */
.dark .fi-sidebar .fi-sidebar-item a,
.dark .fi-sidebar .fi-sidebar-item span,
.dark .fi-sidebar .fi-sidebar-item .fi-sidebar-item-label {
    color: #ffffff !important;
}

/* ===========================
   Sidebar Active & Hover States
   =========================== */

/* 1. Floating Pill Effect & Transitions */
.fi-sidebar .fi-sidebar-item a,
.fi-sidebar .fi-sidebar-item button {
    border-radius: 0.75rem !important;
    margin: 0.15rem 0.5rem !important;
    transition: all 0.3s ease !important;
}

/* 2. Micro-Animation on Hover */
.fi-sidebar .fi-sidebar-item a:hover,
.fi-sidebar .fi-sidebar-item button:hover {
    transform: translateX(4px);
}

/* 4. Glowing Active Icons */
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) !important;
}

/* 5. Invisible Scrollbars for Sidebar */
.fi-sidebar-nav {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.fi-sidebar-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Active & Hover links - LIGHT MODE */
.fi-sidebar .fi-sidebar-item-active a,
.fi-sidebar .fi-sidebar-item a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Dark mode active/hover */
.dark .fi-sidebar .fi-sidebar-item-active a,
.dark .fi-sidebar .fi-sidebar-item a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Ensure sidebar text is white on active/hover states */
.fi-sidebar .fi-sidebar-item-active span,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item a:hover span,
.fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-label {
    color: #ffffff !important;
}

.dark .fi-sidebar .fi-sidebar-item-active span,
.dark .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
.dark .fi-sidebar .fi-sidebar-item a:hover span,
.dark .fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-label {
    color: #ffffff !important;
}

/* ===========================
   Sidebar Icons (FIXED)
   =========================== */

/* Default icon color */
.fi-sidebar-item-icon {
    color: #9ca3af !important; /* gray-400 */
}

/* Dark mode icon color */
.dark .fi-sidebar-item-icon {
    color: #9ca3af !important; /* gray-400 */
}

/* Active & hover icon - White on blue background */
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* Dark mode active icon */
.dark .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon,
.dark .fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* ===========================
   Buttons
   =========================== */
.filament-button-primary {
    background-color: #20abe2;
    border-color: #20abe2;
    color: #ffffff;
}

.filament-button-primary:hover {
    background-color: #1d97ce;
}

.filament-button-secondary {
    background-color: #e48b25;
    border-color: #e48b25;
    color: #ffffff;
}

.filament-button-secondary:hover {
    background-color: #d17c1f;
}

/* ===========================
   Table
   =========================== */
.fi-ta-table {
    background: linear-gradient(to bottom, #ffffff, #ffffff) !important;
}

.dark .fi-ta-table {
    background: linear-gradient(to bottom, #1e293b, #0f172a) !important;
}

/* Table header */
.fi-ta-table th {
    background-color: #ffffff !important;
    color: #ffffff !important;
}

/* Table row hover */
.fi-ta-row:hover {
    background-color: rgba(32, 171, 226, 0.1) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(32, 171, 226, 0.15) !important;
}

/* Table container */
.fi-ta-container {
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
}



.dark .fi-ta-container {
    border: 1px solid #475569;
}

/* ===========================
   Badges & Alerts
   =========================== */
.filament-badge {
    background-color: #e48b25;
    color: #ffffff;
}

.filament-alert-success {
    background-color: #20abe2;
    color: #ffffff;
}

.filament-alert-danger {
    background-color: #e48b25;
    color: #ffffff;
}

/* ===========================
   Header, Footer, Pagination
   =========================== */
.fi-ta-header,
.fi-ta-footer,
.fi-ta-pagination {
    background-color: #ffffff;
    color: #ffffff;
}

.dark .fi-ta-header,
.dark .fi-ta-footer,
.dark .fi-ta-pagination {
    background-color: #1e293b;
    color: #ffffff;
}

.fi-page-sub-navigation-sidebar-ctn {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}
.fi-page-sub-navigation-sidebar-ctn {
    position: sticky !important;
    top: 80px;
    width: 18rem;
}

/* ===========================
   Mobile Settings Sub-Navigation Select (below md only)
   =========================== */
@media (max-width: 767.98px) {
    .fi-page-sub-navigation-select {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .fi-page-sub-navigation-select .fi-select-input {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ===========================
   Mobile Hamburger (sidebar toggle) - flush left with small gap, below lg only
   =========================== */
@media (max-width: 1023.98px) {
    .fi-topbar-open-sidebar-btn {
        order: -9999 !important;
        margin-left: calc(-1rem + 0.625rem) !important; /* nav px-4 minus ~10px left gap */
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .fi-topbar-open-sidebar-btn {
        margin-left: calc(-1.5rem + 0.625rem) !important; /* nav md:px-6 minus ~10px left gap */
    }
}

/* ===========================
   Sidebar close (X) button - show below lg in sidebar header top-right
   =========================== */
@media (max-width: 1023.98px) {
    .fi-sidebar-header button.ms-auto {
        display: flex;
    }
}

/* ===========================
   "Fill from screenshot" modal (Create Tender)
   =========================== */
.fi-extract-screenshot-modal .fi-modal-heading {
    font-size: 18px !important;
}

.fi-extract-screenshot-modal .fi-modal-description {
    font-size: 14px !important;
}