/* Load AFTER bootstrap.min.css + nakamura-tokens.css. */

:root{
  /* rgb values must be kept in sync with the hex vars by hand (Bootstrap needs raw r,g,b for rgba()) */
  --bs-primary: var(--nk-green-600);
  --bs-primary-rgb: 74, 114, 35; /* #4a7223 */
  --bs-secondary: var(--nk-maroon-600);
  --bs-secondary-rgb: 122, 28, 28; /* #7a1c1c */
  --bs-success: var(--status-success);
  --bs-success-rgb: 47, 158, 68; /* #2f9e44 */
  --bs-warning: var(--status-warning);
  --bs-warning-rgb: 224, 138, 30; /* #e08a1e */
  --bs-danger: var(--status-danger);
  --bs-danger-rgb: 219, 59, 59; /* #db3b3b */
  --bs-info: var(--status-info);
  --bs-info-rgb: 43, 131, 196; /* #2b83c4 */

  --bs-body-bg: var(--surface-page);
  --bs-body-color: var(--text-body);
  --bs-body-font-family: var(--font-body);
  --bs-emphasis-color: var(--text-strong);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-faint);
  --bs-tertiary-bg: var(--surface-sunken);
  --bs-secondary-bg: var(--nk-cream-300);
  --bs-border-color: var(--border-hairline);

  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-xxl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-link-color: var(--text-brand);
  --bs-link-color-rgb: 59, 91, 28; /* #3b5b1c (nk-green-700) */
  --bs-link-hover-color: var(--color-brand-strong);
  --bs-link-hover-color-rgb: 46, 71, 21; /* #2e4715 (nk-green-800) */
}

html {
  font-size: 0.9375rem;
}

body{
  background: var(--bs-body-bg);
}

a{
  text-decoration: none;
}

.btn{
  font-weight: var(--fw-semibold);
}

.btn-3d {
  box-shadow:
    0 3px 0 var(--nk-green-800),
    0 4px 8px rgba(0, 0, 0, 0.15);

  transform: translateY(0);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.btn-3d:hover {
  transform: translateY(-1px);

  box-shadow:
    0 4px 0 var(--nk-green-800),
    0 6px 10px rgba(0, 0, 0, 0.18);
}

.btn-3d:active {
  transform: translateY(2px);

  box-shadow:
    0 1px 0 var(--nk-green-800),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

.btn-success.btn-3d {
  box-shadow:
    0 2px 0 var(--nk-green-800),
    0 3px 6px rgba(0, 0, 0, 0.12);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.btn-success.btn-3d:hover {
  transform: translateY(-1px);

  box-shadow:
    0 3px 0 var(--nk-green-800),
    0 5px 8px rgba(0, 0, 0, 0.14);
}

.btn-success.btn-3d:active {
  transform: translateY(1px);

  box-shadow:
    0 1px 0 var(--nk-green-800),
    0 2px 3px rgba(0, 0, 0, 0.10);
}

.btn-danger.btn-3d {
  box-shadow:
    0 2px 0 var(--bs-danger-text-emphasis),
    0 3px 6px rgba(0, 0, 0, 0.12);
}

.btn-danger.btn-3d:hover {
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 var(--bs-danger-text-emphasis),
    0 5px 8px rgba(0, 0, 0, 0.14);
}

.btn-danger.btn-3d:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 var(--bs-danger-text-emphasis),
    0 2px 3px rgba(0, 0, 0, 0.10);
}

.form-control:focus {
  box-shadow: 0 0 0 .25rem #19875430 !important;
}

.form-select:focus {
  box-shadow: 0 0 0 .25rem #19875430 !important;
}

.form-select option:hover {
  background-color: green;
}

.alert-putih {
  /* background: #ffffff; */
  color: #101010;
  border-color: #4a7223;
}

.alert-abu {
  color: #080808;
  border-color: #c1c1c1;
  background: #c1c1c1;
}

/* Option saat hover / keyboard focus */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--color-brand) !important;
  color: var(--text-on-brand) !important;
}

/* Option yang sedang terpilih */
.select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: var(--color-brand) !important;
  color: var(--text-on-brand) !important;
}

.btn-primary{
  --bs-btn-color: var(--text-on-brand);
  --bs-btn-bg: var(--color-brand);
  --bs-btn-border-color: var(--color-brand);
  --bs-btn-hover-color: var(--text-on-brand);
  --bs-btn-hover-bg: var(--color-brand-strong);
  --bs-btn-hover-border-color: var(--color-brand-strong);
  --bs-btn-active-color: var(--text-on-brand);
  --bs-btn-active-bg: var(--nk-green-800);
  --bs-btn-active-border-color: var(--nk-green-800);
  --bs-btn-focus-shadow-rgb: 74, 114, 35;
  --bs-btn-disabled-color: var(--text-on-brand);
  --bs-btn-disabled-bg: var(--color-brand);
  --bs-btn-disabled-border-color: var(--color-brand);
}

