/**
 * Cleaning Button — system dark mode
 * Follows Chrome / OS preference via prefers-color-scheme.
 * No toggle required: dark when the browser reports dark.
 */

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    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);
  }

  /* ── Page shell ─────────────────────────────────────────────── */
  html,
  body {
    background-color: var(--cb-bg-deep) !important;
    color: var(--cb-text) !important;
  }

  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;
  }

  a {
    color: var(--cb-accent);
  }
  a:hover,
  a:focus {
    color: #7ddfff;
  }

  /* Loading banner */
  body > div[ng-if="isLoading"],
  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);
  }

  /* ── Top main nav ───────────────────────────────────────────── */
  .top-main-nav {
    background: rgba(18, 24, 32, 0.92) !important;
    background-image: none !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cb-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
  }

  .top-main-nav .navbar-brand {
    color: var(--cb-text) !important;
  }

  .top-main-nav .navbar-nav .nav-link {
    color: var(--cb-text-muted) !important;
  }

  .top-main-nav .navbar-nav .nav-link:hover,
  .top-main-nav .navbar-nav .nav-link:focus {
    color: var(--cb-accent) !important;
    background: var(--cb-accent-soft) !important;
  }

  .top-main-nav .navbar-nav .nav-item.active > .nav-link {
    color: var(--cb-text) !important;
    background: var(--cb-accent-soft) !important;
    box-shadow: 0 0 0 1px rgba(62, 207, 255, 0.25) inset;
  }

  .top-main-nav .nav-account {
    border-left-color: var(--cb-border) !important;
  }

  .top-main-nav .navbar-toggler {
    border-color: var(--cb-border-strong) !important;
  }

  .top-main-nav .navbar-toggler .navbar-toggler-bar {
    background: var(--cb-text) !important;
  }

  @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;
    }
  }

  /* Legacy sidebar (if any residual markup) */
  .sidebar,
  .sidebar::before,
  .sidebar::after {
    box-shadow: 1px 0 0 var(--cb-border);
  }

  /* ── Main panel + content ───────────────────────────────────── */
  .main-panel {
    background: transparent !important;
  }

  .main-panel > .content {
    background: transparent !important;
  }

  /* ── Generic navbar fallback ────────────────────────────────── */
  .main-panel .navbar:not(.top-main-nav),
  .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;
  }

  .navbar:not(.top-main-nav) .navbar-brand,
  .navbar:not(.top-main-nav) .nav-link,
  .navbar:not(.top-main-nav) .navbar-nav .nav-link,
  .navbar:not(.top-main-nav) .navbar-nav .nav-link .no-icon,
  .navbar:not(.top-main-nav) a {
    color: var(--cb-text) !important;
  }

  .navbar:not(.top-main-nav) .nav-link:hover,
  .navbar:not(.top-main-nav) .navbar-nav .nav-link:hover {
    color: var(--cb-accent) !important;
  }

  .navbar-toggler-bar.burger-lines {
    background: var(--cb-text) !important;
  }

  /* ── Cards ──────────────────────────────────────────────────── */
  .card,
  .card.card-plain,
  .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;
  }

  .card.card-plain {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .card-header,
  .card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cb-border) !important;
  }

  .card-title,
  .card .card-title,
  h1, h2, h3, h4, h5, h6,
  .card-header h4,
  .card-header .card-title {
    color: var(--cb-text) !important;
  }

  .card-category,
  .card .card-category,
  p.card-category {
    color: var(--cb-text-muted) !important;
  }

  .card-body,
  .card .card-body {
    color: var(--cb-text) !important;
  }

  /* ── Tables ─────────────────────────────────────────────────── */
  .table,
  table.table {
    color: var(--cb-text) !important;
    background: transparent !important;
  }

  .table > thead > tr > th,
  .table thead th,
  .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;
  }

  .table > tbody > tr > td,
  .table > tbody > tr > th,
  .table td,
  .table th {
    border-top-color: var(--cb-border) !important;
    color: var(--cb-text) !important;
    background: transparent !important;
  }

  .table-hover tbody tr:hover,
  .table-hover > tbody > tr:hover {
    background-color: var(--cb-bg-hover) !important;
    color: var(--cb-text) !important;
  }

  .table-striped tbody tr:nth-of-type(odd),
  .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
  }

  .table-responsive {
    border-color: var(--cb-border) !important;
  }

  /* ── Forms ──────────────────────────────────────────────────── */
  .form-control,
  input.form-control,
  select.form-control,
  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;
  }

  .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;
  }

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

  .form-control::placeholder {
    color: var(--cb-text-faint) !important;
  }

  label,
  .control-label,
  .form-group label {
    color: var(--cb-text-muted) !important;
  }

  .input-group-addon,
  .input-group-text {
    background: var(--cb-bg-soft) !important;
    border-color: var(--cb-border-strong) !important;
    color: var(--cb-text-muted) !important;
  }

  select option {
    background: var(--cb-bg-elevated);
    color: var(--cb-text);
  }

  /* ── Buttons ────────────────────────────────────────────────── */
  .btn-default,
  .btn-secondary {
    background: var(--cb-bg-soft) !important;
    border-color: var(--cb-border-strong) !important;
    color: var(--cb-text) !important;
  }

  .btn-info.btn-fill,
  .btn-info.btn-fill:hover,
  .btn-info.btn-fill:focus {
    box-shadow: 0 6px 18px rgba(29, 199, 234, 0.28) !important;
  }

  .btn-danger.btn-fill {
    box-shadow: 0 6px 18px rgba(255, 74, 85, 0.25) !important;
  }

  /* ── Footer ─────────────────────────────────────────────────── */
  .footer,
  .main-panel > .footer {
    background: transparent !important;
    border-top: 1px solid var(--cb-border) !important;
  }

  .footer .copyright,
  .footer p,
  .footer small,
  .footer a {
    color: var(--cb-text-faint) !important;
  }

  /* ── Dropdowns / modals / alerts ────────────────────────────── */
  .dropdown-menu {
    background: var(--cb-bg-elevated) !important;
    border: 1px solid var(--cb-border-strong) !important;
    box-shadow: var(--cb-shadow) !important;
  }

  .dropdown-item,
  .dropdown-menu > a,
  .dropdown-menu > li > a {
    color: var(--cb-text) !important;
  }

  .dropdown-item:hover,
  .dropdown-menu > a:hover,
  .dropdown-menu > li > a:hover {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-accent) !important;
  }

  .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;
  }

  .modal-header,
  .modal-footer {
    border-color: var(--cb-border) !important;
  }

  .modal-title {
    color: var(--cb-text) !important;
  }

  .close,
  .modal-header .close {
    color: var(--cb-text) !important;
    text-shadow: none !important;
    opacity: 0.7;
  }

  .alert-danger {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.35) !important;
    color: #ffb3b8 !important;
  }

  .alert-success {
    background: rgba(40, 167, 69, 0.15) !important;
    border-color: rgba(40, 167, 69, 0.35) !important;
    color: #9dffb5 !important;
  }

  .alert-info,
  .alert-warning {
    background: rgba(62, 207, 255, 0.1) !important;
    border-color: rgba(62, 207, 255, 0.28) !important;
    color: #c8efff !important;
  }

  /* ── Misc text + code ───────────────────────────────────────── */
  p,
  span,
  li,
  td,
  th,
  .text-muted {
    color: inherit;
  }

  code,
  pre {
    background: var(--cb-bg-soft) !important;
    color: #f0c14a !important;
    border-color: var(--cb-border) !important;
  }

  hr {
    border-top-color: var(--cb-border) !important;
  }

  /* FullCalendar (planning views) */
  .fc {
    color: var(--cb-text);
  }
  .fc-theme-standard td,
  .fc-theme-standard th,
  .fc-scrollgrid,
  .fc-theme-standard .fc-scrollgrid {
    border-color: var(--cb-border) !important;
  }
  .fc-theme-standard .fc-list-day-cushion,
  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    color: var(--cb-text-muted) !important;
  }
  .fc-daygrid-day,
  .fc-timegrid-slot,
  .fc-list-event:hover td {
    background-color: transparent !important;
  }
  .fc-day-today {
    background: rgba(62, 207, 255, 0.08) !important;
  }
  .fc-button-primary {
    background: var(--cb-bg-soft) !important;
    border-color: var(--cb-border-strong) !important;
    color: var(--cb-text) !important;
  }
  .fc-button-primary:not(:disabled).fc-button-active,
  .fc-button-primary:not(:disabled):active {
    background: var(--cb-accent-soft) !important;
    border-color: var(--cb-accent) !important;
    color: var(--cb-accent) !important;
  }

  /* Scrollbars (WebKit / Chromium) */
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-track {
    background: var(--cb-bg-deep);
  }
  *::-webkit-scrollbar-thumb {
    background: #3a4656;
    border-radius: 8px;
    border: 2px solid var(--cb-bg-deep);
  }
  *::-webkit-scrollbar-thumb:hover {
    background: #516176;
  }
}

