/* Admin console: neutral surfaces and black/white actions, scoped to this app. */
html.admin-console-theme[data-theme="light"] {
    --topbar-h: 80px;
    --sidebar-w: clamp(280px, 20vw, 384px);
    --content-max: none;
    --canvas: #f8f9fb;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f6f8fb;
    --surface-hover: #eff3fa;
    --surface-active: #e7eefc;
    --chrome: rgba(255,255,255,.96);
    --text: #333333;
    --text-strong: #333333;
    --text-muted: #666666;
    --text-subtle: #777d89;
    --border: #e3e8f0;
    --border-strong: #cbd4e2;
    --field-bg: #ffffff;
    --field-bg-focus: #ffffff;
    --track: #e3e8f0;
    --accent: #0752e0;
    --accent-hover: #0647c3;
    --accent-text: #ffffff;
    --accent-soft: #edf4ff;
    --accent-line: #adc5f6;
    --on-accent-muted: #0752e0;
    --ring: 0 0 0 3px rgba(7,82,224,.18);
    --e-1: none;
    --e-2: 0 8px 24px rgba(14,16,14,.08);
    --e-3: 0 16px 42px rgba(14,16,14,.12);
    --mesh-1: transparent;
    --mesh-2: transparent;
    --mesh-3: transparent;
    --glow-accent: none;
    --edge-top: none;
    --edge-top-strong: none;
}

html.admin-console-theme[data-theme="dark"] {
    --topbar-h: 80px;
    --sidebar-w: clamp(280px, 20vw, 384px);
    --content-max: none;
    --canvas: #0c0d0c;
    --surface: #151715;
    --surface-raised: #1b1d1b;
    --surface-sunken: #111311;
    --surface-hover: #222522;
    --surface-active: #292c29;
    --chrome: rgba(16,18,16,.96);
    --text: #e7e9e5;
    --text-strong: #ffffff;
    --text-muted: #b4b9b2;
    --text-subtle: #9aa199;
    --border: #303430;
    --border-strong: #515751;
    --field-bg: #1b1e1b;
    --field-bg-focus: #242824;
    --track: #343834;
    --accent: #4f88f4;
    --accent-hover: #71a0fb;
    --accent-text: #ffffff;
    --accent-soft: #2c302c;
    --accent-line: #626862;
    --on-accent-muted: #f4f5f2;
    --ring: 0 0 0 3px rgba(244,245,242,.2);
    --e-1: none;
    --e-2: 0 8px 24px rgba(0,0,0,.2);
    --e-3: 0 16px 42px rgba(0,0,0,.3);
    --mesh-1: transparent;
    --mesh-2: transparent;
    --mesh-3: transparent;
    --glow-accent: none;
    --edge-top: none;
    --edge-top-strong: none;
}

html.admin-console-theme body.admin-console {
    letter-spacing: 0;
    font-size: 14px;
}

body.admin-console .navbar,
body.admin-console .panel-sidebar {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: none;
}

