:root{
	--primary:#12777d;
	--primary-dark:#0d5c61;
	--primary-light:#e6f4f4;
	--success:#2e9e5b;
	--success-light:#e7f7ee;
	--warning:#e0a512;
	--warning-light:#fdf3dd;
	--danger:#e74c3c;
	--danger-light:#fdecea;
	--text:#2b3a3f;
	--muted:#6b7c80;
	--border:#dfe6e7;
	--bg:#f4f7f7;
	--white:#ffffff;
	--radius:12px;
}

*{box-sizing:border-box;}

body{
	margin:0;
	font-family:"Segoe UI","Prompt",sans-serif;
	background:var(--bg);
	color:var(--text);
}

.page{
	max-width:760px;
	margin:0 auto;
	padding:16px 16px 60px;
}

/* ===== CASE HEADER ===== */
.case-header{
	background:linear-gradient(135deg,var(--primary),var(--primary-dark));
	color:#fff;
	border-radius:var(--radius);
	padding:20px;
	margin-bottom:20px;
}

.case-header-top{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	flex-wrap:wrap;
	gap:10px;
}

.case-no-label{font-size:12px;opacity:.8;}
.case-no{font-size:20px;font-weight:700;}

.case-status-badge{
	background:rgba(255,255,255,.18);
	padding:6px 14px;
	border-radius:999px;
	font-size:13px;
	font-weight:600;
	white-space:nowrap;
}

.case-header-meta{
	display:flex;
	gap:24px;
	margin-top:16px;
	flex-wrap:wrap;
}

.meta-item{display:flex;flex-direction:column;gap:2px;}
.meta-label{font-size:11px;opacity:.75;}
.meta-value{font-size:14px;font-weight:600;}

/* ===== TIMELINE ===== */
.timeline{
	position:relative;
	padding-left:28px;
}

.timeline::before{
	content:"";
	position:absolute;
	left:11px;
	top:6px;
	bottom:6px;
	width:2px;
	background:var(--border);
}

.tl-item{
	position:relative;
	margin-bottom:18px;
}

.tl-dot{
	position:absolute;
	left:-28px;
	top:4px;
	width:24px;
	height:24px;
	border-radius:50%;
	background:var(--white);
	border:2px solid var(--border);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	z-index:1;
}

.tl-item.is-done .tl-dot{
	background:var(--success);
	border-color:var(--success);
	color:#fff;
}

.tl-item.is-active .tl-dot{
	background:var(--white);
	border-color:var(--primary);
	color:var(--primary);
	box-shadow:0 0 0 5px var(--primary-light);
	animation:pulse 1.6s infinite;
}

@keyframes pulse{
	0%{box-shadow:0 0 0 0 rgba(18,119,125,.35);}
	70%{box-shadow:0 0 0 8px rgba(18,119,125,0);}
	100%{box-shadow:0 0 0 0 rgba(18,119,125,0);}
}

.tl-card{
	background:var(--white);
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:16px 18px;
}

.tl-item.is-active .tl-card{
	border-color:var(--primary);
	box-shadow:0 4px 16px rgba(18,119,125,.12);
}

.tl-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:10px;
	flex-wrap:wrap;
}

.tl-title{
	font-size:15px;
	font-weight:700;
	margin:0;
}

.tl-item.is-done .tl-title{color:var(--text);}
.tl-item.is-active .tl-title{color:var(--primary-dark);}

.tl-tag{
	font-size:11px;
	font-weight:600;
	padding:3px 10px;
	border-radius:999px;
	white-space:nowrap;
}

.tl-item.is-done .tl-tag{background:var(--success-light);color:var(--success);}
.tl-item.is-active .tl-tag{background:var(--primary-light);color:var(--primary);}

.tl-meta{
	font-size:12px;
	color:var(--muted);
	margin-top:6px;
}

.tl-note{
	font-size:13px;
	color:var(--muted);
	margin-top:8px;
	line-height:1.6;
}

