/* =========================================================================
   ISD ZONE — Dashboard layout (sidebar + topbar + konten)
   File mandiri, variabel warna didefinisikan ulang di sini supaya tidak
   bergantung pada struktur style.css situs utama yang mungkin berubah.
   ========================================================================= */

:root {
  --zone-red: #DF0024;
  --zone-red-dark: #9C0019;
  --zone-red-50: #FCEBED;
  --zone-black: #0D0D0D;
  --zone-charcoal: #1C1C1C;
  --zone-silver: #E7E7EA;
  --zone-gray: #6B6B6B;
  --zone-bg: #F4F5F7;
  --zone-sidebar-w: 264px;
  --zone-topbar-h: 64px;
  
  /* --- Brand Red scale --- */
  --isd-red-50:  #FCEBED;
  --isd-red-100: #F9CCD3;
  --isd-red-300: #EA5971;
  --isd-red:     #DF0024;   /* primary brand red (dari logo) */
  --isd-red-600: #C4001F;
  --isd-red-700: #9C0019;   /* maroon / hover-active */
  --isd-red-900: #5E000F;

  /* --- Brand Black / Ink scale --- */
  --isd-black:     #0D0D0D; /* brand black (dari logo) */
  --isd-charcoal:  #2B2B2B; /* secondary dark surface */
  --isd-gray:      #6B6B6B; /* neutral body text sekunder */

  /* --- Netral bertema "es & perak" (skating) --- */
  --isd-silver:    #E7E7EA; /* border / divider terang */
  --isd-ice:       #F5F7FA; /* section background terang */
  --isd-white:     #FFFFFF;

  /* --- Tambahan Warna Pelengkap --- */
  --isd-blue:       #0082C8; /* Ice/Sport Blue - kontras sejuk untuk merah */
  --isd-blue-700:   #005F96;
  --isd-shadow-blue: 0 10px 24px rgba(0, 130, 200, 0.28);

  --isd-gold:       #D4AF37; /* Medal Gold - untuk highlight/prestasi/pendaftaran */
  --isd-gold-700:   #B5952F;
  --isd-shadow-gold: 0 10px 24px rgba(212, 175, 55, 0.28);

  /* --- Semantic tokens --- */
  --isd-font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --isd-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --isd-radius: 10px;
  --isd-shadow-sm: 0 2px 8px rgba(13,13,13,.06);
  --isd-shadow-md: 0 10px 30px rgba(13,13,13,.12);
  --isd-shadow-red: 0 10px 24px rgba(223,0,36,.28);

  --isd-skew: -8deg; /* sudut diagonal signature ISD, mengikuti garis miring logo */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.isd-zone-body {
  margin: 0;
  background: var(--zone-bg);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--zone-black);
}



.isd-zone-wrap {
  display: flex;
  min-height: 100vh;
}

/* -------------------------------------------------------------------------
   SIDEBAR
------------------------------------------------------------------------- */
.isd-zone-sidebar {
  width: var(--zone-sidebar-w);
  flex-shrink: 0;
  background: var(--zone-black);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1050;
  transition: transform .25s ease;
}

.isd-zone-sidebar-top {
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.isd-zone-brand img { height: 34px; }

.isd-zone-nav {
  flex: 1;
  padding: 1.1rem .9rem;
  overflow-y: auto;
}

.isd-zone-nav-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  margin-bottom: .3rem;
  transition: background .15s ease, color .15s ease;
}
.isd-zone-nav-link i { width: 18px; text-align: center; font-size: .95rem; }
.isd-zone-nav-link > span:not(.isd-zone-nav-badge) { flex: 1; }

.isd-zone-nav-badge {
  background: var(--zone-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .35rem;
  flex-shrink: 0;
}
.isd-zone-nav-link.active .isd-zone-nav-badge {
  background: rgba(255,255,255,.25);
}

.isd-zone-nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.isd-zone-nav-link.active {
  background: var(--zone-red);
  color: #fff;
}

.isd-zone-sidebar-bottom {
  padding: 1rem .9rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.isd-zone-nav-link.isd-zone-back {
  color: rgba(255,255,255,.55);
  font-size: .82rem;
  margin-bottom: .8rem;
}
.isd-zone-nav-link.isd-zone-back:hover { color: #fff; background: rgba(255,255,255,.06); }

.isd-zone-user {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: .6rem .7rem;
}

.isd-zone-user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zone-red) 0%, var(--zone-black) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
}

.isd-zone-foto-avatar {
  padding : 0.2rem;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--zone-silver) 0%, var(--zone-silver) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
}

