@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: min(700px, calc(100vw - 20px));
        padding: 16px;
    }

    .modal-content h2 {
        font-size: 1.5em;
    }

    .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: 560px) {
    .login-box {
        width: 100%;
        padding: 1rem 0.85rem;
    }

    .demo-login-actions {
        grid-template-columns: 1fr;
    }

    .demo-login-btn {
        min-height: 3.15rem;
    }

    .forgot-password-toggle {
        padding: 0.7rem 0.85rem;
        font-size: 0.98rem;
    }

    .forgot-password-content .forgot-password-form {
        padding: 0.9rem;
    }
}

@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-text-block {
        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: 1000px) {
    .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-text-block {
        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: 65px;
    /* Adjust as needed */
    width: auto;
    /* Maintain aspect ratio */
    margin-left: 2px;
    margin-top: 7px;
    /* Adjust this value to move the logo to the right */
}

#luxbar .luxbar-menu-material-indigo,
#luxbar .luxbar-navigation,
#luxbar .luxbar-header {
    min-height: 70px;
}

.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 */
}

@media (max-width: 1000px) {
    #luxbar {
        overflow: visible !important;
        z-index: 4000;
    }

    #luxbar .luxbar-menu {
        width: 100%;
        height: auto !important;
        overflow: visible !important;
        position: relative;
    }

    #luxbar .luxbar-navigation {
        display: block !important;
        width: 100% !important;
        min-height: calc(56px + env(safe-area-inset-top, 0px));
        height: calc(56px + env(safe-area-inset-top, 0px));
        overflow: hidden;
        background-color: #1a375c;
    }

    #luxbar .luxbar-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: calc(56px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }

    #luxbar .luxbar-item:not(.luxbar-header) {
        display: block !important;
        width: 100% !important;
        height: 0 !important;
        max-height: 0;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.2s ease, opacity 0.2s ease;
    }

    #luxbar .luxbar-item:not(.luxbar-header) a {
        justify-content: flex-start;
        min-height: 0;
        padding: 0 16px !important;
    }

    #luxbar .luxbar-checkbox:checked ~ .luxbar-menu .luxbar-item:not(.luxbar-header) {
        height: auto !important;
        max-height: none;
        opacity: 1;
        visibility: visible;
    }

    #luxbar .luxbar-checkbox:checked ~ .luxbar-menu .luxbar-navigation {
        height: auto !important;
        max-height: calc(100vh - env(safe-area-inset-top, 0px));
        max-height: calc(100svh - env(safe-area-inset-top, 0px));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }

    #luxbar .luxbar-checkbox:checked ~ .luxbar-menu .luxbar-item:not(.luxbar-header) a {
        min-height: 52px;
        padding: 14px 16px !important;
    }
}

@media (max-width: 1000px) {
    .luxbar-item.school-selector {
        display: block;
        height: auto;
        margin: 0;
        padding: 0 16px 12px;
    }

    .luxbar-item.school-selector .school-select-wrap {
        display: block !important;
        width: 100%;
    }

    .luxbar-item.school-selector select {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 44px;
        margin: 0;
        box-sizing: border-box;
        text-align: left;
    }
}

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

@media (max-width: 1000px) {
    .content-students {
        margin-top: calc(64px + env(safe-area-inset-top, 0px));
    }
}

.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-dashboard {
    gap: 18px;
    align-content: start;
}

.manage-dashboard .manage-section {
    display: none;
}

.manage-dashboard.manage-focused .manage-launcher {
    display: none;
}

.manage-dashboard.manage-focused .manage-section {
    display: none;
}

.manage-dashboard.manage-focused .manage-section.manage-focus {
    display: block;
}

.manage-launcher,
.manage-section {
    width: 100%;
}

.manage-eyebrow {
    margin: 0 0 8px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #2b6aa1;
}

.manage-launcher {
    border: 1px solid rgba(26, 55, 92, 0.1);
    width: min(100%, 720px);
}

.manage-launcher-header,
.manage-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.manage-launcher-header h2,
.manage-panel-header h2 {
    margin: 0;
}

.manage-launcher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.launcher-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(26, 55, 92, 0.14);
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    color: #16324f;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.manage-dashboard.manage-focused .launcher-card.is-selected,
.manage-dashboard.manage-focused .manage-section.manage-focus {
    box-shadow: none;
}

.launcher-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(22, 50, 79, 0.08);
    border-color: rgba(32, 111, 176, 0.35);
}

.launcher-card.is-selected,
.manage-launcher.manage-focus,
.manage-section.manage-focus {
    box-shadow: 0 0 0 3px rgba(36, 91, 133, 0.14);
    border-color: rgba(36, 91, 133, 0.35);
}

.launcher-card-primary {
    background: linear-gradient(135deg, #16324f 0%, #245b85 100%);
    color: #fff;
}

.launcher-card-kicker {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.78;
}

.launcher-reset-btn,
.manage-back-btn,
.manage-action-btn {
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    background: #16324f;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.launcher-reset-btn {
    background: #eef5ff;
    color: #16324f;
    border: 1px solid rgba(22, 50, 79, 0.12);
}

.manage-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.manage-section.manage-focus {
    width: min(100%, 980px);
}

.invite-flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.invite-step-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.9rem;
    color: #5a6d80;
}

.invite-step-labels span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef5ff;
}

.invite-type-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.manage-mobile-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 22px;
}

.manage-sort-pills {
    align-items: center;
    margin-top: -6px;
}

.manage-sort-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #5a6d80;
    margin-right: 2px;
}

.manage-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: -4px;
    margin-bottom: 20px;
}

.manage-filter-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #5a6d80;
}

.manage-filter-control select {
    min-height: 40px;
    border: 1px solid #c9d7e5;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    color: #16324f;
}

.manage-mobile-pill {
    border: 1px solid rgba(22, 50, 79, 0.16);
    border-radius: 999px;
    padding: 10px 14px;
    background: #fff;
    color: #16324f;
    font-weight: 700;
    cursor: pointer;
}

.manage-mobile-pill.active {
    background: #16324f;
    color: #fff;
    border-color: #16324f;
}

.manage-mobile-pane {
    display: none;
}

.manage-mobile-pane.active {
    display: block;
}

.manage-mobile-pane > h3 {
    margin: 0 0 14px;
}

.invite-type-btn {
    border: 1px solid rgba(22, 50, 79, 0.16);
    border-radius: 999px;
    padding: 10px 14px;
    background: #fff;
    color: #16324f;
    font-weight: 600;
    cursor: pointer;
}

.invite-type-btn.active {
    background: #16324f;
    color: #fff;
    border-color: #16324f;
}

.invite-panel {
    display: none;
    padding: 18px;
    border: 1px solid rgba(22, 50, 79, 0.1);
    border-radius: 16px;
    background: #fbfdff;
}

.invite-panel.active {
    display: block;
}

.invite-panel-copy h3 {
    margin: 0 0 8px;
}

.invite-panel-copy p {
    margin: 0 0 14px;
    color: #54687d;
}

.invite-section {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invite-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.invite-result-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(22, 50, 79, 0.12);
    background: #fff;
}

.invite-result-card.is-error {
    border-color: rgba(185, 28, 28, 0.18);
    background: #fff5f5;
}

.invite-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.invite-result-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    background: #e9f7ee;
    color: #146c43;
    font-size: 0.82rem;
    font-weight: 700;
}

.invite-result-card.is-error .invite-result-badge {
    background: #fee2e2;
    color: #b91c1c;
}

.invite-result-link {
    font-size: 0.92rem;
    word-break: break-all;
    color: #245b85;
}

.invite-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.invite-result-actions button,
.invite-result-actions a {
    border: 1px solid rgba(22, 50, 79, 0.12);
    border-radius: 999px;
    padding: 8px 12px;
    background: #fff;
    color: #16324f;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.manage-school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.manage-school-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(22, 50, 79, 0.1);
    border-radius: 16px;
    padding: 18px;
    background: #fbfdff;
}

