/* ==========================================================================
   Attack Surface Visualizer + Risk Glossary — page-specific styles.
   Loaded after main.css on /AttackSurfaceVisualizer and /Glossary only.
   ========================================================================== */

/* --- Node-type palette (Tailwind bg-*-100 / border-*-300 / text-*-800) --- */
.as-bg-category   { background: #dbeafe; }
.as-bg-delivery   { background: #f3e8ff; }
.as-bg-impact     { background: #fee2e2; }
.as-bg-mitigation { background: #dcfce7; }
.as-bg-ttp        { background: #ffedd5; }

.as-border-category   { border-color: #93c5fd; }
.as-border-delivery   { border-color: #d8b4fe; }
.as-border-impact     { border-color: #fca5a5; }
.as-border-mitigation { border-color: #86efac; }
.as-border-ttp        { border-color: #fdba74; }

.as-text-category   { color: #1e40af; }
.as-text-delivery   { color: #6b21a8; }
.as-text-impact     { color: #991b1b; }
.as-text-mitigation { color: #166534; }
.as-text-ttp        { color: #9a3412; }

.badge.as-badge-category   { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.badge.as-badge-delivery   { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
.badge.as-badge-impact     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.badge.as-badge-mitigation { background: #dcfce7; color: #166534; border-color: #86efac; }
.badge.as-badge-ttp        { background: #ffedd5; color: #9a3412; border-color: #fdba74; }

/* bg-green-100 text-green-800 badge (defense layer chips) */
.badge.as-badge-green { background: #dcfce7; color: #166534; }
/* bg-blue-100 text-blue-800 / bg-orange-100 / bg-red-100 summary badges */
.badge.as-badge-blue   { background: #dbeafe; color: #1e40af; }
.badge.as-badge-orange { background: #ffedd5; color: #9a3412; }
.badge.as-badge-red    { background: #fee2e2; color: #991b1b; }

/* --- Shared bits --- */
.border-2 { border-width: 2px; }
.icon-3 { width: 3rem; height: 3rem; }

/* Card header with colored background (React CardHeader + bg + border-b) */
.as-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--slate-200);
  border-top-left-radius: calc(var(--radius-lg) - 2px);
  border-top-right-radius: calc(var(--radius-lg) - 2px);
}
.as-card-header + .card-content { padding-top: 1rem; }

/* --- Page backgrounds (React gradient wrappers) --- */
.glossary-bg { background: linear-gradient(135deg, var(--slate-50), rgba(239, 246, 255, 0.1), var(--slate-50)); }
.asv-bg      { background: linear-gradient(135deg, var(--slate-50), rgba(254, 242, 242, 0.1), var(--slate-50)); }

/* --- Glossary layout --- */
.glossary-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .glossary-stats { grid-template-columns: repeat(5, 1fr); } }

.glossary-grid { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .glossary-grid { grid-template-columns: 2fr 1fr; } }

.glossary-list { max-height: 800px; overflow-y: auto; }
.glossary-sticky { position: sticky; top: 1.5rem; }

.glossary-search-wrap { position: relative; }
.glossary-search-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; pointer-events: none;
}
.glossary-search-input { padding-left: 2.5rem; }

.glossary-node { transition: box-shadow 0.15s; }
.glossary-node:hover { box-shadow: var(--shadow-lg); }
.glossary-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; }

/* --- Visualizer layout --- */
.asv-grid { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .asv-grid.asv-normal { grid-template-columns: minmax(0, 1fr) 350px; } }

.asv-stage {
  position: relative;
  width: 100%;
  height: 600px;
  background: linear-gradient(135deg, var(--slate-50), var(--slate-100));
  border: 2px solid var(--slate-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.asv-stage > svg { position: absolute; inset: 0; }

.asv-pill { cursor: pointer; }
.asv-pill text { user-select: none; }

.asv-hover-overlay {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-xl);
  border: 2px solid var(--slate-200);
}

.legend-dot { width: 1rem; height: 1rem; border-radius: 9999px; flex-shrink: 0; }
.legend-bar { width: 2rem; height: 0.25rem; flex-shrink: 0; }