@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/hamlindigo';

@source './**/*.{html,js,svelte,ts}';
@source '../lib/**/*.{html,js,svelte,ts}';

/* Flat industrial: zero radius, higher-contrast surfaces, CJK-first type */
@theme {
	--font-sans:
		'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Inter', ui-sans-serif, system-ui,
		-apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--radius-none: 0;
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;
	--radius-xl: 0;
	--radius-2xl: 0;
	--radius-3xl: 0;
	--radius-full: 0;
	--radius: 0;
}

@layer base {
	html {
		height: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		font-feature-settings:
			'kern' 1,
			'liga' 1;
		/* Prefer readable CJK metrics over Latin optical sizing */
		text-size-adjust: 100%;
	}

	body {
		min-height: 100%;
		font-family: var(--font-sans);
		font-size: 15px;
		line-height: 1.7;
		letter-spacing: 0.01em;
		/* Slightly cooler industrial surface */
		background: var(--color-surface-100);
		color: var(--color-surface-950, var(--color-surface-900));
		font-variant-east-asian: proportional-width;
	}

	/* CJK headings: no negative tracking, breathing line-height */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 600;
		line-height: 1.45;
		letter-spacing: 0;
		color: var(--color-surface-950, var(--color-surface-900));
	}

	p {
		line-height: 1.75;
	}

	/* Harder focus ring for industrial UI */
	:focus-visible {
		outline: 2px solid var(--color-primary-600);
		outline-offset: 2px;
	}

	::selection {
		background: color-mix(in oklab, var(--color-primary-600) 35%, transparent);
		color: var(--color-surface-950, var(--color-surface-900));
	}

	/* Tables: high-contrast grid, flat */
	table.data-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875rem;
		line-height: 1.6;
	}

	table.data-table thead th {
		padding: 0.625rem 0.75rem;
		text-align: left;
		font-weight: 600;
		color: var(--color-surface-700);
		background: var(--color-surface-100);
		border-bottom: 1px solid var(--color-surface-300);
		white-space: nowrap;
		letter-spacing: 0.02em;
	}

	table.data-table tbody td {
		padding: 0.75rem;
		border-bottom: 1px solid var(--color-surface-200);
		vertical-align: middle;
		color: var(--color-surface-900);
	}

	table.data-table tbody tr:hover td {
		background: var(--color-surface-100);
	}

	table.data-table tbody tr:last-child td {
		border-bottom: none;
	}
}

