:root{
    --bg-deep:#0d0d1a;--bg-panel:#12102b;--bg-card:#1a1835;--bg-input:#1e1c3a;
    --accent:#7c3aed;--accent-light:#a78bfa;--accent-glow:rgba(124,58,237,.2);
    --green:#4ade80;--red:#f87171;--yellow:#fbbf24;
    --text-1:#f0eeff;--text-2:#9d9bc4;--text-3:#4a4870;
    --border:rgba(139,92,246,.18);--border-hi:rgba(139,92,246,.45);
    --r:14px;--r-sm:9px;--r-pill:999px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--bg-deep);
    color:var(--text-1);min-height:100vh;
}
.hidden{display:none !important}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);
    padding:32px;width:100%;max-width:380px;text-align:center;
}
.login-card h1{font-size:22px;margin-bottom:4px}
.login-card p{color:var(--text-2);font-size:13px;margin-bottom:22px}
.login-card input{
    width:100%;padding:12px 14px;background:var(--bg-input);border:1.5px solid var(--border);
    border-radius:var(--r-sm);color:var(--text-1);font-size:15px;margin-bottom:12px;outline:none;
}
.login-card input:focus{border-color:var(--accent)}
.login-card button{
    width:100%;padding:12px;background:var(--accent);border:none;border-radius:var(--r-sm);
    color:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:.2s;
}
.login-card button:hover{background:var(--accent-light)}
.login-error{color:var(--red);font-size:13px;margin-top:10px;min-height:18px}
.back-link{display:inline-block;margin-top:6px;color:var(--accent-light);font-size:13px;text-decoration:none}
.back-link:hover{text-decoration:underline}

/* Shell */
.shell{display:flex;min-height:100vh}
.side{
    width:220px;flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);
    padding:18px 12px;display:flex;flex-direction:column;gap:4px;
}
.side h2{font-size:16px;padding:6px 10px 16px;color:var(--text-1)}
.admin-whoami{padding:4px 10px 14px;font-size:12.5px;color:var(--text-2)}
.side button.tab{
    text-align:left;padding:10px 12px;background:transparent;border:none;color:var(--text-2);
    border-radius:var(--r-sm);cursor:pointer;font-size:14px;display:flex;gap:8px;align-items:center;
}
.side button.tab:hover{background:var(--bg-card);color:var(--text-1)}
.side button.tab.active{background:var(--accent-glow);color:var(--accent-light)}
.side a.tab{
    text-align:left;padding:10px 12px;background:transparent;color:var(--text-2);
    border-radius:var(--r-sm);cursor:pointer;font-size:14px;display:flex;gap:8px;align-items:center;
    text-decoration:none;
}
.side a.tab:hover{background:var(--bg-card);color:var(--text-1)}
.side a.tab.back{margin-top:auto}

.tab-badge{
    margin-left:auto;background:var(--red);color:#fff;
    font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);
    line-height:1.5;
}

/* Support / Feedback cards */
.support-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);
    padding:14px 16px;margin-bottom:12px;
}
.support-card-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-bottom:8px;font-size:13px;flex-wrap:wrap;
}
.support-card-head .muted{color:var(--text-2);font-size:12px}
.support-msg{
    color:var(--text-1);font-size:14px;line-height:1.6;
    white-space:pre-wrap;word-break:break-word;
    margin-bottom:10px;
}

.main{flex:1;padding:26px 30px;overflow-y:auto;max-height:100vh}
.main h1{font-size:21px;margin-bottom:18px}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.stat-card .num{font-size:24px;font-weight:700;font-family:'Space Grotesk',sans-serif}
.stat-card .lbl{font-size:12px;color:var(--text-2);margin-top:3px}

