/* === Valkyrie Custom Branding === */

/* General: background and font */
body {
    background-color: #fff !important;
    font-family: "Segoe UI", sans-serif !important;
}

/* Login container */
.login-ui {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 2em !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #ddd !important;
}

/* Logo image */
.login-ui .logo img {
    content: url("../../images/guac-tricolor.svg") !important;
    width: 150px !important;
    height: auto !important;
    margin-bottom: 1em;
}

/* Login form */
.login-ui .login-field input {
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    padding: 10px !important;
}

/* Login button */
.login-ui .login-button {
    background-color: #fff !important;
    color: white !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    margin-top: 1em;
}

.login-ui .login-button:hover {
    background-color: #fff !important;
}

.header {
    color: #fff !important;
    background: #6e78ff !important;
}
/* Application name in header */
.header .application-name {
    color: #fff !important;
    font-size: 1.6em !important;
    font-weight: bold !important;
}

.menu-contents {
    background-color: #fff !important;
    color: #0f172a !important;
}

table {
    background-color: #fff !important;
    color: #0f172a !important;
}
/* Hide Guacamole version text */
.footer .version {
    display: none !important;
}



.menu-dropdown .menu-contents li a:hover {
    background-color: #CCD0FF !important;
}

#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
    background-color: #CCD0FF !important;
    cursor: pointer
}

.recent-connections .connection:hover {
    background: #CCD0FF !important;
}

.settings table.session-list tr.session:hover {
    background: #CCD0FF !important;
}

.client-zoom .client-zoom-in:hover,.client-zoom .client-zoom-out:hover {
    border: 1px solid #000;
    background: #CCD0FF !important;
}

.list-item:not(.selected) .caption:hover {
    background: #CCD0FF !important;
}

.page-tabs .page-list li a[href]:hover,.section-tabs li a:hover {
    background-color: #CCD0FF !important;
    cursor: pointer
}

/* === Valkyrie Connection Login Modal === */

/* Main modal container (Username/Password/Domain prompt) */
.client-status-modal .modal-contents {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-radius: 12px !important;
    padding: 2em !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e0e0e0 !important;
    max-width: 500px !important;
    margin: auto !important;
}

/* Label text */
.client-status-modal .field-header label {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Input fields */
.client-status-modal input[type="text"],
.client-status-modal input[type="password"] {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 10px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #0f172a !important;
}

/* Action buttons */
.client-status-modal .button {
    background-color: #6478FF !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.client-status-modal .button:hover {
    background-color: #5062cc !important;
}

/* Ensure spacing between buttons */
.client-status-modal .buttons {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0.5em !important;
}

guac-modal {
    background-color: #FFFFFF
}

/* === Final inner‐panel white + button centering === */

/* 1) Make the inner authentication form white */
.client-status-modal .form,
.client-status-modal .form-authentication {
    background-color: #ffffff !important;
    box-shadow: none        !important;
    border: none            !important;
    margin: 0               !important;
}

/* 2) Center the Continue/Cancel buttons */
.client-status-modal .buttons {
    display: flex              !important;
    justify-content: center    !important;
    gap: 1em                   !important;
    margin-top: 1.5em          !important;
}

/* === Wipe out lingering grey on the <form class="notification"> and its wrappers === */
.client-status-modal .notification,
.client-status-modal form.notification,
.client-status-modal form.notification > .body,
.client-status-modal form.notification .parameters,
.client-status-modal form.notification .fields {
    background-color: #ffffff !important;
    box-shadow: none            !important;
    border: none                !important;
    padding: 0                  !important;
    margin: 0                   !important;
}


/* Center the buttons under that freshly-white form */
.client-status-modal .buttons {
    display: flex           !important;
    justify-content: center !important;
    gap: 1em                !important;
}

/* — Center the inner form fields — */
.client-status-modal form.notification > .body {
    max-width: 300px       !important;  /* or tweak to taste */
    margin: 0 auto         !important;
    padding-top: 0         !important;  /* we'll use the logo spacing instead */
}

/* — (Optional) tighten spacing under the logo — */
.client-status-modal form.notification > .body {
    padding-top: 0 !important;
}

/* — Center and constrain the inner form under the logo — */
.client-status-modal form.notification > .body {
    max-width: 400px       !important;  /* tweak as desired */
    margin:    0 auto      !important;
    padding-top: 0         !important;  /* logo spacing handles top gap */
}

/* — make room and position the logo in the white card — */
.client-status-modal .modal-contents {
    position: relative         !important;
}

/* — Ensure the modal-contents wrapper is positioned for our pseudo-element — */
.client-status-modal > guac-modal > .modal-contents {
    position: relative !important;
    padding-top: 5rem   !important; /* leave room for the logo */
}

/* Tame the Valkyrie logo size */
.valkyrie-modal-logo img,
.valkyrie-notification-logo img {
    width: 100px !important;
    height: auto  !important;
}

/* collapse the white "crown" above the logo */
.client-status-modal > guac-modal > .modal-contents {
    /* shrink from 1.5rem down to something small */
    padding-top: 0.5rem !important;
}

/* zero out any extra margin above the logo itself */
.valkyrie-modal-logo {
    margin-top: 0 !important;
    margin-bottom: 1rem !important; /* keep some space below */
}

.notification .text {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.notification .countdown-text {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}


.notification .logout {
    display: none !important;
}

.notification.home {
    display: none !important;
}
.notification .logout {
    display: none !important;
}

.notification .home {
    display: none !important;
}

/* Remove background image from reconnect notification */
.notification .reconnect::before {
    content: none !important;
    background-image: none !important;
}