/* PipesCRM Modern UI · original visual system inspired by bright work-management apps. */
:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-soft: #f8f8fc;
  --ink: #20233b;
  --ink-soft: #45475f;
  --muted: #74768a;
  --line: #e7e8ef;
  --line-strong: #d5d7e2;
  --brand: #6161ff;
  --brand-dark: #4b4bd8;
  --brand-soft: #eeeeff;
  --accent: #0073ea;
  --accent-soft: #eaf4ff;
  --danger: #d83a52;
  --danger-soft: #ffeff2;
  --warning: #c98000;
  --warning-soft: #fff6df;
  --success: #008f68;
  --success-soft: #e7f8f3;
  --violet: #8f55cf;
  --cyan: #0086c9;
  --pink: #e244a0;
  --orange: #d86b1f;
  --yellow: #9c7100;
  --shadow-sm: 0 1px 2px rgba(31, 35, 59, .04), 0 3px 10px rgba(31, 35, 59, .035);
  --shadow: 0 12px 32px rgba(31, 35, 59, .09);
  --shadow-float: 0 18px 42px rgba(31, 35, 59, .14);
  --radius: 14px;
  --radius-sm: 9px;
  --sidebar: 250px;
}

.offer-brand{display:flex;justify-content:flex-start;margin-bottom:18px}.offer-brand img,.offer-email-rich-preview img{display:block;max-width:210px;max-height:86px;object-fit:contain}.offer-email-rich-preview{margin:14px 0;padding:22px;border:1px solid var(--line,#e5e7eb);border-radius:14px;background:#fff;color:#16181d}.offer-email-rich-body{margin-top:18px;line-height:1.65}.public-offer-head img{max-width:190px;max-height:76px;object-fit:contain}.public-document-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.dashboard-change-requests{margin-bottom:18px;border-color:#fecaca;background:#fffafa}.dashboard-change-request-list{display:grid;gap:8px}.dashboard-change-request{display:grid;gap:4px;padding:12px 14px;border:1px solid #fee2e2;border-radius:12px;background:#fff;color:inherit;text-decoration:none}.dashboard-change-request:hover{border-color:#ef4444}.dashboard-change-request span{color:var(--muted,#667085)}.dashboard-change-request small{color:#991b1b}.danger-zone{border-color:#fecaca}.danger-zone[open]{background:#fffafa}.next-order-reference b{color:#4338ca}.public-offer-card details>summary{cursor:pointer;padding:4px 0}.public-offer-card details[open]>summary{margin-bottom:12px}

html { background: var(--bg); }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% -8%, rgba(97, 97, 255, .065), transparent 28rem),
    var(--bg);
  font-family: "Google Sans", "Inter", "Roboto", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: -.006em;
}

::selection { color: #fff; background: var(--brand); }

:focus-visible {
  outline: 3px solid rgba(97, 97, 255, .28);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  padding: 9px 13px;
  border-radius: 9px;
  color: #fff;
  background: var(--brand-dark);
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.skip-link:focus { transform: translateY(0); }

.app-shell {
  min-height: 100dvh;
  transition: grid-template-columns .22s cubic-bezier(.2, .8, .2, 1);
}

.main { background: transparent; }
.pwa-settings { max-width: 760px; padding: 24px; }
.pwa-settings li { margin-block: 10px; }
.pwa-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pwa-actions button { min-height: 44px; }

.content {
  width: 100%;
  max-width: 1720px;
  padding: 25px 30px 54px;
}

/* R20AW: server-rendered content must remain visible even when scripts fail.
   Optional entry motion is owned by experience.css and never gates visibility. */
.content > * { opacity: 1; }

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 12px 10px 10px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .96);
  border-right: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(18px);
  transition: width .22s ease, padding .22s ease;
}

.sidebar-head {
  min-height: 48px;
  gap: 5px;
  margin-bottom: 9px;
}

