/* HD Responsive Tables — Frontend Styles  v2.0.0 */

:root {
    --hdrt-font:             system-ui, -apple-system, "Segoe UI", sans-serif;
    --hdrt-font-size:        15px;
    --hdrt-border:           #e2e8f0;
    --hdrt-header-bg:        #1e293b;
    --hdrt-header-color:     #f8fafc;
    --hdrt-header-font-size: 13px;
    --hdrt-header-weight:    600;
    --hdrt-header-transform: uppercase;
    --hdrt-row-even:         #ffffff;
    --hdrt-row-odd:          #f8fafc;
    --hdrt-row-hover:        #eff6ff;
    --hdrt-accent:           #3b82f6;
    --hdrt-text:             #1e293b;
    --hdrt-text-muted:       #64748b;
    --hdrt-cell-padding:     .6em 1em;
    --hdrt-radius:           6px;
    --hdrt-transition:       150ms ease;
}

.hdrt-wrap { font-family: var(--hdrt-font); font-size: var(--hdrt-font-size); color: var(--hdrt-text); margin: 1.5em 0; line-height: 1.5; }
.hdrt-description { margin: 0 0 .75em; color: var(--hdrt-text-muted); font-size: .9em; }

.hdrt-controls { display: flex; align-items: center; gap: .5em; margin-bottom: .75em; flex-wrap: wrap; }
.hdrt-search { flex: 1 1 200px; padding: .45em .75em; border: 1px solid var(--hdrt-border); border-radius: var(--hdrt-radius); font-size: .9em; font-family: var(--hdrt-font); outline: none; transition: border-color var(--hdrt-transition), box-shadow var(--hdrt-transition); color: var(--hdrt-text); }
.hdrt-search:focus { border-color: var(--hdrt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdrt-accent) 20%, transparent); }
.hdrt-export-btn { padding: .45em 1em; border: 1px solid var(--hdrt-border); border-radius: var(--hdrt-radius); background: transparent; cursor: pointer; font-size: .85em; font-family: var(--hdrt-font); color: var(--hdrt-text-muted); transition: all var(--hdrt-transition); white-space: nowrap; }
.hdrt-export-btn:hover { border-color: var(--hdrt-accent); color: var(--hdrt-accent); }

.hdrt-table-container { width: 100%; position: relative; }
.hdrt-scroll-wrap { width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--hdrt-border) transparent; }
.hdrt-scroll-wrap::-webkit-scrollbar { height: 6px; display: block; }
.hdrt-scroll-wrap::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
.hdrt-scroll-wrap::-webkit-scrollbar-thumb { background: var(--hdrt-border); border-radius: 3px; }
.hdrt-scroll-wrap::-webkit-scrollbar-thumb:hover { background: var(--hdrt-text-muted); }

.hdrt-table-container::after { content: ''; position: absolute; top: 0; right: 0; bottom: 6px; width: 40px; background: linear-gradient(to right, transparent, var(--hdrt-row-even)); pointer-events: none; opacity: 0; transition: opacity .2s; }
.hdrt-table-container.hdrt-overflows::after  { opacity: 1; }
.hdrt-table-container.hdrt-scroll-end::after { opacity: 0; }

.hdrt-table { width: 100%; border-collapse: collapse; background: var(--hdrt-row-even); }
.hdrt-table th, .hdrt-table td { padding: var(--hdrt-cell-padding); text-align: left; border-bottom: 1px solid var(--hdrt-border); border-left: none; border-right: none; border-top: none; }
.hdrt-table td { color: var(--hdrt-text); }
.hdrt-table thead th { background: var(--hdrt-header-bg); color: var(--hdrt-header-color); font-size: var(--hdrt-header-font-size); font-weight: var(--hdrt-header-weight); text-transform: var(--hdrt-header-transform); white-space: nowrap; position: relative; border-bottom: none; letter-spacing: .02em; }

.hdrt-table tbody tr:first-child td { border-top: none; }
.hdrt-table tbody tr:last-child  td { border-bottom: none; }
.hdrt-no-dividers .hdrt-table td { border-bottom: none; }

.hdrt-table th.hdrt-sortable { cursor: pointer; user-select: none; padding-right: 2em; }
.hdrt-table th.hdrt-sortable:hover { filter: brightness(1.15); }
.hdrt-sort-icon { position: absolute; right: .6em; top: 50%; transform: translateY(-50%); opacity: .4; }
.hdrt-sort-icon::after { content: '⇅'; }
th[aria-sort="ascending"]  .hdrt-sort-icon::after { content: '↑'; }
th[aria-sort="descending"] .hdrt-sort-icon::after { content: '↓'; }
th[aria-sort="ascending"]  .hdrt-sort-icon,
th[aria-sort="descending"] .hdrt-sort-icon { opacity: 1; }

