/* GlobeSQL Panel — shared design system for the whole admin app. */

:root {
	--ink: #1f2933;
	--muted: #64748b;
	--faint: #94a3b8;
	--line: #e2e8f0;
	--paper: #ffffff;
	--bg: #f4f6f9;
	--navy: #142238;
	--navy-2: #1c3255;
	--gold: #b8860b;
	--gold-2: #96690a;
	--blue: #2563eb;
	--blue-2: #1d4ed8;
	--green: #16a34a;
	--green-bg: #dcfce7;
	--amber: #d97706;
	--amber-bg: #fef3c7;
	--red: #dc2626;
	--red-bg: #fee2e2;
	--radius: 12px;
}

* { box-sizing: border-box; }

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

h1, h2, h3, .site-serif {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: 0.01em;
}

a { color: var(--blue); }

/* ---------- Top navigation ---------- */
.site-nav {
	background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.site-nav-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 16px;
}
.site-brand {
	font-family: Georgia, "Times New Roman", serif;
	color: #f5e6c8;
	font-weight: 700;
	font-size: 1.15em;
	padding: 14px 20px 14px 0;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.site-brand .site-brand-sub {
	display: block;
	font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.5em;
	font-weight: 400;
	color: #9fb0c9;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.site-nav-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 2px;
}
.site-nav-links li { margin: 0; }
.site-nav-links a {
	display: block;
	color: #cbd5e1;
	text-decoration: none;
	padding: 16px 14px;
	font-size: 0.92em;
	font-weight: 600;
	border-bottom: 3px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.site-nav-links a:hover { color: #fff; }
.site-nav-links a.active {
	color: #fff;
	border-bottom-color: var(--gold);
}
.site-nav-links li.site-nav-logout { margin-left: auto; }
.site-nav-links li.site-nav-logout a { color: #f0b0b0; }
.site-nav-links li.site-nav-logout a:hover { color: #fff; }

/* ---------- Page shell ---------- */
.site-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 22px 16px 60px;
}
.site-header {
	margin-bottom: 20px;
}
.site-header h1 {
	font-size: 1.55em;
	margin: 0 0 4px;
}
.site-header .site-sub {
	color: var(--muted);
	font-size: 0.95em;
	margin: 0;
}
.site-back {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--blue);
	text-decoration: none;
	font-size: 0.9em;
}
.site-back:hover { text-decoration: underline; }

.site-flash-error, .site-flash-success {
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 0.92em;
}
.site-flash-error { background: var(--red-bg); color: #991b1b; }
.site-flash-success { background: var(--green-bg); color: #166534; }

.site-footer {
	text-align: center;
	color: var(--faint);
	font-size: 0.82em;
	padding: 30px 16px 10px;
}

/* ---------- Stat cards (shared with AMC module) ---------- */
.amc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}
.amc-stat {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.amc-stat .amc-stat-label {
	font-size: 0.78em;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 4px;
}
.amc-stat .amc-stat-value {
	font-size: 1.35em;
	font-weight: 700;
	color: var(--navy);
}
.amc-stat.due .amc-stat-value { color: var(--red); }
.amc-stat.partial .amc-stat-value { color: var(--amber); }
.amc-stat.paid .amc-stat-value { color: var(--green); }

/* ---------- Cards ---------- */
.amc-card, .site-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(16,24,40,0.04);
	margin-bottom: 20px;
	overflow: hidden;
}
.amc-card > .amc-card-body, .site-card > .site-card-body { padding: 20px 22px; }
.amc-card > summary.amc-card-head {
	padding: 14px 20px;
	cursor: pointer;
	font-weight: 600;
	background: #f8fafc;
	border-bottom: 1px solid var(--line);
	list-style: none;
}
.amc-card > summary.amc-card-head::-webkit-details-marker { display: none; }
.amc-card > summary.amc-card-head::before { content: "+ "; color: var(--blue); }
.amc-card[open] > summary.amc-card-head::before { content: "\2212 "; }
.site-card-head {
	padding: 14px 22px;
	font-weight: 700;
	background: #f8fafc;
	border-bottom: 1px solid var(--line);
	color: var(--navy);
	font-family: Georgia, "Times New Roman", serif;
}

/* ---------- Forms ---------- */
.amc-form-grid, .site-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
.amc-field label, .site-field label {
	display: block;
	font-size: 0.8em;
	color: #475569;
	margin-bottom: 4px;
	font-weight: 600;
}
.amc-field input, .amc-field select,
.site-field input, .site-field select, .site-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
	font-size: 0.95em;
	font-family: inherit;
	background: #fff;
}
.amc-field input:focus, .amc-field select:focus,
.site-field input:focus, .site-field select:focus, .site-field textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.amc-btn, .site-btn {
	display: inline-block;
	background: var(--blue);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 7px;
	font-size: 0.92em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.amc-btn:hover, .site-btn:hover { background: var(--blue-2); }
.amc-btn.secondary, .site-btn.secondary {
	background: #fff;
	color: #334155;
	border: 1px solid #cbd5e1;
}
.amc-btn.secondary:hover, .site-btn.secondary:hover { background: #f1f5f9; }
.amc-btn.gold, .site-btn.gold { background: var(--gold); }
.amc-btn.gold:hover, .site-btn.gold:hover { background: var(--gold-2); }
.amc-btn.danger, .site-btn.danger { background: var(--red); }
.amc-btn.danger:hover, .site-btn.danger:hover { background: #b91c1c; }

/* ---------- Toolbar ---------- */
.amc-toolbar, .site-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin-bottom: 14px;
}
.amc-toolbar .amc-field, .site-toolbar .site-field { min-width: 160px; }
.amc-toolbar .amc-field.grow, .site-toolbar .site-field.grow { flex: 1 1 220px; }

/* ---------- Tables ---------- */
.amc-table-scroll, .site-table-scroll { overflow-x: auto; }
table.amc-table, table.site-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
}
table.amc-table th, table.site-table th {
	text-align: left;
	background: #f8fafc;
	color: #475569;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
table.amc-table td, table.site-table td {
	padding: 11px 12px;
	border-bottom: 1px solid #eef2f6;
	vertical-align: middle;
}
table.amc-table tbody tr:hover, table.site-table tbody tr:hover { background: #f8fafc; }
table.amc-table .amc-cust-name, table.site-table .site-row-title { font-weight: 600; color: var(--navy); }
table.amc-table .amc-cust-company, table.site-table .site-row-sub { color: var(--muted); font-size: 0.9em; }
table.amc-table a.amc-link, table.site-table a.site-link, a.site-link, a.amc-link {
	color: var(--blue); text-decoration: none; font-weight: 600; white-space: nowrap;
}
table.amc-table a.amc-link:hover, table.site-table a.site-link:hover, a.site-link:hover, a.amc-link:hover {
	text-decoration: underline;
}

/* ---------- Badges & pills ---------- */
.amc-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
.amc-badge.status-due { background: var(--red); }
.amc-badge.status-partial { background: var(--amber); }
.amc-badge.status-paid { background: var(--green); }
.amc-badge.status-none { background: var(--faint); }
.amc-pill, .site-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
}
.amc-pill.active, .site-pill.active { background: var(--green-bg); color: #166534; }
.amc-pill.expired, .site-pill.expired { background: var(--red-bg); color: #991b1b; }
.amc-pill.registered, .site-pill.registered { background: #dbeafe; color: #1e40af; }
.amc-pill.demo, .site-pill.demo { background: #f1f5f9; color: #475569; }
.site-pill.warn { background: var(--amber-bg); color: #92400e; }

/* ---------- Pagination ---------- */
.amc-pagination, .site-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
	font-size: 0.9em;
	color: #475569;
}
.amc-pages, .site-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.amc-pagination a, .amc-pagination span.current,
.site-pagination a, .site-pagination span.current {
	display: inline-block;
	padding: 6px 11px;
	border-radius: 6px;
	text-decoration: none;
	color: #334155;
	border: 1px solid var(--line);
}
.amc-pagination a:hover, .site-pagination a:hover { background: #f1f5f9; }
.amc-pagination span.current, .site-pagination span.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.amc-pagination span.disabled, .site-pagination span.disabled { color: #cbd5e1; padding: 6px 11px; }

.amc-empty, .site-empty {
	text-align: center;
	color: var(--faint);
	padding: 30px 10px;
}

/* ---------- Login page ---------- */
.login-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 20% 20%, rgba(184,134,11,0.12), transparent 45%),
		linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
	padding: 20px;
}
.login-card {
	background: var(--paper);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	width: 100%;
	max-width: 380px;
	padding: 36px 32px 28px;
	text-align: center;
}
.login-card .login-brand {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 1.5em;
	color: var(--navy);
	margin-bottom: 2px;
}
.login-card .login-brand-sub {
	font-size: 0.78em;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 26px;
}
.login-card .site-field { text-align: left; margin-bottom: 16px; }
.login-card .site-btn { width: 100%; padding: 11px; font-size: 1em; margin-top: 6px; }
.login-card .login-foot {
	margin-top: 22px;
	font-size: 0.78em;
	color: var(--faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.site-nav-inner { flex-direction: column; align-items: flex-start; }
	.site-nav-links { width: 100%; }
	.site-nav-links li.site-nav-logout { margin-left: 0; }

	table.amc-table thead, table.site-table thead { display: none; }
	table.amc-table, table.amc-table tbody, table.amc-table tr, table.amc-table td,
	table.site-table, table.site-table tbody, table.site-table tr, table.site-table td { display: block; width: 100%; }
	table.amc-table tr, table.site-table tr {
		border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 6px 0;
	}
	table.amc-table td, table.site-table td { border-bottom: none; padding: 6px 14px; }
	table.amc-table td::before, table.site-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.72em;
		text-transform: uppercase;
		color: var(--faint);
		margin-bottom: 2px;
	}
}