:root {
    --mysek-black: #000000;
    --mysek-near-black: #050505;
    --mysek-near-black-2: #0a0a0a;

    --mysek-bg: #f6f8fb;
    --mysek-surface: #ffffff;
    --mysek-ink: #172033;
    --mysek-muted: #667085;
    --mysek-soft: #98a2b3;
    --mysek-line: #e4e7ec;

    --mysek-blue: #2563eb;
    --mysek-cyan: #06b6d4;
    --mysek-green: #10b981;
    --mysek-amber: #c88a11;
    --mysek-red: #c84343;
    --mysek-purple: #6554c0;

    --mysek-sidebar-collapsed: 82px;
    --mysek-sidebar-expanded: 258px;
    --mysek-topbar-height: 64px;

    --mysek-radius-sm: 9px;
    --mysek-radius-md: 13px;
    --mysek-radius-lg: 16px;
    --mysek-radius-hero: 20px;

    --mysek-shadow:
        0 6px 18px rgba(15, 23, 42, 0.045);

    --mysek-shadow-hero:
        0 16px 36px rgba(0, 0, 0, 0.20);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--mysek-bg);
    color: var(--mysek-ink);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.sidebar-mobile-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

/* ========================================================================== 
   BRAND
   ========================================================================== */

.mysek-brand-wordmark,
.mysek-sidebar-wordmark {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.mysek-brand-my {
    color: #ffffff;
    font-weight: 820;
}

.mysek-brand-sek {
    color: #31b8ec;
    font-weight: 850;
}

/* ========================================================================== 
   TOPBAR
   ========================================================================== */

.mysek-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--mysek-sidebar-collapsed);
    z-index: 80;

    height: var(--mysek-topbar-height);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 0 18px;

    color: #ffffff;
    background: var(--mysek-black);

    transition:
        left 180ms ease,
        padding 180ms ease;
}

body.sidebar-expanded .mysek-topbar {
    left: var(--mysek-sidebar-expanded);
}

.mysek-topbar-left,
.mysek-topbar-actions {
    min-width: 0;

    display: flex;
    align-items: center;
}

.mysek-topbar-left {
    gap: 12px;
}

.mysek-topbar-actions {
    gap: 5px;
}

.mysek-topbar-mobile-toggle {
    width: 38px;
    height: 38px;

    display: none;
    place-items: center;

    padding: 0;
    border: 0;
    border-radius: 10px;

    color: #ffffff;
    background: transparent;

    cursor: pointer;
}

.mysek-topbar-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
}

.mysek-topbar-brand {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mysek-topbar-brand .mysek-brand-wordmark {
    font-size: 1.16rem;
}

.mysek-topbar-identity {
    max-width: 320px;
    overflow: hidden;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.68rem;
    font-weight: 450;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mysek-topbar-dropdown {
    position: relative;
}

.mysek-topbar-action,
.mysek-avatar-toggle {
    position: relative;

    display: grid;
    place-items: center;

    padding: 0;
    border: 0;

    color: #ffffff;
    background: transparent;

    cursor: pointer;
}

.mysek-topbar-action {
    width: 40px;
    height: 40px;

    border-radius: 11px;
    font-size: 0.88rem;
}

.mysek-topbar-action:hover,
.mysek-avatar-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
}

.mysek-avatar-toggle {
    width: 44px;
    height: 44px;

    border-radius: 50%;
}

.mysek-topbar-avatar,
.mysek-profile-avatar-large,
.mysek-sidebar-avatar {
    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #121212 0%,
            #20262b 100%
        );

    font-weight: 720;
}

.mysek-topbar-avatar {
    width: 36px;
    height: 36px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    font-size: 0.72rem;
}

.mysek-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;

    width: min(360px, calc(100vw - 24px));
    overflow: hidden;

    border: 1px solid var(--mysek-line);
    border-radius: 16px;

    color: var(--mysek-ink);
    background: #ffffff;

    box-shadow:
        0 22px 54px rgba(15, 23, 42, 0.16);
}

.mysek-dropdown-menu[hidden] {
    display: none !important;
}

.mysek-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 15px 12px;
    border-bottom: 1px solid #edf0f3;
}

.mysek-dropdown-head strong {
    display: block;

    font-size: 0.78rem;
    font-weight: 680;
}

.mysek-dropdown-head small {
    display: block;
    margin-top: 3px;

    color: var(--mysek-muted);

    font-size: 0.58rem;
    font-weight: 420;
}

.mysek-notification-empty {
    min-height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 24px;
    text-align: center;
}

.mysek-empty-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    margin-bottom: 4px;
    border: 1px solid var(--mysek-line);
    border-radius: 12px;

    color: var(--mysek-muted);
    background: #f8fafc;
}

.mysek-notification-empty strong {
    font-size: 0.72rem;
}

.mysek-notification-empty small {
    color: var(--mysek-muted);
    font-size: 0.58rem;
}

.mysek-profile-menu {
    width: min(330px, calc(100vw - 24px));
}

.mysek-profile-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;

    padding: 16px;
    border-bottom: 1px solid #edf0f3;
}

.mysek-profile-avatar-large {
    width: 54px;
    height: 54px;

    font-size: 1rem;
}

.mysek-profile-identity {
    min-width: 0;
}

.mysek-profile-identity strong,
.mysek-profile-identity span,
.mysek-profile-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mysek-profile-identity strong {
    font-size: 0.76rem;
    font-weight: 700;
}

.mysek-profile-identity span {
    margin-top: 3px;
    color: var(--mysek-blue);
    font-size: 0.60rem;
    font-weight: 620;
}

.mysek-profile-identity small {
    margin-top: 3px;
    color: var(--mysek-muted);
    font-size: 0.56rem;
}

.mysek-profile-links {
    display: grid;
    padding: 7px;
}

.mysek-profile-links a {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;

    min-height: 54px;
    padding: 8px 9px;
    border-radius: 11px;
}

.mysek-profile-links a:hover {
    background: #f7f9fb;
}

.mysek-profile-links a > i {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border: 1px solid var(--mysek-line);
    border-radius: 10px;

    color: #536173;
    background: #ffffff;

    font-size: 0.72rem;
}

.mysek-profile-links strong,
.mysek-profile-links small {
    display: block;
}

.mysek-profile-links strong {
    font-size: 0.66rem;
    font-weight: 650;
}

.mysek-profile-links small {
    margin-top: 2px;
    color: var(--mysek-muted);
    font-size: 0.54rem;
    font-weight: 420;
}

.mysek-profile-links .mysek-profile-logout > i {
    color: var(--mysek-red);
}

/* ========================================================================== 
   SIDENAV
   ========================================================================== */

.mysek-sidenav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;

    width: var(--mysek-sidebar-collapsed);
    overflow: hidden;

    display: flex;
    flex-direction: column;

    color: rgba(255, 255, 255, 0.80);
    background: var(--mysek-black);

    box-shadow:
        10px 0 28px rgba(0, 0, 0, 0.12);

    transition:
        width 180ms ease,
        transform 180ms ease;
}

body.sidebar-expanded .mysek-sidenav {
    width: var(--mysek-sidebar-expanded);
}

.mysek-sidebar-header {
    position: relative;

    min-height: var(--mysek-topbar-height);

    display: flex;
    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.mysek-sidebar-toggle {
    position: absolute;
    top: 50%;
    left: 21px;
    z-index: 2;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;
    border: 0;
    border-radius: 10px;

    color: #ffffff;
    background: transparent;

    transform: translateY(-50%);
    cursor: pointer;
}

.mysek-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
}

.mysek-sidebar-brand {
    min-width: 0;

    display: none;
    align-items: center;
    gap: 9px;

    margin-left: 70px;
    overflow: hidden;
}

