/* ==========================================================================
   ORGANISMS / data-table / data-table.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <div class="data-table-wrapper">

       <!-- Toolbar -->
       <div class="data-table-toolbar">
         <div class="data-table-toolbar-left">
           <div class="search-bar search-bar-sm" style="width:260px">
             <span class="search-bar-icon"><!-- svg search --></span>
             <input class="search-bar-input" type="search" placeholder="Cari...">
           </div>
         </div>
         <div class="data-table-toolbar-right">
           <button class="btn btn-secondary btn-sm">Export</button>
           <button class="btn btn-primary btn-sm">+ Tambah</button>
         </div>
       </div>

       <!-- Table -->
       <div class="data-table-scroll">
         <table class="data-table" aria-label="Daftar pengguna">
           <thead>
             <tr>
               <th class="data-table-th data-table-check">
                 <label class="checkbox">
                   <input type="checkbox" class="checkbox-input" data-select-all="users">
                   <span class="checkbox-mark"></span>
                 </label>
               </th>
               <th class="data-table-th data-table-sortable data-table-sort-asc"
                   data-sort="name" scope="col">
                 Nama <span class="data-table-sort-icon" aria-hidden="true"></span>
               </th>
               <th class="data-table-th" scope="col">Email</th>
               <th class="data-table-th" scope="col">Status</th>
               <th class="data-table-th data-table-th-action" scope="col">Aksi</th>
             </tr>
           </thead>
           <tbody>
             <tr class="data-table-row" data-row-id="1">
               <td class="data-table-td data-table-check">
                 <label class="checkbox">
                   <input type="checkbox" class="checkbox-input" data-group="users">
                   <span class="checkbox-mark"></span>
                 </label>
               </td>
               <td class="data-table-td">
                 <div class="data-table-cell-user">
                   <div class="avatar avatar-sm"><img src="u1.jpg" alt=""></div>
                   <div>
                     <p class="data-table-cell-primary">Budi Santoso</p>
                     <p class="data-table-cell-secondary">budi@email.com</p>
                   </div>
                 </div>
               </td>
               <td class="data-table-td">budi@email.com</td>
               <td class="data-table-td">
                 <span class="badge badge-success">Aktif</span>
               </td>
               <td class="data-table-td data-table-td-action">
                 <div class="dropdown">
                   <button class="btn btn-ghost btn-icon-only btn-sm dropdown-trigger"
                           aria-haspopup="true" aria-expanded="false"
                           aria-controls="row-menu-1" aria-label="Opsi baris">
                     <!-- svg dots-vertical -->
                   </button>
                   <ul class="dropdown-menu dropdown-menu-right" id="row-menu-1" role="menu" hidden>
                     <li class="dropdown-item" role="menuitem">Edit</li>
                     <li class="dropdown-item dropdown-item-danger" role="menuitem">Hapus</li>
                   </ul>
                 </div>
               </td>
             </tr>
           </tbody>
         </table>
       </div>

       <!-- Footer -->
       <div class="data-table-footer">
         <p class="data-table-info">Menampilkan 1–10 dari 42 data</p>
         <nav class="pagination" aria-label="Navigasi tabel"></nav>
       </div>
     </div>
   ========================================================================== */


/* Wrapper */
.data-table-wrapper {
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-xl);
  overflow:         hidden;
}

/* Toolbar */
.data-table-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--size-300);
  padding:         var(--size-400) var(--size-500);
  border-bottom:   1px solid var(--color-border-default);
  flex-wrap:       wrap;
}
.data-table-toolbar-left, .data-table-toolbar-right {
  display:     flex;
  align-items: center;
  gap:         var(--size-300);
  flex-wrap:   wrap;
}

/* Selection info bar */
.data-table-selection-bar {
  display:          flex;
  align-items:      center;
  gap:              var(--size-400);
  padding:          var(--size-300) var(--size-500);
  background-color: var(--color-brand-subtle);
  border-bottom:    1px solid var(--color-brand);
  font-size:        var(--text-body-sm-size);
  color:            var(--color-brand-text);
  font-weight:      var(--font-weight-medium);
}

/* Scroll container */
.data-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Table */
.data-table {
  width:           100%;
  border-collapse: collapse;
  border-spacing:  0;
  font-size:       var(--text-body-sm-size);
}

/* Header cell */
.data-table-th {
  padding:         var(--size-300) var(--size-400);
  text-align:      left;
  font-size:       var(--text-label-sm-size);
  font-weight:     var(--font-weight-semibold);
  color:           var(--color-text-secondary);
  text-transform:  uppercase;
  letter-spacing:  var(--tracking-wider);
  white-space:     nowrap;
  border-bottom:   2px solid var(--color-border-default);
  background-color: var(--color-bg-sunken);
  position:        sticky;
  top:             0;
  z-index:         var(--z-raised);
}

/* Sortable header */
.data-table-sortable {
  cursor:          pointer;
  user-select:     none;
  transition:      color var(--duration-fast) var(--ease-default);
}
.data-table-sortable:hover { color: var(--color-text-primary); }

.data-table-sort-icon {
  display:      inline-block;
  margin-left:  var(--size-100);
  opacity:      0.4;
  font-size:    10px;
  vertical-align: middle;
}
.data-table-sort-icon::after { content: '⇅'; }
.data-table-sort-asc  .data-table-sort-icon::after { content: '↑'; opacity: 1; color: var(--color-brand); }
.data-table-sort-desc .data-table-sort-icon::after { content: '↓'; opacity: 1; color: var(--color-brand); }
.data-table-sort-asc, .data-table-sort-desc { color: var(--color-text-primary); }

/* Checkbox column */
.data-table-check { width: 48px; padding-inline: var(--size-400); }

/* Action column */
.data-table-th-action, .data-table-td-action {
  width:    60px;
  text-align: center;
}

/* Body row */
.data-table-row {
  transition: background-color var(--duration-fast) var(--ease-default);
}
.data-table-row:hover    { background-color: var(--color-bg-sunken); }
.data-table-row.is-selected { background-color: var(--color-brand-subtle); }
.data-table-row + .data-table-row td { border-top: 1px solid var(--color-border-default); }

/* Body cell */
.data-table-td {
  padding:     var(--size-350) var(--size-400);
  color:       var(--color-text-primary);
  vertical-align: middle;
  white-space: nowrap;
}

/* User cell */
.data-table-cell-user {
  display:     flex;
  align-items: center;
  gap:         var(--size-300);
}
.data-table-cell-primary {
  font-weight: var(--font-weight-medium);
  margin:      0;
  color:       var(--color-text-primary);
}
.data-table-cell-secondary {
  font-size:   var(--text-caption-size);
  color:       var(--color-text-secondary);
  margin:      0;
}

/* Truncate long text */
.data-table-td-truncate {
  max-width:     200px;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Empty state */
.data-table-empty {
  padding:    var(--size-1600) var(--size-600);
  text-align: center;
  color:      var(--color-text-secondary);
}
.data-table-empty-icon { font-size: 48px; margin-bottom: var(--size-400); opacity: 0.4; }

/* Footer */
.data-table-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--size-400);
  padding:         var(--size-400) var(--size-500);
  border-top:      1px solid var(--color-border-default);
  flex-wrap:       wrap;
}
.data-table-info {
  font-size:  var(--text-body-sm-size);
  color:      var(--color-text-secondary);
  margin:     0;
  white-space: nowrap;
}