/*
 * Wygląd CQURE Academy dla Apache Guacamole 1.6.0.
 *
 * Kolory z cqureacademy.com. Font jak tekst na cqureacademy.com (systemowy);
 * nagłówki na stronie używają licencjonowanego fontu "Factor A", którego tu nie ma.
 *
 * W pełni w stylu strony: logowanie, TOTP, strona główna z połączeniami, ustawienia (zakładki
 * Active Sessions, Preferences, a u admina też Users/Connections/History), komunikaty o rozłączeniu.
 * Edytory połączeń/użytkowników zostają jasne, dostają tylko font, przyciski i akcenty.
 * Strona główna i ustawienia skalują się z szerokością ekranu (rozmiary w em, font zależny od vw).
 */

:root {
    --cqure-bg: #0C0D12;
    --cqure-card: rgba(21, 23, 31, 0.86);
    --cqure-line: rgba(255, 255, 255, 0.14);
    --cqure-orange: #EB5B27;
    --cqure-pink: #F2295B;
    --cqure-cta: linear-gradient(86deg, #FF3D00 -1.94%, #FF005C 96.63%);
    --cqure-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ===== Font ===== */

body,
input, select, textarea, button,
input[type="submit"], a.button,
.login-ui .login-dialog .login-fields input {
    font-family: var(--cqure-font);
}

/* ===== Przyciski: gradientowe "pigułki" jak na cqureacademy.com ===== */

input[type="submit"], button, a.button {
    background-color: transparent;
    background-image: var(--cqure-cta);
    border: none;
    border-radius: 50px;
    color: #FFFFFF;
    text-shadow: none;
    font-weight: 600;
    padding: 0.5em 1.4em;
    box-shadow: none;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

input[type="submit"]:hover, button:hover, a.button:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(255, 0, 92, 0.3);
}

input[type="submit"]:active, button:active, a.button:active {
    filter: brightness(0.94);
    transform: translateY(1px);
    box-shadow: none;
}

input[type="submit"]:focus-visible, button:focus-visible, a.button:focus-visible {
    outline: 2px solid var(--cqure-orange);
    outline-offset: 2px;
}

button.danger, a.button.danger {
    background: #C62828;
}

button.danger:hover, a.button.danger:hover {
    background: #D84343;
    box-shadow: 0 6px 18px rgba(198, 40, 40, 0.3);
}

button.danger:active, a.button.danger:active {
    background: #A61F1F;
}

input[type="submit"]:disabled, button:disabled, button.danger:disabled {
    color: #FFFFFF;
    opacity: 0.45;
    filter: none;
    box-shadow: none;
    transform: none;
}

/* przyciski z ikoną (Wyloguj, Połącz ponownie, Strona główna...) */
.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.3em;
}

.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 {
    left: 0.45em;
    background-position: 0.5em center;
}

/* ===== Akcenty w panelu (zamiast zieleni Guacamole) ===== */

.header {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--cqure-orange), var(--cqure-pink)) 1;
}

.header h2 {
    text-transform: none;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.list-item:not(.selected) .caption:hover {
    background: rgba(235, 91, 39, 0.1);
}

.list-item.selected {
    background: rgba(235, 91, 39, 0.16);
}

.menu-dropdown .menu-contents li a:hover {
    background-color: rgba(235, 91, 39, 0.12);
}

.menu-dropdown .menu-contents li a.danger,
.menu-dropdown .menu-contents li a.danger:hover {
    background-color: #C62828;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cqure-orange);
}

/* ===== Okna komunikatów (np. rozłączenie, błąd połączenia): jasne karty jak na stronie ===== */

.notification {
    background: #F4F4F4;
    color: var(--cqure-bg);
    border: none;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.notification.error {
    background: #FFF1F2;
}

.notification .title-bar {
    background: none;
    border-bottom: none;
    box-shadow: none;
    padding: 0.7em 0.8em 0.15em;
    margin-bottom: 0.5em;
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--cqure-orange);
}

.notification .body {
    margin: 0 1.2em 0.75em;
}

.notification .buttons {
    margin: 0 1em 1em;
}

.notification .progress {
    border: none;
    border-radius: 50px;
    overflow: hidden;
}

.notification .progress .bar {
    background: var(--cqure-cta);
    box-shadow: none;
}

/* ===== Ekran logowania ===== */

div.login-ui {
    background:
        radial-gradient(ellipse 60% 45% at 85% 110%, rgba(255, 61, 0, 0.26), transparent 70%),
        radial-gradient(ellipse 50% 40% at 10% -10%, rgba(255, 0, 92, 0.16), transparent 70%),
        var(--cqure-bg);
    color: #FFFFFF;
}

/* pasek w gradiencie u góry, jak baner na cqureacademy.com */
div.login-ui::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cqure-orange) 0%, var(--cqure-pink) 100%);
}