body.admin-console .navbar { padding: 0 32px; }
body.admin-console .admin-brand-image { display: block; width: 199px; height: 72px; object-fit: contain; }
body.admin-console .nav-context { position: absolute; left: calc(var(--sidebar-w) + 32px); font-size: 14px; }
body.admin-console .nav-context::before { display: none; }
body.admin-console .nav-context strong { font-weight: 500; }
body.admin-console .navbar .user-avatar,
body.admin-console .sidebar-user .user-avatar { background: #0752e0; color: #fff; }
body.admin-console .sidebar-toggle,
body.admin-console #theme-toggle { display: none; }

body.admin-console .panel-sidebar {
    padding: 32px 24px 24px;
    background: #19152f;
    color: #a6a4b8;
    border-color: #19152f;
}

body.admin-console .panel-sidebar .panel-title,
body.admin-console .panel-sidebar > .sidebar-search { display: none; }

body.admin-console .panel-sidebar .nav-group-label { padding: 0; margin: 0 0 24px; color: #aaa8ba; font-size: 12px; font-weight: 500; }
body.admin-console .panel-sidebar .nav-group { gap: 8px; margin-bottom: 36px; }
body.admin-console .panel-sidebar .panel-nav a { color: #aaa8ba; }
body.admin-console .panel-sidebar .panel-nav a:hover { color: #fff; background: #272342; }
body.admin-console .panel-sidebar .panel-nav a.is-active { color: #fff; background: linear-gradient(90deg, #0752e0, #171c46); }
body.admin-console .panel-sidebar .panel-nav a.is-active::before { left: 0; top: 0; height: 100%; width: 4px; transform: none; border-radius: 10px 0 0 10px; background: #36c7f2; }
body.admin-console .panel-sidebar .sidebar-footer { border-color: #302b49; }
body.admin-console .panel-sidebar .sidebar-user { border: 0; background: transparent; box-shadow: none; }
body.admin-console .panel-sidebar .sidebar-user-info strong { color: #fff; }
body.admin-console .panel-sidebar .sidebar-user-info span { color: #aaa8ba; }

body.admin-console .panel-title {
    color: var(--text-strong);
    font-size: .72rem;
    letter-spacing: .13em;
    margin: .2rem 0 1.2rem;
}

body.admin-console .nav-group-label {
    margin-top: .65rem;
    color: var(--text-subtle);
}

body.admin-console .panel-nav a {
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

body.admin-console .panel-nav a.is-active {
    color: var(--text-strong);
    background: var(--accent-soft);
}

body.admin-console .panel-nav a.is-active::before { background: var(--accent); }

body.admin-console .panel-content {
    padding: 32px;
}

body.admin-console .panel-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

body.admin-console .panel-header::after { display: none; }

body.admin-console .panel-header h2 {
    color: var(--text-strong);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.admin-console .panel-header .subtitle {
    color: var(--text-muted);
    font-size: 14px;
}

body.admin-console .dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
body.admin-console .dashboard-stats .stat-card { min-height: 120px; padding: 24px; border-radius: 12px; }
body.admin-console .dashboard-stats .stat-card:nth-child(6) { grid-column: 1 / span 2; grid-row: 2; background: #eef4fd; border-color: #adc5f6; }
body.admin-console .dashboard-stats .stat-card:nth-child(5) { grid-column: 3 / span 2; grid-row: 2; }
body.admin-console .dashboard-stats .stat-card h3 { font-size: 12px; font-weight: 500; letter-spacing: 0; color: #666; }
body.admin-console .dashboard-stats .stat-value { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
body.admin-console .dashboard-stats .stat-card:nth-child(6) .stat-value { color: #0752e0; }
body.admin-console .dashboard-stats .stat-ic { width: 44px; height: 44px; }
body.admin-console .dashboard-stats .stat-ic svg { width: 22px; height: 22px; }
body.admin-console .dashboard-stats .stat-card:nth-child(6) .stat-ic { background: transparent; }
body.admin-console .dashboard-stats .stat-card:nth-child(6) .stat-ic svg { color: #0752e0; }
body.admin-console .dashboard-stats .free-tier { color: #0752e0; }
body.admin-console .panel-header .page-head-actions .btn-secondary {
    background: #0752e0;
    border-color: #0752e0;
    color: #ffffff;
    min-height: 40px;
    padding: 0 24px;
    font-weight: 500;
}
body.admin-console .panel-header .page-head-actions .btn-secondary:hover { background: #0647c3; }
body.admin-console .dashboard-stats + .panel-section { margin-top: 0; }
body.admin-console .dashboard-stats + .panel-section h3 { text-align: left; font-size: 18px; font-weight: 600; margin-bottom: 16px; }
body.admin-console .dashboard-stats + .panel-section .table-wrap { border: 0; border-radius: 0; }
body.admin-console .data-table { font-size: 14px; }
body.admin-console .data-table thead th { height: 44px; padding: 10px 16px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: #666; }
body.admin-console .data-table tbody td { height: 68px; padding: 16px; color: #555; }

body.admin-console .detail-grid { grid-template-columns: minmax(265px, 320px) minmax(0, 1fr); gap: 1.25rem; }

body.admin-console :is(.detail-summary, .detail-form, .manage-section, .panel-section, .stat-card, .table-wrap) {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: none;
}

body.admin-console :is(.detail-summary, .detail-form, .manage-section, .panel-section) { padding: clamp(1.25rem, 1.6vw, 1.8rem); }

body.admin-console .detail-summary { text-align: left; }
body.admin-console .detail-summary .avatar { margin: 0 0 .9rem; }
body.admin-console .detail-summary .summary-name { font-size: 1.15rem; }
body.admin-console .detail-summary .summary-email { color: var(--text-muted); }
body.admin-console .detail-summary .summary-meta li { gap: .75rem; }
body.admin-console .detail-summary .summary-meta li strong { text-align: right; overflow-wrap: anywhere; }

body.admin-console .avatar,
body.admin-console .user-avatar,
body.admin-console .brand-mark {
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: none;
}

body.admin-console .form-section-title {
    color: var(--text-strong);
    font-size: 1rem;
    letter-spacing: -.02em;
}

body.admin-console :is(.detail-form input, .detail-form select, .sidebar-search) {
    border-color: var(--border-strong);
    background: var(--field-bg);
    color: var(--text);
}

body.admin-console :is(.detail-form input, .detail-form select):focus-visible {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

body.admin-console input[type="checkbox"] { accent-color: var(--accent); }

body.admin-console :is(.btn-primary, .btn-approve) {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: none;
}

body.admin-console :is(.btn-primary, .btn-approve):hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: none;
}

body.admin-console :is(.btn-secondary, .icon-btn) {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

body.admin-console :is(.btn-secondary, .icon-btn):hover { background: var(--surface-hover); }

body.admin-console :is(.data-table th, .table-toolbar) {
    background: var(--surface-sunken);
    color: var(--text-muted);
}

body.admin-console .data-table tbody tr:hover { background: var(--surface-hover); }
body.admin-console .stat-card:hover { border-color: var(--border-strong); box-shadow: none; }
body.admin-console .tilt-scope .stat-card.tilt:hover { transform: none; }
body.admin-console .stat-ic { background: var(--accent-soft); color: var(--text-strong); }
body.admin-console .stat-ic { color: var(--accent); border: 0; }
body.admin-console .stat-card:hover .stat-ic,
body.admin-console .meter-fill { box-shadow: none; }
body.admin-console :is(.panel-section, .manage-section):hover { box-shadow: none; }
body.admin-console .panel-nav a.is-active::before { box-shadow: none; }

/* Admin navigation must stay visible even if a reveal animation stalls. */
body.admin-console :is(.panel-nav a, .panel-header, .stat-card, .panel-section, .manage-section, .data-table tbody tr) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
@media (min-width: 1025px) {
    body.admin-console .panel-sidebar {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}
body.admin-console :is(.client-link, .table-link, .back-link) { color: var(--text-strong); text-decoration-color: var(--border-strong); }
body.admin-console :is(.client-link, .table-link, .back-link):hover { text-decoration: underline; }
body.admin-console .meter-fill { background: var(--accent); }
body.admin-console .premium-status-card { box-shadow: none; }

html.admin-console-theme[data-theme="dark"] body.admin-console .admin-brand-image {
    background: #fff;
    border-radius: 8px;
}

@media (max-width: 1024px) {
    body.admin-console .panel-sidebar { transform: translateX(-100%) !important; }
    body.admin-console .is-collapsed .panel-sidebar { transform: translateX(0) !important; }
    body.admin-console .detail-grid { grid-template-columns: 1fr; }
    body.admin-console .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.admin-console .dashboard-stats .stat-card:nth-child(5),
    body.admin-console .dashboard-stats .stat-card:nth-child(6) { grid-column: auto / span 2; grid-row: auto; }
    body.admin-console .sidebar-toggle { display: inline-grid; }
    body.admin-console .nav-context { position: static; }
}

@media (max-width: 600px) {
    body.admin-console .navbar { padding: 0 16px; }
    body.admin-console .panel-content { padding: 20px 16px; }
    body.admin-console .dashboard-stats { gap: 12px; }
    body.admin-console .dashboard-stats .stat-card { padding: 16px; }
    body.admin-console .dashboard-stats .stat-card:nth-child(-n+4) { grid-column: auto / span 2; }
    body.admin-console .nav-context { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.admin-console .stat-card,
    body.admin-console .panel-nav a { transition: none; }
}

/* Match the admin workspace proportions and compact visual scale in Figma. */
html.admin-console-theme[data-theme="light"],
html.admin-console-theme[data-theme="dark"] {
    --topbar-h: 72px;
    --sidebar-w: 304px;
    --content-max: none;
}

body.admin-console {
    color: #333333;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

body.admin-console .navbar {
    min-height: var(--topbar-h);
    padding-inline: 32px;
}

body.admin-console .admin-brand-image {
    width: 207px;
    height: 72px;
}

body.admin-console .nav-context {
    left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2);
    transform: translateX(-50%);
    font-size: 14px;
}

body.admin-console .panel-sidebar {
    padding: 28px 16px 20px;
}

body.admin-console .panel-sidebar .nav-group-label {
    margin-bottom: 16px;
    padding-inline: 8px;
    font-size: 11px;
    line-height: 1.4;
}

body.admin-console .panel-sidebar .nav-group {
    gap: 4px;
    margin-bottom: 28px;
}

body.admin-console .panel-sidebar .panel-nav a {
    min-height: 48px;
    padding: 12px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

body.admin-console .panel-sidebar .panel-nav a svg {
    width: 16px;
    height: 16px;
}

body.admin-console .panel-content {
    padding: 32px 40px 48px;
}

body.admin-console .panel-header {
    margin-bottom: 20px;
    padding-bottom: 0;
    border: 0;
}

body.admin-console .panel-header h2 {
    margin: 0;
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

body.admin-console .panel-header .subtitle {
    margin-top: 2px;
    color: #666666;
    font-size: 12px;
    line-height: 1.5;
}

body.admin-console .panel-header .back-link {
    margin-bottom: 8px;
    color: #666666;
    font-size: 12px;
}

body.admin-console :is(.detail-summary, .detail-form, .manage-section, .panel-section, .stat-card, .table-wrap, .chat-panel) {
    border-color: #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body.admin-console :is(.detail-summary, .detail-form, .manage-section, .panel-section, .chat-panel) {
    padding: 20px;
}

body.admin-console .manage-section,
body.admin-console .chat-panel {
    margin-bottom: 24px;
}

body.admin-console .form-section-title {
    margin-bottom: 8px;
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

body.admin-console .manage-section > .subtitle {
    margin-bottom: 16px;
    color: #666666;
    font-size: 12px;
    line-height: 1.5;
}

body.admin-console .field-grid {
    gap: 12px;
}

body.admin-console .form-group label,
body.admin-console .detail-form label {
    color: #666666;
    font-size: 12px;
    font-weight: 500;
}

body.admin-console :is(.detail-form input, .detail-form select, .detail-form textarea) {
    min-height: 40px;
    padding: 9px 11px;
    border-color: #e3e8ef;
    border-radius: 6px;
    background: #f8f9fb;
    color: #333333;
    font-size: 13px;
}

body.admin-console .form-actions {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e3e8ef;
}

body.admin-console .btn-primary,
body.admin-console .btn-secondary,
body.admin-console .btn-danger {
    min-height: 36px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
}

body.admin-console .btn-primary {
    padding: 8px 14px;
    background: #0752e0;
    border-color: #0752e0;
}

body.admin-console .detail-summary .avatar {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    background: #eff5ff;
    color: #0752e0;
    font-size: 18px;
}

body.admin-console .detail-summary .summary-name {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
}

body.admin-console .detail-summary .summary-email {
    margin-bottom: 18px;
    color: #666666;
    font-size: 12px;
}

body.admin-console .detail-summary .summary-meta li {
    gap: 10px;
    padding: 8px 0;
    border-color: #edf0f4;
    font-size: 12px;
}

body.admin-console .detail-summary .summary-meta span { color: #777d89; }
body.admin-console .detail-summary .summary-meta li strong { color: #333333; font-weight: 500; }

body.admin-console .detail-summary .plan-usage { margin-top: 18px !important; }
body.admin-console .detail-summary .meter { margin-bottom: 16px; }
body.admin-console .detail-summary .meter-head { font-size: 12px; }

body.admin-console .client-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.47fr) minmax(300px, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

body.admin-console .client-overview-grid > .chat-panel,
body.admin-console .client-overview-grid > .detail-summary {
    min-width: 0;
    min-height: 834px;
    margin: 0;
}

body.admin-console .client-overview-grid > .chat-panel {
    display: flex;
    flex-direction: column;
}

body.admin-console .chat-panel .form-section-title { margin-bottom: 12px; }

body.admin-console .chat-thread {
    flex: 1;
    min-height: 360px;
    max-height: none;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 6px;
    background: #f8f9fb;
}

body.admin-console .chat-form textarea {
    min-height: 44px;
    border-color: #e3e8ef;
    border-radius: 6px;
    background: #ffffff;
    font-size: 13px;
}

body.admin-console .edit-details-section {
    width: 100%;
}

body.admin-console .data-table {
    font-size: 12px;
}

body.admin-console .data-table thead th {
    height: 36px;
    padding: 8px 12px;
    background: #f8f9fb;
    color: #666666;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

body.admin-console .data-table tbody td {
    height: 48px;
    padding: 10px 12px;
    color: #444444;
}

body.admin-console .premium-status-card {
    border-radius: 6px;
    background: #eaf7f0;
}

@media (max-width: 1200px) and (min-width: 1025px) {
    body.admin-console .panel-content { padding-inline: 28px; }
    body.admin-console .client-overview-grid { grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); }
}

@media (max-width: 1024px) {
    body.admin-console .panel-content { padding: 24px; }
    body.admin-console .client-overview-grid { grid-template-columns: minmax(0, 1fr); }
    body.admin-console .client-overview-grid > .chat-panel,
    body.admin-console .client-overview-grid > .detail-summary { min-height: 0; }
    body.admin-console .chat-thread { min-height: 320px; }
}

@media (max-width: 600px) {
    body.admin-console .panel-content { padding: 20px 16px 32px; }
    body.admin-console .panel-header h2 { font-size: 21px; }
    body.admin-console .client-overview-grid > .chat-panel,
    body.admin-console .client-overview-grid > .detail-summary,
    body.admin-console :is(.detail-form, .manage-section, .chat-panel) { padding: 16px; }
    body.admin-console .nav-context { display: none; }
}

/* =========================================================================
   Figma sync — admin dashboard (ChatBIQ, node 3:3148)
   -------------------------------------------------------------------------
   This file already carried an approximation of the admin console. The block
   below pins the values to the ones measured in the frame, so where the two
   disagreed (sidebar #19152f vs #1a1632, rail accent #36c7f2 vs #52e3fa,
   72px topbar vs 80px, 304px rail vs 382px) the design wins.

   It is last in the file on purpose: the rules above set the same properties,
   and these are deliberately the ones that take effect. Everything stays under
   body.admin-console, so the client console cannot see any of it.
   ========================================================================= */

/* --- Shell metrics ------------------------------------------------------ */
html.admin-console-theme body.admin-console {
    --topbar-h: 80px;
    --sidebar-w: 382px;
    --content-max: none;
    --border: #e3e8f0;
    --accent: #0752e0;
    --accent-soft: #f0f6fe;
    --accent-line: #adc5f6;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
}

/* --- Application header: 80px, white, hairline rule --------------------- */
body.admin-console .navbar {
    height: 80px;
    padding: 0 21px;
    background: #ffffff;
    border-bottom: 1px solid #e3e8f0;
    box-shadow: none;
}

body.admin-console .nav-context {
    left: calc(var(--sidebar-w) + 40px);
    font-size: 14px;
    color: #666666;
}

body.admin-console .nav-context strong {
    font-weight: 500;
    color: #666666;
}

/* --- Sidebar ------------------------------------------------------------ */
body.admin-console .panel-sidebar {
    width: var(--sidebar-w);
    padding: 30px 24px;
    background: #1a1632;
    border-color: #1a1632;
    color: #aaa7b8;
}

body.admin-console .panel-sidebar .nav-group-label {
    margin: 0 0 30px;
    padding: 0;
    color: #aaa7b8;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* 30px between items is the frame's own rhythm, not a default. */
body.admin-console .panel-sidebar .nav-group {
    gap: 30px;
    margin-bottom: 30px;
}

body.admin-console .panel-sidebar .panel-nav a {
    min-height: 40px;
    padding: 0 12px;
    gap: 12px;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

body.admin-console .panel-sidebar .panel-nav a svg {
    width: 20px;
    height: 20px;
}

body.admin-console .panel-sidebar .panel-nav a:hover {
    background: #353448;
    color: #ffffff;
}

/* The selected item is a taller block with a cyan edge on its left. */
body.admin-console .panel-sidebar .panel-nav a.is-active {
    min-height: 62px;
    background: linear-gradient(90deg, #0752e0 0%, #1a1632 100%);
    color: #ffffff;
}

body.admin-console .panel-sidebar .panel-nav a.is-active::before {
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    transform: none;
    border-radius: 8px 0 0 8px;
    background: #52e3fa;
    box-shadow: none;
}

body.admin-console .panel-sidebar .sidebar-footer {
    border-color: #353448;
}

body.admin-console .panel-sidebar .sidebar-user .user-avatar {
    width: 32px;
    height: 32px;
    background: #0752e0;
    color: #ffffff;
}

body.admin-console .panel-sidebar .sidebar-user-info strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

body.admin-console .panel-sidebar .sidebar-user-info span {
    color: #aaa7b8;
    font-size: 12px;
    line-height: 22px;
}

/* --- Content column ----------------------------------------------------- */
body.admin-console .panel-content {
    padding: 28px 34px 40px;
}

/* --- Page heading: 35/43 title, 14/22 description, hairline ------------- */
body.admin-console .panel-header {
    margin-bottom: 25px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e3e8f0;
}

body.admin-console .panel-header h2 {
    margin-bottom: 2px;
    color: #333333;
    font-size: 35px;
    font-weight: 700;
    line-height: 43px;
    letter-spacing: 0;
}

body.admin-console .panel-header .subtitle {
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

/* The header action is drawn as the filled primary, whatever class it uses. */
body.admin-console .panel-header .page-head-actions .btn-secondary,
body.admin-console .panel-header .page-head-actions .btn-primary {
    min-height: 40px;
    padding: 8px 20px;
    gap: 8px;
    border-radius: 8px;
    background: #0752e0;
    border-color: #0752e0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

body.admin-console .panel-header .page-head-actions .btn-secondary:hover,
body.admin-console .panel-header .page-head-actions .btn-primary:hover {
    background: #0647c3;
    border-color: #0647c3;
}

/* --- Metric tiles: 120px, 42px chip, 28px value ------------------------- */
body.admin-console .dashboard-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    margin-bottom: 24px;
}

body.admin-console .dashboard-stats .stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 120px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    box-shadow: none;
}

body.admin-console .dashboard-stats .stat-ic {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: #f0f6fe;
    border-radius: 8px;
    color: #0752e0;
}

body.admin-console .dashboard-stats .stat-ic svg {
    width: 20px;
    height: 20px;
}

body.admin-console .dashboard-stats .stat-card h3 {
    margin: 0;
    color: #666666;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.admin-console .dashboard-stats .stat-value {
    color: #333333;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

/* Row two: revenue on the left in the tinted tile, documents on the right. */
body.admin-console .dashboard-stats .stat-card:nth-child(6) {
    grid-column: 1 / span 2;
    grid-row: 2;
    background: #f0f6fe;
    border-color: #adc5f6;
}

body.admin-console .dashboard-stats .stat-card:nth-child(5) {
    grid-column: 3 / span 2;
    grid-row: 2;
}

body.admin-console .dashboard-stats .stat-card:nth-child(6) .stat-ic {
    background: #f0f6fe;
}

body.admin-console .dashboard-stats .stat-card:nth-child(6) .stat-ic svg,
body.admin-console .dashboard-stats .stat-card:nth-child(6) .stat-value,
body.admin-console .dashboard-stats .free-tier {
    color: #0752e0;
}

/* --- Recent transactions: title inset, table full-bleed ----------------- */
body.admin-console .dashboard-stats + .panel-section {
    margin-top: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    overflow: hidden;
}

body.admin-console .dashboard-stats + .panel-section h3 {
    margin: 0;
    padding: 20px 18px 16px;
    color: #333333;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    text-align: left;
}

body.admin-console .dashboard-stats + .panel-section .table-wrap {
    border: 0;
    border-radius: 0;
}

body.admin-console .data-table {
    font-size: 14px;
}

body.admin-console .data-table thead th {
    height: 44px;
    padding: 0 18px;
    background: #f8f9fb;
    border: 0;
    color: #666666;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.admin-console .data-table tbody td {
    height: 68px;
    padding: 6px 18px;
    border-top: 1px solid #e3e8f0;
    border-bottom: 0;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

body.admin-console .data-table tbody td.empty-row {
    color: #666666;
    font-weight: 400;
}

/* --- Package chips: 6px rounded, metallic ------------------------------- */
body.admin-console .pkg-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

body.admin-console .pkg-chip.pkg-bronze {
    background: linear-gradient(-66.4deg, rgb(149, 121, 104) 12.446%, rgb(48, 48, 55) 96.444%);
    color: #efae7c;
}

body.admin-console .pkg-chip.pkg-silver {
    background: linear-gradient(-65.85deg, rgb(64, 97, 140) 13.585%, rgb(31, 46, 68) 95.866%);
    color: #c2cfe2;
}

body.admin-console .pkg-chip.pkg-gold {
    background: linear-gradient(-73.45deg, rgb(129, 87, 26) 26.014%, rgb(211, 133, 0) 91.948%);
    color: #ffcb6a;
}

/* --- Status pills: 6px rounded with a 5px dot --------------------------- */
body.admin-console .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
}

body.admin-console .badge::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

body.admin-console .badge-completed {
    background: #eaf7ef;
    color: #07863d;
}

body.admin-console .badge-pending {
    background: #fff4e4;
    color: #c26100;
}

body.admin-console .badge-failed {
    background: #fdebec;
    color: #d34242;
}

body.admin-console .badge-refunded {
    background: #f1f3f6;
    color: #666666;
}

/* --- Responsive --------------------------------------------------------- */
/* Restated here because the block above is last in the file and would
   otherwise outrank the small-screen rules earlier in it. The frame has no
   narrow artboard; these keep its proportions while fitting the viewport. */

@media (max-width: 1024px) {
    body.admin-console .panel-sidebar {
        width: min(var(--sidebar-w), 86vw);
        padding: 24px 20px;
    }

    body.admin-console .panel-sidebar .nav-group {
        gap: 12px;
        margin-bottom: 24px;
    }

    body.admin-console .panel-sidebar .nav-group-label {
        margin-bottom: 16px;
    }

    body.admin-console .panel-sidebar .panel-nav a.is-active {
        min-height: 48px;
    }

    body.admin-console .panel-content {
        padding: 20px 20px 32px;
    }

    body.admin-console .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body.admin-console .dashboard-stats .stat-card:nth-child(5),
    body.admin-console .dashboard-stats .stat-card:nth-child(6) {
        grid-column: auto / span 2;
        grid-row: auto;
    }

    body.admin-console .nav-context {
        position: static;
        left: auto;
    }
}

@media (max-width: 600px) {
    body.admin-console .navbar {
        padding: 0 16px;
    }

    body.admin-console .panel-content {
        padding: 20px 16px 32px;
    }

    /* 35px wraps the title on a phone, so it steps down one notch. */
    body.admin-console .panel-header h2 {
        font-size: 24px;
        line-height: 32px;
    }

    body.admin-console .panel-header {
        padding-bottom: 12px;
        margin-bottom: 20px;
    }

    body.admin-console .dashboard-stats {
        gap: 12px;
    }

    body.admin-console .dashboard-stats .stat-card {
        min-height: 96px;
        padding: 16px;
        gap: 12px;
    }

    body.admin-console .dashboard-stats .stat-card:nth-child(-n+4) {
        grid-column: auto / span 2;
    }

    body.admin-console .dashboard-stats .stat-value {
        font-size: 22px;
    }

    /* Five columns at a 68px row height do not fit; the table scrolls. */
    body.admin-console .dashboard-stats + .panel-section .table-wrap {
        overflow-x: auto;
    }

    body.admin-console .data-table {
        min-width: 640px;
    }

    body.admin-console .nav-context {
        display: none;
    }
}