/*
 * Quidpal theme: remaps CoreUI's --cui-* variables to the Quidpal Design System
 * (amber primary, mint-teal secondary, warm charcoal / warm paper surfaces, Poppins).
 * Loaded after style.css and before custom.css. Edit colours here, not in style.css.
 *
 * Rules from the design system:
 *  - Text on a solid brand/status fill is near-black (#171513), never white.
 *  - Amber is never used as text on a light surface; links there use deep amber (#8f5400).
 *  - Hover/active shades are not tokenised by the design system; they are derived below
 *    with color-mix() from the fill.
 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* ---------- Light theme (default) ---------- */
:root,
[data-coreui-theme=light] {
  --cui-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;

  --cui-primary: #f5a623;
  --cui-secondary: #14b8a6;
  --cui-success: #22a559;
  --cui-info: #3b82d6;
  --cui-warning: #f5c518;
  --cui-danger: #e5484d;
  --cui-light: #efebe4;
  --cui-dark: #38342f;
  --cui-primary-rgb: 245, 166, 35;
  --cui-secondary-rgb: 20, 184, 166;
  --cui-success-rgb: 34, 165, 89;
  --cui-info-rgb: 59, 130, 214;
  --cui-warning-rgb: 245, 197, 24;
  --cui-danger-rgb: 229, 72, 77;
  --cui-light-rgb: 239, 235, 228;
  --cui-dark-rgb: 56, 52, 47;

  --cui-primary-text-emphasis: #6b4100;
  --cui-secondary-text-emphasis: #0b5c52;
  --cui-success-text-emphasis: #14532d;
  --cui-info-text-emphasis: #12447a;
  --cui-warning-text-emphasis: #5c4500;
  --cui-danger-text-emphasis: #7a1a1d;
  --cui-light-text-emphasis: #38342f;
  --cui-dark-text-emphasis: #38342f;
  --cui-primary-bg-subtle: #fce7c4;
  --cui-secondary-bg-subtle: #def5f3;
  --cui-success-bg-subtle: #e0f2e8;
  --cui-info-bg-subtle: #e4eef9;
  --cui-warning-bg-subtle: #fef7df;
  --cui-danger-bg-subtle: #fbe5e6;
  --cui-light-bg-subtle: #f6f3ee;
  --cui-dark-bg-subtle: #efebe4;
  --cui-primary-border-subtle: #f8bf61;
  --cui-secondary-border-subtle: #95dfd7;
  --cui-success-border-subtle: #9cd6b4;
  --cui-info-border-subtle: #a7c7ed;
  --cui-warning-border-subtle: #fae597;
  --cui-danger-border-subtle: #f3adaf;
  --cui-light-border-subtle: #e0dad0;
  --cui-dark-border-subtle: #e0dad0;

  --cui-body-color: #211f1c;
  --cui-body-color-rgb: 33, 31, 28;
  --cui-body-bg: #ffffff;
  --cui-body-bg-rgb: 255, 255, 255;
  --cui-emphasis-color: #14110e;
  --cui-emphasis-color-rgb: 20, 17, 14;
  --cui-secondary-color: #5c564d;
  --cui-secondary-color-rgb: 92, 86, 77;
  --cui-secondary-bg: #efebe4;
  --cui-secondary-bg-rgb: 239, 235, 228;
  --cui-tertiary-color: #8a8378;
  --cui-tertiary-color-rgb: 138, 131, 120;
  --cui-tertiary-bg: #faf8f4;
  --cui-tertiary-bg-rgb: 250, 248, 244;

  --cui-link-color: #8f5400;
  --cui-link-color-rgb: 143, 84, 0;
  --cui-link-hover-color: #5c3800;
  --cui-link-hover-color-rgb: 92, 56, 0;
  --cui-code-color: #a8235f;
  --cui-highlight-bg: #fff1c2;
  --cui-border-color: #e0dad0;
  --cui-border-color-translucent: rgba(33, 31, 28, 0.18);
  --cui-focus-ring-color: #a15f00;
  --cui-form-valid-color: #15803d;
  --cui-form-valid-border-color: #15803d;
  --cui-form-invalid-color: #b42318;
  --cui-form-invalid-border-color: #b42318;

  /* Categorical chart series, assign in order (no Chart.js on a page uses these yet). */
  --qp-chart-1: #bd8708;
  --qp-chart-2: #16a09b;
  --qp-chart-3: #8c399e;
  --qp-chart-4: #0aa0d2;
  --qp-chart-5: #c7436d;
  --qp-chart-6: #5550c0;
}