body.sidebar-expanded .mysek-sidebar-brand {
    display: inline-flex;
}

.mysek-brand-cap {
    position: relative;
    top: -5px;

    color: #31b8ec;
    font-size: 0.68rem;
}

.mysek-sidebar-wordmark {
    font-size: 1.32rem;
}

.mysek-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 82px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.mysek-sidebar-avatar {
    width: 42px;
    min-width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    font-size: 0.70rem;
}

.mysek-sidebar-profile-copy {
    min-width: 0;
    display: none;
}

body.sidebar-expanded .mysek-sidebar-profile-copy {
    display: block;
}

.mysek-sidebar-profile-copy strong,
.mysek-sidebar-profile-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mysek-sidebar-profile-copy strong {
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
}

.mysek-sidebar-profile-copy small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.54rem;
}

.mysek-sidebar-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 11px 9px 18px;

    scrollbar-width: none;
}

.mysek-sidebar-menu::-webkit-scrollbar {
    display: none;
}

.mysek-menu-item {
    position: relative;

    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 12px;
    border: 0;
    border-radius: 11px;

    color: rgba(255, 255, 255, 0.72);
    background: transparent;

    font-size: 0.66rem;
    font-weight: 470;
    text-align: left;

    cursor: pointer;
}

body.sidebar-expanded .mysek-menu-item {
    justify-content: flex-start;
}

.mysek-menu-item:hover {
    color: #ffffff;
    background: var(--mysek-near-black-2);
}

.mysek-menu-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.055);
}

.mysek-menu-item.active::before {
    content: "";

    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;

    width: 2px;
    border-radius: 999px;

    background: var(--mysek-cyan);
}

.mysek-menu-item > i:first-child {
    width: 22px;
    min-width: 22px;

    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}

.mysek-menu-item.active > i:first-child,
.mysek-menu-item:hover > i:first-child {
    color: #ffffff;
}

.mysek-menu-item > span,
.mysek-menu-chevron {
    display: none;
}

body.sidebar-expanded .mysek-menu-item > span,
body.sidebar-expanded .mysek-menu-chevron {
    display: block;
}

body.sidebar-expanded .mysek-menu-item > span {
    flex: 1;
}

.mysek-menu-chevron {
    margin-left: auto;

    color: rgba(255, 255, 255, 0.35);
    font-size: 0.48rem;

    transition: transform 160ms ease;
}

.mysek-menu-group.open .mysek-menu-chevron {
    transform: rotate(180deg);
}

.mysek-submenu {
    display: none;

    margin: 2px 0 4px;
    padding: 5px 6px 5px 43px;
    border-radius: 10px;

    background: var(--mysek-near-black);
}

body.sidebar-expanded .mysek-submenu.open {
    display: grid;
    gap: 2px;
}

.mysek-submenu a {
    position: relative;

    min-height: 34px;

    display: flex;
    align-items: center;

    padding: 0 10px;
    border-radius: 8px;

    color: rgba(255, 255, 255, 0.56);
    font-size: 0.59rem;
}

.mysek-submenu a:hover {
    color: #ffffff;
    background: var(--mysek-near-black-2);
}

.mysek-submenu a.active {
    color: #ffffff;
}

.mysek-submenu a.active::before {
    content: "";

    position: absolute;
    left: 1px;

    width: 4px;
    height: 4px;
    border-radius: 50%;

    background: var(--mysek-cyan);
}

.mysek-menu-separator {
    height: 1px;
    margin: 8px 10px;
    background: rgba(255, 255, 255, 0.055);
}

.mysek-sidebar-footer {
    padding: 8px 9px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.mysek-sidebar-backdrop {
    display: none;
}

/* ========================================================================== 
   APPLICATION LAYOUT
   ========================================================================== */

.page-content {
    min-width: 0;
    min-height: 100vh;

    padding:
        calc(var(--mysek-topbar-height) + 20px)
        16px
        38px
        calc(var(--mysek-sidebar-collapsed) + 16px);

    transition: padding-left 180ms ease;
}

body.sidebar-expanded .page-content {
    padding-left: calc(var(--mysek-sidebar-expanded) + 16px);
}

.system-shell {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
}

/* ========================================================================== 
   HERO / PAGE HEADER
   ========================================================================== */

.page-hero {
    position: relative;
    overflow: hidden;

    min-height: 108px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 22px 24px;
    border-radius: var(--mysek-radius-hero);

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #000000 0%,
            #000000 76%,
            #050505 100%
        );

    box-shadow: var(--mysek-shadow-hero);
}

.hero-title {
    position: relative;
    z-index: 4;

    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}

.hero-icon,
.dashboard-heading-icon {
    width: 46px;
    min-width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 13px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.24);

    font-size: 0.96rem;
}

.hero-title h1 {
    margin: 0;

    font-size: 1.18rem;
    font-weight: 720;
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.hero-title p {
    max-width: 760px;
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.64);

    font-size: 0.62rem;
    font-weight: 420;
    line-height: 1.55;
}

.hero-actions {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-chip {
    min-height: 30px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;

    color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.045);

    font-size: 0.56rem;
    font-weight: 620;
}

.hero-geometry {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
}

.hero-ring,
.hero-diamond {
    position: absolute;
    display: block;
}

.hero-ring {
    border: 1px solid rgba(6, 182, 212, 0.28);
    border-radius: 50%;
}

.hero-ring-one {
    width: 190px;
    height: 190px;
    top: -105px;
    right: -46px;
}

.hero-ring-two {
    width: 92px;
    height: 92px;
    top: -48px;
    right: 50px;

    border-color: rgba(255, 255, 255, 0.085);
}

.hero-diamond {
    width: 72px;
    height: 72px;
    right: 118px;
    bottom: -47px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    transform: rotate(45deg);
}

.page-hero::before {
    content: "";

    position: absolute;
    top: -106px;
    right: -48px;
    z-index: 0;

    width: 190px;
    height: 190px;

    border: 1px solid rgba(6, 182, 212, 0.22);
    border-radius: 50%;

    pointer-events: none;
}

.page-hero::after {
    content: "";

    position: absolute;
    right: 104px;
    bottom: -49px;
    z-index: 0;

    width: 72px;
    height: 72px;

    border: 1px solid rgba(255, 255, 255, 0.085);

    transform: rotate(45deg);
    pointer-events: none;
}

/* ========================================================================== 
   KPI — OFFICIAL HORIZONTAL mySEK STRUCTURE
   ========================================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;

    margin-top: 14px;
}

.kpi,
.kpi-card,
.mysek-kpi {
    position: relative;
    overflow: hidden;

    min-width: 0;
    min-height: 104px;

    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;

    padding: 14px;
    border: 1px solid var(--mysek-line);
    border-radius: var(--mysek-radius-lg);

    background: #ffffff;
    box-shadow: var(--mysek-shadow);
}

.kpi::after,
.kpi-card::after,
.mysek-kpi::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 82px;
    height: 82px;

    border-radius: 0 0 0 82px;
    background: rgba(0, 0, 0, 0.018);

    pointer-events: none;
}

.kpi-icon {
    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border: 1px solid #dfe8ff;
    border-radius: 16px;

    color: var(--mysek-blue);
    background: #f4f7ff;

    font-size: 1.18rem;
}

.kpi-icon.green {
    color: #238b57;
    border-color: #d9efe3;
    background: #f3faf6;
}

.kpi-icon.amber {
    color: var(--mysek-amber);
    border-color: #f4e7c6;
    background: #fff9ed;
}

.kpi-icon.red {
    color: var(--mysek-red);
    border-color: #f4dcdc;
    background: #fff5f5;
}

.kpi-icon.purple {
    color: var(--mysek-purple);
    border-color: #e6e0fa;
    background: #f8f6ff;
}

.kpi-copy,
.kpi-card > div:last-child {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.kpi-copy strong,
.kpi-card strong {
    display: block;

    color: var(--mysek-ink);

    font-size: 1.30rem;
    font-weight: 740;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.kpi-copy span,
.kpi-card span {
    display: block;
    margin-top: 5px;

    color: #344054;

    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.25;
}

.kpi-copy small,
.kpi-card small {
    display: block;
    margin-top: 4px;

    color: var(--mysek-muted);

    font-size: 0.55rem;
    font-weight: 420;
    line-height: 1.35;
}

/* ========================================================================== 
   PANELS / CARDS
   ========================================================================== */