.login-ui .login-dialog.notification {
    max-width: 380px;
    padding: 40px 36px 32px;
    background: var(--cqure-card);
    color: #FFFFFF;
    border: 1px solid var(--cqure-line);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    font-size: 1.1em;
    overflow: visible;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* logo z cqureacademy.com (cqureacademy_black-1.svg), dołączone do paczki */
.login-ui .login-dialog div.logo {
    width: 200px;
    height: 82px;
    margin: 0 auto 12px;
    background-image: url("app/ext/cqure-branding/images/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.login-ui .login-dialog .version {
    padding: 0 0 26px;
    text-align: center;
}

/* nazwa aplikacji (karta w przeglądarce) zostaje, na ekranie logowania zamiast niej podpis */
.login-ui .login-dialog .version .app-name {
    font-size: 0;
    line-height: 1;
}

.login-ui .login-dialog .version .app-name::after {
    content: "Remote Lab";
    display: inline-block;
    padding-left: 0.35em;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--cqure-orange);
    background: linear-gradient(90deg, var(--cqure-orange), var(--cqure-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* bez wersji Guacamole na ekranie logowania */
.login-ui .login-dialog .version .version-number {
    display: none;
}

.login-ui .login-dialog th {
    text-shadow: none;
}

/* pola: podpis pola leży pod przezroczystym inputem i działa jak placeholder */
.login-ui .login-dialog .login-fields input {
    height: 48px;
    padding: 0 20px;
    margin-bottom: 12px;
    border: 1px solid var(--cqure-line);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-ui .login-fields .labeled-field .field-header {
    margin: 0;
    padding: 0 21px;
    line-height: 48px;
    font-size: 16px;
    color: #FFFFFF;
    opacity: 0.5;
    text-align: left;
}

.login-ui .login-fields .labeled-field:not(.empty) .field-header {
    visibility: hidden;
}

.login-ui .login-fields .labeled-field input:focus,
.login-ui .login-dialog .login-fields input:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--cqure-orange);
    box-shadow: 0 0 0 3px rgba(235, 91, 39, 0.25);
    outline: none;
}

.login-ui .login-dialog .login-fields input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* autouzupełnianie w Chrome/Edge nie może malować jasnego tła */
.login-ui .login-dialog .login-fields input:-webkit-autofill,
.login-ui .login-dialog .login-fields input:-webkit-autofill:hover,
.login-ui .login-dialog .login-fields input:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF;
    -webkit-box-shadow: 0 0 0 1000px #1B1D26 inset;
    caret-color: #FFFFFF;
    transition: background-color 9999s ease-in-out 0s;
}

.login-ui .login-dialog .buttons {
    margin-top: 20px;
}

.login-ui .login-dialog .buttons input[type="submit"],
.login-ui.continuation .login-dialog .buttons input[type="submit"] {
    width: 100%;
    height: 50px;
    font-size: 18px;
}

/* komunikat o błędzie logowania */
.login-ui.error p.login-error {
    top: 16px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 440px;
    margin: 0;
    padding: 12px 20px;
    background: rgba(242, 41, 91, 0.12);
    border: 1px solid rgba(242, 41, 91, 0.55);
    border-radius: 14px;
    color: #FFD9E2;
}

/* stopka pod oknem logowania */
.login-ui .login-dialog-middle::after {
    content: "cqureacademy.com";
    display: block;
    margin-top: 18px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
}

/* ===== Drugi krok logowania: TOTP (kod QR przy pierwszym logowaniu, potem kod z aplikacji) ===== */

.login-ui.continuation .login-dialog.notification {
    max-width: 440px;
    border: 1px solid var(--cqure-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.login-ui.continuation .login-dialog div.logo {
    display: block;
    width: 150px;
    height: 62px;
    margin-bottom: 18px;
}

.login-ui .totp-enroll p,
.login-ui .totp-details {
    color: rgba(255, 255, 255, 0.75);
}

/* kod QR musi mieć białe tło, inaczej aplikacja go nie zeskanuje */
.login-ui .totp-qr-code img {
    margin: 12px;
    padding: 10px;
    background: #FFFFFF;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.login-ui h3.totp-details-header {
    color: #FFFFFF;
    font-weight: 600;
}

.login-ui .totp-show-details,
.login-ui .totp-hide-details {
    color: #FF6B3D;
}

.login-ui .totp-details td {
    color: #FFFFFF;
}

.login-ui .login-dialog .login-fields .totp-code input {
    text-align: center;
    letter-spacing: 0.3em;
    font-size: 20px;
}

.login-ui .login-dialog .login-fields .totp-code input::placeholder {
    letter-spacing: normal;
    font-size: 16px;
}

/* ===== Strona główna i ustawienia: wspólny układ ===== */

/*
 * Rozmiary w em rosną razem z fontem, a font z szerokością ekranu: 16 px do ok. 1780 px,
 * potem 0,9% szerokości (1920 px: ok. 17 px, 2560 px: 23 px), maksymalnie 30 px.
 * Na dużym monitorze strona wygląda więc tak samo, tylko proporcjonalnie większa.
 */

body:has(.home-view),
body:has(.settings-view) {
    background: var(--cqure-bg);
}

.home-view,
.settings-view {
    min-height: 100vh;
    font-size: clamp(16px, 0.9vw, 30px);
    background:
        radial-gradient(ellipse 55% 40% at 100% 0%, rgba(255, 0, 92, 0.1), transparent 70%),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255, 61, 0, 0.1), transparent 70%),
        var(--cqure-bg);
    background-attachment: fixed;
    color: #FFFFFF;
}

/* pasek w gradiencie u góry */
.home-view::before,
.settings-view::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 10;
    background: linear-gradient(90deg, var(--cqure-orange) 0%, var(--cqure-pink) 100%);
}

/* menu użytkownika w prawym górnym rogu, jako "pigułka" */
.home-view .user-menu .menu-dropdown,
.settings-view .user-menu .menu-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.04);
}

