/* OverlayScrollbars theme `os-theme-hayyu` — dipakai tableComponentV3 fitHeight +
   sidebar V2 (.sidebar-nav, directive sidebar-nav-scrollbar). Dipindah dari
   js/components/tableComponentV3/index.css ke sini supaya global + bisa override
   per-theme.

   Compound `.os-scrollbar.os-theme-hayyu` (bukan `.os-theme-hayyu` bare) WAJIB:
   OS base css (overlayscrollbars.min.css) set `.os-scrollbar{--os-handle-bg:none}`
   di-load SETELAH file ini (index.html L47 > L37). Selector bare (0,1,0) kalah
   source-order lawan `.os-scrollbar` → handle transparent. Naikkan specificity ke
   (0,2,0) supaya menang apa pun urutan load. OS pasang class os-theme-* di elemen
   .os-scrollbar itu sendiri. */
.os-scrollbar.os-theme-hayyu {
	--os-size: 10px;
	--os-padding-perpendicular: 2px;
	--os-padding-axis: 2px;
	--os-track-bg: transparent;
	--os-track-bg-hover: transparent;
	--os-handle-bg: rgba(0, 100, 98, 0.35);
	--os-handle-bg-hover: rgba(0, 100, 98, 0.55);
	--os-handle-bg-active: rgba(0, 100, 98, 0.65);
	--os-handle-border-radius: 8px;
}

/* Sidebar V2 semi-dark/dark: handle teal default (rgba 0,100,98) tenggelam di bg
   gelap. Override ke teal terang (#4a8e8c / #6ba9a7) — samakan scrollbar native
   lama di css/theme-semi-dark.css + theme-dark.css. Var HARUS di-set pada elemen
   .os-scrollbar (bukan ancestor .sidebar-nav): base `.os-scrollbar{--os-handle-bg}`
   self-declared menang lawan value inherited dari host, jadi override host tak
   kepakai. Target scrollbar element langsung. */
.theme-semi-dark .sidebar .os-scrollbar.os-theme-hayyu,
.theme-dark .sidebar .os-scrollbar.os-theme-hayyu {
	--os-handle-bg: #4a8e8c;
	--os-handle-bg-hover: #6ba9a7;
	--os-handle-bg-active: #6ba9a7;
}

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

/* Halaman yang masih design lama (subtree `fo` + kasir) → Roboto, bukan Montserrat.
   Class `font-roboto` di-set body dari js/routes.js (transition hook) berdasar
   `fontFamily` state di routes/v2.js.

   Semua selector WAJIB beat `.template-v2` (0,1,0), `.template-v2 .dashboard`
   (0,2,0) di css/_layout.css, dan `.template-v2` di dalam partial.bundle.css —
   makanya/body.template-v2.font-roboto (0,2,1). Rule `*` membayar selector
   cascade yg lebih tinggi, termasuk elemen yang punya class .template-v2
   sendiri (filterTable, form builder, tableComponentV2/V3 cell editor). */
body.template-v2.font-roboto,
body.template-v2.font-roboto .dashboard,
body.template-v2.font-roboto .template-v2,
body.template-v2.font-roboto * {
	font-family: "Roboto", sans-serif;
	/* `.template-v2` set font-weight 500 (weight Montserrat). Di Roboto itu
	   terbaca mediam-bold, jauh lebih tebal dari design lama yg 400. Turunkan
	   ke 400 supaya ketebalan match. */
	font-weight: 400;
}

/* Bold eksplisit tetap bold — `.template-v2 .fw-bold` (0,2,0) kalah dari rule
   `*` di atas, jadi harus di-re-assert juga. */
body.template-v2.font-roboto .fw-bold,
body.template-v2.font-roboto b,
body.template-v2.font-roboto strong {
	font-weight: 700;
}

/* ...tapi font-icon WAJIB dikecualikan. `.fa` (font-awesome 4.7) pakai shorthand
   `font: ... FontAwesome` dan `.icon-*` (simple-line-icons) `font-family:
   'simple-line-icons'`, keduanya (0,1,0) — kalah dari `*` di atas (0,2,1) →
   glyph jadi kotak. Re-assert di sini. */
