/* ========================================= */
/* --- GLOBAL STYLES --- */
/* ========================================= */
body {
    background-color: #EAEDED;
}

.card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ========================================= */
/* --- MOBILE & TABLET CSS (Max-width: 768px) --- */
/* ========================================= */

@media (max-width: 768px) {

    /* --- A. LOGIN PAGE --- */
    #login-container {
        padding: 20px;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f3f4f6;
    }

    #login-card {
        width: 100%;
        max-width: 350px;
        padding: 20px;
    }

    /* --- B. DASHBOARD LAYOUT --- */
    
    /* 1. Main Content Padding */
    main {
        padding: 15px 10px;
    }

    /* 2. HEADER OPTIMIZATION (Đã sửa lại đẹp) */
    header .max-w-7xl {
        padding-left: 10px;
        padding-right: 10px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Logo bên trái, Menu bên phải */
    }

    /* 2.1. Ẩn tiêu đề text to (nếu có) */
    header h1 {
        display: none !important;
    }

    /* 2.2. Xử lý Container chứa các nút bên phải */
    header .flex.items-center,
    header .items-center.gap-6 {
        gap: 0px !important; /* Khoảng cách giữa các nút */
        display: flex !important;
        align-items: center !important;
    }

    /* Xóa nền xám và border của cụm User Info cũ */
    header .items-center.gap-3.bg-gray-800 {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        display: flex !important;
        gap: 8px !important;
    }

    /* Ẩn các thành phần thừa: Username, Avatar, Dấu gạch dọc */
    header .items-center.gap-3.bg-gray-800 > div:first-child, /* Avatar/User */
    header .items-center.gap-3.bg-gray-800 > div.w-px {       /* Gạch dọc */
        display: none !important;
    }

    /* --- 2.3. STYLE CÁC NÚT (The Red Box Fix) --- */

/* [BUTTON 1] Nút SYNC (Style tối giản: Bỏ nền, Icon cam to) */
    header button.bg-amz_orange {
        background-color: transparent !important; /* Bỏ màu nền */
        box-shadow: none !important; /* Bỏ bóng */
        border: none !important; /* Bỏ viền */
        
        width: 40px !important; /* Giữ vùng bấm rộng cho dễ bấm */
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    /* Chỉnh Icon: Màu cam, To rõ */
    header button.bg-amz_orange i {
        font-size: 24px !important; /* Tăng kích thước icon lên cho rõ */
        color: #f97316 !important; /* Màu cam sáng (Orange) */
        margin: 0 !important;
        line-height: 1 !important;
        font-weight: bold !important; /* Làm icon dày hơn xíu nếu font hỗ trợ */
        transition: transform 0.5s ease; /* Hiệu ứng xoay mượt */
    }

    /* Hiệu ứng: Khi bấm hoặc di chuột vào thì xoay icon */
    header button.bg-amz_orange:active i,
    header button.bg-amz_orange:hover i {
        transform: rotate(180deg);
    }

    /* [BUTTON 2] Badge ADMIN (Viên thuốc) */
    /* Target vào thẻ chứa chữ ADMIN (thường là span hoặc div màu đỏ/cam) */
    header .items-center.gap-3.bg-gray-800 span,
    header .items-center.gap-3.bg-gray-800 .bg-red-600 { 
        border-radius: 99px !important; /* Bo tròn 2 đầu mềm mại */
        padding: 4px 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        height: 24px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1 !important;
        box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    }

    /* [BUTTON 3] Nút LOGOUT (Xám đậm - Tròn) */
    header .items-center.gap-3.bg-gray-800 a[href="logout.php"] {
        width: 38px !important; /* Bằng kích thước nút Sync */
        height: 38px !important;
        background-color: #374151 !important;
        color: white !important;
        border-radius: 50% !important; /* Tròn */
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        margin-left: 2px;
    }
    /* Ẩn chữ "Thoát" */
    header .items-center.gap-3.bg-gray-800 a[href="logout.php"] span {
        display: none !important;
    }
    /* Chỉnh icon logout */
    header .items-center.gap-3.bg-gray-800 a[href="logout.php"] i {
        font-size: 16px !important;
        margin: 0 !important;
    }


    /* --- C. KPI CARDS --- */
    .grid.md\:grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 cột */
        gap: 10px;
    }
    .grid.md\:grid-cols-5 > div {
        padding: 12px;
    }

    /* --- D. TOOLBAR / FILTER --- */
    .p-4.border-b.bg-gray-50 {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    /* Đảm bảo các input full width */
    .p-4.border-b.bg-gray-50 input,
    .p-4.border-b.bg-gray-50 select,
    .p-4.border-b.bg-gray-50 button.w-full {
        width: 100%;
        box-sizing: border-box;
    }
    /* Group nút filter (nếu nằm trong div con) */
    .p-4.border-b.bg-gray-50 > div {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    /* --- E. TABLE RESPONSIVE --- */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        border-radius: 8px; /* Bo góc bảng cho đẹp */
    }
    .overflow-x-auto table {
        min-width: 800px;
        font-size: 13px;
    }
    .overflow-x-auto th, 
    .overflow-x-auto td {
        padding: 8px 6px;
        white-space: nowrap; /* Tránh xuống dòng lộn xộn trong ô */
    }
    /* Input trong bảng nhỏ lại */
    .overflow-x-auto input, 
    .overflow-x-auto select {
        font-size: 11px;
        padding: 4px;
        height: 28px;
    }

    /* --- F. PAGINATION --- */
    .p-4.border-t.bg-gray-50 {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    .p-4.border-t.bg-gray-50 > div {
        width: 100%;
        justify-content: center;
    }
}