.home-view .user-menu .menu-dropdown:hover,
.settings-view .user-menu .menu-dropdown:hover {
    background: rgba(255, 255, 255, 0.1);
}

.home-view .user-menu .menu-dropdown.open,
.home-view .user-menu .menu-dropdown.open:hover,
.settings-view .user-menu .menu-dropdown.open,
.settings-view .user-menu .menu-dropdown.open:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* ciemny tekst i ikona w menu odwrócone na biało */
.home-view .user-menu .menu-dropdown .menu-title,
.settings-view .user-menu .menu-dropdown .menu-title {
    color: #000000;
    filter: invert(1);
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}

.home-view .user-menu .menu-dropdown .menu-indicator,
.settings-view .user-menu .menu-dropdown .menu-indicator {
    filter: invert(1);
}

.home-view .user-menu .menu-dropdown .menu-contents,
.settings-view .user-menu .menu-dropdown .menu-contents {
    top: calc(100% + 0.5em);
    min-width: 13.75em;
    background: #F4F4F4;
    color: var(--cqure-bg);
    border: none;
    border-radius: 1em;
    box-shadow: 0 1.125em 2.5em rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* imię i nazwisko z profilu na górze menu (bez tego dziedziczy biały tekst strony) */
.home-view .user-menu .menu-dropdown .menu-contents .profile,
.settings-view .user-menu .menu-dropdown .menu-contents .profile {
    width: auto;
    margin: 1em 1.25em 0.5em;
    padding-bottom: 0.75em;
    border-bottom-color: rgba(12, 13, 18, 0.12);
}

.home-view .user-menu .menu-contents .profile a,
.settings-view .user-menu .menu-contents .profile a {
    color: inherit;
    text-decoration: none;
}

/* ===== Strona główna (Recent / All Connections): jasne karty jak na cqureacademy.com ===== */

.home-view .connection-list-ui {
    position: relative;
    max-width: 75em;
    margin: 0 auto;
    padding: 0.25em 0 3em;
}

/* pasek z logo, jak nagłówek cqureacademy.com */
.home-view .connection-list-ui::before {
    content: "";
    display: block;
    height: 6em;
    margin: 0 1.5em;
    background: url("app/ext/cqure-branding/images/logo.svg") no-repeat left center;
    background-size: auto 3.25em;
}

.home-view .header,
.home-view .header:not(.ng-hide) ~ .header {
    background: transparent;
    border: none;
    border-image: none;
    box-shadow: none;
    padding: 0 1.5em;
    margin-top: 1.75em;
    align-items: center;
}

.home-view .header h2 {
    padding: 0;
    color: #FFFFFF;
    font-size: 1.875em;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.home-view .header .user-menu {
    position: absolute;
    top: 2em;
    right: 1.5em;
}

/* filtr połączeń */
.home-view .header .filter {
    flex: 0 1 17.5em;
    margin: 0;
    padding: 0;
}

.home-view .header .filter .search-string {
    height: 2.667em;
    padding: 0 1.067em 0 2.667em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-size: 1.067em;
    background-position: 1em center;
    color: #FFFFFF;
    font-size: 0.9375em;
}

.home-view .header .filter .search-string::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.home-view .header .filter .search-string:focus {
    border-color: var(--cqure-orange);
    box-shadow: 0 0 0 3px rgba(235, 91, 39, 0.25);
    outline: none;
}

/* ostatnie połączenia: karty z miniaturą pulpitu */
.home-view div.recent-connections {
    margin: 1em 1.5em 0;
    text-align: left;
}

.home-view .recent-connections p.placeholder {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1em;
    font-weight: 400;
    text-align: left;
}

.home-view div.recent-connections div.connection {
    width: 18.75em;
    max-width: 100%;
    margin: 0 1em 1em 0;
    padding: 0.75em 0.75em 1em;
    background: #F4F4F4;
    border-radius: 1.75em;
    box-shadow: 0 0.75em 1.875em rgba(0, 0, 0, 0.35);
    text-align: left;
    vertical-align: top;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-view div.recent-connections div.connection:hover {
    transform: translateY(-0.2em);
    box-shadow: 0 1.125em 2.5em rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(235, 91, 39, 0.7);
}

.home-view .recent-connections .connection a {
    color: var(--cqure-bg);
    text-decoration: none;
}

.home-view .recent-connections .connection .thumbnail {
    margin: 0;
}

/* domyślnie Guacamole zwęża miniaturę do 75% i daje jej czarną ramkę */
.home-view .recent-connections .connection .thumbnail > * {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    border: none;
    border-radius: 1.125em;
    box-shadow: none;
    background: #000000;
}

.home-view .recent-connections .connection .caption {
    padding: 0.75em 0.375em 0;
}

.home-view .recent-connections .connection .caption .name {
    font-size: 1.125em;
    color: var(--cqure-bg);
}

/* wszystkie połączenia: jasne karty z okrągłą strzałką, jak karty kursów */
.home-view .all-connections {
    margin: 1em 1.5em 0;
}

/* gdy konto nie ma przypisanych połączeń, Guacamole nic tu nie pokazuje */
.home-view .all-connections .group-list-page:not(:has(.list-item))::before {
    content: "No connections are assigned to this account yet.";
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1em;
}

.home-view .all-connections .group-list-page > .list-item {
    margin-bottom: 0.75em;
    padding: 0.375em;
    background: #F4F4F4;
    border-radius: 1.375em;
    box-shadow: 0 0.625em 1.625em rgba(0, 0, 0, 0.3);
}

.home-view .all-connections .list-item .caption {
    padding: 0.5em 0.75em;
    border-radius: 1em;
}

.home-view .all-connections .list-item .name {
    color: var(--cqure-bg);
    font-size: 1.125em;
}

.home-view .all-connections .icon {
    width: 1.5em;
    height: 1.5em;
    background-size: 1em 1em;
}

.home-view .all-connections a.home-connection {
    position: relative;
    padding-right: 3em;
    color: var(--cqure-bg);
    text-decoration: none;
}

.home-view .all-connections a.home-connection::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 2.25em;
    height: 2.25em;
    margin-top: -1.125em;
    border: 1px solid rgba(12, 13, 18, 0.25);
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0D12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 1em;
}

.home-view .all-connections .caption:hover a.home-connection::after {
    border-color: transparent;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 1em,
        var(--cqure-cta);
}

.home-view .pager {
    color: rgba(255, 255, 255, 0.8);
}

.home-view .pager .icon {
    filter: invert(1);
}

.home-view .pager .set-page.current {
    background: rgba(255, 255, 255, 0.12);
    border-color: transparent;
}

/* ===== Ustawienia (Active Sessions, Preferences i zakładki admina): zakładki-pigułki, treść w jasnych kartach ===== */

/* treść wyśrodkowana, maks. 72em szerokości, tak jak na stronie głównej */
.settings-view {
    position: relative;
    padding: 0.25em max(1.5em, calc((100% - 72em) / 2)) 3em;
}

/* pasek z logo nad tytułem "Settings" */
.settings-view > .header {
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-image: none;
    box-shadow: none;
}

.settings-view > .header::before {
    content: "";
    flex: 0 0 100%;
    height: 6em;
    background: url("app/ext/cqure-branding/images/logo.svg") no-repeat left center;
    background-size: auto 3.25em;
}

.settings-view > .header h2 {
    margin-top: 0.75em;
    padding: 0;
    color: #FFFFFF;
    font-size: 2.25em;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.settings-view .header .user-menu {
    position: absolute;
    top: 2em;
    right: max(1.5em, calc((100% - 72em) / 2));
}

/* zakładki */
.settings-view .page-tabs .page-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 1.25em 0 0;
    padding: 0;
    background: none;
    border: none;
}

.settings-view .page-tabs .page-list ul + ul {
    margin-top: 0.6em;
    font-size: 0.85em;
}

.settings-view .page-tabs .page-list li a[href],
.settings-view .page-tabs .page-list li a[href]:visited {
    padding: 0.55em 1.25em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.04);
    color: #FFFFFF;
}

.settings-view .page-tabs .page-list li a[href]:hover {
    background: rgba(255, 255, 255, 0.1);
}

.settings-view .page-tabs .page-list li a[href].current,
.settings-view .page-tabs .page-list li a[href].current:hover {
    background: var(--cqure-cta);
    border-color: transparent;
    color: #FFFFFF;
}

/* treść zakładek w jasnych kartach */
.settings-view .settings.section,
.settings-view .preferences .attributes {
    margin: 1.5em 0 0;
    padding: 1.5em 1.75em;
    overflow-x: auto;
    background: #F4F4F4;
    color: var(--cqure-bg);
    border-radius: 1.5em;
    box-shadow: 0 0.75em 1.875em rgba(0, 0, 0, 0.35);
}

.settings-view .settings.section p,
.settings-view .preferences .attributes p {
    margin-top: 0;
    color: rgba(12, 13, 18, 0.75);
    line-height: 1.5;
}

.settings-view .settings.section p.placeholder {
    margin: 1.5em 0 0.5em;
    text-align: center;
    color: rgba(12, 13, 18, 0.45);
    font-size: 1.125em;
    font-weight: 400;
}

.settings-view .settings.section .action-buttons {
    margin: 1em 0;
    text-align: left;
}

/* nagłówki sekcji w Preferences: białe, nad kartami */
.settings-view .preferences h2.header {
    display: block;
    margin: 1.75em 0 0;
    padding: 0;
    background: transparent;
    border: none;
    border-image: none;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
}

/* filtr w kartach */
.settings-view .settings.section .filter {
    margin: 1em 0;
}

.settings-view .settings.section .filter .search-string {
    height: 2.667em;
    max-width: none;
    padding: 0 1.067em 0 2.667em;
    border: 1px solid rgba(12, 13, 18, 0.2);
    border-radius: 50px;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0D12' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.067em;
    background-position: 1em center;
    font-size: 0.9375em;
}

.settings-view .settings.section .filter .search-string:focus {
    border-color: var(--cqure-orange);
    box-shadow: 0 0 0 3px rgba(235, 91, 39, 0.2);
    outline: none;
}

/* tabele (sesje, użytkownicy, historia) */
.settings-view table.sorted {
    width: 100%;
    margin-top: 1em;
    border-collapse: separate;
    border-spacing: 0;
}

.settings-view table.sorted th,
.settings-view table.sorted td {
    padding: 0.75em 1em;
    border: none;
    border-bottom: 1px solid rgba(12, 13, 18, 0.1);
    text-align: left;
}

.settings-view table.sorted th {
    background: transparent;
    border-bottom: 2px solid rgba(12, 13, 18, 0.15);
    color: rgba(12, 13, 18, 0.6);
    font-weight: 600;
}

.settings-view table.sorted th.sort-primary {
    color: var(--cqure-bg);
}

.settings-view table.sorted tbody tr:hover td {
    background: rgba(235, 91, 39, 0.06);
}

.settings-view table.sorted a {
    color: var(--cqure-orange);
}

/* formularze w Preferences */
.settings-view .preferences .form .fields {
    border-left-color: rgba(235, 91, 39, 0.5);
}

.settings-view .settings.section input[type="text"],
.settings-view .settings.section input[type="email"],
.settings-view .settings.section input[type="number"],
.settings-view .settings.section input[type="password"],
.settings-view .settings.section select,
.settings-view .preferences .attributes input[type="text"],
.settings-view .preferences .attributes input[type="email"],
.settings-view .preferences .attributes select {
    padding: 0.45em 0.8em;
    border: 1px solid rgba(12, 13, 18, 0.2);
    border-radius: 0.6em;
    background: #FFFFFF;
    color: var(--cqure-bg);
    font-size: 0.9375em;
}

.settings-view .settings.section input[type="text"]:focus,
.settings-view .settings.section input[type="email"]:focus,
.settings-view .settings.section input[type="number"]:focus,
.settings-view .settings.section input[type="password"]:focus,
.settings-view .settings.section select:focus,
.settings-view .preferences .attributes input[type="text"]:focus,
.settings-view .preferences .attributes input[type="email"]:focus,
.settings-view .preferences .attributes select:focus {
    border-color: var(--cqure-orange);
    box-shadow: 0 0 0 3px rgba(235, 91, 39, 0.2);
    outline: none;
}

/* ===== Menu Guacamole w trakcie sesji (Ctrl+Alt+Shift): ciemny panel ===== */

#guac-menu {
    background: var(--cqure-bg);
    color: #FFFFFF;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08), 0 0 40px rgba(0, 0, 0, 0.6);
}

