/* ═══════════════════════════════════════════════════════════════
   BRILLIANT ACADEMIC MINDS — Tutoring Platform Stylesheet
   Brand: Emerald #2fa534 · Gold #c9a227 · Dark #0a0f0a
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --emerald:       #2fa534;
  --emerald-deep:  #1a6b20;
  --emerald-vivid: #38d146;
  --emerald-glow:  rgba(47,165,52,0.35);
  --emerald-glass: rgba(47,165,52,0.12);
  --emerald-pale:  rgba(47,165,52,0.07);
  --gold:          #c9a227;

  --bg:            #f8f9f6;
  --bg-card:       #ffffff;
  --bg-raised:     #f2f4f0;
  --text-primary:  #0a0f0a;
  --text-secondary:#3d4a3e;
  --text-muted:    #7a8b7b;
  --border:        rgba(0,0,0,0.08);

  --sh-sm: 0 2px 8px rgba(0,0,0,0.08);
  --sh-md: 0 4px 24px rgba(0,0,0,0.10);
  --sh-green: 0 8px 40px rgba(47,165,52,0.25);

  --f-display: 'Space Grotesk', sans-serif;
  --f-heading: 'Plus Jakarta Sans', sans-serif;
  --f-body:    'Inter', sans-serif;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 100px;
  --tr: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] {
  --bg:            #050906;
  --bg-card:       #0a0f0a;
  --bg-raised:     #0f150f;
  --text-primary:  #eef2ee;
  --text-secondary:#b0c0b2;
  --text-muted:    #5e7060;
  --border:        rgba(255,255,255,0.06);
  --sh-md:         0 4px 24px rgba(0,0,0,0.5);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;}
body{font-family:var(--f-body);background:var(--bg);color:var(--text-primary);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{text-decoration:none;color:inherit;transition:var(--tr);}
ul{list-style:none;}
button,input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--emerald),var(--emerald-deep));border-radius:10px;}

/* ── ROOM LAYOUT ── */
.room-shell {
  height: 100vh; display: flex; flex-direction: column;
  background: #0a0f0a; color: #eef2ee;
}
.room-topbar {
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: #0f150f; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.room-brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 0.9rem; color: #eef2ee; }
.room-brand-dot { width: 8px; height: 8px; background: var(--emerald); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.room-code { font-size: 0.75rem; background: rgba(47,165,52,0.15); color: var(--emerald); padding: 3px 10px; border-radius: var(--r-pill); font-weight: 700; letter-spacing: 0.05em; }
.room-status { font-size: 0.72rem; color: #5e7060; display: flex; align-items: center; gap: 6px; }

.room-body { flex: 1; display: flex; overflow: hidden; }
.room-videos { flex: 1; display: grid; gap: 8px; padding: 12px; overflow: hidden; background: #050906; }
.video-tile {
  background: #0f150f; border-radius: var(--r-lg); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; min-height: 140px;
}
.video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-tile-label {
  position: absolute; bottom: 10px; left: 12px; font-size: 0.75rem; font-weight: 700;
  background: rgba(0,0,0,0.6); color: #fff; padding: 3px 10px; border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 6px;
}
.video-tile-self { border: 2px solid var(--emerald); }
.video-avatar-fallback {
  width: 64px; height: 64px; background: linear-gradient(135deg, var(--emerald), var(--emerald-deep));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; color: #fff;
}

.room-sidebar { width: 300px; display: flex; flex-direction: column; background: #0f150f; border-left: 1px solid rgba(255,255,255,0.06); }
.room-sidebar-tab { display: flex; border-bottom: 1px solid rgba(255,255,255,0.06); }
.tab-btn { flex: 1; padding: 12px; font-size: 0.78rem; font-weight: 700; color: #5e7060; background: none; border: none; cursor: pointer; transition: var(--tr); }
.tab-btn.active { color: var(--emerald); border-bottom: 2px solid var(--emerald); margin-bottom: -1px; }
.tab-pane { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.tab-pane.active { display: flex; }
.participants-list { padding: 12px; overflow-y: auto; flex: 1; }
.participant-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); margin-bottom: 4px; }
.participant-item:hover { background: rgba(255,255,255,0.04); }
.p-avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(--emerald), var(--emerald-deep)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.p-name { font-size: 0.83rem; font-weight: 600; color: #eef2ee; }
.p-role { font-size: 0.65rem; color: #5e7060; }
.host-badge { font-size: 0.62rem; background: rgba(201,162,39,0.15); color: var(--gold); padding: 2px 7px; border-radius: var(--r-pill); font-weight: 700; margin-left: auto; }

.chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { display: flex; flex-direction: column; }
.chat-msg-author { font-size: 0.7rem; font-weight: 700; color: var(--emerald); margin-bottom: 2px; }
.chat-msg-body { font-size: 0.85rem; color: #b0c0b2; background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 0 var(--r-md) var(--r-md) var(--r-md); max-width: 92%; }
.chat-msg.own .chat-msg-body { background: rgba(47,165,52,0.12); border-radius: var(--r-md) 0 var(--r-md) var(--r-md); margin-left: auto; }
.chat-msg.own .chat-msg-author { text-align: right; }
.chat-input-row { padding: 12px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; gap: 8px; }
.chat-input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-pill); padding: 8px 14px; font-size: 0.85rem; color: #eef2ee; outline: none; }
.chat-input::placeholder { color: #5e7060; }
.chat-send { background: var(--emerald); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; transition: var(--tr); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.chat-send:hover { background: var(--emerald-deep); }

.room-controls {
  height: 72px; display: flex; align-items: center; justify-content: center; gap: 16px;
  background: #0f150f; border-top: 1px solid rgba(255,255,255,0.06); padding: 0 24px; flex-shrink: 0;
}
.ctrl-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06); color: #eef2ee; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: var(--tr);
}
.ctrl-btn:hover { border-color: var(--emerald); background: rgba(47,165,52,0.12); }
.ctrl-btn.muted,.ctrl-btn.video-off { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.3); color: #fca5a5; }
.ctrl-btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; width: 56px; height: 56px; font-size: 1.3rem; }
.ctrl-btn.danger:hover { background: #b91c1c; }

/* ── TUTORING HUB (index.php) ── */
.tutor-shell { display: flex; min-height: 100vh; }
.tutor-sidebar {
  width: 260px; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column;
  overflow-y: auto;
}
.tutor-main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.tutor-content { flex: 1; padding: 28px 36px; }
@media(max-width:900px) {
  .tutor-sidebar { transform: translateX(-100%); }
  .tutor-sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,0.15); }
  .tutor-main { margin-left: 0; }
  .tutor-content { padding: 20px 16px; }
}
.tutor-topbar { height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50; }
@media(max-width:900px){.tutor-topbar{padding:0 16px;}}

/* Reuse LMS card/form/button styles */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,var(--emerald),var(--emerald-deep));color:#fff;border:none;border-radius:var(--r-md);font-size:0.9rem;font-weight:700;cursor:pointer;transition:var(--tr);}
.btn-primary:hover{box-shadow:var(--sh-green);transform:translateY(-1px);}
.form-input{width:100%;padding:11px 13px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);font-size:0.88rem;color:var(--text-primary);transition:var(--tr);}
.form-input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-glass);}
.form-select{width:100%;padding:11px 13px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);font-size:0.88rem;color:var(--text-primary);cursor:pointer;}
.form-label{display:block;font-size:0.82rem;font-weight:600;color:var(--text-primary);margin-bottom:5px;}
.form-group{margin-bottom:16px;}
.alert-error{background:rgba(220,38,38,0.1);color:#dc2626;border:1px solid rgba(220,38,38,0.2);padding:11px 15px;border-radius:var(--r-sm);font-size:0.85rem;margin-bottom:14px;}
.alert-success{background:var(--emerald-glass);color:var(--emerald-deep);border:1px solid rgba(47,165,52,0.2);padding:11px 15px;border-radius:var(--r-sm);font-size:0.85rem;margin-bottom:14px;}
.section-title{font-family:var(--f-heading);font-weight:800;font-size:1.4rem;color:var(--text-primary);}
.section-sub{color:var(--text-muted);font-size:0.88rem;margin-bottom:20px;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
table{width:100%;border-collapse:collapse;}
thead th{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);}
tbody td{padding:11px 12px;font-size:0.83rem;color:var(--text-secondary);border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:hover td{background:var(--emerald-pale);}
.pill{padding:3px 9px;border-radius:var(--r-pill);font-size:0.67rem;font-weight:700;text-transform:uppercase;}
.pill-active{background:var(--emerald-glass);color:var(--emerald);}
.pill-host{background:rgba(201,162,39,0.12);color:var(--gold);}
.pill-ended{background:rgba(100,100,100,0.1);color:var(--text-muted);}
.empty-state{text-align:center;padding:50px 20px;}
.empty-icon{font-size:3rem;margin-bottom:10px;opacity:0.5;}
.empty-title{font-family:var(--f-heading);font-weight:700;font-size:1rem;color:var(--text-primary);margin-bottom:5px;}
.empty-sub{font-size:0.85rem;color:var(--text-muted);}