/* ============================================================================
   Spec 015: Frontend UX Redesign - Academic Trust Theme
   ============================================================================ */

/* =========================
   1. Typography System
   ========================= */

/* ============================================================
   Layout baseline
   Page width shell is controlled in templates/base.html.
   ============================================================ */
html,
body {
    overflow-x: hidden;
}

/* Serif Headings */
.font-serif {
    font-family: 'Noto Serif TC', 'Songti TC', serif;
}

/* Sans-serif Body */
.font-sans {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
}

/* Monospace Data */
.font-mono {
    font-family: 'IBM Plex Mono', monospace;
}

/* Standard English Serif */
.font-serif-en {
    font-family: 'Times New Roman', Times, serif;
}

/* =========================
   2. Semantic Color System - Placement Classification
   ========================= */

/* 保底組 (Safe) - Forest Green */
.placement-safe {
    color: #1B5E20;
    background-color: #E8F5E9;
}

.placement-safe-border {
    border-color: #1B5E20;
}

.placement-safe-text {
    color: #1B5E20;
}

.placement-safe-bg {
    background-color: #E8F5E9;
}

/* 務實組 (Realistic) - Teal */
.placement-realistic {
    color: #00695C;
    background-color: #E0F2F1;
}

.placement-realistic-border {
    border-color: #00695C;
}

.placement-realistic-text {
    color: #00695C;
}

.placement-realistic-bg {
    background-color: #E0F2F1;
}

/* 進攻組 (Aggressive) - Amber */
.placement-aggressive {
    color: #92400E;
    background-color: #FFFBEB;
}

.placement-aggressive-border {
    border-color: #92400E;
}

.placement-aggressive-text {
    color: #92400E;
}

.placement-aggressive-bg {
    background-color: #FFFBEB;
}

/* 夢幻組 (Dream) - Brick Red */
.placement-dream {
    color: #AD1457;
    background-color: #FCE4EC;
}

.placement-dream-border {
    border-color: #AD1457;
}

.placement-dream-text {
    color: #AD1457;
}

.placement-dream-bg {
    background-color: #FCE4EC;
}

/* 低機率組 (Low Prob) */
.placement-low_prob {
    color: #475569;
    background-color: #F8FAFC;
}

.placement-low_prob-border {
    border-color: #94A3B8;
}

.placement-low_prob-text {
    color: #475569;
}

.placement-low_prob-bg {
    background-color: #F8FAFC;
}

/* 檢定未過 (Failed) */
.placement-failed {
    color: #6B7280;
    background-color: #F3F4F6;
}

.placement-failed-border {
    border-color: #D1D5DB;
}

.placement-failed-text {
    color: #6B7280;
}

.placement-failed-bg {
    background-color: #F3F4F6;
}

/* =========================
   2.1 Classification Color Dots - Flat Gradient Style
   ========================= */

.color-dot {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    vertical-align: middle;
}

.color-dot-lg {
    width: 1.5em;
    height: 1.5em;
}

.color-dot-xl {
    width: 2em;
    height: 2em;
}

