/* ---------------------------------------------------------------------------
   Design tokens — stock defaults. White-label branding overrides the branded
   roles at runtime via BrandingCss (injected after this file in App.razor);
   CustomCss (injected last) can override anything. Components must read these
   tokens, never hard-code colours/radius. Authored mobile-first.
   --------------------------------------------------------------------------- */
:root {
    --app-bg: #1A1A1A;
    --app-surface: #262626;
    --app-surface-2: #1F1F1F;
    --app-border: #2E2E2E;
    --app-border-strong: #3A3A3A;
    --app-text: #E6E6E6;
    --app-text-secondary: #A0A0A0;
    --app-text-muted: #6B6B6B;
    --app-primary: #26C281;
    --app-primary-hover: #2ED690;
    --app-primary-contrast: #FFFFFF;
    --app-error: #E74C3C;
    /* Semantic status roles — white-label branding overrides these at runtime (BrandingCss); these
       stock defaults guarantee they always resolve so components/charts can rely on them. */
    --app-success: #26C281;
    --app-warning: #F39C12;
    --app-info: #3498DB;
    --app-radius: 4px;
    --app-bottomnav-height: 56px;
    --app-touch-target: 44px;
}

html, body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    /* Prevent iOS text auto-inflation in landscape. */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Never allow a page to scroll sideways on a phone. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ---- Shared surfaces / tables --------------------------------------------- */

.mud-table-toolbar { background: transparent !important; }

.mud-appbar { border-bottom: 1px solid var(--app-border); }

.mud-drawer { border-right: 1px solid var(--app-border); }

.mud-paper { background-color: var(--app-surface); }

.mud-button-filled-primary {
    background-color: var(--app-primary) !important;
    color: var(--app-primary-contrast) !important;
}
.mud-button-filled-primary:hover {
    background-color: var(--app-primary-hover) !important;
}

.mud-button-filled-error {
    background-color: var(--app-error) !important;
    color: var(--app-primary-contrast) !important;
}

.mud-input-outlined .mud-input-outlined-border { border-color: var(--app-border-strong); }

.mud-table {
    background-color: var(--app-surface-2);
    border: 1px solid var(--app-border);
}
.mud-table-row:hover { background-color: var(--app-border) !important; }
.mud-table-cell { border-bottom: 1px solid var(--app-surface); }

.mud-input-control input,
.mud-input-control textarea { color: var(--app-text); }

.mud-alert-filled-error { background-color: var(--app-error); }

.app-sell { color: var(--app-error); }
.app-buy { color: var(--app-primary); }

.app-stat-card {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    transition: border-color 0.15s, transform 0.15s;
}
.app-stat-card:hover { border-color: var(--app-border-strong); }

/* ---- Touch targets (mobile-first base) ------------------------------------ */

/* Comfortable tap size on phones; buttons/icon-buttons never smaller than 44px. */
.mud-button-root,
.mud-icon-button { min-height: var(--app-touch-target); }

/* Keep page content clear of the fixed mobile bottom navigation. */
.app-main-content { padding-bottom: calc(var(--app-bottomnav-height) + env(safe-area-inset-bottom, 0px)); }

/* ---- Mobile bottom navigation --------------------------------------------- */

.app-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    height: calc(var(--app-bottomnav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--app-surface-2);
    border-top: 1px solid var(--app-border);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}
.app-bottomnav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 2px;
    color: var(--app-text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.app-bottomnav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-bottomnav-item:active { background: var(--app-border); }
.app-bottomnav-active {
    color: var(--app-primary);
    border-top: 2px solid var(--app-primary);
    margin-top: -1px;
}

/* ---- Desktop enhancements (mobile-first: base = phone, enhance upward) ----- */

@media (min-width: 960px) {
    /* Bottom nav is mobile-only; the persistent drawer takes over on tablet+. */
    .app-bottomnav { display: none !important; }
    .app-main-content { padding-bottom: 0; }
}

@media (min-width: 1200px) {
    html, body { font-size: 15px; }
    .mud-nav-link { font-size: 15px !important; font-weight: 600 !important; padding-top: 12px !important; padding-bottom: 12px !important; }
    .mud-table-cell { padding: 14px 18px !important; font-size: 14.5px; }
    .mud-table-head .mud-table-cell { font-size: 13px; font-weight: 700 !important; letter-spacing: 0.4px; text-transform: uppercase; }
    .mud-button-root { font-weight: 700 !important; letter-spacing: 0.4px; padding: 9px 20px; }
    .mud-card, .mud-paper { border: 1px solid var(--app-border); }
    .app-stat-card .mud-typography-h4 { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -0.5px; }
}

@media (min-width: 1600px) {
    html, body { font-size: 16px; }
}

/* ---- Login ---------------------------------------------------------------- */

.app-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--app-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.app-login-card {
    width: 100%;
    max-width: 440px;
    background: var(--app-bg);
    padding: 40px 48px 48px;
    border-radius: var(--app-radius);
}

.app-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}
.app-login-brand {
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.3px;
}

