/* RBLottery shared design layer: inventory/POS dashboard themes. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --rb-bg: #f3f6fb;
  --rb-surface: #ffffff;
  --rb-surface-2: #f8fafc;
  --rb-surface-3: #eef4ff;
  --rb-text: #0f172a;
  --rb-muted: #64748b;
  --rb-border: #d9e2ef;
  --rb-border-strong: #b8c6d9;
  --rb-primary: #2563eb;
  --rb-primary-soft: #dbeafe;
  --rb-success: #16a34a;
  --rb-success-soft: #dcfce7;
  --rb-warning: #d97706;
  --rb-warning-soft: #fef3c7;
  --rb-danger: #dc2626;
  --rb-danger-soft: #fee2e2;
  --rb-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --rb-shadow-lg: 0 14px 36px rgba(15, 23, 42, .12);

  --fg: var(--rb-text);
  --muted: var(--rb-muted);
  --card: var(--rb-surface);
  --border: var(--rb-border);
  --primary: var(--rb-primary);
  --primary-100: var(--rb-primary-soft);
  --ok: var(--rb-success);
  --ok-100: var(--rb-success-soft);
  --ok-600: #15803d;
  --radius: 8px;
  --r-sm: 8px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --rb-bg: #0b1220;
  --rb-surface: #121a2a;
  --rb-surface-2: #182235;
  --rb-surface-3: #1d2b45;
  --rb-text: #e5edf7;
  --rb-muted: #9fb0c6;
  --rb-border: #2b3a52;
  --rb-border-strong: #43546f;
  --rb-primary: #60a5fa;
  --rb-primary-soft: #172f55;
  --rb-success: #4ade80;
  --rb-success-soft: #12351f;
  --rb-warning: #fbbf24;
  --rb-warning-soft: #3a2c0d;
  --rb-danger: #f87171;
  --rb-danger-soft: #3f171b;
  --rb-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  --rb-shadow-lg: 0 18px 42px rgba(0, 0, 0, .36);

  --fg: var(--rb-text);
  --muted: var(--rb-muted);
  --card: var(--rb-surface);
  --border: var(--rb-border);
  --primary: var(--rb-primary);
  --primary-100: var(--rb-primary-soft);
  --ok: var(--rb-success);
  --ok-100: var(--rb-success-soft);
  --ok-600: var(--rb-success);
}

* { box-sizing: border-box; }

html { background: var(--rb-bg); }

body {
  background: var(--rb-bg) !important;
  color: var(--rb-text) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--rb-primary); }
a:hover { color: var(--rb-primary); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rb-primary) 38%, transparent);
  outline-offset: 2px;
}

body > main.container {
  width: min(1440px, calc(100% - 28px));
  max-width: none;
  padding: 14px 0 32px;
}

body > nav.container-fluid {
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid var(--rb-border);
  background: color-mix(in srgb, var(--rb-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--rb-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding-block: 10px;
}

body > nav.container-fluid ul {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

body > nav.container-fluid strong {
  color: var(--rb-text);
  letter-spacing: 0;
}

body > nav.container-fluid a,
body > nav.container-fluid li {
  color: var(--rb-text);
}

.rb-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--rb-border);
  border-radius: 999px;
  background: var(--rb-surface-2);
  color: var(--rb-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.rb-theme-toggle:hover { border-color: var(--rb-primary); }
.rb-theme-toggle__icon { font-size: 14px; line-height: 1; }

input,
select,
textarea {
  background: var(--rb-surface) !important;
  border-color: var(--rb-border-strong) !important;
  color: var(--rb-text) !important;
  border-radius: 8px !important;
}

input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--rb-muted) 82%, transparent); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rb-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rb-primary) 20%, transparent) !important;
}

.muted,
.sd-muted,
.small-note,
.cam-foot {
  color: var(--rb-muted) !important;
}

.btn,
button,
input[type="submit"],
input[type="button"],
.btn-stack a,
.btn-stack summary {
  border-radius: 8px !important;
  border-color: var(--rb-border) !important;
  background: var(--rb-primary) !important;
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 0;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn-stack a:hover,
.btn-stack summary:hover {
  filter: brightness(1.03);
  box-shadow: var(--rb-shadow);
}

.btn--light,
.btn--soft,
.btn--ghost,
.btn-ghost,
.tab-btn.inactive,
.sd-quick a,
.pill {
  background: var(--rb-surface-2) !important;
  border-color: var(--rb-border) !important;
  color: var(--rb-text) !important;
}

.btn-ok,
.commit-add {
  background: var(--rb-success-soft) !important;
  border-color: color-mix(in srgb, var(--rb-success) 62%, var(--rb-border)) !important;
  color: color-mix(in srgb, var(--rb-success) 72%, var(--rb-text)) !important;
}

.btn-danger,
.btn--danger,
.commit-remove {
  background: var(--rb-danger-soft) !important;
  border-color: color-mix(in srgb, var(--rb-danger) 58%, var(--rb-border)) !important;
  color: color-mix(in srgb, var(--rb-danger) 72%, var(--rb-text)) !important;
}

.btn--close {
  background: var(--rb-warning-soft) !important;
  border-color: color-mix(in srgb, var(--rb-warning) 58%, var(--rb-border)) !important;
  color: color-mix(in srgb, var(--rb-warning) 66%, var(--rb-text)) !important;
}

.rb-global-lookup,
.sidebar,
.wrap-card,
.table-card,
.sd-card,
.sd-filter,
.auth-card,
.rb-book-modal,
#scanModal .panel,
.modal,
.cam-modal,
article,
.card {
  background: var(--rb-surface) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--rb-shadow) !important;
  color: var(--rb-text) !important;
}

.rb-global-lookup {
  width: min(1380px, calc(100% - 28px)) !important;
  margin-top: 14px !important;
  border-left: 4px solid var(--rb-primary) !important;
  display: grid !important;
  grid-template-columns: auto minmax(260px, 1fr) 44px auto;
  gap: 10px !important;
  align-items: center !important;
}

.rb-global-lookup label,
.section-head,
.stat .k,
.closed-filter-label,
.auth-field label {
  color: var(--rb-text) !important;
}

.rb-global-lookup input {
  width: 100%;
  min-width: 0 !important;
  height: 44px !important;
}

.rb-global-lookup #rbGlobalBookBtn {
  width: auto !important;
  max-width: none !important;
  min-width: 118px;
  height: 44px !important;
}

.rb-lookup-help {
  grid-column: 2 / -1;
  margin: -4px 0 0 !important;
  color: var(--rb-muted) !important;
  line-height: 1.35;
}

.js-open-camera {
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.rb-book-card,
.panel-inner,
.list-box,
.stat,
.slot-tile,
.smart-search-box,
.smart-result-row,
.rb-result-row {
  background: var(--rb-surface-2) !important;
  border-color: var(--rb-border) !important;
  color: var(--rb-text) !important;
  box-shadow: none !important;
}

.wrap-card {
  padding: 16px !important;
  margin-bottom: 16px;
}

.rb-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.rb-page-head h1 {
  margin: 0;
}

.rb-page-head p {
  margin: 4px 0 0;
}

.page {
  grid-template-columns: minmax(220px, 260px) 1fr !important;
  gap: 18px !important;
}

.sidebar {
  padding: 12px !important;
}

.sidebar .btn,
.sidebar .btn-stack a,
.sidebar .btn-stack summary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 42px;
  width: 100%;
  gap: 8px;
  line-height: 1.2;
  margin: 8px 0 !important;
}

.slots-grid {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
  gap: 8px !important;
}

.slot-tile {
  position: relative;
  aspect-ratio: 6 / 5 !important;
  padding: 10px !important;
  border-radius: 8px !important;
  transition: border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

.slot-tile:hover {
  transform: translateY(-1px);
  border-color: var(--rb-primary) !important;
  box-shadow: var(--rb-shadow-lg) !important;
}

.slot-tile.is-active {
  background: var(--rb-success-soft) !important;
  border-color: color-mix(in srgb, var(--rb-success) 70%, var(--rb-border)) !important;
}

.slot-tile.slot-scanned {
  background: var(--rb-warning-soft) !important;
  border-color: var(--rb-warning) !important;
  box-shadow: inset 0 0 0 2px var(--rb-warning) !important;
}

.slot-tile.slot-missing {
  background: var(--rb-danger-soft) !important;
  border-color: var(--rb-danger) !important;
  box-shadow: inset 0 0 0 2px var(--rb-danger) !important;
}

.badge,
.badge-status,
.chip,
.rb-status,
.session-pill,
.sd-pill,
.pill {
  border-radius: 999px !important;
  border-color: var(--rb-border) !important;
  background: var(--rb-surface-3) !important;
  color: var(--rb-text) !important;
}

.badge--active,
.rb-status.UNOPENED,
.rb-status.ACTIVE {
  background: var(--rb-success-soft) !important;
  border-color: var(--rb-success) !important;
  color: color-mix(in srgb, var(--rb-success) 70%, var(--rb-text)) !important;
}

.badge--empty,
.rb-status.NOT_IN_INVENTORY {
  background: var(--rb-warning-soft) !important;
  border-color: var(--rb-warning) !important;
  color: color-mix(in srgb, var(--rb-warning) 70%, var(--rb-text)) !important;
}

.rb-status.SOLD,
.rb-status.RETURNED {
  background: var(--rb-danger-soft) !important;
  border-color: var(--rb-danger) !important;
  color: color-mix(in srgb, var(--rb-danger) 70%, var(--rb-text)) !important;
}

table {
  color: var(--rb-text) !important;
}

th,
.report-table-wrapper th,
.table-card th {
  background: var(--rb-surface-3) !important;
  color: var(--rb-text) !important;
  border-color: var(--rb-border) !important;
}

td,
.report-table-wrapper td,
.table-card td {
  background: var(--rb-surface) !important;
  color: var(--rb-text) !important;
  border-color: var(--rb-border) !important;
}

tfoot td,
.report-table-wrapper tfoot td {
  background: var(--rb-surface-2) !important;
}

tbody tr:hover td,
.report-table-wrapper tbody tr:hover td {
  background: var(--rb-surface-2) !important;
}

.report-table-wrapper,
.closed-filter-bar,
.tabs-row {
  border-color: var(--rb-border) !important;
}

.report-table-wrapper,
.table-card,
.table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.report-table-wrapper table,
.table-card table,
.table-wrap table {
  min-width: 680px;
}

.actions,
.rb-modal-actions,
.modal footer,
.modal-actions,
.pager-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.modal footer form,
.rb-modal-actions form {
  margin: 0 !important;
}

.modal footer .btn,
.rb-modal-actions .btn,
.actions .btn {
  width: auto !important;
  margin: 0 !important;
}

.tab-btn,
.pill.active,
.sd-quick a.active,
.mode-btn.active {
  background: var(--rb-primary-soft) !important;
  border-color: var(--rb-primary) !important;
  color: var(--rb-text) !important;
  box-shadow: inset 0 -2px 0 var(--rb-primary) !important;
}

.mode-btn,
.action-btn-full,
.sd-apply,
.btn-mini {
  background: var(--rb-primary) !important;
  color: #fff !important;
  border-color: var(--rb-primary) !important;
}

.mode-btn.remove {
  background: var(--rb-danger-soft) !important;
  border-color: var(--rb-danger) !important;
  color: color-mix(in srgb, var(--rb-danger) 72%, var(--rb-text)) !important;
}

.sd-title h1,
.auth-title,
h1,
h2,
h3 {
  color: var(--rb-text) !important;
  letter-spacing: 0 !important;
}

.sd-title h1 {
  font-size: clamp(30px, 4vw, 44px) !important;
}

.sd-cards,
.stats-grid,
.sd-subgrid {
  gap: 10px !important;
}

.sd-big,
.stat .v {
  color: var(--rb-text) !important;
}

.sd-row {
  color: var(--rb-text) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--rb-border) 70%, transparent);
  padding-bottom: 4px;
}

.sd-row:last-child { border-bottom: 0; }

.rb-toast,
.rb-loading-card {
  background: var(--rb-surface) !important;
  border-color: var(--rb-border) !important;
  color: var(--rb-text) !important;
}

.rb-loading-overlay {
  background: color-mix(in srgb, var(--rb-bg) 76%, transparent) !important;
}

.rb-toast--success,
.rb-success-box,
.smart-status.success {
  background: var(--rb-success-soft) !important;
  border-color: var(--rb-success) !important;
  color: color-mix(in srgb, var(--rb-success) 70%, var(--rb-text)) !important;
}

.rb-toast--error,
.rb-toast--danger,
.rb-error-box,
.auth-alert,
.smart-status.error {
  background: var(--rb-danger-soft) !important;
  border-color: var(--rb-danger) !important;
  color: color-mix(in srgb, var(--rb-danger) 70%, var(--rb-text)) !important;
}

.rb-toast--warning,
.smart-status.warning {
  background: var(--rb-warning-soft) !important;
  border-color: var(--rb-warning) !important;
  color: color-mix(in srgb, var(--rb-warning) 70%, var(--rb-text)) !important;
}

#scanModal,
.modal-backdrop,
.rb-book-modal-backdrop,
.cam-backdrop {
  background: rgba(2, 6, 23, .72) !important;
}

#scanVideo,
.cam-video {
  background: #000 !important;
}

.auth-wrap {
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
}

.auth-card {
  width: min(520px, 100%);
  padding: 26px !important;
  border-top: 4px solid var(--rb-primary) !important;
}

.auth-sub,
.auth-help {
  color: var(--rb-muted) !important;
}

.auth-title {
  margin: 0;
  font-size: clamp(30px, 5vw, 42px);
}

.auth-sub {
  margin: 6px 0 18px;
  line-height: 1.45;
}

.auth-field {
  display: block;
  margin-bottom: 12px;
  font-weight: 800;
}

.auth-card input {
  width: 100%;
  height: 44px;
  margin-top: 6px;
}

.auth-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
}

.pw-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.pw-group input {
  flex: 1 1 auto;
  min-width: 0;
}

.pw-group button {
  flex: 0 0 auto;
  min-width: 76px;
  height: 44px;
  margin-top: 6px;
}

.rb-field-error {
  display: block;
  margin-top: 4px;
  color: var(--rb-danger) !important;
  font-weight: 800;
}

@media (max-width: 900px) {
  body > main.container {
    width: min(100% - 20px, 100%);
    padding-top: 10px;
  }

  body > nav.container-fluid {
    position: static;
  }

  .page {
    grid-template-columns: 1fr !important;
  }

  .slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .slot-tile {
    min-height: 76px !important;
    aspect-ratio: auto !important;
  }

  .rb-global-lookup {
    width: min(100% - 20px, 100%) !important;
    grid-template-columns: 1fr 44px;
    align-items: stretch !important;
  }

  .rb-global-lookup label,
  .rb-lookup-help,
  .rb-global-lookup #rbGlobalBookBtn {
    grid-column: 1 / -1;
  }

  .sd-cards,
  .stats-grid,
  .sd-subgrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  body > nav.container-fluid {
    align-items: flex-start;
    flex-direction: column;
  }

  body > nav.container-fluid ul {
    gap: 6px;
    flex-wrap: wrap;
  }

  .rb-theme-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .rb-global-lookup input {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  .pw-group {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .slots-grid {
    gap: 7px !important;
  }
}

.rb-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: 999px !important;
  background: var(--rb-surface-2) !important;
  color: var(--rb-text) !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.rb-book-modal .rb-close,
.close-x,
#scanClose,
.cam-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 40px;
  height: 36px;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: 8px !important;
  background: var(--rb-surface-2) !important;
  color: var(--rb-text) !important;
  box-shadow: none !important;
}

.rb-book-modal .rb-close,
.close-x {
  min-width: 36px;
  padding: 0 !important;
  font-size: 22px;
}

/* =========================================================
   Responsive hardening layer
   Keeps all operational screens polished from phone → tablet → desktop.
   This intentionally lives after the shared theme rules so page-level legacy
   CSS keeps its look while layout/overflow safety is enforced globally.
   ========================================================= */

