/* =============================================================================
   Module: Static Assets

   File ID: ST-004
   File: static/css/forms.css
   Version: 1.0.0

   DESCRIPTION
   -----------------------------------------------------------------------------
   Enterprise Form System

   TABLE OF CONTENTS

   1. Form Foundation
   2. Form Layouts
   3. Form Groups
   4. Labels
   5. Inputs
   6. Textareas
   7. Select Fields
   8. Input Icons

============================================================================= */


/* =============================================================================
   1. FORM FOUNDATION
============================================================================= */

.form{
    width:100%;
}

.form-inline{
    display:flex;
    align-items:center;
    gap:1rem;

    flex-wrap:wrap;
}

.form-vertical{
    display:flex;
    flex-direction:column;

    gap:1.5rem;
}

.form-horizontal{
    display:grid;

    grid-template-columns:
        220px
        minmax(0,1fr);

    gap:1.5rem 2rem;
}

.form-fluid{
    width:100%;
}


/* =============================================================================
   2. FORM LAYOUTS
============================================================================= */

.form-grid{
    display:grid;

    grid-template-columns:
        repeat(12,minmax(0,1fr));

    gap:1.5rem;
}

.form-col-3{
    grid-column:span 3;
}

.form-col-4{
    grid-column:span 4;
}

.form-col-6{
    grid-column:span 6;
}

.form-col-8{
    grid-column:span 8;
}

.form-col-9{
    grid-column:span 9;
}

.form-col-12{
    grid-column:span 12;
}


/* =============================================================================
   3. FORM GROUPS
============================================================================= */

.form-group{
    display:flex;
    flex-direction:column;

    gap:.65rem;

    width:100%;
}

.form-row{
    display:flex;
    align-items:flex-start;

    gap:1.5rem;
}

.form-section{
    display:flex;
    flex-direction:column;

    gap:1.5rem;

    padding:2rem;

    background:#ffffff;

    border:1px solid var(--border-color);
    border-radius:var(--radius-xl);
}

.form-divider{
    height:1px;

    margin:.5rem 0;

    background:var(--border-color);
}


/* =============================================================================
   4. LABELS
============================================================================= */

.form-label{
    display:inline-flex;
    align-items:center;

    gap:.5rem;

    font-size:.92rem;
    font-weight:700;

    color:var(--text-color);
}

.form-label-required::after{
    content:"*";

    color:var(--danger);

    margin-left:.2rem;
}

.form-label-optional{
    color:var(--text-muted);
}

.form-help{
    color:var(--text-muted);

    font-size:.82rem;

    line-height:1.7;
}


/* =============================================================================
   5. INPUTS
============================================================================= */

