:root {
    color-scheme: light;
  }

  input, select, textarea {
    color-scheme: light;
  }

  /* Pengaturan dasar tombol: transisi warna & cursor disabled tanpa transform yang mengganggu tombol close */
  button {
    transition: background-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  button:disabled {
    cursor: not-allowed !important;
    opacity: 0.65;
  }


  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  /* Custom Multi-select Dropdown */
  .custom-dropdown-root {
    user-select: none;
  }
  .custom-dropdown-item:hover {
    background-color: #EFF6FF;
  }

  /* Sidebar Navigation Links */
  .nav-link {
    color: #64748b;
  }
  .nav-link:hover {
    color: #005BAA;
    background-color: #EFF6FF;
  }
  .nav-link.active {
    color: #ffffff;
    background-color: #005BAA;
    box-shadow: 0 3px 10px rgba(0, 91, 170, 0.25);
  }

  /* Sidebar Collapsed Mode */
  aside.sidebar-collapsed {
    width: 5rem !important;
  }
  aside.sidebar-collapsed .sidebar-text {
    display: none !important;
  }
  aside.sidebar-collapsed .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Tampilkan icon log aktivitas saat sidebar disembunyikan (collapsed) */
  aside.sidebar-collapsed #collapsedLogBadgeWrapper {
    display: flex !important;
  }

  /* Table Containers */
  .table-scroll-container {
    position: relative;
    border-radius: 0.75rem;
  }
  .table-scroll-container table {
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Sticky Headers: Bezetting Table */
  #rekapTable thead {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  #rekapTable thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #f1f5f9;
  }
  #rekapTable thead tr:nth-child(2) th {
    position: sticky;
    top: 31px;
    z-index: 20;
    background-color: #f1f5f9;
  }

  
  /* Sticky Headers: Pegawai Table */
  #pegawaiTable thead {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  #pegawaiTable thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #f1f5f9;
  }
  #pegawaiTable thead tr:nth-child(2) th {
    position: sticky;
    top: 31px;
    z-index: 20;
    background-color: #f1f5f9;
  }

  /* Sticky Headers: Kebutuhan Table */
  #kebutuhanTable thead {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  #kebutuhanTable thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #f1f5f9;
  }
  #kebutuhanTable thead tr:nth-child(2) th {
    position: sticky;
    top: 35px;
    z-index: 20;
    background-color: #f1f5f9;
  }

  /* Subrow & Accordion Styles */
  tr.jabatan-subrow,
  tr[class*="unit-keb-subrow-"] {
    background-color: #f8fafc;
  }

  .unit-header-row {
    cursor: pointer;
    user-select: none;
  }

  /* ========================================================
     EFEK SOROTAN KURSOR (HOVER) PADA TABEL DI SETIAP MENU
     Membuat baris tabel yang disorot kursor tampil jelas dan kontras
     ======================================================== */
  table tbody tr {
    /* Optimasi performa render: hilangkan transition per-baris agar scroll & filter tabel tetap ringan dan instan */
  }

  /* Sorotan jelas saat kursor menyorot baris data tabel di semua menu (Dioptimalkan untuk performa) */
  table tbody tr:not(.bg-slate-800):not(.bg-slate-900):not(.bg-blue-950):hover {
    background-color: #dbeafe !important;
  }
  table tbody tr:not(.bg-slate-800):not(.bg-slate-900):not(.bg-blue-950):hover > td {
    background-color: transparent !important;
  }

  /* Sorotan untuk baris sub-jabatan (Bezetting & Kebutuhan) */
  tr.jabatan-subrow:hover,
  tr[class*="unit-keb-subrow-"]:hover {
    background-color: #dbeafe !important;
  }
  tr.jabatan-subrow:hover > td,
  tr[class*="unit-keb-subrow-"]:hover > td {
    background-color: transparent !important;
  }

  /* Sorotan untuk baris header unit kerja (accordion) */
  .unit-header-row:hover {
    background-color: #bfdbfe !important;
  }
  .unit-header-row:hover > td {
    background-color: transparent !important;
  }

  /* Sorotan khusus untuk baris pegawai non-aktif / pensiun / mutasi */
  tbody tr[class*="bg-rose"]:hover {
    background-color: #fecdd3 !important;
  }
  tbody tr[class*="bg-rose"]:hover > td {
    background-color: transparent !important;
  }

  .stat-progress-bar {
    transition: width 0.6s ease-in-out;
  }

  /* Toast Notification */
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .toast-notification {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* =========================================================================
     ANIMASI PROSES LOADING MODERN PADA TOMBOL (REFRESH / SIMPAN / PROSES)
     ========================================================================= */
  .dual-ring-spinner {
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
  }
  /* Lingkaran track latar belakang */
  .dual-ring-spinner:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.2;
    box-sizing: border-box;
  }
  /* Busur putar aktif dengan animasi halus */
  .dual-ring-spinner:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: currentColor;
    animation: modern-btn-spin 0.65s linear infinite;
    box-sizing: border-box;
  }

  @keyframes modern-btn-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* =========================================================================
     EFEK BACKGROUND & ANIMASI HALUS HALAMAN LOGIN
     ========================================================================= */
  .login-bg-mesh {
    background-color: #0A192F;
    background-image: 
      radial-gradient(at 0% 0%, rgba(0, 91, 170, 0.45) 0px, transparent 50%),
      radial-gradient(at 100% 0%, rgba(2, 132, 199, 0.35) 0px, transparent 50%),
      radial-gradient(at 100% 100%, rgba(29, 78, 216, 0.4) 0px, transparent 50%),
      radial-gradient(at 0% 100%, rgba(10, 25, 47, 0.9) 0px, transparent 50%),
      radial-gradient(at 50% 50%, rgba(37, 99, 235, 0.15) 0px, transparent 65%);
    background-size: cover;
  }

  /* Pola grid transparan */
  .login-grid-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  /* Animasi melayang halus (Floating Orbs) */
  @keyframes floatSlow1 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(30px, -40px) scale(1.08); }
  }

  @keyframes floatSlow2 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(-35px, 35px) scale(1.12); }
  }

  @keyframes floatSlow3 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(25px, 30px) scale(0.95); }
  }

  .orb-1 {
    animation: floatSlow1 14s ease-in-out infinite;
  }
  .orb-2 {
    animation: floatSlow2 18s ease-in-out infinite;
  }
  .orb-3 {
    animation: floatSlow3 16s ease-in-out infinite;
  }

  /* Animasi fade in & slide up untuk Card */
  @keyframes loginCardEntry {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .login-fade-in {
    animation: loginCardEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* =========================================================================
     EFEK GLASSMORPHISM MURNI & SOFT FADE-IN
     ========================================================================= */
  .glass-login-card {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 20px 50px rgba(10, 25, 47, 0.25), 
                inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  }

  /* Animasi Masuk Halus */
  @keyframes softCardEntry {
    0% {
      opacity: 0;
      transform: translateY(24px) scale(0.98);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .login-card-animated {
    opacity: 0;
    animation: softCardEntry 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.15s;
    will-change: transform, opacity;
  }

  /* =========================================================================
     ANIMASI ILUSTRASI PEGAWAI BEKERJA DENGAN LAPTOP (HALAMAN LOGIN)
     ========================================================================= */
  @keyframes pegHeadBob {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(0.6deg); }
  }

  @keyframes pegTypeLeft {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
  }

  @keyframes pegTypeRight {
    0%, 100% { transform: translateY(-2.5px); }
    50% { transform: translateY(0.5px); }
  }

  @keyframes laptopGlowPulse {
    0%, 100% { opacity: 0.82; }
    50% { opacity: 1; }
  }

  @keyframes codeScroll {
    0% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(-2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0.9; }
  }

  @keyframes steamWave {
    0% { transform: translateY(0) scaleX(1); opacity: 0; }
    30% { opacity: 0.75; }
    70% { opacity: 0.35; }
    100% { transform: translateY(-10px) scaleX(1.3); opacity: 0; }
  }

  @keyframes floatCard1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-1.5deg); }
  }

  @keyframes floatCard2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
  }

  @keyframes barGrow {
    0%, 100% { height: 8px; y: 15px; }
    50% { height: 14px; y: 9px; }
  }

  .anim-head {
    transform-origin: 190px 105px;
    animation: pegHeadBob 4s ease-in-out infinite;
  }

  .anim-hand-left {
    transform-origin: 165px 175px;
    animation: pegTypeLeft 0.35s ease-in-out infinite;
  }

  .anim-hand-right {
    transform-origin: 215px 175px;
    animation: pegTypeRight 0.38s ease-in-out infinite;
  }

  .anim-laptop-screen {
    animation: laptopGlowPulse 2.5s ease-in-out infinite;
  }

  .anim-code-lines {
    animation: codeScroll 2s ease-in-out infinite;
  }

  .anim-steam-1 {
    animation: steamWave 2.4s ease-out infinite;
  }

  .anim-steam-2 {
    animation: steamWave 2.4s ease-out infinite 1.2s;
  }

  .anim-card-left {
    animation: floatCard1 4s ease-in-out infinite;
  }

  .anim-card-right {
    animation: floatCard2 4.5s ease-in-out infinite 0.5s;
  }

  .anim-bar-1 { animation: barGrow 1.8s ease-in-out infinite 0.1s; }
  .anim-bar-2 { animation: barGrow 2.2s ease-in-out infinite 0.4s; }
  .anim-bar-3 { animation: barGrow 1.6s ease-in-out infinite 0.7s; }

  /* =========================================================================
     CUSTOM SCROLLBAR MODAL DETAIL PEGAWAI (MENGIKUTI LENGKUNGAN MODAL ROUNDED-3XL)
     ========================================================================= */
  #detailPegawaiModal .modal-detail-card {
    border-radius: 1.5rem; /* 24px - rounded-3xl */
    overflow: hidden;
  }

  #detailPegawaiModal .modal-detail-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  /* Lebar scrollbar ramping elegan yang serasi */
  #detailPegawaiModal .modal-detail-scroll::-webkit-scrollbar {
    width: 7px;
  }

  /* Track scrollbar yang melengkung mengikuti sudut rounded-3xl modal */
  #detailPegawaiModal .modal-detail-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 6px;
    margin-bottom: 14px; /* Ruang lengkungan radius 24px di sudut kanan bawah modal */
    border-bottom-right-radius: 24px; /* Mengikuti radius lengkungan rounded-3xl */
    border-top-right-radius: 0px;
  }

  /* Thumb scrollbar kapsul bulat lembut mengikuti kontur lengkungan */
  #detailPegawaiModal .modal-detail-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 9999px; /* Bulat kapsul sempurna */
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
  }

  #detailPegawaiModal .modal-detail-scroll::-webkit-scrollbar-thumb:hover {
    background: #005BAA; /* Warna hijau Kemenag saat hover */
  }

  #detailPegawaiModal .modal-detail-scroll::-webkit-scrollbar-thumb:active {
    background: #004B9B;
  }


  /* =========================================================================
     TOMBOL CLOSE MODAL MODERN & ELEGAN (MICRO-INTERACTION ROTATE & GLOW)
     ========================================================================= */
  .btn-modal-close {
    width: 2.125rem;
    height: 2.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .btn-modal-close:hover {
    background-color: #e11d48;
    color: #ffffff;
    border-color: #e11d48;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
    transform: scale(1.05);
  }

  .btn-modal-close:hover svg,
  .btn-modal-close:hover i {
    transform: rotate(90deg);
  }

  .btn-modal-close:active {
    transform: scale(0.92);
  }

  .btn-modal-close svg,
  .btn-modal-close i {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 1.05rem;
    height: 1.05rem;
  }


    /* Optimasi Performa & Rendering Ringan */
  #loginSection.hidden {
    display: none !important;
  }

  /* Content-visibility untuk rendering cepat Peta Jabatan bertahap */
  #petaJabatanUnitsContainer > div {
    content-visibility: auto;
    contain-intrinsic-size: 650px;
  }

  /* Akselerasi perangkat keras untuk scroll lancar tanpa lag */
  .table-scroll-container,
  .modal-detail-scroll,
  .overflow-y-auto,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
  }

  /* Optimasi performa: nonaktifkan animasi latar & SVG saat halaman login tersembunyi */
  #loginSection.hidden,
  #loginSection.hidden * {
    animation: none !important;
  }

  .orb-1, .orb-2, .orb-3 {
    will-change: transform;
    transform: translateZ(0);
  }
