/*
 * 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;

}
.restrictionList{border:0}button.restrictionListButton{font-size:.75em}img.restrictionListHeader{width:.75em;height:.75em}img.restrictionListItem{width:1em;height:1em}.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}/*
 * guacamole-dark.jar -- mss 深色主題
 *
 * 範圍：管理介面（body.home / body.settings / body.manage）＋ 登入頁（.login-ui）
 * 不影響：遠端桌面畫面、錄影播放內容（那是真實螢幕內容，不該變色）
 *
 * 觸發：@media (prefers-color-scheme: dark) -- 跟隨使用者作業系統設定，
 *       不喜歡深色的人完全不受影響，無需站內切換按鈕。
 *
 * 沿用既有色票（藍灰 #6c849c、亮綠 #9ce424）。
 *          所有文字色皆通過 WCAG AA 以上（主文字 AAA 12.99、強調色 AAA 10.30）。
 */

@media (prefers-color-scheme: dark) {

:root {
    --pd-bg:     #1e2228;  /* 底色：深灰藍 */
    --pd-bg2:    #262b33;  /* 次層：選單、卡片、輸入框 */
    --pd-bg3:    #2f3540;  /* 第三層：hover */
    --pd-line:   #363c47;  /* 邊框、分隔線 */
    --pd-text:   #e4e8ee;  /* 主文字 AAA */
    --pd-text2:  #9aa5b1;  /* 次文字 AA */
    --pd-accent: #9ce424;  /* mss 亮綠 AAA */
    --pd-tint:   rgba(156, 228, 36, 0.13);  /* 強調底：hover */
    --pd-tint2:  rgba(156, 228, 36, 0.22);  /* 強調底：選取 / current */
    --pd-danger: #b04848;
}

/* ============ 1. 底層 ============ */

:is(body.home, body.settings, body.manage) {
    background: var(--pd-bg);
    color: var(--pd-text);
}

/* ============ 2. 清單（連線、使用者、群組） ============ */

:is(body.home, body.settings, body.manage) .list-item .name {
    color: var(--pd-text);
}

:is(body.home, body.settings, body.manage) .list-item .usage {
    color: var(--pd-text2);
}

:is(body.home, body.settings, body.manage) .list-item.selected {
    background: var(--pd-tint2);
}

:is(body.home, body.settings, body.manage) .list-item:not(.selected) .caption:hover {
    background: var(--pd-tint);
}

:is(body.home, body.settings, body.manage) .expandable.expanded > .children > .list-item:last-child {
    border-left-color: var(--pd-line);
    border-bottom-color: var(--pd-line);
}

:is(body.home, body.settings, body.manage) .connection-group a,
:is(body.home, body.settings, body.manage) .connection-group a:hover,
:is(body.home, body.settings, body.manage) .connection-group a:visited {
    color: var(--pd-text);
}

/* ============ 3. Header / 麵包屑 / 過濾框 ============ */

:is(body.home, body.settings, body.manage) .header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

:is(body.home, body.settings, body.manage) .header:not(.ng-hide) ~ .header {
    border-top-color: rgba(255, 255, 255, 0.10);
}

:is(body.home, body.settings, body.manage) .header .filter input {
    border-left-color: rgba(255, 255, 255, 0.10);
    color: var(--pd-text);
}

/* ============ 4. 輸入框 ============ */

:is(body.home, body.settings, body.manage) :is(
    div.location,
    input[type=text], input[type=email], input[type=number],
    input[type=password], input[type=search], input[type=url],
    textarea, select) {
    background-color: var(--pd-bg2);
    border-color: var(--pd-line);
    color: var(--pd-text);
}

:is(body.home, body.settings, body.manage) :is(input, textarea, select):focus {
    border-color: var(--pd-accent);
    outline: none;
}

:is(body.home, body.settings, body.manage) ::placeholder {
    color: var(--pd-text2);
}

/* ============ 5. 按鈕（上游本來就是深色，只調對比與邊框） ============ */

:is(body.home, body.settings, body.manage) :is(input[type="submit"], button, a.button) {
    background-color: #39414d;
    border-color: var(--pd-line);
    color: var(--pd-text);
}

:is(body.home, body.settings, body.manage) :is(input[type="submit"], button, a.button):hover {
    background-color: #4a5462;
}

:is(body.home, body.settings, body.manage) :is(input[type="submit"], button, a.button):active {
    background-color: #2c333d;
}

:is(body.home, body.settings, body.manage) :is(button, a.button).danger {
    background: #963c3c;   /* 原 #b04848 與淺字只有 4.42，壓深到 AA 以上 */
}

:is(body.home, body.settings, body.manage) :is(button, a.button).danger:hover {
    background: #c85a5a;
}

:is(body.home, body.settings, body.manage) :is(input[type="submit"], button, a.button):disabled {
    background-color: #2c323b;
    color: rgba(228, 232, 238, 0.35);
}

/* ============ 6. 表格 ============ */

:is(body.home, body.settings, body.manage) table.sorted th {
    background: rgba(255, 255, 255, 0.07);
}

:is(body.home, body.settings, body.manage) table.sorted td {
    border-color: var(--pd-line);
}

/* ============ 7. 下拉選單（右上角使用者選單） ============ */

:is(body.home, body.settings, body.manage) .menu-dropdown {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(255, 255, 255, 0.10);
}

:is(body.home, body.settings, body.manage) .menu-dropdown:hover {
    background: rgba(255, 255, 255, 0.08);
}

:is(body.home, body.settings, body.manage) .menu-dropdown.open,
:is(body.home, body.settings, body.manage) .menu-dropdown.open:hover {
    background: rgba(255, 255, 255, 0.12);
}

:is(body.home, body.settings, body.manage) .menu-dropdown .menu-contents {
    background: var(--pd-bg2);
    border-left-color: rgba(255, 255, 255, 0.10);
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

:is(body.home, body.settings, body.manage) .menu-dropdown .menu-contents li a {
    color: var(--pd-text);
}

:is(body.home, body.settings, body.manage) .menu-dropdown .menu-contents li a:hover {
    background-color: var(--pd-tint);
}

:is(body.home, body.settings, body.manage) .menu-dropdown .menu-contents li a.danger {
    background-color: var(--pd-danger);
}

:is(body.home, body.settings, body.manage) .menu-dropdown .menu-contents li a.danger:hover {
    background-color: #c85a5a;
}

:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-contents .profile {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* ============ 8. 分頁標籤 ============ */

:is(body.home, body.settings, body.manage) :is(.page-tabs .page-list ul, .section-tabs ul) {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:is(body.home, body.settings, body.manage) :is(.page-tabs .page-list li a[href], .section-tabs li a),
:is(body.home, body.settings, body.manage) .page-tabs .page-list li a[href]:visited {
    color: var(--pd-text);
}

:is(body.home, body.settings, body.manage) :is(.page-tabs .page-list li a[href]:hover, .section-tabs li a:hover) {
    background-color: var(--pd-tint);
}

/* current 分頁：上游用 rgba(0,0,0,0.3)，深色下會比底色更暗＝看不出是選中的 */
:is(body.home, body.settings, body.manage) :is(
    .page-tabs .page-list li a[href].current,
    .page-tabs .page-list li a[href].current:hover,
    .section-tabs li a.current,
    .section-tabs li a.current:hover) {
    background: var(--pd-tint2);
    color: var(--pd-accent);
}

/* ============ 9. 分頁器 ============ */

:is(body.home, body.settings, body.manage) .pager .set-page.current {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.14);
}

/* ============ 10. 首頁最近使用連線 ============ */

body.home .recent-connections .connection:hover {
    background: var(--pd-tint);
}

/* ============ 11. 登入頁 ============ */

div.login-ui {
    background: var(--pd-bg);
    color: var(--pd-text);
}

.login-ui .login-dialog th {
    text-shadow: none;
    color: var(--pd-text);
}

.login-ui .login-dialog .login-fields input {
    background: var(--pd-bg2);
    border-color: var(--pd-line);
    color: var(--pd-text);
}

.login-ui .login-dialog .login-fields input:focus,
.login-ui .login-fields .labeled-field.empty input:focus {
    background: var(--pd-bg2);
    border-color: var(--pd-accent);
}

.login-ui.error p.login-error {
    background: rgba(176, 72, 72, 0.18);
    border-color: var(--pd-danger);
    color: #f0a0a0;
}

.login-ui .login-dialog .version .version-number {
    background: #3f6b1f;
}

/* ============ 11b. 通知框 / 彈窗 ============
 *
 * 登入對話框本身就掛著 .notification（class="login-dialog notification"），
 * 白底來自這裡，所以只改 .login-dialog 是打不到的。
 *
 * 不含 .client-status-modal .notification -- 那個上游本來就是深色
 * rgba(40,40,40,0.75)，且其選擇器特異度較高，會自動保留。
 */

.login-ui .notification,
:is(body.home, body.settings, body.manage) .notification,
.logged-out-modal .notification,
.global-status-modal .notification,
.automatic-login-rejected-modal .notification {
    background: var(--pd-bg2);
    color: var(--pd-text);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: rgba(0, 0, 0, 0.45) 1px 1px 6px;
}

.login-ui .notification.error,
:is(body.home, body.settings, body.manage) .notification.error,
.global-status-modal .notification.error {
    background: rgba(176, 72, 72, 0.20);
}

.login-ui .notification .title-bar,
:is(body.home, body.settings, body.manage) .notification .title-bar,
.logged-out-modal .notification .title-bar,
.global-status-modal .notification .title-bar {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow: rgba(0, 0, 0, 0.25) 0 1px 2px;
}

:is(body.home, body.settings, body.manage) .notification .progress {
    background-color: #3a4250;
}

/* ============ 11c. 登入頁輸入框狀態 ============
 * 上游：.labeled-field.empty input -> transparent（浮動標籤效果）
 *       .labeled-field input:focus -> white
 * 深色下 focus 變白會刺眼，改回次層色。
 */

.login-ui .login-fields .labeled-field.empty input {
    background: transparent;
}

.login-ui .login-fields .labeled-field input:focus {
    background: var(--pd-bg2);
    color: var(--pd-text);
}

.login-ui .login-fields .labeled-field .field-header {
    color: var(--pd-text2);
}

/* ============ 12. 捲軸 ============ */

:is(body.home, body.settings, body.manage) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

:is(body.home, body.settings, body.manage) ::-webkit-scrollbar-track {
    background: var(--pd-bg);
}

:is(body.home, body.settings, body.manage) ::-webkit-scrollbar-thumb {
    background: #414957;
    border-radius: 5px;
}

:is(body.home, body.settings, body.manage) ::-webkit-scrollbar-thumb:hover {
    background: #525b6b;
}

:is(body.home, body.settings, body.manage) {
    scrollbar-color: #414957 var(--pd-bg);
}

/* ============ 13. 圖示 ============
 *
 * 62 個 SVG 全部用寫死的 fill（零個 currentColor），且以 background-image
 * 套用 -- CSS 改不到裡面的顏色，只能用 filter。
 *
 * invert(1) hue-rotate(180deg)：翻轉明暗但「保留色相」。
 *   黑 #000    -> 白        單色圖示變可見
 *   藍 #3771c8 -> 淺藍      仍是藍，不會變成黃
 *   綠 #598d36 -> 淺綠      狀態色語意不反轉
 *
 * 分類依實測（62 個 SVG 的 fill 值）：
 *   33 個純黑 -> 反轉
 *   11 個黑白混色（描邊＋填色，如資料夾）-> 反轉後剛好正確
 *   16 個純白（放在深色按鈕上）-> 不可反轉，見下方例外清單
 */

:is(body.home, body.settings, body.manage) :is(
    .icon,
    .menu-dropdown .menu-indicator,
    .sharing-profile .icon,
    table.sorted th.sort-primary:after,
    table.sorted th.sort-primary.sort-descending:after,
    .recent-connections .connection .remove-recent::after,
    .file-upload-container .import-config .help::after,
    .settings.connectionHistory a.history-session-recording::after,
    .manage-user .page-tabs .page-list li a[href]::before,
    .manage-user-group .page-tabs .page-list li a[href]::before) {
    filter: invert(1) hue-rotate(180deg);
}

/* 例外：這些圖示原本就是白色（#fff），放在深色按鈕上 -- 反轉會變黑＝消失 */
:is(body.home, body.settings, body.manage) :is(
    .icon.add,
    button.logout::before,
    button.reconnect::before,
    button.manage::before,
    button.back::before,
    button.home::before,
    button.change-password::before,
    a.button.add-user::before,
    a.button.add-user-group::before,
    a.button.add-connection::before,
    a.button.add-connection-group::before,
    a.button.import-connections::before) {
    filter: none;
}

/* ============ 15. 對比不足的殘留文字色 ============
 *
 * 系統性掃過管理介面所有寫死的 color 宣告、逐條對 #1e2228 算對比，
 * 找出 17 條 <4.5:1，其中 10 條已由上面各節蓋掉，以下是剩餘的。
 */

/* 歷史頁「檢視錄影」連結：上游寫死 #0000ee，對比僅 1.70 -> 幾乎看不見。
 * （其 ::after 播放圖示已由 §13 的 filter 轉成淺藍，這裡補文字。） */
:is(body.settings) .settings.connectionHistory a.history-session-recording {
    color: #7fc4ff;   /* AAA 8.55 */
}

/* 連線清單樹狀圖尾端的「新增連線／新增群組／新增分享設定」：
 * 上游 color: black，父層另有 opacity 0.5 + 斜體（刻意做成淡的），
 * 只換顏色，維持它原本的「次要」視覺分量。 */
:is(body.settings) :is(
    .settings.connections .connection-list .new-connection a,
    .settings.connections .connection-list .new-connection a:hover,
    .settings.connections .connection-list .new-connection a:visited,
    .settings.connections .connection-list .new-connection-group a,
    .settings.connections .connection-list .new-connection-group a:hover,
    .settings.connections .connection-list .new-connection-group a:visited,
    .settings.connections .connection-list .new-sharing-profile a,
    .settings.connections .connection-list .new-sharing-profile a:hover,
    .settings.connections .connection-list .new-sharing-profile a:visited) {
    color: var(--pd-text);
}

/* 已停用的使用者／使用者群組列：上游 gray（4.04）＋斜體。
 * 仍要比正常列暗才看得出「已停用」，故用次文字色而非主文字色。 */
:is(body.settings) :is(
    .settings.users table.user-list tr.user.disabled,
    .settings.users table.user-list tr.user.disabled td.username a[href],
    .settings.user-groups table.user-group-list tr.user-group.disabled,
    .settings.user-groups table.user-group-list tr.user-group.disabled td.user-group-name a[href]) {
    color: var(--pd-text2);   /* 6.38，主文字是 12.99 -> 對比差異仍清楚 */
}

/* 批次匯入的錯誤訊息：上游 red（4.04），在深底偏暗且刺眼。 */
:is(body.settings, body.manage) :is(
    .import .errors .error-message,
    .file-upload-container .file-error) {
    color: #ff8a8a;   /* AAA 7.04 */
}

/* 終端色彩配置編輯器的面板底（#EEE）與邊框（silver）。
 * ⚠️ 不動 .guac-input-color 的 color -- 那是「色票上的編號」，
 * 背景是使用者選的終端色，上游已有 .dark 修飾詞在深色票上自動改白字，
 * 動了會把那套自我調節的邏輯弄壞。 */
:is(body.manage, body.settings) .terminal-color-scheme-field .custom-color-scheme {
    background: var(--pd-bg2);
    border-color: var(--pd-line);
}

/* ============ 16. 殘留的淺色背景 ============
 *
 * 第一輪只掃了 color 宣告，漏掉 background。補掃管理介面全部 background
 * 宣告、挑出相對亮度 >0.35 的 25 條，以下是前面各節未涵蓋的部分。
 */

/* 使用者／群組編輯頁的「所屬群組」標籤（chip）：#F5F5F5 白底 ＋ silver 邊框。
 * 這是最嚴重的一處 -- 淺字配白底，實測對比 1.13 = 完全看不見。 */
:is(body.manage, body.settings) .related-objects .abbreviated-related-objects ul li {
    background: var(--pd-bg2);
    border-color: var(--pd-line);
}

:is(body.manage, body.settings) .related-objects .all-related-objects {
    border-top-color: var(--pd-line);
}

/* 連線／群組編輯頁最上方「位置：」的樹狀下拉。 */
:is(body.manage, body.settings) .location-chooser .dropdown {
    background: var(--pd-bg2);
    border-color: rgba(255, 255, 255, 0.25);
}

/* 唯讀提示條（琥珀色 #FDA，深色下淺字會糊在上面）。 */
:is(body.manage, body.settings) :is(
    .manage-user .notice.read-only,
    .manage-user-group .notice.read-only) {
    background: rgba(228, 197, 72, 0.16);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e4c548;
}

/* 使用中工作階段表格的滑鼠移入色（上游 #CDA 淺綠）。 */
:is(body.settings) .settings table.session-list tr.session:hover {
    background: var(--pd-tint);
}

/* 登出／自動登入遭拒的全螢幕遮罩（上游 background: white）。 */
.logged-out-modal guac-modal,
.automatic-login-rejected-modal guac-modal {
    background: var(--pd-bg);
}

/* 重導欄位的全螢幕容器（SSO 轉址時整頁會是它）。 */
.redirect-field-container {
    background: var(--pd-bg);
    color: var(--pd-text);
}

/* ============ 14. 收尾 ============ */

/* 上游把 .connection / .user / .user-group 的連結也寫死 color: black
 * （原規則與 .connection-group a 同一條），四種都要蓋。 */
:is(body.home, body.settings, body.manage) :is(
    .connection a, .connection a:hover, .connection a:visited,
    .user a, .user a:hover, .user a:visited,
    .user-group a, .user-group a:hover, .user-group a:visited,
    .sharing-profile a, .sharing-profile a:hover, .sharing-profile a:visited) {
    color: var(--pd-text);
}

/* 原生控制項（核取方塊、下拉、日期選擇器、捲軸）交給瀏覽器用深色渲染。
 * color-scheme 會繼承，故掛在 body / 登入頁即可涵蓋所有子元素。 */
:is(body.home, body.settings, body.manage),
.login-ui {
    color-scheme: dark;
    accent-color: var(--pd-accent);
}

/* 致命錯誤頁：body 沒有 route class（bodyClassName 為空），
 * 上面所有 :is(body...) 規則都打不到，要單獨處理。 */
.fatal-page-error-outer,
.fatal-page-error-modal,
.fatal-page-error {
    background: var(--pd-bg);
    color: var(--pd-text);
}

.fatal-page-error a {
    color: var(--pd-accent);
}

/* ============ 13b. 帶文字或帶背景的元素：不能用 filter ============
 *
 * filter 會反轉「整個元素」-- 包含它自己的文字色與背景色。
 * 這三類元素同時帶有圖示與內容，改成直接指向白色圖示：
 *   .menu-title / .menu-contents li a  -> 上游已備白色版（非 -dark 後綴那支）
 *   .filter .search-string             -> 上游無白色版，改用內嵌白色 SVG
 */

:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-title {
    background-image: url('images/user-icons/guac-user-white.svg');
    filter: none;
}

:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-contents li a {
    filter: none;
}

:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-contents li a[href="#/"] {
    background-image: url('images/action-icons/guac-home.svg');
}

:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"],
:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"],
:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] {
    background-image: url('images/action-icons/guac-config.svg');
}

:is(body.home, body.settings, body.manage) .user-menu .menu-dropdown .menu-contents li a.logout {
    background-image: url('images/action-icons/guac-logout.svg');
}

:is(body.home, body.settings, body.manage) .filter .search-string {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2264%22%20height=%2264%22%20viewBox=%220%200%2064%2064%22%3E%3Cg%20transform=%22rotate(-30%20-4.365%2073.476)%20scale(.14612)%22%20style=%22opacity:.55%22%3E%3Ccircle%20r=%2216.506%22%20cy=%2228.63%22%20cx=%2231.496%22%20style=%22fill:none;stroke:%23fff;stroke-width:5.5%22%20transform=%22translate(176.854%20190.011)%20scale(5.22525)%22/%3E%3Crect%20style=%22fill:%23fff%22%20width=%2236.577%22%20height=%22125.406%22%20x=%22324.447%22%20y=%22424.444%22%20rx=%2210%22%20ry=%2210%22/%3E%3C/g%3E%3C/svg%3E");
}

/* 登入 logo 保留原圖品牌色；深色模式不反轉圖片。 */
.login-ui .login-dialog .logo {
    filter: none;
}

}
/*
 * guacamole-homefilter.jar
 *
 * 首頁「全部連線」的搜尋框，從 header 最右側移到標題正右方。
 * 原因：靠右對齊時離標題太遠，使用者不會注意到有這個功能。
 *
 * 上游版面：.header 是 flex row，且 `.header h2 { flex: 1 1 auto }`
 *           標題會撐滿剩餘空間，把搜尋框推到最右邊。
 *
 * 作法：只針對首頁那顆標題（id 唯一，實測僅 home.html 使用）取消 flex-grow，
 *       搜尋框自然貼到標題旁。設定→連線頁的搜尋框在不同容器內，不受影響。
 *
 * ⚠️ 不要改成 `.header h2 { flex: 0 0 auto }` -- 那會一併影響首頁第一個
 *    header（最近使用連線），使用者選單／磁碟 badge／navrelocate 的按鈕列
 *    會失去把它們推到右側的力量。
 */

/* 標題只佔自身寬度，不再撐滿 */
#section-header-all-connections {
    flex: 0 0 auto;
}

