:root {
    --pm-nav-w: 292px;
    --pm-side-gap: 22px;
    --pm-radius-xl: 24px;
    --pm-radius-lg: 18px;
    --pm-radius-md: 14px;
    --pm-shadow-soft: 0 18px 48px rgba(20, 56, 67, 0.1);
    --font-display: "Archivo", "Segoe UI", sans-serif;
    --font-body: "Figtree", "Segoe UI", sans-serif;
    --font-data: "IBM Plex Mono", "Consolas", monospace;
}

@media (max-width: 768px) {
    :root {
        --pm-side-gap: 14px;
    }
}

body.pm-admin-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    color: var(--text);
    position: relative;
    overflow-x: clip;
}

body.pm-theme-ice {
    color-scheme: only light;
    forced-color-adjust: none;
    background-color: #eef6f3;
    --bg-top: #e6f2ee;
    --bg-bottom: #f7fbfa;
    --text: #172027;
    --muted: rgba(23, 32, 39, 0.7);
    --line: rgba(15, 59, 66, 0.1);
    --line-strong: rgba(15, 59, 66, 0.18);
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.95);
    --surface-soft: rgba(255, 255, 255, 0.8);
    --surface-float: rgba(255, 255, 255, 0.94);
    --accent: #1ad7c6;
    --accent-2: #8ad4ff;
    --accent-text: #052322;
    --success: #157347;
    --warning: #9a6700;
    --danger: #a93b4c;
    --shadow: 0 24px 64px rgba(20, 56, 67, 0.11);
    --input-bg: rgba(245, 250, 248, 0.94);
    --input-border: rgba(15, 59, 66, 0.12);
    --grid-line: rgba(15, 59, 66, 0.05);
    --table-head: linear-gradient(180deg, rgba(247, 251, 250, 0.98), rgba(233, 241, 238, 0.96));
    --table-head-text: rgba(24, 53, 61, 0.74);
    --table-row: rgba(255, 255, 255, 0.94);
    --table-row-alt: rgba(251, 253, 252, 0.98);
    --table-hover: rgba(26, 215, 198, 0.1);
    --table-wrap-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 248, 0.94));
    --table-wrap-border: rgba(15, 59, 66, 0.12);
    --table-cell-border: rgba(15, 59, 66, 0.1);
    --table-grid: rgba(15, 59, 66, 0.09);
    --table-grid-strong: rgba(15, 59, 66, 0.16);
    --table-wrap-shadow: 0 18px 46px rgba(20, 56, 67, 0.1), 0 0 0 1px rgba(15, 59, 66, 0.03);
    --table-toolbar-bg: rgba(255, 255, 255, 0.9);
    --table-toolbar-border: rgba(15, 59, 66, 0.1);
    --table-toolbar-shadow: 0 12px 28px rgba(20, 56, 67, 0.08);
    --table-toolbar-text: rgba(24, 53, 61, 0.72);
    --table-link: color-mix(in srgb, #0c5f69 72%, var(--accent));
    --sidebar-tint: linear-gradient(180deg, rgba(9, 23, 28, 0.88), rgba(12, 31, 39, 0.82));
    --sidebar-text: #f2fffd;
    --sidebar-muted: rgba(224, 245, 241, 0.68);
    --sidebar-line: rgba(26, 215, 198, 0.14);
    --sidebar-soft: rgba(255, 255, 255, 0.06);
    --sidebar-shadow: 24px 0 60px rgba(5, 18, 24, 0.24), inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

body.pm-theme-midnight {
    color-scheme: only dark;
    forced-color-adjust: none;
    background-color: #0a101b;
    --bg-top: #070d17;
    --bg-bottom: #151728;
    --text: #f6f7ff;
    --muted: rgba(246, 247, 255, 0.72);
    --line: rgba(113, 136, 255, 0.16);
    --line-strong: rgba(113, 136, 255, 0.28);
    --surface: rgba(11, 14, 30, 0.84);
    --surface-strong: rgba(10, 16, 28, 0.9);
    --surface-soft: rgba(255, 255, 255, 0.05);
    --surface-float: rgba(8, 12, 22, 0.82);
    --accent: #2ad9c8;
    --accent-2: #7188ff;
    --accent-text: #09111a;
    --success: #5fe38d;
    --warning: #f0c95d;
    --danger: #ff7d7d;
    --shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.09);
    --grid-line: rgba(255, 255, 255, 0.04);
    --table-head: linear-gradient(180deg, rgba(24, 35, 61, 0.98), rgba(13, 21, 40, 0.96));
    --table-head-text: rgba(227, 233, 255, 0.84);
    --table-row: rgba(11, 17, 31, 0.88);
    --table-row-alt: rgba(15, 23, 41, 0.94);
    --table-hover: rgba(18, 31, 55, 0.98);
    --table-wrap-bg: linear-gradient(180deg, rgba(9, 14, 26, 0.92), rgba(12, 19, 34, 0.96));
    --table-wrap-border: rgba(113, 136, 255, 0.22);
    --table-cell-border: rgba(113, 136, 255, 0.18);
    --table-grid: rgba(113, 136, 255, 0.18);
    --table-grid-strong: rgba(42, 217, 200, 0.24);
    --table-wrap-shadow: 0 20px 52px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(113, 136, 255, 0.08);
    --table-toolbar-bg: rgba(12, 18, 34, 0.82);
    --table-toolbar-border: rgba(113, 136, 255, 0.14);
    --table-toolbar-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
    --table-toolbar-text: rgba(227, 233, 255, 0.76);
    --table-link: color-mix(in srgb, var(--accent) 68%, #d7e3ff);
    --sidebar-tint: linear-gradient(180deg, rgba(11, 14, 30, 0.78), rgba(7, 13, 23, 0.72));
    --sidebar-text: var(--text);
    --sidebar-muted: var(--muted);
    --sidebar-line: var(--line);
    --sidebar-soft: var(--surface-soft);
    --sidebar-shadow: 24px 0 60px rgba(0, 0, 0, 0.28), inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

body.pm-theme-ice .pm-admin-app,
body.pm-theme-ice .pm-admin-bg,
body.pm-theme-ice .pm-admin-shell,
body.pm-theme-midnight .pm-admin-app,
body.pm-theme-midnight .pm-admin-bg,
body.pm-theme-midnight .pm-admin-shell {
    forced-color-adjust: none;
}

body.pm-admin-body * {
    box-sizing: border-box;
}

body.pm-admin-body a {
    color: inherit;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    max-width: none !important;
    padding-left: var(--pm-side-gap) !important;
    padding-right: var(--pm-side-gap) !important;
    --bs-gutter-x: calc(var(--pm-side-gap) * 2);
}

main.container,
main.sog-ui {
    width: 100%;
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
}

main.sog-ui {
    position: relative;
    padding-bottom: 36px;
}

main.sog-ui > h1:first-child {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

main.sog-ui > p.text-muted:first-of-type,
main.sog-ui > .text-muted:first-of-type {
    color: var(--muted) !important;
    max-width: 760px;
    font-size: 14px;
    margin-bottom: 18px;
}

main.sog-ui > form,
main.sog-ui > .card,
main.sog-ui > .alert,
main.sog-ui > .table-responsive,
main.sog-ui > [id$="_message"] {
    margin-top: 16px;
}

.pm-surface,
main.sog-ui > form,
main.sog-ui > .card,
.modal-content,
.table-responsive,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.card,
.modal-content,
.dropdown-menu,
.table-responsive,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dt-buttons,
.alert,
.select2-container--bootstrap-5 .select2-selection {
    /* border-radius: var(--pm-radius-lg); */
    /* border: 1px solid var(--line) !important; */
    /* background: var(--surface); */
    /* box-shadow: var(--shadow); */
    color: var(--text);
}

.select2-container--bootstrap-5 .select2-selection {
    color: var(--text);
}

.dropdown-menu {
    z-index: 1080;
}

.table-responsive {
    /* background: var(--table-wrap-bg); */
    /* box-shadow: var(--table-wrap-shadow); */
    /* border-color: var(--table-wrap-border) !important; */
}

.alert {
    padding: 14px 16px;
}

.alert-danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important;
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-float));
}