/* ---------- Dark theme ---------- */
[data-coreui-theme=dark],
.sidebar-dark {
  --cui-primary: #f5a623;
  --cui-primary-rgb: 245, 166, 35;
  --cui-secondary: #5eead4;
  --cui-success: #4ade80;
  --cui-info: #60a5fa;
  --cui-warning: #facc15;
  --cui-danger: #f87171;
  --cui-secondary-rgb: 94, 234, 212;
  --cui-success-rgb: 74, 222, 128;
  --cui-info-rgb: 96, 165, 250;
  --cui-warning-rgb: 250, 204, 21;
  --cui-danger-rgb: 248, 113, 113;
  --cui-light: #efebe4;
  --cui-dark: #38342f;
  --cui-light-rgb: 239, 235, 228;
  --cui-dark-rgb: 56, 52, 47;
  --cui-high-emphasis: #f0ede8;
  --cui-medium-emphasis: #a8a196;
  --cui-disabled: #6f6a63;
  --cui-highlight-color: #f0ede8;

  --cui-primary-text-emphasis: #ffc25c;
  --cui-secondary-text-emphasis: #99f6e4;
  --cui-success-text-emphasis: #86efac;
  --cui-info-text-emphasis: #9ccbf7;
  --cui-warning-text-emphasis: #f8d96a;
  --cui-danger-text-emphasis: #f9a3a3;
  --cui-light-text-emphasis: #f0ede8;
  --cui-dark-text-emphasis: #c4beb3;
  --cui-primary-bg-subtle: #43351d;
  --cui-secondary-bg-subtle: #2b3f39;
  --cui-success-bg-subtle: #283e2c;
  --cui-info-bg-subtle: #2b3440;
  --cui-warning-bg-subtle: #443b1b;
  --cui-danger-bg-subtle: #432c2a;
  --cui-light-bg-subtle: #38342f;
  --cui-dark-bg-subtle: #2d2a26;
  --cui-primary-border-subtle: #76551f;
  --cui-secondary-border-subtle: #397066;
  --cui-success-border-subtle: #316b44;
  --cui-info-border-subtle: #3a5575;
  --cui-warning-border-subtle: #786419;
  --cui-danger-border-subtle: #77403e;
  --cui-light-border-subtle: #57514a;
  --cui-dark-border-subtle: #57514a;

  --cui-body-color: #f0ede8;
  --cui-body-color-rgb: 240, 237, 232;
  --cui-body-bg: #211f1c;
  --cui-body-bg-rgb: 33, 31, 28;
  --cui-emphasis-color: #ffffff;
  --cui-emphasis-color-rgb: 255, 255, 255;
  --cui-secondary-color: #a8a196;
  --cui-secondary-color-rgb: 168, 161, 150;
  --cui-secondary-bg: #2d2a26;
  --cui-secondary-bg-rgb: 45, 42, 38;
  --cui-tertiary-color: #6f6a63;
  --cui-tertiary-color-rgb: 111, 106, 99;
  --cui-tertiary-bg: #171513;
  --cui-tertiary-bg-rgb: 23, 21, 19;

  --cui-link-color: #f5a623;
  --cui-link-color-rgb: 245, 166, 35;
  --cui-link-hover-color: #ffc25c;
  --cui-link-hover-color-rgb: 255, 194, 92;
  --cui-code-color: #f0a6c8;
  --cui-highlight-bg: #5c4500;
  --cui-border-color: #38342f;
  --cui-border-color-translucent: rgba(255, 255, 255, 0.12);
  --cui-focus-ring-color: #f5a623;
  --cui-form-valid-color: #4ade80;
  --cui-form-valid-border-color: #4ade80;
  --cui-form-invalid-color: #f26d6d;
  --cui-form-invalid-border-color: #f26d6d;

  --qp-chart-2: #18a7a1;
  --qp-chart-3: #a54fb0;
  --qp-chart-5: #ce4a72;
  --qp-chart-6: #5f5dce;
}

/* ---------- Solid buttons: near-black label on every fill ---------- */
:root .btn-primary,
:root .btn-secondary,
:root .btn-success,
:root .btn-info,
:root .btn-warning,
:root .btn-danger {
  --cui-btn-color: #171513;
  --cui-btn-hover-color: #171513;
  --cui-btn-active-color: #171513;
  --cui-btn-disabled-color: #171513;
}

