/*=========================================================
  MYSP MONSIS - ADMIN THEME
  Shell (sidebar/topbar), dashboard, dan lapisan desain
  bersama yang menyeragamkan semua modul admin.

  Semua aturan modul berada di bawah  #msa #msa-main
  (spesifisitas ID ganda) supaya selalu menang atas CSS
  per-modul tanpa perlu !important.
=========================================================*/

/*---------------------------------------------------------
  TOKEN
---------------------------------------------------------*/

.msa{
	--msa-primary:#0f7a55;
	--msa-primary-hover:#0b6446;
	--msa-primary-soft:#e5f3ed;
	--msa-ink:#17231f;
	--msa-text:#2c3a36;
	--msa-muted:#62726d;
	--msa-line:#e1e8e5;
	--msa-line-strong:#cdd7d3;
	--msa-bg:#f2f5f3;
	--msa-surface:#ffffff;
	--msa-side:#10251f;
	--msa-side-text:#b9cdc5;
	--msa-side-active:#ffffff;
	--msa-accent:#46d39a;
	--msa-danger:#c4332a;
	--msa-danger-soft:#fdecea;
	--msa-warn:#9a6700;
	--msa-warn-soft:#fff4d6;
	--msa-info:#1d5fc4;
	--msa-info-soft:#e7f0fd;
	--msa-radius:12px;
	--msa-radius-sm:8px;
	--msa-shadow:0 1px 2px rgba(16,37,31,.05),0 1px 3px rgba(16,37,31,.04);
	--msa-side-w:264px;
	--msa-side-w-min:72px;
	--msa-top-h:60px;
	--msa-offset:0px;

	font-family:'Poppins',sans-serif;
	font-size:14px;
	line-height:1.5;
	color:var(--msa-text);
	-webkit-font-smoothing:antialiased;
	box-sizing:border-box;
}

.msa *,
.msa *::before,
.msa *::after{
	box-sizing:border-box;
}

body.admin-bar .msa{ --msa-offset:32px; }

@media (max-width:782px){
	body.admin-bar .msa{ --msa-offset:46px; }
}

/* Catatan: di <=600px admin bar WP berubah jadi position:absolute dan
   menutupi bagian atas panel (topbar + menu). Karena panel layar penuh
   tidak ikut scroll, offset 46px tetap dipertahankan. */

/*---------------------------------------------------------
  LAYOUT
---------------------------------------------------------*/

.msa{
	display:flex;
	min-height:100vh;
	background:var(--msa-bg);
}

/* Layar penuh: menutup header/footer tema */
.msa--fullscreen{
	position:fixed;
	top:var(--msa-offset);
	right:0;
	bottom:0;
	left:0;
	z-index:99990;
	min-height:0;
	overflow:hidden;
}

body.admin-bar .msa--fullscreen{ z-index:99980; }

.msa-shell{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	margin-left:var(--msa-side-w);
	transition:margin-left .2s ease;
}

.msa--fullscreen .msa-shell{
	height:100%;
}

.msa.is-collapsed .msa-shell{
	margin-left:var(--msa-side-w-min);
}

.msa-main{
	flex:1 1 auto;
	min-width:0;
	padding:24px 28px 40px;
	outline:0;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

.msa-main > *{
	max-width:1400px;
	margin-left:auto;
	margin-right:auto;
}

/*---------------------------------------------------------
  SIDEBAR
---------------------------------------------------------*/

.msa-sidebar{
	position:fixed;
	top:var(--msa-offset);
	bottom:0;
	left:0;
	z-index:99995;
	width:var(--msa-side-w);
	display:flex;
	flex-direction:column;
	background:var(--msa-side);
	color:var(--msa-side-text);
	transition:width .2s ease,transform .25s ease;
}

.msa:not(.msa--fullscreen) .msa-sidebar{
	position:absolute;
	top:0;
}

.msa:not(.msa--fullscreen){
	position:relative;
}

.msa.is-collapsed .msa-sidebar{
	width:var(--msa-side-w-min);
}

.msa-brand{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:12px;
	height:var(--msa-top-h);
	padding:0 18px;
	border-bottom:1px solid rgba(255,255,255,.08);
	overflow:hidden;
}

.msa-brand-logo,
.msa-brand-mark{
	flex:0 0 36px;
	width:36px;
	height:36px;
	border-radius:9px;
}

.msa-brand-logo{
	object-fit:contain;
	background:#fff;
	padding:3px;
}

.msa-brand-mark{
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--msa-accent);
	color:#0c2a20;
	font-weight:800;
	font-size:16px;
}

.msa-brand-text{
	min-width:0;
	display:flex;
	flex-direction:column;
	line-height:1.25;
}

