/* base.css */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap');

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    color: #e0e7ff; /* Helles Indigo für Text */
    background-color: #0f172a; /* Dunkles Blau-Grau als Hintergrund */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* KORREKTUR v89: Stellt sicher, dass der main-Container im Designer-Modus ein Flex-Container ist und keine Abstände hat. */
#page-container.designer-mode main {
    padding: 0;
    margin: 0;
    display: flex; /* Stellt Flexbox-Kontext für Kinder sicher */
}


header {
    flex-shrink: 0;
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
    color: #93c5fd; /* Helleres Blau für Überschriften */
}

a {
    color: #38bdf8; /* Sky Blue für Links */
    text-decoration: none;
    transition: color 0.2s ease-in-out; /* Übergang für Farbwechsel hinzugefügt */
}

a:hover {
    /* text-decoration: underline; <-- Entfernt, um Hover-Effekt auf Buttons zu korrigieren */
    color: #60a5fa; /* Leichter Hover-Effekt für Links beibehalten */
}


button {
    cursor: pointer;
    background-color: #3b82f6; /* Blau für Buttons */
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* Medium-Radius */
    transition: background-color 0.2s ease-in-out;
}

button:hover {
    background-color: #2563eb; /* Dunkleres Blau beim Hover */
}

button:disabled {
    background-color: #4b5563; /* Grau, wenn deaktiviert */
    cursor: not-allowed;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background-color: #1e293b; /* Dunkles Slate für Eingabefelder */
    border: 1px solid #475569; /* Slate-Grau Rand */
    color: #e0e7ff; /* Helles Indigo für Text */
    padding: 0.5rem;
    border-radius: 0.375rem;
    width: 100%;
    box-sizing: border-box;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #38bdf8; /* Sky Blue für Checkboxen/Radio-Buttons */
}

/* Base styles for table */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background-color: #1e293b;
    border-radius: 0.5rem;
    overflow: hidden;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #334155;
}

th {
    background-color: #334155;
    color: #e2e8f0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
}

tr:hover {
    background-color: #334155;
}

/* Responsiveness for tables */
@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 1rem;
        border: 1px solid #334155;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    td {
        border: none;
        border-bottom: 1px solid #475569;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 0.75rem;
        font-weight: 600;
        text-align: left;
        color: #93c5fd;
    }

    td:last-child {
        border-bottom: 0;
    }
}

/* Hilfs-Klassen für Flexbox-Grid */
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }

/* Text- und Hintergrundfarben für Logbuch-Kategorien */
.category-futter { background-color: #1a202c; color: #a0aec0; } /* Dunkles Grau */
.category-wasserwerte { background-color: #1a202c; color: #63b3ed; } /* Blau */
.category-pflanzenpflege { background-color: #1a202c; color: #48bb78; } /* Grün */
.category-fischpflege { background-color: #1a202c; color: #ecc94b; } /* Gelb */
.category-medikamente { background-color: #1a202c; color: #e53e3e; } /* Rot */
.category-wartung { background-color: #1a202c; color: #9f7aea; } /* Lila */
.category-beobachtung { background-color: #1a202c; color: #ed8936; } /* Orange */
.category-erfolge { background-color: #1a202c; color: #38b2ac; } /* Türkis */

/* Allgemeines Modal-Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Dunkler, halbtransparenter Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Stellt sicher, dass das Overlay ganz oben ist */
}

/* Lade-Overlay mit Ladebalken */
#loader {
    position: fixed;
    inset: 0;
    background-color: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity 0.5s ease-in-out;
}

#loader.hidden {
    opacity: 0;
    pointer-events: none;
}

#progress-bar {
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7), 0 0 20px rgba(56, 189, 248, 0.5);
}


/* Universal Glow-Effekt für Karten */
@keyframes glowing {
    0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); }
    100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }
}

.glow-on-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-on-hover:hover {
    transform: translateY(-4px) scale(1.05);
}

/* Keyframes für spezifische Glow-Farben */
@keyframes glowing-sky { 0% { box-shadow: 0 0 5px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 15px rgba(56, 189, 248, 0.6); } 100% { box-shadow: 0 0 5px rgba(56, 189, 248, 0.3); } }
@keyframes glowing-emerald { 0% { box-shadow: 0 0 5px rgba(52, 211, 153, 0.3); } 50% { box-shadow: 0 0 15px rgba(52, 211, 153, 0.6); } 100% { box-shadow: 0 0 5px rgba(52, 211, 153, 0.3); } }
@keyframes glowing-amber { 0% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); } 50% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.6); } 100% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); } }
@keyframes glowing-violet { 0% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.3); } 50% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.6); } 100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.3); } }
@keyframes glowing-rose { 0% { box-shadow: 0 0 5px rgba(251, 113, 133, 0.3); } 50% { box-shadow: 0 0 15px rgba(251, 113, 133, 0.6); } 100% { box-shadow: 0 0 5px rgba(251, 113, 133, 0.3); } }
@keyframes glowing-green { 0% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.3); } 50% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.6); } 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.3); } }


.glow-on-hover.hover-glow-sky:hover { animation: glowing-sky 1.5s infinite; }
.glow-on-hover.hover-glow-emerald:hover { animation: glowing-emerald 1.5s infinite; }
.glow-on-hover.hover-glow-amber:hover { animation: glowing-amber 1.5s infinite; }
.glow-on-hover.hover-glow-violet:hover { animation: glowing-violet 1.5s infinite; }
.glow-on-hover.hover-glow-rose:hover { animation: glowing-rose 1.5s infinite; }
.glow-on-hover.hover-glow-green:hover { animation: glowing-green 1.5s infinite; }