:root{
  --glass-bg: rgba(16,16,17,.42);
  --glass-border: rgba(255,255,255,.18);
  --input-bg: rgba(255,255,255,.96);
  --text: #f6f7fb;
  --shadow: 0 24px 52px rgba(0,0,0,.38);
  --page-bg: #0e0f12;  /* visible when 'contain' leaves borders */
  --accent: #f5af4a;
  --accent-soft: rgba(245,175,74,.28);
  --card-glow: 0 0 32px rgba(245,175,74,.25);
  --card-bg: rgba(24,22,26,.72);
}

/* Show the WHOLE image (less zoom) by default */
.login-ui{
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55)),
    url("/guacamole/app/ext/digitalnavneet-branding/images/bg-wide.png") center center / contain no-repeat fixed !important;
  background-color: var(--page-bg) !important;
  min-height: 100vh;
  color: var(--text);
  font-family: "Segoe UI", "Roboto", "Inter", sans-serif;
}

/* Hide built-in Guacamole logo */
.login-ui .logo,
.login-ui .app-logo,
.login-ui .app .logo{ display:none !important; }

/* Glassmorphic card */
.login-ui .login-dialog{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow), var(--card-glow) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px 34px 36px !important;
  position: relative;
  overflow: hidden;
}

.login-ui .login-dialog::before{
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .8;
}

/* Remove any nested white backgrounds inside the dialog */
.login-ui .login-dialog *{
  background: transparent !important;
}

/* Brand heading */
.login-ui .login-dialog .login-title,
.login-ui .login-dialog .app-name,
.login-ui .login-dialog h1,
.login-ui .login-dialog h2{
  display: block !important;
  font-family: "Segoe UI", "Roboto", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: #fdf7ea !important;
  text-shadow: 0 12px 30px rgba(0,0,0,.55);
  margin-bottom: 22px;
}

.login-ui .login-dialog .login-title::after{
  content: "brewing secure sessions";
  display: block;
  font-size: .66rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(245,175,74,.78);
  margin-top: 12px;
}

/* Inputs */
.login-ui .form-field{
  margin-bottom: 18px !important;
}

.login-ui .form-field label{
  font-size: .72rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,245,250,.76) !important;
  margin-bottom: 6px !important;
}

.login-ui .form-field input{
  background: var(--input-bg) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(245,175,74,.3) !important;
  color: #1a1a1a !important;
  font-size: .95rem !important;
  padding: 12px 14px !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.12);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.login-ui .form-field input:focus{
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.login-ui .login-dialog .login-field .indicator{
  background: rgba(18,17,20,.62) !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(245,175,74,.2);
}

.login-ui .login-dialog .login-field .indicator .indicator-icon{
  color: rgba(245,175,74,.86) !important;
}

/* Button polish */
.login-ui .login button{
  border-radius: 16px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.32) !important;
  background: linear-gradient(135deg, rgba(245,175,74,.96), rgba(109,63,20,.92)) !important;
  color: #121212 !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 0 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.login-ui .login button:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 34px rgba(0,0,0,.38), 0 0 26px rgba(245,175,74,.28) !important;
  filter: brightness(1.05);
}

.login-ui .login button:active{
  transform: translateY(1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.36) inset !important;
}

/* Input helper links */
.login-ui .login .login-links a{
  color: rgba(245,175,74,.9) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem !important;
}

/* Gentle upscale on huge screens */
@media (min-width: 1400px){
  .login-ui .login-dialog{ transform: scale(1.02); }
}

/* Enhanced TNN branding CSS */
.login-ui, .login-dialog, .app {
    font-family: Arial, sans-serif !important;
}

/* Logo replacement */
.login-dialog .logo,
.login-dialog h1,
.login-dialog .title,
.login-ui .logo,
.app-title,
div[class*="logo"],
div[class*="title"] {
    background-image: url('branding-images/tnn-logo-192.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    width: 200px !important;
    height: 60px !important;
    margin: 0 auto 20px auto !important;
}

/* Remove any duplicate content */
.login-dialog::before {
    display: none !important;
    content: none !important;
}

/* Clean up duplicate text */
*[style*="color: #"] {
    color: inherit !important;
}

.login-dialog > *:first-child {
    margin-top: 0 !important;
}

/* Additional logo styling */
.login-dialog h1,
.login-dialog .title {
    color: #8B4513 !important;
}