/* ==========================================
   IONOS STYLE THEME
   Sehr hell, hellblau, minimalistisch
   Wie moderne Web-Interfaces
   ========================================== */

/* FARBSCHEMA IONOS:
   Primary:     #0066CC (IONOS Blau)
   Hover:       #E6F2FF (Hellblau)
   Active:      #CCE5FF (Hellblau)
   Background:  #FFFFFF (Weiß)
*/

/* ==========================================
   GLOBALE ÜBERSCHREIBUNGEN
   ========================================== */

body {
  background: #f8f9fa !important;
}

.app {
  background: #f8f9fa !important;
}

.main {
  background: #f8f9fa !important;
}

/* ==========================================
   SIDEBAR - DESKTOP
   ========================================== */

.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #dee2e6 !important;
  box-shadow: 2px 0 4px rgba(0,0,0,0.02) !important;
}

.brand {
  padding: 1.5rem 1rem !important;
  border-bottom: 1px solid #e9ecef !important;
  background: transparent !important;
}

.brand__logo {
  max-width: 160px !important;
}

/* Navigation Links - IONOS Style - TÜRKIS AKTIV */
.nav__item {
  color: #495057 !important;
  background: transparent !important;
  margin: 0.25rem 0.75rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  border-left: 3px solid transparent !important;
  font-weight: 500 !important;
}

.nav__item:hover {
  background: #d4f1f4 !important;
  color: #003366 !important;
}

.nav__item.is-active {
  background: #7dd3da !important;
  color: #003366 !important;
  font-weight: 700 !important;
  border-left-color: #00a3bf !important;
  box-shadow: 0 2px 8px rgba(0, 163, 191, 0.2) !important;
}

.nav__icon {
  font-size: 1.25rem !important;
  margin-right: 0.75rem !important;
  opacity: 0.8 !important;
}

.nav__item:hover .nav__icon,
.nav__item.is-active .nav__icon {
  opacity: 1 !important;
}

/* ==========================================
   TOPBAR - FIXIERT
   ========================================== */

.topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #dee2e6 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  color: #212529 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  height: 65px !important;
  box-sizing: border-box !important;
}

.topbar__title {
  color: #212529 !important;
  font-weight: 600 !important;
}

/* ==========================================
   NAVBAR - HORIZONTALE NAVIGATION
   FIXIERTE HÖHEN FÜR ALLE BUTTONS
   ========================================== */

.navbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #dee2e6 !important;
  overflow-x: auto !important;
  position: fixed !important;
  top: 65px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99 !important;
  height: 52px !important;
  box-sizing: border-box !important;
}

