:root{
    --primary:#0d6efd;
    --primary-soft:#e8f1ff;

    --sidebar:#111c2b;
    --sidebar2:#18263a;

    --bg:#f4f7fb;
    --surface:#fff;
    --surface-soft:#f8fafc;

    --text:#172235;
    --muted:#6d7a8c;
    --border:#e5eaf1;

    --success:#168653;
    --success-soft:#dff6e9;
    --warning:#9a6a00;
    --warning-soft:#fff0cc;
    --danger:#b4232c;
    --danger-soft:#ffe0e2;
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
}

.app-shell{
    min-height:100vh;
    display:flex;
}

/* =========================================================
   SIDEBAR
========================================================= */
.sidebar{
    width:250px;
    background:linear-gradient(180deg,#101c2b,#162438);
    color:#dce5ef;
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
    z-index:1040;
}

.sidebar-brand{
    height:68px;
    display:flex;
    align-items:center;
    padding:0 20px;
    font-size:22px;
    letter-spacing:.5px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.brand-brava{font-weight:700;color:#fff}
.brand-hub{font-weight:700;color:#2f8cff;margin-left:4px}

.sidebar-nav{
    padding:14px 10px;
    overflow:auto;
}

.nav-item,
.nav-section{
    display:flex;
    align-items:center;
    gap:11px;
    color:#c8d3e0;
    text-decoration:none;
    border-radius:7px;
    padding:10px 12px;
    margin-bottom:3px;
    min-height:40px;
}

.nav-item:hover{
    background:rgba(255,255,255,.07);
    color:#fff;
}

.nav-section{
    color:#fff;
    background:#0d6efd;
    font-weight:600;
    margin-top:6px;
}

.nav-item.sub{
    padding-left:32px;
    font-size:13px;
}

.nav-item.active{
    background:rgba(13,110,253,.16);
    color:#fff;
}

.nav-item.disabled,
.module-tab.disabled,
.quick-grid button.disabled{
    opacity:.5;
    pointer-events:none;
}

.sidebar-footer{
    margin-top:auto;
    padding:16px 20px;
    border-top:1px solid rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
}

.sidebar-footer small{
    color:#8291a5;
    margin-top:3px;
}

/* =========================================================
   MAIN / TOPBAR
========================================================= */
.main-content{
    margin-left:250px;
    width:calc(100% - 250px);
    min-width:0;
    min-height:100vh;
}

.topbar{
    height:68px;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    padding:0 24px;
    gap:18px;
    position:sticky;
    top:0;
    z-index:1000;
}

.icon-btn{
    border:0;
    background:transparent;
    width:38px;
    height:38px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#526174;
    font-size:18px;
    position:relative;
}

.icon-btn:hover{background:#f0f3f7}

.search{
    height:40px;
    width:320px;
    background:#f5f7fa;
    border:1px solid #e7ebf0;
    border-radius:7px;
    display:flex;
    align-items:center;
    padding:0 12px;
    color:#8a97a8;
}

.search input{
    border:0;
    outline:0;
    background:transparent;
    width:100%;
    padding-left:8px;
}

.top-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.notification-dot{
    position:absolute;
    right:1px;
    top:0;
    background:#dc3545;
    color:#fff;
    font-size:9px;
    line-height:16px;
    width:16px;
    height:16px;
    border-radius:50%;
}

.user-box{
    display:flex;
    align-items:center;
    gap:9px;
    padding-left:12px;
    margin-left:5px;
    border-left:1px solid var(--border);
}

.user-box strong{
    display:block;
    font-size:12px;
}

.user-box small{
    display:block;
    color:var(--muted);
    font-size:10px;
}

.avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#eef2f6;
    color:#617086;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:600;
}

/* =========================================================
   CONTENT / HEADER / TABS
========================================================= */
.content-wrap{
    width:100%;
    max-width:1680px;
    margin:0 auto;
    padding:26px 32px 40px;
    min-width:0;
}

.page-heading{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:50px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.title-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:var(--primary-soft);
    color:var(--primary);
    display:grid;
    place-items:center;
    font-size:24px;
    flex:0 0 auto;
}

.page-heading>div:nth-child(2){min-width:0}

.page-heading h1{
    font-size:25px;
    margin:0 0 3px;
    font-weight:700;
}

.page-heading p{
    margin:0;
    color:var(--muted);
}

.breadcrumb{
    margin-left:auto;
    font-size:12px;
    color:#657388;
    white-space:nowrap;
}

.module-tabs{
    display:flex;
    gap:4px;
    overflow:auto;
    border-bottom:1px solid var(--border);
    margin-bottom:18px;
    padding-bottom:0;
    scrollbar-width:thin;
    min-width:0;
}

.module-tab{
    border:0;
    background:transparent;
    padding:11px 12px;
    color:#56657a;
    white-space:nowrap;
    border-bottom:2px solid transparent;
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.module-tab:hover{color:var(--primary)}

.module-tab.active{
    color:var(--primary);
    border-bottom-color:var(--primary);
    font-weight:600;
}

/* =========================================================
   SECTION INTRO / ACTIONS
========================================================= */
.section-intro{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:2px 0 18px;
    min-width:0;
}

.section-intro h2{
    font-size:20px;
    margin:0 0 4px;
}

.section-intro p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.section-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    flex:0 0 auto;
}

.section-actions .btn{
    white-space:nowrap;
}

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

.calculo-actions .competencia{
    width:160px;
}

/* =========================================================
   METRICS
========================================================= */
.metric{
    min-height:112px;
    height:100%;
    border-radius:9px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
    box-shadow:0 4px 15px rgba(24,42,70,.08);
}

.metric>i{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    display:grid;
    place-items:center;
    font-size:22px;
    flex:0 0 auto;
}

.metric small,
.metric span{
    display:block;
    opacity:.9;
}

.metric strong{
    display:block;
    font-size:24px;
    line-height:1.2;
    margin:3px 0;
}

.blue{background:linear-gradient(135deg,#338cf2,#1674df)}
.green{background:linear-gradient(135deg,#2ebc78,#18a65f)}
.amber{background:linear-gradient(135deg,#f5b83d,#ed9d11)}
.purple{background:linear-gradient(135deg,#8b6be9,#7654d7)}

/* =========================================================
   PANELS
========================================================= */
.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    box-shadow:0 3px 14px rgba(26,42,66,.045);
    overflow:hidden;
}

.panel-fill{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}

.panel-fill .table-responsive{flex:1}

.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:76px;
    padding:18px 20px;
    border-bottom:1px solid var(--border);
}

.panel-head>div:first-child{min-width:0}

.panel-head h2{
    font-size:17px;
    margin:0 0 3px;
}

.panel-head span{
    font-size:12px;
    color:var(--muted);
}

.panel-head .btn{
    flex:0 0 auto;
    white-space:nowrap;
}

/* =========================================================
   QUICK GRID / TIMELINE
========================================================= */
.quick-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:18px;
}

.quick-grid button{
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    padding:18px;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.quick-grid button:hover{
    border-color:#9fc5ff;
    background:#f8fbff;
}

.quick-grid i{
    font-size:22px;
    color:var(--primary);
    margin-bottom:4px;
}

.quick-grid span{
    font-size:12px;
    color:var(--muted);
}

.timeline{
    padding:18px 20px;
}

.timeline>div{
    display:flex;
    gap:12px;
    padding:10px 0;
}

.timeline b{
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#edf1f5;
    color:var(--muted);
    font-size:11px;
    flex:0 0 auto;
}

.timeline .done b{
    background:#d9f5e6;
    color:var(--success);
}

.timeline .current b{
    background:#dcebff;
    color:var(--primary);
}

.timeline strong,
.timeline small{
    display:block;
}

.timeline small{
    color:var(--muted);
    font-size:11px;
}

/* =========================================================
   FILTERS
========================================================= */
.filters{
    display:grid;
    grid-template-columns:minmax(280px,2fr) repeat(3,minmax(160px,1fr)) auto;
    gap:8px;
    align-items:center;
    min-height:69px;
    padding:15px 18px;
    border-bottom:1px solid var(--border);
}

.filters .input-group{
    min-width:0;
}

.filters .form-select{
    min-width:0;
}

.filters>.btn{
    flex:0 0 auto;
    white-space:nowrap;
}

.benefits-toolbar{
    margin-bottom:12px;
}

.benefits-toolbar .filters{
    border:0;
    padding:13px 16px;
}

.benefits-toolbar .filters .input-group{
    min-width:0;
}

/* =========================================================
   TABLES
========================================================= */
.table-responsive{
    width:100%;
    overflow-x:auto;
}

.table{
    width:100%;
    margin:0;
}

.table th,
.table td{
    padding:12px 14px;
    vertical-align:middle;
}

.table thead th{
    background:var(--surface-soft);
    color:#66758a;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.03em;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.table td{
    font-size:13px;
    border-color:#edf0f4;
}

.table thead th:first-child,
.table tbody td:first-child{
    padding-left:18px;
}

.table thead th:last-child,
.table tbody td:last-child{
    padding-right:18px;
}

.salary-vigente{white-space:nowrap}

.employee-name{
    display:flex;
    align-items:center;
    gap:10px;
}

.employee-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary);
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:700;
    flex:0 0 auto;
}

/* =========================================================
   STATUS / BADGES
========================================================= */
.status{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
}

.status.active{
    background:var(--success-soft);
    color:var(--success);
}

.status.inactive{
    background:#eef1f4;
    color:#687687;
}

.status.warning{
    background:var(--warning-soft);
    color:var(--warning);
}

.status.danger{
    background:var(--danger-soft);
    color:var(--danger);
}

/* =========================================================
   BENEFÍCIOS
========================================================= */
#apuracaoBeneficiosBody small{font-size:.75rem}

#competenciaBeneficio{min-width:160px}

.benefits-toolbar .filters{
    grid-template-columns:minmax(280px,2fr) repeat(2,minmax(160px,1fr)) auto;
}

.employee-benefits-list{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.employee-benefit-card{
    border:1px solid #e7ebf0;
    border-radius:12px;
    background:#fff;
    padding:16px;
}

.employee-benefit-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:13px;
}

.employee-benefit-person{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.employee-benefit-person .employee-avatar{flex:0 0 auto}

.employee-benefit-person strong{
    display:block;
    font-size:14px;
}

.employee-benefit-person small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:2px;
}

.benefit-count{
    font-size:11px;
    color:#5e6d80;
    background:#f2f5f8;
    padding:5px 9px;
    border-radius:20px;
    white-space:nowrap;
}

.benefit-chip-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.benefit-chip{
    border:1px solid #e7ebf0;
    border-radius:10px;
    padding:11px;
    background:#fafbfd;
    min-width:0;
}

.benefit-chip-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.benefit-chip-icon{
    width:30px;
    height:30px;
    border-radius:8px;
    background:var(--primary-soft);
    color:var(--primary);
    display:grid;
    place-items:center;
}

.benefit-chip strong{
    font-size:12px;
    display:block;
    margin-top:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.benefit-chip .benefit-value{
    font-size:12px;
    font-weight:700;
    margin-top:3px;
}

.benefit-chip small{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:3px;
}

.benefit-chip .chip-actions{
    display:flex;
    gap:4px;
}

.benefit-chip .chip-actions button{
    width:28px;
    height:28px;
    padding:0;
}

.benefit-catalog{padding:14px}

.catalog-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 4px;
    border-bottom:1px solid #edf0f4;
}

.catalog-item:last-child{border-bottom:0}

.catalog-item-main{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.catalog-icon{
    width:34px;
    height:34px;
    border-radius:9px;
    background:#f0f5ff;
    color:var(--primary);
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.catalog-item strong{
    display:block;
    font-size:13px;
}

.catalog-item small{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:2px;
}

.catalog-actions{
    display:flex;
    gap:4px;
}

.catalog-actions button{
    width:29px;
    height:29px;
    padding:0;
}

.benefit-falta-rule{
    color:var(--danger);
    font-size:10px;
    margin-top:4px;
}

.benefit-active-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#18a65f;
    display:inline-block;
    margin-right:4px;
}

.empty-state{
    padding:32px 14px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}

.competencia-actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.competencia-actions input{width:160px}

/* =========================================================
   EVENTOS
========================================================= */
#eventosPanel .table{
    min-width:1050px;
}

#eventosPanel .event-code,
#eventosBody code{
    font-size:12px;
    font-weight:700;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

#eventosPanel .incidencias{
    font-size:11px;
    color:var(--muted);
}

#eventosPanel .table td{
    white-space:nowrap;
}

/* =========================================================
   CÁLCULO
========================================================= */
#calculoPanel .table{
    min-width:900px;
}

#calculoPanel .calculo-summary{
    border:1px solid #e9ecef;
    border-radius:10px;
    padding:14px 16px;
    background:var(--surface-soft);
    height:100%;
}

#calculoPanel .calculo-summary small{
    display:block;
    color:var(--muted);
    margin-bottom:4px;
}

#calculoPanel .calculo-summary strong{
    font-size:18px;
}

#calculoPanel .table td:last-child{
    font-weight:600;
}

/* =========================================================
   PAGINAÇÃO
========================================================= */
.table-pagination{
    padding:12px 18px;
    border-top:1px solid var(--border);
    background:#fff;
}

.table-pagination:empty{
    display:none;
}

.table-pagination-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.table-pagination-info{
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
}

.table-pagination .pagination{
    gap:4px;
    margin:0;
}

.table-pagination .page-link{
    border:1px solid #dfe5ec;
    background:#fff;
    color:#56657a;
    border-radius:6px!important;
    min-width:34px;
    height:32px;
    padding:5px 9px;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.table-pagination .page-link:hover:not(:disabled){
    background:#f5f8fc;
    color:var(--primary);
    border-color:#bcd4f7;
}

.table-pagination .page-link.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    font-weight:600;
}

.table-pagination .page-link:disabled{
    opacity:.45;
    cursor:not-allowed;
    background:#f8fafc;
}

/* =========================================================
   MODAIS / FORMULÁRIOS
========================================================= */
.modal-content{
    border:0;
    border-radius:12px;
    box-shadow:0 18px 50px rgba(0,0,0,.12);
}

.modal-body{padding:22px 24px}

.modal-footer{
    padding:14px 24px;
}

.form-label{
    font-size:12px;
    font-weight:600;
    color:#526174;
}

.form-control,
.form-select{
    font-size:13px;
    min-height:39px;
    border-radius:8px;
}

.input-group-text{
    border-radius:8px 0 0 8px;
}

.section-label{
    font-weight:700;
    font-size:13px;
    color:#39475b;
    margin-bottom:8px;
}

.alert-light{background:#f8f9fa}

.toast{
    border:0;
    box-shadow:0 8px 30px rgba(0,0,0,.15);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */
@media(max-width:1200px){
    .content-wrap{
        padding:22px 24px 36px;
    }

    .breadcrumb{
        width:100%;
        margin-left:62px;
    }

    .panel-head{
        align-items:flex-start;
    }

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

    .filters .input-group{
        grid-column:1/-1;
    }

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

/* =========================================================
   RESPONSIVE — MOBILE / TABLET PEQUENO
========================================================= */
@media(max-width:900px){
    .sidebar{
        transform:translateX(-100%);
        transition:.2s;
    }

    .sidebar.show{
        transform:none;
    }

    .main-content{
        margin-left:0;
        width:100%;
    }

    .content-wrap{
        padding:18px 14px 32px;
    }

    .breadcrumb{
        display:none;
    }

    .search{
        width:220px;
    }

    .page-heading{
        align-items:flex-start;
    }

    .panel-head{
        flex-wrap:wrap;
    }

    .panel-head .btn{
        width:auto;
    }

    .filters{
        padding:13px 14px;
    }

    .filters .form-select{
        min-width:0;
    }

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

    .employee-benefit-head{
        align-items:flex-start;
    }

    .table-pagination-inner{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */
@media(max-width:767.98px){
    .section-intro{
        align-items:flex-start;
        flex-direction:column;
    }

    .section-actions{
        width:100%;
    }

    .section-actions .btn{
        flex:1;
    }

    .calculo-actions{
        width:100%;
    }

    .calculo-actions .competencia{
        width:100%;
    }

    .competencia-actions{
        width:100%;
        flex-direction:column;
    }

    .competencia-actions input,
    .competencia-actions .btn{
        width:100%;
    }

    #competenciaBeneficio{
        max-width:none!important;
        width:100%;
    }

    .panel-head:has(#competenciaBeneficio){
        flex-direction:column;
        align-items:stretch!important;
    }

    .panel-head:has(#competenciaBeneficio)>div:last-child{
        width:100%;
    }

    .benefit-chip-grid{
        grid-template-columns:1fr;
    }

    .employee-benefit-head{
        flex-direction:column;
    }

    .benefits-toolbar .filters{
        grid-template-columns:1fr;
    }

    .benefits-toolbar .filters .input-group{
        grid-column:auto;
    }

    .table-pagination{
        padding:12px 14px;
    }
}

/* =========================================================
   RESPONSIVE — CELULAR
========================================================= */
@media(max-width:600px){
    .topbar{
        padding:0 12px;
    }

    .search{
        display:none;
    }

    .user-box div,
    .user-box>i{
        display:none;
    }

    .content-wrap{
        padding:16px 12px 28px;
    }

    .module-tabs{
        margin-right:-12px;
    }

    .page-heading{
        gap:10px;
    }

    .title-icon{
        width:42px;
        height:42px;
        font-size:20px;
    }

    .page-heading h1{
        font-size:20px;
    }

    .section-intro h2{
        font-size:19px;
    }

    .filters{
        grid-template-columns:1fr;
    }

    .filters .input-group{
        grid-column:auto;
    }

    .filters .form-select{
        width:100%;
    }

    .quick-grid{
        grid-template-columns:1fr;
    }

    .metric{
        min-height:100px;
        padding:15px;
    }

    .metric strong{
        font-size:21px;
    }

    .panel-head{
        padding:16px;
    }

    .panel-head .btn{
        width:100%;
    }

    .modal-body{
        padding:18px 16px;
    }

    .modal-footer{
        padding:12px 16px;
    }

    .table-pagination-info{
        white-space:normal;
    }

    .table-pagination .pagination{
        flex-wrap:wrap;
    }
}