@import url("./dark-theme-vars.css");
/* ===== Smooth & Lightweight Theme Blur (Improved) ===== */

.checkbox-user {
  position: relative;
  margin-left: 0 !important;
}
.label-user {
  margin-bottom: 0;
  margin-left: 7px;
  cursor: pointer;
}
.checkbox-inline-user {
  display: flex !important;
  align-items: flex-end;
  cursor: pointer !important;
  margin-right: 10px;
}

html.theme-blur::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  background: rgba(9, 12, 20, 0.3);

  transform: translateZ(0);
  will-change: opacity, -webkit-backdrop-filter, backdrop-filter;

  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  opacity: 0;
  animation: themeBlurPulse 720ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  transition: opacity 300ms ease, backdrop-filter 300ms ease;
}

@keyframes themeBlurPulse {
  0% {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }
  25% {
    opacity: 0.55;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  55% {
    opacity: 0.6;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  80% {
    opacity: 0.4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  100% {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }
}

@supports not (
  (backdrop-filter: blur(7px)) or (-webkit-backdrop-filter: blur(7px))
) {
  html.theme-blur::before {
    background: rgba(9, 12, 20, 0.38);
    animation: themeFadeOnly 600ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
  @keyframes themeFadeOnly {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.38;
    }
    100% {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-blur::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Dark theme styles are fully scoped under .theme-dark to avoid altering current colors by default */

.button-theme {
  background-color: var(--border) !important;
  border-color: var(--bg) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 50% !important;
  position: relative !important;
  z-index: 1001;
  padding: 5px 6px !important;
  transition: all 0.3s ease !important;
}
.theme-dark .button-theme {
  border-color: var(--border) !important;
}

.theme-dark,
.theme-dark body {
  background: var(--bg);
  color: var(--fg-muted);
}

/* Links */
.theme-dark .mb-3 h3 a {
  color: var(--primary-green);
}
.theme-dark .mb-3 h3 a:hover,
.theme-dark .mb-3 h3 a:focus {
  color: var(--green-hover);
}

/* Dropdown menu - override background images */
.theme-dark .dropdown-menu > li:hover,
.theme-dark .dropdown-menu > li:focus {
  background-image: none !important;
  background-color: var(--panel-strong) !important;
  color: var(--fg-muted);
}
.theme-dark .dropdown-menu > li {
  background-image: none !important;
  background-color: transparent;
  color: var(--fg-muted);
}

/* Override default dropdown styles that conflict with dark theme */
.theme-dark .dropdown-menu > li > a,
.theme-dark .dropdown-menu > li > a:hover,
.theme-dark .dropdown-menu > li > a:focus {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--fg-muted) !important;
  border: none !important;
  box-shadow: none !important;
}

.theme-dark .dropdown-menu > li > a:hover,
.theme-dark .dropdown-menu > li > a:focus {
  background-color: var(--panel-strong) !important;
  color: var(--fg) !important;
}

/* Override Bootstrap default dropdown styles */
.theme-dark .dropdown-menu > li:hover > a,
.theme-dark .dropdown-menu > li:focus > a {
  background-image: none !important;
  background-color: var(--panel-strong) !important;
  color: var(--fg) !important;
}

/* NAVBAR */
.theme-dark .navbar,
.theme-dark .navbar-default,
.theme-dark .navbar-inverse {
  background: var(--bg);
  color: var(--fg-muted);
}
.theme-dark .navbar .navbar-brand,
.theme-dark .navbar-default .navbar-brand,
.theme-dark .navbar-inverse .navbar-brand {
  color: var(--fg-muted);
}
.theme-dark .navbar .navbar-nav > li > a {
  color: var(--fg-muted);
}
.theme-dark .navbar .navbar-nav > li > a:hover,
.theme-dark .navbar .navbar-nav > li > a:focus,
.theme-dark .navbar .navbar-nav > .open > a,
.theme-dark .navbar .navbar-nav > .open > a:focus,
.theme-dark .navbar .navbar-nav > .open > a:hover {
  background-color: var(--panel-strong);
  color: var(--fg);
}
.theme-dark .navbar .navbar-toggle .icon-bar {
  background-color: var(--fg-muted);
}

/* Ensure top headers use dark background */
.theme-dark header#appheader,
.theme-dark header[name="proapp"],
.theme-dark header.ng-scope,
.theme-dark header {
  background: var(--bg) !important;
  color: var(--surface);
  box-shadow: none !important;
}
.theme-dark header#appheader .navbar,
.theme-dark header[name="proapp"] .navbar {
  background: var(--bg);
}

/* DROPDOWN (BASE) — DEDUPED: keep only one base block below (see “Additional home page” section) */

/* Containers / cards */
.theme-dark .panel,
.theme-dark .well,
.theme-dark .modal-content,
.theme-dark .Table,
.theme-dark .Row,
.theme-dark .Cell,
.theme-dark .panel-body,
.theme-dark .panel-heading,
.theme-dark .container,
.theme-dark .container-fluid {
  background: var(--bg) !important;
  color: var(--fg-muted);
  border-color: var(--border);
}
.theme-dark .panel-heading {
  background-color: var(--bg-step-top);
  border-color: var(--border);
}

/* Borders and dividers */
.theme-dark .table,
.theme-dark .table > thead > tr > th,
.theme-dark .table > tbody > tr > td {
  border-color: var(--border-soft);
}

/* TABLES */
.theme-dark .table,
.theme-dark .Table {
  background: var(--bg);
  color: var(--fg-muted);
  box-shadow: 0 3px 0 var(--border-soft);
}
.theme-dark .table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--bg);
}
.theme-dark .table-hover > tbody > tr:hover {
  background-color: var(--panel-strong);
  color: var(--fg);
}
.theme-dark .Heading h5 strong {
  color: var(--fg-muted);
}

/* Buttons */
.theme-dark .btn {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border);
  box-shadow: none;
  text-shadow: none;
  background-image: none;
}
.theme-dark .btn:hover,
.theme-dark .btn:focus {
  background-color: var(--panel-strong);
  border-color: var(--border);
  color: var(--fg);
  box-shadow: none;
  outline: none;
}
.theme-dark .btn:active,
.theme-dark .btn.active,
.theme-dark .open > .dropdown-toggle.btn {
  background-image: none;
  background-color: var(--bg) !important;
  color: var(--white);
  box-shadow: none;
  outline: none;
}
.theme-dark .btn-primary {
  background: var(--button-blue) !important;
  color: var(--fg);
  border-color: var(--primary);
}
.theme-dark .btn-primary:hover,
.theme-dark .btn-primary:focus {
  background-color: var(--button-blue);
  border-color: var(--primary);
  color: var(--fg);
}
.theme-dark .btn-success {
  background: var(--button-green) !important;
  color: var(--fg);
  border-color: var(--success);
}
.theme-dark .btn-success:hover,
.theme-dark .btn-success:focus {
  background: var(--green-hover);
  border-color: var(--button-green);
  color: var(--fg);
}
.theme-dark .btn-warning {
  background-color: var(--warning);
  color: var(--fg);
  border-color: var(--warning);
}
.theme-dark .btn-warning:hover,
.theme-dark .btn-warning:focus {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--fg);
}
.theme-dark .btn-info {
  background-color: var(--primary);
  color: var(--fg);
  border-color: var(--primary);
}
.theme-dark .btn-info:hover,
.theme-dark .btn-info:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--fg);
}
.theme-dark .btn-link {
  color: var(--primary);
}
.theme-dark .btn-link:hover {
  color: var(--primary);
}
.theme-dark .btn .fa,
.theme-dark .btn .glyphicon {
  color: inherit;
}
.theme-dark .btn-primary .fa,
.theme-dark .btn-primary .glyphicon {
  color: var(--white);
}
.theme-dark .btn-success .fa,
.theme-dark .btn-success .glyphicon,
.theme-dark .btn-warning .fa,
.theme-dark .btn-warning .glyphicon,
.theme-dark .btn-info .fa,
.theme-dark .btn-info .glyphicon {
  color: var(--white);
}
/* Legacy gradient buttons (bootstrap theme) */
.theme-dark .btn-default,
.theme-dark .btn-group .btn,
.theme-dark .dropdown .btn,
.theme-dark .input-group-btn .btn {
  background-image: none;
  color: var(--fg-muted);
  border-color: var(--border);
}
.theme-dark .btn-default:hover,
.theme-dark .btn-group .btn:hover,
.theme-dark .dropdown .btn:hover,
.theme-dark .input-group-btn .btn:hover {
  border-color: var(--border);
  color: var(--fg);
}