.manage-school-card h3,
.manage-school-card p {
    margin: 0;
}

.manage-school-card p {
    color: #5a6d80;
}

.manage-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manage-mobile-card {
    border: 1px solid rgba(22, 50, 79, 0.12);
    border-radius: 16px;
    padding: 14px;
    background: #fbfdff;
    box-shadow: 0 6px 16px rgba(22, 50, 79, 0.05);
}

.manage-mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.manage-mobile-card-header h3,
.manage-mobile-card-header p {
    margin: 0;
}

.manage-mobile-card-header h3 {
    font-size: 1rem;
}

.manage-mobile-card-header p {
    margin-top: 4px;
    color: #5a6d80;
    font-size: 0.9rem;
}

.manage-mobile-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    background: #eef5ff;
    color: #16324f;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: capitalize;
}

.manage-mobile-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.manage-mobile-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: #5a6d80;
    font-weight: 600;
}

.manage-mobile-fields input,
.manage-mobile-fields select {
    min-height: 40px;
    border: 1px solid #c9d7e5;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    color: #16324f;
}

.manage-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.manage-mobile-actions button {
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    background: #16324f;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.manage-mobile-actions button.danger {
    background: #c62828;
}

.manage-mobile-empty {
    padding: 18px;
    border: 1px dashed rgba(22, 50, 79, 0.18);
    border-radius: 14px;
    color: #5a6d80;
    background: #fbfdff;
}

.manage-inline-actions,
.manage-join-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.manage-join-form input,
.manage-school-card input,
.invite-section input {
    min-height: 42px;
}

.manage-nav-item a {
    font-weight: 600;
}

.manage-mobile-link {
    display: none;
}

.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;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 24px));
    border-radius: 8px;
}

/* 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-text-block,
.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;
}

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

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

.goal-graph-accordion,
.progress-reports-accordion,
.goal-meta-accordion,
.goal-tabs-accordion,
.goal-tools-accordion {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.goal-graph-accordion > summary,
.progress-reports-accordion > summary,
.goal-meta-accordion > summary,
.goal-tabs-accordion > summary,
.goal-tools-accordion > summary {
    display: none;
}

.goal-mobile-status-row {
    display: none;
}

/* MOBILE */
@media (max-width: 1000px) {
    .goal-item {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw;
        min-width: 0 !important;
        overflow-x: hidden;
        gap: 10px;
    }

    .goal-item > * {
        box-sizing: border-box;
        margin: 0 !important;
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .goal-text-block,
    .goal-data,
    .goal-mobile-status-row,
    .goal-meta-accordion,
    .goal-tools-accordion,
    .goal-graph-accordion,
    .goal-tabs-accordion,
    .progress-reports-accordion {
        width: 100%;
    }

    .goal-data .enter-data-text {
        margin-bottom: 8px;
        text-align: center;
    }

    .goal-separator,
    .separator-horizontal,
    .separator-vertical {
        display: none !important;
    }

    .goal-meta-accordion > summary,
    .goal-tabs-accordion > summary,
    .goal-tools-accordion > summary,
    .goal-graph-accordion > summary,
    .progress-reports-accordion > summary {
        display: block;
        width: 100%;
        max-width: 100%;
        list-style: none;
        cursor: pointer;
        position: relative;
        padding: 12px 44px 12px 14px;
        border: 1px solid #c6d9ea;
        border-radius: 10px;
        background: linear-gradient(180deg, #f9fcff 0%, #edf5fb 100%);
        font-weight: 600;
        color: #082645;
        box-sizing: border-box;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 2px 6px rgba(8, 38, 69, 0.06);
        transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .goal-meta-accordion > summary::after,
    .goal-tabs-accordion > summary::after,
    .goal-tools-accordion > summary::after,
    .goal-graph-accordion > summary::after,
    .progress-reports-accordion > summary::after {
        content: '›';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        font-size: 24px;
        line-height: 1;
        color: #0b5db8;
        transition: transform 0.18s ease, color 0.18s ease;
    }

    .goal-meta-accordion > summary:hover,
    .goal-tabs-accordion > summary:hover,
    .goal-tools-accordion > summary:hover,
    .goal-graph-accordion > summary:hover,
    .progress-reports-accordion > summary:hover {
        border-color: #9cc2e2;
        background: linear-gradient(180deg, #ffffff 0%, #e8f2fb 100%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 10px rgba(8, 38, 69, 0.1);
    }

    .goal-meta-accordion > summary:active,
    .goal-tabs-accordion > summary:active,
    .goal-tools-accordion > summary:active,
    .goal-graph-accordion > summary:active,
    .progress-reports-accordion > summary:active {
        transform: translateY(1px);
    }

    .goal-meta-accordion > summary::-webkit-details-marker,
    .goal-tabs-accordion > summary::-webkit-details-marker,
    .goal-tools-accordion > summary::-webkit-details-marker,
    .goal-graph-accordion > summary::-webkit-details-marker,
    .progress-reports-accordion > summary::-webkit-details-marker {
        display: none;
    }

    .goal-meta-accordion[open] > summary,
    .goal-tabs-accordion[open] > summary,
    .goal-tools-accordion[open] > summary,
    .goal-graph-accordion[open] > summary,
    .progress-reports-accordion[open] > summary {
        margin-bottom: 10px;
        border-color: #7eaed7;
        background: linear-gradient(180deg, #f2f8ff 0%, #e2eefb 100%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 4px 12px rgba(11, 93, 184, 0.12);
    }

    .goal-meta-accordion[open] > summary::after,
    .goal-tabs-accordion[open] > summary::after,
    .goal-tools-accordion[open] > summary::after,
    .goal-graph-accordion[open] > summary::after,
    .progress-reports-accordion[open] > summary::after {
        transform: translateY(-50%) rotate(270deg);
    }

    .goal-graph {
        min-height: 260px;
        max-width: 100% !important;
        min-width: 0 !important;
    }

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

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

    .chart-toggle-vertical {
        transform: scale(1) !important;
        margin: 10px 0 0 0 !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .flatpickr-calendar.inline {
        transform: scale(0.9) !important;
        transform-origin: top center;
    }
}

.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-text-block,
.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 .complete-btn,
.goal-content.editing .archive-btn,
.goal-text-block.editing .edit-goal-btn,
.goal-text-block.editing .archive-btn {
    display: none;
}

.goal-text-block,
.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: 960px;
}

#modal-chart-container {
    width: 100%;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #d7dfeb;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-sizing: border-box;
}

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

.toggle-note-history-btn {
    margin-top: 12px;
}

.goal-note-history {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #f8fbff;
}

.report-note-card + .report-note-card {
    margin-top: 12px;
}

.report-note-card {
    padding: 12px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    background: #fff;
}

.report-note-card-header {
    margin-bottom: 8px;
}

.report-note-period {
    font-weight: 700;
    color: #12344d;
}

.report-note-preview-wrap {
    margin-bottom: 10px;
}

.report-note-thumb-link {
    display: inline-block;
}

.report-note-thumb {
    display: block;
    width: 96px;
    height: 124px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.report-note-thumb-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 124px;
    background: #fff;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.report-note-body {
    padding: 0;
    color: #243b53;
    font-size: 0.95rem;
    line-height: 1.5;
}

.report-note-body.ql-editor {
    padding: 0;
}

.report-note-empty {
    margin: 0;
    color: #6b7c93;
    font-size: 0.95rem;
}

.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;
  width: 100%;
}

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

/* the actual editable area */
.quill-editor .ql-editor {
  margin: 0 !important;
  padding: 8px 0 !important;
  min-height: 6em !important;
  max-height: 18em;
  overflow-y: auto;
}

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

.goal-edit-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.goal-edit-actions-mobile {
    width: 100%;
    margin-top: 0;
    justify-content: stretch;
}

.goal-edit-actions-mobile .save-btn,
.goal-edit-actions-mobile .cancel-btn {
    flex: 1 1 0;
    margin-right: 0 !important;
}

.goal-edit-actions .cancel-btn {
    background-color: #6c757d;
    color: #fff;
    border: none;
    padding: 10px 15px !important;
    border-radius: 4px;
    cursor: pointer;
}

.goal-edit-actions .cancel-btn:hover {
    background-color: #555;
}

#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;
    position: fixed;
    z-index: 1002;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    background-color: #ffffff;
    padding: 20px 30px;
    border-radius: 10px;
    width: min(700px, calc(100vw - 24px));
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    cursor: default;
    margin: min(6vh, 40px) auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

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

.tippy-box[data-theme~='coachmark'] {
    background: linear-gradient(135deg, #0f3d63 0%, #1f6aa5 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(8, 38, 69, 0.28);
    max-width: min(320px, calc(100vw - 24px));
}

.tippy-box[data-theme~='coachmark'] .tippy-content {
    padding: 0;
}

.tippy-box[data-theme~='coachmark'] .tippy-arrow {
    color: #1f6aa5;
}

.pm-coachmark {
    padding: 12px 14px;
}

.pm-coachmark__title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}

.pm-coachmark__body {
    font-size: 0.92rem;
    line-height: 1.45;
    opacity: 0.96;
}

.pm-coachmark-target {
    position: relative;
    z-index: 3;
    border-radius: 14px;
    box-shadow:
        0 0 0 4px rgba(31, 106, 165, 0.34),
        0 0 0 10px rgba(31, 106, 165, 0.14),
        0 10px 24px rgba(10, 47, 77, 0.18);
    animation: pmCoachmarkPulse 1.4s ease-in-out infinite;
}

@keyframes pmCoachmarkPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(31, 106, 165, 0.34),
            0 0 0 10px rgba(31, 106, 165, 0.14),
            0 10px 24px rgba(10, 47, 77, 0.18);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(31, 106, 165, 0.48),
            0 0 0 14px rgba(31, 106, 165, 0.18),
            0 14px 28px rgba(10, 47, 77, 0.22);
    }
}

@media (max-width: 1000px) {
    .tippy-box[data-theme~='coachmark'] {
        max-width: calc(100vw - 20px);
        border-radius: 16px;
    }

    .pm-coachmark {
        padding: 14px 15px;
    }

    .pm-coachmark__title {
        font-size: 1rem;
    }

    .pm-coachmark__body {
        font-size: 0.95rem;
    }

    .pm-coachmark-target {
        border-radius: 16px;
        box-shadow:
            0 0 0 4px rgba(31, 106, 165, 0.42),
            0 0 0 12px rgba(31, 106, 165, 0.18),
            0 12px 28px rgba(10, 47, 77, 0.22);
    }
}

.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 */
}

