/* M&L Sales Studio — visual layer only. */
body:has(#commercial:not(.hidden)) {
  --sale-ink: #171a22;
  --sale-muted: #6f7580;
  --sale-line: #e1e4ea;
  --sale-surface: #ffffff;
  --sale-canvas: #f2f3f6;
  --sale-dark: #171820;
  --sale-magenta: #d22987;
  --sale-cyan: #079bd4;
  --sale-lime: #92c82c;
  background: var(--sale-canvas);
}
.sale-design-fields{display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr;gap:12px;align-items:end;padding:12px;border:1px solid #dce6e1;border-radius:10px;background:#f8fbf9}.sale-design-fields label{display:grid;gap:5px}.sale-design-fields p{margin:0;color:#68766f;font-size:11px}.sale-billing-rule,.sale-policy-note{margin:0;padding:10px 12px;border-radius:8px;background:#fff6d8;color:#745600;font-size:11px}.sale-copy-comments{margin-top:-4px}.sale-rule-note{display:block;color:#8a6500!important;font-weight:600}.sale-checkout-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 9px}.sale-checkout-choices button{border:1px solid #bdd0c7;border-radius:8px;background:#fff;color:#173f33;padding:10px;cursor:pointer}.sale-checkout-choices button:hover{background:#edf6f1}.sale-customer-help{display:block;margin-top:6px;color:#77621a;font-size:10px}@media(max-width:680px){.sale-design-fields,.sale-checkout-choices{grid-template-columns:1fr}}

body:has(#commercial:not(.hidden)) .workspace {
  background:
    radial-gradient(circle at 90% 0%, rgba(7,155,212,.07), transparent 27rem),
    radial-gradient(circle at 40% 100%, rgba(210,41,135,.045), transparent 32rem),
    var(--sale-canvas);
}

body:has(#commercial:not(.hidden)) .shell > aside {
  background:
    radial-gradient(circle at 0 85%, rgba(210,41,135,.13), transparent 15rem),
    radial-gradient(circle at 100% 5%, rgba(7,155,212,.10), transparent 16rem),
    #15171e;
}

body:has(#commercial:not(.hidden)) .shell > aside nav button {
  color: #aeb3bd;
}

body:has(#commercial:not(.hidden)) .shell > aside nav button:hover {
  background: #ffffff0a;
  color: #fff;
}

body:has(#commercial:not(.hidden)) .shell > aside nav button.active {
  border-color: #ffffff36;
  background: linear-gradient(90deg,rgba(210,41,135,.19),rgba(7,155,212,.10));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--sale-magenta);
}

body:has(#commercial:not(.hidden)) .shell > aside .connection span {
  background: var(--sale-lime);
}

body:has(#commercial:not(.hidden)) .workspace > header {
  border-bottom: 1px solid #e2e5e9;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
}

body:has(#commercial:not(.hidden)) .content {
  padding: 22px 30px 56px;
}

#commercial .commercial-tabs {
  position: relative;
  top: auto;
  z-index: 2;
  gap: 3px;
  padding: 5px;
  border: 1px solid #272934;
  border-radius: 11px 11px 0 0;
  background: #1b1d26;
  box-shadow: 0 14px 40px rgba(19,21,28,.12);
}

#commercial .commercial-tabs::before {
  content: "M&L  /  COMERCIAL";
  align-self: center;
  margin: 0 auto 0 13px;
  color: #a7acb8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}

#commercial .commercial-tabs button {
  padding: 10px 16px;
  border-radius: 7px;
  color: #bfc3cd;
  font-size: 10px;
  letter-spacing: .015em;
}

#commercial .commercial-tabs button:hover {
  background: #272a35;
  color: #fff;
}

#commercial .commercial-tabs button.active {
  background: #fff;
  color: #171820;
  box-shadow: 0 3px 12px #0004;
}

