@import 'maplibre-gl/dist/maplibre-gl.css';
@import '@vuepic/vue-datepicker/dist/main.css';
@import "tailwindcss" source(none);
@source "../src";
@source "../src/**/*.cfm";
@source "../views";
@source "../views/**/*.cfm";
@source "../js";
@source "../*.cfm";


@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  prefix: "d-";
  themes: light --default, nord, silk, dark, forest, dracula;
}

/* https://daisyui.com/docs/themes/ */
@plugin "daisyui/theme" {
  name: "light";
  color-scheme: light;

  --color-primary: rgb(0, 55, 250);
  --color-primary-content: var(--color-white);
  --color-secondary: rgb(249, 115, 22);
  --color-secondary-content: var(--color-white);
  --color-info: rgb(35, 181, 225);
  --color-success: rgb(26, 179, 138);
  --color-success-content: var(--color-black);
  --color-warning: rgb(248, 172, 89);
  --color-warning-content: var(--color-black); 
  --color-error: rgb(238, 109, 126);
  --color-error-content: var(--color-black);

  --radius-selector: 0.5rem;
  --radius-field: 0.3rem;
  --radius-box: 0.3rem;
}

@plugin "daisyui/theme" {
  name: "dark";
  color-scheme: dark;

  --color-primary: rgb(96, 93, 255);
  --color-primary-content: var(--color-white);

  --color-secondary: rgb(249, 115, 22);
  --color-secondary-content: var(--color-white);
  
  --color-accent: rgb(53, 64, 82);
  --color-accent-content: var(--color-white);
  
  --color-success: rgb(26, 179, 138);
  --color-success-content: var(--color-black);
  --color-warning: rgb(248, 172, 89);
  --color-warning-content: var(--color-black);
  --color-error: rgb(238, 109, 126);
  --color-error-content: var(--color-black);

  --radius-selector: 0.5rem;
  --radius-field: 0.3rem;
  --radius-box: 0.3rem;
}