.color-dot-safe {
    background: linear-gradient(135deg, #43A047 0%, #2E7D32 100%);
}

.color-dot-realistic {
    background: linear-gradient(135deg, #26A69A 0%, #00897B 100%);
}

.color-dot-aggressive {
    background: linear-gradient(135deg, #FB8C00 0%, #E65100 100%);
}

.color-dot-dream {
    background: linear-gradient(135deg, #EC407A 0%, #C2185B 100%);
}

/* =========================
   3. Brand Colors
   ========================= */

/* Primary: Deep Navy */
.bg-navy {
    background-color: #0F2C59;
}

.bg-navy-light {
    background-color: #2A4D85;
}

.text-navy {
    color: #0F2C59;
}

.border-navy {
    border-color: #0F2C59;
}

.hover\:bg-navy-light:hover {
    background-color: #2A4D85;
}

.hover\:text-navy:hover {
    color: #0F2C59;
}

.hover\:border-navy:hover {
    border-color: #0F2C59;
}

/* Accent: Muted Gold */
.bg-gold {
    background-color: #C6A969;
}

.text-gold {
    color: #C6A969;
}

.border-gold {
    border-color: #C6A969;
}

/* Interface Colors */
.bg-mist {
    background-color: #F4F6F8;
}

.text-charcoal {
    color: #1A202C;
}

.text-slate {
    color: #64748B;
}

.detail-muted-text {
    color: #64748B;
}

.detail-muted-text a {
    color: #64748B;
    text-decoration: underline;
}

.border-light {
    border-color: #E2E8F0;
}

/* =========================
   4. Card Styles
   ========================= */

.card {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #E2E8F0;
}

.card-simple {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Department Card - Gold Hover Effect (for school/department type cards only) */
.dept-card {
    background-color: #FFFFFF;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #E2E8F0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dept-card:hover {
    border-color: #D4C4A0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Filter Chip Styles */
.filter-chip {
    transition: all 0.15s ease;
}

.filter-chip:has(input:checked) {
    border-color: #0F2C59 !important;
    background-color: #0F2C59 !important;
    color: white !important;
}

/* =========================
   5. Button Styles
   ========================= */

.btn-primary {
    background-color: #0F2C59;
    color: #FFFFFF;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #2A4D85;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #E2E8F0;
    color: #64748B;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    border-color: #0F2C59;
    color: #0F2C59;
}

.btn-ghost {
    background-color: transparent;
    color: #0F2C59;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-ghost:hover {
    background-color: rgba(15, 44, 89, 0.05);
}

/* Filter-inspired button system (Spec 090) */
.btn-filter-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-filter-shell:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 44, 89, 0.15);
}

.btn-filter-shell:disabled,
.btn-filter-shell[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-filter-shell--gold {
    background: #c6a969;
    border-color: #b59a60;
    color: #0f2c59;
}

.btn-filter-shell--gold:hover {
    background: #bda060;
    border-color: #a98f58;
    color: #0f2c59;
    box-shadow: 0 4px 12px rgba(15, 44, 89, 0.14), 0 14px 26px -12px rgba(198, 169, 105, 0.72);
}

.btn-filter-shell--navy {
    background: #0f2c59;
    border-color: #0f2c59;
    color: #ffffff;
}

.btn-filter-shell--navy:hover {
    background: #2a4d85;
    border-color: #2a4d85;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 44, 89, 0.16), 0 14px 24px -12px rgba(42, 77, 133, 0.55);
}

.btn-filter-shell--ghost-dark {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.36);
    color: #ffffff;
}

.btn-filter-shell--ghost-dark:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 44, 89, 0.14), 0 14px 24px -12px rgba(241, 245, 249, 0.64);
}

.btn-filter-shell--ghost-dark:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
}

.btn-filter-shell--neutral {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

.btn-filter-shell--neutral:hover {
    background: #f8fafc;
    border-color: #0f2c59;
    color: #0f2c59;
    box-shadow: 0 4px 12px rgba(15, 44, 89, 0.12), 0 14px 24px -12px rgba(148, 163, 184, 0.45);
}

/* =========================
   6. Badge Styles
   ========================= */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.badge-public {
    background-color: #E0F2FE;
    color: #0369A1;
}

.badge-private {
    background-color: #F3E8FF;
    color: #7C3AED;
}

/* =========================
   7. HTMX Indicators
   ========================= */

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

/* Loading spinner */
.spinner {
    border: 3px solid #F4F6F8;
    border-top: 3px solid #0F2C59;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =========================
   8. Animations
   ========================= */

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card hover effects — removed .card-hover (dead code, see Spec 022) */

/* =========================
   9. Progress Bars
   ========================= */

.progress-bar {
    height: 0.5rem;
    background-color: #E2E8F0;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.progress-safe .progress-bar-fill {
    background-color: #2E7D32;
}

.progress-realistic .progress-bar-fill {
    background-color: #00796B;
}

.progress-aggressive .progress-bar-fill {
    background-color: #B45309;
}

.progress-dream .progress-bar-fill {
    background-color: #C62828;
}

/* =========================
   10. Modal Styles
   ========================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    max-width: 56rem;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* Modal Shell Customization */
.analysis-modal-shell {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    width: min(1220px, 92vw);
    max-width: min(1220px, 92vw);
}

#analysis-modal.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.analysis-modal-close-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
    padding: 0;
}

.analysis-modal-close-btn:hover {
    color: #f87171;
}

.analysis-modal-close-btn:focus {
    outline: none;
}

/* Mobile: Full-screen modal */
@media (max-width: 767px) {
    .analysis-modal-shell,
    #analysis-modal .analysis-modal-shell,
    #healthcheck-modal .analysis-modal-shell {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    #analysis-modal-body,
    #healthcheck-modal-body {
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }
    
    .analysis-modal-close-btn {
        position: fixed !important;
        top: 1rem;
        right: 1rem;
        z-index: 130;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50%;
        padding: 0.35rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        color: #64748b !important;
        backdrop-filter: blur(4px);
    }
}

/* =========================
   11. Step Indicator
   ========================= */

.step-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748B;
}

