/* ============================================================
   ROGHANYAB PRO – RESPONSIVE CSS  v2.0
   Mobile-first, component-specific, no generic grid hacks.
   Breakpoints: 768px (tablet) | 992px (desktop) | 1200px (large)
   ============================================================ */

/* ── 1. GLOBAL BASE (applies at all sizes) ─────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0; /* prevents flex/grid overflow on all elements */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* RTL-safe scroll containers */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Contact page layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--sp-8);
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

/* Magazine featured post */
.featured-post-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
}


/* ── 2. HEADER ─────────────────────────────────────────────── */
/* Desktop header canonical styles live in header.css.
   Only breakpoint-specific overrides belong here. */

@media (max-width: 480px) {
  .header-inner { padding: 0 var(--sp-3); }
  .header-actions { gap: var(--sp-2); }
  .theme-toggle,
  .header-wishlist { width: 32px; height: 32px; }
}

@media (max-width: 375px) {
  .logo-tag { display: none; }
  .logo-name { font-size: 16px; }
}


/* ── 3. SIDEBAR TOGGLE BUTTON (dashboard mobile) ───────────── */
/* Base: hidden on all sizes — shown only on mobile via @media */
.sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--clr-bg-input);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-bottom: var(--sp-4);
  font-family: inherit;
  width: auto;
}
.sidebar-toggle-btn:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
}
.sidebar-toggle-btn svg { width: 18px; height: 18px; }

/* Overlay behind mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 390;
}
.sidebar-overlay.show { display: block; }


/* ── 4. DASHBOARD LAYOUT ───────────────────────────────────── */

/* Desktop dashboard: the body already reserves the fixed header/admin-bar height.
 * Keep the sidebar anchored to the top of the dashboard layout so it never
 * pushes/overlaps the page header or first row of dashboard content. */
@media (min-width: 992px) {
  .dashboard-layout {
    min-height: calc(100dvh - var(--header-h) - var(--ab-h, 0px));
    align-items: stretch;
  }

  .dashboard-sidebar {
    position: sticky;
    top: 0;
    height: calc(100dvh - var(--header-h) - var(--ab-h, 0px));
    max-height: calc(100dvh - var(--header-h) - var(--ab-h, 0px));
  }

  .dashboard-main {
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
  }
}

@media (max-width: 991px) {
  /* Sidebar becomes a slide-in drawer */
  .dashboard-sidebar {
    position: fixed;
    inset-inline-end: -100%;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    width: min(280px, 90vw);
    z-index: 400;
    box-shadow: none;
    transition: inset-inline-end var(--transition-slow), box-shadow var(--transition-slow);
  }
  .dashboard-sidebar.open {
    inset-inline-end: 0;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
  }

  body.admin-bar .dashboard-sidebar {
    top: calc(var(--header-h) + 32px);
    height: calc(100dvh - var(--header-h) - 32px);
  }

  .sidebar-toggle-btn { display: flex; }
  .sidebar-overlay    { display: none; } /* reset; .show class shows it */

  /* Main content: full width */
  .dashboard-main  { padding: var(--sp-4); }

  /* Grid: single column */
  .dashboard-grid-top    { grid-template-columns: 1fr; gap: var(--sp-3); }
  .dashboard-grid-bottom { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Page header: stack */
  .dashboard-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }
  .dashboard-page-header .btn {
    width: 100%;
    justify-content: center;
  }

  /* Maintenance cards: single column */
  .maintenance-cards-grid { grid-template-columns: 1fr; }

  /* Brand grid in wizard: 4 columns */
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  /* Brand grid: 3 columns */
  .brand-grid { grid-template-columns: repeat(3, 1fr); }

  /* Wizard actions: full width stacked */
  .wizard-actions {
    flex-direction: column-reverse;
    gap: var(--sp-2);
  }
  .wizard-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar .dashboard-sidebar {
    top: calc(var(--header-h) + 46px);
    height: calc(100dvh - var(--header-h) - 46px);
  }
}

@media (min-width: 992px) {
  .sidebar-toggle-btn { display: none; }
  .sidebar-overlay    { display: none; }
}


/* ── 5. VEHICLE LIST (My Vehicles dashboard) ───────────────── */
@media (max-width: 768px) {
  .vehicle-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .vehicle-list-img {
    width: 100%;
    height: 140px;
    border-radius: var(--radius-md);
  }
  .vehicle-list-info { width: 100%; }
  .vehicle-list-meta { gap: var(--sp-3); }
  .vehicle-list-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .vehicle-list-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 80px;
  }
}


/* ── 6. ADD VEHICLE WIZARD ─────────────────────────────────── */
@media (max-width: 768px) {
  .add-vehicle-wizard {
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
    margin: 0;
  }

  /* Steps: scrollable strip */
  .wizard-steps {
    overflow-x: auto;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-5);
    scrollbar-width: none;
  }
  .wizard-steps::-webkit-scrollbar { display: none; }
  .wizard-step  { min-width: 56px; }
  .wizard-label { font-size: 9px; }

  /* Step 4 two-column grid → single column */
  .wizard-grid-2col    { grid-template-columns: 1fr; }
  .wizard-span-2       { grid-column: span 1; }

  /* Brand grid: 3 columns minimum */
  .brand-grid        { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .brand-grid-item   { padding: var(--sp-2); }
  .brand-grid-item img { width: 36px; height: 36px; }
  .brand-grid-item span { font-size: 10px; }

  /* Mileage display */
  .mileage-value-display { font-size: var(--font-size-2xl); }
}

