:root {
      --primary: #059669;
      --primary-light: #10b981;
      --primary-dark: #047857;
      --primary-soft: rgba(16, 185, 129, 0.12);
      --primary-glow: rgba(16, 185, 129, 0.25);
      
      --bg-main: #f8fafc;
      --surface: #ffffff;
      --surface-glass: rgba(255, 255, 255, 0.85);
      
      --text-main: #0f172a;
      --text-sec: #64748b;
      --text-muted: #94a3b8;
      --border: #e2e8f0;
      --border-light: #f1f5f9;
      
      --danger: #ef4444;
      --danger-bg: #fef2f2;
      --success: #10b981;
      --success-bg: #ecfdf5;
      --warning: #f59e0b;
      --warning-bg: #fffbeb;
      --info: #3b82f6;
      --info-bg: #eff6ff;
      
      --radius-sm: 8px;
      --radius: 16px;
      --radius-lg: 24px;
      
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
      --shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
      --shadow-lg: 0 20px 35px -10px rgba(5, 150, 105, 0.18);
    }

    * { 
      box-sizing: border-box; 
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    
    html, body {
      margin: 0; padding: 0; width: 100%; height: 100%;
      background: #0f172a;
      display: flex; justify-content: center;
      overflow: hidden;
      color: var(--text-main);
    }

    body {
      align-items: center;
      padding: 0;
      max-width: 100%;
      min-height: 100vh;
      background: #f8fafc;
    }

    #mobile-container {
      width: 100%; 
      max-width: none;
      height: 100vh;
      min-height: 100vh;
      background-color: var(--bg-main); 
      position: relative;
      box-shadow: none;
      display: flex; flex-direction: column;
      overflow: hidden;
    }

    @media (min-width: 768px) {
      body {
        padding: 0;
      }
      #mobile-container {
        min-height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
      }
    }

    /* VIEW SCREENS */
    .view-screen { display: none; flex-direction: column; flex: 1; width: 100%; position: relative; overflow: hidden; }
    .view-screen.active { display: flex; }

    /* SCREEN 1: LOGIN STYLING */
    .login-shell { 
      flex: 1; 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      align-items: center; 
      padding: 24px; 
      overflow-y: auto; 
      background: radial-gradient(135% 100% at 50% 0%, #065f46 0%, #047857 40%, #0f172a 100%);
      position: relative;
    }

    .login-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }

    .login-brand { 
      text-align: center; 
      color: #ffffff; 
      margin-bottom: 2rem; 
      z-index: 1;
    }
    
    .brand-icon-wrapper {
      width: 80px; height: 80px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 24px;
      display: inline-flex;
      align-items: center; justify-content: center;
      margin-bottom: 16px;
      box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.2);
    }
    
    .login-brand i { font-size: 42px; color: #ffffff; }
    .login-brand h2 { margin: 0; font-size: 28px; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; }
    .login-brand p { margin: 6px 0 0; font-size: 15px; color: rgba(255,255,255,0.85); font-weight: 500; }

    .login-card { 
      width: min(100%, 400px); 
      background: rgba(255, 255, 255, 0.95); 
      backdrop-filter: blur(20px);
      border-radius: var(--radius-lg); 
      padding: 32px 28px 28px; 
      box-shadow: 0 20px 40px rgba(0,0,0,0.25); 
      z-index: 1;
      border: 1px solid rgba(255, 255, 255, 0.6);
    }

    @media (min-width: 768px) {
      .login-shell {
        flex-direction: row;
        gap: 60px;
        padding: 56px;
      }

      .login-brand {
        flex: 1;
        margin-bottom: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
      }

      .login-brand h2 { font-size: 38px; }
      .login-brand p { font-size: 18px; }
      .brand-icon-wrapper { width: 96px; height: 96px; border-radius: 28px; }
      .login-brand i { font-size: 52px; }

      .login-card {
        width: 420px;
        padding: 36px 32px 32px;
      }
    }

    .login-card h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; }
    .login-card .helper { font-size: 13px; color: var(--text-sec); margin: 0 0 22px; line-height: 1.5; background: rgba(5, 150, 105, 0.06); padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--primary); }
    
    .input-group { margin-bottom: 1.25rem; }
    .input-group label { display: block; font-size: 13px; color: #334155; margin-bottom: 6px; font-weight: 600; }
    .input-group input, .input-group select { 
      width: 100%; 
      padding: 13px 14px; 
      border: 1.5px solid var(--border); 
      border-radius: 12px; 
      font-size: 15px; 
      outline: none; 
      background: #ffffff; 
      color: var(--text-main);
      transition: all 0.2s ease;
    }
    .input-group input:focus, .input-group select:focus { 
      border-color: var(--primary); 
      box-shadow: 0 0 0 4px var(--primary-soft); 
    }

    .btn-primary { 
      width: 100%; 
      padding: 14px; 
      background: linear-gradient(135deg, #059669 0%, #10b981 100%); 
      color: white; 
      border: none; 
      border-radius: 12px; 
      font-size: 16px; 
      font-weight: 700; 
      cursor: pointer; 
      box-shadow: var(--shadow-lg);
      transition: all 0.2s ease;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 15px 30px -5px rgba(5, 150, 105, 0.3);
    }

    .btn-outline { 
      width: 100%; 
      padding: 12px; 
      background: #ffffff; 
      color: var(--primary); 
      border: 1.5px dashed var(--primary); 
      border-radius: 12px; 
      font-size: 14px; 
      font-weight: 600; 
      cursor: pointer; 
      margin-top: 16px; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      gap: 8px; 
      transition: all 0.2s ease;
    }
    .btn-outline:hover { background: var(--primary-soft); border-style: solid; }

    /* DASHBOARD STYLING */
    .header { 
      background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%); 
      color: white; 
      padding: 24px 24px 36px; 
      border-bottom-left-radius: var(--radius-lg); 
      border-bottom-right-radius: var(--radius-lg); 
      flex-shrink: 0; 
      z-index: 10; 
      box-shadow: 0 10px 20px -5px rgba(4, 120, 87, 0.25);
      position: relative;
    }

    .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
    
    .logout-btn { 
      background: rgba(255,255,255,0.18); 
      border: 1px solid rgba(255,255,255,0.3); 
      color: white; 
      padding: 8px 16px; 
      border-radius: 99px; 
      font-size: 13px; 
      font-weight: 600;
      cursor: pointer; 
      backdrop-filter: blur(8px);
      transition: all 0.2s ease;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .logout-btn:hover { background: rgba(255,255,255,0.3); }

    .user-profile-badge {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .user-avatar {
      width: 46px; height: 46px;
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 700; color: #ffffff;
      backdrop-filter: blur(8px);
      flex-shrink: 0;
    }

    #guru-controls select {
      background: #ffffff;
      color: var(--text-main);
      font-weight: 600;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      cursor: pointer;
    }

    /* CONTENT AREA */
    .content-area { 
      flex: 1; 
      overflow-y: auto; 
      padding: 0 20px 24px; 
      margin-top: -24px; 
      position: relative; 
      z-index: 15;
    }
    
    .tab-content { display: none; animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .tab-content.active { display: block; }
    
    @keyframes fadeIn { 
      from { opacity: 0; transform: translateY(12px); } 
      to { opacity: 1; transform: translateY(0); } 
    }

    .card { 
      background: var(--surface); 
      border-radius: var(--radius-lg); 
      padding: 22px; 
      margin-top: 20px; 
      box-shadow: var(--shadow); 
      border: 1px solid rgba(226, 232, 240, 0.8);
    }

    .card-title { 
      display: flex; 
      align-items: center; 
      gap: 10px; 
      font-weight: 700; 
      font-size: 17px; 
      margin: 0 0 14px 0; 
      color: var(--text-main); 
    }
    .card-title-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: var(--primary-soft);
      color: var(--primary);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 20px;
    }
    
    .list-item { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      padding: 14px 0; 
      border-bottom: 1px solid var(--border-light); 
      font-size: 14px;
    }
    .list-item:last-child { border-bottom: none; }

    /* DASHBOARD SUMMARY CARDS */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 14px;
      margin-top: 14px;
    }

    @media (min-width: 640px) {
      .summary-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .summary-card {
      background: #ffffff;
      border: 1.5px solid var(--border-light);
      border-radius: 18px;
      padding: 18px;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .summary-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
      border-color: var(--primary-light);
    }

    .summary-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    
    .summary-card-icon {
      width: 42px; height: 42px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
    }

    .summary-card-action {
      background: transparent;
      border: none;
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0;
      margin-top: 14px;
      transition: gap 0.2s ease;
    }
    .summary-card-action:hover {
      gap: 8px;
    }

    /* SHOLAT CHIPS */
    .chip-container {
      display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
    }
    .chip { 
      padding: 12px 16px; 
      border-radius: 14px; 
      border: 1.5px solid var(--border); 
      font-size: 14px; 
      font-weight: 600;
      background: var(--bg-main); 
      color: var(--text-sec); 
      display: inline-flex; 
      align-items: center; 
      gap: 8px; 
      cursor: pointer; 
      width: calc(50% - 5px); 
      justify-content: center; 
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
    }
    .chip i { font-size: 18px; }
    .chip:hover {
      border-color: var(--primary-light);
      background: #ffffff;
      transform: translateY(-1px);
    }
    .chip.done { 
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); 
      color: var(--primary-dark); 
      border-color: var(--primary-light); 
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }
    .chip.done i {
      color: var(--primary);
    }

    /* HISTORY LIST */
    .history-card {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 10px;
      transition: all 0.2s ease;
    }
    .history-card:hover {
      border-color: #cbd5e1;
      box-shadow: var(--shadow-sm);
    }

    /* TAHFIZ ACCORDION STYLING */
    .tahfiz-surah-card {
      border: 1px solid var(--border);
      border-radius: 16px;
      margin-bottom: 12px;
      overflow: hidden;
      background: var(--surface);
      transition: all 0.2s ease;
    }
    .tahfiz-surah-card:hover {
      border-color: #cbd5e1;
      box-shadow: var(--shadow-sm);
    }
    .tahfiz-surah-header {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: var(--surface);
    }
    .tahfiz-surah-body {
      padding: 0 16px 16px;
      border-top: 1px solid var(--border-light);
      background: var(--bg-main);
    }

    /* BOTTOM NAVIGATION STYLING */
    .bottom-nav { 
      width: 100%; 
      height: 72px; 
      background: rgba(255, 255, 255, 0.92); 
      backdrop-filter: blur(16px);
      display: flex; 
      justify-content: space-around; 
      align-items: center; 
      border-top: 1px solid var(--border); 
      z-index: 20; 
      flex-shrink: 0; 
      box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    }
    .nav-item { 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      gap: 4px; 
      color: var(--text-muted); 
      cursor: pointer; 
      flex: 1; 
      padding: 10px 0; 
      transition: all 0.2s ease;
      position: relative;
    }
    .nav-item.active { 
      color: var(--primary); 
    }
    .nav-item.active::before {
      content: '';
      position: absolute;
      top: 0;
      width: 32px;
      height: 3px;
      background: var(--primary);
      border-radius: 0 0 4px 4px;
    }
    .nav-item i { font-size: 24px; transition: transform 0.2s ease; }
    .nav-item.active i { transform: translateY(-2px); }
    .nav-item span { font-size: 11px; font-weight: 600; }

    /* MODALS */
    .modal-overlay { 
      position: fixed; 
      inset: 0; 
      width: 100%; 
      height: 100%; 
      background: rgba(15, 23, 42, 0.6); 
      backdrop-filter: blur(6px);
      display: none; 
      justify-content: center; 
      align-items: flex-end; 
      z-index: 30; 
    }
    
    @media (min-width: 768px) {
      .modal-overlay {
        align-items: center;
      }
    }

    .modal-content { 
      background: white; 
      width: 100%; 
      max-width: 520px;
      padding: 28px; 
      border-top-left-radius: 28px; 
      border-top-right-radius: 28px; 
      animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
      max-height: 85vh; 
      display: flex; 
      flex-direction: column; 
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }
    
    @media (min-width: 768px) {
      .modal-content {
        border-radius: 24px;
      }
    }

    @keyframes slideUp { 
      from { transform: translateY(100%); opacity: 0; } 
      to { transform: translateY(0); opacity: 1; } 
    }
    
    .modal-scroll-area { overflow-y: auto; flex: 1; margin: 16px 0; padding-right: 4px; }

    .btn-edit-mini { 
      background: var(--primary-soft); 
      border: 1px solid rgba(16, 185, 129, 0.3); 
      color: var(--primary-dark); 
      padding: 6px 12px; 
      border-radius: 8px; 
      font-size: 12px; 
      font-weight: 600; 
      cursor: pointer; 
      margin-left: 8px; 
      display: inline-flex; 
      align-items: center; 
      gap: 4px; 
      transition: all 0.2s ease;
    }
    .btn-edit-mini:hover {
      background: var(--primary);
      color: #ffffff;
    }
    
    .icon-rotate { transition: transform 0.3s ease; }
    .icon-rotate.rotated { transform: rotate(180deg); }

    .badge-status {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 99px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    /* PROGRESS BAR */
    .progress-bar-bg {
      width: 100%;
      height: 8px;
      background: var(--border-light);
      border-radius: 99px;
      overflow: hidden;
      margin: 8px 0;
    }
    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
      border-radius: 99px;
      transition: width 0.4s ease;
    }


/* =========================== FASE 4B: PANEL ADMIN ===========================
   Tambahan CSS khusus Admin. Aturan yang sudah ada di atas tidak diubah. */
.admin-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 26px clamp(16px, 3vw, 36px) 36px;
  background: var(--bg-main);
  flex-direction: column;
  gap: 22px;
}
.admin-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-welcome-copy { min-width: 0; }
.admin-eyebrow { margin: 0 0 6px; color: var(--primary-dark); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.admin-welcome h2 { margin: 0; color: var(--text-main); font-size: clamp(23px, 3vw, 31px); line-height: 1.2; letter-spacing: -.03em; }
.admin-welcome-copy > p:last-child { margin: 9px 0 0; color: var(--text-sec); font-size: 14px; line-height: 1.6; }
.admin-refresh { width: auto; min-width: 145px; margin: 0; border-style: solid; white-space: nowrap; box-shadow: none; }
.admin-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--info-bg); border: 1px solid rgba(59,130,246,.18); border-radius: 13px; color: var(--text-main); font-size: 13px; line-height: 1.55; }
.admin-note i { color: var(--info); font-size: 18px; flex-shrink: 0; }
.admin-message { margin: -12px 0 -8px; color: var(--text-sec); font-size: 12px; }
.admin-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.admin-section-heading h3 { margin: 0; color: var(--text-main); font-size: 18px; font-weight: 800; }
.admin-section-heading p { margin: 5px 0 0; color: var(--text-sec); font-size: 12px; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-stat-card { min-width: 0; padding: 18px; margin: 0; border: 1px solid var(--border-light); border-radius: 16px; box-shadow: var(--shadow-sm); }
.admin-stat-top { display: flex; align-items: center; gap: 10px; }
.admin-stat-icon, .admin-module-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-dark); font-size: 20px; }
.admin-stat-label { color: var(--text-sec); font-size: 12px; font-weight: 700; }
.admin-stat-number { display: block; margin-top: 15px; color: var(--text-main); font-size: clamp(25px, 2.8vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.admin-stat-caption { display: block; margin-top: 7px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.admin-loading-card { color: var(--text-sec); font-size: 13px; }
.admin-modules-heading { margin-top: 2px; }
.admin-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-module-card { display: flex; align-items: flex-start; gap: 13px; margin: 0; padding: 18px; border: 1px solid var(--border-light); border-radius: 16px; box-shadow: var(--shadow-sm); }
.admin-module-icon { width: 42px; height: 42px; font-size: 21px; }
.admin-module-body { min-width: 0; }
.admin-module-body h4 { margin: 2px 0 7px; color: var(--text-main); font-size: 14px; font-weight: 800; }
.admin-module-body p { margin: 0; color: var(--text-sec); font-size: 12px; line-height: 1.6; }
.admin-module-status { display: inline-flex; margin-top: 12px; padding: 5px 8px; border-radius: 7px; background: var(--bg-main); color: var(--text-sec); font-size: 10px; font-weight: 800; }
.admin-footnote { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-sec); font-size: 12px; line-height: 1.6; }
.admin-footnote i { color: var(--primary); font-size: 17px; }
.admin-error-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; color: var(--text-sec); font-size: 13px; }
.admin-error-card i { color: var(--danger); font-size: 22px; }
.admin-error-card strong { color: var(--text-main); }
@media (max-width: 900px) { .admin-stats-grid, .admin-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .admin-panel { padding: 20px 14px 28px; gap: 18px; }
  .admin-welcome { flex-direction: column; align-items: stretch; }
  .admin-refresh { align-self: flex-start; }
  .admin-stats-grid, .admin-module-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .admin-stat-card { padding: 15px; }
  .admin-stat-number { margin-top: 12px; }
  .admin-module-card { padding: 15px; }
}

/* =========================== FASE 4C: ADMIN FUNGSIONAL ==========================
   CSS baru ditambahkan di paling bawah. Gaya di atas tidak diubah. */
.admin-nav { display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:14px; }
.admin-nav-button { display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text-sec); font:inherit; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.admin-nav-button i { font-size:16px; }
.admin-nav-button.active { color:var(--primary-dark); border-color:rgba(5,150,105,.3); background:var(--primary-soft); }
#admin-content { display:flex; flex-direction:column; gap:16px; min-width:0; }
.admin-two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.admin-form-card, .admin-list-card, .admin-welcome-card { min-width:0; margin:0; padding:20px; border:1px solid var(--border-light); box-shadow:var(--shadow-sm); }
.admin-form-card .card-title, .admin-list-card .card-title { margin-bottom:14px; }
.admin-form-card p { color:var(--text-sec); font-size:12px; line-height:1.65; }
.admin-form-card .input-group { margin-bottom:13px; }
.admin-form-card .input-group input, .admin-form-card .input-group select, .admin-time-row .input-group input { width:100%; min-width:0; }
.admin-form-card .input-group small { display:block; color:var(--text-muted); font-size:11px; line-height:1.5; margin-top:5px; }
.admin-form-actions, .admin-row-actions, .admin-quick-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.admin-form-actions { margin-top:12px; }
.admin-form-actions .btn-primary, .admin-form-actions .btn-outline { width:auto; margin:0; }
.admin-small-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; width:auto; margin:0; padding:7px 10px; border-radius:9px; font-size:11px; font-weight:800; white-space:nowrap; box-shadow:none; }
.danger-text { color:var(--danger) !important; border-color:rgba(239,68,68,.25) !important; }
.admin-muted { display:block; color:var(--text-muted); font-size:11px; line-height:1.5; }
.admin-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--border-light); border-radius:12px; }
.admin-table { width:100%; border-collapse:collapse; font-size:12px; text-align:left; }
.admin-table th { padding:12px 13px; color:var(--text-sec); background:var(--bg-main); font-size:10px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.admin-table td { padding:12px 13px; border-top:1px solid var(--border-light); vertical-align:middle; color:var(--text-main); }
.admin-table td strong { font-size:12px; }
.admin-table .chip { display:inline-flex; margin:0; }
.admin-links-list { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:175px; }
.admin-link-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 6px 4px 8px; border:1px solid var(--border-light); border-radius:8px; background:var(--bg-main); font-size:10px; }
.admin-link-chip .admin-small-btn { min-height:22px; padding:2px 5px; }
.admin-empty { padding:18px; background:var(--bg-main); border-radius:12px; color:var(--text-sec); font-size:12px; }
.admin-fields-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.admin-subheading { margin:18px 0 10px; color:var(--text-main); font-size:13px; font-weight:800; }
.admin-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.admin-check-label { display:flex; align-items:center; gap:7px; padding:9px 10px; border:1px solid var(--border-light); border-radius:9px; color:var(--text-sec); font-size:12px; font-weight:700; }
.admin-check-label input, .admin-toggle input { accent-color:var(--primary); }
.admin-time-list { display:flex; flex-direction:column; gap:10px; }
.admin-time-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap:9px; padding:12px; border:1px solid var(--border-light); border-radius:12px; }
.admin-time-row .input-group { margin:0; }
.admin-time-row .input-group label { font-size:11px; }
.admin-toggle { display:inline-flex; align-items:center; gap:6px; min-height:38px; color:var(--text-sec); font-size:11px; font-weight:800; white-space:nowrap; }
.admin-quick-actions { margin-top:18px; }
.admin-quick-actions .admin-small-btn { min-height:38px; padding:10px 13px; font-size:12px; }
.admin-welcome-card > p { color:var(--text-sec); font-size:13px; line-height:1.7; }
@media (max-width: 900px) { .admin-two-col { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 560px) {
  .admin-nav { flex-wrap:nowrap; overflow-x:auto; padding-bottom:10px; }
  .admin-nav-button { flex-shrink:0; }
  .admin-form-card, .admin-list-card, .admin-welcome-card { padding:15px; }
  .admin-fields-grid, .admin-check-grid { grid-template-columns:minmax(0,1fr); }
  .admin-time-row { grid-template-columns:minmax(0,1fr) auto; }
  .admin-time-row .admin-small-btn { grid-column:1 / -1; }
  .admin-table td, .admin-table th { padding:10px; }
}


/* Fase 4i: pengelompokan navigasi dan data Admin. Tambahan di bagian paling bawah; aturan lama tidak diubah. */
.admin-nav { display:grid; grid-template-columns:minmax(105px,.75fr) minmax(270px,1.8fr) minmax(170px,1.1fr) minmax(220px,1.5fr) minmax(150px,1fr); gap:10px; align-items:stretch; border-bottom:1px solid var(--border); padding-bottom:14px; }
.admin-nav-group { min-width:0; display:flex; flex-direction:column; gap:7px; padding:10px; border:1px solid var(--border-light); border-radius:12px; background:var(--bg-main); }
.admin-nav-group-title { color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; line-height:1.35; }
.admin-nav-group-items { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; }
.admin-nav-group .admin-nav-button { padding:8px 9px; font-size:11px; white-space:normal; text-align:left; }
.admin-dashboard-group { display:flex; flex-direction:column; gap:10px; }
.admin-dashboard-group + .admin-dashboard-group { margin-top:6px; }
.admin-dashboard-group .admin-section-heading { margin-bottom:0; }
.admin-dashboard-group .admin-stats-grid { margin-top:0; }
.admin-group-list { display:flex; flex-direction:column; gap:10px; min-width:0; }
.admin-entity-group { min-width:0; overflow:hidden; border:1px solid var(--border-light); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-sm); }
.admin-entity-group > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; cursor:pointer; list-style:none; }
.admin-entity-group > summary::-webkit-details-marker, .admin-form-accordion > summary::-webkit-details-marker, .admin-settings-group > summary::-webkit-details-marker { display:none; }
.admin-entity-group > summary::after { content:'Buka'; flex-shrink:0; color:var(--primary-dark); font-size:11px; font-weight:800; }
.admin-entity-group[open] > summary::after { content:'Tutup'; }
.admin-group-main { display:flex; flex-direction:column; min-width:0; gap:4px; }
.admin-group-main strong { color:var(--text-main); font-size:13px; }
.admin-group-main small { color:var(--text-sec); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.admin-group-count { flex-shrink:0; padding:5px 9px; border-radius:8px; background:var(--primary-soft); color:var(--primary-dark); font-size:10px; font-weight:800; }
.admin-entity-group-body { padding:0 12px 12px; }
.admin-entity-group-body .admin-table-wrap { border-radius:9px; }
.admin-form-accordion { border:1px solid var(--border-light); border-radius:13px; background:var(--surface); overflow:hidden; }
.admin-form-accordion > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px; font-size:13px; font-weight:800; cursor:pointer; list-style:none; }
.admin-form-accordion > summary span { display:inline-flex; align-items:center; gap:8px; }
.admin-form-accordion > summary small { color:var(--text-muted); font-size:10px; font-weight:600; }
.admin-form-accordion[open] > summary { border-bottom:1px solid var(--border-light); }
.admin-form-accordion-body { padding:16px; }
.admin-settings-group { margin:12px 0; border:1px solid var(--border-light); border-radius:11px; overflow:hidden; }
.admin-settings-group > summary { display:flex; flex-direction:column; gap:4px; padding:12px 13px; background:var(--bg-main); cursor:pointer; list-style:none; }
.admin-settings-group > summary strong { font-size:12px; color:var(--text-main); }
.admin-settings-group > summary small { font-size:10px; color:var(--text-sec); line-height:1.4; }
.admin-settings-group[open] > summary { border-bottom:1px solid var(--border-light); }
.admin-settings-group-body { padding:12px; }
.admin-settings-group-body .input-group:last-child { margin-bottom:0; }
.admin-settings-group-body .admin-check-grid { margin-bottom:0; }
.admin-tahfiz-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-tahfiz-class-card { min-width:0; margin:0; padding:16px; border:1px solid var(--border-light); box-shadow:var(--shadow-sm); }
.admin-tahfiz-class-head { display:flex; align-items:center; gap:11px; }
.admin-tahfiz-class-head h3 { margin:0; color:var(--text-main); font-size:14px; }
.admin-tahfiz-class-head p { margin:4px 0 0; color:var(--text-sec); font-size:11px; }
.admin-tahfiz-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
.admin-tahfiz-metrics > div { display:flex; flex-direction:column; gap:5px; min-width:0; padding:10px; border-radius:10px; background:var(--bg-main); }
.admin-tahfiz-metrics strong { color:var(--text-main); font-size:21px; line-height:1.1; }
.admin-tahfiz-metrics span { color:var(--text-sec); font-size:10px; line-height:1.4; }
@media (max-width:1200px) { .admin-nav { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .admin-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-tahfiz-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px) {
  .admin-nav { display:grid; grid-template-columns:minmax(0,1fr); flex-wrap:initial; overflow:visible; }
  .admin-nav-group-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-nav-group .admin-nav-button { width:100%; min-width:0; }
  .admin-entity-group > summary { padding:12px; }
  .admin-entity-group-body { padding:0 8px 8px; }
  .admin-form-accordion-body { padding:12px; }
  .admin-tahfiz-metrics { gap:5px; }
  .admin-tahfiz-metrics > div { padding:8px 6px; }
  .admin-tahfiz-metrics strong { font-size:18px; }
}


/* Fase 4j: pengelompokan daftar Penugasan Guru. Aturan CSS sebelumnya tidak diubah. */
.admin-assignment-mode-card { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:15px 16px; border:1px solid var(--border-light); border-radius:13px; background:var(--surface); }
.admin-assignment-mode-card > div:first-child { min-width:180px; }
.admin-assignment-mode-card strong { display:block; color:var(--text-main); font-size:13px; }
.admin-assignment-mode-card p { margin:4px 0 0; color:var(--text-sec); font-size:11px; line-height:1.5; }
.admin-assignment-mode-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.admin-assignment-mode-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text-sec); font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.admin-assignment-mode-button.active { color:var(--primary-dark); border-color:rgba(5,150,105,.35); background:var(--primary-soft); }
.admin-assignment-mode-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.admin-assignment-type-group > summary .admin-group-main strong { display:flex; align-items:center; gap:7px; }
.admin-assignment-type-group > summary .admin-group-main strong i { color:var(--primary-dark); font-size:17px; }
@media (max-width:560px) { .admin-assignment-mode-card { align-items:stretch; } .admin-assignment-mode-buttons { display:grid; grid-template-columns:1fr; } .admin-assignment-mode-button { width:100%; } }