/* ============================================================
   MultiManager — app.css
   Single source of truth for brand styling on top of Bootstrap 5.3.
   Loaded after the Bootstrap CDN stylesheet so these overrides win.
   Served from /assets/** (public per SecurityConfig).
   ============================================================ */

:root {
  --mm-accent:        #4f46e5;   /* brand indigo */
  --mm-accent-hover:  #4338ca;
  --mm-accent-rgb:    79, 70, 229;
  --mm-ink:           #1e2330;   /* headings / strong text */
  --mm-muted:         #6b7280;   /* secondary text */
  --mm-surface:       #fafbfd;   /* subtle panels / footers */
  /* P/L colors — referenced from JS cell styles as var(--mm-neg)/var(--mm-pos)
     so grid money cells retint with the theme without re-rendering */
  --mm-neg:           #dc3545;   /* losses / offline */
  --mm-pos:           #198754;   /* profits / online */
}

/* ---- Map Bootstrap "primary" to the brand accent (runtime vars) ---- */
.btn-primary {
  --bs-btn-bg:                 var(--mm-accent);
  --bs-btn-border-color:       var(--mm-accent);
  --bs-btn-hover-bg:           var(--mm-accent-hover);
  --bs-btn-hover-border-color: var(--mm-accent-hover);
  --bs-btn-active-bg:          var(--mm-accent-hover);
  --bs-btn-active-border-color:var(--mm-accent-hover);
  --bs-btn-disabled-bg:        var(--mm-accent);
  --bs-btn-disabled-border-color: var(--mm-accent);
}
.btn-outline-primary {
  --bs-btn-color:              var(--mm-accent);
  --bs-btn-border-color:       var(--mm-accent);
  --bs-btn-hover-bg:           var(--mm-accent);
  --bs-btn-hover-border-color: var(--mm-accent);
  --bs-btn-active-bg:          var(--mm-accent-hover);
  --bs-btn-active-border-color:var(--mm-accent-hover);
}
a { --bs-link-color-rgb: var(--mm-accent-rgb); --bs-link-hover-color-rgb: var(--mm-accent-rgb); }

/* ============================================================
   Auth pages (login)
   ============================================================ */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 50% -12%,
      rgba(var(--mm-accent-rgb), .10) 0%,
      #f6f7fb 46%,
      #eef1f6 100%);
}

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: 1rem;
  overflow: hidden;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mm-ink);
}
.auth-brand i { color: var(--mm-accent); }

.auth-tagline {
  margin: .35rem 0 0;
  color: var(--mm-muted);
  font-size: .85rem;
}

/* Toolitos gradient wordmark — same recipe as the toolitos.com logo:
   Nunito 800 with the navy → royal → sky gradient clipped to the glyphs. */
.mm-wordmark {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  background: linear-gradient(90deg,
    #1b368f 0%,
    #1b368f 18%,
    #2070b8 40%,
    #4ca8d4 62%,
    #7ec8e3 82%,
    #a8ddf0 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-font-smoothing: antialiased;
}

/* Login header: the wordmark on its dark brand plate — the gradient's pale end
   needs the site's near-black behind it to stay readable on the light card. */
.auth-plate {
  display: inline-block;
  background: #07080d;
  border-radius: 16px;
  padding: .95rem 1.6rem 1.05rem;
}
.auth-plate .mm-wordmark { font-size: 40px; }

/* Seamless icon + field input groups */
.auth-card .input-group-text {
  background: #fff;
  color: var(--mm-muted);
  border-right: 0;
}
.auth-card .form-control { border-left: 0; }
.auth-card .form-control:focus {
  box-shadow: none;
  border-color: var(--bs-border-color);
}
.auth-card .input-group:focus-within {
  border-radius: .375rem;
  box-shadow: 0 0 0 .2rem rgba(var(--mm-accent-rgb), .18);
}

.auth-foot {
  padding: .75rem 1rem;
  font-size: .75rem;
  color: var(--mm-muted);
  background: var(--mm-surface);
  border-top: 1px solid rgba(0, 0, 0, .05);
}

/* ============================================================
   App shell — navbar
   ============================================================ */
.mm-navbar {
  background: #1b2030;
  border-bottom: 3px solid var(--mm-accent);
}
.mm-brand {
  gap: .5rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.mm-brand i {
  color: var(--mm-accent);
  font-size: 1.15rem;
}
.mm-navbar .nav-link {
  font-size: .925rem;
  color: rgba(255, 255, 255, .72);
}
.mm-navbar .nav-link:hover,
.mm-navbar .nav-link:focus { color: #fff; }
.mm-navbar .nav-link.active {
  position: relative;
  color: #fff;
  font-weight: 600;
}
.mm-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .5rem; right: .5rem; bottom: -2px;
  height: 2px;
  background: var(--mm-accent);
  border-radius: 2px;
}

/* ============================================================
   Page content
   ============================================================ */
.card { border-color: rgba(0, 0, 0, .06); }
.card-header { font-weight: 600; }

/* Page header row: title + subtitle (+ optional action on the right) */
.page-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mm-ink);
}
.page-subtitle {
  color: var(--mm-muted);
  font-size: .875rem;
}

/* Empty state shown inside cards/grids when there's no data */
.mm-empty {
  padding: 2.75rem 1rem;
  text-align: center;
  color: var(--mm-muted);
}
.mm-empty i {
  display: block;
  margin-bottom: .5rem;
  font-size: 2rem;
  color: var(--mm-accent);
  opacity: .6;
}

/* Brand focus ring on form fields across the app (auth pages opt out above) */
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--mm-accent-rgb), .55);
  box-shadow: 0 0 0 .2rem rgba(var(--mm-accent-rgb), .15);
}

