/**
 * Tool surfaces
 * Gives bespoke tool containers that don't use .card the shared panel treatment:
 * charcoal surface, one hairline border, no gloss. Selector list is unchanged from
 * the previous glass version so no tool markup had to move.
 */

/* ── Upload / Drop zones ── */
.upload-card,
.upload-area {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), background var(--transition-fast) !important;
  position: relative;
}

.upload-area {
  border-style: dashed !important;
}

.upload-area:hover,
.upload-area.drag-over {
  border-color: var(--accent-primary) !important;
  background: var(--bg-elevated) !important;
}

/* ── Workflow / info cards ── */
.workflow-card,
.info-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast) !important;
  position: relative;
}

/* ── Result / Analysis panels ── */
.result-panel,
.result-card,
.analysis-panel,
.triage-panel,
.triage-card,
.report-content,
.hash-display,
.hash-input,
.finding-panel,
.email-preview,
.packet-list-container,
.hex-view,
.strings-view,
.timeline-container,
.ioc-panel,
.evidence-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast) !important;
  position: relative;
}

.result-panel:hover,
.result-card:hover,
.analysis-panel:hover,
.triage-panel:hover,
.triage-card:hover,
.report-content:hover,
.hash-display:hover,
.hash-input:hover,
.finding-panel:hover,
.email-preview:hover,
.packet-list-container:hover,
.hex-view:hover,
.strings-view:hover,
.timeline-container:hover,
.ioc-panel:hover,
.evidence-card:hover {
  border-color: var(--border-hover) !important;
}

/* ── Table / List containers ── */
.data-table,
.result-table,
.packet-table,
.flow-table,
.ioc-table {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.data-table thead,
.result-table thead,
.packet-table thead,
.flow-table thead,
.ioc-table thead {
  background: var(--bg-elevated) !important;
}

.data-table th,
.result-table th,
.packet-table th,
.flow-table th,
.ioc-table th {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table td,
.result-table td,
.packet-table td,
.flow-table td,
.ioc-table td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

.data-table tr:hover td,
.result-table tr:hover td,
.packet-table tr:hover td,
.flow-table tr:hover td,
.ioc-table tr:hover td {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* ── Finding severity badges ──
   Each one is read as data, so the colour is paired with the label text the
   tool already writes; colour is never the only carrier. */
.finding-sev {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-mono);
  font-size: var(--text-xs) !important;
  font-weight: var(--font-medium) !important;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-3) !important;
}

.finding-sev.high {
  background: color-mix(in srgb, var(--crimson) 30%, transparent) !important;
  color: var(--signal) !important;
  border: 1px solid var(--crimson) !important;
}

:root[data-theme="light"] .finding-sev.high {
  background: color-mix(in srgb, var(--crimson) 10%, transparent) !important;
  color: var(--crimson) !important;
}

.finding-sev.medium {
  background: color-mix(in srgb, var(--accent-warning) 14%, transparent) !important;
  color: var(--accent-warning) !important;
  border: 1px solid color-mix(in srgb, var(--accent-warning) 40%, transparent) !important;
}

.finding-sev.low,
.finding-sev.info {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-hover) !important;
}