img,
svg,
video,
canvas {
  max-width: 100%;
}

body {
  overflow-x: clip !important;
}

body > nav.container-fluid,
body > main.container,
.rb-global-lookup,
.wrap-card,
.table-card,
.sd-card,
.auth-card,
.card,
article,
.panel-inner,
.rb-book-modal,
.modal,
.cam-modal,
#scanModal .panel {
  max-width: 100%;
}

body > nav.container-fluid {
  padding-inline: clamp(12px, 2vw, 24px) !important;
}

body > nav.container-fluid ul:first-child {
  min-width: 0;
}

body > nav.container-fluid ul:first-child strong {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(46vw, 360px);
}

body > nav.container-fluid a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

body > nav.container-fluid a:hover {
  background: var(--rb-surface-2);
}

body > main.container {
  container-type: inline-size;
}

.rb-page-head,
.sd-title,
.section-head,
.wrap-card > header,
.table-card > header,
.card > header {
  min-width: 0;
}

.rb-page-head > *,
.sd-title > *,
.section-head > *,
.wrap-card > header > *,
.table-card > header > *,
.card > header > * {
  min-width: 0;
}

.rb-page-head h1,
.rb-page-head h2,
.sd-title h1,
.section-head h1,
.section-head h2 {
  overflow-wrap: anywhere;
}