.app-login-tabs {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--app-border);
}
.app-login-tab {
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--app-text-muted);
}
.app-login-tab-active {
    color: #FFFFFF;
    border-bottom: 2px solid var(--app-primary);
    margin-bottom: -1px;
}

.app-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.app-login-field {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--app-border-strong);
    padding: 8px 0;
}
.app-login-field:focus-within {
    border-bottom-color: var(--app-primary);
}
.app-login-icon {
    margin-right: 12px;
    flex-shrink: 0;
}
.app-login-field input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--app-text);
    font-size: 16px; /* >=16px stops iOS Safari from zooming on focus */
    padding: 8px 0;
}
.app-login-field input::placeholder {
    color: var(--app-text-muted);
    font-style: italic;
}

.app-login-button {
    margin-top: 12px;
    min-height: var(--app-touch-target);
    background: var(--app-primary);
    color: var(--app-primary-contrast);
    border: none;
    border-radius: 2px;
    padding: 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s;
}
.app-login-button:hover {
    background: var(--app-primary-hover);
}

.app-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--app-text-secondary);
    font-size: 13px;
    user-select: none;
    cursor: pointer;
}
.app-login-remember input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 34px;
    height: 18px;
    background: #3A4150;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
    margin: 0;
}
.app-login-remember input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 0.15s ease-in-out;
}
.app-login-remember input:checked {
    background: var(--app-primary);
}
.app-login-remember input:checked::before {
    transform: translateX(16px);
}
.app-login-remember input:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-login-error {
    color: var(--app-error);
    font-size: 13px;
    margin-top: -8px;
}

.app-login-success {
    color: var(--app-success);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
}

/* ---- Brand mark & wordmark ------------------------------------------------ */

.app-brand-mark { color: var(--app-primary); vertical-align: middle; flex-shrink: 0; }
.app-login-brand,
.app-brand-word { font-family: 'Space Grotesk', Inter, 'Segoe UI', sans-serif; letter-spacing: -0.02em; }

/* ---- Settings windowed dialog (Claude-settings style: centered panel, dimmed backdrop) ---- */

.app-settings {
    display: flex;
    min-height: 68vh;
    max-height: 78vh;
}
.app-settings-nav {
    flex: 0 0 220px;
    border-right: 1px solid var(--app-border);
    padding-right: 8px;
}
.app-settings-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 8px 8px 24px;
    overflow-y: auto;
    /* A full-width MudAutocomplete (time-zone picker) could push a few px past the panel and give the
       whole settings dialog a horizontal scrollbar; contain it so no width 320–1920px scrolls sideways. */
    overflow-x: hidden;
}
/* Inputs inside the settings panel must be free to shrink with the panel, never force it wider. */
.app-settings-content .mud-input-control { max-width: 100%; }
.app-settings-active {
    background: color-mix(in srgb, var(--app-primary) 14%, transparent);
    border-radius: var(--app-radius);
}

@media (max-width: 600px) {
    .app-settings { flex-direction: column; min-height: 0; }
    .app-settings-nav {
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid var(--app-border);
        padding: 0 0 8px;
    }
    .app-settings-content { padding: 16px 0 0; }
}

/* ---- Coming-soon placeholder ---------------------------------------------- */

.app-coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
}
.app-coming-soon-card {
    position: relative;
    overflow: hidden;
    max-width: 460px;
    text-align: center;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 48px 40px;
}
.app-coming-soon-card::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--app-primary) 22%, transparent), transparent 70%);
    pointer-events: none;
}
.app-coming-soon-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--app-primary) 40%, transparent);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 20px;
}
.app-coming-soon-icon { font-size: 64px !important; color: var(--app-primary); margin-bottom: 16px; }
.app-coming-soon-title { font-weight: 800 !important; letter-spacing: -0.5px; margin-bottom: 10px; }
.app-coming-soon-text { color: var(--app-text-secondary); line-height: 1.6; }

