/* ==========================================================================================
   AdvEntInn side navigation - deep navy rail, coloured module tiles, pill states, user card
   ========================================================================================== */
:root {
    --side-bg-1: #0A2240;
    --side-bg-2: #0B2E52;
    --side-ink: #C3D0E2;
    --side-ink-dim: #7F93AE;
    --side-hover: rgba(255, 255, 255, .06);
    --side-line: rgba(255, 255, 255, .08);
    --side-amber: #F2A900;
}

/* app bar: one continuous navy surface with the rail */
.mud-appbar {
    background: linear-gradient(90deg, #0A2240 0%, #0B3D6E 55%, #12508F 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 4px 18px rgba(4, 20, 40, .28) !important;
}

/* drawer surface */
.mud-drawer.app-drawer {
    background: radial-gradient(420px 260px at 0% 0%, rgba(90, 169, 255, .12), transparent 70%),
                linear-gradient(180deg, var(--side-bg-1) 0%, var(--side-bg-2) 100%) !important;
    border-right: 0 !important;
    box-shadow: 4px 0 24px rgba(4, 20, 40, .18) !important;
}
.mud-drawer.app-drawer .mud-drawer-content { height: 100%; }

.side { display: flex; flex-direction: column; height: 100%; color: var(--side-ink); }
.side-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 6px; }
.side-scroll::-webkit-scrollbar-track { background: transparent; }

/* section labels */
.side-label {
    margin: 18px 12px 6px; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--side-ink-dim);
    display: flex; align-items: center; gap: 8px;
}
.side-label::after { content: ""; flex: 1; height: 1px; background: var(--side-line); }

/* reset MudBlazor nav colours inside the rail */
.side-nav, .side-nav .mud-navmenu { color: var(--side-ink); }
.side-nav .mud-nav-item, .side-nav .mud-nav-group { margin: 2px 0; }

/* ---- top-level rows (Dashboard + module headers) */
.side-nav > .mud-nav-item > .mud-nav-link,
.side-nav > .mud-nav-group > .mud-nav-link {
    position: relative; min-height: 42px; padding: 6px 10px; border-radius: 12px; color: var(--side-ink);
    font-size: .9rem; font-weight: 500; letter-spacing: .01em; transition: background .18s ease, color .18s ease;
}
.side-nav > .mud-nav-item > .mud-nav-link:hover,
.side-nav > .mud-nav-group > .mud-nav-link:hover { background: var(--side-hover); color: #fff; }

/* coloured icon tile */
.side-nav > .mud-nav-item > .mud-nav-link .mud-nav-link-icon,
.side-nav > .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    box-sizing: content-box; width: 18px; height: 18px; padding: 7px; margin-right: 12px; border-radius: 10px;
    color: var(--accent, #5AA9FF) !important;
    background: color-mix(in srgb, var(--accent, #5AA9FF) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #5AA9FF) 26%, transparent);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.side-nav > .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon { color: var(--side-ink-dim) !important; width: 20px; height: 20px; }

/* module that is open: lit tile and white title */
.side-nav > .mud-nav-group:has(> .mud-collapse-container.mud-collapse-entered) > .mud-nav-link,
.side-nav > .mud-nav-group:has(> .mud-collapse-container.mud-collapse-entering) > .mud-nav-link { color: #fff; background: rgba(255, 255, 255, .04); }
.side-nav > .mud-nav-group:has(> .mud-collapse-container.mud-collapse-entered) > .mud-nav-link .mud-nav-link-icon {
    color: #0A2240 !important; background: var(--accent, #5AA9FF); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #5AA9FF) 45%, transparent);
}

/* active top-level link (Dashboard) */
.side-nav > .mud-nav-item > .mud-nav-link.active {
    color: #fff !important; background: linear-gradient(90deg, rgba(90, 169, 255, .26), rgba(90, 169, 255, .08)) !important;
    box-shadow: inset 0 0 0 1px rgba(90, 169, 255, .25);
}
.side-nav > .mud-nav-item > .mud-nav-link.active .mud-nav-link-icon { color: #0A2240 !important; background: var(--accent, #5AA9FF); }
.side-nav > .mud-nav-item > .mud-nav-link.active::before,
.side-nav .mud-collapse-container .mud-nav-link.active::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: var(--side-amber);
    box-shadow: 0 0 12px rgba(242, 169, 0, .55);
}

/* ---- sub-items: indented under a guide line */
.side-nav .mud-collapse-container .mud-navmenu { position: relative; margin: 2px 0 8px 26px; padding-left: 8px; }
.side-nav .mud-collapse-container .mud-navmenu::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #5AA9FF) 55%, transparent), var(--side-line));
}
.side-nav .mud-collapse-container .mud-nav-item { margin: 1px 0; }
.side-nav .mud-collapse-container .mud-nav-link {
    position: relative; min-height: 32px; padding: 5px 10px 5px 14px !important; border-radius: 9px; color: var(--side-ink-dim);
    font-size: .835rem; font-weight: 400; transition: background .15s ease, color .15s ease, padding .15s ease;
}
.side-nav .mud-collapse-container .mud-nav-link:hover { color: #fff; background: var(--side-hover); padding-left: 18px !important; }
.side-nav .mud-collapse-container .mud-nav-link.active {
    color: #fff !important; font-weight: 600; background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #5AA9FF) 24%, transparent), rgba(255, 255, 255, .03)) !important;
}
/* the collapse container clips overflow: keep the amber marker inside the pill */
.side-nav .mud-collapse-container .mud-nav-link.active::before { left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; }
.side-nav .mud-nav-link .mud-nav-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* coming next */
.side-nav .nav-soon .mud-nav-link.mud-nav-link-disabled { color: rgba(195, 208, 226, .45) !important; cursor: default; }
.side-nav .soon {
    margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #F7D154; background: rgba(247, 209, 84, .12); border: 1px solid rgba(247, 209, 84, .25);
}

/* keyboard focus */
.side-nav .mud-nav-link:focus-visible { outline: 2px solid var(--side-amber); outline-offset: 1px; }

/* ---- user card */
.side-user {
    display: flex; align-items: center; gap: 10px; margin: 0 10px 10px; padding: 10px 10px 10px 12px; border-radius: 14px;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--side-line);
}
.side-user .avatar {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: #0A2240;
    background: linear-gradient(135deg, #F2A900, #FFD36B); box-shadow: 0 0 0 2px rgba(242, 169, 0, .25);
}
.side-user .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.side-user .nm { color: #fff; font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .sub { color: var(--side-ink-dim); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .out { color: var(--side-ink-dim) !important; }
.side-user .out:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }

/* phones: keep the property name on one line in the app bar */
@media (max-width: 600px) {
    .mud-appbar .mud-button-root.text-none { min-width: 0; max-width: 150px; }
    .mud-appbar .mud-button-root.text-none .mud-button-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .mud-appbar .mud-button-root.text-none .mud-button-icon-start, .mud-appbar .mud-button-root.text-none .mud-button-icon-end { display: none; }
}

@media print { .mud-drawer.app-drawer { display: none !important; } }