/* ==========================================================================
   Pump Selector - mobile / tablet layer
   ==========================================================================

   Loaded AFTER styles.css so it wins equal-specificity ties. Nothing here
   introduces a literal colour: every surface, ink and line is painted from
   the token set defined in styles.css, so a customer re-brand (or the
   Settings panel's runtime overrides) flows through unchanged.

   Two breakpoints:
     <= 860px  tablet + phone   - touch sizing, drawer, dark-rail cohesion
     <= 640px  phone            - single-column app layout, card-per-record

   Direction: all inline offsets use logical properties (inset-inline-*,
   padding-inline-*, border-inline-*) so the Arabic (dir="rtl") layout mirrors
   without a second set of rules. The one place that cannot be expressed
   logically (the drawer's translateX) gets an explicit html[dir="rtl"]
   override at the bottom of this file.
   ========================================================================== */


/* ==========================================================================
   1. Tablet + phone (<= 860px)
   ========================================================================== */

@media (max-width: 860px) {

  /* ---- touch targets -------------------------------------------------- */

  /* styles.css's 860px block compacts every button to 34px for "touch
     screens", which is the opposite of what touch needs: 34px is well under
     the 44px minimum. Restore a 44px tap area while keeping the visual
     weight compact by trading height for horizontal padding, not font size. */
  .primary-button,
  .secondary-button,
  .outline-button,
  .danger-button,
  .ghost-button,
  .icon-button {
    height: auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    margin-inline-start: -8px;
  }

  .header-profile {
    min-height: 44px;
  }

  /* ---- drawer shell --------------------------------------------------- */

  #app-drawer {
    width: min(320px, 88vw);
    padding: 0;
    gap: 0;
  }

  /* The drawer is one scrolling column with a pinned header; every section
     shares the same 16px gutter and 14px rhythm so it stops reading as a
     reflowed desktop rail. */
  #app-drawer > * {
    flex: none;
    padding-inline: 16px;
  }

  .drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-block: 14px 12px;
    margin-bottom: 0;
    background: var(--color-sidebar);
    border-bottom: 1px solid var(--sidebar-line);
  }

  :root[data-theme="light"] .drawer-header {
    border-bottom-color: var(--sidebar-line);
  }

  .drawer-header-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sidebar-ink-muted);
  }

  :root[data-theme="light"] .drawer-header-title {
    color: var(--sidebar-ink-muted);
  }

  .drawer-close-button {
    width: 40px;
    height: 40px;
    margin-inline-end: -8px;
    background: var(--sidebar-surface);
    color: var(--sidebar-ink);
  }

  :root[data-theme="light"] .drawer-close-button {
    background: var(--sidebar-surface);
    color: var(--sidebar-ink);
  }

  .drawer-close-button:hover {
    background: var(--sidebar-surface-hover);
  }

  #app-drawer .sidebar-section {
    padding-block: 14px;
    margin: 0;
    border-top: 1px solid var(--sidebar-line);
  }

  #app-drawer .sidebar-tools {
    border-top: none;
    padding-top: 12px;
  }

  #app-drawer .sidebar-section-heading {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sidebar-ink-muted);
  }

  /* ---- drawer: tools + settings rows ---------------------------------- */

  .sidebar-tools-list {
    gap: 2px;
  }

  .sidebar-tool-button,
  .sidebar-settings-button,
  .drawer-control-row {
    min-height: 44px;
    height: auto;
    border-radius: 9px;
  }

  .drawer-mobile-controls {
    gap: 6px;
  }

  .drawer-control-row {
    background: var(--sidebar-surface);
    border-color: var(--sidebar-line);
    color: var(--sidebar-ink);
  }

  :root[data-theme="light"] .drawer-control-row {
    background: var(--sidebar-surface);
    border-color: var(--sidebar-line);
    color: var(--sidebar-ink);
  }

  .drawer-control-row select {
    height: 44px;
    /* the row already draws the control chrome - the select must not draw a
       second border inside it */
    border: none;
    background: transparent;
  }

  #app-drawer .sidebar-settings-block {
    padding-top: 0;
    border-top: none;
  }

  /* ---- drawer: dashboard cards ---------------------------------------- */

  /* These are the desktop workspace cards. On the dark rail they were light
     glass panels dropped onto navy - the "desktop sidebar reflowed" tell.
     Repaint them from the --sidebar-* rail tokens and compress them into
     compact reference rows. */
  #app-drawer .drawer-dashboard {
    padding-bottom: 20px;
  }

  .drawer-dashboard-grid {
    gap: 8px;
  }

  .drawer-dashboard .info-card {
    position: relative;
    padding: 12px;
    padding-inline-start: 42px;
    background: var(--sidebar-surface);
    border: 1px solid var(--sidebar-line);
    border-radius: 10px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .drawer-dashboard .info-card:hover {
    border-color: var(--sidebar-line);
    box-shadow: none;
  }

  /* icon becomes a fixed gutter mark rather than a stacked block, which is
     what created most of the dead vertical space */
  .drawer-dashboard .info-icon {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--sidebar-accent);
  }

  .drawer-dashboard .info-icon svg {
    width: 15px;
    height: 15px;
  }

  .drawer-dashboard .info-card h3 {
    font-size: 12px;
    line-height: 1.5;
    color: var(--sidebar-ink);
  }

  .drawer-dashboard .info-card p {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--sidebar-ink-muted);
  }

  /* The "Multilingual Access" card listed all six languages directly under
     the drawer's own language <select>. Drop the duplicate list. */
  .drawer-dashboard .info-card ul:not(.dashboard-activity-list) {
    display: none;
  }

  .drawer-dashboard .dashboard-activity-list {
    gap: 3px;
    margin-top: 7px;
  }

  .drawer-dashboard .dashboard-activity-list li {
    padding: 6px 8px;
    border-radius: 7px;
    background: var(--sidebar-surface);
    color: var(--sidebar-ink);
    font-size: 11px;
  }

  /* --sidebar-ink-muted measures 3.95:1 once it lands on a doubly-lightened
     rail surface (card surface + row surface), so the timestamp takes full
     rail ink and stays secondary through size alone. */
  .drawer-dashboard .dashboard-activity-time {
    color: var(--sidebar-ink);
  }

  .drawer-dashboard .dashboard-activity-empty {
    color: var(--sidebar-ink-muted);
  }

  /* --sidebar-accent on the rail card measures 4.45:1 - just under AA - so
     the support address takes rail ink and is marked as a link by rule
     rather than by hue alone. */
  .drawer-dashboard .support-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--sidebar-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ---- top chrome: one line colour that resolves in all three themes --- */

  .app-sidebar,
  .sidebar-brand,
  .app-header {
    border-bottom-color: var(--sidebar-line);
  }
}


