/* ============================================================
   REDISEÑO LIMPIO DEL DASHBOARD
============================================================ */

.rent-dashboard-vn{
    /* background:#f5f7fb; */
    height:calc(100vh - 135px);
    min-height:620px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    color:#111827;
}

.rent-dashboard-sticky-header-vn{
    position:sticky;
    top:0;
    z-index:30;
    background:#f5f7fb;
    padding:16px 22px 14px;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 6px 16px rgba(15,23,42,.05);
}

.rent-dashboard-scroll-body-vn{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px 22px;
}

.rent-dashboard-header-vn{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:12px;
}

.rent-dashboard-title-box-vn h2{
    margin:0;
    font-size:24px;
    font-weight:900;
    line-height:1.15;
    color:#111827;
}

.rent-dashboard-subtitle-vn{
    margin-top:5px;
    color:#4b5563;
    font-size:13px;
    font-weight:700;
}

.rent-dashboard-period-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px 14px;
    font-size:13px;
    font-weight:900;
    color:#374151;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.rent-currency-pill-vn{
    display:inline-block;
    margin-left:8px;
    padding:3px 9px;
    border-radius:999px;
    background:#eef2ff;
    color:#3730a3;
    font-size:12px;
    font-weight:900;
}

/* Filtros */
.rent-dashboard-filters-vn{
    display:grid;
    grid-template-columns:1fr 1fr .8fr 1fr 1.15fr .85fr;
    gap:12px;
    align-items:end;
}

.filter-item-vn label{
    display:block;
    margin-bottom:4px;
    font-size:12px;
    font-weight:900;
    color:#374151;
}

.filter-item-vn .form-control{
    height:40px;
    border-radius:10px;
    border:1px solid #d1d5db;
    box-shadow:none;
    font-size:13px;
    font-weight:800;
    color:#111827;
}

.filter-actions-vn .btn{
    height:40px;
    border-radius:10px;
    font-size:14px;
    font-weight:900;
}

/* KPIs */
.rent-kpi-grid-vn{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-bottom:20px;
}

.rent-kpi-card-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
    min-height:104px;
}

