/**
 * 後台管理 - 按鈕樣式
 * Admin Button Styles
 * 黑金/白金主題 (Black-Gold / White-Gold Theme)
 */

/* ==================== 按鈕樣式 ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* 按鈕光澤效果 */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #d4a520 0%, #b8860b 50%, #8b6914 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 165, 32, 0.35), 0 0 20px rgba(255, 215, 0, 0.15);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #f5c542 0%, #d4a520 50%, #b8860b 100%);
    transform: translateY(-0.125rem);
    box-shadow: 0 8px 25px rgba(212, 165, 32, 0.45), 0 0 35px rgba(255, 215, 0, 0.25);
}

.light-theme .btn-primary {
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.35), 0 0 20px rgba(184, 134, 11, 0.15);
}

.light-theme .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(184, 134, 11, 0.4), 0 0 35px rgba(212, 165, 32, 0.2);
}

.btn-secondary {
    background-color: #3a3a3a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background-color: #4a4a4a;
    border-color: rgba(212, 165, 32, 0.3);
}

.light-theme .btn-secondary {
    background-color: #e8e6e0;
    color: #333;
    border: 1px solid rgba(184, 134, 11, 0.15);
}

.light-theme .btn-secondary:hover {
    background-color: #ddd9d0;
    border-color: rgba(184, 134, 11, 0.3);
}

/* 歷史版本檢視按鈕 - 橘色掃光效果 */
.btn-history {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: 1px solid #f59e0b;
    position: relative;
    overflow: hidden;
}

.btn-history::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-history:hover::before {
    left: 100%;
}

.btn-history:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #fbbf24;
    color: #fff;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.5);
}

.light-theme .btn-history {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: 1px solid #d97706;
}

.light-theme .btn-history:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #f59e0b;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: #fff;
}

.btn-danger:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(255, 107, 107, 0.3);
}

.btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: #fff;
}

.btn-info:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(23, 162, 184, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, #4caf50 0%, #43a047 100%);
    color: #fff;
}

.btn-success:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(76, 175, 80, 0.3);
}

.btn-warning {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #fff;
}

.btn-warning:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(255, 152, 0, 0.3);
}

/* Outline 按鈕樣式 */
.btn-outline-info {
    background: transparent;
    color: #17a2b8;
    border: 1.5px solid #17a2b8;
}

.btn-outline-info:hover {
    background: rgba(23, 162, 184, 0.15);
    color: #20c5dc;
    border-color: #20c5dc;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(23, 162, 184, 0.25);
}

.light-theme .btn-outline-info {
    color: #138496;
    border-color: #138496;
}

.light-theme .btn-outline-info:hover {
    background: rgba(19, 132, 150, 0.1);
    color: #0d6874;
    border-color: #0d6874;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 0.375rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: rgba(212, 165, 32, 0.2);
    color: var(--admin-primary);
}

.btn-icon.btn-danger:hover {
    background-color: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.btn-icon.btn-warning:hover {
    background-color: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.btn-icon.btn-success:hover {
    background-color: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.light-theme .btn-icon {
    background-color: rgba(184, 134, 11, 0.08);
    color: #666;
}

.light-theme .btn-icon:hover {
    background-color: rgba(184, 134, 11, 0.15);
    color: var(--admin-primary-dark);
}