/* ===================================================================
   TechMan – Custom CSS
   (Tailwind handles: sidebar, topbar, hero, auth split-screen, home page)
   This file covers: Bootstrap-page utilities, RTL form tweaks, scrollbar
   =================================================================== */

/* ── Alpine.js cloak ──────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Sidebar slide (mobile only) ──────────────────────────────────── */
/* On mobile the sidebar starts off-screen; Alpine toggles .sidebar-open */
#sidebar {
  transform: translateX(-100%); /* LTR: hidden left */
}
[dir="rtl"] #sidebar {
  transform: translateX(100%);  /* RTL: hidden right */
}
/* When Alpine sets sidebarOpen=true, we add this class via x-bind:class */
#sidebar.sidebar-open {
  transform: translateX(0) !important;
}
/* On desktop (lg+) the sidebar is always visible and static */
@media (min-width: 1024px) {
  #sidebar {
    position: static !important;
    transform: translateX(0) !important;
    z-index: auto !important;
  }
}
:root {
  --primary: #9A0002;
  --radius: 12px;
}

/* ── General ──────────────────────────────────────────────────────── */
a { text-decoration: none; }
.x-small { font-size: 0.72rem; }

/* ── Avatar ───────────────────────────────────────────────────────── */
.avatar-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.2rem;
}

.avatar-circle-sm {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Cards (Bootstrap inner pages) ───────────────────────────────── */
.card { border-radius: var(--radius) !important; }

/* ── Timeline ─────────────────────────────────────────────────────── */
.timeline-list { position: relative; }

.timeline-item {
  display: flex; gap: 1rem;
  padding-bottom: 1.25rem;
  position: relative;
}

.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px; top: 20px; bottom: 0;
  width: 2px;
  background: #e9ecef;
}

.timeline-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ── Status Badges (Bootstrap pages) ─────────────────────────────── */
.bg-success-subtle  { background-color: #d1e7dd !important; }
.bg-warning-subtle  { background-color: #fff3cd !important; }
.bg-danger-subtle   { background-color: #f8d7da !important; }
.bg-info-subtle     { background-color: #cff4fc !important; }
.bg-secondary-subtle { background-color: #e2e3e5 !important; }

/* ── Nav Pills (Bootstrap inner pages) ──────────────────────────── */
.nav-pills .nav-link { color: #6c757d; border-radius: 8px; }
.nav-pills .nav-link.active { background-color: var(--primary); color: #fff; }

/* ── Booking Progress Steps ──────────────────────────────────────── */
.step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #e9ecef;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 0.8rem;
  color: #adb5bd;
}
.step-circle.active { background: var(--primary); color: #fff; }

/* ── Tables (Bootstrap inner pages) ─────────────────────────────── */
.table > :not(caption) > * > * { padding: 0.85rem 0.75rem; }
thead { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #adb5bd; }

/* ── RTL (Arabic) overrides ──────────────────────────────────────── */
[dir="rtl"] body {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  letter-spacing: 0;
}

/* RTL breadcrumb separator */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "\f285";
  font-family: "bootstrap-icons";
}

/* RTL form inputs */
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
  text-align: right;
}

/* RTL input-group icon order */
[dir="rtl"] .input-group > .input-group-text:first-child {
  border-radius: 0 0.375rem 0.375rem 0;
  border-left: 0;
  border-right: 1px solid #dee2e6;
}
[dir="rtl"] .input-group > .form-control:not(:last-child) {
  border-radius: 0.375rem 0 0 0.375rem;
  border-right: 0;
  border-left: 1px solid #dee2e6;
}

/* RTL margin utilities */
[dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; }
[dir="rtl"] .me-auto { margin-right: unset !important; margin-left: auto !important; }