/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Label/tag denoting the user that shared a connection */
.jdbc-share-tag {

    background: #0095ff;
    padding: 0.25em;

    -moz-border-radius:    0.25em;
    -webkit-border-radius: 0.25em;
    -khtml-border-radius:  0.25em;
    border-radius:         0.25em;

    color: white;
    font-size: 0.75em;
    font-weight: bold;

}
/* TUXANET-Branding für Guacamole 1.6
   Farben/Maße = Operations-Design-System (operations/apps/ops/static/css/design-system.css):
   Beige-Fläche, Blau als Akzent, Schrift Inter. Wird NACH dem Guacamole-CSS geladen (app.css). */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('app/ext/tuxanet/fonts/inter-latin-wght.woff2') format('woff2');
}

:root {
    --tx-canvas: #f6f5f1;
    --tx-paper: #ffffff;
    --tx-ink: #181717;
    --tx-graphite: #2e2d2d;
    --tx-charcoal: #575555;
    --tx-ash: #706e6d;
    --tx-mist: #d5d3d2;
    --tx-line: #e8e6e3;
    --tx-accent: #0069a5;
    --tx-accent-dark: #005080;
    --tx-accent-soft: rgb(0 105 165 / 0.10);
    --tx-error: #e53e3e;
    --tx-error-bg: #fee2e2;
    --tx-error-ink: #991b1b;
    --tx-success: #107c10;
    --tx-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tx-radius-card: 10px;
    --tx-radius-btn: 6px;
    --tx-sb-width: 248px;
    --tx-login-width: 440px;
}

html, body {
    background: var(--tx-canvas);
    font-family: var(--tx-font);
    color: var(--tx-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.client { background: #000; }

a { color: var(--tx-accent); }


/* ═══════════════════════ Anmeldung ═══════════════════════
   Links ein weißer Streifen (Maske mittig, Logo unten), rechts das Bild. */

div.login-ui {
    display: flex;
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    background: var(--tx-paper);
}

.login-ui .login-dialog-middle {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--tx-login-width);
    width: var(--tx-login-width);
    box-sizing: border-box;
    padding: 56px 48px 32px;
    text-align: left;
    background: var(--tx-paper);
    box-shadow: 1px 0 0 var(--tx-line), 12px 0 40px rgb(0 0 0 / 0.08);
    position: relative;
    z-index: 1;
    overflow-y: auto;
}

.login-ui .login-dialog,
.login-ui.continuation .login-dialog {
    margin: auto 0;
    width: 100%;
    max-width: none;
    padding: 0;
    font-size: 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
}

.login-ui .login-dialog .logo { display: none; }

.login-ui .login-dialog .version { padding: 0; }
.login-ui .login-dialog .version .app-name {
    text-align: left;
    text-transform: none;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--tx-ink);
}
.login-ui .login-dialog .version .version-number { display: none; }

.login-ui .tuxa-login-text {
    margin: 8px 0 32px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tx-charcoal);
    text-wrap: balance;
}
.login-ui.continuation .tuxa-login-text { display: none; }

.login-ui .login-fields .labeled-field {
    display: block;
    margin: 0 0 18px;
    z-index: auto;
}
.login-ui .login-fields .labeled-field .field-header {
    position: static;
    z-index: auto;
    margin: 0 0 6px;
    opacity: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-graphite);
}
.login-ui .login-dialog .login-fields input,
.login-ui .login-fields .labeled-field.empty input {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 14px;
    font-family: var(--tx-font);
    font-size: 15px;
    color: var(--tx-ink);
    background: var(--tx-paper);
    border: 1px solid var(--tx-mist);
    border-radius: var(--tx-radius-btn);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-ui .login-dialog .login-fields input:focus {
    outline: none;
    border-color: var(--tx-accent);
    box-shadow: 0 0 0 3px var(--tx-accent-soft);
}

.login-ui .login-dialog .buttons { margin: 28px 0 0; text-align: left; }
.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100%;
    padding: 12px 20px;
    font-family: var(--tx-font);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-shadow: none;
    background: var(--tx-accent);
    border: 1px solid var(--tx-accent);
    border-radius: var(--tx-radius-btn);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.login-ui .login-dialog .buttons input[type="submit"]:hover { background: var(--tx-accent-dark); border-color: var(--tx-accent-dark); }
.login-ui .login-dialog .buttons input[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.login-ui.error p.login-error {
    position: absolute;
    top: 24px;
    left: 48px;
    right: auto;
    width: calc(var(--tx-login-width) - 96px);
    box-sizing: border-box;
    margin: 0;
    padding: 10px 14px;
    z-index: 2;
    font-size: 14px;
    text-align: left;
    color: var(--tx-error-ink);
    background: var(--tx-error-bg);
    border: 1px solid #f5c2c2;
    border-radius: var(--tx-radius-btn);
}

.login-ui .tuxa-login-fuss { margin-top: 40px; }
.login-ui .tuxa-login-support {
    margin: 0 0 20px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tx-ash);
}
.login-ui .tuxa-login-logo {
    display: block;
    width: 168px;
    height: auto;
}

.login-ui .tuxa-login-bild {
    flex: 1 1 auto;
    position: relative;
    background: var(--tx-canvas) url('app/ext/tuxanet/images/login-bild.jpg') 72% 50% / cover no-repeat;
}
.login-ui .tuxa-login-bild::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 0.18) 0%, rgb(0 0 0 / 0) 28%);
}