.btn-outline-primary{
  --bs-btn-color: var(--text-brand);
  --bs-btn-border-color: var(--border-hairline);
  --bs-btn-hover-color: var(--text-brand);
  --bs-btn-hover-bg: var(--surface-sunken);
  --bs-btn-hover-border-color: var(--nk-sage-500);
  --bs-btn-active-color: var(--text-brand);
  --bs-btn-active-bg: var(--surface-sunken);
  --bs-btn-active-border-color: var(--nk-sage-500);
  --bs-btn-focus-shadow-rgb: 74, 114, 35;
}

.form-control,
.form-select{
  border-color: var(--border-hairline);
  border-radius: var(--radius-sm);
  min-height: 42px;
  color: var(--text-strong);
}

.form-control:focus,
.form-select:focus{
  border-color: var(--border-focus);
}

.form-check-input:checked{
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.form-label{
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

/* Bootstrap generates .text-bg-* utilities with color/background-color already !important — needs !important to win */
.text-bg-warning{
  color: var(--nk-white) !important;
}

/* Bootstrap's table cells paint via background-color:var(--bs-table-bg), resolved per-cell — override the variable itself, not background-color, or it loses to Bootstrap's own declaration */
.table thead{
  --bs-table-bg: var(--color-brand);
  --bs-table-color: var(--nk-white);
}

/* .card sets these on itself — a :root override would just get shadowed. Set --bs-card-border-radius, not the literal border-radius property, so .card-header:first-child's --bs-card-inner-border-radius (derived from it) stays flush with the card's corner. */
.card{
  --bs-card-bg: var(--surface-card);
  --bs-card-border-color: var(--border-hairline);
  --bs-card-cap-bg: var(--surface-sunken);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: var(--radius-md);
  border-radius: var(--radius-md);
}

.card-header:first-child{
  border-radius: 17px 17px 0 0;
}

.modal-header{
  background-color: var(--color-brand);
}

.modal-title{
  color: var(--nk-white);
}

.modal-header .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* select2-bootstrap-5-theme hardcodes literal Bootstrap blue hex, not var(--bs-primary) — same class of gotcha as pagination below. */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection{
  border-color: var(--border-focus);
  box-shadow: 0 0 0 .25rem rgba(74, 114, 35, .25);
}

.select2-container--bootstrap-5 .select2-dropdown{
  border-color: var(--border-focus);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted){
  background-color: var(--color-brand);
  color: var(--nk-white);
}

/* Bootstrap compiles pagination-active-bg to a literal hex, not var(--bs-primary) — override at the component itself. Also the default DataTables pagination style (bs5 build reuses .pagination markup). */
.pagination .page-item.active .page-link{
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--text-on-brand);
}

.pagination .page-link{
  color: var(--text-brand);
}

.pagination .page-link:hover{
  color: var(--color-brand-strong);
}

.pagination .page-link:focus{
  box-shadow: 0 0 0 .25rem rgba(74, 114, 35, .25);
}

/* DataTables' bs5 CSS build ships bare <select>/<input> for "entries per page" and "Search:" — no .form-select/.form-control class, so they never picked up this project's color remap and show the browser's native blue focus ring/arrow. Restyled here to look like a plain native control (not select2 — the open option list of a real <select> can't be recolored via CSS anyway, so there's no upside to swapping the widget), just with this site's green accent instead of Bootstrap's default blue. */
.dt-length select,
.dt-search input{
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: .375rem .75rem;
  outline: none;
}

.dt-length select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a7223' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 14px 10px;
  padding-right: 2rem;
}

.dt-length select:focus,
.dt-search input:focus{
  border-color: var(--border-focus);
  box-shadow: 0 0 0 .25rem rgba(74, 114, 35, .25);
  outline: none;
}

/* Negative margins — not in Bootstrap's default build */
.mt-n1{margin-top:-.25rem!important}
.mt-n2{margin-top:-.5rem!important}
.mt-n3{margin-top:-1rem!important}
.mt-n4{margin-top:-1.5rem!important}
.mt-n5{margin-top:-3rem!important}

.mb-n1{margin-bottom:-.25rem!important}
.mb-n2{margin-bottom:-.5rem!important}
.mb-n3{margin-bottom:-1rem!important}
.mb-n4{margin-bottom:-1.5rem!important}
.mb-n5{margin-bottom:-3rem!important}

.ms-n1{margin-left:-.25rem!important}
.ms-n2{margin-left:-.5rem!important}
.ms-n3{margin-left:-1rem!important}
.ms-n4{margin-left:-1.5rem!important}
.ms-n5{margin-left:-3rem!important}

.me-n1{margin-right:-.25rem!important}
.me-n2{margin-right:-.5rem!important}
.me-n3{margin-right:-1rem!important}
.me-n4{margin-right:-1.5rem!important}
.me-n5{margin-right:-3rem!important}

.mx-n1{margin-left:-.25rem!important;margin-right:-.25rem!important}
.mx-n2{margin-left:-.5rem!important;margin-right:-.5rem!important}
.mx-n3{margin-left:-1rem!important;margin-right:-1rem!important}
.mx-n4{margin-left:-1.5rem!important;margin-right:-1.5rem!important}
.mx-n5{margin-left:-3rem!important;margin-right:-3rem!important}

.my-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}
.my-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}
.my-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}
.my-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}
.my-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}

.inset-0{top:0!important;right:0!important;bottom:0!important;left:0!important}