/* ============================================================
   GeoGix Admin – Design-System "Nachtkarte"
   Warmes Anthrazit, Trophäen-Gold als einziger Akzent,
   Höhenlinien-Textur als Kartografie-Motiv.
   Typografie: Space Grotesk (Display) + Inter (UI/Daten).
   ============================================================ */

:root {
    --gx-bg: #0e0d0b;
    --gx-surface: #171410;
    --gx-surface-2: #1c1914;
    --gx-line: rgba(242, 239, 233, 0.08);
    --gx-line-strong: rgba(242, 239, 233, 0.16);
    --gx-gold: #ffb300;
    --gx-gold-bright: #ffc233;
    --gx-gold-deep: #ff8f00;
    --gx-text: #f2efe9;
    --gx-text-2: #a69f92;
    --gx-danger: #ef5060;
    --gx-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --gx-font-body: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
}

html {
    background-color: var(--gx-bg);
}

html, body {
    font-family: var(--gx-font-body);
    margin: 0;
    padding: 0;
    min-height: 100%;
    color: var(--gx-text);
    background-color: var(--gx-bg);
    /* Signature: Höhenlinien + Vermessungskreuze, dazu ein warmer Lichtschein */
    background-image:
        radial-gradient(1100px 480px at 75% -12%, rgba(255, 143, 0, 0.06), transparent 60%),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'><g fill='none' stroke='%23ffb300' stroke-opacity='0.05'><path d='M120 34c62 0 106 40 106 92s-50 86-108 86S16 176 16 124 58 34 120 34Z'/><path d='M120 62c46 0 78 28 78 64s-36 62-80 62-70-26-70-62 26-64 72-64Z'/><path d='M121 90c28 0 50 16 50 36s-22 38-52 38-44-17-44-38 18-36 46-36Z'/><path d='M428 326c72 0 112 48 112 102s-56 98-122 98-104-46-104-100 44-100 114-100Z'/><path d='M427 358c52 0 82 34 82 70s-40 66-88 66-74-32-74-68 30-68 80-68Z'/><path d='M426 392c30 0 50 19 50 38s-24 38-52 38-46-18-46-38 18-38 48-38Z'/></g><g fill='none' stroke='%23f2efe9' stroke-opacity='0.055'><path d='M280 64v12M274 70h12'/><path d='M64 424v12M58 430h12'/><path d='M502 140v12M496 146h12'/><path d='M298 498v12M292 504h12'/></g></svg>");
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Layout-Container transparent halten, damit die Textur durchscheint */
#app,
.page,
.mud-layout,
.mud-main-content {
    background: transparent !important;
}

.gx-page {
    max-width: 1440px;
    margin: 0 auto;
}

/* ---------------- Fokus & Barrierefreiheit ---------------- */
:focus-visible {
    outline: 2px solid rgba(255, 179, 0, 0.7);
    outline-offset: 2px;
    border-radius: 4px;
}

h1:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------- Scrollbars ---------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #3a352c transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: #3a352c;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------------- Typografie ---------------- */
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-family: var(--gx-font-display);
}

.mud-typography-h4 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

    .mud-typography-h4 .mud-icon-root {
        color: var(--gx-gold-bright);
    }

.mud-typography-h5 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--gx-gold);
}

    a:hover, .btn-link:hover {
        color: var(--gx-gold-bright);
    }

/* ---------------- Seitenkopf & Abschnitte ---------------- */
.gx-pagehead {
    margin: 4px 0 12px;
}

.gx-eyebrow {
    font-family: var(--gx-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gx-gold);
    opacity: 0.85;
    margin-bottom: 6px;
}

.gx-pagetitle {
    font-family: var(--gx-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--gx-text);
}

.gx-pagesub {
    color: var(--gx-text-2);
    margin: 8px 0 0;
    font-size: 0.95rem;
    max-width: 60ch;
}

.gx-section {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 14px;
}

.gx-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gx-text-2);
    white-space: nowrap;
}

.gx-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gx-line);
}

