/*
 * 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;

}
/*
 * 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.
 */

.login-ui .sso-providers {

    padding: 0.25em 0.5em;
    position: absolute;
    bottom: 0;
    left: 0;

}

.sso-providers ul {
    list-style: none;
}

.sso-providers ul, .sso-providers li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.sso-providers li::before {
    content: ' / ';
}

.sso-providers li:first-child::before {
    display: none;
}
/* ============================================================
   AUTOMATISCH GENERIERT aus @sectepe/design-system — nicht von
   Hand bearbeiten. Quelle: sectepe-design-system/src/tokens.json
   Aktualisieren: `node scripts/sync-static-design-system.mjs`
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Gugi Regular — Markenschriftzug (nur --sec-font-brand: Wortmarke, Login,
   Marketing; App-UI nutzt Inter). font-display:optional, damit ein kalter
   Lighthouse-Audit nicht auf den ~990 kB TTF blockiert; der Schriftzug
   erscheint beim naechsten (gecachten) Aufruf. Font wird vom Paket unter
   ./fonts/ ausgeliefert (exports "./fonts/*"). */
@font-face {
  font-family: "Gugi";
  src: url("../fonts/Gugi_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

:root {
  /* BRAND */
  --sec-black: #000000;
  --sec-white: #FFFFFF;
  --sec-coral: #FF908B;
  --sec-coral-50: #FFF1F0;
  --sec-coral-100: #FFDAD7;
  --sec-coral-200: #FFB9B4;
  --sec-coral-300: #FF908B;
  --sec-coral-400: #F06F69;
  --sec-coral-500: #D8524C;
  --sec-coral-600: #B83E39;
  --sec-coral-700: #8E2925;
  --sec-coral-800: #6F1E1B;
  --sec-coral-900: #4F1412;
  --sec-n-0: #FFFFFF;
  --sec-n-50: #FAFAF9;
  --sec-n-100: #F4F4F2;
  --sec-n-200: #E9E9E6;
  --sec-n-300: #D8D8D4;
  --sec-n-400: #A9A9A4;
  --sec-n-500: #737370;
  --sec-n-600: #5A5956;
  --sec-n-700: #3B3A37;
  --sec-n-800: #232220;
  --sec-n-850: #1A1918;
  --sec-n-900: #121110;
  --sec-n-950: #0C0B0B;

  /* SEMANTIK */
  --sec-bg: var(--sec-white);
  --sec-bg-warm: var(--sec-n-50);
  --sec-bg-elevated: var(--sec-white);
  --sec-bg-invert: var(--sec-n-900);
  --sec-surface: var(--sec-white);
  --sec-surface-alt: var(--sec-n-100);
  --sec-sidebar-bg: var(--sec-n-50);
  --sec-sidebar-fg: var(--sec-n-600);
  --sec-fg: var(--sec-n-900);
  --sec-fg-muted: var(--sec-n-600);
  --sec-fg-subtle: var(--sec-n-500);
  --sec-fg-on-dark: var(--sec-white);
  --sec-fg-on-coral: var(--sec-black);
  --sec-fg-on-accent: var(--sec-n-900);
  --sec-border: var(--sec-n-200);
  --sec-border-subtle: var(--sec-n-100);
  --sec-border-strong: var(--sec-n-900);
  --sec-border-coral: var(--sec-coral-300);
  --sec-accent: var(--sec-coral-300);
  --sec-accent-hover: var(--sec-coral-400);
  --sec-accent-press: var(--sec-coral-500);
  --sec-accent-soft: var(--sec-coral-100);
  --sec-link: var(--sec-coral-600);
  --sec-ring: var(--sec-coral-300);
  --sec-hover: rgba(0, 0, 0, 0.04);
  --sec-active: rgba(0, 0, 0, 0.08);
  --sec-selected: color-mix(in srgb, var(--sec-accent) 14%, transparent);
  --sec-success: #2E8B6B;
  --sec-warning: #D9A021;
  --sec-danger: var(--sec-coral-500);
  --sec-info: #3A6BB0;

  /* TYPOGRAFIE */
  --sec-font-brand: "Gugi", "Inter", ui-sans-serif, system-ui, sans-serif;
  --sec-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sec-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sec-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sec-fs-2xs: 11px;
  --sec-fs-xs: 12px;
  --sec-fs-sm: 13px;
  --sec-fs-base: 14px;
  --sec-fs-md: 16px;
  --sec-fs-lg: 18px;
  --sec-fs-xl: 22px;
  --sec-fs-2xl: 28px;
  --sec-fs-3xl: 36px;
  --sec-fs-4xl: 48px;
  --sec-fs-5xl: 64px;
  --sec-fs-6xl: 80px;
  --sec-lh-tight: 1.1;
  --sec-lh-snug: 1.25;
  --sec-lh-normal: 1.5;
  --sec-lh-relaxed: 1.65;
  --sec-tracking-tight: -0.02em;
  --sec-tracking-snug: -0.01em;
  --sec-tracking-normal: 0;
  --sec-tracking-wide: 0.04em;
  --sec-tracking-caps: 0.08em;
  --sec-fw-regular: 400;
  --sec-fw-medium: 500;
  --sec-fw-semibold: 600;
  --sec-fw-bold: 700;

  /* LAYOUT */
  --sec-topbar-h: 48px;
  --sec-sidebar-w: 240px;
  --sec-control-h: 32px;
  --sec-control-h-sm: 28px;

  /* SPACE / RADIUS / SHADOW / MOTION */
  --sec-space-1: 4px;
  --sec-space-2: 8px;
  --sec-space-3: 12px;
  --sec-space-4: 16px;
  --sec-space-5: 20px;
  --sec-space-6: 24px;
  --sec-space-8: 32px;
  --sec-space-10: 40px;
  --sec-space-12: 48px;
  --sec-space-16: 64px;
  --sec-space-20: 80px;
  --sec-space-24: 96px;
  --sec-radius-none: 0;
  --sec-radius-xs: 3px;
  --sec-radius-sm: 4px;
  --sec-radius-md: 6px;
  --sec-radius-lg: 8px;
  --sec-radius-xl: 12px;
  --sec-radius-2xl: 16px;
  --sec-radius-pill: 999px;
  --sec-radius-control: var(--sec-radius-md);
  --sec-radius-card: var(--sec-radius-lg);
  --sec-radius-overlay: var(--sec-radius-xl);
  --sec-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sec-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sec-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  --sec-shadow-coral: 0 12px 32px rgba(255, 144, 139, 0.35);
  --sec-shadow-focus: 0 0 0 2px var(--sec-bg), 0 0 0 4px var(--sec-ring);
  --sec-shadow-focus-input: 0 0 0 3px color-mix(in srgb, var(--sec-ring) 35%, transparent);
  --sec-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sec-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sec-ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
  --sec-dur-fast: 100ms;
  --sec-dur-base: 180ms;
  --sec-dur-slow: 320ms;
}

[data-sec-theme="dark"], [data-theme="dark"] {
  --sec-bg: var(--sec-n-900);
  --sec-bg-warm: var(--sec-n-950);
  --sec-bg-elevated: var(--sec-n-800);
  --sec-bg-invert: var(--sec-n-100);
  --sec-surface: var(--sec-n-850);
  --sec-surface-alt: var(--sec-n-800);
  --sec-sidebar-bg: var(--sec-n-950);
  --sec-sidebar-fg: var(--sec-n-400);
  --sec-fg: var(--sec-n-100);
  --sec-fg-muted: var(--sec-n-400);
  --sec-fg-subtle: #8A8A85;
  --sec-fg-on-dark: var(--sec-n-900);
  --sec-border: #2E2D2A;
  --sec-border-subtle: #262523;
  --sec-border-strong: var(--sec-n-100);
  --sec-link: var(--sec-coral-300);
  --sec-hover: rgba(255, 255, 255, 0.06);
  --sec-active: rgba(255, 255, 255, 0.10);
  --sec-selected: color-mix(in srgb, var(--sec-accent) 20%, transparent);
  --sec-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sec-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sec-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* ============================================================
   SecTepe Branding fuer Apache Guacamole (Extension-CSS)

   Ueberschreibt NUR die visuelle Schicht der Stock-Oberflaeche (1.6.x):
   Farben, Typografie, Radien, Schatten. Layout/Verhalten bleiben
   unangetastet, damit Upstream-Updates weiterhin passen.

   Alle Farben/Fonts kommen aus den --sec-* Tokens (css/design-tokens.css,
   aus @sectepe/design-system gespiegelt via
   scripts/sync-static-design-system.mjs) — hier KEINE Hex-Werte
   hartkodieren.

   Guacamole laedt Extension-CSS NACH seiner eigenen app.css, daher reicht
   in der Regel gleiche Spezifitaet; !important nur dort, wo Upstream
   selbst Inline-/ID-Styles setzt.
   ============================================================ */

/* ---------- Basis ---------------------------------------------------- */

html, body {
    background: var(--sec-bg-warm);
    color: var(--sec-fg);
    font-family: var(--sec-font-sans);
    font-size: var(--sec-fs-base);
    line-height: var(--sec-lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Waehrend einer Sitzung bleibt der Hintergrund schwarz (Remote-Display). */
body.client {
    background: var(--sec-black);
}

a {
    color: var(--sec-coral-600);
}

h1, h2, h3 {
    font-family: var(--sec-font-sans);
    font-weight: var(--sec-fw-semibold);
    letter-spacing: var(--sec-tracking-tight);
    color: var(--sec-fg);
}

h2 {
    text-transform: none;
    font-size: var(--sec-fs-md);
}

::selection {
    background: var(--sec-accent-soft);
    color: var(--sec-fg);
}

/* ---------- Kopfzeilen (Home, Einstellungen, Sitzungsmenue) ----------- */

.header {
    background: var(--sec-surface);
    border-bottom: 1px solid var(--sec-border);
    box-shadow: none;
    min-height: 56px;
    align-items: center;
}

.header:not(.ng-hide) ~ * .header,
.header:not(.ng-hide) ~ .header {
    border-top: none;
}

.header h2 {
    padding: var(--sec-space-3) var(--sec-space-5);
    display: flex;
    align-items: center;
    gap: var(--sec-space-3);
    color: var(--sec-fg);
}

/* Marken-Zeichen vor der ersten sichtbaren Kopfzeile. Guacamole rendert
   pro Sektion eine eigene .header — nur die erste sichtbare traegt das
   Logo (gleiches Muster wie Upstream fuer das User-Menue). */
.header h2::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 28px;
    background: url("../images/logo-mark-coral.svg") no-repeat center / contain;
    flex: 0 0 auto;
}

.header:not(.ng-hide) ~ .header h2::before,
.header:not(.ng-hide) ~ * .header h2::before,
.menu .header h2::before {
    display: none;
}

.header .filter {
    padding: var(--sec-space-2) var(--sec-space-3);
}

.header .filter input {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-pill);
    background-color: var(--sec-bg-warm);
    padding: 0.45em 0.9em 0.45em 2.2em;
    font-size: var(--sec-fs-sm);
    max-width: 18em;
}

.header .filter input:focus {
    outline: none;
    background-color: var(--sec-surface);
    border-color: var(--sec-border-coral);
    box-shadow: var(--sec-shadow-focus);
}

/* ---------- Benutzer-Menue (Dropdown rechts) ------------------------- */

.menu-dropdown {
    border-left: none;
    background: transparent;
    margin: 0 var(--sec-space-3);
}

.menu-dropdown:hover {
    background: transparent;
}

.menu-dropdown .menu-title {
    padding: 0.45em 2.2em 0.45em 2.4em;
    border-radius: var(--sec-radius-pill);
    border: 1px solid var(--sec-border);
    background-color: var(--sec-surface);
    font-size: var(--sec-fs-sm);
    font-weight: var(--sec-fw-medium);
    transition: background-color var(--sec-dur-fast) var(--sec-ease-out),
                border-color var(--sec-dur-fast) var(--sec-ease-out);
}

.user-menu .menu-dropdown .menu-title {
    background-position: 0.9em center;
}

.menu-dropdown:hover .menu-title {
    background-color: var(--sec-surface-alt);
}

.menu-dropdown.open,
.menu-dropdown.open:hover {
    background: transparent;
}

.menu-dropdown.open .menu-title {
    background-color: var(--sec-accent-soft);
    border-color: var(--sec-border-coral);
}

.menu-dropdown .menu-indicator {
    right: 0.4em;
    background-size: 0.8em;
}

.menu-dropdown .menu-contents {
    top: calc(100% + 6px);
    min-width: 240px;
    background: var(--sec-surface);
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-lg);
    box-shadow: var(--sec-shadow-3);
    overflow: hidden;
    padding: var(--sec-space-2);
}

.menu-dropdown .menu-contents li a {
    color: var(--sec-fg);
    border-radius: var(--sec-radius-md);
    padding: 0.6em 0.9em 0.6em 2.4em;
    font-size: var(--sec-fs-sm);
    font-weight: var(--sec-fw-medium);
}

.menu-dropdown .menu-contents li a:hover {
    background-color: var(--sec-coral-50);
}

.menu-dropdown .menu-contents li a.danger {
    color: var(--sec-fg);
    background-color: transparent;
    font-weight: var(--sec-fw-medium);
}

.menu-dropdown .menu-contents li a.danger:hover {
    background-color: var(--sec-accent-soft);
    color: var(--sec-coral-700);
}

.user-menu .menu-dropdown .menu-contents .profile {
    border-bottom: 1px solid var(--sec-border);
    padding: var(--sec-space-3);
    margin-bottom: var(--sec-space-2);
}

.user-menu .menu-dropdown .menu-contents .profile .full-name a {
    color: var(--sec-fg);
    text-decoration: none;
    font-weight: var(--sec-fw-semibold);
}

.user-menu .menu-dropdown .menu-contents .profile .organizational-role,
.user-menu .menu-dropdown .menu-contents .profile .organization {
    color: var(--sec-fg-muted);
}

/* ---------- Startseite: letzte Verbindungen & Liste ------------------ */

div.recent-connections,
div.all-connections,
div.settings {
    margin: var(--sec-space-5);
}

div.recent-connections div.connection {
    background: var(--sec-surface);
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-lg);
    box-shadow: var(--sec-shadow-1);
    padding: var(--sec-space-4);
    margin: var(--sec-space-3);
    transition: transform var(--sec-dur-base) var(--sec-ease-out),
                box-shadow var(--sec-dur-base) var(--sec-ease-out),
                border-color var(--sec-dur-base) var(--sec-ease-out);
}

.recent-connections .connection:hover {
    background: var(--sec-surface);
    border-color: var(--sec-border-coral);
    box-shadow: var(--sec-shadow-coral);
    transform: translateY(-2px);
}

.recent-connections .connection .thumbnail > * {
    border: 1px solid var(--sec-n-800);
    border-radius: var(--sec-radius-sm);
    box-shadow: var(--sec-shadow-2);
}

.recent-connections .connection .name {
    font-weight: var(--sec-fw-medium);
}

.all-connections {
    background: var(--sec-surface);
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-lg);
    padding: var(--sec-space-2) var(--sec-space-3) !important;
    box-shadow: var(--sec-shadow-1);
}

