/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Base Colors - Premium Dark Theme (Default) */
    --font-family: 'Inter', sans-serif;

    /* Dark Mode Variables (Primary) */
    --bg-body: #0f172a;
    /* Slate 900 - Deep Background */
    --bg-card: #1e293b;
    /* Slate 800 - Card Surface */
    --bg-sidebar: #111827;
    --sidebar-hover: rgba(148, 163, 184, 0.08);
    --sidebar-active: rgba(56, 189, 248, 0.09);

    --text-primary: #f8fafc;
    /* Slate 50 */
    --text-secondary: #cbd5e1;
    /* Slate 300 */
    --text-muted: #94a3b8;
    /* Slate 400 */

    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);

    /* Accents */
    --primary-color: #38bdf8;
    /* Sky 400 */
    --primary-hover: #0ea5e9;
    /* Sky 500 */
    --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);

    /* Status Colors */
    --success: #4ade80;
    /* Green 400 */
    --danger: #f87171;
    /* Red 400 */
    --warning: #facc15;
    /* Yellow 400 */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

/* Tier usage and upgrade surfaces */
.tier-usage-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tier-usage {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 10.5rem;
    padding: 0.55rem 0.72rem;
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--bg-card) 84%, transparent);
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.2;
}

.tier-usage--compact {
    min-width: auto;
    padding: 0.42rem 0.62rem;
}

.tier-usage-value {
    color: var(--text-primary);
    white-space: nowrap;
}

.tier-usage.is-warning {
    border-color: color-mix(in srgb, #f59e0b 65%, var(--border-color));
    background: color-mix(in srgb, #f59e0b 10%, var(--bg-card));
}

.tier-usage.is-limit {
    border-color: color-mix(in srgb, #ef4444 65%, var(--border-color));
    background: color-mix(in srgb, #ef4444 9%, var(--bg-card));
}

.tier-usage.is-unlimited .tier-usage-value {
    color: #10b981;
}

.is-tier-disabled {
    opacity: 0.72;
}

.csv-position-estimate {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.csv-position-estimate.is-warning { color: #f59e0b; }
.csv-position-estimate.is-limit { color: #ef4444; font-weight: 700; }

.entitlement-upgrade-dialog {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(5px);
}

.entitlement-upgrade-dialog.is-visible { display: flex; }

.entitlement-upgrade-panel {
    position: relative;
    width: min(100%, 32rem);
    max-height: calc(100vh - 2.5rem);
    overflow: auto;
    padding: 2rem;
    border: 1px solid color-mix(in srgb, #8b5cf6 45%, var(--border-color));
    border-radius: 1.15rem;
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.42);
}

.entitlement-upgrade-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 0.3rem;
    border-radius: 1.15rem 1.15rem 0 0;
    background: linear-gradient(90deg, #6366f1, #a855f7);
}

.entitlement-upgrade-eyebrow,
.settings-plan-kicker {
    margin: 0 0 0.45rem;
    color: #8b5cf6;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.entitlement-upgrade-panel h2 { margin: 0 2rem 0.65rem 0; }
.entitlement-upgrade-panel h3 { margin: 1.2rem 0 0.5rem; font-size: 0.9rem; }
.entitlement-upgrade-panel > p:not(.entitlement-upgrade-eyebrow) { color: var(--text-muted); }
.entitlement-upgrade-panel ul { margin: 0; padding-left: 1.2rem; color: var(--text-muted); }
.entitlement-upgrade-panel li + li { margin-top: 0.4rem; }

.entitlement-upgrade-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--bg-body);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.5rem;
}

.entitlement-upgrade-usage {
    padding: 0.7rem 0.8rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, #8b5cf6 10%, var(--bg-card));
    color: var(--text-primary) !important;
    font-weight: 700;
}

.entitlement-upgrade-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.settings-section-icon--plan {
    color: #8b5cf6;
    background: color-mix(in srgb, #8b5cf6 12%, transparent);
}

.settings-plan-card .settings-section-header {
    align-items: center;
}

.settings-plan-content {
    padding: 18px 22px 22px;
}

.settings-tier-badge {
    margin-left: auto;
    padding: 0.42rem 0.75rem;
    border: 1px solid color-mix(in srgb, #8b5cf6 45%, var(--border-color));
    border-radius: 999px;
    color: #8b5cf6;
    background: color-mix(in srgb, #8b5cf6 9%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
}

.settings-plan-usage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0;
}

.settings-plan-usage .tier-usage { min-width: 0; }

.settings-plan-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.settings-plan-footer p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.settings-plan-footer .btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0.6rem 1rem;
    font-size: 0.76rem;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .tier-usage-action,
    .watchlist-title-actions { align-items: stretch; }
    .tier-usage-action .tier-usage,
    .watchlist-title-actions .tier-usage { width: 100%; }
    .portfolio-command-bar > .tier-usage { flex-basis: 100%; }
    .settings-plan-usage { grid-template-columns: minmax(0, 1fr); }
    .settings-plan-footer,
    .entitlement-upgrade-actions { align-items: stretch; flex-direction: column; }
    .settings-plan-footer .btn { width: 100%; }
    .entitlement-upgrade-actions .btn { text-align: center; }
}

/* Light Mode Overrides */
:root:not(.dark-mode) {
    --bg-body: #f8fafc;
    /* Slate 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --sidebar-hover: #f1f5f9;
    --sidebar-active: #f0f9ff;

    --text-primary: #0f172a;
    /* Slate 900 */
    --text-secondary: #475569;
    /* Slate 600 */
    --text-muted: #64748b;
    /* Slate 500 */

    --border-color: #e2e8f0;
    /* Slate 200 */
    --border-hover: #cbd5e1;
    /* Slate 300 */

    --primary-color: #0284c7;
    /* Sky 600 */
    --primary-hover: #0369a1;
    /* Sky 700 */
}

/* Reset & Base */
p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-body);
    color: var(--text-secondary);
    font-family: var(--font-family);
    margin: 0;
    font-size: 16px;
    transition: background-color var(--transition-normal), color var(--transition-normal);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    margin-top: 0;
    font-weight: 600;
    letter-spacing: -0.025em;
}

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

a:hover {
    color: var(--primary-hover);
}

/* Auth Page */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(circle at top right, #1e293b 0%, #0f172a 100%);
}

.auth-container {
    background: var(--bg-card);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border-color);
}

.auth-container h1,
.auth-container h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

.auth-link-card {
    max-width: 480px;
}

.auth-provider-mark {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.85rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.auth-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--primary-color);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 700;
}

.auth-link-card h1 {
    margin-bottom: 0.85rem;
}

.auth-copy {
    margin: 0 auto 1rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.55;
}

.auth-account-chip {
    margin: 0 0 1.35rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-body);
    color: var(--text-primary);
    text-align: center;
    font-weight: 600;
}

.auth-security-note {
    margin: -0.25rem 0 1.1rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.auth-link-card .btn {
    width: 100%;
}

.auth-message {
    min-height: 1.4em;
    margin: 1rem 0 0;
    color: var(--success);
    text-align: center;
    font-size: 0.9rem;
}

.auth-message.is-error {
    color: var(--danger);
}

.auth-secondary-action {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.88rem;
}

.auth-link-card .btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* Layout */
body {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 272px;
    flex: 0 0 272px;
    background: var(--bg-sidebar);
    padding: 0 16px 16px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 20;
}

.sidebar-brand {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}

.sidebar-brand__mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.22);
}

.sidebar-brand__mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.sidebar-brand__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.module-status-badge {
    margin-left: auto;
    padding: 2px 5px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 24%, transparent);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.25;
    text-transform: uppercase;
}

.portfolio-command .module-status-badge {
    margin-left: 2px;
}

.sidebar-brand__name {
    color: var(--text-primary);
    font-size: 0.94rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.sidebar-brand__meta {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.2;
    letter-spacing: 0.025em;
}

.sidebar-navigation {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 18px 0 12px;
}

.sidebar-navigation::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sidebar-nav-section + .sidebar-nav-section {
    margin-top: 21px;
}

.sidebar-section-label {
    display: block;
    margin: 0 11px 7px;
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sidebar ul,
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar li {
    margin: 2px 0;
}

.sidebar a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.2;
    font-weight: 500;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sidebar a:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.sidebar a.active {
    background: var(--sidebar-active);
    border-color: color-mix(in srgb, var(--primary-color) 13%, transparent);
    color: var(--text-primary);
    font-weight: 600;
}

.sidebar a.active::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 999px;
    background: var(--primary-color);
}

.sidebar-nav-icon {
    width: 18px;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.78rem;
    transition: color var(--transition-fast);
}

.sidebar a:hover .sidebar-nav-icon,
.sidebar a.active .sidebar-nav-icon {
    color: var(--primary-color);
}

.sidebar-nav-chevron {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.6rem;
}

/* Sidebar Submenu */
.portfolio-submenu {
    list-style: none;
    display: none;
    padding: 2px 0 5px 12px !important;
    margin: 3px 0 7px 18px !important;
    border-left: 1px solid var(--border-color);
}

.portfolio-submenu.is-open {
    display: block;
}

.portfolio-submenu li {
    margin: 1px 0;
}

.portfolio-submenu a {
    min-height: 31px;
    padding: 0 9px;
    font-size: 0.76rem;
    font-weight: 400;
    border-radius: 5px;
}

.portfolio-submenu .sidebar-nav-icon {
    width: 14px;
    font-size: 0.64rem;
}

.portfolio-submenu a.active-portfolio {
    background: var(--sidebar-active);
    color: var(--text-primary);
    font-weight: 600;
}

.portfolio-submenu a.active-portfolio::before {
    display: none;
}

.sidebar-portfolio-state {
    display: block;
    padding: 7px 9px;
    color: var(--text-muted);
    font-size: 0.73rem;
}

.sidebar-footer {
    flex: 0 0 auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.sidebar-footer .sidebar-section-label {
    margin-bottom: 6px;
}

.sidebar-logout:hover {
    color: var(--danger) !important;
}

.sidebar-logout:hover .sidebar-nav-icon {
    color: var(--danger) !important;
}

.add-portfolio-btn {
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.add-portfolio-btn:hover {
    color: var(--primary-color) !important;
    transform: scale(1.1);
}

/* Administration console */
.admin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.admin-page-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-page-header h1 {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
}

.admin-page-header p {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.admin-access-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--sidebar-hover);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
}

.admin-access-badge i {
    color: var(--primary-color);
}

.admin-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    width: fit-content;
}

.admin-tab {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

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

.admin-tab.is-active {
    background: var(--sidebar-active);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.admin-tab:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.admin-tab-count {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: white;
    font-size: 0.59rem;
    font-variant-numeric: tabular-nums;
}

.admin-tab-count[hidden],
[data-admin-panel][hidden] {
    display: none !important;
}

.admin-feedback[hidden],
.admin-confirm-backdrop[hidden] {
    display: none !important;
}

.admin-feedback {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 9px;
    font-size: 0.8rem;
}

.admin-feedback > i {
    font-size: 0.95rem;
}

.admin-feedback > div {
    display: grid;
    gap: 2px;
}

.admin-feedback strong {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.admin-feedback span {
    color: var(--text-secondary);
}

.admin-feedback--success {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border-color));
    background: color-mix(in srgb, var(--success) 8%, var(--bg-card));
    color: var(--success);
}

.admin-feedback--error {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border-color));
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
    color: var(--danger);
}

.admin-feedback-dismiss {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
}

.admin-feedback-dismiss:hover {
    background: rgba(148, 163, 184, 0.1);
}

.admin-console-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.85fr);
    align-items: start;
    gap: 18px;
}

.admin-jobs-panel {
    margin-bottom: 18px;
}

.admin-maintenance-ops-panel {
    margin-bottom: 18px;
}

.admin-maintenance-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--border-color);
}

.admin-maintenance-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 14px 18px;
}

.admin-maintenance-action + .admin-maintenance-action {
    border-left: 1px solid var(--border-color);
}

.admin-maintenance-action > div,
.admin-maintenance-action > label {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-maintenance-action strong,
.admin-maintenance-form-heading strong,
.admin-maintenance-list-heading strong {
    color: var(--text-primary);
    font-size: 0.77rem;
    font-weight: 600;
}

.admin-maintenance-action span,
.admin-maintenance-form-heading span,
.admin-maintenance-list-heading span {
    color: var(--text-muted);
    font-size: 0.67rem;
    line-height: 1.4;
}

.admin-maintenance-inline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: min(260px, 48%);
}

.admin-maintenance-input {
    width: 100%;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-body) 48%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.72rem;
}

.admin-maintenance-input:is(select) {
    cursor: pointer;
}

#adminMaintenancePanel {
    display: grid;
    gap: 18px;
}

.admin-maintenance-input:focus-visible,
.admin-weekday-fieldset input:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.admin-maintenance-schedule-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 0;
    border-bottom: 1px solid var(--border-color);
}

.admin-maintenance-form,
.admin-maintenance-schedules-wrap {
    min-width: 0;
    padding: 15px 18px;
}

.admin-maintenance-schedules-wrap {
    border-left: 1px solid var(--border-color);
}

.admin-maintenance-form-heading,
.admin-maintenance-list-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.admin-maintenance-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.admin-maintenance-form-grid label {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.admin-maintenance-form-grid label:last-child {
    grid-column: span 3;
}

.admin-weekday-fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 11px;
    margin: 12px 0;
    padding: 0;
    border: 0;
}

.admin-weekday-fieldset legend {
    width: 100%;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.admin-weekday-fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.66rem;
}

.admin-maintenance-form > .admin-action-button {
    width: 100%;
}

.admin-maintenance-schedules,
.admin-maintenance-operations {
    display: grid;
    gap: 6px;
}

.admin-maintenance-schedule,
.admin-maintenance-operation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-body) 35%, transparent);
}

.admin-maintenance-schedule > div,
.admin-maintenance-operation > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-maintenance-schedule strong,
.admin-maintenance-operation strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-maintenance-schedule span,
.admin-maintenance-operation span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-maintenance-schedule-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-maintenance-schedule-actions .admin-action-button {
    min-width: 0;
    min-height: 28px;
    padding: 0 7px;
    font-size: 0.62rem;
}

.admin-maintenance-status {
    min-width: 62px;
    padding: 3px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
    font-size: 0.58rem !important;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.admin-maintenance-status--succeeded,
.admin-maintenance-status--enabled {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success) !important;
}

.admin-maintenance-status--running,
.admin-maintenance-status--pending {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color) !important;
}

.admin-maintenance-status--failed,
.admin-maintenance-status--cancelled,
.admin-maintenance-status--disabled {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger) !important;
}

.admin-maintenance-history {
    padding: 15px 18px;
}

.admin-maintenance-history .admin-maintenance-list-heading {
    margin-bottom: 8px;
}

.admin-maintenance-operation {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
}

.admin-maintenance-operation:first-child {
    border-top: 0;
}

.admin-maintenance-operation > .admin-maintenance-status {
    grid-column: 1;
}

.admin-maintenance-operation > div {
    grid-column: 2;
}

.admin-maintenance-operation > .admin-action-button {
    grid-column: 3;
    min-width: 0;
    min-height: 28px;
    padding: 0 7px;
    font-size: 0.62rem;
}

@media (max-width: 900px) {
    .admin-maintenance-actions,
    .admin-maintenance-schedule-grid {
        grid-template-columns: 1fr;
    }

    .admin-maintenance-action + .admin-maintenance-action,
    .admin-maintenance-schedules-wrap {
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .admin-maintenance-action {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-maintenance-inline {
        width: 100%;
        min-width: 0;
    }

    .admin-maintenance-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-maintenance-form-grid label:last-child {
        grid-column: auto;
    }

    .admin-maintenance-operation {
        grid-template-columns: 66px minmax(0, 1fr);
    }

    .admin-maintenance-operation > .admin-action-button {
        grid-column: 2;
        justify-self: start;
    }
}

#adminHealthPanel {
    display: grid;
    gap: 18px;
}

.admin-health-header > div {
    min-width: 0;
    flex: 1;
}

.admin-health-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-health-component {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.admin-health-component + .admin-health-component {
    border-left: 1px solid var(--border-color);
}

.admin-health-component-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
    font-size: 0.74rem;
}

.admin-health-component > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-health-component strong {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.admin-health-component > div span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-health-state,
.admin-health-recovery {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.61rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-health-state--ok,
.admin-health-recovery--recovered {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success);
}

.admin-health-state--unavailable,
.admin-health-recovery--attention {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.admin-health-state--checking {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
}

.admin-health-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 45px;
    padding: 9px 18px;
    color: var(--text-muted);
    font-size: 0.67rem;
}

.admin-health-overall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
}

.admin-health-overall::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: '';
}

.admin-health-overall--healthy {
    color: var(--success);
}

.admin-health-overall--degraded {
    color: var(--danger);
}

.admin-health-overall--checking {
    color: var(--text-muted);
}

.admin-reports-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.admin-reports-controls label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-reports-controls select {
    min-height: 32px;
    width: auto;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.74rem;
}

.admin-reports-table-wrap {
    margin-top: 12px;
}

#adminReportsTable {
    width: 100%;
    min-width: 940px;
    font-size: 0.76rem;
}

#adminReportsTable th,
#adminReportsTable td {
    padding: 7px 8px;
    vertical-align: top;
}

.admin-report-check {
    display: grid;
    gap: 2px;
    font-size: 0.72rem;
}

.admin-report-agree { color: var(--positive-color, #22c55e); font-weight: 700; }
.admin-report-disagree { color: var(--negative-color, #ef4444); font-weight: 700; }
.admin-report-muted { color: var(--text-muted); }

.admin-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-report-actions .admin-action-button {
    font-size: 0.7rem;
}

.admin-health-incidents {
    display: grid;
}

.admin-health-incident {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 11px 18px;
    border-top: 1px solid var(--border-color);
}

.admin-health-incidents > .admin-health-incident:first-child {
    border-top: 0;
}

.admin-health-incident-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    color: var(--danger);
    font-size: 0.7rem;
}

.admin-health-incident.is-recovered .admin-health-incident-icon {
    background: color-mix(in srgb, var(--success) 9%, transparent);
    color: var(--success);
}

.admin-health-incident > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-health-incident strong {
    color: var(--text-primary);
    font-size: 0.75rem;
}

.admin-health-incident > div > span {
    color: var(--text-muted);
    font-size: 0.64rem;
    text-transform: capitalize;
}

.admin-health-incident p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-health-incidents-empty {
    border-top: 0;
}

.admin-health-scope-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -2px 2px 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.45;
}

.admin-health-scope-note i {
    margin-top: 2px;
    color: var(--primary-color);
}

.admin-jobs-header > div {
    min-width: 0;
    flex: 1;
}

.admin-job-runs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-job-run {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 16px;
    border-top: 1px solid var(--border-color);
}

.admin-job-run:nth-child(odd) {
    border-right: 1px solid var(--border-color);
}

.admin-job-run > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-job-run strong,
.admin-job-run > div span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-job-run strong {
    color: var(--text-primary);
    font-size: 0.75rem;
}

.admin-job-run > div span,
.admin-job-duration {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.admin-job-duration {
    font-variant-numeric: tabular-nums;
}

.admin-job-state {
    padding: 3px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.admin-job-state--succeeded {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success);
}

.admin-job-state--running {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
}

.admin-job-state--failed,
.admin-job-state--timed_out {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.admin-job-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 16px 18px;
    color: var(--text-muted);
    font-size: 0.73rem;
}

.admin-job-empty--error {
    color: var(--danger);
}

.admin-console-column {
    display: grid;
    gap: 18px;
}

.admin-panel.card {
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.admin-panel.card:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.admin-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border-color);
}

.admin-panel-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 7px;
    background: var(--sidebar-active);
    color: var(--primary-color);
    font-size: 0.76rem;
}

.admin-panel-icon--danger {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.admin-panel-header h2,
.admin-panel-header p,
.admin-action-copy h3,
.admin-action-copy p {
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.admin-panel-header h2 {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-panel-header p {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.45;
}

.admin-action-list {
    display: grid;
}

.admin-action-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 11px 14px 11px 18px;
}

.admin-action-row + .admin-action-row {
    border-top: 1px solid var(--border-color);
}

.admin-action-row:hover {
    background: color-mix(in srgb, var(--sidebar-hover) 65%, transparent);
}

.admin-action-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.admin-action-row--stacked {
    grid-template-columns: minmax(0, 1fr) auto;
}

.admin-action-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-body) 55%, transparent);
    color: var(--text-muted);
    font-size: 0.7rem;
}

