/* ==============================================================
   GIAO DIỆN ERP MASTER STYLE - ÁP DỤNG TOÀN HỆ THỐNG
   ============================================================== */

/* Đổi nền hệ thống sang màu xám sáng hiện đại */
body { background-color: #f3f4f6 !important; }

/* Bo góc và đổ bóng cho mọi bảng điều khiển (Panel) */
.panel_s, .panel_s .panel-body {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 20px 0 rgba(34, 41, 47, 0.05) !important;
    transition: all 0.3s ease;
}

/* Hiệu ứng nổi lên khi di chuột vào Panel */
.panel_s:hover {
    box-shadow: 0 10px 25px 0 rgba(34, 41, 47, 0.1) !important;
}

/* Bo góc nút bấm mềm mại hơn */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
}

/* Nút Primary mang phong cách Gradient Xanh */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: white !important;
}
.btn-primary:hover {
    box-shadow: 0 4px 10px 0 rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-1px);
}

/* Nút Success mang phong cách Gradient Xanh Lá */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    border: none !important;
}

/* Nút Info mang phong cách Gradient Xanh Nhạt */
.btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%) !important;
    border: none !important;
}

/* --- ĐẦU BẢNG DATATABLES TOÀN HỆ THỐNG --- */
table.dataTable thead th, table.dataTable thead td {
    background-color: #f8fafc !important; 
    color: #475569 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-transform: uppercase;
    font-size: 13px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Dòng xen kẽ trong bảng */
table.dataTable tbody tr:nth-child(even) {
    background-color: #f8fafc !important;
}

/* --- MENU TRÁI (SIDEBAR) CHUYỂN MÀU GRADIENT --- */
/* Bo góc và đổi màu Gradient cho mục menu đang chọn */
#setup-menu-wrapper ul.nav > li.active > a, 
#side-menu ul.nav > li.active > a {
    border-radius: 0 20px 20px 0 !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
/* ==============================================================
   LỘT XÁC TOÀN BỘ BẢNG TIN (DASHBOARD) THEO PHONG CÁCH ERP
   ============================================================== */

/* 1. GIAO DIỆN CÁC KHỐI WIDGET TRÊN BẢNG TIN */
#dashboard .widget .panel_s, 
#dashboard .widget .panel-body,
#dashboard .top_stats_wrapper {
    border-radius: 16px !important;
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px -4px rgba(34, 41, 47, 0.08), 0 4px 8px -2px rgba(34, 41, 47, 0.04) !important;
    transition: all 0.3s ease;
}

/* Hiệu ứng nổi lên khi di chuột vào từng khối */
#dashboard .widget:hover .panel_s {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(34, 41, 47, 0.12), 0 10px 10px -5px rgba(34, 41, 47, 0.05) !important;
}

/* 2. LÀM ĐẸP TIÊU ĐỀ CÁC KHỐI WIDGET */
#dashboard .widget .panel-heading, 
#dashboard .widget-title,
.top_stats_wrapper .text-muted {
    background-color: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    padding: 15px 20px !important;
}

/* 3. LÀM NỔI BẬT THANH TIẾN ĐỘ (PROGRESS BARS) */
/* Làm cho thanh tiến độ dày hơn, bo góc tròn và nổi khối */
.progress {
    border-radius: 10px !important;
    height: 12px !important;
    background-color: #e2e8f0 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
    margin-top: 8px !important;
}
.progress-bar {
    border-radius: 10px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Đổ màu Gradient sặc sỡ cho từng loại thanh tiến độ */
.progress-bar-success, .bg-success { background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important; }
.progress-bar-danger, .bg-danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important; }
.progress-bar-warning, .bg-warning { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important; }
.progress-bar-info, .bg-info { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; }
.progress-bar-primary, .bg-primary { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important; }

