/* ==========================================================================
   TRJT 3A REMINDER — DESIGN SYSTEM v4.0 (PRISTINE GLASSMORPHISM UI)
   White & Blue Ambient Glassmorphism Interface
   Matches High-Fidelity Reference Designs (Beranda, Jadwal, Notifikasi, Pengaturan)
   ========================================================================== */

:root {
  /* Brand & Core Color Tokens */
  --color-primary-navy: #0F2942;
  --color-deep-blue: #0F3D91;
  --color-primary-blue: #2F80ED;
  --color-blue-hover: #1E6DEB;
  --color-soft-blue: #DCEEFF;
  --color-very-light-blue: #EBF4FE;
  --color-light-sky: #F0F6FF;

  /* Glassmorphism Surface Tokens */
  --color-app-bg: #F4F8FE;
  --color-surface-glass: rgba(255, 255, 255, 0.74);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.88);
  --color-surface-glass-active: rgba(235, 244, 254, 0.8);
  --color-surface-card: rgba(255, 255, 255, 0.76);
  --color-border-glass: rgba(255, 255, 255, 0.88);
  --color-border-subtle: rgba(220, 235, 252, 0.75);
  --color-border-hover: rgba(191, 219, 254, 0.85);

  /* Typography Colors */
  --color-text-primary: #0F2942;
  --color-text-secondary: #52667A;
  --color-text-muted: #8C9BAE;
  --color-text-blue: #1E6DEB;

  /* Semantic Status Tokens */
  --color-success: #16A34A;
  --color-success-bg: rgba(236, 253, 243, 0.85);
  --color-success-border: rgba(167, 243, 208, 0.9);
  --color-success-text: #059669;

  --color-warning: #D97706;
  --color-warning-bg: rgba(255, 247, 237, 0.85);
  --color-warning-border: rgba(254, 215, 170, 0.9);
  --color-warning-text: #D97706;

  --color-danger: #DC2626;
  --color-danger-bg: rgba(254, 242, 242, 0.85);
  --color-danger-border: rgba(254, 202, 202, 0.9);
  --color-danger-text: #DC2626;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Glass Shadows */
  --shadow-glass-subtle: 0 4px 16px rgba(15, 61, 145, 0.04), 0 1px 2px rgba(15, 61, 145, 0.02);
  --shadow-glass-card: 0 10px 30px rgba(15, 61, 145, 0.06), 0 1px 3px rgba(15, 61, 145, 0.03);
  --shadow-glass-hero: 0 14px 36px rgba(15, 61, 145, 0.08), 0 2px 6px rgba(15, 61, 145, 0.04);
  --shadow-button-primary: 0 4px 14px rgba(47, 128, 237, 0.35);
  --shadow-bottom-nav: 0 -8px 24px rgba(15, 61, 145, 0.05);

  /* Radius Tokens */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-btn: 12px;
  --radius-inner: 14px;
  --radius-card: 18px;
  --radius-hero: 22px;
  --radius-panel: 20px;
  --radius-full: 9999px;

  /* Micro-interactions */
  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Safe Areas */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --nav-height: 68px;
}

/* ==========================================================================
   Dark Theme Tokens & Adaptations
   ========================================================================== */
[data-theme="dark"] {
  --color-primary-navy: #F8FAFC;
  --color-deep-blue: #60A5FA;
  --color-primary-blue: #3B82F6;
  --color-blue-hover: #60A5FA;
  --color-soft-blue: rgba(59, 130, 246, 0.2);
  --color-very-light-blue: rgba(59, 130, 246, 0.15);
  --color-light-sky: rgba(30, 58, 138, 0.3);

  --color-app-bg: #090E17;
  --color-surface-glass: rgba(18, 28, 48, 0.78);
  --color-surface-glass-strong: rgba(24, 38, 64, 0.92);
  --color-surface-glass-active: rgba(30, 48, 80, 0.85);
  --color-surface-card: rgba(18, 28, 48, 0.82);
  --color-border-glass: rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(96, 165, 250, 0.4);

  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-text-blue: #60A5FA;

  --shadow-glass-subtle: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-glass-card: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-glass-hero: 0 16px 36px rgba(0, 0, 0, 0.5);
  --shadow-bottom-nav: 0 -8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] body {
  background-color: #090E17;
  background-image: 
    radial-gradient(at 90% 6%, rgba(30, 58, 138, 0.35) 0px, transparent 55%),
    radial-gradient(at 10% 94%, rgba(15, 23, 42, 0.8) 0px, transparent 50%),
    radial-gradient(at 50% 30%, rgba(9, 14, 23, 0.95) 0px, transparent 100%);
  color: #F8FAFC;
}

[data-theme="dark"] .app-viewport {
  background-color: #05080E;
}

