/* ==========================================================================
   BUILT Exteriors branding for Apache Guacamole 1.6.0
   guac-branding-built / css/branding.css

   PER-CLIENT RE-SKIN: edit the variables in the :root block below, drop new
   images into resources/ (see tools/make-logos.py), update translations/en.json,
   change "namespace" in guac-manifest.json AND the two URLs below, rebuild.
   Nothing below the :root block should need editing for a plain re-colour.

   Every selector in this file was confirmed against the 1.6.0 frontend source;
   see docs/FINDINGS.md for the file/line of each one.

   Namespace rules:
     - This file only introduces classes prefixed  .brand-  .
     - It never targets  .guac-toolbar-*  (owned by the toolbar extension).
     - The only crossover is setting --guac-toolbar-accent below.
   ========================================================================== */

:root {

    /* --- palette ------------------------------------------------------- */
    --brand-accent:          #2FA4DB;   /* BUILT sky blue, deepened a touch for button contrast (logo: #53BBEB) */
    --brand-accent-dark:     #1C82B3;   /* hover / pressed / header text        */
    --brand-accent-darker:   #10222E;   /* login background start               */
    --brand-accent-light:    #E9F6FC;   /* section header tint, hover rows      */
    --brand-accent-selected: #C9EAF8;   /* selected list rows                   */
    --brand-text:            #231F20;   /* wordmark black                       */
    --brand-header-bg:       #231F20;   /* home header bar (knockout logo on it) */

    /* --- login page ---------------------------------------------------- */
    --brand-login-bg:        linear-gradient(160deg,
                                 var(--brand-accent-darker) 0%,
                                 var(--brand-accent)        62%,
                                 #53BBEB                   100%);
    --brand-login-fg:        rgba(255, 255, 255, 0.88);   /* footer text on bg */
    --brand-card-bg:         #FFFFFF;
    --brand-card-radius:     6px;

    /* --- logos --------------------------------------------------------- */
    /* Change the namespace segment of these URLs if guac-manifest.json changes. */
    --brand-logo:            url('app/ext/guac-branding-built/resources/logo.png');
    --brand-logo-white:      url('app/ext/guac-branding-built/resources/logo-white.png');
    --brand-logo-aspect:     1.071;   /* height / width of logo.png (stacked mark + wordmark) */
    --brand-login-logo-width: 42%;    /* % of the login card's inner width        */
    --brand-home-logo-height: 3em;    /* header logo height on the home screen    */

    /* --- sanctioned crossover to the toolbar extension ----------------- */
    --guac-toolbar-accent:   var(--brand-accent);
}


/* ==========================================================================
   LOGIN PAGE      (source: app/login/templates/login.html, styles/*.css)
   ========================================================================== */

/* Full-page background (stock: solid white, login.css:20-29) */
div.login-ui {
    background: var(--brand-login-bg);
}

/* The card. Stock look comes from .notification (border + 1px shadow) and
   .login-dialog (3in max width, 1em padding). */
.login-ui .login-dialog {
    background: var(--brand-card-bg);
    border: none;
    border-radius: var(--brand-card-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    padding: 1.4em 1.25em 1.25em;
}

/* Logo slot. Stock is a 3em x 3em div with guac-tricolor.svg as background
   (dialog.css:97-107). Width is a % of the card; height is derived from the
   aspect ratio via padding-bottom so the logo scales down cleanly at 360px. */
.login-ui .login-dialog .logo {
    width: var(--brand-login-logo-width);
    max-width: 100%;
    height: 0;
    padding-bottom: calc(var(--brand-login-logo-width) * var(--brand-logo-aspect));
    margin: 0 auto 0.6em;
    background-image: var(--brand-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Portal name under the logo (text comes from the APP.NAME translation
   override). Stock: bold uppercase 1.25em (dialog.css:68-73). */
.login-ui .login-dialog .version {
    padding: 0 0 0.75em;
}
.login-ui .login-dialog .version .app-name {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    color: var(--brand-accent-dark);
}

/* Guacamole version badge: kept (it is the product attribution on this page)
   but recoloured from stock green to the brand grey (dialog.css:75-95). */
.login-ui .login-dialog .version .version-number {
    background: var(--brand-text);
    color: #fff;
    opacity: 0.45;
    font-style: normal;
}

/* Text inputs (stock: input.css:20-33, login.css:59-86) */
.login-ui .login-dialog .login-fields input {
    border: 1px solid #C5D0DA;
    border-radius: 4px;
    padding: 0.55em 0.75em;
    color: var(--brand-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-ui .login-dialog .login-fields input:focus {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(47, 164, 219, 0.18);
}

/* Login / Continue buttons (stock: index/styles/buttons.css:25-77) */
.login-ui .login-dialog .buttons input[type="submit"] {
    background-color: var(--brand-accent);
    border: 1px solid var(--brand-accent-dark);
    border-radius: 4px;
    color: #fff;
    text-shadow: none;
    padding: 0.55em 1em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: background-color 0.15s;
}
.login-ui .login-dialog .buttons input[type="submit"]:hover {
    background-color: var(--brand-accent-dark);
}
.login-ui .login-dialog .buttons input[type="submit"]:active {
    background-color: var(--brand-accent-darker);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.login-ui .login-dialog .buttons input[type="submit"]:disabled {
    background-color: var(--brand-accent);
    opacity: 0.6;
}

/* Footer injected by html/login-footer.html (after .login-dialog, so it sits
   inside the centred .login-dialog-middle table-cell). */
.login-ui .brand-login-footer {
    margin: 1.4em auto 0;
    padding: 0 1em;
    max-width: 24em;
    font-size: 0.95em;
    line-height: 1.4;
    text-align: center;
    color: var(--brand-login-fg);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.login-ui .brand-login-footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.login-ui .brand-login-footer a:hover {
    border-bottom-color: currentColor;
}
.login-ui .brand-login-footer .brand-created-by {
    margin-top: 0.4em;
    font-size: 0.8em;
    opacity: 0.75;
}

/* Keep the stock error banner readable on the dark background: it is
   position:fixed at the top (login.css:35-53); we only round it. */
.login-ui.error p.login-error {
    border-radius: 0 0 4px 4px;
    margin: 0;
}

/* 360px phones. Stock card is width:100%; max-width:3in (288px) so it already
   fits; this just trims padding and lets the card breathe at the edges. */
@media (max-width: 400px) {
    .login-ui .login-dialog {
        max-width: calc(100vw - 2em);
        padding: 1.2em 1em 1em;
        font-size: 1.15em;
    }
    .login-ui .brand-login-footer {
        font-size: 0.85em;
    }
}


/* ==========================================================================
   POST-LOGIN CHROME   (home / settings / manage pages only)

   Scoped to `.view` — the root element of home.html (.home-view.view),
   settings.html (.settings-view.view) and the manage*.html templates. The
   in-session client (client.html, body.client) has NO .view ancestor, so its
   menu's own .header rows and buttons are deliberately untouched.
   ========================================================================== */

/* Section headers: "Recent Connections", "All Connections", settings tabs...
   (stock: index/styles/headers.css:39-92) */
.view .header {
    background: var(--brand-accent-light);
    border-bottom: 1px solid rgba(47, 164, 219, 0.25);
    box-shadow: none;
}
.view .header h2 {
    color: var(--brand-accent-dark);
}
.view .header:not(.ng-hide) ~ .header,
.view .header:not(.ng-hide) ~ * .header {
    border-top: 1px solid rgba(47, 164, 219, 0.25);
}

/* User menu (top-right dropdown) and filter box inside headers
   (stock: navigation/styles/menu.css:49-62, headers.css:94-107) */
.view .header .menu-dropdown,
.view .header .filter input {
    border-left: 1px solid rgba(47, 164, 219, 0.25);
}
.view .header .menu-dropdown.open,
.view .header .menu-dropdown.open:hover {
    background: rgba(47, 164, 219, 0.2);
}

/* Buttons (stock: index/styles/buttons.css). Danger buttons keep stock red. */
.view input[type="submit"],
.view button:not(.danger),
.view a.button:not(.danger) {
    background-color: var(--brand-accent);
    border: 1px solid var(--brand-accent-dark);
    border-radius: 4px;
    text-shadow: none;
}
.view input[type="submit"]:hover,
.view button:not(.danger):hover,
.view a.button:not(.danger):hover {
    background-color: var(--brand-accent-dark);
}
.view input[type="submit"]:active,
.view button:not(.danger):active,
.view a.button:not(.danger):active {
    background-color: var(--brand-accent-darker);
}
.view input[type="submit"]:disabled,
.view button:not(.danger):disabled {
    background-color: var(--brand-accent);
    opacity: 0.6;
}

/* List rows: hover / selected tints were stock greens (#CDA / #DEB,
   index/styles/ui.css:110-126) */
.view .list-item:not(.selected) .caption:hover {
    background: var(--brand-accent-light);
}
.view .list-item.selected {
    background: var(--brand-accent-selected);
}


/* ==========================================================================
   HOME SCREEN HEADER BAR   (injected by html/home-header.html)
   ========================================================================== */

.home-view .brand-home-header {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.55em 1em;
    background: var(--brand-header-bg, var(--brand-accent));
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.home-view .brand-home-logo {
    display: block;
    flex: 0 0 auto;
    height: var(--brand-home-logo-height);
    width: calc(var(--brand-home-logo-height) / var(--brand-logo-aspect));
    max-width: 70vw;
    background-image: var(--brand-logo-white);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}
.home-view .brand-home-title {
    flex: 1 1 auto;
    text-align: right;
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}
@media (max-width: 480px) {
    .home-view .brand-home-title {
        display: none;
    }
}
/*
 * 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;

}
/* ==========================================================================
   guac-toolbar — quick-action toolbar for the Guacamole 1.6.0 client view
   All classes are namespaced .guac-toolbar-* ; nothing else is targeted.

   Branding hooks (set by a separate branding extension, never here):
     --guac-toolbar-accent       accent colour (pinned/active state, badges)
     --guac-toolbar-logo         url(...) shown in the left logo slot
     --guac-toolbar-logo-width   width of that slot (default 0 = hidden)
   ========================================================================== */

.guac-toolbar {
    --guac-toolbar-bg:      rgba(34, 34, 34, 0.85);   /* matches .keyboard-container */
    --guac-toolbar-fg:      rgba(255, 255, 255, 0.85);
    --guac-toolbar-border:  rgba(0, 0, 0, 0.6);
    --guac-toolbar-hover:   rgba(255, 255, 255, 0.12);
    --guac-toolbar-height:  36px;
    --guac-toolbar-handle:  8px;

    position: absolute;
    top: 0;
    left: 50%;
    z-index: 90;                 /* below .menu (100), above #file-transfer-dialog (20) */
    transform: translateX(-50%);
    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    color: var(--guac-toolbar-fg);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- collapsed handle ----------------------------------------------------- */
.guac-toolbar-handle {
    display: block;
    width: 64px;
    height: var(--guac-toolbar-handle);
    margin: 0 auto;
    background: var(--guac-toolbar-bg);
    border: 1px solid var(--guac-toolbar-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    cursor: pointer;
    position: relative;
}
.guac-toolbar-grabber {
    position: absolute;
    left: 50%;
    top: 2px;
    width: 24px;
    height: 2px;
    margin-left: -12px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.55);
}
/* larger tap target on touch devices without growing the visible strip */
.guac-toolbar-handle::after {
    content: '';
    position: absolute;
    left: -12px; right: -12px; top: 0; bottom: -20px;
}

/* --- expanded bar --------------------------------------------------------- */
.guac-toolbar-bar {
    display: none;
    align-items: stretch;
    height: var(--guac-toolbar-height);
    padding: 0 4px;
    background: var(--guac-toolbar-bg);
    border: 1px solid var(--guac-toolbar-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}
.guac-toolbar--expanded .guac-toolbar-handle { display: none; }
.guac-toolbar--expanded .guac-toolbar-bar    { display: flex; }

.guac-toolbar-logo {
    display: block;
    align-self: center;
    width: var(--guac-toolbar-logo-width, 0);
    height: calc(var(--guac-toolbar-height) - 12px);
    margin-right: 4px;
    background: var(--guac-toolbar-logo, none) no-repeat center / contain;
}
.guac-toolbar-actions { display: flex; align-items: stretch; }
.guac-toolbar-spacer  { width: 4px; }

/* --- buttons ---------------------------------------------------------------
   Deliberately more specific than the core `button` rules
   (index/styles/buttons.css) so the stock dark-grey button skin never applies. */
.guac-toolbar .guac-toolbar-btn,
.guac-toolbar .guac-toolbar-btn:hover,
.guac-toolbar .guac-toolbar-btn:active,
.guac-toolbar .guac-toolbar-btn:disabled {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 36px;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-shadow: none;
    cursor: pointer;
    outline: none;
}
.guac-toolbar .guac-toolbar-btn:hover  { background: var(--guac-toolbar-hover); }
.guac-toolbar .guac-toolbar-btn:active { background: rgba(255, 255, 255, 0.2); }
.guac-toolbar .guac-toolbar-btn--active { color: var(--guac-toolbar-accent, #8AB4F8); }
.guac-toolbar .guac-toolbar-btn:disabled { opacity: 0.35; cursor: default; }
.guac-toolbar-icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.guac-toolbar-label { display: none; }
@media (min-width: 1100px) {
    .guac-toolbar-label { display: inline; }
}

/* --- touch: 40px hit targets when expanded ------------------------------- */
@media (pointer: coarse) {
    .guac-toolbar { --guac-toolbar-height: 40px; }
    .guac-toolbar .guac-toolbar-btn { min-width: 40px; }
}

/* --- coexistence with the built-in menu ------------------------------------
   The menu is a 480px panel on the left (client/styles/menu.css). While it is
   open, sit just right of it instead of centred; on narrow screens the menu
   covers everything, so hide. */
.guac-toolbar--menu-open {
    left: 480px;
    transform: none;
}
@media (max-width: 800px) {
    .guac-toolbar--menu-open { display: none; }
}

/* --- phase 2 additions ---------------------------------------------------- */
.guac-toolbar .guac-toolbar-btn--danger:hover  { background: rgba(200, 60, 40, 0.55); }
.guac-toolbar .guac-toolbar-btn--danger:active { background: rgba(200, 60, 40, 0.8); }
.guac-toolbar-slot:empty { display: none; }
/* thin separators between logical groups (rendered by adjacent buttons) */
.guac-toolbar .guac-toolbar-btn-fullscreen,
.guac-toolbar .guac-toolbar-btn-pin {
    margin-left: 4px;
    position: relative;
}
.guac-toolbar .guac-toolbar-btn-fullscreen::before,
.guac-toolbar .guac-toolbar-btn-pin::before {
    content: '';
    position: absolute;
    left: -3px; top: 8px; bottom: 8px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
}

/* --- phase 3: popovers ------------------------------------------------------ */
.guac-toolbar-popover {
    position: absolute;
    top: calc(var(--guac-toolbar-height) + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 4in;
    max-width: calc(100vw - 16px);
    padding: 0.75em;
    background: #EEE;                       /* same as the stock menu (.menu) */
    color: #222;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    line-height: 1.35;
    user-select: text;
    -webkit-user-select: text;
    cursor: auto;
}
.guac-toolbar--menu-open .guac-toolbar-popover { left: 0; transform: none; }
.guac-toolbar-popover-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.4em;
}
.guac-toolbar-popover-title {
    flex: 1 1 auto;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.95em;
}
.guac-toolbar .guac-toolbar-popover .guac-toolbar-btn-close {
    height: 28px; min-width: 28px; padding: 0 4px; color: #444;
}
.guac-toolbar .guac-toolbar-popover .guac-toolbar-btn-close:hover { background: rgba(0, 0, 0, 0.1); }
.guac-toolbar-popover-text { margin: 0 0 0.6em; color: #444; }
.guac-toolbar-popover-text--auto { color: #1b6e2b; }
.guac-toolbar-popover .clipboard-editor .clipboard { height: 1.5in; font-size: 13px; }

/* async-clipboard indicator on the Clipboard button */
.guac-toolbar .guac-toolbar-btn { position: relative; }
.guac-toolbar-badge {
    position: absolute;
    top: 6px; right: 5px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--guac-toolbar-accent, #8AB4F8);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* --- phase 4/5: files, print, transfers, keyboard --------------------------- */
.guac-toolbar-count {
    position: absolute;
    top: 3px; right: 2px;
    min-width: 14px; height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: var(--guac-toolbar-accent, #8AB4F8);
    color: #111;
    font-size: 10px; font-weight: bold; line-height: 14px; text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.guac-toolbar-popover-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.6em; }
.guac-toolbar .guac-toolbar-action-btn,
.guac-toolbar .guac-toolbar-action-btn:hover,
.guac-toolbar .guac-toolbar-action-btn:active {
    -webkit-appearance: none; appearance: none;
    margin: 0; padding: 0.45em 0.9em; min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 5px;
    background: var(--guac-toolbar-accent, #3C3C3C);
    color: #fff; font: inherit; font-weight: bold; text-shadow: none; box-shadow: none;
    cursor: pointer; outline: none;
}
.guac-toolbar .guac-toolbar-action-btn:hover  { filter: brightness(1.12); }
.guac-toolbar .guac-toolbar-action-btn:active { filter: brightness(0.9); }
.guac-toolbar .guac-toolbar-action-btn.guac-toolbar-action-browse,
.guac-toolbar .guac-toolbar-action-btn.guac-toolbar-action-clear {
    background: #fff; color: #222; font-weight: normal;
}
.guac-toolbar .guac-toolbar-action-btn.guac-toolbar-action-clear { padding: 0.25em 0.6em; margin-right: 6px; font-size: 0.9em; }
.guac-toolbar-popover-hint { font-size: 0.92em; color: #555; border-top: 1px solid rgba(0,0,0,0.12); padding-top: 0.5em; }
.guac-toolbar-popover-print { width: 3.4in; text-align: center; }
.guac-toolbar-popover-print .guac-toolbar-popover-text { margin: 0; }
.guac-toolbar-popover-transfers { width: 4.5in; }
.guac-toolbar-transfers { max-height: 2.5in; overflow: auto; }
.guac-toolbar-transfers h4 { margin: 0.4em 0 0.2em; font-size: 0.95em; }
/* On-screen keyboard button only matters on touch devices */
@media (pointer: fine) {
    .guac-toolbar .guac-toolbar-btn-keyboard { display: none; }
}

/* --- received PDFs (0.1.3) -------------------------------------------------- */
.guac-toolbar-popover-received { width: 4.2in; }
.guac-toolbar-received { padding: 0.5em 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.guac-toolbar-received:first-of-type { border-top: none; }
.guac-toolbar-received-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guac-toolbar-received-meta { font-size: 0.9em; color: #555; margin: 0.15em 0 0.4em; }
.guac-toolbar-received .guac-toolbar-popover-actions { margin-bottom: 0; }
.guac-toolbar .guac-toolbar-action-btn.guac-toolbar-action-open,
.guac-toolbar .guac-toolbar-action-btn.guac-toolbar-action-save,
.guac-toolbar .guac-toolbar-action-btn.guac-toolbar-action-dismiss { background: #fff; color: #222; font-weight: normal; }
.guac-toolbar-popover-received { width: 4.6in; }
.guac-toolbar .guac-toolbar-action-btn:disabled { opacity: 0.5; cursor: default; filter: none; }