/*
 * Task 4 - design tokens & component overrides.
 * Loaded AFTER bootstrap.min.css in views/index.php, so this only overrides
 * presentation (colors/spacing/type) - no existing HTML id/class was removed,
 * so JS relying on Bootstrap classes / form field ids keeps working untouched.
 */

:root {
	/* Brand - Hostinger-style violet */
	--color-brand: #5B21B6;
	/* deep violet - navbar, headers, box-header */
	--color-brand-dark: #3B1370;
	/* hover/active states */
	--color-brand-light: #8B5CF6;

	--color-accent: #7C3AED;
	/* bright violet - primary actions (Simpan/Bayar) */
	--color-accent-dark: #6D28D9;

	--color-bg: #F5F3FC;
	/* lavender-white - page background */
	--color-surface: #FFFFFF;
	/* cards/tables */
	--color-border: #E3DCF7;

	--color-text: #251B3D;
	--color-text-muted: #6B6280;

	/* Status - used for badges (Lunas/Belum Bayar/Sisa, Stok Aman/Menipis, aging piutang) */
	--color-success: #2E7D32;
	--color-success-bg: #E8F5E9;
	--color-warning: #B26A00;
	--color-warning-bg: #FFF3E0;
	--color-danger: #C62828;
	--color-danger-bg: #FDECEA;
	--color-info: #1565C0;
	--color-info-bg: #E3F2FD;

	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--radius: 6px;
}

body:not(.bg) {
	background: var(--color-bg) !important;
	animation: none !important;
	color: var(--color-text);
	font-family: var(--font-base);
}

body {
	font-family: var(--font-base);
}

/* ---- Navbar ---- */
.grad-color,
nav.navbar {
	background: var(--color-brand) !important;
	background-image: none !important;
}

nav.navbar .nav-link,
nav.navbar .navbar-brand {
	color: #ECEFF1 !important;
}

nav.navbar .dropdown-menu {
	border: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

nav.navbar .dropdown-item:active,
nav.navbar .dropdown-item:hover {
	background-color: var(--color-bg);
	color: var(--color-brand-dark);
}

nav.navbar>a {
	color: #ECEFF1 !important;
}

/* ---- Buttons ---- */
.btn-primary,
.btn-success {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}

.btn-danger {
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-primary {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

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

.btn-info {
	background-color: var(--color-brand-light);
	border-color: var(--color-brand-light);
	color: #fff;
}

.btn-info:hover,
.btn-info:focus {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}

.btn-warning {
	background-color: var(--color-warning);
	border-color: var(--color-warning);
	color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
	background-color: #8f5100;
	border-color: #8f5100;
	color: #fff;
}

/* ---- Cards ---- */
.card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

thead {
	background: var(--color-brand) !important;
}

thead th {
	color: #ECEFF1 !important;
	border-color: var(--color-brand) !important;
	font-weight: 600;
	white-space: nowrap;
}

/* ---- Box header - title + action buttons, was misaligned (float vs inline h3) ---- */
.box-header {
	background: var(--color-brand) !important;
	color: #ECEFF1;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius) var(--radius) 0 0;
}

.box-header .alert {
	margin: 0 0 var(--space-3);
}

.box-header .box-title,
.box-header .col-md-12 {
	margin: 0;
}

.box-header .box-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2);
	color: #ECEFF1 !important;
	font-size: 20px;
	font-weight: 600;
}
/* Many add/edit form headers hardcode style="color:#424242" inline on
   .box-title (dark text meant for a white bar) - !important above beats it.
   Plain <a> icons (back/refresh) in the same bar inherit the same dark
   color by default since they carry no class - force them light too. */
.box-header .box-title a:not(.btn) {
	color: #ECEFF1 !important;
}

.box-header .box-title .float-right {
	float: none !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.box-header .btn-outline-primary {
	color: #ECEFF1;
	border-color: rgba(236, 239, 241, .55);
}

.box-header .btn-outline-primary:hover {
	background-color: rgba(236, 239, 241, .15);
	border-color: #ECEFF1;
	color: #ECEFF1;
}

/* ---- Tables - breathing room + zebra striping over the old dense default ---- */
table.table td,
table.table th {
	padding: 10px 12px;
	vertical-align: middle;
}

table.table tbody tr:nth-of-type(odd) {
	background-color: rgba(91, 33, 182, 0.04);
}

table.table-bordered,
table.table-bordered td,
table.table-bordered th {
	border-color: var(--color-border);
}

.table-responsive {
	overflow-x: auto;
}

/* ---- Status badges - reused for Lunas/Belum Bayar/Sisa, Stok Aman/Menipis, aging piutang ---- */
.badge-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.badge-status-success {
	background: var(--color-success-bg);
	color: var(--color-success);
}

.badge-status-warning {
	background: var(--color-warning-bg);
	color: var(--color-warning);
}

.badge-status-danger {
	background: var(--color-danger-bg);
	color: var(--color-danger);
}

.badge-status-info {
	background: var(--color-info-bg);
	color: var(--color-info);
}

/* ---- Dashboard summary cards ---- */
.summary-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.summary-card .summary-label {
	color: var(--color-text-muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.summary-card .summary-value {
	color: var(--color-brand-dark);
	font-size: 28px;
	font-weight: 700;
}