@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

/* ================================================
   RentManager — Premium Design System
   Mobile-First | RTL | Premium Light Theme
   ================================================ */

/* ═══════════════════════════════════════════════════════════
   SweetAlert2 — RentManager Premium Theme
   Modals, Toasts, Icons, Inputs — fully on-brand
   ═══════════════════════════════════════════════════════════ */

/* ── Hide unused internal Swal2 form widgets ─────────────── */
.swal2-checkbox,
.swal2-radio,
.swal2-file,
.swal2-range,
.swal2-select,
.swal2-input-label {
  display: none !important;
}

/* ── Backdrop ─────────────────────────────────────────────── */
.swal2-backdrop-show {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Global: ALL Swal2 popups — white, rounded, Rubik ───────
   Applies even when customClass.popup is not passed.
   toast overrides background + border-radius below.
   ────────────────────────────────────────────────────────── */
.swal2-popup {
  background: #ffffff !important;
  border-radius: var(--radius-xl, 24px) !important;
  font-family: 'Rubik', sans-serif !important;
  direction: rtl !important;
}

/* ── Popup shell (with our customClass) ───────────────────── */
.swal-popup {
  background: var(--bg-card) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14), 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid var(--border) !important;
  padding: 28px 24px 24px !important;
  font-family: 'Rubik', sans-serif !important;
  color: var(--text-primary) !important;
  direction: rtl !important;
  text-align: right !important;

}

/* ── Icon container — colored pill background ─────────────── */
.swal-icon {
  border: none !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--radius-lg) !important;
  margin: 0 auto 16px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Success icon — green pill */
.swal2-icon.swal2-success {
  background: var(--success-bg) !important;
  border-color: rgba(22, 163, 74, 0.25) !important;
}

/* Success checkmark lines (V) — show in brand green */
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--success) !important;
}

/* Success ring overlay — match pill background */
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(22, 163, 74, 0.25) !important;
}

.swal2-icon.swal2-success .swal2-success-fix,
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right {
  background: var(--success-bg) !important;
}

/* Error icon — red pill */
.swal2-icon.swal2-error {
  background: var(--danger-bg) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}

/* Error X lines — show in brand red */
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: var(--danger) !important;
}

/* Warning icon — amber pill */
.swal2-icon.swal2-warning {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

/* Question icon — blue pill */
.swal2-icon.swal2-question {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

/* Info icon — blue pill */
.swal2-icon.swal2-info {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

/* ── Title ────────────────────────────────────────────────── */
.swal-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

/* ── Body text ────────────────────────────────────────────── */
.swal-text {
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  text-align: right !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Actions row ──────────────────────────────────────────── */
.swal-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
}

.swal-actions .btn {
  width: 100% !important;
  margin: 0 !important;
  min-height: 48px !important;
  height: auto !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  letter-spacing: -0.1px !important;
}

/* Confirm button — primary blue */
.swal2-confirm.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.swal2-confirm.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Confirm button — danger red */
.swal2-confirm.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

.swal2-confirm.btn-danger:hover {
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Cancel button — subtle ghost */
.swal2-cancel.btn-secondary {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.swal2-cancel.btn-secondary:hover {
  background: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Close X button */
.swal2-close {
  font-size: 22px !important;
  color: var(--text-muted) !important;
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 1 !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-fast) !important;
}

.swal2-close:hover {
  color: var(--text-primary) !important;
  background: var(--bg-input) !important;
}

/* ── Text input inside Swal (for prompt-style dialogs) ───── */
.swal2-input.input-field,
.swal2-input {
  width: 100% !important;
  margin: 12px 0 0 0 !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 15px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: var(--transition-fast) !important;
}

.swal2-input.input-field:focus,
.swal2-input:focus {
  border-color: var(--primary) !important;
  background: var(--bg-card-solid) !important;
  box-shadow: 0 0 0 3px var(--primary-ring) !important;
  outline: none !important;
}

/* Fix spacing when Swal inputs are inside our custom input groups */
.input-group .swal2-input.input-field,
.input-group .swal2-input {
  margin: 0 !important;
}

/* Fix Select inputs inside Swal (prevent clipping and preserve chevron spacing) */
select.swal2-input.input-field,
select.swal2-input {
  height: auto !important;
  padding-left: 36px !important;
}

/* ── Timer progress bar ───────────────────────────────────── */
.swal2-timer-progress-bar {
  background: var(--primary) !important;
  opacity: 0.35 !important;
  height: 3px !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

/* ── Loading modal dot animation ──────────────────────────── */
@keyframes swalDot {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────
   TOAST — bottom pill, fully on-brand
   ───────────────────────────────────────────────────────────── */

/* Container positioning */
.swal2-container.swal2-bottom,
.swal2-container.swal2-bottom-start,
.swal2-container.swal2-bottom-end {
  bottom: 80px !important;
  /* clear the bottom nav bar */
  padding: 0 16px !important;
  pointer-events: none !important;
  /* CRITICAL: prevent the full-screen container from showing any overlay */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Toast popup pill — white/light (consistent with all other modals) */
.swal2-popup.swal2-toast {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  padding: 10px 18px 10px 14px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  min-height: unset !important;
  height: auto !important;
  width: auto !important;
  max-width: 340px !important;
  margin: 0 auto 4px !important;
  pointer-events: auto !important;
  direction: rtl !important;
  gap: 8px !important;
  /* CRITICAL: force horizontal layout so icon+text are side by side, not stacked */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Toast title */
.swal2-popup.swal2-toast .swal2-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-align: right !important;
}

/* Toast icon — tiny colored dot */
.swal2-popup.swal2-toast .swal2-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  border-width: 2px !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success {
  border-color: #4ade80 !important;
  color: #4ade80 !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  display: none !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background: #4ade80 !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error {
  border-color: #f87171 !important;
  color: #f87171 !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background: #f87171 !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-warning {
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-info {
  border-color: #60a5fa !important;
  color: #60a5fa !important;
}

/* Toast timer bar — must be inside the flex row, so shrink it to a thin bottom line */
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 0 var(--radius-full) var(--radius-full) !important;
  overflow: hidden !important;
  height: 2px !important;
  flex-shrink: 0 !important;
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar {
  background: var(--primary) !important;
  height: 2px !important;
  border-radius: var(--radius-full) !important;
}

/* Toast HTML content area — fill remaining pill space */
.swal2-popup.swal2-toast .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  font-size: 13.5px !important;
  color: var(--text-primary) !important;
}

/* SweetAlert2 — constrain to app width on desktop */
.swal2-popup.swal-popup {
  max-width: 420px !important;
  width: calc(100% - 32px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  /* Allow dropdowns to overflow popup */
}

/* Wide variant for forms with grids */
.swal2-popup.swal-popup.swal-wide {
  max-width: min(480px, calc(100vw - 24px)) !important;
  overflow: visible !important;
  /* Allow dropdowns to overflow popup */
}

/* === CSS Custom Properties === */
:root {
  /* Button text color (used by checklist checkmark pseudo-element) */
  --btn-text: #ffffff;

  /* Brand Colors */
  --primary: #2563eb;
  /* Rich Blue 600 */
  --primary-hover: #1d4ed8;
  /* Blue 700 */
  --primary-light: #dbeafe;
  /* Blue 100 */
  --primary-ring: rgba(37, 99, 235, 0.12);
  --primary-dark: #1e40af;
  --accent: #0f172a;
  /* Slate 900 */
  --accent-light: #334155;

  /* Status Colors */
  --success: #16a34a;
  /* Green 600 */
  --success-bg: #dcfce7;
  /* Green 100 */
  --danger: #dc2626;
  /* Red 600 */
  --danger-bg: #fee2e2;
  /* Red 100 */
  --warning: #d97706;
  /* Amber 600 */
  --warning-bg: #fef3c7;
  /* Amber 100 */
  --orange: #ea580c;
  /* Orange 600 */
  --orange-bg: #ffedd5;
  /* Orange 100 */

  /* Theme (Premium Light) */
  --bg-body: #f8fafc;
  /* Slate 50 */
  --bg-card: #ffffff;
  --bg-card-solid: #ffffff;
  --bg-input: #f1f5f9;
  /* Slate 100 */
  --bg-overlay: rgba(15, 23, 42, 0.4);

  /* Text */
  --text-primary: #0f172a;
  /* Slate 900 */
  --text-secondary: #475569;
  /* Slate 600 */
  --text-muted: #94a3b8;
  /* Slate 400 */

  /* Borders */
  --border: #e2e8f0;
  /* Slate 200 */
  --border-strong: #cbd5e1;
  /* Slate 300 */
  --border-active: #93c5fd;
  /* Blue 300 */

  /* Solid Clean Look */
  --glass-bg: #ffffff;
  --glass-border: #e2e8f0;

  /* Premium Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-premium: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 0 0 3px var(--primary-ring);
  --shadow-fab: 0 6px 20px rgba(37, 99, 235, 0.38), 0 2px 6px rgba(37, 99, 235, 0.20);

  /* Layout */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Card & Input Components === */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-premium);
  border-radius: var(--radius-xl);
}

.input-glass {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: var(--transition-base);
}

.input-glass:focus {
  background: var(--bg-card) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* === Reset & Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

body {
  font-family: 'Rubik', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  direction: rtl;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Custom subtle clean background element */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  z-index: -1;
}

/* === Animations === */
@keyframes ping {

  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* === Offline Banner — replaces inline styles on #offlineBanner === */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--danger);
  color: #fff;
  text-align: center;
  padding: max(8px, env(safe-area-inset-top)) 8px 8px;
  font-size: 13px;
  font-weight: 700;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* === Top-bar icon badge (replaces inline gradient+color on view icons) === */
.top-bar-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

/* === Dashboard logo emoji container (background set dynamically by auth.js) === */
.dash-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

/* === Layout: App Container === */
.app-container {
  width: 100%;
  max-width: 860px;
  margin: 0 auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-body);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
}

/* === Views — CANONICAL DEFINITION === */
/* Entry animation fires automatically when JS sets style.display = 'block' */
@keyframes viewEnterBase {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view {
  display: none;
  flex: 1;
  padding: 16px 16px calc(100px + env(safe-area-inset-bottom));
  animation: viewEnterBase 220ms cubic-bezier(0.4, 0, 0.2, 1);
  overscroll-behavior: contain;
}

/* === LOGIN VIEW === */
.login-view {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.login-logo {
  width: 160px;
  height: 160px;
  margin-bottom: 16px;
  display: block;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  animation: logoPulse 4s ease-in-out infinite;
  transition: transform var(--transition-base);
}

.login-logo:hover {
  transform: scale(1.05);
}

@keyframes logoPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.25));
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.55));
  }
}

.login-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.login-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 40px;
  font-weight: 500;
}

.login-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-premium);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Restrict hover lift to pointer devices — on touch, :hover persists after tap */
@media (hover: hover) {
  .login-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

.login-card .input-group {
  margin-bottom: 16px;
}

/* === Form Elements === */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.input-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  transition: var(--transition-fast);
  outline: none;
  direction: rtl;
}

.input-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.input-field::placeholder {
  color: var(--text-muted);
}

select.input-field {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  padding-left: 36px;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-card-solid);
}

.btn-success {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  color: white;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
  width: auto;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 18px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* === Top Bar === */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin: 0 !important;
  width: 100% !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 250, 252, 0.85);
  /* Matches --bg-body but translucent */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  /* Very subtle border */
  max-width: 100%;
  box-sizing: border-box;
}

.top-bar-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pill:hover:not(.active) {
  border-color: var(--border-active);
  background: var(--primary-light);
  color: var(--primary);
}

/* === Vehicle Cards Layout === */
.vehicle-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 16px;
}

