/*
 * EmployeeTrack Admin Panel - Custom Styles
 * Fixes SVG sizing and provides utility classes for custom pages
 */

/* Fix unconstrained SVGs in Filament page headers */
.fi-page-header-heading svg,
.fi-header svg,
.fi-topbar svg,
.fi-sidebar svg,
[class*="fi-"] svg {
    max-width: 1.5rem;
    max-height: 1.5rem;
}

/* But allow SVGs in our custom content to be properly sized */
.fi-page .fi-page-content svg {
    max-width: none;
    max-height: none;
}

/* Page content SVGs with explicit style should be respected */
.fi-page .fi-page-content svg[style] {
    max-width: none;
    max-height: none;
}

/* ================================================================
 * Mobile-responsive additions (added by session on 2026-04-23)
 * Targets KPI grids, custom tables, filter bars, widgets.
 * ================================================================ */

/* --- KPI cards: wrap cleanly on narrow screens --- */
.pr-kpi {
    min-width: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pr-kpi-big { font-size: 26px; font-weight: 800; line-height: 1; color: #fff; }
.pr-kpi-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.85); }
.pr-kpi-sub { font-size: 11px; color: rgba(255,255,255,.85); }
.pr-kpi     { color: #fff; border-radius: 10px; }

.pr-chip {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

/* Mobile breakpoints */
@media (max-width: 768px) {
    /* KPI cards: 2 per row, then 1 on very narrow */
    [style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns: repeat(auto-fit, minmax(240px"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(auto-fit, minmax(350px"] {
        grid-template-columns: 1fr !important;
    }
    .pr-kpi-big { font-size: 22px; }

    /* Data tables: horizontal scroll instead of crushed columns */
    .fi-page-content table,
    .fi-page .fi-section-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .fi-page-content table th,
    .fi-page-content table td {
        white-space: normal;
    }

    /* Filter bars in custom pages — stack vertically */
    .fi-page-content [style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-direction: column;
        align-items: stretch !important;
    }
    .fi-page-content input[type="date"],
    .fi-page-content select,
    .fi-page-content input[type="text"] {
        width: 100%;
        min-width: 0 !important;
    }

    /* Section headings shrink slightly */
    .fi-section-heading { font-size: 14px !important; }
}

@media (max-width: 480px) {
    [style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
        grid-template-columns: 1fr !important;
    }
    .pr-kpi-big { font-size: 20px; }
}

/* --- Sticky-header for long scrolling tables --- */
.fi-page-content table thead th {
    position: sticky;
    top: 0;
    background: #f3f4f6;
    z-index: 1;
}

/* --- Softer focus ring on inputs inside our pages --- */
.fi-page-content input:focus,
.fi-page-content select:focus {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}

/* --- Make ThresholdAlerts + FreelanceWatch cards breathe on mobile --- */
@media (max-width: 768px) {
    .fi-section-content [style*="grid-template-columns: repeat(auto-fit, minmax(240px"],
    .fi-section-content [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
        grid-template-columns: 1fr !important;
    }
}