/* ============================================================
   GEM-CAR Brand Override — v1.0
   Per GEM-SUITE Brand Guidelines (V2V Communications, May 2025)

   Primary Palette
   ───────────────────────────────────────────────
   V2V Blue   #2F539D  — buttons, headers
   GEM Red    #F40000  — call-to-action elements
   Deep Black #141415  — text, icons

   Secondary Palette
   ───────────────────────────────────────────────
   Dark Blue    #071A39  — backgrounds, frames (sidebar)
   Accent Yello #FFD700  — highlights (kept for status chips)
   Neutral Gray #A1A7B3  — subdued backgrounds

   Software font: Roboto (Google Fonts)
   ============================================================ */

/* ─── Body Background ────────────────────────────────────────── */
body, html {
  background-image: none;
  background-color: #ededee;
}

/* ─── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Primary → V2V Blue */
  --bs-primary:          #2F539D;
  --bs-primary-rgb:      47, 83, 157;

  /* Dark → Deep Black */
  --bs-dark:             #141415;
  --bs-dark-rgb:         20, 20, 21;

  /* Link */
  --bs-link-color:       #2F539D;
  --bs-link-hover-color: #1e3a70;
  --bs-link-color-rgb:   47, 83, 157;

  /* GEM Red exposed as a custom property for CTA use */
  --gem-red:             #F40000;
  --gem-red-hover:       #c20000;
  --gem-dark-blue:       #071A39;
  --gem-neutral-gray:    #ededee;
}

/* ─── Body / Base Font ───────────────────────────────────────── */
body,
.font-primary,
input, select, textarea, button {
  font-family: 'Roboto', 'Basier Square', Arial, sans-serif !important;
}

/* ─── Primary Buttons (Accent Yellow) ───────────────────────── */
.btn-primary {
  --bs-btn-disabled-color: #141415;
  --bs-btn-disabled-bg: #FFD700;
  --bs-btn-disabled-border-color: #FFD700;
  color: #141415;
  background-color: #FFD700;
  border-color: #FFD700;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #141415;
  background-color: #d4b300;
  border-color: #c4a700;
}

.btn-outline-primary {
  color: #2F539D;
  border-color: #2F539D;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: #fff;
  background-color: #2F539D;
  border-color: #2F539D;
}

/* ─── Add Job button (btn-dark text-primary) ─────────────────── */
.btn-dark.text-primary {
  color: #141415 !important;
  background-color: #FFD700 !important;
  border-color: #FFD700 !important;
}
.btn-dark.text-primary:hover,
.btn-dark.text-primary:focus,
.btn-dark.text-primary:active {
  color: #141415 !important;
  background-color: #d4b300 !important;
  border-color: #c4a700 !important;
}