.vehicle-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.vehicle-card::before {
  content: '';
  position: absolute;
  right: auto !important;
  left: 0 !important;
  top: 0;
  bottom: 0;
  width: 4px;
}

.vehicle-card.available::before {
  background: var(--success);
}

.vehicle-card.rented::before {
  background: var(--danger);
}

.vehicle-card.maintenance::before {
  background: var(--warning);
}

.vehicle-card.receiving::before {
  background: var(--warning);
}

.vehicle-card.overdue::before {
  background: var(--danger);
  animation: pulse 2s infinite;
}

.vehicle-card:hover {
  border-color: var(--border-active);
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.vehicle-card:active {
  transform: translateY(0);
}

.vehicle-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.vehicle-card.available .vehicle-icon {
  background: var(--success-bg);
}

.vehicle-card.rented .vehicle-icon {
  background: var(--danger-bg);
}

.vehicle-card.maintenance .vehicle-icon {
  background: var(--warning-bg);
}

.vehicle-info {
  flex: 1;
  min-width: 0;
}

.vehicle-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}

.vehicle-plate {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  direction: ltr;
  text-align: right;
}

.vehicle-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.vehicle-status {
  text-align: left;
  flex-shrink: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

.status-badge.available {
  background: var(--success-bg);
  color: var(--success);
  border-color: rgba(22, 163, 74, 0.2);
}

.status-badge.rented {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.2);
}

.status-badge.maintenance {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(217, 119, 6, 0.2);
}

.status-badge.receiving {
  background: #fff7ed;
  color: #c2410c;
}

.status-badge.overdue {
  background: #fee2e2;
  color: #dc2626;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* === Filter Pills === */
.filter-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.pill {
  flex: 0 0 auto;
  padding: 7px 14px;
  min-height: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-xs);
}

.pill:hover:not(:disabled) {
  border-color: var(--border-active);
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
}

.pill:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-input);
}

/* === Reusable Layout Components === */
.view-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.view-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.stat-card.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* === Skeleton Loader — CANONICAL === */
.skeleton {
  background: var(--bg-input);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shimmer-slide 1.5s ease-in-out infinite;
}
@keyframes shimmer-slide { 100% { transform: translateX(100%); } }

/* === Bottom Navigation (Floating Dock Style) — CANONICAL SINGLE DEFINITION === */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 860px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)) 8px;
  min-height: 64px;
  z-index: 900;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 -8px 24px rgba(0, 0, 0, 0.05);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  flex: 1;
  min-width: 52px;
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active .nav-icon {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  padding: 4px;
  transform: translateY(-2px);
}

.nav-icon {
  font-size: 22px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Add Vehicle Floating Button in Nav — CANONICAL === */
#navAddVehicle {
  position: relative !important;
  top: -18px !important;
  background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-fab) !important;
  padding: 0;
  z-index: 920 !important;
  flex: 0 0 auto !important;
  margin: 0 10px;
  transition: transform var(--transition-spring), box-shadow var(--transition-spring) !important;
}

#navAddVehicle .nav-icon {
  font-size: 24px;
  color: white;
}

#navAddVehicle span:not(.nav-icon) {
  display: none;
}

#navAddVehicle:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.50), 0 4px 10px rgba(37, 99, 235, 0.25) !important;
}

#navAddVehicle:active {
  transform: scale(0.92) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30) !important;
}

/* === Wizard === */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 0 20px;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 0;
}

.wizard-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  transition: var(--transition-base);
  flex-shrink: 0;
}

.wizard-dot.active {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px var(--primary-ring);
}

.wizard-dot.done {
  border-color: var(--success);
  background: var(--success);
  color: white;
}

.wizard-line {
  width: 32px;
  height: 2px;
  background: var(--border);
  transition: var(--transition-base);
}

.wizard-line.done {
  background: var(--success);
}

.wizard-section {
  display: none;
  animation: viewIn 0.3s ease;
}

.wizard-section.active {
  display: block;
}

.wizard-section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.wizard-section-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* === Photo Upload Grid === */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.photo-slot {
  aspect-ratio: 4/3;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-input);
  position: relative;
  overflow: hidden;
}

.photo-slot:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.photo-slot .photo-icon {
  font-size: 28px;
  opacity: 0.5;
}

.photo-slot .photo-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.photo-slot.filled {
  border-style: solid;
  border-color: var(--success);
}

.photo-slot.filled .photo-icon {
  color: var(--success);
  opacity: 1;
}

.photo-slot.filled .photo-label {
  color: var(--success);
}

/* === Checklist === */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.checklist-item:hover {
  border-color: var(--border);
}

.checklist-item.checked {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
  font-size: 12px;
  color: transparent;
}

.checklist-item.checked .check-box {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.checklist-text {
  font-size: 14px;
  font-weight: 500;
}

/* === Signature Canvas === */
.signature-area {
  width: 100%;
  height: 160px;
  background: var(--bg-input);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
  cursor: crosshair;
  position: relative;
}

.signature-area canvas {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* === Gantt Calendar === */
.gantt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.gantt-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gantt-nav button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition-fast);
}

.gantt-nav button:hover {
  background: var(--bg-input);
}

.gantt-date {
  font-size: 15px;
  font-weight: 600;
}

.gantt-days {
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 2px;
}

