/* ═══════════════════════════════════════════════════════════
   manage-table.css
   Styled to match .items-table — uses CSS vars, hover rows,
   no alternating colours, consistent with the rest of the app.
   Horizontal-scroll on all screen sizes.
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────── */
.manage-table-wrap {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Table base ───────────────────────────────────────────── */
.manage-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
  min-width:       1100px;
}

/* ── Header ───────────────────────────────────────────────── */
.manage-table thead th {
  background:     var(--bg3);
  color:          var(--text2);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding:        10px 14px;
  white-space:    nowrap;
  text-align:     left;
  border-bottom:  1px solid var(--border);
  position:       sticky;
  top:            0;
  z-index:        2;
}

/* ── Body rows ────────────────────────────────────────────── */
.manage-table tbody tr:hover td {
  background: var(--bg3);
}

/* ── Cells ────────────────────────────────────────────────── */
.manage-table tbody td {
  padding:        10px 14px;
  border-bottom:  1px solid var(--border);
  vertical-align: middle;
  color:          var(--text);
  white-space:    nowrap;
}
.manage-table tbody tr:last-child td { border-bottom: none; }

/* ── Column-specific ──────────────────────────────────────── */

.manage-table .col-id {
  color:       var(--text3);
  font-size:   11px;
  text-align:  center;
  width:       44px;
  font-family: 'Times New Roman', monospace;
}

.manage-table .col-id-header {
  text-align: center;
  width:      44px;
}

.manage-table .col-name strong {
  font-weight: 600;
}

.manage-table .col-mono {
  font-family: 'Times New Roman', monospace;
  font-size:   11px;
  color:       var(--text2);
  white-space: nowrap;
}

.manage-table .col-date {
  white-space: nowrap;
  font-size:   12px;
  color:       var(--text2);
  font-family: 'Times New Roman', monospace;
}

.manage-table .col-remarks {
  max-width:     200px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  color:         var(--text2);
  font-size:     12px;
  font-style:    italic;
}

.manage-table .col-actions {
  white-space: nowrap;
  display:     flex;
  gap:         5px;
  align-items: center;
}

/* ── Barcode tag ──────────────────────────────────────────── */
.manage-table .barcode-tag {
  display:        inline-flex;
  align-items:    center;
  background:     rgba(96, 165, 250, 0.10);
  color:          var(--accent);
  border:         1px solid rgba(96, 165, 250, 0.22);
  border-radius:  4px;
  font-family:    'Times New Roman', monospace;
  font-size:      10.5px;
  font-weight:    600;
  padding:        2px 7px;
  letter-spacing: 0.4px;
}

/* ── Action buttons ───────────────────────────────────────── */
.manage-table .btn-icon {
  background:    rgba(96, 165, 250, 0.08);
  border:        1px solid rgba(96, 165, 250, 0.20);
  color:         var(--accent);
  border-radius: var(--radius-sm);
  padding:       4px 11px;
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   'DM Sans', sans-serif;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.manage-table .btn-icon:hover {
  background:   rgba(96, 165, 250, 0.18);
  border-color: var(--accent);
}
.manage-table .btn-icon.danger {
  background:  rgba(239, 68, 68, 0.07);
  border:      1px solid rgba(239, 68, 68, 0.18);
  color:       #f87171;
}
.manage-table .btn-icon.danger:hover {
  background:   rgba(239, 68, 68, 0.16);
  border-color: #ef4444;
}

/* ── Status badges ────────────────────────────────────────── */
.manage-table .status-badge {
  font-size:   11px;
  padding:     3px 9px;
  white-space: nowrap;
}

/* ── Scrollbar ────────────────────────────────────────────── */
.manage-table-wrap::-webkit-scrollbar       { height: 5px; width: 5px; }
.manage-table-wrap::-webkit-scrollbar-track { background: transparent; }
.manage-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.manage-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--border2); }
.manage-table-wrap { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }


/* ══════════════════════════════════════════════════════════
   PAGE LAYOUT (Manage Assets page)
   ══════════════════════════════════════════════════════════ */

