/* ========================================
   Topgrade POS Admin - Mobile responsive layout
   Makes the whole admin usable on phones and tablets

   Mobile patterns (keep consistent when adding pages):
   - Wide tables: horizontal scroll + sticky actions column on the right
   - Table action buttons: icon-only on small screens (hide .btn-text)
   - Page header / toolbars: buttons wrap and full width when stacked
   - Forms: columns stack to single column; inputs full width
   ======================================== */

/* --- Base: prevent horizontal overflow and improve touch --- */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body.admin-layout {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Safe area for notched devices (iOS, etc.) --- */
@supports (padding: env(safe-area-inset-top)) {
  body.admin-layout {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .admin-main-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Main content: full width and padding on small screens --- */
@media (max-width: 991px) {
  .admin-container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .admin-container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

/* --- Page header: stack title and buttons on mobile --- */
@media (max-width: 768px) {
  .page-header {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 0;
  }

  .page-header h1,
  .page-header .page-title {
    font-size: 1.25rem;
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .page-header .btn-group,
  .page-header .float-end,
  .page-header>.btn {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {

  .page-header .btn,
  .page-header .btn-group .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* --- Cards: reduce padding and allow header to wrap --- */
@media (max-width: 768px) {
  .admin-card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .admin-card .admin-card-header {
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg) calc(-1 * var(--spacing-lg));
    padding: 0.75rem var(--spacing-md);
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .admin-card .admin-card-header h2 {
    font-size: 1rem;
    flex: 1 1 100%;
    margin-bottom: 0.25rem;
  }

  .admin-card .admin-card-header .btn,
  .admin-card .admin-card-header .btn-group .btn {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 576px) {
  .admin-card {
    padding: var(--spacing-md);
  }

  .admin-card .admin-card-header {
    margin: calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) var(--spacing-md) calc(-1 * var(--spacing-md));
    padding: 0.5rem var(--spacing-sm);
  }
}

/* --- Tables: always scroll horizontally when needed --- */
@media (max-width: 991px) {

  .table-responsive,
  .admin-card .table-responsive,
  div[class*="table-responsive"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Cards that contain a table without .table-responsive (branches, staff, roles, etc.) */
  .admin-card:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-card .table,
  .admin-card table.table,
  .table.admin-list-table,
  table.table {
    min-width: 500px;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }

  .table .col-actions {
    position: sticky;
    right: 0;
    background: inherit;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.05);
  }

  /* Sales list: ensure wrapper scrolls and actions stay visible */
  #salesTable .sales-list-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #salesTable .sales-list-table {
    min-width: 700px;
  }

  #salesTable .sales-list-table thead th.col-actions,
  #salesTable .sales-list-table tbody td.col-actions {
    position: sticky;
    right: 0;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06);
  }

  #salesTable .sales-list-table thead th.col-actions {
    background: linear-gradient(135deg, var(--color-primary, #0d6efd) 0%, var(--color-primary-dark, #0a58ca) 100%);
  }

  #salesTable .sales-list-table tbody td.col-actions {
    background: inherit;
  }
}

/* --- Table action buttons: hide optional text on small screens (icon-only) --- */
@media (max-width: 767px) {
  .table .col-actions .btn .btn-text {
    display: none;
  }

  .table .col-actions .btn {
    min-width: 36px;
    padding: 0.35rem;
  }
}

/* --- Modals: full width and scrollable on mobile (Bootstrap .modal-dialog and custom .modal) --- */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-content,
  .modal .modal-content,
  .modal .modal-content.universal-modal,
  .modal .modal-content.wa-link-modal,
  .modal .modal-content.wa-rename-modal,
  .modal .modal-content.sms-template-modal,
  .modal .modal-content.sms-template-view-modal {
    max-width: calc(100vw - 1rem);
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }

  .modal-body,
  .modal .modal-content>form,
  .modal .modal-content .modal-body,
  .modal .wa-link-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }

  .modal-header,
  .modal-footer,
  .modal .modal-header,
  .modal .modal-footer {
    flex-shrink: 0;
  }

  .modal-footer .btn,
  .modal .modal-footer .btn {
    min-height: 44px;
  }
}

@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.25rem;
    max-width: calc(100% - 0.5rem);
  }

  .modal-content,
  .modal .modal-content {
    max-height: 95vh;
    max-height: 95dvh;
    max-width: calc(100vw - 0.5rem);
  }
}

/* --- Forms: stack and full width on mobile --- */
@media (max-width: 768px) {

  .form-row,
  .row .col-md-4,
  .row .col-md-6,
  .row .col-lg-4,
  .row .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .form-control,
  .form-select,
  select.form-control,
  input.form-control,
  textarea.form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-group {
    margin-bottom: var(--spacing-md);
  }

  .input-group {
    flex-wrap: wrap;
  }

  .input-group .form-control,
  .input-group .btn {
    min-width: 0;
  }
}

/* --- Buttons: touch-friendly and wrap --- */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-group {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .btn-group .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- Dropdowns: don't overflow viewport --- */
@media (max-width: 768px) {

  .admin-topbar-dropdown-menu,
  .dropdown-menu {
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-topbar-dropdown-menu.show {
    left: 0.5rem;
    right: 0.5rem;
    max-width: calc(100vw - 1rem);
  }
}

/* --- Bootstrap grid: force single column on small screens where needed --- */
@media (max-width: 576px) {
  .admin-card .row>[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Impersonation banner: wrap on small screens --- */
@media (max-width: 576px) {
  .impersonation-banner {
    flex-wrap: wrap;
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .impersonation-banner-text {
    flex: 1 1 100%;
  }
}

/* --- Login / auth pages --- */
@media (max-width: 576px) {

  .login-card,
  .card.login-card,
  [class*="login"] .card {
    margin: 0.5rem;
    padding: 1rem;
    width: calc(100% - 1rem);
  }
}

/* --- Dashboard: quick actions and sections stack on mobile --- */
@media (max-width: 768px) {

  .quick-actions,
  .quick-actions-section .section-content .quick-actions {
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
  }

  .quick-action-btn,
  .quick-actions .quick-action-btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
    padding: 0.75rem;
  }

  .section-card,
  .quick-actions-section,
  .section-card[id*="section"] {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .section-header,
  .section-header-left {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .dashboard-welcome {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-md);
  }

  .dashboard-welcome h1 {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {

  .quick-action-btn,
  .quick-actions .quick-action-btn {
    flex: 1 1 100%;
  }
}

/* --- Stats / stat cards (dashboard and reports) --- */
@media (max-width: 768px) {

  .stats-grid,
  .dashboardContentPad .row [class*="col-"],
  .stat-cards-section .section-content [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 576px) {

  .stats-grid,
  .dashboardContentPad .row [class*="col-"],
  .stat-cards-section .section-content [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Security / settings pages: form max-width doesn't constrain on mobile --- */
@media (max-width: 768px) {

  .admin-card-body[style*="max-width"],
  .admin-card [style*="max-width: 560px"],
  .admin-card [style*="max-width: 480px"] {
    max-width: 100% !important;
  }
}

/* --- Empty state and loading: full width --- */
@media (max-width: 576px) {

  .empty-state,
  .loading {
    padding: var(--spacing-lg);
    text-align: center;
  }

  .empty-state .btn,
  .loading+.btn {
    width: 100%;
    max-width: 280px;
  }
}

/* --- Toolbars (settings, communications, system): tabs wrap on mobile --- */
@media (max-width: 768px) {

  .product-setup-toolbar,
  .product-setup-toolbar-main {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .product-setup-toolbar .toolbar-tab,
  .toolbar-tab {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- Super Admin list pages: table horizontal scroll (List super admins, outlets, staff) --- */
@media (max-width: 991px) {
  .superadmin-dashboard .sad-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .superadmin-dashboard .sad-table {
    min-width: 600px;
  }

  .superadmin-dashboard .sad-table th,
  .superadmin-dashboard .sad-table td {
    white-space: nowrap;
  }

  .superadmin-dashboard .sad-table .sad-col-actions,
  .superadmin-dashboard .sad-table .sad-actions-cell {
    position: sticky;
    right: 0;
    min-width: 180px;
    background: #fff;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06);
  }

  .superadmin-dashboard .sad-table thead th.sad-col-actions {
    background: var(--color-primary-dark, #0A3D91);
  }

  .superadmin-dashboard .sad-table .sad-actions-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: min-content;
  }

  .superadmin-dashboard .sad-table .sad-actions-wrap .btn {
    flex-shrink: 0;
  }
}

@media (max-width: 576px) {
  .superadmin-dashboard .superadmin-wrap {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .superadmin-dashboard .superadmin-list-wrap {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .superadmin-dashboard .sad-list-card {
    padding: var(--spacing-md);
  }

  .superadmin-dashboard .superadmin-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .superadmin-dashboard .superadmin-bar-actions {
    flex-direction: column;
  }

  .superadmin-dashboard .superadmin-bar-actions .btn,
  .superadmin-dashboard .superadmin-bar-actions form {
    width: 100%;
  }

  .superadmin-dashboard .superadmin-bar-actions .btn {
    min-height: 44px;
  }
}


/* --- Topbar: responsive layout for mobile --- */
@media (max-width: 768px) {

  /* Vertical layout for mobile topbar */
  html body .admin-topbar {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    padding-left: 0.5rem;
    height: auto;
    min-height: auto;
    gap: 0.5rem;
  }

  /* Fixed Sidebar Toggle - HIDE on mobile */
  html body .sidebar-toggle-btn {
    display: none !important;
  }

  /* Hide ALL action buttons */
  html body .admin-topbar-actions {
    display: none !important;
  }

  /* Left container - search bar (first row) */
  html body .admin-topbar-left {
    display: flex;
    width: 100%;
    order: 1;
  }

  /* Search bar - full width on first row */
  html body .admin-topbar-search-wrap {
    flex: 1;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  html body .admin-topbar-search-input {
    width: 100%;
    padding-right: 2rem;
  }

  /* Right side - dropdown menu (second row, below search) */
  html body .admin-topbar-right {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    order: 2;
  }

  /* Hide theme switcher and account button */
  html body #themeSwitcher,
  html body #topbarAccountBtn {
    display: none !important;
  }

  /* Dropdown menu button - properly sized */
  html body .admin-topbar-dropdown button {
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* Hide text in dropdown button */
  html body .admin-topbar-dropdown button span {
    display: none !important;
  }

  html body .admin-topbar-dropdown button i {
    margin-right: 0 !important;
    font-size: 1.2rem !important;
  }
}