/* ==========================================================================
   WORKSTATION ADMIN TEATER Q - MASTER STYLESHEET (css/admin_style.css)
   Professional Dark Slate Workstation with Royal Gold & Navy Accents
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Cinzel+Decorative:wght@700;900&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --bg-main: #020617;
  --bg-card: #090e1f;
  --bg-sidebar: #050a1b;
  --bg-surface: #0f172a;
  --border-subtle: rgba(148, 163, 184, 0.15);
  --border-active: rgba(245, 158, 11, 0.4);
  --text-main: #f8fafc;
  --text-body: #cbd5e1;
  --text-muted: #64748b;
  --color-gold: #f59e0b;
  --color-blue: #3b82f6;
  --color-emerald: #10b981;
  --color-rose: #f43f5e;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-body);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}


/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}

/* ==========================================================================
   THEATRICAL ARTISTIC BRANDING (SIDEBAR & WORKSTATION)
   ========================================================================== */
.font-cinzel {
  font-family: 'Cinzel', serif;
}
.font-cinzel-decorative {
  font-family: 'Cinzel Decorative', serif;
}
.font-playfair {
  font-family: 'Playfair Display', serif;
}

.brand-theatrical-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  user-select: none;
}

.brand-theatrical-logo {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 9999px;
  padding: 1px;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 60%, #7e22ce 100%);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-theatrical-link:hover .brand-theatrical-logo,
.brand-theatrical-logo:hover {
  transform: scale(1.04);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
  background: linear-gradient(135deg, #d8b4fe 0%, #a855f7 100%);
}

.brand-theatrical-logo-inner {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
}

.brand-theatrical-logo-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9999px;
  display: block;
  transition: transform 0.3s ease;
}

.brand-theatrical-link:hover .brand-theatrical-logo-inner img {
  transform: scale(1.06);
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.brand-title-main {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: #f8fafc;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: color 0.25s ease;
}

.brand-title-main .word-teater {
  background: linear-gradient(180deg, #ffffff 20%, #e2e8f0 70%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.16em;
}

.brand-title-main .letter-q {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.25rem;
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 45%, #d97706 80%, #92400e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.45));
  padding-left: 2px;
}

.brand-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fbbf24;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  width: fit-content;
}

.brand-title-badge i {
  font-size: 0.5625rem;
  color: #f59e0b;
}

/* ==========================================================================
   SIDEBAR NAVIGASI (DESKTOP FIXED WORKSPACE)
   ========================================================================== */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: linear-gradient(to bottom, #070d22 0%, #030712 100%);
  border-right: 1px solid var(--border-subtle);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@media (max-width: 1023px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }
  .admin-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
  }
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #94a3b8;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sidebar-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-link.active {
  color: #fbbf24;
  background-color: rgba(245, 158, 11, 0.12);
  border-left: 3px solid #f59e0b;
}

/* Sidebar Accordion Group */
.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all 0.2s ease;
  user-select: none;
}

.nav-group-header:hover {
  color: #cbd5e1;
  background-color: rgba(255, 255, 255, 0.03);
}

.nav-group-header .chevron-icon {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.nav-group.open .nav-group-header {
  color: #e2e8f0;
}

.nav-group.open .chevron-icon {
  transform: rotate(180deg);
}

.nav-group-content {
  display: none;
  padding-left: 0.35rem;
  margin-top: 0.25rem;
}

.nav-group.open .nav-group-content {
  display: block;
}

.sidebar-sublink {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.785rem;
  font-weight: 500;
  color: #94a3b8;
  transition: all 0.15s ease;
}

.sidebar-sublink:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-sublink.active {
  color: #fbbf24;
  font-weight: 700;
  background-color: rgba(245, 158, 11, 0.12);
  border-left: 2.5px solid #f59e0b;
}

/* Tombol Cepat Basis Data Server di Navigasi Sidebar */
.sidebar-db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin-left: auto;
  opacity: 0.35;
  color: #64748b;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.sidebar-link:hover .sidebar-db-btn,
.sidebar-sublink:hover .sidebar-db-btn {
  opacity: 0.8;
  color: #94a3b8;
}

.sidebar-db-btn:hover {
  opacity: 1 !important;
  color: #34d399 !important; /* emerald-400 */
  background-color: rgba(16, 185, 129, 0.18) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
  transform: scale(1.15);
}

/* Sembunyikan ikon akses database di sidebar pada mode mobile */
@media (max-width: 1023px) {
  .sidebar-db-btn {
    display: none !important;
  }
}

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */
.admin-main-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease, width 0.25s ease;
  min-width: 0;
}

