/* assets/style.css */
._dash-loading {
	display: none;
  }
  
  .m_1b7284a3 {
	  --paper-radius: var(--mantine-radius-default);
	  outline: 0;
	  -webkit-tap-highlight-color: transparent;
	  display: block;
	  touch-action: manipulation;
	  text-decoration: none;
	  border-radius: var(--paper-radius);
	  box-shadow: var(--paper-shadow);
	  background-color: #2d3038;
  }
  #settings_modal .mantine-Modal-content {
	  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  }
  
  #settings_modal .mantine-Modal-header {
	  background: rgba(255, 102, 0, 0.1);
	  border-bottom: 1px solid rgba(255, 102, 0, 0.3);
  }
  
  /* Profile Card Styling */
  #settings_modal .mantine-Card-root {
	  background: rgba(255, 255, 255, 0.05);
	  border: 1px solid rgba(255, 102, 0, 0.2);
	  transition: all 0.3s ease;
  }
  
  #settings_modal .mantine-Card-root:hover {
	  background: rgba(255, 255, 255, 0.08);
	  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.15);
  }
  
  #settings_modal {
	  background: #1a1b1e;
  }
  
  /* Badge Styling */
  #profile_user_level.mantine-Badge-root {
	  font-weight: 600;
	  text-transform: uppercase;
	  font-size: 0.7rem;
  }
  
  #profile_region.mantine-Badge-root {
	  font-weight: 500;
	  font-size: 0.7rem;
  }
  
  /* Avatar Enhancement */
  #settings_modal .mantine-Avatar-root {
	  border: 2px solid rgba(255, 102, 0, 0.5);
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  /* Button Hover Effects */
  #apply_settings_button:hover {
	  transform: translateY(-2px);
	  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
	  transition: all 0.2s ease;
  }
  
  #cancel_settings_button:hover {
	  background: rgba(255, 255, 255, 0.1);
  }
  
  /* Select Input Styling */
  #settings_modal .mantine-Select-input {
	  background: rgba(255, 255, 255, 0.05);
	  border: 1px solid rgba(255, 255, 255, 0.1);
	  color: white;
  }
  
  #settings_modal .mantine-Select-input:focus {
	  border-color: rgba(255, 102, 0, 0.5);
	  background: rgba(255, 255, 255, 0.08);
  }
  
  /* Divider Styling */
  #settings_modal .mantine-Divider-root {
	  border-color: rgba(255, 102, 0, 0.2);
  }
  
  #settings_modal .mantine-Divider-label {
	  color: rgba(255, 102, 0, 0.8);
	  font-weight: 500;
  }
  
  /* Notification Styling */
  .mantine-Notification-root {
	  backdrop-filter: blur(10px);
	  background: rgba(0, 0, 0, 0.8) !important;
	  border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Loading State for Settings */
  @keyframes pulse {
	  0% { opacity: 0.6; }
	  50% { opacity: 1; }
	  100% { opacity: 0.6; }
  }
  
  .settings-loading {
	  animation: pulse 1.5s ease-in-out infinite;
  }
  
  /* ._dash-loading {
	margin: auto;
	color: transparent;
	width: 0;
	height: 0;
	text-align: center;
  } */
  
  /* ._dash-loading::after { 
	content: '';
	display: inline-block;
	width: 2rem;
	height: 2rem;
	color: black;
	vertical-align: text-bottom;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border 0.75s linear infinite;
	animation: spinner-border 0.75s linear infinite;
	margin-top: 2rem;
  } */
  
  .flexlayout__layout {
	  --color-text: rgb(255, 136, 0);
	  --color-background: #23262e;
	  --color-base: white;
	  --color-1: #000000;
	  --color-2: #f0f0f0;
	  --color-3: #e9e9e9;
	  --color-4: #544949;
	  --color-5: #dbdbdb;
	  --color-6: #d4d4d4;
	  --color-drag1: rgb(95, 134, 196);
	  --color-drag2: rgb(119, 166, 119);
	  --color-drag1-background: rgba(95, 134, 196, 0.1);
	  --color-drag2-background: rgba(119, 166, 119, 0.075);
	  --font-size: medium;
	  --font-family: Roboto, Arial, sans-serif;
	  --color-overflow: gray;
	  --color-icon: gray;
	  --color-tabset-background: var(--color-background);
	  --color-tabset-background-selected: var(--color-1);
	  --color-tabset-background-maximized: var(--color-6);
	  --color-tabset-divider-line: #ff7600;
	  --color-tabset-header-background: var(--color-background);
	  --color-tabset-header: var(--color-text);
	  --color-border-background: var(--color-background);
	  --color-border-divider-line: var(--color-4);
	  --color-tab-selected: var(--color-text);
	  --color-tab-selected-background: var(--color-4);
	  --color-tab-unselected: gray;
	  --color-tab-unselected-background: transparent;
	  --color-tab-textbox: var(--color-text);
	  --color-tab-textbox-background: var(--color-3);
	  --color-border-tab-selected: var(--color-text);
	  --color-border-tab-selected-background: var(--color-4);
	  --color-border-tab-unselected: gray;
	  --color-border-tab-unselected-background: var(--color-2);
	  --color-splitter: #ffcf8b;
	  --color-splitter-hover: var(--color-4);
	  --color-splitter-drag: var(--color-4);
	  --color-drag-rect-border: var(--color-6);
	  --color-drag-rect-background: var(--color-4);
	  --color-drag-rect: var(--color-text);
	  --color-popup-border: var(--color-6);
	  --color-popup-unselected: var(--color-text);
	  --color-popup-unselected-background: white;
	  --color-popup-selected: var(--color-text);
	  --color-popup-selected-background: var(--color-3);
	  --color-edge-marker: gray;
  }
  /* ._dash-loading {
	margin: auto;
	color: transparent;
	width: 0;
	height: 0;
	text-align: center;
  } */
  
  /* ._dash-loading::after { 
	content: '';
	display: inline-block;
	width: 2rem;
	height: 2rem;
	color: black;
	vertical-align: text-bottom;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border 0.75s linear infinite;
	animation: spinner-border 0.75s linear infinite;
	margin-top: 2rem;
  } */
  
  .ddk-container.ddk-container p {
	  margin-top: 0.3em !important;
	  margin-bottom: 1em;
  }
  
  .ag-theme-martin {
	  --ag-font-size: 17px;
  }
  
  
  .flexlayout__layout {
	  --color-text: white;
	  --color-background: #000000;
	  --color-base: white;
	  --color-1: #000000;
	  --color-2: #f0f0f0;
	  --color-3: #e9e9e9;
	  --color-4: #e2e2e2;
	  --color-5: #dbdbdb;
	  --color-6: #d4d4d4;
	  --color-drag1: rgb(95, 134, 196);
	  --color-drag2: rgb(119, 166, 119);
	  --color-drag1-background: rgba(95, 134, 196, 0.1);
	  --color-drag2-background: rgba(119, 166, 119, 0.075);
	  --font-size: medium;
	  --font-family: Roboto, Arial, sans-serif;
	  --color-overflow: gray;
	  --color-icon: gray;
	  --color-tabset-background: var(--color-background);
	  --color-tabset-background-selected: var(--color-1);
	  --color-tabset-background-maximized: var(--color-6);
	  --color-tabset-divider-line: #ff7600;
	  --color-tabset-header-background: var(--color-background);
	  --color-tabset-header: var(--color-text);
	  --color-border-background: var(--color-background);
	  --color-border-divider-line: var(--color-4);
	  --color-tab-selected: var(--color-text);
	  --color-tab-selected-background: var(--color-4);
	  --color-tab-unselected: gray;
	  --color-tab-unselected-background: transparent;
	  --color-tab-textbox: var(--color-text);
	  --color-tab-textbox-background: var(--color-3);
	  --color-border-tab-selected: var(--color-text);
	  --color-border-tab-selected-background: var(--color-4);
	  --color-border-tab-unselected: gray;
	  --color-border-tab-unselected-background: var(--color-2);
	  --color-splitter: #ffcf8b;
	  --color-splitter-hover: var(--color-4);
	  --color-splitter-drag: var(--color-4);
	  --color-drag-rect-border: var(--color-6);
	  --color-drag-rect-background: var(--color-4);
	  --color-drag-rect: var(--color-text);
	  --color-popup-border: var(--color-6);
	  --color-popup-unselected: var(--color-text);
	  --color-popup-unselected-background: white;
	  --color-popup-selected: var(--color-text);
	  --color-popup-selected-background: var(--color-3);
	  --color-edge-marker: gray;
  }
  
  .flexlayout__tab_button {
	  color: #FF5700 !important;
  }
  
  .flexlayout__tab_button--selected {
	  background-color: #ff7109;
	  color: var(--color-tab-selected);
  }
  
  @media (hover: hover) {
	  .flexlayout__tab_button:hover {
		  background-color: #fff9f6;
		  color: #ff7109;
	  }
  }
  
  .resize-handle:hover {
	  background-color: #ff8400 !important;
  }
  
  /* Liquid Glass Card Styles */
  .liquid-glass-card {
	  position: relative;
	  background: transparent !important;
	  border: none !important;
	  overflow: hidden;
	  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important;
  }
  
  /* Glass filter layer - REDUCED BLUR for more clarity */
  .liquid-glass-card::before {
	  content: '';
	  position: absolute;
	  inset: 0;
	  z-index: 0;
	  backdrop-filter: blur(4px) saturate(110%) brightness(1.05);  /* Reduced from 8px blur to 4px */
	  -webkit-backdrop-filter: blur(4px) saturate(110%) brightness(1.05);
	  border-radius: inherit;
  }
  
  /* Tinted overlay - REDUCED OPACITY for more transparency */
  .liquid-glass-card::after {
	  content: '';
	  position: absolute;
	  inset: 0;
	  z-index: 1;
	  background: rgba(26, 27, 30, 0.25);  /* Reduced from 0.4 to 0.25 */
	  border-radius: inherit;
  }
  
  /* Specular highlight */
  .liquid-glass-card-specular {
	  position: absolute;
	  inset: 0;
	  z-index: 2;
	  box-shadow: 
		  inset 1px 1px 0 rgba(255, 255, 255, 0.2),  /* Increased for more shine */
		  inset 0 0 12px rgba(255, 255, 255, 0.1);  /* Increased spread */
	  border-radius: inherit;
	  pointer-events: none;
  }
  
  /* Card content */
  .liquid-glass-card > * {
	  position: relative;
	  z-index: 3;
  }
  
  /* Hover effect */
  .liquid-glass-card:hover {
	  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45) !important;
	  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .liquid-glass-card:hover::after {
	  background: rgba(26, 27, 30, 0.20);  /* Even more transparent on hover */
	  transition: background 0.3s ease;
  }
  
  /* Variant with border accent */
  .liquid-glass-card-bordered {
	  border: 1px solid rgba(255, 132, 0, 0.2) !important;  /* Slightly more visible border */
  }
  
  .liquid-glass-card-bordered::after {
	  background: rgba(26, 27, 30, 0.30);  /* Reduced from 0.45 */
  }
  
  /* Card Section styling for liquid glass */
  .liquid-glass-card .mantine-Card-section {
	  position: relative;
	  z-index: 3;
  }
  
  /* Softer shadows for nested elements */
  .liquid-glass-card .mantine-Card-section img {
	  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
  }

/* ============================================================================
   APPLE LIQUID GLASS SCROLLBAR DESIGN
   A modern, translucent scrollbar inspired by Apple's design language
   Matches the dark theme with orange accents (#ff8400)
   ============================================================================ */

/* ============================================================================
   WEBKIT SCROLLBAR BASE STYLES (Chrome, Safari, Edge)
   ============================================================================ */

/* Scrollbar container - larger for better usability */
::-webkit-scrollbar {
	width: 20px;
	height: 20px;
}

/* Track - frosted glass background groove */
::-webkit-scrollbar-track {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.02) 0%,
		rgba(255, 255, 255, 0.04) 50%,
		rgba(255, 255, 255, 0.02) 100%
	);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	margin: 6px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Thumb - liquid glass draggable handle */
