/*
 * NodeBe panel system
 * Final shared visual layer for authenticated client and admin workspaces.
 * Loaded after page-level styles so legacy Blade screens inherit one coherent UI.
 */

:root {
    --panel-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --panel-sidebar-width: 284px;
    --panel-topbar-height: 72px;
    --panel-radius: 8px;
    --panel-bg: #f3f6fa;
    --panel-surface: #ffffff;
    --panel-surface-soft: #f7f9fc;
    --panel-surface-strong: #eaf0f6;
    --panel-text: #172033;
    --panel-heading: #101828;
    --panel-muted: #667085;
    --panel-line: #dce3eb;
    --panel-line-strong: #c9d4df;
    --panel-blue: #2563eb;
    --panel-cyan: #0787a8;
    --panel-green: #0b9b72;
    --panel-orange: #e66f13;
    --panel-red: #d63a4a;
    --panel-violet: #7c3aed;
    --panel-sidebar: #111820;
    --panel-sidebar-soft: #19232e;
    --panel-sidebar-line: #2a3744;
    --panel-sidebar-text: #dfe7ef;
    --panel-sidebar-muted: #8fa0b2;
    --panel-shadow: 0 8px 24px rgba(22, 34, 51, .055);
    --panel-shadow-raised: 0 16px 38px rgba(22, 34, 51, .10);
    --panel-focus: 0 0 0 3px rgba(37, 99, 235, .18);
}

[data-theme="dark"],
[data-bs-theme="dark"] {
    --panel-bg: #0b1118;
    --panel-surface: #111a24;
    --panel-surface-soft: #15212d;
    --panel-surface-strong: #1b2a38;
    --panel-text: #dce7f1;
    --panel-heading: #f3f7fb;
    --panel-muted: #91a3b5;
    --panel-line: #263746;
    --panel-line-strong: #35495a;
    --panel-sidebar: #090e13;
    --panel-sidebar-soft: #121b24;
    --panel-sidebar-line: #22303d;
    --panel-shadow: 0 10px 28px rgba(0, 0, 0, .20);
    --panel-shadow-raised: 0 18px 42px rgba(0, 0, 0, .32);
}

body.client-shell,
body.admin-shell {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--panel-bg) !important;
    color: var(--panel-text);
    font-family: var(--panel-font);
    font-size: 14px;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

body.client-shell *,
body.admin-shell * {
    box-sizing: border-box;
    min-width: 0;
    letter-spacing: 0;
}

body.client-shell a,
body.admin-shell a {
    text-underline-offset: 3px;
}

body.client-shell button,
body.client-shell input,
body.client-shell select,
body.client-shell textarea,
body.admin-shell button,
body.admin-shell input,
body.admin-shell select,
body.admin-shell textarea {
    font: inherit;
    letter-spacing: 0;
}

.panel-progress {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--panel-green), var(--panel-blue), var(--panel-orange));
    box-shadow: 0 1px 8px rgba(37, 99, 235, .35);
    transition: width .22s ease;
}

.panel-icon-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: var(--panel-surface);
    color: var(--panel-text);
    line-height: 1;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

.panel-icon-button:hover {
    border-color: var(--panel-line-strong);
    background: var(--panel-surface-soft);
    color: var(--panel-blue);
    transform: translateY(-1px);
}

.panel-icon-button:focus-visible,
.panel-command-trigger:focus-visible,
.panel-sidebar-close:focus-visible {
    outline: 0;
    box-shadow: var(--panel-focus);
}

.panel-notification-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--panel-surface);
    border-radius: 50%;
    background: var(--panel-red);
}

.panel-command-trigger {
    min-width: 240px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: var(--panel-surface-soft);
    color: var(--panel-muted);
    text-align: left;
    transition: border-color .16s ease, background-color .16s ease;
}

.panel-command-trigger:hover {
    border-color: var(--panel-line-strong);
    background: var(--panel-surface);
}

.panel-command-trigger > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-command-trigger kbd {
    padding: 2px 6px;
    border: 1px solid var(--panel-line);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--panel-surface);
    color: var(--panel-muted);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
}

.panel-command-modal .modal-dialog {
    max-width: 620px;
}

.panel-command-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--panel-line);
    border-radius: 8px;
    background: var(--panel-surface);
    box-shadow: 0 24px 80px rgba(9, 17, 28, .28);
}

.panel-command-search {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--panel-line);
}

.panel-command-search > i {
    color: var(--panel-muted);
}

.panel-command-search input {
    width: 100%;
    padding: 4px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--panel-heading);
    font-size: 15px;
}

.panel-command-search button {
    border: 0;
    background: transparent;
    color: var(--panel-muted);
}

.panel-command-results {
    max-height: min(62vh, 520px);
    overflow: auto;
    padding: 8px;
}

.panel-command-group {
    padding: 8px 8px 5px;
    color: var(--panel-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.panel-command-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--panel-text);
    text-decoration: none;
}

.panel-command-item:hover,
.panel-command-item:focus {
    background: var(--panel-surface-soft);
    color: var(--panel-heading);
}

.panel-command-item > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--panel-surface-strong);
    color: var(--panel-blue);
}

.panel-command-item strong,
.panel-command-item small {
    display: block;
}

.panel-command-item strong {
    color: var(--panel-heading);
    font-size: 12px;
    font-weight: 800;
}

.panel-command-item small {
    margin-top: 2px;
    color: var(--panel-muted);
    font-size: 10px;
}

.panel-command-item > .fa-chevron-right,
.panel-command-item > .bi-chevron-right {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--panel-muted);
    font-size: 10px;
}

.panel-command-empty {
    display: none;
    padding: 30px 16px;
    color: var(--panel-muted);
    text-align: center;
}

.panel-command-empty.is-visible {
    display: block;
}

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

.panel-sidebar-backdrop.is-visible {
    display: block;
}

.panel-sidebar-close {
    width: 34px;
    height: 34px;
    display: none;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--panel-sidebar-line);
    border-radius: 7px;
    background: var(--panel-sidebar-soft);
    color: var(--panel-sidebar-text);
}

/* Client shell */
.client-shell .client-layout.app {
    min-height: 100dvh;
    display: block;
    width: 100%;
    background: var(--panel-bg);
}

.client-shell .app-sidebar.client-sidebar {
    position: fixed !important;
    z-index: 1090 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--panel-sidebar-width) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--panel-sidebar-line) !important;
    border-radius: 0 !important;
    background: var(--panel-sidebar) !important;
    box-shadow: none !important;
    color: var(--panel-sidebar-text) !important;
    isolation: isolate;
}

.client-shell .app-sidebar.client-sidebar::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 0 auto !important;
    width: auto !important;
    height: 4px !important;
    content: "" !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, var(--panel-green), var(--panel-blue), var(--panel-orange)) !important;
    animation: none !important;
    opacity: 1 !important;
}

.client-shell .client-brand {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--panel-sidebar-line);
}

.client-shell .client-brand-link {
    display: flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
}

.client-shell .client-brand-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: #ffffff;
}

.client-shell .client-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.client-shell .client-brand-copy {
    overflow: hidden;
}

.client-shell .client-brand-copy strong,
.client-shell .client-brand-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-shell .client-brand-copy strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 850;
}

.client-shell .client-brand-copy span {
    margin-top: 2px;
    color: var(--panel-sidebar-muted);
    font-size: 10px;
}

