:root {
  --blue-primary: #1657e8;
  --blue-dark: #021e5f;
  --white: #ffffff;
  --gray-light: #fafafa;
  --beige: #efeeeb;
  --gray-dark: #1a1b1f;
  --gray-text: #333333;
  --line: #d7dce5;
  --ok-bg: #edf8f2;
  --ok-border: #2d8f63;
  --warn-bg: #fff2f2;
  --warn-border: #d04444;
  --sidebar: #0b1734;
  --canvas: #f5f6f8;
  --muted: #697386;
  --accent: #315ce7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Instrument Sans", sans-serif;
  background: linear-gradient(180deg, var(--gray-light) 0%, var(--beige) 100%);
  color: var(--gray-dark);
  min-height: 100vh;
}

/* Application shell — restrained, operational, and deliberately card-light. */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--canvas);
  transition: grid-template-columns 180ms ease;
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  color: #fff;
  background: var(--sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: opacity 150ms ease, transform 180ms ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 8px 25px;
}

.sidebar-brand img {
  display: block;
  width: 138px;
  height: auto;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
}

.sidebar-panel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
}
.sidebar-panel-button:hover { background: rgba(255, 255, 255, 0.08); }
.sidebar-panel-button:focus-visible { outline: 2px solid rgba(115, 157, 255, 0.72); outline-offset: 2px; }
.sidebar-panel-icon {
  position: relative;
  display: block;
  width: 15px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .82;
}
.sidebar-panel-icon::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 4px;
  border-left: 1px solid currentColor;
}
.sidebar-collapse-button { color: rgba(255, 255, 255, 0.58); }
.sidebar-collapse-button:hover { color: #fff; }

.sidebar-nav { display: grid; gap: 3px; }
.sidebar-label {
  margin: 8px 10px 6px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sidebar-label-spaced { margin-top: 24px; }
.sidebar-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-align: left;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.sidebar-link span { width: 18px; color: rgba(255, 255, 255, 0.48); text-align: center; }
.sidebar-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; transform: translateX(2px); }
.sidebar-link.mode-btn-active { background: rgba(255, 255, 255, 0.11); color: #fff; }
.sidebar-foot {
  position: relative;
  margin-top: auto;
  padding: 13px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.sidebar-session-identity { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.sidebar-session-identity strong,
.sidebar-session-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-session-identity strong { color: rgba(255, 255, 255, 0.86); font-size: 12px; font-weight: 600; }
.sidebar-session-identity span { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
.dev-profile-switch { display: grid; gap: 5px; margin-top: 10px; }
.dev-profile-switch span { color: rgba(255, 255, 255, 0.48); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dev-profile-switch select { width: 100%; padding: 7px 8px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; color: #fff; background: rgba(255, 255, 255, 0.08); font-size: 11px; }
.sidebar-logout { padding: 7px 0 0; background: transparent; color: rgba(255, 255, 255, 0.48); font-size: 11px; }
.sidebar-logout:hover { background: transparent; color: #fff; }

/* Contact — a discreet help affordance beside the signed-in name, opening a
   light card over the workspace so the reader leaves the dark sidebar palette
   behind while reading the details. */
.sidebar-contact-btn {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.sidebar-contact-btn:hover,
.sidebar-contact-btn[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.sidebar-contact-btn:focus-visible { outline: 2px solid rgba(115, 157, 255, 0.72); outline-offset: 2px; }

.contact-popover {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + 10px);
  left: 4px;
  width: 330px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--gray-text);
  box-shadow: 0 16px 40px rgba(8, 17, 38, 0.22);
  animation: contact-pop-in 140ms ease both;
}
@keyframes contact-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.contact-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.contact-popover-head p {
  margin: 0;
  color: var(--blue-dark);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
}
.contact-popover-close {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.contact-popover-close:hover { background: #f0f2f6; color: var(--gray-dark); }
.contact-popover-text { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.contact-popover-name {
  margin: 12px 0 6px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 600;
}
.contact-popover-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 7px;
  background: #f7f8fa;
}
.contact-row-icon { flex: 0 0 auto; width: 14px; color: var(--muted); font-size: 11px; text-align: center; }
.contact-row-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #24304a;
  font-size: 11.5px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-row-value:hover { color: var(--blue-primary); text-decoration: underline; }
.contact-copy-btn {
  flex: 0 0 auto;
  min-height: 0;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
}
.contact-copy-btn:hover { border-color: var(--blue-primary); background: #eef3ff; color: var(--blue-dark); }
.contact-copy-btn.is-copied { border-color: var(--ok-border); background: #fff; color: var(--ok-border); }
.contact-copy-btn.is-copy-failed { border-color: var(--warn-border); background: #fff; color: var(--warn-border); }

.app-main { width: 100%; min-width: 0; padding: 28px 34px 56px; }
.workspace-header { display: flex; align-items: center; gap: 10px; min-height: 30px; margin: 0 0 20px; }
.workspace-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.workspace-header h1 { margin: 0; color: #15213a; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.workspace-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  background: #fff;
  color: #53617a;
  font-size: 13px;
  font-weight: 600;
}
.sidebar-toggle { display: none; color: #526078; border: 1px solid #d9dee7; background: #fff; }
.sidebar-toggle:hover { color: var(--blue-dark); border-color: #c4ccd9; background: #f8f9fb; }

@media (min-width: 761px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .app-sidebar {
    width: 0;
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
    border-right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    pointer-events: none;
  }
  .app-shell.sidebar-collapsed .sidebar-toggle { display: inline-flex; }
}

.crm-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.crm-toolbar h2 { margin: 0; color: var(--blue-dark); font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px; }
.crm-toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.crm-toolbar .crm-toolbar-copy { margin-top: 7px; font-size: 11px; }
.primary-compact { padding: 10px 14px; border-radius: 7px; font-size: 13px; }

.crm-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px 170px minmax(180px, 240px) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #dde1e8;
  border-radius: 9px;
  background: #fff;
}
.crm-filters label { gap: 4px; color: var(--muted); font-size: 11px; }
.crm-filters input, .crm-filters select { min-height: 36px; padding: 7px 9px; border-color: #e0e3e9; border-radius: 6px; font-size: 13px; }
.crm-archive-toggle { display: flex !important; align-items: center; align-self: center; gap: 7px !important; padding: 10px 4px 5px; white-space: nowrap; }
.crm-archive-toggle input { width: 15px; min-height: auto; }

.crm-workspace { display: grid; height: max(480px, calc(100vh - 270px)); min-height: 480px; overflow: hidden; border: 1px solid #dde1e8; border-radius: 9px; background: #fff; }
.crm-table-region { min-width: 0; overflow: auto; }
.crm-table-wrap { overflow: auto; }
.crm-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.crm-table th { position: sticky; top: 0; z-index: 2; padding: 11px 14px; color: #7b8494; background: #fafbfc; border-bottom: 1px solid #e4e7ec; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.crm-table td { padding: 11px 14px; border-bottom: 1px solid #edf0f3; color: #3e4757; font-size: 13px; }
.crm-table tr { transition: background 120ms ease, box-shadow 120ms ease; }
.crm-clickable-row { cursor: pointer; }
.crm-table tbody .crm-clickable-row:hover { background: #f4f7ff; }
.crm-clickable-row:focus { outline: none; box-shadow: inset 3px 0 var(--accent); background: #f4f7ff; }
.crm-record-link { display: grid; gap: 2px; padding: 0; background: transparent; color: inherit; text-align: left; }
.crm-record-link:hover { background: transparent; }
.crm-record-link strong { color: #17213a; font-size: 13px; }
.crm-record-link span { color: #8a93a2; font-family: ui-monospace, monospace; font-size: 11px; }
.crm-discipline { color: #233458; font-weight: 600; }
.last-check { display: grid; gap: 1px; color: #267653; font-size: 11px; font-weight: 700; }
.last-check.is-warn { color: #a74b45; }
.last-check small { color: #8a93a2; font-size: 9px; font-weight: 500; }
.crm-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.crm-badge-client { color: #17613f; background: #e9f7ef; }
.crm-badge-prospect { color: #805b12; background: #fff5d9; }
.crm-badge-archived { color: #697386; background: #edf0f4; }
.crm-row-chevron { color: #8a93a2; font-size: 18px; transition: transform 120ms ease, color 120ms ease; }
.crm-clickable-row:hover .crm-row-chevron { color: var(--accent); transform: translateX(3px); }
.crm-list-state { min-height: 360px; }
.crm-empty, .crm-record-loading { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 13px; }
.crm-empty strong { color: #263552; font-size: 15px; }
.crm-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 14px; color: var(--muted); font-size: 12px; }
.crm-pagination button,
.crm-pagination-controls button { min-width: 32px; padding: 6px; background: #eef2f8; color: #263552; }
.crm-pagination button:disabled,
.crm-pagination-controls button:disabled { opacity: .4; cursor: default; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.crm-record-view { min-height: max(560px, calc(100vh - 130px)); animation: record-in 170ms ease both; }
@keyframes record-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.crm-back { width: auto; margin: 0 0 14px; padding: 7px 0; background: transparent; color: #657087; font-size: 12px; }
.crm-back:hover { background: transparent; color: var(--accent); }
.crm-record-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 20px 22px; border: 1px solid #dde1e8; border-radius: 9px 9px 0 0; background: #fff; }
.crm-record-header p, .crm-mandate-header p, .crm-editor-heading p { margin: 0 0 4px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.crm-record-header h2 { margin: 0; color: #17213a; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; }
.crm-record-header span, .crm-mandate-header > div > span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.crm-record-main { min-width: 0; padding: 26px 30px 34px; border: 1px solid #dde1e8; border-top: 0; border-radius: 0 0 9px 9px; background: #fff; animation: record-content-in 150ms ease both; }
@keyframes record-content-in { from { opacity: .55; } to { opacity: 1; } }
.crm-mandate-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #e4e7eb; }
.crm-mandate-header h3, .crm-editor-heading h3 { margin: 0; color: #1e2a43; font-size: 20px; }
.crm-mandate-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.crm-mandate-actions button { width: auto; min-height: 34px; padding: 7px 10px; border-radius: 6px; font-size: 11px; }
.text-danger { border: 1px solid #e4c8c8; background: #fff; color: #a43d3d; }
.text-danger:hover { background: #fff5f5; }
.crm-mandate-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 0; border-top: 1px solid #e5e8ed; }
.crm-mandate-fields > div { padding: 14px 10px 14px 0; border-bottom: 1px solid #e5e8ed; }
.crm-mandate-fields .field-wide { grid-column: 1 / -1; }
.crm-mandate-fields dt { color: #7b8494; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.crm-mandate-fields dd { margin: 5px 0 0; color: #2e394e; font-size: 13px; white-space: pre-wrap; }
.crm-detail-section { padding: 25px 0 28px; border-bottom: 1px solid #e4e8ef; }
.crm-detail-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.crm-detail-section-heading > div { display: flex; align-items: center; gap: 11px; }
.crm-detail-section-heading > div > span { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: #edf2fc; color: #2352ad; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.crm-detail-section-heading h4 { margin: 0; color: #17233d; font-size: 14px; letter-spacing: -.01em; }
.crm-detail-section-heading p { margin: 3px 0 0; color: #7b8598; font-size: 10px; }
.crm-detail-section-heading > strong { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 22px; border-radius: 999px; background: #edf0f5; color: #657086; font-size: 10px; }
.crm-checks-section { margin-top: 0; }
.crm-record-empty { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 12px; }
.crm-record-empty strong { color: #27344e; font-size: 15px; }
.crm-editor-heading { padding-bottom: 16px; border-bottom: 1px solid #e4e7eb; }
.crm-record-form { padding-top: 4px; }
.crm-editor-section { padding: 25px 0 28px; }
.crm-official-status { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #f1f3f6; color: #7b8494; font-size: 9px; font-weight: 700; }
.crm-official-status.is-confirmed { background: #eaf7f0; color: #23704e; }
.crm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.crm-form-grid label { color: #586276; font-size: 12px; }
.crm-form-grid input, .crm-form-grid select, .crm-form-grid textarea { width: 100%; padding: 10px 11px; border: 1px solid #d7dce4; border-radius: 6px; font: inherit; font-size: 13px; resize: vertical; }
.crm-form-grid input:focus, .crm-form-grid select:focus, .crm-form-grid textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 87, 232, .1); }
.crm-form-grid .form-wide { grid-column: 1 / -1; }
.crm-company-lookup { position: relative; }
.crm-company-lookup-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 14px; }
.crm-company-lookup-hint { margin: 6px 0 0; color: #7a8497; font-size: 11px; }
.crm-company-search-results { position: absolute; z-index: 12; top: calc(100% + 5px); right: 0; left: 0; overflow: hidden; border: 1px solid #d9dee8; border-radius: 8px; background: #fff; box-shadow: 0 16px 36px rgba(31, 42, 67, .14); }
.crm-company-search-results button { display: flex; width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid #edf0f4; border-radius: 0; background: #fff; color: #24304a; text-align: left; flex-direction: column; align-items: flex-start; }
.crm-company-search-results button:last-child { border-bottom: 0; }
.crm-company-search-results button:hover, .crm-company-search-results button:focus { background: #f5f8ff; }
.crm-company-search-results button span, .crm-company-search-state { color: #6e788c; font-size: 11px; }
.crm-company-search-state { padding: 12px 13px; }
.crm-company-search-state.is-error { color: #a33a3a; }
.crm-company-registry-summary { margin-top: 18px; padding-top: 17px; border-top: 1px solid #e2e8f1; }
.crm-company-registry-summary.is-revealing { animation: registry-reveal 260ms cubic-bezier(.2, .75, .25, 1) both; }
@keyframes registry-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.crm-registry-identity { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.crm-registry-identity > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-registry-check { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: #dff3e8; color: #24704f; font-size: 11px; font-weight: 800; }
.crm-registry-identity strong, .crm-registry-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-registry-identity strong { color: #172640; font-size: 13px; }
.crm-registry-identity small { max-width: 570px; margin-top: 3px; color: #788397; font-size: 10px; }
.crm-registry-activity { flex: 0 0 auto; color: #277252; font-size: 10px; font-weight: 750; }
.crm-registry-activity::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #40a879; content: ""; }
.crm-registry-activity.is-closed { color: #9a4545; }
.crm-registry-activity.is-closed::before { background: #c96464; }
.crm-registry-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid #edf0f4; }
.crm-registry-facts > div { min-width: 0; padding: 12px 14px 4px 0; }
.crm-registry-facts dt { color: #9199a8; font-size: 8px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.crm-registry-facts dd { overflow: hidden; margin: 6px 0 0; color: #29364e; font-size: 11.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.crm-registry-facts dd small { color: #8a93a3; font-size: 9px; font-weight: 500; }
.crm-company-manual-fields { max-width: calc(50% - 8px); margin-top: 18px; }
.crm-danger-zone { display: flex; justify-content: flex-end; padding-top: 18px; }
.crm-danger-zone button { width: auto; padding: 6px 0; border: 0; background: transparent; color: #9d4b4b; font-size: 10px; font-weight: 600; }
.crm-danger-zone button:hover { background: transparent; text-decoration: underline; }
.icon-button { padding: 4px 8px; background: transparent; color: #697386; font-size: 23px; line-height: 1; }
.icon-button:hover { background: #eef1f5; }
.section-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.section-heading h3 { margin: 0; color: #25314b; font-size: 13px; }
.section-heading span { color: #8790a0; font-size: 11px; }
.check-timeline { display: grid; gap: 0; }
.check-timeline > div { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; padding: 8px 0; }
.check-timeline p { display: grid; gap: 2px; margin: 0; }
.check-timeline strong { color: #33405a; font-size: 12px; }
.check-timeline small { color: var(--muted); font-size: 10px; }
.timeline-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #48a878; box-shadow: 0 0 0 3px #e8f6ef; }
.timeline-dot.is-warn { background: #d26a62; box-shadow: 0 0 0 3px #faeceb; }

.inline-warning { margin: 0; padding: 10px 12px; border-left: 3px solid #d49c25; background: #fff7df; color: #765817; font-size: 12px; line-height: 1.45; }
.commercial-notice { display: grid; gap: 3px; margin: 12px 0; padding: 11px 13px; border-left: 3px solid #d49c25; background: #fff9e9; color: #765817; font-size: 12px; }
.commercial-notice span { color: #7f6b43; }
.commercial-prospect-link { color: #735313; font-weight: 750; text-decoration: underline; text-decoration-color: rgba(115, 83, 19, .35); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.commercial-prospect-link:hover, .commercial-prospect-link:focus-visible { outline: none; color: #382704; text-decoration-color: currentColor; }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.result-actions button { padding: 9px 12px; border-radius: 6px; font-size: 12px; }
.crm-toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; padding: 11px 15px; border-radius: 7px; background: #152343; color: #fff; box-shadow: 0 12px 32px rgba(8, 17, 38, .25); font-size: 13px; animation: toast-in 180ms ease both; }
.crm-toast.is-error { background: #9e3838; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1050px) {
  .crm-filters { grid-template-columns: 1fr 1fr 1fr; }
  .crm-search { grid-column: span 2; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .app-sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 232px; transition: transform 180ms ease; box-shadow: 16px 0 40px rgba(8, 17, 38, .2); }
  .app-sidebar.is-open { transform: none; }
  .app-main { padding: 20px 14px 40px; }
  .sidebar-collapse-button { display: none; }
  .sidebar-toggle { display: inline-flex; }
  .crm-filters { grid-template-columns: 1fr 1fr; }
  .crm-search, .crm-archive-toggle { grid-column: 1 / -1; }
  .crm-record-view { min-height: calc(100vh - 80px); }
  .crm-record-header { align-items: stretch; flex-direction: column; padding: 17px 16px; }
  .crm-record-header .primary-compact { width: 100%; }
  .crm-record-main { padding: 22px 16px 28px; }
  .crm-mandate-header { flex-direction: column; }
  .crm-mandate-actions { justify-content: flex-start; }
  .crm-form-grid, .crm-mandate-fields { grid-template-columns: 1fr; }
  .crm-company-lookup-grid { grid-template-columns: 1fr; }
  .crm-form-grid .form-wide, .crm-mandate-fields .field-wide { grid-column: auto; }
}

body.auth-screen-mode .app-shell { display: block; }
body.auth-screen-mode .app-sidebar,
body.auth-screen-mode .workspace-header { display: none; }
body.auth-screen-mode .app-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

@media (max-width: 768px) {
  .sidebar-toggle,
  .icon-button,
  .crm-record-link,
  .crm-pagination button,
  .sidebar-logout { width: auto; }
  .crm-toolbar { align-items: stretch; }
  .crm-toolbar .primary-compact { width: auto; }
}

/* CRM — minimal operational workspace. */
#crm-panel, #prospects-panel {
  --crm-ink: #172033;
  --crm-muted: #7b8494;
  --crm-surface: #f4f6fa;
  --crm-accent: #1657e8;
  --crm-navy: #021e5f;
  --crm-line: #dfe4ed;
  --crm-focus: rgba(22, 87, 232, .14);
}
#crm-list-view { min-height: 0; padding: 22px; border: 1px solid var(--crm-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(2, 30, 95, .055); }
.crm-toolbar { align-items: center; margin-bottom: 18px; }
.crm-toolbar > span { color: #637087; font-size: 12px; font-weight: 600; }
.crm-toolbar .primary-compact { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 15px; border: 0; border-radius: 8px; background: var(--crm-accent); box-shadow: 0 4px 12px rgba(22, 87, 232, .18); color: #fff; font-size: 12px; font-weight: 700; }
.crm-toolbar .primary-compact:hover { background: #1049c7; transform: translateY(-1px); }

.crm-filters { grid-template-columns: minmax(440px, 2.4fr) repeat(3, minmax(135px, .65fr)) auto; gap: 10px; padding: 14px; margin: 0 0 14px; border: 1px solid #e4e8f0; border-radius: 11px; background: #f6f8fc; }
.crm-filters label { position: relative; min-width: 0; justify-content: end; gap: 5px; padding: 0; overflow: visible; color: #657188; }
.crm-filters label > span:not(.sr-only):not(.crm-search-icon) { display: block; padding-left: 2px; color: #647089; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.crm-filters input, .crm-filters select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 11px; border: 1px solid #d9e0eb; border-radius: 8px; background: #fff; color: #27344d; font-size: 12px; box-shadow: 0 1px 2px rgba(2, 30, 95, .025); }
.crm-filters input:focus, .crm-filters select:focus { outline: none; border-color: #9db8f5; background: #fff; box-shadow: 0 0 0 3px var(--crm-focus); }
.crm-filters label:focus-within { background: transparent; }
.crm-filters label.is-active-filter { background: transparent; box-shadow: none; }
.crm-filters label.is-active-filter > span:not(.sr-only):not(.crm-search-icon) { color: var(--crm-accent); }
.crm-filters label.is-active-filter input, .crm-filters label.is-active-filter select { border-color: #b5c8f3; color: var(--crm-navy); font-weight: 650; }
.crm-search { display: block !important; align-self: end; width: 100%; padding-top: 14px !important; }
.crm-search-icon { position: absolute; left: 13px; bottom: 10px; top: auto; z-index: 1; transform: none; color: #7b879c; font-size: 17px; }
.crm-search input { display: block; width: 100%; padding-left: 35px; }
.crm-archive-toggle { display: flex !important; align-items: center; justify-content: center !important; align-self: end; gap: 7px !important; min-height: 40px; padding: 0 12px !important; border: 1px solid #d9e0eb; border-radius: 8px; background: #fff; white-space: nowrap; }
.crm-archive-toggle input { flex: 0 0 auto; width: 14px; height: 14px; min-height: 14px; accent-color: var(--crm-accent); }
.crm-archive-toggle > span { display: inline !important; padding: 0 !important; color: #526077 !important; font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }

.crm-workspace { height: max(500px, calc(100vh - 315px)); min-height: 500px; overflow: hidden; border: 1px solid #e1e5ec; border-radius: 10px; background: #fff; box-shadow: none; }
.crm-table-region { display: grid; grid-template-rows: minmax(0, 1fr) 50px; min-height: 0; overflow: hidden; }
.crm-list-state { min-height: 0; overflow: hidden; }
.crm-table-wrap { height: 100%; overflow: auto; scrollbar-color: #d8dce4 transparent; scrollbar-width: thin; }
.crm-table { min-width: 1120px; }
.crm-table th { height: 38px; padding: 0 16px; border-bottom: 0; background: #fafafa; color: #9299a6; font-size: 8.5px; letter-spacing: .09em; vertical-align: middle; }
.crm-table tbody tr { height: 52px; }
.crm-table td { height: auto; padding: 7px 16px; border-bottom: 1px solid #f0f1f3; color: #4b5568; font-size: 11.5px; vertical-align: middle; }
.crm-table tbody .crm-clickable-row:hover { background: #f8f9fb; box-shadow: none; }
.crm-clickable-row:focus { background: #f6f8fd; box-shadow: inset 3px 0 var(--crm-accent); }
.crm-company-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.crm-company-cell strong { max-width: 230px; overflow: hidden; color: var(--crm-ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.crm-company-monogram, .crm-company-mark { display: inline-flex !important; flex: 0 0 auto; align-items: center !important; justify-content: center !important; margin-top: 0 !important; border: 0; background: #edf1fb; color: #3154a4; font-weight: 750; line-height: 1; text-align: center; }
.crm-company-monogram { width: 28px; height: 28px; border-radius: 8px; font-size: 8px; }
.crm-siren { color: #3f4d66; font-size: 11px; font-weight: 650; letter-spacing: .04em; user-select: all; }
.crm-discipline, .crm-practice-name, .crm-amount { color: #4b5870; font-size: 11px; font-weight: 600; }
.crm-practice-name { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-check { display: flex; align-items: center; gap: 7px; color: #347354; }
.last-check i { width: 6px; height: 6px; border-radius: 50%; background: #49a977; box-shadow: none; }
.last-check.is-warn i { background: #cf6860; box-shadow: none; }
.last-check > span { display: grid; gap: 1px; }
.last-check small, .crm-empty-value, .crm-updated { color: #9299a6; font-size: 9.5px; }
.crm-badge { min-height: 21px; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; }
.crm-badge-client { color: #236044; background: #eaf5ef; }
.crm-badge-prospect { color: #755717; background: #fff3d8; }
.crm-row-chevron { color: #adb3bf; font-size: 20px; }
.crm-pagination { z-index: 3; justify-content: space-between; padding: 0 14px; border-top: 0; background: #fafafa; color: #7f8795; }
.crm-pagination-controls { display: flex; align-items: center; gap: 5px; }
.crm-pagination-controls > span, .crm-pagination-range { font-size: 10.5px; }
.crm-pagination button,
.crm-pagination-controls button { width: 29px; height: 29px; min-width: 29px; padding: 0; border: 0; border-radius: 7px; background: #eceef2; color: #344056; }
/* Explicit hover fill so the global button:hover (dark blue) does not leave dark
   text on a dark-blue background on the pager arrows. */
.crm-pagination button:not(:disabled):hover,
.crm-pagination-controls button:not(:disabled):hover { background: #dde3ee; color: var(--blue-dark); }

.crm-record-view { max-width: 1180px; min-height: calc(100vh - 106px); margin: 0 auto; padding: 24px 28px 32px; border: 1px solid var(--crm-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(2, 30, 95, .055); animation: record-in 180ms ease both; }
.crm-back { display: inline-flex; align-items: center; gap: 7px; width: auto; min-height: 32px; margin: 0 0 12px; padding: 5px 3px; border: 0; background: transparent; color: #70798a; font-size: 11px; font-weight: 650; box-shadow: none; }
.crm-back span { font-size: 15px; }
.crm-back:hover { background: transparent; color: var(--crm-ink); transform: translateX(-2px); }
.crm-record-header { align-items: center; padding: 8px 0 22px; border: 0; border-bottom: 1px solid #e8ebf0; border-radius: 0; background: #fff; }
.crm-company-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crm-company-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 12px; }
.crm-record-header h2 { overflow: hidden; max-width: 720px; margin: 0; color: var(--crm-ink); font-size: 24px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.crm-company-header-address { overflow: hidden; max-width: 720px; margin-top: 4px; color: #858d9b; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.crm-company-identifiers { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.crm-company-identifiers > span { display: flex; align-items: baseline; gap: 5px; margin: 0; }
.crm-company-identifiers small { color: #9aa1ad; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.crm-company-identifiers strong { color: #506078; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .03em; }
.crm-siren-with-link, .crm-siren-field-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crm-siren-field-control input { min-width: 0; flex: 1; }
.crm-pappers-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; padding: 5px; border: 1px solid #dce4f2; border-radius: 7px; background: #fff; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }
.crm-pappers-link:hover { border-color: #b8c8e7; background: #f4f7fd; transform: translateY(-1px); }
.crm-pappers-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-pappers-link img { display: block; width: 15px; height: 15px; object-fit: contain; }
.crm-company-identifiers .crm-pappers-link { width: 21px; height: 21px; flex-basis: 21px; padding: 4px; }
.crm-record-header-status { display: flex; align-items: center; gap: 9px; }
.crm-record-header-status > span:last-child { color: #596579; font-size: 11px; font-weight: 650; }
.crm-record-main { min-height: 0; padding: 24px 0 10px; border: 0; border-radius: 0; background: #fff; }
.crm-record-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 22px; }
.crm-action { width: auto; min-height: 36px; padding: 8px 13px; border: 0; border-radius: 8px; background: #eceef2; color: #344056; font-size: 11px; font-weight: 700; }
.crm-action:hover { background: #e3e6eb; }
.crm-action.is-primary { background: var(--crm-ink); color: #fff; }
.crm-action.is-primary:hover { background: #0d1422; }
.crm-action.is-danger { color: #984949; background: #fff1f1; }
.crm-action:disabled { opacity: .38; cursor: not-allowed; transform: none; }

.crm-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; margin: 0; padding: 22px 24px; border: 1px solid #e4e8f0; border-radius: 12px; background: #f7f9fc; }
.crm-info-item { min-width: 0; }
.crm-info-item.is-wide { grid-column: span 2; }
.crm-info-item dt { color: #8d95a2; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.crm-info-item dd { overflow: hidden; margin: 7px 0 0; color: #293449; font-size: 12.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.crm-info-item.crm-naf-item dd { overflow: visible; white-space: normal; }
.crm-naf-tooltip { position: relative; min-width: 0; outline: none; }
.crm-naf-tooltip.is-clamped { display: block; }
.crm-naf-tooltip.is-clamped > span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.crm-naf-tooltip.is-clamped::after {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  width: max-content;
  max-width: min(420px, calc(100vw - 48px));
  padding: 8px 10px;
  border: 1px solid #dce2ec;
  border-radius: 7px;
  background: #111b31;
  box-shadow: 0 8px 24px rgba(17, 27, 49, .16);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
  visibility: hidden;
  white-space: normal;
}
.crm-naf-tooltip.is-clamped:hover::after,
.crm-naf-tooltip.is-clamped:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.crm-notes { margin-top: 18px; padding: 0 2px; }
.crm-notes span { color: #8d95a2; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.crm-notes p { margin: 7px 0 0; color: #465267; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.crm-detail-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 38px; }
.crm-plain-section { min-width: 0; padding: 20px; border: 1px solid #e4e8f0; border-radius: 12px; background: #fff; }
.crm-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.crm-section-title h3 { margin: 0; color: var(--crm-ink); font-size: 14px; }
.crm-section-title > span { color: #8f97a4; font-size: 10px; }
.crm-section-title > div { display: flex; align-items: center; gap: 14px; }
.crm-section-title button { width: auto; padding: 4px 0; border: 0; background: transparent; color: #64718a; font-size: 10px; font-weight: 650; }
.crm-section-title button:hover { background: transparent; color: var(--crm-accent); }
.crm-company-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; margin: 0; }
.crm-company-facts .is-wide { grid-column: span 2; }
.crm-check-list { display: grid; gap: 4px; }
.crm-check-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 0; }
.crm-check-state { width: 6px; height: 6px; border-radius: 50%; background: #49a977; }
.crm-check-state.is-warn { background: #cf6860; }
.crm-check-row div { display: grid; gap: 2px; }
.crm-check-row strong { color: #37445a; font-size: 11px; }
.crm-check-row small, .crm-check-row > span:last-child { color: #8c94a1; font-size: 9px; }
.crm-quiet-empty { margin: 0; color: #9299a6; font-size: 11px; }
.crm-danger-zone { display: flex; justify-content: flex-end; margin-top: 38px; padding-top: 0; }
.crm-danger-zone button { width: auto; padding: 4px 0; border: 0; background: transparent; color: #9b5c5c; font-size: 10px; font-weight: 600; }

.crm-edit-form { max-width: 980px; margin: 0 auto; padding: 22px; border: 1px solid #e4e8f0; border-radius: 12px; background: #fff; }
.crm-edit-block + .crm-edit-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e8ebf0; }
.crm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.crm-company-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crm-company-form-grid .crm-field-wide { grid-column: 1 / -1; }
.crm-company-sync-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; color: #8a93a2; font-size: 9.5px; }
.crm-field { display: grid; gap: 6px; min-width: 0; color: #687386; font-size: 10.5px; font-weight: 650; }
.crm-field > span { display: flex; align-items: baseline; gap: 5px; }
.crm-field small { color: #9aa1ad; font-size: 9px; font-weight: 500; }
.crm-field input, .crm-field select, .crm-field textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: var(--crm-surface); color: #263249; font: inherit; font-size: 12.5px; resize: vertical; transition: background 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
.crm-field input:hover, .crm-field select:hover, .crm-field textarea:hover { background: #f0f2f5; }
.crm-field input:focus, .crm-field select:focus, .crm-field textarea:focus { outline: none; border-color: #cbd6f2; background: #fff; box-shadow: 0 0 0 3px var(--crm-focus); }
.crm-field-wide { grid-column: 1 / -1; }
.crm-record-form .inline-warning { margin-top: 16px; border: 0; border-radius: 8px; background: #fff7df; }

.crm-create-surface { max-width: 940px; margin: 0 auto; }
.crm-create-form { padding: 4px 0 10px; }
.crm-create-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.crm-create-header > div > span { color: var(--crm-accent); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.crm-create-header h2 { margin: 6px 0 0; color: var(--crm-ink); font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }
.crm-create-header p { margin: 8px 0 0; color: #7f8898; font-size: 12px; }
.crm-create-company { position: relative; padding: 24px; border: 1px solid #dce4f2; border-radius: 13px; background: #f4f7fd; }
.crm-company-lookup { position: relative; }
.crm-company-lookup-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(210px, .65fr); gap: 12px; }
.crm-create-company .crm-field input { min-height: 48px; border-color: #d7dfeb; background: #fff; font-size: 14px; }
.crm-company-search-results { position: absolute; z-index: 12; top: calc(100% + 7px); right: 0; left: 0; overflow: hidden; border: 1px solid #e1e4ea; border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(31, 42, 67, .14); }
.crm-company-search-results button { display: flex; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid #f0f1f3; border-radius: 0; background: #fff; color: #24304a; text-align: left; flex-direction: column; align-items: flex-start; }
.crm-company-search-results button:hover, .crm-company-search-results button:focus { background: #f6f8fc; }
.crm-company-search-results button span, .crm-company-search-state { color: #7b8494; font-size: 10.5px; }
.crm-company-search-state { padding: 13px 14px; }
.crm-company-registry-summary { margin-top: 20px; padding: 18px; border: 0; border-radius: 12px; background: #fff; }
.crm-company-registry-summary.is-revealing { animation: registry-reveal 240ms cubic-bezier(.2, .75, .25, 1) both; }
.crm-registry-identity { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.crm-registry-identity > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-registry-check { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: #dff3e8; color: #24704f; font-size: 11px; font-weight: 800; }
.crm-registry-identity strong, .crm-registry-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-registry-identity strong { color: var(--crm-ink); font-size: 12.5px; }
.crm-registry-identity small { max-width: 570px; margin-top: 3px; color: #858e9d; font-size: 10px; }
.crm-registry-activity { flex: 0 0 auto; color: #277252; font-size: 9.5px; font-weight: 750; }
.crm-registry-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 0; border: 0; }
.crm-registry-facts > div { min-width: 0; padding: 0; }
.crm-registry-facts dt { color: #969daa; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.crm-registry-facts dd { overflow: hidden; margin: 5px 0 0; color: #364258; font-size: 10.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.crm-group-field { max-width: 280px; margin-top: 18px; }
.crm-group-field input { background: #fff; }
.crm-create-mandate { margin-top: 24px; padding: 24px; border: 1px solid #e4e8f0; border-radius: 13px; background: #fff; opacity: .48; transition: opacity 180ms ease, transform 180ms ease; }
.crm-create-mandate.is-ready { opacity: 1; animation: mandate-ready 220ms ease both; }
@keyframes mandate-ready { from { transform: translateY(5px); } to { transform: none; } }
.crm-create-mandate-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.crm-create-mandate-heading > div { display: grid; gap: 4px; }
.crm-create-mandate-heading > div > span { color: var(--crm-ink); font-size: 15px; font-weight: 750; }
.crm-create-mandate-heading strong, .crm-create-mandate-heading > span { color: #8a92a0; font-size: 10px; font-weight: 600; }
.crm-create-mandate fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.crm-create-mandate fieldset:disabled { pointer-events: none; }
.crm-create-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding-top: 18px; border-top: 1px solid #eceef2; }
.crm-create-footer > span { color: #8d95a2; font-size: 10px; }

.prospect-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.prospect-toolbar > div:first-child { display: grid; gap: 3px; }
.prospect-toolbar #prospect-count { color: var(--crm-ink); font-size: 13px; font-weight: 750; }
.prospect-toolbar small { color: #8d95a2; font-size: 10px; }
.prospect-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.prospect-view-switch { display: flex; padding: 3px; border: 1px solid #dfe4ec; border-radius: 9px; background: #fff; }
.prospect-view-switch button { width: auto; min-height: 30px; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: #758094; font-size: 10.5px; font-weight: 650; box-shadow: none; }
.prospect-view-switch button:hover { background: #f4f6f9; color: var(--crm-ink); }
.prospect-view-switch button.is-active { background: #eaf0ff; color: var(--crm-accent); }
.prospect-result { min-height: 0; }
.prospect-list-filters { grid-template-columns: minmax(440px, 2.4fr) repeat(2, minmax(170px, .65fr)); }
.prospect-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); align-items: start; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-color: #d8dce4 transparent; scrollbar-width: thin; }
.prospect-column { display: grid; grid-template-rows: auto auto; align-self: start; min-width: 220px; overflow: hidden; border: 1px solid #e2e6ec; border-radius: 11px; background: #f4f5f7; transition: border-color 140ms ease, background 140ms ease; }
.prospect-column.is-drag-over { border-color: #9db6f2; background: #eef3ff; }
.prospect-column > header { padding: 13px 13px 11px; border-bottom: 1px solid #e6e9ee; background: #fafbfc; }
.prospect-column > header > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prospect-column h2 { margin: 0; color: #344056; font-size: 11.5px; font-weight: 750; }
.prospect-column header span { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e9ecf1; color: #687386; font-size: 9px; font-weight: 750; }
.prospect-column header > strong { display: block; margin-top: 7px; color: #738097; font-size: 10px; font-weight: 650; }
.prospect-column-body { display: flex; flex-direction: column; gap: 8px; padding: 9px; }
.prospect-column-add { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 34px; margin-top: 0; padding: 7px 9px; border: 1px dashed #cfd6e1; border-radius: 8px; background: transparent; color: #7d8798; font-size: 10px; font-weight: 650; box-shadow: none; }
.prospect-column-add:hover { border-color: #9eb3df; background: #f8faff; color: var(--crm-accent); transform: none; }
.prospect-column-add span { font-size: 13px; line-height: 1; }
.prospect-card { display: grid; gap: 7px; padding: 13px; border: 1px solid #e1e5eb; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(22, 37, 67, .035); cursor: pointer; transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease; }
.prospect-card:hover, .prospect-card:focus-visible { outline: none; border-color: #bdcae3; box-shadow: 0 7px 18px rgba(22, 37, 67, .08); transform: translateY(-1px); }
.prospect-card.is-dragging { opacity: .45; transform: rotate(1deg); }
.prospect-card strong { overflow: hidden; color: var(--crm-ink); font-size: 11.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.prospect-card span { color: #788396; font-size: 10px; }
.prospect-card b { color: #3e4b64; font-size: 11px; font-weight: 700; }
.prospect-created-at {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  color: #838c9c;
  font-size: 9.5px;
  font-style: normal;
  outline: none;
}
.prospect-created-at svg { width: 11px; height: 11px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.prospect-created-at::after {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 6px);
  left: 0;
  padding: 5px 7px;
  border-radius: 5px;
  background: #111827;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease;
  visibility: hidden;
  white-space: nowrap;
}
.prospect-created-at:hover::after,
.prospect-created-at:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.prospect-column-empty { padding: 14px 4px; color: #a0a7b2; font-size: 9.5px; text-align: center; }
.prospect-list-wrap { overflow: hidden; border: 1px solid #e1e5ec; border-radius: 10px; background: #fff; }
.prospect-list-table { width: 100%; border-collapse: collapse; }
.prospect-list-table th { padding: 12px 16px; background: #fafafa; color: #9299a6; font-size: 8.5px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.prospect-list-table td { padding: 13px 16px; border-top: 1px solid #eef0f3; color: #536075; font-size: 11px; }
.prospect-list-table tbody tr { cursor: pointer; transition: background 120ms ease; }
.prospect-list-table tbody tr:hover, .prospect-list-table tbody tr:focus { outline: none; background: #f7f9fd; }
.prospect-list-table td strong { color: var(--crm-ink); font-size: 11.5px; }
.prospect-stage-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #eef2fa; color: #49618d; font-size: 9.5px; font-weight: 700; }
.prospect-detail-view { max-width: 1180px; min-height: calc(100vh - 106px); margin: 0 auto; padding: 24px 28px 32px; border: 1px solid var(--crm-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(2, 30, 95, .055); animation: record-in 180ms ease both; }
.prospect-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0 22px; border-bottom: 1px solid #e8ebf0; }
.prospect-detail-header h2 { overflow: hidden; max-width: 720px; margin: 0; color: var(--crm-ink); font-size: 24px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.prospect-detail-actions { display: flex; align-items: center; gap: 8px; }
.prospect-detail-main { padding: 24px 0 10px; }
.prospect-overview { display: grid; grid-template-columns: 1.2fr .7fr 1fr; gap: 22px; align-items: end; padding: 22px 24px; border: 1px solid #e4e8f0; border-radius: 12px; background: #f7f9fc; }
.prospect-stage-select { display: grid; gap: 7px; color: #8d95a2; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prospect-stage-select select { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid #dce2ec; border-radius: 8px; background: #fff; color: #344056; font: inherit; font-size: 11px; text-transform: none; }
.prospect-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 22px; margin-top: 24px; }
.prospect-activity { align-self: start; }
.prospect-comment-form { display: grid; gap: 8px; }
.prospect-comment-form textarea { width: 100%; min-height: 76px; padding: 11px 12px; border: 1px solid #e0e5ed; border-radius: 9px; background: #f8f9fb; color: #344056; font: inherit; font-size: 11.5px; resize: vertical; }
.prospect-comment-form textarea:focus { outline: none; border-color: #b5c8f3; background: #fff; box-shadow: 0 0 0 3px var(--crm-focus); }
.prospect-comment-form button { justify-self: end; }
.prospect-activity-list { display: grid; gap: 12px; margin-top: 20px; }
.prospect-comment { padding-top: 13px; border-top: 1px solid #edf0f3; }
.prospect-comment header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prospect-comment strong { overflow: hidden; color: #45526a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.prospect-comment time, .prospect-activity-event time { color: #9aa1ad; font-size: 8.5px; }
.prospect-comment p { margin: 7px 0 0; color: #536075; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.prospect-activity-event { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #edf0f3; }
.prospect-activity-event > span { width: 6px; height: 6px; border-radius: 50%; background: #7693d8; }
.prospect-activity-event p { margin: 0; color: #6b7689; font-size: 9.5px; }

@media (max-width: 1100px) {
  .crm-filters { grid-template-columns: minmax(320px, 1.5fr) repeat(2, minmax(130px, .6fr)); }
  .crm-filters label:nth-child(4), .crm-archive-toggle { grid-column: auto; }
  .crm-workspace { height: max(500px, calc(100vh - 365px)); }
  .crm-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-registry-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-company-facts, .crm-company-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prospect-board { grid-template-columns: repeat(5, 230px); }
  .prospect-list-filters { grid-template-columns: minmax(320px, 1.5fr) repeat(2, minmax(150px, .65fr)); }
  .prospect-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .workspace-header { margin-bottom: 18px; }
  .crm-toolbar { align-items: center; flex-direction: row; }
  .crm-toolbar .primary-compact { width: auto; }
  #crm-list-view { padding: 16px; }
  .crm-filters { grid-template-columns: 1fr 1fr; padding: 12px; }
  .crm-search { grid-column: 1 / -1; }
  .crm-archive-toggle { grid-column: auto; }
  .crm-workspace { height: calc(100dvh - 430px); min-height: 320px; }
  .crm-table { min-width: 1020px; }
  .crm-pagination-range { display: none; }
  .crm-pagination-controls { width: 100%; justify-content: space-between; }
  .crm-record-view { padding: 18px 16px 24px; }
  .crm-record-header { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 18px; }
  .crm-record-header h2, .crm-company-header-address { white-space: normal; }
  .crm-record-main { padding: 20px 0 30px; }
  .crm-record-actions { justify-content: stretch; }
  .crm-record-actions .crm-action { flex: 1; }
  .crm-summary-grid { grid-template-columns: 1fr 1fr; gap: 20px 18px; padding: 20px; }
  .crm-info-item.is-wide { grid-column: 1 / -1; }
  .crm-detail-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .crm-form-grid, .crm-company-form-grid, .crm-company-lookup-grid, .crm-company-facts { grid-template-columns: 1fr; }
  .crm-field-wide { grid-column: auto; }
  .crm-company-form-grid .crm-field-wide, .crm-company-facts .is-wide { grid-column: auto; }
  .crm-create-header { align-items: flex-start; }
  .crm-create-company { padding: 18px; }
  .crm-create-mandate-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .crm-create-footer { align-items: stretch; flex-direction: column; }
  .crm-create-footer .crm-action { width: 100%; }
  .crm-registry-facts { grid-template-columns: 1fr 1fr; }
  .crm-registry-identity { align-items: flex-start; }
  .crm-registry-identity small { white-space: normal; }
  .prospect-toolbar { align-items: flex-start; flex-direction: column; }
  .prospect-toolbar-actions { width: 100%; justify-content: space-between; }
  .prospect-board { grid-template-columns: repeat(5, 82vw); }
  .prospect-list-filters { grid-template-columns: 1fr 1fr; }
  .prospect-list-filters .crm-search { grid-column: 1 / -1; }
  .prospect-detail-view { padding: 18px 16px 24px; }
  .prospect-detail-header { align-items: flex-start; flex-direction: column; }
  .prospect-detail-header h2 { white-space: normal; }
  .prospect-detail-actions { width: 100%; }
  .prospect-detail-actions .crm-action { flex: 1; }
  .prospect-overview { grid-template-columns: 1fr 1fr; }
  .prospect-stage-select { grid-column: 1 / -1; }
  .prospect-list-wrap { overflow-x: auto; }
  .prospect-list-table { min-width: 680px; }
}

.container {
  max-width: 1320px;
  margin: 48px auto 64px;
  padding: 0 28px;
}

h1 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--blue-dark);
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.brand-header {
  margin-bottom: 14px;
}

.brand-logo {
  display: block;
  width: 196px;
  height: auto;
  margin: 0 0 14px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--blue-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subtitle {
  margin: 8px 0 0;
  color: var(--gray-text);
  font-size: 16px;
  line-height: 1.5;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 14px;
  box-shadow: 0 10px 32px rgba(2, 30, 95, 0.06);
}

.auth-card {
  max-width: 560px;
  padding: 20px;
}

form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: var(--blue-dark);
  font-size: 15px;
}

.label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #b7c1d4;
  color: #4c5a73;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: help;
}

.help-tooltip::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 5;
}

.help-tooltip:hover::after,
.help-tooltip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.field-group {
  display: grid;
  gap: 6px;
}

.field-label {
  font-weight: 600;
  color: var(--blue-dark);
  font-size: 15px;
}

input,
select,
button {
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 4px;
}

input,
select {
  border: 1px solid #c6ccda;
  background: var(--white);
  color: var(--gray-dark);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(22, 87, 232, 0.14);
}

button {
  border: none;
  background: var(--blue-primary);
  color: var(--white);
  cursor: pointer;
  width: auto;
  font-weight: 500;
  padding: 16px 24px;
}

button:hover {
  background: #0f47ca;
}

#check-form.check-form-surface {
  width: 100%;
  gap: 20px;
  padding: 24px;
  margin-right: auto;
  border-color: #dfe3ea;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(18, 32, 62, 0.055);
}

.check-identity-grid { display: grid; grid-template-columns: 260px 260px; gap: 24px; justify-content: start; }
.check-primary-field,
.check-group-section { width: 260px; max-width: 100%; gap: 8px; }
.check-primary-field input,
.check-group-section input {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
}

.check-form-section { display: grid; gap: 9px; min-width: 0; }
.check-mission-section { width: 640px; max-width: 100%; }
.check-context-grid { display: grid; grid-template-columns: 260px 300px 220px; gap: 24px; align-items: end; justify-content: start; }
.check-status-section { width: 260px; }
.check-amount-section { width: 300px; }
.check-date-section { display: grid; width: 220px; gap: 6px; }

.check-mode-tabs {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin: -8px 0 22px;
  border-bottom: 1px solid var(--line);
}

#check-mode-tabs .check-mode-tab {
  position: relative;
  width: auto;
  padding: 10px 1px 12px;
  border-radius: 0;
  background: transparent;
  color: #697386;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 150ms ease;
}

#check-mode-tabs .check-mode-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--blue-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 170ms ease;
}

#check-mode-tabs .check-mode-tab:hover,
#check-mode-tabs .check-mode-tab:focus-visible {
  background: transparent;
  color: var(--blue-dark);
}

#check-mode-tabs .check-mode-tab:focus-visible {
  outline: 2px solid rgba(22, 87, 232, 0.28);
  outline-offset: 3px;
}

#check-mode-tabs .check-mode-tab.mode-btn-active {
  color: var(--blue-dark);
}

#check-mode-tabs .check-mode-tab.mode-btn-active::after {
  transform: scaleX(1);
}

#unitary-panel:not(.hidden),
#batch-panel:not(.hidden) {
  animation: check-panel-in 170ms ease both;
}

@keyframes check-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.cac-add-btn {
  align-self: center;
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid var(--blue-dark);
  font-size: 14px;
  font-weight: 600;
  background: var(--white);
  color: var(--blue-dark);
  transition: background 160ms ease, color 160ms ease;
}

.cac-add-btn:hover {
  background: rgba(2, 30, 95, 0.06);
}

.cac-add-btn.mode-btn-active {
  background: var(--blue-dark);
  color: var(--white);
}

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.choice-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #d6dbe4;
  border-radius: 8px;
  background: #fff;
  color: #263249;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.choice-option strong { color: #17233d; font-size: 13px; line-height: 1.25; }
.choice-option:hover { border-color: #aebbd2; background: #fbfcff; transform: translateY(-1px); }
.choice-option:focus-visible { outline: 2px solid rgba(22, 87, 232, .25); outline-offset: 2px; }
.choice-option-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #dfe9ff;
  color: var(--blue-primary);
  font-size: 11px;
  opacity: 0;
  transform: scale(.75);
  transition: opacity 140ms ease, transform 140ms ease;
}
.choice-option.is-selected { border-color: #7da0f2; background: #f3f7ff; box-shadow: inset 0 0 0 1px rgba(22, 87, 232, .08); }
.choice-option.is-selected .choice-option-indicator { opacity: 1; transform: scale(1); }

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid #dce1e9;
  border-radius: 8px;
  background: #f1f3f7;
}
.segment-option {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 6px;
  background: transparent;
  color: #6b7485;
  font-size: 13px;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.segment-option:hover { background: rgba(255, 255, 255, .65); color: #263249; }
.segment-option.is-selected,
.segment-option.is-selected:hover { background: #fff; color: var(--blue-dark); box-shadow: 0 1px 4px rgba(23, 35, 61, .12); }
.segment-option:focus-visible { outline: 2px solid rgba(22, 87, 232, .25); outline-offset: 1px; }

.number-stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 44px;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid #c6ccda;
  border-radius: 8px;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.number-stepper:focus-within { border-color: var(--blue-primary); box-shadow: 0 0 0 3px rgba(22, 87, 232, .12); }
.number-stepper-button {
  width: 44px;
  min-height: 52px;
  padding: 0;
  border-radius: 0;
  background: #f6f7f9;
  color: #31405e;
  font-size: 21px;
  font-weight: 400;
}
.number-stepper-button:first-child { border-right: 1px solid #e0e4ea; }
.number-stepper-button:last-child { border-left: 1px solid #e0e4ea; }
.number-stepper-button:hover { background: #edf1f7; color: var(--blue-primary); }
.number-stepper-input {
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
.number-stepper-input:focus { border: 0; box-shadow: none; }
.number-stepper-input::placeholder { color: #a1a8b4; font-weight: 500; }
.number-stepper-suffix { display: flex; align-items: center; padding-right: 12px; color: #727c8e; font-size: 14px; font-weight: 600; }

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

.check-form-footer {
  width: 640px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 8px;
}
#check-form .check-submit { min-width: 220px; padding: 14px 20px; border-radius: 7px; }
#check-form .check-submit:disabled { opacity: .66; cursor: wait; }

.check-attribution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dfeaff;
  color: var(--blue-primary);
  font-size: 12px;
  font-weight: 700;
}

.crm-prospect-attribution {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d7e2f6;
  border-radius: 8px;
  background: #f6f9ff;
  color: var(--blue-dark);
}

.crm-prospect-attribution small,
.crm-prospect-attribution strong { display: block; }
.crm-prospect-attribution small { color: var(--gray-text); font-size: 11px; font-weight: 500; }
.crm-prospect-attribution strong { margin-top: 1px; font-size: 13px; }

input[readonly] {
  background: #f4f6fa;
  color: #586173;
}


.history-card {
  padding: 0;
  overflow: hidden;
}

/* Herite de .pennylane-controls (segments a gauche, actions a droite): on ne
   redefinit ici que ce qui distingue l'onglet. */
.history-toolbar {
  margin-bottom: 12px;
}



.history-actions {
  gap: 10px;
}

.history-workspace {
  display: grid;
}

.history-workspace.has-detail {
  grid-template-columns: minmax(0, 1fr) minmax(480px, 0.52fr);
  align-items: start;
}

.history-table-wrap {
  overflow-x: auto;
  background: #fff;
  min-width: 0;
}

.history-table-wrap > p {
  margin: 0;
  padding: 18px 16px;
  color: var(--muted);
  font-size: 13px;
}

.history-table {
  min-width: 920px;
  margin-top: 0;
  border-radius: 0;
}

.history-table th,
.history-table td {
  font-size: 13px;
  padding: 11px 12px;
  vertical-align: middle;
}

.history-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.history-row td {
  border-left: 0;
  border-right: 0;
}

.history-row:hover td {
  background: #f7f9ff;
}

.table-sub {
  display: block;
  margin-top: 3px;
  color: #647084;
  font-size: 12px;
}

.alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  border-radius: 999px;
  background: #eef2f9;
  color: #49556b;
  font-weight: 700;
}

.alert-count.has-alerts {
  background: #fff2f2;
  color: #9f1f1f;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #c6ccda;
  background: #fff;
  color: #39445c;
}

.status-signed {
  border-color: #bfe4ce;
  background: #edf8f2;
  color: #17613f;
}

.status-prospect {
  border-color: #d8deea;
  background: #f6f8fc;
  color: #4a5368;
}

.table-action-btn {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #c6ccda;
  border-radius: 4px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 600;
}

.history-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

.table-action-btn:hover {
  background: #fff;
  border-color: var(--blue-primary);
}

.history-detail-panel {
  margin: 0;
  padding: 18px;
  border-left: 1px solid var(--line);
  background: #fbfcff;
  max-height: calc(100vh - 96px);
  overflow: auto;
  position: sticky;
  top: 0;
}

.history-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.history-detail-header h4 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 22px;
  line-height: 1.2;
}

.detail-kicker {
  margin: 0 0 4px;
  color: #647084;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

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

.detail-summary-row span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: #647084;
  font-size: 13px;
}

.detail-summary-row strong {
  color: var(--blue-dark);
  font-size: 22px;
  line-height: 1;
}

.detail-section {
  margin-top: 16px;
}

.detail-section h5 {
  margin: 0 0 8px;
  color: var(--blue-dark);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
}

.detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.detail-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

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

.detail-list dt {
  color: #647084;
  font-size: 12px;
  font-weight: 700;
}

.detail-list dd {
  margin: 0;
  min-width: 0;
  color: var(--gray-dark);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.detail-muted {
  color: #647084;
  font-size: 12px;
  line-height: 1.5;
}

.alert-card-list {
  display: grid;
  gap: 8px;
}

.alert-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #aeb8cc;
  border-radius: 4px;
  background: #fff;
}

.alert-card-blocking {
  border-left-color: var(--warn-border);
}

.alert-card strong {
  color: var(--blue-dark);
  font-size: 13px;
}

.alert-card span {
  color: var(--gray-dark);
  font-size: 14px;
}

.alert-card small {
  color: #647084;
  font-size: 12px;
}

.batch-help {
  margin: 0;
  color: var(--gray-text);
}

.auth-title {
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 30px;
  line-height: 1.2;
  color: #0f172a;
}

#auth-email-form,
#auth-otp-form {
  margin-top: 0;
}

.auth-card label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

.auth-card input {
  font-size: 15px;
  padding: 12px 14px;
}

.auth-actions {
  display: block;
}

.auth-primary-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  min-height: 0;
  font-size: 15px;
  font-weight: 600;
}

.auth-step-text {
  margin: 0 0 22px;
  color: #3d475f;
  font-size: 15px;
  line-height: 1.45;
}

.auth-brand-logo {
  display: block;
  width: 172px;
  height: auto;
  margin: 0 0 18px;
}

.auth-minor-link {
  display: inline-block;
  margin-top: 14px;
  border: none;
  background: transparent;
  color: #324064;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  width: auto;
  min-height: 0;
}

.auth-minor-link:hover {
  background: transparent;
  color: #1f2d4e;
  text-decoration: underline;
}

.auth-flash {
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 14px;
}

.auth-flash.error {
  background: #fff2f2;
  color: #9f1f1f;
  border: 1px solid #f1caca;
}

.auth-flash.success {
  background: #edf9f2;
  color: #136f46;
  border: 1px solid #c7edd8;
}

.ghost-btn {
  background: #fff;
  color: var(--blue-dark);
  border: 1px solid #c6ccda;
  padding: 8px 12px;
  font-size: 14px;
  min-height: 38px;
}

.ghost-btn:hover {
  background: #fff;
  border-color: var(--blue-primary);
}

.session-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 16px;
  color: #4b5362;
  font-size: 16px;
}

.session-logout-btn {
  padding: 7px 11px;
  min-height: 34px;
  font-size: 13px;
}

.cluster-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.direction-blocks {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.batch-actions {
  margin: 2px 0 8px;
}

.template-link {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #c6ccda;
  border-radius: 4px;
  color: var(--blue-dark);
  font-size: 14px;
}

.template-link:hover {
  border-color: var(--blue-primary);
}

.advanced-box {
  border: none;
  background: transparent;
  border-radius: 4px;
  padding: 0;
}

.advanced-toggle {
  border: none;
  background: transparent;
  color: #6a7180;
  padding: 0 16px 0 0;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}

.advanced-toggle:hover {
  background: transparent;
}

.advanced-toggle::after {
  content: ">";
  position: absolute;
  right: 0;
  top: 0;
  color: #6a7180;
  font-weight: 400;
  transform-origin: 50% 50%;
  transition: transform 140ms ease;
}

.advanced-toggle.is-open::after {
  transform: rotate(90deg);
}

.advanced-content {
  margin-top: 6px;
}

.check-linked-setting { width: 640px; max-width: 100%; padding: 4px 0; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--gray-text);
  font-size: 14px;
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-dark);
}

.hidden {
  display: none;
}

.result-ok {
  border-left: 4px solid var(--ok-border);
}

.result-warn {
  border-left: 4px solid var(--warn-border);
}

.result-headline {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gray-dark);
}

.result-headline .alert-count {
  margin-right: 8px;
  vertical-align: middle;
}

.result-primary {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--gray-dark);
}

.tech-details {
  margin-top: 16px;
}

.tech-details summary {
  cursor: pointer;
  font-size: 12px;
  color: #626a78;
  font-weight: 600;
}

.tech-details .meta-note {
  margin-top: 8px;
}

h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--blue-dark);
  font-size: 32px;
  letter-spacing: -0.02em;
  font-weight: 500;
}

h4 {
  margin: 18px 0 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--blue-dark);
  font-size: 24px;
  font-weight: 500;
}

.table-header {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-header h4 {
  margin: 0;
}

.icon-button {
  width: auto;
  min-width: 96px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #c6ccda;
  border-radius: 4px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.icon-button:hover {
  border-color: var(--blue-primary);
  background: #fff;
}

.show-more-btn {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #c6ccda;
  border-radius: 4px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 14px;
}

.show-more-btn:hover {
  background: #fff;
  border-color: var(--blue-primary);
}

.table-collapse-wrap {
  position: relative;
}

.table-collapse-wrap.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.show-more-overlay {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  margin-top: 0;
}

tr.blurred-row td {
  filter: blur(1.1px);
  opacity: 0.7;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

th,
td {
  border: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}

th {
  background: #f3f6fd;
  font-weight: 700;
  color: var(--blue-dark);
}

a {
  color: var(--blue-primary);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

.meta-note {
  margin-top: 12px;
  color: #626a78;
  font-size: 12px;
}

.app-footer {
  margin: 10px 0 24px;
  text-align: center;
  color: #626a78;
  font-size: 12px;
}

body.auth-screen-mode {
  background: radial-gradient(circle at 20% 0, #e9eefc 0, #f5f7fb 45%, #eef2f9 100%);
}

body.auth-screen-mode.auth-step-otp {
  background: radial-gradient(circle at 90% 0, #e9eefc 0, #f5f7fb 45%, #eef2f9 100%);
}

body.auth-screen-mode .container {
  min-height: 100vh;
  margin: 0 auto;
  max-width: none;
  width: 100%;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.auth-screen-mode .brand-logo,
body.auth-screen-mode .brand-header,
body.auth-screen-mode .app-footer {
  display: none;
}

body.auth-screen-mode .auth-card {
  width: min(480px, 92vw);
  margin: 0;
  padding: 28px;
  border: 1px solid #d2d9ea;
  border-radius: 6px;
  box-shadow: 0 14px 38px rgba(22, 87, 232, 0.08);
}

body.auth-screen-mode .auth-card input {
  width: 100%;
  border: 1px solid #c6cfdf;
  border-radius: 4px;
  font-size: 15px;
  color: #0f172a;
  background: #fff;
}

body.auth-screen-mode #auth-otp-input {
  font-size: 16px;
  letter-spacing: 0.2em;
  text-align: center;
}

body.auth-screen-mode .auth-card input:focus {
  outline: none;
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(22, 87, 232, 0.18);
}

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

  .history-workspace.has-detail {
    grid-template-columns: 1fr;
  }

  .history-detail-panel {
    max-height: none;
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 768px) {
  .container {
    margin-top: 28px;
  }

  .brand-logo {
    width: 152px;
  }

  h1 {
    font-size: 36px;
  }

  h3 {
    font-size: 28px;
  }

  h4 {
    font-size: 20px;
  }

  .card {
    padding: 16px;
  }

  #check-form.check-form-surface { gap: 21px; padding: 18px 16px; }
  .check-primary-field,
  .check-group-section,
  .check-mission-section,
  .check-status-section,
  .check-amount-section,
  .check-date-section,
  .check-linked-setting,
  .check-form-footer { width: 100%; }
  .check-primary-field input,
  .check-group-section input { min-height: 48px; font-size: 16px; }
  .check-identity-grid,
  .check-context-grid,
  .check-details-grid { grid-template-columns: 1fr; gap: 18px; }
  .choice-grid { gap: 7px; }
  .choice-option { min-height: 54px; padding: 10px; grid-template-columns: minmax(0, 1fr) 19px; gap: 7px; }
  .choice-option strong { font-size: 12px; }
  .choice-option-indicator { width: 19px; height: 19px; }
  .check-form-footer { align-items: stretch; flex-direction: column; }
  #check-form .check-submit { width: 100%; }

  button {
    width: 100%;
  }

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

  .history-workspace.has-detail {
    grid-template-columns: 1fr;
  }

  .history-detail-panel {
    max-height: none;
    position: static;
  }

  .history-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

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

  .mode-switch {
    display: flex;
    width: 100%;
  }

  .mode-btn {
    min-width: 0;
    flex: 1;
    padding-left: 8px;
    padding-right: 8px;
  }

  .auth-actions {
    display: block;
  }

  .session-bar {
    align-items: flex-start;
    flex-direction: column;
    font-size: 16px;
  }

  .session-bar .ghost-btn {
    width: auto;
  }

body.auth-screen-mode .container {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Final mobile specificity overrides for the legacy full-width button rule. */
@media (max-width: 768px) {
  .sidebar-toggle,
  .icon-button,
  .crm-record-link,
  .crm-pagination button,
  /* Composants de barre de filtres/actions: ce sont des pastilles, elles ne
     doivent jamais s'etirer sur toute la largeur. */
  .pennylane-refresh-btn,
  .pennylane-segment,
  .filter-segment,
  .filter-pill,
  .sidebar-logout { width: auto; }
}

/* Multi-select filter (generic — see createMultiSelectFilter) */
.ms { position: relative; }

.ms-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--gray-dark);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

/* Only the border reacts to hover; the explicit background overrides the global
   button:hover (which is more specific than the plain .ms-trigger fill and would
   otherwise flood the control blue). */
.ms-trigger:hover { border-color: var(--blue-primary); background: #fff; }

.ms-trigger-active,
.ms-trigger-active:hover {
  border-color: var(--blue-primary);
  background: #f2f6ff;
  color: var(--blue-dark);
  font-weight: 600;
}

.ms-summary { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-caret { flex: 0 0 auto; color: var(--muted); font-size: 10px; }

.ms-clear {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: var(--blue-dark);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.ms-clear:hover { background: rgba(2, 30, 95, 0.1); }
.ms-clear:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 1px; }

.ms-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-width: 380px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(2, 30, 95, 0.14);
}

.ms-list { max-height: 260px; overflow: auto; padding: 6px; }

.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.ms-option:hover { background: #f4f7fd; }
.ms-option span { white-space: nowrap; }
.ms-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue-primary); }
.ms-empty { margin: 6px 8px; font-size: 12px; }

.ms-actions {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--line);
}

.ms-actions button {
  flex: 1;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ms-cancel {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--gray-text);
}

.ms-cancel:hover { border-color: var(--blue-primary); color: var(--blue-primary); }

/* Pennylane : facturation par SIREN */
.pennylane-filter-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: #647084;
}

.pennylane-page-size { display: flex; align-items: center; gap: 4px; }

.pennylane-page-size button {
  min-width: 28px;
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.pennylane-page-size button:hover { background: #eef2f8; color: var(--gray-dark); }

.pennylane-page-size .pennylane-size-active {
  border-color: var(--line);
  background: #fff;
  color: var(--blue-dark);
  font-weight: 600;
}

.pennylane-toolbar {
  display: flex;
  align-items: center;
  /* The status block absorbs the slack (see .pennylane-status) so every button
     in this bar stays anchored to the right edge as one group. Under
     space-between, a toolbar with two buttons -- admins get both "Nouveau
     mandat" and "Importer" -- stranded the first one mid-bar. */
  justify-content: flex-end;
  gap: 12px;
  /* Matches .pennylane-refresh-btn's own min-height, and that is the point:
     the buttons in this bar are gated on capabilities that only arrive with
     /api/me, one network round trip after the first paint. Without the space
     reserved up front, the toolbar grows the moment permissions resolve and
     the whole table below it jumps -- reading as a second, jolting render.
     Reserving it keeps the height independent of what the caller may do. */
  min-height: 40px;
  margin-bottom: 14px;
}

.pennylane-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}

.pennylane-freshness {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pennylane-info {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  cursor: help;
}

.pennylane-info:hover { border-color: var(--blue-primary); color: var(--blue-primary); }

.pennylane-alert {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #f0d9a4;
  background: #fdf6e8;
  color: #93670f;
  font-size: 12px;
  font-weight: 600;
  cursor: help;
}

.pennylane-alert::before { content: "⚠"; font-size: 11px; }

.pennylane-refresh-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--blue-primary);
  border-radius: 10px;
  background: #fff;
  color: var(--blue-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.pennylane-refresh-btn:hover { background: var(--blue-primary); color: #fff; }
.pennylane-refresh-btn.hidden { display: none; }
.pennylane-refresh-btn:disabled { opacity: 0.6; cursor: default; }

/* Three buttons of the same weight read as three equally likely next steps,
   and on the CAC mandates bar they are not: filing a mandate is the daily
   gesture, exporting is occasional, and replacing a cabinet's register from a
   spreadsheet is a group-wide operation run a few times a year. Weight
   therefore grows left to right -- quiet, outlined, solid -- so the eye lands
   on the everyday action last and the bulk one never competes for it. */
.pennylane-refresh-btn.is-primary {
  background: var(--blue-primary);
  color: #fff;
}

.pennylane-refresh-btn.is-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.pennylane-refresh-btn.is-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

/* Hover restores the outline rather than filling: the button has to look
   reachable, not promoted. */
.pennylane-refresh-btn.is-quiet:hover {
  border-color: var(--line);
  background: #eef2f8;
  color: var(--blue-dark);
}

/* Separates the group-wide register operations from the everyday ones. Carries
   the same capability as the button on its left, so a caller who cannot import
   is not left with a stray line floating in the bar. */
.pennylane-toolbar-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 6px 0;
  background: var(--line);
}

.pennylane-toolbar-divider.hidden { display: none; }
.pennylane-refresh-ic { font-size: 15px; line-height: 1; }
.pennylane-refresh-btn.is-loading .pennylane-refresh-ic { animation: pennylane-spin 0.9s linear infinite; }

@keyframes pennylane-spin { to { transform: rotate(360deg); } }

/* Per-cabinet refresh progress: collapsed to a one-line summary so it never
   competes for space with the table, expandable to see each cabinet live. */
.pennylane-progress {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafbfc;
}

.pennylane-progress[open] { padding-bottom: 6px; }

.pennylane-progress-summary,
#pennylane-progress-summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

#pennylane-progress-summary::-webkit-details-marker { display: none; }
#pennylane-progress-summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s;
}
.pennylane-progress[open] #pennylane-progress-summary::before { transform: rotate(90deg); }

.pennylane-progress-list {
  list-style: none;
  margin: 0;
  padding: 0 12px 6px;
  display: grid;
}

.pennylane-progress-item {
  border-top: 1px solid #e6eaf1;
  color: var(--text);
}

.pennylane-progress-item:first-child { border-top: 0; }

.pennylane-progress-cabinet > summary {
  display: grid;
  grid-template-columns: 8px minmax(130px, 0.8fr) minmax(180px, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 11.5px;
}

.pennylane-progress-cabinet > summary::-webkit-details-marker { display: none; }
.pennylane-progress-cabinet > summary strong { color: var(--blue-dark); font-size: 12px; }

.pennylane-progress-current {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pennylane-progress-state {
  min-width: 64px;
  text-align: right;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.pennylane-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--line);
}

.pennylane-progress-item.is-running .pennylane-progress-dot {
  background: var(--blue-primary);
  animation: pennylane-progress-pulse 1s ease-in-out infinite;
}
.pennylane-progress-item.is-ok .pennylane-progress-dot { background: #2f9e5c; }
.pennylane-progress-item.is-warning .pennylane-progress-dot { background: #d28b18; }
.pennylane-progress-item.is-error .pennylane-progress-dot { background: #c94b4b; }
.pennylane-progress-item.is-warning .pennylane-progress-state { color: #93670f; }
.pennylane-progress-item.is-error .pennylane-progress-state { color: #93312f; }

.pennylane-progress-steps {
  position: relative;
  list-style: none;
  margin: 0 0 8px 17px;
  padding: 2px 0 6px 16px;
  border-left: 1px solid #dfe4ed;
  animation: pennylane-progress-reveal .14s ease-out;
}

.pennylane-progress-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  padding: 6px 2px 6px 8px;
  color: var(--muted);
  font-size: 10.5px;
}

.pennylane-progress-step-dot {
  position: absolute;
  left: -21px;
  top: 11px;
  width: 8px;
  height: 8px;
  border: 2px solid #fafbfc;
  border-radius: 999px;
  background: #c8cfdb;
}

.pennylane-progress-step div { display: grid; gap: 2px; }
.pennylane-progress-step strong { color: var(--gray-dark); font-size: 11px; }
.pennylane-progress-step small { align-self: center; white-space: nowrap; font-size: 10px; }
.pennylane-progress-step.is-active .pennylane-progress-step-dot {
  background: var(--blue-primary);
  animation: pennylane-progress-pulse 1s ease-in-out infinite;
}
.pennylane-progress-step.is-done .pennylane-progress-step-dot { background: #2f9e5c; }
.pennylane-progress-step.is-warning .pennylane-progress-step-dot,
.pennylane-progress-step.is-skipped .pennylane-progress-step-dot { background: #d28b18; }
.pennylane-progress-step.is-error .pennylane-progress-step-dot { background: #c94b4b; }
.pennylane-progress-step.is-error strong { color: #93312f; }
.pennylane-progress-empty { padding: 8px; color: var(--muted); font-size: 10.5px; }

@keyframes pennylane-progress-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .pennylane-progress-cabinet > summary {
    grid-template-columns: 8px minmax(100px, 1fr) auto;
  }
  .pennylane-progress-current { display: none; }
  .pennylane-progress-step { grid-template-columns: 1fr; gap: 3px; }
}

/* CAC mandate import modal — one clear path: select, automatic analysis,
   confirm. The template remains available as help, never as the main action. */
.cac-import-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 17, 45, 0.48);
  backdrop-filter: blur(4px);
  animation: pennylane-fade 0.15s ease;
}

.cac-import-modal {
  width: min(660px, 100%);
  max-height: min(760px, 92vh);
  overflow-y: auto;
  border: 1px solid rgba(216, 222, 233, 0.9);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(2, 22, 67, 0.28);
  padding: 28px 30px 26px;
  animation: pennylane-drawer-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cac-import-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }

.cac-import-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-primary);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cac-import-modal-head h4 {
  margin: 0;
  color: var(--blue-dark);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.cac-import-modal-head p { max-width: 480px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.cac-import-modal-close {
  flex: 0 0 auto;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: #f5f6f8;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.cac-import-modal-close:hover { background: #eef1f6; color: var(--text); }
.cac-import-modal-close:disabled { opacity: 0.45; cursor: not-allowed; }

.cac-import-file-stage { margin-top: 24px; }
.cac-import-file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cac-import-dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 110px;
  padding: 20px;
  border: 1.5px dashed #aebfe9;
  border-radius: 14px;
  background: #f8faff;
  cursor: pointer;
  outline: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.cac-import-dropzone:hover,
.cac-import-dropzone:focus-visible,
.cac-import-dropzone.is-dragging {
  transform: translateY(-1px);
  border-color: var(--blue-primary);
  background: #f2f6ff;
  box-shadow: 0 9px 26px rgba(22, 87, 232, 0.1);
}

.cac-import-dropzone.is-dragging { border-style: solid; }
.cac-import-dropzone.has-file { display: none; }
.cac-import-dropzone-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: #e8efff; color: var(--blue-primary); }
.cac-import-dropzone-copy { display: grid; gap: 4px; min-width: 0; }
.cac-import-dropzone-copy strong { color: var(--blue-dark); font-size: 14px; }
.cac-import-dropzone-copy span { color: var(--muted); font-size: 12px; }

.cac-import-browse {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--blue-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(22, 87, 232, 0.2);
}

.cac-import-file-meta { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #dce3ef; border-radius: 12px; background: #fbfcfe; animation: cac-import-reveal 180ms ease both; }
.cac-import-file-type { flex: 0 0 auto; padding: 6px 7px; border-radius: 7px; background: #e9effc; color: #3156a3; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; }
.cac-import-file-copy { display: grid; gap: 2px; min-width: 0; }
.cac-import-file-copy strong { overflow: hidden; color: #17233f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cac-import-file-copy span { color: var(--muted); font-size: 11px; }

.cac-import-file-meta button { margin-left: auto; padding: 5px 3px; border: 0; background: transparent; color: var(--blue-primary); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.cac-import-file-meta button:hover { text-decoration: underline; }
.cac-import-file-meta button:disabled { opacity: 0.45; cursor: not-allowed; }

.cac-import-template-help { margin: 12px 2px 0; color: var(--muted); font-size: 11.5px; }
.cac-import-template-help a { margin-left: 3px; color: #3156a3; font-weight: 600; text-decoration: none; }
.cac-import-template-help a:hover { color: var(--blue-primary); text-decoration: underline; }

.cac-import-result { margin-top: 20px; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 14px; background: #fff; animation: cac-import-reveal 200ms ease both; }
.cac-import-result--loading,
.cac-import-result--error { display: flex; align-items: center; gap: 13px; min-height: 70px; padding: 15px 16px; }
.cac-import-result--loading { background: #f8faff; }
.cac-import-result--error { border-color: #efcaca; background: #fff7f7; }
.cac-import-result--loading > div,
.cac-import-result--error > div { display: grid; gap: 3px; }
.cac-import-result--loading strong,
.cac-import-result--error strong { color: #17233f; font-size: 13px; }
.cac-import-result--loading div span,
.cac-import-result--error div span { color: var(--muted); font-size: 12px; line-height: 1.4; }

.cac-import-spinner { flex: 0 0 auto; width: 24px; height: 24px; border: 2px solid #ccd9f7; border-top-color: var(--blue-primary); border-radius: 50%; animation: pennylane-spin 0.8s linear infinite; }
.cac-import-report-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 17px 14px; }
.cac-import-report-head > div { display: grid; gap: 3px; }
.cac-import-report-head strong { color: #17233f; font-size: 13px; }
.cac-import-report-head div span { color: var(--muted); font-size: 11.5px; line-height: 1.45; }

.cac-import-report-status { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e5f5ed; color: #217755; font-size: 13px; font-weight: 800; }
.cac-import-result--warning .cac-import-report-status,
.cac-import-result--error .cac-import-report-status { background: #fde9e8; color: #b33c35; }

.cac-import-report-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #e9edf3; border-bottom: 1px solid #e9edf3; background: #fbfcfe; }
.cac-import-report-stats > div { display: grid; gap: 2px; padding: 13px 17px; }
.cac-import-report-stats > div + div { border-left: 1px solid #e9edf3; }
.cac-import-report-stats strong { color: var(--blue-dark); font-size: 19px; font-variant-numeric: tabular-nums; }
.cac-import-report-stats span { color: var(--muted); font-size: 10.5px; }

.cac-import-anomalies { padding: 13px 17px 15px; }
.cac-import-anomalies-title { display: block; margin-bottom: 7px; color: #7d4950; font-size: 10px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.cac-import-anomalies ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.cac-import-anomalies li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; padding: 5px 0; color: #4c5565; font-size: 11.5px; }
.cac-import-anomalies li strong { color: #9b3f3a; font-variant-numeric: tabular-nums; }

.cac-import-modal-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e7eaf0; animation: cac-import-reveal 220ms ease both; }
.cac-import-modal-footer > p { display: grid; gap: 3px; max-width: 280px; margin: 0; }
.cac-import-modal-footer > p strong { color: #303b52; font-size: 11.5px; }
.cac-import-modal-footer > p span { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.cac-import-footer-actions { display: flex; align-items: center; gap: 8px; }

.cac-import-cancel-btn,
.cac-import-confirm-btn { width: auto; min-width: 0; min-height: 40px; padding: 9px 14px; border-radius: 9px; font-family: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.cac-import-cancel-btn { border: 1px solid #d2d8e2; background: #fff; color: #536078; }
.cac-import-cancel-btn:hover { background: #f7f8fa; }
.cac-import-confirm-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--blue-primary); background: var(--blue-primary); color: #fff; box-shadow: 0 7px 16px rgba(22, 87, 232, 0.22); }
.cac-import-confirm-btn:hover { transform: translateY(-1px); background: #104bd0; box-shadow: 0 9px 20px rgba(22, 87, 232, 0.28); }
.cac-import-confirm-btn:disabled,
.cac-import-cancel-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.cac-import-confirm-btn.is-loading .pennylane-refresh-ic { animation: pennylane-spin 0.8s linear infinite; }
.cac-import-modal.is-busy .cac-import-template-help { opacity: 0.45; pointer-events: none; }
.cac-import-file-meta.hidden,
.cac-import-result.hidden,
.cac-import-modal-footer.hidden { display: none; }

@keyframes cac-import-reveal {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  .cac-import-modal-backdrop { align-items: flex-end; padding: 10px; }
  .cac-import-modal { max-height: 94vh; padding: 22px 18px 20px; border-radius: 17px; }
  .cac-import-dropzone { grid-template-columns: auto minmax(0, 1fr); min-height: 104px; }
  .cac-import-browse { display: none; }
  .cac-import-modal-footer { align-items: stretch; flex-direction: column; gap: 14px; }
  .cac-import-modal-footer > p { max-width: none; }
  .cac-import-footer-actions { width: 100%; }
  .cac-import-cancel-btn { flex: 0 0 auto; }
  .cac-import-confirm-btn { flex: 1 1 auto; justify-content: center; }
}

@keyframes pennylane-progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.pennylane-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pennylane-search { position: relative; flex: 1 1 260px; min-width: 220px; }

.pennylane-search-ic {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
}

.pennylane-search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--gray-dark);
}

.pennylane-search input:focus {
  outline: none;
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(22, 87, 232, 0.12);
}

.pennylane-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#pennylane_cabinet, #cac_mandate_cabinet { width: 168px; }
#pennylane_firm, #cac_mandate_firm { width: 214px; }
#pennylane_mission, #cac_mandate_role { width: 224px; }
#users_practice { width: 176px; }
#users_role { width: 190px; }
#users_state { width: 158px; }
#history_client_status { width: 150px; }
#history_business_type { width: 214px; }
.pennylane-filter-pills .ms-trigger { min-height: 40px; border-radius: 10px; }

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--gray-dark);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.filter-pill:hover { border-color: var(--blue-primary); }

.filter-pill:focus-within,
.filter-pill:focus {
  outline: none;
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(22, 87, 232, 0.12);
}

.filter-pill-active,
.filter-pill-active:hover {
  border-color: var(--blue-primary);
  background: #f2f6ff;
  color: var(--blue-dark);
  font-weight: 600;
}

.filter-pill-caption {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.filter-pill-active .filter-pill-caption { color: var(--blue-primary); }

.filter-pill-date input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: inherit;
}

.filter-pill-date input:focus { outline: none; box-shadow: none; }

/* Segment tabs on the left, a compact filtered CA HT total on the right — one
   slim line instead of the KPI tiles, to keep vertical space for the table. */
.pennylane-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.pennylane-total {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pennylane-total strong { color: var(--blue-dark); font-weight: 700; }

/* Source segments (Tous / Facturés / Avec compta) — replaces the source filter. */
.pennylane-segments,
.filter-segments { display: flex; flex-wrap: wrap; gap: 6px; }

.pennylane-segment,
.filter-segment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.pennylane-segment:hover,
.filter-segment:hover { border-color: var(--blue-primary); background: #f4f7ff; color: var(--blue-dark); }

.pennylane-segment-count,
.filter-segment-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pennylane-segment-active,
.filter-segment-active { border-color: var(--blue-primary); background: #eef3ff; color: var(--blue-dark); }
.pennylane-segment-active .pennylane-segment-count,
.filter-segment-active .filter-segment-count { background: var(--blue-primary); color: #fff; }

/* Client cell with a coloured initials monogram + a provenance dot. */
.pennylane-client-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pennylane-client-text { min-width: 0; }

.pennylane-mono {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--mono-bg, #e2e7ee);
  color: var(--mono-fg, #3f4b5e);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pennylane-mono-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 2px solid #fff;
}

.pennylane-mono-dot-billed { background: #2d8f63; }
.pennylane-mono-dot-compta { background: #9aa6b6; }

.pennylane-copy-btn {
  min-height: 0;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.pennylane-copy-btn:hover { border-color: var(--blue-primary); background: #eef3ff; color: var(--blue-dark); }
.pennylane-copy-btn.is-copied { border-color: #2d8f63; color: #2d8f63; }

.pennylane-detail-head-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pennylane-detail-head-text { min-width: 0; }
.pennylane-empty-rows { padding: 44px 16px; text-align: center; }
.pennylane-placeholder { padding: 16px 2px; }

/* Table on the left, mission detail on the right once a client is selected. */
.pennylane-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.pennylane-table-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(2, 30, 95, 0.05);
}

/* Bounded so the sticky header and the pagination bar stay in view while the
   rows scroll inside the card. The subtrahend is the chrome above and below the
   region (page header, toolbar, filter bar, KPI strip, segments, pagination). */
.pennylane-table-region {
  min-width: 0;
  max-height: calc(100vh - 372px);
  min-height: 240px;
  overflow: auto;
}

.pennylane-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* Fixed layout on purpose: with the default auto layout the columns are sized
   from the rows currently rendered, so changing page or page size resized the
   CLIENT column depending on the longest name that happened to be on screen. */
.pennylane-table {
  width: 100%;
  /* Floor so the fixed columns keep their room on a narrow container: the region
     scrolls horizontally instead of squeezing Missions until the chips overflow. */
  min-width: 820px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}

/* Order: 1 Client · 2 Missions · 3 Cabinet · 4 Entité · 5 CA HT.
   Column 2 (missions) takes whatever the sized columns leave, so the mission
   chips get the widest column and mostly sit on one row. Client is sized wide
   enough that most company names stop truncating; Missions gives up the room. */
.pennylane-table th:nth-child(1) { width: 26%; }   /* Client */
.pennylane-table th:nth-child(3) { width: 150px; } /* Cabinet — pastilles */
.pennylane-table th:nth-child(4) { width: 22%; }   /* Entité facturante */
.pennylane-table th:nth-child(5) { width: 104px; } /* CA HT */

.pennylane-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.pennylane-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
}

.pennylane-table tbody tr,
.table-rows-clickable tbody tr { cursor: pointer; }
.pennylane-table tbody tr:hover,
.table-rows-clickable tbody tr:hover { background: #f7f9fd; }
.pennylane-table tbody tr:last-child td { border-bottom: none; }

.pennylane-row-active,
.table-row-active,
.pennylane-table tbody tr.pennylane-row-active:hover,
.table-rows-clickable tbody tr.table-row-active:hover {
  background: #eef3ff;
  box-shadow: inset 3px 0 0 var(--blue-primary);
}

.pennylane-client {
  display: block;
  overflow: hidden;
  font-weight: 600;
  color: var(--gray-dark);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pennylane-siren {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

/* Kept to a single truncated line so a long "A + B" entity name cannot push the
   amount out of the scroll region, and so the row height never depends on this
   column — which is what lets it stay visible when the panel narrows it. The
   full name is on the cell's title attribute. */
.pennylane-firm {
  overflow: hidden;
  color: #4b566b;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pennylane-date { color: #4b566b; white-space: nowrap; }

.pennylane-detail-host:empty { display: none; }

/* Source provenance badges — table cell and detail header. */
.pennylane-sources { display: flex; flex-wrap: wrap; gap: 4px; }

.pennylane-source-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pennylane-source-billing {
  border-color: #cfe0d2;
  background: #e9f5ec;
  color: #2f7d46;
}

.pennylane-source-companies {
  border-color: #cdd9f2;
  background: #eaf0fd;
  color: #315bb4;
}

.pennylane-source-mandate {
  border-color: #e2d5bd;
  background: #faf3e6;
  color: #8a6415;
}

/* Cabinet pastilles — one per parent login, shown in the table cell, the filter
   and the detail panel, styled like the source/mission chips. */
.pennylane-cabinets { display: flex; flex-wrap: wrap; gap: 4px; }

.pennylane-detail-cabinets { margin-top: 6px; }

.pennylane-cabinet-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #e2d6f0;
  background: #f3edfb;
  color: #6b45b3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pennylane-muted { font-size: 12px; color: var(--muted); font-style: italic; }

/* Beats the `.pennylane-table th` left alignment, so the header sits over the
   amounts it sorts. */
.pennylane-table th.pennylane-num { text-align: right; }

.pennylane-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.pennylane-sort:hover { background: transparent; color: var(--blue-primary); }

/* Stacked carets: both dimmed when unsorted, the active one highlighted. */
.pennylane-sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 0.6;
  font-size: 7px;
  color: #b6becd;
}

.pennylane-sort-icon .pennylane-sort-on { color: var(--blue-primary); }

/* A column header that is the current sort key reads in brand blue. */
.pennylane-sort-active { color: var(--blue-dark); }

/* Right cluster of the controls bar: sort dropdown + filtered total. */
.pennylane-controls-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* Pushes flush right even with no sibling to space-between against (the
     Mandats CAC tab has only this one control, unlike Vue consolidée's
     segments + sort + total) -- a no-op where a sibling already does it. */
  margin-left: auto;
}

/* "Trier" dropdown — a pill trigger opening a small menu of criteria. */
.pennylane-sort-control { position: relative; }

.pennylane-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.pennylane-sort-trigger:hover { border-color: var(--blue-primary); background: #f4f7ff; color: var(--blue-dark); }
.pennylane-sort-control.is-open .pennylane-sort-trigger {
  border-color: var(--blue-primary);
  background: #eef3ff;
  color: var(--blue-dark);
}
.pennylane-sort-trigger strong { color: var(--blue-dark); font-weight: 700; }
.pennylane-sort-trigger-ic { font-size: 14px; line-height: 1; }
.pennylane-sort-trigger-arrow { font-size: 12px; color: var(--blue-primary); }

.pennylane-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 264px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(23, 37, 84, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* This rule is defined after the global .hidden, so re-assert the hide here
   (equal specificity, later wins) or the menu would never collapse. */
.pennylane-sort-menu.hidden { display: none; }

.pennylane-sort-menu-title {
  padding: 4px 10px 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Field list — single-select radio rows: pick WHAT to sort by. */
.pennylane-sort-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--gray-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.pennylane-sort-item:hover { background: #f4f7ff; }

.pennylane-sort-item-active {
  background: #eef3ff;
  color: var(--blue-dark);
  font-weight: 600;
}

.pennylane-sort-radio {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1.5px solid #c2cad8;
  border-radius: 50%;
  transition: border-color 0.1s;
}

.pennylane-sort-item-active .pennylane-sort-radio { border-color: var(--blue-primary); }
.pennylane-sort-item-active .pennylane-sort-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue-primary);
}

/* Direction toggle — pick WHICH WAY, in the field's own words. Always visible. */
.pennylane-sort-sep { height: 1px; background: var(--line); margin: 6px 4px; }

.pennylane-sort-dir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 6px 4px;
}

.pennylane-sort-dir-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pennylane-dir-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: #eef1f6;
}

.pennylane-dir-btn {
  min-height: 0;
  padding: 5px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.pennylane-dir-btn:hover { color: var(--gray-dark); }

.pennylane-dir-btn-active,
.pennylane-dir-btn-active:hover {
  background: #fff;
  color: var(--blue-dark);
  box-shadow: 0 1px 2px rgba(23, 37, 84, 0.14);
}

.pennylane-sort-trigger-dir { color: var(--muted); font-weight: 600; }

.pennylane-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.pennylane-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* Mission pastilles: neutral by default, brand blue once selected. */
.pennylane-chip {
  flex: 0 0 auto;
  /* Hug the label instead of filling the flex line (the global button rule makes
     these block-level, which would otherwise stretch them across the column). */
  width: max-content;
  max-width: 100%;
  min-height: 0;
  padding: 3px 9px;
  border: 1px solid var(--chip-bd, #dde3ee);
  border-radius: 999px;
  background: var(--chip-bg, #f3f6fb);
  color: var(--chip-fg, #3d4a61);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.pennylane-chip:hover {
  border-color: var(--blue-primary);
  background: #fff;
  color: var(--chip-fg, #3d4a61);
}

/* A non-interactive chip (the Mandats CAC tab's role/statut badge) -- same
   look, no click/hover affordance since there's nothing to toggle. */
.pennylane-chip-static { cursor: default; }
.pennylane-chip-static:hover { border-color: var(--chip-bd, #dde3ee); background: var(--chip-bg, #f3f6fb); }

.pennylane-chip-active,
.pennylane-chip-active:hover {
  border-color: var(--blue-primary);
  background: var(--blue-primary);
  color: #fff;
}

/* Dimmed backdrop behind the drawer; click anywhere on it to close. */
.pennylane-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 20, 55, 0.28);
  animation: pennylane-fade 0.15s ease;
}

/* Overlay drawer: full height, slides in over the content from the right. */
.pennylane-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(960px, 94vw);
  height: 100vh;
  margin: 0;
  padding: 22px 24px 28px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: -18px 0 44px rgba(2, 30, 95, 0.16);
  overflow-y: auto;
  animation: pennylane-drawer-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes pennylane-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pennylane-drawer-in {
  from { transform: translateX(30px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

/* Header stays put while the panel body scrolls, so Close is always reachable. */
.pennylane-detail-head {
  position: sticky;
  top: -22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: -22px -24px 4px;
  padding: 22px 24px 14px;
  background: #fff;
  z-index: 1;
}

.pennylane-detail-head h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.pennylane-detail-siren {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.pennylane-detail-close {
  min-height: 0;
  padding: 0 6px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.pennylane-detail-close { border-radius: 8px; }
.pennylane-detail-close:hover { background: #eef1f6; color: var(--gray-dark); }

.pennylane-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 14px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

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

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

.pennylane-detail-grid dt {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.pennylane-detail-grid dd {
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-dark);
}

/* Le nombre de lignes reste une donnee comme les autres ; l'action se lit a
   cote, en simple lien texte souligne (le bleu de marque + le souligne suffisent
   a dire que c'est cliquable). */
.pennylane-detail-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.pennylane-lines-link {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  /* Neutralise la regle globale button/button:hover, qui posait un aplat bleu
     fonce derriere le libelle. */
  background: none;
  color: var(--blue-primary);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pennylane-lines-link:hover {
  background: none;
  color: var(--blue-dark);
}

.pennylane-lines-link:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.pennylane-lines-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfe;
}

.pennylane-lines-error { color: var(--red, #a83232); }

.pennylane-lines-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.pennylane-lines-toolbar .detail-kicker { margin: 0 0 3px; }

.pennylane-lines-toolbar > div > strong {
  color: var(--blue-dark);
  font-size: 13px;
}

.pennylane-lines-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pennylane-lines-toolbar select {
  min-width: 145px;
  padding: 7px 28px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--gray-dark);
  font-size: 12px;
  text-transform: none;
}

.pennylane-lines-table-wrap { overflow-x: auto; }

.pennylane-lines-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: white;
  font-size: 11px;
}

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

.pennylane-lines-table th {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pennylane-lines-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.pennylane-lines-amount {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pennylane-payment {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.pennylane-payment.paid { background: #e6f6ee; color: #176b46; }
.pennylane-payment.unpaid { background: #fff0ec; color: #a43c31; }

.pennylane-lines-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.pennylane-lines-pagination div { display: flex; gap: 5px; }

.pennylane-lines-pagination button {
  width: 30px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--blue-dark);
  cursor: pointer;
}

.pennylane-lines-pagination button:disabled {
  opacity: .4;
  cursor: default;
}

.pennylane-detail-amount {
  font-size: 18px !important;
  font-variant-numeric: tabular-nums;
  color: var(--blue-dark) !important;
}

.pennylane-detail-total {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* Breakdown of the original mission labels folded under one chip
   (Comptabilité / Fiscalité / ECF / Dext) — keeps the detail readable without
   giving each label back its own tab. */
.pennylane-detail-submissions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pennylane-detail-submissions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--gray-dark);
}

.pennylane-detail-submissions li span:first-child {
  color: var(--muted);
}

.pennylane-detail-submissions li span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Un mandat d'audit : ni facture, ni date de facturation, mais un rôle, un terme
   et un honoraire annuel. Il a donc sa propre liste plutôt que la grille de
   facturation, qui n'aurait que des zéros à montrer. */
.pennylane-mandate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pennylane-mandate {
  padding: 10px 12px;
  border: 1px solid var(--line, #e6e9ef);
  border-radius: 10px;
  background: #fbfcfe;
}

/* Un mandat radié reste dans la base — il documente une relation passée — mais
   il ne doit pas se lire comme un mandat en cours. */
.pennylane-mandate-ended { opacity: 0.62; }

.pennylane-mandate-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.pennylane-mandate-role {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-dark);
}

.pennylane-mandate-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f8;
  font-size: 11px;
  color: var(--muted);
}

.pennylane-mandate-tag-ended { background: #fdecec; color: #a23a3a; }

.pennylane-mandate-fees {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue-dark);
}

.pennylane-mandate-notes {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.pennylane-mandate-kicker { margin-top: 16px; }

/* Des honoraires de mandat dans la colonne CA HT : le seul montant disponible
   pour ces dossiers, mais pas du CA facturé — d'où le style distinct. */
.pennylane-fee-mandate {
  font-style: italic;
  color: var(--muted);
}

.pennylane-siren-missing {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-style: italic;
  color: #a2701f;
}

.pennylane-detail-sources {
  display: flex;
  gap: 5px;
  margin: 0 0 6px;
}

/* Separates the accounting-file block from the header (companies-only) or from
   the billing block above it. */
.pennylane-detail-company {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pennylane-detail-company .detail-kicker { margin-top: 0; }

/* Mandats CAC detail drawer stacks two mission-style blocks (the mandate
   itself, then the associated billing) -- Vue consolidée never stacks two of
   these, so this only ever applies here. */
.pennylane-detail-mission + .pennylane-detail-mission { margin-top: 22px; }

.pennylane-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
  font-size: 12px;
  color: var(--muted);
}

.pennylane-foot-total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--blue-dark);
}

@media (max-width: 900px) {
  .pennylane-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  /* A full-height rule between two buttons that have just wrapped onto
     different lines separates nothing. */
  .pennylane-toolbar-divider { display: none; }
  .pennylane-filter-bar { align-items: stretch; }
  .pennylane-search { flex-basis: 100%; }
  .pennylane-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .pennylane-detail-head-main { gap: 10px; }
}

/* --- Pilotage : lecture groupe de la base clients ------------------------- */

.pilotage-result { display: flex; flex-direction: column; gap: 22px; }

.pilotage-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.pilotage-tile {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* The headline count carries the brand blue; the other tiles read as its
   breakdown rather than as four competing figures. */
.pilotage-tile-accent { border-color: #c9d8ff; background: linear-gradient(180deg, #f6f9ff, #fff); }

.pilotage-tile-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.pilotage-tile-value {
  margin: 6px 0 2px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue-dark);
}

.pilotage-tile-hint { margin: 0; font-size: 12px; color: var(--muted); }

.pilotage-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.pilotage-block-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.pilotage-block-head h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-dark);
}

.pilotage-block-head p { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 78ch; }

.pilotage-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  padding: 16px;
}

.pilotage-source {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fdfdfe;
}

.pilotage-source-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pilotage-source-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--gray-dark); }
.pilotage-source-detail { margin: 3px 0 0; font-size: 12px; color: var(--muted); }

/* A synchronised source can go stale on its own; a manual import cannot move
   without someone acting. The badge is the fastest way to read which is which. */
.pilotage-mode {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pilotage-mode-sync { background: #eef3ff; color: #2f3d95; }
.pilotage-mode-import { background: #fff4e8; color: #a9631a; }

.pilotage-source-feeds, .pilotage-feeds-cell { display: flex; flex-wrap: wrap; gap: 5px; }
/* Un cabinet peut être alimenté par plusieurs outils, donc plusieurs pastilles. */
.pilotage-modes-cell { display: flex; flex-wrap: wrap; gap: 4px; }

.pilotage-feed {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}

.pilotage-feed-sm { font-size: 10px; padding: 1px 6px; }

.pilotage-source-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.pilotage-source-stats dt { font-size: 11px; color: var(--muted); }
.pilotage-source-stats dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gray-dark);
}

.pilotage-source-wide { grid-column: 1 / -1; }
.pilotage-source-wide dd { font-size: 13px; font-weight: 500; }
.pilotage-share { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--muted); }
.pilotage-none { color: var(--muted); font-weight: 400; }

.pilotage-source-alert {
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--warn-bg);
  border: 1px solid #f3caca;
  font-size: 12px;
  color: #93332a;
  cursor: help;
}

.pilotage-families { padding: 6px 16px 14px; }

.pilotage-family { border-bottom: 1px solid #eef0f4; }
.pilotage-family:last-child { border-bottom: none; }

.pilotage-family > summary {
  display: grid;
  grid-template-columns: 10px minmax(120px, 1fr) 60px minmax(80px, 2fr) 46px 110px;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}

.pilotage-family > summary::-webkit-details-marker { display: none; }
.pilotage-family > summary:hover { background: #fafbfd; }

.pilotage-family-dot { width: 10px; height: 10px; border-radius: 3px; }
.pilotage-family-name { font-weight: 600; color: var(--gray-dark); }
.pilotage-family-count, .pilotage-family-share, .pilotage-family-revenue {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pilotage-family-count { font-weight: 600; color: var(--blue-dark); }
.pilotage-family-share, .pilotage-family-revenue { font-size: 12px; color: var(--muted); }
/* Les honoraires de mandat, sous le CA facturé : deux natures de montant, donc
   deux lignes — jamais une addition. */
.pilotage-family-fees { display: block; font-size: 11px; color: #8a6415; }

.pilotage-family-bar { height: 7px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.pilotage-family-bar span { display: block; height: 100%; border-radius: 999px; }

.pilotage-family-labels {
  margin: 0 0 12px;
  padding: 0 0 0 20px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 18px;
}

.pilotage-family-labels li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px dotted #e6e9ef;
}

.pilotage-table-region { overflow-x: auto; }

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

.pilotage-table th, .pilotage-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eef0f4;
  vertical-align: middle;
}

.pilotage-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: #fbfcfe;
  white-space: nowrap;
}

.pilotage-table tbody tr:hover { background: #fafbfd; }
.pilotage-num { text-align: right; font-variant-numeric: tabular-nums; }
.pilotage-zero { color: #b9c0cc; }

.pilotage-cabinet-name { font-weight: 600; color: var(--gray-dark); white-space: nowrap; }

.pilotage-cabinet-warn {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: #93332a;
  font-size: 10px;
  font-weight: 700;
  cursor: help;
}

.pilotage-fam-pill {
  display: inline-block;
  min-width: 40px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--fam-bg);
  color: var(--fam-fg);
  font-weight: 600;
  cursor: help;
}

.pilotage-sync { font-size: 12px; color: var(--muted); white-space: nowrap; }

.pilotage-table tfoot td {
  border-top: 2px solid var(--line);
  border-bottom: none;
  background: #fbfcfe;
  font-weight: 600;
  color: var(--blue-dark);
}

@media (max-width: 900px) {
  .pilotage-source-stats { grid-template-columns: minmax(0, 1fr); }
  .pilotage-family > summary {
    grid-template-columns: 10px minmax(0, 1fr) 56px 44px;
    row-gap: 4px;
  }
  .pilotage-family-bar, .pilotage-family-revenue { display: none; }
}

/* A count can be right while its breakdown is not — an unmapped ACD mission
   code inflates "Autre" at the expense of Compta. The note sits with the
   families it distorts, not in a separate quality panel nobody opens. */
.pilotage-quality-note {
  margin: 10px 0 0;
  padding: 8px 11px;
  border: 1px solid #f5dfc0;
  border-radius: 8px;
  background: #fff8ee;
  font-size: 12px;
  line-height: 1.5;
  color: #8a5a13;
  cursor: help;
  max-width: 90ch;
}

/* A mission deduced from the accounting file rather than read off an invoice.
   Dashed says "certain engagement, no billing line" without inventing a new
   colour — the discipline tint still carries which mission it is. */
.pennylane-chip-inferred {
  border-style: dashed;
  font-style: italic;
}

.pennylane-chip-inferred.pennylane-chip-active { border-style: solid; font-style: normal; }

/* Authentication — image-led split screen. */
body.auth-screen-mode {
  overflow-x: hidden;
  background: #fff;
}

body.auth-screen-mode .app-main {
  display: block;
  min-height: 100svh;
  padding: 0;
}

body.auth-screen-mode .auth-card {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(470px, .94fr);
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.auth-screen-mode .auth-card.hidden { display: none; }

.auth-visual {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #092a49;
}

.auth-visual-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 57%;
  animation: auth-image-in 900ms cubic-bezier(.2, .7, .2, 1) both;
}

.auth-visual-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 24, 54, .03) 40%, rgba(2, 24, 54, .58) 100%);
}

.auth-visual-caption {
  position: absolute;
  right: clamp(28px, 4vw, 58px);
  bottom: clamp(28px, 4vw, 50px);
  left: clamp(28px, 4vw, 58px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  animation: auth-caption-in 650ms 180ms cubic-bezier(.2, .7, .2, 1) both;
}

.auth-visual-caption span {
  color: rgba(255, 255, 255, .72);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-content {
  display: flex;
  min-height: 100svh;
  padding: clamp(30px, 5vw, 72px);
  flex-direction: column;
  animation: auth-content-in 520ms 70ms cubic-bezier(.2, .7, .2, 1) both;
}

.auth-content-inner {
  width: min(100%, 430px);
  margin: auto;
}

body.auth-screen-mode .auth-brand-logo {
  display: block;
  width: 214px;
  height: auto;
  margin: 0 0 clamp(46px, 8vh, 78px) -15px;
}

.auth-heading { margin-bottom: 28px; }

.auth-eyebrow {
  margin: 0 0 10px;
  color: var(--blue-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.auth-screen-mode .auth-title {
  margin: 0;
  color: #061b48;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.1;
}

body.auth-screen-mode .auth-step-text {
  max-width: 39ch;
  margin: 13px 0 0;
  color: #687187;
  font-size: 14px;
  line-height: 1.6;
}

body.auth-screen-mode #auth-email-form,
body.auth-screen-mode #auth-otp-form,
body.auth-screen-mode #auth-recovery-form,
body.auth-screen-mode #auth-new-password-form {
  gap: 18px;
  margin: 0;
}

body.auth-screen-mode .auth-card label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #17274b;
  font-size: 12px;
  font-weight: 600;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.auth-field { display: grid; gap: 8px; }

body.auth-screen-mode .auth-card input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #d5dbe7;
  border-radius: 7px;
  background: #fff;
  color: #0c1d43;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

body.auth-screen-mode .auth-card input::placeholder { color: #a1a9b8; }

body.auth-screen-mode .auth-card input:hover { border-color: #aeb9cb; }

body.auth-screen-mode .auth-card input:focus {
  outline: none;
  border-color: var(--blue-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 87, 232, .12);
}

body.auth-screen-mode .auth-primary-btn {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 0;
  padding: 12px 18px;
  border-radius: 7px;
  background: #124fea;
  box-shadow: 0 8px 20px rgba(18, 79, 234, .17);
  font-size: 14px;
  font-weight: 600;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

body.auth-screen-mode .auth-primary-btn:hover {
  background: #0b43cd;
  box-shadow: 0 10px 24px rgba(18, 79, 234, .24);
  transform: translateY(-1px);
}

body.auth-screen-mode .auth-primary-btn:active { transform: translateY(0); }

.auth-inline-link,
body.auth-screen-mode .auth-minor-link {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #3159b5;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

.auth-inline-link:hover,
body.auth-screen-mode .auth-minor-link:hover {
  background: transparent;
  color: #124fea;
  text-decoration: underline;
  transform: none;
}

body.auth-screen-mode .auth-minor-link { margin: -5px auto 0; }

body.auth-screen-mode .auth-flash {
  margin: -10px 0 20px;
  padding: 11px 13px;
  border: 0;
  border-left: 3px solid #2e6aef;
  border-radius: 4px;
  background: #f1f5ff;
  color: #214a9b;
  font-size: 12px;
  line-height: 1.5;
}

body.auth-screen-mode .auth-flash.error {
  border-color: #c44747;
  background: #fff4f4;
  color: #8b2e2e;
}

.auth-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 430px);
  margin: clamp(28px, 6vh, 64px) auto 0;
  color: #8a93a5;
  font-size: 10px;
  letter-spacing: .03em;
}

.auth-security-note span { color: #4f9f79; font-size: 7px; }

@keyframes auth-image-in {
  from { opacity: .65; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes auth-caption-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes auth-content-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 900px) {
  body.auth-screen-mode .auth-card {
    grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr);
  }
  .auth-visual-caption { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@media (max-width: 700px) {
  body.auth-screen-mode { overflow-y: auto; }
  body.auth-screen-mode .auth-card {
    grid-template-columns: 1fr;
    min-height: 100svh;
    overflow: visible;
  }
  .auth-visual {
    min-height: 34svh;
    max-height: 300px;
  }
  .auth-visual-image { object-position: 50% 53%; }
  .auth-visual-caption { right: 22px; bottom: 20px; left: 22px; }
  .auth-visual-caption span { display: none; }
  .auth-content {
    min-height: 66svh;
    padding: 32px 24px 28px;
  }
  .auth-content-inner { margin: 0 auto; }
  body.auth-screen-mode .auth-brand-logo {
    width: 174px;
    margin: 0 0 36px -12px;
  }
  body.auth-screen-mode .auth-title { font-size: 30px; }
  .auth-security-note { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-visual-image,
  .auth-visual-caption,
  .auth-content,
  #unitary-panel:not(.hidden),
  #batch-panel:not(.hidden) { animation: none; }

  #check-mode-tabs .check-mode-tab::after,
  .choice-option,
  .choice-option-indicator { transition: none; }
}

/* --- CAC mandates: in-app editing ---------------------------------------
   The register is no longer import-only: a cabinet maintains its own mandates
   from the drawer that used to only display them. These rules dress the write
   mode of that same panel, so an edit reads as the record it belongs to
   rather than as a separate screen. */

.cac-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7486;
  font-size: 11px;
  white-space: nowrap;
}
.cac-archived-toggle input { margin: 0; }

.cac-mandate-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef6ef;
  color: #23704e;
  font-size: 12px;
}
.cac-mandate-notice.error { background: #fdeeee; color: #99231f; }

.cac-mandate-editor .crm-form-grid { gap: 14px; }
.cac-mandate-editor .crm-record-form { padding-top: 10px; }
.cac-mandate-editor .error { margin: 14px 0 0; font-size: 12px; }

/* The CRM's field styling leans on a tinted page behind it (`--crm-surface`
   on a transparent border). The drawer is white, so that combination leaves
   the inputs with no visible edge at all -- they have to carry their own
   border here. */
.cac-mandate-editor .crm-field input,
.cac-mandate-editor .crm-field select,
.cac-mandate-editor .crm-field textarea {
  border-color: var(--line);
  background: #fff;
}
.cac-mandate-editor .crm-field input:hover,
.cac-mandate-editor .crm-field select:hover,
.cac-mandate-editor .crm-field textarea:hover { border-color: #bcc6d6; background: #fff; }
.cac-mandate-editor .crm-field input:disabled {
  border-color: #e7ebf2;
  background: var(--crm-surface);
  color: #7b8494;
}

/* Company lookup: the two identity fields and their shared result list. */
.cac-mandate-lookup { position: relative; margin-bottom: 18px; }
.cac-mandate-lookup-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
  gap: 14px;
}
.cac-mandate-lookup .crm-company-search-results { top: calc(100% - 16px); }
.cac-mandate-lookup-hint { margin: 7px 0 0; color: #8a93a2; font-size: 10.5px; }

.cac-mandate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.cac-mandate-actions button {
  padding: 9px 15px;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  background: #fff;
  color: #35405a;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cac-mandate-actions button:hover { background: #f4f6fa; }
.cac-mandate-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.cac-mandate-actions button.primary:hover { filter: brightness(1.06); }
.cac-mandate-actions button.primary:disabled { opacity: .6; cursor: default; }
.cac-mandate-actions button.text-danger { border-color: #f0d3d1; color: #a32e28; }
.cac-mandate-actions button.text-danger:hover { background: #fdf2f1; }

.cac-mandate-provenance {
  margin: 12px 0 0;
  color: #8a93a2;
  font-size: 10.5px;
}

/* An archived mandate stays in the table when it is asked for, but must never
   read as one that still binds the cabinet. */
.cac-mandate-row-archived td { opacity: .55; }

@media (max-width: 720px) {
  .cac-mandate-editor .crm-form-grid { grid-template-columns: minmax(0, 1fr); }
  .cac-mandate-lookup-grid { grid-template-columns: minmax(0, 1fr); }
  .cac-mandate-actions { flex-direction: column-reverse; }
  .cac-mandate-actions button { width: 100%; }
}

/* ── Administration : annuaire des utilisateurs ──────────────────────────────
   Reprend la table, les pastilles, le tiroir de détail et les boutons des
   onglets Clients et Mandats CAC. Seules les pièces qui n'existaient pas
   encore sont définies ici : la pastille d'état et le monogramme. */

/* Trois filtres seulement ici, contre trois larges ailleurs : sans plafond la
   recherche absorbe toute la place restante et repousse les filtres contre le
   bord droit, où le dernier finit par déborder. */
#users-filter-form .pennylane-search { flex: 0 1 380px; }

.users-table { min-width: 820px; }
.users-table th:nth-child(1) { width: 30%; }   /* Utilisateur */
.users-table th:nth-child(2) { width: 168px; } /* Cabinet — pastilles */
.users-table th:nth-child(3) { width: 180px; } /* Rôle */
.users-table th:nth-child(4) { width: 120px; } /* État */
.users-table th:nth-child(5) { width: 150px; } /* Dernière connexion */

.user-email { display: block; font-size: 11px; color: var(--muted); }

.user-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--chip-bd, #dde3ee);
  background: var(--chip-bg, #f3f6fb);
  color: var(--chip-fg, #3d4a61);
  font-size: 11px;
  font-weight: 700;
}

.user-self-tag {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef3ff;
  color: var(--blue-primary);
  font-size: 10px;
  font-weight: 700;
}

.user-state {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.user-state-active { border-color: #bfe3d0; background: var(--ok-bg); color: var(--ok-border); }
/* « Sans compte » n'est pas une anomalie : c'est l'état normal d'un profil
   importé de Notion tant que l'invitation n'est pas partie. Ton neutre. */
.user-state-pending { border-color: #dde3ee; background: #f3f6fb; color: #55607a; }
.user-state-disabled { border-color: #f0c9c9; background: var(--warn-bg); color: var(--warn-border); }

.user-row-disabled .pennylane-client,
.user-row-disabled .user-email { color: var(--muted); }

.user-detail-note {
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: #f3f6fb;
  color: #55607a;
  font-size: 12px;
}