@media (max-width: 1000px) {

    .content,
    .content-students {
        padding: 10px;
        flex-direction: column;
    }

    .create-group,
    .students-list {
        max-width: none;
        width: 100%;
    }

    .existing-groups,
    .details {
        width: 100%;
    }

    #performance-table {
        width: 100%;
        overflow-x: auto;
        /* Allows horizontal scrolling on small devices */
        overflow-y: hidden;
        /* Prevents vertical scrolling within the table */
    }

    .box-centered-top {
        width: 100%;
        /* Full width on smaller screens */
        margin-top: 5px;
        /* Reduced margin on smaller screens */
        max-height: auto;
        /* Smaller max height on smaller screens */
    }

    .chart-card {
        max-width: 1000px;
        /* Ensure the card does not exceed 1000px */
        width: 100%;
        /* Full width on smaller screens */
        margin-bottom: 0px;
        /* Space between stacked cards */
    }

    .card {
        padding: 10px;
        margin: 10px;
    }

    .center-content {
        margin-top: 0;
        height: auto;
        padding: 1rem;
        flex-direction: column;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr !important;
        /* Add !important to ensure override */
        grid-template-rows: auto !important;
        /* Add !important to ensure override */
        grid-template-areas:
            "login"
            "testimonials"
            "sample-reports"
            "about-us";
        /* Define the order of the elements */
        gap: 1rem;
        width: 100%;
        height: auto;
    }

    .grid-item {
        width: 100%;
        padding: 1rem;
    }

    .login-box {
        max-width: 400px;
        width: 100%;
        padding: 1rem;
    }

    .testimonials {
        grid-area: testimonials;
    }

    .sample-reports {
        grid-area: sample-reports;
    }

    .about-us {
        grid-area: about-us;
        display: block;
        /* Ensure about-us is displayed in the new order */
    }

    .modal-content {
        width: 90%;
        /* Reduce width for small screens */
        padding: 15px;
        /* Adjust padding */
    }

    .modal-content h2 {
        font-size: 1.5em;
        /* Reduce font size for small screens */
    }

    .content-students.students-visible .student-section,
    .content-students.students-visible .goal-section {
        transform: none !important;
    }

    .content-students.students-visible .goal-section {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        flex: 1 1 auto !important;
    }

}

@media (max-width: 1000px) {

    /* 1) Hide collapsed accordions */
    .metadata-container.collapsed>.goal-item {
        display: none !important;
    }

    /* 2) Expanded containers get vertical grid layout */
    .metadata-container:not(.collapsed)>.goal-item {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows:
            auto
            /* content */
            auto
            /* date + pills */
            auto
            /* graph */
            auto
            /* selector */
            auto;
        /* reports */
        grid-template-areas:
            "content"
            "data"
            "graph"
            "selector"
            "reports";
        gap: 1rem !important;
    }

    .chart-toggle-vertical {
        margin-left: 0px !important;
        align-items: stretch !important;
        margin-top: 0px !important;
    }


    /* 3) Slot elements into grid areas */
    .metadata-container:not(.collapsed)>.goal-item>.goal-content {
        grid-area: content !important;
    }

    .metadata-container:not(.collapsed)>.goal-item>.goal-data {
        grid-area: data !important;
    }

    .metadata-container:not(.collapsed)>.goal-item>.goal-graph {
        grid-area: graph !important;
    }

    .metadata-container:not(.collapsed)>.goal-item>.column-selector-section {
        grid-area: selector !important;
    }

    .metadata-container:not(.collapsed)>.goal-item>.progress-reports {
        grid-area: reports !important;
    }
}

/* 3. (Responsive) – on narrow screens let it drop to one column */
@media (max-width: 768px) {
    .goal-item {
        display: block !important;
        width: 100% !important;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .goal-item>* {
        box-sizing: border-box;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow-x: auto;
    }

    .chart-toggle-vertical {
        transform: scale(1) !important;
        /* no forced scale */
        margin-left: 0px !important;
        align-items: stretch !important;
        margin-top: 0px !important;
    }


    .goal-content {
        margin-right: 0 !important;
    }

    .goal-data {
        flex-direction: column !important;
    }

    .goal-data {
        transform: scale(1) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .flatpickr-calendar.inline {
        transform: scale(0.9) !important;
        /* Scale down the calendar */
        margin-bottom: 0px !important;
        /* Remove bottom margin */
    }

    .selector-wrapper {
        margin: 0 !important;
        padding: 10px !important;
    }

    .statistics-table {
        font-size: 0.70rem !important;
    }

    .statistics-area {
        padding: 0px !important;
    }
}


/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    min-height: 100%;
}

.logo {
    display: flex;
    /* Makes .logo a flex container */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    height: 70px;
    /* Set a specific height, adjust as needed */
    background-color: transparent;
    /* Ensure no background color is applied here */
}

.logo img {
    max-height: 55px;
    /* Adjust as needed */
    width: auto;
    /* Maintain aspect ratio */
    margin-left: 2px;
    /* Adjust this value to move the logo to the right */
}

.luxbar-menu-material-indigo {
    background-color: #1a375c !important;
    /* Override background color */
}

/* Base styles for navigation links */
.luxbar-menu-material-indigo .luxbar-item a {
    padding: 18px 10px;
    /* Adjust padding for better spacing */
    display: block;
    text-decoration: none;
    color: #fff;
    /* Ensures text color is white */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition for both properties */
    background-color: #1a375c;
    /* Default background color */
}

/* Hover effects for navigation links */
.luxbar-menu-material-indigo .luxbar-item a:hover {
    background-color: #041c27;
    /* Darker shade for hover */
    color: #ffffff;
    /* Ensures text color is white on hover */
}

.luxbar-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    text-decoration: none;
}

/* To avoid any flash-back, ensure all links within luxbar-menu-material-indigo have the same default styles */
.luxbar-menu-material-indigo a {
    color: #FFFFFF;
    /* White text for all links within the indigo menu */
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-item {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    white-space: nowrap;
    /* Prevents text from wrapping */
}

.image-preview {
    display: none;
    position: fixed;
    max-width: 60%;
    max-height: 60%;
    z-index: 1050;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    border: 1px solid #ccc;
    object-fit: contain;
}

.dropdown-item:hover .image-preview {
    display: block;
}

.dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    /* Ensures text alignment is uniform */
}

.dropdown-menu a.sub-item {
    padding-left: 32px;
    /* Adds indentation to sub-items */
}

.dropdown-menu a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown:hover {
    color: #f5ffc8;
}

.school-selector {
    display: flex;
    align-items: center;
    /* vertically center */
    justify-content: center;
    /* horizontally center its contents */
    height: 100%;
    /* Stretch to fill the height of the navbar */
    margin: 0px 5px;
}

.school-selector select {
    min-width: 160px;
    /* gives you room for longer names */
    height: 90%;
    /* stretch to fill the navbar height */
    padding: 6px 12px;
    /* a little more breathing room */
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    /* crisp white */
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    /* center the option text */
    cursor: pointer;
    appearance: none;
    /* remove default OS styling */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #4f6a8d;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    /* This will cover the entire body even if the content is longer */

}

.content {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    /* Adjust this value to match the height of the navbar */
    width: 100%;
    /* Ensure it takes full width */
    transition: margin-top 0.3s ease;
    /* Smooth transition for margin changes */
}

/* replace your .content-students flex with: */
.content-students {
    display: flex;
    gap: 1rem;
    margin-top: 60px;
    padding: 0 1rem;
    overflow: visible;
    /* hide the bits that collapse */
}

.content-students ul {
    background-color: #e1eefa;
    padding: 0;
    /* Removes padding from the ul element */
    list-style-type: none;
    /* Removes bullets */
    width: 100%;
    /* Ensures the ul takes full width */
}

.content-students ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid #646f79;
    border-radius: 5px;
    /* Adjust radius to get the desired roundness */
    padding: 10px;
    /* Adjust padding here if needed */
    margin: 0;
    /* Ensure no margin that could disrupt the full width */
    width: 100%;
    /* Ensure li takes full width of ul */
    transition: background-color 0.3s;
    /* Smooth transition for background color changes */
    background-color: #c7e9ff;
    /* Subtle light grey background color as default */

}

/* when one panel is “active”, hide the rest */
.content-students.one-active .manage-section:not(.active) {
    display: none;
}

.content-students ul li:hover,
.content-students ul li.selected-student,
.content-students ul li.selected-group {
    background-color: #90c0eb;
    font-weight: bold;
    color: #333;
    width: 100%;
    /* Cover full width on hover */
}

/* When we slide Students over the Caseload, we don't want a gap between Students and Goals */
.content-students.students-visible {
    gap: 0;
}

.content-students ul li:hover .group-name,
.selected-group .group-name,
.selected-student .group-name {
    font-weight: 400;
    /* slightly bolder on hover/select */
}

.caseload-section,
.student-section {
    flex: 0 0 260px;
    position: relative;
    /* so Students can paint above Caseload */
    transition: flex-basis 0.3s ease, transform 0.3s ease;
    z-index: 0;
}

.goal-section {
    flex: 1 1 auto;
    /* fill whatever’s left */
    min-width: 0;
    /* allow it to shrink if needed */
    z-index: 0;
    transition: transform 0.3s ease;
    /* ← add this */

}

/* 🔵 Slide BOTH Students and Goals left together */
.content-students.students-visible .student-section,
.content-students.students-visible .goal-section {
    transform: translateX(-220px);
}

/* (keep your student-section z-index so it sits over Caseload) */
.content-students.students-visible .student-section {
    z-index: 1;
    margin-left: -1rem;
}

/* Goals ride along with the shift and “stretch” to the right */
.content-students.students-visible .goal-section {
    z-index: 0;
    margin-left: 0;

    flex: 1 1 auto;
    min-width: 0;

    /* make the card 220px wider to make up for the left shift */
    width: calc(100% + 220px);
    margin-right: -220px;  /* cancel the extra width in the flex layout */
}

.content-students.students-visible .caseload-section {
    flex-basis: 30px;
    /* leave a 20px peek */
}

/* Only vertical margins on the panels in this row */
.content-students>.box {
    margin: 0.5rem 0;
    /* top/bottom 0.5rem, left/right 0 */
}

.manage-section {
    flex: 1;
    /* each panel gets equal share when siblings are present */
    transition: all 0.3s;
}

.manage-section>h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

/* when a panel goes full‐page */
.manage-section.fullpage {
    grid-column: 1 / -1;
    /* span the entire grid */
    z-index: 10;
    /* float above anything else */
}

/* hide siblings when one is full‐page */
.manage-section.fullpage~.manage-section,
.manage-section.fullpage+.manage-section,
.content-students.fullscreen .manage-section:not(.fullpage) {
    display: none;
}

.saved-success {
    background-color: #d4edda !important;
    transition: background-color 0.3s ease;
}


