/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/**************************************/
/* Formatierung des Site-Header-Menüs */
/**************************************/
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 30px;
    background-color: #f0f1f2;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    border-top: 2px solid #f0f0f0;
    margin-top: 30px;
    background-color: #f0f1f2;
}

.nav-menu, .user-menu {
    display: flex;
    gap: 10px; /* Abstand zwischen den Menü-Buttons */
    justify-content: space-between;
    align-items: center;
}

.nav-button {
    padding: 8px 16px;
    background-color: #f8f9fa; /* Sehr helles Grau */
    color: #555;               /* Dunkelgraue Schrift */
    text-decoration: none;     /* Kein unterstrichener Text */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.nav-button:hover {
    background-color: #e9ecef; /* Etwas dunkler beim Drüberfahren */
    color: #333;
}

/* Optional: Logout etwas abheben */
.logout-button {
    border-color: #dee2e6;
}

/* Für die Gestaltung des Logout-Buttons */
/* In app/assets/stylesheets/application.css */
.inline-form {
    display: inline-block;
}

/**************************************************/
/* Formatierung des AnalyseInput-Eingabeformulars */
/**************************************************/
.main-container {
    max-width: 800px;
    margin: 0 auto; /* Zentriert den gesamten "Block" der Seite */
}

main {
    padding-bottom: 20px;
}

/** Gestaltung des Inputparameterformulars */
body .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
    gap: 1px;                     /* Platz zum Atmen! */
    max-width: 800px;
    margin: 0 auto;
}

/* Header soll über beide Spalten gehen */
.form-header {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 2px; /* Das ist der magische Abstand, der alles "atmen" lässt */
    margin-bottom: 15px; /* Abstand nach unten zum restlichen Formular */
    /*padding: 10px 0;*/
}

/* Optional: Damit das Select-Feld und Name-Feld auch schön aussehen */
.form-header select,
.form-header input {
    width: 100%;       /* Nutzt den vollen verfügbaren Platz */
    padding: 5px;      /* Macht die Felder etwas höher/größer */
    box-sizing: border-box; /* Verhindert, dass das Padding das Feld "versprengt" */
}

/* Optional: Die Labels etwas absetzen */
.form-header label {
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

/**************************************************************************/
/* Responsiv: Wenn der Bildschirm schmal ist (Handy), alles untereinander */
/**************************************************************************/
@media (max-width: 600px) {
    body .form-grid {
        grid-template-columns: 1fr;
        gap: 5px; /* Reduziere den Abstand global im Grid auf dem Handy */
    }
    .form-header, .form-left, .form-right {
        grid-column: span 1;
    }
    /* Alle direkten Kinder von .form-grid sollen sich über die volle Breite strecken */
    .form-grid > * {
        grid-column: 1 / -1 !important;
    }

    /* Das Flexbox-Verhalten für Handys überschreiben */
    .form-right > div {
        flex-direction: column; /* Alles untereinander */
        align-items: stretch;   /* Felder auf volle Breite ziehen */
        gap: 5px;               /* Abstand zwischen Label und Feld auf dem Handy */
    }

    .form-right label {
        flex: 0 0 auto;         /* Die 150px Sperre aufheben */
        text-align: left;       /* Text linksbündig über dem Feld */
    }
}

/* Kleine Helfer für saubere Abstände innerhalb der Blöcke */
.form-left, .form-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-right {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Das hier zentriert den Inhalt vertikal */
    gap: 5px;               /* Sorgt für den nötigen Abstand zwischen den Feldern */
}

.form-right > div {
    display: flex;            /* MUSS flex sein, damit die folgenden Befehle wirken! */
    flex-direction: row;
    align-items: center;
    gap: 5px;                /* Etwas mehr Abstand schadet auf dem Desktop nicht */
    margin-bottom: 10px;
}

.form-right label {
/*    flex: 0 0 50px; */
    text-align: right;
    margin: 0;                /* Verhindert, dass Standard-Margins das Layout stören */
}

/* WICHTIG: Das Select-Feld mit aufnehmen, da du eines in .form-right hast! */
.form-right input,
.form-right select {
    flex: 1;
    width: 100%;
    padding: 6px;
    box-sizing: border-box;   /* Verhindert, dass das Padding das Feld breiter macht als 100% */
}

/*******************************************/
/* Formatierung des Meine-Analysen-Screens */
/*******************************************/
.analysis-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    padding: 0;
}

