/* GitHub-style diff display */
.diff-container {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 20px;
  background: #f6f8fa;
  border-radius: 8px;
  overflow: hidden;
}

.diff-container .diff {
  margin: 0;
  background: transparent;
}

.diff-container .diff ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.diff-container .diff li {
  padding: 0 10px 0 44px;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  position: relative;
  border-left: 1px solid #d1d9e0;
}

.diff-container .diff li:before {
  content: attr(data-line-number);
  position: absolute;
  left: 10px;
  width: 24px;
  text-align: right;
  color: #656d76;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.diff-container .diff .del {
  background-color: #ffebe9;
  color: #1f2328;
}

.diff-container .diff .del:before {
  content: "-";
  color: #d1242f;
}

.diff-container .diff .ins {
  background-color: #dafbe1;
  color: #1f2328;
}

.diff-container .diff .ins:before {
  content: "+";
  color: #0969da;
}

.diff-container .diff .unchanged {
  background-color: #ffffff;
  color: #656d76;
}

.diff-container .diff .del strong {
  background-color: #ffd8d3;
  color: #d1242f;
  font-weight: 600;
}

.diff-container .diff .ins strong {
  background-color: #abf2bc;
  color: #0969da;
  font-weight: 600;
}

/* Dark mode styles */
.dark .diff-container {
  background: #161b22;
}

.dark .diff-container .diff ul {
  background: #0d1117;
}

.dark .diff-container .diff li {
  border-left-color: #30363d;
}

.dark .diff-container .diff li:before {
  color: #7d8590;
}

.dark .diff-container .diff .del {
  background-color: #67060c;
  color: #f0f6fc;
}

.dark .diff-container .diff .del:before {
  color: #ff7b72;
}

.dark .diff-container .diff .ins {
  background-color: #033a16;
  color: #f0f6fc;
}

.dark .diff-container .diff .ins:before {
  color: #3fb950;
}

.dark .diff-container .diff .unchanged {
  background-color: #0d1117;
  color: #7d8590;
}

.dark .diff-container .diff .del strong {
  background-color: #86181d;
  color: #ff7b72;
}

.dark .diff-container .diff .ins strong {
  background-color: #164929;
  color: #3fb950;
}

/* Header styling */
.diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #f6f8fa;
  border-bottom: 1px solid #d1d9e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #656d76;
}

.dark .diff-header {
  background: #21262d;
  border-bottom-color: #30363d;
  color: #7d8590;
}

.diff-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diff-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.diff-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.diff-stat-additions {
  background-color: #1f883d;
}

.diff-stat-deletions {
  background-color: #d1242f;
}
.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 */

