/* Responsive styles for AKD Milk plugin admin and portal pages */

/*
 * Always make data tables horizontally scrollable on all viewports.
 *
 * Widefat admin tables and all dashboard tables (customer, delivery,
 * counter) can contain many columns. Without horizontal scrolling the
 * table can overflow its container on both desktop and mobile. By
 * setting the table to display as a block with overflow‑x:auto and
 * white‑space:nowrap, the table will expand to fit its content and
 * users can scroll horizontally to see off‑screen columns.  The
 * `white-space: nowrap` prevents cells from wrapping onto multiple
 * lines which would otherwise collapse the table width.  These rules
 * apply globally, not just on small screens, so that large tables
 * remain consistent across devices.
 */
.wrap table.widefat {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.akd-customer-dashboard table,
.akd-delivery-dashboard table,
.akd-counter-dashboard table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

/* Ensure cells in dashboard tables do not wrap text; this inherits
   from the table rules above but we explicitly set it for clarity. */
.akd-customer-dashboard table th,
.akd-customer-dashboard table td,
.akd-delivery-dashboard table th,
.akd-delivery-dashboard table td,
.akd-counter-dashboard table th,
.akd-counter-dashboard table td {
    white-space: nowrap;
}

/* Make tables horizontally scrollable on small screens */
@media (max-width: 768px) {
    /* General admin tables */
    .wrap table.widefat,
    .wrap table.form-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* On small screens, stack form table fields for all user types (admin and portals).
       WordPress form tables often place multiple fields in a single row.  This can
       overflow on narrow screens.  By converting table rows, headers and cells
       into block elements, each label and input appears on its own line.
       We also override white-space to allow wrapping. */
    .wrap table.form-table {
        white-space: normal;
    }
    .wrap table.form-table tr,
    .wrap table.form-table th,
    .wrap table.form-table td {
        display: block;
        width: 100%;
    }
    .wrap table.form-table th {
        margin-top: 10px;
    }
    /* For front‑end dashboards (customer, delivery, counter), wrap tables in a scrollable container on small screens.
       This ensures the table does not break the layout but can be scrolled horizontally if it overflows. */
    .akd-customer-dashboard table,
    .akd-delivery-dashboard table,
    .akd-counter-dashboard table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .akd-customer-dashboard table th,
    .akd-customer-dashboard table td,
    .akd-delivery-dashboard table th,
    .akd-delivery-dashboard table td,
    .akd-counter-dashboard table th,
    .akd-counter-dashboard table td {
        white-space: nowrap;
    }

    /* Stack form-table fields vertically on small screens for front-end dashboards.
       This prevents filter rows from overflowing the viewport by putting each label
       and input on its own line. */
    .akd-counter-dashboard .form-table,
    .akd-customer-dashboard .form-table,
    .akd-delivery-dashboard .form-table {
        display: block;
    }
    .akd-counter-dashboard .form-table tr,
    .akd-counter-dashboard .form-table th,
    .akd-counter-dashboard .form-table td,
    .akd-customer-dashboard .form-table tr,
    .akd-customer-dashboard .form-table th,
    .akd-customer-dashboard .form-table td,
    .akd-delivery-dashboard .form-table tr,
    .akd-delivery-dashboard .form-table th,
    .akd-delivery-dashboard .form-table td {
        display: block;
        width: 100%;
    }
    .akd-counter-dashboard .form-table th,
    .akd-customer-dashboard .form-table th,
    .akd-delivery-dashboard .form-table th {
        margin-top: 10px;
    }

    /* Form inputs occupy full width on small screens */
    .wrap table.form-table input[type="text"],
    .wrap table.form-table input[type="url"],
    .wrap table.form-table input[type="number"],
    .wrap table.form-table input[type="date"],
    .wrap table.form-table select,
    .wrap table.form-table textarea,
    .akd-customer-dashboard input[type="text"],
    .akd-customer-dashboard input[type="url"],
    .akd-customer-dashboard input[type="number"],
    .akd-customer-dashboard input[type="date"],
    .akd-customer-dashboard select,
    .akd-customer-dashboard textarea,
    .akd-delivery-dashboard input,
    .akd-delivery-dashboard select,
    .akd-delivery-dashboard textarea,
    .akd-counter-dashboard input,
    .akd-counter-dashboard select,
    .akd-counter-dashboard textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /*
     * Generic filter form responsiveness
     *
     * Some filter forms in the admin (reports) and in the front‑end dashboards
     * do not use a `form-table` markup and instead rely on inline
     * `<label>` elements for each field.  On narrow screens these inline
     * labels can cause the form to overflow horizontally.  To ensure
     * each filter field appears on its own row for all user types,
     * convert these labels into block elements and make their child
     * inputs/selects full width.  We scope this rule to the .wrap
     * container so it does not affect other parts of the site.
     */
    .wrap form label {
        display: block !important;
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }
    .wrap form label input,
    .wrap form label select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Product card grid used in the counter sale portal.  Displays products in
   responsive two‑column layout with cards that can flip to reveal a form. */
.akd-product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.akd-product-card {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 15px;
    background: #fff;
    box-sizing: border-box;
    flex: 1 1 calc(50% - 10px);
    position: relative;
}

.akd-product-card h3 {
    margin-top: 0;
    font-size: 1.1em;
}

.akd-product-card .button {
    width: 100%;
    margin-top: 5px;
}

/* On very small screens, stack product cards in a single column */
@media (max-width: 600px) {
    .akd-product-card {
        flex: 1 1 100%;
    }
}

/* Delivery list styling for delivery dashboard.  Items appear stacked with
   subtle borders and padding. */
.akd-delivery-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.akd-delivery-item {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 15px;
    background: #fff;
}

/* Ensure delivery dashboard filter rows are full-width on mobile */
@media (max-width: 768px) {
  .akd-delivery-filter table.form-table,
  .akd-delivery-filter table.form-table tr,
  .akd-delivery-filter table.form-table th,
  .akd-delivery-filter table.form-table td {
    display:block;
    width:100% !important;
    box-sizing:border-box;
  }
  .akd-delivery-filter input[type="date"],
  .akd-delivery-filter input[type="text"],
  .akd-delivery-filter select,
  .akd-delivery-filter .button {
    width:100% !important;
    max-width:100%;
  }
}