::-webkit-scrollbar-thumb {
	background: linear-gradient(
		180deg,
		rgba(255, 152, 50, 0.45) 0%,
		rgba(255, 132, 0, 0.35) 30%,
		rgba(255, 112, 0, 0.28) 70%,
		rgba(255, 132, 0, 0.38) 100%
	);
	border-radius: 12px;
	border: 1.5px solid rgba(255, 160, 60, 0.3);
	box-shadow:
		inset 0 2px 4px rgba(255, 255, 255, 0.25),
		inset 0 -1px 2px rgba(0, 0, 0, 0.1),
		0 2px 12px rgba(255, 132, 0, 0.2),
		0 4px 16px rgba(0, 0, 0, 0.15);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	min-height: 50px;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(
		180deg,
		rgba(255, 170, 70, 0.6) 0%,
		rgba(255, 145, 30, 0.5) 30%,
		rgba(255, 125, 0, 0.42) 70%,
		rgba(255, 150, 40, 0.55) 100%
	);
	border-color: rgba(255, 180, 80, 0.45);
	box-shadow:
		inset 0 2px 6px rgba(255, 255, 255, 0.35),
		inset 0 -1px 3px rgba(0, 0, 0, 0.1),
		0 4px 20px rgba(255, 132, 0, 0.35),
		0 6px 24px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:active {
	background: linear-gradient(
		180deg,
		rgba(255, 180, 80, 0.7) 0%,
		rgba(255, 155, 40, 0.6) 30%,
		rgba(255, 135, 10, 0.52) 70%,
		rgba(255, 160, 50, 0.65) 100%
	);
	border-color: rgba(255, 190, 90, 0.55);
	box-shadow:
		inset 0 1px 4px rgba(255, 255, 255, 0.3),
		inset 0 -1px 2px rgba(0, 0, 0, 0.15),
		0 2px 10px rgba(255, 132, 0, 0.4);
}

/* Corner piece where scrollbars meet */
::-webkit-scrollbar-corner {
	background: linear-gradient(
		135deg,
		rgba(45, 48, 56, 0.6) 0%,
		rgba(35, 38, 46, 0.8) 100%
	);
	border-radius: 6px;
}

/* ============================================================================
   FIREFOX SCROLLBAR STYLES
   ============================================================================ */

* {
	scrollbar-width: auto;
	scrollbar-color: rgba(255, 140, 20, 0.45) rgba(255, 255, 255, 0.04);
}

/* ============================================================================
   MANTINE SCROLLAREA COMPONENT STYLES
   For dmc.ScrollArea components
   ============================================================================ */

/* ScrollArea root configuration - larger size */
.mantine-ScrollArea-root {
	--scrollarea-scrollbar-size: 20px;
}

/* Scrollbar container - frosted glass track */
.mantine-ScrollArea-scrollbar {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.02) 0%,
		rgba(255, 255, 255, 0.05) 50%,
		rgba(255, 255, 255, 0.02) 100%
	);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 3px;
	margin: 6px;
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.12),
		0 1px 0 rgba(255, 255, 255, 0.03);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mantine-ScrollArea-scrollbar:hover {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.03) 0%,
		rgba(255, 255, 255, 0.07) 50%,
		rgba(255, 255, 255, 0.03) 100%
	);
	border-color: rgba(255, 132, 0, 0.15);
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, 0.15),
		0 0 20px rgba(255, 132, 0, 0.05);
}