@font-face {
  font-family: "Inter";
  src: url(./fonts/Inter-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url(./fonts/Inter-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url(./fonts/Inter-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url(./fonts/Inter-Light.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: normal;
}

body {
  margin: 0px;
}

.ag-root-wrapper .ag-row.row-success.ag-row-odd {
  background-color: color-mix(in srgb, var(--color-success) 85%, transparent);
  color: var(--color-success-content);
}

.ag-root-wrapper .ag-row.row-success.ag-row-even {
  background-color: color-mix(in srgb, var(--color-success) 70%, transparent);
  color: var(--color-success-content);
}

.ag-root-wrapper .ag-row.row-warning.ag-row-odd {
  background-color: color-mix(in srgb, var(--color-warning) 85%, transparent);
  color: var(--color-warning-content);
}

.ag-root-wrapper .ag-row.row-warning.ag-row-even {
  background-color: color-mix(in srgb, var(--color-warning) 70%, transparent);
  color: var(--color-warning-content);
}

.ag-root-wrapper .ag-row.row-error.ag-row-odd {
  background-color: color-mix(in srgb, var(--color-error) 85%, transparent);
  color: var(--color-error-content);
}

.ag-root-wrapper .ag-row.row-error.ag-row-even {
  background-color: color-mix(in srgb, var(--color-error) 70%, transparent);
  color: var(--color-error-content);
}

/*
 * @vuepic/vue-datepicker sets --dp-* on .dp--theme_light / .dp--theme_dark (see dist/main.css).
 * Those rules sit ON the picker root and override inheritance from html, so setting variables
 * only on html had no effect. Re-map --dp-* here with higher specificity so DaisyUI tokens win.
 */
html[data-theme] .dp--theme_light,
html[data-theme] .dp--theme_dark {
  --dp-background-color: var(--color-base-100);
  --dp-text-color: var(--color-base-content);
  --dp-hover-color: var(--color-base-200);
  --dp-hover-text-color: var(--color-base-content);
  --dp-hover-icon-color: var(--color-base-content);
  --dp-icon-color: var(--color-base-content);
  --dp-border-color: var(--color-base-300);
  --dp-menu-border-color: var(--color-base-300);
  --dp-border-color-hover: var(--color-base-300);
  --dp-border-color-focus: var(--color-primary);
  --dp-disabled-color: var(--color-base-200);
  --dp-disabled-color-text: color-mix(in srgb, var(--color-base-content) 50%, transparent);
  --dp-scroll-bar-background: var(--color-base-200);
  --dp-scroll-bar-color: var(--color-base-content);
  --dp-primary-color: var(--color-primary);
  --dp-primary-disabled-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-base-300));
  --dp-primary-text-color: var(--color-primary-content);
  --dp-secondary-color: var(--color-base-300);
  --dp-success-color: var(--color-success);
  --dp-success-color-disabled: color-mix(in srgb, var(--color-success) 60%, var(--color-base-300));
  --dp-danger-color: var(--color-error);
  --dp-tooltip-color: var(--color-base-200);
  --dp-highlight-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --dp-range-between-dates-background-color: var(--color-base-200);
  --dp-range-between-dates-text-color: var(--color-base-content);
  --dp-range-between-border-color: var(--color-base-300);
}

html[data-theme] .dp--cell_offset:not(.dp--cell_disabled) {
  color: color-mix(in srgb, var(--color-base-content) 52%, var(--color-base-300));
}

/*
 * DaisyUI 5 `d-input` is the v5 `.input` component: transparent border + --input-color,
 * inset box-shadow, and outline on focus — not a single 1px stroke. Vue Datepicker’s `.dp--input`
 * adds its own flat border and wins in the cascade, so we re-apply Daisy’s field recipe here.
 * Theme tokens `--border` and `--depth` come from daisyUI `themes.css` on `[data-theme]`.
 *
 * Vue Datepicker’s stylesheet is unlayered; Daisy `d-input-*` font-size lives in @layer utilities,
 * so `.dp--input { font-size: var(--dp-font-size) }` would otherwise stay at the library default
 * (1rem). Set `--dp-font-size` on `.dp--input_wrap` with `:has(.dp--input…)` so the value inherits
 * into sibling calendar/clear icons (`.dp--input_icons` sizes them with that variable), not only
 * the `<input>`. Pass `:ui="{ input: 'd-input d-input-sm w-full' }"` (base `d-input` plus optional
 * `d-input-xs` … `d-input-xl`); default matches `d-input` / `d-input-md`.
 *
 * `--dp-input-icon-padding` / `--dp-input-padding` default to px in the library; they do not track
 * `--dp-font-size`, so the gap between the calendar icon and text drifts across sizes. Re-express
 * them (and `.dp--input_icons` padding) as multiples of `--dp-font-size` (ratios match 16px base).
 */
html[data-theme] .dp--input_wrap:has(.dp--input.d-input) {
  --dp-font-size: max(var(--font-size, 0.875rem), 0.875rem);
  --dp-input-padding:
    calc(var(--dp-font-size) * 0.375)
    calc(var(--dp-font-size) * 1.875)
    calc(var(--dp-font-size) * 0.375)
    calc(var(--dp-font-size) * 0.75);
  --dp-input-icon-padding: calc(var(--dp-font-size) * 2.1875);
  --dp-input-not-clearable-padding: calc(var(--dp-font-size) * 0.75);
}

/*
 * `.dp--input_icons` sets height = --dp-font-size but line-height = 1.5× that value, so the
 * line box is taller than the box `translateY(-50%)` centers — the calendar glyph sits low.
 * Tighten line-height and flex-center the SVG; match the field with a modest line-height.
 * Small upward `translate` tracks `--dp-font-size` (~1px at 1rem, ~0.75px at d-input-sm).
 */
html[data-theme] .dp--input_wrap:has(.dp--input.d-input) .dp--input_icons {
  padding: calc(var(--dp-font-size) * 0.375) calc(var(--dp-font-size) * 0.75);
  box-sizing: content-box;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  translate: 0 calc(var(--dp-font-size) * -0.0625);
}

html[data-theme] .dp--input_wrap:has(.dp--input.d-input) .dp--input_icon:not(.dp--input_icons) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  translate: 0 calc(var(--dp-font-size) * -0.0625);
}

html[data-theme] .dp--input_wrap:has(.dp--input.d-input.d-input-xs) {
  --dp-font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
}

html[data-theme] .dp--input_wrap:has(.dp--input.d-input.d-input-sm) {
  --dp-font-size: max(var(--font-size, 0.75rem), 0.75rem);
}

html[data-theme] .dp--input_wrap:has(.dp--input.d-input.d-input-md) {
  --dp-font-size: max(var(--font-size, 0.875rem), 0.875rem);
}

html[data-theme] .dp--input_wrap:has(.dp--input.d-input.d-input-lg) {
  --dp-font-size: max(var(--font-size, 1.125rem), 1.125rem);
}

html[data-theme] .dp--input_wrap:has(.dp--input.d-input.d-input-xl) {
  --dp-font-size: max(var(--font-size, 1.375rem), 1.375rem);
}

html[data-theme] .dp--input.d-input {
  --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  border: var(--border, 1px) solid transparent;
  border-color: var(--input-color);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-radius: var(--radius-field);
  box-shadow:
    0 1px color-mix(in oklab, var(--input-color) calc(var(--depth, 1) * 10%), transparent) inset,
    0 -1px oklch(100% 0 0 / calc(var(--depth, 1) * 0.1)) inset;
  outline: none;
  font-family: inherit;
  line-height: 1.25;
}

html[data-theme] .dp--input.d-input:hover:not(:disabled):not(.dp--disabled):not(.dp--input_focus) {
  border-color: var(--input-color);
}

html[data-theme] .dp--input.d-input:focus,
html[data-theme] .dp--input.d-input:focus-visible,
html[data-theme] .dp--input.d-input.dp--input_focus {
  --input-color: var(--color-base-content);
  border-color: var(--input-color);
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth, 1) * 10%), transparent) inset;
  outline: 2px solid var(--input-color);
  outline-offset: 2px;
  isolation: isolate;
}

html[data-theme] .dp--input.d-input:disabled,
html[data-theme] .dp--input.d-input.dp--disabled {
  cursor: not-allowed;
  border-color: var(--color-base-200);
  background-color: var(--color-base-200);
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  box-shadow: none;
  outline: none;
}

html[data-theme] .dp--input.d-input:disabled::placeholder,
html[data-theme] .dp--input.d-input.dp--disabled::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}