body {
    background-color: var(--page-background-color);
    color: var(--text-color-primary);
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

a {
    text-decoration: none;
    color: var(--text-color-primary);
}

/* Focus outline: hide default on load (FocusOnNavigate), show subtle outline for keyboard only */
h1:focus {
    outline: none;
}

h1:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 4px;
    border-radius: 4px;
}

.profile-form-grid {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

    .profile-form-grid > div {
        flex: 1;
    }

/* App Layout */
.app-layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--page-background-color);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .app-layout {
        flex-direction: row;
    }
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevents flex overflow */
    width: 100%;
}

    .main-content main {
        flex: 1;
        min-width: 0;
        padding: 16px 32px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--page-background-color);
    }

@media (max-width: 768px) {
    .main-content main {
        padding: 16px;
    }
}

/* Blazor EditForm: flex child of main; needs min-width 0 so wide grids do not expand past the column */
.main-content main form {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Custom scrollbar styling (webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--page-background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--zinc-800);
    border: 2px solid var(--page-background-color);
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--zinc-700);
    }

/* Sidebar Backdrop (Mobile) */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--overlay-background-color);
    z-index: 20;
    display: block;
}

@media (min-width: 1024px) {
    .sidebar-backdrop {
        display: none;
    }
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    background-color: var(--sidebar-background-color);
    border-right: 1px solid var(--border-color-light);
    color: var(--text-color-secondary);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    width: 256px;
    display: flex;
    flex-direction: column;
    padding: 0;
}

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    .sidebar.sidebar-collapsed {
        width: 64px;
    }

@media (min-width: 1024px) {
    .sidebar {
        position: static;
        transform: translateX(0);
    }
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    height: 64px;
    border-bottom: 1px solid var(--border-color-light);
    padding: 0 16px;
    justify-content: space-between;
}

.sidebar.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

.logotype {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-box {
    min-width: 32px;
    width: 32px;
    height: 32px;
    background-color: var(--emerald-500);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    color: white;
}

.sidebar-collapse-btn,
.sidebar-expand-btn button {
    background: none;
    border: none;
    color: var(--text-color-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

    .sidebar-collapse-btn:hover,
    .sidebar-expand-btn button:hover {
        color: var(--text-color-primary);
    }

.sidebar-expand-btn {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color-light);
}

/* Sidebar Navigation */
.sidebar-nav {
    margin-top: 8px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sidebar-section-label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color-secondary);
    margin: 8px 0 8px 8px;
}

.sidebar.sidebar-collapsed .sidebar-section-label {
    display: none;
}

.sidebar-nav-list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    gap: 4px;
}

    .sidebar-nav-list li {
        padding: 0;
        width: 100%;
    }

.sidebar-nav > li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    margin-bottom: 4px;
}

.sidebar .nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-color-secondary);
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
    border-radius: 2px;
    position: relative;
    box-sizing: border-box;
}

.sidebar.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 8px;
}

.sidebar .nav-item:hover {
    background-color: var(--sidebar-nav-hover-background, var(--button-hover-background-color));
    color: var(--text-color-primary);
}

.sidebar .nav-item.active {
    background-color: var(--sidebar-nav-active-background, var(--button-hover-background-color));
    color: var(--text-color-primary);
    border-left: 2px solid var(--emerald-500);
}

.sidebar.sidebar-collapsed .nav-item.active {
    border-left: none;
    box-shadow: inset 2px 0 0 var(--emerald-500);
}

.sidebar .navlink-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.sidebar.sidebar-collapsed .navlink-content {
    justify-content: center;
    gap: 0;
}

.sidebar .navlink-content .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar .navlink-content span {
    margin: 0;
    font-size: 0.85rem;
    white-space: nowrap;
}

.sidebar.sidebar-collapsed .navlink-content span {
    display: none;
}

.sidebar-divider {
    height: 1px;
    background-color: var(--border-color-light);
    margin: 32px 0 8px 0;
}

.sidebar .icon {
    width: 20px;
    height: 20px;
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sidebar .nav-item.active .icon {
    color: var(--emerald-500);
}

.sidebar .nav-item:hover .icon {
    color: var(--text-color-primary);
}

/* Top navbar */
.top-navbar-container {
    position: relative;
    width: 100%;
}

.top-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    height: 64px;
    background-color: var(--navbar-background-color);
    border-bottom: 1px solid var(--border-color-light);
    position: relative;
    z-index: 100;
    --top-navbar-height: 64px;
}

    .top-navbar .nav-item,
    .nav-items .nav-item,
    .mobile-nav-item {
        color: var(--text-color-tertiary);
    }

.top-navbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

/* Responsive visibility (matches sidebar desktop breakpoint at 1024px) */
.mobile-only {
    display: flex;
}

.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: flex;
    }
}

/* Mobile hamburger menu toggle */
.hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-color-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .hamburger-btn:hover {
        background-color: var(--button-hover-background-color);
    }

    .hamburger-btn:focus-visible {
        outline: 2px solid var(--input-focus-border-color);
        outline-offset: 2px;
    }

.hamburger {
    position: relative;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
}

    .hamburger .spinner {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: currentColor;
        border-radius: 1px;
        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    }

    .hamburger .diagonal.part-1 {
        top: 0;
    }

    .hamburger .horizontal {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger .diagonal.part-2 {
        bottom: 0;
    }

    .hamburger.open .horizontal {
        opacity: 0;
    }

    .hamburger.open .diagonal.part-1 {
        top: 50%;
        transform: translateY(-50%) rotate(135deg);
    }

    .hamburger.open .diagonal.part-2 {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%) rotate(-135deg);
    }

.ai-advisor-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-color-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .ai-advisor-btn:hover {
        color: var(--text-color-primary);
        background-color: var(--button-hover-background-color);
        border-color: var(--border-color-dark);
    }

    .ai-advisor-btn .icon {
        width: 18px;
        height: 18px;
    }

.logo-type-section {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text-color-primary);
    min-width: 0;
    white-space: nowrap;
}

.left-side-container {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

    .left-side-container .domain-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .left-side-container .domain-name,
    .left-side-container .ledger-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .left-side-container .domain-name {
        font-size: 12px;
        color: var(--text-color-secondary);
        line-height: 1.2;
    }

    .left-side-container .ledger-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color-primary);
        line-height: 1.2;
        text-decoration: none;
    }

        .left-side-container .ledger-name:hover {
            text-decoration: underline;
            text-decoration-color: var(--text-color-secondary);
            text-underline-offset: 4px;
        }

    .left-side-container .landmark-icon {
        width: 20px;
        height: 20px;
        color: var(--emerald-500);
        flex-shrink: 0;
    }

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    margin-left: auto;
}

.notification-area {
    position: relative;
    flex: 0 0 auto;
}

.notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

.notification-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--text-color-tertiary);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .notification-btn:hover {
        color: var(--text-color-primary);
        background-color: rgba(255, 255, 255, 0.06);
    }

    .notification-btn .icon {
        width: 16px;
        height: 16px;
    }

.notification-badge {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: var(--status-error-color, #c53030);
    box-sizing: border-box;
}

.notification-badge--active {
    display: inline-flex;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    max-height: min(420px, 70vh);
    display: flex;
    flex-direction: column;
    z-index: 160;
    background-color: var(--content-background-color);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.notification-panel__header {
    flex-shrink: 0;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-color-secondary);
    border-bottom: 1px solid var(--border-color-light);
    background-color: var(--zinc-900, #18181b);
}

.notification-panel__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.notification-panel__empty {
    padding: 20px 16px;
    font-size: 13px;
    color: var(--text-color-secondary);
    text-align: center;
}

.notification-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color-light);
    transition: background-color 0.15s ease;
}

    .notification-row:last-child {
        border-bottom: none;
    }

    .notification-row:hover {
        background-color: rgba(255, 255, 255, 0.04);
    }

.notification-row--clickable {
    cursor: pointer;
}

    .notification-row--clickable:focus-visible {
        outline: 2px solid var(--accent-color, #4a6c9b);
        outline-offset: -2px;
    }

    .notification-row--clickable .notification-row__text {
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: text-decoration-color 0.15s ease;
    }

    .notification-row--clickable:hover .notification-row__text,
    .notification-row--clickable:focus-visible .notification-row__text {
        text-decoration-color: currentColor;
    }

.notification-row__icon {
    flex-shrink: 0;
    padding-top: 2px;
}

    .notification-row__icon .icon {
        width: 18px;
        height: 18px;
        display: block;
    }

.notification-row__text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color-primary);
    word-break: break-word;
}

.notification-row__dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: -4px -4px -4px 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .notification-row__dismiss:hover {
        color: var(--text-color-primary);
        background-color: rgba(255, 255, 255, 0.08);
    }

    .notification-row__dismiss .icon {
        width: 14px;
        height: 14px;
    }

.nav-right .nav-item {
    width: auto;
    flex: 0 0 auto;
}

.avatar-box {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    background-color: var(--status-success-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--status-success-color);
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-width: 28px;
    box-sizing: border-box;
}

    .avatar-box:hover {
        opacity: 0.8;
    }

