/*
Theme Name: Pikki
Theme URI: https://pikki.pt
Author: Consulta Digital
Version: 1.0
Text Domain: pikki
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =====================================================
   ROOT
===================================================== */

:root{

    --cor-primaria:#2563EB;
    --cor-primaria-hover:#1D4ED8;

    --cor-sucesso:#10B981;
    --cor-aviso:#F59E0B;
    --cor-erro:#EF4444;

    --cor-texto:#0F172A;
    --cor-texto-secundario:#64748B;

    --cor-card:#FFFFFF;

    --cor-borda:#E2E8F0;

    --radius:24px;

    --shadow-sm:0 4px 12px rgba(15,23,42,.05);
    --shadow-md:0 8px 25px rgba(15,23,42,.08);
    --shadow-lg:0 20px 40px rgba(15,23,42,.12);
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#F8FAFC;

    color:#0F172A;

    min-height:100vh;

    line-height:1.5;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

/* =====================================================
   PAGE
===================================================== */

.pikki-page{

    width:min(1400px,95%);

    margin:auto;

    padding:30px 0 60px;
}

/* =====================================================
   HEADER
===================================================== */

.pikki-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    flex-wrap:wrap;
}

.pikki-header h1{

    font-size:42px;

    font-weight:800;

    color:#0F172A;

    letter-spacing:-1px;
}

.pikki-header p{

    color:#64748B;

    font-size:16px;
}

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

.pikki-card{

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:24px;

    box-shadow:var(--shadow-md);

    overflow:hidden;
}

/* =====================================================
   TABLES
===================================================== */

.pikki-table{

    width:100%;

    border-collapse:collapse;
}

.pikki-table thead{

    background:rgba(255,255,255,.04);
}

.pikki-table th{

    text-align:center;

    padding:18px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#94A3B8;

    vertical-align:middle;
}

.pikki-table td{

    text-align:center;

    padding:18px 16px;

    font-size:14px;

    vertical-align:middle;

    border:none;
}

.pikki-table tbody tr{

    transition:.25s ease;
}

.pikki-table tbody tr:hover{

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

    transform:translateY(-2px);

    box-shadow:
    0 10px 30px rgba(15,23,42,.05);
}

.empresa-row{

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

    backdrop-filter:blur(20px);

    border-bottom:
    1px solid #E2E8F0;
}

.empresa-row:first-child{

    border-top:
    1px solid #E2E8F0;
}

.empresa-card{

    display:flex;

    align-items:center;

    gap:16px;
}

.empresa-nome{

    font-size:26px;

    font-weight:700;

    color:#0F172A;
}

.empresa-responsavel{

    font-size:14px;

    color:#64748B;

    margin-top:4px;
}

.logo-placeholder{

    width:54px;

    height:54px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    background:
    linear-gradient(
        135deg,
        #DBEAFE,
        #BFDBFE
    );

    color:#1D4ED8;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn{

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

    height:46px;

    padding:0 24px;

    border:none;

    border-radius:25px;

    cursor:pointer;

    font-size:14px;
    font-weight:500;

    letter-spacing:.2px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    text-decoration:none;

    position:relative;
}

/* =========================
   BOTÃO PRINCIPAL
========================= */

.btn-primary{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #1F2937,
        #334155
    );

    box-shadow:
        0 18px 40px rgba(15,23,42,.18),
        0 8px 20px rgba(15,23,42,.12);
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 25px 50px rgba(15,23,42,.25),
        0 12px 30px rgba(15,23,42,.18);
}

/* =========================
   BOTÃO SECUNDÁRIO
========================= */

.btn-secondary{

    color:#334155;

    background:#FFFFFF;

    border:1px solid #DCE3EC;

    box-shadow:
        0 10px 25px rgba(15,23,42,.06);
}

.btn-secondary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 35px rgba(15,23,42,.10);
}

/* =========================
   SUCESSO
========================= */

