/* ============================================================
   ROGHANYAB PRO – RESPONSIVE CSS
   Mobile-first fixes for all screen sizes
   ============================================================ */

/* ──────────────────────────────────────────
   1. GLOBAL IMAGE & OVERFLOW FIX
────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  box-sizing: border-box;
  min-width: 0; /* prevent flex/grid overflow */
}

/* ──────────────────────────────────────────
   2. HEADER – MOBILE (≤ 768px)
────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Mobile header is shorter (56px) than desktop (64px). Redefining the
     --header-h custom property here cascades the new value to every rule
     in every stylesheet that uses var(--header-h) — body's padding-top,
     .mobile-menu's top offset, .dashboard-sidebar's sticky top — so they
     all stay in sync automatically. */
  :root { --header-h: 56px; }

  .site-header {
    /* FIX: was position:sticky here, which conflicts with body's
       padding-top offset (used everywhere else in this theme) and with
       .mobile-menu / .dashboard-sidebar, which both assume a FIXED
       header pinned at viewport y:0. A sticky header's natural
       (pre-stick) position lands below that body padding, so on load
       it visually overlapped the page heading and the top item(s) of
       the mobile nav drawer. Keeping it fixed matches the rest of the
       theme's layout math and removes the overlap entirely. */
    position: fixed;
    top: 0;
    z-index: 500;
    padding: 0;
  }

  .header-inner {
    padding: 0 var(--sp-4);
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
  }

  /* Hide desktop nav */
  .header-nav {
    display: none !important;
  }

  /* Compact logo */
  .logo-tag {
    display: none;
  }
  .logo-name {
    font-size: 16px;
  }

  /* Header action icons compact */
  .header-actions {
    gap: var(--sp-2);
  }

  .header-wishlist,
  .theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--clr-bg-input);
  }

  /* Show hamburger */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--clr-bg-input);
  }
  .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--clr-text);
    border-radius: 2px;
    transition: all var(--transition);
  }
  .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  /* User dropdown compact */
  .user-menu-trigger span {
    display: none;
  }
  .user-menu-trigger .chevron {
    display: none;
  }

  /* Mobile menu & overlay — canonical styles are in header.css.
     Only responsive tweaks belong here. */
}

/* hamburger/mobile-menu show/hide is handled in header.css @992px breakpoint */

/* ──────────────────────────────────────────
   3. DASHBOARD LAYOUT – MOBILE
────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Sidebar becomes a slide-in drawer */
  .dashboard-sidebar {
    position: fixed;
    right: -100%;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    z-index: 400;
    transition: right var(--transition-slow);
    box-shadow: none;
    width: min(280px, 90vw) !important;
  }
  .dashboard-sidebar.open {
    right: 0;
    box-shadow: -8px 0 32px rgba(0,0,0,0.6);
  }

  /* Admin bar adjustments for mobile drawer */
  body.admin-bar .dashboard-sidebar {
    top: calc(var(--header-h) + 32px);
    height: calc(100vh - var(--header-h) - 32px);
  }
  @media screen and (max-width: 782px) {
    body.admin-bar .dashboard-sidebar {
      top: calc(var(--header-h) + 46px);
      height: calc(100vh - var(--header-h) - 46px);
    }
  }

  /* Sidebar toggle button */
  .sidebar-toggle-btn {
    display: flex !important;
    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);
  }
  .sidebar-toggle-btn svg { width: 18px; height: 18px; }

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

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

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

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

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

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

/* ──────────────────────────────────────────
   4. VEHICLE LIST ITEMS – MOBILE
────────────────────────────────────────── */
@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;
  }
}

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

  /* Wizard steps: scrollable */
  .wizard-steps {
    gap: 0;
    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 grid: single column on mobile */
  .wizard-content [style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-3) !important;
  }

  .wizard-content [style*="grid-column:span 2"] {
    grid-column: span 1 !important;
  }

  /* Brand grid: 3 columns on mobile */
  .brand-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    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;
  }

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

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

@media (max-width: 375px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ──────────────────────────────────────────
   6. ACTIVE VEHICLE CARD – MOBILE
────────────────────────────────────────── */
@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;
  }

  .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);
  }
}

/* ──────────────────────────────────────────
   7. TABLES – MOBILE SCROLL WRAPPER
────────────────────────────────────────── */
@media (max-width: 768px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--sp-4));
    padding: 0 var(--sp-4);
  }

  .table {
    min-width: 500px;
  }

  /* Service history table */
  .service-history-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Maintenance schedule: card-style on mobile */
  .maintenance-item {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .maint-progress {
    width: 100%;
    flex: none !important;
  }
}