.gantt-day-header {
  background: var(--bg-card-solid);
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.gantt-day-header:first-child {
  font-size: 12px;
  color: var(--text-primary);
}

.gantt-row {
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  margin-bottom: 1px;
}

.gantt-cell {
  background: var(--bg-card-solid);
  padding: 10px 4px;
  min-height: 42px;
  position: relative;
}

.gantt-vehicle-label {
  font-size: 11px;
  font-weight: 600;
  padding: 10px 8px;
  background: var(--bg-card-solid);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-block {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
}

.gantt-block.rented {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  right: 0;
  left: 0;
}

.gantt-block.maintenance {
  background: linear-gradient(135deg, var(--warning), #d97706);
  right: 0;
  left: 0;
}

/* === Success Modal === */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.modal-card {
  background: var(--bg-card-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  animation: scaleIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 16px;
  background: var(--success-bg);
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modal-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* === Utility === */
.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-secondary);
}

.text-sm {
  font-size: 13px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === View spacing for bottom nav === */
.dashboard-view,
.calendar-view {
  padding-bottom: 80px;
}

/* === Responsive Adjustments === */
@media (min-width: 481px) {
  .app-container {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

@media (min-width: 640px) {

  /* 2-column grid for dashboard cards and vehicle grid on wider screens */
  .vehicle-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Swal popups stay reasonably sized */
  .swal2-popup.swal-popup {
    max-width: 480px !important;
  }
}

/* ═══════════════════════════════════════════════
   PHASE 1 ADDITIONS — Production App Shell Styles
   ═══════════════════════════════════════════════ */

/* --- Login Tabs --- */
.tab-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-btn.active {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

/* --- Login Panel --- */
.login-panel {
  width: 100%;
}

/* --- Link Button --- */
.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}

/* --- Status Badges (receiving status) --- */
.status-badge.receiving {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.3);
}

.vehicle-card.receiving {
  border-color: rgba(245, 158, 11, 0.3);
}

/* --- Loading Spinner --- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* --- Storage Alert Banner --- */
#storageAlert.warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-bottom: 2px solid var(--warning);
}

#storageAlert.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-bottom: 2px solid var(--danger);
}

/* --- Stats Row --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 0;
  padding: 16px 16px 4px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.8;
}

#statCardAvailable::before {
  background: var(--success);
}

#statCardRented::before {
  background: var(--danger);
}

#statCardReceiving::before {
  background: var(--warning);
}

#statCardMaintenance::before {
  background: var(--text-muted);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-active);
}

.stat-card.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
  background: var(--bg-card);
}

/* Row wrapper for icon + label */
.stat-card>div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

#statCardAvailable .stat-icon {
  background: var(--success-bg);
  color: var(--success);
}

#statCardRented .stat-icon {
  background: var(--danger-bg);
  color: var(--danger);
}

#statCardReceiving .stat-icon {
  background: var(--warning-bg);
  color: var(--warning);
}

#statCardMaintenance .stat-icon {
  background: var(--bg-input);
  color: var(--text-secondary);
}

.stat-number {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin-top: 4px;
}

.stat-number.green {
  color: var(--success);
}

.stat-number.red {
  color: var(--danger);
}

.stat-number.yellow {
  color: var(--warning);
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 700;
  line-height: 1.2;
}

/* === Search Bar === */
.search-bar {
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  padding: 0 16px;
  transition: var(--transition-fast);
}

.search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.search-icon {
  position: static !important;
  transform: none !important;
  color: var(--text-muted);
  margin-inline-end: 8px;
}

.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════
   PHASE 2 ADDITIONS — Auth & Registration Styles
   ═══════════════════════════════════════════════ */

/* --- Register view card full-width --- */
#registerManagerView .login-card,
#registerWorkerView .login-card {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* --- Business code display (large digit block) --- */
.biz-code-display {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 16px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius-lg);
  border: none;
  text-align: center;
  direction: ltr;
  padding: 12px 0;
}

/* --- Employee list row --- */
.employee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.employee-row:last-child {
  margin-bottom: 0;
}

/* --- Status pill small --- */
.status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.status-pill.active {
  background: var(--success-bg);
  color: var(--success);
}

.status-pill.pending {
  background: var(--warning-bg);
  color: var(--warning);
}

/* ═══════════════════════════════════════════════
   PHASE 3 ADDITIONS — VERTEX Branding + Fleet
   ═══════════════════════════════════════════════ */

/* --- VERTEX Login Logo --- */
.vertex-logo-wrap {
  width: 110px;
  height: 110px;
  margin: 0 auto 14px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(99, 102, 241, 0.25), var(--shadow-lg);
  animation: logoPulse 3s ease-in-out infinite;
}

.vertex-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.vertex-logo-fallback {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.login-app-title {
  font-size: 30px;
  font-weight: 800;
  background: linear-gradient(135deg, #f1f5f9, var(--primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.login-app-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.login-vertex-tag {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-full);
  display: inline-block;
  padding: 3px 12px;
  margin-bottom: 0;
}

.login-vertex-tag strong {
  color: var(--primary-light);
}

/* Vertex Global Footer */
.vertex-footer {
  text-align: center;
  padding: 30px 20px 20px 20px;
  margin-top: auto;
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Fix for mobile browsers ignoring padding-bottom on the last element */
.vertex-footer::after {
  content: "";
  display: block;
  height: calc(85px + env(safe-area-inset-bottom, 0px));
}

.vertex-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.vertex-logo-container {
  display: block;
  cursor: pointer;
}

.vertex-logo-container img {
  height: 64px;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vertex-logo-container:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

.vertex-slogan {
  font-size: 12px;
  color: var(--text-muted) !important;
  /* Force muted color — prevents white-on-light conflict */
  margin-top: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ================================================
   CALENDAR — Gantt Grid
   ================================================ */

/* The grid row = label column + 7 day columns */
.cal-row {
  display: grid;
  grid-template-columns: 120px repeat(7, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.cal-row:last-child {
  border-bottom: none;
}

/* Header row */
.cal-row.cal-header {
  border-bottom: 2px solid var(--border);
}

/* Vehicle label (left/right column — RTL so this is actually the first cell visually on right) */
.cal-vehicle-label {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-inline-end: 2px solid var(--border);
  background: var(--bg-input);
  min-width: 0;
}

.cal-vehicle-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-vehicle-plate {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Each day cell */
.cal-cell {
  padding: 4px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-inline-start: 1px solid var(--border);
  font-size: 11px;
  transition: opacity var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.cal-cell:hover {
  opacity: 0.85;
}

/* Header cells — day name + date */
.cal-header-cell {
  flex-direction: column;
  gap: 1px;
  min-height: 48px;
  background: transparent !important;
}

/* Status cell colors */
.cal-available {
  background: #d1fae5;
}

.cal-rented {
  background: #fee2e2;
}

.cal-maintenance {
  background: #f1f5f9;
}

.cal-receiving {
  background: #fef3c7;
}

.cal-today {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  z-index: 1;
}

/* Renter name inside rented cell */
.cal-renter {
  font-size: 10px;
  font-weight: 600;
  color: var(--danger);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

/* Wrapper scroll on small screens */
.cal-grid-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cal-grid-wrapper>.cal-row,
.cal-grid-wrapper .cal-row {
  min-width: 480px;
}

/* ════════════════════════════════════════════════════════
   ULTIMATE — Modern SaaS (Linear / Vercel style)
   Complete system override
   ════════════════════════════════════════════════════════ */

/* ── 2. BASE ──────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

body::before {
  background: var(--bg-body) !important;
}

.app-container {
  background: var(--bg-body) !important;
  box-shadow: none !important;
}

@media (min-width:481px) {
  .app-container {
    box-shadow: 0 0 0 1px var(--border), 0 8px 32px rgba(0, 0, 0, 0.06) !important;
  }
}


/* ── 4. TOP BAR ───────────────────────────────────────── */
.top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--border) !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 5. APP ICON ──────────────────────────────────────── */
#dashLogoEmoji {
  width: 34px !important;
  height: 34px !important;
  background: #0f172a !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

.top-bar h1,
.top-bar-title h1 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.2px !important;
}

/* ── 6. BOTTOM NAV ────────────────────────────────────── */
/* (consolidated into canonical definition above) */

.nav-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 6px 4px !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  transition: color var(--transition-fast), background var(--transition-fast) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
}

.nav-item.active {
  color: var(--primary) !important;
}

.nav-icon {
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast) !important;
}

.nav-item.active .nav-icon {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  transform: none !important;
}


.stat-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 16px 16px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast) !important;
  position: relative !important;
  overflow: hidden !important;
}

.stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--border-active) !important;
}

.stat-card:active {
  transform: scale(0.97) !important;
  box-shadow: var(--shadow-xs) !important;
}

.stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.stat-card::after {
  display: none !important;
}

#statCardAvailable::before {
  background: var(--success) !important;
}

#statCardRented::before {
  background: var(--danger) !important;
}

#statCardReceiving::before {
  background: var(--orange) !important;
}

#statCardMaintenance::before {
  background: var(--text-muted) !important;
}

#statCardOverdue::before {
  background: var(--danger) !important;
  animation: pulse 2s infinite !important;
}

#statCardOverdue {
  border-color: rgba(220, 38, 38, 0.3) !important;
}

#statCardOverdue .stat-icon {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.stat-card.active {
  border-color: var(--border-active) !important;
  box-shadow: 0 0 0 3px var(--primary-ring), var(--shadow-sm) !important;
}

.stat-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#statCardAvailable .stat-icon {
  background: var(--success-bg) !important;
  color: var(--success) !important;
}

#statCardRented .stat-icon {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

#statCardReceiving .stat-icon {
  background: var(--orange-bg) !important;
  color: var(--orange) !important;
}

#statCardMaintenance .stat-icon {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
}

.stat-number {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  color: var(--text-primary) !important;
}

.stat-number.green {
  color: var(--success) !important;
}

.stat-number.red {
  color: var(--danger) !important;
}

.stat-number.yellow {
  color: var(--warning) !important;
}

.stat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* ── 8. SEARCH BAR ────────────────────────────────────── */
.search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  padding: 0 16px !important;
  height: 44px !important;
  margin: 12px 16px 8px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  position: static !important;
}

.search-bar:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

.search-bar input,
.search-bar .input-field {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
  font-family: 'Rubik', sans-serif !important;
}