.toggle-btn {
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

#columnNamesDisplay ul {
    list-style-type: none;
    /* Removes the default list-style */
    padding-left: 0;
    /* Removes default padding */
    margin-block-start: 0;
    /* Removes default top margin */
    margin-block-end: 0;
    /* Removes default bottom margin */
    background: #f8f8f8;
    /* Light background for the entire list */
    border-radius: 5px;
    /* Rounded corners for the list */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    width: 100%;
    /* Ensures the list takes full width of its container */
    background-color: hwb(189 94% 3%);
    /* Subtle light grey background color as default */

}

#columnNamesDisplay ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    /* Adequate padding for list items */
    border-bottom: 1px solid #d1d1d1;
    /* Separator for items */
    cursor: pointer;
    /* Indicates items are interactive */
    transition: background-color 0.3s ease;
    /* Smooth transition for hover effect */
}

#columnNamesDisplay ul li:last-child {
    margin-bottom: 1rem;
}

#columnNamesDisplay ul li:hover {
    background-color: #D6E4F0;
}

.apexcharts-legend {
    display: flex !important;
    visibility: visible !important;
}

.card {
    background-color: #eaf7ff;
    /* Lighter shade for panels */
    border: 1.5px solid #a3bbcf;
    /* Soft blue border from the palette */
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: auto;
    box-sizing: border-box;
}

.card-body {
    font-size: 1rem;
    /* Adjusted font size */
}

.input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-group .form-control {
    flex: 1;
}

#filterData {
    white-space: nowrap;
}

#iep_date {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    width: 200px;
}

.box {
    background-color: #eaf7ff;
    /* Lighter shade for panels */
    border: 1.5px solid #D6E4F0;
    /* Soft blue border from the palette */
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: auto;
}

/* Hover effects on interactive elements */
.box:hover,
.card:hover {
    border-color: #b7dffa;
    /* Slightly darker blue for hover */
}

.create-group,
.students-list {
    flex-basis: auto;
    flex-shrink: 0;
}

.create-group {
    width: auto;
    min-width: 30ch;
    /* ~20 characters wide */
    flex-shrink: 0;
}

.students-list {
    width: auto;
}

.existing-groups,
.details {
    flex: 1;
}

.selected-group,
.selected-student {
    font-weight: bold;
    background-color: #ccc;
}

#group-list ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #c7e9ff;
    border-bottom: 1px solid #646f79;
    border-radius: 5px;
    padding: 8px 10px;
    margin: 0;
    width: 100%;
    transition: background-color 0.3s;
    min-height: 44px;
    gap: 10px;
}

/* Hover & selected background/font for group items */
#group-list ul li:hover,
#group-list ul li.selected-group {
    background-color: #90c0eb;
    font-weight: bold;
    color: #333;
}

/* Keep the “.group-name” font‐weight 400 on hover/selected */
#group-list ul li:hover .group-name,
#group-list ul li.selected-group .group-name {
    font-weight: 400;
}

/* Optional: override any generic .selected-group grey you had before */
.selected-group {
    background-color: transparent;
}


.group-name {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    /* preload slight bold */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.options-btn {
    background: transparent;
    border: none;
    padding: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

/* On hover, softly color it */
.options-btn:hover {
    background-color: rgba(15, 119, 189, 0.15);
    /* subtle light blue on hover */
}

.options-btn i {
    font-size: 14px;
    color: #0F77BD;
    /* Blue icon, but no background */
    position: static !important;
    margin: 0 !important;
}

.group-options {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

/* Buttons */
button {
    background-color: #0F77BD;
    /* Bright blue for buttons */
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #2F6F99;
    /* Medium blue for button hover */
    font-weight: bold;
}

.group-options button {
    display: block;
    width: 100%;
    border: none;
    background: #ccc;
    background-color: #e0e0e0;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #111;
}

.group-options button:hover {
    background-color: #255677;
    /* Deep blue */
    font-weight: bold;
}

p {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    /* Align text to the left for better readability */
}

.add-group-btn {
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 20px;
    margin-left: 5px;
}

.add-student-btn {
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 5px;
}

.highlight-section {
    border: 2px solid red;
    /* Add a red border */
    padding: 15px;
    /* Add some padding inside the section */
    border-radius: 8px;
    /* Round the corners for a better aesthetic */
    margin-top: 20px;
    /* Add some space above */
    background-color: #ffe6e6;
    /* Optional: Light red background for more emphasis */
}

.highlight-section h2 {
    margin-top: 0;
}


.add-goal-btn {
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 5px;
}

h2 {
    margin-bottom: 1rem;
}

h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #45A0DD;
    /* Lighter blue to match hover state of navbar */
    text-decoration: none;
    cursor: pointer;
}

.goal-item {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    /* ← this allows shrinking */
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "content   data"
        "graph  data"
        "sep       sep"
        "reports   selector";
    gap: 0;
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: 10px;
}

.goal-item>.goal-content,
.statistics-area {
    grid-area: content;
}

.goal-item>.goal-data {
    grid-area: data;
}

.goal-data .column-selector-section {
    order: 3;
    width: 90%;
    max-width: 260px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.goal-data .enter-data-text {
    order: 1;
}

.goal-data .flatpickr-calendar {
    order: 2;
}

.goal-data .chart-toggle-vertical {
    order: 4;
}

.goal-data .supporting-docs-right {
    order: 4;
}

.goal-data .supporting-docs-right {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ddd; /* light divider */
}

.goal-item>.goal-graph {
    grid-area: graph;
}

/* now assign the separator and the reports */
.goal-item>.goal-separator {
    grid-area: sep;
}

.goal-item>.progress-reports {
    grid-area: reports;
}

.goal-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.goal-item .goal-data {
    flex-direction: column !important;
    /* calendar first, pills second */
    align-items: center;
    /* left-align (use center if you prefer) */
}

.goal-item>.chart-toggle-vertical {
    grid-area: auto !important;
    /* cancels the earlier assignment  */
}

.goal-item > .column-selector-section {
    grid-area: selector;
}

.chart-toggle-vertical {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    margin-top: 40px;
    margin-left: 0;
    transform: scale(1.2);
}

.nudge-outline {
  outline: 2px dashed #8b0000;
  outline-offset: 4px;
  border-radius: 8px;
}


.chart-toggle-vertical input {
    /* hide the raw radios but keep them accessible */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chart-toggle-vertical label {
    flex: 0 0 auto;
    /* don’t grow to fill the row           */
    min-width: 80px;
    /* ~80 px, grows if text is longer   */
    text-align: center;
    padding: 4px 8px;
    font-size: .8rem;
    border: 1px solid #007bff;
    border-radius: 20px;
    color: #007bff;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: .15s;
}

.reports-legend {
    margin-left: 8px;
    font-size: 0.85rem;
    color: #666;
    vertical-align: middle;
    user-select: none;
    /* can’t accidentally highlight it */
}

.chart-toggle-vertical label {
    pointer-events: auto;
}

.chart-toggle-vertical label.active {
    background: #007bff;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 0 2px #007bff inset;
}

@supports(selector(label:has(input:checked))) {
    .chart-toggle-vertical label:has(input:checked) {
        background: #489df8;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 0 0 2px #007bff inset;
    }
}

/* optional hover */
.chart-toggle-vertical label:hover {
    background: rgba(0, 123, 255, 0.12);
}

.enter-data-text {
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    margin: 4px 0;
}

/* force the cloned SVG to scale down to container width */
#modal-chart-container .apexcharts-canvas,
#modal-chart-container svg {
    width: 100% !important;
    height: auto !important;
}


/* put this in your stylesheet or in a <style> block AFTER the default .form-group rules */

/* 1) Force inline‐row layout on just this one */
.form-group.inline-period {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem;
    /* or whatever you like */
}

/* 2) Keep the label on one line */
.form-group.inline-period label {
    white-space: nowrap !important;
    margin: 0 !important;
}

/* 3) Stop the input from stretching */
.form-group.inline-period input#reporting-period {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 2ch !important;
    text-align: center;
    margin: 0 !important;
}

.goal-data .flatpickr-calendar.inline {
    position: relative !important;
    transform: scale(1);
    /* cleanly enlarge the calendar */
    transform-origin: top center;
    /* keeps alignment from top center */
    margin-top: 10px;
    /* slight margin to keep visual spacing neat */
    margin-bottom: 30px;
    /* space for the pills below */
}

.goal-item>.goal-content {
    grid-area: content;
    align-self: start;
    /* pull it to the top of that tall cell */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* small spacing between description & header */
}

/* hide edit/archive when editing */
.goal-content.editing .edit-goal-btn,
.goal-content.editing .archive-btn {
    display: none;
}

.goal-content {
    /* push the entire left block away from the divider */
    margin-right: 20px;
}

.metadata-container,
.goal-item,
.goal-graph {
    overflow: visible;
}

.goal-graph {
    position: relative;
    z-index: 2;
}

/* target only your chart instances, not every ApexCharts chart on the page */
.goal-graph .apexcharts-svg>svg,
.goal-graph .apexcharts-inner,
.goal-graph .apexcharts-canvas,
.goal-graph .apexcharts-annotations {
    overflow: visible !important;
}

.goal-graph {
    min-height: 320px;
    width: 100%;
}

.goal-item.selected {
    background-color: #bfe5ff;
}

/* 5) make sure your four cells paint above the lines */
.goal-item>* {
    position: relative;
    z-index: 1;
}

/* vertical mid‐line */
.goal-item>.separator-vertical {
    grid-row: 1 / span 2;
    /* cover the first two rows */
    grid-column: 2;
    /* sit at the start of column 2 */
    justify-self: start;
    /* hug the left edge of col 2 */
    width: 0.5px;
    background: #d4e6fa;
    height: 100%;
}

/* horizontal mid‐line */
.goal-item>.separator-horizontal {
    grid-row: 2;
    /* sit at the start of row 2 */
    grid-column: 1 / span 2;
    /* span both columns */
    align-self: start;
    /* hug the top edge of row 2 */
    height: 0.5px;
    background: #d4e6fa;

}

.separator-vertical {
    position: relative;
    z-index: 6 !important;
}

/* keep your existing bottom‐separator full‐width */
.goal-item>.goal-separator:not(.separator-vertical):not(.separator-horizontal) {
    grid-area: sep;
    /* assuming you’ve declared that in your grid‐areas */
    width: 100%;
}

/* and keep the cells painting on top of them */
.goal-item>*:not(.goal-separator) {
    position: relative;
    z-index: 1;
}

/* make sure all the real cells paint above those lines */
.goal-item>* {
    position: relative;
    z-index: 1;
}

.goal-separator {
    border: none;
    height: 2px;
    background: #007bff;
    width: 100%;
    margin-bottom: 5px;
}

/* tighten up the table */
.statistics-area {
    width: 100%;
    margin: 0;
    padding: 10px;
}

.statistics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    margin-bottom: 10px;
    table-layout: auto;
    /* Let column widths be determined by content */

}

.statistics-table th,
.statistics-table td {
    padding: 4px 6px;
    border: 1px solid #cbd2da;
    text-align: center;

    white-space: normal;
    /* allow breaking at spaces */
    word-break: normal;
    /* don’t break mid-word */
    /*overflow-wrap: anywhere;     break long URLs or formulas if needed */
}

.selector-wrapper {
    grid-area: selector;
    /* stay in your bottom-left grid cell */
    background: #fff;
    border: 1px solid #dde2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    /* clear space all around */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* no overflow rules here = no scrollbar */
}

/* target only the button inside the Progress Reports area */
.progress-reports .add-note-btn {
    position: static;
    /* flow in the normal layout */
    display: inline-flex;
    /* center its text */
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    /* space above the button */
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    /* keep it on one line */
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.add-note-btn:hover {
    background-color: #0056c1;
}

.print-report-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.print-report-wrapper th,
.print-report-wrapper td {
    border: 1px solid #ccc;
    padding: 4px 8px;
    text-align: center;
}

.print-report-wrapper th {
    background: #f7f7f7;
}

.load-more-notes-btn {
    display: inline-block !important;
    margin: 8px 0 !important;
    padding: 6px 12px !important;
    background: #007bff !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}


.large-print-modal {
    width: 90%;
    max-width: 800px;
}

.selected-goal-box {
    border: 1px solid #007bff;
    background: #e3f2fd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.print-options label {
    margin-right: 12px;
    font-size: 0.95rem;
}

.existing-notes {
    display: flex;
    /* ensure it’s a flex container */
    align-items: center;
    /* vertically center all children */
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
}

.print-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

/* hide the legacy checkboxes */
.print-options input[name="printOption"] {
    display: none;
}

/* base pill style */
.pill {
    padding: 6px 14px;
    border: 1px solid #0F77BD;
    border-radius: 999px;
    background: #fff;
    color: #0F77BD;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    transition: background .2s, color .2s;
}

/* active state */
.pill.active {
    background: #0F77BD;
    color: #fff;
}

/* normalize spacing on modal buttons */
.modal-content .pill {
    margin-bottom: 0 !important;
}


/* nuke any weird bottom‐margin on the button */
.existing-notes button {
    margin-bottom: 0;
}

/* reset the <h3> default margins so it truly centers */
.existing-notes h3 {
    margin: 0;
}


.checkbox-container .selector-label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: #555;
}

.checkbox-container .checkbox-item {
    padding: 5px;
    margin: 2px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #f9f9f9;
    cursor: pointer;
    font-size: 10px;
}

.checkbox-container .checkbox-item.selected {
    background-color: #d1e7dd;
    border-color: #0f5132;
    color: #0f5132;
}

.edit-group-btn {
    z-index: 10;
    /* Lower than the modal */
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.goal-header {
    display: flex;
    justify-content: flex-end;
    /* push buttons to the right */
    gap: 0.5rem;
    /* space between them */
    margin-bottom: 0.75rem;
    /* give a little breathing room */
}

.archive-btn {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.archive-btn:hover {
    background-color: darkred;
}

.edit-goal-btn {
    background-color: rgb(128, 184, 133);
    color: rgb(0, 0, 0);
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.edit-goal-btn:hover {
    background-color: rgb(77, 116, 82);
}


/* container you’re dynamically inserting */
.quill-editor {
  margin: 0 !important;
  padding: 0 !important;
}

/* the Quill wrapper around the editor */
.quill-editor .ql-container {
  border: none;      /* if you don’t want the default border */
  margin: 0 !important;
  padding: 0 !important;
}

/* the actual editable area */
.quill-editor .ql-editor {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 1.2em !important;   /* or whatever makes sense for you */
}

.goal-description .ql-tooltip,
.goal-description .ql-toolbar {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.save-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px !important;
    margin-right: 10px !important;
    border-radius: 4px;
    cursor: pointer;
}

.goal-item .save-btn:hover {
    background-color: #333;
    font-weight: bold;
}

#goalsCard,
#goalsCard h3 {
    text-align: left;
}

#goals-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 10px;
    /* 20px top and bottom, 10px right and left */
}

.goal-item.selected {
    border: 2px solid #007bff;
    /* Highlight border */
}

.goal-item .goal-text-container {
    color: #000;
    /* Ensure text remains black */
}

#dataTable_wrapper .col-md-6:eq(0) {
    position: relative;
    z-index: 1000;
}

.editable {
    cursor: pointer;
}

.editable.editing {
    background-color: #f4f4f4;
}

.editable input {
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: transparent;
    outline: none;
}

.fixed-width {
    width: 100px;
}

.fixed-width-cell {
    width: 100px;
    /*white-space: nowrap;*/
    padding: 0;
    margin: 0;
}

.goal-container {
    cursor: pointer;
    transition: background-color 0.3s;
}

.goal-container.selected {
    background-color: #e0e0e0;
    border: 1px solid #007bff;
}



.highlighted {
    background-color: #ffff99;
}

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

td {
    border: 1px solid #ccc;
    padding: 8px;
    min-width: 50px;
    height: 25px;
    box-sizing: border-box;
}

td .cell-input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 8px;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
}

.modal {

    display: none;
    /* Modals are hidden by default */
    position: fixed;
    z-index: 1002;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    pointer-events: none;
    /* Prevent interaction */

}

.modal-content {
    position: absolute;
    top: 10%;
    left: 10%;
    background-color: #ffffff;
    padding: 20px 30px;
    border-radius: 10px;
    max-width: 700px;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    cursor: default;
    width: auto;
}

.modal-content h2 {
    margin-top: 0;
    font-size: 2em;
    color: #222;
    text-align: center;
    user-select: none;
    /* Prevent selection during drag */
    cursor: move;
    /* Change cursor to move */
}

.modal-content p,
.modal-content ul {
    color: #444;
    /* Slightly darker for readability */
    font-size: 1em;
    line-height: 1.5;
    /* Better spacing for readability */

}

.modal-content ul {
    padding-left: 20px;
}

.modal-content ul li {
    margin-bottom: 10px;
}

.modal-content a {
    color: #0066cc;
    text-decoration: none;
    font-weight: bold;
}

.modal-content a:hover {
    text-decoration: underline;
}

.modal-content .close {
    position: absolute;
    top: 15px;
    /* Adjust for better spacing */
    right: 15px;
    /* Adjust for better spacing */
    font-size: 1.5em;
    /* Slightly smaller */
    font-weight: bold;
    color: #555;
    /* Softer color */
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-content .close:hover {
    color: #000;
    /* Darker on hover */
}

.modal-content button {
    padding: 10px 15px;
    margin-right: 10px;
}

.modal-content .delete-btn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
}

.modal-content .delete-btn:hover {
    background-color: darkred;
}


/* Highlight drag handles with light blue background and blue border */
#draggable-modal {
    position: absolute;
    /* Required for draggable functionality */
    top: 10%;
    left: 50%;
    width: 70%;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    cursor: default;
}