.list-item .caption {
    padding: 0.35em 0.5em;
    border-radius: var(--sec-radius-md);
    transition: background-color var(--sec-dur-fast) var(--sec-ease-out);
}

.list-item .name {
    color: var(--sec-fg);
}

.list-item:not(.selected) .caption:hover {
    background: var(--sec-coral-50);
}

.list-item.selected {
    background: var(--sec-accent-soft);
    border-radius: var(--sec-radius-md);
}

.list-item .usage,
.caption .activeUserCount {
    color: var(--sec-fg-subtle);
    font-style: normal;
    font-size: var(--sec-fs-xs);
}

.caption .activeUserCount {
    background: var(--sec-accent-soft);
    color: var(--sec-coral-700);
    border-radius: var(--sec-radius-pill);
    padding: 0.1em 0.6em;
}

.expandable.expanded > .children > .list-item:before,
.expandable.expanded > .children > .list-item:after {
    border-color: var(--sec-border);
}

.placeholder {
    color: var(--sec-fg-subtle);
    text-shadow: none;
    font-weight: var(--sec-fw-medium);
    font-size: var(--sec-fs-lg);
    opacity: 1;
    padding: var(--sec-space-8) 0;
}

/* ---------- Schaltflaechen ------------------------------------------ */

input[type="submit"], button, a.button {
    background-color: var(--sec-black);
    border: 1px solid var(--sec-black);
    color: var(--sec-fg-on-dark);
    text-shadow: none;
    font-family: var(--sec-font-sans);
    font-size: var(--sec-fs-sm);
    font-weight: var(--sec-fw-semibold);
    border-radius: var(--sec-radius-pill);
    padding: 0.55em 1.2em;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--sec-dur-fast) var(--sec-ease-out),
                border-color var(--sec-dur-fast) var(--sec-ease-out),
                box-shadow var(--sec-dur-fast) var(--sec-ease-out);
}