/* --- Base (Light) Theme --- */
perspective-workspace,
perspective-viewer,
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 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 --- */
    color: #161616;
    background-color: #ffffff;
    --icon--color: #008080;
    --inactive--color: #ababab;
    --inactive--border-color: #dadada;
    --root--background: #ffffff;
    --active--color: #008080;       /* teal as main accent */
    --error--color: #e57373;        /* red ONLY for errors */
    --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;
    --overflow-hint-icon--color: #fdfffd;
    --column-style-open-button--content: "style";
    --column-style-close-button--content: ">\00a0 style";
    --tree-label-collapse--content: "-";
    --tree-label-expand--content: "+";

    /* --- Patterned Sidebar Background --- */
    --plugin--background--pattern: url(/svg/bg-pattern.png);
    --sidebar--background: var(--plugin--background);

    /* --- 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);

    /* --- Additional Styles for Light Mode --- */
    --rt-pos-cell--color: #008080;
    --rt-neg-cell--color: #7a0505; /* changed from red to blue */
    --d3fc-legend--text: #61656e;
    --d3fc-treedata--labels: #161616;
    --d3fc-treedata--hover-highlight: #2670a9;
    --d3fc-tooltip--color: #161616;
    --d3fc-axis-ticks--color: #61656e;
    --d3fc-axis--lines: #dadada;
    --d3fc-gridline--color: #dadada;
    --d3fc-tooltip--background: #ffffff;
    --d3fc-tooltip--border-color: #dadada;
    --d3fc-legend--background: var(--plugin--background);
    --d3fc-series:   #008080;
    --d3fc-series-1: #008080;
    --d3fc-series-2: #1febe1;
    --d3fc-series-3: #ff0404;
    --d3fc-series-4: #e18ee1;
    --d3fc-series-5: #61656e;
    --d3fc-series-6: #F7BD63;
    --d3fc-series-7: #000dff;
    --d3fc-series-8: #f16603;
    --d3fc-series-9: #11f009;
    --d3fc-full--gradient:     linear-gradient(#EE6969 0%, #ffffff 50%, #008080 100%);
    --d3fc-positive--gradient: linear-gradient(#ffffff 0%, #008080 100%);
    --d3fc-negative--gradient: linear-gradient(#EE6969 0%, #ffffff 100%);
    --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
    --map-attribution--filter: none;
    --map-element-background: #ffffff;
    --map-category-1:  #008080;
    --map-category-2:  #1febe1;
    --map-category-3:  #ff0404;
    --map-category-4:  #e18ee1;
    --map-category-5:  #61656e;
    --map-category-6:  #F7BD63;
    --map-category-7:  #000dff;
    --map-category-8:  #f16603;
    --map-category-9:  #11f009;
    --map-category-10: #ee0d7e;
    --map-gradient: linear-gradient(#EE6969 0%, #ffffff 50%, #008080 100%);
}

perspective-viewer,
perspective-dropdown {
    /* --- Label/Content Variables (Unchanged) --- */
    --group-by-label--content: "Group By / Rows";
    --split-by-label--content: "Split By / Columns";
    --sort-label--content: "Sort by";
    --filter-label--content: "Filters";
    --transpose-button--content: "Swap";
    --config-button-icon--content: "configure";
    --all-columns-label--content: "All Columns / Values";
    --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 / Values";
    --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";
}

/* --- Light 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 {
    border-radius: 0 0 2px 2px;
    --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;
    background-color: #ffffff;
    color: #161616;
    border: 1px solid #dadada;
    --icon--color: #008080;
    --active--color: #008080;
    --error--color: #e57373;
    --expression--function-color: #008080;
    --expression--error-color: #e57373;
    --code-editor-literal--color: #008080;
    --code-editor-operator--color: #22a0ce;
}

/* Host select arrow (light) */
:host select {
    background-image: url(/svg/chevron-down.svg);
    filter: none;
}

/* Workspace theme indicator (light) */
perspective-workspace,
perspective-indicator {
    --theme-name: "Pro Light Enhanced";
}

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

/* Style viewer inside workspace when settings are open (shared) */
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;
    --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 Light Theme Enhancements --- */
perspective-workspace {
    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    --open-settings-button--content: "expand_more";
    --close-settings-button--content: "expand_less";
    --close-button--content: "\2715";
    --master-divider--background-color: #dadada;
    --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,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyNCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zLjY2MjE0IDYuOTY0NzZMMC41IDkuODYzMzhWMC41SDcuNVY5Ljg2MzM4TDQuMzM3ODYgNi45NjQ3Nkw0IDYuNjU1MDVMMy42NjIxNCA2Ljk2NDc2WiIgc3Ryb2tlPSIjMTYxNjE2Ii8+CiAgICA8cGF0aCBkPSJNMTkgNEwyMSA2TDIzIDQiIHN0cm9rZT0iIzE2MTYxNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=");

    --workspace-tabbar--border: 1px solid #dadada;
    --workspace-tabbar--border-width: 1px;
    --workspace-tabbar--border-radius: 0px 0px 6px 6px;
    --workspace-tabbar-tab--border-width: 1px 1px 0 1px;

    background-color: #ffffff;
    color: #161616;
    --workspace-split-panel-handle--background-color: #ffffff;
    --icon--color: #008080;
    --active--color: #008080;
    --error--color: #e57373;
    --expression--function-color: #008080;
    --expression--error-color: #e57373;
    --code-editor-literal--color: #008080;
    --code-editor-operator--color: #22a0ce;
    --workspace-tabbar--background-color: #ffffff;
    --workspace-secondary--color: #61656e;
    --workspace-tabbar--border-color: #dadada;
}

/* Ensure viewer background within master widget matches workspace (light) */
perspective-viewer.workspace-master-widget {
    --plugin--background: #ffffff;
}

perspective-viewer {
    --icon--color: #008080;
}
perspective-workspace-menu {
    --icon--color: #008080;
}

/* Workspace Menu (light) */
perspective-workspace-menu {
    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    font-weight: 300;
    background: #ffffff !important;
    color: #161616 !important;
    border: 1px solid #dadada !important;
}

/* --- DARK THEME OVERRIDES --- */
.dark perspective-workspace,
.dark perspective-copy-menu,
.dark perspective-export-menu,
.dark perspective-dropdown,
.dark perspective-date-column-style,
.dark perspective-datetime-column-style,
.dark perspective-number-column-style,
.dark perspective-string-column-style {
    color: white;
    background-color: #030712;
    --icon--color: white;
    --inactive--color: #61656e;
    --inactive--border-color: #1f2937;
    --root--background: #030712;
    --active--color: #2770a9;
    --error--color: #ff9485;
    --plugin--background: #030712;
    --overflow-hint-icon--color: rgba(0, 0, 0, 0.2);
    --select--background-color: none;
    --column-drop-container--background: none;
    --warning--background: var(--icon--color);
    --warning--color: #030712;
    --overflow-hint-icon--color: #fdfffd;
    --column-style-open-button--content: "style";
    --column-style-close-button--content: ">\00a0 style";
    --tree-label-collapse--content: "-";
    --tree-label-expand--content: "+";
    /* Toolbar Icons and plugin selectors unchanged */
}

/* Dark theme viewer and dropdown rules consolidated above */

.dark perspective-viewer,
.dark perspective-viewer { /* duplicated for consistency */
    --theme-name: "Pro Dark Enhanced";
}

.dark perspective-viewer {
    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;
    background-color: #030712;
    color: white;
    --icon--color: white;
    --active--color: #2770a9;
    --error--color: #ff9485;
    --inactive--color: #61656e;
    --inactive--border-color: #1f2937;
    --plugin--background: #030712;
    --root--background: #030712;
    --modal-target--background: rgba(255, 255, 255, 0.05);
    --active--background: rgba(39, 113, 170, 0.5);
    --expression--operator-color: #c5c9d0;
    --expression--function-color: #22a0ce;
    --expression--error-color: rgb(255, 136, 136);
    --calendar--filter: invert(1);
    --warning--color: #030712;
    --warning--background: var(--icon--color);
    --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;
    --rt-pos-cell--color: #7dc3f0;
    --rt-neg-cell--color: #ff9485;
    /* d3fc and map colors as in your dark theme */
    --d3fc-legend--text: #B2B7BD;
    --d3fc-treedata--labels: #E5E7E9;
    --d3fc-treedata--hover-highlight: #FFFFFF;
    --d3fc-tooltip--color: #FFFFFF;
    --d3fc-axis-ticks--color: #A2A4A4;
    --d3fc-axis--lines: #4C5864;
    --d3fc-gridline--color: #1f2937;
    --d3fc-tooltip--background: #1D262F;
    --d3fc-tooltip--border-color: #31404E;
    --d3fc-legend--background: var(--plugin--background);
    --d3fc-series:   #00B5AD;
    --d3fc-series-1: #14B8A6;
    --d3fc-series-2: #3B82F6;
    --d3fc-series-3: #EF4444;
    --d3fc-series-4: #A855F7;
    --d3fc-series-5: #D1D5DB;
    --d3fc-series-6: #FBBF24;
    --d3fc-series-7: #22C55E;
    --d3fc-series-8: #FB923C;
    --d3fc-series-9: #0707f3;
    --d3fc-series-10: #F472B6;
    --d3fc-full--gradient:     linear-gradient(#EE6969 0%, #030712 50%, #00B5AD 100%);
    --d3fc-positive--gradient: linear-gradient(#030712 0%, #00B5AD 100%);
    --d3fc-negative--gradient: linear-gradient(#EE6969 0%, #030712 100%);
    --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;
    --map-category-1:  #14B8A6;
    --map-category-2:  #3B82F6;
    --map-category-3:  #EF4444;
    --map-category-4:  #A855F7;
    --map-category-5:  #D1D5DB;
    --map-category-6:  #FBBF24;
    --map-category-7:  #22C55E;
    --map-category-8:  #fb3cbe;
    --map-category-9:  #0410ee;
    --map-category-10: #ccf000;
    --map-gradient: linear-gradient(#EE6969 0%, #030712 50%, #00B5AD 100%);
}

.dark perspective-copy-menu,
.dark perspective-export-menu,
.dark perspective-dropdown,
.dark perspective-date-column-style,
.dark perspective-datetime-column-style,
.dark perspective-number-column-style,
.dark perspective-string-column-style {
    background-color: #1f2937;
    color: white;
    border: 1px solid #374151;
    --icon--color: white;
    --active--color: #2770a9;
    --error--color: #ff9485;
    --inactive--color: #61656e;
    --inactive--border-color: #4c505b;
    --plugin--background: #1f2937;
    --modal-target--background: rgba(255, 255, 255, 0.05);
    --active--background: rgba(39, 113, 170, 0.5);
    --expression--operator-color: #c5c9d0;
    --expression--function-color: #22a0ce;
    --expression--error-color: rgb(255, 136, 136);
    --calendar--filter: invert(1);
    --warning--color: #1f2937;
    --warning--background: var(--icon--color);
    --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;
}

.dark :host select {
    background-image: url(/svg/chevron-down.svg);
    filter: invert(1);
}

.dark perspective-workspace,
.dark perspective-indicator {
    --theme-name: "Pro Dark Enhanced";
}

.dark perspective-workspace {
    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    --open-settings-button--content: "expand_more";
    --close-settings-button--content: "expand_less";
    --close-button--content: "\2715";
    --master-divider--background-color: #243136;
    --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=");
    --workspace-tabbar--border: none;
    --workspace-tabbar--border-width: 0px;
    --workspace-tabbar--border-radius: 0px 0px 6px 6px;
    --workspace-tabbar-tab--border-width: 1px 1px 0 1px;
    background-color: #030712;
    color: white;
    --workspace-split-panel-handle--background-color: #030712;
    --icon--color: white;
    --active--color: #2770a9;
    --error--color: #ff9485;
    --inactive--color: #6b7280;
    --inactive--border-color: #374151;
    --plugin--background: #030712;
    --root--background: #030712;
    --modal-target--background: rgba(255, 255, 255, 0.05);
    --active--background: rgba(39, 113, 170, 0.5);
    --expression--operator-color: #d1d5db;
    --expression--function-color: #22a0ce;
    --expression--error-color: rgb(255, 136, 136);
    --calendar--filter: invert(1);
    --warning--color: #030712;
    --warning--background: var(--icon--color);
    --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;
    --workspace-secondary--color: #9ca3af;
    --workspace-tabbar--border-color: var(--inactive--border-color);
    --workspace-tabbar-tab--border-width: 1px 1px 0 1px;
}

.dark perspective-viewer.workspace-master-widget {
    --plugin--background: #030712;
}

.dark perspective-workspace-menu {
    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    font-weight: 300;
    background: #1f2937 !important;
    color: white !important;
    border: 1px solid #374151 !important;
}
/*
 * 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 */
}

button {
  &:hover {
    cursor: pointer;
  }
}

.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;
  }
}

.marksmith-editor-wrapper {
  outline: green 2px solid !important;
}