/* ──────────────────────────────────────────
   8. FORMS – MOBILE FULL WIDTH
────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-control,
  .form-select {
    font-size: 16px !important; /* prevent iOS zoom */
    width: 100%;
  }

  .form-group {
    margin-bottom: var(--sp-3);
  }

  /* Two column form grids: stack */
  .form-grid-2 {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Buttons in forms: full width */
  .form-footer .btn,
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ──────────────────────────────────────────
   9. PROFILE PAGE – MOBILE
────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
  }

  .profile-avatar-col {
    align-items: center;
  }
}

/* ──────────────────────────────────────────
   10. VEHICLE DETAIL PAGE – MOBILE
────────────────────────────────────────── */
@media (max-width: 768px) {
  .vehicle-hero {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }

  .vehicle-hero-info h1 {
    font-size: var(--font-size-xl);
  }

  .vehicle-action-btns {
    flex-direction: column;
  }
  .vehicle-action-btns .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tabs: horizontal scroll */
  .vehicle-tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .vehicle-tabs-nav::-webkit-scrollbar { display: none; }

  .vehicle-tab-btn {
    flex-shrink: 0;
  }

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

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

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

/* ──────────────────────────────────────────
   11. BRANDS PAGE – MOBILE
────────────────────────────────────────── */
@media (max-width: 768px) {
  .brands-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .brands-search {
    width: 100% !important;
  }

  .brands-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--sp-3);
  }
}

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

/* ──────────────────────────────────────────
   12. TYPOGRAPHY – MOBILE SCALE
────────────────────────────────────────── */
@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);
  }

  /* Ensure body text stays readable */
  body {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* ──────────────────────────────────────────
   13. MODAL – MOBILE BOTTOM SHEET STYLE
────────────────────────────────────────── */
@media (max-width: 576px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100% !important;
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--sp-6) var(--sp-4);
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ──────────────────────────────────────────
   14. CARDS – RESPONSIVE
────────────────────────────────────────── */
@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);
  }
}

/* ──────────────────────────────────────────
   15. GRID UTILITIES – MOBILE OVERRIDE
────────────────────────────────────────── */
@media (max-width: 576px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .container {
    padding: 0 var(--sp-3);
  }
}

/* ──────────────────────────────────────────
   16. TOAST – MOBILE POSITION
────────────────────────────────────────── */
@media (max-width: 576px) {
  .toast-container {
    top: auto;
    bottom: var(--sp-4);
    left: var(--sp-3);
    right: var(--sp-3);
    width: auto;
  }

  .toast {
    font-size: var(--font-size-xs);
  }
}

/* ──────────────────────────────────────────
   17. DASHBOARD MAIN VEHICLE INFO (داشبورد)
   – ارتباط خودروی ثبت‌شده و نمایش در داشبورد
────────────────────────────────────────── */

/* Vehicle card in dashboard when no vehicle registered */
.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;
}

/* Active vehicle banner on mobile */
@media (max-width: 768px) {
  .active-vehicle-card .vehicle-stats-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
  }
  .active-vehicle-card .vehicle-stats-row::-webkit-scrollbar { display: none; }

  .vehicle-stat {
    flex-shrink: 0;
    min-width: 80px;
  }

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

  /* Maintenance list items */
  .maintenance-item {
    padding: var(--sp-3) 0;
  }

  .maint-icon {
    width: 28px;
    height: 28px;
  }

  .maint-info .name {
    font-size: var(--font-size-xs);
  }
  .maint-info .km {
    font-size: 10px;
  }

  .maint-bar-wrap {
    gap: var(--sp-2);
  }
}

/* ──────────────────────────────────────────
   18. SPECIFIC BREAKPOINT OVERRIDES
────────────────────────────────────────── */

/* 320px */
@media (max-width: 320px) {
  .container { padding: 0 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); }
}

/* 375px */
@media (max-width: 375px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vehicle-stats-row { grid-template-columns: repeat(2, 1fr); }
  .wizard-label { display: none; }
}

/* 414px */
@media (max-width: 414px) {
  .header-inner { padding: 0 var(--sp-3); }
}

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

/* ──────────────────────────────────────────
   19. SIDEBAR TOGGLE BUTTON (inject via JS)
────────────────────────────────────────── */
.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;
}

.sidebar-toggle-btn:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
}

/* ──────────────────────────────────────────
   20. FIX BROKEN INLINE GRID IN dashboard/main.php
────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Override inline style grid-template-columns */
  div.dashboard-grid-top[style] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }

  div.dashboard-grid-bottom[style] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }
}

