:root {
    --sidebar-width: 250px;
    --brand-color: #0d6efd;
}

body {
    background-color: #f4f6f9;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* ============== SIDEBAR (desktop) ============== */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #1a2540 0%, #101828 100%);
    color: #fff;
}

.sidebar-brand,
.offcanvas .sidebar-brand {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sidebar-brand i {
    font-size: 1.5rem;
    color: #4dabf7;
}

.sidebar .nav-link,
.offcanvas .nav-link {
    color: rgba(255, 255, 255, .75);
    border-radius: .5rem;
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sidebar .nav-link:hover,
.offcanvas .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sidebar .nav-link.active,
.offcanvas .nav-link.active {
    background: var(--brand-color);
    color: #fff;
}

/* ============== SIDEBAR: menu con (thu gọn/mở rộng) ============== */
.nav-link-parent-row {
    gap: .25rem;
    margin-bottom: .25rem;
}
.nav-link-parent-row .nav-link {
    margin-bottom: 0;
}
.sidebar .nav-caret-toggle,
.offcanvas .nav-caret-toggle {
    flex: 0 0 auto;
    padding-left: .6rem;
    padding-right: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar .nav-caret,
.offcanvas .nav-caret {
    transition: transform .2s ease;
}
.sidebar .nav-caret-toggle[aria-expanded="true"] .nav-caret,
.offcanvas .nav-caret-toggle[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}
.sidebar .nav-link-sub,
.offcanvas .nav-link-sub {
    padding-left: 2.2rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .65);
}
.sidebar .nav-link-sub.active,
.offcanvas .nav-link-sub.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 600;
}

.main-content {
    min-width: 0; /* allow flex child to shrink so tables can scroll */
    width: 100%;
}

/* ============== STAT CARDS ============== */
.stat-card {
    border: none;
    border-radius: 1rem;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    overflow: hidden;
}

.stat-card .stat-icon {
    font-size: 2.2rem;
    opacity: .55;
}

.stat-card.bg-customers { background: linear-gradient(135deg,#0d6efd,#4dabf7); }
.stat-card.bg-visits    { background: linear-gradient(135deg,#6f42c1,#a370f7); }
.stat-card.bg-cost      { background: linear-gradient(135deg,#198754,#3ddc97); }
.stat-card.bg-satisfy   { background: linear-gradient(135deg,#fd7e14,#ffc078); }
.stat-card.bg-partner   { background: linear-gradient(135deg,#0dcaf0,#66e0fa); }
.stat-card.bg-pending   { background: linear-gradient(135deg,#dc3545,#f38699); }
.stat-card.bg-paid      { background: linear-gradient(135deg,#198754,#3ddc97); }

/* ============== SUB-TABS (module section switcher) ============== */
.module-subtabs {
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 1.25rem;
}
.module-subtabs .nav-link {
    color: #6c757d;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: .6rem 1rem;
}
.module-subtabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

/* Print: only show the printable report block */
@media print {
    .no-print { display: none !important; }
    .sidebar, .navbar { display: none !important; }
    .main-content { width: 100% !important; }
}

.stat-card h3 {
    font-weight: 700;
    margin-bottom: 0;
}

/* KPI cards that link to a drill-down detail page */
.stat-card-clickable {
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.stat-card-clickable:hover,
.stat-card-clickable:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    color: #fff;
}

/* ============== TABLE ============== */
.table-responsive {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

table.table thead th {
    white-space: nowrap;
    background-color: #eef1f6;
}

table.table td, table.table th {
    vertical-align: middle;
}

.card-section {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.select2-container .select2-selection--single {
    height: calc(2.375rem + 2px) !important;
    display: flex;
    align-items: center;
}

.badge-satisfaction i {
    font-size: .85rem;
}

/* ============== CHART.JS WRAPPER (responsive) ============== */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 280px;
}

@media (max-width: 991.98px) {
    .chart-wrap {
        height: 240px;
    }
}

@media (max-width: 991.98px) {
    .stat-card h3 { font-size: 1.4rem; }
}

/* ============== BREADCRUMB (Cây vị trí) - ngay dưới Navbar chính ============== */
.app-breadcrumb-nav {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: .55rem 1rem;
    position: sticky;
    top: 56px; /* bám ngay dưới top navbar (sticky-top) */
    z-index: 1015;
}
.app-breadcrumb-nav .breadcrumb {
    --bs-breadcrumb-divider: '\203A'; /* dấu › hiện đại thay cho "/" mặc định */
    margin-bottom: 0;
    font-size: .875rem;
}
.app-breadcrumb-nav .breadcrumb-item a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}
.app-breadcrumb-nav .breadcrumb-item a:hover {
    text-decoration: underline;
}
.app-breadcrumb-nav .breadcrumb-item.active {
    color: #6c757d;
    font-weight: 600;
}
@media (max-width: 991.98px) {
    .app-breadcrumb-nav {
        padding: .5rem .85rem;
        top: 56px;
    }
    .app-breadcrumb-nav .breadcrumb {
        font-size: .8rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }
}