/* Reset and Base Styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    background-color: #1A1A1A;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
}

/* Spacing System */
:root {
    --spacing-unit: 0.25rem;
    --spacing-1: calc(var(--spacing-unit) * 1);
    --spacing-2: calc(var(--spacing-unit) * 2);
    --spacing-3: calc(var(--spacing-unit) * 3);
    --spacing-4: calc(var(--spacing-unit) * 4);
    --spacing-5: calc(var(--spacing-unit) * 5);
}

/* Header Styles (shared across pages) */
header {
    padding: var(--spacing-3) var(--spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.875rem;
    color: #00A3E0;
}

/* Profile Dropdown (shared across pages) */
.profile-dropdown {
    position: relative;
}

.dropdown-toggle {
    width: 2.5rem;
    height: 2.5rem;
    background: #00A3E0;
    border-radius: 50%;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #333333;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
    width: 9.375rem;
    z-index: 1000;
}

.dropdown-menu a {
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    color: #FFFFFF;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.875rem;
}

.dropdown-menu a:hover {
    background: #00A3E0;
}

.hidden {
    display: none !important;
}

/* Main Content */
main {
    flex: 1;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Center Search Bar and Buttons as a Group on Teacher Home Page */
main .search-and-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    margin-top: -2rem; /* Move the group a little higher */
}

/* Shared Bubble Styles (used by Select Class, Phase Select, Teacher Home) */
body:not(:has(.search-header)) h2 {
    color: #00A3E0;
    margin-bottom: var(--spacing-4);
    font-size: 1.25rem;
}

body:not(:has(.search-header)) h3 {
    color: #FFFFFF;
    margin-bottom: var(--spacing-1); /* Reduced spacing for Last Used Class */
    font-size: 1rem;
}

body:not(:has(.search-header)) .bubble-container {
    position: relative;
    width: 100%;
    max-width: 75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) 0;
}

body:not(:has(.search-header)) .bubble-container.last-used {
    background: #222222; /* Darker background for distinction */
    border: 2px solid #00A3E0; /* Bolder border */
    border-radius: 10px;
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    box-shadow: 0 0 8px rgba(0, 163, 224, 0.3); /* Subtle glow */
}

body:not(:has(.search-header)) .bubble-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allow wrapping for three-column layout */
    gap: var(--spacing-3);
    justify-content: center;
    align-items: center;
}

body:not(:has(.search-header)) .bubble-group.three-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three-column layout */
    gap: var(--spacing-4); /* Increased spacing between buttons */
    justify-items: center;
    width: 100%;
    max-width: 45rem; /* Constrain width for better column alignment */
}

body:not(:has(.search-header)) .bubble-group.side {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

body:not(:has(.search-header)) .bubble {
    background: #333333;
    border-radius: 2rem;
    padding: var(--spacing-2);
    width: 100%;
    max-width: 10rem;
    text-align: center;
    cursor: pointer;
    overflow-wrap: break-word;
    color: #FFFFFF;
}

body:not(:has(.search-header)) .bubble span.pipe {
    padding: 0 0.5rem;
}

body:not(:has(.search-header)) .bubble:hover:not(.disabled) {
    transform: scale(1.05);
    border: 2px solid #00A3E0;
}

body:not(:has(.search-header)) .bubble.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body:not(:has(.search-header)) .bubble .icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: var(--spacing-2);
}

body:not(:has(.search-header)) .bubble span {
    font-size: 0.875rem;
}

