/* === Compliance Portal v3.0.1 === */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

.cp-portal {
  --acc:  #00c2a8;
  --bg:   #0d1117;
  --surf: #161b22;
  --brd:  #30363d;
  --txt:  #e6edf3;
  --mut:  #8b949e;
  --hd:   #e6edf3;
  --bd:   #8b949e;
  /* font scale — 1.0 = default, 1.15 = larger, 0.9 = smaller */
  --font-scale:  1;
  /* section gap — vertical space between major sections */
  --section-gap: 28px;
  /* spacing vars — overridden by inline style from admin settings */
  --pad-outer:   24px;
  --pad-hero-y:  48px;
  --pad-card:    18px 20px 16px;
  --gap-cards:   14px;
  --gap-grid:    14px;
  font-family: 'Lato', sans-serif;
  background: var(--bg);
  color: var(--txt);
  width: 100%;
  max-width: 100%;
  padding-bottom: 60px;
}

/* ── Modal ── */
.cp-modal-bd {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.cp-modal-box {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
.cp-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--brd);
}
.cp-modal-hdr h3 {
  margin: 0;
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  color: var(--hd);
  letter-spacing: -.2px;
}
.cp-modal-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mut);
  font-size: calc(18px * var(--font-scale));
  padding: 2px 8px;
  border-radius: 5px;
  transition: background .1s;
  line-height: 1;
}
.cp-modal-x:hover { background: rgba(255,255,255,.1); color: var(--hd); }
.cp-modal-body {
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
}
#cp-m-desc {
  font-size: calc(14px * var(--font-scale));
  color: var(--bd);
  line-height: 1.7;
  margin: 0;
}
.cp-modal-val {
  display: inline-block;
  background: var(--acc);
  color: #0d1117;
  font-weight: 700;
  font-size: calc(14px * var(--font-scale));
  border-radius: 8px;
  padding: 8px 20px;
  letter-spacing: .02em;
}
.cp-modal-stat {
  display: inline-flex;
  align-items: center;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 16px;
}
.cp-stat-implemented { background: rgba(35,134,54,.2);   color: #3fb950; border: 1px solid #238636; }
.cp-stat-in_progress { background: rgba(210,153,34,.2);  color: #d29922; border: 1px solid #b08800; }

/* ── Header ── */
.cp-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--surf);
  border-bottom: 1px solid var(--brd);
}
.cp-logo { display: flex; align-items: center; gap: 10px; }
.cp-logo-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-logo-box svg { width: 17px; height: 17px; }
.cp-logo-ini { font-size: calc(12px * var(--font-scale)); font-weight: 900; color: #0d1117; letter-spacing: -.5px; }
.cp-logo-img { height: 32px; max-width: 140px; object-fit: contain; border-radius: 6px; }
.cp-portal-name { font-weight: 700; font-size: calc(15px * var(--font-scale)); color: var(--hd); letter-spacing: -.1px; }
.cp-access-btn {
  font-weight: 700;
  font-size: calc(13px * var(--font-scale));
  padding: 9px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-family: 'Lato', sans-serif;
  transition: opacity .15s;
  letter-spacing: .02em;
}
.cp-access-btn:hover { opacity: .85; }

/* ── Hero ── */
.cp-hero {
  padding: var(--pad-hero-y) var(--pad-outer) var(--pad-hero-y);
  text-align: center;
  background: var(--bg);
}
.cp-hero h1 {
  font-size: calc(28px * var(--font-scale));
  font-weight: 900;
  letter-spacing: -.5px;
  margin: 0 0 20px;
  color: var(--hd);
  line-height: 1.2;
}
.cp-search-wrap {
  padding: var(--section-gap) var(--pad-outer) 0;
}
.cp-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: 11px 18px;
  transition: border-color .15s;
}
.cp-search-bar:focus-within { border-color: var(--acc); }
.cp-search-bar svg { width: 16px; height: 16px; stroke: var(--mut); flex-shrink: 0; }
.cp-search-bar input {
  background: none;
  border: none;
  outline: none;
  font-size: calc(14px * var(--font-scale));
  color: var(--txt);
  width: 100%;
  font-family: 'Lato', sans-serif;
}
.cp-search-bar input::placeholder { color: var(--mut); }

