/* ============================================================================
   EASYBAKUS – ADMIN-THEME
   ----------------------------------------------------------------------------
   Vereinheitlicht alle Admin-Seiten und übernimmt 1:1 die Design-Sprache der
   "Meine Gebäude"/Report-Seiten (report.css `.mgr`):
     • flächiges Weiß, ECKIGE Flächen (border-radius 2px, kein "rund"),
     • kein Seiten-Margin (nur der Content-Gutter),
     • Grün #3aa655 / Heading #1e4d2b, dezente Rahmen #e2e8f0,
     • CLEAN & LESBAR: weiße Tabellen, graue Kopfzeile (#f8fafc), dunkle Schrift.

   Funktionsweise (nicht-invasiv):
   - Jede Admin-Seite trägt `.admin-page` am Wurzel-Container.
   - `body:has(.admin-page)` trifft auch Overlay-Modals & geteilte Komponenten
     (AdminDataTable/SimpleModal), die als Geschwister liegen.
   - Höhere Spezifität überschreibt die in Seiten/Komponenten verbliebenen
     dunklen Inline-`<style>`-Regeln, ohne Markup/Funktion zu ändern.
   ============================================================================ */

/* ─── Helle Design-Tokens im Admin-Scope (Werte aus report.css `.mgr`) ─── */
.readable-container.admin-page {
    --green: #3aa655;
    --green-dark: #2b7a40;
    --green-soft: #f3faf4;
    --heading: #1e4d2b;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #1f2937;
    --text-med: #475569;
    --text-light: #64748b;
    --alt: #f8fafc;

    /* Variablen, die globales App-CSS / geteilte Komponenten konsumieren. */
    --bg-light: #ffffff;
    --bg-lighter: #f8fafc;
    --bg-white: #ffffff;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-header-bg: #ffffff;
    --card-body-bg: #ffffff;
    --secondary-light: #f8fafc;
    --text-dark: #1f2937;
    --text-medium: #475569;
    --text-light: #64748b;
    --primary-heading: #1e4d2b;
    --primary-text: #2b7a40;
    --primary-color: #3aa655;
    --primary-dark: #2b7a40;
    --secondary-color: #2f8c47;
    --border-color: #e2e8f0;

    /* Variablen von AdminDataTable (kaskadieren in die Komponente). */
    --text-color: #1f2937;
    --primary: #3aa655;
    --input-bg: #ffffff;
    --muted-color: #64748b;
    --table-header-bg: #f8fafc;
    --table-row-alt: #fafafa;
    --table-row-hover: #f3faf4;

    /* Flächiges Weiß, ECKIG, ohne eigenes Margin (nur Content-Gutter). */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 2px;
    box-shadow: none;
    color: #1f2937;
    max-width: none;
    margin: 0;
    padding: 1.25rem 1.5rem;
}

