/* Mobile rules for the accounting, integrations, settings, and clients
   clusters — scoped entirely inside @media (max-width: 720px).
   Desktop is pixel-identical; every rule here is additive. */

@media (max-width: 720px) {

  /* =======================================================
     ACCOUNTING
     ======================================================= */

  /* --- Header: title + kpis stacked, "New invoice" full-width --- */
  .acc-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px 10px;
  }

  .acc-header-left { min-width: 0; }

  /* KPIs: scrollable horizontal strip instead of hidden, so the data is
     still reachable. The 860px media already hides them — restore them
     at mobile size as a compact horizontal strip. */
  .acc-kpis {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .acc-kpis::-webkit-scrollbar { display: none; }

  .acc-kpi {
    flex: 0 0 auto;
    min-width: 72px;
    padding: 8px 10px;
  }

  .acc-kpi-v { font-size: 15px; }

  .acc-new-btn {
    width: 100%;
    justify-content: center;
    height: 44px;
  }

  /* --- Tabs: segmented control spans full width, comfortable touch targets --- */
  .acc-tabs {
    margin: 10px 14px 0;
    width: auto;
    max-width: none;
  }

  .acc-tabs .tab {
    flex: 1;
    padding: 10px 6px;
    font-size: 13px;
  }

  /* --- Body padding --- */
  .acc-body { padding: 12px 14px; }

  /* --- Inbox / history cards: stack the right column below the main block --- */
  .acc-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px 12px 18px;
  }

  .acc-card-thumb {
    display: none; /* thumbnail not meaningful at phone size; status bar remains */
  }

  .acc-card-top {
    flex-wrap: wrap;
    gap: 6px;
  }

  .acc-card-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 2px;
  }

  .acc-card-action {
    margin-top: 0;
    padding: 5px 12px;
    background: var(--accent-bg);
    border-radius: 999px;
  }

  /* --- Split processing view: already stacked by the 860px breakpoint.
     Refine for phones. --- */
  .acc-split-head {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .acc-split-title {
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Stack doc pane above items pane; both scroll as one page */
  .acc-split {
    flex-direction: column;
    padding: 12px 14px;
    gap: 12px;
    overflow-y: auto;
  }

  .acc-doc, .acc-items {
    overflow: visible;
    min-height: auto;
  }

  /* Doc pane: reduce padding, readable on phone */
  .acc-doc { padding: 12px; gap: 10px; }

  /* PDF preview: shorter so it does not eat the whole screen */
  .acc-doc-pdf { height: 260px; }

  /* Field row: already collapsed to 1-col by 860px media — keep at 1 col */
  .acc-field-row { grid-template-columns: 1fr; }

  /* Capture grid: single column (already done at 860, keep) */
  .acc-capture-grid { grid-template-columns: 1fr; }

  /* Upload zone: full width, comfortable height */
  .acc-upload.dropzone { min-height: 100px; }

  /* --- Line items: each line reflows to two rows on phone --- */
  .acc-line {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }

  /* First row: item name + delete button */
  .acc-line-item {
    grid-column: 1;
    grid-row: 1;
  }

  .acc-line-del {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  /* Second row: qtys + money side by side */
  .acc-line-qtys {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 8px;
  }

  .acc-line-money {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

  /* --- Line items pane head --- */
  .acc-items-head {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* --- Process bar: stack vertically, button full-width --- */
  .acc-process-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .acc-process-bar .acc-field.inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .acc-process-bar select { width: 100%; }

  .acc-process-bar .btn.lg {
    width: 100%;
    justify-content: center;
  }

  /* --- Discrepancies: reflow multi-column rows to stacked card layout --- */
  .acc-disc-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px 10px;
    padding: 12px;
  }

  /* Marker: col 1, row 1, centred with name */
  .acc-disc-marker {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  /* Item block: col 2, row 1 */
  .acc-disc-item {
    grid-column: 2;
    grid-row: 1;
  }

  /* Numbers: span full width below */
  .acc-disc-numbers {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
  }

  /* Action buttons: span full width at bottom */
  .acc-disc-action {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  .acc-resolved-note { text-align: left; max-width: none; }

  /* --- Line editor modal grid-2: single column on phone --- */
  .ie-panel .grid-2 { grid-template-columns: 1fr; }

  /* =======================================================
     INTEGRATIONS
     ======================================================= */

  /* Container: remove side padding, full-bleed on phone */
  .integrations {
    padding: 14px;
    gap: 14px;
  }

  /* Card header: wrap on small screens */
  .ic-head {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }

  .ic-title { width: 100%; order: 3; }
  .ic-logo { order: 1; }
  .ic-status { order: 2; }
  .ic-head .toggle { order: 4; margin-left: auto; }

  /* Unwrap the title block so it fills a row */
  .ic-head { flex-wrap: wrap; }

  /* Card body */
  .ic-body {
    padding: 14px;
    gap: 16px;
  }

  /* Pills: already wrapping, no change needed */

  /* Section spacing */
  .yx-sec { gap: 10px; }

  /* yx-grid: already set to 1-col in styles.css 720px media; no change needed */
  /* yx-cred-row: already set to stacked in styles.css 720px media */

  /* Cred row: on phone the label + value stack + the copy button goes beside the value */
  .yx-cred-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .yx-cred-row:last-of-type { border-bottom: 0; }
  .yx-cred-row .k { font-size: 11px; }
  .yx-cred-row .v {
    font-size: 11px;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  /* yx-map-row: already stacked to 1-col in styles.css; add comfortable padding */
  .yx-map-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .yx-map-row:last-child { border-bottom: 0; }

  /* Map row select: full width */
  .yx-map-row select { width: 100%; }

  /* Action rows: wrap and let buttons be tappable */
  .yx-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .yx-actions .btn { width: 100%; justify-content: center; }
  /* Inline muted text does not stretch */
  .yx-actions .muted { width: 100%; }

  /* Mode toggle row: comfortable on phone */
  .yx-mode { padding: 10px 12px; gap: 10px; font-size: 14px; }

  /* SRC poll input needs to stay usable */
  .src-poll { width: 56px; }

  /* =======================================================
     SETTINGS
     ======================================================= */

  /* Container: tighter padding on phone */
  .settings {
    padding: 14px;
    max-width: none;
  }

  /* Head: stack title + location selector */
  .settings-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }

  .settings-head .loc-select { width: 100%; }
  .settings-head .loc-select select { width: 100%; min-width: 0; }

  /* Sections: comfortable internal padding on phone */
  .settings-section { padding: 14px; }

  /* Currency row: stack on phone, each select full width */
  .currency-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .currency-select { width: 100%; }
  .currency-select select { width: 100%; min-width: 0; }

  /* Paper grid: 2-column tile grid on phone */
  .paper-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
  .paper-card { padding: 12px 8px; min-height: 100px; }

  /* Custom size form: stack fields */
  .custom-size {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .custom-size label { width: 100%; }
  .custom-size input { width: 100%; box-sizing: border-box; }
  .custom-size .btn { width: 100%; justify-content: center; }

  /* Units groups: single column on phone */
  .units-groups { grid-template-columns: 1fr; gap: 10px; }

  /* Unit add form: stack all fields full-width */
  .unit-add { flex-direction: column; align-items: stretch; gap: 8px; }
  .unit-add input,
  .unit-add select { width: 100%; box-sizing: border-box; }
  .unit-add input[data-unit-new="symbol"],
  .unit-add input[data-unit-new="name"] { width: 100%; }
  .unit-add .unit-factor { width: 100%; }
  .unit-add .unit-factor input { width: 100%; box-sizing: border-box; }
  .unit-add .btn { width: 100%; justify-content: center; height: 44px; }

  /* Hours: already flex-wrap; tighten gap */
  .hours-list { gap: 10px; }
  .hours-row { gap: 10px; }

  /* =======================================================
     CLIENTS
     ======================================================= */

  /* Layout: on mobile the detail panel hides behind the list;
     selecting a client shows only the detail (stacked, full-screen).
     We achieve this with a CSS-only approach using a body class or
     the existing selectedId in state — the JS already manages which
     is rendered. We simply make each pane occupy full width. */
  .clients {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
  }

  /* List pane: full width, fixed reasonable height so it scrolls */
  .clients-list-pane {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
    max-height: 50dvh;
  }

  /* If a client is selected, hide the list pane so detail is full-screen.
     The JS renders both; we hide the list when detail is visible. */
  .clients:has(.client-detail:not(.empty)) .clients-list-pane {
    display: none;
  }

  /* Detail panel: full width, comfortable padding */
  .client-detail {
    flex: 1 1 auto;
    padding: 14px;
    overflow-y: auto;
  }

  /* Detail head: allow wrapping */
  .client-detail .cd-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Contact grid: 1-column on phone */
  .client-detail .cd-contact {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 14px 0;
  }

  /* Stats: keep 3-col but tighter */
  .client-detail .cd-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }

  .client-detail .cd-stats .v { font-size: 16px; }

  /* Order rows: reflow the 6-column grid to 2-row layout */
  .cd-order {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }

  .cd-order .num { font-size: 13px; }

  .cd-order .total {
    margin-left: auto;
    align-self: flex-start;
  }

  /* Top row: order number + total */
  .cd-order {
    position: relative;
  }

  .cd-order .chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Client row in list: tighter but still tappable */
  .client-row {
    padding: 10px 12px;
    min-height: 52px;
  }

  /* Back button in detail panel */
  .cd-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
  }

  /* Search bar: full-width comfortable height */
  .clients .cl-search { height: 40px; font-size: 16px; }

  /* "New" button in client list head: fixed width */
  .clients .cl-head .btn { flex: 0 0 auto; height: 40px; }

  /* Back button: when detail is shown, the topbar back arrow is the
     mechanism; the detail panel needs an in-screen back control.
     We add a CSS-driven "back" strip if a client is selected.
     Implementation: add a class on the .client-detail via JS is the
     preferred path — see report notes. For pure CSS we rely on :has(). */
  .client-detail::before {
    content: none; /* placeholder — JS adds a back button; see report */
  }

  /* Empty state: restore list visibility when nothing selected */
  .clients:has(.client-detail.empty) .clients-list-pane {
    display: flex;
    max-height: none;
    flex: 1 1 auto;
  }

  /* Client detail empty state: hide on mobile when list is shown */
  .clients:has(.client-detail.empty) .client-detail.empty {
    display: none;
  }

} /* end @media (max-width: 720px) */