/* gradientowy pasek i logo na górze panelu */
#guac-menu .menu-content {
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--cqure-orange), var(--cqure-pink)) 1;
}

#guac-menu .menu-content::before {
    content: "";
    flex: 0 0 auto;
    height: 2.5em;
    margin: 1.1em 1.25em 0;
    background: url("app/ext/cqure-branding/images/logo.svg") no-repeat left center;
    background-size: auto 100%;
}

#guac-menu .header {
    padding: 0.9em 1.25em 0.6em;
    background: transparent;
    border: none;
    border-image: none;
    box-shadow: none;
    align-items: center;
}

#guac-menu .header h2 {
    padding: 0;
    color: #FFFFFF;
    font-size: 1.35em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* menu użytkownika i inne rozwijane menu w nagłówku: "pigułki" jak na stronie głównej */
#guac-menu .menu-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.04);
}

#guac-menu .menu-dropdown:hover {
    background: rgba(255, 255, 255, 0.1);
}

#guac-menu .menu-dropdown.open,
#guac-menu .menu-dropdown.open:hover {
    background: rgba(255, 255, 255, 0.14);
}

#guac-menu .menu-dropdown .menu-title {
    color: #000000;
    filter: invert(1);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#guac-menu .menu-dropdown .menu-indicator {
    filter: invert(1);
}

