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

@font-face {
    font-family: '1FTV-Round-Rope';
    src: url('assets/1FTV-Round-Rope.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Dark Theme (Default) - Cực kỳ dịu mắt, huyền bí */
    --bg-primary: hsl(230, 25%, 8%);
    --bg-secondary: hsl(230, 22%, 12%);
    --bg-glass: rgba(20, 22, 36, 0.55);
    --glass-card-bg: rgba(20, 22, 36, 0.58);
    --border-glass: rgba(255, 255, 255, 0.08);

    --accent-primary: hsl(260, 85%, 65%);
    --accent-primary-glow: hsla(260, 85%, 65%, 0.2);
    --accent-secondary: hsl(330, 85%, 60%);
    --accent-secondary-glow: hsla(330, 85%, 60%, 0.2);

    --text-primary: hsl(210, 20%, 98%);
    --text-secondary: hsl(215, 15%, 75%);
    --text-muted: hsl(215, 12%, 50%);

    --success: hsl(145, 80%, 45%);
    --warning: hsl(38, 90%, 55%);
    --danger: hsl(355, 85%, 55%);
    --info: hsl(195, 85%, 50%);

    --bg-overlay: linear-gradient(rgba(10, 11, 20, 0.32), rgba(10, 11, 20, 0.42));
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
    --item-bg-hover: rgba(255, 255, 255, 0.05);
    --input-bg: rgba(255, 255, 255, 0.05);
    --item-tag-bg: rgba(255, 255, 255, 0.08);
    /* Nền bg1.png cố định là cảnh làng ninja về đêm cho cả 2 theme, nên tiêu đề Hero dùng tông sáng cố định để luôn nổi bật, không đổi theo theme */
    --hero-title-gradient: linear-gradient(135deg, #fff 30%, hsl(215, 15%, 82%) 70%, var(--accent-secondary));

    --font-sans: '1FTV-Round-Rope', sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

:root[data-theme="light"] {
    /* Light Theme - Ấm áp, dịu mắt, tránh loá (sử dụng tông màu kem/ngà) */
    --bg-primary: hsl(40, 20%, 93%);
    --bg-secondary: hsl(40, 15%, 87%);
    --bg-glass: rgba(253, 251, 247, 0.55);
    --glass-card-bg: rgba(253, 251, 247, 0.58);
    --border-glass: rgba(0, 0, 0, 0.08);

    --accent-primary: hsl(20, 85%, 52%);
    --accent-primary-glow: rgba(249, 115, 22, 0.15);
    --accent-secondary: hsl(198, 85%, 43%);
    --accent-secondary-glow: rgba(14, 165, 233, 0.15);

    --text-primary: hsl(220, 40%, 14%);
    --text-secondary: hsl(220, 20%, 34%);
    --text-muted: hsl(220, 12%, 52%);

    --success: hsl(145, 80%, 30%);
    --warning: hsl(38, 90%, 40%);
    --danger: hsl(355, 80%, 45%);
    --info: hsl(195, 85%, 35%);

    --bg-overlay: linear-gradient(rgba(242, 240, 234, 0.32), rgba(242, 240, 234, 0.42));
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
    --item-bg-hover: rgba(0, 0, 0, 0.04);
    --input-bg: rgba(0, 0, 0, 0.03);
    --item-tag-bg: rgba(0, 0, 0, 0.04);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

/* Ảnh nền làng ninja (bg1.png) rất khổ rộng (4000x1500) nên phóng theo chiều cao viewport
   rồi cho chạy ngang qua lại (trái sang phải, hết thì phải sang trái) thay vì cắt cúp tĩnh */
@keyframes bg-pan {
    0%   { background-position: 0% center; }
    100% { background-position: 100% center; }
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-image: url('assets/bg1.png');
    background-size: auto 100%;
    background-position: 0% center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    animation: bg-pan 50s ease-in-out infinite alternate;
}

/* Lớp phủ tối riêng biệt với ảnh nền (không ảnh hưởng animation chạy ngang), áp dụng cho cả 2 theme ở mức 15-25% */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    pointer-events: none;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
        background-position: center;
        background-size: cover;
    }
}

/* ============ CUỘN TỚI ĐÂU HIỆN DẦN TỚI ĐÓ (SCROLL REVEAL) ============ */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

/* NAVBAR DESIGN (GLASSMORPHISM) */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-glass);
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-smooth);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-brand img {
    height: 38px;
    filter: drop-shadow(0 0 8px var(--accent-primary-glow));
    transition: var(--transition-smooth);
}

.nav-brand img:hover {
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 24px;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover, .nav-link.active {
    color: var(--text-primary);
    background: var(--item-bg-hover);
}

.nav-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white !important;
    border-radius: 30px;
    padding: 8px 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--accent-primary-glow);
}