.form-control{
    width:100%;

    height:48px;

    padding:0 1rem;

    color:var(--text-color);

    background:#ffffff;

    border:1px solid var(--border-color);
    border-radius:var(--radius-md);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-control::placeholder{
    color:#94a3b8;
}

.form-control:hover{
    border-color:#b8c4d3;
}

.form-control:focus{
    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 .25rem rgba(13,110,253,.15);
}

.form-control:disabled{
    cursor:not-allowed;

    opacity:.65;

    background:#f8fafc;
}

.form-control[readonly]{
    background:#f8fafc;
}


/* =============================================================================
   6. TEXTAREAS
============================================================================= */

textarea.form-control{
    min-height:140px;

    padding:1rem;

    resize:vertical;
}

.textarea-sm{
    min-height:90px;
}

.textarea-lg{
    min-height:220px;
}

.textarea-auto{
    resize:none;
}


/* =============================================================================
   7. SELECT FIELDS
============================================================================= */

.form-select{
    width:100%;

    height:48px;

    padding:
        0
        3rem
        0
        1rem;

    background-color:#ffffff;

    border:1px solid var(--border-color);
    border-radius:var(--radius-md);

    appearance:none;

    cursor:pointer;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form-select:focus{
    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 .25rem rgba(13,110,253,.15);
}


/* =============================================================================
   8. INPUT ICONS
============================================================================= */

.input-group{
    position:relative;

    width:100%;
}

.input-icon-left,
.input-icon-right{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-muted);

    pointer-events:none;
}

.input-icon-left{
    left:1rem;
}

.input-icon-right{
    right:1rem;
}

.input-group.has-left-icon .form-control{
    padding-left:3rem;
}

.input-group.has-right-icon .form-control{
    padding-right:3rem;
}


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

@media (max-width:992px){

    .form-horizontal{
        grid-template-columns:1fr;
    }

    .form-col-3,
    .form-col-4,
    .form-col-6,
    .form-col-8,
    .form-col-9{
        grid-column:span 12;
    }

}

@media (max-width:768px){

    .form-row{
        flex-direction:column;
    }

    .form-inline{
        flex-direction:column;
        align-items:stretch;
    }

    .form-section{
        padding:1.5rem;
    }

}


/* =============================================================================

END OF PART 1.1

NEXT:

ST-004 — Part 1.2

(Form Validation,
 Input States,
 Checkboxes,
 Radio Buttons,
 Toggle Switches,
 File Inputs,
 Range Sliders,
 Color Pickers)

============================================================================= */

/* =============================================================================
   9. FORM VALIDATION
============================================================================= */

.form-feedback{
    display:none;

    font-size:.85rem;

    line-height:1.6;
}

.form-feedback-valid{
    color:var(--success);
}

.form-feedback-invalid{
    color:var(--danger);
}

.is-valid + .form-feedback-valid,
.was-validated .form-control:valid + .form-feedback-valid,
.was-validated .form-select:valid + .form-feedback-valid{
    display:block;
}

.is-invalid + .form-feedback-invalid,
.was-validated .form-control:invalid + .form-feedback-invalid,
.was-validated .form-select:invalid + .form-feedback-invalid{
    display:block;
}

.form-control.is-valid,
.form-select.is-valid{
    border-color:var(--success);

    box-shadow:
        0 0 0 .25rem rgba(25,135,84,.15);
}

.form-control.is-invalid,
.form-select.is-invalid{
    border-color:var(--danger);

    box-shadow:
        0 0 0 .25rem rgba(220,53,69,.15);
}

.validation-summary{
    display:flex;
    flex-direction:column;

    gap:.75rem;

    padding:1rem 1.25rem;

    border-radius:var(--radius-lg);

    border:1px solid var(--danger);

    background:rgba(220,53,69,.06);
}

.validation-summary-title{
    margin:0;

    font-size:1rem;
    font-weight:700;

    color:var(--danger);
}


/* =============================================================================
   10. INPUT STATES
============================================================================= */

.form-control-sm,
.form-select-sm{
    height:38px;

    font-size:.875rem;
}

.form-control-lg,
.form-select-lg{
    height:56px;

    font-size:1rem;
}

.form-control-pill,
.form-select-pill{
    border-radius:999px;
}

.form-control-rounded,
.form-select-rounded{
    border-radius:var(--radius-xl);
}

.form-control-borderless{
    border:none;

    box-shadow:none;
}

.form-control-shadow{
    box-shadow:
        0 .35rem 1rem rgba(15,23,42,.08);
}

.form-control-loading{
    cursor:progress;

    opacity:.75;
}


/* =============================================================================
   11. CHECKBOXES
============================================================================= */

.form-check{
    display:flex;
    align-items:flex-start;

    gap:.75rem;
}

.form-check-input{
    width:18px;
    height:18px;

    margin-top:.15rem;

    accent-color:var(--primary);

    cursor:pointer;
}

.form-check-label{
    cursor:pointer;

    line-height:1.7;

    color:var(--text-color);
}

.form-check-inline{
    display:inline-flex;

    margin-right:1.5rem;
}


/* =============================================================================
   12. RADIO BUTTONS
============================================================================= */

.form-radio{
    display:flex;
    align-items:flex-start;

    gap:.75rem;
}

.form-radio-input{
    width:18px;
    height:18px;

    margin-top:.15rem;

    accent-color:var(--primary);

    cursor:pointer;
}

.form-radio-label{
    cursor:pointer;

    line-height:1.7;
}


/* =============================================================================
   13. TOGGLE SWITCHES
============================================================================= */

.form-switch{
    display:flex;
    align-items:center;

    gap:.75rem;
}

.form-switch-input{
    appearance:none;

    width:52px;
    height:30px;

    position:relative;

    border-radius:999px;

    background:#cbd5e1;

    cursor:pointer;

    transition:
        background var(--transition);
}

.form-switch-input::before{
    content:"";

    position:absolute;

    top:3px;
    left:3px;

    width:24px;
    height:24px;

    border-radius:50%;

    background:#ffffff;

    transition:transform var(--transition);
}

.form-switch-input:checked{
    background:var(--primary);
}

.form-switch-input:checked::before{
    transform:translateX(22px);
}


/* =============================================================================
   14. FILE INPUTS
============================================================================= */

.form-file{
    display:flex;
    flex-direction:column;

    gap:.75rem;
}

.form-file-input{
    width:100%;

    padding:.85rem 1rem;

    border:2px dashed var(--border-color);

    border-radius:var(--radius-lg);

    background:#ffffff;

    cursor:pointer;

    transition:
        border-color var(--transition),
        background var(--transition);
}

.form-file-input:hover{
    border-color:var(--primary);

    background:rgba(13,110,253,.04);
}

.form-file-preview{
    display:flex;

    flex-wrap:wrap;

    gap:1rem;
}


/* =============================================================================
   15. RANGE SLIDERS
============================================================================= */

.form-range{
    width:100%;

    cursor:pointer;

    accent-color:var(--primary);
}

.form-range-value{
    font-weight:700;

    color:var(--primary);
}


/* =============================================================================
   16. COLOR PICKERS
============================================================================= */

.form-color{
    width:60px;
    height:48px;

    padding:.25rem;

    border:1px solid var(--border-color);

    border-radius:var(--radius-md);

    background:#ffffff;

    cursor:pointer;
}

.form-color::-webkit-color-swatch{
    border:none;

    border-radius:var(--radius-sm);
}

.form-color::-moz-color-swatch{
    border:none;

    border-radius:var(--radius-sm);
}


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

@media (max-width:768px){

    .form-check,
    .form-radio,
    .form-switch{
        align-items:flex-start;
    }

    .form-file-preview{
        flex-direction:column;
    }

}


/* =============================================================================

END OF PART 1.2

NEXT:

ST-004 — Part 1.3

(Input Groups,
 Floating Labels,
 Search Fields,
 Password Fields,
 OTP Inputs,
 Currency Inputs,
 Date & Time Inputs,
 Form Actions)

============================================================================= */

/* =============================================================================
   17. INPUT GROUPS
============================================================================= */

.input-group{
    display:flex;
    align-items:stretch;

    width:100%;

    position:relative;
}

.input-group > .form-control,
.input-group > .form-select{
    flex:1 1 auto;

    min-width:0;

    border-radius:0;
}

.input-group > .form-control:first-child,
.input-group > .form-select:first-child{
    border-top-left-radius:var(--radius-md);
    border-bottom-left-radius:var(--radius-md);
}

.input-group > .form-control:last-child,
.input-group > .form-select:last-child{
    border-top-right-radius:var(--radius-md);
    border-bottom-right-radius:var(--radius-md);
}

.input-group-text{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 1rem;

    white-space:nowrap;

    color:var(--text-muted);

    background:#f8fafc;

    border:1px solid var(--border-color);
}

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

    border-right:none;
}

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

    border-left:none;
}


