/* PROMON - application styles (on top of Bootstrap 5.3) */

:root {
	--pm-sidebar: #1E2A4A;
	--pm-sidebar-active: #2E3D66;
	--pm-sidebar-text: #C3CBE0;
	--pm-bg: #F3F5F9;
	--pm-card: #FFFFFF;
	--pm-border: #E3E7EF;
	--pm-radius: 8px;
	--pm-accent: #2563EB;
	--pm-text: #1F2937;
	--pm-muted: #6B7280;
	--pm-head-bg: #F8FAFC;

	/* stage badge colours: text / background */
	--stage-inisiasi-fg: #4B5563;    --stage-inisiasi-bg: #E5E7EB;
	--stage-perencanaan-fg: #1D4ED8; --stage-perencanaan-bg: #DBEAFE;
	--stage-development-fg: #4338CA; --stage-development-bg: #E0E7FF;
	--stage-testing-fg: #B45309;     --stage-testing-bg: #FEF3C7;
	--stage-uat-fg: #C2410C;         --stage-uat-bg: #FFEDD5;
	--stage-deployment-fg: #0F766E;  --stage-deployment-bg: #CCFBF1;
	--stage-finish-fg: #15803D;      --stage-finish-bg: #DCFCE7;
	--suspend-fg: #B91C1C;           --suspend-bg: #FEE2E2;

	/* solid stage colours (bars, stepper) */
	--stage-inisiasi: #4B5563;
	--stage-perencanaan: #1D4ED8;
	--stage-development: #4338CA;
	--stage-testing: #B45309;
	--stage-uat: #C2410C;
	--stage-deployment: #0F766E;
	--stage-finish: #15803D;

	--bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	--bs-body-color: var(--pm-text);
	--bs-body-bg: var(--pm-bg);
	--bs-primary: var(--pm-accent);
	--bs-primary-rgb: 37, 99, 235;
	--bs-border-color: var(--pm-border);
	--bs-link-color: var(--pm-accent);
	--bs-link-color-rgb: 37, 99, 235;
}

body { font-size: 14px; background: var(--pm-bg); }
.min-w-0 { min-width: 0; }
a { text-decoration: none; }