:root .btn-primary { --btn-fill: var(--cui-primary); --btn-fill-rgb: var(--cui-primary-rgb); }
:root .btn-secondary { --btn-fill: var(--cui-secondary); --btn-fill-rgb: var(--cui-secondary-rgb); }
:root .btn-success { --btn-fill: var(--cui-success); --btn-fill-rgb: var(--cui-success-rgb); }
:root .btn-info { --btn-fill: var(--cui-info); --btn-fill-rgb: var(--cui-info-rgb); }
:root .btn-warning { --btn-fill: var(--cui-warning); --btn-fill-rgb: var(--cui-warning-rgb); }
:root .btn-danger { --btn-fill: var(--cui-danger); --btn-fill-rgb: var(--cui-danger-rgb); }

:root .btn-primary,
:root .btn-secondary,
:root .btn-success,
:root .btn-info,
:root .btn-warning,
:root .btn-danger {
  --cui-btn-bg: var(--btn-fill);
  --cui-btn-border-color: var(--btn-fill);
  --cui-btn-hover-bg: color-mix(in srgb, var(--btn-fill) 88%, #000);
  --cui-btn-hover-border-color: color-mix(in srgb, var(--btn-fill) 82%, #000);
  --cui-btn-active-bg: color-mix(in srgb, var(--btn-fill) 80%, #000);
  --cui-btn-active-border-color: color-mix(in srgb, var(--btn-fill) 74%, #000);
  --cui-btn-focus-shadow-rgb: var(--btn-fill-rgb);
  --cui-btn-disabled-bg: var(--btn-fill);
  --cui-btn-disabled-border-color: var(--btn-fill);
}

/* ---------- Outline buttons: fill-coloured border, readable text, solid on hover ---------- */
:root .btn-outline-primary { --btn-fill: var(--cui-primary); --btn-fill-rgb: var(--cui-primary-rgb); --btn-text: var(--cui-link-color); }
:root .btn-outline-secondary { --btn-fill: var(--cui-secondary); --btn-fill-rgb: var(--cui-secondary-rgb); --btn-text: var(--cui-secondary-text-emphasis); }
:root .btn-outline-success { --btn-fill: var(--cui-success); --btn-fill-rgb: var(--cui-success-rgb); --btn-text: var(--cui-success-text-emphasis); }
:root .btn-outline-info { --btn-fill: var(--cui-info); --btn-fill-rgb: var(--cui-info-rgb); --btn-text: var(--cui-info-text-emphasis); }
:root .btn-outline-warning { --btn-fill: var(--cui-warning); --btn-fill-rgb: var(--cui-warning-rgb); --btn-text: var(--cui-warning-text-emphasis); }
:root .btn-outline-danger { --btn-fill: var(--cui-danger); --btn-fill-rgb: var(--cui-danger-rgb); --btn-text: var(--cui-danger-text-emphasis); }

:root .btn-outline-primary,
:root .btn-outline-secondary,
:root .btn-outline-success,
:root .btn-outline-info,
:root .btn-outline-warning,
:root .btn-outline-danger {
  --cui-btn-color: var(--btn-text);
  --cui-btn-border-color: var(--btn-fill);
  --cui-btn-hover-color: #171513;
  --cui-btn-hover-bg: var(--btn-fill);
  --cui-btn-hover-border-color: var(--btn-fill);
  --cui-btn-active-color: #171513;
  --cui-btn-active-bg: color-mix(in srgb, var(--btn-fill) 88%, #000);
  --cui-btn-active-border-color: color-mix(in srgb, var(--btn-fill) 88%, #000);
  --cui-btn-focus-shadow-rgb: var(--btn-fill-rgb);
  --cui-btn-disabled-color: var(--btn-text);
  --cui-btn-disabled-border-color: var(--btn-fill);
}

/* ---------- Neutral (grey) button: secondary actions next to the one primary ---------- */
:root .btn-neutral {
  --cui-btn-color: var(--cui-body-color);
  --cui-btn-bg: var(--cui-secondary-bg);
  --cui-btn-border-color: var(--cui-border-color);
  --cui-btn-hover-color: var(--cui-emphasis-color);
  --cui-btn-hover-bg: color-mix(in srgb, var(--cui-secondary-bg) 90%, var(--cui-body-color));
  --cui-btn-hover-border-color: color-mix(in srgb, var(--cui-border-color) 80%, var(--cui-body-color));
  --cui-btn-active-color: var(--cui-emphasis-color);
  --cui-btn-active-bg: color-mix(in srgb, var(--cui-secondary-bg) 82%, var(--cui-body-color));
  --cui-btn-active-border-color: color-mix(in srgb, var(--cui-border-color) 70%, var(--cui-body-color));
  --cui-btn-focus-shadow-rgb: var(--cui-body-color-rgb);
  --cui-btn-disabled-color: var(--cui-body-color);
  --cui-btn-disabled-bg: var(--cui-secondary-bg);
  --cui-btn-disabled-border-color: var(--cui-border-color);
}

/* ---------- Ghost buttons ---------- */
:root .btn-ghost-primary { --btn-fill: var(--cui-primary); --btn-fill-rgb: var(--cui-primary-rgb); --btn-text: var(--cui-link-color); }
:root .btn-ghost-secondary { --btn-fill: var(--cui-secondary); --btn-fill-rgb: var(--cui-secondary-rgb); --btn-text: var(--cui-secondary-text-emphasis); }
:root .btn-ghost-success { --btn-fill: var(--cui-success); --btn-fill-rgb: var(--cui-success-rgb); --btn-text: var(--cui-success-text-emphasis); }
:root .btn-ghost-info { --btn-fill: var(--cui-info); --btn-fill-rgb: var(--cui-info-rgb); --btn-text: var(--cui-info-text-emphasis); }
:root .btn-ghost-warning { --btn-fill: var(--cui-warning); --btn-fill-rgb: var(--cui-warning-rgb); --btn-text: var(--cui-warning-text-emphasis); }
:root .btn-ghost-danger { --btn-fill: var(--cui-danger); --btn-fill-rgb: var(--cui-danger-rgb); --btn-text: var(--cui-danger-text-emphasis); }

:root .btn-ghost-primary,
:root .btn-ghost-secondary,
:root .btn-ghost-success,
:root .btn-ghost-info,
:root .btn-ghost-warning,
:root .btn-ghost-danger {
  --cui-btn-color: var(--btn-text);
  --cui-btn-hover-color: #171513;
  --cui-btn-hover-bg: var(--btn-fill);
  --cui-btn-active-color: #171513;
  --cui-btn-active-bg: color-mix(in srgb, var(--btn-fill) 88%, #000);
  --cui-btn-focus-shadow-rgb: var(--btn-fill-rgb);
  --cui-btn-disabled-color: var(--btn-text);
}

/* ---------- Badges and text-bg helpers ---------- */
:root .text-bg-primary { background-color: var(--cui-primary) !important; }
:root .text-bg-secondary { background-color: var(--cui-secondary) !important; }
:root .text-bg-success { background-color: var(--cui-success) !important; }
:root .text-bg-info { background-color: var(--cui-info) !important; }
:root .text-bg-warning { background-color: var(--cui-warning) !important; }
:root .text-bg-danger { background-color: var(--cui-danger) !important; }

:root .text-bg-primary,
:root .text-bg-secondary,
:root .text-bg-success,
:root .text-bg-info,
:root .text-bg-warning,
:root .text-bg-danger,
:root .badge.bg-primary,
:root .badge.bg-secondary,
:root .badge.bg-success,
:root .badge.bg-info,
:root .badge.bg-warning,
:root .badge.bg-danger {
  color: #171513 !important;
}

/* ---------- Active states on amber ---------- */
.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #171513;
}

.form-check-input:checked[type=checkbox] {
  --cui-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23171513' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
  --cui-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23171513'/%3e%3c/svg%3e");
}

/* ---------- Focus ring: solid, 4px ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--cui-focus-ring-color);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cui-focus-ring-color) 45%, transparent);
}

/* ---------- Sidebar navigation ---------- */
.sidebar-nav .nav-link:hover {
  background: var(--cui-secondary-bg);
  color: var(--cui-body-color);
}

.sidebar-nav .nav-link.active {
  background: var(--cui-primary-bg-subtle);
  color: var(--cui-primary-text-emphasis);
}

/* Poppins is wider than the system font; keep tight controls on one line. */
.btn,
.badge {
  white-space: nowrap;
}

/* ---------- Links ---------- */
a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* Icon + label links: flex drops the whitespace between icon and text and `gap`
   replaces it, so the underline spans only the label, not the space before it. */
:root .btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* ---------- Select2 focus (overrides the indigo in custom.css) ---------- */
:root .select2-container--focus .select2-selection--single {
  border-color: var(--cui-focus-ring-color) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cui-focus-ring-color) 45%, transparent) !important;
}

/* ---------- Auth logo: show the variant that matches the theme ---------- */
.auth-logo {
  max-width: 100%;
  height: auto;
}

.auth-logo.logo-on-dark,
[data-coreui-theme=dark] .auth-logo.logo-on-light {
  display: none;
}

[data-coreui-theme=dark] .auth-logo.logo-on-dark {
  display: inline-block;
}