:root {
  --bg: #eef2ef;
  --surface: #ffffff;
  --surface-soft: #f8faf7;
  --surface-muted: #f3f6f4;
  --ink: #1f2723;
  --muted: #6f766f;
  --line: #dce3dc;
  --brand: #106b55;
  --brand-dark: #0b4b3e;
  --accent: #24658f;
  --accent-soft: #eaf3fa;
  --danger: #b83232;
  --issue: #9a5b00;
  --ok: #087b44;
  --shadow: 0 16px 44px rgba(26, 45, 38, 0.08);
  --shadow-strong: 0 24px 70px rgba(19, 54, 44, 0.16);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Modon operations suite */
.modon-suite-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy state";
  gap: 18px 24px;
  align-items: center;
  margin-bottom: 14px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgba(61, 159, 129, 0.28), transparent 34%),
    linear-gradient(135deg, #123c34 0%, #0c5948 58%, #153a45 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(12, 57, 47, 0.16);
}

.modon-suite-copy {
  grid-area: copy;
}

.modon-suite-kicker {
  color: #cfeafb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.modon-suite-copy h2 {
  margin: 6px 0 4px;
  color: #fff;
  font-size: 28px;
}

.modon-suite-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.modon-suite-state {
  grid-area: state;
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.modon-state-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #e0a543;
  box-shadow: 0 0 0 5px rgba(224, 165, 67, 0.14);
}

.modon-suite-state.synced .modon-state-dot {
  background: #54d7a7;
  box-shadow: 0 0 0 5px rgba(84, 215, 167, 0.14);
}

.modon-suite-state small,
.modon-suite-state strong {
  display: block;
}

.modon-suite-state small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 9px;
}

.modon-suite-state strong {
  margin-top: 2px;
  color: #fff;
  font-size: 11px;
}

.modon-suite-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.modon-suite-nav button {
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 700;
}

.modon-suite-nav button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.modon-suite-nav button.active {
  border-color: rgba(255, 255, 255, 0.82);
  background: #fff;
  color: #153f36;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(3, 30, 23, 0.18);
}

.modon-suite-panel {
  border-color: #d9e6e1;
  box-shadow: 0 10px 28px rgba(20, 66, 54, 0.05);
}

.modon-order-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  align-items: start;
}

.modon-order-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.modon-form-section {
  margin: 0;
  padding: 0;
  overflow: visible;
}

.modon-form-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
}

.modon-form-section-head > div {
  min-width: 0;
  flex: 1;
}

.modon-form-section-head h2 {
  margin: 0;
  font-size: 17px;
}

.modon-form-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.modon-step-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 10px;
  background: #e7f3ef;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.modon-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding: 18px;
}

.modon-form-grid .wide {
  grid-column: 1 / -1;
}

.modon-product-picker {
  display: block;
  margin: 16px 18px 10px;
}

.modon-order-lines-wrap {
  margin: 0 18px 18px;
}

.modon-order-lines-table {
  min-width: 690px;
}

.modon-order-lines-table th {
  background: #f2f7f5;
  color: #375d52;
  font-size: 10px;
}

.modon-lines-empty {
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 30px 16px;
  color: var(--muted);
  background: #fafcfb;
  text-align: center;
}

.modon-lines-empty strong {
  color: #35564e;
}

.modon-lines-empty span {
  font-size: 10px;
}

.modon-order-checkout {
  position: sticky;
  top: 14px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-color: #cfe0da;
  box-shadow: 0 16px 36px rgba(21, 63, 53, 0.1);
}

.modon-checkout-head {
  padding: 18px;
  background: linear-gradient(145deg, #173f36, #0f6752);
  color: #fff;
}

.modon-checkout-head h2 {
  margin: 5px 0 4px;
  color: #fff;
  font-size: 19px;
}

.modon-checkout-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: 10px;
}

.modon-checkout-fields {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.modon-free-delivery {
  min-height: 58px;
  display: flex !important;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8faf9;
}

.modon-free-delivery input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.modon-free-delivery strong,
.modon-free-delivery small {
  display: block;
}

.modon-free-delivery small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.modon-order-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 16px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.modon-order-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.modon-order-summary > div:last-child {
  border-bottom: 0;
  background: #e8f4f0;
}

.modon-order-summary > div:nth-last-child(2) {
  background: #f5f8f7;
}

.modon-order-summary span {
  color: var(--muted);
  font-size: 10px;
}

.modon-order-summary strong {
  color: #173f36;
  font-size: 12px;
}

.modon-order-checkout .form-notice {
  margin: 12px 16px 0;
}

.modon-submit-order {
  width: calc(100% - 32px);
  min-height: 50px;
  margin: 14px 16px 8px;
  font-size: 13px;
  font-weight: 900;
}

.modon-submit-note {
  display: block;
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.modon-control-overview,
.modon-account-overview,
.modon-collection-overview {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid #d6e5df;
  border-radius: 13px;
  background: linear-gradient(145deg, #f7fbf9, #fff);
  box-shadow: 0 10px 30px rgba(20, 66, 54, 0.05);
}

.modon-control-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.modon-control-heading h2 {
  margin: 5px 0 0;
}

.modon-control-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.modon-control-metrics .metric {
  min-height: 92px;
  padding: 12px;
}

.modon-control-metrics .metric strong {
  font-size: 20px;
}

.modon-action-queue {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.modon-action-card {
  position: relative;
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #dbe6e2;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: right;
}

.modon-action-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: #7b9990;
}

.modon-action-card.danger::before {
  background: #ba493d;
}

.modon-action-card.attention::before {
  background: #d08a2f;
}

.modon-action-card.money::before {
  background: #168162;
}

.modon-action-card.return::before {
  background: #496e9a;
}

.modon-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 117, 91, 0.32);
  box-shadow: 0 12px 26px rgba(14, 59, 48, 0.09);
}

.modon-action-card span,
.modon-action-card small {
  color: var(--muted);
  font-size: 10px;
}

.modon-action-card strong {
  color: #173f36;
  font-size: 23px;
}

.modon-action-card i {
  margin-top: 5px;
  color: var(--brand);
  font-size: 9px;
  font-style: normal;
}

.modon-simple-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  padding: 24px 28px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0b493c, #0c6854);
  color: #fff;
  box-shadow: 0 16px 35px rgba(7, 66, 52, 0.14);
}

.modon-page-backbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.modon-center-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #bed6cf;
  border-radius: 10px;
  background: #fff;
  color: #0a6752;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(18, 76, 61, 0.06);
}

.modon-center-back:hover {
  border-color: #70aa9b;
  background: #f1f8f6;
  transform: translateX(2px);
}

.modon-center-back span {
  font-size: 16px;
}

.modon-simple-hero-copy > span {
  color: #9ed9c7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.modon-simple-hero h2 {
  margin: 7px 0 5px;
  color: #fff;
  font-size: 28px;
}

.modon-simple-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.modon-simple-sync {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modon-simple-sync > div {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.modon-simple-sync small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
}

.modon-simple-sync strong {
  color: #fff;
  font-size: 11px;
}

.modon-simple-sync button {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.modon-simple-home {
  margin-bottom: 14px;
  padding: 22px;
  border: 1px solid #d6e5df;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20, 66, 54, 0.06);
}

.modon-simple-heading {
  margin-bottom: 17px;
}

.modon-simple-heading h2 {
  margin: 5px 0;
  color: #173f36;
  font-size: 21px;
}

.modon-simple-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.modon-simple-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.modon-simple-action {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid #d8e5e1;
  border-radius: 13px;
  background: #f9fbfa;
  color: #173f36;
  text-align: right;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.modon-simple-action:hover {
  transform: translateY(-2px);
  border-color: #8abdaf;
  box-shadow: 0 12px 24px rgba(14, 75, 59, 0.09);
}

.modon-simple-action > i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e4f1ed;
  color: #0a6d56;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.modon-simple-action > span {
  display: grid;
  gap: 6px;
}

.modon-simple-action strong {
  color: inherit;
  font-size: 14px;
}

.modon-simple-action small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.modon-simple-action > b {
  color: #7c978f;
  font-size: 15px;
}

.modon-simple-action.primary-action {
  border-color: #0b6f58;
  background: #0b6f58;
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 111, 88, 0.17);
}

.modon-simple-action.primary-action > i {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.modon-simple-action.primary-action small,
.modon-simple-action.primary-action > b {
  color: rgba(255, 255, 255, 0.75);
}

.modon-simple-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2ebe8;
}

.modon-summary-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  min-height: 75px;
  padding: 12px 14px;
  border: 1px solid #e0e9e6;
  border-radius: 10px;
  background: #fff;
  color: #24473f;
  text-align: right;
}

.modon-summary-item span,
.modon-summary-item small {
  color: var(--muted);
  font-size: 9px;
}

.modon-summary-item strong {
  grid-row: span 2;
  align-self: center;
  color: #0b6f58;
  font-size: 20px;
}

.modon-summary-item i {
  color: #0b6f58;
  font-size: 9px;
  font-style: normal;
}

.modon-summary-item.danger strong {
  color: #a33c35;
}

.modon-summary-item.return strong {
  color: #3d6790;
}

.modon-advanced-tools {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid #d6e3df;
  border-radius: 13px;
  background: #fff;
}

.modon-advanced-tools > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.modon-advanced-tools > summary::-webkit-details-marker {
  display: none;
}

.modon-advanced-tools > summary > span {
  display: grid;
  gap: 5px;
}

.modon-advanced-tools > summary strong {
  color: #173f36;
  font-size: 13px;
}

.modon-advanced-tools > summary small {
  color: var(--muted);
  font-size: 9px;
}

.modon-advanced-tools > summary > i {
  color: #0b6f58;
  font-size: 18px;
  font-style: normal;
  transition: transform 160ms ease;
}

.modon-advanced-tools[open] > summary > i {
  transform: rotate(180deg);
}

.modon-advanced-content {
  padding: 0 14px 14px;
  border-top: 1px solid #e5ecea;
}

.modon-advanced-content .modon-follow-tabs {
  margin-top: 14px;
}

.modon-follow-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.modon-follow-tabs button {
  min-height: 42px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.modon-follow-tabs button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 17px rgba(15, 117, 91, 0.18);
}

.modon-follow-panel {
  display: none;
}

.modon-follow-panel.active {
  display: block;
}

.modon-full-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: center;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid #cfe1da;
  border-radius: 13px;
  background:
    radial-gradient(circle at 8% 0%, rgba(21, 130, 97, 0.12), transparent 33%),
    linear-gradient(145deg, #f4faf7, #fff);
}

.modon-full-match-copy h3 {
  margin: 5px 0 5px;
  color: #173f36;
  font-size: 18px;
}

.modon-full-match-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.modon-full-match-button {
  min-width: 220px;
  min-height: 52px;
  padding-inline: 22px;
  font-size: 13px;
  font-weight: 900;
}

.modon-reconciliation-date-filter,
.modon-match-progress {
  grid-column: 1 / -1;
}

.modon-reconciliation-date-filter {
  margin: 0;
  border-color: #bfd9d0;
  background: rgba(255, 255, 255, 0.86);
}

.modon-reconciliation-date-filter .date-filter-heading b {
  color: var(--brand-dark);
  direction: ltr;
  unicode-bidi: isolate;
}

.modon-match-progress {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #cfe1da;
  border-radius: 11px;
  background: #fff;
}

.modon-match-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modon-match-progress-head strong {
  color: #0d7459;
  font-size: 21px;
  direction: ltr;
}

.modon-match-progress-head span {
  color: #253f38;
  font-size: 12px;
  font-weight: 800;
}

.modon-match-progress-track {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4eeea;
}

.modon-match-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1c8b6b, #54b993);
  transition: width 260ms ease;
}

.modon-match-progress small {
  color: var(--muted);
  font-size: 10px;
}

.modon-match-progress.complete {
  border-color: #8fcab4;
  background: #eff9f5;
}

/* Modon operations center v7 */
#modonFollow {
  --modon-ink: #123a32;
  --modon-green: #08765b;
  --modon-green-dark: #075440;
  --modon-soft: #f3f8f6;
}

.modon-command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 30px;
  align-items: center;
  margin-bottom: 14px;
  padding: 26px 28px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 7% 5%, rgba(83, 202, 160, 0.24), transparent 29%),
    linear-gradient(125deg, #073e33 0%, #075d49 58%, #08765b 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(6, 70, 53, 0.2);
}

.modon-command-title > span {
  color: #8ee0c4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.modon-command-title h2 {
  margin: 7px 0 6px;
  color: #fff;
  font-size: 29px;
}

.modon-command-title p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 11px;
}

.modon-command-refresh {
  display: flex;
  align-items: center;
  gap: 15px;
}

.modon-command-refresh-meta {
  display: grid;
  gap: 3px;
  min-width: 190px;
}

.modon-command-refresh-meta small,
.modon-command-refresh-meta span {
  color: rgba(255,255,255,.62);
  font-size: 8px;
}

.modon-command-refresh-meta strong {
  color: #fff;
  font-size: 11px;
}

.modon-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 18px;
  border-color: rgba(255,255,255,.34);
  background: #fff;
  color: #075440;
  font-weight: 900;
}

.modon-refresh-button i {
  font-size: 19px;
  font-style: normal;
}

.modon-refresh-button.loading i {
  animation: modon-center-spin .8s linear infinite;
}

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

.modon-center-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 12px;
  background: rgba(0,0,0,.15);
}

.modon-center-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.modon-center-progress strong { color: #fff; font-size: 17px; direction: ltr; }
.modon-center-progress span { color: #fff; font-size: 10px; font-weight: 800; }
.modon-center-progress small { color: rgba(255,255,255,.68); font-size: 9px; }
.modon-center-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); }
.modon-center-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#82e3c1,#fff); transition: width .25s ease; }
.modon-center-progress.failed { border-color: rgba(255,176,168,.65); background: rgba(113,24,19,.35); }

.modon-command-kpis {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.modon-command-kpi {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 106px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #d7e5e0;
  border-radius: 14px;
  background: #fff;
  color: var(--modon-ink);
  text-align: right;
  box-shadow: 0 8px 24px rgba(19,64,52,.055);
}

.modon-command-kpi::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: #8eb9ad;
}

