/* Comments Pipeline panel.
   Components and the default (light) theme come from daisyUI: <html data-theme="valentine">,
   daisyUI's built-in pink theme, matching the project logo. This file only adds:
     1. "valentine-dark" — the custom dark variant (same daisyUI theme variables a
        `@plugin "daisyui/theme" { ... }` block would set; declared as CSS because the
        panel uses the CDN build and has no Tailwind build step),
     2. fonts (Vazirmatn for Persian),
     3. the few bits daisyUI has no component for: the
        formatted prompt view. */

/* light theme: daisyUI's valentine with white surfaces, near-black text and the lightest
   logo pink only for borders */
[data-theme="valentine"] {
  --color-base-100: #ffffff;                     /* cards */
  --color-base-200: #ffffff;                     /* page */
  --color-base-300: #f3cfdc;                     /* borders, so white cards still show on the white page */
  --color-base-content: #111111;                 /* near-black text (white in the dark theme) */
  --color-neutral: #262626;
  --color-neutral-content: #ffffff;
}

[data-theme="valentine-dark"] {
  /* black base (the logo's background), white text, and three accents taken from the logo:
     the lightest pink of the bow/ears, a soft yellow, and plain white. */
  color-scheme: dark;
  --color-base-100: #0a0a0a;
  --color-base-200: #000000;
  --color-base-300: #1f1f1f;
  --color-base-content: #ffffff;
  --color-primary: #f9c9d6;                      /* lightest logo pink */
  --color-primary-content: #0a0a0a;
  --color-secondary: #f5d76e;                    /* yellow */
  --color-secondary-content: #0a0a0a;
  --color-accent: #ffffff;                       /* white */
  --color-accent-content: #0a0a0a;
  --color-neutral: #262626;
  --color-neutral-content: #ffffff;
  --color-info: #f9c9d6;
  --color-info-content: #0a0a0a;
  --color-success: #cfe8c9;
  --color-success-content: #0a0a0a;
  --color-warning: #f5d76e;
  --color-warning-content: #0a0a0a;
  --color-error: #ee5c8c;                        /* the logo's hot pink */
  --color-error-content: #0a0a0a;
  --radius-selector: 1rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

@font-face { font-family: "Vazirmatn"; src: url("/fonts/vazirmatn-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Vazirmatn"; src: url("/fonts/vazirmatn-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body.fa { font-family: "Vazirmatn", Tahoma, sans-serif; }


/* formatted prompt view */
.prompt-body { font-size: 13.5px; line-height: 1.8; max-height: 70vh; overflow: auto; }
.prompt-body h2, .prompt-body h3, .prompt-body h4 { font-weight: 700; margin: 18px 0 6px; }
.prompt-body h2 { font-size: 1.05rem; }
.prompt-body h3, .prompt-body h4 { font-size: 0.95rem; }
.prompt-body h2:first-child, .prompt-body h3:first-child { margin-top: 0; }
.prompt-body p { margin: 0 0 8px; }
.prompt-body ul, .prompt-body ol { margin: 0 0 10px; padding-inline-start: 22px; }
.prompt-body ul { list-style: disc; }
.prompt-body ol { list-style: decimal; }
.prompt-body li { margin-bottom: 3px; }
.prompt-body hr { margin: 14px 0; }
.prompt-body pre { font-size: 12px; line-height: 1.5; overflow: auto; direction: ltr; text-align: left; }
.prompt-body .placeholder { font-weight: 700; font-family: ui-monospace, Menlo, monospace; }

/* ---- text that sits on white: daisyUI's soft colours are too pale to read at small sizes */
.text-primary-strong { color: var(--color-primary); }
[data-theme="valentine"] .text-primary-strong { color: #be185d; }
[data-theme="valentine"] .badge-soft.badge-success { color: #166534; }
[data-theme="valentine"] .badge-soft.badge-error { color: #991b1b; }
[data-theme="valentine"] .badge-soft.badge-primary { color: #9d174d; }
[data-theme="valentine"] .text-error { color: #b91c1c; }
.alert-soft { color: var(--color-base-content) !important; }
.delta-good { color: #15803d; }
.delta-bad { color: #b91c1c; }
[data-theme="valentine-dark"] .delta-good { color: #86efac; }
[data-theme="valentine-dark"] .delta-bad { color: #fca5a5; }

/* ---- navigation */
.nav-link[aria-current="page"], .nav-on, .menu a[aria-current="page"] { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ---- summary tiles */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-box); padding: 14px 16px; }
.meter { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); margin-top: 4px; }
.meter > div { height: 100%; border-radius: 2px; background: var(--color-primary); }

/* ---- charts: one hue, thin marks, recessive axes */
.bars { display: flex; align-items: flex-end; gap: 2px; height: calc(var(--h) + 42px); }
.bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; border-radius: 4px; }
.bar-col:hover, .bar-col:focus-visible { background: color-mix(in srgb, var(--color-primary) 8%, transparent); outline: none; }
.bar { width: min(70%, 34px); background: var(--color-primary); border-radius: 4px 4px 0 0; }
.bar-value { font-size: 11px; min-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-label { font-size: 10px; opacity: .7; margin-top: 4px; height: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-line { stroke: var(--color-base-300); stroke-width: 1; }
.axis-text { fill: currentColor; opacity: .7; font-size: 10px; }
.value-text { fill: currentColor; font-size: 11px; font-weight: 600; }
.series-line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; }
.series-dot { fill: var(--color-primary); stroke: var(--color-base-100); stroke-width: 2; }
.heat td { background: color-mix(in srgb, var(--color-primary) var(--a), transparent); }
.heat td.heat-strong { color: #000000; }
.tabs .tab:not(.tab-active) { color: color-mix(in srgb, var(--color-base-content) 72%, transparent) !important; opacity: 1; }
.chart-tip { position: fixed; z-index: 95; display: none; pointer-events: none; max-width: 280px; padding: 4px 8px; font-size: 12px; border-radius: 6px; background: var(--color-neutral); color: var(--color-neutral-content); }

/* ---- small screens: a table may scroll inside its card, the page itself never does */
html, body { overflow-x: clip; }
.card, .card-body { min-width: 0; }

/* ---- print: the report without the app around it */
@media print {
  #nav, .no-print, .toast { display: none !important; }
  main { max-width: none !important; padding: 0 !important; }
  .card, .kpi { break-inside: avoid; box-shadow: none !important; }
  .issue-row.hidden { display: table-row !important; }
}

/* paged tables print in full: every row, no pager */
@media print { tr[hidden] { display: table-row !important; } [data-pager] { display: none !important; } }

/* One look for secondary buttons: a plain or outline button wears the same thin grey border as the fields
   (not white-on-white, not a black outline). Primary, ghost, link and coloured buttons keep their own. */
.btn:not(.btn-ghost):not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-error):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-neutral):not(.btn-disabled):not(:disabled):not(.join-item.btn-active) {
  border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}
.btn-outline.btn-error { border-color: var(--color-error); }