/* Thumb styling - liquid glass effect */
.mantine-ScrollArea-thumb {
	background: linear-gradient(
		180deg,
		rgba(255, 152, 50, 0.45) 0%,
		rgba(255, 132, 0, 0.35) 30%,
		rgba(255, 112, 0, 0.28) 70%,
		rgba(255, 132, 0, 0.38) 100%
	) !important;
	border-radius: 10px !important;
	border: 1.5px solid rgba(255, 160, 60, 0.3);
	box-shadow:
		inset 0 2px 4px rgba(255, 255, 255, 0.25),
		inset 0 -1px 2px rgba(0, 0, 0, 0.1),
		0 2px 12px rgba(255, 132, 0, 0.2),
		0 4px 16px rgba(0, 0, 0, 0.15);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	min-height: 50px !important;
	min-width: 50px !important;
	position: relative;
}

/* Specular highlight overlay for thumb */
.mantine-ScrollArea-thumb::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 10%;
	right: 10%;
	height: 40%;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.05) 100%
	);
	border-radius: 8px 8px 50% 50%;
	pointer-events: none;
}

.mantine-ScrollArea-thumb:hover {
	background: linear-gradient(
		180deg,
		rgba(255, 170, 70, 0.6) 0%,
		rgba(255, 145, 30, 0.5) 30%,
		rgba(255, 125, 0, 0.42) 70%,
		rgba(255, 150, 40, 0.55) 100%
	) !important;
	border-color: rgba(255, 180, 80, 0.45);
	box-shadow:
		inset 0 2px 6px rgba(255, 255, 255, 0.35),
		inset 0 -1px 3px rgba(0, 0, 0, 0.1),
		0 4px 20px rgba(255, 132, 0, 0.35),
		0 6px 24px rgba(0, 0, 0, 0.2);
	transform: scale(1.03);
}

