/* Saved Web Share V2: Basisdesign aus V1, erweitert fuer Portal und Verwaltung. */
:root {
            color-scheme: dark;
            --bg1: #0f172a;
            --bg2: #1e293b;
            --glass: rgba(255, 255, 255, 0.12);
            --glass-strong: rgba(255, 255, 255, 0.18);
            --border: rgba(255, 255, 255, 0.18);
            --text: #f8fafc;
            --muted: #cbd5e1;
            --accent: #93c5fd;
            --danger: #fecaca;
            --success: #bbf7d0;
            --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: "Segoe UI", "Arial", sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(96, 165, 250, 0.22), transparent 28%),
                radial-gradient(circle at top right, rgba(244, 114, 182, 0.15), transparent 25%),
                linear-gradient(135deg, var(--bg1), var(--bg2));
        }

        body.centered {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .dialog,
        .panel {
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            background: linear-gradient(180deg, var(--glass-strong), var(--glass));
            border: 1px solid var(--border);
            border-radius: 24px;
            box-shadow: var(--shadow);
        }

        .dialog {
            width: min(520px, 100%);
            padding: 28px;
            text-align: center;
        }

        .panel {
            width: min(1200px, calc(100% - 32px));
            margin: 24px auto;
            padding: 24px;
        }

        h1 {
            margin: 0 0 14px 0;
            font-size: 2rem;
            font-weight: 700;
        }

        p {
            margin: 0 0 14px 0;
            line-height: 1.5;
            color: var(--muted);
        }

        .muted {
            color: var(--muted);
            font-size: 0.95rem;
        }

        .message {
            margin: 18px 0;
            padding: 14px 16px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(15, 23, 42, 0.35);
            color: var(--text);
            text-align: left;
            overflow-wrap: anywhere;
        }

        .message.error {
            border-color: rgba(248, 113, 113, 0.25);
            color: var(--danger);
        }

        .message.success {
            border-color: rgba(74, 222, 128, 0.25);
            color: var(--success);
        }

        form {
            margin-top: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            text-align: left;
            color: var(--text);
            font-weight: 600;
        }

        input[type="password"],
        input[type="text"] {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(15, 23, 42, 0.45);
            color: var(--text);
            padding: 14px 16px;
            border-radius: 14px;
            outline: none;
            font-size: 1rem;
        }

        button,
        .secondary-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 18px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(147, 197, 253, 0.18);
            color: var(--text);
            font-size: 0.98rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
        }

        .secondary-button {
            background: rgba(255, 255, 255, 0.08);
        }

        .header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .logout-form {
            margin: 0;
        }

        .meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
            margin: 20px 0 24px 0;
        }

        .meta-box {
            padding: 16px;
            border-radius: 18px;
            background: rgba(15, 23, 42, 0.26);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .meta-box strong {
            display: block;
            margin-bottom: 8px;
        }

        .table-wrap {
            overflow-x: auto;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 960px;
        }

        th,
        td {
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-align: left;
            vertical-align: top;
        }

        th {
            background: rgba(15, 23, 42, 0.24);
            color: var(--text);
            font-size: 0.92rem;
        }

        tr:hover td {
            background: rgba(255, 255, 255, 0.03);
        }

        code, .link-box {
            display: block;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #e2e8f0;
            font-family: Consolas, "Courier New", monospace;
            font-size: 0.9rem;
            white-space: nowrap;
            overflow-x: auto;
        }

        .small {
            font-size: 0.88rem;
        }

        @media (max-width: 800px) {
            .header-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .panel {
                width: calc(100% - 20px);
                padding: 18px;
            }
        }

/* V2-Erweiterungen, auf dem unveraenderten V1-Farbkonzept aufbauend. */
body { padding-bottom: 28px; }
body.centered { padding: 24px; }
body.centered .guest-panel { margin: auto; }
.guest-panel { width: min(520px, 100%); text-align: left; }
.guest-panel .header-row { display: block; margin-bottom: 12px; }
.guest-panel .header-row h1 { text-align: center; }
.guest-panel .header-row p { text-align: center; }
.guest-panel .auth-content h2 { text-align: center; font-size: 1.22rem; }
.guest-panel .auth-content form { margin-top: 22px; }
.guest-panel .auth-content button[type="submit"] { width: 100%; margin-top: 20px; }
.auth-content > p { margin: 8px 0 16px; }
h2 { margin: 1.2rem 0 .8rem; font-size: 1.35rem; line-height: 1.25; }
h3 { margin: 0 0 .7rem; font-size: 1.08rem; line-height: 1.3; }
a { color: var(--accent); overflow-wrap: anywhere; text-underline-offset: 3px; }
a:hover { color: #bfdbfe; }
label { margin-top: 14px; }
input[type="text"], input[type="password"], input[type="datetime-local"], select {
    display: block; width: 100%; min-width: 0; padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px;
    background: rgba(15, 23, 42, .48); color: var(--text);
    font: inherit; font-size: .98rem; outline: none;
}
input::placeholder { color: #94a3b8; opacity: 1; }
select { color-scheme: dark; }
select option { color: #f8fafc; background: #1e293b; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
}
button:hover, .secondary-button:hover { background: rgba(147, 197, 253, .29); color: #fff; }
button:active, .secondary-button:active { transform: translateY(1px); }
form { margin-top: 12px; }
form button { margin-top: 12px; }
.header-row { flex-wrap: wrap; }
.header-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.header-links .secondary-button { white-space: nowrap; }
.identity { font-size: .87rem; padding: 0 4px; overflow-wrap: anywhere; }
.inline-form { display: inline-flex; margin: 0; align-items: center; }
.inline-form button { margin: 0; }
.grant, .form-box {
    background: rgba(15, 23, 42, .28); border: 1px solid var(--border);
    border-radius: 18px; padding: 18px; margin: 14px 0;
}
.grant-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; }
.grant-top p { margin: 0; }
.grant h3 { overflow-wrap: anywhere; }
.two-col, .edit-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.edit-grid form { min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions button { flex: 1 1 170px; }
.copyline { display: flex; align-items: center; gap: 9px; margin: 12px 0; }
.copyline input { flex: 1 1 auto; min-width: 0; font-family: Consolas, "Courier New", monospace; font-size: .88rem; }
.copyline button { flex: 0 0 auto; }
.copy-btn { cursor: pointer; }
details { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
summary { cursor: pointer; color: var(--accent); padding: 8px 0; font-weight: 600; }
summary:hover { color: #bfdbfe; }
.stats { color: var(--muted); font-size: .89rem; margin-top: 10px; }
.ok { color: var(--success); }
.warn { color: var(--danger); }
.danger-button { background: rgba(220,38,38,.17); border-color: rgba(248,113,113,.4); }
.danger-button:hover { background: rgba(220,38,38,.32); }
input[readonly] { cursor: text; }
.panel p code { display: inline; white-space: normal; }
.table-wrap { max-width: 100%; }
table { min-width: 680px; }
th, td { overflow-wrap: anywhere; }
td .secondary-button { white-space: nowrap; }
@media (max-width: 800px) {
    .header-row { flex-direction: column; align-items: flex-start; }
    .header-links { width: 100%; }
}
@media (max-width: 650px) {
    body.centered { padding: 12px; }
    .dialog { padding: 22px 18px; }
    .panel { width: calc(100% - 16px); padding: 16px; }
    .panel h1 { font-size: 1.65rem; }
    .copyline { flex-wrap: wrap; }
    .copyline input { flex-basis: 100%; }
    .grant, .form-box { padding: 14px; }
    .header-links .secondary-button, .header-links form { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    button:active, .secondary-button:active { transform: none; }
}

/* Firmenbranding: nur Login und Erstinstallation; Verwaltung unveraendert. */
.guest-panel .branded-header {
    margin-bottom: 4px;
}
.company-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}
.company-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 340px);
    max-height: 125px;
    object-fit: contain;
}
.company-text {
    font-size: 1.27rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}
.company-fallback {
    margin: 0;
    font-size: 2rem;
}
.guest-panel .auth-content h2 {
    margin-top: 18px;
    margin-bottom: 14px;
}
@media (max-width: 650px) {
    .company-logo { max-width: 100%; max-height: 105px; }
    .company-text { font-size: 1.13rem; }
    .company-fallback { font-size: 1.7rem; }
}

/* Kundenverwaltung: serverseitige Ansichten "Freigaben" und "Neu erstellen". */
.customer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    margin: 18px 0 24px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.customer-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    padding: 12px 20px;
    border-radius: 11px;
    border: 1px solid transparent;
    color: var(--muted);
    text-decoration: none;
    font-weight: 650;
    transition: background .16s ease, border-color .16s ease;
}
.customer-tab:hover,
.customer-tab:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, 0.10);
}
.customer-tab.active {
    color: var(--text);
    background: rgba(147, 197, 253, 0.20);
    border-color: rgba(147, 197, 253, 0.36);
}
@media (max-width: 500px) {
    .customer-tab { flex: 1 1 auto; padding: 12px 10px; }
}