.client-shell .client-wallet-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 14px 14px 8px;
    padding: 12px;
    border: 1px solid var(--panel-sidebar-line);
    border-radius: 8px;
    background: var(--panel-sidebar-soft);
    color: var(--panel-sidebar-text);
    text-decoration: none;
}

.client-shell .client-wallet-summary:hover {
    border-color: #405263;
    color: #ffffff;
}

.client-shell .client-wallet-summary > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(15, 159, 120, .15);
    color: #5de0b8;
}

.client-shell .client-wallet-summary span,
.client-shell .client-wallet-summary strong {
    display: block;
}

.client-shell .client-wallet-summary span {
    color: var(--panel-sidebar-muted);
    font-size: 10px;
    font-weight: 700;
}

.client-shell .client-wallet-summary strong {
    margin-top: 2px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.client-shell .client-wallet-summary > .fa-chevron-right {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--panel-sidebar-muted);
    font-size: 10px;
}

.client-shell .client-deploy-button {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 14px 10px;
    padding: 9px 12px;
    border: 1px solid #2ab58e;
    border-radius: 7px;
    background: var(--panel-green);
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    transition: background-color .16s ease, transform .16s ease;
}

.client-shell .client-deploy-button:hover {
    background: #087f5e;
    color: #ffffff;
    transform: translateY(-1px);
}

.client-shell .client-nav-scroll {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: #344554 transparent;
}

.client-shell .client-nav-group {
    margin-top: 14px;
}

.client-shell .client-nav-label {
    display: block;
    padding: 0 10px 6px;
    color: #718497;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.client-shell .client-nav-list {
    display: grid;
    gap: 3px;
}

.client-shell .client-nav-link.nav-link {
    position: relative;
    min-height: 42px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 4px 9px !important;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #b9c6d2 !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    text-decoration: none;
}

.client-shell .client-nav-link.nav-link::before,
.client-shell .client-nav-link.nav-link::after {
    display: none !important;
}

.client-shell .client-nav-link > i {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: #91a4b7 !important;
    font-size: 13px !important;
}

.client-shell .client-nav-link:hover {
    border-color: #283846 !important;
    background: #17222c !important;
    color: #ffffff !important;
}

.client-shell .client-nav-link:hover > i {
    background: rgba(37, 99, 235, .13) !important;
    color: #83afff !important;
}

.client-shell .client-nav-link.active {
    border-color: #304454 !important;
    background: #1a2732 !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 var(--panel-green) !important;
}

.client-shell .client-nav-link.active > i {
    background: rgba(15, 159, 120, .16) !important;
    color: #66dfbd !important;
}

.client-shell .panel-nav-badge {
    min-width: 21px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 6px;
    background: #263746;
    color: #dce7f0;
    font-size: 9px;
    font-weight: 850;
}

.client-shell .client-sidebar-footer {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid var(--panel-sidebar-line);
    background: #0e151c;
}

.client-shell .client-avatar,
.admin-shell .admin-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--panel-blue), var(--panel-cyan));
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.client-shell .client-sidebar-user {
    overflow: hidden;
}

.client-shell .client-sidebar-user strong,
.client-shell .client-sidebar-user span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-shell .client-sidebar-user strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.client-shell .client-sidebar-user span {
    margin-top: 2px;
    color: var(--panel-sidebar-muted);
    font-size: 9px;
}

.client-shell .client-sidebar-logout {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--panel-sidebar-line);
    border-radius: 7px;
    background: transparent;
    color: var(--panel-sidebar-muted);
}

.client-shell .client-sidebar-logout:hover {
    border-color: rgba(214, 58, 74, .45);
    background: rgba(214, 58, 74, .10);
    color: #ff9ca6;
}

.client-shell .client-main.app-main {
    width: auto !important;
    min-height: 100dvh !important;
    margin: 0 0 0 var(--panel-sidebar-width) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--panel-bg) !important;
}

.client-shell-guest .client-main.app-main {
    margin-left: 0 !important;
}

.client-shell .client-topbar.topbar {
    position: sticky !important;
    z-index: 1020 !important;
    top: 0 !important;
    min-height: var(--panel-topbar-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 10px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--panel-surface) 94%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
}

.client-shell .client-topbar-left,
.client-shell .client-topbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.client-shell .client-page-context {
    display: grid;
    gap: 2px;
}

.client-shell .client-page-context span {
    color: var(--panel-muted);
    font-size: 10px;
    font-weight: 700;
}

.client-shell .client-page-context h1 {
    margin: 0;
    color: var(--panel-heading);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.2;
}

.client-shell .client-wallet-chip {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #bfe4d8;
    border-radius: 7px;
    background: #effaf6;
    color: #087657;
    text-decoration: none;
}

.client-shell .client-wallet-chip span {
    color: #4b7568;
    font-size: 9px;
    font-weight: 700;
}

.client-shell .client-wallet-chip strong {
    font-size: 11px;
    font-weight: 850;
}

[data-theme="dark"] .client-wallet-chip {
    border-color: #265141;
    background: #122a23;
    color: #72e5c2;
}

[data-theme="dark"] .client-wallet-chip span {
    color: #8eb9aa;
}

.client-shell .client-user-trigger {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: var(--panel-surface);
    color: var(--panel-text);
}

.client-shell .client-user-trigger:hover {
    border-color: var(--panel-line-strong);
}

.client-shell .client-user-trigger .client-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.client-shell .client-user-trigger strong {
    display: block;
    max-width: 128px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-shell .dropdown-menu,
.admin-shell .dropdown-menu {
    padding: 7px;
    border: 1px solid var(--panel-line);
    border-radius: 8px;
    background: var(--panel-surface);
    box-shadow: var(--panel-shadow-raised);
}

.client-shell .dropdown-item,
.admin-shell .dropdown-item {
    min-height: 38px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    color: var(--panel-text);
    font-size: 12px;
}

.client-shell .dropdown-item:hover,
.admin-shell .dropdown-item:hover {
    background: var(--panel-surface-soft);
    color: var(--panel-heading);
}

.client-shell .client-notification-menu {
    width: min(340px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
}

.client-shell .panel-menu-heading,
.admin-shell .panel-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-line);
    color: var(--panel-heading);
    font-size: 12px;
    font-weight: 850;
}

.client-shell .panel-notification-item,
.admin-shell .panel-notification-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--panel-line);
    color: var(--panel-text);
    text-decoration: none;
}

.client-shell .panel-notification-item:last-child,
.admin-shell .panel-notification-item:last-child {
    border-bottom: 0;
}

.client-shell .panel-notification-item:hover,
.admin-shell .panel-notification-item:hover {
    background: var(--panel-surface-soft);
}

.client-shell .panel-notification-item > i,
.admin-shell .panel-notification-item > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--tone, var(--panel-blue)) 12%, var(--panel-surface));
    color: var(--tone, var(--panel-blue));
}

.client-shell .panel-notification-item strong,
.client-shell .panel-notification-item small,
.admin-shell .panel-notification-item strong,
.admin-shell .panel-notification-item small {
    display: block;
}

.client-shell .panel-notification-item strong,
.admin-shell .panel-notification-item strong {
    color: var(--panel-heading);
    font-size: 11px;
}

.client-shell .panel-notification-item small,
.admin-shell .panel-notification-item small {
    margin-top: 2px;
    color: var(--panel-muted);
    font-size: 9px;
}

