@import url("/static_lib/daisyui@5.5.19/daisyui.css");
@import url("/static_lib/daisyui@5.5.19/themes.css");
@import url("/static_lib/notyf@3.10.0/notyf.min.css");
@import url("/static_lib/solid-select@0.16.0/style.css");

/* BODY/HTML SCROLLS FOR VEGA FIX */
body, html{
  overflow-x: hidden;
}

/* CHART LOADING VERTICAL SCROLL FIX */
body{
  overflow: hidden;
  height: 100svh;
}


[data-theme="light"] {
  name: "light";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(95% 0 0);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: #3a81f6;
  --color-primary-content: oklch(93% 0.034 272.788);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(66% 0.12 181.39);
  --color-accent-content: oklch(38% 0.063 188.416);
  /* --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32); */
  --color-neutral: oklch(88% 0.004 286.32);
  --color-neutral-content: oklch(14% 0.005 285.823);
  --color-info: oklab(59% 0.06 -0.2);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklab(81% 0.04 0.17);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

[data-theme="dark"] {
  name: "dark";
  default: false;
  prefersdark: false;
  color-scheme: "dark";
  --color-base-100: oklch(25.33% 0.016 252.42);
  --color-base-200: oklch(23.26% 0.014 253.1);
  --color-base-300: oklch(21.15% 0.012 254.09);
  --color-base-content: oklch(97.807% 0.029 256.847);
  --color-primary: #3b82f6;
  --color-primary-content: oklch(96% 0.018 272.314);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(66% 0.12 181.39);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklab(59% 0.06 -0.2);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklab(81% 0.04 0.17);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* remove daisyui focus border form input elements */
.input {
  &:focus, &:focus-within {
    outline: none;
    outline-offset: 0px;
  }
}
.textarea {
  &:focus, &:focus-within {
    outline: none;
    outline-offset: 0px;
  };
}
.select {
  &:focus, &:focus-within {
    outline: none;
    outline-offset: 0px;
  };
  &:hover {
    cursor: pointer;
  };
}

/* input always full width */
.fieldset .input {
  width: 100%;
}

/* max height of modals */
.modal-box {
  max-height: 96vh;
}

/* 'cally' calendar correction for selected and current day */
calendar-month::part(today) {
  background: none;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
calendar-month::part(selected) {
  background: var(--color-primary);
  color: var(--color-primary-content);
}

/* emoji-picker theming */
emoji-picker {
  --background: var(--color-base-100, #ffffff);
  --border-color: var(--color-base-300, #e0e0e0);
  --button-hover-background: var(--color-base-200, #d9d9d9);
  --button-active-background: var(--color-base-300, #cccccc);
  --indicator-color: var(--color-primary, #385ac1);
  --nav-button-size: 2rem;
  --num-columns: 8;
  --emoji-size: 1.375rem;
  --emoji-padding: 0.5rem;
  --outline-color: var(--color-primary, #385ac1);
  --search-icon-filter: none;
  width: 320px;
  height: 300px;
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
}

[data-theme="dark"] emoji-picker,
emoji-picker.dark {
  --background: var(--color-base-100, #222222);
  --border-color: var(--color-base-300, #444444);
  --button-hover-background: var(--color-base-200, #484848);
  --button-active-background: var(--color-base-300, #555555);
  --indicator-color: var(--color-primary, #5373ec);
  --outline-color: var(--color-primary, #5373ec);
  --search-icon-filter: invert(1);
}

/* floatype */
.floatype {
  position: absolute;
  /* background: #f8f8f8; */
  background: var(--color-base-100, #222222);
  /* border: 1px solid #ccc; */
  border: 1px solid var(--color-base-300); /* opacity*/
  /* box-shadow: 2px 2px 2px #eee; */
  box-shadow: 2px 2px 2px var(--color-base-200, #222222);
  text-align: left;
  max-width: 300px;
  max-height: 300px;
  overflow-y: auto;
}
.floatype-item {
  padding-bottom: 5px;
  padding: 3px 10px;
  color: var(--color-base-content);
  cursor: pointer;
}
.floatype-item:hover {
  /* background: #f1f1f1; */
  background: var(--color-base-200, #2a2a2a);
}
.floatype-sel {
  /* background: #f1f1f1; */
  background: var(--color-base-300, #333333);
  font-weight: bold;
}

/* markdown viewer prose styles */
.app-prose {
  line-height: 1.625;
  color: var(--color-base-content);
}

.app-prose h1,
.app-prose h2,
.app-prose h3,
.app-prose h4,
.app-prose h5,
.app-prose h6 {
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.app-prose h1 { font-size: 1.875rem; }
.app-prose h2 { font-size: 1.5rem; }
.app-prose h3 { font-size: 1.25rem; }
.app-prose h4 { font-size: 1.125rem; }

.app-prose p {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.app-prose a {
  color: var(--color-primary);
  text-decoration: underline;
}

.app-prose strong { font-weight: 600; }

.app-prose code {
  background: var(--color-base-200);
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.app-prose pre {
  background: var(--color-base-200);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.app-prose pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.875em;
}

.app-prose blockquote {
  border-left: 3px solid var(--color-base-300);
  padding-left: 1rem;
  margin: 0.75em 0;
  color: var(--color-base-content/60);
}

.app-prose ul,
.app-prose ol {
  padding-left: 1.5em;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.app-prose ul { list-style-type: disc; }
.app-prose ol { list-style-type: decimal; }

.app-prose li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.app-prose hr {
  border: none;
  border-top: 1px solid var(--color-base-300);
  margin: 1.5em 0;
}

.app-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.app-prose th,
.app-prose td {
  border: 1px solid var(--color-base-300);
  padding: 0.5rem 0.75rem;
}

.app-prose th {
  background: var(--color-base-200);
  font-weight: 600;
}

.app-prose img {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
}

/* ========================================================
   FIX LIGHT/DARK REHYPE-MERMAID FILTER TRANSITION
   ======================================================== */

/* When the system is toggled to DARK mode */
html[data-theme="dark"] div[data-testid="MdViewer"] svg[id^="mermaid-"] {
  /* 1. Inverts the layout colors cleanly */
  /* 2. Hue-rotate prevents blues/pinks from getting completely distorted */
  /* filter: invert(0.9) hue-rotate(180deg) !important; */
}

/* Fix text fading or rendering issues after inversion */
html[data-theme="dark"] div[data-testid="MdViewer"] svg[id^="mermaid-"] text,
html[data-theme="dark"] div[data-testid="MdViewer"] svg[id^="mermaid-"] tspan {
  /* text-rendering: optimizeLegibility; */
}

/* HIDE MERMAID ERRORS */
/* [id^="dmermaid-svg"] {
  display: none;
} */

/* Vega-Lite chart container — make SVG responsive */
.app-prose pre.vega {
  background: var(--color-base-100) !important;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

.app-prose pre.vega svg {
  max-width: 100%;
  height: auto;
  display: block;
  background-color: var(--color-base-200) !important;
}

/* Vega-Lite embed container — fills parent for responsive sizing */
.vega-embed-container {
  width: 100%;
}

/* Dark mode overrides for Vega SVGs — applied when container has data-theme="dark" */
.vega-embed-container[data-theme="dark"] svg text,
.vega-embed-container[data-theme="dark"] svg tspan {
  fill: #e4e4e7 !important;
}

.vega-embed-container[data-theme="dark"] svg line,
.vega-embed-container[data-theme="dark"] svg path.grid,
.vega-embed-container[data-theme="dark"] svg path.axis {
  stroke: #52525b !important;
}

.vega-embed-container[data-theme="dark"] svg rect.background {
  fill: var(--color-base-200) !important;
}

.vega-embed .vega-actions::after,
.vega-embed .vega-actions::before {
  right: 5px !important;
}
.vega-actions {
  right: 0 !important;
}

/*infographic width fix*/
.infographic-container {
  max-width: 758px;
}

/* regular-table theming */
regular-table table {
  background: var(--color-base-100);
  color: var(--color-base-content);
}

regular-table th {
  background: var(--color-base-200);
  color: var(--color-base-content);
  border-bottom: 2px solid var(--color-base-300);
}

regular-table td {
  color: var(--color-base-content);
  border-bottom: 1px solid var(--color-base-300);
}

regular-table tbody tr:nth-child(even) td {
  background: var(--color-base-200);
}

regular-table tbody tr:hover td{
  background: var(--color-base-300) !important;
  color: var(--color-base-content) !important;
}