/**
 * Shared Component Styles
 * 共用元件樣式
 */

/* ==================== 號碼球樣式 ==================== */
.number-ball {
    @apply inline-flex items-center justify-center;
    @apply w-10 h-10 rounded-full;
    @apply font-bold text-sm font-mono;
    @apply shadow-sm transition-all duration-200;
}

.number-ball-default {
    @apply bg-white text-slate-700 border border-slate-200;
}

.number-ball-highlight {
    @apply bg-indigo-600 text-white ring-2 ring-indigo-300;
}

.number-ball-hot {
    @apply bg-amber-500 text-white;
}

.number-ball-cold {
    @apply bg-blue-100 text-blue-700;
}

.number-ball:hover {
    @apply scale-110 shadow-md;
}

/* ==================== 膠囊標籤樣式（尾碰尾組合） ==================== */
.capsule-tag {
    @apply inline-flex items-center;
    @apply px-3 py-1 rounded-full;
    @apply font-mono text-sm font-medium;
    @apply transition-all duration-200;
}

.capsule-tag-default {
    @apply bg-slate-100 text-slate-700;
}

.capsule-tag-highlight {
    @apply bg-indigo-600 text-white;
}

.capsule-tag:hover {
    @apply shadow-md;
}

/* ==================== 遠星數值標籤樣式 ==================== */
.farstar-badge {
    @apply inline-flex items-center justify-center;
    @apply w-8 h-8 rounded-full;
    @apply bg-red-500 text-white;
    @apply font-bold text-xs;
    @apply shadow-sm;
}

.farstar-badge-large {
    @apply w-10 h-10 text-sm;
}

/* ==================== 日期選擇器樣式 ==================== */
.date-picker {
    @apply w-full px-4 py-2;
    @apply bg-white border border-slate-300 rounded-lg;
    @apply text-sm text-slate-700;
    @apply focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
    @apply transition-all duration-200;
}

.date-picker:hover {
    @apply border-slate-400;
}

/* ==================== 表單元件樣式 ==================== */
.form-input {
    @apply w-full px-4 py-2;
    @apply bg-white border border-slate-300 rounded-lg;
    @apply text-sm text-slate-700;
    @apply focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
    @apply transition-all duration-200;
}

.form-input:disabled {
    @apply bg-slate-100 text-slate-400 cursor-not-allowed;
}

.form-input-error {
    @apply border-red-500 focus:ring-red-500 focus:border-red-500;
}

.form-label {
    @apply block text-sm font-medium text-slate-700 mb-2;
}

.form-error {
    @apply text-xs text-red-600 mt-1;
}

.form-select {
    @apply w-full px-4 py-2;
    @apply bg-white border border-slate-300 rounded-lg;
    @apply text-sm text-slate-700;
    @apply focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
    @apply transition-all duration-200;
    @apply cursor-pointer;
}

.form-checkbox {
    @apply w-4 h-4;
    @apply text-indigo-600 border-slate-300 rounded;
    @apply focus:ring-2 focus:ring-indigo-500;
    @apply cursor-pointer;
}

/* ==================== 按鈕樣式 ==================== */
.btn {
    @apply px-4 py-2 rounded-lg;
    @apply font-medium text-sm;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-indigo-600 text-white;
    @apply hover:bg-indigo-500;
    @apply focus:ring-indigo-500;
}

.btn-secondary {
    @apply bg-slate-200 text-slate-700;
    @apply hover:bg-slate-300;
    @apply focus:ring-slate-500;
}

.btn-danger {
    @apply bg-red-600 text-white;
    @apply hover:bg-red-500;
    @apply focus:ring-red-500;
}

.btn-success {
    @apply bg-emerald-600 text-white;
    @apply hover:bg-emerald-500;
    @apply focus:ring-emerald-500;
}

.btn:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* ==================== 分頁切換樣式 ==================== */
.tab-container {
    @apply flex border-b border-slate-200;
}

.tab-item {
    @apply px-4 py-2;
    @apply text-sm font-medium;
    @apply border-b-2 border-transparent;
    @apply text-slate-600;
    @apply cursor-pointer;
    @apply transition-all duration-200;
}

.tab-item:hover {
    @apply text-indigo-600 border-indigo-300;
}

.tab-item-active {
    @apply text-indigo-600 border-indigo-600;
}

.tab-content {
    @apply hidden;
}

.tab-content-active {
    @apply block;
}

/* ==================== 卡片樣式 ==================== */
.card {
    @apply bg-white rounded-xl;
    @apply border border-slate-200;
    @apply shadow-sm;
    @apply transition-shadow duration-200;
}

.card:hover {
    @apply shadow-lg;
}

.card-header {
    @apply px-6 py-4;
    @apply border-b border-slate-200;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4;
    @apply border-t border-slate-200;
    @apply bg-slate-50;
}

/* ==================== 表格樣式 ==================== */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply w-full text-sm text-left;
}

.table thead {
    @apply bg-slate-50 border-b border-slate-200;
    @apply text-slate-500;
}

.table th {
    @apply px-6 py-4 font-semibold;
}

.table tbody {
    @apply divide-y divide-slate-100;
}

.table tr:hover {
    @apply bg-slate-50;
}

.table td {
    @apply px-6 py-4;
}

/* ==================== Loading 樣式 ==================== */
.loading-spinner {
    @apply inline-block;
    @apply w-5 h-5;
    @apply border-2 border-slate-300 border-t-indigo-600;
    @apply rounded-full;
    @apply animate-spin;
}

.loading-overlay {
    @apply fixed inset-0;
    @apply bg-black bg-opacity-50;
    @apply flex items-center justify-center;
    @apply z-50;
}

/* ==================== 提示訊息樣式 ==================== */
.alert {
    @apply px-4 py-3 rounded-lg;
    @apply text-sm;
    @apply mb-4;
}

.alert-success {
    @apply bg-emerald-50 text-emerald-800 border border-emerald-200;
}

.alert-error {
    @apply bg-red-50 text-red-800 border border-red-200;
}

.alert-warning {
    @apply bg-amber-50 text-amber-800 border border-amber-200;
}

.alert-info {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
}

/* ==================== 分頁樣式 ==================== */
.pagination {
    @apply flex items-center gap-2;
}

.pagination-btn {
    @apply px-3 py-1 rounded;
    @apply text-sm font-medium;
    @apply border border-slate-300;
    @apply text-slate-700;
    @apply hover:bg-slate-100;
    @apply transition-all duration-200;
}

.pagination-btn-active {
    @apply bg-indigo-600 text-white border-indigo-600;
}

.pagination-btn:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* ==================== 統計卡片樣式 ==================== */
.stat-card {
    @apply bg-white p-6 rounded-xl;
    @apply border border-slate-200 shadow-sm;
    @apply hover:shadow-lg transition-shadow;
}

.stat-label {
    @apply text-slate-500 text-sm font-medium uppercase tracking-wider;
}

.stat-value {
    @apply text-3xl font-bold text-slate-900 font-mono;
}

.stat-change {
    @apply text-xs font-medium;
}

.stat-change-positive {
    @apply text-emerald-600;
}

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

/* ==================== 響應式工具 ==================== */
@media (max-width: 768px) {
    .number-ball {
        @apply w-8 h-8 text-xs;
    }

    .card-header,
    .card-body,
    .card-footer {
        @apply px-4 py-3;
    }

    .table th,
    .table td {
        @apply px-4 py-3;
    }
}