.drag-handle {
    background-color: #e0f7fa;
    border: 1px solid #0288d1;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    cursor: move;
    /* Shows move cursor for drag handle */
}

#custom-tooltip {
    display: none;
    padding: 10px;
    background: #fff;
    color: #000;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1000;
}

/* TOOLTIP STYLES */
/* Custom blue theme for Tippy.js */
.tippy-box[data-theme~='custom-blue'] {
    background-color: #3a7bd5;
    /* Soft blue background */
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    /* Start invisible */
    transition: opacity 0.5s ease;
    /* Smooth fade effect */
}

.tippy-box[data-theme~='custom-blue'][data-state='visible'] {
    opacity: 1;
    /* Fully visible */
}

.tippy-box[data-theme~='custom-blue'] .tippy-arrow {
    color: #3a7bd5;
    /* Match arrow with tooltip background */
}

.tippy-box[data-theme~='custom-blue'] strong {
    font-weight: bold;
}

.faint-text {
    color: #ccc;
    /* Light gray color for faint text */
    opacity: 0.6;
    /* Slightly transparent */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

input[type="text"] {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.form-group label {
    white-space: nowrap;

}

.form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.form-group .form-control {
    flex: 1;
}

.form-actions {
    margin-bottom: 20px;
}

.dashboard {
    display: flex;
    flex-direction: column;
    height: auto;
}

/*
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #1A3E55;
    color: white;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: height 0.3s ease; 
}
*/

.nav-container {
    display: flex;
    align-items: center;
    /* Vertically align items */
    gap: 10px;
    /* Adds spacing between children */
}


.header-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

}

.header-icons .nav-link i {
    margin-right: 5px;
}

.header-icons span,
.header-icons .nav-link {
    margin-right: 20px;
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.header-icons span:hover,
.header-icons .nav-link:hover {
    background-color: #45A0DD;
    padding: 10px;
    border-radius: 5px;
}

.header-icons .nav-link:hover {
    color: #f0f0f0;
}

.header-icons .nav-link {
    display: flex;
    align-items: center;
}

/* Centered, non-growing li */
.luxbar-navigation .able-btn {
  flex: 0 0 auto;
  margin: 0 auto;
}

/* Bigger, gold-bordered ABLE link */
.luxbar-navigation .able-btn .nav-link {
  display: inline-block;        /* so padding & border wrap tightly */
  color: gold;
  font-weight: bold;
  font-size: 1.4rem;            /* bump this up until you like it */
  text-decoration: none;        /* remove underline if any */
  border: 2px solid gold;       /* gold outline */
  border-radius: 4px;           /* soften the corners */
  line-height: 1;               /* keep it vertically centered */
}

.header-icons span {
    margin-right: 10px;
    cursor: pointer;
}

/* Additional styles for login form */
/* Centering the content */
.center-content {
    display: flex;
    justify-content: center;
    align-items: top;
    min-height: calc(100vh - 70px);
    margin-top: 60px;
    padding: 2rem;
    background-color: #4f6a8d;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
    width: 100%;
    height: calc(100vh - 70px);
}

.grid-item {
    background-color: white;
    padding: 2rem;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-us p {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0.5rem 0;
    text-align: left;
}

.about-us h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

p strong {
    font-weight: bold;
}

p em {
    font-style: italic;
}

.login-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    /* White background for contrast */
    padding: 2rem;
    border-radius: 5px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    width: 360px;
    /* Ideal width for login forms */
    margin: auto;
    /* Center in the page */
    border-bottom: 1px solid #646f79;
}

.login-box-msg {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
    text-align: center;
    font-family: 'Arial', sans-serif;
}

.login-box .form-control,
.login-box .btn-primary,
.forgot-password .form-control,
.forgot-password .btn-primary {
    width: 100%;
    /* Full width of the form area */
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Arial', sans-serif;
}

.forgot-password input[type="email"],
.forgot-password input[type="submit"] {
    margin-bottom: 1rem;
    width: 100%;
    /* Ensure full width */
    padding: 0.75rem;
    /* Adjust padding for consistent size */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    /* Consistent font size */
}

.testimonials,
.sample-reports {
    padding: 1rem;
    /* Add padding for better spacing */
}

.testimonials {
    text-align: left;
}

.testimonials p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.sample-reports {
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.btn-primary {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.fas {
    position: absolute;
    margin-left: -25px;
    margin-top: 15px;
    color: #999;
}

.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.remember-me input {
    margin-right: 0.5rem;
}

.remember-me label {
    margin: 0;
}

.info,
.text-center {
    text-align: center;
    color: #007bff;
}

.info {
    margin: 1rem 0;
}

.mb-1,
.mb-0 {
    margin-bottom: 1rem;
}

.message {
    font-size: 16px;
    color: #333;
    margin-top: 20px;
}

.column {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 10px;
    width: 45%;
    float: left;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.tabulator {
    border-radius: 8px;
    /* Rounds corners for a softer look */
    width: 100%;
    overflow: hidden;
}

.tabulator-header .tabulator-col {
    background-color: #9bc4ff;
    /* Light gray background for headers*/
    color: #000000;
    /* Darker text for better readability*/
    font-weight: bold;
    /* Make header text bold*/
    padding: 10px 0;
    /* Padding for better spacing */
    border-right: 1px solid #ddd;
    /* Add borders for separation*/
    text-align: center;
    white-space: normal;
}

.tabulator .tabulator-header .tabulator-col:last-child {
    border-right: none;
    /* Remove the right border for the last column */
}

.tabulator-row {
    border-bottom: 1px solid #eee;
    /* Adds separation between rows */
}

.tabulator-cell {
    padding: 10px 6px;
    /* More padding within cells */
    font-size: 16px;
    /* Larger text for easier reading */
    color: #000000;
    /* Darker text for better contrast */
    text-align: left;
}

.left-align-cell {
    text-align: left;
    /* Apply left alignment to cell content */
}

.center-align-header {
    text-align: center;
    /* Apply center alignment to header */
}

#performance-table {
    height: auto;
    width: 100%;
    /* Don't set height here – let Tabulator handle it via its own height */
}

/* Ensure the Tabulator header sticks */
.tabulator .tabulator-header {
    position: static !important;

}


#performance-table .tabulator-row:nth-child(odd) {
    background-color: #e6f1ff;
    /* Alternate row colors for readability */
}

#performance-table .tabulator-row:nth-child(even) {
    background-color: hwb(189 94% 3%);
    /* Slightly darker for contrast */
}

#performance-table .tabulator-cell {
    border-right: 1px solid #777676;
    /* Adds vertical lines if needed */
    padding: 8px 10px;
    /* Adjust padding for cell content */
    text-align: left;
    /* Align text to the left */
}

#performance-table .tabulator-col:last-child {
    border-right: none;
    /* No border for the last column */
}

