@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom utilities */
@layer utilities {
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-height: 2.6em;
  }
  
  /* Better tooltip support for mobile */
  .mobile-tooltip {
    position: relative;
  }
  
  .mobile-tooltip:active::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
    z-index: 1000;
    white-space: normal;
    word-wrap: break-word;
    max-width: 200px;
  }
}

/* Dark mode styles */
.dark {
  @apply bg-gray-900;
}

.dark body {
  @apply bg-gray-900;
}

.dark .bg-white {
  @apply bg-gray-800;
}

.dark .bg-gray-50, .dark .bg-gray-100 {
  @apply bg-gray-800;
}

/* Remove forced white text */
.dark .text-gray-400, 
.dark .text-gray-500, 
.dark .text-gray-600, 
.dark .text-gray-700, 
.dark .text-gray-800, 
.dark .text-gray-900 {
  @apply text-gray-300;
}

/* Remove forced white text for all elements */
.dark .text-sm,
.dark .text-xs,
.dark .text-base,
.dark p,
.dark span,
.dark div,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  @apply text-gray-300;
}

.dark .border-gray-100, .dark .border-gray-200 {
  @apply border-gray-700;
}

.dark .shadow {
  @apply shadow-gray-900;
}

/* Make dropdown backgrounds responsive to theme */

/* Dark mode dropdown overrides */
.dark .dropdown-base {
  @apply bg-gray-800 border-gray-700;
}

.dark .dropdown-menu-item {
  @apply text-gray-300 hover:bg-gray-700;
}

.dark .dropdown-base h3,
.dark .dropdown-base p,
.dark .dropdown-base span {
  @apply text-gray-300;
}

.dark .dropdown-base a:hover {
  @apply text-white;
}

.dark .dropdown-base .text-gray-600,
.dark .dropdown-base .text-gray-700 {
  @apply text-gray-300;
}

/* Fix input fields in dark mode */
.dark input,
.dark select,
.dark textarea {
  @apply bg-gray-700 border-gray-600 text-white;
}

/* Fix buttons in dark mode */
.dark .btn {
  border: none;
}

.dark .btn-primary {
  background-color: rgb(16, 132, 66); /* Dark green */
  color: white;
}

.dark .btn-primary:hover {
  background-color: rgb(4, 108, 78); /* Slightly darker green */
}

.dark .btn-secondary {
  background-color: rgb(55, 65, 81); /* Gray-700 */
  color: white;
}

.dark .btn-secondary:hover {
  background-color: rgb(75, 85, 99); /* Gray-600 */
}

.dark .btn-white {
  background-color: rgb(55, 65, 81); /* Gray-700 */
  color: white;
  border: none;
}

.dark .btn-white:hover {
  background-color: rgb(75, 85, 99); /* Gray-600 */
}

.dark .btn-alternate {
  background-color: rgb(22, 101, 52); /* Green-800 */
  color: rgb(220, 252, 231); /* Green-100 */
  border: none;
}

.dark .btn-alternate:hover {
  background-color: rgb(21, 128, 61); /* Green-700 */
}

/* Fix panel backgrounds in dark mode */
.dark .panel-main,
.dark .panel-side,
.dark .action-bar-container {
  @apply bg-gray-800 border-gray-700;
}

/* Fix hover states */
.dark .hover\:bg-gray-50:hover {
  @apply hover:bg-gray-700;
}

.dark .hover\:bg-gray-100:hover {
  @apply hover:bg-gray-700;
}

.dark .active\:bg-gray-50:active {
  @apply active:bg-gray-700;
}

