/* Definiere Variablen mit der gleichen Spezifität wie Pico CSS sie verwendet */
:host(:not([data-theme="dark"])),
:root:not([data-theme="dark"]),
[data-theme="light"] {
  /* Überschreibe die Standard-Fehlerfarbe von Pico CSS */
  --pico-del-color: #dc3545;
  /* Kräftigeres Rot (Bootstrap Danger) */
}

/* Minimales Custom CSS für den Header, da Pico keine Header-Komponente hat */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  background-color: var(--pico-card-background-color);
  /* Passt zum Pico-Theme */
  position: sticky;
  /* Header fixieren */
  top: 0;
  z-index: 10;
}

.admin-header__back-btn {
  color: var(--pico-primary);
  text-decoration: none;
  font-size: 1.2rem;
}

.admin-header__title {
  margin: 0;
  /* Pico setzt hier margin */
  font-size: 1.2rem;
  font-weight: bold;
}

/* Verhindert, dass Pico den Button im Header streckt */
.admin-header__actions button {
  width: auto;
  margin-bottom: 0;
}

/* Kleiner Abstand oben */
body>main {
  padding-top: 1rem;
}

/* Styling für das Modal */
dialog {
  max-width: 800px;
  /* Breite des Modals anpassen */
}

dialog article {
  /* padding-bottom: 0; */
  /* Entfernt: Standard-Padding von Pico wieder zulassen */
}

dialog footer {
  padding-top: var(--pico-spacing);
  /* Abstand zum Footer */
}

/* Verhindert Scrollen des Hauptinhalts, wenn Modal offen ist */
body.modal-open {
  overflow: hidden;
}

/* --- NEUE REGELN --- */

/* --- Button Basis-Styles --- */
.btn {
  display: inline-flex;
  /* Für Icon + Text Alignment */
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  /* Abstand zwischen Kind-Elementen (Icon und Text) */
  padding: 0.3rem 0.8rem;
  /* Etwas mehr horizontales Padding */
  font-size: 0.85rem;
  font-weight: var(--pico-font-weight-bold);
  /* Einheitliche Schriftstärke */
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--pico-border-radius);
  background-color: transparent;
  /* Wird von Farbklassen überschrieben */
  color: inherit;
  /* Wird von Farbklassen überschrieben */
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
  width: auto;
  /* Verhindert Strecken durch Pico */
  margin: 0;
  /* Reset Pico margins */
}

/* Icon im Button - Margin-Regel auskommentiert, da jetzt 'gap' verwendet wird */
/*
    .btn .fa-solid:not(:last-child) {
      /* Spezifischer Selektor für Font Awesome Icons */
/* Nur wenn dem Icon etwas folgt (z.B. Text) */
/*  margin-right: 0.4em;
      /* Abstand zwischen Icon und Text */
/* } */

/* Der auskommentierte Block für .btn i:last-child wurde entfernt, da er überflüssig ist */

/* Styling for action buttons in tables (ersetzt die alte #stocks-table Regel) */
.actions-cell {
  display: flex;
  /* Use flexbox for alignment and spacing */
  flex-wrap: wrap;
  /* Allow buttons to wrap on smaller screens */
  gap: 0.5rem;
  /* Add space between buttons (horizontally and vertically when wrapped) */
  justify-content: flex-start;
  /* Align buttons to the start (wird ggf. für Transaktionstabelle überschrieben) */
  align-items: center;
  /* Vertikal zentrieren */
}

.actions-cell button {
  margin: 0;
  /* Remove default button margins if any */
}


/* --- Button Farb-Modifikatoren --- */

/* Primary (Blau - Hauptakzent) */
.btn-primary {
  color: var(--pico-primary-inverse);
  background-color: var(--pico-primary);
  border-color: var(--pico-primary);
}

.btn-primary:hover {
  color: var(--pico-primary-inverse);
  background-color: var(--pico-primary-hover);
  border-color: var(--pico-primary-focus);
  /* Etwas dunklerer Rand */
}

