/**
 * Form Styles
 * Reusable form component styles following DRY principles
 * Version: 1.0.0
 */

/* ==========================================
   CSS Custom Properties (Variables)
   ========================================== */
:root {
    /* Colors — Faham "Manuscript Minimal" tokens (§2 / §4.12 / §5.10) */
    --form-border-color: #E3DDD0;        /* line */
    --form-border-color-hover: #0E5A52;  /* brand */
    --form-border-color-focus: #0E5A52;  /* brand — visible border, no ring glow */
    --form-error-color: oklch(0.45 0.09 25); /* error token */
    --form-disabled-bg: #EFEAE0;         /* paper-2 */
    --form-disabled-text: #8A8578;       /* muted */

    /* Spacing */
    --form-padding-y: 0.875rem;          /* py-3.5 */
    --form-padding-x: 1rem;              /* px-4 */
    --form-border-radius: 0;             /* square corners (§5.3) */
    --form-focus-ring-width: 2px;

    /* Transitions — colour only (§5.8) */
    --form-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* ==========================================
   Base Form Control Styles
   ========================================== */
.form-control {
    width: 100%;
    padding: var(--form-padding-y) var(--form-padding-x);
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    font-size: 0.9375rem;   /* text-[15px] */
    line-height: 1.5;
    color: #1C2B2A;         /* ink */
    background-color: #ffffff;
    transition: var(--form-transition);
}

.form-control:hover:not(:disabled) {
    border-color: var(--form-border-color-hover);
}

.form-control:focus {
    outline: none;
    border-color: var(--form-border-color-focus);
    box-shadow: none;       /* no ring glow (§4.12) */
}

.form-control:disabled {
    background-color: var(--form-disabled-bg);
    color: var(--form-disabled-text);
    cursor: not-allowed;
    opacity: 0.6;
}

.form-control.is-invalid {
    border-color: var(--form-error-color);
}

.form-control.is-invalid:focus {
    box-shadow: none;
    border-color: var(--form-error-color);
}

/* ==========================================
   Textarea Specific Styles
   ========================================== */
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

textarea.form-control.no-resize {
    resize: none;
}

/* ==========================================
   Select Specific Styles
   ========================================== */
select.form-control {
    appearance: none;
    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='%238A8578' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right var(--form-padding-x) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: calc(var(--form-padding-x) * 2.5);
}

/* ==========================================
   File Input Specific Styles
   ========================================== */
input[type="file"].form-control {
    padding: calc(var(--form-padding-y) * 0.75) var(--form-padding-x);
}

/* ==========================================
   Checkbox and Radio Styles
   ========================================== */
.form-check-input,
.form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    vertical-align: middle;
    border: 1px solid var(--form-border-color);
    border-radius: 0;   /* square (§5.3) */
    cursor: pointer;
    transition: var(--form-transition);
}

.form-check-input:checked,
.form-checkbox:checked {
    background-color: #0E5A52;   /* brand */
    border-color: #0E5A52;
}

.form-check-input:focus,
.form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 var(--form-focus-ring-width) rgba(14, 90, 82, 0.25);
}

/* ==========================================
   Form Labels
   ========================================== */
.form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #55534B;   /* body */
}

.form-label.required::after {
    content: " *";
    color: var(--form-error-color);
}

/* ==========================================
   Form Groups and Layout
   ========================================== */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ==========================================
   Error and Help Text
   ========================================== */
.form-error,
.errorlist {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--form-error-color);
}

.form-help-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #8A8578;   /* muted */
}

/* ==========================================
   Size Variants
   ========================================== */
.form-control-sm {
    padding: calc(var(--form-padding-y) * 0.75) calc(var(--form-padding-x) * 0.75);
    font-size: 0.875rem;
}

.form-control-lg {
    padding: calc(var(--form-padding-y) * 1.5) calc(var(--form-padding-x) * 1.25);
    font-size: 1.125rem;
}

/* ==========================================
   Legacy Class Names (for backward compatibility)
   ========================================== */
.form-input,
.instructor-form-input {
    composes: form-control;
}

.form-textarea,
.instructor-form-textarea {
    composes: form-control;
}