#performance-table .tabulator-col {
    border-right: 1px solid #ccc;
    text-align: center;
    white-space: normal;
    /* Allow text wrapping */
}

#performance-table .tabulator-row {
    border-bottom: 1px solid #777676;
    /* Adds a subtle line between rows */
}


.box-centered-top {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    /* Add bottom margin */
    overflow-x: hidden;
    /* Hide horizontal scroll if it appears */
}

/* Optional: Enhance scrollbar appearance for better UX */
.box-centered-top::-webkit-scrollbar {
    width: 8px;
}

.box-centered-top::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
}

.chart-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* Regular styles */
.goal-text-container {
    max-width: 1000px;
    /* Ensure it does not exceed 1000px */
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.goal-text-container ol,
.goal-text-container ul {
    padding-left: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.goal-text-container li {
    margin-bottom: 0.3em;
}

.goal-text-container ul {
    list-style-type: disc;
}

.goal-text-container ol {
    list-style-type: decimal;
}

.goal-text ol,
.goal-text ul {
    margin: 0 0 1em 1.5em;
    padding-left: 1.5em;
}

.goal-text li {
    margin-bottom: 0.25em;
}


.goal-text {
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    /*margin: 0 auto;*/
}

#chartContainer,
#barChartContainer {
    width: 1000px;
}

.chart {
    width: 100%;
    /* Make the chart take the full width of the wrapper */
    height: auto;
    /* Set a fixed height for the charts */
    border: 1px solid #ccc;
    /* Optional: Add a border for better visual separation */

}

.chart-card {
    background-color: #eaf7ff;
    /* Lighter shade for panels */
    border: 1.5px solid #a3bbcf;
    /* Soft blue border from the palette */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: auto;
    /* Ensure full width */
    box-sizing: border-box;
    overflow: auto;
    /* Prevent overflow */
    overflow-y: auto;
    /* Allow the main content to scroll */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* For positioning the minimize button */
    transform: none !important;
    /* Overrides hardware-accelerated properties */
    backface-visibility: hidden;
    /* Helps with rendering in some cases */
}

.column-select-card {
    background-color: #eaf7ff;
    border: 1.5px solid #a3bbcf;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    display: block;
    /* <-- Change from flex to block */
    position: relative;
    height: auto;
}

.column-selector-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.column-selector-section {
    background-color: #d5efff;
    /* Light background color for distinction */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: fit-content;
    /* Adjust width to fit content */
    flex: 0 0 auto;
    /* Don't grow, only as wide as content */
    height: fit-content;
}

.add-intervention-form {
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.add-intervention-form input,
.add-intervention-form textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.add-intervention-form button {
    display: block;
    padding: 10px 20px;
    color: #fff;
    background-color: forestgreen;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.add-intervention-form button:hover {
    background-color: darkgreen;
}


#interventionBtn {
    background-color: #229c26;
    /* Softer green */
    color: white;
    font-size: 15px;
    /* Slightly larger font for better readability */
    font-weight: 600;
    /* Semi-bold for emphasis */
    border: none;
    border-radius: 5px;
    /* Add rounded corners */
    height: 90%;
    /* Ensure it spans most of the nav bar height */
    display: flex;
    /* Flexbox for alignment */
    align-items: center;
    /* Vertical alignment */
    justify-content: center;
    /* Horizontal alignment */
    cursor: pointer;
    margin-right: 0px;
    /* Add spacing between the button and the next element */
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Smooth transitions */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
}

#interventionBtn:hover {
    background-color: #43a047;
    /* Slightly darker green on hover */
    transform: scale(1.02);
    /* Subtle scaling effect */
}

#interventionBtn:focus {
    outline: none;
    /* Remove default focus outline */
    box-shadow: 0 0 6px rgba(67, 160, 71, 0.8);
    /* Green glow for focus */
}


.intervention-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 16px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #333;
}

.intervention-item h6 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #007bff;
    font-weight: bold;
}

.intervention-item p {
    margin: 4px 0;
    font-size: 14px;
    color: #555;
}

.date-section {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    align-items: center;
}

.date-section label {
    font-weight: bold;
    margin-right: 5px;
}

.date-section input {
    padding: 4px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 130px;
}

.save-dates-btn {
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 14px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.save-dates-btn:hover {
    background-color: #0056b3;
}

.intervention-section {
    margin-top: 20px;
}

.interventions-label {
    font-weight: bold;
    color: forestgreen;
    margin-top: 10px;
}

.goal-sections {
    display: flex;
    gap: 20px;
    align-items: flex-start;

}

.intervention-section {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
    min-width: 25%;
}

.intervention-button {
    background-color: #28a745;
    /* Green color */
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    margin: 12px 10px;
    /* Adds gap between the button and the adjacent elements */
    transition: background-color 0.3s ease;
}

.intervention-button:hover {
    background-color: #218838;
    /* Darker green on hover */
    text-decoration: none;
    color: white;
}

.category-item {
    display: block;
    /* Make the items full-width */
    width: 100%;
    /* Full width for better clickability */
    padding: 10px 15px;
    /* Add padding for better spacing */
    margin: 5px 0;
    /* Space between items */
    border: 1px solid #ccc;
    /* Subtle border */
    border-radius: 5px;
    /* Rounded corners */
    background-color: #fff;
    /* White background */
    color: #333;
    /* Text color */
    text-align: left;
    /* Align text to the left */
    font-size: 16px;
    /* Increase font size */
    cursor: pointer;
    /* Pointer cursor to indicate interaction */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Inner shadow effect */
    transition: background-color 0.2s, border-color 0.2s;
    /* Smooth hover effects */
}

.category-item:hover {
    background-color: #f0f0f0;
    /* Light gray background on hover */
    border-color: #888;
    /* Darker border on hover */
}

.category-item:focus {
    outline: none;
    /* Remove default outline */
    background-color: #e0e0e0;
    /* Slightly darker gray for focus */
    border-color: #0056b3;
    /* Blue border on focus */
}

.category-item.selected {
    background-color: #0056b3;
    /* Blue background for selected */
    color: #fff;
    /* White text for contrast */
    border-color: #0056b3;
    /* Blue border to match */
}

.minimize-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #f1f1f1;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.minimized {
    height: 40px;
    /* Adjust as needed */
    overflow: hidden;
}

.checkbox-container {
    display: flex;
    /* Use flexbox for horizontal layout */
    flex-wrap: wrap;
    /* Allow wrapping to next line if necessary */
    justify-content: center;
    /* Center horizontally */
    gap: 10px;
    /* Space between items */
    margin-bottom: 5px;
}

.checkbox-container-students {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Adjust number of columns as needed */
    gap: 10px;
    /* Space between grid items */
}


.checkbox-container label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.small-checkbox-container .small-selector-item {
    font-size: 12px;
    margin: 2px;
    display: flex;
    /* Use flexbox for centering */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    height: auto;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 150px;
    line-height: 1.2;
}


.selector-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.selector-item {
    flex: 1;
    display: flex;
    /* Use flexbox for centering */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    padding: 10px;
    margin: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom: 1px solid #646f79;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.1s, box-shadow 0.1s;
    text-align: center;
    width: auto;
}

.selector-item-hide {
    visibility: hidden;
}

#columnSelectorTitle {
    visibility: hidden;
}

.selector-item.selected {
    background-color: #47A6E6;
    /* Light blue for selected items */
    color: #fff;
    border-color: #47A6E6;
}

#columnSelector {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap within the container */
    gap: 5px;
    /* Space between checkboxes */
}

#templateDropdown .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Provides spacing between label and select box */
    padding: 10px;
    /* Padding around the content */
    background-color: #f8f8f8;
    /* Light grey background for better visibility */
    border-radius: 5px;
    /* Rounded corners for modern look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
}

#templateDropdown label {
    color: #333;
    /* Dark grey color for text */
    font-size: 16px;
    /* Larger font size for better readability */
    font-weight: bold;
    /* Bold font weight for the label */
}

#template-metadata-select,
#reporting_period {
    width: 100%;
    /* Full width to match container */
    height: 40px;
    /* Fixed height for a better click area */
    padding: 0 10px;
    /* Padding inside the select box */
    border: 1px solid #ccc;
    /* Subtle border around the dropdown */
    border-radius: 5px;
    /* Rounded corners to match the form group */
    background-color: #fff;
    /* White background for the dropdown */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Inner shadow for a subtle inset effect */
    appearance: none;
    /* Removes default system styling */
    cursor: pointer;
    /* Cursor pointer to indicate it's selectable */
}

#template-metadata-select:hover,
#reporting_period:hover {
    border-color: #888;
    /* Changes border color on hover for interaction feedback */
}

