/* ===================================================
 * MICRO-IP Guacamole Branding (Claude-inspired)
 * =================================================== */

:root {
    --mip-bg: #F4F3EE;
    --mip-bg-warm: #F0EEE6;
    --mip-surface: #FAFAF8;
    --mip-text-main: #141413;
    --mip-text-muted: #666663;
    --mip-text-faint: #91918D;
    --mip-border: #D5D2C9;
    --mip-accent: #CC785C;
    --mip-accent-hover: #D4A27F;
}

/* ─── 全站字型/背景 ─── */
html, body {
    font-family: 'Microsoft JhengHei', 'Noto Sans TC',
                 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: var(--mip-bg) !important;
    color: var(--mip-text-main) !important;
}

body.login .login-ui {
    background: var(--mip-bg) !important;
    background-image: none !important;
}

/* ─── 隱藏原本 Guacamole logo / title / welcome / version ─── */
.login-ui .login-dialog .logo {
    background: none !important;
    background-image: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: visible !important;
}

/* 用 ::before 塞品牌主標 */
.login-ui .login-dialog .logo::before {
    content: "MICRO-IP 遠端存取";
    display: block;
    font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif !important;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mip-text-main);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

/* 用 ::after 塞副標 */
.login-ui .login-dialog .logo::after {
    content: "Remote Access Gateway";
    display: block;
    font-family: Georgia, 'Newsreader', serif !important;
    font-size: 0.88rem;
    color: var(--mip-text-muted);
    font-weight: 400;
}

/* 隱藏所有 Guacamole 原生標題 / 版本 / 歡迎訊息 (aggressive) */
.login-ui .login-dialog .title,
.login-ui .login-dialog .welcome,
.login-ui .login-dialog .version,
.login-ui .login-dialog .login-ui-version,
.login-ui .login-dialog h1,
.login-ui .login-ui-version,
.login-ui .app-title,
.login-ui .login-dialog [translate="APP.NAME"],
.login-ui .login-dialog [translate="LOGIN.TITLE"],
.login-ui .login-dialog [translate="LOGIN.WELCOME"],
.login-ui .login-dialog > h1,
.login-ui .login-dialog > h2,
.login-ui .login-dialog > h3,
.login-ui .login-dialog > .title,
.login-ui .login-dialog > .subtitle,
.login-ui .login-dialog-outer .login-ui-version {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ─── Login 卡片 ─── */
.login-ui .login-dialog {
    background: var(--mip-surface) !important;
    border: 1px solid var(--mip-border) !important;
    border-radius: 16px !important;
    padding: 40px 36px 32px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04),
                0 8px 32px rgba(0,0,0,0.06) !important;
    max-width: 400px !important;
    width: 92% !important;
    position: relative !important;
    overflow: hidden !important;
}

.login-ui .login-dialog::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--mip-accent);
}

/* ─── Labels (帳號 / 密碼) 顯示 ─── */
.login-ui .labeled-field .field-header,
.login-ui .login-fields .field-header,
.login-ui label {
    display: block !important;
    font-family: 'Consolas', 'JetBrains Mono', monospace !important;
    font-size: 0.64rem !important;
    color: var(--mip-text-faint) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
}

/* ─── 輸入框 ─── */
.login-ui .login-fields input[type="text"],
.login-ui .login-fields input[type="password"],
.login-ui .labeled-field input,
.login-ui input.login-field,
.login-ui input[type="text"],
.login-ui input[type="password"] {
    background: var(--mip-bg-warm) !important;
    border: 1px solid var(--mip-border) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif !important;
    font-size: 0.95rem !important;
    color: var(--mip-text-main) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
}

.login-ui input[type="text"]:focus,
.login-ui input[type="password"]:focus {
    border-color: var(--mip-accent) !important;
    box-shadow: 0 0 0 3px rgba(204,120,92,0.12) !important;
    background: var(--mip-surface) !important;
}

.login-ui .labeled-field {
    margin-bottom: 4px !important;
}

/* ─── 登入按鈕 ─── */
.login-ui button[type="submit"],
.login-ui .buttons input[type="submit"],
.login-ui .login-dialog button {
    background: var(--mip-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    width: 100% !important;
    margin-top: 12px !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
    box-shadow: 0 1px 2px rgba(204,120,92,0.25) !important;
    min-height: 44px !important;
}

.login-ui button[type="submit"]:hover,
.login-ui .buttons input[type="submit"]:hover {
    background: var(--mip-accent-hover) !important;
}

/* ─── 錯誤訊息 ─── */
.login-ui .error {
    background: #fce8e8 !important;
    border: 1px solid rgba(160,48,48,0.15) !important;
    border-left: 3px solid #a03030 !important;
    color: #a03030 !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 10px 14px !important;
    font-size: 0.86rem !important;
    margin-bottom: 16px !important;
    font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif !important;
}

/* ─── 頁尾 copyright (底部 fixed) ─── */
body.login .login-ui::after {
    content: '© 2026 MICRO-IP Inc.  Remote Access Gateway';
    position: fixed;
    bottom: 18px;
    left: 0; right: 0;
    text-align: center;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    color: var(--mip-text-faint);
    letter-spacing: 0.05em;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}