.panel,
.dashboard-quick-panel {
    margin-top: 14px;
    border: 1px solid var(--mysek-line);
    border-radius: var(--mysek-radius-lg);

    background: #ffffff;
    box-shadow: var(--mysek-shadow);
}

.panel {
    padding: 0;
}

.panel-head,
.panel-header,
.dashboard-section-head {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 13px 15px;
    border-bottom: 1px solid #edf0f3;
}

.panel-title {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-title-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid #e3e8ee;
    border-radius: 10px;

    color: #536173;
    background: #f2f5f8;

    font-size: 0.76rem;
}

.panel-title-icon.blue {
    color: var(--mysek-blue);
    border-color: #dfe8ff;
    background: #f4f7ff;
}

.panel-title-icon.green {
    color: #238b57;
    border-color: #d9efe3;
    background: #f3faf6;
}

.panel-title-icon.amber {
    color: var(--mysek-amber);
    border-color: #f4e7c6;
    background: #fff9ed;
}

.panel-title-icon.purple {
    color: var(--mysek-purple);
    border-color: #e6e0fa;
    background: #f8f6ff;
}

.panel-head h2,
.panel-header h2,
.dashboard-section-head h2 {
    margin: 0;

    color: var(--mysek-ink);

    font-size: 0.76rem;
    font-weight: 680;
    line-height: 1.2;
}

.panel-head p,
.panel-header p,
.dashboard-section-head p {
    margin: 4px 0 0;

    color: var(--mysek-muted);

    font-size: 0.56rem;
    font-weight: 420;
    line-height: 1.35;
}

.panel-body {
    padding: 15px;
}

.grid-2,
.dashboard-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.grid-2 > .panel,
.dashboard-grid-two > .panel {
    min-width: 0;
}

/* ========================================================================== 
   DASHBOARD QUICK ACTIONS
   ========================================================================== */

.dashboard-quick-panel {
    padding: 0 14px 14px;
}

.dashboard-quick-panel .dashboard-section-head {
    margin: 0 -14px 12px;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.dashboard-action {
    min-width: 0;
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;

    color: #101828;
    background: #ffffff;

    transition:
        transform 140ms ease,
        border-color 140ms ease,
        background 140ms ease;
}

.dashboard-action:hover {
    border-color: #cfd5dc;
    background: #fafbfc;
    transform: translateY(-1px);
}

.dashboard-action-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid #e2e7ed;
    border-radius: 10px;

    color: #344054;
    background: #f2f5f8;

    font-size: 0.78rem;
}

.dashboard-action > span:last-child {
    overflow: hidden;

    font-size: 0.62rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-metric-list {
    padding: 6px 15px 12px;
}

.dashboard-metric-row {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 8px 2px;
    border-bottom: 1px solid #f0f2f4;
}

.dashboard-metric-row:last-child {
    border-bottom: 0;
}

.dashboard-metric-row span {
    color: #475467;
    font-size: 0.61rem;
}

.dashboard-metric-row strong {
    color: var(--mysek-ink);
    font-size: 0.69rem;
    font-weight: 700;
}

.dashboard-operation-links {
    display: grid;
    padding: 7px 12px 12px;
}

.dashboard-operation-links a {
    min-height: 44px;

    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;

    padding: 6px 5px;
    border-bottom: 1px solid #f0f2f4;

    color: #475467;
    font-size: 0.61rem;
}

.dashboard-operation-links a:last-child {
    border-bottom: 0;
}

.dashboard-operation-links a > i:first-child {
    color: #536173;
    text-align: center;
}

.dashboard-operation-links a > i:last-child {
    color: #98a2b3;
    font-size: 0.48rem;
}

/* ========================================================================== 
   INFORMATION LIST
   ========================================================================== */

.info-list {
    display: grid;
}

.info-row {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 8px 0;
    border-bottom: 1px dashed #edf0f3;
}

.panel > .info-list,
.panel-body > .info-list {
    padding-right: 15px;
    padding-left: 15px;
}

.panel-body > .info-list {
    padding-right: 0;
    padding-left: 0;
}

.info-row:last-child {
    border-bottom: 0;
}

.info-row > span {
    color: var(--mysek-muted);
    font-size: 0.59rem;
}

.info-row > strong {
    color: var(--mysek-ink);
    font-size: 0.60rem;
    font-weight: 650;
    text-align: right;
}

/* ========================================================================== 
   FORMS / FILTERS / BUTTONS
   ========================================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    padding: 15px;
}

.field {
    min-width: 0;
}

label.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

label.field > span,
.form-group label {
    color: #475467;
    font-size: 0.57rem;
    font-weight: 650;
}

.field input,
.field select,
.field textarea,
input.field,
select.field,
select.select,
.toolbar input,
.toolbar select,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 38px;

    padding: 8px 10px;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    outline: none;

    color: #344054;
    background: #ffffff;

    font-size: 0.62rem;
    font-weight: 430;
}

.field textarea,
.form-group textarea {
    min-height: 92px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input.field:focus,
select.field:focus,
select.select:focus,
.toolbar input:focus,
.toolbar select:focus {
    border-color: rgba(6, 182, 212, 0.52);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.07);
}

.form-actions {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    padding-top: 2px;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.panel > .toolbar,
.panel-body > .toolbar {
    padding: 15px;
}

.button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 12px;
    border: 1px solid var(--mysek-line);
    border-radius: 9px;

    color: #344054;
    background: #ffffff;

    font-size: 0.60rem;
    font-weight: 650;

    cursor: pointer;
}

.button:hover {
    border-color: #cfd5dc;
    background: #fafbfc;
}

.button.primary {
    color: #ffffff;
    border-color: #000000;
    background: #000000;
}

.button.primary:hover {
    background: #0a0a0a;
}

.button.danger {
    color: #b42318;
    border-color: #f0c8c8;
    background: #fff8f8;
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.help {
    margin: 8px 0 0;

    color: var(--mysek-soft);
    font-size: 0.54rem;
    line-height: 1.5;
}

.panel > .help {
    padding: 0 15px 15px;
}

/* ========================================================================== 
   ALERTS / STATUS
   ========================================================================== */

.flash,
.alert {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 11px;

    font-size: 0.60rem;
    line-height: 1.45;
}

.flash.success,
.alert.success {
    color: #17633d;
    border-color: #d2ebdd;
    background: #edf8f2;
}

.flash.error,
.alert.danger {
    color: #9d3030;
    border-color: #f0d2d2;
    background: #fff0f0;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 24px;
    padding: 4px 7px;
    border-radius: 999px;

    color: #56616c;
    background: #eef3f7;

    font-size: 0.50rem;
    font-weight: 700;
}

.status.success {
    color: #23784d;
    background: #edf8f2;
}

.status.warning {
    color: #9a680e;
    background: #fff7e8;
}

.status.failed,
.status.danger {
    color: #b23b3b;
    background: #fff0f0;
}

.status.info {
    color: #2d68bd;
    background: #eef5ff;
}

/* ========================================================================== 
   TABLES
   ========================================================================== */

.table-wrap {
    width: 100%;
    overflow: auto;
}

.data-table,
table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;
}