.msa-brand-text strong{
	color:#fff;
	font-size:14px;
	font-weight:700;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.msa-brand-text small{
	color:var(--msa-side-text);
	font-size:12px;
}

.msa-nav{
	flex:1 1 auto;
	overflow-y:auto;
	padding:10px 12px 16px;
	scrollbar-width:thin;
	scrollbar-color:rgba(255,255,255,.18) transparent;
}

.msa-nav-group + .msa-nav-group{
	margin-top:14px;
}

.msa-nav-title{
	padding:6px 10px;
	font-size:12px;
	font-weight:600;
	color:#7f968d;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.msa .msa-nav-link{
	display:flex;
	align-items:center;
	gap:12px;
	min-height:40px;
	padding:8px 10px;
	margin:1px 0;
	border-radius:var(--msa-radius-sm);
	color:var(--msa-side-text);
	font-size:14px;
	font-weight:500;
	text-decoration:none;
	box-shadow:none;
	border:0;
	position:relative;
	transition:background .15s ease,color .15s ease;
}

.msa .msa-nav-link .dashicons{
	flex:0 0 20px;
	width:20px;
	height:20px;
	font-size:20px;
	line-height:20px;
	color:#8fa99f;
	transition:color .15s ease;
}

.msa .msa-nav-link:hover{
	background:rgba(255,255,255,.07);
	color:#fff;
}

.msa .msa-nav-link:hover .dashicons{
	color:#fff;
}

.msa .msa-nav-link:focus-visible{
	outline:2px solid var(--msa-accent);
	outline-offset:-2px;
}

.msa .msa-nav-link.is-active{
	background:rgba(70,211,154,.14);
	color:#fff;
	font-weight:600;
}

.msa .msa-nav-link.is-active::before{
	content:"";
	position:absolute;
	left:-12px;
	top:9px;
	bottom:9px;
	width:3px;
	border-radius:0 3px 3px 0;
	background:var(--msa-accent);
}

.msa .msa-nav-link.is-active .dashicons{
	color:var(--msa-accent);
}

.msa-nav-label{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.msa-sidebar-foot{
	flex:0 0 auto;
	padding:10px 12px 14px;
	border-top:1px solid rgba(255,255,255,.08);
}

/* Sidebar ringkas (desktop) */

.msa.is-collapsed .msa-brand{
	padding:0 18px;
}

.msa.is-collapsed .msa-brand-text,
.msa.is-collapsed .msa-nav-label,
.msa.is-collapsed .msa-nav-title{
	display:none;
}

.msa.is-collapsed .msa-nav-group + .msa-nav-group{
	margin-top:8px;
	padding-top:8px;
	border-top:1px solid rgba(255,255,255,.08);
}

.msa.is-collapsed .msa-nav-link{
	justify-content:center;
	padding:8px 0;
}

.msa.is-collapsed .msa-nav-link.is-active::before{
	left:-12px;
}

/* Overlay untuk drawer mobile */

.msa-overlay{
	display:none;
}

/*---------------------------------------------------------
  TOPBAR
---------------------------------------------------------*/

.msa-topbar{
	position:sticky;
	top:0;
	z-index:20;
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:14px;
	height:var(--msa-top-h);
	padding:0 28px;
	background:var(--msa-surface);
	border-bottom:1px solid var(--msa-line);
}

.msa .msa-icon-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	padding:0;
	margin:0;
	border:1px solid var(--msa-line);
	border-radius:var(--msa-radius-sm);
	background:var(--msa-surface);
	color:var(--msa-text);
	cursor:pointer;
	box-shadow:none;
	transition:background .15s ease,border-color .15s ease;
}

.msa .msa-icon-btn:hover{
	background:var(--msa-bg);
	border-color:var(--msa-line-strong);
}

.msa .msa-icon-btn .dashicons{
	width:20px;
	height:20px;
	font-size:20px;
	line-height:20px;
}

.msa-crumbs{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13.5px;
	color:var(--msa-muted);
	white-space:nowrap;
	overflow:hidden;
}

.msa .msa-crumbs a{
	color:var(--msa-muted);
	text-decoration:none;
}

.msa .msa-crumbs a:hover{
	color:var(--msa-primary);
}

.msa-crumbs strong{
	color:var(--msa-ink);
	font-weight:600;
	overflow:hidden;
	text-overflow:ellipsis;
}

.msa-crumb-sep{
	color:var(--msa-line-strong);
}

/* User menu */

.msa-user{
	position:relative;
	flex:0 0 auto;
}

.msa .msa-user-btn{
	display:flex;
	align-items:center;
	gap:10px;
	padding:4px 8px 4px 4px;
	margin:0;
	border:1px solid transparent;
	border-radius:999px;
	background:transparent;
	color:var(--msa-text);
	cursor:pointer;
	box-shadow:none;
	font:inherit;
	text-align:left;
}

.msa .msa-user-btn:hover,
.msa .msa-user-btn[aria-expanded="true"]{
	background:var(--msa-bg);
	border-color:var(--msa-line);
}

.msa-avatar{
	flex:0 0 34px;
	width:34px;
	height:34px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--msa-primary-soft);
	color:var(--msa-primary);
	font-size:14px;
	font-weight:700;
}

.msa-user-meta{
	display:flex;
	flex-direction:column;
	line-height:1.25;
	max-width:160px;
}