.btn { border-radius: 6px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--pm-accent); --bs-btn-border-color: var(--pm-accent); --bs-btn-hover-bg: #1D4ED8; --bs-btn-hover-border-color: #1D4ED8; }
.btn-outline-primary { --bs-btn-color: var(--pm-accent); --bs-btn-border-color: var(--pm-accent); --bs-btn-hover-bg: var(--pm-accent); --bs-btn-hover-border-color: var(--pm-accent); }
.btn-suspend { color: var(--suspend-fg); border: 1.5px solid var(--suspend-fg); background: #fff; }
.btn-suspend:hover { background: var(--suspend-bg); color: var(--suspend-fg); border-color: var(--suspend-fg); }
.btn-resume { color: #fff; background: #15803D; border-color: #15803D; }
.btn-resume:hover { color: #fff; background: #166534; border-color: #166534; }
.form-control, .form-select { border-color: #D3D9E4; border-radius: 6px; }
.form-label { font-weight: 600; font-size: 12.5px; color: #374151; margin-bottom: .35rem; }
.form-text { font-size: 12px; }
.req::after { content: " *"; color: #B91C1C; }

/* ---------- shell ---------- */
.pm-shell { display: flex; min-height: 100vh; }
.pm-sidebar {
	width: 250px; flex: 0 0 250px; background: var(--pm-sidebar); color: #fff;
	display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 1040;
}
.pm-brand { position: relative; padding: 22px 18px 18px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pm-brand-link { display: flex; align-items: center; gap: 12px; color: #fff; min-width: 0; }
.pm-brand-link:hover { color: #fff; }
.pm-brand-mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.25); }
.pm-brand-text { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; overflow: hidden; }
.pm-brand-name { font-size: 20px; font-weight: 800; letter-spacing: 1.5px; line-height: 1.1;
	background: linear-gradient(90deg, #fff 55%, #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #FACC15; opacity: .85; margin-top: 2px; }
/* round toggle on the sidebar edge (desktop only) */
.pm-collapse-btn {
	display: none; position: absolute; right: -13px; top: 34px; width: 26px; height: 26px; border-radius: 50%; padding: 0;
	align-items: center; justify-content: center; font-size: 13px; color: var(--pm-sidebar);
	background: #fff; border: 1px solid var(--pm-border); box-shadow: 0 2px 6px rgba(15,23,42,.18); z-index: 2;
}
.pm-collapse-btn:hover { color: var(--pm-accent); }
.pm-collapse-btn i { transition: transform .2s; }
.pm-nav { flex: 1; overflow-y: auto; padding: 4px 12px; }
.pm-nav-link {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 4px;
	color: var(--pm-sidebar-text); border-radius: 8px; font-size: 14px; border-left: 3px solid transparent;
}
.pm-nav-link i { font-size: 16px; width: 18px; text-align: center; }
.pm-nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.pm-nav-link.active { background: var(--pm-sidebar-active); color: #fff; font-weight: 600; border-left-color: #60A5FA; }
.pm-sidebar-user { display: flex; gap: 10px; align-items: center; padding: 16px 20px 22px; border-top: 1px solid rgba(255,255,255,.08); }
.pm-sidebar-user-name { font-weight: 600; font-size: 13.5px; }
.pm-sidebar-user-role { font-size: 12px; color: var(--pm-sidebar-text); }

.pm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-topbar {
	background: #fff; border-bottom: 1px solid var(--pm-border); padding: 14px 28px;
	display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 1030;
}
.pm-titlebox { flex: 1; min-width: 0; }
.pm-title { font-size: 21px; font-weight: 700; margin: 0; }
.pm-breadcrumb { font-size: 12px; color: var(--pm-muted); margin-top: 2px; }
.pm-breadcrumb a { color: var(--pm-muted); }
.pm-breadcrumb a:hover { color: var(--pm-accent); }
.pm-topbar-actions { display: flex; align-items: center; gap: 14px; }
.pm-search { position: relative; width: 240px; }
.pm-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 13px; }
.pm-search .form-control { border-radius: 999px; background: #F3F5F9; padding-left: 34px; border-color: var(--pm-border); }
.pm-bell { position: relative; font-size: 20px; color: #4B5563; }
.pm-bell-dot {
	position: absolute; top: -4px; right: -8px; background: #DC2626; color: #fff; font-size: 10px; font-weight: 700;
	border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.pm-avatar {
	width: 36px; height: 36px; border-radius: 50%; background: #DBEAFE; color: #1D4ED8;
	display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex: 0 0 36px;
}
.pm-avatar-dark { background: #3B4A75; color: #fff; width: 40px; height: 40px; flex-basis: 40px; }
.pm-burger { font-size: 24px; color: var(--pm-text); padding: 0; }
.pm-content { padding: 24px 28px 40px; flex: 1; }
.pm-flash { border-radius: var(--pm-radius); }

@media (max-width: 991.98px) {
	.pm-sidebar { position: fixed; left: -260px; transition: left .2s; }
	body.pm-sidebar-open .pm-sidebar { left: 0; }
	body.pm-sidebar-open .pm-sidebar-backdrop { display: block; }
	.pm-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1035; }
	.pm-topbar, .pm-content { padding-left: 16px; padding-right: 16px; }
}

/* ---------- cards ---------- */
.pm-card { background: var(--pm-card); border: 1px solid var(--pm-border); border-radius: var(--pm-radius); }
.pm-card + .pm-card { margin-top: 20px; }
.pm-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; }
.pm-card-title { font-size: 15px; font-weight: 700; margin: 0; }
.pm-card-body { padding: 10px 20px 20px; }
.pm-card-foot { padding: 12px 20px; border-top: 1px solid var(--pm-border); font-size: 12.5px; color: var(--pm-muted); }
.pm-note { font-size: 12.5px; color: var(--pm-muted); margin-top: 12px; }

.pm-kpi { background: #fff; border: 1px solid var(--pm-border); border-radius: var(--pm-radius); padding: 16px 20px; position: relative; overflow: hidden; height: 100%; }
.pm-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--kpi-color, #1E2A4A); }
.pm-kpi-label { font-size: 12.5px; color: var(--pm-muted); font-weight: 600; }
.pm-kpi-value { font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--kpi-color, #1E2A4A); }
.pm-kpi-sub { font-size: 11.5px; color: var(--pm-muted); }
.kpi-navy { --kpi-color: #1E2A4A; } .kpi-blue { --kpi-color: #2563EB; } .kpi-red { --kpi-color: #B91C1C; }
.kpi-green { --kpi-color: #15803D; } .kpi-orange { --kpi-color: #C2410C; } .kpi-amber { --kpi-color: #B45309; }

.pm-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 20px; }
.pm-toolbar .form-control, .pm-toolbar .form-select { width: auto; min-width: 150px; }
.pm-toolbar .pm-toolbar-search { min-width: 240px; flex: 0 1 300px; }
.pm-toolbar .ms-auto { margin-left: auto; }

/* ---------- tables ---------- */
.pm-table { width: 100%; margin: 0; }
.pm-table thead th {
	background: var(--pm-head-bg); color: #4B5563; font-size: 12px; font-weight: 700;
	padding: 12px 14px; border-bottom: 1px solid var(--pm-border); white-space: nowrap;
}
.pm-table tbody td { padding: 12px 14px; border-bottom: 1px solid #EEF1F5; vertical-align: middle; }
.pm-table tbody tr:last-child td { border-bottom: 0; }
.pm-table tbody tr:hover td { background: #FAFBFD; }
.pm-table tr.row-suspend td { background: #FFF5F5; }
.pm-table tr.row-suspend:hover td { background: #FFEEEE; }
.pm-table tr.row-parent td { background: #F8FAFC; font-weight: 700; }
.pm-table tr.row-selected td { background: #EFF6FF; }
.pm-table .code { color: #6B7280; font-weight: 600; white-space: nowrap; }
.pm-table .name { font-weight: 600; color: var(--pm-text); }
.pm-table a.name:hover { color: var(--pm-accent); }
.table-responsive { border-radius: var(--pm-radius); }
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate { padding: 12px 16px; font-size: 12.5px; }
div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter { padding: 12px 16px 0; }

/* ---------- badges ---------- */
.pm-badge {
	display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
	line-height: 1.5; white-space: nowrap; color: #374151; background: #E5E7EB;
}
.pm-badge-gray   { color: #4B5563; background: #E5E7EB; }
.pm-badge-blue   { color: #1D4ED8; background: #DBEAFE; }
.pm-badge-indigo { color: #4338CA; background: #E0E7FF; }
.pm-badge-amber  { color: #B45309; background: #FEF3C7; }
.pm-badge-yellow { color: #A16207; background: #FEF3C7; }
.pm-badge-orange { color: #C2410C; background: #FFEDD5; }
.pm-badge-teal   { color: #0F766E; background: #CCFBF1; }
.pm-badge-green  { color: #15803D; background: #DCFCE7; }
.pm-badge-red    { color: var(--suspend-fg); background: var(--suspend-bg); }
.pm-badge-purple { color: #7E22CE; background: #F3E8FF; }
.stage-inisiasi    { color: var(--stage-inisiasi-fg);    background: var(--stage-inisiasi-bg); }
.stage-perencanaan { color: var(--stage-perencanaan-fg); background: var(--stage-perencanaan-bg); }
.stage-development { color: var(--stage-development-fg); background: var(--stage-development-bg); }
.stage-testing     { color: var(--stage-testing-fg);     background: var(--stage-testing-bg); }
.stage-uat         { color: var(--stage-uat-fg);         background: var(--stage-uat-bg); }
.stage-deployment  { color: var(--stage-deployment-fg);  background: var(--stage-deployment-bg); }
.stage-finish      { color: var(--stage-finish-fg);      background: var(--stage-finish-bg); }

/* ---------- progress ---------- */
.pm-progress { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.pm-progress-track { flex: 1; height: 7px; background: #E5E7EB; border-radius: 999px; overflow: hidden; min-width: 60px; }
.pm-progress-fill { height: 100%; border-radius: 999px; }
.pm-fill-blue { background: #2563EB; } .pm-fill-green { background: #15803D; } .pm-fill-gray { background: #9CA3AF; }
.pm-fill-red { background: #B91C1C; } .pm-fill-orange { background: #C2410C; } .pm-fill-amber { background: #B45309; }
.pm-progress-label { font-size: 12px; font-weight: 700; min-width: 36px; }

/* ---------- misc ---------- */
.pm-tabs { background: #fff; border: 1px solid var(--pm-border); border-radius: var(--pm-radius); padding: 0 16px; margin-bottom: 20px; overflow-x: auto; white-space: nowrap; }
.pm-tabs .nav-link { color: #6B7280; font-weight: 600; padding: 14px 18px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; }
.pm-tabs .nav-link.active { color: var(--pm-accent); border-bottom-color: var(--pm-accent); background: none; }
.pm-tabs .nav { flex-wrap: nowrap; }
.pm-list-menu .list-group-item { border: 0; border-left: 3px solid transparent; padding: 12px 16px; border-radius: 6px; color: #374151; }
.pm-list-menu .list-group-item.active { background: #EFF6FF; color: var(--pm-accent); border-left-color: var(--pm-accent); font-weight: 600; }
.pm-dl dt { font-size: 12px; color: var(--pm-muted); font-weight: 600; }
.pm-dl dd { margin-bottom: 12px; }
.pm-empty { text-align: center; color: var(--pm-muted); padding: 28px 12px; font-size: 13px; }
.pm-dropzone { border: 2px dashed #CBD5E1; border-radius: var(--pm-radius); padding: 16px; text-align: center; color: var(--pm-muted); font-size: 13px; }
.select2-container--bootstrap-5 .select2-selection { border-color: #D3D9E4; min-height: 38px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { background: #DBEAFE; color: #1D4ED8; border: 0; font-weight: 600; font-size: 12px; }
.flatpickr-input[readonly] { background-color: #fff; }

/* ---------- auth (login: animated illustration left, form right) ---------- */
.auth-body { background: #fff; min-height: 100vh; }
.auth-split { min-height: 100vh; display: flex; }
.auth-hero {
	flex: 1 1 55%; position: relative; overflow: hidden; color: #fff; display: none;
	flex-direction: column; justify-content: space-between; padding: 40px 56px 48px;
	background: radial-gradient(1200px 600px at 10% 0%, #2E3D66 0%, transparent 60%), linear-gradient(160deg, #1E2A4A 0%, #16203A 60%, #0F172A 100%);
}
@media (min-width: 992px) { .auth-hero { display: flex; } }
.auth-hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; }
.auth-hero-glow.g1 { width: 380px; height: 380px; background: #2DD4BF; right: -120px; top: 80px; animation: a-drift 14s ease-in-out infinite; }
.auth-hero-glow.g2 { width: 320px; height: 320px; background: #6366F1; left: -100px; bottom: -60px; animation: a-drift 18s ease-in-out infinite reverse; }
.auth-hero-brand { display: flex; align-items: center; gap: 12px; position: relative; }
.auth-hero-mark { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.auth-hero-name { font-size: 19px; font-weight: 800; letter-spacing: 1.5px; line-height: 1.1; }
.auth-hero-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #FACC15; }
.auth-art { position: relative; width: 100%; max-width: 600px; margin: 24px auto; display: block; }
.auth-hero-copy { position: relative; max-width: 520px; }
.auth-hero-copy h2 { font-size: 28px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; }
.auth-hero-copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.auth-hero-copy li { display: flex; align-items: center; gap: 12px; color: #C3CBE0; font-size: 14.5px; }
.auth-hero-copy li i { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #7DD3FC; flex: 0 0 auto; }

/* illustration parts */
.a-panel { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.14); }
.a-card { fill: #fff; filter: drop-shadow(0 12px 22px rgba(2,6,23,.35)); }
.a-chip { fill: rgba(255,255,255,.14); }
.a-grid line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.a-label rect { fill: rgba(255,255,255,.22); }
.a-ring-text { font: 800 20px system-ui, -apple-system, "Segoe UI", sans-serif; fill: #1E2A4A; }
.a-bar { transform-box: fill-box; transform-origin: left center; animation: a-grow 7s cubic-bezier(.2,.8,.2,1) var(--d, 0s) infinite both; }
.a-pop { transform-box: fill-box; transform-origin: center; animation: a-pop 7s ease var(--d, 0s) infinite both; }
.a-check { transform-box: fill-box; transform-origin: center; animation: a-pop 7s ease var(--d, 0s) infinite both; }
.a-fade { animation: a-fade 7s ease var(--d, 0s) infinite both; }
.a-draw { stroke-dasharray: 260; animation: a-draw 7s ease-in-out .6s infinite both; }
.a-ring { stroke-dasharray: 239; animation: a-ring 7s ease-in-out .3s infinite both; }
.a-today { animation: a-today 7s ease-in-out infinite both; }
.a-float { animation: a-float 6s ease-in-out infinite; }
.a-float-2 { animation-duration: 7s; animation-delay: -2s; }
.a-float-3 { animation-duration: 8s; animation-delay: -4s; }
@keyframes a-grow { 0% { transform: scaleX(0); opacity: 1; } 22%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes a-pop { 0%, 10% { transform: scale(0); opacity: 0; } 20% { transform: scale(1.15); opacity: 1; } 26%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes a-fade { 0%, 10% { opacity: 0; } 30%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes a-draw { 0% { stroke-dashoffset: 260; } 40%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 260; } }
@keyframes a-ring { 0% { stroke-dashoffset: 239; } 40%, 88% { stroke-dashoffset: 67; } 100% { stroke-dashoffset: 239; } }
@keyframes a-today { 0% { transform: translateX(160px); } 50% { transform: translateX(330px); } 100% { transform: translateX(160px); } }
@keyframes a-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes a-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, 30px); } }
@media (prefers-reduced-motion: reduce) {
	.auth-hero *, .auth-art * { animation: none !important; }
	.a-draw, .a-ring { stroke-dashoffset: 0; }
	.a-ring { stroke-dashoffset: 67; }
	.a-today { transform: translateX(300px); }
}

/* form side */
.auth-side { flex: 1 1 45%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; background: #fff; }
.auth-form { width: 100%; max-width: 380px; margin: auto 0; }
.auth-form-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; }
.auth-form-mark { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 6px 16px rgba(30,42,74,.25); }
.auth-form-name { font-size: 20px; font-weight: 800; letter-spacing: 1.5px; color: #1E2A4A; line-height: 1.1; }
.auth-form-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #B45309; }
@media (min-width: 992px) { .auth-form-brand { display: none; } }
.auth-title { font-size: 28px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.auth-lead { color: var(--pm-muted); margin-bottom: 28px; }
.auth-field { position: relative; }
.auth-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 16px; pointer-events: none; transition: color .15s; }
.auth-field .form-control { height: 48px; padding-left: 42px; border-radius: 12px; background: #F8FAFC; border: 1.5px solid #E2E8F0; font-size: 14.5px; transition: border-color .15s, box-shadow .15s, background .15s; }
.auth-field .form-control:focus { background: #fff; border-color: var(--pm-accent); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.auth-field:focus-within > i { color: var(--pm-accent); }
.auth-field #password { padding-right: 46px; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: #6B7280; }
.auth-eye:hover { background: #EEF2F7; color: #111827; }
.auth-caps { color: #B45309; font-weight: 600; }
.auth-submit { height: 48px; border-radius: 12px; font-weight: 700; font-size: 15px; border: 0;
	background: linear-gradient(135deg, #2563EB, #1D4ED8); box-shadow: 0 10px 20px -8px rgba(37,99,235,.6); transition: transform .15s, box-shadow .15s; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -10px rgba(37,99,235,.7); }
.auth-submit i { transition: transform .15s; }
.auth-submit:hover i { transform: translateX(3px); }
.auth-foot { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--pm-muted); }
.auth-copy { font-size: 12px; color: #9CA3AF; margin-top: 24px; }

/* ---------- application timeline ---------- */
.pm-timeline { display: flex; overflow-x: auto; padding: 8px 0 4px; }
.pm-timeline-item { flex: 1 0 200px; text-align: center; position: relative; padding: 0 12px; }
.pm-timeline-item::before { content: ""; position: absolute; top: 52px; left: 50%; width: 100%; border-top: 3px dashed #CBD5E1; z-index: 0; }
.pm-timeline-item.done::before { border-top: 3px solid #15803D; }
.pm-timeline-item:last-child::before { display: none; }
.pm-timeline-head { font-weight: 700; margin-bottom: 8px; }
.pm-timeline-dot {
	width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 10px; position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center; background: #2563EB; color: #fff; font-size: 18px;
}
.pm-timeline-dot span { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.pm-timeline-item.done .pm-timeline-dot { background: #15803D; }
.pm-timeline-title { display: block; font-weight: 700; color: var(--pm-text); font-size: 13px; }
.pm-timeline-date { font-size: 12px; color: var(--pm-muted); margin-bottom: 6px; }

.form-switch .form-check-input:checked { background-color: #15803D; border-color: #15803D; }
.pm-list-menu .list-group-item { background: transparent; }
.pm-list-menu .list-group-item:hover { background: #F8FAFC; }

/* ---------- project detail ---------- */
.pm-suspend-banner { background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; border-radius: var(--pm-radius); padding: 14px 20px; }
.pm-big-pct { font-size: 46px; font-weight: 800; color: var(--pm-accent); line-height: 1.1; }
.pm-stat-label { font-size: 12px; color: var(--pm-muted); font-weight: 600; }
.pm-stat-value { font-size: 20px; font-weight: 700; }
.pm-list-item { padding: 10px 0; border-bottom: 1px solid #EEF1F5; }
.pm-list-item:last-child { border-bottom: 0; }

.pm-stepper { display: flex; justify-content: space-between; position: relative; padding: 8px 0 4px; overflow-x: auto; }
.pm-step { flex: 1 0 90px; text-align: center; position: relative; }
.pm-step::before { content: ""; position: absolute; top: 20px; left: -50%; width: 100%; height: 3px; background: #CBD5E1; z-index: 0; }
.pm-step:first-child::before { display: none; }
.pm-step.done::before, .pm-step.current::before { background: #15803D; }
.pm-step-dot { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; margin: 0 auto 8px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; }
.pm-step.done .pm-step-dot { background: #15803D; border-color: #15803D; }
.pm-step.current .pm-step-dot { background: var(--pm-accent); border-color: var(--pm-accent); }
.pm-step.current.suspended .pm-step-dot { background: #B91C1C; border-color: #B91C1C; }
.pm-step-label { font-size: 13px; color: var(--pm-muted); }
.pm-step.current .pm-step-label { color: var(--pm-text); font-weight: 700; }
@media (min-width: 992px) {
	.pm-shell { background: linear-gradient(to right, var(--pm-sidebar) 250px, var(--pm-bg) 250px); }
	.pm-sidebar { transition: width .2s ease, flex-basis .2s ease; }
	.pm-collapse-btn { display: flex; }
	/* collapsed sidebar: logo mark and icons only (state kept in localStorage, see layouts/main.php) */
	.pm-sb-collapsed .pm-shell { background: linear-gradient(to right, var(--pm-sidebar) 76px, var(--pm-bg) 76px); }
	.pm-sb-collapsed .pm-sidebar { width: 76px; flex-basis: 76px; }
	.pm-sb-collapsed .pm-brand { padding: 22px 16px 18px; }
	.pm-sb-collapsed .pm-brand-text,
	.pm-sb-collapsed .pm-nav-link span,
	.pm-sb-collapsed .pm-sidebar-user > .min-w-0 { display: none; }
	.pm-sb-collapsed .pm-collapse-btn i { transform: rotate(180deg); }
	.pm-sb-collapsed .pm-nav { padding: 4px 10px; overflow-x: hidden; }
	.pm-sb-collapsed .pm-nav-link { justify-content: center; padding: 11px 0; }
	.pm-sb-collapsed .pm-nav-link i { font-size: 18px; }
	.pm-sb-collapsed .pm-sidebar-user { justify-content: center; padding: 16px 0 22px; }
}

/* ---------- dashboard bars ---------- */
.pm-hbar { display: grid; grid-template-columns: 140px 1fr 40px 90px; align-items: center; gap: 10px; padding: 6px 0; }
.pm-hbar:hover .pm-hbar-label { color: var(--pm-accent); }
.pm-hbar-label { font-size: 13.5px; }
.pm-hbar-track { height: 24px; }
.pm-hbar-fill { height: 100%; border-radius: 6px; }
.pm-hbar-value { font-weight: 700; }
.pm-hbar-note { font-size: 11.5px; font-weight: 700; color: var(--suspend-fg); }
.pm-stack { display: flex; height: 36px; border-radius: 4px; overflow: hidden; background: #E5E7EB; }
.pm-stack-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; padding: 0 6px; min-width: 0; }
.pm-stack-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--pm-muted); font-size: 12px; }
@media (max-width: 575.98px) { .pm-hbar { grid-template-columns: 100px 1fr 32px; } .pm-hbar-note { display: none; } }
.pm-legend { display: inline-block; width: 22px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.pm-legend-box { width: 16px; height: 12px; background: #FECACA; }
.pm-master-tabs { background: #fff; }
.pm-master-tabs .nav-link i { font-size: 15px; }
.pm-subnav .nav-link { border-radius: 999px; padding: 6px 16px; font-weight: 600; color: #4B5563; background: #fff; border: 1px solid var(--pm-border); margin-right: 8px; }
.pm-subnav .nav-link.active { background: var(--pm-accent); border-color: var(--pm-accent); color: #fff; }

/* ---------- Pengaturan > Hak Akses ---------- */
.pm-access-check { width: 1.15em; height: 1.15em; border-color: #9CA3AF; cursor: pointer; }
.pm-access-table td:first-child { min-width: 320px; }
.pm-sticky-foot { position: sticky; bottom: 0; background: #fff; z-index: 5; box-shadow: 0 -4px 10px rgba(15, 23, 42, .06); border-radius: 0 0 var(--pm-radius) var(--pm-radius); }

/* Import Task List (Excel) */
.pm-import-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.pm-import-steps li { flex: 1 1 200px; border: 1px solid var(--pm-border); border-radius: 10px; padding: 10px 12px 10px 44px; position: relative; color: var(--pm-muted); font-size: 13px; }
.pm-import-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #E5E7EB; color: #374151; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.pm-import-steps li strong { display: block; color: #111827; }
.pm-import-steps li span { display: block; font-size: 12px; }
.pm-import-steps li.active { border-color: var(--pm-accent); }
.pm-import-steps li.active::before { background: var(--pm-accent); color: #fff; }
.pm-import-steps li.done::before { content: "\2713"; background: #16A34A; color: #fff; }
.pm-import-count { display: inline-block; border-radius: 8px; padding: 6px 12px; font-size: 13px; }
.pm-import-count strong { font-size: 16px; margin-right: 2px; }
.pm-diff-table td { vertical-align: top; }
.pm-diff-table tr.pm-diff-new td { background: #F0FDF4; }
.pm-diff-table tr.pm-diff-delete td { background: #FEF2F2; color: #7F1D1D; }
.pm-diff-table td.pm-diff-cell { background: #FEF9C3 !important; }
.pm-diff-old { color: #9CA3AF; font-weight: 400; }
.pm-diff-table .pm-diff-old { display: block; }
.pm-diff-new { font-weight: 600; }
.pm-diff-table tr.pm-diff-sep td { background: #FEE2E2; color: #991B1B; font-weight: 600; }

/* Full-page preloader (assets/js/preloader.js) */
.pm-preloader { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(30, 42, 74, .35); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s; cursor: progress; }
.pm-preloader.show { opacity: 1; visibility: visible; }
.pm-preloader-box { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--pm-card, #fff); border-radius: 12px; padding: 22px 30px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); min-width: 200px; }
.pm-preloader-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid #DCE3F0; border-top-color: var(--pm-accent, #2563EB); animation: pm-spin .8s linear infinite; }
.pm-preloader-text { font-size: 14px; font-weight: 600; color: var(--pm-text, #1F2937); }
@keyframes pm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pm-preloader-spinner { animation-duration: 2s; } }

/* Dashboard charts */
.pm-donut { position: relative; width: 200px; height: 200px; flex: 0 0 auto; margin: 0 auto; }
.pm-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.pm-donut-value { font-size: 30px; font-weight: 800; line-height: 1; color: var(--pm-text); }
.pm-donut-label { font-size: 12px; color: var(--pm-muted); margin-top: 4px; }
.pm-chart-legend { min-width: 200px; }
.pm-mstat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-mstat { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--pm-border); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--mstat-color) 7%, #fff), #fff 70%); }
.pm-mstat-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--mstat-color); background: color-mix(in srgb, var(--mstat-color) 14%, #fff); }
.pm-mstat-value { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--mstat-color); }
.pm-mstat-label { font-size: 12.5px; font-weight: 600; color: var(--pm-text); }
.pm-mstat-sub { font-size: 11.5px; color: var(--pm-muted); }
.pm-legend-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; }
a.pm-legend-row:hover { background: var(--pm-head-bg); }
.pm-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* Tab Dokumen: click a row to preview the file in a modal */
.pm-doc-row { cursor: pointer; }
.pm-doc-row:hover > td { background: #F1F5FF; }
.pm-docview { position: relative; height: 78vh; background: #F3F4F6; }
@media (max-width: 991.98px) { .modal-fullscreen-lg-down .pm-docview { height: auto; flex: 1 1 auto; } }
.pm-docview-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pm-docview-img { height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pm-docview-img img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 1px 4px rgba(0,0,0,.15); background: #fff; }
.pm-docview-loading, .pm-docview-none { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6B7280; text-align: center; padding: 16px; }
.pm-docview-none i { font-size: 48px; color: #9CA3AF; }

/* Filter button + modal: active filters as removable chips under the toolbar */
.pm-filter-btn { position: relative; white-space: nowrap; }
.pm-filter-count { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #2563EB; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.pm-filter-chips { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pm-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: 999px; background: #EFF4FF; border: 1px solid #C7D7FE; color: #1E3A8A; font-size: 13px; }
.pm-chip > span:nth-child(2) { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-chip-label { white-space: nowrap; margin-right: 3px; }
.pm-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: #1E3A8A; font-size: 11px; }
.pm-chip-x:hover { background: #C7D7FE; }
.pm-chip-clear { font-size: 13px; }
@media (max-width: 575.98px) {
	.pm-toolbar .pm-toolbar-search { min-width: 0; flex: 1 1 140px; }
}

/* Risiko & Isu: eye icon + detail modal with status update */
.pm-icon-action { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #2563EB; font-size: 17px; vertical-align: middle; }
.pm-icon-action:hover { background: #EFF4FF; color: #1D4ED8; }
.pm-iv-text { white-space: pre-line; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 12px; }
.pm-iv-status { border-top: 1px solid #E5E7EB; padding-top: 16px; }
.pm-doc-fill { min-width: 150px; }
.pm-report-search { width: 200px; }

/* Laporan > Kinerja PIC: side panel with the PIC's projects and tasks */
.pm-pic-link { text-decoration: underline dotted #9CA3AF; text-underline-offset: 4px; }
.pm-pic-link:hover { color: var(--pm-accent); text-decoration-color: var(--pm-accent); }
.pm-pic-panel { --bs-offcanvas-width: 560px; }
.pm-pic-panel .offcanvas-body { background: var(--pm-bg); }
.pm-pic-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0; }
.pm-pic-head { display: flex; align-items: center; gap: 14px; }
.pm-pic-avatar { width: 52px; height: 52px; flex-basis: 52px; font-size: 17px; }
.pm-pic-name { font-size: 18px; font-weight: 800; line-height: 1.2; }
.pm-pic-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 12px; }
.pm-pic-stats > div { background: #fff; border: 1px solid var(--pm-border); border-radius: 10px; padding: 10px 8px; text-align: center; }
.pm-pic-stat-value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pm-pic-stat-label { font-size: 11.5px; color: var(--pm-muted); }
.pm-pic-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #E5E7EB; }
.pm-pic-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--pm-muted); }
.pm-pic-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pm-pic-project { background: #fff; border: 1px solid var(--pm-border); border-radius: 10px; margin-bottom: 10px; }
.pm-pic-project > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.pm-pic-project > summary::-webkit-details-marker { display: none; }
.pm-pic-project .code { color: #6B7280; font-weight: 600; font-size: 12.5px; }
.pm-pic-avg { font-weight: 800; color: var(--pm-accent); flex: 0 0 auto; }
.pm-pic-chev { color: #9CA3AF; transition: transform .15s; flex: 0 0 auto; }
.pm-pic-project[open] .pm-pic-chev { transform: rotate(180deg); }
.pm-pic-tasks { border-top: 1px solid var(--pm-border); padding: 4px 0; }
.pm-pic-task { display: flex; align-items: center; gap: 12px; padding: 9px 14px; }
.pm-pic-task:hover { background: #F1F5FF; }
.pm-pic-task + .pm-pic-task { border-top: 1px dashed #EEF1F5; }
.pm-pic-milestone { font-size: 11.5px; color: var(--pm-muted); }
.pm-pic-open { display: block; padding: 8px 14px 6px; }

/* Modal as a full-height drawer stuck to a screen edge: add pm-drawer-left (Filter modals)
   or pm-drawer-right (e.g. tab Tim > Assign Pekerja / Ubah) to a Bootstrap .modal */
.modal.pm-drawer-left .modal-dialog, .modal.pm-drawer-right .modal-dialog {
	position: fixed; top: 0; bottom: 0; margin: 0; width: 380px; max-width: calc(100vw - 48px);
}
.modal.pm-drawer-left .modal-dialog { left: 0; }
.modal.pm-drawer-right .modal-dialog { right: 0; width: 460px; }
/* beats Bootstrap's .modal.fade .modal-dialog slide-down */
.modal.fade.pm-drawer-left .modal-dialog { transform: translateX(-100%); transition: transform .25s ease-out; }
.modal.fade.pm-drawer-right .modal-dialog { transform: translateX(100%); transition: transform .25s ease-out; }
.modal.show.pm-drawer-left .modal-dialog, .modal.show.pm-drawer-right .modal-dialog { transform: none; }
.pm-drawer-left .modal-content, .pm-drawer-right .modal-content { height: 100%; border: 0; }
.pm-drawer-left .modal-content { border-radius: 0 14px 14px 0; box-shadow: 8px 0 30px rgba(15, 23, 42, .18); }
.pm-drawer-right .modal-content { border-radius: 14px 0 0 14px; box-shadow: -8px 0 30px rgba(15, 23, 42, .18); }
.pm-drawer-left .modal-header, .pm-drawer-right .modal-header { border-bottom: 1px solid var(--pm-border); }
.pm-drawer-left .modal-body, .pm-drawer-right .modal-body { overflow-y: auto; }
.pm-drawer-left .modal-body .row > [class*="col-sm-"] { flex: 0 0 100%; max-width: 100%; }
.pm-drawer-left .modal-footer, .pm-drawer-right .modal-footer { border-top: 1px solid var(--pm-border); background: var(--pm-head-bg); }
.pm-drawer-left .modal-footer { border-radius: 0 0 14px 0; }
.pm-drawer-right .modal-footer { border-radius: 0 0 0 14px; }
@media (prefers-reduced-motion: reduce) { .modal.fade.pm-drawer-left .modal-dialog, .modal.fade.pm-drawer-right .modal-dialog { transition: none; } }
/* drawer whose header stays and whose body/footer come from an AJAX-loaded <form> */
.pm-drawer-slot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pm-drawer-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pm-drawer-form > .modal-body { flex: 1 1 auto; overflow-y: auto; }
.modal.pm-drawer-right.pm-drawer-wide .modal-dialog { width: 560px; }
/* "Import Excel" modal of tab Task List: the 4 steps fit on one row */
#importModal .pm-import-steps li { flex-basis: 150px; padding: 8px 10px 8px 40px; font-size: 12.5px; }
#importModal .pm-import-steps li::before { left: 10px; top: 8px; }
/* task detail inside the large modal of tab Task List */
.pm-task-detail-body { background: var(--pm-bg); }
.pm-task-detail-body .pm-card + .pm-card { margin-top: 16px; }

/* Tab Task List: drag & drop order (one <tbody> per milestone with its sub-tasks) */
.pm-task-sortable tbody.pm-task-group:not(:last-child) tr:last-child td { border-bottom: 1px solid #EEF1F5; }
.pm-task-sortable tbody.pm-task-group:not(:last-child) { border-bottom: 2px solid #E5E7EB; }
.pm-task-sortable tr.pm-task-top, .pm-task-sortable tr.pm-task-child { cursor: grab; }
.pm-task-sortable .dropdown, .pm-task-sortable .dropdown * { cursor: pointer; }
.pm-drag-grip { color: #CBD5E1; margin: 0 6px 0 -8px; font-size: 1rem; vertical-align: -1px; transition: color .15s; }
.pm-task-sortable tr:hover .pm-drag-grip { color: #64748B; }
.pm-sort-ghost td, tbody.pm-sort-ghost td { background: #EFF6FF !important; opacity: .55; }
tr.pm-sort-ghost td:first-child, tbody.pm-sort-ghost tr:first-child td:first-child { box-shadow: inset 3px 0 0 #2563EB; }
.pm-sort-chosen td { background: #F1F5F9; }
body.pm-sorting, body.pm-sorting * { cursor: grabbing !important; user-select: none; }
#taskListCard.pm-task-saving { opacity: .6; pointer-events: none; transition: opacity .15s; }
.pm-sorting-sub tbody.pm-task-group[data-accept="0"] td { opacity: .4; background: repeating-linear-gradient(-45deg, #F8FAFC, #F8FAFC 6px, #F1F5F9 6px, #F1F5F9 12px); }