@layer components {
	.saas-card {
		border-radius: 0;
		border: 1px solid var(--color-surface-300);
		background: var(--color-surface-50);
		box-shadow: none;
	}

	.saas-card-pad {
		border-radius: 0;
		border: 1px solid var(--color-surface-300);
		background: var(--color-surface-50);
		box-shadow: none;
		padding: 1.25rem;
	}

	.saas-page-title {
		font-size: 1.375rem;
		line-height: 1.4;
		font-weight: 700;
		letter-spacing: 0;
		color: var(--color-surface-950, var(--color-surface-900));
	}

	.saas-section-title {
		font-size: 1rem;
		line-height: 1.5;
		font-weight: 600;
		letter-spacing: 0;
		color: var(--color-surface-950, var(--color-surface-900));
	}

	.saas-muted {
		font-size: 0.875rem;
		line-height: 1.65;
		color: var(--color-surface-700);
	}

	.saas-label {
		display: block;
		margin-bottom: 0.375rem;
		font-size: 0.875rem;
		line-height: 1.5;
		font-weight: 600;
		color: var(--color-surface-800);
	}

	.saas-help {
		margin-top: 0.375rem;
		font-size: 0.8125rem;
		line-height: 1.6;
		color: var(--color-surface-600);
	}

	.saas-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.saas-stat {
		border-radius: 0;
		border: 1px solid var(--color-surface-300);
		background: var(--color-surface-50);
		padding: 1rem;
		box-shadow: none;
	}

	.saas-stat-label {
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-surface-600);
	}

	.saas-stat-value {
		margin-top: 0.25rem;
		font-size: 1.5rem;
		line-height: 1.3;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0;
		color: var(--color-surface-950, var(--color-surface-900));
	}

	.saas-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 3rem 1rem;
		text-align: center;
		line-height: 1.7;
	}

	.saas-shell {
		display: flex;
		height: 100vh;
		overflow: hidden;
		background: var(--color-surface-100);
	}

	.saas-sidebar {
		display: flex;
		width: 16rem;
		flex-shrink: 0;
		flex-direction: column;
		border-right: 1px solid var(--color-surface-300);
		background: var(--color-surface-50);
	}

	.saas-main {
		display: flex;
		min-width: 0;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}

	.saas-topbar {
		display: flex;
		height: 3.5rem;
		flex-shrink: 0;
		align-items: center;
		gap: 0.75rem;
		border-bottom: 1px solid var(--color-surface-300);
		background: var(--color-surface-50);
		padding: 0 1.5rem;
		/* flat: no glass */
		backdrop-filter: none;
	}

	.saas-content {
		flex: 1;
		overflow-y: auto;
	}

	.saas-content-inner {
		margin-inline: auto;
		width: 100%;
		max-width: 72rem;
		padding: 1.5rem;
	}

	@media (min-width: 768px) {
		.saas-content-inner {
			padding: 2rem;
		}
	}

	.saas-nav-item {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		border-radius: 0;
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		line-height: 1.5;
		font-weight: 500;
		color: var(--color-surface-700);
		border-left: 2px solid transparent;
		transition:
			color 0.1s,
			background-color 0.1s,
			border-color 0.1s;
	}

	.saas-nav-item:hover {
		background: var(--color-surface-100);
		color: var(--color-surface-950, var(--color-surface-900));
	}

	.saas-nav-item[data-active='true'] {
		background: var(--color-primary-50, var(--color-primary-100));
		color: var(--color-primary-800);
		border-left-color: var(--color-primary-600);
		font-weight: 600;
	}

	.saas-badge {
		display: inline-flex;
		align-items: center;
		border-radius: 0;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.4;
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	.saas-badge-neutral {
		display: inline-flex;
		align-items: center;
		border-radius: 0;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.4;
		font-weight: 600;
		border: 1px solid var(--color-surface-300);
		background: var(--color-surface-100);
		color: var(--color-surface-800);
	}

	.saas-badge-primary {
		display: inline-flex;
		align-items: center;
		border-radius: 0;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.4;
		font-weight: 600;
		border: 1px solid var(--color-primary-300);
		background: var(--color-primary-100);
		color: var(--color-primary-800);
	}

	.saas-badge-success {
		display: inline-flex;
		align-items: center;
		border-radius: 0;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.4;
		font-weight: 600;
		border: 1px solid var(--color-success-300);
		background: var(--color-success-100);
		color: var(--color-success-800);
	}

	.saas-badge-warning {
		display: inline-flex;
		align-items: center;
		border-radius: 0;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.4;
		font-weight: 600;
		border: 1px solid var(--color-warning-300);
		background: var(--color-warning-100);
		color: var(--color-warning-900);
	}

	.saas-badge-error {
		display: inline-flex;
		align-items: center;
		border-radius: 0;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.4;
		font-weight: 600;
		border: 1px solid var(--color-error-300);
		background: var(--color-error-100);
		color: var(--color-error-800);
	}

	.saas-input,
	.saas-select,
	.saas-textarea {
		width: 100%;
		border-radius: 0;
		border: 1px solid var(--color-surface-400);
		background: var(--color-surface-50);
		color: var(--color-surface-950, var(--color-surface-900));
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		line-height: 1.5;
		outline: none;
		transition:
			border-color 0.1s,
			box-shadow 0.1s;
	}

	.saas-input::placeholder,
	.saas-textarea::placeholder {
		color: var(--color-surface-500);
	}

	.saas-input:focus,
	.saas-select:focus,
	.saas-textarea:focus {
		border-color: var(--color-primary-600);
		box-shadow: inset 0 0 0 1px var(--color-primary-600);
	}

	.saas-textarea {
		font-family: var(--font-mono);
		line-height: 1.55;
		resize: vertical;
	}

	.saas-select-trigger {
		display: inline-flex;
		width: 100%;
		align-items: center;
		border-radius: 0;
		border: 1px solid var(--color-surface-400);
		background: var(--color-surface-50);
		color: var(--color-surface-950, var(--color-surface-900));
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		line-height: 1.5;
		outline: none;
		transition:
			border-color 0.1s,
			box-shadow 0.1s;
		cursor: pointer;
		text-align: left;
	}

	.saas-select-trigger:focus-visible,
	.saas-select-trigger[data-state='open'] {
		border-color: var(--color-primary-600);
		box-shadow: inset 0 0 0 1px var(--color-primary-600);
	}

	.saas-select-trigger:disabled,
	.saas-select-trigger[data-disabled] {
		cursor: not-allowed;
		opacity: 0.55;
	}

	.saas-select-trigger [data-placeholder] {
		color: var(--color-surface-500);
	}

	.saas-select-content {
		z-index: 70;
		max-height: min(18rem, var(--bits-select-content-available-height, 18rem));
		width: var(--bits-select-anchor-width);
		min-width: var(--bits-select-anchor-width);
		overflow: hidden;
		border-radius: 0;
		border: 1px solid var(--color-surface-400);
		background: var(--color-surface-50);
		box-shadow: 4px 4px 0 rgb(15 23 42 / 0.12);
		outline: none;
	}

	.saas-select-item {
		display: flex;
		align-items: center;
		border-radius: 0;
		padding: 0.45rem 0.65rem;
		font-size: 0.875rem;
		line-height: 1.5;
		color: var(--color-surface-900);
		cursor: pointer;
		outline: none;
		user-select: none;
	}

	.saas-select-item[data-highlighted] {
		background: var(--color-primary-100);
		color: var(--color-primary-900);
	}

	.saas-select-item[data-selected] {
		color: var(--color-primary-900);
		font-weight: 600;
	}

	.saas-select-item[data-disabled] {
		cursor: not-allowed;
		opacity: 0.45;
	}

	.saas-btn-primary,
	.saas-btn-secondary,
	.saas-btn-ghost,
	.saas-btn-danger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.375rem;
		border-radius: 0;
		padding: 0.5rem 0.875rem;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.01em;
		border: 1px solid transparent;
		cursor: pointer;
		transition:
			background-color 0.1s,
			color 0.1s,
			border-color 0.1s,
			opacity 0.1s;
	}

	.saas-btn-primary:disabled,
	.saas-btn-secondary:disabled,
	.saas-btn-ghost:disabled,
	.saas-btn-danger:disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}

	.saas-btn-primary {
		background: var(--color-primary-600);
		border-color: var(--color-primary-700);
		color: var(--color-primary-contrast-500, white);
	}

	.saas-btn-primary:hover:not(:disabled) {
		background: var(--color-primary-700);
		border-color: var(--color-primary-800);
	}

	.saas-btn-secondary {
		background: var(--color-surface-100);
		border-color: var(--color-surface-400);
		color: var(--color-surface-900);
	}

	.saas-btn-secondary:hover:not(:disabled) {
		background: var(--color-surface-200);
		border-color: var(--color-surface-500);
	}

	.saas-btn-ghost {
		background: transparent;
		border-color: transparent;
		color: var(--color-surface-800);
	}

	.saas-btn-ghost:hover:not(:disabled) {
		background: var(--color-surface-200);
		color: var(--color-surface-950, var(--color-surface-900));
	}

	.saas-btn-danger {
		background: var(--color-error-100);
		border-color: var(--color-error-400);
		color: var(--color-error-800);
	}

	.saas-btn-danger:hover:not(:disabled) {
		background: var(--color-error-200);
		border-color: var(--color-error-500);
	}

	.saas-checkbox {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.1rem;
		height: 1.1rem;
		flex-shrink: 0;
		border-radius: 0;
		border: 1px solid var(--color-surface-500);
		background: var(--color-surface-50);
		color: white;
		cursor: pointer;
		transition:
			background 0.1s,
			border-color 0.1s;
	}

	.saas-checkbox[data-state='checked'] {
		background: var(--color-primary-700);
		border-color: var(--color-primary-700);
	}

	.saas-checkbox:focus-visible {
		outline: none;
		box-shadow:
			0 0 0 2px var(--color-surface-50),
			0 0 0 4px var(--color-primary-600);
	}

	.saas-checkbox[data-disabled] {
		cursor: not-allowed;
		opacity: 0.5;
	}

	/* Square industrial switch (no pill) */
	.saas-switch {
		position: relative;
		display: inline-flex;
		width: 2.5rem;
		height: 1.35rem;
		flex-shrink: 0;
		align-items: center;
		border-radius: 0;
		border: 1px solid var(--color-surface-500);
		background: var(--color-surface-300);
		padding: 0.125rem;
		cursor: pointer;
		transition:
			background 0.1s,
			border-color 0.1s;
	}

	.saas-switch[data-state='checked'] {
		background: var(--color-primary-600);
		border-color: var(--color-primary-700);
	}

	.saas-switch:focus-visible {
		outline: none;
		box-shadow:
			0 0 0 2px var(--color-surface-50),
			0 0 0 4px var(--color-primary-600);
	}

	.saas-switch[data-disabled] {
		cursor: not-allowed;
		opacity: 0.5;
	}

	.saas-switch-thumb {
		display: block;
		width: 1rem;
		height: 1rem;
		border-radius: 0;
		background: white;
		border: 1px solid var(--color-surface-400);
		box-shadow: none;
		transition: transform 0.1s;
		transform: translateX(0);
	}

	.saas-switch[data-state='checked'] .saas-switch-thumb,
	.saas-switch-thumb[data-state='checked'] {
		transform: translateX(1.1rem);
		border-color: var(--color-primary-800);
	}

	.saas-modal-backdrop {
		position: fixed;
		inset: 0;
		z-index: 50;
		background: rgb(2 6 23 / 0.55);
		backdrop-filter: none;
	}

	.saas-modal {
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 51;
		width: calc(100% - 2rem);
		max-width: 28rem;
		transform: translate(-50%, -50%);
		border-radius: 0;
		border: 1px solid var(--color-surface-400);
		background: var(--color-surface-50);
		padding: 1.5rem;
		box-shadow: 6px 6px 0 rgb(15 23 42 / 0.15);
		outline: none;
	}

	.saas-status-panel {
		display: flex;
		min-height: 100vh;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--color-surface-100);
		padding: 1rem;
	}

	.saas-status-card {
		width: 100%;
		max-width: 28rem;
		border-radius: 0;
		border: 1px solid var(--color-surface-400);
		background: var(--color-surface-50);
		padding: 2rem;
		text-align: center;
		box-shadow: 4px 4px 0 rgb(15 23 42 / 0.1);
		line-height: 1.7;
	}
}