/*DATEPICKER*/
.datepicker-dropdown {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  background-color: var(--bs-body-bg);
  padding: 0.75rem 1rem;
  font-family: var(--bs-body-font-family);
  z-index: 2000 !important;
  width: 18rem;
}

/* Header */
.datepicker .datepicker-switch {
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--bs-body-color);
  background: none;
  border: none;
  margin-bottom: 0.8rem;
}

.datepicker .prev,
.datepicker .next {
  color: var(--bs-body-color);
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.datepicker .prev:hover,
.datepicker .next:hover {
  background-color: var(--bs-light);
}

/* Days table */
.datepicker table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
}

.datepicker table tr th {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.datepicker table tr td {
  text-align: center;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.875rem;
  line-height: 2.25rem;
  color: var(--bs-body-color);
  transition: all 0.2s ease-in-out;
}

.datepicker table tr td.day:hover {
  background-color: var(--bs-light);
  cursor: pointer;
}

/* Active date */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  font-weight: 600;
  /* box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2); */
}

/* Today indicator */
.datepicker table tr td.today {
  background-color: var(--bs-info-bg-subtle) !important;
  color: var(--bs-info-text-emphasis) !important;
  font-weight: 500;
}
.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
    background-color: #fde19a!important;
    background-image:none;
    color:#000;
}

/* Disabled days */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  color: var(--bs-secondary-color);
  opacity: 0.35;
  cursor: not-allowed;
}

/* Month/year selection */
.datepicker-months,
.datepicker-years {
  padding: 0.5rem 0;
}

.datepicker table tr td span {
  display: inline-block;
  width: 4rem;
  border-radius: 0.75rem;
  padding: 0.5rem 0;
  margin: 0.25rem;
  transition: background-color 0.15s;
}

.datepicker table tr td span:hover {
  background-color: var(--bs-light);
}

.datepicker table tr td span.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/*TIMEPICKER*/
.tempus-dominus-widget {
  background-color: #fff !important;
  color: #212529 !important;
  border-radius: 1rem !important; 
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

.tempus-dominus-widget .time-container .timepicker-hour,
.tempus-dominus-widget .time-container .timepicker-minute {
  color: #212529 !important;
}

.tempus-dominus-widget .meridiem-container .btn {
  background-color: #e9ecef !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s;
}

.tempus-dominus-widget .time-container-clock div:not(.no-highlight):hover {
  background-color: #0d6efd !important;
  color: #fff !important;
}

.tempus-dominus-widget .time-container-hour div:not(.no-highlight):hover {
  background-color: #0d6efd !important;
  color: #fff !important;
}

.tempus-dominus-widget .separator {
  color: #212529 !important;
}

.tempus-dominus-widget {
  z-index: 2000 !important;
}

.tempus-dominus-widget .bi {
  font-size: 1.2rem;
  vertical-align: middle;
}


/*SELECT2*/
/* === Select2 style agar mirip Bootstrap 5.3 === */
.select2-container .select2-selection--single {
    height: 40px; /* tinggi seperti form-select bootstrap */
    padding: 0.65rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #dee2e6;
    border-radius: 50rem; /* buat oval seperti gambar */
    background-color: #fff;
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #d6d6d6;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple, .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: 50rem;
    border-bottom-right-radius: 50rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #212529;
    line-height: 1rem;
    padding-left: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 1rem;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:hover {
    border-color: #fe8686;
    box-shadow: 0 0 0 0.25rem rgba(253, 13, 13, 0.25);
}
.select2-container--default .select2-dropdown {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
.select2-results__option--highlighted {
    background-color: #c80136 !important;
    color: #fff !important;
}

[data-bs-theme=dark] .select2-container--default .select2-results>.select2-results__options {
    color: #adb2b8;
}
[data-bs-theme=dark] .select2-container .select2-selection--single {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #adb2b8;
}
[data-bs-theme=dark] .select2-container--default .select2-dropdown {
    border: var(--bs-border-width) solid var(--bs-border-color);
}
[data-bs-theme=dark] .select2-dropdown {
    background-color: var(--bs-body-bg);
}
[data-bs-theme=dark]  .select2-container--default .select2-results__option--selected {
    background-color: var(--bs-body-bg);
}

/*HIGHCHART*/
.highcharts-data-table table {
    border-collapse: collapse;
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}
.highcharts-data-table caption {
    caption-side: top;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #fff;
}
.highcharts-data-table thead tr {
    background-color: #9d9d9d;
    color: rgb(36, 36, 36);
    text-align: center;
}
.highcharts-data-table th,
.highcharts-data-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    color: rgb(36, 36, 36);
}
.highcharts-data-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.highcharts-data-table tbody tr:hover {
    background-color: #f1f1f1;
}
.highcharts-data-table td:first-child {
    text-align: left;
    font-weight: 600;
}
.highcharts-data-table td:last-child {
    text-align: right;
    font-weight: 600;
}
.highcharts-data-table tfoot td {
    font-weight: bold;
    background-color: #f1f1f1;
}


/*DATATABLE*/
div.dt-container div.dt-layout-cell.dt-start {
    text-align: left;
    display: flex;
}
.bg-warning div.dt-container .dt-info, div.dt-container .dt-length, div.dt-container .dt-paging, div.dt-container .dt-processing, div.dt-container .dt-search {
    color: #212529;
}





.adminuiux-header .navbar .navbar-brand img {
    height: 48px;
    /* margin-right: 10px; */
    margin-bottom: 0px;
    width: 190px;
    object-fit:cover;
}
.adminuiux-header.active .navbar {
    background-color: rgb(22 22 22 / 85%);
}
.adminuiux-sidebar-fill-theme .adminuiux-sidebar .nav.menu-active-line .nav-item .nav-link.active
{
    background-color: #ffc207 !important;
    color: #212529;
}
.adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active i, .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active svg, .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.show i, .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.show svg, .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:active:not(.dropdown-toggle) i, .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:active:not(.dropdown-toggle) svg{
  color: #212529;
}
.form-label {
    color: #7b7b7b;
}

.gallery-item{
  height: 200px !important;
  width:100% !important;
  object-fit:cover;
}

.opacity-40 {
    opacity: .4 !important;
}

.btn-signin {
    position: absolute;
    left: 28px;
    top: 75%;
}
.btn-signin {
    transition: all .3s ease;
    padding-right: 1.5rem; 
    padding-left: 1.5rem;
}
.btn-signin:hover {
    padding-right: 2.5rem; 
}
.btn-signin i {
    transition: transform .3s ease;
}
.btn-signin:hover i {
    transform: translateX(5px);
}

/* glossy overlay */
.animasi-light {
    position: relative;
}
.animasi-light::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );
    transform: skewX(-25deg);
    animation: glossy-move 6s linear infinite; /* total cycle 6s */
}
@keyframes glossy-move {
    0%   { left: -100%; }
    50%  { left: 150%; }   /* selesai animasi di 3 detik */
    100% { left: 150%; }   /* sisa 3 detik diam */
}