/* Icon prefix on input groups (reused from the login form) */
.input-group-text { color: var(--mm-muted); }

/* ============================================================
   AG Grid tables (all pages) — pairs with /assets/js/mm-grid.js
   ============================================================ */
/* Center the (wrapped) header names; overrides the row-reverse
   right-alignment quartz applies to numericColumn headers.
   Doubled class: the CDN ag-grid.css loads AFTER this file and its
   ".ag-right-aligned-header .ag-header-cell-text { text-align: end }"
   ties our specificity, so wrapped numeric headers fell back to
   right-aligned lines without the boost. */
.ag-theme-quartz.ag-theme-quartz .ag-header-cell-label { justify-content: center; }
.ag-theme-quartz.ag-theme-quartz .ag-header-cell-text  { text-align: center; }

/* Column resize handle between headers: quartz defaults except a darker
   color and slightly wider bar, so the grab spot is easy to see.
   NOTE: the class is doubled on purpose — app.css loads BEFORE the CDN
   ag-theme-quartz.css, which redefines these same variables under a plain
   .ag-theme-quartz selector and would otherwise silently win the cascade. */
.ag-theme-quartz.ag-theme-quartz {
  --ag-header-column-resize-handle-color: #4b5563;
  --ag-header-column-resize-handle-width: 3px;
  --ag-header-column-resize-handle-height: 100%; /* quartz default is 30% */
}

/* Grid lines between cells (vertical) and rows (horizontal). Intensity is
   driven by --mm-grid-line-alpha (0 = no lines), adjustable at runtime via
   the +/- debug buttons wired up in mm-grid.js (persisted in localStorage).
   Doubled class for the same load-order reason as above. */
:root { --mm-grid-line-alpha: .15; }
.ag-theme-quartz.ag-theme-quartz {
  --ag-cell-horizontal-border: solid rgba(27, 36, 48, var(--mm-grid-line-alpha));
  --ag-row-border-color: rgba(27, 36, 48, var(--mm-grid-line-alpha));
}

/* ============================================================
   Dark theme — driven by data-bs-theme="dark" on <html>
   (navbar toggle; per-browser via localStorage 'mm.theme', applied
   pre-paint by the headCore boot script in fragments/navbar.html).
   Bootstrap 5.3 restyles its own components from the attribute; the
   rules below cover the brand tokens, the auth page and AG Grid.
   Pages with their own quartz overrides (live view / user window)
   append matching [data-bs-theme="dark"] rules to their <style>.
   ============================================================ */
[data-bs-theme="dark"] {
  --mm-ink:     #e6e9ef;
  --mm-muted:   #9aa2ad;
  --mm-surface: #1a1e26;
  /* Bootstrap's dark-mode "-text-emphasis" red/green: the light values are
     too dark to read on dark row backgrounds */
  --mm-neg:     #ea868f;
  --mm-pos:     #75b798;
}

[data-bs-theme="dark"] .auth-page {
  background:
    radial-gradient(1100px 560px at 50% -12%,
      rgba(var(--mm-accent-rgb), .16) 0%,
      #14161d 46%,
      #0d0f14 100%);
}
[data-bs-theme="dark"] .auth-card .input-group-text { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .auth-foot { border-top-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, .08); }

/* AG Grid: the official quartz-dark palette (copied from the CDN
   ag-theme-quartz.css@31.3.4 .ag-theme-quartz-dark block), applied WITHOUT
   swapping the element class so every .ag-theme-quartz selector in the app
   keeps matching. The attribute+class specificity beats the CDN's plain
   .ag-theme-quartz defaults regardless of load order. */
[data-bs-theme="dark"] .ag-theme-quartz {
  --ag-background-color: color-mix(in srgb, #fff, #182230 97%);
  --ag-foreground-color: #fff;
  --ag-border-color: rgba(255, 255, 255, .16);
  --ag-secondary-border-color: color-mix(in srgb, transparent, var(--ag-foreground-color) 10%);
  --ag-header-background-color: color-mix(in srgb, #fff, #182230 93%);
  --ag-tooltip-background-color: color-mix(in srgb, #fff, #182230 96%);
  --ag-control-panel-background-color: color-mix(in srgb, #fff, #182230 93%);
  --ag-input-disabled-background-color: #68686e12;
  --ag-card-shadow: 0 1px 20px 1px black;
  --ag-input-border-color: var(--ag-border-color);
  --ag-input-disabled-border-color: rgba(255, 255, 255, .07);
  --ag-checkbox-unchecked-color: color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 40%);
  --ag-row-hover-color: color-mix(in srgb, transparent, var(--ag-active-color) 20%);
  --ag-selected-row-background-color: var(--ag-row-hover-color);
  --ag-panel-background-color: color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%);
  --ag-panel-border-color: color-mix(in srgb, transparent, var(--ag-foreground-color) 10%);
  --ag-menu-background-color: color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%);
  --ag-menu-border-color: color-mix(in srgb, transparent, var(--ag-foreground-color) 10%);
  --ag-popup-shadow: 0 0px 20px rgba(0, 0, 0, .3);
  --ag-row-loading-skeleton-effect-color: rgba(202, 203, 204, .4);
  color-scheme: dark;
}
/* grid lines + resize handle: light-on-dark versions of the doubled-class
   rules above (attribute + doubled class outranks them and the CDN) */
[data-bs-theme="dark"] .ag-theme-quartz.ag-theme-quartz {
  --ag-cell-horizontal-border: solid rgba(226, 232, 240, var(--mm-grid-line-alpha));
  --ag-row-border-color: rgba(226, 232, 240, var(--mm-grid-line-alpha));
  --ag-header-column-resize-handle-color: #8a94a3;
}