/* ============================================================================
   ARES PHE — Responsive overrides for phone and tablet
   ============================================================================
   Loaded AFTER the inline <style> block in templates/index.html. Because it
   comes last, equal-specificity rules here win; !important is used only where
   an inline style="" attribute has to be beaten.

   Layout is driven by MEDIA QUERIES, not by the body class, so the responsive
   layout still works if JavaScript fails. The body.phone / body.tablet classes
   stamped in <head> exist for JS behaviour and are kept in sync via matchMedia.

   Breakpoints:  phone <= 600px · tablet 601-1024px · desktop > 1024px
   Desktop (> 1024px) is never touched by this file.

   Section map:
     1. Phone — shared guards (images, overflow containment, modals)
     2. Phone — shell (login, header, navigation)
     3. Phone — design workflow (inputs, results, detail, datasheet, drawing)
     4. Phone — CRM and secondary tabs
     5. Tablet
   ========================================================================== */


/* ==========================================================================
   PHONE  (<= 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {

/* ---- 1. SHARED GUARDS --------------------------------------------------- */

/* Contain the page horizontally. Without this, any single wide element makes
   mobile browsers widen the layout viewport and shrink the whole UI — the
   "everything looks tiny and distorted" symptom. Content that genuinely needs
   width (results table, datasheet, drawings) gets its own scroller below. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* No image may exceed its container. Single biggest fix for distorted images:
   many <img> carry fixed pixel width/height in inline styles. */
img {
    max-width: 100%;
    height: auto;
}

/* Modals: every fixed-width dialog becomes viewport-bounded. */
.save-crm-modal,
.admin-modal,
.admin-modal.modal-wide,
.fm-modal,
.fm-detail,
.pw-change-box,
.chpw-box,
.news-popup {
    width: auto !important;
    max-width: 94vw !important;
    max-height: 88dvh;
    box-sizing: border-box;
}
.save-crm-overlay,
.admin-modal-overlay,
.fm-modal-overlay {
    padding: 10px;
    box-sizing: border-box;
}
/* iOS Safari zooms the page in whenever a focused form control has a font
   smaller than 16px, and does not zoom back out afterwards. Nearly every
   control here carries a class (.form-input at 10-12px), which beats a plain
   element selector — so this needs !important to actually take effect.
   Larger controls also give better touch targets; the layout is verified to
   still fit at 320px with these sizes. */
input, select, textarea,
.form-input, .form-input-sm {
    font-size: 16px !important;
}
/* Keep dense read-only chrome compact — these are not typed into. */
input[type="checkbox"], input[type="radio"] {
    font-size: inherit !important;
}


/* ---- 2. SHELL ----------------------------------------------------------- */

/* 2.1 Login / registration */
.login-overlay {
    padding: 16px 16px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 6vh;
}
.login-box,
.register-box {
    width: min(380px, 92vw) !important;
    padding: 26px 20px 22px;
    box-sizing: border-box;
}
.login-box .logo-area img,
.register-box .logo-area img {
    height: auto !important;
    max-height: 54px;
    max-width: 70%;
}
.register-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0;
}

/* 2.2 Header.
   The page declares viewport-fit=cover and apple-mobile-web-app-status-bar-
   style=black-translucent, so when installed to the Home Screen the content
   runs underneath the status bar / notch. The safe-area insets push it back
   into view; they evaluate to 0 on devices and contexts without a notch. */