.msa-user-meta strong,
.msa-user-meta small{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.msa-user-meta strong{
	font-size:13.5px;
	color:var(--msa-ink);
}

.msa-user-meta small{
	font-size:12px;
	color:var(--msa-muted);
}

.msa-user-btn .dashicons{
	width:16px;
	height:16px;
	font-size:16px;
	color:var(--msa-muted);
}

.msa-user-menu{
	position:absolute;
	top:calc(100% + 8px);
	right:0;
	z-index:30;
	min-width:230px;
	padding:6px;
	background:var(--msa-surface);
	border:1px solid var(--msa-line);
	border-radius:var(--msa-radius);
	box-shadow:0 12px 32px rgba(16,37,31,.16);
}

.msa-user-menu[hidden]{
	display:none;
}

.msa-user-menu-head{
	display:flex;
	flex-direction:column;
	padding:10px 12px 12px;
	margin-bottom:4px;
	border-bottom:1px solid var(--msa-line);
	line-height:1.3;
}

.msa-user-menu-head strong{
	color:var(--msa-ink);
	font-size:14px;
}

.msa-user-menu-head small{
	color:var(--msa-muted);
	font-size:12px;
	overflow:hidden;
	text-overflow:ellipsis;
}

.msa .msa-user-menu a{
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 12px;
	border-radius:var(--msa-radius-sm);
	color:var(--msa-text);
	font-size:13.5px;
	text-decoration:none;
}

.msa .msa-user-menu a:hover{
	background:var(--msa-bg);
}

.msa .msa-user-menu a.is-danger{
	color:var(--msa-danger);
}

.msa .msa-user-menu a.is-danger:hover{
	background:var(--msa-danger-soft);
}

.msa-user-menu .dashicons{
	width:18px;
	height:18px;
	font-size:18px;
}

/*---------------------------------------------------------
  DASHBOARD
---------------------------------------------------------*/

.msa-page-head{
	margin-bottom:20px;
}

.msa-page-head h1{
	margin:0 0 4px;
	padding:0;
	font-size:24px;
	font-weight:700;
	line-height:1.3;
	color:var(--msa-ink);
}

.msa-page-head p{
	margin:0;
	color:var(--msa-muted);
}

.msa-muted{
	color:var(--msa-muted);
	font-size:13px;
	margin:0;
}

.msa-quick{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:20px;
}

.msa .msa-quick a{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 14px;
	border:1px solid var(--msa-line-strong);
	border-radius:var(--msa-radius-sm);
	background:var(--msa-surface);
	color:var(--msa-ink);
	font-size:13.5px;
	font-weight:600;
	text-decoration:none;
	transition:border-color .15s ease,background .15s ease;
}

.msa .msa-quick a:hover{
	border-color:var(--msa-primary);
	background:var(--msa-primary-soft);
	color:var(--msa-primary);
}

.msa-quick .dashicons{
	width:18px;
	height:18px;
	font-size:18px;
	color:var(--msa-primary);
}

.msa-stats{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:16px;
	margin-bottom:20px;
}

.msa .msa-stat{
	display:flex;
	align-items:center;
	gap:14px;
	padding:18px;
	background:var(--msa-surface);
	border:1px solid var(--msa-line);
	border-radius:var(--msa-radius);
	box-shadow:var(--msa-shadow);
	color:inherit;
	text-decoration:none;
	transition:border-color .15s ease;
}

.msa .msa-stat:hover{
	border-color:var(--msa-line-strong);
}

.msa-stat-icon{
	flex:0 0 46px;
	width:46px;
	height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
}

.msa-stat-icon .dashicons{
	width:24px;
	height:24px;
	font-size:24px;
}

.msa-stat.is-green .msa-stat-icon{ background:#e5f3ed; color:#0f7a55; }
.msa-stat.is-blue .msa-stat-icon{ background:#e7f0fd; color:#1d5fc4; }
.msa-stat.is-amber .msa-stat-icon{ background:#fff4d6; color:#9a6700; }
.msa-stat.is-violet .msa-stat-icon{ background:#efe9fb; color:#6b3fc4; }

.msa-stat-body{
	min-width:0;
	display:flex;
	flex-direction:column;
}

.msa-stat-body strong{
	font-size:26px;
	font-weight:700;
	line-height:1.15;
	color:var(--msa-ink);
	font-variant-numeric:tabular-nums;
}

.msa-stat-body small{
	margin-top:2px;
	font-size:13px;
	color:var(--msa-muted);
}

.msa-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;
}

.msa-card--wide{
	grid-column:1 / -1;
}

.msa-card{
	background:var(--msa-surface);
	border:1px solid var(--msa-line);
	border-radius:var(--msa-radius);
	box-shadow:var(--msa-shadow);
	overflow:hidden;
}

.msa-card-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 20px;
	border-bottom:1px solid var(--msa-line);
}

.msa-card-head h2{
	margin:0;
	padding:0;
	font-size:15px;
	font-weight:700;
	color:var(--msa-ink);
}

.msa .msa-card-head a{
	font-size:13px;
	font-weight:600;
	color:var(--msa-primary);
	text-decoration:none;
}

.msa .msa-card-head a:hover{
	text-decoration:none;
}

.msa-card-body{
	padding:20px;
}

.msa-money{
	display:flex;
	flex-direction:column;
	margin-bottom:16px;
}

.msa-money small{
	font-size:13px;
	color:var(--msa-muted);
}

.msa-money strong{
	font-size:26px;
	font-weight:700;
	color:var(--msa-ink);
	font-variant-numeric:tabular-nums;
}

.msa-progress{
	height:8px;
	border-radius:999px;
	background:var(--msa-line);
	overflow:hidden;
	margin-bottom:14px;
}

.msa-progress span{
	display:block;
	height:100%;
	border-radius:999px;
	background:var(--msa-primary);
}

.msa-legend{
	display:flex;
	flex-wrap:wrap;
	gap:8px 20px;
	margin:0;
	padding:0;
	list-style:none;
	font-size:13px;
	color:var(--msa-muted);
}

.msa-legend li{
	display:flex;
	align-items:center;
	gap:7px;
	margin:0;
}

.msa-legend i{
	width:10px;
	height:10px;
	border-radius:3px;
	background:var(--msa-line-strong);
}

.msa-legend i.is-green{ background:#0f7a55; }
.msa-legend i.is-amber{ background:#d99a1c; }
.msa-legend i.is-red{ background:#c4332a; }

.msa-legend strong{
	color:var(--msa-ink);
	font-variant-numeric:tabular-nums;
}

.msa-todo,
.msa-people{
	margin:0;
	padding:0;
	list-style:none;
}

.msa-todo li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:0;
	padding:10px 0;
	border-bottom:1px solid var(--msa-line);
}

.msa-todo li:first-child{ padding-top:0; }
.msa-todo li:last-child{ padding-bottom:0; border-bottom:0; }

.msa-todo .dashicons{
	flex:0 0 20px;
	width:20px;
	height:20px;
	font-size:20px;
	color:#d99a1c;
}

.msa-todo li > span:nth-child(2){
	flex:1 1 auto;
	min-width:0;
	color:var(--msa-text);
}

.msa .msa-todo a{
	flex:0 0 auto;
	font-size:13px;
	font-weight:600;
	color:var(--msa-primary);
	text-decoration:none;
}

.msa .msa-todo a:hover{
	text-decoration:none;
}

.msa-ok{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0;
	color:var(--msa-primary);
	font-weight:600;
}

.msa-ok .dashicons{
	width:22px;
	height:22px;
	font-size:22px;
}

.msa-people{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:2px 32px;
}

.msa-people li{
	display:flex;
	align-items:center;
	gap:12px;
	margin:0;
	padding:9px 0;
	border-bottom:1px solid var(--msa-line);
}

.msa-people-name{
	flex:1 1 auto;
	min-width:0;
	font-weight:600;
	color:var(--msa-ink);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.msa-people time{
	flex:0 0 auto;
	font-size:12.5px;
	color:var(--msa-muted);
}

/*---------------------------------------------------------
  GATE (belum login / tanpa akses)
---------------------------------------------------------*/

.msa-gate{
	display:flex;
	justify-content:center;
	padding:48px 16px;
	font-family:'Poppins',sans-serif;
}

.msa-gate-card{
	width:100%;
	max-width:420px;
	padding:32px 28px;
	text-align:center;
	background:#fff;
	border:1px solid #e1e8e5;
	border-radius:14px;
	box-shadow:0 1px 3px rgba(16,37,31,.06);
}

.msa-gate-card .dashicons{
	width:44px;
	height:44px;
	font-size:26px;
	line-height:44px;
	border-radius:50%;
	background:#e5f3ed;
	color:#0f7a55;
}

.msa-gate-card h2{
	margin:14px 0 6px;
	font-size:19px;
	color:#17231f;
}

.msa-gate-card p{
	margin:0 0 18px;
	color:#62726d;
}

.msa-gate-card .msa-gate-btn{
	display:inline-block;
	padding:10px 20px;
	border-radius:8px;
	background:#0f7a55;
	color:#fff;
	font-weight:600;
	text-decoration:none;
}

.msa-gate-card .msa-gate-btn:hover{
	background:#0b6446;
	color:#fff;
}

/*=========================================================
  LAPISAN BERSAMA UNTUK MODUL
  (menyeragamkan CSS per-modul yang sebelumnya berbeda-beda)
=========================================================*/

/* ---------- teks dasar ---------- */

#msa #msa-main{
	font-size:14px;
	color:var(--msa-text);
}

#msa #msa-main h1{
	margin:0 0 4px;
	padding:0;
	font-size:24px;
	font-weight:700;
	line-height:1.3;
	color:var(--msa-ink);
}

#msa #msa-main h2{
	color:var(--msa-ink);
}

/* ---------- header halaman ---------- */

#msa #msa-main [class^="mysp-monsis-"][class$="-header"]:not([class*="-form-"]):not([class*="-card-"]):not([class*="-detail-"]),
#msa #msa-main .wrap > h1:first-child{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px 20px;
	margin:0 0 20px;
	padding:0;
	background:transparent;
	border:0;
}

#msa #msa-main [class^="mysp-monsis-"][class$="-header"]:not([class*="-form-"]):not([class*="-card-"]):not([class*="-detail-"]) p{
	margin:0;
	color:var(--msa-muted);
	font-size:14px;
}

#msa #msa-main [class^="mysp-monsis-"][class$="-header"] h1{
	margin:0 0 4px;
}

