/* =====================================================================
   sidemenu.css — SKYZTEC style collapsible sidebar
   Bara   : html.sm-collapsed nahi  -> 250px, text + accordion
   Chhota : html.sm-collapsed       -> 80px, bare icon + flyout
   ===================================================================== */
:root {
    --sm-w: 250px;
    --sm-w-mini: 80px;
    --sm-topbar-h: 3.5rem;
    --sm-bg: #353b48;
    --sm-bg-hover: #2c313c;
    --sm-bg-flyout: #353b48;
    --sm-text: #e9ecf2;
    --sm-text-muted: #c3c8d2;
    --sm-accent: #6c7cf0;
    --sm-speed: .22s;
}

/* ---------- Page layout ---------- */
body { margin: 0; }

.sm-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sm-w);
    background: var(--sm-bg);
    color: var(--sm-text);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: width var(--sm-speed) ease, transform var(--sm-speed) ease;
}

.sm-main {
    margin-left: var(--sm-w);
    min-height: 100vh;
    transition: margin-left var(--sm-speed) ease;
}

.sm-topbar {
    position: sticky; top: 0;
    height: var(--sm-topbar-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    z-index: 1030;
}

.sm-toggle {
    background: none; border: 0; cursor: pointer;
    font-size: 22px; line-height: 1; color: #333;
    padding: 6px 8px; border-radius: 6px;
}
.sm-toggle:hover { background: #f1f2f6; }

.sm-content { padding: 20px; }

/* ---------- Brand ---------- */
.sm-brand {
    height: var(--sm-topbar-h);
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 0 12px;
}
.sm-brand-link {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none;
}
.sm-logo { height: 34px; width: auto; }
.sm-brand-text {
    font-size: 20px; font-weight: 700; letter-spacing: 3px; white-space: nowrap;
}

/* ---------- Nav list ---------- */
.sm-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 20px;
}
.sm-nav::-webkit-scrollbar { width: 5px; }
.sm-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.sm-list, .sm-sub { list-style: none; margin: 0; padding: 0; }
.sm-item { position: relative; }

.sm-link {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    padding: 12px 22px;
    background: none; border: 0; cursor: pointer;
    color: var(--sm-text);
    font: inherit; font-size: 14.5px; font-weight: 600;
    text-align: left; text-decoration: none;
    transition: background .15s;
}
.sm-link:hover, .sm-link.active { background: var(--sm-bg-hover); color: #fff; }
.sm-link.active { box-shadow: inset 3px 0 0 var(--sm-accent); }

.sm-icon {
    width: 30px; flex: 0 0 30px;
    font-size: 24px; text-align: center;
}
.sm-text { flex: 1 1 auto; white-space: nowrap; }

/* + / − sign */
.sm-plus { position: relative; width: 12px; height: 12px; flex: 0 0 12px; }
.sm-plus::before, .sm-plus::after {
    content: ""; position: absolute; background: var(--sm-text-muted);
    left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px;
    transition: transform var(--sm-speed);
}
.sm-plus::after { transform: rotate(90deg); }
.sm-has-sub.open > .sm-group-btn .sm-plus::after { transform: rotate(0deg); }

/* ---------- Sub menu (bara menu = accordion) ---------- */
.sm-sub { display: none; padding: 2px 0 8px; }
.sm-has-sub.open > .sm-sub { display: block; }
.sm-sub-title { display: none; }

.sm-sub-link {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 22px 8px 30px;
    color: var(--sm-text-muted);
    font-size: 14px; text-decoration: none; white-space: nowrap;
    transition: color .15s, padding-left .15s;
}
.sm-sub-link:hover { color: #fff; padding-left: 34px; }
.sm-sub-link.active { color: #fff; font-weight: 600; }
.sm-chev { font-size: 11px; opacity: .8; }

/* =====================================================================
   CHHOTA MENU  (html.sm-collapsed)
   ===================================================================== */
html.sm-collapsed .sm-sidebar { width: var(--sm-w-mini); }
html.sm-collapsed .sm-main    { margin-left: var(--sm-w-mini); }

html.sm-collapsed .sm-brand-text { display: none; }

/* flyout bahir nikal sake is liye overflow visible */
html.sm-collapsed .sm-nav { overflow: visible; }

html.sm-collapsed .sm-link {
    flex-direction: column; gap: 6px;
    padding: 14px 4px;
    text-align: center;
}
html.sm-collapsed .sm-link.active { box-shadow: none; }
html.sm-collapsed .sm-icon { font-size: 30px; width: auto; flex: none; }
html.sm-collapsed .sm-text { font-size: 12px; font-weight: 500; flex: none; white-space: normal; line-height: 1.2; }
html.sm-collapsed .sm-plus { display: none; }

/* accordion band — flyout sirf hover / click par */
html.sm-collapsed .sm-has-sub.open > .sm-sub { display: none; }

html.sm-collapsed .sm-has-sub > .sm-sub {
    position: absolute;
    left: 100%; top: 0;
    min-width: 200px;
    padding: 10px 0 12px;
    background: var(--sm-bg-flyout);
    border-radius: 0 4px 4px 0;
    box-shadow: 4px 4px 14px rgba(0,0,0,.25);
    z-index: 1050;
}
html.sm-collapsed .sm-has-sub:hover > .sm-sub,
html.sm-collapsed .sm-has-sub.fly > .sm-sub { display: block; }

html.sm-collapsed .sm-has-sub:hover > .sm-link,
html.sm-collapsed .sm-has-sub.fly > .sm-link { background: var(--sm-bg-hover); }

html.sm-collapsed .sm-sub-title {
    display: block;
    padding: 6px 20px 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: #fff;
}
html.sm-collapsed .sm-sub-link { padding: 9px 20px; }
html.sm-collapsed .sm-sub-link:hover { padding-left: 24px; }

/* =====================================================================
   MOBILE (< 992px): menu off-canvas, toggle se slide-in (hamesha bara)
   ===================================================================== */
.sm-backdrop { display: none; }

@media (max-width: 991.98px) {
    .sm-sidebar { transform: translateX(-100%); width: var(--sm-w); }
    .sm-main,
    html.sm-collapsed .sm-main { margin-left: 0; }

    html.sm-mobile-open .sm-sidebar { transform: translateX(0); }
    html.sm-mobile-open .sm-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.4); z-index: 1035;
    }

    /* mobile par collapsed wala style lagu na ho */
    html.sm-collapsed .sm-sidebar { width: var(--sm-w); }
    html.sm-collapsed .sm-brand-text { display: inline; }
    html.sm-collapsed .sm-nav { overflow-y: auto; }
    html.sm-collapsed .sm-link { flex-direction: row; gap: 14px; padding: 12px 22px; text-align: left; }
    html.sm-collapsed .sm-icon { font-size: 24px; width: 30px; flex: 0 0 30px; }
    html.sm-collapsed .sm-text { font-size: 14.5px; font-weight: 600; flex: 1 1 auto; white-space: nowrap; }
    html.sm-collapsed .sm-plus { display: block; }
    html.sm-collapsed .sm-sub-title { display: none; }
    html.sm-collapsed .sm-has-sub > .sm-sub {
        position: static; box-shadow: none; min-width: 0; padding: 2px 0 8px;
        display: none;
    }
    html.sm-collapsed .sm-has-sub.open > .sm-sub { display: block; }
    html.sm-collapsed .sm-has-sub:hover:not(.open) > .sm-sub { display: none; }
}