/* Drohnenring Design Tokens */
/* Updated 2026-04-30 — aligned to Figma mockups */

/* Override Masterportal's default Roboto with Epilogue */
@font-face {
  font-family: 'MasterPortalFont';
  src: local('Epilogue'), local('Epilogue-Light');
  font-weight: 100 400;
  font-display: swap;
}

@font-face {
  font-family: 'MasterPortalFont';
  src: local('Epilogue'), local('Epilogue-Bold');
  font-weight: 500 900;
  font-display: swap;
}

@font-face {
  font-family: 'MasterPortalFont Bold';
  src: local('Epilogue'), local('Epilogue-Bold');
  font-weight: 700;
  font-display: swap;
}

/* Colors - from Figma Design */
:root {
  /* Primary Colors */
  --dr-primary: #1a661a;
  --dr-primary-hover: #145214;
  --dr-accent: #ffed00;
  --dr-bright-green-print: #62b44f;
  
  /* Text Colors */
  --dr-text-primary: #4a4a4a;
  --dr-text-secondary: #848484;
  --dr-text-light: #ffffff;
  
  /* Background Colors */
  --dr-bg-white: #ffffff;
  --dr-bg: #f5f5f5;
  --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: #1a661a;
  --dr-status-warning: #ffed00;
  --dr-status-error: #ff0000;
  
  /* Typography — Figma token mapping */
  --dr-font-family-primary: 'Epilogue', sans-serif;
  --dr-font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dr-font-family-highlight: 'Permanent Marker', cursive;
  /* Legacy alias */
  --dr-font-family: var(--dr-font-family-body);
  
  --dr-font-weight-extralight: 200;
  --dr-font-weight-light: 300;
  --dr-font-weight-regular: 400;
  --dr-font-weight-semibold: 600;
  --dr-font-weight-bold: 700;
  
  --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;
  
  /* Figma composite typography tokens */
  /* copy_secondary_float: Epilogue 300 12px/15px */
  /* copy_primary_title:   Epilogue 700 15px */
  /* copy_primary_float:   Epilogue 300 15px */
  /* button_float:         Permanent Marker 400 12px */
  /* text_primary:         Inter 200 15px/20px */
  
  /* 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-body);
  font-weight: var(--dr-font-weight-extralight);
  font-size: var(--dr-font-size-lg);
  line-height: 20px;
  color: var(--dr-text-primary);
}

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

#masterportal-root .mp-menu-body {
  background: var(--dr-bg-transp);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 16px solid var(--dr-accent);
}

#masterportal-root .main-menu .mp-menu-header .title,
.main-menu .menu-title {
  font-family: var(--dr-font-family-primary);
  font-size: var(--dr-font-size-lg);
  font-weight: var(--dr-font-weight-bold);
  color: var(--dr-text-primary);
}

/* Sidebar toggle button */
#masterportal-root .mp-menu-toggle {
  background: var(--dr-bg-transp-90);
  border: none;
  box-shadow: var(--dr-shadow-sm);
}

/* ─── Search Bar ─── */
.search-bar input,
#masterportal-root .mp-search input {
  font-family: var(--dr-font-family-primary);
  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);
  color: var(--dr-text-primary);
}

.search-bar input::placeholder,
#masterportal-root .mp-search input::placeholder {
  color: var(--dr-text-secondary);
}

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

.layer-tree-item {
  font-family: var(--dr-font-family-primary);
  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);
  line-height: 15px;
}

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

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

/* ─── Checkboxes ─── */
.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);
}

/* ─── Buttons ─── */
.btn-primary {
  background-color: var(--dr-primary);
  border-color: var(--dr-primary);
  color: var(--dr-text-light);
  font-family: var(--dr-font-family-primary);
  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: var(--dr-primary-hover);
  border-color: var(--dr-primary-hover);
  box-shadow: var(--dr-shadow-sm);
}

.btn-accent,
.btn-cta {
  background-color: var(--dr-accent);
  border-color: var(--dr-accent);
  color: var(--dr-text-primary);
  font-family: var(--dr-font-family-primary);
  font-size: var(--dr-font-size-sm);
  font-weight: var(--dr-font-weight-bold);
  border-radius: var(--dr-radius-xl);
  padding: var(--dr-spacing-sm) var(--dr-spacing-lg);
  cursor: pointer;
  transition: all var(--dr-transition-normal);
  border: none;
}

.btn-cta:hover {
  box-shadow: var(--dr-shadow-md);
  filter: brightness(0.95);
}

/* 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-family: var(--dr-font-family-primary);
  font-size: var(--dr-font-size-sm);
  font-weight: var(--dr-font-weight-light);
  color: var(--dr-text-primary);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--dr-transition-fast);
}

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

/* ─── Map Controls (Masterportal native) ─── */
#masterportal-root .ol-control button,
#masterportal-root .mp-controls button {
  background: var(--dr-bg-transp-90);
  border: none;
  color: var(--dr-text-primary);
  box-shadow: var(--dr-shadow-sm);
  transition: all var(--dr-transition-fast);
}

#masterportal-root .ol-control button:hover,
#masterportal-root .mp-controls button:hover {
  background: var(--dr-bg-white);
  color: var(--dr-primary);
}

/* ─── Masterportal Tool Panel Title (yellow underline) ─── */
#masterportal-root .mp-tool-title,
.tool-title {
  font-family: var(--dr-font-family-primary);
  font-size: var(--dr-font-size-lg);
  font-weight: var(--dr-font-weight-bold);
  color: var(--dr-text-primary);
  border-bottom: 3px solid var(--dr-accent);
  padding-bottom: var(--dr-spacing-xs);
}

/* ─── Login Module Override ─── */
#masterportal-root .mp-login,
#masterportal-root .login-form {
  font-family: var(--dr-font-family-primary);
}

#masterportal-root .mp-login .btn-primary {
  background-color: var(--dr-primary);
  border-color: var(--dr-primary);
}

#masterportal-root .mp-login .btn-primary:hover {
  background-color: var(--dr-primary-hover);
  border-color: var(--dr-primary-hover);
}

.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: #ffed00;
}

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

/* ─── Secondary Menu (right) — menu item hover yellow ─── */
#mp-body-root-secondaryMenu .btn-light:hover,
#mp-body-root-secondaryMenu .btn-light:focus,
#mp-body-root-secondaryMenu .btn-light:active {
  background-color: var(--dr-accent) !important;
  border-color: var(--dr-accent) !important;
  color: var(--dr-text-primary) !important;
}

/* ─── Secondary Menu (right) — last divider yellow ─── */
#mp-body-root-secondaryMenu hr:last-of-type {
  border-color: var(--dr-accent);
  border-top-color: var(--dr-accent);
  opacity: 1;
}