/* Contracts + payments (M6): /contracts 397:386, /contracts/{id} 399:1259 / 402:51935, /payments 404:2338 / 404:52343 / 404:53288,
   record modal 404:53067. Builds on the shared .opp page primitives (tabs, filters, hero, side cards, modals). */

/* ---------- list ---------- */
.ct .ct-search { width: 280px; }
.ct .ct-num { font: var(--text-body-strong); color: var(--color-text-primary); direction: ltr; unicode-bidi: isolate; }
.ct a.ct-num:hover { color: var(--color-text-brand); }
.ct .ct-pf { color: var(--color-text-primary); direction: ltr; unicode-bidi: isolate; font: var(--text-body); }
.ct .ct-pf:hover { color: var(--color-text-brand); }
.ct-table td { height: 48px; }
.ct-table .cell-stack strong { font: var(--text-body-strong); }
.ct-table .cell-stack .sub { font: var(--text-small); color: var(--color-text-secondary); }
.ct-table .col-num, .ct-itable .col-num { text-align: left; font-variant-numeric: tabular-nums; }
.ct .ct-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: var(--radius-full); font: var(--text-small); color: var(--color-text-secondary); white-space: nowrap; text-decoration: none; }
.ct .ct-chip .icon { width: 14px; height: 14px; }
.ct .ct-chip.is-add { border: 1px dashed var(--color-gray-300); background: var(--color-surface-card); }
.ct .ct-chip.is-active { background: var(--color-gray-100); }
.ct .ct-chip.is-active b { color: var(--color-text-primary); font-weight: 600; }
.ct .ct-chip:hover { text-decoration: none; color: var(--color-text-primary); }
.ct .ct-pager__info { gap: 24px; }
.ct .ct-pager__per { gap: 4px; }
.ct-table-card.is-compact .ct-table td, .ct-table-card.is-compact .pm-table td { height: 36px; padding-block: 4px; }
.ct-table-card.is-compact .cell-stack .sub { display: none; }

/* ---------- detail ---------- */
.ct-ws .breadcrumb { margin-block-end: 16px; }
.ct-hero .opp-hero__title h1 { display: flex; align-items: center; gap: 8px; }
.ct-hero .ltr-num { direction: ltr; unicode-bidi: isolate; }
.ct-hero .opp-hero__meta { gap: 4px 20px; }
.ct-meta-link { color: inherit; }
.ct-meta-link:hover { color: var(--color-text-brand); }
.ct-hero .opp-hero__chips .opp-chip { background: var(--color-brand-navy-50); }
.ct-kpis { grid-template-columns: repeat(3, minmax(80px, auto)); }
.ct-wtabs { justify-content: center; }

.ct-card { padding: 20px; }
.ct-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.ct-card__title { font: var(--text-h3); margin: 0; }
.ct-card__link { font: var(--text-body-strong); color: var(--color-text-primary); cursor: pointer; text-decoration: none; }
.ct-card__link:hover { color: var(--color-text-brand); text-decoration: none; }
.ct-card__note { margin: 12px 0 0; font: var(--text-small); color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.ct-card__note .icon { width: 14px; height: 14px; }
.ct-empty { margin: 0; font: var(--text-body); color: var(--color-text-secondary); }
.ct-replace { margin: 0; }

.ct-file { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-card); }
.ct-file__icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--color-success-bg, #e8f6ee); color: var(--color-success, #16a34a); display: grid; place-items: center; }
.ct-file__icon .icon { width: 20px; height: 20px; }
.ct-file__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-file__name { font: var(--text-body-strong); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-file__meta { font: var(--text-small); color: var(--color-text-secondary); }
.ct-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.ct-unsigned { align-items: flex-start; margin-block-end: 12px; border-radius: var(--radius-md); }
.ct-unsigned p { margin: 4px 0 10px; }
.ct-unsigned .alert__title { font: var(--text-body-strong); }
.ct-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 20px; border: 1.5px dashed var(--color-gray-300);
  border-radius: var(--radius-md); background: var(--color-surface-card); text-align: center; cursor: pointer; }
