/* ═══════════════════════════════════════════════════════════════
   AIERP DEFAULT THEME — colours, fonts, backgrounds, borders
   Every variable and rule that defines the visual identity, kept apart from
   the structure (aierp.css) so another theme can override all of it at once.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — colours and typography
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette: warm-dark foundation ── */
  --aierp-bg: #080b12;
  --aierp-bg-alt: #0a0e18;
  --aierp-surface: #0f1420;
  --aierp-surface-elevated: #131924;
  --aierp-surface-overlay: #181e2c;

  /* ── Borders ── */
  --aierp-border: rgba(255, 255, 255, .055);
  --aierp-border-strong: rgba(255, 255, 255, .09);
  --aierp-border-focus: rgba(168, 139, 255, .30);

  /* ── Text hierarchy ── */
  --aierp-text: #e8ecf2;
  --aierp-text-secondary: #9aa4b8;
  --aierp-text-tertiary: #5a6378;
  --aierp-text-inverse: #080b12;

  /* ── Brand system: dual accent ── */
  --aierp-accent: #8b6cf6;
  --aierp-accent-light: #a78bfa;
  --aierp-accent-glow: rgba(139, 108, 246, .22);
  --aierp-accent-secondary: #f0a554;
  --aierp-accent-secondary-glow: rgba(240, 165, 84, .18);

  /* ── Semantic colors ── */
  --aierp-green: #22c55e;
  --aierp-green-bg: rgba(34, 197, 94, .08);
  --aierp-amber: #f59e0b;
  --aierp-amber-bg: rgba(245, 158, 11, .08);
  --aierp-red: #f0445c;
  --aierp-red-bg: rgba(240, 68, 92, .08);
  --aierp-blue: #38bdf8;
  --aierp-blue-bg: rgba(56, 189, 248, .08);

  /* ── Typography ── */
  --aierp-font: 'Inter', 'Inter Display', system-ui, -apple-system, sans-serif;
  --aierp-font-size: 13px;

  /* ── Semantic backgrounds (opacity-varied, reused outside CSS too — see public/js/aierp.js) ── */
  --aierp-accent-bg: rgba(139, 108, 246, .1);
  --aierp-accent-secondary-bg: rgba(240, 165, 84, .1);

  /* ── Extended palette (gradient stops / one-off shades) ── */
  --aierp-white: #fff;
  --aierp-accent-deep: #7c5cf0;
  --aierp-accent-lighter: #c4b5fd;
  --aierp-green-deep: #16a34a;
  --aierp-text-table: #f0f3f7;
  --aierp-text-muted-alt: #97a1b5;
  --aierp-surface-deep: #1a1f2e;
  --aierp-nav-open-bg: rgb(28 28 54);
  --aierp-nav-open-bg-collapsed: rgb(14 19 30);
  --aierp-green-soft-bg: rgba(52, 211, 153, .06);
  --aierp-red-soft-bg: rgba(248, 113, 113, .06);

  /* ── RGB triplets — for rgb(var(--x-rgb) / alpha) opacity variants. NOTE:
     rgba(var(--x-rgb), alpha) is invalid CSS (mixes legacy comma syntax with
     a space-separated var()) and silently computes to transparent — always
     use rgb() with a slash before the alpha, never rgba() with a comma. ── */
  --aierp-white-rgb: 255 255 255;
  --aierp-black-rgb: 0 0 0;
  --aierp-accent-rgb: 139 108 246;
  --aierp-accent-secondary-rgb: 240 165 84;
  --aierp-red-rgb: 240 68 92;
  --aierp-green-rgb: 34 197 94;
  --aierp-amber-rgb: 245 158 11;
  --aierp-blue-rgb: 56 189 248;
  --aierp-surface-rgb: 15 20 32;
  --aierp-muted-rgb: 77 85 93;
}

/* ═══════════════════════════════════════════════════════════════
   2. BOOTSTRAP OVERRIDES — CSS Variable level
   ═══════════════════════════════════════════════════════════════ */

