/* Dark mode */
html.dark body { background: #0f172a !important; color: #e2e8f0; }
html.dark #appSection header { background: #111827 !important; border-color: #334155 !important; }
html.dark #appSection header h1,
html.dark #appSection header #userDisplayName { color: #f8fafc !important; }
html.dark #appSection header p,
html.dark #appSection header #userRoleLabel { color: #94a3b8 !important; }
html.dark #appSection main .bg-white,
html.dark #appSection main form.bg-white,
html.dark #appSection main [class*="bg-white"] { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark #appSection main .bg-slate-50,
html.dark #appSection main input,
html.dark #appSection main select,
html.dark #appSection main textarea { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #475569 !important; }
html.dark #appSection main h1,
html.dark #appSection main h2,
html.dark #appSection main h3,
html.dark #appSection main h4,
html.dark #appSection main .text-slate-900,
html.dark #appSection main .text-slate-800 { color: #f1f5f9 !important; }
html.dark #appSection main .text-slate-700,
html.dark #appSection main .text-slate-600,
html.dark #appSection main .text-slate-500,
html.dark #appSection main .text-slate-400 { color: #94a3b8 !important; }
html.dark #appSection main .border-slate-200,
html.dark #appSection main .border-slate-100 { border-color: #334155 !important; }
html.dark #appSection main tr:hover { background-color: #273449 !important; }
html.dark #appSection main thead,
html.dark #appSection main .bg-slate-50\/80 { background-color: #172033 !important; }
html.dark #themeToggle { color: #facc15; }

/* Modal dan field dark mode: teks input tetap jelas dan kontras. */
/* Modal Surat Masuk */
html.dark #modalSuratMasuk {
  background-color: rgba(2, 6, 23, 0.82) !important;
}
html.dark #modalSuratMasuk > div,
html.dark #modalSuratMasuk > div.bg-white,
html.dark #modalSuratMasuk .bg-white {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}
html.dark #modalSuratMasuk .bg-slate-50,
html.dark #modalSuratMasuk input.bg-slate-50,
html.dark #modalSuratMasuk select.bg-slate-50,
html.dark #modalSuratMasuk textarea.bg-slate-50 {
  background: #020617 !important;
  background-color: #020617 !important;
}
html.dark #modalSuratMasuk .bg-slate-100 {
  background: #1e293b !important;
  background-color: #1e293b !important;
}
html.dark #modalSuratMasuk .border-slate-100,
html.dark #modalSuratMasuk .border-slate-200,
html.dark #modalSuratMasuk .border-slate-300 {
  border-color: #475569 !important;
}
html.dark #modalSuratMasuk input,
html.dark #modalSuratMasuk select,
html.dark #modalSuratMasuk textarea {
  background: #020617 !important;
  background-color: #020617 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html.dark #modalSuratMasuk label,
html.dark #modalSuratMasuk h3 { color: #f8fafc !important; }
html.dark #modalSuratMasuk .text-slate-500,
html.dark #modalSuratMasuk .text-slate-600,
html.dark #modalSuratMasuk .text-slate-700 { color: #cbd5e1 !important; }
html.dark #modalSuratMasuk input::placeholder,
html.dark #modalSuratMasuk textarea::placeholder { color: #94a3b8 !important; opacity: 1; }
/* Native Choose File button pada Surat Masuk. */
html.dark #modalSuratMasuk #masukFile {
  background: #020617 !important;
  background-color: #020617 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  border-radius: .75rem !important;
}
html.dark #modalSuratMasuk #masukFile::file-selector-button {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 0 !important;
  border-right: 1px solid #475569 !important;
  border-radius: .65rem !important;
  padding: .55rem .8rem;
  margin: -.625rem .75rem -.625rem -.75rem;
  cursor: pointer;
}
html.dark #modalSuratMasuk #masukFile::file-selector-button:hover {
  background: #334155 !important;
}

/* Tombol kalender pada field tanggal di dark mode. */
html.dark #modalSuratMasuk #btnPilihTanggal,
html.dark #modalNomor #btnPilihTanggal {
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
html.dark #modalSuratMasuk #btnPilihTanggal:hover,
html.dark #modalNomor #btnPilihTanggal:hover {
  background: #334155 !important;
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Modal Surat Keluar (Terbitkan Nomor) */
html.dark #modalNomor {
  background-color: rgba(2, 6, 23, 0.82) !important;
}
html.dark #modalNomor > div {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
}
html.dark #modalNomor input,
html.dark #modalNomor select {
  background: #020617 !important;
  background-color: #020617 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html.dark #modalNomor label { color: #f8fafc !important; }
