/* ==========================================================================
   responsive-1024.css — fitting the POS to a 1024x768 terminal.

   Loaded last, after home-redesign.css, so it can adjust that file's values
   without restating them.

   The two constraints of a 1024x768 screen are independent, so they are two
   separate media queries rather than one combined block:

     * max-height: 820px — the short terminals. 768px of height is what
       actually pushes the PAY / VOID row off the bottom of the button panel,
       and 1366x768 and 1280x800 were clipping it too.
     * max-width: 1100px — the genuinely narrow terminals, where the cart
       columns and search bar need to give up padding.

   A 1024x768 screen matches both; a 1366x768 one matches only the first.

   Exact-size queries of the `min-width:1366px and max-width:1366px` kind used
   in media-sizes.css are deliberately avoided here: they match one resolution
   and nothing else, so a terminal a few pixels off — a scaled display, a
   window that is not quite maximised, a scrollbar appearing — falls through
   every branch and gets no sizing at all. Everything below is a range.
   ========================================================================== */


/* ==========================================================================
   SHORT VIEWPORTS (<= 820px tall)
   ========================================================================== */
@media screen and (max-height: 820px) {

  /* The store logo sits in an inline `height: 18vh` box. 18vh is a fair share
     of a 1080px screen but 138px of a 768px one, and the button panel below it
     is a fixed stack — so on every 768px-tall terminal those pixels came
     straight out of the bottom button row, which scrolled out of the panel.
     Cap it in absolute units; !important is needed to beat the inline style. */
  .img-logo .image-container,
  #container2 .image-container {
    height: 76px !important;
    margin: 2px !important;
  }

  .img-logo {
    max-height: none !important;
    padding: 4px 6px !important;
  }

  /* Slightly shorter button cells. 90px is comfortable at 1080p; at 768p the
     panel has ~150px less to spend and five rows to fit into it. */
  .upperButtons tr,
  .lowerButtons tr {
    height: 78px !important;
  }

  .table_buttons_1 td .homeButtons,
  .table_buttons_1 td .full-height-btn,
  .table_buttons_1 td button {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }

  /* The store-info card is the one flexible row in the panel; let it give up
     space before the buttons do. */
  .pos-information .toSwitchUI {
    padding: 6px 8px !important;
  }

  .pos-info dt,
  .pos-info dd,
  .infoSystem label {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .pos-info {
    column-gap: 10px !important;
    row-gap: 4px !important;
  }

  /* Modals: on a short screen a centred dialog taller than the viewport gets
     its header and footer cut off with no way to reach them. Cap the dialog
     and let its body scroll instead of the dialog overflowing. */
  .modal-dialog {
    max-height: 94vh !important;
  }

  .modal-content {
    max-height: 94vh !important;
  }

  .modal-body {
    overflow-y: auto !important;
  }
}


/* ==========================================================================
   NARROW VIEWPORTS (901px - 1100px)

   Lower bound is 901px so this never overlaps the stacked phone/tablet layout
   in home-redesign.css, which now starts below 900px.
   ========================================================================== */