/* Square icon buttons used in files grid */
.theme-dark .btn.icon-only,
.theme-dark .btn-square,
.theme-dark .btn.btn-default.btn-xs {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border);
  box-shadow: none;
}
.theme-dark .btn.icon-only:hover,
.theme-dark .btn-square:hover,
.theme-dark .btn.btn-default.btn-xs:hover {
  background-color: var(--hover-strong);
}

/* Fix circular action buttons (teal circles) hover ring */
.theme-dark .btn-circle,
.theme-dark .circle-btn,
.theme-dark .round-btn {
  background-color: var(--accent-teal);
  color: var(--fg);
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: none;
}
.theme-dark .btn-circle:hover,
.theme-dark .circle-btn:hover,
.theme-dark .round-btn:hover {
  background-color: var(--accent-teal-hover);
  border-color: var(--shadow);
  box-shadow: 0 0 0 0 transparent;
}

/* Remove dark outline/ring applied by default anchors on focus */
.theme-dark a:focus,
.theme-dark button:focus,
.theme-dark .btn:focus {
  outline: none;
  box-shadow: none;
}

/* Inputs */
.theme-dark .form-control,
.theme-dark input,
.theme-dark select,
.theme-dark textarea {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border);
}
.theme-dark .form-control:focus {
  border-color: var(--primary-soft);
  box-shadow: none;
}
.theme-dark .form-control::placeholder {
  color: var(--fg-subtle);
}
.theme-dark .input-group-addon {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border);
}
.theme-dark select option {
  background-color: var(--panel-dim);
  color: var(--fg-muted);
}

/* Labels, badges */
.theme-dark .label,
.theme-dark .badge {
  border-radius: 3px;
}

/* Glyphs / icons */
.theme-dark .fa,
.theme-dark .glyphicon {
  color: var(--fg-muted);
}