/* ========================================================
     MOBILE & FULL-HEIGHT FIX UNTUK GOOGLE APPS SCRIPT IFRAME
     Menghilangkan celah / kotak putih di bawah layar ponsel
     baik di halaman login maupun setelah login (dashboard)
     ======================================================== */
  html, body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  html {
    background-color: #0A192F;
    height: -webkit-fill-available;
  }

  body {
    background-color: #0A192F;
    overflow: hidden;
  }

  /* Saat login berhasil (mode dashboard utama) */
  html.app-active,
  body.app-active {
    background-color: #F4F7F6 !important;
  }

  /* Kontainer login menutup layar penuh secara sempurna tanpa celah putih di bawah */
  #loginSection {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    background-color: #0A192F !important;
  }

  /* Kontainer aplikasi utama menutup layar penuh secara sempurna tanpa celah putih di bawah */
  #appSection {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    background-color: #F4F7F6 !important;
  }

  #sidebar {
    height: 100% !important;
    min-height: 100% !important;
  }

  #mainContentWrapper {
    height: 100% !important;
    min-height: 100% !important;
  }

  @media (max-width: 640px) {
    #loginUsername,
    #loginPassword {
      font-size: 16px !important;
    }
  }


  /* ========================================================
     RESPONSIVE MOBILE STYLING & VIEWPORT OPTIMIZATIONS
     ======================================================== */

  /* Mobile Sidebar Off-Canvas Navigation */
  @media (max-width: 767px) {
    #sidebar {
      position: fixed !important;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 50 !important;
      width: 17.5rem !important;
      max-width: 85vw !important;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    #sidebarToggleBtn {
      display: none !important;
    }

    #sidebar .sidebar-text {
      display: block !important;
    }

    #sidebar.sidebar-collapsed {
      width: 17.5rem !important;
    }

    /* Modal padding & bounds on mobile */
    .modal-detail-card,
    #confirmModal > div,
    #addPegawaiModal > div,
    #editPegawaiModal > div,
    #uploadArsipModal > div,
    #bulkUploadArsipModal > div,
    #editNamaArsipModal > div,
    #gantiBerkasArsipModal > div,
    #previewArsipModal > div,
    #addJabatanModal > div,
    #editJabatanModal > div,
    #addUserModal > div,
    #editUserModal > div {
      max-height: 94dvh !important;
      width: 95% !important;
      margin: auto !important;
    }

    /* Dropdown panel width on mobile */
    .custom-dropdown-root > div[id^="panel_"] {
      width: 100% !important;
      min-width: 15rem !important;
      max-width: calc(100vw - 2rem) !important;
    }
  }

  /* Prevent automatic iOS zoom when focusing inputs & selects */
  @media (max-width: 640px) {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
      font-size: 16px !important;
    }
  }

  /* Smooth touch scrolling for all tables & scroll areas */
  .table-scroll-container,
  .overflow-x-auto,
  .overflow-auto,
  .overflow-y-auto,
  #pegawaiTable,
  #rekapTable,
  #kebutuhanTable,
  #arsipTable {
    -webkit-overflow-scrolling: touch;
  }

  /* Safe Area Insets for notched displays */
  header {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  #sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }