/* ============================================================
   RENT CAR — Global responsive / mobile
   Load after tokens.css on every page.
   ============================================================ */

:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --shell-sidebar-w: min(280px, 88vw);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Utilities ---------- */
.rc-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.rc-scroll-x > table { min-width: 560px; }

.shell-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 10, 0.55);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.shell-backdrop.on {
  opacity: 1;
  pointer-events: auto;
}
body.shell-nav-open { overflow: hidden; }

.shell-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ink-100);
  background: var(--cream-50);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.shell-menu-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink-800);
  fill: none;
  stroke-width: 2;
}
body.pub .shell-menu-btn,
body.pub.dark .shell-menu-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}
body.pub .shell-menu-btn svg,
body.pub.dark .shell-menu-btn svg {
  stroke: var(--cream-100);
}

/* Auto-stack common inline stat grids */
@media (max-width: 1024px) {
  .adm-page [style*="grid-template-columns:repeat(4"],
  .adm-page [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .adm-page [style*="grid-template-columns:repeat(4"],
  .adm-page [style*="grid-template-columns: repeat(4"],
  .adm-page [style*="grid-template-columns:repeat(3"],
  .adm-page [style*="grid-template-columns: repeat(3"],
  .adm-page [style*="grid-template-columns:repeat(2"],
  .adm-page [style*="grid-template-columns: repeat(2"],
  .cust-main [style*="grid-template-columns:repeat(2"],
  .cust-main [style*="grid-template-columns: repeat(2"],
  .cust-main [style*="grid-template-columns:220px"],
  .pub-content [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  .cust-main [style*="grid-template-columns:220px"] > * {
    border-right: none !important;
    border-bottom: 1px solid var(--ink-100);
  }
}

/* ---------- Tokens / base ---------- */
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}

/* ---------- Admin shell ---------- */
@media (max-width: 1024px) {
  body.admin {
    grid-template-columns: 1fr;
  }
  body.admin[dir="rtl"] {
    grid-template-columns: 1fr;
  }

  .shell-menu-btn {
    display: inline-flex;
  }

  .adm-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--shell-sidebar-w);
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    padding-top: calc(16px + var(--safe-top));
    padding-bottom: calc(16px + var(--safe-bottom));
  }
  body.admin[dir="rtl"] .adm-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  body.admin.shell-nav-open .adm-sidebar {
    transform: translateX(0);
  }

  .adm-top {
    padding: 12px 16px;
    padding-top: calc(12px + var(--safe-top));
    gap: 10px;
    flex-wrap: wrap;
  }
  .adm-top .adm-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  .adm-top .adm-search .kbd {
    display: none;
  }
  .adm-top-actions .btn-primary {
    display: none;
  }
  .adm-page {
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
  }
  .adm-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }
  .adm-page-head h1 {
    font-size: clamp(32px, 9vw, 48px);
  }
  .adm-tabs {
    flex-wrap: wrap;
    width: 100%;
    border-radius: 14px;
  }
  .stat .val {
    font-size: 36px;
  }
}