/* ---------------- Dashboard-Kacheln ---------------- */
.gx-tilegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.gx-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(180deg, var(--gx-surface-2), var(--gx-surface));
    border: 1px solid var(--gx-line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--gx-text);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .gx-tile:hover {
        color: var(--gx-text);
        border-color: rgba(255, 179, 0, 0.35);
        transform: translateY(-2px);
        box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 179, 0, 0.08);
    }

.gx-tile-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(255, 179, 0, 0.1);
    border: 1px solid rgba(255, 179, 0, 0.18);
    color: var(--gx-gold-bright);
}

    .gx-tile-icon .mud-icon-root {
        color: var(--gx-gold-bright);
    }

.gx-tile-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gx-tile-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.gx-tile-desc {
    color: var(--gx-text-2);
    font-size: 0.82rem;
    line-height: 1.35;
}

.gx-tile-arrow {
    margin-left: auto;
    flex: none;
    color: var(--gx-gold-bright) !important;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.gx-tile:hover .gx-tile-arrow {
    opacity: 1;
    transform: translateX(0);
}

.gx-tile--static:hover {
    transform: none;
}

.gx-tile--danger {
    grid-column: span 2;
}

@media (max-width: 700px) {
    .gx-tile--danger {
        grid-column: auto;
    }
}

.gx-tile--danger .gx-tile-icon {
    background: rgba(239, 80, 96, 0.1);
    border-color: rgba(239, 80, 96, 0.25);
}

    .gx-tile--danger .gx-tile-icon .mud-icon-root {
        color: var(--gx-danger);
    }

.gx-tile--danger:hover {
    border-color: rgba(239, 80, 96, 0.4);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(239, 80, 96, 0.1);
}

/* ---------------- AppBar ---------------- */
.gx-appbar {
    position: sticky !important;
    top: 0;
    z-index: 1300;
    background: rgba(14, 13, 11, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--gx-line);
    box-shadow: none !important;
}

.gx-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--gx-text);
    margin-left: 4px;
}

    .gx-brand:hover {
        color: var(--gx-text);
    }

/* Logo-Kachel wie das Homepage-Favicon: dunkle Fläche, G-Mark mit Orange-Verlauf */
.gx-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #0b0e14;
    border: 1px solid var(--gx-line-strong);
    box-shadow: 0 4px 14px -4px rgba(255, 122, 45, 0.45);
}

.gx-brand-name {
    font-family: var(--gx-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

    .gx-brand-name b {
        font-weight: 700;
        background: linear-gradient(135deg, #ffce81, #ff9a4d, #ff6a2a);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.gx-brand-tag {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gx-text-2);
    border: 1px solid var(--gx-line-strong);
    border-radius: 999px;
    padding: 3px 8px;
    line-height: 1;
}

.gx-version {
    font-size: 0.72rem;
    color: var(--gx-text-2);
    font-variant-numeric: tabular-nums;
    margin-right: 16px;
    white-space: nowrap;
}

.gx-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--gx-text);
    margin-right: 6px;
    white-space: nowrap;
}

.gx-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(255, 179, 0, 0.14);
    border: 1px solid rgba(255, 179, 0, 0.3);
    color: var(--gx-gold-bright);
    font-size: 0.78rem;
    font-weight: 700;
}

/* ---------------- Drawer / Navigation ---------------- */
.gx-drawer {
    background: #12100c !important;
    border-right: 1px solid var(--gx-line);
    box-shadow: none !important;
}

    .gx-drawer .mud-nav-link {
        margin: 1px 10px;
        border-radius: 9px;
        color: var(--gx-text-2);
        font-family: var(--gx-font-body);
        font-size: 0.875rem;
        font-weight: 500;
    }

        .gx-drawer .mud-nav-link .mud-nav-link-icon {
            color: #7d7669;
        }

        .gx-drawer .mud-nav-link:hover {
            background: rgba(242, 239, 233, 0.05);
            color: var(--gx-text);
        }

        .gx-drawer .mud-nav-link.active {
            background: rgba(255, 179, 0, 0.12);
            color: var(--gx-gold-bright);
        }

            .gx-drawer .mud-nav-link.active .mud-nav-link-icon {
                color: var(--gx-gold-bright);
            }

    /* Gruppen-Header als Abschnitts-Label */
    .gx-drawer .mud-nav-group > .mud-nav-link {
        text-transform: uppercase;
        font-size: 0.66rem;
        letter-spacing: 0.13em;
        font-weight: 600;
        color: #8a8375;
        margin-top: 12px;
    }

        .gx-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
            display: none;
        }

        .gx-drawer .mud-nav-group > .mud-nav-link:hover {
            background: transparent;
            color: var(--gx-text-2);
        }

