/* ==========================================================================
   AdminLTE 3 — Lite theme for your Blazor nav + cards + tables
   ========================================================================== */

/* --------- Palette & vars --------- */
:root {
    --al-bg: #111827; /* sidebar bg (slate-900) */
    --al-bg-2: #0f172a; /* darker */
    --al-border: #1f2937; /* slate-800 */
    --al-text: #e5e7eb; /* gray-200 */
    --al-text-dim: #9ca3af; /* gray-400 */
    --al-primary: #3b82f6; /* blue-500 */
    --al-primary-2: #2563eb; /* blue-600 */
    --al-success: #22c55e;
    --al-warning: #f59e0b;
    --al-danger: #ef4444;
    --al-radius: .5rem;
    --al-sidebar-w: 280px;
}

/* --------- Sidebar (your .navmenu) --------- */
.navmenu {
    background: linear-gradient(180deg, var(--al-bg), var(--al-bg-2));
    color: var(--al-text);
    border-right: 1px solid var(--al-border);
    width: var(--al-sidebar-w);
    min-height: 100%;
    padding: .5rem 0;
    position: relative;
}

    .navmenu a, .navmenu button {
        color: var(--al-text);
        text-decoration: none;
    }

    .navmenu .nav-item, .navmenu .section-toggle {
        display: flex;
        align-items: center;
        gap: .65rem;
        width: 100%;
        padding: .6rem .9rem;
        text-align: left;
        font-size: .95rem;
        border: 0;
        background: transparent;
        cursor: pointer;
        transition: background .15s ease-in-out, color .15s ease-in-out;
    }

        .navmenu .nav-item:hover, .navmenu .section-toggle:hover {
            background: rgba(255,255,255,.06);
        }

    .navmenu .caret {
        margin-left: auto;
        opacity: .7;
    }

    .navmenu .submenu {
        display: none;
        padding-left: 0;
    }

        .navmenu .submenu.open {
            display: block;
        }

        .navmenu .submenu > li > .nav-item,
        .navmenu .submenu > li > .section-toggle {
            padding-left: 1.1rem;
        }

    .navmenu .dropdown.nested {
        margin-left: 0;
        padding-left: 0;
    }

        .navmenu .dropdown.nested > .submenu {
            margin: .2rem 0 .6rem 0;
            padding-left: .9rem;
            border-left: 2px solid rgba(255,255,255,.075);
        }

    /* icons */
    .navmenu i.fas, .navmenu i.fa-solid, .navmenu i.fa {
        width: 1.25rem;
        text-align: center;
    }

    /* --------- Brand (opzionale) --------- */
    .navmenu .brand {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .6rem .9rem .4rem .9rem;
        margin-bottom: .25rem;
        font-weight: 600;
        letter-spacing: .2px;
    }

        .navmenu .brand .brand-mini {
            display: inline-grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: .4rem;
            background: var(--al-primary-2);
            color: white;
            font-weight: 700;
        }

/* --------- Content helpers (AdminLTE vibe) --------- */
.content-wrapper {
    padding: 1rem;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

    .content-header h3 {
        margin: 0;
        font-size: 1.15rem;
    }

/* Cards */
.card {
    background: #fff;
    border: 0;
    border-radius: var(--al-radius);
    box-shadow: 0 6px 22px rgba(17,24,39,.06), 0 2px 8px rgba(17,24,39,.04);
    margin-bottom: 1rem;
}

.card-header {
    border-bottom: 1px solid #efefef;
    padding: .75rem 1rem;
    font-weight: 600;
    background: #fff;
    border-top-left-radius: var(--al-radius);
    border-top-right-radius: var(--al-radius);
}

.card-body {
    padding: 1rem;
}

/* Small boxes (AdminLTE-like) */
.small-box {
    border-radius: var(--al-radius);
    color: #fff;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

    .small-box .inner h3 {
        font-size: 1.6rem;
        margin: 0 0 .25rem 0;
    }

    .small-box .inner p {
        margin: 0;
        opacity: .9;
    }

    .small-box .icon {
        position: absolute;
        right: .75rem;
        top: .6rem;
        font-size: 2rem;
        opacity: .18;
    }

.bg-primary {
    background: var(--al-primary) !important;
}

.bg-success {
    background: var(--al-success) !important;
}

.bg-warning {
    background: var(--al-warning) !important;
}

.bg-danger {
    background: var(--al-danger) !important;
}

/* Tables */
.table thead.table-light th {
    background: #f8fafc;
    color: #0f172a;
    border-bottom-color: #e5e7eb;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #fbfdff;
}

.table-sm td, .table-sm th {
    padding: .5rem .6rem;
}

/* Progress */
.progress {
    background: #eef2f7;
    height: 14px;
    border-radius: 999px;
}

.progress-bar {
    background: var(--al-primary);
    font-size: .72rem;
}

/* Badges */
.badge {
    border-radius: 999px;
    font-weight: 600;
}

.text-bg-danger {
    background: var(--al-danger) !important;
    color: #fff !important;
}

.text-bg-warning {
    background: var(--al-warning) !important;
    color: #111 !important;
}

/* Alerts */
.alert {
    border-radius: .6rem;
}

/* Make navmenu sticky on large screens (optional) */
@media (min-width: 992px) {
    .layout-with-sidebar {
        display: grid;
        grid-template-columns: var(--al-sidebar-w) 1fr;
        min-height: 100vh;
    }

    .navmenu {
        position: sticky;
        top: 0;
        align-self: start;
    }
}
/* === Light Sidebar override === */
.navmenu {
    background: #ffffff; /* LIGHT */
    color: #0f172a;
    border-right: 1px solid #e5e7eb;
}

    .navmenu a, .navmenu button {
        color: #0f172a;
    }

    .navmenu .nav-item, .navmenu .section-toggle {
        background: transparent;
    }

        .navmenu .nav-item:hover, .navmenu .section-toggle:hover {
            background: #f8fafc; /* hover chiaro */
        }

    .navmenu .dropdown.nested > .submenu {
        border-left: 2px solid #e5e7eb; /* separatore chiaro */
    }

    .navmenu .caret {
        opacity: .55;
    }

    .navmenu .brand .brand-mini {
        background: #e5edff; /* bollino chiaro */
        color: #1f3a8a;
    }