.btn-success{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #556B2F,
        #6B8E23
    );

    box-shadow:
        0 18px 40px rgba(85,107,47,.18);
}

/* =========================
   WARNING
========================= */

.btn-warning{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #C47B2A,
        #E0A458
    );
}

/* =========================
   DANGER
========================= */

.btn-danger{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #DC2626,
        #EF4444
    );
}

/* =====================================================
   BADGES
===================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}

.badge-success{

    background:rgba(16,185,129,.15);

    color:#047857;
}

.badge-warning{

    background:rgba(245,158,11,.15);

    color:#B45309;
}

.badge-danger{

    background:rgba(239,68,68,.15);

    color:#B91C1C;
}

.badge-secondary{

    background:rgba(148,163,184,.15);

    color:#475569;
}

.badge-info{

    background:rgba(59,130,246,.15);

    color:#1D4ED8;
}

/* =====================================================
   FORMS
===================================================== */

.form-row{

    margin-bottom:18px;
}

.form-row label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#334155;
}

.form-row input,
.form-row select,
.form-row textarea{

    width:100%;

    padding:14px 16px;

    border-radius:14px;

    border:1px solid #CBD5E1;

    background:#FFFFFF;

    color:#0F172A;

    font-size:14px;
}

.form-row input::placeholder,
.form-row textarea::placeholder{

    color:#64748B;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{

    outline:none;

    border-color:var(--cor-primaria);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.form-row textarea{

    resize:vertical;

    min-height:90px;
}

/* =====================================================
   MODALS
===================================================== */

.modal{

    display:none;

    align-items:center;

    justify-content:center;

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.75);

    backdrop-filter:blur(8px);

    z-index:99999;

    overflow:auto;

    padding:30px;
}

.modal-content{

    width:100%;
    max-width:1000px;

    max-height:85vh;

overflow:hidden;

background:#FFFFFF;

border-radius:32px;

padding:40px 40px 30px;

    box-shadow:
        0 30px 80px rgba(15,23,42,.18);

    position:relative;

    margin:auto;

    scrollbar-width:thin;
}

.modal-content h2{

    margin-bottom:25px;

    font-size:28px;

    font-weight:700;
}

.modal{

    display:none;

    position:fixed;

    inset:0;

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

    padding:40px;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(8px);

    z-index:9999;
}

.modal-content form{

    max-height:calc(85vh - 120px);

    overflow-y:auto;

    padding-right:12px;
}

.modal-content form::-webkit-scrollbar{

    width:8px;
}

.modal-content form::-webkit-scrollbar-track{

    background:transparent;
}

.modal-content form::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;
}

/* =====================================================
   MODAL EDITAR SERVIÇO
===================================================== */

#modalEditarServico .modal-content{

    width:min(1200px,95vw);

    max-width:1200px;
}

#modalEditarServico form{

    display:flex;

    flex-direction:column;

    gap:30px;
}

#modalEditarServico .form-grid{

    display:grid;

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

    gap:20px;
}

#modalEditarServico .form-group{

    display:flex;

    flex-direction:column;

    gap:8px;
}

#modalEditarServico .form-group-full{

    grid-column:1 / -1;
}

#modalEditarServico label{

    font-size:14px;

    font-weight:600;

    color:#334155;
}

#modalEditarServico input,
#modalEditarServico select,
#modalEditarServico textarea{

    width:100%;

    min-height:48px;

    padding:12px 14px;

    border:1px solid #CBD5E1;

    border-radius:12px;

    background:#FFF;

    font-size:14px;
}

#modalEditarServico textarea{

    min-height:140px;

    resize:vertical;
}

#modalEditarServico .gps-selector{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}

#modalEditarServico .gps-info{

    display:flex;

    gap:30px;

    color:#64748B;

    font-size:14px;
}

