/* =========================================================
   Shell: sidebar, topbar, page header, content grid.
   Markup is generated by assets/js/core/layout.js — every
   page ships only <div id="sidebar"> and <div id="topbar">.
   ========================================================= */

.app {
    display: flex;
    min-height: 100vh;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    box-shadow: var(--sidebar-shadow);
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: width var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: var(--topbar-h);
    padding: var(--s5) var(--s5) 18px;
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}

.sidebar__logo {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--hazra-purple), var(--hazra-purple-dark));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 17px;
    box-shadow: 0 8px 16px -8px rgba(93, 21, 140, .8);
    flex-shrink: 0;
}

.sidebar__name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: .5px;
    color: var(--hazra-purple);
    white-space: nowrap;
}

/* The logo's Bengali slogan. No letter-spacing — tracking breaks conjunct
   rendering in Bengali script. */
.sidebar__name small {
    display: block;
    font-family: var(--font-bn);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--hazra-purple-dark);
    margin-top: 2px;
}

/* The scrolling nav column. `position: relative` anchors the active pill. */
.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* No right padding: the active pill runs flush to the sidebar edge. */
    padding: var(--s3) 0 var(--s4);
    position: relative;

    /* The column still scrolls — wheel, drag, keyboard and scrollIntoView are
       untouched — but the bar itself is hidden. A permanent gutter (Windows,
       and any Linux/GTK theme with overlay scrollbars off) cuts into the
       active pill, which runs flush to the sidebar edge by design. */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* legacy Edge */
}

.sidebar__nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.nav-group {
    margin-bottom: var(--s2);
}

.nav-group__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 600;
    color: var(--text-muted);
    padding: 14px 0 6px calc(var(--nav-inset) + 18px);
    white-space: nowrap;
}

/* The item box is IDENTICAL to the pill box: left inset = --nav-inset,
   right edge = sidebar edge, height = --nav-h. */
.nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    height: var(--nav-h);
    margin: 4px 0 4px var(--nav-inset);
    padding: 0 18px;
    border-radius: var(--nav-radius) 0 0 var(--nav-radius);
    color: var(--text-mid);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.nav-item:hover:not(.active) {
    color: var(--hazra-purple);
    background: color-mix(in srgb, var(--hazra-purple) 7%, transparent);
    text-decoration: none;
}

.nav-item:hover:not(.active) i {
    transform: translateX(2px);
}

.nav-item i {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    font-size: 16px;
    transition: transform var(--dur) var(--ease);
}

/* Label optically centred against the pill. */
.nav-item span {
    line-height: 1;
    transform: translateY(1px);
}

.nav-item.active {
    color: var(--text-on-brand);
    background: transparent;
}

.nav-item__badge {
    margin-left: auto;
    background: var(--bad);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: var(--radius-full);
}

.nav-item.active .nav-item__badge {
    background: rgba(255, 255, 255, .25);
}

/* Active pill. Absolutely positioned behind the items and moved by
   layout.js — the same offsetTop/offsetHeight trick the original mockup
   used, so it slides between items instead of blinking. */
.nav-pill {
    position: absolute;
    left: var(--nav-inset);
    right: 0;
    border-radius: var(--nav-radius) 0 0 var(--nav-radius);
    background: linear-gradient(90deg, var(--hazra-purple), var(--hazra-purple-dark));
    /* drop-shadow, not box-shadow, so pill and fillets share one silhouette */
    filter: drop-shadow(-4px 8px 10px rgba(93, 21, 140, .35));
    transition: top .45s cubic-bezier(.2, .9, .2, 1), height var(--dur-slow) var(--ease);
    pointer-events: none;
    z-index: 1;
}

/* Each fillet is a --notch square just outside the pill, filled with the
   pill's right-edge colour and carved by a quarter circle, so the pill flares
   OUTWARD into the sidebar edge instead of ending in a straight cut. */
.nav-pill::before,
.nav-pill::after {
    content: '';
    position: absolute;
    right: 0;
    width: var(--notch);
    height: var(--notch);
}

