/*
 * Theme overrides (dark mode tuning)
 * Created: 2026-03-04
 *
 * Rollback:
 *  - Remove the <link> from header.php
 *  - Delete this file
 */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3/SourceSans3VF-Upright.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("../fonts/source-code-pro/SourceCodeVF-Upright.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --bs-font-sans-serif: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Blue-night dark surfaces ported from /public/sss */
  --app-dark-body-bg: #090c10;
  --app-dark-bg-1: #0f1318;
  --app-dark-bg-2: #13181e;
  --app-dark-bg-3: #191f27;
  --app-dark-bg-4: #202731;
  --app-dark-border: #2c3440;
  --app-dark-border-translucent: rgba(255, 255, 255, 0.08);

  /* Muted accent (replaces bright blue in dark mode) */
  --app-dark-accent: #4f5b66;
  --app-dark-accent-hover: #5b6874;
  --app-dark-accent-active: #46515b;
  --app-dark-accent-rgb: 79, 91, 102;

  --app-dark-link: #4280ba;
  --app-dark-link-hover: #b0bcc8;
}

[data-theme=dark] {
  /* Dark surfaces: ~70% darker (dark→grey scale) */
  --bs-body-bg: var(--app-dark-body-bg);
  --bs-bg-level-1: var(--app-dark-bg-1);
  --bs-bg-level-2: var(--app-dark-bg-2);
  --bs-bg-level-3: var(--app-dark-bg-3);
  --bs-bg-level-4: var(--app-dark-bg-4);
  --bs-border-color: var(--app-dark-border);
  --bs-border-color-translucent: var(--app-dark-border-translucent);

  /* Keep text readable on the darker background */
  --bs-text-level-1: #a8a8a8;
  --bs-text-level-2: #c7c7c7;
  --bs-text-level-3: #e0e0e0;
  --bs-text-level-4: #f5f5f5;

  /* Links */
  --bs-link-color: var(--app-dark-link);
  --bs-link-hover-color: var(--app-dark-link-hover);

  /* Primary color (used by rgba(var(--bs-primary-rgb), ...)) */
  --bs-primary: var(--app-dark-accent);
  --bs-blue: var(--app-dark-accent);
  --bs-primary-rgb: var(--app-dark-accent-rgb);
}

body {
  font-family: var(--bs-body-font-family);
}

code,
pre,
kbd,
samp,
.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}

/* Left sidebar: remove the bright blue in dark mode */
[data-theme=dark] .aside-menu {
  background: var(--app-dark-bg-1);
}

/* Menu active background: match muted accent */
[data-theme=dark] .menu {
  --bs-menu-link-active-bg: var(--app-dark-accent);
}

/* Buttons (Bootstrap primary variants are hardcoded in ltr-core.css) */
[data-theme=dark] .btn-primary {
  --bs-btn-bg: var(--app-dark-accent);
  --bs-btn-border-color: var(--app-dark-accent);
  --bs-btn-hover-bg: var(--app-dark-accent-hover);
  --bs-btn-hover-border-color: var(--app-dark-accent-hover);
  --bs-btn-active-bg: var(--app-dark-accent-active);
  --bs-btn-active-border-color: var(--app-dark-accent-active);
  --bs-btn-disabled-bg: var(--app-dark-accent);
  --bs-btn-disabled-border-color: var(--app-dark-accent);
}

[data-theme=dark] .btn-flat-primary {
  --bs-btn-hover-bg: var(--app-dark-accent-hover);
  --bs-btn-hover-border-color: var(--app-dark-accent-hover);
  --bs-btn-active-bg: var(--app-dark-accent-active);
  --bs-btn-active-border-color: var(--app-dark-accent-active);
}