.mantine-ScrollArea-thumb:active {
	background: linear-gradient(
		180deg,
		rgba(255, 180, 80, 0.7) 0%,
		rgba(255, 155, 40, 0.6) 30%,
		rgba(255, 135, 10, 0.52) 70%,
		rgba(255, 160, 50, 0.65) 100%
	) !important;
	transform: scale(0.97);
	box-shadow:
		inset 0 1px 4px rgba(255, 255, 255, 0.3),
		inset 0 -1px 2px rgba(0, 0, 0, 0.15),
		0 2px 10px rgba(255, 132, 0, 0.4);
}

/* ============================================================================
   ENHANCED SCROLLBAR VARIANTS
   Add className to ScrollArea component to use these variants
   ============================================================================ */

/* Accent variant - Orange tinted for primary areas (default theme color)
   Usage: dmc.ScrollArea(className="scrollarea-accent", ...) */
.scrollarea-accent .mantine-ScrollArea-thumb {
	background: linear-gradient(
		135deg,
		rgba(255, 132, 0, 0.4) 0%,
		rgba(255, 132, 0, 0.3) 50%,
		rgba(255, 132, 0, 0.22) 100%
	) !important;
	border-color: rgba(255, 132, 0, 0.35);
}

.scrollarea-accent .mantine-ScrollArea-thumb:hover {
	background: linear-gradient(
		135deg,
		rgba(255, 132, 0, 0.55) 0%,
		rgba(255, 132, 0, 0.45) 50%,
		rgba(255, 132, 0, 0.35) 100%
	) !important;
	border-color: rgba(255, 132, 0, 0.5);
}