@media (max-width: 640px) {
  .adm-card {
    padding: 16px;
    border-radius: 16px;
  }
  .adm-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .table th,
  .table td {
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* Dashboard / page-specific classes used in premium pages */
@media (max-width: 1024px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hero-revenue {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }
  .hr-amount {
    font-size: clamp(48px, 12vw, 72px) !important;
  }
  .dash-grid,
  .dash-2col {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  .kpi-row {
    grid-template-columns: 1fr !important;
  }
  .hr-mini {
    flex-wrap: wrap;
    gap: 16px !important;
  }
  .cols-2,
  .cols-2b {
    grid-template-columns: 1fr !important;
  }
  .b-row {
    grid-template-columns: 40px 1fr !important;
    gap: 10px !important;
  }
  .b-row > *:nth-child(n + 3) {
    display: none;
  }
}
@media (max-width: 1024px) {
  .cols-2,
  .cols-2b {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Customer portal ---------- */
@media (max-width: 1024px) {
  .cust-nav-inner {
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .cust-nav-links {
    display: none;
  }
  body.cust.shell-nav-open .cust-nav-links.shell-mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(60px + var(--safe-top));
    left: 16px;
    right: 16px;
    z-index: 95;
    background: white;
    border: 1px solid var(--ink-100);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--shadow-lg);
    gap: 4px;
  }
  .cust-nav-links.shell-mobile-panel a {
    padding: 12px 14px;
    border-radius: 10px;
    border-bottom: none;
  }
  .cust-shell {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .cust-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--shell-sidebar-w);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    border-radius: 0;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    padding-top: calc(16px + var(--safe-top));
  }
  body.cust[dir="rtl"] .cust-side {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  body.cust.shell-nav-open .cust-side {
    transform: translateX(0);
  }
  .cust-head h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
}

@media (max-width: 640px) {
  .cust-card {
    padding: 16px;
  }
}

/* ---------- Public site ---------- */
@media (max-width: 1024px) {
  .pub-nav-inner {
    padding: 14px 16px;
    gap: 12px;
  }
  .pub-nav-links {
    display: none;
  }
  body.pub.shell-nav-open .pub-nav-links.shell-mobile-panel,
  body.pub.dark.shell-nav-open .pub-nav-links.shell-mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(64px + var(--safe-top));
    left: 16px;
    right: 16px;
    z-index: 95;
    background: var(--ink-900);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--shadow-lg);
    gap: 4px;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
  body.pub.shell-nav-open .pub-nav-links.shell-mobile-panel a {
    padding: 12px 14px;
    border-radius: 10px;
  }
  .pub-hero {
    padding: 48px 16px 32px;
  }
  .pub-hero h1 {
    font-size: clamp(36px, 10vw, 56px);
  }
  .pub-content {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 64px;
  }
  .pub-footer {
    padding: 48px 16px 24px;
  }
  .pub-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pub-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .pub-pricing-tier.featured {
    transform: none;
  }
  .pub-steps {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .pub-cal {
    gap: 4px;
  }
  .pub-cal .d {
    font-size: 11px;
    border-radius: 8px;
  }
}

@media (max-width: 640px) {
  .pub-nav-actions .btn:not(.btn-primary) {
    display: none;
  }
  .pub-nav-actions .btn-primary {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ---------- Settings ---------- */
@media (max-width: 1080px) {
  .set-layout {
    grid-template-columns: 1fr;
  }
  .set-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
  }
  .set-nav-group {
    margin-bottom: 0;
    flex: 1 1 100%;
  }
  .set-nav-group .h {
    padding: 4px 8px;
  }
  .set-nav-link {
    display: inline-flex;
    padding: 8px 12px;
    font-size: 12px;
  }
  .frow {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lang-row {
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
  }
  .lang-row .pill,
  .lang-row .toggle {
    display: none;
  }
  .cur-grid {
    grid-template-columns: 1fr;
  }
  .role-grid {
    grid-template-columns: 1fr;
  }
  .chan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trig {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .billing-stripe {
    grid-template-columns: 1fr;
  }
  .savebar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
  }
  .savebar .actions {
    justify-content: center;
  }
}

/* ---------- Auth ---------- */
@media (max-width: 720px) {
  .doc-grid {
    grid-template-columns: 1fr;
  }
  .otp-row {
    gap: 6px;
  }
  .otp-row input {
    font-size: 20px;
  }
}

/* ---------- Components ---------- */
@media (max-width: 768px) {
  .invoice-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .vehicle-card-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .dash-stat .val {
    font-size: 32px;
  }
}

/* ---------- Home (premium landing) ---------- */
@media (max-width: 1024px) {
  .nav-inner {
    padding: 14px 16px !important;
  }
  .nav-links {
    display: none !important;
  }
  body.shell-nav-open .nav-links.shell-mobile-panel {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: calc(64px + var(--safe-top));
    left: 16px;
    right: 16px;
    z-index: 95;
    background: var(--ink-900);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
    gap: 4px;
    box-shadow: var(--shadow-lg);
  }
  body.shell-nav-open .nav-links.shell-mobile-panel a {
    padding: 12px 14px;
    border-radius: 10px;
  }
  .search {
    padding: 0 16px !important;
    margin-top: -16px !important;
  }
  .nav-actions .btn-ghost-light {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-meta {
    flex-wrap: wrap;
    gap: 24px !important;
  }
  .hero h1 {
    font-size: clamp(40px, 12vw, 56px) !important;
  }
}

/* Table wrapper helper */
.adm-card[style*="overflow:hidden"],
.adm-card[style*="overflow: hidden"],
.pub-card[style*="overflow:auto"],
.pub-card[style*="overflow: auto"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}