/*
 * mySEK Central Platform — authenticated UI standardization layer
 * v1.2.5
 *
 * Scope: internal/authenticated pages only.
 * This file intentionally does not redesign public/login pages.
 * Values reassert the official mySEK component hierarchy so every module
 * uses the same typography, icon scale, spacing and shell behavior.
 */

.is-authenticated {
    --portal-standard-ink: #172033;
    --portal-standard-muted: #667085;
    --portal-standard-soft: #98a2b3;
    --portal-standard-line: #e4e7ec;
    --portal-standard-black: #000000;
    --portal-standard-near-black: #050505;
    --portal-standard-cyan: #06b6d4;
}

/* --------------------------------------------------------------------------
   SIDENAV — one standard across every internal module
   -------------------------------------------------------------------------- */
.is-authenticated .sidebar {
    background: #000000;
}

.is-authenticated .sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
}

.is-authenticated .sidebar-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: .72rem;
}

.is-authenticated .sidebar-profile-copy strong {
    font-size: .68rem;
    font-weight: 620;
}

.is-authenticated .sidebar-profile-copy small {
    font-size: .54rem;
    font-weight: 400;
}

.is-authenticated .menu-item {
    min-height: 44px;
    border-radius: 10px;
    font-size: .66rem;
    font-weight: 470;
}

.is-authenticated .menu-item > i:first-child {
    width: 40px;
    min-width: 40px;
    font-size: .86rem;
}

.is-authenticated .sub-menu a {
    min-height: 32px;
    font-size: .59rem;
    font-weight: 430;
}

/* --------------------------------------------------------------------------
   TOPBAR
   -------------------------------------------------------------------------- */
.is-authenticated .topbar-icon-button {
    width: 40px;
    height: 40px;
    font-size: .88rem;
}

.is-authenticated .topbar-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: .66rem;
}

.is-authenticated .topbar-user-copy strong {
    font-size: .62rem;
    font-weight: 620;
}

.is-authenticated .topbar-user-copy small {
    font-size: .50rem;
}

/* --------------------------------------------------------------------------
   PAGE / HERO — official compact mySEK hierarchy
   -------------------------------------------------------------------------- */
.is-authenticated .page-content {
    color: var(--portal-standard-ink);
    font-size: .68rem;
}

.is-authenticated .page-hero,
.is-authenticated .dashboard-hero,
.is-authenticated .roles-header,
.is-authenticated .si-header,
.is-authenticated .notification-page-header {
    min-height: 108px !important;
    padding: 22px 24px !important;
    border-radius: 20px !important;
    background:
        linear-gradient(
            135deg,
            #000000 0%,
            #000000 76%,
            #050505 100%
        ) !important;
}

.is-authenticated .hero-icon,
.is-authenticated .dashboard-heading-icon {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 13px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 24px rgba(0,0,0,.24) !important;
    font-size: .96rem !important;
}

.is-authenticated .hero-title h1,
.is-authenticated .dashboard-heading h1,
.is-authenticated .page-hero h1 {
    font-size: 1.18rem !important;
    font-weight: 720 !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
}

.is-authenticated .hero-title p,
.is-authenticated .dashboard-heading p,
.is-authenticated .page-hero p {
    margin-top: 5px !important;
    font-size: .62rem !important;
    font-weight: 420 !important;
    line-height: 1.55 !important;
}

/* --------------------------------------------------------------------------
   KPI — official horizontal component 1:1 scale
   -------------------------------------------------------------------------- */
.is-authenticated .kpi,
.is-authenticated .kpi-card,
.is-authenticated .mysek-kpi,
.is-authenticated .dashboard-kpi {
    min-height: 104px;
    align-items: center;
    border-radius: 16px;
}

.is-authenticated .kpi,
.is-authenticated .kpi-card,
.is-authenticated .mysek-kpi {
    grid-template-columns: 64px minmax(0,1fr);
    gap: 12px;
    padding: 14px;
}

.is-authenticated .kpi-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    font-size: 1.18rem;
}

.is-authenticated .kpi-copy strong,
.is-authenticated .kpi-card strong,
.is-authenticated .dashboard-kpi-copy strong {
    font-size: 1.30rem;
    font-weight: 740;
    line-height: 1.05;
}

.is-authenticated .kpi-copy span,
.is-authenticated .kpi-card span,
.is-authenticated .dashboard-kpi-copy span {
    font-size: .68rem;
    font-weight: 650;
    line-height: 1.25;
}

