@font-face {
  font-family: "Humanst521";
  src: url("//db.onlinewebfonts.com/t/c56754d51081528c5bd48dc76f580171.eot");
  src: url("//db.onlinewebfonts.com/t/c56754d51081528c5bd48dc76f580171.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/c56754d51081528c5bd48dc76f580171.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/c56754d51081528c5bd48dc76f580171.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/c56754d51081528c5bd48dc76f580171.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/c56754d51081528c5bd48dc76f580171.svg#Humanst521 Lt BT") format("svg");
}

.table td, .table th {
  vertical-align: middle;
}

.pagination {
    display: flex;
    list-style: none;
    padding-left: 0;
    justify-content: center;
    margin: 20px 0;
    gap: 1px; /* rapat seperti button group */
}

.pagination li {
    display: inline;
}

.pagination li a {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400; /* tidak tebal */
    color: #124994; /* ungu Bootstrap */
    background-color: #fff; /* putih */
    border: 1px solid #c8dae8;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.pagination li a:hover {
    background-color: #e8f0f7;
    border-color: #c8dae8;
    color: #124994;
}

.pagination li.active a {
    background-color: #124994; /* ungu solid */
    color: #fff;
    border-color: #124994;
    pointer-events: none;
    cursor: default;
}

.pagination li.disabled a {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    pointer-events: none;
}

.sortable-table th {
    position: relative;
    padding-right: 20px; /* ruang untuk panah */
}

.sortable-table th.asc::after,
.sortable-table th.desc::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
}

.sortable-table th.asc::after {
    border-bottom-color: white; /* ▲ */
}

.sortable-table th.desc::after {
    border-top-color: white; /* ▼ */
}

/* Override Bootstrap Primary Colors with #124994 */
:root {
    --bs-primary: #124994;
    --bs-primary-rgb: 18, 73, 148;
    /* Button specific colors using palette */
    --btn-primary-bg: #124994;
    --btn-primary-border: #124994;
    --btn-primary-hover-bg: #0c448c;
    --btn-primary-hover-border: #0c448c;
}

/* Primary text color */
.text-primary {
    color: #124994 !important;
}

/* Primary button */
.btn-primary {
    background-color: #124994 !important;
    border-color: #124994 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #0c448c !important;
    border-color: #0c448c !important;
    color: #fff !important;
}

.btn-primary:focus, .btn-primary.focus {
    background-color: #0c448c !important;
    border-color: #0c448c !important;
    box-shadow: 0 0 0 0.2rem rgba(18, 73, 148, 0.5) !important;
}

.btn-primary:active, .btn-primary.active {
    background-color: #14448c !important;
    border-color: #14448c !important;
}

/* Primary outline button */
.btn-outline-primary {
    color: #124994 !important;
    border-color: #124994 !important;
}

.btn-outline-primary:hover {
    background-color: #124994 !important;
    border-color: #124994 !important;
    color: #fff !important;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(18, 73, 148, 0.5) !important;
}

.btn-outline-primary:active, .btn-outline-primary.active {
    background-color: #124994 !important;
    border-color: #124994 !important;
    color: #fff !important;
}

/* Primary background */
.bg-primary {
    background-color: #124994 !important;
}

/* Primary border */
.border-primary {
    border-color: #124994 !important;
}

/* Alert primary */
.alert-primary {
    color: #124994;
    background-color: #e8f0f7;
    border-color: #c8dae8;
}

/* Badge primary */
.badge.bg-primary {
    background-color: #124994 !important;
}

/* Link primary */
.link-primary {
    color: #124994 !important;
}

.link-primary:hover, .link-primary:focus {
    color: #0c448c !important;
}

/* Form elements */
.form-check-input:checked {
    background-color: #124994 !important;
    border-color: #124994 !important;
}

.form-control:focus {
    border-color: #4c7090 !important;
    box-shadow: 0 0 0 0.2rem rgba(18, 73, 148, 0.25) !important;
}

.form-select:focus {
    border-color: #4c7090 !important;
    box-shadow: 0 0 0 0.2rem rgba(18, 73, 148, 0.25) !important;
}

/* Progress bar */
.progress-bar {
    background-color: #124994 !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: #e8f0f7 !important;
    color: #124994 !important;
}

/* Nav pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #124994 !important;
}

/* Dropdown */
.dropdown-item:active {
    background-color: #124994 !important;
}

/* Pagination (additional override) */
.page-link {
    color: #124994 !important;
}

.page-item.active .page-link {
    background-color: #124994 !important;
    border-color: #124994 !important;
}

.page-link:hover {
    color: #0c448c !important;
    background-color: #e8f0f7 !important;
    border-color: #c8dae8 !important;
}

/* ============================================== */
/* COMPREHENSIVE BOOTSTRAP COLOR OVERRIDES       */
/* Primary: #124994 (Blue Dark)                  */
/* Secondary: #6c757d (Bootstrap Default Gray)   */
/* ============================================== */

/* PRIMARY COLORS - Complete Override */
/* Links with primary class */
a.text-primary { 
    color: #124994 !important; 
}

a.text-primary:hover { 
    color: #0c448c !important; 
}

/* Bootstrap CSS Custom Properties Override */
:root {
    /* Primary color variables */
    --bs-primary: #124994;
    --bs-primary-rgb: 18, 73, 148;
    
    /* Primary button colors */
    --bs-btn-color: #fff;
    --bs-btn-bg: #124994;
    --bs-btn-border-color: #124994;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0c448c;
    --bs-btn-hover-border-color: #0c448c;
    --bs-btn-focus-shadow-rgb: 18, 73, 148;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a3b7a;
    --bs-btn-active-border-color: #093468;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #124994;
    --bs-btn-disabled-border-color: #124994;
    
    /* Primary link colors */
    --bs-link-color: #124994;
    --bs-link-hover-color: #0c448c;
}

/* Enhanced Primary Button States */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #0c448c !important;
    border-color: #0c448c !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(18, 73, 148, 0.25) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #124994 !important;
    border-color: #124994 !important;
    color: #fff !important;
}

/* Enhanced Alert Primary */
.alert-primary {
    color: #0a3b7a !important;
    background-color: rgba(18, 73, 148, 0.1) !important;
    border-color: rgba(18, 73, 148, 0.2) !important;
}

/* SECONDARY COLORS - Force Bootstrap Default Gray */
.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.btn-outline-secondary.active {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.text-secondary { 
    color: #6c757d !important; 
}

.bg-secondary { 
    background-color: #6c757d !important; 
}

.border-secondary { 
    border-color: #6c757d !important; 
}

/* FORM ENHANCEMENTS */
.form-control:focus {
    border-color: #124994 !important;
    box-shadow: 0 0 0 0.2rem rgba(18, 73, 148, 0.25) !important;
}

.form-select:focus {
    border-color: #124994 !important;
    box-shadow: 0 0 0 0.2rem rgba(18, 73, 148, 0.25) !important;
}