/* ============================================= */
/* THEME-PARK DARK THEME BASE */
/* ============================================= */

/* Theme-park Dark Theme Variables - Using Fishtalk gradient */
:root {
  --main-bg-color: radial-gradient(ellipse at center, #404040 0%, #2d2d30 50%, #1a1a1a 100%) center center/cover no-repeat fixed;
  
  --modal-bg-color: radial-gradient(ellipse at center, #404040 0%, #2d2d30 50%, #1a1a1a 100%) center center/cover no-repeat fixed;
  --modal-header-color: radial-gradient(ellipse at center, #404040 0%, #2d2d30 50%, #1a1a1a 100%) center center/cover no-repeat fixed;
  --modal-footer-color: radial-gradient(ellipse at center, #404040 0%, #2d2d30 50%, #1a1a1a 100%) center center/cover no-repeat fixed;

  --drop-down-menu-bg: #2d2d2d;

  --button-color: #007bff;
  --button-color-hover: #0056b3;
  --button-text: #eee;
  --button-text-hover: #FFF;

  --accent-color: 0, 123, 255; /* Blue accent for Fishtalk */
  --accent-color-hover: rgba(0, 123, 255, 0.45);
  --link-color: #66b3ff;
  --link-color-hover: #007bff;
  --label-text-color: #e0e0e0;
    
  --text:#ddd;
  --text-hover: #fff;
  --text-muted: #999;

  /* Transparency helpers */
  --transparency-dark-05: rgba(0, 0, 0, .05);
  --transparency-dark-10: rgba(0, 0, 0, .10);
  --transparency-dark-15: rgba(0, 0, 0, .15);
  --transparency-dark-25: rgba(0, 0, 0, .25);
  --transparency-dark-35: rgba(0, 0, 0, .35);
  --transparency-dark-40: rgba(0, 0, 0, .40);
  --transparency-dark-45: rgba(0, 0, 0, .45);
  --transparency-dark-50: rgba(0, 0, 0, .50);
  --transparency-dark-55: rgba(0, 0, 0, .55);
  --transparency-dark-60: rgba(0, 0, 0, .60);
  --transparency-dark-65: rgba(0, 0, 0, .65);
  --transparency-dark-70: rgba(0, 0, 0, .70);
  --transparency-dark-75: rgba(0, 0, 0, .75);
  --transparency-dark-80: rgba(0, 0, 0, .80);
  --transparency-dark-85: rgba(0, 0, 0, .85);
  --transparency-dark-90: rgba(0, 0, 0, .90);
  --transparency-light-05: rgba(255, 255, 255, .05);
  --transparency-light-10: rgba(255, 255, 255, .10);
  --transparency-light-15: rgba(255, 255, 255, .15);
  --transparency-light-20: rgba(255, 255, 255, .20);
  --transparency-light-25: rgba(255, 255, 255, .25);
  --transparency-light-30: rgba(255, 255, 255, .30);
  --transparency-light-35: rgba(255, 255, 255, .35);
  --transparency-light-45: rgba(255, 255, 255, .45);
  --transparency-light-50: rgba(255, 255, 255, .50);
  --transparency-light-55: rgba(255, 255, 255, .55);
  --transparency-light-95: rgba(255, 255, 255, .95);
}

/* Placeholder styles */
::-webkit-input-placeholder { color: var(--text-muted) !important; }
:focus::-webkit-input-placeholder { color: var(--text-hover) !important; }
:-moz-placeholder { color: var(--text-muted) !important; }
:focus:-moz-placeholder { color: var(--text-hover) !important; }
::-moz-placeholder { color: var(--text-muted) !important; }
:focus::-moz-placeholder { color: var(--text-hover) !important; }
:-ms-input-placeholder { color: var(--text-muted) !important; }
:focus:-ms-input-placeholder { color: var(--text-hover) !important; }

/* Base styles */
* { outline: 0 !important; }

h1, h2, h3, h4, h5, h6 { 
  color: var(--text-hover);
}

/* Main background */
.logged-out-modal guac-modal,
body {
  background: var(--main-bg-color) !important;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
  color: var(--text) !important;
}

/* Modal backgrounds */
div.displayMiddle {
  background: var(--modal-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

/* PRESERVE ORIGINAL LOGIN UI STYLING */
/* Login UI - keep our original radial gradient */
div.login-ui { 
  background: radial-gradient(ellipse at center, #404040 0%, #2d2d30 50%, #1a1a1a 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

.login-ui div.login-dialog {
  background-color: #3c3c3c !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #555 !important;
}

/* Login page buttons - keep our turquoise styling */
.login-ui input[type="submit"],
.login-ui .login-fields input[type="submit"],
.login-ui button,
.login-ui .buttons input[type="submit"] {
  background-color: #00BBE4 !important;
  border: 1px solid #00BBE4 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.login-ui input[type="submit"]:hover,
.login-ui .login-fields input[type="submit"]:hover,
.login-ui button:hover,
.login-ui .buttons input[type="submit"]:hover {
  background-color: #0098B8 !important;
  border-color: #0098B8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 187, 228, 0.3) !important;
}

/* Login page input fields - keep our styling */
.login-ui input[type="text"],
.login-ui input[type="password"],
.login-ui .login-fields input[type="text"],
.login-ui .login-fields input[type="password"] {
  background-color: #4a4a4a !important;
  border: 1px solid #666 !important;
  color: #e0e0e0 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

.login-ui input[type="text"]:focus,
.login-ui input[type="password"]:focus,
.login-ui .login-fields input[type="text"]:focus,
.login-ui .login-fields input[type="password"]:focus {
  background-color: #555 !important;
  border-color: #00BBE4 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 187, 228, 0.25) !important;
}

.login-ui input[type="text"]:hover,
.login-ui input[type="password"]:hover,
.login-ui .login-fields input[type="text"]:hover,
.login-ui .login-fields input[type="password"]:hover {
  background-color: #505050 !important;
  border-color: #777 !important;
}

/* Login page labels */
.login-ui label,
.login-ui .login-fields label,
.login-ui .field-header label {
  color: #d0d0d0 !important;
  font-weight: 500 !important;
}

/* Non-login buttons - use theme-park styling */
body:not(.login-ui) a.button, 
body:not(.login-ui) button, 
body:not(.login-ui) input[type="submit"] {
  background-color: var(--button-color);
  border: none;
  outline: 0;
}

body:not(.login-ui) a.button:hover, 
body:not(.login-ui) button:hover, 
body:not(.login-ui) input[type="submit"]:hover {
  background-color: var(--button-color-hover);
  border: none;
  cursor: pointer;
}

/* Non-login form inputs */
body:not(.login-ui) select {
  background: var(--transparency-dark-10);
  color: var(--text);
  border-color: transparent;
}

body:not(.login-ui) select:focus {
  background-color: var(--drop-down-menu-bg);
  color: var(--text);
}

div.location, input[type="email"], input[type="number"], input[type="password"], input[type="text"], textarea {
  color: var(--text-hover);
  border: 0;
  background: var(--transparency-dark-25);
}

input[type="checkbox"], input[type="email"], input[type="number"], input[type="radio"], input[type="text"], textarea {
  color: var(--text-hover);
}

/* Headers */
.header h2 { color: rgb(var(--accent-color)); }

/* Menu dropdowns */
.menu-dropdown.open,
.menu-dropdown.open:hover { background: var(--transparency-dark-25); }

.menu-dropdown .menu-contents li a {
  display: block;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  padding: .75em;
}

.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover { color: var(--text-hover); }

.menu-dropdown .menu-contents li a:hover {
  background: var(--transparency-dark-25);
  color: var(--text-hover);
}

.menu-dropdown:hover {
  background: var(--transparency-dark-25);
  color: var(--text-hover);
}

.menu-dropdown .menu-contents { background: var(--drop-down-menu-bg); }

/* Tables */
thead { color: var(--text-hover); }

table.sorted td, table.sorted th { border: 1px solid rgb(255 255 255 / 15%); }

.settings table.session-list tr.session:hover { background: var(--transparency-light-15); }

/* Links */
.connection a:visited, .connection-group a:visited, .user a:visited, .user-group a:visited {
  text-decoration: none;
  color: var(--link-color-hover);
}

.recent-connections .connection:hover {
  background: var(--transparency-dark-10);
  color: var(--link-color-hover);
}

.list-item:not(.selected) .caption:hover {
  background: var(--transparency-dark-10);
  color: var(--link-color-hover);
}

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

.list-item:not(.selected) .caption:hover .name { color: var(--link-color-hover); }

/* Menu backgrounds */
.menu, .menu .header {
  background: var(--modal-bg-color) !important;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
  box-shadow: none;
}

.menu-body, .menu-content, .menu-content .header {
  background: var(--modal-bg-color) !important;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

/* Notifications */
.notification.error {
  background: var(--modal-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
  color: var(--text-hover);
}

.notification {
  background: var(--modal-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
  color: var(--text-hover);
}

/* Page tabs */
.page-tabs .page-list li a[href]:visited { color: var(--text-hover); }
.page-tabs .page-list li a[href] { color: var(--text-hover); }
.page-tabs .page-list li a[href]:hover { background: var(--transparency-dark-25); }

/* Connection links */
.connection a:visited, .connection-group a:visited, .user a:visited, .user-group a:visited {
  text-decoration: none;
  color: var(--link-color);
}

.connection a:hover, .connection-group a:hover, .user a:hover, .user-group a:hover,
a.ng-binding:hover:not(.add-user):not(.button) {
  color: var(--link-color-hover) !important;
}

.connection a, .connection-group a, .user a, .user-group a,
a.ng-binding:not(.add-user):not(.button) {
  text-decoration: none;
  color: var(--link-color);
}

/* Header and section styling */
.attributes .form h3, .header { background: var(--transparency-dark-25); }

/* ============================================= */
/* CUSTOM FISHTALK BRANDING */
/* ============================================= */

/* Custom Logo - Replace the default Guacamole logo */
.login-ui .logo {
    background-image: url('/images/custom-logo.png?v=20250806') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 250px !important;
    height: 100px !important;
    display: block !important;
    min-height: 100px !important;
}

/* Hide the default logo text */
.login-ui .logo .product-name {
    display: none !important;
}

/* Change Apache Guacamole to Fishtalk */
.login-ui .app-name {
    font-size: 0 !important;
}

.login-ui .app-name:before {
    content: "Fishtalk" !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: var(--text-hover) !important;
    display: block !important;
}

/* Custom login screen title */
.login-ui h1:before {
    content: "Welcome to Fishtalk";
    font-size: 24px;
    color: var(--text-hover);
    display: block;
    margin-bottom: 10px;
}

/* Hide the original title */
.login-ui h1 {
    font-size: 0;
}

/* Custom subtitle */
.login-ui .login-fields:before {
    content: "Sign in with your Fishtalk credentials";
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

/* Custom version number */
.login-ui .version-number {
    font-size: 0 !important;
}

.login-ui .version-number:after {
    content: "Fishtalk 5.7.2" !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    font-size: 12px !important;
    color: #a3a3a3 !important;
    font-weight: 500 !important;
    display: block !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    margin-top: 5px !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 1002 !important;
}

/* Force override any green backgrounds on version number */
.login-ui .version-number,
.login-ui .version-number *,
.login-ui .version-number:before {
    background-color: transparent !important;
    background-image: none !important;
}

/* Centered footer with image on login page */
.login-ui .login-dialog:after {
    content: "";
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 40px;
    background-image: url('/images/custom-footer.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1001;
}

/* "Powered by" text above the image */
.login-ui .login-dialog:before {
    content: "Powered by";
    position: fixed;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    z-index: 1001;
}

/* Footer branding for all pages */
body:after {
    content: "";
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 15px;
    background-image: url('/images/custom-footer.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    z-index: 1000;
}

/* Hide corner footer on login pages only */
.login-ui body:after,
body.login-ui:after {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================= */
/* CUSTOM TITLE OVERRIDE */
/* ============================================= */

/* Force browser title to always be Fishtalk */
title {
    visibility: hidden;
}

title:after {
    content: "Fishtalk";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}