/* ==========================================================================
   SmartFix — unified mobile / touch adaptation
   Phones 320px+ · tablets · safe-area · 44px touch targets
   ========================================================================== */

:root {
  --bp-phone-sm: 380px;
  --bp-phone: 640px;
  --bp-tablet: 900px;
  --bp-desktop: 1200px;
  --mobile-pad: max(0.75rem, var(--safe-l));
  --mobile-pad-r: max(0.75rem, var(--safe-r));
}

/* --- Global foundation --- */
html {
  overflow-x: clip;
  overflow-x: hidden;
}

body {
  overflow-x: clip;
  overflow-x: hidden;
  padding-bottom: var(--safe-b);
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

input, select, textarea, button {
  font: inherit;
}

/* Touch-friendly controls in toolbars / dense UI */
@media (max-width: 900px) {
  .btn,
  .btn-sm,
  .link-btn,
  .desk-filter,
  .rent-pager-btn,
  .rent-toolbar-btn,
  .rent-chip-btn,
  .dpc-card-btn,
  .shop-header-seg-btn,
  .shop-pay-btn,
  .acc-nav-link,
  .ra-nav-link,
  .bot-hub-tab-premium,
  .rent-subnav-btn,
  .rent-action-btn,
  .seg-btn,
  .seg-btn-wide {
    min-height: var(--touch);
    touch-action: manipulation;
  }

  .btn-sm {
    min-height: 2.5rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .desk-modal-close,
  .rod-close,
  .shop-order-modal-close,
  .shop-dhru-modal-close {
    min-width: var(--touch);
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .rent-check-ui {
    width: 1.35rem;
    height: 1.35rem;
  }
}

/* Horizontal scroll strips — momentum + snap */
.sf-scroll,
.rent-table-wrap,
.rent-history-scroll,
.desk-pc-list,
.acc-sidebar-nav,
.ra-sidebar-nav,
.shop-header-nav,
.desk-filter-tabs,
.vmp-library-table-wrap,
.ra-table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ==========================================================================
   ADMIN (style.css)
   ========================================================================== */
@media (max-width: 900px) {
  body.is-admin .dash {
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad-r);
    gap: 0.75rem;
  }

  .dash-command-bar {
    padding: 0.65rem;
    border-radius: 18px;
  }

  .dash-stats-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem;
  }

  nav.bot-hub-nav.bot-hub-nav-wide,
  .bot-hub-nav.bot-hub-nav-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem;
  }

  .bot-hub-tab-premium {
    min-height: 2.85rem;
    font-size: 0.78rem;
    padding: 0.55rem 0.45rem;
  }

  .bot-hub-tab-icon {
    font-size: 0.9rem;
  }

  .desk-admin-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .desk-admin-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .desk-admin-head-actions .btn-sm {
    flex: 1 1 auto;
    min-width: 0;
  }

  .desk-tg-notify-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .desk-stats-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .desk-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .desk-search {
    width: 100%;
    min-height: var(--touch);
  }

  .desk-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem;
    padding-bottom: 0.15rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .desk-filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .dpc-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .dpc-card-btn.primary,
  .dpc-card-btn.desk-open {
    grid-column: 1 / -1;
  }

  .admin-admin-row .log-section-side {
    min-height: 16rem;
  }

  .guest-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .guest-topbar-tools {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .guest-location-inline {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: calc(0.55rem + var(--safe-t));
  }

  .topbar-brand {
    font-size: 0.88rem;
  }

  .dash-stats-premium,
  .desk-stats-premium {
    grid-template-columns: 1fr 1fr;
  }

  .rent-stats-grid,
  .rent-stats-grid--wide {
    grid-template-columns: 1fr 1fr;
  }

  .rent-actions-grid--main {
    grid-template-columns: 1fr 1fr;
  }

  .rent-actions-grid--orders {
    grid-template-columns: 1fr;
  }

  .bot-bcast-grid {
    grid-template-columns: 1fr !important;
  }

  .bot-bcast-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bot-bcast-actions .btn {
    width: 100%;
  }

  .payment-revenue-grid,
  .stars-product-grid {
    grid-template-columns: 1fr !important;
  }

  .seg {
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .seg-btn,
  .seg-btn-wide {
    min-height: 2.85rem;
    font-size: 0.72rem;
    padding: 0.45rem 0.35rem;
  }

  .seg-wide-label {
    font-size: 0.74rem;
  }

  .seg-wide-sub {
    font-size: 0.62rem;
  }

  .temp-link-layout-premium {
    flex-direction: column;
    align-items: stretch;
  }

  .temp-link-config-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 380px) {
  nav.bot-hub-nav.bot-hub-nav-wide,
  .bot-hub-nav.bot-hub-nav-wide {
    grid-template-columns: 1fr 1fr !important;
  }

  .bot-hub-tab-label {
    font-size: 0.72rem;
  }

  .dash-stats-premium .dash-stat-v,
  .desk-stat-v {
    font-size: 1.15rem;
  }

  .rent-stat-v {
    font-size: 1.1rem;
  }
}

/* Admin tables — scroll + sticky first column */
@media (max-width: 900px) {
  .rent-table-wrap,
  .rent-history-scroll,
  .vmp-library-table-wrap,
  .desk-keygen-table-wrap,
  .desk-lic-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rent-table {
    min-width: 42rem;
  }

  .rent-history-table {
    min-width: 38rem;
  }

  .vmp-library-table {
    min-width: 0;
  }

  .rent-table th:first-child,
  .rent-table td:first-child,
  .rent-history-table th:first-child,
  .rent-history-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(15, 16, 28, 0.98);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  }

  .rent-table thead th:first-child {
    z-index: 4;
  }
}

/* Rent order detail — bottom sheet on phone */
@media (max-width: 720px) {
  .rent-history-layout:has(.rent-order-detail:not([hidden])) {
    position: relative;
  }

  .rent-order-detail.rod {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 200;
    max-height: min(88vh, 720px);
    margin: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
    animation: mobile-sheet-up 0.22s ease-out;
  }

  .rent-order-detail.rod::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
  }

  .rod-close {
    min-width: var(--touch);
    min-height: var(--touch);
  }
}