.step.active {
    color: #0F2C59;
    font-weight: 600;
}

.step.completed {
    color: #2E7D32;
}

.step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.step.active .step-number {
    background-color: #0F2C59;
    color: #FFFFFF;
}

.step.completed .step-number {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.step:not(.active):not(.completed) .step-number {
    background-color: #E2E8F0;
    color: #64748B;
}

.step-connector {
    width: 3rem;
    height: 2px;
    background-color: #E2E8F0;
}

.step-connector.completed {
    background-color: #2E7D32;
}

/* =========================
   12. Form Styles
   ========================= */

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #0F2C59;
    box-shadow: 0 0 0 1px rgba(15, 44, 89, 0.4);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1A202C;
    margin-bottom: 0.25rem;
}

/* =========================
   13. Responsive Navigation
   ========================= */

.mobile-menu {
    position: fixed;
    inset: 0;
    background-color: #0F2C59;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu.open {
    transform: translateX(0);
}

/* =========================
   14. Hero Section
   ========================= */

.hero-gradient {
    background: linear-gradient(135deg, #0F2C59 0%, #2A4D85 100%);
}

/* =========================
   15. Utility Classes
   ========================= */

.text-balance {
    text-wrap: balance;
}

.decorative-line {
    width: 4rem;
    height: 3px;
    background-color: #C6A969;
}

/* Filter stages visualization */
.stage-card {
    position: relative;
    padding: 1rem;
    background-color: #F4F6F8;
    border-radius: 0.5rem;
    border: 1px solid #E2E8F0;
}

.stage-card.passed {
    background-color: #E8F5E9;
    border-color: #A5D6A7;
}

.stage-card.warning {
    background-color: #FFFBEB;
    border-color: #FCD34D;
}

.stage-card.failed {
    background-color: #FFEBEE;
    border-color: #EF9A9A;
}

/* =========================
   16. Progress Fill Classes
   ========================= */

.progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.bg-safe {
    background-color: #2E7D32;
}

.bg-realistic {
    background-color: #00796B;
}

.bg-aggressive {
    background-color: #B45309;
}

.bg-dream {
    background-color: #C62828;
}

/* Text colors for classification */
.text-safe-text {
    color: #2E7D32;
}

.text-realistic-text {
    color: #00796B;
}

.text-aggressive-text {
    color: #B45309;
}

.text-dream-text {
    color: #C62828;
}

.text-low_prob-text,
.text-failed-text {
    color: #64748b; /* slate-500 */
}

/* =========================
   17. Form Select Styles
   ========================= */

.form-select {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 0.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.375rem;
    font-size: 1rem;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select:focus {
    outline: none;
    border-color: #0F2C59;
    box-shadow: 0 0 0 1px rgba(15, 44, 89, 0.4);
}

/* =========================
   18. Table Styles
   ========================= */

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

.data-table th {
    background-color: #F4F6F8;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: #1A202C;
    border-bottom: 2px solid #E2E8F0;
}

.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #E2E8F0;
    color: #64748B;
}

.data-table tr:hover {
    background-color: #F8FAFC;
}

.data-table .font-mono {
    font-family: 'IBM Plex Mono', monospace;
}

/* Spec 085: Insight panel gate table namespace */
.insight-gate-table {
    width: 100%;
    border-collapse: collapse;
}

.insight-gate-table th,
.insight-gate-table td {
    vertical-align: middle;
}

/* Spec 087: enforce colors for HTMX-rendered gate widgets */
.insight-stage-index-badge {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #334155;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.insight-risk-unavailable {
    background-color: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

/* Group section controls (independent collapse + pagination redesign) */
.group-toggle-btn {
    border-radius: 0.75rem;
    padding: 0.25rem 0.375rem;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.group-toggle-btn:hover {
    background-color: #F8FAFC;
}

/* =========================
   19. HTMX Loading States
   ========================= */

.htmx-loading {
    position: relative;
    pointer-events: none;
}

.htmx-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid #F4F6F8;
    border-top-color: #0F2C59;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* =========================
   20. Print Styles
   ========================= */

@media print {
    .no-print {
        display: none !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #E2E8F0;
        break-inside: avoid;
    }

    .bg-navy {
        background-color: #0F2C59 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        font-size: 12pt;
    }
}

/* =========================
   21. Custom Scrollbar
   ========================= */

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94A3B8;
}

/* Button shimmer overlay: dynamic radial gradient via CSS custom properties (--x, --y) */
.btn-shimmer-overlay {
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.8) 0%, transparent 120px);
}