/* TopNavBar Buttons Unification */
.top-navbar .nav-item button,
.top-navbar .button-primary,
.top-navbar .button-secondary,
.top-navbar .button-ghost,
.top-navbar .nav-link,
.top-navbar a.btn {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.top-navbar .nav-item .icon,
.top-navbar .icon {
    width: 14px;
    height: 14px;
}

.collection-container {
    color: var(--list-item-text-color);
    background-color: var(--content-background-color);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.collection-container-header {
    display: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--collection-header-text-color);
    background-color: var(--collection-header-background);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

.collection-container-row {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    transition: background-color 0.15s ease;
}

    .collection-container-row:hover {
        background-color: var(--collection-row-hover-background);
    }

    .collection-container-row:last-child {
        border-bottom: none;
    }

@media (min-width:768px) {
    .collection-container {
        display: grid;
        /* Dynamic grid columns: adjust based on child count or specific overrides */
        grid-template-columns: repeat(var(--grid-columns, 5), minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        min-width: 0;
        background-color: var(--content-background-color);
        border: 1px solid var(--border-color);
        border-radius: 2px;
        overflow: hidden;
    }

    .collection-container-header {
        display: contents;
    }

    .collection-container-row {
        display: contents;
    }

        .collection-container-header > *,
        .collection-container-row > * {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color-light);
            display: flex;
            align-items: center;
            min-width: 0;
            background-color: inherit;
            transition: background-color 0.15s ease;
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

    .collection-container-header > * {
        background-color: var(--collection-header-background);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.05em;
        color: var(--collection-header-text-color);
        border-bottom: 1px solid var(--border-color);
    }

    /* Hover effect needs to be applied to the row's children since row is display: contents */
    .collection-container-row:hover > * {
        background-color: var(--collection-row-hover-background);
    }
}

/* After grid cell `display: block` above: action/toolbar cells need flex + single row */
.collection-container .collection-container-header > *:has(.button),
.collection-container .collection-container-header > *:has(button),
.collection-container .collection-container-header > *:has(.inline-controls),
.collection-container .collection-container-row > *:has(.button),
.collection-container .collection-container-row > *:has(button),
.collection-container .collection-container-row > *:has(.inline-controls) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

/* Compact toolbar buttons inside list/grid rows (narrow action column) */
.collection-container .collection-container-row > *:has(.button) .button .button__input,
.collection-container .collection-container-header > *:has(.button) .button .button__input {
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    gap: 6px;
}

.collection-container .collection-container-row > * .content-list-actions button.content-list-action-button {
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

/* AI Advisor Panel */
.ai-advisor-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-background-color);
    z-index: 180;
    backdrop-filter: blur(var(--advisor-backdrop-blur, 1px));
}

.ai-advisor-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    background-color: var(--advisor-background);
    border-left: 1px solid var(--border-color);
    box-shadow: -12px 0 32px var(--shadow-color);
    transform: translateX(100%);
    transition: transform 0.25s ease-in-out;
    z-index: 200;
    display: flex;
    flex-direction: column;
    color: var(--text-color-primary);
}

    .ai-advisor-panel.open {
        transform: translateX(0);
    }

.ai-advisor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--advisor-header-background);
}

    .ai-advisor-header button {
        width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        color: var(--text-color-tertiary);
        transition: all 0.2s ease;
    }

        .ai-advisor-header button:hover {
            background-color: var(--zinc-800);
            color: var(--text-color-primary);
        }

        .ai-advisor-header button .icon {
            width: 14px;
            height: 14px;
        }

.ai-advisor-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .ai-advisor-title .icon-container {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--status-info-bg);
        border: 1px solid var(--border-color);
        border-radius: 2px;
    }

    .ai-advisor-title .icon {
        width: 16px;
        height: 16px;
        color: var(--accent-color);
    }

    .ai-advisor-title .title-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ai-advisor-title .title-main {
        font-weight: 600;
        font-size: 14px;
        color: var(--text-color-primary);
        line-height: 1.2;
    }

    .ai-advisor-title .title-sub {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-color-secondary);
        line-height: 1.2;
    }

.ai-advisor-body {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--advisor-body-background);
}

.chat-message {
    display: flex;
    gap: 12px;
    max-width: 100%;
}

    .chat-message.from-user {
        flex-direction: row-reverse;
    }

    .chat-message .avatar {
        width: 24px;
        height: 24px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 4px;
    }

    .chat-message.from-ai .avatar {
        background-color: var(--status-info-bg);
        color: var(--accent-color);
        border: 1px solid var(--border-color);
    }

    .chat-message.from-user .avatar {
        background-color: var(--zinc-800);
        color: var(--text-color-secondary);
    }

    .chat-message .message-content {
        display: flex;
        flex-direction: column;
        max-width: calc(100% - 36px);
    }

    .chat-message.from-user .message-content {
        align-items: flex-end;
    }

    .chat-message .bubble {
        padding: 8px 12px;
        border-radius: 2px;
        background-color: transparent;
        color: var(--text-color-primary);
        border: none;
        font-size: 13px;
        line-height: 1.5;
        word-break: break-word;
    }

    .chat-message.from-user .bubble {
        background-color: var(--zinc-800);
        color: var(--zinc-200);
    }

    .chat-message .timestamp {
        font-size: 9px;
        color: var(--text-color-tertiary);
        margin-top: 4px;
        padding: 0 4px;
    }

    .chat-message.from-user .timestamp {
        text-align: right;
    }

    .chat-message .ai-advisor-typing-bubble {
        display: flex;
        align-items: center;
        min-height: 28px;
    }

    .chat-message .ai-advisor-typing-dots {
        display: inline-flex;
        gap: 5px;
        align-items: center;
        padding: 2px 0;
    }

    .chat-message .ai-advisor-typing-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--text-color-secondary);
        animation: ai-advisor-typing-dot 1.05s ease-in-out infinite;
    }

    .chat-message .ai-advisor-typing-dot:nth-child(2) {
        animation-delay: 0.18s;
    }

    .chat-message .ai-advisor-typing-dot:nth-child(3) {
        animation-delay: 0.36s;
    }

@keyframes ai-advisor-typing-dot {
    0%, 70%, 100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    35% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.ai-advisor-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--advisor-footer-background);
}

.ai-advisor-input-wrapper {
    position: relative;
    background-color: var(--zinc-900);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    transition: border-color 0.2s ease;
}

    .ai-advisor-input-wrapper:focus-within {
        border-color: var(--accent-color);
    }

    .ai-advisor-input-wrapper textarea {
        width: 100%;
        background: transparent;
        border: none;
        padding: 12px 40px 12px 12px;
        /* Right padding for send button */
        color: var(--text-color-primary);
        font-size: 13px;
        resize: none;
        outline: none;
        min-height: 44px;
        max-height: 120px;
    }

    .ai-advisor-input-wrapper .send-button {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        background-color: transparent;
        color: var(--text-color-tertiary);
        transition: all 0.2s ease;
        border: none;
        padding: 0;
    }

        .ai-advisor-input-wrapper .send-button:hover:not(:disabled) {
            background-color: var(--zinc-800);
            color: var(--accent-color);
        }

        .ai-advisor-input-wrapper .send-button:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .ai-advisor-input-wrapper .send-button .icon {
            width: 14px;
            height: 14px;
        }

/* Profile Page Styles */
.profile-page {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 20px;
}

.profile-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-color-primary);
}

.profile-description {
    font-size: 14px;
    color: var(--text-color-secondary);
    margin: 0;
}

.profile-feedback {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
}

    .profile-feedback.info {
        background-color: var(--status-info-bg);
        color: var(--status-info-color);
        border: 1px solid var(--border-color);
    }

    .profile-feedback.warning {
        background-color: var(--status-warning-bg);
        color: var(--status-warning-color);
        border: 1px solid var(--border-color);
    }

    .profile-feedback.success {
        background-color: var(--status-success-bg);
        color: var(--status-success-color);
        border: 1px solid var(--border-color);
    }

    .profile-feedback.error {
        background-color: var(--status-error-bg);
        color: var(--status-error-color);
        border: 1px solid var(--border-color);
    }

.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