#template-metadata-select:focus,
#reporting_period:focus {
    border-color: #0056b3;
    /* Blue border on focus for accessibility and visibility */
    outline: none;
    /* Removes the default focus outline */
}

#existing-metadata-select,
#reporting_period {
    width: 100%;
    /* Full width to match container */
    height: 40px;
    /* Fixed height for a better click area */
    padding: 0 10px;
    /* Padding inside the select box */
    border: 1px solid #ccc;
    /* Subtle border around the dropdown */
    border-radius: 5px;
    /* Rounded corners to match the form group */
    background-color: #fff;
    /* White background for the dropdown */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Inner shadow for a subtle inset effect */
    appearance: none;
    /* Removes default system styling */
    cursor: pointer;
    /* Cursor pointer to indicate it's selectable */
}

#existing-metadata-select:hover {
    border-color: #888;
    /* Changes border color on hover for interaction feedback */
}

#existing-metadata-select:focus {
    border-color: #0056b3;
    /* Blue border on focus for accessibility and visibility */
    outline: none;
    /* Removes the default focus outline */
}

.metadata-header {
    margin-bottom: 10px;
    /* Add space below each header */
    width: 100%;
    /* Stretch to full width of the container */
    box-sizing: border-box;
    /* Include padding in width calculation */
}

.metadata-header-content {
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Center items vertically */
    justify-content: flex-start;
    /* Align items to the left */
    gap: 10px;
    /* Add spacing between the title and button */
    width: 100%;
    /* Stretch full width */
    padding: 10px 2rem 10px 10px;
    /* top/right/bottom/left: make room for the arrow */
    background-color: #bde0ff;
    /* Light blue background */
    border: 1px solid #ccc;
    /* Light border */
    border-radius: 8px;
    /* Rounded corners */
    border-bottom: 1px solid #646f79;
    /* Darker border at the bottom */
}

/* hide the browser’s built-in collapse‐triangle */
.metadata-container summary::-webkit-details-marker,
.metadata-container summary::marker {
    display: none;
}

/* hide everything except the header when collapsed */
.metadata-container.collapsed>*:not(.metadata-header) {
    display: none;
}

/* style the JS-created arrow */
.accordion-arrow {
    margin-left: auto;
    /* pushes it to the far right */
    cursor: pointer;
    font-size: 1em;
    /* same size as your text */
    transition: transform 0.2s ease;
    color: #0056b3;
    /* blue color */
}

/* flip it when expanded */
.metadata-container:not(.collapsed) .accordion-arrow {
    transform: rotate(90deg);
}


#goal-list {
    display: flex;
    flex-wrap: wrap;
    /* let items wrap to the next row */
    gap: 1rem;
    /* optional spacing between columns/rows */
}

.metadata-container {
    padding: 5px;
    /* Add padding */
}

/* 2. Each metadata block takes up half of the goal section */
#goal-list .metadata-container {
    flex: 0 0 100%;
    /* basis = 50%, no grow, no shrink   */
    max-width: 100%;
    /* just in case other flex settings  */
    box-sizing: border-box;
    /* include padding/border in the 50% */
}



.goal-category {
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Center items vertically */
    justify-content: flex-start;
    /* Align items to the left */
    gap: 10px;
    /* Add spacing between the title and button */
    flex-grow: 1;
    /* Allow content to grow */
}

.category-link {
    text-decoration: none;
    /* Remove underline */
    color: #0056b3;
    /* Dark blue color */
    font-size: 1.5rem;
    /* Larger font size */
    font-weight: bold;
    /* Bold text */
    cursor: pointer;

}

.category-link:hover {
    text-decoration: underline;
    /* Add underline on hover */
}

.add-goal-btn-inline {
    font-size: 1rem;
    /* Button font size */
    padding: 5px 10px;
    /* Button padding */
    background-color: #007bff;
    /* Blue background color */
    color: white;
    /* White text */
    border: none;
    /* Remove border */
    border-radius: 4px;
    /* Rounded corners */
    cursor: pointer;
    /* Pointer cursor on hover */
}

.add-goal-btn-inline:hover {
    background-color: #0056b3;
    /* Darker blue on hover */
}

#statistics {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    max-width: 1000px;
    margin: 20px 0;
    /* Remove auto-centering */
    text-align: left;
    /* Align text/content inside */
}

.statistics-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    /* Adjust height to control vertical centering */
    width: 100%;
    box-sizing: border-box;
}


#statsTable {
    width: 100%;
    max-width: 1000px;
    border-collapse: collapse;
}

#statsTable th,
#statsTable td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    white-space: normal;
    /* Allow text to wrap */
    overflow-wrap: break-word;
    /* Break long words */
    word-break: break-all;
    /* Ensure long words are wrapped */
}

#statsTable th {
    background-color: #eee;
}

#statsTable td {
    white-space: normal;
    /* Allow text to wrap */
}

.card.chart-card {
    display: flex;
    align-items: flex-start;
    /* Align items at the start of the flex container */
    justify-content: space-between;
    /* Space between the two main divs */
    padding: 20px;
    background-color: #eaf7ff;
    /* Background color of the card */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.selector-area {
    flex: 1;
    display: none;
    /* Hide it visually, but keep its space */
    height: auto;
    /* Or set a minimum height if necessary */
}

.selector-area-hide {
    display: none;
    /* Hide it visually, but keep its space */
}

#printReportBtn {
    position: relative;
    top: 0;
    right: 0;
    z-index: 1000;
}

.selection-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.print-table-container,
.print-graph {
    flex: 1 1 100%;
    margin: 10px 0;
    max-width: 1000px;
    /* Ensure maximum width is set */
}

.statistics-wrapper {
    width: 1000px;
    margin: 0px 0px;
    /* vertical margin only */
}

.print-table th,
.print-table td,
.print-graph th,
.print-graph td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: center;
    word-wrap: break-word;
    /* Ensure long words are wrapped */
}

.report-details {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 10px;
    box-sizing: border-box;
}

.report-details div {
    flex: 1;
    text-align: center;
    word-wrap: break-word;
}

#assign-students-form,
#group-students-list-add,
#metadataOptionSelector,
#goal-description,
#goal-date,
#date-of-birth,
#reportingPeriodContainer,
#notes-container {
    margin-bottom: 15px;
}

.notes-column {
    background-color: #eef7ff;
    /* light blue tint */
    font-style: italic;
    /* “this is special” vibe */
    border: 1px solid #99c;
    /* subtle border */
    padding: 6px 8px;
    width: 100%;
}

/* keep pointer-events on so it’s still editable */

#iep-date-container {
    display: inline-flex;
    align-items: center;
    margin: 0.75rem 0;
    /* push it down from the archive button */
    gap: 0.5rem;
    /* space between label + input */
}

/* 2) Label styling – bold + bootstrap red */
#iep-date-container label {
    font-weight: 700;
    color: #dc3545;
    margin: 0;
    /* kill any default margins */
}

/* 3) Shrink the date-picker width */
#iep-date-input {
    max-width: 140px;
    /* or whatever you like */
    padding: 0.25rem 0.5rem;
}

#reportingPeriodContainer {
    margin-top: 20px;
}

.thumbnail-image {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 2px solid black;
    /* Black outline */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    /* Tiny shadow */
    margin: 5px;
    /* Add some margin between thumbnails */
}

.thumbnails {
    display: grid;
    /* exactly 8 columns, each 50px wide (your thumbnail size) */
    grid-template-columns: repeat(8, 50px);
    gap: 10px;
}


.progress-reports .thumbnails {
    overflow: visible !important;
    max-height: none !important;
}

.thumbnail-container {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.thumbnail {
    width: 50px;
    height: 50px;
    border: 2px solid black;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.411);
    /* lighter grey */
    font-weight: bold;
    pointer-events: none;
    /* clicks go through to the thumbnail */
}


.btn-archive {
    padding: 8px 16px;
    margin: auto;
    display: block;
    text-align: center;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-activate {
    padding: 8px 16px;
    margin: auto;
    display: block;
    text-align: center;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-danger {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.btn-danger:hover {
    background-color: darkred;
}

.group-section {
    margin-bottom: 20px;
}

.collapsible-content {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-content.expanded {
    max-height: 600px;
    /* or whatever comfortably holds table */
    overflow: auto;
}

.toggle-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 3px;
    margin-left: 10px;
}

.toggle-btn:hover {
    background-color: #0056b3;
}

#edit-group-form {
    display: flex;
    flex-direction: column;
}

.edit-icon {
    cursor: pointer;
    margin-left: 10px;
    font-size: 16px;
    color: #555;
}

.edit-icon:hover {
    color: #0056b3;
}


#edit-group-form .btn-primary {
    margin-right: 10px;
}

#share-group-form select {
    margin-bottom: 10px;
}

.alert {
    padding: 10px;
    color: white;
    margin-bottom: 15px;
}

.alert.success {
    background-color: #4CAF50;
    /* Green for success messages */
}

.alert.error {
    background-color: #f44336;
    /* Red for error messages */
}

#manage-btn {
    background-color: green;
}

#manage-btn:hover {
    background-color: #0b2704;
    /* Darker shade for hover */
    color: #ffffff;
    /* Ensures text color is white on hover */
}


.date-picker-inline {
    width: auto;
    padding: 5px 10px;
    font-size: 1rem;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: absolute;
    z-index: 1000;
    background-color: #fff;
}

.linked-goals-section {
    width: 100%;
    display: block;
    /* removes flex issues */
    position: relative;
}

.linked-goal-list {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 1em;
    background: #f8f8f8;
    padding: 1em;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.goal-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    justify-items: center;
    /* optional: center cards horizontally */
}

.goal-card {
    background: #ffffff;
    padding: 1em;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.95em;
    min-height: 120px;
    width: 100%;
    max-width: 300px;
}

.goal-student {
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0.5em;
}

.goal-description {
    color: #34495e;
    font-size: 0.9em;
}


/* Enhance visibility of the terms checkbox */
.icheck-primary label {
    font-weight: bold;
    /* Make text bold */
    color: #007bff;
    /* Change text color */
}

.icheck-primary {
    margin-top: 10px;
    /* Add some space above the checkbox */
    background-color: #f2f2f2;
    /* Light background color for the area */
    border-radius: 5px;
    /* Rounded corners for the background */
    padding: 10px;
    /* Padding around the text and checkbox */
}

.editable-input {
    width: 100%;
    margin-bottom: 6px;
    padding: 6px;
    font-size: 14px;
    border: 1px dashed #007bff !important;
    /* Dashed border for editable fields */
    border-radius: 4px;
    background-color: #f9f9ff;
}

.edit-intervention-btn {
    margin-top: 6px;
    background: transparent;
    border: none;
    color: #007bff;
    cursor: pointer;
}

.tippy-content {
    z-index: 1000 !important;
}


/* Tippy content styling */
.tippy-box[data-theme~='light-border'] {
    background-color: #081931;
    /* Soft blue background */
    font-family: system-ui, sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: normal;
    max-width: 700px;
    max-height: calc(100vh - 40px);
    /* ⚡ Gives it a little breathing room from edges */
    z-index: 1000;
}

