/* =============================================================================
   DCSS TECHNOLOGY VIETNAM - CUSTOM STYLING
   ============================================================================= */

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #F8FAFC;
    color: #1E293B;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Smartphone Phone Mockup Frame for Mobile Approval Screen */
.smartphone-frame {
    width: 380px;
    height: 740px;
    background: #111827;
    border-radius: 44px;
    box-shadow: 0 25px 50px -12px rgba(11, 37, 69, 0.35), 0 0 0 10px #1E293B, 0 0 0 12px #334155;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border: 3px solid #475569;
}

.smartphone-notch {
    width: 140px;
    height: 22px;
    background: #111827;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    z-index: 50;
}

.smartphone-screen {
    width: 100%;
    height: 100%;
    background: #F8FAFC;
    overflow-y: auto;
    border-radius: 36px;
    padding-top: 24px;
}

/* Pulse animation for warnings */
@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

.alert-pulse {
    animation: pulse-subtle 2s infinite ease-in-out;
}

/* Smooth Tab transitions */
.tab-content {
    display: none;
    animation: fadeIn 0.2s ease-in-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   MOBILE – CUỘN TỚI CUỐI VẪN ĐỌC ĐƯỢC ĐẦY ĐỦ NỘI DUNG
   ============================================================================= */
main {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Thanh địa chỉ động của Safari/Chrome iOS làm che đáy → bù thêm khi cuộn */
@media (max-width: 767px) {
    main {
        scroll-padding-bottom: 6rem;
    }
}

/* Menu sidebar cuộn mượt trên iOS */
#sidebar nav {
    -webkit-overflow-scrolling: touch;
}

/* Dropdown đổi vai trò trong menu: danh sách xổ ra dùng tông tối cho hợp sidebar */
#sidebar .js-role-switcher {
    color-scheme: dark;
}
#sidebar .js-role-switcher option {
    background-color: #0B2545;
    color: #E2E8F0;
}

/* =============================================================================
   BANNER DEMO (logo AKB + dòng thông báo) — responsive
   ============================================================================= */
#demo-banner {
    overflow: hidden;
}

#demo-banner .demo-banner__text {
    display: block;
    min-width: 0;
    max-width: 100%;
}

/* Màn hình rất hẹp: thu nhỏ chữ để dòng thông báo vẫn nằm gọn trong 28px */
@media (max-width: 400px) {
    #demo-banner .demo-banner__text {
        font-size: 8px;
        line-height: 1.1;
    }
}

/* Từ tablet trở lên: luôn 1 dòng, canh giữa */
@media (min-width: 768px) {
    #demo-banner .demo-banner__text {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

/* =============================================================================
   THẺ PR — TÍN HIỆU THỊ GIÁC Ở TRUNG TÂM PHÊ DUYỆT
   - .pr-card--mine : PR đang ở đúng cấp duyệt của tài khoản đăng nhập → nền xanh nhạt
   - .pr-card--warn : PR chờ duyệt làm vượt ngưỡng cảnh báo tiền → viền đỏ nhấp nháy nhẹ
   ============================================================================= */
.pr-card--mine {
    background-color: #EFF6FF;   /* xanh dương nhạt */
    border-color: #93C5FD;
}
.pr-card--mine:hover {
    border-color: #60A5FA;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.pr-card--warn {
    border-color: #EF4444 !important;
    animation: pr-warn-pulse 2.2s ease-in-out infinite;
}
.pr-card--warn:hover {
    border-color: #DC2626 !important;
}

/* Nhấp nháy nhẹ: chỉ đổi quầng sáng, không đổi kích thước → không gây giật bố cục */
@keyframes pr-warn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
    50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, .12); }
}

/* Người dùng tắt hiệu ứng chuyển động: giữ viền đỏ, bỏ nhấp nháy */
@media (prefers-reduced-motion: reduce) {
    .pr-card--warn {
        animation: none;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, .35);
    }
}

/* Khi in: bỏ nhấp nháy, giữ viền để vẫn nhận diện được */
@media print {
    .pr-card--warn { animation: none; box-shadow: none; }
}

/* =============================================================================
   WATERMARK LOGO AKB SOFTWARE
   - Cố định giữa trang, mờ, không chặn click (pointer-events: none)
   - Nằm dưới sidebar (z-40) và modal (z-50), trên nền nội dung
   - Tự ẩn khi in
   ============================================================================= */
.akb-watermark {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;      /* không ảnh hưởng thao tác */
    user-select: none;
    z-index: 25;
    overflow: hidden;
}

.akb-watermark img {
    width: min(44vw, 540px);
    height: auto;
    max-height: 58vh;
    opacity: 0.055;            /* rất mờ — đúng kiểu watermark văn bản */
    filter: grayscale(0.2);
    transform: translateY(4px);
    -webkit-user-drag: none;
    display: block;
}

/* Máy tính bảng */
@media (max-width: 1023px) {
    .akb-watermark img { width: min(60vw, 460px); opacity: 0.05; }
}

/* Điện thoại: nhỏ hơn, mờ hơn nữa để không che nội dung */
@media (max-width: 767px) {
    .akb-watermark { align-items: flex-start; padding-top: 22vh; }
    .akb-watermark img { width: 82vw; opacity: 0.045; }
}

/* Không xuất hiện trên bản in / PDF */
@media print {
    .akb-watermark { display: none !important; }
}

.nav-group {
    padding: 0.125rem 0.75rem 0.375rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================================
   TỐI ƯU GIAO DIỆN MOBILE
   ============================================================================= */
@media (max-width: 767px) {
    body {
        -webkit-tap-highlight-color: transparent;
    }

    /* Khung điện thoại giả lập co giãn theo bề rộng màn hình */
    .smartphone-frame {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 620px;
        border-radius: 30px;
        box-shadow: 0 18px 40px -18px rgba(11, 37, 69, 0.35), 0 0 0 6px #1E293B;
    }

    .smartphone-screen {
        border-radius: 24px;
        padding-top: 18px;
    }

    .smartphone-notch {
        width: 110px;
        height: 18px;
    }

    /* Bảng dữ liệu: chữ nhỏ hơn, cho phép cuộn ngang */
    table {
        font-size: 11px;
    }

    /* Ô nhập ngày không bị tràn */
    input[type="date"] {
        max-width: 120px;
    }
}

/* =============================================================================
   TRANG CHỦ - hiệu ứng thẻ
   ============================================================================= */
#tab-home .rounded-xl,
#tab-home .rounded-2xl {
    transition: box-shadow .18s ease, transform .18s ease;
}

#tab-home button:hover {
    transform: translateY(-1px);
}

.callout-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #EE6C4D;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9999px;
    box-shadow: 0 2px 4px rgba(238, 108, 77, 0.4);
}