.kpi-icon-vn{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.kpi-info-vn{
    min-width:0;
    flex:1;
}

.kpi-label-vn{
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    color:#475569;
    line-height:1.2;
    letter-spacing:.4px;
}

.kpi-value-vn{
    margin-top:4px;
    font-size:19px;
    font-weight:900;
    color:#111827;
    line-height:1.15;
    word-break:break-word;
}

.kpi-help-vn{
    margin-top:4px;
    font-size:12px;
    font-weight:700;
    color:#6b7280;
    line-height:1.2;
}

/* Colores */
.kpi-green-vn .kpi-icon-vn{background:#dcfce7;color:#15803d;}
.kpi-blue-vn .kpi-icon-vn{background:#dbeafe;color:#1d4ed8;}
.kpi-orange-vn .kpi-icon-vn{background:#ffedd5;color:#c2410c;}
.kpi-purple-vn .kpi-icon-vn{background:#ede9fe;color:#6d28d9;}
.kpi-red-vn .kpi-icon-vn{background:#fee2e2;color:#dc2626;}
.kpi-teal-vn .kpi-icon-vn{background:#ccfbf1;color:#0f766e;}
.kpi-yellow-vn .kpi-icon-vn{background:#fef3c7;color:#b45309;}
.kpi-lightred-vn .kpi-icon-vn{background:#fee2e2;color:#ef4444;}

/* Panels */
.rent-dashboard-row-vn{
    margin-bottom:18px;
}

.rent-panel-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:18px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
    min-height:100%;
}

.panel-title-vn{
    margin-bottom:14px;
    font-size:18px;
    font-weight:900;
    color:#111827;
    line-height:1.2;
}

.panel-title-vn span{
    display:block;
    margin-top:4px;
    font-size:13px;
    font-weight:700;
    color:#4b5563;
}

.rent-chart-box-vn{
    height:340px;
    min-width:100%;
}

.rent-chart-small-vn{
    height:280px;
    min-width:100%;
}

/* Alertas */
.alert-item-vn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #f1f5f9;
    font-size:14px;
    font-weight:800;
    color:#374151;
}

.alert-item-vn:last-child{
    border-bottom:none;
}

.alert-item-vn strong{
    font-size:18px;
    font-weight:900;
    color:#dc2626;
}

/* Próximos vencimientos */
.next-due-list-vn{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.next-due-item-vn{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#f8fafc;
}

.next-due-item-vn strong{
    display:block;
    font-size:14px;
    font-weight:900;
    color:#111827;
}

.next-due-item-vn span{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#475569;
}

.next-due-item-vn small{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#64748b;
}

.next-due-amount-vn{
    text-align:right;
    font-size:14px;
    font-weight:900;
    color:#111827;
    white-space:nowrap;
}

/* Tabla */
.rent-dashboard-table-vn{
    margin-bottom:0;
    font-size:13px;
}

.rent-dashboard-table-vn thead th{
    background:#f8fafc;
    color:#334155;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
    border-bottom:1px solid #e5e7eb !important;
    padding:10px 8px !important;
}

.rent-dashboard-table-vn tbody td{
    padding:9px 8px !important;
    font-size:13px;
    font-weight:700;
    color:#111827;
    vertical-align:middle !important;
}

.rent-dashboard-footer-vn{
    padding:4px 0;
    color:#6b7280;
    font-size:12px;
    font-weight:700;
}

/* Responsive */
@media (max-width: 1400px){
    .rent-kpi-grid-vn{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1200px){
    .rent-dashboard-vn{
        height:auto;
        min-height:100%;
        overflow:visible;
    }

    .rent-dashboard-sticky-header-vn{
        position:relative;
    }

    .rent-dashboard-scroll-body-vn{
        overflow:visible;
    }

    .rent-dashboard-filters-vn{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 768px){
    .rent-dashboard-header-vn{
        flex-direction:column;
    }

    .rent-dashboard-period-vn{
        width:100%;
        white-space:normal;
    }

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

    .rent-kpi-grid-vn{
        grid-template-columns:1fr;
    }
}

/* ============================================================
   AJUSTE BLOQUES SECUNDARIOS SIN ESPACIOS GRANDES
============================================================ */

.rent-secondary-grid-vn{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px;
    margin-bottom:18px;
    align-items:start;
}

.rent-panel-compact-vn{
    min-height:auto !important;
    height:auto !important;
}

.rent-chart-status-vn{
    height:230px;
    min-width:100%;
}

/* Reduce espacio interno solo en cards secundarias */
.rent-panel-compact-vn .panel-title-vn{
    margin-bottom:10px;
}

/* Alertas más compactas */
.rent-panel-compact-vn .alert-item-vn{
    padding:10px 0;
}

/* Próximos vencimientos más compacto */
.rent-panel-compact-vn .next-due-list-vn{
    gap:8px;
}

.rent-panel-compact-vn .next-due-item-vn{
    padding:10px 12px;
}

/* Evita que Highcharts deje demasiado aire en el donut */
#rentDashboardStatusChart,
.rent-chart-status-vn{
    max-height:230px;
}

/* En pantallas medianas, baja a 1 columna para que no se apriete */
@media(max-width:1200px){
    .rent-secondary-grid-vn{
        grid-template-columns:1fr;
    }

    .rent-chart-status-vn{
        height:260px;
    }
}

/* ============================================================
   DASHBOARD RENTAS - LAYOUT SIN HUECOS
   Gráficas a la izquierda / resumen operativo a la derecha
============================================================ */

.rent-main-grid-vn{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 360px;
    gap:18px;
    margin-bottom:18px;
    align-items:start;
}

.rent-main-left-vn{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    min-width:0;
}

.rent-main-right-vn{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    min-width:0;
}

.rent-side-panel-vn{
    min-height:auto !important;
    height:auto !important;
}

/* Gráficas principales más cómodas */
.rent-main-left-vn .rent-chart-box-vn{
    height:315px;
}

/* Donut más compacto para barra lateral */
.rent-chart-status-vn{
    height:225px;
    min-width:100%;
}

/* Reduce aire interno de cards laterales */
.rent-side-panel-vn{
    padding:16px;
}

.rent-side-panel-vn .panel-title-vn{
    margin-bottom:10px;
}

/* Alertas compactas */
.alert-list-vn{
    display:flex;
    flex-direction:column;
}

.alert-list-vn .alert-item-vn{
    padding:11px 0;
}

/* Próximos vencimientos compacto */
.rent-side-panel-vn .next-due-list-vn{
    gap:9px;
}

.rent-side-panel-vn .next-due-item-vn{
    padding:11px 12px;
}

/* Evita que Highcharts agregue espacio raro */
#rentDashboardStatusChart{
    max-height:225px;
}

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

@media(max-width:1350px){
    .rent-main-grid-vn{
        grid-template-columns:minmax(0, 1fr) 330px;
    }
}

@media(max-width:1150px){
    .rent-main-grid-vn{
        grid-template-columns:1fr;
    }

    .rent-main-right-vn{
        grid-template-columns:repeat(3, 1fr);
    }

    .rent-chart-status-vn{
        height:220px;
    }
}

@media(max-width:900px){
    .rent-main-right-vn{
        grid-template-columns:1fr;
    }
}

/* ============================================================
   DASHBOARD - DISTRIBUCIÓN LIMPIA
   2 gráficas arriba / 3 bloques abajo / tabla completa
============================================================ */

/* Filas del dashboard */
.rent-dashboard-row-vn{
    margin-bottom:18px;
}

/* Igualar altura visual en cada fila */
.row-eq-height-vn{
    display:flex;
    flex-wrap:wrap;
    margin-left:-9px;
    margin-right:-9px;
}

.row-eq-height-vn > [class*="col-"]{
    display:flex;
    padding-left:9px;
    padding-right:9px;
    margin-bottom:18px;
}

/* Panel general */
.rent-panel-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:18px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
    width:100%;
    display:flex;
    flex-direction:column;
}

/* Panel más compacto para fila 2 */
.rent-panel-small-vn{
    min-height:100%;
}

/* Títulos */
.panel-title-vn{
    margin-bottom:14px;
    font-size:18px;
    font-weight:900;
    color:#111827;
    line-height:1.2;
}

.panel-title-vn span{
    display:block;
    margin-top:4px;
    font-size:13px;
    font-weight:700;
    color:#4b5563;
}

/* Gráficas principales */
.rent-chart-main-vn{
    height:310px;
    min-width:100%;
}

/* Gráfica estatus */
.rent-chart-status-vn{
    height:245px;
    min-width:100%;
}

/* Alertas */
.alert-list-vn{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:2px;
}

.alert-item-vn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #eef2f7;
    font-size:14px;
    font-weight:800;
    color:#374151;
}

.alert-item-vn:last-child{
    border-bottom:none;
}

.alert-item-vn strong{
    font-size:18px;
    font-weight:900;
    color:#dc2626;
}

/* Próximos vencimientos */
.next-due-list-vn{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:2px;
}

.next-due-item-vn{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:13px 14px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#f8fafc;
}

.next-due-item-vn strong{
    display:block;
    font-size:14px;
    font-weight:900;
    color:#111827;
    line-height:1.2;
}

.next-due-item-vn span{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#475569;
    line-height:1.2;
}

.next-due-item-vn small{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#64748b;
    line-height:1.2;
}

.next-due-amount-vn{
    text-align:right;
    font-size:14px;
    font-weight:900;
    color:#111827;
    white-space:nowrap;
}

.next-due-amount-vn small{
    display:block;
    font-size:12px;
    color:#64748b;
    font-weight:800;
}

/* Responsive */
@media (max-width: 991px){
    .row-eq-height-vn{
        display:block;
    }

    .row-eq-height-vn > [class*="col-"]{
        display:block;
        margin-bottom:18px;
    }

    .rent-chart-main-vn{
        height:280px;
    }

    .rent-chart-status-vn{
        height:230px;
    }
}


/* dashboard ventas */

@media(max-width:1200px){
    #tab-dashboard-ejecutivo [style*="grid-template-columns:repeat(3"]{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    #tab-dashboard-ejecutivo [style*="grid-template-columns:minmax(0, 1.25fr)"]{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:992px){
    #tab-dashboard-ejecutivo [style*="grid-template-columns:1.15fr .65fr 1.15fr"]{
        grid-template-columns:1fr !important;
    }

    #tab-dashboard-ejecutivo [style*="grid-template-columns:repeat(3"]{
        grid-template-columns:1fr !important;
    }
}


.collection-vn-wrap{
    background:#f5f7fb;
    padding:12px;
    border-radius:16px;
}

.collection-vn-panel{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:15px;
    box-shadow:0 4px 12px rgba(15,23,42,.05);
    padding:14px;
    margin-bottom:12px;
}

.collection-vn-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.collection-vn-title{
    font-size:16px;
    font-weight:900;
    color:#111827;
    line-height:1.1;
}

.collection-vn-subtitle{
    font-size:12px;
    color:#64748b;
    font-weight:700;
    margin-top:3px;
}

.collection-vn-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    border-radius:999px;
    background:#f8fafc;
    color:#475569;
    border:1px solid #e5e7eb;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.collection-vn-filters-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr auto;
    gap:10px;
    align-items:end;
}

.collection-vn-filter-item label{
    display:block;
    font-size:11px;
    color:#374151;
    font-weight:900;
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:.35px;
}

.collection-vn-filter-item .form-control{
    height:34px;
    border-radius:9px;
    border:1px solid #d1d5db;
    box-shadow:none;
    font-weight:700;
}

.collection-vn-filter-actions{
    display:flex;
    align-items:end;
    gap:8px;
}

.collection-vn-filter-actions .btn{
    height:34px;
    border-radius:9px;
    font-weight:900;
}

.collection-vn-summary-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-bottom:12px;
}

.collection-vn-summary-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:15px;
    padding:14px;
    box-shadow:0 4px 12px rgba(15,23,42,.05);
}

.collection-vn-summary-top{
    display:flex;
    align-items:center;
    gap:7px;
    color:#475569;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.35px;
}

.collection-vn-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    display:inline-block;
}

.collection-vn-summary-count{
    font-size:26px;
    font-weight:900;
    color:#111827;
    line-height:1.1;
    margin-top:8px;
}

.collection-vn-summary-amount{
    font-size:13px;
    color:#64748b;
    font-weight:800;
    margin-top:3px;
}

.collection-vn-charts-grid{
    display:grid;
    grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
    gap:12px;
    margin-bottom:12px;
}

.collection-vn-client-panel{
    padding:0;
    overflow:hidden;
}

.collection-vn-client-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:14px 16px;
    border-bottom:1px solid #e5e7eb;
}