body.template-v2.font-roboto .fa,
body.template-v2.font-roboto [class^="fa-"],
body.template-v2.font-roboto [class*=" fa-"] {
	font-family: "FontAwesome";
}

body.template-v2.font-roboto [class^="icon-"],
body.template-v2.font-roboto [class*=" icon-"] {
	font-family: "simple-line-icons";
}

.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 .fs-small {
  font-size: 11px;
}

.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 .border-bottom-left-radius-0 {
  border-bottom-left-radius: 0 !important;
}

.template-v2 .border-bottom-right-radius-0 {
  border-bottom-right-radius: 0 !important;
}

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

.template-v2 .bg-golden-dark,
.template-v2 .bg-golden-dark > td,
.template-v2 .bg-golden-dark > th {
	background-color: #0a7573 !important;
	color: #ffffff !important;
}

.template-v2 .bg-golden-dark b,
.template-v2 .bg-golden-dark strong,
.template-v2 .bg-golden-dark a {
	color: #ffffff !important;
	font-weight: 600 !important;
}

.template-v2 tr.bg-golden-dark:hover,
.template-v2 tr.bg-golden-dark:hover > td,
.template-v2 tr.bg-golden-dark:hover > th,
.template-v2 tr:hover > td.bg-golden-dark,
.template-v2 tr:hover > th.bg-golden-dark {
	background-color: #085a58 !important;
	color: #ffffff !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;
}

/* Flatpickr inline di dalam bottom-sheet: lebar penuh, bukan 280px fixed
   bawaan .flatpickr-calendar (itu untuk popup desktop). Grid hari sudah
   flex 14.285% + dayContainer 100%, jadi ikut melar sendiri. */
