/* Edge LLM Bench — Custom styles (Tailwind handles the rest) — v4 */

/* ── Device badges ─────────────────────────────────────────────────────── */
.device-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.device-badge.pixel { background: rgba(79,142,247,0.15); color: #4F8EF7; }
.device-badge.m4    { background: rgba(168,85,247,0.15); color: #A855F7; }
.device-badge.x86   { background: rgba(245,158,11,0.15); color: #F59E0B; }

/* ── Finding pills ─────────────────────────────────────────────────────── */
.finding-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  font-size: 0.8rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border-radius: 0.5rem;
  background: #10B981;
  color: #000;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}
.btn-primary:hover { background: #059669; transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.5rem;
  background: transparent;
  border: 1px solid #374151;
  color: #9CA3AF;
  font-weight: 500;
  font-size: 0.875rem;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
  cursor: pointer;
}
.btn-secondary:hover { border-color: #10B981; color: #10B981; }

/* ── Toggle button group ───────────────────────────────────────────────── */
.btn-group {
  display: flex;
  gap: 0.25rem;
  background: #111827;
  border: 1px solid #1F2937;
  border-radius: 0.5rem;
  padding: 0.2rem;
}

.btn-toggle {
  padding: 0.3rem 0.75rem;
  border-radius: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #6B7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-toggle:hover { color: #D1D5DB; }
.btn-toggle.active {
  background: #1F2937;
  color: #10B981;
}

/* ── Stat cards ────────────────────────────────────────────────────────── */
.stat-card {
  background: #0F172A;
  border: 1px solid #1E293B;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}
.stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: #10B981;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label {
  font-size: 0.78rem;
  color: #6B7280;
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Section layout ────────────────────────────────────────────────────── */
.section-wrapper { padding: 5rem 0; }
.section-alt { background: #030712; }

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.section-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: #10B981;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 0.35rem;
  padding: 0.2rem 0.45rem;
  margin-top: 0.25rem;
  white-space: nowrap;
}
.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #F9FAFB;
  line-height: 1.2;
}
.section-sub {
  font-size: 0.9rem;
  color: #6B7280;
  margin-top: 0.3rem;
}

/* ── Chart card ────────────────────────────────────────────────────────── */
.chart-card {
  background: #0F172A;
  border: 1px solid #1E293B;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1.25rem;
}
.chart-note {
  font-size: 0.74rem;
  color: #4B5563;
  margin-top: 0.6rem;
  padding-left: 0.25rem;
}

/* ── Controls bar ──────────────────────────────────────────────────────── */
.controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.75rem 1rem;
  background: #0F172A;
  border: 1px solid #1E293B;
  border-radius: 0.65rem;
}
.control-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.control-label {
  font-size: 0.74rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Select control ────────────────────────────────────────────────────── */
.select-control {
  background: #111827;
  border: 1px solid #1F2937;
  border-radius: 0.4rem;
  color: #D1D5DB;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.select-control:focus { border-color: #10B981; }

/* ── Heatmap table ─────────────────────────────────────────────────────── */
#heatmap-table {
  table-layout: fixed;
  width: 100%;
}
#heatmap-table th {
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #1E293B;
  width: 25%;
}
#heatmap-table th:first-child { text-align: left; width: 25%; }

#heatmap-table td {
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: 0.82rem;
  font-family: 'JetBrains Mono', monospace;
  border-bottom: 1px solid #0F172A;
  transition: background 0.2s;
  width: 25%;
  white-space: nowrap;
  overflow: hidden;
}
#heatmap-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: #D1D5DB;
  font-family: inherit;
}
#heatmap-table tr:last-child td { border-bottom: none; }
#heatmap-table tr.highlighted td { outline: 1px solid #10B981; }

.heatmap-legend-bar {
  height: 8px;
  width: 120px;
  border-radius: 4px;
  background: linear-gradient(to right, #EF4444, #F59E0B, #10B981);
}

/* ── Data table ────────────────────────────────────────────────────────── */
.th {
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #1E293B;
  white-space: nowrap;
}
.th.sortable { cursor: pointer; user-select: none; }
.th.sortable:hover { color: #10B981; }
.th.sort-asc::after  { content: ' ↑'; color: #10B981; }
.th.sort-desc::after { content: ' ↓'; color: #10B981; }

#table-body tr {
  border-bottom: 1px solid #111827;
  transition: background 0.1s;
}
#table-body tr:hover { background: #0F172A; }
#table-body tr.highlighted { background: rgba(16,185,129,0.07); }

#table-body td {
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  color: #D1D5DB;
  white-space: nowrap;
}
#table-body td.mono { font-family: 'JetBrains Mono', monospace; }

/* ── Variant checkbox pills ────────────────────────────────────────────── */
.variant-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid #1F2937;
  font-size: 0.74rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: #9CA3AF;
}
.variant-checkbox-label:hover { border-color: #374151; color: #D1D5DB; }
.variant-checkbox-label input { display: none; }
.variant-checkbox-label.checked {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.4);
  color: #10B981;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer-link {
  color: #6B7280;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-link:hover { color: #10B981; }

/* ── Light mode overrides ──────────────────────────────────────────────── */

/* — Global text colour fixes (Tailwind utilities → readable light-mode values) — */
html:not(.dark) .text-white   { color: #111827; }
html:not(.dark) .text-gray-100,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-300 { color: #374151; }
html:not(.dark) .text-gray-400 { color: #4B5563; }
html:not(.dark) .text-gray-500 { color: #6B7280; }
html:not(.dark) .text-gray-600 { color: #4B5563; }

/* — Global border fixes — */
html:not(.dark) .border-gray-800,
html:not(.dark) .border-gray-900 { border-color: #E5E7EB; }
html:not(.dark) .border-gray-700 { border-color: #D1D5DB; }
html:not(.dark) .border-t        { border-color: #E5E7EB; }
html:not(.dark) .border-b        { border-color: #E5E7EB; }

/* — Backgrounds — */
html:not(.dark) body            { background: #F9FAFB; color: #111827; }
html:not(.dark) .section-alt    { background: #F0F4F8; }
html:not(.dark) .chart-card,
html:not(.dark) .stat-card,
html:not(.dark) .controls-bar   { background: #FFFFFF; border-color: #E5E7EB; }
html:not(.dark) .bg-gray-900    { background: #F3F4F6; }
html:not(.dark) thead.bg-gray-900 th { color: #374151; border-color: #E5E7EB; }

/* — Navbar — */
html:not(.dark) nav             { background: rgba(249,250,251,0.95); border-color: #E5E7EB; }
html:not(.dark) nav a           { color: #374151; }
html:not(.dark) nav a:hover     { color: #111827; }
html:not(.dark) .nav-link       { color: #4B5563; }

/* — Toggle buttons — */
html:not(.dark) .btn-group      { background: #F3F4F6; border-color: #E5E7EB; }
html:not(.dark) .btn-toggle     { color: #6B7280; }
html:not(.dark) .btn-toggle:hover { color: #111827; }
html:not(.dark) .btn-toggle.active { background: #E5E7EB; color: #059669; }
html:not(.dark) .select-control { background: #F9FAFB; border-color: #D1D5DB; color: #111827; }

/* — Typography — */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3  { color: #111827; }
html:not(.dark) p   { color: #374151; }
html:not(.dark) .section-title { color: #111827; }
html:not(.dark) .section-sub   { color: #4B5563; }
html:not(.dark) .stat-label    { color: #4B5563; }
html:not(.dark) .chart-note    { color: #6B7280; }
html:not(.dark) .control-label { color: #4B5563; }
html:not(.dark) .stat-num      { color: #059669; }
html:not(.dark) .stat-card     { background: #FFFFFF; border-color: #E5E7EB; }

/* — Table — */
html:not(.dark) #table-body td           { color: #374151; }
html:not(.dark) #table-body tr           { border-bottom-color: #E5E7EB; }
html:not(.dark) #table-body tr:hover     { background: #F3F4F6; }
html:not(.dark) .th                      { color: #374151; border-bottom-color: #E5E7EB; }
html:not(.dark) .overflow-x-auto.rounded-xl { border-color: #E5E7EB; }

/* — Heatmap — */
html:not(.dark) #heatmap-table th        { color: #4B5563; border-bottom-color: #E5E7EB; }
html:not(.dark) #heatmap-table td        { border-bottom-color: #F3F4F6; color: #374151; }
html:not(.dark) #heatmap-table td:first-child { color: #111827; }
html:not(.dark) #heatmap-tbody td        { color: #1F2937; }

/* — Variant pills — */
html:not(.dark) .variant-checkbox-label         { color: #4B5563; border-color: #D1D5DB; }
html:not(.dark) .variant-checkbox-label:hover   { color: #111827; border-color: #9CA3AF; }
html:not(.dark) .variant-checkbox-label.checked { color: #059669; }

/* — Finding pills — */
html:not(.dark) .finding-pill                 { background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.25); }
html:not(.dark) .finding-pill .text-gray-400  { color: #4B5563; }

/* — Buttons — */
html:not(.dark) .btn-secondary        { border-color: #D1D5DB; color: #4B5563; }
html:not(.dark) .btn-secondary:hover  { border-color: #059669; color: #059669; }

/* — Footer — */
html:not(.dark) footer        { border-color: #E5E7EB; }
html:not(.dark) .footer-link  { color: #4B5563; }
html:not(.dark) .footer-link:hover { color: #059669; }

/* — HuggingFace pill in nav — */
html:not(.dark) nav .border-gray-700 { border-color: #D1D5DB; color: #4B5563; }
html:not(.dark) nav .border-gray-700:hover { border-color: #059669; color: #059669; }

/* — Warning/note boxes light mode — */
.ppl-warning-note { color: #A16207; }
html.dark .ppl-warning-note { color: #FDE047; }
.imatrix-note { color: #92400E; }
html.dark .imatrix-note { color: #FCD34D; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1F2937; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #374151; }

/* ── Transitions ───────────────────────────────────────────────────────── */
* { transition-property: background-color, border-color, color;
    transition-duration: 0.15s; }
canvas { transition: none !important; }

/* ── Responsive chart heights ─────────────────────────────────────────────── */
.chart-card { position: relative; }
.chart-card canvas { height: 300px; width: 100%; }
#chart-threads { height: 200px; }
#chart-ppl    { height: 240px; }

@media (max-width: 768px) {
  .chart-card canvas { height: 200px; }
  #chart-threads      { height: 150px; }
  #chart-ppl          { height: 170px; }
}