/* =============================================================================
   18. FLOATING LABELS
============================================================================= */

.form-floating{
    position:relative;

    width:100%;
}

.form-floating > .form-control,
.form-floating > .form-select{
    height:58px;

    padding:
        1.45rem
        1rem
        .55rem;
}

.form-floating > label{
    position:absolute;

    top:50%;
    left:1rem;

    transform:translateY(-50%);

    pointer-events:none;

    color:var(--text-muted);

    transition:
        transform var(--transition),
        font-size var(--transition),
        color var(--transition),
        top var(--transition);
}

.form-floating > .form-control:focus + label,
.form-floating > .form-control:not(:placeholder-shown) + label,
.form-floating > .form-select:focus + label,
.form-floating > .form-select:not([value=""]) + label{
    top:.8rem;

    transform:none;

    font-size:.75rem;

    color:var(--primary);
}


/* =============================================================================
   19. SEARCH FIELDS
============================================================================= */

.search-field{
    position:relative;

    width:100%;
}

.search-field .form-control{
    padding-left:3rem;
    padding-right:3rem;
}

.search-field-icon{
    position:absolute;

    top:50%;
    left:1rem;

    transform:translateY(-50%);

    color:var(--text-muted);

    pointer-events:none;
}

.search-field-clear{
    position:absolute;

    top:50%;
    right:1rem;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    border:none;

    background:transparent;

    color:var(--text-muted);

    cursor:pointer;

    transition:color var(--transition);
}