html.dark #modalNomor h3 { color: #f8fafc !important; }
html.dark #modalNomor .text-slate-500,
html.dark #modalNomor .text-slate-600 { color: #cbd5e1 !important; }

html.dark #modalNomor > div,
html.dark #modalSuratMasuk > div,
html.dark #modalBalasanSuratMasuk > div,
html.dark #modalUpload > div,
html.dark #modalPreviewDoc > div {
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}
html.dark #modalNomor > div *:not(button),
html.dark #modalSuratMasuk > div *:not(button),
html.dark #modalBalasanSuratMasuk > div *:not(button),
html.dark #modalUpload > div *:not(button) {
  border-color: #334155;
}
html.dark #modalNomor h3,
html.dark #modalSuratMasuk h3,
html.dark #modalBalasanSuratMasuk h3,
html.dark #modalUpload h3,
html.dark #modalNomor p,
html.dark #modalSuratMasuk p,
html.dark #modalBalasanSuratMasuk p,
html.dark #modalUpload p { color: #cbd5e1 !important; }
html.dark #appSection [id^="modal"],
html.dark #appSection [role="dialog"] {
  color: #e2e8f0;
}
html.dark #appSection [id^="modal"] > div,
html.dark #appSection [id^="modal"] > form,
html.dark #appSection [id^="modal"] > div > form,
html.dark #appSection [id^="modal"] .bg-white,
html.dark #appSection [role="dialog"] > div,
html.dark #appSection [role="dialog"] > form,
html.dark #appSection [role="dialog"] .bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
html.dark #appSection [id^="modal"] input:not([type="checkbox"]):not([type="file"]),
html.dark #appSection [id^="modal"] select,
html.dark #appSection [id^="modal"] textarea,
html.dark #appSection [role="dialog"] input:not([type="checkbox"]):not([type="file"]),
html.dark #appSection [role="dialog"] select,
html.dark #appSection [role="dialog"] textarea {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  caret-color: #f8fafc;
}
html.dark #appSection [id^="modal"] input::placeholder,
html.dark #appSection [id^="modal"] textarea::placeholder,
html.dark #appSection [role="dialog"] input::placeholder,
html.dark #appSection [role="dialog"] textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}
html.dark #appSection [id^="modal"] label,
html.dark #appSection [role="dialog"] label {
  color: #cbd5e1 !important;
}
html.dark #appSection [id^="modal"] option,
html.dark #appSection [role="dialog"] option {
  background-color: #0f172a;
  color: #f8fafc;
}
html.dark #appSection [id^="modal"] input[type="file"],
html.dark #appSection [role="dialog"] input[type="file"] {
  background-color: #0b1220 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
/* Semua field formulir di dalam modal, termasuk field dengan bg-white/bg-slate-50. */
html.dark #appSection [id^="modal"] input,
html.dark #appSection [id^="modal"] select,
html.dark #appSection [id^="modal"] textarea,
html.dark #appSection [role="dialog"] input,
html.dark #appSection [role="dialog"] select,
html.dark #appSection [role="dialog"] textarea {
  background-color: #0b1220 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}
html.dark #appSection [id^="modal"] input:disabled,
html.dark #appSection [id^="modal"] select:disabled,
html.dark #appSection [id^="modal"] textarea:disabled {
  background-color: #172033 !important;
  color: #94a3b8 !important;
}
html.dark #appSection [id^="modal"] input[type="checkbox"] {
  accent-color: #2563eb;
}

/* Login juga mengikuti tema agar field password/username tidak putih. */
html.dark #loginSection > div {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
html.dark #loginSection input:not([type="checkbox"]) {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  caret-color: #f8fafc;
}
html.dark #loginSection input::placeholder { color: #94a3b8 !important; opacity: 1; }
html.dark #loginSection label, html.dark #loginSection h1 { color: #f1f5f9 !important; }
html.dark #loginSection p, html.dark #loginSection span { color: #94a3b8; }
html.dark #loginSection #btnLoginSubmit,
html.dark #loginSection #btnLoginSubmit span,
html.dark #loginSection #btnLoginSubmit svg {
  color: #ffffff !important;
}