@media (max-width: 375px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-label { display: none; }
}


/* ── 7. ACTIVE VEHICLE CARD ────────────────────────────────── */
@media (max-width: 768px) {
  .active-vehicle-card { padding: var(--sp-4); }

  .vehicle-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    text-align: center;
    overflow-x: visible;
  }

  .vehicle-stat .s-value { font-size: var(--font-size-sm); }
  .vehicle-img-wrap img  { max-height: 80px; }

  .vehicle-change-btn {
    width: 100%;
    justify-content: center;
    margin-top: var(--sp-3);
  }

  /* Stat mini cards */
  .stat-mini-card .value { font-size: var(--font-size-xl); }

  /* Maintenance list items */
  .maintenance-item {
    padding: var(--sp-3) 0;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .maint-progress { width: 100%; flex: none; }
  .maint-icon { width: 28px; height: 28px; }
  .maint-info .name { font-size: var(--font-size-xs); }
  .maint-info .km   { font-size: 10px; }
}

@media (max-width: 375px) {
  .vehicle-stats-row { grid-template-columns: repeat(2, 1fr); }
}


/* ── 8. TABLES ─────────────────────────────────────────────── */
/* Only scroll within dedicated wrappers — not every table globally */
@media (max-width: 768px) {
  .table-wrap,
  .service-history-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--sp-4));
    padding-inline: var(--sp-4);
  }
  .table { min-width: 500px; }

  /* Service schedule: tighten columns for narrow phones */
  .ss-header,
  .ss-row {
    grid-template-columns: 32px 1fr 90px 60px;
    gap: var(--sp-2);
  }
}


/* ── 9. FORMS & BUTTONS ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Prevent iOS auto-zoom on focus */
  .form-control,
  .form-select { font-size: 16px; }

  /* 2-column form grids → single column */
  .form-grid-2     { display: flex; flex-direction: column; }

  /* Service page add-service fields */
  .add-service-fields { grid-template-columns: 1fr; }

  /* Contact page */
  .contact-layout,
  .contact-form-row { grid-template-columns: 1fr; }

  /* Magazine featured post */
  .featured-post-card { grid-template-columns: 1fr; min-height: 0; }

  /* Oil Finder filters grid */
  .oil-finder-grid { grid-template-columns: 1fr; }

  /* Profile fields */
  .profile-fields-grid { grid-template-columns: 1fr; }
}


/* ── 10. PROFILE PAGE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .profile-avatar-col { align-items: center; }
}


/* ── 11. VEHICLE DETAIL PAGE ───────────────────────────────── */
@media (max-width: 991px) {
  /* Hero: stack image below info */
  .vehicle-hero { grid-template-columns: 1fr; }

  /* Vehicle action buttons: allow wrap but keep side-by-side where possible */
  .vehicle-action-btns {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* Tech specs: single column */
  .tech-specs-grid { grid-template-columns: 1fr; }

  /* Oil cards: 2 columns on tablet */
  .oil-cards-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Filters: 2 columns on tablet */
  .filters-grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .vehicle-hero {
    padding: var(--sp-4);
    gap: var(--sp-4);
  }
  .vehicle-hero-info h1 { font-size: var(--font-size-xl); }

  /* Oil cards: single column */
  .oil-cards-grid  { grid-template-columns: 1fr; }

  /* Filters: single column */
  .filters-grid    { grid-template-columns: 1fr; }
}

/* Tabs: horizontal scroll within the nav only */
.vehicle-tabs-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vehicle-tabs-nav::-webkit-scrollbar { display: none; }
.vehicle-tab-btn { flex-shrink: 0; }


/* ── 12. BRANDS PAGE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .brands-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .brands-search { width: 100%; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
}

@media (max-width: 480px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── 13. TYPOGRAPHY ────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: clamp(20px, 5vw, var(--font-size-2xl)); }
  h2 { font-size: clamp(18px, 4.5vw, var(--font-size-xl)); }
  h3 { font-size: clamp(16px, 4vw, var(--font-size-lg)); }
  .section-title h2 { font-size: var(--font-size-xl); }

  body {
    font-size: 14px;
    line-height: 1.7;
  }
}


/* ── 14. MODAL ─────────────────────────────────────────────── */
@media (max-width: 576px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--sp-6) var(--sp-4);
    max-height: 90dvh;
    overflow-y: auto;
  }
}


/* ── 15. CARDS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card { padding: var(--sp-4); }
  .card-header-row {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .card-header-row .btn { font-size: var(--font-size-xs); }
}


/* ── 16. TOAST POSITION ────────────────────────────────────── */
@media (max-width: 576px) {
  .toast-container {
    top: auto;
    bottom: var(--sp-4);
    inset-inline-start: var(--sp-3);
    inset-inline-end: var(--sp-3);
    width: auto;
  }
  .toast { font-size: var(--font-size-xs); }
}