[data-theme="dark"] .app-header {
  background: rgba(9, 14, 23, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-header-bell {
  background: rgba(24, 38, 64, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F8FAFC;
}

[data-theme="dark"] .bottom-nav {
  background: linear-gradient(145deg, rgba(20, 32, 54, 0.92) 0%, rgba(14, 23, 40, 0.94) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nav-item {
  color: #94A3B8;
}

[data-theme="dark"] .nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #F8FAFC;
}

[data-theme="dark"] .nav-item.active {
  background: rgba(47, 128, 237, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60A5FA;
}

[data-theme="dark"] .nav-item.active .nav-label {
  color: #93C5FD;
}

[data-theme="dark"] .hero-glass-card {
  background: linear-gradient(145deg, rgba(24, 38, 64, 0.95) 0%, rgba(15, 26, 46, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .schedule-glass-card,
[data-theme="dark"] .btn-piket-action,
[data-theme="dark"] .today-class-card,
[data-theme="dark"] .settings-glass-panel,
[data-theme="dark"] .notif-card,
[data-theme="dark"] .day-selector-capsule {
  background: linear-gradient(145deg, rgba(20, 32, 54, 0.9) 0%, rgba(14, 23, 40, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .modal-sheet {
  background: rgba(14, 23, 40, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .hero-meta-chip,
[data-theme="dark"] .schedule-lecturer-info,
[data-theme="dark"] .schedule-room-badge {
  color: #94A3B8;
}

[data-theme="dark"] .filter-glass-pill {
  background: rgba(24, 38, 64, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}

[data-theme="dark"] .filter-glass-pill.active {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3B82F6;
  color: #60A5FA;
}

/* ==========================================================================
   CSS Reset & Base (iOS & Android Responsive Optimization)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
select,
textarea,
.nav-item,
.day-btn-item,
.filter-glass-pill,
.dosen-course-pill,
.btn-schedule-mat,
.settings-item-row,
.theme-option-item,
.btn-piket-action {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: var(--font-family);
  background-color: var(--color-app-bg);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Glassmorphism Fallback for older Android/iOS WebViews */
@supports not ((-webkit-backdrop-filter: blur(18px)) or (backdrop-filter: blur(18px))) {
  .hero-glass-card,
  .schedule-glass-card,
  .notif-card,
  .settings-glass-panel,
  .day-selector-capsule,
  .dosen-glass-card,
  .modal-sheet,
  .bottom-nav {
    background: rgba(255, 255, 255, 0.98) !important;
  }
  [data-theme="dark"] .hero-glass-card,
  [data-theme="dark"] .schedule-glass-card,
  [data-theme="dark"] .notif-card,
  [data-theme="dark"] .settings-glass-panel,
  [data-theme="dark"] .day-selector-capsule,
  [data-theme="dark"] .dosen-glass-card,
  [data-theme="dark"] .modal-sheet,
  [data-theme="dark"] .bottom-nav {
    background: rgba(14, 23, 40, 0.98) !important;
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #F4F8FE;
  background-image: 
    radial-gradient(at 92% 6%, rgba(200, 228, 255, 0.6) 0px, transparent 50%),
    radial-gradient(at 8% 94%, rgba(215, 235, 255, 0.55) 0px, transparent 50%),
    radial-gradient(at 50% 30%, rgba(244, 248, 254, 0.9) 0px, transparent 100%);
  background-attachment: fixed;
  color: var(--color-text-primary);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   App Shell & Viewport Layout (iOS & Android Responsive)
   ========================================================================== */
.app-viewport {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

.app-container,
.app-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

@media (min-width: 1024px) {
  .app-viewport {
    background-color: #E6EFF8;
    background-image: 
      radial-gradient(at 85% 10%, rgba(185, 218, 255, 0.7) 0px, transparent 60%),
      radial-gradient(at 15% 90%, rgba(195, 225, 255, 0.65) 0px, transparent 60%);
    padding: 24px 0;
  }
  
  .app-container,
  .app-shell {
    max-width: 460px;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background-color: #F4F8FE;
    background-image: 
      radial-gradient(at 90% 8%, rgba(200, 228, 255, 0.6) 0px, transparent 55%),
      radial-gradient(at 10% 90%, rgba(215, 235, 255, 0.5) 0px, transparent 50%);
    box-shadow: 0 24px 60px -12px rgba(15, 61, 145, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.7);
    overflow: hidden;
  }
}

/* ==========================================================================
   Global App Header
   - Pristine white glass topbar
   - App logo icon + Title + Subtitle
   - Circular bell button on right
   ========================================================================== */
.app-header {
  padding: calc(var(--safe-area-top) + 12px) 20px 10px 20px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 248, 254, 0.85);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

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

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo-box {
  width: 42px;
  height: 42px;
  background: var(--color-very-light-blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 219, 254, 0.8);
  box-shadow: 0 2px 6px rgba(47, 128, 237, 0.1);
  color: var(--color-primary-blue);
  flex-shrink: 0;
}

.brand-logo-box img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--color-primary-navy);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.2;
  margin-top: 1px;
}

.btn-header-bell {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(220, 235, 252, 0.9);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-primary-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-glass-subtle);
}

.btn-header-bell:hover {
  background: var(--color-very-light-blue);
  color: var(--color-primary-blue);
  border-color: #BFDBFE;
}

.btn-header-bell:active {
  transform: scale(0.94);
}

.bell-unread-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 7px;
  height: 7px;
  background-color: var(--color-primary-blue);
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
}

/* ==========================================================================
   Main Content Layout & View Switching
   ========================================================================== */
.main-content {
  flex: 1;
  padding: 16px 20px calc(96px + var(--safe-area-bottom)) 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.view-section {
  display: none;
  flex-direction: column;
  gap: 20px;
  animation: fadeInView var(--transition-normal) forwards;
}

.view-section.active {
  display: flex;
}

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

/* ==========================================================================
   VIEW 1: BERANDA (HOME DASHBOARD)
   - Sapaan & Tanggal Row dengan Status Chip di Kanan Atas
   - Hero Glassmorphism KELAS BERIKUTNYA
   - Jadwal Hari Ini Cards List
   ========================================================================== */
.beranda-greeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.greeting-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.greeting-heading {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: var(--color-primary-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.greeting-date {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Status Chip Top-Right */
.status-pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.06);
}

.status-pill-chip.in-progress {
  background: rgba(235, 244, 254, 0.9);
  border-color: rgba(191, 219, 254, 0.9);
  color: var(--color-text-blue);
}

.status-pill-chip.starting-soon {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.status-pill-chip.neutral {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(220, 235, 252, 0.9);
  color: var(--color-text-secondary);
}

/* Hero Glassmorphism Card: KELAS BERIKUTNYA */
.hero-glass-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.92) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-hero);
  padding: 20px 22px;
  box-shadow: 0 16px 36px -8px rgba(30, 80, 180, 0.12), 0 4px 12px rgba(15, 61, 145, 0.04), inset 0 1px 1px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-glass-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

@supports not (backdrop-filter: blur(20px)) {
  .hero-glass-card, .schedule-glass-card, .notif-card, .settings-glass-panel, .day-selector-capsule {
    background: rgba(255, 255, 255, 0.98);
  }
}

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(47, 128, 237, 0.08);
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-tag-pill i {
  width: 13px;
  height: 13px;
}

.hero-tag-pill.in-progress {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

/* Time Highlight Row with Circular Clock Icon */
.hero-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-clock-circle {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, rgba(235, 244, 254, 1), rgba(219, 234, 254, 0.85));
  border: 1.5px solid rgba(191, 219, 254, 0.9);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(47, 128, 237, 0.12);
}

.hero-time-text-wrap {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.hero-day-text {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--color-primary-navy);
}

.hero-time-dot {
  color: #94A3B8;
  font-weight: 700;
}

.hero-time-text {
  font-size: 1.375rem; /* 22px */
  font-weight: 800;
  color: var(--color-primary-navy);
  letter-spacing: -0.02em;
}

.hero-course-title {
  font-size: 1.1875rem; /* 19px */
  font-weight: 800;
  color: var(--color-primary-navy);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

/* Micro-chips for Room and Lecturer */
.hero-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.hero-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  line-height: 1.3;
}

.hero-meta-chip i {
  width: 14px;
  height: 14px;
  color: var(--color-primary-blue);
  flex-shrink: 0;
}

/* Bottom Reminder Badge */
.hero-reminder-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(235, 244, 254, 0.95), rgba(224, 242, 254, 0.75));
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-blue);
  box-shadow: 0 2px 8px rgba(47, 128, 237, 0.08);
}

.hero-reminder-badge i {
  width: 13px;
  height: 13px;
}

.hero-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary-blue);
  box-shadow: 0 0 0 0 rgba(47, 128, 237, 0.7);
  animation: heroPulse 2s infinite;
}

@keyframes heroPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(47, 128, 237, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(47, 128, 237, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(47, 128, 237, 0); }
}

/* Live Countdown & Progress inside in-progress / H-10 states */
.hero-countdown-wrap {
  background: rgba(240, 246, 255, 0.7);
  border: 1px solid rgba(220, 235, 252, 0.8);
  border-radius: var(--radius-inner);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-countdown-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-countdown-digits {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: var(--color-primary-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.hero-progress-track {
  width: 100%;
  height: 4px;
  background-color: rgba(220, 235, 252, 0.8);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 4px;
}

.hero-progress-bar {
  height: 100%;
  background-color: var(--color-success);
  border-radius: var(--radius-full);
  transition: width 1s linear;
}

/* Section Title Headers */
.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-main-title {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--color-primary-navy);
  letter-spacing: -0.01em;
}

/* Jadwal Hari Ini Cards List */
.today-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.today-class-card {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-glass-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.today-class-card:hover {
  background: var(--color-surface-glass-strong);
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
}

.today-class-card:active {
  transform: scale(0.99);
}

.today-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.today-status-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-very-light-blue);
  border: 1px solid rgba(191, 219, 254, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
  flex-shrink: 0;
}

.today-status-circle.finished {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.today-status-circle.ongoing {
  background: var(--color-very-light-blue);
  border-color: #93C5FD;
  color: var(--color-primary-blue);
}

.today-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.today-card-time {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.today-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-primary-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.today-card-chevron {
  color: var(--color-primary-blue);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   VIEW 2: JADWAL (WEEKLY SCHEDULE)
   - Header with Semester 5 Badge
   - Segmented Day Selector Capsule (Sen 24, Sel 25, Rab 26, Kam 27, Jum 28)
   - Weekly Glass Cards
   ========================================================================== */
.view-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.view-page-title {
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  color: var(--color-primary-navy);
  letter-spacing: -0.02em;
}

.badge-semester {
  background: var(--color-very-light-blue);
  border: 1px solid rgba(191, 219, 254, 0.8);
  color: var(--color-primary-blue);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.badge-pertemuan {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #047857;
  font-weight: 700;
}

/* Day Selector Capsule */
.day-selector-capsule {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  border-radius: 20px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  box-shadow: var(--shadow-glass-subtle);
}

.day-btn-item {
  background: transparent;
  border: none;
  border-radius: 14px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-secondary);
}

.day-btn-item:hover:not(.active) {
  background: rgba(235, 244, 254, 0.5);
  color: var(--color-primary-blue);
}

.day-btn-item:active {
  transform: scale(0.96);
}

.day-btn-item.active {
  background: var(--color-primary-blue);
  color: #FFFFFF;
  box-shadow: var(--shadow-button-primary);
}

.day-label-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
}

.day-num-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

/* Weekly Schedule Cards */
.weekly-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-glass-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.9) 100%);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: 0 10px 24px -6px rgba(15, 61, 145, 0.08), 0 2px 6px rgba(15, 61, 145, 0.03), inset 0 1px 1px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.schedule-glass-card:active {
  transform: scale(0.99);
}

.schedule-top-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.schedule-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(47, 128, 237, 0.08);
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-blue);
  flex-shrink: 0;
}

.schedule-time-badge i {
  width: 13px;
  height: 13px;
}

.schedule-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(244, 248, 254, 0.9);
  border: 1px solid rgba(220, 235, 252, 0.9);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  flex-shrink: 0;
}

.schedule-room-badge i {
  width: 13px;
  height: 13px;
  color: var(--color-primary-blue);
  flex-shrink: 0;
}

.schedule-subject-heading {
  font-size: 1.125rem; /* 18px */
  font-weight: 800;
  color: var(--color-primary-navy);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.schedule-lecturer-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(224, 242, 254, 0.85) 100%);
  border: 1px solid rgba(186, 220, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all var(--transition-fast);
}

.schedule-lecturer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.schedule-lecturer-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid rgba(191, 219, 254, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
  flex-shrink: 0;
}

.schedule-lecturer-avatar i,
.schedule-lecturer-avatar svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary-blue);
}

.schedule-lecturer-name {
  font-size: 13px;
  color: #1E3A8A;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
  flex: 1;
}

.btn-schedule-mat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  height: 32px;
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.btn-schedule-mat i,
.btn-schedule-mat svg {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  stroke-width: 2.2;
  color: #FFFFFF;
  display: block;
}

.btn-schedule-mat:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  color: #FFFFFF;
}

.btn-schedule-mat:active {
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Dark Mode Overrides for Schedule Lecturer Row */
[data-theme="dark"] .schedule-lecturer-row {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(15, 23, 42, 0.5) 100%);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .btn-schedule-actions-row {
  border-top-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .schedule-lecturer-avatar {
  background: rgba(30, 58, 138, 0.7);
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .schedule-lecturer-avatar i,
[data-theme="dark"] .schedule-lecturer-avatar svg {
  color: #93C5FD;
}

[data-theme="dark"] .schedule-lecturer-name {
  color: #DBEAFE;
}

[data-theme="dark"] .btn-schedule-mat {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.3);
  color: #FFFFFF;
}

[data-theme="dark"] .btn-schedule-mat:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  border-color: #93C5FD;
}

/* ==========================================================================
   VIEW 3: NOTIFIKASI (NOTIFICATIONS INBOX)
   - Header with Subtitle & "Tandai dibaca"
   - Filter Pills: "Semua" & "Belum dibaca"
   - Glass Inbox Cards with Category Circular Icons & Unread Blue Dot
   ========================================================================== */
.notif-header-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-top-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-subtitle-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.btn-mark-read-link {
  background: none;
  border: none;
  color: var(--color-primary-blue);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: opacity var(--transition-fast);
}

.btn-mark-read-link:hover {
  opacity: 0.8;
}

/* Filter Pills Wrap */
.filter-pills-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 6px 4px 10px 4px;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
}

.filter-pills-bar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

.filter-glass-pill {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  box-sizing: border-box;
  line-height: 1;
}

.filter-glass-pill:hover:not(.active) {
  background: rgba(235, 244, 254, 0.9);
  border-color: #BFDBFE;
  color: var(--color-primary-blue);
}

.filter-glass-pill.active {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(47, 128, 237, 0.35);
}

/* Notifications List Container */
.notif-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.notif-card {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-glass-card);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.notif-card:hover {
  background: var(--color-surface-glass-strong);
  border-color: var(--color-border-hover);
}

.notif-card:active {
  transform: scale(0.99);
}

.notif-card.unread {
  background: rgba(255, 255, 255, 0.88);
}

/* Category Circular Icon Box */
.notif-cat-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-cat-circle.blue {
  background: var(--color-very-light-blue);
  border: 1px solid rgba(191, 219, 254, 0.8);
  color: var(--color-primary-blue);
}

.notif-cat-circle.green {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
}

.notif-cat-circle.orange {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
}

.notif-cat-circle.red {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-text);
}

.notif-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notif-title-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-navy);
  line-height: 1.25;
}

.unread-blue-dot {
  width: 7px;
  height: 7px;
  background-color: var(--color-primary-blue);
  border-radius: 50%;
  flex-shrink: 0;
}

.notif-desc-content {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.35;
  margin-top: 2px;
}

.notif-time-footer {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 6px;
  font-weight: 500;
}

/* ==========================================================================
   VIEW 4: PENGATURAN (SETTINGS)
   - Title & Subtitle
   - 3 Clean Glass Panels:
     1. Notifikasi & Alarm
     2. Tampilan
     3. Aplikasi
   - Icon Boxes in Light Blue, Chevrons, Toggle Switches, Test Button
   ========================================================================== */
.settings-panel-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-section-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-primary-navy);
  margin-bottom: 8px;
}