/* ---- Blazor reconnect modal (themed) -------------------------------------- */

/* Style off the ID (stable) — Blazor rewrites the element's class list when it toggles reconnect state,
   so the base overlay must not depend on a custom class. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}
/* .NET 10 toggles the full reconnect state set (show/retrying/failed/paused/resume-failed/rejected) on
   this element — every visible state must overlay so the terminal "session expired" state also blocks. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }

.app-reconnect-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 28px 32px;
    max-width: 360px;
    width: calc(100% - 48px);
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.app-reconnect-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    border: 3px solid var(--app-border-strong);
    border-top-color: var(--app-primary);
    border-radius: 50%;
    animation: app-spin 0.7s linear infinite;
}
.app-reconnect-title { font-size: 18px; font-weight: 700; color: var(--app-text); margin-bottom: 8px; }
.app-reconnect-text { font-size: 13px; color: var(--app-text-secondary); line-height: 1.5; }
.app-reconnect-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
.app-reconnect-btn {
    min-height: var(--app-touch-target);
    padding: 10px 22px;
    background: var(--app-primary);
    color: var(--app-primary-contrast);
    border: none;
    border-radius: var(--app-radius);
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
}
.app-reconnect-btn:hover { background: var(--app-primary-hover); }

/* Reveal only the copy/button for the active reconnect state. */
.app-reconnect-when-show,
.app-reconnect-when-failed,
.app-reconnect-when-rejected { display: none; }
/* show/retrying → "reconnecting"; failed/paused → "connection lost, retrying"; rejected/resume-failed
   → terminal "session expired, reload". */
#components-reconnect-modal.components-reconnect-show .app-reconnect-when-show,
#components-reconnect-modal.components-reconnect-retrying .app-reconnect-when-show,
#components-reconnect-modal.components-reconnect-failed .app-reconnect-when-failed,
#components-reconnect-modal.components-reconnect-paused .app-reconnect-when-failed,
#components-reconnect-modal.components-reconnect-rejected .app-reconnect-when-rejected,
#components-reconnect-modal.components-reconnect-resume-failed .app-reconnect-when-rejected { display: inline; }
#components-reconnect-modal.components-reconnect-failed .app-reconnect-btn.app-reconnect-when-failed,
#components-reconnect-modal.components-reconnect-paused .app-reconnect-btn.app-reconnect-when-failed,
#components-reconnect-modal.components-reconnect-rejected .app-reconnect-btn.app-reconnect-when-rejected,
#components-reconnect-modal.components-reconnect-resume-failed .app-reconnect-btn.app-reconnect-when-rejected {
    display: inline-flex;
    align-items: center;
}
#components-reconnect-modal.components-reconnect-rejected .app-reconnect-spinner,
#components-reconnect-modal.components-reconnect-resume-failed .app-reconnect-spinner { display: none; }

/* ---- Inline help affordance ----------------------------------------------- */

.app-help-tip {
    display: inline-flex;
    align-items: center;
    color: var(--app-text-muted);
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
}
.app-help-tip:hover,
.app-help-tip:focus-visible { color: var(--app-primary); outline: none; }

/* Cap tooltip width and wrap long text so it can never run off-screen (was overflowing the
   viewport on help tips near the layout edges). Applies to every MudTooltip app-wide. */
.mud-tooltip {
    max-width: min(320px, calc(100vw - 24px));
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}

/* Rich (bulleted) help tooltip — e.g. the money-management modes list. Kept tight so it reads on a
   phone (tap-to-open) as well as on desktop (hover). */
.app-help-tip-rich ul {
    margin: 4px 0 0;
    padding-inline-start: 16px;
}
.app-help-tip-rich li { margin-bottom: 2px; }

/* ---- Auth split-screen (login) -------------------------------------------- */

