/* ==============================================
           自訂顏色類別 - 補充 Tocas UI 缺失的顏色
           ============================================== */

.ts-header.is-positive {
    color: #10b981;
}
.ts-header.is-warning {
    color: #f59e0b;
}
.ts-header.is-negative {
    color: #f5222d;
}
/* 增強的通知樣式 */
.file-info-notice {
    background-color: #06b6d4;
    color: white;
}

.ts-notice.is-positive {
    background-color: #10b981;
    color: white;
}

.ts-notice.is-negative {
    background-color: #f5222d;
    color: white;
}


.ts-box[class*=-indicated].is-primary {
    --indicator-color: #3b82f6;
}
.ts-box[class*=-indicated].is-positive {
    --indicator-color: #10b981;
}
.ts-box[class*=-indicated].is-warning {
    --indicator-color: #f59e0b;
}
.ts-box[class*=-indicated].is-info {
    --indicator-color: #06b6d4;
}

.ts-gauge .bar.is-primary::before {
    --accent-color: #3b82f6;
}

.ts-gauge .bar.is-positive::before {
    --accent-color: #10b981;
}

.ts-gauge .bar.is-warning::before {
    --accent-color: #f59e0b;
}

.ts-gauge .bar.is-info::before {
    --accent-color: #06b6d4;
}
.ts-gauge .bar.is-negative::before {
    --accent-color: #f5222d;
}


