/* Schetovoden Agent — shared shell + navbar (dark navy/cyan theme). */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	min-height: 100vh;
	background: linear-gradient(180deg, #06182e 0%, #0a2540 100%);
	color: #ffffff;
}

a { color: #00d4ff; text-decoration: none; }
a:hover { color: #33ddff; }

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #0a2540;
	border-bottom: 1px solid rgba(0, 212, 255, 0.15);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.navbar-inner {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1.5em;
	padding: 0.5em 1em;
	flex-wrap: wrap;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-decoration: none;
	margin-right: 0.5em;
}
.brand:hover { color: #ffffff; }
.brand-logo { height: 36px; width: auto; border-radius: 4px; }
.brand-name { font-size: 1em; }

.nav-links {
	display: flex;
	align-items: center;
	gap: 0.25em;
	flex-wrap: wrap;
}

.nav-links a {
	color: #a0b8c8;
	text-decoration: none;
	font-size: 0.9em;
	padding: 0.45em 0.7em;
	border-radius: 6px;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.nav-links a:hover {
	color: #ffffff;
	background: rgba(0, 212, 255, 0.1);
}
.nav-links a.active {
	color: #00d4ff;
	background: rgba(0, 212, 255, 0.14);
	border: 1px solid rgba(0, 212, 255, 0.3);
}

/* ── Nav dropdown (031: Reports → Payment Advice / Documents) ────── */
.nav-dropdown {
	position: relative;
	display: inline-block;
}
.nav-dropdown-trigger {
	background: transparent;
	color: #a0b8c8;
	border: none;
	font-size: 0.9em;
	padding: 0.45em 0.7em;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
}
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger {
	color: #ffffff;
	background: rgba(0, 212, 255, 0.1);
}
.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 11em;
	background: #0a2540;
	border: 1px solid rgba(0, 212, 255, 0.25);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	display: none;
	flex-direction: column;
	padding: 0.3em 0;
	z-index: 110;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
	display: flex;
}
.nav-dropdown-menu a {
	display: block;
	padding: 0.5em 1em;
	border-radius: 0;
	white-space: nowrap;
}
.nav-dropdown-menu a:hover {
	background: rgba(0, 212, 255, 0.1);
}

.logout-form { margin-left: auto; }
.logout-btn {
	padding: 0.45em 1.1em;
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 0.85em;
	cursor: pointer;
	transition: all 0.15s ease;
}
.logout-btn:hover {
	border-color: rgba(255, 255, 255, 0.45);
	color: #a0b8c8;
}

.nav-toggle {
	display: none;
	margin-left: auto;
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 1.1em;
	padding: 0.3em 0.7em;
	cursor: pointer;
}

/* ── Page shell ─────────────────────────────────────────────────── */
.page {
	padding: 2em 1em 3em;
	display: flex;
	justify-content: center;
}

.card { width: 100%; margin: 0 auto; }
.card.narrow { max-width: 600px; }
.card.medium { max-width: 700px; }
.card.wide { max-width: 900px; }
.card.xwide { max-width: 1100px; }

/* ── Headings ───────────────────────────────────────────────────── */
h1 { font-size: 1.5em; margin-bottom: 1em; color: #ffffff; }
h2 { font-size: 1.1em; margin: 1.5em 0 0.5em; color: #00d4ff; }
h3 { font-size: 1em; margin: 1em 0 0.5em; color: #00d4ff; }

/* ── Buttons ────────────────────────────────────────────────────── */
button {
	padding: 0.6em 1.2em;
	background: #00d4ff;
	color: #06182e;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.95em;
}
button:hover { background: #33ddff; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.secondary {
	background: transparent;
	color: #00d4ff;
	border: 1px solid rgba(0, 212, 255, 0.3);
	box-shadow: none;
}
button.secondary:hover { background: rgba(0, 212, 255, 0.1); }

/* ── Forms ──────────────────────────────────────────────────────── */
form { margin: 1em 0; }
label { display: block; margin: 0.8em 0 0.3em; color: #a0b8c8; }

input[type="text"],
input[type="date"],
input[type="password"],
input[type="file"],
select {
	display: block;
	margin-bottom: 1em;
	width: 100%;
	padding: 0.5em;
	background: rgba(0, 212, 255, 0.05);
	color: #ffffff;
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 6px;
	box-sizing: border-box;
}
input[type="date"] { color-scheme: dark; }
select option { color: #0d1b2a; background: #ffffff; }

input[type="file"] { color: #a0b8c8; }
input[type="file"]::file-selector-button {
	padding: 0.5em 1em;
	background: rgba(0, 212, 255, 0.15);
	color: #00d4ff;
	border: 1px solid rgba(0, 212, 255, 0.3);
	border-radius: 6px;
	cursor: pointer;
	margin-right: 0.8em;
	font-size: 0.95em;
}
input[type="file"]::file-selector-button:hover {
	background: rgba(0, 212, 255, 0.25);
}

/* ── Tables ─────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
th, td {
	padding: 0.5em 0.7em;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.9em;
	vertical-align: top;
}
th {
	color: #6a8090;
	font-size: 0.8em;
	text-transform: uppercase;
}
tr:hover { background: rgba(0, 212, 255, 0.03); }

/* ── Utility ────────────────────────────────────────────────────── */
.hint { color: #6a8090; font-size: 0.9em; margin: 0.5em 0; }
.error {
	color: #ff6b6b;
	background: rgba(255, 80, 80, 0.08);
	border: 1px solid rgba(255, 80, 80, 0.2);
	border-radius: 6px;
	padding: 0.8em;
	margin-bottom: 1em;
}

.success {
	color: #4ade80;
	background: rgba(74, 222, 128, 0.08);
	border: 1px solid rgba(74, 222, 128, 0.2);
	border-radius: 6px;
	padding: 0.8em;
	margin-bottom: 1em;
}

.warning {
	background: rgba(255, 165, 0, 0.1);
	border: 1px solid rgba(255, 165, 0, 0.3);
	border-radius: 6px;
	padding: 0.8em;
	margin-bottom: 1em;
}
.warning p { color: #ffaa00; margin: 0.3em 0; }

button.danger-btn {
	background: #f5b301;
	color: #06182e;
	border: 1px solid #f5b301;
}
button.danger-btn:hover { background: #ffd166; }

/* ── Modal dialog (native <dialog>) ──────────────────────────────── */
dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	background: #0a2540;
	color: #ffffff;
	border: 1px solid rgba(0, 212, 255, 0.25);
	border-radius: 8px;
	padding: 1.2em;
	max-width: 420px;
	width: 90%;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}
.dialog-actions {
	display: flex;
	gap: 0.6em;
	margin-top: 1em;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.navbar-inner { gap: 0.5em; }
	.nav-toggle { display: inline-block; }
	.nav-links {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		padding: 0.5em 0;
	}
	.nav-links.open { display: flex; }
	.nav-links a { padding: 0.6em 0.75em; }
	.nav-dropdown { display: block; }
	.nav-dropdown-trigger { width: 100%; text-align: left; padding: 0.6em 0.75em; }
	.nav-dropdown-menu {
		position: static;
		display: flex;
		box-shadow: none;
		border: none;
		min-width: 0;
		padding: 0 0 0 0.75em;
	}
	.logout-form { margin-left: 0; }
	.logout-btn { width: 100%; }
}