input[type="submit"]:hover, button:hover, a.button:hover {
    background-color: var(--sec-n-700);
    border-color: var(--sec-n-700);
}

input[type="submit"]:active, button:active, a.button:active {
    background-color: var(--sec-n-800);
    box-shadow: none;
}

input[type="submit"]:focus-visible, button:focus-visible, a.button:focus-visible {
    outline: none;
    box-shadow: var(--sec-shadow-focus);
}

button.danger, a.button.danger {
    background: var(--sec-coral-600);
    border-color: var(--sec-coral-600);
    color: var(--sec-fg-on-dark);
}

button.danger:hover, a.button.danger:hover {
    background: var(--sec-coral-700);
    border-color: var(--sec-coral-700);
}

button.danger:active, a.button.danger:active {
    background: var(--sec-coral-800);
}

input[type="submit"]:disabled, button:disabled, button.danger:disabled {
    background-color: var(--sec-n-300);
    border-color: var(--sec-n-300);
    color: var(--sec-fg-on-dark);
    opacity: 1;
    cursor: not-allowed;
}

/* Icon-Buttons (Upstream setzt das Icon per ::before mit fester Position) */
.button.logout::before,          button.logout::before,
.button.reconnect::before,       button.reconnect::before,
.button.manage::before,          button.manage::before,
.button.back::before,            button.back::before,
.button.home::before,            button.home::before,
.button.change-password::before, button.change-password::before {
    background-position: 0.7em center;
}

