/* ==========================================================================
    1. DESIGN TOKENS
    Shared variable system ensuring visual parity with the Dashboard and Teams pages.
    ========================================================================== */

:root {
    --bg: #fbfaf8;
    --bg-page: #f3efe8;
    --card: #ffffff;
    --card-soft: #f8f5f0;

    --text: #1f1f1f;
    --muted: #5f6368;

    --line: #d9d1c7;
    --line-soft: #eee7dc;

    --accent: #f56600;       /* Clemson Orange */
    --accent-soft: #fde6d2;
    --accent-strong: #d95d00;
    --purple: #522d80;       /* Regalia Purple */
    --purple-dark: #3b1f5f;

    --radius: 16px;
    --shadow: 0 12px 28px rgba(82, 45, 128, 0.08);
    --shadow-soft: 0 8px 20px rgba(82, 45, 128, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/*most styling in this is made to mock the qualtrics survey style, it is a very clean and simple design that is easy to navigate and understand, it also has a nice color scheme that is consistent with the dashboard and teams page, the use of the purple and orange colors helps to create a cohesive look and feel across the entire application*/
/*this file has lots of repetitive styling because of the large size of the html file with all the differen types and categories of questions being seperate.
*/
body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(to bottom, var(--bg-page) 0%, #f8f5f0 35%, #fbfaf8 100%);
    color: var(--text);
    min-height: 100vh;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
}

/* .app: The main white container with localized scrolling and constraint */
.app {
    width: 100%;
    max-width: 1100px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem 1.6rem;
}

/* ==========================================================================
    2. HEADER & NAVIGATION
    ========================================================================== */
header {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-bottom: 0.95rem;
    border-bottom: 3px solid var(--accent);
    margin-bottom: 1rem;
}

.top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
/*houses the logo image and adds some styling to make it look nice and consistent with the dashboard and teams page, also adds a box shadow and border to make it pop more*/
.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(245, 102, 0, 0.16);
    border: 2px solid rgba(245, 102, 0, 0.22);
}

.brand-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--purple);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.92rem;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(245, 102, 0, 0.16);
    border: 2px solid rgba(245, 102, 0, 0.22);
}

.brand h1 {
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    color: var(--purple);
}

.brand p {
    font-size: 0.82rem;
    color: var(--muted);
}

/* .pill: Unified style for selection menus and status badges */
.controls {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pill {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    font-size: 0.8rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: none;
    transition: all 0.15s ease-out;
}

.pill:hover {
    background: #ffffff;
    border-color: #b9ab98;
    box-shadow: 0 4px 10px rgba(82, 45, 128, 0.08);
    transform: translateY(-1px);
}

.pill label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--purple);
    font-weight: 700;
}

.pill select {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
}

.mode-badge {
    color: var(--purple);
    background: var(--accent-soft);
    border: 1px solid #f3c9ab;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}

/* ==========================================================================
    3. NAVIGATION BAR
    ========================================================================== */
.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nav-links a {
    text-decoration: none;
    font-size: 0.8rem;
    color: var(--purple);
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    transition: all 0.15s ease-out;
}

.nav-links a:hover, .nav-links a.active {
    background: #ffffff;
    border-color: var(--line);
    color: var(--accent-strong);
    box-shadow: 0 4px 10px rgba(82, 45, 128, 0.08);
    transform: translateY(-1px);
}

/* Primary Action: High-contrast button for dashboard return */
.cta {
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    transition: all 0.15s ease-out;
}

.cta:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    transform: translateY(-1px);
}

/* ==========================================================================
    4. SURVEY COMPONENTS & MATRIX TABLES
    These styles handle the Likert-scale grid layout (1-5).
    ========================================================================== */
.section-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem 1.05rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1rem;
}

.section-card h2 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: var(--purple);
}

.section-card .subtitle {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

.section-title {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--purple);
}

.scale-note {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
    margin-bottom: 0.65rem;
}

/* .matrix-wrap: Handles horizontal overflow for mobile users */
.matrix-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

table.matrix {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px; 
}

.matrix thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0.85rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--line);
    background: #fcfbf9;
}

/* Vertical Divider Logic: Differentiating the question from the responses */
.matrix thead th:first-child {
    text-align: left;
    width: 48%;
    border-right: 2px solid var(--line);
    color: var(--purple);
}

.matrix tbody td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    background: #ffffff;
}

.matrix tbody tr:last-child td {
    border-bottom: none;
}

.matrix tbody td:first-child {
    border-right: 2px solid var(--line);
}

.q {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.4;
}

.cell {
    text-align: center;
    width: 10.4%;
}
/* Radio buttons: Custom styling for better visibility and interactivity */
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ==========================================================================
    5. SUBMISSION & RESPONSIVENESS
    ========================================================================== */
.submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.8rem;
}
/* Submit Button */
.submit-row button {
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.6rem 1.25rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    cursor: pointer;
    box-shadow: none;
    font-family: inherit;
    transition: all 0.15s ease-out;
}

.submit-row button:hover {
    transform: translateY(-1px);
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}
/*looks good, the media query makes it so that the survey is responsive and looks good on mobile devices, it adjusts the padding and layout of the survey to make it more user friendly on smaller screens*/
@media (max-width: 680px) {
    body { padding: 1rem; }
    .app { padding: 1.05rem 1.05rem 1.2rem; border-radius: 22px; }
    .section-card { padding: 0.9rem 0.9rem; }
    .cta { width: 100%; text-align: center; }
}