#modalEditarServico .gps-preview{

    width:100%;

    height:220px;

    border:1px dashed #CBD5E1;

    border-radius:20px;

    background:#F8FAFC;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#94A3B8;

    margin-top:15px;
}

#modalEditarServico .modal-footer{

    display:flex;

    justify-content:flex-end;

    padding-top:25px;

    border-top:1px solid #E2E8F0;
}

@media(max-width:1024px){

    #modalEditarServico .form-grid{

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

}

@media(max-width:768px){

    #modalEditarServico .form-grid{

        grid-template-columns:1fr;
    }

}
/* =====================================================
   ACTIONS
===================================================== */

.acoes{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

/* =====================================================
   EQUIPA SELECTOR
===================================================== */

.equipa-selector{

    grid-column:1 / -1;

    width:100%;
}

.equipa-item{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 24px;

    border:1px solid #E2E8F0;

    border-radius:20px;

    background:#F8FAFC;

    transition:.25s ease;

    cursor:pointer;
}

.equipa-item:hover{

    border-color:#CBD5E1;

    transform:translateY(-1px);
}

.equipa-nome{

    font-size:16px;

    font-weight:700;

    color:#0F172A;
}

.equipa-meta{

    margin-top:4px;

    font-size:13px;

    color:#64748B;
}

.equipa-switch{

    position:relative;
}

.equipa-switch input{

    display:none;
}

.equipa-switch span{

    display:block;

    width:52px;

    height:30px;

    border-radius:999px;

    background:#CBD5E1;

    position:relative;

    transition:.25s;
}

.equipa-switch span:before{

    content:'';

    position:absolute;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#FFF;

    left:3px;

    top:3px;

    transition:.25s;
}

.equipa-switch input:checked + span{

    background:#2563EB;
}

.equipa-switch input:checked + span:before{

    left:25px;
}

.equipa-acoes{

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid #E2E8F0;
}

.equipa-info{

    display:flex;

    flex-direction:column;

    gap:6px;
}

.equipa-nome{

    font-size:18px;

    font-weight:700;
}

.equipa-meta{

    font-size:14px;

    color:#64748B;
}

/* =====================================================
   AVATARS / LOGOS
===================================================== */

.avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;
}

.logo-empresa{

    width:50px;

    height:50px;

    object-fit:contain;

    background:#fff;

    border-radius:12px;

    padding:5px;

    border:1px solid #E2E8F0;
}

/* =====================================================
   ESTADOS
===================================================== */

.estado-ativo{

    color:#10B981;

    font-weight:700;
}

.estado-inativo{

    color:#EF4444;

    font-weight:700;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .pikki-page{

        width:95%;

        padding:15px 0 40px;
    }

    .pikki-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .pikki-header h1{

        font-size:28px;
    }

    .btn{

        width:100%;
    }

    .acoes{

        flex-direction:column;
    }

    .acoes .btn{

        width:100%;
    }

    .modal{

        padding:10px;
    }

    .modal-content{

        padding:20px;

        border-radius:18px;
    }

    .pikki-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;
    }

    .pikki-filtros form{

    flex-direction:column;

    align-items:stretch;
}

.pikki-filtros input,
.pikki-filtros select{

    width:100%;

    min-width:unset;
}

}

.modal-close{

    position:absolute;

    top:20px;

    right:20px;

    width:40px;

    height:40px;

    border:none;

    border-radius:999px;

    background:#F1F5F9;

    color:#334155;

    font-size:22px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;
}


.modal-section-title{

    margin-top:25px;

    margin-bottom:15px;

    font-size:18px;

    font-weight:700;

    color:#0F172A;
}


.logo-preview{

    width:140px;

    height:140px;

    border-radius:20px;

    border:2px dashed #CBD5E1;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F8FAFC;

    overflow:hidden;
}