body:not(:has(.search-header)) .bubble.disabled:hover::after {
    content: 'Coming Soon';
    position: absolute;
    background: #333333;
    color: #FFFFFF;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: 5px;
    font-size: 0.75rem;
    top: -1.875rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

body:not(:has(.search-header)) .last-used-class {
    margin-bottom: var(--spacing-4); /* Space below Last Used Class */
}

/* Responsive Design for Shared Elements */
@media (max-width: 768px) {
    body:not(:has(.search-header)) .bubble-container {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-3);
    }
    body:not(:has(.search-header)) .bubble-container.last-used {
        padding: var(--spacing-2);
        margin-bottom: var(--spacing-3);
    }
    body:not(:has(.search-header)) .bubble-group.main {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-3);
    }
    body:not(:has(.search-header)) .bubble-group.three-columns {
        grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */
        gap: var(--spacing-3);
    }
    body:not(:has(.search-header)) .bubble {
        max-width: 15rem;
        padding: var(--spacing-2);
    }
    body:not(:has(.search-header)) .bubble-group.side {
        display: flex !important;
        position: static;
        transform: none;
        margin-top: var(--spacing-4);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-2);
    }
    .tabs {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }
    .tabs .tab {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: 0.875rem;
    }
    input[type="text"], input[type="email"], input[type="tel"], input[type="file"] {
        max-width: 100%;
    }
    select {
        max-width: 100%;
    }
    .field-group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-1);
    }
    .add-more, .remove {
        margin-left: 0;
        margin-top: var(--spacing-1);
    }
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding: var(--spacing-2) var(--spacing-3);
    }
    header h1 {
        font-size: 1.5rem;
    }
    .dropdown-menu {
        width: 7.5rem;
        right: -0.625rem;
    }
    .dropdown-menu a {
        font-size: 0.75rem;
        padding: var(--spacing-2) var(--spacing-3);
    }
    main {
        padding: var(--spacing-3);
    }
    h2 {
        font-size: 1.125rem;
    }
    h3 {
        font-size: 0.875rem;
    }
    footer {
        font-size: 0.625rem;
        padding: var(--spacing-1);
    }
    .flash-message {
        top: 3.125rem;
        width: 90%;
        max-width: 25rem;
        font-size: 0.75rem;
        padding: var(--spacing-2) var(--spacing-3);
    }
}

@media (max-width: 480px) {
    input[type="submit"] {
        font-size: 0.75rem;
    }
    body {
        font-size: 12px;
    }
    body:not(:has(.search-header)) .bubble-group.three-columns {
        grid-template-columns: 1fr; /* Single column on very small screens */
        gap: var(--spacing-2);
    }
    body:not(:has(.search-header)) .bubble {
        max-width: 12rem;
        padding: var(--spacing-2);
    }
    .flash-message {
        top: 2.5rem;
        font-size: 0.625rem;
        padding: var(--spacing-1) var(--spacing-2);
    }
    .tab {
        font-size: 0.75rem;
        padding: var(--spacing-1) var(--spacing-2);
    }
    input[type="text"], input[type="email"], input[type="tel"], input[type="file"] {
        max-width: 100%;
    }
    select {
        max-width: 100%;
    }
    header {
        padding: var(--spacing-2);
    }
    header h1 {
        font-size: 1.25rem;
    }
    .dropdown-menu {
        width: 6.25rem;
        right: -0.3125rem;
    }
    .dropdown-menu a {
        font-size: 0.625rem;
        padding: var(--spacing-1) var(--spacing-2);
    }
    main {
        padding: var(--spacing-2);
    }
    h2 {
        font-size: 1rem;
    }
    h3 {
        font-size: 0.75rem;
    }
    footer {
        font-size: 0.5rem;
    }
}

/* Flash Messages (Shared) */
.flash-message {
    position: fixed;
    top: 3.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 5px;
    text-align: center;
    font-size: 0.875rem;
    z-index: 1500;
    width: 80%;
    max-width: 31.25rem;
    background: #4CAF50; /* The green color from .success */
    color: #FFFFFF;
}

.flash-message.error {
    background: #F44336;
    color: #FFFFFF;
}

.flash-message.success {
    background: #4CAF50;
    color: #FFFFFF;
}

/* Footer (Shared) */
footer {
    text-align: center;
    padding: var(--spacing-2);
    color: #B0B0B0;
    font-size: 0.75rem;
}


/* Profile Page Specific Styles */
.tabs {
    display: flex;
    border-bottom: 1px solid #333333;
    margin-bottom: var(--spacing-4);
}

.tabs .tab {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 1rem;
    color: #00A3E0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab:hover {
    background-color: #333333;
}