#luxbar.dashboard-header {
    padding-top: 0;
}

#luxbar .luxbar-menu-material-indigo {
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: 0;
}

#luxbar .luxbar-navigation {
    min-height: calc(56px + env(safe-area-inset-top, 0px));
}

#luxbar .luxbar-header {
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    padding-top: env(safe-area-inset-top, 0px);
}

#luxbar .logo {
    height: 56px;
    min-height: 56px;
}

#luxbar .logo img {
    max-height: 65px;
    margin-top: 7px;
}

@media (max-width: 1000px) {
    #luxbar.dashboard-header {
        padding-top: 0;
    }

    #luxbar .luxbar-menu-material-indigo {
        min-height: calc(56px + env(safe-area-inset-top, 0px));
        padding-top: 0;
    }

    #luxbar .luxbar-navigation {
        min-height: calc(56px + env(safe-area-inset-top, 0px));
    }

    #luxbar .luxbar-header {
        min-height: calc(56px + env(safe-area-inset-top, 0px));
        display: flex;
        align-items: center;
        padding-top: env(safe-area-inset-top, 0px);
    }

    #luxbar .logo {
        height: 56px;
        min-height: 56px;
    }

    #luxbar .logo img {
        max-height: 65px;
        margin-top: 10px;
    }

    #luxbar .luxbar-hamburger {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: max(8px, env(safe-area-inset-right, 0px));
        margin-top: 0;
        padding: 0;
        top: auto;
        right: auto;
    }

}

.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: center;
    min-height: calc(100vh - 70px);
    min-height: calc(100svh - 70px);
    margin-top: 60px;
    padding: 2rem;
    background-color: #4f6a8d;
}

.auth-page .center-content {
    margin-top: 70px;
}

.auth-page #luxbar .luxbar-menu {
    transition: none;
}

.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;
    gap: 1rem;
}

.login-box form,
.demo-login-panel,
.forgot-password,
.forgot-password-panel,
.forgot-password-content,
.forgot-password-form,
.input-container {
    width: 100%;
}

.login-box > form {
    margin: 0;
}

.account-help-panel {
    width: 100%;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid #d7e0ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f1f5fb 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-align: center;
}

.account-help-text {
    width: 100%;
    margin: 0;
    color: #4c607e;
    font-size: 0.95rem;
    text-align: center;
}

.account-help-link {
    display: block;
    width: 100%;
    color: #23446f;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

.auth-page .account-help-panel,
.auth-page .account-help-text,
.auth-page .account-help-link {
    text-align: center !important;
}

.auth-page .account-help-panel {
    align-items: center !important;
    justify-content: center !important;
}

.account-help-link:hover {
    color: #163457;
    text-decoration: underline;
}

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

.login-box .form-control,
.login-box .btn-primary,
.login-box .join-code-toggle,
.forgot-password .form-control,
.forgot-password .btn-primary {
    box-sizing: border-box;
    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"] {
    box-sizing: border-box;
    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 */
}

.forgot-password {
    width: 100%;
}

.forgot-password-status {
    margin: 0 0 1rem;
}

.forgot-password-panel {
    width: 100%;
    border-top: 1px solid #e0e6ee;
    margin-top: 0;
    padding-top: 0.9rem;
    text-align: left;
}

.forgot-password-toggle {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    cursor: pointer;
    padding: 0.8rem 1rem;
    color: #23446f;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    border: 1px solid #d7e0ef;
    border-radius: 12px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    text-decoration: none;
    background: linear-gradient(180deg, #fbfdff 0%, #f1f5fb 100%);
}

.forgot-password-toggle:hover {
    color: #163457;
    border-color: rgba(35, 68, 111, 0.25);
    background: linear-gradient(180deg, #f8fbff 0%, #e8eff9 100%);
}

.forgot-password-form {
    margin-top: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.forgot-password-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease, margin-top 0.22s ease;
    margin-top: 0;
}

.forgot-password-content.is-open {
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.75rem;
}

.forgot-password-content .forgot-password-form {
    padding: 1rem 1rem 1rem;
    border: 1px solid #d7e0ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f1f5fb 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.forgot-password-content label {
    display: block;
    margin-bottom: 0.2rem;
    color: #23446f;
    font-weight: 600;
}

.demo-login-panel {
    width: 100%;
    margin: 0;
    padding: 1rem;
    border: 1px solid #d7e0ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #f5f8ff 0%, #ebf1fb 100%);
}

.demo-login-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #23446f;
    text-align: center;
}

.demo-login-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.demo-login-btn {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 0.85rem 0.9rem;
    min-height: 3.9rem;
    background: #2f6fa4;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.demo-login-btn-line {
    display: block;
    line-height: 1.15;
    text-align: center;
    width: 100%;
}

.demo-login-btn:hover {
    background: #245a86;
    transform: translateY(-1px);
}

.demo-login-note {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #4c607e;
    text-align: center;
}

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

.join-code-toggle {
    display: block;
    border: none;
    background-color: #007bff;
    color: #fff;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}

.join-code-toggle: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;
    width: 100%;
}

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

#approved-users-table-container,
#waiting-approval-table-container,
#active-students-table-container,
#archived-students-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#approved-users-table-container .tabulator,
#waiting-approval-table-container .tabulator
#active-students-table-container .tabulator,
#archived-students-table-container .tabulator {
    min-width: 680px;
}

.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: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    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;
    cursor: pointer;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    font-size: 0;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.2s ease;
    color: #0056b3;
}