/* Step 4 two-col grid – override inline style */
@media (max-width: 576px) {
  .wizard-content div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .wizard-content div[style*="grid-column:span 2"],
  .wizard-content div[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
}


/* Responsive hardening v1.2.1 – de-duped (global rules already in section 1 above) */
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
[class*="grid"]{min-width:0}
@media (max-width:767px){
.container,.wrapper,.content{width:min(100%,1320px)!important;max-width:100%!important}
[style*="width:1200px"],[style*="width:1000px"],[style*="width:900px"]{width:100%!important}
.vehicle-grid,.brands-grid,.dashboard-grid,.cards-grid{grid-template-columns:1fr!important}
.vehicle-card,.brand-card,.maintenance-card,.notification-card{min-width:0!important}
.form-footer .btn,.form-actions .btn,.wizard-actions .btn,.card-footer .btn{width:100%;max-width:100%}
input,select,textarea{font-size:16px!important;width:100%}
/* NOTE: .dashboard-sidebar uses right:-100% for drawer, not transform. transform:none is correct here. */
.sidebar{transform:none;max-width:85vw}
}
@media (min-width:768px) and (max-width:1024px){
.vehicle-grid,.brands-grid,.dashboard-grid,.cards-grid{grid-template-columns:repeat(2,1fr)!important}
}


/* ===== ROGHANYAB FINAL RESPONSIVE OVERRIDE 1.3.0 ===== */

@media (max-width:991px){

.vehicle-hero,
.vehicle-specs-grid,
.vehicle-meta-grid,
.vehicle-content-grid,
.dashboard-stats,
.dashboard-cards,
.brands-grid,
.vehicles-grid,
.products-grid{
display:grid!important;
grid-template-columns:1fr!important;
}

.vehicle-hero-image,
.vehicle-hero-media,
.vehicle-sidebar,
.vehicle-products,
.product-sidebar{
width:100%!important;
max-width:100%!important;
}

table{
display:block!important;
overflow-x:auto!important;
white-space:nowrap!important;
}

.product-card,
.vehicle-card,
.brand-card{
width:100%!important;
max-width:100%!important;
}

.product-card .btn,
.product-card a.button{
display:block!important;
width:100%!important;
}

/* NOTE: .dashboard-sidebar and .mobile-menu drawer widths are defined
   in their canonical sections above (240px and min(280px,88vw)).
   Do NOT redeclare them here – it causes !important conflicts. */

.mobile-sidebar,
.offcanvas-menu{
width:88vw!important;
max-width:360px!important;
}

body.menu-open,
body.sidebar-open{
overflow:hidden!important;
}
}

@media (max-width:768px){
[class*="grid"]{
grid-template-columns:1fr!important;
}
}



/* Mobile tab scroll hint v1.3.3 – fixed */
/*
 * FIX: The original block had three bugs:
 *   1. Wrong selectors: .vehicle-tab-nav and .vehicle-tabs don't exist in HTML.
 *      The real element is .vehicle-tabs-nav (see templates/vehicle/detail.php:131).
 *   2. ::after with top:-24px floated above the nav with no context, overlapping content.
 *   3. The ::after appeared on ALL three selectors simultaneously, tripling the hint.
 *
 * SOLUTION: Use a single correct selector with inline hint below the nav (bottom: auto,
 * using a margin-based approach) and a right-side fade gradient as a visual affordance.
 */

/* Hint wrapper: wraps .vehicle-tabs-nav via JS or keep as CSS-only fade */
.vehicle-tabs-nav {
  position: relative;
}

@media (max-width: 991px) {
  /* Ensure scroll works */
  .vehicle-tabs-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Fade-out right edge as scroll affordance (safe, no overflow) */
    -webkit-mask-image: linear-gradient(to left, transparent 0, black 48px);
    mask-image: linear-gradient(to left, transparent 0, black 48px);
  }

  /* Small animated hint label BELOW the nav – no absolute negative offsets */
  .vehicle-tabs-nav::after {
    content: "◀ تب‌های بیشتر";
    display: block;
    width: 100%;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--clr-gold, #f5b731);
    opacity: 0.8;
    margin-top: 4px;
    animation: rghTabHint 1.4s ease-in-out infinite;
    pointer-events: none;
    /* Reset position so it sits in normal flow below the flex row */
    position: static;
  }
}

@keyframes rghTabHint {
  0%   { transform: translateX(0);   opacity: 0.8; }
  50%  { transform: translateX(-5px); opacity: 1;   }
  100% { transform: translateX(0);   opacity: 0.8; }
}


/* Vehicles mobile fix */
@media (max-width:768px){
.vehicles-list-page .container{padding-left:12px!important;padding-right:12px!important}
.vehicles-layout{flex-direction:column!important}
.vehicles-sidebar{width:100%!important;position:relative!important;top:auto!important}
.vehicles-layout > div:last-child{width:100%!important}
[class*="vehicle"], .vehicles-grid{max-width:100%!important}
}