.data-table th,
table th {
    padding: 10px 11px;
    border-bottom: 1px solid #e8ebef;

    color: #7b8490;
    background: #fbfcfd;

    font-size: 0.51rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td,
table td {
    padding: 11px;
    border-bottom: 1px solid #f0f2f4;

    color: #344054;

    font-size: 0.60rem;
    line-height: 1.45;
    vertical-align: top;
}

.data-table tr:last-child td,
table tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover,
table tbody tr:hover {
    background: #fcfdfe;
}

.actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.actions form {
    display: inline;
}

.actions a,
.link-button {
    color: #295f9a;
    font-size: 0.57rem;
    font-weight: 620;
}

.link-button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.empty-cell {
    padding: 28px !important;
    color: var(--mysek-soft) !important;
    text-align: center !important;
}

/* ========================================================================== 
   AUDIT
   ========================================================================== */

.audit-json {
    max-height: 360px;
    overflow: auto;

    margin: 7px 0 0;
    padding: 12px;
    border-radius: 10px;

    color: #d4f7ff;
    background: #071014;

    font:
        11px/1.55
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    white-space: pre-wrap;
}

.audit-row details summary {
    color: #295f9a;
    font-size: 0.56rem;
    font-weight: 650;
    cursor: pointer;
}

.chart-bars {
    display: grid;
    gap: 9px;
}

.chart-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 48px;
    gap: 8px;
    align-items: center;

    color: #475467;
    font-size: 0.56rem;
}

.bar-track {
    height: 7px;
    overflow: hidden;

    border-radius: 999px;
    background: #eef1f4;
}

.bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #172033;
}

/* ========================================================================== 
   ROLES / USERS
   ========================================================================== */

.manage-stack {
    min-width: 420px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 10px 0;
}

.role-permission-block {
    padding: 15px;
    border-bottom: 1px solid #eaecf0;
}

.role-permission-block:last-child {
    border-bottom: 0;
}

.role-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.role-head strong {
    font-size: 0.67rem;
}

.role-head small {
    display: block;
    margin-top: 3px;

    color: var(--mysek-muted);
    font-size: 0.54rem;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;

    margin-top: 12px;
}

.permission-grid label {
    display: flex;
    gap: 8px;
    align-items: flex-start;

    padding: 10px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
}

.permission-grid strong {
    display: block;
    font-size: 0.60rem;
}

.permission-grid small {
    display: block;
    margin-top: 2px;

    color: var(--mysek-muted);
    font-size: 0.52rem;
}

/* ========================================================================== 
   SMALL UTILITIES
   ========================================================================== */

.muted {
    color: var(--mysek-muted);
}

.mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}

.empty-state {
    padding: 60px 20px;
    border: 1px solid var(--mysek-line);
    border-radius: var(--mysek-radius-lg);

    background: #ffffff;
    text-align: center;
}

.empty-state h1 {
    margin: 0;
    font-size: 1.6rem;
}

.empty-state p {
    margin: 8px 0 18px;
    color: var(--mysek-muted);
    font-size: 0.65rem;
}

.code-line {
    overflow: auto;

    padding: 10px;
    border: 1px solid #eaecf0;
    border-radius: 9px;

    background: #f8fafc;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    font-size: 0.60rem;
}

/* ========================================================================== 
   LOGIN
   ========================================================================== */

.login-page,
.auth-page {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 24px;
    background:
        radial-gradient(circle at 78% 18%, rgba(6, 182, 212, 0.09), transparent 24%),
        #000000;
}

.login-card,
.auth-card {
    width: min(440px, 100%);

    padding: 26px;
    border: 1px solid #e8ebef;
    border-radius: 20px;

    background: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.auth-card.wide {
    width: min(920px, 100%);
}

.login-brand,
.auth-card .public-brand {
    margin-bottom: 5px;

    color: #111827;
    font-size: 1.55rem;
    font-weight: 850;
    letter-spacing: -0.045em;
}

.login-brand span,
.auth-card .public-brand > span {
    color: #0ea5d7;
}

.login-card > p,
.auth-card > p {
    margin: 0 0 20px;
    color: var(--mysek-muted);
    font-size: 0.61rem;
    line-height: 1.5;
}

.login-card .form-group {
    margin-bottom: 11px;
}

.login-card .button {
    width: 100%;
    margin-top: 4px;
}

.login-foot {
    margin-top: 16px;
    color: var(--mysek-soft);
    font-size: 0.51rem;
    text-align: center;
}

/* ========================================================================== 
   PUBLIC FRONTEND — RETAINED FOR CENTRAL DIRECTORY
   ========================================================================== */

.public-body {
    margin: 0;
    color: #111827;
    background: #f6f8fb;
}

.public-header {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 max(20px, calc((100vw - 1180px) / 2));
    background: #000000;
}

.public-brand {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -0.045em;
}

.public-brand > span {
    color: #31b8ec;
}

.public-brand small {
    display: block;
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.52);
    font-size: 0.55rem;
    font-weight: 450;
    letter-spacing: 0.02em;
}

.public-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 50px;
}

.public-hero {
    position: relative;
    overflow: hidden;

    padding: 40px;
    border-radius: 22px;

    color: #ffffff;
    background: #000000;
}

.public-hero::after {
    content: "";

    position: absolute;
    top: -100px;
    right: -40px;

    width: 220px;
    height: 220px;

    border: 1px solid rgba(6, 182, 212, 0.26);
    border-radius: 50%;
}

.public-hero h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    letter-spacing: -0.05em;
}

.public-hero p {
    position: relative;
    z-index: 2;

    max-width: 760px;
    color: rgba(255, 255, 255, 0.68);
}

.public-search {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 9px;

    margin-top: 24px;
}

.public-search input,
.public-search select {
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
}

.public-results {
    padding: 28px 0;
}

.public-info-grid,
.directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.public-info-grid article,
.directory-card {
    padding: 17px;
    border: 1px solid var(--mysek-line);
    border-radius: 15px;

    background: #ffffff;
    box-shadow: var(--mysek-shadow);
}

.directory-status {
    margin-bottom: 7px;
    color: var(--mysek-muted);
    font-size: 0.59rem;
    font-weight: 760;
}

.directory-status.active {
    color: #067647;
}

.digital-id {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 9px;

    background: #f2f4f7;
    font-size: 0.66rem;
}

.public-footer {
    padding: 24px;
    color: var(--mysek-muted);
    font-size: 0.62rem;
    text-align: center;
}