.collection-vn-client-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.collection-vn-client-actions .btn{
    border-radius:9px;
    font-weight:900;
}

.collection-vn-table-scroll{
    max-height:430px;
    overflow-y:auto;
    overflow-x:auto;
}

.collection-vn-table{
    margin-bottom:0;
    min-width:980px;
}

.collection-vn-table thead th{
    position:sticky;
    top:0;
    z-index:5;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb !important;
    color:#475569;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.35px;
    padding:10px 12px !important;
    white-space:nowrap;
}

.collection-vn-table tbody td{
    padding:12px !important;
    vertical-align:middle !important;
    border-top:1px solid #f1f5f9 !important;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

.collection-vn-client-name{
    max-width:260px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:900;
    color:#111827;
}

.collection-vn-tower-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:28px;
    padding:0 10px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    border:1px solid #dbeafe;
}

.collection-vn-progress-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:130px;
}

.collection-vn-progress{
    flex:1;
    height:8px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
}

.collection-vn-progress div{
    height:8px;
    border-radius:999px;
}

.collection-vn-progress-wrap span{
    font-size:11px;
    color:#64748b;
    font-weight:900;
    min-width:34px;
    text-align:right;
}

.collection-vn-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

@media(max-width:1200px){
    .collection-vn-filters-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

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

    .collection-vn-charts-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .collection-vn-filters-grid,
    .collection-vn-summary-grid{
        grid-template-columns:1fr;
    }

    .collection-vn-filter-actions{
        justify-content:flex-start;
    }

    .collection-vn-client-head{
        align-items:flex-start;
    }
}

