/**
 * Lypisher brand layer
 * -------------------------------------------------------------------------------------
 * Loaded AFTER vendor/css/core.css (Bootstrap 5.3 + Sneat) and re-points the theme's
 * design tokens at the Lypisher palette. Nothing in vendor/ is edited, so the template
 * can be regenerated without losing the brand.
 *
 * Palette source: the compiled custom properties on https://lypisher.africa
 * (--color-brand-*, --color-accent-*) and /icon.svg.
 *
 * Two things to know before editing:
 *
 *  1. Sneat re-declares --bs-primary in a plain `:root` at core.css:7602, which sits
 *     AFTER its own [data-bs-theme=dark] block at core.css:134 and has equal
 *     specificity. So the dark block in THIS file must stay below the :root block, and
 *     every dark value has to be stated explicitly rather than inherited.
 *
 *  2. --bs-base-color is the theme's "ink mixed against paper" token: borders are
 *     color-mix(base 22%, paper), striped rows are rgba(base-rgb, .06), tooltips are
 *     bg:base / color:paper. It must therefore be DARK in light mode and LIGHT in dark
 *     mode. Sneat leaves it dark in both, which is why its dark-mode borders and
 *     striped rows are almost invisible; setting it here fixes that too.
 */

/* Brand scales
******************************************************************************* */
:root {
  --lyp-brand-50: #edfcf7;
  --lyp-brand-100: #d2f7eb;
  --lyp-brand-200: #a6eeda;
  --lyp-brand-300: #6fe0c6;
  --lyp-brand-400: #35c9ac;
  --lyp-brand-500: #14ae96;
  --lyp-brand-600: #0b8276;
  --lyp-brand-700: #0c6960;
  --lyp-brand-800: #0e534d;
  --lyp-brand-900: #10453f;
  --lyp-brand-950: #022e2a;

  --lyp-accent-50: #fff8eb;
  --lyp-accent-200: #fddf8a;
  --lyp-accent-400: #fbb324;
  --lyp-accent-500: #f59e0b;
  --lyp-accent-800: #92400e;
  --lyp-accent-950: #451a03;

  --lyp-ink: #0b1114;

  --lyp-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lyp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The logo's own gradient stops, reused for brand surfaces. */
  --lyp-gradient: linear-gradient(135deg, var(--lyp-brand-500) 0%, var(--lyp-brand-600) 55%, var(--lyp-brand-700) 100%);

  --lyp-ring: 0 0 0 0.1875rem rgba(20, 174, 150, 0.35);
  --lyp-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme
******************************************************************************* */
:root,
[data-bs-theme="light"] {
  /* Semantic roles. Teal primary, brand amber warning, and the red the marketing
     site itself uses. Success is a true green and info a blue so neither can be
     mistaken for the teal primary in a chart legend or a status badge. */
  --bs-primary: #0b8276;
  --bs-primary-rgb: 11, 130, 118;
  --bs-primary-text-emphasis: #0e534d;
  --bs-primary-bg-subtle: #edfcf7;
  --bs-primary-border-subtle: #a6eeda;

  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: #14532d;
  --bs-success-bg-subtle: #f0fdf4;
  --bs-success-border-subtle: #bbf7d0;

  --bs-info: #2563eb;
  --bs-info-rgb: 37, 99, 235;
  --bs-info-text-emphasis: #1e3a8a;
  --bs-info-bg-subtle: #eff6ff;
  --bs-info-border-subtle: #bfdbfe;

  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: #92400e;
  --bs-warning-bg-subtle: #fff8eb;
  --bs-warning-border-subtle: #fddf8a;

  --bs-danger: #ef233c;
  --bs-danger-rgb: 239, 35, 60;
  --bs-danger-text-emphasis: #8c0d1c;
  --bs-danger-bg-subtle: #fef2f3;
  --bs-danger-border-subtle: #fbc5cc;

  --bs-dark: #0b1114;
  --bs-dark-rgb: 11, 17, 20;

  /* Links and focus. core.css bakes these as hexes, so they do not derive. */
  --bs-link-color: #0b8276;
  --bs-link-color-rgb: 11, 130, 118;
  --bs-link-hover-color: #0c6960;
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-focus-ring-color: rgba(20, 174, 150, 0.35);

  /* Surfaces. base-color re-tints every shadow and every color-mix() hover. */
  --bs-base-color: #0b1114;
  --bs-base-color-rgb: 11, 17, 20;
  --bs-body-bg: #f7faf9;
  --bs-body-bg-rgb: 247, 250, 249;
  --bs-paper-bg: #ffffff;
  --bs-paper-bg-rgb: 255, 255, 255;
  --bs-heading-color: #0b1114;
  --bs-body-color: #45555a;
  --bs-body-color-rgb: 69, 85, 90;
  --bs-secondary-color: #6b7b80;
  --bs-border-color: #e2e8f0;
  --bs-border-color-translucent: rgba(11, 17, 20, 0.1);

  /* Typography */
  --bs-font-sans-serif: var(--lyp-font-sans);
  --bs-body-font-family: var(--lyp-font-sans);
  --bs-font-family-base: var(--lyp-font-sans);

  /* Radii, matched to the marketing site's ramp. */
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.625rem;
  --bs-border-radius-xl: 0.75rem;
  --bs-border-radius-xxl: 1rem;
}

/* Dark theme
 * MUST stay below :root - see note 1 at the top of this file.
******************************************************************************* */
[data-bs-theme="dark"] {
  /* brand-500 rather than brand-600: 6.6:1 on the dark card vs 2.4:1 for brand-600. */
  --bs-primary: #14ae96;
  --bs-primary-rgb: 20, 174, 150;
  --bs-primary-text-emphasis: #6fe0c6;
  --bs-primary-bg-subtle: #0c2b28;
  --bs-primary-border-subtle: #0e534d;
  /* White on #14ae96 is only 2.8:1, so filled primary buttons take dark ink instead. */
  --bs-primary-contrast: #022e2a;

  --bs-success: #22c55e;
  --bs-success-rgb: 34, 197, 94;
  --bs-success-text-emphasis: #86efac;
  --bs-success-bg-subtle: #0c2919;
  --bs-success-border-subtle: #166534;
  --bs-success-contrast: #052e16;

  --bs-info: #60a5fa;
  --bs-info-rgb: 96, 165, 250;
  --bs-info-text-emphasis: #bfdbfe;
  --bs-info-bg-subtle: #10203c;
  --bs-info-border-subtle: #1e40af;
  --bs-info-contrast: #0b1b3a;

  --bs-warning: #fbb324;
  --bs-warning-rgb: 251, 179, 36;
  --bs-warning-text-emphasis: #fddf8a;
  --bs-warning-bg-subtle: #33240a;
  --bs-warning-border-subtle: #92400e;
  --bs-warning-contrast: #451a03;

  --bs-danger: #f87a8a;
  --bs-danger-rgb: 248, 122, 138;
  --bs-danger-text-emphasis: #fbc5cc;
  --bs-danger-bg-subtle: #3a1015;
  --bs-danger-border-subtle: #8c0d1c;
  --bs-danger-contrast: #3a1015;

  --bs-dark: #e8eeed;
  --bs-dark-rgb: 232, 238, 237;
  --bs-dark-contrast: #070c0d;

  --bs-link-color: #35c9ac;
  --bs-link-color-rgb: 53, 201, 172;
  --bs-link-hover-color: #6fe0c6;
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-focus-ring-color: rgba(53, 201, 172, 0.4);

  /* Brand dark surfaces: near-black page, raised card. */
  --bs-body-bg: #070c0d;
  --bs-body-bg-rgb: 7, 12, 13;
  --bs-paper-bg: #0f1618;
  --bs-paper-bg-rgb: 15, 22, 24;
  --bs-heading-color: #eef4f3;
  --bs-body-color: #a9b8b5;
  --bs-body-color-rgb: 169, 184, 181;
  --bs-secondary-color: rgba(169, 184, 181, 0.72);
  --bs-border-color: #263033;
  --bs-border-color-translucent: rgba(232, 238, 237, 0.12);

  /* Light ink, so borders/striped rows/tooltips invert correctly - see note 2. */
  --bs-base-color: #e8eeed;
  --bs-base-color-rgb: 232, 238, 237;

  --bs-box-shadow: 0 0.1875rem 0.5rem 0 rgba(0, 0, 0, 0.5);
  --bs-box-shadow-xs: 0 0.0625rem 0.3175rem 0 rgba(0, 0, 0, 0.35);
  --bs-box-shadow-sm: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.4);
  --bs-box-shadow-lg: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.55);
  --bs-box-shadow-xl: 0 0.3125rem 1.375rem 0 rgba(0, 0, 0, 0.6);
  --bs-floating-component-shadow: 0 0.1875rem 0.75rem 0 rgba(0, 0, 0, 0.55);
  --bs-navbar-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Typography