.search-icon {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  position: static !important;
  transform: none !important;
}

/* ── 9. FILTER PILLS ──────────────────────────────────── */
.filter-pills {
  padding: 0 16px 12px !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
}


.pill:hover:not(.active) {
  border-color: var(--border-active) !important;
  color: var(--primary) !important;
  background: var(--primary-light) !important;
}

/* ── 10. VEHICLE CARDS ────────────────────────────────── */
.vehicle-grid {
  padding: 4px 16px 0 !important;
  gap: 10px !important;
  grid-template-columns: 1fr !important;
}

.vehicle-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px !important;
  gap: 12px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast) !important;
}

.vehicle-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--border-active) !important;
}

.vehicle-card:active {
  transform: scale(0.97) !important;
  box-shadow: var(--shadow-xs) !important;
}

.vehicle-card::before {
  width: 3px !important;
  border-radius: 2px 0 0 2px !important;
}

.vehicle-card.available::before {
  background: var(--success) !important;
}

.vehicle-card.rented::before {
  background: var(--danger) !important;
}

.vehicle-card.maintenance::before {
  background: var(--warning) !important;
}

.vehicle-card.receiving::before {
  background: var(--orange) !important;
}

.vehicle-card.overdue::before {
  background: var(--danger) !important;
  animation: pulse 2s infinite !important;
}

.vehicle-card.pending_signature::before {
  background: var(--primary) !important;
  animation: pulse 2s infinite !important;
}

.vehicle-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-md) !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.vehicle-card.available .vehicle-icon {
  background: var(--success-bg) !important;
  color: var(--success) !important;
}

.vehicle-card.rented .vehicle-icon {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.vehicle-card.maintenance .vehicle-icon {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
}

.vehicle-card.receiving .vehicle-icon {
  background: var(--orange-bg) !important;
  color: var(--orange) !important;
}

.vehicle-card.pending_signature .vehicle-icon {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* Status badge — pending_signature */
.status-badge.pending_signature {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--border-active) !important;
}

.vehicle-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.1px !important;
  /* BUG-005: truncate long vehicle names instead of wrapping */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.vehicle-plate {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
}

.vehicle-meta {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

/* ── 11. STATUS BADGES ────────────────────────────────── */
.status-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: 0.2px !important;
  border: 1px solid transparent !important;
}

.status-badge.available {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  border-color: rgba(22, 163, 74, 0.2) !important;
}

.status-badge.rented {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}

.status-badge.maintenance {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}

.status-badge.receiving {
  background: var(--orange-bg) !important;
  color: var(--orange) !important;
  border-color: rgba(234, 88, 12, 0.2) !important;
}

.status-badge.overdue {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  animation: pulse 2s infinite !important;
}

/* ── 12. CARDS ────────────────────────────────────────── */
.glass-card,
.login-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
}

/* ── 13. SECTION TITLE ────────────────────────────────── */
.section-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── 14. BUTTONS ──────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(160deg, var(--primary-hover) 0%, var(--primary-dark) 100%) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.40) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

.btn-secondary {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-input) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.btn-sm {
  padding: 7px 14px !important;
  font-size: 13px !important;
  border-radius: var(--radius-md) !important;
  height: 34px !important;
}

.btn-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  font-size: 16px !important;
}

.top-bar .btn-icon {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}

.top-bar .btn-icon:hover {
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* ── 15. INPUT FIELDS ─────────────────────────────────── */
.input-field {
  background: var(--bg-input) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-family: 'Rubik', sans-serif !important;
  padding: 10px 14px !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast) !important;
  width: 100% !important;
}

.input-field:focus {
  background: var(--bg-card) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 1px 4px rgba(37, 99, 235, 0.10) !important;
  outline: none !important;
}

.input-field::placeholder {
  color: #b0bec5 !important;
}

.input-glass {
  background: var(--bg-input) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: none !important;
}

.input-glass:focus {
  background: var(--bg-card) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

/* Scoped label rule — was global (broke flex labels like s3-confirm-label) */
.input-group label,
.s1-field .s1-label,
.input-glass + label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.input-group {
  margin-bottom: 16px !important;
}

/* ── 16. TABS ─────────────────────────────────────────── */
.tab-btn {
  flex: 1 !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  font-family: 'Rubik', sans-serif !important;
}

.tab-btn.active {
  background: var(--primary) !important;
  color: white !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important;
}

.tabs-container {
  display: flex !important;
  gap: 2px !important;
  padding: 4px !important;
  background: var(--bg-input) !important;
  border-radius: var(--radius-full) !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--border) !important;
}

/* ── 17. BIZ CODE ─────────────────────────────────────── */
.biz-code-display {
  font-size: 40px !important;
  font-weight: 900 !important;
  letter-spacing: 16px !important;
  color: var(--primary) !important;
  background: var(--primary-light) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 12px !important;
  margin: 10px 0 18px !important;
  text-align: center !important;
  direction: ltr !important;
}

/* ── 18. EMPLOYEE ROWS ────────────────────────────────── */
/* BUG-006: truncate long worker names so status pill + delete btn stay reachable */
.employee-row .employee-name {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.employee-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 8px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--transition-fast) !important;
}

.employee-row:hover {
  border-color: var(--border-strong) !important;
}

.employee-row:last-child {
  margin-bottom: 0 !important;
}

.status-pill {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: 0.3px !important;
}

.status-pill.active {
  background: var(--success-bg) !important;
  color: var(--success) !important;
}

.status-pill.pending {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
}

/* ── 19. WIZARD ───────────────────────────────────────── */
.wizard-dot {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.wizard-dot.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--primary-ring) !important;
}

.wizard-dot.done {
  background: var(--success) !important;
  border-color: var(--success) !important;
}

.wizard-line {
  width: 32px !important;
}

.wizard-line.done {
  background: var(--success) !important;
}

/* ── 20. PHOTO SLOTS ──────────────────────────────────── */
.photo-slot {
  border: 2px dashed var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-input) !important;
  transition: border-color var(--transition-fast), background var(--transition-fast) !important;
}

.photo-slot:hover {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
}

.photo-slot.filled {
  border-style: solid !important;
  border-color: var(--success) !important;
  background: var(--success-bg) !important;
}

/* ── 21. CHECKLIST ────────────────────────────────────── */
.checklist-item {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  transition: border-color var(--transition-fast), background var(--transition-fast) !important;
}

.checklist-item:hover {
  border-color: var(--border-strong) !important;
}

.checklist-item.checked {
  border-color: rgba(22, 163, 74, 0.3) !important;
  background: rgba(22, 163, 74, 0.04) !important;
}

.check-box {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  border: 2px solid var(--border-strong) !important;
}

.checklist-item.checked .check-box {
  background: var(--success) !important;
  border-color: var(--success) !important;
}

/* ── 22. PROGRESS BAR ─────────────────────────────────── */
progress {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 8px !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
  background: var(--bg-input) !important;
  display: block !important;
  overflow: hidden !important;
}

progress::-webkit-progress-bar {
  background: var(--bg-input);
  border-radius: var(--radius-full);
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  border-radius: var(--radius-full);
}

progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  border-radius: var(--radius-full);
}

/* ── 23. CALENDAR ─────────────────────────────────────── */
.cal-row {
  grid-template-columns: 110px repeat(7, 1fr) !important;
}

.cal-vehicle-label {
  background: #f8fafc !important;
  border-inline-end: 1px solid var(--border) !important;
}

.cal-vehicle-name {
  font-size: 11px !important;
  font-weight: 600 !important;
}

.cal-vehicle-plate {
  font-size: 10px !important;
}

.cal-available {
  background: #f0fdf4 !important;
}

.cal-rented {
  background: #fef2f2 !important;
}

.cal-maintenance {
  background: #f8fafc !important;
}

.cal-receiving {
  background: #fff7ed !important;
}

.cal-today {
  outline: 2px solid var(--primary) !important;
  outline-offset: -2px !important;
  z-index: 1 !important;
}

.cal-renter {
  font-size: 11px !important; /* BUG-008: was 9px — illegible on mobile */
  font-weight: 700 !important;
  color: var(--danger) !important;
}

.cal-header-cell {
  background: #f8fafc !important;
}

/* ── 24. MODAL ────────────────────────────────────────── */
.modal-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border) !important;
}

/* ── 25. MISC ─────────────────────────────────────────── */
.empty-state-icon {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

.vertex-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg-body) !important;
}

.vertex-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  color: var(--text-muted) !important;
}

.skeleton-block {
  background: linear-gradient(90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
  flex-shrink: 0 !important;
}

.skeleton-card {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

#storageAlert.warning {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
  border-bottom: 2px solid var(--warning) !important;
}

#storageAlert.danger {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-bottom: 2px solid var(--danger) !important;
}

.login-logo {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.login-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}

.vertex-logo-wrap {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.dashboard-view,
.calendar-view {
  padding-bottom: 100px !important;
}

#adminContent {
  padding: 16px 16px 0 !important;
}

#storageContent {
  padding: 16px 16px 0 !important;
}

#adminView .top-bar,
#storageView .top-bar {
  margin-bottom: 0 !important;
}