/* ── Global Bootstrap variable overrides ── */
.app-wrapper {
  --bs-body-bg: var(--aierp-bg);
  --bs-body-color: var(--aierp-text);
  --bs-border-color: var(--aierp-border);
  --bs-link-color: var(--aierp-accent-light);
  --bs-link-hover-color: var(--aierp-accent-light);

  /* Tables */
  --bs-table-color: var(--aierp-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--aierp-border);
  --bs-table-hover-bg: rgba(139, 108, 246, .025);
  --bs-table-hover-color: var(--aierp-text);
  --bs-table-striped-bg: rgba(255, 255, 255, .01);
  --bs-table-striped-color: var(--aierp-text);
  --bs-table-active-bg: rgba(139, 108, 246, .06);
  --bs-table-group-separator-color: var(--aierp-border);

  /* Forms */
  --bs-form-control-bg: var(--aierp-surface);
  --bs-form-control-color: var(--aierp-text);
  --bs-form-control-border-color: var(--aierp-border);
  --bs-input-group-addon-bg: var(--aierp-surface-elevated);
  --bs-input-group-addon-color: var(--aierp-text-secondary);
  --bs-input-group-addon-border-color: var(--aierp-border);
  --bs-form-select-bg: var(--aierp-surface);
  --bs-form-select-color: var(--aierp-text);
  --bs-form-select-border-color: var(--aierp-border);
  --bs-form-check-input-bg: var(--aierp-surface);
  --bs-form-check-input-border: 1px solid var(--aierp-border-strong);

  /* Cards */
  --bs-card-bg: var(--aierp-surface);
  --bs-card-color: var(--aierp-text);
  --bs-card-border-color: var(--aierp-border);
  --bs-card-cap-bg: var(--aierp-surface-elevated);
  --bs-card-cap-color: var(--aierp-text);

  /* Dropdown */
  --bs-dropdown-bg: var(--aierp-surface-overlay);
  --bs-dropdown-color: var(--aierp-text);
  --bs-dropdown-border-color: var(--aierp-border-strong);
  --bs-dropdown-link-color: var(--aierp-text-secondary);
  --bs-dropdown-link-hover-color: var(--aierp-text);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .04);
  --bs-dropdown-link-active-bg: rgba(139, 108, 246, .1);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-divider-bg: var(--aierp-border);

  /* Modal */
  --bs-modal-bg: var(--aierp-surface-overlay);
  --bs-modal-color: var(--aierp-text);
  --bs-modal-border-color: var(--aierp-border-strong);
  --bs-modal-header-border-color: var(--aierp-border);
  --bs-modal-footer-border-color: var(--aierp-border);

  /* Pagination */
  --bs-pagination-bg: var(--aierp-surface);
  --bs-pagination-color: var(--aierp-text);
  --bs-pagination-border-color: var(--aierp-border);
  --bs-pagination-hover-bg: var(--aierp-surface-elevated);
  --bs-pagination-hover-color: var(--aierp-text);
  --bs-pagination-hover-border-color: var(--aierp-border-strong);
  --bs-pagination-active-bg: var(--aierp-accent);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-border-color: var(--aierp-accent);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: var(--aierp-text-tertiary);

  /* Nav */
  --bs-nav-link-color: var(--aierp-text-secondary);
  --bs-nav-link-hover-color: var(--aierp-text);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: #fff;
  --bs-nav-tabs-link-active-border-color: var(--aierp-accent);
  --bs-nav-tabs-border-color: var(--aierp-border);

  /* List group */
  --bs-list-group-bg: var(--aierp-surface);
  --bs-list-group-color: var(--aierp-text);
  --bs-list-group-border-color: var(--aierp-border);
  --bs-list-group-action-hover-bg: rgba(255, 255, 255, .02);

  /* Popover */
  --bs-popover-bg: var(--aierp-surface-overlay);
  --bs-popover-border-color: var(--aierp-border-strong);
  --bs-popover-header-bg: var(--aierp-surface-elevated);
  --bs-popover-header-color: var(--aierp-text);
  --bs-popover-body-color: var(--aierp-text-secondary);

  /* Tooltip */
  --bs-tooltip-bg: var(--aierp-surface-overlay);
  --bs-tooltip-color: var(--aierp-text);

  /* Breadcrumb */
  --bs-breadcrumb-divider-color: var(--aierp-text-tertiary);

  /* Close button */
  --bs-btn-close-color: #fff;
  --bs-btn-close-bg: none;

  /* Alert */
  --bs-alert-bg: transparent;
  --bs-alert-color: var(--aierp-text);
  --bs-alert-border-color: var(--aierp-border);
}