[data-theme=dark] .btn-outline-primary {
  --bs-btn-color: var(--app-dark-link);
  --bs-btn-border-color: var(--app-dark-accent);
  --bs-btn-hover-bg: var(--app-dark-accent);
  --bs-btn-hover-border-color: var(--app-dark-accent);
  --bs-btn-active-bg: var(--app-dark-accent-active);
  --bs-btn-active-border-color: var(--app-dark-accent-active);
  --bs-btn-disabled-color: var(--app-dark-link);
  --bs-btn-disabled-border-color: var(--app-dark-accent);
}

/* Primary utility backgrounds */
[data-theme=dark] .bg-primary {
  background-color: var(--app-dark-accent) !important;
}

/* Dropdowns */
[data-theme=dark] .dropdown-menu,
[data-theme=dark] .dropdown-submenu-menu {
  --bs-dropdown-item-hover-color: var(--app-dark-link-hover);
  --bs-dropdown-item-active-bg: var(--app-dark-accent);
}

/* Pagination */
[data-theme=dark] .pagination {
  --bs-pagination-hover-color: var(--app-dark-link-hover);
  --bs-pagination-focus-color: var(--app-dark-link-hover);
  --bs-pagination-active-bg: var(--app-dark-accent);
}

/* Breadcrumb */
[data-theme=dark] .breadcrumb {
  --bs-breadcrumb-active-color: var(--app-dark-link-hover);
}

/* Nav */
[data-theme=dark] .nav {
  --bs-nav-link-hover-color: var(--app-dark-link-hover);
  --bs-nav-link-active-color: var(--app-dark-link-hover);
  --bs-nav-tabs-link-active-color: var(--app-dark-link-hover);
  --bs-nav-pills-link-hover-color: var(--app-dark-link-hover);
  --bs-nav-pills-link-active-bg: var(--app-dark-accent);
  --bs-nav-line-active-color: var(--app-dark-link-hover);
  --bs-nav-line-active-border-color: var(--app-dark-accent);
}

/* Accordion */
[data-theme=dark] .accordion {
  --bs-accordion-btn-focus-border-color: var(--app-dark-accent);
  --bs-accordion-active-bg: var(--app-dark-accent);
}

/* Badges */
[data-theme=dark] .badge-primary {
  --bs-badge-bg: var(--app-dark-accent);
  --bs-badge-border-color: var(--app-dark-accent);
}
[data-theme=dark] .badge-outline-primary,
[data-theme=dark] .badge-label-primary {
  --bs-badge-color: var(--app-dark-link-hover);
  --bs-badge-border-color: var(--app-dark-accent);
}

/* Forms: focus/checked states (hardcoded blue in ltr-core.css) */
[data-theme=dark] .form-control:focus,
[data-theme=dark] .form-select:focus,
[data-theme=dark] .form-check-input:focus {
  border-color: var(--app-dark-accent);
}
[data-theme=dark] .form-check-input:checked,
[data-theme=dark] .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--app-dark-accent);
  border-color: var(--app-dark-accent);
}

/* Portlets */
[data-theme=dark] .portlet-primary {
  --bs-portlet-bg: var(--app-dark-accent);
  --bs-portlet-border-color: var(--app-dark-accent-hover);
}

/*
 * Laptop grid tuning for the logged-in application shell.
 * This keeps common analytic card layouts closer to the larger-laptop view
 * without affecting the login/public pages.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body.aside-active .wrapper .col-xl-3,
  body.user-content .wrapper .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  body.aside-active .wrapper .col-xl-4,
  body.user-content .wrapper .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  body.aside-active .wrapper .col-xl-6,
  body.user-content .wrapper .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  body.aside-active .wrapper .col-xl-8,
  body.user-content .wrapper .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  body.aside-active .wrapper .col-xxl-3,
  body.user-content .wrapper .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  body.aside-active .wrapper .col-xxl-4,
  body.user-content .wrapper .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  body.aside-active .wrapper .col-xxl-6,
  body.user-content .wrapper .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  body.aside-active .wrapper .col-xxl-8,
  body.user-content .wrapper .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  body.aside-active .wrapper .col-xxl-9,
  body.user-content .wrapper .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
}