/* ============================================================
   AuditTracker — forms.css
   Modern form UI system
   ============================================================ */


/* ─────────────────────────────────────────
   FORM CARD
───────────────────────────────────────── */

.form-card{
background:white;
border-radius:var(--radius-xl);
box-shadow:var(--shadow-card);
border:1px solid rgba(0,0,0,0.05);
padding:1.75rem;
transition:box-shadow .25s ease,transform .2s ease;
}

.form-card:hover{
box-shadow:var(--shadow-lg);
}


/* ─────────────────────────────────────────
   FORM GROUP
───────────────────────────────────────── */

.form-group{
margin-bottom:1.1rem;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
}

@media(max-width:640px){
.form-row{
grid-template-columns:1fr;
}
}

.form-actions{
display:flex;
gap:.75rem;
margin-top:1rem;
padding-top:.8rem;
border-top:1px solid var(--slate-100);
}



/* ─────────────────────────────────────────
   LABELS
───────────────────────────────────────── */

.form-label{
display:block;
font-size:.8rem;
font-weight:600;
color:var(--slate-700);
margin-bottom:.35rem;
}

.form-required{
color:#ef4444;
margin-left:2px;
}



/* ─────────────────────────────────────────
   INPUTS
───────────────────────────────────────── */

.form-input{
width:100%;
height:40px;
padding:0 .75rem;
background:white;
border:1.5px solid var(--slate-200);
border-radius:var(--radius-md);
font-size:.85rem;
color:var(--slate-800);
outline:none;
transition:border-color .15s ease,box-shadow .15s ease;
}

.form-input::placeholder{
color:var(--slate-400);
}

.form-input:hover{
border-color:var(--slate-300);
}

.form-input:focus{
border-color:var(--indigo-500);
box-shadow:0 0 0 3px rgba(99,102,241,.1);
}

.form-input:disabled{
background:var(--slate-50);
color:var(--slate-400);
cursor:not-allowed;
}


/* ─────────────────────────────────────────
   TEXTAREA
───────────────────────────────────────── */

.form-textarea{
width:100%;
min-height:90px;
padding:.6rem .75rem;
border:1.5px solid var(--slate-200);
border-radius:var(--radius-md);
font-size:.85rem;
resize:vertical;
outline:none;
transition:border-color .15s ease,box-shadow .15s ease;
}

.form-textarea:focus{
border-color:var(--indigo-500);
box-shadow:0 0 0 3px rgba(99,102,241,.1);
}



/* ─────────────────────────────────────────
   SELECT
───────────────────────────────────────── */

.form-select{
width:100%;
height:40px;
padding:0 2rem 0 .75rem;
border:1.5px solid var(--slate-200);
border-radius:var(--radius-md);
background:white;
font-size:.85rem;
cursor:pointer;
outline:none;
transition:border-color .15s ease,box-shadow .15s ease;
}

.form-select:hover{
border-color:var(--slate-300);
}

.form-select:focus{
border-color:var(--indigo-500);
box-shadow:0 0 0 3px rgba(99,102,241,.1);
}



/* ─────────────────────────────────────────
   VALIDATION
───────────────────────────────────────── */

.field-error{
font-size:.72rem;
color:#ef4444;
margin-top:.3rem;
}

.field-hint{
font-size:.72rem;
color:var(--slate-400);
margin-top:.3rem;
}



/* ─────────────────────────────────────────
   FILE UPLOAD
───────────────────────────────────────── */

.upload-zone{
border:2px dashed var(--slate-200);
border-radius:var(--radius-xl);
padding:2.2rem 1.4rem;
text-align:center;
background:var(--slate-50);
cursor:pointer;
transition:border-color .2s ease,background .2s ease;
position:relative;
}

.upload-zone:hover{
border-color:var(--indigo-400);
background:var(--indigo-50);
}

.upload-zone.drag-over{
border-color:var(--indigo-500);
background:var(--indigo-50);
}

.upload-zone input[type=file]{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}

.upload-icon{
width:44px;
height:44px;
border-radius:12px;
background:white;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto .7rem;
border:1px solid var(--slate-200);
color:var(--indigo-500);
}

.upload-title{
font-size:.9rem;
font-weight:600;
color:var(--slate-700);
}

.upload-subtitle{
font-size:.75rem;
color:var(--slate-400);
}

/* ─────────────────────────────────────────
   LOGIN PAGE
───────────────────────────────────────── */

.login-shell{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#f4f6fb;
padding:2rem;
}

.login-panel{
width:100%;
max-width:980px;

display:grid;
grid-template-columns:1fr 1fr;

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

/* MOBILE */

@media(max-width:720px){

.login-panel{
grid-template-columns:1fr;
}

.login-left{
display:none;
}

}


/* LEFT SIDE */

.login-left{

background:#18181f;

padding:3rem;

display:flex;

flex-direction:column;

justify-content:space-between;

}


.login-logo{
display:flex;
align-items:center;
gap:.7rem;
}

.login-logo-icon{
width:38px;
height:38px;
background:var(--indigo-600);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
}

.login-logo-text{
color:white;
font-weight:800;
font-size:1.05rem;
}


.login-headline{
margin-top:3rem;
}

.login-headline h2{
color:white;
font-size:1.7rem;
font-weight:800;
line-height:1.3;
margin-bottom:.8rem;
}

.login-headline p{
font-size:.9rem;
color:#9ca3af;
line-height:1.5;
}


/* RIGHT SIDE */

.login-right{

padding:3rem;

display:flex;

flex-direction:column;

justify-content:center;

}


.login-right-head{
margin-bottom:1.8rem;
}

.login-right-head h1{

font-size:1.6rem;

font-weight:800;

color:var(--slate-800);

margin-bottom:.3rem;
}

.login-right-head p{

font-size:.85rem;

color:var(--slate-500);

}


/* INPUTS */

.login-form-group{
margin-bottom:1rem;
}

.login-input{

width:100%;

height:44px;

border:1.5px solid var(--slate-200);

border-radius:8px;

padding:0 .9rem;

font-size:.9rem;

background:white;

transition:border-color .15s ease, box-shadow .15s ease;

}

.login-input::placeholder{
color:var(--slate-400);
}

.login-input:focus{

outline:none;

border-color:var(--indigo-500);

box-shadow:0 0 0 3px rgba(99,102,241,.15);

}


/* BUTTON */

.login-submit{

width:100%;

height:46px;

margin-top:.4rem;

background:var(--indigo-600);

color:white;

border:none;

border-radius:8px;

font-size:.9rem;

font-weight:700;

cursor:pointer;

transition:all .15s ease;

}

.login-submit:hover{

background:var(--indigo-700);

transform:translateY(-1px);

}


/* FOOTER */

.login-footer{

text-align:center;

font-size:.72rem;

color:var(--slate-400);

margin-top:1.4rem;

}