/* ==========================================
   Payvanta Modal System
   Include on any page that uses ia-diagrams.php or biz-rules.php
   ========================================== */

/* IA Diagrams shared */
.ch-diagram-section{ margin-top: 44px; }
.ch-diagram-tag{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-muted);
  background: var(--cs-line);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

/* Swimlane */
.sl-wrap{ overflow-x: auto; }
.sl-table{
  min-width: 820px;
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  overflow: hidden;
}
.sl-head{
  display: grid;
  grid-template-columns: 120px 1fr 1fr 1fr 1fr;
  background: #fff;
}
.sl-phase-hd{
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-muted);
}
.sl-lane-hd{
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cs-ink);
  border-left: 1px solid var(--cs-line);
  background: #ebe7ff;
}
.sl-lane-hd--dir{ color: var(--cs-accent); background: #e8eeff; }
.sl-lane-hd--sys{ color: #0d7a5f; background: #e5f8f2; }
.sl-row{
  display: grid;
  grid-template-columns: 120px 1fr 1fr 1fr 1fr;
  border-top: 1px solid var(--cs-line);
}
.sl-row-ph{
  padding: 12px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-muted);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-row--j .sl-row-ph{ background: #fff; }
.sl-lane{
  padding: 10px;
  border-left: 1px solid var(--cs-line);
  background: #f5f3ff;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sl-lane--dir{ background: #f5f7ff; }
.sl-lane--sys{ background: #f5fdfb; }
.sl-row > :nth-child(3){ background: #edf1ff; }
.sl-row > :nth-child(4){ background: #f5f7ff; }
.sl-head > :nth-child(3){ background: #dce4ff; color: var(--cs-accent); }
.sl-chip{
  font-size: 12px;
  color: var(--cs-ink);
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 5px;
  padding: 5px 9px;
  line-height: 1.4;
}
.sl-chip--dir{ }
.sl-chip--sys{ }
.sl-chip--end{ background: #0d7a5f; border-color: #0d7a5f; color: #fff; font-weight: 600; }
.sl-note{ font-size: 10.5px; color: var(--cs-muted); font-style: italic; line-height: 1.4; padding: 0 2px; }
.sl-jtag{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(92,71,230,.1);
  color: var(--cs-brand);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

/* Content Tree */
.ctree-root-bar{
  background: var(--cs-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  text-align: center;
}
.ctree-stem{
  height: 16px;
  position: relative;
}
.ctree-stem::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--cs-line);
}
.ctree-cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ctree-branch{ display: flex; flex-direction: column; }
.ctree-branch::before{
  content: '';
  display: block;
  width: 2px;
  height: 14px;
  background: var(--cs-line);
  margin: 0 auto;
}
.ctree-cat{
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 7px 7px 0 0;
  text-align: center;
}
.ctree-cat--id{ background: #eef1ff; color: var(--cs-accent); }
.ctree-cat--biz{ background: #f3f0ff; color: var(--cs-brand); }
.ctree-cat--fin{ background: #f0fdf9; color: #0d7a5f; }
.ctree-cat--doc{ background: #fff7ed; color: #c2410c; }
.ctree-items{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cs-line);
  border-top: none;
  border-radius: 0 0 7px 7px;
  overflow: hidden;
  flex: 1;
}
.ctree-items li{
  font-size: 12px;
  color: var(--cs-muted);
  padding: 6px 12px;
  border-top: 1px solid var(--cs-line);
  line-height: 1.4;
}
@media(max-width:860px){
  .ctree-cols{ grid-template-columns: repeat(2,1fr); }
  .ctree-stem::before{ left: 25%; right: 25%; }
}
@media(max-width:480px){
  .ctree-cols{ grid-template-columns: 1fr; }
  .ctree-stem{ display: none; }
}

/* Step Matrix */
.smatrix-wrap{
  overflow-x: auto;
  border: 1px solid var(--cs-line);
  border-radius: 12px;
  overflow: hidden;
}
.smatrix{
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
}
.smatrix thead th{
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #fafafa;
  border-bottom: 2px solid var(--cs-line);
  color: var(--cs-muted);
  text-align: center;
  white-space: nowrap;
}
.smatrix thead th:first-child{ text-align: left; }
.smatrix tbody td{
  padding: 9px 14px;
  border-bottom: 1px solid var(--cs-line);
  text-align: center;
  vertical-align: middle;
}
.smatrix tbody tr:last-child td{ border-bottom: none; }
.smatrix tbody tr:nth-child(even){ background: #fafafa; }
.smatrix-lbl{
  text-align: left !important;
  font-size: 13px;
  color: var(--cs-ink);
  width: 190px;
}
.sm-dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.sm-dot--id{ background: var(--cs-accent); }
.sm-dot--biz{ background: var(--cs-brand); }
.sm-dot--fin{ background: #0d9488; }
.sm-dot--doc{ background: #ea580c; }
.sm-dot--sys{ background: #94a3b8; }
.smatrix-row--j .smatrix-lbl{ color: var(--cs-brand); }
.smatrix-row--j td:first-child{ border-left: 3px solid var(--cs-brand); }

/* Modal trigger cards */
.modal-card-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media(max-width:600px){ .modal-card-row{ grid-template-columns: 1fr; } }
.modal-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  background: #fff;
}
.modal-card-icon{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-card-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-ink);
  margin: 0;
}
.modal-card-desc{
  font-size: 13.5px;
  color: var(--cs-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.modal-open-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--cs-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  width: fit-content;
  margin-top: 4px;
}
.modal-open-btn:hover{ background: var(--cs-primary-deep); }

/* Backdrop + Modal shell */
.modal-backdrop{
  --cs-primary:      #261a50;
  --cs-primary-deep: #161c47;
  --cs-accent:       #4364e8;
  --cs-brand:        #5c47e6;
  --cs-highlight:    #a78bfa;
  --cs-ink:          #1b2240;
  --cs-muted:        #5e6b82;
  --cs-line:         #e7eaf5;
  --cs-paper:        #ffffff;
  position: fixed;
  inset: 0;
  background: rgba(8,8,20,.88);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop.open{ opacity: 1; pointer-events: auto; }
.modal-shell{
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  transform: translateY(18px);
  transition: transform .22s ease;
  overflow: hidden;
}
.modal-backdrop.open .modal-shell{ transform: none; }
.modal-bar{
  padding: 14px 28px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--cs-primary) 0%, var(--cs-primary-deep) 100%);
}
.modal-bar-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-lbl{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-right: auto;
  letter-spacing: 0.02em;
}
.modal-tabs-bar{
  padding: 0 28px;
  border-bottom: 1px solid var(--cs-line);
  background: #fff;
  flex-shrink: 0;
}
.modal-tabs{ display: flex; gap: 0; }
.modal-tab{
  padding: 12px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--cs-muted);
  transition: color .15s, border-color .15s;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.modal-tab:hover{ color: var(--cs-ink); }
.modal-tab.on{ color: var(--cs-brand); border-bottom-color: var(--cs-brand); }
.modal-close{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  width: auto;
  height: auto;
}
.modal-close:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
#biz-close{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.9); }
#biz-close:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.modal-body{ flex: 1; overflow-y: auto; padding: 36px 28px; }
.modal-inner{ max-width: 1200px; margin: 0 auto; }
.modal-section{ padding-top: 40px; border-top: 1px solid var(--cs-line); margin-top: 40px; }
.modal-section:first-of-type{ padding-top: 0; border-top: none; margin-top: 0; }
.modal-section h3{ font-size: 18px; font-weight: 700; color: var(--cs-primary); margin: 0 0 6px; }
.modal-section > p{ font-size: 14px; color: var(--cs-muted); margin-bottom: 20px; line-height: 1.6; }
@media(max-width:600px){
  .modal-bar{ flex-wrap: wrap; }
  .modal-tabs{ flex-wrap: wrap; }
  .modal-tab{ flex: 1; text-align: center; padding: 6px 8px; font-size: 11px; }
  .modal-body{ padding: 16px; }
}

/* Business Rules content */
.br-table-wrap{ border: 1px solid var(--cs-line); border-radius: 12px; overflow: hidden; }
.br-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.br-table thead th{
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #fafafa;
  border-bottom: 2px solid var(--cs-line);
  color: var(--cs-muted);
}
.br-table tbody td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--cs-line);
  vertical-align: top;
  line-height: 1.55;
  color: var(--cs-muted);
}
.br-table tbody tr:last-child td{ border-bottom: none; }
.br-table tbody tr:nth-child(even){ background: #fafafa; }
.br-cat{ font-weight: 700; font-size: 12px; color: var(--cs-ink); white-space: nowrap; }
.br-code{ font-family: monospace; font-size: 11.5px; color: var(--cs-accent); background: #eef1ff; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.br-flag{ color: #c2410c; font-size: 12.5px; }
.br-badge{ display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; vertical-align: middle; }
.br-badge--all{ background: #e8f5e9; color: #2e7d32; }
.br-badge--jur{ background: rgba(92,71,230,.1); color: var(--cs-brand); }
.br-badge--cond{ background: #fff7ed; color: #c2410c; }

/* Modal trigger utilities — use on any page */
.modal-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
}
/* Style A: inviting — use when modal is core to the narrative */
.modal-trigger--primary{
  color: var(--cs-brand);
  background: rgba(92,71,230,.07);
  border: 1px solid rgba(92,71,230,.28);
  border-radius: 8px;
  padding: 9px 16px;
}
.modal-trigger--primary:hover{
  background: rgba(92,71,230,.13);
  border-color: var(--cs-brand);
}
/* Style B: subtle — use when modal is supporting detail */
.modal-trigger--subtle{
  color: var(--cs-muted);
}
.modal-trigger--subtle:hover{
  color: var(--cs-ink);
  text-decoration: underline;
}
/* Style C: inline link — use embedded in prose */
.modal-trigger--link{
  color: var(--cs-brand);
  font-size: inherit;
  font-weight: inherit;
}
.modal-trigger--link:hover{
  text-decoration: underline;
}

/* Participants modal */
.prt-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}
@media(max-width:600px){ .prt-grid{ grid-template-columns: 1fr; } }
.prt-label{
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-muted);
  margin-bottom: 12px;
}
.prt-block ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prt-block ul li{
  font-size: 14px;
  color: var(--cs-muted);
  line-height: 1.55;
  padding-left: 14px;
  position: relative;
}
.prt-block ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cs-line);
}