* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: #17201d;
  background: #f5f7f5;
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}

button, input, textarea, select {
  font: inherit;
}

button {
  border: 1px solid #cbd6d0;
  background: white;
  color: #17201d;
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  cursor: default;
}

.btn-primary {
  border-color: #0e8276;
  background: #0e8276;
  color: white;
  font-weight: 700;
}

.btn-secondary {
  border-color: #cbd6d0;
  background: #eef3f0;
  color: #17201d;
}

/* Draws attention to "Fixture mentése" right after applying a match to the
   fields — applying only edits the in-memory form, it never saves, so the
   progress badges (which reflect the saved fixture, not the live form)
   stay unchanged until this button is actually clicked. */
@keyframes unsaved-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 130, 118, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(14, 130, 118, 0); }
}

.unsaved-pulse {
  animation: unsaved-pulse 1s ease-in-out 3;
}

.btn-danger {
  border-color: #a4001d;
  background: white;
  color: #a4001d;
}

/* ---------------------------------------------------------------------- */
/* Sidebar: single primary navigation                                     */
/* ---------------------------------------------------------------------- */
.sidebar {
  border-right: 1px solid #d6ddd8;
  background: white;
  padding: 16px;
  overflow: auto;
}

.brand h1 {
  margin: 0;
  font-size: 17px;
}

.brand p {
  margin: 4px 0 0;
  color: #63706a;
  font-size: 12px;
}

body.login-page {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
}

.login-card {
  width: min(360px, calc(100vw - 32px));
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 10px;
  padding: 24px;
}

.login-card h1 {
  margin: 0 0 8px;
  font-size: 19px;
}

.login-card form {
  display: grid;
  gap: 12px;
}

.login-card label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.login-card input {
  border: 1px solid #cbd6d0;
  border-radius: 6px;
  padding: 8px 10px;
}

.operator-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
}

.operator-session button {
  padding: 4px 8px;
  font-size: 12px;
}

.operator {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a978f;
}

.operator input {
  border: 1px solid #cbd6d0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: #17201d;
}

.operator input:placeholder-shown {
  border-color: #d9a441;
  background: #fff8e8;
}

.product-split summary,
.merchant-merge summary {
  cursor: pointer;
}

.product-split summary h4,
.merchant-merge summary h4 {
  display: inline;
}

.split-list,
.split-target,
#split-target-results {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  font-size: 13px;
}

.split-list {
  max-height: 220px;
  overflow: auto;
}

.nav {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.nav-group h3 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a978f;
}

.nav-group {
  display: grid;
  gap: 4px;
}

.nav-developer {
  border-top: 1px solid #e2e8e4;
  padding-top: 14px;
}

.nav-item {
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: #3a453e;
  border-radius: 6px;
  padding: 8px 10px;
}

.nav-item:hover {
  background: #eef3f0;
}

.nav-item.active {
  background: #0e8276;
  color: white;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Workspace shell                                                        */
/* ---------------------------------------------------------------------- */
.workspace {
  min-width: 0;
  padding: 18px 22px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-height: 100vh;
}

.workspace-header h2 {
  margin: 0;
}

.workspace-header p {
  margin: 4px 0 0;
  color: #63706a;
  font-size: 13px;
}

.view {
  display: none;
  min-height: 0;
}

.view.active {
  display: block;
}

.view.active.master-detail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  min-height: 0;
}