.signature-area {
  border: 2px dashed var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-input) !important;
}

.gantt-day-header {
  background: var(--bg-body) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.gantt-vehicle-label {
  font-weight: 600 !important;
  font-size: 11px !important;
  background: var(--bg-body) !important;
}

.gantt-cell {
  background: var(--bg-card) !important;
}

.section-title i {
  font-size: 13px !important;
}

/* ── SECTION HEADER (fleet label, etc.) ──────────────── */
.section-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 16px 16px 8px;
}

/* ── DASHBOARD VIEW fixes ─────────────────────────────── */
#dashboardView {
  background: var(--bg-body);
}

/* ── VIEW ANIMATION — consolidated into canonical viewEnterBase above ──── */

/* ── TOP-BAR ACTIONS right-side ───────────────────────── */
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── STORAGE ALERT padding fix ────────────────────────── */
#storageAlert {
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ── VEHICLE GRID single-column on mobile ─────────────── */
@media (max-width: 480px) {
  .vehicle-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CHECKLIST TEXT ───────────────────────────────────── */
.checklist-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* ── LOGIN PANEL centering ────────────────────────────── */
.login-view {
  background: var(--bg-body) !important;
}

/* ── WIZARD SECTION TITLE ─────────────────────────────── */
.wizard-section-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.2px !important;
}

.wizard-section-desc {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}

/* ── SECTION DIVIDER ──────────────────────────────────── */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* ── CALENDAR FILTER BAR ──────────────────────────────── */
#calendarContainer .search-bar {
  margin: 0 0 8px 0 !important;
}

/* ── TICKET VIEW wrapper padding ──────────────────────── */

/* ── TIMELINE CARDS ───────────────────────────────────── */
.timeline-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.timeline-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.timeline-card:active {
  transform: translateY(0) !important;
}

/* ── UI INTERACTIONS & TOUCH STANDARDS ────────────────── */
/* 1. Haptic Feedback on active buttons */
.btn:active,
.nav-item:active,
.pill:active,
.tab-btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}

/* 2. Typographic Hierarchy */
.top-bar-title h1,
.view-title,
h1,
h2 {
  letter-spacing: -0.5px !important;
}

.stat-number,
.biz-code-display,
.cal-vehicle-plate {
  font-weight: 900 !important;
}

.vertex-label,
.stat-label,
.section-header {
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

/* 3. Swal popup — centered with proper sizing (no aggressive bottom-sheet) */
.swal2-container.swal2-center>.swal2-popup:not(.swal2-toast) {
  margin: auto !important;
  border-radius: var(--radius-xl) !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  transform-origin: center center !important;
}

.swal2-container.swal2-center:not(.swal2-noanimation) {
  padding: 16px !important;
  align-items: center !important;
}

/* 4. Touch Targets Minimum 44x44px */
.btn,
.nav-item,
.pill,
.checklist-item {
  min-height: 44px !important;
  justify-content: center !important;
}

/* ── ADMIN BUTTONS row ────────────────────────────────── */
.btn+.btn {
  margin-right: 0;
}

/* ── Whatsapp button green ────────────────────────────── */
a.btn[href*="wa.me"] {
  background: #25d366 !important;
  color: white !important;
  border: 1px solid #1db954 !important;
  box-shadow: 0 1px 4px rgba(37, 211, 102, 0.25) !important;
}

a.btn[href*="wa.me"]:hover {
  background: #1db954 !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35) !important;
}

/* ── CRITICAL FIXES ───────────────────────────────────── */

/* Top bar: reset the negative-margin hack */
.top-bar {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}

/* Vehicle card status strip: LEFT side (RTL = visual left) */
.vehicle-card::before {
  right: auto !important;
  left: 0 !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
}


/* Nav items: bigger touch targets */
.nav-item {
  padding: 8px 6px 4px !important;
  min-width: 52px !important;
}

.nav-icon {
  font-size: 22px !important;
  height: 30px !important;
}

/* Bottom nav height — consolidated into canonical definition */

/* Dashboard view: reset view padding-top */
#dashboardView.view {
  padding-top: 0 !important;
}

/* Checklist items — min touch target 48px */
.checklist-item {
  min-height: 48px !important;
}

/* Vehicle grid — single column on mobile */
.vehicle-grid {
  grid-template-columns: 1fr !important;
}

/* ═══════════════════════════════════════════════════════════
   BUGFIX PATCH — Modal Closing / Pointer-Events / Mobile-First
   ═══════════════════════════════════════════════════════════ */

/* ── FIX 1: pointer-events on non-toast bottom popups ───── */
/* The .swal2-container.swal2-bottom has pointer-events:none (line 242)
   which was designed for toasts only. Non-toast popups (vehicle sheet)
   inherit pointer-events:none → buttons inside can't be clicked.
   Fix: restore pointer-events on ALL swal popups inside bottom containers */
.swal2-container.swal2-bottom>.swal2-popup,
.swal2-container.swal2-bottom-start>.swal2-popup,
.swal2-container.swal2-bottom-end>.swal2-popup {
  pointer-events: auto !important;
}

/* ── FIX 2: z-index hierarchy — unified scale ────────────── */
/* Scale: top-bar=100, modal-overlay=1050, swal=1060(default),
          bottom-nav=900, offline=9999, busy-overlay=10000 */
.modal-overlay {
  z-index: 1050 !important;
}

/* ── FIX 3: modal-card max-width overflow on 360px phones ── */
.modal-card {
  max-width: calc(100vw - 48px) !important;
}

/* ── FIX 4: login-card overflow on narrow viewports ──────── */
.login-card {
  max-width: min(380px, calc(100vw - 48px)) !important;
}

/* ── FIX 5: smooth close animation for centered popups ─────── */
.swal2-container.swal2-center>.swal2-popup.swal2-hide {
  animation: swalFadeOut 0.2s ease-in forwards !important;
}

@keyframes swalFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ── FIX 6: gantt calendar mobile scroll wrapper ─────────── */
.gantt-days,
.gantt-row {
  min-width: 480px;
}

#calendarContainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── FIX 7: touch-action for instant taps (no 300ms delay) ─ */
.btn,
.nav-item,
.pill,
.tab-btn,
.checklist-item,
.vehicle-card,
.stat-card,
.photo-slot,
.btn-link,
.swal2-confirm,
.swal2-cancel,
.swal2-close {
  touch-action: manipulation;
}

/* ── FIX 8: safe-area-inset-top for top-bar + offline banner  */
.top-bar {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
}

