html, body {
			height: 100%;
		}
		.wrapper {
			min-height: 100vh;
		}
		.main-panel {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
		}
		.main-panel .content {
			flex: 1 0 auto;
		}
		#indonesiaMap {
			margin-left: auto;
			margin-right: auto;
			height: 420px;
			width: 100%;
			border-radius: 8px;
			background: #a8d4df;
		}
		.site-scatter-marker {
			background: transparent;
			border: 0;
		}
		.site-scatter-marker span {
			width: 18px;
			height: 18px;
			display: block;
			border-radius: 50%;
			border: 2px solid #fff;
			box-shadow: 0 1px 7px rgba(15, 23, 42, 0.38);
			transition: transform .18s ease, box-shadow .18s ease;
		}
		.site-scatter-marker.is-active span,
		.site-scatter-marker:hover span {
			box-shadow: 0 0 0 6px var(--marker-ring), 0 4px 12px rgba(15, 23, 42, 0.34);
			transform: scale(1.18);
		}
		.site-map-popup {
			min-width: 132px;
			display: grid;
			gap: 3px;
			color: #263241;
			font-size: 12px;
			line-height: 1.25;
		}
		.site-map-popup b {
			font-size: 13px;
			color: #121826;
		}
		.site-map-popup span {
			display: block;
			font-weight: 700;
		}
		.site-map-label-marker {
			background: transparent;
			border: 0;
			pointer-events: none;
		}
		.site-map-label {
			color: #111827;
			font-size: 13px;
			font-weight: 800;
			line-height: 1.08;
			text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
			white-space: nowrap;
			opacity: 0 !important;
			transform: translateY(8px) scale(.9);
			transform-origin: 12px bottom;
			transition: opacity .22s ease, transform .22s ease;
		}
		.site-map-label.is-visible {
			opacity: 1 !important;
			transform: translateY(0) scale(1);
			animation: siteMapLabelIn .28s ease both;
		}
		@keyframes siteMapLabelIn {
			0% {
				opacity: 0;
				transform: translateY(10px) scale(.86);
			}
			65% {
				opacity: 1;
				transform: translateY(-2px) scale(1.03);
			}
			100% {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}
		.site-map-label::before {
			border: 0;
		}
		.site-map-label-content {
			position: relative;
			padding-left: 48px;
			padding-bottom: 30px;
		}
		.site-map-label-content::before {
			content: "";
			position: absolute;
			left: 12px;
			bottom: 28px;
			width: 34px;
			border-top: 2px solid #111827;
		}
		.site-map-label-content::after {
			content: "";
			position: absolute;
			left: 12px;
			bottom: 0;
			height: 28px;
			border-left: 2px solid #111827;
		}
		.site-map-label-title,
		.site-map-label-products-text,
		.site-map-label-percent {
			display: block;
		}
		.site-map-label-products-text {
			font-size: 11px;
			font-weight: 700;
		}
		.site-map-label-products {
			margin-top: 4px;
			display: grid;
			grid-template-columns: repeat(2, minmax(86px, 1fr));
			gap: 3px 8px;
			align-items: center;
			font-size: 9.5px;
			font-weight: 800;
			color: #1f2937;
			text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
		}
		.site-map-label-products span {
			display: inline-flex;
			align-items: center;
			gap: 3px;
			white-space: nowrap;
		}
		.site-map-label-products b {
			color: #0f172a;
		}
		.site-map-label-products span::before {
			content: "";
			width: 9px;
			min-width: 9px;
			height: 9px;
			min-height: 9px;
			flex: 0 0 9px;
			border: 2px solid #16a34a;
			border-radius: 50%;
			background: #fff;
		}
		.site-map-popup-wrap .leaflet-popup-content-wrapper {
			border-radius: 8px;
			box-shadow: 0 10px 24px rgba(21, 31, 48, 0.18);
		}
		.site-map-popup-wrap .leaflet-popup-content {
			margin: 10px 12px;
		}
		body {
			background: #f3f6fb;
			color: #253044;
		}
		.main-panel .content {
			background: linear-gradient(180deg, #f7f9fd 0%, #eef3f9 100%);
		}
		.main-panel .content .container-fluid {
			max-width: 1440px;
		}
		.dashboard-section {
			margin-bottom: 18px;
		}
		.section-heading {
			margin-bottom: 10px;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 12px;
		}
		.section-kicker {
			margin: 0 0 4px;
			color: #6b7587;
			font-size: 11px;
			font-weight: 800;
			letter-spacing: .06em;
			line-height: 1;
			text-transform: uppercase;
		}
		.section-title {
			margin: 0;
			color: #1f2937;
			font-size: 17px;
			font-weight: 800;
			line-height: 1.25;
		}
		.dashboard-metric-row,
		.product-summary-row {
			margin-left: -8px;
			margin-right: -8px;
		}
		.dashboard-metric-row > [class*="col-"],
		.product-summary-row > [class*="col-"] {
			padding-left: 8px;
			padding-right: 8px;
		}
		.dashboard-metric-card,
		.product-percent-card,
		.region-detail-card {
			border: 1px solid #e4e9f1;
			border-radius: 8px;
			box-shadow: 0 12px 28px rgba(31, 42, 68, 0.08);
		}
		.dashboard-metric-card {
			overflow: hidden;
			position: relative;
			background: #fff !important;
			border-left: 4px solid var(--metric-color);
		}
		.dashboard-metric-card::after {
			content: "";
			position: absolute;
			top: -32px;
			right: -30px;
			width: 92px;
			height: 92px;
			border-radius: 50%;
			background: var(--metric-soft);
		}
		.dashboard-metric-card .card-body {
			position: relative;
			z-index: 1;
			min-height: 118px;
			display: flex;
			align-items: center;
			gap: 14px;
			padding: 20px 18px;
		}
		.metric-manpower {
			--metric-color: #e0a21b;
			--metric-soft: rgba(224, 162, 27, 0.13);
		}
		.metric-spv {
			--metric-color: #2f9e62;
			--metric-soft: rgba(47, 158, 98, 0.12);
		}
		.metric-frontliner {
			--metric-color: #d84b5b;
			--metric-soft: rgba(216, 75, 91, 0.12);
		}
		.metric-area {
			--metric-color: #3867d6;
			--metric-soft: rgba(56, 103, 214, 0.12);
		}
		.metric-icon,
		.product-icon {
			flex: 0 0 auto;
			width: 46px;
			height: 46px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			font-size: 26px;
		}
		.metric-icon {
			background: var(--metric-soft);
			color: var(--metric-color);
		}
		.metric-content {
			min-width: 0;
		}
		.dashboard-metric-card .card-category,
		.product-percent-card .card-category {
			margin-bottom: 7px;
			color: #667085;
			font-size: 12px;
			font-weight: 800;
			letter-spacing: .02em;
			line-height: 1.25;
			text-transform: uppercase;
		}
		.dashboard-metric-card .card-title {
			margin: 0;
			color: #172033;
			font-size: 30px;
			font-weight: 800;
			line-height: 1;
		}
		.metric-note {
			display: block;
			margin-top: 8px;
			color: #7a8495;
			font-size: 12px;
			font-weight: 700;
			line-height: 1.2;
		}
		.product-summary-row {
			margin-top: 0;
			margin-bottom: 0;
		}
		.product-percent-card {
			background: #fff !important;
			overflow: hidden;
		}
		.product-percent-card .card-body {
			min-height: 92px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 18px;
		}
		.product-percent-card .card-title {
			margin: 0;
			color: #152033;
			font-size: 28px;
			font-weight: 800;
			line-height: 1;
		}
		.product-icon {
			order: 2;
			background: var(--product-soft);
			color: var(--product-color);
		}
		.product-maintenance {
			--product-color: #db7c1f;
			--product-soft: rgba(219, 124, 31, 0.13);
		}
		.product-services {
			--product-color: #2489a8;
			--product-soft: rgba(36, 137, 168, 0.13);
		}
		.product-gardner {
			--product-color: #229954;
			--product-soft: rgba(34, 153, 84, 0.13);
		}
		.product-security {
			--product-color: #5156b8;
			--product-soft: rgba(81, 86, 184, 0.13);
		}
		.dashboard-detail-row {
			margin-top: 2px;
		}
		.region-detail-card .card-body {
			padding: 20px;
		}
		.region-detail-header {
			margin-bottom: 18px;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 14px;
		}
		.region-name {
			margin: 0;
			color: #172033;
			font-size: 24px;
			font-weight: 800;
			line-height: 1.2;
		}
		.region-status-pill {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			min-height: 30px;
			padding: 0 12px;
			border-radius: 15px;
			background: #eef6ff;
			color: #2860a8;
			font-size: 12px;
			font-weight: 800;
		}
		.region-progress-grid {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 14px;
		}
		.region-progress-grid .progress-card {
			padding: 14px;
			border: 1px solid #e7ebf2;
			border-radius: 8px;
			background: #f9fbfe;
		}
		.progress-meta {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin-bottom: 12px;
		}
		.progress-meta span {
			color: #687386;
			font-size: 13px;
			font-weight: 800;
		}
		.progress-meta strong {
			color: #172033;
			font-size: 20px;
			font-weight: 800;
			line-height: 1;
		}
		.region-progress-grid .progress {
			height: 8px;
			margin-bottom: 0 !important;
			border-radius: 8px;
			background: #e8edf5;
			box-shadow: none;
		}
		.region-progress-grid .progress-bar {
			border-radius: 8px;
		}
		.page-title-row {
			margin-bottom: 16px;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 14px;
		}
		.page-title-row .page-main-title {
			margin: 0;
			font-size: 24px;
			font-weight: 700;
			color: #2f3b4a;
			line-height: 1.1;
		}
		.dashboard-period-label {
			margin: 6px 0 0;
			font-size: 13px;
			font-weight: 700;
			color: #4f5d72;
		}
		.dashboard-period-form {
			display: flex;
			align-items: flex-end;
			gap: 10px;
			flex-wrap: wrap;
			position: relative;
		}
		.period-range-picker {
			position: relative;
			width: 388px;
			max-width: 100%;
			height: 46px;
			display: grid;
			grid-template-columns: 1fr 1px 1fr 32px;
			align-items: stretch;
			border: 1px solid #d8e0ec;
			border-radius: 8px;
			background: #fff;
			box-shadow: 0 10px 22px rgba(31, 42, 68, 0.08);
			overflow: hidden;
			cursor: pointer;
		}
		.period-range-picker:focus-within {
			border-color: #3867d6;
			box-shadow: 0 0 0 2px rgba(56, 103, 214, 0.16), 0 10px 22px rgba(31, 42, 68, 0.08);
		}
		.period-range-segment {
			min-width: 0;
			border: 0;
			background: transparent;
			color: #263244;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 3px;
			padding: 0 12px;
			text-align: left;
			cursor: pointer;
		}
		.period-range-segment:hover,
		.period-range-segment:focus {
			outline: none;
			background: #f6f8fb;
		}
		.period-range-label {
			color: #7a8495;
			font-size: 10px;
			font-weight: 800;
			letter-spacing: .04em;
			line-height: 1;
			text-transform: uppercase;
		}
		.period-range-value {
			max-width: 100%;
			color: #263244;
			font-size: 13px;
			font-weight: 800;
			line-height: 1.15;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.period-range-divider {
			width: 1px;
			margin: 8px 0;
			background: #e5eaf2;
		}
		.period-range-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: #5d6b80;
			font-size: 18px;
			pointer-events: none;
		}
		.period-native-date {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 1px;
			height: 1px;
			border: 0;
			opacity: 0;
			pointer-events: none;
		}
		.dashboard-period-form .period-display-trigger {
			width: 328px;
			max-width: 100%;
			height: 46px;
			border: 1px solid #3f4657;
			border-radius: 5px;
			background: linear-gradient(180deg, #323949 0%, #2a3140 100%);
			box-shadow: 0 8px 18px rgba(8, 12, 20, 0.24);
			color: #eef2ff;
			font-size: 15px;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 14px 0 18px;
			line-height: 1;
		}
		.dashboard-period-form .period-display-trigger:focus {
			outline: none;
			border-color: #8ea7ff;
			box-shadow: 0 0 0 2px rgba(110, 143, 255, 0.35), 0 8px 18px rgba(8, 12, 20, 0.24);
		}
		.dashboard-period-form .period-display-text {
			font-size: 15px;
			letter-spacing: .01em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 12px;
		}
		.dashboard-period-form .period-display-icon {
			font-size: 16px;
			color: #cfd5e6;
			flex: 0 0 auto;
			transition: transform .2s ease;
		}
		.dashboard-period-form .period-display-trigger[aria-expanded="true"] .period-display-icon {
			transform: rotate(180deg);
		}
		.dashboard-period-form .period-input-group--hidden {
			position: absolute;
			width: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
			pointer-events: none;
		}
		.dashboard-period-form .period-apply-btn-hidden {
			display: none;
		}
		.period-calendar-popup {
			position: absolute;
			top: calc(100% + 10px);
			right: 0;
			width: 520px;
			max-width: min(520px, calc(100vw - 32px));
			padding: 16px 16px 12px;
			border-radius: 14px;
			background: #fff;
			box-shadow: 0 18px 36px rgba(10, 15, 26, 0.22);
			border: 1px solid #e4e8ef;
			z-index: 1200;
			display: none;
		}
		.period-calendar-popup.is-open {
			display: block;
		}
		.period-popup-calendars {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 14px;
		}
		.period-calendar-title {
			margin: 0 0 10px;
			font-size: 18px;
			font-weight: 700;
			color: #2e3442;
		}
		.period-calendar-header {
			display: grid;
			grid-template-columns: 28px 1fr 28px;
			align-items: center;
			gap: 6px;
			margin-bottom: 10px;
		}
		.period-month-label {
			margin: 0;
			text-align: center;
			font-size: 16px;
			font-weight: 700;
			color: #353b49;
			letter-spacing: .03em;
		}
		.period-month-nav {
			width: 28px;
			height: 28px;
			border: 0;
			border-radius: 50%;
			background: transparent;
			color: #323846;
			font-size: 24px;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
		.period-month-nav:hover {
			background: #f1f4fa;
		}
		.period-weekdays {
			display: grid;
			grid-template-columns: repeat(7, minmax(0, 1fr));
			gap: 4px;
			margin-bottom: 6px;
			color: #8b93a3;
			font-size: 13px;
			font-weight: 600;
			text-align: center;
		}
		.period-days {
			display: grid;
			grid-template-columns: repeat(7, minmax(0, 1fr));
			gap: 4px;
		}
		.period-day {
			height: 32px;
			border: 0;
			border-radius: 16px;
			background: transparent;
			color: #2e3442;
			font-size: 14px;
			font-weight: 600;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
		.period-day:hover {
			background: #e9f1ff;
		}
		.period-day.is-muted {
			color: #bcc4d2;
		}
		.period-day.is-in-range {
			background: #e3edff;
			border-radius: 0;
		}
		.period-day.is-selected {
			background: #1f5fbf;
			color: #fff;
			font-weight: 700;
		}
		.period-popup-actions {
			display: flex;
			justify-content: flex-end;
			margin-top: 14px;
		}
		.period-popup-apply-btn {
			min-width: 106px;
			height: 40px;
			border: 0;
			border-radius: 20px;
			background: #232a3a;
			color: #fff;
			font-size: 16px;
			font-weight: 700;
			padding: 0 18px;
		}
		.period-popup-apply-btn:hover {
			background: #151b28;
			color: #fff;
		}
		.dashboard-period-form .period-input-group {
			min-width: 160px;
		}
		.dashboard-period-form label {
			display: block;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: .02em;
			color: #667489;
			margin: 0 0 4px;
			text-transform: uppercase;
		}
		.dashboard-period-form .form-control {
			height: 33px;
			border-radius: 8px;
			border: 1px solid #d7e0eb;
			font-weight: 700;
			color: #3f4a5a;
			background: #fff;
		}
		.dashboard-period-form .btn {
			height: 33px;
			padding: 0 14px;
			border-radius: 8px;
			font-weight: 700;
		}
		.logo {
      display: inline-block;
			max-width: calc(100% - 50px);
			pointer-events: none;
		}
    .logo .logo-text {
			white-space: nowrap;
			overflow: visible;
			text-overflow: clip;
			font-size: 24px;
			font-weight: 800;
			color: #3f488f;
			letter-spacing: .015em;
			line-height: 1;
			transition: opacity .25s ease;
		}
		.main-header .logo-header {
			display: flex;
			align-items: center;
			gap: 10px;
			padding-left: 16px;
			padding-right: 16px;
		}
		.main-header .navbar-header .header-menu-toggle {
			width: 38px;
			height: 38px;
			padding: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 0;
			border: 0;
			background: transparent;
			box-shadow: none;
			margin-right: 14px;
		}
		.main-header .navbar-header .header-menu-toggle .navbar-toggler-icon {
			background-image: linear-gradient(#5a6270, #5a6270), linear-gradient(#5a6270, #5a6270), linear-gradient(#5a6270, #5a6270);
			background-size: 22px 2px, 22px 2px, 22px 2px;
			background-position: center 3px, center 9px, center 15px;
			background-repeat: no-repeat;
			height: 18px;
			width: 24px;
			opacity: .95;
		}
		.sidebar .nav .nav-item > a,
		.sidebar .nav .nav-item .collapse .nav li a {
			background: transparent !important;
			border: 0 !important;
			border-radius: 0 !important;
			box-shadow: none !important;
		}
		.sidebar .nav .nav-item > a:hover,
		.sidebar .nav .nav-item > a:focus,
		.sidebar .nav .nav-item > a[data-toggle="collapse"][aria-expanded="true"],
		.sidebar .nav .nav-item .collapse .nav li a:hover {
			background: transparent !important;
			box-shadow: none !important;
		}
		.sidebar .nav .nav-item.active > a {
			background: transparent !important;
			box-shadow: none !important;
		}
		.sidebar .nav .nav-item.active::before {
			display: none !important;
		}
		@media screen and (min-width: 992px) {
      .main-header .logo-header {
        width: 260px;
        transition: width .3s ease, padding .3s ease;
      }
      .main-header .navbar-header {
        width: calc(100% - 260px);
        transition: width .3s ease;
      }
      html.sidebar_hidden .main-header .logo-header {
        width: 78px;
        padding-left: 12px;
        padding-right: 12px;
      }
      html.sidebar_hidden .main-header .navbar-header {
        width: calc(100% - 78px);
      }
      html.sidebar_hidden .logo .logo-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
      }
      html.sidebar_hidden .sidebar {
        transform: translateX(0) !important;
        width: 78px;
      }
      html.sidebar_hidden .sidebar .sidebar-wrapper {
        width: 78px;
      }
      html.sidebar_hidden .sidebar .user {
        display: none;
      }
      html.sidebar_hidden .sidebar .nav .nav-item > a {
        justify-content: center;
        padding: 14px 0;
        text-align: center;
      }
      html.sidebar_hidden .sidebar .nav .nav-item > a i {
        display: block;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        line-height: 1;
        text-align: center;
      }
      html.sidebar_hidden .sidebar .nav .nav-item > a p {
        display: none !important;
        margin: 0 !important;
      }
      html.sidebar_hidden .sidebar .nav .nav-item > a .caret {
        display: none !important;
        margin-left: 0 !important;
      }
      html.sidebar_hidden .sidebar .nav .nav-item > .collapse,
      html.sidebar_hidden .sidebar .nav .nav-item > .collapsing {
        display: none !important;
      }
      html.sidebar_hidden .main-panel {
        width: calc(100% - 78px);
      }
		}
		@media (max-width: 768px) {
			.page-title-row {
				flex-direction: column;
				align-items: stretch;
			}
			.page-title-row .page-main-title {
				font-size: 20px;
			}
			.dashboard-period-form .period-input-group {
				min-width: 0;
				width: 100%;
			}
			.dashboard-period-form .btn {
				width: 100%;
			}
			.dashboard-period-form .period-display-trigger {
				width: 100%;
			}
			.period-calendar-popup {
				right: 0;
				left: 0;
				width: 100%;
				max-width: 100%;
			}
			.period-popup-calendars {
				grid-template-columns: 1fr;
				max-height: 56vh;
				overflow-y: auto;
			}
			.dashboard-metric-card .card-body {
				min-height: 104px;
			}
			.region-detail-header {
				flex-direction: column;
			}
			.region-progress-grid {
				grid-template-columns: 1fr;
			}
			#indonesiaMap {
				max-width: 100%;
			}
		}
		@media (min-width: 769px) and (max-width: 1199px) {
			.region-progress-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
		html.display-mode .main-header,
		html.display-mode .sidebar {
			display: none !important;
		}
		html.display-mode,
		html.display-mode body {
			height: 100vh !important;
			overflow: hidden !important;
		}
		html.display-mode .wrapper {
			height: 100vh !important;
			min-height: 100vh !important;
			overflow: hidden !important;
		}
		html.display-mode .main-panel {
			width: 100% !important;
			float: none !important;
			height: 100vh !important;
			min-height: 100vh !important;
			overflow: hidden !important;
		}
		html.display-mode .main-panel .content {
			margin-top: 0 !important;
			padding-top: 8px;
			height: 100vh !important;
			min-height: 100vh !important;
			overflow: hidden !important;
		}
		html.display-mode .main-panel .content .container-fluid {
			padding-bottom: 0 !important;
		}
		html.display-mode .dashboard-period-form {
			display: none !important;
		}
		html.display-mode .main-panel .footer {
			display: none !important;
		}