/* ── 17. CONTAINER ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .container { padding-inline: var(--sp-3); }
  .section-title { margin-bottom: var(--sp-6); }
  .empty-state { padding: var(--sp-8) var(--sp-4); }
}


/* ── 18. NO-VEHICLE CTA ────────────────────────────────────── */
.no-vehicle-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}
.no-vehicle-cta .cta-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--clr-gold-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.no-vehicle-cta h3 {
  font-size: var(--font-size-md);
  color: var(--clr-white);
}
.no-vehicle-cta p {
  font-size: var(--font-size-sm);
  color: var(--clr-text-muted);
  max-width: 280px;
}


/* Section 19 removed: inline styles were removed from dashboard/main.php,
   so the [style] attribute override is no longer necessary. */


/* ── 20. VEHICLES LIST PAGE ────────────────────────────────── */
@media (max-width: 768px) {
  .vehicles-layout {
    flex-direction: column;
  }
  .vehicles-sidebar {
    width: 100%;
    position: relative;
    top: auto;
  }
}


/* ── 21. OIL FINDER (finder.php has all inline styles) ─────── */
.oil-finder-page {
  min-height: 80vh;
  padding: var(--sp-10) 0;
}
.oil-finder-hero {
  background: linear-gradient(135deg, var(--clr-bg-card2) 0%, var(--clr-bg-card) 100%);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-10);
}
.oil-finder-hero-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(245, 183, 49, 0.06), transparent 70%);
  pointer-events: none;
}
.oil-finder-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--sp-4);
}
.oil-finder-badge-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-gold);
}
.oil-finder-hero h1 {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 900;
  margin-bottom: 10px;
}
.oil-finder-hero p {
  color: var(--clr-text-muted);
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto;
}

.oil-finder-form-wrap {
  background: var(--clr-bg-card2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.oil-finder-form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Step badge */
.oil-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  margin-inline-end: 6px;
}
.oil-step-badge-active {
  background: var(--clr-gold);
  color: #0d0f14;
}
.oil-step-badge-inactive {
  background: var(--clr-border);
  color: var(--clr-text-muted);
}

/* Oil finder selects */
.oil-finder-select {
  width: 100%;
  padding: 11px 14px;
  background: var(--clr-bg-input);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  color: var(--clr-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  transition: border-color var(--transition);
}
.oil-finder-select:focus { border-color: var(--clr-gold); }
.oil-finder-select:disabled {
  color: var(--clr-text-muted);
  cursor: not-allowed;
}

/* Grid for filter fields */
.oil-finder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--sp-3);
  align-items: end;
}

@media (max-width: 768px) {
  .oil-finder-grid      { grid-template-columns: 1fr; }
  .oil-finder-hero      { padding: var(--sp-8) var(--sp-4); }
  .oil-finder-form-wrap { padding: var(--sp-4); }
}


/* ── 22. DRIVING PROFILE GRID ──────────────────────────────── */
@media (max-width: 640px) {
  .driving-profile-grid   { grid-template-columns: 1fr; }
  .mi-widgets-grid        { grid-template-columns: 1fr; }
  .mi-stats-row           { grid-template-columns: repeat(2, 1fr); }
}


/* ── 23. 320px MINIMUM ─────────────────────────────────────── */
@media (max-width: 320px) {
  .container        { padding-inline: var(--sp-2); }
  .card             { padding: var(--sp-3); }
  .btn              { padding: 9px var(--sp-3); font-size: var(--font-size-xs); }
  .dashboard-main   { padding: var(--sp-3); }
  .header-inner     { padding: 0 var(--sp-2); }
}


/* ── 24. OIL FINDER TIPS GRID ──────────────────────────────── */
.oil-finder-container {
  max-width: 960px;
}

.oil-finder-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.oil-tip-card {
  padding: var(--sp-5);
}

.oil-tip-icon {
  width: 40px;
  height: 40px;
  background: rgba(245, 183, 49, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.oil-tip-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--clr-text);
  margin-bottom: 6px;
}

.oil-tip-desc {
  font-size: 12px;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin: 0;
}

.oil-finder-submit { white-space: nowrap; }

/* Oil result components */
.oil-result-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--sp-4);
}

.oil-result-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.spec-chip-gold {
  background: rgba(245, 183, 49, 0.1);
  border: 1px solid rgba(245, 183, 49, 0.2);
  color: var(--clr-gold);
  font-weight: 700;
}

.oil-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.oil-result-card {
  background: var(--clr-bg-card2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: relative;
}
.oil-result-card-primary {
  border-color: rgba(245, 183, 49, 0.4);
}

.oil-result-badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
}

.oil-result-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--clr-text);
  margin-bottom: 4px;
}
.oil-result-grade {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-3);
}
.oil-result-price {
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .oil-result-grid { grid-template-columns: 1fr; }
}