html, body {
	margin: 0;
	padding: 0;
	background: #121212;
	color: #e0e0e0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}
main {
	max-width: 1200px;
	margin: 24px auto;
	padding: 0 16px;
}
h1 {
	font-size: 22px;
	margin: 0 0 16px;
	color: #ffffff;
}
table {
	width: 100%;
	border-collapse: collapse;
	background: #1e1e1e;
}
th, td {
	padding: 10px;
	border-bottom: 1px solid #333;
	text-align: left;
	vertical-align: top;
}
th {
	font-weight: 600;
	color: #f5f5f5;
}
tr:hover {
	background: #2a2a2a;
}
.meta {
	color: #aaaaaa;
	font-size: 13px;
}
.badge {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #555;
	border-radius: 999px;
	font-size: 12px;
	background: #2c2c2c;
	color: #f0f0f0;
}
form {
	background: #1e1e1e;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	padding: 16px;
}
.row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
	margin-bottom: 12px;
}
.row.full { grid-template-columns: 1fr; }
label {
	display: block;
	font-size: 13px;
	color: #bbbbbb;
	margin-bottom: 6px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
	width: 100%;
	box-sizing: border-box;
	background: #111;
	color: #eee;
	border: 1px solid #333;
	border-radius: 6px;
	padding: 10px 12px;
	outline: none;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder { color: #777; }
textarea { min-height: 100px; resize: vertical; }
.actions { display: flex; gap: 10px; margin-top: 12px; }
.btn {
	display: inline-block;
	padding: 10px 16px;
	background: #2979ff;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
}
.btn:hover { background: #1565c0; }
.btn.secondary { background: #2c2c2c; color: #e0e0e0; }
.inline { display: flex; align-items: center; gap: 10px; }
checkbox-wrap { display: inline-flex; align-items: center; gap: 8px; }
hr { border: 0; border-top: 1px solid #2a2a2a; margin: 16px 0; }
.help { font-size: 12px; color: #999; }
.topbar {
	background:#1e1e1e;
	color:#e0e0e0;
	border-bottom:1px solid #2a2a2a;
}
.topbar__inner {
	max-width:1200px;
	margin:0 auto;
	padding:10px 16px;
	display:flex;
	align-items:center;
	gap:16px;
}
.brand a {
	color:#e0e0e0;
	text-decoration:none;
	font-weight:700;
	letter-spacing:.2px;
}
.nav__list {
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	gap:6px;
}
.nav__item { margin:0; padding:0; }
.nav__link {
	display:inline-block;
	padding:8px 12px;
	border-radius:8px;
	text-decoration:none;
	color:#e0e0e0;
}
.nav__link:hover { background:#2a2a2a; }
.nav__link.active { background:#333333; }
.row-actions { white-space:nowrap; width:1%; text-align:right; }
.action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	color: #888;
	background: none;
	border: none;
	cursor: pointer;
	vertical-align: middle;
}
.action-btn:hover { background: #2a2a2a; color: #e0e0e0; }
.delete-btn:hover { color: #ff5252; }
.status-paid-btn:hover { color: #66bb6a; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.badge-draft    { border-color: #555; color: #aaa; }
.badge-sent     { border-color: #2979ff; color: #82b1ff; }
.badge-paid     { border-color: #388e3c; color: #66bb6a; }
.badge-overdue  { border-color: #c62828; color: #ef9a9a; }
.badge-canceled { border-color: #444; color: #666; }
.ac-wrap { position: relative; }
.ac-dropdown {
	position: absolute; top: 100%; left: 0; right: 0;
	background: #1e1e1e; border: 1px solid #444; border-top: 0;
	max-height: 220px; overflow-y: auto; z-index: 200;
	border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.ac-item { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.ac-item:hover, .ac-item.ac-active { background: #2a2a2a; color: #fff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
	main { margin: 12px auto; }
	h1 { font-size: 18px; margin-bottom: 12px; }
	h2 { font-size: 16px; }

	/* Nav: logo + logout on top row, nav links scroll below */
	.topbar__inner { flex-wrap: wrap; gap: 0; padding: 8px 12px 0; }
	.brand { padding-bottom: 8px; }
	.nav__link[href="logout.php"], a.nav__link[href="logout.php"] { padding-bottom: 8px; }
	.nav {
		order: 3;
		flex: 0 0 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid #2a2a2a;
		margin: 0 -12px;
		padding: 4px 12px;
	}
	.nav__list { gap: 2px; flex-wrap: nowrap; }
	.nav__link { padding: 7px 10px; font-size: 14px; white-space: nowrap; }

	/* Forms: single column */
	.row { grid-template-columns: 1fr !important; }

	/* Tables: horizontal scroll */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
	/* But let text cells wrap once they're wide enough */
	td, th { white-space: normal; min-width: 80px; }
	.row-actions { white-space: nowrap; }

	/* Buttons full-width in form action bars */
	.actions { flex-direction: column; }
	.actions .btn { text-align: center; }

	/* Stat block on dashboard */
	.stat-val { font-size: 16px; }
}