.is-authenticated .kpi-copy small,
.is-authenticated .kpi-card small,
.is-authenticated .dashboard-kpi-copy small {
    font-size: .55rem;
    font-weight: 420;
    line-height: 1.35;
}

/* Dashboard uses its own class names; preserve the same visual scale. */
.is-authenticated .dashboard-kpi-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 15px !important;
    font-size: 1.08rem !important;
}

/* --------------------------------------------------------------------------
   PANELS / SECTION HEADERS
   -------------------------------------------------------------------------- */
.is-authenticated .panel,
.is-authenticated .dashboard-panel,
.is-authenticated .dashboard-quick-panel {
    border: 1px solid var(--portal-standard-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15,23,42,.045);
}

.is-authenticated .panel-head,
.is-authenticated .panel-header,
.is-authenticated .dashboard-section-head {
    min-height: 64px;
    padding: 13px 15px;
}

.is-authenticated .panel-title-icon,
.is-authenticated .dashboard-panel-title-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: .76rem;
}

.is-authenticated .panel-head h2,
.is-authenticated .panel-header h2,
.is-authenticated .dashboard-section-head h2,
.is-authenticated .dashboard-panel-title h2 {
    font-size: .76rem;
    font-weight: 680;
    line-height: 1.2;
}

.is-authenticated .panel-head p,
.is-authenticated .panel-header p,
.is-authenticated .dashboard-section-head p,
.is-authenticated .dashboard-panel-title p {
    font-size: .56rem;
    font-weight: 420;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   FORMS / BUTTONS / TOOLBARS
   -------------------------------------------------------------------------- */
.is-authenticated label.field > span,
.is-authenticated .form-group label {
    font-size: .57rem;
    font-weight: 650;
}

.is-authenticated .field input,
.is-authenticated .field select,
.is-authenticated .field textarea,
.is-authenticated input.field,
.is-authenticated select.field,
.is-authenticated select.select,
.is-authenticated .toolbar input,
.is-authenticated .toolbar select,
.is-authenticated .form-group input,
.is-authenticated .form-group select,
.is-authenticated .form-group textarea {
    min-height: 38px;
    border-radius: 9px;
    font-size: .62rem;
    font-weight: 430;
}

.is-authenticated .button {
    min-height: 38px;
    padding-inline: 12px;
    border-radius: 9px;
    font-size: .60rem;
    font-weight: 650;
}

.is-authenticated .button i,
.is-authenticated button i {
    line-height: 1;
}

/* --------------------------------------------------------------------------
   TABLES / STATUS / ACTIONS
   -------------------------------------------------------------------------- */
.is-authenticated .data-table th,
.is-authenticated table th {
    padding: 10px 11px;
    font-size: .51rem;
    font-weight: 700;
    letter-spacing: .045em;
}

.is-authenticated .data-table td,
.is-authenticated table td {
    padding: 11px;
    font-size: .60rem;
    line-height: 1.45;
}

.is-authenticated .actions a,
.is-authenticated .link-button {
    font-size: .57rem;
    font-weight: 620;
}

.is-authenticated .status {
    min-height: 24px;
    font-size: .50rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — same component, scaled; not a different design
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .is-authenticated .kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 768px) {
    .is-authenticated .page-hero,
    .is-authenticated .dashboard-hero,
    .is-authenticated .roles-header,
    .is-authenticated .si-header,
    .is-authenticated .notification-page-header {
        min-height: 100px !important;
        padding: 18px !important;
    }

    .is-authenticated .hero-icon,
    .is-authenticated .dashboard-heading-icon {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
    }

    .is-authenticated .hero-title h1,
    .is-authenticated .dashboard-heading h1,
    .is-authenticated .page-hero h1 {
        font-size: 1.05rem !important;
    }

    .is-authenticated .hero-title p,
    .is-authenticated .dashboard-heading p,
    .is-authenticated .page-hero p {
        font-size: .58rem !important;
    }
}

@media (max-width: 620px) {
    .is-authenticated .kpi-grid {
        grid-template-columns: 1fr;
    }

    .is-authenticated .kpi,
    .is-authenticated .kpi-card,
    .is-authenticated .mysek-kpi {
        grid-template-columns: 58px minmax(0,1fr);
        min-height: 94px;
        padding: 12px;
    }

    .is-authenticated .kpi-icon {
        width: 58px;
        height: 58px;
        font-size: 1.08rem;
    }
}

/* ========================================================================== 
   mySEK v1.3.15 — Dashboard icon optical centering
   Keep every authenticated panel icon physically and optically centered,
   independent of Font Awesome glyph metrics.
   ========================================================================== */
.is-authenticated .panel-title-icon,
.is-authenticated .dashboard-panel-title-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.is-authenticated .panel-title-icon > i,
.is-authenticated .dashboard-panel-title-icon > i {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    vertical-align: middle !important;
}

.is-authenticated .panel-title-icon > i::before,
.is-authenticated .dashboard-panel-title-icon > i::before {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.is-authenticated .panel-title-icon > svg,
.is-authenticated .dashboard-panel-title-icon > svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}

/* ========================================================================== 
   mySEK v1.3.16 — topbar-first application shell
   - Topbar spans the full viewport at the very top.
   - Sidenav begins below the topbar.
   - System logo lives in the topbar, never in the sidenav.
   - Sidenav profile follows the school mySEK centered profile pattern.
   ========================================================================== */

.is-authenticated .topbar,
.is-authenticated body.sidebar-expanded .topbar {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 130 !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    padding: 0 18px !important;
    transition: none !important;
}

.is-authenticated .topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.is-authenticated .topbar-menu-button,
.is-authenticated .topbar-menu-button-desktop {
    width: 40px;
    height: 40px;
    display: grid !important;
    place-items: center;
    flex: 0 0 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #344054;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
}

.is-authenticated .topbar-menu-button:hover,
.is-authenticated .topbar-menu-button-desktop:hover {
    color: #101828;
    background: #f2f4f7;
}

.is-authenticated .topbar-system-brand {
    min-width: 0;
    height: 46px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.is-authenticated .topbar-system-logo {
    display: block;
    width: auto;
    max-width: 178px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
}

.is-authenticated .topbar-fallback-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #101828;
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -.05em;
    line-height: 1;
}

.is-authenticated .topbar-fallback-logo strong { color: #2563eb; }
.is-authenticated .topbar-fallback-cap {
    position: relative;
    top: -4px;
    color: #06b6d4;
    font-size: .78rem;
}

/* Intentionally keep the centre of the topbar blank. */
.is-authenticated .topbar-center {
    display: block !important;
    min-width: 0;
    color: transparent !important;
    font-size: 0 !important;
    pointer-events: none;
    user-select: none;
}

/* Sidenav is a second-row application rail, under the global topbar. */
.is-authenticated .sidebar {
    top: var(--portal-topbar-height) !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 110 !important;
}

/* The logo/toggle header has moved into the topbar. */
.is-authenticated .sidebar-header,
.is-authenticated .sidebar-logo,
.is-authenticated .sidebar-toggle {
    display: none !important;
}

/* Centered school-mySEK style profile block. */
.is-authenticated .sidebar-profile,
.is-authenticated .sidebar.expanded .sidebar-profile {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 8px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
}

.is-authenticated .sidebar-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    flex: 0 0 54px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05) !important;
    font-size: .86rem !important;
    font-weight: 760 !important;
}