@keyframes mobile-sheet-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* Desk / VMP modals — bottom sheet */
@media (max-width: 640px) {
  .desk-modal {
    align-items: flex-end;
    padding: 0;
  }

  .desk-modal-card,
  .desk-modal-card.desk-modal-premium,
  .vmp-library-card {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    padding: 0.85rem 0.85rem calc(0.85rem + var(--safe-b));
  }

  .desk-modal-head,
  .vmp-library-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .vmp-library-search-wrap {
    width: 100%;
  }

  .vmp-library-toolbar .btn-sm {
    width: 100%;
  }

  .dpc-modal .desk-modal-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .dpc-quickbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
}

/* ==========================================================================
   SHOP (shop.css supplements)
   ========================================================================== */
@media (max-width: 720px) {
  .shop-header-premium,
  .shop-header {
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad-r);
  }

  .shop-header-tools {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .shop-header-nav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    padding-bottom: 0.2rem;
  }

  .shop-header-nav-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .shop-dhru-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-dhru-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-dhru-search-wrap {
    width: 100%;
  }

  .shop-dhru-jump-track {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .shop-dhru-catalog {
    grid-template-columns: 1fr !important;
  }

  .shop-master--compact .shop-master-inner {
    grid-template-columns: 1fr !important;
  }

  .shop-visual-col {
    min-width: 0 !important;
    max-width: none !important;
  }

  .shop-pay-row {
    flex-direction: column;
  }

  .shop-pay-row .shop-pay-btn {
    width: 100%;
  }

  .shop-footer-cards {
    grid-template-columns: 1fr;
  }

  .shop-dhru-modal,
  .shop-order-modal,
  .shop-account-modal {
    align-items: flex-end;
    padding: 0;
  }

  .shop-dhru-modal-card,
  .shop-order-modal-card,
  .shop-account-modal-card,
  .shop-lightbox-card {
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
  }

  .shop-dhru-modal-foot,
  .shop-order-modal-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .shop-dhru-modal-foot .shop-pay-btn,
  .shop-order-modal-foot .btn {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .shop-brand-text .shop-brand-sub {
    display: none;
  }

  .shop-header-balance {
    font-size: 0.78rem;
    padding: 0.35rem 0.55rem;
  }

  .shop-gen-seg {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   ACCOUNT (account.css supplements)
   ========================================================================== */
@media (max-width: 900px) {
  .acc-topbar {
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: calc(0.55rem + var(--safe-t)) var(--mobile-pad-r) 0.55rem var(--mobile-pad);
  }

  .acc-topbar-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .acc-topbar-links {
    order: 3;
    width: 100%;
    margin-right: 0;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .acc-topbar-tools {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .acc-sidebar {
    padding: 0.65rem var(--mobile-pad);
    gap: 0.65rem;
  }

  .acc-sidebar-user {
    width: 100%;
  }

  .acc-sidebar-balance {
    width: 100%;
  }

  .acc-sidebar-nav {
    width: 100%;
    scroll-snap-type: x proximity;
    padding-bottom: 0.25rem;
  }

  .acc-nav-link {
    scroll-snap-align: start;
    padding: 0.55rem 0.85rem;
  }

  .acc-sidebar-logout {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.15rem;
  }

  .acc-main {
    padding: 1rem var(--mobile-pad) calc(1.25rem + var(--safe-b)) var(--mobile-pad-r);
  }

  .acc-stat-grid,
  .acc-quick-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }

  .acc-orders-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .acc-orders-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 0.35rem;
    padding-bottom: 0.15rem;
  }

  .shop-topup-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .shop-order-modal-card {
    width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
}

@media (max-width: 480px) {
  .acc-stat-grid,
  .acc-quick-grid,
  .shop-topup-presets {
    grid-template-columns: 1fr;
  }

  .acc-guest-wrap {
    padding: 1rem var(--mobile-pad);
    min-height: calc(100dvh - 56px);
  }

  .acc-guest-card {
    padding: 1.25rem 1rem;
  }
}

/* ==========================================================================
   RESELLER ADMIN (resadmin.css supplements)
   ========================================================================== */
@media (max-width: 900px) {
  .ra-shell {
    min-height: 100dvh;
  }

  .ra-sidebar {
    padding: 0.65rem var(--mobile-pad);
    gap: 0.55rem;
  }

  .ra-sidebar-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem;
    width: 100%;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .ra-nav-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
  }

  .ra-sidebar-logout {
    flex: 0 0 auto;
    min-height: var(--touch);
  }

  .ra-main {
    padding: 0.85rem var(--mobile-pad) calc(1rem + var(--safe-b)) var(--mobile-pad-r);
  }

  .ra-grid {
    grid-template-columns: 1fr !important;
  }

  .ra-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .ra-filters .btn {
    width: 100%;
  }

  .ra-split {
    grid-template-columns: 1fr !important;
  }

  .ra-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--mobile-pad));
    margin-right: calc(-1 * var(--mobile-pad-r));
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad-r);
  }

  .ra-table {
    min-width: 44rem;
  }

  .ra-detail {
    position: sticky;
    bottom: 0;
    z-index: 5;
    max-height: 50vh;
    overflow: auto;
  }

  .rent-hub .rent-stats-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ra-login-card {
    padding: 1.25rem 1rem;
  }

  .ra-main-head {
    margin-bottom: 0.85rem;
  }

  .ra-main-head h1 {
    font-size: 1.35rem;
  }
}

/* ==========================================================================
   LEGAL + misc
   ========================================================================== */
@media (max-width: 640px) {
  .legal-wrap {
    padding: 1rem var(--mobile-pad) calc(1.5rem + var(--safe-b)) var(--mobile-pad-r);
  }

  .legal-doc {
    padding: 1.25rem 1rem;
  }

  .shop-header.legal-page-header,
  header.shop-header {
    flex-wrap: wrap;
    padding: 0.75rem var(--mobile-pad);
  }
}

/* Landscape phones — reduce vertical waste */
@media (max-height: 480px) and (orientation: landscape) {
  .desk-modal-card,
  .acc-order-modal-card {
    max-height: 96vh;
    max-height: 96dvh;
  }

  .rent-order-detail.rod {
    max-height: 96vh;
  }

  .gen-log-list,
  .desk-pc-list {
    max-height: 40vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rent-order-detail.rod {
    animation: none;
  }
}