:root {
  color-scheme: light;
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #dce3ea;
  --line-strong: #b9c5d0;
  --text: #16212c;
  --muted: #627386;
  --nav: #111820;
  --nav-soft: #1b2631;
  --accent: #d87828;
  --accent-dark: #a85012;
  --accent-soft: #fff0e3;
  --green: #16845b;
  --blue: #2467d1;
  --red: #b42318;
  --yellow: #b7791f;
  --radius: 8px;
  --shadow: 0 14px 30px rgba(23, 32, 42, 0.08);
  font-family: "Avenir Next", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

body.auth-required .app-shell {
  display: none;
}

body:not(.auth-required) .access-screen {
  display: none;
}

.access-screen {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(17, 24, 32, 0.92), rgba(22, 33, 44, 0.78)),
    var(--nav);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.access-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 460px;
  padding: 28px;
  width: 100%;
}

.access-card img {
  display: block;
  margin-bottom: 22px;
  max-height: 58px;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
}

.access-card h1 {
  font-size: 32px;
  line-height: 1.1;
  margin: 6px 0 12px;
}

.access-card p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 10px;
}

.access-card .primary-btn {
  margin-top: 14px;
  width: 100%;
}

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

button,
select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.app-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  align-self: start;
  background: #101722;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f6f8;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px;
  position: sticky;
  top: 0;
}

.company {
  display: grid;
  gap: 8px;
  padding: 0 0 10px;
}

.company img {
  display: block;
  max-width: 172px;
  max-height: 50px;
  object-fit: contain;
  object-position: left center;
}

.company strong,
.company span {
  display: block;
}

.company span,
.role-panel label {
  color: #9fb0c2;
  font-size: 12px;
}

.company strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.company span {
  color: #dce7f2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 4px;
  text-transform: uppercase;
}

.nav {
  display: grid;
  gap: 14px;
}

.sidebar-session {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.sidebar-session-label {
  color: #9fb0c2;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout-btn {
  align-items: center;
  background: #273442;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  width: 100%;
}

.sidebar-logout-btn:hover {
  background: #344455;
}

.nav-section,
.nav-group {
  display: grid;
  gap: 5px;
}

.nav-section-title {
  align-items: center;
  background: #1c2734;
  border-left: 5px solid #6ed7ff;
  border-radius: 6px 2px 2px 6px;
  color: #ffffff;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 5px 0 6px;
  min-height: 28px;
  padding: 0 10px;
  text-transform: uppercase;
}

.nav-section-sub .nav-section-title {
  border-left-color: #6ed7ff;
}

.nav-section-title-internal {
  border-left-color: #ffffff;
}

.nav-section-title-tanking {
  border-left-color: #f2c94c;
}

.nav-section-title-workshop {
  border-left-color: #4ade80;
}

.nav-section-admin .nav-section-title {
  border-left-color: #d87828;
}

.nav-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #e5edf5;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  line-height: 1.2;
  min-height: 36px;
  padding: 0 11px 0 14px;
  text-align: left;
  width: 100%;
}

.nav-item:hover,
.nav-item.active {
  background: #273442;
  color: #ffffff;
}

.nav-item.active {
  box-shadow: inset 4px 0 0 #6ed7ff;
}

.nav-item-separated {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 18px;
  padding-top: 14px;
}

.nav-item-internal {
  color: #e5edf5;
}

.nav-item-internal:hover,
.nav-item-internal.active {
  background: #273442;
  color: #ffffff;
}

.nav-item-tanking {
  color: #e5edf5;
}

.nav-item-tanking:hover,
.nav-item-tanking.active {
  background: #273442;
  color: #ffffff;
}

.nav-subitems {
  display: grid;
  gap: 3px;
  padding-left: 9px;
}

.nav-subitem {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: rgba(229, 237, 245, 0.88);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 34px;
  padding: 7px 11px;
  text-align: left;
}

.nav-subitem:hover,
.nav-subitem.active {
  background: #273442;
  color: #ffffff;
}

.role-panel {
  display: grid;
  gap: 9px;
  padding: 0 0 8px;
}

.role-panel select {
  background: #f3f5f8;
  border: 1px solid rgba(15, 23, 34, 0.28);
  border-radius: var(--radius);
  color: #17202a;
  min-height: 44px;
  padding: 0 12px;
  width: 100%;
}

.main {
  min-width: 0;
  padding: 26px;
}

.topbar,
.panel-head,
.record-main,
.record-meta,
.compact-row,
.lex-row,
.package-builder {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

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

.eyebrow {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  margin: 0 0 4px;
  text-transform: uppercase;
}

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

h1 {
  font-size: 28px;
  font-weight: 650;
  margin-bottom: 0;
}

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

h3 {
  font-size: 16px;
  font-weight: 650;
  margin: 5px 0 6px;
}

p {
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 0;
}

.notice {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  color: #7c2d12;
  font-size: 14px;
  margin-bottom: 18px;
  padding: 12px 14px;
}

.notice:empty {
  display: none;
}

.auth-status {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  max-width: 280px;
  min-height: 38px;
  overflow: hidden;
  padding: 10px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-message {
  color: var(--accent-dark);
  font-size: 14px;
  margin-top: 12px;
}

.auth-dialog-card {
  max-width: 520px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

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

.metric,
.panel,
.record,
.master-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
}

.metric-btn {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.metric-btn:hover {
  border-color: var(--accent);
}

.metric span,
.metric small,
.record-id,
.amount-box span,
.doc-row span,
.master-row span {
  color: var(--muted);
  font-size: 12px;
}

.metric strong {
  display: block;
  font-size: 24px;
  font-weight: 650;
  margin: 5px 0 2px;
}

.internal-dashboard-panel {
  margin-bottom: 16px;
}

.internal-dashboard-panel .panel-head p {
  color: var(--muted);
  margin: 4px 0 0;
}

.internal-dashboard-metrics {
  margin-bottom: 0;
}

.internal-dashboard-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(199, 93, 29, 0.18), var(--shadow);
}

.package-metric {
  padding-bottom: 12px;
}

.metric-breakdown {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
}

.metric-breakdown div {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.metric-breakdown b {
  font-size: 14px;
}

.metric-breakdown span {
  text-align: right;
}

.package-by-sub {
  gap: 9px;
}

.package-by-sub div {
  align-items: start;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(80px, 1fr) minmax(120px, auto);
  padding-top: 7px;
}

.package-by-sub div:first-child {
  border-top: 0;
  padding-top: 0;
}

.package-by-sub b {
  grid-row: span 2;
}

.package-by-sub span {
  white-space: nowrap;
}

.dashboard-alert {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  color: #7c2d12;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  margin: -4px 0 16px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.dashboard-alert span {
  color: #9a3412;
  font-size: 13px;
}

.diagnostic-record h3 {
  margin: 8px 0 4px;
}

.diagnostic-record p {
  color: var(--muted);
  margin: 0;
}

.diagnostics-updated {
  color: var(--muted);
  font-size: 13px;
  margin: 6px 0 0;
}

.dashboard-material-inbox {
  margin-bottom: 16px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
}

.panel {
  padding: 16px;
}

.panel-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.panel-head.table-head {
  align-items: flex-start;
}

#transactions .panel-head.table-head {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  align-items: start;
}

.transaction-heading {
  min-width: 0;
}

.transaction-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(145px, 0.8fr));
  gap: 8px;
  width: 100%;
}

