/**
 * Form Component System
 *
 * Standardized form input styles using CSS variables.
 * Replaces 8 different input classes with unified system.
 *
 * Usage:
 *   <input type="text" class="input">
 *   <select class="input">...</select>
 *   <textarea class="input">...</textarea>
 */

/* ========================================
   FORM VARIABLES
======================================== */

:root {
    /* Input sizing - Aliases to global design tokens */
    --input-padding: var(--spacing-sm) var(--spacing-md);        /* 8px 12px */
    --input-padding-sm: var(--spacing-xs) var(--spacing-sm);     /* 4px 8px */
    --input-padding-lg: var(--spacing-sm) var(--spacing-lg);     /* 8px 16px */

    --input-font-size: var(--text-base);      /* 14px */
    --input-font-size-sm: var(--text-sm);     /* 13px */
    --input-font-size-lg: var(--text-lg);     /* 16px */

    --input-height: var(--spacing-4xl);       /* 48px */
    --input-height-sm: var(--spacing-2xl);    /* 24px */
    --input-height-lg: var(--spacing-5xl);    /* 64px */

    --input-radius: var(--radius-md);                  /* 6px */
    --input-border-width: var(--border-width-thin);    /* 1px */

    /* Textarea specific */
    --textarea-min-height: 80px;

    /* Label sizing */
    --label-font-size: var(--text-base);       /* 14px */
    --label-font-weight: var(--font-semibold); /* 600 */
    --label-margin: 0 0 var(--spacing-xs) 0;   /* 0 0 4px 0 */

    /* Form group spacing */
    --form-group-margin: 0 0 var(--spacing-lg) 0;  /* 0 0 16px 0 */

    /* Transitions */
    --input-transition: var(--transition-base);  /* 200ms ease */
}

/* ========================================
   BASE INPUT
======================================== */

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
    /* Sizing */
    padding: var(--input-padding);
    font-size: var(--input-font-size);
    min-height: var(--input-height);
    width: 100%;

    /* Styling */
    border-radius: var(--input-radius);
    border: var(--input-border-width) solid var(--theme-input-border);
    background: var(--theme-input-bg);
    color: var(--theme-input-color);

    /* Behavior */
    transition: var(--input-transition);
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
}

/* Focus State */
.input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--theme-input-focus-border);
    box-shadow: 0 0 0 2px var(--theme-input-focus-shadow);
}

/* Disabled State */
.input:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--theme-input-disabled-bg, rgba(0, 0, 0, 0.05));
}

/* Placeholder */
.input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--theme-input-placeholder);
}

/* ========================================
   SIZE VARIANTS
======================================== */

.input-sm,
input.input-sm,
select.input-sm {
    padding: var(--input-padding-sm);
    font-size: var(--input-font-size-sm);
    min-height: var(--input-height-sm);
}

.input-lg,
input.input-lg,
select.input-lg {
    padding: var(--input-padding-lg);
    font-size: var(--input-font-size-lg);
    min-height: var(--input-height-lg);
}

/* ========================================
   TEXTAREA SPECIFIC
======================================== */

textarea,
textarea.input {
    min-height: var(--textarea-min-height);
    resize: vertical;
    line-height: 1.5;
}

textarea.input-sm {
    min-height: 60px;
}

textarea.input-lg {
    min-height: 120px;
}

/* ========================================
   SELECT SPECIFIC
======================================== */

select,
select.input {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

/* Select options */
select option {
    background: var(--theme-bg-primary, white);
    color: var(--theme-text-primary, black);
    padding: 8px;
}

/* ========================================
   SPECIAL INPUT TYPES
======================================== */

/* Search Input */
.input-search,
input[type="search"] {
    padding-right: 36px; /* Space for clear button */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>');
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 16px;
    padding-left: 36px;
}

/* Number Input (hide spinners) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* File Input */
input[type="file"] {
    padding: 6px;
    cursor: pointer;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: auto;
    margin-right: 8px;
    cursor: pointer;
}

/* ========================================
   INPUT GROUPS
======================================== */

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group .input,
.input-group input,
.input-group select {
    flex: 1;
    border-radius: 0;
}

.input-group .input:first-child,
.input-group input:first-child {
    border-top-left-radius: var(--input-radius);
    border-bottom-left-radius: var(--input-radius);
}

.input-group .input:last-child,
.input-group input:last-child {
    border-top-right-radius: var(--input-radius);
    border-bottom-right-radius: var(--input-radius);
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--theme-card-bg);
    border: var(--input-border-width) solid var(--theme-input-border);
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.input-group-prepend {
    border-right: none;
    border-top-left-radius: var(--input-radius);
    border-bottom-left-radius: var(--input-radius);
}

.input-group-append {
    border-left: none;
    border-top-right-radius: var(--input-radius);
    border-bottom-right-radius: var(--input-radius);
}

/* ========================================
   FORM GROUPS & LABELS
======================================== */

.form-group {
    margin: var(--form-group-margin);
}

.form-label,
label {
    display: block;
    margin: var(--label-margin);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--theme-text-primary);
}

.form-label-inline {
    display: inline-block;
    margin-right: 12px;
}

.form-help-text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--theme-text-muted);
}

.form-error-text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--theme-btn-danger-bg);
}

/* ========================================
   VALIDATION STATES
======================================== */

/* Error/Invalid */
.input-error,
.input.error,
input.error,
select.error,
textarea.error,
.form-group.error .input,
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--theme-btn-danger-bg);
}

.input-error:focus,
input.error:focus {
    box-shadow: 0 0 0 2px var(--theme-danger-overlay-focus);
}

/* Success/Valid */
.input-success,
.input.success,
input.success,
.form-group.success .input,
.form-group.success input {
    border-color: var(--theme-btn-success-bg);
}

.input-success:focus,
input.success:focus {
    box-shadow: 0 0 0 2px var(--theme-success-overlay-focus);
}

/* Warning */
.input-warning,
.input.warning,
input.warning,
.form-group.warning .input,
.form-group.warning input {
    border-color: var(--theme-btn-warning-bg, rgb(251, 191, 36));
}

/* ========================================
   LEGACY CLASS MAPPINGS (Temporary)
   Remove these after HTML is updated
======================================== */

.form-input {
    /* Currently exists in core.css - will migrate */
    padding: var(--input-padding);
    font-size: var(--input-font-size);
    border: var(--input-border-width) solid var(--theme-input-border);
    border-radius: var(--input-radius);
    background: var(--theme-input-bg);
    color: var(--theme-input-color);
}

.form-input:focus {
    border-color: var(--theme-input-focus-border);
    box-shadow: 0 0 0 2px var(--theme-input-focus-shadow);
}

.search-filter-input,
.timespan-dropdown {
    /* Will migrate to .input .input-search */
    /* Padding and height defined in styles.css to match 24px tab menu height */
    font-size: var(--input-font-size);
    border: var(--input-border-width) solid var(--theme-input-border);
    border-radius: var(--input-radius);
    background: var(--theme-input-bg);
    color: var(--theme-input-color);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 768px) {
    .input,
    input,
    select,
    textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .input-sm {
        font-size: 14px;
    }

    .form-group {
        margin-bottom: 12px;
    }
}