:root {
	--bg: #f4f5f7;
	--surface: #ffffff;
	--border: #e1e4e8;
	--text: #1f2328;
	--muted: #6b7280;
	--accent: #2563eb;
	--success: #16a34a;
	--error: #dc2626;
}

* { box-sizing: border-box; }

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

.login-body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 32px;
	width: 320px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.login-box h1 {
	margin: 0 0 8px;
	font-size: 20px;
	text-align: center;
}

.login-box label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
}

.login-box input {
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 14px;
}

.login-box button {
	margin-top: 6px;
	padding: 10px 12px;
	border: none;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.login-box .error {
	background: #fef2f2;
	color: var(--error);
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	margin: 0;
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.topbar h1 {
	font-size: 18px;
	margin: 0;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var(--muted);
}

.topbar-right a {
	color: var(--accent);
	text-decoration: none;
}

.site-tabs {
	display: flex;
	gap: 4px;
	padding: 12px 24px 0;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
}

.site-tabs a {
	padding: 10px 16px;
	text-decoration: none;
	color: var(--muted);
	font-size: 14px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.site-tabs a.active {
	color: var(--accent);
	border-bottom-color: var(--accent);
	font-weight: 600;
}

.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	gap: 12px;
}

.toolbar input {
	flex: 1;
	max-width: 360px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 14px;
}

.toolbar #product-count {
	font-size: 13px;
	color: var(--muted);
	white-space: nowrap;
}

.product-table {
	width: calc(100% - 48px);
	margin: 0 24px 32px;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
}

.product-table th,
.product-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
	text-align: left;
}

.product-table th {
	background: #fafbfc;
	color: var(--muted);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.input-stock {
	padding: 7px 9px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 13px;
	background: #fff;
}

.input-stock.stock-instock {
	color: var(--success);
	border-color: var(--success);
}

.input-stock.stock-outofstock {
	color: var(--error);
	border-color: var(--error);
}

.input-stock.stock-onbackorder {
	color: #b45309;
	border-color: #b45309;
}

.product-table input[type="number"] {
	width: 110px;
	padding: 7px 9px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 14px;
}

.input-qty {
	width: 80px !important;
}

.qty-untracked {
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}

.badge-warn {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	border-radius: 4px;
	background: #fef3c7;
	color: #92400e;
	font-size: 11px;
	white-space: nowrap;
	vertical-align: middle;
}

.btn-save {
	padding: 7px 14px;
	border: none;
	border-radius: 6px;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}

.btn-save:disabled {
	opacity: 0.6;
	cursor: default;
}

.toast {
	position: fixed;
	top: 16px;
	right: 16px;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px;
	color: #fff;
	z-index: 100;
}

.toast-success { background: var(--success); }
.toast-error { background: var(--error); }

/* ==========================================================================
   Mobil uyum
   ========================================================================== */
@media (max-width: 760px) {
	.login-box {
		width: calc(100% - 40px);
		max-width: 320px;
	}

	.topbar {
		padding: 12px 16px;
	}

	.topbar h1 {
		font-size: 16px;
	}

	.topbar-right {
		gap: 10px;
		font-size: 12px;
	}

	.site-tabs {
		padding: 8px 16px 0;
	}

	.site-tabs a {
		padding: 8px 10px;
		font-size: 13px;
	}

	.toolbar {
		flex-direction: column;
		align-items: stretch;
		padding: 12px 16px;
	}

	.toolbar input {
		max-width: none;
	}

	.toolbar #product-count {
		text-align: right;
	}

	.product-table {
		width: calc(100% - 32px);
		margin: 0 16px 24px;
		border: none;
		background: transparent;
	}

	.product-table thead {
		display: none;
	}

	.product-table tbody,
	.product-table tr,
	.product-table td {
		display: block;
		width: 100%;
	}

	.product-table tr {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 10px;
		margin-bottom: 12px;
		padding: 4px 14px;
	}

	.product-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid var(--border);
		font-size: 14px;
	}

	.product-table td:last-child {
		border-bottom: none;
	}

	.product-table td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--muted);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		flex-shrink: 0;
	}

	.product-table td.col-name {
		font-weight: 600;
	}

	.product-table td.col-name::before {
		content: "";
	}

	.product-table input[type="number"],
	.input-stock {
		width: 130px;
	}

	.input-qty {
		width: 90px !important;
	}

	.btn-save {
		width: 100%;
		padding: 10px;
		font-size: 14px;
	}

	.toast {
		left: 16px;
		right: 16px;
		top: auto;
		bottom: 16px;
		text-align: center;
	}
}