/* Table styling improvements */
      .table {
          width: 100%;
          margin-bottom: 1rem;
          color: #212529;
          border-collapse: collapse;
      }
      
      .table>thead>tr>th, .table>thead>tr>td {
          padding: 0.75rem;
          vertical-align: bottom;
          border-bottom: 2px solid #dee2e6;
          font-weight: 600;
          background-color: #f8f9fa;
      }
      
      .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th {
          padding: 0.75rem;
          vertical-align: top;
          border-top: 1px solid #dee2e6;
      }
      
      .table-bordered {
          border: 1px solid #dee2e6;
      }
      
      .table-bordered>thead>tr>th, .table-bordered>thead>tr>td,
      .table-bordered>tbody>tr>th, .table-bordered>tbody>tr>td,
      .table-bordered>tfoot>tr>th, .table-bordered>tfoot>tr>td {
          border: 1px solid #dee2e6;
      }
      
      .table-striped>tbody>tr:nth-of-type(odd) {
          background-color: rgba(0, 0, 0, 0.02);
      }
      
      .table-striped>tbody>tr:nth-of-type(even) {
          background-color: rgba(0, 0, 0, 0.05);
      }
      
      .table-hover>tbody>tr:hover {
          background-color: rgba(0, 0, 0, 0.075);
      }
      
      .table-responsive {
          display: block;
          width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
      }
      
      /* DataTables styling */
      .dataTables_wrapper {
          padding: 1rem 0;
      }
      
      .dataTables_wrapper .dataTables_length,
      .dataTables_wrapper .dataTables_filter {
          margin-bottom: 1rem;
      }
      
      .dataTables_wrapper .dataTables_length label,
      .dataTables_wrapper .dataTables_filter label {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 0;
      }
      
      .dataTables_wrapper .dataTables_length select,
      .dataTables_wrapper .dataTables_filter input {
          padding: 0.375rem 0.75rem;
          border: 1px solid #ced4da;
          border-radius: 0.25rem;
          margin: 0 0.5rem;
      }
      
      .dataTables_wrapper .dataTables_info {
          padding-top: 0.75rem;
      }
      
      .dataTables_wrapper .dataTables_paginate {
          padding-top: 0.75rem;
      }
      
      .dataTables_wrapper .dataTables_paginate .paginate_button {
          padding: 0.375rem 0.75rem;
          margin-left: 0.25rem;
          border: 1px solid #dee2e6;
          border-radius: 0.25rem;
          cursor: pointer;
      }
      
      .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
          background-color: #e9ecef;
          border-color: #dee2e6;
      }
      
      .dataTables_wrapper .dataTables_paginate .paginate_button.current {
          background-color: #0d6efd;
          color: #fff;
          border-color: #0d6efd;
      }
      
      .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
          opacity: 0.5;
          cursor: not-allowed;
      }
      
      /* Table action buttons */
      .table .btn-group .btn {
          margin: 0 2px;
      }
      
      /* Fix table width issues */
      .table-responsive table {
          min-width: 100%;
      }
      
      .table th[width="10px"],
      .table td[width="10px"] {
          width: 40px !important;
          min-width: 40px;
          max-width: 40px;
      }
      
      .table th[width="80px"],
      .table td[width="80px"] {
          width: 80px !important;
          min-width: 80px;
          max-width: 80px;
      }
      
      .table th[width="140px"],
      .table td[width="140px"] {
          width: 140px !important;
          min-width: 140px;
          max-width: 140px;
      }
      
      .table th[width=""],
      .table td[width=""] {
          width: 30px !important;
          min-width: 30px;
          max-width: 30px;
      }
      
      /* Better table header alignment */
      .table thead th {
          text-align: left;
          white-space: nowrap;
      }
      
      .table thead th.text-center,
      .table tbody td.text-center {
          text-align: center;
      }
      
      /* DataTables processing overlay */
      .dataTables_processing {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 60px;
          margin-left: -50%;
          margin-top: -30px;
          padding-top: 20px;
          text-align: center;
          font-size: 1.2em;
          background-color: white;
          background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
          background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
          background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
          background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
          background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
          background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
      }
      
      /* DataTables empty state */
      .dataTables_empty {
          text-align: center;
          padding: 2rem !important;
          color: #6c757d;
      }
      
      /* Responsive table improvements */
      @media (max-width: 768px) {
          .table-responsive {
              border: 1px solid #dee2e6;
          }
          
          .dataTables_wrapper .dataTables_length,
          .dataTables_wrapper .dataTables_filter {
              text-align: left;
          }
          
          .dataTables_wrapper .dataTables_length label,
          .dataTables_wrapper .dataTables_filter label {
              flex-direction: column;
              align-items: flex-start;
          }
      }
      .btn{
        padding: 5px 10px;
        font-size: 12px;
      }
      .btn-group-xs>.btn, .btn-xs {
          padding: 1px 5px;
          font-size: 10px;
          line-height: 1.5;
          border-radius: 3px;
      }
      .dt-body-center{
        text-align: center;
      }
      /* Bootstrap 5 compatibility */
      .btn-default { background-color: #e9ecef; border-color: #dee2e6; color: #212529; }
      .btn-default:hover { background-color: #dee2e6; border-color: #ced4da; }
      .btn-flat { border-radius: 0; }
      /* AdminLTE 2 to 4 compatibility */
      .box { display: block; margin-bottom: 1.5rem; background: #fff; border-radius: 0.25rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); }
      .box-header { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(0,0,0,.125); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
      .box-title { margin: 0; font-size: 1.25rem; }
      .box-body { padding: 1rem; }
      .box-footer { padding: 0.75rem 1rem; border-top: 1px solid rgba(0,0,0,.125); }
      .box-tools { display: flex; }
      .btn-box-tool { padding: 0.25rem 0.5rem; background: transparent; border: 0; }
      .pull-left { float: left !important; }
      .pull-right { float: right !important; }
      .clearfix::after { content: ""; display: table; clear: both; }
      .label { display: inline-block; padding: 0.25em 0.6em; font-size: 75%; font-weight: 700; line-height: 1; border-radius: 0.25rem; }
      .label-success { background-color: #198754; color: #fff; }
      .label-primary { background-color: #0d6efd; color: #fff; }
      .label-warning { background-color: #ffc107; color: #212529; }
      .label-danger { background-color: #dc3545; color: #fff; }
      .label-info { background-color: #0dcaf0; color: #212529; }
      .progress { height: 1.5rem; overflow: hidden; background-color: #e9ecef; border-radius: 0.25rem; }
      .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; transition: width 0.6s ease; }
      .progress-bar-red { background-color: #dc3545; }
      .progress-bar-yellow { background-color: #ffc107; }
      .progress-sm { height: 0.75rem; }
      .progress-bar-striped { background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; }
      .small-box .inner h3, .small-box .inner p { margin: 0; }
      .small-box .icon { font-size: 4rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); opacity: .3; }
      .small-box.bg-teal { background-color: #20c997; color: #fff; }
      .small-box.bg-purple { background-color: #6f42c1; color: #fff; }
      .small-box.bg-blue { background-color: #0d6efd; color: #fff; }
      .small-box.bg-orange { background-color: #fd7e14; color: #fff; }
      .small-box.bg-red { background-color: #dc3545; color: #fff; }
      .small-box.bg-green { background-color: #198754; color: #fff; }
      .small-box { border-radius: 0.25rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); position: relative; display: block; margin-bottom: 1.5rem; padding: 1rem; overflow: hidden; }
      .small-box .small-box-footer { display: block; padding: 0.5rem 1rem; color: rgba(255,255,255,.8); background: rgba(0,0,0,.1); text-align: center; text-decoration: none; }
      .small-box .small-box-footer:hover { color: #fff; background: rgba(0,0,0,.2); }
      .direct-chat-messages { height: 250px; overflow: auto; padding: 0.5rem; }
      .direct-chat-msg { margin-bottom: 1rem; display: flex; }
      .direct-chat-msg.right { flex-direction: row-reverse; }
      .direct-chat-info { margin-bottom: 0.25rem; }
      .direct-chat-img { border-radius: 50%; width: 40px; height: 40px; object-fit: cover; margin: 0 0.5rem; }
      .direct-chat-text { padding: 0.5rem 1rem; border-radius: 0.5rem; background: #f8f9fa; max-width: 70%; }
      .direct-chat-msg.right .direct-chat-text { background: #0d6efd; color: #fff; }
      .callout { padding: 1rem 1.5rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
      .callout-info { background-color: #cff4fc; border-color: #9eeaf9; color: #055160; }
      .callout-warning { background-color: #fff3cd; border-color: #ffecb5; color: #664d03; }
      .callout-danger { background-color: #f8d7da; border-color: #f5c2c7; color: #842029; }
      .callout-success { background-color: #d1e7dd; border-color: #a3cfbb; color: #0f5132; }
      @media (max-width: 767px) { .hidden-xs { display: none !important; } }
      @media (min-width: 768px) { .hidden-xs { display: block !important; } }
      /* SmartWizard + Bootstrap 5 compatibility */
      .sw-main ul.step-anchor { 
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        padding: 0; 
        margin: 0 0 1.5rem; 
        list-style: none; 
        gap: 0.5rem; 
        overflow-x: auto;
      }
      .sw-main ul.step-anchor > li { 
        flex: 1 1 auto; 
        min-width: 100px; 
        max-width: none;
      }
      .sw-main ul.step-anchor > li > a { 
        display: block; 
        padding: 0.75rem; 
        text-align: center; 
        white-space: nowrap;
      }
      .sw-main .sw-toolbar { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 1rem 0; margin-top: 1rem; border-top: 1px solid #dee2e6; }
      .sw-main .sw-toolbar .btn { padding: 0.5rem 1rem; }
      .sw-main .sw-toolbar .btn.disabled { pointer-events: none; opacity: .6; }
      /* Tombol Selanjutnya dan Sebelumnya - Primary Blue */
      .sw-btn-next, .sw-btn-prev { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }
      .sw-btn-next:hover, .sw-btn-prev:hover { background-color: #0b5ed7 !important; border-color: #0a58ca !important; color: #fff !important; }
      .sw-btn-next.disabled, .sw-btn-prev.disabled { background-color: #6c757d !important; border-color: #6c757d !important; opacity: .6; }
      /* Validasi form */
      .is-invalid { border-color: #dc3545 !important; }
      .invalid-feedback { display: block; width: 100%; margin-top: 0.25rem; font-size: 0.875rem; color: #dc3545; }
      .select2-container--default .select2-selection--single.is-invalid { border-color: #dc3545 !important; }
      .select2-container .select2-selection.is-invalid { border-color: #dc3545 !important; }
      .select2-container.is-invalid .select2-selection { border-color: #dc3545 !important; }
      
      /* Timeline fixes for AdminLTE compatibility */
      .timeline {
          position: relative;
          margin: 0 0 30px 0;
          padding: 0;
          list-style: none;
      }
      
      .timeline:before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          width: 4px;
          background: #ddd;
          left: 31px;
          margin: 0;
          border-radius: 2px;
      }
      
      .timeline > li {
          position: relative;
          margin-right: 10px;
          margin-bottom: 15px;
      }
      
      .timeline > li:before,
      .timeline > li:after {
          content: " ";
          display: table;
      }
      
      .timeline > li:after {
          clear: both;
      }
      
      .timeline > li > .timeline-item {
          -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          border-radius: 3px;
          margin-top: 0;
          background: #fff;
          color: #444;
          margin-left: 60px;
          margin-right: 15px;
          padding: 0;
          position: relative;
      }
      
      .timeline > li > .timeline-item > .time {
          color: #999;
          float: right;
          padding: 10px;
          font-size: 12px;
      }
      
      .timeline > li > .timeline-item > .timeline-header {
          margin: 0;
          color: #555;
          border-bottom: 1px solid #f4f4f4;
          padding: 10px;
          font-size: 16px;
          line-height: 1.1;
      }
      
      .timeline > li > .timeline-item > .timeline-header > a {
          font-weight: 600;
          color: #555;
          text-decoration: none;
      }
      
      .timeline > li > .timeline-item > .timeline-header > a:hover {
          color: #3c8dbc;
      }
      
      .timeline > li > .timeline-item > .timeline-body,
      .timeline > li > .timeline-item > .timeline-footer {
          padding: 10px;
      }
      
      .timeline > li > .fa,
      .timeline > li > .glyphicon,
      .timeline > li > .ion {
          width: 30px;
          height: 30px;
          font-size: 15px;
          line-height: 30px;
          position: absolute;
          color: #fff;
          background: #d2d6de;
          border-radius: 50%;
          text-align: center;
          left: 18px;
          top: 0;
      }
      
      .timeline > li > .fa.bg-blue {
          background-color: #3c8dbc !important;
      }
      
      .timeline > li > .fa.bg-green {
          background-color: #00a65a !important;
      }
      
      .timeline > li > .fa.bg-yellow {
          background-color: #f39c12 !important;
      }
      
      .timeline > li > .fa.bg-red {
          background-color: #dd4b39 !important;
      }
      
      .timeline > li > .fa.bg-gray {
          background-color: #d2d6de !important;
      }
      
      .timeline > .time-label {
          position: relative;
      }
      
      .timeline > .time-label > span {
          font-weight: 600;
          padding: 5px 10px;
          display: inline-block;
          background-color: #fff;
          border-radius: 4px;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      }
      
      .timeline > .time-label > span.bg-green {
          background-color: #00a65a !important;
          color: #fff;
      }
      
      .timeline > .time-label > span.bg-blue {
          background-color: #3c8dbc !important;
          color: #fff;
      }
      
      .timeline > .time-label > span.bg-yellow {
          background-color: #f39c12 !important;
          color: #fff;
      }
      
      .timeline > .time-label > span.bg-red {
          background-color: #dd4b39 !important;
          color: #fff;
      }
      
      /* Nav Tabs Custom - Bootstrap 5 compatibility */
      .nav-tabs-custom {
          margin-bottom: 20px;
          background: #fff;
          box-shadow: 0 1px 1px rgba(0,0,0,.1);
          border-radius: 3px;
      }
      
      .nav-tabs-custom > .nav-tabs {
          margin: 0;
          border-bottom-color: #f4f4f4;
          list-style: none;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
      }
      
      .nav-tabs-custom > .nav-tabs > li {
          border-top: 3px solid transparent;
          margin-bottom: -1px;
          margin-right: 5px;
      }
      
      .nav-tabs-custom > .nav-tabs > li > .nav-link,
      .nav-tabs-custom > .nav-tabs > li > a {
          border: 1px solid transparent;
          border-radius: 0;
          color: #444;
          padding: 10px 15px;
          text-decoration: none;
          background: transparent;
          border: none;
          cursor: pointer;
      }
      
      .nav-tabs-custom > .nav-tabs > li > .nav-link:hover,
      .nav-tabs-custom > .nav-tabs > li > a:hover {
          color: #999;
      }
      
      .nav-tabs-custom > .nav-tabs > li.active > .nav-link,
      .nav-tabs-custom > .nav-tabs > li.active > a,
      .nav-tabs-custom > .nav-tabs > li > .nav-link.active {
          color: #555;
          cursor: default;
          background-color: #fff;
          border: 1px solid #ddd;
          border-bottom-color: transparent;
      }
      
      .nav-tabs-custom > .nav-tabs > li.active {
          border-top-color: #3c8dbc;
      }
      
      .nav-tabs-custom > .tab-content {
          background: #fff;
          padding: 10px;
          border-radius: 0 0 3px 3px;
      }
      
      .nav-tabs-custom > .nav-tabs > li.ms-auto {
          margin-left: auto;
      }