.transaction-filters input,
.transaction-filters select,
#transaction-search {
  min-width: 0;
  width: 100%;
}

body[data-role="sub"] #transactions .transaction-filters,
body[data-role="backoffice_internal"] #transactions .transaction-filters {
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(145px, 0.8fr));
}

.primary-btn,
.ghost-btn,
.text-btn,
.icon-btn {
  border-radius: var(--radius);
  min-height: 38px;
  padding: 0 12px;
  font-weight: 600;
}

.primary-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #ffffff;
}

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

.ghost-btn,
.icon-btn {
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.text-btn {
  background: transparent;
  border: 0;
  color: var(--accent-dark);
  padding: 0 4px;
}

.icon-btn {
  min-width: 38px;
  padding: 0;
}

.compact-action-btn {
  font-size: 12px;
  min-height: 30px;
  padding: 0 9px;
}

.material-inbox-record {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.material-select {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-right: 4px;
}

.material-select input {
  min-height: 0;
  width: auto;
}

.material-select span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--text);
  min-height: 40px;
  padding: 8px 10px;
}

textarea {
  resize: vertical;
}

label {
  display: grid;
  gap: 6px;
  color: #304050;
  font-size: 13px;
  font-weight: 500;
}

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

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

.upload-box {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 14px;
}

.upload-box span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.data-list,
.master-list,
.compact-list {
  display: grid;
  gap: 10px;
}

.list-more-hint {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  margin-top: 10px;
  padding: 0;
  text-align: left;
}

.list-more-hint:hover {
  text-decoration: underline;
}

.record {
  padding: 14px;
}

.record.slim {
  box-shadow: none;
}

.record-main {
  justify-content: space-between;
  gap: 18px;
}

.whatsapp-card-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.whatsapp-card-content {
  min-width: 0;
}

.whatsapp-card-content h3 {
  overflow-wrap: anywhere;
}

.record-main p {
  font-size: 14px;
}

.record-main strong,
.compact-row strong {
  font-weight: 600;
}

.record-meta {
  border-top: 1px solid var(--line);
  color: var(--muted);
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
}

.transaction-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.sub-transaction-card .record-main {
  align-items: flex-start;
}

.sub-transaction-summary {
  display: grid;
  gap: 6px;
  width: 100%;
}

.sub-transaction-title-row {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.sub-transaction-title-row h3 {
  margin: 0;
}

.sub-transaction-title-row strong {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  padding: 6px 10px;
  white-space: nowrap;
}

.sub-transaction-meta {
  grid-template-columns: 1fr;
}

.meta-left,
.meta-danger,
.meta-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.meta-info {
  min-width: 0;
}

.meta-danger {
  justify-content: flex-end;
  margin-left: auto;
}

.inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.inline-edit select {
  min-height: 32px;
  padding: 4px 8px;
}

.amount-box {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 140px;
  padding: 10px;
  text-align: right;
}

.amount-box strong {
  display: block;
  font-size: 17px;
}

.doc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

#edit-documents.doc-row {
  display: grid;
  gap: 8px;
}

.doc-row span {
  background: #eef3f7;
  border-radius: 6px;
  padding: 4px 7px;
}

.doc-row a {
  color: var(--text);
  text-decoration: none;
}

.doc-thumb,
.doc-link {
  background: #eef3f7;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  padding: 5px 7px;
}

.doc-link .doc-name,
.doc-thumb .doc-name {
  background: transparent;
  border-radius: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0;
}

.doc-link small,
.doc-thumb small {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
}

.doc-edit-row {
  align-items: start;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  padding: 8px;
}

.doc-edit-main {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 150px);
}

.doc-note-input {
  grid-column: 1 / -1;
}

.doc-edit-main .doc-link,
.doc-edit-main .doc-thumb,
.doc-edit-main > span {
  min-width: 0;
  width: 100%;
}

.doc-edit-actions {
  align-items: start;
  display: grid;
  gap: 6px;
}

.doc-edit-actions .ghost-btn {
  justify-self: start;
  min-height: 32px;
  padding: 5px 10px;
}

.icon-only-btn {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 34px;
}

