/* =====================================================================
   Motorparts - phone / tablet layout on top of the hencework theme.
   Desktop (>1024px) is unchanged. Print output is untouched: every rule
   here is inside @media screen.
   ===================================================================== */

/* tenant bars (multi-company version) - all sizes */
.mp-tenant-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 0; padding: 8px 12px; border-radius: 3px; font-size: 13px; line-height: 1.4; }
.mp-tenant-bar i { font-size: 15px; }
.mp-tenant-bar-warn { background: #fff4e5; border: 1px solid #f5c26b; color: #8a5300; }
.mp-tenant-bar-info { background: #e8f1ff; border: 1px solid #9cc0f5; color: #1d4f91; }
.mp-tenant-bar-link { margin-left: auto; font-weight: 600; text-decoration: underline; color: inherit !important; }
.mp-login-notice { margin-bottom: 20px; }

/* bottom bar + backdrop are phone-only */
.mp-bottom-bar { display: none; }
.mp-backdrop { display: none; }

@media screen and (max-width: 1024px) {
  /* left menu = drawer over the page instead of pushing the page sideways */
  .wrapper.slide-nav-toggle .page-wrapper { left: 0 !important; }
  .fixed-sidebar-left { z-index: 1040; transition: margin-left .2s ease; box-shadow: none; }
  .wrapper.slide-nav-toggle .fixed-sidebar-left { box-shadow: 2px 0 12px rgba(0,0,0,.35); }
  .mp-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(0,0,0,.4); }
  .fixed-sidebar-left .side-nav > li > a { padding-top: 12px; padding-bottom: 12px; }
  html, body { overflow-x: hidden; }
}

@media screen and (max-width: 767px) {
  /* ---------- page frame ---------- */
  .page-wrapper > .container-fluid { padding-left: 15px; padding-right: 15px; }
  .page-wrapper { padding-bottom: 64px; } /* room for the bottom bar */
  .footer { display: none; }

  /* title row: no negative margins, wraps, print toolbar hidden */
  .heading-bg { margin-left: 0 !important; margin-right: 0 !important; height: auto !important; padding: 12px 0 6px !important; }
  .heading-bg > div { padding-left: 0; padding-right: 0; float: none; width: auto; }
  .heading-bg h5 { font-size: 17px; margin: 0; white-space: normal; }
  .heading-bg .breadprint { display: none; }

  /* panels / cards */
  .panel.card-view { padding: 10px 10px 0; margin-bottom: 12px; }
  .panel .panel-heading { padding: 0 0 8px; }
  .panel-wrapper, .panel-body { padding-left: 0 !important; padding-right: 0 !important; }
  .pa-30, .pl-30, .pr-30 { padding-left: 10px !important; padding-right: 10px !important; }
  .page-wrapper .ml-20, .page-wrapper .mr-20 { margin-left: 0 !important; margin-right: 0 !important; }

  /* grid: Bootstrap already stacks col-sm/md/lg below 768px; inline widths must not overflow */
  .page-wrapper [style*="width:"]:not(table):not(img), .page-wrapper [style*="width: "]:not(table):not(img) { max-width: 100%; }

  /* ---------- forms: 16px (no iOS zoom), tap-size controls ---------- */
  input.form-control, select.form-control, textarea.form-control, .select2-container .select2-selection, .input-group-addon,
  .dataTables_wrapper input, .dataTables_wrapper select { font-size: 16px !important; }
  .form-control, .select2-container .select2-selection--single { min-height: 42px; }
  .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px; }
  .select2-container .select2-selection--single .select2-selection__arrow { height: 40px; }
  .form-control[style*="width"] { max-width: 100% !important; }
  .input-group { width: 100%; }
  .btn { min-height: 40px; }
  .btn-xs, .btn-sm { min-height: 32px; }
  .form-inline .form-control, .form-inline .input-group { width: 100% !important; display: block; }
  .form-inline .form-group { display: block; margin-bottom: 10px; }

  /* ---------- tables: scroll inside the card, never the page ---------- */
  .table-responsive { border: 0; margin-bottom: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* tables wider than their card get .mp-hscroll from AppLayout (fitTables) */
  .page-wrapper table.mp-hscroll { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive table td, .table-responsive table th, table.mp-hscroll td, table.mp-hscroll th { white-space: nowrap; }
  .table > thead > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 8px 8px !important; }
  /* inputs inside cart tables keep a usable width */
  .page-wrapper table td .form-control { min-width: 72px; }

  /* DataTables controls stack */
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; width: 100%; margin: 0 0 8px; }
  .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0 !important; display: block; }
  .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 40px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 6px 10px !important; }
  .dataTables_wrapper .dataTables_paginate { white-space: normal; }
  /* the table scrolls sideways inside .table-responsive; its search / paging stay in view */
  .table-responsive .dataTables_wrapper .dataTables_length, .table-responsive .dataTables_wrapper .dataTables_filter,
  .table-responsive .dataTables_wrapper .dataTables_info, .table-responsive .dataTables_wrapper .dataTables_paginate { position: sticky; left: 0; max-width: calc(100vw - 52px); }

  /* row action menu opens as a sheet over the scrolling table (see ActionMenu.vue) */
  .dropdown-menu.mp-fixed-menu { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: 72px !important; width: auto !important; max-height: 60vh; overflow-y: auto; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 1060; }
  .dropdown-menu.mp-fixed-menu > li > a { padding: 12px 16px; font-size: 15px; }

  /* top nav: icons that make sense on phones only */
  .mp-hide-phone { display: none !important; }
  .navbar.navbar-inverse.navbar-fixed-top .nav-header .logo-wrap .brand-text { font-size: 16px; }

  /* charts, images */
  .morris-chart, [id^="morris_"] { max-width: 100%; overflow: hidden; }
  .page-wrapper img { max-width: 100%; height: auto; }
  .modal-dialog { margin: 10px; }

  /* POS cart (header / lines / totals are three tables): scroll them together */
  .page-wrapper .direct-chat > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-wrapper .direct-chat > div > table, .page-wrapper .direct-chat > div > .direct-chat-messages { min-width: 560px; }
  /* the totals table under the lines fits the screen (no sideways scroll for the amounts) */
  .page-wrapper .direct-chat > div > table:last-child:not(:first-child) { min-width: 0; width: 100%; position: sticky; left: 0; }
  .page-wrapper .direct-chat > div > table:last-child:not(:first-child) td { width: auto !important; white-space: normal; }
  .page-wrapper .direct-chat > div > table:last-child:not(:first-child) td[width="90"] { white-space: nowrap; }

  /* POS: product tiles in a scroll box so the cart stays near; action buttons wrap their text */
  .pos-screen .product-panel { min-height: 0 !important; max-height: 48vh !important; width: 100% !important; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: center; }
  .pos-screen .product-panel .product-select { float: none !important; display: inline-block; vertical-align: top; margin-left: 4px !important; margin-right: 4px; }
  .pos-screen .btn, .page-wrapper .direct-chat ~ * .btn { white-space: normal; }

  /* POS product tiles (sales / purchase create): 2 per row */
  .pro-img-overlay, .product-pro-wrap { max-width: 100%; }

  /* invoice / report views on screen: scroll sideways instead of squeezing */
  .printableArea { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* bottom bar */
  .mp-bottom-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; height: 58px; background: #fff; border-top: 1px solid #e3e3e3; box-shadow: 0 -2px 8px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom); }
  .mp-bottom-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b6b6b; font-size: 11px; text-decoration: none; }
  .mp-bottom-bar a i { font-size: 21px; line-height: 1; margin-bottom: 3px; }
  .mp-bottom-bar a.active { color: #f33923; }
  #toaster { bottom: 70px !important; }

  /* About page digital clock (800px wide) */
  .ClockHolder { width: auto !important; max-width: 100%; overflow-x: auto; padding: 20px 10px !important; }

  /* login */
  .auth-form-wrap { padding: 20px 0; }
  .sp-header .form-group.pull-right { display: none; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* tablets: tables scroll inside their card too */
  .page-wrapper table.mp-hscroll { display: block; max-width: 100%; overflow-x: auto; }
  .heading-bg { margin-left: 0 !important; margin-right: 0 !important; }
  .ClockHolder { width: auto !important; max-width: 100%; overflow-x: auto; }
}