#page-manage.active {
  display:        flex;
  flex-direction: column;
  height:         calc(100vh - var(--topbar-h) - 48px);
  overflow:       hidden;
}

#page-manage .header-grid  { flex-shrink: 0; }

#page-manage .dash-card {
  flex:           1;
  min-height:     0;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

#page-manage .manage-filter-bar               { flex-shrink: 0; }
#page-manage .dash-card > div[style*="padding:12px"] { flex-shrink: 0; }

#page-manage #manageList {
  flex:           1;
  min-height:     0;
  overflow:       hidden;
  max-height:     none;
  display:        flex;
  flex-direction: column;
}

#page-manage .manage-table-wrap {
  flex:          1;
  min-height:    0;
  overflow-x:    auto;
  overflow-y:    auto;
  border-radius: 0;
  border:        none;
}

/* ── Scrollbar for page-manage (always visible) ───────────── */
#page-manage .manage-table-wrap::-webkit-scrollbar        { width: 7px; height: 7px; }
#page-manage .manage-table-wrap::-webkit-scrollbar-track  { background: var(--bg); }
#page-manage .manage-table-wrap::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; }
#page-manage .manage-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--border2); }
#page-manage .manage-table-wrap::-webkit-scrollbar-corner { background: var(--bg); }
#page-manage .manage-table-wrap { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  #page-manage.active {
    height:   auto;
    overflow: visible;
    display:  block;
  }
  #page-manage .dash-card {
    overflow: visible;
    flex:     none;
    display:  block;
  }
  #page-manage #manageList {
    overflow:   visible;
    max-height: none;
    flex:       none;
    display:    block;
  }
  #page-manage .manage-table-wrap {
    flex:       none;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
  }

  .manage-table thead th  { font-size: 10px; padding: 9px 12px; letter-spacing: 0.4px; }
  .manage-table tbody td  { padding: 8px 12px; font-size: 12px; }
  .manage-table .col-remarks  { max-width: 140px; }
  .manage-table .btn-icon     { padding: 3px 9px; font-size: 10px; }
  .manage-table .barcode-tag  { font-size: 10px; padding: 2px 6px; }
  .manage-table .status-badge { font-size: 10px; padding: 3px 8px; }
}

@media (max-width: 768px) {
  #page-manage #manageList {
    overflow: visible;
    display:  block;
  }

  .manage-table-wrap {
    display:                    block;
    width:                      100%;
    overflow-x:                 auto;
    overflow-y:                 visible;
    -webkit-overflow-scrolling: touch;
    border-radius:              var(--radius);
    border:                     1px solid var(--border);
  }

  .manage-table {
    display:      table !important;
    min-width:    1100px;
    font-size:    11.5px;
    table-layout: auto;
  }

  .manage-table thead              { display: table-header-group !important; }
  .manage-table thead th           {
    display:  table-cell !important;
    font-size: 9.5px;
    padding:   8px 9px;
    position:  sticky;
    top:       0;
    z-index:   2;
  }

  .manage-table tbody              { display: table-row-group !important; }
  .manage-table tbody tr           {
    display:    table-row !important;
    background: transparent !important;
    border:     none !important;
  }

  .manage-table tbody td {
    display:       table-cell !important;
    padding:       7px 9px;
    white-space:   nowrap;
    width:         auto !important;
    max-width:     none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .manage-table tbody td:last-child    { border-right:  none !important; }
  .manage-table tbody tr:last-child td { border-bottom: none !important; }
  .manage-table tbody td::before       { display: none !important; content: none !important; }

  .manage-table .col-remarks  { max-width: 110px; }
  .manage-table .col-actions  { gap: 4px; }
  .manage-table .btn-icon     { padding: 3px 7px; font-size: 10px; }
  .manage-table .barcode-tag  { font-size: 9.5px; padding: 2px 5px; }
  .manage-table .status-badge { font-size: 10px;  padding: 2px 7px; }
}