:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #172033;
  --muted: #687386;
  --line: #dde3ec;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --danger: #b42318;
  --shadow-soft: 0 18px 48px rgba(23, 32, 51, .10);
}

/* Production forms */
.production-form-header {
  background: linear-gradient(135deg, #ffffff 0%, #f4faf7 58%, #eaf6f0 100%);
  border: 1px solid #d7e9df;
  border-radius: 16px;
  padding: 22px 24px;
}

.production-form {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1180px;
}

.production-form-card {
  background: #fff;
  border: 1px solid #dbe7e1;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(31, 72, 55, .06);
  display: grid;
  gap: 20px;
  padding: 22px;
}

.production-form-card--components {
  overflow: visible;
}

.production-section-heading {
  border-bottom: 1px solid #e7eee9;
  padding-bottom: 16px;
}

.production-section-heading,
.production-section-heading > div {
  align-items: center;
  display: flex;
  gap: 12px;
}

.production-section-heading--actions {
  justify-content: space-between;
}

.production-section-heading > div > span {
  align-items: center;
  background: #e6f4ed;
  border-radius: 999px;
  color: #176044;
  display: inline-flex;
  flex: 0 0 36px;
  font-size: 12px;
  font-weight: 900;
  height: 36px;
  justify-content: center;
}

.production-section-heading h2 {
  color: #173c2e;
  font-size: 18px;
  margin: 0;
}

.production-section-heading p {
  color: var(--muted);
  font-size: 13px;
  margin: 3px 0 0;
}

.production-form-grid {
  padding: 2px 4px 4px;
}

.production-form-grid--identity .form-field:has(.ui-wide) {
  grid-column: span 7;
}

.production-form-actions {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe7e1;
  border-radius: 14px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 20px;
  position: sticky;
  bottom: 12px;
  z-index: 8;
}

.production-component-labels,
.production-component-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 30px minmax(250px, 1.6fr) minmax(105px, .55fr) minmax(95px, .45fr) minmax(180px, 1fr) 42px;
}

.production-component-labels {
  color: #607568;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .045em;
  padding: 0 10px 0 52px;
  text-transform: uppercase;
}

.production-component-list {
  display: grid;
  gap: 10px;
}