/* Social media icons */
.theme-dark .social-icons,
.theme-dark .social-media,
.theme-dark .social-links,
.theme-dark .social-icon,
.theme-dark .twitter-icon,
.theme-dark .facebook-icon,
.theme-dark .google-icon,
.theme-dark .linkedin-icon {
  color: var(--fg-muted);
  background-color: transparent;
}
.theme-dark .social-icons a,
.theme-dark .social-media a,
.theme-dark .social-links a,
.theme-dark .social-icon a {
  color: var(--fg-muted);
  background-color: transparent;
}
.theme-dark .social-icons a:hover,
.theme-dark .social-media a:hover,
.theme-dark .social-links a:hover,
.theme-dark .social-icon a:hover {
  color: var(--info-text);
  background-color: transparent;
}

/* Social containers */
.theme-dark .social,
.theme-dark .social ul,
.theme-dark .social li {
  background-color: var(--bg) !important;
  color: var(--fg-muted);
}
.theme-dark .social ul {
  background: transparent !important;
}
.theme-dark .social a {
  color: var(--fg-muted);
  background-color: transparent;
}
.theme-dark .social a:hover {
  color: var(--primary-soft);
  background-color: transparent;
}

/* Breadcrumb / footer */
.theme-dark .breadcrumb {
  background-color: var(--panel-dim);
  border-color: var(--border);
}
.theme-dark footer,
.theme-dark .footer {
  background-color: var(--surface);
  color: var(--fg-subtle);
}

/* Alerts */
.theme-dark .alert {
  background-color: var(--panel-dim);
  color: var(--fg-muted);
  border-color: var(--border);
}
.theme-dark .alert-info {
  border-color: var(--info-border);
  color: var(--info-text);
}
.theme-dark .alert-success {
  border-color: var(--success);
  color: var(--success-text);
}
.theme-dark .alert-warning {
  border-color: var(--warning);
  color: var(--warning-text);
}
.theme-dark .alert-danger {
  border-color: var(--error);
  color: var(--danger-text);
}

/* Modal backdrop */
.theme-dark .modal-backdrop {
  background-color: var(--black);
}

/* Generic white-box overrides */
.theme-dark .panel,
.theme-dark .panel-default,
.theme-dark .panel-default > .panel-heading,
.theme-dark .well,
.theme-dark .card,
.theme-dark .box,
.theme-dark .box-shadow,
.theme-dark .refund-div,
.theme-dark .summarydiv,
.theme-dark .secondary-nav,
.theme-dark .tax-nav-container,
.theme-dark .attachment-item,
.theme-dark .attachment-left-side-bar,
.theme-dark .side-nav,
.theme-dark .bg-white,
.theme-dark .white-bg {
  background: var(--bg) !important;
  color: var(--fg-muted);
  border-color: var(--border);
}

/* Tabs and navs */
.theme-dark .nav-tabs {
  border-bottom: 1px solid var(--fg-muted);
  background: var(--surface);
}
.theme-dark .nav-tabs > li > a {
  color: var(--fg-muted);
  background-color: transparent;
  border-color: transparent;
}
.theme-dark .vs-tabset > .nav-tabs > li > a {
  background-color: var(--bg) !important;
  color: var(--fg-muted) !important;
}
.theme-dark .nav-tabs > li > a:hover {
  color: var(--fg) !important;
  background-color: var(--panel-strong) !important;
}
.theme-dark .nav-tabs > li.active > a,
.theme-dark .nav-tabs > li.active > a:focus,
.theme-dark .nav-tabs > li.active > a:hover {
  color: var(--fg);
  background-color: var(--panel-strong);
  border: 1px solid var(--fg-muted);
}

/* Files tabs custom class */
.theme-dark .files-tab1,
.theme-dark .files-tabs,
.theme-dark .files-tab {
  background: var(--surface);
  color: var(--fg-muted);
  border-color: var(--fg);
  box-shadow: none !important;
  outline: none;
  background-clip: padding-box;
}
.theme-dark .header {
  box-shadow: none !important;
}
.theme-dark .files-tab1 .tab,
.theme-dark .files-tabs .tab,
.theme-dark .files-tab .tab {
  background-color: transparent;
  color: var(--fg-muted);
  border-color: var(--surface);
}
.theme-dark .files-tab1 .tab.active,
.theme-dark .files-tabs .tab.active,
.theme-dark .files-tab .tab.active {
  background-color: var(--panel-strong);
  border-color: var(--surface);
  color: var(--fg);
  box-shadow: none;
}
.theme-dark .files-tab1 big,
.theme-dark .btn-heading h3 {
  color: var(--primary-soft-2) !important;
}

/* Tables inside custom boxes */
.theme-dark .box-shadow .table > thead > tr > th,
.theme-dark .box-shadow .table > tbody > tr > td {
  border-color: var(--surface);
}

/* Muted/secondary texts */
.theme-dark .text-muted,
.theme-dark .help-block,
.theme-dark small {
  color: var(--fg-subtle);
}

/* Input groups & search bars used on lists */
.theme-dark .st-search,
.theme-dark input[type="search"],
.theme-dark .search-container input[type="text"] {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border);
}

/* Dropdown caret/triangles */
.theme-dark .caret {
  border-top-color: var(--fg-muted);
  border-bottom-color: var(--fg-muted);
}

/* Keep printing in light mode */
@media print {
  html,
  body {
    background: var(--fg);
    color: var(--bg);
  }
}

