/* =====================================================
   Portal Jurnal Informatika — style.css
   Mereplikasi layout dan visual dari React/TailwindCSS
   ===================================================== */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #f4f4f5;
  color: #18181b;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* =====================================================
   LOGIN PAGE
   ===================================================== */
.login-body {
  background-color: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.login-wrapper {
  width: 100%;
  max-width: 28rem;
  animation: fadeInUp 0.5s ease-out both;
}

.login-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #f1f1f1;
  overflow: hidden;
  padding: 2rem 2rem;
}

@media (min-width: 640px) {
  .login-card { padding: 3rem; }
}

.login-header { margin-bottom: 2.5rem; text-align: center; }

.login-icon-wrap {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #0d9488, #06b6d4);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
  box-shadow: 0 8px 24px rgba(13,148,136,0.3);
  animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}

.login-title {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #18181b;
  margin-bottom: 0.5rem;
}

.login-subtitle { color: #71717a; font-size: 0.875rem; }

.login-form { display: flex; flex-direction: column; gap: 1.5rem; }

.login-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: #52525b;
}

.signup-link { font-weight: 600; color: #18181b; }
.signup-link:hover { text-decoration: underline; }

.forgot-link { font-size: 0.875rem; font-weight: 500; color: #71717a; }
.forgot-link:hover { color: #18181b; transition: color 0.15s; }

/* =====================================================
   FORM COMPONENTS
   ===================================================== */
.form-group { display: flex; flex-direction: column; gap: 0; }

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #3f3f46;
  display: block;
  margin-bottom: 0.5rem;
}

.form-hint {
  font-size: 0.75rem;
  color: #71717a;
  margin-bottom: 0.5rem;
  margin-top: -0.25rem;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.form-label-row .form-label { margin-bottom: 0; }

.input-wrapper { position: relative; }

.form-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  font-size: 0.875rem;
  color: #18181b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
  background: #fff;
}

.form-input::placeholder { color: #a1a1aa; }

.input-with-icon { padding-left: 2.75rem; }
.input-with-icon-right { padding-right: 3rem; }

.input-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  pointer-events: none;
  color: #a1a1aa;
}

.toggle-password {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-right: 1rem;
  background: none;
  border: none;
  color: #a1a1aa;
  transition: color 0.15s;
}
.toggle-password:hover { color: #52525b; }

.form-check { display: flex; align-items: center; gap: 0.5rem; }

.form-check-input {
  width: 1rem; height: 1rem;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  cursor: pointer;
  accent-color: #0d9488;
}

.form-check-label { font-size: 0.875rem; color: #52525b; cursor: pointer; }

/* Buttons */
.btn-login {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #0d9488, #06b6d4);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(13,148,136,0.35);
}

.btn-login:hover:not(:disabled) { opacity: 0.9; }
.btn-login:active:not(:disabled) { transform: scale(0.99); }
.btn-login:disabled { opacity: 0.7; cursor: not-allowed; }

.btn-login-text { display: flex; align-items: center; gap: 0.5rem; }

.btn-arrow {
  transition: transform 0.2s;
}
.btn-login:hover .btn-arrow { transform: translateX(4px); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  background: linear-gradient(135deg, #0d9488, #06b6d4);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.15s;
  box-shadow: 0 2px 8px rgba(13,148,136,0.3);
  text-decoration: none;
}
.btn-primary:hover { opacity: 0.9; }

/* Spinner */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Alerts */
.alert {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: fadeInDown 0.3s ease both;
}

.alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.alert-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}

.alert-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.alert-dot-success { background: #10b981; }

/* =====================================================
   APP LAYOUT (Dashboard)
   ===================================================== */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

@media (min-width: 640px) {
  .main-content { padding: 2rem; }
}

.content-wrapper { max-width: 72rem; margin: 0 auto; }

.page-fade-in { animation: fadeInUp 0.3s ease both; }

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
  width: 18rem;
  background: #ffffff;
  border-right: 1px solid #e4e4e7;
  display: none;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  z-index: 10;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .sidebar:not(.mobile-sidebar) { display: flex; }
}

.sidebar-brand {
  height: 4rem;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid #f4f4f5;
  flex-shrink: 0;
}

.brand-icon {
  width: 2rem; height: 2rem;
  background: linear-gradient(135deg, #0d9488, #06b6d4);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #18181b;
}

.sidebar-nav-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.nav-section-label {
  padding: 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #52525b;
  transition: background 0.15s, color 0.15s;
}

.nav-item:hover:not(.nav-item-active) {
  background: #f4f4f5;
  color: #18181b;
}

.nav-item-active {
  background: linear-gradient(135deg, #0d9488, #06b6d4);
  color: white;
  box-shadow: 0 4px 12px rgba(13,148,136,0.25);
}

.nav-icon { color: #a1a1aa; display: flex; flex-shrink: 0; }
.nav-icon-active { color: #d4d4d8; }

.sidebar-footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid #f4f4f5;
  flex-shrink: 0;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f9f9f9;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  border: 1px solid #f4f4f5;
}

.sidebar-avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: #e4e4e7;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #52525b;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role { font-size: 0.75rem; color: #71717a; }

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #dc2626;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-logout:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

/* =====================================================
   MOBILE SIDEBAR
   ===================================================== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(24,24,27,0.6);
  backdrop-filter: blur(4px);
  display: none;
}

.mobile-overlay.active { display: block; animation: fadeIn 0.25s ease both; }

.mobile-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 18rem;
  z-index: 50;
  display: flex !important;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}

.mobile-sidebar.open { transform: translateX(0); }

/* =====================================================
   TOPBAR
   ===================================================== */
.topbar {
  height: 4rem;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e7;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  z-index: 30;
  position: relative;
  flex-shrink: 0;
}

@media (min-width: 640px) { .topbar { padding: 0 2rem; } }

.topbar-left { display: flex; align-items: center; gap: 1rem; }

.topbar-right { display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 640px) { .topbar-right { gap: 1rem; } }

.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin-left: -0.5rem;
  color: #52525b;
  border-radius: 8px;
  border: none;
  background: none;
  transition: background 0.15s;
}
.hamburger:hover { background: #f4f4f5; }

@media (min-width: 768px) { .hamburger { display: none; } }

.page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #3f3f46;
  display: none;
}
@media (min-width: 640px) { .page-title { display: block; } }

.selector-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selector-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #71717a;
  display: none;
}
@media (min-width: 768px) { .selector-label { display: inline-block; } }

.topbar-select {
  background: #f9f9f9;
  border: 1px solid #e4e4e7;
  color: #18181b;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: auto;
}

.topbar-select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}

.topbar-divider {
  width: 1px;
  height: 1.5rem;
  background: #e4e4e7;
  display: none;
}
@media (min-width: 640px) { .topbar-divider { display: block; } }

.topbar-user { display: flex; align-items: center; gap: 0.75rem; }

.topbar-user-text { text-align: right; display: none; }
@media (min-width: 640px) { .topbar-user-text { display: block; } }

.topbar-username { font-size: 0.875rem; font-weight: 500; color: #18181b; line-height: 1; }
.topbar-role { font-size: 0.75rem; color: #71717a; margin-top: 0.25rem; }

.topbar-avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488, #06b6d4);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(13,148,136,0.3);
  flex-shrink: 0;
}

/* =====================================================
   NOTIFICATIONS
   ===================================================== */
.notif-wrapper { position: relative; }

.notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: none;
  color: #a1a1aa;
  transition: background 0.15s, color 0.15s;
  z-index: 50;
}
.notif-btn:hover { background: #f4f4f5; color: #52525b; }

.notif-badge {
  position: absolute;
  top: 0.375rem; right: 0.375rem;
  width: 0.5rem; height: 0.5rem;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
}

.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 20rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #e4e4e7;
  overflow: hidden;
  z-index: 50;
  animation: fadeInDown 0.2s ease both;
  transform-origin: top right;
}

.notif-panel-header {
  padding: 1rem;
  border-bottom: 1px solid #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(249,249,249,0.5);
}

.notif-panel-title { font-weight: 600; color: #18181b; font-size: 0.9375rem; }

.notif-mark-read {
  font-size: 0.75rem;
  font-weight: 500;
  color: #0d9488;
  border: none;
  background: none;
  transition: color 0.15s;
}
.notif-mark-read:hover { color: #0f766e; }

.notif-list { max-height: 20rem; overflow-y: auto; }

.notif-item {
  padding: 1rem;
  border-bottom: 1px solid #f9f9f9;
  display: flex;
  gap: 0.75rem;
  transition: background 0.15s;
}
.notif-item:hover { background: #f9f9f9; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(13,148,136,0.05); }

.notif-dot {
  margin-top: 0.375rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.notif-dot.unread { background: #0d9488; }
.notif-dot.read { background: transparent; }

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

.notif-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #3f3f46;
}
.notif-title.unread { color: #18181b; }

.notif-message {
  font-size: 0.75rem;
  color: #71717a;
  margin-top: 0.25rem;
  line-height: 1.5;
}

.notif-time {
  font-size: 0.625rem;
  font-weight: 500;
  color: #a1a1aa;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.notif-empty {
  padding: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: #71717a;
}

/* =====================================================
   DASHBOARD CARDS
   ===================================================== */
.welcome-banner {
  background: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);
  border-radius: 16px;
  padding: 2rem;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(13,148,136,0.3);
  margin-bottom: 1.5rem;
}

.welcome-text { position: relative; z-index: 1; max-width: 42rem; }

.welcome-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

@media (min-width: 640px) { .welcome-title { font-size: 1.875rem; } }

.welcome-subtitle { color: #a1a1aa; font-size: 1rem; line-height: 1.6; }
.welcome-highlight { color: white; font-weight: 500; }

.welcome-deco-1 {
  position: absolute;
  top: -4rem; right: -4rem;
  width: 16rem; height: 16rem;
  background: white;
  opacity: 0.05;
  border-radius: 50%;
  filter: blur(48px);
}

.welcome-deco-2 {
  position: absolute;
  bottom: -4rem; right: 8rem;
  width: 12rem; height: 12rem;
  background: #71717a;
  opacity: 0.1;
  border-radius: 50%;
  filter: blur(32px);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }

.stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid #e4e4e7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.stat-icon {
  padding: 0.75rem;
  border-radius: 12px;
  flex-shrink: 0;
}
.stat-icon-blue   { background: #f0fdfa; color: #0d9488; }
.stat-icon-emerald { background: #ecfdf5; color: #059669; }
.stat-icon-amber  { background: #fffbeb; color: #d97706; }

.stat-info {}
.stat-label { font-size: 0.875rem; font-weight: 500; color: #71717a; margin-bottom: 0.25rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: #18181b; }
.stat-sub { font-size: 0.875rem; font-weight: 400; color: #a1a1aa; }

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .two-col-grid { grid-template-columns: 1fr 1fr; } }

/* Cards */
.card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e4e4e7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-body { padding: 1.5rem 2rem; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.5rem 0;
}

.card-title { font-size: 1.125rem; font-weight: 700; color: #18181b; }
.card-action-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #71717a;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.15s;
}
.card-action-link:hover { color: #18181b; }

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #71717a;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1.5rem 1.5rem;
}

.activity-item { display: flex; gap: 1rem; }

.activity-dot {
  margin-top: 0.25rem;
  width: 0.5rem; height: 0.5rem;
  background: #0d9488;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #f0fdfa;
  flex-shrink: 0;
}

.activity-title { font-size: 0.875rem; font-weight: 500; color: #18181b; }
.activity-detail { font-size: 0.75rem; color: #71717a; margin-top: 0.25rem; }

/* Schedule List */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.5rem 1.5rem;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #f4f4f5;
  background: rgba(249,249,249,0.5);
  transition: background 0.15s;
}
.schedule-item:hover { background: #f9f9f9; }

.schedule-time-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #e4e4e7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  min-width: 6.5rem;
  gap: 0.25rem;
  color: #a1a1aa;
}

.schedule-time { font-size: 0.6875rem; font-weight: 700; color: #3f3f46; }

.schedule-class { font-size: 0.875rem; font-weight: 700; color: #18181b; }
.schedule-subject { font-size: 0.75rem; color: #71717a; margin-top: 0.125rem; }

/* =====================================================
   PLACEHOLDER PAGE
   ===================================================== */
.placeholder-page {
  min-height: calc(100vh - 12rem);
  background: white;
  border-radius: 16px;
  border: 1px solid #e4e4e7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.placeholder-icon {
  width: 4rem; height: 4rem;
  background: #f9f9f9;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  border: 1px solid #f4f4f5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  color: #a1a1aa;
}

.placeholder-title { font-size: 1.25rem; font-weight: 700; color: #18181b; margin-bottom: 0.5rem; }

.placeholder-desc {
  color: #71717a;
  max-width: 28rem;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
  font-size: 0.9375rem;
}
.placeholder-desc strong { font-weight: 600; color: #18181b; }

/* =====================================================
   PROFIL PAGE
   ===================================================== */
.profil-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .profil-grid { grid-template-columns: 1fr 2fr; }
}

.profil-desc {}
.profil-desc-title { font-size: 1.25rem; font-weight: 700; color: #18181b; margin-bottom: 0.5rem; }
.profil-desc-text { font-size: 0.875rem; color: #71717a; margin-bottom: 1.5rem; line-height: 1.6; }

.profil-form-wrap {}

.profil-form { display: flex; flex-direction: column; gap: 1.5rem; }

.profil-form-full {}

.profil-form-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .profil-form-two-col { grid-template-columns: 1fr 1fr; }
}

.profil-form-footer {
  padding-top: 1.5rem;
  border-top: 1px solid #f4f4f5;
  display: flex;
  justify-content: flex-end;
}

/* =====================================================
   UTILITIES
   ===================================================== */
.text-muted { color: #71717a; }
.text-sm { font-size: 0.875rem; }

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =====================================================
   RESPONSIVE — TABLET (≤900px)
   ===================================================== */
@media (max-width: 900px) {
  /* Card padding */
  .card-body { padding: 1.25rem; }
  .card-header { padding: 1.25rem 1.25rem 0; }

  /* Welcome banner */
  .welcome-banner { padding: 1.5rem; }
  .welcome-title { font-size: 1.375rem; }

  /* Tables — horizontal scroll */
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Notif panel — prevent overflow on smaller screens */
  .notif-panel { width: 18rem; }

  /* Topbar selectors smaller */
  .topbar-select { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
}

/* =====================================================
   RESPONSIVE — TABLET KECIL (≤768px)
   ===================================================== */
@media (max-width: 768px) {
  /* Main content padding */
  .main-content { padding: 1rem; }

  /* Two-col layout → single col */
  .two-col-grid { grid-template-columns: 1fr !important; }

  /* Stats grid → 1 col on small tablet */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Card body */
  .card-body { padding: 1rem; }

  /* Schedule time card — compact */
  .schedule-time-card { min-width: 5rem; padding: 0.4rem 0.6rem; }

  /* Topbar — hide semester text label, show only select */
  .selector-label { display: none !important; }
  .topbar-right { gap: 0.5rem; }
}

/* =====================================================
   RESPONSIVE — MOBILE (≤600px)
   ===================================================== */
@media (max-width: 600px) {
  /* App layout — full width (sidebar hidden) */
  .app-layout { height: auto; overflow: visible; }
  .app-main { overflow: visible; }
  .main-content { overflow-y: visible; }

  /* Content wrapper */
  .content-wrapper { padding: 0; }

  /* Welcome banner */
  .welcome-banner { padding: 1.25rem; border-radius: 12px; margin-bottom: 1rem; }
  .welcome-title { font-size: 1.125rem; margin-bottom: 0.25rem; }
  .welcome-subtitle { font-size: 0.875rem; }
  .welcome-deco-1, .welcome-deco-2 { display: none; }

  /* Stats grid → fully 1 col */
  .stats-grid { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1rem; }
  .stat-value { font-size: 1.25rem; }

  /* Card */
  .card { border-radius: 12px; }
  .card-body { padding: 0.875rem; }
  .card-header { padding: 0.875rem 0.875rem 0; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
  .card-title { font-size: 0.9375rem; }

  /* Tables */
  .table-responsive { border-radius: 10px; }

  /* Form two-col → one col */
  .profil-form-two-col { grid-template-columns: 1fr !important; gap: 1rem; }

  /* profil grid */
  .profil-grid { gap: 1rem; }

  /* Btn primary smaller */
  .btn-primary { padding: 0.5rem 1rem; font-size: 0.8125rem; }

  /* Topbar */
  .topbar { padding: 0 0.75rem; height: 3.5rem; }
  .topbar-right { gap: 0.4rem; }
  .topbar-select { font-size: 0.7rem; padding: 0.25rem 0.4rem; max-width: 90px; }
  .topbar-divider { display: none !important; }
  .notif-btn { width: 2rem; height: 2rem; }

  /* Notif panel full-width on mobile */
  .notif-panel { 
    position: fixed;
    right: 0.5rem;
    left: 0.5rem;
    top: 3.75rem;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Topbar avatar smaller */
  .topbar-avatar { width: 2rem; height: 2rem; font-size: 0.75rem; }

  /* Activity list */
  .activity-list { padding: 0 0.875rem 0.875rem; gap: 1rem; }
  .schedule-list { padding: 0 0.875rem 0.875rem; }
  .schedule-item { padding: 0.75rem; gap: 0.75rem; }
  .schedule-time-card { min-width: 4.5rem; font-size: 0.75rem; padding: 0.35rem 0.5rem; }

  /* Placeholder page */
  .placeholder-page { padding: 1.5rem; min-height: 60vh; }
  .placeholder-title { font-size: 1rem; }

  /* Profil form footer */
  .profil-form-footer { justify-content: stretch; }
  .profil-form-footer .btn-primary { width: 100%; justify-content: center; }

  /* Page fade-in wrapper */
  .page-fade-in { padding-bottom: 1rem; }
}