.collection-detail-vn-wrap{
    background:#f5f7fb;
    padding:12px;
    border-radius:16px;
}

.collection-detail-vn-panel,
.collection-detail-vn-table-panel{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:15px;
    box-shadow:0 4px 12px rgba(15,23,42,.05);
    margin-bottom:12px;
}

.collection-detail-vn-panel{
    padding:14px;
}

.collection-detail-vn-head,
.collection-detail-vn-table-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
}

.collection-detail-vn-table-head{
    padding:14px 16px;
    border-bottom:1px solid #e5e7eb;
}

.collection-detail-vn-title{
    font-size:16px;
    font-weight:900;
    color:#111827;
    line-height:1.1;
}

.collection-detail-vn-subtitle{
    font-size:12px;
    color:#64748b;
    font-weight:700;
    margin-top:3px;
}

.collection-detail-vn-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    border-radius:999px;
    background:#f8fafc;
    color:#475569;
    border:1px solid #e5e7eb;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.collection-detail-vn-filters{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr auto;
    gap:10px;
    align-items:end;
    margin-top:14px;
}

.collection-detail-vn-field label{
    display:block;
    font-size:11px;
    color:#374151;
    font-weight:900;
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:.35px;
}

.collection-detail-vn-field .form-control{
    height:34px;
    border-radius:9px;
    border:1px solid #d1d5db;
    box-shadow:none;
    font-weight:700;
}

