/* ================================================================
   44_area_of_operations.css
   ALL selectors scoped under .hrdi-table
   — ไม่กระทบ CSS อื่นภายนอก wrapper นี้เลย —
   ================================================================ */

/* ── TOKENS (scoped via CSS custom properties) ── */
.hrdi-table {
  --ht-font-th   : 'K2D';
  --ht-font-mono : "Courier New", monospace;
  --ht-bg        : #f5f0e1;
  --ht-surface   : #fdfaf2;
  --ht-border    : #c8bfa0;
  --ht-text      : #1e2418;
  --ht-muted     : #6b6040;
  --ht-stripe    : #f0ead4;
  --ht-hover     : #e6f0dc;
  --ht-green     : #2d5a1b;
  --ht-green-mid : #3d7a26;
  --ht-green-lt  : #558b3a;
  --ht-wheat     : #d9c47a;
  --ht-wheat-lt  : #f0e3a8;
  --ht-radius    : 6px;
  --ht-shadow    : 0 2px 10px rgba(0,0,0,.10);

  /* reset-like defaults scoped to this block only */
  box-sizing     : border-box;
  font-family    : var(--ht-font-th);
  color          : var(--ht-text);
  line-height    : 1.6;
  background     : var(--ht-bg);
  padding        : 20px 16px 48px;
  max-width      : 1400px;
  margin         : 0 auto;
}

.hrdi-table *, .hrdi-table *::before, .hrdi-table *::after {
  box-sizing: border-box;
}

/* ── SEARCH BAR ──────────────────────────────── */
.hrdi-table .ht-search-bar {
  background    : var(--ht-wheat-lt);
  border        : 1px solid var(--ht-border);
  border-radius : var(--ht-radius);
  padding       : 12px 14px;
  margin-bottom : 12px;
  box-shadow    : 0 1px 4px rgba(0,0,0,.06);
  display       : flex;
  align-items   : center;
  gap           : 10px;
  flex-wrap     : wrap;
}
.hrdi-table .ht-search-wrap {
  position   : relative;
  flex       : 1;
  min-width  : 220px;
  display    : flex;
  align-items: center;
}
.hrdi-table .ht-search-icon {
  position       : absolute;
  left           : 11px;
  width          : 17px;
  height         : 17px;
  color          : var(--ht-muted);
  pointer-events : none;
  flex-shrink    : 0;
}
.hrdi-table .ht-search-input {
  width       : 100%;
  border      : 1.5px solid var(--ht-border);
  border-radius: 4px;
  padding     : 9px 36px;
  font-family : var(--ht-font-th);
  font-size:1.38rem;
  background  : #fff;
  color       : var(--ht-text);
  outline     : none;
  transition  : border-color .15s, box-shadow .15s;
  /* reset inherited styles from host page */
  line-height : 1.5;
  margin      : 0;
  appearance  : none;
}
.hrdi-table .ht-search-input:focus {
  border-color : var(--ht-green-mid);
  box-shadow   : 0 0 0 3px rgba(61,122,38,.15);
}
.hrdi-table .ht-clear-btn {
  position     : absolute;
  right        : 9px;
  background   : none;
  border       : none;
  cursor       : pointer;
  color        : var(--ht-muted);
  font-size:1.05rem;
  padding      : 3px 5px;
  line-height  : 1;
  border-radius: 3px;
  transition   : color .12s;
  font-family  : inherit;
}
.hrdi-table .ht-clear-btn:hover { color: var(--ht-text); }

.hrdi-table .ht-result-count {
  font-size:1.14rem;
  color       : var(--ht-muted);
  white-space : nowrap;
  flex-shrink : 0;
  font-family : var(--ht-font-th);
}
.hrdi-table .ht-result-count strong { color: var(--ht-green); }

/* ── TABLE OUTER ─────────────────────────────── */
.hrdi-table .ht-table-outer {
  background    : var(--ht-surface);
  border        : 1px solid var(--ht-border);
  border-radius : var(--ht-radius);
  box-shadow    : var(--ht-shadow);
  overflow      : hidden;
}
.hrdi-table .ht-table-wrap { overflow-x: auto; }

/* ── TABLE ELEMENT ───────────────────────────── */
.hrdi-table table {
  width           : 100%;
  border-collapse : collapse;
  font-size:1.305rem;
  font-family     : var(--ht-font-th);
  /* hard-reset anything the host page might set */
  border-spacing  : 0;
  caption-side    : top;
  empty-cells     : show;
}

/* ── THEAD label row ─────────────────────────── */
.hrdi-table thead tr.ht-label-row {
  background : var(--ht-green);
  color      : #fff;
}
.hrdi-table thead tr.ht-label-row th {
  padding       : 10px 11px 5px;
  text-align    : left;
  font-weight   : 700;
  font-size:1.2rem;
  letter-spacing: .02em;
  border-right  : 1px solid rgba(255,255,255,.15);
  white-space   : nowrap;
  /* reset */
  border-top    : none;
  border-bottom : none;
  border-left   : none;
  vertical-align: middle;
}
.hrdi-table thead tr.ht-label-row th:last-child { border-right: none; }
.hrdi-table thead tr.ht-label-row th.ht-num     { text-align: right; }

