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

@font-face {
  font-family: "Tutano CC";
  src: url("/assets/build/fonts/tutano/tutano_cc_v2.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  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);
  --shm-brand-wordmark-desktop-size: 42px;
  --shm-brand-blue: #4280ba;
  --shm-brand-blue-rgb: 66, 128, 186;
  --shm-brand-warning: #c46c1c;
  --shm-brand-warning-rgb: 196, 108, 28;
  --shm-brand-blue-hover: #4d8bc4;
  --shm-brand-blue-active: #3970a6;
  --bs-orange: var(--shm-brand-warning);
  --bs-yellow: var(--shm-brand-warning);
  --bs-warning: var(--shm-brand-warning);
  --bs-warning-rgb: var(--shm-brand-warning-rgb);
  --bs-primary: var(--shm-brand-blue);
  --bs-blue: var(--shm-brand-blue);
  --bs-primary-rgb: var(--shm-brand-blue-rgb);
  --bs-link-color: var(--shm-brand-blue);
  --bs-link-hover-color: var(--shm-brand-blue-hover);
  --bs-code-color: var(--shm-brand-warning);
  --bs-highlight-bg: var(--shm-brand-warning);
  --shm-brand-main: var(--shm-brand-blue);
  --shm-brand-accent: var(--bs-orange);
  --shm-brand-subtitle: var(--bs-secondary-color);

  /* 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);

  --app-dark-accent: var(--shm-brand-blue);
  --app-dark-accent-hover: var(--shm-brand-blue-hover);
  --app-dark-accent-active: var(--shm-brand-blue-active);
  --app-dark-accent-rgb: var(--shm-brand-blue-rgb);

  --app-dark-link: var(--shm-brand-blue);
  --app-dark-link-hover: var(--shm-brand-blue-hover);
}

[data-theme=light] {
  /* Slightly stronger contrast for the shared light theme */
  --bs-text-level-1: #6d6d6d;
  --bs-text-level-2: #585858;
  --bs-text-level-3: #3b3b3b;
  --bs-text-level-4: #1d1d1d;
}

[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);
  --shm-brand-main: var(--app-dark-link);
  --shm-brand-subtitle: var(--bs-text-level-1);
}

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

.shm-brand-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  text-decoration: none;
}

.shm-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: "Tutano CC", "Poppins", "Trebuchet MS", sans-serif;
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.025em;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
}

.shm-brand-wordmark__text {
  color: var(--shm-brand-main);
}

.shm-brand-wordmark__accent {
  color: var(--shm-brand-accent);
}

.shm-spinner-accent {
  color: var(--shm-brand-accent) !important;
}

.shm-brand-subtitle {
  color: var(--shm-brand-subtitle);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.1;
  text-transform: uppercase;
}

.shm-brand-link--header {
  align-items: flex-start;
  gap: 0;
}

.shm-brand-wordmark--header {
  font-size: var(--shm-brand-wordmark-desktop-size);
}

.shm-brand-wordmark--aside {
  font-size: var(--shm-brand-wordmark-desktop-size);
}

.shm-brand-wordmark--login {
  font-size: clamp(2.8rem, 7vw, 4.8rem);
}

.shm-brand-link--header:hover,
.shm-brand-link--login:hover,
.shm-brand-link--aside:hover {
  text-decoration: none;
}

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) */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--shm-brand-blue-hover);
  --bs-btn-hover-border-color: var(--shm-brand-blue-hover);
  --bs-btn-active-bg: var(--shm-brand-blue-active);
  --bs-btn-active-border-color: var(--shm-brand-blue-active);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-flat-primary {
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--shm-brand-blue-active);
  --bs-btn-active-border-color: var(--shm-brand-blue-active);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--shm-brand-blue-active);
  --bs-btn-active-border-color: var(--shm-brand-blue-active);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-text-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.1);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.1);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
}