.admin-action-copy {
    min-width: 0;
}

.admin-action-copy h3 {
    color: var(--text-primary);
    font-size: 0.79rem;
    font-weight: 600;
}

.admin-action-copy p {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.admin-action-button {
    min-width: 104px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-body) 48%, transparent);
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.admin-action-button:hover:not(:disabled) {
    border-color: var(--border-hover);
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.admin-action-button:focus-visible,
.admin-feedback-dismiss:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.admin-action-button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.admin-action-button--accent {
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    background: var(--sidebar-active);
    color: var(--primary-color);
}

.admin-action-button--warning {
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border-color));
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    color: color-mix(in srgb, var(--warning) 80%, var(--text-primary));
}

.admin-action-button--danger {
    border-color: color-mix(in srgb, var(--danger) 38%, var(--border-color));
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}

.admin-danger-panel {
    border-color: color-mix(in srgb, var(--danger) 22%, var(--border-color)) !important;
}

.admin-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(5px);
}

.admin-confirm-dialog {
    width: min(420px, 100%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    animation: slideIn 0.2s ease-out;
}

.admin-confirm-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--warning);
}

.admin-confirm-copy > span {
    display: block;
    margin-bottom: 4px;
    color: var(--warning);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-confirm-copy h2 {
    margin: 0;
    font-size: 0.98rem;
}

.admin-confirm-copy p {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.admin-confirm-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 5px;
}

body.admin-dialog-open {
    overflow: hidden;
}

.admin-users-header > .admin-action-button {
    margin-left: auto;
}

.admin-users-panel {
    margin-bottom: 18px;
}

.admin-panel-content {
    padding: 16px 18px 18px;
}

.admin-users-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 150px 170px;
    gap: 10px;
    margin: 0 0 14px;
}

.admin-users-filters label,
.admin-user-dialog-fields label,
.admin-tier-field {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.admin-users-filters input,
.admin-users-filters select,
.admin-user-dialog-fields select,
.admin-tier-field input,
.admin-tier-field select {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-body);
    color: var(--text-primary);
    font: inherit;
}

.admin-users-table-wrap {
    overflow-x: auto;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.73rem;
}

.admin-users-table th,
.admin-users-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.admin-users-table th {
    color: var(--text-muted);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-users-table td > strong,
.admin-users-table td > span {
    display: block;
}

.admin-users-table td > span {
    margin-top: 3px;
    color: var(--text-muted);
}

.admin-user-badge {
    display: inline-flex !important;
    width: fit-content;
    margin: 0 !important;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--sidebar-hover);
    color: var(--text-secondary) !important;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: capitalize;
}

.admin-user-badge--admin,
.admin-user-badge--tier {
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
    color: var(--primary-color) !important;
}

.admin-user-badge--warning,
.admin-user-excess {
    color: var(--warning) !important;
}

.admin-user-excess {
    display: block;
    margin-top: 5px;
    font-size: 0.66rem;
}

.admin-users-cards {
    display: none;
}

.admin-users-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.admin-users-pagination > div {
    display: flex;
    gap: 7px;
}

.admin-tier-editors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-top: 0;
}

.admin-tier-editor {
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-body) 55%, transparent);
}

.admin-tier-editor > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-tier-editor > header > div {
    display: grid;
    gap: 3px;
}

.admin-tier-editor > header strong {
    text-transform: capitalize;
}

.admin-tier-editor > header span {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.admin-tier-fields {
    display: grid;
    gap: 9px;
}

.admin-tier-limit-controls {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 7px;
}

.admin-user-dialog {
    width: min(560px, 100%);
}

.admin-user-dialog-fields,
.admin-user-impact,
.admin-user-audit {
    grid-column: 1 / -1;
}

.admin-user-dialog-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.admin-user-impact {
    padding: 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 8%, transparent);
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.45;
}

.admin-user-impact--warning {
    background: color-mix(in srgb, var(--warning) 9%, transparent);
    color: var(--warning);
}

.admin-user-audit {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.admin-user-audit summary {
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
}

.admin-user-audit article,
.admin-user-audit p {
    display: grid;
    gap: 3px;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 1100px) {
    .admin-console-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .admin-jobs-header {
        flex-wrap: wrap;
    }

    .admin-tabs {
        width: 100%;
    }

    .admin-tab {
        flex: 1;
        justify-content: center;
    }

    .admin-users-filters {
        grid-template-columns: 1fr;
    }

    .admin-panel-content {
        padding: 14px 16px 16px;
    }

    .admin-users-table-wrap {
        display: none;
    }

    .admin-users-cards {
        display: grid;
        gap: 9px;
    }

    .admin-user-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-radius: 9px;
    }

    .admin-user-card > div:first-child,
    .admin-user-card > p {
        min-width: 0;
    }

    .admin-user-card > div:first-child {
        display: grid;
        gap: 3px;
    }

    .admin-user-card > div:first-child strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-user-card > div:first-child span,
    .admin-user-card p {
        color: var(--text-muted);
        font-size: 0.68rem;
    }

    .admin-user-card > div:nth-child(2),
    .admin-user-card p {
        grid-column: 1 / -1;
    }

    .admin-user-card > div:nth-child(2) {
        display: flex;
        gap: 5px;
    }

    .admin-user-card > .admin-action-button {
        grid-column: 2;
        grid-row: 1;
    }

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

    .admin-tier-limit-controls,
    .admin-user-dialog-fields {
        grid-template-columns: 1fr;
    }

    .admin-health-header {
        flex-wrap: wrap;
    }

    .admin-health-header > .admin-action-button {
        margin-left: 42px;
    }

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

    .admin-health-component + .admin-health-component {
        border-left: 0;
    }

    .admin-health-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .admin-health-incident {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-health-recovery {
        grid-column: 2;
        justify-self: start;
    }

    .admin-jobs-header > .admin-action-button {
        margin-left: 42px;
    }

    .admin-job-runs {
        grid-template-columns: 1fr;
    }

    .admin-job-run:nth-child(odd) {
        border-right: 0;
    }

    .admin-action-row,
    .admin-action-row--stacked {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-action-row > .admin-action-button,
    .admin-action-row--stacked > .admin-action-button {
        grid-column: 2;
        justify-self: start;
    }

    .admin-action-main {
        grid-column: 1 / -1;
    }

    .admin-action-row--stacked > .admin-action-button {
        grid-column: 1 / -1;
        margin-left: 40px;
    }
}

/* Main Content */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 40px;
    overflow-y: auto;
    max-height: 100vh;
}

.main-content>* {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* New Global App Header */
#app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0;
}

#app-header .global-search-container {
    width: 25%;
    min-width: 250px;
    position: relative;
}

/* Page Title Bar Layout (replaces old header functionality) */
.page-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-title-bar h1 {
    font-size: 2rem;
    margin: 0;
}

.page-title-bar .actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dividends-page-title-bar {
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 20px;
}

.dividends-title-copy p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.dividends-page-title-bar .actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.portfolio-context-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portfolio-context-control label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-context-control select {
    min-width: 190px;
    width: auto;
    min-height: 40px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.portfolio-context-manage {
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.portfolio-context-manage:hover {
    color: var(--primary-hover);
}

/* Dividend workspace sections and cashflow ledger. */
.dividend-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto 20px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
}

/* The panel components define display:grid, which can otherwise override the
 * browser's default hidden rule in some CSS/user-agent combinations. */
#dividendsSummaryPanel[hidden],
#dividendsCashflowsPanel[hidden],
#dividendsProjectionsPanel[hidden],
#dividendsCalendarPanel[hidden],
#dividendCalendarMonthView[hidden],
#dividendCalendarAgendaView[hidden],
#dividendCalendarYearView[hidden],
#dividendEventDetail[hidden] {
    display: none !important;
}

.dividend-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 7px 7px 0 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
}

.dividend-tab:hover:not(:disabled),
.dividend-tab:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    color: var(--text-primary);
}

.dividend-tab.is-active {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
    box-shadow: inset 0 -2px 0 var(--primary-color);
}

.dividend-tab:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.dividend-overview-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dividend-projections-panel {
    display: grid;
    gap: 16px;
}

.dividend-projections-panel .dividend-scenario-card {
    margin-bottom: 0;
}

.dividend-overview-card {
    display: grid;
    gap: 6px;
    min-height: 106px;
    padding: 18px 20px;
}

.dividend-overview-card strong {
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.2;
}

.dividend-overview-card small {
    min-height: 1.1em;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.dividend-summary-table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
}

.dividend-position-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 14px;
}

.dividend-position-toolbar label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.dividend-position-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 220px;
    margin-right: 6px;
}

.dividend-position-search > i {
    position: absolute;
    left: 11px;
    z-index: 1;
    color: var(--text-muted);
    pointer-events: none;
}

.dividend-position-toolbar input,
.dividend-position-toolbar select {
    min-height: 34px;
    width: auto;
    min-width: 150px;
    padding: 0.4rem 0.6rem;
    font-size: 0.76rem;
}

.dividend-position-toolbar input {
    min-width: 190px;
}

.dividend-position-toolbar .dividend-position-search input[type="search"] {
    width: 100%;
    min-width: 220px;
    padding-left: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    appearance: none;
}

.dividend-position-search input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.dividend-position-toolbar #dividendPositionCount {
    margin-left: auto;
    font-size: 0.72rem;
}

#dividendsTable th,
#dividendsTable td {
    white-space: nowrap;
}

#dividendsTable {
    width: 100%;
    min-width: 1020px;
    table-layout: auto;
    font-variant-numeric: tabular-nums;
}

#dividendsTable th {
    padding: 8px 7px;
    font-size: 0.68rem;
    letter-spacing: 0.035em;
}

#dividendsTable > tbody > tr > td,
#dividendsTable > tfoot > tr > td {
    padding: 8px 7px;
    font-size: 0.8rem;
}

#dividendsTable th.is-sortable {
    position: relative;
    cursor: pointer;
    user-select: none;
}

#dividendsTable th.is-sortable::after {
    margin-left: 6px;
    color: var(--text-muted);
    content: '↕';
    font-size: 0.7em;
    opacity: 0.65;
}

#dividendsTable th.is-sortable.is-sorted::after {
    color: var(--primary-color);
    content: '↓';
    opacity: 1;
}

#dividendsTable th.is-sortable[aria-sort="ascending"].is-sorted::after {
    content: '↑';
}

#dividendsTable th.is-sortable:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

#dividendsTable th:first-child,
#dividendsTable td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
}

#dividendsTable th:first-child {
    z-index: 3;
}

#dividendsTable th[data-col="nextExDividend"],
#dividendsTable th[data-col="nextPayment"],
#dividendsTable th[data-col="amountPerShare"],
#dividendsTable th[data-col="eligibleShares"],
#dividendsTable th[data-col="expectedGrossAmount"],
#dividendsTable th[data-col="forward12m"] {
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.dividend-position-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.62rem;
    vertical-align: middle;
}

.dividend-position-toggle:hover,
.dividend-position-toggle:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    outline: none;
}

.dividend-position-detail-row td {
    position: static;
    white-space: normal;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
}

.dividend-position-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 4px 2px 6px 26px;
}

.dividend-position-detail .dividend-event-detail-list {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px 16px;
    margin: 0;
}

.dividend-position-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dividend-position-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.dividend-position-pagination span {
    font-size: 0.72rem;
}

.dividend-event-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .dividend-summary-table-wrap {
        overflow-x: visible;
    }

    #dividendsTable {
        min-width: 0;
    }

    #dividendsTable thead {
        display: none;
    }

    #dividendsTable,
    #dividendsTable tbody,
    #dividendsTable tfoot,
    #dividendsTable tbody tr,
    #dividendsTable tfoot tr {
        display: block;
        width: 100%;
    }

    #dividendsTable tbody tr,
    #dividendsTable tfoot tr {
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-card);
    }

    #dividendsTable tbody tr:not(.dividend-position-detail-row) > td,
    #dividendsTable tfoot tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: none;
        white-space: normal;
    }

    #dividendsTable tbody td[data-label]::before,
    #dividendsTable tfoot td[data-label]::before {
        color: var(--text-muted);
        content: attr(data-label);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    #dividendsTable tfoot tr > td:empty {
        display: none;
    }

    #dividendsTable th:first-child,
    #dividendsTable td:first-child {
        position: static;
    }

    .dividend-position-detail-row {
        margin-top: -10px;
    }

    .dividend-position-detail {
        padding-left: 2px;
    }

    .dividend-position-pagination {
        justify-content: center;
    }
}

/* Tax report entitlement states */
.tax-page {
    display: grid;
    gap: 1.25rem;
}

.tax-page-title {
    align-items: flex-end;
    margin-bottom: 0;
}

.tax-page-title h1 { margin: 0.2rem 0 0.35rem; }
.tax-page-title p { margin: 0; color: var(--text-muted); }