/* ---------- kartu, form & tabel pembungkus ---------- */

#msa #msa-main [class^="mysp-monsis-"][class$="-card"],
#msa #msa-main [class^="mysp-monsis-"][class$="-form-card"],
#msa #msa-main [class^="mysp-monsis-"][class$="-table-wrap"],
#msa #msa-main [class^="mysp-monsis-"][class$="-form-box"]{
	background:var(--msa-surface);
	border:1px solid var(--msa-line);
	border-radius:var(--msa-radius);
	box-shadow:var(--msa-shadow);
}

#msa #msa-main [class^="mysp-monsis-"][class$="-card"] > [class$="-table-wrap"]{
	border:0;
	box-shadow:none;
	border-radius:0;
}

#msa #msa-main [class^="mysp-monsis-"][class$="-table-wrap"]{
	padding:8px 16px 16px;
	overflow-x:auto;
}

#msa #msa-main [class^="mysp-monsis-"][class$="-card-header"],
#msa #msa-main [class^="mysp-monsis-"][class$="-card-head"],
#msa #msa-main [class^="mysp-monsis-"][class$="-form-header"]{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 20px;
	background:var(--msa-surface);
	border-bottom:1px solid var(--msa-line);
}

#msa #msa-main [class^="mysp-monsis-"][class$="-card-title"],
#msa #msa-main [class^="mysp-monsis-"][class$="-form-title"],
#msa #msa-main [class^="mysp-monsis-"][class$="-form-header"] h2,
#msa #msa-main [class^="mysp-monsis-"][class$="-card-head"] h2,
#msa #msa-main [class^="mysp-monsis-"][class$="-card-header"] h2{
	margin:0;
	font-size:15px;
	font-weight:700;
	color:var(--msa-ink);
}

#msa #msa-main [class$="-form-title-wrap"] .dashicons,
#msa #msa-main [class$="-form-header"] h2 .dashicons{
	color:var(--msa-primary);
}

#msa #msa-main [class^="mysp-monsis-"][class$="-form-body"]{
	padding:20px;
}

#msa #msa-main [id$="-form-wrap"]{
	margin-bottom:20px;
}

#msa #msa-main [class$="-form-grid"]{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px 20px;
}

#msa #msa-main [class$="-form-actions"]{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	margin-top:20px;
	padding-top:16px;
	border-top:1px solid var(--msa-line);
}

/* ---------- field & input ---------- */

#msa #msa-main [class$="-field"]{
	display:flex;
	flex-direction:column;
	gap:6px;
	min-width:0;
}

#msa #msa-main [class$="-field"] label,
#msa #msa-main [class$="-field-label"]{
	margin:0;
	font-size:13px;
	font-weight:600;
	color:var(--msa-ink);
}

#msa #msa-main .required{
	color:var(--msa-danger);
}

#msa #msa-main input[type="text"],
#msa #msa-main input[type="number"],
#msa #msa-main input[type="email"],
#msa #msa-main input[type="password"],
#msa #msa-main input[type="search"],
#msa #msa-main input[type="tel"],
#msa #msa-main input[type="url"],
#msa #msa-main input[type="date"],
#msa #msa-main input[type="month"],
#msa #msa-main input[type="time"],
#msa #msa-main input[type="datetime-local"],
#msa #msa-main select,
#msa #msa-main textarea{
	width:100%;
	max-width:100%;
	min-height:40px;
	margin:0;
	padding:9px 12px;
	background:var(--msa-surface);
	color:var(--msa-ink);
	border:1px solid var(--msa-line-strong);
	border-radius:var(--msa-radius-sm);
	font-family:inherit;
	font-size:14px;
	line-height:1.4;
	box-shadow:none;
	transition:border-color .15s ease,box-shadow .15s ease;
}

#msa #msa-main textarea{
	min-height:96px;
	resize:vertical;
}

#msa #msa-main input:focus,
#msa #msa-main select:focus,
#msa #msa-main textarea:focus{
	outline:0;
	border-color:var(--msa-primary);
	box-shadow:0 0 0 3px rgba(15,122,85,.16);
}

#msa #msa-main input:disabled,
#msa #msa-main select:disabled,
#msa #msa-main textarea:disabled,
#msa #msa-main input[readonly]{
	background:var(--msa-bg);
	color:var(--msa-muted);
}

#msa #msa-main input[type="radio"],
#msa #msa-main input[type="checkbox"]{
	width:auto;
	min-height:0;
	accent-color:var(--msa-primary);
}

#msa #msa-main [class$="-field-help"]{
	color:var(--msa-muted);
	font-size:12.5px;
}

#msa #msa-main [class$="-status"] label{
	font-weight:500;
}

/* ---------- tombol ---------- */

#msa #msa-main [class*="-btn"]:not([class*="-btn-"]),
#msa #msa-main [class*="-button"]:not([class*="-button-"]),
#msa #msa-main [class*="-btn-"],
#msa #msa-main [class*="-button-"],
#msa #msa-main .mysp_payment_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:38px;
	padding:8px 16px;
	margin:0;
	border:1px solid var(--msa-line-strong);
	border-radius:var(--msa-radius-sm);
	background:var(--msa-surface);
	color:var(--msa-ink);
	font-family:inherit;
	font-size:13.5px;
	font-weight:600;
	line-height:1.2;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
	box-shadow:none;
	transition:background .15s ease,border-color .15s ease,color .15s ease;
}

#msa #msa-main [class*="-btn"]:hover,
#msa #msa-main [class*="-button"]:hover,
#msa #msa-main .mysp_payment_btn:hover{
	background:var(--msa-bg);
	border-color:var(--msa-line-strong);
	color:var(--msa-ink);
}

