/**
 * Decision Rhythm Module Styles
 *
 * 决策配额模块样式，使用设计Token
 *
 * @version 1.0.0
 * @updated 2026-02-18
 */

/* 容器 */
.decision-rhythm-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* 头部 */
.decision-rhythm-header {
    margin-bottom: var(--spacing-xl);
}

.decision-rhythm-header h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm) 0;
}

.decision-rhythm-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
}

/* 配额卡片 */
.quota-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.quota-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.quota-circle {
    position: relative;
    width: 150px;
    height: 150px;
}

.quota-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.quota-bg {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 8;
}

.quota-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 8;
    transition: stroke-dasharray 0.5s ease;
}

.quota-fill.warning {
    stroke: var(--color-warning);
}

.quota-fill.danger {
    stroke: var(--color-error);
}

.quota-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.quota-percent {
    display: block;
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.quota-label {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* 配额详情 */
.quota-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    text-align: center;
}

.quota-detail-item {
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.quota-detail-value {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
}

.quota-detail-label {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.quota-detail-item.low .quota-detail-value {
    color: var(--color-error);
}

/* 配置表单 */
.config-form {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.config-form h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-full {
    margin-bottom: var(--spacing-md);
}

.form-full label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

.form-full input,
.form-full select,
.form-full textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
}

/* 配置历史 */
.history-section {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.history-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.history-table th {
    background: var(--color-surface);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

/* ========== 配额配置页面（quota_config.html） ========== */

/* 配置页容器 */
.config-container {
    max-width: var(--content-max-width, 1200px);
    margin: 0 auto;
    padding: var(--spacing-lg, 24px);
}

/* 配置页头部 */
.config-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl, 32px);
}

.config-header h1 {
    font-size: var(--font-size-h1, 24px);
    font-weight: var(--font-weight-bold, 700);
    margin: 0;
}

.config-subtitle {
    color: var(--color-text-secondary, #64748b);
    margin-top: 4px;
    font-size: var(--font-size-body, 14px);
}

/* 账户选择器 */
.account-selector-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
    padding: var(--spacing-md, 16px);
    background: white;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: var(--spacing-xl, 32px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.account-selector-label {
    font-size: var(--font-size-body, 14px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1e293b);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.account-selector {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-body, 14px);
    background: white;
    min-width: 220px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.account-selector:focus {
    outline: none;
    border-color: var(--color-primary, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.account-selector-hint {
    font-size: var(--font-size-small, 12px);
    color: var(--color-text-muted, #94a3b8);
}

/* 配额网格 */
.quota-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-lg, 24px);
    margin-bottom: var(--spacing-xl, 32px);
}

/* 配额卡片头部 */
.quota-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md, 16px);
}

.quota-period {
    font-size: var(--font-size-h4, 16px);
    font-weight: var(--font-weight-semibold, 600);
}

.quota-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-small, 12px);
    font-weight: var(--font-weight-medium, 500);
    background: var(--color-surface, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
}

.quota-badge.DAILY { background: #dbeafe; color: #1e40af; }
.quota-badge.WEEKLY { background: #dcfce7; color: #166534; }
.quota-badge.MONTHLY { background: #fef3c7; color: #92400e; }
.quota-badge.QUARTERLY { background: #fce7f3; color: #9d174d; }

/* 配额统计 */
.quota-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-md, 16px);
}

.quota-stat {
    text-align: center;
    padding: var(--spacing-sm, 8px);
    background: var(--color-surface, #f8fafc);
    border-radius: var(--radius-md, 8px);
}

.quota-stat-value {
    font-size: var(--font-size-h3, 20px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #1e293b);
}

.quota-stat-label {
    font-size: var(--font-size-small, 12px);
    color: var(--color-text-muted, #94a3b8);
    margin-top: 2px;
}

/* 进度条 */
.progress-bar {
    height: 8px;
    background: var(--color-surface, #e2e8f0);
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    border-radius: var(--radius-full, 999px);
    transition: width 0.4s ease;
}

.progress-fill.low { background: var(--color-success, #10b981); }
.progress-fill.medium { background: var(--color-warning, #f59e0b); }
.progress-fill.high { background: var(--color-error, #ef4444); }

.progress-label {
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
    text-align: center;
    margin-bottom: var(--spacing-md, 16px);
}

/* 配置表单（配额卡片内） */
.quota-card .config-form {
    background: var(--color-surface, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 16px);
    margin-top: var(--spacing-md, 16px);
}

.form-row-config {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md, 12px);
}

.form-field {
    flex: 1;
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs, 4px);
    font-size: var(--font-size-small, 12px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #64748b);
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-body, 14px);
    background: white;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-actions {
    margin-top: var(--spacing-sm, 8px);
}

/* 按钮 */
.btn-update {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--color-primary, #667eea);
    color: white;
    border: none;
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-body, 14px);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-update:hover {
    background: var(--color-primary-dark, #5a67d8);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-surface, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-body, 14px);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: var(--color-border, #e2e8f0);
}

.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-small, 12px);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset:hover {
    background: var(--color-error, #ef4444);
    color: white;
    border-color: var(--color-error, #ef4444);
}

/* 趋势图表头部 */
.trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md, 16px);
}

.trend-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
}

.trend-buttons {
    display: flex;
    gap: 8px;
}

.btn-trend {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--color-surface, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-trend:hover {
    background: var(--color-border, #e2e8f0);
}

.btn-trend.active {
    background: var(--color-primary, #667eea);
    color: white;
    border-color: var(--color-primary, #667eea);
}

/* 趋势图表容器 */
.trend-charts-row {
    margin-bottom: var(--spacing-md, 16px);
}

.trend-chart-wrapper h4 {
    font-size: 14px;
    margin: 0 0 12px 0;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #64748b);
}

.trend-chart {
    min-height: 160px;
    position: relative;
}

.trend-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--color-text-muted, #94a3b8);
    font-size: var(--font-size-body, 14px);
}

.trend-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--color-text-muted, #94a3b8);
    font-size: var(--font-size-body, 14px);
    background: var(--color-surface, #f8fafc);
    border-radius: var(--radius-md, 8px);
}

/* 柱状图 */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding: 0 4px;
}

.bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    justify-content: flex-end;
}

.bar-fill {
    width: 100%;
    max-width: 32px;
    border-radius: 4px 4px 0 0;
    transition: height 0.4s ease;
    min-height: 2px;
}

.bar-fill.normal { background: var(--color-primary, #667eea); }
.bar-fill.warning { background: var(--color-warning, #f59e0b); }
.bar-fill.over { background: var(--color-error, #ef4444); }

.bar-value {
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1e293b);
    margin-bottom: 4px;
}

.bar-label {
    font-size: 10px;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 6px;
    white-space: nowrap;
}

.bar-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary, #1e293b);
    color: white;
    padding: 6px 10px;
    border-radius: var(--radius-md, 6px);
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.bar:hover .bar-tooltip {
    display: block;
}

/* 趋势统计摘要 */
.trend-summary {
    margin-top: var(--spacing-lg, 20px);
    padding-top: var(--spacing-md, 16px);
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.trend-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md, 16px);
}

.trend-summary-item {
    text-align: center;
}

.trend-summary-value {
    font-size: 24px;
    font-weight: var(--font-weight-bold, 700);
}

.trend-summary-label {
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 4px;
}

/* Toast 通知 */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    color: white;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    animation: slideInRight 0.3s ease-out;
    transition: opacity 0.3s;
    font-size: var(--font-size-body, 14px);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 响应式 */
@media (max-width: 768px) {
    .quota-display {
        flex-direction: column;
    }

    .quota-details {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .quota-grid {
        grid-template-columns: 1fr;
    }

    .quota-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row-config {
        flex-direction: column;
        align-items: stretch;
    }

    .config-header {
        flex-direction: column;
        gap: 12px;
    }

    .trend-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
