/* =========================================
   WINUI 3 THEME - MATCHING STYLE.CSS
   ========================================= */

/* --- 1. FONTS (SF PRO DISPLAY - GIỮ NGUYÊN) --- */
@font-face {
    font-family: 'SF Pro Display';
    src: url('https://cdn.jsdelivr.net/gh/ubuntu2310fake/weblearning1234@main/SF-Pro-Display-Regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('https://cdn.jsdelivr.net/gh/ubuntu2310fake/weblearning1234@main/SF-Pro-Display-Bold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('https://cdn.jsdelivr.net/gh/ubuntu2310fake/weblearning1234@main/SF-Pro-Display-Medium.otf') format('opentype');
    font-weight: 500; font-style: normal; font-display: swap;
}

/* --- 2. CORE CONFIG (CẬP NHẬT TỪ STYLE.CSS) --- */
:root {
    --win-font: 'SF Pro Display', "Segoe UI", sans-serif !important;
    --win-primary: #005fba !important;       /* Lấy từ .wui-button-style */
    --win-primary-hover: #196ec0 !important; /* Lấy từ .wui-button-style:hover */
    --win-primary-active: #3184ca !important;/* Lấy từ .wui-button-style:active */
    --win-bg-base: #f3f3f3 !important;       /* Màu nền trung tính hơn, gần với wui-list */
    --win-border: rgb(229, 229, 229) !important; /* Lấy từ viền chuẩn của .wui-button */
    --win-border-bottom: rgb(204, 204, 204) !important; /* Viền dưới dày đặc trưng */
}

body {
    font-family: var(--win-font);
    background-color: var(--win-bg-base) !important;
    color: #1a1a1a !important; /* Màu chữ chuẩn từ style.css */
}

/* --- 3. PAGE TRANSITION --- */
@keyframes slide-up-fade {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
#main-container, .content {
    animation: slide-up-fade 0.4s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

/* --- 4. ACTIVE INDICATOR (THANH GẠT DỌC - KHỚP STYLE.CSS) --- */
/* Style.css sử dụng thanh cao 20px, rộng 4px, màu #005FBA */
.nav-main-link.active,
.list-group-item.active,
.dropdown-item.active {
    position: relative !important;
    background-color: rgba(0, 95, 186, 0.08) !important; /* Màu primary 8% opacity */
    color: var(--win-primary) !important;
    font-weight: 600 !important;
}

.nav-main-link.active::before,
.list-group-item.active::before,
.dropdown-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px !important;                  /* Khớp wui-h-center */
    height: 20px !important;                /* Khớp wui-h-center */
    background-color: var(--win-primary) !important;
    border-radius: 4px !important;          /* Bo tròn cả thanh thay vì chỉ 2 góc phải */
}

/* --- 5. UI COMPONENTS (WINUI STYLE TỪ STYLE.CSS) --- */

/* === Generic Buttons (khớp .wui-button) === */
.btn {
    border-radius: 4px !important;
    font-size: 14px !important; /* Khớp .wui-button-small */
    font-weight: normal !important; /* Style.css không dùng bold cho nút thường */
    transition: all 0.1s ease !important; /* Nhanh hơn để giống native */
    color: #1a1a1a !important;
}

/* Nút phụ/mặc định (tương đương .wui-button) */
.btn-alt-secondary, .btn-light, .btn-secondary {
    background-color: rgb(251, 251, 251) !important;
    border: 1px solid var(--win-border) !important;
    border-bottom: 1.3px solid var(--win-border-bottom) !important; /* ĐẶC TRƯNG WINUI */
    box-shadow: none !important;
}

.btn-alt-secondary:hover, .btn-light:hover, .btn-secondary:hover {
    background-color: #F6F6F6 !important;
    border-color: var(--win-border) !important;
    color: #1a1a1a !important;
}

.btn-alt-secondary:active, .btn-light:active, .btn-secondary:active {
    background-color: rgb(251, 251, 251) !important;
    border-bottom-width: 1px !important; /* Khi bấm, viền dưới mỏng lại tạo cảm giác lún xuống */
    color: #616161 !important;
    transform: scale(0.99); /* Nhẹ nhàng hơn */
}

/* === Primary Buttons (khớp .wui-button-style) === */
.btn-primary {
    background-color: var(--win-primary) !important;
    /* Border của nút primary trong style.css phức tạp hơn chút */
    border-top: 1px solid #146cbe !important;
    border-left: 1px solid #146cbe !important;
    border-right: 1px solid #146cbe !important;
    border-bottom: 1px solid #0F4E89 !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

.btn-primary:hover {
    background-color: var(--win-primary-hover) !important; /* #196ec0 */
    border-color: #146cbe !important;
}

.btn-primary:active {
    background-color: var(--win-primary-active) !important; /* #3184ca - Sáng hơn khi click! */
    color: #a8e0ff !important; /* Chữ đổi màu khi click */
    border-color: var(--win-primary-active) !important;
}

/* === Inputs & Selects (khớp .wui-list-select / .wui-button) === */
/* Style.css dùng chung style viền dưới dày 1.3px cho cả input/select */
.form-control, .form-select, .select2-selection--single {
    background-color: rgb(251, 251, 251) !important;
    border-radius: 4px !important;
    border: 1px solid var(--win-border) !important;
    border-bottom: 1.3px solid var(--win-border-bottom) !important; /* ĐẶC TRƯNG WINUI */
    min-height: 32px !important; /* Thấp hơn chút cho giống native */
    font-size: 14px !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
}

.form-control:hover, .form-select:hover {
    background-color: #F6F6F6 !important;
}

.form-control:focus, .form-select:focus, .select2-container--open .select2-selection--single {
    background-color: #FFFFFF !important;
    border-color: var(--win-border) !important;
    /* Khi focus, WinUI thường chỉ đổi màu viền dưới thành màu primary */
    border-bottom: 2px solid var(--win-primary) !important; 
    color: #1a1a1a !important;
}

/* === Modals & Cards (Giữ nguyên vẻ hiện đại nhưng tinh chỉnh màu) === */
.modal-content, .block-rounded {
    border-radius: 8px !important;
    /* Shadow mềm hơn theo phong cách Fluent mới */
    box-shadow: 0 8px 16px rgba(0,0,0,0.14) !important;
    border: 1px solid var(--win-border) !important;
    background-color: rgb(251, 251, 251) !important; /* Khớp màu nền các component khác */
}

.modal-content {
    overflow: visible !important; /* Cho phép tràn viền */
}

/* Giữ overflow: hidden cho block-rounded nếu cần, tách riêng ra */
.block-rounded {
    overflow: hidden !important;
}

.modal-header {
    background: rgb(251, 251, 251) !important;
    border-bottom: 1px solid var(--win-border) !important;
}

.modal-footer {
    background: #f3f3f3 !important; /* Màu tối hơn một chút cho footer */
    border-top: 1px solid var(--win-border) !important;
}

.select2-container--open { /* Hoặc class tương ứng của dropdown bạn dùng */
    z-index: 9999 !important; /* Đảm bảo nó cao hơn z-index của modal (thường là 1050) */
}