/* ═══════════════════════════════════════════════════════════════
   3. STATS GRID — icon and value colours
   ═══════════════════════════════════════════════════════════════ */

.stat-icon--purple { background: rgba(139, 108, 246, .12); color: var(--aierp-accent-light); }
.stat-icon--amber { background: rgba(240, 165, 84, .12); color: var(--aierp-accent-secondary); }
.stat-icon--red { background: var(--aierp-red-bg); color: var(--aierp-red); }
.stat-icon--green { background: var(--aierp-green-bg); color: var(--aierp-green); }
.stat-icon--blue { background: var(--aierp-blue-bg); color: var(--aierp-blue); }

.stat-value.purple { color: var(--aierp-accent-light); }
.stat-value.amber { color: var(--aierp-accent-secondary); }
.stat-value.red { color: var(--aierp-red); }
.stat-value.green { color: var(--aierp-green); }
.stat-value.blue { color: var(--aierp-blue); }

/* ═══════════════════════════════════════════════════════════════
   4. STATUS BADGES — variant colours
   ═══════════════════════════════════════════════════════════════ */

.aierp-badge-draft {
  background: rgba(255, 255, 255, .04);
  color: var(--aierp-text-tertiary);
  border: 1px solid var(--aierp-border);
}
.aierp-badge-draft .aierp-badge-dot { background: var(--aierp-text-tertiary); }
.aierp-badge-posted {
  background: var(--aierp-green-bg);
  color: var(--aierp-green);
  border: 1px solid rgba(34, 197, 94, .15);
}
.aierp-badge-posted .aierp-badge-dot { background: var(--aierp-green); }
.aierp-badge-pending {
  background: var(--aierp-amber-bg);
  color: var(--aierp-amber);
  border: 1px solid rgba(245, 158, 11, .15);
}
.aierp-badge-pending .aierp-badge-dot { background: var(--aierp-amber); }
.aierp-badge-rejected {
  background: var(--aierp-red-bg);
  color: var(--aierp-red);
  border: 1px solid rgba(240, 68, 92, .15);
}
.aierp-badge-rejected .aierp-badge-dot { background: var(--aierp-red); }
/* posting_status values the codebook has but no module used before invoices:
   `processing` lasts only for the duration of a posting transaction, so it
   reads as "in progress"; `cancelled` is void history — muted like draft, but
   struck through so a voided document is never mistaken for a fresh one. */
.aierp-badge-processing {
  background: var(--aierp-blue-bg);
  color: var(--aierp-blue);
  border: 1px solid rgba(56, 189, 248, .15);
}
.aierp-badge-processing .aierp-badge-dot { background: var(--aierp-blue); }
.aierp-badge-cancelled {
  background: rgba(255, 255, 255, .03);
  color: var(--aierp-text-tertiary);
  border: 1px solid var(--aierp-border);
  text-decoration: line-through;
}
.aierp-badge-cancelled .aierp-badge-dot { background: var(--aierp-text-tertiary); }
.aierp-badge-paid { background: var(--aierp-green-bg); color: var(--aierp-green); }
.aierp-badge-unpaid { background: var(--aierp-red-bg); color: var(--aierp-red); }
/* `partial` is the legacy demo value; `partially_paid` is what the
   payment_status ENUM actually stores — same look, one rule. */
.aierp-badge-partial,
.aierp-badge-partially_paid { background: var(--aierp-amber-bg); color: var(--aierp-amber); }
/* notifications.status (delivery) + notifications.type (severity) — shared
   values between the two badge kinds reuse the same class (aierp-badge-{value}
   is keyed off the raw enum value, not the badge "type" prop). */
