:root {
  --admin-blue: #3182f6;
  --admin-blue-soft: #eef5ff;
  --admin-ink: #243247;
  --admin-muted: #7d8a9c;
  --admin-line: #e6edf5;
}

.settings-section-nav {
  position: sticky;
  top: 10px;
  z-index: 8;
  display: flex;
  gap: 6px;
  width: min(100%, 720px);
  margin: 0 0 16px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px rgba(35, 60, 94, .08);
  scrollbar-width: none;
  backdrop-filter: blur(12px);
}

.settings-section-nav::-webkit-scrollbar { display: none; }

.settings-section-nav a {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.settings-section-nav a:hover,
.settings-section-nav a:focus-visible {
  color: var(--admin-blue);
  background: var(--admin-blue-soft);
  outline: none;
}

.settings-section-nav a:active { transform: scale(.97); }

.settings-section-nav a.active,
.settings-section-nav a[aria-current="location"] {
  color: #246bdc;
  background: #edf5ff;
  box-shadow: inset 0 0 0 1px #d7e7fb;
}

#rewardRateInput,
#sheetUrlInput,
#cafe24SettingsSection,
#adminManagementTitle {
  scroll-margin-top: 96px;
}

.setting-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #fbfdff;
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 700;
}

.setting-toggle input { margin: 0; }

@media (max-width: 760px) {
  .settings-section-nav {
    top: 6px;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 14px;
  }

  .settings-section-nav a {
    min-height: 32px;
    padding-inline: 11px;
    font-size: 11px;
  }

  .setting-toggle {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-section-nav a { transition: none; }
}

/* Dashboard visual hierarchy: stronger focus, compact operations, clearer status. */
body[data-page="dashboard"] .page-head {
  margin-bottom: 14px !important;
}

body[data-page="dashboard"] .page-head h1 {
  color: #1d2939 !important;
  font-size: clamp(20px, 1.75vw, 25px) !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
}

body[data-page="dashboard"] #summary.dashboard-board > .board-sales {
  border-color: #d5e3f4 !important;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 62%, #f7fbff 100%) !important;
  box-shadow: 0 20px 46px rgba(37, 86, 151, .11), inset 0 3px 0 #3182f6 !important;
}

body[data-page="dashboard"] .board-sales-title-row > span {
  color: #253b59 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body[data-page="dashboard"] .board-sales-copy > .board-today-sales {
  display: flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  min-height: 18px !important;
  margin-top: 8px !important;
  white-space: nowrap !important;
}

body[data-page="dashboard"] .board-sales-copy > .board-today-sales > span {
  color: #8b95a1 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .055em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body[data-page="dashboard"] .board-sales-copy > .board-today-sales > b {
  color: #4b78bb !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

body[data-page="dashboard"] .board-sales-copy > strong {
  margin-top: 3px !important;
}

body[data-page="dashboard"] .board-sales-title-tools small {
  color: #74849a !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

body[data-page="dashboard"] .board-sales-copy > strong {
  background: linear-gradient(110deg, #1769e8 0%, #3182f6 58%, #5a9bff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-size: clamp(38px, 3.25vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -.055em !important;
}

body[data-page="dashboard"] .board-sales-subline b {
  color: #53657d !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body[data-page="dashboard"] .board-sales-insights i {
  min-height: 44px !important;
}

body[data-page="dashboard"] .board-sales-insights i span {
  color: #8290a2 !important;
  font-size: 11px !important;
}

body[data-page="dashboard"] .board-sales-insights i b {
  color: #263b58 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body[data-page="dashboard"] .board-chart-legend {
  min-height: 30px !important;
  gap: 7px 16px !important;
  font-size: 12px !important;
}

body[data-page="dashboard"] .board-chart-legend em {
  color: #718199 !important;
  font-weight: 650 !important;
}

body[data-page="dashboard"] .board-chart-legend b {
  color: #2d3f59 !important;
  font-weight: 800 !important;
}

body[data-page="dashboard"] #summary.dashboard-board > .board-panel {
  border-color: #e0e8f2 !important;
  box-shadow: 0 12px 28px rgba(38, 66, 104, .07) !important;
}

/* Keep every dashboard card in one quiet Toss-inspired blue system. */
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(2),
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(3),
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(4),
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(5) {
  border-top: 1px solid #e0e8f2 !important;
}

body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(2) .board-panel-head,
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(3) .board-panel-head,
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(4) .board-panel-head,
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(5) .board-panel-head {
  background: #f3f6fb !important;
}

body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(2) .board-panel-head > strong,
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(3) .board-panel-head > strong,
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(4) .board-panel-head > strong,
body[data-page="dashboard"] #summary.dashboard-board > .board-panel:nth-child(5) .board-panel-head > strong {
  color: #405269 !important;
}

body[data-page="dashboard"] .board-stat-copy b {
  color: #40536c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-page="dashboard"] .board-stat-copy small {
  color: #8a98a9 !important;
  font-size: 10.5px !important;
}

body[data-page="dashboard"] .board-stat > strong {
  color: #1f2f46 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body[data-page="dashboard"] .dashboard-site-status {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-color: #dfe8f3 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff, #f7faff) !important;
  box-shadow: 0 12px 28px rgba(38, 66, 104, .06) !important;
}

body[data-page="dashboard"] .site-status-head strong {
  color: #273b57 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body[data-page="dashboard"] .site-status-grid button {
  border-color: #e2eaf3 !important;
  background: #fff !important;
}

body[data-page="dashboard"] .site-status-grid button strong {
  color: #2d405b !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  body[data-page="dashboard"] .page-head h1 {
    font-size: 20px !important;
    letter-spacing: -.04em !important;
  }

  body[data-page="dashboard"] #summary.dashboard-board {
    gap: 12px !important;
  }

  body[data-page="dashboard"] #summary.dashboard-board > .board-sales {
    padding: 18px !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 32px rgba(37, 86, 151, .10), inset 0 3px 0 #3182f6 !important;
  }

  body[data-page="dashboard"] .board-sales-copy > strong {
    margin-top: 13px !important;
    font-size: clamp(38px, 11vw, 46px) !important;
  }

  body[data-page="dashboard"] .board-sales-subline b {
    font-size: 11.5px !important;
  }

  body[data-page="dashboard"] .board-sales-chart {
    grid-template-rows: auto minmax(0, 1fr) 22px !important;
  }

  body[data-page="dashboard"] .board-sales-chart .trend-plot,
  body[data-page="dashboard"] .board-sales-chart .trend-svg {
    height: 100% !important;
  }

  body[data-page="dashboard"] #summary.dashboard-board > .board-panel {
    min-height: 192px !important;
    height: 192px !important;
    padding: 13px 13px 14px !important;
    border-radius: 17px !important;
  }

  body[data-page="dashboard"] .board-panel-head > strong {
    font-size: 13px !important;
  }

  body[data-page="dashboard"] .board-stat-copy b {
    font-size: 11px !important;
  }

  body[data-page="dashboard"] .board-stat > strong {
    font-size: 15px !important;
  }

  body[data-page="dashboard"] .dashboard-site-status {
    display: block !important;
    margin: 12px 0 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body[data-page="dashboard"] .site-status-head {
    margin-bottom: 9px !important;
  }

  body[data-page="dashboard"] .site-status-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-page="dashboard"] .dashboard-site-status > .site-status-grid {
    display: grid !important;
  }

  body[data-page="dashboard"] .site-status-grid button {
    min-height: 52px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
  }

  body[data-page="dashboard"] .site-status-grid button span {
    font-size: 9.5px !important;
  }

  body[data-page="dashboard"] .site-status-grid button strong {
    font-size: 11px !important;
  }
}

