/* ============================================
   Pixelle MCP - Chainlit Login Page Theme
   Only used for Chainlit's login page styling.
   Main chat UI is in chat.html.
   ============================================ */

/* Hide unnecessary elements */
#readme-button {
    display: none !important;
}

.watermark {
    display: none !important;
}

/* ============================================
   Root Variables
   ============================================ */
:root {
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-light: rgba(248, 250, 252, 0.8);
    --glass-border: rgba(0, 127, 204, 0.15);
    --glass-border-hover: rgba(0, 127, 204, 0.3);
    --primary-gradient: linear-gradient(135deg, #007FCC 0%, #0099FF 100%);
    --accent-color: #007FCC;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --shadow-glow: 0 0 20px rgba(0, 127, 204, 0.1);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08);
    --body-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

/* ============================================
   Global Background
   ============================================ */
body {
    background: var(--body-bg) !important;
    background-attachment: fixed !important;
}

/* ============================================
   Login Page Enhancements
   ============================================ */
[class*="auth"],
form:has(input[type="password"]) {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-card), var(--shadow-glow) !important;
    padding: 32px !important;
}

/* Login form title */
form:has(input[type="password"]) h1,
form:has(input[type="password"]) h2,
[class*="auth"] h1,
[class*="auth"] h2 {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
    text-align: center;
}

/* Login form inputs */
form:has(input[type="password"]) input {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
}

form:has(input[type="password"]) input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 127, 204, 0.15) !important;
}

/* Login form submit button */
form:has(input[type="password"]) button[type="submit"] {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

form:has(input[type="password"]) button[type="submit"]:hover {
    box-shadow: 0 4px 20px rgba(0, 127, 204, 0.4) !important;
    transform: translateY(-1px);
}

/* Login form labels */
form:has(input[type="password"]) label {
    color: var(--text-secondary) !important;
}

/* Placeholder */
form:has(input[type="password"]) ::placeholder {
    color: var(--text-muted) !important;
}