.tax-page-kicker {
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tax-year-control { margin: 0; }
.tax-year-control select { width: 9rem; }

.tax-access-status,
.tax-access-error {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 5rem;
}

.tax-access-status[hidden],
.tax-access-error[hidden],
.tax-free-preview[hidden],
#taxPremiumReport[hidden],
#taxPremiumControls[hidden] { display: none; }

.tax-access-status i { color: var(--primary-color); }
.tax-access-error { border-color: color-mix(in srgb, var(--warning) 48%, var(--border-color)); }
.tax-access-error > div { flex: 1; }
.tax-access-error h2 { margin: 0 0 0.2rem; font-size: 1rem; }
.tax-access-error p { margin: 0; color: var(--text-muted); }
.tax-access-error-icon { color: var(--warning); font-size: 1.25rem; }

.tax-free-preview {
    display: grid;
    gap: 1.1rem;
}

.tax-preview-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    border-color: color-mix(in srgb, #8b5cf6 42%, var(--border-color));
    background:
        radial-gradient(circle at 94% 20%, color-mix(in srgb, #8b5cf6 20%, transparent), transparent 34%),
        var(--bg-card);
}

.tax-preview-copy { max-width: 45rem; }
.tax-preview-copy h2 { margin: 0.5rem 0 0.6rem; }
.tax-preview-copy p { margin: 0 0 1.15rem; color: var(--text-muted); line-height: 1.65; }

.tax-preview-badge,
.tax-demo-label {
    display: inline-flex;
    width: fit-content;
    color: #a78bfa;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tax-preview-lock {
    display: grid;
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, #8b5cf6 42%, var(--border-color));
    border-radius: 1.25rem;
    color: #a78bfa;
    background: color-mix(in srgb, #8b5cf6 11%, transparent);
    font-size: 1.7rem;
    transform: rotate(4deg);
}

.tax-preview-mockup {
    position: relative;
    padding-top: 1.4rem;
}

.tax-preview-watermark {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 0.35rem 0.65rem;
    border: 1px solid color-mix(in srgb, #8b5cf6 45%, var(--border-color));
    border-radius: 999px;
    color: #a78bfa;
    background: var(--bg-body);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.tax-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tax-stat-card {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    background: var(--bg-card);
    text-align: center;
}

.tax-stat-value {
    margin-top: 0.55rem;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 800;
}

.tax-preview-table-card h3,
.tax-report-events h3 { margin-top: 0; }

.tax-preview-table-card > p,
.tax-report-events > p { margin-bottom: 1.1rem; }

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

.tax-table-wrap table { width: 100%; min-width: 43rem; }
.tax-preview-table caption { padding: 0 0 0.7rem; color: #a78bfa; text-align: left; font-weight: 700; }

@media (max-width: 760px) {
    .tax-page-title,
    .tax-preview-intro,
    .tax-access-error {
        align-items: stretch;
        flex-direction: column;
    }

    #taxPremiumControls,
    #taxPremiumControls .portfolio-context-control {
        width: 100%;
    }

    .tax-year-control select { width: 100%; }
    .tax-summary-grid { grid-template-columns: minmax(0, 1fr); }
    .tax-preview-lock { position: absolute; top: 1rem; right: 1rem; width: 3rem; height: 3rem; font-size: 1rem; opacity: 0.75; }
    .tax-preview-copy { padding-right: 2.2rem; }
    .tax-access-error .btn { width: 100%; }
}

/* Market asset page */
.market-page-title {
    margin-bottom: 20px;
}

.market-page-title p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.market-page-status {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.market-page-status[hidden] {
    display: none;
}

.market-page-status--loading::before,
.market-chart-status--loading::before {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid var(--border-hover);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: market-status-spin 700ms linear infinite;
    content: '';
}

.market-page-status--error {
    border-color: color-mix(in srgb, var(--danger) 36%, var(--border-color));
    background: color-mix(in srgb, var(--danger) 7%, var(--bg-card));
    color: var(--danger);
}

.market-empty-state {
    display: grid;
    min-height: 300px;
    place-items: center;
    align-content: center;
    gap: 18px;
    padding: 42px 24px;
    text-align: center;
}

.market-empty-state[hidden] {
    display: none;
}

.market-empty-state__icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 1.45rem;
}

.market-empty-state h2 {
    margin-bottom: 7px;
    font-size: 1.2rem;
}

.market-empty-state p {
    max-width: 560px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.stock-details-container[hidden] {
    display: none;
}

.stock-details-container[aria-busy="true"] {
    opacity: 0.62;
    pointer-events: none;
}

.market-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

.market-header-grid .details-header {
    gap: 20px;
    height: 100%;
    margin-bottom: 0;
    padding: 16px 20px;
    box-sizing: border-box;
}

.stock-details-container .details-left,
.stock-details-container .details-right {
    min-width: 0;
}

.stock-details-container .details-left {
    flex: 1 1 auto;
}

.stock-details-container .details-left h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    line-height: 1.1;
}

.stock-details-container .details-left h3 {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.25;
}

.market-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.stock-details-container .details-right {
    flex: 0 1 45%;
}

.market-header-grid .market-watchlist-card {
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
}

.market-header-grid .market-context-card__header {
    align-items: center;
    margin-bottom: 7px;
}

.market-header-grid .market-context-card__header h3 {
    margin: 0;
}

.market-inline-status {
    display: block;
    min-height: 18px;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.market-inline-status:empty {
    min-height: 0;
    margin-top: 0;
}

.market-inline-status--success {
    color: var(--success);
}

.market-inline-status--error {
    color: var(--danger);
}

.market-currency-label {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.market-freshness {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.market-freshness--stale {
    color: color-mix(in srgb, var(--warning) 76%, var(--text-muted));
}

.market-chart-freshness {
    min-height: 16px;
    margin: 7px 0 0;
    text-align: center;
}

.stock-details-container .price-large {
    overflow-wrap: anywhere;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.stock-details-container .details-grid {
    align-items: stretch;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
}

.market-primary-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.market-stats-column {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.market-stats-column > .stats-card {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.stock-details-container .chart-card {
    height: clamp(420px, 58vh, 540px);
    min-width: 0;
    padding: 22px 24px 18px;
}

.stock-details-container .chart-card > h3,
.stock-details-container .stats-card > h3 {
    margin-bottom: 16px;
    font-size: 0.96rem;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.stock-details-container .chart-container {
    min-height: 280px;
}

.market-chart-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.8rem;
}

.market-chart-status[hidden] {
    display: none;
}

.market-chart-status--error {
    color: var(--text-muted);
}

.stock-details-container .chart-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 14px;
    padding: 4px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-body) 74%, transparent);
}

.stock-details-container .chart-controls .btn-sm {
    min-width: 44px;
    border-color: transparent;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.stock-details-container .chart-controls .btn-sm:hover,
.stock-details-container .chart-controls .btn-sm:focus-visible {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.stock-details-container .chart-controls .btn-sm.active {
    color: #ffffff;
}

.stock-details-container .chart-controls .market-benchmark-toggle {
    min-width: 132px;
    margin-left: 5px;
    border-left-color: var(--border-color);
}

.stock-details-container .chart-controls .market-benchmark-toggle.active {
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border-color));
    background: color-mix(in srgb, var(--warning) 13%, transparent);
    color: color-mix(in srgb, var(--warning) 88%, var(--text-primary));
}

.stock-details-container .chart-controls .market-benchmark-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.stock-details-container .stats-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    min-width: 0;
    padding: 22px 24px;
}

.stock-details-container .stats-card .stats-list {
    flex: 0 0 auto;
}

.stock-details-container .stats-list li {
    gap: 18px;
    padding: 10px 0;
    font-size: 0.82rem;
}

.stock-details-container .stats-list span:last-child {
    overflow-wrap: anywhere;
    color: var(--text-primary);
    text-align: right;
}

.stock-details-container .about-section h4 {
    margin-bottom: 7px;
    font-size: 0.84rem;
}

.stock-details-container .about-section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin-top: 16px;
    overflow: hidden;
}

.stock-details-container .description-text {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    font-size: 0.8rem;
    max-height: none;
    overflow-y: auto;
}

.market-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}

.market-context-card {
    min-width: 0;
    padding: 16px;
}

.market-watchlist-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.market-watchlist-target,
.market-watchlist-condition {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.market-watchlist-target > span,
.market-watchlist-condition > span {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 650;
}

.market-header-grid .market-watchlist-form {
    gap: 6px;
}

.market-header-grid .market-watchlist-form input {
    min-width: 0;
    min-height: 32px;
    padding: 6px 8px;
}

.market-header-grid .market-watchlist-form select {
    min-width: 0;
    min-height: 32px;
    padding: 6px 26px 6px 8px;
    font-size: 0.72rem;
}

.market-header-grid .market-watchlist-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    flex-wrap: nowrap;
}

.market-header-grid .market-watchlist-actions .btn {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    justify-content: center;
}

.market-header-grid .market-watchlist-actions .market-icon-only {
    width: 30px;
}

.market-watchlist-notes {
    margin-top: 1px;
}

.market-watchlist-notes summary {
    width: fit-content;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 650;
}

.market-watchlist-notes textarea {
    min-height: 42px;
    margin-top: 5px;
    resize: vertical;
}

.market-context-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.market-context-card__header h3 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.market-context-card__header > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
}

.market-context-card__eyebrow {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.market-context-content,
.market-events-content {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.market-context-empty {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.market-context-empty strong {
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.market-position-portfolio {
    margin: -8px 0 13px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.market-position-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.market-position-metrics div {
    min-width: 0;
}

.market-position-metrics dt {
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.market-position-metrics dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.market-context-link,
.market-icon-link {
    color: var(--primary-color);
    font-size: 0.76rem;
    font-weight: 650;
    text-decoration: none;
}

.market-context-link:hover,
.market-icon-link:hover {
    text-decoration: underline;
}

.market-icon-link {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-size: 0.85rem;
}

.market-event-item {
    position: relative;
    padding: 12px 38px 12px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-body) 55%, transparent);
}

.market-event-item + .market-event-item {
    margin-top: 9px;
}

.market-event-item__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.market-event-item__detail {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.5;
}

.market-event-badge {
    display: inline-flex;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning) 13%, transparent);
    color: color-mix(in srgb, var(--warning) 86%, var(--text-primary));
    font-size: 0.61rem;
    font-weight: 700;
    text-transform: uppercase;
}

.market-report-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.market-report-toggle:hover,
.market-report-toggle:focus-visible {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.market-watchlist-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

.market-watchlist-form label,
.market-dividend-report label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 650;
}

.market-watchlist-form input,
.market-watchlist-form textarea,
.market-dividend-report input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-body) 52%, var(--bg-card));
    color: var(--text-primary);
    font: inherit;
}

.market-watchlist-form textarea {
    min-height: 64px;
    resize: vertical;
}

.market-watchlist-form input:focus,
.market-watchlist-form textarea:focus,
.market-dividend-report input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.market-watchlist-actions,
.market-report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}

.market-danger-button {
    color: var(--danger);
}

.market-dividend-report {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(240px, 1fr);
    gap: 10px 18px;
    align-items: end;
    margin-top: 20px;
    padding: 18px 20px;
}

.market-dividend-report[hidden] {
    display: none;
}

.market-dividend-report strong {
    color: var(--text-primary);
    font-size: 0.84rem;
}

.market-dividend-report p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.market-dividend-report .market-report-actions {
    grid-column: 1 / -1;
    margin-top: 2px;
}

@keyframes market-status-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .market-header-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stock-details-container .details-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .market-stats-column > .stats-card {
        position: relative;
        inset: auto;
        overflow: visible;
    }

    .stock-details-container .chart-card {
        height: 470px;
    }

    .market-user-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {
    .market-page-title {
        margin-bottom: 16px;
    }

    .market-page-title h1 {
        font-size: 1.65rem;
    }

    .market-empty-state {
        min-height: 260px;
        padding: 34px 18px;
    }

    .stock-details-container .details-header {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px;
    }

    .stock-details-container .details-right {
        flex-basis: auto;
        width: 100%;
        text-align: left;
    }

    .stock-details-container .chart-card {
        height: 420px;
        padding: 18px 14px 14px;
    }

    .stock-details-container .chart-container {
        min-height: 245px;
    }

    .stock-details-container .stats-card {
        padding: 18px;
    }

    .stock-details-container .description-text {
        min-height: 0;
        max-height: none;
    }

    .stock-details-container .stats-list li {
        align-items: flex-start;
    }

    .market-user-grid,
    .market-dividend-report {
        grid-template-columns: minmax(0, 1fr);
    }

    .market-events-card {
        grid-column: auto;
    }

    .market-dividend-report .market-report-actions {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .market-page-status--loading::before,
    .market-chart-status--loading::before,
    .stock-details-container {
        animation: none;
        transition: none;
    }
}

.dividend-tab > span:not(.module-status-badge) {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dividend-tab .dividend-tab-beta {
    margin-left: 0;
}

.dividend-cache-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    margin: 14px auto 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.4;
    text-align: right;
    opacity: 0.82;
}

.dividend-cache-status::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--text-muted);
    content: '';
}

.dividend-cashflows-panel {
    display: grid;
    gap: 20px;
}

.dividend-cashflow-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.dividend-cashflow-summary-card {
    display: grid;
    gap: 6px;
    min-height: 106px;
    padding: 18px 20px;
}

.dividend-cashflow-summary-card strong {
    color: var(--text-primary);
    font-size: 1.45rem;
}

.dividend-cashflow-summary-card small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.summary-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dividend-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.dividend-section-heading h2 {
    margin-bottom: 5px;
}

.dividend-section-heading p {
    margin: 0;
    font-size: 0.78rem;
}

.dividend-columns-control {
    flex: 0 0 auto;
}

.dividend-columns-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-body) 72%, transparent);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.dividend-columns-button:hover,
.dividend-columns-button[aria-expanded="true"],
.dividend-columns-button:focus-visible {
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-card));
    color: var(--primary-color);
}

.dividend-columns-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    outline-offset: 2px;
}

.dividend-columns-menu {
    top: calc(100% + 6px);
    right: 0;
    min-width: 218px;
    max-height: 310px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.28);
}

.dividend-columns-menu[hidden] {
    display: none !important;
}

.dividend-columns-menu.is-open {
    display: grid;
    gap: 1px;
}

.dropdown-content.dividend-columns-menu .dividend-column-option {
    display: flex;
    align-items: center;
    min-height: 30px;
    gap: 8px;
    margin: 0;
    padding: 5px 7px;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.dropdown-content.dividend-columns-menu .dividend-column-option:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--text-primary);
}

.dividend-column-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--primary-color);
}

.dividend-column-option span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dividend-beta-badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-color));
    border-radius: 999px;
    color: var(--success);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dividend-cashflow-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dividend-cashflow-form label {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.dividend-cashflow-form input,
.dividend-cashflow-form select,
.dividend-cashflow-form textarea {
    width: 100%;
    min-width: 0;
    padding: 0.63rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-body);
    color: var(--text-primary);
    font: inherit;
    font-weight: 500;
}

.dividend-cashflow-form textarea {
    resize: vertical;
}

.dividend-cashflow-ticker-field > span,
.dividend-cashflow-form label > span {
    display: block;
}

.dividend-cashflow-ticker-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    z-index: 2;
}

.dividend-cashflow-ticker-search > i {
    position: absolute;
    z-index: 1;
    display: block;
    top: 50%;
    left: 11px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    line-height: 14px;
    pointer-events: none;
    transform: translateY(-50%);
}

.dividend-cashflow-ticker-search input {
    padding-left: 32px;
}

.dividend-cashflow-form-wide {
    grid-column: 1 / -1;
}

.dividend-cashflow-form-actions {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}

.dividend-cashflow-form-actions .btn {
    min-height: 40px;
}

.dividend-cashflow-table-wrap {
    overflow-x: auto;
}

.dividend-cashflow-history-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.dividend-cashflow-history-actions > .btn {
    min-height: 34px;
    padding: 0.4rem 0.72rem;
    gap: 6px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.dividend-cashflow-history-actions > #refreshDividendCashflows {
    width: 34px;
    min-width: 34px;
    padding: 0.4rem;
    flex: 0 0 34px;
}

@media (min-width: 981px) {
    .dividend-cashflow-history-actions {
        flex-wrap: nowrap;
    }
}

.dividend-cashflow-import-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-card) 92%, var(--primary-color) 8%);
}

.dividend-cashflow-import-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.dividend-cashflow-file-field {
    display: grid;
    flex: 1 1 280px;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.dividend-cashflow-file-field input[type="file"] {
    min-height: 34px;
    padding: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-body);
    color: var(--text-secondary);
    font: inherit;
}

.dividend-cashflow-import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dividend-cashflow-import-summary-item {
    padding: 5px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
}

.dividend-cashflow-import-summary-item.is-duplicates,
.dividend-cashflow-import-summary-item.is-ambiguous {
    border-color: color-mix(in srgb, var(--warning-color, #f59e0b) 45%, var(--border-color));
    color: var(--warning-color, #f59e0b);
}

.dividend-cashflow-import-summary-item.is-invalid {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border-color));
    color: var(--danger);
}

.dividend-cashflow-import-table-wrap {
    max-height: 360px;
}

#dividendCashflowImportTable {
    width: 100%;
    min-width: 660px;
    table-layout: fixed;
}

#dividendCashflowImportTable th,
#dividendCashflowImportTable td {
    padding: 7px 8px;
    font-size: 0.73rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dividendCashflowImportTable th:nth-child(5),
#dividendCashflowImportTable td:nth-child(5) {
    width: 34%;
}

.dividend-cashflow-import-action {
    min-height: 30px;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.7rem;
}

.dividend-cashflow-import-actions {
    display: flex;
    justify-content: flex-end;
}

.dividend-cashflow-mapping-toggle {
    margin-top: 12px;
}

.dividend-scope-notice {
    margin: -6px 0 14px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    font-size: 0.74rem;
}

.dividend-position-portfolio-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
}

.dividend-event-breakdown-heading {
    margin: 12px 0 4px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.dividend-event-breakdown {
    margin: 0;
    padding-left: 18px;
    font-size: 0.76rem;
}

.dividend-event-breakdown li {
    margin-bottom: 2px;
}

.dividend-tab:focus-visible,
.dividend-position-toggle:focus-visible,
.dividend-event-chip:focus-visible,
.dividend-alerts button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.dividend-event-report {
    margin-top: 10px;
}

.dividend-event-report-form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.dividend-event-report-form label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.dividend-event-report-form input {
    min-height: 30px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.74rem;
}

.dividend-event-report-status {
    font-size: 0.72rem;
}

.dividend-goal-progress {
    height: 6px;
    margin-top: 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    overflow: hidden;
}

.dividend-goal-progress span {
    display: block;
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
}

.dividend-goal-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.dividend-goal-form input {
    flex: 1;
    min-width: 90px;
    min-height: 30px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.74rem;
}

.dividend-goal-edit {
    justify-self: start;
    margin-top: 4px;
}

.dividend-scenario-card {
    margin-bottom: 20px;
}

.dividend-scenario-card summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
}

.dividend-scenario-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 14px;
    align-items: end;
    margin: 12px 0;
}

.dividend-scenario-form label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.dividend-scenario-form input[type="number"] {
    min-height: 32px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.74rem;
}

.dividend-scenario-checkbox {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.dividend-scenario-headline {
    margin: 8px 0;
    font-size: 0.86rem;
    font-weight: 700;
}

.dividend-scenario-table {
    width: auto;
    min-width: 320px;
    font-size: 0.74rem;
}

.dividend-scenario-table th,
.dividend-scenario-table td {
    padding: 4px 10px;
    text-align: left;
}

.dividend-alerts {
    position: relative;
}

.dividend-alerts-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

.dividend-alerts-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    width: min(360px, 92vw);
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.dividend-alerts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.dividend-alerts-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dividend-alert {
    display: grid;
    gap: 2px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
}

.dividend-alert:last-child {
    border-bottom: none;
}

.dividend-alert.is-unread {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    border-radius: 6px;
}

.dividend-alert small {
    color: var(--text-muted);
}

.dividend-alerts-empty {
    margin: 6px 0;
    font-size: 0.74rem;
}

.dividend-alerts-preferences {
    margin-top: 10px;
    font-size: 0.74rem;
}

.dividend-alerts-preferences summary {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 700;
}

.dividend-alert-preference {
    display: block;
    margin: 6px 0 0;
}

.dividend-history-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.dividend-annual-summary-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dividend-annual-summary-controls select {
    min-height: 30px;
    width: auto;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.72rem;
}

.dividend-change-summary {
    margin: 0 0 4px;
    font-size: 0.74rem;
    font-weight: 600;
}

.dividend-change-empty {
    margin: 0;
    font-size: 0.72rem;
}

.dividend-change-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.74rem;
}

.dividend-change-list li {
    margin-bottom: 2px;
}

.dividend-change--increase span { color: var(--positive-color, #22c55e); }
.dividend-change--cut span,
.dividend-change--suspension span { color: var(--negative-color, #ef4444); }

.dividend-history-note {
    margin: 8px 0 0;
    font-size: 0.7rem;
}

.dividend-cashflow-drip-badge {
    display: block;
    margin-top: 3px;
    color: var(--primary-color);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dividend-drip-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    font-size: 0.78rem;
}

.dividend-drip-computed {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.dividend-cashflow-mapping {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 3%, transparent);
}

.dividend-cashflow-mapping-heading h4 {
    margin: 0 0 4px;
    font-size: 0.85rem;
}

.dividend-cashflow-mapping-heading p {
    margin: 0 0 10px;
    font-size: 0.72rem;
}

.dividend-cashflow-mapping-formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}

.dividend-cashflow-mapping-formats label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.dividend-cashflow-mapping-formats select,
.dividend-cashflow-mapping-target {
    min-height: 32px;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.72rem;
}

.dividend-cashflow-mapping-table-wrap {
    max-height: 260px;
    overflow: auto;
}

#dividendCashflowMappingTable {
    width: 100%;
}

#dividendCashflowMappingTable th,
#dividendCashflowMappingTable td {
    padding: 6px 8px;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dividendCashflowMappingTable td .dividend-cashflow-mapping-target {
    width: 100%;
}

.dividends-page-title-bar .btn-secondary,
.dividend-cashflows-panel .btn-secondary {
    min-height: 34px;
    padding: 0.4rem 0.72rem;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-card) 88%, var(--primary-color) 12%);
    color: var(--text-secondary);
    box-shadow: none;
    font-size: 0.72rem;
}

.dividends-page-title-bar .btn-secondary:hover,
.dividends-page-title-bar .btn-secondary:focus-visible,
.dividend-cashflows-panel .btn-secondary:hover,
.dividend-cashflows-panel .btn-secondary:focus-visible {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--bg-card) 80%, var(--primary-color) 20%);
    color: var(--text-primary);
    outline: none;
}

.dividend-cashflow-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 12px 0;
}

.dividend-cashflow-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.dividend-cashflow-toolbar input,
.dividend-cashflow-toolbar select {
    min-height: 32px;
    width: auto;
    min-width: 120px;
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
}

.dividend-cashflow-toolbar #cashflowFilterCount {
    margin-left: auto;
}

.dividend-cashflow-search-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dividend-cashflow-search-caption {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.dividend-cashflow-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 220px;
}

.dividend-cashflow-search > i {
    position: absolute;
    left: 11px;
    z-index: 1;
    color: var(--text-muted);
    pointer-events: none;
}

.dividend-cashflow-search input[type="search"] {
    width: 100%;
    min-width: 220px;
    min-height: 34px;
    padding: 0.4rem 0.6rem 0.4rem 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.76rem;
    appearance: none;
}

.dividend-cashflow-search input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

#dividendCashflowsTable {
    width: 100%;
    min-width: 920px;
    table-layout: auto;
    font-variant-numeric: tabular-nums;
}

#dividendCashflowsTable td,
#dividendCashflowsTable th {
    white-space: nowrap;
}

#dividendCashflowsTable th {
    padding: 8px 7px;
    font-size: 0.68rem;
    letter-spacing: 0.035em;
}

#dividendCashflowsTable > tbody > tr > td {
    padding: 8px 7px;
    font-size: 0.8rem;
}

#dividendCashflowsTable th:first-child,
#dividendCashflowsTable td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
}

#dividendCashflowsTable th:first-child {
    z-index: 3;
}

