@import 'tailwindcss';

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

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

@theme {
	--font-sans: 'Inter', 'Noto Sans SC', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

@layer base {
	html {
		height: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	body {
		min-height: 100%;
		font-family: var(--font-sans);
		background: var(--color-surface-50);
		color: var(--color-surface-900);
	}

	::selection {
		background: color-mix(in oklab, var(--color-primary-500) 28%, transparent);
	}

	:focus-visible {
		outline: 2px solid var(--color-primary-500);
		outline-offset: 2px;
	}

	table.data-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875rem;
	}

	table.data-table thead th {
		padding: 0.625rem 0.75rem;
		text-align: left;
		font-weight: 500;
		color: var(--color-surface-500);
		border-bottom: 1px solid var(--color-surface-200);
		white-space: nowrap;
	}

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

	table.data-table tbody tr:hover td {
		background: color-mix(in oklab, var(--color-surface-100) 70%, transparent);
	}

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

@layer components {
	.saas-card {
		border-radius: 0.75rem;
		border: 1px solid var(--color-surface-200);
		background: var(--color-surface-50);
		box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
	}

	.saas-card-pad {
		border-radius: 0.75rem;
		border: 1px solid var(--color-surface-200);
		background: var(--color-surface-50);
		box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
		padding: 1.25rem;
	}

	.saas-page-title {
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--color-surface-900);
	}

	.saas-section-title {
		font-size: 1rem;
		font-weight: 600;
		color: var(--color-surface-900);
	}

	.saas-muted {
		font-size: 0.875rem;
		color: var(--color-surface-500);
	}

	.saas-label {
		display: block;
		margin-bottom: 0.375rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--color-surface-700);
	}

	.saas-help {
		margin-top: 0.375rem;
		font-size: 0.75rem;
		color: var(--color-surface-400);
	}

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

	.saas-stat {
		border-radius: 0.75rem;
		border: 1px solid var(--color-surface-200);
		background: var(--color-surface-50);
		padding: 1rem;
	}

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

	.saas-stat-value {
		margin-top: 0.25rem;
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		color: 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;
	}

	.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-200);
		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-200);
		background: color-mix(in oklab, var(--color-surface-50) 90%, transparent);
		padding: 0 1.5rem;
		backdrop-filter: blur(8px);
	}

	.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.5rem;
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--color-surface-600);
		transition: color 0.15s, background-color 0.15s;
	}

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

	.saas-nav-item[data-active='true'] {
		background: var(--color-primary-100);
		color: var(--color-primary-700);
	}

	.saas-badge {
		display: inline-flex;
		align-items: center;
		border-radius: 0.375rem;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
	}

	.saas-badge-neutral {
		display: inline-flex;
		align-items: center;
		border-radius: 0.375rem;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
		background: var(--color-surface-200);
		color: var(--color-surface-700);
	}

	.saas-badge-primary {
		display: inline-flex;
		align-items: center;
		border-radius: 0.375rem;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
		background: var(--color-primary-100);
		color: var(--color-primary-700);
	}

	.saas-badge-success {
		display: inline-flex;
		align-items: center;
		border-radius: 0.375rem;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
		background: var(--color-success-100);
		color: var(--color-success-700);
	}

	.saas-badge-warning {
		display: inline-flex;
		align-items: center;
		border-radius: 0.375rem;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
		background: var(--color-warning-100);
		color: var(--color-warning-800);
	}

	.saas-badge-error {
		display: inline-flex;
		align-items: center;
		border-radius: 0.375rem;
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
		background: var(--color-error-100);
		color: var(--color-error-700);
	}

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

	.saas-input:focus,
	.saas-select:focus,
	.saas-textarea:focus {
		border-color: var(--color-primary-400);
		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 20%, transparent);
	}

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

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

	.saas-select-trigger:focus-visible,
	.saas-select-trigger[data-state='open'] {
		border-color: var(--color-primary-400);
		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 20%, transparent);
	}

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

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

	.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.5rem;
		border: 1px solid var(--color-surface-200);
		background: var(--color-surface-50);
		box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
		outline: none;
	}

	.saas-select-item {
		display: flex;
		align-items: center;
		border-radius: 0.375rem;
		padding: 0.4rem 0.6rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
		color: var(--color-surface-800);
		cursor: pointer;
		outline: none;
		user-select: none;
	}

	.saas-select-item[data-highlighted] {
		background: color-mix(in oklab, var(--color-primary-500) 12%, transparent);
	}

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

	.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.5rem;
		padding: 0.5rem 0.875rem;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.25rem;
		border: 1px solid transparent;
		cursor: pointer;
		transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
	}

	.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-500);
		color: var(--color-primary-contrast-500, white);
	}

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

	.saas-btn-secondary {
		background: var(--color-secondary-100);
		color: var(--color-secondary-800);
	}

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

	.saas-btn-ghost {
		background: var(--color-surface-100);
		color: var(--color-surface-700);
	}

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

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

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

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

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

	.saas-checkbox:focus-visible {
		outline: none;
		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 20%, transparent);
	}

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

	.saas-switch {
		position: relative;
		display: inline-flex;
		width: 2.5rem;
		height: 1.4rem;
		flex-shrink: 0;
		align-items: center;
		border-radius: 9999px;
		background: var(--color-surface-300);
		padding: 0.125rem;
		cursor: pointer;
		transition: background 0.15s;
	}

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

	.saas-switch:focus-visible {
		outline: none;
		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 20%, transparent);
	}

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

	.saas-switch-thumb {
		display: block;
		width: 1.05rem;
		height: 1.05rem;
		border-radius: 9999px;
		background: white;
		box-shadow: 0 1px 2px rgb(15 23 42 / 0.18);
		transition: transform 0.15s;
		transform: translateX(0);
	}

	.saas-switch[data-state='checked'] .saas-switch-thumb,
	.saas-switch-thumb[data-state='checked'] {
		transform: translateX(1.05rem);
	}

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

	.saas-modal {
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 51;
		width: calc(100% - 2rem);
		max-width: 28rem;
		transform: translate(-50%, -50%);
		border-radius: 1rem;
		border: 1px solid var(--color-surface-200);
		background: var(--color-surface-50);
		padding: 1.5rem;
		box-shadow: 0 20px 40px rgb(15 23 42 / 0.16);
		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: 1rem;
		border: 1px solid var(--color-surface-200);
		background: var(--color-surface-50);
		padding: 2rem;
		text-align: center;
		box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
	}
}