@layer components {
  /* Dropdown styles - simplified */
  .dropdown-base { 
    @apply bg-white rounded-lg shadow-lg border z-50 fixed mt-2 sm:absolute sm:top-full sm:left-1/2 sm:-translate-x-1/2 sm:mt-2;
  }
  
  .dropdown-notification {
    @apply w-[95%] left-[1%] py-3 sm:w-60; 
  }
  
  .dropdown-mobile { 
    @apply w-[40%]  right-[1%] py-5 sm:w-60; 
  }
  
  .dropdown-menu-item { 
    @apply block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50; 
  }

  /* Filter Controls */
  .list-filter-controls { @apply mb-4; }
  .search-box { @apply relative; }
  .search-input { @apply pl-8 pr-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-1 focus:ring-green-700 w-full; }
  .search-btn { @apply absolute right-2 top-2 text-gray-400; }
  
  .filter-dropdown { @apply relative mt-2; }
  .dropdown-toggle { @apply border rounded-md py-2 px-3 text-sm w-full; }
  
  .filter-label { @apply block text-xs font-medium text-gray-500 mb-1; }
  .filter-select { @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 text-sm py-1; }
  .filter-input { @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 text-sm py-1; }
  
  .filter-btn-apply { @apply bg-green-700 text-white text-xs py-1.5 px-3 rounded-md hover:bg-green-800; }
  .filter-btn-reset { @apply bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-md hover:bg-gray-200 text-center; }
  
  .empty-list-message { @apply text-center py-8 text-gray-500; }
  .clear-filters-link { @apply text-green-700 hover:underline text-sm mt-2 inline-block; }

  /* Sidebar Menu */
  .sidemenu_section_text { @apply text-xs font-bold uppercase px-4 py-4; }
  .sidemenu_menu_text { @apply flex items-center text-sm px-4 py-2 mt-2 rounded-md transition-colors duration-150; }
  .sidemenu-width { width:270px; min-width: 250px; }

  /* Icon Filters */ 
  .icon-hijau { filter: brightness(0) saturate(100%) invert(34%) sepia(13%) saturate(4439%) hue-rotate(126deg) brightness(98%) contrast(98%); }
  .icon-white { filter: brightness(0) invert(1); }
  .icon-gray { filter: brightness(0) saturate(100%) invert(87%) sepia(0%) saturate(3056%) hue-rotate(21deg) brightness(80%) contrast(79%); }

  .icon-gray-light { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1085%) hue-rotate(206deg) brightness(113%) contrast(80%); }

  /* Button Components */
  .btn { @apply px-6 py-2.5 text-sm h-[44px] rounded-[4px] font-bold min-w-min w-48 flex items-center justify-center gap-2 ;}
  .btn-primary { @apply bg-hijau text-white py-3 hover:bg-hijau-muda; }
  .btn-secondary { @apply bg-gray-100 text-gray-200 text-gray-500 hover:bg-gray-200;}
  .btn-white { @apply bg-white border text-gray-500 py-3.5 hover:bg-gray-100 w-32;}
  .btn-alternate { @apply bg-green-50 text-green-700 border-green-500 py-3 hover:bg-green-100;}
  
  /* Group Hover Icon Effects */
  .group:hover .icon-hover-white { filter: brightness(0) invert(1); }
  .group:hover .icon-hover-hijau { filter: brightness(0) saturate(100%) invert(34%) sepia(13%) saturate(4439%) hue-rotate(126deg) brightness(98%) contrast(98%); }

  .scrollbar-hide {  -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */  }
  .scrollbar-hide::-webkit-scrollbar { display: none;  /* Chrome, Safari and Opera */  }

  /* Page Layout */
  .page-container   { @apply py-6 px-3 lg:py-8 lg:px-7}
  .page-title       { @apply text-xl font-semibold max-sm:ml-2 lg:pl-2;}
  .page-icon { @apply w-5 h-5 text-gray-600 max-sm:ml-2; }
  .page-description { @apply  text-sm max-sm:pl-[8px] mb-4 lg:pl-2}  
  .page-title-wrapper { @apply flex items-center gap-3 h-12; }
  .left-page-container { @apply min-w-[250px]; }
  .content-wrapper { @apply grid grid-cols-1 md:grid-cols-[300px_1fr] lg:grid-cols-[300px_1fr] gap-6 mb-6 mt-2 }
  .content-wrapper-po { @apply md:grid md:grid-cols-[250px_1fr] 2xl:grid-cols-[300px_1fr] md:gap-6 mb-6 mt-2 items-start; }
  /* Panel Components */
  .panel-main { @apply bg-white rounded-lg border py-3 px-6 pb-6 max-sm:rounded-xl ; }
  .panel-main-title { @apply text-[16px] font-semibold; }
  .panel-main-divider { @apply h-px bg-gray-200 -mx-6 mt-3 mb-4; }

  /* Dark mode panel divider */
  .dark .panel-main-divider {
    @apply bg-[#495955];
  }

  .panel-side { @apply bg-white rounded-lg max-sm:rounded-xl border py-3 px-3 pb-8; }
  .panel-side-title { @apply text-[15px] font-semibold pl-3 pt-1; }
  .panel-side-main { @apply text-[16px] font-semibold pt-1; }
  .panel-side-divider { @apply h-px bg-gray-200 -mx-3 mt-3 mb-5; }

  /* Dark mode panel side divider */
  .dark .panel-side-divider {
    @apply bg-[#495955];
  }

  /* Action Bar Container */
 .action-bar-container { @apply bg-white border border-b-0; }
 .action-bar { @apply flex items-center justify-end py-4 px-6; }
 .action-buttons-group { @apply flex items-center gap-6; }
 .action-button { @apply flex items-center gap-2 text-gray-500 text-sm hover:text-hijau font-semibold pl-4; }
 .action-icon { @apply w-4 h-4 font-semibold; }
 .more-options-button { @apply p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg; }

  /* Data Components */
  .data-search-wrapper { @apply relative mb-4; }
  .data-search-icon { @apply w-5 h-5 absolute left-3 top-3 text-gray-400; }
  .data-search-input { @apply w-full pl-9 pr-4 py-3 text-sm border rounded-md focus:outline-none focus:ring-1 focus:ring-green-700; }

  .data-item { @apply p-3 rounded-md max-sm:rounded-md max-sm:p-4 cursor-pointer border hover:bg-gray-50 mb-3 hover:shadow-lg transition-shadow duration-200; }
  .data-item.active { @apply bg-green-700 text-white; }
  .data-item-header { @apply grid grid-cols-2 items-start gap-2 mb-1; }
  .data-item-footer { @apply grid grid-cols-2 items-start gap-2 mb-1 pt-1; }
  .data-small-left { @apply text-xs text-gray-400 sm:text-gray-600  max-sm:text-gray-600  justify-self-start; }
  .data-small-right { @apply text-xs font-medium  justify-self-end; }
  
  .data-item.active .data-item-footer .data-small-right { @apply text-hijau-trans}  
  .data-item.active .data-main-text .data-small-right { @apply text-hijau-trans}  
  .data-item.active .data-item-footer .data-small-left { @apply text-hijau-trans}
  .data-item.active .data-item-header .data-small-left { @apply text-white/80}
  
  /* Checkmark SVG styling */
  .checkmark-svg { @apply text-green-600; }
  .data-item.active .checkmark-svg { @apply text-white; }
  
  /* Better contrast for relationship indicators when item is active */
  .data-item.active .data-item-active-correction { @apply text-white/90 !important; }
  
  /* Better border visibility for active items */
  .data-item.active .border-gray-200 { @apply border-white/30 !important; }
  
  .badge { @apply text-xs px-3 py-1 rounded-md justify-self-end; }
  .badge-small { @apply text-xs px-4 rounded-md justify-self-end; }
  .data-main-text { @apply grid grid-cols-2 text-[14px] font-semibold; }
  .badge.green { @apply text-green-700; }
  .badge.red { @apply text-red-600; }
  .medium-badge { @apply inline-flex px-3 py-1 rounded-md text-xs font-medium bg-green-50 text-green-700 border border-green-500;}
  .form-badge {@apply ml-4 mt-1 px-2 py-1 text-[12px] bg-green-50 text-hijau rounded font-semibold border  border-green-600 rounded-md;}
  

  .badge.badge-completed { @apply text-green-700 bg-green-50; }
  .badge.badge-issued { @apply text-blue-700 bg-blue-50; }
  .badge.badge-partial { @apply text-white bg-red-500 border-red-950; }
  .badge.badge-process { @apply text-orange-600 bg-orange-100; }
  .badge.badge-voided { @apply text-white bg-gray-700; }
  .medium-badge.badge-completed { @apply text-green-700 bg-green-50; }
  .medium-badge.badge-partial { @apply text-white bg-red-500 border-red-500; }
  .medium-badge.badge-process { @apply text-orange-600 bg-orange-100 border border-orange-300; }
  .medium-badge.badge-voided { @apply text-white bg-gray-700; }

  .data-item.active .badge.badge.badge-issued { @apply text-green-900 bg-blue-100  border-green-700;}
    .data-item.active .badge.badge-completed { @apply text-hijau bg-lime-100  border-green-700;; }
  .data-item.active .badge.badge-partial { @apply text-white bg-red-400; }
  .data-item.active .badge.badge-process { @apply text-green-700 bg-yellow-50; }
  .data-item.active .badge.badge-voided { @apply text-white bg-gray-600; }
  .number-card {@apply text-xl xl:text-2xl font-bold text-gray-700 mt-1 flex items-center  }

  /* Pagination Components */
  .data-pagination { @apply flex justify-center gap-1  mt-6 mb-4 lg:mt-6 sm:mt-6 lg:mb-6 md:mb-6  }
  .pagination-button { @apply w-6 h-6 rounded-md text-sm; }
  .pagination-button-active { @apply bg-green-700 text-white; }
  .pagination-button-default { @apply text-gray-600 hover:bg-gray-100; }
  .pagination-ellipsis { @apply text-gray-600 text-sm self-center; }

  /* Form Components */
  .form-grid-2 { @apply grid grid-cols-2 gap-6; }
  .form-grid-3 { @apply grid grid-cols-3 gap-6; }
  .form-label { @apply pl-1 block text-xs font-semibold text-gray-500 mb-2; }
  .form-input { @apply w-full px-3 py-3 text-sm border rounded-[4px] focus:outline-none focus:ring-1 focus:ring-green-700 font-semibold;}
  .form-input::placeholder { @apply font-normal;}
  .form-input-error { @apply border-red-500 focus:ring-2 focus:ring-red-500 focus:border-transparent; }
  .form-error-msg { @apply text-xs text-red-500 mt-1; }
  .form-label-info {@apply pl-1 text-[14px] font-bold}
  
  /* Radio button styles */
  .form-radio { @apply w-4 h-4 border-gray-300 focus:ring-2 focus:ring-green-500; }
  .form-radio:checked { @apply bg-green-700 border-green-700; }

  /* Form Structure */
  .form-header { @apply flex justify-between items-center mb-3; }
  .form-actions { @apply flex gap-3; }
  .form-wrapper { @apply mt-4; }

  /* Mobile Components */
  .mobile-container { @apply w-full relative md:overflow-x-visible ; }
  .panel { @apply w-full transition-transform duration-300 ease-out md:transition-none; }
  .list-panel { @apply relative translate-x-0 md:translate-x-0 md:relative; }
  .detail-panel { @apply absolute top-0 left-0 translate-x-full md:translate-x-0 md:relative pb-10;  }
  .detail-active .list-panel { 
    transform: translateX(calc(-100% - 20px)); /* Slide with extra 20px */
    @apply md:translate-x-0 
  }
  .detail-active .detail-panel { @apply translate-x-0 ml-0; }
  
  /* Make detail panel content flow naturally - let main handle scrolling */
  @media (max-width: 767px) {
    .detail-active .detail-panel {
      /* Remove height constraints to let main container handle scrolling */
      height: auto !important;
      min-height: auto;
    }
    
    .detail-active .preview-container {
      min-height: fit-content;
    }
  }

  /* Field Display */
  .field-section { @apply mb-8; }
  .field-section-title { @apply text-sm font-semibold mb-4; }
  .field-label { @apply text-xs text-gray-500 mb-1; }
  .field-value { @apply text-sm font-semibold leading-[22px]; }

  /* Upload Components */
  .upload-container { @apply border border-dotted bg-gray-50 rounded-lg p-8 flex flex-col items-center justify-center mt-2; }
  .upload-icon { @apply w-12 h-48 text-gray-400 mb-4; }
  .upload-text { @apply text-sm text-gray-400; }

  /* View Components */
  .view-logo { @apply w-64 h-96; }
  .view-grid-2 { @apply grid grid-cols-2 gap-6 mb-8; }
  .view-grid-3 { @apply grid grid-cols-3 gap-6; }
  .view-grid-2-nested { @apply grid grid-cols-2 gap-4; }

  /* Toggle Components */
  .toggle-switch { @apply relative inline-block w-10 h-6 rounded-full bg-green-700; }
  .toggle-slider { @apply absolute inset-0 rounded-full transition; }
  .toggle-dot { @apply absolute inset-y-0 start-0 m-1 h-4 w-4 rounded-full bg-white transition-all; }
  .toggle-wrapper { @apply mt-6 mb-2; }
  .toggle-label { @apply flex items-center gap-2; }
  .toggle-text { @apply text-sm text-gray-600; }

  .product-type-grid { @apply grid grid-cols-3 gap-4 mb-6; }
  .product-type-button { @apply flex items-center justify-center gap-2 px-4 py-3 border rounded-lg text-sm hover:bg-gray-50; }
  .product-type-button.active { @apply border-green-700 bg-green-50 text-green-700; }

  /* Nested Panel Components */
  .nested-panel { @apply bg-white border rounded-lg mt-6 pb-6; }
  .nested-panel-content { @apply py-3 px-6 max-sm:px-4; }
  .nested-panel-title { @apply text-[14px] font-semibold pt-1; }
  .nested-panel-divider { @apply h-px bg-gray-200 -mx-6 mt-3 mb-6; }

  /* Dark mode nested panel divider */
  .dark .nested-panel-divider {
    @apply bg-[#495955];
  }

  /* Progress Indicators */
  .indicator-label { @apply text-sm text-gray-500; }

  /* Form Field Groups */
  .field-group { @apply flex items-center gap-2; }
  .field-wrapper { @apply flex-1; }
  .field-addon { @apply text-sm text-gray-600 mt-5; }
  .field-required { @apply text-red-500; }
  .city-postal-group { @apply grid grid-cols-2 gap-4; }

  .arrow-text { @apply  font-semibold text-sm text-gray-600 }

  /* Table Components */
  .data-table { @apply w-full mb-6; }
  .table-header { @apply text-left bg-gray-50 py-3 px-4 text-[13px]; }
  .table-cell { @apply  py-3 px-2 text-gray-800 text-[13px] lg:text-[13px]; }
  .table-row { @apply border-b; }
  
  /* Mobile table optimizations */
  @media (max-width: 1023px) {
    .table-cell { 
      @apply text-[16px] py-2;
    }
    .table-header {
      @apply py-2 text-[16px];
    }
    /* Ensure all mobile text is minimum 16px */
   
    /* Exception: Keep product details smaller */
    .mobile-product-details {
      font-size: 12px !important;
    }
    /* Summary section mobile text size */
    .summary-row {
      font-size: 16px !important;
    }
    .summary-total {
      font-size: 16px !important;
    }
    /* Mobile column width optimization */
    .mobile-product-column {
      width: 50% !important;
      max-width: 50% !important;
    }
    .mobile-price-column {
      width: 35% !important;
      min-width: 35% !important;
    }
    /* Smaller action column on mobile */
    .action-column-mobile {
      width: 15% !important;
      min-width: 40px !important;
      max-width: 50px !important;
    }
    /* Goods receipt mobile input column */
    .mobile-input-column {
      width: 50% !important;
      min-width: 50% !important;
    }
    /* Ensure mobile form inputs are properly sized */
    .mobile-input-column .form-input {
      font-size: 16px !important;
      min-height: 44px !important;
    }
    /* Mobile product column for goods receipt */
    .mobile-product-column {
      width: 50% !important;
      max-width: 50% !important;
    }
  }

 /* Summary Section */
  .summary-section { @apply flex justify-end mb-8 text-[14px]; }
  .summary-container { @apply w-full lg:w-[40%] border border-gray-200 rounded-lg p-4 ; }
  .summary-container-print { @apply w-full lg:w-[40%] border border-gray-200 rounded-lg p-4 mr-0; }
  .summary-row { @apply flex justify-between mb-3 font-semibold; }
  .summary-row-print { @apply flex justify-between mb-2 font-semibold; }
  .summary-total { @apply border-t-[1px] flex justify-between font-bold pt-3 text-green-700; }
  
  
 /* Preview Area */
 .preview-container { @apply bg-gray-200  border lg:p-10 p-1; }
 .preview-area { @apply bg-white w-full h-full  flex items-center justify-center; }
 .placeholder-text { @apply text-gray-400; }
  
  /* Document Base Styles */
  .document-font-size { @apply text-[14px]; }
  .document-text { @apply document-font-size text-gray-900 font-normal; }
  .document-heading { @apply text-[14px] font-bold mb-2  text-gray-900; }
  
  /* Document Layout */
  .document-container { @apply bg-white w-full; }
  .document-section { @apply mb-8; }
  .document-header { @apply flex mb-8; }
  
  /* Document Title */
  .document-title { @apply text-center mb-8; }
  .document-title-main { @apply text-lg font-semibold text-green-700; }
  .document-title-sub { @apply document-font-size text-gray-500; }

  /* Address Block */
  .address-block { @apply document-text text-sm text-gray-900; }
  
  /* Signature Section */
  .signature-section { @apply text-right mr-4 mt-10; }
  .signature-name { @apply font-semibold mb-1 text-sm; }
  .signature-space { @apply h-20; }
  .signature-title { @apply text-sm font-bold mr-10; }

    /* Info Sections */
    .info-grid { @apply grid grid-cols-[180px_1fr] gap-y-4; }
    .info-label { @apply document-font-size font-bold; }
    .info-value { @apply document-font-size text-gray-800; }
    
 /* Stock Movement Table Styles */
.stock-movement-table-head { @apply bg-gray-50; }
.stock-movement-table-body { @apply bg-white divide-y divide-gray-200; }
.stock-movement-row { @apply hover:bg-gray-50 transition-colors duration-150; }
.stock-movement-th { @apply py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider; }
.stock-movement-td { @apply py-4 text-sm text-gray-500; }
.stock-movement-date { @apply font-medium text-gray-700; }
.stock-movement-time { @apply text-xs text-gray-400; }
.stock-movement-product-name { @apply text-sm font-medium text-gray-900; }
.stock-movement-product-details { @apply text-xs text-gray-500; }
.stock-movement-type-badge { @apply inline-flex items-center justify-center rounded-full text-xs font-medium; }
.stock-movement-warehouse { @apply text-gray-600; }
.stock-movement-quantity { @apply font-medium; }
.stock-movement-notes { @apply text-sm text-gray-500 break-words; }
.stock-movement-creator { @apply text-gray-600; }

    #backButton{
      display: none;
    }
  
  .scrollbar::-webkit-scrollbar {
    width: 15px;
    height: 15px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #f7f4ed;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #abc6b1;
    border-radius: 100vh;
    border: 3px solid #f6f7ed;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #85988d;
  }

  /* Fixed sidebar positioning */
  #sidebar {
    /* Fixed height regardless of screen size */
    height: calc(100vh - 68px) !important; /* Force consistent height */
    top: 68px !important; /* Force consistent top position */
    position: fixed;
    /* Ensure proper z-index */
    z-index: 40;
    /* Make sure transitions are smooth */
    transition: width 0.3s ease-in-out;
    /* Hardware acceleration for smoother transitions */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: width;
  }

  /* Dynamic main content - without flickering */
  main {
    /* Default margin - will be controlled by JS */
    margin-left: 4rem; /* Default for collapsed sidebar (w-16 = 4rem) */
    /* Smoother transitions */
    transition: margin-left 0.3s ease-out;
  }

  /* Important mobile adjustments */
  @media (max-width: 767px) {
    main {
      margin-left: 4rem ; /* Always fixed margin on mobile */
    }
  }
  
  /* Make sure the sidebar navigation scrolls properly */
  #sidebarNav {
    height: calc(100% - 2rem) !important; /* Consistent height accounting for padding */
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 1rem !important; /* Force reduced top padding */
  }
  
  /* Improved and simplified skeleton loader */
  .sidebar-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    pointer-events: none;
    opacity: 0; /* Start hidden by default */
    transition: opacity 0.2s ease;
    z-index: 99; /* High z-index to ensure it's on top */
    display: none; /* Additional layer of hiding */
  }

  /* Only show skeleton when explicitly loading AND not hidden by JS */
  .sidebar-loading .sidebar-skeleton:not([style*="display: none"]) {
    opacity: 1;
    display: block;
  }
  
  /* Ensure skeleton items animate properly */
  .loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }

  /* New gradient shimmer animation - Balanced visibility */
  .skeleton-shimmer {
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 30%, #d1d5db 50%, #e5e7eb 70%, #f3f4f6 100%);
    background-size: 300% 100%;
    animation: shimmer 2s infinite ease-in-out;
    position: relative;
    overflow: hidden;
  }

  .skeleton-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.3) 30%, 
      rgba(255, 255, 255, 0.6) 50%, 
      rgba(255, 255, 255, 0.3) 70%, 
      transparent 100%
    );
    animation: shimmerEffect 2s infinite ease-in-out;
    z-index: 1;
  }

  @keyframes shimmer {
    0% {
      background-position: -300% 0;
    }
    100% {
      background-position: 300% 0;
    }
  }

  @keyframes shimmerEffect {
    0% {
      left: -100%;
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }

  /* Hide all actual menu items when loading */
  .sidebar-loading #sidebarNav > div:not(.sidebar-skeleton) {
    visibility: hidden;
  }
  
  /* Better mobile support for sidebar */
  @media (max-width: 767px) {
    /* Ensure sidebar stays on top when expanded on mobile */
    #sidebar.w-60 {
      z-index: 40;
    }
  }
  
  /* Fix transitions on Turbo navigation */
  .turbo-progress-bar {
    z-index: 100; /* Ensure progress bar is visible above sidebar */
  }

  #floatingBackButton {
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  #floatingBackButton:hover {
    transform: scale(1.05);
  }
  
  #floatingBackButton.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
  }
  
  /* Mobile responsive adjustments */
  @media (max-width: 767px) {
    #rightPanel {
      margin-left: 0 !important;
    }
  }

  /* Prevent iOS zoom by ensuring 16px font size on mobile */
  @media screen and (max-width: 767px) {
    input, select, textarea {
      font-size: 16px !important;
    }
  }

  /* Supplier Delivery Order Styles */
  .detail-content { @apply p-6; }
  .detail-header { @apply flex justify-between items-center mb-6; }
  .detail-title { @apply text-xl font-semibold; }
  .detail-status { @apply flex items-center gap-2; }
  
  .detail-section { @apply mb-8; }
  .section-title { @apply text-lg font-semibold mb-4; }
  .detail-grid { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4; }
  .detail-item { @apply flex flex-col; }
  .detail-label { @apply text-sm text-gray-500; }
  .detail-value { @apply text-base font-medium; }
  .detail-notes { @apply bg-gray-50 p-4 rounded-lg text-sm; }
  
  .driver-info { @apply bg-gray-50 p-4 rounded-lg; }
  
  .detail-table-container { @apply overflow-x-auto; }
  .detail-table { @apply w-full text-sm; }
  .detail-table thead { @apply bg-gray-50; }
  .detail-table th { @apply px-4 py-3 text-left font-semibold text-gray-600; }
  .detail-table td { @apply px-4 py-3 border-t; }
  .detail-table tfoot { @apply bg-gray-50 font-semibold; }
  .text-right { @apply text-end; }
  
  .document-container { @apply mt-4; }
  .document-item { @apply flex items-center justify-between bg-gray-50 p-4 rounded-lg; }
  .document-icon { @apply flex flex-col items-center justify-center w-12 h-12 rounded-lg text-white; }
  .pdf-icon { @apply bg-red-500; }
  .image-icon { @apply bg-blue-500; }
  .document-info { @apply flex-1 px-4; }
  .document-name { @apply font-medium; }
  .document-meta { @apply flex text-xs text-gray-500 gap-4 mt-1; }
  .document-actions { @apply flex items-center; }
  .document-download { @apply flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900; }
  .empty-document { @apply flex flex-col items-center justify-center bg-gray-50 p-8 rounded-lg text-gray-400; }
  
  /* Print Styles */
  .print-document { @apply max-w-4xl mx-auto bg-white p-8 shadow-lg; }
  .print-header { @apply flex justify-between mb-8 border-b pb-6; }
  .company-info { @apply flex-1; }
  .company-name { @apply text-2xl font-bold text-gray-800; }
  .company-address, .company-contact { @apply text-sm text-gray-600 mt-1; }
  .document-title { @apply text-right; }
  .document-number { @apply text-lg font-bold mt-2 text-gray-800; }
  
  .print-section { @apply mb-8; }
  .order-info { @apply bg-gray-50 p-4 rounded-lg; }
  .print-row { @apply flex flex-wrap mb-2 last:mb-0; }
  .print-col { @apply w-full md:w-1/2 mb-2 md:mb-0; }
  .print-label { @apply text-sm font-bold text-gray-600; }
  .print-value { @apply text-base; }
  
  .print-table { @apply w-full border-collapse; }
  .print-table th { @apply bg-gray-100 px-4 py-2 text-sm font-bold text-left border; }
  .print-table td { @apply px-4 py-2 text-sm border; }
  .print-table tfoot { @apply font-bold; }
  
  .print-notes { @apply text-sm mt-1; }
  
  .signatures { @apply mt-16; }
  .signature-row { @apply flex justify-between; }
  .signature-col { @apply w-1/3 text-center; }
  .signature-title { @apply text-sm font-bold mb-12; }
  .signature-line { @apply w-full border-t border-gray-400 my-2; }
  .signature-name { @apply text-sm font-medium; }
  .signature-role { @apply text-xs text-gray-500; }
  
  .print-footer { @apply mt-16 pt-4 border-t flex justify-between text-xs text-gray-500; }

  
  .print-actions { @apply flex justify-center mt-6; }
  .print-button { @apply flex items-center gap-2 bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800; }
  .print-icon { @apply w-5 h-5; }
  
  /* Form Styles */
  .form-container { @apply bg-white rounded-lg border p-6 max-w-5xl mx-auto; }
  .form { @apply space-y-8; }
  .form-section { @apply border-b pb-6 last:border-b-0; }
  .form-grid { @apply grid grid-cols-1 md:grid-cols-2 gap-6; }
  .form-group { @apply mb-4; }
  .form-label { @apply block text-sm font-medium text-gray-700 mb-1; }
  .form-label.required:after { @apply content-['*'] ml-1 text-red-500; }
  .form-textarea { @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50; }
  .form-select { @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50; }
  .form-errors { @apply bg-red-50 text-red-700 p-4 rounded-lg mb-6; }
  .form-actions { @apply flex justify-end gap-4 pt-6; }
  
  .sales-order-details { @apply bg-gray-50 p-4 rounded-lg mt-2 mb-4; }
  .sales-order-details.hidden { display: none; }
  .sales-order-details.loading { @apply opacity-50; }
  .sales-order-info { @apply grid grid-cols-1 md:grid-cols-3 gap-4; }
  .info-label { @apply text-sm font-medium text-gray-600; }
  .info-value { @apply text-base font-semibold; }
  
  .items-container { @apply mt-4 overflow-x-auto; }
  .items-table { @apply w-full text-sm; }
  .items-table th { @apply px-4 py-2 text-left bg-gray-50; }
  .items-table td { @apply px-4 py-2; }
  .no-items, .loading-items, .error-items { @apply text-center py-4 text-gray-500; }
  .error-items { @apply text-red-500; }
  .loading-items { @apply text-blue-500; }
  
  .quantity-input { @apply w-24; }
  .unit-input { @apply w-20; }
  .remove-item-btn { @apply text-red-500 hover:text-red-700; }
  .remove-icon { @apply w-5 h-5; }
  
  .file-upload-container { @apply relative; }
  .file-input { display: none; }
  .file-upload-button { @apply flex items-center gap-2 bg-gray-50 border border-gray-300 rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer; }
  .upload-icon { @apply w-5 h-5 text-gray-500; }
  
  .current-attachment { @apply flex items-center justify-between bg-gray-50 p-3 rounded-lg mt-2; }
  .attachment-info { @apply flex items-center gap-3; }
  .attachment-icon { @apply w-8 h-8 p-1 rounded-lg text-white; }
  .attachment-actions { @apply flex items-center gap-4; }
  .attachment-link { @apply text-blue-600 hover:text-blue-800 text-sm; }
  .remove-attachment { @apply flex items-center gap-1; }
  .remove-checkbox { @apply h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded; }
  .remove-label { @apply text-sm text-red-600; }
  
  /* Master-Detail Layout */
  .master-detail-container { @apply grid grid-cols-1 md:grid-cols-[350px_1fr] gap-6; }
  .master-panel { @apply bg-white rounded-lg border overflow-hidden; }
  .panel-header { @apply flex justify-between items-center p-4 border-b; }
  .panel-title { @apply text-lg font-semibold; }
  .panel-actions { @apply flex items-center gap-2; }
  
  .search-container { @apply relative; }
  .search-input { @apply pl-8 pr-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-1 focus:ring-green-700 w-full; }
  .search-icon { @apply w-4 h-4 absolute left-2 top-2 text-gray-400; }
  
  .list-container { @apply overflow-y-auto max-h-[calc(100vh-220px)]; }
  .list-item { @apply block border-b p-4 hover:bg-gray-50 cursor-pointer; }
  .list-item.active { @apply bg-green-50 border-l-4 border-l-green-700; }
  .list-item-header { @apply flex justify-between items-center mb-2; }
  .list-item-code { @apply font-semibold; }
  .list-item-date { @apply text-sm text-gray-500; }
  .list-item-content { @apply space-y-2 mb-3; }
  .list-item-info { @apply flex text-sm; }
  .list-item-label { @apply text-gray-500 w-24; }
  .list-item-supplier, .list-item-driver { @apply font-medium; }
  .list-item-footer { @apply flex justify-end; }
  
  .empty-detail-state { @apply flex flex-col items-center justify-center p-12 text-center; }
  .empty-icon { @apply w-16 h-16 text-gray-300 mb-4; }
  .empty-title { @apply text-lg font-semibold text-gray-700 mb-2; }
  .empty-description { @apply text-gray-500 mb-6; }
  .empty-action { @apply bg-green-700 text-white px-4 py-2 rounded-md hover:bg-green-800; }
  
  .empty-state { @apply flex flex-col items-center justify-center p-12 text-center; }
  
  /* Action Bar */
  .action-bar { @apply flex justify-between items-center border-b p-4; }
  .action-tabs { @apply flex gap-1; }
  .action-tab { @apply flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md; }
  .action-tab.active { @apply bg-green-50 text-green-700 font-medium; }
  .action-tab-icon { @apply w-4 h-4; }
  .action-buttons { @apply flex items-center gap-2; }
  .action-button { @apply flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-100; }
  .action-button-icon { @apply w-4 h-4; }
  .action-button-danger { @apply text-red-600 hover:text-red-700 hover:bg-red-50; }

  /* Enhanced styling for approve button */
  .action-button-approve {
    @apply text-center bg-green-50 text-green-700 border border-green-600 hover:bg-green-100 hover:text-green-800 hover:border-green-300;
  }

  .action-button-approve svg {
    @apply text-green-600;
  }

  /* Enhanced styling for issue button */
  .action-button-issue {
    @apply text-center bg-green-50 text-green-700 border border-green-600 hover:bg-green-100 hover:text-green-800 hover:border-green-300;
  }

  .action-button-issue svg {
    @apply text-green-600;
  }

  /* Invoice Mode Selection Buttons */
  .btn-mode-active { @apply border-green-700 bg-green-50 text-green-700 font-semibold hover:bg-green-100; }
  .btn-mode-inactive { @apply border-gray-300 bg-white text-gray-700 font-semibold hover:bg-gray-50; }

  /* Invoice dropdown styling - green bold for quantities and sources */
  .quantity-bold {
    @apply font-bold text-hijau;
  }
  
  .source-bold {
    @apply font-bold text-hijau;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  .print-document, .print-document * {
    visibility: visible;
  }
  .print-document {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
  }
  .print-actions {
    display: none;
  }
}