/* Final polish: tighten the desktop rhythm and make interactive data feel intentional. */
body[data-page="dashboard"] #summary.dashboard-board > .board-sales,
body[data-page="dashboard"] #summary.dashboard-board > .board-panel,
body[data-page="dashboard"] .dashboard-site-status {
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

body[data-page="dashboard"] #summary.dashboard-board > .board-sales:hover {
  border-color: #bcd5f4 !important;
  box-shadow: 0 24px 52px rgba(37, 86, 151, .14), inset 0 3px 0 #3182f6 !important;
}

body[data-page="dashboard"] #summary.dashboard-board > .board-panel:hover {
  border-color: #c7d9ed !important;
  box-shadow: 0 16px 34px rgba(38, 66, 104, .11) !important;
}

body[data-page="dashboard"] .board-stat {
  cursor: pointer !important;
  transition: background .18s ease, padding-inline .18s ease;
}

body[data-page="dashboard"] .board-stat:hover,
body[data-page="dashboard"] .board-stat:focus-visible {
  padding-inline: 6px !important;
  border-radius: 8px !important;
  background: #f5f9ff !important;
  outline: none !important;
}

body[data-page="dashboard"] .board-stat-copy b {
  font-size: 12.5px !important;
}

body[data-page="dashboard"] .board-stat-copy small {
  color: #7d8da2 !important;
  font-size: 11.5px !important;
}

body[data-page="dashboard"] .board-stat > strong {
  font-size: 17px !important;
}

body[data-page="dashboard"] .site-status-grid button {
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body[data-page="dashboard"] .site-status-grid button:hover:not(:disabled),
body[data-page="dashboard"] .site-status-grid button:focus-visible {
  border-color: #b9d3f5 !important;
  background: #f5f9ff !important;
  box-shadow: 0 5px 14px rgba(49, 130, 246, .08) !important;
  outline: none !important;
}

body[data-page="dashboard"] .dashboard-product-signature {
  margin-top: 10px !important;
  color: #98a5b5 !important;
  font-size: 10px !important;
  letter-spacing: .02em !important;
}

@media (min-width: 1280px) {
  body[data-page="dashboard"] #summary.dashboard-board {
    grid-template-rows: repeat(2, minmax(232px, 1fr)) !important;
  }

  body[data-page="dashboard"] #summary.dashboard-board > .board-sales {
    min-height: 492px !important;
  }

  body[data-page="dashboard"] .dashboard-site-status {
    padding-block: 16px !important;
  }
}

@media (max-width: 760px) {
  body[data-page="dashboard"] .board-stat-copy b {
    font-size: 11px !important;
  }

  body[data-page="dashboard"] .board-stat-copy small {
    font-size: 10.5px !important;
  }

  body[data-page="dashboard"] .board-stat > strong {
    font-size: 15px !important;
  }

  body[data-page="dashboard"] .board-stat:hover,
  body[data-page="dashboard"] .board-stat:focus-visible {
    padding-inline: 3px !important;
  }

  body[data-page="dashboard"] .dashboard-product-signature {
    margin-top: 8px !important;
    font-size: 9px !important;
  }
}

/* Product-wide UI system: one visual language for every admin page. */
body[data-page] {
  --surface-strong: #ffffff;
  --surface-muted: #f7faff;
  --ink-strong: #1f2d43;
  --ink: #40536c;
  --ink-muted: #7d8da2;
  --line-soft: #e5ecf4;
  --line-strong: #d3dfed;
  --focus-ring: rgba(49, 130, 246, .22);
}

body[data-page] .sidebar {
  background: rgba(255, 255, 255, .96) !important;
  border-right-color: #e1e9f2 !important;
  box-shadow: 10px 0 28px rgba(33, 64, 103, .035) !important;
}

body[data-page] .brand {
  height: 70px !important;
  padding-inline: 18px !important;
  border-bottom-color: #e8eef5 !important;
}