@media (max-width: 760px) {
    .login-ui .tuxa-login-bild { display: none; }
    .login-ui .login-dialog-middle { flex: 1 1 auto; width: 100%; padding: 40px 24px 24px; box-shadow: none; }
    .login-ui.error p.login-error { left: 24px; right: 24px; width: auto; }
}


/* ═══════════════════════ Seiten mit Sidebar ═══════════════════════
   Startseite, Einstellungen, manage/* — die Sidebar (templates/sidebar.html) ersetzt Benutzermenü und Reiter. */

.view:not(.loading) {
    margin-left: var(--tx-sb-width);
    min-height: 100vh;
    box-sizing: border-box;
    padding: 32px 40px 56px;
}

/* Wiedergabe einer Aufzeichnung: Vollbild, ohne Sidebar */
.view.connectionHistoryPlayer:not(.loading) { margin-left: 0; padding: 0; }
.view.connectionHistoryPlayer .tuxa-sidebar { display: none; }

/* ── Sidebar ── */
.tuxa-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--tx-sb-width);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 3;
    background: linear-gradient(180deg, #fbfbfd 0%, #f1f1f4 100%);
    border-right: 1px solid rgb(0 0 0 / 0.08);
    font-family: var(--tx-font);
    font-size: 13px;
    line-height: 1.4;
}
.tuxa-sidebar * { box-sizing: border-box; }
.tuxa-sidebar a { text-decoration: none; }

.tuxa-sidebar .tuxa-sb-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 16px;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
    color: var(--tx-ink);
}
.tuxa-sidebar .tuxa-sb-marke { width: 32px; height: 32px; flex-shrink: 0; }
.tuxa-sidebar .tuxa-sb-kopftext { display: flex; flex-direction: column; min-width: 0; }
.tuxa-sidebar .tuxa-sb-titel { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.tuxa-sidebar .tuxa-sb-host {
    font-size: 12px;
    color: var(--tx-ash);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tuxa-sidebar .tuxa-sb-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.tuxa-sidebar .tuxa-sb-gruppe {
    padding: 12px 18px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
}

.tuxa-sidebar .tuxa-sb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 8px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #1d1d1f;
    font-weight: 450;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.tuxa-sidebar .tuxa-sb-item:hover { background: rgb(0 0 0 / 0.05); }
.tuxa-sidebar .tuxa-sb-item.active {
    background: var(--tx-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgb(0 105 165 / 0.35);
}
.tuxa-sidebar .tuxa-sb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tuxa-sidebar .tuxa-sb-fuss { border-top: 1px solid rgb(0 0 0 / 0.08); padding: 10px 0; }
.tuxa-sidebar .tuxa-sb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px 4px;
    padding: 6px 10px;
}
.tuxa-sidebar .tuxa-sb-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--tx-accent);
    background: var(--tx-accent-soft);
}
.tuxa-sidebar .tuxa-sb-name { font-weight: 600; color: var(--tx-ink); }