body:has(.admin-page) {
    color: #1f2937;

    /* ─────────────────────────── Seiten-Header ─────────────────────────── */
    .admin-header {
        margin-bottom: 1.25rem;
        padding-bottom: 0.85rem;
        border-bottom: 2px solid #e2e8f0;
    }

    .admin-header h1,
    .detail-header h1 {
        color: #1e4d2b;
        font-weight: 700;
        font-size: 1.5rem;
    }

    .admin-header p,
    .detail-header p {
        color: #64748b;
        margin: 0.25rem 0 0 0;
        font-size: 0.9rem;
    }

    .record-count,
    .text-muted,
    .muted {
        color: #64748b !important;
    }

    .text-danger,
    .required {
        color: #dc2626 !important;
    }

    /* ─────────────────────────── Toolbar / Filter ─────────────────────── */
    .filter-bar,
    .time-filter,
    .action-buttons,
    .status-buttons,
    .form-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    /* ─────────────────────────── Eingabefelder ────────────────────────── */
    .search-input,
    .filter-select,
    .filter-input,
    .form-input,
    .edit-input,
    .edit-input-sm,
    .adt-search,
    .adt-page-size,
    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .form-group textarea,
    .time-filter select {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        padding: 0.5rem 0.7rem;
        color: #1f2937;
        font-size: 0.9rem;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .search-input::placeholder,
    .form-input::placeholder,
    .edit-input::placeholder,
    .adt-search::placeholder,
    .form-group input::placeholder,
    .form-group textarea::placeholder {
        color: #94a3b8;
    }

    .search-input:focus,
    .filter-select:focus,
    .filter-input:focus,
    .form-input:focus,
    .edit-input:focus,
    .edit-input-sm:focus,
    .adt-search:focus,
    .adt-page-size:focus,
    .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #3aa655;
        box-shadow: 0 0 0 3px rgba(58, 166, 85, 0.15);
    }

    .form-group label,
    .checkbox-label {
        color: #475569;
        font-size: 0.9rem;
    }

    /* ─────────────────────────────── Buttons ──────────────────────────── */
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning,
    .btn-save,
    .btn-back,
    .btn-back-conv,
    .btn-cancel,
    .btn-view,
    .btn-copy,
    .btn-status,
    .btn-toggle,
    .btn-verify,
    .btn-unverify,
    .btn-delete,
    .btn-edit,
    .btn-buildings,
    .btn-conversations,
    .btn-message,
    .btn-confirm-verify,
    .btn-confirm-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.5rem 0.95rem;
        border: 1px solid transparent;
        border-radius: 4px;
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    }

    .btn-sm {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }

    /* Primär / Speichern / Bestätigen → gefülltes Grün */
    .btn-primary,
    .btn-save,
    .btn-success,
    .btn-confirm-verify,
    .btn-verify {
        background: #3aa655;
        color: #ffffff;
        border-color: #3aa655;
    }

    .btn-primary:hover:not(:disabled),
    .btn-save:hover:not(:disabled),
    .btn-success:hover:not(:disabled),
    .btn-confirm-verify:hover:not(:disabled),
    .btn-verify:hover:not(:disabled) {
        background: #2b7a40;
        border-color: #2b7a40;
    }

    /* Sekundär / Navigation → weiß mit Rahmen */
    .btn-secondary,
    .btn-back,
    .btn-back-conv,
    .btn-cancel,
    .btn-view,
    .btn-copy,
    .btn-status,
    .btn-toggle,
    .btn-edit,
    .btn-buildings,
    .btn-conversations,
    .btn-message,
    .btn-unverify {
        background: #ffffff;
        color: #1f2937;
        border-color: #cbd5e1;
    }

    .btn-secondary:hover:not(:disabled),
    .btn-back:hover:not(:disabled),
    .btn-back-conv:hover:not(:disabled),
    .btn-cancel:hover:not(:disabled),
    .btn-view:hover:not(:disabled),
    .btn-copy:hover:not(:disabled),
    .btn-status:hover:not(:disabled),
    .btn-toggle:hover:not(:disabled),
    .btn-edit:hover:not(:disabled),
    .btn-buildings:hover:not(:disabled),
    .btn-conversations:hover:not(:disabled),
    .btn-message:hover:not(:disabled),
    .btn-unverify:hover:not(:disabled) {
        border-color: #3aa655;
        color: #2b7a40;
        background: #f3faf4;
    }

    /* Gefahr / Löschen → rot, dezent (Report-Stil: weiß mit rotem Rand) */
    .btn-danger,
    .btn-delete,
    .btn-confirm-delete {
        background: #ffffff;
        color: #dc2626;
        border-color: #fecaca;
    }

    .btn-danger:hover:not(:disabled),
    .btn-delete:hover:not(:disabled),
    .btn-confirm-delete:hover:not(:disabled) {
        background: #fef2f2;
        border-color: #dc2626;
    }

    /* Warnung → bernstein */
    .btn-warning {
        background: #ffffff;
        color: #b45309;
        border-color: #fde68a;
    }

    .btn-warning:hover:not(:disabled) {
        background: #fffbeb;
        border-color: #f59e0b;
    }

    .btn-primary:disabled,
    .btn-secondary:disabled,
    .btn-danger:disabled,
    .btn-success:disabled,
    .btn-warning:disabled,
    .btn-save:disabled,
    .btn-delete:disabled,
    .btn-verify:disabled,
    .btn-unverify:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Icon-Buttons → dezent, grün beim Hover */
    .btn-icon {
        background: transparent;
        border: none;
        color: #64748b;
        cursor: pointer;
        padding: 0.3rem 0.45rem;
        border-radius: 4px;
        transition: background 0.15s, color 0.15s;
    }

    .btn-icon:hover {
        background: #f1f5f9;
        color: #2b7a40;
    }

    .btn-icon-danger:hover {
        color: #dc2626;
    }

    /* ─────────────────────────────── Tabellen ─────────────────────────── */
    /* Clean & lesbar: weiß, graue Kopfzeile, dunkle Schrift, eckige Rahmen.
       Deckt Seiten-Tabellen, geteilte AdminDataTable (.adt-table) und einfache
       <table> innerhalb einer Admin-Seite ab. */
    .table-wrapper,
    .adt-wrapper,
    .table-scroll {
        overflow-x: auto;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 2px;
    }

    .user-table,
    .data-table,
    .conv-table,
    .redemptions-table,
    .price-table,
    .adt-table,
    .admin-page table {
        width: 100%;
        border-collapse: collapse;
        background: #ffffff;
        font-size: 0.86rem;
        color: #1f2937;
    }

    .user-table th,
    .data-table th,
    .conv-table th,
    .redemptions-table th,
    .price-table th,
    .adt-table th,
    .admin-page table th {
        background: #f8fafc;
        color: #1f2937;
        font-weight: 700;
        text-align: left;
        padding: 0.55rem 0.7rem;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

    .user-table td,
    .data-table td,
    .conv-table td,
    .redemptions-table td,
    .price-table td,
    .adt-table td,
    .admin-page table td {
        padding: 0.5rem 0.7rem;
        border-bottom: 1px solid #e2e8f0;
        color: #1f2937;
        vertical-align: middle;
    }

    /* Dezente Zebra-Streifen + grüner Hover für gute Scanbarkeit. */
    .user-table tbody tr:nth-child(even),
    .data-table tbody tr:nth-child(even),
    .adt-table tbody tr:nth-child(even),
    .admin-page table tbody tr:nth-child(even) {
        background: #fafafa;
    }

    .user-table tbody tr:hover,
    .data-table tbody tr:hover,
    .conv-table tbody tr:hover,
    .redemptions-table tbody tr:hover,
    .price-table tbody tr:hover,
    .adt-table tbody tr:hover,
    .admin-page table tbody tr:hover {
        background: #f3faf4;
    }

    /* Aktions-Spalten schrumpfen → inhaltliche Spalten füllen die Breite. */
    .actions-cell,
    td.actions-cell {
        width: 1%;
        white-space: nowrap;
    }

    .row-inactive {
        opacity: 0.6;
    }

    code,
    .promo-code {
        background: #f1f5f9;
        color: #2b7a40;
        padding: 0.1rem 0.4rem;
        border-radius: 3px;
        font-size: 0.85em;
    }

    /* ───────────────── AdminDataTable – Controls & Paging ──────────────── */
    .adt-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .btn-page {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        color: #1f2937;
        padding: 0.3rem 0.7rem;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
    }

    .btn-page:hover:not(:disabled) {
        background: #f3faf4;
        border-color: #3aa655;
        color: #2b7a40;
    }

    .btn-page:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .adt-paging,
    .adt-paging-info,
    .adt-paging-nav {
        color: #64748b;
    }

    .adt-paging strong {
        color: #1f2937;
    }

    /* ───────────────────────── Karten / Panels ────────────────────────── */
    .form-card,
    .detail-card,
    .config-item,
    .kpi-card,
    .chart-card,
    .paddle-config-card,
    .paddle-toggle-card,
    .panel,
    .toggle-card,
    .redemptions-panel,
    .stat-card,
    .sub-card,
    .card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 2px;
        color: #1f2937;
    }

    .card-head,
    .panel-header,
    .chart-header,
    .conv-detail-header {
        border-bottom: 2px solid #e2e8f0;
        color: #1e4d2b;
        font-weight: 700;
    }

    .panel-header h3,
    .chart-header h3,
    .toggle-header strong,
    .conv-detail-header h2,
    .card-head {
        color: #1e4d2b;
    }

    .info-row,
    .info-list .info-label,
    .price-row {
        color: #475569;
    }

    .kpi-card .kpi-value,
    .stat-card .stat-value {
        color: #2b7a40;
    }

    /* Info-/Hinweisbox → dezentes Blau, eckig */
    .info-box {
        background: #eef2ff;
        border: 1px solid #c7d2fe;
        color: #3730a3;
        border-radius: 2px;
    }

    .env-hint,
    .toggle-subtitle {
        color: #64748b;
    }

    /* Seiten-spezifische Texte, die auf den jetzt weißen Flächen sonst zu hell
       (unlesbar) wären → auf dunkle/akzentuierte Farben zwingen. */
    .user-name,
    .paddle-toggle-header,
    .toggle-header,
    .auto-refresh-toggle,
    .status-label,
    .paddle-toggle-status {
        color: #1f2937;
    }

    .paddle-toggle-header {
        color: #1e4d2b;
        font-weight: 700;
    }

    .user-email,
    .empty-hint,
    .hint-small,
    .placeholder-hint,
    .paddle-toggle-description {
        color: #64748b;
    }

    .sender-display,
    .sender-display strong {
        color: #2b7a40;
    }

    /* ───────────────────────────── Badges (eckig) ─────────────────────── */
    .badge,
    .role-badge,
    .env-badge,
    .addr-badge,
    .addr-verified,
    .addr-pending,
    .addr-none,
    .status-badge,
    .count-badge,
    .project-status-badge,
    .appt-status-badge,
    .badge-default,
    .badge-feedback,
    .badge-success,
    .badge-warning,
    .badge-active,
    .badge-inactive {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.18rem 0.5rem;
        border-radius: 3px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.3;
        white-space: nowrap;
    }

    /* Standard-Badge: neutral grün getönt. `.role-badge` bleibt ohne eigene
       Farbe, damit rollenspezifische Tints (admin/contractor/…) erhalten bleiben. */
    .badge,
    .count-badge {
        background: #f3faf4;
        color: #2b7a40;
        border: 1px solid #bbf7d0;
    }

    .env-badge,
    .badge-default {
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #cbd5e1;
    }

    .badge-success,
    .badge-active,
    .addr-verified,
    .badge-feedback,
    .sent,
    .completed,
    .projektangenommen,
    .production {
        background: #f3faf4;
        color: #2b7a40;
        border: 1px solid #bbf7d0;
    }

    .badge-warning,
    .addr-pending,
    .proposed,
    .sandbox,
    .received {
        background: #fef9c3;
        color: #854d0e;
        border: 1px solid #fde68a;
    }

    .badge-inactive,
    .cancelled,
    .addr-none,
    .row-inactive .badge {
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid #e2e8f0;
    }

    .status-dot {
        border-radius: 50%;
    }

    /* Seiten-spezifische Chips/Badges, die sonst hell-auf-hell unlesbar wären. */
    .category-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.18rem 0.5rem;
        border-radius: 3px;
        font-size: 0.72rem;
        font-weight: 700;
        background: #f3faf4;
        color: #2b7a40;
        border: 1px solid #bbf7d0;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0.55rem;
        border-radius: 3px;
        font-size: 0.8rem;
        background: #f1f5f9;
        color: #1f2937;
        border: 1px solid #cbd5e1;
    }

    .chip-x {
        background: transparent;
        border: none;
        color: #64748b;
        cursor: pointer;
        padding: 0;
        display: inline-flex;
        align-items: center;
    }

    .chip-x:hover {
        color: #dc2626;
    }

    /* ───────────────────────────── Alerts (eckig) ─────────────────────── */
    .alert-success,
    .alert-error,
    .alert-warning,
    .alert-info,
    .confirm-warning {
        border-radius: 2px;
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }

    .alert-success {
        background: #f3faf4;
        color: #2b7a40;
        border: 1px solid #bbf7d0;
    }

    .alert-error {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fecaca;
    }

    .alert-warning,
    .confirm-warning {
        background: #fffbeb;
        color: #854d0e;
        border: 1px solid #fde68a;
    }

    .alert-info {
        background: #eef2ff;
        color: #3730a3;
        border: 1px solid #c7d2fe;
    }

    /* ───────────────────────── Lade-/Leerzustände ─────────────────────── */
    .loading,
    .empty-state {
        color: #64748b;
        text-align: center;
        padding: 2rem 1rem;
    }

    .empty-state h3 {
        color: #475569;
    }

    /* ───────────────────────────── Modals (eckig, hell) ───────────────── */
    .modal-backdrop {
        background: rgba(15, 23, 42, 0.45);
    }

    .modal,
    .modal-content {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 2px !important;
        color: #1f2937 !important;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25) !important;
    }

    .modal h2,
    .modal h3,
    .modal-header h2,
    .modal-header h3 {
        color: #1e4d2b;
    }

    .modal p,
    .modal-body {
        color: #1f2937;
    }

    .modal-header {
        border-bottom: 2px solid #e2e8f0;
    }

    .modal-footer {
        border-top: 1px solid #e2e8f0;
    }

    /* Geteilte SimpleModal-Komponente (dunkler Default → hell überschreiben). */
    .simple-modal-container {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 2px;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
        color: #1f2937;
    }

    .simple-modal-header {
        border-bottom: 2px solid #e2e8f0;
    }

    .simple-modal-header h3 {
        color: #1e4d2b;
    }

    .simple-modal-close {
        color: #64748b;
    }

    .simple-modal-close:hover {
        color: #dc2626;
    }

    /* ───────────────────── Toggle-Switch (an/aus) ─────────────────────── */
    .toggle-slider {
        background: #cbd5e1;
    }

    .toggle-switch input:checked + .toggle-slider {
        background: #3aa655;
    }

    .toggle-card-active {
        border-color: #3aa655;
        background: #f3faf4;
    }

    .toggle-card-inactive {
        border-color: #e2e8f0;
    }
}

/* ============================================================================
   Mobile (≤768px)
   ============================================================================ */
@media (max-width: 768px) {
    .readable-container.admin-page {
        padding: 1rem;
    }

    body:has(.admin-page) {
        .user-table,
        .data-table,
        .conv-table,
        .redemptions-table,
        .price-table,
        .adt-table,
        .admin-page table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .filter-bar .search-input,
        .filter-bar .filter-select,
        .filter-bar .filter-input {
            flex: 1 1 12rem;
            min-width: 0;
        }

        .modal,
        .modal-content,
        .simple-modal-container {
            width: 92% !important;
            max-width: 92% !important;
        }
    }
}