:root {
    --main-color: #24457a;
    --main-color-rgb: 36, 69, 122;
    --main-color-light: #3c5b98;
    --main-color-dark: #18305a;
    --main-color-transparent: rgba(36, 69, 122, 0.78);
    --main-accent: #4b6ea8;
    --background-light: #e8eef6;
    --background-very-light: #f7faff;
}

.table-header {
    background: var(--main-color) !important;
    color: #fff !important;
    border-bottom: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: 0 2px 10px rgba(var(--main-color-rgb), 0.07) !important;
}

.table-container {
    background: rgba(255,255,255,0.18) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 32px rgba(var(--main-color-rgb), 0.12) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
    border: 0 solid rgba(var(--main-color-rgb), 0.07) !important;
    overflow: hidden !important;
}

/* ---- Pager (Footer) ---- */
.pager {
    background: var(--main-color) !important;
    color: #fff !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 -1px 9px rgba(var(--main-color-rgb), 0.07) !important;
}

.pager-left {
    color: #fff !important;
}

.pager-right button {
    background: var(--main-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(var(--main-color-rgb), 0.11) !important;
    transition: background 0.19s;
    padding: 4px 14px !important;
}

.pager-right button:not(:disabled):hover {
    background: var(--main-color-light) !important;
}

.header-right .icon-btn {
    background: rgba(var(--main-color-rgb), 0.15) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 500;
    border-radius: 9px !important;
    margin-left: 10px;
    transition: background 0.19s;
    box-shadow: 0 1px 4px rgba(var(--main-color-rgb), 0.08) !important;
}

.header-right .icon-btn:not([disabled]):hover {
    background: var(--main-color-light) !important;
    color: #fff !important;
}

.crm-table {
    background: rgba(255,255,255,0.88) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 14px rgba(var(--main-color-rgb), 0.06) !important;
}

.crm-table thead {
    background: rgba(var(--main-color-rgb), 0.26) !important;
    color: var(--main-color-dark) !important;
}

.crm-table th,
.crm-table td {
    border-bottom: 1px solid rgba(var(--main-color-rgb), 0.07) !important;
    font-size: 14px !important;
    color: var(--main-color-dark) !important;
    background: transparent !important;
    padding: 14px !important;
}

.crm-table th {
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

.crm-table th i,
.crm-table th .fas {
    color: var(--main-accent) !important;
    font-size: 0.82em !important;
    vertical-align: middle;
}

.crm-table tbody tr {
    transition: background 0.18s;
}

.crm-table tbody tr.selected,
.crm-table tbody tr:hover {
    background: rgba(var(--main-color-rgb), 0.15) !important;
}

.pager-right button:disabled {
    opacity: 0.45 !important;
    cursor: default !important;
}

.search-wrapper input {
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--main-color-dark) !important;
    font-size: 0.98rem !important;
    box-shadow: 0 1px 4px rgba(var(--main-color-rgb), 0.10) !important;
    padding-left: 32px !important;
    transition: background 0.16s;
}

.search-wrapper input:focus {
    background: #fff !important;
}

.search-wrapper i {
    left: 12px !important;
    color: var(--main-accent) !important;
}

.dbtable-detail-container .table-header .meta {
    color: #fff;
}