/* ==== REMINA DARK THEME ==== */
/* Загальні налаштування */
:root {
    --rmn-primary-bg: #0d1117;
    --rmn-secondary-bg: #161b22;
    --rmn-surface-bg: #21262d;
    --rmn-accent-color: #58a6ff;
    --rmn-accent-hover: #388bfd;
    --rmn-text-primary: #f0f6fc;
    --rmn-text-secondary: #8b949e;
    --rmn-border-color: #30363d;
    --rmn-border-hover: #58a6ff;
    --rmn-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --rmn-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Основа */
body {
    background: linear-gradient(135deg, var(--rmn-primary-bg) 0%, #0a0e13 100%) !important;
    color: var(--rmn-text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.6 !important;
    min-height: 100vh !important;
}

/* Виправляємо білий фон */
html, body, .login-ui {
    background: var(--rmn-primary-bg) !important;
}

/* Екран входу */
.rmn-login {
    background: linear-gradient(135deg, var(--rmn-primary-bg) 0%, #0a0e13 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login-ui {
    background: transparent !important;
    color: var(--rmn-text-primary) !important;
}

.login-ui .login-dialog {
    background: var(--rmn-secondary-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: var(--rmn-shadow) !important;
    backdrop-filter: blur(10px) !important;
    max-width: 400px !important;
    width: 100% !important;
    animation: rmn-fadeInUp 0.6s ease-out !important;
    position: relative !important;
}

/* Додаємо кастомний логотип та назву */
.login-ui .login-dialog::before {
    content: 'IBIS Remote Service' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 70px !important;
    margin: 0 auto 32px !important;
    background-image: url('app/ext/ibis-remote-service-theme/images/logo.svg') !important;
    background-size: 50px 50px !important;
    background-repeat: no-repeat !important;
    background-position: 20px center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--rmn-text-secondary) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    padding-left: 85px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.login-ui .login-dialog::after {
    display: none !important;
}

@keyframes rmn-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Приховуємо стандартні елементи Guacamole */
.login-ui .login-dialog .logo,
.login-ui .login-dialog h1,
.login-ui h1,
.login-ui img,
.login-dialog img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Приховуємо нижню надпись IBIS Remote Service */
.login-ui .login-dialog .footer,
.login-ui .login-dialog .branding,
.login-ui .login-dialog .version,
.login-ui .login-dialog .copyright {
    display: none !important;
}

/* Показуємо поля входу та кнопки */
.login-ui .login-dialog .login-fields,
.login-ui .login-dialog input,
.login-ui .login-dialog button,
.login-ui .login-dialog .login-buttons {
    display: block !important;
    visibility: visible !important;
}

/* Поля вводу */
.login-ui input {
    background: var(--rmn-surface-bg) !important;
    border: 2px solid var(--rmn-border-color) !important;
    color: var(--rmn-text-primary) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
}

.login-ui input:focus {
    border-color: var(--rmn-accent-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1) !important;
    transform: translateY(-1px) !important;
}

.login-ui input::placeholder {
    color: var(--rmn-text-secondary) !important;
}

/* Кнопки */
.rmn-button, button, .login-ui button, .login-ui input[type="submit"] {
    background: linear-gradient(135deg, var(--rmn-accent-color) 0%, var(--rmn-accent-hover) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--rmn-shadow-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    visibility: visible !important;
}

.rmn-button:hover, button:hover, .login-ui button:hover, .login-ui input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--rmn-accent-hover) 0%, #2171b5 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(88, 166, 255, 0.3) !important;
}

.rmn-button:active, button:active, .login-ui button:active, .login-ui input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: var(--rmn-shadow-light) !important;
}

/* Основний інтерфейс */
.client-ui {
    background: var(--rmn-primary-bg) !important;
    color: var(--rmn-text-primary) !important;
}

/* Верхнє меню */
.rmn-menu-bar, .client-ui .menu-bar {
    background: linear-gradient(90deg, var(--rmn-secondary-bg) 0%, var(--rmn-surface-bg) 100%) !important;
    border-bottom: 3px solid var(--rmn-accent-color) !important;
    box-shadow: var(--rmn-shadow-light) !important;
    padding: 8px 16px !important;
}

/* Панель підключень */
.rmn-connection-list, .connection-list {
    background: var(--rmn-secondary-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 16px !important;
    box-shadow: var(--rmn-shadow-light) !important;
}

.rmn-connection, .connection-list .connection {
    background: var(--rmn-surface-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    color: var(--rmn-text-primary) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.rmn-connection:hover, .connection-list .connection:hover {
    background: var(--rmn-accent-color) !important;
    border-color: var(--rmn-accent-hover) !important;
    transform: translateX(4px) !important;
    box-shadow: var(--rmn-shadow-light) !important;
}

/* Заголовки */
.rmn-title, h1, h2, h3 {
    color: var(--rmn-text-primary) !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

/* Скролбар */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--rmn-secondary-bg) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: var(--rmn-accent-color) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rmn-accent-hover) !important;
}

/* Адаптивність */
@media (max-width: 768px) {
    .login-ui .login-dialog {
        margin: 16px !important;
        padding: 24px !important;
    }
    
    .rmn-connection-list, .connection-list {
        margin: 8px !important;
        padding: 12px !important;
    }
}

/* Додаткові ефекти */
.rmn-glow {
    animation: rmn-glow 2s ease-in-out infinite alternate !important;
}

@keyframes rmn-glow {
    from {
        box-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
    }
    to {
        box-shadow: 0 0 20px rgba(88, 166, 255, 0.4);
    }
}

/* Додаткові стилі для кращого вигляду */
.login-ui .login-dialog .login-fields {
    margin-top: 16px !important;
}

/* Виправлення кольорів тексту в основному інтерфейсі */
/* Загальні правила для всього інтерфейсу */
body, html {
    color: var(--rmn-text-primary) !important;
}

/* Основні контейнери */
.client-ui, .home-ui, .settings-ui {
    color: var(--rmn-text-primary) !important;
    background: var(--rmn-primary-bg) !important;
}

/* Вкладки та навігація */
.client-ui .menu-bar,
.client-ui .tab-bar,
.client-ui .tabs,
.home-ui .menu-bar,
.home-ui .tab-bar,
.settings-ui .menu-bar,
.settings-ui .tab-bar {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
}

/* Елементи вкладок */
.client-ui .tab,
.home-ui .tab,
.settings-ui .tab,
.client-ui .menu-item,
.home-ui .menu-item,
.settings-ui .menu-item {
    color: var(--rmn-text-primary) !important;
    background: transparent !important;
}

/* Активні вкладки */
.client-ui .tab.active,
.home-ui .tab.active,
.settings-ui .tab.active,
.client-ui .tab.current,
.home-ui .tab.current,
.settings-ui .tab.current {
    color: var(--rmn-accent-color) !important;
    background: var(--rmn-surface-bg) !important;
}

/* Список підключень */
.home-ui .connection-list,
.client-ui .connection-list {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
}

.home-ui .connection,
.client-ui .connection {
    color: var(--rmn-text-primary) !important;
    background: var(--rmn-surface-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
}

/* Назви та описи підключень */
.home-ui .connection .name,
.home-ui .connection .caption,
.client-ui .connection .name,
.client-ui .connection .caption,
.connection-group .name,
.connection-group .caption {
    color: var(--rmn-text-primary) !important;
}

/* Всі текстові елементи */
.client-ui span,
.client-ui div,
.client-ui p,
.client-ui h1,
.client-ui h2,
.client-ui h3,
.client-ui h4,
.client-ui h5,
.client-ui h6,
.home-ui span,
.home-ui div,
.home-ui p,
.home-ui h1,
.home-ui h2,
.home-ui h3,
.home-ui h4,
.home-ui h5,
.home-ui h6,
.settings-ui span,
.settings-ui div,
.settings-ui p,
.settings-ui h1,
.settings-ui h2,
.settings-ui h3,
.settings-ui h4,
.settings-ui h5,
.settings-ui h6 {
    color: var(--rmn-text-primary) !important;
}

/* Мітки та підписи */
.client-ui label,
.home-ui label,
.settings-ui label,
.client-ui .label,
.home-ui .label,
.settings-ui .label {
    color: var(--rmn-text-primary) !important;
}

/* Таблиці */
.client-ui table,
.home-ui table,
.settings-ui table {
    color: var(--rmn-text-primary) !important;
    background: var(--rmn-secondary-bg) !important;
}

.client-ui th,
.client-ui td,
.home-ui th,
.home-ui td,
.settings-ui th,
.settings-ui td {
    color: var(--rmn-text-primary) !important;
    border-color: var(--rmn-border-color) !important;
}

/* Поля вводу */
.client-ui input,
.client-ui select,
.client-ui textarea,
.home-ui input,
.home-ui select,
.home-ui textarea,
.settings-ui input,
.settings-ui select,
.settings-ui textarea {
    background: var(--rmn-surface-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    color: var(--rmn-text-primary) !important;
}

/* Посилання */
.client-ui a,
.home-ui a,
.settings-ui a {
    color: var(--rmn-accent-color) !important;
}

.client-ui a:hover,
.home-ui a:hover,
.settings-ui a:hover {
    color: var(--rmn-accent-hover) !important;
}

/* Специфічні селектори для Guacamole */
/* Виправлення для елементів з inline стилями */
[style*="color: black"] *,
[style*="color: #000"] *,
[style*="color: rgb(0, 0, 0)"] * {
    color: var(--rmn-text-primary) !important;
}

/* Панелі налаштувань */
.settings-view,
.settings-view * {
    color: var(--rmn-text-primary) !important;
}

/* Навігаційні елементи */
.page-tabs,
.page-tabs *,
.page-list,
.page-list * {
    color: var(--rmn-text-primary) !important;
}

/* Специфічні стилі для елементів з скріншоту */
/* Вкладки налаштувань */
.ng-scope,
.ng-scope * {
    color: var(--rmn-text-primary) !important;
}

/* Елементи списку сторінок */
.page-list-level,
.page-list-level *,
li[ng-repeat],
li[ng-repeat] * {
    color: var(--rmn-text-primary) !important;
}

/* Посилання в навігації */
a[ng-click],
a[ng-click] *,
.home.ng-binding,
.home.ng-binding * {
    color: var(--rmn-text-primary) !important;
}

/* Активні посилання */
a[ng-click].current,
a[ng-click].current *,
a[href*="settings"] {
    color: var(--rmn-accent-color) !important;
}

/* Групи користувачів та інші елементи */
.settings-view .ng-scope,
.settings-view .ng-scope * {
    color: var(--rmn-text-primary) !important;
}

/* Виправлення для всіх Angular елементів */
[ng-repeat],
[ng-repeat] *,
[ng-click],
[ng-click] *,
[ng-binding],
[ng-binding] * {
    color: var(--rmn-text-primary) !important;
}

/* Додаткові виправлення для темного тексту */
* {
    color: var(--rmn-text-primary) !important;
}

/* Виключення для елементів, які повинні залишитися білими */
.login-ui,
.login-ui * {
    color: inherit !important;
}

/* Стилізація стандартного user-menu Guacamole */

/* Загальні стилі для випадаючих меню (для інших елементів) */
.dropdown,
.menu,
.context-menu {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 8px !important;
    box-shadow: var(--rmn-shadow) !important;
}

.dropdown-item,
.menu-item {
    background: transparent !important;
    color: var(--rmn-text-primary) !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover,
.menu-item:hover {
    background: var(--rmn-surface-bg) !important;
    color: var(--rmn-accent-color) !important;
}

/* Поля пошуку та вводу */
input[type="text"],
input[type="search"],
input[placeholder*="Фільтр"],
input[placeholder*="Filter"],
input[placeholder*="Пошук"],
input[placeholder*="Search"],
.search-input,
.filter-input {
    background: var(--rmn-surface-bg) !important;
    color: var(--rmn-text-primary) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
.search-input:focus,
.filter-input:focus {
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
    outline: none !important;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder,
.search-input::placeholder,
.filter-input::placeholder {
    color: var(--rmn-text-secondary) !important;
}

/* Кнопки в основному інтерфейсі */
.client-ui button,
.home-ui button,
.settings-ui button {
    background: var(--rmn-accent-color) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
}

.client-ui button:hover,
.home-ui button:hover,
.settings-ui button:hover {
    background: var(--rmn-accent-hover) !important;
}

/* Додаткові стилі для специфічних елементів Guacamole */
/* Випадаюче меню користувача */
.guac-menu,
.guac-menu *,
.guac-user-menu,
.guac-user-menu * {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
    border: 1px solid var(--rmn-border-color) !important;
    box-shadow: var(--rmn-shadow) !important;
}

/* Елементи меню */
.guac-menu .menu-item,
.guac-user-menu .menu-item,
.guac-menu a,
.guac-user-menu a {
    color: var(--rmn-text-primary) !important;
    background: transparent !important;
    text-decoration: none !important;
    display: block !important;
    padding: 8px 16px !important;
}

.guac-menu .menu-item:hover,
.guac-user-menu .menu-item:hover,
.guac-menu a:hover,
.guac-user-menu a:hover {
    background: var(--rmn-surface-bg) !important;
    color: var(--rmn-accent-color) !important;
}

/* Всі випадаючі списки */
select,
.select,
.dropdown-menu,
.dropdown-content {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
    border: 1px solid var(--rmn-border-color) !important;
}

select option,
.select option,
.dropdown-menu option,
.dropdown-content option {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
}

/* Поля пошуку з різними селекторами */
.client-ui input,
.home-ui input,
.settings-ui input {
    background: var(--rmn-surface-bg) !important;
    color: var(--rmn-text-primary) !important;
    border: 1px solid var(--rmn-border-color) !important;
}

/* Виправлення для білих фонів */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background-color: #fff"],
[style*="background: #ffffff"],
[style*="background-color: #ffffff"] {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
}

/* Виправлення для елементів з білим фоном */
.white-bg,
.light-bg,
.bg-white {
    background: var(--rmn-secondary-bg) !important;
    color: var(--rmn-text-primary) !important;
}

/* Стилі для чекбоксів */
input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--rmn-surface-bg) !important;
    border: 2px solid var(--rmn-border-color) !important;
    border-radius: 3px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

input[type="checkbox"]:checked {
    background: var(--rmn-accent-color) !important;
    border-color: var(--rmn-accent-color) !important;
}

input[type="checkbox"]:checked::before {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

input[type="checkbox"]:hover {
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
}

/* Стилі для полів вводу паролів */
input[type="password"] {
    background: var(--rmn-surface-bg) !important;
    color: var(--rmn-text-primary) !important;
    border: 2px solid var(--rmn-border-color) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

input[type="password"]:focus {
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2) !important;
    outline: none !important;
}

input[type="password"]::placeholder {
    color: var(--rmn-text-secondary) !important;
}

/* Стилі для числових полів */
input[type="number"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    background: var(--rmn-surface-bg) !important;
    color: var(--rmn-text-primary) !important;
    border: 2px solid var(--rmn-border-color) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

input[type="number"]:focus {
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2) !important;
    outline: none !important;
}

/* Кастомні стрілки для числових полів */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Створюємо власні кнопки для числових полів */
.number-input-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.number-input-wrapper input[type="number"] {
    padding-right: 30px !important;
}

.number-input-wrapper::after {
    content: '' !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-bottom: 6px solid var(--rmn-text-secondary) !important;
    cursor: pointer !important;
}

/* Стилі для радіо кнопок */
input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--rmn-surface-bg) !important;
    border: 2px solid var(--rmn-border-color) !important;
    border-radius: 50% !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

input[type="radio"]:checked {
    border-color: var(--rmn-accent-color) !important;
}

input[type="radio"]:checked::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--rmn-accent-color) !important;
    border-radius: 50% !important;
}

input[type="radio"]:hover {
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
}

/* Стилі для range слайдерів */
input[type="range"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    cursor: pointer !important;
    height: 6px !important;
}

input[type="range"]::-webkit-slider-track {
    background: var(--rmn-surface-bg) !important;
    height: 6px !important;
    border-radius: 3px !important;
    border: 1px solid var(--rmn-border-color) !important;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--rmn-accent-color) !important;
    height: 18px !important;
    width: 18px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

input[type="range"]::-moz-range-track {
    background: var(--rmn-surface-bg) !important;
    height: 6px !important;
    border-radius: 3px !important;
    border: 1px solid var(--rmn-border-color) !important;
}

input[type="range"]::-moz-range-thumb {
    background: var(--rmn-accent-color) !important;
    height: 18px !important;
    width: 18px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Стилі для user-menu елементів */
.user-menu {
    position: relative !important;
}

.user-menu .menu-dropdown {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px !important;
}

.user-menu .menu-title {
    background: var(--rmn-surface-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 8px !important;
    color: var(--rmn-text-primary) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 120px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.user-menu .menu-title:hover {
    background: var(--rmn-accent-color) !important;
    border-color: var(--rmn-accent-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(88, 166, 255, 0.3) !important;
}

/* Приховуємо стандартний індикатор меню */
.user-menu .menu-indicator {
    display: none !important;
}

/* Стилізуємо вміст меню як кнопки */
.user-menu .menu-contents {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: var(--rmn-secondary-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(16px) !important;
    padding: 8px !important;
    min-width: 200px !important;
    z-index: 1000 !important;
    margin-top: 8px !important;
}

.user-menu .menu-contents .action-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.user-menu .menu-contents .action-list li {
    margin: 4px 0 !important;
}

.user-menu .menu-contents .action-list a {
    display: block !important;
    background: var(--rmn-surface-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 8px !important;
    color: var(--rmn-text-primary) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.user-menu .menu-contents .action-list a:hover {
    background: var(--rmn-accent-color) !important;
    border-color: var(--rmn-accent-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3) !important;
}

/* Спеціальний стиль для кнопки виходу */
.user-menu .menu-contents .action-list a.logout {
    background: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: #dc3545 !important;
}

.user-menu .menu-contents .action-list a.logout:hover {
    background: #dc3545 !important;
    border-color: #c82333 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

/* Виправлення жовтої підсвітки на синю */
/* Загальна підсвітка для всіх елементів */
*:focus,
*:focus-visible {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2) !important;
}

/* Підсвітка для посилань */
a:focus,
a:focus-visible {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    background: rgba(88, 166, 255, 0.1) !important;
    color: var(--rmn-accent-color) !important;
}

/* Підсвітка для кнопок */
button:focus,
button:focus-visible,
input[type="button"]:focus,
input[type="submit"]:focus {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2) !important;
}

/* Підсвітка для полів вводу */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2) !important;
}

/* Підсвітка для елементів списків */
li:focus,
li:focus-visible,
.connection:focus,
.connection:focus-visible {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    background: rgba(88, 166, 255, 0.1) !important;
}

/* Підсвітка для елементів меню */
.menu-item:focus,
.menu-item:focus-visible,
.action-list a:focus,
.action-list a:focus-visible {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    background: rgba(88, 166, 255, 0.15) !important;
    color: var(--rmn-accent-color) !important;
}

/* Підсвітка для вкладок */
.tab:focus,
.tab:focus-visible {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    background: rgba(88, 166, 255, 0.1) !important;
}

/* Виправлення для специфічних елементів Guacamole */
/* Підсвітка для підключень */
.home-ui .connection:focus,
.home-ui .connection:focus-visible,
.client-ui .connection:focus,
.client-ui .connection:focus-visible {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    background: rgba(88, 166, 255, 0.1) !important;
    border-color: var(--rmn-accent-color) !important;
}

/* Підсвітка для елементів налаштувань */
.settings-ui .form-field:focus-within,
.settings-ui .form-group:focus-within {
    outline: 2px solid var(--rmn-accent-color) !important;
    outline-offset: 2px !important;
    background: rgba(88, 166, 255, 0.05) !important;
}

/* Прибираємо жовту підсвітку браузера */
*::-moz-focus-inner {
    border: 0 !important;
    outline: none !important;
}

*:focus:not(:focus-visible) {
    outline: none !important;
}

/* Виправлення для елементів з жовтою підсвіткою */
[style*="background: yellow"],
[style*="background-color: yellow"],
[style*="background: #ffff00"],
[style*="background-color: #ffff00"] {
    background: rgba(88, 166, 255, 0.2) !important;
}

/* Підсвітка для активних елементів */
.active:focus,
.current:focus,
.selected:focus {
    outline: 2px solid var(--rmn-accent-hover) !important;
    outline-offset: 2px !important;
    background: rgba(88, 166, 255, 0.2) !important;
    color: var(--rmn-accent-color) !important;
}

/* Красивий стиль для group-list у вигляді сітки */
.group-list,
.group-list-page,
div[class*="group-list"],
ul[class*="group-list"],
*[class*="group-list"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    padding: 20px !important;
    background: transparent !important;
    list-style: none !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
}

/* Стиль для list-item (підключень) */
.group-list .list-item,
.group-list-page .list-item,
*[class*="group-list"] *[class*="list-item"],
div[class*="group-list"] div[class*="list-item"],
ul[class*="group-list"] li[class*="list-item"] {
    background: var(--rmn-secondary-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    color: var(--rmn-text-primary) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

*[class*="group-list"] *[class*="list-item"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--rmn-accent-color), var(--rmn-accent-hover)) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

*[class*="group-list"] *[class*="list-item"]:hover {
    background: var(--rmn-surface-bg) !important;
    border-color: var(--rmn-accent-color) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(88, 166, 255, 0.2) !important;
}

*[class*="group-list"] *[class*="list-item"]:hover::before {
    opacity: 1 !important;
}

/* Назва підключення в list-item */
.group-list .list-item .name,
.group-list-page .list-item .name,
.group-list .list-item,
.group-list-page .list-item {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--rmn-text-primary) !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

/* Опис підключення в list-item */
.group-list .list-item .caption,
.group-list-page .list-item .caption {
    font-size: 13px !important;
    color: var(--rmn-text-secondary) !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

/* Іконка протоколу */
.home-ui .connection .protocol-icon,
.client-ui .connection .protocol-icon,
.settings-ui .connection .protocol-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 12px !important;
    background: var(--rmn-accent-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3) !important;
}

/* Іконки для різних протоколів */
.home-ui .connection[data-protocol="rdp"] .protocol-icon::before,
.client-ui .connection[data-protocol="rdp"] .protocol-icon::before,
.settings-ui .connection[data-protocol="rdp"] .protocol-icon::before {
    content: '🖥️' !important;
}

.home-ui .connection[data-protocol="ssh"] .protocol-icon::before,
.client-ui .connection[data-protocol="ssh"] .protocol-icon::before,
.settings-ui .connection[data-protocol="ssh"] .protocol-icon::before {
    content: '⌨️' !important;
}

.home-ui .connection[data-protocol="vnc"] .protocol-icon::before,
.client-ui .connection[data-protocol="vnc"] .protocol-icon::before,
.settings-ui .connection[data-protocol="vnc"] .protocol-icon::before {
    content: '📺' !important;
}

.home-ui .connection[data-protocol="telnet"] .protocol-icon::before,
.client-ui .connection[data-protocol="telnet"] .protocol-icon::before,
.settings-ui .connection[data-protocol="telnet"] .protocol-icon::before {
    content: '📟' !important;
}

/* Іконка для list-item */
.group-list .list-item::after,
.group-list-page .list-item::after {
    content: '🔗' !important;
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--rmn-accent-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3) !important;
    z-index: 1 !important;
}

/* Приховуємо псевдоелемент, якщо є protocol-icon */
.home-ui .connection:has(.protocol-icon)::after,
.client-ui .connection:has(.protocol-icon)::after,
.settings-ui .connection:has(.protocol-icon)::after {
    display: none !important;
}

/* Статус підключення */
.home-ui .connection .status,
.client-ui .connection .status,
.settings-ui .connection .status {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5) !important;
}

.home-ui .connection .status.offline,
.client-ui .connection .status.offline,
.settings-ui .connection .status.offline {
    background: #6c757d !important;
    box-shadow: 0 0 8px rgba(108, 117, 125, 0.5) !important;
}

/* Активне підключення */
.home-ui .connection.active,
.client-ui .connection.active,
.settings-ui .connection.active {
    background: rgba(88, 166, 255, 0.1) !important;
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3) !important;
}

/* Групи підключень */
.home-ui .connection-group,
.client-ui .connection-group,
.settings-ui .connection-group {
    background: var(--rmn-secondary-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.home-ui .connection-group::before,
.client-ui .connection-group::before,
.settings-ui .connection-group::before {
    content: '📁' !important;
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--rmn-surface-bg) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    border: 2px solid var(--rmn-border-color) !important;
}

.home-ui .connection-group:hover::before,
.client-ui .connection-group:hover::before,
.settings-ui .connection-group:hover::before {
    background: var(--rmn-accent-color) !important;
    border-color: var(--rmn-accent-hover) !important;
}

/* Текст всередині list-item */
.group-list .list-item *,
.group-list-page .list-item * {
    color: var(--rmn-text-primary) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Назва підключення має бути більш помітною */
.group-list .list-item .name,
.group-list-page .list-item .name {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 60px !important;
    margin-bottom: 8px !important;
}

/* Статус підключення */
.group-list .list-item .status,
.group-list-page .list-item .status {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5) !important;
    z-index: 3 !important;
}

.group-list .list-item .status.offline,
.group-list-page .list-item .status.offline {
    background: #6c757d !important;
    box-shadow: 0 0 8px rgba(108, 117, 125, 0.5) !important;
}

/* Активне підключення */
.group-list .list-item.active,
.group-list-page .list-item.active {
    background: rgba(88, 166, 255, 0.1) !important;
    border-color: var(--rmn-accent-color) !important;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3) !important;
}

/* Адаптивність для сітки */
@media (max-width: 768px) {
    .group-list,
    .group-list-page {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    .group-list .list-item,
    .group-list-page .list-item {
        min-height: 100px !important;
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .group-list,
    .group-list-page {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
    }
}

/* НАЙСИЛЬНІШЕ ПРАВИЛО - використовуємо flexbox замість grid */
html body *[class*="group-list"]:not(.rmn-user-buttons) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 20px !important;
    background: transparent !important;
    list-style: none !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: unset !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body *[class*="group-list"] *[class*="list-item"] {
    background: var(--rmn-secondary-bg) !important;
    border: 1px solid var(--rmn-border-color) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    color: var(--rmn-text-primary) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    width: 280px !important;
    flex: 0 0 280px !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html body *[class*="group-list"] *[class*="list-item"]:hover {
    background: var(--rmn-surface-bg) !important;
    border-color: var(--rmn-accent-color) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(88, 166, 255, 0.2) !important;
}

html body *[class*="group-list"] *[class*="list-item"]::after {
    content: '🔗' !important;
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--rmn-accent-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3) !important;
    z-index: 1 !important;
}

/* Виправлення розташування тексту в картках */
html body *[class*="group-list"] *[class*="list-item"] * {
    color: var(--rmn-text-primary) !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Контейнер для тексту під іконкою */
html body *[class*="group-list"] *[class*="list-item"] {
    padding-top: 70px !important;
    padding-bottom: 20px !important;
    justify-content: flex-start !important;
}

/* Назва підключення */
html body *[class*="group-list"] *[class*="list-item"] .name,
html body *[class*="group-list"] *[class*="list-item"] > *:first-child {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--rmn-text-primary) !important;
    margin: 8px 0 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
}

/* Опис/підпис підключення */
html body *[class*="group-list"] *[class*="list-item"] .caption,
html body *[class*="group-list"] *[class*="list-item"] > *:last-child {
    font-size: 12px !important;
    color: var(--rmn-text-secondary) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 4px 0 0 0 !important;
    opacity: 0.8 !important;
}

/* Адаптивність для flexbox сітки */
@media (max-width: 768px) {
    html body *[class*="group-list"] *[class*="list-item"] {
        width: 240px !important;
        flex: 0 0 240px !important;
        min-height: 100px !important;
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    html body *[class*="group-list"]:not(.rmn-user-buttons) {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    html body *[class*="group-list"] *[class*="list-item"] {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 80px !important;
        padding: 12px !important;
    }
}

/* ВИПРАВЛЕННЯ ТЕКСТУ В КАРТКАХ */
html body *[class*="group-list"] *[class*="list-item"] {
    padding: 16px 20px 20px 20px !important;
}

/* Приховуємо стандартні іконки */
html body *[class*="group-list"] *[class*="list-item"] .icon,
html body *[class*="group-list"] *[class*="list-item"] img,
html body *[class*="group-list"] *[class*="list-item"] svg {
    display: none !important;
}

/* Менша іконка */
html body *[class*="group-list"] *[class*="list-item"]::after {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    top: 16px !important;
}

/* Назва підключення */
html body *[class*="group-list"] *[class*="list-item"] > *:first-child {
    margin-top: 45px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
}

/* Опис підключення */
html body *[class*="group-list"] *[class*="list-item"] > *:last-child:not(:first-child) {
    margin-top: 6px !important;
    font-size: 11px !important;
    opacity: 0.7 !important;
    text-align: center !important;
}

/* РОБИМО ВСЮ КАРТКУ КЛІКАБЕЛЬНОЮ */
/* Сама картка є посиланням */
html body *[class*="group-list"] a[class*="list-item"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-decoration: none !important;
    color: var(--rmn-text-primary) !important;
    width: 280px !important;
    flex: 0 0 280px !important;
}

/* Вміст всередині посилання-картки повинен бути видимим */
html body *[class*="group-list"] a[class*="list-item"] * {
    color: var(--rmn-text-primary) !important;
    text-decoration: none !important;
}

/* Якщо list-item містить посилання всередині */
html body *[class*="group-list"] *[class*="list-item"]:not(a) {
    cursor: pointer !important;
}

/* Посилання всередині картки розтягуємо, але робимо прозорим */
html body *[class*="group-list"] *[class*="list-item"]:not(a) > a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    color: transparent !important;
    font-size: 0 !important;
}

/* Текстовий контент поверх посилання */
html body *[class*="group-list"] *[class*="list-item"]:not(a) > *:not(a) {
    position: relative !important;
    z-index: 2 !important;
}

/* Підтримка ng-click */
html body *[class*="group-list"] *[class*="list-item"][ng-click] {
    cursor: pointer !important;
}

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