.settings-glass-panel {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-glass-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 12px;
  position: relative;
}

.settings-item-row:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 60px;
  right: 16px;
  height: 1px;
  background: rgba(220, 235, 252, 0.6);
}

.settings-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.settings-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-very-light-blue);
  border: 1px solid rgba(191, 219, 254, 0.8);
  color: var(--color-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-label-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-navy);
}

.settings-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.settings-value-badge {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.settings-value-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.settings-chevron {
  color: var(--color-text-muted);
  width: 14px;
  height: 14px;
}

/* Custom Clean Switch Toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #CBD5E1;
  transition: all 200ms ease;
  border-radius: 9999px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #FFFFFF;
  transition: all 200ms ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

input:checked + .slider {
  background-color: var(--color-primary-blue);
}

input:checked + .slider::before {
  transform: translateX(20px);
}

/* Tes Notifikasi Button Inside Panel */
.btn-panel-action {
  margin: 10px 16px 14px 16px;
  padding: 10px 16px;
  background: rgba(235, 244, 254, 0.6);
  border: 1.5px solid rgba(191, 219, 254, 0.9);
  border-radius: 12px;
  color: var(--color-primary-blue);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.btn-panel-action:hover {
  background: var(--color-primary-blue);
  color: #FFFFFF;
  border-color: var(--color-primary-blue);
}

.btn-panel-action:active {
  transform: scale(0.98);
}

/* ==========================================================================
   BOTTOM NAVIGATION
   - Floating Island Glass Capsule (Blur 28px)
   - 5 Items: Beranda, Jadwal, Notifikasi, Dosen, Pengaturan
   - Active Tab: Soft Blue Squircle Card with Dot Indicator
   - Safe-area aware
   ========================================================================== */
.bottom-nav {
  position: fixed;
  bottom: calc(14px + var(--safe-area-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 16px 36px -6px rgba(15, 61, 145, 0.14), 0 4px 12px rgba(15, 61, 145, 0.06), inset 0 1px 2px rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .bottom-nav {
    max-width: 440px;
    border-radius: 28px;
  }
}

.nav-item {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  color: #64748B;
  font-family: inherit;
  cursor: pointer;
  border-radius: 18px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 48px;
}

.nav-item:hover:not(.active) {
  background: rgba(235, 244, 254, 0.6);
  color: var(--color-primary-blue);
}

.nav-item:active {
  transform: scale(0.93);
}

.nav-item.active {
  background: rgba(235, 244, 254, 0.95);
  color: var(--color-primary-blue);
  box-shadow: 0 2px 8px rgba(47, 128, 237, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-icon-wrap i {
  width: 20px;
  height: 20px;
  transition: stroke-width 0.2s ease;
}

.nav-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.nav-item.active .nav-label {
  font-weight: 800;
  color: var(--color-primary-blue);
  letter-spacing: -0.01em;
}

.nav-item.active .nav-icon-wrap i {
  stroke-width: 2.3;
}

.nav-badge-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 7px;
  height: 7px;
  background-color: var(--color-primary-blue);
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  display: none;
}

/* ==========================================================================
   MODAL / POPUP DIALOGS (Glassmorphism Styled)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 41, 66, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop.is-open {
  display: flex;
  animation: fadeInModal 200ms ease forwards;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 -12px 40px rgba(15, 61, 145, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUpModal 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpModal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-drag-handle {
  width: 40px;
  height: 4px;
  background: #CBD5E1;
  border-radius: var(--radius-full);
  margin: 10px auto 0 auto;
}

.modal-header {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(220, 235, 252, 0.7);
}

.btn-close-modal {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-very-light-blue);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-close-modal:hover {
  background: #DBEAFE;
  color: var(--color-primary-navy);
}

.modal-body {
  padding: 18px 20px 28px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Material Form Elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary-navy);
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-input {
  font-size: 16px; /* Prevents auto-zoom in Safari iOS */
  touch-action: manipulation;
}

.form-input {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  font-family: inherit;
  color: var(--color-primary-navy);
  outline: none;
  transition: all var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.15);
  background: #FFFFFF;
}

.btn-submit-upload {
  width: 100%;
  min-height: 48px;
  background: var(--color-primary-blue);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-button-primary);
  transition: all var(--transition-fast);
}

.btn-submit-upload:hover:not(:disabled) {
  background: var(--color-blue-hover);
}

.btn-submit-upload:disabled {
  background: #CBD5E1;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-submit-upload.is-loading {
  background: var(--color-primary-blue) !important;
  opacity: 0.92;
  cursor: wait;
  box-shadow: 0 4px 14px rgba(47, 128, 237, 0.35);
}

/* ==========================================================================
   From Uiverse.io by PriyanshuGupta28 - Radial Multi-blade Spinner
   ========================================================================== */
.spinner-loader-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  flex-shrink: 0;
}

.spinner {
  position: absolute;
  width: 9px;
  height: 9px;
}

.spinner-loader-wrap .spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.48);
  transform-origin: center center;
}