.tab.active {
    border-bottom: 2px solid #00A3E0;
    font-weight: bold;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

h2 {
    font-size: 1.25rem;
    color: #00A3E0;
    margin-bottom: var(--spacing-2);
}

/* GyanSutra Heading on Teacher Home Page */
h2.teacher-home-heading {
    color: #00A3E0;
    font-size: 3rem; /* Larger font size like Google's logo */
    margin-bottom: var(--spacing-4);
    text-align: center;
}

form {
    margin-top: var(--spacing-4);
    width: 100%;
    max-width: 31.25rem;
}

label {
    font-size: 0.875rem;
    color: #00A3E0;
    margin-right: var(--spacing-2);
    display: block;
    margin-bottom: var(--spacing-1);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="file"] {
    padding: var(--spacing-2);
    border: 1px solid #333333;
    border-radius: 5px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: 0.875rem;
    width: 100%;
    max-width: 18.75rem;
    margin-bottom: var(--spacing-2);
    box-sizing: border-box;
}

select {
    padding: var(--spacing-2);
    border: 1px solid #333333;
    border-radius: 5px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: 0.875rem;
    cursor: pointer;
    width: 100%;
    max-width: 20.25rem;
    margin-bottom: var(--spacing-2);
    box-sizing: border-box;
}

input[type="submit"] {
    width: clamp(120px, 40%, 200px);
    min-width: 120px;
    min-height: 44px;
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 4vw, 1.5rem);
    font-size: clamp(0.875rem, 2vw, 1rem);
    border: none;
    border-radius: 5px;
    background-color: #00A3E0;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="submit"]:hover {
    background-color: #008BBF;
}

.add-more {
    font-size: 0.875rem;
    color: #00A3E0;
    cursor: pointer;
    margin-left: var(--spacing-2);
}

.add-more:hover {
    text-decoration: underline;
}

.field-group {
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.remove {
    color: #F44336;
    cursor: pointer;
    margin-left: var(--spacing-2);
    font-size: 0.875rem;
}

.remove:hover {
    text-decoration: underline;
}

.document-list {
    margin-top: var(--spacing-4);
}

.document-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.document-item a {
    color: #00A3E0;
    text-decoration: none;
    font-size: 0.875rem;
}

.document-item a:hover {
    text-decoration: underline;
}

.document-item .delete {
    color: #F44336;
    cursor: pointer;
    margin-left: var(--spacing-2);
    font-size: 0.875rem;
}

.document-item .delete:hover {
    text-decoration: underline;
}

/* Syllabus Page Styles */
.syllabus-index {
    width: 100%;
    max-width: 50rem;
    margin: 0 auto;
}

.chapter-entry {
    margin-bottom: var(--spacing-3);
}

.chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-1);
}

.chapter-title {
    font-weight: bold;
    font-size: 1rem;
    color: #FFFFFF;
    cursor: pointer; /* Indicate hoverable for tooltip */
}

.chapter-title:hover {
    text-decoration: underline; /* Visual cue for hover */
}

.chapter-hours {
    font-size: 0.875rem;
    color: #B0B0B0;
}

.subtopics {
    margin-left: var(--spacing-5); /* Indent subtopics */
    list-style-type: disc;
    padding-left: var(--spacing-3);
}

.subtopics li {
    font-size: 0.875rem;
    color: #D0D0D0;
    margin-bottom: var(--spacing-1);
}