.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

/* Nút Đăng Nhập kiểu viền nổi bật (secondary CTA, đi cùng cặp với nút Đăng Ký .nav-btn solid) */
.nav-btn-outline {
    border: 2px solid var(--accent-secondary) !important;
    color: var(--accent-secondary) !important;
    border-radius: 30px;
    padding: 6px 18px;
    font-weight: 600;
}

.nav-btn-outline:hover, .nav-btn-outline.active {
    background: var(--accent-secondary) !important;
    color: white !important;
}

/* Giới Thiệu nổi bật hơn các mục menu thường để người chơi mới dễ nhận ra */
.nav-link-highlight {
    color: var(--accent-secondary) !important;
    font-weight: 700 !important;
    background: var(--accent-secondary-glow) !important;
    border: 1px solid var(--accent-secondary-glow);
}

.nav-link-highlight:hover, .nav-link-highlight.active {
    background: var(--accent-secondary-glow) !important;
    color: var(--accent-secondary) !important;
    border-color: var(--accent-secondary);
}

/* VIÊN NANG NỔI "THÔNG TIN" (Giới Thiệu / Giftcode) — lơ lửng cạnh trái, không chạm mép
   trên/dưới, tách biệt hẳn khỏi layout chính (không đẩy nội dung trang). Chỉ hiện ở màn
   hình rộng; màn hình hẹp hơn thì 2 link này hiện trực tiếp trong nav-links (.nav-info-link). */
.info-sidebar {
    display: none;
}

@media (min-width: 900px) {
    .info-sidebar {
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: fixed;
        top: 50%;
        left: 18px;
        transform: translateY(-50%);
        padding: 16px 8px;
        background: var(--glass-card-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--border-glass);
        border-radius: 24px;
        box-shadow: var(--card-shadow);
        z-index: 900;
    }

    .nav-info-link {
        display: none;
    }
}

.info-sidebar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.info-sidebar-link i {
    font-size: 1.2rem;
}

.info-sidebar-link:hover, .info-sidebar-link.active {
    color: var(--text-primary);
    background: var(--item-bg-hover);
}

.download-toggle-btn {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Bảng "Tải Game" bung ra khi bấm nút trong viên nang — cạnh viên nang ở màn hình rộng,
   giữa màn hình ở màn hình hẹp */
.info-flyout {
    display: none;
    position: fixed;
    top: 50%;
    left: 116px;
    transform: translateY(-50%);
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--glass-card-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    padding: 20px;
    z-index: 901;
}

.info-flyout.open {
    display: block;
}

.info-flyout-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.info-flyout-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.download-list-flyout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-list-flyout .download-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
}

.download-list-flyout .download-btn {
    text-align: center;
}

@media (max-width: 899px) {
    .info-flyout {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 360px;
    }
}

/* NÚT MENU HAMBURGER (chỉ hiện trên di động) */
.nav-toggle {
    display: none;
    background: var(--item-tag-bg);
    border: none;
    color: var(--text-primary);
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* RESPONSIVE: MÀN HÌNH DI ĐỘNG */
@media (max-width: 768px) {
    .navbar {
        padding: 12px 4%;
        flex-wrap: wrap;
    }

    .nav-brand span {
        display: none;
    }

    .nav-toggle {
        display: flex;
        order: 2;
    }

    .nav-links {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-top: 0;
        transition: var(--transition-smooth);
    }

    .nav-links.nav-open {
        max-height: 500px;
        opacity: 1;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--border-glass);
    }

    .nav-link, .nav-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .nav-dropdown-toggle {
        justify-content: space-between;
    }

    .nav-dropdown-menu {
        position: static;
        margin-top: 6px;
        box-shadow: none;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        padding-left: 20px;
    }

    .container {
        width: 94%;
        margin: 24px auto;
    }

    .hero {
        padding: 30px 10px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .glass-card {
        padding: 22px;
    }

    .card-title {
        font-size: 1.4rem;
    }

    .custom-table {
        min-width: 520px;
    }
}

/* CONTAINER */
.container {
    max-width: 1200px;
    width: 90%;
    margin: 40px auto;
    flex: 1;
}

/* HERO SECTION */
.hero {
    text-align: center;
    padding: 60px 20px;
    position: relative;
}

.hero-title {
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    background: var(--hero-title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Nền Hero luôn là ảnh làng ninja về đêm nên dùng bóng cố định để chữ nổi rõ ở cả 2 theme */
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.65));
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* Chip nhỏ nằm trực tiếp trên ảnh nền Hero (không có thẻ glass-card che phủ)
   nên dùng tông sáng + nền tối cố định để luôn rõ chữ, không phụ thuộc theme */
.hero-chip {
    background: rgba(10, 11, 20, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.92);
}

.hero-chip strong {
    color: #fff;
    font-size: 1.1rem;
    font-family: monospace;
}

.hero-chip span {
    color: rgba(255, 255, 255, 0.72);
}

.stat-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    padding: 20px 40px;
    min-width: 180px;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-family: monospace;
}

