/* 大模型调用分析页面样式（工单 #559）
 * 颜色全部走 var(--c-*)，禁止硬编码（遵循 rule-ui.md）
 * 本页未复用 kimi-usage.css / ark-usage.css，故本文件包含全部所需组件样式
 */

/* ===== 页面布局 ===== */
.page-content {
 max-width: 1200px;
 padding: 12px;
}

/* ===== 过滤卡（toolbar + day-bar 合并为一个 card） ===== */
.bma-filter-card {
 background: var(--c-secondary);
 border: 1px solid var(--c-border);
 border-radius: 12px;
 margin-bottom: 8px;
 overflow: hidden;
 transition: border-color 0.2s;
}

.bma-filter-card:hover {
 border-color: var(--c-primary);
}

/* ===== 工具栏：作为过滤卡的 header ===== */
.bma-toolbar {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 16px;
 background: color-mix(in srgb, var(--c-primary) 5%, var(--c-secondary));
 cursor: pointer;
 user-select: none;
 transition: background 0.2s;
 flex-wrap: wrap;
}

.bma-toolbar:hover {
 background: color-mix(in srgb, var(--c-primary) 10%, var(--c-secondary));
}

.bma-filter-card.collapsed .bma-toolbar {
 background: var(--c-secondary);
}

.bma-filter-toggle {
 background: transparent;
 border: 1px solid var(--c-border);
 border-radius: 6px;
 color: var(--c-font-secondary);
 font-size: 16px;
 padding: 4px 10px;
 cursor: pointer;
 margin-left: auto;
 flex: 0 0 auto;
}

.bma-filter-toggle:hover {
 border-color: var(--c-primary);
 color: var(--c-primary);
}

.bma-toolbar-label {
 font-size: 13px;
 color: var(--c-font-secondary);
}

/* 月份按钮（点击弹框选择年月） */
.bma-month-btn {
 flex: 0 0 auto;
 background: var(--c-secondary);
 border: 1px solid var(--c-border);
 border-radius: 8px;
 padding: 8px 12px;
 color: var(--c-font);
 font-size: 14px;
 cursor: pointer;
 transition: all 0.15s;
}

.bma-month-btn:hover {
 border-color: var(--c-primary);
 color: var(--c-primary);
}

/* ===== 年月选择弹框 ===== */
.bma-month-picker {
 max-width: 360px;
}

.bma-year-nav {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 margin-bottom: 16px;
}

.bma-year-nav-btn {
 background: var(--c-secondary);
 border: 1px solid var(--c-border);
 border-radius: 8px;
 width: 36px;
 height: 36px;
 font-size: 18px;
 color: var(--c-font);
 cursor: pointer;
 transition: all 0.15s;
}

.bma-year-nav-btn:hover:not(:disabled) {
 border-color: var(--c-primary);
 color: var(--c-primary);
}

.bma-year-nav-btn:disabled {
 opacity: 0.4;
 cursor: not-allowed;
}

.bma-year-label {
 font-size: 16px;
 font-weight: 600;
 color: var(--c-font);
 min-width: 80px;
 text-align: center;
}

.bma-month-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
}

.bma-month-cell {
 background: var(--c-block);
 border: 1px solid var(--c-border);
 border-radius: 8px;
 padding: 10px 0;
 font-size: 14px;
 font-weight: 600;
 color: var(--c-font-secondary);
 cursor: pointer;
 transition: all 0.15s;
}

.bma-month-cell:hover:not(:disabled):not(.active) {
 border-color: var(--c-primary);
 color: var(--c-font);
}

.bma-month-cell.active {
 background: var(--c-primary);
 border-color: var(--c-primary);
 color: #fff;
}

.bma-month-cell.disabled {
 opacity: 0.4;
 cursor: not-allowed;
}

/* ===== 日期按钮组（贴在过滤卡 toolbar 之下，无独立外框） ===== */
.bma-day-bar {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
 gap: 4px;
 padding: 10px 16px 12px 16px;
 border-top: 1px solid var(--c-border);
}

