/* app-shell.css — the native-feel layer, loaded by every page after its own styles.
   Phone conventions: press states not hover, 44pt targets, no tap delay, no input zoom,
   translucent blurred bars with safe-area padding, bottom sheets, list rows instead of tables.
   Desktop is untouched above 900px except for press states. Light-only, like the rest. */

:root { --shell-tab-h: 56px; --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; }
button, a, [role="button"], input, select, textarea, label { touch-action: manipulation; }
button, .btn { -webkit-user-select: none; user-select: none; }
button:active:not(:disabled), .btn:active:not(:disabled), .shell-tabs a:active, .tabbar button:active { transform: scale(.97); opacity: .92; transition: transform .08s ease, opacity .08s ease; }
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }      /* iOS zooms into anything smaller */
  button, .btn { min-height: 40px; }
  .btn.sm, .tabbar button, .shell-tabs a { min-height: 44px; }
}

/* Bars: the supplier page's own (.mtop / .tabbar) and the shared ones (.shell-tabs) */
.mtop, .tabbar, .shell-tabs {
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.mtop { border-bottom-color: rgba(0, 0, 0, .08); }
.tabbar { border-top: 1px solid rgba(0, 0, 0, .08); padding: 6px var(--sar) calc(6px + var(--sab)) var(--sal); }
.tabbar button { gap: 4px; font-size: 10px; letter-spacing: .01em; padding: 4px 2px; }
.tabbar svg { width: 22px; height: 22px; }

.shell-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex;
  border-top: 1px solid rgba(0, 0, 0, .08); padding: 6px var(--sar) calc(6px + var(--sab)) var(--sal);
}
.shell-tabs a {
  flex: 1; display: grid; justify-items: center; gap: 4px; padding: 4px 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .01em; color: #8b8ca0; text-decoration: none;
}
.shell-tabs a:hover { text-decoration: none; }
.shell-tabs a[aria-current="true"] { color: var(--accent, #6c47ff); }
.shell-tabs svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .shell-tabs { display: none; } }

/* Phone layout */
@media (max-width: 899px) {
  .crumb, .breadcrumb { display: none; }                          /* breadcrumbs are a web idiom */
  .stat, .panel, .tl, .card, .dos, .rlist { border-radius: 14px; }
  main, .wrap { padding-bottom: calc(var(--shell-tab-h) + var(--sab) + 28px) !important; }
  .wrap { padding-left: 16px; padding-right: 16px; padding-top: 14px; }
  .answer { font-size: 24px; line-height: 1.2; margin-bottom: 14px; }
  .card { padding: 14px; margin-bottom: 14px; }
  .card h2 { font-size: 16px; }
  .signout { float: none; display: block; margin: 0 0 10px; font-size: 13px; }
  /* dialogs become bottom sheets */
  .veil { align-items: end; padding: 0; }
  .sheet { border-radius: 18px 18px 0 0; max-width: none; max-height: 88vh; padding-bottom: var(--sab); animation: shell-sheet-up .22s ease-out; }
  .sheet .shd { padding-top: 16px; }
  .sheet .shd::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(0, 0, 0, .18); }
  .sheet { position: relative; }
}
@keyframes shell-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Tables become labelled list rows on phones (labels are set by shell.js from the header cells) */
@media (max-width: 699px) {
  table.shell-list thead { display: none; }
  table.shell-list, table.shell-list tbody { display: block; width: 100%; }
  table.shell-list tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line, #e9e9ee); }
  table.shell-list tr:last-child { border-bottom: 0; }
  table.shell-list td { display: block; padding: 0; border: 0; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
  table.shell-list td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: #8b8ca0; letter-spacing: .02em; text-transform: uppercase; }
  table.shell-list td:not([data-label])::before { display: none; }
  table.shell-list td:empty { display: none; }
  table.shell-list td.shell-action { grid-column: 1 / -1; margin-top: 4px; }
  table.shell-list td.shell-action::before { display: none; }
  table.shell-list td.shell-action button { width: 100%; }
  table.shell-list td.shell-action .inline-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  table.shell-list td.shell-action .inline-form button { grid-column: 1 / -1; }
  .table-wrap, .table-container { overflow: visible; }
}

/* iOS install hint (login page) */
.shell-hint {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); z-index: 50;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 12px 14px; border-radius: 14px; background: #131316; color: #fff;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); font-size: 13px; line-height: 1.4;
}
.shell-hint b { font-size: 14px; }
.shell-hint span { grid-column: 1; color: rgba(255, 255, 255, .78); }
.shell-hint button { grid-row: 1 / span 2; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; }

/* Installed (standalone) mode */
html.standalone .shell-hint { display: none; }
html.standalone body { min-height: 100vh; }