/* ASK theme tokens.
   Light keeps the current ASK surfaces. Dark is Carbon Studio from Redmarc:
   neutral greys, no blue tint, no pure black. Values are authored separately,
   not inverted. Components should use these roles instead of raw hex.

   Source palette: https://github.com/ArcFrontDev/Redmarc frontend/src/index.css
*/

:root {
  --ask-bg: #f8f8fb;
  --ask-surface: #ffffff;
  --ask-surface-raised: #ffffff;
  --ask-surface-muted: #f3f3f9;
  --ask-text: #495057;
  --ask-text-secondary: #74788d;
  --ask-text-muted: #74788d;
  --ask-border: #eff2f7;
  --ask-border-subtle: #ced4da;
  --ask-border-strong: #adb5bd;
  --ask-accent: #556ee6;
  --ask-accent-hover: #4458b8;
  --ask-accent-soft: rgba(85, 110, 230, 0.12);
  --ask-success: #34c38f;
  --ask-warning: #f1b44c;
  --ask-danger: #f46a6a;
  --ask-hover: rgba(0, 0, 0, 0.04);
  --ask-input: #ffffff;
  --ask-overlay: rgba(23, 35, 55, 0.45);
  --ask-card-hover: #f0f3f8;
  --ask-sidebar: #2a3042;
  --ask-on-accent: #ffffff;
}

html[data-bs-theme="dark"] {
  color-scheme: dark;

  --ask-bg: #1a1b1e;
  --ask-surface: #262830;
  --ask-surface-raised: #2e3038;
  --ask-surface-muted: #22242b;
  --ask-text: #d0d3db;
  --ask-text-secondary: #8a8f9e;
  --ask-text-muted: #585e70;
  --ask-border: rgba(255, 255, 255, 0.13);
  --ask-border-subtle: rgba(255, 255, 255, 0.1);
  --ask-border-strong: rgba(255, 255, 255, 0.18);
  --ask-accent: #6b8fb5;
  --ask-accent-hover: #8899aa;
  --ask-accent-soft: rgba(136, 153, 170, 0.13);
  --ask-success: #3daa74;
  --ask-warning: #c49040;
  --ask-danger: #d95555;
  --ask-hover: rgba(255, 255, 255, 0.06);
  --ask-input: rgba(255, 255, 255, 0.07);
  --ask-overlay: rgba(8, 10, 14, 0.75);
  --ask-card-hover: #353840;
  --ask-sidebar: #202126;
  --ask-on-accent: #1a1b1e;

  --bs-body-color: var(--ask-text);
  --bs-body-color-rgb: 208, 211, 219;
  --bs-body-bg: var(--ask-bg);
  --bs-body-bg-rgb: 26, 27, 30;
  --bs-emphasis-color: #e8eaef;
  --bs-emphasis-color-rgb: 232, 234, 239;
  --bs-secondary-color: var(--ask-text-secondary);
  --bs-secondary-color-rgb: 138, 143, 158;
  --bs-secondary-bg: var(--ask-surface);
  --bs-secondary-bg-rgb: 38, 40, 48;
  --bs-tertiary-color: var(--ask-text-muted);
  --bs-tertiary-color-rgb: 88, 94, 112;
  --bs-tertiary-bg: var(--ask-surface-raised);
  --bs-tertiary-bg-rgb: 46, 48, 56;
  --bs-heading-color: var(--ask-text);
  --bs-border-color: var(--ask-border);
  --bs-border-color-translucent: var(--ask-border-strong);
  --bs-header-bg: var(--ask-surface);
  --bs-header-item-color: var(--ask-text-secondary);
  --bs-header-dark-bg: var(--ask-surface-muted);
  --bs-header-dark-item-color: var(--ask-text);
  --bs-topbar-search-bg: var(--ask-surface-raised);
  --bs-footer-bg: var(--ask-surface);
  --bs-footer-color: var(--ask-text-secondary);
  --bs-topnav-bg: var(--ask-surface);
  --bs-menu-item-color: var(--ask-text-secondary);
  --bs-menu-item-active-color: var(--ask-accent);
  --bs-boxed-body-bg: var(--ask-surface-muted);
  --bs-light: var(--ask-surface-raised);
  --bs-light-rgb: 46, 48, 56;
  --bs-light-bg-subtle: var(--ask-surface-muted);
  --bs-light-border-subtle: var(--ask-border);
  --bs-link-color: var(--ask-accent);
  --bs-link-hover-color: var(--ask-accent-hover);
  --bs-link-color-rgb: 107, 143, 181;
  --bs-link-hover-color-rgb: 136, 153, 170;
  --bs-dark-color: var(--ask-text);
  --bs-card-bg: var(--ask-surface);
  --bs-card-cap-bg: var(--ask-surface-raised);
}