.app-auth {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.app-auth-hero {
    position: relative;
    flex: 1 1 52%;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 64px;
    border-right: 1px solid var(--app-border);
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--app-primary) 10%, transparent) 1px, transparent 1.6px) 0 0 / 34px 34px,
        radial-gradient(1200px 600px at 20% 10%, color-mix(in srgb, var(--app-primary) 22%, transparent), transparent 60%),
        linear-gradient(160deg, var(--app-surface-2), var(--app-bg));
}
.app-auth-hero-glow {
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--app-primary) 30%, transparent), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}
.app-auth-hero-content { position: relative; max-width: 460px; }
.app-auth-hero-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.app-auth-hero-title {
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    margin: 0 0 16px;
}
.app-auth-hero-tagline {
    color: var(--app-text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 28px;
}
.app-auth-hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.app-auth-hero-points li { position: relative; padding-left: 30px; color: var(--app-text); font-weight: 600; }
.app-auth-hero-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-primary) 22%, transparent);
    box-shadow: inset 0 0 0 2px var(--app-primary);
}

.app-auth-panel {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--app-bg);
}

.app-login-reveal {
    background: none;
    border: none;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}
.app-login-reveal:hover,
.app-login-reveal-on { color: var(--app-primary); }

.app-login-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.app-login-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: app-spin 0.6s linear infinite;
}
.app-login-button-loading .app-login-spinner { display: inline-block; }
.app-login-button-loading .app-login-button-label { opacity: 0.7; }
@keyframes app-spin { to { transform: rotate(360deg); } }

.app-login-support { display: block; text-align: center; margin-top: 18px; color: var(--app-text-secondary); font-size: 13px; text-decoration: none; }
.app-login-support:hover { color: var(--app-primary); }
.app-login-copyright { text-align: center; margin-top: 10px; color: var(--app-text-muted); font-size: 12px; }

@media (min-width: 960px) {
    /* Desktop shows the brand in the hero; hide the in-card duplicate. */
    .app-auth-panel-brand { display: none; }
}

@media (max-width: 959px) {
    .app-auth-hero { display: none; }
    .app-auth-panel { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .app-login-spinner,
    .app-reconnect-spinner { animation: none; }
}

/* Copy-profile dialog (C-06): a MudSelect's click-away overlay must never permanently trap the dialog's
   own action bar. The dropdown list popover sits at the top of the dialog, so lifting the action bar into
   its own stacking context above the transparent select overlay keeps Close/Add reachable in one click
   without hiding the open dropdown. */
.copy-profile-dialog .mud-dialog-actions {
    position: relative;
    z-index: var(--mud-zindex-popover, 1200);
}

/* ---- Dialogs go near-full-screen on phones -------------------------------- */

@media (max-width: 600px) {
    .mud-dialog-container { align-items: stretch !important; }
    .mud-dialog-container .mud-dialog {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        max-height: 100dvh;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .mud-dialog-container .mud-dialog .mud-dialog-content { flex: 1 1 auto; overflow-y: auto; }
    /* Keep the action bar reachable above the on-screen keyboard / home indicator. */
    .mud-dialog-container .mud-dialog .mud-dialog-actions { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 600px) {
    .mobile-stack > * { display: block !important; width: 100% !important; margin-bottom: 8px; }
    .app-login-card { padding: 32px 24px; }
}

/* ---- Dashboard --------------------------------------------------------------
   Mobile-first: every widget is a full-width stack item on a phone and only
   graduates to a multi-column grid via MudBlazor breakpoints. Colour comes only
   from role tokens (--app-success/-warning/-error/-info/-primary/-text*).
   --------------------------------------------------------------------------- */

/* Semantic role helpers — one source of truth for icon/value/spark colour. */
.app-role-success { color: var(--app-success); }
.app-role-warning { color: var(--app-warning); }
.app-role-danger  { color: var(--app-error); }
.app-role-info    { color: var(--app-info); }
.app-role-neutral { color: var(--app-text); }

.app-dash-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.app-dash-updated { color: var(--app-text-secondary); font-size: 12px; }

/* Live indicator — a real pulsing dot; stops for reduced-motion users. */
.app-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--app-success);
}
.app-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-success);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-success) 60%, transparent);
    animation: app-live-pulse 1.8s ease-in-out infinite;
}
@keyframes app-live-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-success) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--app-success) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-success) 0%, transparent); }
}

