/* Responsive layer shared by the Pear shell and every ERP iframe page.
   Desktop rules remain untouched; these overrides only apply on phones. */

@media screen and (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html,
  body {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  body {
    overflow-x: hidden;
  }

  /* Main application shell. */
  .pear-admin .layui-header {
    height: 52px;
    padding-left: max(54px, env(safe-area-inset-left));
    box-sizing: border-box;
  }

  .pear-admin .layui-header .layui-layout-left {
    left: 50px !important;
    padding: 0 !important;
  }

  .pear-admin .layui-header .layui-layout-left .refresh,
  .pear-admin .layui-header .layui-layout-control,
  .pear-admin .layui-footer {
    display: none !important;
  }

  .pear-admin .layui-header .layui-layout-right {
    right: max(4px, env(safe-area-inset-right));
    padding: 0;
  }

  .pear-admin .layui-header .layui-nav-item > a {
    padding: 0 11px;
  }

  .pear-admin .layui-side {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1200;
    box-shadow: 8px 0 24px rgba(15, 23, 42, .24);
  }

  .pear-admin .pear-cover {
    position: fixed !important;
    inset: 0;
    z-index: 1150 !important;
    margin: 0 !important;
  }

  .pear-admin .layui-body {
    top: 52px;
    bottom: 0;
    left: 0 !important;
  }

  .pear-admin .layui-body > div,
  .pear-admin .layui-body iframe {
    width: 100% !important;
    max-width: 100%;
  }

  .pear-admin .pear-collapsed-pe {
    position: fixed;
    display: block !important;
    top: max(8px, env(safe-area-inset-top));
    bottom: auto;
    left: max(9px, env(safe-area-inset-left));
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 9px;
    z-index: 1300;
  }

  .pear-admin .pear-collapsed-pe a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 18px;
  }

  .pear-admin .pear-tab-page > .layui-tab-title {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Shared page shell and touch-friendly controls. */
  body > .pear-container,
  .pear-container.template-page,
  .finance-shell,
  .page {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

  .layui-card {
    min-width: 0 !important;
    margin-bottom: 10px;
  }

  .layui-card-header {
    height: auto;
    min-height: 42px;
    padding: 0 12px;
    line-height: 42px;
    white-space: normal;
  }

  .layui-card-body {
    min-width: 0;
  }

  input,
  select,
  textarea,
  .layui-input,
  .layui-select-title input {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  input,
  select,
  .layui-input,
  .layui-select-title input {
    min-height: 40px;
  }

  textarea {
    min-height: 84px;
  }

  .layui-btn,
  button,
  a.layui-btn {
    min-height: 38px;
    line-height: 38px;
    box-sizing: border-box;
    touch-action: manipulation;
  }

  .layui-btn-xs {
    min-height: 30px;
    line-height: 30px;
  }

  .layui-btn-sm {
    min-height: 34px;
    line-height: 34px;
  }

  /* Search/filter panels. */
  .query-panel,
  .filter-panel,
  .query-content {
    padding: 12px !important;
  }

  .query-grid,
  .filter-grid,
  .picker-row,
  .compose-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  .query-item,
  .filter-item {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .query-item label,
  .filter-item label {
    text-align: left !important;
    font-weight: 600;
  }

  .filter-item.keyword,
  .query-item.keyword {
    grid-column: span 1 !important;
  }

  .date-pair {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .toolbar,
  .order-toolbar,
  .query-actions,
  .footer-actions,
  .sku-actions,
  .actions,
  .notice-actions,
  .compose-actions,
  .preview-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 12px !important;
  }

  .toolbar .hint,
  .scope-note,
  .toolbar > span,
  .order-toolbar > span {
    width: 100%;
    margin: 2px 0 0 !important;
    line-height: 1.6;
  }

  /* Layui and native tables stay usable through deliberate horizontal scroll. */
  .table-wrap,
  .line-wrap,
  .layui-table-view,
  .layui-table-box,
  .layui-table-body,
  .rank,
  .quote-card,
  .quote,
  .explain-card,
  .workflow-card {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap,
  .line-wrap {
    padding: 0 10px 14px !important;
  }

  .layui-table-view {
    margin: 0;
  }

  .layui-table-page {
    height: auto;
    min-height: 46px;
    padding: 8px 4px;
    white-space: normal;
  }

  .layui-laypage a,
  .layui-laypage span {
    margin-bottom: 5px;
  }

  .sub-table,
  .data-table,
  .quote-card table,
  .quote table,
  .rank table,
  .explain-table,
  .customer-fallback-table {
    min-width: 720px;
  }

  /* Large record forms. */
  .customer-card,
  .supplier-card,
  .brand-card,
  .order-card {
    width: 100%;
    min-width: 0 !important;
  }

  .customer-card .grid,
  .supplier-card .grid,
  .brand-card .grid,
  .sku-grid,
  .header-grid,
  .workflow-grid,
  .workflow-grid.quote-layout,
  .rank-grid,
  .two,
  .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .span2,
  .span4,
  .sku-meta,
  .sku-wide,
  .order-field {
    grid-column: span 1 !important;
  }

  .section,
  .workflow-card {
    margin: 8px !important;
    padding: 13px !important;
  }

  .customer-card .section,
  .supplier-card .section,
  .brand-card .section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section h3 {
    line-height: 1.5;
  }

  .stat-grid,
  .summary-grid,
  .metric-grid,
  .head-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .stat,
  .summary-item,
  .metric-card,
  .head-item {
    min-width: 0;
    padding: 10px !important;
  }

  .metric-card {
    display: block;
    min-height: 74px;
  }

  .metric-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    font-size: 18px;
  }

  .metric-value {
    font-size: 21px;
  }

  .brand-picker-tools,
  .payment-row,
  .inquiry-upload-row,
  .upload-controls,
  .peer-editor-head,
  .section-head {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .brand-picker-tools input,
  .payment-row input,
  .payment-row select,
  .purchase-card input,
  .purchase-card select,
  .purchase input,
  .purchase select {
    width: 100% !important;
    max-width: none !important;
  }

  .brand-options,
  .nature-options {
    max-height: 210px;
    overflow-y: auto;
  }

  .brand-options label,
  .nature-options label,
  .competitor-option {
    min-height: 34px;
  }

  .line-table {
    min-width: 1450px !important;
  }

  .quote-head,
  .purchase-card,
  .purchase {
    line-height: 1.65;
    word-break: break-word;
  }

  .quote-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
  }

  /* Document/template and mail pages. */
  .template-page .summary,
  .template-page .default-picker,
  .document-page .summary {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }

  .template-page .card {
    padding: 12px;
  }

  .template-page .card .actions {
    float: none;
    padding: 0 0 10px !important;
  }

  .company-seal-thumb {
    float: none !important;
    width: 82px !important;
    height: 82px !important;
    margin: 0 0 10px !important;
  }

  .page .card {
    width: 100%;
    max-width: none;
    padding: 14px !important;
  }

  .page .field textarea {
    min-height: 240px;
  }

  .seal-preview {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .mail-shell {
    min-height: 100vh !important;
    border: 0 !important;
  }

  .mail-side {
    padding: 10px !important;
  }

  .mail-brand {
    padding: 2px 4px 8px !important;
  }

  .compose-trigger {
    width: auto !important;
    margin: 0 5px 8px 0 !important;
  }

  .mail-folder {
    min-height: 38px;
    margin-bottom: 5px;
  }

  .mail-toolbar,
  .mail-health,
  .compose-panel,
  .mail-preview {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .mail-item {
    padding: 12px !important;
  }

  .mail-item .receiver,
  .mail-item .subject {
    white-space: normal !important;
    word-break: break-word;
  }
}

@media screen and (max-width: 420px) {
  .stat-grid,
  .summary-grid,
  .metric-grid,
  .head-grid,
  .stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .date-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .toolbar .layui-btn,
  .order-toolbar .layui-btn,
  .actions .layui-btn,
  .footer-actions .layui-btn,
  .compose-actions .layui-btn {
    flex: 1 1 auto;
    margin: 0 !important;
  }
}