/* =============================================
   DESIGN SYSTEM - Form Components (shadcn/ui style)
   Global styles for inputs, selects, buttons, etc.
   With full theme support (light/dark)
   ============================================= */

/* ===== BASE FORM STYLES ===== */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label,
label {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

/* ===== INPUTS ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
.form-control {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--foreground) !important;
    background-color: var(--background) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg, 8px);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

textarea,
textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 12px 16px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--muted-foreground) !important;
}

input:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2) !important;
    background-color: var(--background) !important;
}

input:disabled,
textarea:disabled,
.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark mode inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .auth-input {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
    color: #fafafa !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .auth-input:focus {
    background-color: #18181b !important;
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3) !important;
}

/* Autofill override for dark mode */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] .auth-input:-webkit-autofill,
[data-theme="dark"] .auth-input:-webkit-autofill:hover,
[data-theme="dark"] .auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #27272a inset !important;
    -webkit-text-fill-color: #fafafa !important;
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
    caret-color: #fafafa !important;
}

/* Autofill override for light mode */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #09090b !important;
    background-color: #ffffff !important;
    caret-color: #09090b !important;
}

/* ===== SELECT / DROPDOWN ===== */
select,
.form-select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--foreground) !important;
    background-color: var(--background) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg, 8px);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

select:focus,
.form-select:focus {
    outline: none;
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2) !important;
}

select:disabled,
.form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark mode selects */
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
    background-color: var(--zinc-800, #27272a) !important;
    border-color: var(--zinc-700, #3f3f46) !important;
}

[data-theme="dark"] select:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--zinc-900, #18181b) !important;
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3) !important;
}

select option,
.form-select option {
    background-color: var(--popover);
    color: var(--foreground);
    padding: 12px;
}

/* ===== CHECKBOX ===== */
input[type="checkbox"],
.form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--background);
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.15s;
}

input[type="checkbox"]:checked,
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

input[type="checkbox"]:focus,
.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

.form-check-label {
    font-size: 14px;
    color: var(--muted-foreground);
    cursor: pointer;
}

/* ===== RADIO ===== */
input[type="radio"],
.form-check-input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--background);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.15s;
}

input[type="radio"]:checked,
.form-check-input[type="radio"]:checked {
    border-color: var(--primary);
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='currentColor'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
}

input[type="radio"]:focus,
.form-check-input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

/* ===== BUTTONS ===== */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-lg, 8px);
    cursor: pointer;
    transition: all 0.15s;
    box-sizing: border-box;
    text-decoration: none;
}

button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button */
.btn-primary,
button[type="submit"] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
}

.btn-primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    opacity: 0.9;
}

/* Secondary/Outline Button */
.btn-secondary,
.btn-outline {
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
    background-color: var(--accent);
}

/* Ghost Button */
.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
    border: none;
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--accent);
}

/* Destructive/Danger Button */
.btn-danger,
.btn-destructive {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    border: none;
}

.btn-danger:hover:not(:disabled),
.btn-destructive:hover:not(:disabled) {
    opacity: 0.9;
}

/* Link Button */
.btn-link {
    background-color: transparent;
    color: var(--foreground);
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    height: auto;
    padding: 0;
}

.btn-link:hover:not(:disabled) {
    color: var(--muted-foreground);
}

/* Button Sizes */
.btn-sm {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.btn-lg {
    height: 56px;
    padding: 0 32px;
    font-size: 16px;
}

/* Full Width Button */
.btn-block,
.btn-full {
    width: 100%;
}

/* ===== FORM HINT/HELPER TEXT ===== */
.form-hint,
.form-text,
.help-text {
    font-size: 13px;
    color: var(--muted-foreground);
    margin-top: -6px;
}

/* ===== VALIDATION MESSAGES ===== */
.validation-message,
.field-validation-error,
.text-danger {
    font-size: 13px;
    color: var(--error-500);
    margin-top: 6px;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--success-500);
}

.invalid {
    outline: none;
    border-color: var(--error-500);
}

/* ===== FORM GROUPS ===== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* ===== INPUT GROUP (with icon/addon) ===== */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group input {
    padding-left: 48px;
}

.input-group-icon {
    position: absolute;
    left: 16px;
    color: var(--muted-foreground);
    pointer-events: none;
}

.input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
    background-color: var(--muted);
    border: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 14px;
}

.input-group-addon:first-child {
    border-radius: var(--radius-lg, 8px) 0 0 var(--radius-lg, 8px);
    border-right: none;
}

.input-group-addon:last-child {
    border-radius: 0 var(--radius-lg, 8px) var(--radius-lg, 8px) 0;
    border-left: none;
}

.input-group input:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.input-group input:first-child {
    border-radius: var(--radius-lg, 8px) 0 0 var(--radius-lg, 8px);
}

.input-group input:last-child {
    border-radius: 0 var(--radius-lg, 8px) var(--radius-lg, 8px) 0;
}

/* ===== LOADING SPINNER ===== */
.spinner,
.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--muted-foreground);
    border-top-color: var(--background);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-primary .spinner,
.btn-primary .btn-spinner,
button[type="submit"] .spinner {
    border-color: var(--muted-foreground);
    border-top-color: var(--primary-foreground);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .form-field-row,
    .form-row {
        grid-template-columns: 1fr;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select,
    .form-control,
    .form-select {
        height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    button,
    .btn {
        height: 44px;
    }
}