/* ============================================================
   Wolflabs Admin – Core styles
   Colour palette matches the original WolfLabs CMS:
   light grey chrome, #AAAAAA hover, #b6bdca active.
   ============================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
    --admin-topbar-bg:        #ffffff;
    --admin-topbar-border:    #d8dce4;
    --admin-topbar-text:      #444444;
    --admin-topbar-text-sub:  #888888;
    --admin-topbar-height:    52px;

    /* CMS exact hover / active values */
    --admin-nav-hover-bg:     #aaaaaa;
    --admin-nav-hover-text:   #ffffff;
    --admin-nav-active-bg:    #b6bdca;
    --admin-nav-active-text:  #263248;

    /* User / last-item pill — CMS ".k-last" was #555 */
    --admin-user-bg:          #555555;
    --admin-user-text:        #ffffff;
    --admin-user-hover-bg:    #444444;

    --admin-dropdown-bg:      #ffffff;
    --admin-dropdown-border:  #d0d4db;
    --admin-dropdown-text:    #444444;
    --admin-dropdown-hover:   #f0f2f5;

    --admin-submenu-bg:       #f7f8fa;
    --admin-submenu-offset:   calc(100% + 1px);

    --admin-body-bg:          #f4f6f9;
    --admin-content-pad:      1.5rem;
}

/* ── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background-color: var(--admin-body-bg);
    color: var(--admin-topbar-text);
}

/* ============================================================
   TOP BAR
   ============================================================ */

.admin-topbar {
    background-color: var(--admin-topbar-bg);
    border-bottom: 1px solid var(--admin-topbar-border);
    height: var(--admin-topbar-height);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.admin-topbar .container-fluid {
    height: 100%;
    align-items: stretch;
}

/* ── Brand / Logo ──────────────────────────────────────────── */
.admin-brand {
    display: flex;
    align-items: center;
    padding: 0 1rem 0 0;
    flex-shrink: 0;
    text-decoration: none;
}

.admin-brand:hover { opacity: .85; }

.admin-brand-logo {
    height: 32px;
    width: auto;
    display: block;
}

/* ── Primary nav links ─────────────────────────────────────── */
.admin-nav-link {
    color: var(--admin-topbar-text) !important;
    padding: 0 .85rem !important;
    height: var(--admin-topbar-height);
    display: flex !important;
    align-items: center;
    gap: .35rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .02em;
    border-bottom: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
    white-space: nowrap;
    text-decoration: none !important;
    background-color: transparent;
}

.admin-nav-link:hover,
.admin-nav-link:focus {
    background-color: var(--admin-nav-hover-bg) !important;
    color: var(--admin-nav-hover-text) !important;
    border-bottom-color: var(--admin-nav-hover-bg);
}

.admin-nav-link.active {
    background-color: var(--admin-nav-active-bg) !important;
    color: var(--admin-nav-active-text) !important;
    border-bottom-color: var(--admin-nav-active-text);
}

.admin-nav-link.dropdown-toggle::after {
    margin-left: .3rem;
    opacity: .65;
}

/* ── User pill (right side) — matches CMS ".k-last" = #555 ── */
.admin-user-link {
    background-color: var(--admin-user-bg);
    color: var(--admin-user-text) !important;
    padding: 0 1rem !important;
    height: var(--admin-topbar-height);
    display: flex !important;
    align-items: center;
    gap: .45rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .12s ease;
}

.admin-user-link:hover,
.admin-user-link:focus {
    background-color: var(--admin-user-hover-bg) !important;
    color: var(--admin-user-text) !important;
}

.admin-user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Mobile toggler ────────────────────────────────────────── */
.admin-toggler {
    border: 1px solid var(--admin-topbar-border);
    color: var(--admin-topbar-text);
    padding: .25rem .5rem;
    font-size: 1.2rem;
    background: none;
}

.admin-toggler:focus { box-shadow: 0 0 0 2px rgba(170,170,170,.4); }

/* ============================================================
   DROPDOWN MENUS (level 1)
   ============================================================ */

.admin-dropdown {
    background-color: var(--admin-dropdown-bg);
    border: 1px solid var(--admin-dropdown-border);
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    padding: .3rem 0;
    min-width: 180px;
    margin-top: 0 !important;
}

.admin-dropdown-item {
    color: var(--admin-dropdown-text) !important;
    font-size: 1rem;
    padding: .45rem 1rem;
    transition: background-color .1s ease;
    white-space: nowrap;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.admin-dropdown-item:hover,
.admin-dropdown-item:focus {
    background-color: var(--admin-dropdown-hover) !important;
    color: var(--admin-topbar-text) !important;
}

.admin-dropdown .dropdown-header {
    color: var(--admin-topbar-text-sub);
    font-size: .7rem;
    padding: .4rem 1rem .2rem;
    letter-spacing: .04em;
}

.admin-dropdown .dropdown-divider {
    border-color: var(--admin-dropdown-border);
    margin: .25rem 0;
}

/* ── Level-2 submenu ───────────────────────────────────────── */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-toggle::after {
    display: none;
}

.admin-submenu {
    background-color: var(--admin-submenu-bg);
    border-left: 3px solid var(--admin-nav-active-bg); /* CMS accent */
    position: absolute;
    top: 0;
    left: var(--admin-submenu-offset);
    display: none;
    z-index: 1050;
}

.admin-submenu.show {
    display: block;
}

@media (max-width: 1200px) {
    .admin-submenu {
        left: auto;
        right: var(--admin-submenu-offset);
    }
}

/* ============================================================
   BODY / PAGE LAYOUT
   ============================================================ */

.admin-body {
    min-height: calc(100vh - var(--admin-topbar-height));
    background-color: var(--admin-body-bg);
}

.admin-content-wrapper {
    padding: var(--admin-content-pad);
   /* max-width: 1600px; */
}

.admin-page-header {
    border-bottom: 1px solid #dde2ec;
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
}

.admin-page-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #263248;
    margin: 0;
}

.admin-page-subtitle {
    font-size: .82rem;
    color: #6c757d;
    margin: .2rem 0 0;
}

/* ── Dashboard stat cards ──────────────────────────────────── */
.admin-stat-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #e8ecf2;
}