/* ========================================================================== 
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .permission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-info-grid,
    .directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .grid-2,
    .dashboard-grid-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --mysek-topbar-height: 60px;
    }

    .mysek-topbar,
    body.sidebar-expanded .mysek-topbar {
        left: 0;
        padding: 0 10px;
    }

    .mysek-topbar-mobile-toggle {
        display: grid;
    }

    .mysek-topbar-brand {
        gap: 8px;
    }

    .mysek-topbar-brand .mysek-brand-wordmark {
        font-size: 1.05rem;
    }

    .mysek-topbar-identity {
        max-width: 180px;
        font-size: 0.58rem;
    }

    .mysek-sidenav,
    body.sidebar-expanded .mysek-sidenav {
        width: min(290px, 86vw);
        transform: translateX(-102%);
    }

    body.sidebar-mobile-open .mysek-sidenav {
        transform: translateX(0);
    }

    .mysek-sidebar-header {
        min-height: 64px;
    }

    .mysek-sidebar-toggle {
        left: 18px;
    }

    .mysek-sidebar-brand,
    body.sidebar-expanded .mysek-sidebar-brand {
        display: inline-flex;
    }

    .mysek-sidebar-profile-copy,
    body.sidebar-expanded .mysek-sidebar-profile-copy {
        display: block;
    }

    .mysek-menu-item,
    body.sidebar-expanded .mysek-menu-item {
        justify-content: flex-start;
    }

    .mysek-menu-item > span,
    .mysek-menu-chevron,
    body.sidebar-expanded .mysek-menu-item > span,
    body.sidebar-expanded .mysek-menu-chevron {
        display: block;
    }

    .mysek-menu-item > span {
        flex: 1;
    }

    .mysek-submenu.open,
    body.sidebar-expanded .mysek-submenu.open {
        display: grid;
        gap: 2px;
    }

    .mysek-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 90;

        display: block;

        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        visibility: hidden;

        transition:
            opacity 180ms ease,
            visibility 180ms ease;
    }

    body.sidebar-mobile-open .mysek-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .page-content,
    body.sidebar-expanded .page-content {
        padding:
            calc(var(--mysek-topbar-height) + 14px)
            11px
            26px;
    }

    .page-hero {
        min-height: 100px;
        padding: 18px;
        border-radius: 17px;
    }

    .hero-title {
        gap: 11px;
    }

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

    .hero-title h1 {
        font-size: 1.05rem;
    }

    .hero-title p {
        max-width: 500px;
        font-size: 0.58rem;
    }

    .hero-actions {
        display: none;
    }

    .hero-ring-one {
        right: -88px;
    }

    .hero-diamond {
        right: 58px;
    }

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

    .form-actions {
        grid-column: auto;
    }

    .manage-stack {
        min-width: 280px;
    }

    .public-search {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .mysek-topbar-identity {
        max-width: 120px;
    }

    .mysek-dropdown-menu {
        position: fixed;
        top: calc(var(--mysek-topbar-height) + 8px);
        right: 10px;
        left: 10px;

        width: auto;
    }

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

    .kpi,
    .kpi-card,
    .mysek-kpi {
        min-height: 98px;
    }

    .dashboard-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .public-info-grid,
    .directory-grid {
        grid-template-columns: 1fr;
    }

    .public-hero {
        padding: 26px;
    }
}

@media (max-width: 420px) {
    .mysek-topbar-identity {
        display: none;
    }

    .hero-title p {
        max-width: 255px;
    }

    .dashboard-action-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-action {
        min-height: 72px;
        flex-direction: column;
        gap: 6px;
    }
}

/* ========================================================================== 
   mySEK CENTRAL PLATFORM — UI CORE REPLACEMENT v1.2.0
   Authoritative management shell
   ========================================================================== */

:root {
    --portal-sidebar-collapsed: 76px;
    --portal-sidebar-expanded: 252px;
    --portal-topbar-height: 62px;
    --portal-bg: #f6f8fb;
    --portal-surface: #ffffff;
    --portal-ink: #172033;
    --portal-muted: #667085;
    --portal-soft: #98a2b3;
    --portal-line: #e4e7ec;
    --portal-black: #000000;
    --portal-black-soft: #050505;
    --portal-black-elevated: #0a0a0a;
    --portal-blue: #2563eb;
    --portal-cyan: #06b6d4;
    --portal-green: #238b57;
    --portal-amber: #c88a11;
    --portal-red: #c84343;
    --portal-purple: #6554c0;
    --portal-slate: #667085;
    --portal-shadow-sm: 0 6px 18px rgba(15, 23, 42, .045);
    --portal-shadow: 0 10px 30px rgba(20, 35, 55, .055);
    --portal-shadow-hero: 0 16px 36px rgba(0, 0, 0, .20);
}

html,
body.mysek-app {
    background: var(--portal-bg) !important;
}

body.mysek-app {
    min-width: 0;
    color: var(--portal-ink);
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   SIDEBAR — true black / collapsed default
   -------------------------------------------------------------------------- */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 110;
    width: var(--portal-sidebar-collapsed);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background: #000;
    box-shadow: 10px 0 30px rgba(0, 0, 0, .08);
    transition: width .18s ease, transform .18s ease;
}

.sidebar.expanded {
    width: var(--portal-sidebar-expanded);
}

.sidebar-header {
    position: relative;
    min-height: 72px;
    flex: 0 0 72px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.sidebar-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: transparent;
    font-size: 17px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, .075);
}

.sidebar.expanded .sidebar-toggle {
    left: 18px;
    transform: translateY(-50%);
}

.sidebar-logo {
    position: absolute;
    top: 50%;
    left: 58px;
    right: 14px;
    min-width: 0;
    display: none;
    align-items: center;
    gap: 8px;
    transform: translateY(-50%);
}

.sidebar.expanded .sidebar-logo {
    display: flex;
}

.sidebar-logo-cap {
    position: relative;
    top: -5px;
    width: 24px;
    height: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    color: #31b8ec;
    font-size: 15px;
}

.sidebar-logo-word {
    display: inline-flex;
    align-items: baseline;
    letter-spacing: -.05em;
    line-height: 1;
    font-size: 1.28rem;
    white-space: nowrap;
}

.sidebar-logo-word b {
    color: #fff;
    font-weight: 840;
}

.sidebar-logo-word strong {
    color: #31b8ec;
    font-weight: 860;
}

.sidebar-profile {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.sidebar.expanded .sidebar-profile {
    justify-content: flex-start;
    padding: 8px 16px;
}

.sidebar-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #111 0%, #20262b 100%);
    font-size: .72rem;
    font-weight: 720;
}

.sidebar-profile-copy {
    min-width: 0;
    display: none;
}

.sidebar.expanded .sidebar-profile-copy {
    display: block;
}

.sidebar-profile-copy strong,
.sidebar-profile-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-profile-copy strong {
    max-width: 165px;
    color: #fff;
    font-size: .68rem;
    font-weight: 620;
}

.sidebar-profile-copy small {
    max-width: 165px;
    margin-top: 3px;
    color: rgba(255, 255, 255, .48);
    font-size: .52rem;
    font-weight: 400;
}

.sidebar-menu {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 8px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.menu-item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1px 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: rgba(255, 255, 255, .60);
    background: transparent;
    font-size: .62rem;
    font-weight: 470;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.menu-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .055);
}

.menu-item.active {
    color: #fff;
    background: rgba(37, 99, 235, .19);
    box-shadow: inset 2px 0 0 #31b8ec;
}

.menu-item > i:first-child {
    width: 40px;
    min-width: 40px;
    display: grid;
    place-items: center;
    margin: 0;
    color: currentColor;
    font-size: .84rem;
}

.menu-item > span,
.menu-chevron {
    display: none;
}

.sidebar.expanded .menu-item {
    justify-content: flex-start;
    gap: 6px;
    padding: 0 10px 0 7px;
}