.dividend-cashflow-status {
    display: inline-flex;
    align-items: center;
    min-width: 80px;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dividend-cashflow-status--reconciled {
    background: color-mix(in srgb, var(--success) 13%, transparent);
    color: var(--success);
}

.dividend-cashflow-status--registered,
.dividend-cashflow-status--corrected {
    background: color-mix(in srgb, var(--warning-color, #f59e0b) 13%, transparent);
    color: var(--warning-color, #f59e0b);
}

.dividend-cashflow-status--voided {
    background: color-mix(in srgb, var(--danger) 13%, transparent);
    color: var(--danger);
}

.dividend-cashflow-source {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
}

.dividend-cashflow-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dividend-cashflow-actions .btn {
    min-height: 30px;
    padding: 0.32rem 0.55rem;
    font-size: 0.68rem;
}

.dividend-calendar-panel {
    display: grid;
    gap: 20px;
}

.dividend-calendar-view-toggle {
    display: flex;
    gap: 5px;
}

.dividend-calendar-view-toggle .btn {
    min-width: 74px;
}

.dividend-calendar-view-toggle .btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.dividend-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.dividend-calendar-navigation {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dividend-calendar-navigation h3 {
    min-width: 170px;
    margin: 0 0 0 8px;
    color: var(--text-primary);
    font-size: 1rem;
    text-align: center;
}

.dividend-calendar-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.dividend-calendar-type-filters {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-body));
}

.dividend-calendar-type-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.dividend-calendar-type-filter + .dividend-calendar-type-filter {
    border-left: 1px solid var(--border-color);
}

.dividend-calendar-type-filter input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.dividend-calendar-type-filter input + span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    color: var(--text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.dividend-calendar-type-filter input:checked + span {
    background: color-mix(in srgb, var(--primary-color) 16%, var(--bg-card));
    color: var(--primary-color);
}

.dividend-calendar-type-filter input:focus-visible + span {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 70%, transparent);
    outline-offset: -2px;
}

.dividend-calendar-type-filter:first-child input:checked + span i {
    color: var(--success);
}

.dividend-calendar-type-filter:nth-child(2) input:checked + span i {
    color: var(--warning-color, #f59e0b);
}

.dividend-calendar-type-filter:nth-child(3) input:checked + span i {
    color: #a78bfa;
}

.dividend-calendar-asset-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 220px;
    z-index: 4;
}

.dividend-calendar-asset-filter > i {
    position: absolute;
    left: 11px;
    z-index: 1;
    color: var(--text-muted);
    pointer-events: none;
}

.dividend-calendar-asset-filter input[type="search"] {
    width: 100%;
    min-width: 220px;
    min-height: 34px;
    padding: 0.4rem 0.6rem 0.4rem 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.76rem;
    appearance: none;
}

.dividend-calendar-asset-filter input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.dividend-calendar-ticker-search .suggestions-list {
    top: calc(100% - 1px);
    display: none;
    max-height: 220px;
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

.dividend-calendar-ticker-search .suggestions-list.active {
    display: block;
}

.dividend-calendar-ticker-search.is-open input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dividend-calendar-ticker-search .suggestion-item {
    min-height: 40px;
    padding: 6px 10px;
}

.dividend-calendar-ticker-search .suggestion-item > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dividend-calendar-ticker-search .suggestion-item .ticker,
.dividend-calendar-ticker-search .suggestion-item .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dividend-calendar-ticker-search .suggestion-item .name {
    color: var(--text-muted);
    font-size: 0.64rem;
}

.dividend-calendar-ticker-search .suggestion-item .exchange {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
}

.dividend-calendar-ticker-search .suggestion-item .ticker {
    font-size: 0.72rem;
}

.dividend-calendar-status-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.dividend-calendar-status-filter select {
    min-height: 34px;
    width: auto;
    min-width: 120px;
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    background-position: right 0.6rem center;
    background-size: 0.85rem;
    font-size: 0.76rem;
}

.dividend-calendar-status {
    min-height: 1.2em;
    margin: 0 0 12px;
    font-size: 0.75rem;
}

.dividend-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 18px;
    align-items: start;
}

.dividend-calendar-month-view {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-body);
}

.dividend-calendar-weekday {
    padding: 9px 8px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: right;
    text-transform: uppercase;
}

.dividend-calendar-weekday:nth-child(7n) {
    border-right: 0;
}

.dividend-calendar-day {
    display: flex;
    min-height: 118px;
    flex-direction: column;
    gap: 4px;
    padding: 7px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
}

.dividend-calendar-day:nth-child(7n) {
    border-right: 0;
}

.dividend-calendar-day:nth-last-child(-n + 7) {
    border-bottom: 0;
}

.dividend-calendar-day.is-outside-month {
    opacity: 0.45;
}

.dividend-calendar-day.is-today {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 65%, transparent);
}

.dividend-calendar-day-number {
    align-self: flex-end;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.dividend-event-chip {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 38%, var(--border-color));
    border-radius: 5px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card));
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.67rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dividend-event-chip:hover,
.dividend-event-chip:focus-visible {
    border-color: var(--primary-color);
    outline: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    outline-offset: 1px;
}

.dividend-event-chip strong,
.dividend-event-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dividend-event-chip--dividend_payment {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border-color));
    background: color-mix(in srgb, var(--success) 12%, var(--bg-card));
}

.dividend-event-chip--dividend_ex {
    border-color: color-mix(in srgb, var(--warning-color, #f59e0b) 55%, var(--border-color));
    background: color-mix(in srgb, var(--warning-color, #f59e0b) 12%, var(--bg-card));
}

.dividend-event-chip--earnings {
    border-color: color-mix(in srgb, #a78bfa 55%, var(--border-color));
    background: color-mix(in srgb, #a78bfa 12%, var(--bg-card));
}

.dividend-event-chip.is-estimated,
.dividend-event-status.is-estimated {
    border-style: dashed;
}

.dividend-event-chip.is-compact {
    min-height: 24px;
}

.dividend-calendar-more {
    align-self: flex-start;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 800;
}

.dividend-calendar-empty {
    margin: 24px 0;
    color: var(--text-muted);
    text-align: center;
}

.dividend-calendar-agenda-view {
    display: grid;
    gap: 12px;
}

.dividend-calendar-year-view {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dividend-calendar-year-month {
    display: flex;
    min-height: 142px;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-card) 88%, var(--primary-color) 12%);
}

.dividend-calendar-year-month-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.dividend-calendar-year-month-trigger {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: left;
}

.dividend-calendar-year-month-trigger:hover,
.dividend-calendar-year-month-trigger:focus-visible {
    color: var(--primary-color);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dividend-calendar-year-month-count,
.dividend-calendar-year-month-meta {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.dividend-calendar-year-month-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dividend-calendar-year-month-amount {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.dividend-calendar-year-month-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.dividend-calendar-year-month-confirmed::before,
.dividend-calendar-year-month-estimated::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 5px 1px 0;
    border-radius: 50%;
    content: '';
}

.dividend-calendar-year-month-confirmed::before {
    background: var(--success);
}

.dividend-calendar-year-month-estimated::before {
    background: var(--warning-color, #f59e0b);
}

.dividend-calendar-year-month-meta {
    margin-top: auto;
    line-height: 1.45;
}

.dividend-calendar-agenda-day {
    padding: 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-body);
}

.dividend-calendar-agenda-day h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.dividend-calendar-agenda-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid var(--border-color);
}

.dividend-calendar-agenda-event:first-of-type {
    border-top: 0;
}

.dividend-calendar-agenda-meta {
    color: var(--text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.dividend-event-detail {
    position: sticky;
    top: 18px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-body);
}

.dividend-event-detail-empty {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.dividend-event-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dividend-event-detail h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.dividend-event-detail > p {
    margin: 7px 0 15px;
    font-size: 0.72rem;
}

.dividend-event-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.dividend-event-status.is-confirmed {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border-color));
    color: var(--success);
}

.dividend-event-detail-list {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

.dividend-event-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-color);
}

.dividend-event-detail-row dt {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.dividend-event-detail-row dd {
    max-width: 160px;
    margin: 0;
    color: var(--text-primary);
    font-size: 0.73rem;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .dividend-cashflow-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dividend-calendar-layout {
        grid-template-columns: 1fr;
    }

    .dividend-calendar-year-view {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dividend-event-detail {
        position: static;
    }
}

@media (max-width: 640px) {
    .dividend-tabs {
        overflow-x: auto;
    }

    .dividend-tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 15px;
    }

    .dividend-cashflow-summary {
        grid-template-columns: 1fr;
    }

    .dividend-overview-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dividend-position-toolbar #dividendPositionCount {
        width: 100%;
        margin-left: 0;
    }

    .dividend-position-search {
        width: 100%;
        min-width: 0;
        margin-right: 0;
    }

    .dividend-position-toolbar .dividend-position-search input[type="search"] {
        min-width: 0;
    }

    .dividend-cashflow-search-group {
        width: 100%;
    }

    .dividend-cashflow-search {
        flex: 1;
        min-width: 0;
    }

    .dividend-cashflow-search input[type="search"] {
        min-width: 0;
    }

    .dividend-cashflow-history-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .dividend-cashflow-form {
        grid-template-columns: 1fr;
    }

    .dividend-cashflow-form-wide {
        grid-column: auto;
    }

    .dividend-section-heading {
        flex-direction: column;
        gap: 10px;
    }

    .dividend-columns-control,
    .dividend-columns-button {
        width: 100%;
    }

    .dividend-columns-menu {
        right: auto;
        left: 0;
        width: min(100%, 260px);
    }

    .dividend-calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .dividend-calendar-navigation {
        width: 100%;
    }

    .dividend-calendar-navigation h3 {
        flex: 1;
        min-width: 0;
    }

    .dividend-calendar-filters {
        width: 100%;
        align-items: stretch;
    }

    .dividend-calendar-type-filters {
        width: 100%;
    }

    .dividend-calendar-type-filter {
        flex: 1;
    }

    .dividend-calendar-type-filter input + span {
        width: 100%;
        justify-content: center;
        padding-inline: 6px;
    }

    .dividend-calendar-asset-filter {
        width: 100%;
        min-width: 0;
    }

    .dividend-calendar-asset-filter input[type="search"] {
        min-width: 0;
    }

    .dividend-calendar-status-filter {
        width: 100%;
    }

    .dividend-calendar-status-filter select {
        flex: 1;
    }

    .dividend-calendar-day {
        min-height: 90px;
        padding: 5px;
    }

    .dividend-event-chip {
        font-size: 0.6rem;
    }

    .dividend-calendar-weekday {
        padding: 7px 4px;
        font-size: 0.56rem;
    }

    .dividend-calendar-agenda-event {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .dividend-calendar-year-view {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dividend-calendar-year-month {
        min-height: 132px;
        padding: 11px;
    }

    .dividend-calendar-year-month-amount {
        font-size: 0.9rem;
    }
}

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

.portfolio-page-title-bar {
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 20px;
}

.portfolio-title-copy p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.current-portfolio-context::before {
    margin: 0 5px;
    color: var(--border-hover);
    content: '•';
}

.portfolio-command-bar,
.portfolio-command-group {
    display: flex;
    align-items: center;
}

.portfolio-command-bar {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: var(--shadow-sm);
}

.portfolio-command-group {
    gap: 3px;
}

.portfolio-command {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.portfolio-command:hover,
.portfolio-command:focus-visible {
    border-color: var(--border-color);
    background: var(--sidebar-hover);
    color: var(--text-primary);
    outline: none;
}

.portfolio-command--primary {
    border-color: color-mix(in srgb, var(--primary-color) 38%, transparent);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
}

.portfolio-command--primary:hover,
.portfolio-command--primary:focus-visible {
    border-color: color-mix(in srgb, var(--primary-color) 58%, transparent);
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
}

.portfolio-command--icon-only {
    width: 34px;
    padding: 0;
}

.portfolio-command-divider {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: var(--border-color);
}

.portfolio-more-actions {
    position: relative;
}

.portfolio-danger-menu[hidden],
.portfolio-danger-dialog[hidden],
.portfolio-action-status[hidden],
.portfolio-danger-dialog__error[hidden] {
    display: none !important;
}

.portfolio-danger-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    width: 288px;
    padding: 7px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--bg-card);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.portfolio-danger-menu__label {
    margin: 2px 7px 6px;
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portfolio-danger-action {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}

.portfolio-danger-action:hover,
.portfolio-danger-action:focus-visible {
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    color: var(--danger);
    outline: none;
}

.portfolio-danger-action > i {
    color: var(--danger);
    text-align: center;
}

.portfolio-danger-action span {
    display: grid;
    gap: 2px;
}

.portfolio-danger-action strong {
    font-size: 0.78rem;
}

.portfolio-danger-action small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 450;
    line-height: 1.3;
}

.portfolio-danger-action:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.portfolio-action-status {
    margin: -9px 0 18px auto;
    width: fit-content;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 8%, var(--bg-card));
    color: var(--success);
    font-size: 0.76rem;
}

.portfolio-action-status.is-error {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border-color));
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
    color: var(--danger);
}

.portfolio-danger-dialog {
    z-index: 1200;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.portfolio-danger-dialog.is-visible {
    display: flex;
}

.portfolio-danger-dialog__content {
    position: relative;
    width: min(440px, 100%);
    padding: 30px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border-color));
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
    animation: slideIn 0.24s ease-out;
}

.portfolio-danger-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.portfolio-danger-dialog__close:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.portfolio-danger-dialog__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-size: 1.15rem;
}

.portfolio-danger-dialog__eyebrow {
    margin: 0 0 5px;
    color: var(--danger);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.portfolio-danger-dialog h2 {
    margin: 0 0 9px;
    font-size: 1.3rem;
}

.portfolio-danger-dialog #portfolioDangerDescription {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.portfolio-danger-dialog__notice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 10px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger) 7%, transparent);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.portfolio-danger-dialog__notice i {
    color: var(--danger);
}

.portfolio-danger-dialog__error {
    margin: 10px 0 0;
    color: var(--danger);
    font-size: 0.76rem;
}

.portfolio-danger-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}

.portfolio-danger-dialog__actions .btn {
    padding: 0.62rem 1rem;
    font-size: 0.8rem;
}

.portfolio-danger-confirm {
    background: var(--danger);
    color: #fff;
}

.portfolio-danger-confirm:hover:not(:disabled) {
    filter: brightness(1.08);
}

.portfolio-danger-confirm:disabled {
    opacity: 0.65;
    cursor: wait;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.card {
    background-color: var(--bg-card);
    padding: 24px;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover);
}

.card h3,
.card h2 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.fx-rates-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: var(--text-secondary);
}

.fx-rates-notice i {
    color: var(--warning-color, #f59e0b);
}

.amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 4px 0 0;
    letter-spacing: -0.02em;
}

.chart-container {
    min-height: 450px;
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.chart-header h3 {
    margin: 0;
}

.chart-controls {
    display: flex;
    gap: 6px;
}

.range-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.range-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.range-btn.active {
    background: rgba(56, 189, 248, 0.15);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.chart-container canvas {
    flex: 1;
    min-height: 0;
}

/* Two-column charts row */
.charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

/* Donut card overrides */
.donut-card {
    height: 450px;
    display: flex;
    flex-direction: column;
}

.donut-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 0;
}

.donut-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
}

/* Active ticker filter chip in trend chart header */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 20px;
    padding: 3px 10px 3px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    animation: fadeIn 0.2s ease;
}

.filter-chip-label {
    letter-spacing: 0.03em;
}