/* Table */
.table-wrap{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r);
    overflow-x: auto; /* Kích hoạt cuộn ngang khi bảng bị tràn trên mobile */
    -webkit-overflow-scrolling: touch; /* Giúp thao tác cuộn mượt hơn trên iOS */
}
table{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
    min-width: 750px; /* Đảm bảo cấu trúc các cột có đủ không gian hiển thị trên màn hình nhỏ */
}
th,td{
    padding:11px 14px;
    text-align:left;
    border-bottom:1px solid var(--border);
    word-break: break-word; /* Ngăn chữ quá dài làm hỏng layout */
}
th{color:var(--text-2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;background:rgba(255,255,255,.02)}
tr:last-child td{border-bottom:none}
td.muted{color:var(--text-2);font-size:12px}
.badge{padding:3px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;display:inline-block}
.badge.pending{background:rgba(251,191,36,.15);color:var(--yellow)}
.badge.approved{background:rgba(74,222,128,.15);color:var(--green)}
.badge.rejected{background:rgba(248,113,113,.15);color:var(--red)}
.badge.role-admin{background:rgba(124,58,237,.2);color:var(--accent-light)}
.badge.role-trusted{background:rgba(74,222,128,.15);color:var(--green)}
.badge.role-member{background:rgba(255,255,255,.06);color:var(--text-2)}

.btn{padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-1);font-size:12.5px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--border-hi)}
.btn.approve{border-color:rgba(74,222,128,.4);color:var(--green)}
.btn.approve:hover{background:rgba(74,222,128,.1)}
.btn.reject{border-color:rgba(248,113,113,.4);color:var(--red)}
.btn.reject:hover{background:rgba(248,113,113,.1)}

.btn-row{
    display:flex;
    gap:6px;
    flex-wrap: nowrap; /* Giữ các nút thao tác luôn nằm trên một dòng */
}

.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{
    padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-sm);color:var(--text-1);font-size:13.5px;outline:none;
}
.toolbar input{flex:1;min-width:160px}

.empty{padding:40px;text-align:center;color:var(--text-3);font-size:14px}

.title-input{width:140px;padding:5px 8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text-1);font-size:12.5px}

@media(max-width:900px){
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .shell{flex-direction:column}
    .side{
        width:100%;flex-direction:row;overflow-x:auto;padding:10px;
        /* FIX: trước đây .side (thanh tab trên cùng ở giao diện mobile) chỉ nằm
           trong luồng cuộn bình thường của trang, nên khi vuốt xuống để xem nội
           dung bên dưới, nó bị đẩy trôi lên và biến mất khỏi màn hình luôn -
           thay vì dính cố định ở mép trên như một thanh header thật sự.
           position:sticky + top:0 giữ nó luôn dính vào cạnh trên màn hình trong
           lúc cuộn, giống hành vi header quen thuộc trên di động. */
        position:sticky;top:0;z-index:40;
        background:var(--bg-panel);
        border-right:none;border-bottom:1px solid var(--border);
        box-shadow:0 4px 14px rgba(0,0,0,.25);
    }
    .side h2{display:none}
    .side a.tab.back{margin-top:0}
    .main{
        padding:16px;
        width: 100%;
        overflow-x: hidden; /* Ngăn toàn bộ trang bị kéo lệch, chỉ cho phép block table cuộn ngang */
        /* .main trước đây có max-height:100vh + overflow-y:auto (kế thừa từ rule gốc
           bên trên) - trên mobile, khi xếp CHỒNG dọc với .side (thay vì cạnh nhau như
           desktop), 100vh của riêng .main CỘNG THÊM chiều cao của .side khiến tổng nội
           dung vượt quá màn hình, buộc cả TRANG (body) phải cuộn thay vì chỉ .main -
           đây chính là nguyên nhân khiến .side (dù có sticky) vẫn bị tính toán chiều
           cao sai. Bỏ giới hạn max-height/overflow riêng ở đây, để toàn trang cuộn
           như một khối, còn .side thì dính lại nhờ sticky ở trên. */
        max-height:none;
        overflow-y:visible;
    }
    table{font-size:12px}
}