/* ==========================================================================
   design-system.css — Bộ khung giao diện dùng chung cho mọi dashboard WCM
   ==========================================================================
   File này được COPY NGUYÊN VẸN vào mọi dự án (không gõ lại tay) để đảm bảo
   pixel-for-pixel giống nhau: cùng font, cùng kích cỡ header/nút/card/badge.
   Chỉ sửa file này ở nơi trung tâm rồi copy lại cho từng dự án khi cần đổi
   chuẩn — không sửa riêng lẻ từng dự án.
   ========================================================================== */

/* ---- Font: 1 họ font duy nhất, đủ toàn bộ dải weight, hỗ trợ tiếng Việt đầy đủ ---- */
/* Inter — hỗ trợ tiếng Việt tốt, đủ weight 400→900, độ dễ đọc cao ở cỡ chữ nhỏ
   (rất nhiều nhãn 9-11px trong các dashboard này). Thay cho cặp Playfair+Nunito
   cũ (Playfair cho tiêu đề, Nunito cho nội dung) — gộp về 1 font duy nhất để
   không bao giờ lệch weight/family giữa các dự án nữa. */

body, h1, h2, h3, h4, .font-serif {
    font-family: 'Inter', 'Nunito', system-ui, sans-serif;
}

body {
    background-color: #f8fafc;
    color: #0f172a;
}

/* ---- Thanh cuộn dùng chung ---- */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Hiệu ứng dùng chung ---- */
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.ai-typing::after { content: '|'; animation: pulse-soft 1s infinite; }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.toast-enter { animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ==========================================================================
   1. HEADER — kích cỡ, khoảng cách CỐ ĐỊNH cho mọi dashboard
   ========================================================================== */

.ds-header {
    background: linear-gradient(to right, #991b1b, #b91c1c, #dc2626); /* red-800 → red-700 → red-600 */
    color: #fff;
    padding: 1rem 1.25rem;           /* p-4 px-5, đồng nhất mobile */
    border-radius: 1.5rem;           /* rounded-3xl */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.15);
    border-bottom: 4px solid #450a0a; /* border-red-950 */
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .ds-header { padding: 1.25rem 1.5rem; }
}

.ds-header-icon-box {
    background: #fff;
    color: #b91c1c;
    padding: 0.75rem;
    border-radius: 1rem;             /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;               /* icon text-2xl, đồng nhất 2 dự án */
    font-weight: 900;
}

.ds-header-title {
    font-size: 1.125rem;             /* text-lg */
    font-weight: 900;                /* font-black */
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    line-height: 1.1;
}
@media (min-width: 768px) {
    .ds-header-title { font-size: 1.25rem; } /* text-xl */
}

/* Badge nhỏ trong header (trạng thái, ghi chú ngắn) */
.ds-header-badge {
    font-size: 9px;
    font-weight: 700;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    color: #fef2f2;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(255,255,255,.2);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Khu vực chứa cụm nút hành động bên phải header */
.ds-header-toolbar {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(6px);
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.15);
}
@media (min-width: 1024px) {
    .ds-header-toolbar { width: auto; }
}

/* ==========================================================================
   2. NÚT HÀNH ĐỘNG — 1 kích cỡ chuẩn cho mọi nút trong toolbar header
   ========================================================================== */

.ds-btn {
    height: 2.25rem;                 /* h-9 */
    padding: 0 0.875rem;              /* px-3.5 */
    border-radius: 0.75rem;           /* rounded-xl */
    font-size: 0.75rem;               /* text-xs */
    font-weight: 800;                 /* font-extrabold */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    border: 1px solid transparent;
    transition: background-color .15s ease, opacity .15s ease;
    white-space: nowrap;
    cursor: pointer;
}
.ds-btn:disabled { opacity: .6; cursor: not-allowed; }
.ds-btn i { font-size: 0.8125rem; }

.ds-btn-light   { background: #fff; color: #1e293b; border-color: #e2e8f0; }
.ds-btn-light:hover   { background: #f1f5f9; }

.ds-btn-primary { background: #4f46e5; color: #fff; border-color: #4338ca; } /* indigo-600 */
.ds-btn-primary:hover { background: #4338ca; }

.ds-btn-success { background: #059669; color: #fff; border-color: #047857; } /* emerald-600 */
.ds-btn-success:hover { background: #047857; }

.ds-btn-danger  { background: #e11d48; color: #fff; border-color: #be123c; } /* rose-600 */
.ds-btn-danger:hover  { background: #be123c; }

.ds-btn-warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; } /* amber-100 */
.ds-btn-warning:hover { background: #fde68a; }

.ds-btn-dark    { background: #0f172a; color: #fff; border-color: #1e293b; }
.ds-btn-dark:hover    { background: #000; }

.ds-btn-icon-only { width: 2.25rem; padding: 0; justify-content: center; }

/* ==========================================================================
   3. KPI / STAT CARD — 1 khuôn mẫu cho mọi card số liệu
   ========================================================================== */

.ds-kpi-card {
    background: #fff;
    padding: 1rem;
    border-radius: 1rem;             /* rounded-2xl */
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
}
.ds-kpi-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}
.ds-kpi-value {
    font-size: 1.5rem;               /* text-2xl */
    font-weight: 900;
    color: #1e293b;
}

/* ==========================================================================
   4. BADGE TRẠNG THÁI — cùng 1 kích cỡ/hình dạng, chỉ đổi màu theo ngữ nghĩa
   ========================================================================== */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 10px;
    font-weight: 900;
    padding: 0.125rem 0.625rem;
    border-radius: 0.5rem;
    border-width: 1px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ds-badge-success { background: #d1fae5; color: #065f46; border-color: #6ee7b7; } /* emerald */
.ds-badge-warning  { background: #fef3c7; color: #92400e; border-color: #fcd34d; } /* amber */
.ds-badge-danger   { background: #ffe4e6; color: #9f1239; border-color: #fda4af; } /* rose */
.ds-badge-info     { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; } /* indigo */
.ds-badge-neutral  { background: #f1f5f9; color: #475569; border-color: #cbd5e1; } /* slate */

/* ==========================================================================
   5. FILTER CHIP (bật/tắt) — luôn khác hẳn hình dạng so với nút hành động
   ========================================================================== */

.ds-filter-chip {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;           /* rounded-full — cố tình khác .ds-btn (rounded-xl) */
    border-width: 2px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ds-filter-chip-off { background: #fff; border-color: #cbd5e1; color: #475569; }
.ds-filter-chip-off:hover { background: #f8fafc; }
.ds-filter-chip-on  { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 4px 6px -1px rgba(79,70,229,.25); }

/* ==========================================================================
   6. MODAL / TOAST dùng chung
   ========================================================================== */

.ds-modal-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.ds-modal-icon-error   { background: #ffe4e6; color: #f43f5e; }
.ds-modal-icon-success { background: #d1fae5; color: #10b981; }
.ds-modal-icon-info    { background: #e0e7ff; color: #6366f1; }

/* Khoảng padding chuẩn cho ô nhập mật khẩu trong modal dùng chung */
.password-field, #modal-password-input {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    font-weight: 700;
    color: #1e293b;
    outline: none;
}
.password-field:focus, #modal-password-input:focus { border-color: #ef4444; }