#guac-menu .menu-dropdown .menu-contents {
    top: calc(100% + 0.5em);
    min-width: 13.75em;
    background: #F4F4F4;
    color: var(--cqure-bg);
    border: none;
    border-radius: 1em;
    box-shadow: 0 1.125em 2.5em rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

#guac-menu .user-menu .menu-dropdown .menu-contents .profile {
    width: auto;
    margin: 1em 1.25em 0.5em;
    padding-bottom: 0.75em;
    border-bottom-color: rgba(12, 13, 18, 0.12);
}

#guac-menu .user-menu .menu-contents .profile a {
    color: inherit;
    text-decoration: none;
}

/* treść panelu: sekcje z nagłówkiem jako ciemne karty */
#guac-menu .menu-body {
    padding: 0.5em 1.25em 1.5em;
}

#guac-menu .menu-section:has(> h3) {
    margin-top: 0.9em;
    padding: 1em 1.1em 1.1em;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25em;
}

#guac-menu .menu-section h3,
#guac-menu .menu-section ~ .menu-section h3 {
    padding: 0 0 0.6em;
    color: #FFFFFF;
    font-size: 1.1em;
    font-weight: 600;
}

#guac-menu .menu-section .description,
#guac-menu .menu-section .caption {
    color: rgba(255, 255, 255, 0.65);
}

#guac-menu .menu-section a[href] {
    color: #FF6B3D;
}

/* schowek */
#guac-menu .clipboard {
    padding: 0.6em 0.8em;
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.9em;
    font-family: Consolas, "Cascadia Mono", Menlo, monospace;
}

#guac-menu .clipboard:focus {
    border-color: var(--cqure-orange);
    box-shadow: 0 0 0 3px rgba(235, 91, 39, 0.25);
    outline: none;
}

#guac-menu .clipboard-editor .clipboard.clipboard-contents-hidden {
    color: transparent;
}