/* ==========================================================================
   2. Phone (<= 640px)
   ========================================================================== */

@media (max-width: 640px) {

  :root {
    --page-padding: 14px;
    --card-padding: 14px;
    --section-gap: 12px;
    --density-gap: 10px;
    --density-field-h: 44px;
  }

  /* ---- 2.1 top chrome --------------------------------------------------
     Before: the sidebar reflowed to a 415px block (brand + a 264px product
     showcase card with a 96px image well) sitting above a 61px header and a
     120px two-row stat strip - 596px, 73% of an iPhone viewport, before the
     first input. Target: one slim brand row, one product-context row, one
     sticky toolbar, one single-line stat rail. */

  .app-sidebar {
    padding: 0 var(--page-padding) 10px;
    gap: 0;
  }

  .sidebar-brand {
    align-items: center;
    gap: 10px;
    padding-block: 10px;
    margin-bottom: 8px;
  }

  .sidebar-brand-mark,
  .sidebar-brand-mark img {
    width: 26px;
    height: 26px;
  }

  .sidebar-brand-divider {
    display: none;
  }

  .title-row h1 {
    font-size: 13px;
    line-height: 1.25;
  }

  .pro-badge {
    font-size: 8.5px;
    padding: 2px 5px;
  }

  /* product context row: thumbnail | name + series | change control */
  .sidebar-products .sidebar-section-heading,
  .sidebar-products .product-selected-caption,
  .sidebar-products .product-chip-row {
    display: none;
  }

  .sidebar-products .product-panel {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  .sidebar-products .product-selector {
    gap: 0;
  }

  .sidebar-products .product-selected-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    box-shadow: none;
  }

  .sidebar-products .product-media-large {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 7px;
  }

  .sidebar-products .product-selected-name {
    grid-column: 2 / -1;
    grid-row: 1;
    font-size: 12.5px;
    line-height: 1.3;
  }

  .sidebar-products .product-selected-series {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 0;
    font-size: 10.5px;
  }

  /* row 3 is the action line: catalogue link on the reading edge, the
     product switcher opposite it */
  .sidebar-products .selected-catalogue-link {
    grid-column: 1 / 3;
    grid-row: 3;
    min-height: 44px;
    margin-top: 0;
  }

  .sidebar-products .product-toggle-button {
    grid-column: 3;
    grid-row: 3;
    width: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 0 12px;
    font-size: 11px;
  }

  /* Expanding the product list used to push the entire page down by ~450px.
     Float it as a dropdown over the workspace instead. It keeps the rail's
     dark ground so the --sidebar-* ink tokens the cards are painted with
     stay on the surface they were measured against. */
  .sidebar-products .product-list-wrap {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    z-index: 40;
    margin-top: 0;
  }

  .sidebar-products .product-list.is-open {
    max-height: 62vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--sidebar-line);
    border-radius: var(--radius-card);
    background: var(--color-sidebar);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  }

  :root[data-theme="light"] .sidebar-products .product-list.is-open {
    box-shadow: var(--shadow-elevated);
  }

  .sidebar-products .product-card {
    min-height: 48px;
  }

  /* toolbar */
  .app-header {
    min-height: 52px;
    padding-block: 4px;
  }

  /* stat rail: one scrollable line of inline chips instead of two wrapped
     rows of stacked chips */
  .control-bar {
    padding: 8px 0;
  }

  .spec-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 0 var(--page-padding);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .spec-strip::-webkit-scrollbar {
    display: none;
  }

  .spec-chip {
    flex: none;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 999px;
  }

  .spec-chip strong {
    font-size: 12px;
  }

  .spec-chip em {
    font-size: 9.5px;
    white-space: nowrap;
  }

  .spec-chip-status strong {
    padding-inline-start: 12px;
    padding-left: 0;
  }

  .spec-chip-status strong::before {
    inset-inline-start: 0;
    left: auto;
  }

  /* ---- 2.2 workspace + filter form ------------------------------------ */

  .workspace {
    padding-block: var(--section-gap) 0;
  }

  .card-title {
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .card-title h2 {
    font-size: 14px;
  }

  .title-icon {
    width: 28px;
    height: 28px;
  }

  .input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    margin-bottom: 0;
  }

  .input-grid label {
    gap: 5px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  /* Primary action bar. It sits at the foot of the form card and pins to the
     bottom of the viewport whenever the form is taller than the screen (long
     translations, small phones, large text), so "Search Pumps" is always a
     thumb-reach away. When the form fits, sticky is inert and it simply
     renders in place - no floating chrome over short pages. */
  .filter-action-row {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 10px;
    margin: 14px calc(var(--card-padding) * -1) calc(var(--card-padding) * -1);
    padding: 10px var(--card-padding) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: var(--glass-bg-strong, var(--color-card));
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }

  /* dissolve the two desktop groupings so their children land directly on
     the action-bar grid */
  .filter-action-left,
  .filter-action-right {
    display: contents;
  }

  .filter-action-row .checkbox-row {
    grid-column: 1 / -1;
    min-height: 24px;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .filter-action-left .checkbox-row {
    grid-row: 1;
  }

  .filter-action-right .checkbox-row {
    grid-row: 2;
  }

  .filter-action-row .checkbox-row input {
    width: 18px;
    height: 18px;
    flex: none;
  }

  #search-pumps {
    grid-column: 1;
    grid-row: 3;
    font-weight: 700;
  }

  .filter-action-left [type="reset"] {
    grid-column: 2;
    grid-row: 3;
    padding: 0 13px;
  }

  #export-report {
    grid-column: 3;
    grid-row: 3;
    padding: 0 13px;
  }

  /* Reset and Export become icon-only here: their labels would squeeze the
     primary action below a usable width. Both keep title= tooltips and the
     full label returns above 640px. */
  .filter-action-left [type="reset"] span:not(.btn-icon),
  #export-report span:not(.btn-icon) {
    display: none;
  }

  /* ---- 2.3 status legend ----------------------------------------------
     174px of legend above the results was the single largest block of dead
     space on the page. The badges carry their own labels, so the sentence
     that restates them is redundant at this width. */
  .status-strip {
    gap: 6px;
    padding: 10px 12px;
  }

  .status-key {
    flex: none;
  }

  .status-key > span:not(.status-badge) {
    display: none;
  }

  /* ---- 2.4 results: one card per model --------------------------------- */

  .results-summary {
    display: block;
    margin-bottom: 12px;
  }

  .results-title h2 {
    font-size: 14.5px;
    line-height: 1.35;
  }

  .summary-metrics {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin-top: 10px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .summary-metrics::-webkit-scrollbar {
    display: none;
  }

  .summary-metrics span {
    flex: none;
    white-space: nowrap;
    border-radius: 999px;
  }

  .results-summary .compare-motors-button {
    width: 100%;
    margin-top: 10px;
  }

  .result-context {
    font-size: 11.5px;
    line-height: 1.45;
  }

  /* The wrapper's border and scroller belonged to a table; the cards carry
     their own edges now. */
  .results-panel .table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  .results-table {
    background: transparent;
    font-size: 12.5px;
  }

  .results-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
    margin-bottom: 10px;
    padding: 12px 13px;
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-border-strong);
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
  }

  .results-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .results-table tbody tr:hover {
    background: var(--color-card);
  }

  /* the status accent moves off the first cell (now a grid item in the
     middle of the card) and onto the card edge itself */
  .results-table tbody tr[class*="status-row-"] td:first-child {
    border-left: none;
    border-inline-start: none;
  }

  .results-table tbody tr.status-row-suitable { border-inline-start-color: var(--status-suitable); }
  .results-table tbody tr.status-row-near-suitable { border-inline-start-color: var(--status-near-suitable); }
  .results-table tbody tr.status-row-oversized { border-inline-start-color: var(--status-oversized); }
  .results-table tbody tr.status-row-undersized { border-inline-start-color: var(--status-undersized); }

  .results-table td {
    display: block;
    width: auto;
    padding: 0;
    border: none;
  }

  .results-table td::before {
    display: block;
    margin-bottom: 1px;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.07em;
  }

  /* card header: model name on the left, status pill on the right */
  .results-table td:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .results-table td:nth-last-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }

  .results-table td:first-child::before,
  .results-table td:nth-last-child(2)::before,
  .results-table td:last-child::before {
    display: none;
  }

  .results-table td:first-child strong {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
  }

  .results-table td:first-child > span {
    font-size: 11px;
  }

  .results-table td > span {
    margin-top: 1px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  /* actions: full-width footer strip inside the card, 44px targets */
  .results-table td:last-child {
    grid-column: 1 / -1;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .table-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 7px;
  }

  .table-actions .action-button {
    height: auto;
    min-height: 44px;
    padding: 0 8px;
    font-size: 11.5px;
  }

  .table-actions .favorite-button {
    padding: 0 12px;
  }

  /* ---- 2.5 batch requirements: one card per requirement ---------------- */

  /* The 13-column requirement table was 1763px wide inside a 314px scroller.
     Every cell already carries a translated data-label, so it can take the
     same card-per-record shape as the results. */
  .batch-table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  .batch-input-table {
    background: transparent;
  }

  .batch-input-table thead {
    display: none;
  }

  .batch-input-table,
  .batch-input-table tbody,
  .batch-input-table tr,
  .batch-input-table td {
    display: block;
    width: 100%;
  }

  .batch-input-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card);
  }

  .batch-input-table td {
    padding: 0;
    border: none;
  }

  /* defensive: ui.js toggles .is-hidden on the series / borewell cells for
     non-submersible products but the hidden state was never declared */
  .batch-input-table td.is-hidden,
  .batch-input-table th.is-hidden {
    display: none;
  }

  .batch-input-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-font-muted);
  }

  /* row header: requirement number left, remove control right */
  .batch-input-table td:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .batch-input-table td:first-child::before {
    display: inline;
    margin: 0 6px 0 0;
  }

  .batch-input-table td:first-child .requirement-no {
    font-size: 14px;
    color: var(--color-heading);
  }

  .batch-input-table td:last-child {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .batch-input-table td:last-child::before {
    display: none;
  }

  .batch-input-table .remove-row-button {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .batch-input-table input,
  .batch-input-table select {
    width: 100%;
    min-width: 0;
    height: 44px;
  }

  .batch-actions,
  .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #search-batch {
    grid-column: 1 / -1;
    order: -1;
  }

  .batch-graph-toolbar {
    gap: 10px;
  }

  /* ---- 2.6 modals: full-screen sheets ---------------------------------- */

  .graph-dialog,
  .settings-dialog {
    margin: 0;
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-inline: none;
  }

  .graph-close-button {
    top: 10px;
    inset-inline-end: 10px;
    right: auto;
    width: 44px;
    height: 44px;
  }

  .graph-header h2 {
    font-size: 15px;
  }

  /* ---- 2.7 footer + empty states --------------------------------------- */

  .app-footer {
    padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 11px;
  }

  .message-panel {
    padding: 20px var(--card-padding);
  }
}


/* ==========================================================================
   3. RTL (Arabic) - the offset that cannot be expressed logically
   ========================================================================== */

@media (max-width: 860px) {
  html[dir="rtl"] #app-drawer {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.3);
  }

  html[dir="rtl"] #app-drawer.is-open {
    transform: translateX(0);
  }
}