.production-component-row {
  align-items: start;
  background: #f8fbf9;
  border: 1px solid #dfeae4;
  border-radius: 12px;
  padding: 12px 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.production-component-row:focus-within {
  border-color: #76aa91;
  box-shadow: 0 0 0 3px rgba(32, 121, 82, .1);
}

.production-component-row.is-removed {
  display: none;
}

.production-component-number {
  align-items: center;
  background: #e3f1e9;
  border-radius: 8px;
  color: #28684d;
  display: flex;
  font-size: 11px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
}

.production-component-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.production-component-field > label {
  color: #5b7165;
  display: none;
  font-size: 11px;
  font-weight: 800;
}

.production-component-field input,
.production-component-field select {
  background: #fff;
  border: 1px solid #cfded6;
  border-radius: 8px;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.production-component-field .searchable-select {
  gap: 5px;
}

.production-component-field .searchable-select select {
  min-height: 36px;
}

.production-component-field .errorlist {
  color: var(--danger);
  font-size: 11px;
  font-weight: 800;
  list-style: none;
  margin: 0;
  padding: 0;
}

.production-component-delete {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 38px;
}

.production-component-delete .icon-button {
  color: #9c3f3f;
  font-size: 20px;
}

.production-component-help {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

@media (max-width: 900px) {
  .production-component-labels { display: none; }
  .production-component-row {
    grid-template-columns: 34px repeat(2, minmax(0, 1fr)) 42px;
  }
  .production-component-field > label { display: block; }
  .production-component-field--product,
  .production-component-field--notes { grid-column: 2 / 4; }
  .production-component-delete { grid-column: 4; grid-row: 1; }
  .production-component-number { grid-row: 1; }
  .production-section-heading--actions { align-items: flex-start; }
}

@media (max-width: 640px) {
  .production-form-card { padding: 16px; }
  .production-section-heading--actions { align-items: stretch; flex-direction: column; }
  .production-section-heading--actions > button { width: 100%; }
  .production-component-row { grid-template-columns: 34px minmax(0, 1fr) 42px; }
  .production-component-field,
  .production-component-field--product,
  .production-component-field--notes { grid-column: 2 / 3; }
  .production-component-delete { grid-column: 3; }
  .production-form-actions { bottom: 6px; }
}

/* Public product landing */
html { scroll-behavior: smooth; }
.landing-page { --landing-ink: #0b2632; --landing-deep: #073b3a; --landing-teal: #0f766e; --landing-mint: #dff7ef; --landing-sand: #f4f0e8; overflow: hidden; color: var(--landing-ink); background: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-page *, .landing-page *::before, .landing-page *::after { box-sizing: border-box; }
.landing-page a { text-decoration: none; }
.landing-header { position: sticky; z-index: 50; top: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; width: 100%; min-height: 78px; margin: 0; padding: 0 max(20px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(205, 220, 217, .78); background: rgba(255,255,255,.9); box-shadow: 0 8px 26px rgba(7,59,58,.04); backdrop-filter: blur(16px); }
.landing-brand { display: inline-flex; gap: 11px; align-items: center; color: var(--landing-ink); }
.landing-brand > span:first-child { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; color: #fff; background: var(--landing-teal); box-shadow: 0 9px 22px rgba(15,118,110,.2); font-size: 13px; font-weight: 950; letter-spacing: -.02em; }
.landing-brand > span:last-child { display: grid; gap: 1px; }
.landing-brand strong { font-size: 16px; line-height: 1.1; }
.landing-brand small { color: #6d7d83; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.landing-nav { display: flex; justify-content: center; gap: clamp(18px, 3vw, 38px); }
.landing-nav a, .landing-login-link { color: #43585f; font-size: 13px; font-weight: 750; transition: color .18s ease; }
.landing-nav a:hover, .landing-login-link:hover { color: var(--landing-teal); }
.landing-header-actions { display: flex; gap: 18px; align-items: center; }
.landing-header .primary-button { padding: 10px 16px; border-radius: 9px; font-size: 12px; }
.landing-mobile-menu { display: none; position: relative; }
.landing-mobile-menu summary { padding: 9px 12px; cursor: pointer; list-style: none; border: 1px solid #cddad8; border-radius: 8px; color: var(--landing-deep); font-size: 12px; font-weight: 850; }
.landing-mobile-menu summary::-webkit-details-marker { display: none; }
.landing-mobile-menu nav { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: 210px; padding: 8px; border: 1px solid #d9e2e0; border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(8,45,47,.18); }
.landing-mobile-menu nav a { padding: 10px 11px; border-radius: 7px; color: var(--landing-ink); font-size: 12px; font-weight: 750; }
.landing-mobile-menu nav a:hover { background: #edf8f5; }
.landing-hero { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); gap: clamp(42px, 6vw, 82px); align-items: center; min-height: 660px; padding: 72px max(20px, calc((100vw - 1180px) / 2)) 94px; background: radial-gradient(circle at 86% 22%, rgba(46,183,158,.16), transparent 27%), radial-gradient(circle at 6% 92%, rgba(15,118,110,.08), transparent 25%), linear-gradient(135deg, #fbfdfc 0%, #f1f7f4 100%); }
.landing-hero::before { content: ""; position: absolute; top: 14%; left: 46%; width: 190px; height: 190px; border: 1px solid rgba(15,118,110,.12); border-radius: 50%; }
.landing-hero-copy { position: relative; z-index: 2; }
.landing-kicker { margin: 0 0 15px; color: var(--landing-teal); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.landing-kicker > span { display: inline-block; width: 18px; height: 2px; margin: 0 7px 3px 0; background: #df9b45; }
.landing-kicker.light { color: #a7f3d0; }
.landing-hero h1 { max-width: 650px; margin: 0; color: var(--landing-ink); font-size: clamp(42px, 5.25vw, 68px); line-height: .99; letter-spacing: -.055em; }
.landing-hero h1 em { display: block; color: var(--landing-teal); font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.04em; }
.landing-hero-lead { max-width: 610px; margin: 25px 0 0; color: #53686f; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; }
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 30px; }
.landing-cta { display: inline-flex; gap: 18px; align-items: center; justify-content: center; min-height: 50px; padding: 13px 19px; border: 1px solid var(--landing-teal); border-radius: 9px; color: #fff; background: var(--landing-teal); box-shadow: 0 12px 26px rgba(15,118,110,.2); font-size: 13px; font-weight: 850; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.landing-cta:hover { transform: translateY(-2px); background: #0b645e; box-shadow: 0 16px 30px rgba(15,118,110,.28); }
.landing-cta span { font-size: 18px; }
.landing-text-link { display: inline-flex; gap: 9px; align-items: center; color: var(--landing-ink); font-size: 13px; font-weight: 850; }
.landing-text-link span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #b9ccc8; border-radius: 50%; color: var(--landing-teal); font-size: 9px; }
.landing-trust-row { display: flex; flex-wrap: wrap; gap: 9px 21px; margin-top: 27px; color: #65777d; font-size: 11px; font-weight: 700; }
.landing-trust-row span::before { content: "✓"; margin-right: 7px; color: var(--landing-teal); font-weight: 950; }
.landing-hero-proof { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 21px; color: #28434a; font-size: 10px; }
.landing-hero-proof b { padding: 6px 9px; border: 1px solid #d7e6e2; border-radius: 999px; background: rgba(255,255,255,.74); font-weight: 850; }
.landing-hero-proof i { width: 13px; height: 1px; background: #9abbb4; }
.landing-product-preview { position: relative; z-index: 2; min-width: 0; overflow: hidden; border: 7px solid rgba(255,255,255,.82); border-radius: 20px; background: #fff; box-shadow: 0 35px 80px rgba(15,56,61,.2); transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.preview-window-bar { display: flex; gap: 5px; align-items: center; min-height: 32px; padding: 0 12px; border-bottom: 1px solid #e9eeee; background: #fff; }
.preview-window-bar > span { width: 6px; height: 6px; border-radius: 50%; background: #cbd7d7; }
.preview-window-bar small { margin-left: 16px; padding: 4px 35px; border-radius: 5px; color: #849497; background: #f3f6f6; font-size: 7px; }
.preview-app { display: grid; grid-template-columns: 58px 1fr; min-height: 405px; background: #f5f8f8; }
.preview-sidebar { display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 16px 0; color: #fff; background: var(--landing-deep); }
.preview-sidebar strong { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--landing-deep); background: #a7f3d0; font-size: 8px; }
.preview-sidebar i { width: 17px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.27); }
.preview-sidebar i:nth-child(2) { width: 26px; height: 26px; border-radius: 7px; background: rgba(167,243,208,.18); box-shadow: inset 3px 0 #5ee4bc; }
.preview-content { min-width: 0; padding: clamp(18px, 3vw, 28px); }
.preview-heading { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.preview-heading div { display: grid; gap: 4px; }
.preview-heading small { color: #7e9195; font-size: 8px; }
.preview-heading strong { font-size: clamp(12px, 1.3vw, 17px); }
.preview-heading > span { padding: 8px 11px; border-radius: 6px; color: #fff; background: var(--landing-teal); font-size: 7px; font-weight: 850; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.preview-metrics article { display: grid; gap: 6px; min-width: 0; padding: 13px; border: 1px solid #e1e9e7; border-radius: 9px; background: #fff; box-shadow: 0 5px 14px rgba(15,56,61,.04); }
.preview-metrics small { overflow: hidden; color: #71868a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.preview-metrics strong { font-size: clamp(10px, 1.1vw, 14px); }
.preview-metrics b { color: var(--landing-teal); font-size: 6px; font-weight: 750; }
.preview-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; margin-top: 10px; }
.preview-chart, .preview-activity { min-width: 0; min-height: 190px; padding: 14px; border: 1px solid #e1e9e7; border-radius: 9px; background: #fff; }
.preview-chart div { display: flex; justify-content: space-between; gap: 8px; font-size: 8px; }
.preview-chart small { color: #87969a; font-size: 6px; }
.preview-chart > span { display: flex; gap: 7px; align-items: flex-end; height: 120px; margin-top: 18px; padding: 0 5px 10px; border-bottom: 1px solid #e7eeee; }
.preview-chart i { flex: 1; min-width: 7px; border-radius: 4px 4px 1px 1px; background: linear-gradient(#29aa91, #c1eee2); }
.preview-activity { display: grid; align-content: start; gap: 15px; }
.preview-activity > strong { font-size: 8px; }
.preview-activity p { display: grid; grid-template-columns: auto 1fr; gap: 5px; margin: 0; color: #53666c; font-size: 7px; }
.preview-activity p span { grid-row: 1 / 3; width: 17px; height: 17px; border-radius: 5px; background: #ddf4ed; }
.preview-activity p b { color: var(--landing-teal); font-size: 6px; }
.landing-proof-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1180px, calc(100% - 40px)); margin: -24px auto 0; padding: 22px 0; border: 1px solid #dbe6e3; border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 15px 40px rgba(15,56,61,.09); }
.landing-proof-strip div { display: grid; gap: 3px; padding: 0 25px; border-right: 1px solid #e1e9e7; }
.landing-proof-strip div:last-child { border-right: 0; }
.landing-proof-strip strong { font-size: 12px; }
.landing-proof-strip span { color: #74868b; font-size: 10px; }
.landing-section { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0; scroll-margin-top: 30px; }
.landing-section-heading { max-width: 640px; margin-bottom: 48px; }
.landing-section-heading.centered { margin-right: auto; margin-left: auto; text-align: center; }
.landing-section-heading h2, .landing-business h2, .landing-security h2, .landing-final-cta h2 { margin: 0; color: var(--landing-ink); font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.045em; }
.landing-section-heading > p:last-child, .landing-business-copy > p, .landing-security > div > p:last-child, .landing-final-cta > div > p:last-child { margin: 16px 0 0; color: #61757b; font-size: 15px; line-height: 1.7; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.landing-feature { position: relative; display: grid; align-content: start; min-height: 245px; padding: 28px; border: 1px solid #dce6e4; border-radius: 14px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.landing-feature:hover { transform: translateY(-4px); border-color: #9ccfc5; box-shadow: 0 20px 45px rgba(15,56,61,.09); }
.landing-feature.featured { color: #fff; border-color: var(--landing-deep); background: linear-gradient(145deg, var(--landing-deep), #0b5652); }
.feature-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 28px; border-radius: 10px; color: var(--landing-teal); background: #e4f6f1; font-size: 10px; font-weight: 950; }
.landing-feature.featured .feature-icon { color: var(--landing-deep); background: #a7f3d0; }
.landing-feature h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.025em; }
.landing-feature p { margin: 0; color: #65777d; font-size: 12px; line-height: 1.65; }
.landing-feature.featured p { color: rgba(255,255,255,.72); }
.landing-feature a { display: inline-flex; gap: 9px; align-items: center; margin-top: 18px; color: #a7f3d0; font-size: 11px; font-weight: 850; }
.landing-outcomes { display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); gap: clamp(48px, 7vw, 95px); align-items: center; padding: 95px max(20px, calc((100vw - 1120px) / 2)); color: #fff; background: radial-gradient(circle at 10% 15%, rgba(46,183,158,.22), transparent 27%), linear-gradient(140deg, #0b2831 0%, #073b3a 100%); scroll-margin-top: 78px; }
.landing-outcomes h2 { margin: 0; color: #fff; font-size: clamp(34px, 4vw, 50px); line-height: 1.06; letter-spacing: -.045em; }
.landing-outcomes-intro > p:not(.landing-kicker) { margin: 18px 0 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.7; }
.landing-text-link.light { margin-top: 25px; color: #fff; }
.landing-text-link.light span { color: #073b3a; border-color: #a7f3d0; background: #a7f3d0; }
.landing-outcome-grid { display: grid; gap: 10px; }
.landing-outcome-grid article { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 15px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.07); }
.landing-outcome-grid article::after { content: ""; position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-radius: 0 0 0 80px; background: rgba(167,243,208,.04); }
.landing-outcome-grid span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #073b3a; background: #a7f3d0; font-size: 10px; font-weight: 950; }
.landing-outcome-grid strong { align-self: end; font-size: 15px; }
.landing-outcome-grid p { margin: 0; color: rgba(255,255,255,.63); font-size: 11px; line-height: 1.55; }
.landing-business { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(50px, 8vw, 110px); align-items: center; padding: 100px max(20px, calc((100vw - 1120px) / 2)); color: #fff; background: radial-gradient(circle at 90% 20%, rgba(46,183,158,.2), transparent 25%), var(--landing-deep); scroll-margin-top: 20px; }
.landing-business h2, .landing-security h2, .landing-final-cta h2 { color: #fff; }
.landing-business-copy > p { color: rgba(255,255,255,.68); }
.landing-business-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.landing-business-types span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #d4eae6; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 750; }
.landing-business-card { padding: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: rgba(255,255,255,.08); box-shadow: 0 25px 55px rgba(0,0,0,.15); backdrop-filter: blur(8px); }
.landing-business-card > p { margin: 0 0 20px; color: #a7f3d0; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.landing-business-card ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.landing-business-card li { display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.12); }
.landing-business-card li > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--landing-deep); background: #a7f3d0; font-size: 11px; font-weight: 950; }
.landing-business-card li div { display: grid; gap: 5px; }
.landing-business-card strong { font-size: 13px; }
.landing-business-card small { color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.5; }
.landing-steps { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 8vw, 100px); align-items: start; }
.landing-steps .landing-section-heading { position: sticky; top: 35px; }
.landing-steps ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.landing-steps li { display: grid; grid-template-columns: auto 1fr; gap: 19px; padding: 25px 0; border-bottom: 1px solid #dae5e2; }
.landing-steps li > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; color: var(--landing-teal); background: #e4f6f1; font-size: 11px; font-weight: 950; }
.landing-steps li div { display: grid; gap: 6px; }
.landing-steps strong { font-size: 17px; }
.landing-steps li p { margin: 0; color: #65777d; font-size: 12px; line-height: 1.55; }
.landing-flow { width: min(1180px, calc(100% - 40px)); }
.landing-flow-track { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; }
.landing-flow-track > i { color: #78a59d; font-size: 20px; font-style: normal; }
.landing-flow-track article { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; min-height: 132px; padding: 21px; border: 1px solid #dce7e4; border-radius: 14px; background: linear-gradient(145deg, #fff, #f6faf8); box-shadow: 0 12px 30px rgba(15,56,61,.05); }
.landing-flow-track article > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--landing-teal); background: #e1f4ee; font-size: 9px; font-weight: 950; }
.landing-flow-track article > div { display: grid; gap: 7px; }
.landing-flow-track strong { font-size: 13px; line-height: 1.25; }
.landing-flow-track small { color: #6b7d81; font-size: 10px; line-height: 1.5; }
.landing-pricing { width: 100%; padding-right: max(20px, calc((100vw - 1120px) / 2)); padding-left: max(20px, calc((100vw - 1120px) / 2)); background: var(--landing-sand); }
.landing-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.landing-plan-grid.single { grid-template-columns: minmax(270px, 390px); justify-content: center; }
.landing-plan { position: relative; display: grid; gap: 20px; padding: 29px; border: 1px solid #d8d7cf; border-radius: 15px; background: rgba(255,255,255,.72); }
.landing-plan.recommended { border: 2px solid var(--landing-teal); background: #fff; box-shadow: 0 22px 50px rgba(15,56,61,.12); }
.landing-plan-badge { position: absolute; top: -12px; right: 20px; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--landing-teal); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.landing-plan > div { display: grid; gap: 7px; }
.landing-plan > div p { margin: 0; font-size: 20px; font-weight: 900; }
.landing-plan > div span { min-height: 37px; color: #697b80; font-size: 11px; line-height: 1.55; }
.landing-plan > strong { font-size: 34px; letter-spacing: -.04em; }
.landing-plan > strong small { font-size: 12px; letter-spacing: normal; }
.landing-plan > strong em { color: #76878b; font-size: 10px; font-style: normal; letter-spacing: normal; }
.landing-annual-price { margin: -14px 0 0; color: var(--landing-teal); font-size: 10px; font-weight: 800; }
.landing-plan ul { display: grid; gap: 10px; margin: 0; padding: 18px 0 18px; border-top: 1px solid #e1e2dc; list-style: none; }
.landing-plan li { color: #52666c; font-size: 11px; }
.landing-plan li::before { content: "✓"; margin-right: 9px; color: var(--landing-teal); font-weight: 950; }
.landing-plan .secondary-button, .landing-plan .landing-cta { margin-top: auto; }
.landing-plan-empty { display: grid; gap: 14px; max-width: 540px; margin: 0 auto; padding: 30px; border: 1px solid #d8d7cf; border-radius: 15px; background: #fff; text-align: center; }
.landing-plan-empty p { margin: 0; color: #65777d; }
.landing-pricing-note { max-width: 760px; margin: 24px auto 0; color: #727c7e; font-size: 10px; text-align: center; }
.landing-security { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 8vw, 100px); align-items: center; padding: 90px max(20px, calc((100vw - 1120px) / 2)); color: #fff; background: #0b2831; }
.landing-security > div > p:last-child { color: rgba(255,255,255,.65); }
.landing-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.landing-security-grid article { display: grid; gap: 7px; min-height: 150px; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.05); }
.landing-security-grid span { color: #5ee4bc; font-size: 10px; font-weight: 900; }
.landing-security-grid strong { margin-top: auto; font-size: 15px; }
.landing-security-grid small { color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.45; }
.landing-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 8vw, 100px); }
.landing-faq-list { display: grid; align-content: start; }
.landing-faq-list details { border-bottom: 1px solid #dbe5e3; }
.landing-faq-list summary { display: flex; justify-content: space-between; gap: 15px; padding: 20px 0; cursor: pointer; list-style: none; color: var(--landing-ink); font-size: 14px; font-weight: 850; }
.landing-faq-list summary::-webkit-details-marker { display: none; }
.landing-faq-list summary span { color: var(--landing-teal); font-size: 18px; transition: transform .18s ease; }
.landing-faq-list details[open] summary span { transform: rotate(45deg); }
.landing-faq-list details p { margin: -6px 35px 20px 0; color: #65777d; font-size: 12px; line-height: 1.65; }
.landing-final-cta { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; width: min(1120px, calc(100% - 40px)); margin: 0 auto 75px; padding: 55px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 84% 10%, rgba(167,243,208,.18), transparent 35%), linear-gradient(135deg, var(--landing-teal), var(--landing-deep)); box-shadow: 0 25px 60px rgba(15,56,61,.2); }
.landing-final-cta > div:first-child { max-width: 680px; }
.landing-final-cta > div > p:last-child { color: rgba(255,255,255,.72); }
.landing-final-cta > div:last-child { display: grid; gap: 10px; justify-items: center; }
.landing-final-cta small { color: rgba(255,255,255,.68); font-size: 9px; }
.landing-cta.light-button { color: var(--landing-deep); border-color: #fff; background: #fff; box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.landing-footer { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 22px 50px; align-items: center; padding: 45px max(20px, calc((100vw - 1120px) / 2)); border-top: 1px solid #dce6e4; background: #f8faf9; }
.landing-footer p { max-width: 360px; margin: 0; color: #66787d; font-size: 11px; line-height: 1.55; }
.landing-footer nav { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-end; }
.landing-footer nav a { color: #4d6268; font-size: 10px; font-weight: 750; }
.landing-footer > small { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid #e0e8e6; color: #819094; font-size: 9px; }
@media (max-width: 1040px) {
  .landing-nav { display: none; }
  .landing-header { grid-template-columns: auto 1fr auto; }
  .landing-header-actions { justify-self: end; }
  .landing-hero { grid-template-columns: 1fr; padding-top: 55px; }
  .landing-hero-copy { max-width: 760px; }
  .landing-product-preview { width: min(760px, 100%); margin: 0 auto; transform: none; }
  .landing-feature-grid, .landing-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-outcomes { grid-template-columns: 1fr; }
  .landing-outcomes-intro { max-width: 720px; }
  .landing-flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-flow-track > i { display: none; }
}
@media (max-width: 760px) {
  .landing-header { grid-template-columns: 1fr auto; min-height: 70px; padding-right: 14px; padding-left: 14px; }
  .landing-header-actions { display: none; }
  .landing-mobile-menu { display: block; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 45px; min-height: 0; padding: 55px 18px 75px; }
  .landing-hero::before { display: none; }
  .landing-hero h1 { font-size: clamp(39px, 12vw, 56px); }
  .landing-hero-lead { font-size: 15px; }
  .landing-hero-actions { align-items: stretch; }
  .landing-cta { width: 100%; }
  .landing-trust-row { display: grid; }
  .landing-hero-proof i { display: none; }
  .landing-product-preview { border-width: 4px; border-radius: 13px; }
  .preview-app { grid-template-columns: 38px 1fr; min-height: 330px; }
  .preview-sidebar { gap: 14px; }
  .preview-sidebar strong { width: 25px; height: 25px; }
  .preview-sidebar i { width: 13px; }
  .preview-content { padding: 13px; }
  .preview-heading > span { display: none; }
  .preview-metrics { gap: 5px; margin-top: 13px; }
  .preview-metrics article { padding: 8px; }
  .preview-metrics b { display: none; }
  .preview-grid { grid-template-columns: 1fr; gap: 6px; }
  .preview-chart { min-height: 155px; }
  .preview-chart > span { height: 90px; }
  .preview-activity { display: none; }
  .landing-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -28px; }
  .landing-proof-strip div { padding: 14px 17px; }
  .landing-proof-strip div:nth-child(2) { border-right: 0; }
  .landing-proof-strip div:nth-child(-n+2) { border-bottom: 1px solid #e1e9e7; }
  .landing-section { padding: 78px 0; }
  .landing-section-heading { margin-bottom: 34px; }
  .landing-feature-grid, .landing-plan-grid, .landing-security-grid { grid-template-columns: 1fr; }
  .landing-feature { min-height: auto; }
  .landing-outcomes, .landing-business, .landing-steps, .landing-security, .landing-faq { grid-template-columns: 1fr; gap: 38px; padding-top: 75px; padding-bottom: 75px; }
  .landing-flow-track { grid-template-columns: 1fr; }
  .landing-steps .landing-section-heading { position: static; }
  .landing-plan-grid.single { grid-template-columns: 1fr; }
  .landing-final-cta { grid-template-columns: 1fr; gap: 28px; padding: 36px 25px; }
  .landing-final-cta > div:last-child { justify-items: stretch; }
  .landing-footer { grid-template-columns: 1fr; }
  .landing-footer nav { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landing-page *, .landing-page *::before, .landing-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* SaaS operations workspace */
.saas-page { display: grid; gap: 18px; }
.saas-hero { margin-bottom: 0; }
.saas-action-menu { position: relative; }
.saas-action-menu > summary { list-style: none; cursor: pointer; }
.saas-action-menu > summary::-webkit-details-marker { display: none; }
.saas-action-popover { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .16); }
.saas-action-popover a { display: block; padding: 10px 12px; border-radius: 7px; color: var(--text); font-weight: 700; text-decoration: none; }
.saas-action-popover a:hover { background: var(--bg); }
.danger-outline { color: #b42318; border-color: #f0b4ae; }
.saas-section-nav { display: flex; gap: 6px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.saas-section-nav a { display: flex; gap: 6px; align-items: center; padding: 9px 10px; border-radius: 7px; color: var(--muted); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.saas-section-nav a:hover { color: var(--accent); background: var(--bg); }
.saas-section-nav a.active { color: #fff; background: var(--accent); }
.saas-section-nav a.active span { color: var(--accent-strong); background: #fff; }
.saas-section-nav span, .saas-count { padding: 2px 7px; border-radius: 999px; background: #e8eef6; color: #334155; font-size: 11px; }
.saas-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.saas-metrics article { display: grid; gap: 5px; min-height: 112px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 5px 14px rgba(15, 23, 42, .04); }
.saas-metrics article::before { content: ""; width: 28px; height: 3px; border-radius: 99px; background: var(--accent); }
.saas-metrics article.needs-attention::before { background: #dc6b28; }
.saas-metrics span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.saas-metrics strong { font-size: clamp(22px, 2vw, 30px); color: var(--text); }
.saas-metrics small { color: var(--muted); }
.saas-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.saas-overview-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 92px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: #fff; text-decoration: none; box-shadow: 0 5px 14px rgba(15, 23, 42, .04); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.saas-overview-card:hover { transform: translateY(-2px); border-color: #8bc9c3; box-shadow: 0 12px 24px rgba(15, 23, 42, .09); }
.saas-overview-card div { display: grid; gap: 4px; }
.saas-overview-card strong { font-size: 15px; }
.saas-overview-card small { color: var(--muted); }
.saas-overview-card b { color: var(--accent); font-size: 20px; }
.saas-overview-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 900; }
.saas-workspace { padding: 18px; scroll-margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.saas-workspace,
.saas-control-grid > * { min-width: 0; }
.table-responsive,
.table-wrap,
.table-scroll,
.responsive-table,
.list-table-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > table,
.table-wrap > table,
.table-scroll > table,
.responsive-table > table,
.list-table-wrapper > table {
  max-width: 100%;
}
.saas-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 15px; }
.saas-section-heading h2, .saas-section-heading p { margin: 0; }
.saas-section-heading h2 { margin-bottom: 4px; }
.saas-search { display: flex; gap: 7px; width: min(410px, 100%); }
.saas-search input { flex: 1; min-width: 170px; }
.saas-subscription-list { display: grid; gap: 10px; }
.saas-subscription-card { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(135px, .8fr) minmax(300px, 1.5fr) auto; gap: 18px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; }
.saas-company-block, .saas-status-block { display: grid; gap: 5px; }
.saas-company-block strong { font-size: 15px; }
.saas-company-block small, .saas-status-block small { color: var(--muted); }
.saas-status-block .status-pill { width: max-content; }
.saas-usage-block { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 7px 14px; }
.saas-usage-block div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px dashed #d7deea; font-size: 12px; }
.saas-usage-block span { color: var(--muted); }
.saas-card-action { position: relative; }
.saas-manage-panel > summary, .saas-payment-panel > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.saas-manage-panel > summary::-webkit-details-marker, .saas-payment-panel > summary::-webkit-details-marker { display: none; }
.saas-manage-panel[open] { grid-column: 1 / -1; }
.saas-manage-panel form { position: absolute; z-index: 15; right: 0; top: calc(100% + 8px); width: min(720px, 85vw); padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); }
.saas-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; }
.saas-edit-grid label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; }
.saas-edit-grid input, .saas-edit-grid select { width: 100%; }
.saas-checks { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 0; }
.saas-form-actions { display: flex; justify-content: flex-end; }
.saas-billing-grid { display: grid; gap: 12px; }
.saas-billing-grid h3 { margin: 0 0 10px; }
.saas-payment-panel { position: relative; }
.saas-payment-panel form { position: absolute; z-index: 15; right: 0; top: calc(100% + 7px); width: 300px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 34px rgba(15, 23, 42, .17); }
.saas-payment-panel form p { margin: 0; }
.saas-secondary-panel > summary, .saas-create-panel > summary { display: flex; justify-content: space-between; gap: 14px; padding: 13px 15px; cursor: pointer; list-style: none; border-radius: 9px; background: #f5f7fa; }
.saas-secondary-panel > summary::-webkit-details-marker, .saas-create-panel > summary::-webkit-details-marker { display: none; }
.saas-secondary-panel > summary span, .saas-create-panel > summary small { color: var(--muted); }
.saas-secondary-panel[open] > summary { margin-bottom: 12px; }
.saas-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 12px; }
.saas-plan-card { display: grid; gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; }
.saas-plan-card h3 { margin: 8px 0 0; }
.saas-plan-card p, .saas-plan-card ul { margin: 0; color: var(--muted); }
.saas-plan-card ul { display: grid; gap: 5px; padding-left: 18px; }
.saas-plan-price { font-size: 23px; color: var(--accent); }
.saas-plan-price small { color: var(--muted); font-size: 12px; }
.saas-plan-edit { margin-top: auto; }
.saas-plan-edit > summary { list-style: none; cursor: pointer; text-align: center; }
.saas-plan-edit > summary::-webkit-details-marker { display: none; }
.saas-plan-edit[open]::before { content: ""; position: fixed; z-index: 70; inset: 0; background: rgba(15, 23, 42, .56); backdrop-filter: blur(2px); }
.saas-plan-edit form { position: fixed; z-index: 71; top: 50%; left: 50%; width: min(900px, calc(100vw - 40px)); max-height: calc(100vh - 60px); padding: 22px; overflow-y: auto; transform: translate(-50%, -50%); border-radius: 14px; background: #fff; box-shadow: 0 28px 70px rgba(15, 23, 42, .35); }
.saas-plan-edit form::before { content: "Editar plan comercial"; display: block; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 19px; font-weight: 900; }
.saas-feature-fieldset { margin: 4px 0 0; padding: 18px; border: 1px solid #b9dcd8; border-radius: 12px; background: #f5fbfa; }
.saas-feature-fieldset legend { padding: 0 8px; color: var(--accent); font-weight: 900; }
.saas-feature-fieldset > p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.saas-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
fieldset.saas-feature-fieldset .saas-feature-grid .checkbox-label { grid-column: auto; min-height: 72px; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.saas-feature-grid .checkbox-label:has(input:checked) { border-color: #58b7ad; background: #e9f8f5; box-shadow: inset 3px 0 0 var(--accent); }
.saas-feature-grid .form-label { color: var(--text); font-weight: 800; }
.saas-feature-reduction { margin-top: 14px; padding: 12px; border: 1px solid #f1c7a8; border-radius: 10px; background: #fff8f1; }
.saas-feature-reduction .checkbox-label { margin: 0; border: 0; background: transparent; }
.saas-feature-reduction .form-label { color: #9a3412; font-weight: 900; }

/* Public SaaS access and onboarding */
.app-shell.public-shell { display: block; min-height: 100vh; }
.public-shell .app-main { width: 100%; }
.public-shell .page { width: 100%; max-width: none; padding: 0; }
.auth-product-shell { display: grid; grid-template-columns: minmax(330px, .9fr) minmax(390px, 1.1fr); width: min(1040px, calc(100% - 32px)); min-height: 620px; margin: 36px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 26px 70px rgba(23, 32, 51, .13); }
.auth-product-story { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px); color: #fff; background: linear-gradient(145deg, #0b3f3b 0%, #0f766e 65%, #15978c 100%); }
.auth-product-story .eyebrow { color: #a7f3d0; }
.auth-product-story h1 { max-width: 500px; margin: 12px 0 18px; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.auth-product-story p { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.65; }
.auth-product-story ul { display: grid; gap: 12px; margin: 25px 0 0; padding: 0; list-style: none; }
.auth-product-story li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border-radius: 50%; color: #064e3b; background: #a7f3d0; font-weight: 900; }
.auth-trust-note { display: flex; gap: 11px; align-items: center; margin-top: 30px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: rgba(255,255,255,.09); }
.auth-trust-note > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #075e54; background: #a7f3d0; font-weight: 950; }
.auth-trust-note div { display: grid; gap: 2px; }
.auth-trust-note small { color: rgba(255,255,255,.7); }
.auth-logo { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 13px; color: var(--accent); background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.13); font-size: 16px; font-weight: 950; text-decoration: none; }
.auth-product-card { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: clamp(32px, 5vw, 64px); }
.auth-product-card h2 { margin: 4px 0; font-size: 30px; }
.auth-product-card .form-stack { gap: 16px; }
.auth-product-card .form-stack input { min-height: 44px; }
.auth-form-row { display: flex; justify-content: flex-end; margin-top: -4px; }
.auth-form-row a { color: var(--accent); font-size: 13px; font-weight: 800; }
.auth-optional-security { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; }
.auth-optional-security summary { padding: 11px 13px; cursor: pointer; color: var(--accent-strong); font-size: 12px; font-weight: 850; }
.auth-optional-security label { padding: 0 13px 13px; }
.auth-primary-action { width: 100%; justify-content: center; min-height: 44px; }
.auth-signup-callout { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }
.signup-shell { display: grid; gap: 20px; width: min(1040px, calc(100% - 32px)); margin: 28px auto 60px; }
.signup-header { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.signup-header .auth-logo { margin: 0; color: #fff; background: var(--accent); }
.signup-header h1, .signup-header p { margin: 2px 0; }
.signup-header > a:last-child { color: var(--accent); font-weight: 800; }
.signup-form { display: grid; gap: 14px; }
.signup-progress, .company-create-progress { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.signup-progress span, .company-create-progress span { display: flex; gap: 7px; align-items: center; color: #405065; font-size: 12px; font-weight: 850; white-space: nowrap; }
.signup-progress b, .company-create-progress b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: var(--accent); font-size: 10px; }
.signup-progress i, .company-create-progress i { width: min(70px, 7vw); height: 1px; background: #cad5df; }
.signup-section { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(23, 32, 51, .04); }
.signup-step { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: var(--accent); font-weight: 900; }
.signup-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.signup-fields > * { grid-column: 1; }
.signup-fields header h2, .signup-fields header p { margin: 0 0 4px; }
.signup-fields > .checkbox-label { grid-column: 1; }
.signup-section:last-of-type .form-grid .form-field { grid-column: span 4; }
.signup-availability-warning { display: grid; gap: 3px; padding: 13px 15px; border: 1px solid #f0cf82; border-radius: 10px; color: #7a4a08; background: #fffbeb; }
.signup-availability-warning span { font-size: 12px; }
.signup-submit { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 14px; color: #fff; background: #172033; }
.signup-submit div { display: grid; gap: 3px; }
.signup-submit small { color: #cbd5e1; }
.signup-submit button:disabled { cursor: not-allowed; opacity: .6; }
.logout-card { max-width: 560px; text-align: center; }
.logout-card .auth-logo { color: #fff; background: var(--accent); }
.logout-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.danger-button { background: #b42318; border-color: #b42318; }
.trial-status-banner { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 10px 22px; color: #713f12; background: #fef3c7; border-bottom: 1px solid #f5d67b; }
.trial-status-banner div { display: flex; gap: 9px; align-items: center; }
.trial-status-banner span { font-size: 12px; }
.trial-status-banner a { color: #713f12; font-size: 12px; font-weight: 900; }
.trial-banner-actions { display: flex; gap: 8px; }
.trial-convert-link { padding: 5px 9px; border-radius: 7px; color: #fff !important; background: #92400e; text-decoration: none; }
.trial-welcome-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 42px); overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(125deg, #0b3f3b, #0f766e 65%, #15978c); box-shadow: 0 18px 44px rgba(15, 118, 110, .18); }
.trial-welcome-hero .eyebrow { color: #a7f3d0; }
.trial-welcome-hero h1 { max-width: 760px; margin: 7px 0 9px; font-size: clamp(28px, 4vw, 42px); }
.trial-welcome-hero p { margin: 0; color: rgba(255,255,255,.82); }
.trial-plan-summary { display: grid; gap: 4px; min-width: 220px; padding: 19px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.trial-plan-summary span, .trial-plan-summary small { color: rgba(255,255,255,.72); }
.trial-plan-summary strong { font-size: 21px; }
.trial-setup-panel { display: grid; gap: 20px; margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.trial-setup-panel > header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.trial-setup-panel h2, .trial-setup-panel p { margin: 3px 0; }
.trial-progress-label { padding: 6px 10px; border-radius: 999px; color: var(--accent-strong); background: #dff5f2; font-size: 11px; font-weight: 900; }
.trial-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trial-step-card { display: grid; grid-template-columns: auto 1fr; gap: 13px; min-height: 135px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: #fbfcfe; text-decoration: none; transition: .18s ease; }
.trial-step-card:hover { transform: translateY(-2px); border-color: #84c9c2; box-shadow: 0 10px 24px rgba(23,32,51,.08); }
.trial-step-card > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 900; }
.trial-step-card div { display: grid; align-content: start; gap: 5px; }
.trial-step-card small { color: var(--muted); line-height: 1.45; }
.trial-step-card b { grid-column: 2; color: var(--accent); font-size: 12px; }
.trial-setup-panel > footer { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.trial-help-strip { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-top: 14px; padding: 17px 20px; border-radius: 12px; background: #eef3f8; }
.trial-help-strip div { display: grid; gap: 3px; }
.trial-help-strip span { color: var(--muted); font-size: 12px; }
.trial-help-strip a { color: var(--accent); font-weight: 800; }
.company-create-header p:last-child { max-width: 720px; margin: 7px 0 0; color: var(--muted); }
.company-create-progress { justify-content: flex-start; margin-bottom: 16px; }
.company-create-progress span { display: grid; grid-template-columns: auto auto; }
.company-create-progress small { color: var(--muted); font-weight: 750; }
.company-create-progress .is-result b { color: #075e54; background: #d7f4ed; }
.company-create-form { display: grid; gap: 15px; }
.company-create-section { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23, 32, 51, .05); }
.company-create-section > div { display: grid; gap: 18px; }
.company-create-section header h2, .company-create-section header p { margin: 0 0 5px; }
.company-create-section header p { color: var(--muted); }
.company-create-step { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--accent); font-size: 12px; font-weight: 900; }
.company-module-note { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid #b8ddd8; border-radius: 10px; color: #0b5953; background: #effaf8; }
.company-module-note span { color: #47726e; font-size: 12px; line-height: 1.5; }
.company-create-submit { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 14px; color: #fff; background: #172033; }
.company-create-submit div { display: grid; gap: 3px; }
.company-create-submit small { color: #cbd5e1; }
.company-welcome-hero .eyebrow { display: flex; gap: 7px; align-items: center; }
.company-welcome-hero .eyebrow span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #075e54; background: #a7f3d0; }
.company-provision-summary { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin: 16px 0 0 !important; }
.company-provision-summary article { display: flex !important; gap: 12px !important; align-items: center !important; min-width: 0; padding: 17px !important; border: 1px solid var(--line) !important; border-radius: 13px !important; background: #fff !important; box-shadow: 0 7px 20px rgba(23,32,51,.04); }
.company-provision-summary article > div { display: grid; gap: 3px; min-width: 0; }
.company-provision-summary article > div > span, .company-provision-summary small { color: var(--muted); font-size: 11px; }
.company-provision-summary strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.provision-icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #087269; background: #def5f1; font-size: 12px; font-weight: 950; }
.onboarding-footer-copy { display: grid; gap: 2px; margin-right: auto; }
.onboarding-footer-copy small { color: var(--muted); }
.subscription-portal-header { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.subscription-portal-header h1, .subscription-portal-header p { margin: 3px 0; }
.subscription-current-status { display: grid; gap: 5px; min-width: 220px; padding: 16px; border-radius: 11px; background: #f5f8fa; }
.subscription-current-status .status-pill { width: max-content; }
.subscription-current-status strong { font-size: 19px; }
.subscription-current-status small { color: var(--muted); }
.subscription-conversion-panel { display: grid; gap: 20px; margin-top: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.subscription-conversion-panel > header h2, .subscription-conversion-panel > header p { margin: 3px 0; }
.subscription-plan-comparison { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 12px; }
.subscription-offer { position: relative; display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe; }
.subscription-offer.recommended { border: 2px solid var(--accent); background: #f2fbfa; }
.subscription-offer-tag { position: absolute; top: -11px; right: 14px; padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--accent); font-size: 10px; font-weight: 900; }
.subscription-offer h3, .subscription-offer p, .subscription-offer ul { margin: 0; }
.subscription-offer p, .subscription-offer > span, .subscription-offer li { color: var(--muted); font-size: 12px; }
.subscription-offer > strong { color: var(--accent); font-size: 24px; }
.subscription-offer > strong small { color: var(--muted); font-size: 11px; }
.subscription-offer ul { display: grid; gap: 5px; padding-left: 18px; }
.module-access-hero { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: center; margin-bottom: 22px; padding: 34px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #0d504c, #12877f); box-shadow: 0 18px 40px rgba(13, 80, 76, .16); }
.module-access-hero h1, .module-access-hero p { margin: 0; }
.module-access-hero h1 { max-width: 760px; margin: 8px 0 10px; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; }
.module-access-hero .eyebrow { color: #bdf4e8; }
.module-access-current { display: grid; gap: 5px; padding: 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; background: rgba(255,255,255,.1); }
.module-access-current span, .module-access-current small { color: #d9f5f0; }
.module-access-current strong { font-size: 20px; }
.module-access-panel { display: grid; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.module-access-panel header h2, .module-access-panel header p { margin: 0; }
.module-access-panel header h2 { margin: 5px 0 7px; }
.module-access-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding-top: 20px; border-top: 1px solid var(--line); }
.module-access-actions span { margin-right: auto; color: var(--muted); font-size: 13px; }
.module-access-guidance { display: flex; gap: 18px; align-items: flex-start; }
.module-access-guidance > span { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 12px; color: #fff; background: var(--accent); font-weight: 900; }
.module-access-guidance h2, .module-access-guidance p { margin: 0; }
.module-access-guidance p { margin-top: 7px; color: var(--muted); }
.subscription-checkout-form { display: grid; gap: 14px; padding: 19px; border: 1px solid #9ed5d0; border-radius: 12px; background: #f2fbfa; }
.subscription-checkout-form > div { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; }
.subscription-checkout-form > button { justify-self: end; }
.subscription-contract-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.subscription-contract-card > div { display: grid; gap: 5px; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.subscription-contract-card span, .subscription-contract-card small { color: var(--muted); }
.subscription-history { margin-top: 16px; }
.subscription-management-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; margin-top: 12px; }
.subscription-management-grid > article { display: grid; align-content: start; gap: 15px; padding: 21px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.subscription-management-grid header h2, .subscription-management-grid header p { margin: 3px 0; }
.subscription-management-grid > article:first-child form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subscription-management-grid > article:first-child form > .checkbox-label, .subscription-management-grid > article:first-child form > button { grid-column: 1 / -1; }
.scheduled-change { display: grid; gap: 4px; padding: 13px; border-radius: 9px; color: #065f46; background: #dff7ef; }
.scheduled-change small { color: #33786a; }
.subscription-change-quote { display: grid; gap: 16px; padding: 18px; border: 1px solid #b8ddd5; border-radius: 12px; background: linear-gradient(145deg, #f5fbf9, #fff); }
.subscription-change-quote-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding-bottom: 13px; border-bottom: 1px solid #d6e7e3; }
.subscription-change-quote-heading h3 { margin: 8px 0 0; }
.subscription-change-quote-heading > strong { text-align: right; }
.subscription-change-quote-details, .subscription-change-quote-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.subscription-change-quote-details > div, .subscription-change-quote-totals > div { display: grid; gap: 3px; padding: 11px 13px; border-radius: 9px; background: #fff; }
.subscription-change-quote dt { color: var(--muted); font-size: .82rem; }
.subscription-change-quote dd { margin: 0; font-weight: 700; }
.subscription-change-quote-totals .quote-total { grid-column: 1 / -1; color: #fff; background: var(--accent); }
.subscription-change-quote-totals .quote-total dt { color: #d4f2eb; }
.subscription-change-note { margin: 0; color: var(--muted); }
.subscription-change-confirmation { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding-top: 4px; }
.subscription-cancel-card { background: #fffafa !important; }
.subscription-cancel-card > p { color: var(--muted); }
.subscription-cancel-card details > summary { list-style: none; cursor: pointer; text-align: center; }
.subscription-cancel-card details > summary::-webkit-details-marker { display: none; }
.subscription-cancel-card details form { display: grid; gap: 12px; margin-top: 10px; padding: 13px; border: 1px solid #f1b8b3; border-radius: 9px; background: #fff; }
.subscription-report-payment { position: relative; }
.gateway-pay-form { display: grid; gap: 4px; margin-bottom: 7px; }
.gateway-pay-form small { color: var(--muted); font-size: 10px; }
.subscription-report-payment > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.subscription-report-payment > summary::-webkit-details-marker { display: none; }
.subscription-report-payment form { position: fixed; z-index: 71; top: 50%; left: 50%; width: min(560px, calc(100vw - 36px)); max-height: calc(100vh - 50px); padding: 22px; overflow-y: auto; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 28px 70px rgba(15,23,42,.3); }
.subscription-report-payment[open]::before { content: ""; position: fixed; z-index: 70; inset: 0; background: rgba(15,23,42,.55); }
.saas-reported-payments { padding: 17px; border: 1px solid #f1cf83; border-radius: 12px; background: #fffbeb; }
.saas-review-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.saas-review-heading h3, .saas-review-heading p { margin: 0 0 3px; }
.saas-review-heading p { color: var(--muted); }
.saas-review-heading > span { padding: 5px 9px; border-radius: 999px; color: #92400e; background: #fde68a; font-size: 11px; font-weight: 900; }
.saas-review-actions { display: flex; gap: 6px; align-items: flex-start; }
.saas-review-actions details { position: relative; }
.saas-review-actions summary { list-style: none; cursor: pointer; }
.saas-review-actions details form { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; display: grid; gap: 8px; width: 280px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 14px 30px rgba(15,23,42,.16); }
.saas-review-actions label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; }
.subscription-receipt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.subscription-receipt { width: min(820px, 100%); margin: 0 auto; padding: 36px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(23,32,51,.08); }
.subscription-receipt > header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 24px; border-bottom: 2px solid var(--accent); }
.subscription-receipt .auth-logo { margin: 0 0 10px; color: #fff; background: var(--accent); }
.subscription-receipt h1, .subscription-receipt p { margin: 2px 0; }
.subscription-receipt > header > div:last-child { display: grid; gap: 4px; text-align: right; }
.subscription-receipt > header span, .subscription-receipt > header small, .subscription-receipt-parties span, .subscription-receipt-parties small { color: var(--muted); }
.subscription-receipt > header > div:last-child strong { font-size: 20px; }
.subscription-receipt-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding: 24px 0; }
.subscription-receipt-parties div { display: grid; gap: 5px; }
.subscription-receipt-total { display: grid; gap: 5px; padding: 25px; border-radius: 12px; text-align: center; background: #eefaf8; }
.subscription-receipt-total span, .subscription-receipt-total small { color: var(--muted); }
.subscription-receipt-total strong { color: var(--accent); font-size: 34px; }
.subscription-receipt dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0; border: 1px solid var(--line); border-radius: 10px; }
.subscription-receipt dl div { display: grid; gap: 3px; padding: 14px; border-bottom: 1px solid var(--line); }
.subscription-receipt dt { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.subscription-receipt dd { margin: 0; font-weight: 800; }
.subscription-receipt > footer { padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: center; }
.subscription-document-links { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 13px 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.subscription-document-links > strong { white-space: nowrap; }
.subscription-document-links > div { display: flex; gap: 7px; }
.subscription-document-links a { display: flex; gap: 7px; padding: 7px 10px; border-radius: 8px; color: var(--accent); background: #edf8f7; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.subscription-document-links span { color: var(--muted); font-weight: 600; }
.subscription-invoice-document { width: min(900px, 100%); margin: 0 auto; padding: 38px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(23,32,51,.08); }
.subscription-invoice-document > header { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 24px; border-bottom: 3px solid var(--accent); }
.subscription-credit-notice { display: grid; gap: 5px; margin: 18px 0; padding: 14px 16px; border: 1px solid #f3c7c3; border-radius: 10px; color: #7a271a; background: #fff4f2; }
.subscription-credit-notice small { color: #9f4034; }
.subscription-credit-notice a { color: #7a271a; font-weight: 850; }
.subscription-integrity-status { display: flex; justify-content: space-between; gap: 14px; margin: 18px 0; padding: 11px 14px; border-radius: 9px; font-size: 12px; }
.subscription-integrity-status.valid { color: #065f46; background: #e7f8f2; }
.subscription-integrity-status.invalid { color: #8a1c13; background: #fff0ee; }
.subscription-document-concept { display: grid; gap: 5px; margin: 22px 0; padding: 18px; border-radius: 11px; background: #f4faf8; }
.subscription-document-concept span { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.subscription-document-concept p { margin: 2px 0 0; color: var(--muted); }
.subscription-invoice-document > header > div { display: grid; gap: 4px; align-content: start; }
.subscription-invoice-document > header > div:last-child { justify-items: end; text-align: right; }
.subscription-invoice-document .auth-logo { margin: 0 0 7px; color: #fff; background: var(--accent); }
.subscription-invoice-document > header h1 { margin: 2px 0; font-size: 24px; }
.subscription-invoice-document > header small, .subscription-invoice-document > header span { color: var(--muted); }
.subscription-invoice-customer { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding: 24px 0; }
.subscription-invoice-customer > div { display: grid; gap: 5px; }
.subscription-invoice-customer span, .subscription-invoice-customer small { color: var(--muted); }
.subscription-invoice-customer dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.subscription-invoice-customer dl div { display: grid; gap: 3px; }
.subscription-invoice-customer dt, .subscription-invoice-bottom dt { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.subscription-invoice-customer dd, .subscription-invoice-bottom dd { margin: 0; font-weight: 800; }
.subscription-invoice-lines { width: 100%; border-collapse: collapse; }
.subscription-invoice-lines th { padding: 10px; color: #fff; background: #172033; text-align: left; }
.subscription-invoice-lines td { padding: 15px 10px; border-bottom: 1px solid var(--line); }
.subscription-invoice-lines td:last-child, .subscription-invoice-lines th:last-child { text-align: right; }
.subscription-invoice-lines small { display: block; margin-top: 4px; color: var(--muted); }
.subscription-invoice-bottom { display: grid; grid-template-columns: 1fr 300px; gap: 35px; padding-top: 25px; }
.subscription-invoice-bottom h3 { margin: 0 0 6px; font-size: 13px; }
.subscription-invoice-bottom p { color: var(--muted); font-size: 11px; }
.subscription-invoice-bottom dl { display: grid; gap: 0; margin: 0; }
.subscription-invoice-bottom dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.subscription-invoice-bottom dl .total { font-size: 16px; }
.subscription-invoice-bottom dl .balance { color: var(--accent); font-size: 18px; }
.subscription-invoice-document > footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; text-align: center; }

@media print {
  .subscription-receipt-actions, .sidebar-nav, .trial-status-banner, .messages { display: none !important; }
  .subscription-receipt, .subscription-invoice-document { width: 100%; padding: 20px; border: 0; box-shadow: none; }
}

@media (max-width: 780px) {
  .auth-product-shell { grid-template-columns: 1fr; margin: 16px auto; }
  .auth-product-story { padding: 30px; }
  .auth-product-story ul { display: none; }
  .auth-product-card { padding: 30px; }
  .signup-header { grid-template-columns: auto 1fr; }
  .signup-header > a:last-child { grid-column: 1 / -1; }
  .signup-section { grid-template-columns: 1fr; }
  .signup-progress, .company-create-progress { justify-content: flex-start; overflow-x: auto; }
  .signup-progress i, .company-create-progress i { min-width: 30px; }
  .signup-submit { align-items: stretch; flex-direction: column; }
  .logout-actions { align-items: stretch; flex-direction: column; }
  .trial-status-banner, .trial-status-banner div { align-items: flex-start; flex-direction: column; }
  .trial-welcome-hero { grid-template-columns: 1fr; }
  .trial-step-grid { grid-template-columns: 1fr; }
  .trial-setup-panel > header, .trial-setup-panel > footer, .trial-help-strip { align-items: stretch; flex-direction: column; }
  .company-create-section { grid-template-columns: 1fr; }
  .company-create-submit { align-items: stretch; flex-direction: column; }
  .company-provision-summary { grid-template-columns: 1fr 1fr; }
  .company-picker-grid { grid-template-columns: 1fr; }
  .company-picker-card { grid-template-columns: auto minmax(0, 1fr); }
  .company-card-action { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 11px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .onboarding-footer-copy { margin-right: 0; }
  .subscription-portal-header, .subscription-contract-card { grid-template-columns: 1fr; }
  .subscription-management-grid { grid-template-columns: 1fr; }
  .subscription-management-grid > article:first-child form { grid-template-columns: 1fr; }
  .subscription-management-grid > article:first-child form > .checkbox-label, .subscription-management-grid > article:first-child form > button { grid-column: auto; }
  .subscription-change-quote-heading { align-items: start; flex-direction: column; }
  .subscription-change-quote-heading > strong { text-align: left; }
  .subscription-change-quote-details, .subscription-change-quote-totals { grid-template-columns: 1fr; }
  .subscription-plan-comparison { grid-template-columns: 1fr; }
  .subscription-checkout-form > div { grid-template-columns: 1fr; }
  .subscription-checkout-form > button { justify-self: stretch; }
  .subscription-receipt-actions { align-items: stretch; flex-direction: column; }
  .subscription-receipt { padding: 22px; }
  .subscription-receipt > header { flex-direction: column; }
  .subscription-receipt > header > div:last-child { text-align: left; }
  .subscription-receipt-parties, .subscription-receipt dl { grid-template-columns: 1fr; }
  .subscription-invoice-document { padding: 22px; }
  .subscription-invoice-document > header, .subscription-invoice-customer, .subscription-invoice-bottom { grid-template-columns: 1fr; flex-direction: column; }
  .subscription-invoice-document > header > div:last-child { justify-items: start; text-align: left; }
  .subscription-invoice-customer dl { grid-template-columns: 1fr; gap: 10px; }
}
.saas-creation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; scroll-margin-top: 20px; }
.saas-creation-grid.single { grid-template-columns: minmax(0, 880px); }
.saas-create-panel { scroll-margin-top: 20px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.saas-create-panel > summary { border-radius: 10px; padding: 17px; background: #fff; }
.saas-create-panel[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.saas-create-panel form { padding: 18px; }
.saas-page .list-table td > small { display: block; margin-top: 3px; color: var(--muted); }
.saas-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.saas-audit-grid { grid-template-columns: minmax(0, 1fr); }
.saas-audit-card { padding: 0; overflow: hidden; }
.saas-audit-card .saas-section-heading { margin: 0; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #fff, #f6fafb); }
.saas-audit-card .table-responsive { max-height: 440px; }
.saas-audit-table { min-width: 780px; table-layout: fixed; }
.saas-audit-table th { padding: 11px 14px; font-size: 10px; letter-spacing: .045em; }
.saas-audit-table td { padding: 13px 14px; vertical-align: top; }
.saas-audit-table tbody tr:hover { background: #f5faf9; }
.saas-audit-table .audit-date { width: 145px; font-variant-numeric: tabular-nums; }
.saas-audit-table .audit-actor,
.saas-audit-table .audit-company,
.saas-audit-table .audit-user { width: 150px; }
.saas-audit-table .audit-action { width: 185px; }
.saas-audit-table .audit-ip { width: 135px; }
.saas-audit-table .audit-detail { min-width: 260px; overflow-wrap: anywhere; white-space: normal; line-height: 1.45; }
.audit-action-code { display: inline-flex; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid #cde3df; border-radius: 999px; color: #075e57; background: #edf8f6; font-family: inherit; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.audit-panel-count { align-self: flex-start; padding: 5px 9px; border-radius: 999px; color: var(--accent-strong); background: #dff5f2; font-size: 11px; font-weight: 900; white-space: nowrap; }
.saas-audit-events { padding: 12px; }
.saas-audit-events > summary { align-items: center; }
.saas-health-grid { display: grid; gap: 9px; }
.saas-health-item { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.saas-health-item > div { display: grid; gap: 3px; }
.saas-health-item small { color: var(--muted); }
.saas-health-item b { color: var(--muted); font-size: 11px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148, 163, 184, .14); }
.status-dot.ok { background: #15956f; box-shadow: 0 0 0 4px rgba(21, 149, 111, .14); }
.status-dot.error { background: #d92d20; box-shadow: 0 0 0 4px rgba(217, 45, 32, .14); }
.status-dot.stale { background: #dc6b28; box-shadow: 0 0 0 4px rgba(220, 107, 40, .14); }
.saas-operation-list { display: grid; gap: 8px; }
.saas-operation-list form,
.saas-operation-list > div { display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 50px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; }
.saas-operation-list span { display: grid; gap: 3px; }
.saas-operation-list small { color: var(--muted); font-size: 11px; }
.saas-operation-list b { color: var(--muted); font-size: 11px; white-space: nowrap; }

@media (max-width: 1100px) {
  .saas-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saas-overview-grid { grid-template-columns: 1fr; }
  .saas-subscription-card { grid-template-columns: 1fr 1fr auto; }
  .saas-usage-block { grid-column: 1 / 3; }
  .saas-plan-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .saas-control-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .saas-feature-grid { grid-template-columns: 1fr; }
  .module-access-hero { grid-template-columns: 1fr; padding: 24px; }
  .module-access-actions { align-items: stretch; flex-direction: column-reverse; }
  .saas-metrics, .saas-plan-grid, .saas-creation-grid { grid-template-columns: 1fr; }
  .saas-subscription-card { grid-template-columns: 1fr; align-items: stretch; }
  .saas-usage-block { grid-column: auto; }
  .saas-card-action .secondary-button { width: 100%; }
  .saas-manage-panel form, .saas-payment-panel form { position: static; width: auto; margin-top: 9px; box-shadow: none; }
  .saas-edit-grid { grid-template-columns: 1fr; }
  .saas-section-heading { align-items: stretch; flex-direction: column; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .primary-button, .form-actions .secondary-button { width: 100%; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.topbar {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(221, 227, 236, .85);
  display: flex;
  justify-content: space-between;
  min-height: 74px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-inner {
  align-items: center;
  display: flex;
  gap: 22px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  min-height: 74px;
  width: 100%;
}

.brand {
  align-items: center;
  color: var(--accent-strong);
  display: flex;
  gap: 10px;
  font-weight: 800;
  min-width: max-content;
}

.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 118, 110, .24);
  color: #ffffff;
  display: inline-flex;
  font-size: 13px;
  height: 38px;
  justify-content: center;
  letter-spacing: .04em;
  width: 38px;
}

.brand-copy {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.brand-copy strong {
  font-size: 18px;
}

.brand-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.topnav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.topnav a,
.topnav button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.nav-pill {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  min-height: 36px;
  padding: 8px 11px 8px 9px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.nav-pill:hover {
  background: #eefcf8;
  border-color: #b8eee2;
  box-shadow: 0 8px 18px rgba(15, 118, 110, .10);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.nav-pill-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.nav-pill-primary:hover {
  background: #115e59;
  border-color: #115e59;
  color: #ffffff;
}

.nav-pill-muted {
  background: #f4f7fb;
  border-color: #e3e9f2;
}

.nav-divider {
  background: var(--line);
  height: 24px;
  width: 1px;
}

.logout-form {
  margin: 0;
}

.nav-icon {
  background: #e7f8f4;
  border: 1px solid rgba(15, 118, 110, .16);
  border-radius: 7px;
  color: var(--accent-strong);
  display: inline-flex;
  flex: 0 0 auto;
  height: 20px;
  position: relative;
  width: 20px;
}

.nav-pill-primary .nav-icon {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .28);
  color: #ffffff;
}

.nav-pill-muted .nav-icon {
  background: #ffffff;
  border-color: #d9e3ee;
  color: #516176;
}

.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
}

.nav-icon-dashboard::before {
  background: currentColor;
  border-radius: 2px;
  height: 4px;
  left: 5px;
  top: 5px;
  width: 4px;
  box-shadow: 6px 0 0 currentColor, 0 6px 0 currentColor, 6px 6px 0 currentColor;
}

.nav-icon-pos::before,
.nav-icon-products::before,
.nav-icon-purchases::before,
.nav-icon-receivable::before,
.nav-icon-payable::before,
.nav-icon-fiscal::before {
  border: 2px solid currentColor;
  border-radius: 3px;
  inset: 4px 5px;
}

.nav-icon-pos::after {
  background: currentColor;
  height: 2px;
  left: 7px;
  top: 8px;
  width: 6px;
  box-shadow: 0 4px 0 currentColor;
}

.nav-icon-contacts::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 5px;
  left: 6px;
  top: 4px;
  width: 5px;
}

.nav-icon-contacts::after {
  border: 2px solid currentColor;
  border-radius: 8px 8px 3px 3px;
  border-top: 0;
  height: 6px;
  left: 4px;
  top: 11px;
  width: 10px;
}

.nav-icon-products::after {
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  height: 5px;
  left: 7px;
  top: 5px;
  transform: skewY(-24deg);
  width: 5px;
}

.nav-icon-inventory::before {
  background: currentColor;
  border-radius: 2px;
  height: 2px;
  left: 4px;
  top: 5px;
  width: 12px;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

.nav-icon-inventory::after {
  background: currentColor;
  height: 12px;
  left: 9px;
  opacity: .5;
  top: 4px;
  width: 2px;
}

.nav-icon-purchases::after {
  background: currentColor;
  border-radius: 2px;
  height: 2px;
  left: 7px;
  top: 4px;
  width: 6px;
}

.nav-icon-receivable::after,
.nav-icon-payable::after {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  height: 5px;
  right: 4px;
  top: 5px;
  width: 5px;
}

.nav-icon-payable::after {
  bottom: 5px;
  top: auto;
  transform: rotate(180deg);
}

.nav-icon-cash::before {
  border: 2px solid currentColor;
  border-radius: 3px;
  height: 8px;
  left: 4px;
  top: 6px;
  width: 12px;
}

.nav-icon-cash::after {
  background: currentColor;
  border-radius: 999px;
  height: 4px;
  left: 8px;
  top: 9px;
  width: 4px;
}

.nav-icon-reports::before {
  background: currentColor;
  bottom: 4px;
  height: 5px;
  left: 5px;
  width: 3px;
  box-shadow: 5px -4px 0 currentColor, 10px -8px 0 currentColor;
}

.nav-icon-reports::after {
  background: currentColor;
  bottom: 4px;
  height: 2px;
  left: 4px;
  opacity: .45;
  width: 13px;
}

.nav-icon-fiscal::before {
  border-radius: 6px 6px 8px 8px;
  inset: 4px 5px 3px;
}

.nav-icon-fiscal::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 6px;
  left: 8px;
  top: 5px;
  transform: rotate(45deg);
  width: 3px;
}

.nav-icon-company::before {
  border: 2px solid currentColor;
  border-radius: 3px;
  height: 11px;
  left: 5px;
  top: 4px;
  width: 10px;
}

.nav-icon-company::after {
  background: currentColor;
  height: 2px;
  left: 8px;
  top: 7px;
  width: 2px;
  box-shadow: 4px 0 0 currentColor, 0 4px 0 currentColor, 4px 4px 0 currentColor;
}

.nav-icon-admin::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  inset: 5px;
}

.nav-icon-admin::after {
  background: currentColor;
  height: 2px;
  left: 4px;
  top: 9px;
  width: 12px;
  box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
}

.nav-icon-settings::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  inset: 4px;
}

.nav-icon-settings::after {
  background: currentColor;
  border-radius: 999px;
  height: 4px;
  left: 8px;
  top: 8px;
  width: 4px;
}

.nav-icon-logout::before {
  background: currentColor;
  height: 2px;
  left: 5px;
  top: 9px;
  width: 9px;
}

.nav-icon-logout::after {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  height: 5px;
  right: 5px;
  top: 6px;
  transform: rotate(45deg);
  width: 5px;
}

.nav-icon-sales::before,
.nav-icon-document::before,
.nav-icon-checklist::before,
.nav-icon-payroll::before,
.nav-icon-ledger::before {
  border: 2px solid currentColor;
  border-radius: 2px;
  inset: 3px 5px;
}

.nav-icon-sales::after,
.nav-icon-document::after,
.nav-icon-payroll::after,
.nav-icon-ledger::after {
  background: currentColor;
  height: 2px;
  left: 8px;
  top: 7px;
  width: 6px;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.nav-icon-checklist::after {
  background: currentColor;
  height: 2px;
  left: 9px;
  top: 7px;
  width: 5px;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor, -3px 0 0 currentColor, -3px 4px 0 currentColor, -3px 8px 0 currentColor;
}

.nav-icon-truck::before {
  border: 2px solid currentColor;
  border-radius: 2px;
  height: 7px;
  left: 3px;
  top: 6px;
  width: 9px;
}

.nav-icon-truck::after {
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 3px 2px 0;
  height: 5px;
  right: 2px;
  top: 8px;
  width: 5px;
  box-shadow: -9px 5px 0 -1px currentColor, 0 5px 0 -1px currentColor;
}

.nav-icon-shield::before {
  background: currentColor;
  clip-path: polygon(50% 0, 92% 18%, 82% 70%, 50% 100%, 18% 70%, 8% 18%);
  inset: 3px 4px;
}

.nav-icon-shield::after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  height: 5px;
  left: 8px;
  top: 6px;
  transform: rotate(45deg);
  width: 3px;
}

.nav-icon-tag::before {
  border: 2px solid currentColor;
  border-radius: 3px 5px 5px 3px;
  height: 8px;
  left: 4px;
  top: 5px;
  transform: rotate(-35deg);
  width: 11px;
}

.nav-icon-tag::after { background: currentColor; border-radius: 50%; height: 3px; left: 7px; top: 7px; width: 3px; }
.nav-icon-ruler::before { border: 2px solid currentColor; height: 7px; left: 3px; top: 6px; transform: rotate(-35deg); width: 13px; }
.nav-icon-ruler::after { background: currentColor; height: 4px; left: 8px; top: 6px; transform: rotate(-35deg); width: 1px; box-shadow: 4px 0 0 currentColor; }
.nav-icon-transfer::before { content: "⇄"; font-size: 18px; font-weight: 900; left: 2px; line-height: 18px; top: 0; }
.nav-icon-alert::before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid currentColor; left: 2px; top: 3px; }
.nav-icon-alert::after { background: #fff; height: 5px; left: 9px; top: 8px; width: 2px; box-shadow: 0 6px 0 -0.5px #fff; }
.nav-icon-barcode::before { background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px); inset: 4px; }
.nav-icon-bank::before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 6px solid currentColor; left: 2px; top: 3px; }
.nav-icon-bank::after { background: currentColor; height: 8px; left: 5px; top: 9px; width: 2px; box-shadow: 4px 0 0 currentColor, 8px 0 0 currentColor, -1px 7px 0 1px currentColor; }
.nav-icon-card::before { border: 2px solid currentColor; border-radius: 3px; inset: 4px 3px; }
.nav-icon-card::after { background: currentColor; height: 2px; left: 5px; top: 8px; width: 10px; }
.nav-icon-code::before { content: "<>"; font-family: monospace; font-size: 12px; font-weight: 900; left: 2px; top: 3px; }

.page {
  margin: 0 auto;
  max-width: 1240px;
  padding: 30px 24px 42px;
}

.page > *,
.content-header > *,
.page-header > *,
.section-heading > *,
.list-search-panel > *,
.list-filter-panel > * {
  min-width: 0;
}

.messages {
  margin: 16px auto 0;
  max-width: 1180px;
  padding: 0 24px;
}

.message {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  color: #065f46;
  padding: 12px 14px;
}

.message.error {
  background: #fef3f2;
  border-color: #fecdca;
  color: var(--danger);
}

.auth-shell {
  display: grid;
  min-height: calc(100vh - 150px);
  place-items: center;
}

.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 430px;
  padding: 30px;
  width: 100%;
}

.eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
}

.form-stack {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.form-stack label {
  color: var(--muted);
  display: grid;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
}

.form-stack input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  width: 100%;
}

.form-error {
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 8px;
  color: var(--danger);
  padding: 12px;
}

.primary-button,
.secondary-button {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 12px 16px;
}

.primary-button {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: white;
}

.secondary-button {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}

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

.header-actions .secondary-button.active {
  background: #e8f6f3;
  border-color: var(--accent);
  color: var(--accent);
}

.content-header,
.page-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 18px;
}

.content-header > div:first-child,
.page-header > div:first-child {
  flex: 1 1 320px;
}

.content-header .header-actions,
.page-header .header-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
}

.dashboard-hero {
  align-items: stretch;
  background:
    radial-gradient(circle at 16% 20%, rgba(20, 184, 166, .22), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbfd 48%, #eefcf8 100%);
  border: 1px solid #d8e8e5;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  margin-bottom: 22px;
  overflow: hidden;
  padding: 28px;
  position: relative;
}

.dashboard-hero::after {
  background: linear-gradient(135deg, rgba(15, 118, 110, .13), rgba(37, 99, 235, .08));
  border-radius: 999px;
  content: "";
  height: 220px;
  position: absolute;
  right: -90px;
  top: -96px;
  width: 220px;
}

.dashboard-hero-copy,
.dashboard-hero-panel {
  position: relative;
  z-index: 1;
}

.dashboard-hero-copy {
  display: grid;
  gap: 12px;
  max-width: 700px;
}

.dashboard-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0;
  line-height: 1;
}

.dashboard-hero p {
  color: #4b596d;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}

.dashboard-hero-panel {
  align-content: center;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(221, 227, 236, .95);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(23, 32, 51, .08);
  display: grid;
  gap: 10px;
  padding: 20px;
}

.dashboard-hero-panel span,
.dashboard-hero-panel small {
  color: var(--muted);
  font-weight: 800;
}

.dashboard-hero-panel strong {
  color: var(--accent-strong);
  font-size: 30px;
}

.dashboard-metrics {
  margin-bottom: 28px;
}

.dashboard-welcome {
  align-items: center;
  background:
    radial-gradient(circle at 88% -20%, rgba(70, 211, 191, .24), transparent 35%),
    linear-gradient(125deg, #0b3739 0%, #0c5b56 58%, #0f766e 100%);
  border: 1px solid rgba(15, 118, 110, .2);
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(10, 55, 57, .16);
  color: #fff;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 26px 28px;
  position: relative;
}

.dashboard-welcome::after {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  content: "";
  height: 190px;
  pointer-events: none;
  position: absolute;
  right: -64px;
  top: -108px;
  width: 190px;
}

.dashboard-welcome-copy,
.dashboard-company-actions {
  position: relative;
  z-index: 1;
}

.dashboard-welcome h1 {
  color: #fff;
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 4px 0 7px;
}

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

.dashboard-welcome p strong { color: #fff; }
.dashboard-welcome .eyebrow { color: #9ee9dc; }
.dashboard-role-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.dashboard-role-list span { padding: 4px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #e5fffa; background: rgba(255,255,255,.1); font-size: 11px; font-weight: 800; }
.dashboard-company-actions { justify-content: flex-end; }
.dashboard-company-actions > span { display: grid; gap: 2px; min-width: 120px; }
.dashboard-company-actions > span small { color: rgba(255,255,255,.62); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-company-actions > span strong { color: #fff; font-size: 13px; }
.dashboard-company-actions .secondary-button { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.dashboard-company-actions .secondary-button:hover { background: #fff; border-color: #fff; color: var(--accent-strong); }
.role-workspace-panel { margin: 20px 0 24px; padding: 20px; border: 1px solid #cddce5; border-radius: 14px; background: linear-gradient(135deg,#fff,#f4f8fa); box-shadow: 0 12px 28px rgba(23,59,87,.06); }
.role-workspace-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.role-workspace-grid > a { display: grid; gap: 5px; min-height: 120px; padding: 17px 42px 17px 17px; border: 1px solid #d9e4ea; border-radius: 11px; color: var(--text); background: #fff; position: relative; transition: .16s ease; }
.role-workspace-grid > a::after { align-items: center; background: #edf8f6; border-radius: 50%; color: var(--accent-strong); content: "→"; display: flex; font-weight: 900; height: 25px; justify-content: center; position: absolute; right: 13px; top: 13px; transition: transform .16s ease; width: 25px; }
.role-workspace-grid > a:hover { border-color: var(--accent); box-shadow: 0 10px 22px rgba(15,118,110,.09); transform: translateY(-2px); }
.role-workspace-grid > a:hover::after { transform: translateX(2px); }
.role-workspace-grid span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.role-workspace-grid strong { color: #173b57; font-size: 21px; }
.role-workspace-grid small { color: var(--muted); line-height: 1.4; }
@media (max-width: 780px) { .role-workspace-grid { grid-template-columns: 1fr; } }
.sidebar-mobile-toggle { display: none; }

.dashboard-company-actions,
.dashboard-quick-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.dashboard-action-bar {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe6ec;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(23, 32, 51, .05);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 11px 12px 11px 16px;
}

.dashboard-action-bar > div {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
}

.dashboard-action-bar > div small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dashboard-action-bar > div strong {
  font-size: 13px;
}

.dashboard-quick-actions {
  justify-content: flex-end;
}

.dashboard-quick-actions a {
  min-height: 38px;
}

.dashboard-quick-actions .primary-button span {
  font-size: 18px;
  line-height: 1;
}

.dashboard-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

.dashboard-kpi {
  background: #ffffff;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  color: var(--text);
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 118px;
  padding: 18px;
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dashboard-kpi:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(23, 32, 51, .09);
  transform: translateY(-1px);
}

.dashboard-kpi::after {
  color: #a0acb9;
  content: "↗";
  font-size: 14px;
  font-weight: 900;
  position: absolute;
  right: 15px;
  top: 13px;
}

.dashboard-kpi span,
.dashboard-kpi small {
  color: var(--muted);
  font-weight: 700;
}

.dashboard-kpi strong {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.dashboard-kpi-sales {
  border-top: 3px solid var(--accent);
}

.dashboard-kpi-treasury {
  border-top: 3px solid #2563eb;
}

.dashboard-treasury-panel {
  margin: 0 0 28px;
}

.dashboard-managerial-panel {
  margin: 0 0 28px;
}

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

.managerial-chart-card {
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  min-width: 0;
  padding: 18px;
}

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

.managerial-chart-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.managerial-chart-heading div {
  display: grid;
  gap: 4px;
}

.managerial-chart-heading span,
.managerial-chart-heading small {
  color: var(--muted);
  font-weight: 700;
}

.managerial-chart-heading strong {
  font-size: 17px;
}

.sales-trend-chart {
  align-items: end;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  height: 170px;
}

.sales-trend-column {
  align-items: center;
  display: grid;
  gap: 6px;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
}

.sales-trend-track {
  align-items: end;
  background: #f0f3f7;
  border-radius: 5px 5px 2px 2px;
  display: flex;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.sales-trend-track i {
  background: linear-gradient(180deg, #22b8a0, #168674);
  border-radius: 5px 5px 2px 2px;
  display: block;
  min-height: 2px;
  width: 100%;
}

.sales-trend-column small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.horizontal-chart {
  display: grid;
  gap: 18px;
}

.horizontal-chart > div {
  display: grid;
  gap: 8px;
}

.horizontal-chart span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.horizontal-chart > div > i,
.due-schedule-row > div {
  background: #eef2f6;
  border-radius: 999px;
  display: block;
  height: 10px;
  overflow: hidden;
}

.horizontal-chart em,
.due-schedule-row i {
  border-radius: inherit;
  display: block;
  height: 100%;
}

.bar-income,
.due-receivable {
  background: #168674;
}

.bar-expense,
.due-payable {
  background: #e05252;
}

.due-schedule-chart {
  display: grid;
  gap: 10px;
}

.due-schedule-row {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr);
}

.due-schedule-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 5px;
}

.chart-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.chart-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 20px;
}

.legend-receivable { background: #168674; }
.legend-payable { background: #e05252; }
.text-success { color: #168674 !important; }
.text-danger { color: #c83f49 !important; }

.dashboard-priority-panel {
  margin: 0 0 28px;
}

.dashboard-priority-grid {
  background: #ffffff;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.dashboard-priority-grid > a {
  align-items: center;
  border-bottom: 1px solid #e7ebf0;
  color: var(--text);
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 78px;
  padding: 13px 16px;
}

.dashboard-priority-grid > a:nth-child(odd) {
  border-right: 1px solid #e7ebf0;
}

.dashboard-priority-grid > a:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.dashboard-priority-grid > a:hover {
  background: #f2faf8;
}

.dashboard-priority-grid strong,
.dashboard-priority-grid small {
  display: block;
}

.dashboard-priority-grid small {
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
}

.dashboard-priority-grid b {
  color: var(--accent-strong);
  font-size: 13px;
}

.priority-indicator {
  align-items: center;
  background: #edf2f7;
  border-radius: 8px;
  color: #344054;
  display: inline-flex;
  font-size: 17px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.priority-indicator.danger { background: #fff0ee; color: #b42318; }
.priority-indicator.warning { background: #fff7e8; color: #9a6700; }
.priority-indicator.info { background: #eef5ff; color: #175cd3; }
.priority-indicator.success { background: #eaf8f2; color: #087a5b; }

.report-tabs {
  margin-bottom: 18px;
}

.accounting-report-heading { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-bottom: 16px; padding: 20px 22px; border: 1px solid #cbdde8; border-radius: 12px; background: linear-gradient(135deg, #f8fbfd, #edf6f5); }
.accounting-report-heading > div { display: grid; gap: 3px; }
.accounting-report-heading span, .accounting-table-header span { color: var(--accent-strong); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.accounting-report-heading strong { color: #163a5f; font-size: 18px; }
.accounting-report-heading small, .accounting-table-header small { color: var(--muted); }
.accounting-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.accounting-table-panel { overflow: hidden; padding: 0; }
.accounting-table-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.accounting-table-header > div { display: grid; gap: 3px; }
.accounting-table-header strong { font-size: 17px; }
.accounting-report-table { margin: 0; }
.accounting-report-table th { white-space: nowrap; }
.accounting-report-table tbody tr:hover { background: #f3faf9; }
.accounting-report-table .numeric-cell { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.accounting-report-table tfoot th { padding: 14px 12px; border-top: 2px solid #163a5f; color: #163a5f; background: #eaf2f7; }
.account-type-badge { display: inline-flex; padding: 4px 8px; border: 1px solid #d5e1e8; border-radius: 999px; color: #344b5f; background: #f7fafc; font-size: 11px; font-weight: 800; }
.negative-amount { color: #b42318; }
.accounting-tabs { overflow-x: auto; padding-bottom: 3px; white-space: nowrap; }
.financial-document-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 20px 22px; border: 1px solid #cbdde8; border-radius: 12px; background: linear-gradient(135deg, #f8fbfd, #edf6f5); }
.financial-document-header > div { display: grid; gap: 4px; }
.financial-document-header > div:last-child { text-align: right; }
.financial-document-header span, .financial-document-header strong { color: #163a5f; font-size: 18px; font-weight: 900; }
.financial-document-header small { color: var(--muted); }
.financial-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.financial-stack, .financial-statement-single, .ledger-list { display: grid; gap: 18px; }
.financial-statement-single { max-width: 920px; margin-inline: auto; }
.financial-section, .ledger-account { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 10px 25px rgba(15, 23, 42, .05); }
.financial-section > header, .ledger-account > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; color: #fff; background: #163a5f; }
.financial-section h2, .ledger-account h2 { margin: 0; font-size: 16px; }
.financial-section table { width: 100%; }
.financial-section td, .financial-section th { padding: 11px 16px; border-bottom: 1px solid #e7edf1; }
.financial-section td:last-child, .financial-section th:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.financial-section td small { display: inline-block; min-width: 72px; color: var(--muted); font-weight: 800; }
.financial-section tfoot th { color: #163a5f; background: #eaf2f7; }
.financial-grand-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 2px solid #163a5f; border-radius: 12px; color: #163a5f; background: #edf5f8; font-size: 19px; font-weight: 900; }
.ledger-account > header > div { display: grid; gap: 2px; }
.ledger-account > header > div:last-child { text-align: right; }
.ledger-account > header span, .ledger-account > header small { color: #cfe0eb; }
.ledger-opening td { color: #506273; background: #f6f8fa; font-style: italic; font-weight: 800; }
.chart-filter-panel { grid-template-columns: minmax(240px, 1.5fr) minmax(170px, .8fr) minmax(150px, .7fr) auto; }
.chart-account-panel { padding: 0; overflow: hidden; }
.chart-account-name { display: flex; align-items: center; min-width: 270px; }
.chart-account-name > div { display: grid; gap: 2px; }
.chart-account-name strong { color: #163a5f; font-size: 12px; letter-spacing: .04em; }
.chart-account-name span { font-weight: 800; }
.chart-account-name small, .table-subtext { display: block; color: var(--muted); font-size: 10px; }
.chart-depth-1 { padding-left: 24px; }
.chart-depth-2 { padding-left: 48px; }
.chart-depth-3 { padding-left: 72px; }
.chart-depth-4 { padding-left: 96px; }
.chart-depth-5 { padding-left: 120px; }
.chart-tree-branch { width: 14px; height: 14px; margin-right: 8px; border-bottom: 1px solid #9fb2c0; border-left: 1px solid #9fb2c0; transform: translateY(-5px); }
.muted-row { opacity: .68; }
.muted-text { color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.row-actions form { margin: 0; }
.text-button { padding: 0; border: 0; color: var(--accent-strong); background: transparent; cursor: pointer; font: inherit; font-weight: 800; }
.danger-text { color: #b42318; }
.chart-account-form { max-width: 900px; }
.info-banner { display: flex; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #b9d9eb; border-radius: 10px; color: #174966; background: #edf7fc; }
.journal-entry-form { max-width: 1120px; }
.journal-lines { display: grid; gap: 10px; }
.journal-line { display: grid; grid-template-columns: 1.2fr 1.4fr .55fr .55fr; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafb; }
.popover-form { position: absolute; z-index: 20; right: 0; display: grid; gap: 10px; width: 300px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 18px 40px rgba(15,23,42,.2); }

/* Finance workspace: shared professional presentation */
.finance-workspace { --finance-navy: #173b57; --finance-soft: #f3f7fa; --finance-line: #d5e1e8; }
.finance-workspace > .page-header, .finance-workspace > .content-header { margin-bottom: 20px; padding: 22px 24px; border: 1px solid var(--finance-line); border-radius: 14px; background: linear-gradient(135deg, #fff 0%, #f5fafc 65%, #edf7f5 100%); box-shadow: 0 12px 30px rgba(23,59,87,.07); }
.finance-workspace > .page-header h1, .finance-workspace > .content-header h1 { color: var(--finance-navy); letter-spacing: -.025em; }
.finance-workspace > .page-header p:last-child, .finance-workspace > .content-header p:last-child { max-width: 760px; color: #607386; }
.finance-workspace .metric-grid { gap: 14px; margin-bottom: 18px; }
.finance-workspace .metric-card { min-height: 116px; padding: 18px; border-color: var(--finance-line); border-radius: 12px; box-shadow: 0 8px 22px rgba(23,59,87,.05); }
.finance-workspace .metric-card span { color: #65788a; font-size: 10px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.finance-workspace .metric-card strong { color: var(--finance-navy); font-variant-numeric: tabular-nums; }
.finance-workspace .list-filter-panel { gap: 14px; padding: 17px; border-color: var(--finance-line); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(23,59,87,.04); }
.finance-workspace .list-filter-panel label { display: grid; gap: 6px; color: #526779; font-size: 11px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.finance-workspace .list-filter-panel input, .finance-workspace .list-filter-panel select { min-height: 43px; padding: 10px 12px; border: 1px solid #c9d7e0; border-radius: 8px; background: #fbfdfe; font-size: 14px; text-transform: none; }
.finance-workspace .table-panel { border-color: var(--finance-line); border-radius: 12px; box-shadow: 0 10px 26px rgba(23,59,87,.05); }
.finance-workspace .table-panel thead th { padding-block: 12px; border-bottom: 2px solid #c6d6df; color: #40586b; background: #eef4f7; font-size: 10px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.finance-workspace .table-panel tbody tr:hover { background: #f3faf9; }
.finance-workspace .table-panel td { padding-block: 14px; font-variant-numeric: tabular-nums; }
.finance-workspace .form-panel { max-width: 1040px; margin-inline: auto; padding: 24px; border-color: var(--finance-line); border-radius: 14px; box-shadow: 0 14px 34px rgba(23,59,87,.07); }
.finance-workspace .form-grid { gap: 18px; }
.finance-workspace .form-field { padding: 0; }
.finance-workspace .form-label { color: #40586b; font-size: 11px; letter-spacing: .045em; text-transform: uppercase; }
.finance-workspace .form-control { min-height: 44px; border-color: #c8d6df; border-radius: 8px; background: #fbfdfe; }
.finance-workspace .form-control:focus { background: #fff; box-shadow: 0 0 0 3px rgba(15,118,110,.11); }
.finance-workspace .form-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e1e9ee; }
.finance-workspace .searchable-select { position: relative; gap: 5px; }
.finance-workspace .searchable-select-input { padding-left: 38px; background: #fff; }
.finance-workspace .searchable-select::before { content: ""; position: absolute; z-index: 2; top: 14px; left: 14px; width: 11px; height: 11px; border: 2px solid #60788a; border-radius: 50%; pointer-events: none; }
.finance-workspace .searchable-select::after { content: ""; position: absolute; z-index: 2; top: 26px; left: 25px; width: 7px; height: 2px; background: #60788a; transform: rotate(45deg); pointer-events: none; }
.finance-workspace .searchable-select select { min-height: 38px; color: #53697a; background: #f2f6f8; font-size: 12px; }
.finance-workspace .detail-panel { padding: 21px; border: 1px solid var(--finance-line); border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(23,59,87,.05); }

@media (max-width: 780px) {
  .accounting-report-heading, .accounting-metric-grid, .financial-columns { grid-template-columns: 1fr; }
  .accounting-table-header { align-items: flex-start; flex-direction: column; }
  .financial-document-header { align-items: flex-start; flex-direction: column; }
  .financial-document-header > div:last-child { text-align: left; }
  .chart-filter-panel { grid-template-columns: 1fr; }
  .journal-line { grid-template-columns: 1fr; }
}

@media print {
  .accounting-report-heading { padding: 12px 0; border-width: 1px 0; background: #fff; }
  .accounting-metric-grid { grid-template-columns: repeat(3, 1fr); }
  .accounting-table-panel { border: 0; box-shadow: none; }
  .accounting-report-table { font-size: 9px; }
  .accounting-report-table thead { display: table-header-group; }
  .accounting-report-table tr { break-inside: avoid; }
  .financial-document-header { padding: 12px 0; border-width: 1px 0; background: #fff; }
  .financial-section, .ledger-account { break-inside: avoid; border-color: #aaa; box-shadow: none; }
  .financial-section > header, .ledger-account > header { color: #000; background: #e7edf1; }
  .ledger-account > header span, .ledger-account > header small { color: #333; }
}

.report-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-bar {
  background: #e8eef2;
  border-radius: 4px;
  display: block;
  height: 8px;
  min-width: 100px;
  overflow: hidden;
  width: 100%;
}

.report-bar i {
  background: #0f766e;
  display: block;
  height: 100%;
}

.company-grid,
.metric-grid,
.workspace-grid,
.settings-grid {
  display: grid;
  gap: 16px;
}

.company-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.settings-link-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.settings-link-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: block;
  min-height: 150px;
  overflow: hidden;
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.settings-link-card:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 36px rgba(23, 32, 51, .12);
  transform: translateY(-2px);
}

.company-card,
.metric-card,
.empty-state,
.workspace-grid a {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.company-card {
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 20px;
  text-align: left;
}

.company-select-header { padding: 22px 24px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(135deg, #fff, #f1faf8); }
.company-select-header p:last-child { max-width: 700px; margin: 7px 0 0; color: var(--muted); }
.company-picker-grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.company-picker-card { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(82px, 1fr) auto; gap: 14px; align-items: start; min-height: 176px; padding: 20px 21px 15px; border-radius: 14px; box-shadow: 0 7px 22px rgba(23,32,51,.045); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.company-picker-card:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(23,32,51,.1); }
.company-card-mark { align-self: start; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: #fff !important; background: linear-gradient(145deg, #0b625b, #15978c); font-size: 18px; font-weight: 950; }
.company-card-copy { display: grid; gap: 6px; min-width: 0; }
.company-card-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.company-card-heading strong { color: var(--text); font-size: 18px; line-height: 1.22; overflow-wrap: anywhere; white-space: normal; }
.company-card-heading em { padding: 4px 7px; border-radius: 999px; color: #0b665f; background: #def5f1; font-size: 10px; font-style: normal; font-weight: 850; }
.company-card-copy > span:not(.company-card-heading),
.company-card-copy > small { line-height: 1.35; overflow-wrap: anywhere; white-space: normal; }
.company-card-action { align-items: center; align-self: end; border-top: 1px solid var(--line); color: var(--accent) !important; display: flex; font-size: 11px; font-weight: 850; grid-column: 1 / -1; justify-content: space-between; padding-top: 11px; width: 100%; }
.company-card-action b { font-size: 18px; }
.company-empty-state { display: grid; justify-items: center; min-height: 330px; align-content: center; text-align: center; border-radius: 15px; background: linear-gradient(145deg, #fff, #f5fbfa); }
.company-empty-state p { margin: 4px auto 18px; }
.empty-state-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; border-radius: 16px; color: #087269; background: #def5f1; font-size: 26px; font-weight: 500; }

.company-card:hover,
.workspace-grid a:hover {
  border-color: var(--accent);
}

.company-card span,
.company-card small,
.metric-card span,
.metric-card small {
  color: var(--muted);
}

.empty-state {
  padding: 28px;
}

.empty-state p {
  color: var(--muted);
  max-width: 620px;
}

@media (max-width: 780px) {
  .company-picker-grid { grid-template-columns: 1fr; }
  .company-picker-card { grid-template-columns: auto minmax(0, 1fr); }
  .company-card-action { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 11px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}

.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.metric-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  background: var(--metric-accent, var(--accent));
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.metric-card::after {
  background: var(--metric-bg, rgba(15, 118, 110, .10));
  border-radius: 999px;
  content: "";
  height: 62px;
  position: absolute;
  right: -24px;
  top: -20px;
  width: 62px;
}

.metric-card strong {
  font-size: 28px;
  position: relative;
}

.metric-card-accent {
  --metric-accent: #0f766e;
  --metric-bg: rgba(15, 118, 110, .12);
}

.metric-card-gold {
  --metric-accent: #b7791f;
  --metric-bg: rgba(183, 121, 31, .14);
}

.metric-card-blue {
  --metric-accent: #2563eb;
  --metric-bg: rgba(37, 99, 235, .12);
}

.metric-card-rose {
  --metric-accent: #be123c;
  --metric-bg: rgba(190, 18, 60, .10);
}

.qc-chart-panel {
  margin-bottom: 22px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.qc-chart-scroll {
  overflow-x: auto;
}

.qc-chart {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}

.qc-zone-normal { fill: #f4fbf8; }
.qc-zone-warning { fill: #fff8dc; }
.qc-zone-danger { fill: #fff0f0; }

.qc-grid line {
  stroke: #b9c8ce;
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.qc-grid text {
  fill: #60727a;
  font-size: 11px;
  font-weight: 700;
}

.qc-trend-line {
  fill: none;
  stroke: #173a5e;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.qc-point {
  stroke: #fff;
  stroke-width: 2;
  transition: r .16s ease;
}

.qc-point:hover { r: 8; }
.qc-point-ok, .qc-legend-ok { fill: #16866f; background: #16866f; }
.qc-point-warning, .qc-legend-warning { fill: #d59a18; background: #d59a18; }
.qc-point-danger, .qc-legend-danger { fill: #c74646; background: #c74646; }
.qc-chart-legend { margin-top: 14px; }

.catalog-master-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.catalog-master-card {
  display: grid;
  gap: 5px;
  min-height: 108px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(145deg, #fff, #f6faf9);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.catalog-master-card:hover {
  border-color: #7bb8aa;
  transform: translateY(-1px);
}

.catalog-master-card strong { color: #163a5f; font-size: 15px; }
.catalog-master-card small { color: var(--muted); }

.catalog-search-form {
  align-items: end;
  display: grid;
  grid-template-columns: minmax(240px, 2fr) repeat(4, minmax(125px, 1fr)) auto auto;
}

.catalog-search-form .form-field {
  grid-column: auto;
}

.catalog-search-form input,
.catalog-search-form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

.catalog-search-form input:focus,
.catalog-search-form select:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(15, 118, 110, .14);
}

.catalog-search-form .secondary-button {
  min-height: 42px;
}

@media (max-width: 1280px) {
  .catalog-search-form {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .catalog-search-form .form-field-wide {
    grid-column: span 2;
  }
}

.catalog-test-panel {
  overflow: hidden;
}

.catalog-test-table {
  table-layout: fixed;
}

.catalog-test-table th,
.catalog-test-table td {
  padding: 14px 12px;
  white-space: normal;
}

.catalog-test-table th:nth-child(1) { width: 110px; }
.catalog-test-table th:nth-child(2) { width: auto; }
.catalog-test-table th:nth-child(3) { width: 140px; }
.catalog-test-table th:nth-child(4) { width: 165px; }
.catalog-test-table th:nth-child(5) { width: 150px; }
.catalog-test-table th:nth-child(6) { width: 190px; }

.catalog-test-table td {
  min-width: 0;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.catalog-test-table td > strong,
.catalog-test-table td > small {
  display: block;
}

.catalog-test-table td > small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.catalog-test-actions {
  flex-wrap: nowrap;
}

.catalog-test-actions .primary-button,
.catalog-test-actions .secondary-button {
  flex: 1 1 0;
  white-space: nowrap;
}

.catalog-studio-section {
  display: grid;
  gap: 14px;
  margin: 26px 0;
}

.catalog-version-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.catalog-version-tabs a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.catalog-version-tabs a.active {
  border-color: #176f67;
  color: #fff;
  background: #176f67;
}

.catalog-version-summary,
.catalog-assay-heading,
.catalog-reference-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.catalog-version-summary {
  padding: 16px 18px;
  border: 1px solid #b9d8d2;
  border-radius: 14px;
  background: #f1faf7;
}

.catalog-version-summary > div:first-child,
.catalog-assay-heading > div:first-child,
.catalog-reference-block > div:first-child {
  display: grid;
  gap: 4px;
}

.catalog-version-summary small,
.catalog-assay-heading small,
.catalog-reference-block small {
  display: block;
  color: var(--muted);
}

.catalog-section-card,
.catalog-assay-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.catalog-section-card > .section-heading,
.catalog-assay-heading {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.catalog-group-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: #f8fafb;
}

.catalog-group-strip span {
  padding: 6px 9px;
  border-radius: 8px;
  color: #375465;
  background: #eaf2f5;
  font-size: 11px;
}

.catalog-reference-block {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border: 1px solid #d8e5e2;
  border-radius: 10px;
  background: #f8fbfa;
}

@media (max-width: 800px) {
  .catalog-version-summary,
  .catalog-assay-heading,
  .catalog-reference-block {
    align-items: flex-start;
    flex-direction: column;
  }

  .catalog-search-form {
    grid-template-columns: 1fr;
  }

  .catalog-search-form .form-field-wide {
    grid-column: auto;
  }

  .catalog-test-panel {
    border: 0;
    overflow: visible;
    background: transparent;
  }

  .catalog-test-table,
  .catalog-test-table tbody,
  .catalog-test-table tr,
  .catalog-test-table td {
    display: block;
    width: 100%;
  }

  .catalog-test-table thead {
    display: none;
  }

  .catalog-test-table tbody {
    display: grid;
    gap: 12px;
  }

  .catalog-test-table tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
  }

  .catalog-test-table td {
    display: grid;
    grid-template-columns: minmax(108px, .35fr) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #edf1f4;
  }

  .catalog-test-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .catalog-test-table td:last-child {
    border-bottom: 0;
  }

  .catalog-test-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .catalog-test-table td {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .catalog-test-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

.metric-card-green {
  --metric-accent: #15803d;
  --metric-bg: rgba(21, 128, 61, .12);
}

.metric-card-red {
  --metric-accent: #b42318;
  --metric-bg: rgba(180, 35, 24, .10);
}

.metric-card-purple {
  --metric-accent: #7c3aed;
  --metric-bg: rgba(124, 58, 237, .10);
}

.metric-card-cyan {
  --metric-accent: #0891b2;
  --metric-bg: rgba(8, 145, 178, .12);
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-heading h2 {
  font-size: 25px;
}

.section-heading > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.module-section {
  margin-top: 6px;
}

.workspace-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 22px;
}

.workspace-grid a {
  color: var(--accent-strong);
  font-weight: 800;
  padding: 18px;
}

.workspace-grid.module-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 0;
}

.module-card {
  display: grid;
  gap: 0;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 132px;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.workspace-grid a.module-card {
  color: var(--text);
  padding: 0;
}

.module-card:hover {
  box-shadow: 0 18px 36px rgba(23, 32, 51, .12);
  transform: translateY(-2px);
}

.module-image {
  background-image: url("../img/dashboard/module-scenes.png");
  background-repeat: no-repeat;
  background-size: 400% 300%;
  min-height: 132px;
}

.module-content {
  align-content: center;
  display: grid;
  gap: 7px;
  padding: 18px 18px 46px 18px;
}

.module-content strong {
  color: #172033;
  font-size: 17px;
  line-height: 1.2;
}

.module-content small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.module-cta {
  align-items: center;
  background: #eefcf8;
  border: 1px solid #b8eee2;
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-height: 28px;
  padding: 5px 10px;
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.module-pos .module-image { background-position: 0% 0%; }
.module-customers .module-image { background-position: 33.333% 0%; }
.module-suppliers .module-image { background-position: 66.666% 0%; }
.module-products .module-image { background-position: 100% 0%; }
.module-inventory .module-image { background-position: 0% 50%; }
.module-purchases .module-image { background-position: 33.333% 50%; }
.module-cash .module-image { background-position: 66.666% 50%; }
.module-treasury .module-image { background-position: 66.666% 100%; }
.module-invoices .module-image { background-position: 100% 50%; }
.module-receivables .module-image { background-position: 0% 100%; }
.module-payables .module-image { background-position: 33.333% 100%; }
.module-reports .module-image { background-position: 66.666% 100%; }
.module-fiscal .module-image { background-position: 100% 100%; }

.compact-section-title {
  margin-top: 24px;
}

.compact-filter {
  margin-bottom: 16px;
}

.filter-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  margin: 8px 0 20px;
  overflow-x: auto;
}

.filter-tabs a {
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 800;
  padding: 10px 14px;
  text-decoration: none;
  white-space: nowrap;
}

.filter-tabs a:hover,
.filter-tabs a.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.list-search-panel,
.list-filter-panel {
  align-items: end;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 520px) 1fr;
  margin-bottom: 16px;
  padding: 14px;
}

.list-filter-panel {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.list-search {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.list-search input,
.list-search select {
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  min-height: 42px;
  padding: 10px 12px;
  text-transform: none;
}

.list-search input:focus,
.list-search select:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(15, 118, 110, .14);
}

.list-filter-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.list-search-status {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
  min-height: 42px;
  padding: 11px 12px;
}

.list-search-status.is-empty {
  background: #fef3f2;
  border-color: #fecdca;
  color: var(--danger);
}

.inventory-metrics {
  margin-bottom: 16px;
}

.status-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.status-pill.success {
  background: #ecfdf5;
  color: #047857;
}

.status-pill.danger {
  background: #fef3f2;
  color: #b42318;
}

.status-pill.warning {
  background: #fffbeb;
  color: #92400e;
}

.notice-panel {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
}

.notice-panel.warning {
  border-color: #f0c36a;
  background: #fff8e8;
  color: #714b00;
}

.status-pill.neutral {
  background: #f1f5f9;
  color: #475569;
}

.table-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.table-actions > *,
.row-actions > * {
  max-width: 100%;
}

.table-actions form {
  margin: 0;
}

.table-actions .secondary-button,
.table-actions .primary-button,
.table-actions .danger-button {
  min-height: 34px;
  padding: 8px 10px;
}

.danger-button {
  align-items: center;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 8px;
  color: var(--danger);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  padding: 12px 16px;
}

.action-panel-danger {
  background: #fff8f7;
  border-color: #fecdca;
}

.action-panel-danger strong {
  color: var(--danger);
}

.action-panel-warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.inline-action-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1fr) auto;
  margin-top: 12px;
}

.inline-action-form .inline-form-grid {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.inline-action-form .form-field {
  text-transform: none;
}

.inline-action-form label {
  color: var(--muted);
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.inline-action-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 70px;
  padding: 10px 12px;
  resize: vertical;
  text-transform: none;
}

.inline-action-form textarea:focus {
  border-color: var(--danger);
  outline: 3px solid rgba(180, 35, 24, .12);
}

.inline-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.inline-form-grid label {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
}

.inline-form-grid input,
.inline-form-grid select,
.inline-form-grid textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 9px 10px;
  width: 100%;
}

.inline-form-grid textarea {
  min-height: 56px;
  resize: vertical;
}

.check-inline {
  align-items: center;
  display: inline-flex !important;
  gap: 8px !important;
}

tr[hidden] {
  display: none;
}

.table-panel,
.form-panel,
.side-panel,
.invoice-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 100%;
  min-width: 0;
}

.table-panel,
.invoice-panel {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

td.table-cell-relaxed {
  white-space: normal;
}

th {
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.list-table th,
.list-table td {
  line-height: 1.2;
  padding-block: 10px;
  vertical-align: middle;
}

.list-table th,
.table-panel > table th,
.table-wrap > table th {
  white-space: nowrap;
}

.list-table td,
.table-panel > table td,
.table-wrap > table td {
  max-width: 300px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.list-table td:has(.status-pill),
.table-panel > table td:has(.status-pill),
.table-wrap > table td:has(.status-pill) {
  white-space: nowrap;
}

.list-table .table-cell-relaxed {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagination-bar {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 14px;
}

.pagination-bar > span,
.pagination-bar strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.pagination-bar > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
}

.secondary-button.disabled {
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
}

.inventory-workspace-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: 18px;
}

.inventory-action-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 18px;
}

.inventory-action-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  text-decoration: none;
}

.inventory-action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.inventory-action-card strong {
  font-size: 14px;
}

.inventory-action-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.detail-list > div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(120px, 180px) 1fr;
  padding: 8px 0;
}

.detail-list > div:last-child {
  border-bottom: 0;
}

.detail-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-list dd {
  font-weight: 800;
  margin: 0;
}

.form-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: 4px;
}

.company-create-submit .form-actions {
  display: flex;
  flex: 0 0 auto;
}

.form-actions .primary-button,
.form-actions .secondary-button {
  min-width: 120px;
}

.form-actions .auth-primary-action {
  flex: 1;
  width: auto;
}

.form-subsection {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding-top: 14px;
}

.form-subsection small {
  color: var(--muted);
  font-weight: 800;
}

.denomination-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.denomination-grid .form-field {
  gap: 5px;
}

.form-submit-row {
  grid-column: 1 / -1;
  justify-self: start;
}

.form-section-title {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.form-section-title h2 {
  font-size: 18px;
}

.form-section-title strong {
  color: #172033;
  font-size: 18px;
}

.form-section-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.form-section-title small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.form-section-title.inside-section {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.form-grid {
  display: grid;
  align-items: start;
  gap: 18px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.form-field {
  color: var(--muted);
  display: grid;
  gap: 7px;
  grid-column: span 4;
  font-size: 14px;
  font-weight: 700;
  min-width: 0;
}

.form-label {
  align-items: center;
  color: #475569;
  display: inline-flex;
  gap: 4px;
  min-height: 18px;
}

.required-mark {
  color: var(--danger);
  font-size: 13px;
}

.form-hint {
  color: #718096;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.form-field-error {
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.form-control {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.form-control:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(15, 118, 110, .14);
}

.searchable-select {
  display: grid;
  gap: 8px;
}

.searchable-select select {
  min-height: 42px;
}

.searchable-select-input {
  background: #f8fafc;
}

.commercial-line {
  border-top: 1px solid #eef2f7;
  column-gap: 16px;
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(120px, .7fr) minmax(120px, .7fr) minmax(120px, .7fr) 86px;
  margin-top: 16px;
  padding-top: 16px;
  row-gap: 10px;
}

.commercial-line:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.commercial-line-clear {
  align-self: start;
  margin-top: 22px;
  min-height: 38px;
  padding-block: 8px;
}

.commercial-line .form-field:has(.ui-line-product) {
  grid-column: auto;
}

.commercial-line .form-field:has(.ui-quantity),
.commercial-line .form-field:has(.ui-money) {
  grid-column: auto;
}

.commercial-line .form-label {
  min-height: 16px;
}

.commercial-line input,
.commercial-line select,
.commercial-line .form-control {
  min-height: 38px;
  padding: 8px 10px;
}

.commercial-line .searchable-select {
  display: block;
}

.commercial-line .searchable-select select {
  display: none;
}

.form-grid textarea,
.form-control.ui-area {
  min-height: 94px;
  resize: vertical;
}

.form-field:has(.ui-short),
.form-field:has(.ui-date),
.form-field:has(.ui-money),
.form-field:has(.ui-quantity) {
  grid-column: span 2;
}

.form-field:has(.ui-medium) {
  grid-column: span 3;
}

.form-field:has(.ui-wide) {
  grid-column: span 6;
}

.form-field:has(.ui-area) {
  grid-column: span 8;
}

.form-field:has(.form-check-input),
.checkbox-label {
  align-items: start;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #475569;
  gap: 10px;
  grid-column: span 3;
  grid-template-columns: auto 1fr;
  min-height: 42px;
  padding: 11px 12px;
}

.form-grid input[type="checkbox"] {
  min-height: auto;
  width: auto;
}

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

.role-check-grid {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.role-check-grid legend {
  margin-bottom: 10px;
}

.role-check-grid ul {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-check-grid label {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #475569;
  display: flex;
  gap: 9px;
  font-weight: 800;
  min-height: 40px;
  padding: 9px 10px;
}

.permission-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.permission-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.permission-card h2 {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  color: #334155;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 12px 14px;
  text-transform: uppercase;
}

.permission-options {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.permission-options label {
  align-items: start;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: auto 1fr;
  padding: 10px;
}

.permission-options input {
  margin-top: 3px;
}

.permission-options span {
  display: grid;
  gap: 2px;
}

.permission-options strong {
  color: #172033;
  font-size: 13px;
  text-transform: uppercase;
}

.permission-options small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

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

.form-lines-section {
  overflow: hidden;
}

.page:has(.pos-workspace) {
  max-width: none;
  padding: 24px;
}

.pos-hero {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 18px 20px;
}

.pos-hero-actions {
  display: flex;
  gap: 10px;
}

.pos-workspace {
  display: grid;
  gap: 16px;
  grid-template-columns: 320px minmax(480px, 1fr) 340px;
}

.pos-panel {
  align-content: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 16px;
}

.pos-products-panel {
  background: #fbfcfd;
}

.pos-cart-panel {
  min-height: 560px;
}

.pos-checkout-panel {
  background: #f8fafc;
}

.panel-title {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px 1fr;
}

.panel-title > span {
  align-items: center;
  background: var(--accent);
  border-radius: 8px;
  color: white;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.panel-title strong {
  display: block;
}

.panel-title small {
  color: var(--muted);
}

.compact-title {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.pos-search-box {
  color: var(--muted);
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}

.pos-search-box input {
  background: white;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  font-size: 16px;
  min-height: 48px;
  padding: 12px 14px;
}

.pos-search-box input:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(15, 118, 110, .14);
}

.product-results,
.customer-results {
  display: grid;
  gap: 8px;
  max-height: 62vh;
  overflow: auto;
}

.product-pick,
.customer-pick {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 5px;
  padding: 12px;
  text-align: left;
}

.product-pick:hover,
.customer-pick:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.product-pick:disabled {
  background: #f1f5f9;
  cursor: not-allowed;
  opacity: .55;
}

.product-name {
  font-weight: 900;
}

.product-code,
.product-pick small,
.customer-pick span,
.muted-text {
  color: var(--muted);
}

.product-meta {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.cart-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.cart-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.cart-toolbar {
  align-items: end;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(340px, 560px);
  justify-content: space-between;
}

.cart-actions {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) auto;
}

.cart-panel h2 {
  font-size: 18px;
}

.quick-search {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
}

.quick-search input {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  padding: 10px 12px;
}

.cart-header,
.cart-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(240px, 1fr) 100px 115px 115px 125px 42px;
}

.purchase-header,
.purchase-row {
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr) 95px 110px 120px 140px minmax(160px, .7fr) 42px;
}

.cart-header {
  background: #eef2f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 11px 12px;
  text-transform: uppercase;
}

.cart-row {
  align-items: center;
  background: white;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
}

.cart-row select,
.cart-row input {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 9px 10px;
  width: 100%;
}

.cart-row strong {
  align-self: center;
  white-space: nowrap;
}

.cart-item-name {
  align-self: center;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-button {
  align-items: center;
  align-self: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.pos-summary {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  padding: 14px;
}

.pos-summary div {
  display: grid;
  gap: 4px;
  min-width: 160px;
}

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

.vertical-summary {
  display: grid;
  gap: 8px;
  justify-content: stretch;
}

.vertical-summary div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.vertical-summary div:nth-child(3) {
  border-top: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 22px;
  padding-top: 10px;
}

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

.full-width {
  width: 100%;
}

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

.pos-submit {
  font-size: 17px;
  min-height: 52px;
}

.split-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.side-panel {
  align-self: start;
  padding: 20px;
}

.side-panel h2 {
  font-size: 18px;
  margin-bottom: 16px;
}

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

.recent-list a {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.recent-list span,
.recent-list small,
.invoice-meta span,
.totals-box span {
  color: var(--muted);
}

.invoice-panel {
  padding: 22px;
}

.code-block {
  background: #0f172a;
  border-radius: 8px;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  margin: 14px 0 0;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.ticket-heading {
  display: none;
  margin-bottom: 18px;
  text-align: center;
}

.ticket-heading h2,
.ticket-heading p {
  margin: 0 0 4px;
}

.ticket-footer {
  display: none;
}

.invoice-document-header,
.letter-header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.invoice-document-header p,
.letter-header p {
  color: var(--muted);
  margin: 3px 0;
}

.invoice-document-number,
.letter-number-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-width: 260px;
  padding: 14px;
  text-align: right;
}

.invoice-document-number span,
.letter-number-box span,
.letter-info-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-document-number strong,
.letter-number-box strong {
  color: var(--accent-strong);
  font-size: 22px;
}

.invoice-meta-detailed small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.invoice-bottom-grid,
.letter-bottom {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 340px;
  margin-top: 18px;
}

.payment-detail-box,
.letter-payment {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.payment-detail-box h3,
.letter-payment h3 {
  margin: 0 0 10px;
}

.print-actions {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px;
}

.print-actions small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.print-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.thermal-ticket,
.letter-invoice {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 auto;
  padding: 18px;
}

.thermal-ticket {
  max-width: 320px;
}

.thermal-ticket header,
.thermal-ticket footer {
  text-align: center;
}

.thermal-ticket h2,
.thermal-ticket p {
  margin: 0 0 4px;
}

.ticket-line-separator {
  border-top: 1px dashed #94a3b8;
  margin: 10px 0;
}

.thermal-ticket table {
  font-size: 12px;
}

.thermal-ticket th,
.thermal-ticket td {
  padding: 5px 2px;
  white-space: normal;
}

.thermal-ticket th:last-child,
.thermal-ticket td:last-child,
.thermal-ticket .numeric {
  text-align: right;
}

.ticket-totals {
  display: grid;
  gap: 4px;
}

.ticket-totals div,
.letter-totals div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ticket-grand-total,
.letter-grand-total {
  border-top: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 20px;
  padding-top: 8px;
}

.letter-invoice {
  max-width: 920px;
}

.commercial-letter {
  color: #0f172a;
  overflow: hidden;
  padding: 26px;
  position: relative;
}

.commercial-letter::before {
  background: linear-gradient(90deg, var(--accent), #0f172a);
  content: "";
  display: block;
  height: 7px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.commercial-company-block {
  align-items: flex-start;
  display: flex;
  gap: 14px;
}

.commercial-brand-mark {
  align-items: center;
  background: #0f766e;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 54px;
  font-size: 18px;
  font-weight: 900;
  height: 54px;
  justify-content: center;
}

.commercial-letter .letter-header {
  align-items: flex-start;
  border-bottom: 1px solid #d8e1ea;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 18px;
}

.commercial-letter .letter-header h1 {
  color: #0f172a;
  font-size: 26px;
  line-height: 1.05;
  margin: 0 0 6px;
}

.commercial-letter .letter-header p {
  color: #475569;
  font-size: 12px;
  margin: 2px 0;
}

.commercial-letter .letter-number-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  min-width: 236px;
  padding: 14px;
  text-align: right;
}

.commercial-document-stamp span {
  color: var(--accent);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 5px;
}

.commercial-document-stamp strong {
  color: #0f172a;
  display: block;
  font-size: 25px;
  line-height: 1.05;
  margin-bottom: 7px;
}

.commercial-document-stamp small {
  color: #475569;
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.commercial-document-summary {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1.4fr .8fr .8fr;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.commercial-document-summary div,
.commercial-approval-panel div {
  display: grid;
  gap: 4px;
}

.commercial-document-summary span,
.commercial-approval-panel span,
.commercial-letter .letter-info-grid span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.commercial-document-summary strong {
  color: #0f172a;
  font-size: 13px;
}

.commercial-letter-items th:nth-child(3),
.commercial-letter-items td:nth-child(3),
.commercial-letter-items th:nth-child(n + 4),
.commercial-letter-items td:nth-child(n + 4) {
  text-align: right;
}

.commercial-letter-items th:nth-child(2),
.commercial-letter-items td:nth-child(2) {
  width: 34%;
}

.commercial-letter .letter-info-grid {
  gap: 12px;
  margin-bottom: 18px;
}

.commercial-letter .letter-info-grid > div {
  background: #ffffff;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  min-height: 118px;
  padding: 12px;
}

.commercial-letter .letter-info-grid strong {
  color: #0f172a;
  display: block;
  font-size: 14px;
  margin-top: 4px;
}

.commercial-letter .letter-info-grid p {
  color: #475569;
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 0;
}

.commercial-letter .letter-items {
  border: 1px solid #dbe4ee;
  border-collapse: separate;
  border-radius: 8px;
  border-spacing: 0;
  overflow: hidden;
}

.commercial-letter .letter-items th {
  background: #0f172a;
  color: #ffffff;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.commercial-letter .letter-items td {
  border-bottom: 1px solid #e2e8f0;
  color: #1f2937;
  font-size: 11px;
}

.commercial-letter .letter-items tbody tr:last-child td {
  border-bottom: 0;
}

.commercial-letter .letter-bottom {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 300px;
  margin-top: 18px;
}

.commercial-terms p {
  color: var(--muted);
  margin: 0 0 8px;
}

.commercial-signatures {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 16px;
}

.commercial-signatures p {
  color: #111827;
  margin: 0;
}

.commercial-letter .letter-totals {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  padding: 12px;
}

.commercial-letter .letter-grand-total {
  color: #0f766e;
  font-size: 22px;
}

.commercial-approval-panel {
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
  padding: 12px;
}

.commercial-approval-panel strong {
  color: #0f172a;
  font-size: 12px;
}

.commercial-approval-panel p {
  color: #334155;
  margin: 8px 0 0;
}

.letter-info-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
}

.letter-info-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.letter-info-grid p {
  color: var(--muted);
  margin: 4px 0 0;
}

.letter-items th,
.letter-items td {
  white-space: normal;
}

.letter-totals {
  display: grid;
  gap: 7px;
}

.letter-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  margin-top: 22px;
  padding-top: 12px;
  text-align: center;
}

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

.invoice-meta div,
.totals-box div {
  display: grid;
  gap: 5px;
}

.totals-box {
  display: grid;
  gap: 8px;
  justify-content: end;
  margin-top: 20px;
}

.totals-box div {
  grid-template-columns: 130px 160px;
}

.grand-total {
  border-top: 1px solid var(--line);
  font-size: 20px;
  padding-top: 10px;
}

.commercial-detail-top {
  align-items: flex-start;
}

.commercial-detail-shell {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  padding: 22px;
}

.commercial-detail-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding-bottom: 18px;
}

.commercial-detail-heading h2 {
  font-size: 26px;
  line-height: 1.15;
  margin: 10px 0 6px;
}

.commercial-detail-heading p,
.commercial-detail-summary small,
.commercial-detail-notes p {
  color: var(--muted);
  margin: 0;
}

.commercial-detail-number {
  background: #f8fafc;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-width: 230px;
  padding: 14px 16px;
  text-align: right;
}

.commercial-detail-number span,
.commercial-detail-summary span,
.commercial-detail-notes span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.commercial-detail-number strong {
  font-size: 20px;
  line-height: 1.15;
}

.commercial-detail-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commercial-detail-summary article {
  background: #f9fbfd;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.commercial-detail-summary strong,
.commercial-detail-summary small {
  display: block;
  overflow-wrap: anywhere;
}

.commercial-detail-items table {
  min-width: 860px;
}

.commercial-detail-items th,
.commercial-detail-items td {
  vertical-align: middle;
}

.number-cell {
  text-align: right;
}

.commercial-detail-footer {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}

.commercial-detail-notes {
  background: #f9fbfd;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 7px;
  padding: 14px;
}

.commercial-detail-totals {
  background: #f9fbfd;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 14px;
}

.commercial-detail-totals p {
  align-items: baseline;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin: 0;
}

.commercial-detail-totals span {
  color: var(--muted);
}

.commercial-detail-totals .grand-total {
  font-size: 22px;
  margin-top: 4px;
}

.delivery-invoice-form {
  gap: 22px;
}

.delivery-invoice-section {
  display: grid;
  gap: 12px;
}

.delivery-invoice-section .section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.delivery-invoice-section .section-heading p {
  color: var(--muted);
  margin: 4px 0 0;
}

.invoice-selection-total {
  background: #eefcf8;
  border: 1px solid #b8eee2;
  border-radius: 8px;
  color: var(--accent-strong);
  font-size: 18px;
  padding: 10px 12px;
  white-space: nowrap;
}

.delivery-invoice-lines table {
  min-width: 940px;
}

.delivery-invoice-check {
  text-align: center;
  vertical-align: middle;
}

.delivery-invoice-check input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
  height: 18px;
  width: 18px;
}

/* Clinical laboratory: pre-analytical preparation station */
.preanalytic-header {
  background: linear-gradient(135deg, #ffffff 0%, #f2fbfa 100%);
  border: 1px solid #cfe8e4;
  border-radius: 12px;
  padding: 22px 24px;
}

.preanalytic-header > div:first-child p:last-child {
  max-width: 780px;
}

.preanalytic-patient-summary {
  margin-top: 16px;
}

.preanalytic-steps {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0;
  overflow: hidden;
}

.preanalytic-steps > div {
  align-items: center;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 34px 1fr;
  padding: 15px 18px;
}

.preanalytic-steps > div + div {
  border-left: 1px solid var(--line);
}

.preanalytic-steps > div > span {
  align-items: center;
  background: #e7f7f4;
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  font-weight: 900;
  grid-row: 1 / span 2;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.preanalytic-steps strong {
  color: #172033;
}

.preanalytic-steps small {
  color: var(--muted);
}

.preanalytic-notice {
  margin-bottom: 16px;
}

.preanalytic-workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr);
  margin-bottom: 18px;
}

.preanalytic-form {
  padding: 22px;
}

.preanalytic-form .section-heading,
.preanalytic-guide .section-heading {
  margin: 0;
}

.preanalytic-form .form-grid {
  align-items: stretch;
}

.preanalytic-form .form-field:has(.ui-medium) {
  grid-column: span 6;
}

.preanalytic-field-note {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  grid-column: span 6;
  padding: 12px 14px;
}

.preanalytic-field-note strong,
.preanalytic-clinical-note span {
  color: #243349;
  font-size: 13px;
  font-weight: 900;
}

.preanalytic-field-note small {
  color: var(--muted);
  line-height: 1.45;
}

.form-field.preanalytic-test-selector,
.form-field.preanalytic-test-selector:has(.form-check-input) {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 9px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  min-height: 0;
  padding: 4px 0 0;
}

.preanalytic-test-selector > ul,
.preanalytic-test-selector > div {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  width: 100%;
}

.preanalytic-test-selector > div > div {
  min-width: 0;
}

.preanalytic-test-selector li label,
.preanalytic-test-selector > div > div label {
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 10px;
  height: 100%;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px;
  width: 100%;
}

.preanalytic-test-selector li label:has(input:checked),
.preanalytic-test-selector > div > div label:has(input:checked) {
  background: #eaf8f5;
  border-color: #69bdb4;
  box-shadow: inset 3px 0 0 var(--accent);
}

.preanalytic-test-selector input[type="checkbox"] {
  accent-color: var(--accent);
  flex: 0 0 auto;
  height: 17px;
  margin-top: 1px;
  width: 17px;
}

.preanalytic-clinical-note {
  background: #fff9e9;
  border: 1px solid #f2dea3;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

.preanalytic-clinical-note p {
  color: #5f4b17;
  margin: 0;
}

.preanalytic-guide {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 18px;
}

.preanalytic-specimen-card {
  background: #fff;
  border: 1px solid #cfe2df;
  border-radius: 10px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.preanalytic-specimen-card.needs-configuration {
  border-color: #f0b7b3;
}

.preanalytic-specimen-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.preanalytic-specimen-heading > div > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.preanalytic-specimen-heading h3 {
  color: #172033;
  font-size: 17px;
  margin: 2px 0 0;
}

.preanalytic-instruction {
  color: #526274;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.preanalytic-group-tests {
  border-top: 1px solid #edf1f5;
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 11px 0 0;
}

.preanalytic-group-tests li {
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(60px, auto) 1fr;
}

.preanalytic-group-tests strong {
  color: #08766d;
  font-size: 12px;
}

.preanalytic-group-tests span {
  color: #334155;
  font-size: 13px;
}

.preanalytic-group-action {
  justify-self: start;
}

.preanalytic-requirements th,
.preanalytic-requirements td {
  min-width: 130px;
}

.preanalytic-requirements td:nth-child(1),
.preanalytic-requirements td:nth-child(3),
.preanalytic-requirements td:nth-child(4) {
  max-width: 330px;
  min-width: 220px;
}

/* Shared professional list system */
.professional-list-filters,
.list-filter-panel {
  align-items: end;
  background: #fff;
  border: 1px solid #dbe4ea;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(23, 32, 51, .04);
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
}

.list-filter-panel > label,
.professional-filter-field,
.professional-list-filters > .form-field {
  color: #536579;
  display: grid;
  font-size: 11px;
  font-weight: 900;
  gap: 6px;
  letter-spacing: .035em;
  min-width: 0;
  text-transform: uppercase;
}

.list-filter-panel > label > input,
.list-filter-panel > label > select,
.professional-filter-field > input,
.professional-filter-field > select,
.professional-list-filters input,
.professional-list-filters select {
  background: #fbfdfe;
  border: 1px solid #cbd8e1;
  border-radius: 8px;
  color: #172033;
  font-size: 14px;
  font-weight: 500;
  min-height: 42px;
  min-width: 0;
  padding: 9px 11px;
  text-transform: none;
  width: 100%;
}

.professional-list-filters input:focus,
.professional-list-filters select:focus,
.list-filter-panel input:focus,
.list-filter-panel select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
  outline: 0;
}

.list-filter-actions {
  align-items: center;
  align-self: end;
  min-height: 42px;
}

.table-panel:has(> .professional-list-table),
.table-panel:has(> .table-scroll > .professional-list-table),
.table-panel:has(> .table-responsive > .professional-list-table) {
  border-color: #dbe4ea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(23, 32, 51, .05);
}

.professional-list-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
}

.professional-list-table thead th {
  background: #f1f5f8;
  border-bottom: 1px solid #ccd8e0;
  color: #42576a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.25;
  padding: 12px 14px;
  text-transform: uppercase;
  vertical-align: middle;
}

.professional-list-table tbody td {
  border-bottom: 1px solid #e6ecf0;
  color: #27384b;
  font-size: 13px;
  line-height: 1.42;
  max-width: 320px;
  overflow-wrap: anywhere;
  padding: 13px 14px;
  vertical-align: middle;
  white-space: normal;
}

.professional-list-table tbody tr:nth-child(even):not(.professional-list-empty-row) {
  background: #fbfcfd;
}

.professional-list-table tbody tr:hover:not(.professional-list-empty-row) {
  background: #f0faf8;
}

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

.professional-list-table td > strong:first-child,
.professional-list-table td > a:first-child {
  color: #10263f;
  font-weight: 900;
}

.professional-list-table td > small,
.professional-list-table .table-subtext {
  color: #6b7d8f;
  display: block;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 3px;
}

.professional-list-table .professional-list-actions {
  max-width: 250px;
  min-width: 108px;
  width: 1%;
}

.professional-list-actions > a:not(.text-link),
.professional-list-actions > button,
.professional-list-actions .table-actions a,
.professional-list-actions .table-actions button,
.professional-list-actions .row-actions a,
.professional-list-actions .row-actions button {
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}

.professional-list-actions .table-actions,
.professional-list-actions .row-actions {
  justify-content: flex-end;
}

.professional-list-empty-row td {
  max-width: none;
  padding: 24px;
}

.pagination-bar {
  background: #fff;
  border: 1px solid #dbe4ea;
  border-radius: 10px;
  margin-top: 14px;
  padding: 10px 12px;
}

@media (max-width: 820px) {
  .table-panel:has(> .professional-list-table),
  .table-panel:has(> .table-scroll > .professional-list-table),
  .table-panel:has(> .table-responsive > .professional-list-table) {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .table-scroll:has(> .professional-list-table),
  .table-responsive:has(> .professional-list-table),
  .table-wrap:has(> .professional-list-table) {
    overflow: visible;
  }

  .professional-list-table,
  .professional-list-table tbody {
    display: block;
    width: 100%;
  }

  .professional-list-table thead {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .professional-list-table tbody {
    display: grid;
    gap: 12px;
  }

  .professional-list-table tbody tr {
    background: #fff !important;
    border: 1px solid #dbe4ea;
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(23, 32, 51, .05);
    display: block;
    overflow: hidden;
  }

  .professional-list-table tbody td {
    align-items: start;
    border-bottom: 1px solid #edf1f4;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    max-width: none;
    min-height: 44px;
    padding: 11px 13px;
    text-align: left !important;
    width: 100% !important;
  }

  .professional-list-table tbody td::before {
    color: #6a7b8d;
    content: attr(data-label);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .045em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .professional-list-table .professional-list-actions {
    align-items: center;
    background: #f7fafb;
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    max-width: none;
    width: 100%;
  }

  .professional-list-actions .table-actions,
  .professional-list-actions .row-actions {
    justify-content: flex-start;
  }

  .professional-list-empty-row td {
    display: block;
    padding: 18px;
  }

  .professional-list-empty-row td::before {
    content: none;
  }
}

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

  .content-header,
  .page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .content-header .header-actions,
  .page-header .header-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 700px) {
  .content-header > div:first-child,
  .page-header > div:first-child {
    flex: 0 1 auto;
  }

  .preanalytic-steps,
  .preanalytic-test-selector > ul,
  .preanalytic-test-selector > div {
    grid-template-columns: 1fr;
  }

  .preanalytic-steps > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .preanalytic-form .form-field:has(.ui-medium),
  .preanalytic-field-note {
    grid-column: 1 / -1;
  }

  .topbar,
  .content-header,
  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar {
    padding: 10px 14px;
  }

  .topbar-inner,
  .dashboard-hero,
  .section-heading {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .topbar-inner {
    gap: 12px;
    min-height: 0;
  }

  .commercial-detail-shell {
    padding: 16px;
  }

  .commercial-detail-heading,
  .commercial-detail-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .commercial-detail-number {
    min-width: 0;
    text-align: left;
    width: 100%;
  }

  .commercial-detail-summary {
    grid-template-columns: 1fr;
  }

  .topnav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .nav-divider {
    display: none;
  }

  .dashboard-hero {
    padding: 22px;
  }

  .dashboard-hero h1 {
    font-size: 32px;
  }

  .dashboard-hero-panel,
  .section-heading {
    width: 100%;
  }

  .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .dashboard-company-actions,
  .dashboard-quick-actions {
    width: 100%;
  }

  .dashboard-kpi-grid,
  .dashboard-priority-grid,
  .managerial-chart-grid,
  .report-metric-grid {
    grid-template-columns: 1fr;
  }

  .managerial-chart-wide {
    grid-column: auto;
  }

  .managerial-chart-heading {
    flex-direction: column;
  }

  .sales-trend-chart {
    gap: 4px;
    height: 145px;
  }

  .sales-trend-column small {
    font-size: 9px;
  }

  .dashboard-priority-grid > a,
  .dashboard-priority-grid > a:nth-child(odd),
  .dashboard-priority-grid > a:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e7ebf0;
    border-right: 0;
  }

  .dashboard-priority-grid > a:last-child {
    border-bottom: 0;
  }

  .form-grid,
  .compact-form-grid {
    grid-template-columns: 1fr;
  }

  .form-field,
  .form-field:has(.ui-short),
  .form-field:has(.ui-date),
  .form-field:has(.ui-money),
  .form-field:has(.ui-quantity),
  .form-field:has(.ui-medium),
  .form-field:has(.ui-wide),
  .form-field:has(.ui-area),
  .form-field:has(.form-check-input),
  .checkbox-label {
    grid-column: 1 / -1;
  }

  .module-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .module-image {
    min-height: 138px;
  }

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

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

  .pos-hero,
  .pos-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cart-header {
    display: none;
  }

  .cart-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .pos-summary {
    display: grid;
    justify-content: stretch;
  }

  .list-search-panel,
  .list-filter-panel {
    grid-template-columns: 1fr;
  }

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

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

/* POS terminal layout */
.page:has(.pos-terminal) {
  max-width: none;
  padding: 18px;
}

.pos-terminal-header {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 14px 18px;
}

.pos-terminal {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(680px, 1fr) 340px;
}

.pos-ticket-area {
  display: grid;
  gap: 14px;
  grid-template-rows: minmax(280px, 42vh) minmax(280px, 1fr);
}

.pos-ticket-panel,
.pos-catalog-panel,
.pos-control-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pos-ticket-panel,
.pos-catalog-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.terminal-panel-title,
.control-card-title {
  align-items: center;
  background: #0f766e;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.terminal-panel-title small,
.control-card-title small {
  color: rgba(255, 255, 255, .78);
  display: block;
  margin-top: 2px;
}

.terminal-panel-title > span {
  background: rgba(255, 255, 255, .15);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
}

.ticket-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(210px, 1fr) 92px 100px 95px minmax(145px, .7fr) 115px 40px;
}

.ticket-head {
  background: #eef2f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  padding: 10px 12px;
  text-transform: uppercase;
}

.ticket-lines {
  overflow: auto;
}

.ticket-line {
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 9px 12px;
}

.ticket-line.is-active {
  background: #ecfdf5;
}

.ticket-item-name {
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
}

.ticket-line input {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.ticket-line input[readonly] {
  background: #f8fafc;
  color: var(--muted);
}

.pos-catalog-panel .terminal-panel-title {
  gap: 14px;
}

.terminal-search {
  color: #ffffff;
  display: grid;
  gap: 4px;
  min-width: 280px;
}

.terminal-search span {
  font-size: 12px;
  font-weight: 800;
}

.terminal-search input {
  border: 0;
  border-radius: 8px;
  min-height: 40px;
  padding: 9px 12px;
}

.product-tile-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  overflow: auto;
  padding: 12px;
}

.product-tile {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 126px;
  padding: 12px;
  text-align: left;
}

.product-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.product-tile:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.tile-code {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.tile-meta {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.tile-meta small {
  color: var(--muted);
}

.pos-control-panel {
  align-content: start;
  display: grid;
  gap: 12px;
  padding: 0;
}

.control-card {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
}

.control-card-title {
  background: #172033;
}

.control-card .terminal-search,
.compact-fields,
.customer-results,
.compact-recent {
  padding: 0 12px;
}

.customer-results {
  display: grid;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
}

.customer-pick {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 3px;
  padding: 10px;
  text-align: left;
}

.customer-pick:hover {
  border-color: var(--accent);
}

.customer-pick span {
  color: var(--muted);
}

.compact-fields {
  display: grid;
  gap: 10px;
}

.compact-fields label {
  color: var(--muted);
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
}

.compact-fields input,
.compact-fields select {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 38px;
  padding: 8px 10px;
}

.pos-total-card {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 12px;
}

.pos-total-card div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.pos-total-card span {
  color: var(--muted);
}

.terminal-grand-total {
  border-top: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 24px;
  padding-top: 10px;
}

.pos-action-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  padding: 0 12px;
}

.pos-keypad {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 12px;
}

.pos-keypad button {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  min-height: 46px;
}

.pos-keypad button:hover {
  border-color: var(--accent);
}

.pos-control-panel .pos-submit {
  margin: 0 12px;
  width: calc(100% - 24px);
}

/* Invoice-first POS flow */
.page:has(.pos-invoice-flow) {
  max-width: none;
  padding: 18px;
}

.pos-invoice-flow {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.invoice-flow-section {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .05);
  overflow: hidden;
}

.invoice-flow-title {
  align-items: center;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.invoice-flow-title > div {
  align-items: center;
  display: flex;
  gap: 12px;
}

.invoice-flow-title small {
  color: rgba(255, 255, 255, .72);
  display: block;
  margin-top: 2px;
}

.flow-step {
  align-items: center;
  background: #14b8a6;
  border-radius: 8px;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.flow-badge,
.invoice-flow-title > span:not(.flow-step) {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 10px;
}

.invoice-header-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  padding: 14px 16px;
}

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

.invoice-info-card span,
.field-block span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-info-card strong {
  color: var(--accent-strong);
  font-size: 18px;
}

.field-block {
  color: var(--muted);
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
}

.field-block input,
.field-block select {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
  min-height: 40px;
  min-width: 0;
  padding: 8px 10px;
  width: 100%;
}

.customer-credit-grid {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(420px, 1fr) 360px;
  padding: 14px 16px 16px;
}

.flow-subpanel {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.flow-subpanel header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.flow-subpanel header small {
  color: var(--muted);
}

.flow-subpanel a {
  color: var(--accent-strong);
  font-weight: 900;
  text-decoration: none;
}

.flow-subpanel .terminal-search {
  color: var(--muted);
  min-width: 0;
}

.flow-subpanel .terminal-search input {
  border: 1px solid var(--line);
}

.sale-condition-panel {
  align-content: start;
}

.credit-switch {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px;
}

.credit-switch input {
  height: 20px;
  width: 20px;
}

.credit-switch span {
  display: grid;
  gap: 3px;
}

.credit-switch small {
  color: var(--muted);
}

.credit-fields.is-hidden {
  display: none;
}

.field-block.is-hidden {
  display: none !important;
}

.invoice-detail-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: 360px minmax(0, 1fr);
  padding: 14px 16px 16px;
}

.invoice-detail-panel .pos-catalog-panel,
.invoice-detail-panel .pos-ticket-panel {
  min-height: 460px;
}

.invoice-detail-panel .terminal-panel-title {
  min-height: 74px;
}

.invoice-detail-panel .product-tile-grid {
  grid-template-columns: 1fr;
  max-height: 540px;
}

.invoice-detail-panel .product-tile {
  min-height: 104px;
}

.invoice-detail-panel .ticket-lines {
  max-height: 540px;
}

.invoice-final-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 420px;
  padding: 14px 16px 16px;
}

.final-payment-panel,
.final-summary-panel {
  display: grid;
  gap: 12px;
}

.cash-payment-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
}

.payment-split-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr;
  padding: 9px;
}

.payment-split-heading {
  border-bottom: 1px solid #e2e8f0;
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
}

.payment-split-heading small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
}

.payment-split-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) minmax(92px, .72fr);
  min-width: 0;
  padding: 8px;
}

.payment-split-row .field-block {
  min-width: 0;
}

.payment-split-row .field-block:nth-child(3) {
  grid-column: 1 / -1;
}

.payment-summary-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.payment-summary-card > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.payment-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-summary-card strong {
  color: #0f172a;
}

.payment-summary-card.is-muted {
  display: none;
}

.discount-summary-card {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.discount-summary-card small {
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.payment-modal {
  align-items: center;
  background: rgba(15, 23, 42, .48);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 45;
}

.payment-modal.is-hidden {
  display: none !important;
}

.payment-modal-card {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  display: grid;
  gap: 12px;
  max-width: 720px;
  padding: 14px;
  width: min(720px, 100%);
}

.payment-modal-card header,
.payment-modal-card footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.payment-modal-card header small {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

.payment-modal-card .payment-split-row {
  grid-template-columns: minmax(160px, 1.2fr) minmax(130px, .8fr) minmax(180px, 1fr);
}

.payment-modal-card .payment-split-row .field-block:nth-child(3) {
  grid-column: auto;
}

.payment-modal-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.payment-modal-totals span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  text-transform: uppercase;
}

.payment-modal-totals strong {
  color: var(--accent-strong);
  margin-left: 6px;
}

.cash-payment-fields.is-muted {
  opacity: .55;
}

.cash-payment-fields.is-muted::after {
  color: var(--muted);
  content: "En credito no se exige monto recibido al emitir.";
  font-size: 13px;
  font-weight: 800;
}

.invoice-final-panel .pos-keypad,
.invoice-final-panel .pos-action-grid {
  padding: 0;
}

.invoice-final-panel .pos-total-card {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.invoice-final-panel .pos-submit {
  min-height: 52px;
}

.invoice-final-panel .compact-recent {
  padding: 0;
}

/* POS register redesign */
.page:has(.pos-register) {
  background: #eef2f7;
  display: grid;
  gap: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  max-width: none;
  overflow: hidden;
  padding: 10px;
}

body:has(.pos-register) {
  overflow: hidden;
}

body:has(.pos-register) .topbar {
  min-height: 38px;
  padding: 0 18px;
}

body:has(.pos-register) .topbar-inner {
  min-height: 38px;
}

body:has(.pos-register) .brand {
  font-size: 16px;
}

body:has(.pos-register) .brand-mark {
  border-radius: 6px;
  font-size: 11px;
  height: 28px;
  width: 28px;
}

body:has(.pos-register) .brand-copy small {
  display: none;
}

body:has(.pos-register) .topnav {
  gap: 12px;
}

body:has(.pos-register) .topnav a,
body:has(.pos-register) .topnav button {
  font-size: 13px;
  min-height: 28px;
  padding: 4px 8px;
}

.pos-workbar {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  min-height: 52px;
  padding: 6px 12px;
}

.pos-workbar h1 {
  font-size: 22px;
  margin: 0;
}

.pos-workbar .eyebrow {
  font-size: 11px;
  margin-bottom: 4px;
}

body:has(.pos-register) .secondary-button {
  min-height: 38px;
  padding: 9px 14px;
}

.pos-register {
  display: grid;
  gap: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  position: relative;
}

.pos-alerts {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  align-items: start;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
  display: grid;
  font-size: 13px;
  font-weight: 900;
  gap: 4px;
  grid-template-columns: 1fr auto;
  left: 10px;
  padding: 8px 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 12;
}

.pos-alerts-content {
  display: grid;
  gap: 4px;
}

.pos-alerts-close {
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  min-height: 30px;
  padding: 4px 10px;
}

.pos-alerts.is-hidden,
.payment-reference-field.is-hidden,
.cash-payment-fields.is-hidden {
  display: none !important;
}

.pos-register-header,
.product-browser,
.sale-lines-panel,
.checkout-panel {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  overflow-x: hidden;
  overflow-y: auto;
}

.pos-register-header {
  align-items: start;
  display: grid;
  gap: 0;
  grid-template-columns: 190px 230px minmax(360px, 1fr) 330px 250px;
  min-height: 96px;
  overflow: visible;
}

.pos-header-title,
.document-summary,
.document-controls,
.customer-box,
.sale-mode-box {
  border-right: 1px solid #e2e8f0;
  padding: 10px;
}

.pos-header-title {
  align-items: center;
  align-self: stretch;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  gap: 10px;
}

.pos-header-title small,
.pos-panel-heading small {
  color: rgba(255, 255, 255, .72);
  display: block;
  margin-top: 2px;
}

.document-summary {
  display: grid;
  gap: 6px;
}

.document-summary > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 6px 9px;
}

.document-summary span,
.customer-box .terminal-search span,
.product-search-box span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.document-summary strong {
  color: #0f766e;
  font-size: 16px;
}

.document-controls {
  align-content: center;
  display: grid;
  gap: 8px 10px;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.pos-register.has-extended-header .document-controls {
  align-content: start;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.document-controls .field-block {
  align-content: start;
}

.document-controls .insurance-split-summary {
  grid-column: 1 / -1;
}

.pos-register.has-insurance-billing.has-extended-header .document-controls .insurance-split-summary {
  align-items: center;
  align-self: end;
  display: flex;
  font-size: 10px;
  grid-column: auto;
  min-height: 36px;
}

.document-controls .field-block select {
  height: 36px;
  min-height: 36px;
}

.compact-control select {
  min-width: 0;
}

.customer-box {
  display: grid;
  gap: 4px;
  overflow: visible;
  position: relative;
}

.quick-customer-open {
  background: #eefdf9;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  color: #0f766e;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  min-height: 26px;
  padding: 4px 10px;
  position: absolute;
  right: 10px;
  top: 8px;
}

.customer-box .terminal-search,
.product-search-box {
  color: #64748b;
  min-width: 0;
}

.customer-box .terminal-search input,
.product-search-box input {
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
}

.selected-customer-summary {
  background: #ecfdf5;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  color: #0f172a;
  display: grid;
  gap: 2px;
  min-height: 38px;
  padding: 6px 9px;
}

.selected-customer-summary strong,
.selected-customer-summary span,
.customer-search-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-customer-summary span {
  color: #475569;
  font-size: 12px;
}

.customer-box .customer-results {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
  left: 12px;
  max-height: 230px;
  overflow: auto;
  padding: 8px;
  position: absolute;
  right: 12px;
  top: 70px;
  z-index: 4;
}

.customer-box .customer-results.is-hidden {
  display: none;
}

.sale-mode-box {
  border-right: 0;
  display: grid;
  gap: 6px;
}

.sale-mode-status {
  align-items: center;
  background: #0f766e;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  padding: 7px 10px;
}

.sale-mode-status.is-credit {
  background: #334155;
}

.pos-register-body {
  display: grid;
  gap: 8px;
  grid-template-columns: 320px minmax(0, 1fr) 360px;
  min-height: 0;
}

.pos-panel-heading {
  align-items: center;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 10px;
}

.pos-panel-heading > div {
  align-items: center;
  display: flex;
  gap: 10px;
}

.pos-panel-heading b {
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 6px 10px;
}

.product-browser {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.product-search-box {
  padding: 8px 10px 6px;
}

.product-search-box input {
  min-height: 38px;
}

.product-search-status {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px 6px;
}

.product-search-status.is-empty {
  color: #b42318;
}

.customer-search-status {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  min-height: 28px;
  padding: 5px 8px;
}

.customer-search-status.is-empty {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

#customer-search-status.has-selection {
  display: none;
}

.product-browser .product-tile-grid {
  align-content: start;
  grid-template-columns: 1fr;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding: 0 10px 10px;
}

.product-browser .product-tile {
  align-content: start;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: auto;
  min-height: 104px;
  overflow: visible;
  padding: 8px;
}

.product-browser .tile-code {
  flex: 0 0 auto;
}

.product-browser .product-tile > strong {
  display: -webkit-box;
  flex: 0 0 auto;
  line-height: 1.2;
  min-height: 2.4em;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-browser .tile-meta {
  align-items: center;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  line-height: 1.15;
  margin-top: auto;
  min-width: 0;
}

.product-browser .tile-meta b {
  margin-left: auto;
  white-space: nowrap;
}

.product-browser .product-tile[hidden] {
  display: none !important;
}

.product-browser .product-tile:not(:disabled):hover {
  background: #f0fdfa;
}

.sale-lines-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.sale-lines-panel .ticket-grid {
  grid-template-columns: minmax(190px, 1fr) 140px 85px 80px minmax(135px, .7fr) 100px 34px;
}

.pos-register.has-line-seller .sale-lines-panel .ticket-grid {
  grid-template-columns: minmax(120px, 1fr) 108px 68px 65px minmax(90px, .55fr) minmax(100px, .6fr) 84px 32px;
  min-width: 720px;
}

.quantity-control {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: 30px minmax(76px, 1fr) 30px;
}

.quantity-control button {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
}

.quantity-control input {
  min-width: 72px;
  text-align: center;
}

.quantity-control button:hover {
  border-color: #0f766e;
  color: #0f766e;
}

.sale-lines-panel .ticket-lines {
  max-height: none;
  min-height: 0;
  overflow: auto;
}

.cart-empty-state {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-weight: 800;
  padding: 10px 12px;
}

.cart-empty-state.is-hidden {
  display: none;
}

.checkout-panel {
  align-content: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: sticky;
  scrollbar-gutter: stable;
  top: 12px;
}

.checkout-panel .checkout-heading,
.checkout-panel .pos-total-card,
.checkout-panel .discount-summary-card,
.checkout-panel .payment-summary-card,
.checkout-panel .pos-submit,
.checkout-panel .compact-recent {
  grid-column: 1 / -1;
}

.checkout-panel .pos-total-card {
  border-bottom: 1px solid #e2e8f0;
  gap: 4px;
  padding: 8px 10px;
}

.checkout-panel .terminal-grand-total {
  color: #0f766e;
  font-size: 20px;
}

.checkout-panel .payment-split-row .field-block input,
.checkout-panel .payment-split-row .field-block select {
  min-height: 36px;
  min-width: 0;
  padding: 7px 8px;
  width: 100%;
}

.checkout-panel .field-block input,
.checkout-panel .field-block select {
  min-height: 36px;
  min-width: 0;
  width: 100%;
}

.checkout-panel .pos-keypad,
.checkout-panel .pos-action-grid {
  padding: 0 10px;
}

.checkout-panel .pos-keypad {
  padding-right: 4px;
}

.checkout-panel .pos-action-grid {
  padding-left: 4px;
}

.checkout-panel .pos-submit {
  margin: 0 10px;
  min-height: 40px;
  width: calc(100% - 20px);
}

.checkout-panel .compact-recent {
  display: none;
}

.checkout-panel .recent-list {
  gap: 6px;
}

.checkout-panel .recent-list a {
  padding: 8px;
}

.checkout-panel .pos-keypad {
  gap: 6px;
}

.checkout-panel .pos-keypad button {
  font-size: 15px;
  min-height: 34px;
}

.checkout-panel .pos-action-grid {
  gap: 6px;
  grid-template-columns: repeat(2, 1fr);
}

.checkout-panel .pos-action-grid .secondary-button {
  font-size: 12px;
  line-height: 1.05;
  min-height: 34px;
  padding: 6px 5px;
}

.checkout-panel .danger-action {
  color: #b42318;
}

@media (min-width: 1101px) and (max-height: 950px) {
  .page:has(.pos-register) {
    gap: 6px;
    padding: 6px;
  }

  .pos-workbar {
    min-height: 44px;
    padding: 4px 10px;
  }

  .pos-workbar h1 {
    font-size: 19px;
  }

  .pos-workbar .eyebrow {
    margin-bottom: 1px;
  }

  .pos-register {
    gap: 6px;
  }

  .pos-register-header {
    min-height: 82px;
  }

  .pos-header-title,
  .document-summary,
  .document-controls,
  .customer-box,
  .sale-mode-box {
    padding: 6px 8px;
  }

  .document-summary {
    gap: 4px;
  }

  .document-summary > div {
    padding: 4px 7px;
  }

  .document-summary strong {
    font-size: 14px;
  }

  .customer-box .terminal-search input {
    height: 32px;
    min-height: 32px;
  }

  .document-controls {
    padding-bottom: 10px;
  }

  .document-controls .field-block select {
    height: 36px;
    min-height: 36px;
  }

  .customer-search-status {
    font-size: 10px;
    min-height: 22px;
    padding: 3px 6px;
  }

  .selected-customer-summary {
    min-height: 32px;
    padding: 4px 7px;
  }

  .quick-customer-open {
    min-height: 22px;
    padding: 2px 8px;
    top: 5px;
  }

  .sale-mode-status {
    padding: 5px 8px;
  }

  .credit-switch {
    min-height: 52px;
    padding: 6px;
  }

  .pos-register-body {
    gap: 6px;
  }

  .pos-panel-heading {
    min-height: 40px;
    padding: 5px 8px;
  }

  .product-search-box {
    padding: 5px 8px 3px;
  }

  .product-search-box input {
    min-height: 32px;
  }

  .product-search-status {
    font-size: 10px;
    padding: 0 8px 4px;
  }

  .product-browser .product-tile-grid {
    padding: 0 8px 8px;
  }

  .product-browser .product-tile {
    min-height: 96px;
    padding: 7px;
  }

  .checkout-panel {
    gap: 4px;
  }

  .checkout-panel .pos-total-card {
    gap: 2px;
    padding: 5px 8px;
  }

  .checkout-panel .pos-total-card div {
    font-size: 12px;
    line-height: 1.1;
  }

  .checkout-panel .terminal-grand-total {
    font-size: 17px;
    padding-top: 4px;
  }

  .checkout-panel .discount-summary-card,
  .checkout-panel .payment-summary-card {
    gap: 3px;
    padding: 6px 8px;
  }

  .checkout-panel .discount-summary-card small,
  .checkout-panel .payment-summary-card span {
    font-size: 10px;
    line-height: 1.15;
  }

  .checkout-panel .discount-summary-card input,
  .checkout-panel .payment-summary-card .primary-button {
    min-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .checkout-panel .pos-keypad,
  .checkout-panel .pos-action-grid {
    gap: 4px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .checkout-panel .pos-keypad button,
  .checkout-panel .pos-action-grid .secondary-button {
    min-height: 30px;
  }

  .checkout-panel .pos-submit {
    min-height: 36px;
  }
}

.quick-customer-modal {
  align-items: center;
  background: rgba(15, 23, 42, .42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 40;
}

.quick-customer-modal.is-hidden,
.quick-customer-errors.is-hidden {
  display: none !important;
}

.quick-customer-card {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
  display: grid;
  gap: 14px;
  max-width: 620px;
  padding: 16px;
  width: 100%;
}

.quick-customer-card header,
.quick-customer-card footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.quick-customer-card header small {
  color: #64748b;
  display: block;
  margin-top: 2px;
}

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

.quick-customer-grid label {
  color: #64748b;
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 900;
}

.quick-customer-grid input,
.quick-customer-grid select {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  min-height: 40px;
  padding: 8px 10px;
}

.quick-customer-grid .wide-field {
  grid-column: 1 / -1;
}

.quick-customer-errors {
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 8px;
  color: #b42318;
  display: grid;
  font-size: 13px;
  font-weight: 900;
  gap: 4px;
  padding: 8px 10px;
}

@media (max-width: 1380px) {
  .pos-register-header {
    grid-template-columns: 150px 170px minmax(300px, 1fr) 260px 190px;
  }

  .sale-mode-box {
    border-top: 0;
    grid-column: auto;
  }

  .pos-register-body {
    grid-template-columns: 300px minmax(0, 1fr) 330px;
  }

  .sale-lines-panel .ticket-grid {
    grid-template-columns: minmax(140px, 1fr) 110px 72px 68px minmax(90px, .55fr) 84px 32px;
  }

  .pos-register.has-line-seller .sale-lines-panel .ticket-grid {
    grid-template-columns: minmax(120px, 1fr) 100px 64px 60px minmax(82px, .5fr) minmax(90px, .55fr) 78px 30px;
    min-width: 680px;
  }

  .quantity-control {
    grid-template-columns: 26px minmax(48px, 1fr) 26px;
  }

  .quantity-control input {
    min-width: 0;
  }

  .document-controls {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .pos-register.has-extended-header .document-controls {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  .pos-register.has-insurance-billing.has-extended-header .document-controls .insurance-split-summary {
    grid-column: auto;
  }

  .sale-mode-status {
    padding: 6px 8px;
  }

  .credit-switch {
    padding: 8px;
  }
}

@media (max-width: 1100px) {
  body:has(.pos-register) {
    overflow: auto;
  }

  .page:has(.pos-register) {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .pos-register {
    grid-template-rows: auto auto;
  }

  .pos-terminal {
    grid-template-columns: 1fr;
  }

  .pos-ticket-area {
    grid-template-rows: auto auto;
  }

  .invoice-header-grid,
  .customer-credit-grid,
  .invoice-detail-layout,
  .invoice-final-grid,
  .cash-payment-fields {
    grid-template-columns: 1fr;
  }

  .pos-workbar,
  .pos-register-header,
  .pos-register-body,
  .document-controls,
  .inline-action-form,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .product-browser .product-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .pos-register.has-extended-header .document-controls {
    grid-template-columns: 1fr;
  }

  .pos-register.has-insurance-billing.has-extended-header .document-controls .insurance-split-summary {
    grid-column: 1 / -1;
  }

  .pos-workbar,
  .pos-register-header {
    display: grid;
  }

  .checkout-panel {
    position: static;
  }

  .customer-box .customer-results {
    position: static;
  }
}

@media (max-width: 700px) {
  .payment-modal {
    align-items: stretch;
    padding: 8px;
  }

  .payment-modal-card {
    max-height: calc(100vh - 16px);
    overflow: auto;
  }

  .payment-modal-card header,
  .payment-modal-card footer {
    align-items: stretch;
    display: grid;
  }

  .payment-modal-card .payment-split-row {
    grid-template-columns: 1fr;
  }

  .payment-modal-card .payment-split-row .field-block:nth-child(3) {
    grid-column: 1 / -1;
  }

  .product-browser .product-tile-grid {
    grid-template-columns: 1fr;
  }
}

/* Vertical module navigation */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

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

.app-shell.sidebar-is-collapsed {
  grid-template-columns: 78px minmax(0, 1fr);
}

.app-main {
  min-width: 0;
}

.sidebar-nav.topbar {
  align-items: stretch;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbfd 52%, #eefcf8 100%);
  border-bottom: 0;
  border-right: 1px solid rgba(221, 227, 236, .95);
  box-shadow: 16px 0 42px rgba(23, 32, 51, .08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100vh;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
  padding: 18px 14px 14px;
  position: sticky;
  top: 0;
  transition: padding .2s ease;
  z-index: 40;
}

.sidebar-heading {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.sidebar-nav .brand {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.sidebar-heading .brand {
  flex: 1;
  width: auto;
}

.sidebar-nav .brand-mark {
  flex: 0 0 38px;
}

.sidebar-nav .brand-copy {
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}

.sidebar-nav .brand-copy strong {
  line-height: 1.05;
  white-space: nowrap;
}

.sidebar-nav .brand-copy small {
  display: block;
  font-size: 10px;
  letter-spacing: .015em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-transform: none;
  white-space: normal;
}

.sidebar-collapse-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: 22px;
  height: 34px;
  justify-content: center;
  padding: 0;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus-visible {
  background: #edf8f6;
  border-color: #abd8d2;
  color: var(--accent-strong);
}

.sidebar-company {
  align-items: center;
  background: linear-gradient(135deg, #0d5f59, #0f766e);
  border-radius: 11px;
  box-shadow: 0 12px 24px rgba(15, 118, 110, .16);
  color: #fff;
  display: grid;
  gap: 9px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 10px;
}

.sidebar-company-mark,
.sidebar-user-avatar {
  align-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.sidebar-company > span:nth-child(2),
.sidebar-user > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.sidebar-company small {
  color: rgba(255, 255, 255, .7);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sidebar-company strong {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-company b {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

.sidebar-search {
  display: grid;
  gap: 5px;
}

.sidebar-search > label {
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  padding-left: 3px;
  text-transform: uppercase;
}

.sidebar-search > span {
  align-items: center;
  background: #fff;
  border: 1px solid #dce4ea;
  border-radius: 9px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  padding: 0 9px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.sidebar-search > span:focus-within {
  border-color: #67bdb2;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .11);
}

.sidebar-search i {
  border: 2px solid #8a99aa;
  border-radius: 50%;
  display: block;
  height: 10px;
  position: relative;
  width: 10px;
}

.sidebar-search i::after {
  background: #8a99aa;
  content: "";
  height: 2px;
  position: absolute;
  right: -5px;
  top: 8px;
  transform: rotate(45deg);
  width: 6px;
}

.sidebar-search input {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 12px;
  min-height: 36px;
  min-width: 0;
  outline: 0;
  padding: 0 7px;
  width: 100%;
}

.sidebar-search kbd {
  background: #f1f5f9;
  border: 1px solid #dbe3eb;
  border-radius: 5px;
  color: #64748b;
  font-family: inherit;
  font-size: 10px;
  padding: 1px 5px;
}

.sidebar-menu.topnav {
  align-content: start;
  align-items: stretch;
  display: grid;
  flex: 1;
  gap: 8px;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1px 4px 8px 0;
  scrollbar-color: #c5d6d4 transparent;
  scrollbar-width: thin;
  justify-content: stretch;
}

.sidebar-menu .nav-pill {
  border-color: transparent;
  border-radius: 8px;
  font-size: 14px;
  gap: 9px;
  justify-content: flex-start;
  line-height: 1.25;
  min-height: 40px;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

.sidebar-menu .nav-pill .nav-icon {
  box-shadow: 0 2px 6px rgba(15, 118, 110, .08);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.sidebar-menu .nav-pill:hover .nav-icon,
.sidebar-menu .nav-pill:focus-visible .nav-icon {
  background: #d9f3ee;
  border-color: #9ed9cf;
  transform: scale(1.06);
}

.sidebar-menu .nav-pill-primary:hover .nav-icon,
.sidebar-menu .nav-pill-primary:focus-visible .nav-icon {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .4);
}

.sidebar-menu .nav-pill:hover {
  transform: translateX(2px);
}

.sidebar-menu .nav-pill.is-active {
  background: #e6f6f3;
  border-color: #b7e2dc;
  color: var(--accent-strong);
  font-weight: 900;
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-menu > .nav-pill-primary.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 118, 110, .18);
}

.sidebar-menu .nav-pill-primary {
  box-shadow: 0 12px 22px rgba(15, 118, 110, .18);
}

.nav-group {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(221, 227, 236, .9);
  border-radius: 8px;
  overflow: hidden;
}

.nav-group summary {
  align-items: center;
  color: #475569;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: space-between;
  letter-spacing: .04em;
  list-style: none;
  padding: 10px 11px;
  text-transform: uppercase;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::after {
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  height: 6px;
  transform: rotate(45deg);
  transition: transform .24s cubic-bezier(.22, .8, .24, 1);
  width: 6px;
}

.nav-group summary:hover,
.nav-group summary:focus-visible {
  background: #f1f7f8;
  color: var(--accent-strong);
  outline: none;
}

.nav-group[open] summary::after {
  transform: rotate(225deg);
}

.nav-group.is-animating {
  pointer-events: none;
  will-change: height;
}

.nav-group.is-active {
  border-color: #acd9d3;
  box-shadow: 0 7px 18px rgba(15, 118, 110, .08);
}

.nav-group.is-active > summary {
  color: var(--accent-strong);
  background: #f0faf8;
}

.nav-group-items {
  display: grid;
  gap: 3px;
  padding: 0 7px 8px;
}

.nav-group[open] .nav-group-items {
  animation: nav-group-content-in .22s cubic-bezier(.22, .8, .24, 1);
}

@keyframes nav-group-content-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-group[open] .nav-group-items {
    animation: none;
  }
}

.nav-group-account {
  margin-top: 2px;
}

.sidebar-menu .logout-form,
.sidebar-menu .logout-form button {
  width: 100%;
}

.sidebar-menu .nav-divider {
  display: none;
}

.sidebar-menu .nav-pill-muted {
  background: #ffffff;
}

.sidebar-menu.is-filtering .nav-group {
  border-style: dashed;
}

.sidebar-empty-state {
  background: #fff;
  border: 1px dashed #cbd8df;
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  padding: 16px 12px;
  text-align: center;
}

.sidebar-user {
  align-items: center;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #dce4ea;
  border-radius: 11px;
  display: grid;
  gap: 9px;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  padding: 9px;
}

.sidebar-user-avatar {
  background: #e4f4f1;
  border-color: #c6e4df;
  color: var(--accent-strong);
}

.sidebar-user strong {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user small {
  color: var(--muted);
  font-size: 9px;
}

.sidebar-user > a {
  align-items: center;
  border-radius: 7px;
  color: #718096;
  display: inline-flex;
  height: 30px;
  justify-content: center;
}

.sidebar-user > a:hover {
  background: #fff1f2;
  color: #be3445;
}

.sidebar-nav.is-collapsed {
  align-items: center;
  overflow: visible;
  padding: 18px 12px;
}

.sidebar-nav.is-collapsed .sidebar-heading {
  display: grid;
  gap: 10px;
}

.sidebar-nav.is-collapsed .brand {
  flex: none;
  padding: 7px;
  width: 54px;
}

.sidebar-nav.is-collapsed .brand-copy,
.sidebar-nav.is-collapsed .sidebar-company > span:nth-child(2),
.sidebar-nav.is-collapsed .sidebar-company b,
.sidebar-nav.is-collapsed .sidebar-search,
.sidebar-nav.is-collapsed .sidebar-menu,
.sidebar-nav.is-collapsed .sidebar-user {
  display: none;
}

.sidebar-nav.is-collapsed .sidebar-collapse-toggle {
  justify-self: center;
}

.sidebar-nav.is-collapsed .sidebar-company {
  display: flex;
  padding: 9px;
}

body:has(.pos-register) .sidebar-nav.topbar {
  display: none;
}

body:has(.pos-register) .app-shell {
  display: block;
  min-height: 100vh;
}

body:has(.pos-register) .app-main {
  min-width: 0;
  width: 100%;
}

body:has(.pos-register) .messages {
  max-width: none;
}

@media (max-width: 1180px) and (min-width: 701px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-action-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-quick-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .app-shell,
  .app-shell.sidebar-is-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar-nav.topbar {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    height: auto;
    overflow: visible;
    padding: 10px 14px;
    position: sticky;
    top: 0;
  }

  .sidebar-heading { min-width: 0; }
  .sidebar-collapse-toggle, .sidebar-company, .sidebar-search, .sidebar-user { display: none; }
  .sidebar-nav .brand { box-shadow: none; max-width: 230px; }
  .sidebar-mobile-toggle { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; color: var(--text); cursor: pointer; display: flex; gap: 8px; min-height: 42px; padding: 8px 12px; font-weight: 900; }
  .sidebar-mobile-toggle > span:first-child, .sidebar-mobile-toggle > span:first-child::before, .sidebar-mobile-toggle > span:first-child::after { background: currentColor; border-radius: 99px; content: ""; display: block; height: 2px; width: 18px; }
  .sidebar-mobile-toggle > span:first-child { position: relative; }
  .sidebar-mobile-toggle > span:first-child::before { position: absolute; top: -6px; }
  .sidebar-mobile-toggle > span:first-child::after { position: absolute; top: 6px; }
  .sidebar-menu.topnav { background: #f8fbfc; border: 1px solid #dce4ea; border-radius: 12px; box-shadow: 0 18px 35px rgba(23, 32, 51, .13); display: none; grid-column: 1 / -1; max-height: calc(100vh - 86px); overflow-y: auto; padding: 10px; }
  .sidebar-menu.topnav.is-mobile-open { display: grid; }

  .sidebar-menu.topnav {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .sidebar-menu > .nav-pill-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .sidebar-menu.topnav {
    grid-template-columns: 1fr;
  }

  .page { padding: 14px; }
  .pagination-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .pagination-bar > div {
    justify-content: flex-start;
  }
  .dashboard-action-bar { align-items: stretch; display: grid; padding: 14px; }
  .dashboard-quick-actions { display: grid; grid-template-columns: 1fr; }
  .dashboard-quick-actions .primary-button, .dashboard-quick-actions .secondary-button, .dashboard-company-actions .secondary-button { justify-content: center; width: 100%; }
  .dashboard-kpi { min-height: 0; padding: 15px; }
  .dashboard-kpi strong { font-size: 21px; }
  .list-table-wrapper, .table-scroll, .responsive-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  input, select, textarea, button { max-width: 100%; }
}

.credit-return-lines {
  border: 1px solid #d7e0e9;
  border-radius: 8px;
  display: grid;
  gap: 0;
  margin: 14px 0;
  overflow: hidden;
}

.credit-return-heading,
.credit-return-row {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 190px);
  padding: 12px 14px;
}

.credit-return-heading {
  background: #f2f7f8;
}

.credit-return-heading span,
.credit-return-row small {
  color: #5b687a;
  display: block;
}

.credit-return-row {
  border-top: 1px solid #e4eaf0;
}

.credit-return-row .form-field {
  margin: 0;
}

.ecf-verification-panel,
.ecf-letter-stamp {
  align-items: center;
  border: 1px solid #b9d9d4;
  border-radius: 8px;
  display: flex;
  gap: 18px;
  padding: 16px;
}

.ecf-verification-panel img,
.ecf-letter-stamp img {
  background: #fff;
  height: 150px;
  width: 150px;
}

.ecf-ticket-stamp {
  align-items: center;
  border: 1px dashed #111;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 10px 0;
  padding: 8px;
  text-align: center;
}

.ecf-ticket-stamp img {
  height: 115px;
  width: 115px;
}

/* Receivables workspace and customer receipt formats */
.receivable-workflow-grid,
.receivable-history-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.receivable-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.receivable-form-card {
  align-content: start;
  gap: 0;
  grid-template-rows: auto auto auto;
  margin: 0;
  max-width: none;
  padding: 22px;
}

.receivable-form-card h2,
.receivable-table-card h2 {
  margin: 0;
}

.receivable-form-card > p {
  color: var(--muted);
  margin: 5px 0 18px;
}

.receivable-form {
  align-items: end;
  display: grid;
  gap: 12px;
}

.receivable-form > .form-field {
  grid-column: auto;
  min-width: 0;
}

.receivable-form .form-control {
  width: 100%;
}

.receivable-form textarea.form-control {
  min-height: 42px;
  resize: vertical;
}

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

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

.receivable-promise-form > .form-field:nth-of-type(3),
.receivable-promise-form > .form-actions,
.receivable-note-form > .form-actions {
  grid-column: 1 / -1;
}

.receivable-form .form-actions {
  align-items: stretch;
  margin: 0;
}

.receivable-form .form-actions button {
  min-height: 42px;
  white-space: nowrap;
}

.receivable-table-card {
  min-width: 0;
  overflow: hidden;
}

.receivable-table-card > .section-heading {
  margin: 0;
  padding: 18px 20px;
}

.receivable-table-card > .section-heading .eyebrow {
  margin-bottom: 3px;
}

.receivable-payments-panel {
  margin-top: 18px;
}

.receivable-payment-actions {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.customer-receipt-toolbar {
  align-items: center;
  flex-wrap: wrap;
}

.receipt-format-switch {
  background: #e8eef1;
  border-radius: 10px;
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
}

.receipt-format-switch a {
  border-radius: 8px;
  color: #4e6270;
  font-size: 12px;
  font-weight: 850;
  padding: 9px 12px;
}

.receipt-format-switch a.is-active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(23, 32, 51, .1);
}

.customer-receipt--thermal {
  border-radius: 4px;
  padding: 18px;
  width: min(80mm, 100%);
}

.customer-receipt--thermal > header {
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
}

.customer-receipt--thermal > header > div:last-child {
  text-align: left;
}

.customer-receipt--thermal .subscription-receipt-parties,
.customer-receipt--thermal dl {
  grid-template-columns: 1fr;
}

.customer-receipt--thermal .subscription-receipt-parties {
  gap: 14px;
  padding: 16px 0;
}

.customer-receipt--thermal .subscription-receipt-total {
  padding: 16px 10px;
}

.customer-receipt--thermal .subscription-receipt-total strong {
  font-size: 27px;
}

.customer-receipt--thermal dl {
  margin: 16px 0;
}

.customer-receipt--thermal dl div {
  padding: 9px;
}

.customer-receipt--thermal > footer {
  overflow-wrap: anywhere;
}

.receivable-form > .form-actions {
  justify-self: end;
}

@media (max-width: 1250px) {
  .receivable-workflow-grid,
  .receivable-history-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .credit-return-heading,
  .credit-return-row {
    grid-template-columns: 1fr;
  }

  .receivable-form,
  .receivable-promise-form,
  .receivable-note-form {
    grid-template-columns: 1fr;
  }

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

  .receivable-promise-form > .form-field:nth-of-type(3),
  .receivable-promise-form > .form-actions,
  .receivable-note-form > .form-actions {
    grid-column: auto;
  }

  .receivable-form .form-actions,
  .receivable-form .form-actions button {
    width: 100%;
  }

  .customer-receipt-toolbar,
  .receipt-format-switch {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 0;
    width: 100%;
  }
}

@media print {
  @page {
    margin: 12mm;
    size: letter;
  }

  .customer-receipt {
    color: #000;
    margin: 0 auto;
  }

  .customer-receipt--half-letter {
    border: 0;
    border-radius: 0;
    break-inside: avoid-page;
    box-shadow: none;
    column-gap: 16px;
    display: grid;
    font-size: 10px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    page-break-inside: avoid;
    max-width: none;
    padding: 0 !important;
    row-gap: 8px;
    width: 100%;
  }

  .customer-receipt--half-letter > header {
    align-items: center;
    grid-column: 1 / -1;
    padding-bottom: 5px;
  }

  .customer-receipt--half-letter .auth-logo {
    height: 28px;
    margin-bottom: 2px;
    width: 28px;
  }

  .customer-receipt--half-letter h1 {
    font-size: 18px;
  }

  .customer-receipt--half-letter .subscription-receipt-parties {
    gap: 10px;
    grid-column: 1;
    padding: 0;
  }

  .customer-receipt--half-letter .subscription-receipt-total {
    align-content: center;
    grid-column: 2;
    padding: 6px;
  }

  .customer-receipt--half-letter .subscription-receipt-total strong {
    font-size: 21px;
  }

  .customer-receipt--half-letter dl {
    break-inside: avoid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    page-break-inside: avoid;
  }

  .customer-receipt--half-letter dl div {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    break-inside: avoid;
    min-width: 0;
    padding: 4px 6px;
    page-break-inside: avoid;
  }

  .customer-receipt--half-letter dl div:last-child {
    border-right: 0;
  }

  .customer-receipt--half-letter dt {
    font-size: 7px;
  }

  .customer-receipt--half-letter dd {
    font-size: 9px;
    overflow-wrap: anywhere;
  }

  .customer-receipt--half-letter > footer {
    font-size: 7px;
    grid-column: 1 / -1;
    padding-top: 4px;
  }

  .customer-receipt--half-letter > footer p {
    display: none;
  }

  .customer-receipt--thermal {
    border: 0;
    box-shadow: none;
    font-size: 10px;
    margin: 0;
    padding: 0 !important;
    width: 74mm;
  }

  .customer-receipt--thermal .auth-logo {
    height: 30px;
    width: 30px;
  }

  .customer-receipt--thermal h1 {
    font-size: 20px;
  }

  body {
    background: white;
    color: #000;
  }

  html:has(.customer-receipt--half-letter),
  body:has(.customer-receipt--half-letter),
  body:has(.customer-receipt--half-letter) .app-shell,
  body:has(.customer-receipt--half-letter) .app-main,
  body:has(.customer-receipt--half-letter) .page {
    height: auto !important;
    min-height: 0 !important;
  }

  .topbar,
  .messages,
  .print-hidden {
    display: none !important;
  }

  .app-shell {
    display: block;
    min-height: auto;
  }

  .app-main {
    width: 100%;
  }

  .page {
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
  }

  .invoice-panel,
  .thermal-ticket,
  .letter-invoice {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  th,
  td {
    white-space: normal;
  }

  .thermal-ticket {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    padding: 0;
    width: 74mm;
  }

  body:has(.thermal-ticket) {
    width: 80mm;
  }

  body:has(.letter-invoice) {
    width: auto;
  }

  .letter-invoice {
    padding: 0;
    width: 100%;
  }

  .letter-header,
  .letter-info-grid,
  .letter-bottom {
    page-break-inside: avoid;
  }

  .letter-items {
    font-size: 11px;
  }

  .letter-items th,
  .letter-items td {
    padding: 6px 5px;
  }
}

/* Onboarding overrides must remain after the generic form and print rules. */
.signup-fields {
  grid-template-columns: minmax(0, 1fr) !important;
}

.signup-fields > *,
.signup-fields > .checkbox-label {
  grid-column: 1 !important;
}

.saas-plan-usage {
  display: flex;
  gap: 5px;
  align-items: center;
  width: max-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0b665f;
  background: #def5f1;
  font-size: 11px;
}

/* Analyzer interoperability console */
.interface-workspace {
  --interface-navy: #0d1b35;
  --interface-teal: #087e75;
  --interface-cyan: #0b8fa4;
  --interface-line: #d5e2e8;
  display: grid;
  gap: 18px;
}

.interface-hero {
  align-items: center;
  background:
    radial-gradient(circle at 88% 18%, rgba(24, 181, 166, .13), transparent 30%),
    linear-gradient(135deg, #fff 0%, #f3fbfa 100%);
  border: 1px solid #cfe3e2;
  border-radius: 18px;
  margin: 0;
  padding: 24px 26px;
}

.interface-hero h1 { color: var(--interface-navy); letter-spacing: -.035em; }
.interface-hero p:last-child { margin-bottom: 0; }
.analyzer-title { align-items: center; display: flex; gap: 16px; min-width: 0; }
.analyzer-monogram {
  align-items: center;
  background: linear-gradient(145deg, #087e75, #0ba097);
  border: 3px solid #d9f4f0;
  border-radius: 12px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 13px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  letter-spacing: .06em;
}
.analyzer-monogram-large { border-radius: 16px; flex-basis: 58px; font-size: 16px; height: 58px; }
.analyzer-identity { align-items: center; display: flex; gap: 11px; min-width: 220px; }
.analyzer-identity > span:last-child { display: grid; gap: 3px; min-width: 0; }

.interface-metrics { margin: 0; }
.interface-metrics .metric-card { border-top: 3px solid #d9e5ea; min-height: 118px; }
.interface-metrics .metric-card-accent { border-top-color: var(--interface-teal); }
.interface-metrics .metric-card-blue { border-top-color: var(--interface-cyan); }
.interface-metrics .metric-card-rose { background: #fff9f8; border-top-color: #c63e4b; }
.interface-metrics .metric-card strong { color: var(--interface-navy); }

.interface-filters {
  align-items: end;
  background: #fff;
  border: 1px solid var(--interface-line);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto;
  padding: 15px;
}
.interface-filters label, .interface-inline-filter label { display: grid; gap: 6px; }
.interface-filters label > span, .interface-inline-filter label > span {
  color: #53647a; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.interface-filters input, .interface-filters select, .interface-inline-filter select { margin: 0; min-width: 0; width: 100%; }
.interface-filters .list-filter-actions { align-items: center; display: flex; gap: 10px; }

.interface-table-panel { border-color: var(--interface-line); overflow: hidden; }
.interface-table-panel .section-heading { align-items: center; padding: 19px 20px; }
.interface-table-panel .section-heading h2 { color: var(--interface-navy); margin: 2px 0 4px; }
.interface-table-panel .section-heading p { margin: 0; }
.interface-table { min-width: 930px; }
.interface-table thead th { background: #f3f7f9; color: #52657b; font-size: 10px; letter-spacing: .065em; text-transform: uppercase; }
.interface-table tbody td { vertical-align: middle; }
.interface-table td > small, .interface-table td > strong + small, .interface-endpoint {
  color: #66768a; display: block; font-size: 11px; margin-top: 4px; max-width: 250px; overflow-wrap: anywhere;
}
.interface-table code, .interface-technical-strip code {
  background: #edf5f6; border: 1px solid #d6e6e8; border-radius: 6px; color: #086c68; font-size: 11px; padding: 3px 6px;
}

.interface-state { align-items: center; color: #4d6175; display: inline-flex; font-size: 12px; font-weight: 800; gap: 7px; }
.interface-state i { background: #7c8a99; border-radius: 999px; box-shadow: 0 0 0 4px #edf1f4; height: 8px; width: 8px; }
.interface-state-online { color: #08745f; }
.interface-state-online i { background: #16a77f; box-shadow: 0 0 0 4px #dcf6ec; }
.interface-state-stale { color: #997014; }
.interface-state-stale i { background: #d69b1c; box-shadow: 0 0 0 4px #fff3d8; }
.interface-state-inactive { color: #767e89; }
.interface-state-inactive i { background: #9da4ad; }
.protocol-badge { border-radius: 6px; display: inline-flex; font-size: 10px; font-weight: 900; letter-spacing: .07em; padding: 5px 7px; text-transform: uppercase; }
.protocol-hl7 { background: #e0f4f7; color: #096f81; }
.protocol-astm { background: #e7f4ed; color: #18724e; }

.interface-technical-strip {
  background: var(--interface-navy);
  border-radius: 14px;
  color: #fff;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}
.interface-technical-strip > div { background: rgba(255,255,255,.035); min-width: 0; padding: 15px 17px; }
.interface-technical-strip span { color: #9fb0c8; display: block; font-size: 9px; font-weight: 900; letter-spacing: .08em; margin-bottom: 7px; text-transform: uppercase; }
.interface-technical-strip strong { color: #fff; display: block; font-size: 12px; overflow-wrap: anywhere; }
.interface-technical-strip .interface-state { display: inline-flex; }
.interface-technical-strip .protocol-badge { display: inline-flex; }

.interface-form-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(270px, .8fr); }
.interface-config-form { margin: 0; }
.interface-config-form fieldset { border: 0; border-bottom: 1px solid #e1e9ed; margin: 0 0 22px; padding: 0 0 22px; }
.interface-config-form fieldset:last-of-type { border-bottom: 0; }
.interface-config-form legend { align-items: center; color: var(--interface-navy); display: flex; font-size: 15px; font-weight: 900; gap: 9px; margin-bottom: 16px; width: 100%; }
.interface-config-form legend span { background: #dcf4f1; border-radius: 6px; color: #08756d; font-size: 10px; padding: 5px 7px; }
.interface-switches { display: grid; gap: 10px; }
.interface-switch { align-items: center; background: #f6f9fa; border: 1px solid #dce7eb; border-radius: 11px; cursor: pointer; display: flex; gap: 12px; padding: 13px; }
.interface-switch input { flex: 0 0 auto; margin: 0; width: auto; }
.interface-switch span { display: grid; gap: 2px; }
.interface-switch small { color: #68788a; }
.interface-guidance { background: var(--interface-navy); border-radius: 15px; color: #c7d3e2; padding: 22px; }
.interface-guidance h2 { color: #fff; margin: 3px 0 12px; }
.interface-guidance .eyebrow { color: #5ce0d2; }
.interface-guidance li { margin: 10px 0; }
.interface-flow { display: grid; gap: 7px; margin: 18px 0; text-align: center; }
.interface-flow span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff; font-size: 12px; font-weight: 700; padding: 10px; }
.interface-flow b { color: #5ce0d2; }

.interface-import-panel, .interface-diagnostic-alert {
  align-items: center; border-radius: 14px; display: flex; gap: 18px; justify-content: space-between; padding: 18px 20px;
}
.interface-import-panel { background: #eaf8f5; border: 1px solid #b9e4da; }
.interface-import-panel h2, .interface-diagnostic-alert h2 { color: var(--interface-navy); font-size: 17px; margin: 2px 0 5px; }
.interface-import-panel p, .interface-diagnostic-alert p { margin: 0; }
.interface-diagnostic-alert { background: #fff3f1; border: 1px solid #efc4bf; justify-content: flex-start; }
.interface-diagnostic-icon { align-items: center; background: #c8454d; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 38px; font-size: 20px; font-weight: 900; height: 38px; justify-content: center; }
.interface-message-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.interface-payload-panel { background: #fff; border: 1px solid var(--interface-line); border-radius: 14px; min-width: 0; overflow: hidden; }
.interface-payload-panel summary { align-items: center; cursor: pointer; display: flex; font-weight: 800; justify-content: space-between; list-style: none; padding: 15px 17px; }
.interface-payload-panel summary span:first-child { color: var(--interface-navy); display: grid; gap: 2px; }
.interface-payload-panel summary small { color: #718096; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.interface-payload-panel summary span:last-child { color: var(--interface-teal); font-size: 11px; }
.interface-code-block { background: #091426; color: #b9f3e9; font: 11px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; margin: 0; max-height: 360px; overflow: auto; padding: 18px; white-space: pre-wrap; word-break: break-all; }
.interface-payload-empty { border-top: 1px solid #e2eaee; color: #66778a; padding: 18px; }
.interface-inline-filter { min-width: 180px; }

@media (max-width: 1050px) {
  .interface-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interface-filters .list-search { grid-column: 1 / -1; }
  .interface-technical-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .interface-hero, .interface-import-panel { align-items: stretch; flex-direction: column; }
  .interface-hero { padding: 19px; }
  .interface-form-layout, .interface-message-grid { grid-template-columns: 1fr; }
  .interface-technical-strip, .interface-filters { grid-template-columns: 1fr; }
  .interface-filters .list-search { grid-column: auto; }
  .analyzer-title { align-items: flex-start; }
}