/* Shared interface layer. Loaded after the existing module styles. */
:root { color-scheme: dark; --ui-space: clamp(12px, 2vw, 28px); }
body { line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #86b7ff !important; outline-offset: 3px;
}
.input { min-height: 44px; border-radius: 12px; }
.btn { min-height: 44px; }
.btn:disabled { cursor: not-allowed; }
.app-content { width: 100%; max-width: 1680px; margin-inline: auto; }
.topbar { padding: max(14px, env(safe-area-inset-top)) var(--ui-space) 14px !important; }
.topbar__left > div { min-width: 0; }
.topbar h1 { font-size: clamp(20px, 2.2vw, 30px) !important; line-height: 1.2 !important; }
.topbar__subtitle { display: block !important; font-size: 12px !important; }
.topbar__controls-left:empty { display: none; }
.topbar__actions.topbar__actions--search-first {
  display: grid !important; grid-template-columns: minmax(220px, 1fr) minmax(280px, .65fr);
  width: 100%; gap: 12px !important;
}
.topbar__actions #search.search-main { width: 100% !important; max-width: none !important; height: 48px !important; font-size: 16px !important; }
.sort-refresh-row { min-width: 0; display: flex; gap: 8px; }
.sort-refresh-row #sortBy { flex: 1; min-width: 0 !important; width: 100% !important; height: 48px !important; }
.sort-refresh-row #refresh { min-height: 48px !important; }
#stockView .kpis { padding: 20px var(--ui-space) 0 !important; gap: 12px !important; }
#stockView .kpi { min-width: 0; padding: 16px !important; border-radius: 16px !important; }
#stockView .kpi__label { font-size: 11px !important; line-height: 1.4 !important; }
#stockView .kpi__value { font-size: 28px !important; font-variant-numeric: tabular-nums; }
#statusFilters { padding: 16px var(--ui-space) 0 !important; gap: 8px !important; }
#statusFilters .chip { min-height: 44px !important; padding: 10px 18px !important; font-size: 14px !important; }
#stockView .bulk-toolbar { margin: 12px var(--ui-space) 0 !important; padding: 0 !important; }
#bulkToggleBtn { min-height: 44px !important; font-size: 13px !important; padding: 8px 14px !important; }
#stockView .grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important; gap: 16px !important; padding: 16px var(--ui-space) 32px !important; }
#stockView .card { border-radius: 20px !important; min-width: 0; }
#stockView .card__img { padding: 8px !important; }
#stockView .card__img img { aspect-ratio: 1; object-fit: cover; border-radius: 14px !important; }
#stockView .card__body { padding: 12px !important; gap: 10px !important; }
#stockView .card__title { font-size: 15px !important; line-height: 1.4 !important; min-height: 2.8em !important; overflow-wrap: anywhere; }
#stockView .card__split { padding: 10px 12px !important; margin: 0 !important; }
#stockView .card__meta { font-size: 12px !important; flex-wrap: wrap; gap: 4px 8px; }
#stockView .card__actions-inline .btn { min-height: 44px !important; font-size: 13px !important; }
#stockView .card__img-top-right .btn { width: 44px !important; height: 44px !important; min-width: 44px !important; }
.side-menu { padding-top: max(86px, calc(env(safe-area-inset-top) + 72px)); height: 100dvh; background: #111722 !important; }
.side-menu__btn { min-height: 48px; text-align: left; }
.side-accordion__summary { padding-block: 14px; }
body.menu-open { overflow: hidden; }
:where(.history, .pricing, .settings, .scan, .finance, .upseller, #notificationsPanel, #kanbanPanel) { min-width: 0; }
:where(.history__head, .pricing__head, .settings__head, .scan__head, .finance__header, .upseller__header) { flex-wrap: wrap; gap: 12px; }
:where(.history__filters, .finance__toolbar, .bestsellers__toolbar) > * { min-width: 0; }
:where(.history__table-wrap, .pricing__targets-wrap) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.history__table th, .history__table td { padding: 12px !important; font-size: 13px !important; }
:where(.upseller__tabs, .finance__tabs, .history__chips, .filament__filters) { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; }
:where(.upseller__tab, .finance__tab, .chip--history, .fil-chip) { flex-shrink: 0; min-height: 44px; }
.dialog { border-radius: 20px; }
.dialog__header { padding: 18px !important; }
.dialog__header button { min-width: 44px; min-height: 44px; }
.dialog__content { overscroll-behavior-y: contain; }
.dialog__actions, .dialog__footer { gap: 10px; padding: 14px 18px !important; flex-wrap: wrap; }
.login-card { width: min(420px, 100%); padding: 28px; }
.login-overlay { padding: max(16px, env(safe-area-inset-top)) 16px; }
@media (min-width: 641px) and (max-width: 1180px) {
  .topbar__left, .topbar__right { flex-wrap: nowrap; }
  #stockView .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .pricing__split, .pricing-admin__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .history__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .history__filters .input { width: 100%; }
}
@media (max-width: 900px) {
  .topbar__actions.topbar__actions--search-first { grid-template-columns: minmax(0, 1fr); }
  .kanban-board, .upseller-kanban-board { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .finance__charts, .finance__breakdown { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  html { scrollbar-gutter: auto; }
  .topbar { position: relative; padding: max(12px, env(safe-area-inset-top)) 12px 12px !important; gap: 12px !important; }
  .topbar__row--main { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; }
  .topbar__left { flex-wrap: nowrap !important; }
  #viewTitle { white-space: normal !important; font-size: 18px !important; overflow: visible !important; }
  #viewSubtitle { white-space: normal !important; font-size: 11px !important; }
  .topbar__right { display: flex; flex-wrap: nowrap; gap: 6px !important; }
  .topbar__right .upseller-cta { display: none !important; }
  .topbar .btn--icon, .topbar__right #openSettings { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  .topbar__actions .sort-refresh-row #sortBy { height: 44px !important; font-size: 14px !important; }
  .topbar__actions .sort-refresh-row #refresh { flex-basis: 44px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  #stockView .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 14px 12px 0 !important; gap: 8px !important; }
  #stockView .kpi { padding: 12px !important; min-height: 80px; }
  #stockView .kpi__label { font-size: 11px !important; }
  #stockView .kpi__value { font-size: 25px !important; }
  #statusFilters { padding: 12px 12px 0 !important; }
  #stockView #statusFilters .chip { min-height: 44px !important; padding: 8px 14px !important; }
  #stockView .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 14px 12px 24px !important; }
  #stockView .card__body { padding: 10px !important; gap: 8px !important; }
  #stockView .card__title { font-size: 13px !important; display: block !important; min-height: 2.8em !important; overflow: visible !important; }
  #stockView .card__split { padding: 8px !important; }
  #stockView .card__split span { font-size: 11px !important; }
  #stockView .card__meta { font-size: 11px !important; }
  #stockView .card__actions-inline { grid-template-columns: minmax(0, 1fr) !important; }
  :where(.pricing__split, .pricing__grid, .pricing-admin__grid, .settings__grid, .fil-form__grid, .edit-prod-cost__grid) { grid-template-columns: minmax(0, 1fr) !important; }
  :where(.history__filters, .finance__toolbar) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .history__filters label:first-child { grid-column: 1 / -1; }
  :where(.history__filters, .finance__toolbar) .input { width: 100% !important; min-width: 0 !important; }
  .finance__period-info { grid-column: 1 / -1; margin-left: 0; }
  .finance__kpis, .upseller__state-counts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .upseller__state-count { padding: 12px !important; }
  .upseller__state-count-label { font-size: 11px !important; }
  .upseller-order__actions-inline .btn, .upseller-order-item > .btn { min-height: 44px !important; }
  .finance-entry { flex-wrap: wrap; }
  .finance-entry__actions { margin-left: auto; }
  .fin-icon-btn { width: 44px; height: 44px; }
  .bulk-toolbar__row { flex-wrap: wrap; gap: 8px; }
  .bulk-toolbar__field { flex: 1 1 120px; }
  .input, .dialog .input, .pricing .input { font-size: 16px !important; }
  dialog.dialog { width: calc(100% - 16px); max-height: calc(100dvh - 24px); margin: 12px auto; }
  .dialog__actions .btn, .dialog__footer .btn { flex: 1 1 120px; }
  .toast-stack { max-width: calc(100vw - 24px); bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  #stockView .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .topbar__right #openSettings { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Prevent intrinsic form and tab widths from stretching tablet layouts. */
.pricing__split > *, .pricing__grid > *, .pricing-admin__grid > * { min-width: 0; }
.pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pricing__grid .input { width: 100%; min-width: 0; }
.upseller__tabs { width: 100%; min-width: 0 !important; overflow-x: auto !important; }
@media (max-width: 640px) {
  .pricing__grid { grid-template-columns: minmax(0, 1fr) !important; }
}
/* UpSeller production has no legacy mobile column selector: keep every stage visible. */
#upsellerKanbanBoard .kanban-column {
  display: flex !important;
  min-width: 0 !important;
  max-width: none;
  width: 100%;
}
#upsellerKanbanBoard .kanban-column__header { display: flex !important; }
#upsellerKanbanBoard .kanban-card__info { min-width: 0; }
#upsellerKanbanBoard .kanban-card__name { overflow-wrap: anywhere; }
#upsellerKanbanBoard .kanban-card__actions { flex-wrap: wrap; }
#upsellerKanbanBoard .kanban-card__move-btn { min-height: 44px; height: auto; }
@media (max-width: 900px) {
  #upsellerKanbanBoard { overflow-x: visible; gap: 14px; }
  #upsellerKanbanBoard .kanban-column { padding: 12px; border: 1px solid var(--glass-border); }
  #upsellerKanbanBoard .kanban-column__body { max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
  .upseller__header { justify-content: space-between !important; }
  .upseller__subtitle { flex: 1; min-width: 0; font-size: 12px !important; }
  .upseller__state-counts-grid { width: 100%; gap: 6px !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .upseller__state-count { padding: 10px 4px !important; min-height: 86px !important; border-radius: 12px !important; }
  .upseller__state-count-label { font-size: 9px !important; }
  .upseller__state-count-value { font-size: 24px !important; }
  .upseller__tabs { margin-top: 4px !important; }
  #upsellerKanbanBoard .kanban-card { grid-template-columns: 44px minmax(0, 1fr); padding: 10px !important; gap: 8px; cursor: default; }
  #upsellerKanbanBoard .kanban-card__img { width: 44px !important; height: 44px !important; }
  #upsellerKanbanBoard .kanban-card__footer { flex-wrap: wrap; gap: 8px; }
  #upsellerKanbanBoard .kanban-card__actions { width: 100%; margin-left: 0; }
  #upsellerKanbanBoard .kanban-card__move-btn { flex: 1 1 auto; }
  .kanban-proj-card { grid-template-columns: 36px minmax(0, 1fr); }
  .kanban-proj-card__right { grid-column: 1 / -1; justify-content: space-between; }
  .kanban-proj-card__btn { min-height: 44px; }
}
@media (max-width: 360px) {
  .upseller__state-counts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  #upsellerKanbanBoard .kanban-card { grid-template-areas: "img body" "footer footer" "actions actions"; }
  #upsellerKanbanBoard .kanban-card__actions { grid-area: actions; justify-self: stretch; }
  #upsellerKanbanBoard .kanban-card__archive-btn { min-width: 44px; min-height: 44px; }
}