/* Add overrides for important components */
.dark .badge {
  @apply text-white;
}

.dark .data-item.active {
  @apply bg-green-800 text-white;
}

.dark .badge.badge-completed,
.dark .badge.badge-issued,
.dark .badge.badge-process,
.dark .medium-badge.badge-completed,
.dark .medium-badge.badge-process {
  @apply text-white;
}

.dark .badge.badge-partial,
.dark .medium-badge.badge-partial {
  @apply bg-red-800 text-white;
}

/* Ensure hijau (green) branded elements still appear with proper contrast */
.dark .text-hijau {
  @apply text-green-400;
}

.dark .hover\:text-hijau:hover {
  @apply hover:text-green-300;
}

.dark .bg-hijau {
  @apply bg-green-600;
}

/* Make main content area dark */
.dark main.bg-gray-100 {
  @apply bg-gray-900;
}

/* Fix sidebar colors */
.dark #sidebar {
  @apply bg-gray-800 border-gray-700;
}

/* Fix table colors */
.dark .table-header,
.dark .bg-gray-50 {
  @apply bg-gray-700;
}

.dark .data-small-left {
  @apply text-white opacity-70;
}

/* Force all form labels to use white text */
.dark .form-label {
  @apply text-white opacity-90 !important;
}

/* Top navbar styling moved below */