header {
    padding: calc(6px + env(safe-area-inset-top, 0px)) calc(9px + env(safe-area-inset-right, 0px))
             6px calc(9px + env(safe-area-inset-left, 0px));
    gap: 7px;
    flex-wrap: nowrap;
}
header h1 {
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
header > div:first-child {
    flex: 0 0 auto;
    padding: 2px 4px !important;
}
header > div:first-child img {
    height: 20px !important;
    width: auto;
}
/* Name and role badge are dropped; the buttons that perform actions stay. */
.header-user-info {
    gap: 5px;
    flex: 0 0 auto;
    margin-left: auto;
}
.header-user-info .user-name,
.header-user-info .role-badge {
    display: none;
}
.header-btn {
    padding: 5px 8px;
    font-size: 11px;
    white-space: nowrap;
}

/* 2.3 Bottom tab bar — swipeable strip, every tab stays reachable.
   switchTab() scrolls the active tab into view. */
.sheet-tabs-bar {
    padding: 0 calc(6px + env(safe-area-inset-right, 0px))
             env(safe-area-inset-bottom, 0px) calc(6px + env(safe-area-inset-left, 0px));
    height: calc(42px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sheet-tabs-bar::-webkit-scrollbar { display: none; }
.sheet-tab {
    padding: 0 13px;
    font-size: 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border-radius: 6px 6px 0 0;
    white-space: nowrap;
    margin-top: 4px;
}
/* Decorative logo pinned right of the bar only wastes swipe distance. */
.sheet-tabs-bar > div:last-child:not(.sheet-tab) {
    display: none !important;
}
body {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
}

/* 2.4 Containers */
.container {
    padding: 8px calc(8px + env(safe-area-inset-right, 0px))
             8px calc(8px + env(safe-area-inset-left, 0px));
    max-width: 100%;
}
.input-panel {
    padding: 8px 9px;
    border-radius: 8px;
}
#masquerade-banner {
    font-size: 11px;
    line-height: 1.4;
}


/* ---- 3. DESIGN WORKFLOW ------------------------------------------------- */

/* 3.1 Input grid.
   The desktop layout is a 3-column grid whose children carry explicit
   grid-column / grid-row assignments (hot=col1, cold=col2, settings=col3, and
   a second set of rows for dual mode). Simply switching to one column does NOT
   work: the explicit column numbers create implicit columns again, and the
   explicit row numbers make items collide in a single cell.
   So on phone the grid becomes a flex column, which neutralises every
   grid-* assignment at once, and the visual order is restored with `order`
   (DOM order alone is wrong — in dual mode the capacity field sits near the
   end of the DOM but must appear near the top). */
.input-grid {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}
.input-grid > .capacity-row        { order: 0; }
.input-grid > #dual-l1-header      { order: 1; }
.input-grid > #field-capacity      { order: 2; }
.input-grid > .hot-side            { order: 3; }
.input-grid > .cold-side           { order: 4; }
.input-grid > .settings            { order: 5; }
.input-grid > #tank-batch-section  { order: 6; }
.input-grid > #threein1-section    { order: 7; }
.input-grid > #hb-status           { order: 8; }
.input-grid > #dual-l2-header      { order: 9; }
.input-grid > #dual-l2-capacity    { order: 10; }
.input-grid > #dual-l2-hot         { order: 11; }
.input-grid > #dual-l2-cold        { order: 12; }
.input-grid > #hb-status2          { order: 13; }

/* Dual mode sizes the two capacity boxes at a fixed 300px on desktop. */
.input-grid.dual-mode > #field-capacity .input-with-unit,
.input-grid.dual-mode > #dual-l2-capacity .input-with-unit {
    width: 100% !important;
}

/* 3.2 Capacity / mode row — stack into readable full-width controls. */
.capacity-row {
    flex-wrap: wrap;
    gap: 7px;
    align-items: stretch;
}
.capacity-row .field {
    min-width: 0;
    flex: 1 1 100%;
    align-items: stretch;
}
.capacity-row #design_mode,
.capacity-row #calc_type,
.capacity-row #application {
    width: 100%;
}
/* Unit-set buttons keep their own row and stretch evenly. */
.capacity-row > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start;
}
.unit-set-btn { flex: 1 1 0; }
#field-rating-type { width: 100%; }
#field-rating-type .rst-btn { flex: 1 1 0; }

/* 3.3 Input sections */
.input-section {
    padding: 8px 9px;
    min-width: 0;
}
/* Nested grids declared inline (batch, 3-in-1, settings) must be allowed to
   shrink; grid children default to min-width:auto and otherwise push out. */
.input-section > div[style*="grid-template-columns"] > *,
.input-section > div[style*="display:grid"] > * {
    min-width: 0;
}
/* Batch parameters pair every field with a unit select — two of those side by
   side do not fit a phone, so this section alone drops to one column. */
#tank-batch-section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
.input-section .field-row,
.input-section .form-row {
    flex-wrap: wrap;
}
/* A value + its unit selector must stay on one line and never overflow.
   max-width caps the box outright: relying on flex-shrink alone left the
   field at its 322px content width inside a 264px row at 320px viewports,
   because the text input contributes an intrinsic size from its `size`
   attribute and the unit select carries min-width:50px. */