.hdrt-striped .hdrt-table tbody tr:nth-child(even) td { background: var(--hdrt-row-odd); }
.hdrt-hover   .hdrt-table tbody tr:hover td           { background: var(--hdrt-row-hover); }
.hdrt-bordered .hdrt-table th, .hdrt-bordered .hdrt-table td { border: 1px solid var(--hdrt-border); }
.hdrt-compact  .hdrt-table th, .hdrt-compact  .hdrt-table td { padding: .3em .6em; }

.hdrt-align-center { text-align: center !important; }
.hdrt-align-right  { text-align: right  !important; }
.hdrt-align-left   { text-align: left   !important; }

.hdrt-table tbody tr.hdrt-hidden { display: none; }
.hdrt-no-results td { text-align: center !important; color: var(--hdrt-text-muted); font-style: italic; padding: 2em !important; border: none !important; }
.hdrt-error { color: #dc2626; font-style: italic; font-size: .9em; }

/* Row links — pointer cursor on clickable rows */
.hdrt-table tbody tr[data-row-href] { cursor: pointer; }

.hdrt-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: .75em; flex-wrap: wrap; gap: .5em; }
.hdrt-pagination-info { font-size: .85em; color: var(--hdrt-text-muted); }
.hdrt-pagination-controls { display: flex; gap: .25em; }
.hdrt-page-btn { min-width: 2em; height: 2em; padding: 0 .5em; border: 1px solid var(--hdrt-border); border-radius: calc(var(--hdrt-radius) - 2px); background: transparent; cursor: pointer; font-size: .85em; font-family: var(--hdrt-font); line-height: 1; transition: all var(--hdrt-transition); color: var(--hdrt-text); }
.hdrt-page-btn:hover     { border-color: var(--hdrt-accent); color: var(--hdrt-accent); }
.hdrt-page-btn.is-active { background: var(--hdrt-accent); border-color: var(--hdrt-accent); color: #fff; }
.hdrt-page-btn:disabled  { opacity: .4; cursor: not-allowed; }

@media (max-width: 640px) {
    .hdrt-responsive-stack .hdrt-table,
    .hdrt-responsive-stack .hdrt-table thead,
    .hdrt-responsive-stack .hdrt-table tbody,
    .hdrt-responsive-stack .hdrt-table th,
    .hdrt-responsive-stack .hdrt-table td,
    .hdrt-responsive-stack .hdrt-table tr { display: block; width: 100%; }
    .hdrt-responsive-stack .hdrt-table thead tr { position: absolute; top: -9999px; left: -9999px; }
    .hdrt-responsive-stack .hdrt-table tbody tr { border: 1px solid var(--hdrt-border); border-radius: var(--hdrt-radius); margin-bottom: .75em; overflow: hidden; }
    .hdrt-responsive-stack .hdrt-table td { display: flex; align-items: baseline; gap: .5em; border-bottom: 1px solid var(--hdrt-border); padding: .5em .75em; }
    .hdrt-responsive-stack .hdrt-table td:last-child { border-bottom: none; }
    .hdrt-responsive-stack .hdrt-table td::before { content: attr(data-label); font-weight: 600; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--hdrt-text-muted); min-width: 6em; flex-shrink: 0; }

    .hdrt-responsive-card .hdrt-table,
    .hdrt-responsive-card .hdrt-table thead,
    .hdrt-responsive-card .hdrt-table tbody,
    .hdrt-responsive-card .hdrt-table th,
    .hdrt-responsive-card .hdrt-table td,
    .hdrt-responsive-card .hdrt-table tr { display: block; }
    .hdrt-responsive-card .hdrt-table thead tr { position: absolute; top: -9999px; left: -9999px; }
    .hdrt-responsive-card .hdrt-table tbody tr { background: var(--hdrt-row-even); border: 1px solid var(--hdrt-border); border-radius: calc(var(--hdrt-radius) * 1.5); margin-bottom: 1em; overflow: hidden; }
    .hdrt-responsive-card .hdrt-table td:first-child { background: var(--hdrt-header-bg); color: var(--hdrt-header-color); font-weight: 600; font-size: 1.05em; padding: .75em 1em; border-bottom: none; }
    .hdrt-responsive-card .hdrt-table td:first-child::before { display: none; }
    .hdrt-responsive-card .hdrt-table td { display: grid; grid-template-columns: 1fr 1.5fr; padding: .5em 1em; border-bottom: 1px solid var(--hdrt-border); }
    .hdrt-responsive-card .hdrt-table td:last-child { border-bottom: none; }
    .hdrt-responsive-card .hdrt-table td::before { content: attr(data-label); font-weight: 600; font-size: .82em; text-transform: uppercase; letter-spacing: .04em; color: var(--hdrt-text-muted); }
}