/* ---------------------------------------------------------------------- */
/* Overview                                                                */
/* ---------------------------------------------------------------------- */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.overview-grid.compact {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.overview-card {
  text-align: left;
  border: 1px solid #d6ddd8;
  border-radius: 10px;
  padding: 16px;
  background: white;
  cursor: pointer;
}

.overview-card:hover {
  border-color: #0e8276;
}

.overview-card strong {
  display: block;
  font-size: 30px;
}

.overview-card span, .overview-grid article span {
  color: #63706a;
  font-size: 13px;
}

.overview-grid article {
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
}

.overview-grid article strong {
  display: block;
  font-size: 24px;
}

/* ---------------------------------------------------------------------- */
/* Master-detail list / item                                              */
/* ---------------------------------------------------------------------- */
.list-pane {
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
}

.list-filters {
  display: flex;
  gap: 6px;
}

.inline-metrics {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  background: #f8fbf9;
  color: #46524d;
  font-size: 12px;
}

.inline-metrics b {
  color: #17201d;
}

.chip {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  background: #eef3f0;
  border-color: #d6ddd8;
}

.chip.active {
  background: #0e8276;
  color: white;
  border-color: #0e8276;
}

.item-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.queue-item {
  display: grid;
  width: 100%;
  gap: 3px;
  text-align: left;
  color: #17201d;
  background: #f8fbf9;
  border-color: #d7e0da;
}

.queue-item.active {
  border-color: #0e8276;
  background: #eaf7f3;
}

.queue-item span, .queue-item small {
  color: #63706a;
}

.db-import-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.db-import-badge-yes {
  background: #e3f3ef;
  color: #0e8276;
  border: 1px solid #0e8276;
}

.db-import-badge-no {
  background: #f1f1f1;
  color: #7a7a7a;
  border: 1px solid #cfcfcf;
}

.db-import-badge-rejected {
  background: #fbe8ea;
  color: #a4001d;
  border: 1px solid #a4001d;
}

.detail-pane {
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 16px;
  overflow: auto;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.detail-header h3 {
  margin: 0;
}

.detail-block {
  margin-top: 14px;
}

.detail-block h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #63706a;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.fact {
  display: grid;
  gap: 2px;
}

.fact span {
  color: #63706a;
  font-size: 12px;
}

.fact strong {
  font-size: 14px;
}

.suggestion-block {
  border: 1px solid #cfe6df;
  background: #f4fbf9;
  border-radius: 8px;
  padding: 12px;
}

.preview-block {
  border: 1px solid #b98100;
  background: #fff7e2;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.warning-block {
  border: 1px solid #d89a00;
  background: #fff8e5;
  border-radius: 8px;
  padding: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #e3e9e5;
  vertical-align: top;
}

.data-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #63706a;
}

.data-table tr[data-open-entity] {
  cursor: pointer;
}

.data-table tr[data-open-entity]:hover {
  background: #f1f6f3;
}

.preview-table {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  font-size: 13px;
}

.preview-row {
  display: grid;
  grid-template-columns: 52px minmax(150px, 190px) minmax(140px, 1fr) minmax(220px, 1.4fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f0e2bd;
  align-items: center;
}

.preview-head {
  font-weight: 700;
  color: #63706a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid #d6c286;
}

.preview-row.changed span:last-child {
  font-weight: 700;
  color: #8a5a00;
}

.preview-row input:not([type]),
.preview-row input[type="text"] {
  width: 100%;
}

.suggestion-input {
  display: grid;
  gap: 6px;
}

.suggestion-input select {
  width: 100%;
}

.provider-flow-block {
  border: 1px solid #d6ddd8;
  background: #fbfdfb;
  border-radius: 8px;
  padding: 12px;
}

.provider-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.provider-step {
  display: grid;
  grid-template-columns: 20px auto;
  grid-template-areas:
    "icon label"
    "icon status";
  align-items: center;
  gap: 0 6px;
  min-width: 130px;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  background: white;
  color: #25312b;
  padding: 8px 10px;
  text-align: left;
}

.provider-icon {
  grid-area: icon;
  font-weight: 800;
}

.provider-step span:not(.provider-icon) {
  grid-area: label;
  font-weight: 700;
  font-size: 12px;
}

.provider-step small {
  grid-area: status;
  color: #63706a;
}

.provider-matched .provider-icon {
  color: #0e8276;
}

.provider-invalid .provider-icon,
.provider-not_found .provider-icon,
.provider-error .provider-icon {
  color: #a4001d;
}

.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid #cfd8d2;
  border-top-color: #0e8276;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(26, 35, 31, 0.45);
}

.modal {
  width: min(560px, 100%);
  background: white;
  border: 1px solid #cfd8d2;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
  /* A backdrop position: fixed, tehát ő maga nem görgethető: magasság-korlát
     nélkül a nála magasabb modal teteje-alja egyszerűen elérhetetlen lenne
     (a place-items: center miatt mindkét irányban kilóg). Ezért a modal a
     viewportra van szabva (- 2 * 20px backdrop padding), és a görgetés a
     .modal-body-ban történik, hogy a fejléc a Bezárás gombbal együtt mindig
     látszódjon. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
}

.modal-wide {
  width: min(860px, 100%);
}

.recognition-trace-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.recognition-trace-step {
  border: 1px solid #cfd8d2;
  border-radius: 6px;
  padding: 12px;
}

.recognition-trace-step p {
  margin: 8px 0 0;
}

.recognition-trace-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recognition-trace-step-header div {
  display: grid;
  gap: 2px;
}

.recognition-trace-step-header span {
  color: #607068;
}

.recognition-step-number {
  align-items: center;
  background: #eef3f0;
  border: 1px solid #cbd6d0;
  border-radius: 50%;
  color: #17201d !important;
  display: inline-flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
}

.recognition-step-response,
.recognition-full-response {
  margin-top: 10px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  /* Flex gyerekként enélkül a min-content magassága lenne a padló, és sosem
     zsugorodna a max-height alá — vagyis nem görgetne, csak kilógna. */
  min-height: 0;
  /* Hogy a görgetősáv ne takarja a jobb szélen a tartalmat. */
  padding-right: 4px;
}