.modon-command-kpi span,.modon-command-kpi small { color: var(--muted); font-size: 9px; }
.modon-command-kpi strong { color: var(--modon-ink); font-size: 20px; direction: ltr; unicode-bidi: isolate; }
.modon-command-kpi i { color: var(--modon-green); font-size: 11px; font-style: normal; }
.modon-command-kpi.primary { border-color: #84c8b2; background: linear-gradient(145deg,#eaf8f3,#fff); }
.modon-command-kpi.primary::after { background: var(--modon-green); }
.modon-command-kpi.primary strong { color: #08765b; font-size: 23px; }
.modon-command-kpi.warning::after { background: #d5922c; }
.modon-command-kpi.settled::after { background: #4a83bd; }

.modon-command-workspace {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(270px, .85fr);
  gap: 12px;
  margin-bottom: 12px;
}

.modon-command-primary,.modon-command-side,.modon-center-records {
  border: 1px solid #d8e5e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16,61,49,.055);
}

.modon-command-primary,.modon-command-side { padding: 18px; }
.modon-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid #e5ece9; }
.modon-section-heading h2 { margin: 4px 0 3px; color: var(--modon-ink); font-size: 18px; }
.modon-section-heading p { margin: 0; color: var(--muted); font-size: 9px; }
.modon-section-heading.compact { margin-bottom: 9px; }

.modon-center-collection { display: grid; gap: 8px; }
.modon-center-collection-row { display: grid; grid-template-columns: minmax(170px,1.1fr) minmax(130px,.7fr) minmax(120px,.65fr) auto; gap: 14px; align-items: center; padding: 13px 14px; border: 1px solid #dde8e4; border-radius: 12px; background: #fbfcfc; }
.modon-center-invoice-id,.modon-center-invoice-match { display: grid; gap: 3px; }
.modon-center-invoice-id span,.modon-center-invoice-id small,.modon-center-invoice-match small { color: var(--muted); font-size: 8px; }
.modon-center-invoice-id strong { color: var(--modon-ink); font-size: 14px; }
.modon-center-invoice-match span { width: fit-content; padding: 5px 8px; border-radius: 999px; background: #e6f4ef; color: #08765b; font-size: 9px; font-weight: 800; }
.modon-center-invoice-amount { color: #08765b; font-size: 18px; direction: ltr; unicode-bidi: isolate; }
.modon-center-invoice-actions { display: flex; gap: 6px; }
.modon-center-invoice-actions button { min-height: 38px; white-space: nowrap; }

.modon-command-empty { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 120px; border: 1px dashed #bad8ce; border-radius: 12px; background: #f5faf8; }
.modon-command-empty > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #dff2eb; color: #08765b; font-size: 19px; }
.modon-command-empty > div { display: grid; gap: 4px; }
.modon-command-empty strong { color: var(--modon-ink); font-size: 12px; }
.modon-command-empty small { color: var(--muted); font-size: 9px; }

.modon-center-queue { display: grid; gap: 7px; }
.modon-center-queue button { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; min-height: 53px; padding: 10px 12px; border: 1px solid #e0e9e6; border-radius: 10px; background: #fafcfc; color: var(--modon-ink); text-align: right; }
.modon-center-queue button span { color: #3d5b53; font-size: 10px; font-weight: 700; }
.modon-center-queue button strong { min-width: 28px; color: var(--modon-green); font-size: 18px; }
.modon-center-queue button i { color: #829a93; font-style: normal; }
.modon-center-queue button.danger strong { color: #b44139; }
.modon-center-queue button.warning strong { color: #b2761d; }
.modon-center-queue button.clear { background: #f4faf7; }

.modon-command-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.modon-command-actions button { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; min-height: 78px; padding: 13px; border: 1px solid #d8e5e1; border-radius: 13px; background: #fff; color: var(--modon-ink); text-align: right; }
.modon-command-actions button > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #e7f3ef; color: var(--modon-green); font-size: 17px; font-style: normal; font-weight: 900; }
.modon-command-actions button > span { display: grid; gap: 3px; }
.modon-command-actions strong { font-size: 12px; }
.modon-command-actions small { color: var(--muted); font-size: 8px; }
.modon-command-actions .primary-action { border-color: var(--modon-green); background: var(--modon-green); color: #fff; }
.modon-command-actions .primary-action i { background: rgba(255,255,255,.14); color: #fff; }
.modon-command-actions .primary-action small { color: rgba(255,255,255,.72); }

.modon-center-records { margin-bottom: 14px; padding: 18px; }
.modon-center-records .modon-advanced-content { padding: 0; border: 0; }
.modon-center-records .modon-follow-tabs { grid-template-columns: repeat(3,minmax(130px,1fr)); margin: 0 0 12px; background: #f1f6f4; }
.modon-refresh-from-center { display: grid; gap: 4px; min-width: 220px; padding: 11px 13px; border: 1px solid #cfe1da; border-radius: 10px; background: #fff; }
.modon-refresh-from-center strong { color: var(--modon-green); font-size: 11px; }
.modon-refresh-from-center span { color: var(--muted); font-size: 8px; }

@media (max-width: 1100px) {
  .modon-command-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .modon-command-workspace { grid-template-columns: 1fr; }
  .modon-command-side { order: -1; }
  .modon-center-queue { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .modon-command-hero { grid-template-columns: 1fr; padding: 20px; }
  .modon-command-title h2 { font-size: 24px; }
  .modon-command-refresh { align-items: stretch; flex-direction: column; }
  .modon-refresh-button { width: 100%; }
  .modon-command-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modon-command-kpi.primary { grid-column: 1 / -1; }
  .modon-command-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modon-center-collection-row { grid-template-columns: 1fr auto; }
  .modon-center-invoice-match { grid-column: 1 / -1; }
  .modon-center-invoice-actions { grid-column: 1 / -1; }
  .modon-center-invoice-actions button { flex: 1; }
}

@media (max-width: 480px) {
  .modon-command-kpis,.modon-command-actions,.modon-center-queue { grid-template-columns: 1fr; }
  .modon-command-kpi.primary { grid-column: auto; }
  .modon-command-primary,.modon-command-side,.modon-center-records { padding: 13px; }
  .modon-section-heading { align-items: flex-start; flex-direction: column; }
  .modon-center-records .modon-follow-tabs { grid-template-columns: 1fr; }
}

.modon-match-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.modon-match-steps > div {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.modon-match-steps i {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #edf2f0;
  color: #60716b;
  font-style: normal;
  font-weight: 900;
}

.modon-match-steps span {
  color: #2e463f;
  font-size: 11px;
  font-weight: 800;
}

.modon-match-steps small {
  color: var(--muted);
  font-size: 9px;
}

.modon-match-steps > div.running {
  border-color: #dba85b;
  background: #fffaf1;
}

.modon-match-steps > div.running i {
  background: #f6dcae;
  color: #80520c;
}

.modon-match-steps > div.done {
  border-color: #9bd0bd;
  background: #eff9f5;
}

.modon-match-steps > div.done i {
  background: #168162;
  color: #fff;
}

.modon-match-steps > div.failed {
  border-color: #e3abab;
  background: #fff5f5;
}

.modon-match-steps > div.failed i {
  background: #b83232;
  color: #fff;
}

.modon-full-match-result {
  grid-column: 1 / -1;
  padding: 15px;
  border: 1px solid #9bd0bd;
  border-radius: 10px;
  background: #eff9f5;
}

.modon-full-match-result.failed {
  border-color: #e3abab;
  background: #fff5f5;
}

.modon-full-match-result h4 {
  margin: 0 0 5px;
  color: #174d3e;
}

.modon-full-match-result.failed h4 {
  color: #8c2e2e;
}

.modon-full-match-result p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.modon-full-match-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.modon-full-match-result-grid div {
  padding: 9px 10px;
  border: 1px solid rgba(22, 129, 98, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.modon-full-match-result-grid span,
.modon-full-match-result-grid strong {
  display: block;
}

.modon-full-match-result-grid span {
  color: var(--muted);
  font-size: 9px;
}

.modon-full-match-result-grid strong {
  margin-top: 3px;
  color: #173f36;
  font-size: 15px;
}

.modon-daily-panel {
  margin-top: 0;
}

.modon-collection-overview {
  display: block;
}

.collection-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.collection-kpi {
  position: relative;
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #d8e5e0;
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-align: right;
  box-shadow: 0 8px 22px rgba(20, 66, 54, 0.05);
}

button.collection-kpi {
  cursor: pointer;
}

button.collection-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 117, 91, 0.34);
  box-shadow: 0 12px 25px rgba(20, 66, 54, 0.09);
}

.collection-kpi::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: #74857f;
}

.collection-kpi.ready::before {
  background: #14815f;
}

.collection-kpi.attention::before {
  background: #d28a2e;
}

.collection-kpi.settled::before {
  background: #31709b;
}

.collection-kpi.external::before {
  background: #77837f;
}

.collection-kpi span,
.collection-kpi strong,
.collection-kpi small {
  display: block;
}

.collection-kpi span {
  color: #435a53;
  font-size: 12px;
  font-weight: 800;
}

.collection-kpi strong {
  color: #173f36;
  font-size: 27px;
  line-height: 1;
}

.collection-kpi small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.collection-attention {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.collection-flow-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e5e0;
  border-radius: 11px;
  background: #f7faf9;
}

.collection-flow-guide > div {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
}

.collection-flow-guide i {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e5f2ed;
  color: #0e7057;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.collection-flow-guide span,
.collection-flow-guide strong,
.collection-flow-guide small {
  display: block;
}

.collection-flow-guide strong {
  color: #27473e;
  font-size: 11px;
}

.collection-flow-guide small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.collection-review-group {
  overflow: hidden;
  border: 1px solid #e5cfa8;
  border-radius: 11px;
  background: #fffaf2;
}

.collection-review-group.danger {
  border-color: #e5b9b4;
  background: #fff7f6;
}

.collection-review-group > summary {
  min-height: 68px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}

.collection-review-group > summary::-webkit-details-marker {
  display: none;
}

.collection-review-group > summary span,
.collection-review-group > summary strong,
.collection-review-group > summary small {
  display: block;
}

.collection-review-group > summary strong {
  color: #574521;
  font-size: 12px;
}

.collection-review-group.danger > summary strong {
  color: #7d302b;
}

.collection-review-group > summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.collection-review-group > summary b {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: #9a641c;
  font-size: 16px;
}

.collection-review-group.danger > summary b {
  color: #a13c34;
}

.collection-review-group .reconciliation-list {
  margin: 0 12px 12px;
  padding: 12px;
  border-top: 1px solid rgba(143, 114, 66, 0.18);
  background: #fff;
}

.collection-clear-state,
.collection-empty-state {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 120px;
  padding: 22px;
  border: 1px dashed #bad5ca;
  border-radius: 11px;
  background: #f5fbf8;
  text-align: center;
}

.collection-clear-state strong,
.collection-empty-state strong {
  color: #185a49;
  font-size: 14px;
}

.collection-clear-state span,
.collection-empty-state span {
  color: var(--muted);
  font-size: 10px;
}

.collection-panel-head {
  align-items: end;
}

.collection-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7faf9;
}

.collection-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
}

.collection-filter-tabs button {
  min-height: 48px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.collection-filter-tabs button strong {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e5ece9;
  color: #3d514b;
  font-size: 10px;
}

.collection-filter-tabs button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 17px rgba(15, 117, 91, 0.18);
}

.collection-filter-tabs button.active strong {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.collection-search {
  margin: 0;
}

.collection-search input {
  min-height: 44px;
}

.modon-returns-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: start;
}

#returnInvoiceSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

#returnInvoiceSummary .metric {
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid rgba(16, 107, 85, 0.16);
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f1f8f5);
  box-shadow: 0 8px 22px rgba(12, 54, 45, 0.07);
}

#returnInvoiceSummary .metric strong,
#returnInvoiceSummary .metric b {
  color: var(--brand);
  font-size: 1.65rem;
}

.modon-return-list-panel {
  border: 0;
  background: transparent;
}

.modon-return-list-panel > .panel-head,
.modon-return-scan-panel > .panel-head {
  padding: 18px 20px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(135deg, #0b5d4d, #123e3b);
  color: #fff;
}

.modon-return-list-panel > .panel-head h3,
.modon-return-list-panel > .panel-head p,
.modon-return-scan-panel > .panel-head h3,
.modon-return-scan-panel > .panel-head p {
  color: inherit;
}

#returnInvoiceList {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.carrier-return-card {
  padding: 18px;
  border-radius: 18px;
  border-color: rgba(16, 107, 85, 0.2);
  box-shadow: 0 10px 28px rgba(12, 54, 45, 0.07);
}

.carrier-return-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .7fr) auto;
  gap: 16px;
  align-items: center;
}

.carrier-return-progress-bar {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7efec;
}

.carrier-return-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d7c64, #5ac7a4);
}

.return-preview {
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(12, 54, 45, 0.08);
}

.modon-return-scan-panel,
.modon-return-list-panel {
  margin: 0;
}

.modon-return-scan-panel {
  position: sticky;
  top: 14px;
}

@media (max-width: 1350px) {
  .modon-simple-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modon-control-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modon-action-queue {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  #returnInvoiceSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carrier-return-head {
    grid-template-columns: 1fr 1fr;
  }

  .carrier-return-actions {
    grid-column: 1 / -1;
  }

  .modon-simple-actions,
  .modon-simple-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modon-order-workspace,
  .modon-returns-workspace,
  .modon-collection-overview {
    grid-template-columns: 1fr;
  }

  .collection-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collection-toolbar {
    grid-template-columns: 1fr;
  }

  .modon-order-checkout,
  .modon-return-scan-panel {
    position: static;
  }

  .modon-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modon-suite-nav {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 700px) {
  #returnInvoiceSummary {
    grid-template-columns: 1fr;
  }

  .carrier-return-head {
    grid-template-columns: 1fr;
  }

  .carrier-return-actions {
    grid-column: auto;
  }

  .modon-center-back {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .modon-simple-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px;
  }

  .modon-simple-hero h2 {
    font-size: 24px;
  }

  .modon-simple-sync {
    justify-content: space-between;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .modon-simple-sync > div {
    min-width: 0;
  }

  .modon-simple-home {
    padding: 16px 12px;
  }

  .modon-simple-actions {
    grid-template-columns: 1fr;
  }

  .modon-simple-action {
    min-height: 86px;
    padding: 12px;
  }

  .modon-simple-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modon-summary-item {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 72px;
    padding: 10px;
  }

  .modon-advanced-tools > summary {
    padding: 13px;
  }

  .modon-advanced-content {
    padding: 0 8px 8px;
  }

  .modon-suite-header {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "state";
    gap: 13px;
    padding: 18px 15px 13px;
  }

  .modon-suite-copy h2 {
    font-size: 23px;
  }

  .modon-suite-state {
    width: 100%;
    min-width: 0;
  }

  .modon-suite-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .modon-suite-nav::-webkit-scrollbar {
    display: none;
  }

  .modon-suite-nav button {
    width: auto;
    min-width: 138px;
    min-height: 50px;
    flex: 0 0 138px;
    padding: 11px 15px;
    font-size: 12px;
  }

  .modon-form-grid,
  .modon-control-metrics,
  .modon-action-queue,
  .modon-follow-tabs,
  .modon-match-steps,
  .modon-full-match-result-grid {
    grid-template-columns: 1fr;
  }

  .modon-full-match {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .modon-full-match-button {
    width: 100%;
    min-width: 0;
  }

  .modon-form-section-head,
  .modon-control-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .modon-form-section-head {
    padding: 15px;
  }

  .modon-form-grid {
    padding: 15px;
  }

  .modon-product-picker {
    margin-inline: 15px;
  }

  .modon-order-lines-wrap {
    margin-inline: 15px;
  }

  .modon-action-card {
    min-height: 96px;
  }

  .modon-follow-tabs {
    padding: 4px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  display: block;
}

html,
body {
  overflow-x: hidden;
}

.mobile-menu-button,
.mobile-nav-backdrop {
  display: none;
}

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

.sidebar {
  background: linear-gradient(180deg, #10392f 0%, #0d261f 100%);
  color: #fff;
  position: fixed;
  inset: 0 0 0 auto;
  width: 280px;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  padding: 22px 16px;
  box-shadow: 18px 0 50px rgba(12, 38, 31, 0.18);
  transition: width 0.22s ease, padding 0.22s ease, transform 0.22s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.sidebar-brand {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.sidebar-collapse-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #dce9e4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sidebar-collapse-button:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #dcecf7;
  color: #124966;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 24px;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: #cad8d2;
  margin-top: 4px;
}

.nav {
  display: grid;
  gap: 8px;
  padding-bottom: 20px;
}

.nav-group {
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.nav-group:has(.nav-item.active) {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.nav-group-toggle {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  text-align: right;
  cursor: pointer;
}

.nav-group-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-group-icon,
.nav-item-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 900;
}

.nav-group-icon {
  background: rgba(255, 255, 255, 0.09);
  color: #cfe0da;
}

.nav-group-label {
  font-size: 11px;
  font-weight: 850;
}

.nav-group-chevron {
  font-size: 16px;
  transition: transform 0.18s ease;
}

.nav-group-items {
  display: grid;
  gap: 3px;
  overflow: hidden;
}

.nav-group.collapsed .nav-group-items {
  display: none;
}

.nav-group.collapsed .nav-group-chevron {
  transform: rotate(90deg);
}

.nav-subtitle {
  display: block;
  margin: 8px 12px 2px;
  color: rgba(244, 209, 139, 0.86);
  font-size: 11px;
  font-weight: 700;
}

.nav-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: #dfe9e4;
  text-align: right;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-item-icon {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.68);
}

.nav-item-label {
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  transform: translateX(-2px);
}

.nav-item.active {
  box-shadow: inset -3px 0 #70b7d9;
}

.nav-item.active .nav-item-icon {
  background: #e2f1f8;
  color: #174e6b;
}

.app {
  margin-right: 280px;
  padding: 24px 28px 36px;
  overflow: visible;
  transition: margin-right 0.22s ease;
}

body.sidebar-collapsed .sidebar {
  width: 82px;
  padding-inline: 10px;
}

body.sidebar-collapsed .app {
  margin-right: 82px;
}

body.sidebar-collapsed .sidebar-brand {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
}

body.sidebar-collapsed .sidebar .brand-copy,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .nav-group-chevron,
body.sidebar-collapsed .nav-item-label {
  display: none;
}

body.sidebar-collapsed .sidebar-collapse-button {
  transform: rotate(180deg);
}

body.sidebar-collapsed .nav-group {
  padding: 4px;
}

body.sidebar-collapsed .nav-group-toggle,
body.sidebar-collapsed .nav-item {
  display: flex;
  justify-content: center;
  padding: 6px;
}

body.sidebar-collapsed .nav-item:hover,
body.sidebar-collapsed .nav-item.active {
  transform: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(210, 220, 213, 0.86);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(25, 47, 39, 0.065);
}

.page-heading {
  min-width: 280px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 28px;
  margin-bottom: 6px;
}

h2 {
  font-size: 18px;
  margin-bottom: 0;
}

.topbar p,
.hint {
  color: var(--muted);
  margin-bottom: 0;
}

.top-actions,
.inline-actions,
.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.top-actions {
  justify-content: flex-end;
  gap: 8px;
}


.compact-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.compact-field input {
  width: 150px;
  min-height: 38px;
}
.connection {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
}

.connection.connected {
  color: var(--ok);
  border-color: rgba(8, 123, 68, 0.35);
}

.connection.reconnecting {
  color: #9a6400;
  border-color: rgba(154, 100, 0, 0.35);
  background: #fffaf0;
}

#storageState,
#connectionState {
  cursor: pointer;
}

.connection-recovery-modal {
  width: min(520px, 100%);
}

.connection-recovery-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.connection-recovery-head h2 {
  margin: 0 0 6px;
}

.connection-recovery-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.connection-recovery-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: #fff1c7;
  color: var(--primary-dark);
  font-size: 26px;
  font-weight: 800;
}

.connection-recovery-status {
  min-height: 48px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7faf9;
  line-height: 1.7;
}

.connection-recovery-status.ok {
  border-color: rgba(8, 123, 68, 0.35);
  background: #f1fbf6;
  color: var(--ok);
}

.connection-recovery-status.issue {
  border-color: rgba(176, 72, 32, 0.35);
  background: #fff7f2;
  color: #813817;
}

.connection-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.connection-checks > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.connection-checks span {
  color: var(--muted);
  font-size: 13px;
}

.connection-recovery-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.connection-recovery-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .connection-recovery-modal {
    align-self: center;
    max-height: none;
  }

  .connection-checks {
    grid-template-columns: 1fr;
  }

  .connection-recovery-actions button {
    flex: 1;
  }
}

.form-notice {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  background: #f8fbfa;
  color: var(--text);
  line-height: 1.8;
}

.form-notice.issue {
  border-color: rgba(176, 72, 32, 0.35);
  background: #fff7f2;
  color: #813817;
}

.form-notice.ok {
  border-color: rgba(8, 123, 68, 0.35);
  background: #f1fbf6;
  color: var(--ok);
}

button {
  border: 0;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  min-height: 42px;
}

.primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 22px rgba(16, 107, 85, 0.18);
}

.primary:hover {
  background: var(--brand-dark);
}

.ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

.ghost:hover {
  border-color: var(--brand);
}

.text-button {
  background: transparent;
  color: var(--brand);
  padding: 0;
  min-height: auto;
}

.danger {
  color: var(--danger);
}

.view {
  display: none;
}

.hidden {
  display: none !important;
}

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(16, 107, 85, 0.1), transparent 34%),
    rgba(245, 242, 236, 0.96);
  backdrop-filter: blur(8px);
}

.boot-card {
  width: min(460px, 100%);
  display: grid;
  gap: 16px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-strong);
}

.loader-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.loader-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #4f91b8);
  animation: loaderSweep 1.15s ease-in-out infinite;
}

@keyframes loaderSweep {
  0% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(-260%);
  }
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(245, 242, 236, 0.94);
  backdrop-filter: blur(6px);
}

.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(13, 58, 45, 0.16);
}

.login-brand {
  margin-bottom: 4px;
}

body.locked .sidebar,
body.locked .app,
body.storage-blocked .sidebar,
body.storage-blocked .app {
  pointer-events: none;
  user-select: none;
  filter: blur(1px);
}

.view.active {
  display: block;
}

.dashboard-quickstart {
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid rgba(220, 227, 220, 0.9);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(16, 107, 85, 0.92), rgba(18, 55, 45, 0.96)),
    var(--brand);
  color: #fff;
  box-shadow: var(--shadow-strong);
}

.dashboard-quickstart h2 {
  font-size: 26px;
  line-height: 1.35;
  margin: 8px 0 8px;
}

.dashboard-quickstart p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #c9dfed;
  background: #e8f2f9;
  color: #245f86;
  font-size: 13px;
  font-weight: 700;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quick-card {
  min-height: 142px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
  text-align: right;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #10231d;
  background: #fff;
  box-shadow: 0 18px 44px rgba(6, 22, 17, 0.18);
}

.quick-card span {
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-dark);
}

.quick-card strong {
  color: var(--muted);
  font-size: 14px;
}

.quick-card.sale {
  background: linear-gradient(180deg, #ffffff, #eef8f3);
}

.quick-card.purchase {
  background: linear-gradient(180deg, #ffffff, var(--accent-soft));
}

.quick-card:hover {
  transform: translateY(-2px);
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tab-button {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

.tab-button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.supplier-tab,
.inventory-tab,
.report-tab-panel {
  display: none;
}

.supplier-tab.active,
.inventory-tab.active,
.report-tab-panel.active {
  display: block;
}

.report-tabs {
  margin-top: 14px;
}

.report-tabs .tab-button {
  min-height: 42px;
  padding-inline: 14px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.metric::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--brand);
}

.metric span,
.metric small {
  display: block;
  color: var(--muted);
}

.metric strong {
  display: block;
  font-size: 24px;
  margin: 8px 0;
}

.compact-metrics {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.modon-live-panel {
  border-color: rgba(16, 107, 85, 0.22);
}

.modon-live-metrics {
  grid-template-columns: 1.35fr repeat(3, minmax(150px, 1fr));
}

.modon-live-metrics .metric:first-child {
  background: linear-gradient(135deg, rgba(16, 107, 85, 0.08), #fff);
  border-color: rgba(16, 107, 85, 0.28);
}

.modon-live-metrics .metric:first-child strong {
  font-size: 32px;
}

.modon-account-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(16, 107, 85, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(26, 45, 38, 0.06);
}

.modon-account-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.modon-account-head strong,
.modon-account-head span {
  display: block;
}

.modon-account-head > div:first-child strong {
  font-size: 18px;
}

.modon-account-head span,
.modon-account-kpis span,
.modon-status-item span {
  color: var(--muted);
}

.modon-account-total {
  min-width: 150px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-muted);
}

.modon-account-total strong {
  font-size: 30px;
  color: var(--brand-dark);
}

.modon-account-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.modon-account-kpis > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.modon-account-kpis strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.modon-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.modon-status-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #e9e2d5;
  border-radius: 8px;
  background: #fbfaf7;
}

.modon-status-item strong {
  color: var(--brand-dark);
}

.grid {
  display: grid;
  gap: 16px;
}

.grid > *,
.panel {
  min-width: 0;
}

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

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.one {
  grid-template-columns: 1fr;
}

.form-grid {
  grid-template-columns: minmax(420px, 1.1fr) minmax(320px, 0.9fr);
}

.sales-workspace {
  display: grid;
  gap: 16px;
}

.sales-history,
.compact-invoice-preview {
  margin-top: 14px;
}

.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  white-space: nowrap;
}

.danger-button {
  background: #b42318;
  color: #fff;
}

.danger-button:hover {
  background: #931b12;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.report-toolbar {
  position: sticky;
  top: 16px;
  z-index: 9;
}

.report-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.professional-date-filter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(390px, 1.5fr) minmax(320px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid #d7e4de;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(18, 67, 55, 0.04);
}

.date-filter-heading {
  align-self: center;
}

.date-filter-heading strong,
.date-filter-heading span {
  display: block;
}

.date-filter-heading strong {
  color: var(--brand-dark);
  font-size: 13px;
}

.date-filter-heading span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.date-filter-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 6px;
}

.date-filter-presets button {
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #d6e1dc;
  border-radius: 8px;
  background: #f7faf8;
  color: #425b53;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: 0.18s ease;
}

.date-filter-presets button:hover {
  border-color: rgba(15, 117, 91, 0.45);
  background: #eef7f3;
  color: var(--brand);
}

.date-filter-presets button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 16px rgba(15, 117, 91, 0.18);
}

.date-filter-range {
  display: grid;
  grid-template-columns: minmax(125px, 1fr) auto minmax(125px, 1fr);
  gap: 8px;
  align-items: end;
}

.date-filter-range > span {
  padding-bottom: 12px;
  color: var(--muted);
  font-weight: 800;
}

.date-filter-range label {
  gap: 5px;
  color: #597068;
  font-size: 10px;
}

.date-filter-range input {
  min-height: 40px;
  background: #fbfdfc;
}

.professional-date-filter.custom-range {
  border-color: rgba(15, 117, 91, 0.35);
  box-shadow: inset 0 0 0 1px rgba(15, 117, 91, 0.05);
}

.report-date-filter .date-filter-presets {
  grid-template-columns: repeat(4, minmax(84px, 1fr));
}

@media (max-width: 1180px) {
  .professional-date-filter {
    grid-template-columns: 1fr 1.8fr;
  }

  .date-filter-heading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .professional-date-filter {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .date-filter-heading,
  .date-filter-presets,
  .date-filter-range {
    grid-column: 1;
  }

  .date-filter-presets,
  .report-date-filter .date-filter-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .date-filter-presets button {
    min-width: 0;
  }

  .date-filter-range {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

.report-metrics {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.panel:hover {
  border-color: rgba(16, 107, 85, 0.24);
  box-shadow: 0 18px 50px rgba(26, 45, 38, 0.1);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.panel-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(16, 107, 85, 0.14);
  border-radius: 8px;
  background: var(--surface-soft);
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
}

.compact {
  min-width: 210px;
  color: var(--muted);
}

.compact select {
  margin-top: 6px;
  background: var(--surface);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 42px;
}

.compact select,
.report-filters select,
.report-filters input {
  min-height: 40px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(16, 107, 85, 0.18);
  border-color: var(--brand);
}

textarea {
  resize: vertical;
  min-height: 86px;
}

.search-combo {
  position: relative;
}

.search-combo input[type="hidden"] {
  display: none;
}

.suggestions {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 6px;
}

.suggestions.active {
  display: grid;
  gap: 4px;
}

.suggestion-item {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: right;
  border-radius: 5px;
}

.product-picker {
  margin: 10px 0 12px;
}

.product-suggestion {
  display: grid;
  gap: 3px;
}

.product-suggestion small {
  color: var(--muted);
  font-size: 12px;
}

.suggestion-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

.purchase-lines .table-wrap {
  overflow: visible;
}

.opening-stock-workspace {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.opening-stock-workspace.hidden {
  display: none;
}

.opening-stock-form {
  width: 100%;
}

.opening-stock-table {
  overflow: visible;
}

.opening-stock-table table {
  table-layout: fixed;
}

.opening-stock-table th:first-child { width: 22%; }
.opening-stock-table th:nth-child(2) { width: 15%; }
.opening-stock-table th:nth-child(3) { width: 9%; }
.opening-stock-table th:nth-child(4),
.opening-stock-table th:nth-child(5),
.opening-stock-table th:nth-child(6) { width: 13%; }
.opening-stock-table th:nth-child(7) { width: 10%; }
.opening-stock-table th:last-child { width: 70px; }

.opening-stock-table input {
  min-width: 0;
  width: 100%;
}

.opening-stock-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.purchase-product-cell {
  min-width: 260px;
}

.line-product-suggestions {
  min-width: 280px;
}

.customer-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.logo-preview-box {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
}

.logo-preview-box img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}

.suggestion-item:hover {
  background: var(--surface-soft);
}

.suggestion-empty {
  padding: 10px;
  color: var(--muted);
}

.wide {
  grid-column: 1 / -1;
}

.delivery-fields {
  display: none;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.delivery-fields.active {
  display: block;
}

.section-title {
  font-weight: 700;
  margin-bottom: 12px;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.permission-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(16, 107, 85, 0.14);
  border-radius: 8px;
  background: #fff;
}

.permission-group-title {
  color: var(--brand-dark);
  font-weight: 800;
}

.permission-group-items {
  display: grid;
  gap: 8px;
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
}

.check-line input {
  width: 18px;
  min-height: 18px;
}

.actions {
  margin-top: 18px;
}

.invoice-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(16, 107, 85, 0.18);
  border-radius: 8px;
  background: #f7fbf8;
}

.invoice-summary div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.invoice-summary div:nth-child(3),
.invoice-summary div:nth-child(5),
.invoice-summary div:nth-child(6) {
  background: #fff;
  border-color: rgba(16, 107, 85, 0.3);
}

.invoice-summary strong {
  font-size: 16px;
}

.invoice-summary span {
  color: var(--muted);
}

.invoice-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.checkbox-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
}

.checkbox-control input {
  width: 18px;
  min-height: 18px;
}

.installment-box {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(185, 130, 43, 0.35);
  border-radius: 6px;
  background: rgba(185, 130, 43, 0.07);
}

.installment-box.active {
  display: grid;
}

.installment-preview {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

#saleLines input,
#saleLines select,
#purchaseLines input {
  background: #fff;
}

#saleLines .line-total {
  font-weight: 800;
  color: var(--brand);
  white-space: nowrap;
}

.locked-line select:disabled,
.locked-line input[readonly] {
  color: var(--ink);
  background: #f3f7f5;
  border-color: rgba(16, 107, 85, 0.28);
  opacity: 1;
}

.selected-product {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: var(--ink);
}

.form .table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.form .table-wrap table {
  min-width: 840px;
}

.return-scan-actions {
  margin: 12px 0;
}

.return-scanner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16, 107, 85, 0.24);
  border-radius: 10px;
  background: #071711;
  min-height: 260px;
}

.return-scanner video {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.scanner-frame {
  position: absolute;
  inset: 16%;
  border: 3px solid rgba(246, 196, 103, 0.95);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.return-scanner .hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  text-align: center;
}

.return-preview {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(16, 107, 85, 0.24);
  border-radius: 10px;
  background: #fff;
}

.return-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.return-preview-head strong {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.return-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.return-preview-grid div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.return-preview-grid span {
  display: block;
  color: var(--muted);
  margin-bottom: 6px;
}

.return-preview-grid strong {
  word-break: break-word;
}

.table-wrap {
  overflow: auto;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}

th,
td {
  text-align: right;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  background: var(--surface-muted);
  color: var(--muted);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody tr {
  background: #fff;
}

tbody tr:hover {
  background: #fbfcfb;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ece7db;
  color: var(--muted);
  white-space: nowrap;
}

.badge.ok {
  background: rgba(8, 123, 68, 0.12);
  color: var(--ok);
}

.badge.issue {
  background: rgba(154, 91, 0, 0.14);
  color: var(--issue);
}

.badge.danger {
  background: rgba(184, 50, 50, 0.13);
  color: var(--danger);
}

.badge.external {
  background: rgba(82, 95, 89, 0.12);
  color: #43514b;
}

.modon-external-table table {
  min-width: 980px;
}

.reconciliation-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.reconciliation-strip > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.reconciliation-strip span,
.reconciliation-strip small {
  color: var(--muted);
}

.reconciliation-strip strong {
  font-size: 22px;
  color: var(--brand-dark);
}

.filters-bar {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.filters-bar.compact-list-filters {
  grid-template-columns: minmax(0, 1fr);
}

.filters-bar.inventory-list-filters {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.pagination-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.stack {
  display: grid;
  gap: 12px;
}

.card-line,
.ledger-row,
.report-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.carrier-return-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(16, 107, 85, 0.18);
  border-radius: 8px;
  background: #fff;
}

.carrier-return-card .table-wrap table {
  min-width: 820px;
}

.compact-report {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.compact-report .report-row {
  background: #fff;
}

.card-line {
  align-items: flex-start;
}

.card-line.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(16, 107, 85, 0.12);
}

.card-line.featured-line {
  border-color: rgba(16, 107, 85, 0.38);
  background: linear-gradient(135deg, rgba(16, 107, 85, 0.08), rgba(248, 197, 99, 0.12));
}

.card-line strong,
.ledger-row strong,
.report-row strong {
  color: var(--ink);
}

.ledger,
.report {
  display: grid;
  gap: 10px;
}

.modon-timeline {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -14px;
  right: 8px;
  width: 2px;
  background: var(--line);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 3px solid #d8e4df;
  border-radius: 50%;
  background: #fff;
}

.timeline-body {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.timeline-body strong {
  display: block;
  color: var(--ink);
}

.timeline-body p {
  margin: 6px 0;
  color: var(--ink);
}

.timeline-body small {
  color: var(--muted);
}

.timeline-item.created .timeline-dot,
.timeline-item.modon .timeline-dot {
  border-color: var(--brand);
}

.timeline-item.status .timeline-dot,
.timeline-item.invoice .timeline-dot {
  border-color: #2f80ed;
}

.timeline-item.cash .timeline-dot {
  border-color: #1f9d6a;
}

.timeline-item.stock .timeline-dot,
.timeline-item.return .timeline-dot {
  border-color: #d98c20;
}

.timeline-item.issue .timeline-dot {
  border-color: #c0392b;
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 31, 27, 0.38);
}

.modal-layer.hidden {
  display: none;
}

.modal-card {
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.financial-confirm-modal {
  width: min(680px, 100%);
}

.financial-confirm-warning {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #d7a239;
  border-radius: 6px;
  background: #fff8e8;
  color: #6e4b08;
  font-weight: 700;
}

.financial-confirm-actions {
  justify-content: flex-start;
  margin-top: 16px;
}

.collection-cash-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.collection-cash-preview > div {
  min-height: 90px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8faf9;
}

.collection-cash-preview > div.incoming {
  border-color: #9bcfbc;
  background: #edf8f3;
}

.collection-cash-preview span,
.collection-cash-preview strong,
.collection-cash-preview small {
  display: block;
}

.collection-cash-preview span,
.collection-cash-preview small {
  color: var(--muted);
  font-size: 9px;
}

.collection-cash-preview strong {
  color: #173f36;
  font-size: 17px;
}

.collection-cash-preview .incoming strong {
  color: #0d7458;
}

.collection-confirm-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.audit-details {
  display: grid;
  gap: 14px;
}

.audit-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.audit-meta div,
.audit-change {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 10px;
}

.audit-meta span,
.audit-change span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.audit-change-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.audit-empty-state {
  padding: 18px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  text-align: center;
}

.invoice-preview dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
}

.invoice-preview dt {
  color: var(--muted);
}

.invoice-preview dd {
  margin: 0;
}

.empty {
  color: var(--muted);
  padding: 24px;
  background: var(--surface-soft);
  border-radius: 6px;
  text-align: center;
}

.docs ul {
  margin-bottom: 0;
}

.printer-test-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 28px;
  align-items: center;
  margin-top: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(36, 101, 143, 0.09), transparent 36%),
    #fff;
}

.printer-test-copy h2 {
  margin: 9px 0 7px;
  font-size: 22px;
}

.printer-test-copy > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.printer-test-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
  margin: 18px 0 12px;
}

.printer-test-specs > div {
  padding: 11px 12px;
  border: 1px solid #d9e5e0;
  border-radius: 9px;
  background: #f8fbfa;
}

.printer-test-specs span,
.printer-test-specs strong {
  display: block;
}

.printer-test-specs span {
  color: var(--muted);
  font-size: 10px;
}

.printer-test-specs strong {
  margin-top: 5px;
  color: var(--brand-dark);
  font-size: 12px;
}

.printer-test-note {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-right: 3px solid var(--accent);
  border-radius: 7px;
  background: var(--accent-soft);
  color: #315468;
  font-size: 11px;
}

.printer-test-action {
  min-width: 220px;
  min-height: 44px;
}

.a4-test-preview {
  width: 164px;
  aspect-ratio: 210 / 297;
  justify-self: center;
  padding: 15px 12px;
  border: 1px solid #ccd8d3;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(23, 63, 54, 0.14);
  color: #213a33;
}

.a4-preview-head {
  display: flex;
  gap: 7px;
  align-items: center;
  padding-bottom: 9px;
  border-bottom: 2px solid #174f42;
  font-size: 8px;
}

.a4-preview-head span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #dcecf7;
  color: #174e6b;
  font-weight: 900;
}

.a4-preview-lines {
  display: grid;
  gap: 5px;
  margin: 16px 0;
}

.a4-preview-lines i {
  height: 4px;
  border-radius: 2px;
  background: #dfe7e3;
}

.a4-preview-lines i:nth-child(2) {
  width: 72%;
}

.a4-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.a4-preview-grid i {
  height: 38px;
  border: 1px solid #d8e1dd;
  background: linear-gradient(135deg, #f7faf9, #e9f0ed);
}

.a4-preview-footer {
  margin-top: 30px;
  padding-top: 7px;
  border-top: 1px dashed #aebdb7;
  color: #71827b;
  font-size: 7px;
  text-align: center;
}

.print-template-test-panel {
  margin-top: 14px;
}

.print-template-test-head {
  align-items: end;
}

.print-template-test-head h2 {
  margin: 8px 0 4px;
  font-size: 21px;
}

.print-template-test-controls {
  display: flex;
  gap: 8px;
  align-items: end;
}

.print-template-test-controls label {
  min-width: 220px;
}

.print-template-test-controls button {
  min-height: 42px;
  white-space: nowrap;
}

.print-template-preview-stage {
  padding: 22px;
  overflow: auto;
  border: 1px solid #d9e3df;
  border-radius: 10px;
  background:
    linear-gradient(45deg, #edf2ef 25%, transparent 25%),
    linear-gradient(-45deg, #edf2ef 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #edf2ef 75%),
    linear-gradient(-45deg, transparent 75%, #edf2ef 75%),
    #f7f9f8;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.print-template-preview-document {
  width: min(100%, 210mm);
  max-width: 210mm;
  min-height: 297mm;
  padding: 11mm;
  border: 1px solid #cfd9d5;
  box-shadow: 0 18px 48px rgba(20, 55, 47, 0.14);
}

.print-template-preview-document .print-signatures {
  margin-top: 42px;
}

@media (max-width: 760px) {
  .print-template-test-head,
  .print-template-test-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .print-template-test-controls label {
    min-width: 0;
  }

  .print-template-test-controls button {
    width: 100%;
    white-space: normal;
  }

  .print-template-preview-stage {
    padding: 8px;
  }

  .print-template-preview-document {
    width: 100%;
    min-height: 650px;
    padding: 12px;
    font-size: 10px;
  }

  .print-template-preview-document .print-meta {
    grid-template-columns: 1fr 1fr;
  }

  .print-template-preview-document .print-table {
    font-size: 8.5px;
  }
}

@media (max-width: 760px) {
  .printer-test-panel {
    grid-template-columns: 1fr;
  }

  .printer-test-specs {
    grid-template-columns: 1fr;
  }

  .printer-test-action {
    width: 100%;
    min-width: 0;
  }

  .a4-test-preview {
    width: min(180px, 58vw);
  }
}

.print-layer {
  display: none;
}

.compact-actions {
  justify-content: flex-start;
  margin: 0 0 14px;
}

.print-document {
  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  padding: 11mm;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42;
}

.print-header,
.print-party,
.print-meta,
.print-totals {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.print-header {
  align-items: center;
  border-bottom: 2px solid #173f36;
  padding-bottom: 14px;
  margin-bottom: 13px;
}

.print-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.print-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 3px;
}

.print-logo-placeholder {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 1px solid #bed2cb;
  border-radius: 8px;
  background: #edf5f2;
  color: #0f5848;
  font-size: 24px;
  font-weight: 900;
}

.print-header h1 {
  margin: 0 0 3px;
  color: #173f36;
  font-size: 22px;
}

.print-header p {
  margin: 0;
  color: #555;
  font-size: 11.5px;
}

.print-title {
  text-align: left;
  display: grid;
  gap: 3px;
  align-content: start;
}

.print-title strong {
  color: #173f36;
  font-size: 21px;
}

.print-title span {
  font-size: 12.5px;
  font-weight: 700;
}

.print-title small {
  display: inline-block;
  justify-self: end;
  padding: 2px 7px;
  border: 1px solid #999;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.print-party {
  align-items: center;
  border-bottom: 1px solid #bbb;
  padding: 0 0 10px;
  margin-bottom: 11px;
  font-size: 12.5px;
}

.print-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}

.print-meta div,
.print-totals div {
  border: 1px solid #ddd;
  padding: 7px 9px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.print-meta span,
.print-totals span {
  color: #555;
  font-size: 10.5px;
}

.print-meta strong,
.print-totals strong {
  font-size: 11.5px;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 12px;
}

.print-table th,
.print-table td {
  border: 1px solid #bbb;
  padding: 7px 8px;
  text-align: right;
}

.print-table th {
  background: #edf3f1;
  color: #173f36;
  font-size: 11px;
  font-weight: 800;
}

.customer-statement-table {
  table-layout: fixed;
  max-width: 100%;
}

.customer-statement-table th:nth-child(3),
.customer-statement-table td:nth-child(3) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.customer-statement-table th:nth-child(1),
.customer-statement-table td:nth-child(1),
.customer-statement-table th:nth-child(2),
.customer-statement-table td:nth-child(2),
.customer-statement-table th:nth-child(4),
.customer-statement-table td:nth-child(4),
.customer-statement-table th:nth-child(5),
.customer-statement-table td:nth-child(5),
.customer-statement-table th:nth-child(6),
.customer-statement-table td:nth-child(6) {
  white-space: nowrap;
}

.customer-statement-table th,
.customer-statement-table td {
  box-sizing: border-box;
}

.print-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  width: min(100%, 480px);
  justify-content: end;
  gap: 6px;
  margin-inline-start: auto;
}

.print-totals div:last-child {
  border-color: #173f36;
  background: #edf5f2;
}

.print-notes {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid #ddd;
  background: #fafafa;
  font-size: 11.5px;
}

.print-notes p {
  margin: 3px 0 0;
}

.print-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 34px;
  margin-top: 30px;
}

.print-signatures div {
  min-height: 44px;
  border-top: 1px solid #111;
  padding-top: 7px;
  font-size: 11px;
  text-align: center;
}

.print-footer {
  margin-top: 18px;
  text-align: center;
  border-top: 1px solid #bbb;
  padding-top: 9px;
  color: #555;
  font-size: 10.5px;
}

.print-extra {
  margin-top: 10px;
}

.print-extra h2 {
  margin: 0 0 6px;
  color: #173f36;
  font-size: 13px;
}

.print-extra {
  margin-top: 18px;
}

.print-extra h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.modon-work-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(150px, 0.7fr) minmax(150px, 0.8fr) minmax(260px, auto);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.modon-work-main,
.modon-work-money,
.modon-work-status,
.modon-work-actions {
  display: grid;
  gap: 5px;
}

.modon-work-main strong {
  color: var(--brand);
  font-size: 17px;
}

.modon-work-main small,
.modon-work-money small {
  color: var(--muted);
  line-height: 1.5;
}

.modon-work-status {
  justify-items: start;
}

.modon-work-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.print-batch-card {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #aaa;
}

.print-batch-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 18px;
}

/* Customer, debt, and installment workspaces */
.finance-page {
  --finance-border: rgba(16, 107, 85, 0.16);
}

.finance-page .panel {
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(22, 46, 37, 0.065);
}

.finance-page .panel:hover {
  border-color: var(--finance-border);
  box-shadow: 0 10px 32px rgba(22, 46, 37, 0.065);
}

.debt-overview {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(520px, 1.5fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 20%, rgba(244, 209, 139, 0.16), transparent 28%),
    linear-gradient(135deg, #123f34, #0b2c25);
  color: #fff;
  box-shadow: 0 18px 45px rgba(12, 43, 35, 0.16);
}

.debt-overview .finance-kicker {
  color: #f1cd86;
}

.debt-overview-copy h2 {
  margin: 5px 0 6px;
  font-size: 23px;
  line-height: 1.35;
}

.debt-overview-copy p {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

.debt-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.debt-overview-metrics > div {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
}

.debt-overview-metrics span,
.debt-overview-metrics small {
  display: block;
  color: rgba(255, 255, 255, 0.66);
}

.debt-overview-metrics span {
  min-height: 34px;
  font-size: 12px;
  line-height: 1.45;
}

.debt-overview-metrics strong {
  display: block;
  overflow: hidden;
  margin: 5px 0 4px;
  color: #fff;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debt-overview-metrics small {
  font-size: 11px;
}

.debt-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, 0.58fr);
  gap: 18px;
  align-items: start;
}

.debt-customer-panel {
  min-height: 470px;
}

.debt-side-column {
  display: grid;
  gap: 18px;
}

.debt-action-hub {
  padding: 0;
  overflow: visible;
}

.debt-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
}

.debt-action-head h2 {
  margin: 4px 0 0;
}

.debt-action-head .hint {
  max-width: 180px;
  line-height: 1.55;
}

.debt-action-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 18px;
  padding: 4px;
  border-radius: 9px;
  background: var(--surface-muted);
}

.debt-action-tab {
  min-height: 38px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.debt-action-tab.active {
  background: #fff;
  color: var(--brand-dark);
  box-shadow: 0 4px 14px rgba(24, 48, 39, 0.09);
}

.debt-action-form {
  display: none;
  padding: 18px;
}

.debt-action-form.active {
  display: block;
}

.debt-form-intro {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
}

.debt-form-intro strong {
  font-size: 16px;
}

.debt-form-intro span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.debt-form-fields {
  display: grid;
  gap: 12px;
}

.debt-submit-button {
  width: 100%;
  margin-top: 16px;
}

.personal-debt-panel {
  padding: 16px;
}

.debt-customer-panel .empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  border: 1px dashed #cad5ce;
  border-radius: 11px;
  background: linear-gradient(180deg, #fafcfb, #f6f9f7);
}

.personal-debt-panel .empty {
  border: 1px dashed #d8dfda;
  background: transparent;
}

.finance-action-grid,
.finance-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.finance-list-grid {
  margin-top: 16px;
}

.finance-action-panel,
.finance-list-panel {
  border-color: var(--finance-border);
}

.finance-action-panel {
  display: flex;
  min-height: 292px;
  flex-direction: column;
}

.finance-action-panel .fields {
  flex: 1;
  align-content: start;
}

.finance-action-panel .actions {
  justify-content: flex-start;
  margin-top: 18px;
}

.finance-panel-head,
.finance-list-head,
.customer-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.finance-panel-head {
  min-height: 76px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.finance-panel-head h2,
.finance-list-head h2,
.customer-section-head h4 {
  margin: 4px 0 0;
}

.finance-panel-head > .hint {
  max-width: 230px;
  line-height: 1.65;
}

.finance-kicker,
.finance-record-kicker {
  display: block;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.finance-list-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.finance-list-head > .hint {
  max-width: 260px;
  line-height: 1.65;
}

.finance-record-list,
.installment-list,
.customer-history-list,
.payment-record-list {
  display: grid;
  gap: 12px;
}

.finance-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.finance-record:hover {
  border-color: rgba(16, 107, 85, 0.28);
}

.finance-record-main {
  min-width: 0;
}

.finance-record-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.finance-record-title {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.45;
}

.finance-record-meta {
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.finance-record-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.finance-record-meta span + span::before {
  content: "•";
  margin-inline-end: 8px;
  color: #b3bcb6;
}

.finance-record-amount {
  min-width: 132px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-muted);
  text-align: center;
}

.finance-record-amount span,
.installment-totals span,
.customer-balance-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.finance-record-amount strong {
  display: block;
  margin-top: 5px;
  color: var(--brand-dark);
  font-size: 18px;
  white-space: nowrap;
}

.finance-record-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.finance-record-actions button {
  min-width: 112px;
}

.finance-record-actions.single-action {
  justify-content: flex-start;
}

.finance-record.is-cancelled {
  opacity: 0.72;
  background: #faf9f8;
}

.installment-account,
.customer-account-card {
  overflow: hidden;
  border: 1px solid var(--finance-border);
  border-radius: 12px;
  background: #fff;
}

.installment-account-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(135deg, rgba(16, 107, 85, 0.055), #fff 52%);
  border-bottom: 1px solid var(--line);
}

.installment-totals,
.customer-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(135px, 1fr));
  gap: 8px;
}

.installment-totals > div,
.customer-balance-grid > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.installment-totals strong,
.customer-balance-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  white-space: nowrap;
}

.installment-totals .outstanding {
  border-color: rgba(185, 130, 43, 0.3);
  background: var(--accent-soft);
}

.installment-account-head .finance-record-actions {
  grid-column: auto;
  padding: 0;
  border: 0;
}

.finance-table-wrap {
  border: 0;
  border-radius: 0;
}

.finance-table {
  min-width: 720px;
}

.finance-table th {
  background: #f4f7f5;
}

.finance-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

.customer-directory-head {
  align-items: flex-end;
}

.customer-search-field {
  width: min(380px, 100%);
}

.customer-account-head {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(135deg, rgba(16, 107, 85, 0.07), #fff 55%);
  border-bottom: 1px solid var(--line);
}

.customer-identity {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.customer-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 21px;
  font-weight: 800;
}

.customer-identity h3 {
  margin: 3px 0 0;
  font-size: 20px;
}

.customer-account-actions {
  grid-column: auto;
  padding: 0;
  border: 0;
}

.customer-account-section {
  padding: 16px 18px 18px;
  border-bottom: 1px solid var(--line);
}

.customer-account-section:last-child {
  border-bottom: 0;
}

.customer-section-head {
  align-items: flex-end;
  margin-bottom: 12px;
}

.customer-section-head h4 {
  font-size: 16px;
}

.payment-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.payment-record.is-cancelled {
  opacity: 0.7;
}

.payment-record-amount {
  color: var(--brand-dark);
  white-space: nowrap;
}

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

  .app {
    margin-right: 0;
    padding-top: 82px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(86vw, 310px);
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    padding: 18px 14px 28px;
    transform: translateX(105%);
    transition: transform 0.22s ease;
    box-shadow: -18px 0 54px rgba(12, 38, 31, 0.25);
  }

  body.sidebar-collapsed .sidebar {
    width: min(86vw, 310px);
    padding: 18px 14px 28px;
  }

  body.sidebar-collapsed .app {
    margin-right: 0;
  }

  .sidebar-collapse-button {
    display: none;
  }

  body.sidebar-collapsed .sidebar-brand {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
  }

  body.sidebar-collapsed .sidebar .brand-copy,
  body.sidebar-collapsed .nav-group-label,
  body.sidebar-collapsed .nav-group-chevron,
  body.sidebar-collapsed .nav-item-label {
    display: block;
  }

  body.sidebar-collapsed .nav-group-toggle,
  body.sidebar-collapsed .nav-item {
    display: grid;
    justify-content: stretch;
    padding: 6px 8px;
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .mobile-menu-button {
    display: grid;
    place-items: center;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 70;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-strong);
  }

  body.locked .mobile-menu-button,
  body.storage-blocked .mobile-menu-button {
    display: none;
  }

  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(9, 25, 21, 0.42);
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  body.mobile-nav-open .mobile-menu-button {
    background: #fff;
    color: var(--brand-dark);
  }

  .brand {
    margin: 50px 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .metrics,
  .report-metrics,
  .report-filters,
  .compact-report,
  .grid.two,
  .grid.three,
  .dashboard-quickstart,
  .audit-meta,
  .audit-change-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .customer-account-head,
  .installment-account-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .debt-workspace {
    grid-template-columns: 1fr;
  }

  .debt-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-account-actions,
  .installment-account-head .finance-record-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .finance-action-grid,
  .finance-list-grid {
    grid-template-columns: 1fr;
  }

  .debt-overview {
    grid-template-columns: 1fr;
  }

  .debt-side-column {
    grid-template-columns: 1fr;
  }

  .finance-action-panel {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  body {
    display: block;
    min-width: 0;
  }

  .mobile-menu-button {
    display: grid;
    place-items: center;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 70;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-strong);
  }

  body.locked .mobile-menu-button,
  body.storage-blocked .mobile-menu-button {
    display: none;
  }

  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(9, 25, 21, 0.42);
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  body.mobile-nav-open .mobile-menu-button {
    background: #ffffff;
    color: var(--brand-dark);
    border-color: rgba(255, 255, 255, 0.9);
  }

  .app {
    padding: 70px 10px 18px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(86vw, 310px);
    min-height: 100vh;
    max-height: 100vh;
    padding: 18px 14px 28px;
    transform: translateX(105%);
    transition: transform 0.22s ease;
    border-radius: 0;
    box-shadow: -18px 0 54px rgba(12, 38, 31, 0.25);
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .brand {
    margin: 50px 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .brand small {
    display: block;
  }

  .nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
    padding-bottom: 20px;
  }

  .nav-group {
    min-width: 0;
    gap: 4px;
    padding: 8px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-group > span {
    padding: 0 10px 4px;
    font-size: 11px;
    color: rgba(244, 209, 139, 0.9);
  }

  .nav-subtitle {
    margin: 6px 10px 2px;
    font-size: 10px;
  }

  .nav-item {
    min-height: 42px;
    padding: 10px 12px;
    white-space: normal;
    width: 100%;
    text-align: right;
    line-height: 1.35;
  }

  .topbar,
  .panel-head,
  .card-line,
  .ledger-row,
  .report-row {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar {
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .page-heading {
    min-width: 0;
  }

  .page-heading h1 {
    font-size: 22px;
  }

  .page-heading p {
    display: none;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .inline-actions,
  .actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .inline-actions > *,
  .actions > * {
    flex: 1 1 100%;
  }

  .top-actions > * {
    min-width: 0;
    width: 100%;
  }

  .top-actions .connection,
  .top-actions .compact {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .top-actions .compact,
  .top-actions .page-action {
    grid-column: 1 / -1;
  }

  .top-actions select {
    min-height: 38px;
  }

  .panel {
    padding: 12px;
    border-radius: 8px;
  }

  button {
    width: 100%;
  }

  .metric strong {
    font-size: 20px;
  }

  .fields,
  .invoice-controls,
  .installment-box,
  .invoice-summary,
  .permissions-grid,
  .report-filters,
  .filters-bar,
  .filters-bar.inventory-list-filters,
  .compact-report,
  .grid,
  .grid.two,
  .grid.three,
  .grid.one {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .compact-metrics,
  .modon-live-metrics,
  .modon-account-kpis,
  .modon-status-grid,
  .reconciliation-strip {
    grid-template-columns: 1fr;
  }

  .modon-work-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .modon-work-actions {
    grid-template-columns: 1fr;
  }

  .modon-account-head {
    flex-direction: column;
  }

  .modon-account-total {
    width: 100%;
  }

  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination-actions {
    justify-content: space-between;
  }

  .dashboard-quickstart {
    padding: 18px;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .quick-card span {
    font-size: 24px;
  }

  .form .table-wrap table {
    min-width: 640px;
  }

  .return-scanner {
    min-height: 320px;
  }

  .return-scanner video {
    min-height: 320px;
  }

  .scanner-frame {
    inset: 20% 10%;
  }

  .return-preview-head {
    flex-direction: column;
    align-items: stretch;
  }

  .return-preview-grid {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    border: 1px solid var(--line);
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .purchase-lines .table-wrap {
    overflow: auto;
    max-width: 100%;
  }

  table {
    min-width: 680px;
  }

  th,
  td {
    padding: 10px 8px;
  }

  .modal-layer {
    padding: 10px;
    align-items: stretch;
  }

  .modal-card {
    width: 100%;
    max-height: calc(100vh - 20px);
  }

  .opening-stock-table table,
  .opening-stock-table tbody,
  .opening-stock-table tr,
  .opening-stock-table td {
    display: block;
    width: 100%;
  }

  .opening-stock-table thead {
    display: none;
  }

  .opening-stock-table tr {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
  }

  .opening-stock-table td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
  }

  .opening-stock-table td::before {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .opening-stock-table td:nth-child(1)::before { content: "المنتج"; }
  .opening-stock-table td:nth-child(2)::before { content: "التصنيف"; }
  .opening-stock-table td:nth-child(3)::before { content: "الكمية"; }
  .opening-stock-table td:nth-child(4)::before { content: "كلفة الوحدة"; }
  .opening-stock-table td:nth-child(5)::before { content: "سعر المفرد"; }
  .opening-stock-table td:nth-child(6)::before { content: "سعر الجملة"; }
  .opening-stock-table td:nth-child(7)::before { content: "الإجمالي"; }
  .opening-stock-table td:nth-child(8)::before { content: "إجراء"; }

  .opening-stock-table .purchase-product-cell,
  .opening-stock-table .line-product-suggestions {
    min-width: 0;
  }

  .opening-stock-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-action-grid,
  .finance-list-grid {
    gap: 12px;
  }

  .debt-overview {
    gap: 18px;
    margin-bottom: 12px;
    padding: 18px;
    border-radius: 13px;
  }

  .debt-overview-copy h2 {
    font-size: 20px;
  }

  .debt-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-overview-count {
    grid-column: 1 / -1;
  }

  .debt-side-column {
    order: -1;
    gap: 12px;
  }

  .debt-action-head {
    flex-direction: column;
    padding: 16px 16px 12px;
  }

  .debt-action-head .hint {
    max-width: none;
  }

  .debt-action-tabs {
    margin: 0 16px;
  }

  .debt-action-form {
    padding: 16px;
  }

  .debt-customer-panel {
    min-height: 0;
  }

  .debt-customer-panel .empty {
    min-height: 160px;
  }

  .finance-list-grid {
    margin-top: 12px;
  }

  .finance-action-panel {
    padding: 16px;
  }

  .finance-panel-head,
  .finance-list-head,
  .customer-directory-head,
  .customer-section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .finance-panel-head {
    min-height: 0;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .finance-panel-head > .hint,
  .finance-list-head > .hint {
    max-width: none;
  }

  .finance-action-panel .actions {
    margin-top: 14px;
  }

  .finance-record {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .finance-record-amount {
    width: 100%;
    text-align: right;
  }

  .finance-record-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .finance-record-actions.single-action {
    grid-template-columns: 1fr;
  }

  .finance-record-actions button {
    min-width: 0;
  }

  .finance-record-meta {
    display: grid;
    gap: 3px;
  }

  .finance-record-meta span + span::before {
    display: none;
  }

  .installment-account-head,
  .customer-account-head {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .installment-totals,
  .customer-balance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .installment-account-head .finance-record-actions,
  .customer-account-actions {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .customer-search-field {
    width: 100%;
  }

  .customer-identity {
    align-items: flex-start;
  }

  .customer-account-section {
    padding: 14px;
  }

  .finance-table-wrap {
    overflow: visible;
    border: 0;
  }

  .finance-table,
  .finance-table tbody,
  .finance-table tr,
  .finance-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .finance-table thead {
    display: none;
  }

  .finance-table tbody {
    display: grid;
    gap: 10px;
  }

  .finance-table tr {
    overflow: hidden;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .finance-table td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #edf1ee;
    text-align: right;
  }

  .finance-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .finance-table td:last-child {
    border-bottom: 0;
  }

  .finance-table td[colspan] {
    display: block;
    text-align: center;
  }

  .finance-table td[colspan]::before {
    display: none;
  }

  .table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-record {
    grid-template-columns: 1fr auto;
  }

  .payment-record button {
    grid-column: 1 / -1;
  }
}

.customer-accounts-overview {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.35fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: 24px 28px;
  overflow: hidden;
  border: 1px solid rgba(15, 91, 72, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 20%, rgba(224, 183, 94, 0.2), transparent 30%),
    linear-gradient(135deg, #103f35 0%, #0d5948 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(18, 60, 50, 0.14);
}

.customer-overview-copy h2 {
  margin: 6px 0 8px;
  font-size: clamp(22px, 2vw, 30px);
}

.customer-overview-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
}

.customer-accounts-overview .finance-kicker {
  color: #f1cf82;
}

.customer-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.customer-overview-metrics > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.customer-overview-metrics span,
.customer-overview-metrics strong {
  display: block;
}

.customer-overview-metrics span {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.customer-overview-metrics strong {
  overflow: hidden;
  color: #fff;
  font-size: clamp(18px, 1.6vw, 24px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-accounts-workspace {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.customer-list-panel {
  position: sticky;
  top: 16px;
  padding: 16px;
}

.customer-list-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.customer-list-head h2 {
  margin: 3px 0 0;
}

.customer-list-head .hint {
  max-width: 120px;
  text-align: left;
}

.customer-search-field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-directory-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid #dce7e2;
  border-radius: 12px;
  background: #f5f8f7;
}

.customer-directory-filters button {
  display: flex;
  min-width: 0;
  min-height: 38px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 7px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #536a63;
  font-size: 11px;
  font-weight: 800;
  box-shadow: none;
}

.customer-directory-filters button:hover {
  border-color: #cfe0da;
  background: #fff;
  color: #0d5a48;
  transform: none;
}

.customer-directory-filters button.active {
  border-color: #0f755b;
  background: #0f755b;
  color: #fff;
  box-shadow: 0 7px 16px rgba(15, 117, 91, 0.16);
}

.customer-directory-filters button strong {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(15, 117, 91, 0.1);
  color: #0f755b;
  font-size: 10px;
}

.customer-directory-filters button.active strong {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.customer-directory-list {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 430px);
  overflow-y: auto;
  padding-left: 4px;
}

.customer-directory-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: right;
  box-shadow: none;
}

.customer-directory-item:hover {
  border-color: #dce9e4;
  background: #f5f9f7;
  transform: none;
}

.customer-directory-item.active {
  border-color: rgba(15, 117, 91, 0.25);
  background: #eaf5f1;
  box-shadow: inset -3px 0 #0f755b;
}

.customer-directory-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #e7efeb;
  color: #0d5a48;
  font-size: 16px;
  font-weight: 800;
}

.customer-directory-item.active .customer-directory-avatar {
  background: #0f755b;
  color: #fff;
}

.customer-directory-copy {
  min-width: 0;
}

.customer-directory-copy strong,
.customer-directory-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-directory-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.customer-directory-balance {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: #4f6d64;
  font-weight: 800;
  white-space: nowrap;
}

.customer-directory-balance small {
  padding: 3px 6px;
  border-radius: 999px;
  background: #edf2f0;
  color: #586e67;
  font-size: 9px;
}

.customer-directory-balance strong {
  font-size: 10px;
}

.customer-directory-balance.debt,
.customer-directory-balance.installment {
  color: #a65d16;
}

.customer-directory-balance.debt small,
.customer-directory-balance.installment small {
  background: #fff4e7;
  color: #955312;
}

.customer-directory-balance.overdue {
  color: #ad3d38;
}

.customer-directory-balance.overdue small {
  background: #fff0ef;
  color: #a33631;
}

.customer-directory-balance.settled {
  color: #0f755b;
}

.customer-directory-balance.settled small {
  background: #e8f5f0;
  color: #0f755b;
}

.customer-directory-empty,
.customer-detail-empty {
  display: grid;
  min-height: 170px;
  place-content: center;
  gap: 7px;
  padding: 20px;
  border: 1px dashed #d7e2dd;
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.customer-directory-empty strong,
.customer-directory-empty span {
  display: block;
}

.customer-directory-empty strong {
  margin-bottom: 5px;
  color: var(--ink);
}

.customer-detail-empty strong {
  color: var(--ink);
  font-size: 17px;
}

.customer-account-detail {
  min-width: 0;
}

.customer-account-detail .customer-account-card {
  margin: 0;
}

.customer-account-detail .customer-account-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.customer-account-detail .customer-balance-grid {
  grid-template-columns: repeat(3, minmax(105px, 1fr));
}

.customer-account-detail .customer-account-actions {
  display: flex;
  grid-column: 1 / -1;
  width: 100%;
  justify-content: flex-start;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.customer-balance-grid .overdue-balance {
  border-color: rgba(178, 66, 48, 0.25);
  background: #fff4f1;
}

.customer-balance-grid .overdue-balance span,
.customer-balance-grid .overdue-balance strong {
  color: #a43c2d;
}

.whatsapp-action {
  border-color: rgba(28, 150, 79, 0.28);
  color: #14713b;
}

.customer-ledger-section {
  background: #fbfcfb;
}

.customer-ledger-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(125px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 15px 0;
  padding: 12px;
  border: 1px solid #e1e8e4;
  border-radius: 10px;
  background: #fff;
}

.customer-ledger-filters label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.customer-ledger-table td:last-child strong {
  color: #0f755b;
}

.overdue-installment-row td {
  background: #fff8f6;
}

.overdue-installment-row td:first-child {
  box-shadow: inset -3px 0 #bd4a38;
}

.installment-row-action {
  display: flex;
  gap: 7px;
  align-items: center;
}

.customer-statement-overdue h2 {
  color: #9e382b;
}

.sales-invoice-hero {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border: 1px solid rgba(15, 117, 91, 0.14);
  border-radius: 14px;
  background: radial-gradient(circle at 12% 10%, rgba(229, 191, 105, 0.16), transparent 34%), linear-gradient(135deg, #fff, #f5faf7);
  box-shadow: 0 12px 34px rgba(24, 70, 58, 0.08);
}

.sales-invoice-hero h2 {
  margin: 4px 0 6px;
  font-size: 25px;
}

.sales-invoice-hero p {
  margin: 0;
  color: var(--muted);
}

.sales-invoice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border: 1px solid rgba(15, 117, 91, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(24, 70, 58, 0.06);
}

.sales-invoice-toolbar h2 {
  margin: 3px 0 0;
  font-size: 21px;
}

.sales-page .eyebrow {
  color: #0b6f59;
}

.sales-page .sales-section-head .eyebrow {
  padding: 4px 8px;
  border-radius: 5px;
  background: #e6f3ee;
  color: #075744;
  font-weight: 800;
}

.sales-flow-steps {
  display: flex;
  gap: 8px;
}

.sales-flow-steps span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid #dce8e3;
  border-radius: 20px;
  background: #fff;
  color: #51675f;
  font-size: 12px;
  font-weight: 700;
}

.sales-flow-steps b,
.sales-step-number {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0f755b;
  color: #fff;
  font-size: 11px;
}

.sales-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.sales-builder-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sales-section-head {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.sales-section-head > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sales-section-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.sales-section-head .hint {
  max-width: 260px;
  text-align: left;
}

.sales-customer-fields {
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 1fr) minmax(180px, 1fr);
}

.sale-customer-combo {
  z-index: 12;
}

.sale-customer-suggestions {
  top: calc(100% + 7px);
  max-height: 320px;
  padding: 7px;
  border-color: #cfded8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(20, 55, 46, 0.18);
}

.sale-customer-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
}

.sale-customer-suggestion:hover,
.sale-customer-suggestion:focus-visible {
  border-color: #cfe2db;
  background: #f1f8f5;
  color: var(--ink);
  transform: none;
}

.sale-customer-suggestion-copy {
  min-width: 0;
}

.sale-customer-suggestion-copy strong,
.sale-customer-suggestion-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-customer-suggestion-copy strong {
  margin-bottom: 4px;
  color: #173d34;
  font-size: 13px;
}

.sale-customer-suggestion-copy small {
  color: var(--muted);
  font-size: 10px;
}

.sale-customer-suggestion-status {
  display: grid;
  min-width: 78px;
  justify-items: end;
  gap: 4px;
  color: #0f755b;
}

.sale-customer-suggestion-status small {
  padding: 3px 7px;
  border-radius: 999px;
  background: #e9f5f1;
  font-size: 9px;
  font-weight: 800;
}

.sale-customer-suggestion-status strong {
  font-size: 10px;
}

.sale-customer-suggestion-status.debt,
.sale-customer-suggestion-status.installment {
  color: #955312;
}

.sale-customer-suggestion-status.debt small,
.sale-customer-suggestion-status.installment small {
  background: #fff4e7;
}

.sale-customer-suggestion-status.overdue {
  color: #a33631;
}

.sale-customer-suggestion-status.overdue small {
  background: #fff0ef;
}

.sale-customer-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 0;
  border-radius: 9px;
  background: #f7faf9;
  color: var(--muted);
  text-align: center;
}

.sale-customer-empty strong {
  color: var(--ink);
}

.sale-price-mode-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 11px;
  border: 1px solid #d8e4df;
  border-radius: 10px;
  background: #f8fbfa;
}

.sale-price-mode-control legend {
  padding: 0 6px;
  color: #496158;
  font-size: 11px;
  font-weight: 800;
}

.sale-price-mode-control label {
  position: relative;
  display: block;
  cursor: pointer;
}

.sale-price-mode-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sale-price-mode-control label > span {
  display: block;
  min-height: 62px;
  padding: 11px 13px;
  border: 1px solid #d5e1dc;
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sale-price-mode-control label > span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 7px;
  border: 2px solid #a9bbb4;
  border-radius: 50%;
  vertical-align: -1px;
}

.sale-price-mode-control strong,
.sale-price-mode-control small {
  display: block;
}

.sale-price-mode-control strong {
  display: inline;
  color: #29483f;
  font-size: 13px;
}

.sale-price-mode-control small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.sale-price-mode-control input:checked + span {
  border-color: var(--brand);
  background: #edf7f3;
  box-shadow: inset 0 0 0 1px rgba(16, 107, 85, 0.08);
}

.sale-price-mode-control input:checked + span::before {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 2px #fff;
}

.sale-line-price-kind {
  display: block;
  margin-top: 3px;
  color: #487066;
  font-size: 10px;
  font-weight: 700;
}

.sales-product-picker {
  position: relative;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 117, 91, 0.2);
  border-radius: 10px;
  background: #f4faf7;
}

.sales-product-picker input {
  border-color: rgba(15, 117, 91, 0.28);
  background: #fff;
}

.sales-lines-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.sales-lines-table table {
  min-width: 780px;
}

.sales-lines-empty {
  display: grid;
  min-height: 116px;
  place-content: center;
  gap: 5px;
  margin-bottom: 12px;
  padding: 18px;
  border: 1px dashed #cfdcd6;
  border-radius: 10px;
  background: #fafcfb;
  color: var(--muted);
  text-align: center;
}

.sales-lines-empty strong {
  color: var(--ink);
}

.sale-checkout-panel {
  position: static;
  padding: 17px;
}

.checkout-head {
  margin-bottom: 12px;
}

.sale-mode-preview {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid #cfe1da;
  border-radius: 10px;
  background: #edf7f3;
}

.sale-mode-preview span {
  color: #4c6b61;
  font-size: 11px;
  font-weight: 800;
}

.sale-mode-preview strong {
  color: #0f604c;
  font-size: 16px;
}

.sale-mode-preview.debt {
  border-color: rgba(186, 126, 36, 0.28);
  background: #fff8e8;
}

.sale-mode-preview.debt strong {
  color: #9b6113;
}

.sale-mode-preview.installment {
  border-color: rgba(69, 94, 160, 0.24);
  background: #f2f5ff;
}

.sale-mode-preview.installment strong {
  color: #405caa;
}

.sale-payment-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
}

.installment-toggle {
  justify-content: flex-start;
  min-height: 58px;
}

.installment-toggle span,
.installment-toggle strong,
.installment-toggle small {
  display: block;
}

.installment-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.sale-checkout-panel .installment-box.active {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-color: rgba(66, 88, 164, 0.38);
  background: #eef2ff;
}

.sale-checkout-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border: 0;
  background: transparent;
}

.sale-checkout-summary div {
  padding: 9px 11px;
}

.sale-checkout-summary div:nth-child(3),
.sale-checkout-summary div:nth-child(5) {
  border-color: rgba(15, 117, 91, 0.25);
  background: #f1f8f5;
}

.sale-checkout-summary div:nth-child(5) strong {
  color: #b13f31;
  font-size: 18px;
}

.sale-checkout-panel .installment-preview {
  max-height: 270px;
  overflow: auto;
  padding: 10px;
}

.installment-preview:empty {
  display: none;
}

.installment-schedule-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(49, 73, 157, 0.32);
  background: #f2f5ff;
  box-shadow: 0 10px 28px rgba(55, 76, 145, 0.08);
}

.installment-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.installment-schedule-head h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.installment-schedule-head > strong {
  padding: 6px 10px;
  border-radius: 6px;
  background: #4059ad;
  color: #fff;
  font-size: 13px;
}

.installment-schedule-panel .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #dde2f0;
  border-radius: 9px;
  background: #fff;
}

.installment-schedule-panel table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.sale-save-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sale-save-actions .text-button {
  grid-column: 1 / -1;
}

.invoice-archive-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.invoice-center-header {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #103f35, #0b5b49);
  color: #fff;
  box-shadow: 0 18px 42px rgba(13, 58, 45, 0.16);
}

.invoice-center-header h2 {
  margin: 7px 0 5px;
  font-size: 27px;
}

.invoice-center-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.invoice-center-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}

.invoice-center-counts > div {
  min-width: 125px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}

.invoice-center-counts span,
.invoice-center-counts strong {
  display: block;
}

.invoice-center-counts span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}

.invoice-center-counts strong {
  margin-top: 4px;
  font-size: 20px;
}

.invoice-center-tabs {
  margin: 14px 0;
  padding: 5px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
}

.invoice-center-tabs .tab-button {
  min-width: 150px;
  border-color: transparent;
  background: transparent;
}

.invoice-center-tabs .tab-button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 18px rgba(15, 117, 91, 0.18);
}

.invoice-archive-tab {
  display: none;
}

.invoice-archive-tab.active {
  display: block;
}

.invoice-unified-panel {
  margin-top: 0;
}

.unified-invoice-filters {
  grid-template-columns: minmax(260px, 1.7fr) repeat(2, minmax(150px, 0.65fr));
}

.unified-invoice-table {
  min-width: 980px;
}

.invoice-kind-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf5f1;
  color: #0d6b55;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.invoice-kind-badge.supplier {
  background: #edf1f7;
  color: #355272;
}

.invoice-archive-overview > div {
  padding: 15px 16px;
  border: 1px solid #dce6e1;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 60, 51, 0.06);
}

.invoice-archive-overview span,
.invoice-archive-overview strong,
.invoice-archive-overview small {
  display: block;
}

.invoice-archive-overview span,
.invoice-archive-overview small {
  color: var(--muted);
  font-size: 11px;
}

.invoice-archive-overview strong {
  margin: 7px 0 4px;
  color: var(--brand-dark);
  font-size: 21px;
}

.invoice-archive-overview .has-open-balance {
  border-color: rgba(183, 116, 31, 0.25);
  background: #fffaf0;
}

.invoice-archive-overview .has-open-balance strong {
  color: #a35e14;
}

.invoice-archive-panel {
  margin-top: 14px;
}

.invoice-archive-filters {
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(140px, 0.6fr));
}

.invoice-archive-table {
  min-width: 1120px;
}

.invoice-archive-table td {
  vertical-align: middle;
}

.table-secondary {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.sale-mode-badge {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 16px;
  background: #edf4f1;
  color: #396055;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.sale-mode-badge.customerDebt {
  background: #fff3dc;
  color: #976019;
}

.sale-mode-badge.installment {
  background: #eef2ff;
  color: #4b5fa2;
}

.sale-mode-badge.modon {
  background: #f2ecff;
  color: #6748a0;
}

.open-balance-cell {
  color: #a35e14;
  font-weight: 800;
}

.selected-invoice-row td {
  background: #f0f8f5;
}

.selected-invoice-row td:first-child {
  box-shadow: inset -3px 0 #0f755b;
}

.invoice-detail-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 17px;
  border-radius: 10px;
  background: linear-gradient(135deg, #103f35, #0d5a48);
  color: #fff;
}

.invoice-detail-header .eyebrow {
  border-color: rgba(207, 234, 249, 0.34);
  background: rgba(207, 234, 249, 0.12);
  color: #d7effc;
}

.invoice-detail-header h3 {
  margin: 5px 0;
  font-size: 23px;
}

.invoice-detail-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.invoice-detail-status {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.invoice-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.invoice-detail-metrics > div {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fafcfb;
}

.invoice-detail-metrics span,
.invoice-detail-metrics strong,
.invoice-detail-metrics small {
  display: block;
}

.invoice-detail-metrics span,
.invoice-detail-metrics small {
  color: var(--muted);
  font-size: 11px;
}

.invoice-detail-metrics strong {
  margin: 6px 0 3px;
  font-size: 19px;
}

.invoice-detail-metrics .outstanding {
  border-color: rgba(183, 116, 31, 0.25);
  background: #fff8e8;
}

.invoice-detail-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.invoice-detail-info span,
.invoice-detail-info strong {
  display: block;
}

.invoice-detail-info span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.invoice-detail-actions {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 1300px) and (min-width: 621px) {
  .invoice-archive-table {
    min-width: 820px;
  }

  .invoice-archive-table th:nth-child(2),
  .invoice-archive-table td:nth-child(2),
  .invoice-archive-table th:nth-child(3),
  .invoice-archive-table td:nth-child(3) {
    display: none;
  }

  .invoice-archive-table .row-actions {
    flex-wrap: wrap;
    min-width: 180px;
    white-space: normal;
  }

  .unified-invoice-table th:nth-child(2),
  .unified-invoice-table td:nth-child(2),
  .unified-invoice-table th:nth-child(3),
  .unified-invoice-table td:nth-child(3) {
    display: table-cell;
  }

  .unified-invoice-table {
    min-width: 980px;
  }
}

.purchase-workspace {
  display: grid;
  gap: 16px;
}

.purchase-invoice-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid rgba(15, 117, 91, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(24, 70, 58, 0.06);
}

.purchase-invoice-toolbar h2 {
  margin: 3px 0 0;
  font-size: 21px;
}

.purchase-page .eyebrow,
#suppliers .eyebrow {
  color: #0b6f59;
}

.purchase-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.purchase-section-head > div {
  display: flex;
  gap: 9px;
  align-items: center;
}

.purchase-section-head .eyebrow {
  padding: 4px 8px;
  border-radius: 5px;
  background: #e6f3ee;
  color: #075744;
  font-weight: 800;
}

.purchase-section-head h3 {
  margin: 0;
  font-size: 18px;
}

.purchase-header-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.purchase-product-picker {
  position: relative;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 117, 91, 0.2);
  border-radius: 10px;
  background: #f4faf7;
}

.purchase-product-picker input {
  border-color: rgba(15, 117, 91, 0.28);
  background: #fff;
}

.purchase-lines-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.purchase-lines-table table {
  min-width: 980px;
}

.purchase-lines-empty {
  margin-top: 10px;
  border: 1px dashed #cfddd7;
  background: #fafcfb;
}

.purchase-line-actions {
  display: flex;
  justify-content: flex-start;
}

.purchase-settlement-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.purchase-settlement-panel .purchase-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.purchase-settlement-panel .purchase-summary div:nth-child(5) {
  border-color: rgba(177, 63, 49, 0.28);
  background: #fff3f1;
}

.purchase-settlement-panel .purchase-summary div:nth-child(5) strong {
  color: #b13f31;
}

.purchase-save-actions {
  display: flex;
  justify-content: flex-start;
}

.purchase-save-actions .primary {
  min-width: 210px;
}

.purchase-archive-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.purchase-archive-overview > div {
  padding: 15px 16px;
  border: 1px solid #dce6e1;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 60, 51, 0.06);
}

.purchase-archive-overview span,
.purchase-archive-overview strong,
.purchase-archive-overview small {
  display: block;
}

.purchase-archive-overview span,
.purchase-archive-overview small {
  color: var(--muted);
  font-size: 11px;
}

.purchase-archive-overview strong {
  margin: 7px 0 4px;
  color: var(--brand-dark);
  font-size: 20px;
}

.purchase-archive-overview .has-balance {
  border-color: rgba(177, 63, 49, 0.24);
  background: #fff6f4;
}

.purchase-archive-overview .has-balance strong {
  color: #b13f31;
}

.purchase-archive-panel {
  margin-top: 14px;
}

.purchase-archive-filters {
  grid-template-columns: minmax(260px, 1.7fr) repeat(2, minmax(150px, 0.65fr));
}

#purchaseInvoiceList {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.purchase-invoice-card {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto auto auto;
  gap: 12px 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.purchase-invoice-card.selected {
  border-color: rgba(15, 117, 91, 0.35);
  background: #f2f9f6;
  box-shadow: inset -3px 0 #0f755b;
}

.purchase-invoice-main > strong {
  display: block;
  margin: 4px 0;
  font-size: 17px;
}

.purchase-invoice-amount {
  min-width: 125px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #f6f8f7;
}

.purchase-invoice-amount span,
.purchase-invoice-amount strong {
  display: block;
}

.purchase-invoice-amount span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.purchase-invoice-amount.outstanding {
  background: #fff2ef;
}

.purchase-invoice-amount.outstanding strong {
  color: #b13f31;
}

.purchase-invoice-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 7px;
  justify-content: flex-start;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.purchase-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px;
  border-radius: 10px;
  background: linear-gradient(135deg, #103f35, #0d5a48);
  color: #fff;
}

.purchase-detail-header .eyebrow {
  color: #bfe9dc;
}

.purchase-detail-header h3 {
  margin: 5px 0;
  font-size: 22px;
}

.purchase-detail-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.purchase-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.purchase-detail-metrics > div {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fafcfb;
}

.purchase-detail-metrics span,
.purchase-detail-metrics strong,
.purchase-detail-metrics small {
  display: block;
}

.purchase-detail-metrics span,
.purchase-detail-metrics small {
  color: var(--muted);
  font-size: 11px;
}

.purchase-detail-metrics strong {
  margin: 5px 0 3px;
  font-size: 19px;
}

.purchase-detail-metrics .outstanding {
  border-color: rgba(177, 63, 49, 0.24);
  background: #fff3f1;
}

.supplier-overview {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(520px, 1.4fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #103f35, #0d5a48);
  color: #fff;
  box-shadow: 0 14px 36px rgba(16, 63, 52, 0.14);
}

.supplier-overview .eyebrow {
  color: #bfe9dc;
}

.supplier-overview-copy h2 {
  margin: 5px 0;
  font-size: 25px;
}

.supplier-overview-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.supplier-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.supplier-overview-metrics > div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}

.supplier-overview-metrics span,
.supplier-overview-metrics strong {
  display: block;
}

.supplier-overview-metrics span {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
}

.supplier-overview-metrics strong {
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-overview-metrics .selected-payable {
  border-color: rgba(255, 202, 192, 0.32);
  background: rgba(154, 45, 32, 0.2);
}

.supplier-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.supplier-account-card {
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.supplier-account-card.selected {
  border-color: rgba(15, 117, 91, 0.34);
  background: #f2f9f6;
}

.supplier-account-card header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.supplier-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: #0f755b;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.supplier-account-card header strong,
.supplier-account-card header small {
  display: block;
}

.supplier-account-card header small {
  margin-top: 3px;
  color: var(--muted);
}

.supplier-card-balances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.supplier-card-balances > div {
  padding: 9px;
  border-radius: 7px;
  background: #f5f8f7;
}

.supplier-card-balances span,
.supplier-card-balances strong {
  display: block;
}

.supplier-card-balances span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.supplier-card-meta {
  display: flex;
  gap: 7px 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
}

.supplier-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.supplier-delete-locked {
  cursor: not-allowed;
  opacity: 0.68;
}

.supplier-ledger-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.supplier-ledger-header h2 {
  margin: 4px 0;
}

.supplier-ledger-header p {
  margin: 0;
  color: var(--muted);
}

.supplier-ledger-balances {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
}

.supplier-ledger-side {
  display: grid;
  gap: 9px;
}

.supplier-ledger-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-start;
}

.supplier-ledger-balances > div {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9f8;
}

.supplier-ledger-balances span,
.supplier-ledger-balances strong {
  display: block;
}

.supplier-ledger-balances span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}

.supplier-ledger-table {
  min-width: 800px;
}

.supplier-ledger-table tr.is-cancelled {
  opacity: 0.65;
}

.supplier-linked-inventory {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.supplier-linked-inventory-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
}

.supplier-linked-inventory-head h3 {
  margin: 4px 0 0;
  font-size: 19px;
}

.supplier-linked-inventory-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.supplier-linked-inventory-stats span {
  padding: 8px 11px;
  border: 1px solid #cfe0da;
  border-radius: 9px;
  background: #f1f8f5;
  color: #43665c;
  font-size: 11px;
}

.supplier-linked-inventory-stats strong {
  color: #0f755b;
  font-size: 14px;
}

.supplier-linked-inventory-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-right: 3px solid #24658f;
  border-radius: 7px;
  background: #f1f7fb;
  color: #49636f;
  font-size: 12px;
}

.supplier-linked-grid {
  display: grid;
  gap: 12px;
}

.supplier-linked-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.supplier-linked-card summary {
  display: flex;
  min-height: 48px;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  background: #f7f9f8;
  color: #24463d;
  font-weight: 800;
  list-style: none;
}

.supplier-linked-card summary::-webkit-details-marker {
  display: none;
}

.supplier-linked-card summary strong {
  display: grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  padding: 0 7px;
  border-radius: 8px;
  background: #e3f1ec;
  color: #0f755b;
}

.supplier-linked-table-wrap {
  max-height: 390px;
  overflow: auto;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.supplier-linked-table {
  min-width: 760px;
}

.supplier-linked-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.supplier-stock-quantity {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 900;
}

.supplier-stock-quantity.in {
  background: #e6f4ef;
  color: #087b55;
}

.supplier-stock-quantity.out {
  background: #fff0ef;
  color: #ad3d38;
}

.supplier-payment-modal {
  width: min(680px, calc(100vw - 28px));
}

.supplier-payment-balance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.supplier-payment-balance > div {
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7f9f8;
}

.supplier-payment-balance span,
.supplier-payment-balance strong {
  display: block;
}

.supplier-payment-balance span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}

.supplier-payment-balance .after-movement {
  border-color: rgba(15, 117, 91, 0.24);
  background: #eaf5f1;
}

.supplier-payment-balance .after-movement strong {
  color: #0f755b;
}

.personal-cash-workspace {
  margin-top: 18px;
}

.customer-payment-modal {
  width: min(680px, calc(100vw - 28px));
}

.customer-payment-balance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 18px;
}

.customer-payment-balance > div {
  padding: 13px 14px;
  border: 1px solid #dce6e1;
  border-radius: 10px;
  background: #f8faf9;
}

.customer-payment-balance span,
.customer-payment-balance strong {
  display: block;
}

.customer-payment-balance span {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
}

.customer-payment-balance strong {
  font-size: 18px;
}

.customer-payment-balance .after-payment {
  border-color: rgba(15, 117, 91, 0.24);
  background: #eaf5f1;
}

.customer-payment-balance .after-payment strong {
  color: #0f755b;
}

@media (max-width: 980px) {
  .customer-accounts-overview {
    grid-template-columns: 1fr;
  }

  .customer-accounts-workspace {
    grid-template-columns: 1fr;
  }

  .customer-list-panel {
    position: static;
  }

  .customer-directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 280px;
  }

  .customer-ledger-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-builder-layout {
    grid-template-columns: 1fr;
  }

  .sale-checkout-panel {
    position: static;
  }

  .sale-payment-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .installment-toggle {
    grid-column: 1 / -1;
  }

  .sale-checkout-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .invoice-archive-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-header-fields,
  .purchase-settlement-panel .purchase-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-archive-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-overview {
    grid-template-columns: 1fr;
  }

  .supplier-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .customer-accounts-overview {
    padding: 20px 16px;
  }

  .customer-overview-metrics,
  .customer-payment-balance {
    grid-template-columns: 1fr;
  }

  .customer-overview-metrics > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .customer-overview-metrics span {
    margin: 0;
  }

  .customer-directory-list {
    grid-template-columns: 1fr;
    max-height: 245px;
  }

  .customer-account-detail .customer-balance-grid {
    grid-template-columns: 1fr;
  }

  .customer-account-detail .customer-account-actions,
  .customer-ledger-filters {
    grid-template-columns: 1fr;
  }

  .customer-account-detail .customer-account-actions {
    display: grid;
  }

  .customer-list-head {
    align-items: flex-start;
  }

  .sales-invoice-hero,
  .sales-section-head {
    align-items: flex-start;
  }

  .sales-invoice-hero {
    display: grid;
    padding: 17px;
  }

  .sales-flow-steps {
    width: 100%;
  }

  .sales-flow-steps span {
    flex: 1;
    justify-content: center;
    padding-inline: 6px;
  }

  .sales-section-head {
    display: grid;
  }

  .sales-section-head .hint {
    max-width: none;
    text-align: right;
  }

  .sales-customer-fields,
  .sale-payment-controls,
  .sale-checkout-summary,
  .invoice-archive-filters,
  .invoice-detail-metrics,
  .invoice-detail-info {
    grid-template-columns: 1fr;
  }

  .sale-price-mode-control {
    grid-template-columns: 1fr;
  }

  .sale-checkout-panel .installment-box.active {
    grid-template-columns: 1fr;
  }

  .invoice-archive-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-archive-overview > div {
    padding: 12px;
  }

  .invoice-archive-table-wrap {
    overflow: visible;
    border: 0;
  }

  .invoice-archive-table,
  .invoice-archive-table tbody,
  .invoice-archive-table tr,
  .invoice-archive-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .invoice-archive-table thead {
    display: none;
  }

  .invoice-archive-table tbody {
    display: grid;
    gap: 10px;
  }

  .invoice-archive-table tr {
    overflow: hidden;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
  }

  .invoice-archive-table td {
    display: grid;
    grid-template-columns: minmax(92px, 35%) 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edf1ee;
    text-align: right;
  }

  .invoice-archive-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  .invoice-archive-table td:last-child {
    border-bottom: 0;
  }

  .invoice-archive-table .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    white-space: normal;
  }

  .invoice-archive-table .row-actions button {
    min-width: 0;
  }

  .invoice-detail-header {
    display: grid;
  }

  .invoice-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-header-fields,
  .purchase-settlement-fields,
  .purchase-settlement-panel .purchase-summary,
  .purchase-archive-filters,
  .purchase-detail-metrics {
    grid-template-columns: 1fr;
  }

  .purchase-archive-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-invoice-card {
    grid-template-columns: 1fr;
  }

  .purchase-invoice-amount {
    min-width: 0;
  }

  .purchase-invoice-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-invoice-actions button {
    min-width: 0;
  }

  .supplier-overview {
    padding: 18px 15px;
  }

  .supplier-overview-metrics {
    grid-template-columns: 1fr;
  }

  .supplier-overview-metrics > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
  }

  .supplier-overview-metrics span {
    margin: 0;
  }

  .supplier-directory-grid {
    grid-template-columns: 1fr;
  }

  .supplier-ledger-header {
    display: grid;
  }

  .supplier-ledger-balances {
    grid-template-columns: 1fr;
  }

  .supplier-ledger-actions,
  .supplier-payment-balance {
    display: grid;
    grid-template-columns: 1fr;
  }

  .supplier-linked-inventory-head {
    display: grid;
    align-items: start;
  }

  .supplier-linked-inventory-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-linked-inventory-stats span {
    text-align: center;
  }

  .supplier-ledger-table-wrap {
    overflow: visible;
    border: 0;
  }

  .supplier-ledger-table,
  .supplier-ledger-table tbody,
  .supplier-ledger-table tr,
  .supplier-ledger-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .supplier-ledger-table thead {
    display: none;
  }

  .supplier-ledger-table tbody {
    display: grid;
    gap: 9px;
  }

  .supplier-ledger-table tr {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
  }

  .supplier-ledger-table td {
    display: grid;
    grid-template-columns: minmax(90px, 34%) 1fr;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1ee;
    text-align: right;
  }

  .supplier-ledger-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  .supplier-ledger-table td:last-child {
    border-bottom: 0;
  }
}

/* Modon returns V3: compact statement header and explicit replacement type. */
.carrier-return-card {
  position: relative;
  border: 1px solid #d6e2de;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(17, 60, 50, 0.055);
}

.carrier-return-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 4px;
  background: #128064;
}

.carrier-return-head {
  grid-template-columns: minmax(240px, 1fr) 145px minmax(270px, auto) !important;
  gap: 14px;
  padding: 18px 20px 13px;
  background: #fff;
}

.carrier-return-identity {
  min-width: 0;
}

.carrier-return-identity h3 {
  margin: 5px 0 4px;
  font-size: 20px;
}

.carrier-return-identity code {
  display: block;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  color: #80918c;
  font-family: inherit;
  font-size: 9px;
  text-overflow: ellipsis;
  direction: ltr;
  white-space: nowrap;
}

.carrier-return-progress {
  padding: 10px 13px;
  border: 1px solid #e0e8e5;
  border-radius: 10px;
  background: #f8fbfa;
}

.carrier-return-actions {
  align-self: stretch;
}

.carrier-return-actions button {
  min-height: 40px;
}

.carrier-return-scope {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding-top: 12px;
  border-top: 1px solid #e5ece9;
}

.carrier-return-scope > span {
  display: flex;
  min-width: 0;
  flex: 1 1 125px;
  gap: 6px;
  align-items: baseline;
  justify-content: center;
  padding: 8px 11px;
  border: 0;
  border-radius: 8px;
  background: #f4f8f6;
  font-size: 11px;
  white-space: nowrap;
}

.carrier-return-scope > span:first-child {
  flex: 1.35 1 170px;
  background: #eaf5f1;
  color: #0b6f56;
}

.carrier-return-scope strong {
  font-size: 16px;
}

.carrier-return-scope small {
  color: #71827d;
  font-size: 9px;
}

.return-operation-type {
  display: inline-flex;
  min-width: 62px;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.return-operation-type.return {
  background: #e8f4ef;
  color: #0b7458;
}

.return-operation-type.exchange {
  background: #eaf0ff;
  color: #315fbd;
}

.carrier-return-table th {
  background: #f4f7f6;
  color: #53665f;
  font-size: 11px;
}

.carrier-return-table table {
  min-width: 1180px;
}

.carrier-return-table td {
  vertical-align: middle;
}

.carrier-return-table tbody tr:hover td {
  background: #fbfdfc;
}

@media (max-width: 1000px) {
  .carrier-return-head {
    grid-template-columns: minmax(220px, 1fr) minmax(240px, auto) !important;
  }

  .carrier-return-progress {
    grid-column: 1;
  }

  .carrier-return-actions {
    grid-column: 2;
    padding-top: 0;
    border-top: 0;
  }

  .carrier-return-scope {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .carrier-return-head {
    grid-template-columns: 1fr !important;
    padding: 16px;
  }

  .carrier-return-progress,
  .carrier-return-actions,
  .carrier-return-scope {
    grid-column: 1;
  }

  .carrier-return-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carrier-return-scope > span,
  .carrier-return-scope > span:first-child {
    min-width: 0;
    white-space: normal;
  }

  .carrier-return-table table {
    min-width: 0;
  }
}

/* Dashboard visual refresh: presentation only, all drill-down actions stay intact. */
#dashboard .dashboard-visual-grid{display:grid;grid-template-columns:.85fr 1.25fr .9fr;gap:16px;margin-top:18px}
#dashboard .dashboard-command-header{display:none}
#dashboard .dashboard-modon-today{margin-top:18px;padding:18px;border:1px solid #dfe7e5;border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(27,61,71,.06)}
#dashboard .dashboard-modon-today .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid #edf1f2;padding-bottom:13px}
#dashboard .dashboard-modon-today .panel-head h2{margin:4px 0;font-size:19px;color:#173b3d}
#dashboard .dashboard-modon-today-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
#dashboard .dashboard-modon-total{display:grid;place-items:center;align-content:center;gap:3px;min-height:88px;border-radius:12px;background:#eaf7f3;color:#0e8068;text-align:center}
#dashboard .dashboard-modon-total strong{font-size:27px}.dashboard-modon-total span{font-size:11px}
#dashboard .dashboard-modon-account{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:right;padding:13px;border:1px solid #e0e9e7;border-radius:12px;background:#fbfdfc;color:#173b3d;transition:.18s ease}
#dashboard .dashboard-modon-account:hover{border-color:#89c9b7;transform:translateY(-2px);box-shadow:0 8px 18px rgba(25,94,80,.08)}
#dashboard .dashboard-modon-account span{display:grid;gap:5px}.dashboard-modon-account small{font-size:10px;color:#748489}.dashboard-modon-account b{min-width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e8f1ff;color:#376dcc;font-size:17px}
@media(max-width:900px){#dashboard .dashboard-modon-today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){#dashboard .dashboard-modon-today .panel-head{flex-direction:column}#dashboard .dashboard-modon-today-grid{grid-template-columns:1fr}}

/* Dashboard reference styling: visual palette and spacing only. */
body{background:#f4f6fb;color:#18253a}
.sidebar{background:linear-gradient(180deg,#102f56 0%,#0b2342 100%);box-shadow:18px 0 50px rgba(11,35,66,.2)}
.nav-item,.nav-group-toggle{color:#e8eef8}.nav-item:hover,.nav-item.active{background:rgba(58,116,213,.72);color:#fff}.nav-item.active{box-shadow:none}.nav-item.active .nav-item-icon{background:#fff;color:#245bb4}.nav-subtitle{color:#b8cae7}.nav-group:has(.nav-item.active){background:rgba(255,255,255,.045)}
.app{background:#f4f6fb}
.topbar{border-color:#e2e8f1;box-shadow:0 8px 26px rgba(22,47,82,.06)}
#dashboard .dashboard-quick-actions{border-color:#e1e7f0;box-shadow:0 12px 28px rgba(22,47,82,.06)}
#dashboard .dashboard-quick-card{border-color:#e1e7f0;box-shadow:0 7px 15px rgba(22,47,82,.035)}
#dashboard .dashboard-insights{border-color:#e1e7f0;box-shadow:0 12px 28px rgba(22,47,82,.05)}
#dashboard .dashboard-modon-today,#dashboard .dashboard-visual-panel,.dashboard-activity-panel{border-color:#e1e7f0;box-shadow:0 12px 28px rgba(22,47,82,.05)}
#dashboard{display:flex;flex-direction:column;gap:0}
#dashboard .dashboard-quick-actions{order:1}
#dashboard .dashboard-insights{order:2}
#dashboard .dashboard-visual-grid{order:3}
#dashboard .dashboard-modon-today{order:4}
#dashboard .dashboard-activity-grid{order:5}
#dashboard .dashboard-alerts{order:6}
#dashboard .dashboard-quick-actions{grid-template-columns:repeat(5,minmax(0,1fr));padding:20px;gap:16px}
#dashboard .dashboard-quick-card{min-height:154px;border-radius:18px}
#dashboard .dashboard-quick-icon{width:62px;height:62px;border-radius:17px;font-size:31px}
#dashboard .dashboard-insights{grid-template-columns:repeat(4,minmax(0,1fr));padding:18px;border-radius:18px}
@media(max-width:1200px){#dashboard .dashboard-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){#dashboard .dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#dashboard .dashboard-quick-actions{grid-template-columns:1fr}}

/* Approved dashboard redesign: a two-column desktop workspace inspired by the reference. */
@media(min-width:1201px){
  #dashboard{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
  #dashboard .dashboard-quick-actions{grid-column:1/-1;grid-row:1}
  #dashboard .dashboard-insights{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:14px;border-radius:18px}
  #dashboard .dashboard-insight-card{min-height:112px;padding:16px 16px 16px 70px;border-radius:14px}
  #dashboard .dashboard-insight-card::after{width:38px;height:38px;inset-inline-end:14px;top:14px}
  #dashboard .dashboard-insight-card strong{font-size:22px}
  #dashboard .dashboard-visual-grid{grid-column:2;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}
  #dashboard .dashboard-visual-panel{padding:16px;border-radius:16px}
  #dashboard .dashboard-modon-today{grid-column:1/-1;grid-row:3;margin:0}
  #dashboard .dashboard-activity-grid{grid-column:1/-1;grid-row:4;margin:0}
  #dashboard .dashboard-alerts{grid-column:1/-1;grid-row:5;margin:0}
}
@media(max-width:1200px){#dashboard{display:flex;flex-direction:column}#dashboard>*{width:100%}}
.topbar{min-height:76px;border-radius:16px;padding:14px 20px;background:#fff}
.sidebar{background:linear-gradient(180deg,#0d2c52 0%,#081d39 100%);width:268px}
.app{margin-right:268px;padding:20px 24px 32px}
body.sidebar-collapsed .sidebar{width:78px}body.sidebar-collapsed .app{margin-right:78px}
#dashboard .dashboard-quick-actions{background:#fff;border:1px solid #e2e8f1;border-radius:20px;padding:20px;box-shadow:0 16px 36px rgba(14,39,73,.08)}
#dashboard .dashboard-quick-card{min-height:150px;border-radius:16px;border-width:1px}
#dashboard .dashboard-quick-card strong{font-size:16px;color:#182b43}
#dashboard .dashboard-quick-card small{font-size:11px}
#dashboard .dashboard-insights{background:#fff;border:1px solid #e2e8f1;box-shadow:0 16px 36px rgba(14,39,73,.06)}
#dashboard .dashboard-insight-card{box-shadow:0 8px 20px rgba(14,39,73,.07);border-color:#e4e9f0}
#dashboard .dashboard-visual-panel,#dashboard .dashboard-modon-today,#dashboard .dashboard-activity-panel{background:#fff}
@media(max-width:1100px){.app{margin-right:0;padding:70px 10px 18px}.sidebar{width:min(86vw,310px);transform:translateX(105%)}body.sidebar-collapsed .sidebar{width:min(86vw,310px);padding:18px 14px 28px}body.sidebar-collapsed .app{margin-right:0}body.mobile-nav-open .sidebar{transform:translateX(0)}}

/* Final dashboard composition: match the approved reference layout without changing data. */
@media(min-width:1201px){
  #dashboard{
    direction:ltr;
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    grid-template-areas:
      "summary actions"
      "summary visual"
      "alerts activity"
      "modon modon";
    gap:16px;
    align-items:start;
  }
  #dashboard>section,#dashboard>div{direction:rtl;min-width:0;margin:0}
  #dashboard .dashboard-quick-actions{grid-column:2;grid-row:1}
  #dashboard .dashboard-insights{grid-column:1;grid-row:1 / span 2;grid-template-columns:1fr;gap:9px;padding:14px}
  #dashboard .dashboard-visual-grid{grid-column:2;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  #dashboard .dashboard-alerts{grid-column:1;grid-row:3;align-self:stretch}
  #dashboard .dashboard-activity-grid{grid-column:2;grid-row:3}
  #dashboard .dashboard-modon-today{grid-column:1/-1;grid-row:4}
  #dashboard .dashboard-insight-card{min-height:82px;padding:13px 15px 13px 62px;border-radius:13px;align-content:center;gap:3px}
  #dashboard .dashboard-insight-card::after{inset-inline-start:auto;inset-inline-end:13px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:11px;font-size:17px}
  #dashboard .dashboard-insight-card strong{font-size:19px;line-height:1.1}
  #dashboard .dashboard-insight-card span,#dashboard .dashboard-insight-card small{font-size:10px}
  #dashboard .dashboard-insight-card i{bottom:8px;inset-inline-end:auto;inset-inline-start:12px;font-size:11px}
  #dashboard .dashboard-quick-actions{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:16px}
  #dashboard .dashboard-quick-card{min-height:138px;padding:14px 8px;border-radius:14px}
  #dashboard .dashboard-quick-icon{width:56px;height:56px;border-radius:15px;font-size:27px}
  #dashboard .dashboard-visual-panel{min-height:242px;padding:14px}
  #dashboard .dashboard-activity-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:14px}
}
@media(max-width:1200px){
  #dashboard{direction:rtl;display:flex;flex-direction:column;gap:14px}
  #dashboard .dashboard-quick-actions{order:1}
  #dashboard .dashboard-insights{order:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  #dashboard .dashboard-visual-grid{order:3}
  #dashboard .dashboard-alerts{order:4}
  #dashboard .dashboard-activity-grid{order:5}
  #dashboard .dashboard-modon-today{order:6}
}
@media(max-width:620px){#dashboard .dashboard-insights{grid-template-columns:1fr}}
#dashboard .dashboard-quick-icon{font-size:0;font-family:Arial,sans-serif;font-weight:800}
#dashboard .dashboard-quick-icon::before{font-size:27px;line-height:1}
#dashboard .dashboard-quick-card.sale .dashboard-quick-icon::before{content:"🛒"}
#dashboard .dashboard-quick-card.return-sale .dashboard-quick-icon::before{content:"↩"}
#dashboard .dashboard-quick-card.purchase .dashboard-quick-icon::before{content:"▣"}
#dashboard .dashboard-quick-card.receipt .dashboard-quick-icon::before{content:"$"}
#dashboard .dashboard-quick-card.payment .dashboard-quick-icon::before{content:"−"}
#dashboard .dashboard-quick-card.customers .dashboard-quick-icon::before{content:"●●";font-size:15px;letter-spacing:-4px}
#dashboard .dashboard-quick-card.suppliers .dashboard-quick-icon::before{content:"◆"}
#dashboard .dashboard-quick-card.products .dashboard-quick-icon::before{content:"⬡"}
#dashboard .dashboard-quick-card.reports .dashboard-quick-icon::before{content:"↗"}
.sales-return-modal{max-width:720px}.sales-return-lines{display:grid;gap:10px;max-height:48vh;overflow:auto;margin:8px 0 14px}.sales-return-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid #dfe8e5;border-radius:12px;background:#fbfdfc}.sales-return-line.is-complete{opacity:.55}.sales-return-line strong{display:block;color:#173b3d}.sales-return-line small{display:block;color:#748489;margin-top:4px}.sales-return-line label{display:grid;gap:5px;min-width:110px;font-size:12px;color:#53666c}.sales-return-line input{width:100%;padding:9px;border:1px solid #cbdad6;border-radius:8px}.sales-return-summary{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid #e7efed;border-bottom:1px solid #e7efed;color:#53666c}.sales-return-summary strong{font-size:20px;color:#0e7964}
.sale-customer-account-summary{margin-top:14px}.sale-account-summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#f4faf8;border:1px solid #cfe7df;border-radius:12px}.sale-account-summary-head>div{display:grid;gap:4px}.sale-account-summary-head strong{color:#173b3d}.sale-account-balance{font-weight:700}.sale-account-balance.has-debt{color:#c65a40}.sale-account-balance.settled{color:#0e8068}.sale-account-summary-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.sale-account-summary-metrics span{display:grid;gap:3px;padding:9px 10px;background:#fff;border:1px solid #e4ecea;border-radius:9px}.sale-account-summary-metrics small{font-size:10px;color:#748489}.sale-account-summary-metrics b{font-size:13px;color:#173b3d}.sale-account-recent{display:grid;gap:4px;margin-top:8px;padding:10px 12px;background:#fff;border:1px solid #e4ecea;border-radius:9px;font-size:11px;color:#53666c}.sale-account-recent small{color:#0e8068;font-weight:700}.sale-account-new{display:flex;gap:8px;align-items:center;padding:10px 12px;background:#f8fafb;border:1px dashed #cbdad6;border-radius:10px;color:#748489;font-size:12px}.sale-account-new strong{color:#53666c}@media(max-width:620px){.sale-account-summary-metrics{grid-template-columns:repeat(2,1fr)}.sale-account-summary-head{align-items:flex-start;flex-direction:column}}
.sales-return-center{margin-top:18px}.return-center-search{display:grid;gap:7px;max-width:520px;color:#53666c;font-size:13px}.return-center-search input{padding:12px;border:1px solid #cbdad6;border-radius:10px}.sales-return-invoice-list{display:grid;gap:10px;margin-top:18px}.sales-return-invoice-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:15px 16px;border:1px solid #dfe8e5;border-radius:12px;background:#fff}.sales-return-invoice-card>div{display:grid;gap:5px}.sales-return-invoice-card span,.sales-return-invoice-card small{color:#748489;font-size:12px}.sales-return-invoice-card strong{color:#173b3d}
#dashboard .dashboard-visual-panel{min-width:0;background:#fff;border:1px solid #dfe7e5;border-radius:16px;padding:18px;box-shadow:0 12px 28px rgba(27,61,71,.06)}
#dashboard .dashboard-visual-panel .panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;border-bottom:1px solid #edf1f2;padding-bottom:12px}
#dashboard .dashboard-visual-panel .panel-head h2{margin:4px 0 0;font-size:18px;color:#173b3d}
#dashboard .dashboard-visual-panel .eyebrow{font-size:11px;color:#14806c;font-weight:700}
#dashboard .dashboard-bar-row{display:grid;grid-template-columns:minmax(70px,1fr) 1.5fr 32px;gap:10px;align-items:center;margin:14px 0;font-size:12px;color:#41545a}
#dashboard .dashboard-bar-row i{height:8px;background:#edf1f6;border-radius:999px;overflow:hidden}
#dashboard .dashboard-bar-row i b{display:block;height:100%;background:linear-gradient(90deg,#4f86d8,#8fb7f4);border-radius:inherit}
#dashboard .dashboard-bar-row strong{font-size:12px;color:#173b3d;text-align:left}
#dashboard .dashboard-trend-chart{height:150px;display:flex;align-items:end;gap:9px;padding:10px 4px 0;border-bottom:1px solid #edf1f2}
#dashboard .dashboard-trend-column{flex:1;display:grid;gap:7px;justify-items:center;align-items:end;height:100%;min-width:0}
#dashboard .dashboard-trend-column i{width:100%;max-width:30px;min-height:8px;background:linear-gradient(#4b86dc,#a8c8ff);border-radius:8px 8px 2px 2px;box-shadow:0 4px 10px rgba(75,134,220,.15)}
#dashboard .dashboard-trend-column small{color:#8290a4;font-size:10px;direction:ltr}
#dashboard .dashboard-trend-total{display:flex;align-items:end;justify-content:space-between;padding-top:12px}
#dashboard .dashboard-trend-total strong{font-size:20px;color:#173b3d}
#dashboard .dashboard-trend-total small{color:#748489;font-size:11px}
#dashboard .dashboard-donut{width:164px;height:164px;margin:8px auto 16px;border-radius:50%;background:conic-gradient(#376dcc var(--sales),#ef6464 0);display:grid;place-items:center;position:relative}
#dashboard .dashboard-donut::after{content:"";width:106px;height:106px;background:#fff;border-radius:50%;grid-area:1/1}
#dashboard .dashboard-donut span{grid-area:1/1;z-index:1;display:grid;text-align:center;gap:3px}
#dashboard .dashboard-donut span strong{font-size:17px;color:#173b3d}
#dashboard .dashboard-donut span small{font-size:11px;color:#748489}
#dashboard .dashboard-legend{display:grid;gap:9px;border-top:1px solid #edf1f2;padding-top:12px;font-size:12px;color:#506168}
#dashboard .dashboard-legend>span{display:flex;justify-content:space-between;align-items:center}
#dashboard .dashboard-legend>span>span{display:flex;align-items:center;gap:5px}
#dashboard .dashboard-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
#dashboard .dashboard-legend .sales-dot{background:#376dcc} #dashboard .dashboard-legend .purchase-dot{background:#ef6464}
@media(max-width:1050px){#dashboard .dashboard-visual-grid{grid-template-columns:1fr 1fr}#dashboard .dashboard-sales-mix{grid-column:span 2}}
@media(max-width:620px){#dashboard .dashboard-visual-grid{grid-template-columns:1fr}#dashboard .dashboard-sales-mix{grid-column:auto}}
#dashboard .dashboard-quick-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #e3e9f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(29, 52, 84, .06);
}

#dashboard .dashboard-quick-card {
  min-height: 140px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 16px 10px;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
  background: #f8fbff;
  color: #233247;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#dashboard .dashboard-quick-card:hover {
  transform: translateY(-3px);
  border-color: #b9cce6;
  box-shadow: 0 12px 24px rgba(40, 81, 130, .12);
}

#dashboard .dashboard-quick-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #e8f1ff;
  color: #2f69bd;
  font-size: 28px;
  line-height: 1;
}

#dashboard .dashboard-quick-card strong { font-size: 15px; }
#dashboard .dashboard-quick-card small { color: #7c899c; font-size: 11px; }
#dashboard .dashboard-quick-card.sale { background: #f0faf6; }
#dashboard .dashboard-quick-card.sale .dashboard-quick-icon { background: #d8f3e8; color: #24966f; }
#dashboard .dashboard-quick-card.return-sale { background: #fff4f5; }
#dashboard .dashboard-quick-card.return-sale .dashboard-quick-icon { background: #ffe0e3; color: #df5360; }
#dashboard .dashboard-quick-card.purchase { background: #f1f6ff; }
#dashboard .dashboard-quick-card.purchase .dashboard-quick-icon { background: #dce8ff; color: #396cc5; }
#dashboard .dashboard-quick-card.return-purchase { background: #fff8ef; }
#dashboard .dashboard-quick-card.return-purchase .dashboard-quick-icon { background: #ffe8ca; color: #ec851d; }
#dashboard .dashboard-quick-card.receipt { background: #eefaf9; }
#dashboard .dashboard-quick-card.receipt .dashboard-quick-icon { background: #d6f1ee; color: #159d96; }
#dashboard .dashboard-quick-card.payment { background: #f7f1ff; }
#dashboard .dashboard-quick-card.payment .dashboard-quick-icon { background: #e9dcff; color: #7a4ac1; }
#dashboard .dashboard-quick-card.customers { background: #f1f7ff; }
#dashboard .dashboard-quick-card.customers .dashboard-quick-icon { background: #dceaff; color: #3472c7; }
#dashboard .dashboard-quick-card.suppliers { background: #fff9eb; }
#dashboard .dashboard-quick-card.suppliers .dashboard-quick-icon { background: #ffedc0; color: #cb9018; }
#dashboard .dashboard-quick-card.products { background: #f0faf2; }
#dashboard .dashboard-quick-card.products .dashboard-quick-icon { background: #daf1df; color: #3c9a5d; }
#dashboard .dashboard-quick-card.reports { background: #f7f1ff; }
#dashboard .dashboard-quick-card.reports .dashboard-quick-icon { background: #e9dcff; color: #7650bd; }

#dashboard .dashboard-insights {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #e3e9f1;
  border-radius: 18px;
  background: #fff;
}

#dashboard .dashboard-insights .dashboard-insight-card { min-height: 126px; }

@media (max-width: 1200px) {
  #dashboard .dashboard-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  #dashboard .dashboard-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
}

@media (max-width: 480px) {
  #dashboard .dashboard-quick-actions { grid-template-columns: 1fr; }
}

#dashboard {
  padding: 8px 0 24px;
  background: #f6f8fc;
}

#dashboard .dashboard-command-header {
  min-height: 118px;
  padding: 24px 28px;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  background: #fff;
  color: #15253a;
  box-shadow: 0 12px 30px rgba(29, 52, 84, .07);
}

#dashboard .dashboard-command-header .eyebrow {
  background: #edf4ff;
  color: #386fbe;
}

#dashboard .dashboard-command-header h2 {
  margin-top: 8px;
  color: #182a41;
  font-size: clamp(24px, 2vw, 34px);
}

#dashboard .dashboard-command-header p {
  color: #738095;
}

#dashboard .dashboard-command-actions button {
  min-width: 140px;
  min-height: 48px;
  border-radius: 10px;
}

#dashboard .dashboard-insights {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

#dashboard .dashboard-insight-card {
  min-height: 154px;
  padding: 20px 20px 20px 72px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(29, 52, 84, .08);
}

#dashboard .dashboard-insight-card::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: 5px;
  border-radius: 0 16px 16px 0;
  background: #3b75c7;
}

#dashboard .dashboard-insight-card::after {
  position: absolute;
  inset-inline-start: 17px;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #edf4ff;
  color: #3b75c7;
  content: "▣";
  font-size: 22px;
  transform: translateY(-50%);
}
#dashboard .dashboard-insight-card::after{inset-inline-start:auto;inset-inline-end:17px;top:18px;transform:none;width:44px;height:44px;border-radius:14px;z-index:0}
#dashboard .dashboard-insight-card{padding:18px 22px 18px 78px;direction:rtl;text-align:right;isolation:isolate}
#dashboard .dashboard-insight-card span,#dashboard .dashboard-insight-card strong,#dashboard .dashboard-insight-card small{position:relative;z-index:1;min-width:0}
#dashboard .dashboard-insight-card strong{font-size:clamp(19px,2vw,27px);line-height:1.15;white-space:nowrap;overflow:visible;color:#172b43}
#dashboard .dashboard-insight-card span{font-weight:700}

#dashboard .dashboard-insight-card:nth-child(2)::after { content: "▤"; background: #eaf8f4; color: #0b9275; }
#dashboard .dashboard-insight-card:nth-child(3)::after { content: "♙"; background: #fff5df; color: #d3901c; }
#dashboard .dashboard-insight-card:nth-child(4)::after { content: "♟"; background: #f5edff; color: #8150bd; }
#dashboard .dashboard-insight-card:nth-child(5)::after { content: "▥"; background: #edf1ff; color: #4668c5; }
#dashboard .dashboard-insight-card:nth-child(6)::after { content: "□"; background: #edfaf2; color: #3d9a62; }
#dashboard .dashboard-insight-card:nth-child(7)::after { content: "!"; background: #fff0ee; color: #d25d55; }
#dashboard .dashboard-insight-card:nth-child(8)::after { content: "◈"; background: #f2efff; color: #7654c8; }

#dashboard .dashboard-insight-card span { color: #7b8798; font-size: 12px; }
#dashboard .dashboard-insight-card strong { color: #1b2c40; font-size: 25px; }
#dashboard .dashboard-insight-card small { color: #8d98a8; }

#dashboard .dashboard-alerts {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid #e2eaf2;
  border-radius: 14px;
  background: #fff;
}

#dashboard .dashboard-alert-card,
#dashboard .dashboard-clear-state {
  border-radius: 10px;
}

#dashboard .dashboard-activity-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 16px;
  margin-top: 18px;
}

#dashboard .dashboard-activity-panel {
  padding: 20px;
  border: 1px solid #e3e9f1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(29, 52, 84, .06);
}

#dashboard .dashboard-activity-panel .panel-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0f4;
}

#dashboard .dashboard-activity-panel h2 { color: #1b2c40; }

@media (max-width: 1050px) {
  #dashboard .dashboard-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard .dashboard-activity-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  #dashboard .dashboard-command-header { padding: 20px 16px; }
  #dashboard .dashboard-insights { grid-template-columns: 1fr; }
  #dashboard .dashboard-insight-card { min-height: 128px; }
}

@media (max-width: 1050px) {
  .invoice-center-header {
    grid-template-columns: 1fr;
  }

  .invoice-center-counts {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .invoice-center-header {
    gap: 16px;
    padding: 19px 16px;
  }

  .invoice-center-header h2 {
    font-size: 23px;
  }

  .invoice-center-counts {
    grid-template-columns: 1fr;
  }

  .invoice-center-counts > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
  }

  .invoice-center-counts strong {
    margin: 0;
  }

  .invoice-center-tabs {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .invoice-center-tabs .tab-button {
    width: 100%;
    min-width: 0;
  }

  .unified-invoice-filters {
    grid-template-columns: 1fr;
  }
}

.product-catalog-header,
.inventory-header {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(520px, 1.15fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #123e35, #0b604d);
  color: #fff;
  box-shadow: 0 18px 42px rgba(13, 58, 45, 0.16);
}

.product-catalog-header h2,
.inventory-header h2 {
  margin: 7px 0 5px;
  font-size: 27px;
}

.product-catalog-header p,
.inventory-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.product-catalog-summary,
.inventory-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(115px, 1fr));
  gap: 8px;
}

.inventory-summary {
  grid-template-columns: repeat(5, minmax(100px, 1fr));
}

.product-catalog-summary > div,
.inventory-summary > div,
.product-catalog-summary > button,
.inventory-summary > button {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: right;
}

.product-catalog-summary span,
.product-catalog-summary strong,
.product-catalog-summary small,
.inventory-summary span,
.inventory-summary strong,
.inventory-summary small {
  display: block;
}

.product-catalog-summary span,
.product-catalog-summary small,
.inventory-summary span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
}

.product-catalog-summary small,
.inventory-summary small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

.product-catalog-summary strong,
.inventory-summary strong {
  margin-top: 5px;
  color: #fff;
  font-size: 19px;
}

.product-catalog-summary .needs-attention,
.inventory-summary .attention {
  border-color: rgba(255, 204, 102, 0.38);
  background: rgba(177, 111, 24, 0.22);
}

.inventory-summary .danger {
  border-color: rgba(255, 156, 145, 0.34);
  background: rgba(164, 45, 35, 0.25);
}

.product-catalog-summary > button:hover,
.inventory-summary > button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
}