.input-with-unit {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.input-section .field,
.input-section .field-row {
    max-width: 100%;
    min-width: 0;
}
.input-with-unit input,
.input-with-unit > .form-input:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
.input-with-unit select {
    flex: 0 0 auto;
    max-width: 42%;
    min-width: 0 !important;
}

/* 3.4 Action buttons — full width, comfortable tap targets. */
.btn-row {
    flex-direction: column;
    gap: 8px;
}
.btn-row .btn,
.btn-row button {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
}

/* 3.5 Results.
   The results table has ~18 columns; it cannot reflow. It keeps its natural
   width inside a horizontal scroller, with the model column pinned so a row
   stays identifiable while scrolling sideways. */
.results-summary {
    flex-wrap: wrap;
    gap: 10px 14px;
}
.table-wrapper {
    max-height: 58dvh;
    -webkit-overflow-scrolling: touch;
}
.table-wrapper > table {
    min-width: 940px;
}
.results-panel {
    padding: 10px 9px;
}
.results-panel h2 { font-size: 14px; }

/* 3.6 Detail panel — three columns collapse to one.
   min-width:0 is essential: grid items default to min-width:auto, so a
   section refuses to shrink below its widest content and silently overflows
   the viewport, hiding the right-aligned values. */
.detail-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
}
.detail-section {
    padding: 12px;
    min-width: 0;
}
.detail-row {
    gap: 10px;
    align-items: baseline;
}
/* Labels are short and must stay intact — `anywhere` here would hyphenate
   "Hot" down a single column. Only the value is allowed to break freely,
   which is what lets the row shrink to the phone width. */
.detail-row .label {
    flex: 0 0 auto;
    overflow-wrap: break-word;
}
.detail-row .value {
    flex: 1 1 auto;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The Construction & Pricing block is a hard-coded 4-column grid. */
.detail-section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    min-width: 0;
}

/* Plate reference guide (Plate Arrangement modal): three PNGs with an inline
   height:280px in a non-wrapping flex row. On a phone the row reached 903px
   inside a 371px dialog. It was reachable only by scrolling the dialog
   sideways — the dialog declares overflow-y:auto, and a non-visible value on
   one axis makes the other compute to auto too. Wrap the row and let the
   images scale; the inline height needs !important to be overridden. */
#pa-modal-content > div > div[style*="display:flex"] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
#pa-modal-content img {
    height: auto !important;
    max-height: 200px;
    max-width: 100%;
}
#pa-modal-overlay > div {
    padding: 16px !important;
}

/* 3.7 Datasheet.
   An engineering datasheet must not reflow — reflowing it would change what
   the document says. It keeps its proportions and pans/zooms instead. */
.datasheet-page {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ds-table {
    min-width: 720px;
}
.datasheet-actions {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: stretch;
}
.datasheet-actions .btn {
    flex: 1 1 auto;
    padding: 10px 12px;
}

/* 3.8 Drawing tab */
#dwg-iframe {
    height: 68dvh !important;
}
.drawing-container .dwg-filter-label {
    margin-left: 0;
    display: block;
    margin-top: 6px;
}
.drawing-container .dwg-filter-select {
    width: 100%;
    box-sizing: border-box;
}


/* ---- 4. CRM AND SECONDARY TABS ------------------------------------------ */

/* 4.1 Horizontal button navs (CRM sub-views, Admin sections, manual sections,
   datasheet type bar) all lay out as a single non-wrapping row that is far
   wider than a phone. They become swipeable strips, same idea as the tab bar,
   so every destination stays reachable. */
.crm-subnav,
.admin-subnav,
.ds-type-bar,
.admin-sub-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.crm-subnav::-webkit-scrollbar,
.admin-subnav::-webkit-scrollbar,
.ds-type-bar::-webkit-scrollbar,
.admin-sub-tabs::-webkit-scrollbar { display: none; }
.crm-subnav > *,
.admin-subnav > *,
.ds-type-bar > *,
.admin-sub-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
}
.crm-subnav-btn {
    padding: 9px 13px;
}

/* 4.2 CRM master/detail — side-by-side becomes stacked. */
.crm-split {
    flex-direction: column;
    min-height: 0;
    gap: 10px;
}
.crm-split-left {
    width: auto !important;
    min-width: 0 !important;
    max-height: 42dvh;
}
.crm-split-right {
    min-width: 0;
}