.actions,
.auth-actions,
.btn-row,
.closed-filter-bar,
.tabs-row,
.mode-row,
.report-search,
.inventory-search,
.sd-quick,
.rb-modal-actions,
.modal footer,
.pager-row {
  min-width: 0;
}

.actions .btn,
.actions a,
.auth-actions .btn,
.btn-row .btn,
.rb-modal-actions .btn,
.modal footer .btn,
.pager-row button,
.pager-row .btn,
.mode-btn,
.tab-btn,
.pill,
.sd-quick a {
  min-height: 40px;
}

.report-search input,
.inventory-search input,
.closed-filter-bar input,
.closed-filter-bar select,
.rb-modal-actions input,
.modal input,
.modal select,
.modal textarea,
.smart-search-input,
.auth-card input {
  min-width: 0 !important;
}

.stats-grid,
.sd-cards,
.sd-subgrid,
.cards,
.smart-grid,
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: clamp(10px, 1.5vw, 16px) !important;
}

.stat,
.sd-card,
.card,
.smart-card,
.wrap-card,
.table-card,
.panel-inner {
  min-width: 0;
}

.stat .v,
.sd-big,
.value {
  overflow-wrap: anywhere;
}

.table-card,
.table-wrap,
.report-table-wrapper {
  max-width: 100%;
  scrollbar-width: thin;
}