.button.logout,          button.logout,
.button.reconnect,       button.reconnect,
.button.manage,          button.manage,
.button.back,            button.back,
.button.home,            button.home,
.button.change-password, button.change-password {
    padding-left: 2.2em;
}

/* ---------- Eingabefelder -------------------------------------------- */

div.location, input[type=text], input[type=email], input[type=number],
input[type=password], textarea, select {
    border: 1px solid var(--sec-n-300);
    border-radius: var(--sec-radius-md);
    background: var(--sec-surface);
    color: var(--sec-fg);
    font-family: var(--sec-font-sans);
    font-size: var(--sec-fs-sm);
    padding: 0.5em 0.75em;
    transition: border-color var(--sec-dur-fast) var(--sec-ease-out),
                box-shadow var(--sec-dur-fast) var(--sec-ease-out);
}

input[type=text]:focus, input[type=email]:focus, input[type=number]:focus,
input[type=password]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--sec-border-coral);
    box-shadow: var(--sec-shadow-focus);
}

input[type=checkbox], input[type=radio] {
    accent-color: var(--sec-coral-500);
}

.form table.fields th,
.settings table.properties th {
    color: var(--sec-fg-muted);
    font-size: var(--sec-fs-sm);
}

/* ---------- Tabellen / Paginierung ---------------------------------- */