.sale-workspace {
  gap: 16px;
  padding: 0 18px 22px;
  border: 1px solid #dadde3;
  border-top: 0;
  border-radius: 0 0 11px 11px;
  background: rgba(246,247,249,.94);
  box-shadow: 0 20px 55px rgba(21,24,32,.10);
}

.sale-titlebar {
  position: relative;
  margin: 0 -18px;
  padding: 28px 25px 27px;
  border-bottom: 1px solid #282b35;
  background:
    linear-gradient(105deg, rgba(210,41,135,.16), transparent 30%),
    linear-gradient(285deg, rgba(7,155,212,.14), transparent 34%),
    #171820;
  color: #fff;
}

.sale-titlebar::after {
  content: "";
  position: absolute;
  right: 25px;
  bottom: 0;
  left: 25px;
  height: 2px;
  background: linear-gradient(90deg,var(--sale-cyan),#3f65d8,var(--sale-magenta),#f5a000,var(--sale-lime));
  opacity: .85;
}

.sale-titlebar .eyebrow {
  color: #9ea4b0;
  letter-spacing: .18em;
}

.sale-titlebar h2 {
  margin-top: 4px;
  color: #fff;
  font-size: clamp(25px,2vw,32px);
  font-weight: 780;
  letter-spacing: -.035em;
}

.sale-titlebar p:last-child {
  color: #aeb3bd;
  font-size: 11px;
}

.sale-live-dot {
  width: 11px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(180deg,var(--sale-cyan),var(--sale-magenta));
  box-shadow: none;
}

.sale-titlebar .sale-soft {
  padding: 11px 14px;
  border: 1px solid #ffffff2b!important;
  background: #ffffff0d;
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.sale-titlebar .sale-soft:hover {
  border-color: #ffffff66!important;
  background: #ffffff18;
}

.sale-capture-card,
.sale-products-card,
.sale-profit {
  border: 1px solid var(--sale-line);
  border-radius: 9px;
  background: var(--sale-surface);
  box-shadow: 0 7px 24px rgba(25,28,36,.045);
}

.sale-capture-card > header,
.sale-products-card > header,
.sale-profit > header {
  min-height: 48px;
  padding: 11px 14px;
  border-bottom: 1px solid #e8eaf0;
  background: #fafbfc;
}

.sale-capture-card > header > span,
.sale-products-card > header > span,
.sale-profit > header > span {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #1d2029;
  color: #fff;
  font-size: 10px;
  box-shadow: inset 3px 0 0 var(--sale-cyan);
}

.sale-products-card > header > span { box-shadow: inset 3px 0 0 var(--sale-magenta); }
.sale-profit > header > span { box-shadow: inset 3px 0 0 var(--sale-lime); }

.sale-capture-card header b,
.sale-products-card header b,
.sale-profit header b {
  color: #20232b;
  font-size: 12px;
  letter-spacing: -.01em;
}

.sale-capture-card header small,
.sale-products-card header small,
.sale-profit header small {
  color: #8a909a;
  font-size: 9px;
}

.sale-fields {
  gap: 15px;
  padding: 17px;
}

.sale-fields label,
.sale-actions label {
  color: #707680;
  font-size: 9px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.sale-fields select,
.sale-fields input,
.sale-actions select {
  height: 40px;
  border-color: #d9dde4;
  border-radius: 6px;
  background: #fff;
  color: #242730;
  box-shadow: inset 0 1px 2px #16192208;
}

.sale-fields select:focus,
.sale-fields input:focus,
.sale-actions select:focus {
  border-color: #6d7dd3;
  outline: 3px solid #6d7dd318;
}

.sale-customer button {
  border-radius: 6px;
  background: #1b1d26;
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--sale-magenta);
}

.sale-products-card > header .sale-add {
  padding: 11px 17px;
  border-radius: 6px;
  background: #1b1d26;
  box-shadow: inset 0 -3px 0 var(--sale-magenta),0 8px 18px #181a2220;
  letter-spacing: .01em;
}

.sale-actions {
  gap: 15px;
  padding: 11px 16px;
  border-bottom-color: #e3e6eb;
  background: #f5f6f8;
}

.sale-global-tax {
  color: #30343d!important;
  text-transform: none!important;
}

.sale-global-tax input { accent-color: var(--sale-magenta); }

.sale-link {
  color: #314f9e;
  font-size: 10px;
  text-decoration: none;
}

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

.sale-table-wrap {
  min-height: 220px;
}

.sale-table-wrap th {
  padding: 12px 11px;
  border-bottom: 1px solid #dfe2e8;
  background: #f8f9fb;
  color: #747b86;
  font-size: 8px;
  letter-spacing: .09em;
}

.sale-table-wrap td {
  padding: 13px 11px;
  color: #323640;
}

.sale-table-wrap tbody tr:hover { background: #fafbfe; }
.sale-empty { color: #9298a2; }

.sale-bottom {
  grid-template-columns: minmax(0,1fr) 350px;
  gap: 16px;
}

.sale-profit-stats {
  background: #e7e9ee;
}

.sale-profit-stats > div {
  padding: 15px;
  background: #fafbfc;
}

.sale-profit-stats span {
  color: #858b95;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.sale-profit-stats b {
  color: #20232b;
  font-size: 15px;
}

.sale-profit > label {
  color: #717780;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sale-profit textarea {
  border: 1px solid #dce0e6;
  border-radius: 6px;
  background: #fbfcfd;
}

.sale-totals {
  border: 1px solid #292c36;
  border-radius: 9px;
  background:
    linear-gradient(145deg,rgba(210,41,135,.10),transparent 42%),
    linear-gradient(325deg,rgba(7,155,212,.10),transparent 46%),
    #181a22;
  box-shadow: 0 16px 35px #17192225;
}

.sale-totals > .eyebrow { color: #8f96a3; }
.sale-totals > div { border-bottom-color: #ffffff16; }

.sale-grand-total strong {
  color: #fff;
  font-size: 31px;
  letter-spacing: -.045em;
}

.sale-pay {
  border-radius: 6px!important;
  background: linear-gradient(90deg,#c92782,#e95182)!important;
  box-shadow: 0 9px 22px #d12d7330;
}

.sale-quote {
  border-radius: 6px!important;
  border-color: #ffffff30!important;
  color: #e6e8ed!important;
}

.sale-product-dialog {
  border: 1px solid #daddE4;
  border-radius: 10px;
  box-shadow: 0 28px 90px #17192266;
}

.sale-modal-heading {
  margin: -24px -24px 20px;
  padding: 20px 24px;
  border-radius: 10px 10px 0 0;
  background: #1a1c24;
  color: #fff;
}

.sale-modal-heading .eyebrow { color: #9399a5; }
.sale-modal-heading h2 { color: #fff; }
.sale-modal-heading .order-close { color: #fff; }

.sale-modal-summary {
  border: 1px solid #e0e3e9;
  border-radius: 7px;
  background: #f7f8fa;
}

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

@media (max-width:650px) {
  body:has(#commercial:not(.hidden)) .content { padding: 5px 5px 78px; }
  #commercial .commercial-tabs::before { display: none; }
  #commercial .commercial-tabs button { flex: 0 0 auto; }
  .sale-workspace { padding: 0 9px 12px; }
  .sale-titlebar { margin: 0 -9px; padding: 21px 15px; }
  .sale-live-dot { height: 34px; }
  .sale-titlebar .sale-soft { padding: 9px 8px; font-size: 9px; }
  .sale-capture-card,.sale-products-card,.sale-profit,.sale-totals { border-radius: 7px; }
  .sale-products-card > header .sale-add { box-shadow: inset 0 -3px 0 var(--sale-magenta); }
  .sale-bottom { gap: 10px; }
}