/* ===========================================================
   Compliance Notes modal — May 2026
   =========================================================== */

.cn-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: stretch; justify-content: center;
}
.cn-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 21, 61, 0.55);
}
.cn-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 24px auto;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}

/* Head */
.cn-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #e6e3da;
  background: #fafaf6;
  flex-shrink: 0;
}
.cn-modal-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8a96;
  font-weight: 600;
  margin-bottom: 2px;
}
.cn-modal-title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #12153D;
  line-height: 1.2;
}
.cn-modal-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Body — scrollable */
.cn-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  background: #fdfdfb;
}

/* Foot */
.cn-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid #e6e3da;
  background: #fafaf6;
  flex-shrink: 0;
}
.cn-foot-hint {
  font-size: 12px;
  color: #6b6e80;
  flex: 1 1 auto;
}
.cn-foot-actions {
  display: flex;
  gap: 8px;
}

/* Buttons */
.cn-btn-primary,
.cn-btn-ghost,
.cn-btn-text {
  font-family: inherit;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-weight: 600;
  line-height: 1.2;
}
.cn-btn-primary {
  background: #12153D;
  color: #fff;
}
.cn-btn-primary:hover:not(:disabled) { background: #1a1f5a; }
.cn-btn-primary:active:not(:disabled) { transform: scale(0.98); }
.cn-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.cn-btn-ghost {
  background: #fff;
  color: #12153D;
  border-color: #d8d4c4;
}
.cn-btn-ghost:hover { background: rgba(0,0,0,.04); }
.cn-btn-text {
  background: transparent;
  color: #6b6e80;
  padding: 4px 8px;
  font-size: 12px;
}
.cn-btn-text:hover { color: #B3261E; background: rgba(179,38,30,.06); }
.cn-btn-add {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  padding: 6px 12px;
}
.cn-btn-add-sub {
  font-size: 11px;
  padding: 4px 10px;
}

/* Sections */
.cn-section {
  background: #fff;
  border: 1px solid #ebe8e0;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.cn-section:last-child { margin-bottom: 0; }
.cn-section-title {
  margin: 0 0 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #12153D;
  border-bottom: 1px solid #ebe8e0;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.cn-section-subtitle {
  font-size: 12px;
  color: #6b6e80;
  margin: -8px 0 14px;
  font-style: italic;
}

/* Fields */
.cn-field { margin-bottom: 12px; }
.cn-field:last-child { margin-bottom: 0; }
.cn-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4a4a55;
  margin-bottom: 4px;
}
.cn-input {
  width: 100%;
  padding: 8px 11px;
  border: 1.5px solid #d8d4c4;
  border-radius: 6px;
  background: #fff;
  color: #12153D;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;
}
.cn-input:focus {
  outline: 2px solid #C9A84C;
  border-color: #C9A84C;
}
.cn-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.45;
}

/* Currency / percent prefix-suffix inputs */
.cn-input-prefix,
.cn-input-suffix {
  position: relative;
  display: flex;
  align-items: stretch;
}
.cn-input-prefix .cn-input { padding-left: 24px; }
.cn-input-prefix-mark {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #6b6e80;
  pointer-events: none;
}
.cn-input-suffix .cn-input { padding-right: 24px; }
.cn-input-suffix-mark {
  position: absolute; right: 11px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #6b6e80;
  pointer-events: none;
}

/* Yes/No radios */
.cn-yesno {
  display: inline-flex;
  border: 1.5px solid #d8d4c4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.cn-yesno-opt {
  cursor: pointer;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6e80;
  border-right: 1.5px solid #d8d4c4;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cn-yesno-opt:last-child { border-right: none; }
.cn-yesno-opt input { display: none; }
.cn-yesno-opt.is-active {
  background: #12153D;
  color: #fff;
}

/* Select dropdowns */
.cn-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2312153D' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
  cursor: pointer;
}
.cn-select option { padding: 6px 8px; }
.cn-select-wrap { display: block; }
.cn-select-other {
  font-size: 12.5px;
}

/* Generate / Update / Edit textarea wrapper */
.cn-generate-wrap,
.cn-bank-submission-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cn-generate-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cn-bank-actions {
  padding: 8px 10px;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 6px;
}
.cn-generate-hint {
  font-size: 11.5px;
  color: #6b6e80;
  font-style: italic;
}
.cn-btn-sm {
  padding: 6px 11px;
  font-size: 12px;
}
.cn-bank-textarea {
  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
}
.cn-bank-help {
  font-size: 11px;
  color: #6b6e80;
  font-style: italic;
  margin-top: 2px;
}

/* Notes (informational) */
.cn-note {
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid #C9A84C;
  padding: 10px 14px;
  font-size: 12px;
  color: #6b6e80;
  font-style: italic;
  margin-bottom: 12px;
  border-radius: 0 4px 4px 0;
}

/* Groups + group items */
.cn-group {
  margin-top: 8px;
}
.cn-group-items { display: flex; flex-direction: column; gap: 12px; }
.cn-group-item {
  border: 1px dashed #d8d4c4;
  background: #fdfcf8;
  border-radius: 8px;
  padding: 14px 16px;
}
.cn-group-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebe8e0;
}
.cn-group-item-label {
  font-weight: 700;
  color: #12153D;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Subgroups */
.cn-subgroup {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid rgba(201, 168, 76, 0.4);
}
.cn-subgroup-items { display: flex; flex-direction: column; gap: 10px; }
.cn-subgroup-item {
  background: #fff;
  border: 1px solid #ebe8e0;
  border-radius: 6px;
  padding: 10px 14px;
}
.cn-subgroup-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0ede5;
}
.cn-subgroup-item-label {
  font-weight: 600;
  color: #6b6e80;
  font-size: 12px;
}

