/* ==========================================================
   NxOps - Performance Operacional
   Tema Oficial
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'DM Sans',sans-serif;
}

:root{

    --primary:#00C6B9;
    --primary-dark:#00A79C;

    --sidebar:#081B3A;
    --sidebar-hover:#102A56;

    --dark-neutral:#424141;

    --background:#F5F7FB;
    --background-soft:#F0F2F7;

    --card:#FFFFFF;

    --text:#223046;

    --text-light:#7B889A;

    --border:#E9EEF5;

    /* status (clientes, projetos, riscos) */
    --status-verde:#2ECC71;
    --status-verde-bg:#EAFAF1;
    --status-amarelo:#F1C40F;
    --status-amarelo-bg:#FDF6E0;
    --status-vermelho:#E74C3C;
    --status-vermelho-bg:#FFF5F5;
    --status-azul:#2E86DE;
    --status-azul-bg:#EAF3FC;
    --status-encerrado:#8FA6BF;
    --status-encerrado-bg:#F2F4F7;

    /* prioridade (tarefas) */
    --prioridade-baixa:#2ECC71;
    --prioridade-media:#F1C40F;
    --prioridade-alta:#FF8A3D;
    --prioridade-urgente:#E74C3C;

}

body{

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

}


/*==========================================================
SIDEBAR
==========================================================*/