.suggestion-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
}

.confidence-tag {
  font-size: 12px;
  font-weight: 600;
  color: #0e8276;
  background: #eaf7f3;
  border-radius: 999px;
  padding: 2px 10px;
}

.evidence-checklist {
  margin-top: 8px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: #3a453e;
}

.related-group {
  border: 1px solid #e4ebe6;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.related-group summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.count-badge {
  display: inline-block;
  background: #eef3f0;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  color: #63706a;
  font-weight: 600;
}

.related-cards {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.mini-card {
  border: 1px solid #e4ebe6;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fbfcfb;
  display: grid;
  gap: 2px;
}

.mini-card span {
  color: #63706a;
  font-size: 12px;
}

.detail-actions {
  margin-top: 18px;
  border-top: 1px solid #e4ebe6;
  padding-top: 14px;
  display: grid;
  gap: 10px;
}

.primary-row {
  justify-content: flex-end;
}

.danger-row {
  justify-content: flex-start;
}

#detail-action-feedback {
  margin-top: 8px;
  color: #63706a;
  font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/* Badges                                                                  */
/* ---------------------------------------------------------------------- */
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pending {
  background: #fff7e2;
  color: #8a5a00;
}

.badge-ok {
  background: #eaf7f3;
  color: #0e8276;
}

.badge-danger {
  background: #fdeaec;
  color: #a4001d;
}

.badge-warn {
  background: #fdeee0;
  color: #a15200;
}

/* ---------------------------------------------------------------------- */
/* Empty states / hints                                                    */
/* ---------------------------------------------------------------------- */
.empty-state {
  color: #63706a;
  padding: 18px 4px;
  text-align: center;
}

.hint {
  color: #63706a;
  font-size: 13px;
  margin: 4px 0 10px;
}

.success {
  color: #0e8276;
}

.error {
  color: #a4001d;
}

/* Result of "Fixture mentése" / "Áttöltés Price DB-be" — this used to just
   overwrite the small gray fixture-path text at the top of the panel, so a
   failure (e.g. "no importable line items") looked identical to a success
   and was easy to miss entirely. Now a real banner, color-coded. */
#dev-import-result {
  margin: 6px 0 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

#dev-import-result.success {
  background: #e3f3ef;
  border: 1px solid #0e8276;
}

#dev-import-result.error {
  background: #fbe8ea;
  border: 1px solid #a4001d;
}

/* ---------------------------------------------------------------------- */
/* Operations / Audit                                                      */
/* ---------------------------------------------------------------------- */
.view.active#view-operations {
  display: grid;
  gap: 16px;
}

.op-panel {
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 16px;
}

.op-panel h3 {
  margin-top: 0;
}

label {
  display: grid;
  gap: 5px;
  font-weight: 700;
  font-size: 13px;
  max-width: 320px;
}

input, textarea, select {
  width: 100%;
  border: 1px solid #cbd6d0;
  border-radius: 6px;
  padding: 9px 10px;
  background: white;
}

.result {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.view.active#view-audit {
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 16px;
  overflow: auto;
}

.audit-row {
  border-bottom: 1px solid #e4ebe6;
  padding: 8px 0;
}

.audit-row span, .audit-row small {
  display: block;
  color: #63706a;
  margin-top: 3px;
}

/* ---------------------------------------------------------------------- */
/* Developer tool                                                          */
/* ---------------------------------------------------------------------- */
.view.active#view-developer {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: 0;
}

.dev-banner {
  background: #fff7e2;
  border: 1px solid #f0d999;
  border-radius: 8px;
  padding: 10px 14px;
  display: grid;
  gap: 2px;
}

.dev-banner span {
  color: #7a5c00;
  font-size: 13px;
}

.dev-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  min-height: 0;
}

.dev-queue {
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  /* With 100+ fixtures the list used to have no height cap at all, so it
     just grew as tall as its content and the whole page scrolled to reach
     the bottom of it. Capping this panel to the viewport and only
     scrolling #dev-queue-list (not the filters above it) keeps the search/
     filter controls always visible while browsing a long list. */
  max-height: calc(100vh - 180px);
  min-height: 0;
}

.dev-queue-filters {
  display: grid;
  gap: 8px;
}

/* Multi-select dropdown (native <details>/<summary> — no JS positioning
   needed): closed by default like a normal <select>, opens into a small
   checklist popover instead of permanently taking up sidebar space. */
.dev-checkbox-dropdown {
  position: relative;
}