.client-shell .panel-notification-item > .fa-chevron-right,
.client-shell .panel-notification-item > .bi-chevron-right,
.admin-shell .panel-notification-item > .fa-chevron-right,
.admin-shell .panel-notification-item > .bi-chevron-right {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--panel-muted);
    font-size: 9px;
}

.client-shell .panel-notification-empty,
.admin-shell .panel-notification-empty {
    padding: 24px 16px;
    color: var(--panel-muted);
    text-align: center;
    font-size: 11px;
}

.client-shell .panel-notification-empty i,
.admin-shell .panel-notification-empty i {
    display: block;
    margin-bottom: 8px;
    color: var(--panel-green);
    font-size: 20px;
}

.client-shell .client-impersonation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 24px;
    border-bottom: 1px solid #e7b94f;
    background: #fff8df;
    color: #684d08;
    font-size: 12px;
}

[data-theme="dark"] .client-impersonation {
    border-color: #6e571d;
    background: #2b2413;
    color: #f0d77c;
}

.client-shell .client-announcement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 14px 24px 0;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--announcement-tone, var(--panel-blue)) 34%, var(--panel-line));
    border-left: 4px solid var(--announcement-tone, var(--panel-blue));
    border-radius: 8px;
    background: color-mix(in srgb, var(--announcement-tone, var(--panel-blue)) 6%, var(--panel-surface));
}

.client-shell .client-announcement-info { --announcement-tone: var(--panel-blue); }
.client-shell .client-announcement-success { --announcement-tone: var(--panel-green); }
.client-shell .client-announcement-warning { --announcement-tone: var(--panel-orange); }
.client-shell .client-announcement-danger { --announcement-tone: var(--panel-red); }

.client-shell .client-announcement-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-shell .client-announcement-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--announcement-tone) 13%, var(--panel-surface));
    color: var(--announcement-tone);
}

.client-shell .client-announcement-title {
    color: var(--panel-heading);
    font-size: 11px;
    font-weight: 850;
}

.client-shell .client-announcement-body {
    margin-top: 2px;
    color: var(--panel-muted);
    font-size: 10px;
}

