@tailwind base;
@tailwind components;
@tailwind utilities;

/* === 黃・綠・橘 主題色票 === */
:root {
	/* 主題色 */
	--sun-500: #FFCC33;   /* 黃：主色（標題/重點底） */
	--leaf-600: #2E7D32;   /* 綠：成功/健康/主要正向 */
	--tanger-600: #FF6A00; /* 橘：CTA/互動/點綴 */

	/* 中性色 */
	--bg: #F8FAFC;   /* 淺背景 */
	--card: #FFFFFF;   /* 卡片底 */
	--text: #0F172A;   /* 主要字色 */
	--muted: #475569;   /* 次要字色 */
	--border: #E2E8F0;   /* 邊框 */

	/* 衍生色（自動混色，讓區塊層次更舒服） */
	--sun-100: color-mix(in srgb, var(--sun-500) 18%, white);
	--leaf-100: color-mix(in srgb, var(--leaf-600) 12%, white);
	--tanger-100: color-mix(in srgb, var(--tanger-600) 14%, white);
	--shadow: 0 10px 28px rgba(2, 6, 23, .08);
}

/* Custom Components */
@layer components {
	/* Container */
	.container {
		@apply max-w-7xl mx-auto bg-white rounded-3xl shadow-2xl overflow-hidden;
	}

	/* Header */
	.header {
		background: linear-gradient(to bottom right, var(--sun-500), var(--tanger-600));
		@apply text-white py-10 px-10 text-center shadow-lg;
	}

	.header h1 {
		@apply text-4xl mb-2.5 font-bold;
	}

	.header p {
		@apply text-xl opacity-95;
	}

	/* Content */
	.content {
		@apply p-10;
	}

	/* Controls */
	.controls {
		@apply p-5 bg-gray-50 border-b border-gray-200 flex gap-2.5 flex-wrap items-center justify-between;
	}

	/* Buttons */
	.btn {
		@apply px-5 py-2.5 border-2 border-primary bg-white text-primary rounded-lg cursor-pointer text-base transition-all duration-300 no-underline inline-block;
	}

	.btn:hover {
		@apply bg-primary text-white;
	}

	.btn-primary {
		@apply bg-primary text-white border-primary;
	}

	.btn-primary:hover {
		@apply bg-primary-dark -translate-y-0.5 shadow-lg;
	}

	.btn-secondary {
		@apply bg-secondary text-white border-secondary;
	}

	.btn-secondary:hover {
		@apply bg-gray-600;
	}

	.btn-success {
		@apply bg-success text-white border-success;
	}

	.btn-success:hover {
		@apply bg-green-700;
	}

	.btn-danger {
		@apply bg-danger text-white border-danger;
	}

	.btn-danger:hover {
		@apply bg-red-700;
	}

	.btn-info {
		@apply bg-info text-white border-info;
	}

	.btn-info:hover {
		@apply bg-cyan-600;
	}

	.btn-line {
		@apply bg-line text-white border-line;
	}

	.btn-line:hover {
		@apply bg-green-600;
	}

	/* Form Elements */
	.form-group {
		@apply mb-6;
	}

	.form-group label {
		@apply block mb-2 font-bold text-gray-800 text-lg;
	}

	.form-group input[type="text"],
	.form-group input[type="number"],
	.form-group input[type="date"],
	.form-group input[type="email"],
	.form-group input[type="password"],
	.form-group textarea,
	.form-group select {
		@apply w-full px-4 py-3 border-2 border-gray-200 rounded-lg text-base transition-colors duration-300;
	}

	.form-group input:focus,
	.form-group textarea:focus,
	.form-group select:focus {
		@apply outline-none border-primary;
	}

	.form-group .help-text {
		@apply mt-1 text-sm text-gray-600;
	}

	.checkbox-group {
		@apply flex items-center gap-2.5;
	}

	.checkbox-group input[type="checkbox"] {
		@apply w-5 h-5 cursor-pointer;
	}

	.checkbox-group label {
		@apply mb-0 cursor-pointer;
	}

	/* Alerts */
	.alert {
		@apply px-5 py-4 rounded-lg mb-5;
	}

	.alert.hidden {
		display: none;
	}

	.alert:not(.hidden) {
		@apply block;
	}

	.alert-success {
		background-color: var(--leaf-100);
		color: var(--leaf-600);
		@apply border;
		border-color: var(--leaf-600);
	}

	.alert-error {
		@apply bg-red-100 text-red-800 border border-red-300;
	}

	/* Footer */
	.footer {
		@apply text-center py-8 bg-gray-50 text-gray-600 text-sm;
	}

	.footer a {
		@apply text-primary no-underline mx-2.5;
	}

	.footer a:hover {
		@apply underline;
	}

	/* Common Sections */
	.intro {
		@apply mb-10;
	}

	.intro h2 {
		@apply text-3xl mb-5 text-primary;
	}

	.intro p {
		@apply text-lg leading-relaxed text-gray-700 mb-4;
	}

	.features {
		@apply bg-gray-50 p-8 rounded-2xl mb-10;
	}

	.features h3 {
		@apply text-2xl mb-5 text-primary;
	}

	.features ul {
		@apply list-none pl-0;
	}

	.features li {
		@apply py-2.5 pl-8 relative text-lg text-gray-700;
	}

	.features li:before {
		content: "✓";
		@apply absolute left-0 text-primary font-bold text-xl;
	}

	/* Modal */
	.modal {
		display: none;
		@apply fixed z-[1000] left-0 top-0 w-full h-full overflow-auto bg-black bg-opacity-50 backdrop-blur-sm;
	}

	.modal.active {
		@apply flex items-center justify-center;
	}

	.modal-content {
		@apply bg-white m-auto p-8 rounded-3xl w-[90%] max-w-4xl max-h-[80vh] overflow-y-auto shadow-2xl relative;
	}

	.modal-content.modal-sm {
		@apply max-w-lg;
	}

	.modal-content.modal-md {
		@apply max-w-2xl max-h-[90vh] overflow-y-auto;
	}

	.modal-header {
		@apply flex justify-between items-center mb-5 pb-4 border-b-2 border-gray-200;
	}

	.modal-header h2 {
		@apply text-primary m-0 text-3xl;
	}

	.close {
		@apply text-gray-400 text-3xl font-bold cursor-pointer transition-colors duration-300 float-right;
	}

	.close:hover,
	.close:focus {
		@apply text-black;
	}

	.btn-group {
		@apply flex gap-2.5 mt-5;
	}

	/* Stat Card */
	.stat-card {
		@apply bg-gradient-to-br from-primary-light to-primary-dark rounded-2xl p-6 text-white shadow-lg;
	}

	.stat-card h3 {
		@apply text-lg mb-2.5 opacity-90;
	}

	.stat-card .value {
		@apply text-5xl font-bold mb-1;
	}

	.stat-card .label {
		@apply text-sm opacity-80;
	}

	/* Feature Card */
	.feature-card {
		@apply bg-white border-2 border-gray-200 rounded-2xl p-8 transition-all duration-300 shadow-sm;
	}

	.feature-card:hover {
		@apply border-primary -translate-y-1 shadow-xl;
	}

	.feature-card h4 {
		@apply text-2xl mb-4 text-primary;
	}

	.feature-card p {
		@apply text-lg leading-relaxed text-gray-700 mb-5;
	}

	.feature-grid {
		@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5;
	}

	.stats-grid {
		@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-10;
	}

	/* Endpoint Card */
	.endpoint-card {
		@apply bg-gradient-to-br from-primary-light to-primary-dark rounded-2xl p-6 text-white no-underline block transition-all duration-300 shadow-lg;
	}

	.endpoint-card:hover {
		@apply -translate-y-1 shadow-2xl;
	}

	.endpoint-card h4 {
		@apply text-xl mb-2.5;
	}

	.endpoint-card p {
		@apply text-sm opacity-90 leading-relaxed;
	}

	.endpoint-grid {
		@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5;
	}

	/* Developing Section */
	.developing-section {
		@apply bg-gradient-to-br from-primary-light to-primary-dark rounded-2xl p-16 text-center text-white shadow-xl;
	}

	.developing-section h2 {
		@apply text-5xl mb-5 text-white;
	}

	.developing-section p {
		@apply text-xl opacity-95 leading-relaxed;
	}

	/* User Card */
	.user-card {
		@apply bg-white border-2 border-gray-200 rounded-xl p-5 flex justify-between items-center transition-all duration-300 cursor-pointer;
	}

	.user-card:hover {
		@apply border-primary -translate-y-0.5 shadow-lg;
	}

	.user-info {
		@apply flex-1;
	}

	.user-name {
		@apply text-xl font-bold text-gray-800 mb-1;
	}

	.user-id {
		@apply text-gray-600 text-sm font-mono;
	}

	.user-badges {
		@apply flex gap-2 mt-2;
	}

	.badge {
		@apply inline-block px-2.5 py-1 rounded text-sm font-medium;
	}

	.badge-admin {
		@apply bg-red-700 text-white;
	}

	.badge-public {
		@apply bg-green-600 text-white px-2 py-0.5 rounded text-xs ml-2.5;
	}

	.badge-fake {
		@apply bg-primary text-white px-2 py-0.5 rounded text-xs ml-2.5;
	}

	.badge-admin-custom {
		@apply bg-danger text-white px-2 py-0.5 rounded text-xs ml-2.5;
	}

	/* Comparison Item */
	.comparison-item {
		@apply bg-gray-50 rounded-xl p-5 flex items-center justify-between transition-all duration-200 cursor-pointer;
	}

	.comparison-item:hover {
		@apply -translate-y-0.5 shadow-lg bg-gray-200;
	}

	.comparison-item.current-user {
		@apply border-2 border-primary;
		background-color: var(--sun-100);
	}

	.user-info {
		@apply flex-1;
	}

	.user-name {
		@apply text-xl font-bold text-gray-800 mb-1;
	}

	.week-info {
		@apply text-gray-600 text-sm;
	}

	.change-info {
		@apply text-right;
	}

	.change-percentage {
		@apply text-4xl font-bold mb-1;
	}

	.change-percentage.positive {
		color: var(--leaf-600);
	}

	.change-percentage.negative {
		@apply text-red-600;
	}

	.change-percentage.neutral {
		@apply text-gray-600;
	}

	.change-label {
		@apply text-gray-600 text-sm;
	}

	/* Empty State */
	.empty-state {
		@apply text-center py-16 px-5 text-gray-600;
	}

	.empty-state h2 {
		@apply text-4xl mb-2.5;
	}

	/* Link Status Box */
	.link-status-box {
		@apply rounded-xl p-5 my-5;
	}

	.link-status-box.linked {
		background-color: var(--leaf-100);
		@apply border-2;
		border-color: var(--leaf-600);
	}

	.link-status-box.linked h3 {
		color: var(--leaf-600);
		@apply mb-4 flex items-center gap-2.5;
	}

	.link-status-box.linked p {
		color: var(--leaf-600);
		@apply text-lg my-2.5;
	}

	.link-status-box.not-linked {
		background-color: var(--sun-100);
		@apply border-2 border-warning;
	}

	.link-status-box.not-linked h3 {
		color: var(--sun-500);
		@apply mb-4 flex items-center gap-2.5;
	}

	.link-status-box.not-linked p {
		color: var(--sun-500);
		@apply text-lg my-2.5 font-bold;
	}

	.link-status-box.not-linked .help-text {
		@apply text-gray-600 my-2.5;
	}

	/* Record Form */
	.record-form {
		@apply bg-gray-50 rounded-xl p-6 my-5 border-2 border-primary;
	}

	.record-form h3 {
		@apply text-primary mb-5 flex items-center gap-2.5;
	}

	.form-row {
		@apply grid grid-cols-1 md:grid-cols-2 gap-4;
	}

	.btn-submit {
		@apply px-6 py-3 bg-primary text-white border-none rounded-lg text-base cursor-pointer transition-colors duration-300 flex-1;
	}

	.btn-submit:hover {
		@apply bg-primary-dark;
	}

	.btn-submit:disabled {
		@apply bg-gray-300 cursor-not-allowed;
	}

	.record-item {
		@apply bg-white border-2 border-gray-200 rounded-lg p-4 mb-4;
	}

	.record-item-header {
		@apply flex justify-between items-center mb-2.5;
	}

	.record-item-title {
		@apply m-0 text-primary;
	}

	.remove-record-btn {
		@apply bg-danger text-white border-none rounded px-2.5 py-1 cursor-pointer text-sm;
	}

	.remove-record-btn:hover {
		@apply bg-red-700;
	}

	.record-form-fields {
		@apply grid grid-cols-1 gap-4;
	}

	@media (min-width: 768px) {
		.record-form-fields {
			@apply grid-cols-3;
		}

		.record-form-fields .form-group-full {
			@apply col-span-3;
		}
	}

	/* Section Styles */
	.section {
		@apply mb-10;
	}

	.section-title {
		@apply text-2xl text-primary mb-4 pb-2.5 border-b-2 border-primary;
	}

	.subsection {
		@apply mb-5;
	}

	.subsection-title {
		@apply text-lg text-gray-800 mb-2.5 font-semibold;
	}

	.command-list {
		@apply list-none pl-0;
	}

	.command-list li {
		@apply py-2 pl-6 relative text-gray-700 leading-relaxed;
	}

	.command-list li:before {
		content: "•";
		@apply absolute left-0 text-primary font-bold;
	}

	.command-description {
		@apply bg-gray-50 border-l-4 border-primary p-4 my-2.5 rounded;
	}

	.command-description p {
		@apply my-1 text-gray-700;
	}

	.command-steps {
		background-color: var(--sun-100);
		@apply border-l-4 border-primary p-4 my-2.5 rounded;
	}

	.command-steps ol {
		@apply ml-5 text-gray-700;
	}

	.command-steps li {
		@apply my-1;
	}

	.note-box {
		background-color: var(--sun-100);
		@apply border border-warning rounded-lg p-4 my-5;
	}

	.note-box strong {
		color: var(--sun-500);
	}

	/* Settings Section */
	.settings-section {
		@apply bg-gray-50 rounded-2xl p-8 mt-10;
	}

	.settings-form {
		@apply bg-white rounded-xl p-8 shadow-sm;
	}

	/* Debug Status */
	.debug-status {
		@apply border-2 rounded-xl p-5 mb-8;
	}

	.debug-status h3 {
		@apply mt-0 text-xl;
	}

	.debug-status p {
		@apply my-2.5;
	}

	/* Info Box */
	.info-box {
		background-color: var(--sun-100);
		@apply border-2 border-primary rounded-lg p-4 my-5 text-sm;
	}

	.info-box h3 {
		@apply text-primary mt-0 mb-2.5;
	}

	.info-box p {
		@apply text-gray-800 my-1 leading-relaxed;
	}

	/* Link Code Box */
	.link-code-box {
		background-color: var(--sun-100);
		@apply border-2 border-primary rounded-lg p-4 mt-4 text-center;
	}

	.link-code-box-title {
		@apply text-primary font-bold mb-2.5;
	}

	.link-code-value {
		@apply text-2xl my-4 text-primary tracking-widest;
	}

	/* Help Box */
	.help-box {
		@apply bg-gray-50 border border-gray-200 rounded-lg p-4 mt-4;
	}

	.help-box p {
		@apply text-gray-600 my-2.5;
	}

	.help-box ol {
		@apply text-gray-600 my-2.5 pl-5;
	}

	.help-box li {
		@apply my-1;
	}

	.help-box code {
		@apply bg-white px-2 py-1 rounded;
	}

	.help-box code.small {
		@apply bg-white px-2 py-0.5 rounded text-xs;
	}

	/* User Badge */
	.user-badge {
		@apply text-primary text-xs;
	}

	.user-badge-private {
		@apply text-danger text-xs;
	}

	.user-badge-current {
		@apply text-primary text-xs;
	}

	/* Week Selector */
	.week-selector {
		@apply flex gap-2.5 items-center relative flex-1 min-w-0 my-4;
	}

	.week-selector-label {
		@apply mr-2.5 font-bold whitespace-nowrap;
	}

	.week-scroll-container {
		@apply flex items-center gap-2.5 relative flex-1 min-w-0;
	}

	.week-scroll-wrapper {
		@apply overflow-x-auto overflow-y-hidden scroll-smooth flex-1 min-w-0 max-w-full;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.week-scroll-wrapper::-webkit-scrollbar {
		display: none;
	}

	.week-buttons-container {
		@apply flex gap-2.5 items-center px-1 min-w-max;
	}

	.scroll-arrow {
		@apply bg-primary text-white border-none rounded-full w-9 h-9 cursor-pointer flex items-center justify-center text-lg transition-all duration-300 flex-shrink-0 z-10;
	}

	.scroll-arrow:hover {
		@apply bg-primary-dark scale-110;
	}

	.scroll-arrow:disabled {
		@apply bg-gray-300 cursor-not-allowed opacity-50;
	}

	.scroll-arrow.hidden {
		display: none;
	}

	.week-btn {
		@apply px-5 py-2.5 border-2 border-primary bg-white text-primary rounded-lg cursor-pointer text-base transition-all duration-300 no-underline inline-block whitespace-nowrap flex-shrink-0;
	}

	.week-btn:hover {
		@apply bg-primary text-white;
	}

	.week-btn.active {
		@apply bg-primary text-white;
	}

	/* Records Table */
	.records-table {
		@apply w-full border-collapse bg-white rounded-xl overflow-hidden shadow-md;
	}

	.records-table thead {
		@apply bg-primary text-white;
	}

	.records-table th {
		@apply p-4 text-left font-semibold;
	}

	.records-table td {
		@apply p-4 border-b border-gray-200;
	}

	.records-table tbody tr {
		@apply transition-colors duration-200;
	}

	.records-table tbody tr:hover {
		@apply bg-gray-50;
	}

	.records-table tbody tr.editing {
		background-color: var(--sun-100);
	}

	.records-table tbody tr:last-child td {
		@apply border-b-0;
	}

	.btn-edit:hover {
		@apply bg-primary-dark;
	}

	.btn-delete:hover {
		@apply bg-red-700;
	}

	/* Edit Form */
	.edit-form {
		@apply bg-white border-2 border-primary rounded-lg p-4 my-2.5;
	}

	.edit-form-row {
		@apply grid grid-cols-1 md:grid-cols-2 gap-2.5 mb-2.5;
	}

	.edit-form input,
	.edit-form textarea {
		@apply w-full px-2 py-2 border-2 border-gray-200 rounded text-sm;
	}

	.edit-form-actions {
		@apply flex gap-2.5 mt-2.5;
	}

	.btn-small {
		@apply px-3 py-1.5 border-none rounded cursor-pointer text-sm transition-all duration-300;
	}

	.btn-small.btn-primary {
		@apply bg-primary text-white;
	}

	.btn-small.btn-primary:hover {
		@apply bg-primary-dark;
	}

	.btn-small.btn-danger {
		@apply bg-danger text-white;
	}

	.btn-small.btn-danger:hover {
		@apply bg-red-700;
	}

	.btn-small.btn-secondary {
		@apply bg-secondary text-white;
	}

	.btn-small.btn-secondary:hover {
		@apply bg-gray-600;
	}

	.btn-save {
		@apply bg-success text-white;
	}

	.btn-cancel {
		@apply bg-secondary text-white;
	}

	.badge-success {
		background-color: var(--leaf-100);
		color: var(--leaf-600);
	}

	.badge-info {
		@apply bg-cyan-100 text-cyan-800;
	}

	/* Weekly Data */
	.weekly-data-list {
		@apply grid gap-4;
	}

	.weekly-data-item {
		@apply bg-gray-50 rounded-lg p-4 flex justify-between items-center border-l-4 border-primary;
	}

	.weekly-data-item.current-week {
		background-color: var(--sun-100);
		@apply border-l-primary;
	}

	.weekly-data-week {
		@apply font-bold text-gray-800 text-lg;
	}

	.weekly-data-change {
		@apply text-xl font-bold;
	}

	.weekly-data-change.positive {
		color: var(--leaf-600);
	}

	.weekly-data-change.negative {
		@apply text-red-600;
	}

	.weekly-data-change.neutral {
		@apply text-gray-600;
	}

	/* Card */
	.card {
		@apply border border-gray-200 p-4 mb-4 rounded bg-white;
	}

	.card h3 {
		@apply mt-0 text-primary;
	}

	/* Warning Box */
	.warning-box {
		background-color: var(--sun-100);
		@apply border-2 border-warning rounded-2xl p-8 mb-8;
	}

	.warning-box h3 {
		color: var(--sun-500);
		@apply mt-0;
	}

	.warning-box p {
		color: var(--sun-500);
		@apply my-2.5;
	}

	/* Admin Note Box */
	.admin-note-box {
		@apply mt-2.5 p-2.5 bg-gray-50 rounded border-l-4 border-primary;
	}

	.admin-note-box p {
		@apply m-0 text-gray-600 whitespace-pre-wrap;
	}

	.admin-note-empty {
		@apply text-gray-400 italic;
	}

	/* Info Text */
	.info-text {
		@apply text-gray-600 mb-5;
	}

	/* Code */
	code {
		@apply bg-gray-50 px-1.5 py-0.5 rounded font-mono;
	}

	code.large {
		@apply bg-white px-2.5 py-1.5 rounded text-lg;
	}

	code.small {
		@apply bg-white px-2 py-0.5 rounded text-xs;
	}
}

/* Responsive */
@layer utilities {
	@media (max-width: 768px) {
		body {
			@apply p-2.5;
		}

		.header {
			@apply py-8 px-5;
		}

		.header h1 {
			@apply text-3xl;
		}

		.content {
			@apply p-8 px-5;
		}

		.controls {
			@apply flex-col items-stretch;
		}

		.btn {
			@apply w-full text-center;
		}

		.modal-content {
			@apply w-[95%] p-5;
		}

		.stats-grid,
		.feature-grid,
		.endpoint-grid {
			@apply grid-cols-1;
		}

		.developing-section {
			@apply p-10 px-5;
		}

		.developing-section h2 {
			@apply text-4xl;
		}

		.developing-section p {
			@apply text-lg;
		}

		.user-card {
			@apply flex-col items-start;
		}

		.form-row {
			@apply grid-cols-1;
		}

		.week-selector {
			@apply flex-col w-full flex-1;
		}

		.week-scroll-container {
			@apply w-full min-w-0;
		}

		.week-scroll-wrapper {
			@apply min-w-0;
		}

		.scroll-arrow {
			@apply w-8 h-8 text-base;
		}

		.comparison-item {
			@apply flex-col items-start;
		}

		.change-info {
			@apply text-left w-full mt-2.5;
		}

		.info-box {
			@apply p-2.5 text-sm;
		}

		.link-code-box {
			@apply p-2.5;
		}

		.link-code-value {
			@apply text-xl;
		}

		.help-box {
			@apply p-2.5;
		}

		.help-box ol {
			@apply pl-4;
		}

		.records-table {
			@apply text-sm;
		}

		.records-table th,
		.records-table td {
			@apply p-2.5;
		}

		.records-table th.col-week,
		.records-table td.col-week,
		.records-table th.col-change,
		.records-table td.col-change {
			display: none;
		}

		.records-table th:last-child,
		.records-table td:last-child {
			@apply whitespace-nowrap;
		}

		.btn-edit,
		.btn-delete {
			@apply px-2 py-1 text-xs;
		}
	}
}