/*
   StudentIDCardWASM - Hard Layout Correction
   Purpose:
   1. Remove duplicate left offset caused by sidebar + content margin both being applied.
   2. Make Admin/Teacher layout resize correctly when sidebar collapses.
   3. Keep sidebar compact, elevated, soft gray and professional.
   4. Prevent pages/cards/grids from overflowing outside the viewport.

   IMPORTANT: Load this file AFTER all other app/layout CSS files.
*/

:root {
    --sidc-sidebar-expanded: 236px;
    --sidc-sidebar-collapsed: 76px;
    --sidc-topbar-height: 78px;
    --sidc-shell-bg: #f4f8fd;
    --sidc-sidebar-bg: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    --sidc-sidebar-border: #dbe8f7;
    --sidc-primary: #2563eb;
    --sidc-primary-dark: #1d4ed8;
    --sidc-primary-soft: #eaf3ff;
    --sidc-text: #0f172a;
    --sidc-muted: #64748b;
}

html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    background: var(--sidc-shell-bg);
}

/* =========================================================
   ROOT LAYOUT FIX
   ========================================================= */
.sidc-app-layout,
.admin-shell,
.teacher-shell,
.app-shell,
.layout-shell {
    min-height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background: var(--sidc-shell-bg) !important;
}

.sidc-app-layout {
    display: grid !important;
    grid-template-columns: var(--sidc-sidebar-expanded) minmax(0, 1fr) !important;
    grid-template-rows: 100vh !important;
}

.sidc-app-layout.sidc-sidebar-collapsed,
.sidc-app-layout.sidebar-collapsed,
.sidc-app-layout.collapsed {
    grid-template-columns: var(--sidc-sidebar-collapsed) minmax(0, 1fr) !important;
}

/* Stop old fixed/margin layouts from double-shifting content */
.sidc-main,
.admin-main,
.teacher-main,
.main-panel,
.main-content,
.content-shell,
.page-content,
.mud-main-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.sidc-main {
    grid-column: 2 !important;
    height: 100vh !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: var(--sidc-topbar-height) minmax(0, 1fr) !important;
    background: radial-gradient(circle at 15% 10%, rgba(37, 99, 235, .08), transparent 32%), var(--sidc-shell-bg) !important;
}

/* In case old layout still applies absolute/fixed content positioning */
.sidc-main[style],
.admin-main[style],
.teacher-main[style],
.mud-main-content[style] {
    margin-left: 0 !important;
    width: auto !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidc-sidebar,
.admin-sidebar,
.teacher-sidebar,
.app-sidebar,
.mud-drawer.sidc-sidebar,
.mud-drawer.app-sidebar {
    grid-column: 1 !important;
    position: relative !important;
    z-index: 30 !important;
    width: var(--sidc-sidebar-expanded) !important;
    min-width: var(--sidc-sidebar-expanded) !important;
    max-width: var(--sidc-sidebar-expanded) !important;
    height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--sidc-sidebar-bg) !important;
    border-right: 1px solid var(--sidc-sidebar-border) !important;
    box-shadow: 12px 0 34px rgba(15, 23, 42, .08) !important;
    color: var(--sidc-text) !important;
}

.sidc-sidebar::after,
.admin-sidebar::after,
.teacher-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(37, 99, 235, .22), transparent);
}

.sidc-sidebar-collapsed .sidc-sidebar,
.sidebar-collapsed .sidc-sidebar,
.collapsed .sidc-sidebar,
.sidc-app-layout.sidc-sidebar-collapsed .admin-sidebar,
.sidc-app-layout.sidc-sidebar-collapsed .teacher-sidebar {
    width: var(--sidc-sidebar-collapsed) !important;
    min-width: var(--sidc-sidebar-collapsed) !important;
    max-width: var(--sidc-sidebar-collapsed) !important;
}

.sidc-brand,
.sidebar-brand,
.admin-brand,
.teacher-brand {
    height: 118px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px 16px 16px !important;
    border-bottom: 1px solid rgba(203, 213, 225, .72) !important;
    background: rgba(255,255,255,.45) !important;
}

.sidc-brand img,
.sidebar-brand img,
.admin-brand img,
.teacher-brand img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .10) !important;
    flex: 0 0 auto !important;
}

.sidc-brand-title,
.sidebar-brand-title,
.admin-brand-title,
.teacher-brand-title {
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    color: var(--sidc-text) !important;
    white-space: nowrap !important;
}

.sidc-brand-subtitle,
.sidebar-brand-subtitle,
.admin-brand-subtitle,
.teacher-brand-subtitle {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--sidc-primary) !important;
    white-space: nowrap !important;
}

.sidc-sidebar-collapsed .sidc-brand-title,
.sidc-sidebar-collapsed .sidc-brand-subtitle,
.sidebar-collapsed .sidc-brand-title,
.sidebar-collapsed .sidc-brand-subtitle,
.collapsed .sidc-brand-title,
.collapsed .sidc-brand-subtitle,
.sidc-sidebar-collapsed .sidebar-brand-title,
.sidc-sidebar-collapsed .sidebar-brand-subtitle {
    display: none !important;
}