.sidebar.expanded .menu-item > span {
    min-width: 0;
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar.expanded .menu-chevron {
    width: auto;
    min-width: 0;
    display: block;
    margin-left: auto;
    color: rgba(255, 255, 255, .36);
    font-size: .48rem;
    transition: transform .16s ease;
}

.sidebar.expanded .menu-item.open .menu-chevron {
    transform: rotate(180deg);
}

.sub-menu {
    display: none;
}

.sidebar.expanded .sub-menu.open {
    display: grid;
    gap: 2px;
    margin: 2px 0 8px 45px;
    padding: 4px 0 4px 10px;
    border-left: 1px solid rgba(255, 255, 255, .075);
}

.sub-menu a {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 7px;
    color: rgba(255, 255, 255, .46);
    font-size: .54rem;
    font-weight: 430;
}

.sub-menu a:hover,
.sub-menu a.active {
    color: #fff;
    background: rgba(255, 255, 255, .045);
}

.sub-menu a.active {
    color: #8fe7f0;
}

.sidebar-divider {
    height: 1px;
    margin: 8px 7px;
    background: rgba(255, 255, 255, .06);
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: none;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   TOPBAR — one-row identity + notifications + avatar
   -------------------------------------------------------------------------- */

.topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--portal-sidebar-collapsed);
    z-index: 100;
    height: var(--portal-topbar-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    border-bottom: 1px solid #e9edf2;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .025);
    backdrop-filter: blur(10px);
    transition: left .18s ease;
}

body.sidebar-expanded .topbar {
    left: var(--portal-sidebar-expanded);
}

.topbar-left,
.topbar-actions,
.topbar-brand,
.topbar-avatar-button {
    min-width: 0;
    display: flex;
    align-items: center;
}

.topbar-left {
    gap: 8px;
}

.topbar-menu-button {
    width: 38px;
    height: 38px;
    display: none;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #344054;
    background: transparent;
    cursor: pointer;
}

.topbar-brand {
    gap: 8px;
}

.topbar-logo-mark {
    position: relative;
    top: -4px;
    width: 26px;
    display: grid;
    place-items: center;
    color: #2563eb;
    font-size: .88rem;
}

.topbar-brand-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.topbar-wordmark {
    display: inline-flex;
    letter-spacing: -.045em;
    font-size: 1.02rem;
    line-height: 1;
}

.topbar-wordmark b {
    color: #101828;
    font-weight: 840;
}

.topbar-wordmark strong {
    color: #2563eb;
    font-weight: 860;
}

.topbar-brand-copy small {
    max-width: 240px;
    overflow: hidden;
    color: #7b8492;
    font-size: .56rem;
    font-weight: 430;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-center {
    color: #7b8492;
    font-size: .56rem;
    font-weight: 500;
}

.topbar-actions {
    justify-content: flex-end;
    gap: 5px;
}

.topbar-dropdown {
    position: relative;
}

.topbar-icon-button,
.topbar-avatar-button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.topbar-icon-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 10px;
    color: #344054;
    font-size: .88rem;
}

.topbar-icon-button:hover,
.topbar-avatar-button:hover {
    background: #f5f7fa;
}

.topbar-badge {
    position: absolute;
    top: 6px;
    right: 5px;
    min-width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    padding: 0 3px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: #c84343;
    font-size: .40rem;
    font-weight: 800;
    line-height: 1;
}

.topbar-avatar-button {
    gap: 8px;
    min-height: 44px;
    padding: 4px 6px 4px 5px;
    border-radius: 12px;
    text-align: left;
}

.topbar-avatar,
.profile-dropdown-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #090909, #242b33);
    font-weight: 700;
}

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

.topbar-user-copy {
    min-width: 0;
    display: block;
}