@media(max-width:1024px){

    .empresa-info-grid,
    .responsavel-grid{

        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:768px){

    .empresa-topo{

        grid-template-columns:1fr;
    }

    .empresa-info-grid,
    .responsavel-grid,
    .morada-grid{

        grid-template-columns:1fr;
    }

    .logo-preview{

        width:120px;

        height:120px;
    }

}

/* =====================================================
   EMPRESAS
===================================================== */

.empresa-topo{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:24px;

    margin-bottom:25px;
}

.empresa-info-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:12px;
}

.responsavel-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:12px;

    margin-bottom:20px;
}

.morada-grid{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;
}

.empresa-logo-coluna{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.modal-section-title{

    margin-top:10px;

    margin-bottom:10px;

    font-size:15px;

    font-weight:700;

    color:#0F172A;

    border-bottom:1px solid #E2E8F0;

    padding-bottom:8px;
}

.form-row{

    margin-bottom:10px;
}

.form-row label{

    margin-bottom:5px;

    font-size:12px;

    font-weight:600;

    color:#334155;
}

.form-row input,
.form-row select,
.form-row textarea{

    padding:10px 12px;

    font-size:14px;
}

.form-grid{

    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:20px;
}

.form-grid-full{

    grid-column:1 / -1;
}

.col-1{
    grid-column:span 1;
}

.col-2{

    grid-column:span 2;
}

.col-3{

    grid-column:span 3;
}

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

.pikki-filtros{

    margin-bottom:24px;
}

.pikki-filtros form{

    display:flex;

    gap:12px;

    align-items:center;

    flex-wrap:wrap;

    padding:18px;

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:20px;

    box-shadow:
        0 4px 12px rgba(15,23,42,.04);
}

.pikki-filtros input{

    flex:1;

    min-width:320px;

    height:48px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;

    transition:.2s;
}

.pikki-filtros select{

    min-width:220px;

    height:48px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;

    cursor:pointer;

    transition:.2s;
}

.pikki-filtros input:focus,
.pikki-filtros select:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}

.pikki-filtros .btn{

    height:48px;

    min-width:140px;

    border-radius:14px;
}

/* =====================================================
   CLIENTE IDENTIFICADO
===================================================== */

.cliente-card{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:20px;
}

.cliente-card-header{

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;

    margin-bottom:10px;
}

.cliente-card-body{

    display:flex;

    flex-direction:column;

    gap:6px;
}

#cliente_nome{

    font-size:18px;

    font-weight:700;

    color:#0F172A;
}

.cliente-box{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:24px;

    padding:20px;

    margin-bottom:20px;
}

.cliente-box-title{

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;

    margin-bottom:15px;
}

.cliente-box-grid{

    display:grid;

    grid-template-columns:1fr 160px;

    gap:16px;

    align-items:end;
}

.col-4{

    grid-column:span 4;
}

/* =====================================================
   LOGIN
===================================================== */

.login-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;
}

.login-card{

    width:100%;

    max-width:480px;

    background:#FFFFFF;

    border-radius:32px;

    padding:40px;

    box-shadow:
        0 30px 80px rgba(15,23,42,.12);
}

.login-logo{

    font-size:34px;

    font-weight:800;

    letter-spacing:.08em;

    margin-bottom:15px;
}

.login-card h1{

    margin-bottom:10px;
}

.login-card p{

    color:#64748B;

    margin-bottom:25px;
}

.login-erro{

    background:#FEF2F2;

    color:#DC2626;

    padding:14px;

    border-radius:14px;

    margin-bottom:20px;
}

/* =====================================================
   DASHBOARD
===================================================== */

.dashboard-welcome{

    margin-bottom:12px;

    color:#64748B;

    font-size:14px;

    font-weight:500;
}

.dashboard-welcome strong{

    color:#0F172A;

    font-weight:700;
}

.dashboard-pendencias{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;
}

.dashboard-alerta{

    padding:14px 18px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;
}

.dashboard-alerta.warning{

    background:#FEF3C7;

    color:#92400E;
}

