/* ==========================================================================
   ExisOne app theme — Bootstrap 5.3 colour overrides
   Load AFTER bootstrap.min.css and AFTER css/app.css on every app page.
   Matches the marketing site (ivory ground, ink primary, vermilion accent).
   ========================================================================== */

:root {
  /* ---- Brand tokens (same names app.css already uses) ------------------ */
  --eo-bg:            #F5F3EE;   /* page ground            */
  --eo-surface:       #FFFFFF;   /* cards, tables, inputs  */
  --eo-surface-2:     #FAF9F6;   /* table head, hover rows */
  --eo-ink:           #15171B;   /* text + primary buttons */
  --eo-body:          #3E4248;
  --eo-muted:         #5B5F66;
  --eo-line:          #E2DED5;
  --eo-line-strong:   #C9C4B8;
  --eo-dark:          #121418;   /* page header band       */
  --eo-accent:        #C8412A;   /* brand accent — highlights, chart series 1, never "danger" */
  --eo-accent-hover:  #A8341F;
  --eo-accent-soft:   #F7E4DF;

  /* ---- Status (reserved — always with an icon or a word) --------------- */
  --eo-success: #1E6B35;  --eo-success-soft: #E3F1E6;
  --eo-warning: #8A5A00;  --eo-warning-soft: #FBF0D9;
  --eo-danger:  #B42318;  --eo-danger-soft:  #FDE7E4;
  --eo-info:    #2563A8;  --eo-info-soft:    #E4ECF7;
  --eo-neutral-soft: #EEEBE4;

  /* ---- Chart palette (validated: CVD + contrast on white) --------------- */
  --eo-chart-1: #C8412A;  /* vermilion  */
  --eo-chart-2: #2563A8;  /* blue       */
  --eo-chart-3: #B7831A;  /* ochre      */
  --eo-chart-4: #00876A;  /* green      */
  --eo-chart-grid: #EEEBE4;
  --eo-chart-axis: #5B5F66;

  /* ---- Bootstrap 5.3 variable remap ------------------------------------ */
  --bs-body-bg: var(--eo-bg);
  --bs-body-color: var(--eo-ink);
  --bs-secondary-color: var(--eo-muted);
  --bs-tertiary-bg: var(--eo-surface-2);
  --bs-border-color: var(--eo-line);
  --bs-border-color-translucent: rgba(21,23,27,.10);
  --bs-emphasis-color: var(--eo-ink);

  --bs-primary: #15171B;         --bs-primary-rgb: 21,23,27;
  --bs-secondary: #5B5F66;       --bs-secondary-rgb: 91,95,102;
  --bs-success: #1E6B35;         --bs-success-rgb: 30,107,53;
  --bs-warning: #8A5A00;         --bs-warning-rgb: 138,90,0;
  --bs-danger: #B42318;          --bs-danger-rgb: 180,35,24;
  --bs-info: #2563A8;            --bs-info-rgb: 37,99,168;
  --bs-light: #F5F3EE;           --bs-light-rgb: 245,243,238;
  --bs-dark: #121418;            --bs-dark-rgb: 18,20,24;

  --bs-primary-text-emphasis: #15171B;   --bs-primary-bg-subtle: #EEEBE4;   --bs-primary-border-subtle: #C9C4B8;
  --bs-success-text-emphasis: #1E6B35;   --bs-success-bg-subtle: #E3F1E6;   --bs-success-border-subtle: #B9DCC2;
  --bs-warning-text-emphasis: #8A5A00;   --bs-warning-bg-subtle: #FBF0D9;   --bs-warning-border-subtle: #EBCF95;
  --bs-danger-text-emphasis:  #B42318;   --bs-danger-bg-subtle:  #FDE7E4;   --bs-danger-border-subtle:  #F3B8B0;
  --bs-info-text-emphasis:    #2563A8;   --bs-info-bg-subtle:    #E4ECF7;   --bs-info-border-subtle:    #B7CCE8;

  --bs-link-color: #15171B;         --bs-link-color-rgb: 21,23,27;
  --bs-link-hover-color: #A8341F;   --bs-link-hover-color-rgb: 168,52,31;
  --bs-focus-ring-color: rgba(200,65,42,.25);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-card-border-color: var(--eo-line);
}

