/* Theme Park Aquamarine Theme for Apache Guacamole */
/* Force remove all default styling */

* {
    transition: none !important;
}

/* Root variables */
:root {
    --tp-bg: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%);
    --tp-accent: #12afa0;
    --tp-button: #009688;
    --tp-text: #e4e4e7;
    --tp-text-muted: #8dcfc9;
    --tp-border: rgba(18, 175, 160, 0.3);
    --tp-surface: rgba(38, 92, 116, 0.95);
    --tp-surface-dark: rgba(11, 49, 97, 0.95);
}

/* Base elements */
html, body {
    background: var(--tp-bg) !important;
    background-attachment: fixed !important;
    color: var(--tp-text) !important;
}

/* Remove all white backgrounds */
div, section, article, aside, header, footer, nav, main,
.ng-scope, .ng-isolate-scope, .ng-binding {
    background-color: transparent !important;
}

/* Login page specific */
.login-ui {
    background: transparent !important;
}

.login-ui .login-dialog,
.login-dialog {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.login-ui .login-dialog h1,
.login-dialog .header h1 {
    color: var(--tp-text) !important;
}

.login-ui input[type="text"],
.login-ui input[type="password"],
.login-ui input[type="submit"],
.login-dialog input {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--tp-border) !important;
    color: var(--tp-text) !important;
}

.login-ui input[type="submit"],
.login-dialog button[type="submit"] {
    background: var(--tp-button) !important;
    color: white !important;
    cursor: pointer !important;
}

.login-ui input[type="submit"]:hover,
.login-dialog button[type="submit"]:hover {
    background: var(--tp-accent) !important;
}

/* Main navigation and menu */
.menu,
.menu-sidebar,
.user-menu,
.menu-content {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border) !important;
}

.menu-body {
    background: var(--tp-surface-dark) !important;
}

/* Connection list */
.connection-list-ui,
.connection-list {
    background: transparent !important;
}

.connection-list-ui .connection-list .list-header,
.list-header {
    background: linear-gradient(-90deg, #47918a 0%, #0b3161 100%) !important;
    color: white !important;
}

.connection,
.connection-group,
.list-item {
    background: rgba(38, 92, 116, 0.6) !important;
    border: 1px solid var(--tp-border) !important;
    color: var(--tp-text) !important;
    margin: 2px !important;
}

.connection:hover,
.connection-group:hover,
.list-item:hover {
    background: rgba(18, 175, 160, 0.3) !important;
    color: white !important;
}

.connection .name,
.connection-group .name {
    color: var(--tp-text) !important;
}

/* All buttons */
button,
input[type="button"],
input[type="submit"],
.button,
a.button {
    background: var(--tp-button) !important;
    color: white !important;
    border: none !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
a.button:hover {
    background: var(--tp-accent) !important;
}

/* All form inputs */
input:not([type="button"]):not([type="submit"]),
textarea,
select {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--tp-border) !important;
    color: var(--tp-text) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--tp-accent) !important;
    outline: none !important;
}

/* Dropdowns */
.menu-dropdown,
.dropdown-menu,
select,
.chosen-container .chosen-results,
.location-chooser {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-border) !important;
}

.menu-dropdown .menu-item,
.dropdown-menu li,
.chosen-container .chosen-results li {
    color: var(--tp-text) !important;
}

.menu-dropdown .menu-item:hover,
.dropdown-menu li:hover,
.chosen-container .chosen-results li.highlighted {
    background: rgba(18, 175, 160, 0.3) !important;
    color: white !important;
}

/* Modal dialogs */
.modal,
.modal-dialog,
guac-modal .modal-body {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-border) !important;
}

.modal-header,
.modal-title {
    background: linear-gradient(-90deg, #47918a 0%, #0b3161 100%) !important;
    color: white !important;
}

.modal-footer {
    background: var(--tp-surface-dark) !important;
    border-top: 1px solid var(--tp-border) !important;
}

/* Settings and preferences */
.settings,
.settings-ui,
.preferences,
.settings-section {
    background: transparent !important;
}

.settings-section {
    background: rgba(38, 92, 116, 0.6) !important;
    border: 1px solid var(--tp-border) !important;
    margin: 10px !important;
    padding: 10px !important;
}

/* Tables */
table {
    background: rgba(38, 92, 116, 0.6) !important;
}

thead, th {
    background: rgba(18, 175, 160, 0.3) !important;
    color: white !important;
}

tbody tr {
    border-bottom: 1px solid var(--tp-border) !important;
}

tbody tr:hover {
    background: rgba(18, 175, 160, 0.15) !important;
}

td {
    color: var(--tp-text) !important;
}

/* Text elements */
h1, h2, h3, h4, h5, h6 {
    color: white !important;
}

p, span, div, label, li {
    color: var(--tp-text) !important;
}

a {
    color: #0ed2bf !important;
}

a:hover {
    color: #36e7d6 !important;
}

/* Notifications */
.notification,
.notification-content,
guac-notification {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-border) !important;
    color: var(--tp-text) !important;
}

