:root{
  --page-bg:#f3f7ff;
  --panel:#fff;
  --line:#dbe5f2;
  --line-soft:#e6edf6;
  --text:#0b132b;
  --muted:#64748b;
  --blue:#2363ff;
  --blue2:#263ff1;
  --green:#12a96d;
  --green-bg:#dff8ec;
  --orange:#f97316;
  --orange-bg:#fff0df;
  --red:#ef233c;
  --red-bg:#ffe4eb;
  --purple:#7257ff;
  --purple-bg:#f0ecff;
  --shadow:0 22px 55px rgba(20, 35, 80, .09);
  --soft-shadow:0 12px 30px rgba(20, 35, 80, .055)
}

/* Sales workspaces */
.sales-page { display: grid; gap: 24px; min-width: 0; }
.sales-page-header { margin: 0; }
.sales-page-header .hero-copy { max-width: 720px; }
.sales-metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border, #e2e8f0); border-radius: 14px; background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.04)); overflow: hidden; }
.sales-metric-strip article { display: grid; gap: 6px; min-width: 0; padding: 20px 24px; border-right: 1px solid var(--border, #e2e8f0); }
.sales-metric-strip article:last-child { border-right: 0; }
.sales-metric-strip span, .sales-metric-strip small { color: var(--muted, #64748b); }
.sales-metric-strip span { font-size: 12px; font-weight: 700; }
.sales-metric-strip strong { color: var(--ink, #172033); font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
.sales-metric-strip small { font-size: 12px; }
.sales-overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 24px; align-items: start; }
.sales-overview-grid > .panel { margin: 0; padding: 24px; }
.sales-stage-bar { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(100px, 1fr) minmax(90px, auto); gap: 16px; align-items: center; min-height: 52px; border-top: 1px solid var(--border, #e2e8f0); }
.sales-stage-bar:first-child { border-top: 0; }
.sales-stage-bar > div:first-child { display: grid; gap: 2px; }
.sales-stage-bar span { color: var(--muted, #64748b); font-size: 12px; }
.sales-stage-bar b { text-align: right; }
.sales-stage-track { height: 8px; border-radius: 999px; background: var(--surface-soft, #f1f5f9); overflow: hidden; }
.sales-stage-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary, #2363ff); }
.sales-reporting { display: grid; gap: 24px; padding-top: 8px; }
.sales-section-head h2, .sales-section-head p { margin: 0; }
.sales-section-head p { margin-top: 4px; color: var(--muted, #64748b); }
.sales-report-table-wrap { max-width: 100%; overflow-x: auto; }
.sales-report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sales-report-table th, .sales-report-table td { padding: 12px 8px; border-bottom: 1px solid var(--border, #e2e8f0); text-align: left; vertical-align: top; }
.sales-report-table th { color: var(--muted, #64748b); font-size: 12px; font-weight: 700; }
.sales-report-table tbody tr:last-child td { border-bottom: 0; }
.sales-funnel-row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(100px, 1fr) minmax(72px, auto); gap: 16px; align-items: center; min-height: 52px; border-top: 1px solid var(--border, #e2e8f0); }
.sales-funnel-row:first-child { border-top: 0; }
.sales-funnel-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.sales-funnel-row span, .sales-funnel-row b { color: var(--muted, #64748b); font-size: 12px; }
.sales-funnel-row b { text-align: right; }
.sales-record-list { display: grid; }
.sales-record-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 60px; padding: 10px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--border, #e2e8f0); }
.sales-record-row:first-child { border-top: 0; }
.sales-record-row:hover strong { color: var(--primary, #2363ff); }
.sales-record-row > span { display: grid; gap: 2px; min-width: 0; }
.sales-record-row strong, .sales-record-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-record-row small { color: var(--muted, #64748b); font-size: 12px; }
.sales-record-value { text-align: right; }
.sales-filter-bar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin: 0; }
.sales-search-field { display: grid; gap: 6px; flex: 1 1 260px; min-width: 220px; color: var(--muted, #64748b); font-size: 12px; font-weight: 700; }
.sales-search-field input { width: 100%; height: 40px; }
.sales-board-wrap { width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 8px; }
.sales-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 320px); gap: 16px; align-items: start; min-width: max-content; }
.sales-pipeline-column { display: grid; grid-template-rows: auto 1fr; min-height: 520px; padding: 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; background: var(--surface-soft, #f8fafc); transition: border-color 180ms ease, background 180ms ease; }
.sales-pipeline-column.is-drop-target { border-color: var(--primary, #2363ff); background: #eef4ff; }
.sales-pipeline-column > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px 10px; }
.sales-pipeline-column > header > div { display: flex; align-items: center; gap: 8px; }
.sales-pipeline-column > header span { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 12px; font-weight: 700; }
.sales-pipeline-column > header small { color: var(--muted, #64748b); font-weight: 700; }
.sales-pipeline-cards { display: grid; align-content: start; gap: 10px; }
.sales-opportunity-card { border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.sales-opportunity-card:hover { border-color: #8db0ff; box-shadow: 0 4px 12px rgba(15,23,42,.08); transform: translateY(-1px); }
.sales-opportunity-card.is-dragging { opacity: .55; }
.sales-opportunity-card a { display: grid; gap: 10px; padding: 16px; color: inherit; text-decoration: none; }
.sales-card-account { color: var(--muted, #64748b); font-size: 12px; font-weight: 700; }
.sales-opportunity-card b { font-size: 18px; }
.sales-card-meta, .sales-card-footer { display: flex; justify-content: space-between; gap: 8px; color: var(--muted, #64748b); font-size: 12px; }
.sales-card-meta { display: grid; }
.sales-card-footer { padding-top: 10px; border-top: 1px solid var(--border, #e2e8f0); }
.sales-account-table { width: 100%; }
.sales-table-primary { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.sales-table-primary small { color: var(--muted, #64748b); }
.sales-record-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border, #e2e8f0); }
.sales-record-header h2 { margin: 8px 0 4px; }
.sales-record-header p { margin: 0; color: var(--muted, #64748b); }
.sales-record-kicker, .sales-header-actions { display: flex; align-items: center; gap: 8px; }
.sales-record-tabs { width: 100%; overflow-x: auto; }
.sales-record-content { min-width: 0; }
.sales-record-grid, .sales-opportunity-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 24px; align-items: start; }
.sales-record-grid > .panel, .sales-opportunity-layout > .panel { margin: 0; padding: 24px; }
.sales-summary-list dl, .sales-detail-list { display: grid; margin: 16px 0 0; }
.sales-summary-list dl div, .sales-detail-list div { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--border, #e2e8f0); }
.sales-summary-list dt, .sales-detail-list dt { color: var(--muted, #64748b); }
.sales-summary-list dd, .sales-detail-list dd { margin: 0; font-weight: 700; }
.sales-large-value { display: block; margin-top: 20px; font-size: 30px; line-height: 36px; }
.sales-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sales-contact-grid article { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff; }
.sales-contact-grid article > div { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sales-contact-grid p { margin: 0; color: #334155; }
.sales-contact-grid small { color: var(--muted, #64748b); }
.sales-contact-grid .compact-button { justify-self: start; margin-top: 8px; }
.sales-contact-actions { display: flex !important; justify-content: flex-start !important; flex-wrap: wrap; }
.sales-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sales-tab-head h3, .sales-tab-head p { margin: 0; }
.sales-tab-head p { margin-top: 4px; color: var(--muted, #64748b); }
.compact-button { min-width: 0; height: 36px; padding-inline: 12px; }
.sales-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.sales-check input { width: 18px; height: 18px; }
.sales-discovery-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sales-discovery-form .field { align-content: start; }
.sales-discovery-form textarea { min-height: 112px; resize: vertical; }
.sales-discovery-form > .primary-button, .sales-discovery-form > .fc-form-error { grid-column: 1 / -1; }
.sales-discovery-form > .primary-button { justify-self: start; }
.sales-linked-operations { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border, #e2e8f0); }
.sales-day-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.sales-day-grid > .panel, .sales-stale-panel { margin: 0; padding: 20px; }
.sales-task-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 12px 0; border-top: 1px solid var(--border, #e2e8f0); }
.sales-task-row:first-child { border-top: 0; }
.sales-task-row > div { display: grid; gap: 5px; min-width: 0; }
.sales-task-row > div:last-child { justify-items: end; flex: 0 0 auto; }
.sales-task-row strong, .sales-task-row small { overflow-wrap: anywhere; }
.sales-task-row small, .sales-task-row time { color: var(--muted, #64748b); font-size: 12px; }
.sales-timeline { display: grid; }
.sales-timeline article { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding: 0 0 20px; }
.sales-timeline article:not(:last-child) { border-left: 1px solid var(--border, #e2e8f0); margin-left: 5px; padding-left: 18px; }
.sales-timeline-mark { width: 11px; height: 11px; margin-left: -24px; border: 2px solid #fff; border-radius: 50%; background: var(--primary, #2363ff); box-shadow: 0 0 0 1px var(--primary, #2363ff); }
.sales-timeline article:first-child .sales-timeline-mark { margin-left: 0; }
.sales-timeline article > div { display: grid; gap: 4px; }
.sales-timeline p { margin: 0; color: #334155; }
.sales-timeline small, .sales-signal-list { color: var(--muted, #64748b); }
.sales-quote-list { display: grid; gap: 12px; }
.sales-quote-record { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-md, 8px); background: var(--surface, #fff); }
.sales-quote-record > header, .sales-quote-record > header > div, .sales-quote-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sales-quote-record > header > div { justify-content: flex-start; min-width: 0; }
.sales-quote-meta { color: var(--muted, #64748b); font-size: 13px; }
.sales-quote-record details { border-top: 1px solid var(--border, #e2e8f0); padding-top: 10px; }
.sales-quote-record summary { color: var(--primary, #2363ff); cursor: pointer; font-weight: 700; }
.sales-quote-history { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.sales-quote-history li { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto; gap: 12px; align-items: baseline; color: var(--muted, #64748b); font-size: 12px; }
.sales-quote-history li strong { color: var(--text, #0f172a); }
.sales-quote-history-empty { display: block; margin-top: 10px; color: var(--muted, #64748b); font-size: 12px; }
.sales-signal-list { display: grid; gap: 2px; text-align: right; }
.sales-opportunity-main, .sales-property-panel { min-width: 0; }
.sales-property-panel { position: sticky; top: 24px; }
.sales-property-panel form { display: grid; gap: 12px; margin-top: 16px; }
.sales-section-head { margin-top: 24px; }
.sales-form-dialog { width: min(760px, calc(100vw - 32px)); }

@media (max-width: 1024px) {
  .sales-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-metric-strip article:nth-child(2) { border-right: 0; }
  .sales-metric-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--border, #e2e8f0); }
  .sales-overview-grid, .sales-record-grid, .sales-opportunity-layout { grid-template-columns: 1fr; }
  .sales-property-panel { position: static; }
  .sales-day-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sales-page { gap: 20px; }
  .sales-page-header, .sales-record-header { display: grid; }
  .sales-page-header .primary-button, .sales-page-header > button, .sales-header-actions .primary-button { width: 100%; justify-content: center; }
  .sales-metric-strip { grid-template-columns: 1fr; }
  .sales-metric-strip article { border-right: 0; border-bottom: 1px solid var(--border, #e2e8f0); }
  .sales-metric-strip article:last-child { border-bottom: 0; }
  .sales-stage-bar { grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr); }
  .sales-stage-bar b { grid-column: 2; grid-row: 1; }
  .sales-stage-track { grid-column: 1 / -1; }
  .sales-filter-bar > * { flex: 1 1 100%; width: 100%; }
  .sales-board { grid-auto-columns: minmax(272px, calc(100vw - 48px)); }
  .sales-pipeline-column { min-height: 440px; }
  .sales-contact-grid { grid-template-columns: 1fr; }
  .sales-tab-head, .sales-linked-operations { align-items: stretch; flex-direction: column; }
  .sales-tab-head .sales-header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .sales-tab-head .primary-button, .sales-tab-head .secondary-button { width: 100%; }
  .sales-discovery-form { grid-template-columns: 1fr; }
  .sales-task-row { align-items: stretch; flex-direction: column; }
  .sales-task-row > div:last-child { justify-items: start; }
  .sales-quote-record > header, .sales-quote-meta { align-items: flex-start; flex-direction: column; }
  .sales-quote-history li { grid-template-columns: 1fr; gap: 3px; }
  .sales-summary-list dl div, .sales-detail-list div { grid-template-columns: 1fr; gap: 4px; }
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0
}
html{
  scroll-behavior:smooth
}
html, body{
  width:100%;
  min-height:100%;
  overflow-x:hidden
}
body{
  background:radial-gradient(circle at 30% -10%, rgba(35, 99, 255, .09), transparent 35%), linear-gradient(180deg, #f8fbff 0%, var(--page-bg) 100%);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding:20px
}

html:has(body.modal-open),
body.modal-open {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

body.modal-open {
  touch-action: none;
}

body.modal-open .fc-modal,
body.modal-open .fc-modal *,
body.modal-open .client-modal-backdrop,
body.modal-open .client-modal-backdrop * {
  touch-action: auto;
}

button, input, select, textarea{
  font:inherit
}
button{
  cursor:pointer
}
a{
  text-decoration:none;
  color:inherit
}
.app-shell{
  width:100%;
  max-width:1490px;
  min-height:calc(100vh - 40px);
  margin:0 auto;
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns:255px minmax(0, 1fr);
  border:1px solid rgba(199, 211, 229, .7)
}
.sidebar{
  background:linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 251, 255, .98));
  border-right:1px solid #d8e3f2;
  padding:30px 24px 24px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.brand{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:44px
}
.brand-mark{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, #1a78ff 0%, #2557f4 60%, #233ee8 100%);
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.06em;
  box-shadow:0 12px 24px rgba(35, 99, 255, .22);
  overflow:hidden;
  flex:0 0 46px
}
.brand-name{
  font-weight:830;
  letter-spacing:-.05em;
  font-size:20px
}
.nav{
  display:grid;
  gap:16px
}

.nav-link[hidden],
.quick-card[hidden],
.primary-button[hidden] {
  display: none !important;
}

.nav-link{
  height:46px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 14px;
  color:#24344f;
  font-weight:620;
  font-size:15px;
  letter-spacing:-.01em
}
.nav-link svg{
  width:19px;
  height:19px;
  stroke:#263851;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto
}
.nav-link.active{
  color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow:0 15px 26px rgba(35, 99, 255, .26)
}
.nav-link.active svg{
  stroke:#fff
}
.nav-icon{
  display:grid;
  place-items:center
}
.quick-card{
  margin-top:auto;
  border-radius:16px;
  padding:20px 20px 21px;
  background:radial-gradient(circle at 86% 15%, rgba(255, 255, 255, .09), transparent 29%), linear-gradient(145deg, #141f35, #0c1528 72%);
  color:#fff;
  box-shadow:0 18px 35px rgba(15, 23, 42, .22)
}
.quick-card strong{
  display:block;
  font-weight:800;
  font-size:18px;
  letter-spacing:-.04em;
  margin-bottom:12px
}
.quick-card p{
  color:#d5deec;
  font-size:13px;
  line-height:1.5;
  width:160px;
  margin-bottom:20px
}
.quick-card a{
  height:42px;
  min-width:118px;
  padding-inline:18px;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-size:14px;
  font-weight:780;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(0, 0, 0, .12)
}
.user{
  border-top:1px solid #e1e8f3;
  margin-top:28px;
  padding:18px 4px 0;
  display:flex;
  align-items:center;
  gap:11px;
  color:#0f172a
}
.user-photo{
  width:40px;
  height:40px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #f2c7a5 0 18%, transparent 19%), radial-gradient(circle at 50% 68%, #1f2937 0 30%, transparent 31%), linear-gradient(135deg, #c4d4e7, #eef4ff);
  border:2px solid #fff;
  box-shadow:0 6px 12px rgba(15, 23, 42, .12);
  flex:0 0 auto
}
.user strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  font-weight:750
}
.user small{
  display:block;
  color:var(--muted);
  font-size:13px
}
.user-caret{
  margin-left:auto;
  color:#5d6f91
}
.content{
  min-width:0;
  padding:56px 40px 38px 46px;
  background:radial-gradient(circle at 70% -18%, rgba(35, 99, 255, .04), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .96));
  position:relative
}
.menu-toggle{
  display:none;
  height:40px;
  border:1px solid #d9e3f1;
  border-radius:10px;
  background:#fff;
  padding:0 14px;
  color:#31405a;
  font-weight:760;
  margin-bottom:20px
}
.page{
  display:grid;
  gap:29px
}
.hero-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:24px;
  margin-bottom:20px
}
.hero-copy h2{
  font-size:36px;
  line-height:1;
  letter-spacing:-.075em;
  font-weight:860;
  margin-bottom:16px
}
.hero-copy p{
  color:#5d6f91;
  font-size:15px;
  line-height:1.35
}
.primary-button, .secondary-button, .icon-button{
  height:45px;
  border-radius:10px;
  font-size:14px;
  font-weight:760;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer
}
.primary-button{
  min-width:129px;
  border:none;
  color:#fff;
  background:linear-gradient(135deg, #2471ff, #243ef0);
  box-shadow:0 13px 24px rgba(35, 99, 255, .28);
  padding:0 18px
}
.secondary-button, .icon-button{
  border:1px solid #d9e3f1;
  background:#fff;
  color:#31405a;
  padding:0 18px;
  box-shadow:0 8px 18px rgba(15, 23, 42, .025)
}
.icon-button{
  width:42px;
  padding:0
}
.toolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:18px;
  border-bottom:1px solid #dbe5f2;
  margin-top:-6px
}
.toolbar-actions{
  display:flex;
  align-items:flex-end;
  gap:14px;
  padding-bottom:11px
}
.toolbar-filter{
  display:grid;
  gap:5px;
  min-width:190px;
  color:#526483;
  font-size:12px;
  font-weight:700
}
.toolbar-filter select{
  width:100%;
  min-width:0;
  height:42px;
  border:1px solid #d9e3f1;
  border-radius:12px;
  background:#fff;
  color:#14213d;
  padding:0 38px 0 12px;
  font:inherit;
  font-size:14px
}
.tabs{
  display:flex;
  align-items:end;
  gap:clamp(18px, 4vw, 52px);
  overflow-x:auto
}
.tab{
  appearance:none;
  border:0;
  background:transparent;
  height:48px;
  color:#526483;
  font-size:14px;
  font-weight:630;
  display:flex;
  align-items:center;
  letter-spacing:-.01em;
  white-space:nowrap;
  position:relative
}
.tab.active{
  color:#0f172a;
  font-weight:740
}
.tab.active:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:78px;
  height:3px;
  border-radius:99px;
  background:#2363ff
}
.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px
}
.stats.five{
  grid-template-columns:repeat(5, minmax(0, 1fr))
}
.card, .panel, .table-card{
  border:1px solid #dfe8f4;
  border-radius:14px;
  background:rgba(255, 255, 255, .95);
  box-shadow:var(--soft-shadow)
}
.card{
  padding:23px 21px
}
.stat-card{
  min-height:136px;
  display:grid;
  align-content:center;
  gap:12px
}
.stat-label{
  color:#40516f;
  font-size:14px;
  font-weight:760
}
.stat-value{
  color:var(--text);
  font-size:29px;
  line-height:1;
  letter-spacing:-.055em;
  font-weight:860
}
.trend{
  font-size:14px;
  font-weight:780;
  color:var(--green)
}
.trend.orange{
  color:var(--orange)
}
.trend.red{
  color:var(--red)
}
.split{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(300px, .85fr);
  gap:18px
}
.panel{
  padding:24px 22px
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:22px
}
.panel-head.card{
  border:0;
  border-radius:0;
  box-shadow:none;
  border-bottom:1px solid var(--line-soft);
  margin:0;
  padding:22px
}
.panel-head h2{
  font-size:22px;
  line-height:1;
  letter-spacing:-.06em;
  font-weight:850
}
.panel-head h3{
  font-size:18px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:820
}
.list{
  display:grid;
  gap:12px
}
.list-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
  padding:13px;
  border:1px solid #e6edf6;
  border-radius:12px;
  background:#fff
}
.list-item:is(a, button){
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease
}
.list-item:is(a, button):hover{
  transform:translateY(-3px);
  border-color:#b9cffb;
  background:#fbfdff;
  box-shadow:0 10px 24px rgba(35, 99, 255, .13)
}
.list-item:is(a, button):focus-visible{
  transform:translateY(-3px);
  border-color:var(--blue);
  outline:3px solid rgba(35, 99, 255, .2);
  outline-offset:2px;
  box-shadow:0 10px 24px rgba(35, 99, 255, .13)
}
.list-item:is(a, button):active{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(35, 99, 255, .1)
}
.list-item strong{
  display:block;
  font-size:14px;
  font-weight:760;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.list-item small{
  display:block;
  color:#65799a;
  font-size:13px;
  margin-top:3px
}
.avatar, .initials{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8f3ff;
  color:#086ee8;
  font-size:12px;
  font-weight:850;
  flex:0 0 auto
}
.badge{
  height:27px;
  border-radius:7px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:820;
  line-height:1;
  color:var(--green);
  background:var(--green-bg);
  white-space:nowrap
}
.badge.blue{
  color:#086ee8;
  background:#e8f3ff
}
.badge.orange{
  color:#c97918;
  background:#fff1d8
}
.badge.red{
  color:var(--red);
  background:var(--red-bg)
}
.badge.purple{
  color:var(--purple);
  background:var(--purple-bg)
}
.badge.gray{
  color:#64748b;
  background:#eef2f7
}
.table-card{
  padding:0;
  overflow:hidden
}
.table-scroll{
  width:100%;
  overflow-x:auto
}
table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  min-width:920px
}
thead th{
  height:45px;
  color:#516280;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:left;
  border-bottom:1px solid #dce5f0;
  padding:0 12px
}
tbody td{
  height:62px;
  border-bottom:1px solid #e5ecf5;
  font-size:14px;
  color:#0f172a;
  padding:0 12px;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
tbody tr:hover{
  background:rgba(246, 249, 255, .55)
}
tbody tr:last-child td{
  border-bottom:0
}
.table-footer{
  height:81px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:18px;
  padding:0 22px;
  border-top:1px solid #e5ecf5;
  color:#536684;
  font-size:14px
}
.pager{
  display:flex;
  align-items:center;
  gap:18px
}
.page-dot{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#0f172a;
  font-size:14px;
  font-weight:730;
  border:1px solid #dbe5f2;
  background:#fff
}
.page-dot.active{
  background:#eaf2ff;
  color:var(--blue);
  border-color:#c4d8ff
}
.schedule-grid{
  display:grid;
  grid-template-columns:92px repeat(7, minmax(0, 1fr));
  grid-auto-rows:minmax(72px, auto);
  min-width:970px;
  border-left:1px solid #e7edf6;
  border-top:1px solid #e7edf6
}
.schedule-grid[data-schedule-mode="month"] {
  grid-auto-rows: minmax(132px, auto);
}

.schedule-filter-panel {
  margin-top: 16px;
}

.schedule-period-button {
  min-width: 172px;
  padding-inline: 16px;
}

.schedule-range-head {
  margin-bottom: 0;
  border-bottom: 0;
}

.schedule-head, .time-cell, .schedule-cell{
  border-right:1px solid #e7edf6;
  border-bottom:1px solid #e7edf6;
  background:#fff;
  padding:11px
}
.schedule-head{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#182846;
  font-size:14px;
  font-weight:760
}
.time-cell{
  color:#526483;
  font-size:13px;
  font-weight:620
}
.month-cell {
  display: grid;
  align-content: start;
  gap: 8px;
}

.month-day {
  color: #182846;
  font-size: 13px;
  font-weight: 820;
}

.event{
  border-radius:7px;
  padding:9px 10px;
  font-size:12px;
  line-height:1.25;
  color:#086ee8;
  border:1px solid rgba(35, 99, 255, .45);
  background:rgba(35, 99, 255, .11);
  font-weight:780
}
.event.green{
  color:#08895e;
  border-color:rgba(16, 185, 129, .45);
  background:rgba(16, 185, 129, .1)
}
.event.orange{
  color:#c55b14;
  border-color:rgba(255, 139, 74, .5);
  background:rgba(255, 139, 74, .12)
}
.event.purple{
  color:#7a3fe0;
  border-color:rgba(164, 108, 245, .5);
  background:rgba(164, 108, 245, .1)
}
.map-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:24px
}
.map-canvas{
  position:relative;
  min-height:650px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid #dfe8f4;
  background:linear-gradient(90deg, rgba(148, 163, 184, .16) 1px, transparent 1px), linear-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px), linear-gradient(135deg, #f8fbff, #e7f0ff);
  background-size:40px 40px;
  box-shadow:var(--soft-shadow)
}
.map-road{
  position:absolute;
  height:16px;
  border-radius:999px;
  background:rgba(74, 85, 104, .18)
}
.pin{
  position:absolute;
  width:44px;
  height:44px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15, 23, 42, .16);
  display:grid;
  place-items:center;
  color:var(--blue);
  font-weight:900;
  border:4px solid rgba(37, 99, 235, .12)
}
.pin.green{
  color:var(--green)
}
.pin.orange{
  color:var(--orange)
}
.map-label{
  position:absolute;
  color:#50617f;
  font-size:13px;
  font-weight:780
}
.chart-bars{
  height:260px;
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  align-items:end;
  gap:16px;
  padding-top:12px
}
.bar{
  height:100%;
  display:grid;
  grid-template-rows:1fr auto;
  gap:10px;
  color:#526483;
  font-size:13px;
  font-weight:700;
  text-align:center
}
.bar span{
  display:block;
  width:100%;
  align-self:end;
  border-radius:10px 10px 3px 3px;
  background:linear-gradient(180deg, #2471ff, #8bb4ff)
}
.donut{
  width:190px;
  height:190px;
  border-radius:50%;
  background:conic-gradient(var(--blue) 0 42%, var(--green) 42% 68%, var(--orange) 68% 86%, var(--purple) 86% 100%);
  margin:20px auto;
  display:grid;
  place-items:center
}
.donut-inner{
  width:116px;
  height:116px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  text-align:center
}
.settings-layout{
  display:grid;
  grid-template-columns:250px minmax(0, 1fr);
  gap:24px
}
.settings-tabs{
  display:grid;
  align-content:start;
  gap:8px;
  padding:18px
}
.settings-tab{
  appearance:none;
  border:0;
  background:transparent;
  text-align:left;
  min-height:42px;
  border-radius:10px;
  color:#344054;
  font-weight:760;
  padding:0 12px
}
.settings-tab.active{
  color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--blue2))
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
  gap:18px
}
.field{
  display:grid;
  gap:8px
}
.field label{
  color:#40516f;
  font-size:13px;
  font-weight:800
}
.field input, .field select, .field textarea{
  min-height:46px;
  border:1px solid #d9e3f1;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  outline:none;
  padding:0 14px
}
.field textarea{
  min-height:120px;
  padding-top:12px;
  resize:vertical
}
.form-section-title {
  grid-column: span 2;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.form-section-title strong {
  color: #182846;
  font-size: 14px;
  font-weight: 820;
}

.checkbox-field {
  min-height: 46px;
  align-content: end;
}

.checkbox-field label {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
  color: #243755;
  cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  accent-color: var(--blue);
}

@media(max-width:1280px){
  .form-section-title {
    grid-column: auto;
  }
}
.span-2{
  grid-column:span 2
}
@media(max-width:1280px){
  body{
    padding:12px
  }
  .app-shell{
    grid-template-columns:230px minmax(0, 1fr)
  }
  .sidebar{
    padding:24px 16px
  }
  .content{
    padding:44px 28px 34px
  }
  .stats, .stats.five{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }
  .split, .map-layout, .settings-layout{
    grid-template-columns:1fr
  }
  .hero-row, .toolbar{
    grid-template-columns:1fr
  }
  .toolbar-actions{
    justify-content:flex-end
  }
}
@media(max-width:980px){
  body{
    padding:0
  }
  .app-shell{
    display:block;
    min-height:100vh;
    border-radius:0
  }
  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:20;
    width:280px;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:var(--shadow)
  }
  body.nav-open .sidebar{
    transform:translateX(0)
  }
  .content{
    padding:28px 18px
  }
  .menu-toggle{
    display:inline-flex;
    align-items:center
  }
  .hero-copy h2{
    font-size:31px
  }
  .stats, .stats.five, .form-grid{
    grid-template-columns:1fr
  }
  .table-footer{
    grid-template-columns:1fr;
    justify-items:center;
    height:auto;
    padding:18px
  }
  .span-2{
    grid-column:auto
  }
}
.empty-state{
  min-height:220px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#64748b;
  background:#f8fbff;
  border:1px dashed #dbe5f2;
  border-radius:14px;
  padding:24px
}
.empty-state strong{
  display:block;
  color:#0b132b;
  font-size:17px;
  margin-bottom:8px;
  letter-spacing:-.03em
}
.api-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:8px;
  background:#e8f3ff;
  color:#086ee8;
  font-size:12px;
  font-weight:820
}
.api-status.red{
  background:#ffe4eb;
  color:#ef233c
}
.table-card .empty-state{
  border:0;
  border-radius:0;
  min-height:280px
}
.zero-map{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#64748b;
  text-align:center
}
.zero-map strong{
  display:block;
  color:#0b132b;
  margin-bottom:6px
}

.fc-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(11, 19, 43, .42)
}
.fc-dialog{
  width:min(680px, 100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  border:1px solid #dfe8f4;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
  padding:24px
}
.fc-dialog .panel-head{
  margin-bottom:20px
}
.fc-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:20px
}
.fc-form-error{
  margin-top:14px;
  color:var(--red);
  font-size:13px;
  font-weight:760
}
.fc-dialog .icon-button{
  font-size:24px;
  line-height:1
}
.table-card td .badge{
  vertical-align:middle
}

/* Settings and tab refinements */
.tab.active:after{
  width:100%;
  max-width:none
}
.settings-panels{
  min-width:0
}
.settings-panel[hidden]{
  display:none
}
.settings-panel{
  padding:24px 22px
}
.form-actions{
  display:flex;
  justify-content:flex-end
}
.logo-upload{
  display:grid;
  grid-template-columns:96px minmax(0, 1fr);
  align-items:center;
  gap:18px;
  padding:18px;
  border:1px solid #d9e3f1;
  border-radius:16px;
  background:#f8fbff
}

.logo-preview{
  width:84px;
  height:84px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#ffffff;
  color:#086ee8;
  font-size:18px;
  font-weight:900;
  overflow:hidden;
  border:1px solid #cfe0f7;
  box-shadow:0 10px 24px rgba(20, 35, 80, .06)
}

.logo-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:8px;
  background:#fff
}

.logo-upload-controls{
  display:grid;
  gap:10px;
  min-width:0
}

.file-upload-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}

.file-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid #bfd1e8;
  background:#fff;
  color:#0b132b;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(20, 35, 80, .05)
}

.file-upload-button:hover{
  border-color:var(--blue);
  color:var(--blue)
}

.file-name{
  min-width:0;
  color:#516179;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.logo-upload small{
  display:block;
  color:#64748b;
  font-size:13px;
  line-height:1.4
}
.settings-checks{
  display:grid;
  gap:12px;
  padding:16px;
  border:1px solid #e6edf6;
  border-radius:12px;
  background:#f8fbff
}
.settings-checks label{
  display:flex;
  align-items:center;
  gap:10px;
  color:#344054;
  font-size:14px;
  font-weight:680
}
.settings-checks input{
  width:17px;
  height:17px;
  accent-color:var(--blue)
}
.settings-list{
  display:grid;
  gap:12px
}
.integration-card{
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  background:var(--panel)
}
.integration-summary{
  margin-bottom:12px;
  padding:0;
  border:0
}
.integration-fields{
  margin-top:0
}
@media(max-width:980px){
  .logo-upload{
    grid-template-columns:1fr
  }
}

.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  border-radius:inherit;
  background:#fff
}
.logo-preview.small{
  width:64px;
  height:64px;
  border-radius:14px;
  font-size:15px;
  flex:0 0 64px
}
.brand-preview{
  border:1px solid #dfe8f4;
  border-radius:12px;
  background:#f8fbff;
  padding:18px;
  display:grid;
  gap:14px
}
.brand-preview-head{
  display:flex;
  align-items:center;
  gap:12px
}
.brand-preview-head strong{
  display:block;
  font-size:16px;
  font-weight:820;
  color:#0b132b
}
.brand-preview-head small{
  display:block;
  color:#64748b;
  font-size:13px;
  margin-top:3px
}
.brand-preview-bar{
  height:8px;
  border-radius:999px;
  background:var(--blue)
}
.brand-preview p{
  color:#40516f;
  font-size:14px;
  line-height:1.45
}
.fc-form-error.green{
  color:var(--green)
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.action-menu-button {
  min-width: 92px;
  justify-content: center;
}

.action-menu-dialog {
  max-width: 420px;
}

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

.action-menu-list .primary-button,
.action-menu-list .secondary-button {
  width: 100%;
  justify-content: flex-start;
}

.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
}

.corner-toast {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 4px;
  padding: 14px 16px 18px;
  border: 1px solid #cfe0f6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(9, 31, 68, .18);
  color: #0f172a;
  animation: toast-in .18s ease-out;
}

.corner-toast strong {
  font-size: 13px;
  font-weight: 850;
}

.corner-toast span {
  color: #516280;
  font-size: 13px;
  line-height: 1.35;
}

.corner-toast i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--green);
  transform-origin: left center;
  animation: toast-timer 3.6s linear forwards;
}

.corner-toast.error i {
  background: #ef233c;
}

.corner-toast.toast-hiding {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}

.quote-bin-note {
  margin: -8px 0 18px;
  padding: 12px 14px;
  border: 1px solid #d9e3f1;
  border-radius: 8px;
  background: #f8fbff;
  color: #516280;
  font-size: 14px;
  font-weight: 720;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.notification-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 16px 22px;
  border-top: 1px solid #e5ecf5;
  border-bottom: 1px solid #e5ecf5;
  background: #fbfdff;
}

.notification-filters label {
  display: grid;
  gap: 6px;
  min-width: 170px;
}

.notification-filters span {
  color: #516280;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.notification-filters select {
  min-height: 42px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  outline: none;
  padding: 0 38px 0 13px;
  font-size: 14px;
  font-weight: 720;
}

[data-notification-log-card] .empty-state {
  min-height: 260px;
  background: #f8fbff;
}

.secondary-button.compact {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

.primary-button.compact {
  min-height: 30px;
  min-width: 0;
  height: auto;
  padding: 6px 10px;
  font-size: 12px;
  box-shadow: 0 8px 16px rgba(35, 99, 255, .18);
}

.receipt-dialog {
  width: min(760px, 100%);
}

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

.receipt-brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.receipt-list {
  display: grid;
  gap: 14px;
}

.receipt-card {
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 18px;
}

.receipt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e2eaf5;
}

.receipt-card-head strong {
  color: #0b132b;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.03em;
}

.receipt-card-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

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

.receipt-detail {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.receipt-detail span {
  color: #516280;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.receipt-detail strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.receipt-empty {
  min-height: 120px;
}

@media(max-width:980px) {
  .receipt-card-head,
  .receipt-details {
    grid-template-columns: 1fr;
  }

  .receipt-card-head {
    align-items: flex-start;
  }
}

.settings-subform {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.billing-main-head {
  align-items: flex-start;
}

.billing-main-head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
}

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

.billing-summary-item,
.billing-plan-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
}

.billing-summary-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px;
}

.billing-summary-item span,
.billing-plan-head span,
.billing-plan-price span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.billing-summary-item > span {
  text-transform: uppercase;
  letter-spacing: .02em;
}

.billing-summary-item strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.billing-summary-item small {
  color: #40516f;
  font-size: 13px;
  font-weight: 680;
}

.billing-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  margin-top: 22px;
}

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

.billing-section-head h3 {
  font-size: 18px;
  line-height: 1;
  font-weight: 820;
}

.billing-table {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.billing-table table {
  min-width: 640px;
}

.billing-table tbody td {
  height: 52px;
}

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

.billing-plan-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

.billing-plan-card.current {
  border-color: rgba(18, 169, 109, .42);
  background: linear-gradient(180deg, rgba(223, 248, 236, .42), #fff 58%);
}

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

.billing-plan-head div {
  min-width: 0;
}

.billing-plan-head strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 840;
}

.billing-plan-head span {
  display: block;
  margin-top: 7px;
  line-height: 1.35;
}

.billing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.billing-plan-price strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  font-weight: 860;
}

.billing-plan-actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.billing-plan-empty {
  grid-column: 1 / -1;
}

.billing-message {
  margin-top: 16px;
}

@media(max-width:980px) {
  .billing-summary-grid,
  .billing-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:640px) {
  .billing-section-head,
  .billing-plan-head,
  .billing-plan-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-plan-actions .secondary-button,
  .billing-plan-actions .primary-button,
  .billing-section-head .secondary-button {
    width: 100%;
  }
}

.schedule-cell .event {
  display: grid;
  gap: 4px;
  min-height: 50px;
}

.schedule-cell .event strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-cell .event small {
  display: block;
  color: inherit;
  opacity: .78;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
}
.logout-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  font-size: 20px;
  margin-left: auto;
}

.modal-copy {
  color: #40516f;
  font-size: 14px;
  line-height: 1.45;
}

.modal-warning {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #ffd8ad;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a4a12;
  font-size: 13px;
  font-weight: 760;
  white-space: pre-line;
}

.fc-confirm-dialog {
  width: min(560px, 100%);
}
.job-detail-dialog {
  width: min(760px, 100%);
}

.admin-job-detail-dialog {
  width: min(900px, 100%);
}

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

.job-detail-item,
.job-notes {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #f8fbff;
}

.job-detail-item span,
.job-notes span {
  color: #516280;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.job-detail-item strong,
.job-notes p {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.job-notes {
  margin-bottom: 18px;
}

.booking-detail-dialog {
  width: min(880px, 100%);
}

.booking-detail-list {
  display: grid;
  margin-bottom: 18px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.booking-detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  padding: 13px 16px;
  border-bottom: 1px solid #e5ecf5;
}

.booking-detail-row:last-child {
  border-bottom: 0;
}

.booking-detail-row span {
  color: #516280;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.booking-detail-row strong,
.booking-detail-photos .row-actions {
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.booking-detail-photos .row-actions {
  gap: 8px;
}

.job-lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.job-evidence-section {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.job-evidence-section h4 {
  margin: 0;
  color: #0b132b;
  font-size: 16px;
  font-weight: 820;
}

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

.job-proof-photo,
.job-signature-preview {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #f8fbff;
}

.admin-job-detail-dialog .job-proof-photo {
  grid-template-columns: 92px minmax(0, 1fr);
}

.job-proof-photo img,
.job-signature-preview img {
  width: 92px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #d9e3f1;
  background: #fff;
}

.job-proof-photo strong,
.job-signature-preview strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 740;
  overflow-wrap: anywhere;
}

.job-proof-photo small,
.job-signature-preview small {
  color: #65799a;
  font-size: 12px;
  font-weight: 720;
}

.proof-preview-grid.has-proof-previews {
  width: 100%;
  min-height: 132px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  place-items: stretch;
  padding: 10px;
}

.proof-preview-item {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.proof-preview-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
}

.proof-preview-item span {
  color: #40516f;
  font-size: 11px;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-empty {
  min-height: 92px;
  padding: 16px;
}

.proof-category-section {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.proof-category-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #d7e4f5;
  border-radius: 12px;
  background: #f8fbff;
}

.proof-category-upload .proof-selected-preview {
  min-height: 128px;
}

.proof-category-upload .fc-form-actions,
.proof-category-upload .fc-form-error {
  justify-content: flex-start;
}

.proof-upload-controls {
  display: grid;
  gap: 8px;
}

.proof-upload-controls .file-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.proof-upload-controls .file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-caption-field {
  max-width: 100%;
}

.proof-upload-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid #d7e4f5;
  border-radius: 14px;
  background: #f8fbff;
}

.proof-selected-preview {
  min-height: 156px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px dashed #cfe0f5;
  border-radius: 12px;
  background: #fff;
  color: #65799a;
  text-align: center;
}

.proof-selected-preview.has-proof-previews {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  place-items: stretch;
  text-align: left;
}

.proof-preview-item {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.proof-preview-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
}

.proof-preview-item span {
  color: #40516f;
  font-size: 11px;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-preview-remove {
  width: 100%;
  border: 1px solid #d9e3f1;
  border-radius: 8px;
  background: #fff;
  color: #40516f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 820;
  padding: 6px 8px;
}

.proof-preview-remove:hover {
  border-color: #f0b4b4;
  color: #b42318;
}

.proof-thumb-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.proof-preview-dialog img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  object-position: center;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  background: #fff;
}

@media(max-width:720px) {
  .proof-upload-panel,
  .proof-category-upload {
    grid-template-columns: 1fr;
  }
}

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

.location-capture-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.signature-preview-box {
  min-height: 118px;
  width: 100%;
  border: 1px dashed #d7e4f5;
  border-radius: 14px;
  background: #f8fbff;
  color: #0b132b;
  display: grid;
  place-items: center;
  padding: 16px;
  cursor: pointer;
  text-align: center;
}

.signature-preview-box.has-signature {
  grid-template-columns: 160px minmax(0, 1fr);
  place-items: center start;
  gap: 14px;
  border-style: solid;
  background: #fff;
  text-align: left;
}

.signature-preview-box img {
  width: 160px;
  height: 78px;
  object-fit: contain;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
}

.signature-preview-box span,
.signature-preview-box strong {
  color: #0b132b;
  font-size: 15px;
  font-weight: 820;
}

.signature-preview-box small {
  color: #65799a;
  font-size: 12px;
  font-weight: 720;
}

.signature-signer-field {
  max-width: 420px;
}

.signature-preview-dialog img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  background: #fff;
}

.signature-capture-modal {
  z-index: 80;
}

.signature-capture-screen {
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 18px;
}

.signature-capture-screen canvas {
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: #fff;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  touch-action: none;
}

.signature-capture-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media(max-width:720px) {
  .signature-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .signature-preview-box.has-signature {
    grid-template-columns: 1fr;
    text-align: center;
    place-items: center;
  }

  .signature-capture-screen {
    padding: 10px;
  }
}

.job-note-form {
  padding-top: 2px;
  margin-bottom: 20px;
}

.job-activity-section h4 {
  margin: 0 0 12px;
  color: #0b132b;
  font-size: 16px;
  font-weight: 820;
}

.job-timeline {
  display: grid;
  gap: 12px;
}

.job-timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
}

.job-timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px #e8f3ff;
}

.job-timeline-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.job-timeline-item strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 820;
}

.job-timeline-item small {
  color: #65799a;
  font-size: 12px;
  font-weight: 720;
}

.job-timeline-item p {
  margin: 6px 0 0;
  color: #40516f;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.job-activity-empty {
  min-height: 120px;
}

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

  .booking-detail-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .job-proof-photo,
  .job-signature-preview {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .job-proof-photo .secondary-button,
  .job-signature-preview .secondary-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .job-proof-photo img,
  .job-signature-preview img {
    width: 72px;
    height: 56px;
  }

  .job-timeline-head {
    display: grid;
  }
}

.public-booking-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.public-booking {
  width: min(860px, 100%);
  padding: 20px;
}

.public-booking-card {
  display: grid;
  gap: 26px;
  padding: 30px;
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow);
}

.public-booking-brand {
  margin-bottom: 0;
}

.public-booking-card .form-grid {
  align-items: start;
}

.public-booking-card .field {
  min-width: 0;
}

.public-booking-card .field input,
.public-booking-card .field select,
.public-booking-card .field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.public-booking-card [data-booking-form] .field input,
.public-booking-card [data-booking-form] .field select {
  min-height: 68px;
}

.public-booking-card [data-booking-form] .field textarea {
  min-height: 150px;
}

.public-booking-card [data-booking-form] .evidence-upload {
  display: grid;
  gap: 14px;
  min-height: 150px;
  padding: 0;
  border: 0;
  background: transparent;
}

.public-booking-card [data-booking-form] .proof-selected-preview {
  min-height: 150px;
}

.public-booking-card [data-booking-form] .proof-selected-preview.has-booking-photo-previews {
  place-items: stretch;
  align-items: start;
}

.booking-photo-preview-item {
  position: relative;
}

.booking-photo-preview-item img {
  aspect-ratio: 4 / 3;
}

.booking-photo-remove {
  min-height: 32px;
  border: 1px solid #d9e3f1;
  border-radius: 8px;
  background: #fff;
  color: #31405a;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.booking-photo-remove:hover {
  border-color: #ef233c;
  color: #ef233c;
}

.public-booking-card [data-booking-form] .logo-upload-controls {
  gap: 8px;
}

.public-booking-card [data-booking-form] .file-upload-row {
  align-items: center;
}

.public-booking-card .fc-form-actions {
  margin-top: 0;
  justify-content: flex-start;
}

.public-booking-card [data-booking-form] > .fc-form-actions {
  grid-column: 1 / -1;
  padding-top: 8px;
}

.public-booking-card [data-tracking-form] > .fc-form-actions {
  grid-column: 1;
  justify-content: flex-start;
}

.public-booking-card [data-tracking-form] > .fc-form-error {
  grid-column: 1 / -1;
}

.booking-confirmation,
.booking-tracking-panel,
.tracking-result {
  border: 1px solid #dce7f7;
  border-radius: 8px;
  background: #f7fbff;
  padding: 18px;
}

.booking-confirmation,
.tracking-result {
  display: grid;
  gap: 8px;
}

.booking-confirmation strong,
.tracking-result strong {
  color: #071b3a;
  overflow-wrap: anywhere;
}

.booking-confirmation span,
.booking-confirmation small,
.tracking-result span,
.tracking-result p {
  color: #536b8d;
  margin: 0;
}

.tracking-result {
  margin-top: 18px;
  gap: 16px;
}

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

.tracking-detail {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #dce7f7;
  border-radius: 8px;
  background: #fff;
}

.tracking-detail span {
  color: #536b8d;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.tracking-detail strong {
  color: #071b3a;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tracking-next-step {
  margin: 0;
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  color: #536b8d;
  line-height: 1.45;
}


/* Client portal */
.client-auth-card { max-width: 720px; }

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(35, 99, 255, .08), rgba(18, 169, 109, .08)),
    #f4f7fb;
}

.auth-wrap {
  width: min(720px, 100%);
}

.auth-card {
  border-radius: 8px;
}

.auth-demo {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #dce7f7;
  border-radius: 8px;
  background: #f7fbff;
  color: #5d6f91;
  font-size: 13px;
}

.auth-demo strong {
  color: #071b3a;
}
.client-portal-page { min-height: 100vh; background: #f5f8fc; color: #071b3a; }
.client-shell { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.client-sidebar { background: #ffffff; border-right: 1px solid #dce7f7; padding: 28px 24px; display: flex; flex-direction: column; gap: 28px; }
.client-nav { display: grid; gap: 8px; }
.client-nav-item { border: 1px solid transparent; background: transparent; color: #1d3558; font: inherit; font-weight: 800; text-align: left; padding: 12px 14px; border-radius: 8px; cursor: pointer; }
.client-nav-item:hover, .client-nav-item.active { background: #eef5ff; border-color: #cfe0fb; color: #1258d8; }
.client-main { padding: 32px; display: grid; gap: 24px; align-content: start; }
.client-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.client-header h1 { margin: 0; font-size: 32px; }
.client-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 16px; margin-bottom: 20px; }
.client-stat-grid article { background: #ffffff; border: 1px solid #dce7f7; border-radius: 8px; padding: 18px; box-shadow: 0 12px 30px rgba(9, 31, 68, 0.06); }
.client-stat-grid span { display: block; color: #536b8d; font-weight: 700; }
.client-stat-grid strong { display: block; margin-top: 6px; font-size: 30px; color: #071b3a; }
.client-tab { display: grid; gap: 20px; }
.client-list { display: grid; gap: 10px; color: #536b8d; }
.client-request-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid #dce7f7; border-radius: 8px; background: #ffffff; }
.client-request-card div { display: grid; gap: 4px; min-width: 0; }
.client-request-card strong, .client-request-card span { overflow-wrap: anywhere; }
.status-pill { display: inline-flex; align-items: center; min-height: 28px; border-radius: 999px; padding: 4px 10px; background: #eef5ff; color: #1258d8; font-weight: 800; font-size: 12px; white-space: nowrap; }
.fc-form-error.is-success { color: #0c7a43; }
@media (max-width: 860px) {
.client-shell { grid-template-columns: 1fr; }
.client-sidebar { border-right: 0; border-bottom: 1px solid #dce7f7; }
.client-main { padding: 20px; }
.client-header { align-items: flex-start; flex-direction: column; }
.client-stat-grid { grid-template-columns: 1fr; }
}

.public-booking-top { display: flex; justify-content: flex-start; margin-bottom: 18px; }

.client-portal-page[data-active-client-tab=dashboard] .client-header { border-left: 5px solid #2363ff; padding-left: 18px; }
.client-portal-page[data-active-client-tab=requests] .client-header { border-left: 5px solid #12a96d; padding-left: 18px; }
.client-portal-page[data-active-client-tab=profile] .client-header { border-left: 5px solid #f59e0b; padding-left: 18px; }

/* client-section-redesign */
.client-nav-item { display: grid; gap: 2px; }
.client-nav-item span { font-weight: 900; }
.client-nav-item small { color: #6d7f9b; font-size: 12px; font-weight: 700; }
.client-nav-item.active small { color: #1258d8; }
[data-client-tab] { display: grid; gap: 20px; }
[data-client-tab][hidden] { display: none; }
.client-dashboard-grid { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr); gap: 20px; align-items: start; }
.client-focus-panel, .client-request-form-panel, .client-history-panel, .client-profile-summary, .client-profile-form-panel { background: #ffffff; border: 1px solid #dce7f7; border-radius: 8px; padding: 22px; box-shadow: 0 12px 30px rgba(9, 31, 68, 0.06); }
.client-focus-panel { min-height: 260px; background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%); display: grid; align-content: start; gap: 16px; }
.client-focus-panel p { color: #536b8d; line-height: 1.5; margin: 0; }
.client-requests-layout { display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(300px, 0.8fr); gap: 22px; align-items: start; }
.client-request-form-panel { border-top: 5px solid #12a96d; }
.client-history-panel { min-height: 520px; border-top: 5px solid #2363ff; }
.client-history-list { display: grid; gap: 12px; color: #536b8d; }
.client-profile-layout { display: grid; grid-template-columns: 280px minmax(420px, 1fr); gap: 22px; align-items: start; }
.client-profile-summary { border-top: 5px solid #f59e0b; text-align: center; display: grid; justify-items: center; gap: 12px; }
.client-avatar { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: #eef5ff; border: 1px solid #cfe0fb; color: #1258d8; font-size: 28px; font-weight: 900; }
.client-profile-summary h2 { margin: 0; font-size: 24px; }
.client-profile-summary p { margin: 0; color: #536b8d; overflow-wrap: anywhere; }
.client-profile-form-panel { border-top: 5px solid #f59e0b; }
@media (max-width: 980px) {
.client-dashboard-grid, .client-requests-layout, .client-profile-layout { grid-template-columns: 1fr; }
}

/* client-portal-final-tabs */
.client-dashboard-view { max-width: 980px; }
.client-dashboard-view > .panel { margin-top: 6px; }
.client-subtabs { display: inline-flex; width: fit-content; border: 1px solid #cfe0fb; border-radius: 8px; overflow: hidden; background: #ffffff; margin-bottom: 18px; }
.client-subtab { border: 0; background: #ffffff; color: #1d3558; font: inherit; font-weight: 900; padding: 12px 18px; cursor: pointer; }
.client-subtab.active { background: #2363ff; color: #ffffff; }
.client-requests-view { max-width: 980px; }
.client-request-form-panel, .client-history-panel { max-width: 980px; }
.client-profile-stack { display: grid; justify-items: center; gap: 22px; }
.client-profile-summary { width: min(100%, 420px); }
.client-profile-form-panel { width: min(100%, 900px); }
.client-password-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.client-modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(7, 27, 58, 0.45); overflow: auto; }
.client-modal-backdrop[hidden] { display: none; }
.client-modal { width: min(100%, 640px); max-height: calc(100vh - 48px); overflow: auto; background: #ffffff; border: 1px solid #dce7f7; border-radius: 8px; padding: 26px; box-shadow: 0 24px 70px rgba(9, 31, 68, 0.24); }
.client-modal .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.client-modal .panel-header h2 {
  margin: 0;
}

.client-modal .panel-header .icon-button {
  flex: 0 0 40px;
}

.client-modal .fc-form-actions {
  justify-content: flex-start;
}

.password-match-message {
  margin: -4px 0 0;
  color: #ef233c;
  font-size: 13px;
  font-weight: 760;
}

.password-match-message.is-success {
  color: var(--green);
}
.icon-button { width: 40px; height: 40px; border: 1px solid #dce7f7; border-radius: 8px; background: #ffffff; color: #1d3558; font-size: 24px; line-height: 1; cursor: pointer; }
@media (max-width: 760px) {
.client-password-actions { flex-direction: column; }
.client-password-actions .secondary-button { width: 100%; }
}

/* phase-6-client-portal */
.client-stat-grid-wide { grid-template-columns: repeat(4, minmax(150px, 1fr)); max-width: 980px; }
.client-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; max-width: 1180px; }
.client-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 980px; }
.client-section-head h2 { margin: 0; font-size: 24px; letter-spacing: 0; }
.client-action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-resource-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid #dce7f7; border-radius: 8px; background: #ffffff; box-shadow: 0 10px 24px rgba(9, 31, 68, 0.045); }
.client-resource-card > div:first-child { display: grid; gap: 5px; min-width: 0; }
.client-resource-card strong { color: #071b3a; overflow-wrap: anywhere; }
.client-resource-card span { color: #536b8d; overflow-wrap: anywhere; }
.client-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.status-pill.green { color: #0f8a5f; background: #dff8ec; }
.status-pill.red { color: #d01c35; background: #ffe4eb; }
.status-pill.gray { color: #64748b; background: #eef2f7; }
.client-empty { padding: 18px; border: 1px dashed #cfe0fb; border-radius: 8px; color: #536b8d; background: #f8fbff; }
.client-detail-stack { display: grid; gap: 16px; }
.client-detail-stack p { color: #536b8d; line-height: 1.5; }
.client-detail-stack h3 { margin: 4px 0 0; font-size: 16px; letter-spacing: 0; }
.client-detail-lines { display: grid; gap: 10px; }
.client-detail-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px; border: 1px solid #dce7f7; border-radius: 8px; background: #ffffff; }
.client-detail-lines span { color: #536b8d; font-weight: 800; }
.client-detail-lines strong { color: #071b3a; }
.client-detail-lines small { grid-column: 1 / -1; color: #536b8d; }
.client-total-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid #dce7f7; }
.client-total-row span { color: #536b8d; font-weight: 800; }
.client-total-row strong { font-size: 22px; }
.client-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.client-proof-grid figure { margin: 0; border: 1px solid #dce7f7; border-radius: 8px; overflow: hidden; background: #ffffff; }
.client-proof-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eef5ff; }
.client-proof-grid figcaption { padding: 9px 10px; color: #536b8d; font-size: 13px; font-weight: 700; }
.client-safe-summary { color: #536b8d; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.client-check { display: flex; align-items: center; gap: 10px; color: #1d3558; font-weight: 800; }
@media (max-width: 900px) {
  .client-stat-grid-wide, .client-grid-two { grid-template-columns: 1fr; }
  .client-resource-card { align-items: flex-start; flex-direction: column; }
  .client-card-actions { justify-content: flex-start; }
}

.report-filters {
  align-items: end;
}

.report-section {
  display: grid;
  gap: 1rem;
}

.report-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.report-metric-card {
  min-height: 130px;
}

.report-grid {
  display: grid;
  gap: 1rem;
}

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

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

.report-insight-card {
  min-width: 0;
}

.report-chart {
  min-height: 260px;
  display: grid;
  gap: 0.9rem;
  align-content: center;
}

.report-chart svg {
  width: 100%;
  min-height: 220px;
  overflow: visible;
}

.report-chart polyline {
  fill: none;
  stroke: var(--primary, #1d65bc);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.report-chart circle {
  fill: var(--primary, #1d65bc);
}

.report-chart-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted, #607085);
  font-size: 0.85rem;
}

.report-bar-chart {
  align-content: start;
}

.report-bar-row {
  display: grid;
  grid-template-columns: minmax(100px, 1.2fr) minmax(140px, 3fr) minmax(70px, auto);
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.report-bar-track {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(29, 101, 188, 0.12);
  overflow: hidden;
}

.report-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary, #1d65bc);
}

.report-pie-chart {
  grid-template-columns: minmax(160px, 0.8fr) minmax(180px, 1fr);
  align-items: center;
}

.report-pie-chart svg {
  min-height: 190px;
  transform: rotate(-90deg);
}

.report-pie-bg {
  fill: transparent;
  stroke: rgba(29, 101, 188, 0.12);
  stroke-width: 8;
}

.report-pie-slice {
  fill: transparent !important;
  stroke-width: 8;
}

.segment-0 { stroke: #1d65bc; background: #1d65bc; }
.segment-1 { stroke: #26a69a; background: #26a69a; }
.segment-2 { stroke: #f59e0b; background: #f59e0b; }
.segment-3 { stroke: #7c3aed; background: #7c3aed; }
.segment-4 { stroke: #ef4444; background: #ef4444; }
.segment-5 { stroke: #64748b; background: #64748b; }

.report-legend {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.report-legend li {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}

.report-legend i {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
}

.report-table-panel,
.report-table-scroll {
  width: 100%;
  overflow-x: auto;
}

@media (max-width: 980px) {
  .report-kpi-row,
  .report-grid.two,
  .report-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .report-kpi-row,
  .report-grid.two,
  .report-grid.three,
  .report-pie-chart {
    grid-template-columns: 1fr;
  }



  .report-bar-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* REPORTS: safer responsive layout */

.report-section,
.report-kpi-row,
.report-grid,
.report-chart,
.report-table-panel,
.report-insight-card,
.report-switcher,
.report-filters,
.report-filters-grid {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.report-switcher {
  margin: 16px 0 18px;
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-switcher-label {
  font-size: 12px;
  font-weight: 700;
  color: #23395d;
}

.report-switcher-select {
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font: inherit;
}

.report-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.report-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.report-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.report-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.report-chart,
.report-table-panel,
.report-insight-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.report-chart {
  min-height: 260px;
}

.report-chart svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.report-table-panel {
  overflow-x: auto;
}

.report-table-panel table {
  width: 100%;
  border-collapse: collapse;
}

.report-bar-row,
.report-line-row,
.report-pie-row {
  min-width: 0;
  max-width: 100%;
}

.report-bar-label,
.report-bar-value,
.report-chart-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .report-filters-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .report-grid.two,
  .report-grid.three,
  .report-kpi-row {
    grid-template-columns: 1fr;
  }

  .report-chart,
  .report-table-panel,
  .report-insight-card {
    min-width: 0;
  }

  .report-switcher {
    width: 100%;
  }
}

/* REPORTS: responsive dropdown and contained overflow */
body[data-page="reports"],
body[data-page="reports"] .page,
body[data-page="reports"] [data-reports-root],
body[data-page="reports"] .hero-row,
body[data-page="reports"] .panel,
body[data-page="reports"] .report-section,
body[data-page="reports"] .report-kpi-row,
body[data-page="reports"] .report-grid,
body[data-page="reports"] .report-chart,
body[data-page="reports"] .report-table-panel,
body[data-page="reports"] .report-insight-card,
body[data-page="reports"] .report-switcher,
body[data-page="reports"] .report-filters {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

body[data-page="reports"] .report-filters {
  width: 100%;
  overflow: hidden;
}

body[data-page="reports"] .report-filters .field,
body[data-page="reports"] .report-filters .form-actions,
body[data-page="reports"] .report-filters .fc-form-error {
  min-width: 0;
  max-width: 100%;
}

body[data-page="reports"] .report-filters .field input,
body[data-page="reports"] .report-filters .field select,
body[data-page="reports"] .report-filters .field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-page="reports"] .report-filters .form-actions {
  display: flex;
  flex-wrap: wrap;
}

body[data-page="reports"] .report-filters .form-actions > * {
  max-width: 100%;
}

body[data-page="reports"] .report-filters .secondary-button,
body[data-page="reports"] .report-filters .primary-button {
  white-space: normal;
}

body[data-page="reports"] {
  overflow-x: hidden;
}

body[data-page="reports"] .report-switcher {
  display: grid;
  gap: 8px;
  width: min(360px, 100%);
  margin: 16px 0 18px;
}

body[data-page="reports"] .report-switcher label {
  color: #23395d;
  font-size: 12px;
  font-weight: 800;
}

body[data-page="reports"] .report-switcher select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  background: #ffffff;
  color: #071b3a;
  padding: 0 12px;
  font: inherit;
  font-weight: 700;
}

body[data-page="reports"] .report-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

body[data-page="reports"] .report-grid {
  display: grid;
  gap: 16px;
}

body[data-page="reports"] .report-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

body[data-page="reports"] .report-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body[data-page="reports"] .report-chart,
body[data-page="reports"] .report-table-panel,
body[data-page="reports"] .report-insight-card {
  width: 100%;
  overflow: hidden;
}

body[data-page="reports"] .report-chart {
  min-height: 260px;
}

body[data-page="reports"] .report-chart svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

body[data-page="reports"] .report-table-panel,
body[data-page="reports"] .report-table-scroll {
  width: 100%;
  overflow-x: auto;
}

body[data-page="reports"] .report-table-panel table,
body[data-page="reports"] .report-table-scroll table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

body[data-page="reports"] .report-bar-row,
body[data-page="reports"] .report-line-row,
body[data-page="reports"] .report-pie-row {
  min-width: 0;
  max-width: 100%;
}

body[data-page="reports"] .report-bar-label,
body[data-page="reports"] .report-bar-value,
body[data-page="reports"] .report-chart-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  body[data-page="reports"] .report-filters {
    grid-template-columns: 1fr;
  }

  body[data-page="reports"] .report-filters .span-2,
  body[data-page="reports"] .report-filters .form-actions,
  body[data-page="reports"] .report-filters .fc-form-error {
    grid-column: auto;
  }

  body[data-page="reports"] .report-grid.two,
  body[data-page="reports"] .report-grid.three,
  body[data-page="reports"] .report-kpi-row {
    grid-template-columns: 1fr;
  }

  body[data-page="reports"] .report-switcher {
    width: 100%;
  }
}

@media (max-width: 640px) {
  body[data-page="reports"] .report-table-panel table,
  body[data-page="reports"] .report-table-scroll table {
    min-width: 620px;
  }
}

/* Real worker map */
.map-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.real-map-canvas {
  padding: 0;
  background: #e7f0ff;
}

.leaflet-worker-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 650px;
}

.real-map-canvas .zero-map {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 251, 255, .78), rgba(231, 240, 255, .72));
  backdrop-filter: blur(2px);
}


.map-scroll-hint {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 7px 10px;
  color: #536b8d;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(20, 35, 80, .08);
  font-size: 11px;
  font-weight: 820;
}

.map-error {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  border: 1px solid rgba(239, 35, 60, .2);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--red);
  background: rgba(255, 228, 235, .96);
  box-shadow: var(--soft-shadow);
}

.map-error strong,
.map-error span {
  display: block;
}

.map-error span {
  margin-top: 4px;
  color: #9f1239;
  font-size: 13px;
}

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

.live-workers-panel .panel-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.worker-map-summary {
  display: grid;
  gap: 10px;
}

.compact-empty-state {
  min-height: 220px;
}

.worker-location-card {
  width: 100%;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  color: inherit;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 35, 80, .045);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.worker-location-card:hover {
  transform: translateY(-1px);
  border-color: rgba(35, 99, 255, .32);
  box-shadow: 0 16px 30px rgba(20, 35, 80, .08);
}

.worker-location-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 5px rgba(148, 163, 184, .14);
}

.worker-location-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(18, 169, 109, .14);
}

.worker-location-dot.recent {
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(249, 115, 22, .14);
}

.worker-location-dot.offline {
  background: #94a3b8;
}

.worker-location-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.worker-location-main strong,
.worker-location-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker-location-main strong {
  font-size: 14px;
}

.worker-location-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
}

.worker-location-time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.worker-marker {
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .28);
}

.worker-marker span {
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--blue);
}

.worker-marker-online {
  border-color: var(--green);
}

.worker-marker-online span {
  background: var(--green);
}

.worker-marker-recent {
  border-color: var(--orange);
}

.worker-marker-recent span {
  background: var(--orange);
}

.worker-marker-offline {
  border-color: #94a3b8;
}

.worker-marker-offline span {
  background: #94a3b8;
}

.worker-popup {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.worker-popup strong {
  color: #0b132b;
  font-size: 14px;
}

.worker-popup span {
  color: #536b8d;
  font-size: 12px;
}

@media (max-width: 980px) {
  .map-actions {
    justify-content: flex-start;
  }

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

  .leaflet-worker-map,
  .real-map-canvas {
    min-height: 520px;
  }
}

/* UX stabilization patch: readable forms, searchable pages, responsive maps, and safe truncation */
.nav-group {
  display: grid;
  gap: 6px;
}

.nav-group-title {
  list-style: none;
  color: #6b7b95;
  cursor: pointer;
  font-size: 11px;
  font-weight: 860;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px 2px;
}

.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-links { display: grid; gap: 7px; }
.nav-group:not([open]) .nav-group-links { display: none; }

.global-search-shell,
.page-search-shell,
.market-switcher {
  width: 100%;
}

.global-search-shell {
  position: relative;
  display: grid;
  gap: 6px;
  margin: -18px 0 18px;
}

.global-search-shell label,
.market-switcher span {
  color: #61728f;
  font-size: 11px;
  font-weight: 860;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.global-search-shell input,
.page-search-shell input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  padding: 0 13px;
  background: #fff;
  color: #0b132b;
  outline: none;
}

.global-search-shell input:focus,
.page-search-shell input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
form input:focus,
form select:focus,
form textarea:focus {
  border-color: rgba(35, 99, 255, .55);
  box-shadow: 0 0 0 4px rgba(35, 99, 255, .10);
}

.global-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  gap: 4px;
  max-height: 340px;
  overflow: auto;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

.search-result {
  display: grid;
  gap: 2px;
  border-radius: 10px;
  padding: 10px;
  color: #0b132b;
}

.search-result:hover { background: #f3f7ff; }
.search-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.search-result span { color: #64748b; font-size: 11px; font-weight: 760; }
.search-result.muted { color: #64748b; font-size: 13px; }

.page-search-shell {
  margin-bottom: 18px;
}

.market-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 8px 0 16px;
}

.market-switcher span { grid-column: 1 / -1; }
.market-switcher button {
  height: 36px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
  color: #42516c;
  font-size: 12px;
  font-weight: 820;
}
.market-switcher button.active {
  border-color: rgba(35, 99, 255, .35);
  color: #0b5ce9;
  background: #eaf2ff;
}

.grid.two-column,
.grid.two,
.grid.cards,
.grid.three,
.compact-guide-grid {
  display: grid;
  gap: 20px;
}
.grid.two-column,
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three,
.compact-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

.field,
.form-grid label,
.grid-form label,
.inline-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #30415f;
  font-size: 13px;
  font-weight: 780;
}

.field input,
.field select,
.field textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.grid-form input,
.grid-form select,
.grid-form textarea,
.inline-form input,
.inline-form select,
.inline-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: #0b132b;
  outline: none;
}

.field textarea,
.form-grid textarea,
.grid-form textarea {
  min-height: 92px;
  padding: 10px 12px;
  resize: vertical;
}

.form-grid .settings-checks label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-grid .settings-checks input[type="checkbox"] {
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  padding: 0;
  border-radius: 4px;
  flex: 0 0 17px;
}

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.auth-card:has(.signup-step) { width:min(760px, 100%); }
.signup-step { display:grid; gap:20px; }
.signup-step[hidden] { display:none; }
.signup-step .panel-head { padding:0 0 18px; margin:0; }
.signup-progress { display:flex; align-items:center; justify-content:center; margin:0 auto 8px; width:min(280px, 100%); }
.signup-progress span { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#e7eef9; color:#64748b; font-weight:850; transition:.18s ease; }
.signup-progress span.active { color:#fff; background:var(--blue); box-shadow:0 7px 18px rgba(35,99,255,.25); }
.signup-progress i { height:3px; flex:1; background:#dce6f4; }
.field small { color:#71819b; }

.billing-page { min-height:100vh; background:radial-gradient(circle at top, #eaf2ff 0, #f7f9fd 42%, #eef3fa 100%); }
.billing-page-shell { width:min(1240px, calc(100% - 32px)); margin:0 auto; padding:28px 0 64px; }
.billing-brand { width:max-content; margin-bottom:46px; }
.pricing-hero { max-width:720px; margin:0 auto 24px; text-align:center; }
.pricing-hero h1 { font-size:clamp(34px, 5vw, 54px); line-height:1.02; letter-spacing:-.06em; margin:8px 0 14px; }
.pricing-hero p { color:#5d6f8c; font-size:17px; line-height:1.55; }
.billing-toggle { display:flex; width:max-content; max-width:100%; margin:24px auto 34px; padding:5px; border:1px solid #d9e4f2; border-radius:12px; background:#fff; box-shadow:0 8px 22px rgba(15,23,42,.06); }
.billing-toggle button { border:0; border-radius:8px; padding:11px 18px; background:transparent; color:#536581; font-weight:820; cursor:pointer; }
.billing-toggle button.active { color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue2)); box-shadow:0 6px 15px rgba(35,99,255,.22); }
.billing-toggle button span { margin-left:5px; font-size:11px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.pricing-card { position:relative; display:flex; flex-direction:column; min-height:520px; padding:26px; border:1px solid #dbe5f2; border-radius:17px; background:#fff; box-shadow:0 15px 42px rgba(15,23,42,.07); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pricing-card:hover { transform:translateY(-5px); border-color:#aac5ff; box-shadow:0 22px 48px rgba(35,99,255,.13); }
.pricing-card.recommended { border:2px solid var(--blue); }
.pricing-card.current { background:#fbfdff; }
.pricing-ribbon { position:absolute; top:-15px; left:50%; transform:translateX(-50%); padding:7px 13px; border-radius:999px; background:var(--blue); color:#fff; font-size:11px; font-weight:850; white-space:nowrap; }
.pricing-card-head { min-height:126px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pricing-card h2 { font-size:26px; letter-spacing:-.04em; margin-bottom:9px; }
.pricing-card p { color:#64748b; line-height:1.45; }
.pricing-price { display:grid; min-height:105px; align-content:start; gap:5px; padding:20px 0; border-top:1px solid #edf1f7; border-bottom:1px solid #edf1f7; }
.pricing-price strong { font-size:24px; letter-spacing:-.035em; }
.pricing-price span { color:#64748b; }
.pricing-price em { color:#0a9465; font-style:normal; font-size:13px; font-weight:800; }
.pricing-card ul { display:grid; gap:10px; margin:22px 0 26px; padding:0; list-style:none; color:#34445f; }
.pricing-card li::before { content:'✓'; margin-right:9px; color:#0da06e; font-weight:900; }
.pricing-card > button { width:100%; margin-top:auto; }
.current-subscription { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:22px; overflow:hidden; border:1px solid #dce6f3; border-radius:14px; background:#dce6f3; }
.current-subscription > div { display:grid; gap:6px; padding:20px; background:#fff; }
.current-subscription span { color:#687995; font-size:12px; font-weight:800; text-transform:uppercase; }
.current-subscription strong { font-size:19px; }
.billing-confirm-dialog { max-width:560px; }
.billing-confirm-dialog > p { color:#536581; line-height:1.55; }
.billing-confirm-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }
.billing-confirm-summary div { display:grid; gap:5px; padding:16px; border:1px solid #e0e8f3; border-radius:11px; background:#f8fbff; }
.billing-confirm-summary dt { color:#64748b; font-size:12px; font-weight:800; text-transform:uppercase; }
.billing-confirm-summary dd { margin:0; color:#12203a; font-size:18px; font-weight:850; }
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}.pricing-card{min-height:0}.current-subscription{grid-template-columns:1fr}.billing-confirm-summary{grid-template-columns:1fr}}

.content-account-bar { display:flex; align-items:center; justify-content:flex-end; min-height:48px; margin-bottom:8px; }
.content-account-bar .menu-toggle { margin-right:auto; }
.account-menu { position:relative; z-index:30; }
.account-trigger { display:flex; align-items:center; gap:10px; min-width:210px; padding:7px 10px 7px 7px; border:1px solid #dbe5f2; border-radius:12px; background:#fff; color:#14213b; cursor:pointer; box-shadow:0 7px 20px rgba(15,23,42,.06); transition:.16s ease; }
.account-trigger:hover,.account-trigger[aria-expanded="true"] { border-color:#b8cdf8; box-shadow:0 10px 24px rgba(35,99,255,.12); transform:translateY(-1px); }
.account-avatar { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue2)); font-size:12px; font-weight:900; }
.account-trigger-copy { display:grid; min-width:0; text-align:left; }
.account-trigger-copy strong,.account-trigger-copy small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.account-trigger-copy strong { font-size:13px; }
.account-trigger-copy small { color:#71809a; font-size:11px; margin-top:2px; }
.account-chevron { margin-left:auto; color:#71809a; font-weight:900; }
.account-dropdown { position:absolute; top:calc(100% + 9px); right:0; width:260px; padding:7px; border:1px solid #dce5f1; border-radius:13px; background:#fff; box-shadow:0 20px 45px rgba(15,23,42,.16); }
.account-dropdown[hidden] { display:none; }
.account-dropdown a,.account-dropdown button { width:100%; display:flex; align-items:center; min-height:40px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:#243651; font:inherit; font-size:13px; font-weight:760; text-align:left; cursor:pointer; }
.account-dropdown a:hover,.account-dropdown a:focus-visible,.account-dropdown button:hover,.account-dropdown button:focus-visible { background:#edf4ff; color:var(--blue); outline:none; }
.account-dropdown-label { display:block; padding:7px 12px 5px; color:#71809a; font-size:10px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.account-company-list { padding-bottom:6px; margin-bottom:5px; border-bottom:1px solid #edf1f6; }
.account-company-list[hidden] { display:none; }
.account-company-list button,.account-current-company { justify-content:space-between; gap:12px; }
.account-company-list button span,.account-current-company span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-current-company { width:100%; min-height:40px; display:flex; align-items:center; padding:0 12px; border-radius:8px; background:#f3f7fd; color:#243651; font-size:13px; font-weight:760; }
.account-current-company small { flex:0 0 auto; color:#2f9b68; font-size:10px; font-weight:850; text-transform:uppercase; }
.account-company-list button:disabled { opacity:.65; cursor:wait; }
.account-dropdown button[data-logout] { margin-top:5px; border-top:1px solid #edf1f6; border-radius:0 0 8px 8px; color:#c7344a; }
@media(max-width:720px){.account-trigger{min-width:0}.account-trigger-copy{display:none}.content-account-bar{position:relative}.account-dropdown{position:fixed;top:70px;right:16px}}

.workspace-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.workspace-card { display:grid; gap:14px; padding:18px; border:1px solid #dfe7f2; border-radius:14px; background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.05); }
.workspace-card.is-active { border-color:#9bbafc; box-shadow:0 12px 30px rgba(35,99,255,.12); }
.workspace-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.workspace-card-head h3 { margin:0 0 4px; }
.workspace-card-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.workspace-card-meta div { padding:10px; border-radius:9px; background:#f6f9fd; }
.workspace-card-meta strong,.workspace-card-meta span { display:block; }
.workspace-card-meta strong { color:#71809a; font-size:10px; text-transform:uppercase; }
.workspace-card-meta span { margin-top:3px; color:#1c2c47; font-weight:760; }
@media(max-width:800px){.workspace-card-grid{grid-template-columns:1fr}.workspace-card-meta{grid-template-columns:1fr 1fr}}

.role-template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:18px; }
.role-template-card { display:flex; min-height:150px; flex-direction:column; justify-content:space-between; gap:16px; }
.role-template-card > div { display:grid; gap:7px; }
.role-template-card strong { font-size:16px; }
.role-template-card span,.role-template-card small { color:#657691; line-height:1.4; }
.role-library-section { grid-column:1 / -1; display:grid; gap:14px; min-width:0; }
.role-library-section + .role-library-section { border-top:1px solid #e4ecf7; padding-top:22px; }
.role-library-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.role-library-heading h4 { margin:4px 0 0; font-size:19px; }
.role-library-heading p { max-width:760px; margin:7px 0 0; color:#657691; line-height:1.5; }
.role-library-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; min-width:0; }
.role-library-card-grid > .empty-state { grid-column:1 / -1; }
.role-template-heading { display:flex !important; align-items:flex-start; justify-content:space-between; gap:12px; }
.role-template-heading > div { display:grid; gap:5px; min-width:0; }
.role-template-kind { color:#1d65bc !important; font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.role-info-button { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border:1px solid #cbd9eb; border-radius:999px; background:#fff; color:#1d65bc; font:800 14px/1 Georgia,serif; cursor:pointer; }
.role-info-button:hover { border-color:#1d65bc; background:#f3f8ff; }
.role-info-summary { display:grid; gap:20px; padding-top:4px; }
.role-info-description { margin:0; color:#44556f; font-size:15px; line-height:1.6; }
.role-info-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.role-info-facts > div { display:grid; gap:5px; padding:14px; border:1px solid #e1e9f4; border-radius:12px; background:#f8fbff; }
.role-info-facts dt { color:#6b7b92; font-size:11px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.role-info-facts dd { margin:0; color:#1e2e46; line-height:1.45; }
.role-info-summary section { display:grid; gap:10px; }
.role-info-summary section h3 { margin:0; font-size:15px; }
.role-info-summary ul { display:grid; gap:8px; margin:0; padding-left:20px; color:#44556f; }
.role-permission-preview { display:flex; flex-wrap:wrap; gap:8px; }
.role-permission-extra[hidden] { display:none; }
.role-permission-toggle { border:0; font:inherit; cursor:pointer; }
.role-permission-toggle:hover { background:#dfe8f5; color:#243651; }
.role-permission-toggle:focus-visible { outline:2px solid #8fb4ea; outline-offset:2px; }
.member-dialog { width:min(900px,100%); }
.permission-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-height:360px; overflow:auto; padding:4px; }
.permission-group { display:grid; align-content:start; gap:8px; margin:0; padding:14px; border:1px solid #dfe7f2; border-radius:11px; }
.permission-group legend { width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 4px; color:#1d2d49; font-weight:850; }
.permission-group legend button { border:0; background:transparent; color:var(--blue); font-size:11px; font-weight:800; cursor:pointer; }
.permission-group label { display:flex; align-items:center; gap:8px; color:#435571; font-size:12px; }
.permission-group input { width:16px!important; min-width:16px!important; height:16px!important; min-height:16px!important; }
.row-actions { display:flex; gap:7px; }
@media(max-width:900px){.role-template-grid,.permission-editor{grid-template-columns:1fr}}

.muted { color: #64748b; line-height: 1.45; }
.eyebrow { color: #2363ff; font-size: 12px; font-weight: 880; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; }
.compact-empty { min-height: 150px; }

.table-wrap,
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.table-scroll table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.table-wrap th,
.table-wrap td,
.table-scroll th,
.table-scroll td,
.data-table th,
.data-table td {
  padding: 15px 14px;
  border-bottom: 1px solid #dbe5f2;
  text-align: left;
  vertical-align: middle;
  min-width: 0;
}

.table-wrap th,
.table-scroll th,
.data-table th {
  color: #40516f;
  font-size: 12px;
  font-weight: 860;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.table-wrap td,
.table-scroll td,
.data-table td,
.badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 9px;
  padding: 0 12px;
}

.primary-button,
.secondary-button,
.icon-button,
.button,
.nav-link,
.file-upload-button,
.settings-tab {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.primary-button:hover,
.secondary-button:hover,
.icon-button:hover,
.button:hover,
.file-upload-button:hover {
  transform: translateY(-1px);
  border-color: rgba(35, 99, 255, .35);
  box-shadow: 0 16px 28px rgba(35, 99, 255, .12);
}
.nav-link:hover,
.settings-tab:hover {
  background: #edf4ff;
  color: #0b5ce9;
}
.secondary-button.danger,
.button.danger { color: #c01830; border-color: rgba(239, 35, 60, .24); }

.real-map-layout {
  grid-template-columns: minmax(0, 1fr) 380px;
}
.map-expanded .real-map-layout {
  position: fixed;
  inset: 18px;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: rgba(248, 251, 255, .98);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
}
.map-expanded .real-map-canvas,
.map-expanded .leaflet-worker-map {
  min-height: calc(100vh - 74px);
}
.map-expanded .app-shell { overflow: visible; }
.map-expanded { overflow: hidden; }

body[data-market="SA"] [data-zimbabwe-only],
body[data-market="ZW"] [data-south-africa-only] {
  display: none !important;
}

@media(max-width:1180px){
  .grid.two-column,
  .grid.two,
  .grid.three,
  .grid.cards,
  .compact-guide-grid,
  .real-map-layout,
  .map-expanded .real-map-layout {
    grid-template-columns: 1fr;
  }
  .form-grid,
  .grid-form,
  .compact-form {
    grid-template-columns: 1fr;
  }
  .span-2 { grid-column: auto; }
  .map-expanded .real-map-layout { inset: 8px; overflow: auto; }
  .map-expanded .real-map-canvas,
  .map-expanded .leaflet-worker-map { min-height: 72vh; }
}

@media(max-width:720px){
  .table-wrap table,
  .table-scroll table,
  .data-table { min-width: 760px; }
  .hero-copy h2 { font-size: 32px; }
}

/* Admin UI polish: sidebar fit, real dropdown searches, table truncation, and clearer security copy */
.app-shell {
  grid-template-columns: 278px minmax(0, 1fr);
}

.sidebar {
  padding-inline: 20px;
  overflow-x: hidden;
}

.brand {
  gap: 12px;
  margin-bottom: 30px;
  min-width: 0;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 14px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-name {
  min-width: 0;
  max-width: 165px;
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.global-search-shell {
  margin: -10px 0 16px;
}

.global-search-results[hidden],
.page-search-results[hidden] {
  display: none !important;
}

.global-search-results,
.page-search-results {
  min-width: 260px;
}

.search-result {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.search-result:focus-visible {
  outline: 3px solid rgba(35, 99, 255, .16);
}

.nav-group-title:focus,
.nav-group-title:focus-visible {
  outline: none;
  color: #0b5ce9;
}

.nav-group-title:focus-visible {
  background: #edf4ff;
  border-radius: 10px;
}

.nav {
  gap: 10px;
}

.nav-group-links {
  gap: 4px;
}

.nav-link {
  min-width: 0;
  height: 42px;
  font-size: 14px;
}

.market-switcher {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e1e8f3;
}

.market-switcher-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.market-switcher-head small {
  color: #93a3ba;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.market-switcher button {
  min-width: 0;
  padding-inline: 8px;
}

.content {
  padding-top: 44px;
}

.page-search-shell {
  position: relative;
  width: min(430px, 100%);
  margin: 0;
}

.page-search-shell input {
  min-height: 44px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

.section-search-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 70px;
  padding: 13px 0 14px;
  border-bottom: 1px solid #dbe5f2;
  margin-bottom: 28px;
}

.page-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  z-index: 40;
  width: min(430px, calc(100vw - 48px));
  display: grid;
  gap: 4px;
  max-height: 310px;
  overflow: auto;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

.section-search-highlight {
  animation: revengineSearchPulse 1.4s ease;
}

@keyframes revengineSearchPulse {
  0%, 100% { background: transparent; }
  18%, 70% { background: rgba(35, 99, 255, .10); }
}

.table-card table,
.table-scroll table,
.table-wrap table,
.data-table {
  table-layout: fixed;
}

.badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 27px;
}

body[data-page="jobs"] .table-scroll table {
  table-layout: fixed;
  min-width: 1080px;
}

body[data-page="jobs"] .table-scroll th:nth-child(1),
body[data-page="jobs"] .table-scroll td:nth-child(1) { width: 13%; }
body[data-page="jobs"] .table-scroll th:nth-child(2),
body[data-page="jobs"] .table-scroll td:nth-child(2) { width: 13%; }
body[data-page="jobs"] .table-scroll th:nth-child(3),
body[data-page="jobs"] .table-scroll td:nth-child(3) { width: 13%; }
body[data-page="jobs"] .table-scroll th:nth-child(4),
body[data-page="jobs"] .table-scroll td:nth-child(4) { width: 12%; }
body[data-page="jobs"] .table-scroll th:nth-child(5),
body[data-page="jobs"] .table-scroll td:nth-child(5) { width: 14%; }
body[data-page="jobs"] .table-scroll th:nth-child(6),
body[data-page="jobs"] .table-scroll td:nth-child(6) { width: 7%; }
body[data-page="jobs"] .table-scroll th:nth-child(7),
body[data-page="jobs"] .table-scroll td:nth-child(7) { width: 12%; }
body[data-page="jobs"] .table-scroll th:nth-child(8),
body[data-page="jobs"] .table-scroll td:nth-child(8) { width: 8%; }
body[data-page="jobs"] .table-scroll th:nth-child(9),
body[data-page="jobs"] .table-scroll td:nth-child(9) { width: 12%; }

.security-guide {
  margin-bottom: 22px;
}

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

.session-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #f8fbff;
}

.session-card strong,
.session-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.session-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 720;
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .section-search-row { min-height: auto; }
  .security-guide .compact-guide-grid { grid-template-columns: 1fr; }
}

.mini-card {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.mini-card strong {
  color: #0b132b;
  font-size: 15px;
  font-weight: 860;
}

.mini-card span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}


/* Search and billing refinement */
.api-status[hidden] {
  display: none !important;
}

.search-result strong {
  display: block;
}

.page-search-results .search-result {
  min-height: 44px;
  align-items: center;
}

.page-search-results .search-result span {
  display: none;
}

.section-search-highlight {
  scroll-margin-block: 120px;
}

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

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

.billing-upgrade-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fff;
}


.billing-plan-note {
  display: block;
  margin: -0.25rem 0 0.85rem;
  color: var(--muted);
  font-weight: 700;
}

.billing-benefit-list {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  color: #30415f;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
}

.billing-benefit-list li::marker {
  color: var(--blue);
}

@media(max-width:980px) {
  .billing-essential-grid,
  .billing-upgrade-grid {
    grid-template-columns: 1fr;
  }
}

.finance-user-form .form-section-title span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}


.payment-method-option[hidden],
.payment-method-heading[hidden] {
  display: none !important;
}

.payment-method-heading {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}

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

.payment-method-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.payment-method-option:hover {
  border-color: #a9c5ff;
  box-shadow: 0 12px 28px rgba(35,99,255,.08);
  transform: translateY(-1px);
}

.payment-method-option input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--blue);
}

.payment-method-option strong,
.accounting-provider-row strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 820;
}

.payment-method-option small,
.accounting-provider-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.toggle-field .switch-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 14px;
  background: #fff;
  cursor: pointer;
}

.toggle-field input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-control {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d9e3f1;
  position: relative;
  transition: background .18s ease;
}

.switch-control::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.18);
  transition: transform .18s ease;
}

.toggle-field input[type="checkbox"]:checked + .switch-control {
  background: var(--blue);
}

.toggle-field input[type="checkbox"]:checked + .switch-control::after {
  transform: translateX(18px);
}

.switch-copy {
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
}

.toggle-help {
  display: block;
  margin-top: 5px;
}

@media(max-width: 860px) {
  .payment-method-picker {
    grid-template-columns: 1fr;
  }
}

.client-payment-panel {
  border: 1px solid #dce7f7;
  border-radius: 18px;
  padding: 16px;
  background: #f8fbff;
  display: grid;
  gap: 12px;
}
.client-payment-panel p {
  margin: 0;
}
.client-payment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #dce7f7;
  border-radius: 14px;
  padding: 14px;
  background: #ffffff;
}
.client-payment-option.primary {
  border-color: #b8d2ff;
  box-shadow: 0 14px 38px rgba(37, 99, 235, 0.08);
}
.client-payment-option strong,
.client-payment-option small {
  display: block;
}
.client-payment-option small {
  color: #536b8d;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .client-payment-option {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Security page simplification: keep customer-facing security plain, focused, and contained. */
body[data-page="security-center"] .page-search-shell {
  display: none;
}

body[data-page="security-center"] .security-page {
  width: 100%;
  max-width: 1040px;
  min-width: 0;
  margin: 0 auto;
  gap: 20px;
}

body[data-page="security-center"] .security-hero {
  margin-bottom: 0;
}

body[data-page="security-center"] .security-hero .hero-copy {
  max-width: 620px;
}

body[data-page="security-center"] .security-hero .hero-copy h2 {
  margin-bottom: 10px;
}

body[data-page="security-center"] .security-primary-grid {
  align-items: start;
}

body[data-page="security-center"] .security-simple-panel,
body[data-page="security-center"] .security-activity-panel {
  min-width: 0;
}

body[data-page="security-center"] .security-simple-panel .panel-head,
body[data-page="security-center"] .security-activity-panel .panel-head {
  align-items: flex-start;
  margin-bottom: 18px;
}

body[data-page="security-center"] .security-panel-copy {
  max-width: 420px;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
}

body[data-page="security-center"] .security-session-list {
  display: grid;
  gap: 10px;
}

body[data-page="security-center"] .security-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}

body[data-page="security-center"] .security-session-row:first-child {
  border-top: 0;
  padding-top: 0;
}

body[data-page="security-center"] .security-session-copy {
  min-width: 0;
}

body[data-page="security-center"] .security-session-copy strong,
body[data-page="security-center"] .security-session-copy span {
  display: block;
}

body[data-page="security-center"] .security-session-copy strong {
  font-size: 14px;
}

body[data-page="security-center"] .security-session-copy > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

body[data-page="security-center"] .security-current-label {
  display: inline-flex;
  margin-left: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 10px;
  font-weight: 820;
  vertical-align: middle;
}

body[data-page="security-center"] .security-empty-state,
body[data-page="security-center"] .security-action-result {
  display: grid;
  gap: 6px;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f7faff;
}

body[data-page="security-center"] .security-empty-state span,
body[data-page="security-center"] .security-action-result span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

body[data-page="security-center"] .security-recovery-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

body[data-page="security-center"] .security-recovery-codes code {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
}

body[data-page="security-center"] .security-activity-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

body[data-page="security-center"] .security-activity-table {
  width: 100%;
  min-width: 0;
}

body[data-page="security-center"] .security-activity-table th:first-child,
body[data-page="security-center"] .security-activity-table td:first-child {
  width: 180px;
}

@media (max-width: 900px) {
  body[data-page="security-center"] .security-primary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-page="security-center"] .security-simple-panel .panel-head,
  body[data-page="security-center"] .security-activity-panel .panel-head {
    display: grid;
    justify-content: stretch;
  }

  body[data-page="security-center"] .security-simple-panel .panel-head button,
  body[data-page="security-center"] .security-activity-panel .panel-head button {
    width: 100%;
  }

  body[data-page="security-center"] .security-session-row {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="security-center"] .security-session-row button {
    width: 100%;
  }

  body[data-page="security-center"] .security-activity-table th:first-child,
  body[data-page="security-center"] .security-activity-table td:first-child {
    width: 120px;
  }
}


/* Navigation clarity: explain each section briefly and only expand the active section. */
.nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 6px;
}

.nav-group-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nav-group-copy > span {
  color: #5f708d;
  font-size: 11px;
  font-weight: 860;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-group-copy small {
  color: #98a6ba;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.nav-group-chevron {
  color: #8a99b0;
  font-size: 14px;
  line-height: 1;
  transition: transform .16s ease;
}

.nav-group[open] .nav-group-chevron {
  transform: rotate(180deg);
}

/* Account security: compact account-center layout with no technical diagnostics. */
body[data-page="security-center"] .security-page {
  max-width: 980px;
}

body[data-page="security-center"] .security-password-form {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

body[data-page="security-center"] .security-password-form[hidden] {
  display: none;
}

body[data-page="security-center"] .security-password-note {
  margin: 0;
  font-size: 12px;
}

body[data-page="security-center"] .security-password-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="security-center"] .security-password-form .form-actions .primary-button,
body[data-page="security-center"] .security-password-form .form-actions .secondary-button {
  margin: 0;
}

body[data-page="security-center"] .security-devices-panel {
  min-width: 0;
}

body[data-page="security-center"] .security-devices-panel .panel-head {
  align-items: flex-start;
  margin-bottom: 18px;
}

/* Keep the first enterprise pages inside the available content area. */
body[data-page="branches"] .page,
body[data-page="approvals"] .page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body[data-page="branches"] .page > *,
body[data-page="approvals"] .page > *,
body[data-page="branches"] .panel,
body[data-page="approvals"] .panel,
body[data-page="branches"] .card,
body[data-page="approvals"] .card,
body[data-page="branches"] .form-grid,
body[data-page="approvals"] .form-grid {
  min-width: 0;
  max-width: 100%;
}

body[data-page="branches"] .compact-guide-grid,
body[data-page="approvals"] .compact-guide-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

body[data-page="branches"] .table-wrap,
body[data-page="approvals"] .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Members, invitations, and forms: plain-language access controls and safer inputs */
.members-page { max-width: 1440px; }
.members-page .members-table-card .table-wrap { overflow-x: auto; }
.members-page .members-table-card table { table-layout: auto; min-width: 980px; }
.members-page .members-table-card th,
.members-page .members-table-card td { white-space: nowrap; }
.members-page .members-table-card th:nth-child(1),
.members-page .members-table-card td:nth-child(1) { min-width: 150px; }
.members-page .members-table-card th:nth-child(2),
.members-page .members-table-card td:nth-child(2) { min-width: 210px; }
.members-page .members-table-card th:last-child,
.members-page .members-table-card td:last-child { min-width: 170px; }
.members-page .row-actions { flex-wrap: nowrap; align-items: center; min-width: max-content; }
.members-page .role-template-grid > .empty-state { grid-column: 1 / -1; }
.members-page .optional-label { color: #7b879b; font-size: 11px; font-weight: 700; }

.permission-help {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}
.permission-help strong { color: #13213a; font-size: 14px; }
.permission-help span { color: #64748b; font-size: 12px; }
.scope-empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed #c8d5e8;
  border-radius: 10px;
  background: #f8fbff;
  color: #52647f;
  font-size: 13px;
}
.scope-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.scope-picker-head label { margin: 0; }
.scope-select-all {
  border: 0;
  padding: 4px 7px;
  background: transparent;
  color: var(--blue, #2363ff);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.scope-select-all:hover,
.scope-select-all:focus-visible {
  text-decoration: underline;
  outline: none;
}
.scope-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #d4deec;
  border-radius: 13px;
  background: #f8fbff;
}
.scope-choice-list-error {
  border-color: #d84d63;
  box-shadow: 0 0 0 3px rgba(216, 77, 99, .10);
}
.scope-choice {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #dbe5f2;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.scope-choice:hover { border-color: #aebfda; background: #fbfdff; }
.scope-choice:has(input:focus-visible) {
  border-color: var(--blue, #2363ff);
  box-shadow: 0 0 0 3px rgba(35, 99, 255, .12);
}
.scope-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue, #2363ff) 52%, #dbe5f2);
  background: color-mix(in srgb, var(--blue, #2363ff) 7%, white);
}
.scope-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scope-choice-box {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #9aacbf;
  border-radius: 7px;
  background: #fff;
}
.scope-choice-box::after {
  content: '';
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform .12s ease;
}
.scope-choice input:checked + .scope-choice-box {
  border-color: var(--blue, #2363ff);
  background: var(--blue, #2363ff);
}
.scope-choice input:checked + .scope-choice-box::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.scope-choice-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #17233c;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
}
[data-scope-picker][hidden] { display: none !important; }

.members-notice {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  max-width: min(360px, calc(100vw - 44px));
  padding: 13px 16px;
  border: 1px solid #9eddbd;
  border-radius: 11px;
  background: #effcf5;
  color: #147647;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  font-weight: 760;
}
.members-notice.error { border-color: #efb4bd; background: #fff5f6; color: #b4233a; }
.invite-result { display: grid; gap: 18px; }
.invite-result-row { display: grid; gap: 5px; }
.invite-result-row span { color: #53647e; }
.copy-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

.password-input-shell { position: relative; width: 100%; }
.password-input-shell > input { width: 100%; padding-right: 48px !important; }
.password-visibility-button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5f6f88;
  cursor: pointer;
}
.password-visibility-button:hover,
.password-visibility-button:focus-visible { background: #edf4ff; color: #1f5eff; outline: none; }
.password-visibility-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-live-check { display: block; margin-top: 7px; color: #75839a; font-size: 12px; }
.password-live-check.passed { color: #15945a; font-weight: 760; }
/* Rev Engine form law: validation feedback is always part of layout.
   Hidden feedback uses visibility, never display removal, so blur/validation
   cannot push inputs, helper text, or action buttons around. Reserve two lines
   for concise field feedback and keep that footprint stable. */
.field-error {
  display: block;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
  margin-top: 6px;
  color: #c32d46;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}
.field-error[hidden] {
  display: block !important;
  visibility: hidden !important;
}
form .fc-form-error {
  min-height: 36px;
  max-height: 36px;
  overflow: auto;
}
form .fc-form-error[hidden] {
  display: block !important;
  visibility: hidden !important;
}
.field-input-invalid { border-color: #d84d63 !important; box-shadow: 0 0 0 3px rgba(216, 77, 99, .10) !important; }
.field-input-valid:not(select) { border-color: #72c79c !important; }

@media (max-width: 760px) {
  .permission-help { display: grid; }
  .copy-link-row { grid-template-columns: 1fr; }
  .scope-choice-list { grid-template-columns: 1fr; }
  .members-page .members-table-card table { min-width: 900px; }
}

/* Keep member and invitation actions readable without allowing columns to collide. */
.members-page .members-table-card td:last-child { overflow: visible; text-overflow: clip; }
.members-page .members-table-card .secondary-button.danger {
  color: #b4233a;
  border-color: #efb4bd;
  background: #fff5f6;
}
.members-page .members-table-card .secondary-button.danger:hover,
.members-page .members-table-card .secondary-button.danger:focus-visible {
  color: #9f1f34;
  border-color: #df7f8d;
  background: #ffe7ea;
}

/* Shared action feedback: use these instead of browser alerts, confirms, or prompts. */
.corner-toast {
  padding-right: 42px;
}
.corner-toast.info i {
  background: var(--blue, #2363ff);
}
.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.toast-close:hover,
.toast-close:focus-visible {
  background: #eef4fb;
  color: #0f172a;
}
.fc-feedback-dialog {
  width: min(520px, 100%);
}
.fc-feedback-dialog .field {
  margin-top: 18px;
}
.fc-feedback-dialog textarea {
  width: 100%;
  resize: vertical;
}
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #dc2626;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.danger-button:hover,
.danger-button:focus-visible {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Member access choices: large, clear, and easy to tap. */
.member-choice {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 16px;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  background: #fff;
  color: #243755;
  cursor: pointer;
}
.member-choice:hover { border-color: #aebfda; background: #f9fbff; }
.member-choice:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 96, 255, .12); }
.member-choice > input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.member-choice-box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #9aabc4;
  border-radius: 6px;
  background: #fff;
  transition: .16s ease;
}
.member-choice-box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: .16s ease;
}
.member-choice > input:checked ~ .member-choice-box {
  border-color: var(--blue);
  background: var(--blue);
}
.member-choice > input:checked ~ .member-choice-box::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.member-choice-copy { display: grid; gap: 3px; }
.member-choice-copy strong { color: #17233c; font-size: 14px; line-height: 1.35; }
.member-choice-copy small { color: #64748b; font-size: 12px; line-height: 1.4; }
.member-choice-copy .ownership-note { font-size: 11px; color: #697891; }

/* The Role column now replaces the old duplicate Job title column. */
.members-page .members-table-card table { min-width: 860px; }


.member-field-app-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #64748b; font-size: 11px; font-weight: 800; }
.member-field-app-line .badge { padding: 3px 7px; font-size: 10px; }

.simple-access-page { display: grid; min-height: 60vh; place-items: center; }
.simple-access-card { width: min(560px, 100%); padding: 34px; border: 1px solid #dce6f3; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 16px 40px rgba(15, 23, 42, .08); }
.simple-access-card h1 { margin: 4px 0 12px; }
.simple-access-card p { margin: 0 auto; max-width: 420px; color: #64748b; line-height: 1.55; }
.simple-access-card .secondary-button { margin-top: 20px; }

/* Permission choices use one clear catalog. */
.permission-group-help {
  margin: 0 0 4px;
  color: #667892;
  font-size: 12px;
  line-height: 1.45;
}
.permission-group .permission-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
}
.permission-group .permission-choice > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.permission-group .permission-choice strong {
  color: #334766;
  font-size: 12px;
  line-height: 1.35;
}
.permission-group .permission-choice small {
  color: #71819a;
  font-size: 11px;
  line-height: 1.4;
}


/* Business performance */
body[data-page="executive-dashboard"] {
  overflow-x: hidden;
}

body[data-page="executive-dashboard"] .business-performance-page,
body[data-page="executive-dashboard"] .panel,
body[data-page="executive-dashboard"] .report-grid,
body[data-page="executive-dashboard"] .report-kpi-row {
  min-width: 0;
  max-width: 100%;
}

.business-performance-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 260px)) auto;
  align-items: end;
  gap: 14px;
  margin-bottom: 18px;
}

.business-performance-filters .field,
.business-performance-filters input {
  min-width: 0;
  width: 100%;
}

.business-performance-filters .form-actions {
  margin: 0;
}

.business-stage-list,
.business-summary-list,
.business-aging-grid {
  display: grid;
  gap: 10px;
}

.business-stage-row,
.business-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e6edf5;
}

.business-stage-row:last-child,
.business-summary-row:last-child {
  border-bottom: 0;
}

.business-stage-row span,
.business-summary-row span {
  color: #23395d;
  font-weight: 700;
}

.business-stage-row strong,
.business-summary-row strong {
  color: #071b3a;
}

.business-stage-row small {
  color: #64748b;
  min-width: 48px;
  text-align: right;
}

.business-summary-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-page="executive-dashboard"] .report-table-scroll {
  width: 100%;
  overflow-x: auto;
}

body[data-page="executive-dashboard"] .report-table-scroll table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

@media (max-width: 800px) {
  .business-performance-filters {
    grid-template-columns: 1fr;
  }

  .business-performance-filters .form-actions {
    width: 100%;
  }

  .business-performance-filters .primary-button {
    width: 100%;
  }

  body[data-page="executive-dashboard"] .report-grid.two,
  body[data-page="executive-dashboard"] .report-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Saved payment credentials stay masked and locked until the user chooses Update connection. */
.simple-payment-provider input[data-saved-mask][disabled] {
  opacity: 1;
  background: #f4f7fb;
  color: #334155;
  -webkit-text-fill-color: #334155;
  cursor: not-allowed;
  letter-spacing: .04em;
}
.simple-payment-provider .payment-secret-field small {
  min-height: 18px;
}


/* Leads and dispatch */
.lead-detail-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.lead-activity-head {
  margin-top: 20px;
}

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

.lead-activity {
  padding: 12px 14px;
  border: 1px solid #e4ebf3;
  border-radius: 12px;
  background: #f8fafc;
}

.lead-activity > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lead-activity small,
.lead-activity p {
  color: #64748b;
}

.lead-activity p {
  margin: 8px 0;
  line-height: 1.45;
}

.dispatch-board {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.dispatch-board[hidden] {
  display: none;
}

.dispatch-board-head p {
  margin: 5px 0 0;
  color: #64748b;
}

.dispatch-stats {
  margin: 0;
}

.dispatch-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr);
  gap: 16px;
  min-width: 0;
}

.dispatch-queue,
.dispatch-suggestions,
.dispatch-risk-list {
  display: grid;
  gap: 10px;
}

.dispatch-queue-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dispatch-queue-item:hover,
.dispatch-queue-item.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(35, 99, 255, .09);
}

.dispatch-queue-item span:first-child,
.dispatch-worker-copy,
.dispatch-selected-job,
.dispatch-risk-item > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dispatch-queue-item small,
.dispatch-worker-card small,
.dispatch-selected-job small,
.dispatch-risk-item small {
  color: #64748b;
  line-height: 1.35;
}

.dispatch-selected-job {
  padding: 0 0 10px;
  border-bottom: 1px solid #e5edf5;
}

.dispatch-worker-card,
.dispatch-risk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #e4ebf3;
  border-radius: 12px;
  background: #fff;
}

.dispatch-worker-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.dispatch-score {
  min-width: 48px;
  font-weight: 800;
  color: #0f3f8f;
  text-align: right;
}

.dispatch-warning {
  color: #b45309 !important;
}

.dispatch-risk-item .badge {
  max-width: 46%;
  white-space: normal;
  text-align: right;
}

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

@media (max-width: 640px) {
  .dispatch-worker-card,
  .dispatch-risk-item,
  .dispatch-queue-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .dispatch-worker-actions,
  .dispatch-risk-item .badge {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    text-align: left;
  }
}

/* Solar O&M vertical */
.solar-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.solar-health-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.solar-health-card{display:grid;gap:6px;min-height:118px;align-content:center}
.solar-health-card span,.solar-health-card small{color:var(--muted,#60708d)}
.solar-health-card strong{font-size:28px;letter-spacing:-.04em;color:#071b3a}
.solar-health-card--updated strong{font-size:20px;line-height:1.25;letter-spacing:-.02em;white-space:nowrap}
.solar-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);gap:20px;align-items:start}
.solar-list{display:grid;gap:12px}
.solar-site-row,.solar-fault-row{display:flex;align-items:center;gap:14px;border:1px solid #dce7f7;border-radius:12px;padding:15px;background:#fff}
.solar-site-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#fff6c4,#ffe386);color:#9b6900;font-size:22px;flex:0 0 42px}
.solar-site-main{display:grid;gap:4px;min-width:0;flex:1}
.solar-site-title,.solar-fault-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.solar-site-main>span,.solar-fault-row span{color:#536684}
.solar-site-main>small,.solar-fault-row small{color:#7b8ca7}
.solar-site-metrics{display:grid;grid-template-columns:repeat(3,minmax(74px,1fr));gap:8px;text-align:right}
.solar-site-metrics span{display:grid;gap:2px}.solar-site-metrics small{color:#7b8ca7}.solar-site-metrics strong{color:#071b3a}
.solar-fault-row{align-items:flex-start;justify-content:space-between}.solar-fault-row>div:first-child{display:grid;gap:4px;min-width:0}
.solar-fault-actions{display:flex;align-items:flex-end;gap:6px;flex-direction:column;white-space:nowrap}
.text-button{border:0;background:transparent;color:#155bd7;font:inherit;font-weight:800;cursor:pointer;padding:3px 0}
.solar-reading-table td,.solar-reading-table th{white-space:nowrap}
.solar-dialog{width:min(820px,calc(100vw - 32px));max-height:90vh;overflow:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:#155bd7}
@media(max-width:1100px){.solar-health-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.solar-layout{grid-template-columns:1fr}.solar-site-metrics{text-align:left}}
@media(max-width:700px){.solar-actions{justify-content:flex-start}.solar-health-strip{grid-template-columns:1fr 1fr}.solar-health-card--updated strong{font-size:17px;white-space:normal}.solar-site-row{align-items:flex-start;flex-wrap:wrap}.solar-site-metrics{width:100%;grid-template-columns:repeat(3,1fr)}.solar-fault-row{flex-direction:column}.solar-fault-actions{align-items:flex-start;flex-direction:row;flex-wrap:wrap}}

/* Keep Companies and Solar Operations inside the visible app frame. */
.page-mount,
.page-mount > .page,
body[data-page="workspaces"] .page > *,
body[data-page="solar-operations"] .page > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body[data-page="workspaces"] .panel,
body[data-page="workspaces"] .workspace-card-grid,
body[data-page="workspaces"] .workspace-card,
body[data-page="workspaces"] .form-grid,
body[data-page="solar-operations"] .hero-row,
body[data-page="solar-operations"] .hero-copy,
body[data-page="solar-operations"] .hero-actions,
body[data-page="solar-operations"] .stats,
body[data-page="solar-operations"] .solar-health-strip,
body[data-page="solar-operations"] .solar-layout,
body[data-page="solar-operations"] .panel {
  min-width: 0;
  max-width: 100%;
}

body[data-page="workspaces"] .workspace-card-head > div,
body[data-page="solar-operations"] .hero-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 1500px) and (min-width: 981px) {
  body[data-page="workspaces"] .app-shell,
  body[data-page="solar-operations"] .app-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  body[data-page="workspaces"] .content,
  body[data-page="solar-operations"] .content {
    padding-right: 30px;
    padding-left: 30px;
  }

  body[data-page="solar-operations"] .hero-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="solar-operations"] .solar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  body[data-page="workspaces"] .workspace-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Solar work-order completion choices: clear, compact check cards. */
.completion-requirements {
  min-width: 0;
  margin: 4px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

.completion-requirements legend {
  padding: 0;
  color: #182846;
  font-size: 15px;
  font-weight: 850;
}

.completion-requirements > p {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.form-grid .completion-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 84px;
  padding: 15px;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  background: #fff;
  color: #243755;
  cursor: pointer;
}

.form-grid .completion-option:hover {
  border-color: #a9c2ed;
  background: #f8fbff;
}

.form-grid .completion-option:has(input:checked) {
  border-color: rgba(35, 99, 255, .45);
  background: #f2f7ff;
  box-shadow: 0 0 0 2px rgba(35, 99, 255, .08);
}

.form-grid .completion-option input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--blue);
}

.form-grid .completion-option span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.form-grid .completion-option strong {
  color: #172847;
  font-size: 14px;
  line-height: 1.3;
}

.form-grid .completion-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.4;
}

.field[data-business-name-field][hidden],
.field[data-booking-business-name-field][hidden] {
  display: none;
}

/* Keep the current-device pill compact instead of stretching across the row. */
body[data-page="security-center"] .security-session-copy strong > .security-current-label {
  display: inline-flex;
  width: auto;
  margin-left: 7px;
}

@media (max-width: 760px) {
  .completion-requirements-grid {
    grid-template-columns: 1fr;
  }
}

/* Customer profile */
.customer-profile-page {
  min-width: 0;
  overflow-x: hidden;
}

.customer-profile-page > * {
  min-width: 0;
}

.profile-loading {
  display: grid;
  gap: 8px;
  padding: 32px;
}

.profile-loading span,
.customer-profile-heading p,
.customer-profile-panel p,
.customer-section-head p,
.customer-site-detail p {
  color: var(--muted);
}

.customer-profile-header {
  display: grid;
  gap: 24px;
}

.customer-profile-heading {
  display: grid;
  gap: 14px;
}

.back-link,
.text-button {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.text-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px;
}

.customer-profile-title-row,
.profile-panel-head,
.customer-section-head,
.site-card-head,
.contact-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.customer-profile-title-row h2,
.customer-site-detail h3,
.customer-profile-panel h3,
.customer-section-head h3 {
  margin: 0;
}

.customer-profile-title-row p,
.profile-panel-head p,
.customer-section-head p,
.customer-site-detail p {
  margin: 6px 0 0;
}

.customer-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

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

.customer-summary-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 20px;
}

.customer-summary-card > span,
.customer-summary-card > small {
  color: var(--muted);
}

.customer-summary-card > strong {
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  overflow-wrap: anywhere;
}

.customer-profile-tabs,
.customer-site-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  scrollbar-width: thin;
}

.customer-profile-tab,
.customer-site-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 11px 15px;
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.customer-profile-tab.active,
.customer-site-tab.active {
  color: #fff;
  background: var(--blue);
}

.customer-profile-tab-content,
.customer-profile-stack {
  min-width: 0;
}

.customer-profile-tab-content {
  padding-top: 4px;
}

.customer-profile-stack {
  display: grid;
  gap: 20px;
}

.customer-profile-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.customer-profile-layout .span-2 {
  grid-column: 1 / -1;
}

.customer-profile-panel,
.customer-site-detail {
  min-width: 0;
  padding: 24px;
  scroll-margin-top: 96px;
}

.customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 18px;
}

.customer-detail-row {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.customer-detail-row span {
  color: var(--muted);
  font-size: 0.86rem;
}

.customer-detail-row strong {
  overflow-wrap: anywhere;
}

.customer-profile-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: var(--soft);
  color: var(--muted);
}

.customer-profile-empty strong {
  color: var(--ink);
}

.profile-list,
.customer-note-list {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.profile-list-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.profile-list-item:last-child {
  border-bottom: 0;
}

.profile-list-item > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.profile-list-item strong,
.profile-list-item small {
  overflow-wrap: anywhere;
}

.profile-list-item small {
  color: var(--muted);
}

.profile-row-badges {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf2fa;
  color: #4a5b78;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.profile-badge.active,
.profile-badge.operational,
.profile-badge.completed,
.profile-badge.resolved,
.profile-badge.normal,
.profile-badge.paid {
  color: #07885b;
  background: #dff8ee;
}

.profile-badge.critical,
.profile-badge.open,
.profile-badge.overdue,
.profile-badge.failed,
.profile-badge.offline {
  color: #c12b43;
  background: #ffe6eb;
}

.profile-badge.high,
.profile-badge.degraded,
.profile-badge.in-progress,
.profile-badge.partially-paid,
.profile-badge.maintenance {
  color: #9b6200;
  background: #fff1cf;
}

.customer-contact-grid,
.customer-site-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.customer-contact-card,
.customer-site-card {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 20px;
}

.customer-contact-card span,
.customer-site-card span {
  color: var(--muted);
}

.customer-contact-details {
  display: grid;
}

.customer-site-card.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(35, 99, 255, 0.09);
}

.site-card-head > div,
.contact-card-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.site-card-head strong,
.site-card-head span,
.contact-card-head strong,
.contact-card-head span {
  overflow-wrap: anywhere;
}

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

.site-card-metrics > span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: var(--soft);
}

.site-card-metrics strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.site-card-metrics small {
  font-size: 0.74rem;
}

.customer-site-detail {
  display: grid;
  gap: 18px;
}

.customer-site-content {
  min-width: 0;
}

.customer-site-content h4 {
  margin: 4px 0 8px;
}

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

.customer-photo-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.customer-photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.customer-photo-card span {
  overflow-wrap: anywhere;
}

.customer-note-card {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.customer-note-card:last-child {
  border-bottom: 0;
}

.customer-note-card > div {
  display: grid;
  gap: 7px;
}

.customer-note-card span {
  white-space: pre-wrap;
}

.customer-note-card small {
  color: var(--muted);
}

.profile-document-link:hover {
  color: var(--blue);
}

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

.customer-profile-dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: 920px;
}

.profile-checkbox {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  cursor: pointer;
}

.profile-checkbox input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.profile-checkbox span {
  display: grid;
  gap: 4px;
}

.profile-checkbox small {
  color: var(--muted);
}

.job-customer-profile-link {
  display: inline-block;
  margin-top: 6px;
}

@media (max-width: 1180px) {
  .customer-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .customer-profile-title-row,
  .profile-panel-head,
  .customer-section-head {
    flex-direction: column;
  }

  .customer-profile-actions {
    justify-content: flex-start;
  }

  .customer-profile-layout,
  .customer-contact-grid,
  .customer-site-grid,
  .customer-detail-grid,
  .money-summary {
    grid-template-columns: 1fr;
  }

  .customer-profile-layout .span-2 {
    grid-column: auto;
  }

  .site-card-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .customer-summary-grid,
  .customer-photo-grid {
    grid-template-columns: 1fr;
  }

  .profile-list-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-profile-panel,
  .customer-site-detail {
    padding: 18px;
  }
}


/* Retractable primary navigation: gives solar records more working space without changing the page structure. */
@media (min-width: 981px) {
  .app-shell {
    grid-template-columns: 278px minmax(0, 1fr);
    transition: grid-template-columns .2s ease;
  }

  .sidebar {
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity .15s ease, transform .2s ease, padding .2s ease, border-color .2s ease;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 112px;
    height: 42px;
    margin: 0;
    padding: 0 13px;
    border-radius: 11px;
  }

  .menu-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  body.sidebar-collapsed .sidebar {
    padding-right: 0;
    padding-left: 0;
    border-right-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-18px);
    overflow: hidden;
  }
}

@media (max-width: 980px) {
  .menu-toggle {
    margin: 0;
  }
}

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

/* Calm detail-page header: keep navigation controls separate from customer information. */
@media (min-width: 981px) {
  .content-account-bar {
    min-height: 52px;
    margin-bottom: 22px;
  }

  .menu-toggle {
    min-width: 0;
    height: 44px;
    padding: 0 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
  }
}

body[data-page="customer-profile"] .customer-profile-page {
  gap: 24px;
}

body[data-page="customer-profile"] .customer-profile-header {
  gap: 20px;
}

body[data-page="customer-profile"] .customer-profile-heading {
  gap: 10px;
}

body[data-page="customer-profile"] .back-link {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  color: #60708b;
  font-size: 14px;
  font-weight: 720;
  line-height: 1;
}

body[data-page="customer-profile"] .back-link span {
  font-size: 22px;
  font-weight: 500;
  line-height: .8;
}

body[data-page="customer-profile"] .back-link:hover,
body[data-page="customer-profile"] .back-link:focus-visible {
  color: var(--blue);
}

body[data-page="customer-profile"] .customer-profile-title-row {
  align-items: flex-end;
}

body[data-page="customer-profile"] .customer-profile-heading .eyebrow {
  margin: 0 0 7px;
  color: #64748b;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="customer-profile"] .customer-profile-title-row h2 {
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.055em;
}

body[data-page="customer-profile"] .customer-profile-title-row p {
  max-width: 760px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  body[data-page="customer-profile"] .customer-profile-title-row {
    align-items: flex-start;
  }
}

/* Premium customer profile: quiet hierarchy, fewer floating cards, clearer actions. */
.field-readonly-value {
  min-height: 55px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid #d9e3f1;
  border-radius: 12px;
  background: #f7f9fc;
  color: #172847;
}

.field-readonly-value strong {
  font-size: 14px;
  font-weight: 720;
}

.field-readonly-value small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

body[data-page="customer-profile"] .content {
  padding-top: 32px;
}

body[data-page="customer-profile"] .content-account-bar {
  margin-bottom: 18px;
}

body[data-page="customer-profile"] .customer-profile-page {
  width: min(100%, 1420px);
  margin: 0 auto;
  gap: 22px;
}

body[data-page="customer-profile"] .customer-profile-header {
  gap: 22px;
}

body[data-page="customer-profile"] .customer-profile-heading {
  gap: 14px;
}

body[data-page="customer-profile"] .customer-profile-title-row {
  align-items: center;
  gap: 32px;
}

body[data-page="customer-profile"] .customer-profile-identity {
  min-width: 0;
  display: grid;
  gap: 9px;
}

body[data-page="customer-profile"] .customer-profile-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-page="customer-profile"] .customer-profile-labels > span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f0f4f9;
  color: #52627c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

body[data-page="customer-profile"] .customer-profile-labels > .customer-branch-label {
  background: #edf4ff;
  color: #2457c5;
}

body[data-page="customer-profile"] .customer-profile-title-row h2 {
  font-size: clamp(30px, 2.7vw, 42px);
  font-weight: 780;
  letter-spacing: -.045em;
}

body[data-page="customer-profile"] .customer-profile-title-row p {
  margin: 0;
  color: #62718a;
  font-size: 15px;
}

body[data-page="customer-profile"] .customer-summary-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid #e1e8f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 14px 34px rgba(15, 23, 42, .045);
}

body[data-page="customer-profile"] .customer-summary-card {
  min-height: 136px;
  align-content: center;
  gap: 9px;
  padding: 23px 26px;
  border: 0;
  border-right: 1px solid #e8edf4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="customer-profile"] .customer-summary-card:last-child {
  border-right: 0;
}

body[data-page="customer-profile"] .customer-summary-card > span {
  color: #68758b;
  font-size: 13px;
  font-weight: 650;
}

body[data-page="customer-profile"] .customer-summary-card > strong {
  color: #111a31;
  font-size: clamp(25px, 2vw, 31px);
  font-weight: 760;
  letter-spacing: -.035em;
}

body[data-page="customer-profile"] .customer-summary-card > small {
  color: #7a879b;
  font-size: 12px;
  font-weight: 520;
  line-height: 1.4;
}

body[data-page="customer-profile"] .customer-profile-tabs {
  gap: 4px;
  padding: 5px;
  border: 0;
  border-radius: 15px;
  background: #eef2f7;
  box-shadow: inset 0 0 0 1px rgba(213, 222, 234, .7);
}

body[data-page="customer-profile"] .customer-profile-tab {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 11px;
  color: #627087;
  font-size: 13px;
  font-weight: 650;
}

body[data-page="customer-profile"] .customer-profile-tab:hover {
  color: #263650;
}

body[data-page="customer-profile"] .customer-profile-tab.active {
  color: #173b9c;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 6px 14px rgba(15, 23, 42, .05);
}

body[data-page="customer-profile"] .customer-profile-panel,
body[data-page="customer-profile"] .customer-site-detail,
body[data-page="customer-profile"] .customer-contact-card,
body[data-page="customer-profile"] .customer-site-card {
  border-color: #e3e9f1;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .02), 0 10px 26px rgba(15, 23, 42, .035);
}

body[data-page="customer-profile"] .profile-panel-head h3,
body[data-page="customer-profile"] .customer-section-head h3 {
  color: #172033;
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.02em;
}

body[data-page="customer-profile"] .profile-panel-head p,
body[data-page="customer-profile"] .customer-section-head p {
  color: #758198;
  font-size: 13px;
  line-height: 1.45;
}

body[data-page="customer-profile"] .customer-profile-empty {
  border-style: solid;
  border-color: #e7ecf3;
  border-radius: 15px;
  background: #f8fafc;
}

@media (max-width: 1180px) {
  body[data-page="customer-profile"] .customer-summary-card:nth-child(2) {
    border-right: 0;
  }

  body[data-page="customer-profile"] .customer-summary-card:nth-child(-n+2) {
    border-bottom: 1px solid #e8edf4;
  }
}

@media (max-width: 820px) {
  body[data-page="customer-profile"] .content {
    padding-top: 24px;
  }

  body[data-page="customer-profile"] .customer-profile-title-row {
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 560px) {
  body[data-page="customer-profile"] .customer-summary-card,
  body[data-page="customer-profile"] .customer-summary-card:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #e8edf4;
  }

  body[data-page="customer-profile"] .customer-summary-card:last-child {
    border-bottom: 0;
  }
}


/* Detailed customer account form: clear sections without turning the profile into a maze. */
.customer-profile-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
}

.customer-form-section {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 22px 0 4px;
  border-top: 1px solid #e7ecf3;
}

.customer-form-section:first-child {
  padding-top: 2px;
  border-top: 0;
}

.customer-form-section-head {
  display: grid;
  gap: 4px;
}

.customer-form-section-head h4 {
  margin: 0;
  color: #172033;
  font-size: 16px;
  font-weight: 740;
  letter-spacing: -.015em;
}

.customer-form-section-head p {
  margin: 0;
  color: #718096;
  font-size: 13px;
  line-height: 1.45;
}

.customer-form-section-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px 20px;
}

.customer-form-section-grid > .span-2 {
  grid-column: 1 / -1;
}

.customer-form-section[hidden] {
  display: none !important;
}

.customer-form-checkbox {
  min-height: 76px;
  align-self: start;
  background: #fbfcfe;
}

.customer-standing-notes {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.customer-standing-note {
  display: grid;
  gap: 7px;
  padding: 15px 16px;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #f8fbff;
}

.customer-standing-note.internal {
  background: #faf9ff;
}

.customer-standing-note > span {
  color: #44536c;
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.customer-standing-note p {
  margin: 0;
  color: #1d2b43;
  white-space: pre-wrap;
}

.customer-standing-note small {
  color: #748198;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .customer-form-section-grid {
    grid-template-columns: 1fr;
  }

  .customer-form-section-grid > .span-2 {
    grid-column: auto;
  }
}

/* Branch setup: controlled city selection and generated regional details */
.branch-form .field-help {
  display: block;
  margin-top: 8px;
  color: #6f7f98;
  font-size: 13px;
  line-height: 1.45;
}

.searchable-select {
  position: relative;
}

.searchable-select > input[type="search"] {
  padding-right: 42px;
}

.searchable-select::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-52%);
  color: #687892;
  font-size: 18px;
  pointer-events: none;
}

.searchable-select-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 290px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid #d9e3f1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(24, 42, 79, .18);
}

.searchable-select-menu[hidden] {
  display: none !important;
}

.searchable-select-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #15243f;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.searchable-select-option span {
  font-weight: 760;
}

.searchable-select-option small {
  color: #71809a;
  font-size: 12px;
  text-align: right;
}

.searchable-select-option:hover,
.searchable-select-option:focus-visible {
  outline: none;
  background: #eef4ff;
}

.searchable-select-empty {
  padding: 16px;
  color: #71809a;
  text-align: center;
}

.branch-form input[readonly] {
  background: #f4f7fb;
  color: #40506a;
  cursor: default;
}

.branch-location-summary {
  align-self: end;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid #dde6f2;
  border-radius: 14px;
  background: #f8faff;
}

.branch-location-summary span,
.branch-location-summary strong {
  display: block;
}

.branch-location-summary span {
  margin-bottom: 3px;
  color: #77859d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.branch-location-summary strong {
  color: #182640;
  font-size: 14px;
}


/* Premium O&M surfaces, reliable dropdown arrows, and a useful brand preview. */
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23677992' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.field select,
.form-grid select,
.grid-form select,
.inline-form select,
.toolbar-filter select,
.report-switcher-select,
body[data-page="reports"] .report-filters .field select,
body[data-page="reports"] .report-switcher select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}

select::-ms-expand { display: none; }

.account-chevron,
.nav-group-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-left: auto;
  background: var(--select-chevron) center / 16px 16px no-repeat;
  transition: transform .16s ease;
}

.account-trigger[aria-expanded="true"] .account-chevron,
.nav-group[open] .nav-group-chevron { transform: rotate(180deg); }

.searchable-select::after {
  content: "";
  width: 18px;
  height: 18px;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: var(--select-chevron) center / 18px 18px no-repeat;
}

.account-trigger,
.account-chevron { align-items: center; align-self: center; }

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) .content {
  background: radial-gradient(circle at 92% 0%, rgba(48, 104, 255, .07), transparent 34%), linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%);
}

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) .page { gap: 24px; }

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) :is(.hero-row, .om-page-hero) {
  margin: 0;
  padding: 4px 2px 8px;
  align-items: center;
}

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) .hero-copy h2 {
  margin: 7px 0 10px;
  color: #101a30;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 780;
  letter-spacing: -.052em;
  line-height: 1.02;
}

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) .hero-copy > p:not(.eyebrow) {
  max-width: 700px;
  color: #66758d;
  font-size: 15px;
  line-height: 1.55;
}

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) :is(.panel, .table-card, .compact-guide-grid > .card) {
  border-color: rgba(211, 221, 235, .82);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 42px rgba(23, 42, 79, .065);
}

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) .panel-head h3 {
  color: #17243b;
  font-weight: 750;
  letter-spacing: -.025em;
}

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) .data-table thead th {
  color: #748199;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .055em;
  text-transform: uppercase;
}

:is(body[data-page="branches"], body[data-page="approvals"], body[data-page="assets"], body[data-page="service-contracts"], body[data-page="contract-automation"], body[data-page="inventory"], body[data-page="purchase-requests"], body[data-page="purchase-orders"], body[data-page="procurement-costing"]) .data-table tbody tr:hover { background: #f8faff; }

.om-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
}

.section-kicker {
  display: block;
  margin-bottom: 7px;
  color: #64748b;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Branch management */
body[data-page="branches"] .api-status {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #dfe6f1;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: #66758d;
  box-shadow: 0 8px 24px rgba(29, 48, 83, .05);
}

.branch-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dce4f0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 42px rgba(23, 42, 79, .055);
}

.branch-summary-strip article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 22px 24px;
  border-right: 1px solid #e7ecf4;
}
.branch-summary-strip article:last-child { border-right: 0; }
.branch-summary-strip span { color: #708099; font-size: 12px; font-weight: 760; }
.branch-summary-strip strong { color: #111d33; font-size: 30px; font-weight: 760; letter-spacing: -.045em; line-height: 1; }
.branch-summary-strip small { color: #8591a5; font-size: 12px; }

body[data-page="branches"] :is(.branch-editor-panel, .branch-directory-panel) { padding: 30px; }
.branch-panel-head,
.branch-directory-head { align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid #e7ecf3; }
.branch-panel-head h3,
.branch-directory-head h3 { margin: 0 0 6px; font-size: 22px; }
.branch-form { gap: 20px 24px; padding-top: 8px; }

.branch-form .form-section-title {
  display: grid;
  gap: 4px;
  margin: 6px 0 -2px;
  padding: 18px 0 0;
  border-top: 1px solid #edf1f6;
}
.branch-form .form-section-title:first-child { padding-top: 4px; border-top: 0; }
.branch-form .form-section-title strong { color: #17243b; font-size: 15px; font-weight: 760; }
.branch-form .form-section-title small { color: #7b889d; font-size: 12px; font-weight: 540; }

body[data-page="branches"] .branch-form .field input {
  min-height: 52px;
  border-radius: 14px;
  border-color: #d8e1ee;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #fff;
}
body[data-page="branches"] .branch-form input[readonly] { border-color: #e3e9f2; background: #f5f7fb; color: #4e5e77; }
.branch-form .field-help { min-height: 18px; margin-top: 2px; font-size: 12px; }

.branch-location-summary {
  min-height: auto;
  padding: 14px 16px;
  border: 1px solid #d8e5f8;
  border-radius: 14px;
  background: #f5f8ff;
}
.branch-location-summary span { color: #71809a; font-size: 11px; font-weight: 760; text-transform: uppercase; letter-spacing: .05em; }
.branch-location-summary strong { margin-top: 3px; color: #1a2d4d; font-size: 14px; }

.branch-inheritance-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 16px;
  border: 1px solid #dde6f2;
  border-radius: 14px;
  background: #fafbfe;
  color: #687790;
  font-size: 12px;
  line-height: 1.45;
}
.branch-inheritance-note strong { flex: 0 0 auto; color: #30415f; }
.branch-form-actions { justify-content: flex-end; padding-top: 4px; }

.branch-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 22px; }
.branch-card {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #dfe6f0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 10px 28px rgba(23, 42, 79, .045);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.branch-card:hover { transform: translateY(-2px); border-color: #c7d6ed; box-shadow: 0 18px 38px rgba(23, 42, 79, .08); }
.branch-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.branch-card-head > div { min-width: 0; }
.branch-card-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.branch-card h4 { margin: 0; color: #14213a; font-size: 17px; font-weight: 760; letter-spacing: -.025em; }
.branch-card-head p { margin-top: 5px; color: #6d7b91; font-size: 13px; line-height: 1.4; }
.branch-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 820; text-transform: uppercase; letter-spacing: .045em; }
.branch-status.active { background: #e8f7ef; color: #168153; }
.branch-status.inactive { background: #f1f3f6; color: #6e7889; }
.branch-card-meta,
.branch-card-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.branch-card-meta span,
.branch-card-contacts span { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border-radius: 12px; background: #f5f7fb; color: #32435f; font-size: 12px; overflow-wrap: anywhere; }
.branch-card-meta strong,
.branch-card-contacts strong { color: #7b879a; font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.branch-card-contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.branch-card-contacts .branch-contact-empty { grid-column: 1 / -1; color: #7b879a; text-align: center; }
.branch-empty-state { grid-column: 1 / -1; display: grid; gap: 7px; place-items: center; min-height: 180px; padding: 28px; border: 1px solid #e1e7f0; border-radius: 18px; background: #fafbfe; text-align: center; }
.branch-empty-state strong { color: #17243b; font-size: 17px; }
.branch-empty-state span { max-width: 480px; color: #71809a; font-size: 13px; line-height: 1.5; }

/* The company preview now shows how branding appears on customer documents. */
.brand-preview { gap: 16px; padding: 20px; border-color: #dce4ef; border-radius: 18px; background: #f5f7fb; }
.brand-preview-label-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.brand-preview-label-row > div { display: grid; gap: 3px; }
.brand-preview-label-row strong { color: #17243b; font-size: 14px; font-weight: 760; }
.brand-preview-label-row small { color: #768399; font-size: 12px; }
.brand-preview-label-row > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #e8edf5; color: #5e6b80; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.brand-preview-document { overflow: hidden; border: 1px solid #d9e1ec; border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(23, 42, 79, .09); }
.brand-preview-document .brand-preview-head { justify-content: space-between; padding: 20px 22px 16px; }
.brand-preview-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-preview-identity > div:last-child { min-width: 0; }
.brand-preview-identity strong,
.brand-preview-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-preview-document-meta { display: grid; gap: 3px; text-align: right; }
.brand-preview-document-meta span { color: #7a879b; font-size: 10px; font-weight: 820; letter-spacing: .08em; }
.brand-preview-document-meta strong { color: #17243b; font-size: 14px; }
.brand-preview-document .brand-preview-bar { height: 5px; border-radius: 0; }
.brand-preview-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 22px; }
.brand-preview-body > div:first-child,
.brand-preview-total { display: grid; gap: 4px; }
.brand-preview-body small,
.brand-preview-footer { color: #7c899d; font-size: 11px; }
.brand-preview-body strong { color: #182640; font-size: 14px; }
.brand-preview-body span { color: #64748b; font-size: 12px; }
.brand-preview-total { text-align: right; }
.brand-preview-total strong { font-size: 20px; letter-spacing: -.025em; }
.brand-preview-footer { display: flex; justify-content: space-between; gap: 16px; padding: 12px 22px; border-top: 1px solid #e8edf4; background: #fbfcfe; }

@media (max-width: 920px) {
  .branch-summary-strip,
  .branch-directory { grid-template-columns: 1fr; }
  .branch-summary-strip article { border-right: 0; border-bottom: 1px solid #e7ecf4; }
  .branch-summary-strip article:last-child { border-bottom: 0; }
  .branch-card-contacts { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .om-page-hero { grid-template-columns: 1fr; }
  body[data-page="branches"] :is(.branch-editor-panel, .branch-directory-panel) { padding: 22px; }
  .branch-card-meta { grid-template-columns: 1fr; }
  .branch-inheritance-note,
  .brand-preview-label-row,
  .brand-preview-body,
  .brand-preview-footer { display: grid; }
  .brand-preview-total { text-align: left; }
}

/* Branch form and account-control consistency */
.fc-modal[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }

.branch-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.branch-form-modal { z-index: 120; }
.branch-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(900px, calc(100vh - 32px));
  padding: 28px;
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(15, 29, 57, .24);
}
.branch-dialog .branch-panel-head { margin-bottom: 8px; }
.branch-dialog .branch-form { padding-top: 0; }

/* The city arrow is a real control centred against the input itself. Error text no longer moves it. */
.searchable-select::after { content: none !important; display: none !important; }
.searchable-select > input[type="search"] { padding-right: 54px !important; }
.searchable-select-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: var(--select-chevron) center / 18px 18px no-repeat;
  color: #65758e;
  cursor: pointer;
}
.searchable-select-toggle:hover,
.searchable-select-toggle:focus-visible { background-color: #f2f6fd; outline: 2px solid transparent; }
.searchable-select-toggle[aria-expanded="true"] { transform: rotate(180deg); }

/* One account control on every page, independent of page or company brand colours. */
.account-trigger {
  box-sizing: border-box;
  width: 272px;
  min-width: 272px;
  height: 64px;
  padding: 8px 14px 8px 8px;
  gap: 12px;
  border-radius: 16px;
}
.account-avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--account-brand-primary, var(--blue)), var(--account-brand-secondary, var(--blue2)));
  font-size: 13px;
}
.account-trigger-copy strong { font-size: 15px; line-height: 1.2; }
.account-trigger-copy small { margin-top: 4px; font-size: 12px; line-height: 1.2; }
.account-chevron {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  background-size: 18px 18px;
  background-position: center;
}

@media (max-width: 720px) {
  .account-trigger { width: auto; min-width: 60px; height: 60px; padding: 8px; }
  .account-avatar { width: 42px; height: 42px; flex-basis: 42px; }
  .account-chevron { display: none; }
  .branch-dialog { width: min(100%, calc(100vw - 20px)); padding: 20px; }
  .branch-hero-actions { width: 100%; justify-content: flex-start; }
}

/* Company context, aligned setup forms, and company-branded account controls. */
:root {
  --account-brand-primary: var(--blue);
  --account-brand-secondary: var(--blue2);
  --account-brand-ink: #fff;
  --account-brand-surface-a: #eef4ff;
  --account-brand-surface-b: #f5f7ff;
  --account-brand-border: #b8cdf8;
  --account-brand-shadow: rgba(35, 99, 255, .18);
}

/* Keep Optional on the same line as its field label. A label must not become taller
   merely because the field is optional. */
.field > label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 18px;
}
.optional-label {
  display: inline;
  color: #7b879b;
  font-size: 11px;
  font-weight: 700;
}

.workspace-create-form {
  align-items: start;
}
.workspace-create-form .form-section-title {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.workspace-create-form .form-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.workspace-create-form .form-section-title small {
  color: #71809a;
  font-size: 12px;
  font-weight: 620;
}

.company-settings-context {
  align-items: flex-start;
  gap: 18px;
}
.company-settings-context > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.company-settings-context h2,
.company-settings-context p {
  margin: 0;
}
.current-company-pill {
  flex: 0 0 auto;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid var(--account-brand-border);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--account-brand-surface-a), var(--account-brand-surface-b));
  color: #23334f;
  font-size: 12px;
  font-weight: 800;
}

.account-trigger {
  border-color: var(--account-brand-border);
  background: linear-gradient(135deg, var(--account-brand-surface-a), var(--account-brand-surface-b));
  box-shadow: 0 8px 22px var(--account-brand-shadow);
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  border-color: var(--account-brand-primary);
  box-shadow: 0 12px 30px var(--account-brand-shadow);
}
.account-avatar {
  color: var(--account-brand-ink);
  background: linear-gradient(135deg, var(--account-brand-primary), var(--account-brand-secondary));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.account-chevron {
  background: var(--account-brand-primary);
  -webkit-mask: var(--select-chevron) center / 16px 16px no-repeat;
  mask: var(--select-chevron) center / 16px 16px no-repeat;
}
.account-dropdown a:hover,
.account-dropdown a:focus-visible,
.account-dropdown button:hover,
.account-dropdown button:focus-visible {
  background: var(--account-brand-surface-a);
  color: var(--account-brand-primary);
}
.account-current-company {
  border: 1px solid var(--account-brand-border);
  background: linear-gradient(135deg, var(--account-brand-surface-a), var(--account-brand-surface-b));
}

@media (max-width: 760px) {
  .company-settings-context {
    display: grid;
  }
  .current-company-pill {
    max-width: 100%;
    justify-self: start;
  }
}


/* Invoice customer billing rules */
.invoice-company-note {
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem 1rem;
  border: 1px solid #dbe4f2;
  border-radius: 16px;
  background: #f7f9fc;
}
.invoice-company-note strong { color: #101b38; font-size: 0.95rem; }
.invoice-company-note span,
.field-help { color: #687795; font-size: 0.82rem; line-height: 1.45; }
[data-invoice-po-field][hidden] { display: none !important; }

/* Document-form helper copy stays attached to the field it explains. */
.field-label-with-help {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.field-label-with-help > small {
  color: #6d7b94;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Billing document template editor */
.document-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.document-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: #fbfcfe;
  cursor: pointer;
}
.document-option input {
  flex: 0 0 auto;
  margin-top: 3px;
}
.document-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.document-option strong {
  color: #1d2a40;
  font-size: 13px;
}
.document-option small {
  color: #6f7d92;
  font-size: 11px;
  line-height: 1.4;
}
.document-pdf-preview {
  overflow: hidden;
  border: 1px solid #d8e1ed;
  border-radius: 16px;
  background: #eef2f7;
}
.document-pdf-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #d8e1ed;
  background: #fff;
}
.document-pdf-preview-head > div {
  display: grid;
  gap: 3px;
}
.document-pdf-preview-head strong {
  color: #17243b;
  font-size: 14px;
}
.document-pdf-preview-head small,
.document-pdf-preview-head > span {
  color: #718096;
  font-size: 11px;
}
.document-pdf-preview iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
  background: #eef2f7;
}
@media (max-width: 760px) {
  .document-visibility-grid { grid-template-columns: 1fr; }
  .document-pdf-preview-head { display: grid; }
  .document-pdf-preview iframe { min-height: 560px; }
}

/* Draft quote and invoice editor */
.document-editor-dialog {
  width: min(980px, 100%);
}

.document-editor-dialog .panel-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.document-line-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #f8fbff;
}

.document-line-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.document-line-editor-head strong,
.document-line-editor-head small {
  display: block;
}

.document-line-editor-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

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

.document-line-item {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) repeat(4, minmax(90px, .75fr)) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dfe7f2;
  border-radius: 12px;
  background: #fff;
}

.document-line-item .field {
  min-width: 0;
}

.document-line-item input {
  width: 100%;
  min-width: 0;
}

.document-line-remove {
  margin-bottom: 1px;
}

@media(max-width: 900px) {
  .document-line-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-line-description,
  .document-line-remove {
    grid-column: 1 / -1;
  }

  .document-line-remove {
    justify-self: start;
  }
}

/* Document Studio */
.document-studio-page {
  display: grid;
  gap: 22px;
}
.document-studio-hero-actions,
.document-editor-actions,
.document-template-card-actions,
.document-block-actions,
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.document-template-toolbar {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.document-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.document-template-grid > .empty-state { grid-column: 1 / -1; }
.document-template-card {
  overflow: hidden;
  padding: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.document-template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(25, 46, 84, .1);
}
.document-template-card-preview {
  min-height: 190px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(145deg, #eef3f9, #f8fafc);
  cursor: pointer;
}
.document-template-card-preview::before {
  content: '';
  display: block;
  width: min(210px, 85%);
  height: 142px;
  margin: 0 auto -142px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(34, 54, 85, .13);
}
.document-template-mini-header,
.document-template-mini-lines,
.document-template-mini-table {
  position: relative;
  z-index: 1;
  width: min(174px, 75%);
  margin-inline: auto;
}
.document-template-mini-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
}
.document-template-mini-header i {
  width: 25px;
  height: 25px;
  border-radius: 5px;
}
.document-template-mini-header span {
  width: 65px;
  height: 7px;
  border-radius: 8px;
  background: #aeb9c8;
}
.document-template-mini-lines {
  display: grid;
  gap: 5px;
  margin-top: 17px;
}
.document-template-mini-lines i {
  width: 43%;
  height: 4px;
  border-radius: 5px;
  background: #d6dee8;
}
.document-template-mini-lines i:nth-child(2) { width: 32%; }
.document-template-mini-lines i:nth-child(3) { width: 67%; margin-top: 7px; }
.document-template-mini-lines i:nth-child(4) { width: 58%; }
.document-template-mini-table {
  display: grid;
  gap: 4px;
  margin-top: 13px;
}
.document-template-mini-table i {
  height: 8px;
  border-radius: 2px;
  background: #e7edf4;
}
.document-template-mini-table i:first-child { background: #ced9e7; }
.document-template-card-body {
  display: grid;
  gap: 12px;
  padding: 17px;
}
.document-template-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.document-template-card-title > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.document-template-card-title small,
.document-template-card-body p {
  color: var(--muted);
  font-size: 12px;
}
.document-template-card-title strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.document-template-card-body p { margin: 0; }
.document-template-card-actions { justify-content: space-between; }
.document-template-editor {
  display: grid;
  gap: 18px;
}
.document-template-editor[hidden] { display: none !important; }
.document-editor-heading,
.document-editor-title-row,
.document-import-banner,
.document-preview-heading,
.document-control-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.document-editor-heading > div:first-child { min-width: 0; }
.document-editor-title-row { margin-top: 9px; }
.document-editor-title-row h2 { margin: 2px 0 5px; }
.document-editor-title-row p { margin: 0; color: var(--muted); }
.document-import-banner {
  padding: 15px 17px;
  border: 1px solid #c8daf3;
  border-radius: 14px;
  background: #f3f8ff;
}
.document-import-banner > div,
.document-control-heading > div,
.document-preview-heading > div {
  display: grid;
  gap: 4px;
}
.document-import-banner span,
.document-control-heading span,
.document-preview-heading span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.document-studio-workspace {
  display: grid;
  grid-template-columns: minmax(340px, .85fr) minmax(470px, 1.15fr);
  gap: 20px;
  align-items: start;
}
.document-designer-panel {
  display: grid;
  gap: 15px;
  min-width: 0;
}
.document-control-card {
  display: grid;
  gap: 15px;
  padding: 17px;
}
.split-heading { align-items: center; }
.document-style-grid,
.document-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  align-items: start;
}
.document-style-grid > .field {
  align-self: start;
  grid-template-rows: 18px 48px;
  gap: 8px;
}
.document-style-grid > .field > label {
  min-height: 18px;
  align-items: center;
}
.document-style-grid > .field > input,
.document-style-grid > .field > select {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}
.document-logo-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #f9fbfe;
  cursor: pointer;
}
.document-logo-toggle input { margin-top: 3px; }
.document-logo-toggle span { display: grid; gap: 2px; }
.document-logo-toggle small { color: var(--muted); }
.document-block-list {
  display: grid;
  gap: 9px;
}
.document-block-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #dce4ee;
  border-radius: 12px;
  background: #fff;
}
.document-block-row.is-hidden {
  border-style: dashed;
  background: #f7f9fc;
  opacity: .68;
}
.document-block-order {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #48617f;
  background: #eef3f9;
  font-size: 11px;
  font-weight: 800;
}
.document-block-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.document-block-copy strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.document-block-copy span {
  color: var(--muted);
  font-size: 11px;
}
.document-block-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.document-block-actions .icon-button {
  width: 30px;
  height: 30px;
}
.document-preview-panel {
  position: sticky;
  top: 18px;
  overflow: hidden;
  padding: 0;
}
.document-preview-heading {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}
.document-preview-heading > span {
  white-space: nowrap;
}
.document-preview-panel iframe {
  display: block;
  width: 100%;
  min-height: 790px;
  border: 0;
  background: #e8edf4;
}
.document-template-modal-card {
  width: min(720px, calc(100vw - 30px));
  max-height: min(86vh, 860px);
  overflow: auto;
}

.document-template-modal-card.is-wide {
  width: min(980px, calc(100vw - 30px));
}
.document-template-modal-card form {
  display: grid;
  gap: 15px;
  padding: 18px;
}
.document-template-modal-card .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}
.document-template-modal-card textarea { resize: vertical; }
.document-template-modal-card .field-help {
  display: block;
  margin-top: 5px;
}

.document-import-usage-note,
.document-import-recommendation,
.document-import-file-warning {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid #c9dcf7;
  border-radius: 13px;
  background: #f5f9ff;
}

.document-import-usage-note {
  border-color: #ead39a;
  background: #fffaf0;
}

.document-import-usage-note span,
.document-import-recommendation span,
.document-import-file-warning {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.document-import-file-warning {
  border-color: #f4cf8e;
  background: #fff9ed;
  color: #7a4f00;
}

.document-import-file-warning[hidden] {
  display: none !important;
}

.document-upload-preview,
.document-source-preview {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: #e8edf4;
}

.document-upload-preview {
  min-height: 300px;
}

.document-upload-preview iframe,
.document-source-preview iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #e8edf4;
}

.document-upload-preview iframe {
  height: 430px;
}

.document-upload-preview img {
  display: block;
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  background: #fff;
}

.document-upload-preview-empty {
  min-height: 300px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.document-upload-preview-empty strong {
  color: var(--ink);
}

.document-source-preview iframe {
  height: min(68vh, 760px);
}
.modal-actions {
  justify-content: flex-end;
  padding-top: 4px;
}
.danger-link {
  justify-self: start;
  border: 0;
  padding: 4px 0;
  color: #b42318;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

@media (max-width: 1180px) {
  .document-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-studio-workspace { grid-template-columns: minmax(320px, .9fr) minmax(410px, 1.1fr); }
}
@media (max-width: 960px) {
  .document-studio-workspace { grid-template-columns: 1fr; }
  .document-preview-panel { position: static; }
  .document-preview-panel iframe { min-height: 680px; }
}
@media (max-width: 720px) {
  .document-template-grid { grid-template-columns: 1fr; }
  .document-template-toolbar,
  .document-editor-heading,
  .document-editor-title-row,
  .document-import-banner,
  .document-preview-heading,
  .document-control-heading { display: grid; }
  .document-style-grid,
  .document-modal-grid { grid-template-columns: 1fr; }
  .document-block-row { grid-template-columns: 30px minmax(0, 1fr); }
  .document-block-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 40px; flex-wrap: wrap; }
  .document-preview-heading > span { white-space: normal; }
  .document-preview-panel iframe { min-height: 560px; }
}
.document-studio-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #c9daf0;
  border-radius: 14px;
  background: #f4f8fd;
}
.document-studio-callout > div { display: grid; gap: 3px; }
.document-studio-callout span { color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 720px) { .document-studio-callout { display: grid; } }
.document-detail-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.document-detail-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
@media (max-width: 720px) { .document-detail-options { grid-template-columns: 1fr; } }
.payment-account-editor-list {
  display: grid;
  gap: 12px;
}
.payment-account-editor {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #f8fbff;
}
.payment-account-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.payment-account-editor-heading strong { color: var(--ink); font-size: 13px; }

/* Document Studio usability and template management */
.document-studio-page [data-template-library-view][hidden],
.modal-backdrop[hidden],
.document-import-banner[hidden],
.document-template-management-actions [hidden] {
  display: none !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(9, 20, 40, .48);
  backdrop-filter: blur(8px);
}

.modal-card {
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 880px);
  overflow: auto;
  border: 1px solid rgba(210, 220, 234, .95);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(13, 30, 55, .24);
}

.document-template-modal-card .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.document-template-modal-card .modal-header h3,
.document-template-modal-card .modal-header p {
  margin: 0;
}

.document-template-modal-card .modal-header p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.5;
}

.document-template-library-status,
.document-import-actions,
.document-template-management-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.document-template-bin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid #efd7da;
  border-radius: 15px;
  background: #fff8f8;
}

.document-template-bin-toolbar[hidden] {
  display: none !important;
}

.document-template-bin-toolbar > div:first-child {
  display: grid;
  gap: 4px;
}

.document-template-bin-toolbar strong {
  color: #8f1d28;
}

.document-template-bin-toolbar span,
.document-template-delete-date {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.document-template-bin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.document-template-delete-date {
  display: block;
}

@media (max-width: 760px) {
  .document-template-bin-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

.document-editor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 20px;
  padding: 15px 17px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 30px rgba(28, 49, 82, .06);
}

.document-editor-back {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  padding: 0;
  text-align: left;
}

.document-editor-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.document-editor-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-editor-summary h2 {
  margin: 1px 0 0;
  font-size: clamp(24px, 2.2vw, 32px);
  overflow-wrap: anywhere;
}

.document-editor-summary .eyebrow {
  margin: 0;
}

.document-editor-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.document-import-banner {
  align-items: center;
}

.document-import-actions {
  justify-content: flex-end;
}

.danger-text {
  color: #b42318 !important;
}

.document-template-management {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #fbfcfe;
}

.document-template-management > div:first-child {
  display: grid;
  gap: 3px;
}

.document-template-management span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.document-template-management.is-system {
  border-color: #cbdcf4;
  background: #f5f9ff;
}

.document-template-card-preview::before {
  display: none;
}

.document-template-card-preview {
  display: grid;
  place-items: center;
}

.document-template-paper {
  position: relative;
  z-index: 1;
  width: min(210px, 85%);
  height: 142px;
  padding: 18px 16px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(34, 54, 85, .13);
}

.document-template-mini-header,
.document-template-mini-lines,
.document-template-mini-table {
  width: 100%;
  margin-inline: 0;
}

.document-template-card.variant-professional .document-template-paper {
  border-top: 6px solid var(--template-primary, #1d65bc);
}

.document-template-card.variant-professional .document-template-mini-header {
  padding-top: 5px;
}

.document-template-card.variant-classic .document-template-paper {
  border: 2px solid #17365d;
  box-shadow: inset 0 0 0 4px #fff, 0 12px 30px rgba(34, 54, 85, .13);
}

.document-template-card.variant-classic .document-template-mini-header {
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-top: 2px;
  border-bottom: 3px solid #d6a900;
  padding-bottom: 10px;
}

.document-template-card.variant-classic .document-template-mini-header i {
  border-radius: 50%;
}

.document-template-card.variant-classic .document-template-mini-table i:first-child {
  background: #e4d39a;
}

.document-template-card.variant-minimal .document-template-paper {
  padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(34, 54, 85, .09);
}

.document-template-card.variant-minimal .document-template-mini-header {
  padding-top: 0;
  gap: 12px;
}

.document-template-card.variant-minimal .document-template-mini-header i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.document-template-card.variant-minimal .document-template-mini-header span {
  width: 52px;
  height: 5px;
}

.document-template-card.variant-minimal .document-template-mini-lines {
  margin-top: 24px;
  gap: 8px;
}

.document-template-card.variant-minimal .document-template-mini-lines i:nth-child(3),
.document-template-card.variant-minimal .document-template-mini-lines i:nth-child(4) {
  display: none;
}

.document-template-card.variant-minimal .document-template-mini-table {
  margin-top: 22px;
  border-top: 1px solid #111827;
  padding-top: 6px;
}

.document-template-card.variant-minimal .document-template-mini-table i:first-child {
  background: transparent;
  border-bottom: 1px solid #cfd5dd;
}

.document-template-card.variant-blank .document-template-paper {
  background: #fff;
}

.document-template-card.variant-blank .document-template-mini-header,
.document-template-card.variant-blank .document-template-mini-lines,
.document-template-card.variant-blank .document-template-mini-table {
  display: none;
}

.document-style-grid > .field,
.document-modal-grid > .field {
  min-width: 0;
  align-content: start;
}

.document-style-grid > .field {
  min-height: 74px;
}

.document-detail-options.is-disabled {
  opacity: .48;
  pointer-events: none;
}

.document-logo-toggle {
  min-height: 66px;
  align-items: center;
}

.document-logo-toggle input {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 720px) {
  .modal-backdrop {
    place-items: end center;
    padding: 12px;
  }

  .modal-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 12px 12px;
  }

  .document-editor-actions,
  .document-template-management,
  .document-import-actions {
    display: grid;
    width: 100%;
  }

  .document-editor-actions > *,
  .document-template-management-actions > *,
  .document-import-actions > * {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .document-editor-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .document-editor-back,
  .document-editor-summary,
  .document-editor-actions {
    grid-column: 1;
  }

  .document-editor-summary {
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* Exact imported-document canvas */
[data-imported-canvas-controls][hidden],
[data-structured-design-controls][hidden] {
  display: none !important;
}

.imported-document-canvas-card {
  gap: 16px;
}

.imported-canvas-notice {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #c8daf3;
  border-radius: 13px;
  background: #f5f9ff;
}

.imported-canvas-notice strong {
  color: var(--ink);
  font-size: 13px;
}

.imported-canvas-notice span,
.imported-text-summary,
.imported-text-row span,
.imported-text-limit {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.imported-logo-controls,
.imported-text-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr);
  gap: 13px;
  align-items: end;
}

.imported-logo-controls > .field,
.imported-text-toolbar > .field {
  grid-template-rows: 18px 48px;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.imported-logo-controls > .field > label,
.imported-text-toolbar > .field > label {
  min-height: 18px;
  align-items: center;
}

.imported-logo-controls input,
.imported-logo-controls select,
.imported-logo-controls button,
.imported-text-toolbar input,
.imported-text-toolbar select {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.imported-logo-adjust-field .secondary-button {
  width: 100%;
  justify-content: center;
}

.imported-text-summary {
  padding: 0 2px;
}

.imported-text-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 3px;
}

.imported-text-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 11px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #fff;
}

.imported-text-row.is-edited {
  border-color: #a9c6ef;
  background: #f7faff;
}

.imported-text-row.is-hidden {
  opacity: .64;
}

.imported-text-page {
  font-weight: 800;
  color: #4f607b !important;
}

.imported-text-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.imported-text-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imported-text-suggestion {
  color: #1d65bc !important;
}

.imported-text-limit {
  margin: 2px 0 0;
  text-align: center;
}

.imported-text-options {
  margin-top: 2px;
}

@media (max-width: 720px) {
  .imported-logo-controls,
  .imported-text-toolbar {
    grid-template-columns: 1fr;
  }

  .imported-text-row {
    grid-template-columns: 1fr auto;
  }

  .imported-text-page {
    grid-column: 1 / -1;
  }
}

.imported-merge-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 13px 0;
}

.imported-merge-field-row > .field {
  grid-template-rows: 18px 48px;
  gap: 8px;
}

.imported-merge-field-row select,
.imported-merge-field-row button {
  height: 48px;
  min-height: 48px;
}

@media (max-width: 720px) {
  .imported-merge-field-row {
    grid-template-columns: 1fr;
  }
}

/* Full-screen inline editor for imported PDF templates */
[data-imported-inline-editor][hidden],
[data-structured-workspace][hidden],
[data-imported-document-stage][hidden],
[data-imported-data-preview][hidden],
[data-imported-contextbar][hidden],
[data-imported-text-context-controls][hidden],
[data-imported-logo-context-controls][hidden] {
  display: none !important;
}

body.document-inline-editing .content {
  padding-inline: 24px;
}

.document-template-editor.is-imported-inline {
  gap: 14px;
}

.document-template-editor.is-imported-inline .document-editor-heading {
  position: sticky;
  top: 0;
  z-index: 22;
}

.imported-inline-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.imported-editor-commandbar,
.imported-inline-contextbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 28px rgba(19, 39, 70, .08);
  backdrop-filter: blur(12px);
}

.imported-editor-commandbar {
  position: sticky;
  top: 128px;
  z-index: 20;
}

.imported-editor-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: #eef3f9;
}

.imported-editor-mode-switch button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #50617d;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.imported-editor-mode-switch button.active {
  color: #10203b;
  background: #fff;
  box-shadow: 0 4px 12px rgba(28, 48, 78, .1);
}

.imported-editor-command-actions,
.imported-editor-zoom,
.imported-context-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.imported-editor-zoom {
  min-height: 38px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
}

.imported-editor-zoom .icon-button {
  width: 31px;
  height: 31px;
}

.imported-zoom-value {
  min-width: 52px;
  padding-inline: 4px;
  color: #30415f;
  text-align: center;
}

.imported-editor-more {
  position: relative;
}

.imported-editor-more > summary {
  list-style: none;
  cursor: pointer;
}

.imported-editor-more > summary::-webkit-details-marker {
  display: none;
}

.imported-editor-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  display: grid;
  width: 230px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(16, 34, 61, .18);
}

.imported-editor-more-menu button {
  justify-content: flex-start;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
}

.imported-editor-more-menu button:hover {
  background: #f3f6fa;
}

.imported-editor-guidance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.imported-editor-guidance strong {
  color: #253a5a;
}

.imported-inline-contextbar {
  position: sticky;
  top: 188px;
  z-index: 18;
  justify-content: flex-start;
  border-color: #b9cef0;
  background: rgba(247, 250, 255, .98);
}

.imported-context-copy {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 180px;
}

.imported-context-copy strong {
  color: #132746;
  font-size: 13px;
}

.imported-context-copy span {
  color: var(--muted);
  font-size: 11px;
}

.imported-context-controls {
  flex-wrap: wrap;
  min-width: 0;
}

.imported-context-controls > label {
  display: grid;
  grid-template-columns: auto minmax(160px, 240px);
  align-items: center;
  gap: 7px;
  color: #52637e;
  font-size: 11px;
  font-weight: 800;
}

.imported-context-controls select {
  height: 36px;
  min-height: 36px;
  padding-block: 0;
}

.imported-context-controls .icon-button {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.imported-context-controls .icon-button.is-active {
  border-color: #7ea9ed;
  color: #1255c3;
  background: #eaf2ff;
}

.imported-context-colour {
  grid-template-columns: auto 36px !important;
}

.imported-context-colour input {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 3px;
  border-radius: 9px;
}

.imported-document-stage {
  position: relative;
  min-height: calc(100vh - 290px);
  max-height: calc(100vh - 210px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 34px 40px 70px;
  border: 1px solid #cfd8e5;
  border-radius: 16px;
  background: #25282d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.imported-document-pages {
  display: grid;
  justify-content: center;
  gap: 34px;
  width: max-content;
  min-width: 100%;
  margin-inline: auto;
}

.imported-edit-page {
  position: relative;
  flex: 0 0 auto;
  margin-inline: auto;
}

.imported-page-number {
  position: absolute;
  top: -24px;
  left: 0;
  color: rgba(255, 255, 255, .66);
  font-size: 11px;
  font-weight: 800;
}

.imported-edit-page-canvas {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
  container-type: size;
}

.imported-edit-page-canvas > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.imported-inline-text {
  position: absolute;
  z-index: 3;
  display: block;
  overflow: hidden;
  /* The JS expands the vertical box with transparent bleed so font descenders
     remain visible while horizontal text still stays inside its PDF field. */
  border: 0;
  border-radius: 0;
  outline: 0;
  line-height: 1.05;
  white-space: nowrap;
  text-overflow: clip;
  cursor: text;
  caret-color: #145fd7;
  box-sizing: border-box;
}

.imported-inline-text.is-original {
  color: transparent;
  background: transparent;
}

.imported-inline-text:hover,
.imported-inline-text.is-selected {
  box-shadow: 0 0 0 1px rgba(35, 99, 255, .72);
}

.imported-inline-text.is-active,
.imported-inline-text.is-replacement {
  color: var(--imported-text);
  background: transparent;
}

.imported-inline-text.is-active {
  z-index: 6;
  overflow: visible;
  min-width: max-content;
  box-shadow: 0 0 0 2px #2363ff, 0 4px 12px rgba(23, 73, 148, .15);
}

.imported-inline-text.is-live-field {
  cursor: default;
  box-shadow: 0 0 0 1px rgba(35, 99, 255, .6);
}

.imported-inline-text.is-live-field::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 3px;
  pointer-events: none;
}

.imported-inline-text.is-hidden-text {
  display: grid;
  place-items: center;
  color: #6e7e96;
  background: rgba(255, 255, 255, .86);
  border: 1px dashed #8797ad;
  font-size: 9px !important;
  cursor: pointer;
}

.imported-inline-logo {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px dashed transparent;
  background: transparent;
  cursor: pointer;
}

.imported-inline-logo:hover,
.imported-inline-logo.is-selected {
  border-color: #2363ff;
  box-shadow: 0 0 0 2px rgba(35, 99, 255, .18);
}

.imported-inline-logo.mode-company,
.imported-inline-logo.mode-hidden {
  background: var(--imported-cover);
}

.imported-logo-image-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}

.imported-inline-logo img {
  width: var(--imported-logo-width, 100%);
  height: var(--imported-logo-height, 100%);
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(var(--imported-logo-offset-x, 0px), var(--imported-logo-offset-y, 0px));
  transform-origin: top left;
  display: block;
}

.imported-inline-text.is-underlined {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.08em;
}

.imported-inline-text.is-linkish {
  color: var(--imported-link-color, #1155CC) !important;
  cursor: pointer;
}

.imported-inline-logo span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.imported-data-preview {
  overflow: hidden;
  padding: 0;
}

.imported-data-preview iframe {
  display: block;
  width: 100%;
  min-height: calc(100vh - 260px);
  border: 0;
  background: #25282d;
}

@media (max-width: 1100px) {
  .imported-editor-commandbar,
  .imported-inline-contextbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .imported-editor-command-actions,
  .imported-context-controls {
    width: 100%;
  }

  .imported-context-copy {
    min-width: 0;
  }

  .imported-editor-commandbar,
  .imported-inline-contextbar {
    position: static;
  }
}

@media (max-width: 720px) {
  body.document-inline-editing .content {
    padding-inline: 12px;
  }

  .imported-editor-command-actions,
  .imported-context-controls {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .imported-editor-mode-switch {
    width: 100%;
  }

  .imported-editor-mode-switch button {
    flex: 1;
  }

  .imported-context-controls > label {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .imported-document-stage {
    min-height: 65vh;
    max-height: none;
    padding: 30px 18px 50px;
  }
}

/* Dedicated full-screen workspace for imported PDF templates. */
body[data-document-editor-route="true"] {
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #eef3f9;
}

body[data-document-editor-route="true"] .app-shell {
  display: block;
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-document-editor-route="true"] .sidebar,
body[data-document-editor-route="true"] .content-account-bar,
body[data-document-editor-route="true"] .page-search-shell {
  display: none !important;
}

body[data-document-editor-route="true"] .content,
body[data-document-editor-route="true"] .page-mount,
body[data-document-editor-route="true"] .document-editor-route-page {
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body[data-document-editor-route="true"] .document-editor-route-page {
  display: block;
}

body[data-document-editor-route="true"] .document-template-editor.is-imported-inline {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

body[data-document-editor-route="true"] .document-editor-heading {
  position: relative;
  top: auto;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 10px 20px;
  border-bottom: 1px solid #dce5f0;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 24px rgba(20, 35, 80, .06);
}

body[data-document-editor-route="true"] .document-editor-back {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
}

body[data-document-editor-route="true"] .document-editor-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body[data-document-editor-route="true"] .document-editor-summary > div {
  min-width: 0;
}

body[data-document-editor-route="true"] .document-editor-summary .eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
}

body[data-document-editor-route="true"] .document-editor-summary h2 {
  overflow: hidden;
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-document-editor-route="true"] .document-editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-document-editor-route="true"] .document-editor-actions button {
  min-height: 42px;
}

body[data-document-editor-route="true"] .imported-inline-editor {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow: hidden;
}

body[data-document-editor-route="true"] .imported-editor-commandbar,
body[data-document-editor-route="true"] .imported-inline-contextbar {
  position: relative;
  top: auto;
  z-index: 20;
  flex: 0 0 auto;
}

body[data-document-editor-route="true"] .imported-editor-guidance {
  min-height: 20px;
}

body[data-document-editor-route="true"] .imported-document-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 34px 24px 64px;
  overflow: auto;
  border-radius: 14px;
}

body[data-document-editor-route="true"] .imported-data-preview {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body[data-document-editor-route="true"] .imported-data-preview iframe {
  min-height: 0;
  height: calc(100% - 54px);
}

@media (max-width: 900px) {
  body[data-document-editor-route="true"] {
    overflow: auto;
  }

  body[data-document-editor-route="true"] .app-shell,
  body[data-document-editor-route="true"] .content,
  body[data-document-editor-route="true"] .page-mount,
  body[data-document-editor-route="true"] .document-editor-route-page,
  body[data-document-editor-route="true"] .document-template-editor.is-imported-inline {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  body[data-document-editor-route="true"] .document-editor-heading {
    grid-template-columns: 1fr auto;
  }

  body[data-document-editor-route="true"] .document-editor-back {
    grid-column: 1;
  }

  body[data-document-editor-route="true"] .document-editor-summary {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body[data-document-editor-route="true"] .document-editor-actions {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-document-editor-route="true"] .imported-inline-editor {
    min-height: calc(100vh - 112px);
    overflow: visible;
  }

  body[data-document-editor-route="true"] .imported-document-stage {
    min-height: 72vh;
    height: auto;
  }
}

/* Word-like dedicated workspace for imported document templates. */
body[data-document-editor-route="true"] .document-template-editor.is-imported-inline {
  grid-template-rows: 48px minmax(0, 1fr);
  background: #eef1f5;
}

body[data-document-editor-route="true"] .imported-editor-ribbon {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 10px;
  border-bottom: 1px solid #d5dde8;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(17, 34, 61, .06);
}

body[data-document-editor-route="true"] .imported-editor-file-menu {
  position: relative;
}

body[data-document-editor-route="true"] .imported-editor-file-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  color: #10213d;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

body[data-document-editor-route="true"] .imported-editor-file-menu > summary::-webkit-details-marker {
  display: none;
}

body[data-document-editor-route="true"] .imported-editor-file-menu[open] > summary,
body[data-document-editor-route="true"] .imported-editor-file-menu > summary:hover {
  color: #164fbd;
  background: #edf4ff;
}

body[data-document-editor-route="true"] .imported-file-menu-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 80;
  display: grid;
  width: 260px;
  padding: 7px;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 30, 54, .22);
}

body[data-document-editor-route="true"] .imported-file-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  color: #172a48;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

body[data-document-editor-route="true"] .imported-file-menu-item:hover {
  background: #f0f4f9;
}

body[data-document-editor-route="true"] .imported-file-menu-item.is-primary {
  color: #174fb9;
}

body[data-document-editor-route="true"] .imported-file-menu-item small {
  color: #7a879a;
  font-size: 10px;
  font-weight: 700;
}

body[data-document-editor-route="true"] .imported-file-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: #e5eaf1;
}

body[data-document-editor-route="true"] .imported-ribbon-document {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-inline: 2px;
}

body[data-document-editor-route="true"] .imported-ribbon-document strong {
  overflow: hidden;
  color: #152642;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-document-editor-route="true"] .imported-ribbon-document > span:not(.badge) {
  overflow: hidden;
  color: #708097;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-document-editor-route="true"] .imported-ribbon-document .badge {
  flex: 0 0 auto;
  min-height: 23px;
  padding: 4px 8px;
  font-size: 10px;
}

body[data-document-editor-route="true"] .imported-ribbon-mode {
  padding: 2px;
  border: 1px solid #dde4ee;
  border-radius: 8px;
  background: #f3f6fa;
}

body[data-document-editor-route="true"] .imported-ribbon-mode button {
  min-height: 29px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 11px;
}

body[data-document-editor-route="true"] .imported-ribbon-zoom {
  min-height: 34px;
  border-color: #dde4ee;
  border-radius: 8px;
}

body[data-document-editor-route="true"] .imported-ribbon-zoom .icon-button {
  width: 27px;
  height: 27px;
  min-height: 27px;
}

body[data-document-editor-route="true"] .imported-ribbon-zoom .imported-zoom-value {
  min-width: 45px;
  font-size: 11px;
}

body[data-document-editor-route="true"] .imported-inline-editor {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: #eef1f5;
}

body[data-document-editor-route="true"] .imported-editor-guidance,
body[data-document-editor-route="true"] .imported-editor-commandbar {
  display: none !important;
}

body[data-document-editor-route="true"] .imported-inline-contextbar {
  position: relative;
  top: auto;
  z-index: 25;
  min-height: 44px;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid #d5dde8;
  border-radius: 0;
  background: #f8fafc;
  box-shadow: none;
}

body[data-document-editor-route="true"] .imported-context-copy {
  display: none;
}

body[data-document-editor-route="true"] .imported-context-controls {
  width: 100%;
  flex-wrap: nowrap;
  gap: 6px;
}

body[data-document-editor-route="true"] .imported-context-controls > label {
  grid-template-columns: auto minmax(150px, 230px);
  font-size: 10px;
}

body[data-document-editor-route="true"] .imported-context-controls select,
body[data-document-editor-route="true"] .imported-context-controls .icon-button,
body[data-document-editor-route="true"] .imported-context-colour input {
  height: 32px;
  min-height: 32px;
}

body[data-document-editor-route="true"] .imported-context-controls .icon-button,
body[data-document-editor-route="true"] .imported-context-colour input {
  width: 32px;
}

body[data-document-editor-route="true"] .imported-document-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 28px 28px 72px;
  border: 0;
  border-radius: 0;
  background: #292c31;
  box-shadow: none;
}

body[data-document-editor-route="true"] .imported-data-preview {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #292c31;
}

body[data-document-editor-route="true"] .imported-data-preview .document-preview-heading {
  display: none;
}

body[data-document-editor-route="true"] .imported-data-preview iframe {
  height: 100%;
  min-height: 0;
}

@media (max-width: 900px) {
  body[data-document-editor-route="true"] .document-template-editor.is-imported-inline {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  body[data-document-editor-route="true"] .imported-editor-ribbon {
    grid-template-columns: auto minmax(90px, 1fr) auto;
  }

  body[data-document-editor-route="true"] .imported-ribbon-document > span:not(.badge),
  body[data-document-editor-route="true"] .imported-ribbon-document .badge {
    display: none;
  }

  body[data-document-editor-route="true"] .imported-ribbon-zoom {
    display: none;
  }

  body[data-document-editor-route="true"] .imported-inline-editor {
    min-height: 0;
    overflow: hidden;
  }

  body[data-document-editor-route="true"] .imported-context-controls {
    overflow-x: auto;
  }

  body[data-document-editor-route="true"] .imported-document-stage {
    height: 100%;
    min-height: 0;
    padding: 20px 14px 54px;
  }
}

/* Compact Word-style imported document editor: the page owns the viewport. */
body[data-document-editor-route="true"] .document-template-editor.is-imported-inline {
  grid-template-rows: 40px minmax(0, 1fr);
}

body[data-document-editor-route="true"] .imported-editor-ribbon {
  grid-template-columns: auto auto minmax(120px, 1fr) auto auto auto;
  gap: 7px;
  height: 40px;
  min-height: 40px;
  padding: 3px 8px;
  box-shadow: 0 1px 5px rgba(17, 34, 61, .07);
}

body[data-document-editor-route="true"] .imported-editor-file-menu > summary,
body[data-document-editor-route="true"] .imported-editor-format-menu > summary {
  min-width: 52px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: #10213d;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

body[data-document-editor-route="true"] .imported-editor-format-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-document-editor-route="true"] .imported-editor-format-menu > summary::-webkit-details-marker {
  display: none;
}

body[data-document-editor-route="true"] .imported-editor-format-menu[open] > summary,
body[data-document-editor-route="true"] .imported-editor-format-menu > summary:hover {
  color: #164fbd;
  background: #edf4ff;
}

body[data-document-editor-route="true"] .imported-editor-format-menu {
  position: relative;
  z-index: 70;
}

body[data-document-editor-route="true"] .imported-editor-format-menu[hidden] {
  display: none !important;
}

body[data-document-editor-route="true"] .imported-format-menu-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 90;
  display: grid;
  width: min(390px, calc(100vw - 16px));
  gap: 11px;
  padding: 12px;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 30, 54, .22);
}

body[data-document-editor-route="true"] .imported-format-menu-copy {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5eaf1;
}

body[data-document-editor-route="true"] .imported-format-menu-copy strong {
  color: #152642;
  font-size: 12px;
}

body[data-document-editor-route="true"] .imported-format-menu-copy span {
  color: #708097;
  font-size: 10px;
  line-height: 1.4;
}

body[data-document-editor-route="true"] .imported-format-menu-panel .imported-context-controls {
  display: grid;
  width: 100%;
  gap: 9px;
  overflow: visible;
}

body[data-document-editor-route="true"] .imported-format-menu-panel .imported-context-controls > label {
  grid-template-columns: 70px minmax(0, 1fr);
  width: 100%;
  font-size: 10px;
}

body[data-document-editor-route="true"] .imported-format-menu-panel .imported-context-controls select {
  width: 100%;
  height: 32px;
  min-height: 32px;
}

body[data-document-editor-route="true"] .imported-format-button-row,
body[data-document-editor-route="true"] .imported-format-menu-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

body[data-document-editor-route="true"] .imported-format-menu-actions {
  flex-wrap: wrap;
  padding-top: 2px;
}

body[data-document-editor-route="true"] .imported-format-menu-panel .imported-context-colour {
  grid-template-columns: auto 32px !important;
  width: auto !important;
  margin-left: 4px;
}

body[data-document-editor-route="true"] .imported-format-menu-panel .icon-button,
body[data-document-editor-route="true"] .imported-format-menu-panel .imported-context-colour input {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

body[data-document-editor-route="true"] .imported-ribbon-document strong {
  font-size: 12px;
}

body[data-document-editor-route="true"] .imported-ribbon-document > span:not(.badge) {
  font-size: 9px;
}

body[data-document-editor-route="true"] .imported-ribbon-document .badge {
  min-height: 20px;
  padding: 3px 7px;
  font-size: 9px;
}

body[data-document-editor-route="true"] .imported-ribbon-mode {
  padding: 2px;
}

body[data-document-editor-route="true"] .imported-ribbon-mode button {
  min-height: 26px;
  padding: 0 10px;
  font-size: 10px;
}

body[data-document-editor-route="true"] .imported-ribbon-zoom {
  min-height: 30px;
}

body[data-document-editor-route="true"] .imported-ribbon-zoom .icon-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
}

body[data-document-editor-route="true"] .imported-ribbon-zoom .imported-zoom-value {
  min-width: 42px;
  font-size: 10px;
}

body[data-document-editor-route="true"] .imported-inline-editor {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

body[data-document-editor-route="true"] .imported-document-stage,
body[data-document-editor-route="true"] .imported-data-preview {
  grid-area: 1 / 1;
}

body[data-document-editor-route="true"] .imported-document-stage {
  padding: 24px 24px 64px;
}

body[data-document-editor-route="true"] .imported-page-number {
  top: -19px;
}

@media (max-width: 900px) {
  body[data-document-editor-route="true"] .imported-editor-ribbon {
    grid-template-columns: auto auto minmax(80px, 1fr) auto auto;
  }

  body[data-document-editor-route="true"] .imported-document-stage {
    padding: 20px 14px 50px;
  }
}

@media (max-width: 640px) {
  body[data-document-editor-route="true"] .imported-ribbon-document > span,
  body[data-document-editor-route="true"] .imported-ribbon-document .badge {
    display: none;
  }

  body[data-document-editor-route="true"] .imported-editor-file-menu > summary,
  body[data-document-editor-route="true"] .imported-editor-format-menu > summary {
    min-width: 46px;
    padding-inline: 8px;
  }

  body[data-document-editor-route="true"] .imported-ribbon-mode button {
    padding-inline: 8px;
  }
}

/* Imported document editor corrections: permanent toolbar, clean text layer, and uncropped logos. */
body[data-document-editor-route="true"] .document-template-editor.is-imported-inline {
  grid-template-rows: 40px 52px minmax(0, 1fr);
}

body[data-document-editor-route="true"] .imported-editor-ribbon {
  grid-template-columns: auto auto minmax(120px, 1fr) auto auto auto;
}

body[data-document-editor-route="true"] .imported-ribbon-history {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 5px;
  border-right: 1px solid #dce3ed;
}

body[data-document-editor-route="true"] .imported-ribbon-history .icon-button {
  width: 27px;
  height: 27px;
  min-height: 27px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
}

body[data-document-editor-route="true"] .imported-ribbon-history .icon-button:hover:not(:disabled) {
  color: #164fbd;
  background: #edf4ff;
}

body[data-document-editor-route="true"] .imported-ribbon-history .icon-button:disabled {
  opacity: .35;
  cursor: default;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar {
  position: relative;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: 5px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-bottom: 1px solid #d5dde8;
  border-radius: 0;
  background: #f8fafc;
  box-shadow: none;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-copy {
  display: grid;
  flex: 0 0 150px;
  gap: 1px;
  min-width: 0;
  padding-right: 10px;
  border-right: 1px solid #dce3ed;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-copy strong {
  overflow: hidden;
  color: #152642;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-copy span,
body[data-document-editor-route="true"] .imported-context-empty {
  overflow: hidden;
  color: #708097;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-document-editor-route="true"] .imported-context-empty {
  display: flex;
  align-items: center;
  min-width: 220px;
}

body[data-document-editor-route="true"] .imported-context-empty[hidden],
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls[hidden] {
  display: none !important;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  gap: 7px;
  overflow: visible;
  flex-wrap: nowrap;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls > label {
  display: grid;
  grid-template-columns: auto minmax(150px, 235px);
  align-items: center;
  width: auto;
  gap: 6px;
  color: #52637e;
  font-size: 9px;
  font-weight: 800;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls select,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls .icon-button,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-colour input {
  height: 32px;
  min-height: 32px;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls .icon-button,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-colour input {
  width: 32px;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-format-button-row,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-format-menu-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-colour {
  grid-template-columns: auto 32px !important;
}

body[data-document-editor-route="true"] .imported-inline-editor {
  grid-template-rows: minmax(0, 1fr);
}

.imported-inline-text.is-rendered-text {
  color: var(--imported-text);
  background: transparent;
  font-synthesis: weight style;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

.imported-inline-text.is-rendered-text.is-active {
  color: var(--imported-text);
  background: transparent;
}

.imported-inline-logo.mode-company {
  overflow: hidden !important;
  contain: paint;
  isolation: isolate;
  touch-action: none;
}

.imported-inline-logo.mode-company::before,
.imported-inline-logo.mode-hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--imported-cover);
}

.imported-logo-image-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden !important;
  pointer-events: none;
}

.imported-inline-logo .imported-logo-image-frame img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(100% - (var(--imported-logo-padding, 4px) * 2));
  height: calc(100% - (var(--imported-logo-padding, 4px) * 2));
  min-width: 1px;
  min-height: 1px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: translate(
    calc(-50% + var(--imported-logo-offset-x, 0px)),
    calc(-50% + var(--imported-logo-offset-y, 0px))
  ) scale(var(--imported-logo-scale, 1));
  transform-origin: center;
  user-select: none;
}

.imported-inline-logo > span:not(.imported-logo-image-frame) {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  body[data-document-editor-route="true"] .document-template-editor.is-imported-inline {
    grid-template-rows: 40px 48px minmax(0, 1fr);
  }

  body[data-document-editor-route="true"] .imported-permanent-toolbar {
    height: 48px;
    min-height: 48px;
  }

  body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-copy {
    display: none;
  }
}

/* Keep edited lines inside their original PDF box so selecting text never changes its visual scale or pushes into nearby content. */
.imported-inline-text.is-rendered-text.is-active {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}


.imported-link-button.is-active {
  border-color: #2363ff;
  background: #eaf0ff;
  color: #174fc9;
}

.imported-inline-text.is-linkish {
  color: var(--imported-link-color, #1155CC) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.08em;
}

/* Keep the logo formatting controls on the same baseline as the permanent toolbar. */
body[data-document-editor-route="true"] .imported-permanent-toolbar [data-imported-logo-context-controls] {
  flex-direction: row;
  align-items: center;
  min-height: 32px;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar [data-imported-logo-context-controls] > label {
  align-self: center;
  margin: 0;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar [data-imported-logo-context-controls] select,
body[data-document-editor-route="true"] .imported-permanent-toolbar [data-imported-logo-context-controls] .secondary-button.compact {
  height: 32px;
  min-height: 32px;
  margin: 0;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar [data-imported-logo-context-controls] .secondary-button.compact {
  padding-block: 0;
  align-self: center;
}

/* Use a CSS-rendered select in the imported-logo toolbar.
   Windows Chromium can repaint a focused native select at the wrong vertical
   offset when it sits inside the toolbar's horizontal overflow container. */
body[data-document-editor-route="true"] .imported-permanent-toolbar [data-imported-logo-context-controls] select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: block;
  width: 235px;
  padding: 0 34px 0 10px;
  border: 1px solid #c8d3e2;
  border-radius: 8px;
  background-color: #fff;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  color: #111827;
  line-height: 30px;
  vertical-align: middle;
  outline: none;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar [data-imported-logo-context-controls] select:focus {
  border-color: rgba(35, 99, 255, .65);
  box-shadow: 0 0 0 3px rgba(35, 99, 255, .10);
}


/* The visible logo mode control is a real custom menu, not a native select.
   This prevents Windows Chromium from moving the focused select during the
   document-canvas repaint that follows a logo mode change. */
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-logo-mode-field {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  color: #52637e;
  font-size: 9px;
  font-weight: 800;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-logo-mode-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 235px;
  height: 32px;
  min-height: 32px;
  padding: 0 34px 0 10px;
  border: 1px solid #c8d3e2;
  border-radius: 8px;
  background: #fff var(--select-chevron) right 10px center / 14px 14px no-repeat;
  color: #111827;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-logo-mode-trigger:focus-visible,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-logo-mode-trigger[aria-expanded="true"] {
  outline: none;
  border-color: rgba(35, 99, 255, .65);
  box-shadow: 0 0 0 3px rgba(35, 99, 255, .10);
}

.imported-logo-mode-menu[popover] {
  position: fixed;
  inset: auto;
  z-index: 9999;
  margin: 0;
  padding: 5px;
  border: 1px solid #cfd9e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .18);
}

.imported-logo-mode-menu::backdrop {
  background: transparent;
}

.imported-logo-mode-menu button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #17243a;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

.imported-logo-mode-menu button:hover,
.imported-logo-mode-menu button:focus-visible,
.imported-logo-mode-menu button.is-active {
  outline: none;
  background: #edf4ff;
  color: #174fc9;
}


/* Imported editor toolbar stability and text sizing.
   The custom logo menu uses one hidden state input; never expose a second control. */
body[data-document-editor-route="true"] [data-imported-inline-logo-mode][type="hidden"] {
  display: none !important;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar {
  --imported-toolbar-control-height: 32px;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-format-button-row,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-format-menu-actions {
  align-items: center;
  height: var(--imported-toolbar-control-height);
  min-height: var(--imported-toolbar-control-height);
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls > label,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-logo-mode-field {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  height: var(--imported-toolbar-control-height);
  min-height: var(--imported-toolbar-control-height);
  margin: 0;
  line-height: 1;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls > label > span {
  display: inline-flex;
  align-items: center;
  height: var(--imported-toolbar-control-height);
  line-height: 1;
  white-space: nowrap;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls select,
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls input:not([type="hidden"]),
body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-controls button {
  box-sizing: border-box;
  align-self: center;
  height: var(--imported-toolbar-control-height) !important;
  min-height: var(--imported-toolbar-control-height) !important;
  max-height: var(--imported-toolbar-control-height);
  margin: 0 !important;
  vertical-align: middle;
  transform: none;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-live-data-control select {
  width: 280px;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-font-size-control input {
  width: 58px;
  padding: 0 7px;
  border: 1px solid #c8d3e2;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-colour {
  display: flex !important;
  align-items: center;
  height: var(--imported-toolbar-control-height);
}

body[data-document-editor-route="true"] .imported-permanent-toolbar .imported-context-colour input[type="color"] {
  position: static;
  top: auto;
  width: var(--imported-toolbar-control-height);
  padding: 3px;
}

/* Imported PDF text remains one line. Longer replacement values reduce their
   rendered size to fit the original box instead of clipping or moving neighbours. */
.imported-inline-text.is-rendered-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.imported-inline-text.is-rendered-text.is-active {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Dedicated document-focused editor for ready-made and existing structured templates.
   It uses the same full-screen ribbon as imported documents while keeping the
   existing structured editor logic available in an on-demand tools drawer. */
body[data-document-editor-route="true"] .document-template-editor.is-structured-route {
  display: grid;
  grid-template-rows: 40px 52px minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: #eef1f5;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-editor-ribbon {
  grid-template-columns: auto minmax(0, 1fr);
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-history[hidden],
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-mode[hidden],
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-zoom[hidden],
body[data-document-editor-route="true"] .structured-editor-toolbar[hidden] {
  display: none !important;
}

body[data-document-editor-route="true"] .structured-editor-toolbar {
  position: relative;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: 6px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #d5dde8;
  background: #f8fafc;
}

body[data-document-editor-route="true"] .structured-editor-toolbar-copy {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  padding-right: 14px;
  border-right: 1px solid #dce3ed;
}

body[data-document-editor-route="true"] .structured-editor-toolbar-copy strong {
  color: #152642;
  font-size: 11px;
  line-height: 1.2;
}

body[data-document-editor-route="true"] .structured-editor-toolbar-copy span {
  color: #708097;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

body[data-document-editor-route="true"] .structured-editor-toolbar-actions {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  gap: 7px;
}

body[data-document-editor-route="true"] .structured-editor-toolbar-actions button {
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding-block: 0;
}

body[data-document-editor-route="true"] .structured-editor-toolbar-actions button.is-active {
  border-color: #7ea9ed;
  color: #174fc9;
  background: #eaf2ff;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-studio-workspace {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #292c31;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-preview-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #292c31;
  box-shadow: none;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-preview-heading {
  display: none;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-preview-panel iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #292c31;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-designer-panel {
  position: fixed;
  top: 92px;
  right: 0;
  bottom: 0;
  z-index: 75;
  display: block;
  width: min(440px, calc(100vw - 24px));
  max-width: 100%;
  padding: 0 14px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid #d7e0ec;
  background: #f5f8fc;
  box-shadow: -18px 0 46px rgba(15, 30, 54, .18);
  transform: translateX(105%);
  transition: transform .18s ease;
  visibility: hidden;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-designer-panel.is-open {
  transform: translateX(0);
  visibility: visible;
}

body[data-document-editor-route="true"] .structured-editor-drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  margin: 0 -14px 14px;
  padding: 9px 14px;
  border-bottom: 1px solid #d7e0ec;
  background: rgba(255, 255, 255, .98);
}

body[data-document-editor-route="true"] .structured-editor-drawer-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-document-editor-route="true"] .structured-editor-drawer-header strong {
  color: #142744;
  font-size: 14px;
}

body[data-document-editor-route="true"] .structured-editor-drawer-header span {
  overflow: hidden;
  color: #708097;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route [data-structured-panel] {
  margin-bottom: 14px;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route [data-structured-panel][hidden] {
  display: none !important;
}

body[data-document-editor-route="true"] .structured-editor-drawer-backdrop {
  position: fixed;
  inset: 92px 0 0;
  z-index: 70;
  display: block;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

body[data-document-editor-route="true"].structured-drawer-open .structured-editor-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body[data-document-editor-route="true"] .document-template-editor.is-imported-inline .structured-editor-drawer-backdrop,
body[data-document-editor-route="true"] .document-template-editor.is-imported-inline .structured-editor-drawer-header {
  display: none;
}

@media (max-width: 720px) {
  body[data-document-editor-route="true"] .structured-editor-toolbar-copy {
    display: none;
  }

  body[data-document-editor-route="true"] .structured-editor-toolbar-actions {
    width: max-content;
  }

  body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-designer-panel {
    width: 100vw;
  }
}

/* Contract template groups inside Document Studio */
.document-template-grid.is-contract-template-library {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.document-contract-template-group {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.document-contract-template-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}
.document-contract-template-heading > div {
  display: grid;
  gap: 4px;
}
.document-contract-template-heading strong {
  color: var(--ink);
  font-size: 16px;
}
.document-contract-template-heading span:not(.badge) {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.document-contract-template-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.document-template-card-meta {
  color: var(--muted);
  font-size: 11px;
}
@media (max-width: 1080px) {
  .document-contract-template-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .document-contract-template-cards { grid-template-columns: 1fr; }
}

.document-template-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.document-template-card-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}


/* Contract drafting guidance stays in a private editor modal, never in the exported agreement. */
body[data-document-editor-route="true"] .imported-ribbon-guide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: #10213d;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

body[data-document-editor-route="true"] .imported-ribbon-guide:hover,
body[data-document-editor-route="true"] .imported-ribbon-guide:focus-visible {
  color: #164fbd;
  background: #edf4ff;
  outline: none;
}

body[data-document-editor-route="true"] .imported-ribbon-guide[hidden] {
  display: none !important;
}

.contract-drafting-guide {
  display: grid;
  gap: 18px;
  color: #243650;
}

.contract-guide-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-guide-summary span,
.contract-guide-tag > div > span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  color: #405875;
  background: #f6f9fd;
  font-size: 11px;
  font-weight: 800;
}

.contract-guide-review {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #ead39a;
  border-radius: 12px;
  background: #fffaf0;
}

.contract-guide-review strong,
.contract-drafting-guide h4 {
  color: #142641;
}

.contract-guide-review p,
.contract-drafting-guide section > p,
.contract-guide-tag p,
.contract-guide-schedule-list details > p {
  margin: 0;
  color: #5c6e84;
  font-size: 12px;
  line-height: 1.55;
}

.contract-drafting-guide section {
  display: grid;
  gap: 10px;
}

.contract-drafting-guide h4 {
  margin: 0;
  font-size: 14px;
}

.contract-drafting-guide ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
}

.contract-drafting-guide li {
  color: #344a66;
  font-size: 12px;
  line-height: 1.5;
}

.contract-guide-tag-list,
.contract-guide-schedule-list {
  display: grid;
  gap: 10px;
}

.contract-guide-tag {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
}

.contract-guide-tag > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.contract-guide-tag > div > strong {
  color: #172a46;
  font-size: 13px;
}

.contract-guide-schedule-list details {
  border: 1px solid #dbe4ef;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}

.contract-guide-schedule-list summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #172a46;
  background: #f7f9fc;
  cursor: pointer;
}

.contract-guide-schedule-list summary strong {
  min-width: 72px;
  font-size: 11px;
  text-transform: uppercase;
}

.contract-guide-schedule-list summary span {
  font-size: 12px;
  font-weight: 800;
}

.contract-guide-schedule-list details > p,
.contract-guide-schedule-list details > ul {
  margin: 12px 16px;
}

@media (max-width: 640px) {
  body[data-document-editor-route="true"] .imported-ribbon-guide {
    min-width: 46px;
    padding-inline: 8px;
  }

  .contract-guide-tag > div,
  .contract-guide-schedule-list summary {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Company-branded navigation and Document Studio interaction states. */
.nav-link.active {
  color: var(--account-brand-ink, #fff);
  background: linear-gradient(135deg, var(--account-brand-primary, var(--blue)), var(--account-brand-secondary, var(--blue2)));
  box-shadow: 0 15px 26px var(--account-brand-shadow, rgba(35, 99, 255, .26));
}

.nav-link.active svg {
  stroke: var(--account-brand-ink, #fff);
}

.nav-group:has(.nav-link.active) .nav-group-title,
.tab.active {
  color: var(--account-brand-primary, var(--blue));
}

.nav-group:has(.nav-link.active) .nav-group-title:focus-visible {
  color: var(--account-brand-primary, var(--blue));
  background: var(--account-brand-surface-a, #edf4ff);
}

.tab.active::after {
  background: var(--account-brand-primary, var(--blue));
}

/* Template actions use a high-layer modal, with the confirmation dialog above it. */
.modal-backdrop {
  z-index: 10000;
}

.fc-feedback-modal {
  z-index: 10100;
}

.document-template-card-actions {
  min-height: 36px;
}

.document-template-card-actions:has(> .document-template-more-button:only-child) {
  justify-content: flex-end;
}

.document-template-more-button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-color: var(--line);
  color: #34445f;
  background: #fff;
  font-size: 24px;
  font-weight: 760;
  line-height: 1;
}

.document-template-more-button:hover,
.document-template-more-button:focus-visible {
  border-color: var(--account-brand-border, var(--line));
  color: var(--account-brand-primary, var(--blue));
  background: var(--account-brand-surface-a, #f2f6fd);
}

.document-template-action-list {
  display: grid;
  gap: 9px;
}

.document-template-action-row {
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.document-template-action-row:hover,
.document-template-action-row:focus-visible {
  border-color: var(--account-brand-border, #b8cdf8);
  background: var(--account-brand-surface-a, #f4f8ff);
  outline: none;
}

.document-template-action-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.document-template-action-row strong {
  font-size: 14px;
}

.document-template-action-row small,
.document-template-system-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.document-template-action-row > b {
  color: #7b89a0;
  font-size: 22px;
  font-weight: 500;
}

.document-template-action-row.is-danger {
  border-color: #f0d1d4;
  color: #b42318;
}

.document-template-action-row.is-danger:hover,
.document-template-action-row.is-danger:focus-visible {
  border-color: #e8a6ad;
  background: #fff5f6;
}

.document-template-system-note {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid var(--account-brand-border, #c9dcf7);
  border-radius: 13px;
  background: linear-gradient(135deg, var(--account-brand-surface-a, #f5f9ff), var(--account-brand-surface-b, #fafcff));
}

/* A new editor window appears immediately while a system template copy is prepared. */
.document-template-preparing {
  min-height: calc(100vh - 40px);
  display: grid;
  grid-template-columns: auto minmax(0, 520px);
  place-content: center;
  align-items: center;
  gap: 24px;
  padding: 42px;
  text-align: left;
}

.document-template-preparing[hidden] {
  display: none !important;
}

.document-template-preparing > div:last-child {
  display: grid;
  gap: 10px;
}

.document-template-preparing h2,
.document-template-preparing p {
  margin: 0;
}

.document-template-preparing p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.document-template-preparing .secondary-button {
  width: max-content;
  margin-top: 8px;
}

.document-template-preparing-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--account-brand-surface-a, #e9f0ff);
  border-top-color: var(--account-brand-primary, var(--blue));
  border-radius: 50%;
  animation: document-template-spin .8s linear infinite;
}

@keyframes document-template-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .document-template-preparing {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 28px;
    text-align: center;
  }

  .document-template-preparing > div:last-child {
    justify-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .document-template-preparing-spinner {
    animation-duration: 1.8s;
  }
}

/* Document Studio live sync, autosave, imported-file gating, and multi-select actions. */
body[data-document-editor-route="true"] .imported-editor-ribbon {
  grid-template-columns: auto auto auto minmax(120px, 1fr) auto auto auto;
}

body[data-document-editor-route="true"] .imported-autosave-control {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: "toggle label" "toggle status";
  align-items: center;
  column-gap: 6px;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #f8fafc;
  color: #172a48;
  cursor: pointer;
}

body[data-document-editor-route="true"] .imported-autosave-control input {
  grid-area: toggle;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--account-brand-primary, var(--blue));
}

body[data-document-editor-route="true"] .imported-autosave-control span {
  grid-area: label;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

body[data-document-editor-route="true"] .imported-autosave-control small {
  grid-area: status;
  color: #728096;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
}

body[data-document-editor-route="true"] .imported-autosave-control small[data-status="saving"] {
  color: var(--account-brand-primary, var(--blue));
}

body[data-document-editor-route="true"] .imported-autosave-control small[data-status="error"],
body[data-document-editor-route="true"] .imported-autosave-control small[data-status="unsaved"] {
  color: #a33b24;
}

body[data-document-editor-route="true"] .imported-file-menu-item:disabled,
body[data-document-editor-route="true"] .imported-file-menu-item[aria-disabled="true"] {
  color: #9aa5b5 !important;
  background: transparent !important;
  cursor: not-allowed;
  opacity: .62;
}

.document-template-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid var(--account-brand-border, #c9d8ed);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--account-brand-surface-a, #f4f8ff), #fff);
  box-shadow: 0 10px 24px rgba(30, 56, 92, .06);
}

.document-template-selection-toolbar[hidden] {
  display: none !important;
}

.document-template-selection-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.document-template-selection-toolbar strong {
  color: #172a48;
}

.document-template-selection-toolbar span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

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

.document-template-card {
  position: relative;
}

.document-template-card.is-selected {
  border-color: var(--account-brand-primary, var(--blue));
  box-shadow: 0 0 0 3px var(--account-brand-surface-a, rgba(29, 101, 188, .12)), 0 18px 36px rgba(25, 46, 84, .1);
}

.document-template-select-control {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cbd6e4;
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 18px rgba(25, 46, 84, .12);
  cursor: pointer;
}

.document-template-select-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.document-template-select-control span {
  color: transparent;
  font-size: 15px;
  font-weight: 900;
}

.document-template-select-control:has(input:checked) {
  border-color: var(--account-brand-primary, var(--blue));
  background: var(--account-brand-primary, var(--blue));
}

.document-template-select-control:has(input:checked) span {
  color: #fff;
}

.document-template-select-control:focus-within {
  outline: 3px solid var(--account-brand-surface-a, rgba(29, 101, 188, .16));
  outline-offset: 2px;
}

@media (max-width: 980px) {
  body[data-document-editor-route="true"] .imported-autosave-control small {
    display: none;
  }

  body[data-document-editor-route="true"] .imported-autosave-control {
    grid-template-areas: "toggle label";
  }
}

@media (max-width: 760px) {
  .document-template-selection-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-template-selection-actions {
    justify-content: flex-start;
  }
}

/* Solar site setup keeps advanced O&M details organized after the quick-create step. */
.customer-site-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.site-setup-sections {
  display: grid;
  gap: 18px;
}

.site-setup-section {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.site-setup-section-head {
  display: grid;
  gap: 4px;
}

.site-setup-section-head h4 {
  margin: 0;
  color: var(--ink);
}

.site-setup-section-head p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
}

.site-setup-section .customer-detail-grid {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .customer-site-panel-actions {
    width: 100%;
    justify-content: space-between;
  }

  .site-setup-section {
    padding: 16px;
  }
}

/* Preferred customer contact and quick contact tools */
.preferred-contact-cell {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.preferred-contact-cell small {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.preferred-contact-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}

.preferred-contact-pill.missing {
  background: #f1f4f8;
  color: #66758b;
}

.preferred-contact-callout {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, #dfe8f4);
  border-left: 5px solid var(--blue);
  border-radius: 15px;
  background: color-mix(in srgb, var(--blue) 7%, white);
}

.preferred-contact-callout > span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.preferred-contact-callout > strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.preferred-contact-callout > small {
  max-width: 680px;
  color: #596a82;
  line-height: 1.45;
}

.preferred-contact-callout > button {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.preferred-contact-callout.missing {
  border-color: #d8e0ea;
  border-left-color: #8a98aa;
  background: #f7f9fc;
}

.preferred-contact-callout.missing > span {
  color: #68778c;
}

.customer-preferred-contact {
  margin-bottom: 2px;
}

.lead-preferred-contact {
  margin: 0 0 18px;
}

.lead-detail-head-actions,
.contact-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-action-modal {
  z-index: 10000;
}

.contact-action-dialog {
  width: min(720px, calc(100vw - 32px));
}

.contact-recipient-field {
  margin-bottom: 16px;
}

.contact-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.contact-channel-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.contact-channel-card:hover,
.contact-channel-card:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 8px 20px rgba(20, 48, 92, .1);
  transform: translateY(-1px);
  outline: none;
}

.contact-channel-card.preferred {
  border: 2px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, white);
}

.contact-channel-card > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #5f6e83;
  font-size: 12px;
  font-weight: 850;
}

.contact-channel-card em {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contact-channel-card > strong {
  overflow-wrap: anywhere;
  color: var(--ink);
}

.contact-channel-card > small {
  color: var(--muted);
}

.contact-empty {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .contact-channel-grid {
    grid-template-columns: 1fr;
  }

  .preferred-contact-callout > button {
    position: static;
    width: fit-content;
    margin-top: 8px;
    transform: none;
  }
}

/* Sales enquiry table: keep the first scan focused on who, what, when, stage, and responsibility. */
body[data-page="leads"] .table-scroll table {
  min-width: 860px;
  table-layout: fixed;
}

body[data-page="leads"] .table-scroll th:nth-child(1),
body[data-page="leads"] .table-scroll td:nth-child(1) { width: 23%; }
body[data-page="leads"] .table-scroll th:nth-child(2),
body[data-page="leads"] .table-scroll td:nth-child(2) { width: 25%; }
body[data-page="leads"] .table-scroll th:nth-child(3),
body[data-page="leads"] .table-scroll td:nth-child(3) { width: 16%; }
body[data-page="leads"] .table-scroll th:nth-child(4),
body[data-page="leads"] .table-scroll td:nth-child(4) { width: 12%; }
body[data-page="leads"] .table-scroll th:nth-child(5),
body[data-page="leads"] .table-scroll td:nth-child(5) { width: 17%; }
body[data-page="leads"] .table-scroll th:nth-child(6),
body[data-page="leads"] .table-scroll td:nth-child(6) {
  width: 7%;
  text-align: center;
}

body[data-page="leads"] :is(.lead-summary-cell, .lead-need-cell, .lead-follow-up-cell, .lead-assignment-cell) {
  min-width: 0;
}

body[data-page="leads"] :is(.lead-summary-cell, .lead-need-cell) {
  display: grid;
  gap: 7px;
}

body[data-page="leads"] :is(.lead-summary-cell, .lead-need-cell, .lead-follow-up-cell, .lead-assignment-cell) strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="leads"] :is(.lead-summary-cell, .lead-need-cell) small {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="leads"] .lead-summary-cell small > span {
  flex: 0 0 auto;
}

body[data-page="leads"] .lead-preference-inline {
  max-width: 120px;
  overflow: hidden;
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--blue) 10%, white);
  color: var(--blue);
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="leads"] .lead-preference-inline.missing {
  background: #f1f5f9;
  color: #64748b;
}

body[data-page="leads"] .lead-row-actions {
  justify-content: center;
  flex-wrap: nowrap;
}

body[data-page="leads"] .lead-row-menu-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 980px) {
  body[data-page="leads"] .table-scroll table { min-width: 820px; }
}

/* App-wide table containment: fit rows to the open window instead of forcing horizontal scrolling. */
.table-wrap,
.table-scroll,
.report-table-panel,
.report-table-scroll,
.billing-table {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.table-wrap table,
.table-scroll table,
table.data-table,
.report-table-panel table,
.report-table-scroll table,
.billing-table table,
.members-page .members-table-card table,
body[data-page="leads"] .table-scroll table {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  table-layout: fixed !important;
}

.table-wrap th,
.table-wrap td,
.table-scroll th,
.table-scroll td,
.data-table th,
.data-table td,
.report-table-panel th,
.report-table-panel td,
.report-table-scroll th,
.report-table-scroll td,
.billing-table th,
.billing-table td,
.members-page .members-table-card th,
.members-page .members-table-card td {
  min-width: 0 !important;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

.table-wrap td > *,
.table-scroll td > *,
.data-table td > *,
.report-table-panel td > *,
.report-table-scroll td > *,
.billing-table td > * {
  max-width: 100%;
  min-width: 0;
}

.table-wrap .row-actions,
.table-scroll .row-actions,
.data-table .row-actions,
.members-page .row-actions,
body[data-page="leads"] .lead-row-actions {
  min-width: 0;
  flex-wrap: wrap;
}

.table-wrap :is(.badge, button, .button, .primary-button, .secondary-button, .icon-button),
.table-scroll :is(.badge, button, .button, .primary-button, .secondary-button, .icon-button),
.data-table :is(.badge, button, .button, .primary-button, .secondary-button, .icon-button) {
  max-width: 100%;
}

@media (max-width: 760px) {
  .table-wrap,
  .table-scroll,
  .report-table-panel,
  .report-table-scroll,
  .billing-table {
    overflow: visible;
  }

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

  table.responsive-data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  table.responsive-data-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  table.responsive-data-table tbody tr {
    overflow: hidden;
    border: 1px solid #dbe5f2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
  }

  table.responsive-data-table tbody td {
    display: grid;
    grid-template-columns: minmax(104px, .8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid #e6edf6;
    text-align: right;
  }

  table.responsive-data-table tbody td::before {
    content: attr(data-label);
    min-width: 0;
    color: #516280;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  table.responsive-data-table tbody td:last-child {
    border-bottom: 0;
  }

  table.responsive-data-table tbody td > * {
    justify-self: end;
    text-align: right;
  }

  table.responsive-data-table tbody .row-actions,
  table.responsive-data-table tbody .lead-row-actions {
    justify-content: flex-end;
  }

  table.responsive-data-table tbody tr.responsive-table-message td,
  table.responsive-data-table tbody td[colspan] {
    display: block;
    padding: 18px;
    text-align: left;
  }

  table.responsive-data-table tbody tr.responsive-table-message td::before,
  table.responsive-data-table tbody td[colspan]::before {
    display: none;
  }
}

/* Member lifecycle: separate active and disabled accounts, pin the owner, and keep deletion in the edit modal. */
.owner-member-row {
  background: #f8fbff;
}
.owner-member-row td:first-child strong {
  color: #0f2448;
}
.member-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #f2b8c0;
  border-radius: 12px;
  background: #fff8f9;
}
.member-danger-zone > div {
  min-width: 0;
}
.member-danger-zone strong {
  display: block;
  color: #a8162b;
  font-size: 15px;
}
.member-danger-zone p {
  margin: 5px 0 0;
  color: #6d4650;
  font-size: 12px;
  line-height: 1.45;
}
.member-danger-zone .secondary-button.danger {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .member-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }
  .member-danger-zone .secondary-button.danger {
    width: 100%;
  }
}


@media(max-width:900px){
  .role-library-card-grid { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .role-info-facts { grid-template-columns:1fr; }
  .role-template-card .row-actions { align-items:stretch; flex-direction:column; min-width:0; }
  .role-template-card .row-actions button { width:100%; }
}

/* Prospect portal stage and customer portal access */
.client-stage-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 980px;
  padding: 14px 16px;
  border: 1px solid #bfd3f4;
  border-radius: 10px;
  background: #eef5ff;
  color: #1d3558;
}
.client-stage-banner[hidden] { display: none; }
.client-stage-banner strong { flex: 0 0 auto; color: #0f2448; }
.client-stage-banner span { line-height: 1.45; }
.customer-portal-access .fc-form-actions {
  justify-content: flex-start;
  margin-top: 18px;
}
@media (max-width: 640px) {
  .client-stage-banner { flex-direction: column; }
  .customer-portal-access .fc-form-actions { align-items: stretch; flex-direction: column; }
  .customer-portal-access .fc-form-actions button { width: 100%; }
}

/* Solar monitoring detail controls */
.solar-flow{display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr) auto minmax(120px,1fr);gap:12px;align-items:center;margin:18px 0;padding:16px;border:1px solid #dce7f7;border-radius:14px;background:#f8fbff}
.solar-flow article{display:grid;gap:5px;min-width:0;padding:12px;border:1px solid #e2eaf6;border-radius:12px;background:#fff;text-align:center}
.solar-flow article span{color:#687b99;font-size:.82rem}.solar-flow article strong{font-size:1rem;overflow-wrap:anywhere}.solar-flow-arrow{font-size:1.35rem;color:#6781aa;font-weight:700}.solar-flow-battery{grid-column:2/5}
.solar-history-chart{width:100%;height:180px;display:block}
.segmented-control{display:inline-flex;gap:4px;padding:4px;border:1px solid #d8e3f2;border-radius:10px;background:#f7faff}
.segmented-control button{border:0;border-radius:7px;padding:7px 11px;background:transparent;color:#49617f;cursor:pointer;font:inherit;font-weight:650}
.segmented-control button.active{background:#fff;color:#174f9d;box-shadow:0 1px 4px rgba(28,67,116,.14)}
@media(max-width:760px){.solar-flow{grid-template-columns:1fr}.solar-flow-arrow{transform:rotate(90deg);text-align:center}.solar-flow-battery{grid-column:auto}.segmented-control{width:100%}.segmented-control button{flex:1}}

.monitoring-diagnosis-section {
  padding: 16px;
  border: 1px solid #cfe0f6;
  border-radius: 12px;
  background: #f7fbff;
}

.monitoring-diagnosis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.monitoring-diagnosis-head h4,
.monitoring-diagnosis-head p {
  margin: 0;
}

.monitoring-diagnosis-head p {
  margin-top: 4px;
  color: #60708a;
  font-size: 14px;
  line-height: 1.45;
}

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

.monitoring-diagnosis-copy > div {
  padding: 14px;
  border: 1px solid #d9e3f1;
  border-radius: 10px;
  background: #fff;
}

.monitoring-diagnosis-copy strong {
  color: #0f172a;
  font-size: 14px;
}

.monitoring-diagnosis-copy p,
.monitoring-check-list {
  margin: 8px 0 0;
  color: #40516f;
  font-size: 14px;
  line-height: 1.55;
}

.monitoring-check-list {
  padding-left: 20px;
}

.monitoring-check-list li + li {
  margin-top: 6px;
}

@media (max-width: 720px) {
  .monitoring-diagnosis-head {
    display: grid;
  }

  .monitoring-diagnosis-copy {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   RevEngine shared product system
   Presentation-only compatibility layer. Keep selectors and interaction hooks
   stable while the older page styles migrate to the shared semantic tokens.
   ========================================================================== */
:root {
  color-scheme: light;
  --re-blue-50: #eef4ff;
  --re-blue-100: #dbe7ff;
  --re-blue-300: #8db0ff;
  --re-blue-500: #2363ff;
  --re-blue-600: #1d4ed8;
  --re-blue-700: #1e40af;
  --re-navy-950: #0b132b;
  --re-slate-900: #172033;
  --re-slate-700: #334155;
  --re-slate-500: #64748b;
  --re-slate-300: #cbd5e1;
  --re-slate-200: #e2e8f0;
  --re-slate-100: #f1f5f9;
  --re-slate-50: #f8fafc;
  --re-white: #fff;
  --re-green-600: #0f9f6e;
  --re-amber-600: #d97706;
  --re-red-600: #dc2626;
  --re-violet-600: #6d5ce7;

  --color-bg-canvas: var(--re-slate-50);
  --color-bg-surface: var(--re-white);
  --color-bg-subtle: var(--re-slate-100);
  --color-bg-selected: var(--re-blue-50);
  --color-text-primary: var(--re-slate-900);
  --color-text-secondary: var(--re-slate-700);
  --color-text-muted: var(--re-slate-500);
  --color-text-on-brand: var(--re-white);
  --color-border-default: var(--re-slate-200);
  --color-border-strong: var(--re-slate-300);
  --color-action-primary: var(--re-blue-500);
  --color-action-primary-hover: var(--re-blue-600);
  --color-action-primary-pressed: var(--re-blue-700);
  --color-focus-ring: var(--re-blue-300);
  --color-status-success: var(--re-green-600);
  --color-status-warning: var(--re-amber-600);
  --color-status-danger: var(--re-red-600);

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px rgba(15, 23, 42, .04);
  --elevation-2: 0 4px 12px rgba(15, 23, 42, .06), 0 16px 32px rgba(15, 23, 42, .06);
  --elevation-3: 0 24px 64px rgba(15, 23, 42, .18);
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-overlay: 240ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --control-sm: 36px;
  --control-md: 40px;
  --control-lg: 48px;
  --content-max: 1440px;

  /* Stable aliases used throughout the existing application. */
  --page-bg: var(--color-bg-canvas);
  --panel: var(--color-bg-surface);
  --line: var(--color-border-default);
  --line-soft: var(--re-slate-100);
  --text: var(--color-text-primary);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --blue: var(--color-action-primary);
  --blue2: var(--color-action-primary);
  --green: var(--color-status-success);
  --orange: var(--color-status-warning);
  --red: var(--color-status-danger);
  --purple: var(--re-violet-600);
  --shadow: var(--elevation-1);
  --soft-shadow: var(--elevation-1);
}

html {
  background: var(--color-bg-canvas);
  scroll-padding-top: var(--space-6);
}

body {
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.55;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--re-blue-100);
  color: var(--re-blue-700);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 42%, transparent);
  outline-offset: 2px;
}

:where(button, a, input, select, textarea) {
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.app-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  grid-template-columns: 248px minmax(0, 1fr);
  overflow: clip;
  border: 0;
  border-radius: 0;
  background: var(--color-bg-surface);
  box-shadow: none;
}

.sidebar {
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.brand {
  min-height: 40px;
  gap: var(--space-3);
  margin: 0 var(--space-2) var(--space-8);
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: var(--radius-md);
  background: var(--color-action-primary);
  box-shadow: none;
}

.brand-name {
  color: var(--re-navy-950);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.03em;
}

.nav {
  gap: var(--space-1);
}

.nav-link {
  min-height: 42px;
  height: auto;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.nav-link svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-text-muted);
}

.nav-link:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.nav-link.active {
  background: var(--color-bg-selected);
  color: var(--color-action-primary);
  box-shadow: none;
}

.nav-link.active svg {
  stroke: var(--color-action-primary);
}

.user {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-2) 0;
  border-color: var(--color-border-default);
}

.quick-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  box-shadow: none;
}

.quick-card strong {
  margin-bottom: var(--space-2);
  font-size: 15px;
  letter-spacing: -.02em;
}

.quick-card p {
  width: auto;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.quick-card a {
  min-width: 0;
  height: var(--control-sm);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-action-primary);
  box-shadow: none;
}

.content {
  min-width: 0;
  padding: var(--space-8);
  background: var(--color-bg-canvas);
}

.page {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  gap: var(--space-6);
}

.hero-row {
  gap: var(--space-6);
  margin-bottom: 0;
}

.hero-copy {
  max-width: 760px;
}

.hero-copy h2,
.om-page-hero h1,
.customer-profile-identity h1 {
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-size: clamp(28px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.25;
}

.hero-copy p:not(.eyebrow),
.panel-head p,
.muted {
  color: var(--color-text-muted);
}

.hero-copy p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.55;
}

.eyebrow {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: none;
}

.primary-button,
.secondary-button,
.quiet-button,
.danger-button,
.icon-button,
.menu-toggle,
.button {
  min-width: 0;
  min-height: var(--control-md);
  height: var(--control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.primary-button {
  border: 1px solid var(--color-action-primary);
  background: var(--color-action-primary);
  color: var(--color-text-on-brand);
}

.primary-button:hover {
  border-color: var(--color-action-primary-hover);
  background: var(--color-action-primary-hover);
}

.primary-button:active {
  border-color: var(--color-action-primary-pressed);
  background: var(--color-action-primary-pressed);
  transform: translateY(1px);
}

.secondary-button,
.icon-button,
.menu-toggle {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
}

.secondary-button:hover,
.icon-button:hover,
.menu-toggle:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

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

.quiet-button:hover,
.quiet-button:focus-visible {
  border-color: transparent;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.danger-button {
  border: 1px solid var(--color-status-danger);
  background: var(--color-status-danger);
  color: #fff;
}

.danger-button:hover,
.danger-button:focus-visible {
  border-color: #b91c1c;
  background: #b91c1c;
}

.quiet-button.danger {
  border-color: transparent;
  background: transparent;
  color: var(--color-status-danger);
}

.quiet-button.danger:hover,
.quiet-button.danger:focus-visible {
  background: #fff2f0;
  color: #b42318;
}

:where(.primary-button, .secondary-button, .quiet-button, .danger-button, .icon-button, .menu-toggle, button):disabled {
  cursor: not-allowed;
  opacity: .52;
  box-shadow: none;
  transform: none;
}

.compact:is(.primary-button, .secondary-button, .quiet-button, .danger-button),
.primary-button.compact,
.secondary-button.compact,
.quiet-button.compact,
.danger-button.compact {
  min-height: var(--control-sm);
  height: var(--control-sm);
  padding-inline: 12px;
}

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

.action-bar > :is(.primary-button, .secondary-button, .quiet-button, .danger-button) {
  flex: 0 0 auto;
}

.action-menu-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 9px;
}

.card,
.panel,
.table-card,
.settings-panel,
.report-table-panel {
  border-color: var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--elevation-1);
}

.card,
.panel {
  padding: var(--space-6);
}

.panel-head {
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.panel-head h2 {
  font-size: 20px;
  line-height: 1.4;
}

.panel-head h3,
.card h3 {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.45;
}

.stats {
  gap: var(--space-4);
}

.stat-card {
  min-height: 132px;
  padding: var(--space-5);
}

.stat-label {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}

.stat-value {
  color: var(--color-text-primary);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.trend {
  color: var(--color-text-muted);
  font-size: 13px;
}

.toolbar {
  gap: var(--space-4);
  border-color: var(--color-border-default);
}

.toolbar-actions,
.row-actions,
.form-actions,
.modal-actions,
.fc-form-actions {
  gap: var(--space-3);
}

.tabs {
  gap: var(--space-6);
}

.tab {
  height: var(--control-lg);
  color: var(--color-text-muted);
  font-weight: 600;
}

.tab.active {
  color: var(--color-action-primary);
  font-weight: 650;
}

.field {
  align-content: start;
  gap: var(--space-2);
}

.field label,
.toolbar-filter {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: var(--control-md);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover {
  border-color: var(--color-border-strong);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--color-action-primary);
  outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 32%, transparent);
  outline-offset: 0;
  box-shadow: none;
}

:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 75%, white);
}

.table-card,
.table-wrap,
.table-scroll,
.report-table-panel {
  border-color: var(--color-border-default);
}

:where(.table-wrap, .table-scroll, .report-table-panel) table {
  font-size: 14px;
}

:where(.table-wrap, .table-scroll, .report-table-panel) thead {
  background: var(--color-bg-subtle);
}

:where(.table-wrap, .table-scroll, .report-table-panel) th {
  height: 40px;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: none;
}

:where(.table-wrap, .table-scroll, .report-table-panel) td {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border-color: var(--re-slate-100);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

:where(.table-wrap, .table-scroll, .report-table-panel) tbody tr:hover {
  background: color-mix(in srgb, var(--color-bg-selected) 54%, white);
}

.table-footer {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border-color: var(--color-border-default);
}

.badge,
.api-status {
  min-height: 24px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 650;
}

.badge.gray {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.badge.blue {
  background: var(--color-bg-selected);
  color: var(--re-blue-700);
}

.modal-backdrop,
.fc-modal,
.client-modal-backdrop {
  background: rgba(11, 19, 43, .56);
  backdrop-filter: blur(3px);
}

.modal-card,
.fc-modal-card,
.client-modal {
  border-color: var(--color-border-default);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  box-shadow: var(--elevation-3);
}

.modal-header,
.modal-actions,
.fc-modal-header,
.fc-modal-actions {
  border-color: var(--color-border-default);
}

.toast,
.notification,
.ui-toast {
  border-color: var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2);
}

.empty-state,
.loading-state,
.error-state {
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}

.settings-layout {
  gap: var(--space-5);
}

.settings-tabs {
  padding: var(--space-3);
}

.settings-tab {
  min-height: 40px;
  border-radius: var(--radius-md);
}

.settings-tab.active {
  background: var(--color-bg-selected);
  color: var(--color-action-primary);
}

body:is(.auth-page, .client-auth-page, .public-booking-page, .billing-page) {
  min-height: 100vh;
  background: var(--color-bg-canvas);
}

.public-booking-card,
.auth-card,
.client-auth-card,
.billing-page-shell {
  border-color: var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-2);
}

body:is(.auth-page, .client-auth-page) :where(input:not([type="checkbox"]), select) {
  min-height: var(--control-lg);
}

.client-portal-page {
  background: var(--color-bg-canvas);
}

.client-topbar {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
  box-shadow: none;
}

.client-main {
  width: min(100%, 1184px);
}

@media (max-width: 1023px) {
  .content {
    padding: var(--space-6);
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .menu-toggle {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  .content {
    padding: var(--space-4);
  }

  .page {
    gap: var(--space-5);
  }

  .hero-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .hero-copy h2,
  .om-page-hero h1,
  .customer-profile-identity h1 {
    font-size: 28px;
  }

  .toolbar-actions,
  .form-actions,
  .modal-actions,
  .fc-form-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .primary-button,
  .secondary-button,
  .icon-button,
  .menu-toggle,
  .button {
    min-height: 44px;
  }

  .card,
  .panel {
    padding: var(--space-5);
  }

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

  .tabs {
    gap: var(--space-5);
  }

  table.responsive-data-table tbody tr {
    border-color: var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1);
  }

  table.responsive-data-table tbody td {
    border-color: var(--re-slate-100);
  }
}

@media (max-width: 479px) {
  .content {
    padding: var(--space-4);
  }

  .hero-row :is(.toolbar-actions, .row-actions) {
    width: 100%;
  }

  .hero-row :is(.primary-button, .secondary-button) {
    flex: 1 1 auto;
  }

  .stat-card {
    min-height: 116px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Client portal retractable navigation: mirrors the business dashboard and supports Ctrl+B. */
.client-shell {
  transition: grid-template-columns .2s ease;
}

.client-sidebar {
  min-width: 0;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity .15s ease, transform .2s ease, padding .2s ease, border-color .2s ease;
}

.client-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border-default, #d9e3f1);
  border-radius: 999px;
  background: var(--color-bg-surface, #fff);
  color: var(--color-text-secondary, #31405a);
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

.client-sidebar-toggle:hover {
  border-color: var(--color-border-strong, #b7c7dc);
  background: var(--color-bg-subtle, #f8fbff);
}

.client-sidebar-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.client-header-copy {
  min-width: 0;
  margin-right: auto;
}

.client-sidebar-backdrop {
  display: none;
}

@media (min-width: 981px) {
  body.client-sidebar-collapsed .client-shell {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  body.client-sidebar-collapsed .client-sidebar {
    padding-right: 0;
    padding-left: 0;
    border-right-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-18px);
    overflow: hidden;
  }
}

@media (max-width: 980px) {
  .client-shell {
    display: block;
  }

  .client-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 92;
    width: min(280px, calc(100vw - 44px));
    border-right: 1px solid #dce7f7;
    border-bottom: 0;
    box-shadow: 0 24px 70px rgba(9, 31, 68, .24);
    transform: translateX(-105%);
    overflow-y: auto;
  }

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

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

  .client-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 91;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(7, 27, 58, .42);
    cursor: default;
  }

  .client-sidebar-backdrop[hidden] {
    display: none;
  }

  .client-main {
    width: 100%;
  }

  .client-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .client-header > .primary-button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-shell,
  .client-sidebar {
    transition: none !important;
  }
}


/* Customer directory search and filters share one fixed control row. */
body[data-page="customers"] .customer-list-toolbar {
  grid-template-columns: minmax(280px, 1fr) minmax(440px, 650px);
  align-items: start;
  gap: var(--space-4);
  padding: 0 0 var(--space-4);
  margin-top: 0;
}

body[data-page="customers"] .customer-list-search,
body[data-page="customers"] .customer-list-toolbar .toolbar-filter {
  min-width: 0;
}

body[data-page="customers"] .customer-list-toolbar[data-people-resource="customers"] .customer-list-search {
  display: grid;
  grid-template-rows: 22px 44px;
  align-content: start;
  gap: 5px;
}

body[data-page="customers"] .customer-list-toolbar[data-people-resource="customers"] .customer-list-search::before {
  content: "";
  display: block;
  height: 22px;
}

body[data-page="customers"] .customer-list-search .page-search-shell {
  width: 100%;
  height: 44px;
  margin: 0;
}

body[data-page="customers"] .customer-list-search .page-search-shell input {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

body[data-page="customers"] .customer-list-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

body[data-page="customers"] .customer-list-toolbar .toolbar-filter {
  grid-template-rows: 22px 44px;
  align-content: start;
  gap: 5px;
  height: 71px;
  line-height: 22px;
}

body[data-page="customers"] .customer-list-toolbar .toolbar-filter select {
  display: block;
  align-self: start;
  width: 100%;
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  line-height: normal;
}

body[data-page="customers"] .customer-list-status {
  grid-column: 1 / -1;
  justify-self: start;
}

body[data-page="customers"] [data-customer-list-filters][hidden],
body[data-page="customers"] [data-customer-type-filter-wrap][hidden],
body[data-page="customers"] [data-customer-branch-filter-wrap][hidden] {
  display: none !important;
}

body[data-page="customers"] .customer-list-toolbar[data-people-resource="workers"] {
  grid-template-columns: minmax(280px, 1fr);
}

body[data-page="customers"] .customer-list-toolbar[data-people-resource="workers"] .customer-list-search {
  display: block;
  width: min(760px, 100%);
}

body[data-page="customers"] .customer-list-toolbar[data-people-resource="workers"] .customer-list-search::before {
  display: none;
}

@media (max-width: 960px) {
  body[data-page="customers"] .customer-list-toolbar {
    grid-template-columns: 1fr;
  }

  body[data-page="customers"] .customer-list-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-page="customers"] .customer-list-filters {
    grid-template-columns: 1fr;
  }
}

/* Account and team profile pictures */
.account-avatar,
.profile-photo-preview,
.member-avatar,
.member-photo-preview,
.client-avatar,
.client-person-avatar,
.table-person-avatar {
  overflow: hidden;
}
.account-avatar img,
.profile-photo-preview img,
.member-avatar img,
.member-photo-preview img,
.client-avatar img,
.client-person-avatar img,
.table-person-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.account-avatar.has-image,
.client-avatar.has-image {
  background: #e8eef8;
  color: transparent;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.profile-photo-panel {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.profile-photo-preview {
  width: 156px;
  height: 156px;
  display: grid;
  place-items: center;
  border: 1px solid #cfe0fb;
  border-radius: 50%;
  background: #eef5ff;
  color: #1258d8;
  font-size: 42px;
  font-weight: 900;
}
.profile-photo-copy {
  display: grid;
  gap: 8px;
}
.profile-photo-copy h3,
.profile-photo-copy p {
  margin: 0;
}
.profile-photo-copy p,
.file-name {
  color: #637694;
}
.profile-photo-actions,
.client-profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.profile-photo-cropper {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dce7f7;
  border-radius: 14px;
  background: #f7faff;
}
.profile-photo-cropper[hidden] {
  display: none !important;
}
.profile-photo-crop-canvas {
  width: min(280px, 100%);
  height: auto;
  aspect-ratio: 1;
  display: block;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #cfe0fb, 0 10px 28px rgba(16, 43, 82, 0.12);
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: #eef5ff;
}
.profile-photo-crop-canvas.is-dragging {
  cursor: grabbing;
}
.profile-photo-crop-canvas:focus-visible {
  outline: 3px solid rgba(38, 102, 255, 0.28);
  outline-offset: 4px;
}
.profile-photo-crop-help {
  margin: 0;
  color: #526887;
  font-size: 14px;
  line-height: 1.5;
}
.profile-photo-crop-controls {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.profile-photo-crop-controls label {
  display: grid;
  gap: 7px;
  color: #243b5a;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.profile-photo-crop-controls input[type="range"] {
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0;
}
.profile-photo-cropper.compact {
  padding: 12px;
}
.profile-photo-cropper.compact .profile-photo-crop-canvas {
  width: min(220px, 100%);
}
.profile-details-panel {
  min-width: 0;
}

.member-identity,
.table-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.member-avatar,
.table-person-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d4e0f2;
  border-radius: 50%;
  background: #eef5ff;
  color: #1258d8;
  font-size: 13px;
  font-weight: 900;
}
.member-identity strong,
.table-person-copy {
  min-width: 0;
}
.table-person-copy {
  display: grid;
  gap: 2px;
}
.table-person-copy strong,
.table-person-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-person-copy small {
  color: #637694;
}
.member-photo-editor {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.member-photo-preview {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid #cfe0fb;
  border-radius: 50%;
  background: #eef5ff;
  color: #1258d8;
  font-size: 30px;
  font-weight: 900;
}
.member-photo-editor-copy {
  display: grid;
  gap: 6px;
}
.member-photo-editor-copy small,
.member-photo-editor-copy span {
  color: #637694;
}
.member-photo-editor .fc-form-error,
.member-photo-editor .fc-form-actions,
.member-profile-photo-cropper {
  grid-column: 1 / -1;
}
.member-profile-photo-cropper .profile-photo-crop-canvas {
  width: min(260px, 100%);
}

.client-avatar.has-image {
  border-color: #cfe0fb;
}
.client-profile-photo-actions {
  margin-top: 4px;
}
.client-person-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dce7f7;
  border-radius: 10px;
  background: #f7faff;
}
.client-person-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid #cfe0fb;
  border-radius: 50%;
  background: #eef5ff;
  color: #1258d8;
  font-size: 15px;
  font-weight: 900;
}
.client-person-card > div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.client-person-card small,
.client-person-card span {
  color: #637694;
}
.client-person-card strong,
.client-person-card span {
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .profile-settings-grid {
    grid-template-columns: 1fr;
  }
  .member-photo-editor {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .member-photo-editor-copy {
    justify-items: center;
  }
  .profile-photo-crop-controls {
    grid-template-columns: 1fr;
  }
  .profile-photo-crop-controls .quiet-button {
    justify-self: stretch;
  }
}

/* Context navigation: keep related records one click away on desktop workflows. */
.rev-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 26px;
  margin: 0 0 12px;
  color: #758198;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.rev-breadcrumbs[hidden] { display: none; }
.rev-breadcrumbs a { color: #5d6c84; text-decoration: none; }
.rev-breadcrumbs a:hover,
.rev-breadcrumbs a:focus-visible { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.rev-breadcrumbs [aria-current="page"] { color: #1e2d46; font-weight: 760; }
.rev-breadcrumb-separator { color: #a1aec0; font-size: 15px; }

.record-row[data-row-href],
.record-row[data-row-open-action] { cursor: pointer; }
.record-row[data-row-href]:focus-visible,
.record-row[data-row-open-action]:focus-visible {
  outline: 3px solid rgba(35, 99, 255, .22);
  outline-offset: -3px;
}
.record-row[data-row-href] td:first-child,
.record-row[data-row-open-action] td:first-child { font-weight: 720; }

.profile-list-link {
  border-radius: 10px;
  transition: background .15s ease, padding .15s ease, margin .15s ease;
}
.profile-list-link:hover,
.profile-list-link:focus-visible {
  margin-inline: -10px;
  padding-inline: 10px;
  background: #f5f8fd;
  outline: none;
}
.profile-list-link .profile-row-open { color: var(--blue); font-size: 12px; font-weight: 760; white-space: nowrap; }

.customer-context-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e2e9f3;
  border-radius: 14px;
  background: #f8fbff;
}
.customer-context-actions > span {
  margin-right: 3px;
  color: #68758b;
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.customer-site-panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.customer-site-card .site-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.customer-site-card .site-card-actions > * { flex: 1 1 auto; text-align: center; }

.context-focus {
  animation: revengine-context-focus 2.4s ease both;
  scroll-margin-top: 110px;
}
@keyframes revengine-context-focus {
  0%, 35% { box-shadow: 0 0 0 4px rgba(35, 99, 255, .18); background: #f3f7ff; }
  100% { box-shadow: none; background: inherit; }
}

.solar-site-row[data-record-href] { cursor: pointer; }
.solar-site-row[data-record-href]:hover { border-color: #bfd2ef; background: #f8fbff; }
.solar-site-row[data-record-href]:focus-visible { outline: 3px solid rgba(35, 99, 255, .22); outline-offset: 2px; }

body[data-page="customer-profile"] .back-link {
  align-items: center;
  line-height: 20px;
}
body[data-page="customer-profile"] .back-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 720px) {
  .rev-breadcrumbs { margin-bottom: 10px; font-size: 12px; }
  .customer-context-actions { align-items: stretch; }
  .customer-context-actions > span { width: 100%; }
}


.profile-record-row {
  position: relative;
  cursor: default;
  transition: background .15s ease;
}
.profile-record-row:hover {
  background: var(--color-bg-subtle);
}
.profile-record-controls {
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.record-action-strip {
  justify-content: flex-end;
  gap: 5px;
}
.profile-record-overflow {
  position: relative;
  display: inline-flex;
}
.profile-record-menu {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  color: #60708a;
}
.profile-record-menu:hover,
.profile-record-menu:focus-visible {
  background: #eaf0f8;
  color: #1d3154;
}
.profile-quick-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% - 3px);
  right: 0;
  width: min(240px, calc(100vw - 48px));
  display: grid !important;
  gap: 5px !important;
  padding: 8px;
  border: 1px solid #dce4ef;
  border-radius: 13px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .14);
}
.profile-quick-menu > span {
  padding: 5px 7px 3px;
  color: #8691a4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.profile-quick-menu :is(.primary-button, .secondary-button, .quiet-button, .danger-button) {
  width: 100%;
  justify-content: flex-start;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #263650;
  box-shadow: none;
  font-size: 13px;
}
.profile-quick-menu :is(.primary-button, .secondary-button, .quiet-button):hover {
  background: #f2f5f9;
}
.profile-quick-menu :is(.danger-button, .quiet-button.danger) {
  color: #b42318;
}
.profile-quick-menu :is(.danger-button, .quiet-button.danger):hover {
  background: #fff2f0;
}

@media (max-width: 820px) {
  body[data-page="customer-profile"] .customer-profile-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .profile-quick-menu { right: 8px; }
}

.profile-receipt-list {
  display: grid;
  gap: 8px;
}
.profile-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.profile-receipt-row:last-child { border-bottom: 0; }
.profile-receipt-row > div { display: grid; gap: 4px; }
.profile-receipt-row small { color: var(--color-text-muted); }

body[data-page="solar-site"] .hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 820px) {
  .profile-record-controls {
    width: 100%;
    justify-content: flex-start;
  }
  .record-action-strip { justify-content: flex-start; }
  body[data-page="solar-site"] .hero-actions { justify-content: flex-start; }
}

/* Contract editor: document-first O&M agreement workspace */
.contract-editor-page { max-width: 1740px; margin: 0 auto; }
.contract-editor-heading,
.contract-editor-status-row,
.contract-document-workspace-heading,
.contract-details-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.contract-editor-heading { margin-bottom: 14px; }
.contract-editor-heading .eyebrow { margin-bottom: 6px; }
.contract-editor-heading h2 { margin: 0; }
.contract-editor-heading-actions,
.contract-editor-secondary-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contract-editor-status-row { align-items: center; min-height: 42px; margin-bottom: 14px; }
.contract-editor-layout.is-document-first {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.contract-document-workspace { min-width: 0; padding: 0; overflow: hidden; background: #f2f5f9; }
.contract-document-workspace-heading { align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border, #dce5f2); background: #fff; }
.contract-document-workspace-heading strong,
.contract-details-panel-heading strong { display: block; font-size: 15px; }
.contract-document-workspace-heading span,
.contract-details-panel-heading span { display: block; margin-top: 3px; color: var(--muted, #66758a); font-size: 12px; line-height: 1.45; }
.contract-document-host { min-height: 780px; }
.contract-document-host .contract-visual-editor { min-height: min(82vh, 980px); border: 0; border-radius: 0; box-shadow: none; }
.contract-document-host.is-readonly .contract-document-toolbar { opacity: .55; }
.contract-document-host.is-readonly [contenteditable] { cursor: default; }
.contract-document-empty { min-height: 760px; display: grid; place-content: center; text-align: center; gap: 7px; padding: 36px; color: var(--muted, #66758a); }
.contract-document-empty strong { color: var(--text, #162033); font-size: 17px; }
.contract-imported-preview { padding: 18px; }
.contract-imported-preview > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.contract-imported-preview > div:first-child strong { font-size: 14px; }
.contract-imported-preview > div:first-child span { flex: 1 1 360px; color: var(--muted, #66758a); font-size: 12px; }
.contract-imported-preview iframe { width: 100%; min-height: 780px; border: 1px solid var(--border, #dce5f2); border-radius: 10px; background: #fff; }
.contract-details-panel { position: sticky; top: 18px; overflow: hidden; padding: 0; max-height: calc(100vh - 36px); }
.contract-details-panel-heading { padding: 16px 18px; border-bottom: 1px solid var(--border, #dce5f2); }
.contract-details-panel form { max-height: calc(100vh - 112px); overflow: auto; }
.contract-details-group { border-bottom: 1px solid var(--border, #dce5f2); }
.contract-details-group:last-child { border-bottom: 0; }
.contract-details-group > summary { position: relative; cursor: pointer; list-style: none; padding: 14px 42px 14px 18px; font-weight: 800; color: var(--text, #162033); }
.contract-details-group > summary::-webkit-details-marker { display: none; }
.contract-details-group > summary::after { content: '⌄'; position: absolute; right: 18px; top: 12px; color: var(--muted, #66758a); font-size: 18px; transform: rotate(-90deg); transition: transform .15s ease; }
.contract-details-group[open] > summary::after { transform: rotate(0deg); }
.contract-details-fields { display: grid; gap: 12px; padding: 0 18px 18px; }
.contract-details-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contract-details-panel .field { min-width: 0; }
.contract-details-panel .field label { font-size: 12px; }
.contract-details-panel .field input,
.contract-details-panel .field select,
.contract-details-panel .field textarea { min-width: 0; }
.contract-editor-check { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--border, #dce5f2); border-radius: 10px; background: var(--surface-soft, #f8fafc); }
.contract-editor-check input { margin-top: 3px; }
.contract-editor-check strong,
.contract-editor-check small { display: block; }
.contract-editor-check strong { font-size: 12px; }
.contract-editor-check small { color: var(--muted, #66758a); margin-top: 2px; font-size: 11px; line-height: 1.35; }
.imported-ribbon-replace { white-space: nowrap; }
@media (max-width: 1260px) {
  .contract-editor-layout.is-document-first { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1040px) {
  .contract-editor-layout.is-document-first { grid-template-columns: 1fr; }
  .contract-details-panel { position: static; max-height: none; order: -1; }
  .contract-details-panel form { max-height: none; overflow: visible; }
  .contract-document-host .contract-visual-editor { min-height: 740px; }
}
@media (max-width: 720px) {
  .contract-editor-heading, .contract-editor-status-row { flex-direction: column; align-items: stretch; }
  .contract-editor-heading-actions, .contract-editor-secondary-actions { width: 100%; }
  .contract-details-two-col { grid-template-columns: 1fr; }
}

/* Shared rich document editor -------------------------------------------------
   Used by invoice, quote, and contract templates. The editor deliberately
   keeps a restrained Word-like toolbar while preserving Rev Engine smart data.
---------------------------------------------------------------------------- */
.document-template-modal-card.is-wide:has(.rich-document-editor) {
  width: min(1180px, calc(100vw - 32px));
  max-height: min(92vh, 980px);
}
.document-template-modal-card:has(.rich-document-editor) form {
  padding: 0;
  gap: 0;
}
.document-template-modal-card:has(.rich-document-editor) .field:not(.rich-document-field) {
  padding: 16px 22px 0;
}
.document-template-modal-card:has(.rich-document-editor) .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}
.rich-document-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.rich-document-field > label,
.rich-document-field > .field-help {
  margin-inline: 22px;
}
.rich-document-editor {
  overflow: hidden;
  border-top: 1px solid #e5ebf3;
  border-bottom: 1px solid #e5ebf3;
  background: #eef2f7;
}
.rich-document-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  min-height: 62px;
  padding: 9px 14px;
  overflow-x: auto;
  border-bottom: 1px solid #dce4ef;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 0 rgba(14, 30, 54, .02);
  scrollbar-width: thin;
}
.rich-toolbar-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 38px;
  padding-right: 8px;
  border-right: 1px solid #e6ebf2;
}
.rich-toolbar-group:last-child { border-right: 0; padding-right: 0; }
.rich-toolbar-group .icon-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
}
.rich-format-letter { font-family: Georgia, 'Times New Roman', serif; }
.rich-toolbar-select {
  display: grid;
  gap: 2px;
  min-width: 116px;
}
.rich-toolbar-select > span,
.rich-colour-control > span {
  padding-left: 2px;
  color: #66758c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rich-toolbar-select select,
.rich-link-tools input {
  height: 34px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid #d5deea;
  border-radius: 8px;
  background: #fff;
  color: #17253a;
  font: inherit;
}
.rich-size-select { min-width: 72px; }
.rich-size-select select { width: 72px; }
.rich-colour-control {
  display: grid;
  gap: 2px;
}
.rich-colour-control input {
  width: 34px;
  height: 25px;
  padding: 2px;
  border: 1px solid #d5deea;
  border-radius: 7px;
  background: #fff;
}
.rich-link-tools input { width: 168px; }
.rich-field-tools .rich-toolbar-select { min-width: 150px; }
.rich-document-guidance {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  border-bottom: 1px solid #dde5ef;
  background: #f8fafc;
  color: #5f6f86;
  font-size: 12px;
  line-height: 1.45;
}
.rich-document-guidance strong { color: #243550; }
.rich-document-surface {
  width: min(794px, calc(100% - 48px));
  min-height: 640px;
  margin: 24px auto 34px;
  padding: 64px 70px 76px;
  outline: none;
  border: 1px solid #d8e0eb;
  background: #fff;
  color: #14223a;
  box-shadow: 0 14px 34px rgba(30, 51, 81, .12), 0 2px 5px rgba(30, 51, 81, .05);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  line-height: 1.55;
  caret-color: #245cff;
}
.rich-document-surface:focus {
  border-color: #a9bfea;
  box-shadow: 0 16px 40px rgba(30, 51, 81, .14), 0 0 0 3px rgba(36, 92, 255, .08);
}
.rich-document-surface p,
.rich-document-surface h1,
.rich-document-surface h2,
.rich-document-surface h3,
.rich-document-surface blockquote,
.rich-document-surface ul,
.rich-document-surface ol {
  margin-top: 0;
}
.rich-document-surface p { margin-bottom: 12px; }
.rich-document-surface h1 { margin-bottom: 18px; font-size: 24pt; line-height: 1.2; }
.rich-document-surface h2 { margin-top: 22px; margin-bottom: 12px; font-size: 18pt; line-height: 1.25; }
.rich-document-surface h3 { margin-top: 18px; margin-bottom: 10px; font-size: 14pt; line-height: 1.3; }
.rich-document-surface blockquote {
  margin: 14px 0;
  padding: 8px 16px;
  border-left: 3px solid #b8c9e8;
  color: #53637a;
}
.rich-document-surface ul,
.rich-document-surface ol { padding-left: 28px; margin-bottom: 14px; }
.rich-document-surface a { color: #1155cc; text-decoration: underline; }
.rich-smart-field {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 2px;
  padding: 1px 6px;
  border: 1px solid #b8cdf8;
  border-radius: 5px;
  background: #edf4ff;
  color: #174da6;
  font-size: .88em;
  font-weight: 700;
  line-height: 1.45;
  vertical-align: .05em;
  user-select: all;
}
.rich-document-surface [data-rich-field]::before {
  content: '◆';
  margin-right: 4px;
  color: #5c83d8;
  font-size: .65em;
}

@media (max-width: 840px) {
  .rich-document-toolbar { align-items: center; }
  .rich-link-tools input { width: 130px; }
  .rich-document-guidance { display: grid; }
  .rich-document-surface {
    width: calc(100% - 24px);
    min-height: 560px;
    margin: 12px auto 22px;
    padding: 38px 28px 50px;
  }
}


/* Dedicated document editors do not use application breadcrumbs. The editor is
   already a focused workspace with its own File/Guide/document chrome. */
body[data-document-editor-route="true"] .rev-breadcrumbs {
  display: none !important;
}

/* Zoom controls the canvas viewport, not document formatting. Keep it attached
   to the canvas edge instead of consuming ribbon/context-toolbar space. */
body[data-document-editor-route="true"] .document-template-editor.is-imported-inline .imported-ribbon-zoom {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 38px;
  padding: 4px;
  border: 1px solid #d5dde8;
  border-radius: 11px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 28px rgba(17, 33, 61, .18);
  backdrop-filter: blur(8px);
}

body[data-document-editor-route="true"] .document-template-editor.is-imported-inline .imported-ribbon-zoom .icon-button {
  width: 30px;
  height: 30px;
  min-height: 30px;
}

body[data-document-editor-route="true"] .document-template-editor.is-imported-inline .imported-ribbon-zoom .imported-zoom-value {
  min-width: 54px;
  height: 30px;
  padding: 0 8px;
}

@media (max-width: 720px) {
  body[data-document-editor-route="true"] .document-template-editor.is-imported-inline .imported-ribbon-zoom {
    right: 12px;
    bottom: 12px;
  }
}

/* Structured Document Studio — dedicated RevEngine writing workspace.
   Structured templates are edited as live document content, never inside the
   browser's native PDF viewer. PDF is an explicit preview/export surface. */
body[data-document-editor-route="true"] .document-template-editor.is-structured-route {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: #edf1f6;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-editor-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 6px 12px;
  overflow: visible;
  border-bottom: 1px solid #d9e1eb;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 2px 10px rgba(19, 35, 59, .055);
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-editor-file-menu { order: 1; flex: 0 0 auto; }
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-document {
  order: 2;
  flex: 1 1 auto;
  min-width: 160px;
  padding: 0 8px;
}
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-guide { order: 3; }
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-autosave-control { order: 4; }
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-replace { order: 5; }
body[data-document-editor-route="true"] .document-template-editor.is-structured-route [data-structured-preview-pdf] { order: 6; }
body[data-document-editor-route="true"] .document-template-editor.is-structured-route [data-open-structured-settings] { order: 7; }

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-document strong {
  max-width: min(42vw, 520px);
  font-size: 13px;
  letter-spacing: -.01em;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-document > span:not(.badge) {
  display: none;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .structured-ribbon-action,
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-replace {
  flex: 0 0 auto;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border-color: #d9e2ee;
  border-radius: 8px;
  background: #fff;
  color: #203451;
  font-size: 11px;
  font-weight: 780;
  box-shadow: none;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .structured-ribbon-action:hover,
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-replace:hover {
  border-color: #b8c8dc;
  background: #f5f8fc;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-studio-workspace {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #edf1f6;
}

body[data-document-editor-route="true"] .structured-document-editor {
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #edf1f6;
}

body[data-document-editor-route="true"] .structured-document-sectionbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  height: 52px;
  padding: 6px 16px;
  border-bottom: 1px solid #d8e0ea;
  background: #f8fafc;
}

body[data-document-editor-route="true"] .structured-content-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body[data-document-editor-route="true"] .structured-content-picker > span {
  color: #6b7890;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body[data-document-editor-route="true"] .structured-content-picker select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 5px 30px 5px 10px;
  border: 1px solid #d3ddea;
  border-radius: 8px;
  background: #fff;
  color: #182b47;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
}

body[data-document-editor-route="true"] .structured-content-guidance {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

body[data-document-editor-route="true"] .structured-content-guidance strong {
  flex: 0 0 auto;
  color: #172b47;
  font-size: 11px;
}

body[data-document-editor-route="true"] .structured-content-guidance span {
  overflow: hidden;
  color: #718096;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-document-editor-route="true"] .structured-preview-status {
  min-width: max-content;
  color: #708097;
  font-size: 10px;
  font-weight: 750;
}

body[data-document-editor-route="true"] .structured-rich-editor-host {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% -15%, rgba(255,255,255,.9), rgba(255,255,255,0) 38%),
    #e9edf2;
}

body[data-document-editor-route="true"] .structured-rich-editor-host .rich-document-editor {
  min-height: 100%;
  overflow: visible;
  border: 0;
  background: transparent;
}

body[data-document-editor-route="true"] .structured-rich-editor-host .rich-document-toolbar {
  position: sticky;
  top: 0;
  z-index: 18;
  align-items: center;
  min-height: 58px;
  padding: 8px 14px;
  border-bottom: 1px solid #d5dee9;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 3px 12px rgba(20, 37, 62, .06);
  backdrop-filter: blur(14px);
}

body[data-document-editor-route="true"] .structured-rich-editor-host .rich-toolbar-group {
  min-height: 38px;
}

body[data-document-editor-route="true"] .structured-rich-editor-host .rich-document-guidance {
  width: min(900px, calc(100% - 36px));
  margin: 18px auto 0;
  padding: 9px 12px;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  background: rgba(248, 250, 252, .94);
  box-shadow: 0 4px 14px rgba(24, 41, 67, .04);
}

body[data-document-editor-route="true"] .structured-rich-editor-host .rich-document-surface {
  width: min(816px, calc(100% - 48px));
  min-height: 1056px;
  margin: 20px auto 72px;
  padding: 76px 82px 92px;
  overflow: visible;
  border: 1px solid #d3dbe5;
  border-radius: 2px;
  background: #fff;
  color: #17253a;
  box-shadow:
    0 24px 58px rgba(27, 42, 64, .15),
    0 4px 12px rgba(27, 42, 64, .08);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.58;
}

body[data-document-editor-route="true"] .structured-rich-editor-host .rich-document-surface:focus {
  border-color: #b6c7dd;
  box-shadow:
    0 26px 64px rgba(27, 42, 64, .16),
    0 0 0 3px rgba(36, 92, 255, .055);
}

body[data-document-editor-route="true"] .structured-empty-writing-state {
  display: grid;
  place-content: center;
  gap: 7px;
  width: min(760px, calc(100% - 48px));
  min-height: 460px;
  margin: 36px auto;
  padding: 40px;
  border: 1px dashed #c5d0df;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: #64738a;
  text-align: center;
}

body[data-document-editor-route="true"] .structured-empty-writing-state strong {
  color: #1c304e;
  font-size: 16px;
}

body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-designer-panel {
  top: 48px;
}

body[data-document-editor-route="true"] .structured-editor-drawer-backdrop {
  inset: 48px 0 0;
}

body[data-document-editor-route="true"] .structured-editor-drawer-tabs {
  position: sticky;
  top: 58px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0 -2px 14px;
  padding: 6px;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: rgba(245, 248, 252, .98);
}

body[data-document-editor-route="true"] .structured-editor-drawer-tabs button {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  color: #5d6d84;
  font-size: 10px;
  font-weight: 800;
}

body[data-document-editor-route="true"] .structured-editor-drawer-tabs button.is-active {
  color: #174fb9;
  background: #e7effc;
}

/* The structured route must never fall back to a native embedded PDF viewer. */
body[data-document-editor-route="true"] .document-template-editor.is-structured-route .document-preview-panel,
body[data-document-editor-route="true"] .document-template-editor.is-structured-route [data-template-preview-frame] {
  display: none !important;
}

@media (max-width: 1080px) {
  body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-autosave-control small,
  body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-document .badge,
  body[data-document-editor-route="true"] .structured-content-guidance span {
    display: none;
  }
  body[data-document-editor-route="true"] .structured-document-sectionbar {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  }
  body[data-document-editor-route="true"] .structured-preview-status { display: none; }
}

@media (max-width: 820px) {
  body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-replace,
  body[data-document-editor-route="true"] .document-template-editor.is-structured-route .imported-ribbon-guide {
    display: none;
  }
  body[data-document-editor-route="true"] .structured-document-sectionbar {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 52px;
  }
  body[data-document-editor-route="true"] .structured-content-guidance { display: none; }
  body[data-document-editor-route="true"] .structured-rich-editor-host .rich-document-surface {
    width: calc(100% - 24px);
    min-height: 880px;
    margin: 12px auto 36px;
    padding: 44px 34px 60px;
  }
}

/* ======================================================================
   Structured contract composer
   ----------------------------------------------------------------------
   A duplicated Rev Engine contract is edited as a real, branded document
   canvas. The document's visual hierarchy is preserved in the workspace;
   PDF is preview/export only and imported exact-layout files keep their
   separate canvas editor.
   ====================================================================== */
body[data-document-editor-route="true"] .document-template-editor.is-contract-visual-route .structured-document-editor {
  grid-template-rows: minmax(0, 1fr);
}

body[data-document-editor-route="true"] .document-template-editor.is-contract-visual-route .structured-document-sectionbar {
  display: none;
}

body[data-document-editor-route="true"] .document-template-editor.is-contract-visual-route .structured-rich-editor-host {
  overflow: hidden;
  background: #e8edf3;
}

.contract-visual-editor {
  position: relative;
  display: grid;
  grid-template-rows: 42px 72px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--contract-text, #14332e);
  background: #e8edf3;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.contract-editor-contextbar {
  position: relative;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 0 18px;
  border-bottom: 1px solid #dde4ed;
  background: #f8fafc;
}

.contract-editor-contextbar > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  overflow: hidden;
}

.contract-editor-contextbar strong {
  flex: 0 0 auto;
  color: #1d304c;
  font-size: 11px;
  font-weight: 820;
}

.contract-editor-contextbar span {
  overflow: hidden;
  color: #728096;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contract-editor-contextbar .contract-editor-word-count {
  flex: 0 0 auto;
  color: #66758b;
  font-weight: 700;
}

.contract-document-toolbar {
  position: relative;
  z-index: 34;
  display: flex;
  align-items: stretch;
  gap: 7px;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  min-height: 72px;
  min-width: 0;
  padding: 7px 12px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #d5dee9;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 3px 14px rgba(18, 36, 60, .055);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.contract-document-toolbar::-webkit-scrollbar { height: 7px; }
.contract-document-toolbar::-webkit-scrollbar-track { background: transparent; }
.contract-document-toolbar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #b7c1cf;
  background-clip: padding-box;
}

.contract-toolbar-group {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 49px;
  min-height: 49px;
  padding-right: 7px;
  border-right: 1px solid #e2e8f0;
}

.contract-toolbar-group:last-child { border-right: 0; }

.contract-toolbar-group > label {
  display: grid;
  grid-template-rows: 10px 32px;
  align-content: end;
  gap: 3px;
  box-sizing: border-box;
  height: 45px;
  color: #66758a;
  font-size: 8px;
  font-weight: 850;
  line-height: 10px;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.contract-toolbar-group > label > span {
  display: block;
  height: 10px;
  overflow: hidden;
  line-height: 10px;
  white-space: nowrap;
}

.contract-toolbar-group select,
.contract-toolbar-group input[type="url"] {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  margin: 0;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  background: #fff;
  color: #1e314e;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 30px;
}

.contract-toolbar-group select { min-width: 98px; padding: 0 26px 0 8px; }
.contract-toolbar-group .contract-toolbar-size select { min-width: 65px; }
.contract-toolbar-group input[type="url"] { width: 138px; padding: 0 9px; }

.contract-toolbar-group .icon-button,
.contract-toolbar-group .secondary-button.compact,
.contract-toolbar-group .text-button {
  align-self: flex-end;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  margin: 0;
  border-radius: 7px;
  font-size: 10px;
  line-height: 30px;
}

.contract-toolbar-group .icon-button {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.contract-toolbar-group .icon-button.is-active {
  border-color: #9fb4d0;
  background: #eaf1fb;
  color: #164f9d;
}

.contract-format-letter { font-size: 13px !important; }

.contract-toolbar-colour {
  grid-template-columns: 32px;
  grid-template-rows: 10px 32px !important;
  align-items: end;
  gap: 3px !important;
}

.contract-toolbar-colour input[type="color"] {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 3px;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  background: #fff;
}

.contract-toolbar-field select { min-width: 126px; }

.contract-editor-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 34px 72px 96px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.84), rgba(255,255,255,0) 34%),
    #e7ecf2;
}

.contract-editor-pages {
  width: 794px;
  margin: 0 auto;
  transform-origin: top center;
}

.contract-editor-page {
  position: relative;
  box-sizing: border-box;
  width: 794px;
  min-height: 1123px;
  margin: 0 auto 30px;
  overflow: hidden;
  border: 1px solid #d4dce6;
  border-radius: 2px;
  background: #fff;
  color: var(--contract-text, #14332e);
  box-shadow:
    0 28px 70px rgba(25, 39, 61, .14),
    0 5px 14px rgba(25, 39, 61, .075);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--contract-body-size, 9pt);
  line-height: 1.46;
}

.contract-editor-page-inner {
  box-sizing: border-box;
  min-height: 1060px;
  padding: var(--contract-page-margin, 42px) 58px 74px;
}

.contract-editor-page--first .contract-editor-page-inner {
  padding-top: 0;
}

.contract-page-accent {
  height: 24px;
  margin: 0 -58px 17px;
  background: var(--contract-primary, #176b5b);
}

.contract-first-header {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) 178px;
  align-items: start;
  gap: 22px;
  min-height: 126px;
  padding-top: 2px;
}

.contract-first-logo {
  display: grid;
  place-items: center;
  min-height: 112px;
}

.contract-editor-logo {
  display: block;
  max-width: 118px;
  max-height: 86px;
  object-fit: contain;
}

.contract-editor-logo-fallback {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid var(--contract-primary, #176b5b);
  border-radius: 20px;
  color: var(--contract-primary, #176b5b);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.contract-first-company {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 6px;
  color: var(--contract-muted, #5d716c);
  font-size: 9px;
  line-height: 1.35;
}

.contract-first-company > strong {
  margin-bottom: 1px;
  color: var(--contract-text, #14332e);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.contract-first-document {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding-top: 5px;
}

.contract-first-document > strong {
  color: var(--contract-primary, #176b5b);
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.contract-first-document > span {
  color: var(--contract-text, #14332e);
  font-size: 11px;
  font-weight: 850;
}

.contract-first-document > small {
  color: var(--contract-muted, #5d716c);
  font-size: 9px;
}

.contract-header-rule {
  height: 3px;
  margin: 4px 0 13px;
  background: var(--contract-accent, #ddf4ea);
}

.contract-title-band,
.contract-part-band {
  margin: 0 0 22px;
  padding: 8px 12px;
  border: 0;
  background: var(--contract-accent, #ddf4ea);
  color: var(--contract-primary, #176b5b);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.contract-part-band {
  margin-bottom: 25px;
  font-size: 16px;
}

.contract-audience-line {
  margin: 0 0 7px;
  color: var(--contract-primary, #176b5b);
  font-weight: 820;
}

.contract-audience-description {
  margin: 0 0 18px;
  color: var(--contract-muted, #5d716c);
  font-size: 9px;
}

.contract-section-band {
  margin: 21px 0 11px;
  padding: 6px 9px;
  background: var(--contract-table-header, #e8f5f1);
  color: var(--contract-primary, #176b5b);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.contract-section-heading {
  margin: 23px 0 10px;
  color: var(--contract-primary, #176b5b);
  font-size: 11px;
  font-weight: 850;
}

.contract-summary-table {
  overflow: hidden;
  border-top: 1px solid var(--contract-border, #c9ded8);
  border-bottom: 1px solid var(--contract-border, #c9ded8);
}

.contract-summary-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 24px;
  align-items: center;
  padding: 4px 9px;
  border-bottom: 1px solid rgba(120, 150, 145, .18);
  font-size: 8.6px;
}

.contract-summary-row:last-child { border-bottom: 0; }
.contract-summary-row.is-striped { background: var(--contract-table-header, #e8f5f1); }
.contract-summary-row strong { color: var(--contract-text, #14332e); font-weight: 800; }

.contract-live-value {
  color: #245e9c;
  font-weight: 700;
}

.contract-parties-copy,
.contract-schedule-section p,
.contract-small-note {
  margin: 0 0 11px;
  color: var(--contract-text, #14332e);
  font-size: 9px;
  line-height: 1.55;
}

.contract-live-data-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 22px;
  padding: 9px 11px;
  border: 1px solid #d7e5f2;
  border-radius: 7px;
  background: #f5f9fd;
  color: #5a6f88;
  font-size: 8px;
  line-height: 1.45;
}

.contract-live-data-note > span:first-child { color: #3570ad; }

.contract-page-continuation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
  height: 63px;
  margin: 35px 58px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--contract-primary, #176b5b);
}

.contract-page-continuation > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contract-page-continuation strong {
  color: var(--contract-text, #14332e);
  font-size: 10px;
  font-weight: 850;
}

.contract-page-continuation span {
  color: var(--contract-muted, #5d716c);
  font-size: 8px;
}

.contract-editor-page--terms .contract-editor-page-inner,
.contract-editor-page--schedule .contract-editor-page-inner,
.contract-editor-page--custom .contract-editor-page-inner,
.contract-editor-page--signature .contract-editor-page-inner {
  min-height: 958px;
  padding-top: 22px;
}

.contract-terms-surface,
.contract-custom-surface {
  min-height: 60px;
  outline: 0;
  color: var(--contract-text, #14332e);
}

.contract-terms-surface > :first-child,
.contract-custom-surface > :first-child { margin-top: 0; }

.contract-terms-surface h1,
.contract-terms-surface h2,
.contract-terms-surface h3,
.contract-custom-surface h1,
.contract-custom-surface h2,
.contract-custom-surface h3 {
  margin: 22px 0 10px;
  color: var(--contract-primary, #176b5b);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.35;
}

.contract-terms-surface h1,
.contract-custom-surface h1 { font-size: 14px; }
.contract-terms-surface h2,
.contract-custom-surface h2 { font-size: 11px; }
.contract-terms-surface h3,
.contract-custom-surface h3 { font-size: 10px; }

.contract-terms-surface p,
.contract-terms-surface li,
.contract-terms-surface blockquote,
.contract-custom-surface p,
.contract-custom-surface li,
.contract-custom-surface blockquote {
  margin: 0 0 12px;
  color: var(--contract-text, #14332e);
  font-size: var(--contract-body-size, 9pt);
  line-height: 1.55;
}

.contract-terms-surface ul,
.contract-terms-surface ol,
.contract-custom-surface ul,
.contract-custom-surface ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.contract-terms-surface blockquote,
.contract-custom-surface blockquote {
  padding-left: 12px;
  border-left: 3px solid var(--contract-primary, #176b5b);
  color: var(--contract-muted, #5d716c);
}

.contract-terms-surface a,
.contract-custom-surface a { color: #1155cc; text-decoration: underline; }

.contract-terms-surface .rich-smart-field,
.contract-custom-surface .rich-smart-field {
  display: inline-block;
  margin: 0 1px;
  padding: 1px 4px;
  border: 1px solid #bdd3e9;
  border-radius: 4px;
  background: #eef6fd;
  color: #245d96;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  user-select: all;
}

.contract-terms-surface:focus,
.contract-custom-surface:focus {
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(37, 91, 158, .055);
}

.contract-terms-surface [contenteditable="true"]:focus,
.contract-custom-surface [contenteditable="true"]:focus { outline: 0; }

.contract-title-band[contenteditable="true"],
.contract-short-title[contenteditable="true"],
.contract-audience-description[contenteditable="true"],
.contract-schedule-section--editable [contenteditable="true"] {
  outline: 0;
  transition: box-shadow .14s ease, background .14s ease;
}

.contract-title-band[contenteditable="true"]:hover,
.contract-short-title[contenteditable="true"]:hover,
.contract-audience-description[contenteditable="true"]:hover,
.contract-schedule-section--editable [contenteditable="true"]:hover {
  box-shadow: inset 0 -1px 0 rgba(35, 93, 81, .25);
}

.contract-title-band[contenteditable="true"]:focus,
.contract-short-title[contenteditable="true"]:focus,
.contract-audience-description[contenteditable="true"]:focus,
.contract-schedule-section--editable [contenteditable="true"]:focus {
  background: rgba(229, 242, 250, .62);
  box-shadow: 0 0 0 3px rgba(30, 99, 151, .08);
}

.contract-data-table {
  overflow: hidden;
  border: 1px solid var(--contract-border, #c9ded8);
  border-radius: 2px;
}

.contract-data-row {
  display: grid;
  grid-template-columns: var(--contract-table-columns, repeat(4, minmax(0, 1fr)));
  min-height: 36px;
  border-top: 1px solid var(--contract-border, #c9ded8);
  background: #fff;
}

.contract-data-row:first-child { border-top: 0; }
.contract-data-row--header { background: var(--contract-primary, #176b5b); color: #fff; }

.contract-data-row > span,
.contract-data-row > strong {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border-left: 1px solid var(--contract-border, #c9ded8);
  font-size: 8px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.contract-data-row > :first-child { border-left: 0; }
.contract-data-row > strong { font-weight: 850; }

.contract-sample-bullets,
.contract-schedule-list {
  margin: 0;
  padding-left: 22px;
  color: var(--contract-text, #14332e);
  font-size: 9px;
  line-height: 1.55;
}

.contract-sample-bullets li,
.contract-schedule-list li { margin-bottom: 7px; }

.contract-schedule-purpose {
  color: var(--contract-primary, #176b5b) !important;
  font-weight: 750;
}

.contract-small-note {
  margin-top: 12px;
  color: var(--contract-muted, #5d716c);
  font-size: 8px;
}

.contract-signature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin-top: 65px;
}

.contract-signature-grid > div {
  display: grid;
  gap: 14px;
  color: var(--contract-muted, #5d716c);
  font-size: 9px;
}

.contract-signature-grid strong { color: var(--contract-text, #14332e); }
.contract-signature-line { height: 1px; margin-bottom: 2px; background: #778493; }

.contract-signature-live {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin-top: 38px;
  color: #245e9c;
  font-size: 8px;
}

.contract-editor-page-footer {
  position: absolute;
  right: 58px;
  bottom: 27px;
  left: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 8px;
  border-top: 1px solid #e4e8ee;
  color: #8893a3;
  font-size: 7px;
}

.contract-editor-page-footer.has-no-page-number {
  border-top-color: transparent;
}

.contract-first-company-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.contract-first-company-meta > span:not([hidden]) + span:not([hidden])::before {
  content: " | ";
  color: var(--contract-muted, #5d716c);
  white-space: pre;
}

.contract-first-header.is-logo-right .contract-first-document { order: 1; }
.contract-first-header.is-logo-right .contract-first-company { order: 2; }
.contract-first-header.is-logo-right .contract-first-logo { order: 3; }

.contract-first-header.is-logo-size-small .contract-editor-logo { max-width: 86px; max-height: 62px; }
.contract-first-header.is-logo-size-large .contract-editor-logo { max-width: 136px; max-height: 98px; }
.contract-first-header.is-logo-size-small .contract-editor-logo-fallback { width: 58px; height: 58px; border-radius: 15px; font-size: 19px; }
.contract-first-header.is-logo-size-large .contract-editor-logo-fallback { width: 88px; height: 88px; border-radius: 22px; font-size: 28px; }

.contract-first-header.is-layout-compact {
  grid-template-columns: 108px minmax(0, 1fr) 160px;
  min-height: 96px;
  gap: 17px;
}
.contract-first-header.is-layout-compact .contract-first-logo { min-height: 86px; }
.contract-first-header.is-layout-compact .contract-first-company { font-size: 8px; }
.contract-first-header.is-layout-compact .contract-first-company > strong { font-size: 16px; }
.contract-first-header.is-layout-compact .contract-first-document > strong { font-size: 17px; }

.contract-first-header.is-layout-stacked {
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-areas:
    "logo document"
    "company company";
  gap: 9px 20px;
  min-height: 145px;
}
.contract-first-header.is-layout-stacked .contract-first-logo { grid-area: logo; min-height: 78px; justify-items: start; }
.contract-first-header.is-layout-stacked .contract-first-company { grid-area: company; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 18px; padding-top: 0; }
.contract-first-header.is-layout-stacked .contract-first-company > strong { grid-column: 1 / -1; }
.contract-first-header.is-layout-stacked .contract-first-document { grid-area: document; align-items: flex-end; text-align: right; }
.contract-first-header.is-layout-stacked.is-logo-right { grid-template-areas: "document logo" "company company"; grid-template-columns: minmax(0, 1fr) 132px; }
.contract-first-header.is-layout-stacked.is-logo-right .contract-first-logo { justify-items: end; }
.contract-first-header.is-layout-stacked.is-logo-right .contract-first-document { align-items: flex-start; text-align: left; }

.contract-canvas-view-controls {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 4px 6px;
  border: 1px solid #d3dce8;
  border-radius: 10px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 28px rgba(24, 42, 69, .16);
  backdrop-filter: blur(12px);
}

.contract-canvas-view-controls .icon-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 6px;
}

.contract-canvas-view-controls .text-button {
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  color: #4d607b;
  font-size: 9px;
  font-weight: 800;
}

.contract-canvas-view-controls .contract-zoom-value { min-width: 46px; text-align: center; }
.contract-view-separator { width: 1px; height: 18px; margin: 0 2px; background: #dce3ec; }

@media (max-width: 1100px) {
  .contract-visual-editor { grid-template-rows: 38px 68px minmax(0, 1fr); }
  .contract-editor-contextbar { padding: 0 12px; }
  .contract-editor-contextbar > div > span { display: none; }
  .contract-toolbar-link { display: none; }
  .contract-editor-canvas { padding-right: 30px; padding-left: 30px; }
}

/* ======================================================================
   Document Studio · bound-field interaction model
   ====================================================================== */
/* Structured contract copy uses one interaction language:
   authored copy is directly editable, sample collection values are preview-only,
   and bound values remain governed by their RevEngine data source. */
.contract-authored-copy[contenteditable="true"],
.contract-live-collection-value[contenteditable="true"],
.contract-continuation-title[contenteditable="true"] {
  border-radius: 3px;
  cursor: text;
  outline: 0;
  transition: background .14s ease, box-shadow .14s ease;
}

.contract-authored-copy[contenteditable="true"]:hover,
.contract-authored-copy[contenteditable="true"]:focus,
.contract-continuation-title[contenteditable="true"]:hover,
.contract-continuation-title[contenteditable="true"]:focus {
  background: rgba(23, 107, 91, .065);
  box-shadow: 0 0 0 2px rgba(23, 107, 91, .13);
}

.contract-data-row--header .contract-authored-copy[contenteditable="true"] {
  color: #fff;
}

.contract-data-row--header .contract-authored-copy[contenteditable="true"]:hover,
.contract-data-row--header .contract-authored-copy[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.contract-live-collection-value[contenteditable="true"] {
  color: #245e9c;
  font-weight: 700;
}

.contract-live-collection-value[contenteditable="true"]:hover,
.contract-live-collection-value[contenteditable="true"]:focus {
  background: #edf5fd;
  box-shadow: 0 0 0 2px rgba(37, 94, 156, .14);
}

.contract-data-row .contract-live-collection-value[contenteditable="true"] {
  width: 100%;
}

.contract-bound-value {
  display: inline-block;
  max-width: 100%;
  border-radius: 4px;
  cursor: pointer;
  outline: 0;
  transition: background .14s ease, box-shadow .14s ease, color .14s ease;
}

.contract-bound-value.is-company-field,
.contract-bound-value.is-system-field {
  color: inherit;
}

.contract-bound-value.is-live-field,
.contract-live-value.contract-bound-value,
.contract-inline-live-value {
  color: #245e9c;
  font-weight: 700;
}

.contract-bound-value:hover,
.contract-bound-value:focus-visible,
.contract-bound-value.is-bound-selected {
  background: #edf5fd;
  box-shadow: 0 0 0 2px rgba(37, 94, 156, .16);
}

.contract-bound-value.is-company-field:hover,
.contract-bound-value.is-company-field:focus-visible,
.contract-bound-value.is-company-field.is-bound-selected {
  background: #f0f6f5;
  box-shadow: 0 0 0 2px rgba(23, 107, 91, .16);
}

.contract-bound-value.is-system-field:hover,
.contract-bound-value.is-system-field:focus-visible,
.contract-bound-value.is-system-field.is-bound-selected {
  background: #f4f3fb;
  box-shadow: 0 0 0 2px rgba(90, 76, 145, .14);
}

.contract-bound-asset {
  border-radius: 8px;
  cursor: pointer;
  outline: 0;
  transition: background .14s ease, box-shadow .14s ease;
}

.contract-bound-asset:hover,
.contract-bound-asset:focus-visible,
.contract-bound-asset.is-bound-selected {
  background: rgba(240, 246, 245, .72);
  box-shadow: 0 0 0 2px rgba(23, 107, 91, .16);
}

.contract-terms-surface .rich-smart-field,
.contract-custom-surface .rich-smart-field {
  cursor: pointer;
}

.contract-terms-surface .rich-smart-field.is-bound-selected,
.contract-custom-surface .rich-smart-field.is-bound-selected {
  border-color: #7fa9d2;
  background: #e6f1fc;
  box-shadow: 0 0 0 2px rgba(37, 94, 156, .12);
}

.contract-field-inspector[hidden] { display: none !important; }

.contract-field-inspector {
  position: absolute;
  top: 118px;
  right: 24px;
  z-index: 48;
  width: 330px;
  max-width: calc(100% - 48px);
  max-height: calc(100% - 180px);
  overflow: auto;
  border: 1px solid #d5deea;
  border-radius: 14px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 22px 60px rgba(25, 39, 61, .18), 0 4px 14px rgba(25, 39, 61, .08);
  backdrop-filter: blur(14px);
}

.contract-field-inspector-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.contract-field-inspector-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.contract-field-inspector-card > header > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.contract-field-inspector-card > header strong {
  overflow: hidden;
  color: #182c49;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.contract-field-inspector-card > header .icon-button {
  flex: 0 0 auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
  font-size: 18px;
}

.contract-inspector-badge {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef4fb;
  color: #315d8e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.contract-inspector-badge.is-company {
  background: #edf6f3;
  color: #176b5b;
}

.contract-inspector-badge.is-system {
  background: #f2f0f8;
  color: #62568b;
}

.contract-inspector-current,
.contract-inspector-source {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid #e3e9f1;
  border-radius: 9px;
  background: #f8fafc;
}

.contract-inspector-current span,
.contract-inspector-source span {
  color: #75839a;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contract-inspector-current strong,
.contract-inspector-source strong {
  overflow-wrap: anywhere;
  color: #233752;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.4;
}

.contract-inspector-section {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

.contract-inspector-section + .contract-inspector-section {
  padding-top: 14px;
  border-top: 1px solid #e6ebf2;
}

.contract-inspector-label {
  display: grid;
  gap: 5px;
}

.contract-inspector-label > span {
  color: #52647e;
  font-size: 9px;
  font-weight: 820;
}

.contract-inspector-label input,
.contract-inspector-label select {
  width: 100%;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #cad6e5;
  border-radius: 8px;
  background: #fff;
  color: #182c49;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.contract-inspector-label input { padding: 0 10px; }
.contract-inspector-label select { padding: 0 30px 0 10px; }

.contract-inspector-label input:focus,
.contract-inspector-label select:focus {
  border-color: #8ba9cc;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(37, 94, 156, .09);
}

.contract-inspector-section small {
  color: #728096;
  font-size: 9px;
  line-height: 1.45;
}

.contract-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.contract-inspector-actions .secondary-button.compact,
.contract-inspector-actions .text-button,
.contract-inspector-convert {
  min-height: 32px;
  height: 32px;
  border-radius: 7px;
  font-size: 9px;
}

.contract-inspector-actions button:disabled {
  cursor: default;
  opacity: .45;
}

@media (max-width: 920px) {
  .contract-field-inspector {
    top: 108px;
    right: 14px;
    width: 300px;
    max-width: calc(100% - 28px);
  }
}

/* ======================================================================
   Structured invoice + quote composer
   ----------------------------------------------------------------------
   Invoices and quotes use the same document-first editing model as
   contracts: full branded layout, live-data bindings, editable authored
   wording, rich text, structural colour/fill controls and document-level
   history. PDF remains preview/export rather than the editing surface.
   ====================================================================== */
body[data-document-editor-route="true"] .document-template-editor.is-business-visual-route .structured-document-editor {
  grid-template-rows: minmax(0, 1fr);
}
body[data-document-editor-route="true"] .document-template-editor.is-business-visual-route .structured-document-sectionbar { display: none; }
body[data-document-editor-route="true"] .document-template-editor.is-business-visual-route .structured-rich-editor-host {
  overflow: hidden;
  background: #e8edf3;
}
.business-document-workspace {
  position: relative;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #11213d;
  background: #e7ecf2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.business-document-toolbar { grid-row: 1; }
.business-fill-tools .business-clear-fill {
  min-width: 48px;
  padding: 0 7px;
  white-space: nowrap;
}
.business-document-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 34px 72px 96px;
  background: radial-gradient(circle at 50% -10%, rgba(255,255,255,.84), rgba(255,255,255,0) 34%), #e7ecf2;
}
.business-document-pages {
  width: 210mm;
  margin: 0 auto;
}
.business-editor-page {
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  min-height: 297mm;
  max-height: 297mm;
  margin: 0 auto 30px;
  overflow: hidden;
  border: 0;
  outline: 1px solid #d4dce6;
  border-radius: 2px;
  background: #fff;
  color: var(--business-text, #11213d);
  box-shadow: 0 28px 70px rgba(25,39,61,.14), 0 5px 14px rgba(25,39,61,.075);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--business-body, 9pt);
  line-height: 1.42;
}
.business-editor-page-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: max(42px, var(--business-margin, 42px));
}
.business-page-start { margin-top: 0 !important; }
.business-page-top-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background: var(--business-primary, #1d65bc);
  cursor: pointer;
}
.business-editor-page.is-minimal .business-page-top-accent { height: 0; }
.business-document-header {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) 180px;
  gap: 20px;
  align-items: start;
  min-height: 142px;
  padding-top: 16px;
}
.business-document-header.is-stacked {
  grid-template-columns: minmax(0, 1fr) 190px;
  grid-template-areas: "logo ref" "company ref";
}
.business-document-header.is-stacked .business-document-logo-slot { grid-area: logo; }
.business-document-header.is-stacked .business-document-company { grid-area: company; }
.business-document-header.is-stacked .business-document-reference { grid-area: ref; }
.business-document-header.is-logo-right .business-document-logo-slot { order: 3; }
.business-document-header.is-logo-right .business-document-company { order: 1; }
.business-document-header.is-logo-right .business-document-reference { order: 2; }
.business-document-logo-slot {
  display: grid;
  place-items: center;
  min-height: 94px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.business-document-logo-slot:hover,
.business-document-logo-slot.is-bound-selected { border-color: #8db4ed; background: #f3f8ff; }
.business-editor-logo { max-width: 118px; max-height: 90px; object-fit: contain; }
.business-editor-logo-fallback {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: var(--business-primary, #1d65bc);
  color: #fff;
  font-size: 22px;
  font-weight: 850;
}
.business-document-company h1 {
  margin: 0 0 7px;
  color: var(--business-text, #11213d);
  font-size: 25px;
  line-height: 1.15;
}
.business-document-company > div {
  margin: 0 0 5px;
  color: var(--business-muted, #60708a);
  font-size: 11px;
}
.business-document-reference { display: grid; gap: 8px; justify-items: start; }
.business-document-reference > strong {
  color: var(--business-primary, #1d65bc);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.02em;
}
.business-document-reference > span { color: var(--business-text); font-size: 15px; font-weight: 850; }
.business-document-reference > small { color: var(--business-muted); font-size: 10px; }
.business-header-divider {
  height: 3px;
  margin: 4px 0 28px;
  background: var(--business-accent, #ffe386);
  cursor: pointer;
}
.business-info-grid {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 34px;
  margin-bottom: 32px;
}
.business-info-card { min-width: 0; }
.business-block-heading {
  margin: 0 0 13px;
  color: color-mix(in srgb, var(--business-primary) 80%, #101828);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: text;
}
.business-info-card > strong { display: block; margin-bottom: 6px; font-size: 14px; }
.business-info-card > div { margin: 2px 0; color: var(--business-muted); font-size: 10px; }
.business-details-card dl { margin: 0; }
.business-details-card dl > div { display: grid; grid-template-columns: 95px 1fr; gap: 12px; margin: 0 0 7px; }
.business-details-card dt { color: var(--business-text); font-weight: 750; }
.business-details-card dd { margin: 0; }
.business-line-items { margin-bottom: 28px; }
.business-line-items table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10px;
}
.business-line-items thead {
  background: var(--business-table, #edf4fc);
  color: var(--business-text, #11213d);
  cursor: pointer;
}
.business-line-items th,
.business-line-items td { padding: 10px 9px; border-bottom: 1px solid var(--business-border, #d8e1ee); text-align: left; vertical-align: top; }
.business-line-items th:nth-child(1), .business-line-items td:nth-child(1) { width: 55%; }
.business-line-items th:nth-child(2), .business-line-items td:nth-child(2) { width: 10%; }
.business-line-items th:nth-child(3), .business-line-items td:nth-child(3) { width: 16%; }
.business-line-items th:nth-child(4), .business-line-items td:nth-child(4) { width: 19%; }
.business-totals { width: 43%; margin: 0 0 32px auto; }
.business-total-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 6px 0; border-bottom: 1px solid var(--business-border); }
.business-total-row.is-total { margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--business-primary); border-bottom: 0; font-size: 13px; }
.business-text-block,
.business-payment-options,
.business-online-payment { margin: 28px 0; }
.business-rich-surface {
  min-height: 28px;
  padding: 3px 0;
  outline: 0;
  color: var(--business-text);
  font-size: 10px;
}
.business-rich-surface:focus { box-shadow: inset 3px 0 0 #9ab9df; }
.business-rich-surface p,
.business-rich-surface h1,
.business-rich-surface h2,
.business-rich-surface h3,
.business-rich-surface ul,
.business-rich-surface ol,
.business-rich-surface blockquote { margin: 0 0 8px; }
.business-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.business-payment-card { overflow: hidden; border: 1px solid var(--business-border); border-radius: 8px; }
.business-payment-card h3 { margin: 0; padding: 8px 10px; background: var(--business-accent); font-size: 10px; cursor: text; }
.business-payment-card > div { display: grid; grid-template-columns: 105px 1fr; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--business-border); font-size: 9px; }
.business-online-payment > a { display: inline-flex; margin: 5px 0 8px; padding: 8px 12px; border-radius: 7px; background: var(--business-primary); color: #fff; font-weight: 800; text-decoration: none; }
.business-online-payment > small { display: block; color: var(--business-muted); }
.business-page-number { position: absolute; right: 42px; bottom: 25px; color: var(--business-muted); font-size: 8px; }
.business-bound-value { border-radius: 3px; outline: 0; }
.business-bound-value.is-live-field { color: #1d65bc; font-weight: 720; }
.business-bound-value.is-live-field:hover { background: #edf5ff; box-shadow: 0 0 0 2px #d7e8ff; }
.business-bound-value.is-company-field:hover { background: #f3f8ff; box-shadow: 0 0 0 2px #dce9fa; }
.business-bound-value.is-system-field { cursor: pointer; font-weight: 820; }
.business-bound-value.is-system-field:hover { background: #f3f5f7; box-shadow: 0 0 0 2px #e1e6ec; }
.business-bound-value.is-bound-selected { background: #e9f3ff; box-shadow: 0 0 0 2px #76a9ea; }
.business-authored-copy { outline: 0; border-radius: 3px; }
.business-authored-copy:focus { background: #fffce8; box-shadow: 0 0 0 2px rgba(211,169,0,.2); }
[data-document-style-key] { transition: box-shadow .12s ease; }
[data-document-style-key].is-document-style-selected { box-shadow: 0 0 0 2px #76a9ea !important; }
.business-field-inspector { position: fixed; top: 150px; right: 28px; z-index: 55; width: 330px; }
.business-canvas-zoom { z-index: 54; }

@media (max-width: 900px) {
  .business-document-canvas { padding-inline: 24px; }
  .business-field-inspector { right: 16px; width: min(330px, calc(100vw - 32px)); }
}

.contract-fill-tools .contract-clear-fill {
  min-width: 48px;
  padding: 0 7px;
  white-space: nowrap;
}
.contract-visual-editor [data-document-style-key] { transition: box-shadow .12s ease; }
.contract-visual-editor [data-document-style-key].is-document-style-selected { box-shadow: 0 0 0 2px #76a9ea !important; }

/* Structured document canvases must not inherit the application's global
   920px data-table minimum. Document tables are constrained to the paper. */
.business-line-items table {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.business-line-items th,
.business-line-items td {
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.business-editor-page [contenteditable="true"]:focus {
  outline: 0;
}
.business-line-items th[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 1px rgba(29,101,188,.28);
}

/* ======================================================================
   Document Studio toolbar stability
   ----------------------------------------------------------------------
   Windows Chromium can visually repaint focused native select/color
   controls at a different vertical offset when they live inside a
   horizontally scrolling toolbar. The imported-document editor already
   had to defend against this browser behaviour. Structured contract,
   invoice and quote toolbars use fixed visual faces with the native
   controls as transparent interaction overlays. The toolbar geometry is
   therefore invariant across focus, selection, colour and Smart Field
   state changes.
   ====================================================================== */
body[data-document-editor-route="true"] .contract-document-toolbar.document-toolbar-stable {
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  padding-top: 7px;
  padding-bottom: 8px;
  overflow-x: auto;
  overflow-y: clip;
  contain: layout paint;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group {
  align-items: flex-end;
  box-sizing: border-box;
  height: 49px;
  min-height: 49px;
  max-height: 49px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group > label {
  position: relative;
  display: grid;
  grid-template-rows: 10px 32px;
  align-content: end;
  align-items: end;
  gap: 3px;
  box-sizing: border-box;
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  margin: 0;
  padding: 0;
  transform: none !important;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group > label > span:first-child {
  box-sizing: border-box;
  height: 10px;
  min-height: 10px;
  max-height: 10px;
  margin: 0;
  padding: 0 0 0 2px;
  overflow: hidden;
  line-height: 10px;
  white-space: nowrap;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-native-shell {
  position: relative;
  display: inline-grid;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 0;
  padding: 0;
  overflow: visible;
  vertical-align: bottom;
  transform: none !important;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-select-shell {
  width: 118px;
  min-width: 118px;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-size .document-toolbar-select-shell {
  width: 68px;
  min-width: 68px;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-field .document-toolbar-select-shell {
  width: 150px;
  min-width: 150px;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-colour-shell {
  width: 32px;
  min-width: 32px;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-control-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 0;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  background: #fff;
  color: #1e314e;
  pointer-events: none;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-select-face {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 30px;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-select-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-colour-face {
  display: grid;
  place-items: center;
  padding: 3px;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-colour-swatch {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(17, 33, 61, .12);
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-native-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .001 !important;
  cursor: pointer;
  transform: none !important;
  appearance: auto;
  -webkit-appearance: auto;
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-native-shell.is-focused .document-toolbar-control-face,
body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-native-shell:focus-within .document-toolbar-control-face {
  border-color: #2363ff;
  box-shadow: 0 0 0 3px rgba(35, 99, 255, .12);
}

body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-native-shell.is-disabled {
  opacity: .52;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group .icon-button,
body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group .secondary-button.compact,
body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group .text-button,
body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group input[type="url"] {
  align-self: flex-end;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin-top: 0;
  margin-bottom: 0;
  transform: none !important;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group .icon-button,
body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group .secondary-button.compact,
body[data-document-editor-route="true"] .document-toolbar-stable .contract-toolbar-group .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body[data-document-editor-route="true"] .document-toolbar-stable .contract-clear-fill,
body[data-document-editor-route="true"] .document-toolbar-stable .business-clear-fill {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  white-space: nowrap;
}

/* The native controls remain the source of truth for existing editor event
   handlers. Hide their Chromium repaint while preserving native keyboard and
   popup behaviour. */
body[data-document-editor-route="true"] .document-toolbar-stable select.document-toolbar-native-overlay:focus,
body[data-document-editor-route="true"] .document-toolbar-stable input[type="color"].document-toolbar-native-overlay:focus {
  outline: 0 !important;
  box-shadow: none !important;
}


/* ======================================================================
   Document Studio · selectable authored typography + unified view controls
   ====================================================================== */
/* Native selects remain the input mechanism, but RevEngine owns the visible
   control face. No browser/OS dropdown glyph is rendered in the toolbar. */
body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-select-face::after,
body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-select-face::before {
  content: none !important;
  display: none !important;
}

/* Typography overrides are intentionally inherited by nested text inside a
   selected structural element (for example every TH in a table header). */
[data-document-style-key] {
  --document-element-font-family: inherit;
  --document-element-font-size: inherit;
  --document-element-font-weight: inherit;
  --document-element-font-style: inherit;
  --document-element-text-decoration: inherit;
  --document-element-text-align: inherit;
}

/* Decorative rules are real selectable document objects rather than dead
   pixels. Their normal state stays clean; hover/selection exposes editing. */
.contract-page-accent[data-document-style-key],
.business-page-top-accent[data-document-style-key],
.business-header-divider[data-document-style-key] {
  cursor: pointer;
  outline: 0;
}
.contract-page-accent[data-document-style-key]:hover,
.business-page-top-accent[data-document-style-key]:hover,
.business-header-divider[data-document-style-key]:hover {
  box-shadow: inset 0 0 0 2px rgba(35, 99, 255, .30);
}

/* Invoice and quote canvases use the exact same premium view control shell as
   contracts. Keeping one component also prevents future style drift. */
.business-document-workspace > .business-canvas-zoom.contract-canvas-view-controls {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: auto;
  z-index: 54;
}
.business-document-workspace > .business-canvas-zoom.contract-canvas-view-controls .contract-zoom-value {
  min-width: 46px;
  text-align: center;
}

/* Directly editable template objects should advertise that they can receive
   formatting, not only text changes. */
.business-editor-page [data-document-style-key][contenteditable="true"],
.contract-visual-editor [data-document-style-key][contenteditable="true"] {
  cursor: text;
}

/* ======================================================================
   Document Studio · selection-state integrity
   ----------------------------------------------------------------------
   Keep the inspector, table-header styling, and toolbar state truthful to
   the object currently selected. These rules intentionally use inheritance
   inside styled table-header containers so one structural style controls the
   full header while the individual labels remain directly editable.
   ====================================================================== */
.contract-field-inspector-card,
.contract-field-inspector-card > *,
.contract-inspector-section,
.contract-inspector-label {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.contract-inspector-label {
  width: 100%;
}

.contract-inspector-label input,
.contract-inspector-label select {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.business-field-inspector .contract-inspector-actions {
  width: 100%;
}

.business-field-inspector .contract-inspector-actions .secondary-button:only-child {
  width: 100%;
  justify-content: center;
}

/* The table header is one designed object for typography/fill. Header labels
   remain contenteditable, but inherit the selected header object's visual
   style instead of fighting it with local defaults. */
.business-line-items thead[data-document-style-key] {
  font-size: 10px;
  font-weight: 800;
}
.business-line-items thead[data-document-style-key] th {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: inherit;
}

.contract-data-row--header[data-document-style-key] {
  font-size: 8px;
  font-weight: 850;
}
.contract-data-row--header[data-document-style-key] > .contract-authored-copy,
.contract-data-row--header[data-document-style-key] > strong,
.contract-data-row--header[data-document-style-key] > span {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: inherit;
}

/* Disabled formatting controls are deliberately muted when there is no
   applicable selection; this prevents stale-looking state from implying that
   an old colour/fill is still active on the new object. */
body[data-document-editor-route="true"] .document-toolbar-stable .document-toolbar-native-shell.is-disabled .document-toolbar-control-face {
  background: #f7f9fc;
}

/* ======================================================================
   Premium O&M Contract Studio
   ----------------------------------------------------------------------
   Focused contract authoring: the document is the product. The application
   shell disappears, the editor owns the viewport, and structured business
   data lives in a compact inspector instead of a form-heavy admin page.
   ====================================================================== */
body[data-page="contract-editor"][data-document-editor-route="true"] {
  --studio-ink: #11243f;
  --studio-muted: #6e7c92;
  --studio-line: #dfe6ef;
  --studio-soft-line: #e9eef5;
  --studio-canvas: #e9eef5;
  --studio-panel: #ffffff;
  --studio-blue: #245eea;
  --studio-blue-hover: #174fd4;
  --studio-green: #147a5a;
  --studio-green-hover: #0f674c;
  background: #eef2f7;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .content,
body[data-page="contract-editor"][data-document-editor-route="true"] .page-mount {
  background: #eef2f7;
}

.contract-studio {
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 58px;
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  color: var(--studio-ink);
  background: #eef2f7;
}

.contract-studio-topbar {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 8px 28px rgba(28, 48, 78, .055);
}

.contract-studio-topbar-left,
.contract-studio-title-row,
.contract-studio-topbar-actions {
  display: flex;
  align-items: center;
}

.contract-studio-topbar-left { min-width: 0; gap: 12px; }

.contract-studio-back {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #dbe3ed;
  border-radius: 12px;
  background: #fff;
  color: #233a5b;
  text-decoration: none;
  font-size: 22px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(24, 43, 70, .04);
}

.contract-studio-back:hover { border-color: #c9d5e5; background: #f7f9fc; }
.contract-studio-title-block { min-width: 0; }
.contract-studio-kicker {
  margin-bottom: 2px;
  color: #748299;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contract-studio-title-row { min-width: 0; gap: 9px; }
.contract-studio-title-row h1 {
  overflow: hidden;
  max-width: 520px;
  margin: 0;
  color: #11243f;
  font-size: 19px;
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contract-studio-title-block > p {
  overflow: hidden;
  max-width: 620px;
  margin: 2px 0 0;
  color: #77859a;
  font-size: 10.5px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contract-studio-state,
.contract-studio-template-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #dce4ef;
  border-radius: 999px;
  background: #f3f6fa;
  color: #53647c;
  font-size: 10px;
  font-weight: 780;
  white-space: nowrap;
}

.contract-studio-state.green { border-color: #bfe5d6; background: #eaf8f2; color: #12684f; }
.contract-studio-state.yellow { border-color: #ead8a5; background: #fff8df; color: #82620c; }
.contract-studio-state.gray { border-color: #dde3eb; background: #f2f4f7; color: #667085; }
.contract-studio-state.blue { border-color: #c8d7ff; background: #eef3ff; color: #2454c6; }

.contract-studio-topbar-actions {
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.contract-studio-save-state {
  max-width: 190px;
  overflow: hidden;
  color: #7a8799;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.studio-button,
.om-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.studio-button-secondary,
.om-button-secondary {
  border-color: #d8e1ec;
  background: #fff;
  color: #213653;
  box-shadow: 0 1px 2px rgba(19, 38, 63, .025);
}

.studio-button-secondary:hover,
.om-button-secondary:hover { border-color: #c4d1e1; background: #f8fafc; }

.studio-button-primary,
.om-button-primary {
  border-color: var(--studio-blue, #245eea);
  background: var(--studio-blue, #245eea);
  color: #fff;
  box-shadow: 0 7px 18px rgba(36, 94, 234, .19);
}

.studio-button-primary:hover,
.om-button-primary:hover { border-color: var(--studio-blue-hover, #174fd4); background: var(--studio-blue-hover, #174fd4); }
.studio-button-primary.is-success { border-color: var(--studio-green); background: var(--studio-green); box-shadow: 0 7px 18px rgba(20, 122, 90, .16); }
.studio-button-primary.is-success:hover { border-color: var(--studio-green-hover); background: var(--studio-green-hover); }

.contract-studio-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 368px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns .18s ease;
}

.contract-studio-body.inspector-collapsed { grid-template-columns: minmax(0, 1fr) 0; }
.contract-studio-body.inspector-collapsed .contract-studio-inspector {
  visibility: hidden;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.contract-studio-document-area {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #d9e2ec;
  background: var(--studio-canvas);
}

.contract-studio-document-head {
  display: none !important;
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 0 18px;
  border-bottom: 1px solid #dfe6ef;
  background: rgba(248, 250, 252, .97);
}

.contract-studio-document-title,
.contract-studio-document-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contract-studio-document-title > div { min-width: 0; }
.contract-studio-document-title strong { display: block; color: #243852; font-size: 11px; font-weight: 800; }
.contract-studio-document-title span:not(.contract-studio-dot) { display: block; overflow: hidden; margin-top: 1px; color: #7b889b; font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; }
.contract-studio-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #1d9a72; box-shadow: 0 0 0 4px rgba(29, 154, 114, .11); }

.contract-studio-canvas-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -15%, rgba(255,255,255,.82), rgba(255,255,255,0) 32%),
    #e7edf4;
}

.contract-studio .contract-document-host,
.contract-studio .contract-document-host .contract-visual-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.contract-studio .contract-document-host .contract-visual-editor {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.contract-studio .contract-editor-contextbar {
  position: absolute;
  top: 74px;
  left: 16px;
  z-index: 35;
  width: auto;
  max-width: min(360px, calc(100% - 32px));
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.contract-studio .contract-document-toolbar {
  height: 72px;
  min-height: 72px;
  padding: 7px 12px 8px;
  border-color: #dbe3ed;
  box-shadow: 0 5px 16px rgba(31, 49, 76, .04);
}

.contract-studio .contract-visual-editor { position: relative; grid-template-rows: 72px minmax(0, 1fr); }
.contract-studio .contract-document-toolbar.document-toolbar-stable { height: 72px; min-height: 72px; max-height: 72px; padding-top: 7px; padding-bottom: 8px; }
.contract-studio .contract-document-toolbar.document-toolbar-stable .contract-toolbar-group { height: 49px; min-height: 49px; max-height: 49px; }
.contract-studio .contract-editor-canvas { padding: 28px 64px 82px; background: #e7edf4; }

.contract-studio .premium-empty {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 0;
  padding: 42px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.9), rgba(255,255,255,0) 35%),
    #e7edf4;
}

.contract-studio .premium-empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border: 1px solid #d5dfeb;
  border-radius: 16px;
  background: #fff;
  color: #245eea;
  font-size: 20px;
  box-shadow: 0 12px 30px rgba(35, 55, 83, .1);
}

.contract-studio .premium-empty strong { color: #1b304b; font-size: 18px; letter-spacing: -.025em; }
.contract-studio .premium-empty > span { max-width: 480px; margin-top: 6px; color: #738197; font-size: 11px; line-height: 1.55; }
.contract-studio .premium-empty-steps { display: flex; gap: 8px; margin-top: 20px; }
.contract-studio .premium-empty-steps span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid #d8e1ec; border-radius: 999px; background: rgba(255,255,255,.82); color: #586981; font-size: 9.5px; font-weight: 700; }
.contract-studio .premium-empty-steps b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #edf2ff; color: #245eea; font-size: 8px; }

.contract-studio .contract-imported-preview { height: 100%; padding: 16px; overflow: hidden; }
.contract-studio .contract-imported-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.contract-studio .contract-imported-preview-head strong,
.contract-studio .contract-imported-preview-head span { display: block; }
.contract-studio .contract-imported-preview-head strong { color: #1c314d; font-size: 12px; }
.contract-studio .contract-imported-preview-head span { margin-top: 2px; color: #748298; font-size: 10px; }
.contract-studio .contract-imported-preview iframe { width: 100%; height: calc(100% - 50px); min-height: 0; border: 1px solid #d4deea; border-radius: 10px; background: #fff; }

.contract-studio-inspector {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
}

.contract-inspector-head { padding: 18px 20px 14px; border-bottom: 1px solid #edf1f5; }
.contract-inspector-eyebrow { display: block; margin-bottom: 4px; color: #245eea; font-size: 8.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.contract-inspector-head h2 { margin: 0; color: #172b45; font-size: 17px; font-weight: 780; letter-spacing: -.03em; }
.contract-inspector-head p { margin: 5px 0 0; color: #77859a; font-size: 10px; line-height: 1.45; }

.contract-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid #e8edf3;
  background: #fbfcfe;
}

.contract-inspector-tabs button {
  min-width: 0;
  min-height: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #728096;
  font: inherit;
  font-size: 9.5px;
  font-weight: 760;
  cursor: pointer;
}

.contract-inspector-tabs button:hover { background: #f0f4f9; color: #314968; }
.contract-inspector-tabs button.active { background: #eaf0ff; color: #2456cf; box-shadow: inset 0 0 0 1px #d4dfff; }

.contract-inspector-form { min-height: 0; overflow: auto; padding: 0; scrollbar-width: thin; }
.contract-inspector-panel { display: grid; gap: 14px; padding: 18px 20px 30px; }
.contract-inspector-panel[hidden] { display: none !important; }
.contract-inspector-section-intro { display: grid; gap: 3px; padding: 0 0 2px; }
.contract-inspector-section-intro strong { color: #213653; font-size: 12px; font-weight: 800; }
.contract-inspector-section-intro span { color: #8490a2; font-size: 9.5px; line-height: 1.45; }

.contract-studio .studio-field { display: grid; gap: 6px; min-width: 0; }
.contract-studio .studio-field label { margin: 0; color: #53647b; font-size: 9.5px; font-weight: 760; }
.contract-studio .studio-field small { margin-top: -1px; color: #8a96a8; font-size: 8.5px; line-height: 1.35; }
.contract-studio .studio-field input,
.contract-studio .studio-field select,
.contract-studio .studio-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid #d9e2ed;
  border-radius: 9px;
  background: #fff;
  color: #1d334f;
  font: inherit;
  font-size: 10.5px;
  box-shadow: 0 1px 2px rgba(20, 39, 65, .02);
}
.contract-studio .studio-field textarea { min-height: 132px; padding: 10px 11px; line-height: 1.5; resize: vertical; }
.contract-studio .studio-field input:hover,
.contract-studio .studio-field select:hover,
.contract-studio .studio-field textarea:hover { border-color: #c5d2e1; }
.contract-studio .studio-field input:focus,
.contract-studio .studio-field select:focus,
.contract-studio .studio-field textarea:focus { border-color: #7ca0f3; box-shadow: 0 0 0 3px rgba(36, 94, 234, .09); outline: none; }
.contract-studio .studio-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.studio-money-input,
.studio-suffixed-input {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 39px;
  border: 1px solid #d9e2ed;
  border-radius: 9px;
  background: #fff;
}
.contract-studio .studio-money-input input,
.contract-studio .studio-suffixed-input input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; box-shadow: none; }
.studio-money-input > span,
.studio-suffixed-input > span { flex: 0 0 auto; padding: 0 10px; color: #7a8799; font-size: 9.5px; font-weight: 750; }
.studio-money-input > span { border-right: 1px solid #e5eaf1; }
.studio-suffixed-input > span { border-left: 1px solid #e5eaf1; }

.contract-studio-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e0e7f0;
  border-radius: 11px;
  background: #f9fbfd;
  cursor: pointer;
}
.contract-studio-switch input { position: absolute; opacity: 0; pointer-events: none; }
.contract-studio-switch-ui { position: relative; width: 31px; height: 18px; margin-top: 1px; border-radius: 999px; background: #cbd5e1; transition: background .15s ease; }
.contract-studio-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(19, 37, 60, .2); transition: transform .15s ease; }
.contract-studio-switch input:checked + .contract-studio-switch-ui { background: #245eea; }
.contract-studio-switch input:checked + .contract-studio-switch-ui::after { transform: translateX(13px); }
.contract-studio-switch strong,
.contract-studio-switch small { display: block; }
.contract-studio-switch strong { color: #233852; font-size: 10.5px; }
.contract-studio-switch small { margin-top: 2px; color: #7d899b; font-size: 9px; line-height: 1.35; }

.contract-studio-summarybar {
  position: relative;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(280px, 1.8fr);
  align-items: stretch;
  min-width: 0;
  border-top: 1px solid #dce4ee;
  background: #fff;
  box-shadow: 0 -7px 24px rgba(28, 45, 70, .045);
}
.contract-summary-item { display: grid; align-content: center; gap: 1px; min-width: 0; padding: 0 16px; border-right: 1px solid #eef1f5; }
.contract-summary-item span { color: #8490a1; font-size: 8px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.contract-summary-item strong { overflow: hidden; color: #243a56; font-size: 10px; font-weight: 760; white-space: nowrap; text-overflow: ellipsis; }
.contract-summary-tip { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 18px; color: #748298; font-size: 9.5px; line-height: 1.35; }
.contract-summary-tip > span:first-child { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; background: #eff3ff; color: #285de0; font-size: 11px; font-weight: 800; }

/* Premium O&M contract portfolio ------------------------------------------------ */
body[data-page="service-contracts"] .content { padding: 28px 32px 48px; background: #f5f7fa; }
body[data-page="service-contracts"] .page { width: min(100%, 1500px); gap: 18px; }
.om-contracts-page { display: grid; }
.om-contracts-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 10px 2px 4px;
}
.om-contracts-kicker { display: block; margin-bottom: 7px; color: #2c62de; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.om-contracts-hero h1 { margin: 0; color: #142841; font-size: clamp(30px, 3vw, 40px); font-weight: 760; line-height: 1.05; letter-spacing: -.05em; }
.om-contracts-hero p { max-width: 690px; margin: 9px 0 0; color: #718096; font-size: 13px; line-height: 1.5; }
.om-contracts-hero-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.om-button { min-height: 42px; padding-inline: 16px; font-size: 12px; }
.om-button-primary { --studio-blue: #2159df; --studio-blue-hover: #184dc9; }

.om-contracts-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e0e6ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(34, 52, 75, .045);
}
.om-kpi-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 88px;
  padding: 17px 20px;
  border: 0;
  border-right: 1px solid #ebeff4;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.om-kpi-card:last-child { border-right: 0; }
.om-kpi-card .om-kpi-label { color: #66758b; font-size: 10px; font-weight: 760; }
.om-kpi-card .stat-value { grid-column: 2; grid-row: 1 / 3; color: #172c46; font-size: 29px; font-weight: 740; line-height: 1; letter-spacing: -.045em; }
.om-kpi-card .trend { color: #94a0b0; font-size: 9px; font-weight: 550; }

.om-contracts-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 7px 9px;
  border: 1px solid #e1e7ef;
  border-radius: 13px;
  background: #fff;
}
.om-contracts-status-tabs { display: flex; align-items: center; gap: 3px; }
.om-contracts-status-tabs button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6d7b90;
  font: inherit;
  font-size: 11px;
  font-weight: 720;
  cursor: pointer;
}
.om-contracts-status-tabs button:hover { background: #f4f6f9; color: #304661; }
.om-contracts-status-tabs button.active { background: #edf2ff; color: #2054cf; box-shadow: inset 0 0 0 1px #dce5ff; }
.om-contracts-commandbar-meta { padding-right: 8px; }
.om-contracts-commandbar .api-status { font-size: 10px; }

body[data-page="service-contracts"] .om-contracts-results {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.om-contract-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.om-contract-card {
  position: relative;
  display: grid;
  gap: 17px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #dfe6ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(33, 51, 74, .045);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.om-contract-card:hover { transform: translateY(-1px); border-color: #cfd9e6; box-shadow: 0 14px 32px rgba(33, 51, 74, .075); }
.om-contract-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.om-contract-card-identity { min-width: 0; }
.om-contract-card-number { display: block; margin-bottom: 5px; color: #8b97a8; font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.om-contract-card h3 { overflow: hidden; margin: 0; color: #152a44; font-size: 17px; font-weight: 760; line-height: 1.22; letter-spacing: -.03em; white-space: nowrap; text-overflow: ellipsis; }
.om-contract-card-client { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #66768c; font-size: 10.5px; }
.om-contract-card-client::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8ca4c8; }
.om-contract-status { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.om-contract-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.om-contract-status.is-active { background: #eaf8f2; color: #137456; }
.om-contract-status.is-draft { background: #eff3f8; color: #617086; }
.om-contract-status.is-paused { background: #fff6df; color: #8b670d; }
.om-contract-status.is-ended { background: #f4f4f5; color: #71717a; }
.om-contract-card-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #e9edf3; border-radius: 11px; background: #fafbfd; }
.om-contract-metric { min-width: 0; padding: 11px 12px; border-right: 1px solid #e9edf3; }
.om-contract-metric:last-child { border-right: 0; }
.om-contract-metric span,
.om-contract-metric strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.om-contract-metric span { color: #929dab; font-size: 8px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.om-contract-metric strong { margin-top: 3px; color: #30445f; font-size: 10px; font-weight: 750; }
.om-contract-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.om-contract-card-next { min-width: 0; color: #768499; font-size: 9.5px; }
.om-contract-card-next strong { color: #40546f; font-weight: 760; }
.om-contract-card-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.om-contract-card-actions .secondary-button,
.om-contract-card-actions .primary-button { min-height: 34px; padding: 0 11px; border-radius: 8px; font-size: 10px; }
.om-contract-card-actions .icon-button { width: 34px; height: 34px; min-height: 34px; border-radius: 8px; }
.om-contract-empty-state { min-height: 340px; border: 1px dashed #d5deea; border-radius: 16px; background: rgba(255,255,255,.68); }
.om-contracts-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px 0; color: #8895a6; font-size: 10px; }

@media (max-width: 1180px) {
  .contract-studio-body { grid-template-columns: minmax(0, 1fr) 330px; }
  .contract-studio-save-state { display: none; }
  .contract-summary-tip { display: none; }
  .contract-studio-summarybar { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
  .om-contract-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body[data-page="contract-editor"][data-document-editor-route="true"] { overflow: hidden; }
  body[data-page="contract-editor"][data-document-editor-route="true"] .app-shell,
  body[data-page="contract-editor"][data-document-editor-route="true"] .content,
  body[data-page="contract-editor"][data-document-editor-route="true"] .page-mount,
  body[data-page="contract-editor"][data-document-editor-route="true"] .document-editor-route-page { height: 100vh; min-height: 0; overflow: hidden; }
  .contract-studio { grid-template-rows: auto minmax(0, 1fr); }
  .contract-studio-topbar { align-items: flex-start; padding: 10px 12px; }
  .contract-studio-title-block > p { display: none; }
  .contract-studio-topbar-actions { flex-wrap: wrap; }
  .contract-studio-topbar-actions [data-toggle-contract-inspector] { display: none; }
  .contract-studio-body { grid-template-columns: 1fr; overflow: auto; }
  .contract-studio-document-area { min-height: 720px; border-right: 0; }
  .contract-studio-inspector { min-height: 560px; border-top: 1px solid #dce4ee; }
  .contract-studio-summarybar { display: none; }
  .contract-studio .contract-editor-canvas { padding-inline: 24px; }
  .om-contracts-hero { align-items: flex-start; flex-direction: column; }
  .om-contracts-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-kpi-card:nth-child(2) { border-right: 0; }
  .om-kpi-card:nth-child(-n+2) { border-bottom: 1px solid #ebeff4; }
}

@media (max-width: 640px) {
  .contract-studio-title-row h1 { max-width: 220px; font-size: 16px; }
  .contract-studio-topbar-actions .studio-button-secondary:not([data-view-contract-pdf]) { display: none; }
  .contract-studio .studio-field-grid { grid-template-columns: 1fr; }
  .contract-inspector-tabs { grid-template-columns: repeat(2, 1fr); }
  body[data-page="service-contracts"] .content { padding: 20px 14px 36px; }
  .om-contracts-hero-actions { width: 100%; }
  .om-contracts-hero-actions .om-button { flex: 1; }
  .om-contracts-kpi-strip { grid-template-columns: 1fr 1fr; }
  .om-contracts-commandbar { align-items: flex-start; flex-direction: column; }
  .om-contracts-status-tabs { width: 100%; overflow-x: auto; }
  .om-contract-card-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-contract-metric:nth-child(2) { border-right: 0; }
  .om-contract-metric:nth-child(-n+2) { border-bottom: 1px solid #e9edf3; }
  .om-contract-card-footer { align-items: flex-start; flex-direction: column; }
}

/* ======================================================================
   Contract Studio viewport repair
   ----------------------------------------------------------------------
   The shared document-editor route declares .document-editor-route-page as
   display:block with higher specificity. Contract Studio is itself that route
   page, so the rule was defeating the studio grid, collapsing the document
   viewport, hiding the footer below the clipped 100vh shell, and leaving no
   usable vertical document scroll. Keep the shared route behaviour for the
   other editors, but explicitly restore the Contract Studio layout here.
   ====================================================================== */
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio.document-editor-route-page {
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 58px;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Hidden is state, not styling. Lifecycle buttons, alternate previews, and
   inspector panels must never be forced visible by component display rules. */
body[data-page="contract-editor"] .contract-studio [hidden] {
  display: none !important;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-body,
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-document-area,
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-canvas-shell,
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-document-host,
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-visual-editor {
  min-height: 0;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-body,
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-document-area {
  height: 100%;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-canvas-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-document-host:not([hidden]),
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-visual-editor {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* The document owns its own vertical scroll. The toolbar and agreement-data
   inspector stay in place while the actual A4 pages move underneath them. */
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-editor-canvas {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-editor-pages {
  display: flex;
  flex-direction: column;
  min-height: max-content;
}

/* Keep scroll affordances visible but quiet. The old full-width toolbar
   scrollbar made the workspace look broken; the canvas scrollbar remains
   obvious enough to show that the agreement continues below the fold. */
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-editor-canvas {
  scrollbar-color: #aab7c8 transparent;
  scrollbar-width: thin;
}
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-editor-canvas::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-editor-canvas::-webkit-scrollbar-track { background: transparent; }
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-editor-canvas::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #aab7c8; background-clip: padding-box; }
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-editor-canvas::-webkit-scrollbar-thumb:hover { background: #8999ae; background-clip: padding-box; }

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-document-toolbar {
  scrollbar-color: #d1d9e5 transparent;
  scrollbar-width: thin;
}
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-document-toolbar::-webkit-scrollbar { height: 5px; }
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-document-toolbar::-webkit-scrollbar-track { background: transparent; }
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-document-toolbar::-webkit-scrollbar-thumb { border-radius: 999px; background: #d1d9e5; }

@media (max-width: 900px) {
  body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio.document-editor-route-page {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
  }

  body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-body {
    height: auto;
  }

  body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-document-area {
    height: auto;
  }
}


/* ======================================================================
   Contract Studio compact command header + restored document toolbar
   ----------------------------------------------------------------------
   Contract-level actions collapse into the top-right menu. Formatting
   remains a first-class inline toolbar because it belongs to the document.
   ====================================================================== */
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-topbar {
  min-height: 52px;
  padding: 5px 14px;
  gap: 14px;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-back {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
  font-size: 19px;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio-title-row h1 {
  max-width: min(52vw, 560px);
  font-size: 16px;
  line-height: 1.1;
}

.contract-studio-command-menu {
  position: relative;
  z-index: 150;
  flex: 0 0 auto;
}

.contract-studio-command-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d8e1ec;
  border-radius: 10px;
  background: #fff;
  color: #1b3150;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  list-style: none;
  box-shadow: 0 1px 2px rgba(19,38,63,.035);
}

.contract-studio-command-trigger::-webkit-details-marker { display: none; }
.contract-studio-command-trigger:hover { border-color: #c4d1e1; background: #f8fafc; }
.contract-studio-command-menu[open] .contract-studio-command-trigger {
  border-color: #a9bfff;
  box-shadow: 0 0 0 3px rgba(36,94,234,.09);
}

.contract-studio-command-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  box-sizing: border-box;
  border-right: 1.5px solid #6f7f96;
  border-bottom: 1.5px solid #6f7f96;
  font-size: 0;
  line-height: 0;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: center;
  transition: transform .16s ease;
}
.contract-studio-command-menu[open] .contract-studio-command-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.contract-studio-command-popover {
  position: absolute;
  z-index: 180;
  top: calc(100% + 8px);
  right: 0;
  width: min(430px, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #d8e1ec;
  border-radius: 14px;
  background: rgba(255,255,255,.995);
  box-shadow: 0 22px 60px rgba(20,38,65,.18), 0 4px 14px rgba(20,38,65,.07);
}

.contract-studio-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 1px 1px 12px;
  border-bottom: 1px solid #e8edf4;
}

.contract-studio-command-head > div { min-width: 0; }
.contract-studio-command-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #6f7f96;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.contract-studio-command-head strong {
  display: block;
  color: #172b49;
  font-size: 12px;
  font-weight: 820;
}
.contract-studio-command-head p {
  margin: 3px 0 0;
  color: #78869a;
  font-size: 9px;
  line-height: 1.35;
}
.contract-studio-command-head .contract-studio-save-state {
  max-width: 120px;
  padding-top: 2px;
  text-align: right;
}

.contract-studio-command-popover .contract-studio-topbar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding-top: 12px;
}
.contract-studio-command-popover .contract-studio-topbar-actions .studio-button {
  width: 100%;
  min-height: 38px;
}
.contract-studio-command-popover .contract-studio-topbar-actions [data-save-contract],
.contract-studio-command-popover .contract-studio-topbar-actions [data-activate-contract],
.contract-studio-command-popover .contract-studio-topbar-actions [data-resume-contract] {
  grid-column: 1 / -1;
}

.contract-studio .contract-editor-guide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  width: min(330px, calc(100vw - 48px));
  padding: 12px 13px 13px;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 34px rgba(24, 43, 68, .14);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.contract-studio .contract-editor-guide-card[hidden] { display: none !important; }
.contract-studio .contract-editor-guide-copy { display: grid; gap: 4px; min-width: 0; }
.contract-studio .contract-editor-guide-copy strong { color: #203552; font-size: 11px; font-weight: 800; }
.contract-studio .contract-editor-guide-copy span { color: #708097; font-size: 9.5px; line-height: 1.4; }
.contract-studio .contract-editor-guide-copy small { color: #8a95a7; font-size: 8.5px; line-height: 1.4; }
.contract-studio .contract-editor-guide-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #d6e0ec;
  border-radius: 999px;
  background: #fff;
  color: #55657d;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.contract-studio .contract-editor-guide-close:hover { background: #f6f9fc; border-color: #c6d2e0; }
.contract-studio .contract-editor-guide-reopen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d6e0ec;
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  color: #36506f;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 8px 22px rgba(24, 43, 68, .12);
  pointer-events: auto;
  cursor: pointer;
}
.contract-studio .contract-editor-guide-reopen:hover { background: #f7f9fc; border-color: #c5d2e1; }
.contract-studio .contract-editor-guide-reopen[hidden] { display: none !important; }

/* Restore the actual formatting toolbar as a persistent editor control. */
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio .contract-visual-editor {
  grid-template-rows: 72px minmax(0, 1fr);
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio .contract-document-toolbar,
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio .contract-document-toolbar.document-toolbar-stable {
  position: relative;
  z-index: 34;
  display: flex;
  align-items: stretch;
  gap: 7px;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  min-width: 0;
  padding: 7px 12px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  contain: layout style;
  border-bottom: 1px solid #dbe3ed;
  background: rgba(255,255,255,.985);
  box-shadow: 0 5px 16px rgba(31,49,76,.04);
  scrollbar-color: #d1d9e5 transparent;
  scrollbar-width: thin;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio .contract-document-toolbar.document-toolbar-stable .contract-toolbar-group {
  height: 49px;
  min-height: 49px;
  max-height: 49px;
}

body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio .contract-document-toolbar::-webkit-scrollbar { display: block; height: 5px; }
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio .contract-document-toolbar::-webkit-scrollbar-track { background: transparent; }
body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio .contract-document-toolbar::-webkit-scrollbar-thumb { border-radius: 999px; background: #d1d9e5; }

@media (max-width: 900px) {
  body[data-page="contract-editor"][data-document-editor-route="true"] .contract-studio.document-editor-route-page {
    grid-template-rows: 52px minmax(0, 1fr);
  }
  .contract-studio-command-popover { right: -2px; }
}

@media (max-width: 560px) {
  .contract-studio-command-trigger > span:first-child { display: none; }
  .contract-studio-command-trigger { width: 36px; padding: 0; }
  .contract-studio-title-row h1 { max-width: 52vw; }
  .contract-studio-command-popover { right: -2px; width: min(380px, calc(100vw - 18px)); }
}

/* Google OAuth credentials stay summarized until the owner chooses to replace them. */
.google-provider-card .google-credential-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.google-provider-card .google-credential-state {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 13px 14px;
  border: 1px solid #e1e8f3;
  border-radius: 12px;
  background: #f8fbff;
}
.google-provider-card .google-credential-state strong,
.google-provider-card .google-credential-state small {
  display: block;
}
.google-provider-card .google-credential-state small {
  margin-top: 3px;
  color: var(--muted);
}
.google-provider-card .google-credential-check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  font-weight: 850;
}
.google-provider-card .google-credential-check.saved {
  background: #dcfce7;
  color: #15803d;
}
.google-provider-card .google-credential-check.missing {
  background: #fff7ed;
  color: #c2410c;
}
.google-provider-card .google-credential-editor {
  padding-top: 2px;
}
.google-provider-card .google-credential-editor[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .google-provider-card .google-credential-summary {
    grid-template-columns: 1fr;
  }
}

/* Connected Apps marketplace: category-first browsing keeps large provider catalogues easy to scan. */
.connected-apps-shell{
  display:grid;
  gap:18px
}
.connected-apps-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap
}
.connected-app-search{
  flex:1 1 320px;
  max-width:560px
}
.connected-app-search input{
  width:100%;
  min-height:44px;
  border:1px solid var(--color-border-default,#d9e3f1);
  border-radius:12px;
  background:var(--color-bg-surface,#fff);
  color:var(--color-text-primary,#0f172a);
  padding:0 14px;
  outline:none
}
.connected-app-search input:focus{
  border-color:#8cb5ff;
  box-shadow:0 0 0 3px rgba(35,99,255,.1)
}
.connected-app-region-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  color:var(--color-text-muted,#60708d);
  font-size:13px;
  font-weight:650;
  cursor:pointer
}
.connected-app-region-toggle input{
  width:17px;
  height:17px;
  accent-color:var(--blue)
}
.connected-apps-current,
.connected-apps-browser,
.connected-app-category-view{
  display:grid;
  gap:14px
}
.connected-apps-section-head,
.connected-app-category-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px
}
.connected-apps-section-head h3,
.connected-app-category-heading h3{
  margin:0
}
.connected-apps-section-head p,
.connected-app-category-heading p{
  margin:4px 0 0
}
.connected-app-current-grid,
.connected-app-search-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:12px
}
.connected-app-mini-card{
  appearance:none;
  width:100%;
  min-height:78px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  border:1px solid var(--color-border-default,#dce7f7);
  border-radius:14px;
  background:var(--color-bg-surface,#fff);
  color:inherit;
  text-align:left;
  padding:12px;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease
}
.connected-app-mini-card:hover{
  border-color:#bfd2ef;
  box-shadow:0 8px 22px rgba(15,39,78,.06);
  transform:translateY(-1px)
}
.connected-app-mini-copy{
  min-width:0;
  display:grid;
  gap:3px
}
.connected-app-mini-copy strong,
.connected-app-mini-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.connected-app-mini-copy small{
  color:var(--color-text-muted,#60708d)
}
.connected-app-category-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.connected-app-category-card{
  appearance:none;
  position:relative;
  min-height:132px;
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  column-gap:14px;
  row-gap:10px;
  border:1px solid var(--color-border-default,#dce7f7);
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  color:inherit;
  text-align:left;
  padding:18px;
  cursor:pointer;
  box-shadow:var(--elevation-1,0 2px 10px rgba(15,39,78,.04));
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease
}
.connected-app-category-card:hover{
  border-color:#b9cfee;
  box-shadow:0 12px 28px rgba(15,39,78,.08);
  transform:translateY(-2px)
}
.connected-app-category-card:focus-visible,
.connected-app-mini-card:focus-visible{
  outline:3px solid rgba(35,99,255,.2);
  outline-offset:2px
}
.connected-app-category-icon{
  grid-row:1/3;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border:1px solid #d7e4f7;
  border-radius:14px;
  background:#f4f8ff;
  color:#2458a8;
  font-size:13px;
  font-weight:850;
  letter-spacing:.02em
}
.connected-app-category-copy{
  min-width:0;
  display:grid;
  gap:5px
}
.connected-app-category-copy strong{
  color:var(--color-text-primary,#0f172a);
  font-size:16px
}
.connected-app-category-copy small{
  color:var(--color-text-muted,#60708d);
  line-height:1.45
}
.connected-app-category-meta{
  grid-column:2;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--color-text-muted,#60708d);
  font-size:12px;
  font-weight:650
}
.connected-app-category-meta span+span::before{
  content:'•';
  margin-right:10px;
  color:#a8b6c9
}
.connected-app-category-link{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  color:var(--color-action-primary,#2363ff);
  font-size:13px;
  font-weight:750
}
.connected-app-back{
  justify-self:start
}
.connected-app-category-heading{
  padding-bottom:4px
}
.connected-app-provider-list{
  display:grid;
  gap:12px
}
.connected-app-provider-card{
  padding:12px 14px;
  border-radius:14px
}
.connected-app-provider-card .integration-summary{
  margin:0
}
.connected-app-provider-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap
}
.connected-app-sharing{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e8eef7;
  color:var(--color-text-muted,#60708d);
  font-size:13px;
  line-height:1.45
}
.connected-app-sharing strong{
  flex:0 0 auto;
  color:#40516f;
  font-size:12px
}
.connected-app-editor{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e8eef7
}
.connected-app-editor[hidden]{display:none!important}
.connected-app-category-note,
.connected-app-compact-empty{
  display:grid;
  gap:4px;
  border:1px dashed #ccd9ea;
  border-radius:14px;
  background:#f8fbff;
  color:var(--color-text-muted,#60708d);
  padding:16px
}
.connected-app-category-note strong,
.connected-app-compact-empty strong{
  color:#213653
}
.connected-app-solar-workspace{
  margin-top:2px
}
.connected-apps-activity{
  border:1px solid var(--color-border-default,#dce7f7);
  border-radius:14px;
  background:#fff;
  overflow:hidden
}
.connected-apps-activity>summary{
  min-height:46px;
  display:flex;
  align-items:center;
  padding:0 16px;
  color:#40516f;
  font-weight:750;
  cursor:pointer;
  list-style:none
}
.connected-apps-activity>summary::-webkit-details-marker{display:none}
.connected-apps-activity>summary::after{
  content:'+';
  margin-left:auto;
  color:#6f82a0;
  font-size:20px;
  font-weight:500
}
.connected-apps-activity[open]>summary::after{content:'−'}
.connected-apps-activity .table-card{
  border:0;
  border-top:1px solid var(--color-border-default,#dce7f7);
  border-radius:0;
  box-shadow:none
}
@media(min-width:1280px){
  .connected-app-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .connected-app-category-grid{grid-template-columns:1fr}
  .connected-apps-toolbar{align-items:stretch}
  .connected-app-search{max-width:none}
  .connected-app-region-toggle{width:100%}
  .connected-app-mini-card{grid-template-columns:42px minmax(0,1fr)}
  .connected-app-mini-card>.badge{grid-column:2;justify-self:start}
  .connected-app-provider-card .integration-summary{align-items:flex-start;flex-wrap:wrap}
  .connected-app-provider-actions{width:100%;margin-left:54px;justify-content:flex-start}
}
.sr-only{
  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
}


/* Staff auth polish: keep second-factor fields truly hidden until requested,
   and render the Rev Engine mark without the generic rounded app-icon shell. */
.auth-page [data-login-two-factor][hidden] {
  display: none !important;
}

.auth-page .public-booking-brand .brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.auth-page .public-booking-brand .brand-mark img {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.auth-password-help {
  margin-top: -8px;
  display: flex;
  justify-content: flex-end;
}

.auth-password-help a,
.auth-local-reset-link {
  color: var(--color-action-primary, #2363ff);
  font-size: 13px;
  font-weight: 700;
}

.auth-password-help a:hover,
.auth-local-reset-link:hover {
  text-decoration: underline;
}

.auth-local-reset-link {
  justify-self: start;
}

.auth-local-reset-link[hidden] {
  display: none !important;
}


/* Provider setup address: compact admin-only helper. Keep callback setup as
   one clear block instead of stretching instructions across the form grid. */
.provider-notification-setup {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid #dce7f7;
  border-radius: 12px;
  background: #f8fbff;
  color: var(--color-text-muted, #60708d);
  font-size: 12px;
  line-height: 1.4;
}
.provider-notification-heading > div,
.provider-notification-missing > div {
  display: grid;
  gap: 3px;
}
.provider-notification-setup strong {
  color: #314562;
  font-size: 12px;
}
.provider-notification-heading > div > strong,
.provider-notification-missing > div > strong {
  color: #213653;
  font-size: 13px;
}
.provider-address-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.provider-address-copy-row input[readonly] {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
}
.provider-notification-auth {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 8px;
  border-top: 1px solid #e4edf8;
}
.provider-notification-auth span {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
}
.provider-notification-missing {
  border-style: dashed;
}
@media (max-width: 640px) {
  .provider-address-copy-row { grid-template-columns: 1fr; }
  .provider-address-copy-row .secondary-button { justify-self: start; }
}

/* Shared Connected Apps experience layer: provider setup happens in one focused
   workspace. Errors stay in context, technical details are progressive disclosure,
   and control positions do not shift while actions run. */
.connected-app-provider-view {
  display: grid;
  gap: 12px;
  max-width: 1040px;
}
.connected-app-provider-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.connected-app-provider-heading h3 {
  margin: 2px 0 0;
  font-size: 22px;
}
.connected-app-provider-heading p {
  margin: 4px 0 0;
}
.connected-app-provider-focus {
  display: grid;
}
.connected-app-provider-card.is-focused {
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15,39,78,.06);
}
.connected-app-provider-card.is-focused .integration-summary {
  margin-bottom: 0;
}
.integration-secret-edit-modal {
  z-index: 90;
}
.integration-secret-edit-dialog {
  width: min(560px, 100%);
}
.integration-secret-edit-dialog .panel-head small {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted, #60708d);
  line-height: 1.4;
}
.connected-app-primary-actions {
  align-items: center;
  min-height: 38px;
}
.connected-app-secondary-actions,
.provider-notification-disclosure {
  border: 1px solid #e1e9f4;
  border-radius: 11px;
  background: #fbfdff;
  overflow: hidden;
}
.connected-app-secondary-actions > summary,
.provider-notification-disclosure > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: #40516f;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.connected-app-secondary-actions > summary::-webkit-details-marker,
.provider-notification-disclosure > summary::-webkit-details-marker { display: none; }
.connected-app-secondary-actions > summary::after,
.provider-notification-disclosure > summary::after {
  content: '+';
  margin-left: auto;
  color: #7486a0;
  font-size: 18px;
}
.connected-app-secondary-actions[open] > summary::after,
.provider-notification-disclosure[open] > summary::after { content: '−'; }
.provider-notification-disclosure > summary span {
  color: var(--color-text-muted,#60708d);
  font-weight: 600;
}
.connected-app-secondary-actions > .form-actions {
  padding: 0 12px 12px;
}
.provider-notification-disclosure .provider-notification-setup {
  margin: 0 10px 10px;
}
.fc-form-error.is-info {
  color: #355f9b;
}
.field-inline-error {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  overflow: hidden;
  display: block;
  padding-top: 3px;
  color: var(--red,#c53a3a);
  font-size: 11px;
  line-height: 1.3;
}
.field-inline-error[hidden] {
  display: block !important;
  visibility: hidden !important;
}
[data-clickatell-test-phone][aria-invalid="true"] {
  border-color: #d96868;
  box-shadow: 0 0 0 3px rgba(197,58,58,.08);
}

/* Clickatell uses the shared primary Save & verify action. The phone control
   reserves its validation row so errors never move the action controls. */
.clickatell-test-setup {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dce7f7;
  border-radius: 12px;
  background: #fff;
}
.clickatell-test-copy {
  display: grid;
  gap: 3px;
}
.clickatell-test-copy strong {
  color: #213653;
  font-size: 13px;
}
.clickatell-test-copy span,
.clickatell-test-setup > small {
  color: var(--color-text-muted, #60708d);
  font-size: 12px;
  line-height: 1.4;
}
.clickatell-test-row {
  display: grid;
  grid-template-columns: minmax(240px, 420px);
  gap: 8px;
  align-items: start;
}
.clickatell-test-control {
  display: grid;
  grid-template-rows: auto 32px;
  min-width: 0;
}
.clickatell-test-control input {
  min-width: 0;
  width: 100%;
}
@media (max-width: 640px) {
  .connected-app-provider-card.is-focused { padding: 13px; }
  .connected-app-provider-heading h3 { font-size: 19px; }
  .provider-notification-disclosure > summary { align-items: flex-start; flex-direction: column; padding: 10px 34px 10px 12px; position: relative; }
  .provider-notification-disclosure > summary::after { position: absolute; right: 12px; top: 8px; }
  .clickatell-test-row { grid-template-columns: 1fr; }
}

/* Palladium Connected Apps setup: connection first, discovered business mappings second. */
.palladium-setup-progress {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dce7f4;
  border-radius: 14px;
  background: #fbfdff;
}
.palladium-setup-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.palladium-setup-steps > span {
  min-height: 42px;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  background: #fff;
  color: #6a7890;
  font-size: 12px;
  font-weight: 800;
}
.palladium-setup-steps > span small { font-size: 11px; font-weight: 700; }
.palladium-setup-steps > span.is-done,
.palladium-setup-steps > span.is-current {
  border-color: #b9d0ef;
  background: #f2f7ff;
  color: #244f86;
}
.palladium-checks { display: grid; gap: 8px; }
.palladium-checks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.palladium-checks-head > div { display: grid; gap: 2px; }
.palladium-checks-head small { color: var(--color-text-muted,#60708d); }
.palladium-check-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #e3eaf3;
  border-radius: 10px;
  background: #fff;
}
.palladium-check-row > span:last-child { display: grid; gap: 1px; }
.palladium-check-row small { color: var(--color-text-muted,#60708d); }
.palladium-check-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2f7;
}
.palladium-check-icon::after { content: '·'; font-weight: 900; }
.palladium-check-row.is-pass .palladium-check-icon { background: #e7f6ed; color: #237447; }
.palladium-check-row.is-pass .palladium-check-icon::after { content: '✓'; }
.palladium-check-row.is-fail .palladium-check-icon { background: #fdeeee; color: #b23838; }
.palladium-check-row.is-fail .palladium-check-icon::after { content: '!'; }
.palladium-mapping-gate,
.palladium-mapping-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dce7f4;
  border-radius: 14px;
  background: #fff;
}
.palladium-mapping-gate span { color: var(--color-text-muted,#60708d); line-height: 1.45; }
.palladium-mapping-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.palladium-mapping-head h4 { margin: 2px 0 2px; }
.palladium-mapping-head p { margin: 0; }
.palladium-options-loaded {
  margin: 0;
  color: #237447;
  font-size: 12px;
  font-weight: 750;
}
.palladium-mapping-grid { gap: 12px; }
.palladium-mapping-section {
  display: grid;
  gap: 3px;
  padding-top: 4px;
}
.palladium-mapping-section span { color: var(--color-text-muted,#60708d); font-size: 12px; }
.palladium-advanced-mappings {
  border: 1px solid #e1e9f4;
  border-radius: 11px;
  background: #fbfdff;
  padding: 0 12px;
}
.palladium-advanced-mappings > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  color: #40516f;
}
.palladium-advanced-mappings > .form-grid,
.palladium-advanced-mappings > p { margin-bottom: 12px; }
@media (max-width: 760px) {
  .palladium-setup-steps { grid-template-columns: 1fr; }
  .palladium-setup-steps > span { justify-content: flex-start; }
  .palladium-checks-head,
  .palladium-mapping-head { align-items: stretch; flex-direction: column; }
}

/* M1 shared failure reporting. Persistent internal failures can be reported without exposing diagnostics. */
.problem-report-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 125;
  display: grid;
  gap: 10px;
  width: min(430px, calc(100vw - 32px));
}
.problem-report-stack + .toast-stack,
.toast-stack:has(~ .problem-report-stack) {
  bottom: 170px;
}
.problem-report-offer {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #cfd9e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(9, 31, 68, .18);
  color: #0f172a;
  animation: toast-in .18s ease-out;
}
.problem-report-copy {
  display: grid;
  gap: 5px;
}
.problem-report-copy strong {
  font-size: 14px;
  font-weight: 850;
}
.problem-report-copy span {
  color: #516280;
  font-size: 13px;
  line-height: 1.4;
}
.problem-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.problem-report-actions button {
  min-height: 38px;
}
.problem-report-hiding {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
@media (max-width: 640px) {
  .problem-report-stack {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }
}

/* M2 Sales command centre */
.sales-attention-list { display: grid; }
.sales-attention-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 10px 0; border-top: 1px solid var(--border, #e2e8f0); color: inherit; text-decoration: none; }
.sales-attention-row:first-child { border-top: 0; }
.sales-attention-row > span { display: grid; gap: 2px; }
.sales-attention-row small { color: var(--muted, #64748b); font-size: 12px; }
.sales-attention-row b { display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 9px; border-radius: 999px; background: var(--surface-soft, #f1f5f9); color: var(--text, #0f172a); font-size: 13px; }
.sales-qualification-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sales-qualification-summary article { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--surface-soft, #f8fafc); }
.sales-qualification-summary span, .sales-qualification-summary small { color: var(--muted, #64748b); font-size: 12px; }
.sales-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 10px 0 20px; }
.sales-qualification-more { grid-column: 1 / -1; border-top: 1px solid var(--border, #e2e8f0); padding-top: 12px; }
.sales-qualification-more summary { cursor: pointer; color: var(--primary, #2363ff); font-weight: 700; }
.sales-qualification-more .form-grid { margin-top: 14px; }

@media (max-width: 640px) {
  .sales-qualification-summary, .sales-check-grid { grid-template-columns: 1fr; }
}