/* ── FIX 9: photo-slot aspect-ratio less aggressive on mobile */
@media (max-width: 380px) {
  .photo-slot {
    aspect-ratio: 3/2 !important;
  }

  .stats-row {
    gap: 8px !important;
  }

  .stat-number {
    font-size: 26px !important;
  }

  .wizard-dot {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  .wizard-line {
    width: 24px !important;
  }
}

/* ── FIX 10: landscape orientation handling ───────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .signature-area {
    height: 100px !important;
  }

  .login-logo {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }

  .login-title {
    font-size: 22px !important;
  }
}

/* ── FIX 12: ensure all Swal popups get rounded corners ──── */
/* Some Swal.fire calls don't include the swal-popup customClass */
.swal2-popup {
  border-radius: var(--radius-xl) !important;
}

/* ── FIX 11: tablet breakpoint (601-900px) ────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .vehicle-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   SMART HIERARCHY LAYOUT — Alert Bars + Status Chips
   ════════════════════════════════════════════════════════════ */

/* ── Alert Bars (urgent, conditional) ── */
.alert-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.alert-bar:active {
  filter: brightness(0.95);
}

.alert-bar-danger {
  background: #fef2f2;
  color: #b91c1c;
}

.alert-bar-primary {
  background: #eff6ff;
  color: #1d4ed8;
}

.alert-bar-warning {
  background: #fffbeb;
  color: #b45309;
}

.alert-bar-text {
  flex: 1;
}

.alert-bar-count {
  font-size: 18px;
  font-weight: 800;
  min-width: 28px;
  text-align: center;
  line-height: 1;
}

.alert-bar-arrow {
  font-size: 11px;
  opacity: 0.5;
}

/* ── Status Chips Row ── */
.status-chips-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 10px 16px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.status-chips-row::-webkit-scrollbar {
  display: none;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.status-chip:hover {
  border-color: var(--border-active);
  color: var(--primary);
  background: var(--primary-light);
}

.status-chip.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.status-chip-label {
  font-size: 12px;
}

.status-chip-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

.status-chip-count.green {
  color: var(--success);
}

.status-chip-count.red {
  color: var(--danger);
}

.status-chip-count.yellow {
  color: var(--warning);
}

.status-chip-all {
  color: var(--text-muted);
}

.status-chip-all.active {
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════
   Checkout Step 1 — 3-Card Wizard Layout
   ═══════════════════════════════════════════════════════════ */

/* Outer wrapper — vertical stack of cards */
.s1-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 0 80px;
}

/* Card shell */
.s1-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* Card header row — icon + title/sub */
.s1-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Colored icon bubble */
.s1-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.s1-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.s1-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Field: label + input-wrap */
.s1-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.s1-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* "Optional" tag inside label */
.s1-opt {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg-surface, #f8fafc);
  padding: 1px 6px;
  border-radius: 10px;
  margin-right: 4px;
}

/* Vertical spacing between consecutive fields inside a card */
.s1-card .s1-field+.s1-field,
.s1-card .s1-row+.s1-field,
.s1-card .s1-field+.s1-row {
  margin-top: 12px;
}

/* Two-column row for paired fields */
.s1-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;  /* Issue-2: align inputs at bottom edge */
}

/* M2-A: Stack fields vertically on very narrow screens (<360px) */
@media (max-width: 360px) {
  .s1-row {
    flex-wrap: wrap;
  }
  .s1-row .s1-field {
    flex: 1 1 100% !important;
  }
}

/* Input wrapper — relative so icon can float inside */
.s1-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Icon inside input — positioned on the right (RTL) */
.s1-input-icon {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

/* The actual input / select */
.s1-input {
  width: 100%;
  height: 44px;          /* M2-B: 44px meets Apple HIG tap target */
  padding: 0 36px 0 12px;
  /* right padding for icon */
  border: 1.5px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--bg-surface, #f8fafc);
  font-family: 'Rubik', sans-serif;
  font-size: 16px;       /* M2-B: 16px prevents iOS Safari auto-zoom */
  font-weight: 500;
  color: var(--text-primary);
  direction: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.s1-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring, rgba(59, 130, 246, 0.15));
  background: #fff;
}

.s1-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

/* select arrow fix */
.s1-input-wrap select.s1-input {
  cursor: pointer;
  padding-left: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
}

/* Required asterisk */
.s1-field .req,
.s1-license-block .req {
  color: var(--danger, #ef4444);
}

/* ── Driver License block — sub-section with border ── */
.s1-license-block {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-surface, #f8fafc);
  border: 1px dashed var(--border);
  border-radius: var(--radius, 10px);
}

.s1-license-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.s1-license-icon {
  font-size: 14px;
  color: var(--primary);
}

/* ── Fuel slider block ── */
.s1-fuel-block {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-surface, #f8fafc);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
}

.s1-fuel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.s1-fuel-val {
  font-size: 18px;
  font-weight: 800;
  transition: color 0.2s;
  min-width: 48px;
  text-align: left;
}

/* Track container — holds the colored bar + range input stacked */
.s1-fuel-track-wrap {
  position: relative;
  height: 36px;
  margin-bottom: 4px;
}

/* Visual progress bar */
.s1-fuel-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 12px;
  background: var(--border);
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
}

.s1-fuel-fill {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  border-radius: 8px;
  transition: width 0.1s, background 0.2s;
}

/* Tick marks on top of the track */
.s1-fuel-ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 2px;
  pointer-events: none;
}

.s1-fuel-ticks span {
  width: 1.5px;
  height: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Transparent range input sits on top so it's draggable */
.s1-fuel-range {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

/* Labels below the track */
.s1-fuel-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  padding: 0 2px;
}

/* ── Nav row — Cancel + Next buttons ── */
.s1-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.s1-btn-cancel {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-base);
}

.s1-btn-cancel:hover {
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
}

.s1-btn-next {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius, 10px);
  background: var(--primary);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-base);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.s1-btn-next:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.s1-btn-next:active {
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════
   Checkout Step 2 — Photo Upload
   ═══════════════════════════════════════════════════════════ */

/* Dashed upload hint zone */
.s2-zone {
  text-align: center;
  padding: 20px 16px;
  background: var(--bg-surface, #f8fafc);
  border: 1.5px dashed var(--border-active);
  border-radius: var(--radius, 10px);
  margin-bottom: 14px;
}

.s2-zone-icon {
  font-size: 30px;
  color: #ea580c;
  margin-bottom: 8px;
  display: block;
}

.s2-zone-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.s2-zone-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Camera / Gallery button row */
.s2-btn-row {
  display: flex;
  gap: 10px;
}

.s2-capture-btn {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.s2-capture-btn:hover {
  border-color: #ea580c;
  color: #ea580c;
  background: #fff7ed;
}

.s2-capture-btn-alt:hover {
  border-color: #16a34a;
  color: #16a34a;
  background: #f0fdf4;
}

/* Photo grid */
.s2-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 70px;
  padding: 4px 0;
}

/* Empty state inside grid */
.s2-empty-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 10px;
  background: var(--bg-surface, #f8fafc);
  border: 1px dashed var(--border-active);
  border-radius: var(--radius, 10px);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  gap: 4px;
}

/* Individual thumbnail */
.s2-photo-thumb {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 10px;
  overflow: visible;
  flex-shrink: 0;
}

.s2-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  display: block;
}

.s2-photo-del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 28px;   /* BUG-003: increased from 22px for better visibility */
  height: 28px;
  background: var(--danger, #ef4444);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 1;
  transition: transform 0.15s;
}

/* BUG-003: invisible tap-target expander → effective touch area ≥ 48×48px */
.s2-photo-del::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.s2-photo-del:hover {
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════
   Checkout Step 3 — Summary & Contract
   ═══════════════════════════════════════════════════════════ */

/* Summary data rows */
.s3-rows {
  display: flex;
  flex-direction: column;
}

.s3-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
  gap: 8px;
}

.s3-row-last {
  border-bottom: none;
}

.s3-lbl {
  color: var(--text-secondary);
  font-size: 13px;
  flex-shrink: 0;
}

.s3-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}

/* Days pill badge */
.s3-days-badge {
  background: var(--primary-light, #eff6ff);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

/* Divider line between groups inside a card */
.s3-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* Photo thumbnails row in summary */
.s3-thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.s3-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}

.s3-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient payment card */
.s3-payment-card {
  background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%);
  border-radius: var(--radius-lg, 16px);
  padding: 24px 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
  position: relative;
  overflow: hidden;
}

.s3-payment-bg-icon {
  position: absolute;
  top: -24px;
  right: -24px;
  font-size: 110px;
  opacity: 0.08;
  transform: rotate(-15deg);
  pointer-events: none;
  line-height: 1;
}

.s3-payment-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.s3-payment-amount {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.s3-payment-install {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* Confirm checkbox card */
.s3-confirm-card {
  padding: 14px 16px;
}

.s3-confirm-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}

.s3-confirm-check {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
}

.s3-confirm-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
}

.s3-confirm-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.s3-confirm-text span {
  color: var(--text-muted);
}

.s3-legal-link {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 2px;
}

.s3-legal-link:hover {
  text-decoration: underline;
}

/* Submit button — wider than Next, green tint */
.s1-btn-submit {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius, 10px);
  background: #16a34a;
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-base);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.s1-btn-submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4);
}

.s1-btn-submit:active {
  transform: scale(0.98);
}

.s1-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
   PHASE B ADDITIONS — Bug Fixes & New Features
   ═══════════════════════════════════════════════════════════ */

/* ── Accessories chip selector (checkout step 1) ── */
.acc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.acc-chip:hover {
  border-color: #ea580c;
  color: #ea580c;
  background: rgba(234, 88, 12, 0.06);
}

.acc-chip-selected {
  background: rgba(234, 88, 12, 0.1) !important;
  border-color: #ea580c !important;
  color: #ea580c !important;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}

/* ── s1-row: align fields at bottom so labels of diff heights don't misalign inputs ── */
.s1-row {
  align-items: end !important;
}

/* ══════════════════════════════════════════════════════════
   GANTT CALENDAR
   ══════════════════════════════════════════════════════════ */

.gantt-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-top: 8px;
}

/* Filter bar */
.gantt-filter-bar {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.gantt-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.gantt-search-icon {
  position: absolute;
  right: 12px;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

.gantt-search-input {
  width: 100%;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-input);
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  direction: rtl;
}

.gantt-search-input:focus {
  border-color: var(--primary);
}

.gantt-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.gantt-pill-select {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  appearance: auto;
}

.gantt-pill-select:focus {
  border-color: var(--primary);
}

/* Navigation */
.gantt-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-input);
}

.gantt-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: var(--transition-base);
  flex-shrink: 0;
}

.gantt-nav-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.gantt-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gantt-nav-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.gantt-view-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border-radius: var(--radius-full);
  padding: 3px;
  border: 1px solid var(--border);
}

.gantt-view-tab {
  padding: 3px 12px;
  border-radius: var(--radius-full);
  border: none;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: var(--transition-base);
}

.gantt-view-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* Grid outer — enables horizontal scroll for the date columns */
.gantt-grid-outer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Inner grid container to ensure uniform width between header and rows */
.gantt-grid-inner {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  width: max-content;
}

/* Header row */
.gantt-header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-input);
  border-bottom: 2px solid var(--border);
  min-width: 100%;
}

.gantt-header-vehicle-col {
  font-weight: 800;
  font-size: 12px;
  color: var(--text-secondary);
  justify-content: center;
  border-left: 1px solid var(--border);
}

.gantt-days-header {
  display: flex;
  flex: 1;
  direction: rtl;
  min-width: calc(var(--gantt-days, 7) * var(--gantt-day-w, 44px));
}

