/* ---- on a phone ------------------------------------------------------------
   Loaded after style.css on every page. Everything here is inside a phone-width
   query, so the panel on a computer does not change at all.
   Found by opening every page of every role at 360px: inputs in table rows
   (colours, sizes, wages, fabric purchases, tailor stock) were 21px tall with
   13px text, so a finger missed them and the phone zoomed in on every tap; the
   top bar squeezed a long page description into a narrow column that, being
   sticky, covered half the screen the whole time. */
@media (max-width: 900px) {
  /* 16px is the size below which a phone zooms the whole page on focus;
     :root outweighs «.field select» in style.css, which sets 15px */
  :root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  :root select, :root textarea { font-size: 16px; }
  /* the order form's item rows set their own smaller size one level deeper */
  :root .form-lg .item-row select, :root .item-row select,
  :root .form-lg .item-row input, :root .item-row input { font-size: 16px; min-height: 42px; }

  /* inputs outside a form field (edit-in-place rows) get a finger-sized box */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.field *):not(.input),
  select:not(.field *):not(.input) {
    min-height: 42px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    box-sizing: border-box;
  }

  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex-shrink: 0; }

  .combo__clear { min-width: 40px; min-height: 40px; }

  /* a short link in a table (an order number «۱») is otherwise a 10px target */
  table td a:not(.btn):not(.badge) {
    display: inline-block;
    min-width: 32px;
    min-height: 32px;
    line-height: 32px;
    text-align: center;
  }
  a.badge { min-height: 32px; display: inline-flex; align-items: center; }
  details > summary { min-height: 40px; display: flex; align-items: center; gap: 6px; }

  /* ---- top bar: one short row, whatever the page ---- */
  .topbar { gap: var(--space-2); }
  .topbar__lead { flex: 1; min-width: 0; gap: var(--space-2); }
  .topbar__lead > div { min-width: 0; }
  .topbar__title {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* the page description shows one line; a tap opens the rest (mobile.js) */
  .topbar__lead .topbar__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .topbar__lead .topbar__meta.is-open { white-space: normal; }
  .topbar__user { gap: var(--space-2); flex-shrink: 0; }
  .topbar__user .avatar { display: none; }
  /* «خروج» keeps only its icon: the word pushed the page title into a sliver */
  .topbar__user form .btn { font-size: 0; gap: 0; min-width: 44px; justify-content: center; }
  .topbar__user form .btn svg { width: 18px; height: 18px; }
}

/* «برنامهٔ شیوولی را روی گوشی نصب کنید» — the offer app_install.js puts at the
   top of the panel's pages on a phone browser */
.app-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gold-500, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
}
.app-banner__text { flex: 1; font-weight: 600; color: var(--burgundy); }
.app-banner__close {
  min-width: 40px; min-height: 40px;
  border: 0; background: none; color: var(--ink-soft); font-size: 18px; cursor: pointer;
}