.search-field-clear:hover{
    color:var(--danger);
}


/* =============================================================================
   20. PASSWORD FIELDS
============================================================================= */

.password-field{
    position:relative;

    width:100%;
}

.password-field .form-control{
    padding-right:3rem;
}

.password-toggle{
    position:absolute;

    top:50%;
    right:.75rem;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border:none;

    background:transparent;

    color:var(--text-muted);

    cursor:pointer;

    transition:color var(--transition);
}

.password-toggle:hover{
    color:var(--primary);
}


/* =============================================================================
   21. OTP INPUTS
============================================================================= */

.otp-group{
    display:flex;

    justify-content:center;

    gap:.75rem;
}

.otp-input{
    width:56px;
    height:56px;

    text-align:center;

    font-size:1.25rem;
    font-weight:700;

    border:1px solid var(--border-color);
    border-radius:var(--radius-md);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.otp-input:focus{
    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 .25rem rgba(13,110,253,.15);
}


/* =============================================================================
   22. CURRENCY INPUTS
============================================================================= */

.currency-input{
    position:relative;

    width:100%;
}

.currency-symbol{
    position:absolute;

    top:50%;
    left:1rem;

    transform:translateY(-50%);

    font-weight:700;

    color:var(--text-muted);

    pointer-events:none;
}

.currency-input .form-control{
    padding-left:3rem;
}

.currency-code{
    position:absolute;

    top:50%;
    right:1rem;

    transform:translateY(-50%);

    font-size:.85rem;
    font-weight:700;

    color:var(--text-muted);
}


/* =============================================================================
   23. DATE & TIME INPUTS
============================================================================= */

.datetime-group{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:1rem;
}

.date-input,
.time-input,
.datetime-input{
    width:100%;
}

.date-input .form-control,
.time-input .form-control,
.datetime-input .form-control{
    cursor:pointer;
}


/* =============================================================================
   24. FORM ACTIONS
============================================================================= */

.form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:1rem;

    flex-wrap:wrap;

    margin-top:2rem;
}

.form-actions-start{
    justify-content:flex-start;
}

.form-actions-center{
    justify-content:center;
}

.form-actions-between{
    justify-content:space-between;
}

.form-actions-stretch > *{
    flex:1;
}


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

@media (max-width:992px){

    .datetime-group{
        grid-template-columns:1fr;
    }

}

@media (max-width:768px){

    .otp-group{
        gap:.5rem;

        flex-wrap:wrap;
    }

    .otp-input{
        width:48px;
        height:48px;

        font-size:1.05rem;
    }

    .form-actions,
    .form-actions-between{
        flex-direction:column;
        align-items:stretch;
    }

    .form-actions > *{
        width:100%;
    }

}


/* =============================================================================

END OF PART 1.3

NEXT:

ST-004 — Part 2.1

(Form Cards,
 Multi-Step Forms,
 Progress Indicators,
 Fieldsets,
 Readonly Forms,
 Disabled States,
 Form Tables,
 Enterprise Form Utilities)

============================================================================= */