/* ── THEAD filter row ────────────────────────── */
.hrdi-table thead tr.ht-filter-row { background: #1f4513; }
.hrdi-table thead tr.ht-filter-row th {
  padding       : 5px 8px;
  border        : none;
  vertical-align: middle;
}
.hrdi-table .ht-col-filter select {
  width         : 100%;
  max-width     : 160px;
  border        : 1px solid rgba(255,255,255,.35);
  border-radius : 3px;
  padding       : 4px 6px;
  font-family   : var(--ht-font-th);
  font-size:1.05rem;
  background    : rgba(255,255,255,.92);
  color         : var(--ht-text);
  cursor        : pointer;
  outline       : none;
  /* reset */
  margin        : 0;
  appearance    : auto;
  line-height   : normal;
}
.hrdi-table .ht-col-filter select:focus {
  border-color: var(--ht-wheat);
}

/* ── TBODY ───────────────────────────────────── */
.hrdi-table tbody tr {
  border-bottom : 1px solid var(--ht-border);
  background    : transparent;
  /* reset */
  border-top    : none;
  border-left   : none;
  border-right  : none;
}
.hrdi-table tbody tr:nth-child(even) { background: var(--ht-stripe); }
.hrdi-table tbody tr:hover           { background: var(--ht-hover); }
.hrdi-table tbody tr.ht-hidden       { display: none; }

.hrdi-table td {
  padding        : 8px 11px;
  vertical-align : middle;
  font-size:1.305rem;
  font-family    : var(--ht-font-th);
  color          : var(--ht-text);
  /* reset */
  border         : none;
  border-bottom  : 1px solid var(--ht-border);
  margin         : 0;
  line-height    : 1.5;
}
.hrdi-table td.ht-num {
  font-family : var(--ht-font-mono);
  font-size:1.23rem;
  text-align  : right;
}

/* ── PROJECT LINK ────────────────────────────── */
.hrdi-table a.ht-proj-link {
  color          : var(---ht-text);
  text-decoration: none;
  font-weight    : 600;
  border-bottom  : 1px solid transparent;
  transition     : color .15s, border-color .15s;
  border-bottom-color: var(--ht-text)
}
.hrdi-table a.ht-proj-link:hover {
  color        : var(--ht-text);
  text-decoration: none;
  border-bottom-color: none;
}

/* ── TFOOT ───────────────────────────────────── */
.hrdi-table tfoot tr.ht-total-row {
  background : var(--ht-green);
  color      : #fff;
}
.hrdi-table tfoot tr.ht-total-row td {
  padding     : 10px 11px;
  font-weight : 700;
  font-size:1.29rem;
  border      : none;
  color       : #fff;
  font-family : var(--ht-font-th);
}
.hrdi-table tfoot tr.ht-total-row td.ht-num {
  font-family: var(--ht-font-mono);
}
.hrdi-table .ht-total-label {
  text-align  : right;
  font-style  : italic;
}

/* ── RWD ─────────────────────────────────────── */
@media (max-width: 768px) {
  .hrdi-table { padding: 12px 8px 32px; }
  .hrdi-table .ht-search-input { font-size:1.2rem; }
  .hrdi-table thead tr.ht-label-row th { font-size:1.05rem; padding: 7px; }
  .hrdi-table thead tr.ht-filter-row th { padding: 4px 6px; }
  .hrdi-table td { padding: 7px 8px; font-size:1.17rem; }
  .hrdi-table td.ht-num { font-size:1.11rem; }
  .hrdi-table .ht-col-filter select { font-size:0.96rem; max-width: 110px; }
}
@media (max-width: 480px) {
  .hrdi-table table { font-size:1.08rem; }
  .hrdi-table .ht-search-input { font-size:1.14rem; }
}

/* ── PRINT ───────────────────────────────────── */
@media print {
  .hrdi-table { background: #fff; padding: 0; max-width: 100%; }
  .hrdi-table .ht-search-bar { display: none !important; }
  .hrdi-table .ht-table-outer { border: none; box-shadow: none; }
  .hrdi-table thead tr.ht-label-row {
    background: var(--ht-green) !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hrdi-table thead tr.ht-filter-row { display: none !important; }
  .hrdi-table tbody tr:nth-child(even) {
    background: #f0ead4 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hrdi-table tfoot tr.ht-total-row {
    background: var(--ht-green) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hrdi-table a.ht-proj-link { color: inherit; text-decoration: none; border: none; }
  .hrdi-table a.ht-proj-link::after { content: ""; }
  .hrdi-table table { page-break-inside: auto; font-size:9.6pt; }
  .hrdi-table tr { page-break-inside: avoid; }
  @page { margin: 1.4cm 1.1cm; }
}