.dashboard-alerta.danger{

    background:#FEE2E2;

    color:#991B1B;
}

.linha-servico{

    cursor:pointer;

    transition:.2s ease;
}

.linha-servico:hover{

    background:#F8FAFC;
}

.dashboard-card-footer{

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid #E2E8F0;

    text-align:right;
}

.dashboard-link{

    color:#2563EB;

    font-size:14px;

    font-weight:600;

    text-decoration:none;
}

.dashboard-link:hover{

    text-decoration:underline;
}

.dashboard-alertas-operacao{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:20px 0 25px;
}

.alerta-operacao{

    display:inline-flex;

    align-items:center;

    padding:10px 16px;

    border-radius:999px;

    background:#ECFDF5;

    color:#047857;

    text-decoration:none;

    font-size:14px;

    font-weight:600;
}

.alerta-operacao:hover{

    transform:translateY(-1px);
}

.alerta-warning{

    background:#FEF3C7;

    color:#92400E;
}

/* =====================================================
   KPI
===================================================== */

.dashboard-kpis{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top:30px;

    margin-bottom:30px;
}

.kpi-card{

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:20px;

    min-height:130px;

    box-shadow:
        0 8px 25px rgba(15,23,42,.04);

    transition:.25s ease;
}

.kpi-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 25px 55px rgba(15,23,42,.10);
}


.kpi-label{

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#64748B;

    margin-bottom:14px;
}

.kpi-value{

    font-size:44px;

    font-weight:800;

    line-height:1;

    color:#0F172A;
}

/* =====================================================
   ATALHOS
===================================================== */

.dashboard-acoes{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:18px;

    margin-bottom:30px;
}

.dashboard-atalho{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    min-height:115px;

    padding:22px;

    text-decoration:none;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FAFC
        );

    border:1px solid #E2E8F0;

    color:#0F172A;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.dashboard-atalho:hover{

    transform:translateY(-5px);

    border-color:#CBD5E1;

    box-shadow:
        0 25px 55px rgba(15,23,42,.10);
}

.dashboard-atalho::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #0F172A,
            #334155
        );

    opacity:0;

    transition:.25s ease;
}

.dashboard-atalho:hover::before{

    opacity:1;
}

/* =====================================================
   ICONE
===================================================== */

.dashboard-atalho-icon{

    width:62px;

    height:62px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #0F172A,
            #1E293B
        );

    color:#FFFFFF;

    font-size:24px;

    box-shadow:
        0 18px 35px rgba(15,23,42,.25);
}

.dashboard-atalho-texto{

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.dashboard-atalho strong{

    display:block;

    font-size:20px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:6px;

    color:#0F172A;
}

.dashboard-atalho span{

    display:block;

    font-size:14px;

    line-height:1.45;

    color:#64748B;
}

/* =====================================================
   BLOCOS INFERIORES
===================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:22px;
}

.dashboard-grid .pikki-card{

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FAFC
        );

    border:1px solid #E2E8F0;

    border-radius:32px;

    padding:30px;

    box-shadow:
        0 20px 45px rgba(15,23,42,.05);
}

.dashboard-grid h3{

    margin-bottom:25px;

    font-size:18px;

    font-weight:700;

    color:#0F172A;
}

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

@media(max-width:1300px){

    .dashboard-acoes{

        grid-template-columns:
            repeat(3,1fr);
    }
}

@media(max-width:1100px){

    .dashboard-kpis{

        grid-template-columns:
            repeat(2,1fr);
    }

    .dashboard-grid{

        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .dashboard-kpis{

        grid-template-columns:1fr;
    }

    .dashboard-acoes{

        grid-template-columns:1fr;
    }

    .kpi-value{

        font-size:42px;
    }

    .dashboard-atalho{

        min-height:95px;

        padding:18px;
    }

    .dashboard-atalho-icon{

        width:54px;
        height:54px;

        font-size:20px;
    }

    .dashboard-atalho strong{

        font-size:17px;
    }
}

/* =====================================================
   NAVEGAÇÃO DASHBOARD
===================================================== */

.dashboard-nav{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:12px;

    margin-bottom:20px;
}

.dashboard-nav-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:58px;

    padding:0 18px;

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:16px;

    text-decoration:none;

    color:#0F172A;

    font-size:14px;

    font-weight:600;

    transition:.25s ease;
}