/* =============================================================================
   25. FORM CARDS
============================================================================= */

.form-card{
    display:flex;
    flex-direction:column;

    gap:2rem;

    width:100%;

    padding:2rem;

    background:#ffffff;

    border:1px solid var(--border-color);
    border-radius:var(--radius-xl);

    box-shadow:0 .25rem .75rem rgba(15,23,42,.04);
}

.form-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:1.5rem;
}

.form-card-title{
    margin:0;

    font-size:1.4rem;
    font-weight:700;

    color:var(--text-color);
}

.form-card-subtitle{
    margin:.35rem 0 0;

    color:var(--text-muted);

    line-height:1.7;
}

.form-card-body{
    display:flex;
    flex-direction:column;

    gap:1.5rem;
}

.form-card-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:1rem;

    padding-top:1.5rem;

    border-top:1px solid var(--border-color);
}


/* =============================================================================
   26. MULTI-STEP FORMS
============================================================================= */

.form-wizard{
    display:flex;
    flex-direction:column;

    gap:2rem;
}

.form-stepper{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;

    overflow-x:auto;
}

.form-step{
    display:flex;
    align-items:center;

    gap:.75rem;

    flex:1;
}

.form-step-indicator{
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    border-radius:50%;

    font-weight:700;

    color:var(--text-muted);

    background:#f1f5f9;

    border:2px solid var(--border-color);

    transition:all var(--transition);
}

.form-step-title{
    font-weight:600;

    color:var(--text-muted);
}

.form-step.active .form-step-indicator{
    color:#ffffff;

    background:var(--primary);

    border-color:var(--primary);
}

.form-step.active .form-step-title{
    color:var(--primary);
}

.form-step.completed .form-step-indicator{
    background:var(--success);

    border-color:var(--success);

    color:#ffffff;
}


/* =============================================================================
   27. PROGRESS INDICATORS
============================================================================= */

.form-progress{
    width:100%;

    height:8px;

    overflow:hidden;

    background:#e2e8f0;

    border-radius:999px;
}

.form-progress-bar{
    width:0;

    height:100%;

    background:var(--primary);

    transition:width .35s ease;
}

.form-progress-success{
    background:var(--success);
}

.form-progress-warning{
    background:var(--warning);
}

.form-progress-danger{
    background:var(--danger);
}


/* =============================================================================
   28. FIELDSETS
============================================================================= */

