/*!
 * Emili 4.5 Main Stylesheet
 *
 * Shared frontend styling for the Emili 4.5 console interface.
 *
 * @application Emili 4.5
 * @package     zavalettaHoldings/emili
 * @author      Zavaletta Holdings
 * @created     2026-05-22
 * @version     1.0.0
 */

:root {
    --emili-radius-lg: 1rem;
    --emili-radius-xl: 1.35rem;
    --emili-app-height: 100dvh;
    --emili-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
    max-width: 100%;
    height: 100%;
    min-height: 100%;
}

html {
    overflow: hidden;
}

body {
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    overflow-x: hidden;
    overscroll-behavior: none;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.16), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.16), transparent 34rem),
        var(--bs-body-bg);
}

.app-shell {
    height: 100vh;
    height: var(--emili-app-height);
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.app-topbar {
    border-bottom: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb), 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 20;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #6f42c1);
    color: #fff;
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.28);
}

.chat-area {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-height: 0;
    padding: 1.25rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.chat-inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

.message-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    width: 100%;
}

.message-row.user {
    justify-content: flex-end;
}

.avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.message-row.user .avatar {
    order: 2;
    background: rgba(var(--bs-primary-rgb), 0.14);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    color: var(--bs-primary);
}

.message-card {
    width: fit-content;
    max-width: min(820px, 78vw);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    padding: 0.95rem 1.05rem;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.94);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

.message-row.user .message-card {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
}

.message-name {
    font-weight: 700;
}

.message-time {
    font-size: 0.74rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.message-row.user .message-time {
    color: rgba(255, 255, 255, 0.78);
}

.composer-shell {
    border-top: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb), 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 1rem;
    padding-bottom: calc(1rem + var(--emili-safe-bottom));
    z-index: 20;
}

.composer-inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

.file-chip {
    display: none;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: 0.45rem 0.65rem;
    margin-bottom: 0.65rem;
    background: var(--bs-tertiary-bg);
    font-size: 0.875rem;
}

.file-chip.active {
    display: inline-flex;
}

.composer-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: var(--bs-tertiary-bg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
    padding: 0.45rem;
    width: 100%;
}

.composer-box textarea {
    min-height: 42px;
    max-height: 140px;
    resize: none;
    border: 0;
    box-shadow: none !important;
    background: transparent;
    padding-top: 0.6rem;
    padding-bottom: 0.55rem;
    overflow-y: auto;
}

.composer-icon-btn,
.send-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.status-pill {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.dropdown-menu {
    border-radius: var(--emili-radius-lg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--bs-border-color);
}

.dropdown-item i {
    width: 1.25rem;
    text-align: center;
}

.resource-monitor-shell {
    min-height: calc(100dvh - 9rem);
    display: grid;
    place-items: center;
}

@supports not (height: 100dvh) {
    .app-shell {
        height: var(--emili-app-height);
    }
}

@media (max-width: 767.98px) {
    .app-topbar {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .brand-subtitle,
    .status-pill {
        display: none !important;
    }

    .chat-area {
        padding: 1rem 0.75rem;
    }

    .message-card {
        max-width: 86vw;
    }

    .composer-shell {
        padding: 0.7rem 0.75rem;
        padding-bottom: calc(0.7rem + var(--emili-safe-bottom));
    }

    .composer-box textarea {
        max-height: 112px;
    }
}

@media (max-width: 575.98px) {
    .avatar {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 0.9rem;
    }

    .message-row {
        gap: 0.5rem;
    }

    .message-card {
        max-width: calc(100vw - 5.5rem);
        padding: 0.85rem 0.9rem;
    }

    .message-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }

    .message-row.user .message-meta {
        align-items: flex-end;
    }

    .composer-box {
        border-radius: 1.1rem;
    }

    .composer-icon-btn,
    .send-btn {
        width: 40px;
        height: 40px;
    }

    .topbar-actions {
        gap: 0.35rem !important;
    }

    .topbar-actions .btn {
        width: 38px;
        height: 38px;
        padding: 0;
    }
}

/* ==========================================================================
   Emili 4.5 Namespace / Environment Forced Side-by-Side Layout
   ========================================================================== */

/* Enforce layout rules only when our specific target class engine is active */
.namespace-env-row.emcore-side-by-side-engine {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
}

.emcore-side-by-side-engine .namespace-env-column {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Ensure grids inside the inner panels stay dual-column */
.emcore-side-by-side-engine .namespace-env-grid,
.emcore-side-by-side-engine .autoload-check-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

/* Maintain container integrity for wide viewing fields */
.blank-panel-inner-wide {
    width: 100% !important;
    max-width: 1440px !important;
}

@media (max-width: 1024px) {
    .namespace-env-row.emcore-side-by-side-engine {
        grid-template-columns: 1fr !important;
    }
    .emcore-side-by-side-engine .namespace-env-grid,
    .emcore-side-by-side-engine .autoload-check-grid {
        grid-template-columns: 1fr !important;
    }
}
/* End Emili 4.5 Namespace / Environment Forced Side-by-Side Layout */

/* ==========================================================================
   Emili 4.5 Blank Page Namespace / Environment Row Repair
   ========================================================================== */

.blank-panel-inner-wide {
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
}

.namespace-env-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: start !important;
}

.namespace-env-column {
    min-width: 0 !important;
    width: 100% !important;
}

.namespace-env-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    text-align: left;
}

.namespace-env-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

@media (max-width: 767.98px) {
    .namespace-env-row {
        grid-template-columns: 1fr !important;
    }

    .namespace-env-grid {
        grid-template-columns: 1fr !important;
    }
}

/* End Emili 4.5 Blank Page Namespace / Environment Row Repair */

/* ==========================================================================
   Emili 4.5 Blank Page Header and Content Card Repair
   ========================================================================== */

.blank-page-header-card,
.blank-page-content-card {
    width: 100%;
}

.blank-page-header-card {
    display: block;
}

.blank-page-content-card {
    min-height: 420px;
    align-items: start;
}

.blank-panel-inner-wide {
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
}

.namespace-env-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: start !important;
}

.namespace-env-column {
    min-width: 0 !important;
    width: 100% !important;
}

.namespace-env-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    text-align: left;
}

.namespace-env-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

@media (max-width: 767.98px) {
    .namespace-env-row {
        grid-template-columns: 1fr !important;
    }

    .namespace-env-grid {
        grid-template-columns: 1fr !important;
    }
}

/* End Emili 4.5 Blank Page Header and Content Card Repair */

/* ==========================================================================
   Emili 4.5 Blank Page Header Box / Content Box Final Fix
   ========================================================================== */

.page-content {
    gap: 1rem !important;
}

/*
 * Top page header card: this is the "Blank Management Page" section.
 */
.blank-page-header-box {
    width: 100% !important;
    display: block !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--emili-radius-xl) !important;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12) !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/*
 * Main content card: this is the Composer / Namespace Check area.
 */
.blank-page-content-box {
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--emili-radius-xl) !important;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.58) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12) !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    min-height: 420px !important;
    overflow: hidden !important;
}

.blank-page-content-box .blank-panel-inner-wide {
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
}

.blank-page-content-box .namespace-env-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: start !important;
}

.blank-page-content-box .namespace-env-column {
    min-width: 0 !important;
    width: 100% !important;
}

.blank-page-content-box .namespace-env-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

@media (max-width: 767.98px) {
    .blank-page-header-box,
    .blank-page-content-box {
        padding: 1rem !important;
    }

    .blank-page-content-box .namespace-env-row,
    .blank-page-content-box .namespace-env-grid {
        grid-template-columns: 1fr !important;
    }
}

/* End Emili 4.5 Blank Page Header Box / Content Box Final Fix */

/* ==========================================================================
   Emili 4.5 Blank Page Outer Padding Fix
   ========================================================================== */

/*
 * Give the blank page cards breathing room inside the main viewport.
 */
.page-main {
    padding: 1.25rem !important;
}

.page-content {
    gap: 1rem !important;
    padding: 0 !important;
}

/*
 * Keep the card internals padded independently from the page padding.
 */
.blank-page-header-box {
    padding: 1.25rem !important;
}

.blank-page-content-box {
    padding: 1.25rem !important;
}

/*
 * Make sure the content inside the Composer / Namespace card does not touch
 * the card edges.
 */
.blank-page-content-box .blank-panel-inner {
    padding: 0.25rem !important;
}

@media (max-width: 767.98px) {
    .page-main {
        padding: 1rem 0.75rem !important;
        padding-bottom: calc(1rem + var(--emili-safe-bottom)) !important;
    }

    .blank-page-header-box,
    .blank-page-content-box {
        padding: 1rem !important;
    }
}

/* End Emili 4.5 Blank Page Outer Padding Fix */

/* ==========================================================================
   Emili 4.5 Blank Page Section Gap Fix
   ========================================================================== */

/*
 * Force clear vertical spacing between the page header card and content card.
 */
.page-content {
    display: grid !important;
    grid-template-rows: auto auto !important;
    row-gap: 1.25rem !important;
    gap: 1.25rem !important;
}

.blank-page-header-box {
    margin-bottom: 0 !important;
}

.blank-page-content-box {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    .page-content {
        row-gap: 1rem !important;
        gap: 1rem !important;
    }
}

/* End Emili 4.5 Blank Page Section Gap Fix */

/* ==========================================================================
   Emili 4.5 Password Reset Page
   ========================================================================== */

.auth-shell.reset-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.16), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.16), transparent 34rem),
        var(--bs-body-bg);
}

.auth-main {
    width: min(100%, 520px);
}

.reset-card {
    width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.18);
    padding: 1.25rem;
    overflow: hidden;
}

.reset-brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.reset-brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #6f42c1);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.28);
}

.reset-stepper {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.reset-step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.reset-step span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb), 0.42);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-weight: 800;
}

.reset-step.active {
    color: var(--bs-primary);
}

.reset-step.active span {
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
}

.reset-step-line {
    height: 1px;
    background: var(--bs-border-color);
    min-width: 1.5rem;
}

.reset-card-header {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 1rem;
    margin-bottom: 1rem;
}

.reset-form .form-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reset-info-box {
    border-radius: 1rem;
}

.reset-card-footer {
    margin-top: 1rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    .auth-shell.reset-shell {
        padding: 0.75rem;
    }

    .reset-card {
        padding: 1rem;
        border-radius: 1rem;
    }

    .reset-stepper {
        gap: 0.4rem;
    }

    .reset-step strong {
        display: none;
    }
}

/* End Emili 4.5 Password Reset Page */

/* ==========================================================================
   Emili 4.5 Login / Reset Split Screen Layout
   ========================================================================== */

.auth-main {
    width: min(100%, 1080px);
}

.reset-card {
    width: min(100%, 1080px) !important;
    display: grid;
    grid-template-columns: minmax(360px, 0.85fr) minmax(420px, 1.15fr);
    padding: 0 !important;
}

.reset-card > :not(.reset-visual) {
    grid-column: 1;
}

.reset-brand,
.reset-stepper,
.reset-card-header,
.reset-form,
.reset-card-footer {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.reset-brand {
    margin-top: 1.25rem;
}

.reset-card-footer {
    margin-bottom: 1.25rem;
}

.reset-visual {
    grid-column: 2;
    grid-row: 1 / span 5;
    min-height: 620px;
    position: relative;
    display: flex;
    align-items: end;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.72)),
        url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1400&q=80") center / cover no-repeat;
}

.reset-visual-overlay {
    width: 100%;
    padding: 2rem;
    color: #fff;
}

.reset-visual-badge {
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.45rem 0.85rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .auth-main {
        width: min(100%, 520px);
    }

    .reset-card {
        display: block;
        padding: 1rem !important;
    }

    .reset-brand,
    .reset-stepper,
    .reset-card-header,
    .reset-form,
    .reset-card-footer {
        margin-left: 0;
        margin-right: 0;
    }

    .reset-brand {
        margin-top: 0;
    }

    .reset-card-footer {
        margin-bottom: 0;
    }

    .reset-visual {
        display: none;
    }
}

/* End Emili 4.5 Login / Reset Split Screen Layout */

/* ==========================================================================
   Emili 4.5 Auth Full Page Split Layout
   ========================================================================== */

/*
 * Reset page: no card/box shell. The form occupies the left side and the image
 * occupies the right side on desktop. On mobile, the image becomes a banner.
 */
.auth-shell.reset-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: block;
    padding: 0 !important;
}

.auth-shell.reset-shell .auth-main {
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: block;
}

.reset-card {
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.82fr) minmax(420px, 1.18fr) !important;
    align-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
}

.reset-card > :not(.reset-visual) {
    grid-column: 1 !important;
    width: min(100%, 520px);
    justify-self: center;
}

.reset-brand {
    margin: 0 1.25rem 1.25rem !important;
    align-self: end;
}

.reset-stepper,
.reset-card-header,
.reset-form,
.reset-card-footer {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important;
}

.reset-card-footer {
    margin-bottom: 0 !important;
}

.reset-visual {
    grid-column: 2 !important;
    grid-row: 1 / span 6 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    position: relative;
    display: flex !important;
    align-items: end;
    overflow: hidden;
    border-left: 1px solid var(--bs-border-color);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.72)),
        url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1400&q=80") center / cover no-repeat;
}

.reset-visual-overlay {
    width: 100%;
    padding: 2rem;
    color: #fff;
}

