/* ViyaBook responsive.css  supplements styles.css
   Exact breakpoints: desktop 1024px, tablet 7681023px, mobile <768px
   Load order: after styles.css so these rules win on conflicts. */

/* =============================================================
   BASE  prevent horizontal overflow on every page
   ============================================================= */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

* { box-sizing: border-box; }

/* =============================================================
   TABLET GAP FIX (993px1023px)
   styles.css @media (min-width: 993px) forces display:grid which
   leaves a 300px phantom column when the sidebar is already in
   drawer mode (shared-sidebar.js switches at 1024px).
   Override that grid here so the main content fills the viewport.
   ============================================================= */
@media (min-width: 993px) and (max-width: 1023px) {

  body:has(> .app) > .app,
  body.viya-sidebar-page .viya-layout,
  .dashboard-shell,
  .app {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* Sidebar stays as a drawer  display:flex !important overrides
     inline sidebar{display:none} rules in some pages */
  body:has(> .app) > .app > .sidebar,
  body.viya-sidebar-page .viya-layout > .sidebar,
  body.viya-sidebar-page .viya-layout > .viya-sidebar,
  .dashboard-shell > .sidebar,
  .sidebar,
  .app-sidebar,
  .viya-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10001 !important;
    width: min(300px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
    transition: transform 0.3s ease !important;
    grid-column: auto !important;
  }

  .sidebar.active,
  .app-sidebar.active,
  .viya-sidebar.active,
  body.sidebar-open .sidebar,
  body.sidebar-open .app-sidebar,
  body.sidebar-open .viya-sidebar {
    transform: translateX(0) !important;
  }

  /* Main area fills full width */
  body:has(> .app) > .app > .main,
  body.viya-sidebar-page .viya-layout > .viya-main,
  .dashboard-shell > .main-content,
  .main,
  .main-content,
  .viya-main,
  .dashboard-content,
  .page-content {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-top: 72px !important;
  }

  /* KPI / stat cards  2-column at tablet */
  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .cards,
  .quick,
  .quick-actions,
  .metrics,
  .type-grid,
  .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* trip-detail inner grids collapse */
  .content-grid,
  .tables-grid {
    grid-template-columns: 1fr !important;
  }

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

  /* Overlay shows when sidebar is open */
  .sidebar-overlay.active,
  body.sidebar-open .sidebar-overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =============================================================
   TABLET GENERAL (1023px)  layout adjustments
   ============================================================= */
@media (max-width: 1023px) {

  .login-page,
  .viya-auth-layout {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
  }

  .hero,
  .viya-auth-hero {
    display: none !important;
  }

  .login-card-wrap,
  .login-card,
  .login-panel {
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* All table containers scroll without breaking layout */
  .table-wrap,
  .table-wrapper,
  .table-shell,
  .items-scroll,
  .detail-table-card,
  .table-panel,
  .panel:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* trip-detail grids */
  .content-grid,
  .tables-grid {
    grid-template-columns: 1fr !important;
  }

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

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Filter rows wrap instead of overflow */
  .filters,
  .filter-grid {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .filters > *,
  .filter-grid > * {
    flex: 1 1 200px !important;
    min-width: 0 !important;
  }

  /* Settings / form layout */
  .settings-layout {
    grid-template-columns: 1fr !important;
  }

  /* Notes & totals rows */
  .notes-totals,
  .grid-top {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   MOBILE (767px)  single column, full-width touch targets
   Supplements styles.css which stops at 768px
   ============================================================= */
@media (max-width: 767px) {

  .login-page,
  .viya-auth-layout {
    min-height: 100dvh !important;
    padding: 24px 16px !important;
  }

  .login-card,
  .login-panel {
    border-radius: 20px !important;
    padding: 28px 22px !important;
  }

  .row,
  .footer-row {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .secure {
    margin-top: 24px !important;
  }

  /* trip-detail grids  1 column */
  .summary-grid,
  .mini-stats {
    grid-template-columns: 1fr !important;
  }

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

  /* dashboard .metrics 21 col */
  .metrics {
    grid-template-columns: 1fr !important;
  }

  /* Head/topbar wrap */
  .topbar,
  .page-head,
  .head,
  .welcome {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Action buttons stretch */
  .head-actions,
  .actions,
  .page-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .head-actions .btn,
  .actions .btn,
  .page-actions .btn,
  .actions button,
  .page-actions button {
    flex: 1 1 160px !important;
    min-width: 0 !important;
  }

  /* Modals fit screen */
  .modal-card,
  .modal-inner,
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Settings */
  .settings-layout,
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

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

  .notes-totals,
  .grid-top {
    grid-template-columns: 1fr !important;
  }

  .footer-actions {
    flex-direction: column !important;
  }

  .footer-actions button,
  .footer-actions .btn {
    width: 100% !important;
  }

  /* Form grids 1 column */
  .form-grid,
  .modal-grid,
  .detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard .summary 2-col  1-col */
  .summary {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   SMALL MOBILE (479px)
   ============================================================= */
@media (max-width: 479px) {

  .login-page,
  .viya-auth-layout {
    padding: 18px 12px !important;
  }

  .login-card,
  .login-panel {
    padding: 24px 18px !important;
  }

  .card-real-logo,
  .brand-mark img {
    width: 72px !important;
  }

  .login-card h2,
  .login-panel h1,
  .hero-copy h1 {
    font-size: 23px !important;
  }

  .metrics,
  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .mini-stats,
  .cards {
    grid-template-columns: 1fr !important;
  }

  /* Tight padding */
  .card,
  .panel,
  .invoice-card,
  .products-card,
  .table-card {
    padding: 14px !important;
  }

  /* Modal rounding */
  .modal-card,
  .modal {
    border-radius: 12px !important;
  }

  /* Full-width primary actions */
  .btn-primary,
  .save-btn,
  .submit-btn {
    width: 100% !important;
  }
}