/* CRITICAL CSS (merged from critical.css) */
:root{--font-sans-fallback:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';--font-mono-fallback:'JetBrains Mono','Fira Code','Consolas',monospace;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-smoothing-webkit:antialiased;--font-smoothing-moz:grayscale;}body{font-family:var(--font-sans,var(--font-sans-fallback)),var(--font-sans-fallback);background-color:var(--background);font-weight:var(--font-weight,400);line-height:var(--line-height,1.6);letter-spacing:var(--letter-spacing,0);-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;text-size-adjust:100%;-webkit-text-size-adjust:100%;}*{-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;}body,h1,h2,h3,h4,h5,h6,p,span,div,li,td,th,label,input,select,textarea{-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;font-feature-settings:"liga" 1;}.google-sans-flex{font-family:"Google Sans Flex",var(--font-sans-fallback);font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"slnt" 0,"wdth" 100,"GRAD" 0,"ROND" 0;-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;}.google-sans-flex-font{font-family:"Google Sans Flex",var(--font-sans-fallback) !important;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"slnt" 0,"wdth" 100,"GRAD" 0,"ROND" 0;-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;}.geist-font{font-family:"Geist",var(--font-sans-fallback);font-weight:400;font-style:normal;-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;}@media (-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){body,.google-sans-flex,.geist-font,h1,h2,h3,h4,h5,h6,p,span,div,li,td,th,label,input,select,textarea,button{-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;font-feature-settings:"liga" 1;}}.animate-slow,.animate-normal,.animate-fast{-webkit-font-smoothing:var(--font-smoothing-webkit);text-rendering:optimizeLegibility;}.typography-small{font-size:14px;}.typography-default{font-size:16px;}.typography-medium{font-size:17px;}.typography-large{font-size:18px;}.line-height-compact{line-height:1.4;}.line-height-normal{line-height:1.6;}.line-height-relaxed{line-height:1.8;}.letter-spacing-tight{letter-spacing:-0.025em;}.letter-spacing-normal{letter-spacing:0;}.letter-spacing-wide{letter-spacing:0.025em;}.font-weight-light{font-weight:var(--font-weight-light,300);}.font-weight-regular{font-weight:var(--font-weight-normal,400);}.font-weight-medium{font-weight:var(--font-weight-medium,500);}.animate-slow{transition-duration:0.5s;}.animate-normal{transition-duration:0.3s;}.animate-fast{transition-duration:0.15s;}.animate-none{transition:none;}.density-compact{--spacing-unit:0.5rem;}.density-comfortable{--spacing-unit:1rem;}.density-spacious{--spacing-unit:1.5rem;}html.high-contrast{--border:hsl(0 0 0);--foreground:hsl(0 0 0);--primary-foreground:hsl(0 0 100%);}.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:6px;font-size:14px;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);height:40px;padding-left:16px;padding-right:16px;}.btn-sm{height:36px;padding-left:12px;padding-right:12px;}.btn-base{height:40px;padding-left:16px;padding-right:16px;}.btn:active{transform:scale(0.98);}.btn-primary{background-color:var(--primary);color:var(--primary-foreground);}.btn-primary:hover{opacity:0.9;}.btn-secondary{background-color:var(--secondary);color:var(--secondary-foreground);border:1px solid var(--border);}.btn-secondary:hover{opacity:0.8;}.form-input{display:flex;height:2.5rem;width:100%;border-radius:0.375rem;border:1px solid var(--border);background-color:var(--background);padding:0.5rem 0.75rem;font-size:0.875rem;}.form-input:focus-visible{outline:none;border-color:hsl(240 5.9% 10%);box-shadow:0 0 0 2px hsl(240 4.8% 95.9%);}select.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5rem center;background-size:1.5em;padding-right:2.5rem;}#toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:50;display:flex;flex-direction:column;gap:0.5rem;}.toast{background-color:#fff;padding:1rem 1.5rem;border-radius:0.5rem;box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);display:flex;align-items:center;opacity:0;transform:translateX(100%);transition:all 0.3s ease-in-out;}.toast.show{opacity:1;transform:translateX(0);}.toast.toast-success{border-left:4px solid #22c55e;}.toast.toast-error{border-left:4px solid #ef4444;}.toast .badge-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#f0f9ff;margin-right:0.75rem;}.form-input.is-invalid{border-color:#ef4444;}.invalid-feedback{color:#ef4444;font-size:0.875rem;margin-top:0.25rem;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.form-checkbox{height:1rem;width:1rem;color:var(--primary);border:1px solid var(--border);border-radius:0.25rem;}.form-checkbox:focus{outline:none;box-shadow:0 0 0 2px hsl(240 4.8% 95.9%);}textarea.form-input{min-height:80px;resize:vertical;}.pagination-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:6px;font-size:14px;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;height:36px;padding-left:12px;padding-right:12px;color:#334155;}.pagination-btn:hover{background-color:#f1f5f9;}.pagination-btn:disabled{color:#cbd5e1;cursor:not-allowed;}.pagination-btn:disabled:hover{background-color:transparent;}.card-style-default .border.bg-card{box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);border-width:1px;}.card-style-outlined .border.bg-card{box-shadow:none;border-width:1px;}html.compact-sidebar .sidebar-nav-text{display:none;}html.compact-sidebar .md\:grid-cols-\[220px_1fr\]{grid-template-columns:68px 1fr;}html.compact-sidebar .lg\:grid-cols-\[280px_1fr\]{grid-template-columns:68px 1fr;}html.compact-sidebar .sidebar-nav-link{justify-content:center;}html.compact-sidebar .sidebar-brand-text{display:none;}.prose p{margin-top:1.25em;margin-bottom:1.25em;}.prose ul,.prose ol{margin-top:1.25em;margin-bottom:1.25em;padding-left:1.75em;}.prose ul{list-style-type:disc;}.prose ol{list-style-type:decimal;}.prose li{margin-top:0.5em;margin-bottom:0.5em;}.prose strong{font-weight:600;}.prose a{color:var(--primary);text-decoration:underline;}.submenu{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.4s ease-out;opacity:0;display:flex;flex-direction:column}.submenu-trigger[aria-expanded="true"]+.submenu{max-height:500px;overflow-y:auto;opacity:1}.submenu::-webkit-scrollbar{width:6px}.submenu::-webkit-scrollbar-track{background:transparent;border-radius:9999px}.submenu::-webkit-scrollbar-thumb{background:var(--border);border-radius:9999px;min-height:10%}.submenu::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground)}.collapsible-menu{width:100%;overflow:visible}.collapsible-menu>.submenu{width:100%}.submenu .sidebar-nav-link{width:auto;min-width:0;overflow:visible;flex:1;display:flex;align-items:center;gap:.75rem}.submenu .sidebar-nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:767px){main .border.bg-card.shadow-sm.rounded-lg:has(.responsive-table){border:none;box-shadow:none;background-color:transparent;}}html.layout-boxed .grid{max-width:1400px;margin-left:auto;margin-right:auto;}body.preload{opacity:0;}.list-enter-active,.list-leave-active{transition:all 0.5s ease;}.list-enter-from,.list-leave-to{opacity:0;transform:translateY(20px);}@page{size:A4 portrait;margin:0.75in;}@media print{#sidebar,header.print-hidden,.print-hidden{display:none !important;}main{width:100% !important;margin:0 !important;padding:0 !important;}body{background-color:#fff !important;font-size:10pt !important;color:#000 !important;}*,*::before,*::after,*:before,*:after{box-shadow:none !important;text-shadow:none !important;}h1,.text-3xl{font-size:18pt !important;}h2,.text-2xl{font-size:16pt !important;}h3,.text-xl{font-size:14pt !important;}h4,.text-lg{font-size:12pt !important;}h5,.text-base{font-size:11pt !important;}p,td,th,div,span{font-size:9pt !important;}.text-sm{font-size:8.5pt !important;}.text-xs{font-size:7.5pt !important;}button svg,a svg,th svg{display:none !important;}.print\:shadow-none{box-shadow:none !important;}.print\:border-gray-300{border-color:#d1d5db !important;}.print\:rounded-none{border-radius:0 !important;}.bg-blue-100,.bg-green-100,.bg-orange-100,.bg-red-100{background-color:transparent !important;}.print\:max-h-none{max-height:none !important;}.print\:overflow-visible{overflow:visible !important;}table{width:100% !important;border-collapse:collapse !important;}thead{display:table-header-group !important;}}html.fonts-loading body{opacity:0;}html.fonts-loaded body,html.fonts-fallback body{opacity:1;transition:opacity 0.3s ease-in-out;}.wf-loading body{opacity:0;}.wf-active body,.wf-inactive body{opacity:1;}body{}

/* COMPONENT STYLES (merged from styles.css) */

/* ... existing code ...

/* Sidebar improvements for text visibility */
aside#sidebar {
  width: 100%;
  overflow: hidden;
}