.reset-visual-badge {
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.45rem 0.85rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

/*
 * Shared mobile behavior: image banner first, form centered below.
 */
@media (max-width: 991.98px) {
    .auth-shell.reset-shell .auth-main {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .reset-card {
        min-height: 100vh;
        min-height: 100dvh;
        grid-template-columns: 1fr !important;
        grid-template-rows: 220px auto auto auto auto auto !important;
        align-content: start;
    }

    .reset-visual {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 220px !important;
        height: 220px !important;
        border-left: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .reset-visual-overlay {
        padding: 1.25rem;
    }

    .reset-visual-overlay h3 {
        font-size: 1.35rem;
    }

    .reset-card > :not(.reset-visual) {
        grid-column: 1 !important;
        width: min(100%, 520px);
        justify-self: center;
    }

    .reset-brand {
        margin: 1.25rem 1rem 1rem !important;
    }

    .reset-stepper,
    .reset-card-header,
    .reset-form,
    .reset-card-footer {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .reset-card-footer {
        margin-bottom: 1.25rem !important;
    }
}

/* End Emili 4.5 Auth Full Page Split Layout */

/* ==========================================================================
   Emili 4.5 Reset Header / Footer Repair
   ========================================================================== */

.reset-login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    padding: 0 !important;
}

.reset-login-shell .login-header,
.reset-login-shell .login-footer {
    background: rgba(var(--bs-body-bg-rgb), 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 2;
}

.reset-login-shell .login-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.reset-login-shell .login-footer {
    border-top: 1px solid var(--bs-border-color);
}

.reset-login-shell .auth-main {
    width: 100% !important;
    min-height: 0 !important;
    display: block !important;
}

.reset-login-shell .reset-card {
    min-height: calc(100vh - 146px) !important;
    min-height: calc(100dvh - 146px) !important;
}

.reset-login-shell .reset-visual {
    min-height: calc(100vh - 146px) !important;
    min-height: calc(100dvh - 146px) !important;
}

@media (max-width: 991.98px) {
    .reset-login-shell .reset-card {
        min-height: calc(100vh - 146px) !important;
        min-height: calc(100dvh - 146px) !important;
        grid-template-rows: 220px auto auto auto auto auto !important;
    }

    .reset-login-shell .reset-visual {
        min-height: 220px !important;
        height: 220px !important;
    }
}

/* End Emili 4.5 Reset Header / Footer Repair */

/* ==========================================================================
   Emili 4.5 Login Desktop Half Split Final Fix
   ========================================================================== */

.login-main {
    width: 100% !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
}

.login-card {
    width: 100% !important;
    min-height: calc(100vh - 146px) !important;
    min-height: calc(100dvh - 146px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.login-card-header,
.login-card-body {
    grid-column: 1 !important;
    width: min(100%, 520px) !important;
    justify-self: center !important;
    background: transparent !important;
}

.login-card-header {
    align-self: end !important;
    padding: clamp(1.25rem, 4vw, 3rem) 1.25rem 0.75rem !important;
}

.login-card-body {
    align-self: start !important;
    padding: 1rem 1.25rem clamp(1.25rem, 4vw, 3rem) !important;
}

.login-visual {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: end !important;
    border-left: 1px solid var(--bs-border-color) !important;
}

@media (max-width: 991.98px) {
    .login-card {
        grid-template-columns: 1fr !important;
        grid-template-rows: 220px auto auto !important;
    }

    .login-visual {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 220px !important;
        height: 220px !important;
        border-left: 0 !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
    }

    .login-card-header {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: min(100%, 520px) !important;
        justify-self: center !important;
        padding: 1.25rem 1rem 0.75rem !important;
    }

    .login-card-body {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: min(100%, 520px) !important;
        justify-self: center !important;
        padding: 0.75rem 1rem 1.5rem !important;
    }
}

/* End Emili 4.5 Login Desktop Half Split Final Fix */

/* ==========================================================================
   Emili 4.5 Login Page Match Reset Page Final Layout
   ========================================================================== */

/*
 * Login page should visually match /reset:
 * - same shell rhythm
 * - same split desktop layout
 * - same mobile image banner behavior
 * - no card/box chrome around the form
 */

body:has(.login-shell) {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.18), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.20), transparent 32rem),
        var(--bs-body-bg);
}

.login-shell {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
}

.login-header,
.login-footer {
    background: rgba(var(--bs-body-bg-rgb), 0.72) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.login-header {
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.login-footer {
    border-top: 1px solid var(--bs-border-color) !important;
}

.login-main {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.login-card {
    width: 100% !important;
    min-height: calc(100vh - 146px) !important;
    min-height: calc(100dvh - 146px) !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.82fr) minmax(420px, 1.18fr) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.login-card-header,
.login-card-body {
    grid-column: 1 !important;
    background: transparent !important;
    width: min(100%, 520px) !important;
    justify-self: center !important;
}

.login-card-header {
    align-self: end !important;
    padding: clamp(1.25rem, 4vw, 3rem) 1.25rem 0.75rem !important;
}

.login-card-body {
    align-self: start !important;
    padding: 1rem 1.25rem clamp(1.25rem, 4vw, 3rem) !important;
}

.login-card .form-control,
.login-card .input-group-text {
    border-radius: 0.9rem !important;
}

.login-card .input-group .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.login-card .input-group .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.login-btn {
    border-radius: 0.95rem !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

.login-visual {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: end !important;
    overflow: hidden !important;
    border-left: 1px solid var(--bs-border-color) !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.72)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80") center / cover no-repeat !important;
}

.login-visual-overlay {
    width: 100% !important;
    padding: 2rem !important;
    color: #fff !important;
}

.login-visual-badge {
    width: fit-content !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 0.45rem 0.85rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
}

@media (max-width: 991.98px) {
    .login-card {
        width: 100% !important;
        min-height: calc(100vh - 146px) !important;
        min-height: calc(100dvh - 146px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 220px auto auto !important;
    }

    .login-visual {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 220px !important;
        height: 220px !important;
        border-left: 0 !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
    }

    .login-visual-overlay {
        padding: 1.25rem !important;
    }

    .login-visual-overlay h3 {
        font-size: 1.35rem !important;
    }

    .login-card-header {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        width: min(100%, 520px) !important;
        justify-self: center !important;
        padding: 1.25rem 1rem 0.75rem !important;
    }

    .login-card-body {
        grid-column: 1 !important;
        grid-row: 3 !important;
        align-self: start !important;
        width: min(100%, 520px) !important;
        justify-self: center !important;
        padding: 0.75rem 1rem 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .login-shell .brand-subtitle {
        display: none !important;
    }
}

/* End Emili 4.5 Login Page Match Reset Page Final Layout */

/* ==========================================================================
   Emili 4.5 Login Page Scoped Reset-Match Layout
   ========================================================================== */

/*
 * Scope the auth login page hard so these rules do not affect console pages,
 * shared headers, management screens, chat, profile, history, files, etc.
 */

body.login-auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.18), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.20), transparent 32rem),
        var(--bs-body-bg);
}

body.login-auth-page .login-shell {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
}

body.login-auth-page .login-header,
body.login-auth-page .login-footer {
    background: rgba(var(--bs-body-bg-rgb), 0.72) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

body.login-auth-page .login-header {
    border-bottom: 1px solid var(--bs-border-color) !important;
}

body.login-auth-page .login-footer {
    border-top: 1px solid var(--bs-border-color) !important;
}

body.login-auth-page .login-main {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.login-auth-page .login-card {
    width: 100% !important;
    min-height: calc(100vh - 146px) !important;
    min-height: calc(100dvh - 146px) !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.82fr) minmax(420px, 1.18fr) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.login-auth-page .login-card-header,
body.login-auth-page .login-card-body {
    grid-column: 1 !important;
    background: transparent !important;
    width: min(100%, 520px) !important;
    justify-self: center !important;
}

body.login-auth-page .login-card-header {
    align-self: end !important;
    padding: clamp(1.25rem, 4vw, 3rem) 1.25rem 0.75rem !important;
}

body.login-auth-page .login-card-body {
    align-self: start !important;
    padding: 1rem 1.25rem clamp(1.25rem, 4vw, 3rem) !important;
}

body.login-auth-page .login-card .form-control,
body.login-auth-page .login-card .input-group-text {
    border-radius: 0.9rem !important;
}

body.login-auth-page .login-card .input-group .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.login-auth-page .login-card .input-group .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

body.login-auth-page .login-btn {
    border-radius: 0.95rem !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

body.login-auth-page .login-visual {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: end !important;
    overflow: hidden !important;
    border-left: 1px solid var(--bs-border-color) !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.72)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80") center / cover no-repeat !important;
}

body.login-auth-page .login-visual-overlay {
    width: 100% !important;
    padding: 2rem !important;
    color: #fff !important;
}

body.login-auth-page .login-visual-badge {
    width: fit-content !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 0.45rem 0.85rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
}

@media (max-width: 991.98px) {
    body.login-auth-page .login-card {
        width: 100% !important;
        min-height: calc(100vh - 146px) !important;
        min-height: calc(100dvh - 146px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 220px auto auto !important;
    }

    body.login-auth-page .login-visual {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 220px !important;
        height: 220px !important;
        border-left: 0 !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
    }

    body.login-auth-page .login-visual-overlay {
        padding: 1.25rem !important;
    }

    body.login-auth-page .login-visual-overlay h3 {
        font-size: 1.35rem !important;
    }

    body.login-auth-page .login-card-header {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        width: min(100%, 520px) !important;
        justify-self: center !important;
        padding: 1.25rem 1rem 0.75rem !important;
    }

    body.login-auth-page .login-card-body {
        grid-column: 1 !important;
        grid-row: 3 !important;
        align-self: start !important;
        width: min(100%, 520px) !important;
        justify-self: center !important;
        padding: 0.75rem 1rem 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    body.login-auth-page .brand-subtitle {
        display: none !important;
    }
}

/* End Emili 4.5 Login Page Scoped Reset-Match Layout */


/* ==========================================================================
   Emili 4.5 Console Header Safety Repair
   ========================================================================== */

/*
 * Reassert shared console header rules in case earlier auth/login CSS overrides
 * affected the top bar on management/profile/history/chat pages.
 */

.app-shell .app-topbar {
    border-bottom: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb), 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 30;
}

.app-shell .brand-mark-link {
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}

.app-shell .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #6f42c1);
    color: #fff;
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.28);
}

.app-shell .topbar-actions .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.app-shell .status-pill {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

@media (max-width: 767.98px) {
    .app-shell .app-topbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .app-shell .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .app-shell .brand-subtitle,
    .app-shell .status-pill {
        display: none !important;
    }

    .app-shell .topbar-actions {
        gap: 0.35rem !important;
    }

    .app-shell .topbar-actions .btn {
        width: 38px;
        height: 38px;
    }
}

/* End Emili 4.5 Console Header Safety Repair */

/* ==========================================================================
   Emili 4.5 Console / Management Layout Restore
   ========================================================================== */

/*
 * Restore the shared console shell without affecting the login/reset pages.
 */

body:not(.login-auth-page) .app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.10), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.10), transparent 32rem),
        var(--bs-body-bg);
}

body:not(.login-auth-page) .app-topbar {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb), 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1030;
}

body:not(.login-auth-page) .app-topbar > .d-flex {
    width: 100%;
    min-width: 0;
}

body:not(.login-auth-page) .brand-mark-link {
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}

body:not(.login-auth-page) .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #6f42c1);
    color: #fff;
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.28);
}

body:not(.login-auth-page) .topbar-actions {
    flex: 0 0 auto;
}