/* Dropdown text styling moved to theme-specific sections */

/* Make top navbar responsive to theme */
#mainNav {
  @apply bg-white border-b border-gray-100 text-gray-700;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.03);
}

.dark #mainNav {
  @apply bg-gray-800 border-gray-700 text-white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark mode button specific styles */
.dark #mainNav .dark\:text-gray-300 {
  @apply text-gray-300;
}

.dark #mainNav .hover\:text-hijau:hover {
  @apply hover:text-green-400;
}

/* Make sidebar responsive to theme */
#sidebar {
  @apply bg-white border-r border-gray-100;
}

.dark #sidebar {
  @apply bg-gray-800;
  border-right: 1px solid #495955; /* Equivalent to border-gray-800 */
}

/* Dark panel borders */
.dark .panel-main,
.dark .panel-side {
  background-color: rgb(31, 41, 55); /* Equivalent to bg-gray-800 */
  border: 1px solid #495955; /* Equivalent to border-gray-900 */
}

.dark .action-bar-container {
  background-color: rgb(31, 41, 55); /* Equivalent to bg-gray-800 */
  border: 1px solid #495955; /* Equivalent to border-gray-900 */
  border-bottom: none;
}

/* Additional dark mode border styles */
.dark .border {
  border-color: #495955; /* Equivalent to border-gray-900 */
}