******************************************************************************* */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.app-brand-text,
.lyp-figure {
  font-family: var(--lyp-font-display);
  letter-spacing: -0.015em;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 700;
}

.app-brand-text {
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Tabular figures keep money and counts from shifting as they update. */
.lyp-figure,
.lyp-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Interaction polish
******************************************************************************* */
.card {
  transition: box-shadow var(--lyp-transition), border-color var(--lyp-transition);
}

.lyp-card-interactive {
  cursor: pointer;
}

.lyp-card-interactive:hover {
  box-shadow: var(--bs-box-shadow-lg);
}

.btn {
  transition: background-color var(--lyp-transition), border-color var(--lyp-transition),
    color var(--lyp-transition), box-shadow var(--lyp-transition), transform var(--lyp-transition);
}

.btn:active {
  transform: translateY(1px);
}

.table > tbody > tr {
  transition: background-color var(--lyp-transition);
}

.menu-link,
.dropdown-item {
  transition: background-color var(--lyp-transition), color var(--lyp-transition);
}

/* The active menu item gets the brand gradient rather than a flat fill. */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--lyp-gradient);
  color: #fff!important;
  box-shadow: 0 0.125rem 0.375rem 0 rgba(11, 130, 118, 0.35);
}

[data-bs-theme="dark"] .menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  color: var(--lyp-brand-950);
  box-shadow: none;
}