.stock-suite-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 7px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.stock-suite-nav button {
  min-height: 46px;
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
}

.stock-suite-nav button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.stock-suite-nav button.active {
  border-color: #fff;
  background: #fff;
  color: #17463a;
  box-shadow: 0 8px 20px rgba(4, 37, 28, 0.18);
}

.product-catalog-toolbar,
.inventory-command-bar {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  margin-top: 14px;
}

.product-catalog-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1.7fr) repeat(2, minmax(160px, 0.7fr));
  gap: 10px;
  flex: 1;
}

.product-catalog-actions {
  display: flex;
  gap: 8px;
  padding-bottom: 1px;
}

.product-catalog-actions button {
  min-height: 43px;
}

.product-catalog-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.72fr) minmax(520px, 1.28fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.product-directory-panel,
.product-profile-panel {
  min-width: 0;
}

.product-result-count {
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf5f2;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
}

.product-directory-grid {
  display: grid;
  gap: 9px;
}

.product-empty-state,
.product-profile-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 210px;
  padding: 28px;
  border: 1px dashed #cfded8;
  border-radius: 11px;
  background: linear-gradient(145deg, #f7fbf9, #fff);
  text-align: center;
}

.product-empty-state strong,
.product-empty-state span,
.product-profile-empty strong,
.product-profile-empty p {
  display: block;
}

.product-empty-state strong,
.product-profile-empty strong {
  color: #234a3f;
  font-size: 16px;
}

.product-empty-state span,
.product-profile-empty p {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.product-empty-state button,
.product-profile-empty button {
  min-width: 150px;
  margin-top: 5px;
}

.product-profile-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e5f3ee;
  color: var(--brand);
  font-size: 27px;
  font-weight: 300;
}

.product-edit-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 4px;
}