.dashboard-nav-item:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(15,23,42,.08);
}

.dashboard-nav-item i{

    font-size:14px;
}

.dashboard-nav-item:nth-child(1){

    border-color:#60A5FA;
    background:#DCEEFF;
}

.dashboard-nav-item:nth-child(2){

    border-color:#4ADE80;
    background:#DCFCE7;
}

.dashboard-nav-item:nth-child(3){

    border-color:#C084FC;
    background:#F3E8FF;
}

.dashboard-nav-item:nth-child(4){

    border-color:#FB923C;
    background:#FFEDD5;
}

.dashboard-nav-item:nth-child(5){

    border-color:#22D3EE;
    background:#CFFAFE;
}



.utilizador-avatar{

    width:56px;
    height:56px;

    border-radius:14px;

    object-fit:cover;

    object-position:center;

    border:1px solid #E2E8F0;

    display:block;

    margin:0 auto;

    box-shadow:
        0 4px 12px rgba(15,23,42,.08);
}

.utilizador-nome{

    font-size:16px;

    font-weight:500;

    color:#0F172A;
}

.estado-operacional{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.estado-subtitulo{
    font-size:12px;
    color:#64748B;
    line-height:1.2;
}

.acoes .btn-warning{

    background:#F59E0B;

    border-color:#F59E0B;

    color:#FFFFFF;
}

.acoes .btn-warning:hover{

    background:#D97706;

    border-color:#D97706;

    color:#FFFFFF;
}

.acoes .btn-danger{

    background:#EF4444;

    border-color:#EF4444;

    color:#FFFFFF;
}

.acoes .btn-danger:hover{

    background:#DC2626;

    border-color:#DC2626;

    color:#FFFFFF;
}

.perfil-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}

.perfil-gestor{

    background:#EFF6FF;

    color:#2563EB;
}

.perfil-encarregado{

    background:#FEF3C7;

    color:#B45309;
}

.perfil-colaborador{

    background:#ECFDF5;

    color:#059669;
}

/* =====================================================
   AÇÕES COLABORADOR
===================================================== */

.acoes-colaborador{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;
}

.acao-icon{

    width:40px;

    height:40px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.25s ease;

    font-size:14px;
}

.acao-icon:hover{

    transform:translateY(-2px);
}

.acao-icon.editar{

    background:#EFF6FF;

    color:#2563EB;
}

.acao-icon.desativar{

    background:#FEF3C7;

    color:#D97706;
}

.acao-icon.apagar{

    background:#FEE2E2;

    color:#DC2626;
}

.acao-icon.pesquisar{

    background:#F3F4F6;

    color:#475569;
}

.cliente-contacto{

    display:flex;

    flex-direction:column;

    gap:4px;
}

.cliente-contacto small{

    color:#64748B;

    font-size:12px;
}

.cliente-servicos-card{

    padding:32px;

}

.cliente-servicos-card h3{

    margin:0 0 24px;

    padding-left:8px;
}

.cliente-info-grid{

    display:grid;

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

    gap:24px;
}

.cliente-info-item{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.cliente-info-item span{

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#94A3B8;
}

.cliente-info-item strong{

    font-size:18px;

    color:#0F172A;

    font-weight:600;
}

@media(max-width:768px){

    .cliente-info-grid{

        grid-template-columns:1fr;
    }

}

.cliente-resumo-card{

    padding:32px 36px;

    margin-bottom:32px;
}

.cliente-resumo-card h2{

    margin:0 0 18px;

    font-size:28px;

    color:#0F172A;
}

.cliente-resumo-linha{

    margin-bottom:10px;

    color:#475569;
}

.cliente-resumo-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;
}