/* ---------------- Karten & Flächen ---------------- */
.mud-card,
.mud-paper.mud-card {
    background: linear-gradient(180deg, var(--gx-surface-2), var(--gx-surface));
    border: 1px solid var(--gx-line);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.mud-dialog {
    border: 1px solid var(--gx-line-strong);
}

/* ---------------- Buttons ---------------- */
.mud-button-root {
    text-transform: none;
    font-family: var(--gx-font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mud-button-filled-primary {
    background: linear-gradient(160deg, var(--gx-gold-bright), #ffa000);
    color: #231604;
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px -6px rgba(255, 160, 0, 0.45);
    transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.12s ease;
}

    .mud-button-filled-primary:hover {
        background: linear-gradient(160deg, #ffd04d, var(--gx-gold));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 24px -6px rgba(255, 170, 0, 0.55);
    }

    .mud-button-filled-primary:active {
        transform: translateY(1px);
    }

/* ---------------- Tabs ---------------- */
.mud-tabs .mud-tab {
    text-transform: none;
    font-family: var(--gx-font-body);
    font-weight: 600;
    font-size: 0.85rem;
}

.mud-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--gx-line);
    background: transparent !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--gx-gold-bright);
}

.mud-tabs .mud-tab-slider {
    background: linear-gradient(90deg, var(--gx-gold-deep), var(--gx-gold-bright));
    height: 2px;
}

/* ---------------- Tabellen ---------------- */
.mud-table {
    background: transparent;
    border: 1px solid var(--gx-line);
    border-radius: 12px;
}

    .mud-table .mud-table-container {
        background: transparent;
    }

    .mud-table .mud-table-head .mud-table-cell {
        font-family: var(--gx-font-body);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gx-text-2);
        background: #14120e !important;
        border-bottom: 1px solid var(--gx-line-strong);
    }

    .mud-table .mud-table-cell {
        font-size: 0.855rem;
        font-variant-numeric: tabular-nums;
        border-color: var(--gx-line);
    }

    .mud-table .mud-table-pagination {
        border-top: 1px solid var(--gx-line);
    }

/* ---------------- Chips ---------------- */
.mud-chip {
    font-weight: 600;
    font-size: 0.72rem;
    border-radius: 7px;
}

/* ---------------- Login ---------------- */
.gx-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
}

.gx-login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(23, 20, 16, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--gx-line-strong);
    border-radius: 20px;
    padding: 40px 36px 32px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 60px -30px rgba(255, 143, 0, 0.35);
}

.gx-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    text-align: center;
}

.gx-login-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #0b0e14;
    border: 1px solid var(--gx-line-strong);
    box-shadow: 0 10px 30px -8px rgba(255, 122, 45, 0.5);
}

.gx-wordmark {
    font-family: var(--gx-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    color: var(--gx-text);
}

    .gx-wordmark b {
        font-weight: 700;
        background: linear-gradient(135deg, #ffce81, #ff9a4d, #ff6a2a);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.gx-login-sub {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gx-text-2);
}

.gx-login-hint {
    color: var(--gx-text-2);
    font-size: 0.85rem;
    margin: 2px 0 0;
}

.gx-login-foot {
    font-size: 0.72rem;
    color: #6b665c;
    letter-spacing: 0.04em;
}

/* ---------------- Formular-Validierung ---------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #78c841;
}

.invalid {
    outline: 1px solid var(--gx-danger);
}

.validation-message {
    color: var(--gx-danger);
}

/* ---------------- Fehleranzeigen ---------------- */
#blazor-error-ui {
    background: #241114;
    color: #ffd7da;
    border-top: 1px solid rgba(239, 80, 96, 0.4);
    bottom: 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 10px;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}