/*
 * Centro Ftalmológico — Custom Filament Theme
 * Primary: #329f4b (green) | Accent: #0d4b84 (blue)
 */

/* ================================================================
   SIDEBAR — Green gradient background
   ================================================================ */

.fi-main-sidebar {
    background: linear-gradient(175deg, #329f4b 0%, #00390d 100%) !important;
}

/* The sidebar header (logo area) has bg-white hardcoded — override it */
.fi-sidebar-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    --tw-ring-shadow: none !important;
    --tw-shadow: none !important;
}

/* Sidebar nav items — white text on dark blue */
.fi-sidebar-item-button {
    color: rgba(255, 255, 255, 0.72) !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Nav icons */
.fi-sidebar-item-icon {
    color: inherit !important;
}

/* Group labels */
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.45) !important;
    letter-spacing: 0.08em;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
}

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

/* Collapse / expand icon buttons in the sidebar header */
.fi-sidebar-header .fi-icon-btn {
    color: rgba(255, 255, 255, 0.6) !important;
}

.fi-sidebar-header .fi-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Collapsible group button (the whole clickable header row + arrow) */
.fi-sidebar-group-button button {
    color: rgba(255, 255, 255, 0.55) !important;
}

.fi-sidebar-group-button button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* The chevron/arrow SVG inside the group button */
.fi-sidebar-group-button button svg {
    color: inherit !important;
}

/* Brand name text */
.fi-sidebar-header a,
.fi-logo {
    color: #ffffff !important;
}

/* Logo: show white version in sidebar, coloured version on auth pages */
.fi-sidebar-header .fi-logo-auth   { display: none; }
.fi-sidebar-header .fi-logo-sidebar { display: block; max-height: 3rem; width: auto; }

.fi-simple-layout .fi-logo-sidebar { display: none; }
.fi-simple-layout .fi-logo-auth    { display: block; max-height: 3rem; width: auto; }

/* Scrollbar in sidebar */
.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* ================================================================
   TOPBAR — Subtle border accent
   ================================================================ */

.fi-topbar nav {
    border-bottom: 1px solid #b9cfbe !important;
    box-shadow: 0 1px 12px rgba(13, 75, 132, 0.08) !important;
}

.dark .fi-topbar nav {
    border-bottom-color: #b9cfbe !important;
    box-shadow: 0 1px 12px rgba(13, 75, 132, 0.25) !important;
}

/* ================================================================
   MAIN CONTENT — Subtle diagonal gradient background
   ================================================================ */

/* Light mode: very light blue tinted white — applied to body so it fills the full viewport */
body {
    background: linear-gradient(
        135deg,
        #F8FAFC 0%,
        #efefef 45%,
        #ededed 100%
    );
    min-height: 100vh;
}

/* Remove gradient from the content container so body shows through */
.fi-main-ctn {
    background: transparent;
}

/* Dark mode: deep navy→dark teal */
.dark .fi-main-ctn {
    background: linear-gradient(
        135deg,
        #0f172a 0%,
        #0c1a2e 45%,
        #091a10 100%
    );
}

/* ================================================================
   LOGIN PAGE — Gradient background
   ================================================================ */

.fi-simple-layout {
    background: linear-gradient(
        135deg,
        #329f4b 0%,
        #1e7c34 100%
    ) !important;
}

/* Login card */
.fi-simple-main {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
}

/* ================================================================
   WIDGETS & CARDS — Subtle accent on hover
   ================================================================ */

.fi-wi-stats-overview-stat {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 75, 132, 0.22) !important;
}

.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 8px 24px rgba(13, 75, 132, 0.3) !important;
}

ul.agregado-list li { border-bottom:1px solid rgba(0,0,0,0.05) !important; }
ul.agregado-list li:last-child { border-bottom:0; }

/* Mobile select-all control (injected by JS) — hidden on desktop */
.mg-mobile-select-all {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    padding: 0.25rem 0;
}

/* ================================================================
   RESPONSIVE TABLES — Card layout on viewports < 1024px
   ================================================================ */