.cliente-resumo-coluna{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.cliente-resumo-coluna h2{

    margin:0 0 10px;

    font-size:42px;

    color:#0F172A;
}

.cliente-resumo-linha{

    color:#475569;

    line-height:1.6;
}


/* =====================================================
   FICHA SERVIÇO V2
===================================================== */

.servico-topo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #E2E8F0;
}

.servico-topo h2{

    margin:0 0 2px;

    font-size:28px;

    font-weight:700;

    color:#0F172A;
}

.servico-topo p{

    margin:0;

    color:#64748B;

    font-size:14px;
}

.servico-resumo-grid{

    display:grid;

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

    gap:20px;
}

.servico-resumo-coluna{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:18px;
}

.servico-resumo-coluna::before{

    display:block;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:#94A3B8;

    margin-bottom:10px;
}

.servico-resumo-coluna:nth-child(1)::before{

    content:"Operação";
}

.servico-resumo-coluna:nth-child(2)::before{

    content:"Planeamento";
}

.servico-resumo-coluna:nth-child(3)::before{

    content:"Localização";
}

.servico-resumo-linha{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    padding:8px 0;

    border-bottom:1px solid #EDF2F7;
}

.servico-resumo-linha:last-child{

    border-bottom:none;
}

.servico-resumo-linha strong{

    min-width:130px;

    color:#334155;

    font-weight:600;
}

@media(max-width:1200px){

    .servico-resumo-grid{

        grid-template-columns:1fr;
    }

}

.servico-cliente{

    margin:0 0 4px;

    font-size:24px;

    font-weight:700;

    color:#0F172A;
}

.servico-nome{

    margin:0;

    font-size:14px;

    color:#64748B;
}

.servico-observacoes{

    margin-top:20px;

    padding:24px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    color:#475569;

    line-height:1.8;

    min-height:120px;
}

.servico-observacoes-card{

    padding:32px;

}

.servico-observacoes-card h3{

    margin:0 0 20px;

    font-size:28px;

    font-weight:700;

    color:#0F172A;
}

.servico-observacoes{

    margin-top:0;

    min-height:120px;
}

.gps-selector{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}

.gps-info{

    display:flex;

    gap:25px;

    font-size:14px;

    color:#64748B;
}

.gps-preview{

    margin-top:25px;

    height:220px;

    border:1px dashed #CBD5E1;

    border-radius:20px;

    background:#F8FAFC;

    display:flex;

    align-items:center;

    justify-content:center;
}

.gps-preview-placeholder{

    color:#94A3B8;

    font-size:15px;
}

.form-group-full{

    grid-column:1/-1;
}

/* =====================================================
   MODAL SERVIÇO
===================================================== */

#modalServico .modal-content{

    max-width:1200px;

    width:95%;

    padding:40px;
}

/* =====================================================
   SECÇÕES
===================================================== */

#modalServico .servico-modal-seccao{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:24px;

    margin-bottom:20px;
}

#modalServico .servico-modal-titulo{

    margin:0 0 20px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;
}

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

#modalServico .form-grid{

    display:grid;

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

    gap:20px;
}

#modalServico .form-group{

    display:flex;

    flex-direction:column;
}

#modalServico .form-group-full{

    grid-column:1 / -1;
}

/* =====================================================
   LABELS
===================================================== */

#modalServico label{

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#475569;
}

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

#modalServico input,
#modalServico select{

    height:50px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;

    color:#0F172A;

    transition:.2s ease;
}