.filter-chip-reset {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.filter-chip-reset:hover {
    opacity: 1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive: stack charts vertically on smaller screens */
@media (max-width: 1100px) {
    .charts-row {
        grid-template-columns: 1fr;
    }

    .donut-card {
        height: 350px;
    }
}


/* Forms */
.form-group {
    margin-bottom: 1.25rem;
}

/* Custom trend chart tooltip */
.trend-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-size: 0.82rem;
}

.tt-date {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.tt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.tt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tt-label {
    flex: 1;
    color: var(--text-secondary);
}

.tt-value {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tt-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.tt-gain .tt-label,
.tt-gain .tt-value {
    color: #4ade80;
}

.tt-loss .tt-label,
.tt-loss .tt-value {
    color: #f87171;
}


.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    /* Changed to solid for better contrast */
    color: var(--text-primary);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* Specific Select Styles */
select {
    padding-right: 2.5rem;
    /* Make room for arrow */
    cursor: pointer;
}

/* Option Styles for Dark Mode Visibility */
option {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 10px;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    gap: 8px;
}

.btn-primary {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.4);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-sm:hover {
    background-color: var(--bg-body);
    border-color: var(--text-muted);
}

.watchlist-activity-card {
    margin-bottom: 1rem;
}

.watchlist-activity-header {
    align-items: flex-start;
}

.watchlist-cadence,
.watchlist-activity-empty {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.watchlist-unread-count {
    min-width: 1.5rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.watchlist-alert-activity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0.65rem;
    padding: 0 1rem 1rem;
}

.watchlist-alert-item {
    display: grid;
    gap: 0.22rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-body);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.watchlist-alert-item.is-unread {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.watchlist-alert-item:hover,
.watchlist-alert-item:focus-visible {
    border-color: var(--primary-color);
}

.watchlist-alert-title {
    font-size: 0.82rem;
}

.watchlist-alert-body,
.watchlist-alert-time {
    color: var(--text-muted);
    font-size: 0.72rem;
}

/* Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th {
    text-align: left;
    padding: 16px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-color);
}

td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
}

/* Status Colors used in Table */
.gain-positive {
    color: var(--success);
    font-weight: 600;
}

.tax-error {
    color: var(--danger);
}

.gain-negative {
    color: var(--danger);
    font-weight: 600;
}

/* =========================================
   Premium Horizontal Carousel
   ========================================= */
.events-carousel-container {
    position: relative;
    flex: 1;
    min-width: 0;
}

.events-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 12px;
    /* Soft scrollbar styling overridden for buttons */
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start;
    scroll-behavior: smooth;
    /* Center items if they don't fill the parent */
}

/* Fallback for center alignment when few items */
@media (min-width: 768px) {
    .events-carousel {
        justify-content: center;
    }

    .events-carousel.is-scrollable {
        justify-content: flex-start;
    }
}

.events-carousel::-webkit-scrollbar {
    display: none;
}

/* Carousel Inner padding removed to keep flush edge */

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: rgba(30, 41, 59, 1);
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg), 0 0 10px rgba(56, 189, 248, 0.2);
}

.carousel-btn.left {
    left: 0px;
}

.carousel-btn.right {
    right: 0px;
}

.event-card {
    min-width: 250px;
    appearance: none;
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(30, 41, 59, 0.4) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.event-card:hover {
    box-shadow: var(--shadow-lg), 0 0 15px rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    transform: translateY(-2px);
}

.event-card:focus-visible {
    border-color: var(--primary-color);
    outline: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    outline-offset: 2px;
}

.event-card.placeholder {
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-style: dashed;
    cursor: default;
}

.event-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.event-card-date {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.event-card-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.badge-warning {
    background: rgba(250, 204, 21, 0.15);
    color: var(--warning);
    border: 1px solid rgba(250, 204, 21, 0.3);
}

.badge-neutral {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.event-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.event-card-ticker {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.02em;
}

.event-card-name {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-amount {
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-card-amount span {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8rem;
}

/* Compact portfolio overview */
.upcoming-events-section {
    margin-bottom: 16px;
}

.upcoming-events-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.upcoming-events-heading h2 {
    margin: 0;
    font-size: 1.05rem;
}

.upcoming-events-heading p {
    margin: 0;
    font-size: 0.72rem;
    text-align: right;
}

.events-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 34px;
    box-sizing: border-box;
}

.upcoming-events-section .events-carousel-container {
    overflow: hidden;
    margin: 0;
}

.upcoming-events-section .events-carousel {
    gap: 10px;
    /* Keep the lifted hover state and focus outline inside the clipped viewport. */
    padding: 6px 0 4px;
}

.upcoming-events-section .carousel-btn {
    width: 30px;
    height: 30px;
}

.upcoming-events-section .event-card {
    min-width: 220px;
    padding: 11px 12px;
    gap: 7px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.upcoming-events-section .event-card.placeholder {
    min-height: 72px;
}

.upcoming-events-section .event-card-header {
    padding-bottom: 6px;
}

.upcoming-events-section .event-card-date {
    font-size: 0.9rem;
}

.upcoming-events-section .event-card-badge {
    padding: 2px 6px;
    font-size: 0.58rem;
}

.upcoming-events-section .event-card-body {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.upcoming-events-section .event-card-ticker {
    font-size: 1rem;
}

.upcoming-events-section .event-card-name {
    max-width: 135px;
    font-size: 0.75rem;
}

.event-card-values {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.upcoming-events-section .event-card-amount {
    flex: 0 0 auto;
    margin: 0;
    min-width: 92px;
    justify-content: center;
    padding: 6px 10px;
    font-size: 0.9rem;
}

.event-card-amount--only strong {
    color: var(--text-primary);
    font-size: 0.92rem;
    letter-spacing: -0.01em;
}

body.upcoming-dividend-detail-open {
    overflow: hidden;
}

.upcoming-dividend-detail-modal {
    z-index: 1250;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;
    perspective: 1200px;
}

.upcoming-dividend-detail-modal[hidden] {
    display: none;
}

.upcoming-dividend-detail-modal.is-visible {
    display: flex;
}

.upcoming-dividend-detail-content {
    position: relative;
    width: min(680px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 30px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-color));
    border-radius: 22px;
    background: var(--bg-card);
    box-shadow: 0 32px 85px rgba(0, 0, 0, 0.48), 0 0 55px color-mix(in srgb, var(--primary-color) 8%, transparent);
    transform-origin: center center;
    animation: upcomingDividendDetailPop 0.28s ease-out both;
}

.upcoming-dividend-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.upcoming-dividend-detail-close:hover,
.upcoming-dividend-detail-close:focus-visible {
    background: var(--sidebar-hover);
    color: var(--text-primary);
    outline: none;
}

.upcoming-dividend-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 36px;
}

.upcoming-dividend-detail-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    font-size: 1.15rem;
}

.upcoming-dividend-detail-eyebrow {
    margin: 0 0 3px;
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.upcoming-dividend-detail-header h2 {
    margin: 0;
    font-size: 1.45rem;
}

.upcoming-dividend-detail-header #upcomingDividendDetailName {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.upcoming-dividend-detail-total {
    display: grid;
    justify-items: center;
    gap: 5px;
    margin: 24px 0 18px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border-color));
    border-radius: 15px;
    background: color-mix(in srgb, var(--success) 7%, var(--bg-card));
    text-align: center;
}

.upcoming-dividend-detail-total > span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.upcoming-dividend-detail-total > strong {
    color: var(--text-primary);
    font-size: clamp(1.8rem, 6vw, 2.45rem);
    letter-spacing: -0.04em;
}

.upcoming-dividend-detail-total > small {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.upcoming-dividend-detail-total > small.is-confirmed {
    background: color-mix(in srgb, var(--success) 13%, transparent);
    color: var(--success);
}

.upcoming-dividend-detail-total > small.is-estimated {
    background: color-mix(in srgb, var(--warning) 13%, transparent);
    color: var(--warning);
}

.upcoming-dividend-detail-calculation {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-body) 55%, var(--bg-card));
}

.upcoming-dividend-detail-calculation h3 {
    margin: 0 0 13px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.upcoming-dividend-detail-formula {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.upcoming-dividend-detail-formula > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.upcoming-dividend-detail-formula span {
    color: var(--text-muted);
    font-size: 0.67rem;
    line-height: 1.35;
}

.upcoming-dividend-detail-formula strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.92rem;
    text-overflow: ellipsis;
}

.upcoming-dividend-detail-formula > i {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.upcoming-dividend-detail-formula-total strong {
    color: var(--success);
}

.upcoming-dividend-detail-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 0;
}

.upcoming-dividend-detail-dates > div {
    padding: 12px 13px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
}

.upcoming-dividend-detail-dates dt {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.upcoming-dividend-detail-dates dd {
    margin: 5px 0 0;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
}

.upcoming-dividend-detail-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 0.69rem;
    line-height: 1.45;
}

.upcoming-dividend-detail-note i {
    margin-top: 2px;
    color: var(--primary-color);
}

@keyframes upcomingDividendDetailPop {
    from { opacity: 0; transform: translateY(12px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes upcomingDividendDetailFlipIn {
    from { opacity: 0; transform: rotateY(-72deg) scale(0.78); }
    65% { opacity: 1; transform: rotateY(7deg) scale(1.025); }
    to { opacity: 1; transform: rotateY(0) scale(1); }
}

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .upcoming-dividend-detail-content {
        animation: upcomingDividendDetailFlipIn 0.46s cubic-bezier(0.2, 0.82, 0.25, 1.08) both;
    }
}

@media (max-width: 680px) {
    .upcoming-dividend-detail-modal {
        padding: 8px;
    }

    .upcoming-dividend-detail-content {
        max-height: calc(100dvh - 16px);
        padding: 22px 16px;
        border-radius: 16px;
    }

    .upcoming-dividend-detail-formula,
    .upcoming-dividend-detail-dates {
        grid-template-columns: 1fr;
    }

    .upcoming-dividend-detail-formula > div {
        padding-bottom: 9px;
        border-bottom: 1px solid var(--border-color);
    }

    .upcoming-dividend-detail-formula > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .upcoming-dividend-detail-formula > i {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .upcoming-dividend-detail-content {
        animation-duration: 0.01ms;
    }
}

/* Global application toolbar and securities search */
#app-header {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
    box-shadow: var(--shadow-sm);
}

#app-header .global-search-container {
    position: relative;
    flex: 0 1 680px;
    width: min(100%, 680px);
    min-width: 0;
    max-width: 680px;
    margin: 0;
}

#app-header .global-search-field {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
}

#app-header .global-search-field .search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 15px;
    color: var(--text-muted);
    font-size: 0.78rem;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color var(--transition-fast);
}

#app-header .global-search-field:focus-within .search-icon {
    color: var(--primary-color);
}

#app-header #globalSearchInput {
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 72px 0 42px !important;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    outline: none;
    background: color-mix(in srgb, var(--bg-body) 76%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

#app-header #globalSearchInput::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

#app-header #globalSearchInput:focus {
    border-color: color-mix(in srgb, var(--primary-color) 66%, var(--border-color));
    background: var(--bg-body);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.global-search-shortcut {
    position: absolute;
    right: 12px;
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-bottom-color: var(--border-hover);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.62rem;
    line-height: 1;
    pointer-events: none;
}

.global-search-container.has-query .global-search-shortcut {
    display: none;
}

.global-search-clear {
    position: absolute;
    right: 8px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
}

.global-search-clear[hidden] {
    display: none;
}

.global-search-clear:hover,
.global-search-clear:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    outline: none;
}

#app-header #globalSearchResults {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    max-height: min(360px, calc(100vh - 130px));
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.3);
}

#app-header #globalSearchResults[hidden] {
    display: none;
}

#app-header #globalSearchResults:not([hidden]) {
    display: block;
}

#app-header .global-search-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 18px;
    min-height: 48px;
    align-items: center;
    gap: 11px;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
}

#app-header .global-search-item:hover,
#app-header .global-search-item.is-active {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    color: var(--text-primary);
}

#app-header .global-search-item .symbol {
    overflow: hidden;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-item-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.global-search-item-name-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

#app-header .global-search-item .name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.73rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-header .global-search-item-kind {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border-color));
    border-radius: 5px;
    background: color-mix(in srgb, var(--warning) 9%, transparent);
    color: var(--warning);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

#app-header .global-search-item .exchange {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-item-arrow {
    color: var(--text-muted);
    font-size: 0.62rem;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.global-search-item:hover .global-search-item-arrow,
.global-search-item.is-active .global-search-item-arrow {
    color: var(--primary-color);
    opacity: 1;
    transform: translateX(0);
}

.global-search-message {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.global-search-message.is-loading::before {
    width: 13px;
    height: 13px;
    margin-right: 9px;
    border: 2px solid var(--border-hover);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: global-search-spin 700ms linear infinite;
    content: '';
}

.global-search-message.is-error {
    color: var(--danger);
}

@keyframes global-search-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    #app-header {
        flex-direction: row;
        align-items: center;
        gap: 9px;
        min-height: 58px;
        margin-bottom: 18px;
        padding: 7px 8px;
        border-radius: 12px;
    }

    #app-header .mobile-menu-btn {
        display: grid;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        padding: 0;
        place-items: center;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: color-mix(in srgb, var(--bg-body) 72%, transparent);
        color: var(--text-primary);
        font-size: 1rem;
    }

    #app-header .global-search-container {
        flex: 1 1 auto;
        width: 0;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

    #app-header #globalSearchInput {
        height: 42px;
        padding: 0 38px 0 38px !important;
        font-size: 0.76rem;
    }

    #app-header .global-search-field .search-icon {
        left: 13px;
    }

    .global-search-shortcut {
        display: none;
    }

    #app-header #globalSearchResults {
        max-height: min(330px, calc(100dvh - 86px));
    }
}

/* Watchlist workspace */
.watchlist-page,
.watchlist-page * {
    min-width: 0;
}

.watchlist-page {
    display: grid;
    gap: 18px;
}

.watchlist-page-title {
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 0;
}

.watchlist-title-copy h1 {
    margin: 3px 0 5px;
}

.watchlist-title-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.watchlist-eyebrow {
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.watchlist-title-actions,
.watchlist-dialog-actions,
.watchlist-row-actions,
.watchlist-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.watchlist-icon-button,
.watchlist-row-action,
.watchlist-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-card) 88%, var(--text-primary) 3%);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.watchlist-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.watchlist-add-button {
    min-height: 40px;
    padding: 0.62rem 1rem;
    font-size: 0.82rem;
}

.watchlist-icon-button:hover,
.watchlist-row-action:hover,
.watchlist-dialog-close:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-card));
    color: var(--primary-color);
}

.watchlist-icon-button:disabled,
.watchlist-row-action:disabled {
    opacity: 0.55;
    cursor: wait;
}

.watchlist-icon-button[aria-busy="true"] i {
    animation: watchlist-spin 0.8s linear infinite;
}

@keyframes watchlist-spin {
    to { transform: rotate(360deg); }
}

.watchlist-page-status {
    padding: 10px 13px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-card));
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.watchlist-page-status.is-success {
    border-color: color-mix(in srgb, var(--success) 32%, var(--border-color));
    background: color-mix(in srgb, var(--success) 7%, var(--bg-card));
    color: var(--success);
}

.watchlist-page-status.is-error {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border-color));
    background: color-mix(in srgb, var(--danger) 7%, var(--bg-card));
    color: var(--danger);
}

.watchlist-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.watchlist-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.watchlist-kpi-icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 11%, transparent);
    color: var(--primary-color);
}

.watchlist-kpi-icon.is-success {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success);
}

.watchlist-kpi-icon.is-warning {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--warning);
}

.watchlist-kpi-icon.is-muted {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
}

.watchlist-kpi > div {
    display: grid;
    gap: 3px;
}

.watchlist-kpi > div > span {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.watchlist-kpi strong {
    color: var(--text-primary);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.watchlist-activity-card,
.watchlist-assets-card {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.watchlist-activity-card:hover,
.watchlist-assets-card:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.watchlist-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
}

.watchlist-section-heading h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.8rem;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.watchlist-section-heading p,
.watchlist-cadence {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.watchlist-alert-activity {
    padding: 0 18px 16px;
}

.watchlist-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px 14px;
}

.watchlist-filter-search {
    position: relative;
    flex: 0 1 290px;
}

.watchlist-filter-search > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--text-muted);
    font-size: 0.76rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.watchlist-filter-search input,
.watchlist-form-field input,
.watchlist-form-field select,
.watchlist-form-field textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-body) 72%, var(--bg-card));
    color: var(--text-primary);
    font: inherit;
}

.watchlist-filter-search input {
    height: 38px;
    padding: 0 12px 0 34px;
    font-size: 0.75rem;
}

.watchlist-state-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-body) 70%, var(--bg-card));
    scrollbar-width: none;
}

.watchlist-state-filters::-webkit-scrollbar {
    display: none;
}

.watchlist-filter-chip {
    min-height: 28px;
    padding: 4px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.67rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

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

.watchlist-filter-chip.is-active {
    background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-card));
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.watchlist-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--border-color);
}

.watchlist-table {
    width: 100%;
    min-width: 850px;
    table-layout: fixed;
}

.watchlist-table th {
    height: 38px;
    padding: 0 10px;
    border-bottom-width: 1px;
    font-size: 0.62rem;
}

.watchlist-table th:first-child,
.watchlist-table td:first-child {
    width: 18%;
    padding-left: 18px;
}

.watchlist-table th:nth-child(2),
.watchlist-table td:nth-child(2),
.watchlist-table th:nth-child(3),
.watchlist-table td:nth-child(3) {
    width: 14%;
}

.watchlist-table th:nth-child(4),
.watchlist-table td:nth-child(4) {
    width: 13%;
}

.watchlist-table th:nth-child(5),
.watchlist-table td:nth-child(5) {
    width: 12%;
}

.watchlist-table th:nth-child(6),
.watchlist-table td:nth-child(6) {
    width: 13%;
}

.watchlist-table th:last-child,
.watchlist-table td:last-child {
    width: 16%;
    padding-right: 18px;
}

.watchlist-table th button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.watchlist-table th button:hover,
.watchlist-table th[aria-sort]:not([aria-sort="none"]) button {
    color: var(--primary-color);
}

.watchlist-table th button i {
    font-size: 0.55rem;
}

.watchlist-table th button .watchlist-header-help {
    color: var(--text-muted);
    cursor: help;
}

.watchlist-table td {
    height: 62px;
    padding: 8px 10px;
    overflow: hidden;
    font-size: 0.73rem;
}

.watchlist-table tbody tr:last-child td {
    border-bottom: 0;
}

.watchlist-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color) 3%, transparent);
}

.watchlist-asset-link,
.watchlist-asset-link > span,
.watchlist-cell-value,
.watchlist-cell-detail,
.watchlist-freshness {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-asset-link strong,
.watchlist-cell-value {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 650;
}

.watchlist-asset-link strong {
    color: var(--primary-color);
}

.watchlist-asset-name,
.watchlist-cell-detail {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.63rem;
}

.watchlist-status-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-status-badge.is-armed {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success);
}

.watchlist-status-badge.is-triggered {
    background: color-mix(in srgb, var(--warning) 11%, transparent);
    color: var(--warning);
}

.watchlist-status-badge.is-review {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.watchlist-distance,
.watchlist-freshness {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 650;
}

.watchlist-distance.is-reached,
.watchlist-freshness.is-fresh {
    color: var(--success);
}

.watchlist-distance.is-pending,
.watchlist-freshness.is-stale {
    color: var(--warning);
}

.watchlist-freshness.is-missing {
    color: var(--danger);
}

.watchlist-row-actions {
    justify-content: flex-start;
    overflow: visible !important;
}

.watchlist-row-action {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border-radius: 7px;
    font-size: 0.68rem;
}

.watchlist-row-action.is-danger:hover {
    border-color: color-mix(in srgb, var(--danger) 50%, var(--border-color));
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
    color: var(--danger);
}

.watchlist-mobile-cards {
    display: none;
}

.watchlist-mobile-card {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-body) 55%, var(--bg-card));
}

.watchlist-mobile-card + .watchlist-mobile-card {
    margin-top: 0;
}

.watchlist-mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
}

.watchlist-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.watchlist-mobile-field {
    display: grid;
    gap: 2px;
}

.watchlist-mobile-field > span {
    color: var(--text-muted);
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.watchlist-mobile-field > strong {
    color: var(--text-primary);
    font-size: 0.73rem;
}

.watchlist-mobile-field > small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-mobile-note {
    margin: 0;
    padding: 8px 9px;
    border-left: 2px solid var(--border-hover);
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.45;
}

.watchlist-mobile-actions {
    justify-content: flex-end;
    padding-top: 9px;
    border-top: 1px solid var(--border-color);
}

.watchlist-empty-state {
    display: grid;
    justify-items: center;
    padding: 38px 20px 42px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.watchlist-empty-state[hidden],
.watchlist-table-wrap[hidden],
.watchlist-mobile-cards[hidden],
.watchlist-modal[hidden],
.watchlist-combobox-results[hidden],
.watchlist-selected-asset[hidden] {
    display: none !important;
}

.watchlist-empty-icon,
.watchlist-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 1.1rem;
}

.watchlist-empty-state h3 {
    margin: 13px 0 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-transform: none;
}

.watchlist-empty-state p,
.watchlist-loading-message {
    max-width: 390px;
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 0.73rem;
}

.watchlist-loading-message {
    padding: 20px;
}

.watchlist-loading-message.is-error {
    color: var(--danger);
}

body.watchlist-dialog-open {
    overflow: hidden;
}

.watchlist-modal.is-open {
    display: grid;
    place-items: center;
    padding: 20px;
}

.watchlist-dialog.modal-content {
    width: min(520px, 100%);
    max-width: 520px;
    margin: 0;
    padding: 22px;
    overflow: visible;
    border-radius: 14px;
}

.watchlist-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.watchlist-dialog-header h2,
.watchlist-confirm-dialog h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    text-transform: none;
}

.watchlist-dialog-header p,
.watchlist-confirm-dialog > p:not(.watchlist-form-status) {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.watchlist-dialog-close {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.watchlist-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.watchlist-form-field {
    position: relative;
    display: grid;
    gap: 6px;
    margin-bottom: 13px;
    color: var(--text-secondary);
    font-size: 0.69rem;
    font-weight: 650;
}

.watchlist-form-field input,
.watchlist-form-field select {
    height: 40px;
    padding: 0 11px;
    font-size: 0.76rem;
}

.watchlist-form-field textarea {
    min-height: 74px;
    padding: 10px 11px;
    resize: vertical;
    font-size: 0.76rem;
    line-height: 1.45;
}

.watchlist-combobox-field {
    position: relative;
}

.watchlist-combobox-field > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--text-muted);
    font-size: 0.72rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.watchlist-combobox-field input {
    padding-left: 34px;
}

.watchlist-combobox-results {
    position: absolute;
    z-index: 1010;
    top: 67px;
    right: 0;
    left: 0;
    max-height: 230px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.watchlist-search-result {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.watchlist-search-result:last-child {
    border-bottom: 0;
}

.watchlist-search-result:hover,
.watchlist-search-result.is-active {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card));
}

.watchlist-search-result > strong {
    overflow: hidden;
    color: var(--primary-color);
    font-size: 0.7rem;
    text-overflow: ellipsis;
}

.watchlist-search-result > span {
    display: grid;
    gap: 2px;
    overflow: hidden;
}

.watchlist-search-result > span > span,
.watchlist-search-result > span > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-search-result > span > span {
    color: var(--text-primary);
    font-size: 0.68rem;
}

.watchlist-search-result > span > small,
.watchlist-search-result > i {
    color: var(--text-muted);
    font-size: 0.6rem;
}

.watchlist-search-message {
    padding: 13px;
    color: var(--text-muted);
    font-size: 0.69rem;
    font-weight: 400;
}

.watchlist-search-message.is-error {
    color: var(--danger);
}

.watchlist-selected-asset {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 6%, transparent);
}

.watchlist-selected-asset > i {
    color: var(--success);
}

.watchlist-selected-asset > span {
    display: grid;
    gap: 2px;
}

.watchlist-selected-asset strong {
    color: var(--text-primary);
    font-size: 0.71rem;
}

.watchlist-selected-asset small,
.watchlist-field-hint {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 400;
}

.watchlist-field-hint {
    margin: 0;
}

.watchlist-form-status {
    min-height: 18px;
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.watchlist-form-status.is-error {
    color: var(--danger);
}

.watchlist-dialog-actions {
    justify-content: flex-end;
    margin-top: 4px;
}

.watchlist-dialog-actions .btn {
    min-height: 38px;
    padding: 0.55rem 0.9rem;
    font-size: 0.74rem;
}

.watchlist-secondary-button {
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-body) 68%, var(--bg-card));
    color: var(--text-secondary);
}

