/* ============================================================
   FieldTracker — Clean Agricultural Theme
   ============================================================ */

:root {
    /* --- Standard Grün (Listen & Felder) --- */
    --green-dark: #2d6a4f;
    --green-mid: #40916c;
    --green-light: #74c69d;
    --green-pale: #d8f3dc;
    --border: #cde6d5;
    /* --- NEU: Gelb/Gold (Ordner) --- */
    --yellow-dark: #b37700; /* Kräftiges dunkles Senfgelb für Überschriften & Tabellenköpfe */
    --yellow-mid: #e09e00; /* Strahlendes Goldgelb für Buttons */
    --yellow-pale: #fff8e6; /* Sehr zartes Gelb für Tabellen-Hover */
    --yellow-border: #fceabf; /* Gelblicher Rahmen */
    /* --- Globale Farben --- */
    --accent: #f4a261;
    --accent-dark: #e76f51;
    --bg: #f8faf9;
    --surface: #ffffff;
    --text: #1b2e22;
    --text-muted: #6b8f71;
    --shadow-sm: 0 1px 4px rgba(45,106,79,.10);
    --shadow-md: 0 4px 16px rgba(45,106,79,.13);
    --radius: 8px;
}

/* ============================================================
   THEME SWITCHER (Die Magie!)
   ============================================================ */
/* Macht alle darin liegenden Elemente automatisch Gelb */
.theme-folder {
    --green-dark: var(--yellow-dark);
    --green-mid: var(--yellow-mid);
    --green-pale: var(--yellow-pale);
    --border: var(--yellow-border);
    --text-muted: var(--yellow-dark);
}

    /* Passt den Fokus-Ring für Formularfelder im Ordner-Theme an */
    .theme-folder .form-control:focus,
    .theme-folder .form-select:focus,
    .theme-folder .btn:focus {
        box-shadow: 0 0 0 3px rgba(224, 158, 0, 0.25);
        border-color: var(--yellow-mid);
    }

/* Setzt Elemente zwingend wieder auf Grün zurück (z.B. für Tabellen) */
.theme-green {
    --green-dark: #2d6a4f;
    --green-mid: #40916c;
    --green-pale: #d8f3dc;
    --border: #cde6d5;
}

/* ============================================================
   BASE & ELEMENTE
   ============================================================ */
html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin-bottom: 60px;
}

h1, h2, h3, h4 {
    color: var(--green-dark);
    font-weight: 700;
}

h1 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.35rem;
}

a {
    color: var(--green-mid);
}

    a:hover {
        color: var(--green-dark);
    }

/* --- Navbar --- */
.navbar {
    background-color: var(--surface) !important;
    border-bottom: 2px solid var(--green-pale) !important;
    box-shadow: var(--shadow-sm) !important;
}

.navbar-brand {
    color: var(--green-dark) !important;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.3px;
}

.nav-link.text-dark {
    color: var(--text) !important;
    font-weight: 500;
    transition: color .15s;
}

    .nav-link.text-dark:hover {
        color: var(--green-mid) !important;
    }

.nav-active {
    background-color: var(--green-mid);
    color: white !important;
    border-radius: 5px;
    font-weight: bold;
    padding: 3px 12px !important;
    margin: 5px 4px;
}

/* --- Buttons --- */
.btn {
    border-radius: var(--radius);
    font-weight: 500;
    transition: background .15s, border-color .15s, transform .1s;
}

    .btn:active {
        transform: scale(.97);
    }

.btn-primary {
    background-color: var(--green-mid);
    border-color: var(--green-mid);
    color: #fff;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--green-dark);
        border-color: var(--green-dark);
        color: #fff;
    }

.btn-secondary {
    background-color: #e2ede6;
    border-color: #c6dccb;
    color: var(--green-dark);
}

    .btn-secondary:hover {
        background-color: #cfe0d3;
        border-color: #b0ccb6;
        color: var(--green-dark);
    }

.btn-danger {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
}

    .btn-danger:hover {
        background-color: #c05a3e;
        border-color: #c05a3e;
        color: #fff;
    }