table.sorted th,
.history th {
    font-weight: var(--sec-fw-semibold);
    color: var(--sec-fg-muted);
    font-size: var(--sec-fs-xs);
    letter-spacing: var(--sec-tracking-wide);
    text-transform: uppercase;
    border-bottom: 1px solid var(--sec-border);
}

table.sorted td,
.history td {
    border-bottom: 1px solid var(--sec-border);
}

.pager .set-page {
    border-radius: var(--sec-radius-md);
}

.pager .set-page.current {
    background: var(--sec-accent-soft);
    border: 1px solid var(--sec-border-coral);
    color: var(--sec-coral-700);
}

/* ---------- Einstellungen: Tabs ------------------------------------- */

.page-tabs .page-list ul.page-list-level {
    background: var(--sec-surface);
    border-bottom: 1px solid var(--sec-border);
}

.page-tabs .page-list ul.page-list-level li a {
    color: var(--sec-fg-muted);
    font-weight: var(--sec-fw-medium);
    font-size: var(--sec-fs-sm);
    border-bottom: 2px solid transparent;
}

.page-tabs .page-list ul.page-list-level li a:hover {
    color: var(--sec-fg);
    background: transparent;
}

.page-tabs .page-list ul.page-list-level li a.current {
    color: var(--sec-fg);
    border-bottom-color: var(--sec-accent);
    background: transparent;
}