/* Minimal variant - Ultra-subtle for clean interfaces
   Usage: dmc.ScrollArea(className="scrollarea-minimal", ...) */
.scrollarea-minimal .mantine-ScrollArea-scrollbar {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
}

.scrollarea-minimal .mantine-ScrollArea-thumb {
	background: rgba(255, 255, 255, 0.15) !important;
	border: none;
	box-shadow: none;
}

.scrollarea-minimal .mantine-ScrollArea-thumb:hover {
	background: rgba(255, 255, 255, 0.25) !important;
}

/* Vibrant variant - More visible, purple-tinted scrollbars
   Usage: dmc.ScrollArea(className="scrollarea-vibrant", ...) */
.scrollarea-vibrant .mantine-ScrollArea-thumb {
	background: linear-gradient(
		135deg,
		rgba(124, 58, 237, 0.4) 0%,
		rgba(139, 92, 246, 0.3) 50%,
		rgba(167, 139, 250, 0.2) 100%
	) !important;
	border-color: rgba(124, 58, 237, 0.35);
}

.scrollarea-vibrant .mantine-ScrollArea-thumb:hover {
	background: linear-gradient(
		135deg,
		rgba(124, 58, 237, 0.5) 0%,
		rgba(139, 92, 246, 0.4) 50%,
		rgba(167, 139, 250, 0.3) 100%
	) !important;
	border-color: rgba(124, 58, 237, 0.45);
}

/* Cyan variant - Matches positive/success color
   Usage: dmc.ScrollArea(className="scrollarea-cyan", ...) */
.scrollarea-cyan .mantine-ScrollArea-thumb {
	background: linear-gradient(
		135deg,
		rgba(51, 255, 230, 0.35) 0%,
		rgba(51, 255, 230, 0.25) 50%,
		rgba(51, 255, 230, 0.18) 100%
	) !important;
	border-color: rgba(51, 255, 230, 0.3);
}