/* ── Login page (login.html uses css/main.css) ─────────────────── */
@media (prefers-color-scheme: dark) {
  body .limiter,
  body .container-login100 {
    background: radial-gradient(900px 500px at 20% 0%, #1a2740 0%, transparent 55%),
      radial-gradient(700px 400px at 100% 100%, #0f2a3a 0%, transparent 50%),
      #0b0f14 !important;
  }

  .wrap-login100 {
    background: #1a222d !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  }

  .login100-form-title {
    color: #e8eef4 !important;
  }

  .wrap-input100 {
    background-color: #222c3a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .input100 {
    color: #e8eef4 !important;
  }

  .input100::placeholder {
    color: #6d7b89 !important;
  }

  .txt1 {
    color: #3ecfff !important;
  }

  .login100-form-btn {
    box-shadow: 0 8px 24px rgba(130, 127, 254, 0.35);
  }

  .alert-danger {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.35) !important;
    color: #ffb3b8 !important;
  }

  /* ── Weather strip (when OS is dark but strip is daytime palette) ── */
  .wx-strip:not(.is-night) {
    background: linear-gradient(90deg, #152033 0%, #1a2435 50%, #1e2430 100%) !important;
    border-bottom-color: var(--cb-border) !important;
  }
  .wx-strip:not(.is-night) .wx-strip-temp { color: var(--cb-text) !important; }
  .wx-strip:not(.is-night) .wx-strip-humidity { color: #7dd3fc !important; border-left-color: var(--cb-border) !important; }
  .wx-strip:not(.is-night) .wx-strip-humidity .fa { color: #38bdf8 !important; }
  .wx-strip:not(.is-night) .wx-strip-deg,
  .wx-strip:not(.is-night) .wx-strip-pct,
  .wx-strip:not(.is-night) .wx-strip-city,
  .wx-strip:not(.is-night) .wx-sun-caption,
  .wx-strip:not(.is-night) .wx-clock-tz { color: var(--cb-text-muted) !important; }
  .wx-strip:not(.is-night) .wx-strip-label,
  .wx-strip:not(.is-night) .wx-sun-time,
  .wx-strip:not(.is-night) .wx-clock-day,
  .wx-strip:not(.is-night) .wx-clock-time { color: var(--cb-text) !important; }
  .wx-strip:not(.is-night) .wx-strip-hl,
  .wx-strip:not(.is-night) .wx-sun-end { color: var(--cb-text-muted) !important; }
  .wx-strip:not(.is-night) .wx-strip-clock {
    border-right-color: var(--cb-border) !important;
  }
  .wx-strip:not(.is-night) .wx-sun-now-dot {
    box-shadow: 0 0 0 2px #1a2435, 0 1px 4px rgba(0, 0, 0, 0.45) !important;
  }
  .wx-strip:not(.is-night) .wx-strip-hub.hub-online {
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(74, 222, 128, 0.28) !important;
  }
  .wx-strip:not(.is-night) .wx-strip-hub.hub-online .wx-hub-icon,
  .wx-strip:not(.is-night) .wx-strip-hub.hub-online .wx-hub-state { color: #86efac !important; }
  .wx-strip:not(.is-night) .wx-strip-hub.hub-online .wx-hub-caption { color: #4ade80 !important; }
  .wx-strip:not(.is-night) .wx-strip-hub.hub-offline {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(248, 113, 113, 0.32) !important;
  }
  .wx-strip:not(.is-night) .wx-strip-hub.hub-offline .wx-hub-icon,
  .wx-strip:not(.is-night) .wx-strip-hub.hub-offline .wx-hub-state { color: #fca5a5 !important; }
  .wx-strip:not(.is-night) .wx-strip-hub.hub-offline .wx-hub-caption { color: #f87171 !important; }

  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-closed {
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(74, 222, 128, 0.28) !important;
  }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-closed .wx-lock-icon,
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-closed .wx-lock-state { color: #86efac !important; }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-closed .wx-lock-caption { color: #4ade80 !important; }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-open {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.65) 0%, rgba(69, 26, 3, 0.5) 100%) !important;
    border-color: rgba(251, 191, 36, 0.55) !important;
  }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-open .wx-lock-icon,
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-open .wx-lock-state {
    color: #fef3c7 !important;
    font-weight: 800;
  }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-open .wx-lock-caption {
    color: #fde68a !important;
    font-weight: 800;
  }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-online.lock-open .wx-lock-who {
    color: #fcd34d !important;
  }
  .wx-strip:not(.is-night) .wx-lock-btn-unlock {
    color: #1c1917 !important;
    background: #fbbf24 !important;
    border-color: #f59e0b !important;
  }
  .wx-strip:not(.is-night) .wx-lock-btn-lock {
    color: #052e16 !important;
    background: #4ade80 !important;
    border-color: #22c55e !important;
  }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-offline {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(248, 113, 113, 0.32) !important;
  }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-offline .wx-lock-icon,
  .wx-strip:not(.is-night) .wx-strip-lock.lock-offline .wx-lock-state { color: #fca5a5 !important; }
  .wx-strip:not(.is-night) .wx-strip-lock.lock-offline .wx-lock-caption { color: #f87171 !important; }
  .wx-strip:not(.is-night) .wx-lock-who { color: #94a3b8 !important; }
}