/* ---------- Benachrichtigungen / Dialoge ----------------------------- */

.notification {
    background: var(--sec-surface);
    color: var(--sec-fg);
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-xl);
    box-shadow: var(--sec-shadow-3);
    overflow: hidden;
}

.notification.error {
    background: var(--sec-surface);
    border-color: var(--sec-coral-300);
}

.notification .title-bar {
    background: transparent;
    border-bottom: 1px solid var(--sec-border);
    box-shadow: none;
    text-transform: none;
    font-size: var(--sec-fs-md);
    font-weight: var(--sec-fw-semibold);
    letter-spacing: var(--sec-tracking-tight);
    padding: var(--sec-space-4) var(--sec-space-5);
}

.notification.error .title-bar {
    color: var(--sec-coral-700);
}

.notification .body {
    margin: var(--sec-space-4) var(--sec-space-5);
}

.notification .buttons {
    margin: var(--sec-space-3) var(--sec-space-4) var(--sec-space-4);
}

.notification .progress {
    background: var(--sec-surface-alt);
    border: none;
    border-radius: var(--sec-radius-pill);
    animation: none;
}

.notification .progress .bar {
    background: var(--sec-accent);
    border-radius: var(--sec-radius-pill);
    box-shadow: none;
}

/* ---------- Sitzungsmenue (Seitenleiste im Client) ------------------- */

.menu {
    background: var(--sec-surface);
    box-shadow: var(--sec-shadow-3);
    border-right: 1px solid var(--sec-border);
}

.menu-body {
    padding: var(--sec-space-5);
}

.menu-section h3 {
    font-size: var(--sec-fs-xs);
    font-weight: var(--sec-fw-semibold);
    letter-spacing: var(--sec-tracking-caps);
    text-transform: uppercase;
    color: var(--sec-fg-subtle);
}

#guac-menu #devices .device,
#guac-menu #share-links {
    background-color: var(--sec-bg-warm);
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-md);
}

#guac-menu #devices .device:hover {
    border-color: var(--sec-border-coral);
    background-color: var(--sec-coral-50);
}

.client .drop-pending .display {
    background: var(--sec-coral-500);
}

/* ---------- Login ----------------------------------------------------- */

div.login-ui {
    background:
        radial-gradient(60% 50% at 100% 0%, var(--sec-coral-100) 0%, rgba(255, 218, 215, 0) 70%),
        radial-gradient(45% 45% at 0% 100%, var(--sec-coral-50) 0%, rgba(255, 241, 240, 0) 70%),
        var(--sec-bg-warm);
}

.login-ui .login-dialog {
    max-width: 400px;
    padding: var(--sec-space-8) var(--sec-space-8) var(--sec-space-6);
    font-size: var(--sec-fs-base);
    background: var(--sec-surface);
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-xl);
    box-shadow: var(--sec-shadow-3);
    position: relative;
}

.login-ui .login-dialog .logo {
    width: 48px;
    height: 62px;
    margin: 0 auto var(--sec-space-3);
    background: url("../images/logo-mark-coral.svg") no-repeat center / contain;
}

.login-ui .login-dialog .version {
    padding: 0;
}

.login-ui .login-dialog .version .app-name {
    font-family: var(--sec-font-brand);
    font-weight: var(--sec-fw-regular);
    font-size: var(--sec-fs-xl);
    line-height: var(--sec-lh-snug);
    letter-spacing: var(--sec-tracking-tight);
    text-transform: none;
    color: var(--sec-fg);
}