.ct-drop.is-over { border-color: var(--color-brand-navy); background: var(--color-brand-navy-50); }
.ct-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ct-drop__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-gray-100); display: grid; place-items: center; color: var(--color-gray-700); }
.ct-drop__icon .icon { width: 20px; height: 20px; }
.ct-drop__text { font: var(--text-body); color: var(--color-text-primary); }
.ct-drop__pick { color: var(--color-info); font-weight: 600; }
.ct-drop__hint { font: var(--text-small); color: var(--color-text-muted); }

.ct-inst { padding: 0; }
.ct-inst .ct-card__head { padding: 20px 20px 0; }
.ct-itable th { background: var(--color-gray-50); font: var(--text-small); color: var(--color-text-secondary); }
.ct-itable td { height: 48px; }
.ct-itable__title { font: var(--text-body-strong); }
.ct-inst .ct-empty { padding: 0 20px 16px; }
.ct-inst__foot { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--color-border);
  background: var(--color-gray-50); font: var(--text-small); color: var(--color-text-secondary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ct-inst__foot b { font: var(--text-body-strong); color: var(--color-text-primary); }
.ct-sep { color: var(--color-gray-400); }
.ct-warn { color: var(--color-danger) !important; }
.ct-late { color: var(--color-danger); font: var(--text-small); }
.ct-ledger .ct-ref, .pm .ct-ref { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.ct-note { font: var(--text-small); color: var(--color-text-secondary); max-width: 220px; }
.ct-receipt { display: inline-flex; align-items: center; gap: 2px; }
.ct-receipt .icon { width: 14px; height: 14px; }

/* tooltip (remaining formula) */
.ct-tip { position: relative; display: inline-grid; place-items: center; color: var(--color-info); cursor: help; vertical-align: middle; }
.ct-tip > .icon { width: 16px; height: 16px; }
.ct-tip__box { display: none; position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(50%); z-index: 30; width: 300px;
  padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-brand-navy, #1a2b4b); color: #fff; font: var(--text-small); line-height: 1.9; text-align: right; box-shadow: var(--shadow-md); }
.ct-tip:hover .ct-tip__box, .ct-tip:focus .ct-tip__box, .ct-tip:focus-within .ct-tip__box { display: block; }
.opp-side .ct-tip__box { inset-inline-start: auto; inset-inline-end: -12px; transform: none; width: 260px; }

/* events */
.ct-events { list-style: none; margin: 0; padding: 0; }
.ct-event { position: relative; display: flex; gap: 12px; padding-block-end: 24px; }
.ct-event::before { content: ""; position: absolute; inset-inline-start: 15px; top: 40px; bottom: 6px; width: 1px; background: var(--color-border); }
.ct-event:last-child { padding-block-end: 4px; }
.ct-event:last-child::before { display: none; }
.ct-event__icon { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--color-gray-100); color: var(--color-gray-700); display: grid; place-items: center; }
.ct-event__icon .icon { width: 16px; height: 16px; }
.ct-event__body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ct-event__title { font: var(--text-body); }
.ct-event__title b { font: var(--text-body-strong); }
.ct-event__time { font: var(--text-small); color: var(--color-text-muted); }

.ct-plants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ct-plants li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ct-plants a { display: inline-flex; align-items: center; gap: 8px; font: var(--text-body-strong); color: var(--color-text-primary); }
.ct-plants a .icon { width: 18px; height: 18px; color: var(--color-gray-600); }
.ct-plants span { font: var(--text-small); color: var(--color-text-secondary); }

/* side */
.ct-pay__row { display: flex; justify-content: space-between; align-items: baseline; font: var(--text-small); color: var(--color-text-secondary); margin-block-end: 8px; }
.ct-pay__row b { font: var(--text-body-strong); color: var(--color-text-primary); }
.ct-progress { height: 8px; border-radius: var(--radius-full); background: var(--color-gray-200, #e5e9f0); overflow: hidden; margin-block-end: 20px; display: flex; justify-content: flex-start; }
.ct-progress span { display: block; height: 100%; background: var(--color-success, #16a34a); border-radius: var(--radius-full); }
.ct-pay__list .opp-side-list__label { display: inline-flex; align-items: center; gap: 4px; }
.ct-specs .ct-card__head { margin-block-end: 16px; }
.ct-specs .ct-card__head .side-card__title { margin: 0; }

/* modals */
.ct-modal--wide { width: min(760px, calc(100vw - 32px)); }
.ct-stable td { padding: 6px 8px; vertical-align: top; }
.ct-stable .input--sm { width: 100%; }
.ct-modal .ltr { direction: ltr; text-align: left; }
.ct-modal .segmented { align-self: flex-start; }

/* ---------- payments ---------- */
.ct-kpis-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.ct-kpi { padding: 20px; display: flex; flex-direction: column; gap: 14px; min-height: 172px; }
.ct-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ct-kpi__label { font: var(--text-small); color: var(--color-text-secondary); padding-top: 8px; }
.ct-kpi__icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-brand-navy-50); color: var(--color-text-brand); display: grid; place-items: center; }
.ct-kpi__icon .icon { width: 20px; height: 20px; }
.ct-kpi__value { display: flex; align-items: baseline; gap: 6px; }
.ct-kpi__value b { font: 700 28px/40px var(--font-family); color: var(--color-text-primary); }
.ct-kpi__value span { font: var(--text-small); color: var(--color-text-secondary); }
.ct-kpi__bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.ct-kpi__sub { font: var(--text-small); color: var(--color-text-muted); }
.pm-tabs { justify-content: center; }
.pm-overdue { align-items: flex-start; margin-bottom: 20px; border-radius: var(--radius-md); padding: 16px 20px; }
.pm-overdue p { margin: 4px 0 10px; }
.pm-overdue form { margin: 0; }
.pm-overdue .alert__title { font: var(--text-body-strong); }
.pm-note { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font: var(--text-small); color: var(--color-text-muted); }
.pm-note .icon { width: 16px; height: 16px; }

.pm-modal { width: min(560px, calc(100vw - 32px)); }
.pm-contract { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-gray-50); }
.pm-contract > div { display: flex; flex-direction: column; gap: 4px; }
.pm-contract b { font: var(--text-body-strong); }
.pm-contract span { font: var(--text-small); color: var(--color-text-secondary); }
.pm-contract__rem { text-align: left; }
.pm-change { font: var(--text-small); align-self: flex-start; }
.pm-kinds { display: inline-flex; }
.pm-affix { display: flex; align-items: center; }
.pm-affix .input { flex: 1; }
.pm-affix .input-affix__text { padding: 0 12px; border-inline-start: 1px solid var(--color-border); color: var(--color-text-secondary); font: var(--text-small); }
.pm-file { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.pm-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pm-file__icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--color-success-bg, #e8f6ee); color: var(--color-success, #16a34a); display: grid; place-items: center; }
.pm-file__icon .icon { width: 20px; height: 20px; }
.pm-file__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-file__body b { font: var(--text-body-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-file__body span { font: var(--text-small); color: var(--color-text-muted); }
.pm-preview { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-info); font: var(--text-small); }
.pm-preview .icon { width: 16px; height: 16px; flex: none; }
.pm-lock { display: flex; align-items: center; gap: 6px; margin: 0; font: var(--text-small); color: var(--color-text-muted); }
.pm-lock .icon { width: 14px; height: 14px; }
.ct .segmented button.segmented__item { border: 0; background: transparent; font: var(--text-body); }
.ct .segmented button.segmented__item.is-active { background: var(--color-surface-card); box-shadow: 0 1px 1px rgba(15,23,42,.06); color: var(--color-text-brand); font: var(--text-body-strong); }
.pm-modal { display: flex; flex-direction: column; overflow: hidden; }
.pm-modal .modal__body { overflow: auto; flex: 1; min-height: 0; }
.pm-contract__rem .pm-change { margin-top: 2px; align-self: flex-end; }
.qe-contract { margin-top: 10px; }
.ct-itable td { white-space: nowrap; } .ct-itable td.ct-note { white-space: normal; min-width: 140px; }