.form-fieldset{
    margin:0;
    padding:2rem;

    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.form-legend{
    padding:0 .75rem;

    font-size:1rem;
    font-weight:700;

    color:var(--text-color);
}

.form-fieldset-body{
    display:flex;
    flex-direction:column;

    gap:1.5rem;

    margin-top:1rem;
}


/* =============================================================================
   29. READONLY FORMS
============================================================================= */

.form-readonly .form-control,
.form-readonly .form-select,
.form-readonly textarea{
    cursor:default;

    color:var(--text-muted);

    background:#f8fafc;

    border-style:dashed;
}

.form-readonly-value{
    min-height:48px;

    display:flex;
    align-items:center;

    padding:.75rem 1rem;

    border:1px dashed var(--border-color);
    border-radius:var(--radius-md);

    background:#f8fafc;
}


/* =============================================================================
   30. DISABLED STATES
============================================================================= */

.form-disabled{
    pointer-events:none;

    opacity:.6;
}

.form-loading{
    position:relative;
}

.form-loading::after{
    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(1px);

    border-radius:inherit;
}

.form-loading-spinner{
    position:absolute;

    top:50%;
    left:50%;

    width:32px;
    height:32px;

    margin:-16px 0 0 -16px;

    border:3px solid rgba(13,110,253,.15);
    border-top-color:var(--primary);

    border-radius:50%;

    animation:formSpinner .8s linear infinite;

    z-index:10;
}


/* =============================================================================
   31. FORM TABLES
============================================================================= */

.form-table{
    width:100%;

    border-collapse:collapse;
}

.form-table th,
.form-table td{
    padding:1rem;

    vertical-align:top;

    border-bottom:1px solid var(--border-color);
}

.form-table th{
    width:240px;

    text-align:left;

    font-weight:700;

    color:var(--text-color);

    background:#f8fafc;
}

.form-table td{
    background:#ffffff;
}


/* =============================================================================
   32. ENTERPRISE FORM UTILITIES
============================================================================= */

.form-full{
    width:100%;
}

.form-center{
    margin-inline:auto;
}

.form-max-sm{
    max-width:480px;
}

.form-max-md{
    max-width:720px;
}

.form-max-lg{
    max-width:960px;
}

.form-max-xl{
    max-width:1200px;
}

.form-scroll{
    overflow-y:auto;
}

.form-nowrap{
    white-space:nowrap;
}

.form-break{
    word-break:break-word;
}


/* =============================================================================
   ANIMATIONS
============================================================================= */

@keyframes formSpinner{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


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

@media (max-width:992px){

    .form-card-header,
    .form-card-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .form-table th{
        width:180px;
    }

}

@media (max-width:768px){

    .form-card{
        padding:1.5rem;
    }

    .form-stepper{
        flex-direction:column;
        align-items:flex-start;
    }

    .form-step{
        width:100%;
    }

    .form-fieldset{
        padding:1.5rem;
    }

    .form-table,
    .form-table tbody,
    .form-table tr,
    .form-table th,
    .form-table td{
        display:block;

        width:100%;
    }

    .form-table th{
        border-bottom:none;
    }

}


/* =============================================================================

END OF PART 2.1

NEXT:

ST-004 — Part 2.2

(Advanced Validation States,
 Drag & Drop Upload Zones,
 Image Upload Components,
 Signature Fields,
 Rich Text Editor Layout,
 Filter Forms,
 Search Panels,
 Form Accessibility Helpers)

============================================================================= */

/* =============================================================================
   33. ADVANCED VALIDATION STATES
============================================================================= */

.validation-container{
    display:flex;
    flex-direction:column;

    gap:1rem;
}

.validation-success{
    border-color:var(--success) !important;

    background:rgba(25,135,84,.03);
}

.validation-warning{
    border-color:var(--warning) !important;

    background:rgba(255,193,7,.05);
}

.validation-error{
    border-color:var(--danger) !important;

    background:rgba(220,53,69,.04);
}

.validation-info{
    border-color:var(--info) !important;

    background:rgba(13,202,240,.05);
}

.validation-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    flex-shrink:0;
}

.validation-message{
    display:flex;
    align-items:flex-start;

    gap:.75rem;

    font-size:.9rem;

    line-height:1.7;
}

.validation-list{
    margin:0;
    padding-left:1.25rem;
}


/* =============================================================================
   34. DRAG & DROP UPLOAD ZONES
============================================================================= */

.dropzone{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:1rem;

    min-height:220px;

    padding:2rem;

    text-align:center;

    border:2px dashed var(--border-color);
    border-radius:var(--radius-xl);

    background:#ffffff;

    transition:
        border-color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.dropzone:hover{
    border-color:var(--primary);

    background:rgba(13,110,253,.03);
}

.dropzone.dragover{
    border-color:var(--primary);

    background:rgba(13,110,253,.08);

    transform:scale(1.01);
}

.dropzone-icon{
    font-size:2.5rem;

    color:var(--primary);
}

.dropzone-title{
    margin:0;

    font-size:1.1rem;
    font-weight:700;
}

.dropzone-description{
    color:var(--text-muted);

    line-height:1.7;
}

.dropzone input[type="file"]{
    position:absolute;

    inset:0;

    opacity:0;

    cursor:pointer;
}


/* =============================================================================
   35. IMAGE UPLOAD COMPONENTS
============================================================================= */

.image-upload{
    display:flex;
    flex-direction:column;

    gap:1.5rem;
}

.image-preview-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(140px,1fr));

    gap:1rem;
}