body { background: var(--eo-bg); color: var(--eo-ink); }

/* ---- Buttons ------------------------------------------------------------ */
.btn-primary {
  --bs-btn-bg: #15171B; --bs-btn-border-color: #15171B; --bs-btn-color: #F5F3EE;
  --bs-btn-hover-bg: #2A2E36; --bs-btn-hover-border-color: #2A2E36; --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: #000000; --bs-btn-active-border-color: #000000;
  --bs-btn-disabled-bg: #8B919B; --bs-btn-disabled-border-color: #8B919B;
  --bs-btn-focus-shadow-rgb: 200,65,42;
}
/* The one brand CTA per screen (e.g. "Upgrade", "Generate key") */
.btn-accent {
  --bs-btn-bg: #C8412A; --bs-btn-border-color: #C8412A; --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #A8341F; --bs-btn-hover-border-color: #A8341F; --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: #8F2C1A; --bs-btn-active-border-color: #8F2C1A;
  --bs-btn-focus-shadow-rgb: 200,65,42;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-dark {
  --bs-btn-color: #15171B; --bs-btn-border-color: #C9C4B8; --bs-btn-bg: #FFFFFF;
  --bs-btn-hover-color: #15171B; --bs-btn-hover-bg: #F5F3EE; --bs-btn-hover-border-color: #15171B;
  --bs-btn-active-color: #15171B; --bs-btn-active-bg: #EEEBE4; --bs-btn-active-border-color: #15171B;
  --bs-btn-focus-shadow-rgb: 200,65,42;
}
.btn-outline-warning {  /* was yellow — now a neutral "secondary action" */
  --bs-btn-color: #8A5A00; --bs-btn-border-color: #EBCF95; --bs-btn-bg: #FFFFFF;
  --bs-btn-hover-color: #8A5A00; --bs-btn-hover-bg: #FBF0D9; --bs-btn-hover-border-color: #8A5A00;
}
.btn-outline-danger {
  --bs-btn-color: #B42318; --bs-btn-border-color: #F3B8B0; --bs-btn-bg: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318;
}
.btn-danger  { --bs-btn-bg: #B42318; --bs-btn-border-color: #B42318; --bs-btn-hover-bg: #921C13; --bs-btn-hover-border-color: #921C13; }
.btn-success { --bs-btn-bg: #1E6B35; --bs-btn-border-color: #1E6B35; --bs-btn-hover-bg: #17542A; --bs-btn-hover-border-color: #17542A; }
.btn-light   { --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #E2DED5; --bs-btn-hover-bg: #F5F3EE; --bs-btn-hover-border-color: #C9C4B8; }

/* Segmented filters (Last 24H / 7 Days / …) */
.btn-check:checked + .btn, .btn.active { background: #15171B; border-color: #15171B; color: #F5F3EE; }

/* ---- Badges — soft fill + dark text instead of solid Bootstrap colours ---- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .35em .7em; }
.badge.bg-success, .badge.text-bg-success { background: var(--eo-success-soft) !important; color: var(--eo-success) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--eo-warning-soft) !important; color: var(--eo-warning) !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: var(--eo-danger-soft)  !important; color: var(--eo-danger)  !important; }
.badge.bg-info,    .badge.text-bg-info,
.badge.bg-primary, .badge.text-bg-primary { background: var(--eo-info-soft)    !important; color: var(--eo-info)    !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light,   .badge.text-bg-light   { background: var(--eo-neutral-soft) !important; color: var(--eo-body)    !important; }
.badge.bg-dark,    .badge.text-bg-dark    { background: #15171B !important; color: #F5F3EE !important; }
/* Product type "API" and similar feature tags (replaces purple) */
.badge-accent { background: var(--eo-accent-soft); color: var(--eo-accent-hover); }

/* ---- Text utilities ------------------------------------------------------ */
.text-primary   { color: #15171B !important; }
.text-info      { color: #2563A8 !important; }
.text-success   { color: #1E6B35 !important; }
.text-warning   { color: #8A5A00 !important; }
.text-danger    { color: #B42318 !important; }
.text-muted, .text-secondary { color: #5B5F66 !important; }
.bg-primary     { background-color: #15171B !important; }
.bg-light       { background-color: #F5F3EE !important; }
.bg-white       { background-color: #FFFFFF !important; }

/* ---- Cards --------------------------------------------------------------- */
.card { --bs-card-bg: #FFFFFF; --bs-card-border-color: var(--eo-line); --bs-card-cap-bg: #FFFFFF; box-shadow: none; }
.card-header { border-bottom-color: var(--eo-line); font-weight: 600; }

/* ---- Tables -------------------------------------------------------------- */
.table {
  --bs-table-bg: #FFFFFF; --bs-table-color: #15171B;
  --bs-table-border-color: #EEEBE4;
  --bs-table-striped-bg: #FAF9F6; --bs-table-hover-bg: #FAF9F6;
}
.table > thead th, .table-light {
  --bs-table-bg: #FAF9F6; color: #5B5F66; font-weight: 500; font-size: .8125rem;
  border-bottom-color: var(--eo-line);
}
.table code, .font-monospace, .key-id { color: #15171B; font-size: .8125rem; }

/* ---- Forms --------------------------------------------------------------- */
.form-control, .form-select {
  border-color: #C9C4B8; background-color: #FFFFFF; color: #15171B;
}
.form-control:focus, .form-select:focus {
  border-color: #15171B; box-shadow: 0 0 0 .2rem rgba(200,65,42,.18);
}
.form-check-input:checked { background-color: #15171B; border-color: #15171B; }
.form-check-input:focus   { border-color: #15171B; box-shadow: 0 0 0 .2rem rgba(200,65,42,.18); }
.form-switch .form-check-input:checked { background-color: #15171B; }

/* ---- Alerts -------------------------------------------------------------- */
.alert-success { --bs-alert-bg: #E3F1E6; --bs-alert-color: #1E6B35; --bs-alert-border-color: #B9DCC2; }
.alert-warning { --bs-alert-bg: #FBF0D9; --bs-alert-color: #6E4800; --bs-alert-border-color: #EBCF95; }
.alert-danger  { --bs-alert-bg: #FDE7E4; --bs-alert-color: #8F1C13; --bs-alert-border-color: #F3B8B0; }
.alert-info, .alert-primary { --bs-alert-bg: #E4ECF7; --bs-alert-color: #1D4E85; --bs-alert-border-color: #B7CCE8; }

/* ---- Nav, tabs, pagination, dropdowns ------------------------------------ */
.nav-link { color: #3E4248; }
.nav-link:hover, .nav-link:focus { color: #15171B; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: #15171B; color: #F5F3EE; }
.nav-tabs { border-bottom-color: var(--eo-line); }
.nav-tabs .nav-link.active { color: #15171B; border-color: var(--eo-line) var(--eo-line) #FFFFFF; font-weight: 600; }
.pagination { --bs-pagination-color: #15171B; --bs-pagination-hover-color: #15171B; --bs-pagination-hover-bg: #F5F3EE;
  --bs-pagination-active-bg: #15171B; --bs-pagination-active-border-color: #15171B; --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(200,65,42,.18); }
.dropdown-menu { --bs-dropdown-border-color: var(--eo-line); --bs-dropdown-link-active-bg: #15171B; }
.modal { --bs-modal-border-color: var(--eo-line); }
.progress { --bs-progress-bar-bg: #C8412A; --bs-progress-bg: #EEEBE4; }

/* ---- App shell ----------------------------------------------------------- */
/* Sidebar & top bar sit on the ivory ground, separated by hairlines. */
.eo-app .sidebar, .eo-sidebar { background: #F5F3EE; border-right: 1px solid var(--eo-line); }
.eo-sidebar a { color: #3E4248; border-radius: 8px; }
.eo-sidebar a:hover { background: #EEEBE4; color: #15171B; }
.eo-sidebar a.active { background: #15171B; color: #F5F3EE; }
/* KPI icon chips: one neutral treatment instead of rainbow pastels */
.stat-icon, .kpi-icon { background: #F5F3EE !important; color: #15171B !important; border: 1px solid var(--eo-line); }
/* Leaflet map markers */
.leaflet-interactive { stroke: #FFFFFF; }