/* 翡翠 Custom Styles (Anchor UI Kit) */

body { font-family: 'Nunito', Arial, sans-serif; background: #f8f9fb; padding-top: 56px; display: flex; flex-direction: column; min-height: 100vh; }
.page-wrapper { display: flex; flex-direction: column; flex: 1; }
.tofront { position: relative; z-index: 1; }
.text-white-50 { color: rgba(255,255,255,0.55) !important; }
.text-gray { color: #6c757d; }
marquee { display: block; }
.form-control.input-round { border-radius: 25px; padding-left: 1.2rem; padding-right: 1.2rem; }
.card { border-radius: 10px; }
.card-header { border-radius: 10px 10px 0 0 !important; }
.card-header .btn-link { text-decoration: none !important; padding: 0; white-space: normal; width: 100%; text-align: left; }
.card-header .btn-link:hover, .card-header .btn-link:focus { text-decoration: none !important; }
.table thead th { border-top: none; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; color: #888; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,0.015); }
.btn-group-vertical { display: flex; flex-direction: column; width: 100%; gap: 3px; }
.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive-4by3::before { padding-top: 75%; }
.embed-responsive::before { display: block; content: ""; }
.embed-responsive iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.toast-container { z-index: 10001; }
.badge-pill { border-radius: 50px; }
dl.row dt { font-weight: 600; color: #666; font-size: 0.85rem; }
dl.row dd { margin-bottom: 0.6rem; }

/* ---------- Sidebar ---------- */
#sidebar {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100vh;
    background: #1a1a2e; color: #eee; transition: transform .3s ease;
    z-index: 9999; display: flex; flex-direction: column;
    overflow-y: auto; scrollbar-width: thin;
}
#sidebar.open { transform: translateX(280px); }
#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.sidebar-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.2rem; font-weight: 700; font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0; background: #16213e;
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; padding: 10px 0; gap: 2px; overflow-y: auto; }
.sidenav-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 1.2rem; border-radius: 6px; color: #bbb;
    text-decoration: none; transition: background 0.15s, color 0.15s; font-size: 0.92rem;
}
.sidenav-link:hover { background: rgba(3,169,244,0.12); color: #03a9f4; text-decoration: none; }
button.sidenav-link { display: flex; align-items: center; width: 100%; font-family: inherit; }
.sidenav-link i { width: 18px; text-align: center; font-size: 0.9rem; }
.sidenav-group { margin-top: 6px; }
.sidenav-title {
    font-weight: 700; color: #777; margin: 10px 0 4px 1.2rem;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px;
    cursor: pointer; user-select: none; display: flex; align-items: center;
    transition: color 0.15s;
}
.sidenav-title:hover { color: #aaa; }
.sidenav-items { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.sidenav-group.open .sidenav-items { max-height: 300px; }
#sidebarOverlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#sidebarOverlay.show { opacity: 1; pointer-events: auto; }
@media (max-width:576px) { #sidebar { width: 80vw; max-width: 280px; } }

@keyframes welcomePop { 0% { opacity:0; transform:scale(0.7); } 40% { opacity:1; transform:scale(1.08); } 70% { opacity:1; transform:scale(1.0); } 100% { opacity:1; transform:scale(1.0); } }
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:0.9; } }