#msa #msa-main [class*="-btn"]:focus-visible,
#msa #msa-main [class*="-button"]:focus-visible,
#msa #msa-main [class*="_btn"]:focus-visible,
#msa #msa-main [class*="-action"]:focus-visible{
	outline:2px solid var(--msa-primary);
	outline-offset:2px;
}

/* utama */
#msa #msa-main [class*="-btn-primary"],
#msa #msa-main [class*="-button-primary"],
#msa #msa-main .mysp_payment_btn_save,
#msa #msa-main .mysp_payment_btn_pay{
	background:var(--msa-primary);
	border-color:var(--msa-primary);
	color:#fff;
}

#msa #msa-main [class*="-btn-primary"]:hover,
#msa #msa-main [class*="-button-primary"]:hover,
#msa #msa-main .mysp_payment_btn_save:hover,
#msa #msa-main .mysp_payment_btn_pay:hover{
	background:var(--msa-primary-hover);
	border-color:var(--msa-primary-hover);
	color:#fff;
}

/* hapus */
#msa #msa-main [class*="-btn-delete"],
#msa #msa-main [class*="-btn-danger"],
#msa #msa-main [class*="-button-danger"],
#msa #msa-main .mysp_payment_btn_delete{
	background:var(--msa-danger-soft);
	border-color:#f3c6c2;
	color:var(--msa-danger);
}

#msa #msa-main [class*="-btn-delete"]:hover,
#msa #msa-main [class*="-btn-danger"]:hover,
#msa #msa-main [class*="-button-danger"]:hover,
#msa #msa-main .mysp_payment_btn_delete:hover{
	background:var(--msa-danger);
	border-color:var(--msa-danger);
	color:#fff;
}

/* ubah / lihat */
#msa #msa-main [class*="-btn-edit"],
#msa #msa-main [class*="-btn-detail"],
#msa #msa-main [class*="-btn-browse"],
#msa #msa-main .mysp_payment_btn_edit,
#msa #msa-main .mysp_payment_btn_view{
	background:var(--msa-info-soft);
	border-color:#c7dcf8;
	color:var(--msa-info);
}

#msa #msa-main [class*="-btn-edit"]:hover,
#msa #msa-main [class*="-btn-detail"]:hover,
#msa #msa-main [class*="-btn-browse"]:hover,
#msa #msa-main .mysp_payment_btn_edit:hover,
#msa #msa-main .mysp_payment_btn_view:hover{
	background:var(--msa-info);
	border-color:var(--msa-info);
	color:#fff;
}

#msa #msa-main [class*="-btn"] .dashicons,
#msa #msa-main [class*="-button"] .dashicons,
#msa #msa-main [class*="_btn"] .dashicons{
	flex:0 0 16px;
	width:16px;
	height:16px;
	font-size:16px;
	line-height:16px;
}

/* tombol ikon pada kolom aksi */
#msa #msa-main [class$="-actions"]:not([class*="-form-"]){
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
}

#msa #msa-main td [class*="-btn"],
#msa #msa-main td [class*="-icon-btn"],
#msa #msa-main td [class*="_btn"],
#msa #msa-main td [class$="-action"],
#msa #msa-main td [class*="-action-"]{
	min-height:32px;
	padding:5px 10px;
	font-size:12.5px;
}

#msa #msa-main [class*="-icon-btn"],
#msa #msa-main [class$="-action"],
#msa #msa-main [class*="-action-edit"],
#msa #msa-main [class*="-action-delete"]{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	min-height:32px;
	padding:0;
	border:1px solid var(--msa-line-strong);
	border-radius:var(--msa-radius-sm);
	background:var(--msa-surface);
	color:var(--msa-ink);
	cursor:pointer;
}

#msa #msa-main [class*="-icon-btn"].is-edit,
#msa #msa-main [class*="-action-edit"]{
	background:var(--msa-info-soft);
	border-color:#c7dcf8;
	color:var(--msa-info);
}

#msa #msa-main [class*="-icon-btn"].is-delete,
#msa #msa-main [class*="-action-delete"]{
	background:var(--msa-danger-soft);
	border-color:#f3c6c2;
	color:var(--msa-danger);
}

#msa #msa-main [class*="-icon-btn"].is-generate{
	background:var(--msa-primary-soft);
	border-color:#bfe0d1;
	color:var(--msa-primary);
}

#msa #msa-main [class*="-icon-btn"]:hover,
#msa #msa-main [class*="-action-edit"]:hover,
#msa #msa-main [class*="-action-delete"]:hover{
	filter:brightness(.96);
}

#msa #msa-main [class*="-icon-btn"] .dashicons,
#msa #msa-main [class$="-action"] .dashicons{
	width:16px;
	height:16px;
	font-size:16px;
	line-height:16px;
}

/* tombol tutup (x) */
#msa #msa-main [class$="-close"]{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	padding:0;
	border:1px solid var(--msa-line);
	border-radius:var(--msa-radius-sm);
	background:var(--msa-surface);
	color:var(--msa-muted);
	cursor:pointer;
}

#msa #msa-main [class$="-close"]:hover{
	background:var(--msa-bg);
	color:var(--msa-ink);
}

/* ---------- badge ---------- */

#msa #msa-main [class*="-badge"]{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:3px 10px;
	border-radius:999px;
	background:var(--msa-bg);
	color:var(--msa-muted);
	font-size:12px;
	font-weight:600;
	line-height:1.4;
	white-space:nowrap;
	border:0;
}

#msa #msa-main [class*="-badge-success"],
#msa #msa-main [class*="-badge-active"],
#msa #msa-main [class*="-badge-lunas"],
#msa #msa-main .mysp_payment_badge_lunas{
	background:var(--msa-primary-soft);
	color:#0b6446;
}

#msa #msa-main [class*="-badge-danger"],
#msa #msa-main [class*="-badge-inactive"],
#msa #msa-main [class*="-badge-belum"],
#msa #msa-main .mysp_payment_badge_belum{
	background:var(--msa-danger-soft);
	color:var(--msa-danger);
}

#msa #msa-main [class*="-badge-info"],
#msa #msa-main [class*="-badge-type"],
#msa #msa-main [class*="-badge-target"],
#msa #msa-main [class*="-badge-admin"]{
	background:var(--msa-info-soft);
	color:var(--msa-info);
}

#msa #msa-main [class*="-badge-warning"],
#msa #msa-main [class*="-badge-angsuran"],
#msa #msa-main .mysp_payment_badge_angsuran{
	background:var(--msa-warn-soft);
	color:var(--msa-warn);
}