/* Danger (Rot) */
.btn-danger {
  color: #ffffff;
  background-color: #dc3545;
  /* Bootstrap Rot */
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #ffffff;
  background-color: #c82333;
  /* Dunkleres Rot */
  border-color: #bd2130;
  /* Noch dunklerer Rand */
}

/* Secondary (Grau) */
.btn-secondary {
  color: var(--pico-secondary-inverse);
  background-color: var(--pico-secondary);
  border-color: var(--pico-secondary);
}

.btn-secondary:hover {
  color: var(--pico-secondary-inverse);
  background-color: var(--pico-secondary-hover);
  border-color: var(--pico-secondary-focus);
}

/* Success (Grün) - Für Hinzufügen-Aktionen */
.btn-success {
  color: #ffffff;
  /* Weißer Text */
  background-color: #28a745;
  /* Gewünschtes Grün */
  border-color: #28a745;
  /* Passender Rand */
}

.btn-success:hover {
  color: #ffffff;
  /* Weißer Text bleibt */
  background-color: #218838;
  /* Etwas dunkleres Grün (Bootstrap-Äquivalent) */
  border-color: #1e7e34;
  /* Noch dunklerer Rand (Bootstrap-Äquivalent) */
}


/* --- Status Badge Styles --- */
.status-badge {
  /* Umbenannt von status-cell span für Klarheit */
  /* Span wird im JS hinzugefügt */
  padding: 0.2em 0.6em;
  border-radius: var(--pico-border-radius);
  font-weight: bold;
  font-size: 0.8em;
  text-transform: uppercase;
}

.status-badge.status-active {
  background-color: #28a745;
  /* Explizites Grün (Bootstrap Success) */
  color: #ffffff;
  /* Explizites Weiß */
}

.status-badge.status-inactive {
  background-color: var(--pico-secondary);
  /* Dunkleres Grau (Pico Variable) */
  color: var(--pico-secondary-inverse);
  /* Heller Text (Pico Variable) */
}

/* Transaction Type Badges */
.status-badge.type-buy {
  background-color: #28a745;
  /* Grün (wie btn-success) */
  color: #ffffff;
}

.status-badge.type-sell {
  background-color: #dc3545;
  /* Rot (wie btn-danger) */
  color: #ffffff;
}

/* --- Styling für Aktions-Zellen (Desktop) --- */
/* .actions-cell { */
/* Regel entfernt/auskommentiert, wird unten spezifischer behandelt */
/* white-space: nowrap; */
/* Verhindert Umbruch auf Desktop - Entfernt */
/* } */

/* --- Responsive Tabelle (Button-Umbruch) --- */
/* main>figure { */
/* Entfernt: Kein horizontales Scrollen mehr */
/* overflow-x: auto; */
/* } */

@media (max-width: 767px) {
  /* Pico's default breakpoint for mobile */

  /* Kleineres Padding in BEIDEN Tabellenzellen für mehr Platz */
  #stocks-table th,
  #stocks-table td,
  .transactions-table th,
  .transactions-table td {
    /* Selektor erweitert */
    padding: 0.4rem 0.2rem;
    /* Noch weniger Padding für Transaktionstabelle */
    /* font-size: 0.8rem; */
    /* Entfernt: Schriftgröße bleibt normal */
  }

  /* Ziel: Mobile Geräte / schmale Bildschirme - Aktionsspalte schmal machen */
  /* Höhere Spezifität, min-width und max-width hinzugefügt */
  #edit-stock-form fieldset table.transactions-table th:last-child,
  #edit-stock-form fieldset table.transactions-table td.actions-cell {
    width: auto !important;
    /* Erzwingt Auto-Breite */
    min-width: 0 !important;
    /* Erlaubt Schrumpfen unter Inhaltsbreite */
    max-width: 45px !important;
    /* NEU: Maximale Breite erzwingen */
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    text-align: left !important;
    /* Sicherstellen, dass Inhalt linksbündig ist */
    display: table-cell !important;
    /* Reset für TH, überschreibt potenzielles Flex */
  }

  /* Flexbox-Verhalten NUR für td.actions-cell in mobiler Ansicht */
  #edit-stock-form fieldset table.transactions-table td.actions-cell {
    display: flex !important;
    /* Flexbox wieder aktivieren, überschreibt table-cell */
    flex-direction: column !important;
    align-items: flex-start !important;
    /* Buttons linksbündig */
  }

  /* Breite der Buttons in der mobilen Ansicht (bleibt auto) */
  /* Spezifischer Selektor für Transaktionstabelle */
  #edit-stock-form fieldset table.transactions-table td.actions-cell .btn {
    margin-bottom: 0.5rem;
    width: auto;
    /* Buttons nur so breit wie nötig */
  }

  /* Letzten Button ohne unteren Abstand */
  #edit-stock-form fieldset table.transactions-table td.actions-cell .btn:last-child {
    margin-bottom: 0;
  }

  /* Linken Abstand aufheben (bleibt gleich) */
  /* Spezifischer Selektor für Transaktionstabelle */
  #edit-stock-form fieldset table.transactions-table td.actions-cell .btn+.btn {
    margin-left: 0;
  }
}

