/* ===========================================
   RMC Dedi Dashboard
   File: assets/styles/styles.css
   Purpose: Dark theme UI
   =========================================== */

/* ===== [RESET SECTION] ===== */
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0e1116;color:#e6e9ef}

/* ===== [LAYOUT SECTION] ===== */
.rmc-body{display:flex;min-height:100vh}
.rmc-sidebar{width:280px;background:#0b0e12;border-right:1px solid #1b1f26;padding:20px;display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:0;height:100vh}
.rmc-brand{display:flex;align-items:center;gap:12px}
.rmc-logo{width:40px;height:40px;border-radius:8px;object-fit:contain;background:#111}
.rmc-nav a{display:block;padding:10px 12px;color:#d0d6e4;text-decoration:none;border:1px solid #1b1f26;margin-bottom:8px;border-radius:10px}
.rmc-nav a:hover{background:#141922}
.rmc-sponsor{font-size:12px;opacity:.8;border-top:1px solid #1b1f26;padding-top:10px}

.rmc-main{flex:1;display:flex;flex-direction:column}
.rmc-header{padding:0}
.rmc-hero{position:relative;height:160px;overflow:hidden;border-bottom:1px solid #1b1f26}
.rmc-hero-img{width:100%;height:100%;object-fit:cover;opacity:.35;filter:grayscale(1)}
.rmc-hero-text{position:absolute;left:20px;bottom:20px;font-size:28px;font-weight:700}

.rmc-content{padding:20px;display:grid;gap:20px}

.card{background:#0b0e12;border:1px solid #1b1f26;border-radius:14px;padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kv{background:#0e131b;border:1px solid #1b1f26;border-radius:12px;padding:12px}
.kv h3{margin:0 0 6px 0;font-size:13px;color:#9fb1d1}
.kv p{margin:0;font-size:18px}

.controls{display:flex;gap:10px;margin-top:10px}
.btn{padding:8px 14px;border:1px solid #28436b;background:#102037;color:#cfe1ff;border-radius:10px;cursor:pointer}
.btn-danger{border-color:#5b2c2c;background:#1c0f0f;color:#ffd6d6}
.btn:disabled{opacity:.5;cursor:not-allowed}

.logs{max-height:280px;overflow:auto;background:#0e131b;border:1px solid #1b1f26;border-radius:12px;padding:12px}

.table{display:grid;gap:8px}
.row{display:grid;grid-template-columns:2fr 100px 160px 1fr 240px;gap:8px;align-items:center}
.row.header{font-weight:700;color:#9fb1d1}
.badge{display:inline-block;padding:3px 8px;border-radius:8px;border:1px solid #1b1f26;background:#0e131b}
.note-input{width:100%;padding:6px;border:1px solid #1b1f26;border-radius:8px;background:#0e131b;color:#e6e9ef}
.action{display:flex;gap:6px}
.action .btn{padding:6px 10px;font-size:12px}
.upload-form{display:flex;gap:10px;align-items:center}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.stat-box {
    background: #121212;
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
}

.stat-box h4 {
    font-size: 0.9rem;
    color: #999;
    margin: 0 0 4px 0;
}

.stat-box p {
    font-size: 1rem;
    color: #fff;
    margin: 0;
}

.error {
    color: #ff5555;
    text-align: center;
    margin-top: 10px;
}

.mods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.mod-card {
  background: #111;
  border: 1px solid #333;
  padding: 1rem;
  border-radius: 8px;
  color: #ddd;
  transition: all 0.2s ease;
}

.mod-card:hover {
  background: #1b1b1b;
  border-color: #4caf50;
}
/* ===== [MODS SECTION STYLING] ===== */
.mods-section {
  margin: 20px;
}

.mods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.mod-card {
  background-color: #141414;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.05);
  transition: transform 0.2s ease;
}

.mod-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.15);
}

.access-denied {
  text-align: center;
  color: #ff6666;
  border: 1px solid #ff4444;
  background: #1a0000;
  border-radius: 8px;
  margin: 20px;
  padding: 20px;
}
body {
  display: flex;
  background-color: #0f0f0f;
  color: #f5f5f5;
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
}

/* SIDEBAR */
.sidebar {
  width: 230px;
  background: #151515;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #222;
  position: fixed;
  left: 0;
  top: 0;
}

.sidebar-logo {
  text-align: center;
  padding: 20px;
}

.sidebar-logo .logo-icon {
  width: 32px;
  margin-bottom: 10px;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav a {
  display: block;
  padding: 12px 20px;
  color: #ccc;
  text-decoration: none;
  border-radius: 8px;
  margin: 4px 10px;
  transition: background 0.2s;
}

.sidebar-nav a:hover {
  background: #1e1e1e;
  color: #00ff80;
}

.sidebar-footer {
  padding: 15px;
  font-size: 12px;
  color: #888;
  text-align: center;
  border-top: 1px solid #222;
}

.sidebar-title {
  text-align: center;
  margin: 10px 0 20px;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
}


/* MAIN CONTENT */
.main-content {
  margin-left: 230px;
  padding: 20px;
  flex: 1;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.main-section {
  padding: 10px;
}

.card {
  background: #181818;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

.main-footer {
  text-align: center;
  padding: 20px;
  color: #666;
  border-top: 1px solid #222;
}
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  width: 230px;
  background: #151515;
  position: fixed;
  left: 0;
  top: 0;
  border-right: 1px solid #222;
}

.sidebar-footer {
  padding: 15px;
  text-align: center;
  color: #888;
  font-size: 11px;
  border-top: 1px solid #222;
}

/* ===== USER MANAGEMENT TABLE ===== */
.table-container {
  overflow-x: auto;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  color: #ddd;
  background: #181818;
  border-radius: 8px;
  overflow: hidden;
}

.user-table th, .user-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #222;
}

.user-table th {
  background: #111;
  color: #00ff80;
  text-align: left;
  font-weight: 600;
}

.user-table tr:hover {
  background-color: #1e1e1e;
}

.inline-form {
  display: inline;
}

.role-select {
  background: #111;
  color: #ddd;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 5px;
}

.role-select:focus {
  outline: none;
  border-color: #00ff80;
}

/* ===== STATUS + ACTION BUTTONS ===== */
.status-approved {
  color: #00ff80;
  font-weight: bold;
}

.btn-approve {
  background: #00ff80;
  color: #000;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-delete {
  background: #cc3333;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-approve:hover {
  background: #00cc66;
}

.btn-delete:hover {
  background: #ff5555;
}
/* ===== User Management table niceties ===== */
.table-responsive { overflow-x:auto; }
.table { width:100%; border-collapse:separate; border-spacing:0 8px; }
.table thead th { text-align:left; font-weight:600; opacity:.85; }
.table tbody tr { background:#0f1317; border-radius:12px; }
.table tbody td { padding:12px 14px; }
.inline-form { display:inline-block; margin:0; }
.inline-details summary { cursor:pointer; }
.details[open] { background:#0c1014; }
.mb-3 { margin-bottom:1rem; }
.mt-2 { margin-top:.5rem; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.col-span-2 { grid-column:span 2 / span 2; }
.btn-sm { padding:.35rem .6rem; font-size:.9rem; }
.btn-outline { background:transparent; border:1px solid rgba(255,255,255,.15); }
/* ===========================
   USER MANAGEMENT STYLING
   =========================== */

.page-wrapper {
  padding: 2rem;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.user-card {
  background: #111315;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.card-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
}

.card-header h2 {
  font-size: 1.2rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.user-form {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 1rem 1.5rem;
  align-items: end;
}

.form-row label {
  display: block;
  font-size: .9rem;
  opacity: .8;
  margin-bottom: .2rem;
}

.user-form input,
.user-form select {
  width: 100%;
  background: #1b1e22;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 6px;
  padding: .4rem .5rem;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.form-actions {
  grid-column: 1 / -1;
}

.btn {
  border: none;
  border-radius: 6px;
  padding: .45rem .9rem;
  cursor: pointer;
  transition: background .2s ease;
  font-size: .9rem;
}

.btn-primary { background:#007bff; color:#fff; }
.btn-primary:hover { background:#0066d9; }
.btn-danger { background:#a33; color:#fff; }
.btn-danger:hover { background:#c33; }
.btn-success { background:#278a34; color:#fff; }
.btn-success:hover { background:#1e742b; }
.btn-outline {
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:#ccc;
}
.btn-outline:hover {
  background:rgba(255,255,255,0.05);
}
.btn-sm {
  padding:.3rem .6rem;
  font-size:.85rem;
}

.modern-table {
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.modern-table th {
  text-align:left;
  padding:.6rem;
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.modern-table td {
  padding:.6rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.modern-table tr:hover {
  background:#181b1e;
}

.edit-details summary {
  cursor:pointer;
  display:inline-block;
  margin-bottom:.3rem;
}

.edit-form {
  background:#16181b;
  border:1px solid rgba(255,255,255,0.05);
  border-radius:8px;
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}

.edit-form input {
  background:#1b1e22;
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  border-radius:6px;
  padding:.3rem .5rem;
}

/* ===== PENDING USERS SECTION ===== */
.pending-users {
  border-left: 4px solid #e6b800;
  background: #1a1a12;
}
.pending-users .card-header h2 {
  color: #e6b800;
}
.pending-users .btn-success {
  background: #28a745;
}
.pending-users .btn-danger {
  background: #b93d3d;
}
/* ===== FILTER BAR STYLING ===== */
.filters-bar {
  padding: 1rem;
  background: #141618;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.filter-item {
  position: relative;
  flex: 1 1 240px;
}

.filter-item i {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.4);
  pointer-events: none;
}

.filter-item input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border-radius: 6px;
  background: #1b1e22;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

.filters-bar select {
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #1b1e22;
  color: #fff;
  min-width: 140px;
}

.filter-buttons {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.btn-secondary {
  background: #25292d;
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.1);
}

.btn-secondary:hover {
  background: #2e3238;
  color: #fff;
}

.filters-bar button i,
.filters-bar a i {
  margin-right: 4px;
  opacity: 0.8;
}
/* ===== SERVER ROLE TOGGLE BUTTONS ===== */
.btn-warning {
  background: #a65e00;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-warning:hover {
  background: #c27400;
}

.btn-success {
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-success:hover {
  background: #3ca640;
}
/* ====== USER TABLE STYLES ====== */
.table-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  color: #ccc;
  background-color: #121315;
  border-radius: 8px;
  overflow: hidden;
}

.styled-table th, .styled-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.styled-table th {
  background: #181a1d;
  color: #fff;
  font-weight: 600;
}

.styled-table tr:hover {
  background: rgba(255,255,255,0.05);
}

/* ====== STATUS LABELS ====== */
.status-approved {
  color: #4caf50;
  font-weight: 500;
}

.status-pending {
  color: #f0ad4e;
  font-weight: 500;
}

/* ====== ACTIVE LABELS ====== */
.active-label {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.85em;
}

.active-label.active {
  background: #004d1a;
  color: #00e676;
}

.active-label.inactive {
  background: #2b0000;
  color: #ff5252;
}

/* ====== BUTTONS ====== */
.btn-sm {
  font-size: 0.85em;
  padding: 4px 8px;
  margin: 2px;
}

.btn-warning {
  background: #a65e00;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.btn-warning:hover {
  background: #c27400;
}

.btn-success {
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.btn-success:hover {
  background: #3ca640;
}
.btn-warning i, .btn-success i {
  margin-right: 5px;
}
.btn-warning {
  background: #a65e00;
  color: #fff;
}
.btn-warning:hover {
  background: #c27400;
}
/* ===== Modern Role Controls Styling ===== */
.modern-card {
  background: #141414;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-controls-body {
  margin-top: 1rem;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  align-items: center;
}

.field label {
  font-weight: 600;
  color: #ccc;
  margin-bottom: 0.4rem;
  display: block;
}

.input, select, .modern-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #333;
  background: #1b1b1b;
  color: #eee;
  border-radius: 6px;
  font-size: 0.95rem;
}

.input:focus, .modern-input:focus {
  outline: none;
  border-color: #0fd976;
  box-shadow: 0 0 6px rgba(15,217,118,0.4);
}

.radio-group label,
.checkbox-group label {
  color: #bbb;
  font-size: 0.9rem;
  cursor: pointer;
  margin-right: 1rem;
}

.btn-gradient {
  background: linear-gradient(90deg, #0fd976, #007f43);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.4rem;
  transition: all 0.2s ease;
}

.btn-gradient:hover {
  background: linear-gradient(90deg, #1aff91, #009959);
  transform: translateY(-1px);
}

.btn-outline {
  border: 1px solid #555;
  color: #bbb;
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  color: #fff;
  border-color: #0fd976;
}

.action-field {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.muted {
  color: #888;
  font-size: 0.9rem;
}

.login-page {
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-box {
  background: #1f1f1f;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
  width: 320px;
  text-align: center;
}

.login-box input {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #000;
  color: #fff;
}

.login-box button {
  width: 100%;
  padding: 10px;
  background: #00c06d;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.login-box button:hover {
  background: #009a56;
}

.error {
  color: #d9534f;
  margin-bottom: 10px;
}
#announcement-section {
  margin-top: 20px;
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 20px;
}
#announcement-section h3 {
  color: #78e08f;
}
#announcement-section .muted {
  color: #999;
  font-size: 0.9rem;
}
/* =========================================================
   [SERVER STATS GRID]
   ========================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 15px 0;
}

.stat {
  background: #141414;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.stat:hover {
  border-color: #78e08f;
  transform: translateY(-2px);
}

.stat h3 {
  font-size: 0.9rem;
  color: #78e08f;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat p {
  font-size: 1.1rem;
  font-weight: 600;
  color: #eaeaea;
  transition: color 0.2s ease;
}

.stat p.running { color: #78e08f; }
.stat p.stopped { color: #e55039; }
.stat p.unknown { color: #aaa; }
.stat p.error { color: #f6b93b; }
/* ==========================================
   Activity Log Styling
   ========================================== */
#logTable tbody tr {
  border-bottom: 1px solid #222;
  transition: background 0.2s;
}
#logTable tbody tr:hover {
  background: rgba(0, 255, 153, 0.05);
}
#logTable td {
  padding: 8px 10px;
  color: #ddd;
  vertical-align: middle;
}
#logTable td:first-child {
  color: #00ff99;
  font-weight: bold;
}
#logTable .badge {
  display: inline-block;
  background: #0a0a0a;
  border: 1px solid #00ff99;
  border-radius: 6px;
  color: #00ff99;
  font-size: 12px;
  padding: 3px 6px;
  margin: 2px;
  white-space: nowrap;
}
#logTable .error {
  color: #ff5555;
  text-align: center;
}
.card-header .btn:hover {
  background: #00cc7a;
}
.pending-users {
  background: #111 !important;
  border: 1px solid #222 !important;
  color: #fff !important;
}