/* =========================================================
   NEUMORPHISM 3D UI - TRJT 3A PORTAL
   ========================================================= */

/* --- 1. VARIABEL WARNA & BAYANGAN (TEMA TERANG & GELAP) --- */
:root {
  /* Tema Terang (Light Mode) */
  --bg-color: #e0e5ec;
  --text-main: #2d3748;
  --text-muted: #718096;
  --primary-color: #2563eb;
  --primary-glow: rgba(37, 99, 235, 0.2);
  
  /* Bayangan Neumorphic Terang */
  --shadow-light: rgba(255, 255, 255, 0.9);
  --shadow-dark: rgba(163, 177, 198, 0.6);
  
  /* Variasi Efek 3D */
  --out-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light);
  --in-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
  --hover-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
}

body.dark {
  /* Tema Gelap (Dark Mode) */
  --bg-color: #26282B;
  --text-main: #e2e8f0;
  --text-muted: #a0aec0;
  --primary-color: #60a5fa;
  --primary-glow: rgba(96, 165, 250, 0.2);
  
  /* Bayangan Neumorphic Gelap */
  --shadow-light: rgba(60, 62, 65, 0.6);
  --shadow-dark: rgba(15, 15, 16, 0.8);
}

/* --- 2. RESET & BASE SETUP --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.5;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 120px; /* Jarak untuk navigasi bawah */
}

a { text-decoration: none; color: inherit; }
button { border: none; outline: none; background: transparent; cursor: pointer; font-family: inherit; }

/* --- 3. APP BAR (HEADER) --- */
.app-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--bg-color);
  box-shadow: var(--out-shadow);
  border-radius: 0 0 25px 25px;
  margin-bottom: 25px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-bar-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
}

.app-bar-title span {
  color: var(--primary-color);
}

.app-bar-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.app-clock {
  font-family: 'JetBrains Mono', monospace;
  padding: 10px 15px;
  border-radius: 12px;
  background: var(--bg-color);
  box-shadow: var(--in-shadow); /* Efek tenggelam */
  font-weight: 700;
  color: var(--primary-color);
  font-size: 0.9rem;
}

/* --- 4. TABS & ANIMASI --- */
.tab {
  display: none;
  padding: 0 20px;
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab.on { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 5. JADWAL KULIAH --- */
.days {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 15px 10px;
  margin: -10px -10px 15px -10px;
  scrollbar-width: none;
}
.days::-webkit-scrollbar { display: none; }

.days .d {
  padding: 12px 24px;
  border-radius: 15px;
  background: var(--bg-color);
  box-shadow: var(--out-shadow); /* Timbul */
  color: var(--text-muted);
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.days .d:active { box-shadow: var(--in-shadow); }
.days .d.today { border: 1px solid var(--primary-glow); }
.days .d.sel {
  box-shadow: var(--in-shadow); /* Tenggelam saat dipilih */
  color: var(--primary-color);
}

.day-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.dname-badge {
  background: var(--bg-color);
  box-shadow: var(--in-shadow);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-color);
}

/* Card Roster */
.row {
  display: flex;
  background: var(--bg-color);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--out-shadow);
  gap: 15px;
}

.row.live {
  box-shadow: var(--out-shadow), inset 0 0 0 2px var(--primary-color);
}

.row-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
  border-right: 2px solid var(--primary-glow);
  font-family: 'JetBrains Mono', monospace;
}

.r-time-start { font-size: 1.1rem; font-weight: 800; color: var(--text-main); }
.r-time-end { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }

.row-body { flex: 1; }
.r-mk { font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; line-height: 1.3; }
.r-dosen { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-weight: 600;}
.r-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-color);
  box-shadow: var(--in-shadow);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
}

/* --- 6. FORM PENCARIAN (INPUTS) --- */
.search-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-color);
  box-shadow: var(--in-shadow); /* Efek input cekung khas Neumorphism */
  padding: 15px 20px;
  border-radius: 16px;
  margin-bottom: 25px;
}

.search-wrap i { color: var(--text-muted); margin-right: 12px; font-size: 1.1rem; }
.search-wrap input {
  border: none;
  background: transparent;
  width: 100%;
  color: var(--text-main);
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
}
.search-wrap input::placeholder { color: var(--text-muted); opacity: 0.7; }

/* --- 7. EXPORT BAR & BUTTONS --- */
.export-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: var(--bg-color);
  padding: 18px;
  border-radius: 20px;
  box-shadow: var(--out-shadow);
}