.scrollarea-cyan .mantine-ScrollArea-thumb:hover {
	background: linear-gradient(
		135deg,
		rgba(51, 255, 230, 0.45) 0%,
		rgba(51, 255, 230, 0.35) 50%,
		rgba(51, 255, 230, 0.25) 100%
	) !important;
	border-color: rgba(51, 255, 230, 0.4);
}

/* ============================================================================
   AG-GRID SCROLLBAR STYLES
   Custom scrollbar styling for AG-Grid tables
   ============================================================================ */

.ag-theme-martin .ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
.ag-theme-martin .ag-body-vertical-scroll-viewport::-webkit-scrollbar,
.ag-theme-martin .ag-horizontal-left-spacer::-webkit-scrollbar,
.ag-theme-martin .ag-horizontal-right-spacer::-webkit-scrollbar {
	width: 18px;
	height: 18px;
}

.ag-theme-martin .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
.ag-theme-martin .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.01) 0%,
		rgba(255, 255, 255, 0.03) 50%,
		rgba(255, 255, 255, 0.01) 100%
	);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	margin: 4px;
}

.ag-theme-martin .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
.ag-theme-martin .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
	background: linear-gradient(
		180deg,
		rgba(255, 152, 50, 0.4) 0%,
		rgba(255, 132, 0, 0.3) 30%,
		rgba(255, 112, 0, 0.24) 70%,
		rgba(255, 132, 0, 0.32) 100%
	);
	border-radius: 10px;
	border: 1.5px solid rgba(255, 160, 60, 0.25);
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, 0.2),
		inset 0 -1px 2px rgba(0, 0, 0, 0.08),
		0 2px 10px rgba(255, 132, 0, 0.15);
	min-height: 45px;
}

.ag-theme-martin .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
.ag-theme-martin .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(
		180deg,
		rgba(255, 170, 70, 0.55) 0%,
		rgba(255, 145, 30, 0.45) 30%,
		rgba(255, 125, 0, 0.38) 70%,
		rgba(255, 150, 40, 0.48) 100%
	);
	border-color: rgba(255, 180, 80, 0.4);
	box-shadow:
		inset 0 2px 5px rgba(255, 255, 255, 0.3),
		inset 0 -1px 2px rgba(0, 0, 0, 0.1),
		0 4px 16px rgba(255, 132, 0, 0.3);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Slightly smaller on mobile for more screen space */
@media (max-width: 48em) {
	.mantine-ScrollArea-root {
		--scrollarea-scrollbar-size: 16px;
	}

	.mantine-ScrollArea-thumb {
		min-height: 40px !important;
		min-width: 40px !important;
	}

	::-webkit-scrollbar {
		width: 16px;
		height: 16px;
	}

	.ag-theme-martin .ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
	.ag-theme-martin .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
		width: 14px;
		height: 14px;
	}
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
	::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, 0.1);
		border-width: 2px;
		border-color: rgba(255, 255, 255, 0.3);
	}

	::-webkit-scrollbar-thumb {
		background: rgba(255, 132, 0, 0.6) !important;
		border-width: 2px;
		border-color: rgba(255, 132, 0, 0.8);
	}

	.mantine-ScrollArea-scrollbar {
		background: rgba(255, 255, 255, 0.1);
		border-width: 2px;
		border-color: rgba(255, 255, 255, 0.3);
	}

	.mantine-ScrollArea-thumb {
		background: rgba(255, 132, 0, 0.6) !important;
		border-width: 2px;
		border-color: rgba(255, 132, 0, 0.8);
	}
}

/* Reduced motion - disable animations */
@media (prefers-reduced-motion: reduce) {
	::-webkit-scrollbar-thumb {
		transition: none !important;
	}

	.mantine-ScrollArea-scrollbar,
	.mantine-ScrollArea-thumb {
		transition: none !important;
	}
}

/* ============================================================================
   FOCUS STATES FOR KEYBOARD NAVIGATION
   ============================================================================ */

.mantine-ScrollArea-viewport:focus-within .mantine-ScrollArea-scrollbar {
	background: rgba(255, 132, 0, 0.08);
	border-color: rgba(255, 132, 0, 0.15);
}