@media (max-width: 1023px) {

    /* Switch table and body to block so rows can stack */
    .fi-ta-table,
    .fi-ta-table tbody {
        display: block;
    }

    /* Hide the column header row — labels come from data-label ::before */
    .fi-ta-table thead {
        display: none;
    }

    /* Each row becomes a card */
    .fi-ta-table .fi-ta-row {
        display: block !important;
        width: auto;
        margin: 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        background: #f2f3f3;
        overflow: hidden;
    }

    .fi-ta-actions-cell .whitespace-nowrap.px-3.py-4 {
        padding-top:0 !important;
        padding-bottom:0 !important;
        width:100%;
        background-color:#FFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        border-radius:4px;
    }
    .fi-ta-actions-cell .fi-ta-actions { justify-content:center !important; }

    .fi-ta-text-item { text-align:right; }

    .dark .fi-ta-table .fi-ta-row {
        background: #1e293b;
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* Remove inner column wrapper padding so cell height fits content */
    .fi-ta-table .fi-ta-cell .fi-ta-col-wrp,
    .fi-ta-table .fi-ta-cell .fi-ta-text {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Each cell: flex row — label on left, value on right */
    .fi-ta-table .fi-ta-cell {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid #f3f4f6;
        white-space: normal;
    }

    .dark .fi-ta-table .fi-ta-cell {
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    /* Column label rendered from data-label attribute */
    .fi-ta-table .fi-ta-cell[data-label]::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #9ca3af;
        flex-shrink: 0;
        margin-right: 0.75rem;
    }

    /* Actions cell: no label, right-aligned, no bottom border */
    .fi-ta-table .fi-ta-cell:last-child {
        border-bottom: none;
        justify-content: flex-end;
    }

    .fi-ta-table .fi-ta-cell:last-child::before {
        content: none;
    }

    /* Remove whitespace-nowrap from tbody so values can wrap on narrow screens */
    .fi-ta-table tbody {
        white-space: normal;
    }

    /* Ensure badges and inline elements don't overflow */
    .fi-ta-table .fi-ta-cell .fi-badge,
    .fi-ta-table .fi-ta-cell [class*="fi-badge"] {
        white-space: nowrap;
    }

    /* Show mobile select-all control (checkbox only, no text) */
    .mg-mobile-select-all {
        display: flex !important;
    }

    .mg-mobile-select-all span {
        display: none;
    }

    /* Hide bulk-selection checkbox cell — replaced by toolbar control */
    .fi-ta-table .fi-ta-selection-cell {
        display: none !important;
    }

    /* Action buttons: larger icons, keep icon-only */
    .fi-ta-table .fi-ta-actions-cell .fi-icon-btn {
        width: 2.25rem !important;
        height: 2.25rem !important;
        margin: 0 !important;
    }

    .fi-ta-table .fi-ta-actions-cell .fi-icon-btn .fi-icon-btn-icon {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    /* Fix first cell being flushed to the edge (first-of-type:ps-1 override) */
    .fi-ta-table .fi-ta-cell:first-of-type {
        padding-inline-start: 0.75rem !important;
    }
    .fi-ta-table .fi-ta-cell:last-of-type {
        padding-inline-end: 0.75rem !important;
    }

    /* ── Custom responsive tables (widgets, PRISMA page) ─────────────────── */

    .mg-responsive-table,
    .mg-responsive-table tbody {
        display: block;
    }

    .mg-responsive-table thead {
        display: none;
    }

    .mg-responsive-table tbody tr {
        display: block !important;
        margin-bottom: 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        background: #ffffff;
        overflow: hidden;
    }

    .dark .mg-responsive-table tbody tr {
        background: #1e293b;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .mg-responsive-table tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid #f3f4f6;
        white-space: normal;
    }

    .dark .mg-responsive-table tbody td {
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .mg-responsive-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #9ca3af;
        flex-shrink: 0;
        margin-right: 0.75rem;
    }

    .mg-responsive-table tbody td:last-child {
        border-bottom: none;
    }
}