.image-preview{
    position:relative;

    overflow:hidden;

    aspect-ratio:1;

    border-radius:var(--radius-lg);

    border:1px solid var(--border-color);

    background:#f8fafc;
}

.image-preview img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.image-remove{
    position:absolute;

    top:.5rem;
    right:.5rem;

    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.65);

    color:#ffffff;

    cursor:pointer;
}


/* =============================================================================
   36. SIGNATURE FIELDS
============================================================================= */

.signature-field{
    width:100%;

    min-height:220px;

    position:relative;

    overflow:hidden;

    border:2px dashed var(--border-color);
    border-radius:var(--radius-lg);

    background:#ffffff;
}

.signature-canvas{
    width:100%;
    height:220px;

    display:block;

    cursor:crosshair;
}

.signature-actions{
    display:flex;
    justify-content:flex-end;

    gap:1rem;

    padding:1rem;

    border-top:1px solid var(--border-color);
}


/* =============================================================================
   37. RICH TEXT EDITOR LAYOUT
============================================================================= */

.editor{
    display:flex;
    flex-direction:column;

    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);

    overflow:hidden;
}

.editor-toolbar{
    display:flex;
    align-items:center;

    gap:.5rem;

    flex-wrap:wrap;

    padding:.75rem;

    background:#f8fafc;

    border-bottom:1px solid var(--border-color);
}

.editor-content{
    min-height:320px;

    padding:1.5rem;

    background:#ffffff;

    overflow:auto;
}

.editor-footer{
    padding:.75rem 1rem;

    border-top:1px solid var(--border-color);

    background:#f8fafc;
}


/* =============================================================================
   38. FILTER FORMS
============================================================================= */

.filter-form{
    display:flex;
    flex-wrap:wrap;

    gap:1rem;

    align-items:flex-end;
}

.filter-group{
    display:flex;
    flex-direction:column;

    gap:.5rem;

    min-width:180px;

    flex:1;
}

.filter-actions{
    display:flex;

    gap:.75rem;

    align-items:center;
}


/* =============================================================================
   39. SEARCH PANELS
============================================================================= */

.search-panel{
    display:flex;
    flex-direction:column;

    gap:1.5rem;

    padding:1.5rem;

    background:#ffffff;

    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.search-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;
}

.search-panel-body{
    display:flex;
    flex-direction:column;

    gap:1rem;
}

.search-panel-footer{
    display:flex;
    justify-content:flex-end;

    gap:1rem;
}


/* =============================================================================
   40. FORM ACCESSIBILITY HELPERS
============================================================================= */

.sr-only{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;
}

.focus-ring:focus-visible{
    outline:3px solid rgba(13,110,253,.35);

    outline-offset:2px;
}

.required-indicator{
    color:var(--danger);

    font-weight:700;
}

.aria-live{
    min-height:1.5rem;
}


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

@media (max-width:992px){

    .filter-form{
        flex-direction:column;
        align-items:stretch;
    }

    .filter-group{
        width:100%;
    }

}

@media (max-width:768px){

    .editor-toolbar{
        justify-content:flex-start;
    }

    .signature-actions,
    .filter-actions,
    .search-panel-header,
    .search-panel-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .image-preview-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =============================================================================

END OF PART 2.2

NEXT:

ST-004 — Part 2.3

(Form Modals,
 Sticky Form Actions,
 Mobile Form Layouts,
 Enterprise Workflow Forms,
 Financial & Payment Forms,
 Authentication Forms,
 Final Utilities,
 Completion)

============================================================================= */

/* =============================================================================
   41. FORM MODALS
============================================================================= */

.form-modal{
    display:flex;
    flex-direction:column;

    width:100%;

    max-width:720px;

    background:#ffffff;

    border-radius:var(--radius-xl);

    overflow:hidden;
}

.form-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;

    padding:1.5rem 2rem;

    border-bottom:1px solid var(--border-color);
}

.form-modal-title{
    margin:0;

    font-size:1.35rem;
    font-weight:700;

    color:var(--text-color);
}