.tooltip-markdown {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    max-height: calc(100vh - 40px);
    /* ⚡ Gives it a little breathing room from edges */
    overflow-y: auto;
    padding: 1em;
    z-index: 1000;
}

.tooltip-markdown summary {
    font-weight: bold;
    cursor: pointer;
    margin-top: 0.5em;
}

.modal__container {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    width: 700px;
    max-height: calc(100vh - 40px);
    /* ⚡ Gives it a little breathing room from edges */
    overflow-y: auto;
    /* ✅ Allow scroll inside modal */
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.modal__header h2 {
    font-size: 1.25rem;
}

.modal__overlay {
    max-height: 100vh;
    /* ✅ Add this */
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}


#markdown-modal-content {
    flex: 1;
    /* Take remaining space */
    max-height: calc(100vh - 40px);
    /* ⚡ Gives it a little breathing room from edges */
    overflow-y: auto;
}

#markdown-modal-content canvas {
    max-width: 100%;
    height: auto;
}


/* Style category headers (outer <summary>) */
#markdown-modal-content>details>summary {
    background-color: #007acc;
    color: white;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 1.05rem;
    margin-bottom: 10px;
    transition: background 0.3s;
}

/* On hover for category */
#markdown-modal-content>details>summary:hover {
    background-color: #005fa3;
}

/* Style goal headers (nested <summary>) */
#markdown-modal-content details details>summary {
    background-color: #e9f4ff;
    padding: 8px 10px;
    font-size: 0.95rem;
    margin-bottom: 6px;
    border-left: 4px solid #007acc;
    border-radius: 4px;
    font-weight: bold;
    color: #333;
}

/* Inside goal blocks */
#markdown-modal-content details details {
    margin: 8px 0 16px;
    background: #ffffff;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.modal__container::-webkit-scrollbar {
    width: 6px;
}

.modal__container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.modal__header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 2;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
}

.trend-block {
    display: flex;
    align-items: center;
    background: rgb(204, 234, 240);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 14px 0;
    gap: 20px;
}

.trend-icon {
    flex: 0 0 auto;
    /* Fixed for emoji */
    font-size: 20px;
    margin-right: 10px;
    /* Little space between dot and text */
    display: flex;
    align-items: center;
    /* center emoji vertically */
}

.trend-text {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.chart-placeholder {
    flex: 0 0 200px;
    width: 200px;
    height: 140px;
    background: rgb(204, 234, 240);
    border: 1px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* apply to the actual SVG/canvas container that ApexCharts uses */
#chartContainer,
#chartContainer .apexcharts-canvas,
#chartContainer .apexcharts-svg {
    /* allow vertical scroll + pinch‑zoom, but let the chart capture horizontal drags */
    touch-action: pan-y pinch-zoom;
}

/* The overlay */
#mass-import-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    /* hide by default */
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */
    background: rgba(0, 0, 0, 0.5);
    /* semi-transparent backdrop */
    z-index: 2000;
    justify-content: flex-start;
    /* push modal content to the left instead of center */
    padding-left: 5%;
    /* control how far from the left edge it is */
    padding-right: 5%;
    /* optional: keep it from hugging right edge */
}

/* make it show when we add “show” */
#mass-import-modal.show {
    display: flex;
}


/* make the table div fill the rest */
#mass-import-sheet {
    flex: 1;
    border: 1px solid #ccc;
}

.modal-header,
.modal-footer {
    text-align: center;
    margin-bottom: 10px;
}

/* 1) Make the modal‐content scrollable with a max height */
#add-student-modal .modal-content {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 2) Pin the close button and the title to the top */
#add-student-modal .modal-content .close,
#add-student-modal .modal-content .drag-handle {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* 3) Keep the close button on the right */
#add-student-modal .modal-content .close {
    align-self: flex-end;
    padding: 8px;
    /* give it some breathing room */
    z-index: 1001;
}

#add-student-icon i {
    color: inherit;
    vertical-align: middle;
    transform: scale(1.5);
    /* Start slightly larger */
    transition: transform 0.2s ease;
    /* Smooth scaling */
}

#add-student-icon:hover i {
    transform: scale(1.7);
    /* Grow even more on hover */
}

#add-student-icon .fas {
    position: static !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 18px;
    line-height: 1;
    color: #f8f867 !important;
}


.tippy-box[data-theme~='warning-red'] {
    background-color: #8b0000;
    /* Dark red background */
    color: white;
    border-radius: 4px;
    padding: 8px;
    font-weight: bold;
    font-size: 14px;
}

.tippy-box[data-theme~='warning-red'][data-placement^='bottom']>.tippy-arrow::before {
    color: #8b0000;
}

/* space “Edit Column Names” off the table */
#editColumnsBtn {
    display: block;
    /* makes margin-bottom apply in block direction */
    margin: 12px 0;
    /* 12px above & below */
}

/* add padding around the table itself */
#table-container {
    padding: 8px 0;
    /* 8px top & bottom */
}

/* space “Add Row” off the table */
#addDataRow {
    display: inline-block;
    /* so margin-top works nicely */
    margin: 12px 0 0;
    /* 12px above only */
}

/* if you also want to space the date input next to “Add Row” */
#newRowDate {
    margin-top: 12px;
    margin-left: 8px;
}


/* highlight today */
.flatpickr-day.today-highlight {
    background-color: #007bff !important;
    color: white !important;
}

/* highlight days with data */
.flatpickr-day.data-highlight {
    background-color: gold !important;
    color: black !important;
}

.flatpickr-day.service-highlight{
  border: 1px solid rgba(0, 123, 255, 0.85);
  background: rgba(0, 123, 255, 0.14);
  border-radius: 6px;
}

/* The drawer itself—completely off-screen to the left */
#admin-drawer {
    position: fixed;
    top: 58px;
    /* adjust for your nav height */
    left: 0;
    width: 25rem;
    /* 256px */
    background: #eaf7ff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    padding: 1rem;
}

/* When open, slide the entire thing (and pill) into view */
#admin-drawer.open {
    transform: translateX(0);
}

/* The “Admin” pill inside the drawer, poking out of the gutter */
#admin-drawer-toggle {
    position: absolute;
    top: 0;
    right: -4rem;
    /* 4rem = 64px pill width + small overlap */
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: #28a745;
    color: #fff;
    border-radius: 0 0 4px 4px;
    /* round the bottom corners */
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    height: 30px;
}

/* Hover state for the pill */
#admin-drawer-toggle:hover {
    background: #218838;
}

/* Reset list spacing */
#admin-drawer ul {
    list-style: none;
    margin: 0.5rem 0 0;
    /* or whatever gutter you need under the pill */
    padding: 0;
}

#admin-drawer li:last-child {
    margin-bottom: 0;
}

#admin-drawer ul li a {
    text-decoration: none !important;
    /* no underlines */
    color: inherit;
    /* use the <li>’s color */
    cursor: pointer;
    /* still looks clickable */
}

/* make sure visited/hover/reset don’t sneak in new colors */
#admin-drawer ul li a:visited,
#admin-drawer ul li a:hover,
#admin-drawer ul li a:active {
    color: inherit;
    text-decoration: none;
}

/* if you want a hover‐background on the whole row */
#admin-drawer ul li:hover {
    background-color: #90c0eb;
    font-weight: bold;
    color: #333;
}

#admin-drawer a:active {
    transform: translateY(0);
}

#admin-drawer details {
    margin: 0.5rem 0;
}

#admin-drawer summary {
    cursor: pointer;
    padding: 0.5rem;
    list-style: none;
    /* match your drawer link styles: */
    color: #000;
}

#admin-drawer summary::-webkit-details-marker {
    display: none;
}

#admin-drawer details#staff-accordion {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    /* reset any default margins */
    padding: 0;
    /* you’ll put padding on the summary */
}

#admin-drawer details#staff-accordion summary {
    display: flex;
    /*full-width flex container*/
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    /* include padding in that 100% */
    padding: 0.75rem 1rem;
    /* tweak to match your other links */
    cursor: pointer;
    user-select: none;
    background: transparent;
    /* or your drawer background color */
}

#admin-drawer details#staff-accordion[open] summary::after {
    transform: rotate(90deg);
}

#admin-drawer details#staff-accordion summary::after {
    content: '▶';
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
}

#admin-drawer details summary::-webkit-details-marker {
    display: none;
}

#staff-list li {
    padding: 0.25rem 0;
}

#staff-list .loading,
#staff-list .error {
    font-style: italic;
    color: #666;
}

#admin-drawer #staff-list {
    background: #d0e7fa;
    /* uniform background */
    border: 1px solid #99c2e6;
    /* subtle border for the whole */
    border-radius: 6px;
    /* rounded container */
    padding: 0;
    /* we’ll pad each item instead */
    margin-top: 0.5rem;
}

/* INDIVIDUAL STAFF “TILES” */
#admin-drawer #staff-list li.staff-item {
    background: transparent;
    /* no white tile */
    margin: 0;
    /* remove gaps */
    padding: 0.5rem 1rem;
    /* comfy hit area */
    border-bottom: 1px solid #99c2e6;
    border-radius: 0;
    /* no rounded corners per item */
    box-shadow: none;
    /* kill any shadows */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* HOVER STATE */
#admin-drawer #staff-list li:hover {
    background: #e6f2ff;
    /* subtle blue tint */
}

/* LAST ITEM – remove extra margin */
#admin-drawer #staff-list li:last-child {
    margin-bottom: 0;
}

/* ─── METADATA ACCORDION ───────────────────────────────────────────────── */
#admin-drawer details#metadata-accordion,
#admin-drawer details#archived-goals-accordion {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#admin-drawer details#metadata-accordion summary,
#admin-drawer details#archived-goals-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  cursor: pointer;
  user-select: none;
  background: transparent;
}

/* hide default marker */
#admin-drawer details#metadata-accordion summary::-webkit-details-marker,
#admin-drawer details#archived-goals-accordion summary::-webkit-details-marker {
  display: none;
}

/* custom caret */
#admin-drawer details#metadata-accordion summary::after,
#admin-drawer details#archived-goals-accordion summary::after {
  content: '▶';
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
}

#admin-drawer details#metadata-accordion[open] summary::after,
#admin-drawer details#archived-goals-accordion[open] summary::after {
  transform: rotate(90deg);
}



/* the list wrapper */
#admin-drawer #metadata-list {
    background: #d0e7fa;
    border: 1px solid #99c2e6;
    border-radius: 6px;
    padding: 0;
    margin-top: 0.5rem;
}

/* individual rows */
#admin-drawer #metadata-list li {
    background: transparent;
    margin: 0;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #99c2e6;
    box-shadow: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
    font-family: sans-serif;
}

/* hover state */
#admin-drawer #metadata-list li:hover {
    background: #e6f2ff;
}

/* last row: no border */
#admin-drawer #metadata-list li:last-child {
    border-bottom: none;
}