#guac-menu .clipboard-editor .clipboard-contents-hidden-hint .clipboard-contents-hidden-hint-text {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
}

/* rysunki (tryb wprowadzania, mysz) są ciemne, więc dostają jasne tło */
#guac-menu #keyboard-settings .figure img,
#guac-menu #mouse-settings .figure img {
    padding: 0.5em;
    background: #F4F4F4;
    border-radius: 0.9em;
}

/* powiększenie */
#guac-menu .client-zoom .client-zoom-out,
#guac-menu .client-zoom .client-zoom-in {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

#guac-menu .client-zoom .client-zoom-out img,
#guac-menu .client-zoom .client-zoom-in img {
    filter: invert(1);
    opacity: 0.75;
}

#guac-menu .client-zoom .client-zoom-out:hover,
#guac-menu .client-zoom .client-zoom-in:hover {
    border-color: transparent;
    background: var(--cqure-cta);
}

#guac-menu .client-zoom .client-zoom-out:hover img,
#guac-menu .client-zoom .client-zoom-in:hover img {
    opacity: 1;
}

#guac-menu .client-zoom .client-zoom-state {
    color: #FFFFFF;
}

#guac-menu .client-zoom .client-zoom-state input {
    width: 2.6em;
    padding: 0.1em 0.2em;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.4em;
    text-align: center;
}

/* dyski (przekazywanie plików) i linki udostępniania */
#guac-menu #devices .device {
    background-color: #F4F4F4;
    color: var(--cqure-bg);
    border: none;
    border-radius: 0.9em;
}

#guac-menu #devices .device:hover {
    box-shadow: 0 0 0 2px var(--cqure-orange);
}

#guac-menu #share-links {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25em;
}

/* pola parametrów połączenia zmienianych w trakcie sesji (np. SSH) */
#guac-menu .connection-parameters input[type="text"],
#guac-menu .connection-parameters input[type="number"],
#guac-menu .connection-parameters select {
    padding: 0.4em 0.7em;
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.6em;
}

/* ===== Przyciski drugorzędne (Cancel, Clone): obrys zamiast gradientu ===== */

button.cancel,
button.clone {
    background-image: none;
    background-color: transparent;
    color: var(--cqure-bg);
    border: 1px solid rgba(12, 13, 18, 0.3);
}

button.cancel:hover,
button.clone:hover {
    background-color: rgba(12, 13, 18, 0.06);
    box-shadow: none;
    filter: none;
}

/* ===== Przyciski z ikoną w paskach narzędzi (New Connection, New User, Import...) ===== */

a.button.add-connection, a.button.add-connection-group, a.button.add-user,
a.button.add-user-group, a.button.import-connections {
    padding-left: 2.4em;
}

a.button.add-connection::before, a.button.add-connection-group::before, a.button.add-user::before,
a.button.add-user-group::before, a.button.import-connections::before {
    left: 0.5em;
}

/* ===== "New lab connection" w Settings → Connections (cqure.js) ===== */

/* ten sam rozmiar co sąsiednie przyciski, ikona to litera Q z logo */
.settings-view .settings.connections button.cqure-lab-toggle {
    position: relative;
    padding-left: 2.4em;
    font-size: 0.8em;
}

.settings-view .settings.connections button.cqure-lab-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5em;
    width: 1.8em;
    background: url("app/ext/cqure-branding/images/favicon.svg") no-repeat center / 1.15em;
}

.settings-view .settings.connections .cqure-lab-form {
    margin: 1em 0 1.25em;
    padding: 1.25em 1.4em 1.4em;
    background: #FFFFFF;
    border: 1px solid rgba(12, 13, 18, 0.1);
    border-left: 4px solid var(--cqure-orange);
    border-radius: 1em;
}

.settings-view .settings.connections .cqure-lab-form h3 {
    margin: 0 0 0.4em;
    font-size: 1.15em;
    font-weight: 600;
}

.settings-view .settings.connections .cqure-lab-form p.cqure-lab-help {
    margin: 0 0 1em;
    font-size: 0.95em;
}

.settings-view .settings.connections .cqure-lab-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 0.9em 1.2em;
}

.settings-view .settings.connections .cqure-lab-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    color: rgba(12, 13, 18, 0.75);
    font-size: 0.9em;
    font-weight: 600;
}

.settings-view .settings.connections .cqure-lab-fields input {
    width: 100%;
    max-width: none;
    font-size: 1.05em;
    font-weight: 400;
}

.settings-view .settings.connections .cqure-lab-optional {
    font-weight: 400;
    opacity: 0.7;
}

.settings-view .settings.connections .cqure-lab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 1.2em;
}

.settings-view .settings.connections p.cqure-lab-result {
    margin: 1em 0 0;
    padding: 0.7em 1em;
    border-radius: 0.8em;
    background: rgba(46, 160, 67, 0.12);
    color: #1B5E20;
}

.settings-view .settings.connections p.cqure-lab-result.error {
    background: rgba(198, 40, 40, 0.1);
    color: #9B1C1C;
}

/* ===== Edytory (połączenie, grupa połączeń, profil udostępniania, użytkownik, grupa) i pomoc importu ===== */
/* ciemna strona z logo, a cały edytor w jednej jasnej karcie, żeby wszystkie jego pola zostały czytelne */