.form-modal-body{
    display:flex;
    flex-direction:column;

    gap:1.5rem;

    padding:2rem;

    overflow-y:auto;
}

.form-modal-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:1rem;

    padding:1.5rem 2rem;

    border-top:1px solid var(--border-color);

    background:#f8fafc;
}


/* =============================================================================
   42. STICKY FORM ACTIONS
============================================================================= */

.form-sticky-actions{
    position:sticky;

    bottom:0;

    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:1rem;

    padding:1rem 1.5rem;

    background:#ffffff;

    border-top:1px solid var(--border-color);

    z-index:100;
}

.form-sticky-actions-shadow{
    box-shadow:0 -.35rem 1rem rgba(15,23,42,.08);
}


/* =============================================================================
   43. MOBILE FORM LAYOUTS
============================================================================= */

.mobile-form{
    width:100%;
}

.mobile-form-group{
    display:flex;
    flex-direction:column;

    gap:1rem;
}

.mobile-form-stack{
    display:flex;
    flex-direction:column;

    gap:1.5rem;
}

.mobile-form-full > *{
    width:100%;
}


/* =============================================================================
   44. ENTERPRISE WORKFLOW FORMS
============================================================================= */

.workflow-form{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        320px;

    gap:2rem;
}

.workflow-content{
    display:flex;
    flex-direction:column;

    gap:2rem;
}

.workflow-sidebar{
    display:flex;
    flex-direction:column;

    gap:1.5rem;
}

.workflow-summary{
    padding:1.5rem;

    background:#f8fafc;

    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.workflow-status{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;
}


/* =============================================================================
   45. FINANCIAL & PAYMENT FORMS
============================================================================= */

.payment-form{
    display:flex;
    flex-direction:column;

    gap:2rem;
}

.payment-card{
    padding:1.5rem;

    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);

    background:#ffffff;
}

.payment-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:1.5rem;
}

.amount-input{
    position:relative;
}

.amount-input .form-control{
    padding-left:4rem;

    text-align:right;

    font-weight:700;

    font-size:1.1rem;
}

.amount-prefix{
    position:absolute;

    top:50%;
    left:1rem;

    transform:translateY(-50%);

    font-weight:700;

    color:var(--text-muted);
}


/* =============================================================================
   46. AUTHENTICATION FORMS
============================================================================= */

.auth-form{
    width:100%;

    max-width:480px;

    margin-inline:auto;
}

.auth-form-header{
    text-align:center;

    margin-bottom:2rem;
}

.auth-form-title{
    margin:0 0 .5rem;

    font-size:2rem;
    font-weight:800;
}

.auth-form-subtitle{
    margin:0;

    color:var(--text-muted);

    line-height:1.7;
}

.auth-form-body{
    display:flex;
    flex-direction:column;

    gap:1.5rem;
}

.auth-form-footer{
    margin-top:2rem;

    text-align:center;

    color:var(--text-muted);
}


/* =============================================================================
   47. FINAL FORM UTILITIES
============================================================================= */

.form-elevated{
    box-shadow:
        0 .5rem 1.5rem rgba(15,23,42,.08);
}

.form-rounded{
    border-radius:var(--radius-xl);
}

.form-bordered{
    border:1px solid var(--border-color);
}

.form-muted{
    background:#f8fafc;
}

.form-scrollable{
    overflow:auto;
}

.form-full-height{
    height:100%;
}

.form-fit-content{
    width:fit-content;
}

.form-transition{
    transition:all var(--transition);
}


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

@media (max-width:992px){

    .workflow-form{
        grid-template-columns:1fr;
    }

}

@media (max-width:768px){

    .form-modal-header,
    .form-modal-footer,
    .form-sticky-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .form-modal-body,
    .form-modal-header,
    .form-modal-footer{
        padding:1.5rem;
    }

    .payment-grid{
        grid-template-columns:1fr;
    }

    .auth-form{
        max-width:100%;
    }

}


/* =============================================================================

END OF ST-004

FILE:
static/css/forms.css

STATUS:
COMPLETE

VERSION:
1.0.0

============================================================================= */