.accordion-arrow::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2.5px solid currentColor;
    border-right: 2.5px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
}

/* 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: grid;
    grid-template-columns: fit-content(100%) auto auto;
    align-items: center;
    justify-content: start;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.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;
    min-width: 0;
}

.metadata-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 180px;
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
    justify-content: flex-start;
}

#lightbox-inline-report-actions .fas,
#lightbox-inline-report-actions .far,
#generated-report-actions .fas,
#generated-report-actions .far {
    position: static !important;
    margin: 0 !important;
    inset: auto !important;
    transform: none !important;
    line-height: 1 !important;
    color: #fff !important;
}

#generated-report-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 16px auto 0;
}

.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 */
}

@media (max-width: 600px) {
    .metadata-header-content {
        gap: 8px;
        padding: 10px 1rem 10px 10px;
    }

    .goal-category {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        width: 100%;
    }

    .category-link {
        font-size: 1.05rem;
        line-height: 1.2;
        min-width: 0;
    }

    .metadata-status {
        width: auto;
        gap: 6px;
        margin-right: 4px;
        justify-content: flex-end;
    }
}

.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;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    min-height: 20px;
}

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

.status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
    flex: 0 0 auto;
}

.trend-icon .status-indicator {
    margin-right: 0;
}

.status-indicator--success,
.status-indicator--neutral {
    border-radius: 50%;
}

.status-indicator--success {
    background: #0b8f18;
}

.status-indicator--neutral {
    background: #8a8f98;
}

.status-indicator--warning {
    position: relative;
    width: 0;
    height: 0;
    margin-right: 10px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid #b77900;
}

.status-indicator--warning::after {
    content: '';
    position: absolute;
    left: -1px;
    top: 4px;
    width: 2px;
    height: 5px;
    background: #fff;
    border-radius: 1px;
}

.status-indicator--warning::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 11px;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
}

.status-indicator--danger,
.status-indicator--excluded {
    position: relative;
    border-radius: 50%;
}

.status-indicator--danger {
    background: #c62828;
}

.status-indicator--danger::after {
    content: '!';
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.status-indicator--excluded {
    background: #7a1d1d;
}

.status-indicator--excluded::before,
.status-indicator--excluded::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.status-indicator--excluded::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.status-indicator--excluded::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 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;
    box-sizing: border-box;
    overflow: visible;
}

@media (max-width: 1000px) {
    #admin-drawer,
    #admin-drawer-toggle {
        display: none !important;
    }
}

/* 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 > ul {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.35rem;
}

#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#pbis-accordion #pbis-list {
    max-height: min(42vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.35rem;
}

#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;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* keep your content above the backdrop */
#printDialogModal .modal-content {
    position: relative;
    z-index: 10000;
    width: min(1100px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

#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;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  font-size: 0;
  line-height: 1;
  color: #0056b3;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.2s ease;
}

.accordion-arrow::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}

/* 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 #d7d7d7;
  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,
.goal-text-block.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;
}

/* Active “Q” = quiet room */
.attendance-row .att-pill.quiet-room.active {
  background: #f0a44b;
  border-color: #f0a44b;
  color: #fff;
}

.attendance-row .att-pill.sleeping.active {
  background: #4b75f0;
  border-color: #4b75f0;
  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;
}

.tippy-box.pbis-theme {
  max-width: min(980px, calc(100vw - 24px)) !important;
  overflow: visible !important;
}

.tippy-box.pbis-theme .tippy-content {
  min-width: min(900px, calc(100vw - 40px));
  overflow: visible !important;
  zoom: 0.9;
}

.tippy-box.pbis-theme .pbis-roster-wrap {
  max-height: min(380px, calc(100vh - 260px));
  overflow-y: auto !important;
  overflow-x: hidden;
}

.tippy-box.pbis-theme .pbis-chart {
  width: 200px !important;
  height: 200px !important;
}

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

}

.tippy-box {
    max-width: min(600px, calc(100vw - 24px)) !important;
}

.tooltip-markdown {
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: break-word;
}

.tooltip-markdown h1,
.tooltip-markdown h2,
.tooltip-markdown h3,
.tooltip-markdown h4 {
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.25;
    margin: 0 0 6px;
}

.tooltip-markdown p,
.tooltip-markdown li {
    margin: 0 0 6px;
}

.inline-tooltip-chart {
    width: min(250px, 100%);
    height: 150px;
    margin-top: 4px;
    margin-left: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: block;
    padding: 2px;
    box-sizing: border-box;
}

/* 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;
    gap: 10px;

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

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

.doc-name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.doc-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.doc-rename-btn,
.doc-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
}

.doc-rename-btn {
    color: #5f6b7a;
}

.doc-rename-btn:hover {
    color: #0077cc;
}

.doc-delete-btn {
    color: #b00;
}

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

.report-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 15000;
    background: rgba(8, 17, 29, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.report-preview-dialog {
    width: min(960px, 100%);
    height: min(92vh, 100%);
    background: #0f1724;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.report-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #132033;
    color: #fff;
}

.report-preview-title {
    font-size: 1rem;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.report-preview-btn {
    border: none;
    border-radius: 10px;
    background: #1f7aec;
    color: #fff;
    padding: 10px 14px;
    font-size: 0.95rem;
    cursor: pointer;
}

.report-preview-btn.secondary {
    background: rgba(255, 255, 255, 0.12);
}

.report-preview-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0f18;
    padding: 12px;
}

.report-preview-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.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: 0;
    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;
}

.services-editor-quill .ql-editor[data-placeholder-active="0"]::before {
  content: none !important;
}

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

/* weekly summary sent marker */
.flatpickr-day.week-sent{
  position: relative;
}

.flatpickr-day.week-sent::after{
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 2px #fff;
}

.schedule-container.collapsed .accordion-body,
.metadata-container.collapsed .accordion-body {
  overflow: hidden !important;
}
.schedule-container:not(.collapsed) .accordion-body,
.metadata-container:not(.collapsed) .accordion-body {
  overflow: visible !important;
}

.apexcharts-tooltip { z-index: 999999 !important; }

.select2-container {
    width: 100% !important;
}

.select2-container--open,
.select2-dropdown {
    z-index: 13000 !important;
}

#modal-chart-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

