/* ============================================================
   style_base.css — NMMI.AI Shared Primitives
   Layer 2 of the 3-layer load order:
     1. nmmi_theme_system.css   (colour tokens + dark/light mode)
     2. style_base.css          (reset, typography, shared components)
     3. page-specific CSS       (login, admin, dashboard, etc.)

   All pages MUST load this file. Do NOT load style_login_gray.css
   as a base sheet — it now contains login-page-only rules.
   ============================================================ */

/* NOTE: theme tokens now come exclusively from nmmi_theme_system.css (Layer 1),
   which MUST be loaded before this file. The legacy @import of
   theme_tokens_colour.css was removed to eliminate token collisions
   (both files defined --accent-rgb / --bg-body with differing values). */

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── BASE ───────────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-body);
  color: var(--text-hi); /* [A-003 2026-06-04] was --input-text (legacy) */
  min-height: 100vh;
  transition: background-color 0.25s ease, color 0.25s ease;
}


/* ════════════════════════════════════════════════
   FORM ELEMENTS
   ════════════════════════════════════════════════ */

.form-group {
  text-align: left;
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: rgba(var(--muted-rgb), 0.50);
  margin-bottom: 0.4rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--input-bg);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  color: var(--input-text);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.15s;
}

.form-group input:focus,
.form-group input:active {
  border-color: var(--accent-soft);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group input::placeholder {
  color: rgba(var(--muted-rgb), 0.34);
  font-style: italic;
}

/* Password wrapper */
.password-wrapper {
  position: relative;
}
.password-wrapper input {
  padding-right: 3rem;
}
.password-wrapper button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: rgba(var(--muted-rgb), 0.50);
  transition: color 0.2s;
}
.password-wrapper button:hover {
  color: var(--accent);
}


/* ════════════════════════════════════════════════
   BUTTONS
   /* [A-004 2026-06-04] .btn-primary / .btn-secondary migrated from
      --apply-rgb / --accent-rgb (legacy) to --theme-rgb / --theme-border /
      --theme-bg / --theme-glow so buttons respond correctly to all 6 themes. */
   ════════════════════════════════════════════════ */

.btn-primary {
  width: 100%;
  padding: 0.85rem;
  background: var(--theme-bg);
  color: var(--theme);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
  margin-top: 0.5rem;
  letter-spacing: 0.5px;
}
.btn-primary:hover:not(:disabled) {
  background: rgba(var(--theme-rgb), 0.22);
  border-color: var(--theme-border);
  color: var(--theme);
  box-shadow: 0 0 12px var(--theme-glow);
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 0 18px var(--theme-glow);
}
.btn-primary:disabled {
  opacity: 0.20;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--theme-rgb), 0.05);
  color: rgba(var(--muted-rgb), 0.65);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-secondary:hover {
  background: rgba(var(--theme-rgb), 0.08);
  border-color: var(--theme-border);
  color: var(--theme);
}

.btn-logout {
  background: rgba(var(--theme-rgb), 0.10);
  color: var(--theme);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-logout:hover {
  background: rgba(var(--theme-rgb), 0.20);
  border-color: var(--theme-border);
  color: var(--theme);
}


/* ════════════════════════════════════════════════
   ALERTS
   /* [A-005 2026-06-04] .alert.error / .alert.warn and .status-error /
      .status-warn migrated from hardcoded rgba(255,75,75) / rgba(255,195,50)
      to v8 semantic tokens --err / --err-bg / --err-bd / --warn / --warn-bg /
      --warn-bd. */
   ════════════════════════════════════════════════ */

.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert.error {
  background: var(--err-bg);
  color: var(--err);
  border: 1px solid var(--err-bd);
}
.alert.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-bd);
}
.alert.info {
  background: rgba(var(--accent-rgb), 0.04);
  color: rgba(var(--muted-rgb), 0.65);
  border: 1px solid var(--accent-border);
}

.status-ok        { color: rgba(var(--accent-rgb), 0.68); }
.status-error     { color: var(--err); }
.status-warn      { color: var(--warn); }
.status-info      { color: rgba(var(--muted-rgb), 0.38); }
.status-listening { color: var(--accent); font-style: italic; }
.hidden           { display: none; }


/* ════════════════════════════════════════════════
   NAV
   /* [A-001/A-002 2026-06-04] .topnav and .nav-brand removed —
      canonical declaration lives in nmmi_theme_system.css section 5.
      Leaving only .nav-user and .role-badge which are not in the theme system. */
   ════════════════════════════════════════════════ */

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.role-badge {
  background: rgba(var(--accent-rgb), 0.07);
  color: rgba(var(--accent-rgb), 0.65);
  border: 1px solid var(--accent-border);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}


/* ════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════ */

.dashboard-main {
  padding: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.dashboard-main h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: rgba(var(--accent-rgb), 0.85);
  letter-spacing: 1px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 1.5rem;
  font-size: 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.07);
}
.card strong {
  display: block;
  font-size: 1rem;
  margin: 0.5rem 0 0.25rem;
  color: var(--input-text);
}
.card p {
  font-size: 0.85rem;
  color: rgba(var(--muted-rgb), 0.55);
  margin-bottom: 0.5rem;
}


/* ════════════════════════════════════════════════
   SCROLLBAR
   /* [A-006 2026-06-04] webkit scrollbar block removed — nmmi_theme_system.css
      section 7 is canonical (6px). Retaining scrollbar-color shorthand only. */
   ════════════════════════════════════════════════ */

* { scrollbar-color: var(--scroll-thumb) transparent; }


/* ════════════════════════════════════════════════
   H1 PROCESSING ANIMATION
   [A-024 2026-06-04] Stage D — canonical processing-state pulse.
   JS in index_rag.page.js and index_rprt.page.js drives this via
   .classList.add/remove('processing') on document.querySelector('h1').
   Keyframe uses --header-text token (per-theme RGB) so it responds
   correctly to all 6 v8 themes without any page-specific overrides.
   ════════════════════════════════════════════════ */

@keyframes nmmiProcessingPulse {
  0%   {
    color: rgba(var(--header-text), 0.22);
    text-shadow: 0 0 6px rgba(var(--header-text), 0.45);
  }
  50%  {
    color: rgba(var(--header-text), 0.85);
    text-shadow:
      0 0 22px rgba(var(--header-text), 1.0),
      0 0  8px rgba(var(--header-text), 0.9);
  }
  100% {
    color: rgba(var(--header-text), 0.22);
    text-shadow: 0 0 6px rgba(var(--header-text), 0.45);
  }
}

h1.processing {
  animation: nmmiProcessingPulse 2.5s ease-in-out infinite;
  transition: none;
}