:root {
	--bg-base: #f6f2e7;
	--bg-layer: #fcfaf4;
	--ink: #22201b;
	--ink-soft: #585245;
	--line: #d6ccb8;
	--accent: #0f766e;
	--accent-hover: #0b5f59;
	--accent-ink: #f4fffd;
	--danger: #b42318;
	--danger-hover: #8f1f16;
	--table-head: #ece4d3;
	--shadow-soft: 0 10px 28px rgba(24, 21, 14, 0.1);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--ink);
	font-family: "Trebuchet MS", "Gill Sans", "Franklin Gothic Book", sans-serif;
	background:
		radial-gradient(circle at 0% 0%, #fff9ec 0%, transparent 40%),
		radial-gradient(circle at 100% 0%, #efe4cc 0%, transparent 32%),
		linear-gradient(155deg, #f4efdf 0%, #ece4d0 100%);
	min-height: 100vh;
}

a {
	color: #0e4e89;
}

h1, h2, h3 {
	font-family: "Palatino Linotype", "Book Antiqua", serif;
	letter-spacing: 0.2px;
	margin-top: 0;
}

.top-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 20px;
	background: linear-gradient(110deg, #2f2920 0%, #1d1a14 100%);
	color: #f8f2e6;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.nav-brand {
	font-family: "Palatino Linotype", "Book Antiqua", serif;
	font-size: 1.1rem;
	font-weight: 700;
	white-space: nowrap;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.top-nav a {
	color: #f8f2e6;
	text-decoration: none;
	border: 1px solid transparent;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.95rem;
}

.top-nav a:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
}

.nav-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.datetime-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.86rem;
	color: #ddd2bc;
}

.datetime-label {
	opacity: 0.9;
}

main {
	padding: 20px;
}

.page-shell,
.agent-page,
.mpos-page,
.user-page,
.dashboard-page {
	max-width: 100%;
}

.panel {
	padding: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 251, 241, 0.84) 100%);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-soft);
	margin-bottom: 12px;
}

.table-controller,
.agent-table-controller {
	margin-bottom: 12px;
}

.filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
}

.filter-label {
	font-weight: 700;
}

.filter-option {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

button,
input[type="submit"],
input[type="button"] {
	border: 0;
	border-radius: 10px;
	padding: 8px 12px;
	font-weight: 700;
	color: var(--accent-ink);
	background: linear-gradient(180deg, #159087 0%, var(--accent) 100%);
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(15, 118, 110, 0.28);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background: linear-gradient(180deg, #11756d 0%, var(--accent-hover) 100%);
}

button[disabled],
input[disabled] {
	cursor: not-allowed;
	opacity: 0.55;
	box-shadow: none;
}

input,
select,
textarea {
	background: #fffdf8;
	border: 1px solid #c8bda7;
	border-radius: 10px;
	padding: 7px 10px;
	color: var(--ink);
}

.table-shell,
.agent-table-shell,
.payroll-table-shell,
.user-table-shell {
	width: 100%;
	max-width: 100%;
	max-height: 66vh;
	overflow-x: auto;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg-layer);
	box-shadow: var(--shadow-soft);
}

.admin-table,
.agent-table,
.mpos-table,
.payroll-table,
.user-table {
	width: max-content;
	min-width: 1180px;
	border-collapse: collapse;
	background: #fff;
}

.admin-table th,
.admin-table td,
.agent-table th,
.agent-table td,
.mpos-table th,
.mpos-table td,
.payroll-table th,
.payroll-table td,
.user-table th,
.user-table td {
	white-space: nowrap;
	vertical-align: top;
	border: 1px solid #ddd3be;
	padding: 8px 10px;
}

.admin-table thead th,
.agent-table thead th,
.mpos-table thead th,
.payroll-table thead th,
.user-table thead th {
	position: sticky;
	top: 0;
	background: var(--table-head);
	z-index: 2;
}

.admin-table tbody tr:nth-child(even),
.agent-table tbody tr:nth-child(even),
.mpos-table tbody tr:nth-child(even),
.payroll-table tbody tr:nth-child(even),
.user-table tbody tr:nth-child(even) {
	background: #fcf9f1;
}

.pager-row {
	margin-top: 20px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.actions-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.inline-form {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.import-form {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.settings-form p {
	margin: 0 0 10px;
}

.settings-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 560px;
}

.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="number"],
.settings-form input[type="date"],
.settings-form select {
	width: min(100%, 560px);
}

.member-list {
	padding-top: 16px;
	line-height: 1.6;
}

.json-block {
	max-width: 100%;
	max-height: 46vh;
	overflow: auto;
	padding: 10px;
	background: #151a1f;
	color: #d9f4e8;
	border: 1px solid #293342;
	border-radius: 10px;
}

.back-row {
	margin-top: 20px;
}

.terminal-container {
	background-color: #111;
	border-radius: 10px;
	padding: 10px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: auto;
}

.payroll-log-shell {
	max-height: 52vh;
}

#log-window {
	color: #00ff88;
	font-family: "Consolas", "Lucida Console", monospace;
	font-size: 14px;
	white-space: pre-wrap;
}

.dashboard-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.metric-card p {
	font-size: 1.05rem;
	margin: 0;
	color: var(--ink-soft);
}

#reset-password-dialog,
#add-user-dialog {
	backdrop-filter: blur(2px);
}

#reset-password-dialog > div,
#add-user-dialog > div {
	border: 1px solid var(--line);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.log-info { color: #0d6efd; }
.log-warning { color: #ffc107; }
.log-error { color: #dc3545; font-weight: bold; }
.log-success { color: #198754; }
.log-default { color: #333; }

@media (max-width: 1024px) {
	.nav-right {
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
	}

	.datetime-wrap {
		font-size: 0.8rem;
	}
}

@media (max-width: 900px) {
	main {
		padding: 12px;
	}

	.top-nav {
		flex-wrap: wrap;
		padding: 12px;
		gap: 10px;
	}

	.nav-links {
		order: 3;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.top-nav a {
		text-align: center;
	}

	.nav-right {
		margin-left: 0;
		align-items: flex-start;
	}

	.table-shell,
	.agent-table-shell,
	.mpos-table-shell,
	.payroll-table-shell,
	.user-table-shell {
		max-height: 58vh;
	}

	.admin-table,
	.agent-table,
	.mpos-table,
	.payroll-table,
	.user-table {
		min-width: 980px;
	}

	.settings-form label {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.nav-brand {
		font-size: 1rem;
	}

	.nav-links {
		grid-template-columns: 1fr;
	}

	.inline-form {
		display: flex;
		width: 100%;
	}

	.multi-row-form {
		display: block;
	}

	.inline-form input,
	.inline-form select,
	.inline-form button {
		width: 100%;
	}

	.actions-row {
		flex-direction: column;
		align-items: stretch;
	}

	button,
	input[type="submit"],
	input[type="button"] {
		width: 100%;
	}
}