.btn-warning {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

    .btn-warning:hover {
        background-color: #d98a50;
        border-color: #d98a50;
        color: #fff;
    }

.btn-success {
    background-color: #52b788;
    border-color: #52b788;
    color: #fff;
}

    .btn-success:hover {
        background-color: var(--green-mid);
        border-color: var(--green-mid);
        color: #fff;
    }

.btn-outline-primary {
    color: var(--green-mid);
    border-color: var(--green-mid);
}

    .btn-outline-primary:hover {
        background-color: var(--green-mid);
        border-color: var(--green-mid);
        color: #fff;
    }

.btn-outline-danger {
    color: var(--accent-dark);
    border-color: var(--accent-dark);
}

    .btn-outline-danger:hover {
        background-color: var(--accent-dark);
        color: #fff;
    }

.btn-outline-success {
    color: #52b788;
    border-color: #52b788;
}

    .btn-outline-success:hover {
        background-color: #52b788;
        color: #fff;
    }

.btn-outline-info {
    color: #2196a6;
    border-color: #2196a6;
}

    .btn-outline-info:hover {
        background-color: #2196a6;
        color: #fff;
    }

.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(64,145,108,.25);
    outline: none;
}

/* --- Form controls --- */
.form-control, .form-select {
    border-color: var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--green-mid);
        box-shadow: 0 0 0 3px rgba(64,145,108,.2);
    }

.form-label {
    font-weight: 600;
    color: var(--green-dark);
    font-size: .9rem;
}

/* --- Tables --- */
.table {
    border-radius: var(--radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

    .table thead th {
        background-color: var(--green-dark);
        color: #fff;
        font-weight: 600;
        font-size: .875rem;
        letter-spacing: .03em;
        border: none;
        padding: .75rem 1rem;
    }

    .table tbody tr {
        transition: background .12s;
    }

.table-hover tbody tr:hover {
    background-color: var(--green-pale) !important;
}

.table tbody td {
    border-color: #e8f2ea;
    padding: .65rem 1rem;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f4faf5;
}

/* --- Badges --- */
.badge.bg-secondary {
    background-color: var(--green-mid) !important;
    font-weight: 500;
}

/* --- Alerts --- */
.alert-danger {
    background-color: #fdf0ec;
    border-color: #f5c6b8;
    color: #8b3a2a;
    border-radius: var(--radius);
}

/* --- Cards --- */
.ft-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    transition: box-shadow .2s, transform .2s;
}

    .ft-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.ft-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1;
}

.ft-stat-count {
    font-size: 1rem;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1;
}

.ft-stat-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-top: .25rem;
}

.ft-stat-icon {
    font-size: 2rem;
    line-height: 1;
}

/* State color dots */
.ft-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.ft-dot-unbearbeitet {
    background: #adb5bd;
}

.ft-dot-bearbeitet {
    background: #f4a261;
}

.ft-dot-bepflanzt {
    background: #40916c;
}

.ft-dot-geerntet {
    background: #f9c74f;
}

.ft-dot-brache {
    background: #b5838d;
}

/* --- Footer --- */
.footer {
    border-top: 1px solid var(--border) !important;
    padding: .75rem 0;
    font-size: .85rem;
    color: var(--text-muted);
}

/* --- DL lists --- */
dl.row dt {
    color: var(--text-muted);
    font-weight: 600;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

dl.row dd {
    color: var(--text);
    font-size: .975rem;
}

hr {
    border-color: var(--border);
    opacity: 1;
}

/* --- Utility --- */
.text-muted {
    color: var(--text-muted) !important;
}

/* Map Label */
.custom-map-label {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #555;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: bold;
    color: #000;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    white-space: nowrap;
}

.custom-highlight {
    background-color: #fff3cd !important;
    transition: background-color 0.4s ease;
}

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background-color: var(--green-mid);
}

    input:checked + .slider:before {
        transform: translateX(26px);
    }

/* ==========================================
   NEU: "Erledigt"-Zeilen-Markierung
   Wenn ein Feld in einem Ordner als "Erledigt" markiert wurde,
   wird die gesamte Tabellenzeile rot hinterlegt.
   ========================================== */
tr.field-erledigt {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-left: 4px solid #dc3545;
}

tr.field-erledigt td {
    color: #842029;
}

tr.field-erledigt:hover {
    background-color: rgba(220, 53, 69, 0.25) !important;
}

/* Button-Übergänge für sanfte Farbwechsel */
.erledigt-btn {
    transition: all 0.2s ease-in-out;
    min-width: 95px;
}