/* Native Planner - system dark mode (Rent Docs pattern).
   prefers-color-scheme only; no JS toggle; Bootstrap 5.0.2 friendly (no data-bs-theme).
   Link after style.css / preview-extras.css. Cache-bust with ?v= on the HTML link.
*/
html {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --np-bg: #0B0B12;
    --np-tx: #F3F4F6;
    --np-mu: #A1A1AA;
    --np-ac: #7dd3fc;
    --np-ac2: #f0b27a;
    --np-co: #1C1630;
    --np-bd: #2A2A36;
    --np-hl: #1a2332;
    --np-code-bg: #1C1630;
    --np-table-head: #1C1630;
  }

  html, body {
    background-color: var(--np-bg) !important;
    color: var(--np-tx) !important;
  }

  /* Bootstrap light surfaces */
  .bg-light {
    background-color: var(--np-co) !important;
    color: var(--np-tx);
  }
  .bg-white {
    background-color: var(--np-bg) !important;
    color: var(--np-tx);
  }
  .text-muted { color: var(--np-mu) !important; }
  .text-dark { color: var(--np-tx) !important; }
  .text-black-50 { color: rgba(243, 244, 246, 0.55) !important; }
  .border, .border-top, .border-bottom, .border-start, .border-end,
  .border-1, .border-2 {
    border-color: var(--np-bd) !important;
  }

  /* Keep intentional dark bands (footer / contrast sections) */
  .bg-dark {
    background-color: #0a0a10 !important;
    color: #F3F4F6 !important;
  }
  .bg-dark .text-muted { color: #A1A1AA !important; }
  .bg-dark a { color: var(--np-ac); }
  .bg-dark a:hover { color: var(--np-ac2); }

  /* Navbar */
  .navbar.bg-light,
  .navbar.navbar-light {
    background-color: var(--np-co) !important;
    border-bottom: 1px solid var(--np-bd);
  }
  .navbar-light .navbar-nav .nav-link,
  .navbar-light .navbar-brand,
  .navbar-light .navbar-text {
    color: var(--np-tx) !important;
  }
  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link:focus {
    color: var(--np-ac) !important;
  }
  /* Beat inline .navbar .nav-link.active { color: #212529 !important; } */
  .navbar .nav-link.active,
  .navbar-light .navbar-nav .nav-link.active {
    color: #F3F4F6 !important;
  }
  .navbar-light .navbar-toggler {
    border-color: var(--np-bd);
  }
  .navbar-light .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(1.4);
  }
  .navbar-light .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(125, 211, 252, 0.35);
  }

  /* Logo: asset is transparent with mid/light colors - fine on dark chrome.
     Soft lift if any dark edge pixels remain. */
  .navbar .nav-home-logo .logo-planner,
  .navbar .logo-planner {
    filter: brightness(1.08) contrast(1.05);
  }

  /* Links / accents from style.css */
  a { color: var(--np-ac); }
  a:hover { color: var(--np-ac2); }
  .title1 { color: var(--np-ac) !important; }
  .title2 { color: var(--np-ac2) !important; }
  .nav-link:hover { color: var(--np-ac) !important; }
  i { color: var(--np-ac); }
  i:hover { color: var(--np-ac2); }
  .col-hov:hover { background: #2a2430 !important; }
  .highlight1 { background-color: var(--np-hl) !important; }
  .highlight1:hover { background-color: #2a2430 !important; }
  .overlay { background-color: rgba(11, 11, 18, 0.92) !important; }
  .btop {
    border-top-color: var(--np-mu) !important;
    border-bottom-color: var(--np-mu) !important;
  }
  .spacer { border-bottom-color: var(--np-ac2) !important; }

  /* preview-extras cards / FAQ / chips */
  .feature-card,
  .view-grid .feature-card,
  .usecase-card {
    background: var(--np-bg) !important;
    border-color: var(--np-bd) !important;
    color: var(--np-tx);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.35);
  }
  .usecase-card:hover {
    box-shadow: 0 0.45rem 1.25rem rgba(0, 0, 0, 0.5);
  }
  .feature-card h3,
  .view-grid .feature-card h3,
  .usecase-card h3,
  .usecase-card .h5 { color: var(--np-ac2) !important; }
  /* Explore-more lander links use Bootstrap text-dark on white cards */
  a.text-dark .usecase-card,
  a.text-dark .usecase-card p {
    color: var(--np-tx) !important;
  }
  .feature-group-title {
    color: var(--np-ac) !important;
    border-bottom-color: var(--np-ac2) !important;
  }
  .industry-chips li {
    background: #10233A !important;
    border-color: var(--np-ac) !important;
    color: var(--np-tx) !important;
  }
  .faq details {
    background: var(--np-bg) !important;
    border-color: var(--np-bd) !important;
    color: var(--np-tx);
  }
  .faq summary { color: var(--np-tx); }
  .img-border {
    background: var(--np-co) !important;
    border-color: goldenrod;
  }
  .lede-links a { color: var(--np-ac); }
  .lede-links a:hover { color: var(--np-ac2); }
  .compare-list li { border-bottom-color: rgba(255, 255, 255, 0.12); color: var(--np-tx); }
  .compare-list li.header { color: var(--np-ac); border-bottom-color: var(--np-ac2); }
  .compare-list .cap { color: var(--np-mu); }
  .stub-note,
  .draft-banner {
    background: #3a2f14 !important;
    color: #fde68a !important;
    border-color: #ca8a04 !important;
  }
  .unverified { color: #fbbf24 !important; }

  /* Buttons */
  .btn-outline-primary {
    color: var(--np-ac) !important;
    border-color: var(--np-ac) !important;
  }
  .btn-outline-primary:hover {
    background-color: var(--np-ac) !important;
    color: #0B0B12 !important;
  }
  .btn-outline-secondary {
    color: var(--np-mu) !important;
    border-color: var(--np-bd) !important;
  }
  .btn-outline-secondary:hover {
    background-color: var(--np-co) !important;
    color: var(--np-tx) !important;
  }
  .btn-primary {
    background-color: var(--np-ac) !important;
    border-color: var(--np-ac) !important;
    color: #0B0B12 !important;
  }
  .btn-warning {
    color: #0B0B12 !important;
  }
  .btn-close {
    filter: invert(1) grayscale(100%);
  }

  /* Tables / code / cards */
  .table {
    color: var(--np-tx);
    border-color: var(--np-bd);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-border-color: var(--np-bd);
  }
  .table-bordered > :not(caption) > * > * { border-color: var(--np-bd); }
  .table-light,
  thead.table-light,
  .table > :not(caption) > * > .table-light {
    background-color: var(--np-table-head) !important;
    color: var(--np-tx) !important;
  }
  code, .rn-version code, pre code {
    background: var(--np-code-bg) !important;
    color: #e5e7eb !important;
  }
  pre {
    background: var(--np-code-bg) !important;
    color: var(--np-tx) !important;
    border: 1px solid var(--np-bd);
  }
  .card, .list-group-item {
    background: var(--np-bg);
    color: var(--np-tx);
    border-color: var(--np-bd);
  }
  .list-group-item-action:hover,
  .list-group-item-action:focus {
    background-color: var(--np-co);
    color: var(--np-tx);
  }
  .modal-content {
    background: var(--np-bg);
    color: var(--np-tx);
    border-color: var(--np-bd);
  }
  .modal-header, .modal-footer { border-color: var(--np-bd); }
  .form-control, .form-select, input[type="search"], input[type="text"], textarea {
    background-color: var(--np-co) !important;
    color: var(--np-tx) !important;
    border-color: var(--np-bd) !important;
  }
  .form-control:focus, .form-select:focus {
    background-color: var(--np-co) !important;
    color: var(--np-tx) !important;
    border-color: var(--np-ac) !important;
    box-shadow: 0 0 0 0.2rem rgba(125, 211, 252, 0.25);
  }
  .form-control::placeholder { color: var(--np-mu); opacity: 1; }
  .dropdown-menu {
    background-color: var(--np-co);
    border-color: var(--np-bd);
  }
  .dropdown-item { color: var(--np-tx); }
  .dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--np-hl);
    color: var(--np-tx);
  }
  .alert-warning {
    background-color: #3a2f14;
    color: #fde68a;
    border-color: #ca8a04;
  }
  .alert-info {
    background-color: #10233A;
    color: #bae6fd;
    border-color: var(--np-ac);
  }
  hr { border-color: var(--np-bd); opacity: 1; }

  /* Release-notes page inline styles */
  .rn-version h2 {
    color: var(--np-ac) !important;
    border-bottom-color: var(--np-ac2) !important;
  }
  .rn-version h3 { color: var(--np-ac2) !important; }
  .rn-meta { color: var(--np-mu) !important; }
  .rn-jump a:hover { color: var(--np-ac2) !important; }

  /* Product screenshots: keep light SF captures readable */
  .product-shot img,
  .img-side.img-border,
  .view-grid .feature-card img {
    background: #fff;
  }
}