/* --- Modal Footer Layout --- */
dialog footer {
  /* Gilt für alle dialog footers */
  display: flex;
  justify-content: flex-end;
  /* Buttons nach rechts ausrichten */
  gap: 0.5rem;
  /* Abstand zwischen den Buttons */
}

dialog footer .btn {
  margin: 0;
  /* Sicherstellen, dass keine unerwünschten Margins von Pico greifen */
}

/* --- Styling für Abschnittsüberschriften im Modal (Summary, Legend, H4) --- */
#edit-stock-modal #form-fields summary,
#edit-stock-modal #form-fields fieldset>legend,
#edit-stock-modal #form-fields div.portfolio-section-title {
  /* Geändert von h4 zu div */
  display: block;
  /* Wichtig für volle Breite des Borders */
  font-weight: bold;
  color: var(--pico-primary);
  border-bottom: 1px solid var(--pico-primary);
  padding-bottom: 0.3em;
  /* Kleiner Abstand Text zu Linie */
  margin-top: var(--pico-spacing);
  /* Abstand nach oben */
  margin-bottom: var(--pico-form-element-spacing-vertical);
  /* Abstand nach unten (wie bei Labels) */
  width: 100%;
  cursor: default;
  /* Standard-Cursor, da nicht alle klickbar sind */
}

/* Spezifisch für klickbare Summaries in <details> den Pointer wieder setzen (falls von obiger Regel überschrieben) */
#edit-stock-modal #form-fields details>summary {
  cursor: pointer;
}

/* --- Layout für "Portfolio hinzufügen"-Buttons --- */
#add-owner-buttons-container {
  display: flex;
  flex-wrap: wrap;
  /* Buttons umbrechen lassen, falls nötig */
  gap: 0.5rem;
  /* Standard-Abstand zwischen Buttons */
}


/* --- Layout für Confirmation Modal Footer --- */
#confirmation-footer {
  display: flex;
  justify-content: flex-end;
  /* Buttons nach rechts */
  gap: 0.5rem;
  /* Abstand zwischen Buttons */
  padding-top: var(--pico-spacing);
  /* Abstand zum Nachrichten-Text */
  margin-top: var(--pico-spacing);
  /* Sicherstellen, dass Abstand da ist */
  border-top: 1px solid var(--pico-muted-border-color);
  /* Leichte Trennlinie */
}


/* --- ENDE NEUE REGELN --- */
/* --- Validation --- */
/* Hebt ungültige Formularfelder hervor */
form input[aria-invalid="true"],
form select[aria-invalid="true"],
form textarea[aria-invalid="true"] {
  border-color: var(--pico-del-color, red);
  /* Nutzt Pico Variable oder Fallback */
  --pico-form-element-focus-color: var(--pico-del-color);
  /* Ändert auch Fokusfarbe */
  box-shadow: 0 0 0 1px var(--pico-del-color);
  /* Optional: Zusätzlicher Schatten */
}

/* Utility class for half-width inputs */
.input-half-width {
  max-width: 50%;
  /* Or a fixed value like 200px if preferred */
}

