:root {

    /*==================================================
      BRAND COLORS
    ==================================================*/

    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;

    /*==================================================
      SURFACE
    ==================================================*/

    --background: #f4f7fb;

    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --surface-active: #eef4ff;

    /*==================================================
      TEXT
    ==================================================*/

    --text-color: #1f2937;
    --text-muted: #6b7280;

    /* backward compatibility */

    --text: var(--text-color);
    --text-light: var(--text-muted);

    /*==================================================
      BORDER
    ==================================================*/

    --border-light: #e5e7eb;

    /*==================================================
      RADIUS
    ==================================================*/

    --radius: 14px;

    /*==================================================
      SHADOWS
    ==================================================*/

    --shadow: 0 8px 24px rgba(15,23,42,.08);

    --shadow-hover: 0 18px 40px rgba(15,23,42,.12);

}

/* ==================================================
   Personal dark mode
   The attribute is set before the document is painted by theme.js.
   ================================================== */

.app-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #334155;
}

.app-theme-toggle:hover {
    color: #1d4ed8;
    border-color: #bfd2f5;
    background: #f3f7ff;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --background: #0b1220;
    --surface: #111b2e;
    --surface-hover: #18243a;
    --surface-active: #1b2c49;
    --text-color: #e5edf9;
    --text-muted: #9cacbf;
    --border-light: #2a3951;
    --shadow: 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-hover: 0 20px 44px rgba(0, 0, 0, .38);

    --bs-body-bg: #0b1220;
    --bs-body-color: #e5edf9;
    --bs-secondary-color: #9cacbf;
    --bs-secondary-bg: #19263a;
    --bs-tertiary-bg: #162238;
    --bs-emphasis-color: #f8fbff;
    --bs-border-color: #2a3951;
    --bs-card-bg: #111b2e;
    --bs-card-color: #e5edf9;
    --bs-modal-bg: #111b2e;
    --bs-dropdown-bg: #111b2e;
    --bs-dropdown-color: #e5edf9;
    --bs-dropdown-link-color: #dbe7f7;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #1b2b45;
    --bs-list-group-bg: #111b2e;
    --bs-list-group-color: #e5edf9;
    --bs-list-group-border-color: #2a3951;
    --bs-table-bg: #111b2e;
    --bs-table-color: #e5edf9;
    --bs-table-border-color: #2a3951;
    --bs-table-striped-bg: #162238;
    --bs-table-hover-bg: #1a2942;
}

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] footer {
    color: var(--text-color);
    background: var(--background) !important;
}

html[data-theme="dark"] .app-navbar,
html[data-theme="dark"] .navbar.bg-white,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .modal-window,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .accordion-item {
    color: var(--text-color);
    border-color: var(--border-light) !important;
    background-color: var(--surface) !important;
}

