@import url('../modules/modular-skin.css');
/* DBD Tracker Modular Foundation — Shared component primitives */
.dbd-section-card{
  background:var(--dbd-panel);
  border:1px solid var(--dbd-border);
  border-radius:var(--dbd-radius-md);
  box-shadow:var(--dbd-shadow);
  overflow:hidden;
  position:relative;
}
.dbd-section-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(to bottom, var(--dbd-accent), transparent 62%);
  opacity:.65;
}
.dbd-section-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--dbd-space-3);
  padding:var(--dbd-card-pad);
  border-bottom:1px solid var(--dbd-border);
  position:relative;
  z-index:1;
}
.dbd-section-card-title{margin:0;font-family:var(--dbd-font-heading);font-size:var(--dbd-text-xl);text-transform:uppercase;letter-spacing:.03em;}
.dbd-section-card-subtitle{margin:var(--dbd-space-1) 0 0;color:var(--dbd-muted);font-size:var(--dbd-text-sm);}
.dbd-section-card-actions{display:flex;gap:var(--dbd-space-2);flex-wrap:wrap;align-items:center;}
.dbd-section-card-body{padding:var(--dbd-card-pad);position:relative;z-index:1;}
.dbd-empty-state,.dbd-loading-state{
  padding:var(--dbd-space-5);
  border:1px dashed var(--dbd-border-strong);
  border-radius:var(--dbd-radius-md);
  background:rgba(255,255,255,.025);
  color:var(--dbd-muted);
  text-align:center;
}
.dbd-empty-state strong,.dbd-loading-state strong{display:block;color:var(--dbd-text);margin-bottom:var(--dbd-space-1);font-family:var(--dbd-font-heading);text-transform:uppercase;letter-spacing:.04em;}
.dbd-chip-row{display:flex;gap:var(--dbd-space-2);flex-wrap:wrap;align-items:center;}
.dbd-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;
  border-radius:var(--dbd-radius-pill);
  border:1px solid var(--dbd-border);
  background:rgba(255,255,255,.045);
  color:var(--dbd-muted);
  font-size:var(--dbd-text-xs);
  line-height:1.2;
}
.dbd-chip.good{background:var(--dbd-good-bg);border-color:var(--dbd-good-border);color:var(--dbd-good-text);}
.dbd-chip.bad{background:var(--dbd-bad-bg);border-color:var(--dbd-bad-border);color:var(--dbd-bad-text);}
.dbd-chip.warn{background:var(--dbd-warn-bg);border-color:var(--dbd-warn-border);color:var(--dbd-warn-text);}
.dbd-button-row{display:flex;gap:var(--dbd-space-2);flex-wrap:wrap;align-items:center;}
.dbd-toast-layer{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 36px));}
.dbd-toast{background:var(--dbd-panel-raised);border:1px solid var(--dbd-border-strong);border-radius:var(--dbd-radius-md);box-shadow:var(--dbd-shadow-pop);padding:12px 14px;color:var(--dbd-text);}
.dbd-toast.good{border-color:var(--dbd-good-border)}.dbd-toast.bad{border-color:var(--dbd-bad-border)}.dbd-toast.warn{border-color:var(--dbd-warn-border)}

/* v3 component framework primitives */
.dbd-component-card{
  background:var(--dbd-panel);
  border:1px solid var(--dbd-border);
  border-radius:var(--dbd-radius-md);
  box-shadow:var(--dbd-shadow);
  padding:var(--dbd-card-pad);
  color:var(--dbd-text);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dbd-component-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dbd-space-3)}
.dbd-component-card h3{margin:0;font-family:var(--dbd-font-heading);font-size:var(--dbd-text-xl);text-transform:uppercase;letter-spacing:.03em;color:var(--dbd-text)}
.dbd-component-kicker{margin:0 0 var(--dbd-space-1);font-size:var(--dbd-text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--dbd-accent-text);font-weight:800}
.dbd-component-muted{margin:0;color:var(--dbd-muted);font-size:var(--dbd-text-sm)}
.dbd-component-badge,.dbd-component-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--dbd-radius-pill);border:1px solid var(--dbd-border);background:rgba(255,255,255,.045);color:var(--dbd-muted);font-size:var(--dbd-text-xs);font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.dbd-component-meta-row{display:flex;gap:var(--dbd-space-2);flex-wrap:wrap;align-items:center;color:var(--dbd-muted);font-size:var(--dbd-text-xs)}
.dbd-component-notes{margin:0;color:var(--dbd-muted);font-size:var(--dbd-text-sm);line-height:1.45}

/* v3 model preview primitives */
.dbd-model-preview{
  border:1px solid var(--dbd-border);
  border-radius:var(--dbd-radius-md);
  background:rgba(0,0,0,.18);
  padding:var(--dbd-space-3);
  height:100%;
}
.dbd-model-preview h4{
  margin:0 0 var(--dbd-space-2);
  font-family:var(--dbd-font-heading);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.dbd-model-preview pre{
  max-height:320px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  margin:var(--dbd-space-3) 0 0;
  padding:var(--dbd-space-3);
  border-radius:var(--dbd-radius-sm);
  background:rgba(0,0,0,.28);
  border:1px solid var(--dbd-border);
  color:var(--dbd-muted);
  font-size:12px;
  line-height:1.45;
}

/* Component Lab utility: collapsible diagnostic archives */
.dbd-lab-details {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
}
.dbd-lab-details > summary {
  cursor: pointer;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}
.dbd-lab-details[open] > summary {
  margin-bottom: 8px;
}