.dark .border-t {
  border-top-color: #495955; /* Equivalent to border-gray-900 */
}

.dark .border-b {
  border-bottom-color: #495955; /* Equivalent to border-gray-900 */
}

.dark .border-l {
  border-left-color: #495955; /* Equivalent to border-gray-900 */
}

.dark .border-r {
  border-right-color: #495955; /* Equivalent to border-gray-900 */
}

/* Dark mode card and interactive element borders */
.dark .data-item,
.dark .dropdown-base {
  border-color: #495955; /* Equivalent to border-gray-900 */
}

/* Fix panel backgrounds in dark mode */



.badge.badge-completed { @apply text-green-700 bg-green-50; }

/* Dark mode badge overrides */
.dark .badge.badge-completed { @apply text-green-300 bg-green-900/50; }
.dark .badge.badge-issued { @apply text-blue-300 bg-blue-900/50; }
.dark .badge.badge-partial { @apply text-white bg-red-600; }
.dark .badge.badge-process { @apply text-orange-300 bg-orange-900/50; }
.dark .badge.badge-voided { @apply text-white bg-gray-700; }

.medium-badge.badge-completed { @apply text-green-700 bg-green-50; }
.medium-badge.badge-partial { @apply text-white bg-red-500 border-red-500; }
.medium-badge.badge-process { @apply text-orange-600 bg-orange-100 border border-orange-300; }
.medium-badge.badge-voided { @apply text-white bg-red-700; }

