:root {
  --bg: #f8fafc; --card: #fff; --text: #0f172a; --text-muted: #64748b;
  --primary: #3b82f6; --primary-dark: #2563eb; --danger: #ef4444; --success: #10b981;
  --border: #e2e8f0; --shadow: 0 4px 12px rgba(0,0,0,0.08); --radius: 12px;
  --sidebar-w: 260px; --sidebar-c: 80px;
}
[data-theme="dark"] {
  --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --text-muted: #94a3b8;
  --border: #334155; --shadow: 0 4px 12px rgba(0,0,0,0.4);
}
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Inter', system-ui, sans-serif; }
body { background: var(--bg); color: var(--text); min-height:100vh; }
.glass { background: var(--card); backdrop-filter: blur(10px); border: 1px solid var(--border); }
.app-layout { display:flex; min-height:100vh; }

/* Desktop: tampilkan user badge di topbar, sembunyikan di sidebar */
.desktop-user {
  display: block;
}
.mobile-user-info {
  display: none !important;
}

/* Mobile: sembunyikan user badge di topbar, tampilkan di sidebar */
@media(max-width:768px) {
  .desktop-user {
    display: none !important;
  }
  .mobile-user-info {
    display: block !important;
  }
  
  /* Kecilkan heading */
  #pageTitle {
    font-size: 1.1rem !important;
    max-width: 60vw;
  }
}

/* Sidebar */
.sidebar { width: var(--sidebar-w); height:100vh; position:fixed; left:0; top:0; padding:1.5rem; display:flex; flex-direction:column; transition: width 0.3s; z-index:100; border-right:1px solid var(--border); }
.sidebar.collapsed { width: var(--sidebar-c); }
.sidebar.collapsed .brand span, .sidebar.collapsed .nav-link span:last-child, .sidebar.collapsed .btn-logout span:last-child { display:none; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.brand { font-size:1.25rem; font-weight:800; display:flex; align-items:center; gap:0.5rem; }
.nav { flex:1; display:flex; flex-direction:column; gap:0.5rem; }
.nav-link { display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; border-radius:10px; color:var(--text-muted); text-decoration:none; transition:0.2s; cursor:pointer; }
.nav-link:hover { background:var(--bg); color:var(--primary); }
.nav-link.active { background:var(--primary); color:#fff; box-shadow:var(--shadow); }
.sidebar-footer { padding-top:1rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:0.75rem; }
.icon-btn { background:none; border:none; font-size:1.25rem; cursor:pointer; padding:0.5rem; border-radius:8px; color:var(--text-muted); }
.icon-btn:hover { background:var(--bg); }
.btn-logout { display:flex; align-items:center; gap:0.75rem; padding:0.875rem; background:var(--danger); color:#fff; border:none; border-radius:10px; cursor:pointer; font-weight:600; }

/* Main Area */
.main-area { flex:1; margin-left: var(--sidebar-w); display:flex; flex-direction:column; transition: margin-left 0.3s; }
.sidebar.collapsed ~ .main-area { margin-left: var(--sidebar-c); }
.topbar { height:70px; margin:1rem 1rem 0; border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; }
.content-area { padding:1.5rem; flex:1; overflow-y:auto; }
.user-badge { background:var(--bg); padding:0.5rem 1rem; border-radius:20px; font-weight:600; font-size:0.875rem; }

/* Components */
.btn { padding:0.625rem 1.25rem; border-radius:8px; border:none; cursor:pointer; font-weight:500; transition:0.2s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:var(--bg); border:1px solid var(--border); color:var(--text); }
.btn-sm { padding:0.375rem 0.75rem; font-size:0.75rem; }
.badge { padding:0.25rem 0.625rem; border-radius:20px; font-size:0.75rem; font-weight:600; background:var(--bg); }
.card { background:var(--card); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); border:1px solid var(--border); }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; margin-bottom:0.5rem; font-size:0.875rem; font-weight:500; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:0.75rem; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); }