.watchlist-secondary-button:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.watchlist-confirm-dialog {
    max-width: 400px !important;
    overflow: hidden !important;
    text-align: center;
}

.watchlist-confirm-icon {
    margin-bottom: 13px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.watchlist-confirm-dialog .watchlist-dialog-actions {
    justify-content: center;
    margin-top: 14px;
}

.watchlist-danger-button {
    background: var(--danger);
    color: #fff;
}

.watchlist-danger-button:hover {
    filter: brightness(1.07);
}

.watchlist-icon-button:focus-visible,
.watchlist-row-action:focus-visible,
.watchlist-dialog-close:focus-visible,
.watchlist-filter-chip:focus-visible,
.watchlist-search-result:focus-visible,
.watchlist-table th button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .watchlist-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .watchlist-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .watchlist-filter-search {
        flex-basis: auto;
        width: 100%;
    }

    .watchlist-state-filters {
        align-self: flex-start;
        max-width: 100%;
    }

    .watchlist-table-wrap {
        display: none;
    }

    .watchlist-mobile-cards:not([hidden]) {
        display: grid;
        gap: 9px;
        padding: 0 13px 13px;
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 768px) {
    .watchlist-page {
        gap: 12px;
    }

    .watchlist-page-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 10px;
    }

    .watchlist-title-copy h1 {
        font-size: 1.45rem;
    }

    .watchlist-title-copy p {
        font-size: 0.72rem;
    }

    .watchlist-title-actions {
        align-self: end;
    }

    .watchlist-add-button {
        width: 40px;
        padding: 0;
    }

    .watchlist-add-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .watchlist-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .watchlist-kpi {
        min-height: 70px;
        padding: 10px 11px;
    }

    .watchlist-kpi-icon {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
        font-size: 0.75rem;
    }

    .watchlist-kpi > div > span {
        font-size: 0.56rem;
    }

    .watchlist-kpi strong {
        font-size: 1.08rem;
    }

    .watchlist-section-heading,
    .watchlist-toolbar {
        padding-right: 13px;
        padding-left: 13px;
    }

    .watchlist-alert-activity {
        grid-template-columns: 1fr;
        padding-right: 13px;
        padding-left: 13px;
    }

    .watchlist-state-filters {
        width: 100%;
    }

    .watchlist-modal.is-open {
        align-items: end;
        padding: 8px;
    }

    .watchlist-dialog.modal-content {
        width: 100%;
        max-height: calc(100dvh - 16px);
        margin: 0;
        padding: 19px 16px;
        overflow-y: auto;
        border-radius: 14px;
    }

    .watchlist-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .watchlist-dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .watchlist-dialog-actions .btn {
        width: 100%;
    }

    .watchlist-combobox-results {
        position: static;
        max-height: 190px;
        margin-top: -5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .watchlist-icon-button,
    .watchlist-row-action,
    .watchlist-dialog-close,
    .watchlist-dialog.modal-content {
        animation: none;
        transition: none;
    }
}

@media (max-width: 420px) {
    #app-header .global-search-item {
        grid-template-columns: 58px minmax(0, 1fr) 14px;
        gap: 8px;
        min-height: 45px;
        padding: 6px 7px;
    }

    #app-header .global-search-item .name {
        font-size: 0.68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-search-message.is-loading::before,
    .global-search-item-arrow {
        animation: none;
        transition: none;
    }
}

.positions-card {
    padding: 16px 18px;
    overflow: hidden;
}

.positions-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 8px;
}

.positions-toolbar-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.positions-toolbar label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.positions-toolbar .form-input {
    width: auto;
    min-width: 145px;
    padding: 6px 28px 6px 9px;
    font-size: 0.8rem;
}

.positions-toolbar #positionPageSize {
    min-width: 76px;
}

.positions-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.positions-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.positions-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.positions-page-button {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.positions-page-button:hover:not(:disabled),
.positions-page-button:focus-visible:not(:disabled) {
    border-color: var(--primary-color);
    background: var(--sidebar-active);
    color: var(--primary-color);
    outline: none;
}

.positions-page-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

#holdingsTable {
    min-width: 1020px;
    font-variant-numeric: tabular-nums;
}

#holdingsTable th {
    padding: 8px 7px;
    font-size: 0.68rem;
    white-space: nowrap;
    letter-spacing: 0.035em;
}

#holdingsTable > tbody > tr:not(.transaction-details-row) > td {
    padding: 8px 7px;
    font-size: 0.8rem;
    white-space: nowrap;
}

#holdingsTable th:nth-child(3),
#holdingsTable > tbody > tr:not(.transaction-details-row) > td:nth-child(3) {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#holdingsTable th:nth-child(6),
#holdingsTable th:nth-child(7),
#holdingsTable th:nth-child(8),
#holdingsTable th:nth-child(9),
#holdingsTable th:nth-child(10) {
    text-align: right;
}

#holdingsTable th:nth-child(11),
#holdingsTable > tbody > tr:not(.transaction-details-row) > td:nth-child(11) {
    text-align: center;
}

#holdingsTable .position-toggle-column {
    width: 24px;
}

#holdingsTable .event-card-badge {
    padding: 2px 6px;
    font-size: 0.58rem;
}

.position-number,
.position-money,
.position-result {
    text-align: right;
}

.position-result small {
    color: inherit;
    font-size: 0.72rem;
    opacity: 0.8;
}

.position-price-with-date {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.position-price-primary {
    font-weight: 700;
}

.position-price-metadata {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.position-currency-tag {
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    font-size: 0.54rem;
    line-height: 1;
}

.position-price-date {
    padding: 2px 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--success) 8%, transparent);
    color: color-mix(in srgb, var(--success) 75%, var(--text-secondary));
    font-size: 0.56rem;
    line-height: 1;
}

.position-price-date--stale {
    background: color-mix(in srgb, var(--warning) 9%, transparent);
    color: color-mix(in srgb, var(--warning) 78%, var(--text-secondary));
}

.position-price-date--missing {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}

.position-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.position-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    min-width: 27px;
    padding: 0;
}

.positions-card .toggle-row-btn {
    width: 22px;
    height: 22px;
    padding: 2px;
}

.portfolio-row--selected {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.portfolio-selection-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 24%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .upcoming-events-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .upcoming-events-heading p {
        text-align: left;
    }

    .events-carousel-wrapper {
        padding: 0 30px;
    }

    .positions-card {
        padding: 12px;
    }

    .positions-toolbar {
        justify-content: space-between;
    }

    .positions-toolbar-field {
        flex: 1 1 150px;
        justify-content: space-between;
    }

}

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(15, 23, 42, 0.8);
    /* Dark blur overlay */
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--bg-card);
    margin: 5% auto;
    padding: 32px;
    border-radius: 20px;
    width: 600px;
    /* Increased default width */
    max-width: 95%;
    /* Allowed more width on small screens */
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    animation: slideIn 0.3s ease-out;
    max-height: 90vh;
    /* Prevent modal from exceeding viewport height */
    overflow-y: auto;
    /* Allow modal itself to scroll if needed */
}

.modal-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* Specific wider modal for CSV Import */
#csvModal .modal-content {
    width: 95%;
    max-width: 1400px;
}

.preview-container {
    max-height: 550px;
    overflow-y: auto;
    overflow-x: auto;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

#previewTable input,
#previewTable select {
    padding: 6px 10px;
    font-size: 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary, #fff);
    width: 100%;
    box-sizing: border-box;
}

#previewTable input[data-field="date"] { min-width: 130px; }
#previewTable input[data-field="ticker"] { min-width: 95px; }
#previewTable input[data-field="isin"] { min-width: 155px; }
#previewTable input[data-field="quantity"] { min-width: 100px; }
#previewTable input[data-field="price"] { min-width: 110px; }
#previewTable input[data-field="currency"] { min-width: 85px; }
#previewTable input[data-field="fees"] { min-width: 90px; }
#previewTable select[data-field="type"] { min-width: 95px; cursor: pointer; font-weight: 600; }

.csv-row-actions-heading,
.csv-row-actions {
    min-width: 132px;
    text-align: center;
}

.csv-row-actions {
    white-space: nowrap;
}

.csv-row-actions .status-pending {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--success);
    font-size: 0.78rem;
}

.csv-remove-row {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.22);
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.07);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.csv-remove-row:hover,
.csv-remove-row:focus-visible {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(248, 113, 113, 0.16);
    color: var(--danger);
    outline: none;
    transform: translateY(-1px);
}

#previewTable input.csv-field-invalid,
#previewTable select.csv-field-invalid {
    border: 2px solid var(--danger);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
    background: rgba(248, 113, 113, 0.08);
}

.csv-error-panel {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid rgba(248, 113, 113, 0.48);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.13), rgba(248, 113, 113, 0.04));
    box-shadow: 0 12px 30px rgba(127, 29, 29, 0.12);
}

.csv-error-panel[hidden] {
    display: none;
}

.csv-error-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.csv-error-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.18);
    color: var(--danger);
}

.csv-error-heading {
    flex: 1;
    min-width: 0;
}

.csv-error-heading h4 {
    margin: 0 0 4px;
    color: var(--danger);
    font-size: 1rem;
}

.csv-error-heading p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.45;
}

.csv-error-dismiss {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.csv-error-dismiss:hover {
    background: rgba(248, 113, 113, 0.12);
    color: var(--danger);
}

.csv-error-list {
    display: grid;
    gap: 8px;
    max-height: 230px;
    margin-top: 14px;
    overflow-y: auto;
}

.csv-error-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(248, 113, 113, 0.22);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.2);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.csv-error-item:hover,
.csv-error-item:focus-visible {
    border-color: rgba(248, 113, 113, 0.65);
    background: rgba(248, 113, 113, 0.1);
    outline: none;
}

.csv-error-location {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.16);
    color: var(--danger);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.csv-error-content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.csv-error-content strong {
    font-size: 0.86rem;
}

.csv-error-content > span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csv-error-action {
    color: var(--danger);
    font-size: 1.1rem;
}

.csv-error-more {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

.csv-success-modal {
    z-index: 1200;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.csv-success-modal[hidden] {
    display: none;
}

.csv-success-modal.is-visible {
    display: flex;
}

.csv-success-content {
    width: min(430px, 100%);
    padding: 38px 34px 32px;
    border: 1px solid rgba(74, 222, 128, 0.28);
    border-radius: 22px;
    background: var(--bg-card);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38), 0 0 45px rgba(74, 222, 128, 0.08);
    text-align: center;
    animation: csvSuccessPop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.csv-success-check {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
}

.csv-success-check svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--success);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.csv-success-circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: csvSuccessCircle 0.55s 0.12s ease-out forwards;
}

.csv-success-tick {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: csvSuccessTick 0.32s 0.58s ease-out forwards;
}

.csv-success-eyebrow {
    margin: 0 0 7px;
    color: var(--success);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.csv-success-content h2 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 4vw, 1.65rem);
}

.csv-success-content #csvSuccessMessage,
.csv-success-content #portfolioActionSuccessMessage {
    margin: 0 0 24px;
    color: var(--text-muted);
}

.csv-success-content .btn {
    min-width: 165px;
}

@keyframes csvSuccessPop {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes csvSuccessCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes csvSuccessTick {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .csv-success-content,
    .csv-success-circle,
    .csv-success-tick {
        animation-duration: 0.01ms;
        animation-delay: 0ms;
    }
}

/* Decimal Separator Custom Radio Cards */
.decimal-separator-wrapper,
.date-format-wrapper {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.decimal-wrapper-label {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.decimal-wrapper-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.decimal-options-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.decimal-option-card {
    flex: 1;
    min-width: 260px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.decimal-option-card input[type="radio"] {
    display: none;
}

.decimal-option-card .card-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    transition: all 0.25s ease;
}

.decimal-option-card:hover .card-box {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.decimal-option-card input[type="radio"]:checked + .card-box {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.12);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.decimal-option-card .card-icon {
    font-size: 1.6rem;
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.decimal-option-card .card-title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.decimal-option-card .card-sub {
    display: block;
    font-size: 0.83rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.decimal-option-card .card-sub code {
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--primary-color);
    font-weight: 600;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close,
.csv-close,
.history-close {
    position: absolute;
    right: 24px;
    top: 24px;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

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

/* Utility / Misc */
.text-muted {
    color: var(--text-muted) !important;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox input {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox label {
    margin: 0;
    cursor: pointer;
}

/* CSV Import Wizard */
.mapping-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    padding: 8px 0;
    gap: 16px;
}

#previewTable {
    font-size: 0.9rem;
}

#previewTable input {
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* Drop Zone Styles */
.drop-zone {
    width: 100%;
    height: 200px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-muted);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.02);
    position: relative;
}

.drop-zone--over {
    border-style: solid;
    border-color: var(--primary-color);
    background-color: rgba(56, 189, 248, 0.05);
    /* Tint of primary color */
    color: var(--primary-color);
}

.drop-zone__input {
    display: none;
}

.drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
}

.drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    text-align: center;
}

.drop-zone__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(248, 113, 113, 0.2);
    /* Red tint */
    color: var(--danger);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.drop-zone__remove:hover {
    background: var(--danger);
    color: white;
}

/* Toggle Switch */
.toggle-switch {
    display: inline-block;
    position: relative;
    width: 36px;
    /* Further reduced from 44px */
    height: 20px;
    /* Further reduced from 24px */
    flex: 0 0 36px;
    /* Fix width */
    margin-left: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--text-muted);
    transition: .4s;
    border-radius: 20px;
    /* Adjusted radius */
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    /* Reduced from 18px */
    width: 16px;
    /* Reduced from 18px */
    left: 2px;
    /* Adjusted spacing */
    bottom: 2px;
    /* Adjusted spacing */
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked+.slider:before {
    transform: translateX(16px);
    /* Adjusted translation (36 - 2 - 2 - 16 = 16) */
}

/* Update Settings Page Checkbox Layout for Toggles */
.form-group.toggle-row {
    display: flex;
    justify-content: flex-start;
    /* Changed from space-between to flex-start */
    align-items: center;
    background-color: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    gap: 20px;
    /* Add gap between text and toggle */
}

/* Expandable Rows */
.toggle-row-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    transition: transform 0.3s ease;
}

.toggle-row-btn:hover {
    color: var(--primary-color);
}

.toggle-row-btn.expanded {
    transform: rotate(90deg);
    color: var(--primary-color);
}

.expanded-row {
    background-color: rgba(255, 255, 255, 0.01);
}

.transaction-details-row td {
    padding: 0;
    border-bottom: 1px solid var(--border-color);
}

.transaction-details-container {
    padding: 15px;
    /* Reverted as requested */
    background-color: rgba(15, 23, 42, 0.3);
    /* Darker background */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.transaction-table {
    width: 100%;
    font-size: 0.9em;
}

.transaction-table th {
    color: var(--text-muted);
    font-weight: 500;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.transaction-table td {
    padding: 10px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Align Date Column to right, but remove left padding to shift it left */
.transaction-table th:first-child,
.transaction-table td:first-child {
    text-align: right;
    padding-left: 0;
    /* Shift content left */
}

.transaction-table tr:last-child td {
    border-bottom: none;
}

.form-group.toggle-row>label:not(.toggle-switch),
.form-group.toggle-row>div {
    margin: 0;
    font-size: 1rem;
    cursor: default;
    flex: 0 1 auto;
    /* Don't force full width */
}

/* --- Search & Market Page --- */
.search-container {
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: visible;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper input,
.search-input-wrapper input[type="text"] {
    width: 100%;
    padding: 12px 15px 12px 40px !important;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
}

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

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.search-result-item .symbol {
    font-weight: bold;
    color: var(--primary-color);
    width: 80px;
}

.search-result-item .name {
    flex-grow: 1;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 10px;
}

.search-result-item .exchange {
    color: var(--text-muted);
    font-size: 0.8em;
}

/* Stock Details */
.stock-details-container {
    animation: fadeIn 0.3s ease;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    margin-bottom: 2rem;
}

.details-left h2 {
    font-size: 2rem;
    margin: 0;
    color: var(--text-primary);
}

.details-left h3 {
    margin: 5px 0 10px;
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: normal;
}

.details-left h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

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

a:hover {
    color: var(--primary-hover);
}

.stock-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.stock-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

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

.price-large {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.change-large {
    font-size: 1.2rem;
}

.details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

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

.chart-card {
    height: 500px;
    display: flex;
    flex-direction: column;
}

.chart-container {
    flex-grow: 1;
    position: relative;
    min-height: 0;
}

.chart-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.chart-controls .btn-sm {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
}

.chart-controls .btn-sm.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.stats-card {
    padding: 24px;
}

.stats-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.stats-list li:last-child {
    border-bottom: none;
}

.stats-list span:first-child {
    color: var(--text-muted);
}

.stats-list span:last-child {
    font-weight: 500;
}

.description-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
}

/* Global Search in Header */
.global-search-container {
    position: relative;
    margin: 0 40px;
    flex-grow: 1;
    /* Takes up available space */
    max-width: 600px;
    /* Increased width */
}

#globalSearchInput {
    width: 100%;
    padding: 12px 20px;
    /* Larger padding */
    font-size: 1.1rem;
    /* Larger font */
    border-radius: 24px;
    /* More rounded */
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s;
    height: 50px;
    /* Fixed height for consistency */
}

#globalSearchInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 208, 132, 0.2);
}

#globalSearchResults {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: none;
}

.global-search-item {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.global-search-item:last-child {
    border-bottom: none;
}

.global-search-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.global-search-item .symbol {
    font-weight: bold;
    color: var(--primary-color);
}

.global-search-item .name {
    font-size: 0.9em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* Suggestions Dropdown */
.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: var(--shadow-lg);
}

.suggestions-list.active {
    display: block;
}

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: var(--border-hover);
}

.suggestion-item .ticker {
    font-weight: 600;
    color: var(--text-primary);
}

/* Chart Controls */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.chart-controls {
    display: flex;
    gap: 5px;
    background: var(--bg-default);
    padding: 3px;
    border-radius: 8px;
}

.range-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 600;
    transition: all 0.2s;
}

.range-btn:hover {
    color: var(--text-primary);
    background-color: var(--border-color);
}

.range-btn.active {
    background-color: var(--primary-color);
    color: #fff;
}

.suggestion-item .name {
    font-size: 0.9em;
    color: var(--text-muted);
}

/* Custom Trend Chart Legend */
.custom-legend-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-top: 12px;
    margin-top: auto;
    /* Push to bottom of chart container */
}

.custom-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: opacity var(--transition-fast);
    user-select: none;
}

.custom-legend-item:hover {
    opacity: 0.8;
}

.custom-legend-item.hidden {
    text-decoration: line-through;
    opacity: 0.5;
}

.custom-legend-color-box {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-card);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    top: 100%;
    right: 0;
    margin-top: 5px;
}

.dropdown-content div,
.dropdown-content label {
    display: block;
    padding: 6px 0;
    cursor: pointer;
    color: var(--text-primary);
    white-space: nowrap;
}

