/* ============================================================
   MODAVIET - Stylesheet
   Bổ trợ cho Tailwind CSS (custom scrollbar, animations...)
   ============================================================ */

/* --- Tailwind custom colors (mirror của tailwind.config) --- */
:root {
    --color-modaviet:        #0056b3;
    --color-modaviet-light:  #e6f0ff;
    --color-modaviet-dark:   #004494;
}

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

/* --- Spin animation cho icon loading --- */
.btn-loading i {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- Tailwind color extension (khi không dùng CDN) --- */
.bg-modaviet        { background-color: var(--color-modaviet) !important; }
.bg-modaviet-light  { background-color: var(--color-modaviet-light) !important; }
.bg-modaviet-dark   { background-color: var(--color-modaviet-dark) !important; }
.text-modaviet      { color: var(--color-modaviet) !important; }
.text-modaviet-dark { color: var(--color-modaviet-dark) !important; }
.border-modaviet    { border-color: var(--color-modaviet) !important; }
.ring-modaviet      { --tw-ring-color: var(--color-modaviet) !important; }
.hover\:bg-modaviet-dark:hover { background-color: var(--color-modaviet-dark) !important; }
.hover\:text-modaviet:hover    { color: var(--color-modaviet) !important; }
.hover\:border-modaviet:hover  { border-color: var(--color-modaviet) !important; }
.focus\:ring-modaviet:focus    { --tw-ring-color: var(--color-modaviet); }
.focus\:border-modaviet:focus  { border-color: var(--color-modaviet) !important; }

/* --- Transition cho modal overlay --- */
.modal-backdrop {
    transition: opacity 0.2s ease;
}
.modal-content {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-sheen {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 32%),
        linear-gradient(120deg, rgba(255,255,255,0.08), transparent 48%);
    pointer-events: none;
}

.site-nav {
    overflow: hidden;
}

.site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(0, 86, 179, 0.08), transparent 28%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.10), transparent 30%);
    pointer-events: none;
}

.site-nav-logo {
    background: linear-gradient(135deg, #2563eb, #0056b3);
}

.site-nav-center,
.site-nav-user,
.site-nav-brand,
.header-user-panel {
    position: relative;
    z-index: 1;
}

.site-nav-tab {
    letter-spacing: -0.01em;
}

.header-user-panel {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.header-user-avatar {
    background: linear-gradient(135deg, #2563eb, #0056b3);
}

.header-action-btn:hover {
    background-color: #eff6ff;
    color: var(--color-modaviet-dark) !important;
}

.header-logout-btn:hover {
    background-color: var(--color-modaviet-dark) !important;
}

@media (max-width: 1023px) {
    .site-nav-center {
        order: 3;
    }

    .site-nav-user {
        width: 100%;
        justify-content: stretch;
    }

    .header-user-panel {
        width: 100%;
        justify-content: space-between;
    }
}