.icon-only-btn svg {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.icon-only-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.danger-icon:hover {
  border-color: #fecaca;
  color: #b91c1c;
}

.compact-icon {
  height: 28px;
  margin-left: 8px;
  vertical-align: middle;
  width: 28px;
}

.compact-icon svg {
  height: 15px;
  width: 15px;
}

button.doc-link {
  cursor: pointer;
  font: inherit;
}

button.doc-thumb,
.preview-image-btn {
  cursor: zoom-in;
  font: inherit;
}

.doc-thumb img {
  border-radius: 4px;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.line-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.line-preview span {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #7c2d12;
  font-size: 12px;
  padding: 4px 7px;
}

.sub-detail-block {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 14px 0;
}

.sub-detail-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.sub-detail-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.sub-detail-head strong {
  font-size: 22px;
}

.compact-detail-table table {
  min-width: 0;
}

.compact-detail-table tfoot td {
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.edit-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.line-items-section .section-title {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 4;
}

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

.line-item-header,
.line-item-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 70px 76px 104px 86px 40px;
  gap: 8px;
  align-items: center;
}

.line-item-header span:nth-child(1),
.line-item-row [data-line-article-search] {
  grid-column: 1;
}

.line-item-header span:nth-child(2),
.line-item-row [data-create-line-article] {
  grid-column: 2;
}

.line-item-header span:nth-child(2) {
  grid-column: 3;
}

.line-item-row [data-line-qty] {
  grid-column: 3;
}

.line-item-header span:nth-child(3),
.line-item-row [data-line-unit-price] {
  grid-column: 4;
}

.line-item-header span:nth-child(4),
.line-item-row [data-line-total] {
  grid-column: 5;
}

.line-item-header span:nth-child(5),
.line-item-row [data-remove-line] {
  grid-column: 6;
}

.line-item-row [data-line-article-id] {
  display: none;
}

.line-item-row [data-line-total] {
  justify-self: start;
}

.line-article-create {
  align-self: stretch;
  background: #f6eee8;
  border: 1px solid #d9b89f;
  border-radius: 8px;
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
}

.line-article-create[hidden] {
  display: none;
}

.line-item-header {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.line-item-total {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 10px;
}

.line-item-total strong {
  font-size: 17px;
}

.compact-row {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.compact-row span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

button.compact-row {
  cursor: pointer;
}

button.compact-row:hover {
  border-color: var(--accent);
}

.dashboard-work-head {
  align-items: center;
}

.dashboard-status-tabs {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.dashboard-status-tabs button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  justify-content: space-between;
  min-height: 38px;
  padding: 7px 9px;
  text-align: left;
}

.dashboard-status-tabs button.active {
  background: #fff7ed;
  border-color: var(--accent);
  color: var(--accent);
}

.dashboard-status-tabs span {
  background: var(--surface-soft);
  border-radius: 999px;
  color: inherit;
  font-size: 11px;
  min-width: 24px;
  padding: 2px 6px;
  text-align: center;
}

.status-chip {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  white-space: nowrap;
  background: #eef3f7;
  color: #304050;
  font-size: 12px;
  font-weight: 600;
}

.status-chip.offen {
  background: #fef3c7;
  color: #8a520b;
}

.status-chip.in-prüfung,
.status-chip.wartet-auf-unterlagen,
.status-chip.wartet-auf-reparatur {
  background: #dbeafe;
  color: #1d4e89;
}

.status-chip.freigegeben {
  background: #dcfce7;
  color: #166534;
}

.status-chip.abgerechnet {
  background: #e0f2fe;
  color: #075985;
}

.status-chip.storniert {
  background: #fee2e2;
  color: #991b1b;
}

.package-builder {
  gap: 12px;
  align-items: end;
}

.package-builder label {
  max-width: 360px;
  flex: 1;
}

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

.package-settlement {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
}

.package-settlement-locked input:disabled {
  background: var(--surface-soft);
  color: var(--ink);
  opacity: 1;
}

.locked-package-meta {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}

.locked-package-meta span:not(.status-pill) {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 2px;
  min-width: 180px;
  padding: 8px 10px;
}

.locked-package-meta strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.package-lex-document {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
}

.package-lex-document > div {
  display: grid;
  gap: 4px;
}

.package-lex-document span {
  color: var(--muted);
  font-size: 13px;
}

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

.settlement-result {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.settlement-result strong {
  font-size: 20px;
  font-weight: 650;
}

.package-audit {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
}

.package-audit-ok {
  border-color: #b8d8c0;
}

.package-audit-warning {
  border-color: #e9c46a;
}

.package-audit-error {
  border-color: #d78a8a;
}

.package-audit-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.package-audit h4 {
  margin: 0;
}

.package-audit p {
  color: var(--muted);
  margin: 2px 0 0;
}

.audit-badge {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  text-transform: uppercase;
}

.audit-badge-ok {
  background: #e6f4ea;
  color: #176638;
}

.audit-badge-warning {
  background: #fff4cf;
  color: #8a5c00;
}

.audit-badge-error {
  background: #fde8e8;
  color: #9b1c1c;
}

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

.package-audit-row {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

.package-audit-row-ok {
  border-left-color: #2f8f46;
}

.package-audit-row-warning {
  border-left-color: #d99a00;
}

.package-audit-row-error {
  border-left-color: #c83f3f;
}

.akonto-allocation-list,
.advance-payment-list {
  margin-top: 12px;
}

body[data-role="sub"] .advance-payment-list {
  display: grid;
  gap: 10px;
}

body[data-role="sub"] .advance-payment-list .compact-row {
  align-items: start;
  background: #ffffff;
  box-shadow: none;
}

body[data-role="sub"] .advance-payment-list .compact-row .num {
  text-align: right;
}

.akonto-allocation-row {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 160px;
  padding: 10px 12px;
}

.akonto-allocation-row label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.akonto-allocation-row input[type="checkbox"] {
  min-height: auto;
  width: auto;
}

.lex-row {
  border-top: 1px solid var(--line);
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}

.table-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 10px 12px;
}

.import-result {
  display: none;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
  color: #14532d;
  margin-bottom: 10px;
  padding: 10px 12px;
}

.import-result.visible {
  display: block;
}

.import-result span,
.import-result small {
  display: block;
  margin-top: 6px;
}

.import-result .repair-order-btn {
  margin-top: 10px;
}

.table-wrap {
  overflow: auto;
}

.fuel-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 13px;
}

.fuel-table th,
.fuel-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 8px;
  text-align: left;
  vertical-align: top;
}

.fuel-table th {
  background: var(--surface-soft);
  color: #304050;
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fuel-table .num {
  text-align: right;
  white-space: nowrap;
}

.fuel-table tr.needs-review td {
  background: #fff7ed;
}

.fuel-table tr.urgent-review td {
  background: #fef2f2;
}

.hint-chip {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  margin: 1px 4px 1px 0;
  padding: 4px 7px;
  white-space: nowrap;
}

.hint-chip.info {
  background: #e0f2fe;
  color: #075985;
}

.hint-chip.warning {
  background: #ffedd5;
  color: #9a3412;
}

.hint-chip.urgent {
  background: #fee2e2;
  color: #991b1b;
}

.hint-chip.ok {
  background: #dcfce7;
  color: #166534;
}

.master-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

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

.master-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
}

.master-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 9px 12px;
}

.master-tab.active {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--accent);
}

.master-panel {
  display: none;
}

.master-panel.active {
  display: grid;
  gap: 12px;
}

.section-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
}