.spinner div {
  position: absolute;
  width: 50%;
  height: 150%;
  background: #000000;
  transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
  border-radius: 1px;
}

/* High contrast adaptation for buttons & dark surfaces */
.btn-submit-upload .spinner div,
.btn-primary .spinner div,
.spinner-white div {
  background: #ffffff;
}

.spinner div:nth-child(1) {
  --delay: 0.1;
  --rotation: 36;
  --translation: 150;
}

.spinner div:nth-child(2) {
  --delay: 0.2;
  --rotation: 72;
  --translation: 150;
}

.spinner div:nth-child(3) {
  --delay: 0.3;
  --rotation: 108;
  --translation: 150;
}

.spinner div:nth-child(4) {
  --delay: 0.4;
  --rotation: 144;
  --translation: 150;
}

.spinner div:nth-child(5) {
  --delay: 0.5;
  --rotation: 180;
  --translation: 150;
}

.spinner div:nth-child(6) {
  --delay: 0.6;
  --rotation: 216;
  --translation: 150;
}

.spinner div:nth-child(7) {
  --delay: 0.7;
  --rotation: 252;
  --translation: 150;
}

.spinner div:nth-child(8) {
  --delay: 0.8;
  --rotation: 288;
  --translation: 150;
}

.spinner div:nth-child(9) {
  --delay: 0.9;
  --rotation: 324;
  --translation: 150;
}

