/*
* custom.css
* File include item custom only specific css only
******************************************************************************/
/* table borderd */
.table-bordered {
   border: 1px solid #d9d9d9 !important;
}

.table-bordered th,
.table-bordered td {
   border: 1px solid #d9d9d9 !important;
}

[data-bs-theme=dark] .table-bordered {
   border: 1px solid var(--bs-border-color) !important;
}

[data-bs-theme=dark] .table-bordered th,
[data-bs-theme=dark] .table-bordered td {
   border: 1px solid var(--bs-border-color) !important;
}

div.dt-search {
   display: none;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
   padding-top: 64px !important;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
   padding-top: 72px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
   z-index: auto;
}

/*
* Content
******************************************************************************/

.custom-blocks>* {
   display: block !important;
}

.custom-inline-spacing>* {
   margin: 1rem 0.375rem 0 0 !important;
}

/* ? .custom-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .custom-only-element class with .custom-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.custom-vertical-spacing>* {
   margin-top: 1rem !important;
   margin-bottom: 0 !important;
}

.custom-vertical-spacing.custom-only-element> :first-child {
   margin-top: 0 !important;
}

.custom-vertical-spacing-lg>* {
   margin-top: 1.875rem !important;
   margin-bottom: 0 !important;
}

.custom-vertical-spacing-lg.custom-only-element> :first-child {
   margin-top: 0 !important;
}

.custom-vertical-spacing-xl>* {
   margin-top: 5rem !important;
   margin-bottom: 0 !important;
}

.custom-vertical-spacing-xl.custom-only-element> :first-child {
   margin-top: 0 !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
   #dropdown-variation-custom .btn-group .text-truncate {
      width: 254px;
      position: relative;
   }

   #dropdown-variation-custom .btn-group .text-truncate::after {
      position: absolute;
      top: 45%;
      right: 0.65rem;
   }
}

/*
* Layout custom
******************************************************************************/

.layout-custom-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   margin-top: 1rem;
}

.layout-custom-placeholder img {
   width: 900px;
}

.layout-custom-info {
   text-align: center;
   margin-top: 1rem;
}

/*
* Sidebar brand logo
******************************************************************************/

.menu .app-brand.custom {
   height: 64px;
   min-height: 64px;
   padding: 0 1rem;
}

.app-brand-logo.custom svg {
   width: 34px;
   height: 24px;
}

.app-brand-text.custom {
   font-size: 1.375rem;
}

#layout-menu .app-brand.custom {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

#layout-menu .app-brand.custom .app-brand-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   margin: 0;
   overflow: hidden;
}

#layout-menu .app-brand.custom .app-brand-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   max-height: 52px;
}

#layout-menu .app-brand-logo img,
#layout-menu .app-brand-logo .logo-dark-mode,
#layout-menu .app-brand-logo .logo-light-mode {
   max-width: 160px;
   max-height: 46px;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: all 0.2s ease-in-out;
}

#layout-menu .app-brand.custom .layout-menu-toggle {
   position: absolute;
   right: 0.75rem;
   z-index: 2;
}

#layout-menu .app-brand-logo .logo-dark-mode {
   display: none;
}

html[data-bs-theme="dark"] #layout-menu .app-brand-logo .logo-dark-mode {
   display: inline-block;
}

html[data-bs-theme="dark"] #layout-menu .app-brand-logo .logo-light-mode {
   display: none;
}

/* Responsive saat sidebar collapsed / mini sidebar */
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand.custom {
   padding: 0 0.5rem;
}

.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo img,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo .logo-dark-mode,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo .logo-light-mode {
   max-width: 38px;
   max-height: 38px;
}

.layout-menu-collapsed:not(.layout-menu-hover, .layout-menu-offcanvas, .layout-menu-fixed-offcanvas) .layout-menu-toggle .menu-toggle-icon {
   display: none !important;
}

/*
* CSP-safe helpers
******************************************************************************/
.border-style-dashed {
   border-style: dashed !important;
}

