/**
 * Base styles for SheetRocks Web Platform
 * 
 * Provides foundational styles and resets for the web version
 */
/* Import Open Sans font */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* ========================================
   THEME SYSTEM
   ======================================== */
/* Default theme (SFDX) - no class needed */
:root {
  /* Primary/Accent Colors */
  --theme-primary: #16325c;
  --theme-secondary: #559fdb;
  --theme-accent: #066afe;
  --theme-darker-primary: rgb(19.8, 45, 82.8);
  /* Background Colors */
  --theme-background: #ffffff;
  --theme-background-tint: rgb(229.5, 229.5, 229.5);
  --theme-background-tint-more: rgb(216.75, 216.75, 216.75);
  --theme-background-tint-most: rgb(191.25, 191.25, 191.25);
  --theme-surface: #ffffff;
  --theme-semi-transparent-background: rgba(255, 255, 255, 0.8588235294);
  /* Background variations */
  --theme-background-lighter: white;
  --theme-background-dark: rgb(249.9, 249.9, 249.9);
  --theme-background-darker: rgb(244.8, 244.8, 244.8);
  --theme-background-darkest: rgb(234.6, 234.6, 234.6);
  /* Text Colors */
  --theme-text: #333333;
  --theme-text-strong: rgb(71.4, 71.4, 71.4);
  --theme-text-stronger: rgb(91.8, 91.8, 91.8);
  --theme-text-strongest: rgb(132.6, 132.6, 132.6);
  --theme-text-light: #918f8f;
  --theme-text-lightest: #dbdbdb;
  /* Border Colors */
  --theme-border: #dbdbdb;
  --theme-light-border: #ededed;
  --theme-border-light: rgb(247.8, 247.8, 247.8);
  --theme-border-darker: rgb(214.62, 214.62, 214.62);
  --theme-border-darkest: #918f8f;
  --theme-row-number-border: #c5c5c5;
  /* Functional Colors */
  --theme-header: #dae2f0;
  --theme-header-text: #918f8f;
  --theme-header-selected: #bfd4e5;
  --theme-hover: rgb(249.9, 249.9, 249.9);
  --theme-current-search-result: #8799d7;
  --theme-grid: #a4a4a4;
  --theme-selected-cell-border: #066afe;
  --theme-selected-background: rgba(6, 106, 254, 0.02);
  --theme-selected-background-tinted: rgba(6, 106, 254, 0.08);
  --theme-shelf-background: #f9f9f9;
  --theme-disabled: rgb(116.3333333333, 161.8333333333, 198.6666666667);
  --theme-filtered-header: #cce5ff;
  --theme-filtered-header-selected: #b3d9ff;
  /* Transparent overlays */
  --theme-transparent-contrast: rgba(0, 0, 0, 0.1);
  --theme-transparent-contrast-more: rgba(0, 0, 0, 0.2);
  --theme-close-button-bg: rgba(255, 255, 255, 0.5);
  --theme-close-button-bg-hover: rgba(255, 255, 255, 0.8);
  /* Semantic colors */
  --theme-error: #b71c1c;
  --theme-warning: #97970c;
  /* Font */
  --theme-font-family:
    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  /* Pre-calculated color variations for SCSS compatibility */
  --theme-accent-darker-10: rgb(0.936, 94.536, 233.064);
  --theme-text-light-darker-10: rgb(130.7297297297, 128.4702702703, 128.4702702703);
  --theme-hover-darker-10: rgb(224.91, 224.91, 224.91);
  /* Cell formatting background colors - darker variants */
  --theme-bg-blue-50-darker: rgb(204.6, 231.6, 251.4);
  --theme-bg-blue-100-darker: rgb(166.3166666667, 211.9625, 249.7833333333);
  --theme-bg-blue-700-darker: rgb(23.75, 112.1, 199.5);
  --theme-bg-blue-900-darker: rgb(12.35, 67.45, 152.95);
  --theme-bg-green-50-darker: rgb(215.3772727273, 237.7727272727, 217.1);
  --theme-bg-green-100-darker: rgb(185.21875, 223.28125, 186.4875);
  --theme-bg-green-700-darker: rgb(53.2, 134.9, 57);
  --theme-bg-green-900-darker: rgb(25.65, 89.3, 30.4);
  --theme-bg-yellow-50-darker: rgb(255, 250.975, 206.7);
  --theme-bg-yellow-100-darker: rgb(255, 246.706779661, 173.45);
  --theme-bg-yellow-700-darker: rgb(250.723364486, 187.6429906542, 30.476635514);
  --theme-bg-yellow-900-darker: rgb(244.079338843, 119.9355371901, 10.520661157);
  --theme-bg-orange-50-darker: rgb(255, 233.7290322581, 200.05);
  --theme-bg-orange-100-darker: rgb(255, 215.2837662338, 156.35);
  --theme-bg-orange-700-darker: rgb(232.75, 117.8, 0);
  --theme-bg-orange-900-darker: rgb(218.5, 76.95, 0);
  --theme-bg-red-50-darker: rgb(255, 210.5, 217.175);
  --theme-bg-red-100-darker: rgb(231.938961039, 179.411038961, 184.5357142857);
  --theme-bg-red-700-darker: rgb(202.3047619048, 42.7952380952, 42.7952380952);
  --theme-bg-red-900-darker: rgb(173.85, 26.6, 26.6);
  --theme-bg-pink-50-darker: rgb(249.6, 206.4, 220.8);
  --theme-bg-pink-100-darker: rgb(245.97, 167.28, 194.37);
  --theme-bg-pink-700-darker: rgb(242.25, 0, 121.6);
  --theme-bg-pink-900-darker: rgb(197.6, 0, 105.45);
  --theme-bg-purple-50-darker: rgb(235.1, 211.8833333333, 238.4166666667);
  --theme-bg-purple-100-darker: rgb(217.904494382, 174.6264044944, 225.3235955056);
  --theme-bg-purple-700-darker: rgb(116.85, 29.45, 153.9);
  --theme-bg-purple-900-darker: rgb(70.3, 19, 133);
  --theme-bg-gray-50-darker: rgb(242.25, 242.25, 242.25);
  --theme-bg-gray-100-darker: rgb(232.75, 232.75, 232.75);
  --theme-bg-gray-700-darker: rgb(92.15, 92.15, 92.15);
  --theme-bg-gray-900-darker: rgb(48.45, 48.45, 48.45);
}

