:root {
	--brand-primary: #0a3d62;
	--brand-primary-dark: #072a44;
	--brand-accent: #f6b93b;
	--brand-ink: #1a1a1a;
	--brand-bg: #f2f5f7;
	--brand-border: #d8e0e6;
}

* { box-sizing: border-box; }

body {
	font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	background: var(--brand-bg);
	color: var(--brand-ink);
	margin: 0;
}

/* ---- Login / paused pages ---- */
.login-body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 1rem;
	background: linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.login-card {
	background: #fff;
	border: 1px solid var(--brand-border);
	border-radius: 10px;
	padding: 2rem;
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.paused-card { text-align: center; }
.paused-card p { color: #555; line-height: 1.5; margin: 0; }

@media (max-width: 480px) {
	.login-body { padding: 0; align-items: stretch; }
	.login-card {
		max-width: none;
		min-height: 100vh;
		min-height: 100dvh;
		border-radius: 0;
		border: none;
		justify-content: center;
		padding: 2rem 1.5rem;
	}
}

.login-card h1 { font-size: 1.3rem; margin: 0 0 0.5rem; text-align: center; color: var(--brand-primary); }
.login-logo {
	display: block;
	max-width: 160px;
	max-height: 100px;
	margin: 0 auto 0.5rem;
}
.login-card label { font-size: 0.85rem; color: #555; }
.login-card input {
	padding: 0.6rem;
	border: 1px solid var(--brand-border);
	border-radius: 6px;
	font-size: 1rem;
}
.login-card button,
.app-shell button,
.btn {
	background: var(--brand-primary);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.55rem 1rem;
	cursor: pointer;
	font-size: 0.9rem;
}
.login-card button:hover,
.app-shell button:hover,
.btn:hover { background: var(--brand-primary-dark); }
.btn.secondary { background: #7f8c8d; }
.btn.secondary:hover { background: #636e72; }
.btn.accent { background: var(--brand-accent); color: #1a1a1a; }
.btn.accent:hover { background: #e0a52e; }
.btn.danger { background: #c0392b; }
.btn.danger:hover { background: #962d21; }
.btn.small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.error { color: #c0392b; margin: 0; font-size: 0.9rem; }

/* ---- App shell ---- */
.app-shell {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem;
}

.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.app-header .brand { display: flex; align-items: center; gap: 0.6rem; }
.app-header img { max-height: 36px; }
.app-header h1 { font-size: 1.25rem; margin: 0; color: var(--brand-primary); }
.app-header a { color: var(--brand-primary); text-decoration: none; font-size: 0.9rem; }

.tabs {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	margin-bottom: 1.25rem;
	padding-bottom: 0.25rem;
}

.tab-btn {
	appearance: none;
	-webkit-appearance: none;
	background: #eef2f6;
	border: none;
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	font-size: 0.9rem;
	color: var(--brand-primary);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn:hover { background: #dde6ee; }
.tab-btn.active {
	background: var(--brand-primary);
	color: #fff;
	font-weight: 600;
}
.tab-btn.active:hover { background: var(--brand-primary); }

.panel { display: none; }
.panel.active { display: block; }
.hidden { display: none !important; }

.card {
	background: #fff;
	border: 1px solid var(--brand-border);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.1rem;
}

.card h2 { font-size: 1rem; margin: 0 0 0.75rem; color: var(--brand-primary); }

.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }

label { display: block; font-size: 0.8rem; color: #555; margin-bottom: 0.2rem; }

select, input, textarea {
	width: 100%;
	padding: 0.45rem 0.55rem;
	border: 1px solid var(--brand-border);
	border-radius: 6px;
	font-size: 0.9rem;
	font-family: inherit;
}

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--brand-border); }
th { color: #555; font-weight: 600; }
tr:hover td { background: #f7fafc; }

.list-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.badge {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: #95a5a6;
}
.badge.scheduled, .badge.draft { background: #95a5a6; }
.badge.sent { background: #2980b9; }
.badge.accepted, .badge.completed, .badge.paid { background: #27ae60; }
.badge.rejected, .badge.cancelled { background: #c0392b; }
.badge.open { background: #27ae60; }
.badge.closed { background: #95a5a6; }

.items-editor { margin-bottom: 0.75rem; }
.item-row { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; align-items: center; }
.item-row input { flex: 1; }
.item-row input.qty, .item-row input.price { max-width: 100px; }

.muted { color: #777; font-size: 0.85rem; }
.hint { color: #777; font-size: 0.8rem; margin-top: 0.3rem; }

/* ---- Support tickets (chat threads) ---- */
.ticket-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--brand-border);
	cursor: pointer;
}
.ticket-list-item:hover { background: #f7f7f7; }
.ticket-list-item .ticket-subject { font-weight: 600; font-size: 0.9rem; }
.ticket-list-item .ticket-meta { font-size: 0.75rem; color: #777; margin-top: 0.15rem; }

.ticket-thread-messages {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 50vh;
	overflow-y: auto;
	margin-top: 0.75rem;
}
.ticket-bubble {
	max-width: 75%;
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	font-size: 0.9rem;
}
.ticket-bubble.client { align-self: flex-end; background: var(--brand-primary); color: #fff; }
.ticket-bubble.admin { align-self: flex-start; background: #eee; color: var(--brand-ink); }
.ticket-bubble .ticket-bubble-meta { font-size: 0.7rem; opacity: 0.75; margin-top: 0.25rem; }
.ticket-bubble img { max-width: 100%; border-radius: 6px; margin-top: 0.4rem; display: block; }

@media (max-width: 640px) {
	table, thead, tbody, th, td, tr { display: block; }
	thead { display: none; }
	tr { border-bottom: 2px solid var(--brand-border); padding: 0.5rem 0; }
	td { border: none; padding: 0.2rem 0; }
	td::before { content: attr(data-label) ": "; font-weight: 600; color: #555; }
	.ticket-bubble { max-width: 92%; }
}