.dropdown-content div:hover,
.dropdown-content label:hover {
    color: var(--primary-color);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content.show {
    display: block;
}

/* --- Mobile Responsive Overrides --- */
@media (max-width: 768px) {
    body {
        /* Prevents body from scrolling when sidebar is open */
        overflow-x: hidden;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    /* Sidebar Off-Canvas */
    .sidebar {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        width: min(280px, calc(100vw - 24px));
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    /* Sidebar Overlay Backdrop */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-normal);
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Main Content Adjustments */
    .main-content {
        box-sizing: border-box;
        padding: 15px;
        width: 100%;
        min-height: 100dvh;
        max-height: 100dvh;
        overflow-x: hidden;
    }

    /* Header Adjustments */
    #app-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        margin-bottom: 20px;
        width: 100%;
        min-width: 0;
    }

    .mobile-menu-btn {
        display: flex;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
    }

    #app-header .global-search-container {
        width: 100%;
        min-width: unset;
        max-width: 100%;
        margin: 0;
        flex: 0 1 auto;
    }

    #globalSearchInput {
        height: 42px;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        font-size: 1rem;
    }

    /* Page Title Bar Adjustments */
    .page-title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .portfolio-page-title-bar {
        gap: 12px;
    }

    .dividends-page-title-bar {
        gap: 12px;
    }

    .dividends-page-title-bar .actions,
    .portfolio-context-control {
        width: 100%;
    }

    .portfolio-context-control {
        align-items: stretch;
        flex-direction: column;
        gap: 5px;
    }

    .portfolio-context-control select {
        width: 100%;
    }

    .portfolio-command-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 5px;
        padding: 5px;
        overflow: visible;
    }

    .portfolio-command-group--primary {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 4px;
    }

    .portfolio-command-group--primary .portfolio-command {
        width: 100%;
    }

    .portfolio-command-divider {
        display: none;
    }

    .portfolio-command-group:not(.portfolio-command-group--primary) {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
        width: 100%;
        gap: 4px;
        margin-left: 0;
    }

    .portfolio-command {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0 8px;
        gap: 5px;
        font-size: 0.72rem;
    }

    .portfolio-command > span:not(.sr-only) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .portfolio-command--icon-only {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .portfolio-more-actions {
        width: 42px;
        min-width: 0;
    }

    .portfolio-danger-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        bottom: auto;
        left: auto;
        width: min(288px, calc(100vw - 30px));
        max-height: min(330px, calc(100dvh - 32px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .portfolio-danger-menu.opens-upward {
        top: auto;
        bottom: calc(100% + 6px);
    }

    .portfolio-action-status {
        width: 100%;
        margin: -5px 0 16px;
    }

    .page-title-bar .actions,
    .page-title-bar .actions>.dropdown,
    .page-title-bar .actions>.form-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .page-title-bar .btn,
    .page-title-bar select {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    /* Tables Overflow */
    .card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
        /* Ensure tables don't compress infinitely */
    }

    /* Modal Adjustments */
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        margin: 8px auto;
        padding: 20px 16px;
        border-radius: 14px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #txModal {
        padding: 0 8px;
    }

    #txModal .modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - 16px);
        padding: 18px 16px 0;
        overflow: hidden;
    }

    #txModal .modal-content > h2 {
        flex: 0 0 auto;
        margin-bottom: 14px;
        padding-right: 36px;
        font-size: 1.2rem;
    }

    #txModal .close {
        top: 13px;
        right: 16px;
    }

    #txForm {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    #txForm .transaction-form-fields {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 2px 2px 4px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #txForm .transaction-form-fields::-webkit-scrollbar {
        display: none;
    }

    #txForm .form-group {
        margin-bottom: 0.85rem;
    }

    #txForm .form-group label {
        margin-bottom: 0.35rem;
        font-size: 0.8rem;
    }

    #txForm input,
    #txForm select {
        min-height: 42px;
        padding: 0.6rem 0.75rem;
        font-size: 1rem;
    }

    #txForm .modal-form-actions {
        flex: 0 0 auto;
        margin: 0 -16px;
        padding: 11px 16px max(11px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-color);
        background: var(--bg-card);
        box-shadow: 0 -10px 24px color-mix(in srgb, var(--bg-card) 85%, transparent);
    }

    #txForm .modal-form-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Hide mobile menu button on desktop */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* Guided CSV Import Wizard */
#csvModal {
    padding: 12px;
}

#csvModal .csv-wizard-shell {
    display: flex;
    flex-direction: column;
    width: min(1480px, 100%);
    height: min(900px, calc(100vh - 24px));
    max-width: none;
    max-height: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

#csvModal .csv-close {
    position: absolute;
    z-index: 5;
    top: 20px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
}

#csvModal .csv-close:hover,
#csvModal .csv-close:focus-visible {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    outline: none;
}

.csv-wizard-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 68px 15px 30px;
}

.csv-wizard-mark {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.13);
    color: var(--primary-color);
    font-size: 1.15rem;
}

.csv-wizard-header h2 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 1.3rem;
}

.csv-wizard-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.csv-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0 34px 18px;
    border-bottom: 1px solid var(--border-color);
    list-style: none;
}

.csv-stepper-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-muted);
    text-align: center;
}

.csv-stepper-item:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 17px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 2px;
    background: var(--border-color);
    content: '';
}

.csv-step-number {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-card);
    font-size: 0.78rem;
    font-weight: 800;
}

.csv-step-label {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    min-width: 0;
    background: var(--bg-card);
    text-align: center;
}

.csv-step-label strong {
    color: inherit;
    font-size: 0.83rem;
}

.csv-step-label small {
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.csv-stepper-item.is-active {
    color: var(--primary-color);
}

.csv-stepper-item.is-active .csv-step-number {
    border-color: var(--primary-color);
    background: rgba(56, 189, 248, 0.14);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.08);
}

.csv-stepper-item.is-complete .csv-step-number {
    border-color: var(--success);
    background: rgba(74, 222, 128, 0.12);
    color: var(--success);
}

.csv-stepper-item.is-complete .csv-step-number::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.csv-stepper-item.is-complete .csv-step-number {
    font-size: 0;
}

.csv-stepper-item.is-complete:not(:last-child)::after {
    background: rgba(74, 222, 128, 0.55);
}

.csv-wizard-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    margin: 14px 30px 0;
    padding: 11px 13px;
    border: 1px solid rgba(248, 113, 113, 0.38);
    border-radius: 11px;
    background: rgba(248, 113, 113, 0.09);
    color: var(--danger);
}

.csv-wizard-alert[hidden],
.csv-wizard-step[hidden],
.csv-selected-file[hidden],
.drop-zone__prompt[hidden] {
    display: none;
}

.csv-wizard-alert strong {
    display: block;
    margin-bottom: 1px;
    font-size: 0.84rem;
}

.csv-wizard-alert p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.csv-wizard-alert button {
    padding: 5px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.csv-wizard-step {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.csv-step-scroll {
    flex: 1;
    min-height: 0;
    padding: 24px 30px;
    overflow: auto;
}

.csv-step-heading {
    margin-bottom: 20px;
}

.csv-step-heading--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.csv-step-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.csv-step-heading h3 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-size: 1.15rem;
}

.csv-step-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.csv-upload-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(720px, 100%);
    margin: 0 auto;
}

#csvModal .drop-zone {
    min-height: 190px;
    height: auto;
    margin: 0;
    padding: 25px;
    border-width: 1px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.055), rgba(129, 140, 248, 0.025));
}

#csvModal .drop-zone:hover,
#csvModal .drop-zone:focus-within,
#csvModal .drop-zone--over {
    border-color: var(--primary-color);
    background: rgba(56, 189, 248, 0.075);
}

#csvModal .drop-zone.has-error,
.csv-format-card.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

.drop-zone__prompt {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.drop-zone__prompt strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.drop-zone__prompt > span:not(.drop-zone__icon) {
    font-size: 0.8rem;
}

.drop-zone__prompt small {
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.68rem;
}

.drop-zone__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.13);
    color: var(--primary-color);
    font-size: 1.25rem;
}

.csv-selected-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: min(520px, 100%);
    padding: 15px;
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: 13px;
    background: rgba(74, 222, 128, 0.07);
    text-align: left;
}

.csv-selected-file__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(74, 222, 128, 0.13);
    color: var(--success);
    font-size: 1.05rem;
}

.csv-selected-file__details {
    display: grid;
    min-width: 0;
}

.csv-selected-file__details strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csv-selected-file__details small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

#csvModal .drop-zone__remove {
    position: static;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 9px;
}

.csv-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: 12px 30px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.08);
}

.csv-action-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.csv-action-hint i {
    margin-right: 5px;
    color: var(--success);
}

.csv-action-buttons {
    display: flex;
    gap: 10px;
}

#csvModal .btn-secondary {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
}

.csv-source-summary,
.csv-preview-summary-card {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
}

.csv-source-summary > i {
    color: var(--primary-color);
}

.csv-source-summary > span,
.csv-preview-summary-card {
    display: grid;
}

.csv-source-summary strong,
.csv-preview-summary-card strong {
    max-width: 260px;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csv-source-summary small,
.csv-preview-summary-card span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.csv-format-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(480px, 1.25fr);
    gap: 14px;
    margin-bottom: 20px;
}

#csvModal .csv-format-card {
    min-width: 0;
    margin: 0;
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
}

.csv-format-card legend {
    padding: 0 5px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.csv-format-card legend i {
    margin-right: 5px;
    color: var(--primary-color);
}

.csv-format-card legend span {
    color: var(--danger);
}

.csv-segmented-options {
    display: grid;
    gap: 7px;
}

.csv-segmented-options--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.csv-segmented-options--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.csv-segmented-options label {
    min-width: 0;
    cursor: pointer;
}

.csv-segmented-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.csv-segmented-options label > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-card);
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.csv-segmented-options label:hover > span {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.csv-segmented-options input:checked + span {
    border-color: var(--primary-color);
    background: rgba(56, 189, 248, 0.11);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.08);
}

.csv-segmented-options input:focus-visible + span {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.csv-segmented-options strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.73rem;
    text-overflow: ellipsis;
}

.csv-segmented-options code {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.65rem;
    text-overflow: ellipsis;
}

.csv-mapping-section {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
}

.csv-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.csv-section-heading h4 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.csv-section-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.csv-required-note,
.mapping-required,
.mapping-optional {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
}

.csv-required-note,
.mapping-required {
    background: rgba(56, 189, 248, 0.11);
    color: var(--primary-color);
}

.mapping-optional {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-muted);
}

.csv-mapping-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#csvModal .mapping-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 1.25fr);
    align-items: center;
    gap: 6px 12px;
    padding: 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
}

.mapping-row__heading {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.mapping-row__heading label {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#csvModal .csv-mapping-select {
    min-width: 0;
    height: 34px;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 0.76rem;
}

.mapping-example {
    grid-column: 1 / -1;
    display: flex;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.3;
}

.mapping-example span {
    flex: 0 0 auto;
}

.mapping-example code {
    overflow: hidden;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csv-optional-fields {
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
}

.csv-optional-fields summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 2px 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.csv-optional-fields summary::-webkit-details-marker {
    display: none;
}

.csv-optional-fields summary small {
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 400;
}

.csv-details-chevron {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.csv-optional-fields[open] .csv-details-chevron {
    transform: rotate(180deg);
}

.csv-mapping-grid--optional {
    margin-top: 12px;
}

.csv-preview-step {
    display: flex;
    flex-direction: column;
}

#csvModal .preview-container {
    flex: 1;
    min-height: 220px;
    max-height: none;
    margin: 0;
    border-radius: 11px;
}

#previewTable {
    width: 100%;
    min-width: 880px;
    font-size: 0.74rem;
}

#previewTable th {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 9px 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-body));
    color: var(--text-muted);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

#previewTable td {
    padding: 3px;
}

#previewTable input,
#previewTable select {
    height: 30px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.72rem;
}

#previewTable input[data-field="date"] { min-width: 118px; }
#previewTable input[data-field="ticker"] { min-width: 74px; }
#previewTable input[data-field="isin"] { width: 106px; min-width: 106px; max-width: 106px; }
#previewTable input[data-field="quantity"] { width: 66px; min-width: 66px; max-width: 66px; }
#previewTable input[data-field="price"] { width: 72px; min-width: 72px; max-width: 72px; }
#previewTable select[data-field="currency"] { width: 145px; min-width: 145px; max-width: 170px; }
#previewTable input[data-field="fees"] { width: 58px; min-width: 58px; max-width: 58px; }
#previewTable select[data-field="type"] { min-width: 74px; }

#previewTable input[type="date"][data-field="date"] {
    appearance: auto;
    -webkit-appearance: auto;
    color-scheme: dark;
    padding: 3px 5px 3px 8px;
    border-color: rgba(56, 189, 248, 0.2);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.075), rgba(129, 140, 248, 0.035));
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

:root:not(.dark-mode) #previewTable input[type="date"][data-field="date"] {
    color-scheme: light;
    border-color: rgba(2, 132, 199, 0.22);
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.07), rgba(99, 102, 241, 0.025));
}

#previewTable input[type="date"][data-field="date"]::-webkit-datetime-edit {
    padding: 0;
}

#previewTable input[type="date"][data-field="date"]::-webkit-calendar-picker-indicator {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 3px;
    border-radius: 5px;
    background-color: rgba(56, 189, 248, 0.13);
    filter: invert(82%) sepia(37%) saturate(1199%) hue-rotate(170deg) brightness(101%) contrast(95%);
    opacity: 0.9;
}

:root:not(.dark-mode) #previewTable input[type="date"][data-field="date"]::-webkit-calendar-picker-indicator {
    background-color: rgba(2, 132, 199, 0.1);
    filter: none;
}

#previewTable input[type="date"][data-field="date"]:hover::-webkit-calendar-picker-indicator {
    background-color: rgba(56, 189, 248, 0.22);
    opacity: 1;
}

.csv-source-row-heading,
.csv-source-row {
    width: 42px;
    min-width: 42px;
    text-align: center;
}

#previewTable th.csv-source-row-heading {
    z-index: 4;
    left: 0;
}

#previewTable .csv-source-row {
    position: sticky;
    z-index: 1;
    left: 0;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.csv-row-actions-heading,
.csv-row-actions {
    width: 58px;
    min-width: 58px;
}

.csv-row-actions .csv-remove-row {
    width: 30px;
    height: 30px;
    margin: 0;
}

.csv-preview-summary-card {
    min-width: 170px;
}

#csvModal .csv-error-panel {
    margin-bottom: 12px;
    padding: 12px;
}

@media (max-width: 900px) {
    .csv-format-grid,
    .csv-mapping-grid {
        grid-template-columns: 1fr;
    }

    .csv-action-hint {
        display: none;
    }

    .csv-wizard-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    #csvModal {
        padding: 0;
    }

    #csvModal .csv-wizard-shell {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .csv-wizard-header {
        padding: 15px 58px 12px 16px;
    }

    .csv-wizard-header p,
    .csv-step-label small {
        display: none;
    }

    .csv-stepper {
        padding: 0 16px 14px;
    }

    .csv-step-label {
        padding-right: 5px;
    }

    .csv-step-scroll {
        padding: 18px 16px;
    }

    .csv-wizard-alert {
        margin: 10px 16px 0;
    }

    .csv-step-heading--row {
        display: grid;
        gap: 12px;
    }

    .csv-source-summary,
    .csv-preview-summary-card {
        width: 100%;
    }

    .csv-segmented-options--three {
        grid-template-columns: 1fr;
    }

    #csvModal .mapping-row {
        grid-template-columns: 1fr;
    }

    .mapping-example {
        grid-column: 1;
    }

    .csv-wizard-actions {
        min-height: 64px;
        padding: 10px 16px;
    }

    .csv-action-buttons {
        width: 100%;
    }

    .csv-action-buttons .btn,
    .csv-wizard-actions > .btn {
        flex: 1;
        padding-inline: 12px;
    }
}

/* Cash receipt actions use full-viewport, centered modal surfaces. */
body.dividend-modal-open {
    overflow: hidden;
}

.dividend-cashflow-import-modal,
.dividend-cashflow-form-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    box-sizing: border-box;
    overscroll-behavior: contain;
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
}

.dividend-cashflow-import-modal[hidden],
.dividend-cashflow-form-modal[hidden] {
    display: none;
}

.dividend-cashflow-import-modal .csv-wizard-shell {
    display: flex;
    flex-direction: column;
    width: min(1480px, 100%);
    height: min(900px, calc(100vh - 24px));
    max-width: none;
    max-height: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

.dividend-cashflow-form-modal .dividend-cashflow-form-shell {
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    height: min(860px, calc(100dvh - 24px));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

.dividend-cashflow-form-header {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border-color);
}

.dividend-cashflow-form-header > div {
    min-width: 0;
}

.dividend-cashflow-form-header .dividend-beta-badge {
    flex: 0 0 auto;
    margin-left: auto;
}

.dividend-cashflow-form-modal .dividend-cashflow-form {
    flex: 1;
    min-height: 0;
    padding: 24px 30px 28px;
    overflow-y: auto;
    align-items: start;
}

.dividend-cashflow-form-modal .dividend-cashflow-form label {
    align-self: start;
    align-content: start;
    gap: 5px;
    font-size: 0.68rem;
    line-height: 1.2;
}

.dividend-cashflow-form-modal .dividend-cashflow-form input,
.dividend-cashflow-form-modal .dividend-cashflow-form select,
.dividend-cashflow-form-modal .dividend-cashflow-form textarea {
    box-sizing: border-box;
    height: 36px;
    min-height: 35px;
    padding: 0.42rem 0.58rem;
    border-radius: 7px;
    font-size: 0.76rem;
    line-height: 1.2;
}

.dividend-cashflow-form-modal .dividend-cashflow-form select {
    padding-right: 2rem;
    background-position: right 0.58rem center;
    background-size: 0.85rem;
}

.dividend-cashflow-form-modal .dividend-cashflow-form input[type="number"] {
    appearance: textfield;
}

.dividend-cashflow-form-modal .dividend-cashflow-form input[type="number"]::-webkit-inner-spin-button,
.dividend-cashflow-form-modal .dividend-cashflow-form input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.dividend-cashflow-form-modal .dividend-cashflow-form textarea {
    height: auto;
    min-height: 60px;
    line-height: 1.4;
}

.dividend-cashflow-ticker-search .suggestions-list {
    top: calc(100% - 1px);
    display: none;
    max-height: 220px;
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

.dividend-cashflow-ticker-search .suggestions-list.active {
    display: block;
}

.dividend-cashflow-ticker-search.is-open input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dividend-cashflow-ticker-search .suggestion-item {
    min-height: 46px;
    padding: 8px 11px;
}

.dividend-cashflow-ticker-search .suggestion-item > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dividend-cashflow-ticker-search .suggestion-item .ticker,
.dividend-cashflow-ticker-search .suggestion-item .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dividend-cashflow-ticker-search .suggestion-item .name {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.dividend-cashflow-ticker-search .suggestion-item .exchange {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
}

.dividend-cashflow-form-modal .dividend-cashflow-form-actions {
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}

.dividend-cashflow-form-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dividend-cashflow-form-modal .dividend-cashflow-form-actions > #dividendCashflowFormStatus {
    flex: 1;
    min-width: 0;
}

.dividend-cashflow-import-modal .csv-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dividend-cashflow-import-modal .csv-close,
.dividend-cashflow-form-modal .csv-close {
    position: absolute;
    z-index: 5;
    top: 20px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
}

.dividend-cashflow-import-modal .csv-close:hover,
.dividend-cashflow-import-modal .csv-close:focus-visible,
.dividend-cashflow-form-modal .csv-close:hover,
.dividend-cashflow-form-modal .csv-close:focus-visible {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    outline: none;
}

.dividend-cashflow-import-modal .drop-zone {
    min-height: 190px;
    height: auto;
    margin: 0;
    padding: 25px;
    border-width: 1px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.055), rgba(129, 140, 248, 0.025));
}