.stat-value.online { color: var(--success); }
.stat-value.accounts { color: var(--info); }
.stat-value.ram { color: var(--warning); }

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
}

/* PREMIUM CARDS (GLASSMORPHISM) */
.glass-card {
    background: var(--glass-card-bg);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.card-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* FORMS AND INPUTS */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--accent-primary);
    background: var(--bg-glass);
    box-shadow: 0 0 10px var(--accent-primary-glow);
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 4px 15px var(--accent-primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(180, 80, 250, 0.5);
}

.btn-secondary {
    background: var(--item-tag-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
}

.btn-secondary:hover {
    background: var(--item-bg-hover);
}

.btn-success { background-color: var(--success); color: white; }
.btn-success:hover { background-color: hsl(145, 80%, 38%); }
.btn-danger { background-color: var(--danger); color: white; }
.btn-danger:hover { background-color: hsl(355, 85%, 48%); }

/* DOWNLOAD LIST */
.download-list {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* LEADERBOARD SORTABLE COLUMNS */
#leaderboard-table th[data-sort-key] {
    cursor: pointer;
    user-select: none;
}

#leaderboard-table th[data-sort-key]:hover {
    color: var(--text-primary);
}

#leaderboard-table th[data-sort-key]::after {
    content: '\2195';
    margin-left: 6px;
    opacity: 0.4;
}

#leaderboard-table th[data-sort-key].sorted-desc::after {
    content: '\2193';
    opacity: 1;
}

#leaderboard-table th[data-sort-key].sorted-asc::after {
    content: '\2191';
    opacity: 1;
}

/* Nút "Xem thêm" bảng xếp hạng: chỉ dùng trên mobile (ẩn ở desktop, mobile.css sẽ hiện lại) */
.lb-show-more-btn {
    display: none;
}

.download-item {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition-smooth);
}

.download-item:hover {
    background: var(--item-bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

.download-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.download-icon {
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.download-meta h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

.download-meta span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.download-btn {
    background: var(--item-tag-bg);
    border: 1px solid var(--border-glass);
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
}

.download-btn:hover {
    background: var(--accent-primary);
    color: white;
}

/* ALERT MESSAGES */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-danger {
    background: rgba(235, 60, 60, 0.08);
    border: 1px solid rgba(235, 60, 60, 0.25);
    color: hsl(355, 85%, 45%);
}

.alert-success {
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.25);
    color: hsl(145, 80%, 32%);
}

/* DASHBOARD LAYOUT */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.profile-card {
    text-align: center;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 0 20px var(--accent-primary-glow);
}

.profile-username {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.profile-role {
    font-size: 0.85rem;
    color: var(--accent-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.profile-stats {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 15px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
}

.profile-stat-item {
    text-align: center;
}

.profile-stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-stat-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* TABLE STYLING */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    text-align: left;
}

.custom-table th {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 20px;
    border-bottom: 2px solid var(--border-glass);
}

.custom-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-glass);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.custom-table tr:hover td {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.02);
}

/* BADGES */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success { background: rgba(46, 204, 113, 0.15); color: var(--success); border: 1px solid rgba(46, 204, 113, 0.2); }
.badge-danger { background: rgba(235, 60, 60, 0.15); color: var(--danger); border: 1px solid rgba(235, 60, 60, 0.2); }
.badge-warning { background: rgba(243, 156, 18, 0.15); color: var(--warning); border: 1px solid rgba(243, 156, 18, 0.2); }
.badge-info { background: rgba(52, 152, 219, 0.15); color: var(--info); border: 1px solid rgba(52, 152, 219, 0.2); }

/* FOOTER */
.footer {
    background: var(--bg-glass);
    border-top: 1px solid var(--border-glass);
    padding: 30px 20px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: auto;
}

/* GRID LAYOUTS FOR ADMIN */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
}

@media (max-width: 992px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }
}

.admin-sidebar {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 20px;
    height: fit-content;
}

.admin-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.admin-menu-link:hover, .admin-menu-link.active {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.admin-menu-link.active {
    border-left: 3px solid var(--accent-primary);
}

/* SEARCH AND FILTER STYLES */
.search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.search-box input {
    flex: 1;
}

.search-box button {
    width: auto;
    white-space: nowrap;
}

/* MODAL / OVERLAY FOR GIFTCODE ITEMS */
.item-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-glass);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin: 4px;
    gap: 6px;
}

.item-tag-remove {
    cursor: pointer;
    color: var(--danger);
    font-weight: bold;
}