.product-directory-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.product-directory-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 117, 91, 0.32);
  box-shadow: 0 10px 26px rgba(13, 58, 45, 0.08);
}

.product-directory-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(15, 117, 91, 0.1);
}

.product-card-select {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: right;
}

.product-card-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f4f0;
  color: var(--brand-dark);
  font-size: 18px;
  font-weight: 900;
}

.product-card-copy {
  min-width: 0;
}

.product-card-copy strong,
.product-card-copy small {
  display: block;
}

.product-card-copy strong {
  overflow: hidden;
  color: #17362e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card-copy small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-stock-badge {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.product-stock-badge.available {
  background: #e7f5ef;
  color: #0b7658;
}

.product-stock-badge.low {
  background: #fff0d8;
  color: #9a5b12;
}

.product-stock-badge.out {
  background: #fde9e7;
  color: #a42d23;
}

.product-card-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #edf1ef;
  background: #fafcfb;
}

.product-card-prices > div {
  padding: 9px 12px;
}

.product-card-prices > div + div {
  border-inline-start: 1px solid #edf1ef;
}

.product-card-prices span,
.product-card-prices strong {
  display: block;
}

.product-card-prices span {
  color: var(--muted);
  font-size: 10px;
}

.product-card-prices strong {
  margin-top: 3px;
  font-size: 12px;
}