.drawer-modal .flatpickr-calendar.inline {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.drawer-modal .flatpickr-calendar.inline .flatpickr-rContainer,
.drawer-modal .flatpickr-calendar.inline .flatpickr-days {
  width: 100% !important;
  max-width: 100% !important;
}

/* Sel melebar ikut lebar layar. flex-basis 14.285% mengalahkan width:32px,
   jadi tinggi harus ikut lebar — kalau tidak, border-radius:50% jadi oval
   gepeng (kelihatan di startRange/endRange yang lingkaran solid). */
.drawer-modal .flatpickr-calendar.inline .flatpickr-day {
  max-width: 14.285% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  line-height: 1 !important;
  margin: 2px 0 !important;
  font-size: 13px !important;
}

/* Margin horizontal 0 di atas -> tak ada gap antar sel, jadi strip inRange
   tak perlu melar -2px. Biarkan overlap = garis belang di dark theme
   (fill transparan, alpha dobel di tiap sambungan). Lihat _form.css:1865. */
.drawer-modal .flatpickr-calendar.inline .flatpickr-day.inRange::before {
  left: 0 !important;
  right: 0 !important;
}

.drawer-modal .flatpickr-calendar.inline .flatpickr-day.startRange:not(.endRange)::before {
  right: 0 !important;
}

.drawer-modal .flatpickr-calendar.inline .flatpickr-day.endRange:not(.startRange)::before {
  left: 0 !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;
}
/* ng-show/ng-hide pakai kelas ng-hide-add/remove, bukan ng-enter/leave. */
.no-ng-animate .ng-hide-add,
.no-ng-animate .ng-hide-remove,
.no-ng-animate.ng-hide-add,
.no-ng-animate.ng-hide-remove {
    transition: none !important;
    animation: 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%;
}

/* Pasien / Customer name link — clickable cell buka modal detail_pasien */
.pasien-detail-link {
	color: #006664 !important;
	cursor: pointer;
	font-weight: 500;
}
.pasien-detail-link:hover,
.pasien-detail-link:focus {
	color: #004d4c !important;
	text-decoration: none;
}
/* Utility: fixed width button icon-only */
.w-35px {
	width: 35px !important;
	flex-shrink: 0;
}

/* Utility: flex item isi sisa ruang */
.flex-1 {
	flex: 1 1 auto !important;
	min-width: 0;
}

/* Reconfirm WA Matrix cell links */
.reconfirm-wa-link {
	color: #006462;
	text-decoration: underline;
	font-weight: 600;
}
.reconfirm-wa-link:hover,
.reconfirm-wa-link:focus {
	color: #004d4c;
	text-decoration: underline;
}
.reconfirm-wa-zero {
	color: #999999;
}

/* ─── Form User & Profile: File Upload Rows ──────────────────────────────── */
/* 3 card upload tinggi sama (stretch ke sibling tertinggi) tanpa overflow */
.template-v2 .user-form-upload-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.template-v2 .user-form-upload-row > [class*="col-"] {
	display: flex;
	flex-direction: column;
}
.template-v2 .user-form-upload-row > [class*="col-"] > .form-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
.template-v2 .user-form-upload-row upload-cropper-field,
.template-v2 .user-form-upload-row file-upload-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
/* container isi tinggi kolom penuh; min-height kecil supaya baseline pendek */
.template-v2 .user-form-upload-row .upload-cropper-container,
.template-v2 .user-form-upload-row .file-upload-container {
	flex: 1 1 auto;
	min-height: 100px;
}

/* ── Checkmark tipis (.icon-check-thin) ───────────────────────────────────────
   Font Awesome di repo ini versi 4.7 — cuma punya satu weight, jadi `fa-check`
   selalu tebal dan tak bisa ditipiskan. Lucide juga tak dipakai di sini karena
   directive-nya render via setTimeout batching → ikon hilang di list yg
   re-render dinamis (dropdown member/label).

   Ganti keduanya: centang digambar dari dua sisi border satu elemen kosong.
   Tebal + ukuran diatur lewat custom property, warna ikut `currentColor`:

     <i class="icon-check-thin"></i>
     <i class="icon-check-thin icon-check-thin-sm"></i>
     <i class="icon-check-thin" style="--chk-stroke: 1.5px"></i>            */
.icon-check-thin {
	--chk-w: 5px;
	--chk-h: 9px;
	--chk-stroke: 2px;

	display: inline-block;
	box-sizing: border-box;
	width: var(--chk-w);
	height: var(--chk-h);
	border: solid currentColor;
	border-width: 0 var(--chk-stroke) var(--chk-stroke) 0;
	border-radius: 1px;
	/* Rotasi bikin bounding box miring; geser balik supaya optically centered.
	   Atur lewat --chk-nudge kalau wadahnya beda tinggi. */
	--chk-nudge: -8%;
	transform: translateY(var(--chk-nudge)) rotate(45deg);
	transform-origin: center;
}

.icon-check-thin-sm {
	--chk-w: 4px;
	--chk-h: 7px;
	--chk-stroke: 1.75px;
}

.icon-check-thin-lg {
	--chk-w: 6px;
	--chk-h: 11px;
	--chk-stroke: 2.5px;
}

/* Label paket 4X — Wishlist & Keranjang Analytics */
.badge-paket-4x {
	background-color: #006462;
	color: #ffffff;
	border-radius: 10rem;
	padding: 0.25em 0.6em;
	font-weight: 600;
}

/* Scrollbar horizontal tabel sticky-column V2 — scope .template-v2 (body class,
   index.html) supaya halaman legacy tetap pakai scrollbar default. */
.template-v2 .table-style-wrapper .table-overflow {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #b0cfce transparent;
}

.template-v2 .table-style-wrapper .table-overflow::-webkit-scrollbar {
	height: 8px;
}

.template-v2 .table-style-wrapper .table-overflow::-webkit-scrollbar-track {
	background: transparent;
}

.template-v2 .table-style-wrapper .table-overflow::-webkit-scrollbar-thumb {
	background: #b0cfce;
	border-radius: 4px;
}

.template-v2 .table-style-wrapper .table-overflow::-webkit-scrollbar-thumb:hover {
	background: #257260;
}