/* Dark mode medium badge overrides */
.dark .medium-badge.badge-completed { @apply text-green-300 bg-green-900/50 border-green-700; }
.dark .medium-badge.badge-partial { @apply text-white bg-red-600 border-red-500; }
.dark .medium-badge.badge-process { @apply text-orange-300 bg-orange-900/50 border-orange-700; }
.dark .medium-badge.badge-voided { @apply text-white bg-gray-700; }

/* Dark mode skeleton shimmer - Balanced visibility */
.dark .skeleton-shimmer {
  background: linear-gradient(90deg, #374151 0%, #4b5563 30%, #6b7280 50%, #4b5563 70%, #374151 100%);
  background-size: 300% 100%;
}

.dark .skeleton-shimmer::before {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.15) 30%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0.15) 70%, 
    transparent 100%
  );
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Void Record Styling */
.void-record {
  opacity: 0.7;
  background-color: #fef2f2; /* Light red background */
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.void-badge {
  background-color: #dc2626; /* Red background */
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.void-text {
  text-decoration: line-through;
  color: #6b7280 !important; /* Gray color with importance */
}

/* Additional void styling for better visual hierarchy */
.void-record .void-text {
  opacity: 0.8;
}

.void-record:hover {
  opacity: 0.9;
  background-color: #fecaca; /* Slightly darker red on hover */
}

/* Large Diagonal VOID Watermark */
.void-watermark {
  position: relative;
  overflow: hidden;
}

.void-watermark::before {
  content: "VOID";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 120px;
  font-weight: 900;
  color: rgba(220, 38, 38, 0.15); /* Very light red */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.2em;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: 'Arial Black', 'Helvetica', sans-serif;
}

/* Responsive sizing for the watermark */
@media (max-width: 768px) {
  .void-watermark::before {
    font-size: 80px;
  }
}

@media (max-width: 480px) {
  .void-watermark::before {
    font-size: 60px;
  }
}

/* Subtle background dimming for voided content */
.void-watermark {
  background-color: rgba(254, 242, 242, 0.3); /* Very light red tint */
  border-radius: 8px;
}

/* Additional styling for voided document container */
.void-document {
  border: 2px solid #fecaca; /* Light red border */
  position: relative;
}

/* Print-specific watermark styling */
@media print {
  .void-watermark::before {
    color: rgba(220, 38, 38, 0.25) !important; /* Slightly darker for print visibility */
    font-size: 100px !important;
  }
}