/* Cliente 360 owns each foreground/surface pair, including mixed Branding.
   Shared dialogs are styled only while this module is active. No data changes. */
@media screen {
/* Secondary forms keep the close control aligned and reserve a readable status. */
body[data-active-tab="client360"] :is(#followupBackdrop, #commitmentBackdrop) .modalHeader {
  display:flex !important; align-items:flex-start !important; gap:12px !important;
}
body[data-active-tab="client360"] :is(#followupClose, #commitmentClose) {
  position:absolute !important; top:0 !important; right:0 !important;
  min-width:44px; min-height:44px; flex-shrink:0;
}
body[data-active-tab="client360"] :is(#followupBackdrop, #commitmentBackdrop) .relationshipFormStatus {
  overflow-wrap:anywhere; padding:10px 12px; border:1px solid currentColor;
}
body[data-active-tab="client360"] :is(#followupBackdrop, #commitmentBackdrop) .relationshipFormStatus[hidden] { display:none !important; }
#tab-client360 {
  --c360-surface: var(--surface-primary, #f5f8fc);
  --c360-ink: var(--text-primary, #0b172a);
  color: var(--c360-ink);
}
.c360TaskLine{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center}
.c360TaskActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.c360TaskActions .btn{min-height:36px;padding:7px 11px}
.c360TaskStatus{text-transform:capitalize;font-weight:700}
.slaBadge.paused{background:#e8eef8!important;color:#294d7a!important;border-color:#9fb4d2!important}
@media(max-width:760px){.c360TaskLine{grid-template-columns:auto minmax(0,1fr)}.c360TaskStatus,.c360TaskActions{grid-column:2}.c360TaskActions{justify-content:flex-start}}
#tab-client360 :is(.riPageHeader, .panel, .riClientHero, .marketContextPanel),
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(.modal, .modalCard) {
  --c360-surface: var(--card-background, var(--surface-secondary, #fff));
  --c360-ink: var(--card-text, var(--text-primary, #0b172a));
  background: var(--c360-surface) !important;
  color: var(--c360-ink) !important;
}
#tab-client360 :is(.riClientHero > div, .clientOpsCard, .c360ContactCard, .client360ContactRow, .relationPerson, .marketContextCard, .playbookCard) {
  --c360-surface: var(--vcard-background, var(--card-background, var(--surface-secondary, #fff)));
  --c360-ink: var(--vcard-text, var(--card-text, var(--text-primary, #0b172a)));
  background: var(--c360-surface) !important;
  color: var(--c360-ink) !important;
}
#tab-client360 :is(h2, h3, h4, p, label, span, strong, b, em, small, th, td, li, .eyebrow, .notice,
  .marketContextEmpty, .relationRoot, .meta),
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(.modal, .modalCard) :is(h3, h4, p, label, span, strong, b, em, small, th, td, .notice, .followupClientLockNote) {
  color: var(--c360-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
#tab-client360 .riPageHeader :is(h2, p, .eyebrow) { text-shadow: none !important; }
#tab-client360 :is(small, .meta),
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(.modal, .modalCard) :is(.modalHeader small, small, .followupClientLockNote) {
  color: color-mix(in srgb, var(--c360-ink) 85%, var(--c360-surface)) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}
#tab-client360 :is(.notice, .marketContextEmpty, .riTimelineRow, .timeline360Row, .c360TimelineRow,
  .timelineItem, .c360TaskLine, .opsTask, .commitmentRow, .relationRoot),
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop)
  :is(.modal, .modalCard) :is(.notice, .c360TimelineRow) {
  background: var(--c360-surface) !important;
  color: var(--c360-ink) !important;
}
#tab-client360 a:not(.btn) {
  color: var(--c360-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: underline;
}
/* Text and status hue both remain legible on light, dark and custom cards. */
#tab-client360 :is(.riScorePill, .productPill, .badge, .slaBadge, .contactTags > span, .c360ContactTags > em, .marketContextScore, #c360ClientSla) {
  --c360-surface: #e8f1ff; --c360-ink: #0759c7;
  background: var(--c360-surface) !important;
  color: var(--c360-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
#tab-client360 :is(.riScorePill.high, .commitmentRow.completed .badge, .slaBadge.green) {
  --c360-surface: #dcfce7; --c360-ink: #166534;
}
#tab-client360 :is(.riScorePill.mid, .commitmentRow.pending .badge, .slaBadge.yellow) {
  --c360-surface: #fef3c7; --c360-ink: #854d0e;
}
#tab-client360 :is(.riScorePill.low, .commitmentRow.overdue .badge, .slaBadge.red) {
  --c360-surface: #fee2e2; --c360-ink: #991b1b;
}
/* clientSla() currently emits inline status colors; cover raw and CSSOM forms. */
#tab-client360 #c360ClientSla:is([style*="#ef6a75"], [style*="239, 106, 117"]) {
  --c360-surface: #fee2e2; --c360-ink: #991b1b;
}
#tab-client360 #c360ClientSla:is([style*="#f0c85b"], [style*="240, 200, 91"]) {
  --c360-surface: #fef3c7; --c360-ink: #854d0e;
}
#tab-client360 #c360ClientSla:is([style*="#63d18a"], [style*="99, 209, 138"]) {
  --c360-surface: #dcfce7; --c360-ink: #166534;
}
#tab-client360 :is(input, select, textarea),
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(input, select, textarea) {
  background: var(--input-background, #fff) !important;
  color: var(--input-text, #0b172a) !important;
  -webkit-text-fill-color: currentColor !important;
}
#tab-client360 :is(input, textarea)::placeholder,
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(input, textarea)::placeholder {
  color: var(--input-text, #0b172a) !important;
  -webkit-text-fill-color: var(--input-text, #0b172a) !important;
  opacity: .75 !important;
}
/* A locked account stays readable; disabled behavior is unchanged. */
body[data-active-tab="client360"] #followupBackdrop .field:has(#followupClient:disabled) { opacity: 1 !important; }
#tab-client360 :is(input, select, textarea):disabled,
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(input, select, textarea):disabled {
  opacity: 1 !important; cursor: not-allowed;
}
#tab-client360 :is(button, .btn),
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(button, .btn) {
  background: #fff !important; color: #0759c7 !important;
  -webkit-text-fill-color: currentColor !important; border-color: #7296c9 !important;
}
#tab-client360 :is(button, .btn).primary,
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(button, .btn).primary {
  background: #0759c7 !important; color: #fff !important;
}
#tab-client360 .favoriteStar { background: #fff !important; color: #854d0e !important; }
#tab-client360 .favoriteStar.active { background: #0b172a !important; color: #ffd566 !important; }
#tab-client360 :is(button, .btn) :is(span, strong, small),
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) button :is(span, strong, small) { color: inherit !important; }
#tab-client360 :is(button, a, input, select, textarea):focus-visible,
body[data-active-tab="client360"] :is(#opsDetailBackdrop, #followupBackdrop, #commitmentBackdrop) :is(button, input, select, textarea):focus-visible {
  outline: 2px solid currentColor !important; outline-offset: 3px;
}
}