.gantt-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  flex: 1;
  min-width: var(--gantt-day-w, 44px);
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.gantt-day-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.gantt-day-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.gantt-day-header.gantt-day-today .gantt-day-num {
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gantt-day-header.gantt-day-weekend {
  background: rgba(0, 0, 0, 0.02);
}

/* Vehicle rows */
.gantt-body {
  background: var(--bg-card);
}

.gantt-row {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  min-height: 48px;
  min-width: 100%;
}

.gantt-row:hover {
  background: rgba(0, 0, 0, 0.015);
}

/* Sticky vehicle label column */
.gantt-vehicle-col {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  flex-shrink: 0;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: sticky;
  right: 0;
  background: var(--bg-card);
  z-index: 5;
  border-left: 1px solid var(--border);
  cursor: pointer;
}

.gantt-row:hover .gantt-vehicle-col {
  background: rgba(37, 99, 235, 0.04);
}

.gantt-vehicle-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gantt-vehicle-info {
  min-width: 0;
  flex: 1;
}

.gantt-vehicle-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: normal;
  word-wrap: break-word;
}

.gantt-vehicle-plate {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  direction: ltr;
  text-align: right;
}

.gantt-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Days area — relative container for booking bars */
.gantt-days-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: calc(var(--gantt-days, 7) * var(--gantt-day-w, 44px));
}

.gantt-days-grid {
  display: flex;
  flex: 1;
  direction: rtl;
}

/* --- Gantt Calendar Status Colors --- */
.cal-bg-available {
  background-color: #D1FAE5 !important;
}

.cal-border-available {
  border: 1px solid #065F46 !important;
  box-sizing: border-box !important;
}

.cal-text-available {
  color: #065F46 !important;
}

.cal-bg-receiving {
  background-color: #FEF3C7 !important;
}

.cal-border-receiving {
  border: 1px solid #92400E !important;
  box-sizing: border-box !important;
}

.cal-text-receiving {
  color: #92400E !important;
}

.cal-bg-maintenance {
  background-color: #F1F5F9 !important;
}

.cal-border-maintenance {
  border: 1px solid #334155 !important;
  box-sizing: border-box !important;
}

.cal-text-maintenance {
  color: #334155 !important;
}

.cal-bg-pending {
  background-color: #E0F2FE !important;
}

.cal-border-pending {
  border: 1.5px dashed #0284C7 !important;
  box-sizing: border-box !important;
}

.cal-text-pending {
  color: #075985 !important;
}

.cal-bg-rented {
  background-color: #DBEAFE !important;
}

.cal-border-rented {
  border: 1px solid #1E3A8A !important;
  box-sizing: border-box !important;
}

.cal-text-rented {
  color: #1E3A8A !important;
}

.gantt-cell {
  flex: 1;
  min-width: var(--gantt-day-w, 44px);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.gantt-cell-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
}

.gantt-cell-text.pending {
  color: var(--text-primary);
}

.gantt-cell-today {
  background: rgba(37, 99, 235, 0.04) !important;
}

.gantt-free-hint {
  font-size: 14px;
  color: var(--border-active);
  opacity: 0.5;
  font-weight: 300;
  user-select: none;
}

.gantt-bars-layer {
  position: absolute;
  inset: 4px 0;
  pointer-events: none;
  direction: rtl;
}

.gantt-bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), #3b82f6);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  pointer-events: auto;
  cursor: pointer;
  transition: filter 0.15s;
  min-width: 12px;
}

.gantt-bar:hover {
  filter: brightness(1.1);
}

.gantt-bar-pending {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(59, 130, 246, 0.4));
  border: 1.5px dashed var(--primary);
  box-shadow: none;
  color: var(--primary);
}

.gantt-bar-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.gantt-bar-pending .gantt-bar-avatar {
  background: rgba(37, 99, 235, 0.15);
}

.gantt-bar-name {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  direction: ltr;
  text-align: left;
}

.gantt-bar-dates {
  font-size: 11px; /* BUG-008: was 9px — illegible on mobile */
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stats strip */
.gantt-stats-strip {
  display: flex;
  justify-content: space-around;
  padding: 12px 16px;
  background: var(--bg-input);
  border-top: 1px solid var(--border);
}

.gantt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.gantt-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.gantt-stat-lbl {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}

/* Legend */
.gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}

.gantt-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.gantt-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}


/* ── Swal2 html-container: global overflow protection (BUG-005 Task 2) ──────
   Emails, contract IDs, and UUIDs inside any Swal dialog must wrap on ALL
   screen sizes, not only on mobile. */
.swal2-html-container {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ── Swal2 input width fix — prevent overflow in 2-col grids inside modals ── */
.swal2-popup .swal2-input,
.swal2-popup input.input-field.swal2-input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.swal2-popup [style*="grid-template-columns:1fr 1fr"] .input-group input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── Fix action buttons in swal grid containers — ensure text never overflows ── */
/* When the fleet.js actions area renders a 2-col grid, buttons inside must not clip text */
.swal2-popup .btn {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: clamp(13px, 4vw, 15px) !important;
  min-height: 44px !important;
  height: auto !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
}

.swal2-popup .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.swal2-popup .action-buttons .btn {
  flex: 1 1 calc(50% - 10px);
  margin: 0 !important;
}

/* swal-actions-gap and swal-actions-col variants used in fleet.js & checkout.js */
.swal-actions-gap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
}

.swal-actions-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
}

/* Fix text alignment for inputs forced to LTR in RTL contexts (e.g. phones, IDs, License Plates) */
/* Scoped to form inputs only — was a broad [dir="ltr"] selector that could affect SVGs and icons */
input[dir="ltr"],
select[dir="ltr"],
textarea[dir="ltr"] {
  text-align: right;
}

/* ── DRY-04 / Worker UI Guard ────────────────────────────────────────────────
   When body has class "role-worker", ALL manager-only elements are hidden with
   !important so no JS inline-style assignment can accidentally reveal them.
   Applied by _toggleManagerUI() in auth.js immediately after login/session-restore.
   ─────────────────────────────────────────────────────────────────────────── */
body.role-worker #adminBtn,
body.role-worker #navAdmin,
body.role-worker #navAddVehicle,
body.role-worker #navCalendar,
body.role-worker #navTickets,
body.role-worker #statCardMaintAlert,
body.role-worker .admin-topbar-btn,
body.role-worker #adminView {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ── Print Styles ────────────────────────────────────────────────────────────
   Hides the browser's URL/date header+footer, forces exact color reproduction,
   and removes non-printable chrome (navbar, buttons, overlays).
   ─────────────────────────────────────────────────────────────────────────── */
/* ── Detail Meta Grid (checkin / contract summary cards) ──────────────────── */
.detail-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.detail-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

.detail-meta-item:last-child {
    border-bottom: none;
}

.detail-meta-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    flex-shrink: 0;
}

.detail-meta-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 700;
    text-align: left;
    word-break: break-word;
}