@media (max-width: 1000px) {
    .goal-item,
    .goal-item > *,
    .goal-item > details.mobile-goal-accordion,
    .goal-item > details.mobile-goal-accordion > summary,
    .goal-text-block,
    .goal-data,
    .goal-mobile-status-row,
    .goal-baseline-info,
    .goal-date-range,
    .goal-tabs,
    .goal-tabs-content,
    .goal-tab-panel,
    .goal-status,
    .progress-reports,
    .reports-header,
    .reports-legend,
    .goal-description,
    .ql-editor,
    .metadata-container,
    .metadata-container .accordion-body,
    .goal-row,
    .goal-row > div,
    .goal-row .goal-statuses,
    .goal-row .goal-status {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .goal-item > details.mobile-goal-accordion {
        overflow: hidden !important;
    }

    .goal-item > details.mobile-goal-accordion > summary,
    .goal-status,
    .reports-legend,
    .goal-description,
    .ql-editor,
    .goal-row .goal-status {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .goal-tabs-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px;
        border-bottom: 0;
        background: transparent;
        overflow: visible;
    }

    .goal-tab-btn {
        min-width: 0;
        padding: 10px 8px;
        border: 1px solid #d0d0d0;
        border-radius: 8px;
        overflow-wrap: anywhere;
    }

    .goal-tab-btn:last-child {
        border-right: 1px solid #d0d0d0;
    }

    .goal-date-label,
    .goal-date-label input[type="date"].goal-start-date-input,
    .goal-date-label input[type="date"].goal-end-date-input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .goal-status {
        flex-wrap: wrap;
    }

    .goal-status > span {
        min-width: 0;
    }

    .goal-graph,
    .goal-graph .apexcharts-canvas,
    .goal-graph .apexcharts-svg,
    .goal-graph .apexcharts-inner,
    .goal-graph svg {
        max-width: 100% !important;
    }
}

@media (max-width: 1000px) {
    .center-content {
        margin-top: 56px;
        height: auto;
        min-height: calc(100vh - 56px);
        min-height: calc(100svh - 56px);
        padding: 0.75rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .auth-page .center-content {
        margin-top: calc(60px + env(safe-area-inset-top, 0px));
        min-height: calc(100vh - 60px - env(safe-area-inset-top, 0px));
        min-height: calc(100svh - 60px - env(safe-area-inset-top, 0px));
    }

    .login-box {
        width: min(420px, 100%);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        gap: 0.9rem;
    }

    .demo-login-actions {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .demo-login-btn {
        min-height: 3.4rem;
        padding: 0.75rem 0.6rem;
        font-size: 0.9rem;
    }

    .forgot-password-panel {
        padding-top: 0.75rem;
    }

    .forgot-password-content.is-open {
        margin-top: 0.65rem;
    }

    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }

    .tooltip-markdown {
        max-width: min(520px, calc(100vw - 28px));
        pointer-events: none;
    }

    .tippy-box {
        max-width: min(540px, calc(100vw - 24px)) !important;
        z-index: 12050 !important;
    }

    #markdown-modal .modal__overlay {
        z-index: 12020;
    }

    #markdown-modal .modal__container {
        width: min(860px, calc(100vw - 20px));
        max-height: calc(100vh - 20px);
    }

    #printDialogModal {
        align-items: flex-start;
        justify-content: stretch;
        padding: calc(56px + env(safe-area-inset-top, 0px)) 0 0;
    }

    #printDialogModal .modal-content {
        width: 100vw;
        max-width: 100vw;
        height: calc(100vh - 56px - env(safe-area-inset-top, 0px));
        max-height: calc(100vh - 56px - env(safe-area-inset-top, 0px));
        margin: 0;
        border-radius: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        padding: 12px;
    }

    #modal-chart-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
    }

    #modal-chart-container {
        min-height: 0;
        padding: 6px;
    }

    .existing-notes {
        flex-direction: column;
        align-items: stretch;
    }

    .existing-notes select,
    .existing-notes input,
    .existing-notes button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

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

    .print-options .pill {
        white-space: nowrap;
    }

    .content-students {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        overflow-x: hidden;
    }

    .caseload-section,
    .student-section,
    .goal-section,
    .manage-section {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .manage-launcher-header,
    .manage-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .manage-panel-actions {
        justify-content: space-between;
    }

    .manage-launcher-grid,
    .manage-school-grid {
        grid-template-columns: 1fr;
    }

    .manage-mobile-fields {
        grid-template-columns: 1fr;
    }

    .launcher-card,
    .invite-panel,
    .manage-school-card {
        border-radius: 14px;
    }

    .manage-nav-item a {
        justify-content: flex-start;
        padding-left: 18px;
    }

    .manage-mobile-link {
        display: list-item;
    }

    .manage-mobile-link a {
        justify-content: flex-start;
        gap: 8px;
        padding-left: 18px;
    }

    .manage-dashboard.manage-focused .manage-section.manage-focus {
        width: 100%;
    }

    .group-options {
        display: none !important;
    }

}

/* lock area until user selects template/existing */
#goal-form-locked-area.locked {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

.goal-share-warning {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 2px solid #d97706;
    border-radius: 12px;
    background: #fff4db;
    color: #7c2d12;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.14);
}

.goal-share-warning strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.98rem;
}

.goal-share-warning p {
    margin: 0;
    line-height: 1.45;
}

/* highlight the selector area */
#selector-area.selector-attention {
    position: relative;
    border: 2px solid #1e88e5;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.15);
    animation: selectorPulse 1.4s ease-in-out infinite;
}

@keyframes selectorPulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.28); }
    70%  { box-shadow: 0 0 0 10px rgba(30, 136, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0); }
}

/* selected state, if you do not already have one */
#metadataOptionSelector .selector-item.selected {
    background: #e3f2fd;
    border: 2px solid #1e88e5;
    font-weight: 600;
}

@media (max-width: 1000px) {
  .goal-mobile-section summary {
    display: block;
  }
}

@media (max-width: 1000px) {
    .goal-mobile-section {
        margin-top: 12px;
        border: 1px solid #cfd8e3;
        border-radius: 8px;
        background: #f7fbff;
        overflow: hidden;
    }

    .goal-mobile-section summary {
        cursor: pointer;
        font-weight: 600;
        padding: 12px 14px;
        background: #d9ebf8;
        list-style: none;
    }

    .goal-mobile-section summary::-webkit-details-marker {
        display: none;
    }

    .goal-mobile-section > *:not(summary) {
        padding: 12px;
    }

    .goal-data-primary {
        margin-top: 12px;
    }

    .goal-tabs-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .statistics-table {
        font-size: 12px;
    }

    .mobile-goal-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-goal-date-range {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }
}

@media (min-width: 1000px) {
    .goal-mobile-section {
        border: none;
        background: transparent;
        margin-top: 0;
    }

    .goal-mobile-section summary {
        display: none;
    }

    .goal-mobile-section[open] > * {
        padding: 0;
    }
}