html[data-theme="dark"] .app-navbar {
    box-shadow: 0 3px 16px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .app-theme-toggle,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-close,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
    color: #e5edf9;
    border-color: #34445e;
    background-color: #17243a;
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .app-theme-toggle:hover {
    color: #fff;
    border-color: #4b6390;
    background: #263955;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    color: #fff;
    border-color: #5b91ef;
    background-color: #17243a;
    box-shadow: 0 0 0 .25rem rgba(73, 132, 235, .22);
}

html[data-theme="dark"] .form-control::placeholder {
    color: #8ea0b8;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small {
    color: #9cacbf !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] hr,
html[data-theme="dark"] .table > :not(caption) > * > * {
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--text-color);
    background-color: transparent;
}

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table thead th {
    color: #c4d3e8 !important;
    background: #17243a !important;
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    color: #fff;
    background: #1b2b45;
}

html[data-theme="dark"] .global-search__results,
html[data-theme="dark"] .app-notification-menu__panel {
    color: var(--text-color);
    border-color: var(--border-light);
    background: var(--surface);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .app-notification-menu__header,
html[data-theme="dark"] .app-notification-menu__item {
    color: var(--text-color);
    border-color: var(--border-light);
    background: var(--surface);
}

html[data-theme="dark"] .app-notification-menu__item.is-unread,
html[data-theme="dark"] .app-notification-menu__item.is-unread:hover {
    background: #162b4b;
}

html[data-theme="dark"] .app-notification-menu__content span,
html[data-theme="dark"] .app-notification-menu__header small,
html[data-theme="dark"] .app-notification-menu__content small,
html[data-theme="dark"] .app-user-menu__identity strong,
html[data-theme="dark"] .app-user-menu__identity small {
    color: #afc0d6 !important;
}

/* Dashboard */
html[data-theme="dark"] .dashboard-section-heading h2,
html[data-theme="dark"] .dashboard-metric-card strong,
html[data-theme="dark"] .dashboard-network-strip__intro strong,
html[data-theme="dark"] .dashboard-network-stat strong,
html[data-theme="dark"] .dashboard-panel__header h2,
html[data-theme="dark"] .dashboard-action strong,
html[data-theme="dark"] .dashboard-activity__content strong,
html[data-theme="dark"] .dashboard-documents__file,
html[data-theme="dark"] .dashboard-empty strong {
    color: #edf4ff;
}

html[data-theme="dark"] .dashboard-metric-card,
html[data-theme="dark"] .dashboard-network-strip,
html[data-theme="dark"] .dashboard-panel {
    border-color: var(--border-light);
    background: var(--surface);
    box-shadow: var(--shadow);
}

html[data-theme="dark"] .dashboard-network-strip__intro,
html[data-theme="dark"] .dashboard-network-stat,
html[data-theme="dark"] .dashboard-actions__grid,
html[data-theme="dark"] .dashboard-action,
html[data-theme="dark"] .dashboard-system__list,
html[data-theme="dark"] .dashboard-system__link,
html[data-theme="dark"] .dashboard-activity__list,
html[data-theme="dark"] .dashboard-activity__item,
html[data-theme="dark"] .dashboard-documents__table {
    border-color: var(--border-light);
}

html[data-theme="dark"] .dashboard-action:hover {
    background: #182943;
}

html[data-theme="dark"] .dashboard-documents__table thead th {
    color: #b7c7dc;
    border-color: var(--border-light);
    background: #17243a;
}

/* System settings */
html[data-theme="dark"] .settings-page h1,
html[data-theme="dark"] .settings-card__header h2,
html[data-theme="dark"] .settings-card .form-label,
html[data-theme="dark"] .settings-switch .form-check-label,
html[data-theme="dark"] .settings-ai-status strong,
html[data-theme="dark"] .settings-email-status strong,
html[data-theme="dark"] .settings-security-note strong,
html[data-theme="dark"] .settings-provider-guide strong,
html[data-theme="dark"] .settings-provider-credentials__heading h3 {
    color: #edf4ff;
}

html[data-theme="dark"] .settings-tabs,
html[data-theme="dark"] .settings-card__header,
html[data-theme="dark"] .settings-card__footer {
    border-color: var(--border-light);
}

html[data-theme="dark"] .settings-tabs .nav-link {
    color: #9cacbf;
}

html[data-theme="dark"] .settings-tabs .nav-link.active,
html[data-theme="dark"] .settings-tabs .nav-link:hover {
    color: #85b4ff;
}

html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-card__footer,
html[data-theme="dark"] .settings-ai-status,
html[data-theme="dark"] .settings-email-status,
html[data-theme="dark"] .settings-security-note,
html[data-theme="dark"] .settings-backup-note,
html[data-theme="dark"] .settings-provider-guide,
html[data-theme="dark"] .settings-provider-credentials,
html[data-theme="dark"] .appearance-preview {
    border-color: var(--border-light);
    background: var(--surface);
}

html[data-theme="dark"] .settings-card__header-icon,
html[data-theme="dark"] .settings-ai-status__icon,
html[data-theme="dark"] .settings-email-status__icon,
html[data-theme="dark"] .settings-security-note > i,
html[data-theme="dark"] .settings-backup-note > i,
html[data-theme="dark"] .settings-provider-credentials__heading > i {
    color: #8bb8ff;
    background: #1a3155;
}

html[data-theme="dark"] .appearance-preview__bar {
    background: #0a1220;
}

html[data-theme="dark"] .appearance-preview__content span {
    background: #31435f;
}

/* AI workspace */
html[data-theme="dark"] {
    --ai-ink: #edf4ff;
    --ai-muted: #9cacbf;
    --ai-border: #2a3951;
    --ai-panel: #111b2e;
    --ai-surface: #0b1220;
    --ai-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] .workspace-tool,
html[data-theme="dark"] .chat-item,
html[data-theme="dark"] .sidebar-search input,
html[data-theme="dark"] .chat-main__subtitle,
html[data-theme="dark"] .workspace-sidebar-footer {
    color: #b7c7dc;
}

html[data-theme="dark"] .workspace-tool:hover,
html[data-theme="dark"] .chat-item:hover,
html[data-theme="dark"] .context-tool:hover {
    color: #edf4ff;
    background: #1b2b45;
}

html[data-theme="dark"] .workspace-tool.is-active,
html[data-theme="dark"] .chat-item.active {
    color: #a8cbff;
    background: #173762;
}

html[data-theme="dark"] .sidebar-search input,
html[data-theme="dark"] .composer-input,
html[data-theme="dark"] .composer-select {
    color: #edf4ff;
    border-color: #34445e;
    background: #17243a;
}

html[data-theme="dark"] .assistant-message,
html[data-theme="dark"] .empty-chat__panel,
html[data-theme="dark"] .chat-composer,
html[data-theme="dark"] .chat-composer__toolbar {
    border-color: var(--ai-border);
    background: #142036;
}

/* Frequently used enterprise panels outside the dashboard. */
html[data-theme="dark"] .enterprise-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .ai-summary-content,
html[data-theme="dark"] .topology-stage {
    color: var(--text-color);
    border-color: var(--border-light);
    background-color: var(--surface) !important;
    box-shadow: var(--shadow);
}

html[data-theme="dark"] .topology-node rect {
    fill: #142036;
    stroke: #3a4c69;
}

html[data-theme="dark"] .topology-node__name {
    fill: #edf4ff;
}

html[data-theme="dark"] .topology-node__detail {
    fill: #9cacbf;
}

@media (max-width: 767.98px) {
    .app-theme-toggle {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 12px;
    }
}