/* ==================================================================== */
  /* 1. VARIABEL TEMA (DEFAULT / MODE TERANG)                             */
  /* ==================================================================== */
  :root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --bg-main: #f8fafc;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --table-th-bg: #f1f5f9;
  }

  /* ==================================================================== */
  /* 2. VARIABEL TEMA (SAAT CLASS .DARK AKTIF DI HTML)                    */
  /* ==================================================================== */
  html.dark {
    --bg-main: #0f172a;        /* bg-slate-900 */
    --sidebar-bg: #1e293b;     /* bg-slate-800 */
    --card-bg: #1e293b;        /* bg-slate-800 */
    --border-color: #334155;   /* border-slate-700 */
    --text-main: #f1f5f9;      /* text-slate-100 */
    --text-muted: #94a3b8;     /* text-slate-400 */
    --table-th-bg: #0f172a;    /* Header tabel jadi slate-900 */
  }

  /* ==================================================================== */
  /* 3. CORE STYLE & TOPBAR FIX (MENGGUNAKAN VARIABEL TEMA)               */
  /* ==================================================================== */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body, #mainApp, main, #contentArea {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    height: 100%;
  }

  /* Kunci structural elemen luar agar ikut berubah tema */
  header, .sidebar, aside {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
  }

  /* Card Dashboard */
  .ent-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--text-main) !important;
  }

  /* Sidebar Items */
  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 0px;
    color: var(--text-muted) !important;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
  }
  .sidebar-item:hover {
    background: #f1f5f9;
    color: var(--primary) !important;
  }
  html.dark .sidebar-item:hover {
    background: #1e293b;
  }
  .sidebar-item.active {
    background: #eff6ff;
    color: var(--primary) !important;
    font-weight: 600;
    border-right: 3px solid var(--primary);
  }
  html.dark .sidebar-item.active {
    background: #0f172a;
  }
  
  /* -------------------------------------------------------------------- */
  /* PERBAIKAN AKURAT & TOTAL: TOPBAR, LOGO AREA, & FORM ENGINE           */
  /* -------------------------------------------------------------------- */

  /* === KONDISI 1: JIKA APLIKASI DI MODE TERANG (html TANPA class .dark) === */

  /* Mengunci Semua Judul H1, H2, H3 di Area Konten Utama & Form agar Tetap Gelap Tegas */
  html:not(.dark) h1, 
  html:not(.dark) h2, 
  html:not(.dark) h3, 
  html:not(.dark) main h1,
  html:not(.dark) #contentArea h1,
  html:not(.dark) .text-2xl {
    color: #1e293b !important; /* Terkunci ke Slate-800, tidak akan memutih/hilang */
  }

  /* Mengunci Semua Input Text, Number, Select, & Textarea di Mode Terang agar Tetap Punya Border Jelas */
  html:not(.dark) .ent-input,
  html:not(.dark) input,
  html:not(.dark) select,
  html:not(.dark) textarea {
    background-color: #ffffff !important; /* Latar belakang input tetap putih murni */
    color: #334155 !important;            /* Teks ketikan tetap abu-abu gelap */
    border: 1px solid rgba(15, 23, 42, 0.28) !important; /* Garis kotak pembungkus (border) tetap tegas & kelihatan */
  }

  /* ==================================================================== */
  /* EFEK HOVER & FOCUS: BAYANGAN BIRU LEMBUT DI SEKELILING INPUT        */
  /* ==================================================================== */

  /* 1. Saat Kolom Disorot (Hover) - Garis Sedikit Menggelap */
  html:not(.dark) .ent-input:hover,
  html:not(.dark) input:hover,
  html:not(.dark) select:hover,
  html:not(.dark) textarea:hover {
    border-color: rgba(37, 99, 235, 0.45) !important; /* Biru primary transparan */
    outline: none !important;
  }

  /* 2. Saat Kolom Diklik (Focus) - Garis Biru Tegas + Bayangan Glow Tipis */
  html:not(.dark) .ent-input:focus,
  html:not(.dark) input:focus,
  html:not(.dark) select:focus,
  html:not(.dark) textarea:focus {
    border-color: var(--primary) !important;
    
    /* Menambahkan bayangan biru tipis (blur 4px, kepekatannya hanya 15%) */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important; 
    outline: none !important;
  }

  /* Pastikan transisinya halus saat berubah warna/bayangan */
  .ent-input, input, select, textarea {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  }

  /* Mengunci Tombol Kanan Topbar (Notifikasi & Bulan) agar Tetap Terang */
  html:not(.dark) header button,
  html:not(.dark) #themeBtn {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
  }

  /* === KONDISI 2: JIKA APLIKASI DI MODE GELAP (html DENGAN class .dark) === */
  html.dark header h1,
  html.dark main h1,
  html.dark #contentArea h1,
  html.dark .text-2xl,
  html.dark h2,
  html.dark h3 {
    color: #ffffff !important; /* Judul otomatis menyala putih bersih */
  }

  html.dark header button,
  html.dark #themeBtn {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
  }

  /* === PENGUNCIAN AREA LOGO KIRI ATAS (SIDEBAR) === */
  html:not(.dark) .p-6.border-b.bg-white {
    background-color: #ffffff !important; 
    border-color: #f1f5f9 !important;
  }
  html:not(.dark) .p-6.border-b.bg-white h2 {
    color: #1e293b !important; 
  }
  html:not(.dark) .p-6.border-b.bg-white p {
    color: #64748b !important; 
  }

  html.dark .p-6.border-b {
    background-color: #1e293b !important; 
    border-color: #334155 !important;
  }
  html.dark .p-6.border-b h2 {
    color: #ffffff !important; 
  }
  html.dark .p-6.border-b p {
    color: #94a3b8 !important;
  }

  /* ==================================================================== */
  /* TABEL DATA MANAGEMENT                                                */
  /* ==================================================================== */
  .ent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .ent-table thead th {
    background-color: var(--table-th-bg) !important;
    color: var(--text-main) !important;
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1.5px solid var(--border-color);
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    letter-spacing: 0.05em;
  }
  .ent-table tbody td {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
  }
  .ent-table tbody tr:hover td {
    background-color: var(--bg-main) !important;
  }
  .ent-table tbody td strong, .ent-table tbody td b, .text-slate-900 {
    color: var(--text-main) !important;
  }

  /* ==================================================================== */
  /* INPUTS & LABELS                                                      */
  /* ==================================================================== */
  .ent-input, select, textarea {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0px;
    padding: 8px 12px;
    transition: all 0.2s;
    width: 100%;
    font-size: 12px;
    height: 36px !important;
  }
  .ent-input:focus {
    outline: none;
    border-color: var(--primary) !important;
  }
  label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted) !important;
    margin-bottom: 4px;
  }

  /* Freeze Table Header Setup */
  .overflow-x-auto table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background-color: var(--table-th-bg) !important;
    border-bottom: 2px solid var(--border-color) !important;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
  }
  .overflow-x-auto {
    max-height: 75vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    display: block;
  }
  thead th { white-space: nowrap; }

  /* Date Picker Customization */
  input[type="date"] {
    line-height: normal;
    display: block !important;
    position: relative;
    text-align: left;
    padding-right: 35px !important;
  }
  input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 16px;
    height: 16px;
  }

  /* ==================================================================== */
  /* MODAL ENGINE & ACCENTS                                               */
  /* ==================================================================== */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  
  /* Kotak Judul Biru di Detail Modal */
  .bg-blue-50, #modalViewLPP .bg-blue-50, .fixed .bg-blue-50 {
    background-color: var(--bg-main) !important;
    border-left: 4px solid var(--primary) !important;
  }

  /* Badges & Tables Status */
  html.dark table td span[class*="bg-green"],
  html.dark table td span[class*="text-green"] {
      background-color: rgba(6, 78, 59, 0.6) !important;
      color: #34d399 !important;
      border: 1px solid #064e3b !important;
  }
  html.dark table td span.txt-belum-ada {
      background-color: transparent !important;
      color: #64748b !important;
  }

  /* Animations & Utility */
  @keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
  .fade-in { animation: fadeIn 0.2s ease forwards; }

  .btn-primary {
    background: var(--primary);
    color: white !important;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .btn-primary:hover { background: var(--primary-dark); }

  select.ent-input {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%2364748b' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
  }
  .sidebar-item i { flex-shrink: 0; transition: color 0.2s ease; }
  .sidebar-item:hover i, .sidebar-item.active i { color: var(--primary) !important; }

  #modalSuket.hidden { display: none !important; }
  #modalSuket:not(.hidden) {
    display: flex !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  #suketContent {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    width: 95%;
    max-width: 1100px;
    max-height: 95vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
  /* ==================================================================== */
  /* FORCE DARK MODE UNTUK SIDEBAR LOGO AREA (KIRI ATAS)                  */
  /* ==================================================================== */
  html.dark aside > div:first-child,
  html.dark .sidebar > div:first-child,
  html.dark [class*="sidebar"] > div:first-child {
    background-color: #1e293b !important; /* Paksa latar belakang menjadi slate-800 */
    border-color: #334155 !important;     /* Paksa border bawah menjadi slate-700 */
  }

  html.dark div:first-child h3,
  html.dark div:first-child h2 {
    color: #ffffff !important;            /* Paksa tulisan "Training" menjadi putih */
  }

  html.dark div:first-child p {
    color: #94a3b8 !important;            /* Paksa tulisan sub-header menjadi abu-abu terang */
  }
  /* ==================================================================== */
  /* FIXING PACK BOX FORM INPUT AKTIVITAS SAAT MODE MALAM                 */
  /* ==================================================================== */
  html.dark main .bg-white,
  html.dark #contentArea .bg-white,
  html.dark form > div.bg-white {
    background-color: #1e293b !important; /* Paksa box putih aktivitas jadi slate-800 */
    border-color: #334155 !important;     /* Ubah border luarnya jadi slate-700 */
    color: #f1f5f9 !important;
  }

  /* Menjinakkan teks label bawaan form agar tidak ikut redup/salah warna */
  html.dark main .bg-white label,
  html.dark #contentArea .bg-white label {
    color: #94a3b8 !important;            /* Judul input (Tanggal, Nama Trainer, dll) jadi soft */
  }

  /* Memastikan area background di balik select/input dropdown di dalam form ikut legam */
  html.dark main select, 
  html.dark main input, 
  html.dark main textarea {
    background-color: #0f172a !important; /* Latar input box jadi slate-900 pekat */
    color: #ffffff !important;
    border-color: #475569 !important;
  }
  
  /* ==================================================================== */
  /* FIX MUTLAK: MEMBUANG BACKGROUND PUTIH DI DALAM TEKS TANGGAL CHROM    */
  /* ==================================================================== */

  /* 1. Paksa area teks input tanggal di filter dashboard menjadi transparan murni */
  #dashStart, 
  #dashEnd,
  #dashStart::-webkit-datetime-edit,
  #dashEnd::-webkit-datetime-edit,
  #dashStart::-webkit-datetime-edit-fields-wrapper,
  #dashEnd::-webkit-datetime-edit-fields-wrapper,
  #dashStart::-webkit-datetime-edit-text,
  #dashEnd::-webkit-datetime-edit-text,
  #dashStart::-webkit-datetime-edit-month-field,
  #dashEnd::-webkit-datetime-edit-month-field,
  #dashStart::-webkit-datetime-edit-day-field,
  #dashEnd::-webkit-datetime-edit-day-field,
  #dashStart::-webkit-datetime-edit-year-field,
  #dashEnd::-webkit-datetime-edit-year-field {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 2. Mengamankan warna teks tanggal agar tetap kontras mengikuti mode aktif */
  html:not(.dark) #dashStart, 
  html:not(.dark) #dashEnd {
    color: #334155 !important; /* Abu-abu gelap tegas di mode terang */
  }

  html.dark #dashStart, 
  html.dark #dashEnd {
    color: #f1f5f9 !important; /* Putih bersih di mode malam */
  }

  /* PAKSA GARIS SAMPING SIDEBAR MUNCUL TEGAS */
  aside.sidebar, .sidebar {
    border-right: 1px solid var(--border-color) !important;
  }

  /* FIX KOTAK TANGGAL HEADER POJOK KANAN ATAS */
  #clockHeader {
    background-color: var(--sidebar-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
  }

  /* ATURAN WARNA IKON TOMBOL MODE MALAM */
  html:not(.dark) #themeIcon {
    color: #475569 !important; /* Abu-abu gelap elegan saat siang */
  }

  html.dark #themeIcon {
    color: #f59e0b !important; /* Kuning emas menyala saat malam */
  }

  @media print {
      /* 1. Sembunyikan seluruh isi halaman web/aplikasi */
      body * {
          visibility: hidden;
      }

      /* 2. Hanya tampilkan area sertifikat (#printArea) dan semua anaknya */
      #printArea, #printArea * {
          visibility: visible;
      }

      /* 3. Atur posisi #printArea agar pas di halaman cetak bersih tanpa bayangan (shadow) */
      #printArea {
          position: absolute;
          left: 0;
          top: 0;
          width: 210mm; /* Standar Lebar A4 */
          min-height: 297mm; /* Standar Tinggi A4 */
          
          /* EDIT DI SINI: Pecah padding-nya agar sisi atas bisa diatur sendiri */
          padding-top: 5mm !important;     /* Jarak dari ujung kertas atas (perkecil sesuai selera, misal 5mm atau 3mm) */
          padding-right: 15mm !important;   /* Jarak dari sisi kanan kertas */
          padding-bottom: 15mm !important;  /* Jarak dari sisi bawah kertas */
          padding-left: 15mm !important;    /* Jarak dari sisi kiri kertas */
          
          margin: 0 !important;
          box-shadow: none !important;
      }

      /* 4. Sembunyikan header & footer bawaan browser (seperti tanggal & URL di bawah layar) */
      @page {
          size: A4;
          margin: 0; /* Menghilangkan info URL dan tanggal otomatis dari browser */
      }
  }