.tl-pending{
	display:flex;
	align-items:center;
	gap:10px;
	color:var(--muted);
	font-size:13px;
	padding:6px 0;
}

.tl-pending .tl-dot{
	position:static;
	background:var(--white);
	border-style:dashed;
}

/* ===== FINE LIST ===== */
.fine-list{
	margin-top:12px;
	border-top:1px dashed var(--border);
	padding-top:10px;
}

.fine-row{
	display:flex;
	justify-content:space-between;
	font-size:13px;
	padding:4px 0;
}

.fine-row-total{
	display:flex;
	justify-content:space-between;
	font-size:14px;
	font-weight:700;
	padding-top:8px;
	margin-top:6px;
	border-top:1px solid var(--border);
	color:var(--primary-dark);
}

/* ===== PAYMENT ACTION CARD ===== */
.payment-panel{
	margin-top:14px;
	background:var(--primary-light);
	border:1px solid #cfe6e7;
	border-radius:10px;
	padding:16px;
}

.payment-panel-title{
	font-size:13px;
	font-weight:700;
	color:var(--primary-dark);
	margin:10px 0;
	display:flex;
	align-items:center;
	gap:6px;
}

.payment-summary{
	display:flex;
	justify-content:space-between;
	align-items:center;
	background:var(--white);
	border-radius:8px;
	padding:12px 14px;
	margin-bottom:12px;
	flex-wrap:wrap;
	gap:8px;
}

.payment-summary-amount{
	font-size:20px;
	font-weight:800;
	color:var(--primary-dark);
}

.payment-summary-due{
	font-size:12px;
	color:var(--muted);
}

.payment-actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.proof-status{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:12px;
	font-weight:600;
	padding:5px 10px;
	border-radius:999px;
	margin-top:10px;
}

.proof-status.pending{background:var(--warning-light);color:var(--warning);}
.proof-status.approved{background:var(--success-light);color:var(--success);}
.proof-status.rejected{background:var(--danger-light);color:var(--danger);}

/* ===== INSTALLMENT TABLE ===== */
.installment-list{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.installment-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:var(--white);
	border:1px solid var(--border);
	border-radius:8px;
	padding:10px 12px;
	gap:10px;
	flex-wrap:wrap;
}

.installment-row.is-due{
	border-color:var(--primary);
	background:#f0fbfb;
}

.installment-row.is-paid{opacity:.75;}

.installment-info{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:140px;
}

.installment-index{
	font-size:12px;
	color:var(--muted);
}

.installment-amount{
	font-size:15px;
	font-weight:700;
	color:var(--text);
}

.installment-date{
	font-size:12px;
	color:var(--muted);
}

.installment-status{
	font-size:11px;
	font-weight:700;
	padding:3px 10px;
	border-radius:999px;
}