/* Period toggle. */
.app-period {
    display: inline-flex;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    overflow: hidden;
}
.app-period button {
    min-height: 34px;
    padding: 4px 12px;
    background: transparent;
    border: none;
    color: var(--app-text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
}
.app-period button + button { border-left: 1px solid var(--app-border); }
.app-period button:hover { color: var(--app-text); }
.app-period-active { background: color-mix(in srgb, var(--app-primary) 16%, transparent) !important; color: var(--app-primary) !important; }

.app-section-title {
    color: var(--app-text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 4px 0 10px;
}

/* KPI card. */
.app-kpi { display: flex; flex-direction: column; gap: 8px; min-height: 116px; }
.app-kpi-head { display: flex; align-items: center; gap: 8px; }
.app-kpi-icon { font-size: 20px !important; }
.app-kpi-label { color: var(--app-text-secondary); font-size: 12px; font-weight: 600; }
.app-kpi-value { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.app-kpi-value.app-flash { animation: app-flash 0.9s ease-out; }
@keyframes app-flash {
    0% { background: color-mix(in srgb, var(--app-primary) 22%, transparent); }
    100% { background: transparent; }
}
.app-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.app-kpi-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; }
.app-kpi-delta-icon { font-size: 14px !important; }
.app-delta-good { color: var(--app-success); }
.app-delta-bad  { color: var(--app-error); }
.app-delta-flat { color: var(--app-text-muted); }

/* Inline SVG sparkline — stroke inherits the card's role colour. */
.app-spark { width: 64px; height: 24px; overflow: visible; }
.app-spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }

/* Chart / section card. */
.app-chart-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 16px;
    height: 100%;
}
.app-section-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 700; font-size: 14px; }

/* Status ring (conic-gradient donut) + legend. */
.app-ring-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.app-ring {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    flex-shrink: 0;
}
.app-ring-hole {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.app-ring-total { font-size: 24px; font-weight: 800; line-height: 1; }
.app-ring-total-label { font-size: 10px; color: var(--app-text-secondary); letter-spacing: 0.4px; text-transform: uppercase; }
.app-legend { display: flex; flex-direction: column; gap: 8px; min-width: 140px; }
.app-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.app-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.app-legend-count { margin-left: auto; font-weight: 700; }

/* Live activity feed. */
.app-feed { display: flex; flex-direction: column; }
.app-feed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--app-border);
    min-height: var(--app-touch-target);
}
.app-feed-row:last-child { border-bottom: none; }
.app-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.app-feed-main { min-width: 0; flex: 1 1 auto; }
.app-feed-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-feed-sub { font-size: 11px; color: var(--app-text-secondary); }
.app-feed-time { font-size: 11px; color: var(--app-text-muted); white-space: nowrap; flex-shrink: 0; }
.app-feed-empty, .app-dash-empty { color: var(--app-text-secondary); font-size: 13px; padding: 20px 4px; text-align: center; }
.app-feed-new { animation: app-feed-in 0.5s ease-out; }
@keyframes app-feed-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.app-feed-row-click { cursor: pointer; }
.app-feed-row-click:hover { background: var(--app-surface-2); }
.app-chart-card-click { cursor: pointer; }

/* Backtests widget — three state tiles. */
.app-backtest-tiles { display: flex; gap: 8px; }
.app-backtest-tile {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 4px;
    background: var(--app-surface-2);
    border-radius: var(--app-radius);
}
.app-backtest-num { font-size: 26px; font-weight: 800; line-height: 1; }
.app-backtest-label { font-size: 11px; color: var(--app-text-secondary); }

/* Customize-dashboard dialog rows. */
.app-customize-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--app-border);
    min-height: var(--app-touch-target);
}
.app-customize-row:last-child { border-bottom: none; }
.app-customize-label { font-size: 14px; font-weight: 600; }

/* Node health / capacity gauge. */
.app-gauge-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.app-gauge {
    height: 8px;
    border-radius: 999px;
    background: var(--app-border);
    overflow: hidden;
}
.app-gauge-fill { height: 100%; border-radius: 999px; background: var(--app-primary); transition: width 0.4s ease; }
.app-gauge-fill.app-role-warning { background: var(--app-warning); }
.app-gauge-fill.app-role-danger { background: var(--app-error); }

@media (prefers-reduced-motion: reduce) {
    .app-live-dot,
    .app-kpi-value.app-flash,
    .app-feed-new,
    .app-gauge-fill { animation: none !important; transition: none !important; }
}

/* "Powered by cMind" dashboard credit (hidden when App:Branding:ShowSiteLink=false). */
.app-powered-by { text-align: center; margin-top: 1.5rem; margin-bottom: 0.5rem; opacity: 0.75; }