.client-shell .client-announcement-action {
    color: var(--announcement-tone);
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.client-shell .client-content.content {
    width: 100% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 22px 24px 34px !important;
    overflow: visible !important;
}

.client-shell-guest .client-content.content {
    max-width: 1320px !important;
}

/* Shared client pages */
.client-shell .cp-page {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.client-shell .cp-page > * {
    min-width: 0;
}

.client-shell .cp-hero {
    position: relative !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 22px !important;
    padding: 4px 0 17px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--panel-text) !important;
}

.client-shell .cp-hero::before,
.client-shell .cp-hero::after {
    display: none !important;
}

.client-shell .cp-eyebrow {
    margin-bottom: 6px !important;
    color: var(--panel-green) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
}

.client-shell .cp-title {
    margin: 0 !important;
    color: var(--panel-heading) !important;
    font-size: 25px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.client-shell .cp-subtitle {
    max-width: 760px !important;
    margin: 7px 0 0 !important;
    color: var(--panel-muted) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.client-shell .cp-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.client-shell .cp-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.client-shell .cp-span-2 { grid-column: span 2 !important; }
.client-shell .cp-span-3 { grid-column: span 3 !important; }
.client-shell .cp-span-4 { grid-column: span 4 !important; }
.client-shell .cp-span-5 { grid-column: span 5 !important; }
.client-shell .cp-span-6 { grid-column: span 6 !important; }
.client-shell .cp-span-7 { grid-column: span 7 !important; }
.client-shell .cp-span-8 { grid-column: span 8 !important; }
.client-shell .cp-span-9 { grid-column: span 9 !important; }
.client-shell .cp-span-10 { grid-column: span 10 !important; }
.client-shell .cp-span-12 { grid-column: 1 / -1 !important; }

.client-shell .cp-card,
.client-shell .cp-stat {
    position: relative !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--panel-line) !important;
    border-radius: 8px !important;
    background: var(--panel-surface) !important;
    box-shadow: var(--panel-shadow) !important;
}

.client-shell .cp-card::before,
.client-shell .cp-card::after {
    display: none !important;
}

.client-shell .cp-card:hover {
    transform: none !important;
    border-color: var(--panel-line-strong) !important;
    box-shadow: var(--panel-shadow) !important;
}

.client-shell .cp-stat {
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 16px !important;
}

.client-shell .cp-stat::before {
    position: absolute !important;
    inset: 0 0 auto !important;
    width: auto !important;
    height: 3px !important;
    display: block !important;
    content: "" !important;
    background: var(--stat-tone, var(--panel-green)) !important;
}

.client-shell .cp-grid > :nth-child(4n + 1).cp-stat { --stat-tone: var(--panel-green); }
.client-shell .cp-grid > :nth-child(4n + 2).cp-stat { --stat-tone: var(--panel-blue); }
.client-shell .cp-grid > :nth-child(4n + 3).cp-stat { --stat-tone: var(--panel-orange); }
.client-shell .cp-grid > :nth-child(4n + 4).cp-stat { --stat-tone: var(--panel-cyan); }

.client-shell .cp-stat-label {
    color: var(--panel-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.client-shell .cp-stat-value {
    margin-top: 5px !important;
    color: var(--panel-heading) !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
}

.client-shell .cp-stat-note,
.client-shell .cp-card-note,
.client-shell .cp-row-meta,
.client-shell .cp-kv-key,
.client-shell .cp-empty {
    color: var(--panel-muted) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

.client-shell .cp-card-head {
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 13px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    background: var(--panel-surface) !important;
}

.client-shell .cp-card-head::after {
    display: none !important;
}

.client-shell .cp-card-title {
    margin: 0 !important;
    color: var(--panel-heading) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
}

.client-shell .cp-card-pad {
    padding: 16px !important;
}

.client-shell .cp-row {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 11px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.client-shell .cp-row:last-child {
    border-bottom: 0 !important;
}

.client-shell .cp-row:hover {
    transform: none !important;
    background: transparent !important;
}

.client-shell .cp-row-title,
.client-shell .cp-kv-value {
    color: var(--panel-heading) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.client-shell .cp-btn {
    min-height: 39px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: normal !important;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease !important;
}

.client-shell .cp-btn:hover {
    transform: translateY(-1px) !important;
}

.client-shell .cp-btn-primary {
    border-color: var(--panel-blue) !important;
    background: var(--panel-blue) !important;
    color: #ffffff !important;
}

.client-shell .cp-btn-primary:hover {
    border-color: #1d4ed8 !important;
    background: #1d4ed8 !important;
}

.client-shell .cp-btn-ghost {
    border-color: var(--panel-line) !important;
    background: var(--panel-surface) !important;
    color: var(--panel-text) !important;
}

.client-shell .cp-btn-ghost:hover {
    border-color: var(--panel-line-strong) !important;
    background: var(--panel-surface-soft) !important;
    color: var(--panel-blue) !important;
}

.client-shell .cp-badge {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 7px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.client-shell .cp-badge-active,
.client-shell .cp-badge-approved,
.client-shell .cp-badge-paid,
.client-shell .cp-badge-open,
.client-shell .cp-badge-success,
.client-shell .cp-badge-answered {
    border-color: #b9e7d8 !important;
    background: #edf9f5 !important;
    color: #087657 !important;
}

.client-shell .cp-badge-unpaid,
.client-shell .cp-badge-overdue,
.client-shell .cp-badge-pending,
.client-shell .cp-badge-awaiting_payment,
.client-shell .cp-badge-provisioning {
    border-color: #f1d2b6 !important;
    background: #fff6ed !important;
    color: #ae4d09 !important;
}

.client-shell .cp-badge-suspended,
.client-shell .cp-badge-cancelled,
.client-shell .cp-badge-failed,
.client-shell .cp-badge-danger,
.client-shell .cp-badge-urgent {
    border-color: #f0c3c8 !important;
    background: #fff1f3 !important;
    color: #b42335 !important;
}

.client-shell .cp-badge-info {
    border-color: #bfd6fb !important;
    background: #eff5ff !important;
    color: #1d56ad !important;
}

.client-shell .cp-option,
.client-shell .cp-choice {
    position: relative !important;
    min-height: 84px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 13px !important;
    overflow: hidden !important;
    border: 1px solid var(--panel-line) !important;
    border-radius: 8px !important;
    background: var(--panel-surface) !important;
    color: var(--panel-text) !important;
    cursor: pointer;
}

.client-shell .cp-option:hover,
.client-shell .cp-choice:hover {
    border-color: #9bb8e6 !important;
    background: #f7faff !important;
}

.client-shell .cp-option:has(input:checked),
.client-shell .cp-choice:has(input:checked),
.client-shell .cp-option.is-selected,
.client-shell .cp-choice.is-selected {
    border-color: var(--panel-blue) !important;
    background: #f0f5ff !important;
    box-shadow: inset 0 0 0 1px var(--panel-blue) !important;
}

.client-shell .cp-option:has(input:checked)::after,
.client-shell .cp-choice:has(input:checked)::after,
.client-shell .cp-option.is-selected::after,
.client-shell .cp-choice.is-selected::after {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    content: "\2713";
    border-radius: 50%;
    background: var(--panel-blue);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.client-shell .cp-form .form-label,
.client-shell .form-label {
    margin-bottom: 6px !important;
    color: var(--panel-text) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.client-shell .form-control,
.client-shell .form-select,
.client-shell textarea.form-control,
.client-shell .input-group-text {
    min-height: 42px !important;
    border-color: var(--panel-line) !important;
    border-radius: 7px !important;
    background-color: var(--panel-surface) !important;
    color: var(--panel-text) !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

.client-shell .input-group > :not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.client-shell .input-group > :not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.client-shell .form-control:focus,
.client-shell .form-select:focus {
    border-color: #7ea7eb !important;
    box-shadow: var(--panel-focus) !important;
}

.client-shell .form-text,
.client-shell .invalid-feedback {
    font-size: 10px !important;
}

.client-shell .cp-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.client-shell .cp-filterbar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    padding: 3px !important;
    border: 1px solid var(--panel-line) !important;
    border-radius: 7px !important;
    background: var(--panel-surface-soft) !important;
}

.client-shell .cp-filter {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 9px !important;
    border-radius: 6px !important;
    color: var(--panel-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.client-shell .cp-filter:hover {
    color: var(--panel-heading) !important;
}

.client-shell .cp-filter.active {
    background: var(--panel-surface) !important;
    color: var(--panel-blue) !important;
    box-shadow: 0 1px 4px rgba(22, 34, 51, .08) !important;
}

.client-shell .cp-table-wrap,
.client-shell .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 0 0 8px 8px;
    scrollbar-width: thin;
}

.client-shell .cp-table,
.client-shell .table {
    width: 100% !important;
    min-width: 720px;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

.client-shell .cp-table thead th,
.client-shell .table thead th {
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    background: var(--panel-surface-soft) !important;
    color: var(--panel-muted) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.client-shell .cp-table tbody td,
.client-shell .table tbody td {
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    background: transparent !important;
    color: var(--panel-text) !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

.client-shell .cp-table tbody tr:last-child td,
.client-shell .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.client-shell .cp-table tbody tr:hover td,
.client-shell .table tbody tr:hover td {
    background: var(--panel-surface-soft) !important;
}

.client-shell .cp-empty {
    padding: 28px 18px !important;
    border: 1px dashed var(--panel-line-strong) !important;
    border-radius: 8px !important;
    background: var(--panel-surface-soft) !important;
    text-align: center !important;
}

.client-shell .pagination {
    gap: 4px;
    flex-wrap: wrap;
}

.client-shell .page-link {
    min-width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 5px 8px;
    border-color: var(--panel-line);
    border-radius: 6px !important;
    background: var(--panel-surface);
    color: var(--panel-text);
    font-size: 10px;
}

.client-shell .active > .page-link,
.client-shell .page-link.active {
    border-color: var(--panel-blue);
    background: var(--panel-blue);
    color: #ffffff;
}

.client-shell .alert {
    border-width: 1px;
    border-radius: 8px;
    font-size: 11px;
}

/* Admin shell */
.admin-shell .admin-layout.layout {
    width: 100% !important;
    min-height: 100dvh !important;
    display: block !important;
    padding: 0 !important;
    background: var(--panel-bg) !important;
}

.admin-shell .admin-sidebar.sidebar {
    position: fixed !important;
    z-index: 1090 !important;
    inset: 0 auto 0 0 !important;
    width: var(--panel-sidebar-width) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--panel-sidebar-line) !important;
    border-radius: 0 !important;
    background: var(--panel-sidebar) !important;
    box-shadow: none !important;
    color: var(--panel-sidebar-text) !important;
}

.admin-shell .admin-sidebar.sidebar::before,
.admin-shell .admin-sidebar.sidebar::after {
    display: none !important;
}

.admin-shell .admin-brand {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--panel-sidebar-line);
}

.admin-shell .admin-brand-link {
    display: flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
}

.admin-shell .admin-brand-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: #ffffff;
}

.admin-shell .admin-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.admin-shell .admin-brand-copy {
    overflow: hidden;
}

.admin-shell .admin-brand-copy strong,
.admin-shell .admin-brand-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-shell .admin-brand-copy strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 850;
}

.admin-shell .admin-brand-copy span {
    margin-top: 2px;
    color: var(--panel-sidebar-muted);
    font-size: 10px;
}

.admin-shell .admin-create-button {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 14px 9px;
    padding: 9px 12px;
    border: 1px solid #4a7ff0;
    border-radius: 7px;
    background: var(--panel-blue);
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    transition: background-color .16s ease, transform .16s ease;
}

.admin-shell .admin-create-button:hover {
    background: #1d4ed8;
    color: #ffffff;
    transform: translateY(-1px);
}

.admin-shell .admin-sidebar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 14px 8px;
    padding: 10px 11px;
    border: 1px solid var(--panel-sidebar-line);
    border-radius: 8px;
    background: var(--panel-sidebar-soft);
    color: #b9c6d2;
    font-size: 10px;
    font-weight: 750;
}

.admin-shell .admin-sidebar-status i {
    color: #5de0b8;
    font-size: 8px;
}

.admin-shell .admin-nav-scroll {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px 10px 16px;
    scrollbar-width: thin;
    scrollbar-color: #344554 transparent;
}

.admin-shell .admin-nav-group {
    margin-top: 14px;
}

.admin-shell .admin-nav-label {
    display: block;
    padding: 0 10px 6px;
    color: #718497;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-shell .admin-nav-list {
    display: grid;
    gap: 3px;
}

.admin-shell .admin-nav-link.nav-link {
    position: relative;
    min-height: 42px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 4px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #b9c6d2 !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    text-decoration: none;
}

.admin-shell .admin-nav-link.nav-link::before,
.admin-shell .admin-nav-link.nav-link::after {
    display: none !important;
}

.admin-shell .admin-nav-link > i {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: #91a4b7 !important;
    font-size: 13px !important;
}

.admin-shell .admin-nav-link:hover {
    border-color: #283846 !important;
    background: #17222c !important;
    color: #ffffff !important;
}

.admin-shell .admin-nav-link:hover > i {
    background: rgba(37, 99, 235, .15) !important;
    color: #83afff !important;
}

.admin-shell .admin-nav-link.active {
    border-color: #304454 !important;
    background: #1a2732 !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 var(--panel-blue) !important;
}

.admin-shell .admin-nav-link.active > i {
    background: rgba(37, 99, 235, .17) !important;
    color: #8db5ff !important;
}

.admin-shell .panel-nav-badge {
    min-width: 21px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 6px;
    background: #263746;
    color: #dce7f0;
    font-size: 9px;
    font-weight: 850;
}

.admin-shell .admin-sidebar-footer {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid var(--panel-sidebar-line);
    background: #0e151c;
}

.admin-shell .admin-sidebar-user {
    overflow: hidden;
}

.admin-shell .admin-sidebar-user strong,
.admin-shell .admin-sidebar-user span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-shell .admin-sidebar-user strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.admin-shell .admin-sidebar-user span {
    margin-top: 2px;
    color: var(--panel-sidebar-muted);
    font-size: 9px;
}

.admin-shell .admin-sidebar-logout {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--panel-sidebar-line);
    border-radius: 7px;
    background: transparent;
    color: var(--panel-sidebar-muted);
}

.admin-shell .admin-sidebar-logout:hover {
    border-color: rgba(214, 58, 74, .45);
    background: rgba(214, 58, 74, .10);
    color: #ff9ca6;
}

.admin-shell .admin-main-shell.shell {
    width: auto !important;
    min-height: 100dvh !important;
    margin: 0 0 0 var(--panel-sidebar-width) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--panel-bg) !important;
}

.admin-shell .admin-topbar.topbar {
    position: sticky !important;
    z-index: 1020 !important;
    top: 0 !important;
    min-height: var(--panel-topbar-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 10px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--panel-surface) 94%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
}

.admin-shell .admin-topbar-left,
.admin-shell .admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-shell .admin-page-context {
    display: grid;
    gap: 2px;
}

.admin-shell .admin-page-context span {
    color: var(--panel-muted);
    font-size: 10px;
    font-weight: 700;
}

.admin-shell .admin-page-context h1 {
    margin: 0;
    color: var(--panel-heading);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.2;
}

.admin-shell .admin-user-trigger {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: var(--panel-surface);
    color: var(--panel-text);
}

.admin-shell .admin-user-trigger .admin-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.admin-shell .admin-user-trigger strong {
    display: block;
    max-width: 130px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-shell .admin-notification-menu {
    width: min(360px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
}

.admin-shell .admin-content {
    width: 100% !important;
    max-width: 1880px !important;
    min-height: calc(100dvh - var(--panel-topbar-height)) !important;
    margin: 0 auto !important;
    padding: 22px 24px 36px !important;
    overflow: visible !important;
}

.admin-shell .admin-content > * {
    min-width: 0 !important;
    max-width: none !important;
}

.admin-shell .admin-content > .container,
.admin-shell .admin-content > .container-sm,
.admin-shell .admin-content > .container-md,
.admin-shell .admin-content > .container-lg,
.admin-shell .admin-content > .container-xl,
.admin-shell .admin-content > .container-xxl,
.admin-shell .admin-content > .container-fluid,
.admin-shell .admin-content > [class$="-page"],
.admin-shell .admin-content > [class*="-page "],
.admin-shell .admin-content > [class$="-wrap"],
.admin-shell .admin-content > [class*="-wrap "] {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

.admin-shell .admin-content .admin-hero,
.admin-shell .admin-content [class$="-hero"],
.admin-shell .admin-content [class*="-hero "],
.admin-shell .admin-content [class$="-header-wrap"],
.admin-shell .admin-content [class*="-header-wrap "] {
    min-height: 0 !important;
    padding: 4px 0 17px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--panel-text) !important;
}

.admin-shell .admin-content .admin-hero::before,
.admin-shell .admin-content .admin-hero::after,
.admin-shell .admin-content [class$="-hero"]::before,
.admin-shell .admin-content [class$="-hero"]::after,
.admin-shell .admin-content [class*="-hero "]::before,
.admin-shell .admin-content [class*="-hero "]::after {
    display: none !important;
}

.admin-shell .admin-content .admin-hero h1,
.admin-shell .admin-content .admin-hero h2,
.admin-shell .admin-content [class$="-hero"] h1,
.admin-shell .admin-content [class$="-hero"] h2,
.admin-shell .admin-content [class*="-hero "] h1,
.admin-shell .admin-content [class*="-hero "] h2,
.admin-shell .admin-content [class$="-header-wrap"] h1,
.admin-shell .admin-content [class$="-header-wrap"] h2 {
    color: var(--panel-heading) !important;
    font-size: 25px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.admin-shell .admin-content .admin-hero p,
.admin-shell .admin-content [class$="-hero"] p,
.admin-shell .admin-content [class*="-hero "] p,
.admin-shell .admin-content [class$="-header-wrap"] p {
    max-width: 780px !important;
    color: var(--panel-muted) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.admin-shell .admin-content .card,
.admin-shell .admin-content .soft-card,
.admin-shell .admin-content .admin-card,
.admin-shell .admin-content [class$="-card"],
.admin-shell .admin-content [class*="-card "] {
    min-width: 0 !important;
    border: 1px solid var(--panel-line) !important;
    border-radius: 8px !important;
    background: var(--panel-surface) !important;
    box-shadow: var(--panel-shadow) !important;
}

.admin-shell .admin-content .card:hover,
.admin-shell .admin-content .soft-card:hover,
.admin-shell .admin-content .admin-card:hover {
    transform: none !important;
    border-color: var(--panel-line-strong) !important;
    box-shadow: var(--panel-shadow) !important;
}

.admin-shell .admin-content .card-header,
.admin-shell .admin-content [class$="-card-head"],
.admin-shell .admin-content [class*="-card-head "],
.admin-shell .admin-content [class$="-card-header"],
.admin-shell .admin-content [class*="-card-header "],
.admin-shell .admin-content [class$="-table-header"],
.admin-shell .admin-content [class*="-table-header "] {
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--panel-line) !important;
    border-radius: 0 !important;
    background: var(--panel-surface) !important;
}

.admin-shell .admin-content .card-body,
.admin-shell .admin-content [class$="-card-body"],
.admin-shell .admin-content [class*="-card-body "] {
    padding: 16px !important;
}

.admin-shell .admin-content h1,
.admin-shell .admin-content h2,
.admin-shell .admin-content h3,
.admin-shell .admin-content h4,
.admin-shell .admin-content h5,
.admin-shell .admin-content h6 {
    color: var(--panel-heading);
    font-weight: 800;
}

.admin-shell .admin-content .form-label,
.admin-shell .admin-content label:not(.form-check-label) {
    margin-bottom: 6px;
    color: var(--panel-text);
    font-size: 10px;
    font-weight: 800;
}

.admin-shell .admin-content .form-control,
.admin-shell .admin-content .form-select,
.admin-shell .admin-content textarea,
.admin-shell .admin-content input[type="text"],
.admin-shell .admin-content input[type="email"],
.admin-shell .admin-content input[type="number"],
.admin-shell .admin-content input[type="password"],
.admin-shell .admin-content input[type="url"],
.admin-shell .admin-content input[type="search"] {
    min-height: 42px !important;
    border-color: var(--panel-line) !important;
    border-radius: 7px !important;
    background: var(--panel-surface) !important;
    color: var(--panel-text) !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

.admin-shell .admin-content .form-control:focus,
.admin-shell .admin-content .form-select:focus,
.admin-shell .admin-content textarea:focus,
.admin-shell .admin-content input:focus {
    border-color: #7ea7eb !important;
    box-shadow: var(--panel-focus) !important;
}

.admin-shell .admin-content .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 7px !important;
    font-size: 11px;
    font-weight: 800;
}

.admin-shell .admin-content .btn-primary,
.admin-shell .admin-content [class$="-btn-primary"],
.admin-shell .admin-content [class*="-btn-primary "] {
    border-color: var(--panel-blue) !important;
    background: var(--panel-blue) !important;
    color: #ffffff !important;
}

.admin-shell .admin-content .btn-outline-primary,
.admin-shell .admin-content .btn-light,
.admin-shell .admin-content .btn-secondary {
    border-color: var(--panel-line) !important;
    background: var(--panel-surface) !important;
    color: var(--panel-text) !important;
}

.admin-shell .admin-content .table-responsive,
.admin-shell .admin-content [class$="-table-wrap"],
.admin-shell .admin-content [class*="-table-wrap "] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
}

.admin-shell .admin-content .table,
.admin-shell .admin-content table:not([class*="calendar"]) {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

.admin-shell .admin-content .table thead th,
.admin-shell .admin-content table:not([class*="calendar"]) thead th {
    padding: 10px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    background: var(--panel-surface-soft) !important;
    color: var(--panel-muted) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.admin-shell .admin-content .table tbody td,
.admin-shell .admin-content table:not([class*="calendar"]) tbody td {
    padding: 11px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--panel-line) !important;
    background: transparent !important;
    color: var(--panel-text) !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

.admin-shell .admin-content .table tbody tr:hover td,
.admin-shell .admin-content table:not([class*="calendar"]) tbody tr:hover td {
    background: var(--panel-surface-soft) !important;
}

.admin-shell .admin-content .badge,
.admin-shell .admin-content [class$="-badge"],
.admin-shell .admin-content [class*="-badge "] {
    border-radius: 6px !important;
    font-size: 9px !important;
    font-weight: 850 !important;
}

.admin-shell .admin-content .nav-tabs,
.admin-shell .admin-content .nav-pills {
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--panel-line);
    border-radius: 8px;
    background: var(--panel-surface-soft);
}

.admin-shell .admin-content .nav-tabs .nav-link,
.admin-shell .admin-content .nav-pills .nav-link {
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    color: var(--panel-muted);
    font-size: 10px;
    font-weight: 800;
}

.admin-shell .admin-content .nav-tabs .nav-link.active,
.admin-shell .admin-content .nav-pills .nav-link.active {
    background: var(--panel-surface);
    color: var(--panel-blue);
    box-shadow: 0 1px 4px rgba(22, 34, 51, .08);
}

.admin-shell .admin-content .pagination {
    gap: 4px;
    flex-wrap: wrap;
}

.admin-shell .admin-content .page-link {
    min-width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    border-color: var(--panel-line);
    border-radius: 6px !important;
    background: var(--panel-surface);
    color: var(--panel-text);
    font-size: 10px;
}

.admin-shell .admin-content .active > .page-link,
.admin-shell .admin-content .page-link.active {
    border-color: var(--panel-blue);
    background: var(--panel-blue);
    color: #ffffff;
}

.admin-shell .admin-content .alert {
    border-width: 1px;
    border-radius: 8px !important;
    font-size: 11px;
}

/* Client dashboard */
.client-shell .client-workspace {
    width: 100%;
    display: grid;
    gap: 15px;
    color: var(--panel-text);
}

.client-shell .cw-overview {
    min-height: 190px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 24px !important;
    padding: 24px !important;
    border: 1px solid #263b4c !important;
    border-radius: 8px !important;
    background-color: #101a24 !important;
    background-position: right center !important;
    background-size: cover !important;
    box-shadow: 0 14px 34px rgba(12, 24, 37, .16) !important;
}

.client-shell .cw-overview::before {
    display: block !important;
    background: linear-gradient(90deg, rgba(10, 21, 31, .97) 0%, rgba(10, 24, 35, .91) 58%, rgba(10, 24, 35, .58) 100%) !important;
}

.client-shell .cw-overview::after {
    display: block !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--panel-green) 0 34%, var(--panel-blue) 34% 70%, var(--panel-orange) 70%) !important;
    box-shadow: none !important;
}

.client-shell .cw-eyebrow {
    color: #67ddbb !important;
    font-size: 10px !important;
}

.client-shell .cw-overview h1 {
    margin: 9px 0 7px !important;
    font-size: 27px !important;
    font-weight: 880 !important;
}

.client-shell .cw-overview p {
    max-width: 690px !important;
    color: #b7c5d2 !important;
    font-size: 12px !important;
}

.client-shell .cw-overview-signals {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 680px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.client-shell .cw-overview-signal {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 13px 16px 0;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.client-shell .cw-overview-signal:first-child {
    padding-left: 0;
}

.client-shell .cw-overview-signal:last-child {
    border-right: 0;
}

.client-shell .cw-overview-signal > i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    color: #77e1c4;
    font-size: 11px;
}

.client-shell .cw-overview-signal small,
.client-shell .cw-overview-signal strong {
    display: block;
}

.client-shell .cw-overview-signal small {
    color: #8398aa;
    font-size: 9px;
    font-weight: 750;
}

.client-shell .cw-overview-signal strong {
    margin-top: 2px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.client-shell .cw-btn {
    min-height: 40px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}

.client-shell .cw-kpi-grid {
    gap: 12px !important;
}

.client-shell .cw-kpi {
    min-height: 132px !important;
    padding: 16px !important;
    border-color: var(--panel-line) !important;
    border-radius: 8px !important;
    background: var(--panel-surface) !important;
    box-shadow: var(--panel-shadow) !important;
}

.client-shell .cw-kpi::before {
    height: 3px !important;
}

.client-shell .cw-kpi-label {
    color: var(--panel-muted) !important;
    font-size: 9px !important;
}

.client-shell .cw-kpi-value {
    color: var(--panel-heading) !important;
    font-size: 22px !important;
}

.client-shell .cw-kpi-note {
    margin-top: 17px !important;
    color: var(--panel-muted) !important;
    font-size: 10px !important;
}

.client-shell .cw-kpi-note strong {
    color: var(--panel-heading) !important;
}

.client-shell .cw-panel,
.client-shell .cw-resource-band {
    border-color: var(--panel-line) !important;
    border-radius: 8px !important;
    background: var(--panel-surface) !important;
    box-shadow: var(--panel-shadow) !important;
}

.client-shell .cw-panel-head {
    min-height: 58px !important;
    padding: 13px 16px !important;
    border-color: var(--panel-line) !important;
}

.client-shell .cw-panel-title {
    color: var(--panel-heading) !important;
    font-size: 12px !important;
}

.client-shell .cw-panel-subtitle,
.client-shell .cw-cell-label,
.client-shell .cw-service-meta,
.client-shell .cw-renewal-note,
.client-shell .cw-activity-note,
.client-shell .cw-wallet-main span {
    color: var(--panel-muted) !important;
}

.client-shell .cw-chart-summary,
.client-shell .cw-chart-stat,
.client-shell .cw-service-row,
.client-shell .cw-wallet-row,
.client-shell .cw-renewal,
.client-shell .cw-action {
    border-color: var(--panel-line) !important;
}

.client-shell .cw-service-row,
.client-shell .cw-renewal,
.client-shell .cw-action,
.client-shell .cw-quick-link {
    color: var(--panel-text) !important;
}

.client-shell .cw-service-row:hover,
.client-shell .cw-renewal:hover,
.client-shell .cw-action:hover,
.client-shell .cw-quick-link:hover {
    background: var(--panel-surface-soft) !important;
}

.client-shell .cw-service-title,
.client-shell .cw-cell strong,
.client-shell .cw-renewal-title,
.client-shell .cw-activity-title,
.client-shell .cw-wallet-main strong,
.client-shell .cw-quick-link span {
    color: var(--panel-heading) !important;
}

.client-shell .cw-resource-intro {
    background: #111a24 !important;
}

.client-shell .cw-chart-frame {
    height: 270px !important;
}

/* Admin dashboard */
.admin-shell .ops-dash {
    --op-surface: var(--panel-surface) !important;
    --op-soft: var(--panel-surface-soft) !important;
    --op-line: var(--panel-line) !important;
    --op-ink: var(--panel-heading) !important;
    --op-muted: var(--panel-muted) !important;
    gap: 14px !important;
}

.admin-shell .op-command {
    padding: 24px !important;
    border-color: #293e50 !important;
    border-radius: 8px !important;
    background: #101820 !important;
    background-image: linear-gradient(118deg, #101820 0%, #112938 55%, #183329 100%) !important;
    box-shadow: 0 14px 34px rgba(12, 24, 37, .17) !important;
}

.admin-shell .op-command::before {
    opacity: .55 !important;
}

.admin-shell .op-command h1 {
    font-size: 29px !important;
    font-weight: 880 !important;
}

.admin-shell .op-command p {
    font-size: 12px !important;
}

.admin-shell .op-kpis,
.admin-shell .op-risk-grid,
.admin-shell .op-main,
.admin-shell .op-analytics,
.admin-shell .op-config-grid,
.admin-shell .op-content,
.admin-shell .op-bottom {
    gap: 12px !important;
}

.admin-shell .op-kpi,
.admin-shell .op-risk,
.admin-shell .op-card {
    border-color: var(--panel-line) !important;
    border-radius: 8px !important;
    background: var(--panel-surface) !important;
    box-shadow: var(--panel-shadow) !important;
}

.admin-shell .op-kpi:hover {
    border-color: var(--panel-line-strong) !important;
    box-shadow: var(--panel-shadow-raised) !important;
}

.admin-shell .op-kpi-value,
.admin-shell .op-risk strong,
.admin-shell .op-card-title,
.admin-shell .op-health-center strong,
.admin-shell .op-legend-row strong,
.admin-shell .op-config-title,
.admin-shell .op-order-name,
.admin-shell .op-customer strong,
.admin-shell .op-side-title,
.admin-shell .op-side-value {
    color: var(--panel-heading) !important;
}

.admin-shell .op-kpi-label,
.admin-shell .op-kpi-note,
.admin-shell .op-risk span,
.admin-shell .op-card-sub,
.admin-shell .op-health-row span,
.admin-shell .op-legend-row span,
.admin-shell .op-config-note,
.admin-shell .op-customer span,
.admin-shell .op-order-meta,
.admin-shell .op-side-note,
.admin-shell .op-empty {
    color: var(--panel-muted) !important;
}

.admin-shell .op-card-head,
.admin-shell .op-table th,
.admin-shell .op-table td,
.admin-shell .op-side-row,
.admin-shell .op-gateway,
.admin-shell .op-config {
    border-color: var(--panel-line) !important;
}

.admin-shell .op-table th {
    background: var(--panel-surface-soft) !important;
}

.admin-shell .op-table td {
    color: var(--panel-text) !important;
}

.admin-shell .op-quick a {
    border-color: var(--panel-line) !important;
    background: var(--panel-surface) !important;
    color: var(--panel-heading) !important;
}

.admin-shell .op-quick a:hover {
    border-color: var(--panel-line-strong) !important;
    background: var(--panel-surface-soft) !important;
}

/* Dark component corrections */
[data-theme="dark"] .client-shell .cp-badge-active,
[data-theme="dark"] .client-shell .cp-badge-approved,
[data-theme="dark"] .client-shell .cp-badge-paid,
[data-theme="dark"] .client-shell .cp-badge-open,
[data-theme="dark"] .client-shell .cp-badge-success,
[data-theme="dark"] .client-shell .cp-badge-answered {
    border-color: #235b49 !important;
    background: #112d24 !important;
    color: #72e5c2 !important;
}

[data-theme="dark"] .client-shell .cp-badge-unpaid,
[data-theme="dark"] .client-shell .cp-badge-overdue,
[data-theme="dark"] .client-shell .cp-badge-pending,
[data-theme="dark"] .client-shell .cp-badge-awaiting_payment,
[data-theme="dark"] .client-shell .cp-badge-provisioning {
    border-color: #66451f !important;
    background: #302315 !important;
    color: #f0ad6d !important;
}

[data-theme="dark"] .client-shell .cp-badge-suspended,
[data-theme="dark"] .client-shell .cp-badge-cancelled,
[data-theme="dark"] .client-shell .cp-badge-failed,
[data-theme="dark"] .client-shell .cp-badge-danger,
[data-theme="dark"] .client-shell .cp-badge-urgent {
    border-color: #6a3039 !important;
    background: #321a20 !important;
    color: #ff9ca6 !important;
}

[data-theme="dark"] .client-shell .cp-badge-info {
    border-color: #2d4c79 !important;
    background: #172a45 !important;
    color: #8db5ff !important;
}

[data-theme="dark"] .client-shell .cp-option:hover,
[data-theme="dark"] .client-shell .cp-choice:hover,
[data-theme="dark"] .client-shell .cp-option:has(input:checked),
[data-theme="dark"] .client-shell .cp-choice:has(input:checked) {
    background: #14243a !important;
}

/* Responsive shell and page behavior */
@media (max-width: 1280px) {
    .panel-command-trigger {
        min-width: 190px;
    }

    .client-shell .client-content.content,
    .admin-shell .admin-content {
        padding-inline: 18px !important;
    }

    .client-shell .cw-main-grid,
    .client-shell .cw-content-grid,
    .client-shell .cw-bottom-grid,
    .admin-shell .op-main,
    .admin-shell .op-config-grid,
    .admin-shell .op-content {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1100px) {
    .panel-command-trigger {
        width: 40px;
        min-width: 40px;
        justify-content: center;
        padding: 0;
    }

    .panel-command-trigger > span,
    .panel-command-trigger kbd {
        display: none;
    }

    .client-shell .client-wallet-chip span {
        display: none;
    }

    .admin-shell .op-analytics,
    .client-shell .cw-analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    :root {
        --panel-topbar-height: 64px;
    }

    .panel-sidebar-close {
        display: grid;
    }

    .client-shell .app-sidebar.client-sidebar,
    .admin-shell .admin-sidebar.sidebar {
        display: flex !important;
        width: min(86vw, 310px) !important;
        transform: translateX(-102%) !important;
        transition: transform .22s ease !important;
        box-shadow: 18px 0 50px rgba(0, 0, 0, .25) !important;
    }

    .client-shell .app-sidebar.client-sidebar.is-open,
    .admin-shell .admin-sidebar.sidebar.is-open {
        transform: translateX(0) !important;
    }

    .client-shell .client-main.app-main,
    .admin-shell .admin-main-shell.shell {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .client-shell .client-topbar.topbar,
    .admin-shell .admin-topbar.topbar {
        padding-inline: 14px !important;
    }

    .client-shell .client-content.content,
    .admin-shell .admin-content {
        padding: 16px 14px 28px !important;
    }

    .client-shell .client-announcement {
        margin-inline: 14px;
    }

    .client-shell .client-impersonation {
        padding-inline: 14px;
    }

    .client-shell .cw-kpi-grid,
    .admin-shell .op-kpis,
    .admin-shell .op-risk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .client-shell .cp-span-2,
    .client-shell .cp-span-3,
    .client-shell .cp-span-4 {
        grid-column: span 6 !important;
    }

    .client-shell .cp-span-5,
    .client-shell .cp-span-7,
    .client-shell .cp-span-8,
    .client-shell .cp-span-9,
    .client-shell .cp-span-10 {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 767.98px) {
    .client-shell .client-page-context span,
    .admin-shell .admin-page-context span,
    .client-shell .client-wallet-chip,
    .client-shell .client-user-trigger strong,
    .admin-shell .admin-user-trigger strong {
        display: none;
    }

    .client-shell .client-topbar-actions,
    .admin-shell .admin-topbar-actions {
        gap: 6px;
    }

    .client-shell .cp-hero,
    .admin-shell .admin-content .admin-hero,
    .admin-shell .admin-content [class$="-hero"],
    .admin-shell .admin-content [class*="-hero "] {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .client-shell .cp-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .client-shell .cp-title,
    .admin-shell .admin-content .admin-hero h1,
    .admin-shell .admin-content .admin-hero h2,
    .admin-shell .admin-content [class$="-hero"] h1,
    .admin-shell .admin-content [class$="-hero"] h2,
    .admin-shell .admin-content [class*="-hero "] h1,
    .admin-shell .admin-content [class*="-hero "] h2 {
        font-size: 22px !important;
    }

    .client-shell .cp-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .client-shell .cp-toolbar form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .client-shell .cw-overview {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .client-shell .cw-overview-actions {
        justify-content: flex-start !important;
    }

    .client-shell .cw-overview-signals {
        max-width: none;
    }

    .client-shell .cw-overview-signal {
        flex: 1 1 0;
    }

    .client-shell .cw-overview-signal strong {
        white-space: normal;
    }

    .client-shell .cw-resource-band {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .client-shell .cw-resource-intro {
        grid-column: 1 / -1 !important;
    }

    .admin-shell .op-command-main {
        display: block !important;
    }

    .admin-shell .op-command-actions {
        justify-content: flex-start !important;
        margin-top: 16px !important;
    }

    .admin-shell .op-command-strip,
    .admin-shell .op-analytics,
    .admin-shell .op-bottom,
    .client-shell .cw-analytics-grid {
        grid-template-columns: 1fr !important;
    }

    .client-shell .client-announcement,
    .client-shell .client-impersonation {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .client-shell .client-topbar.topbar,
    .admin-shell .admin-topbar.topbar {
        min-height: 60px !important;
        padding: 8px 10px !important;
    }

    .panel-icon-button,
    .panel-command-trigger {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        min-width: 38px;
    }

    .client-shell .client-topbar-actions > .panel-command-trigger,
    .admin-shell .admin-topbar-actions > .panel-command-trigger,
    .admin-shell .admin-quick-create,
    .admin-shell .admin-storefront-link {
        display: none !important;
    }

    .client-shell-guest .client-topbar-actions [data-panel-theme-toggle] {
        display: none !important;
    }

    .client-shell .client-page-context h1,
    .admin-shell .admin-page-context h1 {
        max-width: 130px;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .client-shell .client-content.content,
    .admin-shell .admin-content {
        padding: 13px 10px 24px !important;
    }

    .client-shell .client-announcement {
        margin: 10px 10px 0;
    }

    .client-shell .client-impersonation {
        padding: 10px;
    }

    .client-shell .cp-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .client-shell .cp-span-2,
    .client-shell .cp-span-3,
    .client-shell .cp-span-4,
    .client-shell .cp-span-5,
    .client-shell .cp-span-6,
    .client-shell .cp-span-7,
    .client-shell .cp-span-8,
    .client-shell .cp-span-9,
    .client-shell .cp-span-10,
    .client-shell .cp-span-12 {
        grid-column: 1 / -1 !important;
    }

    .client-shell .cp-actions .cp-btn {
        flex: 1 1 150px !important;
    }

    .client-shell .cp-card-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .client-shell .cp-card-pad {
        padding: 13px !important;
    }

    .client-shell .cp-stat {
        min-height: 105px !important;
    }

    .client-shell .cp-filterbar {
        width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }

    .client-shell .cp-filter {
        flex: 0 0 auto !important;
    }

    .client-shell .cw-kpi-grid,
    .admin-shell .op-kpis,
    .admin-shell .op-risk-grid {
        grid-template-columns: 1fr !important;
    }

    .client-shell .cw-overview {
        padding: 19px !important;
    }

    .client-shell .cw-overview h1,
    .admin-shell .op-command h1 {
        font-size: 23px !important;
    }

    .client-shell .cw-overview-actions .cw-btn,
    .admin-shell .op-command-actions .op-btn {
        width: 100% !important;
    }

    .client-shell .cw-overview-signals {
        display: grid;
        grid-template-columns: 1fr;
    }

    .client-shell .cw-overview-signal {
        padding: 10px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }

    .client-shell .cw-overview-signal:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .client-shell .cw-resource-band {
        grid-template-columns: 1fr !important;
    }

    .client-shell .cw-resource-stat {
        border-right: 0 !important;
        border-bottom: 1px solid var(--panel-line) !important;
    }

    .client-shell .cw-resource-stat:last-child {
        border-bottom: 0 !important;
    }

    .client-shell .cw-chart-frame,
    .admin-shell .op-chart-frame {
        height: 230px !important;
    }

    .panel-command-modal .modal-dialog {
        margin: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.client-shell *,
    body.client-shell *::before,
    body.client-shell *::after,
    body.admin-shell *,
    body.admin-shell *::before,
    body.admin-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}