body:not(.login-auth-page) .topbar-actions .btn.rounded-circle {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

body:not(.login-auth-page) .status-pill {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

body:not(.login-auth-page) .dropdown-menu {
    border-radius: var(--emili-radius-lg);
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

body:not(.login-auth-page) .dropdown-item i {
    width: 1.25rem;
    text-align: center;
}

/*
 * Restore main page spacing and card-style page headers.
 */

body:not(.login-auth-page) .page-main {
    min-width: 0;
    padding: 1.25rem;
}

body:not(.login-auth-page) .page-content,
body:not(.login-auth-page) .users-page,
body:not(.login-auth-page) .entity-page,
body:not(.login-auth-page) .gui-page,
body:not(.login-auth-page) .server-page,
body:not(.login-auth-page) .profile-page,
body:not(.login-auth-page) .history-page,
body:not(.login-auth-page) .files-page,
body:not(.login-auth-page) .preferences-page,
body:not(.login-auth-page) .dashboard-page {
    width: 100%;
    display: grid;
    gap: 1.25rem;
}

body:not(.login-auth-page) .page-hero {
    width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    padding: 1.25rem;
    overflow: hidden;
}

/*
 * Restore common management cards/panels.
 */

body:not(.login-auth-page) .users-summary-card,
body:not(.login-auth-page) .users-toolbar-card,
body:not(.login-auth-page) .users-management-card,
body:not(.login-auth-page) .entity-summary-card,
body:not(.login-auth-page) .entity-panel,
body:not(.login-auth-page) .gui-summary-card,
body:not(.login-auth-page) .gui-panel,
body:not(.login-auth-page) .server-summary-card,
body:not(.login-auth-page) .server-panel,
body:not(.login-auth-page) .profile-card,
body:not(.login-auth-page) .history-card,
body:not(.login-auth-page) .files-card,
body:not(.login-auth-page) .preferences-card,
body:not(.login-auth-page) .dashboard-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/*
 * Restore summary-grid layouts.
 */

body:not(.login-auth-page) .users-summary-grid,
body:not(.login-auth-page) .entity-summary-grid,
body:not(.login-auth-page) .gui-summary-grid,
body:not(.login-auth-page) .server-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

body:not(.login-auth-page) .users-summary-card,
body:not(.login-auth-page) .entity-summary-card,
body:not(.login-auth-page) .gui-summary-card,
body:not(.login-auth-page) .server-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

body:not(.login-auth-page) .users-summary-label,
body:not(.login-auth-page) .entity-summary-label,
body:not(.login-auth-page) .gui-summary-label,
body:not(.login-auth-page) .server-summary-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body:not(.login-auth-page) .users-summary-value,
body:not(.login-auth-page) .entity-summary-value,
body:not(.login-auth-page) .gui-summary-value,
body:not(.login-auth-page) .server-summary-value {
    font-size: clamp(1.45rem, 2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

body:not(.login-auth-page) .users-summary-icon,
body:not(.login-auth-page) .entity-summary-icon,
body:not(.login-auth-page) .gui-summary-icon,
body:not(.login-auth-page) .server-summary-icon,
body:not(.login-auth-page) .resource-icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

/*
 * Restore panel internals.
 */

body:not(.login-auth-page) .entity-panel-header,
body:not(.login-auth-page) .gui-panel-header,
body:not(.login-auth-page) .server-panel-header,
body:not(.login-auth-page) .users-card-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.5rem;
}

body:not(.login-auth-page) .entity-panel-body,
body:not(.login-auth-page) .gui-panel-body,
body:not(.login-auth-page) .server-panel-body,
body:not(.login-auth-page) .users-card-body {
    min-width: 0;
    padding: 1rem;
}

body:not(.login-auth-page) .entity-layout,
body:not(.login-auth-page) .gui-layout,
body:not(.login-auth-page) .server-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

body:not(.login-auth-page) .entity-grid-2,
body:not(.login-auth-page) .gui-grid-2,
body:not(.login-auth-page) .server-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

body:not(.login-auth-page) .entity-settings-grid,
body:not(.login-auth-page) .gui-settings-grid,
body:not(.login-auth-page) .server-settings-grid {
    display: grid;
    gap: 1rem;
}

body:not(.login-auth-page) .entity-setting-label,
body:not(.login-auth-page) .gui-setting-label,
body:not(.login-auth-page) .server-setting-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
}

body:not(.login-auth-page) .entity-system-prompt {
    min-height: 320px;
    resize: vertical;
}

/*
 * Restore management/user tables.
 */

body:not(.login-auth-page) .users-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body:not(.login-auth-page) .users-table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    margin-bottom: 0;
}

body:not(.login-auth-page) .users-table th {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body:not(.login-auth-page) .user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

body:not(.login-auth-page) .user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-weight: 800;
    flex: 0 0 auto;
}

body:not(.login-auth-page) .user-row-selectable {
    cursor: pointer;
}

body:not(.login-auth-page) .user-row-selectable:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

/*
 * Responsive restoration.
 */

@media (max-width: 1199.98px) {
    body:not(.login-auth-page) .users-summary-grid,
    body:not(.login-auth-page) .entity-summary-grid,
    body:not(.login-auth-page) .gui-summary-grid,
    body:not(.login-auth-page) .server-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.login-auth-page) .entity-grid-2,
    body:not(.login-auth-page) .gui-grid-2,
    body:not(.login-auth-page) .server-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body:not(.login-auth-page) .page-main {
        padding: 1rem 0.75rem;
    }

    body:not(.login-auth-page) .app-topbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body:not(.login-auth-page) .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    body:not(.login-auth-page) .brand-subtitle,
    body:not(.login-auth-page) .status-pill {
        display: none !important;
    }

    body:not(.login-auth-page) .topbar-actions {
        gap: 0.35rem !important;
    }

    body:not(.login-auth-page) .topbar-actions .btn.rounded-circle {
        width: 38px;
        height: 38px;
    }

    body:not(.login-auth-page) .page-hero,
    body:not(.login-auth-page) .users-summary-card,
    body:not(.login-auth-page) .entity-summary-card,
    body:not(.login-auth-page) .gui-summary-card,
    body:not(.login-auth-page) .server-summary-card,
    body:not(.login-auth-page) .entity-panel,
    body:not(.login-auth-page) .gui-panel,
    body:not(.login-auth-page) .server-panel,
    body:not(.login-auth-page) .users-toolbar-card,
    body:not(.login-auth-page) .users-management-card {
        border-radius: 1rem;
    }
}

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .users-summary-grid,
    body:not(.login-auth-page) .entity-summary-grid,
    body:not(.login-auth-page) .gui-summary-grid,
    body:not(.login-auth-page) .server-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 Console / Management Layout Restore */

/* ==========================================================================
   Emili 4.5 User Pages Box/Card Restore
   ========================================================================== */

/*
 * Restore user-facing page layouts without touching management pages.
 * Applies to:
 * - /profile/
 * - /history/
 * - /files/
 * - /preferences/
 */

body:not(.login-auth-page) .profile-page,
body:not(.login-auth-page) .history-page,
body:not(.login-auth-page) .files-page,
body:not(.login-auth-page) .preferences-page {
    width: 100%;
    display: grid;
    gap: 1.25rem;
}

/* Summary grids */

body:not(.login-auth-page) .profile-summary-grid,
body:not(.login-auth-page) .history-summary-grid,
body:not(.login-auth-page) .files-summary-grid,
body:not(.login-auth-page) .preferences-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* Summary cards */

body:not(.login-auth-page) .profile-summary-card,
body:not(.login-auth-page) .history-summary-card,
body:not(.login-auth-page) .files-summary-card,
body:not(.login-auth-page) .preferences-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    padding: 1rem;
    overflow: hidden;
}

/* Summary text */

body:not(.login-auth-page) .profile-summary-label,
body:not(.login-auth-page) .history-summary-label,
body:not(.login-auth-page) .files-summary-label,
body:not(.login-auth-page) .preferences-summary-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body:not(.login-auth-page) .profile-summary-value,
body:not(.login-auth-page) .history-summary-value,
body:not(.login-auth-page) .files-summary-value,
body:not(.login-auth-page) .preferences-summary-value {
    font-size: clamp(1.45rem, 2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

/* Summary icons */

body:not(.login-auth-page) .profile-summary-icon,
body:not(.login-auth-page) .history-summary-icon,
body:not(.login-auth-page) .files-summary-icon,
body:not(.login-auth-page) .preferences-summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

/* Main layouts */

body:not(.login-auth-page) .profile-layout,
body:not(.login-auth-page) .history-layout,
body:not(.login-auth-page) .files-layout,
body:not(.login-auth-page) .preferences-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

/* Two-column user layouts, where present */

body:not(.login-auth-page) .profile-grid-2,
body:not(.login-auth-page) .history-grid-2,
body:not(.login-auth-page) .files-grid-2,
body:not(.login-auth-page) .preferences-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* User page panels/cards */

body:not(.login-auth-page) .profile-card,
body:not(.login-auth-page) .profile-panel,
body:not(.login-auth-page) .history-card,
body:not(.login-auth-page) .history-panel,
body:not(.login-auth-page) .files-card,
body:not(.login-auth-page) .files-panel,
body:not(.login-auth-page) .preferences-card,
body:not(.login-auth-page) .preferences-panel,
body:not(.login-auth-page) .preferences-control-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Panel headers */

body:not(.login-auth-page) .profile-panel-header,
body:not(.login-auth-page) .history-panel-header,
body:not(.login-auth-page) .files-panel-header,
body:not(.login-auth-page) .preferences-panel-header,
body:not(.login-auth-page) .profile-card-header,
body:not(.login-auth-page) .history-card-header,
body:not(.login-auth-page) .files-card-header,
body:not(.login-auth-page) .preferences-card-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.5rem;
}

/* Panel bodies */

body:not(.login-auth-page) .profile-panel-body,
body:not(.login-auth-page) .history-panel-body,
body:not(.login-auth-page) .files-panel-body,
body:not(.login-auth-page) .preferences-panel-body,
body:not(.login-auth-page) .profile-card-body,
body:not(.login-auth-page) .history-card-body,
body:not(.login-auth-page) .files-card-body,
body:not(.login-auth-page) .preferences-card-body {
    min-width: 0;
    padding: 1rem;
}

/* Preferences-specific controls */

body:not(.login-auth-page) .preferences-settings-grid {
    display: grid;
    gap: 1rem;
}

body:not(.login-auth-page) .preferences-setting-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
}

body:not(.login-auth-page) .preferences-control-stack {
    display: grid;
    gap: 1rem;
}

body:not(.login-auth-page) .preferences-control-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
}

body:not(.login-auth-page) .preferences-control-icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

body:not(.login-auth-page) .preferences-control-content {
    min-width: 0;
}

body:not(.login-auth-page) .preferences-switch {
    min-width: max-content;
}

/* Common upload/file/history/profile helpers */

body:not(.login-auth-page) .files-toolbar-card,
body:not(.login-auth-page) .files-browser-card,
body:not(.login-auth-page) .history-controls-card,
body:not(.login-auth-page) .history-overview-card,
body:not(.login-auth-page) .profile-overview-card,
body:not(.login-auth-page) .profile-details-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Responsive */

@media (max-width: 1199.98px) {
    body:not(.login-auth-page) .profile-summary-grid,
    body:not(.login-auth-page) .history-summary-grid,
    body:not(.login-auth-page) .files-summary-grid,
    body:not(.login-auth-page) .preferences-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.login-auth-page) .profile-grid-2,
    body:not(.login-auth-page) .history-grid-2,
    body:not(.login-auth-page) .files-grid-2,
    body:not(.login-auth-page) .preferences-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body:not(.login-auth-page) .profile-summary-card,
    body:not(.login-auth-page) .history-summary-card,
    body:not(.login-auth-page) .files-summary-card,
    body:not(.login-auth-page) .preferences-summary-card,
    body:not(.login-auth-page) .profile-card,
    body:not(.login-auth-page) .profile-panel,
    body:not(.login-auth-page) .history-card,
    body:not(.login-auth-page) .history-panel,
    body:not(.login-auth-page) .files-card,
    body:not(.login-auth-page) .files-panel,
    body:not(.login-auth-page) .preferences-card,
    body:not(.login-auth-page) .preferences-panel,
    body:not(.login-auth-page) .preferences-control-card {
        border-radius: 1rem;
    }

    body:not(.login-auth-page) .preferences-control-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .profile-summary-grid,
    body:not(.login-auth-page) .history-summary-grid,
    body:not(.login-auth-page) .files-summary-grid,
    body:not(.login-auth-page) .preferences-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 User Pages Box/Card Restore */

/* ==========================================================================
   Emili 4.5 Profile Page CSS Restore
   ========================================================================== */

body:not(.login-auth-page) .profile-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

body:not(.login-auth-page) .profile-card,
body:not(.login-auth-page) .profile-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

body:not(.login-auth-page) .profile-card-body {
    padding: 1.25rem;
}

body:not(.login-auth-page) .profile-avatar-wrap {
    width: fit-content;
    margin: 0 auto 1rem;
    position: relative;
}

body:not(.login-auth-page) .profile-avatar {
    width: 112px;
    height: 112px;
    border-radius: 2rem;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #6f42c1);
    color: #fff;
    font-size: 2.35rem;
    font-weight: 800;
    box-shadow: 0 18px 44px rgba(13, 110, 253, 0.25);
}

body:not(.login-auth-page) .avatar-edit-btn {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

body:not(.login-auth-page) .profile-status {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-weight: 700;
    font-size: 0.85rem;
}

body:not(.login-auth-page) .profile-actions {
    display: grid;
    gap: 0.65rem;
}

body:not(.login-auth-page) .profile-actions .btn {
    justify-content: center;
}

body:not(.login-auth-page) .profile-content {
    min-width: 0;
}

body:not(.login-auth-page) .profile-section-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.5rem;
}

body:not(.login-auth-page) .profile-section-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

body:not(.login-auth-page) .profile-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.9rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    flex: 0 0 auto;
}

body:not(.login-auth-page) .profile-panel-body {
    min-width: 0;
    padding: 1rem;
}

body:not(.login-auth-page) .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

body:not(.login-auth-page) .profile-card .detail-grid {
    grid-template-columns: 1fr;
}

body:not(.login-auth-page) .detail-item {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

body:not(.login-auth-page) .detail-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

body:not(.login-auth-page) .detail-label i {
    color: var(--bs-primary);
}

body:not(.login-auth-page) .detail-value {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

body:not(.login-auth-page) .permission-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

body:not(.login-auth-page) .permission-card {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 1rem;
    text-align: center;
}

body:not(.login-auth-page) .permission-card > i {
    color: var(--bs-primary);
    font-size: 1.35rem;
}

body:not(.login-auth-page) .activity-list {
    display: grid;
    gap: 0.75rem;
}

body:not(.login-auth-page) .activity-item {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

body:not(.login-auth-page) .activity-icon {
    width: 42px;
    height: 42px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    flex: 0 0 auto;
}

body:not(.login-auth-page) .activity-time {
    text-align: right;
}

@media (max-width: 1199.98px) {
    body:not(.login-auth-page) .profile-layout {
        grid-template-columns: 1fr;
    }

    body:not(.login-auth-page) .permission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body:not(.login-auth-page) .profile-card,
    body:not(.login-auth-page) .profile-panel,
    body:not(.login-auth-page) .detail-item,
    body:not(.login-auth-page) .permission-card,
    body:not(.login-auth-page) .activity-item {
        border-radius: 1rem;
    }

    body:not(.login-auth-page) .detail-grid {
        grid-template-columns: 1fr;
    }

    body:not(.login-auth-page) .activity-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body:not(.login-auth-page) .activity-time {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .permission-grid {
        grid-template-columns: 1fr;
    }

    body:not(.login-auth-page) .profile-section-header {
        flex-direction: column;
    }
}

/* End Emili 4.5 Profile Page CSS Restore */

/* ==========================================================================
   Emili 4.5 Global Scrollbar Restore
   ========================================================================== */

/*
 * Restore page scrolling when content exceeds the viewport.
 * Keep horizontal overflow controlled so mobile/desktop layouts do not sideways-scroll.
 */

html,
body {
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

.app-shell,
.login-shell,
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible !important;
}

.page-main,
.login-main,
.auth-main {
    overflow: visible !important;
}

.page-content,
.users-page,
.entity-page,
.gui-page,
server-page,
.profile-page,
.history-page,
.files-page,
.preferences-page,
.dashboard-page {
    overflow: visible !important;
}

/*
 * Preserve internal scrolling only where specifically useful.
 */

.users-table-wrap,
.gpu-table-wrap,
.modal-body {
    overflow-x: auto;
}

/* End Emili 4.5 Global Scrollbar Restore */

/* ==========================================================================
   Emili 4.5 User Management Toolbar Inline Fix
   ========================================================================== */

/*
 * Keep search + filters in one clean horizontal row on desktop.
 * Mobile/tablet stacks cleanly.
 */

body:not(.login-auth-page) .users-toolbar-card {
    padding: 1rem;
}

body:not(.login-auth-page) .users-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    gap: 1rem;
    align-items: center;
    width: 100%;
}

body:not(.login-auth-page) .users-search {
    min-width: 0;
    width: 100%;
}

body:not(.login-auth-page) .users-search .input-group {
    width: 100%;
}

body:not(.login-auth-page) .users-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 190px));
    gap: 0.75rem;
    align-items: center;
    justify-content: end;
    min-width: 0;
}

body:not(.login-auth-page) .users-filters .form-select {
    width: 100%;
}

/*
 * Medium screens: search stays full width, filters stay side-by-side below.
 */

