/* JETT Mobility Platform — Theme Override for Fleetbase Console
 * Injected after main CSS to override Fleetbase default blue theme
 * Brand: JETT | Colors: Black #0A0A0A, Deep Red #DC2626, Accent Red #EF4444
 *
 * REVERSIBLE: Remove this stylesheet link from index.html to revert to Fleetbase default.
 */

:root {
  --jett-black: #0A0A0A;
  --jett-red: #DC2626;
  --jett-red-light: #EF4444;
  --jett-red-dark: #B91C1C;
  --jett-surface: #111111;
  --jett-surface-2: #1A1A1A;
  --jett-border: #2D2D2D;
  --jett-text: #FFFFFF;
  --jett-muted: #9CA3AF;
}

/* ─── Loading Screen ─── */
#boot-loader {
  background: var(--jett-black) !important;
}
#boot-loader > .loader-container > .loading-message {
  color: var(--jett-muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}
/* Replace Fleetbase spinner with JETT pulse */
.fleetbase-loader {
  width: 24px !important;
  height: 24px !important;
  background: var(--jett-red) !important;
  border-radius: 50% !important;
  animation: jett-pulse 1.2s ease-in-out infinite !important;
  border: none !important;
}
.fleetbase-loader::before,
.fleetbase-loader::after {
  display: none !important;
}
@keyframes jett-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* ─── Primary Button Colors (blue → red) ─── */
.bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-sky-500, .bg-sky-600,
.bg-indigo-500, .bg-indigo-600 {
  background-color: var(--jett-red) !important;
}
.hover\:bg-blue-500:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover,
.hover\:bg-sky-500:hover, .hover\:bg-sky-600:hover,
.hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover {
  background-color: var(--jett-red-dark) !important;
}

/* Text accent colors */
.text-blue-500, .text-blue-600, .text-sky-500, .text-sky-600,
.text-indigo-500, .text-indigo-600 {
  color: var(--jett-red) !important;
}
.hover\:text-blue-500:hover, .hover\:text-blue-600:hover,
.hover\:text-sky-500:hover, .hover\:text-sky-600:hover {
  color: var(--jett-red-light) !important;
}

/* Border accent */
.border-blue-500, .border-blue-600, .border-sky-500,
.border-indigo-500, .border-indigo-600 {
  border-color: var(--jett-red) !important;
}

/* Ring/focus accent */
.ring-blue-500, .focus\:ring-blue-500:focus,
.ring-indigo-500, .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--jett-red) !important;
}

/* ─── Sidebar (force dark + JETT treatment) ─── */
body[data-theme=dark] .next-sidebar,
.next-sidebar {
  background-color: var(--jett-black) !important;
  border-right-color: var(--jett-border) !important;
}