/* 主要藍色 - Primary */
.ts-button.is-primary {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

    .ts-button.is-primary:hover {
        background-color: #2563eb;
        border-color: #2563eb;
    }

.ts-badge.is-primary {
    background-color: #3b82f6;
    color: white;
}

.ts-message.is-primary {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.ts-text.is-primary {
    color: #3b82f6;
}

/* 成功綠色 - Positive */
.ts-button.is-positive {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

    .ts-button.is-positive:hover {
        background-color: #059669;
        border-color: #059669;
    }

.ts-badge.is-positive {
    background-color: #10b981;
    color: white;
}

.ts-message.is-positive {
    background-color: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

.ts-text.is-positive {
    color: #10b981;
}

/* 警告橙色 - Warning */
.ts-button.is-warning {
    background-color: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

    .ts-button.is-warning:hover {
        background-color: #d97706;
        border-color: #d97706;
    }

.ts-badge.is-warning {
    background-color: #f59e0b;
    color: white;
}

.ts-message.is-warning {
    background-color: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}

.ts-text.is-warning {
    color: #f59e0b;
}

/* 資訊藍色 - Info */
.ts-button.is-info {
    background-color: #06b6d4;
    color: white;
    border-color: #06b6d4;
}

    .ts-button.is-info:hover {
        background-color: #0891b2;
        border-color: #0891b2;
    }

.ts-badge.is-info {
    background-color: #06b6d4;
    color: white;
}

.ts-message.is-info {
    background-color: #ecfeff;
    border-color: #06b6d4;
    color: #155e75;
}

.ts-text.is-info {
    color: #06b6d4;
}

/* 成功綠色 - Success (與 positive 相同但提供別名) */
.ts-button.is-success {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

    .ts-button.is-success:hover {
        background-color: #059669;
        border-color: #059669;
    }

.ts-badge.is-success {
    background-color: #10b981;
    color: white;
}

.ts-message.is-success {
    background-color: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

.ts-text.is-success {
    color: #10b981;
}

/* 次要顏色 - Secondary (灰色) */
.ts-button.is-secondary {
    background-color: #6b7280;
    color: white;
    border-color: #6b7280;
}

    .ts-button.is-secondary:hover {
        background-color: #4b5563;
        border-color: #4b5563;
    }

.ts-badge.is-secondary {
    background-color: #6b7280;
    color: white;
}

.ts-badge.is-outlined.is-secondary {
    background-color: transparent;
    border: 1px solid #6b7280;
    color: #6b7280;
}

.ts-message.is-secondary {
    background-color: #f9fafb;
    border-color: #6b7280;
    color: #374151;
}

.ts-text.is-secondary {
    color: #6b7280;
}

/* 邊框樣式 - Outlined */
.ts-button.is-outlined.is-primary {
    background-color: transparent;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

    .ts-button.is-outlined.is-primary:hover {
        background-color: #3b82f6;
        color: white;
    }

.ts-button.is-outlined.is-positive {
    background-color: transparent;
    color: #10b981;
    border: 1px solid #10b981;
}

    .ts-button.is-outlined.is-positive:hover {
        background-color: #10b981;
        color: white;
    }

.ts-button.is-outlined.is-warning {
    background-color: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

    .ts-button.is-outlined.is-warning:hover {
        background-color: #f59e0b;
        color: white;
    }

.ts-button.is-outlined.is-info {
    background-color: transparent;
    color: #06b6d4;
    border: 1px solid #06b6d4;
}

    .ts-button.is-outlined.is-info:hover {
        background-color: #06b6d4;
        color: white;
    }

/* 小尺寸按鈕和徽章的特殊處理 */
.ts-button.is-small.is-outlined.is-primary,
.ts-button.is-small.is-outlined.is-positive,
.ts-button.is-small.is-outlined.is-warning,
.ts-button.is-small.is-outlined.is-info {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* ==============================================
           TS-PROGRESS BAR 進度條顏色樣式
           ============================================== */

/* 基礎進度條樣式增強 */
.ts-progress {
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 0.5rem;
    position: relative;
}

.ts-progress.is-large {
    height: 1rem;
}

.ts-progress.is-small {
    height: 0.25rem;
}

/* Primary Bar */
.ts-progress .bar.is-primary {
    background-color: #3b82f6;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    transition: width 0.3s ease;
}

/* Positive/Success Bar */
.ts-progress .bar.is-positive,
.ts-progress .bar.is-success {
    background-color: #10b981;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    transition: width 0.3s ease;
}

/* Warning Bar */
.ts-progress .bar.is-warning {
    background-color: #f59e0b;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    transition: width 0.3s ease;
}

/* Info Bar */
.ts-progress .bar.is-info {
    background-color: #06b6d4;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    transition: width 0.3s ease;
}

/* Negative/Danger Bar */
.ts-progress .bar.is-negative,
.ts-progress .bar.is-danger {
    background-color: #ef4444;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    transition: width 0.3s ease;
}

/* Secondary Bar */
.ts-progress .bar.is-secondary {
    background-color: #6b7280;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    transition: width 0.3s ease;
}

/* 預設 Bar (無特定顏色類別時) */
.ts-progress .bar {
    height: 100%;
    line-height: inherit;
    transition: width 0.3s ease;
    background-color: #3b82f6;
    border-radius: inherit;
}

/* 動畫進度條 */
.ts-progress .bar.is-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* 多段進度條支援 */
.ts-progress.is-stacked {
    display: flex;
}

.ts-progress.is-stacked .bar {
    flex: 0 0 auto;
}

/* 垂直進度條 */
.ts-progress.is-vertical {
    width: 0.5rem;
    height: 100%;
    min-height: 8rem;
    flex-direction: column;
}

.ts-progress.is-vertical.is-large {
    width: 1rem;
}

.ts-progress.is-vertical.is-small {
    width: 0.25rem;
}

/* 進度條文字標籤 */
.ts-progress.has-label {
    position: relative;
}

.ts-progress.has-label .bar::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* 進度條懸停效果 */
.ts-progress:hover .bar {
    opacity: 0.8;
}

.ts-progress .bar:hover {
    opacity: 1;
    transform: scaleY(1.1);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ==============================================
           TS-CHIP 相關顏色樣式
           ============================================== */

/* 基礎 Chip 樣式 */
/*.ts-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}*/

/* Primary Chip */
.ts-chip.is-primary {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.ts-chip.is-primary.is-outlined {
    background-color: transparent;
    color: #3b82f6;
    border-color: #3b82f6;
}

    .ts-chip.is-primary.is-outlined:hover {
        background-color: #eff6ff;
    }

/* Positive/Success Chip */
.ts-chip.is-positive,
.ts-chip.is-success {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

.ts-chip.is-positive.is-outlined,
.ts-chip.is-success.is-outlined {
    background-color: transparent;
    color: #10b981;
    border-color: #10b981;
}

    .ts-chip.is-positive.is-outlined:hover,
    .ts-chip.is-success.is-outlined:hover {
        background-color: #ecfdf5;
    }

/* Warning Chip */
.ts-chip.is-warning {
    background-color: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.ts-chip.is-warning.is-outlined {
    background-color: transparent;
    color: #f59e0b;
    border-color: #f59e0b;
}

    .ts-chip.is-warning.is-outlined:hover {
        background-color: #fffbeb;
    }

/* Info Chip */
.ts-chip.is-info {
    background-color: #06b6d4;
    color: white;
    border-color: #06b6d4;
}

.ts-chip.is-info.is-outlined {
    background-color: transparent;
    color: #06b6d4;
    border-color: #06b6d4;
}

    .ts-chip.is-info.is-outlined:hover {
        background-color: #ecfeff;
    }

/* Negative/Danger Chip */
.ts-chip.is-negative,
.ts-chip.is-danger {
    background-color: #ef4444;
    color: white;
    border-color: #ef4444;
}

.ts-chip.is-negative.is-outlined,
.ts-chip.is-danger.is-outlined {
    background-color: transparent;
    color: #ef4444;
    border-color: #ef4444;
}

    .ts-chip.is-negative.is-outlined:hover,
    .ts-chip.is-danger.is-outlined:hover {
        background-color: #fef2f2;
    }

/* Secondary Chip */
.ts-chip.is-secondary {
    background-color: #6b7280;
    color: white;
    border-color: #6b7280;
}

.ts-chip.is-secondary.is-outlined {
    background-color: transparent;
    color: #6b7280;
    border-color: #6b7280;
}

    .ts-chip.is-secondary.is-outlined:hover {
        background-color: #f9fafb;
    }

/* 小尺寸 Chip */
.ts-chip.is-small {
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
}

/* 大尺寸 Chip */
.ts-chip.is-large {
    padding: 0.375rem 1rem;
    font-size: 1rem;
}

/* 可點擊的 Chip */
.ts-chip.is-clickable {
    cursor: pointer;
    user-select: none;
}

    .ts-chip.is-clickable:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .ts-chip.is-clickable:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* 帶圖示的 Chip */
.ts-chip .ts-icon {
    margin-right: 0.25rem;
    font-size: 0.875em;
}

.ts-chip.is-small .ts-icon {
    margin-right: 0.125rem;
    font-size: 0.75em;
}

.ts-chip.is-large .ts-icon {
    margin-right: 0.375rem;
    font-size: 1em;
}

/* 可刪除的 Chip */
.ts-chip .ts-close {
    margin-left: 0.25rem;
    margin-right: -0.25rem;
    padding: 0.125rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .ts-chip .ts-close:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

.ts-chip.is-outlined .ts-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* ==============================================
           增強 Badge 的 Outlined 樣式
           ============================================== */

/* Badge Outlined 樣式補充 */
.ts-badge.is-outlined.is-primary {
    background-color: transparent;
    border: 1px solid #3b82f6;
    color: #3b82f6;
}

.ts-badge.is-outlined.is-positive,
.ts-badge.is-outlined.is-success {
    background-color: transparent;
    border: 1px solid #10b981;
    color: #10b981;
}

.ts-badge.is-outlined.is-warning {
    background-color: transparent;
    border: 1px solid #f59e0b;
    color: #f59e0b;
}

.ts-badge.is-outlined.is-info {
    background-color: transparent;
    border: 1px solid #06b6d4;
    color: #06b6d4;
}

.ts-badge.is-outlined.is-negative,
.ts-badge.is-outlined.is-danger {
    background-color: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
}

/* Badge 小尺寸樣式 */
.ts-badge.is-small {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
}

.ts-badge.is-small .ts-icon {
    font-size: 0.625rem;
    margin-right: 0.125rem;
}

/* Badge 大尺寸樣式 */
.ts-badge.is-large {
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
}

.ts-badge.is-large .ts-icon {
    font-size: 0.875rem;
    margin-right: 0.25rem;
}

/* ==============================================
           TS-STATISTIC VALUE 顏色樣式
           ============================================== */

/* Statistic Value 顏色類別 */
.ts-statistic .value.is-primary {
    color: #3b82f6;
}

.ts-statistic .value.is-positive,
.ts-statistic .value.is-success {
    color: #10b981;
}

.ts-statistic .value.is-warning {
    color: #f59e0b;
}

.ts-statistic .value.is-info {
    color: #06b6d4;
}

.ts-statistic .value.is-negative,
.ts-statistic .value.is-danger {
    color: #ef4444;
}

.ts-statistic .value.is-secondary {
    color: #6b7280;
}

/* Comparison 增長/減少指示器樣式 */
.ts-statistic .comparison.is-increased {
    color: #10b981;
}

.ts-statistic .comparison.is-decreased {
    color: #ef4444;
}

.ts-statistic .comparison.is-neutral {
    color: #6b7280;
}

/* ==============================================
           TS-GAUGE 圓形進度條 / 儀表板樣式
           ============================================== */

/* 基礎 Gauge 樣式 */


/* Primary Gauge - 藍色主題 */
.ts-gauge.is-primary {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.ts-gauge.is-primary .value {
    color: #1d4ed8;
}

.ts-gauge.is-primary .label {
    color: #3730a3;
}

.ts-gauge.is-primary:hover {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(59, 130, 246, 0.25);
    transform: translateY(-2px);
}

/* Positive/Success Gauge - 綠色主題 */
.ts-gauge.is-positive,
.ts-gauge.is-success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.ts-gauge.is-positive .value,
.ts-gauge.is-success .value {
    color: #047857;
}

.ts-gauge.is-positive .label,
.ts-gauge.is-success .label {
    color: #065f46;
}

.ts-gauge.is-positive:hover,
.ts-gauge.is-success:hover {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15), 0 4px 12px rgba(16, 185, 129, 0.25);
    transform: translateY(-2px);
}

/* Warning Gauge - 橙色主題 */
.ts-gauge.is-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
}

.ts-gauge.is-warning .value {
    color: #d97706;
}

.ts-gauge.is-warning .label {
    color: #92400e;
}

.ts-gauge.is-warning:hover {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15), 0 4px 12px rgba(245, 158, 11, 0.25);
    transform: translateY(-2px);
}

/* Info Gauge - 青色主題 */
.ts-gauge.is-info {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-color: #06b6d4;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.1);
}

.ts-gauge.is-info .value {
    color: #0891b2;
}

.ts-gauge.is-info .label {
    color: #155e75;
}

.ts-gauge.is-info:hover {
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15), 0 4px 12px rgba(6, 182, 212, 0.25);
    transform: translateY(-2px);
}

/* Negative/Danger Gauge - 紅色主題 */
.ts-gauge.is-negative,
.ts-gauge.is-danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.ts-gauge.is-negative .value,
.ts-gauge.is-danger .value {
    color: #dc2626;
}

.ts-gauge.is-negative .label,
.ts-gauge.is-danger .label {
    color: #991b1b;
}

.ts-gauge.is-negative:hover,
.ts-gauge.is-danger:hover {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15), 0 4px 12px rgba(239, 68, 68, 0.25);
    transform: translateY(-2px);
}

/* Secondary Gauge - 灰色主題 */
.ts-gauge.is-secondary {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-color: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.1);
}

.ts-gauge.is-secondary .value {
    color: #374151;
}

.ts-gauge.is-secondary .label {
    color: #4b5563;
}

.ts-gauge.is-secondary:hover {
    box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.15), 0 4px 12px rgba(107, 114, 128, 0.25);
    transform: translateY(-2px);
}

/* Gauge 特殊效果 */

/* 脈動效果 */
.ts-gauge.is-pulsing {
    animation: gauge-pulse 2s infinite;
}

@keyframes gauge-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3);
    }
}

/* 發光效果 */
.ts-gauge.is-glowing {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.ts-gauge.is-glowing.is-positive {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.ts-gauge.is-glowing.is-warning {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.ts-gauge.is-glowing.is-negative {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* 平面設計風格 */
.ts-gauge.is-flat {
    border: none;
    box-shadow: none;
    background: #f8f9fa;
}

.ts-gauge.is-flat.is-primary {
    background: #3b82f6;
}

.ts-gauge.is-flat.is-primary .value,
.ts-gauge.is-flat.is-primary .label {
    color: white;
}

.ts-gauge.is-flat.is-positive {
    background: #10b981;
}

.ts-gauge.is-flat.is-positive .value,
.ts-gauge.is-flat.is-positive .label {
    color: white;
}

.ts-gauge.is-flat.is-warning {
    background: #f59e0b;
}

.ts-gauge.is-flat.is-warning .value,
.ts-gauge.is-flat.is-warning .label {
    color: white;
}

.ts-gauge.is-flat.is-negative {
    background: #ef4444;
}

.ts-gauge.is-flat.is-negative .value,
.ts-gauge.is-flat.is-negative .label {
    color: white;
}

/*尺寸*/
.ts-gauge.is-massive {
    --size: 12rem;
}


/* 輔助類別 */
.ts-gauge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
.ts-gauge .bar .text {
    text-align: center;

}

.ts-gauge-row {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.ts-gauge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}