.text-primary {
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Primary utility backgrounds */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.spinner-border,
.spinner-grow,
.spinner-border[class*="text-"],
.spinner-grow[class*="text-"] {
  color: var(--shm-brand-accent) !important;
}

.badge-primary {
  --bs-badge-bg: var(--bs-primary);
  --bs-badge-border-color: var(--bs-primary);
}

.badge-outline-primary,
.badge-text-primary {
  --bs-badge-color: var(--bs-primary);
  --bs-badge-border-color: var(--bs-primary);
}

.badge-label-primary {
  --bs-badge-color: var(--bs-primary);
  --bs-badge-bg: rgba(var(--bs-primary-rgb), 0.1);
}

/* Warning/orange: unify all yellow/orange states */
.table-warning {
  --bs-table-bg: rgba(var(--bs-warning-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--bs-warning-rgb), 0.3);
  --bs-table-active-bg: rgba(var(--bs-warning-rgb), 0.7);
  --bs-table-hover-bg: rgba(var(--bs-warning-rgb), 0.5);
  --bs-table-border-color: var(--bs-warning);
  --bs-table-seperator-border-color: var(--bs-warning);
}

.portlet-warning {
  --bs-portlet-bg: var(--bs-warning);
  --bs-portlet-border-color: var(--bs-warning);
}

.btn-warning {
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-outline-warning,
.btn-flat-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-color: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-label-warning,
.btn-text-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-bg: rgba(var(--bs-warning-rgb), 0.1);
  --bs-btn-border-color: rgba(var(--bs-warning-rgb), 0.1);
  --bs-btn-hover-color: var(--bs-warning);
  --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), 0.1);
  --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), 0.1);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-color: var(--bs-warning);
  --bs-btn-disabled-bg: rgba(var(--bs-warning-rgb), 0.1);
  --bs-btn-disabled-border-color: rgba(var(--bs-warning-rgb), 0.1);
}

.badge-warning {
  --bs-badge-bg: var(--bs-warning);
  --bs-badge-border-color: var(--bs-warning);
}

.badge-outline-warning {
  --bs-badge-color: var(--bs-warning);
  --bs-badge-border-color: var(--bs-warning);
}

.badge-label-warning {
  --bs-badge-color: var(--bs-warning);
  --bs-badge-bg: rgba(var(--bs-warning-rgb), 0.1);
}

.badge-text-warning {
  --bs-badge-color: var(--bs-warning);
}

.alert-warning {
  --bs-alert-bg: var(--bs-warning);
  --bs-alert-border-color: var(--bs-warning);
}

.alert-outline-warning,
.alert-label-warning {
  --bs-alert-color: var(--bs-warning);
  --bs-alert-border-color: var(--bs-warning);
}

.alert-label-warning {
  --bs-alert-bg: rgba(var(--bs-warning-rgb), 0.1);
}

.alert-outline-warning .alert-link,
.alert-label-warning .alert-link {
  color: var(--bs-warning);
}

.avatar-warning {
  --bs-avatar-bg: var(--bs-warning);
}

.avatar-label-warning {
  --bs-avatar-bg: rgba(var(--bs-warning-rgb), 0.1);
  --bs-avatar-color: var(--bs-warning);
}

.avatar-icon-warning {
  --bs-avatar-icon-bg: var(--bs-warning);
}

.chat-bubble-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.2) !important;
}

.list-group-item-warning {
  color: var(--bs-warning);
  background-color: rgba(var(--bs-warning-rgb), 0.1);
}

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: var(--bs-warning);
  background-color: rgba(var(--bs-warning-rgb), 0.2);
}

.list-group-item-warning.list-group-item-action.active {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.text-bg-warning {
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

.link-warning,
.link-warning:hover,
.link-warning:focus {
  color: var(--bs-warning) !important;
}

.ql-editor .ql-bg-orange,
.ql-editor .ql-bg-yellow {
  background: var(--bs-warning);
}

.ql-editor .ql-color-orange,
.ql-editor .ql-color-yellow {
  color: var(--bs-warning);
}

.swal2-icon.swal2-warning {
  border-color: var(--bs-warning);
  color: var(--bs-warning);
}

.toast-warning {
  background-color: var(--bs-warning);
}

/* 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%;
  }
}