.nav-pill::before {
    top: calc(var(--notch) * -1);
    background: radial-gradient(circle at top left,
            color-mix(in srgb, var(--hazra-purple-dark), transparent 100%) var(--notch),
            var(--hazra-purple-dark) calc(var(--notch) + .5px));
}

.nav-pill::after {
    bottom: calc(var(--notch) * -1);
    background: radial-gradient(circle at bottom left,
            color-mix(in srgb, var(--hazra-purple-dark), transparent 100%) var(--notch),
            var(--hazra-purple-dark) calc(var(--notch) + .5px));
}

.nav-pill.no-anim {
    transition: none;
}

.sidebar__foot {
    padding: 14px 18px;
    border-top: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.sidebar__me {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--hazra-purple), var(--hazra-purple-dark));
    flex-shrink: 0;
}

.sidebar__user {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1.3;
    min-width: 0;
}

.sidebar__user strong {
    font-size: 13px;
}

.sidebar__user span {
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar__collapse {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}

.sidebar__collapse:hover {
    background: var(--surface-3);
    color: var(--hazra-purple);
}

/* ---- collapsed state ---- */
.app.is-collapsed .sidebar {
    width: var(--sidebar-w-collapsed);
}

.app.is-collapsed .sidebar__name,
.app.is-collapsed .nav-group__label,
.app.is-collapsed .nav-item span,
.app.is-collapsed .nav-item__badge,
.app.is-collapsed .sidebar__user {
    display: none;
}

/* Collapsed, the icon column is what centres the item — the pill keeps its
   flush right edge, so the padding is asymmetric on purpose. */
.app.is-collapsed .nav-item {
    justify-content: center;
    padding: 0 12px 0 6px;
}

.app.is-collapsed .sidebar__brand {
    justify-content: center;
    padding: var(--s5) 0 18px;
}

.app.is-collapsed .sidebar__foot {
    justify-content: center;
}

.app.is-collapsed .shell {
    margin-left: var(--sidebar-w-collapsed);
}

/* Collapsed items get a tooltip, otherwise the icons are a guessing game. */
.app.is-collapsed .nav-item::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-dark);
    color: var(--surface);
    font-size: var(--fs-xs);
    padding: 5px 9px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
    z-index: 60;
}

.app.is-collapsed .nav-item:hover::after {
    opacity: 1;
}

/* =========================================================
   SHELL + TOPBAR
   ========================================================= */
.shell {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--dur-slow) var(--ease);
}

/* Floats on the page background rather than sitting in its own bar — the
   mockup has no chrome up here, only the search pill and the round buttons.
   Still sticky, so the controls survive a long list. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0 var(--gutter);
    flex-shrink: 0;
}

.topbar__burger {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--card-shadow);
    color: var(--text-mid);
}

.topbar__search {
    position: relative;
    flex: 1;
    max-width: 380px;
}

/* Direct child only: the results list below the box has its own icons, and a
   descendant selector would pin every one of them to the magnifier's spot. */
.topbar__search > i {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.topbar__search input {
    width: 100%;
    height: 42px;
    padding: 0 var(--s10) 0 40px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface);
    box-shadow: var(--card-shadow);
    font-size: 13px;
}

.topbar__search input::placeholder {
    color: var(--text-muted);
}

.topbar__search kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    border: 1px solid var(--hairline-strong);
    border-radius: 5px;
    padding: 2px 5px;
    background: var(--surface);
}

/* Global search results. Anchored to .topbar__search, which is already
   position:relative for the icon. */
.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 380px;
    overflow-y: auto;
    padding: var(--s2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
}

.search-results[hidden] {
    display: none;
}

.search-results__item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    color: var(--text-dark);
    text-decoration: none;
}