.profile-card {
    background-color: var(--content-background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.125rem;
    padding: 24px;
    box-shadow: 0 4px 6px -1px var(--shadow-color);
    margin-bottom: 22px;
}

/* Profile: subscriptions / payment CTA (matches gray secondary-style control) */
.profile-billing-link {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: var(--content-background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

button.profile-billing-link {
    font: inherit;
    text-align: center;
}

.profile-billing-link:hover {
    border-color: var(--border-color-light, var(--border-color));
    filter: brightness(1.05);
}

.profile-billing-link-emerald {
    border-color: var(--emerald-600, #059669);
    color: var(--emerald-400, #34d399);
}

.profile-avatar-box {
    width: 64px;
    height: 64px;
    border-radius: 0.125rem;
    background-color: var(--status-success-bg);
    border: 1px solid var(--emerald-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--status-success-color);
}

.profile-form-field {
    margin-top: 1.25rem;
}

    .profile-form-field .profile-label {
        margin-bottom: 0.5rem;
        display: block;
    }

/* Information Bar */
.information-bar {
    display: none;
    padding: 10px;
    margin: 0;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    font-size: 16px;
    color: var(--text-color-primary);
    align-items: center;
    justify-content: space-between;
}

.status-bar-text {
    flex: 1;
    margin-left: 8px;
}

.information-bar.show {
    display: flex;
    flex-direction: row;
    opacity: 1;
}

.information-bar.success {
    background-color: var(--info-bar-success-bg);
    color: var(--info-bar-success-text);
}

.information-bar.info {
    background-color: var(--info-bar-info-bg);
    color: var(--info-bar-info-text);
}

.information-bar.warning {
    background-color: var(--info-bar-warning-bg);
    color: var(--info-bar-warning-text);
}

.information-bar.error {
    background-color: var(--info-bar-error-bg);
    color: var(--info-bar-error-text);
}

.inline,
.inline--fullwidth {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}

.inline--fullwidth,
.fullwidth {
    width: 100%;
}

.fillspace,
.inline--fullwidth > div {
    flex: 1;
}

.card-collection {
    display: flex;
    gap: var(--space-5);
}

.card {
    width: 100%;
    min-width: 0;
    padding: var(--space-card-padding);
    background-color: var(--content-background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.125rem;
    box-shadow: 0 4px 6px -1px var(--shadow-color);
    margin-bottom: 22px;
    box-sizing: border-box;
}

.card > .content-container {
    max-width: none;
    padding: 0;
}

.card.card--elevated {
    box-shadow: 0 10px 38px -12px var(--shadow-color);
}

.content-container {
    width: 100%;
    max-width: var(--content-container-max-width);
    margin: 0 auto;
    padding: var(--space-card-padding);
    min-width: 0;
    box-sizing: border-box;
}

/* Nested containers (e.g. property editor in modals) must not add a second padding ring */
.modal-dialog__body > .content-container,
.modal-dialog__body .content-container {
    max-width: none;
    padding: 0;
}

.inline-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Button groups: natural width, always in a horizontal row */
.inline-controls:has(> .button) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.inline-controls .button {
    flex: 0 0 auto;
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

@media (min-width: 768px) {
    .inline-controls:not(:has(> .button)) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .inline-controls:not(:has(> .button)) > .text-box,
    .inline-controls:not(:has(> .button)) > .form-field,
    .inline-controls:not(:has(> .button)) > fieldset,
    .inline-controls:not(:has(> .button)) > div {
        flex: 1 1 12rem;
        min-width: 0;
    }
}

.content-container--no-padding {
    padding: 0;
}

/* Modal — all rules here so host apps can override without scoped CSS */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-4);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
    padding-top: max(var(--space-4), env(safe-area-inset-top, 0px));
    background-color: var(--overlay-background-color);
    backdrop-filter: blur(var(--modal-backdrop-blur, 5px));
}

.modal-dialog {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: min(520px, calc(100vw - 32px));
    max-height: min(90dvh, 900px);
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--modal-background);
    box-shadow: 0 8px 24px var(--modal-shadow);
}

.modal-dialog--large {
    max-width: min(760px, calc(100vw - 32px));
}

.modal-dialog--extra-large {
    max-width: min(980px, calc(100vw - 32px));
}

.modal-dialog__header {
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-bottom: 1px solid transparent;
}

.modal-dialog__header--titled {
    justify-content: space-between;
    align-items: flex-start;
    border-bottom-color: var(--border-color);
}

.modal-dialog__title-group {
    flex: 1;
    min-width: 0;
    padding-right: var(--space-2);
}

.modal-dialog__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color-primary);
}

.modal-dialog__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-dialog__close:hover {
    background-color: var(--button-hover-background-color);
    color: var(--text-color-primary);
}

.modal-dialog__close:focus-visible {
    outline: 2px solid var(--input-focus-border-color);
    outline-offset: 2px;
}

.modal-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    color: var(--text-color-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.modal-dialog__header--titled + .modal-dialog__body {
    padding-top: var(--space-4);
}

.modal-dialog__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
    background-color: var(--modal-background);
}

@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end;
        padding: var(--space-3);
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
    }

    .modal-dialog {
        max-width: 100%;
        max-height: min(92dvh, 900px);
        border-radius: 8px 8px 0 0;
    }

    .modal-dialog__body {
        padding: var(--space-4);
    }

    .modal-dialog__actions {
        padding: var(--space-3) var(--space-4);
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
        justify-content: stretch;
    }

    .modal-dialog__actions .button {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Onboarding */
.onboarding-page {
    width: 100%;
}

.setup-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.setup-step__title {
    margin: 0;
}

.setup-step__description {
    margin: 0;
    color: var(--text-color-subtle);
}

.setup-step__section-title {
    margin: 0;
}

.setup-step__icon-wrap {
    display: flex;
    justify-content: center;
}

.setup-step--completion {
    align-items: center;
    text-align: center;
}

    .setup-step--completion .card {
        width: 100%;
        max-width: 700px;
        text-align: left;
    }

.setup-step__actions {
    display: flex;
    justify-content: center;
}

.setup-step__help {
    color: var(--text-color-subtle);
}

.onboarding-list {
    margin: 0;
    padding-left: var(--space-5);
}

    .onboarding-list li {
        margin-bottom: var(--space-2);
    }

.onboarding-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
}

    .onboarding-form-grid > .text-box,
    .onboarding-form-grid > .number-box,
    .onboarding-form-grid > .calliope-input-group {
        grid-column: span 12;
    }

.onboarding-form-grid__half {
    grid-column: span 6;
}

.onboarding-form-grid__third {
    grid-column: span 4;
}

.onboarding-module-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.onboarding-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.onboarding-tier-card {
    height: 100%;
}

.onboarding-tier-card--selected {
    border: 1px solid var(--button-primary-background-color);
}

.onboarding-tier-card__title {
    margin: 0 0 var(--space-2) 0;
}

.onboarding-tier-card__description {
    margin: 0 0 var(--space-2) 0;
    color: var(--text-color-subtle);
}

.onboarding-tier-card__price {
    margin: 0 0 var(--space-3) 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.onboarding-total-card {
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    background-color: var(--content-background-color);
}

.onboarding-total-card__title {
    margin: 0;
}

.onboarding-total-card__description {
    margin: var(--space-1) 0 0 0;
    color: var(--text-color-subtle);
}

.onboarding-loading {
    display: flex;
    justify-content: center;
    padding: var(--space-6) 0;
}

.onboarding-loading__spinner {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    border-top-color: var(--button-primary-background-color);
    animation: onboarding-spin 0.9s linear infinite;
}

/* StepWizard controls the submit flow; hide internal FormView buttons in onboarding steps. */
.setup-step .calliope-form .inline-controls {
    display: none;
}

@keyframes onboarding-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Spinner (Calliope.Core.App/Components/Spinner.razor) */
.calliope-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    box-sizing: border-box;
}

.calliope-spinner:not(.calliope-spinner--compact):not(.calliope-spinner--embedded) {
    width: 100%;
    min-height: min(50vh, 24rem);
}

.calliope-spinner__ring {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 0.35rem solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: calliope-spinner-rotate 0.85s linear infinite;
}

.calliope-spinner:not(.calliope-spinner--compact) .calliope-spinner__label {
    font-size: var(--font-size-base);
}

.calliope-spinner__label {
    margin: 0;
    text-align: center;
    color: var(--text-color-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.calliope-spinner__caption {
    display: inline-flex;
    align-items: baseline;
}

.calliope-spinner__dots-slot {
    display: inline-block;
    width: 1.25em;
    flex-shrink: 0;
}

.content-container:has(> .calliope-spinner:only-child) {
    display: flex;
    flex-direction: column;
    min-height: min(60vh, 28rem);
}

.content-container:has(> .calliope-spinner:only-child) > .calliope-spinner:not(.calliope-spinner--compact):not(.calliope-spinner--embedded) {
    flex: 1;
}

.calliope-spinner__dots {
    display: inline-block;
    width: 1.25em;
    text-align: left;
}

.calliope-spinner__dots::after {
    content: '';
    animation: calliope-spinner-ellipsis 1.4s steps(4, end) infinite;
}

@keyframes calliope-spinner-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes calliope-spinner-ellipsis {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75%,
    100% {
        content: '...';
    }
}

.calliope-spinner--compact {
    width: auto;
    min-height: 0;
    padding: var(--space-2) 0;
    gap: var(--space-2);
}

.calliope-spinner--compact .calliope-spinner__ring {
    width: 2.25rem;
    height: 2.25rem;
    border-width: 0.25rem;
}

.calliope-spinner--embedded {
    width: 100%;
    min-height: 0;
    padding: var(--space-4) 0;
}

.calliope-spinner--embedded .calliope-spinner__ring {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

@media (max-width: 900px) {
    .onboarding-form-grid__half,
    .onboarding-form-grid__third {
        grid-column: span 12;
    }

    .onboarding-tier-grid {
        grid-template-columns: 1fr;
    }
}

/* Register tenant (public account) */
.register-tenant__error {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background-color: var(--info-bar-error-bg);
    color: var(--info-bar-error-text);
}

.register-tenant .calliope-form form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

    .register-tenant .calliope-form form > .text-box,
    .register-tenant .calliope-form form > .radio-collection,
    .register-tenant .calliope-form form > .register-tenant__hint,
    .register-tenant .calliope-form form > .register-tenant__actions,
    .register-tenant .calliope-form form > .validation-summary {
        grid-column: span 2;
    }

        .register-tenant .calliope-form form > .text-box.register-tenant__field-half {
            grid-column: span 1;
        }

.register-tenant__hint {
    margin: calc(-1 * var(--space-2)) 0 0 0;
    font-size: 0.875rem;
    color: var(--text-color-subtle);
}

.register-tenant__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.register-tenant__hiddens {
    grid-column: span 2;
    display: none;
}

@media (max-width: 600px) {
    .register-tenant .calliope-form form > .text-box.register-tenant__field-half {
        grid-column: span 2;
    }
}

/* Gauge */
.gauge {
    position: relative;
    width: 200px;
    height: 100px;
}

.gauge-label {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.2rem;
    font-weight: 600;
}

/* Sortable List View */
.item-list-container {
    width: 100%;
    overflow-x: auto;
}

.desktop-view {
    width: 100%;
    border-collapse: collapse;
    display: block;
}

    .desktop-view th,
    .desktop-view td {
        border: 1px solid var(--border-color-light);
        padding: 8px;
        text-align: left;
    }

.mobile-card {
    border: 1px solid var(--border-color-light);
    padding: 10px;
    margin-bottom: 10px;
}

/* Reorderable List */
.reorderable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reorderable-list__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    background: var(--list-item-background-color-primary);
    color: var(--text-color-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.reorderable-list__item--selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.reorderable-list__item--dragging {
    opacity: 0.55;
}

.reorderable-list__item--drop-target {
    border-color: var(--accent-color);
    background: var(--button-hover-background-color);
}

.reorderable-list__item--drop-before,
.reorderable-list__item--drop-after {
    position: relative;
}

.reorderable-list__item--drop-before::before,
.reorderable-list__item--drop-after::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--accent-color);
    border-radius: 2px;
}

.reorderable-list__item--drop-before::before {
    top: -2px;
}

.reorderable-list__item--drop-after::after {
    bottom: -2px;
}

.reorderable-list__handle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: var(--text-color-secondary);
    cursor: grab;
    touch-action: none;
}

.reorderable-list__handle:active {
    cursor: grabbing;
}

.reorderable-list__body {
    flex: 1 1 auto;
    min-width: 0;
}

.reorderable-list__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Page Block Composer */
.page-block-composer {
    display: block;
}

.page-block-composer__toolbar {
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-start;
}

.page-block-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-block-picker .nano-content-type-picker {
    max-height: 60vh;
    overflow: auto;
}

.page-block-preview__state {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.page-block-preview__state--saved {
    background: var(--list-item-background-color-secondary);
    color: var(--text-color-secondary);
}

.page-block-preview__state--unsaved {
    background: color-mix(in srgb, var(--warning-color) 18%, transparent);
    color: var(--warning-color);
}

.page-block-preview__state--staged {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-color);
}

.page-block-composer__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.page-block-composer__panel {
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    padding: 16px;
    background: var(--content-background-color);
}

.page-block-composer__panel-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color-primary);
}

.page-block-composer__empty {
    padding: 24px;
    border: 1px dashed var(--border-color-light);
    border-radius: 8px;
    color: var(--text-color-secondary);
    text-align: center;
    background: var(--list-item-background-color-secondary);
}

.page-block-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-block-preview__type {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-color-secondary);
}

.page-block-preview__title {
    font-weight: 600;
    color: var(--text-color-primary);
}

.page-block-preview__summary {
    color: var(--text-color-secondary);
    font-size: 0.9rem;
}

.nano-content-type-property-list__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

/* Helpers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --- Design System Building Blocks --- */