.isd-zone-profil-avatar {
  padding : 0.2rem;
  width: 64px; height: 100%;
  max-width: 64px;
  border-radius: 10px;
  border: 1px solid var(--zone-silver); 
  flex-shrink: 0;
}

.isd-zone-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.isd-zone-user-info .name {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.isd-zone-user-info .role {
  font-size: .74rem;
  color: var(--zone-red-50);
  opacity: .8;
}

.isd-zone-logout {
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
  padding: .4rem;
  border-radius: 6px;
}
.isd-zone-logout:hover { color: #fff; background: rgba(255,255,255,.1); }

.isd-zone-nav-toggle {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(255,255,255,.38);
  padding: 1.1rem .9rem .4rem;
  cursor: pointer;
  transition: color .15s ease;
}
.isd-zone-nav-toggle:hover { color: rgba(255,255,255,.65); }
.isd-zone-nav-toggle:first-child { padding-top: .2rem; }
.isd-zone-nav-toggle i {
  font-size: .65rem;
  transition: transform .2s ease;
}
.isd-zone-nav-toggle.is-open i { transform: rotate(180deg); }

.isd-zone-nav-group {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.isd-zone-nav-group.is-open {
  max-height: 600px;
}

/* -------------------------------------------------------------------------
   MAIN AREA (topbar + content)
------------------------------------------------------------------------- */
.isd-zone-main {
  flex: 1;
  margin-left: var(--zone-sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.isd-zone-topbar {
  height: var(--zone-topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--zone-silver);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.isd-zone-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--zone-black);
  padding: .3rem .5rem;
  border-radius: 6px;
}
.isd-zone-toggle:hover { background: var(--zone-bg); }

.isd-zone-page-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

.isd-zone-content {
  padding: 1.6rem;
  flex: 1;
}

.isd-zone-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,13,13,.5);
  z-index: 1040;
}
.isd-zone-overlay.show { display: block; }

/* -------------------------------------------------------------------------
   3. UTILITY WARNA CUSTOM
   Pola penamaan mengikuti Bootstrap: bg-red, text-red, border-red, dst.
   Tersedia: red, maroon, black, charcoal, gray, silver, ice
------------------------------------------------------------------------- */

/* ---- Background ---- */
.bg-red        { background-color: var(--isd-red)      !important; }
.bg-maroon     { background-color: var(--isd-red-700)   !important; }
.bg-black      { background-color: var(--isd-black)     !important; }
.bg-charcoal   { background-color: var(--isd-charcoal)  !important; }
.bg-gray       { background-color: var(--isd-gray)      !important; }
.bg-silver     { background-color: var(--isd-silver)    !important; }
.bg-ice        { background-color: var(--isd-ice)       !important; }

/* ---- Background subtle (versi terang, untuk badge / alert / section) ---- */
.bg-red-subtle     { background-color: var(--isd-red-50)  !important; }
.bg-black-subtle   { background-color: #F0F0F0            !important; }

/* ---- Background gradient (dipakai di hero / CTA) ---- */
.bg-gradient-red   { background: linear-gradient(135deg, var(--isd-red) 0%, var(--isd-red-700) 100%) !important; }
.bg-gradient-dark  { background: linear-gradient(135deg, var(--isd-charcoal) 0%, var(--isd-black) 100%) !important; }

/* ---- Text ---- */
.text-red      { color: var(--isd-red)      !important; }
.text-maroon   { color: var(--isd-red-700)  !important; }
.text-black    { color: var(--isd-black)    !important; }
.text-charcoal { color: var(--isd-charcoal) !important; }
.text-gray     { color: var(--isd-gray)     !important; }
.text-silver   { color: var(--isd-silver)   !important; }
.text-ice      { color: var(--isd-ice)      !important; }

/* ---- Border ---- */
.border-red      { border-color: var(--isd-red)      !important; }
.border-maroon   { border-color: var(--isd-red-700)  !important; }
.border-black    { border-color: var(--isd-black)    !important; }
.border-charcoal { border-color: var(--isd-charcoal) !important; }
.border-gray     { border-color: var(--isd-gray)     !important; }
.border-silver   { border-color: var(--isd-silver)   !important; }

.border-thick    { border-width: 3px !important; }


/* -------------------------------------------------------------------------
   KOMPONEN KONTEN (dipakai di dashboard.php, profil.php, pengaturan.php)
------------------------------------------------------------------------- */
.isd-zone-welcome h2 { font-weight: 800; margin-bottom: .2rem; }

.isd-zone-card {
  background: #fff;
  border: 1px solid var(--zone-silver);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 8px rgba(13,13,13,.04);
}

.isd-zone-stat {
  background: #fff;
  border: 1px solid var(--zone-silver);
  border-radius: 12px;
  padding: 1.3rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.isd-zone-stat-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: var(--zone-red-50);
  color: var(--zone-red);
}
.isd-zone-stat-icon.dark { background: #eee; color: var(--zone-black); }
.isd-zone-stat .num {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: .5px;
}
.isd-zone-stat .label { font-size: .8rem; color: var(--zone-gray); font-weight: 600; }

.isd-zone-module {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zone-silver);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  height: 100%;
  position: relative;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.isd-zone-module:hover {
  border-color: var(--zone-red);
  box-shadow: var(--isd-shadow-sm, 0 2px 8px rgba(13,13,13,.06));
  transform: translateY(-1px);
  color: inherit;
}
.isd-zone-module .badge-soon {
  position: absolute; top: .9rem; right: .9rem;
  font-size: .68rem; font-weight: 700;
  background: var(--zone-red-50); color: var(--zone-red-dark);
  padding: .25rem .55rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .4px;
}
.isd-zone-module i.mod-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--zone-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--zone-black);
  margin-bottom: .8rem;
}
.isd-zone-module h6 { font-weight: 700; margin-bottom: .2rem; }
.isd-zone-module p { font-size: .82rem; color: var(--zone-gray); margin-bottom: 0; }

.isd-zone-form-label { font-size: .85rem; font-weight: 700; }
.isd-zone-form .form-control,
.isd-zone-form .form-select {
  border-color: var(--zone-silver);
  border-radius: 8px;
  padding: .6rem .85rem;
}
.isd-zone-form .form-control:focus,
.isd-zone-form .form-select:focus {
  border-color: var(--zone-red);
  box-shadow: 0 0 0 .2rem rgba(223,0,36,.15);
}
.isd-maintenance-banner {
  background: #FFF3CD;
  color: #664D03;
  border-bottom: 1px solid #FFE69C;
  padding: .7rem 1.5rem;
  font-size: .88rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.isd-maintenance-banner a { color: #664D03; font-weight: 700; }

/* ---- Select2 disesuaikan supaya senada dengan form Bootstrap kita ---- */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 1.2rem + 2px) !important;
  border: 1px solid var(--zone-silver) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: .85rem !important;
  line-height: normal !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: .5rem !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--zone-red) !important;
  box-shadow: 0 0 0 .2rem rgba(223,0,36,.15);
}
.select2-dropdown {
  border-color: var(--zone-silver) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--zone-red) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--zone-silver) !important;
  border-radius: 6px !important;
  padding: .4rem .6rem !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--zone-red) !important;
}