/* Home page specific dark theme styles */
.theme-dark .navbar-light {
  background-color: var(--bg) !important;
  color: var(--fg-muted);
}
.theme-dark .navbar-brand-pro {
  color: var(--fg-muted);
}
.theme-dark .nav-link {
  color: var(--fg-muted) !important;
}
.theme-dark .nav-link:hover {
  color: var(--fg) !important;
}

/* DEDUPED: keep only this version of ghost-dark */
.theme-dark .btn-ghost-dark {
  background-color: transparent;
  color: var(--fg-muted);
  border-color: var(--fg-muted);
}
.theme-dark .btn-ghost-dark:hover {
  background-color: var(--panel-strong);
  color: var(--fg);
  border-color: var(--border);
}

/* DEDUPED: keep only this version of btn-dark */
.theme-dark .btn-dark {
  background-color: var(--btn-dark-bg);
  color: var(--fg);
  border-color: var(--btn-dark-border);
}
.theme-dark .btn-dark:hover {
  background-color: var(--btn-dark-hover-bg);
  border-color: var(--btn-dark-hover-border);
}

.theme-dark .text-primary {
  color: var(--info-text) !important;
} /* DEDUPED: one source of truth */
.theme-dark .text-dark {
  color: var(--fg-muted) !important;
} /* DEDUPED */

.theme-dark .display-4 {
  color: var(--fg-muted);
} /* DEDUPED */
.theme-dark .fs-3 {
  color: var(--fg-muted);
} /* DEDUPED */

.theme-dark .content-space-t-2,
.theme-dark .professional_content,
.theme-dark .pro_collaborate,
.theme-dark .pro_challenges {
  background: var(--bg);
}

.theme-dark .pro_content {
  color: var(--fg-muted);
}
.theme-dark .pro_figure {
  background: var(--bg);
  color: var(--fg-muted);
}
.theme-dark .blockquote {
  color: var(--fg-muted);
}

.theme-dark .card {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border);
} /* keep single source */
.theme-dark .card-body {
  background: var(--bg);
  color: var(--fg-muted);
}

.theme-dark .card-body h4 {
  color: var(--fg);
}
.theme-dark .card-footer {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border);
}

.theme-dark .card-ghost {
  background-color: transparent;
}
.theme-dark .card-ghost:hover {
  background-color: none !important;
}
.theme-dark .list-checked-item {
  color: var(--fg-muted);
}
.theme-dark .blockquote-footer,
.theme-dark .blockquote-footer-source {
  color: var(--fg-subtle);
}
.theme-dark .avatar {
  border-color: var(--border);
}
.theme-dark .badge.bg-dark {
  border-radius: 3px;
}
.theme-dark .bg-dark,
.theme-dark .bg-dark .container {
  background-color: var(--panel-strong) !important;
}
.theme-dark .text-white-70 {
  color: var(--fg-subtle) !important;
}
.theme-dark .text-white {
  color: var(--fg-muted) !important;
}
.theme-dark .pro_icon {
  color: var(--fg-muted);
}
.theme-dark .inner_sec,
.theme-dark .justify-content,
.theme-dark .card-text {
  color: var(--fg-subtle);
}
.theme-dark .d-block,
.theme-dark .fw-bold {
  color: var(--fg-muted);
}

.theme-dark .card a {
  color: var(--info-text);
}
.theme-dark .card a:hover {
  color: var(--info-text);
}
.theme-dark .pro_inner_icon a {
  color: var(--fg-muted);
}
.theme-dark .pro_inner_icon a:hover {
  color: var(--info-text);
}
.theme-dark .copyright_pro {
  color: var(--fg-subtle);
}
.theme-dark .list-px-2 a {
  color: var(--info-text);
}
.theme-dark .list-px-2 a:hover {
  color: var(--info-text);
}

.theme-dark .navbar-brand-pro {
  background-color: transparent;
}
.theme-dark .navbar-brand-logo {
  filter: brightness(1.2);
}
.theme-dark .pro_menu {
  background: var(--bg);
}
.theme-dark .navbar-nav .nav-link {
  color: var(--fg-muted);
}
.theme-dark .navbar-nav .nav-link:hover {
  color: var(--info-text);
}

/* DEDUPED: keep only this later version of ghost-dark (final values) */
.theme-dark .btn-ghost-dark {
  background-color: transparent;
  border-color: var(--border);
  color: var(--fg-muted);
}
.theme-dark .btn-ghost-dark:hover {
  background-color: var(--panel-strong);
  border-color: var(--border);
  color: var(--info-text);
}

/* DEDUPED: later version of btn-dark controls hover text color */
.theme-dark .btn-dark {
  background-color: var(--btn-dark-bg);
  border-color: var(--btn-dark-border);
  color: var(--fg-muted);
}
.theme-dark .btn-dark:hover {
  background-color: var(--btn-dark-hover-bg);
  border-color: var(--btn-dark-hover-border);
  color: var(--fg);
}

.theme-dark .btn-primary-pro {
  background-color: var(--primary-green);
  border-color: var(--info-text);
  color: var(--fg);
}
.theme-dark .btn-primary-pro:hover {
  background-color: var(--green-hover);
  border-color: var(--primary-green);
  color: var(--fg);
}

.theme-dark .display-4.text-primary {
  color: var(--primary-green) !important;
}
.theme-dark .display-4.text-dark {
  color: var(--fg-muted) !important;
}
.theme-dark .text-primary {
  color: var(--info-text) !important;
} /* (duplicate normalized) */
.theme-dark .text-dark {
  color: var(--fg-muted) !important;
} /* (duplicate normalized) */
.theme-dark .fs-3 {
  color: var(--fg-subtle);
}

