/*
 * DB Realm Inc. — APEX Theme 42 Custom Properties
 * ================================================
 * Upload via: Shared Components → Static Application Files
 * Reference: #APP_FILES#branding/theme-variables#MIN#.css
 * Load in: Page Template → CSS → File URLs (or inline on Global Page 0)
 */

:root {
  /* ========================================
     PRIMARY — Purple (Violet)
     ======================================== */
  --dbr-primary-50:  #F5F3FF;
  --dbr-primary-100: #EDE9FE;
  --dbr-primary-200: #DDD6FE;
  --dbr-primary-300: #C4B5FD;
  --dbr-primary-400: #A78BFA;
  --dbr-primary-500: #7C3AED;
  --dbr-primary-600: #6D28D9;
  --dbr-primary-700: #5B21B6;
  --dbr-primary-800: #4C1D95;
  --dbr-primary-900: #2E1065;

  /* ========================================
     ACCENT — Crimson (Professional dark red)
     ======================================== */
  --dbr-accent-50:  #FDF2F2;
  --dbr-accent-100: #F9E0E0;
  --dbr-accent-200: #F0BCBC;
  --dbr-accent-300: #E48E8E;
  --dbr-accent-400: #D16060;
  --dbr-accent-500: #B91C1C;
  --dbr-accent-600: #9B1616;
  --dbr-accent-700: #7F1D1D;

  /* ========================================
     HIGHLIGHT — Rose Gold (Warm ember)
     ======================================== */
  --dbr-highlight-50:  #FFF5F5;
  --dbr-highlight-100: #FFE4E6;
  --dbr-highlight-200: #FECDD3;
  --dbr-highlight-300: #FDA4AF;
  --dbr-highlight-400: #E8636B;
  --dbr-highlight-500: #C2414A;
  --dbr-highlight-600: #9F1239;
  --dbr-highlight-700: #881337;

  /* ========================================
     SEMANTIC
     ======================================== */
  --dbr-success-50:  #ECFDF5;
  --dbr-success-100: #D1FAE5;
  --dbr-success-500: #10B981;
  --dbr-success-600: #059669;
  --dbr-success-700: #047857;

  --dbr-warning-50:  #FFFBEB;
  --dbr-warning-100: #FEF3C7;
  --dbr-warning-500: #F59E0B;
  --dbr-warning-600: #D97706;
  --dbr-warning-700: #B45309;

  --dbr-danger-50:  #FEF2F2;
  --dbr-danger-100: #FEE2E2;
  --dbr-danger-500: #EF4444;
  --dbr-danger-600: #DC2626;
  --dbr-danger-700: #B91C1C;

  --dbr-info-50:  #EFF6FF;
  --dbr-info-100: #DBEAFE;
  --dbr-info-500: #3B82F6;
  --dbr-info-600: #2563EB;

  /* ========================================
     NEUTRALS — Slate
     ======================================== */
  --dbr-slate-50:  #F8FAFC;
  --dbr-slate-100: #F1F5F9;
  --dbr-slate-200: #E2E8F0;
  --dbr-slate-300: #CBD5E1;
  --dbr-slate-400: #94A3B8;
  --dbr-slate-500: #64748B;
  --dbr-slate-600: #475569;
  --dbr-slate-700: #334155;
  --dbr-slate-800: #1E293B;
  --dbr-slate-900: #0F172A;
  --dbr-slate-950: #020617;

  /* ========================================
     GRADIENTS
     ======================================== */
  --dbr-gradient-brand:  linear-gradient(135deg, #7C3AED 0%, #6D28D9 40%, #5B21B6 100%);
  --dbr-gradient-flame:  linear-gradient(135deg, #7F1D1D 0%, #B91C1C 50%, #C2414A 100%);
  --dbr-gradient-mixed:  linear-gradient(135deg, #7C3AED 0%, #B91C1C 100%);
  --dbr-gradient-subtle: linear-gradient(135deg, #F5F3FF 0%, #FEF2F2 100%);
  --dbr-gradient-dark:   linear-gradient(180deg, #0F172A 0%, #2E1065 100%);

  /* ========================================
     SHADOWS
     ======================================== */
  --dbr-shadow-sm:    0 1px 2px rgba(15,23,42,0.06);
  --dbr-shadow-md:    0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.06);
  --dbr-shadow-lg:    0 10px 15px -3px rgba(15,23,42,0.1), 0 4px 6px -4px rgba(15,23,42,0.06);
  --dbr-shadow-xl:    0 20px 25px -5px rgba(15,23,42,0.1), 0 8px 10px -6px rgba(15,23,42,0.06);
  --dbr-shadow-brand: 0 4px 14px -2px rgba(124,58,237,0.3);

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --dbr-radius-sm:   6px;
  --dbr-radius-md:   8px;
  --dbr-radius-lg:   12px;
  --dbr-radius-xl:   16px;
  --dbr-radius-full: 9999px;

  /* ========================================
     CHART SERIES COLORS
     ======================================== */
  --dbr-chart-1: #7C3AED;
  --dbr-chart-2: #B91C1C;
  --dbr-chart-3: #10B981;
  --dbr-chart-4: #F59E0B;
  --dbr-chart-5: #EF4444;
  --dbr-chart-6: #06B6D4;
  --dbr-chart-7: #EC4899;
  --dbr-chart-8: #8B5CF6;
  --dbr-chart-9: #14B8A6;
  --dbr-chart-10: #F97316;
}


/* ============================================================
   APEX THEME 42 — Override Mappings
   ============================================================ */

/* --- Header / Navigation --- */
.t-Header {
  background: var(--dbr-slate-900) !important;
}
.t-TreeNav {
  background: var(--dbr-gradient-dark) !important;
}
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content > .a-TreeView-label {
  color: var(--dbr-slate-300) !important;
}
.t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content > .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content:hover > .a-TreeView-label {
  color: #fff !important;
}
.t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content {
  background: rgba(124, 58, 237, 0.2) !important;
  border-left: 3px solid var(--dbr-primary-500) !important;
}

/* --- Buttons --- */
.t-Button--hot,
.a-Button--hot {
  background: var(--dbr-gradient-brand) !important;
  border: none !important;
  box-shadow: var(--dbr-shadow-brand) !important;
  transition: all 0.2s ease !important;
}
.t-Button--hot:hover,
.a-Button--hot:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 20px -2px rgba(124,58,237,0.4) !important;
  transform: translateY(-1px) !important;
}

/* --- Links --- */
.t-Region a:not(.t-Button),
.t-Report a {
  color: var(--dbr-primary-500);
}
.t-Region a:not(.t-Button):hover,
.t-Report a:hover {
  color: var(--dbr-primary-700);
}

/* --- Cards & Regions --- */
.t-Region {
  border-radius: var(--dbr-radius-md) !important;
  box-shadow: var(--dbr-shadow-sm) !important;
  border: 1px solid var(--dbr-slate-200) !important;
}
.t-Region-header {
  border-bottom: 1px solid var(--dbr-slate-200) !important;
}

/* --- Focus States --- */
*:focus-visible {
  outline: 2px solid var(--dbr-primary-300) !important;
  outline-offset: 2px !important;
}

/* --- Body Background --- */
.t-Body-content {
  background: var(--dbr-slate-100) !important;
}

/* --- Page Title --- */
.t-Body-title .t-Breadcrumb-item:last-child .t-Breadcrumb-label {
  color: var(--dbr-slate-900) !important;
  font-weight: 600 !important;
}

/* --- Status Badges --- */
.dbr-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--dbr-radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid;
}
.dbr-badge--draft     { background: var(--dbr-warning-100); color: #92400E; border-color: #FDE68A; }
.dbr-badge--sent      { background: var(--dbr-info-100);    color: #1E40AF; border-color: #BFDBFE; }
.dbr-badge--approved  { background: var(--dbr-primary-100); color: var(--dbr-primary-700); border-color: var(--dbr-primary-200); }
.dbr-badge--paid      { background: var(--dbr-success-100); color: #065F46; border-color: #A7F3D0; }
.dbr-badge--partial   { background: var(--dbr-warning-100); color: #92400E; border-color: #FDE68A; }
.dbr-badge--overdue   { background: var(--dbr-danger-100);  color: #991B1B; border-color: #FECACA; }
.dbr-badge--cancelled { background: var(--dbr-slate-100);   color: var(--dbr-slate-600); border-color: var(--dbr-slate-200); }
.dbr-badge--void      { background: var(--dbr-slate-100);   color: var(--dbr-slate-500); border-color: var(--dbr-slate-300); }
.dbr-badge--active    { background: var(--dbr-success-100); color: #065F46; border-color: #A7F3D0; }
.dbr-badge--inactive  { background: var(--dbr-slate-100);   color: var(--dbr-slate-500); border-color: var(--dbr-slate-300); }
.dbr-badge--pending   { background: var(--dbr-warning-100); color: #92400E; border-color: #FDE68A; }
.dbr-badge--error     { background: var(--dbr-danger-100);  color: #991B1B; border-color: #FECACA; }
.dbr-badge--success   { background: var(--dbr-success-100); color: #065F46; border-color: #A7F3D0; }
.dbr-badge--running   { background: var(--dbr-info-100);    color: #1E40AF; border-color: #BFDBFE; }

/* --- KPI Stat Cards --- */
.dbr-kpi {
  background: #fff;
  border: 1px solid var(--dbr-slate-200);
  border-radius: var(--dbr-radius-lg);
  padding: 20px 24px;
  box-shadow: var(--dbr-shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dbr-kpi:hover {
  box-shadow: var(--dbr-shadow-md);
  transform: translateY(-2px);
}
.dbr-kpi__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dbr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.dbr-kpi__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--dbr-slate-900);
  line-height: 1.2;
}
.dbr-kpi__trend {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}
.dbr-kpi__trend--up   { color: var(--dbr-success-500); }
.dbr-kpi__trend--down { color: var(--dbr-danger-500); }
.dbr-kpi__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--dbr-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background: var(--dbr-gradient-brand);
}

/* --- Invoice Preview --- */
.dbr-invoice-preview {
  background: #fff;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px;
  box-shadow: var(--dbr-shadow-lg);
  border-radius: var(--dbr-radius-lg);
}
.dbr-invoice-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--dbr-slate-200);
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.dbr-invoice-preview__logo {
  height: 48px;
}
.dbr-invoice-preview table th {
  background: var(--dbr-primary-50);
  color: var(--dbr-primary-700);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 10px 12px;
}
.dbr-invoice-preview table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--dbr-slate-200);
}
.dbr-invoice-preview__totals {
  text-align: right;
  margin-top: 16px;
}
.dbr-invoice-preview__total-row {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--dbr-slate-600);
}
.dbr-invoice-preview__total-row--grand {
  font-size: 18px;
  font-weight: 700;
  color: var(--dbr-slate-900);
  border-top: 2px solid var(--dbr-slate-800);
  padding-top: 12px;
  margin-top: 8px;
}

/* ============================================================
   DARK MODE — REMOVED (reverted 2026-06-06)
   The OS-aware prefers-color-scheme dark layer hurt readability
   for users whose OS is in dark mode, so it was removed. The app
   renders light for everyone regardless of OS setting.
   ============================================================ */

/* ===========================================================================
 * DB Realm Inc. brand applied to APEX 26.1 Universal Theme (Iris theme style)
 * Recolors the UT accent/primary to DB Realm violet so nav, hot buttons,
 * links and selection states use the brand colour.
 * =========================================================================== */
:root {
  --ut-palette-primary:            #7C3AED;
  --ut-palette-primary-shade:      #6D28D9;
  --ut-palette-primary-tint:       #A78BFA;
  --ut-palette-primary-contrast:   #FFFFFF;
  --ut-palette-primary-OKLCH:      none;

  --a-base-link-text-color:        #6D28D9;
  --u-primary:                     #7C3AED;
  --u-primary-text:                #FFFFFF;
}

/* ---- Light top header so the DB Realm logo reads clearly (APEX 26.1 Iris) ---- */
.t-Header,
.t-Header-branding {
  background-color: #DDD6FE !important;  /* light DB Realm violet header */
}
.t-Header { border-bottom: 2px solid var(--ut-palette-primary); }
.t-Header .t-Button--header,
.t-Header .t-Button--header .t-Icon,
.t-Header .t-Button-label,
.t-Header .a-MenuBar-item .a-MenuBar-label {
  color: #1E293B !important;
}
.t-Header .t-Button--header:hover { background-color: var(--dbr-primary-50, #F5F3FF) !important; }

/* ── Split (side) login — branded to match dbrealm.ca's dark gradient ───────
   The stock UT Split transform mis-centres our customised login container and
   pushes it off-screen; we neutralise it, left-anchor the form as a white card,
   and fill the page with the dbrealm.ca hero gradient. Scoped to split login. */
body.t-LoginPage--split {
  background: linear-gradient(to bottom right,
              #0F172A 0%, #1A1A2E 55%, #2A1A4A 100%) !important;
  background-attachment: fixed !important;
}
/* flush-left, full-height GREY panel holding the form; gradient fills the rest */
body.t-LoginPage--split .t-Login-container {
  transform: none !important;
  margin: 0 !important;
  width: min(460px, 42vw) !important;
  min-height: 100vh;
  background: #f4f5f8 !important;
  border-right: 1px solid #e2e5ec;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: 44px 0;
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.28);
}
body.t-LoginPage--split .t-Login-region {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 40px !important;
}
/* logo + title hierarchy */
body.t-LoginPage--split .t-Login-logo { margin-bottom: 6px; }
body.t-LoginPage--split .t-Login-title {
  font-size: 20px !important; font-weight: 700 !important; color: #1e1b4b !important;
  letter-spacing: -.01em; margin-bottom: 22px !important;
}
/* form rhythm + crisp inputs */
body.t-LoginPage--split .t-Login-region .t-Form-fieldContainer { margin-bottom: 14px; }
body.t-LoginPage--split .apex-item-text,
body.t-LoginPage--split .apex-item-password {
  height: 44px !important; border-radius: 9px !important;
  border: 1px solid #d3d8e2 !important; background: #fff !important;
}
body.t-LoginPage--split .t-Button--hot { height: 44px; border-radius: 9px; font-weight: 600; }
/* demo switcher reads as a tidy white card block on the grey panel */
body.t-LoginPage--split .demo-switch { margin-top: 18px; border-top: 1px solid #e2e5ec; padding-top: 14px; }
body.t-LoginPage--split .demo-switch__btn { background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }

/* ============================================================
   KPI cards — fin-kpi-grid > fin-kpi > __label(__icon) __value __meta
   Used across dashboards (360, FinOps, Data Quality, Home, Monitoring…).
   Previously undefined → strips rendered as unstyled stacked text.
   ============================================================ */
.fin-kpi-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 10px; }
.fin-kpi {
  flex: 1 1 150px; min-width: 150px; padding: 14px 16px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.fin-kpi__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: #6b7280;
}
.fin-kpi__icon { color: var(--dbr-primary-600, #6d28d9); font-size: 13px; line-height: 1; }
.fin-kpi__value { margin-top: 8px; font-size: 26px; font-weight: 700; line-height: 1.05; color: #1f3864; }
.fin-kpi__meta { margin-top: 3px; font-size: 11px; color: #9ca3af; }