.topbar-user-copy strong,
.topbar-user-copy small {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-copy strong {
    color: #344054;
    font-size: .60rem;
    font-weight: 620;
}

.topbar-user-copy small {
    margin-top: 2px;
    color: #98a2b3;
    font-size: .48rem;
    font-weight: 400;
}

.topbar-user-chevron {
    color: #98a2b3;
    font-size: .46rem;
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 150;
    width: min(360px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    color: #172033;
    background: #fff;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .16);
}

.topbar-dropdown-menu[hidden] {
    display: none !important;
}

.topbar-dropdown-header {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #edf0f3;
}

.topbar-dropdown-header strong,
.topbar-dropdown-header small {
    display: block;
}

.topbar-dropdown-header strong {
    font-size: .72rem;
    font-weight: 650;
}

.topbar-dropdown-header small {
    margin-top: 3px;
    color: #8a94a3;
    font-size: .54rem;
    font-weight: 400;
}

.topbar-dropdown-count {
    min-width: 26px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 8px;
    color: #475467;
    background: #f2f4f7;
    font-size: .52rem;
    font-weight: 700;
}

.topbar-notification-list {
    display: grid;
    max-height: 340px;
    overflow-y: auto;
}

.topbar-notification-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 9px 12px;
    border-bottom: 1px solid #f0f2f5;
}

.topbar-notification-row:hover {
    background: #fafbfc;
}

.topbar-notification-icon,
.dashboard-list-icon,
.dashboard-panel-title-icon {
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.topbar-notification-icon {
    width: 38px;
    height: 38px;
    font-size: .68rem;
}

.topbar-notification-icon.blue,
.dashboard-list-icon.blue,
.dashboard-panel-title-icon.blue { color: #2563eb; background: #eff6ff; }
.topbar-notification-icon.amber,
.dashboard-list-icon.amber,
.dashboard-panel-title-icon.amber { color: #a76c08; background: #fff7e6; }
.topbar-notification-icon.red,
.dashboard-list-icon.red,
.dashboard-panel-title-icon.red { color: #b63b3b; background: #fff0f0; }
.topbar-notification-icon.purple,
.dashboard-list-icon.purple,
.dashboard-panel-title-icon.purple { color: #6554c0; background: #f4f1ff; }
.topbar-notification-icon.green,
.dashboard-list-icon.green,
.dashboard-panel-title-icon.green { color: #238b57; background: #edf9f1; }
.topbar-notification-icon.slate,
.dashboard-list-icon.slate,
.dashboard-panel-title-icon.slate { color: #667085; background: #f2f4f7; }

.topbar-notification-copy {
    min-width: 0;
}

.topbar-notification-copy strong,
.topbar-notification-copy small {
    display: block;
}

.topbar-notification-copy strong {
    color: #344054;
    font-size: .61rem;
    font-weight: 620;
    line-height: 1.25;
}

.topbar-notification-copy small {
    margin-top: 3px;
    color: #8a94a3;
    font-size: .52rem;
    line-height: 1.35;
}

.topbar-notification-row > i {
    color: #c1c7d0;
    font-size: .45rem;
}

.topbar-empty-state {
    min-height: 185px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 24px;
    text-align: center;
}

.topbar-empty-state > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    color: #667085;
    background: #f8fafc;
}

.topbar-empty-state strong { font-size: .67rem; }
.topbar-empty-state small { color: #8a94a3; font-size: .54rem; }

.profile-dropdown {
    width: min(330px, calc(100vw - 24px));
}

.profile-dropdown-header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #edf0f3;
}

.profile-dropdown-avatar {
    width: 52px;
    height: 52px;
    font-size: .88rem;
}

.profile-dropdown-header strong,
.profile-dropdown-header span,
.profile-dropdown-header small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header strong { font-size: .70rem; font-weight: 650; }
.profile-dropdown-header span { margin-top: 3px; color: #2563eb; font-size: .54rem; font-weight: 600; }
.profile-dropdown-header small { margin-top: 3px; color: #98a2b3; font-size: .51rem; }

.profile-dropdown-links {
    display: grid;
    padding: 6px;
}

.profile-dropdown-links a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 51px;
    padding: 7px 8px;
    border-radius: 10px;
}

.profile-dropdown-links a:hover { background: #f7f9fb; }
.profile-dropdown-links a > i { color: #667085; text-align: center; font-size: .67rem; }
.profile-dropdown-links strong,
.profile-dropdown-links small { display: block; }
.profile-dropdown-links strong { color: #344054; font-size: .60rem; font-weight: 600; }
.profile-dropdown-links small { margin-top: 2px; color: #98a2b3; font-size: .49rem; }
.profile-dropdown-links a.logout > i,
.profile-dropdown-links a.logout strong { color: #b63b3b; }

/* --------------------------------------------------------------------------
   PAGE LAYOUT
   -------------------------------------------------------------------------- */

.page-content,
body.sidebar-expanded .page-content {
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: calc(var(--portal-topbar-height) + 16px) !important;
    padding-right: 16px !important;
    padding-bottom: 38px !important;
    padding-left: calc(var(--portal-sidebar-collapsed) + 16px) !important;
    transition: padding-left .18s ease !important;
}

body.sidebar-expanded .page-content {
    padding-left: calc(var(--portal-sidebar-expanded) + 16px) !important;
}

.system-shell,
.dashboard-shell,
.module-shell,
.audit-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Generic legacy hero normalization */
.page-hero,
.roles-header,
.si-header,
.notification-page-header {
    min-height: 136px !important;
    padding: 22px 24px !important;
    border: 1px solid rgba(255, 255, 255, .035) !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: #000 !important;
    box-shadow: var(--portal-shadow-hero) !important;
}

/* --------------------------------------------------------------------------
   DASHBOARD HERO
   -------------------------------------------------------------------------- */

.dashboard-hero {
    position: relative;
    min-height: 136px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 91% 3%, rgba(6, 182, 212, .065), transparent 24%),
        linear-gradient(135deg, #000 0%, #000 78%, #050505 100%);
    box-shadow: var(--portal-shadow-hero);
}

.dashboard-heading {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-heading-icon {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 48px !important;
    border: 1px solid rgba(255, 255, 255, .095) !important;
    border-radius: 13px !important;
    color: #c9f7fa !important;
    background: rgba(255, 255, 255, .045) !important;
    font-size: 1rem !important;
}

.dashboard-heading h1 {
    margin: 0;
    color: #fff;
    font-size: 1.18rem;
    font-weight: 720;
    line-height: 1.16;
    letter-spacing: -.02em;
}

.dashboard-heading p {
    max-width: 760px;
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: .61rem;
    font-weight: 400;
    line-height: 1.5;
}

.dashboard-hero-geometry {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.geometry-ring {
    position: absolute;
    top: -82px;
    right: -46px;
    width: 176px;
    height: 176px;
    border: 1px solid rgba(6, 182, 212, .34);
    border-radius: 50%;
}

.geometry-ring-small {
    top: -24px;
    right: 70px;
    width: 62px;
    height: 62px;
    border-color: rgba(255, 255, 255, .06);
}

.geometry-diamond {
    position: absolute;
    right: 96px;
    bottom: -44px;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, .08);
    transform: rotate(45deg);
}

.geometry-line {
    position: absolute;
    right: 18px;
    bottom: 30px;
    width: 170px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .22));
    transform: rotate(-18deg);
    transform-origin: right center;
}

/* --------------------------------------------------------------------------
   KPI — authoritative horizontal mySEK pattern
   -------------------------------------------------------------------------- */

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.dashboard-kpi {
    min-width: 0;
    min-height: 88px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

.dashboard-kpi-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 1.02rem;
}

.dashboard-kpi-icon.blue { color: #2563eb; background: #eff6ff; }
.dashboard-kpi-icon.cyan { color: #16879a; background: #ecfbfd; }
.dashboard-kpi-icon.green { color: #238b57; background: #edf9f1; }
.dashboard-kpi-icon.amber { color: #a96d08; background: #fff7e6; }
.dashboard-kpi-icon.red { color: #b63b3b; background: #fff0f0; }
.dashboard-kpi-icon.purple { color: #6554c0; background: #f4f1ff; }

.dashboard-kpi-copy {
    min-width: 0;
}

.dashboard-kpi-copy strong,
.dashboard-kpi-copy span,
.dashboard-kpi-copy small {
    display: block;
}

.dashboard-kpi-copy strong {
    color: #101828;
    font-size: 1.20rem;
    font-weight: 730;
    line-height: 1;
    letter-spacing: -.025em;
}

.dashboard-kpi-copy span {
    margin-top: 5px;
    color: #344054;
    font-size: .64rem;
    font-weight: 620;
    line-height: 1.2;
}

.dashboard-kpi-copy small {
    margin-top: 4px;
    overflow: hidden;
    color: #98a2b3;
    font-size: .51rem;
    font-weight: 400;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   DASHBOARD ACTIONS
   -------------------------------------------------------------------------- */

.dashboard-section {
    margin-top: 12px;
}

.dashboard-actions-section {
    padding: 14px 15px 15px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

.dashboard-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dashboard-section-title h2 {
    margin: 0;
    color: #172033;
    font-size: .76rem;
    font-weight: 670;
}

.dashboard-section-title p {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: .52rem;
    font-weight: 400;
}

.dashboard-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-action {
    min-width: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #0a0a0a;
    border-radius: 11px;
    color: #fff !important;
    background: #0a0a0a;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .07);
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.dashboard-action:hover {
    color: #fff !important;
    background: #000;
    border-color: #000;
    transform: translateY(-1px);
}

.dashboard-action i {
    color: #7eddea;
    font-size: .78rem;
}

.dashboard-action span {
    overflow: hidden;
    font-size: .57rem;
    font-weight: 590;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   PANELS
   -------------------------------------------------------------------------- */

.dashboard-grid {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.dashboard-grid-primary {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

.dashboard-grid-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

.dashboard-panel-head {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid #edf0f3;
}

.dashboard-panel-title {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.dashboard-panel-title-icon {
    width: 38px;
    height: 38px;
    font-size: .68rem;
}

.dashboard-panel-title h3,
.dashboard-panel-title span {
    display: block;
}

.dashboard-panel-title h3 {
    margin: 0;
    color: #344054;
    font-size: .66rem;
    font-weight: 650;
    line-height: 1.2;
}

.dashboard-panel-title span {
    margin-top: 3px;
    color: #98a2b3;
    font-size: .50rem;
    font-weight: 400;
    line-height: 1.3;
}

.dashboard-more {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: .50rem;
    font-weight: 600;
}

.dashboard-more:hover {
    text-decoration: underline;
}

.dashboard-panel-body {
    min-width: 0;
    padding: 12px 13px;
}

.pipeline-list {
    display: grid;
    gap: 9px;
}

.pipeline-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.pipeline-row-head span {
    color: #667085;
    font-size: .54rem;
    font-weight: 500;
}

.pipeline-row-head strong {
    color: #344054;
    font-size: .57rem;
    font-weight: 680;
}

.pipeline-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #f0f2f5;
}

.pipeline-track span {
    display: block;
    min-width: 2px;
    height: 100%;
    border-radius: inherit;
}

.pipeline-track span.blue { background: #2563eb; }
.pipeline-track span.cyan { background: #06b6d4; }
.pipeline-track span.purple { background: #6554c0; }
.pipeline-track span.amber { background: #c88a11; }
.pipeline-track span.green { background: #238b57; }
.pipeline-track span.slate { background: #667085; }

.dashboard-stat-stack {
    display: grid;
    padding-top: 5px;
    padding-bottom: 5px;
}

.dashboard-stat-row {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #f0f2f5;
}

.dashboard-stat-row:last-child {
    border-bottom: 0;
}

.dashboard-stat-row span {
    color: #667085;
    font-size: .55rem;
    font-weight: 450;
}

.dashboard-stat-row span i {
    width: 18px;
    color: #98a2b3;
    text-align: center;
}

.dashboard-stat-row strong {
    color: #344054;
    font-size: .64rem;
    font-weight: 680;
}

.dashboard-list,
.onboarding-list {
    display: grid;
}

.dashboard-list-row {
    min-height: 53px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f0f2f5;
}

.dashboard-list-row:last-child {
    border-bottom: 0;
}

.dashboard-list-row:hover .dashboard-list-copy strong {
    color: #2563eb;
}

.dashboard-list-icon {
    width: 36px;
    height: 36px;
    font-size: .63rem;
}

.dashboard-list-copy {
    min-width: 0;
}

.dashboard-list-copy strong,
.dashboard-list-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-copy strong {
    color: #344054;
    font-size: .58rem;
    font-weight: 620;
}

.dashboard-list-copy small {
    margin-top: 3px;
    color: #98a2b3;
    font-size: .49rem;
    font-weight: 400;
}

.dashboard-list-meta,
.dashboard-status-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    color: #667085;
    background: #f2f4f7;
    font-size: .46rem;
    font-weight: 620;
    white-space: nowrap;
}

.dashboard-status-badge.green {
    color: #238b57;
    background: #edf9f1;
}

.onboarding-row {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, .75fr) 34px;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #f0f2f5;
}

.onboarding-row:last-child {
    border-bottom: 0;
}

.onboarding-copy strong,
.onboarding-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onboarding-copy strong {
    color: #344054;
    font-size: .57rem;
    font-weight: 620;
}

.onboarding-copy small {
    margin-top: 3px;
    color: #98a2b3;
    font-size: .47rem;
}

.onboarding-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #f0f2f5;
}

.onboarding-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.onboarding-row b {
    color: #667085;
    font-size: .50rem;
    font-weight: 650;
    text-align: right;
}

.commercial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.commercial-metric {
    min-width: 0;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    border: 1px solid #edf0f3;
    border-radius: 11px;
    background: #fbfcfd;
}

.commercial-metric span,
.commercial-metric strong,
.commercial-metric small {
    display: block;
}

.commercial-metric span {
    color: #667085;
    font-size: .49rem;
    font-weight: 550;
}

.commercial-metric strong {
    margin-top: 6px;
    overflow: hidden;
    color: #172033;
    font-size: .74rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-metric small {
    margin-top: 4px;
    color: #98a2b3;
    font-size: .45rem;
}

.audit-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.audit-metric {
    min-width: 0;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #edf0f3;
    border-radius: 10px;
    background: #fbfcfd;
}

.audit-metric strong {
    color: #344054;
    font-size: .74rem;
    font-weight: 700;
}

.audit-metric span {
    margin-top: 3px;
    color: #98a2b3;
    font-size: .43rem;
}

.audit-metric.green strong { color: #238b57; }
.audit-metric.red strong { color: #c84343; }
.audit-metric.amber strong { color: #c88a11; }

.audit-mini-list {
    grid-column: 1 / -1;
    display: grid;
    margin-top: 2px;
}

.audit-mini-row {
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #f0f2f5;
}

.audit-mini-row:last-child {
    border-bottom: 0;
}

.audit-mini-row span {
    min-width: 0;
    overflow: hidden;
    color: #667085;
    font-size: .46rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-mini-row span i {
    margin-right: 5px;
    color: #98a2b3;
    font-size: .24rem;
    vertical-align: middle;
}

.audit-mini-row small {
    flex: 0 0 auto;
    color: #98a2b3;
    font-size: .43rem;
}

.dashboard-empty {
    min-height: 176px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #98a2b3;
    text-align: center;
}

.dashboard-empty > i {
    margin-bottom: 4px;
    color: #c1c7d0;
    font-size: 1.15rem;
}

.dashboard-empty strong {
    color: #667085;
    font-size: .60rem;
    font-weight: 620;
}

.dashboard-empty span {
    max-width: 300px;
    font-size: .49rem;
    line-height: 1.4;
}

.dashboard-footer {
    padding: 20px 4px 0;
    color: #a1a9b4;
    font-size: .45rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid-secondary {
        grid-template-columns: 1fr 1fr;
    }

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

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

@media (max-width: 920px) {
    .topbar-center,
    .topbar-user-copy,
    .topbar-user-chevron {
        display: none;
    }

    .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dashboard-grid-primary,
    .dashboard-grid-secondary {
        grid-template-columns: 1fr;
    }

    .dashboard-grid-secondary > .dashboard-panel:last-child {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    :root {
        --portal-topbar-height: 58px;
    }

    .sidebar {
        width: min(286px, 86vw);
        transform: translateX(-102%);
        box-shadow: 22px 0 50px rgba(0, 0, 0, .24);
    }

    .sidebar.expanded {
        width: min(286px, 86vw);
        transform: translateX(0);
    }

    .sidebar .sidebar-logo,
    .sidebar.expanded .sidebar-logo,
    .sidebar .sidebar-profile-copy,
    .sidebar.expanded .sidebar-profile-copy,
    .sidebar .menu-item > span,
    .sidebar.expanded .menu-item > span,
    .sidebar .menu-chevron,
    .sidebar.expanded .menu-chevron {
        display: flex;
    }

    .sidebar .sidebar-toggle,
    .sidebar.expanded .sidebar-toggle {
        left: 18px;
        transform: translateY(-50%);
    }

    .sidebar .sidebar-profile,
    .sidebar.expanded .sidebar-profile {
        justify-content: flex-start;
        padding: 8px 16px;
    }

    .sidebar .menu-item,
    .sidebar.expanded .menu-item {
        justify-content: flex-start;
        gap: 6px;
        padding: 0 10px 0 7px;
    }

    .sidebar .sub-menu.open,
    .sidebar.expanded .sub-menu.open {
        display: grid;
        gap: 2px;
        margin: 2px 0 8px 45px;
        padding: 4px 0 4px 10px;
        border-left: 1px solid rgba(255, 255, 255, .075);
    }

    .sidebar-backdrop {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, visibility .18s ease;
    }

    body.sidebar-mobile-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .topbar,
    body.sidebar-expanded .topbar {
        left: 0;
        padding: 0 10px;
    }

    .topbar-menu-button {
        display: grid;
    }

    .topbar-logo-mark {
        display: none;
    }

    .topbar-brand-copy {
        gap: 6px;
    }

    .topbar-brand-copy small {
        max-width: 155px;
    }

    .page-content,
    body.sidebar-expanded .page-content {
        padding-top: calc(var(--portal-topbar-height) + 12px) !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .dashboard-hero {
        min-height: 118px;
        padding: 17px;
        border-radius: 15px;
    }

    .dashboard-heading {
        width: calc(100% - 42px);
        gap: 11px;
    }

    .dashboard-heading-icon {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px !important;
    }

    .dashboard-heading h1 {
        font-size: 1rem;
    }

    .dashboard-heading p {
        margin-top: 4px;
        font-size: .55rem;
        line-height: 1.42;
    }

    .geometry-ring {
        width: 138px;
        height: 138px;
        top: -72px;
        right: -58px;
    }

    .geometry-ring-small,
    .geometry-line {
        display: none;
    }

    .dashboard-kpi-grid {
        gap: 8px;
        margin-top: 9px;
    }

    .dashboard-kpi {
        min-height: 82px;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .dashboard-kpi-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
    }

    .dashboard-actions-section,
    .dashboard-panel {
        border-radius: 13px;
    }

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

@media (max-width: 520px) {
    .topbar-wordmark {
        font-size: .94rem;
    }

    .topbar-brand-copy small {
        display: none;
    }

    .topbar-avatar-button {
        padding-right: 2px;
        padding-left: 2px;
    }

    .dashboard-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-action {
        min-height: 58px;
    }

    .dashboard-panel-head {
        align-items: flex-start;
    }

    .dashboard-more {
        margin-top: 4px;
    }

    .onboarding-row {
        grid-template-columns: minmax(0, 1fr) 31px;
    }

    .onboarding-progress {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .onboarding-row b {
        grid-column: 2;
        grid-row: 1;
    }

    .audit-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}