/* 搜尋框緊接標題；可縮，避免窄視窗時溢出 */
#section-header-all-connections ~ .filter {
    flex: 0 1 20em;
    min-width: 0;
}
/*
 * 密碼與私鑰欄位「永久遮蔽」。
 *
 * 兩個問題：
 *   1. 密碼欄（passwordField.html）雖是 <input type="password">（圓點），
 *      但旁邊有 .toggle-password 眼睛圖示，點一下就變 type="text" 明文。
 *   2. 私鑰欄走 textAreaField.html，是純 <textarea>，完全無遮蔽。
 *
 * 這裡把眼睛藏掉、並讓 textarea 比照圓點，且不提供任何切換 → UI 上無法顯示明文。
 *
 * ⚠️ 這是顯示層防護，防的是肩窺、螢幕分享、截圖、Guacamole session 錄影。
 *    值仍會隨 /parameters 傳到瀏覽器，F12 → Network 依然看得到。
 *    要防「有意取得」只能靠權限（不給 UPDATE，該端點回 403）。
 */

/* 1. 拿掉密碼欄的「顯示密碼」眼睛 */
.password-field .toggle-password {
    display: none !important;
}

/* 2. 私鑰 textarea 遮蔽
      -webkit-text-security 在 Chrome/Edge/Safari 有效；Firefox 無此屬性，
      由 keymask.js 偵測後改掛 .guac-keymask-blur。 */
