/* Jean-Paul — Custom styles beyond DaisyUI */

/* ── Base font size bump ─────────────────────────────────────────────── */
html { font-size: 17.6px !important; }
body { font-size: 1rem !important; }
.table td, .table th { font-size: 0.9375rem !important; }
.table-sm td, .table-sm th { font-size: 0.875rem !important; }
.stat-value { font-size: 2rem !important; }
.stat-title { font-size: 0.875rem !important; }
.stat-desc { font-size: 0.8rem !important; }
.card-title { font-size: 1.05rem !important; }
.badge-sm { font-size: 0.8rem !important; }
.text-xs { font-size: 0.8rem !important; }
.text-sm { font-size: 0.9375rem !important; }
pre, code { font-size: 0.875rem !important; }

/* ── Table rows: always single line, scroll horizontally if needed ──── */
.table td, .table th { white-space: nowrap !important; }
/* Exception: tables that need text wrapping (config, etc.) */
.table-wrap td, .table-wrap th { white-space: normal !important; word-break: break-word; }

/* ── Badge/pill styling ──────────────────────────────────────────────── */
/* All badges: ensure readable padding and consistent height */
.badge {
  padding: 0.3em 0.6em !important;
  min-height: unset !important;
  height: auto !important;
  border-radius: 9999px !important; /* default: pill shape */
}

/* Tool and skill badges ONLY get square corners */
.badge-tool, .badge-skill {
  border-radius: 4px !important;
}

/* More opaque badge backgrounds in light themes */
:is([data-theme="nord"], [data-theme="corporate"], [data-theme="lofi"], [data-theme="winter"],
    [data-theme="emerald"], [data-theme="retro"], [data-theme="cmyk"], [data-theme="autumn"]) .badge[class*="bg-info"] { background-color: oklch(var(--in) / 0.2) !important; }
:is([data-theme="nord"], [data-theme="corporate"], [data-theme="lofi"], [data-theme="winter"],
    [data-theme="emerald"], [data-theme="retro"], [data-theme="cmyk"], [data-theme="autumn"]) .badge[class*="bg-success"] { background-color: oklch(var(--su) / 0.2) !important; }
:is([data-theme="nord"], [data-theme="corporate"], [data-theme="lofi"], [data-theme="winter"],
    [data-theme="emerald"], [data-theme="retro"], [data-theme="cmyk"], [data-theme="autumn"]) .badge[class*="bg-base-200"] { background-color: oklch(var(--b3)) !important; }

/* SnapLogic Monitor link on tool calls ────────────────────────────────── */
.sl-monitor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s;
  text-decoration: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  overflow: visible;
  line-height: 1;
}
.sl-monitor-link img {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 3px;
  object-fit: contain;
}
.sl-monitor-link:hover { opacity: 1; }

/* ── Nav active state ────────────────────────────────────────────────── */
.nav-item.active {
  background: oklch(var(--p) / 0.15);
  color: oklch(var(--p));
  font-weight: 600;
}

/* ── Section transitions ─────────────────────────────────────────────── */
.fade-in {
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Modal slide-in ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  animation: fadeIn 0.15s ease;
}

.modal-overlay .modal-box {
  animation: slideIn 0.2s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Loading spinner ─────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.jp-spinner {
  animation: spin 1s linear infinite;
}

/* ── Sparkline bars ──────────────────────────────────────────────────── */
.sparkline-bar {
  transition: height 0.3s ease;
}

/* ── Tool call expand/collapse ───────────────────────────────────────── */
.tool-chevron {
  transition: transform 0.2s ease;
  display: inline-block;
}

.tool-chevron.expanded {
  transform: rotate(90deg);
}

.tool-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tool-detail.expanded {
  max-height: 2000px;
}

/* ── Message navigation blink ────────────────────────────────────────── */
@keyframes blink-arrow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.blink-arrow {
  animation: blink-arrow 1.5s ease-in-out infinite;
}

/* ── Heatmap grid (scheduler) ────────────────────────────────────────── */
.heatmap-grid {
  display: grid;
  grid-template-columns: auto repeat(24, 1fr);
  gap: 2px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.1s ease;
  position: relative;
}

.heatmap-cell:hover {
  transform: scale(1.3);
  z-index: 10;
}

.heatmap-cell.heat-0 { background: oklch(var(--b3)); }
.heatmap-cell.heat-1 { background: oklch(var(--su) / 0.3); }
.heatmap-cell.heat-2 { background: oklch(var(--su) / 0.5); }
.heatmap-cell.heat-3 { background: oklch(var(--su) / 0.7); }
.heatmap-cell.heat-4 { background: oklch(var(--wa) / 0.7); }
.heatmap-cell.heat-5 { background: oklch(var(--er) / 0.7); }

.heatmap-label {
  font-size: 0.65rem;
  color: oklch(var(--bc) / 0.5);
  text-align: right;
  padding-right: 6px;
  white-space: nowrap;
}

.heatmap-hour-label {
  font-size: 0.6rem;
  color: oklch(var(--bc) / 0.4);
  text-align: center;
}

/* ── Toast animations ────────────────────────────────────────────────── */
.toast-item {
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Copy button feedback ────────────────────────────────────────────── */
.copy-btn.copied {
  color: oklch(var(--su));
}

/* ── Scrollbar styling ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc) / 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / 0.3); }

/* ── Detail meta cards: equal height ─────────────────────────────────── */
.detail-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 1024px) { .detail-meta-grid { grid-template-columns: repeat(6, 1fr); } }
.detail-meta-grid > div { display: flex; flex-direction: column; }
.detail-meta-grid > div > div:not(:first-child) { font-size: 0.9375rem; }

/* ── MCP status dots and badges ─────────────────────────────────────── */
.mcp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.mcp-dot.connected { background: oklch(var(--su)); }
.mcp-dot.failed { background: oklch(var(--er)); }
.mcp-dot.needs-auth { background: oklch(var(--wa)); }
.mcp-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; margin-right: 3px; }
.mcp-badge.connected { background: oklch(var(--su) / 0.15); color: oklch(var(--su)); }
.mcp-badge.failed { background: oklch(var(--er) / 0.15); color: oklch(var(--er)); }
.mcp-badge.needs-auth { background: oklch(var(--wa) / 0.15); color: oklch(var(--wa)); }