/* ─── Login Page ─── */
.console-onboard-container,
.console-auth-container {
  background: linear-gradient(135deg, var(--jett-black) 0%, #1a0000 100%) !important;
}

/* ─── Dark Mode Enhancements ─── */
body[data-theme=dark] {
  --tw-bg-opacity: 1;
}
body[data-theme=dark] .bg-gray-900 {
  background-color: var(--jett-black) !important;
}
body[data-theme=dark] .bg-gray-800 {
  background-color: var(--jett-surface) !important;
}

/* ─── Active Nav Items ─── */
.next-sidebar-item.is-active,
.next-sidebar-item:hover {
  background-color: rgba(220, 38, 38, 0.1) !important;
  border-left-color: var(--jett-red) !important;
}
.next-sidebar-item.is-active .next-sidebar-item-label {
  color: var(--jett-red) !important;
}

/* ─── Badge/Tag overrides ─── */
.bg-blue-100 { background-color: rgba(220, 38, 38, 0.1) !important; }
.text-blue-800, .text-blue-700 { color: var(--jett-red) !important; }

/* ─── Tab active state ─── */
.border-b-2.border-blue-500,
.border-b-2.border-blue-600,
.border-b-2.border-sky-500 {
  border-bottom-color: var(--jett-red) !important;
}

/* ─── Toggle switches ─── */
.bg-blue-600[role="switch"],
[role="switch"].bg-blue-500 {
  background-color: var(--jett-red) !important;
}

/* ─── Dropdown active items ─── */
.bg-blue-50, .hover\:bg-blue-50:hover {
  background-color: rgba(220, 38, 38, 0.05) !important;
}

/* ─── Progress bars ─── */
.bg-blue-500[role="progressbar"],
.bg-blue-600[role="progressbar"] {
  background-color: var(--jett-red) !important;
}

/* ─── Global: Force JETT branding on ALL views/roles ─── */

/* Override org logo area if it shows default Fleetbase avatar */
.next-sidebar-panel-org-logo img[src*="flb-assets"],
.next-sidebar-panel-org-logo img[src*="image-file-icon"] {
  content: url("/images/icon.svg") !important;
  background: #0A0A0A !important;
  border-radius: 8px !important;
  padding: 2px !important;
}

/* Force sidebar dark on ALL views (light mode included) */
.next-sidebar,
.next-sidebar-panel,
.next-sidebar-panel-header {
  background-color: #0A0A0A !important;
  border-color: #2D2D2D !important;
}

/* Force body dark for all users regardless of theme setting */
body {
  background-color: #0A0A0A !important;
}
body:not([data-theme=dark]) {
  color: #FFFFFF !important;
}
body:not([data-theme=dark]) .next-content-panel,
body:not([data-theme=dark]) .next-content-panel-body {
  background-color: #111111 !important;
  color: #FFFFFF !important;
}
body:not([data-theme=dark]) .next-content-panel-header {
  background-color: #0A0A0A !important;
  border-bottom-color: #2D2D2D !important;
  color: #FFFFFF !important;
}

/* Global header/topbar */
.next-content-panel-header,
.console-panel-header {
  background-color: #111111 !important;
  border-bottom-color: #2D2D2D !important;
}

/* Force all text to be readable on dark bg */
body:not([data-theme=dark]) h1,
body:not([data-theme=dark]) h2,
body:not([data-theme=dark]) h3,
body:not([data-theme=dark]) p,
body:not([data-theme=dark]) span,
body:not([data-theme=dark]) label,
body:not([data-theme=dark]) td,
body:not([data-theme=dark]) th {
  color: inherit !important;
}

/* Sidebar items for all users */
.next-sidebar-item {
  color: #D1D5DB !important;
}
.next-sidebar-item:hover {
  background-color: rgba(220, 38, 38, 0.08) !important;
  color: #FFFFFF !important;
}
.next-sidebar-item.is-active {
  background-color: rgba(220, 38, 38, 0.12) !important;
  color: #DC2626 !important;
  border-left: 3px solid #DC2626 !important;
}

/* User dropdown / avatar area */
.next-sidebar-user-button,
.next-sidebar-footer {
  border-top-color: #2D2D2D !important;
}

/* ─── Override Fleetbase default logo/icon loaded from S3 ─── */
/* The top-left org icon comes from company.logo_url which defaults to flb-assets S3 */

/* Hide the original img and replace with JETT icon via CSS background */
img[src*="flb-assets"][src*="image-file-icon"],
img[src*="flb-assets"][src*="default-storefront-backdrop"] {
  visibility: hidden !important;
  position: relative !important;
}
img[src*="flb-assets"][src*="image-file-icon"]::after {
  content: '' !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('/images/icon-402c7816aa1fdbb54fa907d3a3e0ba18.png') center/contain no-repeat !important;
}

/* Alternative approach: directly override with content property on the img */
img[src="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/image-file-icon.png"] {
  content: url('/images/icon-402c7816aa1fdbb54fa907d3a3e0ba18.png') !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  object-fit: contain !important;
}

/* Also catch the shorter S3 URL variant */
img[src*="s3.ap-southeast-1.amazonaws.com/flb-assets/static/image-file-icon"] {
  content: url('/images/icon-402c7816aa1fdbb54fa907d3a3e0ba18.png') !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  object-fit: contain !important;
}

/* Catch via the fallback src attribute pattern used in the ember component */
.w-8.h-8 img[src*="flb-assets"],
.next-sidebar img[src*="flb-assets"],
.console-header img[src*="flb-assets"] {
  content: url('/images/icon-402c7816aa1fdbb54fa907d3a3e0ba18.png') !important;
  border-radius: 6px !important;
}

/* ─── JETT Console Login Page Branding ─── */

/* Login page background - full black with subtle gradient */
.console-onboard,
.console-onboard-container,
.onboard-container,
[class*="onboard"] {
  background: #0A0A0A !important;
  background-image: radial-gradient(ellipse at top right, rgba(220, 38, 38, 0.05) 0%, transparent 50%) !important;
}

/* Login card/form styling */
.console-onboard-form,
.onboard-form,
.auth-form,
[class*="onboard"] form,
[class*="auth"] form {
  background: #111111 !important;
  border: 1px solid #2D2D2D !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* Login heading - hide any "Fleetbase" text and style */
.console-onboard h1,
.console-onboard h2,
.onboard-title,
[class*="onboard"] h1,
[class*="onboard"] h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Login subtext */
.console-onboard p,
[class*="onboard"] p,
[class*="onboard"] .text-muted,
[class*="onboard"] .description {
  color: #9CA3AF !important;
}

/* Login inputs */
.console-onboard input,
[class*="onboard"] input[type="text"],
[class*="onboard"] input[type="email"],
[class*="onboard"] input[type="password"] {
  background: #1A1A1A !important;
  border: 1px solid #2D2D2D !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}
.console-onboard input:focus,
[class*="onboard"] input:focus {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}
.console-onboard input::placeholder,
[class*="onboard"] input::placeholder {
  color: #6B7280 !important;
}

/* Login button */
.console-onboard button[type="submit"],
[class*="onboard"] button[type="submit"],
.btn-primary,
.onboard-btn {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  transition: background 0.2s !important;
}
.console-onboard button[type="submit"]:hover,
[class*="onboard"] button[type="submit"]:hover {
  background: #B91C1C !important;
}

/* Logo on login page - ensure JETT shows */
.console-onboard img[src*="logo"],
[class*="onboard"] img[src*="logo"],
.onboard-logo img {
  max-height: 40px !important;
  filter: none !important;
}

/* Hide any "Powered by Fleetbase" or footer text */
.console-onboard-footer,
[class*="onboard"] footer,
[class*="onboard"] .footer,
.onboard-footer {
  display: none !important;
}

/* Links on login page */
.console-onboard a,
[class*="onboard"] a {
  color: #DC2626 !important;
}
.console-onboard a:hover,
[class*="onboard"] a:hover {
  color: #EF4444 !important;
}