/**
 * Mobile Horizontal Scroll Fix
 * Ngăn chặn cuộn ngang trên mobile
 */

/* Ngăn overflow trên body và html */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix cho container và row */
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

.row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Fix cho các column */
[class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Fix cho images và media */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Fix cho tables trên mobile */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
    
    table {
        max-width: 100%;
    }
}

/* Fix cho cards và panels */
.card,
.panel {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix cho modals */
.modal-dialog {
    max-width: calc(100vw - 2rem);
    margin: 1rem;
}

/* Fix cho pre và code blocks */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Fix cho forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix cho buttons */
.btn,
button {
    max-width: 100%;
}

/* Fix cho navbar và header */
.navbar,
.header {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix cho sidebar */
.sidebar,
.aside {
    max-width: 100%;
}

/* Đảm bảo không có element nào vượt quá viewport */
* {
    max-width: 100%;
}

/* Ngoại lệ cho các element cần full width */
html,
body,
.container-fluid,
.row {
    max-width: 100vw !important;
}

/* ===================================
   HORIZONTAL SCROLLABLE TABS - Dashboard với Snap to Center
   =================================== */

/* Tabs có thể scroll ngang trên mobile */
@media (max-width: 991.98px) {
    /* Container của tabs với scroll snap */
    .nav-tabs.nav-line-tabs {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
        /* Scroll snap để tabs căn giữa */
        scroll-snap-type: x mandatory;
    }
    
    /* Ẩn scrollbar */
    .nav-tabs.nav-line-tabs::-webkit-scrollbar {
        display: none;
    }
    
    /* Mỗi tab item - snap to center */
    .nav-tabs.nav-line-tabs .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: center;
    }
    
    /* Tab link */
    .nav-tabs.nav-line-tabs .nav-link {
        padding: 1rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
    }
    
    /* Thêm padding cho tab đầu và cuối để có thể scroll vào giữa */
    .nav-tabs.nav-line-tabs .nav-item:first-child {
        margin-left: calc(50vw - 80px);
    }
    
    .nav-tabs.nav-line-tabs .nav-item:last-child {
        margin-right: calc(50vw - 80px);
    }
    
    /* Card header với position relative cho indicators */
    .card-header:has(.nav-tabs.nav-line-tabs) {
        position: relative;
        padding-bottom: 2rem !important;
    }
    
    /* Fade effect bên phải */
    .card-header:has(.nav-tabs.nav-line-tabs)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 2rem;
        width: 40px;
        background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        pointer-events: none;
        z-index: 2;
    }
    
    /* Fade effect bên trái */
    .card-header:has(.nav-tabs.nav-line-tabs)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 2rem;
        width: 40px;
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    /* Hiện fade trái khi scroll */
    .card-header.scrolled::before {
        opacity: 1;
    }
    
    /* Scroll indicator dots */
    .tab-scroll-indicator {
        position: absolute;
        bottom: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 0.5rem;
        z-index: 3;
    }
    
    .tab-scroll-indicator .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #E4E6EF;
        transition: all 0.3s;
    }
    
    .tab-scroll-indicator .dot.active {
        width: 20px;
        border-radius: 3px;
        background: #1B84FF;
    }
    
    /* Swipe hint animation */
    @keyframes swipeHint {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(-10px); }
    }
    
    .nav-tabs.nav-line-tabs.show-hint {
        animation: swipeHint 1.5s ease-in-out 2;
    }
}

/* ===================================
   MOBILE MENU FIX - Ẩn dropdown avatar trên mobile, giữ notification bell
   =================================== */

@media (max-width: 991.98px) {
    /* Chỉ ẩn avatar dropdown, không ẩn notification bell */
    .dropdown > a[data-bs-toggle="dropdown"]:not(.btn-icon) + .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .dropdown.show > a[data-bs-toggle="dropdown"]:not(.btn-icon) + .dropdown-menu {
        display: none !important;
    }
    
    /* Vô hiệu hóa avatar dropdown toggle */
    .dropdown > a[data-bs-toggle="dropdown"]:not(.btn-icon) {
        pointer-events: none !important;
    }
    
    /* Đảm bảo hamburger menu và notification bell hoạt động */
    .btn[data-bs-toggle="collapse"],
    .btn-icon[data-bs-toggle="dropdown"] {
        pointer-events: auto !important;
    }
    
    /* Ẩn icon mũi tên xuống của avatar dropdown */
    .dropdown > a[data-bs-toggle="dropdown"]:not(.btn-icon) .ki-down {
        display: none !important;
    }
    
    .dropdown > a[data-bs-toggle="dropdown"]:not(.btn-icon):hover {
        cursor: default;
    }
}

@media (min-width: 992px) {
    .dropdown > a[data-bs-toggle="dropdown"] {
        pointer-events: auto !important;
    }
}

/* ===================================
   TAB UNDERLINE - Gạch chân dưới tab active
   =================================== */

/* Gạch chân cho tab active trên mobile */
@media (max-width: 991.98px) {
    .nav-tabs.nav-line-tabs .nav-link {
        position: relative;
    }
    
    .nav-tabs.nav-line-tabs .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 3px;
        background: #1B84FF;
        border-radius: 2px 2px 0 0;
        transition: width 0.3s ease;
    }
    
    .nav-tabs.nav-line-tabs .nav-link.active::after {
        width: 60%;
    }
}

/* Gạch chân cho desktop */
@media (min-width: 992px) {
    .nav-tabs.nav-line-tabs .nav-link {
        position: relative;
    }
    
    .nav-tabs.nav-line-tabs .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: #1B84FF;
        border-radius: 2px 2px 0 0;
        transition: width 0.3s ease;
    }
    
    .nav-tabs.nav-line-tabs .nav-link.active::after {
        width: 100%;
    }
}

/* ===================================
   DASHBOARD SPACING FIX - Khoảng cách giữa form và info cards
   =================================== */

@media (max-width: 991.98px) {
    /* Thêm khoảng cách cho info cards bên phải trên mobile */
    .tab-pane .row > .col-lg-4 {
        margin-top: 2rem;
    }
    
    /* Đảm bảo form submit button có khoảng cách phía dưới */
    .tab-pane form .row:last-child {
        margin-bottom: 1.5rem;
    }
    
    /* Card info có border dashed */
    .card.border-dashed {
        margin-top: 2rem;
    }
}