.spinner div:nth-child(10) {
  --delay: 1;
  --rotation: 360;
  --translation: 150;
}

@keyframes spinner-fzua35 {
  0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  }

  50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
  }
}

/* Toast Container */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 440px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-item {
  background: rgba(15, 41, 66, 0.92);
  backdrop-filter: blur(16px);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(15, 61, 145, 0.2);
  pointer-events: auto;
  animation: toastSlideDown 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   DAFTAR PIKET KELAS (DUTY ROSTER)
   - Premium Glassmorphic Button Piket Action Card
   - Piket Modal Sheet & Today Banner
   - Kelompok I - V Glass Cards & Member Badges
   ========================================================================== */
.btn-piket-action {
  width: 100%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.92) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  box-shadow: 0 10px 28px -6px rgba(15, 61, 145, 0.08), 0 2px 8px rgba(15, 61, 145, 0.03), inset 0 1px 1px rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
  text-align: left;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.btn-piket-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #2F80ED 0%, #10B981 100%);
  border-top-left-radius: var(--radius-card);
  border-bottom-left-radius: var(--radius-card);
  opacity: 0.85;
}

.btn-piket-action:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(235, 246, 255, 0.98) 100%);
  border-color: rgba(191, 219, 254, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -4px rgba(37, 99, 235, 0.16), 0 4px 12px rgba(15, 61, 145, 0.05);
}

.btn-piket-action:active {
  transform: scale(0.985);
}

.btn-piket-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.btn-piket-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2F80ED 0%, #1D4ED8 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--transition-fast);
}

.btn-piket-action:hover .btn-piket-icon-box {
  transform: scale(1.05) rotate(-2deg);
}

.btn-piket-icon-box i,
.btn-piket-icon-box svg {
  width: 20px;
  height: 20px;
  color: #FFFFFF;
}

.btn-piket-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.btn-piket-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-piket-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary-navy);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.piket-today-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.9) 100%);
  border: 1px solid rgba(110, 231, 183, 0.85);
  color: #065F46;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12);
  letter-spacing: -0.01em;
}

.piket-today-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  flex-shrink: 0;
}

.btn-piket-chevron {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(47, 128, 237, 0.08);
  border: 1px solid rgba(191, 219, 254, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-piket-chevron i,
.btn-piket-chevron svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

.btn-piket-action:hover .btn-piket-chevron {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: #FFFFFF;
  transform: translateX(3px);
  box-shadow: 0 3px 8px rgba(47, 128, 237, 0.35);
}

/* Dark Mode Overrides for Piket Action Card */
[data-theme="dark"] .btn-piket-action {
  background: linear-gradient(135deg, rgba(22, 33, 54, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-piket-title {
  color: #F1F5F9;
}

[data-theme="dark"] .piket-today-pill {
  background: rgba(6, 78, 59, 0.45);
  border-color: rgba(52, 211, 153, 0.35);
  color: #6EE7B7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .btn-piket-chevron {
  background: rgba(30, 58, 138, 0.4);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93C5FD;
}

/* Piket Today Banner Inside Modal */
.piket-today-banner {
  background: linear-gradient(135deg, rgba(235, 244, 254, 0.95), rgba(220, 238, 255, 0.85));
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: var(--radius-inner);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.piket-today-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.piket-today-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.piket-today-group-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-navy);
}

.piket-today-members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.piket-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-navy);
  box-shadow: 0 1px 3px rgba(15, 61, 145, 0.04);
}

.piket-member-chip-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-very-light-blue);
  color: var(--color-primary-blue);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Piket Group Card */
.piket-group-card {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-glass-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--transition-fast);
}

.piket-group-card.is-today {
  border-color: rgba(47, 128, 237, 0.5);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(47, 128, 237, 0.12);
}

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

.piket-group-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.piket-roman-box {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-very-light-blue);
  border: 1px solid rgba(191, 219, 254, 0.8);
  color: var(--color-primary-blue);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piket-group-card.is-today .piket-roman-box {
  background: var(--color-primary-blue);
  color: #FFFFFF;
  border-color: var(--color-primary-blue);
}

.piket-group-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-primary-navy);
}

.piket-day-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.piket-members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (max-width: 360px) {
  .piket-members-grid {
    grid-template-columns: 1fr;
  }
}

.piket-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(244, 248, 254, 0.7);
  border: 1px solid rgba(220, 235, 252, 0.8);
  border-radius: 10px;
}

.piket-avatar-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-very-light-blue);
  color: var(--color-primary-blue);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.piket-member-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary-navy);
  line-height: 1.25;
}

/* ==========================================================================
   VIEW 4: DOSEN (LECTURERS DIRECTORY)
   ========================================================================== */
.dosen-glass-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: 0 10px 24px -6px rgba(15, 61, 145, 0.08), 0 2px 6px rgba(15, 61, 145, 0.03), inset 0 1px 1px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dosen-glass-card:active {
  transform: scale(0.99);
}

