/* =====================================================
   MODULE: FORMS
   Frosted inputs + glow focus from Print OS v4.
   Login-input pulsing animation, toggle switches, pills.
   Per-theme overrides for all 5 themes.
   Toggle: modules.forms in theme-config.json
   ===================================================== */

/* ============= FORM GROUP ============= */
.form-group { margin-bottom: 1rem; }

/* ============= LABELS ============= */
.form-label {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}
.form-label.required::after { content: ' *'; color: var(--accent); }
.form-label-hint { font-weight: 400; color: var(--text-tertiary); font-size: var(--font-size-xs, 0.75rem); }

/* ============= TEXT INPUT ============= */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base, 1rem);
    font-weight: 500;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--radius-lg, 0.75rem);
    transition: all 0.2s ease;
    appearance: none;
}
.form-input::placeholder { color: var(--input-placeholder); }
.form-input:hover { border-color: var(--border-secondary); }
.form-input:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--glow-sm);
}

/* ============= LOGIN INPUT (Print OS v4 pulsing glow) ============= */
.login-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base, 1rem);
    color: var(--text-primary);
    background: var(--input-bg);
    border: var(--ol-btn, 1.5px) solid var(--glow-purple, rgba(138, 83, 249, 0.4));
    border-radius: var(--radius-lg, 0.75rem);
    transition: all 0.2s ease;
}
.login-input::placeholder { color: var(--input-placeholder); }
.login-input:focus {
    outline: none;
    border-color: var(--glow-purple, #8a53f9);
    box-shadow: 0 0 12px var(--glow-purple, rgba(138, 83, 249, 0.4));
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px var(--glow-purple, rgba(138, 83, 249, 0.3)); }
    50% { box-shadow: 0 0 16px var(--glow-purple, rgba(138, 83, 249, 0.5)); }
}

/* ============= TEXTAREA ============= */
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base, 1rem);
    color: var(--text-primary);
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--radius-lg, 0.75rem);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}
.form-textarea:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--glow-sm);
}

/* ============= SELECT ============= */
.form-select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: var(--font-size-base, 1rem);
    font-weight: 500;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--radius-lg, 0.75rem);
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.form-select:hover { border-color: var(--border-secondary); }
.form-select:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--glow-sm);
}

/* ============= CHECKBOX & RADIO ============= */
.form-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem; }
.form-checkbox, .form-radio {
    width: 1.125rem; height: 1.125rem;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ============= FILE INPUT ============= */
.form-file {
    width: 100%;
    padding: 0.5rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    background: var(--input-bg);
    border: 2px dashed var(--input-border);
    border-radius: var(--radius-lg, 0.75rem);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.form-file:hover { border-color: var(--accent); }

/* ============= HELP TEXT ============= */
.form-help { font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary); margin-top: 0.25rem; }

/* ============= VALIDATION ============= */
.form-input.error, .form-textarea.error, .form-select.error { border-color: var(--color-danger); }
.form-input.success, .form-textarea.success, .form-select.success { border-color: var(--color-success); }
.form-error-text { font-size: var(--font-size-xs, 0.75rem); color: var(--alert-error-text); margin-top: 0.25rem; }
.form-success-text { font-size: var(--font-size-xs, 0.75rem); color: var(--alert-success-text); margin-top: 0.25rem; }

/* ============= INPUT GROUP ============= */
.input-group { display: flex; align-items: stretch; }
.input-group .form-input { border-radius: 0; flex: 1; }
.input-group .form-input:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.input-group .form-input:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.input-group .btn { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

/* ============= TOGGLE SWITCH ============= */
.toggle-switch {
    position: relative;
    width: 2.75rem; height: 1.5rem;
    background: var(--toggle-bg);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.2s ease;
}
.toggle-switch.active { background: var(--accent); }
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 1.25rem; height: 1.25rem;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.toggle-switch.active::after { transform: translateX(1.25rem); }

/* ============= PILL SELECTORS ============= */
.pill-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pill {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    background: var(--bg-hover);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
}
.pill:hover { background: var(--border-primary); }
.pill.selected { background: var(--accent); color: #ffffff; }

/* ============= CHIPS ============= */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--font-size-xs, 0.75rem);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
}
.chip:hover { border-color: var(--accent); background: var(--bg-accent-subtle); }
.chip.selected { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.chip .chip-price { opacity: 0.7; }

/* ============= LIGHT THEME ============= */
[data-theme="white-glass"] .form-input,
[data-theme="white-glass"] .form-textarea,
[data-theme="white-glass"] .form-select {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}
[data-theme="white-glass"] .form-input:focus,
[data-theme="white-glass"] .form-textarea:focus,
[data-theme="white-glass"] .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
[data-theme="white-glass"] .login-input {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--accent);
    color: #1a1a1a;
}
[data-theme="white-glass"] .login-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
    animation: none;
}
[data-theme="white-glass"] .toggle-switch { background: rgba(0, 0, 0, 0.15); }