#msa #msa-main [class*="-badge-secondary"],
#msa #msa-main [class*="-badge-normal"]{
	background:#eceff0;
	color:#55646a;
}

/* ---------- toast / notifikasi ---------- */

#msa #msa-main [class$="-toast"]{
	max-width:100%;
	margin:0 0 16px;
	padding:11px 16px;
	border-radius:var(--msa-radius-sm);
	font-size:13.5px;
	font-weight:600;
	text-align:left;
}

#msa #msa-main [class*="-toast-success"]{
	background:var(--msa-primary-soft);
	border:1px solid #bfe0d1;
	color:#0b5a3f;
}

#msa #msa-main [class*="-toast-error"]{
	background:var(--msa-danger-soft);
	border:1px solid #f3c6c2;
	color:#8f221b;
}

/* ---------- tabel ---------- */

#msa #msa-main table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	font-size:13.5px;
}

#msa #msa-main table thead th{
	padding:11px 12px;
	background:#f6f8f7;
	color:#44534e;
	border:0;
	border-top:1px solid var(--msa-line);
	border-bottom:1px solid var(--msa-line);
	font-size:12.5px;
	font-weight:700;
	text-align:left;
	white-space:nowrap;
}

#msa #msa-main table thead th:first-child{
	border-left:1px solid var(--msa-line);
	border-radius:var(--msa-radius-sm) 0 0 0;
}

#msa #msa-main table thead th:last-child{
	border-right:1px solid var(--msa-line);
	border-radius:0 var(--msa-radius-sm) 0 0;
}

#msa #msa-main table tbody td{
	padding:12px;
	border:0;
	border-bottom:1px solid var(--msa-line);
	color:var(--msa-text);
	vertical-align:middle;
	line-height:1.5;
	background:transparent;
}

#msa #msa-main table tbody tr:hover td{
	background:#f9fbfa;
}

#msa #msa-main table tbody tr:last-child td{
	border-bottom:0;
}

/* hilangkan stripe & highlight kolom-urut bawaan DataTables */
#msa #msa-main table.dataTable tbody tr,
#msa #msa-main table.dataTable tbody tr > *,
#msa #msa-main table.dataTable tbody tr.odd > *,
#msa #msa-main table.dataTable tbody tr.even > *,
#msa #msa-main table.dataTable.display tbody tr > .sorting_1,
#msa #msa-main table.dataTable.display tbody tr > .sorting_2,
#msa #msa-main table.dataTable.display tbody tr > .sorting_3{
	box-shadow:none;
}

#msa #msa-main table small{
	display:block;
	margin-top:2px;
	color:var(--msa-muted);
	font-size:12.5px;
}

#msa #msa-main table.dataTable.no-footer{
	border-bottom:0;
}

/* ---------- DataTables ---------- */

#msa #msa-main .dataTables_wrapper{
	font-size:13.5px;
	color:var(--msa-text);
}

#msa #msa-main .dataTables_wrapper .dataTables_length,
#msa #msa-main .dataTables_wrapper .dataTables_filter{
	margin-bottom:14px;
}

#msa #msa-main .dataTables_wrapper .dataTables_filter input{
	width:240px;
	max-width:100%;
	margin-left:8px;
}

#msa #msa-main .dataTables_wrapper .dataTables_length select{
	width:auto;
	min-height:36px;
	margin:0 6px;
	padding:6px 28px 6px 10px;
}

#msa #msa-main .dataTables_wrapper .dataTables_info{
	padding-top:16px;
	color:var(--msa-muted);
	font-size:13px;
}

#msa #msa-main .dataTables_wrapper .dataTables_paginate{
	padding-top:12px;
}

#msa #msa-main .dataTables_wrapper .dataTables_paginate .paginate_button{
	min-width:34px;
	margin:0 2px;
	padding:6px 10px;
	border:1px solid var(--msa-line) !important;
	border-radius:var(--msa-radius-sm);
	background:var(--msa-surface) !important;
	color:var(--msa-text) !important;
	font-size:13px;
	box-shadow:none;
}

#msa #msa-main .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
	border-color:var(--msa-line-strong) !important;
	background:var(--msa-bg) !important;
	color:var(--msa-ink) !important;
}

#msa #msa-main .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#msa #msa-main .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	border-color:var(--msa-primary) !important;
	background:var(--msa-primary) !important;
	color:#fff !important;
}

#msa #msa-main .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#msa #msa-main .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
	opacity:.45;
	background:var(--msa-surface) !important;
	color:var(--msa-muted) !important;
}

#msa #msa-main tr.dtrg-group td{
	background:var(--msa-primary-soft);
	color:#0b5a3f;
	font-weight:700;
}

#msa #msa-main .dataTables_empty,
#msa #msa-main [class$="-empty"]{
	padding:32px 12px;
	text-align:center;
	color:var(--msa-muted);
}

/* ---------- gambar ---------- */

#msa #msa-main img{
	max-width:100%;
	height:auto;
}

/*=========================================================
  RESPONSIVE
=========================================================*/

/* Tablet & mobile: sidebar menjadi drawer */