html[data-bs-theme="dark"] .bg-white {
  background-color: var(--ask-surface) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .text-dark {
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .toast,
html[data-bs-theme="dark"] .popover,
html[data-bs-theme="dark"] .tooltip-inner {
  background-color: var(--ask-surface-raised) !important;
  color: var(--ask-text);
  border-color: var(--ask-border) !important;
}

html[data-bs-theme="dark"] .tab-content {
  background-color: var(--ask-surface);
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .accordion-button,
html[data-bs-theme="dark"] .content-widget,
html[data-bs-theme="dark"] .attention-widget {
  background-color: var(--ask-surface) !important;
  background-image: none !important;
  color: var(--ask-text);
  border-color: var(--ask-border);
}

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

html[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--ask-text);
  --bs-table-bg: var(--ask-surface-raised);
  --bs-table-border-color: var(--ask-border);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--ask-input);
  color: var(--ask-text);
  border-color: var(--ask-border-strong);
  color-scheme: dark;
}

html[data-bs-theme="dark"] option,
html[data-bs-theme="dark"] optgroup {
  background-color: var(--ask-surface-raised);
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .date-picker {
  background: var(--ask-surface-raised);
  color: var(--ask-text);
  border-color: var(--ask-border);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .date-picker__title,
html[data-bs-theme="dark"] .date-picker__pick:not(._grid) {
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .date-picker__pick-select button,
html[data-bs-theme="dark"] .date-picker__time input {
  background: var(--ask-input);
  color: var(--ask-text);
  border-color: var(--ask-border-strong);
}

html[data-bs-theme="dark"] .date-picker__pick-select ul {
  background: var(--ask-surface-raised);
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .date-picker__calendar input {
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] .form-select::placeholder {
  color: var(--ask-text-muted);
}

.app-search button.btn-light {
  background-color: var(--bs-topbar-search-bg);
}

html[data-bs-theme="dark"] .btn-light,
html[data-bs-theme="dark"] .btn-outline-light {
  background-color: var(--ask-surface-raised) !important;
  border-color: var(--ask-border) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .app-search button.btn-light {
  background-color: var(--ask-input) !important;
}

html[data-bs-theme="dark"] .card-header.bg-secondary {
  background-color: var(--ask-surface-muted) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .card-header.bg-secondary .card-title,
html[data-bs-theme="dark"] .card-header.bg-secondary .text-white,
html[data-bs-theme="dark"] .card-header.bg-secondary h4,
html[data-bs-theme="dark"] .card-header.bg-secondary h5 {
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--ask-text-secondary);
  --bs-btn-border-color: var(--ask-border-strong);
  --bs-btn-hover-color: var(--ask-text);
  --bs-btn-hover-bg: var(--ask-hover);
  --bs-btn-hover-border-color: var(--ask-border-strong);
  --bs-btn-active-color: var(--ask-text);
  --bs-btn-active-bg: var(--ask-surface-raised);
  --bs-btn-active-border-color: var(--ask-border-strong);
}

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

html[data-bs-theme="dark"] #live-search-results,
html[data-bs-theme="dark"] .search-suggestions {
  background-color: var(--ask-surface-raised) !important;
  color: var(--ask-text);
  border-color: var(--ask-border) !important;
}

html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--ask-surface-raised) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .alert-light {
  background-color: var(--ask-surface) !important;
  color: var(--ask-text) !important;
  border-color: var(--ask-border) !important;
}

html[data-bs-theme="dark"] .page-header,
html[data-bs-theme="dark"] .compact-header,
html[data-bs-theme="dark"] .filter-section,
html[data-bs-theme="dark"] .content-wrapper,
html[data-bs-theme="dark"] .sidebar-card,
html[data-bs-theme="dark"] .page-meta-row,
html[data-bs-theme="dark"] .meta-strip,
html[data-bs-theme="dark"] .client-quick-filter-card,
html[data-bs-theme="dark"] .related-item,
html[data-bs-theme="dark"] .stat-item,
html[data-bs-theme="dark"] .list-item,
html[data-bs-theme="dark"] .kb-nav-card,
html[data-bs-theme="dark"] .registry-page-header,
html[data-bs-theme="dark"] .search-filter-section,
html[data-bs-theme="dark"] .registry-table-wrapper,
html[data-bs-theme="dark"] .pagination-wrapper,
html[data-bs-theme="dark"] .registry-card-mobile,
html[data-bs-theme="dark"] .crm-header,
html[data-bs-theme="dark"] .project-header,
html[data-bs-theme="dark"] .clients-page-header,
html[data-bs-theme="dark"] .lead-header,
html[data-bs-theme="dark"] .contact-info-header,
html[data-bs-theme="dark"] .activity-info-header,
html[data-bs-theme="dark"] .compact-metric,
html[data-bs-theme="dark"] .activity-card,
html[data-bs-theme="dark"] .clients-table-wrapper,
html[data-bs-theme="dark"] .client-card-mobile,
html[data-bs-theme="dark"] .metric-button,
html[data-bs-theme="dark"] .task-section,
html[data-bs-theme="dark"] .msg-block,
html[data-bs-theme="dark"] .lead-comments-section,
html[data-bs-theme="dark"] .info-card,
html[data-bs-theme="dark"] .date-item,
html[data-bs-theme="dark"] #miniCalPopover,
html[data-bs-theme="dark"] .activity-quick-form,
html[data-bs-theme="dark"] .lead-status-banner,
html[data-bs-theme="dark"] .contact-meta-row,
html[data-bs-theme="dark"] .activity-meta-row,
html[data-bs-theme="dark"] .deal-status-list,
html[data-bs-theme="dark"] .company-status-list,
html[data-bs-theme="dark"] .product-group,
html[data-bs-theme="dark"] .dashboard-header,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .employee-profile-card,
html[data-bs-theme="dark"] .finance-section,
html[data-bs-theme="dark"] .absence-stat-card,
html[data-bs-theme="dark"] .form-section,
html[data-bs-theme="dark"] .notification-switch,
html[data-bs-theme="dark"] .client-stat,
html[data-bs-theme="dark"] .team-membership-item {
  background-color: var(--ask-surface) !important;
  background-image: none !important;
  border-color: var(--ask-border) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .form-section-header,
html[data-bs-theme="dark"] .finance-section .finance-section-header,
html[data-bs-theme="dark"] .client-stat:hover,
html[data-bs-theme="dark"] .notification-switch:hover {
  background: var(--ask-surface-raised) !important;
  border-color: var(--ask-border) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .employee-name,
html[data-bs-theme="dark"] .finance-section-title,
html[data-bs-theme="dark"] .form-section-title,
html[data-bs-theme="dark"] .absence-stat-value,
html[data-bs-theme="dark"] .contact-item,
html[data-bs-theme="dark"] .form-group label {
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .employee-position,
html[data-bs-theme="dark"] .absence-stat-label,
html[data-bs-theme="dark"] .absence-stat-unit,
html[data-bs-theme="dark"] .form-section-title i,
html[data-bs-theme="dark"] .contact-item i,
html[data-bs-theme="dark"] .contact-item svg {
  color: var(--ask-text-secondary) !important;
}

html[data-bs-theme="dark"] .dashboard-container {
  background: var(--ask-bg) !important;
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .dashboard-header h1,
html[data-bs-theme="dark"] .stat-card-value,
html[data-bs-theme="dark"] .stat-card-label,
html[data-bs-theme="dark"] .widget-title,
html[data-bs-theme="dark"] .widget-item-title,
html[data-bs-theme="dark"] .widget-item-title a,
html[data-bs-theme="dark"] .widget-link:hover {
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .dashboard-header p,
html[data-bs-theme="dark"] .stat-card-title,
html[data-bs-theme="dark"] .widget-kicker,
html[data-bs-theme="dark"] .widget-item-meta,
html[data-bs-theme="dark"] .widget-link,
html[data-bs-theme="dark"] .compact-empty-state,
html[data-bs-theme="dark"] .empty-state {
  color: var(--ask-text-secondary) !important;
}

html[data-bs-theme="dark"] .widget-list-item:hover,
html[data-bs-theme="dark"] .clickable:hover,
html[data-bs-theme="dark"] .show-more-btn {
  background: var(--ask-surface-raised) !important;
  border-color: var(--ask-border) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .crm-header h1,
html[data-bs-theme="dark"] .project-header h1,
html[data-bs-theme="dark"] .clients-page-header h1,
html[data-bs-theme="dark"] .lead-header h1,
html[data-bs-theme="dark"] .lead-subject,
html[data-bs-theme="dark"] .contact-info-header h1,
html[data-bs-theme="dark"] .activity-info-header h1,
html[data-bs-theme="dark"] .compact-metric-value,
html[data-bs-theme="dark"] .metric-number,
html[data-bs-theme="dark"] .clients-table th,
html[data-bs-theme="dark"] .clients-table td,
html[data-bs-theme="dark"] .client-name,
html[data-bs-theme="dark"] .info-list .info-value,
html[data-bs-theme="dark"] .task-section-title,
html[data-bs-theme="dark"] .msg-block .msg-head .msg-sender,
html[data-bs-theme="dark"] .msg-block .msg-body {
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .compact-metric-label,
html[data-bs-theme="dark"] .metric-label,
html[data-bs-theme="dark"] .lead-meta-left .lead-meta-item,
html[data-bs-theme="dark"] .lead-meta-right .lead-meta-item,
html[data-bs-theme="dark"] .info-list .info-label {
  color: var(--ask-text-secondary) !important;
}

html[data-bs-theme="dark"] .clients-table thead,
html[data-bs-theme="dark"] .clients-table tbody tr:hover,
html[data-bs-theme="dark"] .filter-button,
html[data-bs-theme="dark"] .pagination-btn,
html[data-bs-theme="dark"] .client-logo,
html[data-bs-theme="dark"] .client-type-badge,
html[data-bs-theme="dark"] .msg-compact:hover,
html[data-bs-theme="dark"] .activity-card.completed,
html[data-bs-theme="dark"] .contact-icon-wrapper,
html[data-bs-theme="dark"] .activity-icon-wrapper,
html[data-bs-theme="dark"] #mini-calendar .mc-day.has-event {
  background: var(--ask-surface-raised) !important;
  background-image: none !important;
  color: var(--ask-text) !important;
  border-color: var(--ask-border) !important;
}

html[data-bs-theme="dark"] .sidebar-card .card-header,
html[data-bs-theme="dark"] .sidebar-card .card-header.collapsible:hover,
html[data-bs-theme="dark"] .search-suggestions .suggestion-item:hover,
html[data-bs-theme="dark"] .kb-nav-card:hover,
html[data-bs-theme="dark"] .filter-tag,
html[data-bs-theme="dark"] .active-category,
html[data-bs-theme="dark"] .category-active {
  background-color: var(--ask-surface-raised) !important;
  border-color: var(--ask-border) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .kb-nav-direction,
html[data-bs-theme="dark"] .stat-number,
html[data-bs-theme="dark"] .filter-tag .remove {
  color: var(--ask-accent) !important;
}

html[data-bs-theme="dark"] .kb-nav-title,
html[data-bs-theme="dark"] .stat-label,
html[data-bs-theme="dark"] .meta-left .meta-item,
html[data-bs-theme="dark"] .meta-right .meta-item,
html[data-bs-theme="dark"] .list-item .meta {
  color: var(--ask-text-secondary) !important;
}

html[data-bs-theme="dark"] .subcategory-list a[style*="background: #f8f9fa"],
html[data-bs-theme="dark"] .kb-page-wrapper div[style*="background: #f8f9fa"],
html[data-bs-theme="dark"] .compact-header div[style*="background: #f8f9fa"],
html[data-bs-theme="dark"] .page-header div[style*="background: #f8f9fa"] {
  background: var(--ask-surface-raised) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] body[data-sidebar="dark"] .navbar-brand-box,
html[data-bs-theme="dark"] body[data-sidebar="dark"] .vertical-menu,
html[data-bs-theme="dark"] body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
  background: var(--ask-sidebar);
}

html[data-bs-theme="dark"] body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: var(--ask-text-secondary);
}

html[data-bs-theme="dark"] body[data-sidebar="dark"] #sidebar-menu ul li a i,
html[data-bs-theme="dark"] body[data-sidebar="dark"] .menu-title {
  color: var(--ask-text-muted);
}

html[data-bs-theme="dark"] body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
html[data-bs-theme="dark"] body[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
html[data-bs-theme="dark"] body[data-sidebar="dark"] .mm-active,
html[data-bs-theme="dark"] body[data-sidebar="dark"] .mm-active > a,
html[data-bs-theme="dark"] body[data-sidebar="dark"] .mm-active > a i,
html[data-bs-theme="dark"] body[data-sidebar="dark"] .mm-active .active,
html[data-bs-theme="dark"] body[data-sidebar="dark"] .mm-active .active i {
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background: var(--ask-surface);
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .select2-dropdown,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--ask-surface-raised);
  color: var(--ask-text);
  border-color: var(--ask-border);
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--ask-accent-soft);
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .swal2-popup {
  background: var(--ask-surface-raised);
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .swal2-html-container,
html[data-bs-theme="dark"] .swal2-title {
  color: var(--ask-text);
}

html[data-bs-theme="dark"] .tox .tox-edit-area__iframe,
html[data-bs-theme="dark"] .tox .tox-toolbar,
html[data-bs-theme="dark"] .tox .tox-menubar,
html[data-bs-theme="dark"] .tox .tox-edit-area {
  background: var(--ask-surface) !important;
}

html[data-bs-theme="dark"] .pe-side-nav {
  background-color: var(--ask-surface) !important;
  border-color: var(--ask-border) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .pe-side-nav__link {
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .pe-side-nav__link:hover {
  background-color: var(--ask-hover) !important;
  color: var(--ask-text) !important;
}

html[data-bs-theme="dark"] .pe-side-nav__link.is-active {
  background-color: var(--ask-accent-soft) !important;
  color: var(--ask-accent) !important;
}

html[data-bs-theme="dark"] .pe-side-nav__badge {
  background-color: var(--ask-surface-raised) !important;
  color: var(--ask-text-secondary) !important;
}

html[data-bs-theme="dark"] .pe-side-nav__link.is-active .pe-side-nav__badge {
  background-color: var(--ask-accent-soft) !important;
  color: var(--ask-accent) !important;
}

html[data-bs-theme="dark"] .pe-panel {
  background-color: var(--ask-surface);
  border-color: var(--ask-border);
  color: var(--ask-text);
}

html[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}