#modalServico textarea{

    width:100%;

    min-height:160px;

    padding:18px;

    border:1px solid #CBD5E1;

    border-radius:16px;

    background:#FFFFFF;

    resize:vertical;

    font-size:14px;

    line-height:1.6;

    color:#0F172A;

    transition:.2s ease;
}

#modalServico input:focus,
#modalServico select:focus,
#modalServico textarea:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}

#modalServico input[readonly]{

    background:#F1F5F9;

    color:#475569;

    font-weight:600;

    cursor:default;
}

/* =====================================================
   GPS
===================================================== */

#modalServico .gps-selector{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    flex-wrap:wrap;

    margin-bottom:20px;
}

#modalServico .gps-info{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    color:#64748B;

    font-size:14px;
}

#modalServico .gps-info strong{

    color:#0F172A;

    font-weight:700;
}

#modalServico .gps-preview{

    height:240px;

    border:2px dashed #CBD5E1;

    border-radius:20px;

    background:#FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;
}

#modalServico .gps-preview-placeholder{

    color:#94A3B8;

    font-size:15px;
}

/* =====================================================
   FOOTER
===================================================== */

#modalServico .modal-footer{

    display:flex;

    justify-content:flex-end;

    margin-top:25px;

    padding-top:25px;

    border-top:1px solid #E2E8F0;
}

/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:1200px){

    #modalServico .form-grid{

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

}

@media(max-width:768px){

    #modalServico .form-grid{

        grid-template-columns:1fr;
    }

    #modalServico .gps-selector{

        align-items:flex-start;

        flex-direction:column;
    }

    #modalServico .modal-content{

        padding:25px;
    }

}

/* =====================================================
   MODAIS UTILIZADORES V2
===================================================== */

#modalNovo .modal-content,
#modalEditar .modal-content{

    max-width:1200px;
    width:95%;
    padding:40px;
}

#modalNovo form,
#modalEditar form{

    display:flex;
    flex-direction:column;
    gap:24px;
}

#modalNovo .utilizador-modal-seccao,
#modalEditar .utilizador-modal-seccao{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:24px;
}

#modalNovo .utilizador-modal-titulo,
#modalEditar .utilizador-modal-titulo{

    margin:0 0 20px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;
}

#modalNovo .form-grid,
#modalEditar .form-grid{

    display:grid;

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

    gap:20px;
}

#modalNovo .form-group,
#modalEditar .form-group{

    display:flex;

    flex-direction:column;
}

#modalNovo label,
#modalEditar label{

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#475569;
}

#modalNovo input,
#modalNovo select,
#modalEditar input,
#modalEditar select{

    height:50px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;
}

#modalNovo textarea,
#modalEditar textarea{

    width:100%;

    min-height:160px;

    padding:18px;

    border:1px solid #CBD5E1;

    border-radius:16px;

    background:#FFFFFF;

    resize:vertical;

    font-size:14px;

    line-height:1.6;
}

#modalNovo input:focus,
#modalNovo select:focus,
#modalNovo textarea:focus,
#modalEditar input:focus,
#modalEditar select:focus,
#modalEditar textarea:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}

#modalNovo .modal-footer,
#modalEditar .modal-footer{

    display:flex;

    justify-content:flex-end;

    padding-top:20px;

    border-top:1px solid #E2E8F0;
}

#modalEditar #editar_nome{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#0F172A;
}

#modalEditar #editar_subtitulo{

    margin-top:6px;

    color:#64748B;

    font-size:14px;
}

#preview_foto_perfil img,
#preview_foto_referencia img{

    width:140px;

    border-radius:16px;

    border:1px solid #E2E8F0;

    margin-bottom:12px;
}

@media(max-width:1200px){

    #modalNovo .form-grid,
    #modalEditar .form-grid{

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

}

@media(max-width:768px){

    #modalNovo .form-grid,
    #modalEditar .form-grid{

        grid-template-columns:1fr;
    }

    #modalNovo .modal-content,
    #modalEditar .modal-content{

        padding:25px;
    }

}