.dosen-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dosen-avatar-squircle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2F80ED, #0F3D91);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(47, 128, 237, 0.25);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.dosen-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.dosen-name-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary-navy);
  line-height: 1.3;
}

.dosen-nip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.dosen-nip-badge i {
  width: 13px;
  height: 13px;
  color: var(--color-primary-blue);
}

.dosen-courses-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(220, 235, 252, 0.7);
}

.dosen-courses-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dosen-courses-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dosen-course-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(47, 128, 237, 0.08);
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-primary-navy);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dosen-course-pill:hover {
  background: var(--color-primary-blue);
  color: #FFFFFF;
}

.dosen-course-pill i {
  width: 12px;
  height: 12px;
  color: var(--color-primary-blue);
}

.dosen-course-pill:hover i {
  color: #FFFFFF;
}

/* Dark mode overrides for Dosen */
[data-theme="dark"] .dosen-glass-card {
  background: linear-gradient(145deg, rgba(20, 32, 54, 0.9) 0%, rgba(14, 23, 40, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dosen-course-pill {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #F8FAFC;
}

[data-theme="dark"] .dosen-courses-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   QUICK DIRECTORY GLASS PILL BAR (SLIDABLE SEGMENTED PILL)
   ========================================================================== */
.quick-pill-capsule-container {
  width: 100%;
  margin-top: 14px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-full);
  padding: 5px 6px;
  box-shadow: 0 10px 30px rgba(15, 61, 145, 0.08), inset 0 1px 1px rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

.quick-pill-scroll-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 2px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}

.quick-pill-scroll-track:active {
  cursor: grabbing;
}

.quick-pill-scroll-track::-webkit-scrollbar {
  display: none;
}

.quick-pill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  min-width: 68px;
  background: transparent;
  border: none;
  color: var(--color-primary-navy);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.quick-pill-item i {
  width: 18px;
  height: 18px;
  color: var(--color-primary-navy);
  transition: all var(--transition-fast);
}

.quick-pill-item:hover:not(.active) {
  background: rgba(235, 244, 254, 0.8);
  color: var(--color-primary-blue);
}

.quick-pill-item:hover:not(.active) i {
  color: var(--color-primary-blue);
}

.quick-pill-item:active {
  transform: scale(0.95);
}

.quick-pill-item.active {
  background: linear-gradient(135deg, #184576, #0F2E52);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(24, 69, 118, 0.35);
}

.quick-pill-item.active i {
  color: #FFFFFF;
}

/* Dark mode for quick pill capsule */
[data-theme="dark"] .quick-pill-capsule-container {
  background: linear-gradient(145deg, rgba(20, 32, 54, 0.9) 0%, rgba(14, 23, 40, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .quick-pill-item {
  color: #94A3B8;
}

[data-theme="dark"] .quick-pill-item i {
  color: #94A3B8;
}

[data-theme="dark"] .quick-pill-item.active {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .quick-pill-item.active i {
  color: #FFFFFF;
}

.mahasiswa-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(244, 248, 254, 0.7);
  border: 1px solid rgba(220, 235, 252, 0.8);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.mahasiswa-card-item:hover {
  background: #FFFFFF;
  border-color: rgba(191, 219, 254, 0.9);
}

[data-theme="dark"] .mahasiswa-card-item {
  background: rgba(24, 38, 64, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Course Assignments & Task Tracking System (TRJT 3A)
   ========================================================================== */

.btn-schedule-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding-top: 8px;
  border-top: 1px solid rgba(186, 220, 255, 0.6);
}

.btn-schedule-actions-row > button {
  flex: 1 1 0;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 9px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-schedule-actions-row > button i,
.btn-schedule-actions-row > button svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  stroke-width: 2.2 !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.btn-schedule-actions-row > button span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 11.5px;
  font-weight: 700;
}

.btn-schedule-tugas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  height: 32px;
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-blue);
  background: rgba(235, 244, 254, 0.95);
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 6px rgba(47, 128, 237, 0.08);
}

.btn-schedule-tugas i,
.btn-schedule-tugas svg {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  stroke-width: 2.2;
  display: block;
}

.btn-schedule-tugas:hover {
  background: #FFFFFF;
  border-color: var(--color-primary-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(47, 128, 237, 0.16);
}

.btn-schedule-tugas.has-tasks {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.95), rgba(254, 215, 170, 0.85));
  border-color: rgba(245, 158, 11, 0.6);
  color: #B45309;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.16);
}

.btn-schedule-tugas.has-tasks:hover {
  background: #FFFBEB;
  border-color: #D97706;
}

.badge-task-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  background: #D97706;
  color: #FFFFFF;
  margin-left: 2px;
}

/* Deadline Badges */
.badge-deadline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8.5px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.2;
}

.badge-deadline i {
  width: 12px;
  height: 12px;
}

.badge-deadline-critical {
  background: #FEE2E2;
  border: 1px solid #FECACA;
  color: #DC2626;
}

.badge-deadline-urgent {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  color: #D97706;
}

.badge-deadline-warning {
  background: #FEF9C3;
  border: 1px solid #FEF08A;
  color: #CA8A04;
}

.badge-deadline-normal {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #2563EB;
}

.badge-deadline-passed {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #64748B;
}

/* ==========================================================================
   Assignment Cards — Clean, Ultra-Modern & Refined Layout
   ========================================================================== */
.assignment-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(219, 234, 254, 0.85);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px -3px rgba(15, 61, 145, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: all var(--transition-fast);
  position: relative;
}

.assignment-card:hover {
  border-color: rgba(147, 197, 253, 0.95);
  box-shadow: 0 6px 18px -4px rgba(15, 61, 145, 0.08), 0 2px 5px rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

.assignment-card.completed {
  opacity: 0.65;
  background: rgba(248, 250, 252, 0.85);
  border-color: rgba(226, 232, 240, 0.8);
}

.assignment-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.assignment-course-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #1D4ED8;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(191, 219, 254, 0.7);
  padding: 2.5px 8.5px;
  border-radius: 9999px;
  max-width: 65%;
  line-height: 1.2;
}

.assignment-course-pill span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignment-card-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.task-check-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #93C5FD;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  color: transparent;
  transition: all var(--transition-fast);
  padding: 0;
}

.task-check-btn:hover {
  border-color: #2563EB;
  background: #EFF6FF;
  transform: scale(1.08);
}

.task-check-btn.checked {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
}

.assignment-card-content {
  flex: 1;
  min-width: 0;
}

.assignment-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-navy);
  line-height: 1.35;
  margin: 0;
  word-break: break-word;
}