.section-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  min-height: 36px;
  padding: 8px 11px;
}

.section-tab:hover,
.section-tab.active {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--accent);
}

.master-tools {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr);
}

.master-tools input,
.master-tools select {
  min-height: 42px;
}

.branding-costs-box {
  align-items: start;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 0.85fr) minmax(420px, 1.15fr);
  padding: 12px;
}

.branding-costs-box h3 {
  margin: 0 0 4px;
}

.branding-costs-box p {
  color: var(--muted);
  margin: 0;
}

.branding-costs-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.branding-costs-list label {
  color: var(--muted);
  display: grid;
  font-size: 0.82rem;
  font-weight: 500;
  gap: 5px;
}

.branding-costs-list input {
  min-height: 38px;
}

.master-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  min-width: 860px;
  width: 100%;
}

.master-table th,
.master-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  text-align: left;
  vertical-align: middle;
}

.master-table th {
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 3;
}

.table-sort-btn {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.table-sort-btn:hover,
.table-sort-btn.active {
  color: var(--text);
}

.master-table td span {
  color: var(--muted);
  font-size: 0.82rem;
}

.master-table td .status-pill {
  font-size: 0.78rem;
}

.master-table td .status-freigegeben {
  color: #166534;
}

.master-table td .status-storniert {
  color: #991b1b;
}

.master-table td .status-offen {
  color: #92400e;
}

.article-price-table {
  min-width: 1060px;
}

.article-price-preview {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  padding: 12px;
}

.article-price-preview strong {
  color: #7c2d12;
  grid-column: 1 / -1;
}

.article-price-preview span {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

#article-list.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: calc(100vh - 360px);
  min-height: 360px;
  overflow: auto;
}

#article-list .master-table th {
  top: 0;
}

.branding-check-cell {
  text-align: center;
}

.branding-check-cell input {
  height: 18px;
  width: 18px;
}

.status-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 8px;
}

.status-freigegeben {
  background: #dcfce7;
  color: #166534;
}

.status-storniert {
  background: #fee2e2;
  color: #991b1b;
}

.status-offen {
  background: #fef3c7;
  color: #92400e;
}

.sub-compliance-list {
  display: grid;
  gap: 12px;
}

.sub-compliance-overview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}

.sub-compliance-table {
  min-width: 1080px;
}

.sub-compliance-table td {
  white-space: nowrap;
}

.sub-compliance-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding: 14px;
}

.sub-compliance-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.sub-compliance-head h3 {
  font-size: 1rem;
  margin: 0 0 3px;
}

.sub-compliance-head p,
.compliance-doc-title span,
.compliance-hint,
.compliance-reminder {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

.sub-founded-field {
  color: var(--muted);
  display: grid;
  font-size: 0.82rem;
  font-weight: 500;
  gap: 5px;
  max-width: 260px;
}

.sub-founded-field input {
  min-height: 38px;
}

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

.compliance-doc-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  padding: 12px;
}

.compliance-doc-title {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.compliance-doc-title strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

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

.compliance-fields label {
  color: var(--muted);
  display: grid;
  font-size: 0.8rem;
  font-weight: 500;
  gap: 5px;
}

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

.compliance-fields input {
  min-height: 38px;
}

.compliance-upload {
  align-items: center;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 600;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
}

.compliance-upload.drag-active {
  background: rgba(46, 125, 50, 0.12);
  border-color: var(--success);
  color: var(--success);
}

.compliance-upload input {
  display: none;
}

.compliance-files {
  align-items: stretch;
  display: grid;
  gap: 7px;
}

.compliance-file-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.health-insurance-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.health-insurance-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.health-insurance-head h4 {
  font-size: 0.98rem;
  margin: 0 0 3px;
}

.health-insurance-head p {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

.health-insurance-list {
  display: grid;
  gap: 10px;
}

.health-insurance-card {
  background: var(--surface-soft);
}

.health-insurance-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(160px, 1fr) auto;
}

.compliance-ok {
  background: #dcfce7;
  color: #166534;
}

.compliance-optional {
  background: #e5e7eb;
  color: #374151;
}

.compliance-soon {
  background: #fef3c7;
  color: #92400e;
}

.compliance-due {
  background: #ffedd5;
  color: #9a3412;
}

.compliance-missing,
.compliance-expired {
  background: #fee2e2;
  color: #991b1b;
}

.num-positive {
  color: #166534;
  font-weight: 600;
}

.num-negative {
  color: #991b1b;
  font-weight: 600;
}

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

.master-row {
  box-shadow: none;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.master-edit-btn {
  justify-self: start;
  min-height: 28px;
  margin-top: 4px;
}

.master-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.supplier-upload {
  margin-bottom: 12px;
}

.supplier-table {
  min-width: 820px;
}

.supplier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.supplier-analysis {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 12px;
  padding: 12px;
}

.compact-head {
  margin-bottom: 8px;
}

.soft-row {
  background: #fff7ed;
}

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

.checkbox-label {
  align-items: center;
  display: flex;
  gap: 10px;
}

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

.compact-check {
  align-items: center;
  align-self: start;
  display: inline-flex;
  gap: 6px;
  min-height: 38px;
  white-space: nowrap;
}

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

.entry-check {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.entry-check input {
  min-height: 22px;
  width: 22px;
}

.whatsapp-meta {
  display: grid;
  grid-template-columns: auto auto minmax(180px, 240px) minmax(180px, 240px) auto auto;
  align-items: center;
}

.whatsapp-meta .inline-edit {
  width: 100%;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 16px;
  text-align: center;
}

.upload-import {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.upload-import.drag-active,
.upload-box.drag-active {
  background: #fff7ed;
  border-color: var(--accent);
}

.upload-box {
  cursor: pointer;
  display: grid;
  gap: 6px;
  font-weight: 500;
}

.upload-box input {
  margin-top: 4px;
}

.upload-box span,
.muted-note {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.file-summary {
  background: #eef3f7;
  border-radius: 6px;
  padding: 6px 8px;
}

.import-preview {
  display: grid;
  gap: 10px;
}

.import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.import-actions .primary-btn,
.import-actions .ghost-btn {
  min-height: 34px;
  padding: 0 14px;
}

.preview-summary,
.preview-stats {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.preview-stats span {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
}

.import-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
}

.import-warning span {
  color: #9a3412;
  font-weight: 600;
}

.preview-table,
.package-items {
  border-collapse: collapse;
  font-size: 0.9rem;
  width: 100%;
}

.preview-table th,
.preview-table td,
.package-items th,
.package-items td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.preview-table th,
.package-items th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.package-items {
  margin-top: 12px;
}

.record h4 {
  font-size: 1rem;
  margin: 16px 0 0;
}

.package-summary tbody tr {
  background: var(--surface-soft);
}

.package-summary .lex-summary-row {
  cursor: pointer;
}

.package-items .package-detail-row {
  cursor: pointer;
}

.package-items .package-detail-row:hover td {
  background: #fffaf5;
}

.package-items td span {
  color: var(--muted);
  font-size: 12px;
}

.package-summary .lex-summary-row:hover td,
.package-summary .lex-summary-row.active td {
  background: #fff7ed;
}

.package-summary .lex-summary-row td:first-child::before {
  color: var(--muted);
  content: "›";
  display: inline-block;
  font-weight: 600;
  margin-right: 6px;
}

.package-summary .lex-summary-row.active td:first-child::before {
  transform: rotate(90deg);
}

.package-summary .lex-detail-row {
  background: #ffffff;
}

.package-summary .lex-detail-row td {
  padding: 0 8px 10px;
}

.lex-detail-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  margin-top: 6px;
  overflow: hidden;
}

.lex-detail-item {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.lex-detail-item:hover,
.lex-detail-item:focus {
  background: #fffaf5;
  outline: 0;
}

.lex-detail-item:last-child {
  border-bottom: 0;
}

.lex-detail-item span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.lex-detail-item em {
  color: var(--accent);
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  margin-top: 2px;
}

.warning-text {
  color: var(--red) !important;
  font-weight: 850;
}

.urgent-text {
  color: #b91c1c !important;
  font-weight: 900;
}

dialog {
  border: 0;
  border-radius: var(--radius);
  max-width: 760px;
  width: calc(100% - 28px);
  padding: 0;
}

#edit-dialog {
  max-width: 96vw;
  width: 96vw;
}

#sub-transaction-dialog {
  max-width: 900px;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.dialog-card {
  padding: 18px;
  position: relative;
}

#master-dialog .draggable-dialog-card {
  margin: 0;
  position: fixed;
}

#master-dialog .panel-head {
  cursor: move;
  user-select: none;
}

#master-dialog .draggable-dialog-card.is-dragging {
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
}

.edit-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(520px, 1.22fr);
  gap: 18px;
  align-items: start;
}