/* Layout & Containers */
.data-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.data-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 640px) {
    .data-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.data-header-info {
    display: flex;
    flex-direction: column;
}

.data-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color-primary);
    margin: 0;
}

.data-description {
    font-size: 0.875rem;
    color: var(--text-color-secondary);
    margin: 4px 0 0 0;
}

.data-header-actions {
    display: flex;
    gap: 12px;
}

.data-card {
    background-color: var(--content-background-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    /* overflow: visible to allow dropdowns to pop out */
    overflow: visible;
}

/* Toolbar & Filters */
.data-toolbar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .data-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.search-wrapper {
    position: relative;
    max-width: 320px;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-tertiary);
    pointer-events: none;
}

.search-control {
    width: 100%;
    background-color: var(--zinc-950);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 8px 12px 8px 36px;
    color: var(--text-color-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
}

    .search-control:focus {
        border-color: var(--emerald-500);
    }

.filter-tabs {
    display: flex;
    gap: 2px;
    background-color: var(--list-item-background-color-secondary);
    padding: 2px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.filter-tab {
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
}

    .filter-tab:hover {
        color: var(--text-color-primary);
    }

    .filter-tab.active {
        background-color: var(--content-background-color);
        color: var(--text-color-primary);
        box-shadow: 0 1px 2px var(--shadow-color);
    }

/* Filter sidebar + sektioner (t.ex. innehållslista: innehållstyp, status, arbetsflöde) */
.filter-sidebar {
    flex: 0 0 auto;
    min-width: 0;
}

.filter-sidebar__title {
    margin: 0 0 0.75rem;
    padding: 0 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
}

.filter-section {
    margin-bottom: 0.5rem;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section .card {
    margin-bottom: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: none;
}

.filter-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: none;
    background-color: var(--zinc-900);
    color: var(--text-color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-section__header:hover {
    background-color: var(--zinc-800);
}

.filter-section__header:focus-visible {
    outline: 2px solid var(--emerald-500);
    outline-offset: 2px;
}

.filter-section__title {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.filter-section__icon {
    flex-shrink: 0;
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.65;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.filter-section.collapsed .filter-section__icon {
    transform: translateY(1px) rotate(-45deg);
    opacity: 0.55;
}

.filter-section__content {
    padding: 0.375rem 0.75rem 0.625rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--content-background-color);
}

.filter-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.3125rem 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.filter-checkbox:hover .filter-checkbox__label {
    color: var(--text-color-primary);
}

.filter-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0.1rem 0 0;
    accent-color: var(--emerald-500, #10b981);
    cursor: pointer;
}

.filter-checkbox__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
}

.filter-checkbox__label {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--text-color-secondary);
    transition: color 0.15s ease;
}

.filter-checkbox__count {
    flex-shrink: 0;
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    background-color: var(--zinc-800);
    color: var(--text-color-secondary);
}

/* Updated Data Grid (Generalizing collection-container logic) */
.data-grid {
    display: grid;
    width: 100%;
    grid-template-columns: var(--grid-template, repeat(5, 1fr));
}

.data-grid-header {
    display: contents;
}

.data-grid-row {
    display: contents;
}

.data-grid-header > div {
    background-color: var(--collection-header-background);
    padding: 12px 16px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--collection-header-text-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.data-grid-row > div {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    align-items: center;
    background-color: inherit;
    transition: background-color 0.15s ease;
}

.data-grid-row:hover > div {
    background-color: var(--collection-row-hover-background);
}

.data-grid-row:last-of-type > div {
    border-bottom: none;
}

/* Building Blocks */
.badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.badge-variant-outline {
    background-color: transparent;
    border-color: var(--border-color-dark);
}

.badge-status-completed {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--emerald-500);
}

.badge-status-pending {
    background-color: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
}

.amount-mono {
    font-family: var(--font-family-mono);
    font-weight: 500;
    font-size: 0.875rem;
}

.amount-income {
    color: var(--emerald-500);
}

.amount-expense {
    color: var(--text-color-primary);
}

.icon-indicator-container {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-indicator-income {
    background-color: rgba(16, 185, 129, 0.1);
}

.icon-indicator-expense {
    background-color: rgba(244, 63, 94, 0.1);
}

.text-right {
    text-align: right;
}

.justify-end {
    justify-content: flex-end;
}

/* Drag & Drop Zone */
.drop-zone {
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-color-tertiary);
    background-color: rgba(39, 39, 42, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .drop-zone:hover {
        border-color: var(--emerald-500);
        background-color: rgba(16, 185, 129, 0.05);
        color: var(--text-color-primary);
    }

.drop-zone-icon {
    width: 32px;
    height: 32px;
    color: var(--text-color-tertiary);
}

.drop-zone:hover .drop-zone-icon {
    color: var(--emerald-500);
}

/* Collapsible Sections */
.collapsible-section {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--content-background-color);
    margin-top: 16px;
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

    .collapsible-header:hover {
        background-color: var(--zinc-900);
    }

.collapsible-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color-primary);
}

.collapsible-icon {
    width: 14px;
    height: 14px;
    color: var(--text-color-tertiary);
    transition: transform 0.2s ease;
}

.collapsible-body {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

/* Grid Specific Inputs */
.grid-input-clean {
    background-color: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
}

    .grid-input-clean:focus {
        background-color: var(--input-background-color) !important;
        color: var(--text-color-primary) !important;
        outline: none;
        box-shadow: 0 0 0 1px var(--input-focus-border-color) !important;
    }

/* Button Variants for Registration */
.btn-book {
    background-color: var(--emerald-600) !important;
    color: white !important;
    font-weight: 600 !important;
}

    .btn-book:hover {
        background-color: var(--emerald-500) !important;
    }

.btn-add {
    background-color: var(--indigo-600) !important;
    color: white !important;
}

    .btn-add:hover {
        background-color: var(--indigo-500) !important;
    }

/* Wizard Styles */
.wizard-container {
    max-width: 600px;
    margin: auto;
}

.wizard-steps {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

    .step .circle {
        width: 2rem;
        height: 2rem;
        border: 2px solid #ccc;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
    }

    .step.completed .circle {
        border-color: #28a745;
        background: #28a745;
        color: white;
    }

    .step.active .circle {
        border-color: #007bff;
        background: #007bff;
        color: white;
    }

    .step .title {
        margin-top: 0.5rem;
        font-size: 0.8rem;
        text-align: center;
    }

.connector {
    flex: 1;
    height: 2px;
    background: #ccc;
    margin: 0 0.5rem;
}

    .connector.completed {
        background: #28a745;
    }

.wizard-content {
    /*    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 4px;
    min-height: 200px;
    margin-bottom: 1rem;*/
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
}

.public-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.public-layout__header {
    display: flex;
    margin: 12px 22px;
    width: 100%;
}

.public-layout__brand {
    flex: 1;
    font-weight: 600;
    padding: 0px 20px;
}

.public-layout__nav {
    display: flex;
    gap: 15px;
    padding: 0px 20px;
}

.public-layout__body {
    max-width: 768px;
}

/* Full bredd så modulens gradient (body + / eller .public-layout) täcker hela viewport; gäller landning, CMS / + glaspanel-sidor */
.public-layout:has(.landing-page),
.public-layout:has(.nano-home),
.public-layout:has(.nano-public-panel) {
    width: 100%;
    min-height: 100vh;
}

.public-layout:has(.landing-page) .public-layout__body,
.public-layout:has(.nano-home) .public-layout__body,
.public-layout:has(.nano-public-panel) .public-layout__body {
    max-width: none;
    width: 100%;
    flex: 1;
}

.public-layout:has(.landing-page) .landing-page {
    width: 100%;
    box-sizing: border-box;
}

/* Public module landing (PublicLandingPage) — set data-nano-landing on root .landing-page; replaces scoped *.razor.css */
.landing-page[data-nano-landing="erp"],
.landing-page[data-nano-landing="cms"] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 4rem 2rem;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.landing-page[data-nano-landing="erp"] {
    background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
}

.landing-page[data-nano-landing="cms"] {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 50%, #38bdf8 100%);
}

.landing-page[data-nano-landing="erp"] .hero-section,
.landing-page[data-nano-landing="cms"] .hero-section {
    text-align: center;
    max-width: 1320px;
    width: 100%;
}

.landing-page[data-nano-landing="erp"] .hero-section h1,
.landing-page[data-nano-landing="cms"] .hero-section h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.landing-page[data-nano-landing="erp"] .subtitle,
.landing-page[data-nano-landing="cms"] .subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 4rem;
    opacity: 0.95;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.landing-page[data-nano-landing="erp"] .features,
.landing-page[data-nano-landing="cms"] .features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 4rem 0;
}

@media (max-width: 1100px) {
    .landing-page[data-nano-landing="erp"] .features,
    .landing-page[data-nano-landing="cms"] .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .landing-page[data-nano-landing="erp"] .features,
    .landing-page[data-nano-landing="cms"] .features {
        grid-template-columns: 1fr;
    }
}

.landing-page[data-nano-landing="erp"] .feature-card,
.landing-page[data-nano-landing="cms"] .feature-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    row-gap: 0.35rem;
    align-items: start;
}

.landing-page[data-nano-landing="erp"] .feature-card > :not(.feature-icon),
.landing-page[data-nano-landing="cms"] .feature-card > :not(.feature-icon) {
    grid-column: 2;
}

.landing-page[data-nano-landing="erp"] .feature-card:hover,
.landing-page[data-nano-landing="cms"] .feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.landing-page[data-nano-landing="erp"] .feature-icon {
    margin-bottom: 0;
    color: #fdbb2d;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
}

.landing-page[data-nano-landing="cms"] .feature-icon {
    margin-bottom: 0;
    color: #93c5fd;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
}

.landing-page[data-nano-landing="erp"] .feature-card h3,
.landing-page[data-nano-landing="cms"] .feature-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.landing-page[data-nano-landing="erp"] .feature-card p,
.landing-page[data-nano-landing="cms"] .feature-card p {
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.85;
    margin: 0;
}

.landing-page[data-nano-landing="erp"] .cta-section,
.landing-page[data-nano-landing="cms"] .cta-section {
    margin-top: 4rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.landing-page[data-nano-landing="erp"] .btn,
.landing-page[data-nano-landing="cms"] .btn {
    padding: 1.25rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.landing-page[data-nano-landing="erp"] .btn:hover,
.landing-page[data-nano-landing="cms"] .btn:hover {
    transform: scale(1.05);
}

.landing-page[data-nano-landing="erp"] .btn-primary,
.landing-page[data-nano-landing="cms"] .btn-primary {
    background: #ffffff;
    color: #b21f1f;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.landing-page[data-nano-landing="cms"] .btn-primary {
    color: #1d4ed8;
}

.landing-page[data-nano-landing="erp"] .btn-secondary,
.landing-page[data-nano-landing="cms"] .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}

.landing-page[data-nano-landing="erp"] .btn-secondary:hover,
.landing-page[data-nano-landing="cms"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
}

/* Ledger: simpler hero / cards */
.landing-page[data-nano-landing="ledger"] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
}

.landing-page[data-nano-landing="ledger"] .hero-section {
    text-align: center;
    max-width: 1200px;
}

.landing-page[data-nano-landing="ledger"] .hero-section h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.landing-page[data-nano-landing="ledger"] .subtitle {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.landing-page[data-nano-landing="ledger"] .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.landing-page[data-nano-landing="ledger"] .feature-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.landing-page[data-nano-landing="ledger"] .feature-card h3 {
    margin-bottom: 1rem;
}

.landing-page[data-nano-landing="ledger"] .cta-section {
    margin-top: 3rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.landing-page[data-nano-landing="ledger"] .btn {
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s;
}

.landing-page[data-nano-landing="ledger"] .btn:hover {
    transform: translateY(-2px);
}

.landing-page[data-nano-landing="ledger"] .btn-primary {
    background: white;
    color: #667eea;
}

.landing-page[data-nano-landing="ledger"] .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.Linnsbutton {
}

.Linnsbutton-input {
    background-color: rgba(16, 185, 129, 0.05);
    box-shadow: rgba(16, 185, 129, 0.40) 10px 10px;
}

.image-card {
    display: flex;
    border-radius: 10px;
}

.image-card__information {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.image-card__minirubrik {
    font-size: 0.8em;
}

.image-card__rubrik {
    font-size: 2em;
    font-weight: 600;
}

.image-card__text {
    font-size: 1em;
}

.image-card__link {
}

.property {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.properties-container {
    border: 1px solid var(--border-color);
    border-radius: 0.125rem;
    overflow: hidden;
    background-color: var(--content-background-color);
    margin-bottom: 1.25rem;
}

.properties-container .property {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: baseline;
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color-light);
}

.properties-container .property:last-child {
    border-bottom: none;
}

.properties-container .property__name {
    color: var(--text-color-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.properties-container .property__value {
    color: var(--text-color-primary);
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.properties-container .property__list {
    margin: 0;
    padding-left: 1.1rem;
}

.card__section-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color-primary);
}

/* Stripe Payment Element (ManagePaymentMethodsPage) */
.stripe-payment-element-host {
    min-height: 120px;
    margin-bottom: 1rem;
    max-width: 500px;
}

.stripe-element-loading {
    margin: 0 0 0.75rem;
    color: var(--text-color-secondary, #94a3b8);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Account / Login (Login.razor) — global so styles apply when the page is loaded outside scoped CSS bundling */
.login-page {
    max-width: 38rem;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2.5rem) 1rem 3rem;
    text-align: center;
}

.login-page__hero {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-page__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

.login-page__brand-mark {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.login-page__brand-nano {
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--nano-brand-name-color);
}

.login-page__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.65rem, 4.5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--gray-900, #111827);
}

.login-page__title-line {
    display: inline;
}

.login-page__title-pre {
    font-weight: 700;
    color: inherit;
}

.login-page__title-accent {
    font-weight: 800;
    color: var(--bs-primary, #6344d4);
}

.login-page__lead {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--gray-600, #4b5563);
}

.login-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 1.25rem;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
    padding: 1.35rem clamp(1rem, 3vw, 1.5rem) 1.5rem;
    text-align: left;
}

.login-card__title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    color: var(--gray-900, #111827);
}

.login-field {
    margin-bottom: 1rem;
}

.login-field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-600, #4b5563);
}

.login-field__control {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0 0.85rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 0.75rem;
    background: #fff;
}

.login-field__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--gray-500, #6b7280);
}

.login-field__icon svg {
    display: block;
}

/* Överstyr forms.css (input[type=…]) som annars sätter --input-background-color (nästan svart i dark theme). */
.login-field__control input.login-field__input,
.login-field__control input.login-field__input[type="text"],
.login-field__control input.login-field__input[type="email"],
.login-field__control input.login-field__input[type="password"] {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background: transparent;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--gray-900, #111827);
    outline: none;
    padding: 0.32rem 0;
    box-shadow: none;
    transition: none;
}

.login-field__control input.login-field__input:focus,
.login-field__control input.login-field__input[type="text"]:focus,
.login-field__control input.login-field__input[type="email"]:focus,
.login-field__control input.login-field__input[type="password"]:focus {
    background-color: transparent;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.login-field__control input.login-field__input.invalid,
.login-field__control input.login-field__input[type="email"].invalid,
.login-field__control input.login-field__input[type="password"].invalid {
    background-color: transparent;
    background: transparent;
    box-shadow: none;
}

.login-field__input--password {
    padding-right: 0.25rem;
}

.login-field__password-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: var(--gray-500, #6b7280);
    border-radius: 0.35rem;
    cursor: pointer;
}

.login-field__password-toggle svg {
    display: block;
}

.login-field__password-toggle:hover {
    color: var(--gray-800, #1f2937);
}

.login-field__validation {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

.login-card__remember {
    margin: 0.25rem 0 1.1rem;
}

.login-card__remember-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    color: var(--gray-700, #374151);
    cursor: pointer;
    margin: 0;
}

.login-card__remember-input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--bs-primary, #6344d4);
}

.login-card__submit {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.25rem;
    margin-left: auto;
    margin-right: auto;
}

.login-card__links {
    margin-top: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.85rem;
}

.login-card__links a {
    font-size: 0.82rem;
    color: var(--gray-600, #4b5563);
    text-decoration: none;
}

.login-card__links a:hover {
    text-decoration: underline;
    color: var(--gray-900, #111827);
}

.login-card__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1.15rem;
    color: var(--gray-500, #6b7280);
}

.login-card__divider::before,
.login-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-200, #e5e7eb);
}

.login-card__divider-label {
    flex-shrink: 0;
    padding: 0.2rem 0.65rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: var(--gray-600, #4b5563);
}

.login-external__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900, #111827);
}

.login-external__lead {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--gray-600, #4b5563);
}

.login-external form {
    margin: 0;
}

.login-external p.d-flex {
    margin: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.login-external .btn,
.login-external .button-secondary {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.login-external .btn {
    border-radius: 0.65rem;
    padding: 0.65rem 1rem;
}

.login-card .validation-summary-errors {
    width: 100%;
    margin-bottom: 0.75rem;
}

.login-card .alert {
    margin-bottom: 1rem;
}

.login-card form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.login-card .text-danger {
    text-align: left;
}

.filter-section__content {
    display: flex;
    flex-direction:column;
}


/* =============================================================================
   Nano products (CMS, Ledger, ERP) — shared public marketing & account surfaces
   ============================================================================= */
body#app-body:is(.cms,.ledger,.erp) {
    --nano-public-validation-text: #fb923c;
    --nano-public-validation-summary-bg: rgba(251, 146, 60, 0.14);
    --nano-public-validation-summary-border: rgba(251, 146, 60, 0.38);
    --nano-public-btn-radius: 0.625rem;
    --nano-public-btn-secondary-pad-y: 0.65rem;
    --nano-public-btn-secondary-pad-x: 1rem;
    --nano-public-btn-font-weight: 600;
    --nano-public-btn-secondary-font-size: 0.9375rem;
    --nano-public-btn-secondary-bg: rgba(255, 255, 255, 0.08);
    --nano-public-btn-secondary-border: rgba(228, 224, 242, 0.35);
    --nano-public-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
    --nano-public-btn-secondary-hover-border: rgba(236, 232, 248, 0.5);
    --nano-public-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    /* Outline secondary on public hero — .button-secondary--public-page only */
    --nano-public-page-btn-secondary-bg: transparent;
    --nano-public-page-btn-secondary-border: rgba(228, 224, 242, 0.45);
    --nano-public-page-btn-secondary-color: #ffffff;
    --nano-public-page-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
    --nano-public-page-btn-secondary-hover-border: rgba(236, 232, 248, 0.65);
    --nano-public-page-btn-secondary-hover-color: #ffffff;
}
/* Förhindra subpixel/standard html som ljus remsa längst ned på publika vyer */
html:has(body#app-body:is(.cms,.ledger,.erp):has(.public-layout)) {
    min-height: 100%;
    background-color: #070510;
}

/* Shared hero / flow typography tokens (nano home & public flows) */
body#app-body:is(.cms,.ledger,.erp) {
    --nano-public-hero-title-size: clamp(2.75rem, 7vw, 4.35rem);
    --nano-public-hero-title-weight: 800;
    --nano-public-hero-title-line-height: 1.05;
    --nano-public-hero-title-letter-spacing: -0.03em;
    --nano-public-section-title-size: 1.02rem;
    --nano-public-section-title-weight: 700;
    --nano-public-section-title-line-height: 1.25;
    --nano-public-eyebrow-size: clamp(1.65rem, 3.6vw, 2.35rem);
    --nano-public-eyebrow-weight: 700;
    --nano-public-eyebrow-letter-spacing: 0.02em;
    /* Inloggning, Kom igång, Skapa organisation, användarmanual — kompakt sidrubrik */
    --nano-public-flow-title-size: clamp(1.22rem, 2.15vw, 1.58rem);
    --nano-public-flow-title-weight: 700;
    --nano-public-flow-title-line-height: 1.2;
    --nano-public-flow-title-letter-spacing: -0.02em;
    --nano-public-flow-eyebrow-size: clamp(0.8125rem, 1.65vw, 0.98rem);
    /* Inloggad app: sidrubriker som innehållshantering (serif, måttlig storlek) */
    --nano-app-display-font: "Playfair Display", Georgia, "Times New Roman", serif;
    --nano-app-page-title-size: clamp(1.75rem, 2.25vw, 2.125rem);
    --nano-app-page-title-weight: 600;
    --nano-app-page-title-color: var(--text-color-primary);
    /* Hero stack: “Welcome” line + product wordmark on .nano-home */
    --nano-public-hero-font: "Montserrat", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Inloggad app: webbplatsväljare i topbaren — kompakt rad i 64px-navbaren */
body#app-body:is(.cms,.ledger,.erp) .top-navbar .left-side-container {
    overflow: visible;
}

body#app-body:is(.cms,.ledger,.erp) .top-navbar .left-side-container .domain-info {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem 1rem;
    min-width: 0;
}

body#app-body:is(.cms,.ledger,.erp) .top-navbar .left-side-container .site-selector.text-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
}

body#app-body:is(.cms,.ledger,.erp) .top-navbar .left-side-container .site-selector .text-box__label {
    margin-bottom: 0;
    flex-shrink: 0;
}

body#app-body:is(.cms,.ledger,.erp) .top-navbar .left-side-container .site-selector select.text-box__input {
    width: auto;
    min-width: 10rem;
    max-width: min(20rem, 40vw);
    padding: 6px 32px 6px 10px;
    font-size: 0.8125rem;
    line-height: 1.25;
}

/* --- Public: gradient på body (ligger under innehåll; undvik platt zink-950 i dark) */
body#app-body:is(.cms,.ledger,.erp):has(.public-layout) {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 110% 70% at 50% 0%, rgba(139, 92, 246, 0.3) 0%, rgba(124, 58, 237, 0.12) 38%, transparent 58%),
        /* Lätt apelsin nederst till höger */
        radial-gradient(ellipse 100% 70% at 100% 100%, rgba(249, 115, 22, 0.16) 0%, rgba(251, 146, 60, 0.08) 38%, rgba(194, 65, 12, 0.03) 55%, transparent 65%),
        radial-gradient(ellipse 75% 50% at 88% 92%, rgba(234, 88, 12, 0.07) 0%, rgba(244, 114, 182, 0.05) 45%, transparent 55%),
        radial-gradient(ellipse 72% 52% at 5% 15%, rgba(192, 132, 252, 0.22) 0%, rgba(147, 51, 234, 0.08) 45%, transparent 55%),
        linear-gradient(165deg, #070510 0%, #10081f 18%, #1c0f38 42%, #160d24 68%, #120818 88%, #080612 100%);
    background-attachment: scroll;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout {
    min-height: 100vh;
    background: transparent;
}

/* PublicLayout: sticky translucent header on dark public chrome */
body#app-body:is(.cms,.ledger,.erp) .public-layout__header {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0;
    padding: 0.95rem clamp(1.15rem, 4vw, 2.25rem);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    background: rgba(6, 4, 14, 0.38);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__brand {
    color: #f8fafc !important;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__brand--nano,
body#app-body:is(.cms,.ledger,.erp) .sidebar-header .public-layout__brand--nano {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    min-width: 0;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__brand-mark,
body#app-body:is(.cms,.ledger,.erp) .sidebar-header .public-layout__brand-mark {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

body#app-body:is(.cms,.ledger,.erp) .sidebar-collapsed .sidebar-header .public-layout__brand-mark {
    width: 2rem;
    height: 2rem;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__header .public-layout__brand-nano {
    color: var(--nano-brand-name-color-on-dark);
    font-weight: 600;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.app-layout .sidebar-header .public-layout__brand-nano {
    color: var(--nano-brand-name-color-sidebar, var(--nano-brand-name-color));
    font-weight: 600;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.12rem 0.15rem;
    padding: 0 !important;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__nav > a,
body#app-body:is(.cms,.ledger,.erp) .public-layout__nav .public-layout__auth-nav a {
    color: rgba(241, 245, 249, 0.88) !important;
    text-decoration: none !important;
    font-weight: 400;
    font-size: 0.8125rem;
    padding: 0.2rem 0.4rem;
    background: transparent !important;
    border-radius: 0;
    transition: color 0.15s ease;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__nav > a:hover,
body#app-body:is(.cms,.ledger,.erp) .public-layout__nav .public-layout__auth-nav a:hover {
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__nav > a.active,
body#app-body:is(.cms,.ledger,.erp) .public-layout__nav .public-layout__auth-nav a.active {
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__nav > a:focus-visible,
body#app-body:is(.cms,.ledger,.erp) .public-layout__nav .public-layout__auth-nav a:focus-visible {
    outline: 2px solid rgba(196, 181, 255, 0.85);
    outline-offset: 2px;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__auth-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__auth-nav-sep {
    color: rgba(148, 163, 184, 0.5) !important;
    user-select: none;
    margin: 0 0.05rem;
}

/* CMS startsida (/) – hero, radials, kort (matchar public design) */
.nano-home {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 6rem);
    /* All vertikal luft inuti sektionen så nano-home__glow (inset:0) når ända ned; ingen padding under sektionen på main */
    padding: 6rem 0 6rem;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
}

.nano-home__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 78% at 100% 100%, rgba(251, 146, 60, 0.13) 0%, rgba(249, 115, 22, 0.09) 28%, rgba(234, 88, 12, 0.04) 48%, rgba(120, 53, 15, 0.02) 62%, transparent 70%),
        radial-gradient(ellipse 85% 70% at 100% 100%, rgba(217, 119, 6, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 78% 58% at 0% 0%, rgba(167, 139, 250, 0.32) 0%, rgba(124, 58, 237, 0.14) 42%, transparent 54%),
        radial-gradient(ellipse 62% 48% at 72% 22%, rgba(192, 132, 252, 0.14) 0%, rgba(147, 51, 234, 0.06) 45%, transparent 58%);
}

.nano-home__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: calc(100% - 2rem);
    margin: 0 auto;
}

.nano-home__header {
    text-align: center;
    margin-bottom: 2.25rem;
}

.nano-home__eyebrow {
    margin: 0 0 0.85rem;
    font-family: var(--nano-public-hero-font);
    font-size: var(--nano-public-eyebrow-size);
    font-weight: var(--nano-public-eyebrow-weight);
    color: #ffffff;
    letter-spacing: var(--nano-public-eyebrow-letter-spacing);
    -webkit-font-smoothing: antialiased;
}

.nano-home__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.15em 0.28em;
    margin: 0 0 1.1rem;
    font-family: var(--nano-public-hero-font);
    font-size: var(--nano-public-hero-title-size);
    font-weight: var(--nano-public-hero-title-weight);
    line-height: var(--nano-public-hero-title-line-height);
    letter-spacing: var(--nano-public-hero-title-letter-spacing);
    -webkit-font-smoothing: antialiased;
}

.nano-home__title-nano {
    color: var(--nano-brand-name-color-on-dark);
}

/* Product second word (CMS, Ledger, …) — orange gradient (home, flows, header) */
.nano-home__title-product,
body#app-body:is(.cms,.ledger,.erp) .public-layout__header .public-layout__brand-product,
body#app-body:is(.cms,.ledger,.erp) .sidebar-header .public-layout__brand-product,
body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel h1 .nano-get-started__title-product,
.nano-get-started__header h1 .nano-get-started__title-product,
body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__title-brand .nano-user-manual__title-product,
.nano-user-manual__title-brand .nano-user-manual__title-product {
    display: inline-block;
    font-weight: 800;
    background: linear-gradient(180deg, #fdba74 0%, #fb923c 30%, #f97316 58%, #ea580c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Header / app shell brand: lighter than hero gradient wordmark */
body#app-body:is(.cms,.ledger,.erp) .public-layout__header .public-layout__brand-product,
body#app-body:is(.cms,.ledger,.erp) .sidebar-header .public-layout__brand-product {
    font-weight: 600;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

body#app-body:is(.cms,.ledger,.erp) .sidebar-header .public-layout__brand--nano.logotype {
    overflow: visible;
}

.nano-home__lead {
    margin: 0 auto;
    max-width: 38rem;
    font-size: clamp(0.98rem, 1.6vw, 1.12rem);
    line-height: 1.55;
    color: rgba(241, 245, 249, 0.9) !important;
}

.nano-home__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
    margin-top: 2.75rem;
}

.nano-home__card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
    padding: 1.5rem 1.55rem;
    min-height: 8.25rem;
    text-align: left;
    background: rgba(30, 27, 55, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nano-home__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 999px;
    flex-shrink: 0;
    color: #e9d5ff !important;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.45) 0%, rgba(91, 33, 182, 0.35) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 4px rgba(0, 0, 0, 0.22);
}

.nano-home__card-icon > svg {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
    fill: currentColor !important;
    color: inherit;
}

.nano-home__card-title {
    margin: 0 0 0.5rem;
    font-size: var(--nano-public-section-title-size);
    font-weight: var(--nano-public-section-title-weight);
    color: #ffffff !important;
    line-height: var(--nano-public-section-title-line-height);
}

.nano-home__card-text p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.92) !important;
}

.nano-home__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2.5rem;
}

/* Layout för publika CTA-länkar; form (padding, radie) = Core .button-primary / .button-secondary */
.nano-home__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10.5rem;
    text-decoration: none;
    box-sizing: border-box;
}

body#app-body:is(.cms,.ledger,.erp) a.button-secondary.button-secondary--public-page,
body#app-body:is(.cms,.ledger,.erp) .button-secondary.button-secondary--public-page {
    color: var(--nano-public-page-btn-secondary-color);
    background-color: var(--nano-public-page-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--nano-public-page-btn-secondary-border);
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body#app-body:is(.cms,.ledger,.erp) a.button-secondary.button-secondary--public-page:hover,
body#app-body:is(.cms,.ledger,.erp) a.button-secondary.button-secondary--public-page:hover:not(:disabled),
body#app-body:is(.cms,.ledger,.erp) .button-secondary.button-secondary--public-page:hover:not(:disabled) {
    color: var(--nano-public-page-btn-secondary-hover-color);
    background-color: var(--nano-public-page-btn-secondary-hover-bg);
    border-color: var(--nano-public-page-btn-secondary-hover-border);
}