/* Fix für Fieldset-Breite im Admin-Formular */
#edit-stock-form fieldset {
  max-width: 100%;
  /* Verhindert, dass das Fieldset breiter als der Parent wird */
  min-width: 0;
  /* Erlaubt dem Fieldset, kleiner als seine Inhaltsbreite zu werden, falls nötig */
  box-sizing: border-box;
  /* Stellt sicher, dass Padding/Border in max-width enthalten sind */
}

/* Erzwinge, dass die Tabelle im Fieldset die Breite respektiert */
#edit-stock-form fieldset table.transactions-table {
  table-layout: fixed;
  /* Wichtig: Ändert das Layout-Verhalten der Tabelle */
  width: 100%;
  /* Nimmt die volle Breite des Fieldsets ein */
  max-width: 100%;
  /* Doppelt hält besser, stellt sicher, dass sie nicht überläuft */
}

/* Optional: Umbruch in Zellen erzwingen, falls breite Inhalte das Problem sind */
#edit-stock-form fieldset table.transactions-table td,
#edit-stock-form fieldset table.transactions-table th {
  word-wrap: break-word;
  /* Veraltet, aber sicher */
  overflow-wrap: break-word;
  /* Moderner Standard */
  /* Optional: white-space: normal; könnte auch helfen, falls nowrap gesetzt ist */
}

/* Optimierung der Transaktionstabelle-Spalten */
#edit-stock-form fieldset table.transactions-table th,
#edit-stock-form fieldset table.transactions-table td {
  padding: 0.5rem 0.5rem;
  /* Etwas Padding reduzieren (Pico Standard ist oft 1rem) */
  vertical-align: middle;
  /* Sicherstellen, dass alles vertikal zentriert ist */
}

/* Feste Breite UND Flexbox für die Aktionsspalte (Desktop) */
#edit-stock-form fieldset table.transactions-table th:last-child {
  width: 95px;
  /* Etwas breiter für Titel "Aktionen" */
  text-align: right;
  /* Titel rechtsbündig */
  padding-right: 0.75rem;
}

#edit-stock-form fieldset table.transactions-table td.actions-cell {
  width: 95px;
  /* Breite wie Header */
  display: flex;
  /* Flexbox aktivieren */
  justify-content: flex-end;
  /* Buttons nach rechts */
  align-items: center;
  /* Vertikal zentrieren */
  gap: 0.25rem;
  /* Abstand zwischen Flex-Items (Buttons) */
  padding-right: 0.5rem;
  /* Padding anpassen, da gap jetzt Abstand macht */
  padding-left: 0.5rem;
}

/* Styling für die Buttons in der Aktionszelle (Desktop) */
#edit-stock-form fieldset table.transactions-table td.actions-cell button {
  flex-shrink: 0;
  /* Verhindert, dass Buttons schrumpfen */
  margin-left: 0;
  /* Wird durch 'gap' ersetzt */
  padding: 0.25rem 0.5rem;
  /* Kleinere Buttons */
  line-height: 1;
  /* Verhindert zusätzlichen vertikalen Platz */
}

/* Optional: Breiten für andere Spalten andeuten (falls nötig) */
/* Beispiel:
#edit-stock-form fieldset table.transactions-table th:nth-child(1) { width: 100px; } /* Datum */
/* #edit-stock-form fieldset table.transactions-table th:nth-child(3) { width: 80px; }  /* Menge */
/* ... usw. ... */
/* Die restlichen Spalten teilen sich den verbleibenden Platz */
/* Anpassung für breitere Bildschirme: Innenabstand erhöhen */
@media (min-width: 992px) {

  /* Pico LG Breakpoint */
  .admin-header {
    /* Erhöhe Padding links/rechts, behalte oben/unten bei (1rem) */
    /* Verwende % für relativen Abstand */
    padding-left: 7%;
    /* Reduziert von 10% */
    padding-right: 7%;
    /* Reduziert von 10% */
    /* Optional: max-width hinzufügen, falls % zu extrem wird */
    /* max-width: 1400px; */
    /* Beispiel */
    /* margin-left: auto; */
    /* Zentriert, falls max-width aktiv */
    /* margin-right: auto; */
    /* Zentriert, falls max-width aktiv */
  }
}