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

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

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@400;600;700;900&display=swap');

/* ============================================================
   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;
}

/* =========================
   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;
}

/* =========================
   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;
}

.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);
}

/* =========================
   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: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.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);
}

/* =========================
   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;
}

/* =========================
   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;
}

/* 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);
}