.product-profile-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 19px;
  border-radius: 10px;
  background: linear-gradient(135deg, #133f36, #0d5b49);
  color: #fff;
}

.product-profile-header h2 {
  margin: 7px 0 5px;
  font-size: 24px;
}

.product-profile-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.product-profile-status {
  min-width: 125px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.product-profile-status span,
.product-profile-status strong,
.product-profile-status small {
  display: block;
}

.product-profile-status span,
.product-profile-status small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
}

.product-profile-status strong {
  margin: 3px 0;
  font-size: 26px;
}

.product-profile-status.low {
  background: rgba(173, 108, 22, 0.28);
}

.product-profile-status.out {
  background: rgba(164, 45, 35, 0.32);
}

.product-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.product-profile-metrics,
.product-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-profile-metrics > div,
.product-pricing-grid > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fafcfb;
}

.product-profile-metrics span,
.product-profile-metrics strong,
.product-pricing-grid span,
.product-pricing-grid strong,
.product-pricing-grid small {
  display: block;
}

.product-profile-metrics span,
.product-pricing-grid span,
.product-pricing-grid small {
  color: var(--muted);
  font-size: 10px;
}

.product-profile-metrics strong,
.product-pricing-grid strong {
  margin-top: 5px;
  color: #17362e;
  font-size: 17px;
}

.product-pricing-grid small {
  margin-top: 4px;
}

.product-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 9px;
  color: #17362e;
  font-weight: 800;
}

.product-section-title strong {
  color: var(--muted);
  font-size: 11px;
}

.product-movements-table table {
  min-width: 650px;
}

.movement-quantity {
  display: inline-flex;
  min-width: 42px;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 7px;
  font-weight: 800;
}

.movement-quantity.in {
  background: #e8f5ef;
  color: #0b7658;
}

.movement-quantity.out {
  background: #fde9e7;
  color: #a42d23;
}

.inventory-command-bar {
  align-items: center;
  padding-block: 9px;
}

.inventory-command-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.inventory-command-actions button {
  min-height: 42px;
}

.inventory-section-tabs {
  margin: 0;
}

.inventory-section {
  display: none;
  margin-top: 14px;
}

.inventory-section.active {
  display: block;
}

.inventory-opening-action {
  width: auto;
}

.inventory-balance-panel,
.inventory-movements-panel {
  margin: 0;
}

.inventory-list-filters {
  grid-template-columns: minmax(280px, 1.6fr) minmax(170px, 0.5fr);
}

.inventory-table {
  min-width: 1100px;
}

.inventory-row td {
  vertical-align: middle;
}

.inventory-row.low td {
  background: rgba(255, 248, 231, 0.4);
}

.inventory-row.out td {
  background: rgba(253, 239, 237, 0.42);
}

.inventory-stock-state {
  display: inline-flex;
  min-width: 62px;
  flex-direction: column;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: #e8f5ef;
  color: #0b7658;
}

.inventory-stock-state strong,
.inventory-stock-state small {
  display: block;
}

.inventory-stock-state small {
  font-size: 9px;
}

.inventory-stock-state.low {
  background: #fff0d8;
  color: #9a5b12;
}

.inventory-stock-state.out {
  background: #fde9e7;
  color: #a42d23;
}

.inventory-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 220px;
}

.inventory-row-actions button {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 11px;
}

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

.inventory-movement-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(130px, auto);
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.inventory-movement-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e7f5ef;
  color: #0b7658;
  font-size: 20px;
  font-weight: 900;
}

.inventory-movement-card.out .inventory-movement-icon {
  background: #fde9e7;
  color: #a42d23;
}

.inventory-movement-copy strong,
.inventory-movement-copy span,
.inventory-movement-copy small,
.inventory-movement-value strong,
.inventory-movement-value span,
.inventory-movement-value small {
  display: block;
}

.inventory-movement-copy span {
  margin-top: 2px;
  color: #38584f;
  font-size: 12px;
}

.inventory-movement-copy small,
.inventory-movement-value span,
.inventory-movement-value small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.inventory-movement-value {
  text-align: left;
}

.inventory-movement-value strong {
  color: #0b7658;
  font-size: 18px;
}

.inventory-movement-card.out .inventory-movement-value strong {
  color: #a42d23;
}

.opening-stock-workspace {
  margin-top: 14px;
}

.opening-stock-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: 10px;
  background: #173f36;
  color: #fff;
}

.opening-stock-heading h2 {
  margin: 6px 0 0;
}

@media (max-width: 1300px) and (min-width: 621px) {
  .product-catalog-header,
  .inventory-header {
    grid-template-columns: 1fr;
  }

  .product-catalog-layout {
    grid-template-columns: minmax(300px, 0.75fr) minmax(430px, 1.25fr);
  }

  .product-catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .product-catalog-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-table th:nth-child(3),
  .inventory-table td:nth-child(3),
  .inventory-table th:nth-child(7),
  .inventory-table td:nth-child(7) {
    display: none;
  }

  .inventory-table {
    min-width: 860px;
  }
}

@media (max-width: 820px) {
  .product-catalog-toolbar,
  .inventory-command-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .product-catalog-filters,
  .product-catalog-layout {
    grid-template-columns: 1fr;
  }

  .product-catalog-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-command-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .inventory-opening-action {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .product-catalog-header,
  .inventory-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 19px 16px;
  }

  .product-catalog-header h2,
  .inventory-header h2 {
    font-size: 23px;
  }

  .product-catalog-summary,
  .inventory-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-summary > button:nth-child(3) {
    grid-column: 1 / -1;
  }

  .product-catalog-summary > div,
  .inventory-summary > div,
  .product-catalog-summary > button,
  .inventory-summary > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
  }

  .product-catalog-summary strong,
  .inventory-summary strong {
    margin: 0;
  }

  .product-catalog-summary small,
  .inventory-summary small {
    display: none;
  }

  .stock-suite-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .stock-suite-nav::-webkit-scrollbar {
    display: none;
  }

  .stock-suite-nav button {
    width: auto;
    min-width: 120px;
    flex: 0 0 120px;
  }

  .product-catalog-actions,
  .inventory-section-tabs,
  .inventory-command-actions {
    grid-template-columns: 1fr;
  }

  .inventory-section-tabs {
    display: grid;
    width: 100%;
  }

  .product-card-select {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .product-stock-badge {
    grid-column: 1 / -1;
    width: fit-content;
    margin-inline-start: 48px;
  }

  .product-profile-header {
    display: grid;
  }

  .product-profile-status {
    width: 100%;
  }

  .product-profile-actions,
  .product-profile-metrics,
  .product-pricing-grid,
  .product-edit-pricing {
    display: grid;
    grid-template-columns: 1fr;
  }

  .inventory-table-wrap {
    overflow: visible;
    border: 0;
  }

  .inventory-table,
  .inventory-table tbody,
  .inventory-table tr,
  .inventory-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .inventory-table thead {
    display: none;
  }

  .inventory-table tbody {
    display: grid;
    gap: 10px;
  }

  .inventory-table tr {
    overflow: hidden;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
  }

  .inventory-table td,
  .inventory-table td:nth-child(3),
  .inventory-table td:nth-child(7) {
    display: grid;
    grid-template-columns: minmax(105px, 38%) 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edf1ee;
    text-align: right;
  }

  .inventory-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
  }

  .inventory-table td:last-child {
    border-bottom: 0;
  }

  .inventory-stock-state {
    align-items: flex-start;
  }

  .inventory-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .inventory-row-actions button {
    width: 100%;
    min-width: 0;
  }

  .inventory-movement-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .inventory-movement-value {
    grid-column: 2;
    padding-top: 7px;
    border-top: 1px solid var(--line);
    text-align: right;
  }

  .opening-stock-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

.voucher-center-header {
  display: grid;
  grid-template-columns: minmax(270px, 0.8fr) minmax(560px, 1.2fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #113f36, #0a5d4a);
  color: #fff;
  box-shadow: 0 18px 42px rgba(13, 58, 45, 0.16);
}

.voucher-center-header h2 {
  margin: 7px 0 5px;
  font-size: 27px;
}

.voucher-center-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.voucher-center-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(125px, 1fr));
  gap: 8px;
}

.voucher-center-summary > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}

.voucher-center-summary span,
.voucher-center-summary strong {
  display: block;
}

.voucher-center-summary span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
}

.voucher-center-summary strong {
  margin-top: 5px;
  color: #fff;
  font-size: 18px;
}

.voucher-center-summary .receipt {
  background: rgba(38, 145, 101, 0.2);
}

.voucher-center-summary .payment {
  background: rgba(54, 102, 151, 0.2);
}

.voucher-center-summary .expense {
  background: rgba(164, 68, 39, 0.22);
}

.voucher-center-tabs {
  width: fit-content;
  margin: 14px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
}

.voucher-center-tabs .tab-button {
  min-width: 155px;
  border-color: transparent;
  background: transparent;
}

.voucher-center-tabs .tab-button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 18px rgba(15, 117, 91, 0.18);
}

.voucher-tab {
  display: none;
}

.voucher-tab.active {
  display: block;
}

.voucher-result-count {
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf5f2;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
}

.voucher-filters {
  grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(150px, 0.6fr));
}

.voucher-table {
  min-width: 1060px;
}

.voucher-table td {
  vertical-align: middle;
}

.voucher-table tr.is-cancelled td {
  opacity: 0.64;
  background: #faf7f6;
}

.voucher-type-badge,
.voucher-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.voucher-type-badge.receipt {
  background: #e6f5ee;
  color: #0b7658;
}

.voucher-type-badge.payment {
  background: #eaf0f8;
  color: #355f8a;
}

.voucher-type-badge.expense {
  background: #fcece7;
  color: #a04427;
}

.voucher-direction.in {
  background: #ecf7f2;
  color: #0b7658;
}

.voucher-direction.out {
  background: #f6f0ed;
  color: #8a4a33;
}

.voucher-amount {
  white-space: nowrap;
}

.voucher-amount.in {
  color: #0b7658;
}

.voucher-amount.out {
  color: #a04427;
}

.voucher-row-actions {
  display: flex;
  gap: 6px;
  min-width: 130px;
}

.voucher-row-actions button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

.voucher-create-form {
  max-width: 1050px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
}

.voucher-create-header {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(460px, 1.2fr);
  gap: 22px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(135deg, #133f36, #0d5b49);
  color: #fff;
}

.voucher-create-header h2 {
  margin: 7px 0 5px;
  font-size: 24px;
}

.voucher-create-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.voucher-type-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.voucher-type-option {
  display: grid;
  gap: 3px;
  min-height: 68px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.voucher-type-option span,
.voucher-type-option small {
  display: block;
}

.voucher-type-option span {
  font-weight: 900;
}

.voucher-type-option small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

.voucher-type-option.active {
  border-color: #f1cc7a;
  background: #fff;
  color: #173f36;
  box-shadow: 0 8px 20px rgba(5, 34, 26, 0.2);
}

.voucher-type-option.active small {
  color: var(--muted);
}

.voucher-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 22px;
}

.voucher-account-link {
  margin: 18px 22px 0;
  padding: 16px;
  border: 1px solid #d7e5df;
  border-radius: 11px;
  background: #f8fbfa;
}

.voucher-account-link-head,
.voucher-account-identity,
.voucher-settlement-row,
.voucher-supplier-invoices > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.voucher-account-link-head h3 {
  margin: 4px 0 0;
}

.voucher-party-kind-selector {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 9px;
  background: #edf4f1;
}

.voucher-party-kind-selector button {
  min-width: 92px;
  min-height: 38px;
  padding: 8px 12px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.voucher-party-kind-selector button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 117, 91, 0.18);
}

.voucher-account-picker {
  margin-top: 14px;
}

.voucher-account-picker label {
  max-width: 520px;
}

.voucher-account-search {
  width: min(620px, 100%);
}

.voucher-account-suggestions {
  z-index: 40;
  max-height: 310px;
  overflow-y: auto;
}

.voucher-account-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: right;
}

.voucher-account-suggestion strong,
.voucher-account-suggestion small {
  display: block;
}

.voucher-account-suggestion small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.voucher-account-suggestion b {
  color: var(--brand);
  font-size: 10px;
}

.voucher-account-no-results {
  padding: 15px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.voucher-account-details {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.voucher-account-identity > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.voucher-account-identity strong,
.voucher-account-identity small,
.voucher-settlement-row strong,
.voucher-settlement-row small,
.voucher-supplier-invoices strong,
.voucher-supplier-invoices small {
  display: block;
}

.voucher-account-identity small,
.voucher-settlement-row small,
.voucher-supplier-invoices small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.voucher-account-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 10px;
  background: #dff1ea;
  color: var(--brand);
  font-size: 18px;
  font-weight: 900;
}

.voucher-account-avatar.supplier {
  background: #e7eef6;
  color: #315f8c;
}

.voucher-account-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.voucher-account-summary > div {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.voucher-account-summary span,
.voucher-account-summary strong {
  display: block;
}

.voucher-account-summary span {
  color: var(--muted);
  font-size: 10px;
}

.voucher-account-summary strong {
  margin-top: 4px;
  color: #17362e;
  font-size: 15px;
}

.voucher-account-summary .danger strong {
  color: #b43a2f;
}

.voucher-obligation-list,
.voucher-supplier-invoices {
  display: grid;
  gap: 7px;
}

.voucher-settlement-row {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: inherit;
  text-align: right;
}

.voucher-settlement-row:hover {
  border-color: rgba(15, 117, 91, 0.38);
  background: #fbfefd;
}

.voucher-settlement-row.selected {
  border-color: var(--brand);
  background: #eaf5f1;
  box-shadow: 0 0 0 2px rgba(15, 117, 91, 0.08);
}

.voucher-settlement-row b {
  color: #17362e;
  white-space: nowrap;
}

.voucher-settlement-row.supplier-action {
  border-color: #b9d2e8;
}

.voucher-supplier-invoices > div {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.voucher-supplier-invoices > div > span:last-child {
  text-align: left;
}

.voucher-account-clear {
  padding: 14px;
  border-radius: 8px;
  background: #edf6f2;
  text-align: center;
}

.voucher-account-clear strong,
.voucher-account-clear span {
  display: block;
}

.voucher-account-clear span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.voucher-form-grid .wide {
  grid-column: 1 / -1;
}

.voucher-create-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: #fafcfb;
}

.voucher-effect-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 8px;
}

.voucher-effect-preview > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.voucher-effect-preview span,
.voucher-effect-preview strong {
  display: block;
}

.voucher-effect-preview span {
  color: var(--muted);
  font-size: 10px;
}

.voucher-effect-preview strong {
  margin-top: 4px;
  font-size: 14px;
}

.voucher-effect-preview .incoming strong {
  color: #0b7658;
}

.voucher-effect-preview .outgoing strong {
  color: #a04427;
}

.voucher-create-footer > button {
  min-width: 170px;
}

.personal-cash-workspace {
  display: grid;
  grid-template-columns: minmax(340px, 0.75fr) minmax(520px, 1.25fr);
  gap: 14px;
  align-items: start;
}

.personal-cash-form,
.personal-cash-records {
  margin: 0;
}

.manual-debt-effect {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #c7ddd6;
  border-radius: 10px;
  background: #edf7f4;
}

.manual-debt-effect strong {
  color: #0b6954;
  font-size: 11px;
}

.manual-debt-effect span {
  color: #526b64;
  font-size: 10px;
  line-height: 1.7;
}

.manual-debt-effect.external {
  border-color: #cbd7e5;
  background: #f1f5f9;
}

.manual-debt-effect.external strong {
  color: #3d6387;
}

.create-customer-suggestion {
  border-top: 1px solid #dce8e4;
  background: #f2f8f6;
}

.create-customer-suggestion strong,
.create-customer-suggestion small {
  display: block;
}

.create-customer-suggestion small {
  margin-top: 4px;
  color: var(--muted);
}

.text-action {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1200px) and (min-width: 621px) {
  .voucher-center-header,
  .voucher-create-header {
    grid-template-columns: 1fr;
  }

  .voucher-table th:nth-child(4),
  .voucher-table td:nth-child(4),
  .voucher-table th:nth-child(5),
  .voucher-table td:nth-child(5) {
    display: none;
  }

  .voucher-table {
    min-width: 800px;
  }

  .personal-cash-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .voucher-center-header {
    grid-template-columns: 1fr;
  }

  .voucher-center-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voucher-create-header {
    grid-template-columns: 1fr;
  }

  .voucher-form-grid,
  .voucher-create-footer {
    grid-template-columns: 1fr;
  }

  .voucher-effect-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .voucher-account-link-head,
  .voucher-account-identity {
    align-items: stretch;
    flex-direction: column;
  }

  .voucher-party-kind-selector,
  .voucher-account-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .voucher-center-header {
    gap: 16px;
    padding: 19px 16px;
  }

  .voucher-center-header h2 {
    font-size: 23px;
  }

  .voucher-center-summary {
    grid-template-columns: 1fr;
  }

  .voucher-center-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
  }

  .voucher-center-summary strong {
    margin: 0;
  }

  .voucher-center-tabs {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .voucher-center-tabs .tab-button {
    width: 100%;
    min-width: 0;
  }

  .voucher-filters,
  .voucher-form-grid,
  .voucher-type-selector,
  .voucher-effect-preview,
  .voucher-party-kind-selector,
  .voucher-account-summary {
    grid-template-columns: 1fr;
  }

  .voucher-account-link {
    margin: 14px 14px 0;
    padding: 13px;
  }

  .voucher-party-kind-selector button {
    width: 100%;
    min-width: 0;
  }

  .voucher-settlement-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .voucher-table-wrap {
    overflow: visible;
    border: 0;
  }

  .voucher-table,
  .voucher-table tbody,
  .voucher-table tr,
  .voucher-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .voucher-table thead {
    display: none;
  }

  .voucher-table tbody {
    display: grid;
    gap: 10px;
  }

  .voucher-table tr {
    overflow: hidden;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
  }

  .voucher-table td,
  .voucher-table td:nth-child(4),
  .voucher-table td:nth-child(5) {
    display: grid;
    grid-template-columns: minmax(98px, 36%) 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edf1ee;
    text-align: right;
  }

  .voucher-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
  }

  .voucher-table td:last-child {
    border-bottom: 0;
  }

  .voucher-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .voucher-row-actions button,
  .voucher-create-footer > button {
    width: 100%;
    min-width: 0;
  }

  .personal-cash-workspace {
    grid-template-columns: 1fr;
  }
}

.dashboard-command-header,
.reports-center-header {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #123f35, #0b604d);
  color: #fff;
  box-shadow: 0 18px 42px rgba(13, 58, 45, 0.16);
}

.dashboard-command-header h2,
.reports-center-header h2 {
  margin: 7px 0 5px;
  font-size: 27px;
}

.dashboard-command-header p,
.reports-center-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.dashboard-command-actions,
.reports-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-command-actions button {
  min-width: 150px;
  min-height: 58px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 800;
}

.dashboard-command-actions .ghost,
.reports-header-actions .ghost {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.dashboard-command-actions .primary,
.reports-header-actions .primary {
  background: #fff;
  color: var(--brand-dark);
}

.dashboard-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.profit-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.profit-detail-head h3 {
  margin: 4px 0 0;
}

.profit-metric.total::before {
  background: #315c8a;
}

.profit-metric.collected::before {
  background: #0f755b;
}

.profit-metric.uncollected::before {
  background: #c16c22;
}

.profit-detail-center {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.profit-detail-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.profit-detail-filters button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf8;
  color: var(--muted);
}

.profit-detail-filters button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.profit-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 12px;
}

.profit-detail-summary div {
  padding: 12px;
  border-radius: 8px;
  background: #f5f8f6;
}

.profit-detail-summary div.featured {
  background: #eaf5f1;
}

.profit-detail-summary span,
.profit-detail-summary strong {
  display: block;
}

.profit-detail-summary span {
  color: var(--muted);
  font-size: 11px;
}

.profit-detail-summary strong {
  margin-top: 5px;
  color: #17362e;
  font-size: 17px;
}

.profit-detail-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.profit-collected-value {
  color: #0f755b;
}

.profit-open-value {
  color: #b45f1a;
}

.dashboard-insight-card {
  position: relative;
  min-height: 126px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-align: right;
  box-shadow: 0 8px 24px rgba(22, 60, 51, 0.06);
}

.dashboard-insight-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--brand);
}

.dashboard-insight-card:hover,
.dashboard-alert-card:hover,
.report-linked-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 117, 91, 0.34);
  box-shadow: 0 14px 34px rgba(13, 58, 45, 0.1);
}

.dashboard-insight-card span,
.dashboard-insight-card strong,
.dashboard-insight-card small {
  display: block;
}

.dashboard-insight-card span,
.dashboard-insight-card small {
  color: var(--muted);
  font-size: 11px;
}

.dashboard-insight-card strong {
  color: #17362e;
  font-size: 22px;
}

.dashboard-insight-card i,
.dashboard-alert-card i,
.report-linked-metric i {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 12px;
  color: var(--brand);
  font-style: normal;
  opacity: 0.72;
}

.dashboard-insight-card.attention::before {
  background: #c57b1c;
}

.dashboard-insight-card.danger::before {
  background: #b43a2f;
}

.dashboard-insight-card.danger {
  background: #fffafa;
}

.dashboard-insight-card.cash::before {
  background: #27755f;
}

.dashboard-insight-card.purchase::before {
  background: #456b91;
}

.dashboard-alerts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.dashboard-alert-card {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 82px;
  align-content: center;
  padding: 13px 15px;
  border: 1px solid #eadfca;
  border-radius: 10px;
  background: #fffaf2;
  color: inherit;
  text-align: right;
}

.dashboard-alert-card span,
.dashboard-alert-card strong,
.dashboard-alert-card small {
  display: block;
}

.dashboard-alert-card span,
.dashboard-alert-card small {
  color: var(--muted);
  font-size: 10px;
}

.dashboard-alert-card strong {
  color: #8a5419;
  font-size: 18px;
}

.dashboard-alert-card.danger {
  border-color: #efd4cf;
  background: #fff8f7;
}

.dashboard-alert-card.danger strong {
  color: #a8382e;
}

.dashboard-clear-state {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid #cfe6dc;
  border-radius: 10px;
  background: #f5fbf8;
}

.dashboard-activity-grid {
  display: grid;
  grid-template-columns: minmax(540px, 1.15fr) minmax(360px, 0.85fr);
  gap: 14px;
  margin-top: 14px;
}

.dashboard-activity-panel {
  margin: 0;
}

.dashboard-activity-panel .eyebrow,
.report-toolbar .eyebrow,
.report-tab-panel .eyebrow {
  background: #edf5f2;
  color: var(--brand);
}

.dashboard-activity-panel h2 {
  margin: 5px 0 0;
}

.dashboard-table-wrap table,
.dashboard-activity-table {
  min-width: 0;
  table-layout: fixed;
}

.dashboard-activity-table th:first-child {
  width: 25%;
}

.dashboard-activity-table th:nth-child(2) {
  width: 32%;
}

.dashboard-cash-list {
  display: grid;
  gap: 7px;
}

.dashboard-cash-row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafcfb;
  color: inherit;
  text-align: right;
}

.dashboard-cash-row span strong,
.dashboard-cash-row span small {
  display: block;
}

.dashboard-cash-row span small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.dashboard-cash-row > strong.in,
.report-source-row > strong.in {
  color: #0b7658;
}

.dashboard-cash-row > strong.out,
.report-source-row > strong.out {
  color: #a04427;
}

.reports-center-header {
  margin-bottom: 14px;
}

.report-toolbar {
  position: static;
  top: auto;
}

.report-toolbar .panel-head {
  margin-bottom: 12px;
}

.report-toolbar .panel-head h2 {
  margin: 5px 0 0;
}

.report-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(125px, 1fr));
  gap: 6px;
  margin-bottom: 0;
  overflow-x: auto;
}

.report-tabs .tab-button {
  min-width: 125px;
  white-space: nowrap;
}

.report-tab-panel {
  margin-top: 14px;
}

.report-linked-metric {
  appearance: none;
  width: 100%;
  min-height: 118px;
  color: inherit;
  text-align: right;
  cursor: pointer;
}

.report-linked-metric i {
  font-size: 15px;
}

.report-source-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
}

.report-source-list {
  display: grid;
  gap: 7px;
  grid-column: 1 / -1;
  margin-top: 10px;
}

.report-source-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.report-source-row div strong,
.report-source-row div small {
  display: block;
}

.report-source-row div small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 1300px) and (min-width: 621px) {
  .dashboard-insights,
  .dashboard-alerts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-activity-grid {
    grid-template-columns: 1fr;
  }

  .report-tabs {
    grid-template-columns: repeat(4, minmax(135px, 1fr));
  }

  .report-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-command-header,
  .reports-center-header {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-command-actions,
  .reports-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .report-source-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profit-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .profit-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dashboard-command-header,
  .reports-center-header {
    padding: 19px 16px;
  }

  .dashboard-command-header h2,
  .reports-center-header h2 {
    font-size: 23px;
  }

  .dashboard-insights,
  .dashboard-alerts,
  .dashboard-activity-grid,
  .profit-detail-summary,
  .report-source-summary,
  .report-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-insight-card {
    min-height: 105px;
  }

  .dashboard-clear-state,
  .dashboard-cash-row,
  .report-source-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-table-wrap {
    overflow: visible;
    border: 0;
  }

  .dashboard-activity-table,
  .dashboard-activity-table tbody,
  .dashboard-activity-table tr,
  .dashboard-activity-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .dashboard-activity-table thead {
    display: none;
  }

  .dashboard-activity-table tbody {
    display: grid;
    gap: 8px;
  }

  .dashboard-activity-table tr {
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
  }

  .dashboard-activity-table td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
  }

  .dashboard-activity-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
  }

  .report-tabs {
    display: flex;
    flex-wrap: nowrap;
  }
}