.collection-detail-vn-actions{
    display:flex;
    align-items:end;
    gap:8px;
}

.collection-detail-vn-actions .btn{
    height:34px;
    border-radius:9px;
    font-weight:900;
}

.collection-detail-vn-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-bottom:12px;
}

.collection-detail-vn-summary-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:15px;
    padding:14px;
    box-shadow:0 4px 12px rgba(15,23,42,.05);
}

.collection-detail-vn-summary-label{
    display:flex;
    align-items:center;
    gap:7px;
    color:#475569;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.35px;
}

.collection-detail-vn-summary-value{
    font-size:26px;
    font-weight:900;
    color:#111827;
    line-height:1.1;
    margin-top:8px;
}

.collection-detail-vn-summary-meta{
    font-size:13px;
    color:#64748b;
    font-weight:800;
    margin-top:3px;
}

.collection-detail-vn-scroll{
    max-height:520px;
    overflow-y:auto;
    overflow-x:auto;
}

.collection-detail-vn-table{
    margin-bottom:0;
    min-width:1050px;
}

.collection-detail-vn-table thead th{
    position:sticky;
    top:0;
    z-index:5;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb !important;
    color:#475569;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.35px;
    padding:10px 12px !important;
    white-space:nowrap;
}

.collection-detail-vn-table tbody td{
    padding:12px !important;
    vertical-align:middle !important;
    border-top:1px solid #f1f5f9 !important;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

.collection-detail-vn-key{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    border:1px solid #dbeafe;
}

.collection-detail-vn-client{
    max-width:320px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:13px;
    font-weight:900;
    color:#111827;
}

.collection-detail-vn-client-meta{
    font-size:11px;
    color:#94a3b8;
    font-weight:800;
    margin-top:2px;
}

.collection-detail-vn-tower{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:28px;
    padding:0 10px;
    border-radius:999px;
    background:#f8fafc;
    color:#475569;
    font-size:12px;
    font-weight:900;
    border:1px solid #e5e7eb;
}

.collection-detail-vn-progress-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:130px;
}

