/* EstateFlow OS — PHONE tier (max-width: 720px).
   Loaded after style.css (base/desktop) and tablet.css. The @media wrappers
   are kept inside each block so load order can never widen their scope. */

@media (max-width: 720px) {
  body::before { background-image: url("bg-mobile.webp"); }
}

@media (max-width: 720px) {
  .brand-logo { height: 30px; }
}

@media (max-width: 720px) {
  .footer-long { display: none; }
  .footer-short { display: inline; }
}

@media (max-width: 640px) {
  /* phones: hide the tag pills in list view so each row stays one line */
  .grid.as-list .card-body .meta { display: none; }
}

@media (max-width: 640px) {
  .find-history-item.fh-desktop { display: none; }
}

@media (max-width: 720px) {
  .widget { grid-template-columns: 1fr; }
  /* The four US timezone clocks eat too much of a phone screen. */
  .widget-clocks { display: none; }
}

@media (max-width: 720px) {
  .building-row td:first-child { padding-left: 12px; }
}

@media (max-width: 720px) {
  .module-restore { display: flex; margin-top: 6px; }
  .module-restore input[type="file"] { max-width: none; flex: 1; min-width: 0; }
}

@media (max-width: 640px) { .stock-stats { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 720px) {
  /* Brand and Settings share the top line; the module tabs move to their own
     full-width line that scrolls sideways in one row instead of wrapping. */
  .topbar-row { padding: 9px 14px; flex-wrap: wrap; gap: 10px 14px; }
  .topbar-main { gap: 12px 16px; }
  .modules, .topbar-main .modules { order: 10; flex: 1 0 100%;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px; }
  .modules::-webkit-scrollbar { display: none; }
  .submenu { flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px 14px; }
  .submenu::-webkit-scrollbar { display: none; }
  .submenu a, .modtab { white-space: nowrap; }
  /* Dropdown panels inside the scrolling tab strip would be clipped by its
     scrollport; fixed positioning lets them overlay the page instead. */
  .modules .menu-panel { position: fixed; left: 14px; right: auto; top: auto; }
  /* On small screens, anchor the Settings panel to the left so it can't run
     off the right edge. */
  .menu-panel { right: auto; left: 0; }
  .who { padding-left: 12px; white-space: nowrap; }

  .container { margin: 12px 10px; padding: 14px 12px; border-radius: 12px; }
  h1 { font-size: 21px; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat .num { font-size: 22px; }

  .detail-grid { grid-template-columns: 1fr; }
  .form { padding: 16px; }
  .form .row { flex-direction: column; gap: 0; }

  /* Filters and inline add-forms: one control per line, full width. */
  .filters, .inline-form { flex-direction: column; align-items: stretch; }
  .filters input, .filters select,
  .inline-form input, .inline-form select { width: 100%; min-width: 0; }

  .detail-head { flex-wrap: wrap; gap: 10px; }
  .detail-actions, .backup-actions { flex-wrap: wrap; }

  /* Wide tables scroll sideways instead of breaking the page layout. */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
           white-space: nowrap; }

  /* Tables marked .cards-sm reflow into stacked cards (no side-scroll). */
  .cards-sm { overflow-x: visible; white-space: normal; }
  .cards-sm thead { display: none; }
  .cards-sm, .cards-sm tbody, .cards-sm tr, .cards-sm td { display: block; width: 100%; }
  .cards-sm tr { border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); padding: 6px 14px; margin-bottom: 10px; }
  .cards-sm td { border: 0; padding: 6px 0; display: flex; gap: 14px;
    justify-content: space-between; align-items: baseline; text-align: right; }
  .cards-sm td::before { content: attr(data-label); color: var(--muted);
    font-weight: 600; font-size: 12px; text-align: left; white-space: nowrap; }
  /* Result thumbnails sit in the card's top-right corner; the card leaves
     room so the first rows' values don't slide underneath. */
  .cards-sm tr { position: relative; }
  .cards-sm tr:has(td.thumb-cell) { padding-right: 84px; min-height: 74px; }
  .cards-sm td.thumb-cell { position: absolute; top: 8px; right: 10px;
    width: auto; padding: 0; }
  .cards-sm td.thumb-cell::before { content: none; }
  .cards-sm .find-thumb, .cards-sm .find-thumb-ph { width: 58px; height: 58px; }
}

@media (max-width: 430px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
  /* Full-width buttons in content forms for easier tapping, but leave nav,
     small table buttons, and inline role forms inline. */
  .form .btn-primary, .form .btn-ghost, .form .btn-danger,
  .filters .btn-primary, .filters .btn-ghost,
  .inline-form .btn-primary { width: 100%; text-align: center; }
  .form .actions { flex-direction: column; }
  /* …but a button sharing a row with an input (SKU Auto, logo Upload)
     stays inline so the input keeps its width. */
  .form .sku-row .btn-ghost { width: auto; flex: 0 0 auto; }
  .sku-row input { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 720px) {
  .users-table .col-email, .users-table .col-access,
  .users-table .col-display, .users-table .col-lastlogin,
  .table .col-email, .table .col-members, .table .col-ip { display: none; }
  /* Hand all freed space to the name column so the action buttons hug the
     right edge instead of floating mid-table. */
  .users-table th:first-child, .users-table td:first-child { width: 99%; }
}

@media (max-width: 480px) {
  .users-table .col-role, .table .col-role { display: none; }
}

@media (max-width: 640px) {
  .review-row { grid-template-columns: 1fr 84px; }
  .review-row input[type="text"] { grid-column: 1 / -1; }
}