.assignment-card.completed .assignment-card-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.assignment-card-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 3px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.assignment-meta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  font-size: 11.5px;
}

.assignment-meta-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.assignment-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 7.5px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.8);
  color: #475569;
  line-height: 1.2;
}

.assignment-badge-truncate {
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignment-meta-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.assignment-due-date-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.btn-task-delete {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  padding: 0;
}

.btn-task-delete:hover {
  color: #DC2626;
  background: rgba(254, 242, 242, 0.95);
  transform: scale(1.05);
}

/* Home Section Widget: Tugas & Deadline */
.tugas-home-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.tugas-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.tugas-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.tugas-header-left .section-main-title {
  font-size: 1.05rem; /* ~16.5px */
  font-weight: 700;
  color: var(--color-primary-navy);
  letter-spacing: -0.01em;
  white-space: nowrap !important;
  margin: 0;
  line-height: 1.2;
}

.tugas-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.5px 8.5px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap !important;
  flex-shrink: 0;
  background: rgba(254, 243, 199, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.8);
  color: #B45309;
  box-sizing: border-box;
}

.tugas-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-tugas-view-all {
  background: transparent;
  border: none;
  color: var(--color-primary-blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap !important;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-family: inherit;
  line-height: 1;
}

.btn-tugas-view-all:hover {
  background: rgba(47, 128, 237, 0.08);
  color: #1D4ED8;
}

.btn-tugas-add-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  padding: 0 10px;
  height: 30px;
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-blue);
  background: rgba(235, 244, 254, 0.95);
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0;
  text-decoration: none;
  font-family: inherit;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 5px rgba(47, 128, 237, 0.08);
}

.btn-tugas-add-header:hover {
  background: #FFFFFF;
  border-color: var(--color-primary-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(47, 128, 237, 0.16);
}

.btn-tugas-add-header i,
.btn-tugas-add-header svg {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 2.2 !important;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 480px) {
  .tugas-header-left {
    gap: 6px;
  }
  .tugas-header-left .section-main-title {
    font-size: 15px;
  }
  .tugas-header-badge {
    padding: 2px 7px;
    font-size: 10.5px;
  }
  .tugas-header-actions {
    gap: 6px;
  }
  .btn-tugas-view-all {
    font-size: 11.5px;
    padding: 3px 5px;
  }
  .btn-tugas-add-header {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 8px;
  }
}

/* Segmented Type Selector in Add Assignment Form */
.task-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(244, 248, 254, 0.7);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(220, 235, 252, 0.8);
}

.task-type-btn {
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.task-type-btn.active {
  background: #FFFFFF;
  color: var(--color-primary-navy);
  box-shadow: 0 2px 6px rgba(15, 61, 145, 0.08);
  font-weight: 700;
}

/* Quick Date Chips in Add Assignment Form */
.quick-date-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.quick-date-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: rgba(244, 248, 254, 0.9);
  border: 1px solid rgba(220, 235, 252, 0.9);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  text-align: center;
}

.quick-date-btn:hover {
  background: #FFFFFF;
  border-color: var(--color-primary-blue);
  color: var(--color-primary-blue);
}

.quick-date-btn.active {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(47, 128, 237, 0.25);
}

/* Meeting Badges on Schedule Cards */
.schedule-meeting-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  background: rgba(236, 253, 245, 0.95);
  border: 1px solid rgba(167, 243, 208, 0.9);
  color: #047857;
  white-space: nowrap;
  flex-shrink: 0;
}

.schedule-meeting-badge i,
.schedule-meeting-badge svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}

.schedule-meeting-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(236, 253, 245, 0.95);
  border: 1px solid rgba(167, 243, 208, 0.9);
  color: #047857;
  white-space: nowrap;
}

/* Card Progress Perkuliahan Semester (Pertemuan 3 dari 16) */
.semester-progress-card {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-top: 8px;
  margin-bottom: 6px;
  box-shadow: 0 8px 24px rgba(15, 61, 145, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--transition-fast);
}

.semester-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.semester-progress-left-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(236, 253, 245, 0.95);
  border: 1px solid rgba(167, 243, 208, 0.9);
  padding: 3px 9px;
  border-radius: 9999px;
}

.pulse-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.semester-live-label {
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  white-space: nowrap;
}

.semester-exam-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #B45309;
  background: rgba(254, 243, 199, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.8);
  padding: 3px 9px;
  border-radius: 9999px;
  white-space: nowrap;
}

.semester-progress-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.semester-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-navy);
  margin: 0;
  line-height: 1.25;
}

.semester-progress-sub {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.semester-pct-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.semester-pct-number {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary-blue);
  line-height: 1;
}

.semester-pct-label {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-top: 2px;
}

.semester-progress-bar-track {
  width: 100%;
  height: 7px;
  background: rgba(220, 235, 252, 0.7);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.semester-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981 0%, #2F80ED 100%);
  border-radius: 9999px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.semester-progress-milestones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 2px;
}

.milestone-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 4px;
  border-radius: 7px;
  background: rgba(244, 248, 254, 0.8);
  border: 1px solid rgba(220, 235, 252, 0.8);
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}

.milestone-chip.passed {
  background: rgba(236, 253, 245, 0.7);
  border-color: rgba(167, 243, 208, 0.7);
  color: #059669;
}