.bma-day-btn {
 background: var(--c-block);
 border: 1px solid var(--c-border);
 border-radius: 6px;
 padding: 6px 0;
 color: var(--c-font-secondary);
 font-family: monospace;
 font-size: 12px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.15s;
 min-width: 0;
}

.bma-day-btn:hover {
 border-color: var(--c-primary);
 color: var(--c-font);
}

/* 无数据的日期：仅"已选中且无数据"的按钮置灰（背景 gray，文字跟随 --c-gray_font）；
 * 未选中的日期即使无数据也保持原有效果 */
.bma-day-btn.active.nodata {
 background: var(--c-gray);
 border-color: var(--c-gray);
 color: var(--c-gray_font);
}

.bma-day-btn.active.nodata:hover {
 background: var(--c-gray);
 border-color: var(--c-gray);
 color: var(--c-gray_font);
}

/* 选中且无数据的按钮上的 loading 遮罩也用灰色系 */
.bma-day-btn.active.nodata .day-btn-loading {
 background: color-mix(in srgb, var(--c-gray) 70%, transparent);
}

.bma-day-btn.active.nodata .day-btn-spinner {
 border-color: rgba(255, 255, 255, 0.4);
 border-top-color: #fff;
}

.bma-day-btn.active {
 background: var(--c-primary);
 border-color: var(--c-primary);
 color: #fff;
}

/* ===== 日期按钮级 loading（刷新期间不清空页面数据，仅在该按钮上盖遮罩） ===== */
.bma-day-btn {
 position: relative;
}

.day-btn-loading {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: color-mix(in srgb, var(--c-block) 85%, transparent);
 border-radius: 6px;
}

.day-btn-spinner {
 width: 12px;
 height: 12px;
 border: 2px solid var(--c-border);
 border-top-color: var(--c-primary);
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}

.bma-day-btn.active .day-btn-loading {
 background: color-mix(in srgb, var(--c-primary) 70%, transparent);
}

.bma-day-btn.active .day-btn-spinner {
 border-color: rgba(255, 255, 255, 0.4);
 border-top-color: #fff;
}

.bma-toolbar-hint {
 font-size: 12px;
 color: var(--c-danger);
 padding: 0 16px 10px 16px;
}

.bma-toolbar-meta {
 font-size: 12px;
 color: var(--c-font-secondary);
 margin-left: 4px;
}

/* ===== 卡片网格 ===== */
.card-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 gap: 6px;
}

/* 汇总卡片网格：PC 桌面 8 列等宽 */
.totals-card-grid {
 grid-template-columns: repeat(8, minmax(0, 1fr));
 margin-bottom: 0px;
}

.card-meta {
 font-size: 12px;
 color: var(--c-font-secondary);
 margin-top: 4px;
}

/* ===== 卡片（quota-card / config-card 共用） ===== */
.quota-card {
 background: var(--c-block);
 border: 1px solid var(--c-border);
 border-radius: 14px;
 padding: 16px;
 transition: all 0.2s;
}