textarea.guac-keymask-dots {
    -webkit-text-security: disc;
    text-security: disc;
}

textarea.guac-keymask-blur {
    filter: blur(5px);
}

/* 提示文字，避免使用者看到一片圓點/模糊以為壞掉 */
.guac-keymask-note {
    display: block;
    margin: 0.3em 0;
    font-size: 0.85em;
    opacity: 0.7;
}

/* 3. 瀏覽器原生的顯示密碼按鈕（長在欄位內側，不是 Guacamole 的元素）
      Edge / IE 會在 <input type=password> 內自動插入 ::-ms-reveal（眼睛/鎖頭）
      與 ::-ms-clear（清除叉叉）。這是瀏覽器 shadow DOM 產生的，
      不受 .toggle-password 規則管轄，需另外關閉，否則 Edge 使用者仍可顯示明文。 */
input::-ms-reveal,
input::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/*
 * MSS 登入品牌：使用提供的 Msslogo.png 原圖，保持比例且不放大。
 * PNG 以 data URI 內嵌，擴充自給自足，不增加靜態資源請求。
 */
.login-ui .login-dialog .logo {
    width: 100% !important;
    max-width: 196px;
    height: auto !important;
    aspect-ratio: 196 / 54;
    margin: 0.25em auto 0.75em !important;
    background-image: url("data:image/png;base64,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") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 移除登入表單上方的應用程式名稱，不影響認證與錯誤提示。 */
.login-ui .login-dialog .app-name {
    display: none;
}
/*
 * 把連線內的滑動選單面板（#guac-menu 剪貼簿/輸入法/滑鼠設定、
 * #filesystem-menu 檔案總管）從預設的「左側」改到「右側」，
 * 避免左側面板遮住 SSH 終端機的輸入/游標區。
 *
 * 預設（Guacamole 內建）：
 *   .menu{position:absolute;width:480px;transition:left ...}
 *   .menu,.menu.closed{left:-480px;opacity:0}
 *   .menu.open{left:0;opacity:1}
 * 這裡以 id 選擇器覆寫定位軸（left → right），動畫也改成沿 right 滑入。
 */
#guac-menu,
#filesystem-menu {
    left: auto !important;
    right: -480px !important;
    /* 陰影翻面：光影落在左緣，貼合右側停靠 */
    box-shadow: inset 1px 0 2px #fff, -1px 0 2px #000 !important;
    -webkit-transition: right .125s, opacity .125s !important;
    -moz-transition: right .125s, opacity .125s !important;
    -o-transition: right .125s, opacity .125s !important;
    transition: right .125s, opacity .125s !important;
}

#guac-menu.open,
#filesystem-menu.open {
    left: auto !important;
    right: 0 !important;
}