/* ============= RETRO THEME — flat 3D inputs ============= */
[data-theme="retro"] .form-input,
[data-theme="retro"] .form-textarea,
[data-theme="retro"] .form-select,
[data-theme="retro"] .login-input {
    background: #ffffff;
    border: none;
    border-radius: 0 !important;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    color: #000;
}
[data-theme="retro"] .form-input:focus,
[data-theme="retro"] .form-textarea:focus,
[data-theme="retro"] .form-select:focus,
[data-theme="retro"] .login-input:focus {
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    outline: 1px dotted #000;
}
[data-theme="retro"] .pill, [data-theme="retro"] .chip { border-radius: 0 !important; }
[data-theme="retro"] .pill.selected { background: #000080; color: #fff; }
[data-theme="retro"] .toggle-switch {
    border-radius: 0 !important;
    background: #c0c0c0;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080;
}
[data-theme="retro"] .toggle-switch::after { border-radius: 0 !important; background: #c0c0c0; border: 1px solid #808080; }
[data-theme="retro"] .toggle-switch.active { background: #000080; }

/* ============= HOMEBREW THEME — green terminal inputs ============= */
[data-theme="homebrew"] .form-input,
[data-theme="homebrew"] .form-textarea,
[data-theme="homebrew"] .form-select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 0 !important;
    color: #00ff00;
    caret-color: #00ff00;
}
[data-theme="homebrew"] .form-input::placeholder,
[data-theme="homebrew"] .form-textarea::placeholder {
    color: rgba(0, 255, 0, 0.3);
}
[data-theme="homebrew"] .form-input:focus,
[data-theme="homebrew"] .form-textarea:focus,
[data-theme="homebrew"] .form-select:focus {
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.15);
}
[data-theme="homebrew"] .login-input {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 255, 0, 0.3);
    border-radius: 0 !important;
    color: #00ff00;
}
[data-theme="homebrew"] .login-input:focus {
    border-color: #00ff00;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
}
[data-theme="homebrew"] .pill, [data-theme="homebrew"] .chip { border-radius: 0 !important; color: rgba(0, 255, 0, 0.7); }
[data-theme="homebrew"] .pill.selected { background: rgba(0, 255, 0, 0.12); color: #00ff00; border: 1px solid rgba(0, 255, 0, 0.4); }
[data-theme="homebrew"] .chip.selected { background: rgba(0, 255, 0, 0.12); color: #00ff00; border-color: rgba(0, 255, 0, 0.4); }
[data-theme="homebrew"] .toggle-switch {
    border-radius: 0 !important;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.2);
}
[data-theme="homebrew"] .toggle-switch.active { background: rgba(0, 255, 0, 0.3); }
[data-theme="homebrew"] .toggle-switch::after { border-radius: 0 !important; background: #00ff00; }

/* ============= SKEUOMORPHIC THEME — carved/inset inputs ============= */
[data-theme="skeuomorphic"] .form-input,
[data-theme="skeuomorphic"] .form-control,
[data-theme="skeuomorphic"] input[type="text"],
[data-theme="skeuomorphic"] input[type="email"],
[data-theme="skeuomorphic"] input[type="password"],
[data-theme="skeuomorphic"] input[type="search"],
[data-theme="skeuomorphic"] input[type="number"],
[data-theme="skeuomorphic"] textarea,
[data-theme="skeuomorphic"] select {
    background: #e8e3da;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.04);
    color: var(--text-primary);
}
[data-theme="skeuomorphic"] .form-input:focus,
[data-theme="skeuomorphic"] .form-control:focus,
[data-theme="skeuomorphic"] input:focus,
[data-theme="skeuomorphic"] textarea:focus,
[data-theme="skeuomorphic"] select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196,30,58,0.15), inset 0 1px 3px rgba(0,0,0,0.1);
    outline: none;
}
[data-theme="skeuomorphic"] .login-input {
    background: #e8e3da;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
}
[data-theme="skeuomorphic"] .toggle-switch {
    background: #d5cec4;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
[data-theme="skeuomorphic"] .toggle-switch.active {
    background: linear-gradient(to bottom, #d42c4d, #c41e3a);
}
[data-theme="skeuomorphic"] .toggle-switch .toggle-knob {
    background: linear-gradient(to bottom, #ffffff, #f0ebe3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}