body:has(:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help)) {
    min-height: 100vh;
    font-size: clamp(16px, 0.9vw, 30px);
    background:
        radial-gradient(ellipse 55% 40% at 100% 0%, rgba(255, 0, 92, 0.1), transparent 70%),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255, 61, 0, 0.1), transparent 70%),
        var(--cqure-bg);
    background-attachment: fixed;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--cqure-orange), var(--cqure-pink)) 1;
}

/* pasek z logo nad kartą */
body:has(:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help))::before {
    content: "";
    display: block;
    width: min(72em, calc(100% - 3em));
    height: 6em;
    margin: 0 auto;
    background: url("app/ext/cqure-branding/images/logo.svg") no-repeat left center;
    background-size: auto 3.25em;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help).view {
    position: relative;
    width: min(72em, calc(100% - 3em));
    margin: 0 auto 3em;
    padding: 0.75em 1.75em 1.75em;
    background: #F4F4F4;
    color: var(--cqure-bg);
    border-radius: 1.5em;
    box-shadow: 0 0.75em 1.875em rgba(0, 0, 0, 0.35);
}

/* nagłówki sekcji w karcie: ciemny tekst z krótką kreską w gradiencie */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .header,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .header:not(.ng-hide) ~ .header {
    margin: 1.75em 0 0.75em;
    padding: 0;
    background: transparent;
    border: none;
    border-image: none;
    box-shadow: none;
    align-items: center;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) h2.header {
    display: block;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .header h2,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) h2.header,
.import.help.view > h2 {
    padding: 0;
    color: var(--cqure-bg);
    font-size: 1.4em;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .header h2::after,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) h2.header::after,
.import.help.view > h2::after {
    content: "";
    display: block;
    width: 2.25em;
    height: 3px;
    margin-top: 0.3em;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cqure-orange), var(--cqure-pink));
}

/* tytuł strony (pierwszy nagłówek karty) */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help).view > .header:first-child {
    margin: 0;
    padding: 0.5em 0 0.25em;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help).view > .header:first-child h2 {
    font-size: 1.875em;
    letter-spacing: -0.02em;
}

/* menu użytkownika przeniesione na ciemny pasek z logo, jak na pozostałych stronach */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help).view > .header:first-child .user-menu {
    position: absolute;
    top: -4.25em;
    right: 0;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.04);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-dropdown:hover {
    background: rgba(255, 255, 255, 0.1);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-dropdown.open {
    background: rgba(255, 255, 255, 0.14);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-dropdown .menu-title {
    color: #000000;
    filter: invert(1);
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-dropdown .menu-indicator {
    filter: invert(1);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-dropdown .menu-contents {
    top: calc(100% + 0.5em);
    min-width: 13.75em;
    background: #F4F4F4;
    color: var(--cqure-bg);
    border: none;
    border-radius: 1em;
    box-shadow: 0 1.125em 2.5em rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-contents .profile {
    width: auto;
    margin: 1em 1.25em 0.5em;
    padding-bottom: 0.75em;
    border-bottom-color: rgba(12, 13, 18, 0.12);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group, .import.help) .user-menu .menu-contents .profile a {
    color: inherit;
    text-decoration: none;
}

/* grupy pól (Concurrency Limits, Network, Authentication...): małe pomarańczowe etykiety */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .form-group .form .form-header {
    margin: 1.6em 0 0.6em;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    text-shadow: none;
    color: var(--cqure-orange);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .fields .labeled-field .field-header,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) table.properties th {
    color: rgba(12, 13, 18, 0.72);
    font-weight: 400;
}

/* pola formularzy */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="text"],
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="password"],
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="number"],
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="email"],
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="date"],
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="time"],
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) select,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) textarea,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) div.location {
    padding: 0.45em 0.8em;
    border: 1px solid rgba(12, 13, 18, 0.2);
    border-radius: 0.6em;
    background-color: #FFFFFF;
    color: var(--cqure-bg);
    font-size: 0.9375em;
}

/* szersze pola tekstowe, żeby mieściły się długie nazwy hostów (np. INF-RDCB01.AD.CQUREACADEMY.COM) */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="text"],
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input[type="password"] {
    max-width: 26em;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .form .fields {
    border-left-color: rgba(235, 91, 39, 0.35);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) input:focus,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) select:focus,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) textarea:focus {
    border-color: var(--cqure-orange);
    box-shadow: 0 0 0 3px rgba(235, 91, 39, 0.2);
    outline: none;
}

/* filtr (np. w uprawnieniach do połączeń) */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .filter .search-string {
    padding: 0.45em 1em 0.45em 2.5em;
    border-radius: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0D12' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: 0.9em center;
}

/* lista wyboru lokalizacji połączenia */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .location-chooser .dropdown {
    padding: 0.4em;
    border: none;
    border-radius: 0.9em;
    box-shadow: 0 0.75em 1.875em rgba(0, 0, 0, 0.25);
}