body[data-page] .brand-name {
  color: #1e2e45 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}

body[data-page] .brand-sub {
  color: #8391a4 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-page] .nav {
  gap: 5px !important;
  padding: 16px 11px 20px !important;
}

body[data-page] .nav-section-toggle {
  min-height: 38px !important;
  margin-top: 8px !important;
  padding-inline: 12px !important;
  border-radius: 11px !important;
  color: #8492a5 !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
}

body[data-page] .nav-section-toggle:hover {
  color: #3c6fbf !important;
  background: #f5f9ff !important;
}

body[data-page] .nav-section-toggle.open,
body[data-page] .nav-section-toggle.active-parent {
  color: #2368d7 !important;
  background: #eef5ff !important;
}

body[data-page] .nav a {
  min-height: 40px !important;
  padding-inline: 13px !important;
  border-radius: 11px !important;
  color: #5e7088 !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

body[data-page] .nav a:hover {
  color: #286cdb !important;
  background: #f6f9fd !important;
}

body[data-page] .nav a.active {
  color: #246bdc !important;
  background: #edf5ff !important;
  box-shadow: inset 3px 0 0 #3182f6, 0 5px 14px rgba(49, 130, 246, .06) !important;
  font-weight: 800 !important;
}

body[data-page] .nav .icon {
  color: #8b99aa !important;
}

body[data-page] .nav a.active .icon,
body[data-page] .nav-section-toggle.active-parent .chevron {
  color: #3182f6 !important;
}

body[data-page] .topbar {
  height: 68px !important;
  padding-inline: 28px !important;
  border-bottom-color: #e2eaf3 !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 4px 18px rgba(35, 60, 94, .025) !important;
}

body[data-page] .icon-btn {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
  border-color: #d8e3ef !important;
  border-radius: 11px !important;
  color: #324965 !important;
  background: #fff !important;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

body[data-page] .icon-btn:hover {
  border-color: #b9d2f2 !important;
  color: #2368d7 !important;
  background: #f5f9ff !important;
}

body[data-page] .breadcrumb {
  color: #687a91 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body[data-page] .user-pill {
  min-height: 34px !important;
  border-color: #e0e8f1 !important;
  color: #687a91 !important;
  background: #fff !important;
  transition: border-color .18s ease, background .18s ease;
}

body[data-page] .user-pill:hover {
  border-color: #c7dbf4 !important;
  background: #f7faff !important;
}

body[data-page] main {
  padding: 28px !important;
}

body[data-page] .page-head {
  align-items: flex-end !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

body[data-page] #pageActions {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body[data-page] .workflow-context {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

body[data-page] .workflow-source,
body[data-page] .workflow-next {
  display: flex;
  min-width: 150px;
  min-height: 52px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid #dce6f1;
  border-radius: 13px;
  background: #fff;
  text-align: left;
}

body[data-page] .workflow-source {
  color: #66788e;
  background: #f8fafc;
}

body[data-page] .workflow-next {
  color: #1f67d2;
  border-color: #cfe0f7;
  background: #f3f8ff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

body[data-page] .workflow-next:hover {
  border-color: #9fc3f2;
  background: #eaf3ff;
  transform: translateY(-1px);
}

body[data-page] .workflow-context small {
  color: #8492a6;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .02em;
}

body[data-page] .workflow-context strong {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-page] .page-head h1,
body[data-page] #pageTitle {
  color: var(--ink-strong) !important;
  letter-spacing: -.04em !important;
}

body[data-page] .eyebrow {
  color: #2a72df !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
}

body[data-page] .toolbar {
  border-color: var(--line-soft) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 10px 26px rgba(35, 60, 94, .055) !important;
}

body[data-page] .toolbar input,
body[data-page] .toolbar select,
body[data-page] .toolbar button,
body[data-page] .field input,
body[data-page] .field select,
body[data-page] .field textarea,
body[data-page] .master-form input,
body[data-page] .master-form select,
body[data-page] .master-form textarea,
body[data-page] .batch-box input {
  border-color: var(--line-strong) !important;
  border-radius: 11px !important;
  color: #344a65 !important;
  background: #fff !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body[data-page] .toolbar input:focus,
body[data-page] .toolbar select:focus,
body[data-page] .field input:focus,
body[data-page] .field select:focus,
body[data-page] .field textarea:focus,
body[data-page] .master-form input:focus,
body[data-page] .master-form select:focus,
body[data-page] .master-form textarea:focus,
body[data-page] .batch-box input:focus {
  border-color: #8bb7f2 !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
  outline: none !important;
}

body[data-page] input[type="file"] {
  min-height: 38px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 11px !important;
  background: #fbfdff !important;
  color: #6d7d91 !important;
  font-size: 11px !important;
}

body[data-page] input[type="file"]::file-selector-button {
  margin-right: 8px;
  padding: 6px 9px;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
  color: #246bdc;
  background: #edf5ff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

body[data-page] button.primary,
body[data-page] .primary:not(.settlement-metric) {
  border-color: #3182f6 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #4b91f7 0%, #1f6fe5 100%) !important;
  box-shadow: 0 7px 16px rgba(49, 130, 246, .18) !important;
  font-weight: 750 !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body[data-page] button.primary:hover:not(:disabled),
body[data-page] .primary:not(.settlement-metric):hover:not(:disabled) {
  filter: saturate(1.08) brightness(1.02);
  box-shadow: 0 10px 20px rgba(49, 130, 246, .25) !important;
  transform: translateY(-1px);
}

body[data-page] button.subtle,
body[data-page] .subtle {
  border-color: #d8e3ef !important;
  border-radius: 11px !important;
  color: #4d617b !important;
  background: #fbfdff !important;
  font-weight: 700 !important;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

body[data-page] button.subtle:hover:not(:disabled),
body[data-page] .subtle:hover:not(:disabled) {
  border-color: #b9d2f2 !important;
  color: #246bdc !important;
  background: #f3f8ff !important;
  transform: translateY(-1px);
}

body[data-page] button:disabled,
body[data-page] input:disabled,
body[data-page] select:disabled {
  cursor: not-allowed !important;
  opacity: .55 !important;
}

body[data-page] .panel {
  border-color: var(--line-soft) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 32px rgba(35, 60, 94, .065) !important;
}

body[data-page] .panel-head {
  min-height: 62px !important;
  padding-inline: 20px !important;
  border-bottom-color: var(--line-soft) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  color: var(--ink-strong) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body[data-page] .panel-head .muted,
body[data-page] .panel-head > span:last-child {
  color: #8a98aa !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body[data-page] .panel-body {
  padding: 18px !important;
}

body[data-page] .batch-box {
  gap: 9px !important;
  padding: 14px 16px !important;
  border-bottom-color: var(--line-soft) !important;
  background: #fbfdff !important;
}

body[data-page] .badge {
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
}

body[data-page] .badge.good {
  border-color: #bfe9dc !important;
  background: #effbf7 !important;
  color: #168b6c !important;
}

body[data-page] .badge.warn {
  border-color: #f2dfac !important;
  background: #fff9e9 !important;
  color: #ad751f !important;
}

body[data-page] .badge.ready,
body[data-page] .badge.done {
  border-color: #cfe0f7 !important;
  background: #eef5ff !important;
  color: #246bdc !important;
}

body[data-page] .row-actions {
  gap: 6px !important;
}

body[data-page="shipping"] .table-wrap td[data-label="배송수정"] .row-actions {
  min-width: 520px;
}

body[data-page="shipping"] .table-wrap select[id^="ship-carrier-"] {
  width: 210px;
  min-width: 210px;
}

body[data-page] .row-actions button,
body[data-page] .compact {
  min-height: 30px !important;
  height: 30px !important;
  padding-inline: 10px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
}

body[data-page] .table-wrap:not(.quality-content) {
  min-height: min(360px, 48dvh) !important;
  max-height: min(64dvh, 640px) !important;
  overflow: auto !important;
  position: relative;
  background: #fff !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: #cbd8e7 transparent;
}

body[data-page] .table-selection-scope {
  display: block;
  width: 100%;
  min-width: 100%;
}

body[data-page] .table-wrap:not(.quality-content)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body[data-page] .table-wrap:not(.quality-content)::-webkit-scrollbar-track {
  background: #f4f7fb;
}

body[data-page] .table-wrap:not(.quality-content)::-webkit-scrollbar-thumb {
  border: 3px solid #f4f7fb;
  border-radius: 999px;
  background: #b5c4d6;
}

body[data-page] .table-wrap table {
  width: max-content;
  min-width: 100%;
  font-size: 13px !important;
}

body[data-page] .table-wrap th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  height: 48px !important;
  padding-inline: 14px !important;
  border-bottom-color: #dce6f1 !important;
  background: #f7faff !important;
  color: #6b7d94 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

body[data-page] .table-wrap th.sticky-check,
body[data-page] .table-wrap td.sticky-check {
  position: sticky !important;
  left: 0 !important;
  z-index: 5 !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding-inline: 12px !important;
  border-right: 1px solid #e1e9f2 !important;
  background: #fff !important;
  text-align: center !important;
}

body[data-page] .table-wrap th.sticky-index,
body[data-page] .table-wrap td.sticky-index {
  position: sticky !important;
  left: 52px !important;
  z-index: 4 !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding-inline: 10px !important;
  border-right: 1px solid #e1e9f2 !important;
  background: #fff !important;
  text-align: center !important;
}

body[data-page] .table-wrap th.sticky-check {
  z-index: 8 !important;
  background: #f7faff !important;
}

body[data-page] .table-wrap th.sticky-index {
  z-index: 7 !important;
  background: #f7faff !important;
}

body[data-page] .table-wrap .sticky-check input[type="checkbox"] {
  display: inline-grid !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  accent-color: var(--admin-blue) !important;
}

body[data-page] .table-wrap td {
  min-height: 54px !important;
  padding: 12px 14px !important;
  border-bottom-color: #edf2f7 !important;
  color: #3c4f68 !important;
  font-size: 13px !important;
}

body[data-page] .table-wrap tbody tr:hover td {
  background: #f7fbff !important;
}

body[data-page] .table-wrap .table-empty-row td {
  position: static !important;
  height: 180px !important;
  background: #fff !important;
  text-align: center !important;
}

body[data-page] .table-wrap .table-empty-row .empty {
  min-height: 0 !important;
  padding: 24px !important;
}

/* Shared data-cell disclosure: every ellipsized value exposes its complete text. */
body[data-page] .table-wrap td.data-value-cell {
  transition: background-color .16s ease, box-shadow .16s ease;
}

body[data-page] .table-wrap td.data-value-cell.is-value-clipped {
  cursor: zoom-in;
  box-shadow: inset 0 -1px 0 rgba(47, 120, 234, .18);
}

body[data-page] .table-wrap td.data-value-cell.is-value-clipped:hover,
body[data-page] .table-wrap td.data-value-cell.is-value-clipped:focus-visible,
body[data-page] .table-wrap td.data-value-cell.is-value-clipped[aria-expanded="true"] {
  position: relative;
  z-index: 2;
  outline: none;
  background: #eef6ff !important;
  box-shadow: inset 3px 0 0 #2f78ea, inset 0 -1px 0 #cfe1fb;
}

.cell-value-popover {
  position: fixed;
  z-index: 1400;
  width: min(440px, calc(100vw - 24px));
  max-height: min(320px, calc(100dvh - 24px));
  overflow: auto;
  padding: 14px;
  border: 1px solid #cbdcf3;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 48px rgba(27, 53, 87, .22);
  color: #263b55;
  backdrop-filter: blur(12px);
}

.cell-value-popover[hidden] {
  display: none !important;
}

.cell-value-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #5f7390;
  font-size: 12px;
}

.cell-value-popover-close {
  display: none;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
}

.cell-value-popover.is-pinned .cell-value-popover-close {
  display: inline-grid;
  place-items: center;
}

.cell-value-popover-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  color: #20334d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  user-select: text;
}

@media (max-width: 760px) {
  .cell-value-popover {
    width: calc(100vw - 20px);
    max-height: min(42dvh, 320px);
    padding: 13px;
    border-radius: 13px;
  }
}

@media (min-width: 761px) {
  body[data-page="logs"] .table-wrap table {
    width: 1480px !important;
    min-width: 1480px !important;
    table-layout: fixed !important;
  }

  body[data-page="logs"] .table-wrap th,
  body[data-page="logs"] .table-wrap td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="logs"] .log-detail {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="logs"] .table-wrap th:nth-child(1),
  body[data-page="logs"] .table-wrap td:nth-child(1) { width: 52px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(2),
  body[data-page="logs"] .table-wrap td:nth-child(2) { width: 58px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(3),
  body[data-page="logs"] .table-wrap td:nth-child(3) { width: 170px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(4),
  body[data-page="logs"] .table-wrap td:nth-child(4) { width: 150px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(5),
  body[data-page="logs"] .table-wrap td:nth-child(5) { width: 150px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(6),
  body[data-page="logs"] .table-wrap td:nth-child(6) { width: 135px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(7),
  body[data-page="logs"] .table-wrap td:nth-child(7) { width: 120px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(8),
  body[data-page="logs"] .table-wrap td:nth-child(8) { width: 220px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(9),
  body[data-page="logs"] .table-wrap td:nth-child(9) { width: 335px !important; }
  body[data-page="logs"] .table-wrap th:nth-child(10),
  body[data-page="logs"] .table-wrap td:nth-child(10) { width: 90px !important; }

  body[data-page="supplier-statistics"] .settlement-table table {
    width: 2260px !important;
    min-width: 2260px !important;
  }

  body[data-page="supplier-statistics"] .settlement-table th,
  body[data-page="supplier-statistics"] .settlement-table td {
    white-space: nowrap !important;
  }

  body[data-page="supplier-statistics"] .settlement-table td[data-label="상품명"] {
    min-width: 240px !important;
    max-width: 240px !important;
  }
}

body[data-page] .empty {
  padding-block: 72px !important;
  color: #8a98aa !important;
  font-size: 13px !important;
}

body[data-page] .pagination {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 14px 12px 10px !important;
}

body[data-page] .pagination-buttons {
  margin-inline: auto !important;
}

body[data-page] .page-button {
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border-color: #dce6f1 !important;
  color: #63758c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-page] .page-button.active {
  border-color: #bcd5f4 !important;
  background: linear-gradient(135deg, #edf5ff, #dcecff) !important;
  color: #246bdc !important;
  box-shadow: 0 6px 14px rgba(49, 130, 246, .13) !important;
}

body[data-page="settings"] .panel-body {
  padding: 20px !important;
}

body[data-page="settings"] .settings-section-nav {
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 20px !important;
  border-radius: 15px !important;
}

body[data-page="settings"] .form-grid {
  gap: 16px !important;
}

body[data-page="settings"] .field {
  gap: 8px !important;
}

body[data-page="settings"] .field label {
  color: #566b84 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

body[data-page="settings"] .field input,
body[data-page="settings"] .field select,
body[data-page="settings"] .field textarea {
  min-height: 42px !important;
  padding-inline: 13px !important;
  font-size: 13px !important;
}

body[data-page="settings"] .setting-actions {
  gap: 8px !important;
  margin-top: 20px !important;
  padding: 12px !important;
  border: 1px solid #e2eaf3 !important;
  border-radius: 15px !important;
  background: #f8fbff !important;
}

body[data-page="settings"] .permission-grid {
  gap: 12px !important;
  margin-top: 18px !important;
}

body[data-page="settings"] .permission-card {
  min-height: 92px !important;
  padding: 15px !important;
  border-color: #e1e9f2 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
}

body[data-page="settings"] .permission-card strong {
  margin-bottom: 7px !important;
  color: #304761 !important;
  font-size: 12px !important;
}

body[data-page="settings"] .permission-card span {
  color: #8290a2 !important;
  font-size: 11px !important;
}

@media (max-width: 760px) {
  body[data-page] .topbar {
    height: 56px !important;
    padding-inline: 12px !important;
  }

  body[data-page] main {
    padding: 18px 12px 86px !important;
  }

  body[data-page] .page-head {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  body[data-page] #pageActions {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body[data-page] .workflow-context {
    display: flex !important;
    width: 100%;
    gap: 6px;
  }

  body[data-page] .workflow-source,
  body[data-page] .workflow-next {
    min-width: 0;
    min-height: 48px;
    flex: 1 1 0;
    padding: 8px 10px;
  }

  body[data-page] .workflow-context strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page] .page-head h1,
  body[data-page] #pageTitle {
    font-size: 20px !important;
  }

  body[data-page] .toolbar {
    border-radius: 17px !important;
  }

  body[data-page] .panel {
    border-radius: 18px !important;
  }

  body[data-page] .panel-head {
    min-height: 56px !important;
    padding-inline: 16px !important;
    font-size: 13px !important;
  }

  body[data-page] .panel-body {
    padding: 14px !important;
  }

  body[data-page] .batch-box {
    gap: 7px !important;
    padding: 11px 12px !important;
  }

  body[data-page] .batch-box .wide-input {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  body[data-page] .batch-box input[type="file"] {
    min-width: 0 !important;
    width: min(100%, 210px) !important;
    flex: 1 1 180px !important;
  }

  body[data-page] .table-wrap:not(.quality-content) {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
  }

  body[data-page] .table-wrap:not(.quality-content) table,
  body[data-page] .table-wrap:not(.quality-content) tbody,
  body[data-page] .table-wrap:not(.quality-content) tr,
  body[data-page] .table-wrap:not(.quality-content) td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page] .table-selection-scope {
    width: 100%;
    min-width: 0;
  }

  body[data-page] .table-wrap:not(.quality-content) td.sticky-check {
    position: static !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding-inline: 8px !important;
    border-right: 0 !important;
  }

  body[data-page] .table-wrap:not(.quality-content) td.sticky-index {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-right: 0 !important;
    text-align: left !important;
  }

  body[data-page] .table-wrap .table-empty-row td {
    width: 100% !important;
    height: auto !important;
    min-height: 140px !important;
  }

  body[data-page="logs"] .log-detail {
    display: -webkit-box;
    width: 100%;
    max-height: 2.9em;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page] .table-wrap th {
    height: 44px !important;
    padding-inline: 11px !important;
    font-size: 10px !important;
  }

  body[data-page] .table-wrap td {
    min-height: 50px !important;
    padding: 10px 11px !important;
    font-size: 12px !important;
  }

  body[data-page] .pagination {
    min-height: 54px !important;
  }

  body[data-page="settings"] .panel-body {
    padding: 14px !important;
  }

  body[data-page="settings"] .settings-section-nav {
    margin-bottom: 14px !important;
  }

  body[data-page="settings"] .form-grid {
    gap: 13px !important;
  }

  body[data-page="settings"] .setting-actions {
    padding: 10px !important;
    border-radius: 13px !important;
  }

  body[data-page="settings"] .permission-grid {
    gap: 9px !important;
    margin-top: 14px !important;
  }

  body[data-page="settings"] .permission-card {
    min-height: 82px !important;
    padding: 12px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 760px) {
  /* Keep the compact mobile navigation evenly distributed and readable. */
  body[data-page] .sidebar {
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 8px !important;
  }

  body[data-page] .sidebar > .nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: 48px !important;
    align-items: center !important;
    height: 62px !important;
    gap: 3px !important;
    padding: 4px 8px !important;
  }

  body[data-page] .sidebar > .nav > a,
  body[data-page] .sidebar > .nav > .nav-section-toggle {
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 3px 2px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body[data-page] .sidebar > .nav > a > span:last-child,
  body[data-page] .sidebar > .nav > .nav-section-toggle > span:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Give the data import controls a deliberate two-row rhythm on narrow screens. */
  body[data-page="data"] #extraPanel > .batch-box:nth-of-type(2) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
  }

  body[data-page="data"] #extraPanel > .batch-box:nth-of-type(2) > .wide-input {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body[data-page="data"] #extraPanel > .batch-box:nth-of-type(2) > input[type="file"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Final precision pass: shared baseline, numeric alignment, and action hierarchy. */
body[data-page] button,
body[data-page] input,
body[data-page] select,
body[data-page] textarea {
  font-family: inherit !important;
  -webkit-font-smoothing: antialiased;
}

body[data-page] .table-wrap th,
body[data-page] .table-wrap td {
  vertical-align: middle !important;
}

body[data-page] .table-wrap th {
  line-height: 1.3 !important;
}

body[data-page] .table-wrap td {
  line-height: 1.35 !important;
  font-variant-numeric: tabular-nums;
}

body[data-page] .row-index-value,
body[data-page] .purchase-card-index {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 28px !important;
  height: 28px !important;
  padding-inline: 7px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 9px !important;
  color: #3b78d9 !important;
  background: linear-gradient(180deg, #f4f8ff 0%, #eaf2ff 100%) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

body[data-page] .table-wrap th.sticky-check,
body[data-page] .table-wrap td.sticky-check {
  text-align: center !important;
}

body[data-page="settings"] .setting-actions {
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
}

body[data-page="settings"] .setting-actions > button {
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  body[data-page="settings"] .settings-section-nav a {
    min-height: 34px !important;
    padding-inline: 9px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  body[data-page="settings"] .setting-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-page="settings"] .setting-actions > label,
  body[data-page="settings"] .setting-actions > input[type="file"],
  body[data-page="settings"] .setting-actions > span {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="settings"] .setting-actions > button {
    width: 100% !important;
    min-height: 36px !important;
  }

  body[data-page="settings"] .setting-actions > input[type="file"] {
    min-height: 40px !important;
  }
}

/* Detail fixes: keep long landing URLs on the same value axis as every card field. */
@media (max-width: 760px) {
  body[data-page="visits"] .table-wrap td[data-label="랜딩 URL"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    grid-template-columns: minmax(72px, 28%) minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body[data-page="visits"] .table-wrap td[data-label="랜딩 URL"]::before {
    align-self: start !important;
    padding-top: 2px !important;
  }

  body[data-page="visits"] .table-wrap td[data-label="랜딩 URL"] .cell-link-value {
    display: -webkit-box !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: 2.9em !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Keep the settlement hero card readable when the generic button token meets `.primary`. */
body[data-page="supplier-statistics"] .settlement-summary-grid .settlement-metric.primary {
  border-color: #2f78ea !important;
  background: linear-gradient(135deg, #4b91f7 0%, #1f6fe5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(49, 130, 246, .2) !important;
}

body[data-page="supplier-statistics"] .settlement-summary-grid .settlement-metric.primary span,
body[data-page="supplier-statistics"] .settlement-summary-grid .settlement-metric.primary small {
  color: rgba(255, 255, 255, .82) !important;
}

body[data-page="supplier-statistics"] .settlement-summary-grid .settlement-metric.primary strong {
  color: #ffffff !important;
}

/* Keep settlement summary typography light and legible across desktop and mobile. */
body[data-page="supplier-statistics"] .settlement-summary-grid .settlement-metric span {
  font-weight: 550 !important;
}

body[data-page="supplier-statistics"] .settlement-summary-grid .settlement-metric strong {
  font-weight: 650 !important;
}

body[data-page="supplier-statistics"] .settlement-summary-grid .settlement-metric small {
  font-weight: 450 !important;
}

/* Final icon language: replace mixed text glyphs with one consistent line system. */
body[data-page] .sidebar a[data-page] > .icon,
body[data-page] #mobileNavMenu a[data-page] > .icon {
  display: inline-flex !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: var(--nav-icon-mask) center / contain no-repeat !important;
  mask: var(--nav-icon-mask) center / contain no-repeat !important;
}

body[data-page] .sidebar a[data-page="dashboard"] > .icon,
body[data-page] #mobileNavMenu a[data-page="dashboard"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 21v-6h6v6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="purchases"] > .icon,
body[data-page] #mobileNavMenu a[data-page="purchases"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16v13H4zM7 7V5h10v2M8 11h8M8 15h5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="visits"] > .icon,
body[data-page] #mobileNavMenu a[data-page="visits"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="excluded"] > .icon,
body[data-page] #mobileNavMenu a[data-page="excluded"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 7.5v5M12 16.5v.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="cafe24-orders"] > .icon,
body[data-page] #mobileNavMenu a[data-page="cafe24-orders"] > .icon,
body[data-page] .sidebar a[data-page="logs"] > .icon,
body[data-page] #mobileNavMenu a[data-page="logs"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v14H5zM8 9h8M8 12h8M8 15h5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="shipping"] > .icon,
body[data-page] #mobileNavMenu a[data-page="shipping"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6.5h10v10h-10zM13.5 10h4l3 3v3h-7zM6.5 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM17.5 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="supplier-shipping"] > .icon,
body[data-page] #mobileNavMenu a[data-page="supplier-shipping"] > .icon,
body[data-page] .sidebar a[data-page="products"] > .icon,
body[data-page] #mobileNavMenu a[data-page="products"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 4 8 4-8 4-8-4 8-4ZM4 12l8 4 8-4M4 16l8 4 8-4' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="data"] > .icon,
body[data-page] #mobileNavMenu a[data-page="data"] > .icon,
body[data-page] .sidebar a[data-page="supplier-statistics"] > .icon,
body[data-page] #mobileNavMenu a[data-page="supplier-statistics"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19V9M12 19V5M19 19v-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="share-statistics"] > .icon,
body[data-page] #mobileNavMenu a[data-page="share-statistics"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 16 5-5 3.5 3.5L20 7' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.5 7H20v4.5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="supplier-settlements"] > .icon,
body[data-page] #mobileNavMenu a[data-page="supplier-settlements"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12M6 12h12M6 17h12M9 4 6 7l3 3M15 14l3 3-3 3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="suppliers"] > .icon,
body[data-page] #mobileNavMenu a[data-page="suppliers"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V7l8-3 8 3v13H4ZM8 20v-5h8v5M8 9h.1M12 9h.1M16 9h.1' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="customers"] > .icon,
body[data-page] #mobileNavMenu a[data-page="customers"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M5 20c.8-3.4 3.1-5.2 7-5.2s6.2 1.8 7 5.2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="data-quality"] > .icon,
body[data-page] #mobileNavMenu a[data-page="data-quality"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="code"] > .icon,
body[data-page] #mobileNavMenu a[data-page="code"] > .icon,
body[data-page] .sidebar a[data-page="code-vault"] > .icon,
body[data-page] #mobileNavMenu a[data-page="code-vault"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5-5 7 5 7M15 5l5 7-5 7M13 4l-2 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .sidebar a[data-page="settings"] > .icon,
body[data-page] #mobileNavMenu a[data-page="settings"] > .icon {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.86 2.86-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21H9.6v-.1A1.7 1.7 0 0 0 8.5 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.86-2.86.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3V9.6h.1A1.7 1.7 0 0 0 4.6 8.5a1.7 1.7 0 0 0-.34-1.88l-.06-.06L7.06 3.7l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.1A1.7 1.7 0 0 0 15.5 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.86 2.86-.06.06A1.7 1.7 0 0 0 19.4 9c.14.38.36.72.66 1 .3.26.68.4 1.07.4H21v4h-.1A1.7 1.7 0 0 0 19.4 15Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] .topbar .icon-btn {
  position: relative !important;
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

body[data-page] .topbar .icon-btn::before {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%) !important;
  -webkit-mask: var(--topbar-icon-mask) center / contain no-repeat;
  mask: var(--topbar-icon-mask) center / contain no-repeat;
}

body[data-page] #backButton {
  --topbar-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] #forwardButton {
  --topbar-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-page] #refreshButton {
  --topbar-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8a8 8 0 1 0 1 6M19 4v4h-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Final layout guard: keep tablet navigation, mobile values, dashboard cards and list footers inside their tracks. */
@media (min-width: 761px) and (max-width: 1100px) {
  body[data-page] {
    --sidebar: 188px;
  }

  body[data-page] .sidebar {
    width: var(--sidebar) !important;
  }

  body[data-page] .workspace {
    margin-left: var(--sidebar) !important;
  }

  body[data-page] .brand {
    justify-content: flex-start !important;
    padding-inline: 18px !important;
  }

  body[data-page] .brand-name {
    font-size: 16px !important;
  }

  body[data-page] .brand-sub {
    display: inline !important;
  }

  body[data-page] .nav span:not(.icon),
  body[data-page] .sidebar-footer {
    display: block !important;
  }

  body[data-page] .nav-section-toggle {
    display: flex !important;
    justify-content: space-between !important;
    padding-inline: 12px !important;
  }

  body[data-page] .nav a {
    justify-content: flex-start !important;
    padding-inline: 13px !important;
  }

  body[data-page="dashboard"] .board-sales {
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }
}

@media (min-width: 761px) and (max-width: 920px) {
  body[data-page] .topbar {
    gap: 8px !important;
    padding-inline: 12px !important;
  }

  body[data-page] .topbar .browser-tools {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-page] .topbar .breadcrumb {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page] .topbar .top-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  body[data-page] #syncButton,
  body[data-page] #logoutButton {
    display: none !important;
  }

  body[data-page] .topbar .user-pill {
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

body[data-page] .bottom-actions.show {
  justify-content: flex-start !important;
}

body[data-page] .bottom-actions.show > .bottom-pagination {
  display: flex !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

body[data-page] .bottom-actions.show > .bottom-pagination > .pagination {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  padding-inline: 0 !important;
}

body[data-page] .bottom-actions.show .pagination-buttons {
  margin-inline: auto !important;
}

@media (max-width: 760px) {
  body[data-page] {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page] .page {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page] .sidebar {
    bottom: 0 !important;
    z-index: 60000 !important;
    visibility: visible !important;
  }

  body[data-page] .sidebar > .nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body[data-page] .mobile-nav-menu {
    top: auto !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 60001 !important;
  }

  body[data-page="visits"] .table-wrap td[data-label="추천인"],
  body[data-page="visits"] .table-wrap td[data-label="방문자"],
  body[data-page="visits"] .table-wrap td[data-label="랜딩 URL"] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body[data-page="visits"] .table-wrap td[data-label="추천인"] .cell-link-value,
  body[data-page="visits"] .table-wrap td[data-label="방문자"] .cell-link-value,
  body[data-page="visits"] .table-wrap td[data-label="랜딩 URL"] .cell-link-value {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.35 !important;
  }

  body[data-page="dashboard"] .board-sales-copy {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body[data-page="dashboard"] .board-sales-insights {
    flex: 0 0 auto !important;
    margin-bottom: 14px !important;
  }
}

@media (min-width: 761px) {
  body[data-page="dashboard"] .board-sales-copy {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body[data-page="dashboard"] .board-sales-insights {
    flex: 0 0 auto !important;
    margin-bottom: 16px !important;
  }

  body[data-page="dashboard"] .board-sales-kpis {
    flex: 0 0 auto !important;
  }
}

/* Shell width guard: the fixed sidebar must be subtracted from the workspace. */
@media (min-width: 1280px) {
  body[data-page] {
    --sidebar: 216px;
  }

  body[data-page] .workspace {
    width: calc(100% - var(--sidebar)) !important;
    margin-left: var(--sidebar) !important;
  }
}

@media (min-width: 761px) and (max-width: 1279px) {
  body[data-page] {
    --sidebar: 188px;
  }

  body[data-page] .sidebar {
    width: var(--sidebar) !important;
    flex: 0 0 var(--sidebar) !important;
  }

  body[data-page] .sidebar .brand {
    justify-content: flex-start !important;
    padding-inline: 18px !important;
  }

  body[data-page] .sidebar .brand-name,
  body[data-page] .sidebar .brand-sub,
  body[data-page] .nav > a span:not(.icon),
  body[data-page] .nav-section-toggle span:not(.icon) {
    display: inline !important;
  }

  body[data-page] .nav > a,
  body[data-page] .nav-section-toggle {
    justify-content: space-between !important;
    padding-inline: 10px !important;
  }

  body[data-page] .workspace {
    width: calc(100% - var(--sidebar)) !important;
    margin-left: var(--sidebar) !important;
  }
}

/* Shared purchase table: keep the complete workflow visible without a clipped desktop grid. */
@media (min-width: 761px) {
  body[data-page="purchases"] .table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-x: contain;
  }

  body[data-page="purchases"] .table-wrap table {
    width: 100% !important;
    min-width: 1690px !important;
    table-layout: fixed !important;
  }

  body[data-page="purchases"] .table-wrap th,
  body[data-page="purchases"] .table-wrap td {
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-page="purchases"] .table-wrap th:nth-child(1),
  body[data-page="purchases"] .table-wrap td:nth-child(1) { width: 52px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(2),
  body[data-page="purchases"] .table-wrap td:nth-child(2) { width: 58px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(3),
  body[data-page="purchases"] .table-wrap td:nth-child(3) { width: 184px !important; white-space: nowrap !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(4),
  body[data-page="purchases"] .table-wrap td:nth-child(4) { width: 220px !important; white-space: nowrap !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(5),
  body[data-page="purchases"] .table-wrap td:nth-child(5) { width: 150px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(6),
  body[data-page="purchases"] .table-wrap td:nth-child(6) { width: 120px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(7),
  body[data-page="purchases"] .table-wrap td:nth-child(7) { width: 50px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(8),
  body[data-page="purchases"] .table-wrap td:nth-child(8) { width: 90px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(9),
  body[data-page="purchases"] .table-wrap td:nth-child(9) { width: 140px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(10),
  body[data-page="purchases"] .table-wrap td:nth-child(10) { width: 80px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(11),
  body[data-page="purchases"] .table-wrap td:nth-child(11) { width: 100px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(12),
  body[data-page="purchases"] .table-wrap td:nth-child(12) { width: 90px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(13),
  body[data-page="purchases"] .table-wrap td:nth-child(13) { width: 190px !important; }
  body[data-page="purchases"] .table-wrap th:nth-child(14),
  body[data-page="purchases"] .table-wrap td:nth-child(14) { width: 160px !important; }

  body[data-page="purchases"] .purchase-table-stack {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
  }

  body[data-page="purchases"] .purchase-table-stack strong,
  body[data-page="purchases"] .purchase-table-stack small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="purchases"] .purchase-table-stack small {
    color: #8a98aa !important;
    font-size: 10px !important;
  }

  body[data-page="purchases"] .purchase-status-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="purchases"] .purchase-status-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page="purchases"] .purchase-status-item small {
    color: #98a2b3 !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  body[data-page="purchases"] .purchase-status-item .badge {
    max-width: 84px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    padding-inline: 6px !important;
  }

  body[data-page="purchases"] .table-wrap td[data-label="구매자·추천인"],
  body[data-page="purchases"] .table-wrap td[data-label="상품"],
  body[data-page="purchases"] .table-wrap td[data-label="상태"] {
    white-space: normal !important;
  }

  body[data-page="purchases"] .table-wrap td[data-label="적립률"] .row-actions,
  body[data-page="purchases"] .table-wrap td[data-label="처리"] .row-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body[data-page="purchases"] .table-wrap td[data-label="적립률"] .small-input {
    width: 56px !important;
    min-width: 56px !important;
    padding-inline: 6px !important;
  }

  body[data-page="purchases"] .table-wrap td[data-label="적립률"] .compact,
  body[data-page="purchases"] .table-wrap td[data-label="처리"] .compact {
    padding-inline: 7px !important;
    min-width: 0 !important;
  }
}

/* Shared purchase footer: keep actions together and pagination on its own row. */
@media (min-width: 761px) {
  body[data-page="purchases"] .bottom-actions.show {
    display: grid !important;
    grid-template-columns: auto auto minmax(160px, 1fr) auto auto !important;
    grid-template-areas:
      "excel status file upload delete"
      "pagination pagination pagination pagination pagination" !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
    padding: 12px 16px 14px !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #downloadExcelButton {
    grid-area: excel;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #downloadStatusTemplateButton {
    grid-area: status;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #statusTemplateFileInput {
    grid-area: file;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 420px !important;
    flex: none !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #applyStatusTemplateButton {
    grid-area: upload;
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #deleteRowsButton {
    grid-area: delete;
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > .bottom-pagination {
    grid-area: pagination;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    order: initial !important;
  }

  body[data-page="purchases"] .bottom-actions.show > .bottom-pagination > .pagination {
    width: fit-content !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 760px) {
  body[data-page="purchases"] .bottom-actions.show {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "excel status"
      "file file"
      "upload delete"
      "pagination pagination" !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #downloadExcelButton {
    grid-area: excel;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #downloadStatusTemplateButton {
    grid-area: status;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #statusTemplateFileInput {
    grid-area: file;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #applyStatusTemplateButton {
    grid-area: upload;
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > #deleteRowsButton {
    grid-area: delete;
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  body[data-page="purchases"] .bottom-actions.show > .bottom-pagination {
    grid-area: pagination;
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    order: initial !important;
  }

  body[data-page="purchases"] .bottom-actions.show > .bottom-pagination > .pagination {
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
}

/* Last shell correction: legacy inline tablet rules must not split the sidebar and workspace widths. */
@media (min-width: 761px) and (max-width: 1279px) {
  html body[data-page] .app > .sidebar {
    width: var(--sidebar) !important;
    min-width: var(--sidebar) !important;
    max-width: var(--sidebar) !important;
    flex: 0 0 var(--sidebar) !important;
  }

  html body[data-page] .app > .workspace {
    width: calc(100% - var(--sidebar)) !important;
    margin-left: var(--sidebar) !important;
  }

  html body[data-page] .sidebar > .nav > a,
  html body[data-page] .sidebar > .nav > .nav-section-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}