.search-results__item > i {
    width: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.search-results__item.is-active,
.search-results__item:hover {
    background: var(--surface-2);
}

.search-results__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.search-results__text b {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-results__text small {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-results__group {
    flex: none;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.search-results__empty {
    margin: 0;
    padding: 12px 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.topbar__spacer {
    flex: 1;
}

.topbar__btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--card-shadow);
    color: var(--text-mid);
    font-size: 15px;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.topbar__btn:hover {
    transform: translateY(-2px);
    color: var(--hazra-purple);
}

.topbar__btn .dot {
    position: absolute;
    top: 10px;
    right: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hazra-purple);
    border: 2px solid var(--surface);
}

.topbar__account {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 4px var(--s3) 4px 4px;
    border-radius: var(--radius-full);
    background: var(--surface);
    box-shadow: var(--card-shadow);
    transition: transform var(--dur) var(--ease);
}

.topbar__account:hover {
    transform: translateY(-2px);
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--hazra-purple), var(--hazra-purple-dark));
    color: #fff;
    flex-shrink: 0;
}

.avatar--lg {
    width: 44px;
    height: 44px;
}

.avatar--sq {
    border-radius: var(--radius-xs);
}

.topbar__account b {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.topbar__account i {
    font-size: 11px;
    color: var(--text-muted);
}

/* =========================================================
   MAIN + PAGE HEADER
   ========================================================= */
.main {
    flex: 1;
    padding: var(--s6) var(--gutter) var(--s16);
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s6);
}

.page-head__crumb {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s1);
}

.page-head__crumb a {
    color: var(--text-muted);
}

.page-head__crumb a:hover {
    color: var(--hazra-purple);
}

/* Title reads brand-purple first, neutral second — the mockup's
   "Admin <span>Overview</span>" split, so the accent word is the quiet one. */
.page-head h1 {
    font-size: 26px;
    font-weight: 600;
    color: var(--hazra-purple);
    letter-spacing: 0;
}

.page-head h1 span {
    color: var(--text-dark);
    font-weight: 400;
}

.page-head__sub {
    color: var(--text-mid);
    font-size: var(--fs-sm);
    margin-top: var(--s1);
    max-width: 60ch;
}

.page-head__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

/* =========================================================
   BENTO GRID
   Card span classes carried over from the original mockup so
   ported markup keeps working.
   ========================================================= */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    align-items: start;
}

.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c5 { grid-column: span 5; }
.c6 { grid-column: span 6; }
.c7 { grid-column: span 7; }
.c8 { grid-column: span 8; }
.c9 { grid-column: span 9; }
.c12 { grid-column: span 12; }

/* Two-column form layout: fields left, contextual rail right. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s5);
    align-items: start;
}

.split__rail {
    position: sticky;
    top: calc(var(--topbar-h) + var(--s5));
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1280px) {
    .split {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1200px) {
    .c3 { grid-column: span 6; }
    .c4 { grid-column: span 6; }
    .c5,
    .c7,
    .c8,
    .c9 { grid-column: span 12; }
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--overlay-shadow);
    }

    .app.is-drawer-open .sidebar {
        transform: none;
    }

    .shell,
    .app.is-collapsed .shell {
        margin-left: 0;
    }

    .topbar__burger {
        display: grid;
    }

    .split {
        grid-template-columns: 1fr;
    }

    .split__rail {
        position: static;
    }

    .scrim {
        position: fixed;
        inset: 0;
        background: rgba(20, 8, 14, .45);
        backdrop-filter: blur(2px);
        z-index: 35;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur) var(--ease);
    }

    .app.is-drawer-open .scrim {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 900px) {
    .topbar__search {
        display: none;
    }

    .c6 { grid-column: span 12; }
}

@media (max-width: 640px) {
    :root {
        --gutter: 16px;
    }

    .c3,
    .c4 { grid-column: span 12; }

    .main {
        padding-top: var(--s5);
    }

    .page-head {
        align-items: stretch;
    }

    .page-head__actions {
        width: 100%;
    }

    .page-head__actions .btn {
        flex: 1;
        justify-content: center;
    }

    .topbar__account b {
        display: none;
    }
}