.collection-detail-vn-progress{
    flex:1;
    height:8px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
}

.collection-detail-vn-progress div{
    height:8px;
    border-radius:999px;
}

.collection-detail-vn-progress-wrap span{
    font-size:11px;
    color:#64748b;
    font-weight:900;
    min-width:34px;
    text-align:right;
}

.collection-detail-vn-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

@media(max-width:1200px){
    .collection-detail-vn-filters{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .collection-detail-vn-summary{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:768px){
    .collection-detail-vn-filters,
    .collection-detail-vn-summary{
        grid-template-columns:1fr;
    }

    .collection-detail-vn-actions{
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}

    .contracts-page-vn{
        height:calc(100vh - 145px);
        min-height:520px;
        display:flex;
        flex-direction:column;
        gap:12px;
        background:#f5f7fb;
        padding:12px;
        border-radius:16px;
    }

    .contracts-header-sticky-vn{
        background:#ffffff;
        border:1px solid #e5e7eb;
        border-radius:16px;
        padding:14px 16px;
        box-shadow:0 4px 12px rgba(15,23,42,.06);
        position:sticky;
        top:0;
        z-index:20;
    }

    .contracts-header-top-vn{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        flex-wrap:wrap;
        margin-bottom:12px;
    }

    .contracts-title-vn{
        margin:0;
        font-size:22px;
        font-weight:900;
        color:#111827;
        line-height:1.1;
    }

    .contracts-subtitle-vn{
        margin-top:4px;
        color:#64748b;
        font-size:12px;
        font-weight:700;
    }

    .contracts-count-badge-vn{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 11px;
        border-radius:999px;
        background:#eff6ff;
        border:1px solid #dbeafe;
        color:#1d4ed8;
        font-size:12px;
        font-weight:900;
    }

    .contracts-filter-grid-vn{
        display:grid;
        grid-template-columns:minmax(220px, 1.7fr) minmax(160px, .8fr) auto;
        gap:10px;
        align-items:end;
    }

    .contracts-filter-field-vn label{
        display:block;
        font-size:11px;
        color:#374151;
        font-weight:900;
        text-transform:uppercase;
        margin-bottom:4px;
        letter-spacing:.25px;
    }

    .contracts-filter-field-vn .form-control{
        height:34px;
        border-radius:9px;
        border:1px solid #d1d5db;
        box-shadow:none;
        font-weight:700;
        font-size:12px;
    }

    .contracts-filter-actions-vn{
        display:flex;
        gap:8px;
        align-items:end;
        flex-wrap:wrap;
    }

    .contracts-list-scroll-vn{
        flex:1;
        overflow-y:auto;
        overflow-x:hidden;
        padding-right:4px;
    }

    .contracts-list-scroll-vn::-webkit-scrollbar{
        width:8px;
    }

    .contracts-list-scroll-vn::-webkit-scrollbar-track{
        background:#eef2f7;
        border-radius:999px;
    }

    .contracts-list-scroll-vn::-webkit-scrollbar-thumb{
        background:#cbd5e1;
        border-radius:999px;
    }

    .contracts-empty-filter-vn{
        display:none;
        background:#ffffff;
        border:1px dashed #cbd5e1;
        border-radius:14px;
        padding:22px;
        text-align:center;
        color:#64748b;
        font-weight:800;
    }

    .contracts-empty-filter-vn .iconify{
        font-size:34px;
        color:#94a3b8;
        display:block;
        margin:0 auto 8px auto;
    }

    @media(max-width:768px){
        .contracts-page-vn{
            height:auto;
            min-height:0;
        }

        .contracts-header-sticky-vn{
            position:relative;
        }

        .contracts-list-scroll-vn{
            overflow:visible;
            padding-right:0;
        }

        .contracts-filter-grid-vn{
            grid-template-columns:1fr;
        }

        .contracts-filter-actions-vn .btn{
            width:100%;
        }
    }