/* Die gruene Versions-Plakette passt nicht ins CD; die Version steht
   weiterhin unter Einstellungen bzw. im Tomcat-Log. */
.login-ui .login-dialog .version .version-number {
    display: none;
}

.sectepe-login-tagline {
    margin: var(--sec-space-2) 0 var(--sec-space-5);
    text-align: center;
    color: var(--sec-fg-muted);
    font-size: var(--sec-fs-sm);
    line-height: var(--sec-lh-normal);
}

.login-ui .login-dialog > .login-form > p {
    color: var(--sec-fg-muted);
    font-size: var(--sec-fs-sm);
    text-align: center;
}

.login-ui .login-fields .labeled-field {
    margin-bottom: var(--sec-space-3);
}

.login-ui .login-fields .labeled-field .field-header {
    margin: 0.7em 0.9em;
    font-size: var(--sec-fs-sm);
    color: var(--sec-fg-subtle);
    opacity: 1;
}

.login-ui .login-fields input[type=text],
.login-ui .login-fields input[type=password],
.login-ui .login-fields input[type=email] {
    max-width: none;
    padding: 0.7em 0.9em;
    font-size: var(--sec-fs-base);
    background: var(--sec-surface);
}

.login-ui .login-fields .labeled-field.empty input {
    background: transparent;
}

.login-ui .login-dialog .buttons {
    text-align: center;
    margin-top: var(--sec-space-5);
}

/* Primaere Login-Aktion in Coral (wie das Keycloak-Login-Theme). */
.login-ui .login-dialog input[type="submit"] {
    width: 100%;
    margin: 0;
    padding: 0.75em 1.4em;
    font-size: var(--sec-fs-base);
    background: var(--sec-accent);
    border-color: var(--sec-accent);
    color: var(--sec-fg-on-coral);
}

.login-ui .login-dialog input[type="submit"]:hover {
    background: var(--sec-accent-hover);
    border-color: var(--sec-accent-hover);
}

.login-ui .login-dialog input[type="submit"]:active {
    background: var(--sec-accent-press);
    border-color: var(--sec-accent-press);
}

.login-ui.error p.login-error {
    top: var(--sec-space-4);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 420px;
    width: calc(100% - 2 * var(--sec-space-4));
    margin: 0;
    padding: var(--sec-space-3) var(--sec-space-4);
    background: var(--sec-surface);
    border: 1px solid var(--sec-coral-300);
    border-left: 4px solid var(--sec-coral-500);
    border-radius: var(--sec-radius-md);
    box-shadow: var(--sec-shadow-2);
    color: var(--sec-coral-700);
    font-size: var(--sec-fs-sm);
}

.sectepe-login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sec-space-2);
    margin-top: var(--sec-space-5);
    color: var(--sec-fg-subtle);
    font-size: var(--sec-fs-xs);
    letter-spacing: var(--sec-tracking-wide);
}

.sectepe-login-footer-mark {
    display: inline-block;
    width: 10px;
    height: 13px;
    background: url("../images/logo-mark-coral.svg") no-repeat center / contain;
}

/* Continuation-Screens (MFA, Passwortwechsel): breiter Dialog, kein
   Marken-Kopf — wie Upstream, nur ohne Tagline/Footer. */
.login-ui.continuation .login-dialog {
    max-width: 560px;
    border: 1px solid var(--sec-border);
    box-shadow: var(--sec-shadow-3);
}

.login-ui.continuation .sectepe-login-tagline,
.login-ui.continuation .sectepe-login-footer {
    display: none;
}

/* ---------- Fataler Fehler ------------------------------------------- */

.fatal-page-error {
    font-family: var(--sec-font-sans);
}

/* ---------- Kleine Bildschirme -------------------------------------- */

@media (max-width: 480px) {
    .login-ui .login-dialog {
        max-width: none;
        margin: 0 var(--sec-space-4);
        width: calc(100% - 2 * var(--sec-space-4));
        padding: var(--sec-space-6) var(--sec-space-5);
    }

    .header h2 {
        padding: var(--sec-space-3);
    }
}