/* ===== FINAL MOBILE GOAL LAYOUT OVERRIDE ===== */
@media (max-width: 1000px) {
    .goal-item {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        gap: 10px !important;
    }

    .goal-item > * {
        box-sizing: border-box;
        width: 100% !important;
        margin: 0 !important;
    }

    /* ===== FORCE ORDER ===== */
    .goal-item > .goal-text-block {
        order: 1 !important;
    }

    .goal-item > .goal-data {
        order: 2 !important;
    }

    .goal-item > .goal-mobile-status-row {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .goal-item > .goal-meta-accordion {
        order: 4 !important;
    }

    .goal-item > .goal-tools-accordion {
        order: 5 !important;
    }

    .goal-item > .goal-graph-accordion {
        order: 6 !important;
    }

    .goal-item > .goal-tabs-accordion {
        order: 7 !important;
    }

    .goal-item > .progress-reports-accordion {
        order: 8 !important;
    }

    .goal-item > .goal-separator,
    .goal-item > hr.goal-separator,
    .goal-item > .separator-horizontal,
    .goal-item > .separator-vertical {
        order: 999 !important;
        display: none !important;
    }

    /* ===== STATUS MUST SHOW ===== */
    .goal-mobile-status-row,
    .goal-mobile-status-row .included-statuses-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .goal-mobile-status-row .goal-status {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .goal-mobile-status-row .goal-status > span {
        display: block !important;
        width: 100% !important;
    }

    .goal-mobile-status-row .exclude-btn {
        align-self: flex-start !important;
        margin-top: 4px !important;
    }

    /* details accordion blocks */
    .goal-item > details.mobile-goal-accordion {
        display: block !important;
        width: 100% !important;
    }

    /* graph area */
.goal-graph {
    width: 100% !important;
    min-height: 260px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: 18px;
}

.goal-graph,
.goal-graph * {
    -webkit-tap-highlight-color: transparent;
}

.goal-graph .apexcharts-canvas,
.goal-graph .apexcharts-svg,
.goal-graph .apexcharts-toolbar,
.goal-graph .apexcharts-toolbar *,
.goal-graph .apexcharts-menu,
.goal-graph .apexcharts-menu * {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.goal-graph .apexcharts-legend {
    flex-wrap: wrap !important;
    row-gap: 4px;
}

.goal-graph .apexcharts-canvas:focus,
.goal-graph .apexcharts-canvas:focus-visible,
.goal-graph .apexcharts-canvas:focus-within,
.goal-graph .apexcharts-svg:focus,
.goal-graph .apexcharts-svg:focus-visible,
.goal-graph .apexcharts-svg:focus-within,
.goal-graph .apexcharts-inner:focus,
.goal-graph .apexcharts-inner:focus-visible,
.goal-graph .apexcharts-inner:focus-within {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.goal-graph .apexcharts-toolbar button:focus,
.goal-graph .apexcharts-toolbar button:focus-visible,
.goal-graph .apexcharts-toolbar button:active,
.goal-graph .apexcharts-toolbar .apexcharts-menu-icon:focus,
.goal-graph .apexcharts-toolbar .apexcharts-menu-icon:focus-visible,
.goal-graph .apexcharts-toolbar .apexcharts-menu-icon:active,
.goal-graph .apexcharts-toolbar svg:focus,
.goal-graph .apexcharts-toolbar svg:focus-visible,
.goal-graph .apexcharts-toolbar svg:active,
.goal-graph .apexcharts-svg:focus,
.goal-graph .apexcharts-svg:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.goal-graph .apexcharts-toolbar .apexcharts-selected,
.goal-graph .apexcharts-toolbar .apexcharts-selected:hover,
.goal-graph .apexcharts-toolbar .apexcharts-selected:focus,
.goal-graph .apexcharts-toolbar .apexcharts-selected:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.goal-graph .apexcharts-toolbar .apexcharts-selected svg,
.goal-graph .apexcharts-toolbar .apexcharts-selected path {
    fill: inherit !important;
    stroke: inherit !important;
}

    /* prevent weird internal overflow */
    .goal-data,
    .goal-tabs,
    .progress-reports,
    .column-selector-section,
    .goal-baseline-info {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 1000px) {
}

@media (max-width: 1000px) {
  .goal-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .goal-item > * {
    order: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .goal-item > .goal-separator,
  .goal-item > .separator-horizontal {
    display: none !important;
  }

  .goal-item > .goal-mobile-status-row {
    display: block !important;
    width: 100% !important;
  }

  .goal-item > .goal-data,
  .goal-item > .goal-meta-accordion,
  .goal-item > .goal-tools-accordion,
  .goal-item > .goal-graph-accordion,
  .goal-item > .goal-tabs-accordion,
  .goal-item > .progress-reports-accordion {
    position: static !important;
    float: none !important;
    clear: both !important;
  }
}

@media (min-width: 1000px) {
    .goal-mobile-status-row,
    .mobile-goal-accordion {
        display: none !important;
    }
}

@media (max-width: 1000px) {
    .goal-content > .included-statuses-container {
        display: none !important;
    }
}

@media (max-width: 1000px) {
  .flatpickr-calendar.inline .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1000px) {
    .students-mobile-preload .student-section,
    .students-mobile-preload .goal-section {
        display: none !important;
    }

    .students-mobile-preload .caseload-section {
        display: block !important;
        width: 100%;
    }

    .mobile-step-hidden {
        display: none !important;
    }

    .mobile-step-active {
        display: block !important;
        width: 100%;
    }

    .mobile-back-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .mobile-back-btn {
        border: none;
        background: #0f77bd;
        color: white;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 14px;
        cursor: pointer;
    }
}

@media (min-width: 1000px) {
    .mobile-back-row {
        display: none !important;
    }
}

@media (max-width: 1000px) {
    .content-students {
        touch-action: pan-y;
    }
}

@media (max-width: 1000px) {
    .modal {
        --mobile-luxbar-offset: calc(56px + env(safe-area-inset-top, 0px));
        overflow: hidden;
        padding-top: var(--mobile-luxbar-offset);
        box-sizing: border-box;
        z-index: 999;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        height: calc(100dvh - var(--mobile-luxbar-offset));
        max-height: calc(100dvh - var(--mobile-luxbar-offset));
        margin: 0;
        border-radius: 0 0 16px 16px;
        padding: 12px 12px 84px 12px;
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1000px) {
    #printDialogModal .modal-content {
        position: relative;
        padding-top: 18px;
    }

    #printDialogModal .modal-content .close {
        position: sticky;
        top: env(safe-area-inset-top, 0px);
        right: 0;
        float: right;
        z-index: 40;
        margin-left: auto;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 8px;
        padding: 6px 10px;
    }

    .modal-content .close {
        position: sticky;
        top: 0;
        float: right;
        right: 0;
        z-index: 30;
        background: #fff;
        padding: 4px 6px;
    }

    .modal-content .drag-handle,
    .modal-content h2 {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
        margin-top: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media (max-width: 1000px) {
    .modal-content input,
    .modal-content select,
    .modal-content textarea,
    .modal-content button {
        font-size: 16px;
    }

    .modal-content input,
    .modal-content select,
    .modal-content button {
        min-height: 44px;
    }

    .modal-content .form-group {
        margin-bottom: 14px;
    }
}

@media (max-width: 1000px) {
    #assign-students-form > div {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    #assign-students-form button[type="submit"] {
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 1000px) {
    #add-goal-form {
        padding-bottom: 110px;
    }

    #add-goal-form button[type="submit"] {
        position: sticky;
        bottom: 0;
        width: 100%;
        z-index: 25;
        margin-top: 16px;
        margin-right: 0;
        display: block;
        box-shadow: 0 -4px 10px rgba(255,255,255,0.95);
    }
}

@media (max-width: 1000px) {
    #goal-description {
        height: 130px !important;
    }

    .ql-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px;
        overflow: visible;
        white-space: normal;
    }

    .ql-toolbar .ql-formats {
        margin-right: 4px !important;
        margin-bottom: 4px;
    }

    .ql-toolbar button,
    .ql-toolbar .ql-picker {
        transform: scale(0.95);
    }

    .ql-container {
        font-size: 16px;
    }

    .ql-editor {
        min-height: 110px;
        font-size: 16px;
        padding: 10px;
    }
}

@media (max-width: 1000px) {
    .previous-notes-row,
    .reporting-period-row,
    .print-modal-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #print-dialog-form input[type="text"],
    #print-dialog-form input[type="number"],
    #print-dialog-form select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #modal-chart-container {
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #modal-chart-img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        height: auto !important;
    }

}

@media (max-width: 1000px) {
    .print-options .pill {
        font-size: 14px;
        padding: 8px 12px;
    }
}

.progress-reports {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.progress-reports .thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 56px));
    gap: 10px;
    justify-content: start;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.thumbnail-container {
    position: relative;
    width: 56px;
    height: 74px;   /* fixed card height */
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    border: 1px solid #bbb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

.thumbnail-container a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.thumbnail,
.thumbnail-icon {
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.load-more-notes-btn,
.add-note-btn {
    max-width: 100%;
    box-sizing: border-box;
}

.thumbnail-container img.thumbnail,
.thumbnail-container .thumbnail-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* keeps whole preview visible */
    background: #fff;
}

.thumbnail-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: rgba(80, 80, 80, 0.72);
    pointer-events: none;
    line-height: 1;
    text-align: center;
}

.exclude-toggle {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 3;
}

@media (max-width: 1000px) {
    .progress-reports {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .progress-reports .thumbnails {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(56px, 56px));
        justify-content: start;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .thumbnail-container {
        width: 56px;
    }

    .load-more-notes-btn,
    .add-note-btn {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-top: 10px;
    }
}

.able-accordion-body {
  padding: 0.75rem;
}

.able-attendance-box {
  margin: 0 0 1rem 0;
  max-width: 240px;
}

.able-table-container {
  margin: 0 0 1rem 0;
  width: 100%;
}

.able-table-container.able-period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.able-table-container.able-period-grid > .able-date-heading,
.able-table-container.able-period-grid > .able-period-empty {
  grid-column: 1 / -1;
}

.able-flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.able-summary-box {
  flex: 1 1 300px;
  padding: 1rem;
  background: #f0f8ff;
  border: 1px solid #ccc;
  border-radius: 8px;
  min-width: 240px;
  box-sizing: border-box;
}

.able-calendar-box {
  flex: 1 1 300px;
  min-width: 240px;
  box-sizing: border-box;
}

.able-weekly-btn-row {
  text-align: center;
  margin-top: 1rem;
}

.able-weekly-btn {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.able-date-heading {
  margin: 0 0 0.75rem 0;
}

.able-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.able-header .schedule-title {
  flex: 1 1 auto;
  min-width: 0;
}

.able-header #link-goals-btn {
  margin-left: 0 !important;
}

.able-table-desktop {
  width: 100%;
  table-layout: auto;
}

.able-table-compact {
  width: 100%;
  table-layout: fixed;
  font-size: 0.88rem;
}

.able-table-compact th,
.able-table-compact td {
  padding: 0.3rem 0.2rem !important;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.able-table-compact th:first-child,
.able-table-compact td:first-child {
  width: 58px;
  font-weight: 700;
}

.able-table-compact th:not(:first-child),
.able-table-compact td:not(:first-child) {
  min-width: 0;
}

.able-table-compact input,
.able-table-compact select,
.able-table-compact textarea,
.able-table-compact button {
  max-width: 100%;
  box-sizing: border-box;
}

.able-table-compact .pill,
.able-table-compact .score-pill,
.able-table-compact .comment-pill,
.able-table-compact .data-pill {
  transform: scale(0.92);
  transform-origin: center;
}

.able-table-compact tbody td:first-child {
  font-size: 0.95rem;
}

.able-period-accordion {
  border: 1px solid #c7d6e5;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  min-width: 0;
}

.able-period-header {
  width: 100%;
  border: none;
  background: #eef5fb;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #12324a;
}

.able-period-header-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.able-period-title {
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.96rem;
}

.able-period-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.able-period-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.38rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  border: 1px solid currentColor;
}

.able-period-badge.excused {
  color: #2f8f46;
  background: #e8f6eb;
}

.able-period-badge.unexcused {
  color: #b43a32;
  background: #fdeceb;
}

.able-period-badge.quiet-room {
  color: #9a5b05;
  background: #fff1de;
}

.able-period-badge.sleeping {
  color: #224bb7;
  background: #e8efff;
}

.able-period-arrow {
  flex: 0 0 auto;
  font-size: 1rem;
  opacity: 0.8;
}

.able-period-accordion.open .able-period-header {
  background: #dcecf8;
  color: #0e2c44;
}

.able-period-state-green {
  border-width: 2px;
  border-color: #59ad72;
  box-shadow: 0 0 0 1px rgba(89, 173, 114, 0.26), 0 3px 8px rgba(76, 175, 80, 0.08);
}

.able-period-state-green > .able-period-header {
  box-shadow: inset 4px 0 0 #59ad72;
  background: linear-gradient(to right, rgba(89, 173, 114, 0.07), rgba(89, 173, 114, 0.015) 28%, rgba(255, 255, 255, 0) 52%);
}

.able-period-state-yellow {
  border-width: 2px;
  border-color: #d4ad24;
  box-shadow: 0 0 0 1px rgba(212, 173, 36, 0.28), 0 3px 8px rgba(235, 179, 0, 0.09);
}

.able-period-state-yellow > .able-period-header {
  box-shadow: inset 4px 0 0 #d4ad24;
  background: linear-gradient(to right, rgba(212, 173, 36, 0.08), rgba(212, 173, 36, 0.018) 28%, rgba(255, 255, 255, 0) 52%);
}

.able-period-state-red {
  border-width: 2px;
  border-color: #d76f68;
  box-shadow: 0 0 0 1px rgba(215, 111, 104, 0.26), 0 3px 8px rgba(211, 76, 66, 0.08);
}

.able-period-state-red > .able-period-header,
.able-period-state-unexcused > .able-period-header {
  box-shadow: inset 4px 0 0 #d76f68;
  background: linear-gradient(to right, rgba(215, 111, 104, 0.08), rgba(215, 111, 104, 0.018) 28%, rgba(255, 255, 255, 0) 52%);
}

.schedule-table th.able-period-col-green {
  box-shadow: inset 2px 0 0 #59ad72, inset -2px 0 0 #59ad72;
}

.schedule-table th.able-period-col-yellow {
  box-shadow: inset 2px 0 0 #d4ad24, inset -2px 0 0 #d4ad24;
}

.schedule-table th.able-period-col-red {
  box-shadow: inset 2px 0 0 #d76f68, inset -2px 0 0 #d76f68;
}

.schedule-table th.able-period-col-excused {
  box-shadow: inset 2px 0 0 #59ad72, inset -2px 0 0 #59ad72;
}

.schedule-table thead .able-period-col-green,
.schedule-table thead .able-period-col-yellow,
.schedule-table thead .able-period-col-red,
.schedule-table thead .able-period-col-excused {
  color: #000;
  box-shadow: inset 2px 0 0 #000, inset -2px 0 0 #000, inset 0 3px 0 #000;
}

.schedule-table thead .able-period-col-green {
  background: rgba(89, 173, 114, 0.18);
}

.schedule-table thead .able-period-col-yellow {
  background: rgba(212, 173, 36, 0.22);
}

.schedule-table thead .able-period-col-red {
  background: rgba(215, 111, 104, 0.2);
}

.schedule-table thead .able-period-col-excused {
  background: rgba(89, 173, 114, 0.12);
}

.able-period-state-excused {
  border-width: 2px;
  border-color: #59ad72;
  box-shadow: 0 0 0 1px rgba(89, 173, 114, 0.26), 0 3px 8px rgba(76, 175, 80, 0.08);
}

.able-period-state-excused > .able-period-header {
  box-shadow: inset 4px 0 0 #59ad72;
  background: linear-gradient(to right, rgba(89, 173, 114, 0.07), rgba(89, 173, 114, 0.015) 28%, rgba(255, 255, 255, 0) 52%);
}

.able-period-body {
  padding: 0.7rem;
  background: #fff;
}

/* ✅ better look on intermediate widths */
.able-accordion-intermediate .able-period-accordion {
  border-radius: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(21, 52, 84, 0.08);
}

.able-accordion-intermediate .able-period-header {
  background: linear-gradient(to bottom, #d9ebf8, #cfe3f4);
  padding: 1rem 1.1rem;
  min-height: 56px;
}

.able-accordion-intermediate .able-period-title {
  font-size: 1rem;
  font-weight: 700;
}

.able-accordion-intermediate .able-period-arrow {
  font-size: 1.05rem;
}

.able-accordion-intermediate .able-period-body {
  padding: 1rem;
}

.able-accordion-intermediate .schedule-table {
  width: 100%;
  table-layout: fixed;
  font-size: 0.95rem;
}

.able-accordion-intermediate .schedule-table th,
.able-accordion-intermediate .schedule-table td {
  padding: 0.45rem 0.35rem;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.able-accordion-intermediate .schedule-table th:first-child,
.able-accordion-intermediate .schedule-table td:first-child {
  width: 72px;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .able-accordion-body {
    padding: 0.5rem;
  }

  .able-attendance-box,
  .able-summary-box,
  .able-calendar-box {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }

  .able-flex-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .able-header {
    flex-wrap: wrap;
    align-items: center;
  }

  .able-header .accordion-arrow {
    margin-left: auto;
  }

  .able-period-accordion {
    border: 1px solid #d9dee7;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 0;
    overflow: hidden;
  }

  .able-period-header {
    width: 100%;
    border: none;
    background: #f7f9fc;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }

  .able-period-title {
    font-weight: 700;
    line-height: 1.25;
  }

  .able-period-badge {
    min-width: 1.35rem;
    height: 1.35rem;
    font-size: 0.74rem;
  }

  .able-period-arrow {
    flex: 0 0 auto;
    font-size: 0.95rem;
  }

  .able-period-body {
    padding: 0.5rem;
    overflow-x: hidden;
  }

  .able-period-body .schedule-table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.92rem;
  }

  .able-period-body .schedule-table th,
  .able-period-body .schedule-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
    padding: 0.45rem 0.35rem;
  }

  .able-period-body .schedule-table th:first-child,
  .able-period-body .schedule-table td:first-child {
    width: 34%;
  }

  .able-period-body .schedule-table th:not(:first-child),
  .able-period-body .schedule-table td:not(:first-child) {
    width: 66%;
  }

  .able-period-body .schedule-table input,
  .able-period-body .schedule-table select,
  .able-period-body .schedule-table textarea,
  .able-period-body .schedule-table button {
    max-width: 100%;
    box-sizing: border-box;
  }

  .able-period-body .pill,
  .able-period-body .score-pill,
  .able-period-body .comment-pill,
  .able-period-body .data-pill {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .able-period-empty {
    border: 1px solid #d9dee7;
    border-radius: 10px;
    background: #fff;
    padding: 0.85rem;
  }
  
  .able-table-container.able-period-grid {
    grid-template-columns: 1fr;
  }

  .able-period-header,
  .able-period-header:visited,
  .able-period-header:hover,
  .able-period-header:active {
    color: #1f2937 !important;
    opacity: 1 !important;
  }

  .able-period-title,
  .able-period-arrow {
    color: inherit !important;
    opacity: 1 !important;
  }

  .able-period-accordion:not(.open) .able-period-header {
    background: #f3f4f6;
  }

  .able-period-accordion.open .able-period-header {
    background: #2f78a8;
    color: #fff !important;
  }

  .able-period-accordion.open .able-period-title,
  .able-period-accordion.open .able-period-arrow {
    color: inherit !important;
  }

  .able-period-state-green {
    border-width: 2px;
    border-color: #59ad72;
    box-shadow: 0 0 0 1px rgba(89, 173, 114, 0.26), 0 3px 8px rgba(76, 175, 80, 0.08);
  }

  .able-period-state-green .able-period-header,
  .able-period-state-green.open .able-period-header {
    box-shadow: inset 4px 0 0 #59ad72;
    background: linear-gradient(to right, rgba(89, 173, 114, 0.07), rgba(89, 173, 114, 0.015) 28%, rgba(255, 255, 255, 0) 52%);
    color: inherit !important;
  }

  .able-period-state-yellow {
    border-width: 2px;
    border-color: #d4ad24;
    box-shadow: 0 0 0 1px rgba(212, 173, 36, 0.28), 0 3px 8px rgba(235, 179, 0, 0.09);
  }

  .able-period-state-yellow .able-period-header,
  .able-period-state-yellow.open .able-period-header {
    box-shadow: inset 4px 0 0 #d4ad24;
    background: linear-gradient(to right, rgba(212, 173, 36, 0.08), rgba(212, 173, 36, 0.018) 28%, rgba(255, 255, 255, 0) 52%);
    color: inherit !important;
  }

  .able-period-state-red,
  .able-period-state-unexcused {
    border-width: 2px;
    border-color: #d76f68;
    box-shadow: 0 0 0 1px rgba(215, 111, 104, 0.26), 0 3px 8px rgba(211, 76, 66, 0.08);
  }

  .able-period-state-red .able-period-header,
  .able-period-state-red.open .able-period-header,
  .able-period-state-unexcused .able-period-header,
  .able-period-state-unexcused.open .able-period-header {
    box-shadow: inset 4px 0 0 #d76f68;
    background: linear-gradient(to right, rgba(215, 111, 104, 0.08), rgba(215, 111, 104, 0.018) 28%, rgba(255, 255, 255, 0) 52%);
    color: inherit !important;
  }

  .able-period-state-excused {
    border-width: 2px;
    border-color: #59ad72;
    box-shadow: 0 0 0 1px rgba(89, 173, 114, 0.26), 0 3px 8px rgba(76, 175, 80, 0.08);
  }

  .able-period-state-excused .able-period-header,
  .able-period-state-excused.open .able-period-header {
    box-shadow: inset 4px 0 0 #59ad72;
    background: linear-gradient(to right, rgba(89, 173, 114, 0.07), rgba(89, 173, 114, 0.015) 28%, rgba(255, 255, 255, 0) 52%);
    color: inherit !important;
  }
}

@media (max-width: 1000px) {
  .schedule-mobile-card {
    border: 1px solid #d9dee7;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 0.85rem;
    overflow: hidden;
  }

  .schedule-mobile-card.ended {
    background: #fafafa;
  }

  .schedule-mobile-card-header {
    width: 100%;
    border: none;
    background: #f7f9fc;
    padding: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: #111827;
  }

  .schedule-mobile-card.open .schedule-mobile-card-header {
    background: #2f78a8;
    color: #fff;
  }

  .schedule-mobile-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
  }

  .schedule-mobile-card-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .schedule-mobile-card-arrow {
    flex: 0 0 auto;
    font-size: 0.95rem;
  }

  .schedule-mobile-card-body {
    padding: 0.85rem;
  }

  .schedule-mobile-chip {
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    align-self: flex-start;
  }

  .schedule-mobile-card.open .schedule-mobile-chip {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
  }

  .schedule-mobile-grid {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

  .schedule-mobile-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .schedule-mobile-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7280;
  }

  .schedule-mobile-value {
    font-size: 0.96rem;
    color: #111827;
    word-break: break-word;
  }

  .schedule-mobile-card input,
  .schedule-mobile-card select,
  .schedule-mobile-card button {
    max-width: 100%;
    box-sizing: border-box;
  }

  .schedule-mobile-card input[type="text"],
  .schedule-mobile-card input[type="number"],
  .schedule-mobile-card select {
    width: 100%;
    padding: 0.55rem 0.65rem;
  }

  .schedule-mobile-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
  }

  .schedule-mobile-actions button {
    flex: 1 1 140px;
  }

  .schedule-mobile-readonly {
    font-size: 0.92rem;
    color: #888;
  }

  .schedule-mobile-error {
    margin-top: 0.65rem;
    color: #c00;
    font-size: 0.9rem;
  }

  .schedule-period-empty {
    border: 1px solid #d9dee7;
    border-radius: 10px;
    background: #fff;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
  }
}

.modal-body.two-col {
    display: flex;
    gap: 20px;
}

.sidebar {
    width: 35%;
}

.mapping-container {
    width: 65%;
}

/* MOBILE */
@media (max-width: 1000px) {

    #draggable-link-goals-modal {
        width: 95%;
        height: 90vh;
        overflow-y: auto;
    }

    .modal-body.two-col {
        flex-direction: column;
    }

    .sidebar,
    .mapping-container {
        width: 100%;
    }

    .modal-footer {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    #add-mapping-btn {
        width: 100%;
    }

}

#link-goals-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 20px;
}

#link-goals-modal .modal-header h2 {
    margin: 0;
    text-align: center;
    font-size: 22px;
    line-height: 1.2;
}

#link-goals-modal .modal-header .close {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 22px;
    cursor: pointer;
}

@media (max-width:1000px){

    #link-goals-modal #draggable-link-goals-modal {
        width:95%;
        max-width:95%;
        margin:20px auto;
    }

}