@media (max-width:1023px){

	.msa-shell,
	.msa.is-collapsed .msa-shell{
		margin-left:0;
	}

	.msa-sidebar,
	.msa.is-collapsed .msa-sidebar{
		width:min(300px,86vw);
		transform:translateX(-100%);
		box-shadow:none;
	}

	.msa.is-drawer-open .msa-sidebar{
		transform:translateX(0);
		box-shadow:0 0 40px rgba(0,0,0,.35);
	}

	/* abaikan mode ringkas di drawer */
	.msa.is-collapsed .msa-brand-text,
	.msa.is-collapsed .msa-nav-label,
	.msa.is-collapsed .msa-nav-title{
		display:block;
	}

	.msa.is-collapsed .msa-nav-link{
		justify-content:flex-start;
		padding:8px 10px;
	}

	.msa.is-collapsed .msa-nav-group + .msa-nav-group{
		margin-top:14px;
		padding-top:0;
		border-top:0;
	}

	.msa-overlay{
		position:fixed;
		top:var(--msa-offset);
		right:0;
		bottom:0;
		left:0;
		z-index:99994;
		background:rgba(10,24,19,.5);
		opacity:0;
		pointer-events:none;
		transition:opacity .2s ease;
		display:block;
	}

	.msa.is-drawer-open .msa-overlay{
		opacity:1;
		pointer-events:auto;
	}

	.msa-topbar{
		padding:0 16px;
	}

	.msa-main{
		padding:20px 16px 32px;
	}

	.msa-stats{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:767px){

	.msa-grid{
		grid-template-columns:minmax(0,1fr);
	}

	.msa-people{
		grid-template-columns:minmax(0,1fr);
	}

	.msa-user-meta,
	.msa-user-btn .dashicons{
		display:none;
	}

	.msa .msa-user-btn{
		padding:2px;
	}

	.msa-crumb-group,
	.msa-crumb-group + .msa-crumb-sep,
	.msa-crumbs > a,
	.msa-crumbs > a + .msa-crumb-sep{
		display:none;
	}

	.msa-crumbs strong{
		font-size:15px;
	}

	.msa-page-head h1{
		font-size:21px;
	}

	#msa #msa-main [class$="-form-grid"]{
		grid-template-columns:minmax(0,1fr);
	}

	#msa #msa-main [class^="mysp-monsis-"][class$="-header"]:not([class*="-form-"]):not([class*="-card-"]):not([class*="-detail-"]){
		align-items:flex-start;
	}

	#msa #msa-main [class$="-form-actions"] > *{
		flex:1 1 auto;
	}

	#msa #msa-main .dataTables_wrapper .dataTables_filter,
	#msa #msa-main .dataTables_wrapper .dataTables_length{
		float:none;
		text-align:left;
	}

	#msa #msa-main .dataTables_wrapper .dataTables_filter label,
	#msa #msa-main .dataTables_wrapper .dataTables_length label{
		display:flex;
		align-items:center;
		gap:8px;
	}

	#msa #msa-main .dataTables_wrapper .dataTables_filter input{
		flex:1 1 auto;
		width:auto;
		margin-left:0;
	}

	#msa #msa-main .dataTables_wrapper .dataTables_info,
	#msa #msa-main .dataTables_wrapper .dataTables_paginate{
		float:none;
		text-align:center;
	}

	#msa #msa-main [class^="mysp-monsis-"][class$="-table-wrap"]{
		padding:8px 12px 14px;
	}
}

/* Mobile kecil: tabel menjadi daftar kartu (label diisi oleh JS) */

@media (max-width:640px){

	.msa-stats{
		gap:10px;
	}

	.msa .msa-stat{
		padding:14px;
		gap:10px;
	}

	.msa-stat-icon{
		flex-basis:38px;
		width:38px;
		height:38px;
	}

	.msa-stat-body strong{
		font-size:22px;
	}

	#msa #msa-main table.msa-stack{
		min-width:0 !important;
		display:block;
		width:100% !important;
	}

	#msa #msa-main table.msa-stack thead{
		display:none;
	}

	#msa #msa-main table.msa-stack tbody{
		display:block;
	}

	#msa #msa-main table.msa-stack tbody tr{
		display:block;
		margin:0 0 12px;
		padding:4px 14px;
		background:var(--msa-surface);
		border:1px solid var(--msa-line);
		border-radius:var(--msa-radius);
	}

	#msa #msa-main table.msa-stack tbody tr:hover td{
		background:transparent;
	}

	#msa #msa-main table.msa-stack tbody td{
		display:block;
		width:100% !important;
		padding:10px 0;
		border-bottom:1px solid var(--msa-line);
		text-align:left !important;
		word-break:break-word;
	}

	#msa #msa-main table.msa-stack tbody td:last-child{
		border-bottom:0;
	}

	#msa #msa-main table.msa-stack tbody td::before{
		content:attr(data-label);
		display:block;
		margin-bottom:3px;
		color:var(--msa-muted);
		font-size:12px;
		font-weight:600;
		line-height:1.4;
	}

	#msa #msa-main table.msa-stack tbody td[data-label=""]::before,
	#msa #msa-main table.msa-stack tbody td:not([data-label])::before{
		display:none;
	}

	#msa #msa-main table.msa-stack tbody td [class$="-actions"],
	#msa #msa-main table.msa-stack tbody td .mysp_payment_action{
		justify-content:flex-start;
	}

	#msa #msa-main table.msa-stack tr.dtrg-group,
	#msa #msa-main table.msa-stack tr.dtrg-group td{
		display:block;
		text-align:left !important;
	}

	#msa #msa-main table.msa-stack td.dataTables_empty{
		display:block;
		text-align:center !important;
	}

	#msa #msa-main table.msa-stack td.dataTables_empty::before{
		display:none;
	}
}

/*---------------------------------------------------------
  GERAK & CETAK
---------------------------------------------------------*/

@media (prefers-reduced-motion:reduce){

	.msa *,
	.msa *::before,
	.msa *::after{
		transition:none !important;
		animation:none !important;
	}
}

@media print{

	.msa--fullscreen{
		position:static;
		overflow:visible;
	}

	.msa-sidebar,
	.msa-topbar,
	.msa-overlay{
		display:none !important;
	}

	.msa-shell{
		margin-left:0 !important;
	}

	.msa-main{
		overflow:visible;
		padding:0;
	}
}


/*---------------------------------------------------------
  FONT GLOBAL - Poppins
  Memastikan seluruh elemen (input, tombol, tabel, dll.)
  memakai Poppins, kecuali ikon dashicons.
---------------------------------------------------------*/

.msa,
.msa *:not(.dashicons):not([class^="dashicons"]):not([class*=" dashicons"]),
.msa-gate,
.msa-gate *{
	font-family:'Poppins',sans-serif;
}


/* LINK - tanpa garis bawah (semua state) */
.msa a,
.msa a:hover,
.msa a:focus,
.msa a:active,
.msa a:visited,
.msa-gate a,
.msa-gate a:hover,
.msa-gate a:focus,
.msa-gate a:active,
.msa-gate a:visited{
	text-decoration:none !important;
}


/*---------------------------------------------------------
  TOMBOL PEMBAYARAN - kontras teks
  CSS modul memaksa warna latar (!important), sedangkan tema
  admin mengubah warna teks. Samakan agar teks selalu putih
  di atas latar solid (hapus, simpan, bayar, ubah, tutup).
---------------------------------------------------------*/

#msa #msa-main .mysp_payment_btn_delete,
#msa #msa-main .mysp_payment_btn_delete:hover,
#msa #msa-main .mysp_payment_btn_delete:focus,
#msa #msa-main .mysp_payment_btn_save,
#msa #msa-main .mysp_payment_btn_save:hover,
#msa #msa-main .mysp_payment_btn_pay,
#msa #msa-main .mysp_payment_btn_pay:hover,
#msa #msa-main .mysp_payment_btn_edit,
#msa #msa-main .mysp_payment_btn_edit:hover,
#msa #msa-main .mysp_payment_btn_close,
#msa #msa-main .mysp_payment_btn_close:hover,
#msa #msa-main .mysp_payment_edit_trx,
#msa #msa-main .mysp_payment_edit_trx:hover{
	color:#fff !important;
}