.is-authenticated .sidebar-profile-copy,
.is-authenticated .sidebar.expanded .sidebar-profile-copy {
    min-width: 0 !important;
    width: 100% !important;
    display: none !important;
    text-align: center !important;
}

.is-authenticated .sidebar.expanded .sidebar-profile {
    min-height: 146px !important;
    padding: 16px 14px 14px !important;
}

.is-authenticated .sidebar.expanded .sidebar-avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    flex-basis: 72px !important;
    font-size: 1rem !important;
}

.is-authenticated .sidebar.expanded .sidebar-profile-copy {
    display: block !important;
}

.is-authenticated .sidebar-profile-copy strong,
.is-authenticated .sidebar-profile-copy small {
    max-width: 210px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

.is-authenticated .sidebar-profile-copy strong {
    color: #ffffff !important;
    font-size: .72rem !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
}

.is-authenticated .sidebar-profile-copy small {
    margin-top: 4px !important;
    color: rgba(255,255,255,.50) !important;
    font-size: .55rem !important;
    font-weight: 410 !important;
}

/* Keep page content below the global topbar and alongside the second-row sidenav. */
.is-authenticated .page-content,
.is-authenticated body.sidebar-expanded .page-content {
    padding-top: calc(var(--portal-topbar-height) + 16px) !important;
}

/* Mobile drawer also starts below the topbar, leaving the global header visible. */
@media (max-width: 768px) {
    .is-authenticated .topbar,
    .is-authenticated body.sidebar-expanded .topbar {
        left: 0 !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 0 10px !important;
    }

    .is-authenticated .topbar-system-brand {
        height: 42px;
    }

    .is-authenticated .topbar-system-logo {
        max-width: 138px;
        max-height: 36px;
    }

    .is-authenticated .topbar-center {
        display: none !important;
    }

    .is-authenticated .sidebar {
        top: var(--portal-topbar-height) !important;
        bottom: 0 !important;
        height: auto !important;
    }

    .is-authenticated .sidebar-backdrop {
        top: var(--portal-topbar-height) !important;
    }

    .is-authenticated .sidebar-profile,
    .is-authenticated .sidebar.expanded .sidebar-profile {
        min-height: 142px !important;
        justify-content: center !important;
        padding: 16px !important;
        text-align: center !important;
    }

    .is-authenticated .sidebar .sidebar-avatar,
    .is-authenticated .sidebar.expanded .sidebar-avatar {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        flex-basis: 70px !important;
        font-size: .98rem !important;
    }

    .is-authenticated .sidebar .sidebar-profile-copy,
    .is-authenticated .sidebar.expanded .sidebar-profile-copy {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ========================================================================== 
   mySEK v1.3.17 — internal topbar brand visibility
   The uploaded mySEK logo contains white artwork. Keep the authenticated
   topbar true black so the complete white/cyan logo remains visible.
   ========================================================================== */
.is-authenticated .topbar,
.is-authenticated body.sidebar-expanded .topbar {
    background: #000000 !important;
    border-bottom-color: #0a0a0a !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.14) !important;
}

.is-authenticated .topbar-menu-button,
.is-authenticated .topbar-menu-button-desktop,
.is-authenticated .topbar-icon-button,
.is-authenticated .topbar-avatar-button,
.is-authenticated .topbar-user-chevron {
    color: #f8fafc !important;
}

.is-authenticated .topbar-menu-button:hover,
.is-authenticated .topbar-menu-button-desktop:hover,
.is-authenticated .topbar-icon-button:hover,
.is-authenticated .topbar-avatar-button:hover {
    color: #ffffff !important;
    background: #0a0a0a !important;
}

.is-authenticated .topbar-system-brand {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.is-authenticated .topbar-system-logo {
    max-width: 188px !important;
    max-height: 46px !important;
    filter: none !important;
    opacity: 1 !important;
}

.is-authenticated .topbar-fallback-logo {
    color: #ffffff !important;
}

.is-authenticated .topbar-user-copy strong {
    color: #f8fafc !important;
}

.is-authenticated .topbar-user-copy small {
    color: #98a2b3 !important;
}

.is-authenticated .topbar-avatar {
    background: #111827 !important;
    border-color: #344054 !important;
    color: #ffffff !important;
}

.is-authenticated .topbar-badge {
    border-color: #000000 !important;
}

@media (max-width: 760px) {
    .is-authenticated .topbar-system-logo {
        max-width: 148px !important;
        max-height: 40px !important;
    }
}

/* ========================================================================== 
   mySEK v1.3.18 — responsive shell + topbar separation
   - Keep the topbar visibly separated from the black sidenav with a restrained
     premium shadow/divider.
   - Collapse the desktop sidenav automatically when the viewport becomes
     narrow enough that the expanded rail would compress application content.
   - Keep dashboard/content grids inside the available viewport width.
   ========================================================================== */

.is-authenticated .topbar,
.is-authenticated body.sidebar-expanded .topbar {
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.035),
        0 5px 14px rgba(0,0,0,.22),
        0 12px 28px rgba(0,0,0,.10) !important;
}

/* A tiny top edge on the second-row sidenav makes the layer boundary clearer
   without introducing a bright border into the true-black mySEK shell. */
.is-authenticated .sidebar {
    border-top: 1px solid rgba(255,255,255,.035) !important;
}

/* Prevent internal modules from creating horizontal page overflow. */
.is-authenticated .page-content,
.is-authenticated .system-shell,
.is-authenticated .dashboard-shell,
.is-authenticated .module-shell,
.is-authenticated .audit-shell {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.is-authenticated .dashboard-kpi-grid,
.is-authenticated .dashboard-grid,
.is-authenticated .dashboard-grid-primary,
.is-authenticated .dashboard-grid-secondary,
.is-authenticated .dashboard-actions {
    min-width: 0 !important;
    max-width: 100% !important;
}

.is-authenticated .dashboard-kpi,
.is-authenticated .dashboard-panel,
.is-authenticated .dashboard-action {
    min-width: 0 !important;
}

/* Medium desktop / landscape tablet: automatically use the collapsed icon
   rail even when the persisted body class says "expanded". This keeps the
   application content usable without changing the user's saved preference on
   wider screens. */
@media (min-width: 769px) and (max-width: 1120px) {
    .is-authenticated .sidebar,
    .is-authenticated .sidebar.expanded,
    .is-authenticated body.sidebar-expanded .sidebar {
        width: var(--portal-sidebar-collapsed) !important;
    }

    .is-authenticated .sidebar-profile,
    .is-authenticated .sidebar.expanded .sidebar-profile,
    .is-authenticated body.sidebar-expanded .sidebar-profile {
        min-height: 96px !important;
        padding: 12px 8px !important;
    }

    .is-authenticated .sidebar-avatar,
    .is-authenticated .sidebar.expanded .sidebar-avatar,
    .is-authenticated body.sidebar-expanded .sidebar-avatar {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        flex: 0 0 54px !important;
        font-size: .86rem !important;
    }

    .is-authenticated .sidebar-profile-copy,
    .is-authenticated .sidebar.expanded .sidebar-profile-copy,
    .is-authenticated body.sidebar-expanded .sidebar-profile-copy,
    .is-authenticated .sidebar .menu-item > span,
    .is-authenticated .sidebar.expanded .menu-item > span,
    .is-authenticated body.sidebar-expanded .menu-item > span,
    .is-authenticated .sidebar .menu-chevron,
    .is-authenticated .sidebar.expanded .menu-chevron,
    .is-authenticated body.sidebar-expanded .menu-chevron {
        display: none !important;
    }

    .is-authenticated .sidebar .menu-item,
    .is-authenticated .sidebar.expanded .menu-item,
    .is-authenticated body.sidebar-expanded .menu-item {
        justify-content: center !important;
        gap: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .is-authenticated .sidebar .menu-item > i:first-child,
    .is-authenticated .sidebar.expanded .menu-item > i:first-child,
    .is-authenticated body.sidebar-expanded .menu-item > i:first-child {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .is-authenticated .sidebar .sub-menu.open,
    .is-authenticated .sidebar.expanded .sub-menu.open,
    .is-authenticated body.sidebar-expanded .sub-menu.open {
        display: none !important;
    }

    .is-authenticated .page-content,
    .is-authenticated body.sidebar-expanded .page-content {
        padding-left: calc(var(--portal-sidebar-collapsed) + 14px) !important;
        padding-right: 14px !important;
    }

    .is-authenticated .topbar-user-copy,
    .is-authenticated .topbar-user-chevron {
        display: none !important;
    }
}

/* Give the dashboard more breathing room before it reaches mobile mode. */
@media (min-width: 769px) and (max-width: 1280px) {
    .is-authenticated .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .is-authenticated .dashboard-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .is-authenticated .dashboard-grid-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .is-authenticated .dashboard-grid-secondary > .dashboard-panel:last-child {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .is-authenticated .dashboard-grid-primary,
    .is-authenticated .dashboard-grid-secondary {
        grid-template-columns: 1fr !important;
    }

    .is-authenticated .dashboard-grid-secondary > .dashboard-panel:last-child {
        grid-column: auto !important;
    }
}

@media (max-width: 768px) {
    .is-authenticated .topbar,
    .is-authenticated body.sidebar-expanded .topbar {
        box-shadow:
            0 1px 0 rgba(255,255,255,.04),
            0 5px 16px rgba(0,0,0,.24) !important;
    }

    .is-authenticated .sidebar {
        border-top-color: rgba(255,255,255,.04) !important;
    }
}


/* ========================================================================== 
   mySEK v1.3.19 — unified sidenav scrolling
   Avatar/profile and navigation must move together as one scrollable rail.
   The topbar remains fixed above the rail.
   ========================================================================== */
.is-authenticated .sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}

.is-authenticated .sidebar::-webkit-scrollbar {
    width: 6px;
}

.is-authenticated .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.is-authenticated .sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.14);
}

.is-authenticated .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.22);
}

/* The menu no longer owns a separate scroll area. */
.is-authenticated .sidebar-menu {
    min-height: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* Profile and footer participate in the same rail flow. */
.is-authenticated .sidebar-profile,
.is-authenticated .sidebar-footer {
    position: static !important;
    flex-shrink: 0 !important;
}

/* Avoid a visual split between profile and menu when the rail scrolls. */
.is-authenticated .sidebar-profile {
    background: #000000 !important;
}

/* Mobile drawer uses the exact same unified scroll behaviour. */
@media (max-width: 768px) {
    .is-authenticated .sidebar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .is-authenticated .sidebar-menu {
        overflow: visible !important;
        flex: 0 0 auto !important;
    }
}