.aierp-badge-sent { background: var(--aierp-blue-bg); color: var(--aierp-blue); }
.aierp-badge-sent .aierp-badge-dot { background: var(--aierp-blue); }
.aierp-badge-read { background: var(--aierp-green-bg); color: var(--aierp-green); }
.aierp-badge-read .aierp-badge-dot { background: var(--aierp-green); }
.aierp-badge-failed { background: var(--aierp-red-bg); color: var(--aierp-red); }
.aierp-badge-failed .aierp-badge-dot { background: var(--aierp-red); }
.aierp-badge-info { background: var(--aierp-blue-bg); color: var(--aierp-blue); }
.aierp-badge-info .aierp-badge-dot { background: var(--aierp-blue); }
.aierp-badge-warning { background: var(--aierp-amber-bg); color: var(--aierp-amber); }
.aierp-badge-warning .aierp-badge-dot { background: var(--aierp-amber); }
.aierp-badge-success { background: var(--aierp-green-bg); color: var(--aierp-green); }
.aierp-badge-success .aierp-badge-dot { background: var(--aierp-green); }
.aierp-badge-error { background: var(--aierp-red-bg); color: var(--aierp-red); }
.aierp-badge-error .aierp-badge-dot { background: var(--aierp-red); }
.aierp-badge-active {
  background: var(--aierp-green-bg);
  color: var(--aierp-green);
  border: 1px solid rgba(34, 197, 94, .15);
}
.aierp-badge-active .aierp-badge-dot { background: var(--aierp-green); }
.aierp-badge-inactive {
  background: rgba(255, 255, 255, .03);
  color: var(--aierp-text-tertiary);
  border: 1px solid var(--aierp-border);
}
.aierp-badge-inactive .aierp-badge-dot { background: var(--aierp-text-tertiary); }

/* ═══════════════════════════════════════════════════════════════
   4b. READINESS BAR — ready / blocked variants
   ═══════════════════════════════════════════════════════════════ */

.readiness-bar--ready {
  background: var(--aierp-green-bg);
  border-color: rgb(var(--aierp-green-rgb) / .2);
  color: var(--aierp-green);
}
.readiness-bar--blocked {
  background: var(--aierp-amber-bg);
  border-color: rgb(var(--aierp-amber-rgb) / .2);
  color: var(--aierp-amber);
}
.readiness-list--advisory { color: var(--aierp-amber); }

/* ═══════════════════════════════════════════════════════════════
   4c. SETTING LOCK BADGE — open / locked variants
   ═══════════════════════════════════════════════════════════════ */

.setting-lock-badge--open {
  background: var(--aierp-amber-bg);
  border-color: rgb(var(--aierp-amber-rgb) / .25);
  color: var(--aierp-amber);
}
.setting-lock-badge--locked {
  background: var(--aierp-surface-overlay);
  border-color: var(--aierp-border-strong);
  color: var(--aierp-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   4d. DOCUMENT TOTAL — estimate / posted variants
   ═══════════════════════════════════════════════════════════════ */

.busy-overlay { background: rgb(var(--aierp-black-rgb) / .55); }
.busy-overlay-box {
  background: var(--aierp-surface-elevated);
  box-shadow: 0 20px 60px rgb(var(--aierp-black-rgb) / .45);
}
.busy-overlay-message { color: var(--aierp-text); }
.busy-overlay-hint { color: var(--aierp-text-tertiary); }

.document-total-label { color: var(--aierp-text-tertiary); }
.document-total--estimate .document-total-value { color: var(--aierp-text-secondary); }
.document-total--estimate .document-total-approx { color: var(--aierp-text-tertiary); }
.document-total--posted .document-total-value { color: var(--aierp-text); }

/* ═══════════════════════════════════════════════════════════════
   5. UTILITY CLASSES — colours
   ═══════════════════════════════════════════════════════════════ */

.text-aierp { color: var(--aierp-text) !important; }
.text-aierp-secondary { color: var(--aierp-text-secondary) !important; }
.text-aierp-tertiary { color: var(--aierp-text-tertiary) !important; }
.text-aierp-accent { color: var(--aierp-accent-light) !important; }
.text-aierp-green { color: var(--aierp-green) !important; }
.text-aierp-red { color: var(--aierp-red) !important; }
.text-aierp-amber { color: var(--aierp-amber) !important; }

.bg-aierp-surface { background: var(--aierp-surface) !important; }
.bg-aierp-elevated { background: var(--aierp-surface-elevated) !important; }
.bg-aierp-overlay { background: var(--aierp-surface-overlay) !important; }

.border-aierp { border-color: var(--aierp-border) !important; }