/* style.css - BẢN CẬP NHẬT BRANDING MWG (TGDĐ / ĐMX) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --mwg-yellow: #fed100;
    --mwg-orange: #f59e0b;
    --dmx-blue: #0088ce;
    --dmx-dark: #005f9e;
    --mwg-black: #111111;
    
    /* Chế độ bảng mặc định */
    --tbl-px: 10px; --tbl-py: 8px; --tbl-fz: 12px; --tbl-th-py: 12px; --tbl-th-fz: 11px;
    --table-bg: #ffffff; --table-header-bg: rgba(248, 250, 252, 0.95);
    --table-border: #f1f5f9; --table-text: #475569; --table-header-text: #64748b; --table-hover: #f0f9ff;
}

body { margin: 0; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; background-color: #f8fafc; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =========================================================
   FIX 1: LỖI ẨN SIDEBAR
   ========================================================= */
#main-sidebar { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-x: hidden; }
.sidebar-collapsed { 
    width: 0 !important; 
    min-width: 0 !important; 
    transform: translateX(-100%) !important; 
    opacity: 0 !important; 
    border: none !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   FIX 2: MÀU SẮC THẺ TỔNG QUAN (BRANDING MWG)
   ========================================================= */
.premium-card {
    position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.premium-card:hover { transform: translateY(-3px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.premium-card::after {
    content: ''; position: absolute; top: -50%; right: -20%; width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); border-radius: 50%;
}

/* Thẻ Xanh ĐMX */
.card-dmx { background: linear-gradient(135deg, var(--dmx-blue) 0%, var(--dmx-dark) 100%); color: #ffffff; }
/* Thẻ Vàng TGDĐ */
.card-mwg { background: linear-gradient(135deg, var(--mwg-yellow) 0%, var(--mwg-orange) 100%); color: #111111; }
/* Thẻ Đen Quyền Lực */
.card-black { background: linear-gradient(135deg, #334155 0%, var(--mwg-black) 100%); color: var(--mwg-yellow); }
/* Thẻ Xanh Lá */
.card-green { background: linear-gradient(135deg, #10b981 0%, #047857 100%); color: #ffffff; }

/* Badge hiển thị % */
.glass-badge { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.3); }
.card-mwg .glass-badge { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.15); color: #111; }

/* =========================================================
   BẢNG DỮ LIỆU (MƯỢT & CHUẨN KÍCH THƯỚC)
   ========================================================= */
.overflow-x-auto { max-height: calc(100vh - 120px); overflow-y: auto; } 
.pro-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--table-text); }
.pro-table thead th {
    position: sticky; top: 0; z-index: 10;
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; 
    color: var(--table-header-text) !important; 
    font-size: var(--tbl-th-fz) !important; 
    text-transform: uppercase; font-weight: 700;
    padding: var(--tbl-th-py) var(--tbl-px) !important; 
    border-bottom: 2px solid #cbd5e1; border-right: 1px solid var(--table-border);
}
.pro-table tbody td { 
    padding: var(--tbl-py) var(--tbl-px) !important; font-size: var(--tbl-fz) !important;
    border-bottom: 1px solid var(--table-border) !important; border-right: 1px solid var(--table-border);
    font-variant-numeric: tabular-nums; vertical-align: middle; 
}
.pro-table th:last-child, .pro-table td:last-child { border-right: none !important; }
.pro-table tbody tr:hover { background-color: var(--table-hover) !important; box-shadow: inset 3px 0 0 0 var(--dmx-blue); }

/* Điều chỉnh cỡ bảng */
body.table-compact { --tbl-px: 6px; --tbl-py: 4px; --tbl-fz: 11px; --tbl-th-py: 8px; --tbl-th-fz: 10px; }
body.table-relaxed { --tbl-px: 16px; --tbl-py: 14px; --tbl-fz: 13px; --tbl-th-py: 16px; --tbl-th-fz: 12px; }

/* Fix menu Multiselect */
#topbar-control { overflow: visible !important; }
#topbar-control.topbar-collapsed { overflow: hidden !important; }
.multiselect-options { z-index: 99999 !important; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15) !important; }

/* Dark mode overrides */
.dark {
    --table-bg: #1e293b; --table-header-bg: #0f172a; --table-border: #334155; 
    --table-text: #cbd5e1; --table-header-text: #94a3b8; --table-hover: #334155;
}
.dark body { background-color: #0f172a; }
.dark .pro-table thead th { background: linear-gradient(to bottom, #1e293b, #0f172a) !important; border-bottom: 2px solid #475569; border-right-color: #334155;}
.dark .pro-table tbody tr:hover td { color: #fff !important; }
.dark .bg-white { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc;}
.dark .bg-slate-50, .dark .bg-slate-100 { background-color: #0f172a !important; border-color: #334155 !important;}