/* ======================================================
   STAFF UI - VILA FUTSAL
====================================================== */

/* ===============================
   RESET BASE
=============================== */

html,
body{
    height:100%;
    min-height:100%;
}

*{
    box-sizing:border-box;
}

body{
    min-height:100vh;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

input,
select,
textarea,
button{
    font-family:inherit;
}

/* ===============================
   BOTÕES
=============================== */

.vf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 20px;
    border-radius:16px;
    border:1px solid transparent;
    font-size:0.95rem;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:all .18s ease;
    color:#fff;
}

.vf-btn:hover{
    transform:translateY(-1px);
}

.vf-btn-primary{
    background:linear-gradient(135deg, #5da8ff 0%, #3b82f6 100%);
    box-shadow:0 10px 24px rgba(59,130,246,.25);
}

.vf-btn-secondary{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#eaf2ff;
}

.vf-btn-secondary:hover{
    background:rgba(88,166,255,.15);
}

.vf-btn-success{
    background:linear-gradient(135deg, #45cc92 0%, #22b573 100%);
}

.vf-btn-danger{
    background:linear-gradient(135deg, #ff6b6b 0%, #e53935 100%);
}

.vf-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

@media (max-width:640px){
    .vf-actions{
        display:block;
    }

    .vf-actions .vf-btn{
        display:flex;
        width:100%;
        margin-bottom:8px;
    }

    .vf-actions .vf-btn:last-child{
        margin-bottom:0;
    }
}

/* ===============================
   INPUTS / FORM
=============================== */

.vf-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.vf-label{
    font-size:.8rem;
    font-weight:700;
    color:#b9c4d8;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.vf-input,
.vf-select,
.vf-textarea{
    width:100%;
    min-height:48px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(15,24,38,.6);
    color:#fff;
    font-size:16px;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
}

.vf-textarea{
    min-height:80px;
    resize:vertical;
}

.vf-input:focus,
.vf-select:focus,
.vf-textarea:focus{
    border-color:rgba(88,166,255,.5);
    box-shadow:0 0 0 3px rgba(88,166,255,.15);
}

/* readonly */

.vf-readonly{
    min-height:48px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(15,24,38,.5);
    display:flex;
    align-items:center;
}

/* ===============================
   CARDS
=============================== */

.vf-card{
    position:relative;
    overflow:hidden;
    background:rgba(73, 92, 124, .82);
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    padding:20px;
    margin-bottom:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.vf-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(88,166,255,.95),
        rgba(59,130,246,.95),
        transparent
    );
}

.vf-card-body{
    position:relative;
    z-index:1;
}

.vf-card-title{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:12px;
}

/* ===============================
   GRID
=============================== */

.vf-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px 16px;
}

.vf-row > *{
    flex:1 1 calc(50% - 16px);
}

.vf-row-3{
    display:flex;
    flex-wrap:wrap;
    gap:12px 16px;
}

.vf-row-3 > *{
    flex:1 1 calc(33.333% - 16px);
}

@media (max-width:700px){
    .vf-row > *,
    .vf-row-3 > *{
        flex:1 1 100%;
    }
}

/* ===============================
   LISTAS (tipo convocados)
=============================== */

.vf-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.vf-list-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(15,24,38,.6);
    border:1px solid rgba(255,255,255,.08);
}

/* ===============================
   TEXTO AUXILIAR
=============================== */

.vf-muted{
    color:#b9c4d8;
    font-size:.9rem;
}

/* ===============================
   FILTROS INLINE
=============================== */

.vf-filter-inline{
    display:flex;
    align-items:flex-end;
    gap:12px 16px;
    flex-wrap:wrap;
}

.vf-filter-inline > .vf-field{
    flex:1 1 240px;
}

.vf-filter-inline-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.vf-filter-inline-actions .vf-btn{
    margin:0;
}

@media (max-width:700px){
    .vf-filter-inline{
        display:block;
    }

    .vf-filter-inline > .vf-field{
        width:100%;
        margin-bottom:12px;
    }

    .vf-filter-inline > .vf-field:last-child{
        margin-bottom:0;
    }

    .vf-filter-inline-actions{
        width:100%;
        margin-top:12px;
    }

    .vf-filter-inline-actions .vf-btn{
        flex:1 1 100%;
    }
}

/* ===============================
   HEADER - BOTÃO INDICADORES
=============================== */

.mf-header-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.mf-btn-kpis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border-radius:14px;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    line-height:1;
    color:#ffffff !important;
    background:linear-gradient(135deg, #ff9f43 0%, #ff7a18 100%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 24px rgba(255,122,24,.28);
    transition:all .18s ease;
}

.mf-btn-kpis:hover{
    transform:translateY(-1px);
    color:#ffffff !important;
    text-decoration:none;
    filter:brightness(1.04);
    box-shadow:0 14px 28px rgba(255,122,24,.36);
}

.mf-btn-kpis:visited,
.mf-btn-kpis:focus,
.mf-btn-kpis:active{
    color:#ffffff !important;
    text-decoration:none;
}

@media (max-width:768px){
    .mf-header-right{
        width:100%;
        justify-content:flex-start;
    }

    .mf-btn-kpis{
        min-width:120px;
    }
}

.subcards-row{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
}

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