/* ============================================================================
   ht-compact.css  —  "Hardtrac Pro" compact, professional UI layer
   ----------------------------------------------------------------------------
   Loaded LAST on: index_appo.html (Appointment), index_ss.html (Billed QTY),
   index_case.html (Shipments), index_reconcile.html (Reconciliation),
   index_andon.html (Andon).
   Every rule is scoped to html.htp so no other page is affected.
   Pure styling — no business logic, IDs or behaviour touched.
   ========================================================================== */

html.htp {
  --p-ink: #0f172a;
  --p-text: #1e293b;
  --p-muted: #64748b;
  --p-line: #e2e8f0;
  --p-line-2: #eef2f6;
  --p-bg: #f3f5f9;
  --p-card: #ffffff;
  --p-head: #f1f5f9;
  --p-zebra: #fafbfd;
  --p-hover: #eef4ff;
  --p-primary: #2563eb;
  --p-radius: 10px;
  --p-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --p-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --p-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- base */
html.htp body {
  font-family: var(--p-font) !important;
  background: var(--p-bg) !important;
  color: var(--p-text);
  font-size: 12.5px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
html.htp table { font-variant-numeric: tabular-nums; }

/* no "lift" jumps on hover inside dense tables / toolbars */
html.htp table button:not(:disabled):hover,
html.htp .htcf-btn:hover, html.htp .htcf-pop button:hover, html.htp .htcf-bar button:hover,
html.htp .ht-pgr button:hover { transform: none !important; }

/* unified pager toolbar: slimmer */
html.htp .ht-pgr-top, html.htp .ht-pgr-bot {
  padding: 5px 10px; margin: 6px 0; border-radius: 8px; gap: 8px;
}
html.htp .ht-pgr-search input { height: 28px; }
html.htp .ht-pgr-btns button, html.htp .ht-pgr-size select, html.htp .ht-pgr-jump input { height: 26px; min-width: 28px; }
html.htp .ht-pgr-bot { margin-bottom: 0; }

/* column-filter chip bar spacing */
html.htp .htcf-bar { margin: 0 0 6px; }

/* ================================================================ APPOINTMENT */
html.htp-appo .navbar { padding: .5rem 1.25rem; box-shadow: 0 1px 0 var(--p-line); }
html.htp-appo .brand-title { font-size: 1.02rem; gap: 10px; }
html.htp-appo .brand-title > div:first-child { padding: 6px !important; border-radius: 7px !important; }
html.htp-appo .btn-primary, html.htp-appo .btn-ghost {
  padding: .4rem .85rem; border-radius: 8px; font-size: .76rem; box-shadow: none;
}
html.htp-appo .dashboard-container { max-width: none; padding: .9rem 1.25rem 1.25rem; }
html.htp-appo .kpi-grid { gap: .6rem; margin-bottom: .75rem; }
html.htp-appo .kpi-card {
  height: 74px; padding: .65rem .85rem; border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
}
html.htp-appo .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .18); }
html.htp-appo .kpi-label { font-size: .6rem; letter-spacing: .07em; }
html.htp-appo .kpi-icon-wrapper { width: 24px; height: 24px; font-size: .85rem; border-radius: 6px; }
html.htp-appo .kpi-value { font-size: 1.4rem; margin-top: 0; }
html.htp-appo .kpi-progress-bg { height: 3px; }
html.htp-appo .table-card {
  border-radius: var(--p-radius); box-shadow: var(--p-shadow);
  max-height: calc(100vh - 235px); min-height: 260px;
}
html.htp-appo .table-card table { min-width: 1250px; border-collapse: separate; border-spacing: 0; }
html.htp-appo .table-card th {
  position: sticky; top: 0; z-index: 3;
  padding: .55rem .6rem; font-size: .62rem; letter-spacing: .05em;
  background: var(--p-head); color: #475569; border-bottom: 1px solid var(--p-line);
  vertical-align: top;
}
html.htp-appo .table-card td { padding: .42rem .6rem; font-size: .76rem; border-bottom: 1px solid var(--p-line-2); }
html.htp-appo .table-card tbody tr:nth-child(even) td { background: var(--p-zebra); }
html.htp-appo .table-card tbody tr:hover td { background: var(--p-hover); }
html.htp-appo .filter-input-group { margin-top: 5px; }
html.htp-appo .search-input { padding: .3rem .45rem .3rem 1.6rem; font-size: .68rem; border-radius: 6px; height: 26px; }
html.htp-appo .search-icon { left: 8px; font-size: .6rem; }
html.htp-appo .status-badge { padding: 2px 8px; font-size: .62rem; gap: 5px; }
html.htp-appo .status-invoice-badge { padding: 2px 8px !important; font-size: .64rem !important; }
html.htp-appo .slot-alert { padding: 3px 8px !important; font-size: .66rem !important; }
html.htp-appo .action-btn { padding: .28rem .6rem; font-size: .66rem; border-radius: 6px; }
@media (max-width: 1400px) { html.htp-appo .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

/* ================================================================ BILLED QTY */
html.htp-ss nav.bg-slate-900 { height: 52px !important; padding-left: 16px !important; padding-right: 16px !important; }
html.htp-ss nav.bg-slate-900 .btn-action { padding: 6px 11px; font-size: .7rem; border-radius: 6px; }
html.htp-ss nav.bg-slate-900 .filter-tab { padding: 4px 10px; font-size: .68rem; }
html.htp-ss main > .overflow-auto { padding: 10px 12px !important; }
html.htp-ss #ssTableCard { border-radius: var(--p-radius) !important; }
html.htp-ss #ssTableCard .big-table th {
  padding: 7px 8px; font-size: .62rem; letter-spacing: .045em; color: #475569;
  background: var(--p-head); border-bottom: 1px solid var(--p-line); border-top: 0;
}
html.htp-ss #ssTableCard .big-table .filter-row th { padding: 4px 8px 6px; background: #f8fafc; }
html.htp-ss #ssTableCard .filter-input { padding: 3px 6px; font-size: .68rem; height: 25px; border-radius: 5px; }
html.htp-ss #ssTableCard .big-table td { padding: 5px 8px; border-bottom: 1px solid var(--p-line-2); }
html.htp-ss #ssTableCard .big-table td.pl-6, html.htp-ss #ssTableCard .big-table th.pl-6 { padding-left: 14px; }
html.htp-ss #ssTableCard .big-table td.pr-6, html.htp-ss #ssTableCard .big-table th.pr-6 { padding-right: 14px; }
html.htp-ss #ssTableCard .big-table tbody tr:nth-child(even):not(.row-mismatch) td:not(.bg-sys):not(.bg-bill):not(.bg-diff) { background: var(--p-zebra); }
html.htp-ss #ssTableCard .big-table tbody tr:hover td { background-color: var(--p-hover) !important; }
html.htp-ss #ssTableCard .big-table td .text-xs { font-size: .72rem; }
/* Billing Status badge (new column) */
html.htp .bill-st {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; line-height: 1.5;
}
html.htp .bill-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html.htp .bill-st.pending { background: #fffbeb; color: #b45309; border-color: #fde68a; }
html.htp .bill-st.matched { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
html.htp .bill-st.short   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
html.htp .bill-st.excess  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* ================================================================ SHIPMENTS */
html.htp-case .navbar { padding-top: .35rem !important; padding-bottom: .35rem !important; margin-bottom: .75rem !important; }
html.htp-case .navbar-brand { font-size: 1.02rem; }
html.htp-case .navbar .btn-sm { padding: .22rem .6rem; font-size: .74rem; border-radius: 6px; }
html.htp-case .last-updated-badge { font-size: .7rem; padding: 3px 9px; }
html.htp-case .container-fluid.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
html.htp-case .btn-group .btn-sm, html.htp-case .d-flex.gap-2.mb-3 > .btn-sm { padding: .2rem .6rem; font-size: .74rem; }
html.htp-case .d-flex.gap-2.mb-3 { margin-bottom: .6rem !important; }
html.htp-case .custom-table-container { padding: .7rem .8rem; border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
html.htp-case .custom-table-container > h5 { font-size: .9rem; font-weight: 700; margin-bottom: .5rem !important; color: #334155 !important; }
html.htp-case #mainTableWrap { max-height: calc(100vh - 250px); overflow: auto; }
html.htp-case #mainTable { font-size: .76rem; margin-bottom: 0; }
html.htp-case #mainTable > thead { position: sticky; top: 0; z-index: 4; }
html.htp-case #mainTable > thead > tr:first-child > th {
  background: var(--p-head); color: #475569;
  font-size: .62rem; letter-spacing: .045em; padding: .45rem .5rem; white-space: nowrap;
  border-bottom: 1px solid var(--p-line);
}
html.htp-case #mainTable > thead > tr.filter-row > th { background: #f8fafc; padding: .25rem .4rem .35rem; }
html.htp-case #mainTable .filter-row input { height: 24px; font-size: .68rem; }
html.htp-case #mainTable > tbody > tr > td { padding: .32rem .5rem; border-color: var(--p-line-2); }
html.htp-case #mainTable > tbody > tr:nth-child(even):not(.verified-row) > td { background: var(--p-zebra); }
html.htp-case #mainTable > tbody > tr:hover > td { background: var(--p-hover); }
html.htp-case #mainTable .badge { font-size: .64rem; font-weight: 600; }
html.htp-case #mainTable .btn-sm { padding: .15rem .55rem; font-size: .7rem; }
html.htp-case #mainTable .status-badge { font-size: .64rem !important; padding: 2px 8px !important; }

/* ================================================================ RECONCILIATION */
html.htp-recon .navbar { padding: 8px 18px; border-bottom-width: 1px; box-shadow: 0 1px 0 var(--p-line); }
html.htp-recon .navbar-brand { font-size: 1.02rem !important; }
html.htp-recon .navbar button { padding: 6px 14px !important; font-size: 12px !important; border-radius: 7px !important; }
html.htp-recon .filter-select { padding: 5px 10px !important; font-size: 12px !important; border-radius: 7px !important; }
html.htp-recon .main-container { padding: 10px 14px; }
html.htp-recon .main-card { border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
html.htp-recon .main-card > div { max-height: calc(100vh - 180px); overflow: auto !important; }
html.htp-recon .data-table { border-collapse: separate; border-spacing: 0; }
html.htp-recon .data-table thead th {
  position: sticky; top: 0; z-index: 3; padding: 8px 10px; font-size: 10.5px; letter-spacing: .05em;
  background: var(--p-head) !important; color: #475569; border-bottom: 1px solid var(--p-line); white-space: nowrap;
}
html.htp-recon .data-table td { padding: 7px 10px; border-bottom: 1px solid var(--p-line-2); font-size: 12px; }
html.htp-recon .data-table tbody tr:nth-child(even) td { background: var(--p-zebra); }
html.htp-recon .data-table tbody tr:hover td { background: var(--p-hover); }
html.htp-recon .po-name { font-size: 12.5px !important; }
html.htp-recon .num-qty { font-size: 13px !important; }
html.htp-recon .num-val { font-size: 10.5px !important; }
html.htp-recon .info-stack { gap: 2px !important; }
html.htp-recon .info-row { font-size: 11px !important; }
html.htp-recon .btn-inspect { padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important; }
html.htp-recon .status-badge { padding: 2px 8px !important; font-size: 10px !important; }

/* ================================================================ ANDON */
html.htp-andon .container { padding: 10px 14px; }
html.htp-andon .header-box { padding: 9px 14px; margin-bottom: 10px; border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
html.htp-andon .header-title h2 { font-size: 16px; margin: 0; }
html.htp-andon .header-box .btn { padding: 5px 10px; font-size: 11.5px; }
html.htp-andon .stats-grid { gap: 8px; margin-bottom: 10px; }
html.htp-andon .stat-card { padding: 9px 12px; border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
html.htp-andon .stat-icon { width: 30px !important; height: 30px !important; font-size: 13px !important; }
html.htp-andon .stat-number { font-size: 18px !important; }
html.htp-andon .stat-content h4 { font-size: 10px !important; margin: 0 0 2px !important; }
html.htp-andon .filter-bar { padding: 7px 10px !important; margin-bottom: 8px !important; border-radius: var(--p-radius) !important; }
html.htp-andon .filter-btn { padding: 4px 10px !important; font-size: 11px !important; }
html.htp-andon .table-container { border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
html.htp-andon .table-wrapper { max-height: calc(100vh - 300px); }
html.htp-andon #andonTable th {
  background: #1e293b !important; color: #fff; padding: 7px 7px; font-size: 10px; letter-spacing: .04em;
}
html.htp-andon #andonTable td { padding: 4px 6px; border-bottom: 1px solid var(--p-line-2); }
html.htp-andon #andonTable tbody tr:nth-child(even):not(.high-ncx):not(.warning-ncx) td { background: var(--p-zebra); }
html.htp-andon #andonTable th .htcf-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #e2e8f0; }
html.htp-andon #andonTable th .htcf-btn:hover { background: rgba(255, 255, 255, .25); color: #fff; }
html.htp-andon #andonTable th .htcf-btn.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
html.htp-andon .table-footer { padding: 6px 12px !important; font-size: 11px; }