/* Status bar */
.status,
.status-bar {
    background: var(--tp-surface-dark) !important;
    color: var(--tp-text) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--tp-button);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tp-accent);
}

/* File browser */
.file-browser,
.file-browser-body {
    background: var(--tp-surface) !important;
}

.file-list .file {
    color: var(--tp-text) !important;
}

.file-list .file:hover {
    background: rgba(18, 175, 160, 0.2) !important;
}

/* Keyboard shortcuts */
.keyboard-shortcuts,
.keyboard-shortcut-dialog {
    background: var(--tp-surface) !important;
    color: var(--tp-text) !important;
}

/* User menu specific */
.user-menu .menu-dropdown {
    background: var(--tp-surface) !important;
}

/* Menu contents dropdown - fix transparency */
.menu-contents {
    background: rgba(38, 92, 116, 0.98) !important;
    border: 1px solid var(--tp-border) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.menu-contents .profile {
    background: transparent !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid var(--tp-border) !important;
}

.menu-contents .action-list {
    background: transparent !important;
}

.menu-contents .action-list li {
    background: rgba(0, 0, 0, 0.2) !important;
    margin: 2px 0 !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
}

.menu-contents .action-list li:hover {
    background: rgba(18, 175, 160, 0.3) !important;
}

.menu-contents .page-list {
    background: transparent !important;
}

.menu-contents .page-list-level {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 5px !important;
    margin: 5px 0 !important;
    border-radius: 4px !important;
}

.menu-contents .page-list-level li {
    margin: 2px 0 !important;
    border-radius: 4px !important;
    transition: background 0.2s !important;
}

.menu-contents .page-list-level li:hover {
    background: rgba(18, 175, 160, 0.3) !important;
}

.menu-contents a {
    color: var(--tp-text) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 5px 10px !important;
}

.menu-contents a:hover {
    color: white !important;
    background: rgba(18, 175, 160, 0.2) !important;
    border-radius: 4px !important;
}

.menu-contents a.current {
    color: var(--tp-accent) !important;
    font-weight: bold !important;
    background: rgba(18, 175, 160, 0.15) !important;
    border-radius: 4px !important;
}

.menu-contents a.current:hover {
    background: rgba(18, 175, 160, 0.4) !important;
}

/* Connection thumbnails */
.connection .thumbnail {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--tp-border) !important;
}

/* Active connections */
.active-connections {
    background: transparent !important;
}

/* Client panel */
.client-panel {
    background: var(--tp-surface-dark) !important;
}

/* Override any remaining white elements */
.home,
.recent-connections,
.all-connections {
    background: transparent !important;
}

/* Clipboard */
.clipboard,
.clipboard-service-text {
    background: var(--tp-surface) !important;
    color: var(--tp-text) !important;
}

/* Text input dialog */
.text-input-dialog {
    background: var(--tp-surface) !important;
}

/* Loading screen */
.loading {
    background: var(--tp-bg) !important;
}

/* Error pages */
.error,
.fatal-page-error {
    background: var(--tp-surface) !important;
    color: var(--tp-text) !important;
}

/* Fix for any missed white backgrounds */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background-color: rgb(255, 255, 255)"] {
    background-color: var(--tp-surface) !important;
}

/* Fix for any missed black text on dark background */
[style*="color: black"],
[style*="color: #000"],
[style*="color: #000000"],
[style*="color: rgb(0, 0, 0)"] {
    color: var(--tp-text) !important;
}

/* Ensure all text remains visible */
* {
    scrollbar-color: var(--tp-button) rgba(0, 0, 0, 0.3);
}

/* Connection page specific */
#content {
    background: transparent !important;
}

/* Home page sections */
.home-page,
.page-content {
    background: transparent !important;
}

/* Settings tabs */
.tabs,
.tab-content {
    background: transparent !important;
}

.tab {
    background: var(--tp-surface) !important;
    color: var(--tp-text) !important;
}

.tab.active {
    background: var(--tp-accent) !important;
    color: white !important;
}