/* Label form dibuat terang agar terbaca jelas pada dark mode. */
html.dark #modalNomor label,
html.dark #modalSuratMasuk label,
html.dark #modalBalasanSuratMasuk label,
html.dark #modalUpload label,
html.dark #modalPreviewDoc label,
html.dark #appSection form label {
  color: #f1f5f9 !important;
}
html.dark #modalNomor label span:not(.text-red-500),
html.dark #modalSuratMasuk label span:not(.text-red-500),
html.dark #modalBalasanSuratMasuk label span:not(.text-red-500),
html.dark #modalUpload label span:not(.text-red-500),
html.dark #appSection form label span:not(.text-red-500) {
  color: #cbd5e1 !important;
}
html.dark #modalNomor label .text-slate-400,
html.dark #modalSuratMasuk label .text-slate-400,
html.dark #modalBalasanSuratMasuk label .text-slate-400,
html.dark #modalUpload label .text-slate-400,
html.dark #appSection form label .text-slate-400 {
  color: #94a3b8 !important;
}

/* Override terakhir untuk field modal yang masih terkena utility Tailwind bg-white. */
html.dark #modalNomor input,
html.dark #modalNomor select,
html.dark #modalNomor textarea,
html.dark #modalSuratMasuk input,
html.dark #modalSuratMasuk select,
html.dark #modalSuratMasuk textarea,
html.dark #modalBalasanSuratMasuk input,
html.dark #modalBalasanSuratMasuk select,
html.dark #modalBalasanSuratMasuk textarea,
html.dark #modalUpload input,
html.dark #modalUpload select,
html.dark #modalUpload textarea {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html.dark #modalNomor input::placeholder,
html.dark #modalNomor textarea::placeholder,
html.dark #modalSuratMasuk input::placeholder,
html.dark #modalSuratMasuk textarea::placeholder,
html.dark #modalBalasanSuratMasuk input::placeholder,
html.dark #modalBalasanSuratMasuk textarea::placeholder,
html.dark #modalUpload input::placeholder,
html.dark #modalUpload textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
html.dark #modalNomor input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Dark mode: netral, nyaman dibaca, dan tidak terlalu kontras. */
html.dark body { color: #dbe4f0 !important; }
html.dark #appSection main .text-blue-700,
html.dark #appSection main .text-blue-600 { color: #93c5fd !important; }
html.dark #appSection main .text-indigo-700,
html.dark #appSection main .text-purple-700 { color: #c4b5fd !important; }
html.dark #appSection main .text-green-700,
html.dark #appSection main .text-emerald-700 { color: #86efac !important; }
html.dark #appSection main .text-red-700,
html.dark #appSection main .text-red-600 { color: #fca5a5 !important; }
html.dark #appSection main .text-yellow-700,
html.dark #appSection main .text-amber-700 { color: #fde68a !important; }
html.dark #appSection main .text-orange-700 { color: #fdba74 !important; }
html.dark #appSection main a { color: #93c5fd; }
html.dark #appSection main button.bg-white,
html.dark #appSection main .bg-white.text-blue-700 { background-color: #263449 !important; color: #bfdbfe !important; border-color: #475569 !important; }
html.dark #appSection main button.bg-white:hover,
html.dark #appSection main .bg-white.text-blue-700:hover { background-color: #334155 !important; }
html.dark #appSection main .bg-blue-600,
html.dark #appSection main .bg-blue-700 { background-color: #2563a8 !important; }
/* Tombol pada kartu "Buat Surat Baru" dibuat lebih gelap dan lembut. */
html.dark #appSection main button.bg-white.text-blue-700 { background-color: #243247 !important; color: #bfdbfe !important; box-shadow: none !important; }
html.dark #appSection main button.bg-white.text-blue-700:hover { background-color: #2d3d55 !important; }
html.dark #appSection main button.bg-blue-500\\/30 { background-color: #29415a !important; color: #dbeafe !important; border-color: #526a83 !important; }
html.dark #appSection main button.bg-blue-500\\/30:hover { background-color: #35516c !important; }
/* Tombol aksi tabel: background gelap, lembut, dan tetap mudah dibedakan. */
html.dark #appSection main .bg-red-50 { background-color: #3b2930 !important; color: #f3b7b7 !important; border-color: #69434b !important; }
html.dark #appSection main .bg-red-50:hover,
html.dark #appSection main .bg-red-100:hover { background-color: #51333b !important; }
html.dark #appSection main .bg-blue-50 { background-color: #26384c !important; color: #b9d7f7 !important; border-color: #405773 !important; }
html.dark #appSection main .bg-blue-50:hover,
html.dark #appSection main .bg-blue-100:hover { background-color: #304963 !important; }
html.dark #appSection main .bg-indigo-50 { background-color: #302d48 !important; color: #c9c2f1 !important; border-color: #514b73 !important; }
html.dark #appSection main .bg-indigo-50:hover,
html.dark #appSection main .bg-indigo-100:hover { background-color: #403b5d !important; }
html.dark #appSection main .bg-emerald-50 { background-color: #263d37 !important; color: #a9dfc3 !important; border-color: #3e6658 !important; }
html.dark #appSection main .bg-emerald-50:hover,
html.dark #appSection main .bg-emerald-100:hover { background-color: #315247 !important; }
html.dark #appSection main button.bg-emerald-100 { background-color: #29463d !important; color: #a9dfc3 !important; border: 1px solid #3e6658 !important; }
html.dark #appSection main button.bg-emerald-100:hover { background-color: #315247 !important; }
html.dark #appSection main button.bg-slate-100 { background-color: #263449 !important; color: #dbe4f0 !important; border: 1px solid #40516a !important; }
html.dark #appSection main button.bg-slate-100:hover:not(:disabled) { background-color: #334862 !important; color: #f1f5f9 !important; }
html.dark #appSection main button.bg-slate-100:disabled { background-color: #1b2637 !important; color: #64748b !important; border-color: #2d3b4e !important; }
html.dark #appSection main .bg-amber-50 { background-color: #403822 !important; color: #f0d68c !important; border-color: #685b35 !important; }
html.dark #appSection main .bg-amber-50:hover,
html.dark #appSection main .bg-amber-100:hover { background-color: #544a2b !important; }

/* Direktori file: folder dan kartu dibuat lebih gelap serta tidak menyilaukan. */
html.dark #databaseFolderView .bg-white,
html.dark #databaseGrid .bg-white { background-color: #1b2637 !important; border-color: #334155 !important; }
html.dark #databaseFolderView .bg-gradient-to-r.from-emerald-50,
html.dark #databaseFolderView .bg-gradient-to-r.from-slate-50 { background-image: linear-gradient(to right, #22352f, #1f2d3e) !important; }
html.dark #databaseFolderView .bg-white.flex,
html.dark #databaseFolderView .bg-white.px-4 { background-color: #202d40 !important; }
html.dark #databaseFolderView .bg-slate-50\\/40 { background-color: #172231 !important; }
html.dark #databaseFolderView .bg-blue-50 { background-color: #26384c !important; color: #b9d7f7 !important; border-color: #405773 !important; }
html.dark #databaseFolderView .bg-indigo-50 { background-color: #302d48 !important; color: #c9c2f1 !important; border-color: #514b73 !important; }
html.dark #databaseFolderView .bg-emerald-100 { background-color: #29463d !important; color: #a9dfc3 !important; }
html.dark #databaseFolderView .bg-blue-100 { background-color: #29415a !important; color: #b9d7f7 !important; }
html.dark #databaseFolderView .text-slate-900,
html.dark #databaseGrid .text-slate-900 { color: #e2e8f0 !important; }
html.dark #databaseFolderView .text-slate-700,
html.dark #databaseFolderView .text-slate-600,
html.dark #databaseFolderView .text-slate-500,
html.dark #databaseGrid .text-slate-700,
html.dark #databaseGrid .text-slate-600,
html.dark #databaseGrid .text-slate-500 { color: #aebdce !important; }
html.dark #databaseFolderView .hover\\:bg-slate-50:hover,
html.dark #databaseFolderView .hover\\:bg-slate-50\\/80:hover,
html.dark #databaseGrid .hover\\:shadow-md:hover { background-color: #27374b !important; }
html.dark #databaseFolderView .border-slate-100,
html.dark #databaseFolderView .border-slate-200,
html.dark #databaseFolderView .border-emerald-200,
html.dark #databaseFolderView .border-blue-200,
html.dark #databaseFolderView .border-indigo-200 { border-color: #3b4b60 !important; }

/* Area isi folder yang masih memakai bg-slate-50/40 pada template direktori. */
html.dark #databaseFolderView [id^="content-site-"],
html.dark #databaseFolderView [id^="content-site-"][class*="bg-slate-50"],
html.dark #databaseFolderView [id^="content-kat-"] { background-color: #111c2b !important; }
html.dark #databaseFolderView [id^="content-site-"] > .bg-white,
html.dark #databaseFolderView [id^="content-kat-"] { background-color: #1a2636 !important; }
html.dark #databaseFolderView [id^="content-site-"] > .bg-white > div[class*="from-slate-50"],
html.dark #databaseFolderView [id^="content-kat-"] + * { background-color: #202e41 !important; }
html.dark #databaseFolderView [data-database-surat-id] { background-color: #1a2636 !important; }
html.dark #databaseFolderView [data-database-surat-id]:hover { background-color: #26374c !important; }

/* Highlight surat aktif: biru soft, tidak menyilaukan. */
html.dark #databaseFolderView [data-database-surat-id].bg-blue-50,
html.dark #databaseFolderView [data-database-surat-id][class*="ring-blue"] { background-color: #29415a !important; box-shadow: inset 0 0 0 2px #5b83a8 !important; }
html.dark #databaseFolderView [data-database-surat-id].bg-blue-50:hover { background-color: #34536f !important; }
html.dark #tableDatabaseSurat tr.bg-blue-50,
html.dark #tableDatabaseSurat tr[class*="ring-blue"] { background-color: #29415a !important; box-shadow: inset 0 0 0 2px #5b83a8 !important; }
html.dark #tableDatabaseSurat tr.bg-blue-50:hover { background-color: #34536f !important; }
html.dark #appSection main .bg-red-600,
html.dark #appSection main .bg-red-700 { background-color: #b64747 !important; }
html.dark #appSection main .bg-green-600,
html.dark #appSection main .bg-emerald-600 { background-color: #26734d !important; }
html.dark #appSection main .bg-yellow-100,
html.dark #appSection main .bg-amber-100 { background-color: #4a4022 !important; color: #fde68a !important; }
html.dark #appSection main .bg-red-100 { background-color: #482b31 !important; color: #fecaca !important; }
html.dark #appSection main .bg-blue-50,
html.dark #appSection main .hover\\:bg-blue-50:hover { background-color: #263449 !important; }
html.dark #appSection main table { color: #dbe4f0; }
html.dark #appSection main td,
html.dark #appSection main th { border-color: #334155 !important; }
html.dark #appSection main input::placeholder,
html.dark #appSection main textarea::placeholder { color: #64748b !important; }
html.dark .badge { filter: saturate(.72) brightness(.82); }
html.dark ::-webkit-scrollbar-track { background: #172033; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Keep the viewport width stable when switching between tabs with different heights. */
html {
  scrollbar-gutter: stable;
}

body {
  overflow-y: scroll;
}

#appSection > main {
  width: 100%;
}

/* Smooth page/tab transitions */
.tab-page-enter {
  animation: tabPageEnter 360ms ease-out both;
}

/* Modal harus tetap menutup seluruh viewport, tidak terpengaruh layout tabel/tab. */
#modalSuratMasuk {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.5) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

@keyframes tabPageEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-backdrop {
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.highlight-row {
  animation: highlight-fade 5s ease-out forwards;
}
@keyframes highlight-fade {
  0%, 70% { background-color: #bfdbfe; box-shadow: inset 0 0 0 2px #60a5fa; }
  100% { background-color: transparent; box-shadow: inset 0 0 0 0 transparent; }
}
html.dark .highlight-row {
  animation-name: highlight-fade-dark;
}
@keyframes highlight-fade-dark {
  0%, 70% { background-color: #1e40af; box-shadow: inset 0 0 0 2px #60a5fa; }
  100% { background-color: transparent; box-shadow: inset 0 0 0 0 transparent; }
}

/* Custom styling enhancements */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-sk { background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-quot { background-color: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.badge-invoice { background-color: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-rf { background-color: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.badge-kwt { background-color: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.badge-po { background-color: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
/* Warna bergantian untuk kategori tambahan */
.badge-custom-0 { background-color: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
.badge-custom-1 { background-color: #cffafe; color: #0e7490; border: 1px solid #a5f3fc; }
.badge-custom-2 { background-color: #ecfccb; color: #4d7c0f; border: 1px solid #d9f99d; }
.badge-custom-3 { background-color: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.badge-custom-4 { background-color: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
.badge-custom-5 { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.badge-custom-6 { background-color: #fef9c3; color: #a16207; border: 1px solid #fef08a; }
.badge-custom-7 { background-color: #fae8ff; color: #a21caf; border: 1px solid #f5d0fe; }

.docx-word-workspace { background: #e5e7eb; }
.docx-word-page {
  max-width: 794px;
  min-height: 1123px;
  background: #fff;
  color: #111827;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .16);
}
.docx-word-page .docx-wrapper {
  background: transparent !important;
  padding: 0 !important;
}
.docx-word-page section.docx {
  margin: 0 auto 18px !important;
  box-shadow: none !important;
}
.docx-word-content {
  font-family: Calibri, Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.15;
  color: #1f2937;
}
.docx-word-content p { margin: 0 0 10pt; }
.docx-word-content h1 { font-size: 20pt; font-weight: 700; margin: 0 0 14pt; }
.docx-word-content h2 { font-size: 16pt; font-weight: 700; margin: 14pt 0 8pt; }
.docx-word-content h3 { font-size: 13pt; font-weight: 700; margin: 12pt 0 6pt; }
.docx-word-content table { width: 100%; border-collapse: collapse; margin: 10pt 0; }
.docx-word-content td, .docx-word-content th { border: 1px solid #9ca3af; padding: 5pt 7pt; }
.docx-word-content ul, .docx-word-content ol { margin: 0 0 10pt 24pt; }
.docx-word-content img { max-width: 100%; height: auto; }

/* 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;
}

/* Align the Surat Masuk action heading with its right-aligned menu. */
#suratMasukList > div.overflow-x-auto > table > thead > tr > th:nth-child(6) {
  text-align: right;
}

/* Compact action dropdowns for surat tables. */
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu-panel { min-width: 10rem; }
.action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .65rem;
  border-radius: .5rem;
  color: #334155;
  font-size: .75rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.action-menu-item:hover { background: #f1f5f9; }
.action-menu-danger { color: #b91c1c; }
.action-menu-danger:hover { background: #fef2f2; }
html.dark .action-menu summary,
html.dark .action-menu-panel { background: #1e293b; border-color: #475569; color: #e2e8f0; }
html.dark .action-menu-item { color: #e2e8f0; }
html.dark .action-menu-item:hover { background: #334155; }
html.dark .action-menu-danger { color: #fca5a5; }
html.dark .action-menu-danger:hover { background: #482b31; }

/* Mobile layout: optimized for iPhone and other narrow screens. */
@media (max-width: 640px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #loginSection {
    align-items: flex-start;
    padding: 1rem;
    padding-top: 10vh;
  }

  #loginSection > div {
    padding: 1.25rem;
    border-radius: 1rem;
  }

  #appSection > header > div {
    position: relative;
    height: auto;
    min-height: 4rem;
    padding: .75rem 1rem;
    gap: .75rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #appSection > header > div > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  #appSection > header > div > div:first-child h1,
  #appSection > header > div > div:first-child p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #appSection > header > div > div:nth-child(2) {
    width: 100%;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .125rem;
    padding-right: 6rem;
  }

  #appSection > header > div > div:nth-child(2)::-webkit-scrollbar { display: none; }
  #appSection > header > div > div:nth-child(2) > button {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 2.5rem;
  }

  #appSection > header > div > div:nth-child(2) > div:last-child {
    position: absolute;
    top: .75rem;
    right: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .125rem;
    background: white;
    padding-left: .35rem;
  }
  html.dark #appSection > header > div > div:nth-child(2) > div:last-child {
    background: #111827;
  }

  #appSection > main {
    padding: 1rem;
  }

  #appSection > main h2 { font-size: 1.125rem; }
  #appSection > main h3 { font-size: 1rem; }

  /* Keep dense tables usable: scroll the existing overflow-x-auto wrappers. */
  #appSection main .overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  #appSection main .overflow-x-auto table {
    min-width: 42rem;
  }
  #appSection main .overflow-x-auto table.text-xs {
    min-width: 34rem;
  }

  /* Forms and action rows should stack instead of squeezing into tiny columns. */
  #appSection main form .grid,
  #appSection main [role="form"] .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #appSection main .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: .75rem;
  }
  #appSection main input,
  #appSection main select,
  #appSection main textarea,
  #appSection main button {
    max-width: 100%;
  }

  /* Dialogs fit the iPhone viewport and remain scrollable above the keyboard. */
  #appSection [id^="modal"] > div,
  #appSection [role="dialog"] > div {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    margin: 1rem auto;
  }

  .docx-word-page {
    min-height: auto;
    width: 100%;
    padding: 1rem !important;
  }
  .docx-word-workspace { padding: .5rem !important; }
}