@media screen and (min-width: 901px) and (max-width: 1100px) {

  /* Search row: the scan button and its label take a fixed slice of a row that
     is now ~677px wide, so the input itself needs the padding back. */
  .searchDiv {
    gap: 6px !important;
    padding: 6px 8px !important;
  }

  .search_input {
    font-size: 13px !important;
    padding: 7px 10px !important;
    min-width: 0 !important;
  }

  .primary_button_style.s_btn_product {
    padding: 7px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Cart table: tighter cells so the money columns stay on one line. */
  .primary_color_table th {
    font-size: 10px !important;
    padding: 6px 6px !important;
  }

  #tbody-cashiering tr td,
  .pos-transaction td,
  .pos-transaction th {
    font-size: 11px !important;
    padding: 6px 6px !important;
  }

  /* The item name keeps its lead over the rest of the row here too — a little
     smaller than at full width, but nowhere near the 11px the money columns
     use. Safe to grow: the widths below pin every column with table-layout:
     fixed, so the name's font size can no longer push PRICE and TOTAL around
     the way it did when this table was auto-layout.
     Needs the .prod_desc class to outrank the bare `td` rule above. */
  #tbody-cashiering tr td.prod_desc {
    font-size: 15px !important;
  }

  /* Cart column widths.
     The cart header and the cart body are two separate <table>s stacked on top
     of each other, so their columns line up only while auto-layout happens to
     resolve both the same way. At 677px it gave the description 72% of the row
     and collapsed the money columns until "2,450.00" in PRICE ran into the
     TOTAL beside it, and the SKU column showed "SK...". Pinning the two wide
     columns in BOTH tables leaves the rest to auto-layout and keeps the two in
     step — pinning only the body is what pulls them apart.
     Body cells are addressed by class, not position: the SKU pair is not
     rendered for business type 5, so column indexes are not stable there. */
  #theads,
  #tableTransactions {
    table-layout: fixed !important;
    width: 100% !important;
  }

  #theads thead th:nth-child(1),
  #tbody-cashiering td#table-sku          { width: 12% !important; }
  #theads thead th:nth-child(2),
  #tbody-cashiering td.first-col          { width: 3%  !important; }
  #theads thead th:nth-child(3),
  #tbody-cashiering td.prod_desc          { width: 47% !important; }
  #theads thead th:nth-child(4),
  #tbody-cashiering td.cus-col-qty        { width: 9%  !important; }
  #theads thead th:nth-child(5),
  #tbody-cashiering td.cus-col-price      { width: 12% !important; }
  #theads thead th:nth-child(6),
  #tbody-cashiering td#iconDiscount       { width: 3%  !important; }
  #theads thead th:nth-child(7),
  #tbody-cashiering td#totalRowPrice      { width: 14% !important; }

  /* Money must never be clipped or run into the column beside it, whatever the
     column ends up being. */
  #tbody-cashiering td.cus-col-qty,
  #tbody-cashiering td.cus-col-price,
  #tbody-cashiering td#totalRowPrice {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Totals block under the cart. */
  .total_summary_amount {
    gap: 4px !important;
  }

  .amount-text {
    font-size: 0.95rem !important;
  }

  /* Button panel labels: the panel is ~319px here rather than 510px, so three
     buttons across a row leaves ~100px each. */
  .homeButtons small {
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
  }

  .homeButtons .card {
    padding: 4px 2px !important;
  }

  .homeButtons svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Slide-out menu must not cover the whole screen. */
  .side-menu {
    width: 300px !important;
    max-width: 80vw !important;
  }

  /* Nothing in the POS shell may exceed the viewport. These are the containers
     that historically carried a fixed px width from a 1920 design. */
  .responsiveContainer,
  .table-container,
  .table-container-total,
  .table_container_headers,
  .searchInput_container {
    max-width: 100% !important;
  }
}


/* ==========================================================================
   NARROW VIEWPORTS — modals and data tables
   Applied by width alone so the same caps hold on a 1024x1280 portrait panel.
   ========================================================================== */
@media screen and (max-width: 1100px) {

  /* Every dialog, whatever its design width, must fit the screen. Bootstrap's
     .modal-lg / .modal-xl are 800px and 1140px, and several POS dialogs carry
     a hard-coded px width from a larger monitor. */
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .payCash-dialog,
  .addNotes-dialog {
    max-width: 96vw !important;
  }

  /* media-sizes.css shrinks .modal with zoom at some exact widths; make sure a
     1024 terminal renders dialogs at their true size instead. */
  .modal {
    zoom: 1 !important;
    -moz-transform: none !important;
  }

  /* Wide report / history tables scroll inside their own box rather than
     stretching the page and creating a horizontal scrollbar on the shell. */
  .table-responsive,
  .tableEndOfDayContainer,
  .CustomersList,
  .products-storage {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}


/* ==========================================================================
   AUTH / LOCK SCREEN SYSTEM-INFO PANEL

   style.css pins .login_sys_info with position:fixed, a 200px height and
   margin-top:-15%. That percentage resolves against the viewport WIDTH, so on
   a 1024x768 terminal the panel is pushed to roughly 615px and its last lines
   (Device ID, Software Name) fall past the bottom of a 768px screen with no
   way to scroll to them — position:fixed does not extend the document.

   Anchor it to the bottom-left and let it size to its content instead. Guarded
   above 768px width because auth.css already reflows the panel into the normal
   document flow on phone-width screens.
   ========================================================================== */
@media screen and (min-width: 769px) and (max-height: 820px) {
  .login_sys_info {
    top: auto !important;
    bottom: 8px !important;
    left: 10px !important;
    height: auto !important;
    max-height: 40vh !important;
    margin: 0 !important;
    overflow-y: auto !important;
    font-size: 11px !important;
  }

  .login_sys_info img {
    max-height: 44px !important;
  }
}