/* ============================================================================
   補足：低機率 (low_prob) 與檢定未過 (failed) 的動態 class 樣式
   ============================================================================ */

/* 1. 膠囊形狀標籤背景（灰底） */
.bg-low_prob-bg {
    background-color: #F1F5F9 !important; /* 淺灰底 (slate-100) */
}

.bg-failed-bg {
    background-color: #E5E7EB !important; /* 稍深的灰底 (gray-200) */
}

/* 2. 標籤內的文字與「錄取機率」數字（深灰字） */
.text-low_prob-text {
    color: #475569 !important; /* 深灰色 (slate-600) */
}

.text-failed-text {
    color: #4B5563 !important; /* 深灰色 (gray-600) */
}

/* ============================================================================
   Spec 087: Department Detail Analysis Card V2
   ============================================================================ */

.department-analysis-card-shell {
    background:
        radial-gradient(circle at 0% 0%, rgba(15, 44, 89, 0.05), transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(198, 169, 105, 0.07), transparent 50%),
        #ffffff;
}

.department-analysis-group {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #ffffff;
    padding: 0.625rem 0.75rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.department-analysis-group.is-active {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(15, 44, 89, 0.08);
}

.department-analysis-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
}

.department-analysis-group-summary {
    margin-top: 0.2rem;
    font-size: 0.73rem;
    line-height: 1.05rem;
    color: #64748b;
}

.department-analysis-group-safe {
    border-left: 3px solid #16a34a;
}

.department-analysis-group-safe.is-active {
    border-color: #bbf7d0;
    border-left-color: #16a34a;
    background-color: #f0fdf4;
}

.department-analysis-group-safe .department-analysis-group-title {
    color: #166534;
}

.department-analysis-group-realistic {
    border-left: 3px solid #0284c7;
}

.department-analysis-group-realistic.is-active {
    border-color: #bae6fd;
    border-left-color: #0284c7;
    background-color: #f0f9ff;
}

.department-analysis-group-realistic .department-analysis-group-title {
    color: #075985;
}

