// _ui.scss

// Farbdefinitionen
$color-background: #0b1120;
$color-panel: #1c243b;
$color-text-primary: #e0f0ff;
$color-text-secondary: #a0b8d8;
$color-water: #137092;
$color-food: #a87f41;
$color-ore: #c1543a;
$color-metal: #4d4d4d;
$color-fuel: #2e5c2d;
$color-electronics: #4d2d6b;
$color-workparts: #441631;
$color-success: #4CAF50;
$color-error: #f44336;
$color-button: #1c243b;
$color-button-hover: #3c8dbc;

// Font-Einstellungen
$font-family: 'Roboto', sans-serif;
$font-size-base: 14px;

// Mixin für Standardbutton
@mixin button {
  background-color: $color-button;
  color: $color-text-primary;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: $font-family;
  font-size: $font-size-base;
  cursor: pointer;
  transition: background-color 0.2s;

  &:hover {
    background-color: $color-button-hover;
  }

  &:disabled {
    // background-color: darken($color-button, 10%);
    background-color: $color-button;
    cursor: not-allowed;
    opacity: 0.6;
  }
}

// Anwendung für allgemeine UI-Elemente
.ui-panel {
  background-color: $color-panel;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: $color-text-primary;
  font-family: $font-family;
}

.ui-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ui-body {
  border: 2px solid #202d3e;
  border-radius: 8px;;
}

.ui-text-secondary {
  color: $color-text-secondary;
}

.ui-progress-bar {
  height: 14px;
  border-radius: 5px;
  // background-color: darken($color-panel, 10%);
  background-color: $color-panel;
  overflow: hidden;
  margin: 4px 0;
  font-size: 12px;

  .progress-fill {
    height: 100%;
    transition: width 0.3s;
  }

  &.wasser .progress-fill { background-color: $color-water; }
  &.nahrung .progress-fill { background-color: $color-food; }
  &.erz .progress-fill { background-color: $color-ore; }
  &.metall .progress-fill { background-color: $color-metal; }
  &.treibstoff .progress-fill { background-color: $color-fuel; }
  &.elektronik .progress-fill { background-color: $color-electronics; }
  &.bauteile .progress-fill { background-color: $color-workparts; }
}

.button {
  @include button;
}


.ui-section {
  padding: 16px;
  

  ul {
    margin: 8px 0 0 16px;
    padding: 0;
    list-style-type: disc;
    font-size: 13px;
  }

  button {
    margin-right: 8px;
    margin-top: 8px;
  }
}

.flex {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ui-body > .ui-section {
  border-top: 1px solid #202d3e;
}