/* 4.3 Wide data tables.
   These have no scroll wrapper in the markup, so the table itself becomes the
   scroller. thead/tbody keep their table display roles, so rows still align —
   only the outer box changes from table to a scrollable block. */
.crm-table,
.admin-table,
.audit-table,
.fm-table,
.pl-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.crm-table thead,
.admin-table thead,
.audit-table thead,
.fm-table thead,
.pl-table thead { display: table-header-group; }
.crm-table tbody,
.admin-table tbody,
.audit-table tbody,
.fm-table tbody,
.pl-table tbody { display: table-row-group; }
.crm-table th, .crm-table td,
.admin-table th, .admin-table td,
.audit-table th, .audit-table td {
    white-space: nowrap;
}

/* 4.4 Generic flex rows that must be allowed to wrap on a phone. */
.crm-quick-actions .action-buttons,
.pl-ctrl-row,
.fm-header-top,
.fm-stats,
.datasheet-actions {
    flex-wrap: wrap;
    min-width: 0;
}
.crm-quick-actions .action-buttons button {
    flex: 1 1 auto;
}

/* 4.5 Everything inside the page container may shrink. Without this, any
   flex/grid child with intrinsic min-width silently pushes past the viewport. */
.container > *,
.crm-container > *,
.admin-content > * {
    min-width: 0;
}

/* 4.6 Multi-column dashboard/form grids collapse to one column.
   .crm-deals-pipeline-row is the important one: its 340px + 1fr template
   leaves the second column about 26px wide on a phone, squeezing the whole
   deal pipeline into an unreadable sliver rather than overflowing — so it
   looks "broken" without ever tripping an overflow check. */
.crm-deals-pipeline-row,
.crm-reminders-notes-row,
.crm-enhanced-pipeline,
.crm-form-grid,
.crm-offer-fields,
.crm-offer-info-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
.crm-section-card { min-width: 0; }
.crm-pipeline-col-body { max-height: 220px; }

/* 4.7 Tables written without a class or a scroll wrapper. Scoped to the tab
   containers so the results table and the datasheet — which have their own
   scrollers and must keep table layout — are untouched. */
#crm-container table:not(.ds-table),
.admin-content table:not(.ds-table),
.crm-subview table:not(.ds-table) {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
#crm-container table:not(.ds-table) thead,
.admin-content table:not(.ds-table) thead,
.crm-subview table:not(.ds-table) thead { display: table-header-group; }
#crm-container table:not(.ds-table) tbody,
.admin-content table:not(.ds-table) tbody,
.crm-subview table:not(.ds-table) tbody { display: table-row-group; }

/* 4.8 Price list — a 4-column control grid collapses to one. */
.pl-controls {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px;
}
.pl-ctrl-group { min-width: 0; }
.pl-ctrl-row { grid-template-columns: 1fr 72px; }
.pl-header { flex-wrap: wrap; gap: 8px; }

/* 4.9 Fluids manager */
#fm-cat-buttons,
#fm-type-ped-buttons {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#fm-cat-buttons::-webkit-scrollbar,
#fm-type-ped-buttons::-webkit-scrollbar { display: none; }
#fm-cat-buttons > *,
#fm-type-ped-buttons > * { flex: 0 0 auto; white-space: nowrap; }
/* Off-canvas detail drawer: 490px is wider than the screen, and its closed
   position must be off-screen for the phone width too. */
.fm-detail {
    width: min(490px, 94vw) !important;
    right: -100vw;
}
.fm-detail.open { right: 0; }
.fm-stat { padding: 8px 12px; }

/* 4.10 Drawing tab filter bar — inline flex row with min-width'd selects. */
.drawing-container > div:first-child {
    flex-wrap: wrap;
    gap: 6px 10px !important;
    padding: 8px 10px !important;
}
.dwg-filter-select {
    min-width: 0 !important;
    width: 100%;
    box-sizing: border-box;
}
/* Spacer that pushes the print button right on desktop. */
.drawing-container > div:first-child > div[style*="flex:1"] { display: none; }

}  /* end phone */


/* ==========================================================================
   TABLET  (601 - 1024px)
   ========================================================================== */
@media screen and (min-width: 601px) and (max-width: 1024px) {

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}
.container {
    padding: 10px;
    max-width: 100%;
}
.save-crm-modal,
.admin-modal.modal-wide {
    max-width: 92vw !important;
    box-sizing: border-box;
}

