/**
 * Cleaning Button — dark mode
 * Applied when html[data-color-mode="dark"] (app-theme.js: forced dark or system+OS dark).
 */

:root {
  color-scheme: light;
}


html[data-color-mode="dark"] {
    color-scheme: dark;
    --cb-bg-deep: #0b0f14;
    --cb-bg: #121820;
    --cb-bg-elevated: #1a222d;
    --cb-bg-soft: #222c3a;
    --cb-bg-hover: #2a3545;
    --cb-border: rgba(255, 255, 255, 0.08);
    --cb-border-strong: rgba(255, 255, 255, 0.14);
    --cb-text: #e8eef4;
    --cb-text-muted: #9aa8b5;
    --cb-text-faint: #6d7b89;
    --cb-accent: #3ecfff;
    --cb-accent-soft: rgba(62, 207, 255, 0.14);
    --cb-success: #34c759;
    --cb-warning: #f0c14a;
    --cb-danger: #ff6b6b;
    --cb-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --cb-shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.35);
  }

html[data-color-mode="dark"],
html[data-color-mode="dark"] body {
    background-color: var(--cb-bg-deep) !important;
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] body {
    background: radial-gradient(1200px 600px at 10% -10%, #1a2740 0%, transparent 55%),
      radial-gradient(900px 500px at 100% 0%, #142033 0%, transparent 50%),
      var(--cb-bg-deep) !important;
  }

html[data-color-mode="dark"] a {
    color: var(--cb-accent);
  }

html[data-color-mode="dark"] a:hover,
html[data-color-mode="dark"] a:focus {
    color: #7ddfff;
  }

html[data-color-mode="dark"] body > div[ng-if="isLoading"],
html[data-color-mode="dark"] body > div[style*="background: yellow"] {
    background: linear-gradient(90deg, #1e3a5f, #0f766e) !important;
    color: #e8f7ff !important;
    border-color: rgba(62, 207, 255, 0.45) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

/* Solid dark chrome (avoid translucent wash that reads as near-white) */
html[data-color-mode="dark"] .top-main-nav {
    background: #0f172a !important;
    background-image: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--cb-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
  }

html[data-color-mode="dark"] .top-main-nav .navbar-brand {
    color: #f1f5f9 !important;
  }

html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-link {
    color: #cbd5e1 !important;
  }

html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-link p,
html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-link .nav-label,
html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-link span,
html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-link i {
    color: inherit !important;
  }

html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-link:hover,
html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-link:focus {
    color: #7ddfff !important;
    background: rgba(62, 207, 255, 0.14) !important;
  }

html[data-color-mode="dark"] .top-main-nav .navbar-nav .nav-item.active > .nav-link {
    color: #f1f5f9 !important;
    background: rgba(62, 207, 255, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(62, 207, 255, 0.3) inset;
  }

html[data-color-mode="dark"] .top-main-nav .nav-account {
    border-left-color: var(--cb-border) !important;
  }

html[data-color-mode="dark"] .top-main-nav .navbar-toggler {
    border-color: var(--cb-border-strong) !important;
  }

html[data-color-mode="dark"] .top-main-nav .navbar-toggler .navbar-toggler-bar {
    background: var(--cb-text) !important;
  }

html[data-color-mode="dark"] @media (max-width: 991.98px) {
    .top-main-nav .navbar-collapse {
      border-top-color: var(--cb-border) !important;
    }
    .top-main-nav .nav-account {
      border-top-color: var(--cb-border) !important;
    }
  }

html[data-color-mode="dark"] .sidebar,
html[data-color-mode="dark"] .sidebar::before,
html[data-color-mode="dark"] .sidebar::after {
    box-shadow: 1px 0 0 var(--cb-border);
  }

html[data-color-mode="dark"] .main-panel {
    background: transparent !important;
  }

html[data-color-mode="dark"] .main-panel > .content {
    background: transparent !important;
  }

html[data-color-mode="dark"] .main-panel .navbar:not(.top-main-nav),
html[data-color-mode="dark"] .navbar:not(.top-main-nav) {
    background: rgba(18, 24, 32, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cb-border) !important;
    box-shadow: none !important;
  }

html[data-color-mode="dark"] .navbar:not(.top-main-nav) .navbar-brand,
html[data-color-mode="dark"] .navbar:not(.top-main-nav) .nav-link,
html[data-color-mode="dark"] .navbar:not(.top-main-nav) .navbar-nav .nav-link,
html[data-color-mode="dark"] .navbar:not(.top-main-nav) .navbar-nav .nav-link .no-icon,
html[data-color-mode="dark"] .navbar:not(.top-main-nav) a {
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .navbar:not(.top-main-nav) .nav-link:hover,
html[data-color-mode="dark"] .navbar:not(.top-main-nav) .navbar-nav .nav-link:hover {
    color: var(--cb-accent) !important;
  }

html[data-color-mode="dark"] .navbar-toggler-bar.burger-lines {
    background: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .card,
html[data-color-mode="dark"] .card.card-plain,
html[data-color-mode="dark"] .card.table-plain-bg {
    background: var(--cb-bg-elevated) !important;
    border: 1px solid var(--cb-border) !important;
    box-shadow: var(--cb-shadow-soft) !important;
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .card.card-plain {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

html[data-color-mode="dark"] .card-header,
html[data-color-mode="dark"] .card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cb-border) !important;
  }

html[data-color-mode="dark"] .card-title,
html[data-color-mode="dark"] .card .card-title,
html[data-color-mode="dark"] h1,
html[data-color-mode="dark"] h2,
html[data-color-mode="dark"] h3,
html[data-color-mode="dark"] h4,
html[data-color-mode="dark"] h5,
html[data-color-mode="dark"] h6,
html[data-color-mode="dark"] .card-header h4,
html[data-color-mode="dark"] .card-header .card-title {
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .card-category,
html[data-color-mode="dark"] .card .card-category,
html[data-color-mode="dark"] p.card-category {
    color: var(--cb-text-muted) !important;
  }

html[data-color-mode="dark"] .card-body,
html[data-color-mode="dark"] .card .card-body {
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .table,
html[data-color-mode="dark"] table.table {
    color: var(--cb-text) !important;
    background: transparent !important;
  }

html[data-color-mode="dark"] .table > thead > tr > th,
html[data-color-mode="dark"] .table thead th,
html[data-color-mode="dark"] .table > thead > tr > td {
    color: var(--cb-text-muted) !important;
    border-bottom-color: var(--cb-border-strong) !important;
    border-top-color: transparent !important;
    background: transparent !important;
  }

html[data-color-mode="dark"] .table > tbody > tr > td,
html[data-color-mode="dark"] .table > tbody > tr > th,
html[data-color-mode="dark"] .table td,
html[data-color-mode="dark"] .table th {
    border-top-color: var(--cb-border) !important;
    color: var(--cb-text) !important;
    background: transparent !important;
  }

html[data-color-mode="dark"] .table-hover tbody tr:hover,
html[data-color-mode="dark"] .table-hover > tbody > tr:hover {
    background-color: var(--cb-bg-hover) !important;
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-color-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
  }

html[data-color-mode="dark"] .table-responsive {
    border-color: var(--cb-border) !important;
  }

html[data-color-mode="dark"] .form-control,
html[data-color-mode="dark"] input.form-control,
html[data-color-mode="dark"] select.form-control,
html[data-color-mode="dark"] textarea.form-control {
    background-color: var(--cb-bg-soft) !important;
    border: 1px solid var(--cb-border-strong) !important;
    color: var(--cb-text) !important;
    box-shadow: none !important;
  }

html[data-color-mode="dark"] .form-control:focus {
    background-color: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent) !important;
    color: var(--cb-text) !important;
    box-shadow: 0 0 0 3px var(--cb-accent-soft) !important;
  }

html[data-color-mode="dark"] .form-control:disabled,
html[data-color-mode="dark"] .form-control[disabled],
html[data-color-mode="dark"] .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--cb-text-faint) !important;
    opacity: 1;
  }

html[data-color-mode="dark"] .form-control::placeholder {
    color: var(--cb-text-faint) !important;
  }

html[data-color-mode="dark"] label,
html[data-color-mode="dark"] .control-label,
html[data-color-mode="dark"] .form-group label {
    color: var(--cb-text-muted) !important;
  }

html[data-color-mode="dark"] .input-group-addon,
html[data-color-mode="dark"] .input-group-text {
    background: var(--cb-bg-soft) !important;
    border-color: var(--cb-border-strong) !important;
    color: var(--cb-text-muted) !important;
  }

html[data-color-mode="dark"] select option {
    background: var(--cb-bg-elevated);
    color: var(--cb-text);
  }

html[data-color-mode="dark"] .btn-default,
html[data-color-mode="dark"] .btn-secondary {
    background: var(--cb-bg-soft) !important;
    border-color: var(--cb-border-strong) !important;
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .btn-info.btn-fill,
html[data-color-mode="dark"] .btn-info.btn-fill:hover,
html[data-color-mode="dark"] .btn-info.btn-fill:focus {
    box-shadow: 0 6px 18px rgba(29, 199, 234, 0.28) !important;
  }

html[data-color-mode="dark"] .btn-danger.btn-fill {
    box-shadow: 0 6px 18px rgba(255, 74, 85, 0.25) !important;
  }

html[data-color-mode="dark"] .footer,
html[data-color-mode="dark"] .main-panel > .footer {
    background: transparent !important;
    border-top: 1px solid var(--cb-border) !important;
  }

html[data-color-mode="dark"] .footer .copyright,
html[data-color-mode="dark"] .footer p,
html[data-color-mode="dark"] .footer small,
html[data-color-mode="dark"] .footer a {
    color: var(--cb-text-faint) !important;
  }

html[data-color-mode="dark"] .dropdown-menu {
    background: var(--cb-bg-elevated) !important;
    border: 1px solid var(--cb-border-strong) !important;
    box-shadow: var(--cb-shadow) !important;
  }

html[data-color-mode="dark"] .dropdown-item,
html[data-color-mode="dark"] .dropdown-menu > a,
html[data-color-mode="dark"] .dropdown-menu > li > a {
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .dropdown-item:hover,
html[data-color-mode="dark"] .dropdown-menu > a:hover,
html[data-color-mode="dark"] .dropdown-menu > li > a:hover {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-accent) !important;
  }

html[data-color-mode="dark"] .modal-content {
    background: var(--cb-bg-elevated) !important;
    border: 1px solid var(--cb-border-strong) !important;
    color: var(--cb-text) !important;
    box-shadow: var(--cb-shadow) !important;
  }

html[data-color-mode="dark"] .modal-header,
html[data-color-mode="dark"] .modal-footer {
    border-color: var(--cb-border) !important;
  }

html[data-color-mode="dark"] .modal-title {
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .close,
html[data-color-mode="dark"] .modal-header .close {
    color: var(--cb-text) !important;
    text-shadow: none !important;
    opacity: 0.7;
  }

html[data-color-mode="dark"] .alert-danger {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.35) !important;
    color: #ffb3b8 !important;
  }

html[data-color-mode="dark"] .alert-success {
    background: rgba(40, 167, 69, 0.15) !important;
    border-color: rgba(40, 167, 69, 0.35) !important;
    color: #9dffb5 !important;
  }

html[data-color-mode="dark"] .alert-info,
html[data-color-mode="dark"] .alert-warning {
    background: rgba(62, 207, 255, 0.1) !important;
    border-color: rgba(62, 207, 255, 0.28) !important;
    color: #c8efff !important;
  }

html[data-color-mode="dark"] p,
html[data-color-mode="dark"] span,
html[data-color-mode="dark"] li,
html[data-color-mode="dark"] td,
html[data-color-mode="dark"] th,
html[data-color-mode="dark"] .text-muted {
    color: inherit;
  }

html[data-color-mode="dark"] code,
html[data-color-mode="dark"] pre {
    background: var(--cb-bg-soft) !important;
    color: #f0c14a !important;
    border-color: var(--cb-border) !important;
  }

html[data-color-mode="dark"] hr {
    border-top-color: var(--cb-border) !important;
  }

html[data-color-mode="dark"] .fc {
    color: var(--cb-text);
  }

html[data-color-mode="dark"] .fc-theme-standard td,
html[data-color-mode="dark"] .fc-theme-standard th,
html[data-color-mode="dark"] .fc-scrollgrid,
html[data-color-mode="dark"] .fc-theme-standard .fc-scrollgrid {
    border-color: var(--cb-border) !important;
  }

html[data-color-mode="dark"] .fc-theme-standard .fc-list-day-cushion,
html[data-color-mode="dark"] .fc .fc-col-header-cell-cushion,
html[data-color-mode="dark"] .fc .fc-daygrid-day-number {
    color: var(--cb-text-muted) !important;
  }

html[data-color-mode="dark"] .fc-daygrid-day,
html[data-color-mode="dark"] .fc-timegrid-slot,
html[data-color-mode="dark"] .fc-list-event:hover td {
    background-color: transparent !important;
  }

html[data-color-mode="dark"] .fc-day-today {
    background: rgba(62, 207, 255, 0.08) !important;
  }

html[data-color-mode="dark"] .fc-button-primary {
    background: var(--cb-bg-soft) !important;
    border-color: var(--cb-border-strong) !important;
    color: var(--cb-text) !important;
  }

html[data-color-mode="dark"] .fc-button-primary:not(:disabled).fc-button-active,
html[data-color-mode="dark"] .fc-button-primary:not(:disabled):active {
    background: var(--cb-accent-soft) !important;
    border-color: var(--cb-accent) !important;
    color: var(--cb-accent) !important;
  }

html[data-color-mode="dark"] *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

html[data-color-mode="dark"] *::-webkit-scrollbar-track {
    background: var(--cb-bg-deep);
  }

html[data-color-mode="dark"] *::-webkit-scrollbar-thumb {
    background: #3a4656;
    border-radius: 8px;
    border: 2px solid var(--cb-bg-deep);
  }

html[data-color-mode="dark"] *::-webkit-scrollbar-thumb:hover {
    background: #516176;
  }

/* ------------------------------------------------------------------
 * Auth pages (login / forgot / reset)
 * Global dark rules set light text on body and force span/p/li to
 * color:inherit. The login card used to stay white, so titles and
 * copy went light-on-white (unreadable). Theme the whole auth shell.
 * ------------------------------------------------------------------ */

html[data-color-mode="dark"] .limiter,
html[data-color-mode="dark"] .container-login100 {
  background: transparent !important;
}

html[data-color-mode="dark"] .wrap-login100 {
  background: var(--cb-bg-elevated) !important;
  border: 1px solid var(--cb-border-strong) !important;
  box-shadow: var(--cb-shadow) !important;
  color: var(--cb-text) !important;
}

html[data-color-mode="dark"] .wrap-login100 .login100-form-title,
html[data-color-mode="dark"] .login100-form-title {
  color: var(--cb-text) !important;
}

html[data-color-mode="dark"] .wrap-login100 p,
html[data-color-mode="dark"] .wrap-login100 span,
html[data-color-mode="dark"] .wrap-login100 li,
html[data-color-mode="dark"] .wrap-login100 label,
html[data-color-mode="dark"] .wrap-login100 strong,
html[data-color-mode="dark"] .wrap-login100 ol,
html[data-color-mode="dark"] .wrap-login100 .cb-hint {
  color: var(--cb-text) !important;
}

html[data-color-mode="dark"] .wrap-login100 .txt1,
html[data-color-mode="dark"] .wrap-login100 a.txt1,
html[data-color-mode="dark"] .wrap-login100 .cb-link,
html[data-color-mode="dark"] .wrap-login100 a {
  color: var(--cb-accent) !important;
}

html[data-color-mode="dark"] .wrap-login100 a:hover,
html[data-color-mode="dark"] .wrap-login100 a:focus,
html[data-color-mode="dark"] .wrap-login100 .txt1:hover {
  color: #7ddfff !important;
}

html[data-color-mode="dark"] .wrap-input100 {
  background-color: var(--cb-bg-soft) !important;
  border: 1px solid var(--cb-border-strong) !important;
}

html[data-color-mode="dark"] .input100 {
  color: var(--cb-text) !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--cb-text);
}

html[data-color-mode="dark"] .input100::placeholder {
  color: var(--cb-text-faint) !important;
  opacity: 1;
}

/* Chrome/Safari autofill paints a light yellow box otherwise */
html[data-color-mode="dark"] .input100:-webkit-autofill,
html[data-color-mode="dark"] .input100:-webkit-autofill:hover,
html[data-color-mode="dark"] .input100:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cb-text) !important;
  caret-color: var(--cb-text);
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px var(--cb-bg-soft) inset !important;
  border-radius: 3px;
}

html[data-color-mode="dark"] .focus-input100 {
  border-color: var(--cb-accent) !important;
}

html[data-color-mode="dark"] .login100-form-btn {
  background-color: #3a8bff !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .login100-form-btn:hover,
html[data-color-mode="dark"] .login100-form-btn:focus {
  background-color: #2f74d8 !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .login100-form-btn:disabled,
html[data-color-mode="dark"] .login100-form-btn[disabled] {
  opacity: 0.65;
}

/* 2FA setup: QR frame + readonly secret (inline light styles on login.html) */
html[data-color-mode="dark"] .wrap-login100 img[alt*="authenticator"],
html[data-color-mode="dark"] .wrap-login100 img[alt*="Scan"] {
  border-color: var(--cb-border-strong) !important;
  background: #fff !important;
}

html[data-color-mode="dark"] .wrap-login100 input.input100[readonly],
html[data-color-mode="dark"] .wrap-login100 input#totpSetupSecretInput {
  background: var(--cb-bg-soft) !important;
  border-color: var(--cb-border-strong) !important;
  color: var(--cb-text) !important;
  -webkit-text-fill-color: var(--cb-text);
}

/* Forgot / reset message boxes */
html[data-color-mode="dark"] .cb-msg-ok {
  background: rgba(40, 167, 69, 0.15) !important;
  border-color: rgba(40, 167, 69, 0.35) !important;
  color: #9dffb5 !important;
}

html[data-color-mode="dark"] .cb-msg-err {
  background: rgba(220, 53, 69, 0.15) !important;
  border-color: rgba(220, 53, 69, 0.35) !important;
  color: #ffb3b8 !important;
}

/* Login inline info banner (password reset / 2FA hints) */
html[data-color-mode="dark"] .wrap-login100 .alert-info,
html[data-color-mode="dark"] .wrap-login100 [role="alert"][class*="alert-info"],
html[data-color-mode="dark"] .wrap-login100 div[style*="background:#e8f4fd"] {
  background: rgba(62, 207, 255, 0.1) !important;
  border-color: rgba(62, 207, 255, 0.28) !important;
  color: #c8efff !important;
}