.modon-orders-date-filter {
  margin: 0 0 14px;
}

.professional-report-sheet {
  color: #17241f;
}

.professional-report-intro {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #cbdad5;
  border-radius: 8px;
  background: #f6faf8;
}

.professional-report-intro h2,
.professional-report-intro p {
  margin: 0;
}

.professional-report-intro h2 {
  color: #173f36;
  font-size: 18px;
}

.professional-report-intro p {
  margin-top: 3px;
  color: #5a6b65;
  font-size: 10.5px;
}

.professional-report-intro span,
.professional-report-generated span {
  display: block;
  color: #6b7974;
  font-size: 9px;
  font-weight: 700;
}

.professional-report-generated {
  min-width: 150px;
  text-align: left;
}

.professional-report-generated strong {
  display: block;
  margin-top: 3px;
  font-size: 10px;
}

.professional-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 13px;
}

.professional-report-metrics > div {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #cbdad5;
  border-inline-start: 3px solid #176d58;
  border-radius: 6px;
  background: #fff;
}

.professional-report-metrics span,
.professional-report-metrics strong,
.professional-report-metrics small {
  display: block;
}

.professional-report-metrics span,
.professional-report-metrics small {
  color: #65756f;
  font-size: 8.5px;
}

.professional-report-metrics strong {
  color: #173f36;
  font-size: 14px;
}

.professional-report-sections {
  display: grid;
  gap: 13px;
}

.professional-report-section {
  break-inside: auto;
}

.professional-report-section-head {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 2px 5px;
  border-bottom: 1px solid #b9c9c3;
}

.professional-report-section-head h3 {
  margin: 0;
  color: #173f36;
  font-size: 13px;
}

.professional-report-section-head span {
  color: #64736e;
  font-size: 9px;
}

.professional-report-table {
  table-layout: auto;
  font-size: 9px;
}

.professional-report-table.wide-table {
  font-size: 8px;
}

.professional-report-table tbody tr:nth-child(even) {
  background: #f8faf9;
}

.professional-report-table td {
  vertical-align: top;
}

.professional-report-empty {
  padding: 14px !important;
  color: #687771;
  text-align: center !important;
}

.professional-report-footer {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 7px;
  border-top: 1px solid #9baaa5;
  color: #61706b;
  font-size: 8.5px;
}

@media print {
  @page report-landscape {
    size: A4 landscape;
    margin: 8mm;
  }

  @page {
    size: A4 portrait;
    margin: 9mm;
  }

  html,
  body.printing {
    background: #fff;
  }

  body.printing .sidebar,
  body.printing .topbar,
  body.printing .app,
  body.printing .mobile-menu-button {
    display: none !important;
  }

  body.printing .print-layer {
    display: block !important;
  }

  body.printing {
    display: block;
    margin: 0;
    color: #111;
  }

  body.printing .print-document {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 10.5pt;
    line-height: 1.34;
  }

  body.printing .print-header {
    break-after: avoid;
  }

  body.printing .print-header h1,
  body.printing .print-title strong {
    font-size: 17pt;
  }

  body.printing .print-header p,
  body.printing .print-title span,
  body.printing .print-party {
    font-size: 10pt;
  }

  body.printing .print-title small {
    font-size: 8.5pt;
  }

  body.printing .print-table {
    margin-bottom: 9px;
    font-size: 9.5pt;
  }

  body.printing .print-table thead {
    display: table-header-group;
  }

  body.printing .print-table tr,
  body.printing .print-meta > div,
  body.printing .print-totals,
  body.printing .print-signatures {
    break-inside: avoid;
  }

  body.printing .print-table th,
  body.printing .print-table td {
    padding: 5px 6px;
  }

  body.printing .customer-statement-table {
    font-size: 8.5pt;
  }

  body.printing .customer-statement-table th,
  body.printing .customer-statement-table td {
    padding: 4px;
  }

  body.printing .customer-statement-table td:nth-child(3) {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: center;
  }

  body.printing .print-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 9px;
  }

  body.printing .print-meta div,
  body.printing .print-totals div {
    padding: 5px 7px;
  }

  body.printing .print-meta span,
  body.printing .print-totals span {
    font-size: 8.5pt;
  }

  body.printing .print-meta strong,
  body.printing .print-totals strong,
  body.printing .print-notes,
  body.printing .print-signatures div {
    font-size: 9.5pt;
  }

  body.printing .print-signatures {
    margin-top: 24px;
  }

  body.printing .print-footer {
    margin-top: 10px;
  }

  body.printing .customer-statement-overdue {
    break-before: auto;
    break-inside: avoid;
  }

  body.report-printing .professional-report-sheet {
    page: report-landscape;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.report-printing .print-document {
    font-size: 8.5pt;
    line-height: 1.25;
  }

  body.report-printing .professional-report-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  body.report-printing .professional-report-header h1,
  body.report-printing .professional-report-header .print-title strong {
    font-size: 14pt;
  }

  body.report-printing .professional-report-intro,
  body.report-printing .professional-report-meta > div,
  body.report-printing .professional-report-metrics > div,
  body.report-printing .professional-report-section-head {
    break-inside: avoid;
  }

  body.report-printing .professional-report-meta {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  body.report-printing .professional-report-meta div {
    padding: 4px 6px;
  }

  body.report-printing .professional-report-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 7px 0 9px;
  }

  body.report-printing .professional-report-metrics > div {
    min-height: 45px;
    padding: 5px 7px;
  }

  body.report-printing .professional-report-metrics strong {
    font-size: 10.5pt;
  }

  body.report-printing .professional-report-section {
    margin-top: 7px;
  }

  body.report-printing .professional-report-table {
    margin-bottom: 7px;
    font-size: 7.3pt;
  }

  body.report-printing .professional-report-table.wide-table {
    font-size: 6.7pt;
  }

  body.report-printing .professional-report-table thead {
    display: table-header-group;
  }

  body.report-printing .professional-report-table tr {
    break-inside: avoid;
  }

  body.report-printing .professional-report-table th,
  body.report-printing .professional-report-table td {
    padding: 3.5px 4px;
  }

  body.report-printing .professional-report-footer {
    break-inside: avoid;
  }

  body.printer-test-printing .print-document {
    width: 100%;
    min-height: 270mm;
    font-size: 9pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .printer-test-sheet {
    position: relative;
    min-height: 270mm;
    padding: 5mm;
    border: 0.35mm solid #1e302a;
    outline: 0.2mm dashed #8c9a95;
    outline-offset: -2.5mm;
    color: #13231e;
  }

  .printer-test-sheet::before,
  .printer-test-sheet::after {
    position: absolute;
    color: #62716c;
    font-size: 6.5pt;
  }

  .printer-test-sheet::before {
    content: "أعلى الورقة";
    top: 1.5mm;
    right: 50%;
    transform: translateX(50%);
  }

  .printer-test-sheet::after {
    content: "أسفل الورقة";
    right: 50%;
    bottom: 1.5mm;
    transform: translateX(50%);
  }

  .printer-test-sheet-header {
    display: flex;
    justify-content: space-between;
    gap: 8mm;
    align-items: center;
    padding: 4mm 3mm;
    border-bottom: 0.7mm solid #174f42;
  }

  .printer-test-brand {
    display: flex;
    gap: 3mm;
    align-items: center;
  }

  .printer-test-brand > span {
    display: grid;
    place-items: center;
    width: 12mm;
    height: 12mm;
    border-radius: 2mm;
    background: #dcecf7;
    color: #174e6b;
    font-size: 18pt;
    font-weight: 900;
  }

  .printer-test-brand h1 {
    margin: 0 0 1mm;
    font-size: 17pt;
  }

  .printer-test-brand p {
    margin: 0;
    color: #52625c;
  }

  .printer-test-a4-mark {
    min-width: 35mm;
    padding: 2.5mm;
    border: 0.4mm solid #9eaaa6;
    text-align: center;
  }

  .printer-test-a4-mark strong,
  .printer-test-a4-mark span {
    display: block;
  }

  .printer-test-a4-mark strong {
    font-size: 18pt;
  }

  .printer-test-a4-mark span {
    font-size: 7pt;
  }

  .printer-test-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2mm;
    margin: 4mm 0;
  }

  .printer-test-info > div {
    padding: 2.5mm;
    border: 0.25mm solid #c3ccc8;
    background: #f4f7f6;
  }

  .printer-test-info span,
  .printer-test-info strong {
    display: block;
  }

  .printer-test-info span {
    color: #64726d;
    font-size: 7pt;
  }

  .printer-test-info strong {
    margin-top: 1mm;
    font-size: 8pt;
  }

  .printer-test-block {
    margin-top: 4mm;
    padding: 3mm;
    border: 0.3mm solid #aebbb6;
    break-inside: avoid;
  }

  .printer-test-block-title {
    display: flex;
    justify-content: space-between;
    gap: 5mm;
    align-items: center;
    margin-bottom: 2.5mm;
  }

  .printer-test-block-title span {
    color: #66756f;
    font-size: 7pt;
  }

  .printer-test-type-samples p {
    margin: 1.5mm 0;
  }

  .test-type-large {
    font-size: 14pt;
    font-weight: 800;
  }

  .test-type-medium {
    font-size: 10pt;
  }

  .test-type-small {
    font-size: 7pt;
  }

  .printer-test-color-bars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 12mm;
    border: 0.25mm solid #111;
  }

  .printer-test-color-bars .cyan { background: #00a9ce; }
  .printer-test-color-bars .magenta { background: #d6258f; }
  .printer-test-color-bars .yellow { background: #f1d332; }
  .printer-test-color-bars .black { background: #111; }
  .printer-test-color-bars .brand-green { background: #106b55; }
  .printer-test-color-bars .brand-blue { background: #24658f; }

  .printer-test-gray-bars {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    height: 12mm;
    margin-top: 2mm;
    border: 0.25mm solid #111;
  }

  .printer-test-gray-bars i {
    display: grid;
    place-items: center;
    font-style: normal;
  }

  .printer-test-gray-bars span {
    padding: 0.5mm;
    background: rgba(255, 255, 255, 0.72);
    color: #111;
    font-size: 6pt;
  }

  .printer-test-measurements {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58mm;
    gap: 5mm;
    align-items: start;
    margin-top: 4mm;
    break-inside: avoid;
  }

  .printer-test-ruler-wrap,
  .printer-test-square-wrap {
    padding: 3mm;
    border: 0.3mm solid #aebbb6;
  }

  .printer-test-ruler {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100mm;
    max-width: 100%;
    margin: 8mm auto 3mm;
    padding-top: 3mm;
    border-top: 0.7mm solid #111;
  }

  .printer-test-ruler::before,
  .printer-test-ruler::after {
    content: "";
    position: absolute;
    top: -2.5mm;
    width: 0.5mm;
    height: 5mm;
    background: #111;
  }

  .printer-test-ruler::before { right: 0; }
  .printer-test-ruler::after { left: 0; }

  .printer-test-ruler span {
    font-size: 7pt;
  }

  .printer-test-square-wrap {
    text-align: center;
  }

  .printer-test-square {
    display: grid;
    place-items: center;
    width: 50mm;
    height: 50mm;
    margin: 2mm auto 0;
    border: 0.6mm solid #111;
    background:
      linear-gradient(45deg, transparent 49.6%, #bbc6c2 50%, transparent 50.4%),
      linear-gradient(-45deg, transparent 49.6%, #bbc6c2 50%, transparent 50.4%);
  }

  .printer-test-square span {
    padding: 1mm;
    background: #fff;
    font-size: 7pt;
  }

  .printer-test-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2mm 6mm;
    margin-top: 4mm;
    padding: 3mm;
    border: 0.3mm solid #aebbb6;
    break-inside: avoid;
  }

  .printer-test-checklist > strong {
    grid-column: 1 / -1;
  }

  .printer-test-checklist div {
    font-size: 7.5pt;
  }

  .printer-test-checklist div span {
    margin-left: 1mm;
    font-size: 11pt;
  }

  .printer-test-sheet-footer {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    align-items: center;
    margin-top: 4mm;
    padding: 3mm;
    border-top: 0.3mm solid #7f8c87;
    font-size: 7pt;
  }
}

/* Keep the Modon checkout compact after the shared invoice-summary rules. */
.invoice-summary.modon-order-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 16px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.invoice-summary.modon-order-summary > div {
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}

.invoice-summary.modon-order-summary > div:nth-child(3),
.invoice-summary.modon-order-summary > div:nth-child(5),
.invoice-summary.modon-order-summary > div:nth-child(6) {
  border-color: var(--line);
  background: #fff;
}

.invoice-summary.modon-order-summary > div:nth-last-child(2) {
  background: #f5f8f7;
}

.invoice-summary.modon-order-summary > div:last-child {
  border-bottom: 0;
  background: #e8f4f0;
}

.invoice-summary.modon-order-summary strong {
  font-size: 12px;
}

.invoice-summary.modon-order-summary span {
  font-size: 10px;
}

.modon-table-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 220px;
}

.modon-table-actions button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 10px;
}

/* Modon collection and returns use operational cards instead of generic list rows. */
.carrier-invoice-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 0.68fr) minmax(250px, 1.35fr) minmax(190px, 0.8fr) minmax(155px, auto);
  gap: 18px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #d9e5e0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(20, 66, 54, 0.05);
}

.carrier-invoice-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: #d48b2c;
}

.carrier-invoice-card.settled::before {
  background: #168162;
}

.carrier-invoice-card.external::before {
  background: #75847f;
}

.carrier-invoice-status,
.carrier-invoice-meta,
.carrier-invoice-actions,
.carrier-return-actions {
  display: flex;
  align-items: center;
}

.carrier-invoice-status {
  gap: 9px;
}

.carrier-status-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  background: #d48b2c;
  box-shadow: 0 0 0 5px rgba(212, 139, 44, 0.12);
}

.carrier-invoice-card.settled .carrier-status-dot {
  background: #168162;
  box-shadow: 0 0 0 5px rgba(22, 129, 98, 0.12);
}

.carrier-invoice-card.external .carrier-status-dot {
  background: #75847f;
  box-shadow: 0 0 0 5px rgba(117, 132, 127, 0.12);
}

.carrier-invoice-status small,
.carrier-invoice-status strong,
.carrier-invoice-amount small,
.carrier-invoice-amount strong,
.carrier-invoice-amount span {
  display: block;
}

.carrier-invoice-status small,
.carrier-invoice-amount small {
  color: var(--muted);
  font-size: 9px;
}

.carrier-invoice-status strong {
  margin-top: 3px;
  color: #30463f;
  font-size: 12px;
}

.carrier-invoice-identity h3,
.carrier-return-identity h3 {
  margin: 4px 0 7px;
  color: #173f36;
  font-size: 17px;
}

.carrier-invoice-meta {
  gap: 7px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 10px;
}

.carrier-invoice-meta > span:not(.badge) + span:not(.badge)::before {
  content: "·";
  margin-inline-end: 7px;
  color: #b4c0bc;
}

.carrier-invoice-amount {
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--line);
}

.carrier-invoice-amount strong {
  margin: 4px 0 3px;
  color: #0d6d55;
  font-size: 20px;
}

.carrier-invoice-amount span {
  color: var(--muted);
  font-size: 9px;
}

.carrier-invoice-actions,
.carrier-return-actions {
  gap: 7px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.carrier-invoice-actions button {
  min-height: 38px;
}

.carrier-invoice-primary {
  min-width: 145px;
}

.carrier-return-card {
  overflow: hidden;
  border: 1px solid #d9e5e0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(20, 66, 54, 0.05);
}

.carrier-return-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(145px, 0.45fr) minmax(240px, auto);
  gap: 18px;
  align-items: center;
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, #fbfdfc, #f5faf8);
}

.carrier-return-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.carrier-return-progress > span {
  color: var(--muted);
  font-size: 9px;
}

.carrier-return-progress > strong {
  display: block;
  margin: 3px 0 7px;
  color: #173f36;
  font-size: 19px;
}

.carrier-return-progress > strong small {
  color: var(--muted);
  font-size: 10px;
}

.carrier-return-progress-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8e4;
}

.carrier-return-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #168162;
}

.carrier-return-table {
  border: 0;
  border-radius: 0;
}

.carrier-return-table table {
  margin: 0;
}

.carrier-return-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 1180px) {
  .carrier-invoice-card {
    grid-template-columns: minmax(130px, 0.65fr) minmax(240px, 1.35fr) minmax(180px, 0.8fr);
  }

  .carrier-invoice-actions {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .carrier-return-head {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.5fr);
  }

  .carrier-return-actions {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .collection-kpis,
  .collection-flow-guide,
  .collection-cash-preview,
  .collection-confirm-meta {
    grid-template-columns: 1fr;
  }

  .collection-filter-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collection-kpi {
    min-height: 96px;
  }

  .collection-review-group > summary {
    align-items: flex-start;
  }

  #modonFollow .modon-external-table,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] .table-wrap {
    overflow: visible;
  }

  #modonFollow .modon-external-table table,
  #modonFollow .modon-external-table tbody,
  #modonFollow .modon-external-table tr,
  #modonFollow .modon-external-table td,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] table,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] tbody,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] tr,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #modonFollow .modon-external-table thead,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] thead {
    display: none;
  }

  #modonFollow .modon-external-table tbody,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] tbody {
    display: grid;
    gap: 10px;
  }

  #modonFollow .modon-external-table tr,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] tr {
    padding: 7px 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(20, 66, 54, 0.05);
  }

  #modonFollow .modon-external-table td,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] td {
    display: grid;
    grid-template-columns: minmax(105px, 38%) 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1ef;
  }

  #modonFollow .modon-external-table td::before,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
  }

  #modonFollow .modon-external-table td:last-child,
  #modonFollow .modon-follow-panel[data-modon-follow-panel="internal"] td:last-child {
    border-bottom: 0;
  }

  .modon-table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .modon-table-actions button {
    width: 100%;
  }

  .carrier-invoice-card,
  .carrier-return-head {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
  }

  .carrier-invoice-status {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line);
  }

  .carrier-invoice-amount {
    padding: 11px 0;
    border-block: 1px solid var(--line);
    border-inline-start: 0;
  }

  .carrier-invoice-actions,
  .carrier-return-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 0;
    border-top: 0;
  }

  .carrier-invoice-actions button,
  .carrier-return-actions button {
    width: 100%;
  }

  .carrier-return-table {
    overflow: visible;
    padding: 10px;
  }

  .carrier-return-table table,
  .carrier-return-table tbody,
  .carrier-return-table tr,
  .carrier-return-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .carrier-return-table thead {
    display: none;
  }

  .carrier-return-table tbody {
    display: grid;
    gap: 8px;
  }

  .carrier-return-table tr {
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
  }

  .carrier-return-table td {
    display: grid;
    grid-template-columns: minmax(100px, 38%) 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1ef;
  }

  .carrier-return-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
  }

  .carrier-return-table td:last-child {
    border-bottom: 0;
  }
}

/* Dashboard V5 — authoritative final layout overrides. */
@media (min-width: 1201px) {
  #dashboard {
    direction: ltr;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  #dashboard > section,
  #dashboard > div { direction: rtl; min-width: 0; margin: 0; }
  #dashboard .dashboard-command-header { display: none; }
  #dashboard .dashboard-quick-actions {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid #e1e7f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(14, 39, 73, .07);
  }
  #dashboard .dashboard-quick-card { min-height: 138px; padding: 14px 8px; border-radius: 14px; }
  #dashboard .dashboard-insights {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
    padding: 14px;
    border: 1px solid #e1e7f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(14, 39, 73, .06);
  }
  #dashboard .dashboard-insight-card {
    min-height: 82px;
    padding: 13px 15px 13px 62px;
    border: 1px solid #e4e9f0;
    border-radius: 13px;
    box-shadow: 0 6px 16px rgba(14, 39, 73, .055);
  }
  #dashboard .dashboard-insight-card::after {
    inset-inline-start: auto;
    inset-inline-end: 13px;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border-radius: 11px;
    font-size: 17px;
  }
  #dashboard .dashboard-insight-card strong { font-size: 19px; line-height: 1.1; }
  #dashboard .dashboard-insight-card span,
  #dashboard .dashboard-insight-card small { font-size: 10px; }
  #dashboard .dashboard-insight-card i { inset-inline-start: 12px; inset-inline-end: auto; bottom: 8px; font-size: 11px; }
  #dashboard .dashboard-visual-grid {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
  }
  #dashboard .dashboard-visual-panel { min-height: 242px; padding: 14px; border-radius: 16px; }
  #dashboard .dashboard-alerts { grid-column: 1; grid-row: 3; align-self: stretch; margin: 0; }
  #dashboard .dashboard-activity-grid {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
    gap: 14px;
    margin: 0;
  }
  #dashboard .dashboard-modon-today { grid-column: 1 / -1; grid-row: 4; margin: 0; }
}

@media (max-width: 1200px) {
  #dashboard { direction: rtl; display: flex; flex-direction: column; gap: 14px; }
  #dashboard .dashboard-command-header { display: none; }
  #dashboard .dashboard-quick-actions { order: 1; width: 100%; }
  #dashboard .dashboard-insights { order: 2; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard .dashboard-visual-grid { order: 3; width: 100%; }
  #dashboard .dashboard-alerts { order: 4; width: 100%; }
  #dashboard .dashboard-activity-grid { order: 5; width: 100%; }
  #dashboard .dashboard-modon-today { order: 6; width: 100%; }
}

@media (max-width: 620px) {
  #dashboard .dashboard-insights,
  #dashboard .dashboard-visual-grid,
  #dashboard .dashboard-activity-grid { grid-template-columns: 1fr; }
}

/* Keep the desktop summary rail compact like the visual reference. */
@media (min-width: 1201px) {
  #dashboard .dashboard-insights {
    align-self: start;
    grid-auto-rows: 64px;
  }

  #dashboard .dashboard-insight-card {
    height: 64px;
    min-height: 64px !important;
    box-sizing: border-box;
    align-content: center;
    row-gap: 2px;
  }

  #dashboard .dashboard-insight-card strong {
    font-size: 18px;
  }
}

/* A dashboard layout must only render while the dashboard view is active. */
#dashboard.view {
  display: none;
}

@media (min-width: 1201px) {
  #dashboard.view.active {
    display: grid;
  }
}

@media (max-width: 1200px) {
  #dashboard.view.active {
    display: flex;
  }
}

/* Dashboard readability: one icon per action and legible desktop labels. */
#dashboard .dashboard-quick-icon {
  width: 60px;
  height: 60px;
  font-size: 0 !important;
  overflow: hidden;
}

#dashboard .dashboard-quick-icon::before {
  display: block;
  font-size: 30px;
  line-height: 1;
}

#dashboard .dashboard-quick-card strong {
  font-size: 18px;
  line-height: 1.35;
}

#dashboard .dashboard-quick-card small {
  font-size: 13.5px;
  line-height: 1.55;
}

@media (min-width: 1201px) {
  #dashboard .dashboard-insights {
    grid-auto-rows: 84px;
  }

  #dashboard .dashboard-insight-card {
    height: 84px;
    min-height: 84px !important;
    padding-block: 9px;
    row-gap: 3px;
  }

  #dashboard .dashboard-insight-card::after {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  #dashboard .dashboard-insight-card span {
    font-size: 13px;
  }

  #dashboard .dashboard-insight-card strong {
    font-size: 22px;
  }

  #dashboard .dashboard-insight-card small {
    font-size: 12px;
  }

  #dashboard .dashboard-alerts {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    padding: 14px;
  }

  #dashboard .dashboard-alert-card {
    width: 100%;
    min-height: 86px;
    padding: 14px 16px;
  }

  #dashboard .dashboard-alert-card span,
  #dashboard .dashboard-alert-card small {
    font-size: 12px;
  }

  #dashboard .dashboard-alert-card strong {
    font-size: 21px;
  }
}

/* Full Modon return statement: totals, match source and review reason. */
.carrier-return-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.carrier-return-scope > span {
  display: flex;
  min-width: 0;
  flex: 1 1 125px;
  gap: 6px;
  align-items: baseline;
  justify-content: center;
  padding: 8px 11px;
  border: 0;
  border-radius: 8px;
  background: #f4f8f6;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

.carrier-return-scope > span:first-child {
  flex: 1.35 1 170px;
  background: #eaf5f1;
  color: #0b6f56;
}

.carrier-return-scope strong {
  color: #173f36;
  font-size: 17px;
}

.return-match-reason {
  display: block;
  max-width: 230px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  white-space: normal;
}

.carrier-return-table table {
  min-width: 1080px;
}

@media (min-width: 1181px) {
  .carrier-return-head {
    grid-template-columns: minmax(210px, 1fr) 145px minmax(390px, 1.15fr) minmax(235px, auto);
  }
}

@media (max-width: 1180px) {
  .carrier-return-scope {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .carrier-return-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carrier-return-scope > span,
  .carrier-return-scope > span:first-child {
    min-width: 0;
    white-space: normal;
  }

  .carrier-return-table table {
    min-width: 0;
  }

  .return-match-reason {
    max-width: none;
  }
}

/* Returns center V4 — final page composition. */
#modonReturns {
  --return-ink: #153b32;
  --return-soft: #f3f7f5;
  --return-line: #dce7e3;
}

#modonReturns .modon-return-hero {
  min-height: 150px;
  align-items: center;
  padding: 24px 28px;
  border-radius: 18px;
  background: linear-gradient(130deg, #0d5848 0%, #123f39 64%, #173832 100%);
}

.modon-return-hero-actions {
  display: flex;
  min-width: 250px;
  flex-direction: column;
  gap: 10px;
}

.modon-return-hero-actions .modon-suite-state {
  width: 100%;
  box-sizing: border-box;
}

.modon-return-hero-actions > button {
  width: 100%;
  min-height: 44px;
  border-color: #fff;
  background: #fff;
  color: #0b674f;
  font-weight: 900;
}

#modonReturns .modon-returns-workspace {
  grid-template-columns: minmax(280px, .52fr) minmax(0, 1.48fr);
  gap: 18px;
  margin-top: 18px;
}

#modonReturns .modon-return-scan-panel,
#modonReturns .modon-return-list-panel {
  overflow: hidden;
  border: 1px solid var(--return-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17, 55, 46, .055);
}

#modonReturns .modon-return-scan-panel {
  padding: 0 16px 16px;
}

#modonReturns .modon-return-list-panel {
  padding: 0 14px 16px;
}

#modonReturns .modon-return-scan-panel > .panel-head,
#modonReturns .modon-return-list-panel > .panel-head {
  margin: 0 -16px 14px;
  padding: 17px 19px;
  border-bottom: 1px solid var(--return-line);
  border-radius: 0;
  background: #f8fbfa;
  color: var(--return-ink);
}

#modonReturns .modon-return-list-panel > .panel-head {
  margin-inline: -14px;
}

#modonReturns .panel-head .eyebrow {
  color: #0b7b5e;
}

#modonReturns .panel-head .hint {
  color: #71817c;
}

.return-status-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 4px 0 14px;
}

.return-status-guide > div {
  display: flex;
  min-height: 64px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--return-line);
  border-radius: 11px;
  background: #fbfdfc;
}

.return-status-guide i {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  background: #e5f3ee;
  color: #0d755a;
  font-style: normal;
  font-weight: 900;
}

.return-status-guide .review i {
  background: #fff0e2;
  color: #a86113;
}

.return-status-guide strong,
.return-status-guide small {
  display: block;
}

.return-status-guide strong {
  color: var(--return-ink);
  font-size: 12px;
}

.return-status-guide small {
  margin-top: 3px;
  color: #788882;
  font-size: 9px;
  line-height: 1.45;
}

#modonReturns #returnInvoiceSummary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

#modonReturns #returnInvoiceSummary .metric {
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--return-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}

#modonReturns #returnInvoiceSummary .metric strong,
#modonReturns #returnInvoiceSummary .metric b {
  font-size: 21px;
}

#modonReturns #returnInvoiceList {
  gap: 12px;
  margin-top: 12px;
}

.return-review-banner,
.return-clear-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 13px 15px;
  border: 1px solid #efd9bd;
  border-radius: 11px;
  background: #fff9f1;
}

.return-review-banner.finance {
  border-color: #efc7c3;
  background: #fff5f4;
}

.return-match-reason.finance {
  color: #9c352f;
  font-weight: 800;
}

.return-review-banner strong,
.return-review-banner small,
.return-clear-banner strong,
.return-clear-banner small {
  display: block;
}

.return-review-banner strong,
.return-clear-banner strong {
  color: var(--return-ink);
  font-size: 13px;
}

.return-review-banner small,
.return-clear-banner small {
  margin-top: 3px;
  color: #78857f;
  font-size: 10px;
}

.return-review-counts {
  display: flex;
  gap: 7px;
}

.return-review-counts span {
  padding: 7px 10px;
  border-radius: 8px;
  background: #fff;
  color: #7b5a33;
  font-size: 10px;
  white-space: nowrap;
}

.return-review-counts b {
  margin-inline-start: 5px;
  color: #9b5a0c;
  font-size: 15px;
}

.return-clear-banner {
  justify-content: flex-start;
  border-color: #cfe6dc;
  background: #f1faf6;
}

.return-clear-banner > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #dcefe7;
  color: #087052;
  font-weight: 900;
}

#modonReturns .carrier-return-card {
  border-radius: 12px;
  box-shadow: none;
}

#modonReturns .carrier-return-head {
  padding: 16px 18px 12px;
}

#modonReturns .carrier-return-table {
  border-top: 1px solid var(--return-line);
}

@media (max-width: 1250px) {
  #modonReturns .modon-returns-workspace {
    grid-template-columns: 1fr;
  }

  #modonReturns .modon-return-scan-panel {
    position: static;
  }
}

@media (max-width: 900px) {
  #modonReturns #returnInvoiceSummary,
  .return-status-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #modonReturns .modon-return-hero {
    min-height: 0;
    padding: 20px;
  }

  .modon-return-hero-actions {
    width: 100%;
    min-width: 0;
  }

  #modonReturns #returnInvoiceSummary,
  .return-status-guide {
    grid-template-columns: 1fr;
  }

  .return-review-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .return-review-counts {
    width: 100%;
  }

  .return-review-counts span {
    flex: 1;
    text-align: center;
  }
}

/* ========================================================================== */
/* Modon hub v2 — isolated workspace design                                   */
/* Keep this block last: the hub is intentionally independent of legacy       */
/* Modon screens and must never restyle accounting, invoices, or stock views. */
/* ========================================================================== */

#modonFollow {
  --modon-hub-green-950: #073c32;
  --modon-hub-green-900: #084a3c;
  --modon-hub-green-800: #0b5f4c;
  --modon-hub-green-700: #0d755d;
  --modon-hub-green-100: #dff3ec;
  --modon-hub-green-50: #f1faf6;
  --modon-hub-blue-700: #225f93;
  --modon-hub-blue-100: #e1effa;
  --modon-hub-blue-50: #f2f8fd;
  --modon-hub-amber-700: #a6600b;
  --modon-hub-amber-100: #f8e8cf;
  --modon-hub-amber-50: #fff9ef;
  --modon-hub-red-700: #b43a3a;
  --modon-hub-red-100: #f7dddd;
  --modon-hub-red-50: #fff5f5;
  --modon-hub-ink: #142b25;
  --modon-hub-muted: #667a73;
  --modon-hub-line: #d8e4df;
  --modon-hub-line-strong: #c6d8d1;
  --modon-hub-surface: #ffffff;
  --modon-hub-canvas: #f3f7f5;
  --modon-hub-shadow: 0 12px 34px rgba(15, 69, 54, 0.08);
  --modon-hub-shadow-hover: 0 16px 38px rgba(15, 69, 54, 0.13);
  min-width: 0;
  color: var(--modon-hub-ink);
  font-size: 16px;
  line-height: 1.55;
}

#modonFollow :where(.modon-hub-header, .modon-hub-tabs, .modon-hub-panel) {
  box-sizing: border-box;
}

#modonFollow :where(.modon-hub-header, .modon-hub-panel) * {
  box-sizing: border-box;
}

/* Header */

#modonFollow .modon-hub-header {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 20px;
  margin-bottom: 16px;
  padding: 26px 28px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% -10%, rgba(104, 212, 171, 0.25), transparent 35%),
    linear-gradient(135deg, var(--modon-hub-green-950) 0%, var(--modon-hub-green-800) 62%, #0b5147 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(6, 57, 45, 0.18);
}