.alert-warning {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent) !important;
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-float));
}

.alert-success {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 38%, transparent) !important;
    background: color-mix(in srgb, var(--success) 10%, var(--surface-float));
}

.btn {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 10px 16px;
    border-color: var(--line);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn-primary {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: var(--accent-text) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-light {
    color: var(--text) !important;
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
}

.btn-outline-danger {
    color: var(--danger) !important;
    border-color: color-mix(in srgb, var(--danger) 35%, transparent) !important;
}

.btn-outline-success {
    color: var(--success) !important;
    border-color: color-mix(in srgb, var(--success) 35%, transparent) !important;
}

.btn-close {
    filter: none;
    opacity: 0.72;
}

body.pm-theme-midnight .btn-close {
    filter: invert(1);
}

.form-control,
.form-select,
.input-group-text,
.select2-container--bootstrap-5 .select2-selection,
.select2-dropdown {
    min-height: 46px;
    border-radius: var(--pm-radius-md) !important;
    border-color: var(--input-border) !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.form-control::placeholder {
    color: var(--muted);
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

.select2-container--bootstrap-5 .select2-dropdown,
.select2-dropdown.select2-dropdown--below,
.select2-dropdown.select2-dropdown--above {
    z-index: 1086;
    border-radius: 18px !important;
    border: 1px solid var(--line) !important;
    background: var(--surface-float) !important;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.select2-container--bootstrap-5 .select2-results__options {
    max-height: min(46vh, 320px);
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.form-select-sm,
.form-control-sm,
.btn-sm {
    min-height: 38px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.form-label,
.modal-title,
.small.text-muted {
    color: var(--muted) !important;
}

.text-muted,
.small.text-muted {
    color: var(--muted) !important;
}

.pagination {
    gap: 8px;
}

.page-link {
    border: 1px solid var(--line);
    border-radius: 999px !important;
    min-width: 40px;
    text-align: center;
    color: var(--text);
    background: var(--surface-soft);
}

.page-item.active .page-link {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-text);
}

.page-item.disabled .page-link {
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.table,
table {
    color: var(--text);
}

.table > :not(caption) > * > * {
    background: transparent;
    color: inherit;
    border-bottom-color: var(--table-grid);
}

.table > :not(caption) > * > *:not(:last-child) {
    border-right: 1px solid var(--table-grid);
}

.table > tbody > tr:last-child > * {
    border-bottom-color: transparent;
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--table-grid);
}

.table-bordered > :not(caption) > * > *:last-child {
    border-right-color: transparent;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: color-mix(in srgb, var(--table-row-alt) 96%, transparent);
}

.table-light,
.table > thead,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background: var(--table-head) !important;
    color: var(--table-head-text) !important;
    border-bottom-color: var(--table-grid-strong) !important;
}

.modal-content {
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--line);
}

.modal-body {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.badge {
    border-radius: 999px;
    font-weight: 700;
}

.combo-wrap {
    position: relative;
}

.combo-menu {
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow: auto;
}

.combo-item {
    cursor: pointer;
}

.pm-login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    position: relative;
    z-index: 2;
}

.pm-login-screen.pm-login-screen-in-shell {
    min-height: calc(100vh - 130px);
}

.pm-auth-themebar {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 4;
}

.pm-auth-card {
    width: min(100%, 460px);
    padding: 28px;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-float) 96%, transparent);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pm-auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.pm-auth-brand-copy {
    min-width: 0;
}

.pm-auth-brand-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.pm-auth-brand-sub {
    color: var(--muted);
    font-size: 11px;
    font-family: var(--font-data);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 4px;
}

.pm-auth-card h4 {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -0.05em;
}

@media (max-width: 768px) {
    .pm-auth-themebar {
        top: 14px;
        right: 14px;
    }
}

/* === extracted-visual-from-forms-and-table-renderer:start === */

/* from forms.css */

.sog-ui .hint {
    color: var(--muted);
    font-size: 12px;
}

.sog-ui .modal {
    background: rgba(7, 13, 23, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sog-ui .panel {
    background: var(--surface-float);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.sog-ui .head {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

.sog-ui .head input {
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--input-bg);
    color: var(--text);
}

.sog-ui .head .close {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
    color: var(--text);
    border-radius: 14px;
    cursor: pointer;
}

.sog-ui .modal .list .pal-row {
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    background: transparent;
}

.sog-ui .modal .list .pal-row:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.sog-ui .modal .list .pal-row strong {
    font-weight: 700;
}

.sog-ui .modal .list .pal-row small {
    color: var(--muted);
}

.sog-ui table.sog-lines {
    border-radius: 18px;
    border: 1px solid var(--table-wrap-border);
    box-shadow: var(--shadow);
}

.sog-ui table.sog-lines th,
.sog-ui table.sog-lines td {
    border-bottom: 1px solid var(--table-grid);
    background: var(--table-row);
}

.sog-ui table.sog-lines th:not(:last-child),
.sog-ui table.sog-lines td:not(:last-child) {
    border-right: 1px solid var(--table-grid);
}

.sog-ui table.sog-lines th {
    background: var(--table-head);
    color: var(--muted);
    border-bottom-color: var(--table-grid-strong);
}

.sog-ui table.sog-lines tbody tr:nth-child(even) td {
    background: var(--table-row-alt);
}

.sog-ui table.sog-lines tbody tr:last-child td {
    border-bottom-color: transparent;
}

.sog-ui table.sog-lines tbody tr:hover td {
    background: var(--table-hover);
}


/* from table_renderer.css */

/* =============================================================================
   0) Base / Utilities
   ========================================================================== */

pre.mono {
    font-size: 10px;
}

.table {
    --bs-table-bg: none;
}

td {
    font-size: 14px;
}

.tr-opt-unavailable {
    opacity: .45;
}

.tr-filters-unified {
    border: 1px solid #d7dce7;
    border-radius: 10px;
    background: #fff;
}

.tr-filters-unified-body .tr-facet > .small.text-muted {
    line-height: 16px;
    text-align: center;
}

/* Range filters (number, date) */

.tr-facet-range-number {
    background: transparent;
    box-shadow: none;
}

.tr-facet-range-number .tr-range-label,
.tr-facet-range-date .tr-range-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
}

.tr-range-dd .tr-range-dd-toggle {
    font-size: 12px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tr-range-dd-menu .btn {
    font-size: 12px;
    border-radius: 999px !important;
    border-width: 1px;
    border-color: var(--line) !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.tr-range-dd-menu .btn:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
    background: color-mix(in srgb, var(--surface-strong) 84%, var(--accent) 8%) !important;
    color: var(--text) !important;
}

.tr-range-dd-menu .btn.active,
.tr-range-dd-menu .btn:focus-visible {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: var(--accent-text) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

.tr-range-option {
    text-align: left;
}

.tr-range-option.tr-opt-unavailable {
    opacity: .45;
}

.tr-facet-range-date option:disabled {
    color: #adb5bd;
}

.tr-search-group .tr-search-icon {
    background: transparent;
    color: var(--muted);
}

.tr-search-group {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    box-shadow: none;
}

.tr-search-group:focus-within {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    box-shadow: none;
}

.tr-search-group .form-control {
    background: inherit;
    color: var(--text);
}

.tr-search-group .form-control::placeholder {
    color: var(--muted);
}

.tr-search-group .form-control:focus {
    box-shadow: none;
}

.mono {
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.badge {
    font-weight: 500;
}

.chip {
    border: 1px solid #ced4da;
    border-radius: .5rem;
    font-size: 12px;
}

.form-check-input {
    border: 1px solid #999;
}

/* =============================================================================
   1) Navbar (Pastel)
   ========================================================================== */

.navbar-pastel {
    background: #2e3440;
    color: #e5e9f0;
}

.navbar-pastel .nav-link {
    color: #e5e9f0;
    border-radius: 8px;
}

.navbar-pastel .nav-link:hover {
    background: rgba(255, 255, 255, .1);
}

/* =============================================================================
   2) Theme Variables (facets / table head)
   ========================================================================== */

:root {
    --facet-accent: #7a0033;
    --facet-accent-strong: #5c0026;
    --thead-bg: #f7f7fb;
    --thead-border: #e3e5ef;
}

/* =============================================================================
   3) Facet Buttons - base, hover, active/focus
   ========================================================================== */

.btn-group[role="group"][aria-label^="facet-"] .btn {
    font-weight: 600;
    text-transform: none;
    border-width: 2px;
    border-color: #c6c8cf;
    color: #444;
    background-color: #fff;
    transition: box-shadow .2s ease,
    border-color .15s ease,
    color .15s ease,
    background-color .15s ease;
}

.btn-group[role="group"][aria-label^="facet-"] .btn:hover {
    box-shadow: 0 0 4px 1px rgba(122, 0, 51, .25);
    border-color: var(--facet-accent);
    color: var(--facet-accent-strong);
}

.btn-group[role="group"][aria-label^="facet-"] .btn.active,
.btn-group[role="group"][aria-label^="facet-"] .btn:focus-visible,
.btn-group[role="group"][aria-label^="facet-"] .btn.active:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 6px 2px rgba(13, 110, 253, .6) !important;
}

/* =============================================================================
   4) Table Row Striping + Hover
   - Note: you intentionally have overlapping selectors
   - Keep order to preserve current cascade behavior
   ========================================================================== */

tr.odd {
    background: #d6ecff !important;
}

tr.even {
    background: #fff !important;
}

tr.tr-row-even {
    background-color: #fff;
}

tr.tr-row-odd {
    background-color: #fafbff;
}

/* Override: both ".odd" and ".tr-row-odd" go to the same blue */

tr.odd,
tr.tr-row-odd {
    background-color: #d6ecff;
}

tr.tr-row:hover {
    background-color: #eef6ff;
}

/* =============================================================================
   5) Column-specific cell styles
   ========================================================================== */

.td-col-id {
    text-align: center;
    font-weight: 700;
}

.td-col-last_name {
    font-style: italic;
}

.td-col-email {
    color: #0d6efd;
}

/* =============================================================================
   6) DataTables - header padding/border (sticky related note)
   ========================================================================== */

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   7) Minor spacing tweaks
   ========================================================================== */

/* =============================================================================
   8) Facets layout - wrapper + children
   - Force flex + wrap; limit width; gap
   ========================================================================== */

/* =============================================================================
   9) Facets layout - generic ID suffix selector
   ========================================================================== */

/* =============================================================================
   10) DataTables Buttons - base + variants (excel/print)
   ========================================================================== */

.dataTables_wrapper .dt-buttons .btn {
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .06s ease,
    box-shadow .15s ease,
    filter .15s ease,
    opacity .15s ease;
}

.dataTables_wrapper .dt-buttons .btn-excel {
    background: linear-gradient(135deg, #21a366, #107c41) !important;
    color: #fff !important;
    border-radius: 10px;
}

.dataTables_wrapper .dt-buttons .btn-excel:hover {
    filter: brightness(1.05) saturate(1.05);
}

.dataTables_wrapper .dt-buttons .btn-print {
    background: linear-gradient(135deg, #f8f9fb, #eef1f6) !important;
    color: #343a40 !important;
    border: 1px solid #dde2ea !important;
    border-radius: 10px;
}

/* =============================================================================
   11) Page: /page_rules_access
   - scoped only to .rules-access-page to avoid affecting other tables
   ========================================================================== */

/* =============================================================================
   ProxyMint Dash 1.1 Admin Layer
   ========================================================================== */

.tr-filters-unified {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.tr-filters-unified > .form-label {
    color: var(--muted) !important;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tr-filters-unified-body .tr-facet > .small.text-muted,
.tr-range-label {
    color: var(--muted) !important;
    font-family: var(--font-data);
    font-size: 11px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tr-filters-unified-body .tr-facet:not(.tr-facet-search) {
    text-align: center;
}

.tr-filters-unified-body .tr-facet:not(.tr-facet-search) > .small.text-muted {
    text-align: center;
}

.tr-filters-unified-body .btn-group[role="group"][aria-label^="facet-"] .btn,
.tr-filters-unified-body .tr-dd-toggle,
.tr-filters-unified-body .tr-cols-dd-toggle,
.tr-filters-unified-body .tr-facet > .btn,
.tr-filters-unified-body .btn-outline-danger {
    border-radius: 999px !important;
    border-width: 1px;
    border-color: var(--line) !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.tr-search-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    text-align: left;
    line-height: 1.18;
}

.tr-search-group {
    border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 10%);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-soft) 94%, var(--accent) 4%);
    box-shadow: none;
}

.tr-search-group .input-group-text,
.tr-search-group .form-control {
    background: inherit;
}

.tr-search-group:focus-within {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--accent) 12%, transparent);
}

.tr-search-group .form-control {
    background: transparent;
    color: var(--text);
}

.tr-search-group .form-control::placeholder {
    color: var(--muted);
}

.tr-search-group .form-control:focus {
    box-shadow: none;
}

.tr-filters-unified-body .btn-group[role="group"][aria-label^="facet-"] .btn:hover,
.tr-filters-unified-body .tr-dd-toggle:hover,
.tr-filters-unified-body .tr-cols-dd-toggle:hover,
.tr-filters-unified-body .btn-outline-danger:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
    background: color-mix(in srgb, var(--surface-strong) 84%, var(--accent) 8%) !important;
    color: var(--text) !important;
}

.tr-filters-unified-body .btn-group[role="group"][aria-label^="facet-"] .btn.active,
.tr-filters-unified-body .btn-group[role="group"][aria-label^="facet-"] .btn:focus-visible {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: var(--accent-text) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

.tr-filters-unified .dropdown-menu {
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    inset-inline-end: auto;
    border-radius: 18px;
    border-color: var(--line);
    background: var(--surface-float);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: none !important;
}

@media (min-width: 1200px) {
u {
    l;
}

t {
    r;
}

}

@media (max-width: 1199.98px) {
u {
    l;
}

t {
    r;
}

}

.tr-filters-unified .dropdown.tr-dd-open > .tr-dd-toggle,
.tr-filters-unified .dropdown.tr-dd-open > .tr-cols-dd-toggle,
.tr-filters-unified .tr-dd-toggle[aria-expanded="true"],
.tr-filters-unified .tr-cols-dd-toggle[aria-expanded="true"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: var(--accent-text) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

.tr-facet-range-number,
.tr-facet-range-date {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px 10px;
    /* border: 1px solid 
color-mix(in srgb, var(--accent) 34%, var(--sidebar-line, var(--line))); */
    /* border-radius: 14px; */
    /* background: transparent; */
    /* box-shadow: 0 16px 34px 
color-mix(in srgb, var(--accent-2) 10%, transparent); */
}

.tr-facet-range-date .form-control,
.tr-facet-range-date .form-select {
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 10%);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text);
    box-shadow: none;
}

body.pm-theme-midnight .tr-facet-range-date .form-select {
    color-scheme: dark;
}

body.pm-theme-ice .tr-facet-range-date .form-select {
    color-scheme: light;
}

.tr-facet-range-date .form-control:focus,
.tr-facet-range-date .form-select:focus {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--accent) 12%, transparent);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--muted) !important;
    font-size: 13px;
}

table.dataTable,
table.table {
    border-radius: 22px;
    border: 1px solid var(--table-wrap-border);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
.table > thead > tr > th,
.table > thead > tr > td {
    border-bottom: 1px solid var(--table-grid-strong) !important;
    background: var(--table-head) !important;
    color: var(--muted) !important;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

table.dataTable tbody tr td,
table.table tbody tr td {
    border-bottom: 1px solid var(--table-grid) !important;
    background: var(--table-row) !important;
}

table.dataTable > thead > tr > th:not(:last-child),
table.dataTable > thead > tr > td:not(:last-child),
.table > thead > tr > th:not(:last-child),
.table > thead > tr > td:not(:last-child),
table.dataTable tbody tr td:not(:last-child),
table.table tbody tr td:not(:last-child) {
    border-right: 1px solid var(--table-grid) !important;
}

tr.odd td,
tr.tr-row-odd td {
    background: var(--table-row-alt) !important;
}

tr.even td,
tr.tr-row-even td {
    background: var(--table-row) !important;
}

table.dataTable tbody tr:hover td,
tr.tr-row:hover td {
    background: var(--table-hover) !important;
}

.tr-action,
.tr-action-edit,
.proxy-country-list-link {
    font-weight: 800;
    text-decoration: none !important;
    color: var(--table-link, color-mix(in srgb, var(--accent) 52%, var(--text)));
}

tr.odd,
tr.even,
tr.tr-row-odd,
tr.tr-row-even {
    background: transparent !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dt-buttons {
    /* border: 1px solid var(--table-toolbar-border) !important; */
    /* border-radius: 18px; */
    /* background: var(--table-toolbar-bg) !important; */
    color: var(--table-toolbar-text) !important;
    /* box-shadow: var(--table-toolbar-shadow); */
}

.dataTables_wrapper .dataTables_filter label {
    color: var(--muted) !important;
}

.dataTables_wrapper .dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--table-toolbar-border) !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_length select.form-select,
.dataTables_wrapper .dataTables_length select.form-select-sm,
div.dataTables_wrapper div.dataTables_length select {
    min-width: 84px !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 8px 28px 8px 12px !important;
    border-radius: 999px !important;
    border-width: 1px !important;
    border-color: var(--line) !important;
    background-color: var(--surface-soft) !important;
    font-family: var(--font-body);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 16px,
        calc(100% - 9px) 16px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.dataTables_wrapper .dataTables_length select.form-select:focus,
.dataTables_wrapper .dataTables_length select.form-select-sm:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line)) !important;
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

table.dataTable,
table.table,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
.table > thead > tr > th,
.table > thead > tr > td,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting::before,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting::after,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_asc::before,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_asc::after,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_desc::before,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_desc::after,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_asc_disabled::before,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_asc_disabled::after,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_desc_disabled::before,
body.pm-theme-midnight table.dataTable thead > tr > th.sorting_desc_disabled::after,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting::before,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting::after,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_asc::before,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_asc::after,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_desc::before,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_desc::after,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_asc_disabled::before,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_asc_disabled::after,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_desc_disabled::before,
body.pm-theme-midnight table.dataTable thead > tr > td.sorting_desc_disabled::after {
    line-height: 16px;
    font-size: .8em;
    color: color-mix(in srgb, var(--table-head-text) 92%, #ffffff 8%) !important;
    opacity: .88 !important;
}

.dataTables_wrapper table.dataTable tbody tr td,
.dataTables_wrapper table.table tbody tr td,
.dataTables_wrapper table.dataTable > thead > tr > th:not(:last-child),
.dataTables_wrapper table.dataTable > thead > tr > td:not(:last-child),
.dataTables_wrapper .table > thead > tr > th:not(:last-child),
.dataTables_wrapper .table > thead > tr > td:not(:last-child),
.dataTables_wrapper tr.odd td,
.dataTables_wrapper tr.tr-row-odd td,
.dataTables_wrapper tr.even td,
.dataTables_wrapper tr.tr-row-even td,
.dataTables_wrapper table.dataTable tbody tr:last-child td,
.dataTables_wrapper table.table tbody tr:last-child td,
.dataTables_wrapper table.dataTable tbody tr:hover td,
.dataTables_wrapper tr.tr-row:hover td,
.dataTables_wrapper table.dataTable tbody tr:hover td:first-child,
.dataTables_wrapper table.table tbody tr:hover td:first-child,
.dataTables_wrapper table.dataTable tbody tr:hover td:last-child,
.dataTables_wrapper table.table tbody tr:hover td:last-child {
    border: 1px solid var(--table-toolbar-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dt-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border: 1px solid var(--table-toolbar-border) !important;
    border-radius: 999px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.18) !important;
    transform: none !important;
}

.dataTables_wrapper .dt-buttons .btn-excel {
    border-color: rgba(33, 163, 102, 0.48) !important;
    background: linear-gradient(135deg, #2db36f 0%, #1d8f5a 52%, #127447 100%) !important;
    color: #ecfff5 !important;
    box-shadow: inset 0 1px 0 rgba(169, 255, 216, 0.26), 0 8px 18px rgba(16, 124, 65, 0.36) !important;
}

.dataTables_wrapper .dt-buttons .btn-print {
    border-color: color-mix(in srgb, var(--table-toolbar-border) 88%, #8fa8ff 12%) !important;
    background: linear-gradient(135deg, rgba(26, 34, 58, 0.9) 0%, rgba(14, 22, 40, 0.92) 100%) !important;
    color: #eef3ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(5, 10, 22, 0.34) !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .btn:focus-visible {
    filter: brightness(1.06) saturate(1.04) !important;
    transform: translateY(-1px) !important;
}

.dataTables_wrapper .dt-buttons .btn:active {
    transform: translateY(0) !important;
}

.dataTables_wrapper .dt-buttons .btn .btn-ico {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.dataTables_wrapper .dt-buttons .btn .btn-label {
    display: inline-block;
}

.dataTables_wrapper .dt-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px !important;
    /* border-radius: 999px !important; */
    /* border: 1px solid var(--table-toolbar-border) !important; */
    /* background: color-mix(in srgb, var(--table-toolbar-bg) 84%, transparent) !important; */
    /* box-shadow: var(--table-toolbar-shadow) !important; */
}

/* =============================================================================
   12) Unified Table Filters Layout
   - shared for all TableRenderer grids
   ========================================================================== */

.tr-panel .tr-filters-unified-side .tr-facet > .small.text-muted,
.tr-panel .tr-filters-unified-side .tr-facet > .small.text-muted,
.tr-panel .tr-filters-unified-body > .tr-facets .tr-facet > .small.text-muted,
.tr-panel .tr-filters-unified-body > .tr-facets .tr-facet > .small.text-muted,
.tr-panel .tr-range-label,
.tr-panel .tr-range-label {
    text-align: center;
    line-height: 1.18;
}

.tr-panel .tr-filters-unified-body > .tr-facets .tr-search-label,
.tr-panel .tr-filters-unified-body > .tr-facets .tr-search-label {
    text-align: left;
}

@media (max-width: 1439.98px) {
u {
    l;
}

p {
    r;
}

}

@media (max-width: 1180px) {
u {
    l;
}

p {
    r;
}

}

@media (max-width: 980px) {
u {
    l;
}

p {
    r;
}

}

/* =============================================================================
   13) Page: /page_users
   - scoped only to .page-users-page so the shared table renderer stays reusable
   ========================================================================== */

/* === extracted-visual-from-forms-and-table-renderer:end === */