.theme-dark .pro_content h2pro {
  color: var(--fg-muted);
}
.theme-dark .pro_content p {
  color: var(--fg-subtle);
}
.theme-dark .pro_figure {
  background-color: var(--bg);
  border-color: var(--border);
}
.theme-dark .blockquote {
  color: var(--fg-muted);
  border-left-color: var(--info-text);
}
.theme-dark .card-img {
  filter: brightness(0.9);
}
.theme-dark .dropdown-toggle::after {
  border-top-color: var(--fg-muted);
}

/* DEDUPED: dropdown-menu base — keep only this final block */
.theme-dark .dropdown-menu {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: 0 2px 10px var(--shadow);
}
.theme-dark .dropdown-item {
  color: var(--fg-muted);
}
.theme-dark .dropdown-item:hover {
  background-color: var(--panel-strong);
  color: var(--info-text);
}
.theme-dark .fa-check {
  color: var(--info-text);
}

/* Login page specific dark theme styles */
.theme-dark .well,
.theme-dark .well-lg,
.theme-dark .rts {
  background-color: var(--bg-step-bottom);
  border-color: var(--border-soft);
}
.theme-dark .well,
.theme-dark .well-lg,
.theme-dark .rts {
  color: var(--fg-muted);
}
.theme-dark .wall-align {
  background-color: transparent;
}
.theme-dark .sr {
  filter: brightness(0.9);
}
.theme-dark .form-group {
  color: var(--fg-muted);
}
.theme-dark .input-group-addon {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg-muted);
}
.theme-dark .form-control {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg-muted);
}
.theme-dark .form-control:focus {
  background-color: var(--panel-strong);
  border-color: var(--info-text);
  color: var(--fg-muted);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}
.theme-dark .form-control::placeholder {
  color: var(--fg-subtle);
}
.theme-dark .btn-primary {
  background-color: var(--info-text);
  border-color: var(--info-text);
  color: var(--fg);
}
.theme-dark .btn-primary:hover {
  background-color: var(--info-text);
  border-color: var(--info-text);
  color: var(--fg);
}
.theme-dark .alert {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg-muted);
}
.theme-dark .alert-success {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--fg);
}
.theme-dark .alert-danger {
  background-color: var(--error);
  border-color: var(--error);
  color: var(--fg);
}
.theme-dark .error,
.theme-dark .help-inline,
.theme-dark .has-error {
  color: var(--error-text) !important;
}
.theme-dark .marf-12 {
  color: var(--info-text);
}
.theme-dark .marf-12:hover {
  color: var(--info-text);
  text-decoration: underline;
}
.theme-dark .glyphicon,
.theme-dark .text-right {
  color: var(--fg-muted);
}

/* Dark theme: adjust home page icon images for visibility */
.theme-dark .mb-3 img,
.theme-dark .home-section .mb-3 img {
  filter: brightness(0) invert(0.8) !important;
}

/* ===== Dark theme variable-based overrides (use shared tokens) ===== */
/* (No changes below this line were necessary for token coverage) */

/* Dark table footer cells */
.theme-dark .Table .FooterCell,
.theme-dark .Table .footer-cell,
.theme-dark .FooterCell,
.theme-dark .footer-cell {
  background-color: var(--surface) !important;
}

.theme-dark nav.navbar.main-nav ul li a {
  color: var(--fg) !important;
}

/* Dashboard filter container dark theme fixes */
.theme-dark .filter-container {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border-soft);
}

.theme-dark .filter-container .dropdown,
.theme-dark .filter-container .dropdown .dropdown-content,
.theme-dark .filter-container .dropdown .dropdown-content ul li,
.theme-dark .filter-container .dropdown .dropdown-content ul li label {
  background: var(--surface) !important;
}

.theme-dark .filter-container .panel {
  background: var(--bg);
  border-color: var(--border-soft);
}

.theme-dark .filter-container .panel-default {
  background: var(--bg);
  border-color: var(--border-soft);
}

.theme-dark .filter-container .panel-body {
  background: var(--bg);
  color: var(--fg-muted);
}

.theme-dark .filter-container .panel-heading {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border-soft);
}

.theme-dark .filter-container .panel-title {
  color: var(--fg) !important;
}

.theme-dark .filter-container .panel-title button {
  color: var(--fg) !important;
  background: transparent;
  border: none;
}