/* ── Print Styles ────────────────────────────────────────────────────────────
   Hides the browser's URL/date header+footer, forces exact color reproduction,
   and removes non-printable chrome (navbar, buttons, overlays).
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
    /* Page margins: generous bottom for signature space; avoids printer unprintable zone */
    @page { margin: 1.5cm 1.5cm 2cm 1.5cm; }

    /* Body margin: 0 — page margins handle all spacing */
    body { margin: 0; }

    /* Force background colors and exact UI styling to print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Hide non-printable elements */
    .navbar, .btn, .no-print, #loadingOverlay, #loadingView {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE POLISH — iOS Safari + Android Chrome (360–390px)
   Applied last so these rules win without !important clutter elsewhere.
   ══════════════════════════════════════════════════════════════════════════════

   1. iOS AUTO-ZOOM PREVENTION
      Safari zooms into any input whose font-size < 16px.
      Force all form controls to 16px on mobile.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Prevent iOS auto-zoom on focus ─────────────────────────────────────── */
  input,
  select,
  textarea,
  .input-field,
  .s1-input,
  .swal2-input,
  .swal2-textarea,
  .gantt-search-input, /* BUG-007: class specificity beats bare input selector */
  select.pill {        /* BUG-007: filter dropdowns in fleet/timeline/calendar */
    font-size: 16px !important;
  }

  /* ── Native-app feel: remove tap flash, fast taps, momentum scroll ──────── */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Momentum scroll for all scrollable containers */
  .view,
  .login-card,
  [style*="overflow-x: auto"],
  [style*="overflow-y: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* ── Touch target minimum: 44×44px (iOS HIG) ───────────────────────────── */
  .btn,
  .nav-item,
  .checklist-row,
  button {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* ── Prevent horizontal page scroll from long unbreakable text ──────────── */
  /* Affects emails, IDs, contract refs shown in cards/grids */
  .detail-meta-value,
  .contract-ref,
  td,
  th {
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  /* ── Tables: prevent horizontal overflow, truncate with ellipsis ─────────── */
  table {
    table-layout: fixed;
    width: 100%;
  }

  td, th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0; /* required for text-overflow to work with table-layout:fixed */
  }

  /* ── Flex rows that contain long text (email, phone, IDs) ──────────────── */
  .detail-meta-item,
  .contract-row,
  .vehicle-card-body {
    flex-wrap: wrap;
    min-width: 0;
  }

  .detail-meta-item > *,
  .contract-row > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Input fields: full width, no overflow on narrow screens ────────────── */
  .s1-input,
  .input-field {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Bottom safe-area: ensure FABs / sticky bars clear home indicator ───── */
  .checkout-footer,
  .checkin-footer,
  .s1-footer,
  [class*="footer"] {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* ── SweetAlert modals: full-width on narrow screens ───────────────────── */
  .swal2-popup,
  .swal-popup {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Prevent Swal HTML content from overflowing */
  .swal2-html-container {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* ── Modals / bottom sheets: avoid notch on right/left ─────────────────── */
  .modal,
  .bottom-sheet {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* ── Gantt / calendar: allow horizontal scroll without page overflow ─────── */
  .gantt-grid-outer,
  .cal-grid-wrapper,
  #calendarContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }

  /* ── Vehicle grid: single column on very narrow screens ────────────────── */
  .vehicle-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Stats row: allow wrapping so numbers don't squish ─────────────────── */
  .stats-row {
    flex-wrap: wrap;
  }

  /* ── Contract summary / checkin detail cards: text wraps, no overflow ───── */
  .login-card {
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ── Extra-narrow (360px and below) ─────────────────────────────────────────── */
@media (max-width: 360px) {
  .wizard-step-bar {
    gap: 4px !important;
  }

  .s1-card-title {
    font-size: 14px !important;
  }

  .top-bar-title {
    font-size: 15px !important;
  }
}

/* ========================================================================= */
/* ==================== UI/UX PREMIUM UPGRADE (PHASE A & B) =================*/
/* ========================================================================= */

/* A1. Button Micro-Interactions */
.btn {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary:active, .btn.primary:active {
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

/* A2. Input Focus Ring Polish */
input, textarea, select {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  /* DO NOT change existing background, let original apply */
}

/* A3. Vehicle Status Filter Pills (Horizontal Scroll) */
.filter-tabs, .status-filters, .nav-pills {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}
/* Ensure pill styles apply correctly */
.filter-tabs .btn, .status-filters .btn, .nav-pills .pill {
  border-radius: var(--radius-full) !important;
  padding: 6px 16px !important;
  white-space: nowrap !important;
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.filter-tabs .btn.active, .status-filters .btn.active, .nav-pills .pill.active {
  background: var(--primary) !important;
  color: var(--btn-text) !important;
  border-color: var(--primary) !important;
}
.filter-tabs .btn:active, .status-filters .btn:active, .nav-pills .pill:active {
  transform: scale(0.96) !important;
}

/* A4. Vehicle License Plate Chip */
.plate-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'Rubik', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  direction: ltr;
}

/* A5. Card Hover/Lift Effect */
.vehicle-card, .car-card, .card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.vehicle-card:hover, .vehicle-card:focus-within,
.car-card:hover, .car-card:focus-within,
.card:hover, .card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* A6. iOS Safe Area Bottom Padding */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* A7. Fuel & Mileage Progress Bars */
.progress-bar-wrap {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 400ms ease;
}
.progress-bar-fill.fuel   { background: var(--primary); }
.progress-bar-fill.low    { background: var(--danger); }
.progress-bar-fill.ok     { background: var(--success); }

/* A8. Smooth View Transitions — consolidated into canonical viewEnterBase above */

/* B0. Tactile Touch Feedback */
.btn:active,
.vehicle-card:active,
.pill:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease;
}

/* B1. Login Card Glass Effect */
/* Base: rgba fallback for iOS 15 / browsers without color-mix support */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .login-card, .login-box, #login-box, .auth-box {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(255, 255, 255, 0.88);
  }
}
/* Enhancement: color-mix override for browsers that support it (iOS 16.2+, Chrome 111+) */
@supports (color-mix(in srgb, red 1%, blue)) {
  .login-card, .login-box, #login-box, .auth-box {
    background-color: color-mix(in srgb, var(--bg-card) 88%, transparent);
  }
}

/* B2. Checkout Wizard Step Indicator CSS */
.stepper { margin-bottom: 20px; }
.stepper-track {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.stepper-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width 300ms ease;
}

/* B3. Checklist Custom Radio/Checkbox Styling */
.checklist-item input[type="checkbox"],
.checklist-item input[type="radio"],
.checklist input[type="checkbox"],
.checklist input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  position: relative;
}
.checklist-item input[type="checkbox"]:checked,
.checklist-item input[type="radio"]:checked,
.checklist input[type="checkbox"]:checked,
.checklist input[type="radio"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.checklist-item input[type="checkbox"]:checked::after,
.checklist-item input[type="radio"]:checked::after,
.checklist input[type="checkbox"]:checked::after,
.checklist input[type="radio"]:checked::after {
  content: '\2713';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--btn-text);
  font-size: 13px;
  font-weight: 700;
}

/* ─── Damage Mapper ─────────────────────────────────────────────────────── */

/* Canvas wrapper: clips rounded corners and provides the engineering-grid
   fallback background (visible only before the SVG renders). */
.damage-canvas-wrapper {
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    /* Subtle blueprint grid — shown in the margins around the canvas */
    background-color: #f8fafc;
    background-image:
        linear-gradient(rgba(203,213,225,0.55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(203,213,225,0.55) 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: inset 0 1px 4px rgba(30,41,59,0.05);
}

/* The canvas itself fills the wrapper with no extra gap */
.damage-canvas-wrapper canvas {
    display: block;
}

/* ========================================================================= */
/* 🎨 UX/UI MASTER AUDIT UPGRADES 🎨                                         */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* ── AUTH VIEW & GLOBAL OVERRIDES ─────────────────────── */
/* ------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.04) 0%, transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(225, 29, 72, 0.03) 0%, transparent 50%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.input-field:focus,
.swal2-input:focus,
.input-glass:focus,
select.input-field:focus,
textarea.input-field:focus {
  box-shadow: inset 0 0 0 2px var(--primary-light), 0 4px 12px rgba(37, 99, 235, 0.1) !important;
  border-color: transparent !important;
  outline: none !important;
}

/* ------------------------------------------------------------------------- */
/* ── NAVIGATION MICRO-INTERACTIONS ────────────────────── */
/* ------------------------------------------------------------------------- */
.bottom-nav a {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s;
}
.bottom-nav a.active {
  transform: translateY(-2px);
}
.bottom-nav a.active::before {
  content: '';
  position: absolute;
  inset: -6px -12px;
  background: rgba(37, 99, 235, 0.1); 
  border-radius: 999px;
  z-index: -1;
  animation: navPillPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes navPillPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------------- */
/* ── GANTT CALENDAR STYLES ─────────────────────────────── */
/* ------------------------------------------------------------------------- */
.gantt-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.gantt-grid {
  border-color: #f1f5f9 !important;
}
.gantt-bar.status-active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  border: none !important;
}
.gantt-bar.status-late {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
  border: none !important;
}
.gantt-bar.status-future {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
  border: none !important;
}

/* ------------------------------------------------------------------------- */
/* ── STATUS BADGES & DATA INDICATORS ──────────────────── */
/* ------------------------------------------------------------------------- */
.pill.danger {
  background: rgba(225, 29, 72, 0.1) !important;
  color: #e11d48 !important;
  border: 1px solid rgba(225, 29, 72, 0.2) !important;
}
.pill.success {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}
.pill.warning {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}
.pill.info {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #2563eb !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.empty-icon-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); margin-bottom: 1.5rem;
}
.empty-state h3 { color: var(--text-primary); margin-bottom: 0.5rem; font-weight: 700; }
.empty-state p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 2rem; max-width: 250px; }


/* ------------------------------------------------------------------------- */
/* ── CHECKOUT WIZARD TRANSITIONS ──────────────────────── */
/* ------------------------------------------------------------------------- */
.wizard-overflow-lock {
  overflow: hidden; width: 100%; position: relative;
  background: var(--bg-card);
}
.wizard-slide-track {
  display: flex; width: 300%; 
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.2, 1);
}
.wizard-step-pane {
  width: 33.3333%; flex-shrink: 0; opacity: 0; transition: opacity 0.3s;
  pointer-events: none; visibility: hidden;
}
.wizard-step-pane.active { 
  opacity: 1; pointer-events: auto; visibility: visible;
}

/* Modal Smooth Entrances */
.modal-overlay {
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Ensure it handles iOS momentum scroll overflow well if not locked */
}
.modal-content {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transform: scale(0.95) translateY(10px);
  opacity: 0;
}
.modal-overlay[style*="display: flex"] .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ── Pending Signature State ── */
.vehicle-card.pending_signature {
  border-right: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 3%, var(--bg-card));
}
.status-badge.pending_signature {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

/* ── M2-C: Collapse vehicle detail meta grid to 1 column on narrow Swal popups ── */
@media (max-width: 380px) {
  .detail-meta-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── M2-E: Reduce Gantt calendar label column on narrow screens ── */
@media (max-width: 400px) {
  .cal-row {
    grid-template-columns: 80px repeat(7, 1fr);
  }
}