/* Responsive Design for Syllabus */
@media (max-width: 768px) {
    .syllabus-index {
        max-width: 100%;
    }
    .chapter-title {
        font-size: 0.875rem;
    }
    .chapter-hours {
        font-size: 0.75rem;
    }
    .subtopics {
        margin-left: var(--spacing-4);
    }
    .subtopics li {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .chapter-title {
        font-size: 0.75rem;
    }
    .chapter-hours {
        font-size: 0.625rem;
    }
    .subtopics {
        margin-left: var(--spacing-3);
    }
    .subtopics li {
        font-size: 0.625rem;
    }
}

/* Subtab Styles for Professional Info */
.subtabs {
    display: flex;
    border-bottom: 1px solid #333333;
    margin-bottom: var(--spacing-4);
}

.subtab {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 0.875rem;
    color: #00A3E0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    background: none;
    border: none;
}

.subtab:hover {
    background-color: #333333;
}

.subtab.active {
    border-bottom: 2px solid #00A3E0;
    font-weight: bold;
}

.subtab-content {
    display: none;
}

.subtab-content.active {
    display: block;
}

/* Form Styles */
textarea {
    padding: var(--spacing-2);
    border: 1px solid #333333;
    border-radius: 5px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: 0.875rem;
    width: 100%;
    max-width: 800px;
    margin-bottom: var(--spacing-2);
    box-sizing: border-box;
    resize: vertical;
    min-height: 5rem;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: 0.875rem;
    color: #FFFFFF;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .subtabs {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }
    .subtab {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: 0.75rem;
    }
    textarea {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .subtab {
        font-size: 0.625rem;
        padding: var(--spacing-1) var(--spacing-2);
    }
}

/* Google-Style Sign-In Page */
main.sign-in-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.sign-in-box {
    background-color: #2A2A2A; /* Darker shade to match app theme */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 800px;
    display: flex;
    overflow: hidden;
}

.sign-in-left {
    background-color: #333333; /* Slightly lighter dark shade for contrast */
    padding: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sign-in-left h1 {
    font-size: 24px;
    margin: 0 0 20px;
    color: #00A3E0; /* Match app accent color */
}

.sign-in-left p {
    font-size: 16px;
    color: #B0B0B0; /* Lighter gray for readability */
    margin: 0;
}

.sign-in-right {
    padding: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sign-in-right .field-group {
    margin-bottom: 20px;
}

.sign-in-right .field-group input,
.sign-in-right .field-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #555555; /* Slightly lighter border for contrast */
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background: #1A1A1A; /* Match input background */
    color: #FFFFFF;
}

.sign-in-right .field-group input:focus,
.sign-in-right .field-group select:focus {
    border-color: #00A3E0; /* Match app accent color */
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 163, 224, 0.2);
}

.form-links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.create-account,
.forgot-password {
    color: #00A3E0; /* Match app link color */
    text-decoration: none;
    font-size: 14px;
}

.create-account:hover,
.forgot-password:hover {
    text-decoration: underline;
}

.sign-in-button {
    background-color: #00A3E0; /* Match app button color */
    color: #FFFFFF;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}

.sign-in-button:hover {
    background-color: #008BBF; /* Slightly darker on hover */
}

/* Responsive design for sign-in page */
@media (max-width: 768px) {
    .sign-in-box {
        flex-direction: column;
    }

    .sign-in-left,
    .sign-in-right {
        padding: 20px;
    }

    .sign-in-left {
        text-align: center;
    }
}

/* Pagination for Signup Form */
.page {
    display: none;
}

.page.active {
    display: block;
}

.pagination-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#previous-button,
#next-button {
    background-color: #555555; /* Neutral gray for navigation buttons */
    color: #FFFFFF;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    width: 120px;
}

#previous-button:hover,
#next-button:hover {
    background-color: #666666;
}

/* Autosuggest Dropdown */
.suggestion-box {
    position: absolute;
    top: calc(100% + var(--spacing-1)); /* Position below the search bar with a small gap */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally relative to search-container */
    width: 100%;
    max-width: 584px;
    background: #333333;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
    z-index: 1000;
    display: none;
}

.suggestion-item {
    padding: var(--spacing-2) var(--spacing-3);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 0.875rem;
}

.suggestion-item:hover,
.suggestion-item.selected {
    background: #00A3E0;
}

@media (max-width: 768px) {
    .suggestion-box {
        max-width: 100%;
    }
    .suggestion-item {
        font-size: 0.75rem;
        padding: var(--spacing-1) var(--spacing-2);
    }
}

/* Two-column layout for School Board checkboxes on Signup Page 2 */
.page-2 .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two equal-width columns */
    gap: var(--spacing-1);
}

/* Add this to common.css */

.validation-message {
    font-size: 0.8rem;
    height: 1.2rem; /* Reserve space to prevent layout shift */
    margin-top: -15px; /* Adjust spacing */
    margin-bottom: 10px;
    padding-left: 5px;
}

.validation-message.success {
    color: #4CAF50; /* Green */
}

.validation-message.error {
    color: #F44336; /* Red */
}

/* Add this to the end of common.css */

/* --- Signup Form Alignment Fix --- */
.sign-in-right .field-group {
    display: flex;
    flex-direction: column; /* Stack label on top of the input */
    align-items: flex-start; /* Align items to the left */
    gap: 4px; /* Add a small space between label and input */
}

.sign-in-right .field-group label {
    margin-bottom: 0; /* Remove default bottom margin if any */
    /* The label styling is inherited from the existing rules */
}

/* Force all input types to be the same width */
.sign-in-right .field-group input,
.sign-in-right .field-group select,
.sign-in-right .field-group textarea {
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't affect the final width */
}

.input-with-button { display: flex; gap: 10px; align-items: center; width: 100%; }
.input-with-button input { flex-grow: 1; margin-bottom: 0 !important; }
.input-with-button button { flex-shrink: 0; }