/* ===== Base ===== */
body {
  font-family: 'Cairo', sans-serif;
  background-color: #FFFFFF;
  color: #262626;
  overflow-x: hidden;
}

html[lang="en"] body {
  font-family: 'Inter', sans-serif;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

/* ===== Direction helpers ===== */
.dir-ltr { direction: ltr; }
.dir-rtl { direction: rtl; }

/* ===== Lucide icons defaults ===== */
[data-lucide] {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ===== Custom animations not provided by Tailwind ===== */
@keyframes slideInBottom {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.slide-in-bottom { animation: slideInBottom 0.35s ease-out both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn95 {
  from { transform: scale(.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.animate-modal-in { animation: fadeIn .2s ease-out, zoomIn95 .2s ease-out; }

/* 3D Perspective helpers used by phone mockups */
.perspective-1000 { perspective: 1000px; }
.rotate-y-\[-5deg\] { transform: rotateY(-5deg); }
.rotate-y-\[-12deg\] { transform: rotateY(-12deg); }
.rotate-x-\[5deg\] { transform: rotateX(5deg); }

/* Number ticker font uniformity */
.tracking-tight { letter-spacing: -0.02em; }

/* Hide scrollbars for thumbnail rails */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== Dashboard micro-interactions ===== */
.dashboard-view .bg-white.rounded-2xl,
.branch-view .bg-white.rounded-2xl {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dashboard-view .bg-white.rounded-2xl:hover,
.branch-view .bg-white.rounded-2xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  border-color: #E5E7EB;
}

.dash-nav-btn,
.branch-nav-btn {
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.dash-nav-btn:hover,
.branch-nav-btn:hover {
  transform: translateY(-1px);
}

.dashboard-view button,
.dashboard-view a,
.branch-view button,
.branch-view a {
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.dashboard-view button:active,
.dashboard-view a:active,
.branch-view button:active,
.branch-view a:active {
  transform: translateY(0);
}

#mobileBottomNav button,
#branchMobileBottomNav button {
  transition: color .2s ease, transform .2s ease;
}

#mobileBottomNav button:hover,
#branchMobileBottomNav button:hover {
  transform: translateY(-1px);
}

#addCarPageForm input,
#addCarPageForm select,
#addCarPageForm textarea,
#addCarForm input,
#addCarForm select,
#addCarForm textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#addCarPageForm input:focus,
#addCarPageForm select:focus,
#addCarPageForm textarea:focus,
#addCarForm input:focus,
#addCarForm select:focus,
#addCarForm textarea:focus {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
  outline: none;
}

.pkg-cat-btn {
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.pkg-cat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}