/* 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;
}
a.text-link:hover {
  text-decoration: underline;
}

.badge{
  font-size: small !important;
}

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-xxs { font-size: 0.625rem; }
.text-underline { text-decoration: underline; }

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

.btn-white {
  background: #fff;
  color: #333;
  border: 1px solid #d8d8d8;
  box-shadow: 0 3px 0 #c5c5c5;
}

.btn-white:hover {
  background: #f7f7f7;
  color: #222;
  border-color: #ccc;
}

.btn-white:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #c5c5c5;
}

.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);

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

.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);
}

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

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

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

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

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

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

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

.btn-primary.btn-3d {
  box-shadow:
    0 2px 0 #1d2b11,
    0 3px 6px rgba(0, 0, 0, 0.12);

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

.btn-primary.btn-3d:hover {
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 #151d0e,
    0 5px 8px rgba(0, 0, 0, 0.14);
}

.btn-primary.btn-3d:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 #151d0e,
    0 2px 3px rgba(0, 0, 0, 0.10);
}

.form-control, .form-select {
  background-color: var(--nk-cream-50);
}

.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);
  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);
}

.table {
  font-size: 10pt !important;
}

.table th {
  vertical-align: middle;
}

.card-header{
  background-color: #4a7223; 
  color: 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: var(--radius-md) var(--radius-md) 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%);
}

.modal-body > form .form-control,
.modal-body > form .form-select {
  background-color: var(--surface-card);
}

/* 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 dropdown-link-active-bg to a literal blue hex and its hover bg is a barely-visible grey — override at the component itself. */
.dropdown-menu{
  --bs-dropdown-link-hover-bg: var(--nk-green-100);
  --bs-dropdown-link-hover-color: var(--text-brand);
  --bs-dropdown-link-active-bg: var(--color-brand);
  --bs-dropdown-link-active-color: var(--text-on-brand);
}

/* Every loader shows the spinning Nakamura mascot: Bootstrap's .spinner-border (used inline across ~140 views), DataTables' "processing" dots and SweetAlert2's Swal.showLoading() ring. The GIF spins on its own, so the rotate animations are switched off. */
.spinner-border,
div.dt-container div.dt-processing > div:last-child,
.swal2-container .swal2-loader{
  background: url('../../media/nakamura-maskot-lingkaran-berputar.gif') center / contain no-repeat;
}
.spinner-border{
  --bs-spinner-width: 12rem;
  --bs-spinner-height: 12rem;
  border: 0;
  border-radius: 0;
  animation: none;
}
.spinner-border-sm{
  --bs-spinner-width: 5rem;
  --bs-spinner-height: 5rem;
}
/* Inside a button the mascot has to fit the button's line height. */
.btn .spinner-border{
  --bs-spinner-width: 1.75rem;
  --bs-spinner-height: 1.75rem;
  vertical-align: middle;
}
div.dt-container div.dt-processing{
  margin-top: -7.5rem;
}
div.dt-container div.dt-processing > div:last-child{
  width: 12rem;
  height: 12rem;
  margin: .25rem auto 0;
}
div.dt-container div.dt-processing > div:last-child > div{
  display: none;
}
.swal2-container .swal2-loader{
  width: 12em;
  height: 12em;
  border: 0;
  border-radius: 0;
  animation: none;
}

/* 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);
  min-width: 2.375rem;
}

.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;
}

/* fixedColumns CSS forces border-collapse: separate on every DataTable, dropping Bootstrap's row borders — opt back in on tables without fixed columns. */
table.dataTable.table-bordered.dt-border-collapse{
  border-collapse: collapse;
}

table.dataTable.table-bordered.dt-border-collapse > :not(caption) > * > :last-child{
  border-right-color: var(--bs-border-color);
}

/* Tables with fixedColumns must stay border-collapse: separate, so each cell draws its own right/bottom border instead. */
table.table.dataTable.table-bordered.dt-border-separate > :not(caption) > * > *{
  border-style: solid;
  border-color: var(--bs-border-color);
  border-width: 0 var(--bs-border-width) var(--bs-border-width) 0;
}

table.table.dataTable.table-bordered.dt-border-separate > :not(caption) > * > :first-child{
  border-left-width: var(--bs-border-width);
}

table.table.dataTable.table-bordered.dt-border-separate > thead > tr:first-child > *{
  border-top-width: var(--bs-border-width);
}

/* 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}

/* Port of the CI3 theme's .ribbon-wrapper/.ribbon (45° corner label on a stat tile) — Bootstrap has no primitive for it and 75 CI3 views use it. Host needs .position-relative + .overflow-hidden. */
.nk-ribbon-wrapper{
  position: absolute;
  top: 0;
  right: 0;
  width: 85px;
  height: 88px;
  overflow: hidden;
  pointer-events: none;
}

.nk-ribbon{
  display: block;
  position: relative;
  left: -5px;
  top: 15px;
  width: 120px;
  padding: 5px 0;
  transform: rotate(45deg);
  text-align: center;
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--nk-white);
  background-color: var(--color-brand);
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.nk-ribbon-danger{background-color: var(--status-danger);}
.nk-ribbon-warning{background-color: var(--status-warning);}
.nk-ribbon-info{background-color: var(--status-info);}
.nk-ribbon-muted{background-color: var(--nk-cream-300); color: var(--text-body);}

/* Nav Pills Primary */
.nav-pills-primary {
  padding: 0.25rem;
  border-radius: 0.5rem;
  background-color: var(--nk-green-100);
  color: var(--nk-white);
}

.nav-pills.nav-pills-primary .nav-link.active,
.nav-pills.nav-pills-primary .show>.nav-link {
  color: var(--nk-white);
  background-color: var(--nk-green-500);
}

/* Flatpickr ships a hardcoded blue (#569ff7) for selected/range days — recolored to the brand green. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay{
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--text-on-brand);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){
  box-shadow: -10px 0 0 var(--color-brand);
}

.flatpickr-day.week.selected{
  box-shadow: -5px 0 0 var(--color-brand), 5px 0 0 var(--color-brand);
}