/*******************************************************************************
 * FIT@HCMUS Brand Identity Custom Theme - LimeSurvey 6
 * Khoa Cong nghe thong tin - Truong Dai hoc Khoa hoc tu nhien, DHQG-HCM
 * Primary Brand Color: #00558F (FIT Navy Blue)
 * Updated: 2026-10-23
 ******************************************************************************/

:root {
    --bs-primary: #00558F;
    --bs-primary-rgb: 0, 85, 143;
    --bs-link-color: #00558F;
    --bs-link-hover-color: #004880;
    --fit-blue-dark: #004880;
    --fit-blue-deep: #003660;
    --fit-blue-light: #1976D2;
    --fit-blue-soft: #e8f1f8;
}

/* --- 1. Header & Navigation Bar --- */
#survey-nav.navbar,
.navbar.fixed-top {
    background-color: #ffffff !important;
    border-bottom: 2px solid #00558F !important;
    box-shadow: 0 2px 10px rgba(0, 85, 143, 0.08) !important;
    transition: all 0.3s ease;
}

.navbar-brand.logo-container .logo {
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain;
    padding: 2px 0;
}

/* --- 2. Typography & Survey Headings --- */
.survey-name,
h1.survey-name {
    color: #00558F !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem !important;
}

.group-title,
.group-name {
    color: #004880 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* --- 3. Progress Bar --- */
.progress {
    height: 10px !important;
    border-radius: 5px !important;
    background-color: #e2e8f0 !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, #00558F 0%, #1976D2 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 85, 143, 0.3) !important;
    transition: width 0.4s ease;
}

/* --- 4. Buttons (Primary, Outline, Hover) --- */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.action--ls-submit {
    background-color: #00558F !important;
    border-color: #00558F !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 2px 4px rgba(0, 85, 143, 0.25) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
    background-color: #004880 !important;
    border-color: #004880 !important;
    box-shadow: 0 4px 8px rgba(0, 85, 143, 0.35) !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: #00558F !important;
    border-color: #00558F !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    background-color: #00558F !important;
    border-color: #00558F !important;
    color: #ffffff !important;
}

/* --- 5. Question Containers & Cards --- */
.question-container {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e5e9f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.question-container:focus-within,
.question-container.ls-focused {
    border-color: #00558F !important;
    box-shadow: 0 0 0 3px rgba(0, 85, 143, 0.12) !important;
}

.question-text,
.question-title-container {
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 1.05rem !important;
}

/* Mandatory asterisk */
.ls-question-mandatory,
.text-danger.asterisk {
    color: #d32f2f !important;
    font-weight: bold;
}

/* --- 6. Form Controls, Radios & Checkboxes --- */
.form-check-input:checked {
    background-color: #00558F !important;
    border-color: #00558F !important;
}

.form-check-input:focus {
    border-color: #00558F !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 85, 143, 0.25) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #00558F !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 85, 143, 0.2) !important;
}

/* Array & Table Matrix header */
.table thead th,
.matrix thead th {
    background-color: var(--fit-blue-soft) !important;
    color: #004880 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

/* --- 7. Survey List Page (Home) --- */
#surveys-list-jumbotron {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #00558F !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    padding: 2rem !important;
}

/* Footer styling */
#survey-nav + footer,
footer[role="contentinfo"] {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 1.5rem 0 !important;
    margin-top: 3rem !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
}

footer a {
    color: #00558F !important;
    text-decoration: none;
}

footer a:hover {
    color: #004880 !important;
    text-decoration: underline;
}

/* --- Survey List Page Enhancements (2026-10-23) --- */
.survey-list-main-container {
    max-width: 900px !important;
    margin-top: 1rem !important;
    padding-top: 0.5rem !important;
}

#surveys-list-jumbotron {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #00558F !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 85, 143, 0.08) !important;
    padding: 1.5rem 1.5rem 1.25rem 1.5rem !important;
}

.fit-main-logo {
    max-height: 100px !important;
    width: auto !important;
    object-fit: contain;
    transition: transform 0.2s ease;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.site-admin-name {
    letter-spacing: -0.01em;
}

.site-admin-email a:hover {
    color: #003660 !important;
    text-decoration: underline !important;
}