.milestone-chip.current {
  background: rgba(239, 246, 255, 0.95);
  border-color: rgba(147, 197, 253, 0.9);
  color: #1D4ED8;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}

.milestone-chip.target {
  background: rgba(254, 243, 199, 0.5);
  border-color: rgba(253, 230, 138, 0.6);
  color: #B45309;
}

.milestone-chip.exam {
  background: rgba(254, 226, 226, 0.6);
  border-color: rgba(254, 202, 202, 0.8);
  color: #DC2626;
  font-weight: 700;
}

/* Dark Theme Overrides */
[data-theme="dark"] .tugas-header-left .section-main-title {
  color: #FFFFFF;
}

[data-theme="dark"] .btn-tugas-view-all {
  color: #60A5FA;
}

[data-theme="dark"] .btn-tugas-view-all:hover {
  background: rgba(96, 165, 250, 0.12);
  color: #93C5FD;
}

[data-theme="dark"] .btn-tugas-add-header {
  background: rgba(30, 58, 138, 0.35);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93C5FD;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-tugas-add-header:hover {
  background: rgba(37, 99, 235, 0.45);
  border-color: #60A5FA;
  color: #FFFFFF;
}

[data-theme="dark"] .btn-schedule-tugas {
  background: rgba(30, 58, 138, 0.35);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93C5FD;
}

[data-theme="dark"] .btn-schedule-tugas:hover {
  background: rgba(37, 99, 235, 0.3);
  border-color: #60A5FA;
}

[data-theme="dark"] .btn-schedule-tugas.has-tasks {
  background: rgba(180, 83, 9, 0.25);
  border-color: rgba(245, 158, 11, 0.4);
  color: #FDE68A;
}

[data-theme="dark"] .assignment-card {
  background: rgba(18, 28, 48, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .assignment-card.completed {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .assignment-course-pill {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(96, 165, 250, 0.35);
  color: #93C5FD;
}

[data-theme="dark"] .task-check-btn {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] .task-check-btn.checked {
  background: #059669;
  border-color: #059669;
  color: #FFFFFF;
}

[data-theme="dark"] .assignment-type-badge {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
}

[data-theme="dark"] .assignment-meta-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-task-delete:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #F87171;
}

[data-theme="dark"] .task-type-selector {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .task-type-btn.active {
  background: rgba(30, 41, 59, 0.95);
  color: #F8FAFC;
}

[data-theme="dark"] .quick-date-btn {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}

[data-theme="dark"] .quick-date-btn:hover {
  background: rgba(30, 58, 138, 0.5);
  color: #FFFFFF;
}

[data-theme="dark"] .quick-date-btn.active {
  background: #2563EB;
  border-color: #3B82F6;
  color: #FFFFFF;
}

[data-theme="dark"] .semester-progress-card {
  background: rgba(18, 28, 48, 0.78);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .semester-progress-title {
  color: #FFFFFF;
}

[data-theme="dark"] .semester-progress-sub {
  color: #94A3B8;
}

[data-theme="dark"] .semester-progress-bar-track {
  background: rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .milestone-chip {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
}

[data-theme="dark"] .milestone-chip.passed {
  background: rgba(6, 78, 59, 0.3);
  border-color: rgba(5, 150, 105, 0.4);
  color: #34D399;
}

[data-theme="dark"] .milestone-chip.current {
  background: rgba(30, 58, 138, 0.45);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93C5FD;
}

[data-theme="dark"] .milestone-chip.target {
  background: rgba(120, 53, 15, 0.3);
  border-color: rgba(245, 158, 11, 0.4);
  color: #FCD34D;
}

[data-theme="dark"] .milestone-chip.exam {
  background: rgba(127, 29, 29, 0.3);
  border-color: rgba(239, 68, 68, 0.4);
  color: #F87171;
}

[data-theme="dark"] .schedule-meeting-badge,
[data-theme="dark"] .schedule-meeting-chip,
[data-theme="dark"] .badge-pertemuan {
  background: rgba(6, 78, 59, 0.35) !important;
  border-color: rgba(5, 150, 105, 0.4) !important;
  color: #34D399 !important;
}

/* Stack input modals on top of list/course modals */
#modal-add-assignment,
#modal-upload-material,
#modal-admin-add-task {
  z-index: 150 !important;
}

/* ==========================================================================
   Course Practical Groups (Kelompok Praktikum per Mata Kuliah TRJT 3A)
   ========================================================================== */

.btn-schedule-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  height: 32px;
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #047857;
  background: rgba(236, 253, 245, 0.95);
  border: 1px solid rgba(167, 243, 208, 0.9);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
}

.btn-schedule-group:hover {
  background: #FFFFFF;
  border-color: #10B981;
  color: #065F46;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.16);
}

.btn-schedule-group i,
.btn-schedule-group svg {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  stroke-width: 2.2;
  display: block;
}

.practical-group-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(220, 235, 252, 0.85);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(15, 61, 145, 0.06);
  transition: all var(--transition-fast);
}

.practical-group-card:hover {
  border-color: rgba(167, 243, 208, 0.9);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.1);
}

.practical-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.practical-group-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-group-num {
  font-size: 11px;
  font-weight: 800;
  color: #065F46;
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.95), rgba(167, 243, 208, 0.85));
  border: 1px solid rgba(110, 231, 183, 0.8);
  padding: 3px 8px;
  border-radius: 8px;
}

.practical-group-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-navy);
}

.badge-group-count {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.btn-copy-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.8);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-copy-group:hover {
  background: #FFFFFF;
  color: var(--color-primary-navy);
  border-color: var(--color-primary-blue);
}

.btn-copy-group.copied {
  background: #ECFDF5;
  color: #059669;
  border-color: #6EE7B7;
}

.practical-group-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.practical-group-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.practical-group-member-item:hover {
  background: #FFFFFF;
  border-color: rgba(226, 232, 240, 0.9);
}

.practical-group-member-item.is-matched {
  background: rgba(236, 253, 245, 0.95);
  border-color: rgba(110, 231, 183, 0.9);
  box-shadow: 0 0 0 1.5px rgba(16, 185, 129, 0.35);
}

.member-idx {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  width: 14px;
}

.member-avatar-init {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-very-light-blue);
  color: var(--color-primary-blue);
  flex-shrink: 0;
}

.practical-group-member-item.is-matched .member-avatar-init {
  background: #10B981;
  color: #FFFFFF;
}

.member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-navy);
  flex: 1;
}

.practical-group-member-item.is-matched .member-name {
  color: #065F46;
  font-weight: 700;
}

/* Dark Mode Overrides for Practical Groups */
[data-theme="dark"] .btn-schedule-group {
  background: rgba(6, 78, 59, 0.35);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6EE7B7;
}

[data-theme="dark"] .btn-schedule-group:hover {
  background: rgba(5, 150, 105, 0.3);
  border-color: #34D399;
}

[data-theme="dark"] .practical-group-card {
  background: rgba(18, 28, 48, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .practical-group-name {
  color: #F8FAFC;
}

[data-theme="dark"] .badge-group-num {
  background: rgba(6, 78, 59, 0.6);
  border-color: rgba(16, 185, 129, 0.4);
  color: #A7F3D0;
}

[data-theme="dark"] .btn-copy-group {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.7);
  color: #CBD5E1;
}

[data-theme="dark"] .practical-group-member-item {
  background: rgba(30, 41, 59, 0.5);
}

[data-theme="dark"] .member-name {
  color: #F1F5F9;
}

[data-theme="dark"] .practical-group-member-item.is-matched {
  background: rgba(6, 78, 59, 0.4);
  border-color: rgba(52, 211, 153, 0.5);
}