/* cap the height of the goal‐categories list to ~5 items and make it scrollable */
#metadata-list,
#staff-list {
    max-height: 20rem;
    /* roughly 5 × 3rem rows; tweak as needed */
    overflow-y: auto;
    padding-right: 0.5rem;
    /* so scrollbar doesn’t cover text */
}

/* make the modal container cover the whole screen */
#printDialogModal {
    position: fixed;
    inset: 0;
    /* shorthand for top:0; right:0; bottom:0; left:0 */
    z-index: 9999;
    /* above admin-drawer */
    background: rgba(0, 0, 0, 0.4);
    /* optional backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    /* ensure it catches taps */
}

/* keep your content above the backdrop */
#printDialogModal .modal-content {
    position: relative;
    z-index: 10000;
}

#printDialogModal u {
    text-decoration: none !important;
}


.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

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

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

/* ─── Container & Header ───────────────────────────────────────── */
.schedule-container {
  background: #bde0ff;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1em;
  margin-top: 1em;
}

.schedule-container.collapsed .accordion-body {
  display: none;
}

.schedule-container:not(.collapsed) .accordion-body {
  display: block;
}

.schedule-header {
  display: flex;
  align-items: center;
  padding: 10px 1rem;
  border-bottom: 1px solid #646f79;
  cursor: pointer;
}
.schedule-title {
  font-weight: bold;
  font-size: 1rem;
}

/* ─── Arrow ─────────────────────────────────────────────────────── */
.accordion-arrow {
  margin-left: auto;
  font-size: 1.2em;
  color: #0056b3;
  transition: transform 0.2s ease;
}

/* collapsed = ▶, open = ▼ */
.schedule-container.collapsed .accordion-arrow {
  transform: rotate(0deg);
}
.schedule-container:not(.collapsed) .accordion-arrow {
  transform: rotate(90deg);
}

/* Body padding */
.accordion-body {
  padding: 1em;
  background: white;
}

/* fix the first column to a smaller width */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
}
.schedule-table th:first-child,
.schedule-table td:first-child {
  width: 100px;
  white-space: nowrap;     /* keep “Period” placeholder from wrapping */
  text-align: center;      /* center the numbers */
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #eee;
  padding: 0.5em;
  text-align: left;
}
.schedule-table th {
  background: #fafafa;
}
.schedule-table tbody tr:nth-child(even) {
  background: #fcfcfc;
}