/* Full tab bar retained, scrollable so nothing is ever clipped. */
.sheet-tabs-bar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    height: calc(34px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sheet-tabs-bar::-webkit-scrollbar { display: none; }
.sheet-tab {
    flex: 0 0 auto;
    padding: 6px 15px;
    white-space: nowrap;
}
body {
    padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px));
}

/* Tablets keep the desktop three-column design form — it fits comfortably
   from 601px up — so only the genuinely oversized pieces are adjusted. */

/* Horizontal button navs: same swipeable treatment as phone. iPad portrait
   (768px) is narrower than the CRM sub-nav plus the Admin sections row. */
.crm-subnav,
.admin-subnav,
.admin-sub-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.crm-subnav::-webkit-scrollbar,
.admin-subnav::-webkit-scrollbar,
.admin-sub-tabs::-webkit-scrollbar { display: none; }
.crm-subnav > *,
.admin-subnav > *,
.admin-sub-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Wide data tables scroll rather than push the page out. */
.crm-table,
.admin-table,
.audit-table,
.fm-table,
.pl-table,
#crm-container table:not(.ds-table),
.admin-content table:not(.ds-table) {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.crm-table thead, .admin-table thead, .audit-table thead,
.fm-table thead, .pl-table thead,
#crm-container table:not(.ds-table) thead,
.admin-content table:not(.ds-table) thead { display: table-header-group; }
.crm-table tbody, .admin-table tbody, .audit-table tbody,
.fm-table tbody, .pl-table tbody,
#crm-container table:not(.ds-table) tbody,
.admin-content table:not(.ds-table) tbody { display: table-row-group; }

/* Action/filter rows wrap instead of running off the edge. */
.crm-quick-actions .action-buttons,
.pl-header,
.fm-header-top,
.datasheet-actions,
.drawing-container > div:first-child {
    flex-wrap: wrap;
    min-width: 0;
}

/* The '340px 1fr' deals row leaves too little for the pipeline at 768px. */
.crm-deals-pipeline-row {
    grid-template-columns: 1fr !important;
}
.crm-section-card { min-width: 0; }

/* Off-canvas fluid drawer must clear the narrower screen. */
.fm-detail {
    width: min(490px, 90vw) !important;
}

/* Containers and grid children may shrink. */
.container > *,
.crm-container > *,
.admin-content > *,
.detail-section,
.input-section {
    min-width: 0;
}

/* Plate reference guide: the three 280px-tall PNGs total ~870px, so the row
   still runs off an iPad in portrait. Same wrap treatment as phone. */
#pa-modal-content > div > div[style*="display:flex"] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
#pa-modal-content img {
    height: auto !important;
    max-height: 250px;
    max-width: 100%;
}

}  /* end tablet */


/* ==========================================================================
   TABLET PORTRAIT  (601 - 900px)
   ==========================================================================
   The capacity row packs mode, capacity+unit, the unit-set buttons (pushed
   right with margin-left:auto), calc type and application onto one line. That
   fits a landscape iPad but collides in portrait — the "UNITS:" label lands on
   top of the unit selector. Dropping the auto margin lets the row wrap. */
@media screen and (min-width: 601px) and (max-width: 900px) {

.capacity-row {
    flex-wrap: wrap;
    row-gap: 8px;
}
.capacity-row > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
}
/* !important is required: the element carries an inline style="flex:1", which
   would otherwise pin the basis at 0 and keep the field too narrow. */
.capacity-row #field-capacity {
    flex: 1 1 260px !important;
}
/* The value+unit pair has a ~260px intrinsic width. In a narrower parent it
   does not shrink — it overflows equally on both sides (the field centres its
   children), dropping the unit selector on top of the neighbouring UNITS
   label. Letting the text input shrink keeps the pair inside its box. */
.capacity-row .input-with-unit {
    width: 100%;
    min-width: 0;
}
.capacity-row .input-with-unit input {
    flex: 1 1 auto;
    min-width: 0;
}
.capacity-row .input-with-unit select {
    flex: 0 0 auto;
}

}  /* end tablet portrait */