.brand {
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 2px 4px;
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.brand:hover { background: #f8f8fc; }

.brand img {
  width: 100%;
  max-width: 190px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
}

.sidebar-collapse {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: #888a9d;
  background: #f4f4f8;
}

.sidebar-collapse:hover { color: var(--brand); background: var(--brand-soft); }

.sidebar-collapse svg,
.mobile-menu svg,
.topbar svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-list {
  gap: 3px;
  padding: 2px 1px 9px;
  scrollbar-width: thin;
  scrollbar-color: #dfe1e8 transparent;
}

.nav-link {
  min-height: 42px;
  padding: 6px 8px;
  gap: 9px;
  color: #505267;
  border-radius: 9px;
  font-weight: 620;
  letter-spacing: -.01em;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

.nav-link:hover {
  color: #20233b;
  background: #f3f3f8;
  transform: none;
}

.nav-link.active {
  color: #30304f;
  background: #ececff;
  box-shadow: inset 3px 0 0 var(--brand);
}

.nav-icon {
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  color: var(--brand);
  background: var(--brand-soft);
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon-blue { color: #0667c7; background: #e7f3ff; }
.nav-icon-purple { color: #6a4acb; background: #f0ebff; }
.nav-icon-cyan { color: #007fae; background: #e5f7fc; }
.nav-icon-pink { color: #c7358a; background: #ffebf6; }
.nav-icon-green { color: #008763; background: #e3f7f1; }
.nav-icon-yellow { color: #946900; background: #fff5cf; }
.nav-icon-orange { color: #bf5c18; background: #fff0e4; }
.nav-icon-indigo { color: #4b57cf; background: #eaedff; }
.nav-icon-gray { color: #67697b; background: #f0f1f5; }

.nav-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #4545c8;
  background: #ddddff;
  border: 2px solid #fff;
  font-size: 10px;
  box-shadow: none;
}

.nav-count.danger { color: #b62740; background: #ffe0e6; }

.nav-divider {
  margin: 11px 8px 5px;
  padding-top: 9px;
  border-color: var(--line);
}

.nav-divider span { color: #9a9baa; font-size: 9px; letter-spacing: .12em; }

.sidebar-status {
  min-height: 49px;
  margin-top: auto;
  padding: 8px 9px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfbfd;
}

.sidebar-status b { color: #3f4156; font-size: 11px; }
.sidebar-status small { color: var(--muted); }

.status-dot {
  flex: 0 0 9px;
  background: #a1a3b1;
  box-shadow: 0 0 0 4px rgba(161, 163, 177, .14);
}

.status-dot.online { background: #00b887; box-shadow: 0 0 0 4px rgba(0, 184, 135, .13); }
.status-dot.error { background: #e34b64; box-shadow: 0 0 0 4px rgba(227, 75, 100, .13); }

.sidebar-bottom { padding-top: 7px; gap: 6px; }

.user-chip {
  min-height: 48px;
  padding: 6px 8px;
  color: var(--ink-soft);
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.user-chip:hover { background: #f5f5f9; }

.user-chip b { color: #34364b; }
.user-chip small { color: var(--muted); }

.avatar {
  flex: 0 0 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6161ff 8%, #9458db 54%, #ff5ac8 100%);
  box-shadow: 0 4px 12px rgba(97, 97, 255, .22);
}

.sidebar-actions { gap: 5px; }
.sidebar-actions .ghost { color: #6b6d80; border-color: var(--line); background: #fff; }
.sidebar-actions .ghost:hover { color: var(--brand); border-color: #cfcfff; background: var(--brand-soft); }
.version { color: #afb0bb; font-size: 9px; }

body.sidebar-collapsed { --sidebar: 76px; }
body.sidebar-collapsed .sidebar { padding-inline: 9px; }
body.sidebar-collapsed .brand { flex: 0 0 46px; width: 46px; }
body.sidebar-collapsed .brand img { width: 190px; max-width: none; }
body.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
body.sidebar-collapsed .nav-link { justify-content: center; padding-inline: 6px; }
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-divider span,
body.sidebar-collapsed .sidebar-status div,
body.sidebar-collapsed .user-copy,
body.sidebar-collapsed .sidebar-action-label,
body.sidebar-collapsed .version { display: none; }
body.sidebar-collapsed .nav-divider { margin-inline: 6px; }
body.sidebar-collapsed .sidebar-status { justify-content: center; min-height: 42px; }
body.sidebar-collapsed .user-chip { justify-content: center; padding-inline: 4px; }
body.sidebar-collapsed .sidebar-actions { display: grid; grid-template-columns: 1fr 1fr; }
body.sidebar-collapsed .sidebar-actions button { padding-inline: 0; }
body.sidebar-collapsed .nav-count {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 8px;
}
body.sidebar-collapsed .nav-link::after {
  content: attr(data-label);
  position: fixed;
  z-index: 100;
  left: 69px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #fff;
  background: #282a42;
  box-shadow: var(--shadow);
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-3px);
  transition: opacity .14s ease, transform .14s ease;
}
body.sidebar-collapsed .nav-link:hover::after { opacity: 1; transform: translateX(0); }

/* Keep the collapse control clear of the logo in both sidebar modes. */
.sidebar-head { position: relative; padding-right: 38px; }
.sidebar-head .sidebar-collapse { position: absolute; z-index: 3; top: 9px; right: 0; margin: 0; }
body.sidebar-collapsed .sidebar-head { padding-right: 0; }
body.sidebar-collapsed .sidebar-head .sidebar-collapse {
  right: -24px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* Header and page rhythm */
.topbar {
  height: 66px;
  padding: 10px 30px;
  gap: 12px;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid rgba(226, 228, 237, .9);
  box-shadow: 0 2px 12px rgba(31, 35, 59, .025);
  backdrop-filter: blur(18px) saturate(150%);
}

.global-search {
  position: relative;
  width: min(650px, 100%);
  max-width: 650px;
  height: 42px;
  padding: 0 10px 0 12px;
  gap: 9px;
  border-color: transparent;
  border-radius: 10px;
  background: #f2f3f7;
}

.global-search:hover { background: #edeef4; }

.global-search:focus-within {
  background: #fff;
  border-color: #aaaaff;
  box-shadow: 0 0 0 3px rgba(97, 97, 255, .12), var(--shadow-sm);
}

.global-search > svg { flex: 0 0 18px; color: #8c8e9f; }
.global-search input { min-width: 0; padding: 9px 0; color: var(--ink); }
.global-search input::placeholder { color: #9698a8; }
.global-search kbd {
  padding: 2px 6px;
  color: #8c8e9e;
  border: 1px solid #dcdee6;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  font: 10px/1.4 ui-monospace, monospace;
}

.global-search-results {
  position: absolute;
  z-index: 120;
  top: calc(100% + 7px);
  left: 0;
  width: 100%;
  max-height: min(480px, calc(100vh - 100px));
  overflow: auto;
  padding: 6px;
  border: 1px solid #e0e2ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(35, 37, 58, .16);
}

.global-search-results[hidden] { display: none; }

.global-search-result,
.global-search-all {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}

.global-search-result:hover,
.global-search-result.active {
  background: #f0f0ff;
  color: #4747d7;
}

.global-search-result-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.global-search-result-heading b { flex: 0 0 auto; }
.global-search-kind {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  color: #5553b8;
  border: 1px solid #d6d4ff;
  border-radius: 999px;
  background: #f2f1ff;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.global-search-kind.kind-contact { color: #08735a; border-color: #bce8da; background: #effbf7; }
.global-search-kind.kind-task { color: #875b00; border-color: #eed79d; background: #fff8e8; }
.global-search-kind.kind-claim { color: #a43b22; border-color: #f0c5b9; background: #fff4f0; }
.global-search-kind.kind-document { color: #176b91; border-color: #c3e2f1; background: #f0f9fd; }
.global-search-result-heading span {
  overflow: hidden;
  color: #5f6173;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-result small { display: block; margin-top: 2px; color: #77798b; }
.global-search-all {
  margin-top: 4px;
  border-top: 1px solid #ececf2;
  border-radius: 0 0 8px 8px;
  color: #5555df;
  font-weight: 800;
  text-align: center;
}
.global-search-status { padding: 12px 10px; color: #77798b; text-align: center; }
.global-search-page { max-width: 1100px; }
.global-search-page-list { display: grid; gap: 7px; }
.global-search-page-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 11px 12px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
}
.global-search-page-item:hover { border-color: #c9c7ff; background: #f9f8ff; }
.global-search-page-item > span:last-child { min-width: 0; }
.global-search-page-item b,
.global-search-page-item strong,
.global-search-page-item small { display: block; overflow-wrap: anywhere; }
.global-search-page-item strong { margin-top: 2px; color: #5f6174; font-size: 11px; font-weight: 650; }
.global-search-page-item small { margin-top: 3px; color: var(--muted); }

/* RER physical cash drawer */
.cash-drawer-page-head { margin-bottom: 14px; }
.cash-drawer-balance-card {
  display: grid;
  place-items: center;
  min-height: 230px;
  margin-bottom: 16px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #dedff0;
  border-radius: 20px;
  background:
    radial-gradient(circle at 15% 15%, rgba(94, 92, 255, .12), transparent 34%),
    linear-gradient(145deg, #fff, #f7f7ff);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.cash-drawer-balance-card > span {
  color: #727486;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cash-drawer-balance-card > strong {
  margin: 4px 0 0;
  color: #202139;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.cash-drawer-balance-card > small { margin-top: 8px; color: #858698; }
.cash-drawer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.cash-drawer-actions .btn { min-width: 190px; min-height: 46px; font-weight: 850; }
.cash-add { color: #087a5b; border: 1px solid #9de3cc; background: #e9fbf5; }
.cash-add:hover { color: #05664c; background: #d8f7ec; }
.cash-remove { color: #bc3042; border: 1px solid #ffc1c9; background: #fff1f3; }
.cash-remove:hover { color: #9d2435; background: #ffe3e7; }
.cash-drawer-entry-panel { max-width: 760px; margin: 0 auto 16px; border-color: #b8eadb; box-shadow: 0 14px 36px rgba(21, 137, 103, .1); }
.cash-drawer-entry-panel.is-remove { border-color: #ffc5cd; box-shadow: 0 14px 36px rgba(190, 48, 66, .09); }
.cash-drawer-entry-fields { align-items: end; }
.cash-drawer-entry-fields textarea { min-height: 76px; resize: vertical; }
.cash-drawer-entry-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.cash-drawer-entry-footer small { color: var(--muted); }
.cash-drawer-entry-footer .btn { min-width: 180px; }
.cash-drawer-entry-footer .btn.danger { color: #fff; background: #d83a50; box-shadow: 0 8px 20px rgba(216, 58, 80, .2); }
.cash-drawer-history .table-wrap { max-height: 650px; }
.cash-drawer-history td small { display: block; color: var(--muted); }
.cash-operation-add { color: #087a5b; border-color: #a8e8d4; background: #e9fbf5; }
.cash-operation-remove { color: #b52c3e; border-color: #ffc0c9; background: #fff0f2; }
.cash-amount-add { color: #087a5b; font-weight: 850; }
.cash-amount-remove { color: #c42e43; font-weight: 850; }
.cash-drawer-note { min-width: 220px; white-space: normal; }

@media (max-width: 650px) {
  .cash-drawer-balance-card { min-height: 210px; padding: 22px 14px; }
  .cash-drawer-actions { width: 100%; }
  .cash-drawer-actions .btn { flex: 1 1 160px; min-width: 0; }
  .cash-drawer-entry-footer { align-items: stretch; flex-direction: column; }
  .cash-drawer-entry-footer .btn { width: 100%; }
}

.topbar-identity {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  margin-left: auto;
  color: #292b3c;
  white-space: nowrap;
}

.topbar-clock {
  display: grid;
  min-width: 96px;
  padding-right: 13px;
  border-right: 1px solid #e0e2e9;
  text-align: right;
}

.topbar-clock time {
  color: #292b3c;
  font-size: 14px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
  line-height: 1.08;
}

.topbar-clock span {
  margin-top: 3px;
  color: #858797;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.15;
  text-transform: uppercase;
}

.topbar-brand-lockup { display: flex; align-items: center; gap: 5px; }
.topbar-wordmark { display: inline-flex; align-items: baseline; color: #424453; font-size: 8px; line-height: 1; text-transform: uppercase; }
.topbar-wordmark-skandi { gap: 2px; font-weight: 500; letter-spacing: .08em; }
.topbar-wordmark-skandi b { font-weight: 900; }
.topbar-wordmark-soft { font-weight: 900; letter-spacing: .12em; }
.topbar-wordmark-nord { color: #5b5fc7; font-weight: 900; letter-spacing: .1em; }
.topbar-brand-cross { color: #bbbcca; font-size: 9px; font-weight: 500; }
.item-row-form-errors { grid-column: 1 / -1; margin: 0; }

@media (max-width: 1180px) {
  .topbar-brand-lockup { display: none; }
  .topbar-clock { padding-right: 0; border-right: 0; }
}

/* Superadmin manufacturer copy */
.manufacturer-order-btn {
  color: #7c3aed;
  border: 1px solid #ddd0ff;
  background: #f5f0ff;
}
.manufacturer-order-btn:hover { color: #6530c7; border-color: #c7b2ff; background: #eee6ff; }
.deal-manufacturer-mini {
  width: 100%;
  min-height: 29px;
  margin-top: 8px;
  padding: 5px 8px;
  color: #6c39bd;
  border: 1px solid #e1d5fa;
  border-radius: 8px;
  background: #f8f4ff;
  font-size: 10px;
}
.deal-manufacturer-mini:hover { color: #54239f; border-color: #cdb8f3; background: #f0e8ff; }
.deal-manufacturer-table {
  min-height: 30px;
  padding: 5px 9px;
  color: #6c39bd;
  border: 1px solid #e1d5fa;
  border-radius: 8px;
  background: #f8f4ff;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
}
.deal-manufacturer-table:hover { color: #54239f; border-color: #cdb8f3; background: #f0e8ff; }

body.modal-open { overflow: hidden; }
.manufacturer-modal {
  position: fixed;
  z-index: 260;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.manufacturer-modal-backdrop { position: absolute; inset: 0; background: rgba(25, 27, 45, .48); backdrop-filter: blur(4px); }
.manufacturer-modal-card {
  position: relative;
  z-index: 1;
  width: min(780px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(25, 27, 45, .24);
}
.manufacturer-modal-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.manufacturer-modal-card h2 { margin: 1px 0 0; font-size: 22px; }
.manufacturer-modal-card > p { margin: 8px 0 13px; color: var(--muted); }
.manufacturer-modal-card textarea {
  min-height: 440px;
  resize: vertical;
  color: #22243a;
  background: #fafafd;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.manufacturer-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.manufacturer-modal-actions span { margin-right: auto; color: var(--success); font-size: 12px; }

/* Company chat */
[hidden] { display: none !important; }
.company-chat {
  position: fixed;
  z-index: 210;
  right: 22px;
  bottom: 20px;
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}
.chat-ribbon,
.chat-panel { pointer-events: auto; }
.chat-ribbon {
  position: relative;
  min-width: 118px;
  height: 48px;
  padding: 0 17px;
  color: #fff;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #6161ff 0%, #8456de 56%, #e552aa 115%);
  box-shadow: 0 16px 36px rgba(75, 75, 216, .3);
  font-size: 13px;
}
.chat-ribbon:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(75, 75, 216, .36); }
.chat-ribbon svg,
.chat-head-actions svg,
.chat-attach svg,
.chat-voice svg,
.chat-send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-unread-badge {
  position: absolute;
  top: -8px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #e52d4f;
  box-shadow: 0 4px 12px rgba(216, 58, 82, .32);
  font-size: 10px;
}
.chat-ribbon.has-unread { animation: chat-attention 2.4s ease-in-out infinite; }
@keyframes chat-attention { 0%, 84%, 100% { transform: translateY(0); } 90% { transform: translateY(-3px); } 95% { transform: translateY(0); } }

.chat-panel {
  width: min(780px, calc(100vw - 40px));
  height: min(660px, calc(100dvh - 100px));
  overflow: hidden;
  border: 1px solid rgba(215, 217, 228, .95);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(31, 35, 59, .22);
  transform-origin: bottom right;
  animation: chat-open .2s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes chat-open { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-panel-head {
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 9px 16px;
  color: #fff;
  background: linear-gradient(120deg, #4f4fdb, #7350c7 58%, #c64798);
}
.chat-panel-head > div:first-child { display: flex; align-items: center; gap: 9px; }
.chat-panel-head b,
.chat-panel-head small { display: block; }
.chat-panel-head b { font-size: 14px; }
.chat-panel-head small { margin-top: 1px; color: rgba(255, 255, 255, .72); font-size: 10px; }
.chat-panel-head small.error { color: #ffe1e7; }
.chat-head-dot { width: 10px; height: 10px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; background: #20d79a; box-shadow: 0 0 0 4px rgba(32, 215, 154, .16); }
.chat-head-actions { display: flex; gap: 4px; }
.chat-head-actions .icon-btn { color: #fff; background: rgba(255, 255, 255, .11); }
.chat-head-actions .icon-btn:hover,
.chat-head-actions .icon-btn.enabled { background: rgba(255, 255, 255, .23); }

.chat-shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); height: calc(100% - 61px); }
.chat-conversations { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--line); background: #fafafd; }
.chat-list-head { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 7px 14px; border-bottom: 1px solid var(--line); }
.chat-list-head b { font-size: 12px; }
.chat-list-head button { width: 30px; min-height: 30px; padding: 0; color: var(--brand); background: var(--brand-soft); }
.chat-list { height: calc(100% - 48px); overflow: auto; padding: 7px; }
.chat-conversation {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  color: var(--ink);
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
}
.chat-conversation:hover { transform: none; background: #f0f0f7; }
.chat-conversation.active { background: #ebebff; box-shadow: inset 3px 0 0 var(--brand); }
.chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: #5353c8;
  border-radius: 13px;
  background: linear-gradient(145deg, #ededff, #f9eafd);
  font-size: 11px;
  font-weight: 850;
}
.chat-avatar.online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #00b887; }
.chat-conversation-copy { min-width: 0; display: grid; gap: 3px; }
.chat-conversation-copy > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.chat-conversation-copy b { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-copy small { color: #a0a2af; font-size: 9px; }
.chat-conversation-preview { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation > strong { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: #fff; border-radius: 999px; background: var(--danger); font-size: 9px; }

.chat-employee-picker { position: absolute; z-index: 3; inset: 0; padding: 10px; background: #fff; }
.chat-employee-picker > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chat-employee-picker > div:first-child button { min-height: 28px; width: 28px; padding: 0; background: #f2f2f7; }
.chat-employee-picker input { height: 36px; margin-bottom: 8px; }
.chat-employee-picker > div:last-child { max-height: calc(100% - 80px); overflow: auto; }
.chat-employee { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 7px; color: var(--ink); border: 0; background: transparent; text-align: left; }
.chat-employee:hover { transform: none; background: #f5f5f9; }
.chat-employee span:last-child b,
.chat-employee span:last-child small { display: block; }
.chat-employee span:last-child b { font-size: 11px; }
.chat-employee span:last-child small { color: var(--muted); font-size: 9px; }

.chat-main { min-width: 0; min-height: 0; background: #fff; }
.chat-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--muted); text-align: center; }
.chat-empty > span { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 7px; border-radius: 20px; background: var(--brand-soft); font-size: 28px; }
.chat-empty b { color: var(--ink); font-size: 15px; }
.chat-empty small { font-size: 11px; }
.chat-active { height: 100%; min-height: 0; display: grid; grid-template-rows: 54px minmax(0, 1fr) auto auto auto auto; }
.chat-active-head { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.chat-active-head .chat-avatar { width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px; }
.chat-active-head b,
.chat-active-head small { display: block; }
.chat-active-head b { font-size: 12px; }
.chat-active-head small { color: var(--muted); font-size: 9px; }
.chat-mobile-back { display: none; width: 30px; min-height: 30px; padding: 0; background: #f3f3f8; }
.chat-messages { min-height: 0; overflow-y: auto; padding: 14px 13px; background: linear-gradient(180deg, #fafafd, #f7f7fb); scroll-behavior: smooth; }
.chat-message { display: flex; align-items: flex-end; gap: 7px; margin: 0 0 10px; }
.chat-message.mine { flex-direction: row-reverse; }
.chat-message > .chat-avatar { width: 28px; height: 28px; flex-basis: 28px; border-radius: 10px; font-size: 8px; }
.chat-bubble { max-width: min(78%, 460px); padding: 8px 10px; border: 1px solid var(--line); border-radius: 13px 13px 13px 4px; background: #fff; box-shadow: 0 2px 8px rgba(31, 35, 59, .035); }
.chat-message.mine .chat-bubble { color: #fff; border-color: #6666e7; border-radius: 13px 13px 4px 13px; background: linear-gradient(145deg, #6666ef, #5858d7); }
.chat-bubble > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.chat-bubble > div:first-child b { color: #595bc6; font-size: 9px; }
.chat-bubble > div:first-child small { color: #a1a3af; font-size: 8px; white-space: nowrap; }
.chat-message.mine .chat-bubble > div:first-child b,
.chat-message.mine .chat-bubble > div:first-child small { color: rgba(255, 255, 255, .75); }
.chat-bubble p { margin: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.42; white-space: pre-wrap; }
.chat-file { display: flex; align-items: center; gap: 8px; min-width: 210px; margin-top: 7px; padding: 7px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .94); }
.chat-file:hover { border-color: #c8c8f4; }
.chat-file img { width: 54px; height: 46px; object-fit: cover; border-radius: 7px; background: #eee; }
.chat-file span { min-width: 0; }
.chat-file b,
.chat-file small { display: block; }
.chat-file b { max-width: 220px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-file small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.chat-audio { display: grid; gap: 4px; min-width: min(290px, 100%); margin-top: 7px; padding: 7px 8px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .96); }
.chat-audio audio { display: block; width: 100%; height: 34px; }
.chat-audio small { color: var(--muted); font-size: 8px; }
.chat-upload-preview { display: flex; gap: 5px; overflow-x: auto; padding: 7px 10px 0; border-top: 1px solid var(--line); }
.chat-upload-preview span { flex: 0 0 auto; max-width: 210px; overflow: hidden; padding: 5px 7px; color: #55576e; border-radius: 7px; background: #f1f1f6; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.chat-voice-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 10px 0; padding: 7px 8px; border: 1px solid #f2b7c3; border-radius: 10px; background: #fff5f7; }
.chat-voice-state { display: flex; min-width: 0; align-items: center; gap: 6px; color: #ad2942; font-size: 9px; }
.chat-voice-state > span { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #e24462; box-shadow: 0 0 0 4px rgba(226, 68, 98, .13); animation: chat-voice-pulse 1.4s ease-in-out infinite; }
.chat-voice-state b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-voice-state time { font-variant-numeric: tabular-nums; font-weight: 800; }
.chat-voice-status audio { display: none; width: min(270px, 45%); height: 34px; }
.chat-voice-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.chat-voice-status.ready { border-color: #cfd1e0; background: #f7f7fb; }
.chat-voice-status.ready .chat-voice-state { color: #55576e; }
.chat-voice-status.ready .chat-voice-state > span { background: #6161df; box-shadow: 0 0 0 4px rgba(97, 97, 223, .11); animation: none; }
.chat-voice-status.ready audio { display: block; }
@keyframes chat-voice-pulse { 50% { opacity: .45; transform: scale(.78); } }
.chat-composer { display: grid; grid-template-columns: 38px 38px minmax(0, 1fr) 39px; align-items: end; gap: 6px; padding: 9px 10px 7px; }
.chat-composer.sending { opacity: .62; pointer-events: none; }
.chat-composer textarea { max-height: 120px; min-height: 39px; padding: 10px 11px; resize: none; border-radius: 12px; background: #f5f5f9; font-size: 12px; }
.chat-attach,
.chat-voice { display: grid; place-items: center; width: 38px; height: 38px; min-height: 38px; margin: 0; padding: 0; color: #74768a; border-radius: 11px; background: #f2f2f7; cursor: pointer; }
.chat-attach:hover,
.chat-voice:hover { color: var(--brand); background: var(--brand-soft); }
.chat-voice.recording { color: #fff; background: #df3e5d; }
.chat-voice:disabled { cursor: not-allowed; opacity: .45; }
.chat-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chat-send { width: 39px; height: 39px; min-height: 39px; padding: 0; color: #fff; border: 0; border-radius: 12px; background: linear-gradient(145deg, #6161ff, #7b55d5); }
.chat-security-note { padding: 0 11px 8px; color: #a0a2af; font-size: 8px; text-align: center; }

@media (max-width: 720px) {
  .company-chat { right: 12px; bottom: 12px; }
  .chat-panel { width: calc(100vw - 24px); height: calc(100dvh - 80px); }
  .chat-shell { grid-template-columns: 1fr; }
  .chat-conversations { border-right: 0; }
  .chat-main { display: none; }
  .company-chat.mobile-active .chat-conversations { display: none; }
  .company-chat.mobile-active .chat-main { display: block; }
  .chat-mobile-back { display: inline-flex; }
  .chat-bubble { max-width: 86%; }
  .chat-voice-status { align-items: stretch; flex-wrap: wrap; }
  .chat-voice-status audio { order: 3; width: 100%; }
  .manufacturer-modal { padding: 10px; }
  .manufacturer-modal-card { max-height: calc(100dvh - 20px); padding: 15px; }
  .manufacturer-modal-card textarea { min-height: 55dvh; }
}

/* Manufacturer order workspace */
.manufacturer-order-workspace { max-width: 1080px; margin-inline: auto; padding: 22px; }
.manufacturer-order-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.manufacturer-order-toolbar [data-manufacturer-page-status] { color: var(--muted); font-weight: 700; }
.manufacturer-order-workspace > label { display: block; margin-bottom: 7px; font-weight: 850; }
.manufacturer-order-workspace textarea { width: 100%; min-height: 520px; resize: vertical; padding: 18px; font: 600 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.deal-manufacturer-mini,
.deal-manufacturer-table { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* SOFT ROOM A4 price tags */
.softroom-tag-builder { padding: 22px; }
.softroom-tag-url-row { display: grid; grid-template-columns: minmax(300px, 1fr) auto auto; align-items: end; gap: 12px; }
.softroom-tag-url-row .field { margin: 0; }
.softroom-tag-url-row button { min-height: 44px; }
.softroom-tag-status { min-height: 24px; margin-top: 8px; color: var(--brand-dark); font-weight: 800; }
.softroom-product-preview { margin-top: 15px; padding-top: 18px; border-top: 1px solid var(--line); }
.softroom-product-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.softroom-product-summary > div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.softroom-product-summary small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.softroom-product-summary b { font-size: 17px; }
.softroom-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 22px; }
.softroom-gallery-head h2 { margin: 0 0 3px; }
.softroom-gallery-head p { margin: 0; color: var(--muted); }
.softroom-gallery-head > span { color: var(--brand-dark); font-weight: 850; }
.softroom-tag-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.softroom-tag-image { overflow: hidden; border: 2px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.softroom-tag-image.selected-top { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.softroom-tag-image.selected-bottom { outline: 3px solid rgba(0, 143, 104, .32); outline-offset: -5px; }
.softroom-tag-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.softroom-tag-image > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; border-top: 1px solid var(--line); }
.softroom-tag-image span { display: flex; gap: 5px; }
.softroom-tag-image button { min-height: 31px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel-soft); font-size: 11px; font-weight: 800; }
.softroom-tag-advanced { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.softroom-tag-advanced summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 850; }
.softroom-tag-advanced .field-grid { margin-top: 15px; }
.softroom-tag-history { margin-top: 18px; padding: 22px; }
.softroom-tag-history-list { display: grid; gap: 9px; }
.softroom-tag-history-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; }
.softroom-tag-history-list article > div:first-child { display: grid; gap: 4px; }
.softroom-tag-history-list article span { color: var(--muted); }
.softroom-tag-history-list article > div:last-child { display: flex; gap: 7px; }

@media (max-width: 820px) {
  .softroom-tag-url-row { grid-template-columns: 1fr 1fr; }
  .softroom-tag-url-row .field { grid-column: 1 / -1; }
  .softroom-product-summary { grid-template-columns: 1fr 1fr; }
  .softroom-tag-history-list article { align-items: stretch; flex-direction: column; }
  .softroom-tag-history-list article > div:last-child .btn { flex: 1; }
}

@media (max-width: 520px) {
  .softroom-tag-url-row { grid-template-columns: 1fr; }
  .softroom-product-summary { grid-template-columns: 1fr; }
  .softroom-gallery-head { align-items: flex-start; flex-direction: column; }
}

/* PipesCRM 2.10 · Claims, numeric workday ranges and delivery lead-time alerts */
.workday-range { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto; gap: 9px; align-items: end; }
.workday-range > div { min-width: 0; }
.workday-range > div > span { display: block; margin: 0 0 5px; color: var(--muted); font-size: 10px; font-weight: 780; }
.workday-range input { appearance: textfield; }
.workday-range input::-webkit-inner-spin-button,
.workday-range input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.workday-suffix { display: flex; align-items: center; min-height: 38px; padding: 9px 12px; color: #8f98a8; border: 1px solid #dfe4eb; border-radius: 9px; background: #f1f3f6; font-size: 12px; font-weight: 750; user-select: none; }
.claim-create-card { max-width: 760px; }
.claim-create-card form { display: grid; gap: 16px; }
.claim-default-preview { display: grid; gap: 4px; padding: 15px; border: 1px solid #dce2e8; border-radius: 13px; background: #f8fafc; }
.claim-default-preview > span,
.claim-notes > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.claim-default-preview b { color: var(--ink); font-size: 20px; }
.claim-default-preview em { color: #99a1ae; font-size: 13px; font-style: normal; font-weight: 700; }
.claim-default-preview small { color: var(--muted); line-height: 1.5; }
.claim-notes { margin-top: 16px; padding: 15px; border-top: 1px solid var(--line); }
.claim-notes p { margin: 7px 0 0; line-height: 1.55; }
.dashboard-lead-time-alerts { margin-bottom: 14px; border-color: #f0b9c3; background: linear-gradient(145deg, #fff, #fff8f9); }
.dashboard-lead-time-list { display: grid; }
.dashboard-lead-time-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; color: var(--ink); border-top: 1px solid #f0dce0; }
.dashboard-lead-time-row:hover { background: #fff3f5; }
.dashboard-lead-time-row > div { min-width: 0; }
.dashboard-lead-time-row b,
.dashboard-lead-time-row span,
.dashboard-lead-time-row small { display: block; }
.dashboard-lead-time-row > div > span { margin: 3px 0; color: #5e6573; line-height: 1.45; }
.dashboard-lead-time-row small { color: var(--muted); }
.dashboard-alert-center { margin-bottom: 14px; border-color: #f0b9c3; background: linear-gradient(145deg, #fff, #fff8f9); }
.dashboard-alert-list { display: grid; }
.dashboard-alert-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-top: 1px solid #f0dce0; }
.dashboard-alert-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 13px 9px 13px 15px; color: var(--ink); }
.dashboard-alert-link:hover { background: #fff3f5; }
.dashboard-alert-link > div { min-width: 0; }
.dashboard-alert-link b,
.dashboard-alert-link span,
.dashboard-alert-link small { display: block; }
.dashboard-alert-link > div > span { margin: 3px 0; color: #5e6573; line-height: 1.45; }
.dashboard-alert-link small { color: var(--muted); }
.dashboard-alert-dismiss { display: grid; place-items: center; margin: 0; padding: 7px 10px 7px 3px; }
.dashboard-alert-dismiss button { display: grid; place-items: center; width: 38px; height: 38px; min-height: 38px; padding: 0; color: #9a3448; border: 1px solid #efbdc7; border-radius: 11px; background: #fff; font-size: 23px; line-height: 1; }
.dashboard-alert-dismiss button:hover { color: #fff; border-color: #c73450; background: #c73450; }
.dashboard-alert-done { display: flex; align-items: center; gap: 9px; margin: 0 15px 12px; padding: 9px 11px; color: #087456; border: 1px solid #b8e6d8; border-radius: 10px; background: #e9f9f4; font-size: 11px; }
.dashboard-alert-done span { color: #397565; }
.lead-time-kind { min-width: 58px; padding: 7px 8px; color: #a82039; border: 1px solid #efc2ca; border-radius: 9px; background: #fff0f3; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: center; }

@media (max-width: 720px) {
  .workday-range { grid-template-columns: 1fr 1fr; }
  .workday-suffix { grid-column: 1 / -1; justify-content: center; min-height: 34px; }
  .claim-detail-layout { display: block; }
  .claim-detail-layout > .side-stack { margin-top: 12px; }
  .dashboard-lead-time-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .dashboard-lead-time-row > .metric-arrow { display: none; }
  .dashboard-alert-link { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding-left: 11px; }
  .dashboard-alert-link > .metric-arrow { display: none; }
  .dashboard-alert-dismiss { align-items: start; padding-right: 7px; }
  .dashboard-alert-dismiss button { width: 42px; height: 42px; min-height: 42px; }
  .dashboard-alert-done { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media (max-width: 420px) {
  .workday-range { grid-template-columns: 1fr; }
  .workday-suffix { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel,
  .chat-ribbon.has-unread,
  .chat-voice-state > span { animation: none !important; }
  .chat-messages { scroll-behavior: auto; }
}

.page-head { margin-bottom: 20px; }
.page-head h1 {
  margin: 2px 0 4px;
  color: #20223a;
  font-size: clamp(25px, 2.1vw, 32px);
  font-weight: 720;
  letter-spacing: -.045em;
}
.page-head p { color: var(--muted); font-size: 13px; }

.eyebrow,
.section-kicker {
  margin-bottom: 5px;
  color: #6666df;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

/* Surfaces and controls */
.card {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

a.card,
.metric-card,
.deal-card,
.mini-deal,
.file-item,
.workplan-card {
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease, background .17s ease;
}

.card-head h2,
.section-title-row h2 { color: #2a2c43; font-size: 17px; font-weight: 690; letter-spacing: -.02em; }
.card-head p,
.section-title-row p { color: var(--muted); }

.btn,
button {
  min-height: 36px;
  border-radius: 8px;
  font-weight: 680;
  box-shadow: none;
}

.btn:hover,
button:hover { transform: translateY(-1px); }

.btn.primary,
button.primary {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 5px 14px rgba(97, 97, 255, .22);
}

.btn.primary:hover,
button.primary:hover { background: var(--brand-dark); box-shadow: 0 7px 18px rgba(97, 97, 255, .26); }

.btn.secondary,
button.secondary {
  color: #4a4ac5;
  border-color: #d3d3ff;
  background: var(--brand-soft);
}

.btn.secondary:hover,
button.secondary:hover { color: #3838af; border-color: #bdbdff; background: #e4e4ff; }

.btn.tertiary,
button.tertiary {
  color: #5d5f72;
  border-color: var(--line);
  background: #fff;
}

.btn.tertiary:hover,
button.tertiary:hover { color: #34364b; border-color: #cfd1dc; background: #f7f7fa; }

.btn.danger,
button.danger { background: var(--danger); }
.danger-outline { color: #b52c45; border-color: #f2bcc6; }
.danger-outline:hover { background: var(--danger-soft); }

input,
select,
textarea,
.field input,
.field select,
.field textarea {
  min-height: 39px;
  color: var(--ink);
  border-color: var(--line-strong);
  border-radius: 8px;
  background: #fff;
}

textarea,
.field textarea { min-height: 80px; }

input:hover,
select:hover,
textarea:hover { border-color: #bfc1cf; }

input:focus,
select:focus,
textarea:focus {
  border-color: #8989ff;
  box-shadow: 0 0 0 3px rgba(97, 97, 255, .12);
}

input[type="checkbox"],
input[type="radio"] { min-height: 0; accent-color: var(--brand); }

.field label,
label { color: #5e6073; font-weight: 680; }
.helptext { color: #898b9d; }

.form-accordion,
.data-section,
.compact-details { box-shadow: var(--shadow-sm); }

.form-accordion > summary,
.data-section > summary,
.compact-details > summary {
  background: #fff;
  transition: background .15s ease;
}

.form-accordion > summary:hover,
.data-section > summary:hover,
.compact-details > summary:hover { background: #fafafe; }

.form-accordion[open] > summary,
.data-section[open] > summary { background: #fafaff; }
.summary-chevron { color: #8d8fa2; }

.new-contact-panel,
.item-row,
.offer-item-row,
.shift-row,
.quick-entry,
.workplan-summary { border-color: var(--line); background: #f9f9fc; }

.document-template-form { align-items: stretch; }
.document-template-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.document-template-suggestions {
  padding: 8px 9px;
  border: 1px solid #cfd0ff;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f4ff, #fbfbff);
}
.document-template-suggestions header { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.document-template-suggestions header b,
.document-template-suggestions header small { display: block; }
.document-template-suggestions header b { color: var(--brand-dark); font-size: 12px; }
.document-template-suggestions header small { color: var(--muted); font-size: 8px; }
.document-template-suggestion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 5px; }
.document-template-suggestion-grid button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 44px; padding: 6px 8px; color: #35369c; border: 1px solid #c8c9f5; border-radius: 8px; background: #fff; text-align: left; }
.document-template-suggestion-grid button:hover,
.document-template-suggestion-grid button.selected { border-color: var(--brand); background: #eeeeff; box-shadow: 0 7px 18px rgba(75, 73, 190, .13); }
.document-template-suggestion-grid button span,
.document-template-suggestion-grid button strong { display: block; overflow-wrap: anywhere; }
.document-template-suggestion-grid button span { color: #7778bd; font-size: 7px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.document-template-suggestion-grid button strong { color: #33355b; font-size: 9px; line-height: 1.25; }
.document-template-suggestion-grid button small { display: none; }
.document-template-selection { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border: 1px solid #a9e4d1; border-radius: 8px; background: #effbf7; }
.document-template-selection[hidden] { display: none; }
.document-template-selection span { flex: 0 0 auto; color: #4c806f; font-size: 7px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.document-template-selection b { min-width: 0; color: #176b54; font-size: 9px; overflow-wrap: anywhere; }
.document-template-all { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.document-template-all > summary { padding: 10px 12px; color: #5557bd; cursor: pointer; font-size: 10px; font-weight: 800; }
.document-template-all[open] > summary { border-bottom: 1px solid var(--line); background: #fafaff; }
.document-template-all-body { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr); gap: 9px; padding: 11px; }
.document-template-search-field .helptext { display: block; margin-top: 4px; font-size: 10px; }
.document-template-department-warning {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  font-size: 11px;
}
.document-create-button { align-self: end; min-width: 170px; min-height: 44px; }
.document-version-help { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 9px; padding: 8px 10px; color: #646678; border: 1px solid var(--line); border-radius: 9px; background: #f8f8fb; font-size: 9px; line-height: 1.45; }
.document-version-help b { flex: 0 0 auto; color: #393b52; }
.drive-live-note { flex: 1 0 100%; margin-top: 5px; color: #087456; font-size: 9px; line-height: 1.4; }
.document-file-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 8px 10px; padding: 11px 12px; }
.document-file-item .file-icon { grid-row: 1 / span 2; }
.document-file-item .file-main { min-width: 0; }
.document-file-item .file-main b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; }
.document-file-item .file-main span { margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.document-file-actions { grid-column: 2; justify-content: flex-start; width: 100%; }
.document-file-actions .btn,
.document-file-actions button { white-space: nowrap; }

.page-loading[hidden] { display: none; }
.page-loading { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 20px; }
.page-loading-backdrop { position: absolute; inset: 0; background: rgba(246, 247, 253, .86); backdrop-filter: blur(5px); }
.page-loading-card { position: relative; width: min(330px, calc(100vw - 36px)); display: grid; justify-items: center; gap: 7px; padding: 25px 22px; border: 1px solid #d8d8f4; border-radius: 17px; background: #fff; box-shadow: 0 24px 70px rgba(38, 39, 93, .2); text-align: center; }
.page-loading-card b { color: #34365a; font-size: 15px; }
.page-loading-card small { color: var(--muted); font-size: 10px; }
.page-loading-spinner { width: 34px; height: 34px; margin-bottom: 4px; border: 4px solid #e4e4ff; border-top-color: var(--brand); border-radius: 50%; animation: page-loading-spin .7s linear infinite; }
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
.drive-access-guide { padding: 13px; border: 1px solid #cfd0ff; border-radius: 12px; background: #f8f8ff; }
.drive-access-guide > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.drive-access-guide h3 { margin: 0; color: #34365a; font-size: 14px; }
.drive-access-guide ol { margin: 0 0 11px; padding-left: 20px; color: #5f6176; font-size: 10px; line-height: 1.55; }
.drive-access-email-list { display: grid; gap: 6px; }
.drive-access-email-list > div { display: grid; grid-template-columns: minmax(120px, .45fr) minmax(190px, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #e0e1f1; border-radius: 9px; background: #fff; }
.drive-access-email-list span { color: var(--muted); font-size: 9px; font-weight: 750; }
.drive-access-email-list code { min-width: 0; overflow-wrap: anywhere; color: #383a65; font-size: 10px; }
.drive-access-guide .inline-alert { margin: 9px 0 0; }

@media (max-width: 900px) {
  .drive-access-guide > header { align-items: flex-start; flex-direction: column; }
  .drive-access-email-list > div { grid-template-columns: minmax(0, 1fr); }
  .drive-access-email-list button { justify-self: start; }
}

.sticky-actions {
  border-color: #ddddf0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 34px rgba(31, 35, 59, .13);
}

.deal-save-actions,
.offer-save-actions {
  width: min(100%, 650px);
  justify-content: center;
  gap: 12px;
  margin: 10px auto 0;
  padding: 12px 16px;
  border: 2px solid #d9d7ff;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 42px rgba(67, 64, 170, .18);
}
.deal-save-actions > .btn,
.deal-save-actions > button,
.offer-save-actions > .btn,
.offer-save-actions > button {
  min-width: 140px;
  min-height: 48px;
  padding-inline: 24px;
  font-size: 13px;
  font-weight: 820;
}
.deal-save-actions > .secondary,
.offer-save-actions > .tertiary {
  color: #5552b9;
  border-color: #cfccff;
  background: #f5f4ff;
}
.deal-save-actions > .primary,
.offer-save-actions > .primary {
  min-width: 210px;
  box-shadow: 0 10px 24px rgba(79, 70, 229, .3);
}

/* Offer products stay inside their card at every desktop width. */
.offer-item-row.item-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px repeat(4, minmax(0, 1fr)) 38px;
  grid-template-areas:
    "number name name name name delete"
    "number size tone quantity price delete"
    "number features features additional additional delete"
    "number catalog catalog total total delete";
  align-items: end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.offer-item-row > * { min-width: 0; }
.offer-item-row .item-number { grid-area: number; }
.offer-item-row .offer-item-name { grid-area: name; }
.offer-item-row .offer-item-size { grid-area: size; }
.offer-item-row .offer-item-tone { grid-area: tone; }
.offer-item-row .offer-item-quantity { grid-area: quantity; }
.offer-item-row > .offer-item-features { grid-area: features; }
.offer-item-row > .offer-item-additional { grid-area: additional; }
.offer-item-row > .offer-item-catalog { grid-area: catalog; }
.offer-item-row .offer-item-price { grid-area: price; }
.offer-item-row .line-total { grid-area: total; }
.offer-item-row .delete-wrap {
  grid-area: delete;
  align-self: start;
  position: sticky;
  right: 0;
  z-index: 1;
}
.offer-item-row .delete-wrap > input[type="checkbox"] { display: none; }
.offer-item-row input,
.offer-item-row textarea { max-width: 100%; min-width: 0; }
.offer-item-row textarea { min-height: 58px; height: 58px; }
.offer-item-row .offer-item-catalog input { overflow: hidden; text-overflow: ellipsis; }
.offer-final-copy { max-width: 1420px; margin-top: 13px; }
.offer-final-copy textarea {
  min-height: 230px;
  padding: 14px;
  color: #34364e;
  border-color: #d9d7f3;
  background: #fbfbff;
  line-height: 1.5;
}
.offer-copy-button {
  display: flex;
  width: min(100%, 360px);
  min-height: 50px;
  margin: 12px auto 0;
  justify-content: center;
  font-weight: 850;
}

.line-total,
.order-total-chip { color: var(--brand-dark); }
.order-total-chip { background: var(--brand-soft); }

/* Messages and alerts */
.messages { padding: 12px 30px 0; }

.message {
  color: #087355;
  border-color: #a9e4d4;
  background: #edfaf6;
  box-shadow: var(--shadow-sm);
}

.message.error,
.inline-alert.error { color: #aa2940; border-color: #f1bdc6; background: #fff1f4; }
.message.warning,
.inline-alert.warning { color: #875b00; border-color: #efd698; background: #fff8e7; }
.inline-alert.info { color: #006b91; border-color: #b5e3f2; background: #edf9fd; }

.global-overdue-alert {
  margin: 10px 30px 0;
  padding: 10px 12px;
  justify-content: flex-start;
  color: #ad2941;
  border-color: #f1bdc7;
  background: #fff2f4;
  box-shadow: none;
}

.global-overdue-alert .alert-icon {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
  background: var(--danger);
  font-weight: 800;
}

.global-overdue-alert .btn { margin-left: auto; }

/* Dashboard */
.dashboard-head { align-items: center; }
.dashboard-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.dashboard-chips a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 5px 9px;
  color: #67697c;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 620;
}
.dashboard-chips a:hover { color: var(--brand-dark); border-color: #ceceff; background: #fff; }
.dashboard-chips .status-dot { width: 7px; height: 7px; box-shadow: none; }
.dashboard-chips .presence-dot { width: 7px; height: 7px; box-shadow: none; }

.dashboard-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 16px;
}

.metric-card {
  position: relative;
  min-height: 105px;
  padding: 17px;
  border-color: var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #9a9caf;
}

.metric-card[href]:hover {
  border-color: #d4d5df;
  box-shadow: 0 12px 28px rgba(31, 35, 59, .1);
  transform: translateY(-2px);
}

.metric-card strong { color: #272940; font-size: 29px; font-weight: 730; letter-spacing: -.04em; }
.metric-card small { color: #656779; font-weight: 650; }
.metric-card em { color: #8b8d9e; }
.metric-card .metric-icon { border-radius: 10px; }
.metric-arrow { margin-left: auto; color: #b3b4c0; font-size: 17px; transition: transform .15s ease, color .15s ease; }
.metric-card:hover .metric-arrow { color: var(--brand); transform: translateX(2px); }
.metric-indigo::before { background: #6161ff; }
.metric-pink::before { background: #ff5ac8; }
.metric-cyan::before { background: #00a9d6; }
.metric-red::before { background: #e0445e; }
.metric-green::before { background: #00b887; }

.dashboard-focus-grid { grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr); align-items: start; margin-bottom: 15px; }
.dashboard-deals-card { grid-column: 1 / -1; }
.dashboard-workplan-card { min-width: 0; background: linear-gradient(145deg, #fff 65%, #f0efff); }
.dashboard-workplan-weeks { display: grid; gap: 10px; }
.dashboard-workplan-week { display: grid; min-width: 0; gap: 6px; }
.dashboard-workplan-week + .dashboard-workplan-week { padding-top: 10px; border-top: 1px solid var(--line); }
.dashboard-workplan-week-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dashboard-workplan-week-head b,
.dashboard-workplan-week-head span,
.dashboard-workplan-week-head small { display: block; }
.dashboard-workplan-week-head span { margin-top: 2px; color: var(--brand-dark); font-size: 12px; font-weight: 750; white-space: nowrap; }
.dashboard-workplan-week-head small { margin-top: 3px; color: var(--muted); }
.dashboard-location-week-scroll { min-width: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.dashboard-location-week-grid { display: grid; grid-template-columns: minmax(118px, 1.15fr) repeat(7, minmax(82px, 1fr)); min-width: 720px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.dashboard-location-corner,
.dashboard-location-day-head,
.dashboard-location-name,
.dashboard-location-cell { min-width: 0; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-location-corner,
.dashboard-location-day-head,
.dashboard-location-name { color: #55576b; background: #f5f5fa; font-weight: 750; }
.dashboard-location-corner { font-size: 9px; }
.dashboard-location-day-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 9px; }
.dashboard-location-day-head b,
.dashboard-location-day-head span { display: block; }
.dashboard-location-day-head span { color: var(--muted); font-variant-numeric: tabular-nums; }
.dashboard-location-name { position: sticky; left: 0; z-index: 1; overflow-wrap: anywhere; font-size: 9px; }
.dashboard-location-cell { min-height: 48px; background: rgba(255, 255, 255, .92); }
.dashboard-location-cell .shift-chip { margin-bottom: 4px; padding: 5px 6px; font-size: 8px; line-height: 1.25; }
.dashboard-location-cell .shift-chip:last-child { margin-bottom: 0; }
.dashboard-location-cell .shift-chip b,
.dashboard-location-cell .shift-chip small { display: block; overflow-wrap: anywhere; }
.dashboard-location-cell .shift-chip small { margin-top: 2px; color: inherit; font-size: 7px; opacity: .8; }
.dashboard-no-shift { display: block; padding: 10px 0; color: #b1b3bd; font-size: 11px; text-align: center; }
.workplan-summary { color: inherit; }
.workplan-summary:hover { border-color: #ceceff; background: #f6f5ff; transform: translateY(-1px); }
.workplan-summary span { color: var(--brand-dark); }

.dashboard-task-card { min-width: 0; }
.dashboard-task-head { align-items: center; margin-bottom: 9px; }
.dashboard-task-actions { display: flex; gap: 5px; }
.dashboard-task-summary { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; padding: 8px 10px; border-radius: 9px; background: #f6f6fb; }
.dashboard-task-summary strong { color: var(--brand-dark); font-size: 22px; line-height: 1; }
.dashboard-task-summary span { color: var(--muted); font-size: 10px; }
.dashboard-task-summary span b { color: var(--danger); }
.dashboard-task-list { display: grid; gap: 5px; }
.dashboard-task-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.dashboard-task-row.is-overdue { border-color: #efbcc5; background: #fff8f9; }
.dashboard-task-main { min-width: 0; padding: 7px 4px 7px 9px; }
.dashboard-task-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; }
.dashboard-task-title b { overflow: hidden; color: #303247; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task-title .badge { flex: 0 0 auto; padding: 2px 5px; font-size: 7px; }
.dashboard-task-main small,
.dashboard-task-status { display: block; }
.dashboard-task-main small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task-row.is-overdue .dashboard-task-main small strong { color: var(--danger); }
.dashboard-task-status { width: max-content; margin-top: 3px; padding: 1px 4px; border-radius: 999px; font-size: 8px; font-weight: 750; }
.dashboard-task-status.status-IN_PROGRESS { color: #5748bd; background: #efedff; }
.dashboard-task-status.status-BLOCKED { color: #a05d00; background: #fff2d6; }
.dashboard-task-row form { margin: 0 5px 0 0; }
.dashboard-task-complete { display: grid; width: 28px; min-height: 28px; height: 28px; padding: 0; color: #087456; border: 1px solid #b8e8d9; border-radius: 8px; background: #e9f8f3; font-size: 12px; }
.dashboard-task-complete:hover { color: #fff; border-color: #00a978; background: #00a978; }
.dashboard-task-more { display: block; margin-top: 8px; color: var(--brand-dark); font-size: 9px; font-weight: 800; text-align: center; }

.overdue-panel {
  margin-bottom: 15px;
  border-color: #f0bdc6;
  background: linear-gradient(135deg, #fff, #fff5f6);
}
.task-strip a { border-color: #f1c7cf; border-left: 3px solid var(--danger); border-radius: 9px; }
.task-strip a:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.dashboard-sync-alert { margin-bottom: 14px; }
.dashboard-more { padding: 0; overflow: hidden; }
.dashboard-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.dashboard-more > summary::-webkit-details-marker { display: none; }
.dashboard-more > summary:hover { background: #fafafe; }
.dashboard-more > summary b,
.dashboard-more > summary small { display: block; }
.dashboard-more > summary small { margin-top: 2px; color: var(--muted); }
.dashboard-more[open] .summary-chevron { transform: rotate(180deg); }
.dashboard-more-content { padding: 15px; border-top: 1px solid var(--line); background: #fcfcfe; }
.dashboard-inner-panel,
.dashboard-connection { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dashboard-connection { margin-top: 14px; }

/* Pipeline, lists and detail pages */
.filterbar {
  padding: 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .9);
}
.filter-search { min-height: 39px; border-color: transparent; background: #f3f4f7; }
.filter-search:focus-within { border-color: #aaaaff; background: #fff; box-shadow: 0 0 0 3px rgba(97, 97, 255, .1); }

.pipeline { gap: 11px; padding-bottom: 22px; }
.stage-column {
  min-width: 292px;
  width: 292px;
  padding: 9px;
  border: 0;
  border-radius: 13px;
  background: #eff0f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.stage-head { min-height: 43px; }
.stage-dot { width: 11px; height: 11px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .72); }
.stage-title b { color: #3b3d52; font-size: 13px; }
.stage-total { color: #77798b; }

.deal-card {
  padding: 12px;
  border-color: transparent;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 35, 59, .06);
}
.deal-card:hover {
  border-color: #ccccff;
  box-shadow: 0 10px 23px rgba(31, 35, 59, .11);
  transform: translateY(-2px);
}
.deal-card h3 { color: #303247; font-weight: 720; }
.deal-card-bottom strong { color: var(--brand-dark); }

.badge {
  padding: 4px 7px;
  color: #606275;
  border-color: #e3e4ea;
  background: #f4f5f8;
  font-weight: 700;
}
.badge.success { color: #087456; border-color: #b8e6d8; background: #e9f9f4; }
.badge.danger { color: #ad2941; border-color: #f1c2ca; background: #fff0f3; }
.label-CITADELE { color: #7b5b00; border-color: #f2df91; background: #fff5c6; }
.label-DEKO { color: #2451ae; border-color: #c7d9ff; background: #eaf1ff; }
.label-CITADELE_DEKO { color: #6441b0; border-color: #d8c7ff; background: #f1ebff; }
.label-SOFT_ROOM { color: #963472; border-color: #f2bee0; background: #ffedf8; }
.label-NORD_CASA { color: #00745a; border-color: #b6e8da; background: #e7f9f4; }
.label-SLEEPY { color: #00719a; border-color: #b7e4f2; background: #e9f8fc; }

.status-OPEN,
.status-RUNNING,
.status-PENDING { color: #075faf; background: #eaf4ff; }
.status-WON,
.status-COMPLETED { color: #087456; background: #e7f8f3; }
.status-LOST,
.status-FAILED,
.status-DEAD { color: #ad2941; background: #ffeff2; }

.table-card { border-color: var(--line); }
.deals-table { min-width: 1060px; table-layout: fixed; }
.deals-table .deal-col { width: 8.5%; }
.deals-table .date-col { width: 6.5%; }
.deals-table .client-col { width: 12%; }
.deals-table .department-col { width: 8.5%; }
.deals-table .designer-col { width: 10%; }
.deals-table .status-col { width: 6%; }
.deals-table .sync-col { width: 7.5%; }
.deals-table .stage-col { width: 6.5%; }
.deals-table .value-col { width: 6.5%; }
.deals-table .payment-col { width: 10.5%; }
.deals-table .balance-col { width: 6.5%; }
.deals-table .manufacturer-col { width: 11%; }
.deals-table th,
.deals-table td { padding: 7px 5px; overflow-wrap: anywhere; }
.deals-table th { font-size: 8px; letter-spacing: .055em; }
.deals-table td { font-size: 10.5px; line-height: 1.28; }
.deals-table td small { font-size: 8.5px; line-height: 1.28; }
.deals-table .badge {
  max-width: 100%;
  padding: 3px 5px;
  font-size: 8px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.deal-department-cell { display: grid; justify-items: start; gap: 3px; }
.deal-reference-cell b,
.deal-client-cell > a,
.deal-designer-cell > b { display: block; overflow: hidden; text-overflow: ellipsis; }
.deal-reference-cell b { white-space: nowrap; }
.deal-client-cell > a,
.deal-designer-cell > b { overflow-wrap: anywhere; }
.deal-date-cell,
.money-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-payment-cell .payment-status-badge,
.deal-manufacturer-cell .manufacturer-status-badge { display: inline-flex; width: fit-content; }
.deal-manufacturer-cell .deal-manufacturer-table { width: 100%; margin-top: 4px; padding: 5px; font-size: 8px; white-space: normal; }
.auto-expected-close output { display: flex; align-items: center; min-height: 39px; padding: 9px 10px; color: #3f4257; border: 1px solid var(--line-strong); border-radius: 9px; background: #f3f4f7; font-weight: 760; font-variant-numeric: tabular-nums; }
table { color: #3e4055; }
th {
  padding-block: 10px;
  color: #77798b;
  border-bottom-color: #e6e7ed;
  background: #f8f8fb;
  font-size: 9px;
  letter-spacing: .08em;
}
td { padding-block: 10px; border-bottom-color: #eeeef3; }
tbody tr { transition: background .13s ease; }
tbody tr:hover { background: #f8f8ff; }
.overdue-row { background: #fff5f6; }

.deal-tabs {
  gap: 4px;
  padding: 8px 9px 0;
  background: #fafafe;
}
.deal-tabs button { border-radius: 8px 8px 0 0; font-weight: 630; }
.deal-tabs button.active { color: var(--brand-dark); border-bottom-color: var(--brand); background: #eeeeff; }
.deal-tabs button span { color: #6c6e80; background: #fff; }
.tab-panel { padding: 17px; }
.timeline-dot { background: #8c8eff; box-shadow: 0 0 0 4px #eeeeff; }
.timeline-body,
.file-item { border-color: var(--line); border-radius: 10px; }
.file-item:hover,
.mini-deal:hover { border-color: #ccccff; background: #fafaff; transform: translateY(-1px); }
.file-icon { color: var(--brand-dark); background: var(--brand-soft); }
.mini-deal-head,
.mini-deal {
  display: grid;
  grid-template-columns: minmax(82px, .8fr) minmax(0, 1.35fr) minmax(86px, .9fr) max-content;
  align-items: center;
  gap: 12px;
}
.mini-deal-head.has-manufacturer-status,
.mini-deal.has-manufacturer-status {
  grid-template-columns: minmax(82px, .72fr) minmax(0, 1.15fr) minmax(82px, .75fr) minmax(180px, auto) max-content;
}
.mini-deal-head {
  padding: 0 11px 2px;
  color: #858798;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mini-deal-head span:last-child { text-align: right; }
.mini-deal-reference { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mini-deal-reference b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-deal-reference .badge { display: inline-flex; flex: 0 0 auto; }
.mini-deal-customer,
.mini-deal-stage {
  min-width: 0;
  overflow: hidden;
  color: #626477 !important;
  font-size: 11px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-deal-value {
  color: #2a2c43;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.mini-deal-manufacturer {
  justify-self: start;
  white-space: nowrap;
}
.side-stack { top: 80px; }
.summary-grid { border-color: var(--line); background: var(--line); }
.summary-grid > div { background: #fff; }
.designer-summary .summary-grid > div:first-child { grid-column: 1 / -1; }
.designer-summary .summary-grid b { overflow-wrap: anywhere; }
.designer-commission-action { margin-top: 14px; }
.designer-commission-action button { width: 100%; }
.template-code,
.json-report { color: #e9eaff; background: #25273f; }

.integration-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.integration-summary > div { border-color: var(--line); background: #fafafe; }
.integration-summary span { color: #858798; }
.integration-summary b { margin-top: 2px; color: #3e4055; }

.copy-field,
.endpoint-list code { border-color: var(--line); background: #f8f8fb; }
.checklist-item { border-color: var(--line); background: #fff; }
.checklist-item:hover { border-color: #ccccff; background: #f8f8ff; }
.checklist-item.done { color: #77798b; background: #f4f5f7; }

.workplan-grid { border-color: var(--line); }
.workplan-corner,
.workplan-day-head,
.workplan-location { color: #55576b; border-color: var(--line); background: #f5f5fa; }
.workplan-cell { border-color: var(--line); }
.shift-chip { color: #5f6270; background: #f0f1f4; border-left: 3px solid #a9acb5; }
.shift-chip.is-mine { color: #087456; background: #e2f8ef; border-left-color: #00a978; box-shadow: inset 0 0 0 1px rgba(0, 169, 120, .13); }

/* Public offer and login */
.public-offer-body,
.login-body {
  background:
    radial-gradient(circle at 8% 5%, rgba(97, 97, 255, .16), transparent 31rem),
    radial-gradient(circle at 92% 5%, rgba(255, 90, 200, .13), transparent 27rem),
    #f6f7fb;
}
.public-offer-head {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-sm);
}
.public-offer-card,
.login-card { border-color: var(--line); box-shadow: var(--shadow-float); }
.login-card { border-radius: 20px; }
.login-card img { width: 250px; }
.offer-price,
.offer-total { color: var(--brand-dark); }
.cash-cash-price { color: #b42318 !important; font-weight: 850 !important; }
.salon-only-price { color: #b42318 !important; font-weight: 850 !important; }
.cash-cash-preview .offer-live-summary .grand { color: #b42318; background: #fff1f0; }
.cash-cash-preview .offer-live-summary .grand span { color: #b42318; }
.offer-live-cash-message { margin: 0; padding: 13px 15px; color: #7a271a; background: #fff6ed; border-top: 1px solid #fedf89; font-weight: 750; }

/* Responsive */
@media (max-width: 1250px) {
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (max-width: 850px) {
  body.sidebar-collapsed { --sidebar: 250px; }
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav-divider span,
  body.sidebar-collapsed .sidebar-status div,
  body.sidebar-collapsed .user-copy,
  body.sidebar-collapsed .sidebar-action-label,
  body.sidebar-collapsed .version { display: initial; }
  body.sidebar-collapsed .nav-link { justify-content: flex-start; padding-inline: 8px; }
  body.sidebar-collapsed .nav-count { position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: 10px; }
  body.sidebar-collapsed .nav-link::after { display: none; }
  body.sidebar-collapsed .sidebar-status { justify-content: flex-start; }
  body.sidebar-collapsed .user-chip { justify-content: flex-start; }
  body.sidebar-collapsed .brand { flex: 1; width: auto; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; width: min(310px, 88vw); padding: 12px 10px 10px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); box-shadow: var(--shadow-float); }
  .sidebar-collapse { display: none; }
  .sidebar-close { color: #656779; background: #f2f3f7; }
  .topbar { height: 60px; padding: 9px 12px; }
  .mobile-menu { color: #5f6175; }
  .content { padding: 17px 12px 42px; }
  .messages { padding: 10px 12px 0; }
  .global-overdue-alert { margin: 8px 12px 0; }
  .global-search { height: 40px; }
  .global-search kbd { display: none; }
  .dashboard-head { align-items: flex-start; }
  .dashboard-location-week-grid { min-width: 720px; }
  .dashboard-more-content { padding: 11px; }
  .integration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .page-head h1 { font-size: 25px; }
  .page-head p { font-size: 12px; }
  .topbar-clock { min-width: 62px; }
  .topbar-clock span { display: none; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-workplan-week-head { align-items: flex-start; }
  .dashboard-workplan-week-head .btn { padding-inline: 7px; }
  .dashboard-task-actions { flex-wrap: wrap; justify-content: flex-end; }
  .metric-card { min-height: 92px; }
  .dashboard-chips { display: grid; grid-template-columns: 1fr; }
  .global-overdue-alert { align-items: center; }
  .global-overdue-alert div span { display: none; }
  .integration-summary { grid-template-columns: 1fr; }
  .dashboard-inner-panel,
  .dashboard-connection { padding: 11px; }
  .mini-deal-head { display: none; }
  .mini-deal {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 4px 10px;
    padding: 10px 11px;
  }
  .mini-deal-reference { grid-column: 1; grid-row: 1; }
  .mini-deal-value { grid-column: 2; grid-row: 1; }
  .mini-deal-customer { grid-column: 1; grid-row: 2; }
  .mini-deal-stage { grid-column: 2; grid-row: 2; max-width: 42vw; text-align: right; }
  .mini-deal.has-manufacturer-status { grid-template-columns: minmax(0, 1fr) max-content; }
  .mini-deal.has-manufacturer-status .mini-deal-manufacturer {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell { transition: none; }
}

/* PipesCRM 2.3 security, account and mobile-hardening layer */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; overflow-x: hidden; }
.brand { display: flex; align-items: center; }
.brand img { flex: 0 0 auto; }
.user-chip { text-decoration: none; }

.payroll-filter-grid { grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(145px, .8fr)); align-items: end; }
.payroll-period-actions { display: flex; gap: 7px; margin-top: 10px; }
.payroll-advance-card { border-color: #cfd2ff; background: linear-gradient(135deg, #fff 0%, #f8f8ff 100%); }
.payroll-advance-grid { grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(140px, .8fr)); align-items: end; gap: 10px; }
.payroll-advance-note { grid-column: 1 / -1; }
.payroll-advance-grid textarea { min-height: 45px; resize: vertical; }
.payroll-advance-actions { margin-top: 12px; }
.payroll-advance-actions .primary { min-width: 190px; }
.payroll-advance-history-head { flex-wrap: wrap; align-items: end; gap: 14px; }
.payroll-advance-total { display: grid; gap: 2px; min-width: 130px; padding: 10px 14px; border: 1px solid #cfd2ff; border-radius: 12px; background: #f4f4ff; }
.payroll-advance-total span, .payroll-advance-month-filter label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.payroll-advance-total strong { color: #4e50d9; font-size: 22px; font-variant-numeric: tabular-nums; }
.payroll-advance-month-filter { display: grid; gap: 5px; margin-left: auto; }
.payroll-advance-month-filter > div { display: flex; align-items: center; gap: 7px; }
.payroll-advance-month-filter input { min-height: 38px; }
.payroll-advance-history td small { display: block; margin-top: 3px; color: var(--muted); }
.payroll-advance-history-note { min-width: 180px; white-space: normal; }
.payroll-report-text { width: 100%; min-height: 620px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; color: #25273b; background: #fbfbfd; font: 500 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.payroll-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.payroll-profile-card { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-decoration: none; }
.payroll-profile-card:hover { border-color: #cfcfff; background: var(--brand-soft); }
.payroll-profile-card span, .payroll-profile-card small { color: var(--muted); }
.delivery-metadata { display: grid; gap: 7px; margin-top: 12px; }
.delivery-metadata-row { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafafe; }
.delivery-metadata-row dt { color: var(--muted); font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.delivery-metadata-row dd { margin: 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 900px) {
  .payroll-filter-grid, .payroll-profile-grid, .payroll-advance-grid { grid-template-columns: 1fr; }
  .payroll-advance-month-filter { width: 100%; margin-left: 0; }
  .payroll-advance-month-filter > div { align-items: stretch; }
  .payroll-advance-month-filter input { flex: 1 1 auto; min-width: 0; }
  .delivery-metadata-row { grid-template-columns: 1fr; gap: 3px; }
}

.security-login-body { min-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.security-login-card { width: min(480px, 100%); padding: 26px; }
.security-login-card .login-logo { display: block; width: min(225px, 70%); margin: 0 auto 20px; }
.security-login-card .login-logo img { width: 100%; height: auto; margin: 0; }
.security-login-card h1 { margin: 8px 0 5px; }
.security-login-card > p { margin: 0 auto; max-width: 390px; }
.security-step { display: table; margin: 0 auto 3px; padding: 4px 9px; color: #5252ca; border-radius: 999px; background: var(--brand-soft); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.security-step.success-step { color: #087456; background: var(--success-soft); }
.auth-form { display: grid; gap: 12px; margin-top: 20px; }
.compact-auth-form { margin-top: 13px; }
.auth-submit { min-height: 44px; margin-top: 2px; }
.auth-help { display: block; margin-top: 13px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.login-security-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; padding-top: 13px; color: #818395; border-top: 1px solid var(--line); font-size: 9px; text-align: center; }
.login-version { display: block; margin-top: 8px; color: #b1b2bd; text-align: center; }
.otp-field input { text-align: center; font: 750 21px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.totp-setup-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 17px; margin-top: 18px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fafafd; }
.totp-qr { width: 150px !important; height: 150px; margin: 0 !important; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; image-rendering: pixelated; }
.totp-steps { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.totp-steps li + li { margin-top: 6px; }
.manual-secret { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.manual-secret summary { color: var(--brand-dark); cursor: pointer; font-size: 11px; font-weight: 750; }
.manual-secret code, .manual-secret small { display: block; margin-top: 8px; }
.manual-secret code { overflow-wrap: anywhere; padding: 8px; border-radius: 7px; background: #f3f3f8; font-size: 11px; letter-spacing: .06em; }
.manual-secret small { color: var(--muted); font-size: 9px; }
.recovery-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 18px 0 10px; }
.recovery-code-grid code { padding: 8px 5px; color: #303247; border: 1px solid var(--line); border-radius: 8px; background: #f7f7fa; font-size: 10px; font-weight: 750; text-align: center; }

.security-status-card { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding: 15px; border-color: #bce9dc; background: linear-gradient(120deg, #f0fbf7, #fff); }
.security-status-card > div { flex: 1; min-width: 0; }
.security-status-card b, .security-status-card span { display: block; }
.security-status-card > div span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.security-shield { display: grid !important; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: #fff; border-radius: 12px; background: var(--success); font-weight: 900; }
.security-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.security-setting-card { padding: 17px; }
.security-setting-card .card-head { margin-bottom: 14px; }
.security-setting-card.danger-zone { border-color: #f3c9d0; }
.security-user-form { padding: 18px; }
.security-user-form .inline-alert { margin: 15px 0; }
.mobile-card-table .status-dot { display: inline-block; margin-right: 5px; vertical-align: middle; }

@media (pointer: coarse) {
  .btn, button, .nav-link, .deal-tabs button { min-height: 44px; }
  .btn.small, button.small { min-height: 40px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}

@media (max-width: 1100px) {
  .security-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  body.sidebar-open { overflow: hidden; touch-action: none; }
  .sidebar { z-index: 100; width: min(328px, calc(100vw - 28px)); padding: max(12px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .sidebar-head { flex: 0 0 auto; }
  .sidebar .nav-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sidebar-backdrop { z-index: 90; }
  .topbar { position: sticky; z-index: 40; top: 0; height: auto; min-height: 60px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); gap: 8px; }
  .mobile-menu { flex: 0 0 42px; width: 42px; height: 42px; min-height: 42px; }
  .global-search { flex: 1 1 auto; min-width: 0; height: 42px; }
  .global-search input { min-width: 0; font-size: 16px; }
  .content { min-width: 0; padding: 15px max(11px, env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(11px, env(safe-area-inset-left)); }
  input, select, textarea, .field input, .field select, .field textarea { font-size: 16px; }
  .page-head { gap: 10px; }
  .page-head .head-actions { display: flex; flex-wrap: wrap; }
  .page-head .head-actions > * { flex: 1 1 auto; }
  .table-wrap { max-width: calc(100vw - 22px); overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .pipeline { width: calc(100vw - 22px); grid-auto-columns: min(82vw, 330px); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .stage-column { scroll-snap-align: start; }
  .deal-tabs { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .deal-tabs button { scroll-snap-align: start; }
  .file-item { flex-wrap: wrap; }
  .file-item .file-main { flex: 1 1 calc(100% - 50px); }
  .file-item > .btn, .file-item > form { flex: 1 1 auto; }
  .file-item > form button { width: 100%; }
  .sticky-actions { bottom: max(5px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .sticky-actions > * { flex: 1 1 auto; }
  .manufacturer-modal { padding: 0; }
  .manufacturer-modal-card { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .security-settings-grid { grid-template-columns: 1fr; }
  .security-status-card { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .company-chat { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .company-chat.open { inset: 0; display: block; }
  .company-chat.open .chat-ribbon { display: none; }
  .chat-panel { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .chat-panel-head { padding-top: max(9px, env(safe-area-inset-top)); height: calc(61px + env(safe-area-inset-top)); }
  .chat-shell { height: calc(100% - 61px - env(safe-area-inset-top)); }
  .chat-composer { padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .chat-security-note { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .chat-ribbon { min-width: 54px; width: 54px; padding: 0; border-radius: 50%; }
  .chat-ribbon > span { display: none; }
  .deal-save-actions,
  .offer-save-actions { bottom: max(62px, calc(52px + env(safe-area-inset-bottom))); }
  .security-login-card { padding: 21px 17px; border-radius: 17px; }
  .totp-setup-grid { grid-template-columns: 1fr; justify-items: center; }
  .totp-steps { width: 100%; }
}

@media (max-width: 640px) {
  .offer-item-row.item-row {
    grid-template-columns: 34px minmax(0, 1fr) 36px;
    grid-template-areas:
      "number name delete"
      "number size delete"
      "number tone delete"
      "number quantity delete"
      "number price delete"
      "number features delete"
      "number additional delete"
      "number catalog delete"
      "number total delete";
    align-items: start;
  }
  .mobile-card-table, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td { display: block; width: 100%; min-width: 0; }
  .mobile-card-table { min-width: 0; }
  .mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mobile-card-table tr { margin: 0; padding: 11px; border-bottom: 1px solid var(--line); }
  .mobile-card-table td { display: grid; grid-template-columns: minmax(92px, 36%) minmax(0, 1fr); gap: 9px; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
  .mobile-card-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .mobile-card-table td .inline-actions { margin: 0; }
  .public-offer-head { align-items: flex-start; flex-wrap: wrap; }
  .public-offer-head img { max-width: 180px; }
  .offer-product { padding: 13px; }
}

@media (max-width: 480px) {
  .topbar { gap: 6px; }
  .global-search { padding-inline: 9px; }
  .global-search input::placeholder { color: transparent; }
  .page-head h1 { overflow-wrap: anywhere; }
  .head-actions { width: 100%; }
  .form-actions { flex-wrap: wrap; }
  .form-actions > * { flex: 1 1 100%; text-align: center; }
  .recovery-code-grid { grid-template-columns: 1fr; }
  .security-login-card .login-logo { width: min(205px, 72%); }
  .global-overdue-alert { flex-wrap: wrap; }
  .global-overdue-alert .btn { width: 100%; }
}

/* PipesCRM 2.6 · inline contacts, LIVE document previews and PipesAssistant */
.contact-mode-grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.5fr); gap: 13px; align-items: stretch; }
.existing-contact-panel,
.new-contact-panel { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcff; }
.existing-contact-panel { display: grid; align-content: start; gap: 13px; }
.new-contact-panel { border-style: solid; background: linear-gradient(145deg, #fbfffe, #f7f8ff); }
.new-contact-panel.muted-panel { opacity: .58; }
.contact-panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.contact-panel-title b { color: var(--ink); font-size: 13px; }
.contact-panel-title span { color: var(--muted); font-size: 10px; text-align: right; }
.file-actions { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.file-actions form { margin: 0; }

.live-preview-section { overflow: hidden; border: 1px solid #d9dcee; border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(33, 37, 68, .055); }
.preview-live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: #08745d; border-radius: 999px; background: #dff9ef; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.preview-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #13b98c; box-shadow: 0 0 0 4px rgba(19, 185, 140, .12); }
.preview-stage { padding: 22px; overflow: auto; background: #eef1f6; }
.sheet-preview,
.offer-live-sheet { width: min(100%, 1040px); min-height: 520px; margin: 0 auto; padding: clamp(20px, 3vw, 42px); color: #242638; border: 1px solid #d9dce5; background: #fff; box-shadow: 0 16px 45px rgba(28, 31, 53, .12); font-family: Arial, Helvetica, sans-serif; }
.sheet-preview-head,
.offer-live-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 18px; border-bottom: 3px solid #373a60; }
.sheet-preview-head span,
.offer-live-sheet > header span { color: #6b6e82; font-size: 10px; font-weight: 850; letter-spacing: .15em; }
.sheet-preview-head h2,
.offer-live-sheet > header h2 { margin: 5px 0 0; color: #252849; font-size: clamp(22px, 3vw, 36px); letter-spacing: -.035em; }
.sheet-preview-head > div:last-child,
.offer-live-sheet > header > div:last-child { text-align: right; }
.sheet-preview-head small,
.offer-live-sheet > header small { display: block; color: #888b9c; font-size: 9px; text-transform: uppercase; }
.sheet-preview-head b,
.offer-live-sheet > header b { display: block; margin: 5px 0; font-size: 13px; }
.sheet-preview-meta { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr; gap: 0; margin: 20px 0; border: 1px solid #dfe1e9; }
.sheet-preview-meta > div { min-width: 0; padding: 13px 14px; border-right: 1px solid #dfe1e9; }
.sheet-preview-meta > div:last-child { border-right: 0; }
.sheet-preview-meta small,
.sheet-preview-meta b,
.sheet-preview-meta span { display: block; overflow-wrap: anywhere; }
.sheet-preview-meta small { color: #8b8e9d; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sheet-preview-meta b { margin: 5px 0 2px; font-size: 12px; }
.sheet-preview-meta span { color: #6f7283; font-size: 10px; white-space: pre-line; }
.sheet-preview-table-wrap { overflow-x: auto; }
.sheet-preview-table { min-width: 650px; border: 1px solid #dfe1e9; }
.sheet-preview-table th { position: static; padding: 9px; color: #fff; background: #3c3f65; font-size: 8px; }
.sheet-preview-table td { padding: 9px; border-right: 1px solid #ececf1; font-size: 10px; }
.sheet-preview-table td:last-child { font-weight: 800; text-align: right; }
.sheet-preview-totals { display: flex; align-items: stretch; justify-content: flex-end; margin-top: 18px; }
.sheet-preview-totals > div { min-width: 145px; padding: 11px 14px; border: 1px solid #dfe1e9; border-right: 0; }
.sheet-preview-totals > div:last-child { border-right: 1px solid #dfe1e9; }
.sheet-preview-totals span,
.sheet-preview-totals b { display: block; }
.sheet-preview-totals span { color: #878a99; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.sheet-preview-totals b { margin-top: 4px; font-size: 13px; }
.sheet-preview-totals .grand { color: #fff; border-color: #3c3f65; background: #3c3f65; }
.sheet-preview-totals .grand span { color: rgba(255, 255, 255, .75); }

/* Faithful LIVE rendering of the SKANDI order workbook. */
.skandi-preview-scroll { width: 100%; overflow-x: auto; padding-bottom: 4px; overscroll-behavior-inline: contain; }
.skandi-preview-scroll:focus-visible { outline: 3px solid rgba(82, 85, 197, .3); outline-offset: 3px; }
.skandi-order-preview { box-sizing: border-box; width: 1044px; min-height: 1403px; margin: 0 auto; padding: 48px 40px 50px; color: #111; border: 1px solid #d6d6d6; background: #fff; box-shadow: 0 16px 45px rgba(28, 31, 53, .12); font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 1.2; }
.skandi-order-header { display: grid; grid-template-columns: 136px minmax(0, 1fr) 350px; align-items: start; min-height: 153px; column-gap: 31px; }
.skandi-order-logo img { display: block; width: 115px; height: 115px; object-fit: contain; }
.skandi-order-header h2 { margin: 16px 0 0; color: #111; font-size: 19px; font-weight: 700; line-height: 1.15; text-align: center; }
.skandi-buyer-card { min-width: 0; padding-top: 6px; }
.skandi-data-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; min-height: 18px; }
.skandi-data-row > b { font-weight: 700; }
.skandi-data-row > span { min-width: 0; overflow-wrap: anywhere; }
.skandi-buyer-name > span > span { display: block; min-height: 15px; }
.skandi-buyer-name > span > span[hidden] { display: none; }
.skandi-seller-details { display: grid; gap: 3px; margin: 14px 0 0 116px; line-height: 1.25; }
.skandi-contract-number { display: grid; grid-template-columns: 29% minmax(0, 1fr); width: 62%; min-height: 21px; border: 1px solid #222; font-size: 10px; }
.skandi-contract-number > * { display: flex; align-items: center; min-width: 0; padding: 2px 4px; overflow-wrap: anywhere; }
.skandi-contract-number > b { border-right: 1px solid #222; }
.skandi-order-date { margin: 9px 0 8px; font-size: 10px; }
.skandi-order-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #111; }
.skandi-order-table col:nth-child(1),
.skandi-order-table col:nth-child(2) { width: 14.5%; }
.skandi-order-table col:nth-child(3) { width: 12%; }
.skandi-order-table col:nth-child(4) { width: 19.5%; }
.skandi-order-table col:nth-child(5),
.skandi-order-table col:nth-child(6) { width: 12%; }
.skandi-order-table col:nth-child(7) { width: 15.5%; }
.skandi-order-table th,
.skandi-order-table td { height: 44px; padding: 4px 3px; overflow-wrap: anywhere; border: 1px solid #222; vertical-align: top; white-space: pre-line; }
.skandi-order-table th { position: static; height: 34px; color: #111; background: #fff; font-size: 10px; font-weight: 700; line-height: 1.08; text-align: left; }
.skandi-order-table td:nth-last-child(-n+2) { text-align: right; }
.skandi-order-table .skandi-empty-row td { color: #777; text-align: center; vertical-align: middle; }
.skandi-order-table .skandi-placeholder-row td { color: transparent; }
.skandi-order-preview--dense .skandi-order-table td { height: 34px; font-size: 9px; line-height: 1.12; }
.skandi-row-overflow { margin: 4px 0 0; color: #7b5100; font-size: 8px; font-weight: 700; text-align: right; }
.skandi-row-overflow[hidden] { display: none; }
.skandi-total-block { display: grid; grid-template-columns: .85fr 1.15fr; width: 27.5%; min-height: 41px; margin-left: auto; }
.skandi-total-block > div { display: flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid #222; border-top: 0; font-weight: 700; text-align: center; }
.skandi-total-block > div:first-child { background: #d9d9d9; }
.skandi-total-block > div + div { display: block; border-left: 0; font-weight: 400; }
.skandi-total-block span,
.skandi-total-block b { display: block; }
.skandi-payment-line { margin: 3px 0 7px; font-size: 10px; }
.skandi-signature-band { width: 62%; height: 15px; border: 1px solid #222; background: #d9d9d9; }
.skandi-contract-meta { display: grid; grid-template-columns: 62% minmax(0, 38%); }
.skandi-signatures > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: end; min-height: 44px; padding: 4px 3px; border: 1px solid #222; border-top: 0; }
.skandi-signatures span { min-width: 0; padding-bottom: 1px; overflow-wrap: anywhere; border-bottom: 1px solid #777; }
.skandi-delivery-meta { display: grid; align-content: center; gap: 13px; padding: 4px 0 4px 2px; }
.skandi-delivery-meta > div { display: grid; grid-template-columns: 129px minmax(0, 1fr); gap: 5px; align-items: start; }
.skandi-delivery-meta span { overflow-wrap: anywhere; }
.skandi-pickup-note { margin: 8px 0 29px; font-size: 9px; text-align: center; }
.skandi-contract-terms { margin: 0; padding-left: 18px; font-size: 7.35px; line-height: 1.19; }
.skandi-contract-terms li { margin: 0; padding-left: 1px; }
.soft-room-preview-logo { display: grid; place-items: center; min-height: 58px; color: #2b2d42; font-size: 24px; font-weight: 900; letter-spacing: .08em; }
.soft-room-preview-logo[hidden] { display: none; }
.soft-room-contract-preview .skandi-order-preview { border-color: #5d5f73; }
.skandi-warranty { margin: 27px 0 0; font-size: 7.6px; line-height: 1.25; }

.offer-live-sheet { max-width: 920px; }
.offer-live-copy { padding: 24px 0 13px; line-height: 1.65; }
.offer-live-copy h3 { margin: 12px 0 8px; color: #34375c; font-size: 22px; }
.offer-live-copy p,
.offer-live-closing { white-space: pre-line; }
.offer-live-products { display: grid; gap: 10px; margin: 13px 0 20px; }
.offer-live-products article { position: relative; padding: 16px 160px 16px 16px; border: 1px solid #dfe1e9; border-radius: 10px; }
.offer-live-products h4 { margin: 0 0 6px; color: #303357; font-size: 16px; }
.offer-live-products p { margin: 3px 0; color: #707385; font-size: 11px; white-space: pre-line; }
.offer-live-products a { display: inline-block; margin-top: 6px; color: #5356c7; font-size: 11px; font-weight: 750; }
.offer-live-products strong { position: absolute; top: 17px; right: 16px; color: #5356c7; font-size: 13px; }
.preview-empty { padding: 22px; color: #8a8d9b; border: 1px dashed #cfd2dc; border-radius: 10px; text-align: center; }
.offer-live-summary { display: grid; grid-template-columns: 1fr 1.4fr .8fr; border: 1px solid #dfe1e9; }
.offer-live-summary > div { padding: 12px 14px; border-right: 1px solid #dfe1e9; }
.offer-live-summary > div:last-child { border-right: 0; }
.offer-live-summary span,
.offer-live-summary b { display: block; }
.offer-live-summary span { color: #858897; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.offer-live-summary b { margin-top: 4px; font-size: 11px; }
.offer-live-summary .grand { color: #fff; background: #5255c5; }
.offer-live-summary .grand span { color: rgba(255, 255, 255, .74); }
.offer-live-summary .grand b { font-size: 16px; }
.offer-live-closing { margin-top: 22px; line-height: 1.6; }

.pipes-assistant { position: fixed; z-index: 215; right: 157px; bottom: 20px; display: grid; justify-items: end; gap: 10px; pointer-events: none; }
.assistant-ribbon,
.assistant-panel { pointer-events: auto; }
.assistant-ribbon { height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; color: #fff; border: 0; border-radius: 16px; background: linear-gradient(135deg, #087f75, #2563a9); box-shadow: 0 16px 36px rgba(14, 116, 144, .26); font-size: 12px; }
.assistant-ribbon:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(14, 116, 144, .32); }
.assistant-ribbon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assistant-panel { width: min(455px, calc(100vw - 40px)); height: min(650px, calc(100dvh - 100px)); display: grid; grid-template-rows: 61px minmax(0, 1fr) auto auto auto; overflow: hidden; border: 1px solid rgba(210, 219, 225, .98); border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(26, 43, 58, .22); transform-origin: bottom right; animation: chat-open .2s cubic-bezier(.2, .8, .2, 1) both; }
.assistant-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 9px 15px; color: #fff; background: linear-gradient(120deg, #087c72, #1d7198 58%, #3957a3); }
.assistant-panel-head > div { display: flex; align-items: center; gap: 9px; }
.assistant-panel-head .icon-btn { color: #fff; background: rgba(255, 255, 255, .12); }
.assistant-panel-head b,
.assistant-panel-head small { display: block; }
.assistant-panel-head b { font-size: 14px; }
.assistant-panel-head small { color: rgba(255, 255, 255, .72); font-size: 9px; }
.assistant-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #17696d; border-radius: 11px; background: #d9fff7; font-size: 18px; }
.assistant-messages { min-height: 0; overflow-y: auto; padding: 15px 13px; background: linear-gradient(180deg, #f8fcfc, #f5f8fb); }
.assistant-message { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; max-width: 88%; margin: 0 0 10px; }
.assistant-message > div:first-child { padding: 10px 12px; color: #303649; border: 1px solid #dce5e8; border-radius: 14px 14px 14px 4px; background: #fff; font-size: 12px; line-height: 1.48; white-space: pre-wrap; }
.assistant-message.user { align-items: flex-end; margin-left: auto; }
.assistant-message.user > div:first-child { color: #fff; border-color: #1f7f85; border-radius: 14px 14px 4px 14px; background: linear-gradient(145deg, #137c78, #2c6aa2); }
.assistant-message.pending { opacity: .68; }
.assistant-message.error > div:first-child { color: #9f1c32; border-color: #f2c9d0; background: #fff5f7; }
.assistant-message > small { color: #969ba8; font-size: 8px; }
.assistant-message[data-assistant-mode="ai"] > small { color: #087c72; }
.assistant-message[data-assistant-mode="fallback"] > small { color: #a45c08; }
.assistant-links { display: flex; gap: 5px; flex-wrap: wrap; }
.assistant-links a { padding: 6px 8px; color: #176c77; border: 1px solid #b9dce0; border-radius: 8px; background: #effafa; font-size: 9px; font-weight: 800; }
.assistant-suggestions { display: flex; gap: 5px; overflow-x: auto; padding: 7px 10px; border-top: 1px solid #e5eaed; }
.assistant-suggestions button { flex: 0 0 auto; min-height: 30px; padding: 5px 8px; color: #28717c; border: 1px solid #cfe2e4; border-radius: 999px; background: #f4fbfb; font-size: 9px; }
.assistant-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding: 8px 10px 6px; }
.assistant-composer.sending { opacity: .62; pointer-events: none; }
.assistant-composer textarea { min-height: 42px; max-height: 110px; resize: vertical; border-radius: 12px; background: #f4f7f8; font-size: 12px; }
.assistant-composer button { min-height: 42px; }
.assistant-security-note { padding: 0 11px 8px; color: #969ca6; font-size: 8px; line-height: 1.35; text-align: center; }

@media (max-width: 900px) {
  .document-template-fields { grid-template-columns: 1fr; }
  .document-template-all-body { grid-template-columns: 1fr; }
  .document-template-department-warning { grid-column: auto; }
  .contact-mode-grid { grid-template-columns: 1fr; }
  .sheet-preview-meta { grid-template-columns: 1fr; }
  .sheet-preview-meta > div { border-right: 0; border-bottom: 1px solid #dfe1e9; }
  .sheet-preview-meta > div:last-child { border-bottom: 0; }
  .sheet-preview-totals { display: grid; grid-template-columns: repeat(3, 1fr); }
  .sheet-preview-totals > div { min-width: 0; border-right: 1px solid #dfe1e9; }
}

@media (max-width: 720px) {
  .pipes-assistant { right: calc(max(10px, env(safe-area-inset-right)) + 64px); bottom: max(10px, env(safe-area-inset-bottom)); }
  .assistant-ribbon { width: 54px; min-width: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .assistant-ribbon > span { display: none; }
  .pipes-assistant.open { inset: 0; display: block; }
  .pipes-assistant.open .assistant-ribbon { display: none; }
  .assistant-panel { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .assistant-panel-head { height: calc(61px + env(safe-area-inset-top)); padding-top: max(9px, env(safe-area-inset-top)); }
  .assistant-security-note { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .preview-stage { padding: 8px; }
  .sheet-preview,
  .offer-live-sheet { min-height: 0; padding: 17px; }
  .sheet-preview-head,
  .offer-live-sheet > header { display: block; }
  .sheet-preview-head > div:last-child,
  .offer-live-sheet > header > div:last-child { margin-top: 12px; text-align: left; }
  .sheet-preview-totals { grid-template-columns: 1fr; }
  .offer-live-products article { padding: 14px; }
  .offer-live-products strong { position: static; display: block; margin-top: 9px; }
  .offer-live-summary { grid-template-columns: 1fr; }
  .offer-live-summary > div { border-right: 0; border-bottom: 1px solid #dfe1e9; }
  .offer-live-summary > div:last-child { border-bottom: 0; }
}

/* PipesCRM 2.11.1 R20A · small movable utility icons */
.floating-tool {
  position: fixed;
  width: 42px;
  height: 42px;
  display: block;
  justify-items: initial;
  gap: 0;
  pointer-events: none;
}
.company-chat.floating-tool { right: 18px; bottom: 18px; }
.pipes-assistant.floating-tool { right: 68px; bottom: 18px; }
.floating-tool-button,
.chat-ribbon.floating-tool-button,
.assistant-ribbon.floating-tool-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}
.floating-tool-button:active,
.floating-tool.dragging .floating-tool-button { cursor: grabbing; transform: none; }
.floating-tool.dragging { opacity: .82; }
.floating-tool-button > span { display: none; }
.floating-tool-button svg,
.assistant-ribbon.floating-tool-button svg { width: 18px; height: 18px; }
.floating-tool.open > .floating-tool-button { display: none; }
.company-chat .chat-panel,
.pipes-assistant .assistant-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .floating-tool,
  .company-chat.floating-tool,
  .pipes-assistant.floating-tool { width: 42px; height: 42px; }
  .company-chat .chat-panel,
  .pipes-assistant .assistant-panel {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* PipesCRM 2.11.1 R20O · salon-aware, compact Offer workflow */
.offer-simple-form {
  width: min(100%, 1420px);
  margin-inline: auto;
}
.offer-core-card,
.offer-client-card,
.offer-products-card { padding: clamp(15px, 2vw, 22px); }
.offer-step-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.offer-step-head > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(135deg, #6161ff, #8b5cf6);
  box-shadow: 0 7px 17px rgba(97, 97, 255, .22);
  font-size: 13px;
  font-weight: 850;
}
.offer-step-head h2,
.offer-step-head p { margin: 0; }
.offer-step-head h2 { color: #30324f; font-size: 17px; }
.offer-step-head p { margin-top: 2px; color: var(--muted); font-size: 10px; }
.offer-products-head { grid-template-columns: 32px minmax(0, 1fr) auto; }
.offer-products-head .order-total-chip { align-self: center; }
.offer-salon-fieldset { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.offer-salon-fieldset > legend { margin-bottom: 7px; color: #5e6073; font-size: 11px; font-weight: 760; }
.offer-salon-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.offer-salon-option { position: relative; min-width: 0; cursor: pointer; }
.offer-salon-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.offer-salon-card {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto;
  grid-template-rows: 54px auto;
  align-items: center;
  gap: 5px 10px;
  min-height: 94px;
  padding: 11px 13px;
  overflow: hidden;
  color: #55576d;
  border: 1px solid #dfe0eb;
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.offer-salon-card img {
  grid-column: 1 / -1;
  display: block;
  width: min(100%, 190px);
  height: 50px;
  object-fit: contain;
  object-position: left center;
}
.offer-salon-option[data-offer-salon="NORD_CASA"] .offer-salon-card img {
  object-fit: cover;
  object-position: center;
}
.offer-salon-card b { min-width: 0; color: #34364e; font-size: 12px; }
.offer-salon-card small { color: #8a8c9d; font-size: 9px; font-weight: 700; }
.offer-salon-option:hover .offer-salon-card { border-color: #bfc0ff; transform: translateY(-1px); }
.offer-salon-option:focus-within .offer-salon-card { outline: 3px solid rgba(97, 97, 255, .16); outline-offset: 2px; }
.offer-salon-option > input:checked + .offer-salon-card {
  border: 2px solid #6161ff;
  background: linear-gradient(135deg, #f4f3ff, #fff);
  box-shadow: 0 8px 22px rgba(79, 70, 229, .14);
}
.offer-salon-option > input:checked + .offer-salon-card small { color: #5050dc; }
.offer-salon-option > input:checked + .offer-salon-card small::before { content: "✓ "; }
.offer-core-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-cash-choice > ul,
.offer-cash-choice > div { display: flex; align-items: center; gap: 14px; min-height: 39px; margin: 0; padding: 8px 10px; list-style: none; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }
.offer-cash-choice li { margin: 0; }
.offer-cash-choice label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.offer-existing-contact { align-items: end; }
.offer-new-contact { margin-top: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fafafe; }
.offer-new-contact > summary { padding: 10px 12px; color: #5557bd; cursor: pointer; font-size: 10px; font-weight: 800; }
.offer-new-contact[open] > summary { border-bottom: 1px solid var(--line); }
.offer-new-contact > .field-grid { padding: 12px; }
.offer-items { display: grid; gap: 9px; }
.offer-item-row.item-row {
  grid-template-columns: 28px repeat(4, minmax(0, 1fr)) 36px;
  grid-template-areas:
    "number name name name name delete"
    "number size tone quantity price delete"
    "number total total total total delete"
    "number more more more more delete";
  gap: 8px;
  padding: 10px;
  overflow: hidden;
}
.offer-item-row .offer-item-more { grid-area: more; min-width: 0; margin-top: 1px; border: 1px solid #e2e3ec; border-radius: 8px; background: #fff; }
.offer-item-row .offer-item-more > summary { padding: 7px 9px; color: #686a80; cursor: pointer; font-size: 9px; font-weight: 750; }
.offer-item-row .offer-item-more[open] > summary { border-bottom: 1px solid #e2e3ec; }
.offer-item-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; padding: 10px; }
.offer-item-more-grid > .field { grid-area: auto; min-width: 0; align-self: start; }
.offer-item-more-grid label { white-space: normal; overflow-wrap: anywhere; }
.offer-item-row > .item-number { align-self: start; padding-top: 5px; }
.offer-item-row .line-total { white-space: normal; overflow-wrap: anywhere; }
.offer-choice-mode { margin: 0 0 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.offer-choice-mode legend { padding: 0 5px; font-size: 13px; font-weight: 700; }
.offer-choice-mode > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.offer-choice-mode label { display: flex; align-items: flex-start; gap: 8px; height: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; cursor: pointer; }
.offer-choice-mode label:has(input:checked) { border-color: var(--primary, #6161ff); background: #f3f2ff; }
.offer-choice-mode input[type="radio"] { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.offer-bundle-price { max-width: 420px; margin-bottom: 16px; }
@media (max-width: 600px) { .offer-choice-mode > div { grid-template-columns: 1fr; } }
.offer-choice-mode p, .offer-choice-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
[data-offer-bundle-total][hidden], [data-preview-offer-summary][hidden], [data-preview-offer-choice][hidden] { display: none; }
.offer-selection-panel { padding: 16px; margin-bottom: 14px; border: 1px solid #cfd1ff; border-radius: 12px; background: #fafaff; }
.offer-item-choices { display: grid; gap: 8px; min-width: 0; }
.offer-item-choices label { display: flex; align-items: flex-start; gap: 10px; padding: 12px; margin: 0; border: 1px solid #dedeea; border-radius: 10px; background: #fff; font-size: 13px; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
.offer-item-choices input { flex: 0 0 auto; margin-top: 3px; }
.offer-item-choices label:has(input:checked) { border-color: #6161ff; background: #f1f0ff; }
.offer-choice-summary { padding: 12px 0; font-weight: 750; font-size: 14px; }
.offer-choice-summary output { display: block; }
.offer-choice-summary small { display: block; color: var(--muted); font-weight: 500; }
.offer-item-choices input:focus-visible { outline: 3px solid #b6b1ff; outline-offset: 3px; }
.public-offer-card [aria-busy="true"] { opacity: .75; }

.offer-item-row .line-total { align-self: end; min-height: 39px; display: grid; place-items: center; padding: 7px; border: 1px solid #d9d9ed; border-radius: 8px; background: #f4f3ff; font-size: 11px; font-weight: 820; white-space: normal; overflow-wrap: anywhere; }
.offer-item-row .delete-wrap { position: static; align-self: end; }
.offer-item-row .delete-wrap .icon-btn { width: 36px; height: 39px; }
.offer-add-product { margin-top: 10px; }
.offer-optional-settings { width: 100%; }
.offer-live-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding-bottom: 15px; }
.offer-live-brand img {
  display: block;
  width: min(46%, 230px);
  height: 58px;
  object-fit: contain;
  object-position: left center;
}
.offer-live-brand small { color: #777a8d; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.offer-brand[data-offer-brand="NORD_CASA"],
.public-offer-head[data-offer-brand="NORD_CASA"] { overflow: hidden; }
.offer-brand[data-offer-brand="NORD_CASA"] img,
.offer-email-rich-preview img[data-offer-brand="NORD_CASA"],
.public-offer-head[data-offer-brand="NORD_CASA"] img,
.offer-live-brand img[data-offer-brand="NORD_CASA"] {
  width: 210px;
  height: 68px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1180px) {
  .offer-item-row.item-row {
    grid-template-columns: 36px repeat(4, minmax(0, 1fr)) 38px;
    grid-template-areas:
      "number name name name name delete"
      "number size tone quantity price delete"
      "number total total total total delete"
      "number more more more more delete";
  }
}

@media (max-width: 800px) {
  .offer-salon-picker,
  .offer-core-fields { grid-template-columns: 1fr; }
  .offer-products-head { grid-template-columns: 32px minmax(0, 1fr); }
  .offer-products-head .order-total-chip { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .offer-item-more-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .offer-item-row.item-row {
    grid-template-columns: 32px minmax(0, 1fr) 36px;
    grid-template-areas:
      "number name delete"
      "number size delete"
      "number tone delete"
      "number quantity delete"
      "number price delete"
      "number total delete"
      "number more delete";
  }
  .offer-live-brand { align-items: flex-start; flex-direction: column; gap: 5px; }
  .offer-live-brand img { width: min(100%, 210px); }
}

/* PipesCRM 2.11.1 R20Q · guided Offer/Deal entry and always-visible preview */
.offer-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
  align-items: start;
  gap: 14px;
}
.offer-editor-main { display: grid; min-width: 0; gap: 14px; }
.offer-editor-layout > .live-preview-section,
.deal-form > .live-preview-section {
  position: sticky;
  top: 88px;
  z-index: 3;
  max-height: calc(100vh - 108px);
  overflow: auto;
  border-color: #cfd1ff;
  box-shadow: 0 14px 38px rgba(50, 53, 112, .13);
}
.offer-editor-layout > .live-preview-section > summary,
.deal-form > .live-preview-section > summary {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
}
.offer-editor-layout .preview-stage { padding: 10px; }
.offer-editor-layout .offer-live-sheet { min-height: 0; padding: 18px; }
.offer-editor-layout .offer-live-sheet > header { gap: 10px; padding-bottom: 11px; }
.offer-editor-layout .offer-live-sheet > header h2 { font-size: 20px; }
.offer-editor-layout .offer-live-copy { padding: 13px 0 8px; font-size: 9px; line-height: 1.45; }
.offer-editor-layout .offer-live-copy h3 { margin: 7px 0 4px; font-size: 15px; }
.offer-editor-layout .offer-live-brand { min-height: 44px; padding-bottom: 9px; }
.offer-editor-layout .offer-live-brand img { width: min(58%, 170px); height: 42px; }
.offer-editor-layout .offer-live-products article { padding: 8px; }
.offer-editor-layout .offer-live-products h4 { font-size: 10px; }
.offer-editor-layout .offer-live-products p,
.offer-editor-layout .offer-live-products a,
.offer-editor-layout .offer-live-products strong { font-size: 8px; }

.deal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  align-items: start;
  gap: 14px;
}
.deal-form > * { grid-column: 1; min-width: 0; }
.deal-form > .live-preview-section { grid-column: 2; grid-row: 1 / span 30; }
.deal-form > .sticky-actions { grid-column: 1 / -1; }
.deal-form > .live-preview-section .preview-stage { height: 535px; padding: 9px; overflow: hidden; }
.deal-form > .live-preview-section .skandi-preview-scroll { width: 100%; height: 510px; overflow: hidden; }
.deal-form > .live-preview-section .skandi-order-preview {
  margin: 0;
  transform: scale(.335);
  transform-origin: left top;
}

.inline-contact-entry { position: relative; display: grid; gap: 10px; }
.contact-mode-grid.inline-contact-mode { grid-template-columns: minmax(0, 1fr); }
.compact-contact-help { padding: 9px 11px; }
.compact-contact-help b,
.compact-contact-help span { display: inline; }
.compact-contact-help span { margin-left: 5px; }
.task-relation-search { min-width: 0; }
.task-relation-control { display: flex; align-items: center; gap: 8px; }
.task-relation-control input { flex: 1; min-width: 0; }
.task-relation-clear { flex: 0 0 auto; }
.task-relation-clear[hidden], .task-relation-results[hidden] { display: none; }
.task-relation-results {
  display: grid; gap: 4px; max-height: 280px; overflow-y: auto;
  margin-top: 6px; padding: 5px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff;
}
.task-relation-option {
  display: grid; gap: 3px; width: 100%; min-width: 0; padding: 10px;
  text-align: left; color: var(--ink); background: #fff;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  font: inherit; overflow-wrap: anywhere;
}
.task-relation-option:hover, .task-relation-option.active, .task-relation-option:focus-visible {
  background: #f2f1ff; border-color: #7272ff; outline: 0;
}
.task-relation-option small, .task-relation-hint, .task-relation-status { color: var(--muted); }
.task-relation-hint, .task-relation-status { display: block; margin-top: 5px; }
.task-relation-option span:empty, .task-relation-status:empty { display: none; }

.contact-autocomplete-results {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid #cfd1ff;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 13px 35px rgba(35, 38, 87, .14);
}
.contact-autocomplete-results[hidden] { display: none; }
.contact-autocomplete-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name action" "meta action";
  gap: 2px 10px;
  width: 100%;
  padding: 9px 11px;
  color: #33364f;
  border: 1px solid #e5e6ef;
  border-radius: 8px;
  background: #fbfbfe;
  text-align: left;
  cursor: pointer;
}
.contact-autocomplete-option:hover,
.contact-autocomplete-option:focus-visible { border-color: #7272ff; background: #f2f1ff; outline: 0; }
.contact-autocomplete-option b { grid-area: name; overflow-wrap: anywhere; font-size: 11px; }
.contact-autocomplete-option span { grid-area: meta; color: var(--muted); overflow-wrap: anywhere; font-size: 9px; }
.contact-autocomplete-option small { grid-area: action; align-self: center; color: #5656dc; font-size: 9px; font-weight: 850; }
.contact-selected-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  color: #076b52;
  border: 1px solid #a8ead7;
  border-radius: 9px;
  background: #e9fbf5;
  font-size: 10px;
}
.contact-selected-notice[hidden] { display: none; }
.contact-selected-notice button {
  padding: 4px 8px;
  color: #4e50c9;
  border: 0;
  background: transparent;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.contact-extra-fields,
.offer-existing-contact-fallback,
.offer-free-text-option {
  border: 1px solid #e1e2ec;
  border-radius: 9px;
  background: #fafafe;
}
.contact-extra-fields > summary,
.offer-existing-contact-fallback > summary,
.offer-free-text-option > summary {
  padding: 9px 11px;
  color: #5b5dbd;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.contact-extra-fields > .field-grid,
.offer-existing-contact-fallback > .field,
.offer-free-text-option > .field { padding: 10px; border-top: 1px solid #e1e2ec; }
.reference-suggestions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.reference-suggestions > span { color: var(--muted); font-size: 9px; font-weight: 750; }
.reference-suggestions button {
  padding: 4px 8px;
  color: #4b4dc4;
  border: 1px solid #cfd0ff;
  border-radius: 999px;
  background: #f4f3ff;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.reference-suggestions button:hover { color: #fff; border-color: #5c5eff; background: #5c5eff; }
.offer-primary-actions form { margin: 0; }
.btn.danger { color: #b42335; border-color: #f1bac2; background: #fff5f6; }
.btn.danger:hover { color: #fff; border-color: #c8293e; background: #c8293e; }
.offer-pdf-download { margin-top: 14px; }

.dashboard-offer-followups { margin-bottom: 14px; border-color: #f3c7ce; background: linear-gradient(135deg, #fff8f8, #fff); }
.dashboard-offer-followup-list { display: grid; gap: 6px; }
.dashboard-offer-followup-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: inherit;
  border: 1px solid #efdae0;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
}
.dashboard-offer-followup-row:hover { border-color: #e59aa7; box-shadow: 0 7px 18px rgba(180, 35, 60, .08); }
.dashboard-offer-followup-row > div { display: grid; min-width: 0; gap: 2px; }
.dashboard-offer-followup-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.dashboard-offer-followup-row small { color: var(--muted); font-size: 9px; }
.dashboard-offer-followup-row > strong { color: #b4233a; font-size: 10px; white-space: nowrap; }

@media (max-width: 1280px) {
  .offer-editor-layout,
  .deal-form { grid-template-columns: 1fr; }
  .offer-editor-layout > .live-preview-section,
  .deal-form > .live-preview-section {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: auto;
    max-height: none;
  }
  .deal-form > .live-preview-section .preview-stage { height: auto; overflow: auto; }
  .deal-form > .live-preview-section .skandi-preview-scroll { height: auto; overflow-x: auto; }
  .deal-form > .live-preview-section .skandi-order-preview { margin: 0 auto; transform: none; }
}

@media (max-width: 720px) {
  .inline-contact-primary { grid-template-columns: 1fr; }
  .dashboard-offer-followup-row { grid-template-columns: 30px minmax(0, 1fr) 18px; }
  .dashboard-offer-followup-row > strong { grid-column: 2; white-space: normal; }
}

/* PipesCRM 2.11.1 R20W · one-click Deal payment status */
.deal-payment-switch {
  display: grid;
  gap: 11px;
  margin: 0 0 14px;
  padding: 13px 14px;
  overflow: hidden;
  border-color: #d8d9f0;
}
.deal-payment-switch-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.deal-payment-switch-head h2 { margin: 2px 0 0; font-size: 15px; }
.deal-payment-switch-head p {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}
.deal-payment-switch-head p b { color: #25273e; font-size: 11px; }
.deal-payment-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(138px, 1fr));
  gap: 4px;
  overflow-x: auto;
  padding: 1px 1px 5px;
  scrollbar-width: thin;
}
.deal-payment-step { min-width: 0; }
.deal-payment-step button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  color: #5b5e6e;
  border: 1px solid #dfe0e7;
  border-radius: 8px;
  background: #f3f3f6;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.22;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.deal-payment-step button:hover,
.deal-payment-step button:focus-visible {
  border-color: #7778ff;
  box-shadow: 0 5px 15px rgba(83, 84, 220, .13);
  outline: 0;
  transform: translateY(-1px);
}
.deal-payment-step-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #6668d5;
  border-radius: 999px;
  background: #e5e5ff;
  font-size: 9px;
}
.deal-payment-step small {
  grid-column: 2;
  color: inherit;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.deal-payment-step.is-current button,
.deal-payment-step.is-current button:disabled {
  color: #fff;
  border-color: #16865f;
  background: linear-gradient(135deg, #16865f, #23a174);
  box-shadow: 0 7px 18px rgba(22, 134, 95, .2);
  cursor: default;
  opacity: 1;
}
.deal-payment-switch.is-unpaid .deal-payment-step.is-current button {
  border-color: #c47b12;
  background: linear-gradient(135deg, #c47b12, #e69a2d);
  box-shadow: 0 7px 18px rgba(196, 123, 18, .2);
}
.deal-payment-step.is-current .deal-payment-step-index {
  color: #fff;
  background: rgba(255, 255, 255, .2);
}

@media (max-width: 760px) {
  .deal-payment-switch-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .deal-payment-switch-head p { display: grid; gap: 2px; text-align: left; }
  .deal-payment-track { display: flex; scroll-snap-type: x proximity; }
  .deal-payment-step { flex: 0 0 178px; scroll-snap-align: start; }
}

/* PipesCRM 2.11.1 R20X · lost Deal visibility */
.deal-lost-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 18px;
  color: #a71931;
  border: 1px solid #ef9ead;
  background: linear-gradient(135deg, #fff0f2, #fff8f9);
  box-shadow: 0 8px 22px rgba(178, 32, 56, .09);
}
.deal-lost-banner-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #fff;
  border-radius: 999px;
  background: #c92340;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}
.deal-lost-banner .section-kicker { color: #bd3149; }
.deal-lost-banner strong {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  letter-spacing: .05em;
}
/* PipesCRM 2.11.1 R20AA · clean lost Deal row */
.deals-table tbody .deal-row-lost { background: #fff6f7; }
.deals-table tbody .deal-row-lost:hover { background: #ffeff2; }
.deals-table tbody .deal-row-lost > td {
  vertical-align: middle;
  background: transparent;
  border-bottom-color: #f0d2d7;
}
.deals-table tbody .deal-row-lost > td:first-child {
  padding-left: 9px;
  box-shadow: inset 4px 0 0 #d8324e;
}
.deals-table .deal-row-lost .deal-reference-cell a,
.deals-table .deal-row-lost .deal-client-cell > a { color: #a51e36; }
.deal-lost-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 4px 6px;
  color: #fff;
  border: 1px solid #b91f39;
  border-radius: 999px;
  background: #ce2d47;
  box-shadow: 0 3px 8px rgba(190, 35, 61, .16);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  white-space: nowrap;
}
.deal-lost-status-badge > span:not(.visually-hidden) { font-size: 12px; line-height: .7; }
.deals-table .deal-row-lost .payment-status-badge,
.deals-table .deal-row-lost .manufacturer-status-badge {
  color: #765e64;
  border-color: #dec9cd;
  background: #f3e7e9;
}
.deals-table .deal-row-lost .deal-manufacturer-table {
  color: #765e64;
  border-color: #ded2d5;
  background: #faf6f7;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* PipesCRM 2.11.1 R20AA · salon price-sheet library */
.price-sheet-salon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1080px;
}
.price-sheet-salon-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 16px;
  min-height: 150px;
  padding: 22px;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.price-sheet-salon-card:hover,
.price-sheet-salon-card:focus-visible {
  border-color: #7778ff;
  box-shadow: 0 15px 36px rgba(60, 62, 135, .13);
  outline: 0;
  transform: translateY(-2px);
}
.price-sheet-salon-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #5758d9;
  border-radius: 15px;
  background: #efefff;
  font-size: 25px;
}
.price-sheet-salon-soft_room .price-sheet-salon-icon { color: #b21c72; background: #fff0f8; }
.price-sheet-salon-card h2 { margin: 4px 0; font-size: 22px; }
.price-sheet-salon-card p { margin: 0; color: var(--muted); font-size: 11px; }
.price-sheet-open-arrow { color: #6667db; font-size: 24px; }
.price-sheet-page-head { margin-bottom: 10px; }
.price-sheet-salon-switch {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid #dfe0ed;
  border-radius: 11px;
  background: #fff;
}
.price-sheet-salon-switch a {
  padding: 7px 12px;
  color: #686a7b;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.price-sheet-salon-switch a.active { color: #fff; background: #5d5fee; }
.price-sheet-library {
  display: grid;
  grid-template-columns: minmax(260px, 315px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.price-sheet-sidebar { display: grid; gap: 14px; }
.price-sheet-folders-card,
.price-sheet-upload-card,
.price-sheet-files-card { padding: 15px; }
.price-sheet-section-head,
.price-sheet-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid #ececf3;
}
.price-sheet-section-head h2,
.price-sheet-files-head h2,
.price-sheet-upload-card h2 { margin: 2px 0 0; font-size: 16px; }
.price-sheet-section-head > b,
.price-sheet-files-head > b {
  padding: 4px 8px;
  color: #5557c8;
  border-radius: 999px;
  background: #efefff;
  font-size: 9px;
}
.price-sheet-folder-list { display: grid; gap: 5px; padding: 10px 0; }
.price-sheet-folder-list a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  color: #4f5265;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 10px;
  text-decoration: none;
}
.price-sheet-folder-list a:hover { border-color: #d9daf5; background: #f8f8ff; }
.price-sheet-folder-list a.active { color: #4648ba; border-color: #cdceff; background: #f0efff; }
.price-sheet-folder-list a > span { color: #7476de; font-size: 15px; text-align: center; }
.price-sheet-folder-list a > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-sheet-folder-list a > small { color: var(--muted); font-weight: 800; }
.price-sheet-folder-form {
  display: grid;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid #ececf3;
}
.price-sheet-folder-form .btn,
.price-sheet-upload-card .btn { width: 100%; justify-content: center; }
.price-sheet-upload-card form { display: grid; gap: 9px; margin-top: 10px; }
.price-sheet-file-field input[type="file"] { width: 100%; font-size: 9px; }
.price-sheet-file-grid { display: grid; gap: 7px; padding-top: 11px; }
.price-sheet-file-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid #e6e7ef;
  border-radius: 11px;
  background: #fff;
}
.price-sheet-file-card:hover { border-color: #cbcdf5; background: #fdfdff; }
.price-sheet-file-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #5557cc;
  border-radius: 10px;
  background: #f0f0ff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
}
.price-sheet-file-copy { min-width: 0; }
.price-sheet-file-copy h3,
.price-sheet-file-copy p,
.price-sheet-file-copy small { overflow-wrap: anywhere; }
.price-sheet-file-copy h3 { margin: 0 0 3px; font-size: 12px; }
.price-sheet-file-copy p { margin: 0 0 3px; color: #6b6d80; font-size: 9px; }
.price-sheet-file-copy small { color: var(--muted); font-size: 8px; }
.price-sheet-empty { display: grid; place-items: center; min-height: 230px; padding: 30px; color: var(--muted); text-align: center; }
.price-sheet-empty > span { margin-bottom: 8px; color: #8587df; font-size: 36px; }
.price-sheet-empty b { color: #43455c; font-size: 14px; }
.price-sheet-empty p { margin: 5px 0 0; font-size: 10px; }
.price-sheet-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 13px; }
.price-sheet-pagination > span { color: var(--muted); font-size: 9px; font-weight: 800; }

@media (max-width: 900px) {
  .price-sheet-library { grid-template-columns: 1fr; }
  .price-sheet-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .price-sheet-salon-grid,
  .price-sheet-sidebar { grid-template-columns: 1fr; }
  .price-sheet-salon-card { min-height: 120px; padding: 17px; }
  .price-sheet-file-card { grid-template-columns: 40px minmax(0, 1fr); }
  .price-sheet-file-icon { width: 40px; height: 40px; }
  .price-sheet-file-card .btn { grid-column: 1 / -1; justify-content: center; }
}

/* R20AE: compact, grouped multiple-document selection. */
.document-batch-picker { display: block; padding: 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.document-picker-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.document-picker-head b { display: block; font-size: 16px; color: #303347; }
.document-picker-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.document-picker-search { flex: 0 1 240px; min-width: 0; }
.document-picker-search input { width: 100%; font-size: 13px; min-height: 38px; padding: 8px 10px; }
.document-batch-picker .document-template-suggestions { padding: 0; border: 0; background: transparent; margin-bottom: 10px; }
.document-picker-caption { color: var(--muted); font-size: 11px; font-weight: 750; padding-bottom: 8px; }
.document-choice-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.document-choice-group { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.document-choice-group legend { width: 100%; padding: 5px 9px; color: #59597a; background: #f5f5fb; border-radius: 5px; font-size: 11px; font-weight: 750; }
.document-choice-row { display: flex; align-items: center; gap: 10px; margin: 3px 0 0; padding: 8px 9px; min-height: 38px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.document-choice-row:hover { background: #f7f7ff; }
.document-choice-row.is-selected { border-color: #c2bcff; background: #f0eeff; }
.document-choice-row:focus-within { outline: 2px solid var(--brand); outline-offset: -2px; }
.document-batch-picker .document-choice-row input { flex: 0 0 17px; width: 17px; height: 17px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand); }
.document-choice-row > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 12px; width: 100%; min-width: 0; }
.document-choice-row strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.document-choice-row small { font-size: 10px; color: var(--muted); }
.document-batch-picker .document-template-all { border-radius: 8px; }
.document-batch-picker .document-template-all > summary { padding: 9px 10px; font-size: 12px; }
.document-template-all .document-choice-list { padding: 8px; }
.document-picker-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
.document-picker-footer > span { color: var(--muted); font-size: 12px; }
.document-picker-footer .document-create-button { width: auto; margin: 0; padding: 10px 16px; min-height: 40px; font-size: 13px; }
.document-picker-warning, .document-picker-empty { margin: 8px 0; font-size: 12px; padding: 9px; border-radius: 6px; background: #fff7de; color: #795500; }
.document-batch-progress { padding: 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8f8ff; font-size: 12px; overflow-wrap: anywhere; }
.document-batch-progress progress { display: block; width: 100%; height: 8px; margin: 10px 0; accent-color: var(--brand); }
.document-batch-progress ol { margin: 10px 0; padding-left: 20px; }
.document-batch-progress li { padding: 4px 0; }
.document-batch-progress a { font-weight: 700; text-decoration: underline; }
.document-batch-progress .is-error { color: #b4233c; }
.document-batch-progress .is-done, .document-storage-state.is-drive { color: #087757; }
.document-batch-progress .is-local, .document-storage-state.is-local { color: #906200; }
.document-batch-picker [hidden] { display: none !important; }
@media (max-width: 720px) {
  .document-batch-picker { padding: 10px; }
  .document-picker-search { flex-basis: 100%; }
  .document-choice-list { max-height: 280px; }
  .document-choice-row { min-height: 44px; }
  .document-picker-footer .document-create-button { flex: 1 1 180px; }
}

.document-picker-search .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* The leasing payment stays beneath its status and fits narrow form columns. */
.leasing-down-payment-form { min-width: 0; border-top: 1px solid #e4e3f0; margin-top: 16px; padding-top: 16px; }
.leasing-down-payment { display: grid; gap: 12px; min-width: 0; margin: 14px 0; }
.leasing-down-payment > .field { max-width: 320px; }
.leasing-down-payment-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; min-width: 0; }
.leasing-down-payment .field { min-width: 0; margin: 0; }
.leasing-down-payment input, .leasing-down-payment select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.leasing-down-payment[hidden], .leasing-down-payment [hidden] { display: none !important; }
@media (max-width: 600px) {
  .leasing-down-payment > .field { max-width: none; }
  .leasing-down-payment-form > button { width: 100%; }
}