.dividend-cashflow-import-modal .drop-zone:hover,
.dividend-cashflow-import-modal .drop-zone:focus-within,
.dividend-cashflow-import-modal .drop-zone--over {
    border-color: var(--primary-color);
    background: rgba(56, 189, 248, 0.075);
}

.dividend-cashflow-import-modal .drop-zone.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

.dividend-cashflow-import-modal .drop-zone__remove {
    position: static;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 9px;
}

.dividend-cashflow-import-modal .btn-secondary {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
}

.dividend-cashflow-form-modal .btn-secondary {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
}

.dividend-cashflow-form-modal .btn-secondary:hover,
.dividend-cashflow-form-modal .btn-secondary:focus-visible {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    outline: none;
}

.dividend-cashflow-import-modal .btn-secondary:hover,
.dividend-cashflow-import-modal .btn-secondary:focus-visible {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    outline: none;
}

.dividend-cashflow-import-modal .preview-container {
    flex: 1;
    min-height: 220px;
    max-height: none;
    margin: 0;
    border-radius: 11px;
}

.dividend-cashflow-import-modal #dividendCashflowImportTable th {
    position: sticky;
    z-index: 2;
    top: 0;
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-body));
}

.csv-success-content #dividendCashflowImportSuccessMessage {
    margin: 0 0 24px;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .dividend-cashflow-import-modal,
    .dividend-cashflow-form-modal {
        padding: 0;
    }

    .dividend-cashflow-import-modal .csv-wizard-shell {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .dividend-cashflow-form-modal .dividend-cashflow-form-shell {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
    }

    .dividend-cashflow-form-modal .csv-wizard-header {
        padding: 15px 58px 12px 16px;
    }

    .dividend-cashflow-form-header .dividend-beta-badge {
        display: none;
    }

    .dividend-cashflow-form-modal .dividend-cashflow-form {
        padding: 18px 16px max(18px, env(safe-area-inset-bottom));
    }

    .dividend-cashflow-form-modal .dividend-cashflow-form input,
    .dividend-cashflow-form-modal .dividend-cashflow-form select,
    .dividend-cashflow-form-modal .dividend-cashflow-form textarea {
        height: 38px;
        min-height: 38px;
    }

    .dividend-cashflow-form-modal .dividend-cashflow-form textarea {
        height: auto;
    }

    .dividend-cashflow-form-modal .dividend-cashflow-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dividend-cashflow-form-buttons {
        width: 100%;
    }

    .dividend-cashflow-form-buttons .btn {
        flex: 1;
    }
}

/* Dashboard overview */
.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-kpi {
    min-width: 0;
    min-height: 142px;
    padding: 17px 18px;
    overflow: hidden;
}

.dashboard-kpi--primary {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(129, 140, 248, 0.045) 55%, var(--bg-card));
    border-color: rgba(56, 189, 248, 0.2);
}

.dashboard-kpi__header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-kpi__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.1);
    color: var(--primary-color);
    font-size: 0.76rem;
}

.dashboard-kpi__value {
    margin: 13px 0 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: clamp(1.32rem, 2vw, 1.75rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-kpi__meta {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.dashboard-kpi__meta strong {
    color: var(--text-secondary);
}

.dashboard-kpi__details {
    display: flex;
    gap: 22px;
    margin-top: 12px;
}

.dashboard-kpi__details > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dashboard-kpi__details small {
    color: var(--text-muted);
    font-size: 0.62rem;
}

.dashboard-kpi__details strong {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-kpi.is-positive .dashboard-kpi__value,
.dashboard-kpi.is-positive .dashboard-kpi__meta {
    color: var(--success);
}

.dashboard-kpi.is-negative .dashboard-kpi__value,
.dashboard-kpi.is-negative .dashboard-kpi__meta {
    color: var(--danger);
}

.dashboard-kpi.is-positive .dashboard-kpi__meta strong {
    color: var(--success);
}

.dashboard-kpi.is-negative .dashboard-kpi__meta strong {
    color: var(--danger);
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-overview-grid .chart-container,
.dashboard-diversification-card {
    min-height: 0;
    padding: 18px;
}

.dashboard-trend-card,
.dashboard-donut-card {
    height: 385px;
}

.dashboard-trend-card #trendChart {
    min-height: 315px;
}

.dashboard-chart-status {
    position: absolute;
    right: 18px;
    bottom: 12px;
    z-index: 2;
    max-width: calc(100% - 36px);
    margin: 0;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1.35;
    pointer-events: none;
}

.dashboard-chart-status[hidden] {
    display: none;
}

.dashboard-chart-status--warning {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border-color));
    color: color-mix(in srgb, var(--warning) 78%, var(--text-primary));
}

.dashboard-chart-status--error {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border-color));
    color: var(--danger);
}

.dashboard-page-status {
    position: static;
    max-width: none;
    margin: 14px 0 0;
    padding: 9px 12px;
    font-size: 0.76rem;
    pointer-events: auto;
}

.dashboard-overview-grid .chart-controls {
    margin-top: 0;
}

.chart-title-group {
    display: grid;
    gap: 3px;
}

.chart-title-group h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.chart-title-group > span {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.dashboard-donut-layout,
.dashboard-diversification-body {
    display: grid;
    align-items: center;
    min-height: 0;
}

.dashboard-donut-layout {
    grid-template-columns: minmax(160px, 0.9fr) minmax(150px, 1.1fr);
    gap: 14px;
    flex: 1;
}

.dashboard-donut-wrapper {
    position: relative;
    width: 100%;
    height: 225px;
    min-height: 0;
}

.dashboard-donut-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-donut-center {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, -50%);
}

.dashboard-donut-center strong {
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
}

.dashboard-donut-center span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
}

.dashboard-donut-legend {
    display: grid;
    align-content: center;
    gap: 4px;
    max-height: 255px;
    overflow: auto;
}

.dashboard-donut-legend__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 6px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.7rem;
    text-align: left;
}

button.dashboard-donut-legend__item {
    cursor: pointer;
}

button.dashboard-donut-legend__item:hover,
button.dashboard-donut-legend__item:focus-visible {
    background: rgba(56, 189, 248, 0.07);
    outline: none;
}

.dashboard-donut-legend__color {
    width: 8px;
    height: 8px;
    border-radius: 3px;
}

.dashboard-donut-legend__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-donut-legend__item strong {
    color: var(--text-primary);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.dashboard-donut-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    text-align: center;
}

.dashboard-diversification-card {
    height: 330px;
    margin-bottom: 24px;
}

.dashboard-diversification-header {
    margin-bottom: 8px;
}

.dashboard-chart-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
}

.dashboard-chart-tab {
    padding: 6px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 650;
    cursor: pointer;
}

.dashboard-chart-tab.is-active {
    background: rgba(56, 189, 248, 0.12);
    color: var(--primary-color);
}

.dashboard-diversification-body {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    flex: 1;
}

.dashboard-donut-wrapper--large {
    height: 235px;
}

.dashboard-donut-legend--wide {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    column-gap: 22px;
}

@media (max-width: 1200px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-donut-card {
        height: 340px;
    }

    .dashboard-donut-layout {
        grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1.35fr);
    }

    .dashboard-donut-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi {
        min-height: 128px;
    }

    .dashboard-trend-card {
        height: auto;
        min-height: 390px;
    }

    .dashboard-overview-grid .chart-header,
    .dashboard-diversification-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-overview-grid .chart-controls {
        width: 100%;
        overflow-x: auto;
    }

    .dashboard-donut-card,
    .dashboard-diversification-card {
        height: auto;
    }

    .dashboard-donut-layout,
    .dashboard-diversification-body {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-donut-wrapper,
    .dashboard-donut-wrapper--large {
        height: 220px;
    }

    .dashboard-donut-legend,
    .dashboard-donut-legend--wide {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .dashboard-chart-tabs {
        width: 100%;
    }

    .dashboard-chart-tab {
        flex: 1;
    }
}

/* Settings workspace */
.settings-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 56px;
}

.settings-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 30px 32px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.16), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 92%, #334155 8%), var(--bg-card));
    box-shadow: var(--shadow-md);
}

.settings-hero::after {
    position: absolute;
    right: -48px;
    bottom: -72px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(56, 189, 248, 0.14);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.settings-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.settings-kicker,
.settings-dialog-eyebrow,
.settings-danger-label {
    display: block;
    margin-bottom: 7px;
    color: var(--primary-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.settings-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
}

.settings-hero p,
.settings-section-header p,
.settings-danger-zone p,
.settings-dialog-content p {
    margin: 0;
}

.settings-hero p {
    max-width: 620px;
    color: var(--text-muted);
    font-size: 0.94rem;
}

.settings-account-summary {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-width: 300px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-body) 72%, transparent);
    backdrop-filter: blur(8px);
}

.settings-account-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 700;
}

.settings-account-copy {
    min-width: 0;
}

.settings-account-copy small {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.settings-account-copy strong {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-account-role,
.settings-status-badge {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.settings-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.settings-section-nav {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.settings-section-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.settings-section-link i {
    width: 17px;
    color: var(--text-muted);
    text-align: center;
}

.settings-section-link:hover,
.settings-section-link.is-active {
    background: rgba(56, 189, 248, 0.1);
    color: var(--primary-color);
}

.settings-section-link.is-active i {
    color: var(--primary-color);
}

.settings-sections {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.settings-section-card {
    scroll-margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.settings-section-card[hidden] {
    display: none;
}

.settings-section-card.is-active {
    animation: settings-section-enter 180ms ease-out;
}

.settings-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 21px 22px 18px;
    border-bottom: 1px solid var(--border-color);
}

.settings-section-header h2 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.settings-section-header p {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.settings-section-icon,
.settings-control-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
}

.settings-section-icon {
    width: 38px;
    height: 38px;
    background: rgba(56, 189, 248, 0.11);
    color: var(--primary-color);
}

.settings-section-icon--security {
    background: rgba(74, 222, 128, 0.1);
    color: var(--success);
}

.settings-section-icon--data {
    background: rgba(248, 113, 113, 0.1);
    color: var(--danger);
}

.settings-control-list {
    padding: 0 22px;
}

.settings-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 78px;
    padding: 15px 0;
}

.settings-control-row + .settings-control-row {
    border-top: 1px solid var(--border-color);
}

.settings-control-copy {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.settings-control-copy > span:last-child {
    min-width: 0;
}

.settings-control-mark {
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--bg-body) 80%, transparent);
    color: var(--text-muted);
    font-size: 0.76rem;
}

.settings-control-copy label,
.settings-control-heading > label {
    display: block;
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.settings-control-copy small {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.settings-control-action,
.settings-control-action--switch,
.settings-control-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-value-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.settings-select {
    width: auto;
    min-width: 158px;
    height: 38px;
    margin: 0;
    padding: 0 34px 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    outline: none;
    background-color: color-mix(in srgb, var(--bg-body) 78%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.76rem;
}

.settings-select:focus-visible,
.settings-section-link:focus-visible,
.settings-manage-portfolios:focus-visible,
.settings-danger-button:focus-visible {
    border-color: var(--primary-color);
    outline: 3px solid rgba(56, 189, 248, 0.18);
    outline-offset: 2px;
}

.settings-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.settings-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.settings-switch > span {
    position: absolute;
    inset: 0;
    border: 1px solid var(--border-hover);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-body) 84%, transparent);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.settings-switch > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: var(--shadow-sm);
    content: '';
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.settings-switch input:checked + span {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.settings-switch input:checked + span::after {
    transform: translateX(20px);
    background: #fff;
}

.settings-switch input:focus-visible + span {
    outline: 3px solid rgba(56, 189, 248, 0.2);
    outline-offset: 2px;
}

.settings-switch input:disabled + span {
    cursor: wait;
    opacity: 0.55;
}

.settings-security-row {
    margin: 0 22px;
}

.settings-control-heading {
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.settings-control-heading > label {
    margin: 0;
}

.settings-status-badge.is-enabled {
    border-color: rgba(74, 222, 128, 0.25);
    background: rgba(74, 222, 128, 0.1);
    color: var(--success);
}

.settings-security-row[aria-busy='true'] {
    opacity: 0.68;
}

.settings-security-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 22px 20px;
    padding: 11px 13px;
    border: 1px solid rgba(56, 189, 248, 0.13);
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.055);
    color: var(--text-muted);
    font-size: 0.7rem;
}

.settings-security-note i {
    margin-top: 3px;
    color: var(--primary-color);
}

.settings-security-note p {
    margin: 0;
}

.settings-security-note strong {
    color: var(--text-secondary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.settings-portfolio-context {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(190px, 250px) auto;
    align-items: end;
    gap: 18px;
    padding: 20px 22px;
}

.settings-portfolio-context-copy > span,
.settings-portfolio-select-label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 600;
}

.settings-portfolio-context-copy strong {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-portfolio-context-copy small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.67rem;
}

.settings-portfolio-select-label .settings-select {
    width: 100%;
}

.settings-manage-portfolios {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.settings-manage-portfolios:hover {
    border-color: var(--border-hover);
    background: color-mix(in srgb, var(--bg-body) 70%, transparent);
    color: var(--text-primary);
}

.settings-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 22px 22px;
    padding: 17px 18px;
    border: 1px solid rgba(248, 113, 113, 0.24);
    border-radius: 12px;
    background: rgba(248, 113, 113, 0.045);
}

.settings-deletion-pending {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 20px 22px 0;
    padding: 14px 16px;
    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: 11px;
    background: rgba(250, 204, 21, 0.06);
}

.settings-deletion-pending[hidden] {
    display: none;
}

.settings-deletion-pending strong {
    display: block;
    margin-bottom: 3px;
    font-size: 0.78rem;
}

.settings-deletion-pending p {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.settings-deletion-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.settings-deletion-actions .btn {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    font-size: 0.69rem;
}

.delete-account-page {
    max-width: 520px;
    text-align: center;
}

.delete-account-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-size: 1.2rem;
}

.delete-account-page > p {
    color: var(--text-muted);
    line-height: 1.6;
}

.delete-account-page .settings-danger-button {
    width: 100%;
    margin: 20px 0 14px;
}

.delete-account-message {
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
    font-size: 0.76rem;
}

.delete-account-message:empty {
    display: none;
}

.delete-account-message.is-success {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border-color));
    background: color-mix(in srgb, var(--success) 8%, transparent);
    color: var(--success);
}

.settings-danger-label {
    margin-bottom: 4px;
    color: var(--danger);
    font-size: 0.62rem;
}

.settings-danger-zone h3 {
    margin: 0 0 4px;
    font-size: 0.86rem;
}

.settings-danger-zone p {
    max-width: 510px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.settings-danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(248, 113, 113, 0.42);
    border-radius: 9px;
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.settings-danger-button:hover:not(:disabled) {
    border-color: var(--danger);
    background: rgba(248, 113, 113, 0.17);
    transform: translateY(-1px);
}

.settings-danger-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

body.settings-dialog-open {
    overflow: hidden;
}

.settings-dialog[hidden] {
    display: none !important;
}

.settings-dialog {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: none;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 20px;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(5px);
}

.settings-dialog.is-visible {
    display: flex;
}

.settings-dialog-content {
    width: min(100%, 470px);
    padding: 28px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
    animation: settings-dialog-enter 180ms ease-out;
}

.settings-dialog-icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    place-items: center;
    border-radius: 13px;
    background: rgba(248, 113, 113, 0.11);
    color: var(--danger);
    font-size: 1.05rem;
}

.settings-dialog-eyebrow {
    color: var(--danger);
}

.settings-dialog-content h2 {
    margin-bottom: 8px;
    font-size: 1.15rem;
}

.settings-dialog-content > p:not(.settings-dialog-eyebrow) {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.settings-dialog-error {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(248, 113, 113, 0.24);
    border-radius: 9px;
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
    font-size: 0.72rem;
}

.settings-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}

.settings-dialog-actions .btn,
.settings-dialog-actions .settings-danger-button {
    width: auto;
    min-height: 38px;
    margin: 0;
    padding: 0 14px;
    font-size: 0.72rem;
}

.settings-page-status {
    position: fixed;
    z-index: 3100;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    max-width: min(380px, calc(100vw - 32px));
    gap: 9px;
    padding: 12px 15px;
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-card) 94%, #052e16 6%);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: 0.74rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.settings-page-status[hidden] {
    display: none;
}

.settings-page-status.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.settings-page-status i {
    color: var(--success);
}

.settings-page-status.is-error {
    border-color: rgba(248, 113, 113, 0.28);
}

.settings-page-status.is-error i {
    color: var(--danger);
}

@keyframes settings-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes settings-section-enter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .settings-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px;
    }

    .settings-account-summary {
        width: 100%;
        min-width: 0;
    }

    .settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-section-nav {
        position: static;
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .settings-section-nav::-webkit-scrollbar {
        display: none;
    }

    .settings-section-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .settings-portfolio-context {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 0.8fr);
    }

    .settings-manage-portfolios {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .settings-page {
        padding-bottom: 36px;
    }

    .settings-hero {
        gap: 20px;
        margin-bottom: 15px;
        padding: 21px 18px;
        border-radius: 14px;
    }

    .settings-hero p {
        font-size: 0.82rem;
    }

    .settings-account-summary {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 10px;
    }

    .settings-account-avatar {
        width: 38px;
        height: 38px;
    }

    .settings-account-role {
        display: none;
    }

    .settings-layout {
        gap: 15px;
    }

    .settings-section-card {
        border-radius: 13px;
    }

    .settings-section-header {
        padding: 18px 16px 15px;
    }

    .settings-section-header p {
        font-size: 0.7rem;
    }

    .settings-control-list {
        padding: 0 16px;
    }

    .settings-control-row,
    .settings-security-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        min-height: 0;
        padding: 17px 0;
    }

    .settings-control-action,
    .settings-control-action--switch {
        width: 100%;
        justify-content: space-between;
    }

    .settings-control-action:not(.settings-control-action--switch) .settings-select {
        width: 100%;
    }

    .settings-security-row {
        position: relative;
        margin: 0 16px;
        padding-right: 58px;
    }

    .settings-security-row > .settings-switch {
        position: absolute;
        top: 18px;
        right: 0;
    }

    .settings-security-note {
        margin: 0 16px 17px;
    }

    .settings-portfolio-context {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        padding: 18px 16px;
    }

    .settings-manage-portfolios {
        width: 100%;
    }

    .settings-danger-zone {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        margin: 0 16px 17px;
        padding: 15px;
    }

    .settings-deletion-pending,
    .settings-deletion-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-deletion-actions .btn {
        width: 100%;
    }

    .settings-danger-button {
        width: 100%;
    }

    .settings-dialog {
        padding: 14px;
    }

    .settings-dialog-content {
        padding: 22px 18px;
        border-radius: 15px;
    }

    .settings-dialog-actions {
        flex-direction: column-reverse;
    }

    .settings-dialog-actions .btn,
    .settings-dialog-actions .settings-danger-button {
        width: 100%;
    }

    .settings-page-status {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-section-card.is-active,
    .settings-dialog-content,
    .settings-page-status,
    .settings-danger-button,
    .settings-switch > span,
    .settings-switch > span::after {
        animation: none;
        transition: none;
    }
}

/* Keep the shared toolbar on one compact row after legacy mobile overrides. */
@media (max-width: 768px) {
    #app-header {
        flex-direction: row;
        align-items: center;
        gap: 9px;
        min-height: 58px;
        margin-bottom: 18px;
        padding: 7px 8px;
    }

    #app-header .global-search-container {
        flex: 1 1 auto;
        width: 0;
        min-width: 0;
        max-width: none;
        margin: 0;
    }
}