.export-bar-left h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.export-sub { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.export-bar-right { display: flex; gap: 12px; }

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: var(--bg-color);
  box-shadow: var(--out-shadow);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.btn-export:active { box-shadow: var(--in-shadow); }
.btn-export.csv { color: #10b981; }
.btn-export.pdf { color: #ef4444; }

/* --- 8. KELOMPOK PRAKTIKUM & PIKET --- */
.mktabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 6px;
  margin: -6px -6px 15px -6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mktabs::-webkit-scrollbar {
  display: none;
}

.mkt {
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--bg-color);
  box-shadow: var(--out-shadow);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  transition: 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}

.mkt.sel {
  box-shadow: var(--in-shadow);
  color: var(--primary-color);
}

.mk-note {
  padding: 15px;
  background: var(--bg-color);
  box-shadow: var(--in-shadow);
  border-radius: 15px;
  margin-bottom: 25px;
  font-size: 0.9rem;
  font-weight: 500;
}

.gc {
  background: var(--bg-color);
  border-radius: 20px;
  box-shadow: var(--out-shadow);
  padding: 20px;
  margin-bottom: 25px;
}

.gc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.gc-head b { color: var(--primary-color); font-size: 1.15rem; font-weight: 800; }
.gc-head em { font-size: 0.8rem; color: var(--text-muted); font-style: normal; font-weight: 600; }

.ml {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  border-radius: 15px;
  margin-bottom: 12px;
  box-shadow: var(--in-shadow); /* Daftar list di dalam card dibuat cekung */
}

.ml-n {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  box-shadow: var(--out-shadow); /* Nomor urut dibuat timbul lagi */
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--primary-color);
}

.ml-nm { font-weight: 700; font-size: 0.95rem; margin-bottom: 3px; }
.ml-id { font-size: 0.8rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* --- 9. DAFTAR MAHASISWA (TABLE) --- */
.tbl-wrap {
  background: var(--bg-color);
  border-radius: 20px;
  box-shadow: var(--out-shadow);
  padding: 15px;
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; text-align: left; }

th {
  background: var(--bg-color);
  box-shadow: var(--in-shadow);
  padding: 15px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

th:first-child { border-radius: 12px 0 0 12px; }
th:last-child { border-radius: 0 12px 12px 0; }

td {
  padding: 15px;
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(163, 177, 198, 0.2);
}

tr:last-child td { border-bottom: none; }
.td-n { text-align: center; width: 50px; }
.td-id { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--text-muted); }

/* --- 10. DAFTAR DOSEN (GRID) --- */
.dosen-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }

.dosen-card {
  background: var(--bg-color);
  border-radius: 20px;
  box-shadow: var(--out-shadow);
  padding: 20px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.dc-avatar {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  box-shadow: var(--in-shadow);
  border-radius: 50%;
  font-weight: 800;
  color: var(--primary-color);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.dc-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 5px; line-height: 1.3; }
.dc-nip { font-size: 0.8rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-weight: 600; margin-bottom: 12px; }
.dc-mks { display: flex; flex-wrap: wrap; gap: 8px; }

.dc-mk-badge {
  background: var(--bg-color);
  box-shadow: var(--in-shadow);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dc-mk-badge i { color: var(--primary-color); }

/* --- 11. FAB (FLOATING BUTTONS) --- */
.fab-group {
  position: fixed;
  bottom: 110px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 100;
}

.back-btn, .dark-toggle {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--bg-color);
  box-shadow: var(--out-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 1.3rem;
  transition: all 0.2s ease;
}

.back-btn:active, .dark-toggle:active {
  box-shadow: var(--in-shadow);
  transform: scale(0.95);
}

/* --- 12. BOTTOM NAVIGATION (DOCK) --- */
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: transparent;
  padding: 15px;
  z-index: 99;
}

.nw {
  display: flex;
  justify-content: space-between;
  max-width: 500px;
  margin: 0 auto;
  background: var(--bg-color);
  padding: 10px 15px;
  border-radius: 25px;
  box-shadow: var(--out-shadow); /* Base Nav timbul ke atas */
}

.nb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 12px 0;
  border-radius: 18px;
  color: var(--text-muted);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nb svg { width: 22px; height: 22px; transition: 0.3s; }
.nb span { font-size: 0.7rem; font-weight: 700; transition: 0.3s; }
.nb-indicator { display: none; }

.nb.on {
  color: var(--primary-color);
  box-shadow: var(--in-shadow); /* Tombol yang aktif ditekan ke dalam (cekung) */
}

.nb.on svg { transform: translateY(-2px); }

/* --- 13. UTILITIES & NOTIFIKASI --- */
.highlight-match {
  background: transparent;
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-glow);
  padding: 0;
}

.empty-row {
  padding: 40px 20px;
  text-align: center;
  background: var(--bg-color);
  border-radius: 20px;
  box-shadow: var(--in-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-row i { font-size: 3rem; color: var(--text-muted); margin-bottom: 15px; opacity: 0.5; }
.empty-title { font-weight: 800; font-size: 1.1rem; color: var(--text-main); margin-bottom: 5px; }
.empty-desc { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }

.live-pill, .upcoming-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  margin-left: 10px;
  letter-spacing: 0.5px;
}

.live-pill {
  background: var(--bg-color);
  color: #ef4444;
  box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.upcoming-pill {
  background: var(--bg-color);
  color: #f59e0b;
  box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.9);
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse-red 1.2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse-red {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}