.department-analysis-group-aggressive {
    border-left: 3px solid #d97706;
}

.department-analysis-group-aggressive.is-active {
    border-color: #fde68a;
    border-left-color: #d97706;
    background-color: #fffbeb;
}

.department-analysis-group-aggressive .department-analysis-group-title {
    color: #92400e;
}

.department-analysis-group-dream {
    border-left: 3px solid #e11d48;
}

.department-analysis-group-dream.is-active {
    border-color: #fecdd3;
    border-left-color: #e11d48;
    background-color: #fff1f2;
}

.department-analysis-group-dream .department-analysis-group-title {
    color: #be123c;
}

.department-analysis-group-low_prob {
    border-left: 3px solid #64748b;
}

.department-analysis-group-low_prob.is-active {
    border-color: #cbd5e1;
    border-left-color: #64748b;
    background-color: #f8fafc;
}

.department-analysis-group-low_prob .department-analysis-group-title {
    color: #475569;
}

.department-analysis-group-failed {
    border-left: 3px solid #6b7280;
}

.department-analysis-group-failed.is-active {
    border-color: #d1d5db;
    border-left-color: #6b7280;
    background-color: #f9fafb;
}

.department-analysis-group-failed .department-analysis-group-title {
    color: #4b5563;
}

.department-analysis-current-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.department-analysis-current-badge-safe {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.department-analysis-current-badge-realistic {
    background-color: #e0f2fe;
    border-color: #7dd3fc;
    color: #0c4a6e;
}

.department-analysis-current-badge-aggressive {
    background-color: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.department-analysis-current-badge-dream {
    background-color: #ffe4e6;
    border-color: #fda4af;
    color: #be123c;
}

.department-analysis-current-badge-low_prob {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.department-analysis-current-badge-failed {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #4b5563;
}

.department-analysis-kpi-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #f8fafc;
    padding: 0.65rem 0.75rem;
}

.department-analysis-kpi-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.department-analysis-kpi-value {
    font-family: 'Noto Serif TC', 'Songti TC', serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.department-analysis-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #ffffff;
}

.department-analysis-summary-col {
    padding: 0.9rem 1rem;
}

.department-analysis-summary-col + .department-analysis-summary-col {
    border-top: 1px solid #e2e8f0;
}

.department-analysis-summary-label {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.1rem;
}

.department-analysis-summary-prob {
    margin-top: 0.25rem;
    font-family: 'Noto Serif TC', 'Songti TC', serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
}

.department-analysis-summary-value {
    margin-top: 0.2rem;
    font-family: 'Noto Serif TC', 'Songti TC', serif;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .department-analysis-summary-grid {
        grid-template-columns: 0.9fr 1fr 1.6fr;
    }

    .department-analysis-summary-col + .department-analysis-summary-col {
        border-top: 0;
        border-left: 1px solid #e2e8f0;
    }
}

.department-analysis-brief-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #f8fafc;
    padding: 0.65rem 0.75rem;
}

.department-analysis-brief-title {
    font-size: 11px;
    color: #64748b;
}

.department-analysis-brief-value {
    margin-top: 0.12rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.department-analysis-brief-hint {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.15rem;
    color: #64748b;
}

.department-analysis-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #ffffff;
    padding: 0.65rem 0.75rem;
}

.department-analysis-step.is-done {
    border-color: #bbf7d0;
    background-color: #f0fdf4;
}

.department-analysis-step.is-active {
    border-color: #bfdbfe;
    background-color: #eff6ff;
}

.department-analysis-step-index {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    background-color: #e2e8f0;
    flex-shrink: 0;
}

.department-analysis-step.is-done .department-analysis-step-index {
    color: #166534;
    background-color: #bbf7d0;
}

.department-analysis-step.is-active .department-analysis-step-index {
    color: #0f2c59;
    background-color: #bfdbfe;
}

.department-analysis-step-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1rem;
}

.department-analysis-step-desc {
    margin-top: 0.08rem;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 0.95rem;
}