#modonFollow .modon-hub-header::after {
  position: absolute;
  z-index: -1;
  inset: auto auto -95px -75px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
}

#modonFollow .modon-hub-header-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(380px, 1fr) auto;
  gap: 22px;
  align-items: center;
}

#modonFollow .modon-hub-brand {
  min-width: 0;
}

#modonFollow .modon-hub-brand :where(.eyebrow, .kicker, > small:first-child) {
  display: block;
  margin-bottom: 5px;
  color: #99e5c9;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

#modonFollow .modon-hub-brand :where(h1, h2) {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 2vw, 31px);
  font-weight: 900;
  line-height: 1.25;
}

#modonFollow .modon-hub-brand p {
  max-width: 720px;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

#modonFollow .modon-hub-header-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(105px, 1fr));
  gap: 8px;
  min-width: 0;
}

#modonFollow .modon-hub-header-stats > :where(div, article, button) {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 76px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
  text-align: start;
  box-shadow: none;
}

#modonFollow .modon-hub-header-stats :where(span, small) {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modonFollow .modon-hub-header-stats :where(strong, b) {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modonFollow .modon-hub-header-actions {
  display: flex;
  gap: 9px;
  align-items: stretch;
  justify-content: flex-end;
}

#modonFollow .modon-hub-header-actions > div {
  display: grid;
  align-content: center;
  min-width: 155px;
}

#modonFollow .modon-hub-header-actions > div span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}

#modonFollow .modon-hub-header-actions > div strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

#modonFollow .modon-hub-header-actions button,
#modonFollow .modon-hub-refresh {
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  background: #fff;
  color: var(--modon-hub-green-900);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 9px 24px rgba(3, 38, 30, 0.2);
}

#modonFollow .modon-hub-header-actions button:hover,
#modonFollow .modon-hub-refresh:hover {
  border-color: #fff;
  background: #f1fff9;
  transform: translateY(-1px);
}

#modonFollow .modon-hub-header-actions button:disabled,
#modonFollow .modon-hub-refresh:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

/* One clear progress component for the entire hub refresh. */

#modonFollow :where(.modon-hub-progress, .modon-center-progress) {
  display: grid;
  gap: 9px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 13px;
  background: rgba(1, 31, 24, 0.25);
  color: #fff;
  box-shadow: none;
}

#modonFollow :where(.modon-hub-progress, .modon-center-progress).hidden {
  display: none;
}

#modonFollow :where(.modon-hub-progress-head, .modon-center-progress > div:first-child) {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

#modonFollow :where(.modon-hub-progress-head, .modon-center-progress > div:first-child) strong {
  order: 2;
  flex: 0 0 auto;
  color: #fff;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

#modonFollow :where(.modon-hub-progress-head, .modon-center-progress > div:first-child) span {
  min-width: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

#modonFollow :where(.modon-hub-progress-track, .modon-center-progress-track) {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.17);
}

#modonFollow :where(.modon-hub-progress-track, .modon-center-progress-track) > :where(i, span) {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ce1b5, #d9fff0);
  transition: width 240ms ease;
}

#modonFollow :where(.modon-hub-progress, .modon-center-progress) > small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

#modonFollow :where(.modon-hub-progress, .modon-center-progress).failed {
  border-color: rgba(255, 190, 190, 0.44);
  background: rgba(112, 22, 22, 0.35);
}

/* Main navigation: five sections, one visible panel at a time. */

#modonFollow .modon-hub-tabs,
#modonFollow #modonHubTabs {
  position: sticky;
  z-index: 8;
  top: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(135px, 1fr));
  gap: 6px;
  margin: 0 0 16px;
  padding: 7px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(14, 59, 48, 0.08);
  backdrop-filter: blur(12px);
}

#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button {
  min-width: 0;
  min-height: 49px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #5b7069;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: none;
}

#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button:hover {
  border-color: #d8e7e1;
  background: #f3f8f6;
  color: var(--modon-hub-green-800);
}

#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button.active,
#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button[aria-selected="true"] {
  border-color: var(--modon-hub-green-800);
  background: var(--modon-hub-green-800);
  color: #fff;
  box-shadow: 0 8px 18px rgba(13, 117, 93, 0.2);
}

#modonFollow .modon-hub-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 18px;
  background: var(--modon-hub-surface);
  box-shadow: var(--modon-hub-shadow);
}

#modonFollow .modon-hub-panel[hidden] {
  display: none !important;
}

#modonFollow .modon-hub-panel:not([hidden]) {
  animation: modon-hub-panel-in 180ms ease both;
}

@keyframes modon-hub-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Overview */

#modonFollow .modon-hub-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: 18px;
  align-items: start;
}

#modonFollow .modon-hub-overview-grid > * {
  min-width: 0;
}

#modonFollow .modon-hub-section-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--modon-hub-line);
}

#modonFollow .modon-hub-section-head > div {
  min-width: 0;
}

#modonFollow .modon-hub-section-head :where(.eyebrow, > div > span:first-child) {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--modon-hub-green-700);
  font-size: 11px;
  font-weight: 900;
}

#modonFollow .modon-hub-section-head :where(h2, h3) {
  margin: 0;
  color: var(--modon-hub-ink);
  font-size: clamp(21px, 1.8vw, 25px);
  line-height: 1.3;
}

#modonFollow .modon-hub-section-head p {
  max-width: 800px;
  margin: 5px 0 0;
  color: var(--modon-hub-muted);
  font-size: 13px;
}

#modonFollow .modon-hub-section-head > :where(button, a) {
  min-height: 42px;
  flex: 0 0 auto;
  padding-inline: 16px;
  border-color: var(--modon-hub-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--modon-hub-green-800);
  font-size: 13px;
  font-weight: 800;
}

#modonFollow .modon-hub-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

#modonFollow .modon-hub-metrics > :where(article, div, button, a),
#modonFollow .modon-hub-metric {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 132px;
  padding: 17px 17px 15px;
  overflow: hidden;
  border: 1px solid var(--modon-hub-line);
  border-radius: 14px;
  background: #fff;
  color: var(--modon-hub-ink);
  text-align: start;
  box-shadow: 0 7px 20px rgba(19, 67, 55, 0.055);
}

#modonFollow .modon-hub-metrics > :where(article, div, button, a)::before,
#modonFollow .modon-hub-metric::before {
  position: absolute;
  inset-block: 15px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--modon-hub-green-700);
  content: "";
}

[dir="rtl"] #modonFollow .modon-hub-metrics > :where(article, div, button, a)::before,
[dir="rtl"] #modonFollow .modon-hub-metric::before {
  border-radius: 999px 0 0 999px;
}

#modonFollow .modon-hub-metrics > :where(button, a):hover,
#modonFollow :where(button, a).modon-hub-metric:hover {
  border-color: #bcd7cd;
  box-shadow: var(--modon-hub-shadow-hover);
  transform: translateY(-2px);
}

#modonFollow :where(.modon-hub-metric, .modon-hub-metrics > *) :where(.label, > span:first-child, > small:first-child) {
  display: block;
  color: var(--modon-hub-muted);
  font-size: 12px;
  font-weight: 700;
}

#modonFollow :where(.modon-hub-metric, .modon-hub-metrics > *) :where(.value, > strong, > b) {
  display: block;
  margin-top: 8px;
  color: var(--modon-hub-ink);
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#modonFollow :where(.modon-hub-metric, .modon-hub-metrics > *) :where(.note, > small:last-child) {
  display: block;
  margin-top: 8px;
  color: #7a8b85;
  font-size: 11px;
}

#modonFollow :where(.modon-hub-metric, .modon-hub-metrics > *).is-info::before {
  background: var(--modon-hub-blue-700);
}

#modonFollow :where(.modon-hub-metric, .modon-hub-metrics > *).is-warning::before {
  background: var(--modon-hub-amber-700);
}

#modonFollow :where(.modon-hub-metric, .modon-hub-metrics > *).is-danger::before {
  background: var(--modon-hub-red-700);
}

#modonFollow :where(.modon-hub-metric, .modon-hub-metrics > *).is-success {
  border-color: #bcded1;
  background: var(--modon-hub-green-50);
}

#modonFollow .modon-hub-action-queue {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#modonFollow .modon-hub-action-queue > :where(article, div, button, a),
#modonFollow .modon-hub-priority {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 14px 15px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 12px;
  background: #fff;
  color: var(--modon-hub-ink);
  text-align: start;
  box-shadow: none;
}

#modonFollow .modon-hub-action-queue > :where(button, a):hover,
#modonFollow :where(button, a).modon-hub-priority:hover {
  border-color: #bcd7cd;
  background: #f8fbfa;
  transform: none;
}

#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *) :where(h3, strong) {
  display: block;
  margin: 0;
  color: var(--modon-hub-ink);
  font-size: 14px;
  font-weight: 900;
}

#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *) p,
#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *) small {
  display: block;
  margin: 3px 0 0;
  color: var(--modon-hub-muted);
  font-size: 11px;
}

#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *) :where(.count, > b:last-child) {
  display: grid;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  place-items: center;
  border-radius: 11px;
  background: var(--modon-hub-green-100);
  color: var(--modon-hub-green-800);
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *).is-warning {
  border-color: #ecd4af;
  background: var(--modon-hub-amber-50);
}

#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *).is-warning :where(.count, > b:last-child) {
  background: var(--modon-hub-amber-100);
  color: var(--modon-hub-amber-700);
}

#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *).is-danger {
  border-color: #edcaca;
  background: var(--modon-hub-red-50);
}

#modonFollow :where(.modon-hub-priority, .modon-hub-action-queue > *).is-danger :where(.count, > b:last-child) {
  background: var(--modon-hub-red-100);
  color: var(--modon-hub-red-700);
}

/* Toolbars and filters */

#modonFollow .modon-hub-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(150px, 0.75fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 13px;
  background: var(--modon-hub-canvas);
}

#modonFollow .modon-hub-toolbar > * {
  min-width: 0;
}

#modonFollow .modon-hub-toolbar label,
#modonFollow .modon-hub-filter {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #526861;
  font-size: 11px;
  font-weight: 800;
}

#modonFollow .modon-hub-toolbar :where(input, select),
#modonFollow .modon-hub-filter :where(input, select) {
  width: 100%;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--modon-hub-line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--modon-hub-ink);
  font-size: 14px;
  font-weight: 500;
}

#modonFollow .modon-hub-toolbar :where(input, select):focus,
#modonFollow .modon-hub-filter :where(input, select):focus {
  border-color: var(--modon-hub-green-700);
  outline: 3px solid rgba(13, 117, 93, 0.12);
}

#modonFollow .modon-hub-toolbar > button {
  min-height: 44px;
  padding-inline: 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
}

#modonFollow .professional-date-filter {
  grid-template-columns: minmax(145px, 0.85fr) minmax(420px, 2fr) minmax(330px, 1.35fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 13px;
  background: var(--modon-hub-canvas);
  box-shadow: none;
}

#modonFollow .professional-date-filter .date-filter-heading strong {
  color: var(--modon-hub-ink);
  font-size: 13px;
}

#modonFollow .professional-date-filter .date-filter-heading span {
  color: var(--modon-hub-muted);
  font-size: 10px;
}

#modonFollow .professional-date-filter .date-filter-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(85px, 1fr));
  gap: 6px;
}

#modonFollow .professional-date-filter .date-filter-presets button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--modon-hub-line-strong);
  border-radius: 8px;
  background: #fff;
  color: #526861;
  font-size: 12px;
  font-weight: 800;
}

#modonFollow .professional-date-filter .date-filter-presets button.active {
  border-color: var(--modon-hub-green-800);
  background: var(--modon-hub-green-800);
  color: #fff;
  box-shadow: none;
}

#modonFollow .professional-date-filter .date-filter-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: end;
}

#modonFollow .professional-date-filter .date-filter-range label {
  display: grid;
  gap: 4px;
  color: var(--modon-hub-muted);
  font-size: 10px;
  font-weight: 800;
}

#modonFollow .professional-date-filter .date-filter-range input {
  width: 100%;
  min-height: 40px;
  padding-inline: 9px;
  border: 1px solid var(--modon-hub-line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--modon-hub-ink);
  font-size: 12px;
}

/* Tables */

#modonFollow .modon-hub-table {
  width: 100%;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--modon-hub-line);
  border-radius: 13px;
  background: #fff;
}

#modonFollow .modon-hub-table table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: auto;
}

#modonFollow .modon-hub-table :where(th, td) {
  padding: 14px 13px;
  border-bottom: 1px solid var(--modon-hub-line);
  text-align: start;
  vertical-align: middle;
  font-size: 13px;
}

#modonFollow .modon-hub-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #f2f6f4;
  color: #536a62;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

#modonFollow .modon-hub-table td {
  color: var(--modon-hub-ink);
}

#modonFollow .modon-hub-table tbody tr:last-child td {
  border-bottom: 0;
}

#modonFollow .modon-hub-table tbody tr:hover td {
  background: #f8fbfa;
}

#modonFollow .modon-hub-table :where(code, .number, .money) {
  color: var(--modon-hub-green-800);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#modonFollow .modon-hub-table .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#modonFollow .modon-hub-table .actions button {
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

#modonFollow .modon-hub-mobile-card {
  display: none;
}

/* Status language stays consistent across all five hub sections. */

#modonFollow :where(.modon-hub-badge, .modon-hub-status) {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid #cbe3da;
  border-radius: 999px;
  background: var(--modon-hub-green-50);
  color: var(--modon-hub-green-800);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

#modonFollow :where(.modon-hub-badge, .modon-hub-status).is-info {
  border-color: #c7dff0;
  background: var(--modon-hub-blue-50);
  color: var(--modon-hub-blue-700);
}

#modonFollow :where(.modon-hub-badge, .modon-hub-status).is-warning {
  border-color: #ecd6b5;
  background: var(--modon-hub-amber-50);
  color: var(--modon-hub-amber-700);
}

#modonFollow :where(.modon-hub-badge, .modon-hub-status).is-danger {
  border-color: #edc9c9;
  background: var(--modon-hub-red-50);
  color: var(--modon-hub-red-700);
}

/* Empty / loading states */

#modonFollow :where(.modon-hub-empty, .modon-hub-loading) {
  display: grid;
  min-height: 180px;
  padding: 28px;
  place-content: center;
  place-items: center;
  border: 1px dashed #c8dcd4;
  border-radius: 13px;
  background: #f8fbfa;
  color: var(--modon-hub-muted);
  text-align: center;
}

#modonFollow :where(.modon-hub-empty, .modon-hub-loading) strong {
  color: var(--modon-hub-ink);
  font-size: 15px;
}

#modonFollow :where(.modon-hub-empty, .modon-hub-loading) p {
  max-width: 520px;
  margin: 5px 0 0;
  font-size: 12px;
}

/* Existing collection components when rendered inside the unified hub. */

#modonFollow .modon-collection-overview {
  display: grid;
  gap: 14px;
  margin: 0;
}

#modonFollow .collection-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#modonFollow .collection-kpi {
  min-width: 0;
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 13px;
  background: #fff;
  text-align: start;
  box-shadow: 0 7px 20px rgba(19, 67, 55, 0.05);
}

#modonFollow button.collection-kpi:hover {
  border-color: #bcd7cd;
  box-shadow: var(--modon-hub-shadow-hover);
  transform: translateY(-1px);
}

#modonFollow .collection-kpi::before {
  inset-block: 14px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
}

[dir="rtl"] #modonFollow .collection-kpi::before {
  border-radius: 999px 0 0 999px;
}

#modonFollow .collection-kpi span {
  color: var(--modon-hub-muted);
  font-size: 12px;
}

#modonFollow .collection-kpi strong {
  margin-top: 7px;
  color: var(--modon-hub-ink);
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

#modonFollow .collection-kpi small {
  margin-top: 7px;
  color: #7a8b85;
  font-size: 11px;
}

#modonFollow .collection-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(250px, 0.7fr);
  gap: 12px;
  align-items: end;
  padding: 13px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 13px;
  background: var(--modon-hub-canvas);
}

#modonFollow .collection-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 6px;
}

#modonFollow .collection-filter-tabs button {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--modon-hub-line-strong);
  border-radius: 8px;
  background: #fff;
  color: #526861;
  font-size: 12px;
  font-weight: 800;
}

#modonFollow .collection-filter-tabs button.active {
  border-color: var(--modon-hub-green-800);
  background: var(--modon-hub-green-800);
  color: #fff;
}

#modonFollow .collection-search input {
  min-height: 42px;
  border-color: var(--modon-hub-line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

#modonFollow .collection-review-group {
  overflow: hidden;
  border: 1px solid #e9d1ad;
  border-radius: 12px;
  background: var(--modon-hub-amber-50);
}

#modonFollow .collection-review-group.danger {
  border-color: #ebc5c5;
  background: var(--modon-hub-red-50);
}

#modonFollow .collection-review-group > summary {
  min-height: 62px;
  padding: 13px 15px;
}

/* Existing return cards when they are hosted in the unified hub. */

#modonFollow .modon-hub-returns-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.45fr);
  gap: 18px;
  align-items: start;
}

#modonFollow .modon-hub-returns-grid > * {
  min-width: 0;
}

#modonFollow .carrier-return-card {
  overflow: hidden;
  border: 1px solid var(--modon-hub-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(19, 67, 55, 0.06);
}

#modonFollow .carrier-return-card::before {
  width: 4px;
  background: var(--modon-hub-green-700);
}

#modonFollow .carrier-return-head {
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) minmax(145px, 0.55fr) minmax(230px, 0.9fr);
  gap: 16px;
  align-items: center;
  padding: 17px 18px;
  background: #fbfdfc;
}

#modonFollow .carrier-return-identity h3 {
  margin: 4px 0;
  color: var(--modon-hub-ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}

#modonFollow .carrier-return-identity :where(code, p) {
  color: var(--modon-hub-muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

#modonFollow .carrier-return-progress {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 10px;
  background: #fff;
}

#modonFollow .carrier-return-progress-bar {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: #e3ede9;
}

#modonFollow .carrier-return-progress-bar i {
  border-radius: inherit;
  background: var(--modon-hub-green-700);
}

#modonFollow .carrier-return-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#modonFollow .carrier-return-actions button {
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
}

#modonFollow .carrier-return-scope {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 7px;
  padding: 12px 18px;
  border-top: 1px solid var(--modon-hub-line);
  background: #fff;
}

#modonFollow .carrier-return-scope > span {
  min-height: 60px;
  padding: 9px 10px;
  border: 1px solid var(--modon-hub-line);
  border-radius: 9px;
  background: #f8fbfa;
}

#modonFollow .carrier-return-table {
  overflow: auto;
  border-top: 1px solid var(--modon-hub-line);
}

#modonFollow .carrier-return-table table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

#modonFollow .carrier-return-table :where(th, td) {
  padding: 13px 12px;
  border-bottom: 1px solid var(--modon-hub-line);
  text-align: start;
  font-size: 12px;
}

#modonFollow .carrier-return-table th {
  background: #f2f6f4;
  color: #536a62;
  font-size: 11px;
  font-weight: 900;
}

/* Large tablets */

@media (max-width: 1280px) {
  #modonFollow .modon-hub-header-main {
    grid-template-columns: minmax(300px, 1fr) minmax(380px, 1fr);
  }

  #modonFollow .modon-hub-header-actions {
    grid-column: 1 / -1;
  }

  #modonFollow .modon-hub-header-actions button,
  #modonFollow .modon-hub-refresh {
    flex: 1;
  }

  #modonFollow .modon-hub-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #modonFollow .modon-hub-toolbar {
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 0.75fr));
  }

  #modonFollow .modon-hub-toolbar > button,
  #modonFollow .modon-hub-toolbar > :nth-child(n + 4) {
    grid-column: auto;
  }

  #modonFollow .professional-date-filter {
    grid-template-columns: 1fr 2.2fr;
  }

  #modonFollow .professional-date-filter .date-filter-range {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1040px) {
  #modonFollow .modon-hub-overview-grid {
    grid-template-columns: 1fr;
  }

  #modonFollow .modon-hub-tabs,
  #modonFollow #modonHubTabs {
    grid-template-columns: repeat(5, minmax(125px, 1fr));
    overflow-x: auto;
    scrollbar-width: thin;
  }

  #modonFollow .collection-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #modonFollow .collection-toolbar {
    grid-template-columns: 1fr;
  }

  #modonFollow .carrier-return-head {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  }

  #modonFollow .carrier-return-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  #modonFollow .carrier-return-actions button {
    flex: 1;
  }

  #modonFollow .carrier-return-scope {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }
}

/* Mobile — cards, no cutoff, and one sticky scrollable section bar. */

@media (max-width: 760px) {
  #modonFollow {
    font-size: 15px;
  }

  #modonFollow .modon-hub-header {
    gap: 15px;
    margin-inline: 0;
    padding: 20px 16px 17px;
    border-radius: 15px;
  }

  #modonFollow .modon-hub-header-main {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  #modonFollow .modon-hub-brand :where(h1, h2) {
    font-size: 24px;
  }

  #modonFollow .modon-hub-brand p {
    font-size: 13px;
  }

  #modonFollow .modon-hub-header-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #modonFollow .modon-hub-header-stats > :where(div, article, button) {
    min-height: 70px;
    padding: 10px 11px;
  }

  #modonFollow .modon-hub-header-stats > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  #modonFollow .modon-hub-header-actions {
    display: grid;
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  #modonFollow .modon-hub-header-actions button,
  #modonFollow .modon-hub-refresh {
    width: 100%;
    min-height: 50px;
  }

  #modonFollow :where(.modon-hub-progress-head, .modon-center-progress > div:first-child) {
    align-items: flex-start;
  }

  #modonFollow :where(.modon-hub-progress, .modon-center-progress) {
    padding: 13px;
  }

  #modonFollow .modon-hub-tabs,
  #modonFollow #modonHubTabs {
    top: 0;
    display: flex;
    gap: 6px;
    margin-inline: -1px;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: 12px;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }

  #modonFollow :where(.modon-hub-tabs, #modonHubTabs) button {
    min-width: 128px;
    min-height: 46px;
    flex: 0 0 auto;
    padding: 9px 12px;
    font-size: 13px;
    scroll-snap-align: start;
  }

  #modonFollow .modon-hub-panel {
    padding: 16px 13px;
    border-radius: 14px;
  }

  #modonFollow .modon-hub-returns-grid {
    grid-template-columns: 1fr;
  }

  #modonFollow .modon-hub-section-head {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 13px;
    padding-bottom: 12px;
  }

  #modonFollow .modon-hub-section-head :where(h2, h3) {
    font-size: 21px;
  }

  #modonFollow .modon-hub-section-head > :where(button, a) {
    width: 100%;
  }

  #modonFollow .modon-hub-overview-grid,
  #modonFollow .modon-hub-metrics,
  #modonFollow .collection-kpis {
    grid-template-columns: 1fr;
  }

  #modonFollow .modon-hub-metrics > :where(article, div, button, a),
  #modonFollow .modon-hub-metric {
    min-height: 112px;
    padding: 15px;
  }

  #modonFollow .modon-hub-action-queue > :where(article, div, button, a),
  #modonFollow .modon-hub-priority {
    min-height: 74px;
    padding: 12px;
  }

  #modonFollow .modon-hub-toolbar {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  #modonFollow .modon-hub-toolbar > *,
  #modonFollow .modon-hub-toolbar > :nth-child(n) {
    grid-column: 1;
  }

  #modonFollow .modon-hub-toolbar > button {
    width: 100%;
  }

  #modonFollow .professional-date-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  #modonFollow .professional-date-filter :where(.date-filter-heading, .date-filter-presets, .date-filter-range) {
    grid-column: 1;
  }

  #modonFollow .professional-date-filter .date-filter-presets {
    display: flex;
    gap: 6px;
    padding-bottom: 2px;
    overflow-x: auto;
    scroll-snap-type: inline proximity;
  }

  #modonFollow .professional-date-filter .date-filter-presets button {
    min-width: 105px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  #modonFollow .professional-date-filter .date-filter-range {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #modonFollow .professional-date-filter .date-filter-range > span {
    display: none;
  }

  #modonFollow .modon-hub-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #modonFollow .modon-hub-table table,
  #modonFollow .modon-hub-table tbody,
  #modonFollow .modon-hub-table tr,
  #modonFollow .modon-hub-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #modonFollow .modon-hub-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  #modonFollow .modon-hub-table tbody {
    display: grid;
    gap: 11px;
  }

  #modonFollow .modon-hub-table tr {
    overflow: hidden;
    border: 1px solid var(--modon-hub-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(19, 67, 55, 0.05);
  }

  #modonFollow .modon-hub-table td {
    display: grid;
    grid-template-columns: minmax(95px, 0.75fr) minmax(0, 1.25fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-bottom: 1px solid var(--modon-hub-line);
    background: #fff;
    text-align: end;
    overflow-wrap: anywhere;
  }

  #modonFollow .modon-hub-table td::before {
    color: var(--modon-hub-muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 900;
    text-align: start;
  }

  #modonFollow .modon-hub-table td:last-child {
    border-bottom: 0;
  }

  #modonFollow .modon-hub-table tbody tr:hover td {
    background: #fff;
  }

  #modonFollow .modon-hub-table .actions {
    justify-content: flex-end;
  }

  #modonFollow .modon-hub-table .actions button {
    flex: 1;
  }

  #modonFollow .modon-hub-mobile-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--modon-hub-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(19, 67, 55, 0.05);
  }

  #modonFollow .collection-toolbar {
    padding: 12px;
  }

  #modonFollow .collection-filter-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  #modonFollow .collection-filter-tabs button {
    min-width: 115px;
    flex: 0 0 auto;
  }

  #modonFollow .carrier-return-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px 13px;
  }

  #modonFollow .carrier-return-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
  }

  #modonFollow .carrier-return-actions button {
    width: 100%;
  }

  #modonFollow .carrier-return-scope {
    grid-template-columns: 1fr;
    padding: 12px 13px;
  }

  #modonFollow .carrier-return-table {
    overflow: visible;
  }

  #modonFollow .carrier-return-table table,
  #modonFollow .carrier-return-table tbody,
  #modonFollow .carrier-return-table tr,
  #modonFollow .carrier-return-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #modonFollow .carrier-return-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  #modonFollow .carrier-return-table tbody {
    display: grid;
    gap: 8px;
    padding: 10px 12px 13px;
  }

  #modonFollow .carrier-return-table tr {
    overflow: hidden;
    border: 1px solid var(--modon-hub-line);
    border-radius: 10px;
    background: #fff;
  }

  #modonFollow .carrier-return-table td {
    display: grid;
    grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1.3fr);
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--modon-hub-line);
    text-align: end;
    overflow-wrap: anywhere;
  }

  #modonFollow .carrier-return-table td::before {
    color: var(--modon-hub-muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 900;
    text-align: start;
  }

  #modonFollow .carrier-return-table td:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 430px) {
  #modonFollow .modon-hub-header-stats {
    grid-template-columns: 1fr;
  }

  #modonFollow .modon-hub-header-stats > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  #modonFollow .modon-hub-panel {
    padding-inline: 11px;
  }

  #modonFollow .modon-hub-table td,
  #modonFollow .carrier-return-table td {
    grid-template-columns: minmax(78px, 0.65fr) minmax(0, 1.35fr);
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #modonFollow .modon-hub-panel:not([hidden]) {
    animation: none;
  }

  #modonFollow :where(.modon-hub-progress-track, .modon-center-progress-track) > :where(i, span),
  #modonFollow :where(button, a) {
    transition: none;
  }
}

/* Modon center v10: unified controls, order drawer, and inspectable audit */
#modonFollow .modon-hub-header-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.85fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

#modonFollow .modon-hub-header-controls label {
  display: grid;
  gap: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
}

#modonFollow .modon-hub-header-controls select {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.28);
  background: #fff;
  color: #143b34;
}

#modonFollow .modon-hub-header-controls .primary {
  min-height: 42px;
  padding-inline: 24px;
  background: #fff;
  color: #075b49;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

#modonFollow .modon-audit-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-block: 14px;
}

#modonFollow .modon-audit-metric {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid #d8e7e2;
  border-radius: 13px;
  background: #fff;
  text-align: start;
  color: #183d36;
}

#modonFollow .modon-audit-metric:hover,
#modonFollow .modon-audit-metric.active {
  border-color: #14866d;
  background: #eef9f5;
  box-shadow: 0 10px 24px rgba(11, 104, 83, 0.1);
}

#modonFollow .modon-audit-metric strong {
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1;
}

#modonFollow .modon-audit-metric small {
  color: #71817d;
}

#modonFollow .modon-audit-breakdown {
  overflow: hidden;
  border: 1px solid #d8e7e2;
  border-radius: 14px;
  background: #fff;
}

#modonFollow .modon-audit-breakdown-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #e4eeeb;
  background: #f7fbfa;
}

#modonFollow .modon-audit-breakdown-list {
  display: grid;
  max-height: 520px;
  overflow: auto;
}

#modonFollow .modon-audit-breakdown-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(210px, 1.35fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #edf2f0;
}

#modonFollow .modon-audit-breakdown-row:last-child {
  border-bottom: 0;
}

#modonFollow .modon-audit-breakdown-row small {
  color: #71817d;
}

.modon-order-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: rgba(5, 30, 25, 0.48);
  backdrop-filter: blur(2px);
}

.modon-order-drawer {
  position: fixed;
  z-index: 1160;
  inset-block: 0;
  left: 0;
  width: min(520px, 94vw);
  display: grid;
  grid-template-rows: auto 1fr;
  background: #f7faf9;
  box-shadow: 24px 0 60px rgba(4, 39, 32, 0.22);
  transform: translateX(-105%);
  transition: transform 180ms ease;
}

.modon-order-drawer.open {
  transform: translateX(0);
}

.modon-order-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid #dce8e4;
  background: #fff;
}

.modon-order-drawer-head h2,
.modon-order-drawer-head p {
  margin: 0;
}

.modon-order-drawer-body {
  overflow: auto;
  padding: 18px;
}

.modon-order-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.modon-order-file-grid > div {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid #dfe9e6;
  border-radius: 11px;
  background: #fff;
}

.modon-order-file-grid span {
  color: #71817d;
  font-size: 11px;
}

.modon-order-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #dfe9e6;
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 1040px) {
  #modonFollow .modon-hub-header-controls {
    grid-column: 1 / -1;
  }

  #modonFollow .modon-audit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #modonFollow .modon-hub-header-controls {
    grid-template-columns: 1fr;
  }

  #modonFollow .modon-audit-metrics,
  .modon-order-file-grid {
    grid-template-columns: 1fr;
  }

  #modonFollow .modon-audit-breakdown-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .modon-order-drawer {
    inset-inline: 0;
    width: 100%;
  }
}


/* DEPLOY TEST: login button blue */
#loginForm button.primary {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}
#loginForm button.primary:hover {
  background: #1e40af !important;
  border-color: #1e40af !important;
}

/* ========================================================================== */
/* Modon hub v11 — subtle declutter polish (safe, additive, reversible)       */
/* Scoped to #modonFollow only. Reuses the hub tokens so nothing else in the  */
/* app is affected. Deliberately limited to spacing, corner radius and shadow */
/* softening — it does NOT override the hub's existing colour/emphasis        */
/* decisions. Structure and class names are untouched, so the render          */
/* functions keep working exactly as before. Remove this block to revert.     */
/* ========================================================================== */

/* Softer, more modern card corners + shadows across collection & returns */
#modonFollow .collection-kpi,
#modonFollow .modon-hub-panel .panel {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 69, 54, 0.06);
}

/* Rounded accent rail on the KPI tiles (matches the softer corners) */
#modonFollow .collection-kpi::before {
  border-radius: 0 4px 4px 0;
}

/* A touch more breathing room in the tab lists (declutter) */
#modonFollow .collection-kpis { gap: 12px; }
#modonFollow #carrierInvoiceList,
#modonFollow #returnInvoiceList { gap: 11px; }
#modonFollow .modon-hub-returns-grid { gap: 14px; }

/* Visible identity: tint each KPI tile by meaning and colour its number, so
   money / attention / settled / external read at a glance instead of four
   identical white cards. */