/* Light theme - explicit class */
:root.light {
  /* Primary/Accent Colors */
  --theme-primary: #0b7979;
  --theme-secondary: #559fdb;
  --theme-accent: #0b7979;
  --theme-darker-primary: rgb(9.9, 108.9, 108.9);
  /* Background Colors */
  --theme-background: #fcfcfc;
  --theme-background-tint: rgb(226.8, 226.8, 226.8);
  --theme-background-tint-more: rgb(214.2, 214.2, 214.2);
  --theme-background-tint-most: #bdbdbd;
  --theme-surface: #ffffff;
  --theme-semi-transparent-background: rgba(255, 255, 255, 0.8588235294);
  /* Background variations */
  --theme-background-lighter: rgb(254.4, 254.4, 254.4);
  --theme-background-dark: rgb(246.96, 246.96, 246.96);
  --theme-background-darker: rgb(241.92, 241.92, 241.92);
  --theme-background-darkest: rgb(231.84, 231.84, 231.84);
  /* Text Colors */
  --theme-text: #0d0926;
  --theme-text-strong: rgb(25.8063829787, 17.8659574468, 75.4340425532);
  --theme-text-stronger: rgb(38.6127659574, 26.7319148936, 112.8680851064);
  --theme-text-strongest: rgb(64.2255319149, 44.4638297872, 187.7361702128);
  --theme-text-light: #918f8f;
  --theme-text-lightest: #dbdbdb;
  /* Border Colors */
  --theme-border: #dbdbdb;
  --theme-light-border: #ededed;
  --theme-border-light: rgb(247.8, 247.8, 247.8);
  --theme-border-darker: rgb(214.62, 214.62, 214.62);
  --theme-border-darkest: #918f8f;
  --theme-row-number-border: #c5c5c5;
  /* Functional Colors */
  --theme-header: #e0ebeb;
  --theme-header-text: #918f8f;
  --theme-header-selected: #bad8d8;
  --theme-hover: rgb(246.96, 246.96, 246.96);
  --theme-current-search-result: #8799d7;
  --theme-grid: #a4a4a4;
  --theme-selected-cell-border: #0b7979;
  --theme-selected-background: rgba(87, 236, 236, 0.0196078431);
  --theme-selected-background-tinted: rgba(87, 236, 236, 0.0823529412);
  --theme-shelf-background: #f9f9f9;
  --theme-disabled: rgb(121.7916666667, 179.7083333333, 179.7083333333);
  --theme-filtered-header: #ccf1e9;
  --theme-filtered-header-selected: #b5e1d8;
  /* Transparent overlays */
  --theme-transparent-contrast: rgba(0, 0, 0, 0.1);
  --theme-transparent-contrast-more: rgba(0, 0, 0, 0.2);
  --theme-close-button-bg: rgba(255, 255, 255, 0.5);
  --theme-close-button-bg-hover: rgba(255, 255, 255, 0.8);
  /* Semantic colors */
  --theme-error: #b71c1c;
  --theme-warning: #97970c;
  /* Font */
  --theme-font-family:
    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  /* Pre-calculated color variations for SCSS compatibility */
  --theme-accent-darker-10: rgb(9.9, 108.9, 108.9);
  --theme-text-light-darker-10: rgb(130.7297297297, 128.4702702703, 128.4702702703);
  --theme-hover-darker-10: rgb(222.264, 222.264, 222.264);
  /* Cell formatting background colors - darker variants */
  --theme-bg-blue-50-darker: rgb(204.6, 231.6, 251.4);
  --theme-bg-blue-100-darker: rgb(166.3166666667, 211.9625, 249.7833333333);
  --theme-bg-blue-700-darker: rgb(23.75, 112.1, 199.5);
  --theme-bg-blue-900-darker: rgb(12.35, 67.45, 152.95);
  --theme-bg-green-50-darker: rgb(215.3772727273, 237.7727272727, 217.1);
  --theme-bg-green-100-darker: rgb(185.21875, 223.28125, 186.4875);
  --theme-bg-green-700-darker: rgb(53.2, 134.9, 57);
  --theme-bg-green-900-darker: rgb(25.65, 89.3, 30.4);
  --theme-bg-yellow-50-darker: rgb(255, 250.975, 206.7);
  --theme-bg-yellow-100-darker: rgb(255, 246.706779661, 173.45);
  --theme-bg-yellow-700-darker: rgb(250.723364486, 187.6429906542, 30.476635514);
  --theme-bg-yellow-900-darker: rgb(244.079338843, 119.9355371901, 10.520661157);
  --theme-bg-orange-50-darker: rgb(255, 233.7290322581, 200.05);
  --theme-bg-orange-100-darker: rgb(255, 215.2837662338, 156.35);
  --theme-bg-orange-700-darker: rgb(232.75, 117.8, 0);
  --theme-bg-orange-900-darker: rgb(218.5, 76.95, 0);
  --theme-bg-red-50-darker: rgb(255, 210.5, 217.175);
  --theme-bg-red-100-darker: rgb(231.938961039, 179.411038961, 184.5357142857);
  --theme-bg-red-700-darker: rgb(202.3047619048, 42.7952380952, 42.7952380952);
  --theme-bg-red-900-darker: rgb(173.85, 26.6, 26.6);
  --theme-bg-pink-50-darker: rgb(249.6, 206.4, 220.8);
  --theme-bg-pink-100-darker: rgb(245.97, 167.28, 194.37);
  --theme-bg-pink-700-darker: rgb(242.25, 0, 121.6);
  --theme-bg-pink-900-darker: rgb(197.6, 0, 105.45);
  --theme-bg-purple-50-darker: rgb(235.1, 211.8833333333, 238.4166666667);
  --theme-bg-purple-100-darker: rgb(217.904494382, 174.6264044944, 225.3235955056);
  --theme-bg-purple-700-darker: rgb(116.85, 29.45, 153.9);
  --theme-bg-purple-900-darker: rgb(70.3, 19, 133);
  --theme-bg-gray-50-darker: rgb(242.25, 242.25, 242.25);
  --theme-bg-gray-100-darker: rgb(232.75, 232.75, 232.75);
  --theme-bg-gray-700-darker: rgb(92.15, 92.15, 92.15);
  --theme-bg-gray-900-darker: rgb(48.45, 48.45, 48.45);
}