/* zakładki (np. Current connections / All connections) jako pigułki */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .section-tabs ul,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .page-tabs .page-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.5em 0 1em;
    padding: 0;
    background: none;
    border: none;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .section-tabs li a,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .page-tabs .page-list li a[href] {
    padding: 0.45em 1.1em;
    border: 1px solid rgba(12, 13, 18, 0.2);
    border-radius: 50px;
    background: #FFFFFF;
    color: var(--cqure-bg);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .section-tabs li a:hover,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .page-tabs .page-list li a[href]:hover {
    background: rgba(235, 91, 39, 0.08);
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .section-tabs li a.current,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .page-tabs .page-list li a[href].current {
    background: var(--cqure-cta);
    border-color: transparent;
    color: #FFFFFF;
}

/* przyciski Save / Clone / Cancel / Delete */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5em;
    margin: 1.75em 0 0.5em;
}

/* przypisane grupy użytkowników jako "pigułki" */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .related-objects .abbreviated-related-objects ul li {
    padding: 0.3em 0.8em;
    border: 1px solid rgba(12, 13, 18, 0.15);
    border-radius: 50px;
    background: #FFFFFF;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .related-objects .all-related-objects {
    border-top-color: rgba(12, 13, 18, 0.12);
}

/* tabele (np. historia połączenia) */
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .history table,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) table.sorted {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .history table th,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .history table td,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) table.sorted th,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) table.sorted td {
    padding: 0.6em 0.9em;
    border: none;
    border-bottom: 1px solid rgba(12, 13, 18, 0.1);
    background: transparent;
    text-align: left;
}

:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) .history table th,
:is(.manage-connection, .manage-connection-group, .manage-sharing-profile, .manage-user, .manage-user-group) table.sorted th {
    border-bottom: 2px solid rgba(12, 13, 18, 0.15);
    color: rgba(12, 13, 18, 0.6);
    font-weight: 600;
}

/* strona pomocy formatu importu: przykłady plików jako ciemne bloki kodu */
.import.help.view pre {
    padding: 1em 1.25em;
    overflow-x: auto;
    background: var(--cqure-bg);
    color: #F4F4F4;
    border-radius: 1em;
}

.import.help.view a {
    color: var(--cqure-orange);
}

/* ===== Import połączeń (Settings → Connections → Import) ===== */

.settings-view.import .file-upload-container,
.settings-view.import .errors {
    margin: 1.5em 0 0;
    padding: 1.5em 1.75em;
    background: #F4F4F4;
    color: var(--cqure-bg);
    border-radius: 1.5em;
    box-shadow: 0 0.75em 1.875em rgba(0, 0, 0, 0.35);
}

.settings-view.import .drop-target {
    border: 2px dashed rgba(12, 13, 18, 0.25);
    border-radius: 1.1em;
    background: #FFFFFF;
    color: var(--cqure-bg);
}

.settings-view.import .drop-target.drop-pending {
    border-color: var(--cqure-orange);
    background: rgba(235, 91, 39, 0.06);
}

.settings-view.import .file-help-link,
.settings-view.import .browse-link {
    color: var(--cqure-orange);
}

.settings-view.import .import-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 1.25em 0 0;
}

/* Cancel leży tu na ciemnym tle */
.settings-view.import .import-buttons button.cancel {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}

.settings-view.import .import-buttons button.cancel:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.settings-view.import .errors table.sorted {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.settings-view.import .errors table.sorted th,
.settings-view.import .errors table.sorted td {
    padding: 0.6em 0.9em;
    border: none;
    border-bottom: 1px solid rgba(12, 13, 18, 0.1);
    background: transparent;
    text-align: left;
}

.settings-view.import .errors .error-message.has-errors {
    color: #9B1C1C;
}

/* ===== Telefon ===== */

@media (max-width: 480px) {
    .login-ui .login-dialog.notification,
    .login-ui.continuation .login-dialog.notification {
        width: calc(100% - 24px);
        padding: 32px 22px 24px;
        border-radius: 22px;
    }
}

@media (max-width: 640px) {
    .home-view .connection-list-ui::before,
    .settings-view > .header::before {
        height: 5em;
        background-size: auto 2.5em;
    }

    .home-view .header .user-menu,
    .settings-view .header .user-menu {
        top: 1.5em;
    }

    .home-view .header,
    .home-view .header:not(.ng-hide) ~ .header {
        flex-wrap: wrap;
    }

    .home-view .header h2 {
        font-size: 1.5em;
    }

    .home-view .header .filter {
        flex: 1 1 100%;
        margin-top: 0.75em;
    }

    .settings-view > .header h2 {
        font-size: 1.75em;
    }

    .settings-view .settings.section,
    .settings-view .preferences .attributes {
        padding: 1.1em;
        border-radius: 1.1em;
    }

    .settings-view table.sorted th,
    .settings-view table.sorted td {
        padding: 0.6em 0.5em;
    }
}
/*
 * 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;

}
.totp-enroll p,.totp-details{font-size:.8em}.totp-qr-code{text-align:center}.totp-qr-code img{margin:1em;border:1px solid rgba(0,0,0,0.25);box-shadow:1px 1px 2px rgba(0,0,0,0.25);cursor:pointer}h3.totp-details-header{font-size:.8em}h3.totp-details-header::before{content:'▸ '}.totp-details-visible h3.totp-details-header::before{content:'▾ '}.totp-details,.totp-hide-details{display:none}.totp-details-visible .totp-details{display:table}.totp-details-visible .totp-hide-details{display:inline}.totp-details-visible .totp-show-details{display:none}.totp-hide-details,.totp-show-details{color:blue;text-decoration:underline;cursor:pointer;margin:0 .25em;font-weight:normal}.totp-details{margin:0 auto}.totp-details th{padding-right:.25em;text-align:left}.totp-details td{font-family:monospace}.totp-detail{display:inline-block;margin:0 .25em}