/* ── Layout ── */
.cp-top2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cards);
  padding: var(--section-gap) var(--pad-outer) 0;
}
.cp-docs-section { padding: var(--section-gap) var(--pad-outer) 0; }
.cp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  padding: var(--pad-outer) var(--pad-outer) 0;
}

@media (max-width: 700px) {
  .cp-top2,
  .cp-grid { grid-template-columns: 1fr !important; }
}

/* ── Cards ── */
.cp-card {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--card-r, 12px);
  padding: var(--pad-card);
  transition: border-color .15s;
  display: flex;
  flex-direction: column;
}
.cp-card:hover { border-color: rgba(0,194,168,.25); }
.cp-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cp-card-hd > span:last-child {
  font-weight: 700;
  font-size: calc(14px * var(--font-scale));
  color: var(--hd);
  letter-spacing: -.1px;
}
.cp-ico { display: flex; flex-shrink: 0; }
.cp-ico svg { width: 15px; height: 15px; stroke: var(--acc); }
.cp-card > p,
.cp-card-desc {
  font-size: calc(12px * var(--font-scale));
  color: var(--bd);
  line-height: 1.6;
  margin: 0 0 10px;
}

/* ── Certs ── */
.cp-certs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cp-cert-badge {
  background: rgba(0,194,168,.12);
  border: 1px solid rgba(0,194,168,.3);
  color: var(--acc);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
}

/* ── Documents ── */
/* ── Documents card + sub-cards ── */
.cp-docs-card { border-radius: var(--card-r, 12px) !important; }
.cp-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.cp-doc-sub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--txt);
  transition: border-color .15s, background .15s;
}
a.cp-doc-sub-card:hover {
  border-color: rgba(0,194,168,.4);
  background: rgba(0,194,168,.04);
}
.cp-doc-sub-icon {
  display: flex;
  flex-shrink: 0;
}
.cp-doc-sub-icon svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  max-width: 24px;
  flex-shrink: 0;
  stroke: var(--acc);
  display: block;
}
.cp-doc-sub-label {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--hd);
  line-height: 1.35;
  flex: 1;
}
.cp-doc-sub-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.cp-doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: .02em;
}
.cp-doc-badge svg { width: 10px; height: 10px; }
.cp-doc-badge-public {
  background: rgba(63,185,80,.12);
  color: #3fb950;
  border: 1px solid rgba(63,185,80,.3);
}
.cp-doc-badge-private {
  background: rgba(210,153,34,.12);
  color: #d29922;
  border: 1px solid rgba(210,153,34,.3);
}
.cp-doc-badge-link {
  background: rgba(0,194,168,.12);
  color: var(--acc);
  border: 1px solid rgba(0,194,168,.3);
}
.cp-doc-badge-link svg { stroke: var(--acc); }
.cp-doc-badge-private svg { stroke: #d29922; }

/* ── Items ── */
.cp-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.cp-items li { display: flex; }
.cp-item-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .1s;
  color: var(--txt);
  font-size: calc(12px * var(--font-scale));
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
}
.cp-item-btn:hover { background: rgba(0,194,168,.08); }
.cp-item-span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  font-size: calc(12px * var(--font-scale));
  color: var(--txt);
  line-height: 1.4;
}
.cp-il { flex: 1; }
.cp-arr { color: var(--acc); font-size: calc(14px * var(--font-scale)); margin-left: auto; flex-shrink: 0; opacity: .7; }
.cp-kv-k { color: var(--mut); flex: 1; font-size: calc(12px * var(--font-scale)); }
.cp-kv-v { font-weight: 700; font-size: calc(12px * var(--font-scale)); margin-left: auto; color: var(--txt); }
.cp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; }
.dot-g { background: #3fb950; }
.dot-y { background: #d29922; }
.dot-n { background: #484f58; }

/* ── View more ── */
.cp-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--det-bg, var(--acc));
  border: 1px solid var(--det-brd, var(--acc));
  color: var(--det-col, #0d1117);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  margin-top: auto;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: var(--det-r, 20px);
  font-family: 'Lato', sans-serif;
  transition: opacity .15s;
  letter-spacing: .02em;
  align-self: flex-start;
}
.cp-more-btn:hover { opacity: .82; }

/* ── Card modal (View All) ── */
.cp-card-modal-bd {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 9999;
  /* True viewport centering */
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.cp-card-modal-box {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Remove margin:auto — flex centering handles it */
  margin: 0;
}
.cp-cm-body {
  padding: 4px 0 8px;
  flex: 1;
  overflow-y: auto;
}
.cp-cm-item {
  padding: 14px 22px 12px;
  border-bottom: 1px solid var(--brd);
  transition: background .1s;
}
.cp-cm-item:last-child { border-bottom: none; }
.cp-cm-item:hover { background: rgba(255,255,255,.025); }
.cp-cm-item-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cp-cm-label {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--hd);
  flex: 1;
}
.cp-cm-value {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 4px;
  padding-left: 2px;
}
.cp-cm-desc {
  font-size: calc(12px * var(--font-scale));
  color: var(--bd);
  line-height: 1.65;
  margin: 4px 0 0;
}
.cp-cm-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,194,168,.12);
  border: 1px solid rgba(0,194,168,.3);
  color: var(--acc);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background .1s;
  flex-shrink: 0;
}
.cp-cm-link-btn:hover { background: rgba(0,194,168,.22); }
.cp-cm-req-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(210,153,34,.12);
  border: 1px solid rgba(210,153,34,.3);
  color: #d29922;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .1s;
  flex-shrink: 0;
  font-family: 'Lato', sans-serif;
}
.cp-cm-req-btn:hover { background: rgba(210,153,34,.22); }