aside#sidebar .flex-1 {
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow overflow-y-auto to work */
}

aside#sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%; /* Ensure nav takes full width */
}

/* Ensure menu items don't get cut off */
.sidebar-nav-link,
.submenu-trigger {
  width: 100%;
  box-sizing: border-box;
}

/* Prevent sidebar from being truncated on smaller screens */
@media (max-width: 768px) {
  aside#sidebar {
    width: 100vw;
    max-width: 100vw;
  }
}

.slide-up-drawer {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Sub-menu styles */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-out;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.submenu-trigger[aria-expanded="true"] + .submenu {
  max-height: 1500px; /* Fixed height with scroll */
  overflow-y: auto;
  opacity: 1;
}

/* Submenu scrollbar styling */
.submenu::-webkit-scrollbar {
  width: 6px;
}
.submenu::-webkit-scrollbar-track {
  background: transparent;
}
.submenu::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.submenu::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* Submenu link styles */
.submenu .sidebar-nav-link {
  width: auto;
  min-width: 0;
  overflow: visible;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.submenu .sidebar-nav-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Collapsible menu improvements */
.collapsible-menu {
  width: 100%;
  overflow: visible;
}

.collapsible-menu > .submenu {
  width: 100%;
}

.submenu-trigger {
  min-width: 0; /* Allow text truncation */
  overflow: hidden;
}

.submenu-trigger span {
  min-width: 0; /* Allow flex children to shrink */
}

.sidebar-nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Critical for flex truncation */
}
/* Hide main card border on mobile to prevent card-in-card look */
@media (max-width: 767px) {
  /* Hanya target kartu utama yang berisi tabel responsif */
  main .border.bg-card.shadow-sm.rounded-lg:has(.responsive-table) {
      border: none;
      box-shadow: none;
      background-color: transparent;
  }
}
html.layout-boxed .grid { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* Prevent Flash of Unstyled Content (FOUC) */
body.preload {
  opacity: 0;
}

/* Vue Transition Group styles (e.g., for ImageUploader) */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* Global Print Styles */
@page {
  size: A4 portrait; /* Mengatur ukuran kertas ke A4 potret */
  margin: 0.75in;    /* Memberi margin pada halaman cetak */
}

@media print {
  /* Sembunyikan elemen navigasi dan elemen lain yang tidak perlu */
  #sidebar, header.print-hidden, .print-hidden {
      display: none !important;
  }

  /* Pastikan konten utama mengisi seluruh lebar halaman */
  main {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
  }

  /* Atur ulang gaya dasar untuk cetak */
  body {
      background-color: #fff !important;
      font-size: 10pt !important;
      color: #000 !important;
  }

  /* Hapus bayangan dan atur ulang elemen yang tidak perlu */
  *, *::before, *::after, *:before, *:after {
      box-shadow: none !important;
      text-shadow: none !important;
  }

  /* Perkecil font judul saat mencetak */
  h1, .text-3xl { font-size: 18pt !important; }
  h2, .text-2xl { font-size: 16pt !important; }
  h3, .text-xl { font-size: 14pt !important; }
  h4, .text-lg { font-size: 12pt !important; }
  h5, .text-base { font-size: 11pt !important; }
  p, td, th, div, span { font-size: 9pt !important; }
  .text-sm { font-size: 8.5pt !important; }
  .text-xs { font-size: 7.5pt !important; }

  /* Sembunyikan ikon UI yang tidak relevan saat mencetak */
  button svg, a svg, th svg {
      display: none !important;
  }

  /* Atur ulang gaya kartu untuk cetak */
  .print\:shadow-none { box-shadow: none !important; }
  .print\:border-gray-300 { border-color: #d1d5db !important; }
  .print\:rounded-none { border-radius: 0 !important; }
  .bg-blue-100, .bg-green-100, .bg-orange-100, .bg-red-100 { background-color: transparent !important; }
  .print\:max-h-none { max-height: none !important; }
  .print\:overflow-visible { overflow: visible !important; }

  /* Aturan untuk tabel agar tetap rapi */
  table {
      width: 100% !important;
      border-collapse: collapse !important;
  }
  thead {
      display: table-header-group !important; /* Pastikan header tabel muncul di setiap halaman */
  }
}
/* Font loading states */
html.fonts-loading body {
  opacity: 0;
}

html.fonts-loaded body,
html.fonts-fallback body {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Prevent FOUC (Flash of Unstyled Content) */
.wf-loading body {
  opacity: 0;
}

.wf-active body,
.wf-inactive body {
  opacity: 1;
}

/* Ensure fonts are displayed even if they fail to load */
body {
}

/* Global Date Input Fixes for iOS/Safari */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select.form-input {
  height: 2.5rem !important; /* Consistent with .form-input */
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* Override all Tailwind height classes for form inputs */
input[type="date"].h-8,
input[type="date"].h-9,
input[type="date"].h-10,
input[type="date"].h-11,
input[type="date"].h-12,
input[type="time"].h-8,
input[type="time"].h-9,
input[type="time"].h-10,
input[type="time"].h-11,
input[type="time"].h-12,
input[type="datetime-local"].h-8,
input[type="datetime-local"].h-9,
input[type="datetime-local"].h-10,
input[type="datetime-local"].h-11,
input[type="datetime-local"].h-12,
input[type="text"].h-8,
input[type="text"].h-9,
input[type="text"].h-10,
input[type="text"].h-11,
input[type="text"].h-12,
input[type="email"].h-8,
input[type="email"].h-9,
input[type="email"].h-10,
input[type="email"].h-11,
input[type="email"].h-12,
input[type="password"].h-8,
input[type="password"].h-9,
input[type="password"].h-10,
input[type="password"].h-11,
input[type="password"].h-12,
input[type="number"].h-8,
input[type="number"].h-9,
input[type="number"].h-10,
input[type="number"].h-11,
input[type="number"].h-12,
input[type="tel"].h-8,
input[type="tel"].h-9,
input[type="tel"].h-10,
input[type="tel"].h-11,
input[type="tel"].h-12,
input[type="url"].h-8,
input[type="url"].h-9,
input[type="url"].h-10,
input[type="url"].h-11,
input[type="url"].h-12,
select.form-input.h-8,
select.form-input.h-9,
select.form-input.h-10,
select.form-input.h-11,
select.form-input.h-12 {
  height: 2.5rem !important;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select.form-input:focus {
  outline: none !important;
  border-color: hsl(240 5.9% 10%) !important;
  box-shadow: 0 0 0 2px hsl(240 4.8% 95.9%) !important;
}

/* Global Select Field Fixes for iOS/Safari */
select.form-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 2.5rem !important;
  font-family: inherit !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  background-size: 1.5em !important;
}

/* iOS specific improvements */
@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  select.form-input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    height: 2.75rem !important; /* Slightly taller for better touch targets */
    padding: 0.625rem 0.75rem !important;
  }
  
  select.form-input {
    padding-right: 2.75rem !important;
  }
}