:root {
--bg-color: #f5f5f5;
--text-color: #1e1e2f;
--accent-color: #5865F2;
--sidebar-bg: rgba(255,255,255,0.9);
--card-bg: rgba(255,255,255,0.8);
--shadow-color: rgba(0,0,0,0.15);
--border-color: rgba(0,0,0,0.1);
}
[data-theme="dark"] {
--bg-color: #1e1e2f;
--text-color: #f5f5f5;
--accent-color: #5865F2;
--sidebar-bg: rgba(0,0,0,0.25);
--card-bg: rgba(40,40,55,0.8);
--shadow-color: rgba(0,0,0,0.4);
--border-color: rgba(255,255,255,0.08)
}
/* Hide HTML Body */
body {
display: none;
}
* {margin:0; padding:0; box-sizing:border-box;}
body { font-family:'Montserrat', sans-serif; background:var(--bg-color); color:var(--text-color); transition:0.4s; }
a { text-decoration:none; color: var(--text-color); }
/* =========================
DASHBOARD LAYOUT
========================= */
.dashboard {
display: flex;
height: 100vh;
overflow: hidden;
}
/* =========================
SIDEBAR (PREMIUM)
========================= */
.sidebar {
width: 260px;
height: 100vh;
padding: 18px 14px;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
left: 0;
/* THEME-BASED GLASS */
background: var(--sidebar-bg);
backdrop-filter: blur(16px);
border-right: 1px solid var(--border-color);
/* DEPTH */
box-shadow:
0 10px 30px var(--shadow-color),
inset 0 1px 0 rgba(255,255,255,0.05);
overflow-y: auto;
}
/* =========================
LOGO / HEADER
========================= */
.sidebar .logo {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.4px;
margin-bottom: 18px;
padding: 10px 12px;
border-radius: 12px;
color: var(--accent-color);
background: linear-gradient(
135deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.02)
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 4px 12px var(--shadow-color);
}
/* =========================
SECTION GROUPING
========================= */
.sidebar-section {
margin-bottom: 18px;
}
.sidebar-title {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-color);
opacity: 0.55;
margin: 10px 0 6px 10px;
}
/* =========================
LINKS
========================= */
.sidebar a {
position: relative;
display: flex;
align-items: center;
padding: 11px 12px;
margin-bottom: 4px;
border-radius: 12px;
font-size: 0.92rem;
font-weight: 500;
color: var(--text-color);
transition: all 0.18s ease;
}
/* HOVER BACKGROUND LAYER */
.sidebar a::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(
135deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.02)
);
opacity: 0;
transition: 0.2s ease;
}
/* HOVER */
.sidebar a:hover {
transform: translateX(5px);
}
.sidebar a:hover::before {
opacity: 1;
}
/* ACTIVE STATE */
.sidebar a.active {
background: linear-gradient(
135deg,
var(--accent-color),
#7b8cff
);
color: white;
box-shadow:
0 6px 18px var(--shadow-color),
0 0 10px rgba(88,101,242,0.35);
}
/* ACTIVE INDICATOR */
.sidebar a.active::after {
content: "";
position: absolute;
left: -6px;
height: 60%;
width: 4px;
border-radius: 6px;
background: white;
opacity: 0.9;
}
/* =========================
DIVIDER
========================= */
.sidebar-divider {
height: 1px;
margin: 14px 6px;
background: linear-gradient(
90deg,
transparent,
var(--border-color),
transparent
);
}
/* =========================
BOTTOM SECTION
========================= */
.sidebar-bottom {
margin-top: -30px; /* normal spacing instead of pushing down */
padding-top: 10px;
}
/* =========================
REVERT BUTTON
========================= */
.revert-btn {
margin-top: 10px;
padding: 11px;
width: 100%;
border-radius: 12px;
border: none;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
background: linear-gradient(
135deg,
#ff9800,
#ffc061
);
color: white;
box-shadow: 0 6px 16px var(--shadow-color);
transition: all 0.2s ease;
}
.revert-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px var(--shadow-color);
}
/* =========================
SCROLLBAR
========================= */
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 10px;
}
/* =========================
MOBILE: HIDE SECTION TITLES & TIGHTEN SPACING
========================= */
@media (max-width: 900px) {
/* Hide section titles */
.sidebar-title {
display: none;
}
/* Reduce spacing between links */
.sidebar-section {
margin-bottom: -10px; /* minimal gap */
}
.sidebar a {
padding: 8px 10px; /* smaller padding for compactness */
font-size: 0.85rem; /* slightly smaller text */
margin-bottom: 2px;
}
/* Reduce divider size */
.sidebar-divider {
margin: 6px 2px;
}
/* Bottom section stays visible */
.sidebar-bottom {
margin-top: 8px;
padding-top: 6px;
}
.sidebar-bottom a {
padding: 8px 10px;
font-size: 0.85rem;
}
.revert-btn {
padding: 6px 8px;
font-size: 0.8rem;
}
/* Optional: adjust logo */
.sidebar .logo {
font-size: 1.2rem;
padding: 6px 8px;
margin-bottom: 12px;
}
/* Sidebar height */
.sidebar {
height: 100vh;
overflow: visible; /* no scroll */
padding: 10px 8px;
}
}
/* MAIN CONTENT */
.main-content {
flex: 1;
padding: 40px 30px;
overflow-y: auto; /* scroll only the main content */
height: 100vh; /* restrict height to viewport so scroll works */
}
section {
display: none;
}
section.active {
display: block;
}
h1,
h2 {
margin-bottom: 10px;
}
.card {
background: var(--card-bg);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 3px 8px var(--shadow-color);
transition: 0.3s;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px var(--shadow-color);
}
.btn {
background: var(--accent-color);
color: white;
padding: 10px 20px;
border-radius: 8px;
font-weight: bold;
transition: 0.3s;
display: inline-block;
margin-top: 10px;
cursor: pointer;
}
.btn:hover {
background: #4752c4;
transform: scale(1.05);
}
/* ================= NEWS SECTION ===================== */
#news h2 {
font-size:1.8rem;
margin-bottom:5px;
text-shadow: 0 0 2px rgba(0,0,0,.3);
}
#news p {
margin-bottom:25px;
}
/* NEWS CARD */
.news-post {
display:flex;
align-items:flex-start;
gap:15px;
margin-bottom:20px;
padding:18px 20px;
background:var(--card-bg);
border-radius:16px;
box-shadow:0 8px 25px rgba(0,0,0,.15);
cursor:pointer;
transition:all .3s ease;
position:relative;
overflow:hidden;
border:3px solid transparent;
}
.news-post:hover {
transform: translateY(-4px);
box-shadow:0 14px 35px rgba(0,0,0,.25), 0 0 15px rgba(88,101,242,.25);
border-color: #5865F2; /* subtle premium hover outline */
}
.news-post img {
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
transition: all .3s ease;
}
.news-post:hover img {
transform: scale(1.05);
box-shadow:0 8px 20px rgba(0,0,0,.35);
}
/* CONTENT */
.news-post div {
flex:1;
}
.news-post div strong {
display:block;
font-size:1.1rem;
margin-bottom:3px;
color:#fff;
transition: all .3s ease;
}
.news-post div strong:hover {
color:#5865F2;
}
.news-post div span {
display:block;
color:gray;
font-size:0.85rem;
margin-bottom:5px;
}
.news-post div p {
margin:0;
color:#ccc;
font-size:0.95rem;
}
/* MODAL */
.modal {
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
backdrop-filter:blur(5px);
justify-content:center;
align-items:center;
z-index:999;
padding:20px;
}
.modal-content {
background:var(--card-bg);
width:500px;
max-width:95%;
border-radius:18px;
overflow:hidden;
text-align:center;
box-shadow:0 20px 50px rgba(0,0,0,.35);
transform:scale(0.95);
opacity:0;
transition:all .3s ease;
}
.modal.show .modal-content {
transform:scale(1);
opacity:1;
}
.modal-content h2 {
margin-top:15px;
font-size:1.6rem;
}
.modal-content h4 {
margin-top:5px;
color:#ccc;
font-weight:400;
}
.modal-content p {
margin:15px 20px;
line-height:1.6;
color:#ddd;
}
.modal-content img {
width:90%;
margin:10px 0;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,.25);
transition:all .3s ease;
}
.modal-content img:hover {
transform:scale(1.02);
box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.close {
position:absolute;
top:10px;
right:15px;
font-size:28px;
cursor:pointer;
color:#fff;
transition:all .3s ease;
}
.close:hover {
color:#ff6b6b;
transform:rotate(90deg);
}
/* ========================== */
/* ===== NEWS POST TEXT FIX ===== */
/* ========================== */
.news-post strong {
display: block;
margin-bottom: 4px;
font-size: 1rem; /* keeps text small */
font-weight: 600; /* semi-bold */
color: #1E90FF !important; /* bright blue visible on both light and dark */
transition: color 0.3s ease;
}
/* Hover effect (optional) */
.news-post:hover strong {
color: #1C86EE !important; /* slightly darker blue on hover */
}
/* ========================== */
/* ===== NEWS SECTION ====== */
/* ========================== */
#news h2 {
font-size: 1.6rem; /* match other sections */
font-weight: 700;
color: var(--text-color);
margin-bottom: 6px;
transition: all 0.3s ease;
cursor: default;
}
/* hover effect (same as changelog/admin) */
#news h2:hover {
letter-spacing: 1px;
transform: translateY(-2px);
text-shadow: 0 5px 15px rgba(88,101,242,0.4);
}
#news p {
font-size: 0.95rem;
margin-bottom: 20px;
transition: all 0.3s ease;
}
/* hover effect */
#news p:hover {
transform: translateX(3px);
color: #bbb;
}
/* News post cards */
.news-post {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: var(--card-bg);
border-radius: 16px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.3s ease;
}
.news-post:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
.news-post img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--card-bg);
transition: all 0.3s ease;
}
.news-post:hover img {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}
.news-post strong {
font-size: 1rem;
display: block;
margin-bottom: 4px;
}
.news-post span {
font-size: 0.85rem;
color: #aaa;
}
.news-post p {
margin-top: 6px;
color: #555;
font-size: 0.95rem;
}
/* ================= NEWS MODAL BASE ================= */
.news-modal {
display: none;
position: fixed;
inset: 0;
z-index: 999;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(6px);
}
/* ================= CONTENT ================= */
.news-modal-content {
width: 600px;
max-width: 95%;
max-height: 85vh;
overflow-y: auto;
border-radius: 20px;
background: linear-gradient(145deg, #1c1c2a, #26263f);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 25px 60px rgba(0,0,0,0.7);
animation: modalFade 0.25s ease;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* hover lift */
.news-modal-content:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: 0 35px 80px rgba(0,0,0,0.8);
}
/* smooth open */
@keyframes modalFade {
from { transform: scale(0.94); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ================= CLOSE BUTTON ================= */
.news-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
}
.news-close:hover {
background: rgba(255,255,255,0.25);
transform: scale(1.15) rotate(90deg);
box-shadow: 0 0 10px rgba(255,255,255,0.3);
}
/* ================= BANNER ================= */
.news-banner {
height: 180px;
background-size: cover;
background-position: center;
position: relative;
transition: transform 0.5s ease;
}
/* subtle zoom on modal hover */
.news-modal-content:hover .news-banner {
transform: scale(1.05);
}
.news-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.2),
rgba(20,20,30,0.8),
rgba(20,20,30,1)
);
}
/* ================= HEADER ================= */
.news-header {
padding: 20px 24px 10px;
}
/* TITLE */
.news-header h2 {
margin: 0;
color: #5865F2;
position: relative;
transition: all 0.3s ease;
}
/* hover glow */
.news-header h2:hover {
transform: translateY(-2px) scale(1.02);
text-shadow:
0 0 8px rgba(88,101,242,0.6),
0 0 18px rgba(88,101,242,0.4);
}
/* make h2 shrink to text width */
.news-header h2 {
display: inline-block; /* π₯ key fix */
position: relative;
}
/* underline */
.news-header h2::after {
content: "";
position: absolute;
left: 0; /* start at text start */
bottom: -4px;
width: 0%;
height: 2px;
background: #5865F2;
border-radius: 2px;
transition: width 0.3s ease;
}
/* hover expands across text only */
.news-header h2:hover::after {
width: 100%;
}
/* SUBTITLE */
.news-subtitle {
margin-top: 5px;
font-size: 14px;
opacity: 0.7;
transition: all 0.3s ease;
}
.news-subtitle:hover {
transform: translateY(-1px);
opacity: 1;
color: #c7c7ff;
}
/* group hover (optional but nice) */
.news-header:hover h2 {
transform: translateY(-2px);
text-shadow: 0 0 12px rgba(88,101,242,0.6);
}
.news-header:hover .news-subtitle {
opacity: 1;
}
/* ================= BODY ================= */
.news-body {
padding: 10px 24px 24px;
display: grid;
gap: 16px;
}
/* sections */
.news-section {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
padding: 14px;
border-radius: 12px;
transition: transform 0.2s ease, background 0.2s ease;
}
.news-section:hover {
background: rgba(255,255,255,0.06);
transform: translateY(-2px);
}
.news-section h4 {
margin-bottom: 8px;
font-size: 14px;
opacity: 0.8;
}
.news-section p,
.news-section li {
font-size: 13px;
opacity: 0.85;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.news-section:hover p,
.news-section:hover li {
transform: translateX(2px);
opacity: 1;
}
.news-section ul {
padding-left: 18px;
}
/* ================= HIGHLIGHT ================= */
.news-highlight {
background: rgba(88,101,242,0.15);
border: 1px solid rgba(88,101,242,0.3);
padding: 12px;
border-radius: 10px;
font-size: 13px;
text-align: center;
color: #c7c7ff;
transition: all 0.3s ease;
}
.news-highlight:hover {
transform: scale(1.02);
box-shadow: 0 0 20px rgba(88,101,242,0.4);
}
.news-modal-content {
overflow-y: auto;
/* Hide scrollbar (Firefox) */
scrollbar-width: none;
/* Hide scrollbar (IE/Edge legacy) */
-ms-overflow-style: none;
}
/* Hide scrollbar (Chrome, Safari) */
.news-modal-content::-webkit-scrollbar {
display: none;
}
/* ================= LIGHT THEME SUPPORT (FIXED) ================= */
body:not([data-theme="dark"]) .news-modal {
background: rgba(0,0,0,0.25);
backdrop-filter: blur(6px);
}
/* MAIN CONTAINER */
body:not([data-theme="dark"]) .news-modal-content {
background: linear-gradient(180deg, #f4f6fb, #eef1f7);
border: 1px solid rgba(0,0,0,0.06);
color: #111827;
box-shadow:
0 40px 100px rgba(0,0,0,0.25),
0 10px 30px rgba(0,0,0,0.1);
}
/* ================= CLOSE BUTTON (FIXED VISIBILITY) ================= */
body:not([data-theme="dark"]) .news-close {
background: rgba(255,255,255,0.9); /* brighter background */
color: #111827; /* darker icon */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
body:not([data-theme="dark"]) .news-close:hover {
background: #5865F2;
color: white;
transform: scale(1.15) rotate(90deg);
box-shadow: 0 0 15px rgba(88,101,242,0.4);
}
/* ================= BANNER OVERLAY (LESS AGGRESSIVE) ================= */
body:not([data-theme="dark"]) .news-banner-overlay {
background: linear-gradient(
to bottom,
rgba(255,255,255,0.05), /* almost transparent */
rgba(255,255,255,0.2), /* very soft fade */
rgba(240,243,250,0.85) /* blends into modal */
);
}
/* ================= HEADER ================= */
body:not([data-theme="dark"]) .news-header h2 {
color: #111827;
}
body:not([data-theme="dark"]) .news-subtitle {
color: #6b7280;
}
/* ================= SECTIONS ================= */
body:not([data-theme="dark"]) .news-section {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
body:not([data-theme="dark"]) .news-section:hover {
background: #f9f9fb;
border-color: rgba(0,0,0,0.12);
}
/* TEXT */
body:not([data-theme="dark"]) .news-section p,
body:not([data-theme="dark"]) .news-section li {
color: #374151;
}
/* ================= HIGHLIGHT ================= */
body:not([data-theme="dark"]) .news-highlight {
background: rgba(88,101,242,0.08);
border: 1px solid rgba(88,101,242,0.25);
color: #374151;
}
body:not([data-theme="dark"]) .news-highlight:hover {
box-shadow: 0 0 20px rgba(88,101,242,0.25);
}
/* ================= TITLE EFFECTS ================= */
body:not([data-theme="dark"]) .news-header h2:hover {
text-shadow:
0 0 6px rgba(88,101,242,0.4),
0 0 12px rgba(88,101,242,0.25);
}
/* underline */
body:not([data-theme="dark"]) .news-header h2::after {
background: #5865F2;
}
/* subtitle hover */
body:not([data-theme="dark"]) .news-subtitle:hover {
color: #5865F2;
}
/* ================= SCROLL FADE ================= */
body:not([data-theme="dark"]) .news-modal-content::after {
background: linear-gradient(
to bottom,
transparent,
rgba(240,243,250,0.95)
);
}
.news-header h2,
.news-subtitle {
cursor: default;
user-select: none;
}
.news-modal-content {
cursor: default;
}
/* ================= NEWS MODAL MOBILE GAP FIX ================= */
@media (max-width: 600px) {
.news-modal {
align-items: flex-start; /* push modal down */
padding-top: 70px; /* π adjust if your navbar height changes */
}
.news-modal-content {
margin-top: 0;
}
}
/* extra small phones */
@media (max-width: 420px) {
.news-modal {
padding-top: 80px;
}
}
/* MODAL */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:1000; }
.modal-content { background:var(--bg-color); color:var(--text-color); padding:30px; border-radius:12px; width:90%; max-width:800px; position:relative; box-shadow:0 10px 30px var(--shadow-color); max-height:90%; overflow-y:auto; }
.modal-content img { width:100%; margin-bottom:10px; border-radius:8px; }
.close { position:absolute; top:15px; right:15px; font-size:1.5rem; cursor:pointer; }
/* TO-DO BOARD */
.todo-board { display:flex; flex-wrap:wrap; gap:20px; margin-top:20px; }
.todo-card { flex:1 1 250px; background: var(--card-bg); padding:20px; border-radius:12px; box-shadow:0 3px 8px var(--shadow-color); cursor:pointer; transition:0.3s; }
.todo-card:hover { transform:translateY(-3px); box-shadow:0 5px 15px var(--shadow-color); }
/* FILES */
.file-search { margin-bottom:20px; display:flex; gap:10px; }
.file-search input { flex:1; padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.2); }
.file-list .file-item { display:flex; justify-content:space-between; align-items:center; background:var(--card-bg); padding:10px 15px; border-radius:8px; margin-bottom:10px; box-shadow:0 2px 6px var(--shadow-color); transition:0.3s; }
.file-list .file-item:hover { transform:translateY(-2px); box-shadow:0 5px 15px var(--shadow-color); }
/* THEME TOGGLE */
.theme-toggle { margin-top:auto; padding:10px 15px; border:none; border-radius:50px; background:var(--accent-color); color:white; cursor:pointer; font-weight:500; transition:0.3s; }
.theme-toggle:hover { background:#4752c4; }
.ticket-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px var(--shadow-color);
}
.ticket-item strong {
font-size: 1.05rem;
}
.sidebar-divider {
height: 1px;
background: rgba(0,0,0,0.15);
margin: 15px 0;
}
[data-theme="dark"] .sidebar-divider {
background: rgba(255,255,255,0.15);
}
.logout-btn {
display: block;
padding: 10px 15px;
border-radius: 8px;
transition: 0.3s;
}
.logout-btn:hover {
background: #e74c3c;
color: white;
}
.logout-btn {
opacity: 0.7;
}
a[data-page="profile"] {
opacity: 0.7; /* 70% visible */
transition: opacity 0.3s;
}
a[data-page="profile"]:hover {
opacity: 1; /* fully visible on hover */
}
.logout-btn:hover {
opacity: 1;
}
.chart-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.chart-card {
flex: 1 1 48%;
min-width: 300px;
}
.chart-card canvas {
max-height: 250px;
}
/* ===== STATS GRID ===== */
.stats-grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap:20px;
}
.stat-card {
background: var(--card-bg);
padding:20px;
border-radius:14px;
box-shadow:0 4px 12px var(--shadow-color);
transition:0.3s;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow:0 8px 20px var(--shadow-color);
}
.stat-number {
font-size:2rem;
font-weight:700;
margin-top:10px;
color: var(--accent-color);
}
/* ===== BIRTHDAYS ===== */
.birthday-grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap:15px;
}
.birthday-card {
display:flex;
align-items:center;
gap:15px;
padding:15px;
border-radius:12px;
background: var(--card-bg);
box-shadow:0 3px 8px var(--shadow-color);
transition:0.3s;
}
.birthday-card:hover {
transform: translateY(-3px);
box-shadow:0 6px 15px var(--shadow-color);
}
.birthday-card img {
width:55px;
height:55px;
border-radius:50%;
object-fit:cover;
}
.birthday-info h4 {
margin:0;
font-size:1rem;
}
.birthday-info small {
opacity:0.7;
}
.disclaimer {
background: rgba(255, 200, 0, 0.15);
padding: 12px 18px;
border-radius: 10px;
margin-top: 10px;
border: 1px solid rgba(255, 200, 0, 0.4);
transition: all 0.3s ease; /* smooth hover transition */
}
.disclaimer:hover {
background: rgba(255, 200, 0, 0.3); /* darker background on hover */
border-color: rgba(255, 200, 0, 0.6); /* stronger border */
transform: scale(1.02); /* subtle zoom effect */
}
/* ===== RELEASE MODAL (Theme Safe) ===== */
.modal-content {
background: var(--card-bg);
color: var(--text-color);
border-radius: 18px;
padding: 35px;
max-width: 650px;
width: 95%;
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
border: 1px solid var(--border-color);
}
.modal-content h2 {
margin-bottom: 10px;
}
.modal-content h4 {
opacity: 0.7;
margin-bottom: 20px;
font-weight: 500;
}
.release-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 15px;
background: rgba(88,101,242,0.15);
color: #5865F2;
}
.modal-content ul {
margin-left: 20px;
line-height: 1.8;
}
.modal-content p {
line-height: 1.7;
}
.modal {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
}
/* ===================================================== */
/* ================= EXECUTIVE ROADMAP ================= */
/* ===================================================== */
#roadmap header {
text-align: center;
padding: 60px 20px;
background: linear-gradient(135deg, var(--accent-color), #404EED);
border-radius: 16px;
margin-bottom: 40px;
color: white;
}
#roadmap header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
#roadmap header p {
opacity: 0.9;
}
#roadmap .container {
width: 100%;
max-width: 1100px;
margin: auto;
}
#roadmap .section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2rem;
}
/* Timeline */
#roadmap .roadmap {
position: relative;
margin-left: 20px;
}
#roadmap .roadmap::before {
content: '';
position: absolute;
left: 15px;
top: 0;
width: 4px;
height: 100%;
background: var(--accent-color);
}
#roadmap .roadmap-item {
margin-bottom: 60px;
padding-left: 50px;
position: relative;
}
#roadmap .roadmap-item::before {
content: '';
position: absolute;
left: 6px;
top: 5px;
width: 20px;
height: 20px;
background: var(--accent-color);
border-radius: 50%;
}
/* Override default card for roadmap only */
#roadmap .card {
background: var(--card-bg);
padding: 25px;
border-radius: 14px;
transition: 0.3s ease;
box-shadow: 0 6px 18px var(--shadow-color);
}
#roadmap .card:hover {
transform: translateY(-5px);
}
/* Badges */
#roadmap .badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.75rem;
margin-bottom: 12px;
font-weight: 600;
color: white;
}
#roadmap .quarter { background: var(--accent-color); }
#roadmap .event { background: #2ecc71; }
#roadmap .recruitment { background: #f39c12; }
#roadmap .governance { background: #9b59b6; }
#roadmap .card h3 {
margin-bottom: 10px;
}
#roadmap .card ul {
margin-top: 10px;
padding-left: 18px;
opacity: 0.9;
}
#roadmap .card li {
margin-bottom: 6px;
}
/* ===== PREMIUM TODO TIMELINE ===== */
.todo-header {
text-align: center;
margin-bottom: 50px;
}
.todo-header h1 {
font-size: 2.5rem;
color: var(--accent-color);
}
.todo-header p {
opacity: 0.8;
}
.todo-timeline {
display: flex;
flex-direction: column;
gap: 50px;
}
/* CATEGORY TITLES */
.timeline-category h2 {
margin-bottom: 25px;
font-size: 1.6rem;
color: var(--accent-color);
border-bottom: 2px solid var(--accent-color);
padding-bottom: 5px;
}
/* TIMELINE BASE */
.timeline {
position: relative;
margin-left: 30px;
padding-left: 20px;
}
.timeline::before {
content: '';
position: absolute;
left: 10px;
top: 0;
width: 4px;
height: 100%;
background: var(--accent-color);
border-radius: 2px;
}
/* TIMELINE ITEM */
.timeline-item {
position: relative;
margin-bottom: 40px;
display: flex;
align-items: flex-start;
}
.timeline-badge {
position: absolute;
left: -25px;
width: 40px;
height: 40px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: white;
box-shadow: 0 4px 15px var(--shadow-color);
transition: transform 0.3s;
}
.timeline-item:hover .timeline-badge {
transform: scale(1.1);
}
/* TIMELINE CARD */
.timeline-card {
background: var(--card-bg);
padding: 20px 25px;
border-radius: 15px;
margin-left: 40px;
width: 100%;
box-shadow: 0 8px 25px var(--shadow-color);
transition: transform 0.3s, box-shadow 0.3s;
}
.timeline-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px var(--shadow-color);
}
.timeline-card h3 {
margin-bottom: 10px;
font-size: 1.2rem;
color: var(--accent-color);
}
.timeline-card p {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 6px;
}
/* STATUS BADGES */
.status-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
margin-top: 10px;
}
.status-badge.todo { background: rgba(88,101,242,0.15); color: var(--accent-color); }
.status-badge.progress { background: rgba(46,204,113,0.15); color: #2ecc71; }
.status-badge.done { background: rgba(88,101,242,0.15); color: #5865F2; }
/* BADGE COLORS */
.todo-badge { background: #5865F2; }
.progress-badge { background: #2ecc71; }
.done-badge { background: #9b59b6; }
/* Hide default scrollbar */
body, .main-content, section {
scrollbar-width: thin; /* Firefox: thin scrollbar */
scrollbar-color: transparent transparent; /* Firefox: hide thumb */
}
/* Chromium browsers */
body::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
section::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent; /* hide track */
}
body::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
section::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 10px;
border: 3px solid transparent;
opacity: 0; /* initially invisible */
transition: opacity 0.3s;
}
/* Show scrollbar when scrolling */
body.scrolling::-webkit-scrollbar-thumb,
.main-content.scrolling::-webkit-scrollbar-thumb,
section.scrolling::-webkit-scrollbar-thumb {
opacity: 1;
}
/* Optional: smooth hover effect for Chromium */
body::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
section::-webkit-scrollbar-thumb:hover {
background: #4752c4;
}
/* Hide mobile header on desktop */
.mobile-header {
display: none;
}
.close-sidebar {
display: none;
}
/* ===================================================== */
/* ================= MOBILE DASHBOARD ================== */
/* ===================================================== */
/* Hide close button on desktop */
.close-sidebar {
display: none;
}
@media (max-width: 900px) {
/* ===== PREVENT BACKGROUND SCROLL ===== */
body.no-scroll {
overflow: hidden;
height: 100vh;
}
/* ===== MOBILE HEADER ===== */
.mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
background: var(--card-bg);
box-shadow: 0 3px 10px var(--shadow-color);
position: sticky;
top: 0;
z-index: 1100;
}
.mobile-header button {
font-size: 1.5rem;
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
}
/* ===== LAYOUT RESET ===== */
.dashboard {
flex-direction: column;
height: auto;
overflow: visible;
}
.main-content {
height: auto;
overflow: visible;
padding: 20px 15px;
}
/* ===================================================== */
/* ================= OFF-CANVAS SIDEBAR ================ */
/* ===================================================== */
.sidebar {
position: fixed;
top: 0;
left: -260px;
height: 100vh;
width: 250px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
background: var(--card-bg);
box-shadow: 5px 0 20px var(--shadow-color);
transition: left 0.3s ease;
z-index: 1200;
overflow-y: auto;
}
.sidebar.active {
left: 0;
}
/* MOBILE: sidebar actions at bottom */
.sidebar-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto; /* push to bottom on mobile */
padding-bottom: 20px; /* optional spacing from bottom */
}
.theme-toggle {
margin-top: 0; /* remove desktop-only auto spacing */
}
/* ===== CLOSE BUTTON (mobile only) ===== */
.close-sidebar {
display: block;
align-self: flex-end;
font-size: 1.4rem;
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
margin-bottom: 10px;
}
/* ===== OVERLAY ===== */
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1150;
}
.overlay.active {
opacity: 1;
pointer-events: all;
}
/* ===================================================== */
/* ================= COMPACT STATS ===================== */
/* ===================================================== */
.todo-card {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
}
.todo-card p {
margin: 0;
}
/* ===================================================== */
/* ================= CHART STACK ======================= */
/* ===================================================== */
.chart-row {
flex-direction: column;
}
.chart-card {
min-width: unset;
width: 100%;
}
/* ===================================================== */
/* ================= ROADMAP FIX ======================= */
/* ===================================================== */
#roadmap .roadmap {
margin-left: 0;
}
#roadmap .roadmap::before {
left: 8px;
}
#roadmap .roadmap-item {
padding-left: 30px;
}
#roadmap .roadmap-item::before {
left: 0;
}
/* ===================================================== */
/* ================= TIMELINE FIX ====================== */
/* ===================================================== */
.timeline {
margin-left: 0;
padding-left: 30px;
position: relative;
}
.timeline::before {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 3px;
}
.timeline-item {
position: relative;
}
.timeline-badge {
position: absolute;
left: 20px;
transform: translateX(-50%);
width: 30px;
height: 30px;
font-size: 1rem;
}
.timeline-card {
margin-left: 40px;
padding: 18px;
}
/* ===================================================== */
/* ================= FILES & TICKETS =================== */
/* ===================================================== */
.file-item,
.ticket-item {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px;
}
.file-item span:last-child,
.ticket-item div:last-child {
width: 100%;
display: flex;
gap: 10px;
}
.file-item .btn,
.ticket-item .btn {
flex: 1;
text-align: center;
}
/* ===================================================== */
/* ================= OTHER FIXES ======================= */
/* ===================================================== */
.news-post {
flex-direction: column;
align-items: flex-start;
}
.birthday-grid {
grid-template-columns: 1fr;
}
.modal-content {
width: 95%;
padding: 20px;
}
iframe {
height: 500px !important;
}
}
/* ================= PROFILE SECTION ================= */
.profile-section {
width: 100%;
font-family: 'Segoe UI', sans-serif;
margin: 20px auto;
transition: all 0.3s ease;
}
/* Banner */
.profile-banner-container img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
margin-bottom: -50px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
z-index: 0; /* Keep behind avatar and cards */
position: relative;
}
.profile-banner-container img:hover {
transform: scale(1.02);
box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
/* Main Grid */
.profile-main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
max-width: 1000px;
margin: 0 auto;
position: relative; /* needed for z-index of inner elements */
z-index: 1; /* avatar & settings above banner */
}
/* Left: Avatar + Info */
.profile-info-card {
display: flex;
align-items: center;
gap: 20px;
background: var(--card-bg);
padding: 20px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 2; /* always above banner */
}
.profile-info-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 30px rgba(0,0,0,0.15);
}
.avatar-wrapper img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid var(--accent-color);
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.avatar-wrapper img:hover {
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.profile-text h2 {
font-size: 1.8rem;
color: var(--accent-color);
margin-bottom: 6px;
transition: color 0.3s ease;
}
.profile-text h2:hover {
color: #3f45d6;
}
.profile-text p {
opacity: 0.8;
font-weight: 500;
}
/* Right: Settings Card */
.profile-settings-card {
background: var(--card-bg);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 2; /* above banner */
}
.profile-settings-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 30px rgba(0,0,0,0.15);
}
.profile-settings-card h3 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 15px;
color: var(--accent-color);
text-align: center; /* centered title */
transition: color 0.3s ease;
}
.profile-settings-card h3:hover {
color: #3f45d6;
}
/* Individual setting item */
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
transition: transform 0.2s ease;
}
.setting-item:hover {
transform: translateX(3px);
}
/* Select field */
.setting-item select {
padding: 6px 10px;
border-radius: 12px;
border: 1px solid #ccc;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.setting-item select:hover {
border-color: var(--accent-color);
box-shadow: 0 4px 15px rgba(88,101,242,0.3);
}
/* Buttons */
.logout-wrapper .btn {
background: var(--accent-color);
color: #fff;
border: none;
padding: 10px 22px;
border-radius: 14px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.logout-wrapper .btn:hover {
background: #3f45d6;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
/* ===================== TOGGLE SWITCH ===================== */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
transition: transform 0.3s ease;
}
.switch:hover {
transform: scale(1.05);
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0;
right: 0; bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 28px;
}
.slider:before {
position: absolute;
content: "";
height: 22px; width: 22px;
left: 3px; bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--accent-color);
}
input:checked + .slider:before {
transform: translateX(22px);
}
.setting-text {
display: flex;
flex-direction: column;
gap: 3px;
}
/* Adjust description text for dark/light mode */
.setting-desc {
font-size: 0.85rem;
font-weight: 400;
transition: color 0.3s ease;
color: rgba(255,255,255,0.7); /* default dark mode */
}
/* Light mode description fix */
body[data-theme="light"] .setting-desc {
color: rgba(0,0,0,0.7);
}
.setting-desc:hover {
color: var(--accent-color);
}
/* Responsive */
@media (max-width: 900px) {
.profile-main-grid {
grid-template-columns: 1fr;
}
}
.premium-account-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 22px;
border-radius:14px;
font-weight:600;
font-size:.95rem;
background:linear-gradient(135deg,#5865F2,#7289DA);
color:white;
text-decoration:none;
transition:all .3s ease;
box-shadow:0 6px 18px rgba(88,101,242,.35);
}
.premium-account-btn:hover{
transform:translateY(-2px) scale(1.03);
box-shadow:0 10px 25px rgba(88,101,242,.5);
background:linear-gradient(135deg,#4752c4,#5865F2);
}
.premium-account-btn:active{
transform:translateY(0);
box-shadow:0 4px 10px rgba(88,101,242,.25);
}
/* Locked state (when role cannot access) */
.premium-account-btn.locked{
opacity:.5;
cursor:not-allowed;
pointer-events:none;
background:#777;
box-shadow:none;
}
/* ================= ACCOUNT SETTINGS ================= */
.account-settings-section{
width:100%;
font-family:'Segoe UI',sans-serif;
margin:20px auto;
transition:all .3s ease;
}
/* Banner */
.account-banner-container{
position:relative;
width:100%;
height:250px;
margin-bottom:-50px;
z-index:0;
}
.account-banner-container img{
width:100%;
height:100%;
object-fit:cover;
border-radius:20px;
box-shadow:0 8px 20px rgba(0,0,0,.15);
transition:transform .4s ease, box-shadow .4s ease;
position:relative;
}
.account-banner-container img:hover{
transform:scale(1.02);
box-shadow:0 12px 30px rgba(0,0,0,.25);
}
/* Banner Button */
/* Banner Button - Top Right */
.banner-edit-btn{
position:absolute;
top:15px; /* Move to top */
right:15px; /* Keep on right */
background:var(--accent-color);
color:#fff;
padding:8px 16px;
border-radius:12px;
font-weight:600;
cursor:pointer;
font-size:.85rem;
transition:all .3s ease;
}
.banner-edit-btn:hover{
background:#3f45d6;
transform:translateY(-2px);
box-shadow:0 6px 15px rgba(0,0,0,.25);
}
.banner-edit-btn input{
display:none;
}
/* Main Grid (Matches profile-main-grid) */
.account-main-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:start;
max-width:1000px;
margin:0 auto;
position:relative;
z-index:1;
}
/* Left: Profile Card (Matches profile-info-card) */
.account-profile-card{
display:flex;
align-items:center;
gap:20px;
background:var(--card-bg);
padding:20px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.1);
transition:transform .3s ease, box-shadow .3s ease;
position:relative;
z-index:2;
}
.account-profile-card:hover{
transform:translateY(-5px);
box-shadow:0 18px 30px rgba(0,0,0,.15);
}
/* Avatar */
.account-avatar-wrapper{
position:relative;
}
.account-avatar-wrapper img{
width:100px;
height:100px;
border-radius:50%;
border:4px solid var(--accent-color);
object-fit:cover;
transition:transform .3s ease, box-shadow .3s ease;
}
.account-avatar-wrapper img:hover{
transform:scale(1.1);
box-shadow:0 8px 20px rgba(0,0,0,.2);
}
/* Avatar Edit Button */
.avatar-edit-btn{
position:absolute;
bottom:-5px;
right:-5px;
background:var(--accent-color);
color:white;
font-size:.75rem;
padding:6px 10px;
border-radius:10px;
cursor:pointer;
transition:.25s;
}
.avatar-edit-btn:hover{
background:#3f45d6;
}
.avatar-edit-btn input{
display:none;
}
/* Right: Account Settings Card (IDENTICAL to profile-settings-card) */
.account-settings-card {
background: var(--card-bg);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 2;
}
.account-settings-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 30px rgba(0,0,0,0.15);
}
.account-settings-card h3 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 15px;
color: var(--accent-color);
text-align: center;
transition: color 0.3s ease;
}
.account-settings-card h3:hover {
color: #3f45d6;
}
/* Inputs */
.account-setting-item{
display:flex;
flex-direction:column;
gap:5px;
}
.account-setting-item input{
padding:9px 12px;
border-radius:12px;
border:1px solid #ccc;
font-weight:500;
transition:all .25s ease;
}
.account-setting-item input:hover{
border-color:var(--accent-color);
box-shadow:0 4px 15px rgba(88,101,242,.2);
}
.account-setting-item input:focus{
outline:none;
border-color:var(--accent-color);
box-shadow:0 4px 15px rgba(88,101,242,.25);
}
/* Readonly inputs (like Username) */
.account-setting-item input[readonly]{
background:#e5e5e5;
color:#666;
opacity:.75;
cursor:not-allowed;
border:1px solid #ccc;
}
/* Dark mode fix */
body[data-theme="dark"] .account-setting-item input[readonly]{
background:#2a2a2a;
color:#aaa;
border:1px solid #444;
}
/* Disable hover effects */
.account-setting-item input[readonly]:hover{
border-color:#ccc;
box-shadow:none;
transform:none;
}
/* Password feedback */
#passwordStrength{
font-size:.8rem;
opacity:.7;
}
#passwordMatch{
font-size:.8rem;
font-weight:500;
}
/* Button */
.save-account-btn{
background:var(--accent-color);
color:white;
border:none;
padding:10px 20px;
border-radius:14px;
font-weight:600;
cursor:pointer;
transition:all .3s ease;
}
.save-account-btn:hover{
background:#3f45d6;
transform:translateY(-2px) scale(1.02);
box-shadow:0 8px 20px rgba(0,0,0,.25);
}
/* Responsive */
@media(max-width:900px){
.account-main-grid{
grid-template-columns:1fr;
}
}
/* ========================= */
/* ===== MOBILE ACCOUNT SETTINGS FIX ===== */
/* ========================= */
@media (max-width: 900px) {
/* Add spacing above the profile card so it no longer overlaps the banner */
.account-profile-card {
margin-top: 80px; /* pushes it below the banner */
}
/* Optional: reduce avatar size slightly on mobile for better fit */
.account-avatar-wrapper img {
width: 80px;
height: 80px;
}
/* Optional: adjust padding inside profile card for smaller screens */
.account-profile-card {
padding: 15px;
}
}
/* ================= EMBED BUILDER ================= */
.embed-builder-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin-top:20px;
}
/* Cards */
.embed-editor,
.embed-preview{
background:var(--card-bg);
border-radius:14px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
backdrop-filter:blur(8px);
transition:all .25s ease;
}
.embed-editor:hover,
.embed-preview:hover{
transform:translateY(-3px);
box-shadow:0 14px 40px rgba(0,0,0,0.25);
}
/* Inputs */
.embed-editor input,
.embed-editor textarea,
.embed-editor select{
width:100%;
background:rgba(0,0,0,0.05);
border:none;
border-radius:8px;
padding:10px 12px;
margin-top:6px;
margin-bottom:15px;
color:var(--text-color);
font-size:14px;
outline:none;
transition:.2s;
}
/* Dark mode inputs */
[data-theme="dark"] .embed-editor input,
[data-theme="dark"] .embed-editor textarea{
background:rgba(255,255,255,0.06);
color:#ffffff;
}
/* Channel selector fix */
.embed-editor select{
background:rgba(0,0,0,0.05);
color:var(--text-color);
}
[data-theme="dark"] .embed-editor select{
background:#2b2d31;
color:#ffffff;
}
.embed-editor select option{
background:#2b2d31;
color:white;
}
[data-theme="light"] .embed-editor select option{
background:white;
color:black;
}
.embed-editor input:focus,
.embed-editor textarea:focus,
.embed-editor select:focus{
box-shadow:0 0 0 2px var(--accent-color);
}
/* Toggle buttons */
.toggle-group{
display:flex;
gap:10px;
margin-bottom:20px;
}
.toggle{
flex:1;
padding:8px;
border-radius:8px;
border:none;
cursor:pointer;
background:rgba(0,0,0,0.05);
transition:.2s;
font-weight:500;
}
.toggle.active{
background:var(--accent-color);
color:white;
}
[data-theme="dark"] .toggle{
background:rgba(255,255,255,0.08);
}
/* Send button */
.send-btn{
width:100%;
margin-top:15px;
padding:12px;
border:none;
border-radius:10px;
background:var(--accent-color);
color:white;
font-weight:600;
cursor:pointer;
transition:.2s;
}
.send-btn:hover{
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}
/* ================= DISCORD PREVIEW ================= */
.discord-preview{
display:flex;
gap:12px;
margin-top:15px;
}
/* Avatar */
.bot-avatar{
width:40px;
height:40px;
border-radius:50%;
}
/* Message */
.discord-message{
flex:1;
max-width:500px;
}
.discord-header{
font-size:14px;
margin-bottom:6px;
display:flex;
align-items:center;
}
.bot-name{
font-weight:600;
color:#5865F2;
}
.timestamp{
margin-left:8px;
color:gray;
font-size:12px;
}
/* ================= EMBED ================= */
.embed-box{
display:flex;
background:#2b2d31;
border-radius:6px;
overflow:hidden;
margin-top:4px;
max-width:450px;
}
[data-theme="light"] .embed-box{
background:#f2f3f5;
}
/* Color bar */
.embed-color-bar{
width:4px;
background:#5865F2;
}
/* Content */
.embed-content{
padding:10px 12px;
flex:1;
}
.embed-title{
font-weight:600;
margin-bottom:5px;
font-size:15px;
}
.embed-description{
font-size:14px;
line-height:1.4;
margin-bottom:6px;
}
.embed-footer{
font-size:12px;
opacity:.7;
}
/* ================= MESSAGE PREVIEW ================= */
.message-preview{
background:transparent;
max-width:450px;
}
.message-content{
font-size:14px;
line-height:1.5;
white-space:pre-wrap;
}
/* Markdown formatting */
.message-content strong{
font-weight:700;
}
.message-content em{
font-style:italic;
}
.message-content u{
text-decoration:underline;
}
.message-content s{
text-decoration:line-through;
}
.message-content code{
background:rgba(0,0,0,0.2);
padding:2px 5px;
border-radius:4px;
font-family:monospace;
font-size:13px;
}
[data-theme="light"] .message-content code{
background:#e3e5e8;
}
/* ================= RESPONSIVE ================= */
@media(max-width:900px){
.embed-builder-container{
grid-template-columns:1fr;
}
.discord-message{
max-width:100%;
}
}
/* ================= MOD OF MONTH ================= */
.motm-wrapper{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:30px;
margin-top:25px;
}
/* FEATURED CARD */
.motm-featured{
background:var(--card-bg);
border-radius:16px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
}
.motm-featured-banner{
height:120px;
background:linear-gradient(135deg,#5865F2,#8b5cf6);
}
.motm-featured-content{
display:flex;
gap:20px;
padding:20px;
align-items:center;
}
.motm-featured-avatar{
width:80px;
height:80px;
border-radius:50%;
border:4px solid white;
margin-top:-50px;
}
.motm-featured-info h3{
margin:0;
font-size:22px;
}
.motm-role{
opacity:.7;
font-size:14px;
}
/* STATS */
.motm-stats{
display:flex;
gap:20px;
margin:12px 0;
}
.motm-stat{
text-align:center;
}
.stat-value{
display:block;
font-weight:600;
font-size:16px;
}
.stat-label{
font-size:12px;
opacity:.6;
}
/* BUTTON */
.motm-view-btn{
background:var(--accent-color);
border:none;
padding:8px 16px;
border-radius:8px;
color:white;
cursor:pointer;
}
/* HISTORY GRID */
.motm-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}
.motm-card{
background:var(--card-bg);
border-radius:14px;
padding:18px;
text-align:center;
cursor:pointer;
transition:.25s;
}
.motm-card:hover{
transform:translateY(-4px);
}
.motm-card img{
width:50px;
height:50px;
border-radius:50%;
margin-top:-25px;
}
.motm-banner{
height:50px;
background:linear-gradient(135deg,#6366f1,#ec4899);
border-radius:10px 10px 0 0;
margin:-18px -18px 10px -18px;
}
/* ================= MODAL ================= */
.motm-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
justify-content:center;
align-items:center;
z-index:999;
}
.motm-modal-content{
background:var(--card-bg);
width:420px;
border-radius:16px;
overflow:hidden;
position:relative;
text-align:center;
padding-bottom:20px;
}
.motm-modal-banner{
height:120px;
background:linear-gradient(135deg,#5865F2,#8b5cf6);
}
.motm-modal-avatar{
width:90px;
height:90px;
border-radius:50%;
border:4px solid white;
margin-top:-45px;
}
.motm-modal-name{
margin:10px 0 0 0;
}
.motm-modal-month{
font-size:13px;
opacity:.6;
}
.motm-nominations{
padding:20px;
text-align:left;
}
.motm-nomination-list{
margin-top:10px;
padding-left:18px;
}
.motm-close{
position:absolute;
right:15px;
top:10px;
font-size:22px;
cursor:pointer;
}
/* ================= PREMIUM HOVER EFFECTS ================= */
.motm-featured,
.motm-card,
.motm-view-btn,
.motm-stat,
.motm-modal-content,
.motm-nomination-list li{
transition:all .25s ease;
}
.motm-featured:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.motm-card:hover{
transform:translateY(-5px) scale(1.02);
box-shadow:0 15px 35px rgba(0,0,0,.25);
}
.motm-view-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.motm-stat:hover{
transform:translateY(-3px);
}
.motm-nomination-list li:hover{
background:rgba(255,255,255,.05);
padding-left:10px;
border-radius:6px;
}
/* ================= BANNER SYSTEM ================= */
.banner-bronze{
background:linear-gradient(135deg,#d97706,#f59e0b);
}
.banner-silver{
background:linear-gradient(135deg,#9ca3af,#d1d5db);
}
.banner-gold{
background:linear-gradient(135deg,#eab308,#fde047);
}
.banner-diamond{
background:linear-gradient(135deg,#6366f1,#a78bfa);
}
.banner-legend{
background:linear-gradient(135deg,#ec4899,#8b5cf6);
}
/* featured banner animation */
.motm-featured-banner{
transition:all .4s ease;
}
.motm-featured:hover .motm-featured-banner{
filter:brightness(1.2);
}
/* ================= MODAL PREMIUM ================= */
.motm-modal-content:hover{
transform:scale(1.01);
}
.motm-close:hover{
color:#ff6b6b;
transform:rotate(90deg);
transition:.25s;
}
/* ================= PREMIUM BANNERS ================= */
.banner-bronze{
background:linear-gradient(135deg,#92400e,#d97706,#f59e0b);
}
.banner-silver{
background:linear-gradient(135deg,#6b7280,#9ca3af,#e5e7eb);
}
.banner-gold{
background:linear-gradient(135deg,#b45309,#f59e0b,#fde047);
}
.banner-diamond{
background:linear-gradient(135deg,#4338ca,#6366f1,#a78bfa);
}
.banner-legend{
background:linear-gradient(135deg,#db2777,#ec4899,#8b5cf6);
}
.banner-rainbow{
background:linear-gradient(
90deg,
#ff0000,
#ff7a00,
#ffe600,
#00ff6a,
#00c3ff,
#6a00ff,
#ff00c8
);
background-size:400%;
animation:rainbowMove 8s linear infinite;
}
@keyframes rainbowMove{
0%{background-position:0%}
100%{background-position:400%}
}
/* ================= BANNER OUTLINE HOVER ================= */
.motm-card,
.motm-featured,
.motm-modal-content{
transition:all .25s ease;
position:relative;
}
/* BRONZE */
.motm-card[data-banner="banner-bronze"]:hover,
.motm-featured:has(.banner-bronze):hover,
.motm-modal-content.banner-bronze:hover{
box-shadow:
0 0 0 3px #d97706,
0 18px 40px rgba(0,0,0,.35);
}
/* SILVER */
.motm-card[data-banner="banner-silver"]:hover,
.motm-featured:has(.banner-silver):hover,
.motm-modal-content.banner-silver:hover{
box-shadow:
0 0 0 3px #9ca3af,
0 18px 40px rgba(0,0,0,.35);
}
/* GOLD */
.motm-card[data-banner="banner-gold"]:hover,
.motm-featured:has(.banner-gold):hover,
.motm-modal-content.banner-gold:hover{
box-shadow:
0 0 0 3px #f59e0b,
0 18px 40px rgba(0,0,0,.35);
}
/* DIAMOND */
.motm-card[data-banner="banner-diamond"]:hover,
.motm-featured:has(.banner-diamond):hover,
.motm-modal-content.banner-diamond:hover{
box-shadow:
0 0 0 3px #6366f1,
0 18px 40px rgba(0,0,0,.35);
}
/* LEGEND */
.motm-card[data-banner="banner-legend"]:hover,
.motm-featured:has(.banner-legend):hover,
.motm-modal-content.banner-legend:hover{
box-shadow:
0 0 0 3px #ec4899,
0 18px 40px rgba(0,0,0,.35);
}
/* RAINBOW */
.motm-card[data-banner="banner-rainbow"]:hover,
.motm-featured:has(.banner-rainbow):hover,
.motm-modal-content.banner-rainbow:hover{
box-shadow:
0 0 0 3px transparent,
0 0 14px rgba(255,0,255,.7),
0 0 18px rgba(0,255,255,.7),
0 18px 40px rgba(0,0,0,.4);
}
/* ================= EXTRA HOVER EFFECTS ================= */
.motm-card img:hover,
.motm-featured-avatar:hover{
transform:scale(1.08);
}
.motm-name{
transition:.25s;
cursor:pointer;
}
.motm-name:hover{
color:var(--accent-color);
}
.motm-role{
transition:.25s;
}
.motm-role:hover{
opacity:1;
transform:translateY(-1px);
}
/* modal hover */
.motm-modal-avatar:hover{
transform:scale(1.07);
}
.motm-modal-name:hover{
color:var(--accent-color);
}
/* STAFF DIRECTORY */
.staff-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:20px;
}
/* CARD */
.staff-card{
position:relative;
background:var(--card-bg);
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 18px var(--shadow-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default; /* no clickable hand */
}
/* Slight lift + glow on hover */
.staff-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.25), 0 0 12px var(--accent-color);
}
/* Optional additional outline (glow) */
.staff-card::after {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 18px;
pointer-events: none; /* ensures it doesnβt block hover */
box-shadow: 0 0 0 0px transparent;
transition: box-shadow 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
.staff-card:hover::after {
box-shadow: 0 0 0 2px var(--accent-color), 0 0 20px rgba(88,101,242,0.4);
opacity: 1;
}
/* BANNER */
.staff-banner{
height:80px;
background:linear-gradient(135deg,#5865F2,#8ea1ff);
}
/* AVATAR */
.staff-avatar-wrapper{
position:relative;
margin-top:-40px;
display:flex;
justify-content:center;
}
.staff-avatar{
width:80px;
height:80px;
border-radius:50%;
border:4px solid var(--card-bg);
}
/* STATUS */
.staff-status{
position:absolute;
bottom:5px;
right:calc(50% - 45px);
width:14px;
height:14px;
border-radius:50%;
border:2px solid var(--card-bg);
}
.staff-status.online{
background:#43b581;
}
.staff-status.offline{
background:#747f8d;
}
/* INFO */
.staff-info{
text-align:center;
padding:18px;
}
.staff-info h3{
margin:5px 0;
font-size:1.1rem;
}
/* ROLE BADGES */
.staff-role{
display:inline-block;
padding:4px 10px;
border-radius:20px;
font-size:0.75rem;
font-weight:600;
margin-bottom:6px;
}
/* ROLE COLORS */
.role-owner{
background:linear-gradient(45deg,#ffd700,#ffb300);
color:#000;
}
.role-admin{
background:#ff69b4; /* pink */
color:white;
}
.role-mod{
background:#5865F2; /* Discord blue */
color:white;
}
.role-senior{
background:#f1c40f; /* yellow */
color:white;
}
.role-junior{
background:#2ecc71; /* green */
color:white;
}
.staff-desc{
font-size:0.85rem;
opacity:.75;
}
/* Department Titles */
.staff-dept{
margin-top:40px;
font-size:1.3rem;
font-weight:700;
color:var(--text-color);
border-bottom:2px solid rgba(88,101,242,0.3);
padding-bottom:5px;
}
/* ================= MOD OF MONTH - MOBILE ================= */
@media (max-width: 900px) {
/* MOTM Wrapper - stacked layout */
.motm-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
}
/* FEATURED CARD */
.motm-featured {
width: 100%;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.motm-featured-content {
flex-direction: column;
align-items: center;
gap: 15px;
padding: 15px;
}
.motm-featured-avatar {
width: 60px;
height: 60px;
border-width: 3px;
margin-top: -30px;
}
.motm-featured-info h3 {
font-size: 18px;
text-align: center;
}
.motm-role {
font-size: 12px;
text-align: center;
}
/* STATS */
.motm-stats {
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.stat-value {
font-size: 14px;
}
.stat-label {
font-size: 11px;
}
/* BUTTON */
.motm-view-btn {
width: 100%;
padding: 10px 0;
font-size: 14px;
}
/* HISTORY GRID */
.motm-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.motm-card {
padding: 14px;
}
.motm-card img {
width: 40px;
height: 40px;
margin-top: -20px;
}
.motm-banner {
height: 40px;
margin: -14px -14px 8px -14px;
}
/* MODAL */
.motm-modal-content {
width: 95%;
padding-bottom: 15px;
}
.motm-modal-avatar {
width: 70px;
height: 70px;
margin-top: -35px;
}
.motm-modal-name {
font-size: 18px;
}
.motm-modal-month {
font-size: 12px;
}
.motm-nominations {
padding: 15px;
}
.motm-nomination-list {
padding-left: 15px;
}
.motm-close {
font-size: 20px;
right: 10px;
top: 8px;
}
/* Optional: smooth stack with dashboard padding */
#mod-of-month {
margin-top: 25px;
padding: 0 15px;
}
}
/* STAFF PROGRESS */
.staff-progress-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin-top:25px;
}
.progress-card{
background:var(--card-bg);
padding:20px;
border-radius:16px;
box-shadow:0 4px 12px var(--shadow-color);
transition:0.3s;
}
.progress-card:hover{
transform:translateY(-4px);
}
/* HEADER */
.progress-header{
display:flex;
align-items:center;
gap:15px;
margin-bottom:15px;
}
.progress-header img{
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
}
/* RANK BADGES */
.rank-badge{
font-size:0.75rem;
padding:3px 10px;
border-radius:8px;
font-weight:600;
}
.rank-silver{
background:#c0c0c0;
color:black;
}
.rank-gold{
background:#f1c40f;
color:black;
}
.rank-elite{
background:#9b59b6;
color:white;
}
/* PROGRESS BAR */
.progress-bar-wrapper{
width:100%;
height:10px;
background:rgba(0,0,0,0.1);
border-radius:10px;
overflow:hidden;
margin:12px 0;
}
.progress-bar{
height:100%;
background:linear-gradient(90deg,#5865F2,#8e44ad);
}
/* STATS */
.progress-stats{
display:flex;
justify-content:space-between;
font-size:0.8rem;
color:gray;
}
/* ===================================================== */
/* ================= STAFF BIRTHDAY CARDS =============== */
/* ===================================================== */
.birthday-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:25px;
}
/* CARD */
.birthday-card{
position:relative;
background:var(--card-bg);
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 25px var(--shadow-color);
transition:all .3s ease;
cursor:pointer;
border:3px solid transparent;
}
/* Hover lift + shadow + outline */
.birthday-card:hover{
transform:translateY(-6px);
box-shadow:0 14px 35px rgba(0,0,0,.35),0 0 14px rgba(88,101,242,.35);
}
/* ROLE COLORS */
.role-owner{
background:linear-gradient(45deg,#cdb4db,#ffc8dd);
color:#4a2c40;
box-shadow:0 0 12px rgba(205,180,219,0.6);
}
.role-admin{
background:#ff69b4;
color:white;
}
.role-mod{
background:#5865F2;
color:white;
}
.role-senior{
background:#f1c40f;
color:white;
}
.role-junior{
background:#2ecc71;
color:white;
}
/* Card hover outline by role */
.birthday-card.owner:hover{
border-color:#cdb4db;
box-shadow:0 0 18px rgba(205,180,219,0.7);
transform:translateY(-4px) scale(1.02);
}
.birthday-card.admin:hover { border-color: #ff69b4; }
.birthday-card.mod:hover { border-color: #5865F2; }
.birthday-card.senior:hover { border-color: #f1c40f; }
.birthday-card.junior:hover { border-color: #2ecc71; }
/* BANNER */
.birthday-banner{
height:90px;
background:linear-gradient(135deg,#5865F2,#8ea1ff);
transition:all .3s ease;
}
.birthday-card:hover .birthday-banner{
filter:brightness(1.1);
}
/* AVATAR */
.birthday-avatar-wrapper{
position:relative;
margin-top:-45px;
display:flex;
justify-content:center;
transition:all .3s ease;
}
.birthday-avatar-wrapper:hover{
transform:scale(1.05);
}
.birthday-avatar{
width:85px;
height:85px;
border-radius:50%;
border:4px solid var(--card-bg);
object-fit:cover;
box-shadow:0 4px 15px rgba(0,0,0,.25);
transition:all .3s ease;
}
.birthday-card:hover .birthday-avatar{
box-shadow:0 8px 25px rgba(0,0,0,.5);
transform:scale(1.05);
}
/* ROLE BADGE (capsule) */
.birthday-role{
position:absolute;
top:60px;
left:50%;
transform:translateX(-50%);
display:inline-block;
font-size:.65rem;
padding:4px 10px;
border-radius:20px;
font-weight:600;
text-align:center;
color:white;
text-shadow:0 0 2px rgba(0,0,0,.5);
transition:all .3s ease;
z-index:2;
}
/* Hover badge effect */
.birthday-card:hover .birthday-role{
transform:translateX(-50%) scale(1.1);
}
/* CONTENT */
.birthday-content{
text-align:center;
padding:18px 20px 22px;
transition:all .3s ease;
}
.birthday-card:hover .birthday-content{
filter:brightness(1.05);
}
/* Hover for name, birthday and countdown */
.birthday-content h3:hover,
.birthday-date:hover,
.birthday-countdown:hover{
filter:brightness(1.15);
transform:scale(1.05);
}
/* DATE */
.birthday-date{
font-size:.9rem;
opacity:.8;
margin-bottom:8px;
transition:all .3s ease;
}
/* COUNTDOWN */
.birthday-countdown{
display:inline-block;
font-size:.75rem;
padding:4px 10px;
border-radius:12px;
background:rgba(46,204,113,.15);
color:#2ecc71;
font-weight:600;
transition:all .3s ease;
}
.birthday-card:hover .birthday-countdown{
background:rgba(46,204,113,.3);
}
/* ROLE BADGE (capsule) */
.birthday-role{
position:absolute;
top:60px;
left:50%;
transform:translateX(-50%);
display:inline-block;
font-size:.65rem;
padding:4px 10px;
border-radius:20px;
font-weight:600;
color:white;
text-shadow:0 0 2px rgba(0,0,0,.5);
transition:all .3s ease;
}
/* Hover badge effect */
.birthday-card:hover .birthday-role{
transform:translateX(-50%) scale(1.1);
}
/* CONTENT */
.birthday-content{
text-align:center;
padding:18px 20px 22px;
transition:all .3s ease;
}
.birthday-card:hover .birthday-content{
filter:brightness(1.05);
}
/* DATE */
.birthday-date{
font-size:.9rem;
opacity:.8;
margin-bottom:8px;
}
/* COUNTDOWN */
.birthday-countdown{
display:inline-block;
font-size:.75rem;
padding:4px 10px;
border-radius:12px;
background:rgba(46,204,113,.15);
color:#2ecc71;
font-weight:600;
transition:all .3s ease;
}
.birthday-card:hover .birthday-countdown{
background:rgba(46,204,113,.3);
}
/* ===================================================== */
/* ================= BIRTHDAY MODAL ===================== */
/* ===================================================== */
.birthday-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
backdrop-filter:blur(5px);
justify-content:center;
align-items:center;
z-index:999;
}
.birthday-modal-content{
background:var(--card-bg);
width:420px;
max-width:92%;
border-radius:20px;
overflow:hidden;
text-align:center;
box-shadow:0 20px 50px rgba(0,0,0,.35);
animation:birthdayPop .25s ease;
position:relative;
transition:all .3s ease;
}
.birthday-modal-content:hover{
transform:scale(1.02);
box-shadow:0 25px 60px rgba(0,0,0,.5);
}
/* Animation */
@keyframes birthdayPop{
from{
opacity:0;
transform:scale(.9);
}
to{
opacity:1;
transform:scale(1);
}
}
/* Modal banner */
.birthday-modal-banner{
height:120px;
background:linear-gradient(135deg,#5865F2,#8ea1ff);
transition:all .3s ease;
}
/* Avatar */
.birthday-modal-avatar{
width:100px;
height:100px;
border-radius:50%;
border:4px solid var(--card-bg);
margin-top:-50px;
box-shadow:0 6px 20px rgba(0,0,0,.25);
transition:all .3s ease;
}
.birthday-modal-avatar:hover{
transform:scale(1.05);
box-shadow:0 10px 30px rgba(0,0,0,.45);
}
/* Modal name */
.birthday-modal-name{
margin:10px 0 5px;
font-size:1.4rem;
transition:all .3s ease;
}
.birthday-modal-name:hover{
filter:brightness(1.1);
transform:scale(1.02);
}
/* Role */
.birthday-modal-role{
opacity:.7;
font-size:.9rem;
margin-bottom:15px;
transition:all .3s ease;
}
.birthday-modal-role:hover{
opacity:1;
transform:scale(1.02);
}
/* Details */
.birthday-details{
padding:0 25px 25px;
line-height:1.7;
font-size:.95rem;
transition:all .3s ease;
}
.birthday-details p:hover{
filter:brightness(1.1);
transform:scale(1.02);
}
/* Close button */
.birthday-close{
position:absolute;
top:10px;
right:15px;
font-size:24px;
cursor:pointer;
transition:.25s;
z-index:1001; /* make sure itβs above modal content */
}
.birthday-close:hover{
color:#ff6b6b;
transform:rotate(90deg);
}
.save-toast {
position: fixed;
bottom: 30px;
right: 30px;
background: #111;
color: white;
padding: 14px 20px;
border-radius: 12px;
font-size: 14px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
z-index: 9999;
}
.save-toast.show {
opacity: 1;
transform: translateY(0);
}
/* STAFF CARD HOVER OUTLINE BY ROLE */
.staff-card.owner:hover {
border-color: #cdb4db;
box-shadow: 0 0 18px rgba(205, 180, 219, 0.7);
transform: translateY(-4px) scale(1.02);
}
.staff-card.admin:hover {
border-color: #ff69b4;
box-shadow: 0 0 18px rgba(255, 105, 180, 0.7);
transform: translateY(-4px) scale(1.02);
}
.staff-card.senior:hover {
border-color: #f1c40f;
box-shadow: 0 0 18px rgba(241, 196, 15, 0.7);
transform: translateY(-4px) scale(1.02);
}
.staff-card.mod:hover {
border-color: #5865f2;
box-shadow: 0 0 18px rgba(88, 101, 242, 0.7);
transform: translateY(-4px) scale(1.02);
}
.staff-card.junior:hover {
border-color: #2ecc71;
box-shadow: 0 0 18px rgba(46, 204, 113, 0.7);
transform: translateY(-4px) scale(1.02);
}
/* Optional: Smooth transition for hover */
.staff-card {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
border: 2px solid transparent; /* ensures hover border animates nicely */
border-radius: 12px; /* keep consistent rounded corners */
}
.staff-card:hover .staff-avatar {
box-shadow: 0 0 12px rgba(255, 255, 255, 0.3); /* subtle avatar glow */
transform: scale(1.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* STAFF AVATAR HOVER GLOW BY ROLE */
.staff-card.owner:hover .staff-avatar {
box-shadow: 0 0 12px rgba(205, 180, 219, 0.7);
}
.staff-card.admin:hover .staff-avatar {
box-shadow: 0 0 12px rgba(255, 105, 180, 0.7);
}
.staff-card.senior:hover .staff-avatar {
box-shadow: 0 0 12px rgba(241, 196, 15, 0.7);
}
.staff-card.mod:hover .staff-avatar {
box-shadow: 0 0 12px rgba(88, 101, 242, 0.7);
}
.staff-card.junior:hover .staff-avatar {
box-shadow: 0 0 12px rgba(46, 204, 113, 0.7);
}
/* ================= LOGIN ACTIVITY ================= */
.login-activity-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 18px;
}
/* ===== CARD (PREMIUM) ===== */
.login-activity-card {
background: linear-gradient(145deg, #0f0f0f, #151515);
border-radius: 14px;
padding: 16px;
cursor: pointer;
transition: 0.25s ease;
border: 1px solid rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
.login-activity-card:hover {
transform: translateY(-5px);
border-color: #5865F2;
box-shadow: 0 12px 30px rgba(88,101,242,0.15);
}
.login-activity-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent, rgba(88,101,242,0.15), transparent);
opacity: 0;
transition: 0.3s;
}
.login-activity-card:hover::before {
opacity: 1;
}
/* HEADER */
.login-activity-header {
display: flex;
align-items: center;
gap: 12px;
}
.login-activity-header img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.08);
transition: 0.25s;
}
.login-activity-header img:hover {
transform: scale(1.08);
}
/* TEXT */
.login-activity-name {
font-size: 15px;
font-weight: 600;
}
.login-activity-role {
font-size: 12px;
opacity: 0.6;
}
/* META */
.login-activity-meta {
margin-top: 12px;
font-size: 11px;
opacity: 0.5;
}
/* ================= MODAL ================= */
.login-activity-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 1000;
transition: background 0.3s ease;
}
/* ===== MODAL CONTAINER ===== */
.login-activity-modal-content {
width: 520px;
margin: 6% auto;
border-radius: 18px;
overflow: hidden;
background: #0b0b0b;
border: 2px solid transparent;
position: relative;
animation: loginModalFade 0.25s ease;
transition: all 0.3s ease;
}
@keyframes loginModalFade {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ===== MODAL HOVER GLOW ===== */
.login-activity-modal-content.owner:hover {
border-color: #cdb4db;
box-shadow: 0 0 30px rgba(205,180,219,0.6);
transform: scale(1.01);
}
.login-activity-modal-content.admin:hover {
border-color: #ff69b4;
box-shadow: 0 0 30px rgba(255,105,180,0.6);
transform: scale(1.01);
}
.login-activity-modal-content.senior:hover {
border-color: #f1c40f;
box-shadow: 0 0 30px rgba(241,196,15,0.6);
transform: scale(1.01);
}
.login-activity-modal-content.mod:hover {
border-color: #5865f2;
box-shadow: 0 0 30px rgba(88,101,242,0.6);
transform: scale(1.01);
}
.login-activity-modal-content.junior:hover {
border-color: #2ecc71;
box-shadow: 0 0 30px rgba(46,204,113,0.6);
transform: scale(1.01);
}
/* CLOSE */
.login-activity-close {
position: absolute;
right: 14px;
top: 10px;
font-size: 22px;
cursor: pointer;
z-index: 5;
}
/* ===== BANNER ===== */
.login-activity-banner {
height: 170px;
background-size: cover;
background-position: center;
position: relative;
transition: 0.4s ease;
}
.login-activity-banner:hover {
transform: scale(1.03);
}
.login-activity-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent, #0b0b0b);
}
/* ===== PROFILE ===== */
.login-activity-profile {
text-align: center;
margin-top: -45px;
position: relative;
z-index: 2;
}
/* ===== PFP FIX (ALWAYS PERFECT CIRCLE) ===== */
.login-activity-profile img {
width: 90px;
height: 90px; /* π₯ force square */
border-radius: 50%;
object-fit: cover; /* π₯ prevents stretching */
object-position: center; /* π₯ keeps face centered */
border: 4px solid #0b0b0b;
box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
transition: all 0.25s ease;
}
.login-activity-profile img:hover {
transform: scale(1.08);
}
/* ROLE PFP GLOW */
.login-activity-modal-content.owner img:hover {
box-shadow: 0 0 18px rgba(205,180,219,0.85);
}
.login-activity-modal-content.admin img:hover {
box-shadow: 0 0 18px rgba(255,105,180,0.85);
}
.login-activity-modal-content.senior img:hover {
box-shadow: 0 0 18px rgba(241,196,15,0.85);
}
.login-activity-modal-content.mod img:hover {
box-shadow: 0 0 18px rgba(88,101,242,0.85);
}
.login-activity-modal-content.junior img:hover {
box-shadow: 0 0 18px rgba(46,204,113,0.85);
}
/* NAME */
.login-activity-profile h3 {
margin: 10px 0 2px;
font-size: 18px;
transition: 0.25s ease;
}
.login-activity-modal-content.owner h3:hover {
text-shadow: 0 0 10px rgba(205,180,219,0.8);
}
.login-activity-modal-content.admin h3:hover {
text-shadow: 0 0 10px rgba(255,105,180,0.8);
}
.login-activity-modal-content.senior h3:hover {
text-shadow: 0 0 10px rgba(241,196,15,0.8);
}
.login-activity-modal-content.mod h3:hover {
text-shadow: 0 0 10px rgba(88,101,242,0.8);
}
.login-activity-modal-content.junior h3:hover {
text-shadow: 0 0 10px rgba(46,204,113,0.8);
}
/* ROLE TEXT */
.login-activity-profile p {
font-size: 13px;
opacity: 0.6;
transition: 0.25s ease;
}
.login-activity-profile p:hover {
opacity: 1;
}
/* ===== DETAILS GRID ===== */
.login-activity-details {
padding: 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
font-size: 13px;
}
.login-activity-details div {
background: rgba(255,255,255,0.03);
padding: 10px 12px;
border-radius: 10px;
display: flex;
flex-direction: column;
transition: 0.25s ease;
}
.login-activity-details div:hover {
background: rgba(255,255,255,0.07);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.login-activity-details span:first-child {
font-size: 11px;
opacity: 0.5;
}
.login-activity-details span:last-child {
font-size: 13px;
font-weight: 500;
transition: 0.2s;
}
.login-activity-details div:hover span:last-child {
color: #fff;
}
/* full width row */
.login-activity-details div:last-child {
grid-column: span 2;
}
/* ===== CARD ROLE GLOW (MATCH MODAL) ===== */
.login-activity-card {
border: 2px solid transparent;
}
/* OWNER */
.login-activity-card.owner:hover {
border-color: #cdb4db;
box-shadow: 0 0 20px rgba(205,180,219,0.6);
}
/* ADMIN */
.login-activity-card.admin:hover {
border-color: #ff69b4;
box-shadow: 0 0 20px rgba(255,105,180,0.6);
}
/* SENIOR */
.login-activity-card.senior:hover {
border-color: #f1c40f;
box-shadow: 0 0 20px rgba(241,196,15,0.6);
}
/* MOD */
.login-activity-card.mod:hover {
border-color: #5865f2;
box-shadow: 0 0 20px rgba(88,101,242,0.6);
}
/* JUNIOR */
.login-activity-card.junior:hover {
border-color: #2ecc71;
box-shadow: 0 0 20px rgba(46,204,113,0.6);
}
/* avatar glow on hover (like staff cards) */
.login-activity-card.owner:hover img {
box-shadow: 0 0 12px rgba(205,180,219,0.7);
}
.login-activity-card.admin:hover img {
box-shadow: 0 0 12px rgba(255,105,180,0.7);
}
.login-activity-card.senior:hover img {
box-shadow: 0 0 12px rgba(241,196,15,0.7);
}
.login-activity-card.mod:hover img {
box-shadow: 0 0 12px rgba(88,101,242,0.7);
}
.login-activity-card.junior:hover img {
box-shadow: 0 0 12px rgba(46,204,113,0.7);
}
/* ================= LIGHT MODE (FINAL POLISHED) ================= */
.light .login-activity-card,
[data-theme="light"] .login-activity-card {
background: linear-gradient(145deg, #f8f9fb, #e4e7ec);
border: 1px solid rgba(0,0,0,0.12);
/* depth */
box-shadow:
0 6px 18px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: 0.25s ease;
}
/* hover lift */
.light .login-activity-card:hover,
[data-theme="light"] .login-activity-card:hover {
transform: translateY(-6px);
box-shadow:
0 12px 28px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.7);
}
/* ================= TEXT ================= */
.light .login-activity-name,
[data-theme="light"] .login-activity-name {
color: #0f172a;
}
.light .login-activity-role,
[data-theme="light"] .login-activity-role {
color: #334155;
}
.light .login-activity-meta,
[data-theme="light"] .login-activity-meta {
color: #475569;
}
/* avatar border */
.light .login-activity-header img,
[data-theme="light"] .login-activity-header img {
border: 2px solid rgba(0,0,0,0.12);
}
/* ================= SECTION BACKGROUND ================= */
.light #login-activity,
[data-theme="light"] #login-activity {
background: #eef1f5;
padding: 16px;
border-radius: 14px;
}
/* ================= MODAL ================= */
.light .login-activity-modal,
[data-theme="light"] .login-activity-modal {
background: rgba(20,20,20,0.25);
}
/* modal container */
.light .login-activity-modal-content,
[data-theme="light"] .login-activity-modal-content {
background: #f4f5f7;
border: 2px solid rgba(0,0,0,0.08);
}
/* banner fade */
.light .login-activity-banner::after,
[data-theme="light"] .login-activity-banner::after {
background: linear-gradient(to bottom, transparent, #f4f5f7);
}
/* ================= PROFILE ================= */
.light .login-activity-profile h3,
[data-theme="light"] .login-activity-profile h3 {
color: #111;
}
.light .login-activity-profile p,
[data-theme="light"] .login-activity-profile p {
color: #555;
}
/* PFP */
.light .login-activity-profile img,
[data-theme="light"] .login-activity-profile img {
border: 4px solid #f4f5f7;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}
/* ================= DETAILS ================= */
.light .login-activity-details div,
[data-theme="light"] .login-activity-details div {
background: rgba(0,0,0,0.05);
}
.light .login-activity-details div:hover,
[data-theme="light"] .login-activity-details div:hover {
background: rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.light .login-activity-details span:first-child,
[data-theme="light"] .login-activity-details span:first-child {
color: #666;
}
.light .login-activity-details span:last-child,
[data-theme="light"] .login-activity-details span:last-child {
color: #111;
}
/* ================= CLOSE BUTTON ================= */
.light .login-activity-close,
[data-theme="light"] .login-activity-close {
color: #222;
}
/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 768px) {
/* ===== GRID ===== */
.login-activity-grid {
grid-template-columns: 1fr; /* single column */
gap: 14px;
}
/* ===== CARD ===== */
.login-activity-card {
padding: 14px;
border-radius: 12px;
}
.login-activity-header {
gap: 10px;
}
.login-activity-header img {
width: 44px;
height: 44px;
}
.login-activity-name {
font-size: 14px;
}
.login-activity-role {
font-size: 11px;
}
.login-activity-meta {
font-size: 10px;
}
/* ===== MODAL ===== */
.login-activity-modal-content {
width: 92%; /* responsive width */
margin: 10% auto; /* better vertical spacing */
border-radius: 16px;
}
/* banner smaller */
.login-activity-banner {
height: 140px;
}
/* ===== PROFILE ===== */
.login-activity-profile {
margin-top: -40px;
}
.login-activity-profile img {
width: 75px;
height: 75px;
}
.login-activity-profile h3 {
font-size: 16px;
}
.login-activity-profile p {
font-size: 12px;
}
/* ===== DETAILS GRID ===== */
.login-activity-details {
grid-template-columns: 1fr; /* stack everything */
padding: 18px;
gap: 10px;
}
.login-activity-details div {
font-size: 12px;
padding: 10px;
}
/* remove forced full width rule (not needed anymore) */
.login-activity-details div:last-child {
grid-column: span 1;
}
/* ===== CLOSE BUTTON ===== */
.login-activity-close {
font-size: 20px;
top: 8px;
right: 10px;
}
}
/* ================= EXTRA SMALL DEVICES ================= */
@media (max-width: 480px) {
.login-activity-card {
padding: 12px;
}
.login-activity-header img {
width: 40px;
height: 40px;
}
.login-activity-profile img {
width: 65px;
height: 65px;
}
.login-activity-profile h3 {
font-size: 15px;
}
.login-activity-details {
padding: 14px;
}
}
/* ================= CHANGELOG ================= */
/* ================= HERO ================= */
.changelog-hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
border-radius: 20px;
background: linear-gradient(135deg, #5865F2, #7b86ff);
color: white;
margin-bottom: 30px;
box-shadow: 0 20px 60px rgba(88,101,242,0.4);
position: relative;
overflow: hidden;
transition: all 0.35s ease;
}
/* light sweep */
.changelog-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(255,255,255,0.25), transparent);
opacity: 0;
transition: 0.4s;
}
.changelog-hero:hover::before {
opacity: 1;
}
.changelog-hero:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 30px 80px rgba(88,101,242,0.55);
}
/* HERO TEXT */
.hero-version {
font-size: 1.8rem;
font-weight: bold;
transition: all 0.3s ease;
}
.hero-desc {
opacity: 0.85;
margin-top: 5px;
transition: all 0.3s ease;
}
.hero-badge {
height: 36px;
padding: 0 14px; /* remove vertical padding */
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-weight: 600;
font-size: 0.8rem;
line-height: 1; /* π₯ critical */
background: rgba(255,255,255,0.2);
transition: all 0.3s ease;
}
.changelog-hero:hover .hero-version {
letter-spacing: 1px;
transform: scale(1.05);
}
.changelog-hero:hover .hero-desc {
opacity: 1;
transform: translateY(-2px);
}
.changelog-hero:hover .hero-badge {
background: rgba(255,255,255,0.3);
transform: scale(1.08);
}
/* ================= VERSION BLOCK ================= */
.version-block {
background: var(--card-bg);
border-radius: 16px;
margin-bottom: 15px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
transition: all 0.3s ease;
position: relative;
}
/* subtle glow overlay */
.version-block::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.05), transparent);
opacity: 0;
transition: 0.4s;
pointer-events: none; /* π₯ FIX */
}
.version-block:hover::after {
opacity: 1;
}
.version-block:hover {
transform: translateY(-4px);
border-color: rgba(88,101,242,0.25);
box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}
/* ================= HEADER ================= */
.version-header {
display: flex;
justify-content: space-between;
padding: 15px 18px;
cursor: pointer;
align-items: center;
transition: all 0.25s ease;
}
.version-header:hover {
background: rgba(255,255,255,0.03);
}
.version-title {
font-weight: 600;
font-size: 1rem;
transition: 0.25s;
}
.version-title.major {
color: #ff6b6b;
}
.version-header:hover .version-title {
color: #5865F2;
transform: translateX(3px);
}
.version-date {
margin-left: 10px;
color: #888;
font-size: 0.85rem;
transition: 0.25s;
}
.version-header:hover .version-date {
color: #bbb;
transform: translateX(2px);
}
/* ================= TOGGLE BUTTON (ANIMATED) ================= */
.toggle-btn {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255,255,255,0.05);
border: none;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
/* lines */
.toggle-btn::before,
.toggle-btn::after {
content: "";
position: absolute;
background: #aaa;
transition: all 0.3s ease;
}
/* horizontal */
.toggle-btn::before {
width: 14px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* vertical */
.toggle-btn::after {
width: 2px;
height: 14px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* hover */
.toggle-btn:hover {
background: rgba(88,101,242,0.2);
}
.toggle-btn:hover::before,
.toggle-btn:hover::after {
background: #fff;
}
/* morph into minus */
.version-block.open .toggle-btn::after {
transform: translate(-50%, -50%) scaleY(0);
opacity: 0;
}
.version-block.open .toggle-btn::before {
transform: translate(-50%, -50%) rotate(180deg);
}
/* ================= CONTENT ================= */
.version-content {
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
padding: 0 18px;
}
.version-block.open .version-content {
max-height: 500px;
padding-bottom: 15px;
}
/* ================= GROUPS ================= */
.changelog-group {
margin-top: 10px;
}
.changelog-group h4 {
margin-bottom: 6px;
color: #5865F2;
transition: 0.25s;
}
.changelog-group:hover h4 {
letter-spacing: 0.5px;
transform: translateX(2px);
}
.changelog-group ul {
padding-left: 18px;
}
.changelog-group li {
margin: 5px 0;
color: #555;
transition: 0.25s;
}
.changelog-group li:hover {
transform: translateX(6px);
color: #fff;
}
#changelog h2,
.changelog-sub {
transition: all 0.3s ease;
}
/* Title hover */
#changelog h2:hover {
letter-spacing: 1px;
transform: translateY(-2px);
text-shadow: 0 5px 15px rgba(88,101,242,0.4);
}
/* Subtitle hover */
.changelog-sub:hover {
color: #bbb;
transform: translateX(3px);
}
.hero-version {
position: relative;
display: inline-block;
transition: all 0.3s ease;
}
/* glow + lift */
.hero-version:hover {
transform: translateY(-2px) scale(1.05);
text-shadow: 0 0 12px rgba(255,255,255,0.6);
}
/* underline sweep */
.hero-version::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0%;
height: 2px;
background: white;
transition: width 0.3s ease;
}
.hero-version:hover::after {
width: 100%;
}
.hero-desc {
transition: all 0.3s ease;
}
/* subtle readability + lift */
.hero-desc:hover {
opacity: 1;
transform: translateX(4px);
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.hero-badge {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* lift + press feel */
.hero-badge:hover {
transform: translateY(-2px) scale(1.08);
background: rgba(255,255,255,0.3);
box-shadow: 0 5px 20px rgba(255,255,255,0.25);
}
/* shine sweep effect */
.hero-badge::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transform: skewX(-20deg);
}
/* animate shine */
.hero-badge:hover::after {
left: 150%;
transition: 0.6s;
}
#changelog h2,
.changelog-sub,
.hero-version,
.hero-desc,
.hero-badge {
cursor: default;
}
/* ================= VERSION TYPES ================= */
/* MAJOR */
.version-title.major {
color: #ff6b6b;
}
/* MINOR */
.version-title.minor {
color: #5865F2;
}
/* PATCH */
.version-title.patch {
color: #2ecc71;
}
/* ================= HERO BADGE TYPES ================= */
.hero-badge.major {
background: rgba(255, 107, 107, 0.25);
color: #ff6b6b;
box-shadow: 0 5px 20px rgba(255,107,107,0.25);
}
.hero-badge.minor {
background: rgba(88, 101, 242, 0.25);
color: #5865F2;
box-shadow: 0 5px 20px rgba(88,101,242,0.25);
}
.hero-badge.patch {
background: rgba(46, 204, 113, 0.25);
color: #2ecc71;
box-shadow: 0 5px 20px rgba(46,204,113,0.25);
}
#changelog-guide {
margin-top: 50px;
}
/* ================= HEADER ================= */
#changelog-guide h2,
.guide-sub {
transition: all 0.3s ease;
}
#changelog-guide h2:hover {
letter-spacing: 1px;
transform: translateY(-2px);
text-shadow: 0 5px 15px rgba(88,101,242,0.4);
}
.guide-sub {
color: #aaa;
}
.guide-sub:hover {
color: #ddd;
transform: translateX(3px);
}
/* ================= HERO ================= */
.guide-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 28px;
border-radius: 20px;
background: linear-gradient(135deg, #5865F2, #7b86ff);
color: white;
margin-bottom: 25px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(88,101,242,0.45);
transition: all 0.4s ease;
}
/* ================= LIGHTING LAYERS ================= */
/* radial glow */
.guide-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(255,255,255,0.25), transparent 60%);
opacity: 0;
transition: 0.4s;
pointer-events: none;
}
/* sweep shine */
.guide-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.08), transparent);
opacity: 0;
transition: 0.5s;
pointer-events: none;
}
.guide-hero:hover::before,
.guide-hero:hover::after {
opacity: 1;
}
/* hover lift */
.guide-hero:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 30px 90px rgba(88,101,242,0.6);
}
/* ================= TEXT ================= */
.guide-hero h3 {
margin-bottom: 6px;
font-size: 1.4rem;
transition: all 0.3s ease;
}
.guide-hero:hover h3 {
letter-spacing: 0.5px;
transform: translateX(2px);
}
.guide-desc {
opacity: 0.85;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.guide-hero:hover .guide-desc {
opacity: 1;
transform: translateX(3px);
}
/* ================= OPTIONAL (FOR NEW LAYOUT) ================= */
.guide-hero-left {
display: flex;
flex-direction: column;
}
.guide-hero-right {
display: flex;
align-items: center;
gap: 12px;
}
/* ================= VERSION FORMAT ================= */
.version-format {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: 15px 0;
}
/* number blocks */
.format-box {
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.3rem;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* glow overlay */
.format-box::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
opacity: 0;
transition: 0.4s;
}
.format-box:hover::after {
opacity: 1;
}
.format-box:hover {
transform: translateY(-4px) scale(1.08);
}
/* dots */
.dot {
font-size: 1.5rem;
opacity: 0.7;
}
/* ================= GRID ================= */
.guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 15px;
}
/* ================= CARDS ================= */
.guide-card {
background: var(--card-bg);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* glow overlay */
.guide-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.05), transparent);
opacity: 0;
transition: 0.4s;
pointer-events: none;
}
.guide-card:hover::after {
opacity: 1;
}
.guide-card:hover {
transform: translateY(-5px);
border-color: rgba(88,101,242,0.25);
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
/* ================= TYPE ACCENTS ================= */
.guide-card.major {
border-left: 3px solid #ff6b6b;
}
.guide-card.minor {
border-left: 3px solid #5865F2;
}
.guide-card.patch {
border-left: 3px solid #2ecc71;
}
/* ================= TEXT ================= */
.guide-card h3 {
margin-bottom: 10px;
transition: 0.25s;
}
.guide-card:hover h3 {
transform: translateX(3px);
}
.guide-card p {
color: #aaa;
font-size: 0.9rem;
}
.guide-card ul {
padding-left: 18px;
margin-top: 10px;
}
.guide-card li {
margin: 6px 0;
color: #555;
transition: 0.25s;
}
.guide-card li:hover {
transform: translateX(6px);
color: #fff;
}
/* example badge */
.example {
display: inline-block;
margin-top: 12px;
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
color: #aaa;
}
/* ================= CURSOR FIX ================= */
#changelog-guide h2,
.guide-sub,
.guide-desc,
.guide-card,
.guide-hero {
cursor: default;
}
/* ================= HERO ACTIONS ================= */
.hero-actions {
display: flex;
flex-direction: column; /* π₯ stack them */
align-items: flex-end; /* keep right aligned */
gap: 8px;
}
/* ================= GUIDE BUTTON ================= */
.changelog-guide-btn {
height: 36px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
color: white;
background: rgba(255,255,255,0.15);
/* π₯ FIX: match badge box model */
border: none; /* remove border */
backdrop-filter: blur(8px);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* hover */
.changelog-guide-btn:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
/* click */
.changelog-guide-btn:active {
transform: scale(0.95);
}
/* shine effect */
.changelog-guide-btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.7),
transparent
);
transform: skewX(-20deg);
}
.changelog-guide-btn:hover::after {
left: 150%;
transition: 0.6s;
}
/* ================= MOBILE FIXES ================= */
@media (max-width: 768px) {
/* Stack hero elements */
.changelog-hero {
flex-direction: column;
align-items: flex-start;
gap: 15px;
padding: 20px;
}
.hero-actions {
flex-direction: row; /* buttons side by side */
justify-content: flex-start;
width: 100%;
gap: 10px;
}
.changelog-guide-btn {
flex: 1; /* buttons fill width on mobile */
text-align: center;
}
/* Reduce text size for smaller screens */
.hero-version {
font-size: 1.5rem;
}
.hero-desc {
font-size: 0.9rem;
}
.hero-badge {
font-size: 0.75rem;
padding: 0 12px;
height: 32px;
}
/* Guide hero adjustments */
.guide-hero {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 20px;
}
.guide-hero-left,
.guide-hero-right {
width: 100%;
justify-content: flex-start;
}
.guide-hero h3 {
font-size: 1.2rem;
}
.guide-desc {
font-size: 0.85rem;
}
/* Grid cards stack better */
.guide-grid {
grid-template-columns: 1fr; /* single column on mobile */
gap: 12px;
}
.format-box {
width: 50px;
height: 50px;
font-size: 1.1rem;
}
}
/* ================= APPLICATIONS GRID ================= */
.applications-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:18px;
}
/* ================= APPLICATION CARD ================= */
.application-card{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
overflow:hidden;
cursor:pointer;
transition:0.3s;
}
.application-card:hover{
transform:translateY(-4px);
border-color:rgba(88,101,242,0.5);
box-shadow:
0 15px 40px rgba(0,0,0,0.6),
0 0 25px rgba(88,101,242,0.2);
}
/* banner */
.app-banner{
height:90px;
background-size:cover;
background-position:center;
}
/* body */
.app-body{
padding:20px 15px 15px;
}
/* ================= CARD HEADER (MATCH MODAL) ================= */
.app-header{
display:flex;
align-items:center;
gap:12px;
margin-top:-30px; /* overlap banner like Discord */
}
/* avatar */
.app-avatar{
width:55px;
height:55px;
border-radius:50%;
border:3px solid #0f0f14;
flex-shrink:0;
}
/* info */
.app-info{
display:flex;
flex-direction:column;
justify-content:center;
line-height:1.2;
}
.app-info strong{
font-size:15px;
margin:0;
}
.app-info span{
font-size:12px;
color:#9ca3af;
margin-top:2px;
}
/* preview */
.app-preview{
display:flex;
gap:10px;
margin-top:12px;
font-size:12px;
color:#d1d5db;
}
/* footer */
.app-footer{
margin-top:12px;
display:flex;
justify-content:space-between;
font-size:11px;
color:#9ca3af;
}
/* status */
.status{
padding:4px 10px;
border-radius:999px;
font-size:11px;
font-weight:600;
text-transform:capitalize;
}
.status.pending{
background:rgba(250,204,21,0.15);
color:#facc15;
}
.status.accepted{
background:rgba(34,197,94,0.15);
color:#22c55e;
}
.status.denied{
background:rgba(239,68,68,0.15);
color:#ef4444;
}
/* ================= MODAL ================= */
.application-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(10px);
justify-content:center;
align-items:center;
z-index:999;
}
.application-modal-content{
width:90%;
max-width:850px;
max-height:90vh;
overflow-y:auto;
background:#0f0f14;
border-radius:20px;
border:1px solid rgba(255,255,255,0.08);
position:relative;
padding-bottom:20px;
/* β
FIX GAP */
scrollbar-gutter: stable;
}
.application-modal-content{
overflow-y: auto;
padding-right: 0; /* ensure no extra spacing */
}
/* remove scrollbar completely */
.application-modal-content::-webkit-scrollbar{
width:0;
height:0;
}
.application-modal-content{
scrollbar-width: none; /* Firefox */
}
/* close */
.application-close{
position:absolute;
top:15px;
right:20px;
font-size:22px;
cursor:pointer;
/* β
ALWAYS VISIBLE RED */
color:#ef4444;
/* optional glow for premium feel */
text-shadow:0 0 10px rgba(239,68,68,0.6);
transition:0.2s;
z-index:10; /* ensure it's above banner */
}
.application-close:hover{
color:#ff6b6b;
transform:scale(1.15);
}
/* banner */
.app-modal-banner{
height:160px;
background-size:cover;
background-position:center;
border-radius:20px 20px 0 0;
}
/* ================= MODAL HEADER ================= */
.app-modal-header{
display:flex;
align-items:center;
gap:15px;
padding:0 20px;
margin-top:-50px;
}
.modal-avatar{
width:85px;
height:85px;
border-radius:50%;
border:4px solid #0f0f14;
flex-shrink:0;
}
.app-modal-header div{
display:flex;
flex-direction:column;
justify-content:center;
margin-top:10px;
}
.app-modal-header h2{
font-size:20px;
margin:0;
}
.app-modal-header span{
font-size:13px;
color:#9ca3af;
}
/* ================= MODERN CARD SECTIONS ================= */
.app-sections{
padding:20px;
display:grid;
gap:16px;
}
.app-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);
border-radius:16px;
padding:16px;
transition:0.25s;
}
.app-card:hover{
border-color:rgba(88,101,242,0.4);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}
.app-card h3{
font-size:14px;
margin-bottom:10px;
color:#5865F2;
}
.app-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
}
.app-item{
background:rgba(255,255,255,0.02);
padding:10px;
border-radius:10px;
}
.app-item span{
display:block;
font-size:11px;
color:#9ca3af;
}
.app-item strong{
font-size:13px;
color:#e5e7eb;
}
/* ================= GLOBAL TRANSITIONS ================= */
.application-card,
.app-card,
.app-item,
.app-info strong,
.app-preview span,
.status,
.application-close{
transition: all 0.25s ease;
}
.application-card:hover{
transform:translateY(-6px) scale(1.01);
border-color:rgba(88,101,242,0.6);
box-shadow:
0 20px 50px rgba(0,0,0,0.7),
0 0 35px rgba(88,101,242,0.25);
}
.app-info strong:hover{
color:#ffffff;
text-shadow:0 0 10px rgba(255,255,255,0.3);
}
.status:hover{
transform:scale(1.08);
filter:brightness(1.2);
}
.app-card:hover{
transform:translateY(-3px);
border-color:rgba(88,101,242,0.5);
box-shadow:
0 15px 30px rgba(0,0,0,0.5),
0 0 20px rgba(88,101,242,0.15);
}
.app-item:hover{
background:rgba(88,101,242,0.12);
transform:translateY(-2px) scale(1.01);
box-shadow:0 5px 15px rgba(0,0,0,0.4);
}
.app-item:hover strong{
color:#ffffff;
}
.app-item:hover span{
color:#c7d2fe;
}
.app-card h3:hover{
color:#7c8cff;
text-shadow:0 0 10px rgba(88,101,242,0.5);
}
.modal-avatar:hover{
transform:scale(1.05);
box-shadow:0 0 20px rgba(88,101,242,0.4);
}
/* ================= USERNAME HOVER ================= */
.app-info strong,
.app-modal-header h2{
position:relative;
}
.app-info strong:hover,
.app-modal-header h2:hover{
color:#ffffff;
text-shadow:0 0 12px rgba(255,255,255,0.35);
transform:translateY(-1px);
}
/* ================= ID HOVER ================= */
.app-info span,
.app-modal-header span{
transition:all 0.25s ease;
}
.app-info span:hover,
.app-modal-header span:hover{
color:#c7d2fe;
text-shadow:0 0 8px rgba(88,101,242,0.4);
}
/* ================= SECTION TITLES ================= */
.app-card h3{
position:relative;
display:inline-block;
transition:all 0.25s ease;
}
/* underline glow animation */
.app-card h3::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0%;
height:2px;
background:linear-gradient(90deg,#5865F2,#9aa4ff);
transition:width 0.3s ease;
border-radius:2px;
}
/* hover effect */
.app-card h3:hover{
color:#7c8cff;
text-shadow:0 0 12px rgba(88,101,242,0.5);
}
.app-card h3:hover::after{
width:100%;
}
.app-modal-header h2,
.app-modal-header span{
transition:all 0.25s ease;
}
/* ================= CARD AVATAR HOVER ================= */
.app-avatar{
transition:all 0.25s ease;
}
.app-avatar:hover{
transform:scale(1.08);
box-shadow:0 0 20px rgba(88,101,242,0.4);
}
/* ================= SECTION TITLE CURSOR FIX ================= */
.app-card h3{
cursor:default; /* π force arrow */
user-select:none; /* optional: prevents text highlight */
}
.app-card h3:hover{
cursor:default; /* keep arrow even on hover */
}
/* ================= TIMESTAMP HOVER ================= */
.app-footer span:last-child{
transition:all 0.25s ease;
}
.app-footer span:last-child:hover{
color:#c7d2fe;
text-shadow:0 0 8px rgba(88,101,242,0.4);
transform:translateY(-1px);
}
/* ================= PREVIEW TAGS ================= */
.app-preview span{
padding:4px 8px;
border-radius:6px;
transition:all 0.25s ease;
}
/* hover effect */
.app-preview span:hover{
background:rgba(88,101,242,0.15);
color:#ffffff;
transform:translateY(-2px) scale(1.05);
box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
/* ================= ACTION SECTION ================= */
.app-action-section{
margin-top:10px;
padding:18px;
border-radius:16px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
position:relative;
overflow:hidden;
}
/* subtle glow border */
.app-action-section::before{
content:"";
position:absolute;
inset:0;
border-radius:16px;
background:linear-gradient(120deg,rgba(88,101,242,0.15),transparent);
opacity:0;
transition:0.3s;
}
.app-action-section:hover::before{
opacity:1;
}
/* ================= HEADER ================= */
.app-action-header{
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:14px;
}
.app-action-header h3{
font-size:14px;
color:#5865F2;
margin:0;
}
.app-action-header span{
font-size:11px;
color:#9ca3af;
}
/* ================= BUTTON GROUP ================= */
.app-action-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}
/* ================= BUTTON BASE ================= */
.app-btn{
flex:1;
min-width:120px;
padding:10px 14px;
border-radius:10px;
border:none;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:all 0.25s ease;
position:relative;
overflow:hidden;
}
/* glow effect */
.app-btn::after{
content:"";
position:absolute;
inset:0;
opacity:0;
transition:0.3s;
border-radius:10px;
}
/* ================= ACCEPT ================= */
.app-btn.accept{
background:rgba(34,197,94,0.15);
color:#22c55e;
}
.app-btn.accept::after{
background:rgba(34,197,94,0.25);
}
.app-btn.accept:hover{
transform:translateY(-2px) scale(1.03);
box-shadow:0 10px 25px rgba(34,197,94,0.25);
}
.app-btn.accept:hover::after{
opacity:1;
}
/* ================= DENY ================= */
.app-btn.deny{
background:rgba(239,68,68,0.15);
color:#ef4444;
}
.app-btn.deny::after{
background:rgba(239,68,68,0.25);
}
.app-btn.deny:hover{
transform:translateY(-2px) scale(1.03);
box-shadow:0 10px 25px rgba(239,68,68,0.25);
}
.app-btn.deny:hover::after{
opacity:1;
}
/* ================= DISABLED STATE (ADMIN VIEW) ================= */
.app-action-section.disabled{
opacity:0.65;
}
/* block interaction */
.app-action-section.disabled .app-btn{
cursor:not-allowed;
pointer-events:none;
filter:grayscale(0.4);
}
/* barrier overlay effect */
.app-action-section.disabled::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.25);
backdrop-filter:blur(2px);
border-radius:16px;
}
/* optional lock icon feel */
.app-action-section.disabled:hover{
box-shadow:0 0 0 1px rgba(239,68,68,0.2);
}
/* ================= BUTTON PRESS FEEDBACK ================= */
.app-btn:active{
transform:scale(0.96);
box-shadow:none;
}
/* SUCCESS */
.save-toast.success{
background:rgba(34,197,94,0.15);
color:#22c55e;
border:1px solid rgba(34,197,94,0.4);
}
/* ERROR */
.save-toast.error{
background:rgba(239,68,68,0.15);
color:#ef4444;
border:1px solid rgba(239,68,68,0.4);
}
/* ================= MODAL HOVER INTERACTION ================= */
/* smooth transform base */
.application-modal-content{
transition: transform 0.35s ease, box-shadow 0.35s ease, border 0.35s ease;
will-change: transform;
}
/* main hover effect */
.application-modal-content:hover{
transform: translateY(-6px) scale(1.01);
border-color: rgba(88,101,242,0.4);
box-shadow:
0 30px 80px rgba(0,0,0,0.75),
0 0 40px rgba(88,101,242,0.25);
}
/* subtle glow layer */
.application-modal-content::before{
content:"";
position:absolute;
inset:0;
border-radius:20px;
pointer-events:none;
background: radial-gradient(
circle at top,
rgba(88,101,242,0.15),
transparent 60%
);
opacity:0;
transition: opacity 0.35s ease;
}
/* glow appears on hover */
.application-modal-content:hover::before{
opacity:1;
}
/* ================= DEPTH PARALLAX FEEL ================= */
/* banner reacts slightly */
.application-modal-content:hover .app-modal-banner{
transform: scale(1.02);
filter: brightness(1.05);
}
/* avatar pops */
.application-modal-content:hover .modal-avatar{
transform: scale(1.06);
}
/* smooth transitions for inner elements */
.app-modal-banner,
.modal-avatar{
transition: all 0.35s ease;
}
/* ================= CLICK FEEDBACK ================= */
.application-modal-content:active{
transform: scale(0.995);
}
/* ================= THEME SUPPORT (APPLICATIONS) ================= */
/* main modal */
.application-modal-content{
background: var(--card-bg);
color: var(--text-color);
border: 1px solid var(--border-color, rgba(0,0,0,0.1));
box-shadow: 0 20px 50px var(--shadow-color);
}
/* cards inside modal */
.app-card{
background: var(--card-bg);
border: 1px solid var(--border-color, rgba(0,0,0,0.08));
}
/* items */
.app-item{
background: rgba(0,0,0,0.03);
}
/* text colors */
.app-item strong{
color: var(--text-color);
}
.app-item span{
color: rgba(0,0,0,0.6);
}
/* modal header text */
.app-modal-header span{
color: rgba(0,0,0,0.6);
}
/* preview text */
.app-preview{
color: var(--text-color);
}
/* footer */
.app-footer{
color: rgba(0,0,0,0.6);
}
/* ================= DARK MODE FIXES ================= */
[data-theme="dark"] .app-item{
background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .app-item span{
color: #9ca3af;
}
[data-theme="dark"] .app-modal-header span{
color: #9ca3af;
}
[data-theme="dark"] .app-footer{
color: #9ca3af;
}
/* ================= STATUS BADGES (THEME SAFE) ================= */
.status.pending{
background: rgba(250,204,21,0.2);
}
.status.accepted{
background: rgba(34,197,94,0.2);
}
.status.denied{
background: rgba(239,68,68,0.2);
}
/* ================= ACTION SECTION ================= */
.app-action-section{
background: var(--card-bg);
border: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
/* ================= BUTTON TEXT VISIBILITY ================= */
.app-btn{
color: var(--text-color);
}
/* ================= LIGHT MODE CARD DEPTH FIX ================= */
:root .application-card,
:root .app-card,
:root .application-modal-content{
border: 1px solid rgba(0,0,0,0.08);
box-shadow:
0 8px 20px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.04);
}
/* stronger hover so it "lifts" */
:root .application-card:hover,
:root .app-card:hover{
box-shadow:
0 12px 30px rgba(0,0,0,0.12),
0 4px 10px rgba(0,0,0,0.06);
}
/* modal extra separation */
:root .application-modal-content{
box-shadow:
0 25px 60px rgba(0,0,0,0.18);
}
/* ================= OWNER TOOLS GRID ================= */
#owner-tools { margin-top: 40px; }
#owner-tools h2 { font-size: 24px; color: #5865F2; margin-bottom: 8px; }
#owner-tools .section-desc { font-size: 14px; color: #9ca3af; margin-bottom: 24px; }
.owner-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
gap: 18px;
}
.owner-tool-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
cursor: pointer;
transition: all 0.3s ease;
}
.owner-tool-card:hover {
transform: translateY(-4px) scale(1.02);
border-color: rgba(88,101,242,0.5);
box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 35px rgba(88,101,242,0.25);
}
.owner-tool-body { padding: 20px 15px; }
.owner-tool-header h3 { font-size: 16px; color: #5865F2; margin:0; }
.owner-tool-desc { font-size: 13px; color:#c7d2fe; margin-bottom:16px; line-height:1.5; }
.owner-tool-buttons { display:flex; gap:12px; flex-wrap: wrap; }
.owner-tool-btn {
flex:1; min-width:120px;
padding:10px 14px;
border-radius:10px; border:none;
font-size:13px; font-weight:600;
cursor:pointer;
transition:all 0.25s ease;
}
.owner-tool-btn.primary { background: rgba(88,101,242,0.15); color:#5865F2; }
.owner-tool-btn.success { background: rgba(34,197,94,0.15); color:#22c55e; }
.owner-tool-btn.danger { background: rgba(239,68,68,0.15); color:#ef4444; }
/* ================= MODAL ================= */
.admin-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999; justify-content:center; align-items:center; }
.admin-modal-content { background:#1f1f2f; border-radius:12px; padding:20px; max-width:600px; width:90%; color:#fff; text-align:center; overflow-y:auto; max-height:80vh; }
.admin-close { float:right; cursor:pointer; font-size:20px; font-weight:bold; }
.modal-button { padding:10px 15px; border:none; border-radius:8px; font-weight:600; cursor:pointer; background:#5865F2; color:#fff; transition:all 0.25s ease; }
.modal-button:hover { background:#4754d0; }
/* ================= TOAST ================= */
.save-toast { position:fixed; bottom:20px; right:20px; padding:12px 18px; border-radius:12px; font-size:13px; font-weight:600; backdrop-filter:blur(6px); border:1px solid transparent; z-index:9999; opacity:0; transition:all 0.25s ease; }
.save-toast.show { opacity:1; }
.save-toast.success { background: rgba(34,197,94,0.15); color:#22c55e; border-color: rgba(34,197,94,0.4); }
.save-toast.error { background: rgba(239,68,68,0.15); color:#ef4444; border-color: rgba(239,68,68,0.4); }
/* ================= STATUS LABEL ================= */
.status-label { font-weight:600; color:#facc15; }
.status-label.open { color:#22c55e; }
.status-label.closed { color:#ef4444; }
/* ================= ADMIN USER CARDS ================= */
.admin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:15px; }
.user-card {
background: linear-gradient(145deg, #2a2a40, #25253a);
padding: 1rem; border-radius:1rem;
box-shadow:0 8px 25px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.user-card:hover { transform:translateY(-5px) scale(1.02); box-shadow:0 12px 35px rgba(0,0,0,0.6); }
.user-card h4 { margin:0 0 0.3rem 0; color:#e0e0ff; font-size:1rem; }
.user-card p { margin:0.3rem 0; font-size:0.85rem; color:#c0c0d0; }
.user-card button { margin-right:0.5rem; margin-top:0.5rem; padding:0.4rem 0.75rem; border:none; border-radius:0.5rem; font-weight:500; cursor:pointer; transition:all 0.2s ease; }
button.impersonate { background:linear-gradient(135deg,#4caf50,#43a047); color:#fff; }
button.reset-password { background:linear-gradient(135deg,#f44336,#e53935); color:#fff; }
button.toggle-status { background:linear-gradient(135deg,#2196f3,#1e88e5); color:#fff; }
button.manage-user {
background: linear-gradient(135deg, #ff9800, #fb8c00); /* orange gradient */
color: #fff;
}
/* ================= SEARCH BAR ================= */
#accountSearch {
width: 100%;
padding: 8px 12px;
border-radius: 8px;
border:none;
margin-bottom: 15px;
font-size:14px;
outline:none;
background-color:#2a2a40;
color:#fff;
transition: all 0.25s ease;
}
#accountSearch:focus {
background-color:#353555;
box-shadow: 0 0 6px rgba(88,101,242,0.5);
}
/* ================= OWNER TOOLS GRID ================= */
#owner-tools { margin-top: 40px; }
#owner-tools h2 { font-size: 24px; color: #5865F2; margin-bottom: 8px; }
#owner-tools .section-desc { font-size: 14px; color: #9ca3af; margin-bottom: 24px; }
.owner-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
gap: 18px;
}
.owner-tool-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
cursor: pointer;
transition: all 0.3s ease;
}
.owner-tool-card:hover {
transform: translateY(-4px) scale(1.02);
border-color: rgba(88,101,242,0.5);
box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 35px rgba(88,101,242,0.25);
}
.owner-tool-body { padding: 20px 15px; }
.owner-tool-header h3 { font-size: 16px; color: #5865F2; margin:0; }
.owner-tool-desc { font-size: 13px; color:#c7d2fe; margin-bottom:16px; line-height:1.5; }
.owner-tool-buttons { display:flex; gap:12px; flex-wrap: wrap; }
.owner-tool-btn {
flex:1; min-width:120px;
padding:10px 14px;
border-radius:10px; border:none;
font-size:13px; font-weight:600;
cursor:pointer;
transition:all 0.25s ease;
}
.owner-tool-btn.primary { background: rgba(88,101,242,0.15); color:#5865F2; }
.owner-tool-btn.success { background: rgba(34,197,94,0.15); color:#22c55e; }
.owner-tool-btn.danger { background: rgba(239,68,68,0.15); color:#ef4444; }
/* ================= MODAL BASE ================= */
.admin-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999; justify-content:center; align-items:center; }
.admin-modal-content {
background: linear-gradient(145deg, #1c1c2a, #26263f);
border-radius: 20px;
padding: 35px 30px;
max-width: 900px;
width: 90%;
color: #e0e0ff;
text-align: left;
overflow-y: auto;
max-height: 85vh;
font-family: 'Inter', sans-serif;
box-shadow: 0 15px 50px rgba(0,0,0,0.7);
}
.admin-modal-content h2 {
font-size: 1.8rem;
margin-bottom: 20px;
color: #5865F2;
text-align: center;
}
.admin-modal-content p {
font-size: 0.95rem;
color: #c7c7ff;
line-height: 1.6;
}
.admin-close {
float:right;
cursor:pointer;
font-size:24px;
font-weight:bold;
color:#fff;
transition: all 0.25s ease;
}
.admin-close:hover { color:#5865F2; transform:scale(1.1); }
/* ================= USER CARDS IN MODAL ================= */
.admin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
gap: 22px;
margin-top: 25px;
}
.user-card {
background: rgba(30,30,50,0.85);
border-radius: 16px;
padding: 20px;
box-shadow: 0 12px 30px rgba(0,0,0,0.6);
transition: all 0.35s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
backdrop-filter: blur(6px);
}
.user-card:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 18px 45px rgba(0,0,0,0.8);
}
.user-card h4 {
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
color: #fff;
}
.user-card p {
margin: 0.25rem 0;
font-size: 0.88rem;
color: #c7c7ff;
}
.user-card .button-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.user-card button {
flex:1;
padding: 0.5rem 0.85rem;
font-size: 0.85rem;
font-weight: 600;
border-radius: 10px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
button.impersonate {
background: linear-gradient(135deg, #4caf50, #43a047);
color: #fff;
}
button.impersonate:hover {
background: linear-gradient(135deg, #43a047, #388e3c);
transform: translateY(-2px);
}
button.reset-password {
background: linear-gradient(135deg, #f44336, #e53935);
color: #fff;
}
button.reset-password:hover {
background: linear-gradient(135deg, #e53935, #d32f2f);
transform: translateY(-2px);
}
button.toggle-status {
background: linear-gradient(135deg, #2196f3, #1e88e5);
color: #fff;
}
button.toggle-status:hover {
background: linear-gradient(135deg, #1e88e5, #1976d2);
transform: translateY(-2px);
}
/* ================= SEARCH BAR ================= */
#accountSearch {
width: 100%;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 25px;
font-size: 0.95rem;
outline:none;
background: rgba(40,40,60,0.7);
color:#fff;
transition: all 0.3s ease;
}
#accountSearch:focus {
background: rgba(50,50,80,0.85);
box-shadow: 0 0 12px rgba(88,101,242,0.5);
}
/* ================= CONFIRMATION MODALS INTEGRATED ================= */
.admin-modal.confirm {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.3); /* softer overlay */
z-index: 900;
display: flex;
justify-content: center;
align-items: center;
}
.admin-modal-content.confirm {
max-width: 480px;
width: 90%;
padding: 40px 35px;
background: rgba(28,28,42,0.95);
border-radius: 22px;
box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(88,101,242,0.15);
text-align: center;
color: #e0e0ff;
backdrop-filter: blur(8px);
transition: all 0.35s ease;
transform: translateY(-10px);
opacity: 0;
}
.admin-modal.show .admin-modal-content.confirm {
transform: translateY(0);
opacity: 1;
}
.admin-modal-content.confirm h3 {
font-size: 1.5rem;
font-weight: 700;
color: #5865F2;
margin-bottom: 18px;
}
.admin-modal-content.confirm p {
font-size: 1rem;
color: #c7c7ff;
margin-bottom: 28px;
line-height: 1.5;
}
.admin-modal-content.confirm .modal-button {
padding: 12px 26px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 14px;
margin: 0 8px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.modal-button.confirm {
background: linear-gradient(135deg,#4caf50,#43a047);
color: #fff;
}
.modal-button.confirm:hover {
background: linear-gradient(135deg,#43a047,#388e3c);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.modal-button.cancel {
background: linear-gradient(135deg,#ef4444,#e53935);
color: #fff;
}
.modal-button.cancel:hover {
background: linear-gradient(135deg,#e53935,#d32f2f);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
/* ================= TOAST ================= */
.save-toast { position:fixed; bottom:20px; right:20px; padding:12px 18px; border-radius:12px; font-size:13px; font-weight:600; backdrop-filter:blur(6px); border:1px solid transparent; z-index:9999; opacity:0; transition:all 0.25s ease; }
.save-toast.show { opacity:1; }
.save-toast.success { background: rgba(34,197,94,0.15); color:#22c55e; border-color: rgba(34,197,94,0.4); }
.save-toast.error { background: rgba(239,68,68,0.15); color:#ef4444; border-color: rgba(239,68,68,0.4); }
/* ================= STATUS LABEL ================= */
.status-label { font-weight:600; color:#facc15; }
.status-label.open { color:#22c55e; }
.status-label.closed { color:#ef4444; }
/* ================= OWNER TOOL CARD HOVER ================= */
.owner-tool-card:hover {
transform: translateY(-5px) scale(1.03);
border-color: rgba(88,101,242,0.6);
box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 40px rgba(88,101,242,0.35);
}
/* ================= OWNER TOOL BUTTON HOVER ================= */
.owner-tool-btn:hover {
transform: translateY(-2px) scale(1.05);
filter: brightness(1.15);
}
/* ================= USER CARD BUTTON HOVER ================= */
.user-card button:hover {
transform: translateY(-2px) scale(1.03);
filter: brightness(1.1);
}
/* ================= SEARCH BAR HOVER ================= */
#accountSearch:hover {
background: rgba(50,50,85,0.9);
box-shadow: 0 0 12px rgba(88,101,242,0.5);
}
/* ================= MODAL MOBILE GAP FIX ================= */
@media (max-width: 600px) {
.application-modal {
align-items: flex-start; /* push modal down instead of center */
padding-top: 70px; /* π adjust this if your navbar height changes */
}
.application-modal-content {
margin-top: 0; /* prevent double spacing */
}
}
/* extra small phones */
@media (max-width: 420px) {
.application-modal {
padding-top: 80px; /* slightly more breathing room */
}
}
/* ================= STATUS LABEL HOVER ================= */
.status-label:hover {
transform: scale(1.05);
color: #facc15;
text-shadow: 0 0 6px rgba(255,255,255,0.3);
}
/* ================= MODAL & CLOSE BUTTON HOVER ================= */
.admin-modal-content:hover {
transform: translateY(-3px) scale(1.01);
}
.admin-close:hover {
transform: rotate(20deg) scale(1.2);
}
/* ================= CONFIRM MODAL BUTTONS ================= */
.modal-button.confirm:hover,
.modal-button.cancel:hover {
transform: translateY(-3px) scale(1.05);
filter: brightness(1.1);
}
/* ================= TOAST HOVER EFFECT ================= */
.save-toast:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
/* ================= SMOOTH TRANSITIONS ================= */
.owner-tool-card,
.user-card,
.owner-tool-btn,
.user-card button,
#accountSearch,
.admin-modal-content,
.status-label,
.save-toast,
.modal-button {
transition: all 0.3s ease-in-out;
}
/* ================= MODAL USER BANNER & AVATAR ================= */
.user-card .user-banner,
.admin-modal-content .modal-banner {
width: 100%;
height: 100px; /* or whatever height looks best */
background-size: cover;
background-position: center;
border-radius: 12px;
object-fit: cover; /* ensures images scale correctly */
}
.user-card .user-avatar,
.admin-modal-content .modal-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #5865F2;
object-fit: cover;
display: block;
margin: -40px auto 12px auto; /* overlap banner */
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.user-card .user-avatar:hover,
.admin-modal-content .modal-avatar:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(88,101,242,0.7);
}
.user-card .button-row {
display: flex;
flex-direction: column; /* stack vertically */
gap: 8px; /* spacing between buttons */
margin-top: 12px;
}
/* ================= CUSTOM TOOLTIP ================= */
.custom-tooltip {
position: absolute;
bottom: 120%; /* position above button */
left: 50%;
transform: translateX(-50%) scale(0.95);
background-color: #2c2f33; /* dark background */
color: #fff; /* white text */
padding: 6px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Arrow below tooltip */
.custom-tooltip::after {
content: '';
position: absolute;
top: 100%; /* bottom of tooltip */
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #2c2f33 transparent transparent transparent;
}
/* Show tooltip */
.show-tooltip {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* Optional: smoother hover fade */
button .custom-tooltip {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ================= OWNER TOOLS THEME SUPPORT ================= */
/* base card uses theme variables like applications */
.owner-tool-card {
background: var(--card-bg);
border: 1px solid var(--border-color, rgba(0,0,0,0.08));
box-shadow: 0 8px 20px var(--shadow-color, rgba(0,0,0,0.08));
}
/* hover = same lift effect */
.owner-tool-card:hover {
box-shadow:
0 12px 30px var(--shadow-color, rgba(0,0,0,0.12)),
0 4px 10px var(--shadow-color, rgba(0,0,0,0.06));
}
/* text adapts automatically */
.owner-tool-desc {
color: var(--text-muted, rgba(0,0,0,0.6));
}
/* ================= OWNER TOOL BUTTON UPGRADE ================= */
.owner-tool-btn {
flex:1;
min-width:120px;
padding:10px 14px;
border-radius:10px;
border:none;
font-size:13px;
font-weight:600;
cursor:pointer;
position:relative;
overflow:hidden;
transition:all 0.25s ease;
color: var(--text-color);
}
/* glow layer */
.owner-tool-btn::after{
content:"";
position:absolute;
inset:0;
border-radius:10px;
opacity:0;
transition:0.3s;
}
/* PRIMARY */
.owner-tool-btn.primary{
background:rgba(88,101,242,0.15);
color:#5865F2;
}
.owner-tool-btn.primary::after{
background:rgba(88,101,242,0.25);
}
/* SUCCESS */
.owner-tool-btn.success{
background:rgba(34,197,94,0.15);
color:#22c55e;
}
.owner-tool-btn.success::after{
background:rgba(34,197,94,0.25);
}
/* DANGER */
.owner-tool-btn.danger{
background:rgba(239,68,68,0.15);
color:#ef4444;
}
.owner-tool-btn.danger::after{
background:rgba(239,68,68,0.25);
}
/* HOVER = THIS is what makes it feel premium */
.owner-tool-btn:hover{
transform:translateY(-2px) scale(1.04);
}
.owner-tool-btn:hover::after{
opacity:1;
}
.owner-tool-btn:hover.primary{
box-shadow:0 10px 25px rgba(88,101,242,0.25);
}
.owner-tool-btn:hover.success{
box-shadow:0 10px 25px rgba(34,197,94,0.25);
}
.owner-tool-btn:hover.danger{
box-shadow:0 10px 25px rgba(239,68,68,0.25);
}
/* click feedback */
.owner-tool-btn:active{
transform:scale(0.96);
box-shadow:none;
}
/* ================= LIGHT MODE DEPTH FIX ================= */
/* THIS is the key part that makes it look clean like applications */
:root .owner-tool-card {
border: 1px solid rgba(0,0,0,0.08);
box-shadow:
0 8px 20px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.04);
}
/* stronger hover lift */
:root .owner-tool-card:hover {
box-shadow:
0 12px 30px rgba(0,0,0,0.12),
0 4px 10px rgba(0,0,0,0.06);
}
/* ================= DARK MODE FIX ================= */
[data-theme="dark"] .owner-tool-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
[data-theme="dark"] .owner-tool-desc {
color: #c7d2fe;
}
/* ================= MODAL BASE (NEUTRAL STRUCTURE) ================= */
.admin-modal {
display:none;
position:fixed;
inset:0;
z-index:999;
justify-content:center;
align-items:center;
transition:all 0.3s ease;
}
.admin-modal-content {
border-radius:20px;
padding:35px 30px;
max-width:900px;
width:90%;
text-align:left;
overflow-y:auto;
max-height:85vh;
font-family:'Inter', sans-serif;
transition:all 0.3s ease;
}
/* ================= DARK MODE (DEFAULT / STRONGER PRIORITY) ================= */
[data-theme="dark"] .admin-modal {
background: rgba(0,0,0,0.6);
}
[data-theme="dark"] .admin-modal-content {
background: linear-gradient(145deg, #1c1c2a, #26263f);
border: 1px solid rgba(255,255,255,0.08);
color: #e0e0ff;
box-shadow: 0 15px 50px rgba(0,0,0,0.7);
}
[data-theme="dark"] .admin-modal-content h2 {
color: #5865F2;
}
[data-theme="dark"] .admin-modal-content p {
color: #c7c7ff;
}
[data-theme="dark"] #accountSearch {
background: rgba(40,40,60,0.7);
border: 1px solid rgba(255,255,255,0.1);
color:#fff;
}
[data-theme="dark"] #accountSearch:focus {
background: rgba(50,50,80,0.85);
box-shadow: 0 0 12px rgba(88,101,242,0.5);
}
[data-theme="dark"] .user-card {
background: rgba(30,30,50,0.85);
box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}
[data-theme="dark"] .user-card h4 { color:#fff; }
[data-theme="dark"] .user-card p { color:#c7c7ff; }
[data-theme="dark"] .admin-close { color:#fff; }
/* ================= LIGHT MODE (ONLY WHEN NOT DARK) ================= */
body:not([data-theme="dark"]) .admin-modal {
background: rgba(0,0,0,0.25);
backdrop-filter: blur(6px);
}
body:not([data-theme="dark"]) .admin-modal-content {
background: linear-gradient(180deg, #f4f6fb, #eef1f7);
border: 1px solid rgba(0,0,0,0.06);
color: #111827;
box-shadow:
0 40px 100px rgba(0,0,0,0.25),
0 10px 30px rgba(0,0,0,0.1);
}
body:not([data-theme="dark"]) .admin-modal-content h2 {
color: #111827;
}
body:not([data-theme="dark"]) .admin-modal-content p {
color: #6b7280;
}
/* SEARCH */
body:not([data-theme="dark"]) #accountSearch {
background:#fff;
border:1px solid rgba(0,0,0,0.08);
color:#111827;
}
body:not([data-theme="dark"]) #accountSearch:focus {
border-color: rgba(88,101,242,0.4);
box-shadow: 0 0 0 3px rgba(88,101,242,0.15);
}
/* USER CARDS */
body:not([data-theme="dark"]) .user-card {
background:#ffffff;
border:1px solid rgba(0,0,0,0.06);
box-shadow:
0 15px 35px rgba(0,0,0,0.12),
0 4px 12px rgba(0,0,0,0.06);
}
body:not([data-theme="dark"]) .user-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow:
0 25px 60px rgba(0,0,0,0.18),
0 8px 20px rgba(0,0,0,0.08);
}
body:not([data-theme="dark"]) .user-card h4 { color:#111827; }
body:not([data-theme="dark"]) .user-card p { color:#6b7280; }
/* AVATAR */
body:not([data-theme="dark"]) .user-avatar {
border:3px solid #fff;
}
/* CLOSE BUTTON */
body:not([data-theme="dark"]) .admin-close {
color:#6b7280;
}
body:not([data-theme="dark"]) .admin-close:hover {
color:#5865F2;
}
/* ================= CONFIRM MODAL ================= */
[data-theme="dark"] .admin-modal-content.confirm {
background: rgba(28,28,42,0.95);
}
body:not([data-theme="dark"]) .admin-modal-content.confirm {
background: linear-gradient(180deg,#f8f9ff,#eef2ff);
}
/* ================= MANAGE USER MODAL (FIXED SYSTEM) ================= */
.manage-user-modal {
display: none; /* β
hidden by default */
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 2000;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
}
/* β
ACTIVE STATE (SHOW MODAL) */
.manage-user-modal.active {
display: flex;
}
/* ===== CONTAINER ===== */
.manage-user-modal-content {
width: 780px;
max-height: 90vh;
/* β
smarter scrolling */
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
background: #0b0b0b;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 25px 60px rgba(0,0,0,0.6);
animation: modalFade 0.25s ease;
position: relative;
}
/* β
hide scrollbar completely (Chrome/Safari) */
.manage-user-modal-content::-webkit-scrollbar {
display: none;
}
/* smooth open */
@keyframes modalFade {
from { transform: scale(0.94); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ===== CLOSE BUTTON ===== */
.manage-user-modal .admin-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
border-radius: 50%;
font-size: 18px;
color: white;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
}
.manage-user-modal .admin-close:hover {
background: rgba(255,255,255,0.15);
transform: scale(1.1);
}
/* ================= PROFILE CARD ================= */
.manage-user-card {
overflow: hidden;
border-radius: 20px;
}
/* ===== BANNER ===== */
.manage-user-banner {
height: 180px;
background-size: cover;
background-position: center;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
}
/* Smooth fade into content */
.manage-user-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.2) 0%,
rgba(11,11,11,0.6) 55%,
rgba(11,11,11,1) 100%
);
}
/* ===== PROFILE ===== */
.manage-user-profile {
text-align: center;
margin-top: -60px;
position: relative;
z-index: 2;
}
.manage-user-profile img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #0b0b0b;
box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
transition: 0.25s;
}
.manage-user-profile img:hover {
transform: scale(1.08);
}
.manage-user-profile h2 {
margin-top: 12px;
font-size: 20px;
}
.manage-user-profile p {
font-size: 13px;
opacity: 0.6;
}
/* ===== DETAILS WRAPPER ===== */
.manage-user-details {
padding: 24px;
display: grid;
gap: 18px;
}
/* ===== SECTION ===== */
.manage-section {
background: rgba(255,255,255,0.03);
border-radius: 14px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.04);
transition: 0.25s;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
}
.manage-section:hover {
background: rgba(255,255,255,0.06);
transform: translateY(-2px);
}
/* section title */
.manage-section h4 {
grid-column: span 2;
font-size: 13px;
margin-bottom: 6px;
opacity: 0.7;
}
/* ===== FIELDS ===== */
.field {
display: flex;
flex-direction: column;
}
.field span {
font-size: 11px;
opacity: 0.5;
margin-bottom: 4px;
}
.field input,
.field select {
background: rgba(255,255,255,0.05);
border: none;
border-radius: 8px;
padding: 10px;
font-size: 13px;
color: white;
transition: 0.2s;
}
.field input:focus,
.field select:focus {
outline: none;
background: rgba(255,255,255,0.08);
}
/* disabled look */
.field input:disabled,
.field select:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ===== BUTTONS ===== */
.manage-user-modal .owner-tool-buttons {
padding: 16px 24px 24px;
display: flex;
gap: 10px;
justify-content: flex-end;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
.manage-user-modal-content {
width: 95%;
}
.manage-section {
grid-template-columns: 1fr;
}
.manage-section h4 {
grid-column: span 1;
}
}
/* smoother UI everywhere */
.manage-user-modal *,
.manage-user-modal *::before,
.manage-user-modal *::after {
transition: all 0.2s ease;
}
.manage-user-modal-content:hover {
transform: translateY(-2px);
box-shadow: 0 30px 70px rgba(0,0,0,0.75);
}
.manage-user-profile img:hover {
transform: scale(1.1);
box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.manage-section:hover {
background: rgba(255,255,255,0.07);
transform: translateY(-3px) scale(1.01);
border-color: rgba(255,255,255,0.08);
}
.field input,
.field select {
border: 1px solid transparent;
}
/* hover */
.field input:hover,
.field select:hover {
background: rgba(255,255,255,0.07);
}
/* focus (clicking into it) */
.field input:focus,
.field select:focus {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(88,101,242,0.6); /* Discord blurple */
box-shadow: 0 0 0 2px rgba(88,101,242,0.2);
}
.field input:disabled,
.field select:disabled {
opacity: 0.5;
}
.field input:disabled:hover,
.field select:disabled:hover {
background: rgba(255,255,255,0.05);
transform: none;
box-shadow: none;
}
.manage-user-modal .admin-close:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.15) rotate(90deg);
}
.manage-user-banner {
transition: transform 0.4s ease;
}
.manage-user-card:hover .manage-user-banner {
transform: scale(1.03);
}
/* ===== SELECT BASE FIX ===== */
.field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: rgba(255,255,255,0.05);
color: white;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 10px 36px 10px 10px; /* space for arrow */
cursor: pointer;
}
/* ===== CUSTOM DROPDOWN ARROW ===== */
.field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
}
/* ===== HOVER ===== */
.field select:hover {
background-color: rgba(255,255,255,0.08);
}
/* ===== FOCUS ===== */
.field select:focus {
border: 1px solid rgba(88,101,242,0.6);
box-shadow: 0 0 0 2px rgba(88,101,242,0.2);
background-color: rgba(255,255,255,0.1);
}
/* ===== OPTIONS (DROPDOWN LIST) ===== */
.field select option {
background: #0b0b0b;
color: white;
}
/* ================= MANAGE USER MODAL - LIGHT THEME (UPDATED) ================= */
body:not([data-theme="dark"]) .manage-user-modal {
background: rgba(0,0,0,0.25);
backdrop-filter: blur(6px);
}
body:not([data-theme="dark"]) .manage-user-modal-content {
background: linear-gradient(180deg, #f4f6fb, #eef1f7);
border: 1px solid rgba(0,0,0,0.06);
color: #111827;
box-shadow:
0 40px 100px rgba(0,0,0,0.25),
0 10px 30px rgba(0,0,0,0.1);
}
/* CLOSE BUTTON */
body:not([data-theme="dark"]) .manage-user-modal .admin-close {
background: rgba(0,0,0,0.08);
color: #6b7280;
}
body:not([data-theme="dark"]) .manage-user-modal .admin-close:hover {
background: rgba(0,0,0,0.15);
color: #5865F2;
}
/* PROFILE IMAGE & TEXT */
body:not([data-theme="dark"]) .manage-user-profile img {
border: 4px solid #f4f6fb;
box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}
body:not([data-theme="dark"]) .manage-user-profile h2 {
color: #111827;
}
body:not([data-theme="dark"]) .manage-user-profile p {
color: #6b7280;
}
/* ================= SECTIONS ================= */
body:not([data-theme="dark"]) .manage-section {
background: #ffffff; /* soft white for readability */
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: all 0.25s;
}
body:not([data-theme="dark"]) .manage-section:hover {
background: #f9f9fb; /* slightly lighter on hover */
transform: translateY(-2px);
border-color: rgba(0,0,0,0.12);
}
body:not([data-theme="dark"]) .manage-section h4 {
color: #374151; /* darker text for section titles */
}
/* ================= FIELDS ================= */
body:not([data-theme="dark"]) .field span {
color: #6b7280; /* label text */
}
body:not([data-theme="dark"]) .field input,
body:not([data-theme="dark"]) .field select {
background: #f4f6fb;
color: #111827;
border: 1px solid rgba(0,0,0,0.12);
}
body:not([data-theme="dark"]) .field input:hover,
body:not([data-theme="dark"]) .field select:hover {
background: #f9f9fb;
border-color: rgba(0,0,0,0.15);
}
body:not([data-theme="dark"]) .field input:focus,
body:not([data-theme="dark"]) .field select:focus {
background: #ffffff;
border: 1px solid rgba(88,101,242,0.4);
box-shadow: 0 0 0 2px rgba(88,101,242,0.15);
}
/* DISABLED FIELDS */
body:not([data-theme="dark"]) .field input:disabled,
body:not([data-theme="dark"]) .field select:disabled {
background: #f4f6fb;
opacity: 0.6;
cursor: not-allowed;
}
/* ================= DROPDOWNS ================= */
body:not([data-theme="dark"]) .field select {
background-image: url("data:image/svg+xml;utf8,");
background-color: #f4f6fb;
color: #111827;
}
body:not([data-theme="dark"]) .field select option {
background: #ffffff;
color: #111827;
}
body:not([data-theme="dark"]) .field select:hover {
background-color: #f9f9fb;
}
body:not([data-theme="dark"]) .field select:focus {
background-color: #ffffff;
border: 1px solid rgba(88,101,242,0.4);
box-shadow: 0 0 0 2px rgba(88,101,242,0.15);
}
/* BUTTONS WRAPPER */
body:not([data-theme="dark"]) .manage-user-modal .owner-tool-buttons {
border-top: 1px solid rgba(0,0,0,0.08);
}
/* ================= FIX ROLE SELECT ARROWS ================= */
body:not([data-theme="dark"]) .field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #f4f6fb; /* match input background */
color: #111827;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 8px;
padding: 10px 36px 10px 10px; /* space for arrow */
/* Custom arrow */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
cursor: pointer;
}
/* Hover & focus */
body:not([data-theme="dark"]) .field select:hover {
background-color: #f9f9fb;
}
body:not([data-theme="dark"]) .field select:focus {
background-color: #ffffff;
border: 1px solid rgba(88,101,242,0.4);
box-shadow: 0 0 0 2px rgba(88,101,242,0.15);
}
/* ================= FIX PERMANENT ROLE SELECT ARROW ================= */
.manage-user-modal .field select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
/* fully override background so native arrow never shows */
background-color: inherit;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
border: 1px solid transparent;
border-radius: 8px;
padding: 10px 36px 10px 10px;
cursor: pointer;
color: inherit;
/* remove transitions that touch background-image */
transition: color 0.2s, border 0.2s, box-shadow 0.2s;
}
/* hover/focus just change color/box-shadow, not background */
.manage-user-modal .field select:hover {
border-color: rgba(88,101,242,0.4);
}
.manage-user-modal .field select:focus {
border-color: rgba(88,101,242,0.6);
box-shadow: 0 0 0 2px rgba(88,101,242,0.2);
}
/* ================= CREATE STAFF MODAL ================= */
.create-user-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 2100;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
}
.create-user-modal.active {
display: flex;
}
/* ===== CONTAINER ===== */
.create-user-modal-content {
width: 700px;
max-height: 90vh;
overflow-y: auto;
background: #0b0b0b;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 25px 60px rgba(0,0,0,0.6);
animation: modalFade 0.25s ease;
position: relative;
}
/* hide scrollbar */
.create-user-modal-content::-webkit-scrollbar {
display: none;
}
/* ===== CLOSE BUTTON ===== */
.create-user-modal .admin-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
border-radius: 50%;
font-size: 18px;
color: white;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
}
.create-user-modal .admin-close:hover {
background: rgba(255,255,255,0.15);
transform: scale(1.1);
}
/* ===== HEADER ===== */
.create-user-header {
padding: 20px 24px 10px;
}
.create-user-header h2 {
font-size: 20px;
}
/* ===== FORM WRAPPER ===== */
.create-user-form {
padding: 20px 24px;
display: grid;
gap: 18px;
}
/* ===== SECTION (same as manage) ===== */
.create-section {
background: rgba(255,255,255,0.03);
border-radius: 14px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.04);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
transition: 0.25s;
}
.create-section:hover {
background: rgba(255,255,255,0.06);
transform: translateY(-2px);
}
/* section title */
.create-section h4 {
grid-column: span 2;
font-size: 13px;
margin-bottom: 6px;
opacity: 0.7;
}
/* ===== FIELDS ===== */
.create-user-modal .field {
display: flex;
flex-direction: column;
}
.create-user-modal .field span {
font-size: 11px;
opacity: 0.5;
margin-bottom: 4px;
}
.create-user-modal .field input,
.create-user-modal .field select {
background: rgba(255,255,255,0.05);
border: none;
border-radius: 8px;
padding: 10px;
font-size: 13px;
color: white;
transition: 0.2s;
}
/* hover */
.create-user-modal .field input:hover,
.create-user-modal .field select:hover {
background: rgba(255,255,255,0.07);
}
/* focus */
.create-user-modal .field input:focus,
.create-user-modal .field select:focus {
outline: none;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(88,101,242,0.6);
box-shadow: 0 0 0 2px rgba(88,101,242,0.2);
}
/* ===== SELECT FIX ===== */
.create-user-modal .field select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding: 10px 36px 10px 10px;
}
/* ===== BUTTONS ===== */
.create-user-modal .owner-tool-buttons {
padding: 16px 24px 24px;
display: flex;
gap: 10px;
justify-content: flex-end;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* ================= LIGHT THEME ================= */
body:not([data-theme="dark"]) .create-user-modal {
background: rgba(0,0,0,0.25);
}
body:not([data-theme="dark"]) .create-user-modal-content {
background: linear-gradient(180deg, #f4f6fb, #eef1f7);
color: #111827;
border: 1px solid rgba(0,0,0,0.06);
}
body:not([data-theme="dark"]) .create-section {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.1);
}
body:not([data-theme="dark"]) .field input,
body:not([data-theme="dark"]) .field select {
background: #f4f6fb;
color: #111827;
border: 1px solid rgba(0,0,0,0.12);
}
body:not([data-theme="dark"]) .field select {
background-image: url("data:image/svg+xml;utf8,");
}
/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
.create-user-modal-content {
width: 95%;
}
.create-section {
grid-template-columns: 1fr;
}
.create-section h4 {
grid-column: span 1;
}
}
/* ================= HANDBOOK (ULTRA PREMIUM) ================= */
.handbook-wrapper {
display: flex;
gap: 28px;
margin-top: 20px;
align-items: flex-start;
}
/* ================= SIDEBAR ================= */
.handbook-nav {
width: 250px;
padding: 16px;
border-radius: 22px;
background: rgba(255,255,255,0.03);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 15px 40px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
gap: 6px;
position: sticky;
top: 20px;
}
/* nav button */
.handbook-nav button {
position: relative;
border: none;
padding: 11px 14px;
border-radius: 12px;
background: transparent;
color: var(--text-secondary);
font-size: 0.92rem;
text-align: left;
cursor: pointer;
transition: all 0.25s ease;
overflow: hidden;
}
/* hover glow */
.handbook-nav button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
rgba(108,92,255,0.25),
rgba(108,92,255,0.05)
);
opacity: 0;
transition: 0.25s;
}
.handbook-nav button:hover {
color: var(--text-primary);
transform: translateX(6px);
}
.handbook-nav button:hover::before {
opacity: 1;
}
/* active */
.handbook-nav button.active {
color: #fff;
font-weight: 500;
background: linear-gradient(135deg, var(--accent), #8f84ff);
box-shadow:
0 8px 20px rgba(108,92,255,0.45),
inset 0 1px 0 rgba(255,255,255,0.25);
}
/* ================= PANEL ================= */
.handbook-panel {
flex: 1;
padding: 32px;
border-radius: 26px;
background:
linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 25px 60px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
}
/* glow overlay */
.handbook-panel::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at top right,
rgba(108,92,255,0.15),
transparent 60%
);
pointer-events: none;
}
/* ================= SECTIONS ================= */
.hb-section {
display: none;
animation: fadeUp 0.35s ease;
}
.hb-section.active {
display: block;
}
.hb-section h3 {
font-size: 1.7rem;
margin-bottom: 10px;
}
.hb-section h4 {
margin-top: 18px;
margin-bottom: 6px;
}
.hb-section p {
color: var(--text-secondary);
line-height: 1.6;
}
/* ================= CALLOUTS ================= */
.hb-callout {
padding: 14px 16px;
border-radius: 14px;
margin: 14px 0;
background: rgba(108,92,255,0.12);
border: 1px solid rgba(108,92,255,0.3);
color: #dcd9ff;
}
/* warning */
.hb-warning {
padding: 14px 16px;
border-radius: 14px;
margin: 14px 0;
background: rgba(255,80,80,0.12);
border: 1px solid rgba(255,80,80,0.3);
color: #ffd6d6;
}
/* ================= GRID ================= */
.hb-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 14px;
}
/* ================= CARDS ================= */
.hb-card {
position: relative;
padding: 16px;
border-radius: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.25s ease;
overflow: hidden;
}
.hb-card:hover {
transform: translateY(-6px) scale(1.02);
border-color: rgba(108,92,255,0.4);
box-shadow: 0 10px 30px rgba(108,92,255,0.2);
}
/* special cards */
.hb-card.highlight {
border-color: rgba(108,92,255,0.4);
}
.hb-card.warning {
border-color: rgba(255,80,80,0.4);
}
/* ================= RULE BLOCK ================= */
.hb-rule {
padding: 16px;
border-radius: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
display: flex;
justify-content: space-between;
gap: 12px;
transition: 0.25s;
margin-top: 12px;
}
.hb-rule:hover {
transform: translateY(-4px);
border-color: rgba(108,92,255,0.3);
}
.hb-rule small {
display: block;
margin-top: 4px;
color: var(--text-secondary);
}
.hb-rule span {
font-size: 0.75rem;
color: var(--accent);
background: rgba(108,92,255,0.12);
padding: 5px 9px;
border-radius: 8px;
white-space: nowrap;
}
/* ================= TIMELINE ================= */
.hb-timeline {
display: flex;
gap: 14px;
margin-top: 18px;
}
.hb-timeline div {
flex: 1;
padding: 14px;
border-radius: 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.05);
text-align: center;
transition: 0.25s;
}
.hb-timeline div:hover {
transform: translateY(-4px);
border-color: rgba(108,92,255,0.35);
}
/* ================= LIST ================= */
.hb-list {
margin-top: 10px;
padding-left: 18px;
}
.hb-list li {
margin-bottom: 6px;
}
/* ================= STEPS ================= */
.hb-step {
margin-top: 14px;
padding: 16px;
border-radius: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
}
.hb-step ol {
margin-top: 8px;
padding-left: 18px;
}
/* ================= COMMANDS ================= */
.hb-commands {
display: flex;
gap: 10px;
margin-top: 14px;
}
.hb-commands div {
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.05);
transition: 0.25s;
}
.hb-commands div:hover {
transform: translateY(-3px);
border-color: rgba(108,92,255,0.4);
}
/* ================= CODE ================= */
code {
background: rgba(0,0,0,0.35);
padding: 3px 6px;
border-radius: 6px;
}
/* ================= ANIMATION ================= */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
.handbook-wrapper {
flex-direction: column;
}
.handbook-nav {
flex-direction: row;
flex-wrap: wrap;
}
.handbook-nav button {
flex: 1 1 auto;
}
}
/* ================= GLOBAL INTERACTION LAYER ================= */
/* Smooth interactions everywhere */
#mod-handbook * {
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease,
background 0.25s ease,
color 0.2s ease,
opacity 0.2s ease;
}
/* ================= SECTION HEADINGS ================= */
.hb-section h3:hover {
color: var(--accent);
transform: translateX(4px);
}
.hb-section h4:hover {
color: var(--accent);
}
/* ================= TEXT INTERACTION ================= */
.hb-section p:hover {
color: var(--text-primary);
}
.hb-rule small:hover {
color: var(--text-primary);
}
/* ================= LIST INTERACTION ================= */
.hb-list li {
position: relative;
padding-left: 6px;
}
.hb-list li:hover {
color: var(--text-primary);
transform: translateX(6px);
}
/* subtle bullet glow */
.hb-list li::before {
content: "";
position: absolute;
left: -8px;
top: 8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
opacity: 0;
transition: 0.25s;
}
.hb-list li:hover::before {
opacity: 1;
}
/* ================= CALLOUTS ================= */
.hb-callout:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(108,92,255,0.25);
}
.hb-warning:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255,80,80,0.25);
}
/* ================= RULE ENHANCEMENTS ================= */
.hb-rule:hover span {
background: var(--accent);
color: white;
transform: scale(1.08);
}
/* dim other rules when hovering */
.hb-section:hover .hb-rule:not(:hover) {
opacity: 0.6;
}
/* ================= GRID FOCUS EFFECT ================= */
.hb-grid:hover .hb-card:not(:hover) {
opacity: 0.65;
transform: scale(0.98);
}
/* ================= CARD TEXT INTERACTION ================= */
.hb-card:hover h4 {
color: var(--accent);
}
.hb-card:hover p {
color: var(--text-primary);
}
/* ================= TIMELINE (UPGRADED) ================= */
.hb-timeline:hover div:not(:hover) {
opacity: 0.6;
transform: scale(0.95);
}
.hb-timeline div:hover h4 {
color: var(--accent);
}
/* ================= STEPS ================= */
.hb-step:hover {
transform: translateY(-4px);
border-color: rgba(108,92,255,0.3);
}
.hb-step li:hover {
color: var(--text-primary);
transform: translateX(4px);
}
/* ================= COMMANDS ================= */
.hb-commands div:hover code {
color: var(--accent);
letter-spacing: 0.5px;
}
/* ================= NAV EXTRA FEEDBACK ================= */
/* dim other nav buttons */
.handbook-nav:hover button:not(:hover):not(.active) {
opacity: 0.6;
}
/* ================= PANEL DEPTH ON HOVER ================= */
.handbook-panel:hover {
box-shadow:
0 30px 70px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.08);
}
/* ================= MICRO INTERACTION (CLICK FEEL) ================= */
button:active,
.hb-card:active,
.hb-rule:active,
.hb-timeline div:active {
transform: scale(0.97);
}
/* ================= CURSOR FEEDBACK ================= */
.hb-card,
.hb-rule,
.hb-timeline div,
.hb-commands div,
.hb-step {
cursor: pointer;
}
/* ===== FIX RULE TAG SIZE ===== */
.hb-rule span {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
height: fit-content;
flex-shrink: 0; /* prevents stretching */
padding: 6px 10px;
border-radius: 999px; /* pill shape */
white-space: nowrap; /* prevents wrapping */
}
/* ===== REMOVE TITLE GAP ===== */
.hb-rule h4,
.hb-card h4 {
margin-top: 0;
margin-bottom: 4px;
}
/* ===== FIX PROCEDURES GAP ===== */
.hb-step h4 {
margin-top: 0;
margin-bottom: 6px;
}
.hb-step ol {
margin-top: 0; /* THIS is the real fix */
padding-left: 18px;
}
.handbook-panel {
transition: all 0.3s ease;
}
.handbook-panel:hover {
transform: scale(1.002);
}
.hb-section.active {
animation: fadeUp 0.4s ease, slightScale 0.3s ease;
}
@keyframes slightScale {
from { transform: scale(0.98); }
to { transform: scale(1); }
}
/* ===== REMOVE TEXT CURSOR ===== */
#mod-handbook p,
#mod-handbook span,
#mod-handbook li,
#mod-handbook small,
#mod-handbook h1,
#mod-handbook h2,
#mod-handbook h3,
#mod-handbook h4 {
cursor: default;
}
/* ===== KEEP DEFAULT FOR EVERYTHING ELSE ===== */
#mod-handbook * {
cursor: default;
}
/* ================= PROCEDURES (NEXT LEVEL) ================= */
.hb-procedures {
display: flex;
flex-direction: column;
gap: 26px;
margin-top: 18px;
}
/* ===== MAIN CARD ===== */
.hb-procedure-card {
position: relative;
padding: 22px 22px 22px 26px;
border-radius: 20px;
background: linear-gradient(
145deg,
rgba(255,255,255,0.045),
rgba(255,255,255,0.015)
);
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 20px 50px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.05);
overflow: hidden;
transition: all 0.3s ease;
}
/* glow edge */
.hb-procedure-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at top left,
rgba(108,92,255,0.15),
transparent 60%
);
opacity: 0;
transition: 0.3s;
}
.hb-procedure-card:hover {
transform: translateY(-8px) scale(1.01);
border-color: rgba(108,92,255,0.4);
box-shadow: 0 25px 70px rgba(108,92,255,0.25);
}
.hb-procedure-card:hover::before {
opacity: 1;
}
/* ===== HEADER ===== */
.hb-procedure-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.hb-procedure-header h4 {
margin: 0;
font-size: 1.1rem;
}
/* badge upgrade */
.hb-badge {
font-size: 0.7rem;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.1);
}
.hb-badge.accent {
background: linear-gradient(135deg, var(--accent), #8f84ff);
color: white;
box-shadow: 0 4px 12px rgba(108,92,255,0.4);
}
/* ===== STEP FLOW ===== */
.hb-steps {
position: relative;
list-style: none;
margin: 0;
padding: 0 0 0 28px;
}
/* vertical line */
.hb-steps::before {
content: "";
position: absolute;
left: 10px;
top: 6px;
bottom: 6px;
width: 2px;
background: linear-gradient(
to bottom,
rgba(108,92,255,0.4),
rgba(108,92,255,0.05)
);
}
/* each step */
.hb-steps li {
position: relative;
padding: 10px 12px;
margin-bottom: 10px;
border-radius: 10px;
transition: all 0.25s ease;
}
/* step node */
.hb-steps li span {
position: absolute;
left: -28px;
top: 10px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 600;
border-radius: 6px;
background: rgba(108,92,255,0.2);
color: var(--accent);
border: 1px solid rgba(108,92,255,0.4);
}
/* hover interaction */
.hb-steps li:hover {
background: rgba(255,255,255,0.05);
transform: translateX(6px);
}
.hb-steps li:hover span {
background: var(--accent);
color: white;
transform: scale(1.1);
box-shadow: 0 0 10px rgba(108,92,255,0.6);
}
/* dim others */
.hb-steps:hover li:not(:hover) {
opacity: 0.6;
}
/* ===== INLINE CALLOUTS ===== */
.hb-inline-info,
.hb-inline-warning {
margin-top: 14px;
padding: 12px 14px;
border-radius: 12px;
font-size: 0.9rem;
position: relative;
backdrop-filter: blur(6px);
}
.hb-inline-info {
background: rgba(108,92,255,0.12);
border: 1px solid rgba(108,92,255,0.3);
}
.hb-inline-warning {
background: rgba(255,80,80,0.12);
border: 1px solid rgba(255,80,80,0.3);
}
/* hover pop */
.hb-inline-info:hover,
.hb-inline-warning:hover {
transform: translateY(-3px);
}
/* ===== GLOBAL PROCEDURE DEPTH ===== */
.hb-procedures:hover .hb-procedure-card:not(:hover) {
opacity: 0.65;
transform: scale(0.98);
}
/* ================= CONDUCT UPGRADE ================= */
.hb-conduct-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-top: 16px;
}
/* card */
.hb-conduct-card {
padding: 18px;
border-radius: 18px;
background: linear-gradient(
145deg,
rgba(255,255,255,0.045),
rgba(255,255,255,0.015)
);
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 15px 40px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.05);
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.hb-conduct-card:hover {
transform: translateY(-6px);
border-color: rgba(108,92,255,0.35);
box-shadow: 0 20px 50px rgba(108,92,255,0.2);
}
/* warning variant */
.hb-conduct-card.warning {
border-color: rgba(255,80,80,0.3);
}
/* header */
.hb-conduct-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
/* list */
.hb-conduct-list {
list-style: none;
padding: 0;
margin: 0;
}
.hb-conduct-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
transition: all 0.2s ease;
}
/* hover effect */
.hb-conduct-list li:hover {
background: rgba(255,255,255,0.05);
transform: translateX(4px);
}
/* icons */
.hb-conduct-list li span {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 0.75rem;
font-weight: bold;
}
/* check */
.hb-conduct-card:not(.warning) li span {
background: rgba(108,92,255,0.2);
color: var(--accent);
}
/* cross */
.hb-conduct-card.warning li span {
background: rgba(255,80,80,0.2);
color: #ff8080;
}
/* dim effect */
.hb-conduct-grid:hover .hb-conduct-card:not(:hover) {
opacity: 0.65;
transform: scale(0.98);
}
/* ================= COMMANDS UPGRADE ================= */
.hb-commands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-top: 16px;
}
/* card */
.hb-command-card {
padding: 18px;
border-radius: 18px;
background: linear-gradient(
145deg,
rgba(255,255,255,0.045),
rgba(255,255,255,0.015)
);
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 15px 40px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.05);
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.hb-command-card:hover {
transform: translateY(-6px);
border-color: rgba(108,92,255,0.35);
box-shadow: 0 20px 50px rgba(108,92,255,0.2);
}
/* danger card */
.hb-command-card.danger {
border-color: rgba(255,80,80,0.3);
}
/* header */
.hb-command-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
/* description */
.hb-command-desc {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 10px;
}
/* example */
.hb-command-example {
font-size: 0.85rem;
margin-bottom: 12px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.05);
}
/* notes */
.hb-command-notes {
list-style: none;
padding: 0;
margin: 0;
}
.hb-command-notes li {
padding: 8px 10px;
border-radius: 8px;
font-size: 0.85rem;
transition: 0.2s;
}
.hb-command-notes li:hover {
background: rgba(255,255,255,0.05);
transform: translateX(4px);
}
/* dim effect */
.hb-commands-grid:hover .hb-command-card:not(:hover) {
opacity: 0.65;
transform: scale(0.98);
}
/* code styling upgrade */
.hb-command-card code {
background: rgba(0,0,0,0.4);
padding: 4px 6px;
border-radius: 6px;
}
/* ================= RESPONSIVE (FULL MOBILE SYSTEM) ================= */
/* ===== TABLETS (<= 1024px) ===== */
@media (max-width: 1024px) {
.handbook-wrapper {
gap: 20px;
}
.handbook-nav {
width: 220px;
}
.handbook-panel {
padding: 26px;
}
}
/* ===== SMALL TABLETS / LARGE PHONES (<= 900px) ===== */
@media (max-width: 900px) {
.handbook-wrapper {
flex-direction: column;
}
/* NAV becomes horizontal scroll instead of ugly wrap */
.handbook-nav {
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
padding: 10px;
gap: 10px;
position: sticky;
top: 10px;
z-index: 10;
}
/* scrollbar hidden (clean look) */
.handbook-nav::-webkit-scrollbar {
display: none;
}
.handbook-nav {
-ms-overflow-style: none;
scrollbar-width: none;
}
.handbook-nav button {
flex: 0 0 auto;
white-space: nowrap;
padding: 10px 14px;
font-size: 0.85rem;
}
.handbook-panel {
padding: 22px;
border-radius: 22px;
}
}
/* ===== PHONES (<= 600px) ===== */
@media (max-width: 600px) {
.handbook-wrapper {
gap: 16px;
margin-top: 10px;
}
/* NAV becomes pill scroll bar */
.handbook-nav {
padding: 8px;
border-radius: 18px;
gap: 8px;
}
.handbook-nav button {
padding: 8px 12px;
font-size: 0.8rem;
border-radius: 10px;
}
/* PANEL tighter */
.handbook-panel {
padding: 18px;
border-radius: 18px;
}
/* TEXT scaling */
.hb-section h3 {
font-size: 1.4rem;
}
.hb-section h4 {
font-size: 0.95rem;
}
.hb-section p {
font-size: 0.9rem;
}
/* GRID tighter */
.hb-grid {
gap: 12px;
}
/* TIMELINE stacks */
.hb-timeline {
flex-direction: column;
}
/* COMMANDS stack */
.hb-commands {
flex-direction: column;
}
/* RULE layout stack */
.hb-rule {
flex-direction: column;
align-items: flex-start;
}
.hb-rule span {
margin-top: 6px;
}
}
/* ===== SMALL PHONES (<= 420px) ===== */
@media (max-width: 420px) {
.handbook-panel {
padding: 14px;
}
.handbook-nav button {
font-size: 0.75rem;
padding: 7px 10px;
}
.hb-section h3 {
font-size: 1.25rem;
}
.hb-section p {
font-size: 0.85rem;
}
}
/* ================= INBOX SECTION ================= */
#staff-inbox {
position: relative;
}
#staff-inbox .inbox-container {
display: flex;
gap: 22px;
margin-top: 20px;
height: 540px;
}
/* ================= SIDEBAR ================= */
#staff-inbox .inbox-sidebar {
width: 340px;
display: flex;
flex-direction: column;
border-radius: 18px;
background: var(--card-bg);
backdrop-filter: blur(14px);
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px var(--shadow-color);
overflow: hidden;
transition: all 0.25s ease;
}
#staff-inbox .inbox-sidebar:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px var(--shadow-color);
}
/* ================= SEARCH ================= */
#staff-inbox .inbox-toolbar {
padding: 14px;
border-bottom: 1px solid var(--border-color);
}
#staff-inbox .inbox-toolbar input {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-color);
border: 1px solid var(--border-color);
color: var(--text-color);
font-size: 0.85rem;
transition: 0.25s;
}
#staff-inbox .inbox-toolbar input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(88,101,242,0.2);
}
/* ================= LIST ================= */
#staff-inbox .inbox-list {
overflow-y: auto;
padding: 12px;
}
/* ================= MESSAGE CARD ================= */
#staff-inbox .message-card {
display: flex;
gap: 12px;
padding: 14px;
border-radius: 14px;
cursor: pointer;
margin-bottom: 10px;
position: relative;
transition: all 0.25s ease;
}
#staff-inbox .message-card:hover {
transform: translateY(-2px);
background: var(--bg-color);
box-shadow: 0 6px 15px var(--shadow-color);
}
#staff-inbox .message-card.active {
background: var(--bg-color);
}
/* UNREAD BAR */
#staff-inbox .message-card.unread::before {
content: "";
position: absolute;
left: -2px;
top: 10px;
bottom: 10px;
width: 4px;
border-radius: 10px;
background: linear-gradient(180deg, var(--accent-color), #7a8cff);
}
/* ================= AVATAR ================= */
#staff-inbox .message-avatar {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(
135deg,
var(--accent-color),
color-mix(in srgb, var(--accent-color) 85%, black)
);
color: #fff;
font-weight: 700;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 5px 12px var(--shadow-color);
}
/* LIGHT MODE BOOST (NO COLOR CHANGE) */
:root #staff-inbox .message-avatar {
background:
linear-gradient(var(--accent-color), var(--accent-color)),
linear-gradient(rgba(0,0,0,0.15), transparent);
background-blend-mode: multiply;
}
/* ================= TEXT ================= */
#staff-inbox .message-info {
flex: 1;
}
#staff-inbox .message-top {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
}
#staff-inbox .message-name {
font-weight: 600;
}
#staff-inbox .message-time {
opacity: 0.6;
font-size: 0.7rem;
}
#staff-inbox .message-subject {
font-size: 0.9rem;
margin: 4px 0;
}
#staff-inbox .message-preview {
font-size: 0.75rem;
opacity: 0.7;
}
/* ================= CONTENT PANEL ================= */
#staff-inbox .inbox-content {
flex: 1;
padding: 24px;
border-radius: 18px;
background: var(--card-bg);
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px var(--shadow-color);
transition: 0.25s;
}
#staff-inbox .inbox-content:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px var(--shadow-color);
}
/* ================= CONTENT PANEL (FIXED HEIGHT STYLE) ================= */
#staff-inbox .inbox-content {
flex: 1;
padding: 24px;
border-radius: 18px;
background: var(--card-bg);
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px var(--shadow-color);
display: flex;
flex-direction: column;
height: 100%; /* KEY FIX */
transition: 0.25s;
}
#staff-inbox .inbox-content:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px var(--shadow-color);
}
/* ================= MESSAGE WRAPPER ================= */
#staff-inbox .message-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
/* ================= HEADER ================= */
#staff-inbox .message-header {
display: flex;
justify-content: space-between;
align-items: center;
}
#staff-inbox .message-header-left {
display: flex;
gap: 14px;
align-items: center;
}
/* ================= DIVIDER ================= */
#staff-inbox .message-divider {
height: 1px;
margin: 18px 0;
background: var(--border-color);
}
/* ================= BODY WRAPPER (LONG PANEL STYLE) ================= */
#staff-inbox .message-body-wrapper {
height: 100%; /* π₯ FORCE FULL HEIGHT */
min-height: 260px; /* π₯ keeps it tall even with short messages */
max-height: 100%;
overflow-y: auto; /* scroll if long */
padding: 18px;
border-radius: 14px;
background: var(--bg-color);
border: 1px solid var(--border-color);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
transition: all 0.25s ease;
}
/* ================= BODY TEXT ================= */
#staff-inbox .message-body {
font-size: 0.95rem;
line-height: 1.7;
opacity: 0.9;
}
/* ================= HOVER DEPTH ================= */
#staff-inbox .inbox-content:hover .message-body-wrapper {
transform: translateY(-2px);
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.05),
0 10px 25px var(--shadow-color);
}
/* ================= SCROLLBAR ================= */
#staff-inbox .message-body-wrapper::-webkit-scrollbar {
width: 6px;
}
#staff-inbox .message-body-wrapper::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 10px;
}
/* ================= MOBILE ================= */
@media (max-width: 900px) {
#staff-inbox .inbox-container {
flex-direction: column;
height: auto;
}
#staff-inbox .inbox-sidebar {
width: 100%;
max-height: 260px;
}
#staff-inbox .message-card:hover {
transform: none;
}
}
/* ================= SEND MESSAGE MODAL ================= */
.send-message-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 2000;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
}
.send-message-modal.active {
display: flex;
}
/* CONTAINER */
.send-message-modal-content {
width: 700px;
max-height: 90vh;
overflow-y: auto;
scrollbar-width: none;
background: #0b0b0b;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 25px 60px rgba(0,0,0,0.6);
animation: modalFade 0.25s ease;
position: relative;
}
.send-message-modal-content::-webkit-scrollbar {
display: none;
}
/* CLOSE */
.send-message-modal .admin-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
border-radius: 50%;
font-size: 18px;
color: white;
cursor: pointer;
transition: 0.2s;
}
.send-message-modal .admin-close:hover {
background: rgba(255,255,255,0.15);
transform: scale(1.1);
}
/* HEADER */
.send-message-header {
padding: 22px 24px 10px;
}
/* FORM */
.send-message-form {
padding: 10px 24px 24px;
display: grid;
gap: 18px;
}
/* SECTION */
.send-section {
background: rgba(255,255,255,0.03);
border-radius: 14px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.04);
transition: 0.25s;
}
.send-section:hover {
background: rgba(255,255,255,0.06);
transform: translateY(-2px);
}
.send-section h4 {
font-size: 13px;
opacity: 0.7;
margin-bottom: 8px;
}
/* INPUTS */
.send-message-modal .field {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.send-message-modal .field span {
font-size: 11px;
opacity: 0.5;
margin-bottom: 4px;
}
.send-message-modal input,
.send-message-modal select,
.send-message-modal textarea {
background: rgba(255,255,255,0.05);
border: none;
border-radius: 8px;
padding: 10px;
font-size: 13px;
color: white;
}
.send-message-modal textarea {
min-height: 120px;
resize: none;
}
/* BUTTONS */
.send-message-modal .owner-tool-buttons {
padding: 16px 24px 24px;
display: flex;
justify-content: flex-end;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* ANIMATION */
@keyframes modalFade {
from { transform: scale(0.94); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* FORCE FIELD LAYOUT (prevents side-by-side bug) */
.send-message-modal .field {
display: flex;
flex-direction: column; /* π₯ THIS is the key fix */
align-items: stretch;
width: 100%;
}
/* Ensure inputs take full width */
.send-message-modal .field select,
.send-message-modal .field input,
.send-message-modal .field textarea {
width: 100%;
display: block;
}
/* ================= TOAST SYSTEM ================= */
#toastContainer {
position: fixed;
top: 20px;
right: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 12px;
}
/* TOAST BASE */
.toast {
min-width: 260px;
max-width: 320px;
padding: 14px 16px;
border-radius: 12px;
background: rgba(20,20,25,0.95);
color: #fff;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
opacity: 0;
transform: translateX(30px);
animation: toastSlideIn 0.3s ease forwards;
}
/* TYPES */
.toast.success {
border-left: 4px solid #4ade80;
}
.toast.error {
border-left: 4px solid #f87171;
}
.toast.info {
border-left: 4px solid var(--accent-color);
}
/* ICON */
.toast-icon {
font-size: 1rem;
}
/* TEXT */
.toast-message {
flex: 1;
}
/* EXIT */
.toast.hide {
animation: toastSlideOut 0.3s ease forwards;
}
/* ANIMATIONS */
@keyframes toastSlideIn {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toastSlideOut {
to {
opacity: 0;
transform: translateX(40px);
}
}
/* LIGHT MODE */
body.light .toast {
background: #ffffff;
color: #111;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
#staff-inbox .message-body ul {
padding-left: 1.5rem; /* moves bullets away from the left edge */
margin: 0.5rem 0; /* space above/below list */
list-style-position: outside; /* ensures bullets sit outside the text block */
}
#staff-inbox .message-body li {
margin-bottom: 0.4rem; /* adds space between each bullet */
}
/* ================= INBOX SECTION ================= */
#staff-inbox {
position: relative;
}
#staff-inbox .inbox-container {
display: flex;
gap: 22px;
margin-top: 20px;
height: 540px;
transition: all 0.3s ease;
}
/* ================= SIDEBAR ================= */
#staff-inbox .inbox-sidebar {
width: 340px;
display: flex;
flex-direction: column;
border-radius: 18px;
background: var(--card-bg);
backdrop-filter: blur(14px);
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px var(--shadow-color);
overflow: hidden;
transition: all 0.25s ease;
}
#staff-inbox .inbox-sidebar:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px var(--shadow-color);
}
/* ================= SEARCH ================= */
#staff-inbox .inbox-toolbar {
padding: 14px;
border-bottom: 1px solid var(--border-color);
}
#staff-inbox .inbox-toolbar input {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-color);
border: 1px solid var(--border-color);
color: var(--text-color);
font-size: 0.85rem;
transition: 0.25s;
}
#staff-inbox .inbox-toolbar input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(88,101,242,0.2);
}
/* ================= LIST ================= */
#staff-inbox .inbox-list {
overflow-y: auto;
padding: 12px;
max-height: calc(100% - 60px); /* leave space for toolbar */
}
/* ================= MESSAGE CARD ================= */
#staff-inbox .message-card {
display: flex;
gap: 12px;
padding: 14px;
border-radius: 14px;
cursor: pointer;
margin-bottom: 10px;
position: relative;
transition: all 0.25s ease;
}
#staff-inbox .message-card:hover {
transform: translateY(-2px);
background: var(--bg-color);
box-shadow: 0 6px 15px var(--shadow-color);
}
#staff-inbox .message-card.active {
background: var(--bg-color);
}
/* UNREAD BAR */
#staff-inbox .message-card.unread::before {
content: "";
position: absolute;
left: -2px;
top: 10px;
bottom: 10px;
width: 4px;
border-radius: 10px;
background: linear-gradient(180deg, var(--accent-color), #7a8cff);
}
/* ================= AVATAR ================= */
#staff-inbox .message-avatar {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(
135deg,
var(--accent-color),
color-mix(in srgb, var(--accent-color) 85%, black)
);
color: #fff;
font-weight: 700;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 5px 12px var(--shadow-color);
}
/* LIGHT MODE BOOST */
:root #staff-inbox .message-avatar {
background:
linear-gradient(var(--accent-color), var(--accent-color)),
linear-gradient(rgba(0,0,0,0.15), transparent);
background-blend-mode: multiply;
}
/* ================= TEXT ================= */
#staff-inbox .message-info {
flex: 1;
}
#staff-inbox .message-top {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
}
#staff-inbox .message-name {
font-weight: 600;
}
#staff-inbox .message-time {
opacity: 0.6;
font-size: 0.7rem;
}
#staff-inbox .message-subject {
font-size: 0.9rem;
margin: 4px 0;
}
#staff-inbox .message-preview {
font-size: 0.75rem;
opacity: 0.7;
}
/* ================= CONTENT PANEL ================= */
#staff-inbox .inbox-content {
flex: 1;
padding: 24px;
border-radius: 18px;
background: var(--card-bg);
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px var(--shadow-color);
transition: 0.25s;
display: flex;
flex-direction: column;
height: 100%;
}
#staff-inbox .inbox-content:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px var(--shadow-color);
}
/* ================= MESSAGE WRAPPER ================= */
#staff-inbox .message-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
/* ================= HEADER ================= */
#staff-inbox .message-header {
display: flex;
justify-content: space-between;
align-items: center;
}
#staff-inbox .message-header-left {
display: flex;
gap: 14px;
align-items: center;
}
/* ================= DIVIDER ================= */
#staff-inbox .message-divider {
height: 1px;
margin: 18px 0;
background: var(--border-color);
}
/* ================= BODY WRAPPER ================= */
#staff-inbox .message-body-wrapper {
flex: 1;
min-height: 260px;
overflow-y: auto;
padding: 18px;
border-radius: 14px;
background: var(--bg-color);
border: 1px solid var(--border-color);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
transition: all 0.25s ease;
}
/* ================= BODY TEXT ================= */
#staff-inbox .message-body {
font-size: 0.95rem;
line-height: 1.7;
opacity: 0.9;
}
/* ================= SCROLLBAR ================= */
#staff-inbox .message-body-wrapper::-webkit-scrollbar {
width: 6px;
}
#staff-inbox .message-body-wrapper::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 10px;
}
/* ================= MOBILE RESPONSIVENESS ================= */
@media (max-width: 900px) {
#staff-inbox .inbox-container {
flex-direction: column;
height: auto;
}
#staff-inbox .inbox-sidebar {
width: 100%;
max-height: 260px;
margin-bottom: 16px;
}
#staff-inbox .inbox-list {
max-height: 220px;
}
#staff-inbox .inbox-content {
width: 100%;
padding: 16px;
height: auto;
margin-bottom: 16px;
}
#staff-inbox .message-card {
flex-direction: row;
gap: 10px;
padding: 12px;
margin-bottom: 8px;
}
#staff-inbox .message-avatar {
width: 36px;
height: 36px;
font-size: 0.75rem;
}
#staff-inbox .message-top,
#staff-inbox .message-subject,
#staff-inbox .message-preview {
font-size: 0.7rem;
}
}