@import 'tailwindcss';

/* Tabler admin UI (Bootstrap-based) — primary component framework for the
   authenticated gateway pages. Imported after Tailwind so Tabler components win. */
@import '@tabler/core/dist/css/tabler.min.css';
@import '@tabler/icons-webfont/dist/tabler-icons.min.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* ── Glass sidebar (Obvizio-style) ─────────────────────────────────────────
   The vertical sidebar is a permanent left rail. We force its menu visible at
   ALL widths (independent of Bootstrap's collapse + viewport, which Tailwind's
   reset and a narrow window can otherwise leave display:none). */
.navbar-vertical.navbar-glass {
    background: linear-gradient(180deg, rgba(20, 28, 46, 0.92), rgba(12, 18, 30, 0.96));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

/* Always render the menu (permanent rail) — fixes the invisible/collapsed bug. */
.navbar-vertical.navbar-glass > .container-fluid > .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
}
.navbar-vertical.navbar-glass .navbar-nav {
    flex-direction: column;
    width: 100%;
}

/* Legible, glassy nav items */
.navbar-vertical.navbar-glass .navbar-brand,
.navbar-vertical.navbar-glass .nav-link-title { color: #fff; }
.navbar-vertical.navbar-glass .nav-link {
    color: rgba(255, 255, 255, 0.74);
    border-radius: 0.5rem;
    margin: 1px 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.navbar-vertical.navbar-glass .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}
.navbar-vertical.navbar-glass .nav-item.active > .nav-link {
    color: #fff;
    background: rgba(45, 212, 160, 0.16);
    box-shadow: inset 2px 0 0 0 #2dd4a0;
}
.navbar-vertical.navbar-glass .nav-link-icon { color: rgba(255, 255, 255, 0.6); }
.navbar-vertical.navbar-glass .nav-item.active .nav-link-icon { color: #2dd4a0; }
.navbar-vertical.navbar-glass .text-secondary { color: rgba(255, 255, 255, 0.4) !important; }