/* ── Item link & request inline ── */
.cp-item-link {
  text-decoration: none;
  color: var(--txt);
}
.cp-item-link .cp-arr svg {
  width: 11px;
  height: 11px;
  stroke: var(--acc);
}
.cp-item-lock svg {
  width: 11px;
  height: 11px;
  stroke: #d29922;
  flex-shrink: 0;
}
.cp-item-req .cp-item-lock { margin-left: auto; }

/* ── Modal link button ── */
.cp-modal-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: calc(13px * var(--font-scale));
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  transition: opacity .15s;
  border: none;
}
.cp-modal-link-btn:hover { opacity: .85; }


/* ── Rich text output in Overview / Compliance cards ── */
.cp-rich-text {
  font-size: calc(12px * var(--font-scale));
  color: var(--bd);
  line-height: 1.65;
  margin: 0 0 6px;
}
.cp-rich-text p {
  margin: 0 0 8px;
  font-size: calc(12px * var(--font-scale));
  color: var(--bd);
  line-height: 1.65;
}
.cp-rich-text p:last-child { margin-bottom: 0; }
.cp-rich-text a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cp-rich-text a:hover { opacity: .8; }
.cp-rich-text strong, .cp-rich-text b { font-weight: 700; color: var(--hd); }
.cp-rich-text em, .cp-rich-text i { font-style: italic; }
.cp-rich-text ul, .cp-rich-text ol {
  padding-left: 18px;
  margin: 6px 0;
}
.cp-rich-text ul { list-style: disc; }
.cp-rich-text ol { list-style: decimal; }
.cp-rich-text li {
  font-size: calc(12px * var(--font-scale));
  color: var(--bd);
  line-height: 1.6;
  margin-bottom: 2px;
}

/* ── Cards section title ── */
.cp-cards-title-wrap {
  padding: var(--section-gap) var(--pad-outer) 16px;
}
.cp-cards-title {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  color: var(--hd);
  letter-spacing: -.3px;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  /* font-size and text-align set via inline style from admin */
}