/*
 * Supplementary stylesheet for custom Filament views (app/Filament/**,
 * resources/views/filament/**) — the panel's own compiled CSS
 * (public/css/filament/filament/app.css) is a pre-purged vendor bundle
 * that only contains utility classes Filament itself uses internally, so
 * any Tailwind class used only in our own custom Blade views is silently
 * dropped from it. This file is scanned against our own source instead
 * and loaded alongside the vendor bundle (not replacing it).
 */
@import 'tailwindcss';

@source '../../../app/Filament/**/*.php';
@source '../../../resources/views/filament/**/*.blade.php';

@variant dark (&:where(.dark, .dark *));

/*
 * Some header actions (see InstituteCoursesTab) are registered on the
 * page so `wire:click="mountAction('name')"` from a section-specific
 * button in a custom view works, but their own default header-toolbar
 * button would be redundant next to that contextual button — hide it
 * here instead of Filament's ->hidden(), which also blocks mounting.
 */
.fi-hidden-action {
    display: none;
}

/*
 * Permanently dark sidebar (independent of the panel's own light/dark
 * toggle), matching the legacy AdminLTE panel's look admins are used to.
 * !important throughout: Filament's own sidebar rules live in a
 * separately-loaded, higher-precedence vendor stylesheet and use the same
 * class-level specificity, so a plain override can lose on load order.
 */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-footer {
    background-color: #111827 !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand text (no logo image configured, so Filament renders the brand
   name as plain text) defaults to a dark color — force it white wherever
   it appears (desktop sidebar header, mobile sidebar drawer header). */
.fi-logo {
    color: #fff !important;
}

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

.fi-sidebar-item-label,
.fi-sidebar-item-icon,
.fi-sidebar-group-btn .fi-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

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

.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: rgba(2, 128, 144, 0.35) !important;
}

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

/*
 * Topbar in the same "legacy AdminLTE" blue, white icons/text — same
 * !important rationale as the sidebar above.
 */
.fi-topbar {
    background: linear-gradient(90deg, #4a9bc7 0%, #3c8dbc 100%) !important;
    box-shadow: none !important;
}

/*
 * Scoped to the sidebar-toggle buttons specifically — NOT every icon in
 * the topbar (a blanket `.fi-topbar svg` rule here previously also turned
 * the theme-switcher's icons white, making them invisible against its own
 * light pill background).
 */
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn,
.fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-close-collapse-sidebar-btn {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fi-topbar-open-sidebar-btn:hover,
.fi-topbar-close-sidebar-btn:hover,
.fi-topbar-open-collapse-sidebar-btn:hover,
.fi-topbar-close-collapse-sidebar-btn:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.fi-user-menu-trigger,
.fi-user-menu-trigger-text {
    color: #fff !important;
}

.fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}