/* 引入圖標樣式 */
@import url('icons.css');

/* 共用樣式 */
:root {
    --primary-color: #4285f4;
    --primary-hover: #357ae8;
    --success-color: #137333;
    --success-bg: #e6f4ea;
    --danger-color: #d93025;
    --danger-bg: #fce8e6;
    --warning-color: #b06000;
    --warning-bg: #fef7e0;
    --border-color: #ddd;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 2px 10px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: var(--spacing-lg);
    background-color: #f5f5f5;
    line-height: 1.6;
}

/* 按鈕樣式 */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

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

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 12px;
}

.btn-full {
    width: 100%;
}

/* 表單樣式 */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: #333;
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 16px;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

/* 卡片樣式 */
.card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
}

.card-body {
    padding: var(--spacing-lg);
}

/* 狀態樣式 */
.status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-pending {
    background-color: var(--warning-bg);
    color: var(--warning-color);
}

.status-paid {
    background-color: var(--success-bg);
    color: var(--success-color);
}

.status-cancelled {
    background-color: var(--danger-bg);
    color: var(--danger-color);
}

/* 訊息樣式 */
.message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin: var(--spacing-md) 0;
}

.message-success {
    background-color: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.message-error {
    background-color: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

/* 載入動畫 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: var(--spacing-sm);
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 響應式設計 */
@media (max-width: 768px) {
    body {
        padding: var(--spacing-sm);
    }
    
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 16px;
    }
    
    .card-body {
        padding: var(--spacing-md);
    }
}

/* 工具類別 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }

.logo-icon {
    background-image: url('data:image/png;base64,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');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}