/**
 * Login Page Styles - TV-optimized, matches Flutter login.dart layout
 * Full brand-color background, centered content column
 */

#login-page {
    position: absolute; top: 0; left: 0;
    width: 1920px; height: 1080px;
    /* Brand gradient fills entire screen (matches Flutter Scaffold backgroundColor) */
    background: var(--brand-gradient);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

html[data-brand="telco"] #login-page {
    background:
        radial-gradient(900px 620px at 50% 18%, rgba(122,63,242,.20), transparent 62%),
        linear-gradient(145deg, var(--brand-navy) 0%, var(--brand-navy2) 100%);
}

/* Transparent centered column — no separate panel box */
.login-panel {
    width: 1040px;
    height: 1080px;
    background: transparent;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

#login-form-area {
    padding: var(--tv-safe-y) 20px;
    flex: 1;
}

/* Logo */
.login-logo-area {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.login-logo-img {
    max-height: 176px;
    max-width: 680px;
    object-fit: contain;
}

/* Field rows */
.login-field-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.login-field-label {
    width: 110px;
    font-size: 22px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    flex-shrink: 0;
}
.login-field-label.active { color: #fff; }

.login-field-value {
    flex: 1;
    min-height: var(--tv-target-min);
    background: rgba(255,255,255,0.4);
    border-radius: 6px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-field-value.active { background: #fff; }
.login-field-text {
    font-size: 22px;
    font-weight: 700;
    color: rgba(0,0,0,0.85);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login-field-icon { font-size: 20px; color: rgba(0,0,0,0.55); margin-left: 8px; }

/* Keyboard — keys sized to fill 760px width (800 - 40px form padding) */
.login-keyboard {
    padding: 8px 0;
    margin-bottom: 12px;
}
.login-keyboard .keyboard-row {
    gap: 8px;
    margin-bottom: 8px;
}
.login-keyboard .keyboard-key {
    min-width: var(--tv-target-min);
    height: var(--tv-target-min);
    font-size: 28px;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
    border-radius: 5px;
    padding: 0 6px;
}
.login-keyboard .keyboard-key.focused {
    background: var(--brand-color);
    color: var(--brand-navy);
    border-color: var(--tv-focus-color);
}

/* Action buttons */
.login-action-btn {
    min-height: var(--tv-target-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 6px;
    font-size: var(--tv-font-button);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin-bottom: 12px;
    background: transparent;
    transition: all var(--transition);
}
.login-action-btn.active-btn { background: var(--success); border-color: var(--success); }
.login-action-btn.login-settings-btn { background: transparent; }
.login-action-btn.focused {
    background: var(--brand-color) !important;
    border-color: var(--tv-focus-color) !important;
    color: var(--brand-navy) !important;
}

/* UUID / status bar */
.login-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.22);
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.login-uuid {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    word-break: break-all;
    flex: 1;
}
.login-net-icon {
    font-size: 18px;
    font-weight: 700;
    margin-left: 12px;
}
.login-net-icon.online { color: var(--success); }
.login-net-icon.offline { color: var(--error); }

/* App version — fixed to the bottom-right corner of the login screen */
#login-version {
    position: absolute;
    right: 24px;
    bottom: 18px;
    color: rgba(255,255,255,0.55);
    font-size: 16px;
    letter-spacing: 0.5px;
    pointer-events: none;
}

/* Error / loading */
.login-error {
    background: rgba(255,71,87,0.85);
    border: 1px solid var(--error);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 18px;
    color: #fff;
    margin-bottom: 12px;
}
.login-loading {
    text-align: center;
    font-size: 20px;
    color: rgba(255,255,255,0.85);
    padding: 12px;
}

/* Chrome 79 flex-gap fallback. */
html.no-flex-gap .login-field-row > * + * { margin-left: 14px; }