/* RegioWoodTrain Design Tokens */

/* Colors - from Figma Design */
:root {
  /* Primary Colors */
  --dr-primary: #238b21;
  --dr-accent: #ffff00;
  
  /* Text Colors */
  --dr-text-primary: #4a4a4a;
  --dr-text-secondary: #848484;
  --dr-text-light: #ffffff;
  
  /* Background Colors */
  --dr-bg-white: #ffffff;
  --dr-bg-transp: rgba(255, 255, 255, 0.7);
  --dr-bg-transp-90: rgba(255, 255, 255, 0.9);
  
  /* Border Colors */
  --dr-border: #4a4a4a;
  --dr-border-light: #848484;
  --dr-border-lighter: #e0e0e0;
  
  /* Status Colors */
  --dr-status-success: #238b21;
  --dr-status-warning: #ffff00;
  --dr-status-error: #ff0000;
  
  /* Typography */
  --dr-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dr-font-weight-light: 300;
  --dr-font-weight-regular: 400;
  --dr-font-weight-semibold: 600;
  
  --dr-font-size-xs: 11px;
  --dr-font-size-sm: 12px;
  --dr-font-size-md: 14px;
  --dr-font-size-lg: 15px;
  --dr-font-size-xl: 18px;
  
  --dr-line-height-tight: 1;
  --dr-line-height-normal: 1.5;
  --dr-line-height-relaxed: 1.75;
  
  /* Spacing */
  --dr-spacing-xs: 4px;
  --dr-spacing-sm: 8px;
  --dr-spacing-md: 12px;
  --dr-spacing-lg: 16px;
  --dr-spacing-xl: 24px;
  --dr-spacing-xxl: 32px;
  
  /* Dimensions */
  --dr-menu-width: 297px;
  --dr-header-height: 48px;
  --dr-control-size: 36px;
  --dr-icon-size-sm: 16px;
  --dr-icon-size-md: 20px;
  --dr-icon-size-lg: 24px;
  
  /* Border Radius */
  --dr-radius-sm: 4px;
  --dr-radius-md: 8px;
  --dr-radius-lg: 15px;
  --dr-radius-xl: 20px;
  --dr-radius-full: 100px;
  
  /* Shadows */
  --dr-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --dr-shadow-md: 0 4px 4px rgba(0, 0, 0, 0.1);
  --dr-shadow-lg: 0 4px 4px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --dr-transition-fast: 0.15s ease;
  --dr-transition-normal: 0.2s ease;
  --dr-transition-slow: 0.3s ease;
}

/* Global Styles Override */
body {
  font-family: var(--dr-font-family);
  font-weight: var(--dr-font-weight-light);
}

/* Main Menu Customization */
#masterportal-root .main-menu {
  width: var(--dr-menu-width);
  background: var(--dr-bg-transp);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.main-menu .menu-title {
  font-size: var(--dr-font-size-md);
  color: var(--dr-text-primary);
  font-weight: var(--dr-font-weight-semibold);
}

/* Search Bar Styling */
.search-bar input {
  font-family: var(--dr-font-family);
  font-size: var(--dr-font-size-sm);
  font-weight: var(--dr-font-weight-light);
  border: 1px solid var(--dr-border-light);
  border-radius: var(--dr-radius-md);
  padding: var(--dr-spacing-sm) var(--dr-spacing-md);
}

.search-bar input::placeholder {
  color: var(--dr-text-secondary);
}

/* Layer Tree Customization */
.layer-tree {
  font-family: var(--dr-font-family);
}

.layer-tree-item {
  font-size: var(--dr-font-size-sm);
  font-weight: var(--dr-font-weight-light);
  color: var(--dr-text-primary);
  padding: var(--dr-spacing-xs) var(--dr-spacing-md);
}

.layer-tree-folder {
  border-bottom: 1px solid var(--dr-border-lighter);
}

.layer-tree-folder-title {
  font-size: var(--dr-font-size-sm);
  font-weight: var(--dr-font-weight-regular);
  color: var(--dr-text-primary);
  padding: var(--dr-spacing-sm) var(--dr-spacing-lg);
}

/* Checkbox Styling */
.layer-checkbox {
  width: var(--dr-icon-size-sm);
  height: var(--dr-icon-size-sm);
  border: 1px solid var(--dr-border);
  border-radius: 2px;
  cursor: pointer;
}

.layer-checkbox:checked {
  background-color: var(--dr-primary);
  border-color: var(--dr-primary);
}

/* Button Styling */
.btn-primary {
  background-color: var(--dr-primary);
  border-color: var(--dr-primary);
  color: var(--dr-text-light);
  font-family: var(--dr-font-family);
  font-size: var(--dr-font-size-sm);
  font-weight: var(--dr-font-weight-regular);
  border-radius: var(--dr-radius-sm);
  padding: var(--dr-spacing-sm) var(--dr-spacing-lg);
  transition: all var(--dr-transition-normal);
}

