/* ============================================================
   Site-wide theme layer (js/theme.js sets data-bs-theme on <html>).

   1. The theme toggle button in the top menu (every page).
   2. Dark mode for the older content pages (about, ai, contact, legal,
      security, report). Those pages style themselves with a shared set of
      custom properties (--light-blue, --text-primary, --border-color ...)
      in their own <style> block; redefining them here recolours most of
      each page, and the rules below cover the patterns they share. Anything
      page-specific lives in that page's own dark block.

   Dark tokens are the IT Folder app's .dark palette (same as css/home.css):
     #0d1117 body · #161d28 raised surface · #1e2736 tertiary
     #2b3440 hairline · #8391a2 secondary text · #19b3d7 logo teal
   ============================================================ */

/* ── 1. Theme toggle ───────────────────────────────────────── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border-radius: 10px;
    background: transparent; border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary-color, #6c757d); font-size: 16px;
    transition: color .2s ease, border-color .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.theme-toggle:hover { color: #19b3d7; border-color: #19b3d7; transform: rotate(18deg); }
.theme-toggle:focus-visible { outline: 2px solid #19b3d7; outline-offset: 2px; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars,
:root:not([data-bs-theme="dark"]) .theme-toggle .bi-sun { display: none; }

/* The toggle (and BIP's recall button) sit outside the collapsed menu so they
   stay visible on phones: brand ...... [toggle] [BIP] [hamburger]. On desktop
   they follow the menu. */
.navbar > .container > .theme-toggle { order: 1; margin-left: auto; }
.navbar > .container > .bip-recall { order: 2; margin-left: 8px; }
.navbar > .container > .navbar-toggler { order: 3; margin-left: 10px; }
.navbar > .container > .navbar-collapse { order: 4; }
@media (min-width: 992px) {
    .navbar > .container > .navbar-collapse { order: 1; }
    .navbar > .container > .theme-toggle { order: 2; margin-left: 12px; }
    .navbar > .container > .bip-recall { order: 3; }
}

/* The older pages fade sections in with .animate-on-scroll (opacity 0 until the
   animation runs). Honour reduced motion on every page: show them, don't move them. */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* ── 2. Older pages in dark mode ───────────────────────────── */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #0d1117;
    --bs-body-bg-rgb: 13, 17, 23;
    --bs-body-color: #e6edf3;
    --bs-body-color-rgb: 230, 237, 243;
    --bs-secondary-color: #8391a2;
    --bs-tertiary-bg: #1e2736;
    --bs-secondary-bg: #161d28;
    --bs-border-color: #2b3440;
    --bs-link-color: #4fc6e3;
    --bs-link-color-rgb: 79, 198, 227;
    --bs-link-hover-color: #8adbee;
    --bs-link-hover-color-rgb: 138, 219, 238;
    --bs-heading-color: #ffffff;
    --bs-code-color: #8adbee;

    /* The older pages' own tokens */
    --light-blue: #111a24;
    --light-green: #0f1c1c;
    --light-pink: #1c1320;
    --text-primary: #e6edf3;
    --text-secondary: #8391a2;
    --text-muted: #8391a2;
    --border-color: #2b3440;
    --primary: #19b3d7;          /* cyan text on dark: #0891b2 is under 4.5:1 */
    --primary-dark: #4fc6e3;
    --secondary: #f472b6;
}
[data-bs-theme="dark"] body { background: #0d1117; color: #e6edf3; }

/* Fixed top bar */
[data-bs-theme="dark"] .navbar {
    background: rgba(13, 17, 23, .92) !important;
    border-bottom-color: #2b3440 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .4) !important;
}
[data-bs-theme="dark"] .navbar .nav-link { color: #aab6c3; }
[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus-visible,
[data-bs-theme="dark"] .navbar .nav-link.active { color: #ffffff; }
[data-bs-theme="dark"] .navbar-toggler { border-color: #464f5b; }
/* White hamburger. Bootstrap already swaps to a light icon under data-bs-theme="dark",
   so set it outright instead of inverting (inverting turned it back to black). */
[data-bs-theme="dark"] .navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); filter: none; }

/* Utility classes the pages lean on */
[data-bs-theme="dark"] .bg-white { background-color: #0d1117 !important; }
/* Tinted bands stay a step off the page so the section rhythm survives */
[data-bs-theme="dark"] .bg-light { background-color: #111a24 !important; }
[data-bs-theme="dark"] .text-dark { color: #e6edf3 !important; }
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary { color: #8391a2 !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] hr { border-color: #2b3440 !important; }
[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow-lg { box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important; }

/* Cards, tables, accordions, forms */
[data-bs-theme="dark"] .card { background-color: #161d28; border-color: #2b3440; color: #e6edf3; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #e6edf3; --bs-table-border-color: #2b3440; --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(25,179,215,.06); }
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table > :not(caption) > * > th { background-color: #161d28; color: #ffffff; }
[data-bs-theme="dark"] .accordion { --bs-accordion-bg: #161d28; --bs-accordion-border-color: #2b3440; --bs-accordion-btn-bg: #161d28; --bs-accordion-active-bg: rgba(25,179,215,.1); --bs-accordion-active-color: #ffffff; --bs-accordion-btn-color: #e6edf3; --bs-accordion-color: #e6edf3; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: #0d1117; border-color: #2b3440; color: #e6edf3; }
[data-bs-theme="dark"] .form-control::placeholder { color: #6b7785; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { border-color: #19b3d7; box-shadow: 0 0 0 .2rem rgba(25,179,215,.25); }
[data-bs-theme="dark"] code { color: #8adbee; }

/* Buttons: filled buttons use the app blue (white text 6.6:1) */
/* The older pages set .btn-primary { background-color: var(--primary-dark) }, which is
   light teal in dark mode, so set the fill directly too. */
[data-bs-theme="dark"] .btn-primary { background-color: #0759b6; border-color: #0759b6; color: #fff; }
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus-visible { background-color: #064a97; border-color: #064a97; color: #fff; }
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #0759b6; --bs-btn-border-color: #0759b6; --bs-btn-hover-bg: #064a97; --bs-btn-hover-border-color: #064a97; --bs-btn-active-bg: #064a97; --bs-btn-active-border-color: #064a97; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #4fc6e3; --bs-btn-border-color: #4fc6e3; --bs-btn-hover-bg: #19b3d7; --bs-btn-hover-border-color: #19b3d7; --bs-btn-hover-color: #0d1117; }
[data-bs-theme="dark"] .btn-white { color: #0759b6; }
[data-bs-theme="dark"] .text-primary { color: #4fc6e3 !important; } /* Bootstrap #0d6efd is ~4:1 on dark */
[data-bs-theme="dark"] .btn-light { --bs-btn-bg: #e6edf3; --bs-btn-color: #0d1117; }

/* Footer */
[data-bs-theme="dark"] .footer { background: #0b0f14 !important; color: #8391a2; border-top: 1px solid #2b3440; }
[data-bs-theme="dark"] .footer a { color: #aab6c3; }
[data-bs-theme="dark"] .footer a:hover { color: #19b3d7; }