/* Symbole: Linien-SVG als Maske, Farbe = Textfarbe (auch im aktiven blauen Eintrag) */
.tuxa-sb-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--tx-icon) center / contain no-repeat;
    mask: var(--tx-icon) center / contain no-repeat;
}
.tuxa-i-home        { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.tuxa-i-sessions    { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.tuxa-i-history     { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.tuxa-i-users       { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E"); }
.tuxa-i-userGroups  { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c0-3.5 3-5.5 7-5.5s7 2 7 5.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.5'/%3E%3Cpath d='M18 14.5c2.4.3 4 1.8 4 4.5'/%3E%3C/svg%3E"); }
.tuxa-i-connections { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E"); }
.tuxa-i-preferences { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.tuxa-i-logout      { --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }

/* ── Seitenkopf: Titel statt grauer Leiste, Benutzermenü steckt in der Sidebar ── */
.view .header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
.view .header:not(.ng-hide) ~ .header,
.view .header:not(.ng-hide) ~ * .header { border-top: none; }
.view .header h2 {
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    color: var(--tx-ink);
}
/* Seitentitel = Kopf direkt unter .view; tiefer liegende Köpfe (z. B. „Verbindungen“ im Benutzer) bleiben klein */
.view > .header h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.view .header:not(.view > .header) { margin-top: 28px; }
.view .header .user-menu { display: none; }
.settings-view > .page-tabs { display: none; }

/* ── Suchfelder ── */
.view .header .filter { margin: 0; padding: 0; flex: 0 1 300px; }
.view .filter input.search-string,
.view .header .filter input {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 8px 12px 8px 34px;
    font-family: var(--tx-font);
    font-size: 14px;
    color: var(--tx-ink);
    background: var(--tx-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23706e6d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px center / 15px no-repeat;
    border: 1px solid var(--tx-mist);
    border-radius: var(--tx-radius-btn);
}

/* ── Felder, Knöpfe ── */
.view input[type="text"],
.view input[type="password"],
.view input[type="email"],
.view input[type="number"],
.view input[type="date"],
.view input[type="time"],
.view select,
.view textarea {
    font-family: var(--tx-font);
    font-size: 14px;
    padding: 7px 10px;
    color: var(--tx-ink);
    background-color: var(--tx-paper);
    border: 1px solid var(--tx-mist);
    border-radius: var(--tx-radius-btn);
}
.view input:focus,
.view select:focus,
.view textarea:focus,
.login-ui input:focus-visible {
    outline: none;
    border-color: var(--tx-accent);
    box-shadow: 0 0 0 3px var(--tx-accent-soft);
}

.view a.button,
.view button,
.view input[type="submit"] {
    padding: 8px 18px;
    font-family: var(--tx-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;
    text-shadow: none;
    background: var(--tx-accent);
    border: 1px solid var(--tx-accent);
    border-radius: var(--tx-radius-btn);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.view a.button:hover,
.view button:hover,
.view input[type="submit"]:hover { background: var(--tx-accent-dark); border-color: var(--tx-accent-dark); }
.view a.button:active,
.view button:active,
.view input[type="submit"]:active { box-shadow: none; }
.view a.button.danger,
.view button.danger { background: var(--tx-error); border-color: var(--tx-error); }
.view a.button.danger:hover,
.view button.danger:hover { background: #c53030; border-color: #c53030; }
.view button:disabled,
.view input[type="submit"]:disabled { background: var(--tx-accent); color: #fff; opacity: 0.45; cursor: default; }
/* Knopf-Symbole (Guacamole setzt sie per ::before links in den Knopf): weiß und senkrecht mittig */
.view a.button::before,
.view button::before {
    filter: brightness(0) invert(1);
    width: 2.4em;
    background-position: 0.95em center;
}
.view a.button.add-connection,
.view a.button.add-connection-group,
.view a.button.add-user,
.view a.button.add-user-group,
.view a.button.import-connections,
.view .button.change-password,
.view button.change-password { font-size: 14px; padding-left: 2.6em; }

/* ── Karten für Inhalte ── */
.view div.settings,
.view .settings.section {
    margin: 0;
    padding: 24px;
    background: var(--tx-paper);
    border: 1px solid var(--tx-line);
    border-radius: var(--tx-radius-card);
}
.view .settings.section > p:first-child { margin-top: 0; color: var(--tx-charcoal); }

.view .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}
.view .toolbar .action-buttons { margin: 0; }
.view .toolbar .filter { margin: 0 0 0 auto; padding: 0; flex: 0 1 300px; }

/* ── Tabellen (Operations: blauer Kopf, weiße Schrift) ── */
.view table.sorted {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: var(--tx-paper);
    border: 1px solid var(--tx-line);
    border-radius: 8px;
    overflow: hidden;
}
.view table.sorted th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 500;
    color: #fff;
    background: var(--tx-accent);
    border: none;
}
.view table.sorted th.sort-primary { font-weight: 600; }
.view table.sorted th.sort-primary::after { filter: brightness(0) invert(1); }
.view table.sorted td {
    padding: 10px 14px;
    border: none;
    border-top: 1px solid var(--tx-line);
}
.view table.sorted tbody tr:hover { background: var(--tx-accent-soft); }
.view .results { overflow-x: auto; }   /* breite Tabellen (Verlauf) scrollen in der Karte statt herauszuragen */

/* „Keine passenden Datensätze“ u. Ä. — Guacamole setzt dafür 2em grau */
.view p.placeholder {
    margin: 0;
    padding: 18px 0 4px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    color: var(--tx-ash);
}
.view table.sorted a { color: var(--tx-ink); text-decoration: none; }
.view table.sorted a:hover { color: var(--tx-accent); }

/* Listen in den Einstellungen (Verbindungen, Gruppen, Berechtigungen) */
.view .list-item:not(.selected) .caption:hover { background: var(--tx-accent-soft); border-radius: var(--tx-radius-btn); }
.view .list-item.selected { background: var(--tx-accent-soft); }

/* Reiter innerhalb einer Verwaltungsseite (Datenquellen, Abschnitte) */
.view .page-tabs .page-list ul,
.view .section-tabs ul {
    background: none;
    border-bottom: 1px solid var(--tx-mist);
    margin-bottom: 16px;
}
.view .page-tabs .page-list li a[href],
.view .section-tabs li a {
    color: var(--tx-charcoal);
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
}
.view .page-tabs .page-list li a[href]:hover,
.view .section-tabs li a:hover { background: none; color: var(--tx-ink); }
.view .page-tabs .page-list li a[href].current,
.view .page-tabs .page-list li a[href].current:hover,
.view .section-tabs li a.current,
.view .section-tabs li a.current:hover {
    background: none;
    color: var(--tx-accent);
    font-weight: 600;
    border-bottom-color: var(--tx-accent);
}

/* Blättern */
.view .pager .set-page { color: var(--tx-charcoal); }
.view .pager .set-page.current { color: var(--tx-accent); background: var(--tx-accent-soft); border-color: transparent; }

/* Abschnittsüberschriften zwischen den Karten (Einstellungen, Berechtigungen) */
.view h2.header {
    margin: 28px 0 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    color: var(--tx-ink);
}

/* Verwaltungsseiten (Benutzer/Gruppe/Verbindung bearbeiten): Abschnitte als Karten */
.view[class*="manage-"] .section,
.view[class*="manage-"] .attributes {
    margin: 0 0 16px;
    padding: 20px 24px;
    background: var(--tx-paper);
    border: 1px solid var(--tx-line);
    border-radius: var(--tx-radius-card);
}
.view[class*="manage-"] .section .section,
.view[class*="manage-"] .attributes:empty { margin: 0; padding: 0; border: none; }
.view[class*="manage-"] .action-buttons { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.view .notice.read-only {
    margin: 0;
    padding: 10px 14px;
    color: #92400e;
    background: #fef3c7;
    border: none;
    border-radius: var(--tx-radius-btn);
}

/* Unterüberschriften in Formularen (Profil, Kontoeinschränkungen …): wie die Gruppenköpfe der Sidebar */
.view .form .form-header {
    margin: 18px 0 10px;
    padding: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tx-ash);
    background: none;
    border: none;
    border-bottom: 1px solid var(--tx-line);
    box-shadow: none;
}
.view .form:first-child .form-header { margin-top: 0; }
.view table.properties th,
.view .form .fields .field-header { font-weight: 500; color: var(--tx-graphite); }


/* ═══════════════════════ Startseite ═══════════════════════ */

.home-view .connection-list-ui { max-width: 1200px; }

/* Letzte Verbindungen: Vorschaubilder als Karten */
.home-view div.recent-connections {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 32px;
    text-align: left;
}
.home-view div.recent-connections .placeholder {
    margin: 0;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: var(--tx-ash);
    border: 1px dashed var(--tx-mist);
    border-radius: var(--tx-radius-card);
}
.home-view div.recent-connections div.connection {
    margin: 0;
    padding: 12px;
    max-width: 260px;
    background: var(--tx-paper);
    border: 1px solid var(--tx-line);
    border-radius: var(--tx-radius-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-view .recent-connections .connection:hover {
    background: var(--tx-paper);
    border-color: var(--tx-accent);
    box-shadow: 0 4px 16px rgb(0 105 165 / 0.12);
}
.home-view .recent-connections .connection .thumbnail { margin: 0 0 10px; }
.home-view .recent-connections .connection .thumbnail > * {
    max-width: 100%;
    border: 1px solid var(--tx-line);
    border-radius: var(--tx-radius-btn);
    box-shadow: none;
}
.home-view .recent-connections .connection .caption { text-align: left; }
.home-view .recent-connections .connection .caption .name { margin: 0; font-weight: 600; color: var(--tx-ink); }
.home-view .recent-connections .connection a { text-decoration: none; }

/* Alle Verbindungen: Kacheln im Raster, Gruppen über die ganze Breite */
.home-view div.all-connections { margin: 0 0 32px; }
.home-view .all-connections .group-list-page,
.home-view .all-connections .children {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.home-view .all-connections .list-item:has(> .connection-group) { grid-column: 1 / -1; }
.home-view .all-connections .children { margin: 4px 0 8px; padding: 0; }
.home-view .all-connections .expandable.expanded > .children > .list-item::before,
.home-view .all-connections .expandable.expanded > .children > .list-item::after { display: none; }
.home-view .all-connections .list-item:not(.selected) .caption:hover { background: none; }
.home-view .all-connections .list-item .caption { padding: 0; }

.home-view a.home-connection {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--tx-paper);
    border: 1px solid var(--tx-line);
    border-radius: var(--tx-radius-card);
    color: var(--tx-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-view a.home-connection:hover {
    border-color: var(--tx-accent);
    box-shadow: 0 4px 16px rgb(0 105 165 / 0.12);
}
.home-view a.home-connection .icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: var(--tx-accent-soft);
    background-size: 18px 18px;
}
.home-view a.home-connection .name {
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--tx-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-view a.home-connection .activeUserCount {
    float: none;
    margin: 0;
    padding: 2px 8px;
    font-size: 12px;
    font-style: normal;
    color: var(--tx-success);
    background: #e6f4e6;
    border-radius: 999px;
}
.home-view .caption.active * { opacity: 1; }

.home-view .all-connections .connection-group > .caption {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px;
}
.home-view a.home-connection-group {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tx-charcoal);
}

/* Hinweis-Karten (Kurzanleitung, Kontakt) */
.tuxa-hinweise {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.tuxa-karte {
    padding: 20px 24px;
    background: var(--tx-paper);
    border: 1px solid var(--tx-line);
    border-radius: var(--tx-radius-card);
    font-size: 14px;
    line-height: 1.6;
    color: var(--tx-graphite);
}
.tuxa-karte h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--tx-ink); }
.tuxa-karte p { margin: 0 0 10px; }
.tuxa-karte p:last-child { margin-bottom: 0; }
.tuxa-karte kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: var(--tx-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--tx-ink);
    background: var(--tx-canvas);
    border: 1px solid var(--tx-mist);
    border-bottom-width: 2px;
    border-radius: 4px;
}
.tuxa-karte .tuxa-links { display: flex; flex-wrap: wrap; gap: 16px; }


/* ═══════════════════════ Schmale Fenster ═══════════════════════ */

@media (max-width: 760px) {
    :root { --tx-sb-width: 56px; }
    .tuxa-sidebar .tuxa-sb-kopftext,
    .tuxa-sidebar .tuxa-sb-gruppe,
    .tuxa-sidebar .tuxa-sb-label { display: none; }
    .tuxa-sidebar .tuxa-sb-kopf { justify-content: center; padding: 14px 0; }
    .tuxa-sidebar .tuxa-sb-item,
    .tuxa-sidebar .tuxa-sb-user { justify-content: center; margin: 1px 6px; padding: 9px 0; }
    .view:not(.loading) { padding: 20px 16px 40px; }
}