/* =========================================================
   BASIS / RESET
========================================================= */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Links & Buttons */
a, .btn-link {
    color: var(--rh-link, #006bb7);   /* Linkfarbe des Themas (hell/dunkel), festes Blau nur ohne Design-Tokens (Auftrag 68, D7) */
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Auftrag 68, D2: Überschrift, auf die Blazor nach dem Seitenwechsel springt (FocusOnNavigate), ist kein Bedienelement –
   kein weißer Rahmen darum (sah aus wie ein Fehler) */
h1:focus, h1:focus-visible { outline: none; }

/* Auftrag 68, D2: Knöpfe zeigen den Fokusrahmen nur bei Tastaturbedienung (nach Mausklick kein weißer Kasten) */
.btn:focus-visible,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem #258cfb;
}

/* =========================================================
   LAYOUT
========================================================= */

.page {
    min-height: 100vh;
}

.content {
    padding-top: 1.1rem;
}

.page-title {
    font-weight: 600;
}

.top-row {
    height: 56px;
}

/* =========================================================
   TOPBAR / BUTTON FIX
========================================================= */

.main-topbar {
    position: sticky;
    top: 0;
    z-index: 5000;
}

.theme-toggle-btn {
    position: relative;
    z-index: 1; /* war 6000: lag am Handy über dem Suchfenster (Auftrag 58) */
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: .6rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
}

/* =========================================================
   CARDS / TABLES / FORMS
========================================================= */

.card {
    border-radius: 0.75rem;
}

.card-elevated {
    box-shadow: 0 0.25rem 0.75rem rgba(15, 15, 20, 0.35);
}

.customers-table-wrapper {
    max-height: 60vh;
}

.customers-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* =========================================================
   ICON BUTTONS
========================================================= */

.icon-btn {
    width: 2.3rem;
    height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

/* =========================================================
   THEME SYSTEM – .app-root
========================================================= */

.app-root {
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.45;
}

    /* =========================================================
   RESPONSIVE LAYOUT (Laptop vs. großer Monitor)
   - layout.js setzt an .app-root automatisch:
     - .layout-compact (<= 1200px)
     - .layout-wide
========================================================= */

    /* Standard: nichts kaputt machen */
    .app-root.layout-wide {
    }

    /* ======= KOMPAKT (z.B. 14" Laptop) ======= */
    .app-root.layout-compact .top-row {
        /* Bootstrap px-4 hat !important -> daher hier auch */
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .app-root.layout-compact .content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        overflow-x: hidden;
    }

    /* Buttons & Toolbars dürfen umbrechen */
    .app-root.layout-compact .d-flex {
        flex-wrap: wrap;
    }

    /* Tabellen: NICHT die ganze Seite horizontal scrollen lassen,
   sondern die Tabelle selbst (falls nötig) */
    .app-root.layout-compact table,
    .app-root.layout-compact .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Formfelder: etwas kompakter */
    .app-root.layout-compact .form-control,
    .app-root.layout-compact input,
    .app-root.layout-compact select,
    .app-root.layout-compact textarea {
        font-size: 0.95rem;
    }

    /* Cards: weniger Padding */
    .app-root.layout-compact .card-body {
        padding: 0.85rem;
    }

    /* Überschriften etwas kompakter */
    .app-root.layout-compact .page-title {
        font-size: 1.35rem;
    }

/* =========================================================
   THEME TOGGLE BUTTON – immer klar sichtbar
========================================================= */

.theme-toggle-btn {
    border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Dark: Button klarer Kontrast */
.app-root.theme-dark .theme-toggle-btn {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.28) !important;
}

    .app-root.theme-dark .theme-toggle-btn .bi {
        color: #ffffff !important;
    }

/* Light: Button trotzdem sichtbar */
.app-root.theme-light .theme-toggle-btn {
    background: rgba(17,24,39,0.05) !important;
    color: #111827 !important;
    border-color: rgba(17,24,39,0.18) !important;
}

    .app-root.theme-light .theme-toggle-btn .bi {
        color: #111827 !important;
    }

.file-dropzone {
    position: relative;
    border: 1px dashed rgba(255,255,255,.25);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    overflow: hidden;
}

    .file-dropzone.dragging {
        border-color: rgba(255,255,255,.6);
        background: rgba(255,255,255,.06);
    }

.file-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ===== Planansicht (Auftrag 2) ===== */
.rh-plan-view { position: relative; overflow: hidden; touch-action: none; user-select: none; background: #dfe3e8; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem; height: 68vh; min-height: 320px; cursor: grab; }
.rh-plan-view[data-tool="wand"], .rh-plan-view[data-tool="flaeche"], .rh-plan-view[data-tool="oeffnung"], .rh-plan-view[data-tool="zaehlen"], .rh-plan-view[data-tool="referenz"], .rh-plan-view[data-tool="messen"] { cursor: crosshair; }
.rh-plan-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.rh-plan-world img { position: absolute; left: 0; top: 0; display: block; max-width: none; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.25); pointer-events: none; }
.rh-plan-world svg { position: absolute; left: 0; top: 0; overflow: visible; }
.rh-plan-info { position: absolute; left: .5rem; top: .5rem; max-width: calc(100% - 1rem); background: rgba(255,255,255,.9); color: #212529; border-radius: .35rem; padding: .15rem .5rem; font-size: .8rem; pointer-events: none; }
.rh-plan-info:empty { display: none; }
.rh-plan-toolbar .btn { white-space: nowrap; }
@media (max-width: 767.98px) { .rh-plan-view { height: 56vh; } }

/* ===== Einfach-Modus (Auftrag 4): „Was willst du tun?“, große Knöpfe, Handwerker-Ansicht ===== */
.rh-wasnun { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .85rem; }
.rh-wasnun-kachel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 128px; padding: 1rem; border-radius: .9rem; text-decoration: none; color: var(--bs-body-color); background: var(--bs-tertiary-bg, #f1f3f5); border: 2px solid var(--bs-border-color, #dee2e6); transition: transform .08s, border-color .08s; }
.rh-wasnun-kachel:hover { border-color: var(--bs-primary, #5b4bdb); transform: translateY(-2px); color: var(--bs-body-color); }
.rh-wasnun-kachel i { font-size: 2.2rem; color: var(--bs-primary, #5b4bdb); }
.rh-wasnun-kachel .t { font-size: 1.2rem; font-weight: 700; margin-top: .25rem; }
.rh-wasnun-kachel .s { font-size: .9rem; color: var(--bs-secondary-color, #6c757d); }
.rh-wasnun-badge { position: absolute; top: .5rem; right: .6rem; }
.rh-gross-knopf { font-size: 1.15rem; }
.rh-einfach { font-size: 1.08rem; }
.rh-einfach .btn { padding: .65rem 1rem; font-size: 1.05rem; }
.rh-einfach .btn-sm { padding: .5rem .8rem; font-size: 1rem; }
.rh-einfach .form-control, .rh-einfach .form-select { min-height: 3rem; font-size: 1.05rem; }
/* Einfache Ansicht: ruhige Liste, gleiche Abstände, größere Schrift (Auftrag 68, D2: stärker als die Menü-Grundregel) */
.app-root.rh-einfach .nav-item .nav-link { padding: .65rem .9rem; font-size: 1.05rem; min-height: 3rem; }
.app-root.rh-einfach .nav-item { padding-bottom: .25rem; }

/* Auftrag 6: Gewinn oder Verlust? */
.rh-ergebnis-gross { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.rh-ergebnis-gruen { border-left: 6px solid #198754 !important; }
.rh-ergebnis-gelb { border-left: 6px solid #ffc107 !important; }
.rh-ergebnis-rot { border-left: 6px solid #dc3545 !important; }
.rh-ergebnis-unbekannt { border-left: 6px solid #adb5bd !important; }

/* Auftrag 6: Gewinn oder Verlust? */
.rh-ergebnis-gross { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.rh-ergebnis-gruen { border-left: 6px solid #198754 !important; }
.rh-ergebnis-gelb { border-left: 6px solid #ffc107 !important; }
.rh-ergebnis-rot { border-left: 6px solid #dc3545 !important; }
.rh-ergebnis-unbekannt { border-left: 6px solid #adb5bd !important; }
.rh-plan-meldung { position: sticky; bottom: .75rem; z-index: 1030; margin-top: .75rem; }
.rh-raumtabelle th, .rh-raumtabelle td { white-space: nowrap; }