.dev-checkbox-dropdown summary {
  border: 1px solid #cbd6d0;
  background: white;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.dev-checkbox-dropdown summary::-webkit-details-marker {
  display: none;
}

.dev-checkbox-dropdown summary::after {
  content: "▾";
  float: right;
  color: #63706a;
}

.dev-checkbox-dropdown[open] summary {
  border-color: #0e8276;
}

/* The panel's own `display: grid` (for the checkbox rows inside it) has
   higher specificity than the browser's default "hide non-summary content
   while <details> is closed" rule, so it silently overrode it and the
   dropdown stayed open-looking at all times. This wins that fight back. */
.dev-checkbox-dropdown:not([open]) .dev-checkbox-dropdown-panel {
  display: none;
}

.dev-checkbox-dropdown-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(23, 32, 29, 0.12);
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

.dev-checkbox-dropdown-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 2px;
}

.dev-checkbox-dropdown-panel input {
  margin: 0;
}

#dev-queue-list {
  overflow-y: auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.dev-main {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.dev-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.dev-toolbar p {
  margin: 0;
  color: #63706a;
  font-size: 12px;
}

.dev-empty {
  background: white;
  border: 1px dashed #cbd6d0;
  border-radius: 8px;
}

.dev-layout-inner {
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr;
  gap: 14px;
}

.progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.step {
  border: 1px solid #d6ddd8;
  border-radius: 6px;
  padding: 10px;
  background: white;
}

.step.done {
  border-color: #0e8276;
  background: #eaf7f3;
}

.step.next {
  border-color: #b98100;
  background: #fff7e2;
}

.step span {
  display: block;
  margin-top: 2px;
  color: #63706a;
  font-size: 12px;
}

.receipt-pane, .editor-pane {
  background: white;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}

#receipt-image {
  display: block;
  width: 100%;
  max-height: 42vh;
  object-fit: contain;
  border: 1px solid #d6ddd8;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fbfbfb;
}

#no-image {
  border: 1px dashed #b9c7c0;
  border-radius: 6px;
  padding: 18px;
  color: #63706a;
  margin-bottom: 10px;
}

#ocr-text {
  min-height: 220px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.panel {
  display: none;
}

.panel.active {
  display: grid;
  gap: 10px;
}

.candidate-list {
  display: grid;
  gap: 8px;
}

.candidate, .line-card {
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfb;
}

.candidate span, .candidate small {
  display: block;
  color: #63706a;
  margin-top: 4px;
}

.evidence-section {
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 8px;
  background: #fbfcfb;
  margin-bottom: 8px;
}

.tech-details {
  margin-top: 12px;
}

.tech-details summary {
  cursor: pointer;
  color: #63706a;
  font-size: 12px;
}

pre {
  overflow: auto;
  background: #111816;
  color: #d7fff2;
  padding: 10px;
  border-radius: 6px;
  font-size: 12px;
}

@media (max-width: 980px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    max-height: 40vh;
    border-right: 0;
    border-bottom: 1px solid #d6ddd8;
  }

  .view.active.master-detail,
  .dev-layout,
  .dev-layout-inner,
  .progress {
    grid-template-columns: 1fr;
  }
}

.warning-inline {
  border-left: 3px solid #c98a12;
  background: #fdf6e7;
  padding: 8px 10px;
  margin: 6px 0;
  font-size: 13px;
  color: #4a3c1c;
}

.tax-flow-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.tax-flow-step-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 7px;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
  background: #f8faf8;
  color: #3a453e;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.tax-flow-step-tab span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #d6ddd8;
  color: #3a453e;
  font-size: 11px;
}

.tax-flow-step-tab.active {
  border-color: #0e8276;
  background: #eefaf7;
  color: #0b463f;
}

.tax-flow-step-tab.active span {
  background: #0e8276;
  color: white;
}

.tax-flow-step-tab.done span {
  background: #9fc8bf;
  color: #0b463f;
}

.tax-flow-step-tab.waiting {
  opacity: .55;
  cursor: not-allowed;
}

.tax-flow-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}

.merchant-validation-wizard {
  display: grid;
  gap: 12px;
}

.merchant-flow-stepper {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.merchant-flow-panel {
  display: grid;
  gap: 10px;
}

.merchant-flow-panel[hidden] {
  display: none;
}

.merchant-flow-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.merchant-flow-step-title h4 {
  margin: 0;
  color: #17201d;
  font-size: 15px;
  text-transform: none;
}

.merchant-flow-panel > .detail-block:first-of-type {
  margin-top: 0;
}

.merchant-flow-nav {
  margin-top: 0;
}

.embedded-actions {
  margin-top: 10px;
}

.step-number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #d6ddd8;
  color: #3a453e;
  font-size: 12px;
  font-weight: 700;
}