/* Protexive — mobile & tablet responsive enhancements */

/* --- Layout & shell --- */
@media (max-width: 991.98px) {
  .page-shell {
    padding: 0.75rem 0.65rem 1.25rem;
  }

  .main-content.erp-dashboard {
    padding-top: 0;
  }

  .erp-topbar {
    padding-top: 3.15rem;
    padding-left: 3.35rem;
    padding-right: 0.75rem;
  }

  .mobile-menu-btn {
    top: max(0.75rem, env(safe-area-inset-top, 0.75rem));
    left: max(0.75rem, env(safe-area-inset-left, 0.75rem));
  }

  .sidebar {
    z-index: 1040;
    width: min(280px, 88vw);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1035;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-backdrop.show {
    display: block;
  }

  body.sidebar-open {
    overflow: hidden;
    touch-action: none;
  }
}

@media (max-width: 575.98px) {
  .page-shell {
    padding: 0.65rem 0.5rem 1rem;
  }
}

/* --- Page header & actions --- */
@media (max-width: 767.98px) {
  .page-title-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.65rem;
    padding-right: 0 !important;
  }

  .page-title-row > .d-flex,
  .page-title-row > form,
  .page-title-row .btn,
  .page-title-row .d-flex.gap-2 {
    width: 100%;
  }

  .page-title-row .d-flex.gap-2 {
    flex-wrap: wrap;
  }

  .page-title-row .btn {
    flex: 1 1 auto;
    min-height: 42px;
  }

  .main-content .page-title-row h4,
  .main-content .page-title-row h5 {
    font-size: 1.15rem;
    padding-right: 0;
  }
}

/* --- Top-right notification + profile --- */
@media (max-width: 991.98px) {
  body:not(:has(.erp-dashboard)) .main-content .page-title-row {
    padding-right: 0;
    margin-top: 2.5rem;
  }
}

.app-top-right-stack {
  top: max(10px, env(safe-area-inset-top, 10px));
  right: max(10px, env(safe-area-inset-right, 10px));
}

@media (max-width: 575.98px) {
  .app-top-right-stack {
    top: max(8px, env(safe-area-inset-top, 8px));
    right: max(8px, env(safe-area-inset-right, 8px));
    gap: 0.35rem;
  }

  .app-top-notif-btn {
    width: 38px;
    height: 38px;
  }

  .app-profile-chip {
    padding: 0.2rem;
    max-width: 44px;
    border-radius: 50%;
  }

  .app-profile-avatar {
    width: 36px;
    height: 36px;
  }
}

/* --- Forms & filters (stack fields on small screens) --- */
@media (max-width: 767.98px) {
  .page-shell .card-body form.row > [class*="col-"],
  .page-shell form.row.g-2 > [class*="col-"],
  .page-shell form.row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .filters-strip .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .form-control,
  .form-select,
  .btn {
    min-height: 42px;
  }

  .btn-sm {
    min-height: 38px;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
}

/* --- Tables: horizontal scroll + readable cells --- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap .table {
  min-width: 640px;
}

.leads-table-wrap .table {
  min-width: 900px;
}

@media (max-width: 767.98px) {
  .table-wrap .table th,
  .table-wrap .table td {
    white-space: nowrap;
    font-size: var(--app-font-sm);
    padding: 0.5rem 0.45rem;
  }

  .lead-status-form {
    flex-wrap: wrap;
  }

  .lead-status-form .form-select {
    min-width: 120px;
    max-width: 100%;
  }

  .lead-remark-form .form-control {
    min-width: 0;
    width: 100%;
  }

  .lead-actions-cell .d-flex {
    flex-wrap: wrap;
    gap: 0.35rem !important;
  }
}

/* --- Pagination --- */
.pagination {
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}

.pagination .page-link {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Lead remarks drawer --- */
@media (max-width: 575.98px) {
  .lead-remarks-drawer {
    width: 100vw;
    max-width: 100vw;
    right: -100vw;
  }

  .lead-remarks-drawer.open {
    right: 0;
  }
}

/* --- Cards & stats --- */
@media (max-width: 575.98px) {
  .stat-card .stat-num {
    font-size: 1.2rem;
  }

  .content-card .card-body {
    padding: 0.75rem;
  }

  .row.g-3 > [class*="col-"] {
    margin-bottom: 0;
  }
}

/* --- Login --- */
@media (max-width: 575.98px) {
  .login-card {
    margin: 0.5rem;
    padding: 1.25rem !important;
  }
}

/* --- Notification list --- */
@media (max-width: 575.98px) {
  .list-group-item .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.65rem;
  }

  .list-group-item .d-flex.flex-column.gap-1 {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
}

/* --- Workflow timeline --- */
@media (max-width: 575.98px) {
  .workflow-timeline {
    padding-left: 22px;
  }

  .timeline-dot {
    left: -20px;
  }
}

/* --- Print documents unchanged on screen --- */
@media (max-width: 767.98px) {
  .doc-print-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Order form product rows --- */
@media (max-width: 767.98px) {
  #productRows .product-row .col-md-4,
  #productRows .product-row .col-md-2,
  #productRows .product-row .col-md-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .orders-page .collapse .row .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Lead detail two-column layout --- */
@media (max-width: 991.98px) {
  .page-shell > .row.g-3 > .col-lg-4,
  .page-shell > .row.g-3 > .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}