.analysis-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* Etwas abgerundeter wirkt moderner */
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ein sanfter Schatten gibt Tiefe */
    transition: transform 0.2s ease;
    padding: 0 10px 0 10px;
}

.analysis-card:hover {
    transform: translateY(-5px); /* Kleiner "Lift"-Effekt beim Drüberfahren */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.analysis-card::after {
    content: "";
    clear: both;
    display: table;
}

.analysis-card p {
    margin-top: 0;      /* Entfernt den Abstand nach oben */
    margin-bottom: 4px; /* Hier kannst du den Abstand auf das Minimum reduzieren */
    line-height: 1;   /* Verringert den Zeilenabstand */

    position: relative; /* Wichtig, damit sich das Meta-Feld an der Karte orientiert */
}

.card-header {
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
    margin: 0 0 10px 0;
    line-height: 1;
}

.card-header h3 {
    margin: 15px 0 10px 0;
}

.card-footer {
    display: flex;
    justify-content: space-between; /* Metadaten links, Buttons rechts */
    align-items: center;            /* Vertikale Zentrierung! */
    margin-top: 0px;
    padding-top: 0px;
/*    border-top: 1px solid #eee;     /* Optische Trennung zum restlichen Inhalt */
}

.card-meta {
    font-size: 0.75rem;     /* Kleiner */
    color: #777;            /* Dezent grau */
    background-color: #f9f9f9;
    text-align: right;      /* Rechtsbündig */
    font-style: italic;     /* Optional, wirkt sehr "meta" */
    display: inline-block;
    float: right;

    border: 1px solid #e0e0e0;
    border-radius: 4px; /* Etwas abgerundeter wirkt moderner */
    padding: 5px;
    margin: 5px 0 5px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ein sanfter Schatten gibt Tiefe */
}

.card-actions {
    display: flex;             /* Aktiviert Flexbox */
    justify-content: flex-end; /* Schiebt alle Elemente nach rechts */
    margin: 10px 0 10px 0;
}

.card-link {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: inherit;       /* Erbt die Textfarbe */
    display: block;
    cursor: pointer;
}

/* Damit der Hover-Effekt weiterhin funktioniert */
.card-link:hover .analysis-card {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Gemeinsame Basis für alle Buttons */
.btn-small, .btn-small-danger {
    display: inline-block;
    padding: 6px 12px;
    margin-right: 1px;
    border-radius: 6px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.2s, opacity 0.2s;
    cursor: pointer;
}

/* Der "View" Button (Neutral/Primär) */
.btn-small {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #d0d0d0;
    margin-right: 10px;
}

.btn-small:hover {
    background-color: #e0e0e0;
}

/* Der "Delete" Button (Warnung) */
.btn-small-danger {
    background-color: #fff5f5;
    color: #d93025; /* Ein nicht zu aggressives Rot */
    border: 1px solid #facdc9;
}

.btn-small-danger:hover {
    background-color: #ffebee;
    color: #c62828;
}

/*************************************************/
/* Formatierung des Userprofile-Eingabeformulare */
/*************************************************/
.checkbox-inline-wrapper {
    display: flex;
    align-items: center; /* Zentriert die Checkbox vertikal zum Text */
    justify-content: flex-start; /* Das ist der entscheidende Befehl für Linksbündigkeit */
    gap: 5px;          /* Abstand zwischen Checkbox und Label */
}
.checkbox-inline-wrapper input[type="checkbox"] {
    width: auto; /* Hier überschreiben wir die 100%-Regel */
    margin: 0;   /* Entfernt das Standard-Margin, das oft stört */
}

.profile-form {
    display: flex;
    flex-direction: column;
    max-width: 400px; /* Breite einschränken */
    margin: 0 auto;   /* Zentriert im main-container */
    gap: 15px;        /* Abstand zwischen den Zeilen */
}

.form-row {
    display: flex;
    justify-content: center; /* Zentriert die beiden Spalten als Gruppe */
    width: 100%;
    gap: 20px;               /* Der Abstand zwischen Label und Wert */
}

.row-label {
    flex: 1;                 /* Nimmt 50% der Breite ein */
    text-align: right;       /* Klebt den Text an die Mitte */
    font-weight: bold;       /* Falls gewünscht */
}

.row-value {
    flex: 1;                 /* Nimmt die anderen 50% ein */
    text-align: left;        /* Klebt den Wert an die Mitte */
}

.radio-option {
    display: flex;       /* Hält Radio-Button und Text in einer Reihe */
    align-items: center; /* Zentriert beides vertikal zueinander */
    margin-bottom: 0px;  /* Gibt den nötigen Abstand zwischen den Zeilen */
}

/* Optional: Damit der Radio-Button nicht direkt am Text klebt */
.radio-option input {
    margin-right: 8px;
}

.form-footer {
    grid-column: span 2;
    margin-bottom: 20px;
    text-align: right; /* Oder 'center', wenn du ihn mittig willst */
}

.export-button {
    background-color: #e0e0e0; /* Etwas dunkleres Grau für besseren Kontrast zum weißen Hintergrund */
    color: #333;               /* Dunkles Grau statt hartem Schwarz für Eleganz */
    padding: 12px 24px;        /* Etwas kompakter */
    font-size: 16px;
    font-weight: 600;          /* Semi-Bold wirkt oft moderner als Bold */
    border: 1px solid #ccc;    /* Ein dezenter Rahmen gibt dem Button eine klare Kante */
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 15px;        /* DER ABSTAND: Hier definierst du die Lücke zum nächsten Button */
}

.export-button:hover {
    background-color: #d0d0d0; /* Ein sanfter Hover-Effekt */
    border-color: #b3b3b3;
}

.submit-button {
    background-color: #005a9c; /* Ein kräftiges, vertrauenerweckendes Blau */
    color: white;              /* Weiße Schrift für hohen Kontrast */
    padding: 12px 30px;        /* Mehr Platz um den Text für eine angenehme Größe */
    font-size: 16px;           /* Etwas größerer Text */
    font-weight: bold;         /* Fett für bessere Wahrnehmung */
    border: none;              /* Kein Rahmen */
    border-radius: 6px;        /* Abgerundete Ecken wirken moderner */
    cursor: pointer;           /* Ändert den Mauszeiger zur Hand */
    transition: background-color 0.2s ease; /* Sanfter Farbwechsel bei Mouse-over */
}

/* Hover-Effekt: Der Button reagiert, wenn man mit der Maus drüberfährt */
.submit-button:hover {
    background-color: #004070;
}


/**************************************************/
/* Formatierung der Buchstaben-Wertigkeitstabelle */
/**************************************************/
.report-table {
    border-collapse: collapse; /* Damit Rahmenlinien nicht doppelt sind */
    width: auto;      /* Ändere von 100% auf auto */
    max-width: 600px; /* Begrenze die Breite, damit sie nicht ausufert */
    margin-top: 10px;
    border: 1px solid #ddd;
}

.report-table th,
.report-table td {
    border: 1px solid #ddd; /* Linien an allen Zellen */
    padding: 8px;           /* Luft zum Atmen in den Zellen */
    text-align: left;
}

/* Abstand unter dem <details>-Block zu den Tabs */
details {
    margin-bottom: 25px; /* Hier erzeugst du den Abstand zum Tab-Container */
}


/* Für die Gestaltung der Ergebnis-Tabs */

/* 1. Die Radio-Buttons im Ergebnis-Bereich verstecken */
.tabs input[type="radio"] {
    display: none;
}

/* 2. Die Labels als Buttons stylen */
.tabs label {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
}

/* 3. Aussehen, wenn das Label aktiv ist */
.tabs input[type="radio"]:checked + label {
    background-color: #fff;
    border-bottom: 1px solid #fff; /* "Verbindet" das Label mit dem Content */
    font-weight: bold;
}

/* 4. Standardmäßig alles ausblenden */
.tab-content {
    display: none;
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #fff;
}

/* 5. Nur den Inhalt des ausgewählten Tabs anzeigen */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
    display: block;
}


/***************************************/
/* Formatierung der Karmagramm-Tabelle */
/***************************************/
.karmagramm-table {
    border-collapse: collapse;
    width: auto;
    max-width: 1000px; /* Begrenze die Breite, damit sie nicht ausufert */
    overflow-x: auto;
    table-layout: fixed; /* Ignoriert den Inhalt bei der Breitenberechnung */
    vertical-align: middle;
}

.karmagramm-table .col-heading {
    width: 40px;
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
}

.karmagramm-table th,
.karmagramm-table td {
    border: 1px solid #ccc;
    padding: 4px;
    vertical-align: middle;
    text-align: center;
    width: 50px;
}

.karmagramm-table th.category p {
    text-align: center !important;
}

.karmagramm-table p {
    margin-block-start: 0em;
    margin-block-end: 0em;
}
/* Zwischentitel optisch hervorheben */
.karmagramm-header {
    background-color: #f4f4f4;
    font-weight: bold;
    text-align: left !important;
}

.karmagramm-content {
    padding: 0 !important; /* Tab-Padding entfernen, damit die Tabelle voll ausfüllt */
    border: none;
    border-top: 1px solid #ccc; /* Der Rahmen wird jetzt hier definiert, nicht an der Tabelle */
}

.mark-x { color: #d9534f; font-weight: bold; }
.mark-o { color: #8e44ad; font-weight: bold; } /* Violett für das O */

/* Ruf und Wünsche Detailangaben */
.tab-content ul {
    /* 1. Die grundlegende Einrückung */
    padding-left: 30px !important;

    /* 2. Kompaktheit erzwingen */
    margin: 0 !important;

    /* 3. Punkte nach innen zwingen, damit sie nicht außerhalb des Paddings hängen */
    list-style-type: disc !important;
    list-style-position: outside !important;
}
.tab-content li {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0.3em;
}
.tab-content ul ul {
    padding-left: 40px !important;
    list-style-type: circle !important; /* Keine Punkte bei den Details, wenn du willst */
    list-style-position: outside !important;
    margin-top: 5px !important;
}
.tab-content li p {
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}

/* Säen und Ernten */
/* Nur für den speziellen Tab */
.saeen-content ul {
    list-style-type: none !important; /* Bullets komplett entfernen */
    padding-left: 15px !important;       /* Einrückung auf Null setzen */
}

.saeen-content li {
    margin-bottom: 0.5em !important;
}

/* Entferne jegliche CSS-Counter-Regeln, falls sie noch irgendwo aktiv sind */
.saeen-content li::before {
    content: none !important;
}

/* Mouse-over-Infobox */
.tippy-box {
    max-width: 500px !important; /* Verhindert, dass der Tooltip den ganzen Bildschirm einnimmt */
}

/*************************************/
/* Der neue Footer für Inhaltsseiten */
/*************************************/
.content-footer {
    display: flex;
    justify-content: flex-end; /* Button rechtsbündig */
    margin-top: 20px;          /* Abstand zum Inhalt */
    padding-top: 10px;         /* Abstand zum Button */
    width: 100%;
}

/*********************************************/
/* Formatierung der "Meine Analysen"-Tabelle */
/*********************************************/
.wide-container {
/*    width: auto;
/*    max-width: 1600px; /* Oder wähle einen Wert, der zu deinem Design passt */
    margin: 0 auto;
    padding: 0 20px;
}

/* Container für horizontales Scrollen auf kleinen Bildschirmen */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

/* Das Styling für deine Tabelle */
table {
    width: 100%;
    border-collapse: collapse; /* Damit Rahmen nicht doppelt erscheinen */
    margin: 20px 0;
    border: 1px solid #ddd;
}

table th, table td {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
    white-space: nowrap; /* Verhindert Zeilenumbruch in Zellen, hält Tabelle kompakt */
}

table thead {
    background-color: #f8f9fa;
}

/* Button-Styling für die Links */
.action-button {
    padding: 4px 8px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.85em;
}

.action-button:hover {
    background-color: #dee2e6;
}

.delete-button {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.25em;
    margin-top: 4px;
}

/********************************/
/* Formatierung der Login-Seite */
/********************************/
.login-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap; /* Erlaubt das Umbrechen, falls der Platz nicht reicht */
}

/* Media Query für Bildschirme kleiner als 600px (Handys) */
@media (max-width: 600px) {
    .login-container {
        flex-direction: column; /* Ändert die Ausrichtung auf untereinander */
        align-items: center;    /* Zentriert die Buttons in der Spalte */
    }
}

.login-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
    min-width: 220px;
}

/*.login-btn img {
    width: 20px;
    height: 20px;
}*/

.google-btn { background: #fff; color: #555; }
.facebook-btn { background: #4267B2; color: #fff; border: none; }