/* Modal & Toast */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--card); padding:2rem; border-radius:var(--radius); width:100%; max-width:500px; max-height:90vh; overflow-y:auto; }
.modal-actions { display:flex; gap:0.75rem; justify-content:flex-end; margin-top:1.5rem; }
#toastContainer { position:fixed; bottom:1.5rem; right:1.5rem; z-index:300; display:flex; flex-direction:column; gap:0.5rem; }
.toast { background:var(--card); padding:1rem 1.5rem; border-radius:10px; box-shadow:var(--shadow); border-left:4px solid var(--success); animation: slideIn 0.3s; }
.toast.error { border-left-color: var(--danger); }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Loader */
.loader { display:flex; flex-direction:column; align-items:center; justify-content:center; height:40vh; color:var(--text-muted); }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation: spin 0.8s linear infinite; margin-bottom:1rem; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Login Page */
.login-body { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#667eea,#764ba2); }
.login-card { background:var(--card); padding:2.5rem; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.3); width:100%; max-width:400px; text-align:center; }
.login-card .logo { font-size:3rem; margin-bottom:1rem; }
.login-card h1 { margin-bottom:0.5rem; }
.login-card p { color:var(--text-muted); margin-bottom:2rem; }
.error-msg { background:#fee2e2; color:#991b1b; padding:0.75rem; border-radius:8px; margin-top:1rem; display:none; font-size:0.875rem; }

/* Responsive */
@media(max-width:768px) {
  /* Sidebar tersembunyi default, muncul dari kiri */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px !important;
    background: var(--card) !important;
    color: var(--text) !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    border-right: 1px solid var(--border);
  }
  
  /* Sidebar terbuka saat class mobile-open aktif */
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  
  /* Jangan pakai collapsed di mobile - tampilkan semua */
  .sidebar.collapsed {
    width: 260px !important;
  }
  .sidebar.collapsed .brand span,
  .sidebar.collapsed .nav-link span:last-child,
  .sidebar.collapsed .btn-logout span:last-child {
    display: inline !important;
  }
  
  /* Nav link harus tampil lengkap di mobile */
  .nav-link {
    display: flex !important;
    padding: 0.875rem 1rem !important;
  }
  .nav-link .nav-text,
  .nav-link span:last-child {
    display: inline !important;
  }
  
  /* Sidebar footer - tombol logout lengkap */
  .btn-logout {
    display: flex !important;
  }
  .btn-logout span:last-child {
    display: inline !important;
  }
  
  /* Main area full width */
  .main-area {
    margin-left: 0 !important;
    width: 100%;
  }
  
  /* Topbar */
  .topbar {
    padding: 0 1rem;
  }
  
  /* Tombol hamburger tampil */
  .mobile-menu-btn {
    display: block !important;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text);
    padding: 0.5rem;
    margin-right: 0.5rem;
  }
  
  /* Overlay gelap */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  .sidebar-overlay.active {
    display: block;
  }
  
  /* Layout grid jadi 1 kolom */
  .stats-grid,
  .charts-row {
    grid-template-columns: 1fr !important;
  }
  
  /* Filter controls 1 kolom */
  .filter-controls > div:first-child {
    grid-template-columns: 1fr !important;
  }
  
  /* Tabel */
  .lamaran-table {
    font-size: 0.8rem;
  }
  .lamaran-table th,
  .lamaran-table td {
    padding: 0.5rem 0.25rem;
  }
  
  /* Card grid 1 kolom */
  .grid-cards,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Modal */
  .modal-box {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  /* Toast di bawah */
  #toastContainer {
    left: 1rem;
    right: 1rem;
  }
  .toast {
    width: 100%;
  }
}

/* Default desktop - tombol hamburger hidden */
.mobile-menu-btn {
  display: none;
}
.sidebar-overlay {
  display: none;
}

.website-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0.75rem 0 0 0;
  transition: all 0.2s;
  border: none;
}

.website-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Tombol hamburger - default hidden di desktop */
.mobile-menu-btn {
  display: none;
}

/* Overlay - default hidden */
.sidebar-overlay {
  display: none;
}