/* css/table.css */
/* Material Design 3 Enterprise Data Table */

/* ========================================================================
   TABLE WRAPPER (MD3 Container)
   ======================================================================== */
.table-wrap,
.batch-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface);
  /* Optional: MD3 Data Tables often have a white background inside a panel */
}

/* ========================================================================
   CORE TABLE STYLES
   ======================================================================== */
.data-table,
.batch-table,
.qs-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface);
  text-align: left;
}

/* ========================================================================
   TABLE HEADER (Sticky Header)
   ======================================================================== */
.data-table th,
.batch-table th,
.qs-table th {
  height: 56px; /* MD3 standard header height */
  padding: 0 var(--md-sys-spacing-4);
  font: var(--md-sys-typescale-label-medium);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline);
  white-space: nowrap;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: var(--md-sys-zindex-base);
}

/* Ensure sticky header background covers content underneath */
.batch-table th::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid var(--md-sys-color-outline);
}

/* ========================================================================
   TABLE ROWS & CELLS
   ======================================================================== */
.data-table td,
.batch-table td,
.qs-table td {
  height: 56px; /* MD3 standard row height */
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  vertical-align: middle;
}

/* Hover Highlight */
.data-table tbody tr:hover,
.batch-table tbody tr:focus-within {
  background-color: var(--md-sys-state-hover);
}

/* Last row border removal */
.data-table tbody tr:last-child td,
.batch-table tbody tr:last-child td {
  border-bottom: none;
}

/* ========================================================================
   COLUMN SPECIFIC STYLES
   ======================================================================== */
.col-check {
  width: 48px;
  text-align: center;
}

/* Native Checkbox styling for tables */
.data-table input[type="checkbox"],
.om-row-check {
  width: 18px;
  height: 18px;
  accent-color: var(--md-sys-color-primary);
  cursor: pointer;
}

.col-num {
  width: 48px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium);
}

.col-act {
  width: 56px;
  text-align: center;
}

/* Monospace data columns */
.data-table .mono {
  font: var(--md-sys-typescale-font-mono);
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* ========================================================================
   BATCH ENTRY TABLE (Forms inside tables)
   ======================================================================== */
.batch-table td {
  padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2);
}

.batch-table input,
.batch-table select,
.charge-table input,
.charge-table select {
  height: 36px;
  padding: 0 var(--md-sys-spacing-2);
  border: 1px solid transparent; /* Hide border until focus/hover in tables */
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  background-color: transparent;
  width: 100%;
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface);
  transition: background-color var(--md-sys-motion-duration-short),
              border-color var(--md-sys-motion-duration-short);
}

.batch-table input:hover,
.batch-table select:hover,
.charge-table input:hover,
.charge-table select:hover {
  background-color: var(--md-sys-color-surface-container);
}

.batch-table input:focus,
.batch-table select:focus,
.charge-table input:focus,
.charge-table select:focus {
  background-color: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-primary);
  outline: none;
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

/* Specific input widths for batch entry */
.batch-table .product-input { min-width: 160px; }
.batch-table .hs-input { min-width: 100px; font: var(--md-sys-typescale-font-mono); font-size: 0.875rem;}
.batch-table .weight-input { min-width: 120px; }
.batch-table .qty-input { min-width: 60px; text-align: center; }
.batch-table .loading-input { min-width: 160px; }
.batch-table .remark-input { min-width: 120px; }

/* ========================================================================
   CHARGE TABLE (Generate Quote Page)
   ======================================================================== */
.charge-table {
  min-width: 1000px;
}

.charge-table .charge-item-input { min-width: 180px; }
.charge-table .rate-input { font: var(--md-sys-typescale-font-mono); font-size: 0.875rem; text-align: right; }
.charge-table .qty-input { text-align: center; }

.charge-amount {
  font: var(--md-sys-typescale-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-sys-color-primary);
  text-align: right;
  padding-right: var(--md-sys-spacing-4) !important;
}

.charge-total-row td {
  background-color: var(--md-sys-color-surface-container);
  border-bottom: none;
  border-top: 1px solid var(--md-sys-color-outline);
  height: 48px;
}

.text-right {
  text-align: right !important;
  padding-right: var(--md-sys-spacing-4) !important;
}

/* ========================================================================
   EMPTY STATE
   ======================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--md-sys-spacing-10) var(--md-sys-spacing-6);
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large);
}

.empty-state[hidden] {
  display: none !important;
}

/* ========================================================================
   TOOLBAR (Search & Filters above tables)
   ======================================================================== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  margin-bottom: var(--md-sys-spacing-4);
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  border: 1px solid var(--md-sys-color-outline-variant);
}

.search-box {
  flex: 1;
  min-width: 240px;
}

/* Actions inside table rows */
.row-actions {
  display: flex;
  gap: var(--md-sys-spacing-1);
  justify-content: flex-end;
}