/* Visible keyboard focus everywhere, not just on Bootstrap's own components. */
:focus-visible {
  outline: none;
  box-shadow: var(--lyp-ring);
  border-radius: var(--bs-border-radius-sm);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.menu-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
  box-shadow: var(--lyp-ring);
}

/* Brand utilities
******************************************************************************* */
.lyp-brand-gradient {
  background: var(--lyp-gradient);
}

.lyp-text-gradient {
  background: var(--lyp-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Tinted icon tile, used for stat cards and empty states. */
.lyp-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bs-border-radius);
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-primary));
  color: var(--bs-primary);
  flex-shrink: 0;
}

.lyp-tile-lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.5rem;
}

.lyp-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Shared skeleton
 * Replaces five per-view copies of this shimmer. Theme-aware via base-color.
******************************************************************************* */
.skeleton-line {
  display: block;
  height: 0.75rem;
  width: 100%;
  border-radius: var(--bs-border-radius-sm);
  background-image: linear-gradient(
    90deg,
    rgba(var(--bs-base-color-rgb), 0.07) 25%,
    rgba(var(--bs-base-color-rgb), 0.14) 37%,
    rgba(var(--bs-base-color-rgb), 0.07) 63%
  );
  background-size: 400% 100%;
  animation: lyp-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line.sk-sm { width: 40%; }
.skeleton-line.sk-md { width: 65%; }

.skeleton-circle {
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
}

@keyframes lyp-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Empty states
******************************************************************************* */
.lyp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.lyp-empty .lyp-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 88%, var(--bs-primary));
  color: var(--bs-primary);
  font-size: 1.75rem;
}

.lyp-empty .lyp-empty-title {
  font-family: var(--lyp-font-display);
  font-weight: 600;
  color: var(--bs-heading-color);
  margin-bottom: 0;
}

.lyp-empty .lyp-empty-body {
  color: var(--bs-secondary-color);
  max-width: 24rem;
  margin-bottom: 0;
}

/* Sortable table headers
 * Replaces the .sortable blocks duplicated in Fleet/Index and UserManagement.
******************************************************************************* */
.table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.table th.sortable:hover {
  color: var(--bs-primary);
}

.table th.sortable .sort-indicator {
  opacity: 0.35;
  transition: opacity var(--lyp-transition);
}

.table th.sortable[aria-sort]:not([aria-sort="none"]) .sort-indicator {
  opacity: 1;
  color: var(--bs-primary);
}

/* ApexCharts in dark mode
 *
 * The chart series themselves need nothing: config.js feeds ApexCharts the literal
 * strings `var(--bs-primary)` etc. (see Helpers.getCssVar), so every fill and stroke
 * re-resolves against the tokens above when the theme flips - no re-render needed.
 *
 * What does not follow is the tooltip chrome, because ApexCharts hardcodes a light
 * palette on .apexcharts-theme-light and we never tell it the mode changed. Grid and
 * axis label colours already come through tokens.
******************************************************************************* */
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark {
  color: var(--bs-body-color);
  background: color-mix(in sRGB, var(--bs-paper-bg) 92%, var(--bs-base-color));
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-floating-component-shadow);
}

[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  color: var(--bs-heading-color);
  background: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-base-color));
  border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
  color: var(--bs-body-color);
  background: color-mix(in sRGB, var(--bs-paper-bg) 92%, var(--bs-base-color));
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:before,
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:after {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .apexcharts-legend-text {
  color: var(--bs-body-color) !important;
}

/* Theme toggle
******************************************************************************* */
.lyp-theme-toggle .lyp-icon-dark {
  display: none;
}

[data-bs-theme="dark"] .lyp-theme-toggle .lyp-icon-dark {
  display: inline-block;
}

[data-bs-theme="dark"] .lyp-theme-toggle .lyp-icon-light {
  display: none;
}

/* Respect reduced-motion for every transition introduced above.
******************************************************************************* */
@media (prefers-reduced-motion: reduce) {
  .card,
  .btn,
  .table > tbody > tr,
  .menu-link,
  .dropdown-item,
  .table th.sortable .sort-indicator {
    transition: none;
  }

  .btn:active {
    transform: none;
  }

  .skeleton-line {
    animation: none;
  }
}