.installment-status.due{background:var(--warning-light);color:var(--warning);}
.installment-status.paid{background:var(--success-light);color:var(--success);}
.installment-status.upcoming{background:#eef1f1;color:var(--muted);}

.installment-row-actions{
	display:flex;
	gap:6px;
	flex-wrap:wrap;
}

.installment-total-bar{
	display:flex;
	justify-content:space-between;
	background:var(--white);
	border-radius:8px;
	padding:10px 14px;
	margin-bottom:12px;
	font-size:13px;
}

.installment-total-bar b{color:var(--primary-dark);}

/* ===== BUTTONS ===== */
.btn{
	padding:9px 16px;
	border-radius:8px;
	border:1px solid transparent;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	transition:.15s;
	display:inline-flex;
	align-items:center;
	gap:6px;
}

.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-primary:disabled{background:#b7cfd0;cursor:not-allowed;}

.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}

.btn-sm{padding:6px 12px;font-size:12px;}
.btn-block{width:100%;justify-content:center;}

/* ===== MODAL ===== */
.modal-overlay{
	position:fixed;inset:0;
	background:rgba(20,30,32,.5);
	display:none;
	align-items:center;justify-content:center;
	padding:16px;
	z-index:100;
}

.modal-overlay.is-open{display:flex;}

.modal-box{
	background:#fff;
	border-radius:14px;
	padding:24px;
	width:100%;
	max-width:420px;
	position:relative;
	max-height:90vh;
	overflow-y:auto;
}

.modal-box-sm{max-width:340px;text-align:center;}

.modal-close{
	position:absolute;
	top:12px;right:14px;
	border:none;background:none;
	font-size:22px;line-height:1;
	color:var(--muted);
	cursor:pointer;
}

.modal-title{margin:0 0 4px;font-size:17px;color:var(--primary-dark);}
.modal-subtitle{margin:0 0 16px;font-size:13px;color:var(--muted);}

.qr-box{
	background:var(--primary-light);
	border-radius:12px;
	padding:16px;
	margin:14px 0;
	display:flex;
	justify-content:center;
}

.qr-box img{width:200px;height:200px;border-radius:6px;background:#fff;}

.qr-amount{margin-bottom:6px;}
.qr-amount-label{display:block;font-size:12px;color:var(--muted);}
.qr-amount-value{display:block;font-size:24px;font-weight:800;color:var(--primary-dark);}
.qr-ref{font-size:12px;color:var(--muted);margin-bottom:10px;}
.qr-hint{font-size:12px;color:var(--muted);margin-bottom:16px;}

/* ===== UPLOAD ===== */
.upload-drop{
	border:2px dashed var(--border);
	border-radius:10px;
	padding:26px 16px;
	text-align:center;
	cursor:pointer;
	transition:.15s;
	margin-bottom:14px;
}

.upload-drop.is-dragover{
	border-color:var(--primary);
	background:var(--primary-light);
}

.upload-drop-icon{font-size:28px;margin-bottom:6px;}
.upload-drop-text{font-size:14px;color:var(--text);}
.upload-drop-link{color:var(--primary);font-weight:600;text-decoration:underline;}
.upload-drop-hint{font-size:12px;color:var(--muted);margin-top:4px;}

.upload-preview-list{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-bottom:16px;
}

.upload-preview-item{
	display:flex;
	align-items:center;
	gap:10px;
	background:var(--bg);
	border-radius:8px;
	padding:8px 10px;
}

.upload-preview-thumb{
	width:42px;height:42px;
	border-radius:6px;
	object-fit:cover;
	background:#ddd;
	flex-shrink:0;
}

.upload-preview-thumb.is-file{
	display:flex;align-items:center;justify-content:center;
	font-size:18px;
}

.upload-preview-name{
	flex:1;
	font-size:13px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.upload-preview-remove{
	border:none;background:none;
	color:var(--danger);
	font-size:18px;
	cursor:pointer;
	flex-shrink:0;
}

/* ===== TOAST ===== */
.toast{
	position:fixed;
	bottom:24px;left:50%;
	transform:translateX(-50%) translateY(20px);
	background:var(--success);
	color:#fff;
	padding:12px 22px;
	border-radius:999px;
	font-size:14px;
	font-weight:600;
	box-shadow:0 4px 14px rgba(0,0,0,.2);
	opacity:0;
	pointer-events:none;
	transition:.25s;
	z-index:200;
}

.toast.is-show{
	opacity:1;
	transform:translateX(-50%) translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width:600px){
	.page{padding:12px 12px 50px;}
	.case-header{padding:16px;}
	.case-no{font-size:17px;}
	.timeline{padding-left:24px;}
	.tl-dot{left:-24px;width:20px;height:20px;font-size:11px;}
	.timeline::before{left:9px;}
	.tl-card{padding:14px;}
	.payment-summary-amount{font-size:17px;}
	.qr-box img{width:170px;height:170px;}
	.installment-row{flex-direction:column;align-items:stretch;}
	.installment-row-actions{width:100%;}
	.installment-row-actions .btn{flex:1;}
}