.template-v2 {
	font-family: "Montserrat", sans-serif;
	color: #101010;
	font-weight: 500;
}

.template-v2 svg.lucide,
.template-v2 svg.lucide * {
	fill: none !important;
}

.template-v2 .fw-bold {
	font-weight: 700;
}

.template-v2 .fw-normal {
	font-weight: 500;
}

.template-v2 .rounded-sm {
	border-radius: 5px;
}

.template-v2 .rounded-md {
	border-radius: 7px;
}

.template-v2 .text-sm {
	font-size: 12px;
}

.template-v2 .text-xs {
	font-size: 10px;
}

.template-v2 .line-height-0 {
  line-height: 0;
}

.template-v2 .bg-golden {
	background-color: #ebe8dd !important;
}

.template-v2 .list-group-item {
  font-size: 11px;
}

.template-v2 .border-hayyu {
	border: 1px solid #006462;
	color: #006462;
}

.template-v2 .btn-icon {
	width: 30px !important;
	height: 30px !important;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.template-v2 .btn-icon i.fa {
	font-size: 13px;
	line-height: 1;
	display: block;
}

.template-v2 .tab-navigation .nav-pills {
	background-color: inherit !important;
	width: fit-content !important;
	border: 0;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	/* height: 40px; */
}

.template-v2 .tab-navigation .uib-tab.nav-item {
	height: 40px;
}

.template-v2 .tab-navigation .hidden-nav .nav-pills {
	display: none;
}

.template-v2 .tab-navigation .hidden-nav .tab-content {
	background-color: inherit !important;
	padding: 0;
}

.template-v2 .tab-navigation .nav-tabs {
	background-color: white !important;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.template-v2 .tab-navigation .tab-content {
	background-color: white;
	border: none;
	padding: 1.25rem;
}

.template-v2 .tab-navigation .tab-content .tab-pane {
	padding: 0 !important;
}

/* Hide .tab-content bawaan uib-tabset kalau content di-render manual di luar
   tabset (pattern anti stale-flash saat pindah tab dgn ng-switch +
   tableComponentV3). Add class `tab-heading-only` di <uib-tabset ...> supaya
   selector match. Content sungguhan tetap render via .tab-content sibling yg
   kita bikin manual di HTML fitur.

   NB: uib-tabset compile ganti tag jadi <div> plain, jadi tak bisa pakai
   selector `uib-tabset[type="pills"]` — pakai class marker `tab-heading-only`. */
.template-v2 .tab-navigation .tab-heading-only > .tab-content {
	display: none;
}

.template-v2 .tab-navigation .nav-link {
	border: none !important;
	color: #3e3f44 !important;
	font-weight: 400;
	font-size: 16px;
	line-height: 23.8px;
	padding: 8px 30px;
}

.template-v2 .tab-navigation .nav-pills .nav-link.active {
	background-color: #ffffff;
	color: #006462 !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 23.8px;
	padding: 8px 30px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	height: 40px;
}

.template-v2 .tab-navigation .btn-sm {
	width: auto;
}

@media (max-width: 768px) {
	.template-v2 .tab-navigation .form-group .btn-sm {
		width: auto;
	}

	.template-v2 .tab-navigation .nav-pills {
		background-color: inherit !important;
		width: 100% !important;
		border: 0;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		display: flex;
		justify-content: start;
		align-items: center;
		flex-wrap: nowrap;
	}

	.template-v2 .tab-navigation .uib-tab.nav-item {
		flex: 1 1 0;
		min-width: 0;
	}

	.template-v2 .tab-navigation .tab-content {
		background-color: white;
		border: none;
		padding: 0.8rem;
	}

	.template-v2 .tab-navigation .nav-pills .nav-link.active {
		background-color: #ffffff;
		color: #006462 !important;
		font-size: 12px;
		font-weight: 600;
		line-height: 23.8px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		height: 40px;
		padding: 8px 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.template-v2 .tab-navigation .nav-link {
		border: none !important;
		color: #3e3f44 !important;
		font-weight: 400;
		font-size: 12px;
		padding: 8px 10px;
		line-height: 23.8px;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		width: 100%;
	}

	.template-v2 .tab-navigation .nav-pills .nav-link.active {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
		text-align: center;
		width: 100%;
	}

	.flex-grow-1 {
		flex-grow: 1 !important;
		min-width: unset !important;
	}

	.w-100-mobile {
		width: 100% !important;
	}

	.w-50-mobile {
		width: 50% !important;
	}
}

.template-v2 .border-primary {
	border-color: #006462 !important;
	border-radius: 7px;
}

.template-v2 .dropdown-menu-v2 {
	cursor: pointer;
	border-radius: 7px;
	overflow: hidden;
}

.template-v2 .dropdown-menu-v2 .dropdown-item.selected-item {
	background-color: #006462 !important;
	color: #ffffff !important;
}

.template-v2 .dropdown-menu-v2 .dropdown-item.selected-item:hover {
	background-color: #006462 !important;
}

.template-v2 .dropdown-menu-v2 .dropdown-item:focus,
.template-v2 .dropdown-menu-v2 .dropdown-item:hover {
	background-color: #006462 !important;
	border: none !important;
	outline: none !important;
	color: white;
}


.card-stat {
    position: relative;
    height: 150px;
    padding: 40px;
    overflow: hidden;
}

.card-stat::after {
    content: "";
    position: absolute;
    right: 0;
    top: 24px;
    width: 300px;
    height: 200px;
    background-image: url("https://storage.googleapis.com/hayyu-storage/landing-page/assets/background-vector-2.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;
    z-index: 1;
}

.card-stat__info-btn {
    position: absolute;
    top: 5%;
    left: 1%;
    color: #AAAAAA;
    background: transparent;
    border: none;
    z-index: 3;
}

.card-stat__info-btn:hover {
    color: #006462;
}

.card-stat__content {
    position: relative;
    z-index: 2;
    color: #006462;
    text-align: center;
}

@media (min-width: 992px) {
    /* Class baru untuk modal yang lebih besar */
    .modal-2lg {
        max-width: 1140px; /* Anda bisa mengubah angka ini sesuai kebutuhan (misal: 1200px) */
        width: 100%;
    }
}

/* Shadow Utilities */
.shadow-sm {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.shadow-md {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.12),
    0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.shadow-lg {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.12),
    0 0 1px rgba(0, 0, 0, 0.08) !important;
}

/* Modal custom */
.modal-hayyu .modal-content {
	border-radius: 8px;
	border: none;
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: visible !important;
}
.modal-hayyu .modal-header {
	background-color: #b0cfce !important;
	color: #1f1f1f !important;
	padding: 14px 20px;
	border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.modal-hayyu .modal-header .close {
	color: #1f1f1f;
	opacity: 0.85;
	font-size: 1.4rem;
	text-shadow: none;
}
.modal-hayyu .modal-header .close:hover { opacity: 1; }
.modal-hayyu .modal-header .close:focus { border: none; outline: none; }
.modal-hayyu .modal-body {
    padding: 20px;
    overflow: visible;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.modal-hayyu .modal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.modal-hayyu .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.modal-hayyu .modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.modal-hayyu .modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.modal-hayyu .modal-footer {
	padding: 12px 20px;
	background-color: #f8f9fa;
	border-top: 1px solid #eaeaea;
	border-radius: 0 0 7px 7px;
}
.modal-hayyu .modal-title { font-size: 14px; font-weight: 600; }
.modal-info-row {
	display: flex;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
	align-items: flex-start;
}
.modal-info-row:last-child { border-bottom: none; }
.modal-info-label { color: #1f1f1f; min-width: 75px; flex-shrink: 0; }
.modal-info-value { color: #536c79; font-weight: 500; }

.btn.btn-sm.rounded-circle {
    width: 27px;
    height: 27px;
}

/* Warna shift jadwal karyawan */
td.pagi  { background-color: #cdedd8; }
td.siang { background-color: #ffeeba; }
td.libur { background-color: #f5c6cb; }


/* tableComponentV2 — display column dropdown */
.tc-display-column-menu:not(.ng-hide) { display: block !important; }
.tc3-display-column-menu:not(.ng-hide) { display: block !important; }

.tc-display-column-menu {
    scrollbar-color: rgba(0, 100, 98, 0.35) #FFFFFF;
    scrollbar-width: thin;
}

.gap-2 {
    gap: .5rem !important;
}

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

/* empty state — reusable */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: #9aa0ab;
}
.empty-state svg {
    width: 48px;
    height: 48px;
    stroke: #c8cdd6;
    margin-bottom: 16px;
}
.empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: #6d6f78;
    margin-bottom: 4px;
}
.empty-state-sub {
    font-size: 13px;
    color: #9aa0ab;
    margin-bottom: 0;
}

/* skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 4px;
}
.skeleton-text {
    height: 14px;
    display: block;
}
.skeleton-text.w-100 { width: 100%; }
.skeleton-text.w-80  { width: 80%; }
.skeleton-text.w-60  { width: 60%; }
.skeleton-text.w-40  { width: 40%; }
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.template-v2 .card-header-v2 {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #e4e7ea;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
}
.template-v2 .card-header-v2 .card-title {
    font-size: 14px;
    font-weight: 600;
    color: #23282c;
    margin: 0;
}


/* Fix header alignment in table components when columns are right/center aligned */
.table-style th.align-right .d-flex {
    justify-content: flex-end !important;
}
.table-style th.align-center .d-flex {
    justify-content: center !important;
}

/* pageSizeDropdown suffix: di desktop dalam button, di mobile di luar sebelah kiri */
@media (max-width: 767px) {
    page-size-dropdown .psd-suffix-mobile { display: inline !important; }
    page-size-dropdown .psd-suffix-desktop { display: none; }
}

@media (min-width: 768px) {
    .flex-md-grow-0 {
        flex-grow: 0 !important;
    }
}

@media (max-width: 575.98px) {
  /* 1. Mengubah posisi wadah utama modal ke paling bawah */
  .modal.modal-hayyu .modal-dialog {
    position: fixed;
    margin: 0;
    width: 100%;
    max-width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    
    /* Animasi muncul dari bawah */
    transform: translateY(100%) !important;
    transition: transform 0.3s ease-out-in;
  }

  /* 2. Ketika modal aktif/tampil */
  .modal.modal-hayyu.show .modal-dialog {
    transform: translateY(0) !important;
  }

  /* 3. Styling opsional biar sudut atasnya melengkung ala drawer modern */
  .modal.modal-hayyu .modal-content {
    border-radius: 12px 12px 0 0;
    border: none;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
  }

  .modal.modal-hayyu .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }

  .modal.modal-hayyu .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    background-color: white !important;
    border-bottom: 1px solid #b0cfce !important;
  }

  .modal.modal-hayyu .modal-body .table-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal.modal-hayyu .modal-body .table-scroll-x table {
    min-width: max-content;
  }

  .table-responsive-hayyu,
  .table-responsive-hayyu.table-bordered {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-hayyu table {
    min-width: 600px;
  }
}

/* ============================================================
 * Section Header (responsive)
 * Pola umum: judul kiri + actions kanan (filter, button, dll).
 * Mobile: stack vertikal, actions full-width.
 *
 * Markup:
 *   <div class="section-header mb-3">
 *     <h5 class="section-header__title">Judul</h5>
 *     <div class="section-header__actions">
 *       <div class="section-header__field"> ...filter... </div>
 *       <button class="button"> ... </button>
 *     </div>
 *   </div>
 * ============================================================ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.section-header__title {
  margin: 0;
  color: #333;
  font-size: 14px;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.section-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.section-header__actions > .button {
  min-width: auto;
}

.section-header__field {
  width: 280px;
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .section-header {
    flex-direction: column;
    align-items: stretch;
  }

  .section-header__title {
    width: 100%;
  }

  .section-header__actions {
    width: 100%;
  }

  .section-header__field {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .section-header__actions > .button {
    flex: 0 0 auto;
  }
}

/* ============================================================
 * Drawer Modal (bottom-sheet) — global, must load early
 * Override Bootstrap default modal-dialog slide-from-top.
 * Used by: monthpickerField, allperiodDatepickerDrawerField,
 *          daterangepickerField (mobile).
 * ============================================================ */
.drawer-modal.modal.fade .modal-dialog,
.drawer-modal .modal-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: auto;
  margin: 0;
  transform: translateY(100%) !important;
  transition: transform 0.3s ease-out !important;
  overflow: auto;
}

.drawer-modal.modal.fade.ng-leave .modal-dialog,
.drawer-modal.ng-leave .modal-dialog {
  transition: transform 0.2s ease-in !important;
  transform: translateY(100%) !important;
}

.drawer-modal .modal-dialog {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 13px rgba(0, 0, 0, 0.1);
  border: none;
}

.drawer-modal.in .modal-dialog,
.drawer-modal.show .modal-dialog,
.drawer-modal.modal.show .modal-dialog {
  transform: translateY(0) !important;
}

.drawer-modal .modal-dialog.ng-leave {
  transform: translateY(0) !important;
}

.drawer-modal .modal-dialog.ng-leave-active {
  transform: translateY(100%) !important;
}

/* ============================================
   no-ng-animate: matikan animasi ngAnimate untuk semua child element.
   Pakai di tabel dinamis (add/remove row) atau container ng-repeat yg
   butuh DOM update instan tanpa fade/slide bawaan ngAnimate.
   Contoh: <table class="table no-ng-animate"> ... </table>
   ============================================ */
.no-ng-animate .ng-enter,
.no-ng-animate .ng-leave,
.no-ng-animate .ng-move,
.no-ng-animate.ng-enter,
.no-ng-animate.ng-leave,
.no-ng-animate.ng-move {
    transition: none !important;
    animation: none !important;
}
.no-ng-animate .ng-leave,
.no-ng-animate.ng-leave {
    display: none !important;
}

/* ============================================
   Modern spinner override (fa-spinner)
   Ganti glyph FA lama (titik) jadi ring loader.
   ============================================ */
.template-v2 .fa-spinner,
.template-v2 .fa.fa-spinner,
.template-v2 .fas.fa-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    border: 0.1em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hy-spin 0.7s linear infinite;
    /* biarkan font-size ikut FA (fa-lg/2x/3x tetap ngefek) */
    line-height: 1;
    text-align: center;
    color: inherit;
    box-sizing: border-box;
}
.template-v2 .fa-spinner::before,
.template-v2 .fa.fa-spinner::before,
.template-v2 .fas.fa-spinner::before {
    content: none !important;
}
/* matikan animasi FA fa-spin/fa-pulse — pakai keyframes sendiri */
.template-v2 .fa-spinner.fa-spin,
.template-v2 .fa-spinner.fa-pulse {
    animation: hy-spin 0.7s linear infinite;
}
/* size helpers opsional (ikut fa-lg/2x/3x kalau ada) */
.template-v2 .fa-spinner.fa-lg  { border-width: 0.11em; }
.template-v2 .fa-spinner.fa-2x  { border-width: 0.12em; }
.template-v2 .fa-spinner.fa-3x  { border-width: 0.13em; }

@keyframes hy-spin {
    to { transform: rotate(360deg); }
}

/* Cell drill anchor — clickable count cell yang buka modal detail */
.cell-drill {
    color: #006462;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
}
.cell-drill:hover {
    text-decoration: underline;
    color: #006462;
}
@media print {
    .cell-drill {
        color: inherit;
        text-decoration: none;
    }
}

/* ============================================================
   [FROM main-layout.css] Utilities kecil migrated dari file yg dihapus.
   Semua diprefix .template-v2 / body.template-v2 supaya tak bocor ke V1.
   ============================================================ */

/* [FROM main-layout.css L1-3] body font-size dasar V2 */
body.template-v2 {
	font-size: 11px;
}

/* [FROM main-layout.css L5-9] Modal banner mobile */
@media (max-width: 576px) {
	.template-v2 .modal-banner {
		max-width: 80vw;
	}
}

/* [FROM main-layout.css L44-56] Options mobile (dropdown filter shift dsb.) */
.template-v2 .options-mobile {
	gap: 0.9rem;
	align-items: center;
	color: #006462;
}

.template-v2 .options-mobile select {
	height: 27px;
	color: #006462;
	border: 1px solid #c8ced3;
	padding-left: 5px;
	font-weight: 500;
}

/* [FROM main-layout.css L413-416] Dropdown mobile hidden default */
.template-v2 .dropdown-menu-mobile {
	display: none !important;
	z-index: 3002;
}

/* [FROM main-layout.css L431-439] uib-modal transclude border-radius */
.template-v2 .modal-content[uib-modal-transclude] {
	border-radius: 10px;
	border: none;
	overflow: hidden;
}

.template-v2 .modal-content[uib-modal-transclude] .modal-header {
	padding: 14px 20px;
}

/* [FROM main-layout.css L441-450] Btn export */
.template-v2 .btn-export {
	width: 135px;
	height: 32px;
	padding: 7px 11px;
	border-radius: 5px;
	font-size: 0.72rem;
	background-color: white;
	border: 1px solid #006462;
	color: #006462;
}

/* [FROM main-layout.css L452-454] Cursor pointer utility */
.template-v2 .cursor-pointer {
	cursor: pointer;
}

/* [FROM main-layout.css L456-485] Report table styling */
.template-v2 .report-table-style {
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 0 !important;
	border: 0 !important;
}

.template-v2 .report-table-style:not(.body-stripped) tbody tr:nth-child(odd) {
	background-color: rgb(247, 250, 250);
}

.template-v2 .report-table-style.body-stripped tbody:nth-child(odd) tr {
	background-color: rgb(247, 250, 250);
}

.template-v2 .report-table-style.body-stripped tbody {
	border: none;
	border-bottom: solid 1px #e3e3e3;
}

.template-v2 .report-table-wrapper {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-bottom: 1px solid #c8ced3;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
}

/* [FROM main-layout.css L668-670] Text-muted color override V2 */
.template-v2 .text-muted {
	color: unset !important;
}

.template-v2 .card.card-img-holder .card-img-absolute {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}