/*THEME*/
[data-bs-theme=light] .theme-red {
    --adminuiux-bg-1: #f4f4f4;
}
[data-bs-theme=light] .text-theme-3 {
    color: #000000;
}
[data-bs-theme=light] .text-theme-4 {
    color: #ffffff;
}
[data-bs-theme=light] .text-caption-head {
    color:#c80036;
    background-color: #fd9a9a63;
    padding: 5px 10px;
    border-radius: 9999px 9999px 9999px 9999px;
}
[data-bs-theme=light] .tbl-head-foot {
    background-color: #ffffff;  
    color: var(--bs-heading-color);
}


[data-bs-theme=dark] .adminuiux-header-boxed.adminuiux-header-fill-white .adminuiux-header .navbar>.container-fluid{background-color: #c80136;}
[data-bs-theme=dark] .theme-red {
    --adminuiux-bg-1: #1D232B;
}
[data-bs-theme=dark] .text-theme-3 {
    color: #ffffff;
}
[data-bs-theme=dark] .text-theme-4 {
    color: #000000;
}
[data-bs-theme=dark] .text-caption-head {
    color:#ffc207;
    background-color: #fde19a63;
    padding: 5px 10px;
    border-radius: 9999px 9999px 9999px 9999px;
}

[data-bs-theme=dark] .tbl-head-foot {
    background-color: #1d232b;  
    color: var(--bs-heading-color);
}
[data-bs-theme=dark] .tbl-head-foot th {
    background-color: #1d232b;  
    color: var(--bs-heading-color);
    font-weight:bold;
}
[data-bs-theme=dark] .card {
    --bs-card-bg: rgb(184 184 184 / 15%);
    backdrop-filter: blur(15px);
}


@media screen and (max-width: 991px) {
    .adminuiux-sidebar-boxed .adminuiux-sidebar .adminuiux-sidebar-inner {
        background-color: #c80136!important;
    }
}

/* Tablet ≥768px */
@media (min-width: 768px) {
    .btn-signin {
        left: 70px;
        transform: translate(-30%, -50%);
    }
}

/* Desktop ≥1200px */
@media (min-width: 1200px) {
    .btn-signin {
        left: 98px;
        top: 70%;
        transform: translate(-20%, -50%);
    }
}

/* Extra Large Desktop (27 inch) ≥1920px */
@media (min-width: 1920px) {
    .btn-signin {
        left: 125px;
        top: 70%;
        transform: translate(-20%, -50%);
    }
}