#modonFollow .collection-kpi.ready {
  background: var(--modon-hub-green-50, #f1faf6);
  border-color: var(--modon-hub-green-100, #dff3ec);
}
#modonFollow .collection-kpi.ready strong { color: var(--modon-hub-green-800, #0b5f4c); }

#modonFollow .collection-kpi.attention {
  background: var(--modon-hub-amber-50, #fff9ef);
  border-color: var(--modon-hub-amber-100, #f8e8cf);
}
#modonFollow .collection-kpi.attention strong { color: var(--modon-hub-amber-700, #a6600b); }

#modonFollow .collection-kpi.settled {
  background: var(--modon-hub-blue-50, #f2f8fd);
  border-color: var(--modon-hub-blue-100, #e1effa);
}
#modonFollow .collection-kpi.settled strong { color: var(--modon-hub-blue-700, #225f93); }

#modonFollow .collection-kpi.external {
  background: #f6f8f7;
}

/* Make the accent rail read as a full-height colour band, not a hairline */
#modonFollow .collection-kpi::before { width: 6px; }

/* --- Overview metric tiles: same semantic language as the collection KPIs --- */
#modonFollow #modonHubOverviewMetrics .modon-command-kpi {
  min-height: 96px;
  border-radius: 14px;
  padding: 15px 16px;
  box-shadow: 0 10px 28px rgba(15, 69, 54, 0.05);
}
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.primary {
  background: var(--modon-hub-green-50, #f1faf6);
  border-color: var(--modon-hub-green-100, #dff3ec);
}
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.primary strong { color: var(--modon-hub-green-800, #0b5f4c); }
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.warning {
  background: var(--modon-hub-amber-50, #fff9ef);
  border-color: var(--modon-hub-amber-100, #f8e8cf);
}
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.warning strong { color: var(--modon-hub-amber-700, #a6600b); }
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.danger {
  background: var(--modon-hub-red-50, #fff5f5);
  border-color: var(--modon-hub-red-100, #f7dddd);
}
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.danger strong { color: var(--modon-hub-red-700, #b43a3a); }

/* --- Flow guide → a clean numbered stepper with a connecting spine --- */
#modonFollow .collection-flow-guide {
  background: transparent;
  border: 0;
  padding: 4px 0 0;
  gap: 10px;
}
#modonFollow .collection-flow-guide > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 14px 15px;
  border: 1px solid var(--modon-hub-line, #d8e4df);
  border-radius: 13px;
  background: var(--modon-hub-surface, #fff);
}
#modonFollow .collection-flow-guide i {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 50%;
  background: var(--modon-hub-green-800, #0b5f4c);
  color: #fff;
  font-size: 13px;
}
#modonFollow .collection-flow-guide strong { font-size: 13px; }
#modonFollow .collection-flow-guide small { font-size: 11px; }

/* --- Empty states: calmer, more finished --- */
#modonFollow .modon-command-empty {
  min-height: 132px;
  border-color: var(--modon-hub-line, #d8e4df);
  border-radius: 14px;
  background: var(--modon-hub-green-50, #f1faf6);
}
#modonFollow .modon-command-empty strong { font-size: 13px; }
#modonFollow .modon-command-empty small { font-size: 11px; }

/* ==========================================================================
   Modon hub v12 — REDESIGN FROM SCRATCH
   A new, lighter, calmer identity: white surfaces, generous space, big clear
   figures, green used only as an accent. This block intentionally overrides
   the earlier hub look. Scoped to #modonFollow; markup/JS untouched.
   ========================================================================== */
#modonFollow {
  --m2-canvas: #f5f8f6;
  --m2-surface: #ffffff;
  --m2-ink: #17241f;
  --m2-muted: #6b776f;
  --m2-line: #e7ede9;
  --m2-line-strong: #d6ded8;
  --m2-green: #0e7a5f;
  --m2-green-dark: #0a5c47;
  --m2-green-050: #eef7f3;
  --m2-amber: #b26a12;   --m2-amber-050: #fbf2e1;
  --m2-blue:  #2563a3;   --m2-blue-050:  #eaf1f9;
  --m2-red:   #b4392f;   --m2-red-050:   #fbe8e5;
  --m2-radius: 18px;
  --m2-shadow: 0 8px 26px rgba(20, 50, 40, 0.06);
  background: transparent;
  color: var(--m2-ink);
}

/* ---- Header: flat, light, dark text ---- */
#modonFollow .modon-hub-header {
  padding: 24px 26px;
  border: 1px solid var(--m2-line);
  border-radius: var(--m2-radius);
  background: var(--m2-surface);
  color: var(--m2-ink);
  box-shadow: var(--m2-shadow);
}
#modonFollow .modon-hub-header::after { display: none; }
#modonFollow .modon-hub-brand :where(.eyebrow, .kicker, > small:first-child) {
  color: var(--m2-green);
  letter-spacing: 1px;
}
#modonFollow .modon-hub-brand :where(h1, h2) { color: var(--m2-ink); }
#modonFollow .modon-hub-brand p { color: var(--m2-muted); }

#modonFollow .modon-hub-header-stats > :where(div, article, button) {
  min-height: 72px;
  border: 1px solid var(--m2-line);
  border-radius: 13px;
  background: var(--m2-canvas);
  color: var(--m2-ink);
}
#modonFollow .modon-hub-header-stats :where(span, small) { color: var(--m2-muted); }
#modonFollow .modon-hub-header-stats :where(strong, b) { color: var(--m2-green); }

#modonFollow .modon-hub-header-actions > div span { color: var(--m2-muted); }
#modonFollow .modon-hub-header-actions > div strong { color: var(--m2-ink); }

/* Selects inside the header read as clean light controls */
#modonFollow .modon-hub-header :where(select) {
  border: 1px solid var(--m2-line-strong);
  border-radius: 11px;
  background: var(--m2-surface);
  color: var(--m2-ink);
}

/* Primary actions become solid green on the light header */
#modonFollow .modon-hub-header-actions button,
#modonFollow .modon-hub-refresh {
  min-height: 48px;
  border: 1px solid var(--m2-green);
  border-radius: 12px;
  background: var(--m2-green);
  color: #fff;
  box-shadow: 0 8px 18px rgba(14, 122, 95, 0.22);
}
#modonFollow .modon-hub-header-actions button:hover,
#modonFollow .modon-hub-refresh:hover {
  border-color: var(--m2-green-dark);
  background: var(--m2-green-dark);
}
/* Progress panel on a light ground */
#modonFollow :where(.modon-hub-progress, .modon-center-progress) {
  border: 1px solid var(--m2-line);
  background: var(--m2-canvas);
  color: var(--m2-ink);
}

/* ---- Tabs: simple underline, not a glassy pill box ---- */
#modonFollow .modon-hub-tabs,
#modonFollow #modonHubTabs {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 18px 0 20px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--m2-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button {
  min-height: 0;
  margin-bottom: -2px;
  padding: 13px 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--m2-muted);
  font-size: 15px;
  font-weight: 800;
  box-shadow: none;
}
#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button:hover {
  border-color: transparent transparent var(--m2-line-strong);
  background: transparent;
  color: var(--m2-ink);
}
#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button.active,
#modonFollow :where(.modon-hub-tabs, #modonHubTabs) button[aria-selected="true"] {
  border-color: transparent transparent var(--m2-green);
  background: transparent;
  color: var(--m2-green);
  box-shadow: none;
}

/* ---- Panels: airy white cards ---- */
#modonFollow .modon-hub-panel {
  padding: 24px;
  border: 1px solid var(--m2-line);
  border-radius: var(--m2-radius);
  background: var(--m2-surface);
  box-shadow: var(--m2-shadow);
}

/* ---- v12 KPI cards: clean white, coloured top accent, big figure ---- */
#modonFollow .collection-kpi,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi {
  min-height: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--m2-line);
  border-top: 3px solid var(--m2-line-strong);
  border-radius: 16px;
  background: var(--m2-surface);
  box-shadow: none;
}
#modonFollow .collection-kpi::before { display: none; }
#modonFollow #modonHubOverviewMetrics .modon-command-kpi::after { display: none; }
#modonFollow .collection-kpi strong,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi strong {
  font-size: 30px;
  line-height: 1.05;
  color: var(--m2-ink);
}
/* Semantic accents (top border + figure colour) */
#modonFollow .collection-kpi.ready,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.primary { border-top-color: var(--m2-green); }
#modonFollow .collection-kpi.ready strong,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.primary strong { color: var(--m2-green); }
#modonFollow .collection-kpi.attention,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.warning { border-top-color: var(--m2-amber); }
#modonFollow .collection-kpi.attention strong,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.warning strong { color: var(--m2-amber); }
#modonFollow .collection-kpi.settled { border-top-color: var(--m2-blue); }
#modonFollow .collection-kpi.settled strong { color: var(--m2-blue); }
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.danger { border-top-color: var(--m2-red); }
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.danger strong { color: var(--m2-red); }
#modonFollow .collection-kpi.external { border-top-color: var(--m2-line-strong); background: var(--m2-surface); }

/* ---- v12 flow steps: light chips with green number discs ---- */
#modonFollow .collection-flow-guide > div {
  border: 1px solid var(--m2-line);
  border-radius: 14px;
  background: var(--m2-surface);
}
#modonFollow .collection-flow-guide i { background: var(--m2-green); }

/* ---- v12 empty states ---- */
#modonFollow .modon-command-empty {
  border: 1px dashed var(--m2-line-strong);
  border-radius: 14px;
  background: var(--m2-green-050);
}

/* ---- v12 section headings: a touch larger and calmer ---- */
#modonFollow .modon-hub-section-head :where(.eyebrow, > div > span:first-child) { color: var(--m2-green); }
#modonFollow .modon-hub-section-head :where(h2, h3) { color: var(--m2-ink); font-size: 22px; }
#modonFollow .modon-hub-section-head p { color: var(--m2-muted); }

/* v12: keep the KPI grounds pure white — colour lives in the top accent and
   the figure only, for a cleaner, clearer read than the earlier tinted cards */
#modonFollow .collection-kpi.ready,
#modonFollow .collection-kpi.attention,
#modonFollow .collection-kpi.settled,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.primary,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.warning,
#modonFollow #modonHubOverviewMetrics .modon-command-kpi.danger {
  background: var(--m2-surface);
}

/* ==========================================================================
   Modon hub — "Now" guided screen (single prioritised action list)
   ========================================================================== */
#modonFollow .modon-now-list { display: flex; flex-direction: column; gap: 11px; }
#modonFollow .modon-now-group {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 2px 3px; color: var(--m2-muted, #6b776f);
  font-size: 12px; font-weight: 800; letter-spacing: .4px;
}
#modonFollow .modon-now-group::after { content: ""; flex: 1; height: 1px; background: var(--m2-line, #e7ede9); }
#modonFollow .modon-now-group:first-child { margin-top: 2px; }

#modonFollow .modon-now-action {
  --tone: var(--m2-green, #0e7a5f); --tone-050: var(--m2-green-050, #e9f5f0);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 54px 1fr auto; gap: 15px; align-items: center;
  width: 100%; text-align: start; padding: 16px 18px;
  border: 1px solid var(--m2-line, #e7ede9); border-radius: 16px;
  background: var(--m2-surface, #fff); box-shadow: var(--m2-shadow, 0 8px 26px rgba(20,50,40,.06));
  cursor: pointer; font-family: inherit; color: var(--m2-ink, #16221d); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#modonFollow .modon-now-action:hover { transform: translateY(-2px); border-color: var(--m2-line-strong, #d6ded8); box-shadow: 0 14px 34px rgba(20,50,40,.1); }
#modonFollow .modon-now-action::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--tone); }
#modonFollow .modon-now-action .mna-ic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  font-size: 24px; font-style: normal; background: var(--tone-050); color: var(--tone);
}
#modonFollow .modon-now-action .mna-body { min-width: 0; display: block; }
#modonFollow .modon-now-action .mna-k { display: block; margin-bottom: 3px; color: var(--tone); font-size: 12px; font-weight: 800; }
#modonFollow .modon-now-action .mna-t { display: block; font-size: 17px; font-weight: 750; line-height: 1.3; letter-spacing: -.2px; }
#modonFollow .modon-now-action .mna-s { display: block; margin-top: 4px; color: var(--m2-muted, #6b776f); font-size: 13px; }
#modonFollow .modon-now-action .mna-cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 11px 16px; border-radius: 12px; background: var(--tone); color: #fff; font-size: 13.5px; font-weight: 700;
}
#modonFollow .modon-now-action.money { --tone: var(--m2-green, #0e7a5f); --tone-050: var(--m2-green-050, #e9f5f0); }
#modonFollow .modon-now-action.ret   { --tone: var(--m2-amber, #b5710f); --tone-050: var(--m2-amber-050, #fbf1df); }
#modonFollow .modon-now-action.warn  { --tone: var(--m2-red, #b43a2f);   --tone-050: var(--m2-red-050, #fbe7e4); }
#modonFollow .modon-now-action.prep  { --tone: var(--m2-blue, #245e97);  --tone-050: var(--m2-blue-050, #e9f0f8); }

#modonFollow .modon-now-clear {
  display: flex; align-items: center; gap: 14px; padding: 22px;
  border: 1px solid var(--m2-line, #e7ede9); border-radius: 16px; background: var(--m2-green-050, #e9f5f0);
}
#modonFollow .modon-now-clear .ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--m2-surface, #fff); color: var(--m2-green, #0e7a5f); font-size: 23px; }
#modonFollow .modon-now-clear strong { display: block; font-size: 15.5px; }
#modonFollow .modon-now-clear small { display: block; margin-top: 2px; color: var(--m2-muted, #6b776f); font-size: 13px; }

@media (max-width: 560px) {
  #modonFollow .modon-now-action { grid-template-columns: 46px 1fr; gap: 12px; padding: 14px; }
  #modonFollow .modon-now-action .mna-ic { width: 46px; height: 46px; font-size: 21px; }
  #modonFollow .modon-now-action .mna-cta { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ==========================================================================
   Modon hub — bottom navigation (matches the approved prototype)
   ========================================================================== */
/* The bottom bar replaces the top tab row */
#modonFollow .modon-hub-tabs,
#modonFollow #modonHubTabs { display: none; }
#modonFollow { padding-bottom: 92px; }

#modonFollow .modon-bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: stretch; justify-content: space-around; gap: 2px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--m2-surface, #fff) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--m2-line, #e7ede9);
}
#modonFollow .modon-bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 0; padding: 6px 4px; border: 0; border-radius: 12px;
  background: transparent; color: var(--m2-muted, #6b776f);
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: none;
}
#modonFollow .modon-bottom-nav button .mbn-i { font-size: 19px; line-height: 1; }
#modonFollow .modon-bottom-nav button:hover { color: var(--m2-ink, #16221d); background: transparent; }
#modonFollow .modon-bottom-nav button.active { color: var(--m2-green, #0e7a5f); background: transparent; border: 0; }
#modonFollow .modon-bottom-nav .mbn-plus { flex: 0 0 auto; padding: 0; }
#modonFollow .modon-bottom-nav .mbn-plus b {
  display: grid; place-items: center; width: 52px; height: 52px; margin-top: -20px;
  border: 4px solid var(--bg, #eef2f0); border-radius: 50%;
  background: var(--m2-green, #0e7a5f); color: #fff; font-size: 25px; font-weight: 400;
  box-shadow: 0 8px 20px rgba(14,122,95,.35);
}
#modonFollow .modon-bottom-nav .mbn-plus:hover b { background: var(--m2-green-d, #0a5c47); }

/* ---- Compact header to match the prototype (brand + controls + refresh) ---- */
#modonFollow .modon-hub-brand p { display: none; }
#modonFollow .modon-hub-header-stats { display: none; }
#modonFollow .modon-hub-header-controls button[data-view-jump] { display: none; }
#modonFollow .modon-hub-header { padding: 16px 20px; }
#modonFollow .modon-hub-header-main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
#modonFollow .modon-hub-brand { flex: 1 1 200px; min-width: 0; }
#modonFollow .modon-hub-brand :where(h1, h2) { font-size: clamp(20px, 2.2vw, 24px); }
#modonFollow .modon-hub-header-controls { flex: 1 1 auto; display: flex; gap: 10px; align-items: end; justify-content: flex-end; }
#modonFollow .modon-hub-header-actions { flex: 0 0 auto; }

/* Matching: verify-in-Modon action + confirmed-deleted state */
#modonFollow .modon-audit-row-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
#modonFollow .modon-audit-breakdown-row.is-deleted { border-color: var(--m2-red, #b43a2f); background: var(--m2-red-050, #fbe7e4); }
#modonFollow .modon-audit-breakdown-row.is-deleted strong { color: var(--m2-red, #b43a2f); }

/* ==========================================================================
   Modon hub — "Current orders" cards, chips, status pills
   ========================================================================== */
#modonFollow .modon-orders-info {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; margin-bottom: 14px;
  border: 1px solid var(--m2-line, #e7ede9); border-radius: 13px;
  background: var(--m2-blue-050, #e9f0f8); color: var(--m2-muted, #6b776f);
  font-size: 12.5px; line-height: 1.6;
}
#modonFollow .modon-orders-info .mo-i { color: var(--m2-blue, #245e97); font-size: 15px; }
#modonFollow .modon-orders-info b { color: var(--m2-ink, #16221d); }

#modonFollow .modon-orders-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#modonFollow .modon-orders-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 230px;
  padding: 9px 14px; border: 1px solid var(--m2-line-strong, #d6ded8); border-radius: 999px; background: var(--m2-surface, #fff);
}
#modonFollow .modon-orders-search span { color: var(--m2-faint, #94a09a); }
#modonFollow .modon-orders-search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--m2-ink, #16221d); }
#modonFollow .modon-orders-chips { display: flex; gap: 7px; flex-wrap: wrap; }
#modonFollow .modon-orders-chips button {
  border: 1px solid var(--m2-line-strong, #d6ded8); background: var(--m2-surface, #fff); color: var(--m2-muted, #6b776f);
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 15px; border-radius: 999px; cursor: pointer;
}
#modonFollow .modon-orders-chips button.active { border-color: var(--m2-green, #0e7a5f); background: var(--m2-green, #0e7a5f); color: #fff; }

#modonFollow .modon-orders-cards { display: flex; flex-direction: column; gap: 10px; }
#modonFollow .mo-card {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 15px 17px; border: 1px solid var(--m2-line, #e7ede9); border-radius: 14px;
  background: var(--m2-surface, #fff); box-shadow: var(--m2-shadow-sm, 0 4px 14px rgba(16,50,40,.05));
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#modonFollow .mo-card:hover { transform: translateY(-1px); border-color: var(--m2-line-strong, #d6ded8); box-shadow: 0 10px 26px rgba(16,50,40,.09); }
#modonFollow .mo-who { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
#modonFollow .mo-who .mo-ref { color: var(--m2-faint, #94a09a); font-weight: 600; font-size: 13px; }
#modonFollow .mo-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; color: var(--m2-muted, #6b776f); font-size: 12.5px; }
#modonFollow .mo-side { display: grid; gap: 8px; justify-items: end; }
#modonFollow .mo-st { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
#modonFollow .mo-st.st-new { background: var(--m2-blue-050, #e9f0f8); color: var(--m2-blue, #245e97); }
#modonFollow .mo-st.st-courier { background: var(--m2-amber-050, #fbf1df); color: var(--m2-amber, #b5710f); }
#modonFollow .mo-st.st-delivered { background: var(--m2-green-050, #e9f5f0); color: var(--m2-green, #0e7a5f); }
#modonFollow .mo-st.st-issue { background: var(--m2-red-050, #fbe7e4); color: var(--m2-red, #b43a2f); }
#modonFollow .mo-st.st-returned { background: var(--m2-amber-050, #fbf1df); color: var(--m2-amber, #b5710f); }
#modonFollow .mo-prep {
  border: 1px solid var(--m2-line-strong, #d6ded8); background: var(--m2-surface, #fff); color: var(--m2-ink, #16221d);
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
#modonFollow .mo-prep:hover { border-color: var(--m2-green, #0e7a5f); color: var(--m2-green, #0e7a5f); }

/* ==========================================================================
   Modon hub — "Matching" simplified (3 tiles + two grouped card lists)
   ========================================================================== */
/* Hide the legacy dense audit chrome */
#modonFollow [data-modon-hub-panel="audit"] .modon-reconciliation-date-filter,
#modonFollow #modonReconciliationMetrics,
#modonFollow .modon-hub-external-orders { display: none; }
#modonFollow .modon-hub-audit-summary { padding: 0; border: 0; background: transparent; box-shadow: none; }

#modonFollow .modon-match-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
#modonFollow .modon-match-summary .mm-tile {
  border: 1px solid var(--m2-line, #e7ede9); border-top: 3px solid var(--k, var(--m2-green, #0e7a5f));
  border-radius: 14px; padding: 14px 15px; background: var(--m2-surface, #fff);
}
#modonFollow .modon-match-summary .mm-tile small { display: block; color: var(--m2-muted, #6b776f); font-size: 12px; }
#modonFollow .modon-match-summary .mm-tile b { display: block; margin: 4px 0 2px; font-size: 26px; font-weight: 800; color: var(--k, var(--m2-green, #0e7a5f)); }
#modonFollow .modon-match-summary .mm-tile span { display: block; color: var(--m2-faint, #94a09a); font-size: 11.5px; }
#modonFollow .modon-match-summary .mm-tile.g { --k: var(--m2-green, #0e7a5f); }
#modonFollow .modon-match-summary .mm-tile.r { --k: var(--m2-red, #b43a2f); }
#modonFollow .modon-match-summary .mm-tile.b { --k: var(--m2-blue, #245e97); }

#modonFollow .modon-match-fresh { margin: 14px 2px 4px; color: var(--m2-muted, #6b776f); font-size: 12.5px; }
#modonFollow .modon-match-group {
  display: flex; align-items: center; gap: 10px; margin: 20px 2px 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .3px;
}
#modonFollow .modon-match-group::after { content: ""; flex: 1; height: 1px; background: var(--m2-line, #e7ede9); }
#modonFollow .modon-match-group.red { color: var(--m2-red, #b43a2f); }
#modonFollow .modon-match-group.blue { color: var(--m2-blue, #245e97); }
#modonFollow .modon-match-info {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px;
  padding: 12px 15px; border: 1px solid var(--m2-line, #e7ede9); border-radius: 13px;
  color: var(--m2-muted, #6b776f); font-size: 12.5px; line-height: 1.6;
}
#modonFollow .modon-match-info b { color: var(--m2-ink, #16221d); }
#modonFollow .modon-match-info.red { background: var(--m2-red-050, #fbe7e4); }
#modonFollow .modon-match-info.red .i { color: var(--m2-red, #b43a2f); }
#modonFollow .modon-match-info.amber { background: var(--m2-amber-050, #fbf1df); }
#modonFollow .modon-match-info.amber .i { color: var(--m2-amber, #b5710f); }

/* Reuse audit rows as clean cards inside the matching groups */
#modonFollow .modon-audit-breakdown-list { display: flex; flex-direction: column; gap: 10px; }
#modonFollow .modon-audit-breakdown-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--m2-line, #e7ede9); border-radius: 14px;
  background: var(--m2-surface, #fff); box-shadow: var(--m2-shadow-sm, 0 4px 14px rgba(16,50,40,.05));
}
#modonFollow .modon-audit-breakdown-row > div:first-child strong { font-size: 14.5px; }
#modonFollow .modon-audit-breakdown-row small { color: var(--m2-muted, #6b776f); font-size: 12px; }

/* ==========================================================================
   Modon hub — compact top panel v19 (matches prototype top bar)
   ========================================================================== */
#modonFollow .modon-hub-header-main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
#modonFollow .modon-hub-brand {
  display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0;
}
#modonFollow .modon-hub-logo {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 13px; background: linear-gradient(145deg, var(--m2-green, #0e7a5f), var(--m2-green-d, #0a5c47));
  color: #fff; font-size: 21px;
}
#modonFollow .modon-hub-titlewrap { min-width: 0; }
#modonFollow .modon-hub-titlewrap h2 { margin: 0; font-size: 19px; letter-spacing: -.3px; color: var(--m2-ink, #16221d); }
#modonFollow .modon-hub-status {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  color: var(--m2-muted, #6b776f); font-size: 12px;
}
#modonFollow .modon-hub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m2-green, #0e7a5f); }

#modonFollow .modon-hub-header-controls {
  flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end;
}
#modonFollow .modon-hub-header-controls select {
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--m2-line-strong, #d6ded8); border-radius: 999px;
  background: var(--m2-surface, #fff); color: var(--m2-ink, #16221d);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
#modonFollow .modon-hub-header-actions { flex: 0 0 auto; }
/* Circular refresh icon button */
#modonFollow .modon-hub-header-actions button,
#modonFollow .modon-hub-refresh {
  width: 44px; height: 44px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--m2-green, #0e7a5f);
  background: var(--m2-green, #0e7a5f); color: #fff; font-size: 20px;
  box-shadow: 0 8px 18px rgba(14,122,95,.22);
}
#modonFollow .modon-hub-refresh:disabled { opacity: .7; }

/* ==========================================================================
   Modon hub — "Returns" redesigned as cards (match orders/matching)
   ========================================================================== */
#modonFollow .modon-match-summary .mm-tile.a { --k: var(--m2-amber, #b5710f); }

/* Return list: reuse the order-card look */
#modonFollow .ret-card-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
#modonFollow .ret-card { cursor: default; }
#modonFollow .ret-card:hover { transform: none; }
#modonFollow .ret-card .ret-exchange {
  background: var(--m2-amber-050, #fbf1df); color: var(--m2-amber, #b5710f);
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
}
#modonFollow .ret-card .ret-reason { color: var(--m2-faint, #94a09a); }
#modonFollow .ret-card .ret-fin { margin-top: 6px; color: var(--m2-amber, #b5710f); font-size: 11.5px; }
#modonFollow .ret-recv { border: 0; background: var(--m2-amber, #b5710f); color: #fff; box-shadow: 0 5px 14px rgba(181,113,15,.25); }
#modonFollow .ret-recv:hover { background: #9a5d0c; color: #fff; }

/* Clean, calm invoice (per-account) card header */
#modonFollow .carrier-return-card {
  border: 1px solid var(--m2-line, #e7ede9); border-radius: var(--m2-radius, 18px);
  background: var(--m2-surface, #fff); box-shadow: var(--m2-shadow, 0 8px 26px rgba(20,50,40,.06));
  padding: 18px; margin-bottom: 14px;
}
#modonFollow .carrier-return-head {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--m2-line, #e7ede9);
}
#modonFollow .carrier-return-identity h3 { margin: 2px 0; font-size: 16px; color: var(--m2-ink, #16221d); }
#modonFollow .carrier-return-identity .eyebrow { color: var(--m2-amber, #b5710f); }
#modonFollow .carrier-return-identity code { color: var(--m2-muted, #6b776f); font-size: 12px; }
#modonFollow .carrier-return-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#modonFollow .carrier-return-actions .primary {
  border: 0; background: var(--m2-amber, #b5710f); color: #fff; border-radius: 12px; padding: 10px 16px; font-weight: 700; cursor: pointer;
}
#modonFollow .carrier-return-actions .ghost {
  border: 1px solid var(--m2-line-strong, #d6ded8); background: var(--m2-surface, #fff); color: var(--m2-ink, #16221d); border-radius: 12px; padding: 10px 14px; cursor: pointer;
}
#modonFollow .carrier-return-progress { color: var(--m2-muted, #6b776f); font-size: 12px; }
#modonFollow .carrier-return-progress strong { color: var(--m2-ink, #16221d); font-size: 17px; }
#modonFollow .carrier-return-progress-bar { width: 130px; height: 6px; border-radius: 999px; background: var(--m2-line, #e7ede9); margin-top: 5px; overflow: hidden; }
#modonFollow .carrier-return-progress-bar i { display: block; height: 100%; background: var(--m2-amber, #b5710f); }
#modonFollow .carrier-return-scope { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: var(--m2-muted, #6b776f); font-size: 12px; }
#modonFollow .carrier-return-scope strong { color: var(--m2-ink, #16221d); }

/* Scan panel: calm, on-brand */
#modonFollow .modon-return-scan-panel { border-radius: var(--m2-radius, 18px); }

/* ==========================================================================
   Compact global topbar (user request: make the top bar smaller)
   ========================================================================== */
.topbar {
  min-height: 0;
  padding: 8px 14px;
  margin-bottom: 10px;
  gap: 10px;
  border-radius: 12px;
}
.page-heading { min-width: 0; }
.page-heading h1 { font-size: 18px; margin-bottom: 0; }
.page-heading > p { display: none; }
.topbar .top-actions { gap: 7px; }
.topbar .top-actions > *,
.topbar .scope-chip,
.topbar .status-chip,
.topbar button { font-size: 12px; }

/* Modon hub custom-period date inputs (match the pill controls) */
#modonFollow .modon-hub-custom-range { display: flex; gap: 8px; align-items: center; }
#modonFollow .modon-hub-custom-range[hidden] { display: none; }
#modonFollow .modon-hub-custom-range label { display: inline-flex; align-items: center; gap: 6px; color: var(--m2-muted, #6b776f); font-size: 12px; }
#modonFollow .modon-hub-custom-range input[type="date"] {
  min-height: 40px; padding: 7px 12px; border: 1px solid var(--m2-line-strong, #d6ded8);
  border-radius: 999px; background: var(--m2-surface, #fff); color: var(--m2-ink, #16221d);
  font-family: inherit; font-size: 12.5px;
}

/* ==========================================================================
   Modon bottom nav — robust fit on phones (fixes overflow / oversized +)
   ========================================================================== */
#modonFollow .modon-bottom-nav {
  display: flex; align-items: center; gap: 2px;
  padding-inline: 6px;
}
#modonFollow .modon-bottom-nav > button {
  flex: 1 1 0; min-width: 0; max-width: 100%;
  padding: 6px 2px; overflow: hidden;
}
#modonFollow .modon-bottom-nav > button.mbn-plus {
  flex: 0 0 58px; width: 58px; padding: 0;
}
#modonFollow .modon-bottom-nav > button .mbn-l {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px;
}
#modonFollow .modon-bottom-nav > button .mbn-i { font-size: 18px; }
#modonFollow .modon-bottom-nav .mbn-plus b {
  width: 48px; height: 48px; margin-top: -16px; font-size: 23px;
}

/* ==========================================================================
   Modon refresh progress — readable on the light hub (was white-on-white)
   ========================================================================== */
#modonFollow :where(.modon-hub-progress, .modon-center-progress) {
  border-color: var(--m2-line, #e7ede9);
  background: var(--m2-canvas, #f5f8f6);
  color: var(--m2-ink, #16221d);
}
#modonFollow :where(.modon-hub-progress-head, .modon-center-progress > div:first-child) strong { color: var(--m2-green, #0e7a5f); }
#modonFollow :where(.modon-hub-progress-head, .modon-center-progress > div:first-child) span { color: var(--m2-ink, #16221d); }
#modonFollow :where(.modon-hub-progress, .modon-center-progress) > small { color: var(--m2-muted, #6b776f); }
#modonFollow :where(.modon-hub-progress-track, .modon-center-progress-track) { background: var(--m2-line, #e7ede9); }
#modonFollow :where(.modon-hub-progress-track, .modon-center-progress-track) > :where(i, span) {
  background: linear-gradient(90deg, var(--m2-green, #0e7a5f), var(--m2-green-d, #0a5c47));
}
#modonFollow :where(.modon-hub-progress, .modon-center-progress).failed {
  border-color: var(--m2-red, #b43a2f);
  background: var(--m2-red-050, #fbe7e4);
  color: var(--m2-red, #b43a2f);
}
#modonFollow :where(.modon-hub-progress, .modon-center-progress).failed :where(strong, span, small) { color: var(--m2-red, #b43a2f); }

/* ==========================================================================
   Modon returns — declutter the per-account statement header (was noisy)
   ========================================================================== */
/* Drop the busy 5-box scope grid and the long MRET id */
#modonFollow .carrier-return-scope { display: none; }
#modonFollow .carrier-return-identity code { display: none; }

#modonFollow .carrier-return-head {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between;
  padding: 0 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--m2-line, #e7ede9);
}
#modonFollow .carrier-return-identity { min-width: 0; }
#modonFollow .carrier-return-identity .eyebrow { color: var(--m2-amber, #b5710f); }
#modonFollow .carrier-return-identity h3 { margin: 2px 0; font-size: 16px; color: var(--m2-ink, #16221d); }
#modonFollow .carrier-return-identity p { margin: 0; color: var(--m2-muted, #6b776f); font-size: 12.5px; }

/* Compact received-progress as a small inline chip, not a big boxed panel */
#modonFollow .carrier-return-progress {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 12px; border: 1px solid var(--m2-line, #e7ede9); border-radius: 999px;
  background: var(--m2-canvas, #f5f8f6); color: var(--m2-muted, #6b776f); font-size: 12px; white-space: nowrap;
}
#modonFollow .carrier-return-progress > span { order: 2; }
#modonFollow .carrier-return-progress strong { color: var(--m2-ink, #16221d); font-size: 14px; }
#modonFollow .carrier-return-progress-bar { width: 70px; height: 5px; margin: 0; }

/* Actions: one clear primary, the rest quiet */
#modonFollow .carrier-return-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
#modonFollow .carrier-return-actions .ghost {
  border: 1px solid var(--m2-line-strong, #d6ded8); background: var(--m2-surface, #fff); color: var(--m2-ink, #16221d);
  border-radius: 11px; padding: 9px 14px; font-family: inherit; font-size: 13px; cursor: pointer;
}

/* Returns search box spacing */
#modonFollow .return-search-box { display: flex; margin: 4px 0 14px; }

/* Sale invoice summary: emphasise the total-outstanding row */
#saleInvoiceSummary .sale-summary-total { border: 1px solid #d9b38a; background: #fdf6ec; }
#saleInvoiceSummary .sale-summary-total strong { color: #a5641a; font-size: 17px; }
#saleInvoiceSummary .outstanding strong { color: #b5710f; }