/* ── Tankstelle Log – Frontend ─────────────────────────────────────────────── */

.tl-form-wrap {
    max-width: 520px; margin: 2rem auto;
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
    font-family: inherit; overflow: hidden;
}

/* Tankstand-Leiste oben */
.tl-tankstand-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .7rem 1.4rem; font-size: .9rem; font-weight: 600;
}
.tl-stand--ok  { background: #d1fae5; color: #065f46; }
.tl-stand--mid { background: #fef3c7; color: #92400e; }
.tl-stand--low { background: #fee2e2; color: #991b1b; }

.tl-tankstand-value { font-size: 1.1rem; font-weight: 700; }

.tl-form-title { margin: 1.2rem 1.5rem .5rem; font-size: 1.15rem; color: #1a202c; }

.tl-form { padding: 0 1.5rem 1.5rem; }

.tl-field { margin-bottom: 1.1rem; }
.tl-field label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; color: #374151; }
.tl-unit { font-weight: 400; color: #6b7280; font-size: .85rem; }

.tl-field input[type="text"],
.tl-field input[type="number"],
.tl-field select {
    width: 100%; padding: .6rem .8rem;
    border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 1rem; background: #fafafa;
    box-sizing: border-box; transition: border-color .15s;
}
.tl-field input:focus, .tl-field select:focus {
    outline: none; border-color: #3b82f6; background: #fff;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* Hinweis / Warnung unter Feldern */
.tl-field-hint {
    display: block; margin-top: .3rem;
    font-size: .8rem; color: #6b7280;
}
.tl-field-warn {
    display: block; margin-top: .3rem;
    font-size: .82rem; color: #b45309;
    background: #fef3c7; padding: .3rem .6rem;
    border-radius: 4px; border-left: 3px solid #f59e0b;
}

/* Vorgang-Toggle */
.tl-toggle-group { display: flex; gap: .5rem; margin-top: .3rem; }
.tl-toggle {
    flex: 1; text-align: center; padding: .6rem 1rem;
    border: 2px solid #d1d5db; border-radius: 6px;
    cursor: pointer; font-weight: 600; font-size: .9rem;
    color: #6b7280; transition: all .15s; user-select: none;
}
.tl-toggle input[type="radio"] { display: none; }
.tl-toggle.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }

.tl-timestamp { font-size: .82rem; color: #9ca3af; font-style: italic; margin-bottom: .8rem; }

.tl-btn {
    display: inline-block; width: 100%; padding: .75rem;
    background: #2563eb; color: #fff; font-size: 1rem;
    font-weight: 600; border: none; border-radius: 6px;
    cursor: pointer; transition: background .15s;
}
.tl-btn:hover { background: #1d4ed8; }

.tl-notice { padding: .8rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .95rem; }
.tl-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.tl-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.tl-error ul { margin: 0; padding-left: 1.2rem; }