/* ═══════════════════════════════════════════════════════════════════════════
   Sales hierarchy screens (added with the hierarchy branch)

   Everything below is inside a media query, per rule 8 — desktop and print are
   untouched. The org chart is the hard case: a drag-and-drop tree with nested
   indentation is close to unusable on a phone, so on touch the drag is dropped
   and the "Move to…" menu (built as the accessibility fallback) becomes the
   primary interaction.
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 600px) {

    /* ── Organisation chart ────────────────────────────────────────────── */

    /* Cards are inline-flex on desktop so they hug their content. On a phone
       that leaves the Move to… menu hanging off the right of a deep branch,
       and rule 4 means the page will CLIP it rather than scroll — so it would
       simply be gone. Full width, wrapping, keeps every control reachable. */
    .org-card {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;          /* rule 3 — otherwise it refuses to shrink */
        box-sizing: border-box;
        gap: 6px !important;
        row-gap: 4px;
    }
    .org-card > span,
    .org-card > strong {
        min-width: 0;
    }

    /* Dragging a card while the page itself scrolls under your finger does not
       work on touch. Turn it off and let the menu do the job. */
    .org-card[draggable] {
        -webkit-user-drag: none;
        cursor: default !important;
    }
    /* The menu is the primary control here, so give it a real tap target and a
       full row rather than a 10px chip wedged beside the badges. */
    .org-card select {
        flex: 1 1 100%;
        /* rule 3, the one child that was missed: a <select>'s content-based minimum is
           its WIDEST option — every assignable manager's full_name at the forced 16px —
           so on a 375px phone a long name pushed the Move to… and Share with… menus past
           the right edge, where rule 4 clips them instead of scrolling to them. The card
           itself got min-width:0 and still measured fine, which is why the merge check
           (card rects) could not see it. */
        min-width: 0;
        max-width: 100%;
        min-height: 34px;
        font-size: 16px !important;   /* rule 7 — iOS zooms below 16px and never returns */
        padding: 4px 6px;
    }
    /* The visibility toggle stays inline — it is one tap, not a menu. */
    .org-card button {
        min-height: 30px;
        font-size: 11px;
    }

    /* Indentation: 22px per level plus padding eats the screen about four
       levels down, and a sales org is commonly five. Halve it and drop the
       left padding; the connecting border still shows the nesting. */
    #org-tree div[style*="margin-left:22px"] {
        margin-left: 10px !important;
        padding-left: 6px !important;
    }

    #org-unassigned {
        padding: 8px !important;
    }

    /* ── The "Working in:" partner switcher ────────────────────────────── */
    /* It sits in the CRM sub-nav, which scrolls horizontally. Left inline it
       is the first thing pushed out of reach; on its own row it stays put. */
    /* No display rule here: crmLoadPartnerSwitch sets display:none inline when the
       caller holds no partner, and `display:block !important` overrode it — showing an
       empty "Working in:" control to every phone user. Width and spacing only; the JS
       owns visibility. */
    #crm-partner-switch {
        width: 100%;
        margin: 0 0 6px 0 !important;
    }
    #crm-partner-switch select {
        min-height: 34px;
        font-size: 16px !important;   /* rule 7 */
        max-width: 100%;
    }

    /* ── Owner / Shared-with controls on customer, project and offer ───── */
    /* These render inside dense header rows that already wrap. Without a
       block of their own the select lands half off-screen next to the tier
       and segment badges. */
    span[id^="crm-owner-"],
    span[id^="crm-share-"] {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-top: 4px;
    }
    span[id^="crm-owner-"] select,
    span[id^="crm-share-"] select {
        min-height: 34px;
        font-size: 16px !important;   /* rule 7 */
        max-width: 100%;
    }
    /* Shared-with chips wrap instead of forming one long unbreakable row. */
    span[id^="crm-share-"] > span {
        display: inline-block;
        margin: 2px 3px 2px 0;
    }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {

    /* Tablet keeps drag — a stylus or a deliberate long-press works at this
       size, and the tree has room to breathe. Only the tap targets grow. */
    .org-card select,
    #crm-partner-switch select,
    span[id^="crm-owner-"] select,
    span[id^="crm-share-"] select {
        min-height: 32px;
        font-size: 16px !important;   /* rule 7 applies to iPad too */
    }
    .org-card {
        min-width: 0;
        max-width: 100%;
    }
    #org-tree div[style*="margin-left:22px"] {
        margin-left: 16px !important;
    }
}