.btn-primary:hover {
  background-color: #1a6e19;
  border-color: #1a6e19;
  box-shadow: var(--dr-shadow-sm);
}

.btn-accent {
  background-color: var(--dr-accent);
  border-color: var(--dr-accent);
  color: var(--dr-text-primary);
  font-family: var(--dr-font-family);
  font-size: var(--dr-font-size-sm);
  border-radius: var(--dr-radius-xl);
}

/* Icon Button */
.btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--dr-spacing-xs);
  color: var(--dr-text-primary);
  transition: color var(--dr-transition-fast);
}

.btn-icon:hover {
  color: var(--dr-primary);
}

/* Underline Link */
.link-underline {
  font-size: var(--dr-font-size-sm);
  color: var(--dr-text-primary);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--dr-transition-fast);
}

.link-underline:hover {
  color: var(--dr-primary);
}

/* Tool Window Styling */
.tool-window {
  font-family: var(--dr-font-family);
  border-radius: var(--dr-radius-md);
  box-shadow: var(--dr-shadow-lg);
}

.tool-window-header {
  background: var(--dr-primary);
  color: var(--dr-text-light);
  border-radius: var(--dr-radius-md) var(--dr-radius-md) 0 0;
  padding: var(--dr-spacing-md) var(--dr-spacing-lg);
}

/* Map Controls Styling */
.map-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--dr-bg-white);
  border-radius: var(--dr-radius-full);
  box-shadow: var(--dr-shadow-lg);
  overflow: hidden;
}

.map-control-button {
  width: var(--dr-control-size);
  height: 30px;
  background: var(--dr-bg-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dr-transition-fast);
}

.map-control-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.map-control-button.more {
  height: var(--dr-control-size);
  background: var(--dr-accent);
  border-radius: var(--dr-radius-xl);
}

.map-control-button.more:hover {
  background: #e6e600;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dr-spacing-xs);
  padding: 2px var(--dr-spacing-sm);
  border-radius: var(--dr-radius-full);
  font-size: var(--dr-font-size-xs);
  font-weight: var(--dr-font-weight-light);
}

.status-badge.success {
  background: rgba(35, 139, 33, 0.1);
  color: var(--dr-status-success);
}

.status-badge.warning {
  background: rgba(255, 255, 0, 0.1);
  color: var(--dr-text-primary);
}

.status-badge.error {
  background: rgba(255, 0, 0, 0.1);
  color: var(--dr-status-error);
}

/* Accordion Styling */
.accordion-item {
  border-bottom: 1px solid var(--dr-border-lighter);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--dr-spacing-sm) var(--dr-spacing-lg);
  cursor: pointer;
  transition: background var(--dr-transition-fast);
}

.accordion-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.accordion-content {
  padding-left: var(--dr-spacing-lg);
  padding-right: var(--dr-spacing-sm);
}

/* Logo Styling */
.drohnenring-logo {
  height: 36px;
  width: auto;
  margin-bottom: var(--dr-spacing-lg);
}

/* Organization Header */
.organization-header {
  font-size: var(--dr-font-size-sm);
  color: var(--dr-text-primary);
  margin-bottom: var(--dr-spacing-md);
  padding: var(--dr-spacing-sm) 0;
}

/* Utility Classes */
.text-primary { color: var(--dr-text-primary); }
.text-secondary { color: var(--dr-text-secondary); }
.text-light { color: var(--dr-text-light); }

.bg-white { background: var(--dr-bg-white); }
.bg-transp { background: var(--dr-bg-transp); }
.bg-primary { background: var(--dr-primary); }
.bg-accent { background: var(--dr-accent); }

.font-light { font-weight: var(--dr-font-weight-light); }
.font-regular { font-weight: var(--dr-font-weight-regular); }
.font-semibold { font-weight: var(--dr-font-weight-semibold); }

.text-xs { font-size: var(--dr-font-size-xs); }
.text-sm { font-size: var(--dr-font-size-sm); }
.text-md { font-size: var(--dr-font-size-md); }
.text-lg { font-size: var(--dr-font-size-lg); }

.shadow-sm { box-shadow: var(--dr-shadow-sm); }
.shadow-md { box-shadow: var(--dr-shadow-md); }
.shadow-lg { box-shadow: var(--dr-shadow-lg); }

.rounded-sm { border-radius: var(--dr-radius-sm); }
.rounded-md { border-radius: var(--dr-radius-md); }
.rounded-lg { border-radius: var(--dr-radius-lg); }
.rounded-full { border-radius: var(--dr-radius-full); }