/* Fix form elements in filter container */
.theme-dark .filter-container .form-control,
.theme-dark .filter-container .custom-select,
.theme-dark .filter-container input,
.theme-dark .filter-container select {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .filter-container .form-control::placeholder,
.theme-dark .filter-container input::placeholder {
  color: var(--fg-subtle) !important;
}

/* Fix dropdown elements */
.theme-dark .filter-container .nya-bs-select,
.theme-dark .filter-container .nya-bs-select *:not(.caret) {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .filter-container .nya-bs-select .dropdown-menu {
  background: var(--bg) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .filter-container .nya-bs-select .dropdown-menu li a {
  color: var(--fg-muted) !important;
  background: var(--bg) !important;
}

.theme-dark .filter-container .nya-bs-select .dropdown-menu li a:hover {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

/* Fix checkbox and radio buttons */
.theme-dark .filter-container input[type="checkbox"],
.theme-dark .filter-container input[type="radio"] {
  accent-color: var(--primary);
}

.theme-dark .filter-container input[type="checkbox"] + label,
.theme-dark .filter-container input[type="radio"] + label {
  color: var(--fg-muted) !important;
}

/* Fix date picker */
.theme-dark .filter-container .date-picker,
.theme-dark .filter-container .date-range-picker {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

/* Fix scrollable content */
.theme-dark .filter-container .scrollable-content {
  background: var(--bg);
  color: var(--fg-muted);
}

/* Fix filter categories */
.theme-dark .filter-container .filter-category h3,
.theme-dark .filter-container .filter-category h4,
.theme-dark .filter-container .filter-category h6 {
  color: var(--fg) !important;
}

.theme-dark .filter-container .filter-item,
.theme-dark .filter-container .filter-item label {
  color: var(--fg-muted) !important;
}

/* Fix main filters */
.theme-dark .filter-container .main-filter h4 button {
  color: var(--fg) !important;
  background: transparent !important;
}

/* Dashboard table dark theme fixes */
.theme-dark .table-container {
  background: var(--bg);
  color: var(--fg-muted);
}

.theme-dark .table-container table {
  background: var(--bg);
  color: var(--fg-muted);
  border-color: var(--border-soft);
}

.theme-dark .table-container table th {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .table-container table td {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .table-container table tbody tr {
  background: var(--bg);
  color: var(--fg-muted);
}

.theme-dark .table-container table tbody tr:hover {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

.theme-dark .table-container table tbody tr:hover td {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

.theme-dark .table-container table tbody tr:nth-child(odd) {
  background: var(--bg);
}

.theme-dark .table-container table tbody tr:nth-child(even) {
  background: var(--panel-dim);
}

/* Fix pagination in dashboard */
.theme-dark .table-container .pagination,
.theme-dark .table-container .pagination * {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .table-container .pagination > li > a,
.theme-dark .table-container .pagination > li > span {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .table-container .pagination > li > a:hover,
.theme-dark .table-container .pagination > li > span:hover {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

.theme-dark .table-container .pagination > .active > a,
.theme-dark .table-container .pagination > .active > span {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border-soft) !important;
}

/* Fix search bar in dashboard */
.theme-dark .table-container .search-container,
.theme-dark .table-container .search-container input {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .table-container .search-container input::placeholder {
  color: var(--fg-subtle) !important;
}

/* Fix table header and footer */
.theme-dark .table-container .table-header,
.theme-dark .table-container .table-footer {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border-soft) !important;
}

/* Fix any custom table classes */
.theme-dark .custom-table,
.theme-dark .dashboard-table {
  background: var(--bg);
  color: var(--fg-muted);
}

.theme-dark .custom-table th,
.theme-dark .dashboard-table th {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .custom-table td,
.theme-dark .dashboard-table td {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .custom-table tbody tr:hover,
.theme-dark .dashboard-table tbody tr:hover {
  background: var(--panel-strong) !important;
}

.theme-dark .custom-table tbody tr:hover td,
.theme-dark .dashboard-table tbody tr:hover td {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

/* Fix Bootstrap table classes specifically for dashboard */
.theme-dark .table.table-striped.table-bordered {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .table.table-striped.table-bordered th {
  background: var(--surface) !important;
  color: var(--primary-soft-2) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .table.table-striped.table-bordered td {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}
.theme-dark .table.table-striped.table-bordered tfoot td {
  background: var(--surface) !important;
}

.theme-dark .table.table-striped.table-bordered tbody tr:nth-child(odd) {
  background: var(--bg) !important;
}

.theme-dark .table.table-striped.table-bordered tbody tr:nth-child(even) {
  background: var(--panel-dim) !important;
}

.theme-dark .table.table-striped.table-bordered tbody tr:hover {
  background: var(--panel-strong) !important;
}

.theme-dark .table.table-striped.table-bordered tbody tr:hover td {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

/* Fix table-responsive container */
.theme-dark .table-responsive {
  background: var(--bg);
  border-color: var(--border-soft);
}

/* Fix list-container in dashboard */
.theme-dark .list-container {
  background: var(--bg);
  color: var(--fg-muted);
}

.theme-dark .list-container table {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}

.theme-dark .list-container table th {
  background: var(--surface) !important;
  color: var(--fg) !important;
}

.theme-dark .list-container table td {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}

/* Force override for any remaining white text */
.theme-dark .table-container *,
.theme-dark .list-container * {
  color: var(--fg-muted) !important;
}

.theme-dark .table-container th,
.theme-dark .table-container .table-header,
.theme-dark .list-container th {
  color: var(--fg) !important;
}

/* Fix Angular UI Grid tables in dashboard */
.theme-dark .ui-grid,
.theme-dark .ui-grid * {
  /* background: var(--bg) !important; */
  color: var(--fg-muted) !important;
}

.theme-dark .ui-grid-header {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .ui-grid-header th {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .ui-grid-header-cell {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .ui-grid-header-cell-label {
  color: var(--fg) !important;
}

.theme-dark .ui-grid-row {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}

.theme-dark .ui-grid-row:nth-child(odd) {
  background: var(--bg) !important;
}

.theme-dark .ui-grid-row:nth-child(even) {
  background: var(--panel-dim) !important;
}

.theme-dark .ui-grid-row:hover {
  background: var(--panel-strong) !important;
}

.theme-dark .ui-grid-row:hover .ui-grid-cell {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

.theme-dark .ui-grid-cell {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .ui-grid-cell-contents {
  color: var(--fg-muted) !important;
}

/* Fix pagination in UI Grid */
.theme-dark .ui-grid-pager-panel {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark
  .ui-grid-pager-panel
  *:not(
    .first-bar-rtl,
    .last-bar,
    .first-triangle,
    .last-triangle,
    .first-bar
  ) {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}

.theme-dark .last-bar,
.theme-dark .next-triangle,
.theme-dark .last-triangle {
  border-color: transparent transparent transparent var(--white) !important ;
}

.theme-dark .prev-triangle,
.theme-dark .first-triangle {
  border-color: transparent var(--white) transparent transparent !important ;
}
.theme-dark .first-bar {
  border-left: 2px solid var(--white) !important;
}

.theme-dark .ui-grid-pager-panel button {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .ui-grid-pager-panel button:hover {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

.theme-dark .ui-grid-pager-panel button:disabled {
  background: var(--panel-dim) !important;
  color: var(--fg-subtle) !important;
}

/* Fix dropdown in pagination */
.theme-dark .ui-grid-pager-panel select {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-soft) !important;
}

.theme-dark .ui-grid-pager-panel select option {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}

.theme-dark [class*="grid"] * {
  /* background: var(--bg) !important; */
  color: var(--fg-muted) !important;
}

.theme-dark [class*="grid"] th,
.theme-dark [class*="grid"] .ui-grid-header-cell {
  background: var(--surface) !important;
  color: var(--fg) !important;
}

.theme-dark [class*="grid"] td,
.theme-dark [class*="grid"] .ui-grid-cell {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}

/* Dashboard table striped rows and hover effects */
.theme-dark .dashboard-table .ui-grid-row:nth-child(odd) {
  background: var(--bg) !important;
}

.theme-dark .dashboard-table .ui-grid-row:nth-child(even) {
  background: var(--panel-dim) !important;
}

.theme-dark .dashboard-table .ui-grid-row:hover {
  background: var(--panel-strong) !important;
  transition: background-color 0.2s ease;
}

.theme-dark .dashboard-table .ui-grid-row:hover .ui-grid-cell {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
}

/* Ensure cells follow row background in striped pattern */
.theme-dark .dashboard-table .ui-grid-row:nth-child(odd) .ui-grid-cell {
  background: var(--bg) !important;
}

.theme-dark .dashboard-table .ui-grid-row:nth-child(even) .ui-grid-cell {
  background: var(--panel-dim) !important;
}

/* Dashboard specific table styling */
.theme-dark .dashboard-table {
  background: var(--bg) !important;
}

.theme-dark .dashboard-table .ui-grid-header {
  background: var(--surface) !important;
}

.theme-dark .dashboard-table .ui-grid-header-cell {
  background: var(--surface) !important;
  color: var(--fg) !important;
}

/* Force striped pattern for all dashboard tables */
.theme-dark .ui-grid-row:nth-child(odd) .ui-grid-cell {
  background: var(--bg) !important;
}

.theme-dark .ui-grid-row:nth-child(even) .ui-grid-cell {
  background: var(--panel-dim) !important;
}

/* Enhanced hover effects for all dashboard tables */
.theme-dark .ui-grid-row:hover .ui-grid-cell {
  background: var(--panel-strong) !important;
  color: var(--fg) !important;
  transition: all 0.2s ease;
}

/* Force striped pattern for all dashboard table rows */
.theme-dark .ui-grid-row:nth-child(odd) {
  background: var(--bg) !important;
}

.theme-dark .ui-grid-row:nth-child(even) {
  background: var(--panel-dim) !important;
}

/* Enhanced hover effects for rows */
.theme-dark .ui-grid-row:hover {
  background: var(--panel-strong) !important;
  transition: background-color 0.2s ease;
}

/* Ensure proper contrast for text in different row types */
.theme-dark .ui-grid-row:nth-child(odd) .ui-grid-cell-contents {
  color: var(--fg-muted) !important;
}

.theme-dark .ui-grid-row:nth-child(even) .ui-grid-cell-contents {
  color: var(--fg-muted) !important;
}

.theme-dark .ui-grid-row:hover .ui-grid-cell-contents {
  color: var(--fg) !important;
}

/* High priority CSS for striped rows - override any existing styles */
.theme-dark .ui-grid .ui-grid-row:nth-child(odd) {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

.theme-dark .ui-grid .ui-grid-row:nth-child(even) {
  background: var(--panel-dim) !important;
  background-color: var(--panel-dim) !important;
}

.theme-dark .ui-grid .ui-grid-row:hover {
  background: var(--panel-strong) !important;
  background-color: var(--panel-strong) !important;
  transition: background-color 0.2s ease;
}

/* High priority CSS for cells in striped rows */
.theme-dark .ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

.theme-dark .ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell {
  background: var(--panel-dim) !important;
  background-color: var(--panel-dim) !important;
}

.theme-dark .ui-grid .ui-grid-row:hover .ui-grid-cell {
  background: var(--panel-strong) !important;
  background-color: var(--panel-strong) !important;
  color: var(--fg) !important;
}

.theme-dark .filter-container .fixed-buttons {
  background: var(--bg) !important;
}

.theme-dark .filter-container .tab {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

.theme-dark .content-height .side-nav li a {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
}
.theme-dark .content-height .side-nav li a:hover,
.theme-dark .content-height .side-nav .active {
  background: var(--surface) !important;
  color: var(--fg) !important;
}

.theme-dark .content-height .header-bg {
  background: var(--surface) !important;
}
.theme-dark .content-height .letter-detail {
  background-color: var(--surface) !important;
}

.theme-dark .content-height .letter-div h5 {
  background: var(--panel) !important;
  color: var(--primary-soft) !important;
}
.theme-dark .content-height .sidenav-active {
  background: var(--surface) !important;
  color: var(--fg-muted) !important;
}
.theme-dark .content-height .description-info h6 {
  color: var(--fg-muted) !important;
}
.theme-dark .content-height .description-info {
  background: var(--surface) !important;
}
.theme-dark .content-height .panel-default {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}
.theme-dark .panel-group {
  background: var(--bg) !important;
}
.theme-dark .panel-default > .panel-heading {
  background: var(--surface) !important;
}
.theme-dark .panel-default > .panel-heading > .panel-title,
.theme-dark .fr-toolbar > button > i {
  color: var(--bg) !important;
}

.theme-dark #profooter,
.theme-dark #margin-top {
  background: var(--bg) !important;
}
.theme-dark .clients-table {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}
.theme-dark .clients-details {
  background: var(--surface) !important;
  color: var(--fg-muted) !important;
}

.theme-dark .vs-tabset > .nav-tabs {
  background: var(--bg) !important;
}
.theme-dark .vs-tabset > .nav-tabs > li.active > a,
.vs-tabset > .nav-tabs > li.active > a:focus,
.vs-tabset > .nav-tabs > li.active > a:hover {
  background-color: var(--surface) !important;
}

.theme-dark .table-header .tile {
  background: var(--bg) !important;
}
.theme-dark .ui-grid-menu-button,
.theme-dark .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item,
.theme-dark .ui-grid-menu .ui-grid-menu-inner ul li .ui-grid-menu-item {
  background: var(--bg) !important;
}

.theme-dark
  .ui-grid-menu
  .ui-grid-menu-inner
  ul
  li
  button.ui-grid-menu-item:hover {
  background: var(--surface) !important;
}

.theme-dark .progressbar-wrapper {
  background: var(--surface) !important;
}
.theme-dark .progressbar li::before {
  color: var(--bg) !important;
}

.theme-dark .reviewer h6 {
  color: var(--white) !important;
}

/* Payments table: highlight SP rows differently in dark mode */
.theme-dark .sp-row,
.theme-dark .sp-row td,
.theme-dark .sp-row td small {
  background-color: #ffecd2 !important;
  color: var(--row-alt) !important;
}

.theme-dark .ranges,
.theme-dark .drp-calendar,
.theme-dark .drp-buttons,
.theme-dark .daterangepicker,
.theme-dark .calendar-table {
  background: var(--bg) !important;
}
.theme-dark .l-radio span {
  color: var(--fg-muted) !important;
}

.theme-dark #toTopBtn {
  background: var(--surface);
}

.theme-dark .GroupHeaderh3,
.theme-dark .GroupHeaderh4,
.theme-dark .GroupHeaderh5,
.theme-dark .control-label,
.theme-dark .control-label span a {
  color: var(--primary-soft-2) !important;
}

.theme-dark .alert-info a {
  color: var(--primary-soft-2) !important;
}
.theme-dark .popover-inner,
.theme-dark .popover-inner .form-control,
.theme-dark .popover-inner h3 {
  background: var(--bg) !important;
}

.theme-dark .content-height .panel-default span {
  color: var(--fg-muted) !important;
}
.theme-dark .well legend {
  border-bottom: none !important;
}

.theme-dark .arrow-icon {
  filter: invert(1);
}

.theme-dark .daterangepicker .calendar-table th,
.theme-dark .daterangepicker .calendar-table td {
  color: var(--fg-muted) !important;
  background: var(--surface) !important;
}

.theme-dark .daterangepicker td.off,
.theme-dark .daterangepicker td.off.start-date,
.theme-dark .daterangepicker td.off.end-date {
  background: var(--bg) !important;
  color: var(--fg-muted) !important;
}

.theme-dark .daterangepicker td.off.in-range {
  background-color: var(--bg) !important;
}

.theme-dark .daterangepicker td.in-range {
  background-color: var(--primary-soft) !important;
}

.theme-dark .daterangepicker td.active {
  background: var(--primary) !important;
}

.theme-dark .modal-content .modal-body {
  color: var(--fg) !important;
}

.theme-dark .modal-content .modal-header {
  background: var(--bg) !important;
}

.theme-dark .description-info small {
  color: var(--fg-muted) !important;
}

.theme-dark .image-detail img {
  color: var(--black) !important;
}

.theme-dark .linked {
  color: #ffc0cb !important;
  background: linear-gradient(15deg, #24060f, #ca2654) !important;
  border: 1.5px solid !important;
}
.linked {
  position: relative;
}

.linked > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.theme-dark .tp-selall-bg {
  background: var(--bg) !important;
}

.theme-dark .sp-selall-bg {
  background: var(--surface) !important;
}

.theme-dark .sp-selall-bg .list-group-item {
  background-color: var(--bg) !important;
}