/* 4. LỘT XÁC LỊCH CÔNG TÁC (CALENDAR) */
/* Đổi màu đầu lịch sang Gradient Tím/Xanh cực sang */
.fc-toolbar {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: white !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 15px 20px !important;
    margin-bottom: 0 !important;
}
.fc-toolbar h2 { color: white !important; font-weight: 800 !important; text-transform: uppercase; font-size: 18px !important; }
.fc-toolbar .fc-button {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
}
.fc-toolbar .fc-button:hover { background: rgba(255,255,255,0.35) !important; }
.fc-view-container { border-radius: 0 0 16px 16px !important; overflow: hidden; background: #fff !important; }
/* Bo góc các sự kiện trong lịch */
.fc-event { border-radius: 6px !important; border: none !important; padding: 4px !important; font-weight: 600 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }

/* 5. LÀM ĐẸP THANH TABS (Ví dụ: Công việc của tôi, Hồ sơ của tôi...) */
.nav-tabs { border-bottom: 2px solid #e2e8f0 !important; }
.nav-tabs > li > a { 
    border: none !important; 
    color: #64748b !important; 
    font-weight: 700 !important; 
    border-radius: 10px 10px 0 0 !important; 
    padding: 12px 24px !important; 
    text-transform: uppercase;
    font-size: 12px;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { 
    color: #3b82f6 !important; 
    background: transparent !important; 
    border-bottom: 3px solid #3b82f6 !important; 
}
.nav-tabs > li > a:hover { background-color: #f8fafc !important; color: #3b82f6 !important; }

/* 6. ĐẦU BẢNG BÁO CÁO TRONG WIDGET */
#dashboard table.dataTable thead th {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: white !important;
    border: none !important;
}

/* 7. NHẤN MẠNH CÁC CON SỐ THỐNG KÊ TO TRÊN CÙNG */
.top_stats_wrapper span.tw-text-2xl {
    font-size: 36px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ==============================================================
   LỘT XÁC 4 Ô THỐNG KÊ TRÊN CÙNG & THANH TABS BẢNG TIN
   ============================================================== */

/* 1. ĐỔ MÀU SẶC SỠ CHO 4 Ô THỐNG KÊ (TOP STATS) */
#widget-top_stats .row > div:nth-child(1) .top_stats_wrapper { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important; } /* Tím mộng mơ */
#widget-top_stats .row > div:nth-child(2) .top_stats_wrapper { background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important; } /* Xanh lá mạ */
#widget-top_stats .row > div:nth-child(3) .top_stats_wrapper { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; } /* Xanh dương biển */
#widget-top_stats .row > div:nth-child(4) .top_stats_wrapper { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important; } /* Cam nhiệt đới */

/* Ép toàn bộ chữ, số, icon bên trong 4 ô này thành màu Trắng tinh */
#widget-top_stats .top_stats_wrapper,
#widget-top_stats .top_stats_wrapper p,
#widget-top_stats .top_stats_wrapper span,
#widget-top_stats .top_stats_wrapper i,
#widget-top_stats .top_stats_wrapper .text-muted {
    color: #ffffff !important;
}

/* Hủy bỏ hiệu ứng chữ Gradient cũ (nếu có) để chữ trắng hiển thị rõ ràng */
#widget-top_stats .top_stats_wrapper span.tw-text-2xl {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Chuyển thanh tiến độ (Progress bar) bên trong thành dạng trong suốt và phát sáng */
#widget-top_stats .top_stats_wrapper .progress {
    background-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
}
#widget-top_stats .top_stats_wrapper .progress-bar {
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================== */

/* 2. BIẾN THANH TABS NGANG THÀNH DẠNG NÚT BẤM (PILL TABS) */
#dashboard .nav-tabs {
    background: #f1f5f9 !important; /* Nền xám nhạt ôm lấy các tab */
    border-radius: 12px !important;
    padding: 6px !important;
    border: none !important;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Cho phép cuộn ngang trên điện thoại */
    margin-bottom: 20px !important;
}

/* Căn chỉnh từng nút Tab */
#dashboard .nav-tabs > li {
    margin: 0 !important;
    flex: 1; /* Chia đều không gian cho các nút */
    min-width: max-content;
}

