@tailwind base;
@tailwind components;
@tailwind utilities;

@custom-variant dark (&:where(.dark, .dark *));

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500 dark:text-gray-400;

  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200 dark:bg-gray-700;

    &:hover {
      @apply bg-gray-300 dark:bg-gray-600;
    }

    &:not([href]) { /* disabled links */
      @apply text-gray-300 dark:text-gray-600 bg-gray-100 dark:bg-gray-800 cursor-default;
    }

    &.current {
      @apply text-white bg-gray-400 dark:bg-gray-500;
    }
  }

  label {
    @apply inline-block whitespace-nowrap bg-gray-200 dark:bg-gray-700 rounded-lg px-3 py-0.5;

    input {
      @apply bg-gray-100 dark:bg-gray-800 border-none rounded-md;
    }
  }
}

@layer components {
  .ts-control {
    @apply mt-1 w-full rounded-md border-gray-200 shadow-sm border py-1 px-3 focus:border-primary-500 focus:outline-none focus:ring-primary-500 h-9 sm:text-sm sm:leading-6;
  }

  .ts-control input {
    @apply !pr-5 text-sm !m-0;
  }

  .ts-wrapper.plugin-remove_button .item {
    @apply rounded-md;
  }
  .ts-wrapper.multi .ts-control > div {
    @apply p-0 m-0 pl-1;
  }

  .ts-wrapper.plugin-remove_button .item .remove {
    @apply border-none text-lg leading-none py-1 rounded-r-lg;
  }

  .ts-dropdown {
    @apply rounded-md border border-solid border-t border-gray-300;
  }

  .ts-dropdown [data-selectable].option, .ts-dropdown .no-results {
    @apply py-2;
  }
  .ts-dropdown .create:hover, .ts-dropdown .option:hover, .ts-dropdown .active {
    @apply bg-primary-100 text-primary-900;
  }

  .ts-dropdown .spinner {
    @apply h-auto w-auto;
  }

  .ts-dropdown .spinner:after {
    @apply h-5 w-5 border-2 p-0 my-0 inline-block;
  }

  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    print-color-adjust: exact;
  }

}
.pattern-diagonal-lines {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-endless-cloud {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
}
/* Original styles with modifications marked */

perspective-viewer,
perspective-workspace,
perspective-copy-menu,
perspective-export-menu,
perspective-dropdown,
perspective-date-column-style,
perspective-datetime-column-style,
perspective-number-column-style,
perspective-string-column-style {
    /* --- SVG Icon Variables (Unchanged) --- */
    --column-type-integer--mask-image: url(/svg/number-type.svg);
    --column-type-float--mask-image: var(--column-type-integer--mask-image);
    --column-type-string--mask-image: url(/svg/string-type.svg);
    --column-type-date--mask-image: url(/svg/date-type.svg);
    --column-type-boolean--mask-image: url(/svg/boolean-type.svg);
    --column-type-datetime--mask-image: var(--column-type-date--mask-image);
    --column-drag-handle--mask-image: url(/svg/drag-handle.svg);
    --column-radio-on--mask-image: url(/svg/radio-on.svg);
    --column-radio-hover--mask-image: url(/svg/radio-hover.svg);
    --column-radio-off--mask-image: url(/svg/radio-off.svg);
    --column-checkbox-on--mask-image: url(/svg/checkbox-on.svg);
    --column-checkbox-hover--mask-image: url(/svg/checkbox-hover.svg);
    --column-checkbox-off--mask-image: url(/svg/checkbox-off.svg);
    --column-settings-icon--mask-image: url(/svg/column-settings-icon.svg);
    --sort-asc-icon--mask-image: url(/svg/sort-asc-icon.svg);
    --sort-desc-icon--mask-image: url(/svg/sort-desc-icon.svg);
    --sort-col-asc-icon--mask-image: url(/svg/sort-col-asc-icon.svg);
    --sort-col-desc-icon--mask-image: url(/svg/sort-col-desc-icon.svg);
    --sort-abs-asc-icon--mask-image: url(/svg/sort-abs-asc-icon.svg);
    --sort-abs-desc-icon--mask-image: url(/svg/sort-abs-desc-icon.svg);
    --sort-abs-col-asc-icon--mask-image: url(/svg/sort-abs-col-asc-icon.svg);
    --sort-abs-col-desc-icon--mask-image: url(/svg/sort-abs-col-desc-icon.svg);
    --sort-none-icon--mask-image: url(/svg/sort-none-icon.svg);
    --add-expression-icon--mask-image: url(/svg/expression.svg);
    --close-icon--mask-image: url(/svg/close-icon.svg);
    --inactive-column-selector--content: url(/svg/checkbox-unchecked-icon.svg);
    --active-column-selector--content: url(/svg/checkbox-checked-icon.svg);
    --select-arrow-light--background-image: url(/svg/dropdown-selector-light.svg);
    --select-arrow-dark--background-image: url(/svg/dropdown-selector.svg);
    --overflow-hint-icon--content: "!";
    --reset-button-icon--content: "refresh";
    --save-button-icon--content: "save";
    --updating-icon--mask-image: url(/svg/updating.gif);
    --downloading-icon--mask-image: url(/svg/downloading.gif);
    --status-ok-icon--mask-image: url(/svg/status_ok.svg);
    --export-icon--mask-image: url(/svg/export-icon.svg);
    --free-scroll-icon--mask-image: url(/svg/free-scroll-icon.svg);
    --reset-icon--mask-image: url(/svg/revert-icon.svg);
    --copy-icon--mask-image: url(/svg/duplicate-icon.svg);
    --theme-icon--mask-image: url(/svg/theme-icon.svg);
    --drawer-tab-icon--mask-image: url(/svg/drawer-tab.svg);
    --drawer-tab-icon--hover--mask-image: url(/svg/drawer-tab-hover.svg);
    --drawer-tab-inverted-icon--mask-image: url(/svg/drawer-tab-invert.svg);
    --drawer-tab-inverted-icon--hover--mask-image: url(/svg/drawer-tab-invert-hover.svg);
    --plugin--background--pattern: url(/svg/bg-pattern.png); /* Consider removing or adjusting if pattern clashes with solid bg */
    --sidebar--background: var(--plugin--background)
        var(--plugin--background--pattern);

    /* --- Plugin Selector Icons (Unchanged) --- */
    --plugin-selector-candlestick--content: url(/svg/mega-menu-icons-candlestick.svg);
    --plugin-selector-heatmap--content: url(/svg/mega-menu-icons-heatmap.svg);
    --plugin-selector-map-scatter--content: url(/svg/mega-menu-icons-map-scatter.svg);
    --plugin-selector-ohlc--content: url(/svg/mega-menu-icons-ohlc.svg);
    --plugin-selector-sunburst--content: url(/svg/mega-menu-icons-sunburst.svg);
    --plugin-selector-treemap--content: url(/svg/mega-menu-icons-treemap.svg);
    --plugin-selector-x-bar--content: url(/svg/mega-menu-icons-x-bar.svg);
    --plugin-selector-x-y-line--content: url(/svg/mega-menu-icons-x-y-line.svg);
    --plugin-selector-x-y-scatter--content: url(/svg/mega-menu-icons-x-y-scatter.svg);
    --plugin-selector-y-area--content: url(/svg/mega-menu-icons-y-area.svg);
    --plugin-selector-y-bar--content: url(/svg/mega-menu-icons-y-bar.svg);
    --plugin-selector-y-line--content: url(/svg/mega-menu-icons-y-line.svg);
    --plugin-selector-y-scatter--content: url(/svg/mega-menu-icons-y-scatter.svg);
    --plugin-selector-datagrid--content: url(/svg/mega-menu-icons-datagrid.svg);

    /* --- Base Light Theme Styles (Mostly overridden by Dark Theme below) --- */
    color: #161616;
    background-color: transparent; /* Keep transparent for potential layering */
    --icon--color: #161616;
    --inactive--color: #ababab;
    --inactive--border-color: #dadada;
    --root--background: #ffffff; /* Overridden */
    --active--color: #2670a9;
    --error--color: #ff471e;
    --plugin--background: #ffffff; /* Overridden */
    --overflow-hint-icon--color: rgba(0, 0, 0, 0.2);
    --select--background-color: none;
    --column-drop-container--background: none;
    --warning--background: #042121; /* Overridden */
    --warning--color: #fdfffd; /* Overridden */
    --overflow-hint-icon--color: #fdfffd; /* Overridden */
    --column-style-open-button--content: "style";
    --column-style-close-button--content: ">\00a0 style";
    --tree-label-collapse--content: "-";
    --tree-label-expand--content: "+";

    /* --- Toolbar Icons (Unchanged) --- */
    --toolbar-scroll-lock--content: url(/svg/free-scroll-icon.svg);
    --toolbar-scroll-lock-active--content: url(/svg/align-scroll-icon.svg);
    --toolbar-edit-mode--read-only--content: url(/svg/read-only-icon.svg);
    --toolbar-edit-mode--edit--content: url(/svg/editable-icon.svg);
    --toolbar-edit-mode--select-row--content: url(/svg/datagrid-select-row.svg);
    --toolbar-edit-mode--select-column--content: url(/svg/datagrid-select-column.svg);
    --toolbar-edit-mode--select-region--content: url(/svg/datagrid-select-region.svg);
}

perspective-viewer,
perspective-dropdown {
    /* --- Label/Content Variables (Unchanged) --- */
    --group-by-label--content: "Group By";
    --split-by-label--content: "Split By";
    --sort-label--content: "Order By";
    --filter-label--content: "Where";
    --transpose-button--content: "Swap";
    --config-button-icon--content: "configure";
    --all-columns-label--content: "All Columns";
    --untitled--content: "untitled";
    --plugin-name-datagrid--content: "Datagrid";
    --plugin-name-treemap--content: "Treemap";
    --plugin-name-sunburst--content: "Sunburst";
    --plugin-name-heatmap--content: "Heatmap";
    --plugin-name-x-bar--content: "X Bar";
    --plugin-name-y-bar--content: "Y Bar";
    --plugin-name-y-line--content: "Y Line";
    --plugin-name-x-y-line--content: "X/Y Line";
    --plugin-name-x-y-scatter--content: "X/Y Scatter";
    --plugin-name-y-scatter--content: "Y Scatter";
    --plugin-name-y-area--content: "Y Area";
    --plugin-name-ohlc--content: "OHLC";
    --plugin-name-candlestick--content: "Candlestick";
    --column-selector-column-columns--content: "Columns";
    --column-selector-column-x-axis--content: "X Axis";
    --column-selector-column-y-axis--content: "Y Axis";
    --column-selector-column-color--content: "Color";
    --column-selector-column-size--content: "Size";
    --column-selector-column-symbol--content: "Symbol";
    --column-selector-column-label--content: "Label";
    --column-selector-column-tooltip--content: "Tooltip";
    --add-expression-button--content: "New Column";
    --no-results--content: "Invalid Column";
    --datagrid-column-edit-button--content: "Edit";
    --copy-button--content: "Copy";
    --export-button--content: "Export";
    --reset-button--content: "Reset";
    --edit-mode--read-only--content: "Read Only";
    --edit-mode--edit--content: "Text Edit";
    --edit-mode--select-row--content: "Select Row";
    --edit-mode--select-column--content: "Select Column";
    --edit-mode--select-region--content: "Select Region";
    --scroll-lock-toggle--content: "Free Scroll";
    --scroll-lock-alt-toggle--content: "Align Scroll";
    --color-label--content: "Color";
    --format-label--content: "Format";
    --timezone-label--content: "Timezone";
    --date-style-label--content: "Date Style";
    --time-style-label--content: "Time Style";
    --foreground-label--content: "Foreground";
    --background-label--content: "Background";
    --series-label--content: "Series";
    --color-range-label--content: "Color Range";
    --style-label--content: "Style";
    --minimum-integer-digits-label--content: "Minimum Integer Digits";
    --rounding-increment-label--content: "Rounding Increment";
    --notation-label--content: "Notation";
    --use-grouping-label--content: "Use Grouping";
    --sign-display-label--content: "Sign Display";
    --max-value-label--content: "Max Value";
    --rounding-priority-label--content: "Rounding Priority";
    --rounding-mode-label--content: "Rounding Mode";
    --trailing-zero-display-label--content: "Trailing Zero Display";
    --fractional-digits-label--content: "Fractional Digits";
    --significant-digits-label--content: "Significant Digits";
    --year-label--content: "Year";
    --month-label--content: "Month";
    --day-label--content: "Day";
    --weekday-label--content: "Weekday";
    --hour-label--content: "Hour";
    --minute-label--content: "Minute";
    --second-label--content: "Second";
    --fractional-seconds-label--content: "Fractional Seconds";
    --hours-label--content: "12/24 Hours";
    --style-tab-label--content: "Style";
    --attributes-tab-label--content: "Attributes";
    --debug-tab-label--content: "Debug JSON";
}

/* Theme Name Indicator */
perspective-viewer,
perspective-viewer { /* NOTE: Duplicated selector in original, keeping for consistency */
    --theme-name: "Pro Dark Enhanced"; /* Updated theme name */
}

/* --- Dark Theme Overrides for perspective-viewer --- */
perspective-viewer {
    /* --- Layout/Sizing Variables (Unchanged) --- */
    --button--font-size: 16px;
    --config-button--padding: 15px 8px 6px 8px;
    --column-drop-label--font-size: 8px;
    --column-drop-container--padding: 0px;
    --column-selector--width: 20px;
    --column-selector--font-size: 16px;
    --column_type--width: 25px;
    --select--padding: 0px;
    --top-panel-row--display: inline-flex;
    --button--min-width: 33px;

    /* --- Light Theme Defaults (Overridden below) --- */
    /* color: #161616; */
    /* background-color: transparent; */
    /* --icon--color: #161616; */
    /* --inactive--color: #ababab; */
    /* --inactive--border-color: #dadada; */
    /* --root--background: #ffffff; */
    /* --active--color: #2670a9; */
    /* --error--color: #ff471e; */
    /* --plugin--background: #ffffff; */
    /* --overflow-hint-icon--color: rgba(0, 0, 0, 0.2); */
    /* --select--background-color: none; */
    /* --column-drop-container--background: none; */
    /* --warning--background: #042121; */
    /* --warning--color: #fdfffd; */
    /* --select-arrow--background-image: var(--select-arrow-dark--background-image); */
    /* --overflow-hint-icon--color: #fdfffd; */

    /* --- Font (Unchanged) --- */
    font-family: "Inter var", "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    --interface-monospace--font-family: "Inter var", "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

    /* --- d3fc Light Theme Defaults (Overridden below) --- */
    /* --d3fc-y1-label--content: "arrow_upward"; */
    /* --d3fc-y2-label--content: "arrow_downward"; */
    /* --d3fc-treedata-axis--lines: none; */
    /* --d3fc-tooltip--background--color: rgba(155, 155, 155, 0.8); */
    /* --d3fc-tooltip--color: #161616; */
    /* --d3fc-tooltip--border-color: #fff; */
    /* --d3fc-tooltip--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); */
    /* --d3fc-gridline--color: #eaedef; */
    /* --d3fc-axis-ticks--color: #161616; */
    /* --d3fc-axis--lines: #c5c9d0; */
    /* --d3fc-legend--background: var(--plugin--background); */
    /* --d3fc-series: rgba(31, 119, 180, 0.8); */
    /* --d3fc-series-1: #0366d6; ... etc */
    /* --d3fc-full--gradient: linear-gradient(...); */
    /* --d3fc-positive--gradient: linear-gradient(...); */
    /* --d3fc-negative--gradient: linear-gradient(...); */
    /* --rt-pos-cell--color: #338dcd; */
    /* --rt-neg-cell--color: #ff471e; */
    /* --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"; */
    /* --map-element-background: #fff; */
    /* --map-category-1: #0366d6; ... etc */
    /* --map-gradient: linear-gradient(...); */

    /* === Dark Theme Enhancements === */
    background-color: #030712; /* MODIFIED: Set to Tailwind bg-gray-950 */
    color: white;
    --icon--color: white;
    --active--color: #2770a9; /* Keep existing active color */
    --error--color: #ff9485;
    --inactive--color: #61656e; /* Use original dark inactive color */
    --inactive--border-color: #1f2937; /* Use original dark border color (relevant for non-workspace elements) */
    --plugin--background: #030712; /* MODIFIED: Set to Tailwind bg-gray-900 */
    --root--background: #030712; /* MODIFIED: Ensure root matches */
    --modal-target--background: rgba(255, 255, 255, 0.05); /* Keep existing */
    --active--background: rgba(39, 113, 170, 0.5); /* Keep existing */
    --expression--operator-color: #c5c9d0;
    --expression--function-color: #22a0ce;
    --expression--error-color: rgb(255, 136, 136);
    --calendar--filter: invert(1);
    --warning--color: #030712; /* MODIFIED: Warning text color to contrast with new background */
    --warning--background: var(--icon--color); /* White background for warning */
    --select-arrow--background-image: var(--select-arrow-light--background-image); /* Use light arrow on dark bg */
    --code-editor-symbol--color: white;
    --code-editor-literal--color: #7dc3f0;
    --code-editor-operator--color: rgb(23, 166, 123);
    --code-editor-comment--color: rgb(204, 120, 48);
    --code-editor-column--color: #e18ee1;
    --rt-pos-cell--color: #7dc3f0;
    --rt-neg-cell--color: #ff9485;

    /* === d3fc Brand Color Updates === */
    --d3fc-legend--text: #B2B7BD;         /* MODIFIED: Use Neutral Light Gray */
    --d3fc-treedata--labels: #E5E7E9;      /* MODIFIED: Use Neutral Off-White */
    --d3fc-treedata--hover-highlight: #FFFFFF; /* MODIFIED: Use White */
    --d3fc-tooltip--color: #FFFFFF;        /* MODIFIED: Use White text in tooltip */
    --d3fc-axis-ticks--color: #A2A4A4;     /* MODIFIED: Use Neutral Silver */
    --d3fc-axis--lines: #4C5864;          /* MODIFIED: Use Neutral Slate Gray */
    --d3fc-gridline--color: #1f2937;       /* MODIFIED: Use Neutral Gray Blue (Subtle) */
    --d3fc-tooltip--background: #1D262F;   /* MODIFIED: Use Primary Dark Slate */
    --d3fc-tooltip--border-color: #31404E; /* MODIFIED: Use Primary Dark Slate */
    --d3fc-legend--background: var(--plugin--background); /* Inherits #030712 */

    /* -- d3fc series colors - Mapped from Brand Palette -- */
    --d3fc-series:   #00B5AD; /* 1. Primary Teal */
    --d3fc-series-1: #00B5AD; /* 1. Primary Teal */
    --d3fc-series-2: #1B9BC2; /* 2. Secondary Blue */
    --d3fc-series-3: #EE6969; /* 3. Secondary Coral */
    --d3fc-series-4: #F7BD63; /* 4. Secondary Yellow */
    --d3fc-series-5: #A06ACD; /* 5. Secondary Purple */
    --d3fc-series-6: #008682; /* 6. Primary Dark Teal */
    --d3fc-series-7: #A2A4A4; /* 7. Neutral Silver */
    --d3fc-series-8: #E5E7E9; /* 8. Neutral Off-White */
    --d3fc-series-9: #4C5864; /* 9. Neutral Slate Gray */
    --d3fc-series-10: #31404E;/* 10. Primary Dark Slate */

    /* -- Gradients - Using Brand Colors -- */
    --d3fc-full--gradient:     linear-gradient(#EE6969 0%, #030712 50%, #00B5AD 100%); /* Coral -> Background -> Teal */
    --d3fc-positive--gradient: linear-gradient(#030712 0%, #00B5AD 100%); /* Background -> Teal */
    --d3fc-negative--gradient: linear-gradient(#EE6969 0%, #030712 100%); /* Coral -> Background */

    /* -- Map Styles (Using Brand Colors) -- */
    --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
    --map-attribution--filter: invert(1) hue-rotate(180deg);
    --map-element-background: #1D262F; /* MODIFIED: Use Primary Dark Slate */
    /* -- Map category colors - Mapped from Brand Palette (matching series) -- */
    --map-category-1:  #00B5AD; /* 1. Primary Teal */
    --map-category-2:  #1B9BC2; /* 2. Secondary Blue */
    --map-category-3:  #EE6969; /* 3. Secondary Coral */
    --map-category-4:  #F7BD63; /* 4. Secondary Yellow */
    --map-category-5:  #A06ACD; /* 5. Secondary Purple */
    --map-category-6:  #008682; /* 6. Primary Dark Teal */
    --map-category-7:  #A2A4A4; /* 7. Neutral Silver */
    --map-category-8:  #E5E7E9; /* 8. Neutral Off-White */
    --map-category-9:  #4C5864; /* 9. Neutral Slate Gray */
    --map-category-10: #31404E; /* 10. Primary Dark Slate */
    /* -- Map Gradient - Using Brand Colors -- */
    --map-gradient: linear-gradient(#EE6969 0%, #030712 50%, #00B5AD 100%); /* Coral -> Background -> Teal */
}

/* --- Dark Theme for Menus/Dropdowns --- */
perspective-copy-menu,
perspective-export-menu,
perspective-dropdown,
perspective-date-column-style,
perspective-datetime-column-style,
perspective-number-column-style,
perspective-string-column-style {
    /* --- Font (Inherited/Unchanged) --- */
    /* font-family: "ui-monospace", ... */

    /* --- Light Theme Defaults (Overridden) --- */
    /* background-color: white; */
    /* border: 1px solid var(--inactive--color); */
    /* border-radius: 0 0 2px 2px; */
    /* color: #161616; */
    /* --icon--color: #161616; */
    /* --inactive--color: #ababab; */
    /* --inactive--border-color: #dadada; */
    /* --root--background: #ffffff; */
    /* --active--color: #2670a9; */
    /* --error--color: #ff471e; */
    /* --plugin--background: #ffffff; */
    /* --warning--background: #042121; */
    /* --warning--color: #fdfffd; */
    /* --select-arrow--background-image: var(--select-arrow-dark--background-image); */

    /* --- Base settings --- */
    border-radius: 0 0 2px 2px; /* Keep rounding */
    --column-style-pos-color--content: "+";
    --column-style-neg-color--content: "-";
    --save-button-icon--content: "save";
    --reset-button-icon--content: "refresh";
    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    --interface-monospace--font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

    /* === Dark Theme Enhancements === */
    background-color: #1f2937; /* MODIFIED: Slightly lighter than main bg (Tailwind bg-gray-800) for menus */
    color: white;
    border: 1px solid #374151; /* MODIFIED: Subtle border (Tailwind border-gray-700) */
    --icon--color: white;
    --active--color: #2770a9; /* Keep existing active */
    --error--color: #ff9485; /* Keep existing error */
    --inactive--color: #61656e; /* Keep existing inactive */
    --inactive--border-color: #4c505b; /* Keep existing inactive border */
    --plugin--background: #1f2937; /* MODIFIED: Match menu background */
    --modal-target--background: rgba(255, 255, 255, 0.05); /* Keep existing */
    --active--background: rgba(39, 113, 170, 0.5); /* Keep existing */
    --expression--operator-color: #c5c9d0;
    --expression--function-color: #22a0ce;
    --expression--error-color: rgb(255, 136, 136);
    --calendar--filter: invert(1);
    --warning--color: #1f2937; /* MODIFIED: Contrast with warning bg */
    --warning--background: var(--icon--color); /* White warning bg */
    --select-arrow--background-image: var(--select-arrow-light--background-image); /* Light arrow */
    --code-editor-symbol--color: white;
    --code-editor-literal--color: #7dc3f0;
    --code-editor-operator--color: rgb(23, 166, 123);
    --code-editor-comment--color: rgb(204, 120, 48);
    --code-editor-column--color: #e18ee1;

    /* Final override for menu background/border */
    background-color: #1f2937; /* MODIFIED: Ensure bg-gray-800 */
    border: 1px solid #374151; /* MODIFIED: Ensure border-gray-700 */
}

/* Host select arrow */
:host select {
    background-image: url(/svg/chevron-down.svg);
    filter: invert(1); /* MODIFIED: Ensure dropdown arrows are visible on dark background */
}

/* Workspace theme indicator */
perspective-workspace,
perspective-workspace, /* NOTE: Duplicated selector in original */
perspective-indicator {
    --theme-name: "Pro Dark Enhanced"; /* Updated theme name */
}

/* Status bar height */
perspective-workspace perspective-viewer {
    --status-bar--height: 39px;
}

/* Style viewer inside workspace when settings are open */
perspective-workspace perspective-viewer[settings] {
    --modal-panel--margin: -4px 0 -4px 0;
    --status-bar--border-radius: 6px 0 0 0;
    --main-column--margin: 3px 0 3px 3px;
    /* MODIFIED: Remove border for cleaner look */
    --main-column--border: none;
    --main-column--border-width: 0px;
    --main-column--border-radius: 6px 0 0 6px;
    --settings-button--margin: 10px 0 0 0;
}

/* --- Workspace Dark Theme Enhancements --- */
perspective-workspace {
    /* --- Font (Unchanged) --- */
    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    /* --- Content/Icon Variables (Unchanged) --- */
    --open-settings-button--content: "expand_more";
    --close-settings-button--content: "expand_less";
    --close-button--content: "\2715";
    --master-divider--background-color: #243136; /* Keep original divider */
    --menu-maximize--content: "fullscreen";
    --menu-minimize--content: "fullscreen_exit";
    --menu-duplicate--content: "call_split";
    --menu-master--content: "cast";
    --menu-detail--content: "notes";
    --menu-export--content: "file_download";
    --menu-copy--content: "file_copy";
    --menu-reset--content: "autorenew";
    --menu-link--content: "link";
    --menu-unlink--content: "link_off";
    --menu-newmenu--content: "add";
    --menu-close--content: "close";
    --menu-new--content: "description";
    --menu-newview--content: "file_copy";
    --column-drag-handle--mask-image: url(/svg/drag-handle.svg);
    --bookmarks--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyNCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zLjY2MjE0IDYuOTY0NzZMMC41IDkuODYzMzhWMC41SDcuNVY5Ljg2MzM4TDQuMzM3ODYgNi45NjQ3Nkw0IDYuNjU1MDVMMy42NjIxNCA2Ljk2NDc2WiIgc3Ryb2tlPSIjRkZGRkZGIi8+CiAgICA8cGF0aCBkPSJNMTkgNEwyMSA2TDIzIDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo="); /* MODIFIED: Changed stroke to white for visibility */

    /* --- Tab Bar Border Removal --- */
    --workspace-tabbar--border: none; /* MODIFIED: Remove border */
    --workspace-tabbar--border-width: 0px; /* MODIFIED: Remove border */
    --workspace-tabbar--border-radius: 0px 0px 6px 6px; /* Keep rounding */
    /* --workspace-tabbar--border-color: var(--inactive--color); */ /* No longer needed */
    --workspace-tabbar-tab--border-width: 1px 1px 0 1px; /* Keep top/side borders for tabs */

    /* --- Background & Color Settings --- */
    /* background-color: #242526; */ /* Overridden below */
    /* --workspace-split-panel-handle--background-color: #242526; */ /* Overridden below */
    /* color: white; */ /* Set below */
    /* --icon--color: white; */ /* Set below */
    /* --active--color: #2770a9; */ /* Set below */
    /* --error--color: #ff9485; */ /* Set below */
    /* --inactive--color: #61656e; */ /* Set below */
    /* --inactive--border-color: #4c505b; */ /* Set below */
    /* --plugin--background: #242526; */ /* Set below */
    /* --modal-target--background: rgba(255, 255, 255, 0.05); */ /* Set below */
    /* --active--background: rgba(39, 113, 170, 0.5); */ /* Set below */
    /* --expression--operator-color: #c5c9d0; */ /* Set below */
    /* --expression--function-color: #22a0ce; */ /* Set below */
    /* --expression--error-color: rgb(255, 136, 136); */ /* Set below */
    /* --calendar--filter: invert(1); */ /* Set below */
    /* --warning--color: #242526; */ /* Set below */
    /* --warning--background: var(--icon--color); */ /* Set below */
    /* --select-arrow--background-image: var(--select-arrow-light--background-image); */ /* Set below */
    /* --code-editor-symbol--color: white; */ /* Set below */
    /* --code-editor-literal--color: #7dc3f0; */ /* Set below */
    /* --code-editor-operator--color: rgb(23, 166, 123); */ /* Set below */
    /* --code-editor-comment--color: rgb(204, 120, 48); */ /* Set below */
    /* --code-editor-column--color: #e18ee1; */ /* Set below */

    /* === Final Dark Theme Workspace Overrides === */
    background-color: #030712; /* MODIFIED: Set to Tailwind bg-gray-900 */
    color: white;
    --workspace-split-panel-handle--background-color: #030712; /* MODIFIED: Match background */
    --icon--color: white;
    --active--color: #2770a9;
    --error--color: #ff9485;
    --inactive--color: #6b7280; /* MODIFIED: Tailwind gray-500 for better contrast on bg-gray-900 */
    --inactive--border-color: #374151; /* MODIFIED: Tailwind gray-700 for tab borders */
    --plugin--background: #030712; /* MODIFIED: Match background */
    --root--background: #030712; /* MODIFIED: Match background */
    --modal-target--background: rgba(255, 255, 255, 0.05);
    --active--background: rgba(39, 113, 170, 0.5);
    --expression--operator-color: #d1d5db; /* MODIFIED: Tailwind gray-300 */
    --expression--function-color: #22a0ce; /* Keep original blue */
    --expression--error-color: rgb(255, 136, 136);
    --calendar--filter: invert(1);
    --warning--color: #030712; /* Text color for warning */
    --warning--background: var(--icon--color); /* White warning background */
    --select-arrow--background-image: var(--select-arrow-light--background-image);
    --code-editor-symbol--color: white;
    --code-editor-literal--color: #7dc3f0;
    --code-editor-operator--color: rgb(23, 166, 123);
    --code-editor-comment--color: rgb(204, 120, 48);
    --code-editor-column--color: #e18ee1;
    --workspace-tabbar--background-color: #030712; /* MODIFIED: Match main background */
    --workspace-secondary--color: #9ca3af; /* MODIFIED: Tailwind gray-400 */
    --workspace-tabbar--border-color: var(--inactive--border-color); /* Uses #374151 */
    --workspace-tabbar-tab--border-width: 1px 1px 0 1px; /* Keep tab borders */
}

/* Ensure viewer background within master widget matches workspace */
perspective-viewer.workspace-master-widget {
    --plugin--background: #030712; /* MODIFIED: Match workspace background */
}

/* Workspace Menu */
perspective-workspace-menu {
    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    font-weight: 300;
    background: #1f2937 !important; /* MODIFIED: Tailwind bg-gray-800 for menu */
    color: white !important;
    border: 1px solid #374151 !important; /* MODIFIED: Subtle border (Tailwind border-gray-700) */
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 :root {
  color-scheme: light;
  --header-height: 65px; /* Adjust based on your actual header height */
  --filters-height: 68px; /* Adjust based on your actual filters height */
  --subheader-height: 161px; /* Adjust based on your actual subheader height */
}

.dark {
  color-scheme: dark;
}


/* Scrollbar styling with dark/light mode support */
:root {
  /* Light mode variables */
  --scrollbar-thumb-light: rgba(0, 0, 0, 0.3);
  --scrollbar-thumb-hover-light: rgba(0, 0, 0, 0.5);
  --scrollbar-track-light: transparent;

  /* Dark mode variables */
  --scrollbar-thumb-dark: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-hover-dark: rgba(255, 255, 255, 0.5);
  --scrollbar-track-dark: transparent;
}

/* Default scrollbar (light mode) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-light);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-light);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-light);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
  background: var(--scrollbar-track-dark);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-dark);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-dark);
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-light) var(--scrollbar-track-light);
}

.dark * {
  scrollbar-color: var(--scrollbar-thumb-dark) var(--scrollbar-track-dark);
}

input {
  color-scheme: light;
}

.dark input {
  color-scheme: dark;
}

@keyframes slideInFromLeft {
  0% {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
    opacity: 1;
  }
}