/* Premium datagrid layer (Phase-3)
 * Scope: jTable visual consistency across all modules.
 * Safety: CSS-only; no JS, no response contract, no data-flow changes.
 */

.page-content div.jtable-main-container {
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #34485c;
}

.page-content div.jtable-main-container > table.jtable > thead th {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.42;
    color: #344354;
    background: linear-gradient(180deg, #f9fcff 0%, #edf3fa 100%);
    padding: 10px 12px;
}

.page-content div.jtable-main-container > table.jtable > thead th .jtable-column-header-container {
    min-height: 24px;
    display: flex;
    align-items: center;
}

.page-content div.jtable-main-container > table.jtable > thead th .jtable-column-header-text {
    letter-spacing: 0.12px;
}

.page-content div.jtable-main-container > table.jtable > thead th.jtable-column-header-sortable {
    transition: background-color var(--sf-motion-fast, 140ms ease), color var(--sf-motion-fast, 140ms ease);
}

.page-content div.jtable-main-container > table.jtable > thead th.jtable-column-header-sortable:hover {
    background: linear-gradient(180deg, #f3f9ff 0%, #e8f1fb 100%);
    color: #263c52;
}

.page-content div.jtable-main-container > table.jtable > thead th.jtable-column-header-sortable:focus-within {
    box-shadow: inset 0 0 0 2px rgba(26, 115, 184, 0.18);
}

.page-content div.jtable-main-container > table.jtable > tbody > tr > td {
    font-size: 13px;
    line-height: 1.52;
    color: #314458;
    padding: 9px 11px;
    font-variant-numeric: tabular-nums;
}

.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-row-even > td {
    background: #fbfdff;
}

.page-content div.jtable-main-container > table.jtable > tbody > tr:hover > td {
    background: #f1f7ff;
}

.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-row-selected > td {
    color: #22425f;
    background: #e9f3ff;
}

.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-no-data-row > td {
    text-align: center;
    padding: 16px 12px;
    color: #667d93;
    font-weight: 600;
    background: #f9fcff;
}

.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-row-deleting > td {
    background: #f8dddd;
    color: #7a2222;
}

/* jTable command buttons: improve visibility while keeping icon assets */
.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-command-button {
    opacity: 0.65;
    transition: opacity var(--sf-motion-fast, 140ms ease), transform var(--sf-motion-fast, 140ms ease);
}

.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-command-button:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* Busy state readability */
.page-content div.jtable-busy-message {
    color: #2d4256;
    border: 1px solid #cfe0f0;
    border-radius: 8px;
    background-color: #f4f9ff;
    background-position: 10px center;
    box-shadow: 0 8px 16px rgba(44, 64, 86, 0.14);
    padding: 6px 8px 6px 58px;
}

/* Bottom panel + pagination */
.page-content div.jtable-main-container > div.jtable-bottom-panel {
    font-size: 12px;
    color: #42576b;
    border-top: 1px solid #dce5ef;
    background: linear-gradient(180deg, #fcfeff 0%, #f2f7fc 100%);
    min-height: 36px;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next {
    min-width: 24px;
    text-align: center;
    border-radius: 7px !important;
    border: 1px solid #cfdae7;
    background: #ffffff;
    color: #3f5468;
    font-weight: 600;
    transition: background-color var(--sf-motion-fast, 140ms ease), border-color var(--sf-motion-fast, 140ms ease),
        color var(--sf-motion-fast, 140ms ease), box-shadow var(--sf-motion-fast, 140ms ease);
}

.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number:hover,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first:hover,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last:hover,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous:hover,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next:hover {
    border-color: #b8c9dc;
    background: #eef5fd;
    color: #2f4962;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
    border: 1px solid #adc3da;
    border-radius: 7px !important;
    background: #e6f1fc;
    color: #284560;
    font-weight: 700;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled:hover {
    border-color: #d9e2ec;
    background: #f5f8fb;
    color: #9aaabd;
    opacity: 1;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-info {
    font-weight: 600;
    color: #4d6277;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-size-change,
.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-size-change select,
.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page input[type="text"],
.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page select {
    border: 1px solid #cdd9e5;
    border-radius: 7px !important;
    background: #ffffff;
    color: #344b61;
    font-weight: 600;
    height: 28px;
    padding: 2px 6px;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-size-change select:focus,
.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page input[type="text"]:focus,
.page-content div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page select:focus {
    border-color: #86a2bf;
    box-shadow: 0 0 0 2px rgba(26, 115, 184, 0.12);
}