#dashboard .nav-tabs > li > a {
    border-radius: 8px !important;
    color: #64748b !important; /* Chữ xám đậm khi chưa chọn */
    background: transparent !important;
    border: none !important;
    padding: 12px 15px !important;
    margin: 0 2px !important;
    font-weight: 700 !important;
    text-align: center;
    transition: all 0.3s ease;
}

/* Tab ĐANG ĐƯỢC CHỌN: Nổi bật với Gradient Xanh và đổ bóng rực rỡ */
#dashboard .nav-tabs > li.active > a,
#dashboard .nav-tabs > li.active > a:focus,
#dashboard .nav-tabs > li.active > a:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Hiệu ứng khi di chuột vào Tab CHƯA chọn */
#dashboard .nav-tabs > li > a:hover:not(.active) {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-1px);
}

/* Ẩn thanh cuộn xấu xí trên trình duyệt máy tính */
#dashboard .nav-tabs::-webkit-scrollbar { height: 0px; display: none; }

/* ==============================================================
   1. BO GÓC TRÒN TRỊA CHO 4 Ô THỐNG KÊ TRÊN BẢNG TIN (DASHBOARD)
   ============================================================== */
#widget-top_stats .top_stats_wrapper {
    border-radius: 16px !important; /* Bo góc hoàn hảo y như ERP */
    overflow: hidden; /* Đảm bảo màu không bị tràn ra ngoài góc bo */
}


/* ==============================================================
   2. ĐỔ MÀU SẶC SỠ CHO CÁC Ô THỐNG KÊ (CÔNG VIỆC, KHÁCH HÀNG, LEADS, HỢP ĐỒNG...)
   ============================================================== */

/* Bắt trúng các ô thống kê có viền của hệ thống (bất kể thẻ <a> hay thẻ <div>) */
.tw-grid > .tw-border-solid,
.tw-overflow-x-auto > .tw-border-solid {
    border: none !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

/* Tự động đổ màu cầu vồng lặp lại theo thứ tự các ô (Dùng 8n để tự động lặp lại nếu có hơn 8 ô như trang Leads) */
.tw-grid > .tw-border-solid:nth-child(8n+1), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+1) { background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important; } /* Xanh lá */
.tw-grid > .tw-border-solid:nth-child(8n+2), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+2) { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important; } /* Tím */
.tw-grid > .tw-border-solid:nth-child(8n+3), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+3) { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; } /* Xanh dương */
.tw-grid > .tw-border-solid:nth-child(8n+4), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+4) { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important; } /* Cam */
.tw-grid > .tw-border-solid:nth-child(8n+5), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+5) { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important; } /* Đỏ */
.tw-grid > .tw-border-solid:nth-child(8n+6), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+6) { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%) !important; } /* Cyan */
.tw-grid > .tw-border-solid:nth-child(8n+7), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+7) { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important; } /* Hồng */
.tw-grid > .tw-border-solid:nth-child(8n+8), .tw-overflow-x-auto > .tw-border-solid:nth-child(8n+8) { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%) !important; } /* Xanh rêu */

/* Ép toàn bộ chữ, số, icon thành màu trắng tinh để nổi bật trên nền Gradient */
.tw-grid > .tw-border-solid *,
.tw-overflow-x-auto > .tw-border-solid * {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important; /* Làm mờ đường gạch phân cách (nếu có) */
    background: transparent !important;
}

/* Hiệu ứng nảy lên và đổ bóng sâu hơn khi di chuột */
.tw-grid > .tw-border-solid:hover,
.tw-overflow-x-auto > .tw-border-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
}

/* Xử lý phần thanh Tiến độ (Progress Bar) bên trong ô Thống báo phí để nó phát sáng thay vì biến mất */
.tw-grid > .tw-border-solid .progress,
.tw-overflow-x-auto > .tw-border-solid .progress {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    box-shadow: none !important;
}
.tw-grid > .tw-border-solid .progress-bar,
.tw-overflow-x-auto > .tw-border-solid .progress-bar {
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}