.table-card table,
.table-wrap table,
.report-table-wrapper table,
.ms-report-table {
  width: 100%;
}

.table-card th,
.table-card td,
.table-wrap th,
.table-wrap td,
.report-table-wrapper th,
.report-table-wrapper td,
.ms-report-table th,
.ms-report-table td {
  white-space: nowrap;
}

.rb-global-lookup {
  position: relative;
}

.rb-book-modal-backdrop,
#scanModal,
.modal-backdrop,
.cam-backdrop {
  padding: clamp(10px, 3vw, 24px) !important;
}

.rb-book-modal,
.modal,
.cam-modal,
#scanModal .panel {
  width: min(100%, 640px) !important;
  max-height: calc(100dvh - 24px);
  overflow: auto !important;
}

@media (max-width: 1200px) {
  body > main.container {
    width: min(100% - 24px, 100%) !important;
  }

  .slots-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body > nav.container-fluid {
    position: sticky !important;
    align-items: center;
    gap: 8px;
  }

  body > nav.container-fluid ul {
    gap: 6px !important;
    min-width: 0;
  }

  .sidebar {
    position: static !important;
  }

  .rb-page-head,
  .sd-title,
  .section-head,
  .wrap-card > header,
  .table-card > header,
  .card > header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .rb-page-head .actions,
  .section-head .actions,
  .wrap-card > header .actions,
  .table-card > header .actions,
  .card > header .actions {
    width: 100%;
  }

  .rb-page-head .actions > *,
  .section-head .actions > *,
  .wrap-card > header .actions > *,
  .table-card > header .actions > *,
  .card > header .actions > * {
    flex: 1 1 180px;
  }

  .closed-filter-bar,
  .report-search,
  .inventory-search,
  .rb-modal-actions {
    align-items: stretch !important;
  }

  .closed-filter-bar form,
  .report-search form,
  .inventory-search form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14px !important;
  }

  body > nav.container-fluid {
    padding-block: 8px !important;
  }

  body > nav.container-fluid ul {
    width: 100%;
    justify-content: space-between;
  }

  body > nav.container-fluid ul:first-child {
    width: auto;
  }

  body > nav.container-fluid a {
    min-height: 34px;
    padding-inline: 7px;
    font-size: 13px;
  }

  body > main.container {
    width: min(100% - 16px, 100%) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  h1 { font-size: clamp(26px, 8vw, 34px) !important; }
  h2 { font-size: clamp(20px, 6vw, 26px) !important; }
  h3 { font-size: clamp(17px, 5vw, 22px) !important; }

  .wrap-card,
  .table-card,
  .sd-card,
  .auth-card,
  .card,
  article,
  .panel-inner {
    border-radius: 10px !important;
    padding: 14px !important;
  }

  .rb-global-lookup {
    width: min(100% - 16px, 100%) !important;
    padding: 10px !important;
    grid-template-columns: 1fr 44px !important;
  }

  .rb-global-lookup label,
  .rb-global-lookup input,
  .rb-global-lookup #rbGlobalBookBtn,
  .rb-lookup-help {
    grid-column: 1 / -1 !important;
  }

  .rb-global-lookup .js-open-camera {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .rb-global-lookup input {
    padding-right: 52px !important;
  }

  .rb-global-lookup #rbGlobalBookBtn,
  .auth-btn,
  .action-btn-full,
  .sd-apply {
    width: 100% !important;
  }

  .actions,
  .auth-actions,
  .btn-row,
  .modal footer,
  .rb-modal-actions,
  .pager-row,
  .report-search,
  .inventory-search,
  .closed-filter-bar,
  .tabs-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .actions > *,
  .auth-actions > *,
  .btn-row > *,
  .modal footer > *,
  .rb-modal-actions > *,
  .pager-row > *,
  .report-search > *,
  .inventory-search > *,
  .closed-filter-bar > *,
  .tabs-row > * {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .pw-group {
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }

  .rb-result-row,
  .smart-result-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
    align-items: stretch !important;
  }

  .rb-result-row > div:last-child,
  .smart-result-row > div:last-child {
    text-align: left !important;
  }

  .table-card table,
  .table-wrap table,
  .report-table-wrapper table,
  .ms-report-table {
    min-width: 620px !important;
  }

  .auth-wrap {
    min-height: calc(100dvh - 84px) !important;
    padding-inline: 0 !important;
  }

  .auth-card {
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  body > nav.container-fluid a {
    font-size: 12px;
    padding-inline: 6px;
  }

  .rb-theme-toggle {
    width: 36px !important;
    min-width: 36px !important;
    padding-inline: 0 !important;
  }

  .slots-grid {
    grid-template-columns: 1fr !important;
  }

  .pw-group {
    grid-template-columns: 1fr !important;
  }

  .pw-group button {
    width: 100% !important;
  }
}