.sidc-nav,
.sidebar-nav,
.admin-nav,
.teacher-nav {
    padding: 16px 12px !important;
}

.sidc-nav-item,
.sidc-menu-item,
.sidebar-nav-item,
.admin-nav-item,
.teacher-nav-item,
.mud-nav-link {
    min-height: 48px !important;
    width: 100% !important;
    border-radius: 16px !important;
    margin: 4px 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #1e293b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    background: transparent !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.sidc-nav-item:hover,
.sidc-menu-item:hover,
.sidebar-nav-item:hover,
.admin-nav-item:hover,
.teacher-nav-item:hover,
.mud-nav-link:hover {
    background: rgba(255, 255, 255, .78) !important;
    color: var(--sidc-primary-dark) !important;
    transform: translateX(2px) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .08) !important;
}

.sidc-nav-item.active,
.sidc-menu-item.active,
.sidebar-nav-item.active,
.admin-nav-item.active,
.teacher-nav-item.active,
.mud-nav-link.active,
.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: #ffffff !important;
    color: var(--sidc-primary) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .11) !important;
    border-left: 4px solid var(--sidc-primary) !important;
    padding-left: 10px !important;
}

.sidc-nav-icon,
.sidebar-nav-icon,
.admin-nav-icon,
.teacher-nav-icon,
.mud-nav-link .mud-icon-root {
    color: var(--sidc-primary) !important;
    flex: 0 0 auto !important;
    font-size: 22px !important;
}

.sidc-sidebar-collapsed .sidc-nav-item,
.sidc-sidebar-collapsed .sidc-menu-item,
.sidebar-collapsed .sidc-nav-item,
.sidebar-collapsed .sidc-menu-item,
.collapsed .sidc-nav-item,
.collapsed .sidc-menu-item {
    justify-content: center !important;
    padding: 0 !important;
}

.sidc-sidebar-collapsed .sidc-nav-text,
.sidc-sidebar-collapsed .sidc-menu-text,
.sidebar-collapsed .sidc-nav-text,
.sidebar-collapsed .sidc-menu-text,
.collapsed .sidc-nav-text,
.collapsed .sidc-menu-text,
.sidc-sidebar-collapsed .mud-nav-link-text,
.sidebar-collapsed .mud-nav-link-text,
.collapsed .mud-nav-link-text {
    display: none !important;
}

/* Submenu must be visually deeper than main menu */
.sidc-submenu,
.sidebar-submenu,
.admin-submenu,
.teacher-submenu,
.mud-nav-group .mud-navmenu {
    position: relative !important;
    margin: 6px 0 12px 18px !important;
    padding: 4px 0 4px 14px !important;
    border-left: 2px solid rgba(37, 99, 235, .18) !important;
}

.sidc-submenu .sidc-nav-item,
.sidebar-submenu .sidebar-nav-item,
.admin-submenu .admin-nav-item,
.teacher-submenu .teacher-nav-item,
.mud-nav-group .mud-navmenu .mud-nav-link {
    min-height: 42px !important;
    margin: 4px 0 !important;
    padding-left: 16px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.48) !important;
    font-size: 13px !important;
    font-weight: 780 !important;
}

.sidc-sidebar-collapsed .sidc-submenu,
.sidebar-collapsed .sidc-submenu,
.collapsed .sidc-submenu,
.sidc-sidebar-collapsed .mud-nav-group .mud-navmenu,
.sidebar-collapsed .mud-nav-group .mud-navmenu,
.collapsed .mud-nav-group .mud-navmenu {
    display: none !important;
}

/* =========================================================
   TOPBAR + PAGE HOST
   ========================================================= */
.sidc-topbar,
.admin-topbar,
.teacher-topbar,
.app-topbar,
.top-row {
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    height: var(--sidc-topbar-height) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .20) !important;
    box-sizing: border-box !important;
}

.sidc-menu-toggle,
.menu-toggle,
.sidebar-toggle,
.mud-icon-button.sidc-menu-toggle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}

.sidc-page-host,
.admin-page-host,
.teacher-page-host,
.page-host,
.content-host {
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - var(--sidc-topbar-height)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 36px 38px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    background: transparent !important;
}

/* Page level wrappers must never be wider than the page host */
.module-shell,
.dashboard-shell,
.page-shell,
.module-panel,
.module-hero,
.module-summary-grid,
.dashboard-grid,
.quick-actions,
.recent-card,
.e-grid,
.e-control.e-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.module-shell,
.dashboard-shell,
.page-shell {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
}

/* If old pages used huge max widths, keep content centered but not clipped */
.module-shell > *,
.dashboard-shell > *,
.page-shell > * {
    max-width: 100% !important;
}

.e-grid,
.module-grid-wrap,
.enterprise-grid {
    overflow-x: auto !important;
}

@media (max-width: 960px) {
    :root {
        --sidc-sidebar-expanded: 76px;
        --sidc-sidebar-collapsed: 76px;
    }

    .sidc-page-host,
    .admin-page-host,
    .teacher-page-host,
    .page-host,
    .content-host {
        padding: 22px 18px !important;
    }
}