/* WICHTIG: Einheitliche Höhe für ALLE Navbar-Buttons */
.navbar__item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  /* FIXIERTE HÖHE - LÖST DAS HÖHEN-PROBLEM */
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #4b5563 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.navbar__item:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* Aktiver Zustand - GLEICHE HÖHE */
.navbar__item.is-active {
  background: #7dd3da !important;
  color: #003366 !important;
  font-weight: 700 !important;
  /* Gleiche Höhe auch im aktiven Zustand */
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

/* Icons einheitlich groß */
.navbar__icon {
  font-size: 16px !important;
  line-height: 1 !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ==========================================
   MOBILE NAVIGATION - BOTTOM
   ========================================== */

.mnav {
  background: #ffffff !important;
  border-top: 1px solid #dee2e6 !important;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.03) !important;
}

.mnav__item {
  color: #6c757d !important;
  transition: all 0.15s ease !important;
}

.mnav__item:hover {
  color: #003366 !important;
  background: #f8f9fa !important;
}

.mnav__item.is-active {
  color: #003366 !important;
  background: #7dd3da !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 163, 191, 0.2) !important;
}

.mnav__ico {
  color: inherit !important;
  font-size: 1.25rem !important;
}

/* ==========================================
   HEADER
   ========================================== */

.header {
  background: transparent !important;
  border-bottom: 1px solid #dee2e6 !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.header h1 {
  color: #212529 !important;
  font-weight: 700 !important;
}

.header .sub,
.header p {
  color: #6c757d !important;
}

/* ==========================================
   CARDS
   ========================================== */

.card {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  transition: all 0.2s ease !important;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  border-color: #adb5bd !important;
  transform: translateY(-2px) !important;
}

.card__head {
  background: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
  padding: 1.25rem 1.5rem !important;
}

.card__title {
  color: #212529 !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
}

.card__body {
  padding: 1.5rem !important;
}

/* ==========================================
   BUTTONS - IONOS Style
   ========================================== */

.btn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  border: none !important;
}

/* Primary Button - DUNKELBLAU wie IONOS Logo */
.btn--primary {
  background: #003366 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25) !important;
  font-weight: 700 !important;
}

.btn--primary:hover {
  background: #002244 !important;
  box-shadow: 0 6px 20px rgba(0, 51, 102, 0.35) !important;
  transform: translateY(-2px) !important;
}

.btn--ghost {
  background: transparent !important;
  color: #6c757d !important;
  border: 1px solid #dee2e6 !important;
}

.btn--ghost:hover {
  background: #f8f9fa !important;
  color: #495057 !important;
  border-color: #ced4da !important;
}

.btn--success {
  background: #28a745 !important;
  color: white !important;
}

.btn--success:hover {
  background: #218838 !important;
}

.btn--danger {
  background: #dc3545 !important;
  color: white !important;
}

.btn--danger:hover {
  background: #c82333 !important;
}

/* CTA Button - FÜR HERVORGEHOBENE AKTIONEN wie "Neuer Kunde" */
.btn--cta,
.btn--highlight {
  background: linear-gradient(135deg, #00a3bf 0%, #00c9e0 100%) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(0, 163, 191, 0.35) !important;
  font-weight: 700 !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.btn--cta:hover,
.btn--highlight:hover {
  background: linear-gradient(135deg, #008ca3 0%, #00b8d4 100%) !important;
  box-shadow: 0 6px 24px rgba(0, 163, 191, 0.45) !important;
  transform: translateY(-3px) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================
   FORM FIELDS
   ========================================== */

.field__label {
  color: #495057 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.5rem !important;
}

.field__input,
.field__textarea,
select.field__input {
  background: #ffffff !important;
  border: 1px solid #ced4da !important;
  border-radius: 6px !important;
  color: #212529 !important;
  transition: all 0.15s ease !important;
}

.field__input:focus,
.field__textarea:focus,
select.field__input:focus {
  border-color: #003366 !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1) !important;
  outline: none !important;
}

/* ==========================================
   STATS / KPI
   ========================================== */

.stat,
.stat-card {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

.stat:hover,
.stat-card:hover {
  border-color: #00a3bf !important;
  box-shadow: 0 6px 20px rgba(0, 163, 191, 0.15) !important;
  transform: translateY(-3px) !important;
}

.stat__value,
.stat-card__value {
  color: #212529 !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
}

.stat__label,
.stat-card__label {
  color: #6c757d !important;
  font-size: 0.875rem !important;
}

/* ==========================================
   BADGES / PILLS
   ========================================== */

.badge,
.pill {
  border-radius: 4px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

.badge--primary,
.pill--primary {
  background: #d0f0f5 !important;
  color: #003366 !important;
}

.badge--success,
.pill--ok {
  background: #d4edda !important;
  color: #155724 !important;
}

.badge--warning {
  background: #fff3cd !important;
  color: #856404 !important;
}

.badge--danger {
  background: #f8d7da !important;
  color: #721c24 !important;
}

/* ==========================================
   TABLES
   ========================================== */

table {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 6px !important;
}

thead {
  background: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
}

th {
  color: #495057 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

td {
  color: #212529 !important;
  border-bottom: 1px solid #f1f3f5 !important;
}

tr:hover {
  background: #f8f9fa !important;
}

/* ==========================================
   ALERTS
   ========================================== */

.alert {
  border-radius: 6px !important;
  border-left-width: 4px !important;
  padding: 1rem 1.25rem !important;
}

.alert--info {
  background: #d1ecf1 !important;
  border-left-color: #00a3bf !important;
  color: #0c5460 !important;
}

.alert--success {
  background: #d4edda !important;
  border-left-color: #28a745 !important;
  color: #155724 !important;
}

.alert--warning {
  background: #fff3cd !important;
  border-left-color: #ffc107 !important;
  color: #856404 !important;
}

.alert--danger {
  background: #f8d7da !important;
  border-left-color: #dc3545 !important;
  color: #721c24 !important;
}

/* ==========================================
   CUSTOMER/TASK ITEMS
   ========================================== */

.customer-item,
.task-item,
.note-item {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.customer-item:hover,
.task-item:hover,
.note-item:hover {
  border-color: #00a3bf !important;
  box-shadow: 0 2px 8px rgba(0, 163, 191, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================
   SCROLLBAR
   ========================================== */

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

::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #ced4da;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

/* ==========================================
   UTILITIES
   ========================================== */

.text-muted,
.muted {
  color: #6c757d !important;
}

.text-primary {
  color: #003366 !important;
}

.bg-light {
  background: #f8f9fa !important;
}

.border-light {
  border-color: #dee2e6 !important;
}

/* ==========================================
   ORANGE KOMPLETT ENTFERNEN
   ========================================== */

[style*="background:#F89420"],
[style*="background: #F89420"],
[style*="background-color:#F89420"],
[style*="background-color: #F89420"] {
  background: #003366 !important;
  background-color: #003366 !important;
}

[style*="color:#F89420"],
[style*="color: #F89420"] {
  color: #003366 !important;
}

[style*="border-color:#F89420"],
[style*="border-color: #F89420"] {
  border-color: #003366 !important;
}

.bg-orange,
.bg-primary:not(.btn--primary) {
  background: #003366 !important;
}

.text-orange {
  color: #003366 !important;
}

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

@media (max-width: 768px) {
  .card {
    border-radius: 6px !important;
  }
  
  .card__head {
    padding: 1rem !important;
  }
  
  .card__body {
    padding: 1rem !important;
  }
  
  /* Navbar auf Mobile kleinere Buttons */
  .navbar__item {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  
  .navbar__item.is-active {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  
  .navbar__icon {
    font-size: 14px !important;
    width: 18px !important;
    height: 18px !important;
  }
}

/* ==========================================
   PRINT
   ========================================== */

@media print {
  .sidebar,
  .topbar,
  .mnav,
  .navbar {
    display: none !important;
  }
  
  .main {
    padding: 0 !important;
  }
  
  .main-content {
    padding-top: 0 !important;
  }
}

/* ==========================================
   LOADING & EMPTY STATES
   ========================================== */

.loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.spinner {
  border-color: #dee2e6 !important;
  border-top-color: #003366 !important;
}

.empty-state {
  text-align: center !important;
  padding: 3rem 1.5rem !important;
  color: #adb5bd !important;
}

/* ==========================================
   ENDE IONOS STYLE THEME
   ========================================== */