/* Card drawer header — Application Commentary slot */
.wf-card-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Trigger button — top right of card head */
.wf-ac-wrap {
  position: relative;
  display: inline-block;
}
.wf-ac-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #fff;
  border: 1.5px solid #d8d4c4;
  border-radius: 8px;
  color: #12153D;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wf-ac-trigger:hover { background: #fafaf6; border-color: #C9A84C; }
.wf-ac-trigger.has-records { border-color: #C9A84C; background: rgba(201,168,76,0.06); }
.wf-ac-trigger-icon { font-size: 13px; }
.wf-ac-trigger-label { white-space: nowrap; }
.wf-ac-trigger-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #C9A84C;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 9px;
  line-height: 1;
}
.wf-ac-trigger-caret { font-size: 10px; opacity: 0.6; margin-left: 2px; }
.wf-ac-trigger[aria-expanded="true"] {
  border-color: #C9A84C;
  background: rgba(201,168,76,0.10);
}

/* Popover */
.wf-ac-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 380px;
  background: #fff;
  border: 1px solid #e6e3da;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(18,21,61,0.15);
  z-index: 9100;
  padding: 6px;
}
.wf-ac-popover-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8a96;
  padding: 8px 10px 4px;
}
.wf-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #12153D;
  transition: background .1s, border-color .1s;
}
.wf-ac-item:hover:not(.is-disabled) {
  background: #fafaf6;
  border-color: #ebe8e0;
}
.wf-ac-item.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wf-ac-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wf-ac-item-title {
  font-size: 13.5px;
  font-weight: 700;
}
.wf-ac-item-sub {
  font-size: 11px;
  color: #6b6e80;
  line-height: 1.3;
}
.wf-ac-item-status {
  font-size: 10.5px;
  color: #1E7D4F;
  font-weight: 700;
  white-space: nowrap;
}
.wf-ac-item-lock {
  font-size: 10.5px;
  color: #6b6e80;
  font-weight: 600;
  white-space: nowrap;
}

/* Mobile — full-width trigger label hides on tight screens */
@media (max-width: 640px) {
  .wf-ac-trigger-label { display: none; }
  /* Anchor the popover to the (relative) card head and span the full content
     width so it can't run off the screen edge. The trigger is the leftmost
     header button, so the old right-anchored 320px popover grew ~280px
     leftward and got clipped off the left of the viewport. */
  .wf-ac-wrap { position: static; }
  .wf-ac-popover {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .cn-modal-dialog {
    margin: 0;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .cn-modal-head { padding: 14px 16px; }
  .cn-modal-body { padding: 14px; }
  .cn-modal-foot { padding: 12px 16px; flex-wrap: wrap; }
  .cn-foot-hint { display: none; }
  .cn-modal-title { font-size: 18px; }
  .cn-modal-head-actions { flex-wrap: wrap; }
  .cn-section { padding: 14px; }
  .cn-section-title { font-size: 15px; }
}

/* =========================================================
   TEXTAREA TEMPLATE PICKER (added 14 May 2026)
   ========================================================= */
.cn-templated-textarea {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cn-template-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cn-template-picker {
  max-width: 320px;
  font-size: 13px;
  background: #f8f7f3;
  border-color: #d8d4c9;
}
.cn-template-picker:focus { background: #fff; }
.cn-btn-xs {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
}
.cn-template-manage {
  color: #666;
  background: transparent;
  border: 1px dashed #d8d4c9;
}
.cn-template-manage:hover { color: #12153D; border-color: #12153D; }

/* Template manager modal */
.cn-modal-narrow { max-width: 720px; }
.cn-tpl-row {
  padding: 6px 0;
  border-bottom: 1px solid #f0eee8;
}
.cn-tpl-row:last-child { border-bottom: none; }
.cn-tpl-vis {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cn-tpl-vis input[type="checkbox"] { margin: 0; cursor: pointer; }
.cn-tpl-label { font-weight: 600; font-size: 13px; }

/* Submit-for-build button — distinct from Save so brokers don't confuse them.
   Gold backdrop, navy text. (Mitch + Cy, 19 May 2026) */
.cn-btn-submit {
  background: var(--gold, #C9A84C) !important;
  color: var(--navy, #12153D) !important;
  font-weight: 600;
}
.cn-btn-submit:hover:not(:disabled) {
  background: #b89638 !important;
}