.edit-workspace > .form-grid {
  max-height: 78vh;
  overflow: auto;
  padding-right: 4px;
}

.edit-preview-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  max-height: 78vh;
  overflow: hidden;
  padding: 12px;
  position: sticky;
  top: 0;
}

.edit-preview-toolbar {
  display: flex;
  gap: 6px;
}

.edit-preview-toolbar .ghost-btn {
  min-height: 32px;
  padding: 5px 10px;
}

.edit-preview-content {
  display: block;
  min-height: 0;
  overflow: auto;
}

.edit-preview-content img {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: block;
  height: auto;
  max-height: none;
  max-width: none;
  object-fit: contain;
}

.preview-image-btn {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  width: max-content;
}

.preview-item {
  display: grid;
  gap: 8px;
}

.attachment-note {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  color: #7c2d12;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
}

.pdf-preview {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  min-height: 640px;
  overflow: hidden;
}

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

.pdf-preview-head strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-preview iframe {
  border: 0;
  height: 620px;
  width: 100%;
}

.attachment-preview-overlay {
  background: transparent;
  border: 0;
  border-radius: 0;
  bottom: 16px;
  display: block;
  height: calc(100dvh - 32px);
  left: auto;
  margin: 0;
  max-height: calc(100dvh - 32px);
  max-width: none;
  padding: 0;
  pointer-events: auto;
  position: fixed;
  right: 16px;
  top: 16px;
  width: min(58vw, 820px);
  z-index: 2147483647;
}

.attachment-preview-overlay[hidden] {
  display: none;
}

.attachment-preview-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.36);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  max-height: none;
  max-width: none;
  overflow: hidden;
  pointer-events: auto;
  width: 100%;
}