@media (max-width: 960px) {
    .nano-home__features {
        grid-template-columns: 1fr;
    }

    .nano-home__card {
        min-height: 0;
    }
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 5rem);
    padding: 5.5rem 0 2.5rem;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Startsida: padding bara inuti .nano-home; main fyller höjd så glow (inset:0) går i botten */
body#app-body:is(.cms,.ledger,.erp) .public-layout__body:has(.nano-home) {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body:has(.nano-home) .nano-home {
    flex: 1 0 auto;
    width: 100%;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container {
    max-width: 980px;
    width: calc(100% - 2rem);
    margin: 0 auto;
    margin-top: 0;
    border-radius: 1rem;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container:not(.nano-public-panel) h1,
body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container:not(.nano-public-panel) h2,
body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container:not(.nano-public-panel) p,
body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container:not(.nano-public-panel) li {
    color: #1f2937;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(52, 28, 82, 0.78) 0%, rgba(28, 14, 48, 0.92) 50%, rgba(16, 10, 36, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    padding: 2.35rem 1.9rem 2.15rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel::after {
    content: "";
    position: absolute;
    right: -15%;
    bottom: -8%;
    width: min(72%, 28rem);
    height: min(50%, 18rem);
    background: radial-gradient(ellipse 80% 80% at 70% 80%, rgba(251, 146, 60, 0.28) 0%, rgba(236, 72, 153, 0.14) 45%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel > * {
    position: relative;
    z-index: 1;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel h1 {
    color: #ffffff;
}

.nano-get-started__header {
    margin-bottom: 1.35rem;
    text-align: center;
}

.nano-get-started__hero-icon {
    margin: 0 0 0.85rem;
}

.nano-get-started__hero-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    color: #f3e8ff;
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.55) 0%, rgba(88, 28, 135, 0.5) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.2);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-get-started__hero-icon-wrap,
body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-get-started__hero-icon-wrap svg {
    color: #e9d5ff !important;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-get-started__hero-icon-wrap > svg,
.nano-get-started__hero-icon-wrap > svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.nano-get-started__header h1 {
    font-size: var(--nano-public-flow-title-size);
    font-weight: var(--nano-public-flow-title-weight);
    line-height: var(--nano-public-flow-title-line-height);
    letter-spacing: var(--nano-public-flow-title-letter-spacing);
    margin: 0 0 0.65rem;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(15, 23, 42, 0.45);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel h1 .nano-get-started__title-line,
.nano-get-started__header h1 .nano-get-started__title-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.3em 0.38em;
    max-width: 100%;
    line-height: 1.15;
}

@media (min-width: 480px) {
    body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel h1 .nano-get-started__title-line,
    .nano-get-started__header h1 .nano-get-started__title-line {
        flex-wrap: nowrap;
    }
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel h1 .nano-get-started__title-prefix,
.nano-get-started__header h1 .nano-get-started__title-prefix {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    font-weight: var(--nano-public-flow-title-weight);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel h1 .nano-get-started__title-brand,
.nano-get-started__header h1 .nano-get-started__title-brand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2em;
    font-weight: var(--nano-public-flow-title-weight);
}

/* Nano: enhetlig vit, ingen gradient */
body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel h1 .nano-get-started__title-nano,
.nano-get-started__header h1 .nano-get-started__title-nano {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    font-weight: var(--nano-public-flow-title-weight);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-get-started__header .lead {
    color: rgba(203, 213, 225, 0.68) !important;
    line-height: 1.55;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.98rem;
}

.nano-get-started__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.25rem;
}

.nano-get-started__step-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.15rem;
    background: rgba(60, 40, 100, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.85rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nano-get-started__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    flex-shrink: 0;
    color: #f3e8ff !important;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.42) 0%, rgba(91, 33, 182, 0.32) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 5px rgba(0, 0, 0, 0.18);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-get-started__step-icon > svg,
.nano-get-started__step-icon > svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor !important;
    color: inherit;
    opacity: 1;
    flex-shrink: 0;
}

.nano-get-started__step-content {
    min-width: 0;
}

.nano-get-started__step-number {
    display: block;
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(155, 140, 195, 0.62) !important;
    line-height: 1.2;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-get-started__step-content h2,
.nano-get-started__step-card h2 {
    margin: 0 0 0.38rem;
    font-size: var(--nano-public-section-title-size);
    font-weight: var(--nano-public-section-title-weight);
    line-height: var(--nano-public-section-title-line-height);
    color: #ffffff !important;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-get-started__step-content p,
.nano-get-started__step-card p {
    margin: 0;
    color: rgba(198, 204, 220, 0.82) !important;
    font-size: 0.92rem;
    line-height: 1.5;
}

.nano-get-started__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1.75rem;
}

@media (max-width: 640px) {
    .nano-get-started__steps {
        grid-template-columns: 1fr;
    }
}

/* Användarmanual: yttre panel = samma .nano-public-panel som övriga undersidor; nedan typografi och kort */
.nano-user-manual__header {
    text-align: center;
    margin-bottom: 1.65rem;
}

.nano-user-manual__label-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0 0 0.9rem;
}

.nano-user-manual__eyebrow {
    margin: 0;
    font-size: var(--nano-public-flow-eyebrow-size);
    font-weight: var(--nano-public-eyebrow-weight);
    letter-spacing: var(--nano-public-eyebrow-letter-spacing);
    text-transform: none;
    color: rgba(255, 255, 255, 0.92) !important;
}

.nano-user-manual__book-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.45rem;
    color: #f3e8ff;
    background: linear-gradient(150deg, rgba(120, 75, 195, 0.55) 0%, rgba(70, 35, 120, 0.72) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 6px rgba(0, 0, 0, 0.2);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__book-wrap > svg,
.nano-user-manual__book-wrap > svg {
    display: block;
    fill: currentColor !important;
}

.nano-user-manual__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.1em 0.28em;
    margin: 0 0 0.9rem;
    font-size: var(--nano-public-flow-title-size);
    font-weight: var(--nano-public-flow-title-weight);
    line-height: var(--nano-public-flow-title-line-height);
    letter-spacing: var(--nano-public-flow-title-letter-spacing);
    color: #ffffff !important;
}

.nano-user-manual__title-brand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2em;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__title-nano,
.nano-user-manual__title-nano {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__title-accent,
.nano-user-manual__title-accent {
    display: inline-block;
    font-weight: var(--nano-public-flow-title-weight);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__lead,
.nano-user-manual__lead {
    margin: 0 auto;
    max-width: 40rem;
    text-align: center;
    line-height: 1.6;
    font-size: 0.96rem;
    color: rgba(248, 250, 252, 0.9) !important;
}

/* Lila cirkel kring stjärna / lista / glödlemma (inspirationsbild) */
.nano-user-manual__icon-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    min-width: 1.9rem;
    border-radius: 999px;
    color: #e9d5ff;
    background: linear-gradient(165deg, rgba(127, 78, 200, 0.65) 0%, rgba(70, 35, 130, 0.85) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 4px rgba(0, 0, 0, 0.28);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__icon-ring > svg,
.nano-user-manual__icon-ring > svg {
    display: block;
    fill: currentColor !important;
}

.nano-user-manual__icon-ring--flow {
    width: 2.1rem;
    height: 2.1rem;
    min-width: 2.1rem;
    color: #faf5ff;
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__icon-ring--flow > svg,
.nano-user-manual__icon-ring--flow > svg {
    display: block;
    fill: currentColor !important;
    opacity: 0.98;
}

.nano-user-manual__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    align-items: stretch;
    margin-top: 0.5rem;
}

.nano-user-manual__card {
    border-radius: 1rem;
    background: rgba(8, 5, 22, 0.45);
    border: 1px solid rgba(199, 190, 230, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 1.2rem 1.25rem 1.1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nano-user-manual__card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: var(--nano-public-section-title-size);
    font-weight: var(--nano-public-section-title-weight);
    line-height: var(--nano-public-section-title-line-height);
    color: #ffffff !important;
}

.nano-user-manual__flow-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nano-user-manual__flow-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nano-user-manual__flow-list li:first-of-type {
    border-top: none;
    padding-top: 0;
}

.nano-user-manual__flow-list .nano-user-manual__icon-ring--flow {
    margin-top: 0.05rem;
    flex-shrink: 0;
}

.nano-user-manual__flow-list p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(214, 220, 235, 0.92) !important;
}

.nano-user-manual__onboard-steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Tunn, ljus prickad vertikal axel (som referens) — cirklar ligger ovanför med z-index */
.nano-user-manual__onboard-steps::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0.825rem;
    top: 0.88rem;
    bottom: 0.88rem;
    width: 1px;
    margin-left: -0.5px;
    background: repeating-linear-gradient(
        180deg,
        rgba(220, 215, 235, 0.55) 0 2px,
        transparent 2px 6px
    );
    pointer-events: none;
}

.nano-user-manual__onboard-steps li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    border: none;
}

.nano-user-manual__step-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    min-width: 1.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    /* Persika → korall; diskret kant, nästan ingen färgad glow */
    background: linear-gradient(145deg, #ffc9a8 0%, #f9a36d 42%, #e86852 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.22);
}

.nano-user-manual__step-txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.95) !important;
    padding-top: 0.02rem;
}

/* Snabba tips — bred kort, ikon vänster + text vänster */
.nano-user-manual__tips {
    margin-top: 1.25rem;
    border-radius: 1.15rem;
    padding: 1.35rem 1.5rem 1.35rem 1.35rem;
    border: 1px solid rgba(186, 175, 235, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 14px 40px rgba(0, 0, 0, 0.28);
    background:
        linear-gradient(118deg, rgba(18, 10, 38, 0.97) 0%, rgba(32, 18, 58, 0.94) 42%, rgba(24, 14, 48, 0.96) 100%);
}

.nano-user-manual__tips-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.15rem 1.35rem;
}

.nano-user-manual__tips-icon-wrap {
    flex-shrink: 0;
}

.nano-user-manual__tips-icon-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 999px;
    color: #ffffff;
    background: radial-gradient(circle at 32% 28%, rgba(196, 181, 255, 0.5) 0%, rgba(109, 63, 180, 0.55) 52%, rgba(70, 35, 120, 0.72) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 0 28px rgba(139, 92, 246, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.25);
}

body#app-body:is(.cms,.ledger,.erp) .public-layout__body > section.container.nano-public-panel .nano-user-manual__tips-icon-ring > svg,
.nano-user-manual__tips-icon-ring > svg {
    display: block;
    fill: currentColor !important;
    color: #ffffff;
}

.nano-user-manual__tips-copy {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    max-width: 36rem;
}

.nano-user-manual__tips-title {
    margin: 0 0 0.5rem;
    font-size: var(--nano-public-section-title-size);
    font-weight: var(--nano-public-section-title-weight);
    line-height: var(--nano-public-section-title-line-height);
    color: #ffffff !important;
    text-align: left;
}

.nano-user-manual__tips-text {
    margin: 0;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(248, 250, 252, 0.92) !important;
}

@media (max-width: 560px) {
    .nano-user-manual__tips-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .nano-user-manual__tips {
        padding: 1.15rem 1.15rem 1.25rem;
    }
}

@media (max-width: 900px) {
    .nano-user-manual__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Inloggning (/Account/Login?module=CMS): mörk hero + glaskort som i produktmockup --- */
body#app-body:is(.cms,.ledger,.erp) .login-page {
    max-width: 38rem;
    padding-top: clamp(0.5rem, 2vw, 1.25rem);
}

body#app-body:is(.cms,.ledger,.erp) .login-page__brand-nano {
    color: var(--nano-brand-name-color-on-dark);
}

body#app-body:is(.cms,.ledger,.erp) .login-page__title {
    color: #f8fafc;
    font-size: var(--nano-public-flow-title-size);
    font-weight: var(--nano-public-flow-title-weight);
    line-height: var(--nano-public-flow-title-line-height);
    letter-spacing: var(--nano-public-flow-title-letter-spacing);
}

body#app-body:is(.cms,.ledger,.erp) .login-page__title-accent {
    display: inline-block;
    font-weight: 800;
    background: linear-gradient(180deg, #fdba74 0%, #fb923c 30%, #f97316 58%, #ea580c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body#app-body:is(.cms,.ledger,.erp) .login-page__lead {
    color: rgba(203, 213, 225, 0.92) !important;
}

/*
 * Inloggningskort + fält: matchar referens (solid #2d2051-yta, fält = tunt ljust lager + ljus kant).
 */
body#app-body:is(.cms,.ledger,.erp) .login-card {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #2d2051;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body#app-body:is(.cms,.ledger,.erp) .login-card__title,
body#app-body:is(.cms,.ledger,.erp) .login-external__title {
    color: #f5f3fc !important;
    font-size: var(--nano-public-section-title-size);
    font-weight: var(--nano-public-section-title-weight);
    line-height: var(--nano-public-section-title-line-height);
}

