/*
  Frameworks UI Styles
  Implements visual patterns for: BLUF, KPI/ROI callouts, 5 Whys, Weighted Decision Matrix,
  What? So What? Now What?, and Before/After tables.

  Usage: Add semantic wrappers and small utility classes to surface decision logic explicitly.
*/

:root{
  --fw-primary: var(--primary);
  --fw-secondary: var(--secondary);
  --fw-accent: var(--accent);
  --fw-gray-900: var(--gray-900);
  --fw-gray-800: var(--gray-800);
  --fw-gray-700: var(--gray-700);
  --fw-gray-600: var(--gray-600);
  --fw-gray-200: var(--gray-200);
  --fw-gray-100: var(--gray-100);
  --fw-white: var(--white);
  --fw-radius: 12px;
}

.framework-block{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--fw-radius);padding:1rem;box-shadow:0 8px 20px rgba(var(--scrim-rgb),.06)}
.framework-title{margin:0 0 .5rem;font-weight:800;color:var(--fw-gray-900);font-size:1.05rem}
.framework-note{margin:.35rem 0 0;color:var(--fw-gray-600);font-size:.85rem}

/* BLUF */
.bluf{position:relative;background:linear-gradient(180deg,var(--surface-3) 0%, var(--surface-1) 60%);border:1px solid rgba(var(--primary-rgb),.30);border-radius:10px;padding:0.85rem 0.95rem 0.95rem 0.95rem;margin:0 0 .5rem}
.bluf::before{content:"BLUF";position:absolute;top:-11px;left:16px;background:linear-gradient(135deg,var(--fw-primary),var(--fw-secondary));color:#fff;font-weight:900;letter-spacing:.05em;border-radius:999px;padding:.28rem .6rem;font-size:.7rem;box-shadow:0 6px 18px rgba(var(--primary-rgb),.25)}
.bluf p{margin:0;color:var(--fw-gray-800);line-height:1.5}

/* KPI/ROI table */
.kpi-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-1)}
.kpi-table th,.kpi-table td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--gray-200)}
.kpi-table thead th{background:var(--surface-2);font-weight:800;color:var(--gray-900)}
.kpi-table tbody tr:nth-child(odd){background:var(--surface-2)}
.kpi-table .kpi-good{color:var(--success-700);font-weight:800}

/* Responsive table wrapper to prevent horizontal overflow on mobile */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap > table{min-width:600px}

/* 5 Whys */
.five-whys{display:grid;gap:.5rem}
.five-whys .why{display:flex;gap:.5rem;align-items:flex-start;background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:.6rem}
.five-whys .why .n{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:var(--surface-3);color:var(--fw-primary);font-weight:800;font-size:.85rem}
.five-whys .why .t{color:var(--fw-gray-800)}
.five-whys .why.winner{border-left:3px solid var(--fw-accent);background:linear-gradient(180deg, rgba(var(--accent-rgb),.08), var(--surface-1))}

/* Weighted Decision Matrix */
.decision-matrix{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-1)}
.decision-matrix th,.decision-matrix td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--gray-200);font-size:.95rem}
.decision-matrix thead th{background:linear-gradient(90deg,var(--surface-3),var(--surface-1));color:var(--gray-900);font-weight:800}
.decision-matrix tfoot td{background:var(--surface-2);font-weight:800}
.decision-matrix .winner{background:linear-gradient(180deg, rgba(var(--accent-rgb),.08), var(--surface-1));border-left:3px solid var(--fw-accent)}

/* What? So What? Now What? */
.wsn{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.wsn .box{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:.75rem}
.wsn .box h4{margin:.1rem 0 .35rem;font-weight:800;font-size:1rem}
@media (max-width: 768px){.wsn{grid-template-columns:1fr}}

/* Before / After */
.before-after{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.before-after .col{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:.75rem}
.before-after h4{margin:.1rem 0 .35rem;font-weight:800;font-size:1rem}
@media (max-width: 768px){.before-after{grid-template-columns:1fr}}

/* Small utility row of example chips */
.framework-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.framework-chips .chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-1);color:var(--fw-gray-800);font-weight:700;font-size:.8rem}
.framework-chips .chip i{color:var(--fw-primary)}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark){
  .framework-block{background:var(--surface-2);border-color:var(--border);box-shadow:0 6px 18px rgba(var(--scrim-rgb),.35)}
  .framework-title{color:var(--text)}
  .framework-note{color:var(--text-muted)}
  .bluf{background:linear-gradient(180deg,rgba(var(--primary-rgb),.20) 0%, var(--topbar-bg) 60%);border-color:var(--border)}
  .bluf p{color:var(--text)}
  .kpi-table,.decision-matrix{background:var(--surface-2);border-color:var(--border)}
  .kpi-table thead th,.decision-matrix thead th{background:var(--surface-3);color:var(--text)}
  .kpi-table td,.decision-matrix td{color:var(--text);border-bottom-color:var(--border)}
  .five-whys .why{background:var(--surface-2);border-color:var(--border)}
  .five-whys .why .n{background:var(--surface-3);color:var(--primary)}
  .wsn .box,.before-after .col{background:var(--surface-2);border-color:var(--border)}
  .framework-chips .chip{background:var(--surface-2);border-color:var(--border);color:var(--text)}
}

/* Mobile high contrast overrides for frameworks */
@media (max-width: 768px) {
  .framework-title {
    color: #0A0A0A !important;
  }
  
  .framework-note {
    color: #374151 !important;
  }
  
  .bluf p {
    color: #1F2937 !important;
  }
  
  .kpi-table thead th, .decision-matrix thead th {
    background: #F8FAFC !important;
    color: #0A0A0A !important;
  }
  
  .kpi-table td, .decision-matrix td {
    color: #1F2937 !important;
    border-color: #6B7280 !important;
  }
  
  .five-whys .why .t {
    color: #1F2937 !important;
  }
  
  .wsn .box, .before-after .col {
    background: #FEFEFE !important;
    border-color: #6B7280 !important;
  }
  
  .wsn .box h4, .before-after h4 {
    color: #0A0A0A !important;
  }
  
  .framework-chips .chip {
    background: #FEFEFE !important;
    border-color: #6B7280 !important;
    color: #1F2937 !important;
  }
}