/* ==========================================================
   Teamlead — Notes Create / Edit Form
   File: resources/css/teamlead/notes-form.css
   ========================================================== */

:root{
    --nf-primary:#3b82f6;
    --nf-soft:#e5edff;

    --nf-text:#0f172a;
    --nf-muted:#6b7280;
    --nf-border:#e5e7eb;

    --nf-shadow-soft:0 6px 16px rgba(15,23,42,.10);
    --nf-shadow-hover:0 12px 28px rgba(15,23,42,.16);

    --nf-radius-lg:18px;
    --nf-radius-pill:999px;
}

/* ----------------------------------------------------------
   FADE ENTRY
---------------------------------------------------------- */

@keyframes nfFade{
    from{opacity:0; transform:translateY(6px);}
    to  {opacity:1; transform:translateY(0);}
}

.notes-form-page{
    max-width:780px;
    margin:0 auto;
    animation:nfFade .22s ease-out;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.notes-form-header{
    margin-bottom:.75rem;
}

.notes-form-header h3{
    margin:0;
    font-weight:600;
    color:var(--nf-text);
}

.notes-form-sub{
    margin:0;
    font-size:.82rem;
    color:var(--nf-muted);
}

/* ----------------------------------------------------------
   FORM CARD
---------------------------------------------------------- */

.notes-form-card{
    background:#ffffff;
    border:1px solid var(--nf-border);
    border-radius:var(--nf-radius-lg);
    box-shadow:var(--nf-shadow-soft);
    padding:1.25rem 1.3rem;
}

/* ----------------------------------------------------------
   INPUTS
---------------------------------------------------------- */

.notes-form-card label{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--nf-muted);
    margin-bottom:.25rem;
}

.notes-form-card .form-control{
    border-radius:10px;
    border:1px solid var(--nf-border);
    height:38px;
    padding:.45rem .6rem;
    font-size:.82rem;
}

.notes-form-card textarea.form-control{
    height:auto;
}

.notes-form-card .form-control:focus{
    border-color:var(--nf-primary);
    box-shadow:0 0 0 2px rgba(59,130,246,.15);
}

/* ----------------------------------------------------------
   ACTIONS
---------------------------------------------------------- */

.notes-form-actions{
    display:flex;
    gap:.5rem;
    margin-top:1rem;
}

/* buttons */

.notes-form-actions .btn{
    border-radius:var(--nf-radius-pill);
    padding:.45rem 1.3rem;
    font-size:.82rem;
    box-shadow:var(--nf-shadow-soft);
    display:inline-flex;
    align-items:center;
    gap:.35rem;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        color .15s ease;
}

.notes-form-actions .btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--nf-shadow-hover);
}

/* primary */

.notes-form-page .btn-primary{
    background:linear-gradient(135deg,#3b82f6,#6366f1);
    border-color:transparent;
    color:#ffffff;
}

/* cancel */

.notes-form-page .btn-outline-secondary{
    background:#ffffff;
    border-color:#cbd5e1;
    color:#334155;
}

.notes-form-page .btn-outline-secondary:hover{
    background:var(--nf-soft);
    color:#111827;
}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:768px){

    .notes-form-actions{
        flex-direction:column;
    }

    .notes-form-actions .btn{
        width:100%;
        justify-content:center;
    }

}