.quota-card:hover {
 border-color: var(--c-primary);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* 卡内"label+value" 单元容器：把标题和数值绑成一个整体单元 */
.quota-card-content {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.card-label {
 font-size: 13px;
 color: var(--c-font-secondary);
 font-weight: 600;
 letter-spacing: 0.5px;
 text-transform: none;
}

.unit {
    opacity: 0.5;
    font-size: 0.65em;
    margin-left: 1px;
}

.card-value {
 font-size: 19.2px;  /* 原 24px 调小 20%（80%），全局汇总 + 域名卡内汇总 */
 font-weight: 700;
 color: var(--c-font);
 word-break: break-all;
 line-height: 1.2;
}

/* ===== domain 配置组 ===== */
.config-group {
 margin-bottom: 12px;
 background: var(--c-secondary);
 border: 1px solid var(--c-border);
 border-radius: 12px;
 overflow: hidden;
 transition: border-color 0.2s;
 color: var(--c-font);
}

.config-group:hover {
 border-color: var(--c-primary);
}

.config-group-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px;
 padding: 12px 16px;
 background: color-mix(in srgb, var(--c-primary) 5%, var(--c-block));
 cursor: pointer;
 user-select: none;
 transition: background 0.2s;
}

.config-group-header:hover {
 background: color-mix(in srgb, var(--c-primary) 10%, var(--c-block));
}

.config-group-header.collapsed {
 background: var(--c-block);
}

.config-group-title {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 flex: 1 1 auto;
 min-width: 0;
}

.config-domain {
 font-family: monospace;
 font-size: 14px;
 font-weight: 600;
 color: var(--c-font);
 background: var(--c-border);
 padding: 3px 10px;
 border-radius: 6px;
}

.config-badge {
 font-size: 11px;
 padding: 2px 8px;
 border-radius: 5px;
 font-weight: 600;
}

.badge-domain {
 background: color-mix(in srgb, var(--c-primary) 12%, transparent);
 color: var(--c-primary);
}

.badge-calls {
 background: color-mix(in srgb, var(--c-success) 12%, transparent);
 color: var(--c-success);
}

/* ===== 模型 chip ===== */
.config-models {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 14px;
}

.model-tag {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: var(--c-block);
 border: 1px solid var(--c-border);
 border-radius: 8px;
 padding: 6px 12px;
}

.model-tag-name {
 font-size: 14px;
 font-weight: 600;
 color: var(--c-font);
}

/* ===== 加载 / 错误 / 空态 ===== */
.loading-state {
 text-align: center;
 padding: 80px 20px;
}

.loading-spinner {
 width: 48px;
 height: 48px;
 border: 3px solid var(--c-border);
 border-top-color: var(--c-primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
 margin: 0 auto 20px;
}

@keyframes spin {
 to { transform: rotate(360deg); }
}

.loading-text {
 font-size: 16px;
 color: var(--c-font-secondary);
}

.error-box {
 background: color-mix(in srgb, var(--c-danger) 10%, transparent);
 border: 1px solid var(--c-danger);
 border-radius: 10px;
 padding: 18px;
 margin-top: 12px;
}

.error-title {
 font-size: 16px;
 font-weight: 600;
 color: var(--c-danger);
 margin-bottom: 6px;
}

.error-msg {
 font-size: 15px;
 color: var(--c-font);
 word-break: break-all;
}

.empty-state {
 text-align: center;
 padding: 60px 20px;
}

.empty-state-icon {
 font-size: 56px;
 margin-bottom: 16px;
}

.empty-state h3 {
 font-size: 18px;
 margin-bottom: 8px;
 color: var(--c-font);
}

.empty-state p {
 font-size: 15px;
 color: var(--c-font-secondary);
}

.usage-section {
 margin-bottom: 12px;
}

/* ===== domain 大卡折叠头部 =====（冗余定义清理：实际样式由 line 119-156 定义） ===== */

.domain-toggle {
 background: transparent;
 border: 1px solid var(--c-border);
 border-radius: 6px;
 color: var(--c-font-secondary);
 font-size: 16px;
 padding: 4px 10px;
 cursor: pointer;
 margin-left: auto;
 flex: 0 0 auto;
}

.domain-toggle:hover {
 border-color: var(--c-primary);
 color: var(--c-primary);
}

.domain-stats-inline {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
}

.config-group-body {
 padding: 10px;
 border-top: 1px solid var(--c-border);
}

/* ===== 模型子卡 ===== */
.model-list {
 display: grid;
 grid-template-columns: 1fr;
 gap: 6px;
 margin-top: 6px;
}

.model-row {
 background: var(--c-block);
 border: 1px solid var(--c-border);
 border-radius: 10px;
 overflow: hidden;
}

.model-row-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
 padding: 10px 14px;
 cursor: pointer;
 user-select: none;
 background: color-mix(in srgb, var(--c-primary) 5%, var(--c-block));
 transition: background 0.2s;
}

.model-row-header:hover {
 background: color-mix(in srgb, var(--c-primary) 10%, var(--c-block));
}

.model-row-header.collapsed {
 background: var(--c-block);
}

.model-name {
 font-size: 14px;
 font-weight: 600;
 color: var(--c-font);
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-family: monospace;
}

.toggle-icon {
 font-size: 13px;
 color: var(--c-primary);
 width: 14px;
 display: inline-block;
 text-align: center;
}

.model-stats-inline {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
}

.model-stat-chip {
 font-size: 11px;
 padding: 3px 8px;
 border-radius: 5px;
 font-weight: 600;
 background: var(--c-secondary);
 color: var(--c-font-secondary);
}

.model-stat-chip.calls {
 background: color-mix(in srgb, var(--c-success) 12%, transparent);
 color: var(--c-success);
}

.model-stat-chip.in {
 background: color-mix(in srgb, var(--c-primary) 12%, transparent);
 color: var(--c-primary);
}

.model-stat-chip.out {
 background: color-mix(in srgb, var(--c-warning) 12%, transparent);
 color: var(--c-warning);
}

.model-stat-chip.cache {
 background: color-mix(in srgb, var(--c-yellow) 12%, transparent);
 color: var(--c-yellow);
}

.model-row-body {
 padding: 8px 10px;
 border-top: 1px solid var(--c-border);
}

/* ===== 紧凑小卡（quota-card-sm） =====
 * .card-grid-compact 固定 4 列一行（全宽度场景统一，响应式无需重复定义） */
.card-grid-compact {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 /* margin-top: 8px; */
}

.quota-card-sm {
 padding: 12px 14px;
 border-radius: 10px;
}

.quota-card-sm .card-label {
 font-size: 11px;
 margin-bottom: 4px;
}

.card-value-sm {
 font-size: 16px;
 margin-bottom: 0;
}

/* ===== 响应式 =====
 * 注意：所有响应式 media 统一放在本文件末尾、全部基础规则之后，
 * 使 media 内同名选择器因"后定义"天然获得更高层叠优先级，
 * 无需再依赖 !important 强行覆盖（避免基础规则被 @media 压制的经典问题）。 */
@media (min-width: 901px) {
 /* PC 桌面：非汇总 / 非模型内的小卡网格强制 8 列等宽
  * （模型内小卡 .card-grid-compact 固定 4 列由基础规则统一承担） */
 .card-grid:not(.card-grid-compact):not(.totals-card-grid) {
 grid-template-columns: repeat(8, minmax(0, 1fr));
 }
 /* PC 桌面：模型卡两列布局 */
 .model-list {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 900px) {
 .bma-day-bar {
  grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
 }
 .totals-card-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 .card-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 .model-list {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 600px) {
 .bma-day-bar {
  grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
  gap: 3px;
  padding: 8px 12px 10px 12px;
 }
 .bma-day-btn {
 font-size: 11px;
 padding: 5px 0;
 }
 .bma-toolbar {
 padding: 8px 12px;
 gap: 8px;
 }
 .totals-card-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 .card-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 4px;
 }
 .model-list {
 grid-template-columns: 1fr;
 }
 .quota-card {
 padding: 10px 8px;
 border-radius: 10px;
 }
 .card-label {
 font-size: 11px;
 }
 .card-value {
  font-size: 12.8px;  /* 原 16px 调小 20%（80%），全局汇总 + 域名卡内汇总 */
 }
 .quota-card-sm {
  padding: 8px 6px;
 }
 .quota-card-sm .card-label {
 font-size: 10px;
 }
 .card-value-sm {
 font-size: 13px;
 }
 .config-group-header {
 padding: 10px 12px;
 }
}