/* ─── CTA Buttons (GEM Red — explicit class) ─────────────────── */
.btn-cta {
  color: #fff;
  background-color: #F40000;
  border-color: #F40000;
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active {
  color: #fff;
  background-color: #c20000;
  border-color: #b00000;
}

/* ─── Secondary Buttons (Neutral Gray — replaces SC orange) ──── */
.btn-secondary {
  --bs-btn-color: #141415;
  --bs-btn-bg: #A1A7B3;
  --bs-btn-border-color: #A1A7B3;
  --bs-btn-hover-color: #141415;
  --bs-btn-hover-bg: #8a919f;
  --bs-btn-hover-border-color: #8a919f;
  --bs-btn-focus-shadow-rgb: 161, 167, 179;
  --bs-btn-active-color: #141415;
  --bs-btn-active-bg: #8a919f;
  --bs-btn-active-border-color: #8a919f;
  --bs-btn-disabled-color: #141415;
  --bs-btn-disabled-bg: #A1A7B3;
  --bs-btn-disabled-border-color: #A1A7B3;
}

.btn-outline-secondary {
  --bs-btn-color: #141415;
  --bs-btn-border-color: #A1A7B3;
  --bs-btn-hover-color: #141415;
  --bs-btn-hover-bg: #A1A7B3;
  --bs-btn-hover-border-color: #A1A7B3;
  --bs-btn-focus-shadow-rgb: 161, 167, 179;
  --bs-btn-active-color: #141415;
  --bs-btn-active-bg: #A1A7B3;
  --bs-btn-active-border-color: #A1A7B3;
  --bs-btn-disabled-color: #A1A7B3;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #A1A7B3;
}

/* ─── Danger stays GEM Red ────────────────────────────────────── */
.btn-danger {
  background-color: #F40000;
  border-color: #F40000;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #c20000;
  border-color: #b00000;
}

/* ─── Text / BG / Border utilities ──────────────────────────── */
.text-primary  { color: #2F539D !important; }

/* On dark blue panels V2V Blue is unreadable — use Accent Yellow
   (matches the old SC yellow-on-blue contrast, e.g. estimate accordions) */
.bg-blue-900 .text-primary,
.bg-blue-900.text-primary { color: #FFD700 !important; }
.bg-primary    { background-color: #2F539D !important; }
.border-primary { border-color: #2F539D !important; }

/* ─── Dropdown border ────────────────────────────────────────── */
.dropdown-menu { border-color: #2F539D; }

/* ─── Tag badges → primary blue with white text ─────────────── */
.badge.text-bg-light,
.badge.bg-dark.text-primary {
  background-color: #2F539D !important;
  color: #fff !important;
}

/* ─── Nav pills active state (excludes sidebar) ──────────────── */
.nav-pills .nav-link.active:not(.sidebar .nav-link.active),
.nav-pills .show > .nav-link {
  background-color: #2F539D;
  color: #fff;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  background: #071A39;
  background: linear-gradient(175deg, #071A39 0%, #0d2550 100%);
}

/* Sidebar active: no background bar — icon only gets the colour */
.sidebar .nav-link.active {
  background: transparent;
  color: #fff;
}
.sidebar .nav-link.active .nav-link-icon,
.sidebar .nav-item.active .nav-link-icon {
  /* the app marks the <li class="nav-item"> active, the mockup the .nav-link —
     cover both so icons match the mockup */
  color: #5C85D6;
}

/* Collapse-menu active sub-link (was SC yellow) */
.sidebar .nav-item-collapse .nav-link.active {
  color: #5C85D6;
}

/* Collapsed sidebar (3.5rem, overflow:hidden) crops the horizontal logo —
   that crop was tuned to the SC logomark. Swap to the square GEM-CAR mark. */
.sidebar.closed .logo-wrapper .logo {
  content: url("../favicon-gem-car.png");
  width: 1.75rem;
  height: auto;
  margin-left: 0;
}

/* ─── Login page left panel → GEM Dark Blue (matches sidebar) ── */
.col.bg-dark.min-vh-100 {
  background: linear-gradient(175deg, #071A39 0%, #0d2550 100%) !important;
}

/* ─── Top Navbar ─────────────────────────────────────────────── */
.navbar {
  background-color: #fff;
}

/* Replace the stock header mask with the full-color GEM-CAR artwork. */
.header-logo {
  -webkit-mask: none;
  mask: none;
  background: url('../images/logos/gem-car.svg') center / contain no-repeat;
}

/* ─── Focus rings ────────────────────────────────────────────── */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: #2F539D;
  box-shadow: 0 0 0 0.1rem rgba(47, 83, 157, 0.4);
}

/* ─── Modal search / admin border ────────────────────────────── */
.modal-dialog.border-primary { border-color: #2F539D !important; }

/* ─── Splash/loader logo ─────────────────────────────────────── */
/* The DevExpress SplashScreen emits .loading-image{width:46px;height:30px},
   sized for the SC icon's aspect; the square GEM-CAR logo skews in it.
   Extra specificity needed — the component's own <style> loads later. */
.loading-image-wrapper .loading-image {
  width: 46px;
  height: auto;
}

/* ─── Scrollbar accent ───────────────────────────────────────── */
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal {
  background-color: #b0b3b8;
}