/* Buttons */
.actions-cell button {
  margin-right: 0.5em;
  padding: 0.25em 0.6em;
  font-size: 0.9em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.btn-add    { background: #28a745; color: #fff; }
.btn-edit   { background: #007bff; color: #fff; }
.btn-delete { background: #dc3545; color: #fff; }
.btn-save   { background: #17a2b8; color: #fff; }
.btn-cancel { background: #6c757d; color: #fff; }

/* Inputs in “add” row */
.inp-period,
.inp-class {
  padding: 0.25em;
  font-size: 0.9em;
}
/* Make sure “Period” placeholder fits */
.inp-period {
  width: 100%;
  box-sizing: border-box;
  /* remove any inline width="60px" on the element itself */
}

.inp-class  { width: 100%; }

/* Or, if you only want it on the Add button: */
.btn-add:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.inp-period {
  text-align: center;      /* center the text */
  color: #555;             /* make the text slightly grey */
}

/* If you want the placeholder even lighter: */
.inp-period::placeholder {
  color: #999;
}

.pill-cell {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.pill-btn {
  padding: 0;                 /* no extra padding */
  border: 1px solid #ccc;
  background: transparent;    /* let text show */
  cursor: pointer;
  border-radius: 50%;
  min-width: 1.8em;           /* enough room for “0”, “1”, “2” */
  height: 1.8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  color: #333;
  transition: background-color 0.2s, border-color 0.2s;
}
.pill-btn.active {
  background: #007bff;
  border-color: #0056b3;
  color: #fff;
}

.comment-toggle {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;                 /* outline color */
  margin-left: 0.25rem;        /* space it from pills */
}

.comment-toggle svg.comment-icon {
  width: 1.2em;
  height: 2em;
  stroke: currentColor;        /* stroke for outline */
  fill: none;                  /* no fill initially */
  stroke-width: 1.5;
}

/* when there’s a comment, fill it solid */
.comment-toggle.has-comment {
  color: #007bff;              /* fill color */
}

.comment-toggle.has-comment svg.comment-icon {
  fill: currentColor;          /* solid bubble */
  stroke: none;
}

/* 1) Center the inline calendar in its container */
#able-calendar {
  display: flex;
  justify-content: center;
  /* optionally give it some top-margin to space it from the table */
}

/* 2) Make the calendar itself bigger */
#able-calendar .flatpickr-calendar.inline {
  /* tweak this scale until you’ve got the size you want */
  transform: scale(1.05);
  /* keep it scaling from the top-center */
  transform-origin: top center;
  /* if you find it overflowing, you can bump max-width: */
  /* max-width: 450px; */
}

.link-goals-btn {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  font-size: 0.9em;
}
.field-mapping {
  margin-bottom: 0.5em;
  align-items: center;
}
.field-mapping label {
  flex: 0 0 150px;
}
.field-mapping select {
  flex: 1;
}

.mapping-row {
  position: relative;          /* anchor for the × */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;

  max-width: 400px;

  padding: 0.5rem;             /* give a bit of breathing room */
  padding-right: 2rem;         /* extra space for the × */

  border: 1px dashed red;
  background: rgba(255,0,0,0.05);
}

  #score-field-mappings {
  margin-bottom: 1.5rem;
}

/* header row above each mapping */
.mapping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 400px;      /* match your .mapping-row width */
  margin: 0.75em 0;      /* a bit of breathing room */
  padding: 0 0.5rem;
}
.mapping-header .col-label {
  flex: 1;
  text-align: center;
  font-weight: bold;
}
.mapping-header .arrow {
  flex: 0 0 auto;
  margin: 0 0.5rem;
}


/* two-col grid */
.modal-body.two-col {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
}

/* left sidebar */
.modal-body .sidebar {
  border-right: 1px solid #ddd;
  padding-right: 1rem;
}

/* goals preview styling */
.goals-preview {
  margin-top: 1rem;
  font-size: 0.95rem;
}

/* right column: center & narrow your mapping rows */
.mapping-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mapping-row select {
  flex: 1;
}
.mapping-row button.remove-mapping {
  flex: 0;
}

button.remove-mapping {
  all: unset;                  /* strip default button styling */
  position: absolute;          /* take it out of the flow */
  top: 50%;                    /* vertical center relative to .mapping-row */
  right: -1rem;              /* place it just outside the box */
  transform: translateY(-50%);

  font-size: 1.3em;            /* larger “×” */
  font-weight: bold;
  color: #444;                 /* darker grey */
  cursor: pointer;
  z-index: 2;                  /* sit above the dashed border */
}

button.remove-mapping:hover {
  color: #000;                 /* black on hover */
}

.agg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  margin-bottom: 0.5em;
}
.agg-pills .pill {
  padding: 0.25em 0.5em;
  border: 1px solid #888;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9em;
}
.agg-pills .pill.selected {
  background-color: #007bff;
  color: #fff;
}
.agg-pills[data-locked="true"] .pill {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- ABLE status tooltip --------------------------------------------- */
.tippy-box[data-theme~='able-status']{
  background:#fff;
  color:#003;
  border:1px solid #bee1f4;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding:4px 8px;
  font-size:.85rem;
  border-radius:4px;
}

.tippy-box[data-theme~='able-status'][data-placement^='right'] > .tippy-arrow::before{
  border-right-color:#bee1f4;
}
.tippy-box[data-theme~='able-status'][data-placement^='left']  > .tippy-arrow::before{
  border-left-color:#bee1f4;
}

.able-tip{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.able-tip .dot{
  width:.8rem;
  height:.8rem;
  border-radius:50%;
  border:1px solid #6663;
  flex:0 0 .8rem;
}

.able-tip .txt{
  line-height:1.3;
}

.goal-successful   { background:#caf0d5; }  /* pale green  */
.goal-unsuccessful { background:#c7c7c7; }  /* pale red    */
.goal-archived     { background:#f5f5f5; }  /* pale grey   */

/* ----------  Goal-complete panel layout & box  ---------- */
.complete-panel{
  margin-top:10px;                 /* space under the blue button          */
  padding:16px 20px;
  border:2px solid #0F77BD;        /* same accent you already use          */
  border-radius:8px;
  background:#f8fbfe;              /* very light blue tint                 */
  max-width:440px;                 /* keeps it from sprawling              */
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* put date label on its own line */
.gc-date-label{
  display:block;
  margin-bottom:12px;
  font-weight:600;
}

/* remove default fieldset styling & add breathing room */
.gc-status-fieldset{
  border:none;
  margin:0 0 14px 0;
  padding:0;
}

/* pills now lay out cleanly, wrap if needed */
.gc-status-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;                         /* space between pills                  */
}

/* hide radios */
.gc-status-group input[type=radio]{display:none;}

/* base pill (unique prefix gc-pill* avoids clashes) */
.gc-pill{
  /* default; each variant overrides --pill-color */
  --pill-color:#0F77BD;         

  padding:6px 14px;
  border:1px solid var(--pill-color);
  border-radius:9999px;
  background:#fff;
  color:var(--pill-color);
  cursor:pointer;
  user-select:none;
  font-size:.9rem;
  font-weight:600;
  transition:background .2s,color .2s,border-color .2s;
}

/* accent colours */
.gc-pill--success  {color:#198754;}   /* green   */
.gc-pill--unsuccess{color:#dc3545;}   /* red     */
.gc-pill--archive  {color:#6c757d;}   /* grey    */

/* selected state */
.gc-status-group input[type=radio]:checked + .gc-pill{
  background:var(--pill-color);
  color:#fff;
}

/* Confirm / Cancel → consistent spacing */
.gc-confirm,
.gc-cancel{
  margin-right:10px;
}

/* Accordion wrapper */
#admin-drawer details#calendar-accordion summary {
  cursor: pointer;
  padding: 0.5em 1em;
  background: #f3f4f6;
  border-radius: 0.375rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  user-select: none;
}

/* Accordion panel */
#admin-drawer details#calendar-accordion .panel {
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
  padding: 1em;
  background: white;
}

/* Flatpickr full-width */
#school-calendar .flatpickr-calendar {
  width: 100% !important;
}

/* Optional: give the calendar a fixed max-height with scroll */
#school-calendar {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 0.5em;
}

/* hide the complete button whenever the goal-content is in editing mode */
.goal-content.editing .complete-btn {
  display: none !important;
}

.schedule-table.non-school-day .pill-btn,
.schedule-table.non-school-day .comment-toggle {
  pointer-events: none;
  opacity: 0.4;
}

.schedule-table.non-school-day .comment-box {
  display: none;
}

/* make room for our full‐circle backgrounds */
.flatpickr-day {
  position: relative;
  transition: background-color 0.2s ease;
}

/* excused → pale green circle behind the date */
.flatpickr-day.absence-excused {
  background-color: rgba(76, 175, 80, 0.2) !important;
  color: inherit;
}

/* unexcused → pale red circle behind the date */
.flatpickr-day.absence-unexcused {
  background-color: rgba(244, 67, 54, 0.2) !important;
  color: inherit;
}

/* keep hover/selected states readable */
.flatpickr-day.absence-excused:hover,
.flatpickr-day.absence-unexcused:hover {
  background-color: rgba(76, 175, 80, 0.3) !important;
}

.flatpickr-day.absence-unexcused:hover {
  background-color: rgba(244, 67, 54, 0.3) !important;
}

/* base style for E/U pills */
.attendance-row .att-pill {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #777;
  border-radius: 4px;
  margin: 0 3px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  color: #333;
  background: #f5f5f5;
}

/* Hover on inactive */
.attendance-row .att-pill:not(.active):hover {
  background: #e0e0e0;
}

/* Active “E” = excused */
.attendance-row .att-pill.excused.active {
  background: #4caf50;
  border-color: #4caf50;
  color: #fff;
}

/* Active “U” = unexcused */
.attendance-row .att-pill.unexcused.active {
  background: #f44336;
  border-color: #f44336;
  color: #fff;
}

.pill-btn[disabled] {
  cursor: not-allowed;
}
.save-col[disabled] {
  cursor: not-allowed;
}

.accordion summary {
  display: block;        /* so it can take up full width */
  width: 100%;           /* span the whole row */
  padding: .5em 1em;     /* match whatever spacing you like */
  cursor: pointer;       /* show it’s clickable */
  /* optional: remove default marker if you’re adding your own */
  /* summary::-webkit-details-marker { display: none; } */
}

/* 1) force font‐smoothing + legible rendering */
.tippy-box.pbis-theme,
.tippy-box.pbis-theme .tippy-content {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 2) body text */
.tippy-box.pbis-theme .tippy-content,
.tippy-box.pbis-theme .tippy-content ul li,
.tippy-box.pbis-theme .tippy-content span {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
}

/* 3) title (“TOTAL Distribution”, etc.) */
.tippy-box.pbis-theme .tippy-content strong {
  display: block;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

/* 4) Chart.js legend labels (inside canvas) */
.pbis-theme .pbis-chart ~ .tippy-content span {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Reset the tooltip content styles to ensure it doesn't inherit undesired styles */
.tippy-box .staff-tooltip-content {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #fff !important;  /* Ensures white text */
    letter-spacing: 0.5px !important;
    background-color: transparent !important;  /* Prevent unwanted background */
    padding: 0 !important;  /* Remove inherited padding */
    margin: 0 !important;  /* Ensure no inherited margins */
    border: none !important;  /* Ensure no border */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.7) !important; /* Optional: text shadow for readability */
}

/* Prevent the list items inside the tooltip from inheriting padding or background */
.tippy-box .goal-category-list li {
    background-color: transparent !important;   
    padding: 0 !important;  /* Remove padding */
    margin: 0 !important;  /* Remove margin */
    border-bottom: none !important;
    margin-top: 5px !important;
}

/* Apply the same font styles to the tooltip content inside the staff tooltip */
.tippy-box .tippy-content {
    font-family: sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    /*color: #fff !important;   White text */
    padding: 8px !important;  /* Optional: adjust padding inside the tooltip */
}

.tippy-box .goal-category-list {
    margin-top: 10px !important;
    font-weight: 600 !important;

}

/* 1) Let the Select2 container overflow the modal-content */
#edit-group-modal .select2-container--open {
  overflow: visible !important;
}

/* 2) Cap the height of the results list itself, with its own scrollbar */
.staff-dropdown .select2-results__options {
  max-height: 180px;    /* adjust to taste */
  overflow-y: auto;
}


/* Ensure Select2 is usable within a modal */
.select2-container {
    z-index: 9999 !important;
}

.select2-dropdown {
    z-index: 9999 !important;
}

#archived-goals-list {
  max-height: 400px;   /* adjust to whatever fits your layout */
  overflow-y: auto;    /* enable vertical scrolling */
  padding-right: 4px;  /* little room for scrollbar */
}

/* Optional: style the scrollbar for better appearance */
#archived-goals-list::-webkit-scrollbar {
  width: 6px;
}
#archived-goals-list::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 3px;
}

/* Schedule table: fully grey ended rows */
.schedule-table tr.ended-row { color: #888; opacity: .65; }
.schedule-table tr.ended-row select { color: #666; background: #f5f5f5; }

/* ABLE table: ended columns */
.schedule-table th.ended-col,
.schedule-table td.ended-col { color: #666; }

/* Small tag */
.ended-tag { font-size: .85em; color: #666; }

.locked-column input[disabled] {
  background-color: #f3f3f3 !important;
  color: #777 !important;
  border: 1px solid #ccc !important;
  cursor: not-allowed !important;
}

.locked-column label {
  color: #888;
}

.locked-column .input-group {
  position: relative;
}

.locked-column .input-group::after {
  content: "🔒";
  position: absolute;
  right: 8px;
  top: 6px;
  color: #aaa;
  font-size: 14px;
  pointer-events: none;
}

.current-column input {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}

.current-column .input-group::after {
  content: "🟢";
  position: absolute;
  right: 8px;
  top: 6px;
  color: #4caf50;
  font-size: 14px;
  pointer-events: none;
}

.apexcharts-inner {
  overflow: visible !important;
}
.apexcharts-canvas {
  overflow: visible !important;
}

/* ===== General Excluded Style (Universal) ===== */
.excluded {
  opacity: 0.5;
  filter: grayscale(0.2);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* ===== Status Box and Selector Visuals ===== */
.selector-item.excluded {
  text-decoration: line-through;
}

.exclude-btn:hover {
  filter: brightness(0.9);
}

/* ===== Thumbnail Overlay ===== */
.thumbnail-container {
  position: relative;
}

.thumbnail-container .exclude-toggle {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  padding: 0 4px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.thumbnail-container .exclude-toggle:hover {
  background: rgba(220,0,0,0.9);
  color: white;
}

.thumbnail-container.excluded::after {
  content: "Excluded";
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(220,0,0,0.8);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
}

/* ===== Prevent icons/text in summary ===== */
.statistical-summary .excluded::after,
.statistical-summary .exclude-toggle {
  display: none !important;
}

.print-thumb-btn {
  display: inline-block;
  margin-top: 5px;
  background: #0f77bd;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 8px;
  transition: background 0.2s;
}
.print-thumb-btn:hover {
  background: #0c5e94;
}

.disabled-date {
    background: #ddd !important;
    color: #888 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}

.goal-date-range {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 8px 16px;
    margin-top: 4px;
    font-size: 0.9rem;
}

.goal-date-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d0d7e2;
    background: #f7f9fc;
}

.goal-date-caption {
    font-weight: 600;
    color: #333;
}

.goal-date-label input[type="date"].goal-start-date-input,
.goal-date-label input[type="date"].goal-end-date-input {
    border: 1px solid #c0c8d5;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.9rem;
    min-width: 130px;
}

/* On very small screens, stack them nicely */
@media (max-width: 600px) {
    .goal-date-range {
        align-items: stretch;
    }

    .goal-date-label {
        flex: 1 1 100%;
    }
}

.goal-tabs {
    margin-top: 15px;
}

.goal-tabs-nav {
    display: flex;
    border-bottom: 2px solid #ccc;
    background: #f5f5f5;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.goal-tab-btn {
    flex: 1;
    padding: 10px 0;
    background: #e8e8e8;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #555;
    border-right: 1px solid #d0d0d0;
    transition: background 0.2s ease, color 0.2s ease;
}

.goal-tab-btn:last-child {
    border-right: none;
}

.goal-tab-btn:hover {
    background: #dcdcdc;
}

.goal-tab-btn.active {
    background: #ffffff;
    color: #007bff;
    border-bottom: 3px solid #007bff;
}

.doc-thumb {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 6px 10px;
    border: 1px solid #d0d7e2;
    border-radius: 6px;
    background: #f7f9fc;
    margin-bottom: 8px;
}

.doc-thumb a {
    flex: 1;
    text-decoration: none;
    color: #0077cc;
}

.doc-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    padding: 4px;
    font-size: 16px;
    color: #b00;
}

.doc-delete-btn:hover {
    color: #ff0000;
}

.column-color-picker {
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 4px;
    border: 1px solid #bbb;
    border-radius: 50%;     /* ← makes it a perfect circle */
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;       /* cleaner for browsers */
}

.column-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.column-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.selector-item.small-selector-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Wrapped Buttons */
.wrapped-link a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
    font-weight: 500;
}

.wrapped-link a i {
    font-size: 16px;
    color: #ffd966; /* Gift gold */
}

.wrapped-link a:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.freshness-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;      /* keeps numbers aligned */
    height: 14px;

    margin-right: 0px;   /* tight bond to goal dots */
    justify-self: center;   /* 🔥 THIS is key */
    font-size: 12px;
    font-weight: 900;
    line-height: 1;

    border: none;        /* 🔥 removes circle */
    border-radius: 0;    /* 🔥 removes circle */
    background: none;

    font-variant-numeric: tabular-nums; /* clean columns */
}

.dot-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: gray;

    margin-left: 0;      /* ← NO gap from ! */
}

.metadata-header-content .freshness-alert {
    margin-left: 6px;
}

.goal-dots {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
    align-items: center;
    justify-self: start; /* aligns under header label */

}

.goal-dot {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    opacity: 0.7;
}

.goal-dot.green  { background: #16a34a; }
.goal-dot.yellow { background: #ca8a04; }
.goal-dot.red    { background: #dc2626; }

#student-list li {
    display: grid;
    grid-template-columns: 1fr 40px max-content;

    padding: 8px 12px;   /* 🔥 MUST MATCH HEADER */
    margin: 0;
    list-style: none;

    align-items: center;
}

/* Services log list wrapper */
.services-log-list{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e6e6e6;
}

/* Each row becomes a card */
.service-row{
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* top line */
.service-row-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* date style */
.service-row-top strong{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* pill badge */
.service-pill{
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.service-pill.met{
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.25);
  color: #166534;
}

.service-pill.not-met{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.25);
  color: #991b1b;
}

/* note line */
.service-note{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #334155;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #eef2f7;
}

/* muted note */
.service-note.muted{
  color: #64748b;
  font-style: italic;
}

/* optional: hover polish */
.service-row:hover{
  border-color: #d7dee6;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.service-row-left{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-row-sub{
  font-size: 12px;
  color: #64748b;
}

/* clamp notes to 2 lines */
.service-note-clamp{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;               /* standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flatpickr-day.absent-highlight { background:#9ca3af !important; color:#fff !important; }
.flatpickr-day.refused-highlight { background:#ef4444 !important; color:#fff !important; }
.flatpickr-day.other-highlight { background:#a855f7 !important; color:#fff !important; }

.goal-event-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.goal-event-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}
.goal-event-dot.absent { background:#9ca3af; }
.goal-event-dot.refused { background:#ef4444; }
.goal-event-dot.other { background:#a855f7; }