/* Dark theme */
:root.dark {
  /* Primary/Accent Colors */
  --theme-primary: #66f3b1;
  --theme-secondary: #66f3b1;
  --theme-accent: #66f3b1;
  --theme-darker-primary: rgb(70.0090909091, 240.4909090909, 160.6909090909);
  /* Background Colors */
  --theme-background: #2b2936;
  --theme-surface: #353243;
  --theme-background-tint: rgb(61.7842105263, 58.9105263158, 77.5894736842);
  --theme-background-tint-more: rgb(71.1763157895, 67.8657894737, 89.3842105263);
  --theme-background-tint-most: rgb(32.25, 30.75, 40.5);
  --theme-semi-transparent-background: rgba(43, 41, 54, 0.8588235294);
  /* Background variations */
  --theme-background-lighter: rgb(71.1763157895, 67.8657894737, 89.3842105263);
  --theme-background-dark: rgb(42.14, 40.18, 52.92);
  --theme-background-darker: rgb(41.28, 39.36, 51.84);
  --theme-background-darkest: rgb(39.56, 37.72, 49.68);
  /* Text Colors */
  --theme-text: #ffffff;
  --theme-text-strong: rgb(229.5, 229.5, 229.5);
  --theme-text-stronger: #cccccc;
  --theme-text-strongest: #999999;
  --theme-text-light: #bcb3bf;
  --theme-text-lightest: #666666;
  /* Border Colors */
  --theme-border: #545454;
  --theme-light-border: #3f3c4c;
  --theme-border-light: #4a4757;
  --theme-border-darker: rgb(92.55, 92.55, 92.55);
  --theme-border-darkest: #bcb3bf;
  --theme-row-number-border: #545454;
  /* Functional Colors */
  --theme-header: #453d4e;
  --theme-header-text: #bcb3bf;
  --theme-header-selected: #604b69;
  --theme-hover: #353243;
  --theme-current-search-result: #7c8ed4;
  --theme-grid: #545454;
  --theme-selected-cell-border: #66f3b1;
  --theme-selected-background: rgba(102, 243, 177, 0.0196078431);
  --theme-selected-background-tinted: rgba(102, 243, 177, 0.0823529412);
  --theme-shelf-background: #1f1c34;
  --theme-disabled: #604b69;
  --theme-filtered-header: #313d42;
  --theme-filtered-header-selected: #406258;
  /* Transparent overlays */
  --theme-transparent-contrast: rgba(255, 255, 255, 0.05);
  --theme-transparent-contrast-more: rgba(255, 255, 255, 0.1);
  --theme-close-button-bg: rgba(43, 41, 54, 0.5);
  --theme-close-button-bg-hover: rgba(43, 41, 54, 0.8);
  /* Semantic colors */
  --theme-error: #ff6b6b;
  --theme-warning: #cdcd42;
  /* Font */
  --theme-font-family:
    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  /* Pre-calculated color variations for SCSS compatibility */
  --theme-accent-darker-10: rgb(70.0090909091, 240.4909090909, 160.6909090909);
  --theme-text-light-darker-10: rgb(170.2928571429, 158.9142857143, 174.0857142857);
  --theme-hover-darker-10: rgb(47.7, 45, 60.3);
  /* Cell formatting background colors - darker variants */
  --theme-bg-blue-50-darker: rgb(204.6, 231.6, 251.4);
  --theme-bg-blue-100-darker: rgb(166.3166666667, 211.9625, 249.7833333333);
  --theme-bg-blue-700-darker: rgb(23.75, 112.1, 199.5);
  --theme-bg-blue-900-darker: rgb(12.35, 67.45, 152.95);
  --theme-bg-green-50-darker: rgb(215.3772727273, 237.7727272727, 217.1);
  --theme-bg-green-100-darker: rgb(185.21875, 223.28125, 186.4875);
  --theme-bg-green-700-darker: rgb(53.2, 134.9, 57);
  --theme-bg-green-900-darker: rgb(25.65, 89.3, 30.4);
  --theme-bg-yellow-50-darker: rgb(255, 250.975, 206.7);
  --theme-bg-yellow-100-darker: rgb(255, 246.706779661, 173.45);
  --theme-bg-yellow-700-darker: rgb(250.723364486, 187.6429906542, 30.476635514);
  --theme-bg-yellow-900-darker: rgb(244.079338843, 119.9355371901, 10.520661157);
  --theme-bg-orange-50-darker: rgb(255, 233.7290322581, 200.05);
  --theme-bg-orange-100-darker: rgb(255, 215.2837662338, 156.35);
  --theme-bg-orange-700-darker: rgb(232.75, 117.8, 0);
  --theme-bg-orange-900-darker: rgb(218.5, 76.95, 0);
  --theme-bg-red-50-darker: rgb(255, 210.5, 217.175);
  --theme-bg-red-100-darker: rgb(231.938961039, 179.411038961, 184.5357142857);
  --theme-bg-red-700-darker: rgb(202.3047619048, 42.7952380952, 42.7952380952);
  --theme-bg-red-900-darker: rgb(173.85, 26.6, 26.6);
  --theme-bg-pink-50-darker: rgb(249.6, 206.4, 220.8);
  --theme-bg-pink-100-darker: rgb(245.97, 167.28, 194.37);
  --theme-bg-pink-700-darker: rgb(242.25, 0, 121.6);
  --theme-bg-pink-900-darker: rgb(197.6, 0, 105.45);
  --theme-bg-purple-50-darker: rgb(235.1, 211.8833333333, 238.4166666667);
  --theme-bg-purple-100-darker: rgb(217.904494382, 174.6264044944, 225.3235955056);
  --theme-bg-purple-700-darker: rgb(116.85, 29.45, 153.9);
  --theme-bg-purple-900-darker: rgb(70.3, 19, 133);
  --theme-bg-gray-50-darker: rgb(242.25, 242.25, 242.25);
  --theme-bg-gray-100-darker: rgb(232.75, 232.75, 232.75);
  --theme-bg-gray-700-darker: rgb(92.15, 92.15, 92.15);
  --theme-bg-gray-900-darker: rgb(48.45, 48.45, 48.45);
}

/* ========================================
   BASE STYLES
   ======================================== */
/* CSS Reset & Normalization */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--theme-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: 14px;
  color: var(--theme-text);
  background-color: var(--theme-background);
}

/* SLDS-like Utilities */
.slds-p-around_medium {
  padding: 1rem;
}

.slds-m-top_large {
  margin-top: 1.5rem;
}

.slds-m-top_medium {
  margin-top: 1rem;
}

.slds-text-heading_large {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.slds-text-body_regular {
  font-size: 0.875rem;
  line-height: 1.5;
}

.slds-grid {
  display: flex;
}

.slds-grid_align-end {
  justify-content: flex-end;
}

/* Button Reset */
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Input Reset */
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Focus Visible (for better accessibility) */
:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

/* Custom Scrollbar for Webkit browsers */
::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

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

::-webkit-scrollbar-thumb {
  background: var(--theme-text-light);
  border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-strong);
}

/* Web Platform Specific: Ensure SheetRocks is fullscreen */
c-sheetrocks-element {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
}

c-workbook-element {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ensure sheet element takes full available height */
c-sheet-element {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1;
}