/* discipline.css - 交易紀律頁專屬樣式
   通用樣式由 base.css 提供
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero KPI Grid ── */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

/* ── Alert Cards ── */
.alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

.alert-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}
.alert-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.alert-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.alert-card.danger::before { background: var(--loss); }
.alert-card.success::before { background: var(--profit); }
.alert-card.warning::before { background: var(--gold); }

.alert-header { display: flex; justify-content: space-between; align-items: flex-start; }
.alert-title { font-size: 1.05rem; font-weight: 700; }
.alert-card.danger .alert-title { color: var(--loss); }
.alert-card.success .alert-title { color: var(--profit); }
.alert-card.warning .alert-title { color: var(--gold); }

.alert-stock {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--bg-subtle);
    padding: 4px 10px;
    border-radius: 6px;
}

.alert-body { font-size: 0.92rem; color: var(--text-primary); flex-grow: 1; }

.alert-footer {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}
.alert-card.danger .alert-footer { color: var(--loss); }
.alert-card.success .alert-footer { color: var(--profit); }
.alert-card.warning .alert-footer { color: var(--gold); }

/* ── Static Tabs ── */
.tabs { display: inline-flex; background: var(--bg-subtle); padding: 4px; border-radius: 12px; margin-bottom: 24px; }

.tab-btn {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all var(--transition-base);
    font-family: inherit;
}
.tab-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ── Rule Cards ── */
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.rule-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border);
}

.rule-tag {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    display: inline-block;
    background: var(--bg-subtle);
}
.rule-tag.gemini { color: #0071E3; background: rgba(0, 113, 227, 0.1); }
.rule-tag.claude { color: #AF52DE; background: rgba(175, 82, 222, 0.1); }

.rule-item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.rule-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.rule-item h4 { margin-bottom: 6px; font-size: 0.95rem; font-weight: 600; }
.rule-item p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Responsive (discipline-specific) ── */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .alert-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .hero-grid { grid-template-columns: 1fr; }
    .tabs { flex-wrap: wrap; }
    .tab-btn { padding: 7px 12px; font-size: 0.8rem; }
}