.sidebar{

    position:fixed;

    left:0;
    top:0;

    width:320px;

    height:100vh;

    background:linear-gradient(180deg,#081B3A,#0C2146);

    padding:25px;

    color:white;

    box-shadow:8px 0 25px rgba(0,0,0,.12);

    overflow:auto;

}


/*==========================================================
LOGO
==========================================================*/

.logo{

    height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.logo img{

    width:285px;

    max-width:100%;

    transition:.30s;

}

.logo img:hover{

    transform:scale(1.03);

}


/*==========================================================
PERFIL
==========================================================*/

.profile{

    display:flex;

    align-items:center;

    gap:15px;

    padding:25px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    margin-bottom:15px;

}

.avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#081B3A;

    font-weight:bold;

    font-size:20px;

    box-shadow:0 5px 15px rgba(0,199,177,.35);

}

.profile strong{

    color:white;

    font-size:16px;

}

.profile small{

    color:#B7C8DF;

}

.logout-link{

    margin-left:auto;

    color:#B7C8DF;

    font-size:20px;

    transition:.25s;

}

.logout-link:hover{

    color:var(--status-vermelho);

}


/*==========================================================
MENU
==========================================================*/

.menu{

    margin-top:15px;

}

.menu a{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    margin-bottom:8px;

    border-radius:15px;

    text-decoration:none;

    color:#DCE7F5;

    transition:.25s;

    font-weight:500;

}

.menu a:hover{

    background:var(--sidebar-hover);

    color:white;

    transform:translateX(5px);

}

.menu i{

    font-size:23px;

    width:26px;

}


/*==========================================================
CONTEÚDO
==========================================================*/

.content{

    margin-left:320px;

    min-height:100vh;

    transition:margin-left .2s;

}


/*==========================================================
SIDEBAR RECOLHIDA
==========================================================*/

.sidebar-toggle{

    position:absolute;

    top:28px;

    right:-14px;

    width:28px;

    height:28px;

    border-radius:50%;

    border:none;

    background:var(--primary);

    color:#081B3A;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 3px 10px rgba(0,0,0,.25);

    transition:.2s;

    z-index:5;
}

.sidebar-toggle:hover{

    background:var(--primary-dark);
}

.logo-mini{

    display:none;

    width:44px;

    height:44px;

    border-radius:12px;

    background:var(--primary);

    color:#081B3A;

    font-weight:800;

    font-size:20px;

    align-items:center;

    justify-content:center;
}

html.sidebar-collapsed .sidebar{

    width:84px;

    padding:25px 14px;
}

html.sidebar-collapsed .content{

    margin-left:84px;
}

html.sidebar-collapsed .sidebar-toggle i{

    transform:rotate(180deg);
}

html.sidebar-collapsed .logo{

    height:auto;

    padding-bottom:15px;
}

html.sidebar-collapsed .logo-full{

    display:none;
}

html.sidebar-collapsed .logo-mini{

    display:flex;
}

html.sidebar-collapsed .profile{

    flex-direction:column;

    gap:10px;

    padding:15px 0;
}

html.sidebar-collapsed .profile-info{

    display:none;
}

html.sidebar-collapsed .logout-link{

    margin-left:0;
}

html.sidebar-collapsed .menu a{

    justify-content:center;

    padding:14px 0;
}

html.sidebar-collapsed .menu a span{

    display:none;
}

html.sidebar-collapsed .menu i{

    width:auto;
}


/*==========================================================
TOPBAR
==========================================================*/

.topbar{

    height:82px;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    box-shadow:0 4px 18px rgba(0,0,0,.05);

}

.topbar h4{

    font-size:30px;

    font-weight:700;

}

.topbar small{

    color:var(--text-light);

    font-size:15px;

}

.breadcrumb-nx{

    display:flex;

    align-items:center;

    gap:6px;
}

.breadcrumb-nx a{

    color:var(--text-light);

    text-decoration:none;
}

.breadcrumb-nx a:hover{

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

.breadcrumb-nx i{

    font-size:11px;
}


/*==========================================================
COMMAND PALETTE
==========================================================*/

.cp-trigger{

    display:flex;

    align-items:center;

    gap:10px;

    background:#F5F7FA;

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

    border-radius:12px;

    padding:11px 16px;

    color:var(--text-light);

    font-size:14px;

    font-weight:500;

    transition:.15s;
}

.cp-trigger:hover{

    background:white;

    border-color:var(--primary);

    color:var(--text);
}

.cp-trigger kbd{

    background:white;

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

    border-radius:5px;

    padding:2px 6px;

    font-size:11px;

    color:var(--text-light);

    font-family:inherit;
}

.cp-content{

    border:none;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 30px 60px rgba(0,0,0,.25);
}

.cp-input-wrap{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 22px;

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

.cp-input-wrap i{

    color:var(--text-light);

    font-size:18px;
}

.cp-input-wrap input{

    flex:1;

    border:none;

    outline:none;

    font-size:16px;

    color:var(--text);
}

.cp-input-wrap kbd{

    background:var(--background);

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

    border-radius:5px;

    padding:2px 7px;

    font-size:11px;

    color:var(--text-light);

    font-family:inherit;
}

.cp-results{

    max-height:360px;

    overflow-y:auto;

    padding:10px;
}

.cp-group-label{

    font-size:11px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:var(--text-light);

    padding:10px 12px 4px;
}

.cp-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:11px 12px;

    border-radius:10px;

    color:var(--text);

    text-decoration:none;

    font-size:14.5px;
}

.cp-item i{

    color:var(--primary-dark);

    font-size:16px;
}

.cp-item:hover, .cp-item.cp-item-ativo{

    background:var(--background);
}

.cp-item.cp-item-ativo i{

    color:var(--primary);
}

.cp-empty{

    text-align:center;

    color:var(--text-light);

    padding:24px;

    font-size:14px;
}


/*==========================================================
PÁGINA
==========================================================*/

.page{

    padding:35px;

}


/*==========================================================
PAINEL DE GRÁFICOS (GESTÃO DE PESSOAS)
==========================================================*/

.chart-card{

    border:none;

    border-radius:20px;

    background:var(--card);

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    padding:22px;

}

.chart-card h6{

    font-weight:700;

    margin-bottom:14px;

    display:flex;

    align-items:center;

    gap:8px;

}

.chart-box{

    position:relative;

    height:260px;

    width:100%;

    overflow:hidden;

}

.chart-box-sm{

    position:relative;

    height:220px;

    width:100%;

    overflow:hidden;
}


/*==========================================================
KANBAN - GESTÃO DE TAREFAS
==========================================================*/

.kanban-board{

    display:flex;

    gap:22px;

    align-items:flex-start;

    overflow-x:auto;

    padding-bottom:10px;

}

.kanban-coluna{

    flex:1 0 320px;

    min-width:320px;

    background:var(--background-soft);

    border-radius:18px;

    padding:16px;

    max-height:75vh;

    display:flex;

    flex-direction:column;

    border-top:5px solid var(--status-encerrado);

}

.kanban-coluna.coluna-a-fazer{

    border-top-color:var(--status-encerrado);

    background:var(--status-encerrado-bg);
}

.kanban-coluna.coluna-em-andamento{

    border-top-color:var(--status-azul);

    background:var(--status-azul-bg);
}

.kanban-coluna.coluna-concluido{

    border-top-color:var(--status-verde);

    background:var(--status-verde-bg);
}

.kanban-coluna-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;

    padding:0 4px;

}

.kanban-coluna-header h6{

    font-weight:700;

    margin:0;

    display:flex;

    align-items:center;

    gap:8px;

}

.kanban-contador{

    background:white;

    border-radius:50px;

    padding:2px 11px;

    font-size:13px;

    font-weight:700;

    color:var(--text-light);

}

.kanban-lista{

    flex:1;

    overflow-y:auto;

    min-height:80px;

    padding-bottom:4px;

}

.kanban-card{

    position:relative;

    background:var(--card);

    border-radius:14px;

    padding:14px 16px;

    margin-bottom:12px;

    box-shadow:0 4px 14px rgba(0,0,0,.06);

    cursor:grab;

    transition:.15s;

    border-left:4px solid var(--border);

}

.kanban-card:hover{

    box-shadow:0 8px 22px rgba(0,0,0,.12);

    transform:translateY(-2px);

}

.kanban-card.prioridade-baixa{ border-left-color:var(--prioridade-baixa); }
.kanban-card.prioridade-media{ border-left-color:var(--prioridade-media); }
.kanban-card.prioridade-alta{ border-left-color:var(--prioridade-alta); }
.kanban-card.prioridade-urgente{ border-left-color:var(--prioridade-urgente); }

.badge-prioridade-baixa{ background:var(--prioridade-baixa); color:white; }
.badge-prioridade-media{ background:var(--prioridade-media); color:#3A3000; }
.badge-prioridade-alta{ background:var(--prioridade-alta); color:white; }
.badge-prioridade-urgente{ background:var(--prioridade-urgente); color:white; }

.kanban-card.atrasada{

    background:var(--status-vermelho-bg);

}

.kanban-card-titulo{

    font-weight:700;

    margin-bottom:8px;

    line-height:1.3;

}

.kanban-card-meta{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    align-items:center;

    font-size:12px;

}

.kanban-card-cliente{

    color:var(--text-light);

    font-size:12.5px;

    margin-bottom:6px;

    display:flex;

    align-items:center;

    gap:5px;
}

.kanban-avatar{

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--sidebar);

    color:white;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

.kanban-card-sortable-ghost{

    opacity:.4;
}

.kanban-card-sortable-drag{

    cursor:grabbing;
}

.kanban-coluna.kanban-drop-ativo{

    background:#E4F8F5;
}

.kanban-add-btn{

    display:block;

    width:100%;

    text-align:center;

    background:none;

    border:1.5px dashed #C6CCD6;

    border-radius:12px;

    padding:10px;

    color:var(--text-light);

    font-weight:600;

    font-size:14px;

    transition:.15s;

}

.kanban-add-btn:hover{

    background:white;

    border-color:var(--primary);

    color:var(--primary-dark);

}


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

.card-nx{

    border:none;

    border-radius:20px;

    background:var(--card);

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.25s;

}

.card-nx:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.card-header{

    border:none;

    border-radius:20px 20px 0 0 !important;

    font-weight:600;

}


/*==========================================================
TABELAS
==========================================================*/

.table{

    background:white;

    border-radius:18px;

    overflow:hidden;

}

.table thead{

    background:#F8FAFD;

}

.table th{

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

    color:var(--text);

    font-weight:700;

}

.th-ordenavel{

    cursor:pointer;

    user-select:none;

    transition:color .15s;
}

.th-ordenavel:hover{

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

.sort-icon{

    font-size:11px;

    margin-left:5px;

    color:var(--primary);
}

.table td{

    vertical-align:middle;

    border-color:#F2F4F8;

}


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

.btn{

    border-radius:10px;

    font-weight:600;

}

.btn-success{

    background:var(--primary);

    border:none;

}

.btn-success:hover{

    background:var(--primary-dark);

}


/*==========================================================
STATUS
==========================================================*/

.status-verde{

    border-left:6px solid var(--status-verde);

}

.status-amarelo{

    border-left:6px solid var(--status-amarelo);

}

.status-vermelho{

    border-left:6px solid var(--status-vermelho);

}

.status-azul{

    border-left:6px solid var(--status-azul);

}

.status-neutro{

    border-left:6px solid var(--sidebar);

}


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

.badge{

    padding:8px 12px;

    font-size:12px;

    border-radius:8px;

}


/*==========================================================
MODAL VISUALIZAÇÃO
==========================================================*/

.modal-content{

    border:none;

    border-radius:20px;

    overflow:hidden;

}

.modal-nx-header{

    background:linear-gradient(135deg,var(--sidebar),#0C2146);

    color:white;

    border:none;

    padding:22px 28px;

}

.modal-nx-header .modal-title{

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

}

.modal-nx-header .btn-close{

    filter:invert(1);

}

.modal-nx-body{

    padding:28px;

    background:var(--background);

}

.info-grid{

    display:grid;

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

    gap:18px;

}

.info-grid .full{

    grid-column:1 / -1;

}

.info-item label{

    display:block;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:var(--text-light);

    font-weight:700;

    margin-bottom:4px;

}

.info-item .value{

    background:white;

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

    border-radius:10px;

    padding:10px 14px;

    font-weight:500;

    min-height:42px;

    white-space:pre-wrap;

}

.modal-nx-footer{

    border:none;

    background:var(--background);

    padding:18px 28px;

}


/*==========================================================
AUTENTICAÇÃO (LOGIN / CADASTRO)
==========================================================*/

.login-split{

    display:flex;

    min-height:100vh;

}

.login-panel-left{

    flex:0 0 44%;

    max-width:560px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:#fff;

    padding:56px 72px;

}

.login-left-inner{

    display:flex;

    flex-direction:column;

    justify-content:center;

    flex:1;

}

.login-logo{

    width:210px;

    max-width:100%;

    margin-bottom:28px;

}

.login-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    align-self:flex-start;

    background:#F3F4F8;

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

    color:var(--text-light);

    font-size:13px;

    font-weight:600;

    padding:8px 16px;

    border-radius:50px;

    margin-bottom:36px;

}

.login-badge i{

    color:var(--primary-dark);

}

.login-subtitle{

    color:var(--text-light);

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

}

.input-icon{

    position:relative;

    margin-bottom:16px;

}

.input-icon i{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-light);

    font-size:18px;

}

.input-icon input{

    width:100%;

    background:#EEF0F8;

    border:1px solid transparent;

    border-radius:12px;

    padding:15px 16px 15px 48px;

    font-size:15px;

    color:var(--text);

    transition:.2s;

}

.input-icon input::placeholder{

    color:#9AA6B8;

}

.input-icon input:focus{

    outline:none;

    background:#fff;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(0,199,177,.15);

}

.toggle-senha{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:var(--text-light);

    font-size:18px;

    cursor:pointer;

    padding:4px;

}

.btn-login{

    width:100%;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:12px;

    padding:16px;

    font-size:16px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:8px;

    transition:.2s;

}

.btn-login:hover{

    background:var(--primary-dark);

}

.login-forgot{

    text-align:center;

    margin-top:20px;

}

.login-forgot a{

    color:var(--primary-dark);

    font-weight:600;

    font-size:14px;

    text-decoration:none;

}

.login-forgot a:hover{

    text-decoration:underline;

}

.login-footer{

    color:var(--text-light);

    font-size:13px;

    line-height:1.7;

}

.login-footer-brand{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:4px;

}

.login-footer-brand img{

    height:16px;

}

.login-panel-right{

    flex:1;

    position:relative;

    overflow:hidden;

    background:linear-gradient(160deg,#2B2B2B 0%,var(--dark-neutral) 55%,#00706A 100%);

    display:flex;

    align-items:center;

    justify-content:center;
}

.login-panel-right::before,
.login-panel-right::after{

    content:"";

    position:absolute;

    border-radius:50%;

    background:radial-gradient(circle,rgba(0,199,177,.35),transparent 70%);

}

.login-panel-right::before{

    width:520px;

    height:520px;

    top:-160px;

    right:-140px;

}

.login-panel-right::after{

    width:420px;

    height:420px;

    bottom:-180px;

    left:-120px;

    background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);

}

.mockup-window{

    position:relative;

    z-index:1;

    width:78%;

    max-width:560px;

    background:#2F2F2F;

    border-radius:18px;

    box-shadow:0 40px 80px rgba(0,0,0,.45);

    overflow:hidden;

    transform:rotate(-2deg);

    border:1px solid rgba(255,255,255,.08);

}

.mockup-topbar{

    display:flex;

    align-items:center;

    gap:6px;

    padding:12px 16px;

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

}

.mockup-topbar span{

    width:10px;

    height:10px;

    border-radius:50%;

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

.mockup-body{

    display:flex;

}

.mockup-sidebar{

    width:70px;

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

    padding:16px 10px;

    display:flex;

    flex-direction:column;

    gap:14px;
}

.mockup-sidebar span{

    height:8px;

    border-radius:4px;

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

.mockup-sidebar span.active{

    background:var(--primary);
}

.mockup-content{

    flex:1;

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:14px;
}

.mockup-title{

    height:12px;

    width:45%;

    border-radius:4px;

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

.mockup-cards{

    display:flex;

    gap:10px;
}

.mockup-cards div{

    flex:1;

    height:54px;

    border-radius:10px;

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

    border-top:3px solid var(--primary);
}

.mockup-row{

    height:10px;

    border-radius:4px;

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

.mockup-row.short{

    width:60%;
}

.login-caption{

    position:absolute;

    bottom:60px;

    left:0;

    right:0;

    text-align:center;

    color:rgba(255,255,255,.75);

    font-size:15px;

    z-index:1;

    padding:0 60px;
}

@media(max-width:992px){

.login-panel-right{

    display:none;
}

.login-panel-left{

    flex:1;

    max-width:none;

    padding:40px 30px;
}

}


/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#B9C7D6;

    border-radius:10px;

}

::-webkit-scrollbar-track{

    background:#F2F5F8;

}


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

@media(max-width:992px){

.sidebar{

    width:100%;

    height:auto;

    position:relative;

}

.content{

    margin-left:0;

}

.logo img{

    width:230px;

}

.search{

    display:none;

}

}