#msa #msa-main .mysp_payment_btn_delete{ border-color:#dc3545; }
#msa #msa-main .mysp_payment_btn_delete:hover{ background:#bb2d3b !important; border-color:#bb2d3b; }


/*---------------------------------------------------------
  DASHBOARD - INSIGHT
---------------------------------------------------------*/

.msa-card--spaced{ margin-bottom:16px; }
.msa-grid{ margin-bottom:16px; }
.msa-grid--spaced{ margin-bottom:0; }

.msa-stat-body em{
	margin-top:2px;
	font-style:normal;
	font-size:12px;
	color:var(--msa-muted);
}

/* sorotan */
.msa-notes{ margin:0; padding:0; list-style:none; }

.msa-notes li{
	display:flex;
	align-items:flex-start;
	gap:12px;
	margin:0;
	padding:11px 0;
	border-bottom:1px solid var(--msa-line);
}
.msa-notes li:first-child{ padding-top:0; }
.msa-notes li:last-child{ padding-bottom:0; border-bottom:0; }

.msa-note-dot{
	flex:0 0 10px;
	width:10px;
	height:10px;
	margin-top:6px;
	border-radius:50%;
	background:var(--msa-info);
}
.msa-notes li.is-bad  .msa-note-dot{ background:var(--msa-danger); }
.msa-notes li.is-warn .msa-note-dot{ background:#d99a1c; }
.msa-notes li.is-good .msa-note-dot{ background:var(--msa-primary); }

.msa-note-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.msa-note-text strong{ font-size:13.5px; font-weight:600; color:var(--msa-ink); }
.msa-note-text small{ font-size:12.5px; color:var(--msa-muted); }

.msa .msa-notes a{
	flex:0 0 auto;
	font-size:13px;
	font-weight:600;
	color:var(--msa-primary);
	text-decoration:none;
}

/* KPI keuangan */
.msa-kpis{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:16px;
	margin-bottom:16px;
}
.msa-kpi{
	display:flex;
	flex-direction:column;
	gap:2px;
	padding:16px 18px;
	background:var(--msa-surface);
	border:1px solid var(--msa-line);
	border-radius:var(--msa-radius);
	box-shadow:var(--msa-shadow);
	min-width:0;
}
.msa-kpi small{ font-size:12.5px; color:var(--msa-muted); }
.msa-kpi strong{ font-size:22px; font-weight:700; line-height:1.2; color:var(--msa-ink); font-variant-numeric:tabular-nums; }
.msa-kpi em{ font-style:normal; font-size:12px; color:var(--msa-muted); }
.msa-kpi em.is-up{ color:var(--msa-primary); font-weight:600; }
.msa-kpi em.is-down{ color:var(--msa-danger); font-weight:600; }
.msa-kpi.is-danger strong{ color:var(--msa-danger); }
.msa-kpi .msa-progress{ margin-top:8px; }

/* bar horizontal */
.msa-bar{ margin-bottom:12px; }
.msa-bar:last-child{ margin-bottom:0; }
.msa-bar-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; font-size:13px; }
.msa-bar-top span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--msa-text); font-weight:500; }
.msa-bar-top b{ flex:0 0 auto; font-weight:600; color:var(--msa-ink); font-variant-numeric:tabular-nums; text-align:right; }
.msa-bar-top em{ font-style:normal; font-weight:400; font-size:12px; color:var(--msa-muted); margin-left:4px; }
.msa-bar-track{ height:8px; background:var(--msa-line); border-radius:999px; overflow:hidden; }
.msa-bar-track i{ display:block; height:100%; border-radius:999px; }

/* kolom pemasukan */
.msa-columns{ display:flex; align-items:flex-end; gap:10px; height:190px; }
.msa-col{ flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; gap:6px; }
.msa-col-val{ font-size:11.5px; color:var(--msa-muted); white-space:nowrap; }
.msa-col-bar{ flex:1 1 auto; width:100%; display:flex; align-items:flex-end; background:var(--msa-bg); border-radius:8px; overflow:hidden; }
.msa-col-bar i{ display:block; width:100%; background:#9ccfba; border-radius:8px 8px 0 0; }
.msa-col.is-current .msa-col-bar i{ background:var(--msa-primary); }
.msa-col.is-current .msa-col-val{ color:var(--msa-ink); font-weight:600; }
.msa-col-label{ font-size:12px; color:var(--msa-muted); }

/* peringkat */
.msa-rank{ margin:0; padding:0; list-style:none; counter-reset:rank; }
.msa-rank li{ counter-increment:rank; display:flex; align-items:center; gap:12px; margin:0; padding:9px 0; border-bottom:1px solid var(--msa-line); }
.msa-rank li:first-child{ padding-top:0; }
.msa-rank li:last-child{ padding-bottom:0; border-bottom:0; }
.msa-rank li::before{
	content:counter(rank);
	flex:0 0 26px; width:26px; height:26px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--msa-danger-soft); color:var(--msa-danger);
	font-size:12px; font-weight:700;
}
.msa-rank-name{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.msa-rank-name strong{ font-size:13.5px; font-weight:600; color:var(--msa-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msa-rank-name small{ font-size:12px; color:var(--msa-muted); }
.msa-rank b{ flex:0 0 auto; font-weight:700; color:var(--msa-danger); font-variant-numeric:tabular-nums; }

/* daftar fakta */
.msa-facts{ margin:0; padding:0; list-style:none; }
.msa-facts li{ display:flex; justify-content:space-between; gap:12px; margin:0; padding:9px 0; border-bottom:1px solid var(--msa-line); font-size:13.5px; }
.msa-facts li:first-child{ padding-top:0; }
.msa-facts li:last-child{ padding-bottom:0; border-bottom:0; }
.msa-facts span{ color:var(--msa-muted); }
.msa-facts b{ font-weight:600; color:var(--msa-ink); text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width:1024px){
	.msa-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
	.msa-kpis{ gap:10px; }
	.msa-kpi{ padding:14px; }
	.msa-kpi strong{ font-size:18px; }
	.msa-columns{ height:160px; gap:6px; }
	.msa-bar-top{ flex-wrap:wrap; }
	.msa-bar-top span{ white-space:normal; }
}