.btn-zone-red, .btn-zone-outline {
  text-decoration: none;
}

.btn-zone-red {
  background: var(--zone-red);
  border: 2px solid var(--zone-red);
  color: #fff;
  font-weight: 700;
  padding: .6rem 1.4rem;
  border-radius: 8px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-zone-red:hover {
  background: var(--zone-red-dark);
  border-color: var(--zone-red-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-zone-outline {
  background: transparent;
  border: 2px solid var(--zone-silver);
  color: var(--zone-black);
  font-weight: 700;
  padding: .6rem 1.4rem;
  border-radius: 8px;
}
.btn-zone-outline:hover { background: var(--zone-bg); }

/* ---- Solid: btn-zone-black ---- */
.btn-zone-black {
  background-color: var(--isd-black);
  border: 2px solid var(--isd-black);
  color: var(--isd-white);
}
.btn-zone-black:hover,
.btn-zone-black:focus-visible {
  background-color: var(--isd-charcoal);
  border-color: var(--isd-charcoal);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Outline: btn-zone-outline-black ---- */
.btn-zone-outline-black {
  background-color: transparent;
  border: 2px solid var(--isd-black);
  color: var(--isd-black);
}
.btn-zone-outline-black:hover,
.btn-zone-outline-black:focus-visible {
  background-color: var(--isd-black);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Outline khusus di atas latar gelap: btn-zone-outline-white ---- */
.btn-zone-outline-white {
  background-color: transparent;
  border: 2px solid var(--isd-white);
  color: var(--isd-white);
}
.btn-zone-outline-white:hover,
.btn-zone-outline-white:focus-visible {
  background-color: var(--isd-white);
  color: var(--isd-black);
  transform: translateY(-2px);
}

/* ---- Solid: btn-zone-white (dipakai di atas hero merah/hitam) ---- */
.btn-zone-white {
  background-color: var(--isd-white);
  border: 2px solid var(--isd-white);
  color: var(--isd-black);
}
.btn-zone-white:hover,
.btn-zone-white:focus-visible {
  background-color: var(--isd-ice);
  color: var(--isd-black);
  transform: translateY(-2px);
}

/* ---- Solid: btn-zone-charcoal (Alternatif gelap yang lebih lembut dari hitam) ---- */
.btn-zone-charcoal {
  background-color: var(--isd-charcoal);
  border: 2px solid var(--isd-charcoal);
  color: var(--isd-white);
}
.btn-zone-charcoal:hover,
.btn-zone-charcoal:focus-visible {
  background-color: var(--isd-black);
  border-color: var(--isd-black);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Outline: btn-zone-outline-charcoal ---- */
.btn-zone-outline-charcoal {
  background-color: transparent;
  border: 2px solid var(--isd-charcoal);
  color: var(--isd-charcoal);
}
.btn-zone-outline-charcoal:hover,
.btn-zone-outline-charcoal:focus-visible {
  background-color: var(--isd-charcoal);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Solid: btn-zone-gray (Tombol netral / sekunder) ---- */
.btn-zone-gray {
  background-color: var(--isd-gray);
  border: 2px solid var(--isd-gray);
  color: var(--isd-white);
}
.btn-zone-gray:hover,
.btn-zone-gray:focus-visible {
  background-color: var(--isd-charcoal);
  border-color: var(--isd-charcoal);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Outline: btn-zone-outline-gray ---- */
.btn-zone-outline-gray {
  background-color: transparent;
  border: 2px solid var(--isd-gray);
  color: var(--isd-gray);
}
.btn-zone-outline-gray:hover,
.btn-zone-outline-gray:focus-visible {
  background-color: var(--isd-gray);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Solid: btn-zone-silver (Tombol terang / disabled-look) ---- */
.btn-zone-silver {
  background-color: var(--isd-silver);
  border: 2px solid var(--isd-silver);
  color: var(--isd-black);
}
.btn-zone-silver:hover,
.btn-zone-silver:focus-visible {
  background-color: var(--isd-gray);
  border-color: var(--isd-gray);
  color: var(--isd-white);
  transform: translateY(-2px);
}
/* ---- Solid: btn-zone-blue (Ice Blue) ---- */
.btn-zone-blue {
  background-color: var(--isd-blue);
  border: 2px solid var(--isd-blue);
  color: var(--isd-white);
}
.btn-zone-blue:hover,
.btn-zone-blue:focus-visible {
  background-color: var(--isd-blue-700);
  border-color: var(--isd-blue-700);
  color: var(--isd-white);
  box-shadow: var(--isd-shadow-blue);
  transform: translateY(-2px);
}

/* ---- Outline: btn-zone-outline-blue ---- */
.btn-zone-outline-blue {
  background-color: transparent;
  border: 2px solid var(--isd-blue);
  color: var(--isd-blue);
}
.btn-zone-outline-blue:hover,
.btn-zone-outline-blue:focus-visible {
  background-color: var(--isd-blue);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Solid: btn-zone-gold (Medal Gold) ---- */
.btn-zone-gold {
  background-color: var(--isd-gold);
  border: 2px solid var(--isd-gold);
  color: var(--isd-white);
}
.btn-zone-gold:hover,
.btn-zone-gold:focus-visible {
  background-color: var(--isd-gold-700);
  border-color: var(--isd-gold-700);
  color: var(--isd-white);
  box-shadow: var(--isd-shadow-gold);
  transform: translateY(-2px);
}

/* ---- Outline: btn-zone-outline-gold ---- */
.btn-zone-outline-gold {
  background-color: transparent;
  border: 2px solid var(--isd-gold);
  color: var(--isd-gold);
}
.btn-zone-outline-gold:hover,
.btn-zone-outline-gold:focus-visible {
  background-color: var(--isd-gold);
  color: var(--isd-white);
  transform: translateY(-2px);
}
/* -------------------------------------------------------------------------
   RESPONSIVE — sidebar jadi off-canvas di layar kecil
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .isd-zone-sidebar {
    transform: translateX(-100%);
  }
  .isd-zone-sidebar.show {
    transform: translateX(0);
  }
  .isd-zone-main {
    margin-left: 0;
  }
  .isd-zone-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .isd-zone-content { padding: 1.1rem; }
  .isd-zone-topbar { padding: 0 1rem; }
}

/* -------------------------------------------------------------------------
   DATATABLE — loading
------------------------------------------------------------------------- */
/* 1. Berikan tinggi minimal pada area tabel (sesuaikan angkanya dengan kebutuhan, misal tinggi 10 baris data) */
  .nia-datatable-headers {
    min-height: 300px; 
    position: relative;
  }

  div.dataTables_processing {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .dataTables_wrapper {
    position: relative;
    min-height: 400px; /* Sesuaikan tingginya sesuai selera */
  }

  .dataTables_wrapper .dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important; /* Menghilangkan background putih bawaan datatables */
    box-shadow: none !important; /* Menghilangkan efek kotak bawaan */
    border: none !important;
    z-index: 1050 !important; /* Memastikan posisinya berada di atas tabel */
  }

    /* ===== Styling paging DataTables mengikuti tema warna ISD ===== */
   .dataTables_info {
    color: var(--isd-gray, #6B6B6B);
    font-size: .875rem;
  }

   .dataTables_length select {
    border: 1px solid var(--isd-silver, #E7E7EA);
    border-radius: 6px;
    padding: .25rem .5rem;
    color: var(--isd-charcoal, #2B2B2B);
  }
   .dataTables_length select:focus {
    outline: none;
    border-color: var(--isd-red, #DF0024);
    box-shadow: 0 0 0 .15rem rgba(223, 0, 36, .15);
  }

   .dataTables_paginate {
    margin-top: 1rem;
  }

  /* dataTables.bootstrap5 merender paging pakai komponen Bootstrap
     (.pagination > .page-item > .page-link), bukan .paginate_button
     versi DataTables classic -- jadi target selector-nya harus ini. */
   .pagination .page-link {
    color: var(--isd-charcoal, #2B2B2B);
    border-color: var(--isd-silver, #E7E7EA);
    margin-left: .25rem;
    border-radius: 8px !important;
    transition: all .15s ease;
  }
   .pagination .page-link:hover {
    background: var(--isd-red-50, #FCEBED);
    border-color: var(--isd-red-300, #EA5971);
    color: var(--isd-red, #DF0024);
  }
   .pagination .page-link:focus {
    z-index: 1;
    box-shadow: 0 0 0 .15rem rgba(223, 0, 36, .15);
  }
   .pagination .page-item.active .page-link {
    background-color: var(--isd-red, #DF0024);
    border-color: var(--isd-red, #DF0024);
    color: var(--isd-white, #fff);
    box-shadow: var(--isd-shadow-red, 0 10px 24px rgba(223,0,36,.28));
  }
   .pagination .page-item.disabled .page-link {
    color: var(--isd-gray, #6B6B6B);
    background: var(--isd-ice, #F5F7FA);
    border-color: var(--isd-silver, #E7E7EA);
    opacity: .6;
  }

.isd-foto-viewport {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    background: #000;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none; /* biar gestur scroll/zoom bawaan browser tidak bentrok drag manual */
}

.isd-foto-viewport.isd-dragging {
    cursor: grabbing;
}

.isd-foto-viewport img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    transform-origin: center center; 
    user-select: none;
    -webkit-user-drag: none;
    transition: transform .15s ease-out;
    will-change: transform;
}

.isd-foto-viewport.isd-dragging img {
    transition: none; /* drag harus instan, tanpa delay transisi */
}
.isd-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--zone-silver);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 260px;
    overflow-y: auto;
}
.isd-search-dropdown a {
    display: block;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--zone-charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--zone-ice);
}
.isd-search-dropdown a:hover { background: var(--zone-ice); }
.isd-search-dropdown .isd-search-tipe {
    font-size: .7rem;
    text-transform: uppercase;
    color: var(--zone-gray);
    font-weight: 600;
}