body#app-body:is(.cms,.ledger,.erp) .login-field {
    margin-bottom: 1.28rem;
}

body#app-body:is(.cms,.ledger,.erp) .login-field__label {
    margin-bottom: 0.42rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ebe7f5 !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-field__control {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.35rem 0.85rem 0.35rem 0.8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(228, 224, 242, 0.34);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

body#app-body:is(.cms,.ledger,.erp) .login-field__control:focus-within {
    background: rgba(255, 255, 255, 0.078);
    border-color: rgba(236, 232, 248, 0.48);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

body#app-body:is(.cms,.ledger,.erp) .login-field__input {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.35;
    color: #f7f5fc;
    padding: 0.08rem 0;
}

body#app-body:is(.cms,.ledger,.erp) .login-field__input::placeholder {
    color: rgba(220, 216, 238, 0.72);
    opacity: 1;
}

body#app-body:is(.cms,.ledger,.erp) .login-field__icon,
body#app-body:is(.cms,.ledger,.erp) .login-field__password-toggle {
    color: rgba(236, 232, 248, 0.88) !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-field__password-toggle:hover {
    color: #ffffff !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-card__remember-label {
    color: rgba(226, 232, 240, 0.9) !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-card__links a {
    color: rgba(203, 213, 225, 0.88) !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-card__links a:hover {
    color: #ffffff !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-card__divider::before,
body#app-body:is(.cms,.ledger,.erp) .login-card__divider::after {
    background: rgba(210, 200, 235, 0.22);
}

body#app-body:is(.cms,.ledger,.erp) .login-card__divider-label {
    background: #2d2051;
    border-color: rgba(210, 200, 235, 0.35);
    color: rgba(225, 220, 242, 0.92) !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-external__lead {
    color: rgba(215, 208, 235, 0.88) !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-external p.d-flex {
    justify-content: center;
}

body#app-body:is(.cms,.ledger,.erp) .login-external .button-secondary {
    border-radius: var(--nano-public-btn-radius);
    padding: var(--nano-public-btn-secondary-pad-y) var(--nano-public-btn-secondary-pad-x);
    font-weight: var(--nano-public-btn-font-weight);
    font-size: var(--nano-public-btn-secondary-font-size);
    letter-spacing: 0.02em;
    line-height: 1.35;
    cursor: pointer;
}

body#app-body:is(.cms,.ledger,.erp) .login-card .alert-danger {
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

body#app-body:is(.cms,.ledger,.erp) .login-card .alert-success {
    background: rgba(6, 95, 70, 0.28);
    border-color: rgba(52, 211, 153, 0.42);
    color: #a7f3d0;
}

/* Fält- och sammanfattningsfel: vänsterkant i linje med övrigt innehåll, orange */
body#app-body:is(.cms,.ledger,.erp) .login-card .text-danger {
    color: var(--nano-public-validation-text) !important;
}

