/* ================================================================
   BigBigBrain GRC — Universal PRACI Component Styles
   Loaded globally — works in all apps
   Uses site CSS variables only
   ================================================================ */

/* Legend */
.bbp-legend{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:16px}
.bbp-legend-item{display:flex;align-items:flex-start;gap:8px}
.bbp-legend-role{font-size:11px;font-weight:700;color:var(--txt);margin-bottom:1px}
.bbp-legend-desc{font-size:9px;color:var(--txt2)}
.bbp-pill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:8px;flex-shrink:0;white-space:nowrap}

/* Process tabs */
.bbp-tabs{display:flex;gap:6px;margin-bottom:16px}
.bbp-tab{padding:7px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border2);background:var(--bg2);color:var(--txt2);transition:all .15s;font-family:inherit}
.bbp-tab:hover{border-color:var(--acc);color:var(--acc)}
.bbp-tab.active{background:var(--acc);color:#fff;border-color:var(--acc)}

/* People row */
.bbp-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:20px}
.bbp-person{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:14px;display:flex;align-items:flex-start;gap:10px;transition:border-color .15s}
.bbp-person:hover{border-color:var(--acc)}
.bbp-person-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.bbp-person-role-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.bbp-person-name{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:2px}
.bbp-person-title{font-size:10px;color:var(--txt2);margin-bottom:3px}
.bbp-person-email{font-size:10px;color:var(--acc);text-decoration:none}
.bbp-person-email:hover{text-decoration:underline}

/* Matrix table */
.bbp-table-wrap{overflow-x:auto}
.bbp-table{width:100%;border-collapse:collapse;font-size:11px;min-width:800px}
.bbp-table thead th{text-align:left;padding:10px 12px;background:var(--bg3);border-bottom:2px solid var(--border);border-right:1px solid var(--border);font-size:10px;color:var(--txt2);font-weight:700}
.bbp-table tbody tr{border-bottom:1px solid var(--border)}
.bbp-table tbody tr:hover td{background:var(--bg3)}
.bbp-num{padding:12px 8px;text-align:center;font-weight:900;color:var(--acc);font-size:13px;border-right:1px solid var(--border);white-space:nowrap}
.bbp-when{padding:12px 10px;font-size:10px;color:var(--txt2);white-space:nowrap;font-family:'JetBrains Mono',monospace;border-right:1px solid var(--border)}
.bbp-stage-title{font-size:12px;font-weight:700;color:var(--txt);padding:12px 12px 3px}
.bbp-stage-desc{font-size:10px;color:var(--txt2);line-height:1.5;padding:0 12px 12px;border-right:1px solid var(--border)}
.bbp-cell{padding:10px;vertical-align:top;border-right:1px solid var(--border)}
.bbp-empty-cell{background:var(--bg)}
.bbp-dash{color:var(--border2);font-size:16px}
.bbp-name{display:block;font-size:10px;font-weight:600;color:var(--txt);padding:5px 8px;border-radius:4px;background:var(--bg3);line-height:1.5}
.bbp-empty{padding:40px;text-align:center;color:var(--txt2);font-size:13px}

/* PRACI trigger button — for toolbars */
.bbp-trigger-btn{padding:6px 12px;border-radius:var(--r-sm);font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--border2);background:var(--bg2);color:var(--txt2);transition:all .15s;font-family:inherit}
.bbp-trigger-btn:hover{border-color:var(--acc);color:var(--acc)}

/* Modal overlay */
.bbp-modal{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center}
.bbp-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.bbp-modal-box{position:relative;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);width:90vw;max-width:1200px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.bbp-modal-head{padding:20px 24px;border-bottom:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between}
.bbp-modal-title{font-size:18px;font-weight:700;color:var(--txt)}
.bbp-modal-sub{font-size:11px;color:var(--txt2);margin-top:3px}
.bbp-modal-close{background:none;border:none;cursor:pointer;color:var(--txt2);font-size:20px;padding:4px;border-radius:50%;transition:background .15s;flex-shrink:0}
.bbp-modal-close:hover{background:var(--bg3);color:var(--txt)}

/* Responsive */
@media(max-width:768px){
    .bbp-legend{grid-template-columns:1fr 1fr}
    .bbp-people{grid-template-columns:1fr}
}