.mantine-ScrollArea-viewport:focus-within .mantine-ScrollArea-thumb {
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.3),
		0 0 0 2px rgba(255, 132, 0, 0.2),
		0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   END APPLE-STYLE GLASS SCROLLBAR DESIGN
   ============================================================================ */

/* ============================================================================
   LIQUID GLASS ACTION ICONS
   Modern glass-style action buttons with hover effects
   ============================================================================ */

.action-icon-glass {
	backdrop-filter: blur(8px) saturate(120%);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	background: rgba(255, 132, 0, 0.12) !important;
	border: 1px solid rgba(255, 132, 0, 0.2) !important;
	position: relative;
	overflow: hidden;
}

.action-icon-glass::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.15) 0%,
		rgba(255, 255, 255, 0.05) 100%
	);
	border-radius: inherit;
	pointer-events: none;
}

.action-icon-glass:hover {
	background: rgba(255, 132, 0, 0.22) !important;
	border-color: rgba(255, 132, 0, 0.35) !important;
	box-shadow:
		0 4px 16px rgba(255, 132, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	transform: translateY(-2px);
}

.action-icon-glass:active {
	transform: translateY(0px) scale(0.97);
	box-shadow:
		0 2px 8px rgba(255, 132, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Focus state for accessibility */
.action-icon-glass:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px rgba(255, 132, 0, 0.4),
		0 4px 16px rgba(255, 132, 0, 0.25) !important;
}

/* ============================================================================
   END LIQUID GLASS ACTION ICONS
   ============================================================================ */

/* ============================================================================
   KPI CARD CONTAINER QUERY VISIBILITY CLASSES
   Used to show/hide metric columns based on container width (not viewport)
   ============================================================================ */

/* Define the container for KPI cards */
.kpi-card-container {
	container-type: inline-size;
}

/* KPI card content wrapper - flex layout that changes direction */
.kpi-card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mantine-spacing-md);
}

/* Metrics grid - responsive columns based on container width */
.kpi-metrics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	width: 100%;
	justify-items: center;
}

/* SM+ layout (>= 350px): horizontal layout with 2 metric columns */
@container (min-width: 350px) {
	.kpi-card-content {
		flex-direction: row;
		align-items: stretch;
	}

	.kpi-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================================
   END KPI CARD CONTAINER QUERY VISIBILITY CLASSES
   ============================================================================ */

/* ============================================================================
   KPI PANEL GRID CONTAINER QUERY LAYOUT
   Responsive grid for KPI cards based on Dash Dock panel width
   - xs-sm (< 500px): 1 column (full width)
   - md-xl (>= 500px): 2 columns
   ============================================================================ */

/* Container for the KPI panel to enable container queries */
.kpi-panel-container {
	container-type: inline-size;
}

/* Default: 1 column grid for narrow panels */
.kpi-panel-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mantine-spacing-md);
}

/* md+ (>= 500px): 2 column grid */
@container (min-width: 500px) {
	.kpi-panel-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================================
   END KPI PANEL GRID CONTAINER QUERY LAYOUT
   ============================================================================ */

/* ============================================================================
   FILTER CARD CONTAINER QUERY LAYOUT
   Responsive layout for site/equipment filter sections based on panel width
   - xs-sm (< 600px): vertical stack (full width rows)
   - md-xl (>= 600px): horizontal layout (two columns)
   ============================================================================ */

/* Container for the filter card to enable container queries */
.filter-card-container {
	container-type: inline-size;
}

/* Flexbox wrapper - default column layout for small containers */
.filter-sections-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--mantine-spacing-md);
	width: 100%;
}

/* Each section takes full width in column layout */
.filter-section {
	width: 100%;
}

/* md+ (>= 600px): switch to row layout */
@container (min-width: 600px) {
	.filter-sections-wrapper {
		flex-direction: row;
		gap: var(--mantine-spacing-xl);
		align-items: flex-start;
	}

	/* Sections share space equally in row layout */
	.filter-section {
		flex: 1;
		min-width: 200px;
	}
}

/* ============================================================================
   END FILTER CARD CONTAINER QUERY LAYOUT
   ============================================================================ */