.attachment-preview-content {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.attachment-preview-content img {
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  height: auto;
  max-height: none;
  max-width: 100%;
  object-fit: contain;
}

.attachment-preview-content iframe {
  background: #ffffff;
  border: 0;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.preview-missing {
  background: #ffffff;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  display: grid;
  gap: 4px;
  padding: 10px;
}

.preview-missing span {
  font-size: 12px;
}

.dialog-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

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

.internal-box {
  align-content: start;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.internal-box h3 {
  margin: 0;
}

.internal-sim-fields,
.internal-apple-fields,
.internal-card-fields {
  background: #eef6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}

.internal-card-fields {
  background: #fff7ed;
  border-color: #fed7aa;
}

.internal-apple-fields {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.internal-apple-fields strong {
  color: var(--text);
  font-size: 13px;
  grid-column: 1 / -1;
}

.internal-card-permissions {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  grid-template-columns: 100px repeat(4, minmax(0, 1fr));
}

.internal-card-permissions strong {
  color: var(--text);
  font-size: 13px;
}

.internal-sim-fields[hidden],
.internal-apple-fields[hidden],
.internal-card-fields[hidden],
#internal-asset-type-label[hidden],
#internal-asset-name-wrap[hidden],
#internal-asset-phone-wrap[hidden],
#internal-asset-code-wrap[hidden],
#internal-asset-serial-wrap[hidden],
#internal-handover-condition-wrap[hidden],
#internal-handover-note-wrap[hidden],
#internal-asset-card-employee-wrap[hidden],
#internal-asset-card-sub-wrap[hidden],
.internal-handover-accessories[hidden],
.internal-return-fields[hidden],
.internal-return-accessories[hidden] {
  display: none;
}

.internal-handover-accessories {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.internal-handover-accessories strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

#internal-handover-accessory-list {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.internal-sim-fields .checkbox-label {
  grid-column: 1 / -1;
}

.internal-sim-fields .checkbox-label[hidden] {
  display: none;
}

.internal-confidential-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.internal-handover-sim {
  background: #eef6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.internal-handover-sim[hidden],
.internal-handover-sim-hint[hidden] {
  display: none;
}

.internal-handover-sim select[hidden],
.internal-handover-sim input[hidden],
.internal-handover-sim span[hidden] {
  display: none;
}

.internal-handover-sim select {
  width: 100%;
}

.internal-handover-sim-hint {
  color: var(--muted);
  font-size: 13px;
  margin: -4px 0 0;
}

.internal-return-fields {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}

.internal-return-accessories {
  display: grid;
  gap: 8px;
}

.internal-return-accessories p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

#internal-return-accessory-list {
  display: grid;
  gap: 6px;
}

.internal-table {
  min-width: 980px;
}

.internal-asset-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  padding: 0;
  text-align: left;
}

.internal-asset-toggle span {
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  width: 12px;
}

.internal-asset-toggle:hover strong {
  color: var(--accent-dark);
  text-decoration: underline;
}

.internal-row-expanded td {
  border-bottom-color: transparent;
}

.internal-history-row td {
  background: #fbfaf7;
  border-top: 0;
  padding-top: 0;
}

.internal-history-box {
  border-left: 3px solid #d17a22;
  color: var(--muted);
  display: grid;
  gap: 8px;
  margin: 0 0 10px 14px;
  padding: 10px 12px;
}

.internal-history-box > strong {
  color: var(--text);
  font-size: 13px;
}

.internal-history-box ul {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.internal-history-box li {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.internal-history-box small {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.internal-history-actions {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.internal-fuel-filters {
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.2fr) minmax(150px, 1fr) minmax(150px, 1fr) 140px 140px;
}

.internal-fuel-table {
  min-width: 1080px;
}

.internal-fuel-table td span {
  color: var(--muted);
  font-size: 12px;
}

.internal-fuel-table td .urgent-text {
  color: #b91c1c !important;
  font-weight: 900;
}

.internal-fuel-table td .hint-chip.urgent {
  color: #991b1b;
}

.fuel-location-review {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
}

.fuel-location-head {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.fuel-location-head div,
.fuel-location-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fuel-location-head span,
.fuel-location-item span {
  color: var(--muted);
  font-size: 12px;
}

.fuel-location-item .fuel-location-users {
  color: #334155;
  font-weight: 600;
}

.fuel-location-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

#fuel-locations .fuel-location-list {
  max-height: none;
}

.fuel-location-item {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 8px 10px;
}

.fuel-location-item.open {
  background: #fff7ed;
  border-color: #fed7aa;
}

.fuel-location-item.ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.tiny-btn {
  min-height: 0;
  padding: 6px 10px;
}

.table-link {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
}

.table-link:hover {
  text-decoration: underline;
}

.internal-import-upload {
  min-width: min(420px, 100%);
}

.internal-card-import-table {
  min-width: 1180px;
}

.internal-card-import-table input,
.internal-card-import-table select {
  min-height: 34px;
  padding: 6px 8px;
}

.internal-card-import-table td {
  vertical-align: top;
}

.internal-card-owner-fields {
  align-items: end;
  border: 0;
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}

.internal-card-owner-fields strong {
  color: var(--muted);
  font-size: 12px;
  grid-column: 1 / -1;
  text-transform: uppercase;
}

.print-dialog-card {
  max-width: min(96vw, calc(190mm + 36px));
}

.handover-print {
  background: #ffffff;
  color: #111827;
  display: grid;
  gap: 22px;
  padding: 18px;
}

.handover-print-head {
  align-items: center;
  border-bottom: 2px solid #111827;
  display: grid;
  gap: 18px;
  grid-template-columns: 180px minmax(0, 1fr);
  padding-bottom: 14px;
}

.handover-print-head img {
  display: block;
  max-height: 56px;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
}

.handover-print-head h2,
.handover-print-head p {
  margin: 0;
}

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

.handover-print dl div {
  border-bottom: 1px solid #d1d5db;
  display: grid;
  gap: 4px;
  padding: 8px 0;
}

.handover-print dt {
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.handover-print dd {
  margin: 0;
  min-height: 24px;
}

.fuel-card-print,
.mobile-device-print {
  color: #111827;
  gap: 16px;
  line-height: 1.55;
  padding: 34px 42px;
}

.print-letter-layout {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 267mm;
  padding: 0;
  width: 190mm;
}

.print-letter-head {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  min-height: 18mm;
}

.print-letter-head img {
  display: block;
  max-height: 18mm;
  max-width: 50mm;
  object-fit: contain;
  object-position: right center;
}

.print-letter-sender {
  border-bottom: 1px solid #111827;
  color: #111827;
  font-size: 9px;
  line-height: 1.2;
  padding-bottom: 2mm;
}

.print-letter-recipient {
  font-size: 14px;
  line-height: 1.45;
  margin: 5mm 0 14mm;
  min-height: 18mm;
}

.print-letter-title-row {
  align-items: baseline;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 6mm;
}

.print-letter-title-row h2 {
  color: #111827;
  font-size: 22px;
  margin: 0;
}

.print-letter-title-row span {
  color: #111827;
  font-size: 14px;
}

.fuel-card-print h2,
.mobile-device-print h2 {
  font-size: 26px;
  margin: 14px 0 8px;
}

.mobile-device-print .print-letter-title-row h2 {
  font-size: 22px;
  margin: 0;
}

.fuel-card-print p,
.mobile-device-print p {
  color: #111827;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0;
}

.print-address-line {
  border-bottom: 1px solid #111827;
  font-size: 12px;
  padding-bottom: 10px;
}

.print-logo-head {
  align-items: end;
  border-bottom: 1px solid #111827;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 260px;
  padding-bottom: 10px;
}

.print-logo-head img {
  display: block;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-height: 78px;
  max-width: 250px;
  object-fit: contain;
  object-position: right center;
}

.print-logo-head h2 {
  color: #111827;
  font-size: 26px;
  margin: 0;
}

.print-company-logo {
  display: block !important;
  visibility: visible !important;
}

.print-logo-head p {
  color: #111827;
  font-size: 12px;
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}

.print-meta-list {
  gap: 6mm 10mm !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 2mm 0 4mm !important;
}

.print-meta-list dt {
  color: #111827;
  letter-spacing: 0;
}

.print-meta-list dd {
  color: #111827;
}

.internal-handover-print {
  gap: 18px;
  padding: 34px 42px;
}

.internal-print-logo-head {
  align-items: center;
  border-bottom: 1px solid #111827;
  grid-template-columns: minmax(0, 1fr) 240px;
  padding-bottom: 14px;
}

.return-question-box {
  border: 1px solid #111827;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.return-question-box h3 {
  color: #111827;
  font-size: 16px;
  margin: 0 0 2px;
}

.return-question-line {
  color: #111827;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr);
}

.checkbox-line {
  white-space: nowrap;
}

.blank-entry-line {
  border-bottom: 1px solid #111827;
  min-height: 28px;
}

.print-recipient-block {
  color: #111827;
  min-height: 54px;
  white-space: pre-line;
}

.mobile-device-print strong,
.fuel-card-print strong {
  color: #111827;
}

.print-fill-line {
  border-bottom: 1px solid #111827;
  font-weight: 800;
  min-height: 34px;
  padding: 4px 0 6px;
}

.print-fill-line.short {
  max-width: 280px;
}

.print-place-signature {
  align-items: end;
  display: grid;
  gap: 28px;
  grid-template-columns: 240px 280px;
  padding-top: 18px;
}

.print-place-signature span:last-child {
  border-bottom: 1px solid #111827;
  min-height: 34px;
}

.print-signature-row {
  align-items: end;
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.15fr);
  padding-top: 32px;
}

.print-signature-field span {
  border-bottom: 1px solid #111827;
  color: #111827;
  display: block;
  min-height: 40px;
  padding: 8px 0 6px;
}

.print-signature-field strong {
  color: #111827;
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin-top: 8px;
  text-transform: uppercase;
}

.print-letter-footer {
  color: #111827;
  display: grid;
  font-size: 7.5px;
  gap: 8mm;
  grid-template-columns: 1fr 1fr 1fr;
  line-height: 1.35;
  margin-top: auto;
  padding-top: 14mm;
}

.print-letter-footer div {
  display: grid;
  gap: 1px;
}

.print-letter-footer strong {
  font-size: 7.5px;
}

.single-signature {
  grid-template-columns: 280px;
  padding-top: 10px;
}

.handover-text {
  border: 1px solid #d1d5db;
  margin: 0;
  padding: 12px;
}

.signature-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 34px;
}

.signature-grid span {
  border-bottom: 1px solid #111827;
  display: block;
  height: 42px;
}

.signature-grid strong {
  display: block;
  margin-top: 8px;
}

body[data-role="material"] .admin-only,
body[data-role="material"] .office-admin-only,
body[data-role="material"] .sub-only,
body[data-role="material"] .nav [data-view]:not([data-view="capture"]),
body[data-role="material"] .nav-group,
body[data-role="material"] .nav-section-dashboard,
body[data-role="material"] .nav-section-admin,
body[data-role="material"] .role-panel,
body[data-role="material"] .view:not(#capture),
body[data-role="material"] #capture .office-admin-only,
body[data-role="backoffice_internal"] .admin-only,
body[data-role="backoffice_internal"] .sub-only,
body[data-role="backoffice_internal"] .role-panel,
body[data-role="backoffice_internal"] .nav [data-view="whatsapp"],
body[data-role="backoffice_internal"] .nav [data-view="fuel"],
body[data-role="backoffice_internal"] .nav [data-view="packages"],
body[data-role="backoffice_internal"] .nav [data-view="masters"],
body[data-role="backoffice_internal"] .nav-section-admin,
body[data-role="backoffice_internal"] .nav-group-tanking,
body[data-role="backoffice_internal"] #whatsapp,
body[data-role="backoffice_internal"] #fuel,
body[data-role="backoffice_internal"] #fuel-analysis,
body[data-role="backoffice_internal"] #fuel-locations,
body[data-role="backoffice_internal"] #fuel-import,
body[data-role="backoffice_internal"] #packages,
body[data-role="backoffice_internal"] #masters,
body[data-role="sub"] .admin-only,
body[data-role="sub"] .office-admin-only,
body[data-role="sub"] .role-panel,
body[data-role="sub"] .nav-section-admin,
body[data-role="sub"] .nav [data-view="capture"],
body[data-role="sub"] .nav [data-view="whatsapp"],
body[data-role="sub"] .nav [data-view="workshop"],
body[data-role="sub"] .nav [data-view="masters"],
body[data-role="sub"] .nav-group,
body[data-role="sub"] #workshop,
body[data-role="admin"] .sub-only {
  display: none !important;
}

.admin-preview-only {
  display: none;
}

body[data-admin-preview="true"] .admin-preview-only {
  display: block;
}

body[data-admin-preview="true"] .role-panel {
  display: grid !important;
}

body[data-role="material"] .top-actions .admin-only,
body[data-role="material"] .top-actions [data-view-target],
body[data-role="material"] #auth-login-btn,
body[data-role="backoffice_internal"] .top-actions .admin-only,
body[data-role="backoffice_internal"] .top-actions [data-view-target] {
  display: none !important;
}

body[data-role="material"] .amount-box,
body[data-role="backoffice_internal"] .amount-box {
  display: none;
}

.capture-photo-box {
  gap: 10px;
}

.capture-photo-box input {
  border: 0;
  min-height: 0;
  padding: 0;
}

.capture-photo-button {
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius);
  color: #ffffff !important;
  display: flex;
  font-size: 15px !important;
  font-weight: 650 !important;
  justify-content: center;
  min-height: 46px;
  padding: 10px 12px;
}

body[data-role="material"] .capture-panel {
  max-width: 820px;
}

body[data-role="sub"] #capture,
body[data-role="sub"] #whatsapp,
body[data-role="sub"] #internal,
body[data-role="sub"] #masters {
  display: none !important;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  html,
  body {
    background: #ffffff;
    margin: 0;
    min-height: auto;
    overflow: visible;
    width: auto;
  }

  body > :not(#internal-print-dialog) {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  #internal-print-dialog {
    border: 0;
    display: block !important;
    height: auto !important;
    inset: auto !important;
    margin: 0 !important;
    max-width: none;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    width: 190mm !important;
  }

  #internal-print-dialog::backdrop {
    display: none !important;
  }

  .print-dialog-card,
  #internal-print-content,
  .handover-print,
  .print-letter-layout {
    box-shadow: none;
    box-sizing: border-box;
    max-width: 190mm !important;
    min-width: 190mm !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 190mm !important;
  }

  .print-letter-layout {
    height: 267mm !important;
    padding: 0 !important;
    position: relative !important;
  }

  .handover-print {
    page-break-after: avoid;
    page-break-before: avoid;
    page-break-inside: avoid;
  }

  .print-logo-head {
    align-items: end !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
    visibility: visible !important;
  }

  .print-logo-head img,
  .print-company-logo {
    display: block !important;
    grid-column: 2 !important;
    justify-self: end !important;
    max-height: 24mm !important;
    max-width: 54mm !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-letter-head .print-company-logo {
    display: block !important;
    max-height: 18mm !important;
    max-width: 50mm !important;
  }

  .print-signature-row {
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    right: 0 !important;
  }
}

@media (max-width: 1050px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    height: auto;
    overflow: visible;
    min-height: auto;
    position: static;
  }

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

  .metrics,
  .master-grid,
  .compliance-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #transactions .panel-head.table-head {
    grid-template-columns: 1fr;
  }

  #transactions .transaction-filters,
  body[data-role="sub"] #transactions .transaction-filters,
  body[data-role="backoffice_internal"] #transactions .transaction-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .whatsapp-meta {
    grid-template-columns: 1fr 1fr;
  }

  .transaction-meta {
    grid-template-columns: 1fr;
  }

  .meta-danger {
    justify-content: flex-start;
    margin-left: 0;
  }

  .line-item-header {
    display: none;
  }

  .line-item-row {
    grid-template-columns: 1fr 80px 104px 86px 40px;
  }

  .doc-edit-row,
  .doc-edit-main,
  .doc-edit-actions {
    grid-template-columns: 1fr;
  }

  .line-item-row strong,
  .line-item-row button {
    grid-column: span 1;
  }

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

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

  .edit-preview-pane {
    max-height: none;
    position: static;
  }

  .attachment-preview-overlay {
    bottom: 10px;
    height: calc(100dvh - 20px);
    left: 10px;
    max-height: calc(100dvh - 20px);
    right: 10px;
    top: 10px;
    width: calc(100vw - 20px);
  }
}

@media (max-width: 680px) {
  body[data-role="sub"] .app-shell {
    display: block;
  }

  body[data-role="sub"] .sidebar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 0;
    gap: 8px;
    padding: 10px 12px;
    position: static;
    width: 100%;
  }

  body[data-role="sub"] .sidebar-session,
  body[data-role="sub"] .nav-section-title {
    display: none !important;
  }

  body[data-role="sub"] .company {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 10px;
    grid-template-columns: 98px minmax(0, 1fr);
    padding: 0 0 10px;
  }

  body[data-role="sub"] .company img {
    max-height: 30px;
    max-width: 98px;
  }

  body[data-role="sub"] .company strong {
    font-size: 15px;
    line-height: 1.1;
  }

  body[data-role="sub"] .company span {
    font-size: 10px;
    margin-top: 2px;
  }

  body[data-role="sub"] .nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body[data-role="sub"] .nav-section {
    display: contents;
  }

  body[data-role="sub"] .nav-item {
    background: #1b2631;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
    width: auto;
  }

  body[data-role="sub"] .nav-item.active {
    box-shadow: inset 0 -3px 0 #6ed7ff;
  }

  .main {
    padding: 16px;
  }

  body[data-role="sub"] .main {
    padding: 14px 12px;
  }

  .topbar,
  .record-main,
  .panel-head,
  .lex-row,
  .package-builder {
    align-items: stretch;
    flex-direction: column;
  }

  .nav,
  .metrics,
  .master-grid,
  .compliance-doc-grid,
  .compliance-fields,
  .form-grid {
    grid-template-columns: 1fr;
  }

  #transactions .transaction-filters,
  body[data-role="sub"] #transactions .transaction-filters,
  body[data-role="backoffice_internal"] #transactions .transaction-filters {
    grid-template-columns: 1fr;
  }

  body[data-role="material"] .main {
    padding: 12px;
  }

  body[data-role="material"] .panel {
    padding: 14px;
  }

  body[data-role="material"] .capture-photo-button,
  body[data-role="material"] .primary-btn.wide {
    min-height: 50px;
  }

  .whatsapp-card-main {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .whatsapp-meta {
    grid-template-columns: 1fr;
  }

  .line-item-row {
    grid-template-columns: 1fr;
  }

  .preview-table,
  .package-items {
    display: block;
    overflow-x: auto;
  }

  .amount-box {
    min-width: 0;
    text-align: left;
  }

  body[data-role="sub"] #packages .panel {
    box-shadow: none;
    padding: 14px;
  }

  body[data-role="sub"] #packages .record {
    box-shadow: none;
    overflow: hidden;
  }

  body[data-role="sub"] #packages .record-id {
    overflow-wrap: anywhere;
  }

  body[data-role="sub"] .sub-transaction-title-row {
    align-items: flex-start;
    display: grid;
    gap: 8px;
  }

  body[data-role="sub"] .sub-transaction-title-row strong {
    justify-self: start;
  }

  body[data-role="sub"] .advance-payment-list .compact-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-role="sub"] .advance-payment-list .compact-row .num {
    border-top: 1px solid var(--line);
    padding-top: 8px;
    text-align: left;
  }

  body[data-role="sub"] .package-settlement-sub .settlement-grid,
  body[data-role="sub"] .package-settlement-sub .settlement-result {
    grid-template-columns: 1fr;
  }

  body[data-role="sub"] .package-settlement-sub .settlement-result {
    align-items: stretch;
    display: grid;
    gap: 8px;
  }

  body[data-role="sub"] .package-settlement-sub .settlement-result strong {
    font-size: 18px;
  }
}