/* ── Rules drag-and-drop ─────────────────────────────────────────────── */
tr.rule-row[draggable="true"] { cursor: grab; }
tr.rule-row[draggable="true"]:active { cursor: grabbing; }
tr.rule-row.dragging { opacity: 0.3; }
tr.rule-row.drag-over { border-top: 2px solid oklch(var(--su)) !important; }

/* ── Drawer content: pin to viewport when a section needs height constraints ── */
.drawer-content.viewport-pinned {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* ── Skill detail modal layout ──────────────────────────────────────── */
.skill-detail-modal { display: flex; flex-direction: column; max-height: 85vh; overflow: hidden; }
.skill-detail-modal .modal-content { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.skill-scroll-area { flex: 1; overflow-y: auto; min-height: 0; }
.skill-bottom-bar { flex-shrink: 0; border-top: 1px solid oklch(var(--bc) / 0.1); padding-top: 0.75rem; margin-top: 0.75rem; }

/* ── Skill markdown rendering ───────────────────────────────────────── */
.skill-md-content { max-width: none; line-height: 1.6; font-size: 0.875rem; }
.skill-md-content h1 { font-size: 1.125rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.skill-md-content h2 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.25rem; border-bottom: 1px solid oklch(var(--bc) / 0.1); padding-bottom: 0.25rem; }
.skill-md-content h3 { font-size: 0.9375rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
.skill-md-content pre { background: oklch(var(--b2)); border-radius: 0.5rem; padding: 0.75rem; font-size: 0.75rem; overflow-x: auto; margin: 0.5rem 0; }
.skill-md-content code { font-size: 0.75rem; background: oklch(var(--b2)); padding: 0.1rem 0.3rem; border-radius: 0.25rem; }
.skill-md-content pre code { background: none; padding: 0; }
.skill-md-content ul, .skill-md-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.skill-md-content ul { list-style: disc; }
.skill-md-content ol { list-style: decimal; }
.skill-md-content li { margin: 0.15rem 0; }
.skill-md-content p { margin: 0.5rem 0; }
.skill-md-content a { color: oklch(var(--p)); text-decoration: underline; }
.skill-md-content blockquote { border-left: 3px solid oklch(var(--p) / 0.3); padding-left: 0.75rem; margin: 0.5rem 0; color: oklch(var(--bc) / 0.7); }
.skill-md-content table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.8125rem; }
.skill-md-content th, .skill-md-content td { border: 1px solid oklch(var(--bc) / 0.15); padding: 0.35rem 0.5rem; text-align: left; }
.skill-md-content th { font-weight: 600; background: oklch(var(--b2)); }
.skill-md-content hr { border: none; border-top: 1px solid oklch(var(--bc) / 0.1); margin: 1rem 0; }
.skill-md-content strong { font-weight: 600; }

/* ── Diff rendering ────────────────────────────────────────────────── */
.diff-added { background: oklch(var(--su) / 0.15); }
.diff-removed { background: oklch(var(--er) / 0.15); text-decoration: line-through; opacity: 0.7; }
.diff-container { font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; line-height: 1.5; }

/* ── Responsive overrides ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .stats-horizontal { flex-direction: column; }
}