.admin-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.admin-stat-label {
    font-size: .72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
}

.admin-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #263248;
    line-height: 1.2;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.admin-login-wrapper {
    min-height: 100vh;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.admin-login-box {
    width: 100%;
    max-width: 390px;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 2px 16px rgba(0,0,0,.10);
    border: 1px solid var(--admin-topbar-border);
}

.admin-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
}

.login-logo {
    height: 48px;
    width: auto;
}

.login-brand-sub {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--admin-topbar-text-sub);
    font-weight: 500;
}

.admin-login-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #263248;
    margin: 0 0 1.1rem;
}

.admin-form-label {
    color: var(--admin-topbar-text);
    font-size: .8rem;
    font-weight: 500;
    margin-bottom: .3rem;
}

.admin-form-control {
    border: 1px solid #d0d4db;
    border-radius: 4px;
    font-size: .85rem;
    color: #333;
}

.admin-form-control:focus {
    border-color: #aaaaaa;
    box-shadow: 0 0 0 3px rgba(170,170,170,.2);
}

.admin-login-btn {
    background-color: #555555;
    border-color: #555555;
    font-weight: 600;
    padding: .55rem;
    font-size: .85rem;
    border-radius: 4px;
    transition: background-color .13s ease, border-color .13s ease;
}

.admin-login-btn:hover,
.admin-login-btn:focus {
    background-color: #444444;
    border-color: #444444;
}

.admin-login-alert {
    font-size: .8rem;
    padding: .55rem .85rem;
    border-radius: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
    .admin-topbar {
        height: auto;
        min-height: var(--admin-topbar-height);
    }

    .admin-topbar .container-fluid {
        flex-wrap: wrap;
        padding-top: .4rem;
        padding-bottom: .4rem;
    }

    .admin-nav-link {
        height: auto;
        padding: .55rem .9rem !important;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .admin-nav-link:hover,
    .admin-nav-link.active {
        border-left-color: var(--admin-nav-hover-bg);
        border-bottom-color: transparent;
    }

    .admin-user-link {
        height: auto;
        padding: .55rem .9rem !important;
    }

    .admin-submenu {
        position: static;
        left: 0;
        display: none;
        margin-left: 1rem;
        border-left: 3px solid var(--admin-nav-active-bg);
    }

    .admin-submenu.show { display: block; }
}

/* ── Utility ──────────────────────────────────────────────── */
.blazor-error-boundary::after {
    content: "An error has occurred.";
}