@media (max-width: 991.98px) {
    body:not(.login-auth-page) .users-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    body:not(.login-auth-page) .users-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }
}

/*
 * Small screens: stack everything.
 */

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .users-filters {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 User Management Toolbar Inline Fix */

/* ==========================================================================
   Emili 4.5 User Detail View CSS Restore
   ========================================================================== */

body:not(.login-auth-page) .user-view-page {
    width: 100%;
    display: grid;
    gap: 1.25rem;
}

body:not(.login-auth-page) .user-view-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

body:not(.login-auth-page) .user-view-profile-card,
body:not(.login-auth-page) .user-view-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

body:not(.login-auth-page) .user-view-profile-body {
    padding: 1.25rem;
}

body:not(.login-auth-page) .user-view-avatar-wrap {
    width: fit-content;
    margin: 0 auto 1rem;
    position: relative;
}

body:not(.login-auth-page) .user-view-avatar {
    width: 112px;
    height: 112px;
    border-radius: 2rem;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #6f42c1);
    color: #fff;
    font-size: 2.35rem;
    font-weight: 800;
    box-shadow: 0 18px 44px rgba(13, 110, 253, 0.25);
}

body:not(.login-auth-page) .user-view-avatar-btn {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

body:not(.login-auth-page) .user-view-action-stack {
    display: grid;
    gap: 0.65rem;
}

body:not(.login-auth-page) .user-view-action-stack .btn {
    justify-content: center;
}

body:not(.login-auth-page) .user-view-mini-stats {
    border-top: 1px solid var(--bs-border-color);
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

body:not(.login-auth-page) .user-view-mini-stat {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

body:not(.login-auth-page) .user-view-mini-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

body:not(.login-auth-page) .user-view-mini-value {
    font-weight: 700;
    overflow-wrap: anywhere;
}

body:not(.login-auth-page) .user-view-content {
    min-width: 0;
    display: grid;
    gap: 1.25rem;
}

body:not(.login-auth-page) .user-view-panel-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.5rem;
}

body:not(.login-auth-page) .user-view-panel-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

body:not(.login-auth-page) .user-view-panel-icon,
body:not(.login-auth-page) .user-view-security-icon,
body:not(.login-auth-page) .user-view-timeline-icon {
    width: 42px;
    height: 42px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    flex: 0 0 auto;
    font-size: 1.15rem;
}

body:not(.login-auth-page) .user-view-panel-body {
    min-width: 0;
    padding: 1rem;
}

body:not(.login-auth-page) .user-view-detail-grid,
body:not(.login-auth-page) .user-view-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

body:not(.login-auth-page) .user-view-detail-item,
body:not(.login-auth-page) .user-view-security-card,
body:not(.login-auth-page) .user-view-permission-item,
body:not(.login-auth-page) .user-view-timeline-item {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

body:not(.login-auth-page) .user-view-detail-label,
body:not(.login-auth-page) .user-view-security-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

body:not(.login-auth-page) .user-view-detail-label i {
    color: var(--bs-primary);
}

body:not(.login-auth-page) .user-view-detail-value,
body:not(.login-auth-page) .user-view-security-value {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

body:not(.login-auth-page) .user-view-security-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
}

body:not(.login-auth-page) .user-view-permissions,
body:not(.login-auth-page) .user-view-timeline {
    display: grid;
    gap: 0.75rem;
}

body:not(.login-auth-page) .user-view-permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

body:not(.login-auth-page) .user-view-timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
}

@media (max-width: 1199.98px) {
    body:not(.login-auth-page) .user-view-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body:not(.login-auth-page) .user-view-profile-card,
    body:not(.login-auth-page) .user-view-panel,
    body:not(.login-auth-page) .user-view-detail-item,
    body:not(.login-auth-page) .user-view-security-card,
    body:not(.login-auth-page) .user-view-permission-item,
    body:not(.login-auth-page) .user-view-timeline-item {
        border-radius: 1rem;
    }

    body:not(.login-auth-page) .user-view-detail-grid,
    body:not(.login-auth-page) .user-view-security-grid {
        grid-template-columns: 1fr;
    }

    body:not(.login-auth-page) .user-view-permission-item {
        align-items: flex-start;
        flex-direction: column;
    }

    body:not(.login-auth-page) .user-view-timeline-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body:not(.login-auth-page) .user-view-timeline-item > .text-nowrap {
        grid-column: 2;
        white-space: normal !important;
    }
}

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .user-view-panel-header {
        flex-direction: column;
    }
}

/* End Emili 4.5 User Detail View CSS Restore */

/* ==========================================================================
   Emili 4.5 User View Header Actions Adjustment
   ========================================================================== */

body:not(.login-auth-page) .user-view-hero-actions {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    width: auto;
}

@media (max-width: 1199.98px) {
    body:not(.login-auth-page) .user-view-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* End Emili 4.5 User View Header Actions Adjustment */

/* ==========================================================================
   Emili 4.5 User View Editable Account Details
   ========================================================================== */

body:not(.login-auth-page) .user-view-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

body:not(.login-auth-page) .user-view-edit-field {
    margin-top: 0.45rem;
}

body:not(.login-auth-page) .user-view-account-header {
    align-items: center;
}

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .user-view-panel-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* End Emili 4.5 User View Editable Account Details */

/* ==========================================================================
   Emili 4.5 User View Sidebar Refinement
   ========================================================================== */

body:not(.login-auth-page) .user-view-id-value {
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body:not(.login-auth-page) .user-view-id-stat .badge {
    max-width: 100%;
}

body:not(.login-auth-page) .user-view-profile-body > .text-secondary {
    margin-bottom: 1rem !important;
}

body:not(.login-auth-page) .user-view-avatar-wrap {
    margin-top: 0.35rem;
}

/* End Emili 4.5 User View Sidebar Refinement */

/* ==========================================================================
   Emili 4.5 User View Security Settings Editor
   ========================================================================== */

body:not(.login-auth-page) .user-view-security-header {
    align-items: center;
}

body:not(.login-auth-page) .user-view-security-card-wide {
    grid-column: 1 / -1;
}

body:not(.login-auth-page) .user-view-security-edit {
    margin-top: 0.45rem;
}

body:not(.login-auth-page) .user-view-security-card .form-switch {
    padding-left: 2.65rem;
}

@media (max-width: 767.98px) {
    body:not(.login-auth-page) .user-view-security-card-wide {
        grid-column: auto;
    }
}

/* End Emili 4.5 User View Security Settings Editor */

/* ==========================================================================
   Emili 4.5 User Avatar Upload Modal
   ========================================================================== */

body:not(.login-auth-page) .user-view-avatar {
    border: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

body:not(.login-auth-page) .user-view-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body:not(.login-auth-page) .user-view-avatar span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.avatar-upload-modal .modal-content {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.avatar-upload-shell {
    width: 100%;
    min-height: calc(100dvh - 11rem);
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
    gap: 1.25rem;
    align-items: stretch;
}

.avatar-upload-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    min-width: 0;
}

.avatar-upload-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.avatar-upload-panel-body {
    padding: 1.25rem;
}

.avatar-crop-stage {
    width: 100%;
    min-height: 58vh;
    display: grid;
    place-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 1.25rem;
    background:
        linear-gradient(45deg, rgba(var(--bs-body-bg-rgb), 0.42) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(var(--bs-body-bg-rgb), 0.42) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(var(--bs-body-bg-rgb), 0.42) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(var(--bs-body-bg-rgb), 0.42) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    overflow: hidden;
}

.avatar-crop-square {
    width: min(70vmin, 520px);
    aspect-ratio: 1 / 1;
    border: 3px dashed rgba(var(--bs-primary-rgb), 0.85);
    border-radius: 1.25rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.72);
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.28),
        0 18px 56px rgba(0, 0, 0, 0.22);
}

.avatar-crop-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-preview-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #6f42c1);
    color: #fff;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
}

@media (max-width: 991.98px) {
    .avatar-upload-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .avatar-crop-stage {
        min-height: 52vh;
    }

    .avatar-crop-square {
        width: min(82vmin, 520px);
    }
}

@media (max-width: 575.98px) {
    .avatar-upload-panel,
    .avatar-crop-stage,
    .avatar-crop-square {
        border-radius: 1rem;
    }

    .avatar-upload-panel-header,
    .avatar-upload-panel-body {
        padding: 1rem;
    }

    .avatar-crop-stage {
        min-height: 46vh;
    }
}

/* End Emili 4.5 User Avatar Upload Modal */

/* ==========================================================================
   Emili 4.5 Avatar Modal Trigger Fix
   ========================================================================== */

body:not(.login-auth-page) .user-view-avatar-trigger {
    appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

body:not(.login-auth-page) .user-view-avatar-trigger:hover,
body:not(.login-auth-page) .user-view-avatar-btn:hover {
    filter: brightness(1.08);
}

.avatar-upload-modal {
    z-index: 1080;
}

.avatar-upload-modal .modal-dialog {
    max-width: 100%;
}

.avatar-upload-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
}

/* End Emili 4.5 Avatar Modal Trigger Fix */

/* ==========================================================================
   Emili 4.5 Avatar Modal Trigger Fix
   ========================================================================== */

body:not(.login-auth-page) .user-view-avatar-trigger {
    appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

body:not(.login-auth-page) .user-view-avatar-trigger:hover,
body:not(.login-auth-page) .user-view-avatar-btn:hover {
    filter: brightness(1.08);
}

.avatar-upload-modal {
    z-index: 1080;
}

.avatar-upload-modal .modal-dialog {
    max-width: 100%;
}

.avatar-upload-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
}

/* End Emili 4.5 Avatar Modal Trigger Fix */

/* ==========================================================================
   Emili 4.5 Avatar Interactive Cropper
   ========================================================================== */

.avatar-crop-stage {
    position: relative;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

.avatar-crop-stage:active {
    cursor: grabbing;
}

.avatar-crop-stage > #avatarPreviewImage {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    max-height: none;
    object-fit: fill;
    transform-origin: top left;
    z-index: 1;
    pointer-events: none;
}

.avatar-crop-stage > .avatar-preview-fallback {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(70vmin, 520px);
    aspect-ratio: 1 / 1;
    border-radius: 1.25rem;
    z-index: 1;
}

.avatar-crop-stage > .avatar-crop-square {
    position: absolute;
    width: min(70vmin, 520px);
    aspect-ratio: 1 / 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px dashed rgba(var(--bs-primary-rgb), 0.95);
    border-radius: 1.25rem;
    background: transparent;
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.28),
        0 18px 56px rgba(0, 0, 0, 0.22);
    z-index: 2;
    pointer-events: none;
}

.avatar-crop-controls {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
}

.avatar-zoom-range {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .avatar-crop-controls {
        grid-template-columns: 1fr 1fr;
    }

    .avatar-zoom-range {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

@media (max-width: 575.98px) {
    .avatar-crop-stage > .avatar-crop-square,
    .avatar-crop-stage > .avatar-preview-fallback {
        width: min(82vmin, 520px);
    }
}

/* End Emili 4.5 Avatar Interactive Cropper */

/* ==========================================================================
   Emili 4.5 Avatar Cropper Source Button / Preview Refinement
   ========================================================================== */

.avatar-source-actions {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1rem;
}

.avatar-upload-modal .modal-body {
    overflow: hidden;
}

.avatar-upload-shell {
    height: calc(100dvh - 10.5rem);
    min-height: 0;
}

.avatar-upload-panel {
    min-height: 0;
}

.avatar-upload-panel-body {
    min-height: 0;
}

.avatar-crop-stage {
    min-height: 0 !important;
    height: min(62vh, 620px);
}

@media (max-width: 991.98px) {
    .avatar-upload-modal .modal-body {
        overflow-y: auto;
    }

    .avatar-upload-shell {
        height: auto;
    }

    .avatar-crop-stage {
        height: min(54vh, 520px);
    }
}

@media (max-width: 575.98px) {
    .avatar-crop-stage {
        height: min(48vh, 460px);
    }
}

/* End Emili 4.5 Avatar Cropper Source Button / Preview Refinement */

/* ==========================================================================
   Emili 4.5 Users List Avatar Image Restore
   ========================================================================== */

body:not(.login-auth-page) .users-table .user-avatar {
    overflow: hidden;
}

body:not(.login-auth-page) .users-table .user-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body:not(.login-auth-page) .users-table .user-avatar span {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

/* End Emili 4.5 Users List Avatar Image Restore */

/* ==========================================================================
   Emili 4.5 Users Table Email Column Refinement
   ========================================================================== */

body:not(.login-auth-page) .users-table th,
body:not(.login-auth-page) .users-table td {
    vertical-align: middle;
}

body:not(.login-auth-page) .users-table .user-cell {
    min-height: 44px;
}

body:not(.login-auth-page) .users-table .user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 0.85rem;
}

body:not(.login-auth-page) .user-email-cell {
    max-width: 260px;
    color: var(--bs-secondary-color);
    font-size: 0.92rem;
}

@media (max-width: 767.98px) {
    body:not(.login-auth-page) .user-email-cell {
        max-width: 100%;
    }
}

/* End Emili 4.5 Users Table Email Column Refinement */

/* ==========================================================================
   Emili 4.5 Add User Fullscreen Modal
   ========================================================================== */

.add-user-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.add-user-shell {
    width: 100%;
    min-height: calc(100dvh - 11rem);
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.add-user-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.add-user-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.add-user-panel-body {
    padding: 1.25rem;
}

.add-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.add-user-switch-grid {
    display: grid;
    gap: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1rem;
}

@media (max-width: 991.98px) {
    .add-user-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .add-user-panel {
        border-radius: 1rem;
    }

    .add-user-panel-header,
    .add-user-panel-body {
        padding: 1rem;
    }

    .add-user-grid {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 Add User Fullscreen Modal */

/* ==========================================================================
   Emili 4.5 Add User Modal Compact Height Fix
   ========================================================================== */

.add-user-modal .modal-header {
    padding: 0.85rem 1rem;
}

.add-user-modal .modal-body {
    padding: 0.85rem 1rem !important;
    overflow: hidden;
}

.add-user-modal .modal-footer {
    padding: 0.75rem 1rem;
}

.add-user-shell {
    min-height: 0 !important;
    height: calc(100dvh - 8.75rem) !important;
    gap: 0.85rem !important;
}

.add-user-panel {
    min-height: 0;
}

.add-user-panel-header {
    padding: 0.85rem 1rem 0.35rem !important;
}

.add-user-panel-header .h5,
.add-user-panel-header h3 {
    font-size: 1rem;
}

.add-user-panel-body {
    padding: 0.85rem 1rem !important;
}

.add-user-grid {
    gap: 0.7rem !important;
}

.add-user-modal .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
}

.add-user-modal .form-control,
.add-user-modal .form-select {
    min-height: 38px;
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
}

.add-user-switch-grid {
    gap: 0.45rem !important;
    padding-top: 0.75rem !important;
    margin-top: 0.75rem !important;
}

.add-user-modal .modal-footer .btn {
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
}

@media (max-width: 991.98px) {
    .add-user-modal .modal-body {
        overflow-y: auto;
    }

    .add-user-shell {
        height: auto !important;
    }
}

@media (max-width: 575.98px) {
    .add-user-modal .modal-header,
    .add-user-modal .modal-footer {
        padding: 0.7rem 0.85rem;
    }

    .add-user-modal .modal-body {
        padding: 0.75rem 0.85rem !important;
    }

    .add-user-panel-header,
    .add-user-panel-body {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }
}

/* End Emili 4.5 Add User Modal Compact Height Fix */

/* ==========================================================================
   Emili 4.5 Add User Modal Save Button In-Panel Fix
   ========================================================================== */

.add-user-modal .modal-body {
    overflow: hidden !important;
}

.add-user-modal .modal-footer {
    display: none !important;
}

.add-user-shell {
    height: calc(100dvh - 5.75rem) !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

.add-user-panel {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
}

.add-user-panel-body {
    flex: 1 1 auto;
    min-height: 0;
}

.add-user-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.add-user-actions .btn {
    min-width: 132px;
}

@media (max-width: 991.98px) {
    .add-user-modal .modal-body {
        overflow-y: auto !important;
    }

    .add-user-shell {
        height: auto !important;
    }
}

@media (max-width: 575.98px) {
    .add-user-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .add-user-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* End Emili 4.5 Add User Modal Save Button In-Panel Fix */

/* ==========================================================================
   Emili 4.5 Add User Modal Card Shrink Fix
   ========================================================================== */

/*
 * Do not hide overflow globally. Instead reduce the vertical footprint of the
 * Add User modal panels so the initial fullscreen view fits without pushing
 * the Create User button below the fold.
 */

.add-user-modal .modal-content {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.add-user-modal .modal-header {
    min-height: 0;
    padding: 0.6rem 0.85rem !important;
}

.add-user-modal .modal-header .h5,
.add-user-modal .modal-header h2 {
    font-size: 1rem;
    margin-bottom: 0.1rem !important;
}

.add-user-modal .modal-header .small {
    font-size: 0.76rem;
    line-height: 1.2;
}

.add-user-modal .modal-body {
    padding: 0.65rem 0.85rem !important;
    overflow: visible !important;
}

.add-user-shell {
    height: calc(100dvh - 5.1rem) !important;
    min-height: 0 !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
}

.add-user-panel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.add-user-panel-header {
    padding: 0.55rem 0.75rem 0.25rem !important;
    flex: 0 0 auto;
}

.add-user-panel-header .h5,
.add-user-panel-header h3 {
    font-size: 0.95rem !important;
    margin-bottom: 0.1rem !important;
}

.add-user-panel-header .small {
    font-size: 0.72rem;
    line-height: 1.2;
}

.add-user-panel-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0.55rem 0.75rem !important;
    display: flex;
    flex-direction: column;
}

.add-user-grid {
    gap: 0.48rem 0.65rem !important;
}

.add-user-modal .form-label {
    margin-bottom: 0.15rem !important;
    font-size: 0.75rem !important;
    font-weight: 700;
}

.add-user-modal .form-control,
.add-user-modal .form-select {
    min-height: 32px !important;
    height: 32px !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.86rem !important;
}

.add-user-switch-grid {
    gap: 0.25rem !important;
    padding-top: 0.5rem !important;
    margin-top: 0.55rem !important;
    flex: 0 0 auto;
}

.add-user-switch-grid .form-check {
    min-height: 1.35rem;
}

.add-user-switch-grid .form-check-label {
    font-size: 0.84rem;
}

.add-user-actions {
    margin-top: auto !important;
    padding-top: 0.55rem !important;
    gap: 0.5rem !important;
    flex: 0 0 auto;
}

.add-user-actions .btn {
    min-width: 116px !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 0.88rem !important;
}

/*
 * On shorter desktop/laptop screens, make the two panels scroll internally
 * only if absolutely necessary, rather than pushing the whole modal.
 */
@media (max-height: 760px) and (min-width: 992px) {
    .add-user-panel-body {
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .add-user-panel-body::-webkit-scrollbar {
        width: 8px;
    }
}

/*
 * Mobile can scroll vertically because the modal naturally stacks into one
 * column there.
 */
@media (max-width: 991.98px) {
    .add-user-modal .modal-content {
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow: visible;
    }

    .add-user-modal .modal-body {
        overflow-y: visible !important;
    }

    .add-user-shell {
        height: auto !important;
    }

    .add-user-panel-body {
        display: block;
    }

    .add-user-actions {
        margin-top: 1rem !important;
    }
}

/* End Emili 4.5 Add User Modal Card Shrink Fix */

/* ==========================================================================
   Emili 4.5 Reset Password Fullscreen Modal
   ========================================================================== */

.reset-password-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.reset-password-shell {
    width: 100%;
    min-height: calc(100dvh - 7rem);
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.8fr);
    gap: 1.25rem;
    align-items: stretch;
}

.reset-password-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.reset-password-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.reset-password-panel-body {
    padding: 1.25rem;
}

.reset-password-grid {
    display: grid;
    gap: 1rem;
}

.reset-password-user-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.reset-password-user-icon {
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-size: 1.5rem;
}

.reset-password-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    .reset-password-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .reset-password-panel {
        border-radius: 1rem;
    }

    .reset-password-panel-header,
    .reset-password-panel-body {
        padding: 1rem;
    }

    .reset-password-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .reset-password-actions .btn {
        width: 100%;
    }
}

/* End Emili 4.5 Reset Password Fullscreen Modal */

/* ==========================================================================
   Emili 4.5 Users List Created Column / Responsive Table Fix
   ========================================================================== */

body:not(.login-auth-page) .users-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: visible !important;
}

body:not(.login-auth-page) .users-table {
    width: 100%;
    table-layout: fixed;
}

body:not(.login-auth-page) .users-table th:nth-child(1),
body:not(.login-auth-page) .users-table td:nth-child(1) {
    width: 26%;
}

body:not(.login-auth-page) .users-table th:nth-child(2),
body:not(.login-auth-page) .users-table td:nth-child(2) {
    width: 25%;
}

body:not(.login-auth-page) .users-table th:nth-child(3),
body:not(.login-auth-page) .users-table td:nth-child(3) {
    width: 15%;
}

body:not(.login-auth-page) .users-table th:nth-child(4),
body:not(.login-auth-page) .users-table td:nth-child(4),
body:not(.login-auth-page) .users-table th:nth-child(5),
body:not(.login-auth-page) .users-table td:nth-child(5) {
    width: 9%;
}

body:not(.login-auth-page) .users-table th:nth-child(6),
body:not(.login-auth-page) .users-table td:nth-child(6) {
    width: 16%;
}

body:not(.login-auth-page) .users-table td,
body:not(.login-auth-page) .users-table th {
    white-space: normal;
    overflow-wrap: anywhere;
}

body:not(.login-auth-page) .user-created-cell {
    font-size: 0.9rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
    body:not(.login-auth-page) .users-table {
        table-layout: auto;
    }

    body:not(.login-auth-page) .users-table,
    body:not(.login-auth-page) .users-table thead,
    body:not(.login-auth-page) .users-table tbody,
    body:not(.login-auth-page) .users-table tr,
    body:not(.login-auth-page) .users-table th,
    body:not(.login-auth-page) .users-table td {
        display: block;
        width: 100% !important;
    }

    body:not(.login-auth-page) .users-table thead {
        display: none;
    }

    body:not(.login-auth-page) .users-table tbody {
        display: grid;
        gap: 0.85rem;
    }

    body:not(.login-auth-page) .users-table tbody tr {
        border: 1px solid var(--bs-border-color);
        border-radius: 1rem;
        background: rgba(var(--bs-body-bg-rgb), 0.36);
        overflow: hidden;
    }

    body:not(.login-auth-page) .users-table tbody td {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 0.75rem;
        align-items: center;
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    body:not(.login-auth-page) .users-table tbody td:last-child {
        border-bottom: 0;
    }

    body:not(.login-auth-page) .users-table tbody td::before {
        content: attr(data-label);
        color: var(--bs-secondary-color);
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    body:not(.login-auth-page) .users-table tbody td[data-label="User"] {
        grid-template-columns: 1fr;
    }

    body:not(.login-auth-page) .users-table tbody td[data-label="User"]::before {
        display: none;
    }

    body:not(.login-auth-page) .user-email-cell {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    body:not(.login-auth-page) .users-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* End Emili 4.5 Users List Created Column / Responsive Table Fix */

/* ==========================================================================
   Emili 4.5 Users Smart Search Refinement
   ========================================================================== */

body:not(.login-auth-page) .users-search-hint {
    padding-left: 0.25rem;
    line-height: 1.25;
}

@media (max-width: 991.98px) {
    body:not(.login-auth-page) .users-search-hint {
        margin-bottom: 0.25rem;
    }
}

/* End Emili 4.5 Users Smart Search Refinement */

/* ==========================================================================
   Emili 4.5 Users Pagination / Search Focus Fix
   ========================================================================== */

body:not(.login-auth-page) .users-pagination {
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: flex-end;
}

body:not(.login-auth-page) .users-pagination .pagination {
    flex-wrap: wrap;
    gap: 0.35rem;
}

body:not(.login-auth-page) .users-pagination .page-link {
    border-radius: 0.75rem;
}

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .users-pagination {
        justify-content: center;
    }
}

/* End Emili 4.5 Users Pagination / Search Focus Fix */

/* ==========================================================================
   Emili 4.5 Server Management CSS Restore
   ========================================================================== */

body:not(.login-auth-page) .server-page {
    width: 100%;
    display: grid;
    gap: 1.25rem;
}

body:not(.login-auth-page) .server-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

body:not(.login-auth-page) .server-summary-card,
body:not(.login-auth-page) .server-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

body:not(.login-auth-page) .server-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

body:not(.login-auth-page) .server-summary-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body:not(.login-auth-page) .server-summary-value {
    font-size: clamp(1.35rem, 2vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

body:not(.login-auth-page) .server-summary-icon,
body:not(.login-auth-page) .server-action-icon,
body:not(.login-auth-page) .server-ops-icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

body:not(.login-auth-page) .server-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

body:not(.login-auth-page) .server-panel-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.5rem;
}

body:not(.login-auth-page) .server-panel-body {
    min-width: 0;
    padding: 1rem;
}

body:not(.login-auth-page) .server-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body:not(.login-auth-page) .server-action-card {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

body:not(.login-auth-page) .server-action-content {
    min-width: 0;
}

body:not(.login-auth-page) .server-status-list,
body:not(.login-auth-page) .server-ops-list {
    display: grid;
    gap: 0.75rem;
}

body:not(.login-auth-page) .server-status-row,
body:not(.login-auth-page) .server-ops-item {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

body:not(.login-auth-page) .server-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

body:not(.login-auth-page) .server-status-row span {
    color: var(--bs-secondary-color);
}

body:not(.login-auth-page) .server-status-row strong {
    text-align: right;
}

body:not(.login-auth-page) .server-ops-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
}

@media (max-width: 1199.98px) {
    body:not(.login-auth-page) .server-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.login-auth-page) .server-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body:not(.login-auth-page) .server-summary-card,
    body:not(.login-auth-page) .server-panel,
    body:not(.login-auth-page) .server-action-card,
    body:not(.login-auth-page) .server-status-row,
    body:not(.login-auth-page) .server-ops-item {
        border-radius: 1rem;
    }

    body:not(.login-auth-page) .server-action-grid {
        grid-template-columns: 1fr;
    }

    body:not(.login-auth-page) .server-status-row {
        align-items: flex-start;
        flex-direction: column;
    }

    body:not(.login-auth-page) .server-status-row strong {
        text-align: left;
    }

    body:not(.login-auth-page) .server-ops-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body:not(.login-auth-page) .server-ops-item > .badge {
        grid-column: 2;
        width: fit-content;
    }
}

@media (max-width: 575.98px) {
    body:not(.login-auth-page) .server-summary-grid {
        grid-template-columns: 1fr;
    }

    body:not(.login-auth-page) .server-panel-header {
        flex-direction: column;
    }

    body:not(.login-auth-page) .server-action-card {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 Server Management CSS Restore */

/* ==========================================================================
   Emili 4.5 Server Health Check Modal
   ========================================================================== */

.health-check-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.health-check-shell {
    width: 100%;
    min-height: calc(100dvh - 7.5rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.health-check-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.health-check-panel-wide {
    grid-column: 1 / -1;
}

.health-check-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.health-check-panel-body {
    padding: 1.25rem;
}

.health-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.health-metric-card,
.health-progress-card,
.health-status-row {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

.health-metric-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.health-metric-value {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.health-small-value {
    font-size: 0.82rem;
    line-height: 1.35;
}

.health-status-list {
    display: grid;
    gap: 0.75rem;
}

.health-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.health-status-row span {
    color: var(--bs-secondary-color);
}

.health-status-row strong {
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .health-check-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .health-check-panel-wide {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .health-check-panel,
    .health-metric-card,
    .health-progress-card,
    .health-status-row {
        border-radius: 1rem;
    }

    .health-check-panel-header,
    .health-check-panel-body {
        padding: 1rem;
    }

    .health-metric-grid {
        grid-template-columns: 1fr;
    }

    .health-status-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .health-status-row strong {
        text-align: left;
    }
}

/* End Emili 4.5 Server Health Check Modal */

/* ==========================================================================
   Emili 4.5 Health Check Modal Trigger Safety
   ========================================================================== */

.health-check-modal {
    z-index: 1080;
}

.health-check-modal .modal-dialog {
    max-width: 100%;
}

.health-check-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
}

/* End Emili 4.5 Health Check Modal Trigger Safety */

/* ==========================================================================
   Emili 4.5 Health Modal Hard Trigger Fix
   ========================================================================== */

.health-check-modal {
    z-index: 1080;
}

.health-check-modal .modal-dialog {
    max-width: 100%;
}

.health-check-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
}

/* End Emili 4.5 Health Modal Hard Trigger Fix */

/* ==========================================================================
   Emili 4.5 Instance Metadata Modal
   ========================================================================== */

.instance-metadata-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.instance-metadata-shell {
    width: 100%;
    min-height: calc(100dvh - 7.5rem);
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
    gap: 1.25rem;
    align-items: start;
}

.instance-metadata-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.instance-metadata-panel-wide {
    grid-column: 1 / -1;
}

.instance-metadata-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.instance-metadata-panel-body {
    padding: 1.25rem;
}

.instance-metadata-grid {
    display: grid;
    gap: 0.85rem;
}

.instance-metadata-card {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

.instance-metadata-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.instance-metadata-value {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.instance-metadata-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.instance-metadata-table th {
    width: 14rem;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.instance-metadata-table td {
    overflow-wrap: anywhere;
}

.instance-metadata-json {
    margin: 0;
    max-height: 45vh;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.44);
    padding: 1rem;
    color: var(--bs-body-color);
    font-size: 0.82rem;
}

@media (max-width: 991.98px) {
    .instance-metadata-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .instance-metadata-panel-wide {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .instance-metadata-panel,
    .instance-metadata-card,
    .instance-metadata-json {
        border-radius: 1rem;
    }

    .instance-metadata-panel-header,
    .instance-metadata-panel-body {
        padding: 1rem;
    }

    .instance-metadata-table th,
    .instance-metadata-table td {
        display: block;
        width: 100%;
    }

    .instance-metadata-table tr {
        display: block;
        border-bottom: 1px solid var(--bs-border-color);
        padding: 0.75rem 0;
    }
}

/* End Emili 4.5 Instance Metadata Modal */

/* ==========================================================================
   Emili 4.5 Health Check NVIDIA GPU Panel
   ========================================================================== */

.health-gpu-list {
    display: grid;
    gap: 0.75rem;
}

.health-gpu-card {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

@media (max-width: 575.98px) {
    .health-gpu-card {
        border-radius: 1rem;
    }
}

/* End Emili 4.5 Health Check NVIDIA GPU Panel */

/* ==========================================================================
   Emili 4.5 Instance Metadata Grouped Panels
   ========================================================================== */

.instance-metadata-shell {
    grid-template-columns: minmax(280px, 0.7fr) minmax(360px, 1fr) minmax(360px, 1fr);
}

.instance-metadata-shell .instance-metadata-panel:nth-child(1) {
    grid-row: span 2;
}

.instance-metadata-shell .instance-metadata-panel:nth-child(2),
.instance-metadata-shell .instance-metadata-panel:nth-child(3) {
    align-self: start;
}

.instance-metadata-table th {
    width: 11rem;
}

.instance-metadata-panel-wide {
    grid-column: 2 / -1;
}

@media (max-width: 1199.98px) {
    .instance-metadata-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .instance-metadata-shell .instance-metadata-panel:nth-child(1) {
        grid-row: auto;
    }

    .instance-metadata-panel-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .instance-metadata-shell {
        grid-template-columns: 1fr;
    }

    .instance-metadata-panel-wide {
        grid-column: auto;
    }
}

/* End Emili 4.5 Instance Metadata Grouped Panels */

/* ==========================================================================
   Emili 4.5 Instance Metadata Equal Panels Final
   ========================================================================== */

/*
 * Final metadata modal layout:
 * - no summary box
 * - no raw JSON box
 * - remaining boxes equal size
 */

.instance-metadata-shell {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

.instance-metadata-shell .instance-metadata-panel {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.instance-metadata-panel-body {
    flex: 1 1 auto;
    min-height: 0;
}

.instance-metadata-table-wrap {
    height: 100%;
}

.instance-metadata-table {
    height: 100%;
}

.instance-metadata-table th {
    width: 10rem !important;
}

.instance-metadata-panel-wide {
    grid-column: auto !important;
}

@media (max-width: 1199.98px) {
    .instance-metadata-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    .instance-metadata-shell {
        grid-template-columns: 1fr !important;
    }

    .instance-metadata-shell .instance-metadata-panel {
        height: auto;
    }
}

/* End Emili 4.5 Instance Metadata Equal Panels Final */

/* ==========================================================================
   Emili 4.5 Instance Metadata Modal Height Trim
   ========================================================================== */

.instance-metadata-modal .modal-header {
    padding: 0.85rem 1rem !important;
}

.instance-metadata-modal .modal-body {
    padding: 0.85rem 1rem !important;
}

.instance-metadata-shell {
    min-height: 0 !important;
    gap: 0.85rem !important;
    align-items: start !important;
}

.instance-metadata-panel {
    height: auto !important;
}

.instance-metadata-panel-header {
    padding: 0.85rem 1rem 0.35rem !important;
}

.instance-metadata-panel-header .h5,
.instance-metadata-panel-header h3 {
    font-size: 1rem !important;
    margin-bottom: 0.1rem !important;
}

.instance-metadata-panel-header .small {
    font-size: 0.75rem;
    line-height: 1.2;
}

.instance-metadata-panel-body {
    padding: 0.75rem 1rem !important;
}

.instance-metadata-table th,
.instance-metadata-table td {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    font-size: 0.88rem;
}

.instance-metadata-table th {
    width: 9.25rem !important;
}

.instance-metadata-card {
    padding: 0.65rem !important;
}

/* End Emili 4.5 Instance Metadata Modal Height Trim */

/* ==========================================================================
   Emili 4.5 Web Services Modal
   ========================================================================== */

.web-services-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.web-services-shell {
    width: 100%;
    min-height: calc(100dvh - 7.5rem);
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.web-services-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.web-services-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.web-services-panel-body {
    padding: 1.25rem;
    min-height: 0;
    flex: 1 1 auto;
}

.web-service-list {
    display: grid;
    gap: 0.85rem;
}

.web-service-card {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.web-service-icon {
    width: 42px;
    height: 42px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-size: 1.15rem;
}

.web-services-output-title {
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.web-services-output {
    min-height: 26rem;
    max-height: calc(100dvh - 15rem);
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.44);
    padding: 1rem;
    color: var(--bs-body-color);
    font-size: 0.82rem;
}

@media (max-width: 991.98px) {
    .web-services-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .web-services-output {
        min-height: 18rem;
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .web-services-panel,
    .web-service-card,
    .web-services-output {
        border-radius: 1rem;
    }

    .web-services-panel-header,
    .web-services-panel-body {
        padding: 1rem;
    }

    .web-service-card {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 Web Services Modal */

/* ==========================================================================
   Emili 4.5 Web Services Expanded Tracking
   ========================================================================== */

.web-service-card .badge {
    vertical-align: middle;
}

.web-service-card h4 {
    overflow-wrap: anywhere;
}

/* End Emili 4.5 Web Services Expanded Tracking */

/* ==========================================================================
   Emili 4.5 Web Services Modal Responsive Button Grid
   ========================================================================== */

/*
 * On smaller screens, reduce the service cards and put them in a compact
 * two-column grid so the command-output window stays visible.
 */

@media (max-width: 991.98px) {
    .web-services-shell {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .web-services-panel-header {
        padding: 0.85rem 1rem 0.35rem !important;
    }

    .web-services-panel-body {
        padding: 0.85rem 1rem !important;
    }

    .web-service-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.65rem !important;
    }

    .web-service-card {
        padding: 0.65rem !important;
        gap: 0.55rem !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .web-service-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 0.75rem !important;
        font-size: 1rem !important;
    }

    .web-service-card h4 {
        font-size: 0.9rem !important;
    }

    .web-service-card p {
        display: none !important;
    }

    .web-service-card .small {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.45rem !important;
    }

    .web-service-card .btn {
        padding: 0.32rem 0.45rem !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        border-radius: 0.65rem !important;
    }

    .web-services-panel form.mt-3 .btn {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.9rem !important;
        border-radius: 0.75rem !important;
    }

    .web-services-output {
        min-height: 20rem !important;
        max-height: 42vh !important;
        font-size: 0.78rem !important;
        padding: 0.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .web-services-modal .modal-header {
        padding: 0.7rem 0.85rem !important;
    }

    .web-services-modal .modal-body {
        padding: 0.75rem 0.85rem !important;
    }

    .web-service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .web-service-card {
        grid-template-columns: 1fr !important;
        text-align: left;
    }

    .web-service-icon {
        display: none !important;
    }

    .web-service-card .d-flex {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .web-service-card .badge {
        width: fit-content;
    }

    .web-services-output {
        min-height: 18rem !important;
        max-height: 44vh !important;
    }
}

/* End Emili 4.5 Web Services Modal Responsive Button Grid */

/* ==========================================================================
   Emili 4.5 Web Services Streaming Output
   ========================================================================== */

.web-service-stream-btn:disabled,
#webServicesRestartAllBtn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.web-services-output {
    scroll-behavior: smooth;
}

#webServicesOutputPanel {
    scroll-margin-top: 1rem;
}

/* End Emili 4.5 Web Services Streaming Output */

/* ==========================================================================
   Emili 4.5 Lazy Modal Loading Shell
   ========================================================================== */

.lazy-modal-loading {
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    padding: 2rem;
    text-align: left;
}

/* End Emili 4.5 Lazy Modal Loading Shell */

/* ==========================================================================
   Emili 4.5 Server Page Operations Queue Removal Cleanup
   ========================================================================== */

body:not(.login-auth-page) .server-page {
    padding-bottom: 1.25rem;
}

/* End Emili 4.5 Server Page Operations Queue Removal Cleanup */

/* ==========================================================================
   Emili 4.5 Trigger Backup Modal
   ========================================================================== */

.trigger-backup-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.trigger-backup-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr);
    gap: 1.25rem;
    align-items: start;
}

.trigger-backup-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.trigger-backup-panel-wide {
    grid-column: 1 / -1;
}

.trigger-backup-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.trigger-backup-panel-body {
    padding: 1.25rem;
}

.trigger-backup-target-card,
.trigger-backup-item,
.trigger-backup-empty,
.trigger-backup-alert {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

.trigger-backup-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.trigger-backup-value {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.trigger-backup-list {
    display: grid;
    gap: 0.75rem;
}

.trigger-backup-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.trigger-backup-alert {
    grid-column: 1 / -1;
}

.trigger-backup-alert-success {
    border-color: rgba(25, 135, 84, 0.45);
    background: rgba(25, 135, 84, 0.14);
}

@media (max-width: 991.98px) {
    .trigger-backup-shell {
        grid-template-columns: 1fr;
    }

    .trigger-backup-panel-wide {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .trigger-backup-panel,
    .trigger-backup-target-card,
    .trigger-backup-item,
    .trigger-backup-empty,
    .trigger-backup-alert {
        border-radius: 1rem;
    }

    .trigger-backup-panel-header,
    .trigger-backup-panel-body {
        padding: 1rem;
    }

    .trigger-backup-item {
        grid-template-columns: 1fr;
    }

    .trigger-backup-item .text-end {
        text-align: left !important;
    }
}

/* End Emili 4.5 Trigger Backup Modal */

/* ==========================================================================
   Emili 4.5 Backups Info-Only Modal
   ========================================================================== */

.trigger-backup-info-only {
    grid-template-columns: minmax(300px, 0.7fr) minmax(460px, 1.3fr);
}

.trigger-backup-info-only .trigger-backup-panel {
    align-self: stretch;
}

@media (max-width: 991.98px) {
    .trigger-backup-info-only {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 Backups Info-Only Modal */

/* ==========================================================================
   Emili 4.5 Snapshots Modal
   ========================================================================== */

.snapshots-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.12), transparent 32rem),
        var(--bs-body-bg);
}

.snapshots-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(460px, 1.2fr);
    gap: 1.25rem;
    align-items: start;
}

.snapshots-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.snapshots-panel-wide {
    grid-column: 1 / -1;
}

.snapshots-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.snapshots-panel-body {
    padding: 1.25rem;
}

.snapshots-target-card,
.snapshots-item,
.snapshots-empty {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

.snapshots-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.snapshots-value {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.snapshots-list {
    display: grid;
    gap: 0.75rem;
}

.snapshots-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 991.98px) {
    .snapshots-shell {
        grid-template-columns: 1fr;
    }

    .snapshots-panel-wide {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .snapshots-panel,
    .snapshots-target-card,
    .snapshots-item,
    .snapshots-empty {
        border-radius: 1rem;
    }

    .snapshots-panel-header,
    .snapshots-panel-body {
        padding: 1rem;
    }

    .snapshots-item {
        grid-template-columns: 1fr;
    }

    .snapshots-item .text-end {
        text-align: left !important;
    }
}

/* End Emili 4.5 Snapshots Modal */

/* ==========================================================================
   Emili 4.5 Snapshot Create Progress
   ========================================================================== */

.snapshot-progress-card {
    margin-top: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

.snapshot-progress-card .progress {
    min-height: 0.75rem;
}

/* End Emili 4.5 Snapshot Create Progress */

/* ==========================================================================
   Emili 4.5 Snapshot Pending / Running State
   ========================================================================== */

.snapshots-item-running {
    border-color: rgba(var(--bs-warning-rgb), 0.55) !important;
    background: rgba(var(--bs-warning-rgb), 0.12) !important;
}

.snapshot-progress-card {
    border-color: rgba(var(--bs-warning-rgb), 0.45);
}

/* End Emili 4.5 Snapshot Pending / Running State */

/* ==========================================================================
   Emili 4.5 Snapshot Create Disabled State
   ========================================================================== */

.snapshot-create-btn:disabled,
.snapshot-create-btn.disabled,
.snapshot-create-disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.35);
    pointer-events: none;
}

.snapshot-create-form-disabled input,
.snapshot-create-form-disabled button {
    opacity: 0.6;
    cursor: not-allowed;
}

.snapshot-create-form-disabled #snapshotDescription {
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
}

/* End Emili 4.5 Snapshot Create Disabled State */

/* ==========================================================================
   Emili 4.5 Snapshot Create Hard Disabled State
   ========================================================================== */

#createSnapshotBtn[disabled],
#createSnapshotBtn[aria-disabled="true"],
.snapshot-create-btn[disabled],
.snapshot-create-btn.disabled,
.snapshot-create-disabled {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.45) !important;
}

.snapshot-create-form-disabled #snapshotDescription,
#snapshotDescription[disabled],
#snapshotDescription[aria-disabled="true"] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: rgba(var(--bs-secondary-rgb), 0.12) !important;
}

/* End Emili 4.5 Snapshot Create Hard Disabled State */

/* ==========================================================================
   Emili 4.5 Snapshot Create Absolute Disabled Override
   ========================================================================== */

#createSnapshotBtn[disabled],
#createSnapshotBtn.disabled,
#createSnapshotBtn.snapshot-create-disabled,
.snapshot-create-form-disabled #createSnapshotBtn {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.55) !important;
    box-shadow: none !important;
}

.snapshot-create-form-disabled #snapshotDescription,
#snapshotDescription[disabled] {
    opacity: 0.58 !important;
    cursor: not-allowed !important;
    background-color: rgba(var(--bs-secondary-rgb), 0.14) !important;
}

/* End Emili 4.5 Snapshot Create Absolute Disabled Override */

/* ==========================================================================
   Emili 4.5 Vultr Reboot Modal
   ========================================================================== */

.vultr-reboot-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(220, 53, 69, 0.10), transparent 32rem),
        var(--bs-body-bg);
}

.vultr-reboot-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.7fr) minmax(460px, 1.3fr);
    gap: 1.25rem;
    align-items: stretch;
}

.vultr-reboot-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.vultr-reboot-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.vultr-reboot-panel-body {
    padding: 1.25rem;
}

.vultr-reboot-progress-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

.vultr-reboot-output {
    min-height: 28rem;
    max-height: calc(100dvh - 15rem);
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.44);
    padding: 1rem;
    color: var(--bs-body-color);
    font-size: 0.82rem;
}

#vultrRebootTriggerBtn:disabled {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 991.98px) {
    .vultr-reboot-shell {
        grid-template-columns: 1fr;
    }

    .vultr-reboot-output {
        min-height: 18rem;
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .vultr-reboot-panel,
    .vultr-reboot-output,
    .vultr-reboot-progress-card {
        border-radius: 1rem;
    }

    .vultr-reboot-panel-header,
    .vultr-reboot-panel-body {
        padding: 1rem;
    }
}

/* End Emili 4.5 Vultr Reboot Modal */

/* ==========================================================================
   Emili 4.5 Database Status Modal Layout Refactor
   ========================================================================== */

.database-status-shell-refined {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.18fr) !important;
    gap: 1.25rem !important;
    align-items: start !important;
}

.database-status-left-column,
.database-status-right-column {
    min-width: 0;
    display: grid;
    gap: 1.25rem;
}

.database-status-tables-panel {
    min-height: calc(100dvh - 8.5rem);
    display: flex;
    flex-direction: column;
}

.database-status-tables-panel .database-status-panel-body {
    flex: 1 1 auto;
    min-height: 0;
}

.database-status-tables-panel .database-table-wrap {
    max-height: calc(100dvh - 15rem);
    overflow: auto;
}

.database-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.database-action-row .btn {
    width: 100%;
}

.database-status-left-column .database-status-panel,
.database-status-right-column .database-status-panel {
    width: 100%;
}

.database-status-left-column .database-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.database-status-left-column .database-status-row {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.database-status-left-column .database-maintenance-output {
    min-height: 9rem;
    max-height: 18rem;
}

@media (max-width: 1199.98px) {
    .database-status-shell-refined {
        grid-template-columns: 1fr !important;
    }

    .database-status-tables-panel {
        min-height: auto;
    }

    .database-status-tables-panel .database-table-wrap {
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .database-action-row {
        grid-template-columns: 1fr;
    }

    .database-status-left-column .database-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 Database Status Modal Layout Refactor */

/* ==========================================================================
   Emili 4.5 Database Overhead / Optimize Check
   ========================================================================== */

.database-table .badge {
    white-space: nowrap;
}

#databaseOptimizeBtn:disabled,
#databaseOptimizeBtn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* End Emili 4.5 Database Overhead / Optimize Check */

/* ==========================================================================
   Emili 4.5 Security Status Modal
   ========================================================================== */

.security-status-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top left, rgba(25, 135, 84, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(13, 110, 253, 0.10), transparent 32rem),
        var(--bs-body-bg);
}

.security-status-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.45fr) minmax(620px, 1.55fr);
    gap: 1.25rem;
    align-items: start;
}

.security-status-panel {
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--emili-radius-xl);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.88);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.security-status-panel-wide {
    min-width: 0;
}

.security-status-panel-header {
    padding: 1.25rem 1.25rem 0.5rem;
}

.security-status-panel-body {
    padding: 1.25rem;
}

.security-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.security-summary-card,
.security-check-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), 0.36);
    padding: 0.85rem;
}

.security-summary-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.security-summary-value {
    font-size: 1.6rem;
    font-weight: 800;
}

.security-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.security-check-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.security-check-icon {
    width: 42px;
    height: 42px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-size: 1.15rem;
}

.security-check-details {
    max-height: 12rem;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    background: rgba(var(--bs-body-bg-rgb), 0.44);
    padding: 0.75rem;
    color: var(--bs-body-color);
    font-size: 0.76rem;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .security-status-shell {
        grid-template-columns: 1fr;
    }

    .security-check-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .security-summary-grid {
        grid-template-columns: 1fr;
    }

    .security-status-panel,
    .security-summary-card,
    .security-check-card,
    .security-check-details {
        border-radius: 1rem;
    }

    .security-status-panel-header,
    .security-status-panel-body {
        padding: 1rem;
    }

    .security-check-card {
        grid-template-columns: 1fr;
    }
}

/* End Emili 4.5 Security Status Modal */

/* ==========================================================================
   Emili 4.5 Security SSH Icon Fix
   ========================================================================== */

.security-check-card .security-check-icon .bi-terminal::before {
    opacity: 1;
}

.security-check-icon {
    overflow: visible;
}

/* End Emili 4.5 Security SSH Icon Fix */

/* ==========================================================================
   Emili 4.5 SSH Security Icon Fallback
   ========================================================================== */

.security-check-icon .bi-terminal:before {
    content: "\F5D4";
}

.security-check-icon .bi-terminal {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
}

/* End Emili 4.5 SSH Security Icon Fallback */

/* ==========================================================================
   Emili 4.5 Package Updates Action
   ========================================================================== */

.package-update-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.package-update-output-title {
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.package-update-output {
    min-height: 14rem;
    max-height: 28rem;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    background: rgba(var(--bs-body-bg-rgb), 0.44);
    padding: 0.75rem;
    color: var(--bs-body-color);
    font-size: 0.76rem;
}

#packageRunUpdatesBtn:disabled,
#packageCheckUpdatesBtn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* End Emili 4.5 Package Updates Action */

/* ==========================================================================
   Emili 4.5 Package Updates Static Output Box
   ========================================================================== */

.package-update-output {
    height: 14rem !important;
    min-height: 14rem !important;
    max-height: 14rem !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    resize: none !important;
}

@media (max-width: 991.98px) {
    .package-update-output {
        height: 12rem !important;
        min-height: 12rem !important;
        max-height: 12rem !important;
    }
}

@media (max-width: 575.98px) {
    .package-update-output {
        height: 10rem !important;
        min-height: 10rem !important;
        max-height: 10rem !important;
    }
}

/* End Emili 4.5 Package Updates Static Output Box */

/* ==========================================================================
   Emili 4.5 User View Permission Guard
   ========================================================================== */

.user-view-avatar[disabled] {
    cursor: default !important;
    opacity: 1 !important;
}

.user-view-avatar[disabled]:hover {
    transform: none !important;
}

/* End Emili 4.5 User View Permission Guard */

/* ==========================================================================
   Emili 4.5 User Preference Theme / Accent Runtime Layer
   ========================================================================== */

/*
 * This section is intentionally variable-driven and global.
 * PHP sets these attributes in inc/head.php:
 * - data-bs-theme="dark|light"
 * - data-emili-accent="emili-blue|purple|green|orange"
 * - data-emili-density="compact|comfortable|spacious"
 */

:root {
    --emili-accent: #0d6efd;
    --emili-accent-rgb: 13, 110, 253;
    --emili-accent-2: #6f42c1;
    --emili-accent-2-rgb: 111, 66, 193;
    --emili-panel-alpha: 0.88;
    --emili-body-radial-alpha: 0.12;
    --emili-card-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
    --emili-density-scale: 1;
}

/* Accent choices */

html[data-emili-accent="emili-blue"] {
    --emili-accent: #0d6efd;
    --emili-accent-rgb: 13, 110, 253;
    --emili-accent-2: #6f42c1;
    --emili-accent-2-rgb: 111, 66, 193;
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
}

html[data-emili-accent="purple"] {
    --emili-accent: #8b5cf6;
    --emili-accent-rgb: 139, 92, 246;
    --emili-accent-2: #ec4899;
    --emili-accent-2-rgb: 236, 72, 153;
    --bs-primary: #8b5cf6;
    --bs-primary-rgb: 139, 92, 246;
    --bs-link-color: #8b5cf6;
    --bs-link-color-rgb: 139, 92, 246;
}

html[data-emili-accent="green"] {
    --emili-accent: #198754;
    --emili-accent-rgb: 25, 135, 84;
    --emili-accent-2: #20c997;
    --emili-accent-2-rgb: 32, 201, 151;
    --bs-primary: #198754;
    --bs-primary-rgb: 25, 135, 84;
    --bs-link-color: #198754;
    --bs-link-color-rgb: 25, 135, 84;
}

html[data-emili-accent="orange"] {
    --emili-accent: #fd7e14;
    --emili-accent-rgb: 253, 126, 20;
    --emili-accent-2: #dc3545;
    --emili-accent-2-rgb: 220, 53, 69;
    --bs-primary: #fd7e14;
    --bs-primary-rgb: 253, 126, 20;
    --bs-link-color: #fd7e14;
    --bs-link-color-rgb: 253, 126, 20;
}

/* Light-mode variable refinement */

html[data-bs-theme="light"] {
    --emili-panel-alpha: 0.96;
    --emili-body-radial-alpha: 0.09;
    --emili-card-shadow: 0 16px 44px rgba(15, 23, 42, 0.08);
}

html[data-bs-theme="light"] body {
    background:
        radial-gradient(circle at top left, rgba(var(--emili-accent-rgb), var(--emili-body-radial-alpha)), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(var(--emili-accent-2-rgb), var(--emili-body-radial-alpha)), transparent 34rem),
        var(--bs-body-bg);
}

html[data-bs-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(var(--emili-accent-rgb), 0.16), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(var(--emili-accent-2-rgb), 0.16), transparent 34rem),
        var(--bs-body-bg);
}

/* Replace hard-coded blue/purple brand gradients with active accent variables. */

.brand-mark,
.reset-brand-mark,
.reset-step.active span,
.login-btn,
.profile-avatar,
.user-view-avatar,
.avatar-preview-fallback,
.reset-preview-fallback {
    background: linear-gradient(135deg, var(--emili-accent), var(--emili-accent-2)) !important;
}

.brand-mark,
.reset-brand-mark,
.profile-avatar,
.user-view-avatar {
    box-shadow: 0 12px 28px rgba(var(--emili-accent-rgb), 0.28) !important;
}

/* Core buttons should follow the selected accent. */

.btn-primary {
    --bs-btn-bg: var(--emili-accent);
    --bs-btn-border-color: var(--emili-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--emili-accent) 86%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--emili-accent) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--emili-accent) 76%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--emili-accent) 70%, black);
    --bs-btn-disabled-bg: var(--emili-accent);
    --bs-btn-disabled-border-color: var(--emili-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--emili-accent);
    --bs-btn-border-color: var(--emili-accent);
    --bs-btn-hover-bg: var(--emili-accent);
    --bs-btn-hover-border-color: var(--emili-accent);
    --bs-btn-active-bg: var(--emili-accent);
    --bs-btn-active-border-color: var(--emili-accent);
}

/* Common cards/panels inherit light/dark cleanly. */

body:not(.login-auth-page) .page-hero,
body:not(.login-auth-page) .users-summary-card,
body:not(.login-auth-page) .entity-summary-card,
body:not(.login-auth-page) .gui-summary-card,
body:not(.login-auth-page) .server-summary-card,
body:not(.login-auth-page) .profile-summary-card,
body:not(.login-auth-page) .history-summary-card,
body:not(.login-auth-page) .files-summary-card,
body:not(.login-auth-page) .preferences-summary-card,
body:not(.login-auth-page) .entity-panel,
body:not(.login-auth-page) .gui-panel,
body:not(.login-auth-page) .server-panel,
body:not(.login-auth-page) .profile-panel,
body:not(.login-auth-page) .history-panel,
body:not(.login-auth-page) .files-panel,
body:not(.login-auth-page) .preferences-panel,
body:not(.login-auth-page) .preferences-control-card,
body:not(.login-auth-page) .users-toolbar-card,
body:not(.login-auth-page) .users-management-card,
body:not(.login-auth-page) .profile-card,
body:not(.login-auth-page) .history-card,
body:not(.login-auth-page) .files-card,
body:not(.login-auth-page) .preferences-card,
body:not(.login-auth-page) .dashboard-card {
    background: rgba(var(--bs-tertiary-bg-rgb), var(--emili-panel-alpha)) !important;
    box-shadow: var(--emili-card-shadow) !important;
}

/* Header/composer surfaces adapt better in light mode. */

.app-shell .app-topbar,
body:not(.login-auth-page) .app-topbar,
.composer-shell,
.login-header,
.login-footer,
.reset-login-shell .login-header,
.reset-login-shell .login-footer {
    background: rgba(var(--bs-body-bg-rgb), 0.88) !important;
}

/* Accent-aware icons and active states. */

.profile-summary-icon,
.history-summary-icon,
.files-summary-icon,
.preferences-summary-icon,
.users-summary-icon,
.entity-summary-icon,
.gui-summary-icon,
.server-summary-icon,
.resource-icon,
.user-avatar,
.profile-section-icon,
.user-view-panel-icon,
.user-view-security-icon,
.user-view-timeline-icon,
.server-action-icon,
.server-ops-icon,
.web-service-icon,
.security-check-icon,
.activity-icon,
.preferences-control-icon {
    background: rgba(var(--emili-accent-rgb), 0.14) !important;
    border-color: rgba(var(--emili-accent-rgb), 0.25) !important;
    color: var(--emili-accent) !important;
}

.message-row.user .avatar {
    background: rgba(var(--emili-accent-rgb), 0.14) !important;
    border-color: rgba(var(--emili-accent-rgb), 0.35) !important;
    color: var(--emili-accent) !important;
}

.message-row.user .message-card {
    background: var(--emili-accent) !important;
    border-color: var(--emili-accent) !important;
}

/* Layout density preference. */

html[data-emili-density="compact"] {
    --emili-density-scale: 0.86;
}

html[data-emili-density="comfortable"] {
    --emili-density-scale: 1;
}

html[data-emili-density="spacious"] {
    --emili-density-scale: 1.14;
}

html[data-emili-density="compact"] body:not(.login-auth-page) .page-main {
    padding: 0.85rem !important;
}

html[data-emili-density="spacious"] body:not(.login-auth-page) .page-main {
    padding: 1.65rem !important;
}

html[data-emili-density="compact"] body:not(.login-auth-page) .page-content,
html[data-emili-density="compact"] body:not(.login-auth-page) .users-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .entity-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .gui-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .server-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .profile-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .history-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .files-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .preferences-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .dashboard-page {
    gap: 0.85rem !important;
}

html[data-emili-density="spacious"] body:not(.login-auth-page) .page-content,
html[data-emili-density="spacious"] body:not(.login-auth-page) .users-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .entity-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .gui-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .server-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .profile-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .history-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .files-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .preferences-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .dashboard-page {
    gap: 1.65rem !important;
}

html[data-emili-density="compact"] body:not(.login-auth-page) .page-hero,
html[data-emili-density="compact"] body:not(.login-auth-page) .profile-panel-body,
html[data-emili-density="compact"] body:not(.login-auth-page) .history-panel-body,
html[data-emili-density="compact"] body:not(.login-auth-page) .files-panel-body,
html[data-emili-density="compact"] body:not(.login-auth-page) .preferences-panel-body,
html[data-emili-density="compact"] body:not(.login-auth-page) .users-card-body,
html[data-emili-density="compact"] body:not(.login-auth-page) .entity-panel-body,
html[data-emili-density="compact"] body:not(.login-auth-page) .gui-panel-body,
html[data-emili-density="compact"] body:not(.login-auth-page) .server-panel-body {
    padding: 0.8rem !important;
}

html[data-emili-density="spacious"] body:not(.login-auth-page) .page-hero,
html[data-emili-density="spacious"] body:not(.login-auth-page) .profile-panel-body,
html[data-emili-density="spacious"] body:not(.login-auth-page) .history-panel-body,
html[data-emili-density="spacious"] body:not(.login-auth-page) .files-panel-body,
html[data-emili-density="spacious"] body:not(.login-auth-page) .preferences-panel-body,
html[data-emili-density="spacious"] body:not(.login-auth-page) .users-card-body,
html[data-emili-density="spacious"] body:not(.login-auth-page) .entity-panel-body,
html[data-emili-density="spacious"] body:not(.login-auth-page) .gui-panel-body,
html[data-emili-density="spacious"] body:not(.login-auth-page) .server-panel-body {
    padding: 1.35rem !important;
}

/* End Emili 4.5 User Preference Theme / Accent Runtime Layer */

/* ==========================================================================
   Emili 4.5 User Preference Theme / Accent Runtime Layer
   ========================================================================== */

/*
 * Runtime attributes are set by /var/www/html/inc/head.php:
 * - data-bs-theme="dark|light"
 * - data-emili-accent="emili-blue|purple|green|orange"
 * - data-emili-density="compact|comfortable|spacious"
 */

:root {
    --emili-accent: #0d6efd;
    --emili-accent-rgb: 13, 110, 253;
    --emili-accent-2: #6f42c1;
    --emili-accent-2-rgb: 111, 66, 193;
    --emili-panel-alpha: 0.88;
    --emili-card-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
}

html[data-emili-accent="emili-blue"] {
    --emili-accent: #0d6efd;
    --emili-accent-rgb: 13, 110, 253;
    --emili-accent-2: #6f42c1;
    --emili-accent-2-rgb: 111, 66, 193;
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
}

html[data-emili-accent="purple"] {
    --emili-accent: #8b5cf6;
    --emili-accent-rgb: 139, 92, 246;
    --emili-accent-2: #ec4899;
    --emili-accent-2-rgb: 236, 72, 153;
    --bs-primary: #8b5cf6;
    --bs-primary-rgb: 139, 92, 246;
    --bs-link-color: #8b5cf6;
    --bs-link-color-rgb: 139, 92, 246;
}

html[data-emili-accent="green"] {
    --emili-accent: #198754;
    --emili-accent-rgb: 25, 135, 84;
    --emili-accent-2: #20c997;
    --emili-accent-2-rgb: 32, 201, 151;
    --bs-primary: #198754;
    --bs-primary-rgb: 25, 135, 84;
    --bs-link-color: #198754;
    --bs-link-color-rgb: 25, 135, 84;
}

html[data-emili-accent="orange"] {
    --emili-accent: #fd7e14;
    --emili-accent-rgb: 253, 126, 20;
    --emili-accent-2: #dc3545;
    --emili-accent-2-rgb: 220, 53, 69;
    --bs-primary: #fd7e14;
    --bs-primary-rgb: 253, 126, 20;
    --bs-link-color: #fd7e14;
    --bs-link-color-rgb: 253, 126, 20;
}

/*
 * Light mode correction:
 * Bootstrap flips variables, then this section softens Emili's custom surfaces
 * so they stop looking like dark cards.
 */

html[data-bs-theme="light"] {
    --emili-panel-alpha: 0.96;
    --emili-card-shadow: 0 16px 44px rgba(15, 23, 42, 0.08);
}

html[data-bs-theme="light"] body {
    color-scheme: light;
    background:
        radial-gradient(circle at top left, rgba(var(--emili-accent-rgb), 0.10), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(var(--emili-accent-2-rgb), 0.10), transparent 34rem),
        var(--bs-body-bg) !important;
}

html[data-bs-theme="dark"] body {
    color-scheme: dark;
    background:
        radial-gradient(circle at top left, rgba(var(--emili-accent-rgb), 0.16), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(var(--emili-accent-2-rgb), 0.16), transparent 34rem),
        var(--bs-body-bg) !important;
}

/* Active accent gradients */

.brand-mark,
.reset-brand-mark,
.profile-avatar,
.user-view-avatar,
.avatar-preview-fallback {
    background: linear-gradient(135deg, var(--emili-accent), var(--emili-accent-2)) !important;
}

.brand-mark,
.reset-brand-mark,
.profile-avatar,
.user-view-avatar {
    box-shadow: 0 12px 28px rgba(var(--emili-accent-rgb), 0.28) !important;
}

/* Bootstrap button accents */

.btn-primary {
    --bs-btn-bg: var(--emili-accent);
    --bs-btn-border-color: var(--emili-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--emili-accent) 86%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--emili-accent) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--emili-accent) 76%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--emili-accent) 70%, black);
    --bs-btn-disabled-bg: var(--emili-accent);
    --bs-btn-disabled-border-color: var(--emili-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--emili-accent);
    --bs-btn-border-color: var(--emili-accent);
    --bs-btn-hover-bg: var(--emili-accent);
    --bs-btn-hover-border-color: var(--emili-accent);
    --bs-btn-active-bg: var(--emili-accent);
    --bs-btn-active-border-color: var(--emili-accent);
}

/* Accent-aware icon chips */

.profile-summary-icon,
.history-summary-icon,
.files-summary-icon,
.preferences-summary-icon,
.users-summary-icon,
.entity-summary-icon,
.gui-summary-icon,
.server-summary-icon,
.resource-icon,
.user-avatar,
.profile-section-icon,
.user-view-panel-icon,
.user-view-security-icon,
.user-view-timeline-icon,
.server-action-icon,
.server-ops-icon,
.web-service-icon,
.security-check-icon,
.activity-icon,
.preferences-control-icon {
    background: rgba(var(--emili-accent-rgb), 0.14) !important;
    border-color: rgba(var(--emili-accent-rgb), 0.25) !important;
    color: var(--emili-accent) !important;
}

.message-row.user .avatar {
    background: rgba(var(--emili-accent-rgb), 0.14) !important;
    border-color: rgba(var(--emili-accent-rgb), 0.35) !important;
    color: var(--emili-accent) !important;
}

.message-row.user .message-card {
    background: var(--emili-accent) !important;
    border-color: var(--emili-accent) !important;
}

/* Light-mode custom panel/card overrides */

html[data-bs-theme="light"] body:not(.login-auth-page) .app-shell {
    background:
        radial-gradient(circle at top left, rgba(var(--emili-accent-rgb), 0.08), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(var(--emili-accent-2-rgb), 0.08), transparent 32rem),
        var(--bs-body-bg) !important;
}

html[data-bs-theme="light"] .app-topbar,
html[data-bs-theme="light"] body:not(.login-auth-page) .app-topbar,
html[data-bs-theme="light"] .composer-shell {
    background: rgba(var(--bs-body-bg-rgb), 0.88) !important;
}

html[data-bs-theme="light"] body:not(.login-auth-page) .page-hero,
html[data-bs-theme="light"] body:not(.login-auth-page) .users-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .entity-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .gui-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .server-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .profile-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .history-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .files-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .preferences-summary-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .entity-panel,
html[data-bs-theme="light"] body:not(.login-auth-page) .gui-panel,
html[data-bs-theme="light"] body:not(.login-auth-page) .server-panel,
html[data-bs-theme="light"] body:not(.login-auth-page) .profile-panel,
html[data-bs-theme="light"] body:not(.login-auth-page) .history-panel,
html[data-bs-theme="light"] body:not(.login-auth-page) .files-panel,
html[data-bs-theme="light"] body:not(.login-auth-page) .preferences-panel,
html[data-bs-theme="light"] body:not(.login-auth-page) .preferences-control-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .users-toolbar-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .users-management-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .profile-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .history-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .files-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .preferences-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .dashboard-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .detail-item,
html[data-bs-theme="light"] body:not(.login-auth-page) .permission-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .activity-item,
html[data-bs-theme="light"] body:not(.login-auth-page) .user-view-detail-item,
html[data-bs-theme="light"] body:not(.login-auth-page) .user-view-security-card,
html[data-bs-theme="light"] body:not(.login-auth-page) .user-view-permission-item,
html[data-bs-theme="light"] body:not(.login-auth-page) .user-view-timeline-item {
    background: rgba(var(--bs-tertiary-bg-rgb), 0.96) !important;
    box-shadow: var(--emili-card-shadow) !important;
}

/* Density preference */

html[data-emili-density="compact"] body:not(.login-auth-page) .page-main {
    padding: 0.85rem !important;
}

html[data-emili-density="spacious"] body:not(.login-auth-page) .page-main {
    padding: 1.65rem !important;
}

html[data-emili-density="compact"] body:not(.login-auth-page) .page-content,
html[data-emili-density="compact"] body:not(.login-auth-page) .users-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .entity-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .gui-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .server-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .profile-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .history-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .files-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .preferences-page,
html[data-emili-density="compact"] body:not(.login-auth-page) .dashboard-page {
    gap: 0.85rem !important;
}

html[data-emili-density="spacious"] body:not(.login-auth-page) .page-content,
html[data-emili-density="spacious"] body:not(.login-auth-page) .users-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .entity-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .gui-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .server-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .profile-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .history-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .files-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .preferences-page,
html[data-emili-density="spacious"] body:not(.login-auth-page) .dashboard-page {
    gap: 1.65rem !important;
}

/* End Emili 4.5 User Preference Theme / Accent Runtime Layer */

/* ==========================================================================
   Emili 4.5 Server Management Three Column Desktop Layout
   ========================================================================== */

/*
 * Desktop goal:
 * - Vultr Cloud Controls in column 1
 * - Local Ubuntu Server in column 2
 * - Maintenance Mode in column 3
 *
 * This is layout-only. It does not change server-management functions,
 * modal wiring, buttons, or maintenance-mode logic.
 */

@media (min-width: 1200px) {
    body:not(.login-auth-page) .server-page .server-layout {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
        align-items: stretch !important;
    }

    body:not(.login-auth-page) .server-page .server-layout > .server-panel {
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(.login-auth-page) .server-page .server-layout > .server-panel > .server-panel-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /*
     * Each main panel is now one desktop column, so internal action cards
     * should stack vertically instead of trying to make two mini-columns.
     */
    body:not(.login-auth-page) .server-page .server-layout > .server-panel .server-action-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    body:not(.login-auth-page) .server-page .server-layout > .server-panel .server-action-card {
        width: 100% !important;
    }

    /*
     * Visual order requested by section purpose.
     */
    body:not(.login-auth-page) .server-page .server-panel-vultr {
        order: 1;
    }

    body:not(.login-auth-page) .server-page .server-panel-local {
        order: 2;
    }

    body:not(.login-auth-page) .server-page .server-panel-maintenance {
        order: 3;
    }

    /*
     * Keep status rows pinned below the action cards in each column.
     */
    body:not(.login-auth-page) .server-page .server-panel-body > .server-status-list {
        margin-top: auto !important;
        padding-top: 1rem !important;
    }
}

/*
 * Tablet and mobile remain stacked and readable.
 */
@media (max-width: 1199.98px) {
    body:not(.login-auth-page) .server-page .server-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    body:not(.login-auth-page) .server-page .server-layout > .server-panel {
        order: initial !important;
    }
}

/* End Emili 4.5 Server Management Three Column Desktop Layout */