/* Custom Filament Theme - Company Color: #32b6b3 */

/* ============================================
   SIDEBAR COLORS (all screen sizes)
   ============================================ */

/* Sidebar background - maximum specificity */
html body .fi-sidebar,
html body .fi-layout .fi-sidebar,
html body aside.fi-sidebar,
html body [data-turbo-permanent].fi-sidebar,
.fi-sidebar {
    background-color: #32b6b3 !important;
    background: #32b6b3 !important;
}

/* Sidebar inner container */
html body .fi-sidebar-nav,
.fi-sidebar-nav {
    background-color: transparent !important;
    background: transparent !important;
}

/* Sidebar navigation items - adjust text colors for contrast */
.fi-sidebar-nav-groups {
    color: #fff !important;
}

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

html body .fi-sidebar-item-label,
.fi-sidebar-item-label {
    color: #fff !important;
}

html body .fi-sidebar-item-icon,
.fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Active/hover states */
html body .fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #fff !important;
}

html body .fi-sidebar-item-active,
.fi-sidebar-item-active {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

html body .fi-sidebar-item:hover,
.fi-sidebar-item:hover,
html body .fi-sidebar .fi-sidebar-item:hover,
.fi-sidebar .fi-sidebar-item:hover,
html body a.fi-sidebar-item:hover,
a.fi-sidebar-item:hover {
    background-color: rgba(0, 0, 0, 0.15) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

html body .fi-sidebar-item:hover .fi-sidebar-item-label,
.fi-sidebar-item:hover .fi-sidebar-item-label {
    color: #fff !important;
}

html body .fi-sidebar-item:hover .fi-sidebar-item-icon,
.fi-sidebar-item:hover .fi-sidebar-item-icon {
    color: #fff !important;
}

html body .fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #fff !important;
}

/* Sidebar header/brand area - white background for logo visibility */
html body .fi-sidebar-header,
.fi-sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    background-color: #fff !important;
    background: #fff !important;
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

/* Badge styling in sidebar */
html body .fi-sidebar-item-badge,
.fi-sidebar-item-badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* Prevent Bootstrap from affecting sidebar elements */
.fi-sidebar *,
.fi-sidebar *::before,
.fi-sidebar *::after {
    box-sizing: border-box;
}

/* Reset any Bootstrap nav styles inside sidebar */
.fi-sidebar .nav,
.fi-sidebar .navbar,
.fi-sidebar .nav-link,
.fi-sidebar .nav-item {
    all: unset;
}

/* Prevent Bootstrap link hover styles from affecting sidebar */
.fi-sidebar a,
.fi-sidebar a:hover,
.fi-sidebar a:focus,
.fi-sidebar a:active,
html body .fi-sidebar a,
html body .fi-sidebar a:hover {
    text-decoration: none !important;
    background-color: transparent !important;
}

.fi-sidebar a.fi-sidebar-item:hover,
html body .fi-sidebar a.fi-sidebar-item:hover {
    background-color: rgba(0, 0, 0, 0.15) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

/* Fix for collapsed sidebar overlay */
html body .fi-sidebar-close-overlay,
.fi-sidebar-close-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure sidebar group headings are visible */
html body .fi-sidebar-group,
.fi-sidebar-group {
    background-color: transparent !important;
}

/* Dark mode sidebar - keep the same color */
.dark .fi-sidebar,
.dark html body .fi-sidebar {
    background-color: #32b6b3 !important;
    background: #32b6b3 !important;
}

/* ============================================
   MOBILE SIDEBAR (below 1024px)
   Let Filament handle the slide-out drawer natively
   Only apply colors and basic text styles
   ============================================ */
@media (max-width: 1023px) {
    /* Ensure mobile sidebar scrolls properly */
    html body .fi-sidebar,
    .fi-sidebar,
    aside.fi-sidebar {
        overflow-y: auto !important;
        height: 100% !important;
        max-height: 100vh !important;
    }

    html body .fi-sidebar-nav,
    .fi-sidebar-nav {
        overflow-y: auto !important;
        height: auto !important;
    }

    /* Show close/hamburger buttons on mobile */
    html body .fi-sidebar-header button,
    .fi-sidebar-header button,
    html body .fi-sidebar-nav-collapse-btn,
    .fi-sidebar-nav-collapse-btn,
    html body .fi-sidebar button.fi-icon-btn,
    .fi-sidebar button.fi-icon-btn,
    html body .fi-sidebar-header .fi-icon-btn,
    .fi-sidebar-header .fi-icon-btn {
        display: flex !important;
    }

    /* Hide the expand/collapse all toggle on mobile */
    .sidebar-toggle-container {
        display: none !important;
    }

    /* Make sidebar items comfortable touch targets */
    html body .fi-sidebar-item,
    .fi-sidebar-item {
        padding: 0.5rem 0.75rem !important;
    }

    html body .fi-sidebar-group-button,
    .fi-sidebar-group-button {
        padding: 0.5rem 0.75rem !important;
    }

    /* Stats grid - stack on mobile */
    .fi-wi-stats-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================
   DESKTOP SIDEBAR (1024px and up)
   All the compact/protection overrides go here
   ============================================ */
@media (min-width: 1024px) {

    /* Hide ALL buttons/icons in sidebar header (collapse arrows near logo) */
    html body .fi-sidebar-header button,
    html body .fi-sidebar-header [class*="collapse"],
    html body .fi-sidebar-header [class*="toggle"],
    .fi-sidebar-header button,
    .fi-sidebar-header [class*="collapse"],
    .fi-sidebar-header [class*="toggle"],
    html body .fi-logo + button,
    html body .fi-brand + button {
        display: none !important;
    }

    /* Hide sidebar collapse button completely */
    html body .fi-sidebar-nav-collapse-btn,
    .fi-sidebar-nav-collapse-btn,
    html body .fi-sidebar button.fi-icon-btn,
    .fi-sidebar button.fi-icon-btn,
    html body .fi-sidebar-header .fi-icon-btn,
    .fi-sidebar-header .fi-icon-btn,
    html body button[title="Collapse sidebar"],
    button[title="Collapse sidebar"],
    html body button[title="Expand sidebar"],
    button[title="Expand sidebar"] {
        display: none !important;
    }

    /* Hide collapse arrows - use hover effects instead */
    html body .fi-sidebar-group-collapse-button,
    .fi-sidebar-group-collapse-button {
        display: none !important;
    }

    /* Sidebar base - let Filament handle width transitions */
    html body .fi-sidebar,
    .fi-sidebar,
    aside.fi-sidebar {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        position: relative !important;
        z-index: 40 !important;
    }

    /* Protect sidebar from Bootstrap/Semantic UI resets */
    html body .fi-sidebar,
    html body .fi-sidebar *,
    .fi-sidebar,
    .fi-sidebar * {
        box-sizing: border-box !important;
    }

    /* Prevent Bootstrap container from affecting sidebar */
    html body .fi-sidebar.container,
    html body .fi-sidebar .container,
    .fi-sidebar.container,
    .fi-sidebar .container {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Prevent Semantic UI segment from affecting sidebar */
    html body .fi-sidebar.ui.segment,
    .fi-sidebar.ui.segment {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Force sidebar styles over Bootstrap */
    html body .fi-sidebar,
    html body .fi-sidebar *:not(svg):not(path) {
        font-family: inherit !important;
    }

    html body .fi-sidebar .fi-sidebar-item,
    html body .fi-sidebar a.fi-sidebar-item {
        display: flex !important;
        align-items: center !important;
        padding: 0rem 0.25rem !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0.375rem !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reset Bootstrap button styles in sidebar */
    html body .fi-sidebar .btn,
    html body .fi-sidebar button {
        all: unset !important;
        cursor: pointer !important;
    }

    html body .fi-sidebar .fi-sidebar-group-button {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0.25rem 0.75rem !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }

    /* Prevent Bootstrap card styles */
    html body .fi-sidebar .card,
    html body .fi-sidebar .card-header,
    html body .fi-sidebar .card-body {
        all: unset !important;
    }

    /* Prevent Bootstrap list styles */
    html body .fi-sidebar ul,
    html body .fi-sidebar ol {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }

    /* Prevent Semantic UI menu styles */
    html body .fi-sidebar.ui.menu,
    html body .fi-sidebar .ui.menu,
    html body .fi-sidebar .menu {
        all: unset !important;
    }

    html body .fi-sidebar .item,
    html body .fi-sidebar .ui.item {
        all: unset !important;
    }

    /* Icon sizing in sidebar */
    html body .fi-sidebar .fi-sidebar-item-icon,
    html body .fi-sidebar svg.fi-sidebar-item-icon {
        width: 0.875rem !important;
        height: 0.875rem !important;
        flex-shrink: 0 !important;
        margin-right: 0.1875rem !important;
    }

    /* Sidebar styling protection - no width forcing */
    html body div.fi-layout aside.fi-sidebar,
    html body .fi-body .fi-sidebar,
    body aside.fi-sidebar {
        background-color: #32b6b3 !important;
    }

    /* Reset Semantic UI styles in sidebar */
    html body .fi-sidebar.ui.menu,
    html body .fi-sidebar .ui.menu,
    .fi-sidebar.ui.menu,
    .fi-sidebar .ui.menu {
        all: unset !important;
    }

    /* Reset Bootstrap container styles */
    html body .fi-sidebar .container,
    html body .fi-sidebar .container-fluid,
    html body .fi-sidebar .row {
        all: unset !important;
    }

    /* Force nav groups layout */
    html body aside.fi-sidebar nav,
    html body aside.fi-sidebar .fi-sidebar-nav {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        width: 100% !important;
        padding: 0rem 0.25rem !important;
    }

    html body aside.fi-sidebar .fi-sidebar-nav-groups {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Force group styling */
    html body aside.fi-sidebar .fi-sidebar-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Group button styling - clickable sections with visual feedback */
    html body aside.fi-sidebar .fi-sidebar-group-button,
    .fi-sidebar-group-button {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0rem 0.25rem !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        border-left: 2px solid transparent !important;
        border-radius: 0 0.25rem 0.25rem 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        text-align: left !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        transition: all 0.15s ease !important;
    }

    /* Group button hover state */
    html body aside.fi-sidebar .fi-sidebar-group-button:hover,
    .fi-sidebar-group-button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-left-color: rgba(255, 255, 255, 0.5) !important;
        color: #fff !important;
    }

    /* Force items container */
    html body aside.fi-sidebar .fi-sidebar-group-items {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Force item link styling */
    html body aside.fi-sidebar .fi-sidebar-item {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0rem 0.25rem !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0.375rem !important;
        color: #fff !important;
        font-size: 0.8125rem !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }

    html body aside.fi-sidebar .fi-sidebar-item:hover {
        background: rgba(0, 0, 0, 0.15) !important;
    }

    html body aside.fi-sidebar .fi-sidebar-item-active {
        background: rgba(0, 0, 0, 0.15) !important;
    }

    /* Force label styling */
    html body aside.fi-sidebar .fi-sidebar-item-label {
        color: #fff !important;
        font-size: 0.8125rem !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Force icon styling */
    html body aside.fi-sidebar .fi-sidebar-item-icon {
        width: 0.875rem !important;
        height: 0.875rem !important;
        margin-right: 0.1875rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        flex-shrink: 0 !important;
    }

    /* Sidebar menu item label font size */
    html body .fi-sidebar-item-label,
    .fi-sidebar-item-label {
        font-size: 0.8125rem !important;
        line-height: 1.125rem !important;
    }

    /* Sidebar group label font size */
    html body .fi-sidebar-group-label,
    .fi-sidebar-group-label {
        font-size: 0.75rem !important;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    /* Reduce vertical padding on menu items */
    html body .fi-sidebar-item,
    .fi-sidebar-item {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Reduce spacing between sidebar groups */
    html body .fi-sidebar-group,
    .fi-sidebar-group {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Reduce padding inside sidebar nav */
    html body .fi-sidebar-nav,
    .fi-sidebar-nav {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        gap: 0 !important;
    }

    /* Navigation groups container */
    html body .fi-sidebar-nav-groups,
    .fi-sidebar-nav-groups {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Group label padding and size */
    html body .fi-sidebar-group-label,
    .fi-sidebar-group-label {
        padding: 0.1875rem 0.5rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        font-size: 0.8125rem !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }

    /* Navigation group button/header - minimal spacing */
    html body .fi-sidebar-group-button,
    .fi-sidebar-group-button {
        padding: 0.0625rem 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    /* Remove extra spacing from group items container */
    html body .fi-sidebar-group-items,
    .fi-sidebar-group-items {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* All group states - zero extra spacing */
    html body .fi-sidebar-group[data-collapsed],
    .fi-sidebar-group[data-collapsed] {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Target any flex gaps in sidebar */
    html body .fi-sidebar nav,
    html body .fi-sidebar ul,
    html body .fi-sidebar ol,
    html body .fi-sidebar div,
    .fi-sidebar nav,
    .fi-sidebar ul,
    .fi-sidebar ol {
        gap: 0 !important;
    }

    /* Sidebar list items */
    html body .fi-sidebar li,
    .fi-sidebar li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ---- SIDEBAR - REMOVE SCROLL (desktop only) ---- */
    html body .fi-sidebar,
    .fi-sidebar,
    aside.fi-sidebar {
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    html body .fi-sidebar-nav,
    .fi-sidebar-nav {
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    html body .fi-sidebar-nav-groups,
    .fi-sidebar-nav-groups {
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    html body .fi-sidebar-content,
    .fi-sidebar-content {
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    html body .fi-sidebar-group-items,
    .fi-sidebar-group-items {
        overflow: visible !important;
        max-height: none !important;
    }

    html body .fi-sidebar > div,
    .fi-sidebar > div {
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    html body .fi-sidebar [style*="overflow"],
    .fi-sidebar [style*="overflow"] {
        overflow: visible !important;
    }

    .dark .fi-sidebar,
    .dark .fi-sidebar-nav,
    .dark .fi-sidebar-nav-groups {
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

} /* end @media (min-width: 1024px) */

/* ============================================
   TABLE TEXT SELECTION
   Enable text selection in Filament tables
   ============================================ */
.fi-ta-table,
.fi-ta-table *,
.fi-ta-cell,
.fi-ta-cell *,
.fi-ta-text,
.fi-ta-text *,
table.fi-ta-table td,
table.fi-ta-table td * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text;
}

/* Keep buttons and actions clickable */
.fi-ta-table button,
.fi-ta-table a,
.fi-ta-table .fi-btn,
.fi-ta-table .fi-ac-action,
.fi-ta-table .fi-ta-checkbox,
.fi-ta-table input,
.fi-ta-table select {
    cursor: pointer;
    user-select: none !important;
}

/* ============================================
   EXPAND WORKING AREA
   Reduce grey gap between sidebar and content
   Full width content with minimal padding
   ============================================ */

/* Main content area - minimal padding */
html body .fi-main,
.fi-main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* The main content container - full width */
html body .fi-main-ctn,
.fi-main-ctn {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Body/page content - no gap */
html body .fi-body,
.fi-body {
    gap: 0 !important;
}

/* Layout container - no gap between sidebar and content */
html body .fi-layout,
.fi-layout {
    gap: 0 !important;
}

/* Topbar alignment */
html body .fi-topbar,
.fi-topbar {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Page header - minimal padding */
html body .fi-header,
.fi-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Page content area */
html body .fi-page,
.fi-page {
    padding: 0.5rem 0 !important;
}

/* Simple page content wrapper - full width */
html body .fi-simple-main-ctn,
.fi-simple-main-ctn {
    max-width: 100% !important;
}

/* Table container */
html body .fi-ta-ctn,
.fi-ta-ctn {
    padding: 0 !important;
}

/* Ensure full width content on all pages */
html body .fi-page > div,
.fi-page > div {
    max-width: 100% !important;
    width: 100% !important;
}

/* Resource pages - full width */
html body [class*="fi-resource-"],
[class*="fi-resource-"] {
    max-width: 100% !important;
}

/* Section content areas */
html body .fi-section-content,
.fi-section-content {
    padding: 0.75rem !important;
}

/* ============================================
   GLOBAL COMPACT - Reduce text & padding site-wide
   Base font -2pt, tighter padding, neater cards
   ============================================ */

/* Base font reduction for main content area */
html body .fi-main,
.fi-main {
    font-size: 0.8125rem !important; /* 13px, down from ~15px */
}

/* Filament section (card) padding - tighter */
html body .fi-section,
.fi-section {
    padding: 0 !important;
}

html body .fi-section-content-ctn,
.fi-section-content-ctn {
    padding: 0.5rem 0.75rem !important;
}

html body .fi-section-header,
.fi-section-header {
    padding: 0.5rem 0.75rem !important;
    background-color: rgb(243 244 246) !important;
    border-radius: 0.5rem !important;
}

.dark .fi-section-header {
    background-color: rgb(31 41 55) !important;
}

/* Section heading text smaller */
html body .fi-section-header-heading,
.fi-section-header-heading {
    font-size: 0.875rem !important;
}

html body .fi-section-header-description,
.fi-section-header-description {
    font-size: 0.75rem !important;
}

/* Compact Filament widgets */
html body .fi-wi,
.fi-wi {
    gap: 0.75rem !important;
}

/* Filament page spacing */
html body .fi-page > .fi-page-content,
.fi-page > .fi-page-content {
    gap: 0.75rem !important;
}

/* Filament table cells - compact */
html body .fi-ta-cell,
.fi-ta-cell {
    padding: 0 !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
}

html body .fi-ta-header-cell,
.fi-ta-header-cell {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
}

/* Inner column wrapper padding (overrides px-3 py-4) */
html body .fi-ta-text,
.fi-ta-text {
    padding: 0.1875rem 0.375rem !important;
}

/* Icon columns and other column types */
html body .fi-ta-col-wrp,
.fi-ta-col-wrp {
    padding: 0.1875rem 0.375rem !important;
}

/* Columns auto-fit width */
html body .fi-ta-table,
.fi-ta-table {
    table-layout: auto !important;
}

/* Delivery status column can wrap */
.fi-ta-cell:has([wire\:key*="delivery_status"]),
.fi-ta-cell:has(.fi-ta-col-wrp [class*="delivery"]) {
    white-space: normal !important;
    min-width: 10rem !important;
}

/* Filament badges smaller */
html body .fi-badge,
.fi-badge {
    font-size: 0.6875rem !important;
    padding: 0.125rem 0.375rem !important;
}

/* ============================================
   DIGIHUB-STATS - Stat card standard style
   Reference name: "digihub-stats"
   7-column grid, 1.5rem gap, comfortable fonts
   Applied globally to all StatsOverviewWidget pages
   ============================================ */

/* Stats widget grid - 7 columns */
@media (min-width: 1024px) {
    .fi-wi-stats-overview-stats-ctn {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

/* ============================================
   STAT CARDS - RESPONSIVE LAYOUT
   Desktop: title left + number right, description below
   Mobile: stacked vertically for readability
   ============================================ */

/* 7-column grid for case breakdown widget */
.stats-grid-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Stat card - compact padding */
.fi-wi-stats-overview-stat {
    padding: 0.625rem 0.75rem !important;
}

/* Inner grid: label+value on row 1, description on row 2 */
.fi-wi-stats-overview-stat > div.grid {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 0.25rem 0.5rem !important;
    align-items: center !important;
}

/* Label row (1st child) - top left */
.fi-wi-stats-overview-stat > div.grid > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}
.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Number (2nd child) - top right */
.fi-wi-stats-overview-stat-value {
    font-size: 1.1875rem !important;
    line-height: 1.4rem !important;
    font-weight: 700 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Description row (3rd child) - bottom, full width */
.fi-wi-stats-overview-stat > div.grid > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}
.fi-wi-stats-overview-stat-description {
    font-size: 0.6875rem !important;
}

.fi-wi-stats-overview-stat-description-icon {
    width: 1rem !important;
    height: 1rem !important;
}

/* --- Mobile: screens up to 767px --- */
@media (max-width: 767px) {
    /* All stat grids → 2 columns on mobile */
    .stats-grid-7,
    .fi-wi-stats-overview-stats-ctn,
    .fi-wi-stats-overview .fi-wi-stats-overview-stats-ctn,
    div.fi-wi-stats-overview-stats-ctn.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Card styling on mobile - ensure proper borders */
    .fi-wi-stats-overview-stat {
        padding: 0.5rem 0.625rem !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05) !important;
        border: 1px solid rgba(0,0,0,.05) !important;
        overflow: hidden !important;
    }

    /* Stack card content vertically on mobile */
    .fi-wi-stats-overview-stat > div.grid {
        grid-template-columns: 1fr !important;
        gap: 0.125rem !important;
    }

    /* Label - full width, reset grid position */
    .fi-wi-stats-overview-stat > div.grid > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* Number - below label, left-aligned */
    .fi-wi-stats-overview-stat-value {
        grid-column: 1 !important;
        grid-row: 2 !important;
        text-align: left !important;
        font-size: 1.125rem !important;
    }

    /* Description - below number */
    .fi-wi-stats-overview-stat > div.grid > div:nth-child(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .fi-wi-stats-overview-stat-label {
        font-size: 0.6875rem !important;
    }

    .fi-wi-stats-overview-stat-description {
        font-size: 0.625rem !important;
    }

    /* Quick links grid → 2 columns on mobile */
    .quick-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================
   FORM.IO DATE PICKER - CALENDAR BUTTON ON RIGHT
   Position calendar icon/button inline with input field
   ============================================ */

/* Date/DateTime input group - inline layout */
.formio-component-datetime .input-group,
.formio-component-day .input-group,
.formio-component-time .input-group,
#formio-submission-editor .input-group,
#digistain-form-submission .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

/* Date input field - take remaining space */
.formio-component-datetime .input-group > input,
.formio-component-datetime .input-group > .form-control,
.formio-component-day .input-group > input,
.formio-component-time .input-group > input,
#formio-submission-editor .input-group > input,
#digistain-form-submission .input-group > input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Calendar button container - right side */
.formio-component-datetime .input-group-append,
.formio-component-datetime .input-group-btn,
.formio-component-day .input-group-append,
.formio-component-time .input-group-append,
#formio-submission-editor .input-group-append,
#formio-submission-editor .input-group-btn,
#digistain-form-submission .input-group-append,
#digistain-form-submission .input-group-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    margin-left: -1px !important;
}

/* Calendar button styling */
.formio-component-datetime .input-group-append .btn,
.formio-component-datetime .input-group-btn .btn,
.formio-component-day .input-group-append .btn,
.formio-component-time .input-group-append .btn,
#formio-submission-editor .input-group-append .btn,
#formio-submission-editor .input-group-btn .btn,
#digistain-form-submission .input-group-append .btn,
#digistain-form-submission .input-group-btn .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 0.75rem !important;
    background-color: #e5e7eb !important;
    border: 1px solid #d1d5db !important;
}

/* Dark mode calendar button */
.dark .formio-component-datetime .input-group-append .btn,
.dark .formio-component-datetime .input-group-btn .btn,
.dark #formio-submission-editor .input-group-append .btn,
.dark #formio-submission-editor .input-group-btn .btn,
.dark #digistain-form-submission .input-group-append .btn,
.dark #digistain-form-submission .input-group-btn .btn {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

/* Flatpickr input wrapper - inline */
.formio-component-datetime .flatpickr-wrapper,
.formio-component-day .flatpickr-wrapper,
#formio-submission-editor .flatpickr-wrapper,
#digistain-form-submission .flatpickr-wrapper {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
}

/* Ensure proper alignment in form rows */
.formio-component-datetime,
.formio-component-day,
.formio-component-time {
    width: 100% !important;
}

/* Fix for nested input groups */
.formio-component-datetime .form-group .input-group,
#formio-submission-editor .formio-component-datetime .input-group,
#digistain-form-submission .formio-component-datetime .input-group {
    flex-wrap: nowrap !important;
}

/* ============================================
   PROTECT FILAMENT FROM BOOTSTRAP (Form Builder page)
   Bootstrap 4 CSS is loaded for FormioJS builder
   ============================================ */

/* Prevent Bootstrap from overriding Filament body font */
html body .fi-layout,
html body .fi-main,
html body .fi-topbar,
html body .fi-header {
    font-family: var(--font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

/* Prevent Bootstrap card styles from leaking into Filament */
html body .fi-main > .fi-section.card,
html body .fi-section.card {
    border: none !important;
    box-shadow: none !important;
}

/* Prevent Bootstrap from overriding Filament buttons */
html body .fi-btn,
html body .fi-btn:hover,
html body .fi-btn:focus {
    font-family: var(--font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

/* Prevent Bootstrap labels from affecting Filament forms */
html body .fi-fo-field-wrp label,
html body .fi-input-wrp label {
    display: block !important;
    margin-bottom: 0.25rem !important;
}

/* ============================================
   REPEATER ITEM HEADERS - Grey background
   Distinguishes collapsed repeater items visually
   ============================================ */
.fi-fo-repeater-item-header,
html body .fi-fo-repeater-item-header {
    background-color: #e5e7eb !important;
    border-bottom: 1px solid #d1d5db !important;
}

.dark .fi-fo-repeater-item-header,
.dark html body .fi-fo-repeater-item-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   Urgent Row Highlighting (yellow)
   ============================================ */
.urgent-row { background-color: #fef9c3 !important; }
.dark .urgent-row { background-color: #854d0e33 !important; }
.urgent-row:hover { background-color: #fef08a !important; }
.dark .urgent-row:hover { background-color: #854d0e55 !important; }

/* ============================================
   Pending Row Highlighting (red)
   ============================================ */
.pending-row { background-color: #fee2e2 !important; }
.dark .pending-row { background-color: #991b1b33 !important; }
.pending-row:hover { background-color: #fecaca !important; }
.dark .pending-row:hover { background-color: #991b1b55 !important; }

/* ============================================
   Ready to Approve Row Highlighting (green)
   ============================================ */
.ready-row { background-color: #dcfce7 !important; }
.dark .ready-row { background-color: #16653433 !important; }
.ready-row:hover { background-color: #bbf7d0 !important; }
.dark .ready-row:hover { background-color: #16653455 !important; }

/* ============================================
   CHECKBOX LIST - Checkbox inline with label
   Prevents checkbox from sitting above the label
   ============================================ */
label.fi-fo-checkbox-list-option-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
}

/* Remove top margin that pushes checkbox down */
label.fi-fo-checkbox-list-option-label input[type="checkbox"],
label.fi-fo-checkbox-list-option-label .fi-input-wrp {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

/* Label text: single line, no wrapping */
label.fi-fo-checkbox-list-option-label > div {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

label.fi-fo-checkbox-list-option-label span.fi-fo-checkbox-list-option-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}