/*
 * 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}/* ===== ITR Branding (dark + green) – header + footer on all pages ===== */

:root{
  --brand:   #09a23c;
  --brand-2: #2bb673;
  --ink:     #0a0a0a;
  --ink-2:   #141617;
  --bg:      #0b0d0e;
  --muted:   #b7c0c2;

  --hdr-h: 64px;   /* fixed header height */
  --ftr-h: 56px;   /* fixed footer height */
}

/* ---------- Base ---------- */
body{
  background: linear-gradient(180deg, #0b0d0e 0%, #0e1111 100%);
  color:#757474;
}

/* keep room for bars on login/home only (NOT inside client) */
body:not(.client){
  padding-top: var(--hdr-h) !important;
  padding-bottom: var(--ftr-h) !important;
}

/* center login card nicely, with room for header+footer */
.login-ui{
  min-height: calc(100vh - var(--hdr-h) - var(--ftr-h));
  display: grid;
  place-items: center;
}

/* ---------- Header ---------- */
.navigation{
  position: fixed; left:0; top:0; right:0;
  height: var(--hdr-h);
  z-index: 1000;
  background: rgba(0,0,0,.85);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px;
}

.hlogo{
  width: 180px;
  height: 40px;
  background: transparent url(/app/ext/itr-branding/images/itr-logo.png)
              no-repeat left center / contain !important;
  font-size:0; line-height:0;
}

.navigation a{
  color:#f7f7f7; text-decoration:none;
  padding:8px 12px; border-radius:10px;
  display:inline-flex; align-items:center;
  transition: background-color .15s ease, color .15s ease, transform .06s ease;
}
.navigation .header-right a:hover{ background: var(--brand); color:#0b100c; }
.navigation .header-right a:active{ transform: translateY(1px); }

/* ---------- Login dialog look ---------- */
.login-ui .login-dialog{
  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 28px 26px !important;
  max-width: 5in;
}
.login-ui .login-dialog .logo{
  display:block; margin:.5em auto 1em auto;
  width:3.25em; height:3.25em;
  background-size:3.25em 3.25em;
  -moz-background-size:3.25em 3.25em;
  -webkit-background-size:3.25em 3.25em;
  -khtml-background-size:3.25em 3.25em;
  background-image: url(/app/ext/itr-branding/images/itr-logo.png) !important;
}
.login-ui .login-dialog .logo img{ opacity:0 !important; }

.login-ui .login-dialog .version .app-name{
  font-weight:400; text-transform:none; text-align:center;
  font-size:1.05em; color:#f1f5f2; font-family: Arial, Helvetica, sans-serif;
}

/* inputs + button */
.login-ui input[type="text"],
.login-ui input[type="password"],
.login-ui input[name="guac-totp"],
.login-ui input[ng-model="searchString"]{
  background:#121516 !important; color:#e9eeeb !important;
  border:1px solid #2a2f31 !important; border-radius:12px !important;
  height:44px !important; box-shadow:none !important;
}
.login-ui input:focus{
  outline:none !important; border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(9,162,60,.25) !important;
}
a.button, button, input[type=submit]{
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  color:#fff !important; border:0 !important; border-radius:12px !important;
  height:44px !important; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(9,162,60,.35) !important;
  transition: transform .06s ease, filter .15s ease;
}
a.button:hover, button:hover, input[type=submit]:hover{ filter:brightness(1.06); }
a.button:active, button:active, input[type=submit]:active{ transform:translateY(1px); }

/* login error banner below header */
.login-ui.error p.login-error{
  display:block; position:fixed; left:0; right:0; top: var(--hdr-h);
  padding:1em; margin:.2em; background:#f14141;
  border:1px solid #9d5b5b; border-radius:.25em;
  text-align:center; color:#000;
}

/* ---------- App polish ---------- */
.list-item .name{ color:#2fb666; font-weight:500; padding:.1em; margin-left:.25em; }
.recent-connections .connection:hover{ background:#133a22 !important; }
.page-tabs .page-list li a[href].current{ background:#1d6e2e !important; color:#fff !important; }
.page-tabs .page-list li a[href]:hover{  background:#234c29 !important; color:#fff !important; }

.user-menu{ background:#0e1212 !important; color:#e9eeeb !important; }
.user-menu:hover{ background:#0f1515 !important; }

/* ----- Dropdown menu ----- */
.menu-dropdown .menu-contents{
  background: rgba(0,0,0,.90) !important;
  color:#e9eeeb !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.5) !important;
  min-width:240px;
  padding:8px 0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.menu-dropdown .menu-contents:before{ border-top-color: rgba(0,0,0,.90) !important; }
.menu-dropdown .menu-contents .profile{
  background:transparent !important; padding:12px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.menu-dropdown .menu-contents .full-name{ color:#fff !important; }
.menu-dropdown .menu-contents .organizational-role,
.menu-dropdown .menu-contents .organization{ color:#b7c0c2 !important; }
.menu-dropdown .menu-contents .menu-actions .action a{
  color:#e9eeeb !important; display:flex; align-items:center; gap:10px;
  padding:10px 14px !important; margin:2px 6px !important;
  border-radius:8px !important; text-decoration:none !important;
}
.menu-dropdown .menu-contents .menu-actions .action a:hover{
  background:#133a22 !important; color:#fff !important;
}
.menu-dropdown .menu-title{ color:#f7f7f7 !important; }
.menu-dropdown .menu-indicator{ border-top-color:#f7f7f7 !important; }

/* menu lists */
.menu-contents .page-list-level{ list-style:none !important; margin:8px 8px !important; padding:0 !important; }
.menu-contents .page-list-level li{ margin:4px 6px !important; }
.menu-contents .page-list-level a,
.menu-contents .action-list a{
  display:flex !important; align-items:center !important;
  padding:10px 14px !important; border-radius:10px !important;
  color:#dfe6e3 !important; line-height:1.25 !important; text-decoration:none !important;
  text-shadow:none !important; -webkit-font-smoothing: antialiased;
}
.menu-contents .page-list-level a:hover{ background:#133a22 !important; color:#fff !important; }
.menu-contents .page-list-level a.current,
.menu-contents a.home.current{
  background:#1a5b27 !important; color:#fff !important; font-weight:600 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.menu-contents .page-list-level a:not(.current){ color:#c7d0cd !important; }

/* logout link */
.menu-contents a.logout{
  color:#f14141 !important; font-weight:700 !important; padding-left:28px !important;
}
.menu-contents a.logout:hover{
  background: rgba(241,65,65,.12) !important; color:#fff !important;
}

/* tabs */
.page-tabs .page-list li a[href]:link{ color:#2bb673 !important; }
.page-tabs .page-list li a[href]:visited{ color:#0be928 !important; }
.page-tabs .page-list li a[href]:hover{ background:#234c29 !important; color:#fff !important; }
.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:visited{ background:#1d6e2e !important; color:#fff !important; }
.page-tabs .page-list li a[href]:active{ transform: translateY(1px); }

/* ---------- Footer ---------- */
.itr-footer{
  position: fixed; left:0; right:0; bottom:0;
  height: var(--ftr-h);
  z-index: 1000;
  background: rgba(0,0,0,.85) !important;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -4px 16px rgba(0,0,0,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color:#e6edf3; font-size:13px;
}
.itr-footer__inner{
  max-width:1200px; margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
}
.itr-footer__links a{
  color: var(--muted); text-decoration:none;
  margin-left:12px; padding:4px 6px; border-radius:8px;
  transition: background-color .15s ease, color .15s ease;
}
.itr-footer__links .dot{ color:#47515c; margin:0 6px; }
.itr-footer__links a:hover{ background: var(--brand); color:#0b100c; }

@media (max-width:640px){
  .itr-footer__inner{ flex-direction:column; gap:4px; height:auto; padding:8px 16px; }
  body{ padding-bottom: calc(var(--ftr-h) + 16px) !important; }
}

/* ---------- Client view layout (RDP/VNC/SSH) ---------- */
/* Put the client between header/footer */
body.client .client-main.main.ng-isolate-scope{
  position: fixed;
  top: var(--hdr-h);
  bottom: var(--ftr-h);
  left: 0; right: 0;
  overflow: hidden;
  z-index: 1; /* below bars */
}

/* Make inner layout fill the resized box */
body.client guac-tiled-clients,
body.client .tiled-client-grid,
body.client .tiled-client-row,
body.client .tiled-client-cell,
body.client .displayOuter,
body.client .displayMiddle,
body.client .display{
  height: 100% !important;
  width: 100% !important;
}

/* Optional: let empty bar areas pass clicks through; links stay clickable */
.navigation, .itr-footer { pointer-events: none; }
.navigation a, .itr-footer a, .menu-dropdown, .menu-dropdown * { pointer-events: auto; }

/* Own the session area: the parent of guac-tiled-clients */
body.client div.client-body {
  position: fixed !important;
  top: var(--hdr-h) !important;
  bottom: var(--ftr-h) !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important; /* under header/footer */
}

/* Make the absolute layers fill that fixed box */
body.client guac-tiled-clients,
body.client .client-view.ng-scope,
body.client .viewport.ng-scope,
body.client .displayOuter {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Safety: inner display/canvas always stretch */
body.client guac-tiled-clients,
body.client .tiled-client-grid,
body.client .tiled-client-row,
body.client .tiled-client-cell,
body.client .displayOuter,
body.client .displayMiddle,
body.client .display,
body.client .display > canvas {
  width: 100% !important;
  height: 100% !important;
}
/* SESSION: Footer komplett ausblenden + Layout ohne Fußhöhe rechnen */
body.in-session { --ftr-h: 0px; }
body.in-session .itr-footer { display: none !important; }