.menu-icon-card {
   cursor: pointer;
   transition: all 0.2s ease;
   transform: translateY(0);
}

.menu-icon-card-hover {
   transform: translateY(-4px);
}

.menu-icon-preview {
   height: 60px;
}

.menu-icon-class {
   font-size: 0.7rem;
   font-family: monospace;
}

.menu-icon-col {
   transition: all 0.4s ease;
   opacity: 1;
   transform: translateY(0);
}

.menu-icon-col-pending {
   opacity: 0;
   transform: translateY(20px);
}

.menu-icon-spinner {
   width: 3rem;
   height: 3rem;
}

.activity-json-key {
   color: #66d9ef;
}

.activity-json-string {
   color: #a6e22e;
}

.activity-json-boolean {
   color: #fd971f;
}

.activity-json-null {
   color: #f92672;
}

.activity-json-number {
   color: #ae81ff;
}

/* DataTable Action Buttons Spacing */
table.dataTable td .btn+.btn,
table.dataTable td .btn+a.btn,
table.dataTable td a.btn+.btn,
table.dataTable td a.btn+a.btn {
   margin-left: 0.15rem;
}

table.dataTable td .d-inline-flex {
   gap: 0.15rem !important;
}

/*
* Notyf Toast Modernization & Solid Alert Styles
******************************************************************************/
.notyf {
   z-index: 10050 !important;
}

.notyf__toast {
   max-width: 460px !important;
   min-width: 320px !important;
   border-radius: 8px !important;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
   overflow: hidden !important;
   background-color: #ff9f43; /* Fallback solid color */
}

.notyf__toast--error,
.notyf__error,
.notyf__toast[data-type="error"] {
   background-color: #ea5455 !important;
}

.notyf__toast--success,
.notyf__success,
.notyf__toast[data-type="success"] {
   background-color: #28c76f !important;
}

.notyf__toast--warning,
.notyf__warning,
.notyf__toast[data-type="warning"] {
   background-color: #ff9f43 !important;
}

.notyf__toast--info,
.notyf__info,
.notyf__toast[data-type="info"] {
   background-color: #00cfe8 !important;
}

.notyf__ripple {
   height: 1200px !important;
   width: 1200px !important;
   right: -100px !important;
   top: -100px !important;
}

.notyf__toast--warning .notyf__ripple,
.notyf__warning .notyf__ripple {
   background-color: #ff9f43 !important;
}

.notyf__toast--success .notyf__ripple,
.notyf__success .notyf__ripple {
   background-color: #28c76f !important;
}

.notyf__toast--error .notyf__ripple,
.notyf__error .notyf__ripple {
   background-color: #ea5455 !important;
}

.notyf__toast--info .notyf__ripple,
.notyf__info .notyf__ripple {
   background-color: #00cfe8 !important;
}

.notyf__wrapper {
   padding: 14px 18px !important;
   align-items: flex-start !important;
}

.notyf__icon {
   margin-top: 3px !important;
   margin-right: 14px !important;
   flex-shrink: 0 !important;
   font-size: 1.15rem !important;
   color: #ffffff !important;
}

.notyf__message {
   line-height: 1.55 !important;
   font-size: 0.875rem !important;
   word-break: break-word !important;
   white-space: normal !important;
   color: #ffffff !important;
   font-weight: 500 !important;
}

.notyf__dismiss {
   align-self: flex-start !important;
   margin-top: 3px !important;
   margin-left: 12px !important;
}

.notyf__dismiss-btn {
   opacity: 0.85 !important;
   transition: opacity 0.2s ease !important;
}

.notyf__dismiss-btn:hover {
   opacity: 1 !important;
}

@media (max-width: 576px) {
   .notyf__toast {
      max-width: calc(100vw - 32px) !important;
      min-width: calc(100vw - 32px) !important;
      margin-left: 16px !important;
      margin-right: 16px !important;
   }
}