body#app-body:is(.cms,.ledger,.erp) .login-card .login-field__validation,
body#app-body:is(.cms,.ledger,.erp) .login-card .login-field .validation-message {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
}

body#app-body:is(.cms,.ledger,.erp) .login-card ul.validation-summary-errors {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: var(--nano-public-validation-summary-bg);
    border: 1px solid var(--nano-public-validation-summary-border);
    color: var(--nano-public-validation-text);
    font-size: 0.875rem;
}

body#app-body:is(.cms,.ledger,.erp) .login-card ul.validation-summary-errors li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

body#app-body:is(.cms,.ledger,.erp) .login-card ul.validation-summary-errors li + li {
    margin-top: 0.35rem;
}

/* --- Skapa organisation (/Account/RegisterTenant) — samma panel som inloggning --- */
body#app-body:is(.cms,.ledger,.erp) .register-tenant.content-container {
    max-width: 42rem;
    margin: 0 auto;
    padding: clamp(0.75rem, 2.5vw, 1.5rem) 1rem 3rem;
    min-width: 0;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .calliope-form {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
    background: #2d2051;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.85rem);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .calliope-form__heading {
    margin: 0 0 0.45rem;
    font-size: var(--nano-public-flow-title-size);
    font-weight: var(--nano-public-flow-title-weight);
    line-height: var(--nano-public-flow-title-line-height);
    letter-spacing: var(--nano-public-flow-title-letter-spacing);
    color: #f5f3fc;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .calliope-form__description {
    margin: 0 0 1.2rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.92);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .text-box {
    margin-top: 0;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .text-box__label,
body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection .form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ebe7f5;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .text-box__input,
body#app-body:is(.cms,.ledger,.erp) .register-tenant input.text-box__input,
body#app-body:is(.cms,.ledger,.erp) .register-tenant select.text-box__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.65rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #f7f5fc;
    background-color: rgba(255, 255, 255, 0.065) !important;
    background-image: none !important;
    border: 1px solid rgba(228, 224, 242, 0.34);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .text-box__input:focus,
body#app-body:is(.cms,.ledger,.erp) .register-tenant select.text-box__input:focus {
    background-color: rgba(255, 255, 255, 0.078) !important;
    border-color: rgba(236, 232, 248, 0.48);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .text-box__input::placeholder {
    color: rgba(220, 216, 238, 0.65);
    opacity: 1;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant__hint {
    margin: calc(-1 * var(--space-1, 4px)) 0 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(215, 208, 235, 0.85);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant__error {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection {
    gap: 0.65rem;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection-list {
    gap: 0.5rem;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection-item {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(228, 224, 242, 0.32);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(236, 232, 248, 0.42);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection-item.selected {
    background: rgba(108, 78, 212, 0.24);
    border-color: rgba(190, 175, 255, 0.5);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .item-text {
    color: #f5f3fc;
    font-weight: 500;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-circle {
    border-color: rgba(220, 215, 240, 0.55);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection-item.selected .radio-circle {
    border-color: rgba(196, 181, 255, 0.95);
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .radio-collection-item.selected .radio-dot {
    background-color: #c4b5fd;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .item-check {
    color: #e9d5ff;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .validation-message,
body#app-body:is(.cms,.ledger,.erp) .register-tenant .field-validation-error {
    color: var(--nano-public-validation-text) !important;
    font-size: 0.8125rem;
    margin-left: 0;
    padding-left: 0;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .validation-summary-errors,
body#app-body:is(.cms,.ledger,.erp) .register-tenant ul.validation-summary-errors {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: var(--nano-public-validation-summary-bg);
    border: 1px solid var(--nano-public-validation-summary-border);
    color: var(--nano-public-validation-text);
    font-size: 0.875rem;
    list-style: none;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant ul.validation-summary-errors li {
    margin: 0;
    padding: 0;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant ul.validation-summary-errors li + li {
    margin-top: 0.35rem;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant__actions {
    margin-top: 0.5rem;
    gap: 0.65rem;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant__actions .button-primary,
body#app-body:is(.cms,.ledger,.erp) .register-tenant__actions .button-secondary {
    width: 100%;
    border-radius: var(--nano-public-btn-radius);
    padding: var(--nano-public-btn-secondary-pad-y) var(--nano-public-btn-secondary-pad-x);
    font-weight: var(--nano-public-btn-font-weight);
    font-size: var(--nano-public-btn-secondary-font-size);
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: #f4f1ff;
    background-color: var(--nano-public-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--nano-public-btn-secondary-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body#app-body:is(.cms,.ledger,.erp) .register-tenant .button-secondary:hover:not(:disabled) {
    color: #ffffff;
    background-color: var(--nano-public-btn-secondary-hover-bg);
    border-color: var(--nano-public-btn-secondary-hover-border);
    box-shadow: var(--nano-public-btn-shadow);
}

/* View toggle (grid / list / tree) */
.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    /*background: var(--background-color, #fff);*/
}

.view-toggle__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 1px;
    background: transparent;
    color: var(--text-color-secondary, #6b7280);
    cursor: pointer;
    line-height: 0;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.view-toggle__button:hover:not(.view-toggle__button--active) {
    color: var(--text-color-primary, #111827);
    background: var(--background-color-hover, rgba(0, 0, 0, 0.04));
}

.view-toggle__button--active {
    color: var(--emerald-500, #10b981);
    /*background: var(--background-color, #fff);*/
    border-color: var(--emerald-500, #10b981);
    box-shadow: 0 0 0 1px var(--emerald-500, #10b981);
}

.view-toggle__button:focus-visible {
    outline: 2px solid var(--emerald-500, #10b981);
    outline-offset: 2px;
}

/* CMS string property editors: see theme.css */