/*
 * 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;
}