/*
 * Compact UI - Thay thế zoom: 80%
 * Dùng chung cho Client, Admin, CTV
 * 
 * Giảm nhẹ kích thước giao diện (~87%) thay vì quá nhỏ (80%)
 * Dùng !important để override backend.css / adminlte.css load sau
 */

/* ===== BASE: Giảm rem gốc + Font Roboto ===== */
html {
    font-size: 15px !important;
}

/* Font Roboto toàn web - catch-all, trừ icon fonts */
*:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not(.ri):not(.remixicon):not(.glyphicon):not(.ion):not(.ionicons):not(.material-icons):not(lord-icon),
*::before:not(.fa *):not(.fas *)::before:not(.far *)::before:not(.fab *)::before,
*::after:not(.fa *)::after:not(.fas *)::after:not(.far *)::after:not(.fab *)::after {
    font-family: 'Roboto', sans-serif !important;
}

/* Khôi phục font cho icon fonts */
.fa, .fas, .far, .fal, .fab, .fad,
.fa::before, .fas::before, .far::before, .fal::before, .fab::before, .fad::before {
    font-family: 'Font Awesome 5 Free' !important;
}
.fab, .fab::before {
    font-family: 'Font Awesome 5 Brands' !important;
}
[class^="ri-"], [class*=" ri-"],
[class^="ri-"]::before, [class*=" ri-"]::before {
    font-family: 'remixicon' !important;
}
.glyphicon, .glyphicon::before {
    font-family: 'remixicon' !important;
}
.ion, .ionicons, [class^="ion-"], [class*=" ion-"] {
    font-family: 'Ionicons' !important;
}

/* ===== CLIENT SIDEBAR ===== */
.iq-sidebar {
    width: 200px !important;
}

.iq-sidebar-logo {
    padding: 10px 6px 4px !important;
}

.iq-sidebar-logo img {
    max-height: 32px !important;
}

.iq-sidebar-menu .side-menu li a {
    font-size: 0.82rem !important;
    padding: 0.45rem 0.7rem !important;
    line-height: 1.4 !important;
}

.iq-sidebar-menu .side-menu li a i {
    font-size: 0.88rem !important;
    width: 18px !important;
    margin-right: 6px !important;
}

.iq-sidebar-menu .side-menu .side-menu-title {
    font-size: 0.72rem !important;
    padding: 8px 12px !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Client content area offset */
.content-page {
    margin-left: 200px !important;
}

@media (max-width: 1299px) {
    .content-page {
        margin-left: 0 !important;
    }
    body.sidebar-main .iq-sidebar {
        width: 200px !important;
    }
}

/* ===== CLIENT TOP NAVBAR ===== */
.iq-top-navbar {
    width: calc(100% - 200px) !important;
}

@media (max-width: 1299px) {
    .iq-top-navbar {
        width: 100% !important;
    }
}

/* ===== CLIENT FOOTER ===== */
.iq-footer {
    margin-left: 200px !important;
    width: calc(100% - 200px) !important;
}

@media (max-width: 1024px) {
    .iq-footer {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ===== ADMINLTE SIDEBAR (Admin/CTV) ===== */
.main-sidebar {
    width: 200px !important;
}

.content-wrapper,
.main-footer,
.main-header {
    margin-left: 200px !important;
}

@media (max-width: 991px) {
    .content-wrapper,
    .main-footer,
    .main-header {
        margin-left: 0 !important;
    }
}

.nav-sidebar .nav-link {
    font-size: 0.82rem !important;
    padding: 0.4rem 0.5rem !important;
}

.nav-sidebar .nav-link p {
    font-size: 0.82rem !important;
}

.nav-sidebar .nav-icon {
    font-size: 0.85rem !important;
    width: 1.2rem !important;
    margin-right: 0.3rem !important;
}

.brand-link {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.9rem !important;
}

.brand-link .brand-image {
    max-height: 28px !important;
}

/* ===== ADMINLTE Small boxes ===== */
.small-box h3 {
    font-size: 1.6rem !important;
}

.small-box p {
    font-size: 0.82rem !important;
}

.small-box .icon > i {
    font-size: 50px !important;
}

.small-box .inner {
    padding: 8px 10px !important;
}

.small-box .small-box-footer {
    padding: 2px 0 !important;
    font-size: 0.78rem !important;
}

/* ===== INFO BOXES ===== */
.info-box {
    min-height: 55px !important;
}

.info-box .info-box-icon {
    width: 50px !important;
    font-size: 1.2rem !important;
}

.info-box-content {
    padding: 5px 8px !important;
}

.info-box-text {
    font-size: 0.78rem !important;
}

.info-box-number {
    font-size: 1rem !important;
}

/* ===== CONTENT HEADER ===== */
.content-header h1 {
    font-size: 1.3rem !important;
}

.content-header {
    padding: 8px 0.5rem !important;
}

/* ===== Responsive ===== */
@media (min-width: 1400px) {
    html { font-size: 15px !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    html { font-size: 14px !important; }
}

@media (max-width: 767px) {
    html { font-size: 15px !important; }
}