@media (min-width: 1024px) {
  .admin-main-wrapper {
    margin-left: 260px;
    width: calc(100% - 260px);
    max-width: calc(100% - 260px);
  }
}

@media (max-width: 1023px) {
  .admin-main-wrapper {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Top App Bar (Fixed Header) */
#topbarContainer {
  height: 64px;
  flex-shrink: 0;
  width: 100%;
}

.admin-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  z-index: 35;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

@media (min-width: 1024px) {
  .admin-topbar {
    left: 260px;
  }
}

/* Workstation Card */
.work-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  max-width: 100%;
  min-width: 0;
}

.work-card:hover {
  border-color: rgba(148, 163, 184, 0.3);
}

main.flex-1 {
  min-width: 0;
  width: 100%;
}

/* Container Tabel Responsif & Scrollable */
.table-container,
.table-scroll-container,
div.overflow-x-auto {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* ==========================================================================
   MOBILE-FIRST WORKSTATION & KPI RESPONSIVENESS (< 640px)
   Optimalisasi tampilan mobile: mencegah teks terpotong (truncate) & meluap (overflow)
   ========================================================================== */
@media (max-width: 639px) {
  /* Optimalkan padding kontainer utama di mobile */
  main.flex-1 {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    padding-top: 0.65rem !important;
  }

  /* Grid KPI 2 lajur di mobile */
  .grid-cols-2 {
    gap: 0.5rem !important;
  }

  /* Kartu KPI ringkasan */
  .grid-cols-2 > .work-card,
  .grid-cols-2 > div.work-card,
  .kpi-card {
    padding: 0.5rem 0.55rem !important;
    gap: 0.4rem !important;
    min-width: 0 !important;
    border-radius: 0.75rem !important;
  }

  /* Ikon KPI diperkecil proporsional agar hemat ruang */
  .grid-cols-2 > .work-card > div[class*="rounded-"],
  .grid-cols-2 > .work-card .w-10,
  .grid-cols-2 > .work-card .w-11,
  .grid-cols-2 > .work-card .w-12,
  .grid-cols-2 > .work-card .w-8 {
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem !important;
    border-radius: 0.45rem !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
  }
  .grid-cols-2 > .work-card i {
    font-size: 0.78rem !important;
  }

  /* Wadah teks di dalam kartu */
  .grid-cols-2 > .work-card > div:not([class*="shrink-0"]):not([class*="rounded-"]) {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
  }

  /* Judul / Label KPI di mobile: Hapus paksaan truncate 1 lajur, izinkan 2 lajur rapi */
  .grid-cols-2 > .work-card .text-\[11px\],
  .grid-cols-2 > .work-card div[class*="tracking-wider"],
  .grid-cols-2 > .work-card span[class*="tracking-wider"] {
    font-size: 0.6rem !important; /* ~9.5px */
    line-height: 1.2 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    letter-spacing: 0.01em !important;
  }

  /* Nilai angka / nominal KPI di mobile: Ukuran font pas & padat agar nominal jutaan tidak terpotong */
  .grid-cols-2 > .work-card .text-xl,
  .grid-cols-2 > .work-card .text-2xl,
  .grid-cols-2 > .work-card .text-lg,
  .grid-cols-2 > .work-card [id^="stat"] {
    font-size: 0.785rem !important; /* ~12.5px */
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Override Tailwind truncate pada KPI di mobile */
  .grid-cols-2 > .work-card .truncate,
  .kpi-card .truncate {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Status teks non-angka (seperti "2 Transaksi", "🔴 TUTUP", "Database Anggota") */
  .grid-cols-2 > .work-card [id*="Bukti"],
  .grid-cols-2 > .work-card [id*="AdaBukti"],
  .grid-cols-2 > .work-card [id*="Transaksi"],
  .grid-cols-2 > .work-card div[class*="font-black"]:not([id^="stat"]),
  .grid-cols-2 > .work-card div[class*="font-bold"]:not([class*="text-\[11px\]"]):not([class*="tracking-wider"]) {
    font-family: inherit !important; /* Gunakan sans-serif proporsional agar hemat ruang */
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Subtitle keterangan KPI di mobile */
  .grid-cols-2 > .work-card .text-\[10px\],
  .grid-cols-2 > .work-card .text-\[9px\] {
    font-size: 0.585rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Toolbar Meja Kerja Header */
  .work-card.p-4,
  .work-card.p-5 {
    padding: 0.85rem !important;
  }

  /* Tombol Aksi Meja Kerja di mobile */
  .btn-action-primary,
  .btn-action-secondary {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.725rem !important;
  }

  /* Judul Toolbar Header */
  .work-card h2 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
}

/* ==========================================================================
   DATA TABLE & RESPONSIVE MOBILE ADAPTATION
   ========================================================================== */
.table-workstation {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.table-workstation th {
  background-color: rgba(15, 23, 42, 0.95);
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.table-workstation td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  vertical-align: middle;
}

.table-workstation tr:hover td {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Compact padding & Universal Sticky Action Column for all Workstation & Data Tables */
.table-workstation.table-compact th,
.table-workstation.table-compact td,
.table-compact th,
.table-compact td {
  padding: 0.65rem 0.6rem;
}

/* Universal Sticky Action Column (Berlaku untuk .sticky-action-col, .col-sticky-action, .col-sticky-right) */
th.col-sticky-right,
td.col-sticky-right,
th.sticky-action-col,
td.sticky-action-col,
th.col-sticky-action,
td.col-sticky-action,
.table-workstation th.col-sticky-right,
.table-workstation td.col-sticky-right {
  position: sticky !important;
  right: 0 !important;
}

th.col-sticky-right,
th.sticky-action-col,
th.col-sticky-action,
.table-workstation th.col-sticky-right {
  background-color: #0b1329 !important;
  box-shadow: -8px 0 16px -2px rgba(0, 0, 0, 0.75) !important;
  z-index: 25 !important;
}

td.col-sticky-right,
td.sticky-action-col,
td.col-sticky-action,
.table-workstation td.col-sticky-right {
  background-color: #090e1f !important;
  box-shadow: -8px 0 16px -2px rgba(0, 0, 0, 0.75) !important;
  z-index: 15 !important;
}

tr:hover td.col-sticky-right,
tr:hover td.sticky-action-col,
tr:hover td.col-sticky-action,
.table-workstation tr:hover td.col-sticky-right {
  background-color: #111a3b !important;
}

/* Proteksi Responsif Tabel di Layar Mobile (< 768px) */
@media (max-width: 767px) {
  .table-container table,
  .table-scroll-container table,
  div.overflow-x-auto table,
  table.table-compact,
  table.table-workstation,
  table.data-table {
    min-width: 680px;
  }
}

/* Tombol Aksi Kerja */
.btn-action-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #020617;
  border: 1px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-action-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.btn-action-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: #1e293b;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-action-secondary:hover {
  background-color: #334155;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Badge Status */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.badge-status.active {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-status.pending {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-status.rejected {
  background-color: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

/* ==========================================================================
   CUSTOM DROPDOWN / SELECT STYLING (MODERN DARK WORKSTATION)
   Menghilangkan panah bawaan browser yang kaku dan menggantinya dengan
   custom SVG chevron yang elegan, konsisten di Windows, Android, dan iOS.
   ========================================================================== */

select,
.form-select,
.custom-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #090e1f !important; /* Deep dark workstation surface */
  color: #f1f5f9 !important; /* text-slate-100 */
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  padding-left: 0.85rem !important;
  padding-right: 2.25rem !important; /* Ruang lega agar teks tidak menabrak panah */
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  font-family: inherit;
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  outline: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}

/* Hover State */
select:hover,
.form-select:hover,
.custom-select:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Focus State */
select:focus,
.form-select:focus,
.custom-select:focus {
  border-color: #f59e0b !important; /* Aksen Gold Teater Q */
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fbbf24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Disabled State */
select:disabled,
.form-select:disabled,
.custom-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Ukuran Kecil (Kompak seperti di Pagination) */
select.select-sm,
select[id*="PageSize"],
select[id*="pageSize"] {
  padding-left: 0.65rem !important;
  padding-right: 1.65rem !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  font-size: 0.72rem !important;
  background-position: right 0.45rem center !important;
  background-size: 0.8rem !important;
  border-radius: 0.5rem !important;
}

/* Styling Dropdown Options Menu Popup di Dark Mode */
select option,
select optgroup {
  background-color: #090e1f !important; /* Deep dark slate-950 background */
  color: #f8fafc !important; /* text-white */
  font-size: 0.8125rem;
  padding: 0.65rem 0.85rem;
  border: none;
}

select option:hover,
select option:focus,
select option:checked {
  background-color: #1e293b !important;
  color: #fbbf24 !important; /* Gold text */
}

/* Mobile-friendly Touch Target */
@media (max-width: 639px) {
  select:not(.select-sm):not([id*="PageSize"]):not([id*="pageSize"]) {
    min-height: 2.5rem; /* ~40px tinggi sentuh nyaman di layar HP */
    font-size: 0.785rem !important;
  }
}

/* ==========================================================================
   MODAL & TOAST NOTIFICATION
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1rem;
  overflow-y: auto;
}

.modal-backdrop.hidden,
div.fixed.inset-0.hidden,
div.fixed.inset-0.z-50.hidden {
  display: none !important;
}

.modal-container, .modal-dialog {
  background: #090e1f;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  width: 100%;
  max-width: 650px;
  margin: 1.5rem auto;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dukungan modal lebar (seperti pratinjau surat keluar A4) */
.modal-container.max-w-4xl {
  max-width: 56rem !important; /* 896px */
}
.modal-container.max-w-5xl,
.modal-container.preview-modal-wide {
  max-width: min(980px, 95vw) !important;
}

/* ==========================================================================
   OPTIMASI UNIVERSAL SELURUH MODAL & POPUP DI MOBILE
   Area scroll luas & tombol Batal/Simpan bebas mepet dari batas bawah layar
   ========================================================================== */
@media (max-width: 1023px) {
  /* 1. Seluruh container modal/popup memiliki z-index tinggi di atas seluruh komponen */
  div.fixed.inset-0:not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop):not(#adminPwaFloatingBanner),
  div[id*="modal" i].fixed,
  div[id*="Modal"].fixed,
  .modal-backdrop {
    z-index: 9990 !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    /* Ruang scroll bawah ekstra lega agar tombol aksi mudah ditekan */
    padding-bottom: max(6.5rem, calc(5.5rem + env(safe-area-inset-bottom, 0px))) !important;
  }

  .modal-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 2. Kartu dialog / work-card di dalam modal: margin bawah ekstra lega */
  div.fixed.inset-0:not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop):not(#adminPwaFloatingBanner) > div.work-card,
  div.fixed.inset-0:not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop):not(#adminPwaFloatingBanner) > div[class*="max-w-"],
  div[id*="modal" i] > div.work-card,
  div[id*="Modal"] > div.work-card {
    margin-top: 0.5rem !important;
    margin-bottom: max(5rem, calc(4rem + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* 3. Khusus modal dengan layout flex internal (seperti muter.html) */
  div.fixed.inset-0:not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop) > div.max-h-\[92vh\],
  div.fixed.inset-0:not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop) > div.max-h-\[90vh\] {
    max-height: calc(100dvh - 3.5rem) !important;
  }

  .modal-scroll-body {
    padding-bottom: max(4rem, calc(3rem + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* 4. Footer Tombol Form (Batal & Simpan): Touch target lega & empuk */
  div[id*="modal" i] form > div:last-child,
  div[id*="Modal"] form > div:last-child,
  div.fixed.inset-0:not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop) form > div:last-child,
  div[id*="modal" i] [class*="border-t"]:last-child,
  div[id*="Modal"] [class*="border-t"]:last-child {
    padding-top: 1rem !important;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0.75rem)) !important;
  }
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Toast */
#adminToast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

#adminToast.hidden,
#adminToast[hidden] {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(1rem) !important;
  pointer-events: none !important;
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION BAR & SUB-MENU DRAWER (Native App Style)
   ========================================================================== */
.admin-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 68px;
  background: rgba(3, 7, 24, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 50;
  padding: 0.2rem 0.4rem;
  padding-bottom: calc(0.2rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.75);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.28s;
}

/* Sembunyikan Navigasi Bawah & Floating Banner saat Modal/Dialog Terbuka */
body.modal-open .admin-bottom-nav,
body.has-active-modal .admin-bottom-nav,
body:has(div.fixed.inset-0.z-50:not(.hidden):not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop):not(#adminPwaFloatingBanner):not([style*="display: none"]):not([style*="display:none"])) .admin-bottom-nav {
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.modal-open #adminPwaFloatingBanner,
body.has-active-modal #adminPwaFloatingBanner,
body:has(div.fixed.inset-0.z-50:not(.hidden):not(#bottomNavDrawerBackdrop):not(#adminBottomDrawer):not(#sidebarBackdrop):not(#adminPwaFloatingBanner):not([style*="display: none"]):not([style*="display:none"])) #adminPwaFloatingBanner {
  display: none !important;
}

@media (min-width: 1024px) {
  .admin-bottom-nav,
  .admin-bottom-drawer,
  .admin-drawer-backdrop {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .admin-main-wrapper {
    padding-bottom: 84px !important;
  }
  #adminToast {
    bottom: 5.5rem !important;
    right: 1rem !important;
    left: 1rem !important;
    justify-content: center;
  }
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0.35rem 0.15rem;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
}

.bottom-nav-item:active {
  transform: scale(0.92);
}

.bottom-nav-item i {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 30px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid transparent;
}

.bottom-nav-item span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: color 0.18s ease, font-weight 0.18s ease;
  white-space: nowrap;
}

.bottom-nav-item:hover,
.bottom-nav-item:focus {
  color: #f8fafc;
}

.bottom-nav-item:hover i {
  background: rgba(255, 255, 255, 0.06);
}

/* Tab Aktif (Halaman saat ini berada di kategori ini) */
.bottom-nav-item.active {
  color: #fbbf24;
}

.bottom-nav-item.active i {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.bottom-nav-item.active span {
  color: #fbbf24;
  font-weight: 800;
}

/* Tab dengan Drawer yang sedang Terbuka */
.bottom-nav-item.drawer-open {
  color: #38bdf8;
}

.bottom-nav-item.drawer-open i {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
  transform: translateY(-1px);
}

.bottom-nav-item.drawer-open span {
  color: #38bdf8;
  font-weight: 800;
}

/* Backdrop Blur untuk Bottom Drawer */
.admin-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 44;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Bottom Drawer Pop-up Menu */
.admin-bottom-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  max-height: calc(82vh - 68px);
  z-index: 46;
  background: linear-gradient(180deg, #090f26 0%, #030715 100%);
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(115%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.admin-bottom-drawer.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

body.drawer-locked {
  overflow: hidden !important;
}

/* Drawer Handle Pill */
.drawer-drag-handle {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 4px;
  cursor: pointer;
}

.drawer-pill {
  width: 40px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.35);
  transition: background 0.2s;
}

.drawer-drag-handle:hover .drawer-pill {
  background: rgba(245, 158, 11, 0.6);
}

/* Drawer Header */
.drawer-header {
  padding: 6px 14px 10px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Drawer Grid Container */
.drawer-grid-container {
  padding: 12px 8px 16px 8px;
  overflow-y: auto;
  max-height: 52vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 4px;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 360px) {
  .drawer-grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 4px;
  }
}

/* Drawer Grid Item (Card Launcher) */
.drawer-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  padding: 6px 2px;
  border-radius: 12px;
  transition: transform 0.15s ease, background 0.15s ease;
  position: relative;
}

.drawer-grid-item:active {
  transform: scale(0.92);
}

.drawer-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  margin-bottom: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
  background: rgba(15, 23, 42, 0.85);
}

.drawer-grid-item.is-current .drawer-icon-box {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.2) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45) !important;
}

.drawer-item-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
  line-height: 1.15;
  max-width: 76px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.drawer-grid-item.is-current .drawer-item-title {
  color: #fbbf24;
  font-weight: 800;
}

.drawer-active-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f59e0b;
  margin-top: 3px;
  box-shadow: 0 0 6px #f59e0b;
}

/* ==========================================================================
   ROLE READ-ONLY ACCESS RULES (Anggota & Alumni Mode)
   ========================================================================== */
body.role-readonly .btn-action-primary,
body.role-readonly button[onclick*="openModalCreate"],
body.role-readonly button[onclick*="openModalTarik"],
body.role-readonly button[onclick*="batch"],
body.role-readonly button[onclick*="Batch"],
body.role-readonly button[onclick*="openModalEdit"],
body.role-readonly button[onclick*="confirmDelete"],
body.role-readonly button[onclick*="delete"],
body.role-readonly button[onclick*="Delete"],
body.role-readonly button[onclick*="handleSaveConfig"],
body.role-readonly #batchActionBar,
body.role-readonly #panelConfigOprec,
body.role-readonly th input[type="checkbox"],
body.role-readonly td input[type="checkbox"],
body.role-readonly input[type="checkbox"].action-checkbox,
body.role-readonly button[title*="Edit"],
body.role-readonly button[title*="Hapus"],
body.role-readonly button[title*="Tarik"],
body.role-readonly #btnModeEdit,
body.role-readonly #btnSaveDoc,
body.role-readonly #btnEditBerkasLengkap,
body.role-readonly #btnCreateMuter,
body.role-readonly #btnSaveLiveEditor,
body.role-readonly #btnCycleStatus,
body.role-readonly #btnDeleteActiveDoc,
body.role-readonly button[onclick*="setEditorMode"],
body.role-readonly button[onclick*="openModalEditActiveDoc"],
body.role-readonly button[onclick*="cycleActiveDocStatus"],
body.role-readonly button[onclick*="confirmDeleteActiveDoc"],
body.role-readonly button[onclick*="openModalCreateMuter"],
body.role-readonly button[onclick*="openModalEditDocByIndex"],
body.role-readonly #btnSandiPresidium,
body.role-readonly #btnArchiveCurrentPeriod,
body.role-readonly #btnSaveAllTop,
body.role-readonly #btnSaveBuilderBottom,
body.role-readonly #btnSyncMasterTop,
body.role-readonly #builderRightColumn,
body.role-readonly #wrapUploadBannerControls,
body.role-readonly #btnSyncRekeningBendahara,
body.role-readonly #wrapFieldPresetControls,
body.role-readonly #detailStatusActionButtons,
body.role-readonly button[onclick*="saveAllEventConfig"],
body.role-readonly button[onclick*="openModalSyncMasterEvent"],
body.role-readonly button[onclick*="openTambahPendaftarManual"],
body.role-readonly button[onclick*="openEditFieldModal"],
body.role-readonly button[onclick*="removeField"],
body.role-readonly button[onclick*="addNewFieldToActiveList"],
body.role-readonly button[onclick*="resetToMasterCatalog"],
body.role-readonly button[onclick*="applyFieldPreset"],
body.role-readonly button[onclick*="handleAdminBannerUpload"],
body.role-readonly button[onclick*="confirmResetBanner"],
body.role-readonly button[onclick*="openEditPendaftar"],
body.role-readonly button[onclick*="deletePendaftar"],
body.role-readonly button[onclick*="quickUpdateStatusFromDetail"],
body.role-readonly #liveEditorContainer {
  display: none !important;
}